/* ==========================================================================
   HelMed — website stylesheet
   Single file, no build step, no CDN.
   Written with CSS logical properties throughout so an Arabic RTL version
   can be added later by setting dir="rtl" on <html> — no rule rewrites.
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset and base elements
   3.  Layout primitives
   4.  Typography
   5.  Buttons and links
   6.  Site header and navigation
   7.  Hero
   8.  Bands and section furniture
   9.  Cards and grids
   10. Steps (How it works)
   11. Screenshots
   12. Requirements and download
   13. Pricing
   14. FAQ
   15. Contact and footer
   16. Placeholder markers
   17. Motion and scroll reveal
   18. Utilities
   19. Print
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   The palette is taken from the HelMed application itself so the site reads
   as the same product. --mint-deep is the one derived value: the app mint is
   not AA-legible as text on a light ground, so a darkened shade is used for
   links and small text on off-white. See README.
   ========================================================================== */

:root {
  /* Brand */
  --green-1:   #032823;   /* Deep green — headers, hero ground, footer      */
  --green-2:   #062f2b;   /* Gradient partner                               */
  --green-3:   #073a32;   /* Gradient end                                   */
  --mint:      #17b07f;   /* Accent — primary buttons, highlights           */
  --mint-br:   #35d6a4;   /* Bright mint — hover, small accents, rules      */
  --mint-deep: #0d7a57;   /* Derived: accent text on light grounds (AA)     */
  --ink:       #15241f;   /* Body text                                      */
  --hairline:  #d7e6e8;   /* Borders, dividers                              */
  --paper:     #f7faf9;   /* Page ground                                    */

  /* Derived neutrals */
  --white:     #ffffff;
  --ink-soft:  #41544e;   /* Secondary text on light — AA on --paper        */
  --on-dark:   #e8f3ef;   /* Body text on deep green                        */
  --on-dark-2: #b9d2c9;   /* Secondary text on deep green                   */
  --rule-dark: rgba(232, 243, 239, 0.16);

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Shape */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  /* Elevation — restrained; this is not a consumer app */
  --shadow-1: 0 1px 2px rgba(3, 40, 35, 0.06);
  --shadow-2: 0 6px 24px rgba(3, 40, 35, 0.08);
  --shadow-3: 0 18px 48px rgba(3, 40, 35, 0.16);

  /* Measure */
  --measure: 62ch;
  --wrap: 1160px;
  --wrap-narrow: 820px;

  /* Type — system stack: no web font, no flash, no CDN dependency */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-num: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas,
              "Liberation Mono", monospace;
}


/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 5.5rem; /* clears the sticky header on anchors */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;         /* 17px — much of this is read on phones    */
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* belt and braces against 360px overflow   */
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--hairline);
  margin-block: var(--s-6);
}

::selection {
  background: var(--mint-br);
  color: var(--green-1);
}

:focus-visible {
  outline: 3px solid var(--mint-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.site-header :focus-visible,
.hero :focus-visible,
.band-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--mint-br);
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: 100;
  background: var(--mint);
  color: var(--green-1);
  font-weight: 700;
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; }


/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.wrap-narrow { max-inline-size: var(--wrap-narrow); }

section { scroll-margin-block-start: 5.5rem; }

.section { padding-block: var(--s-8); }

@media (min-width: 768px) {
  .section { padding-block: var(--s-9); }
}

.section-head {
  max-inline-size: var(--measure);
  margin-block-end: var(--s-6);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin-block-end: var(--s-2);
}

.band-dark .eyebrow { color: var(--mint-br); }


/* ==========================================================================
   4. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  line-height: 1.15;
  margin-block: 0 var(--s-3);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 750; }
h3 { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin-block: 0 var(--s-4); max-inline-size: var(--measure); }
p:last-child { margin-block-end: 0; }

.lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.6;
}

.band-dark .lead { color: var(--on-dark-2); }

small, .small { font-size: 0.875rem; line-height: 1.55; }

.muted { color: var(--ink-soft); }
.band-dark .muted { color: var(--on-dark-2); }

strong, b { font-weight: 700; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

code, kbd, .mono {
  font-family: var(--font-num);
  font-size: 0.9em;
}

code {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  overflow-wrap: anywhere;
}

.band-dark code {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--rule-dark);
  color: var(--on-dark);
}


/* ==========================================================================
   5. Buttons and links
   ========================================================================== */

a {
  color: var(--mint-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--green-1); }

/* Links on dark grounds. Buttons are excluded: .hero a would otherwise
   outrank .btn-primary and paint mint text on a mint button. */
.band-dark a:not(.btn),
.hero a:not(.btn),
.site-footer a:not(.btn) { color: var(--mint-br); }

.band-dark a:not(.btn):hover,
.hero a:not(.btn):hover,
.site-footer a:not(.btn):hover { color: var(--white); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, color 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary: mint ground with deep-green text. White on mint fails AA;
   deep green on mint passes comfortably. */
.btn-primary { background: var(--mint); color: var(--green-1); }
.btn-primary:hover { background: var(--mint-br); color: var(--green-1); }

.btn-secondary {
  background: transparent;
  color: var(--green-1);
  border-color: var(--green-1);
}
.btn-secondary:hover { background: var(--green-1); color: var(--white); }

.band-dark .btn-secondary,
.hero .btn-secondary,
.site-header .btn-secondary {
  color: var(--white);
  border-color: rgba(232, 243, 239, 0.55);
}
.band-dark .btn-secondary:hover,
.hero .btn-secondary:hover,
.site-header .btn-secondary:hover {
  background: rgba(232, 243, 239, 0.12);
  color: var(--white);
  border-color: var(--mint-br);
}

.btn-quiet {
  background: transparent;
  color: var(--mint-br);
  padding-inline: var(--s-2);
  text-decoration: underline;
}
.btn-quiet:hover { color: var(--white); }

.btn-sm { padding: 0.55rem 0.9rem; font-size: 0.9375rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-block-start: var(--s-6);
}


/* ==========================================================================
   6. Site header and navigation
   The nav needs no JavaScript: on narrow screens the link row scrolls
   sideways inside its own container rather than collapsing behind a
   script-driven hamburger.
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: linear-gradient(135deg, var(--green-1), var(--green-2) 55%, var(--green-3));
  color: var(--on-dark);
  border-block-end: 1px solid var(--rule-dark);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--white);
  flex: 0 0 auto;
}

.brand-mark { inline-size: 34px; block-size: 34px; flex: 0 0 auto; }

.brand-name {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.brand-sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-br);
}

.site-nav {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  white-space: nowrap;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  color: var(--on-dark);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav a.is-active {
  background: rgba(232, 243, 239, 0.1);
  color: var(--white);
}

.header-cta { flex: 0 0 auto; }

@media (max-width: 899px) {
  .header-cta { display: none; }
}

@media (max-width: 599px) {
  .site-header .wrap {
    flex-wrap: wrap;
    padding-block: var(--s-3);
    gap: var(--s-2);
  }
  .site-nav {
    order: 3;
    inline-size: 100%;
    margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
  }
}


/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  background: linear-gradient(150deg, var(--green-1) 0%, var(--green-2) 45%, var(--green-3) 100%);
  color: var(--on-dark);
  padding-block: var(--s-8) var(--s-9);
  position: relative;
  overflow: hidden;
}

.hero::after {
  /* faint mint wash, purely decorative */
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -20%;
  inline-size: 60%;
  block-size: 120%;
  background: radial-gradient(closest-side, rgba(53, 214, 164, 0.14), transparent);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero h1 { color: var(--white); max-inline-size: 18ch; }

.hero-sub {
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  color: var(--on-dark);
  max-inline-size: 54ch;
  margin-block-start: var(--s-4);
}

.hero-grid { display: grid; gap: var(--s-7); }

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--s-8);
  }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(53, 214, 164, 0.14);
  border: 1px solid rgba(53, 214, 164, 0.4);
  color: var(--mint-br);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-block-end: var(--s-5);
}

.hero-facts {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: var(--s-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  border-block-start: 1px solid var(--rule-dark);
}

.hero-facts li {
  color: var(--on-dark-2);
  font-size: 0.9375rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.hero-facts li::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--mint-br);
  flex: 0 0 auto;
}


/* ==========================================================================
   8. Bands and section furniture
   ========================================================================== */

.band-dark {
  background: linear-gradient(140deg, var(--green-1), var(--green-2) 60%, var(--green-3));
  color: var(--on-dark);
}
.band-dark h2, .band-dark h3 { color: var(--white); }

.band-tint { background: var(--white); border-block: 1px solid var(--hairline); }

.pull {
  font-size: clamp(1.375rem, 3.4vw, 2rem);
  font-weight: 750;
  line-height: 1.3;
  color: var(--white);
  max-inline-size: 22ch;
  letter-spacing: -0.015em;
}

.rule-accent {
  inline-size: 56px;
  block-size: 4px;
  background: var(--mint);
  border-radius: 2px;
  margin-block-end: var(--s-5);
}


/* ==========================================================================
   9. Cards and grids
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .grid-2, .grid-3, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.card h3 { margin: 0; }
.card p { max-inline-size: none; }

.card-icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  background: rgba(23, 176, 127, 0.12);
  color: var(--mint-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.card-icon svg { inline-size: 22px; block-size: 22px; }

.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.tick-list li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: 0.9688rem;
  line-height: 1.5;
}

.tick-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px;
  background: var(--mint);
}

.band-dark .tick-list li::before { background: var(--mint-br); }

/* Alternating blocks used in "Built for Lebanon" */
.feature-row {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--hairline);
}

.feature-row:first-of-type { border-block-start: 0; padding-block-start: 0; }

@media (min-width: 820px) {
  .feature-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-7);
    align-items: start;
  }
}

.stat {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green-1);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-block-start: var(--s-2);
}

/* Only narrow the label once it sits in its own column */
@media (min-width: 820px) {
  .stat-label { max-inline-size: 26ch; }
}


/* ==========================================================================
   10. Steps (How it works)
   ========================================================================== */

.steps {
  list-style: none;
  counter-reset: step;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.steps li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5) var(--s-5);
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-block-start: calc(var(--s-5) * -1);
  inset-inline-start: var(--s-5);
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--green-1);
  font-weight: 800;
  font-size: 1.125rem;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}


/* ==========================================================================
   11. Screenshots
   ========================================================================== */

.shot {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  margin: 0;
}

.shot img { inline-size: 100%; }

.shot figcaption {
  padding: var(--s-3) var(--s-4);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  border-block-start: 1px solid var(--hairline);
}

.shot-hero {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  border-color: rgba(232, 243, 239, 0.25);
}

/* Visible stand-in until real screenshots are supplied */
.shot-placeholder {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-5);
  background: repeating-linear-gradient(135deg, #eef5f3 0 12px, #e6efed 12px 24px);
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
}


/* ==========================================================================
   12. Requirements and download
   ========================================================================== */

.panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-5);
}

@media (min-width: 768px) { .panel { padding: var(--s-6); } }

.band-dark .panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--rule-dark);
}

.spec-list { margin: 0; display: grid; gap: 0; }

.spec-list div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--hairline);
}
.spec-list div:first-child { border-block-start: 0; padding-block-start: 0; }

.band-dark .spec-list div { border-block-start-color: var(--rule-dark); }

@media (min-width: 560px) {
  .spec-list div {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
  }
}

.spec-list dt { font-weight: 700; }
.spec-list dd { margin: 0; color: var(--ink-soft); }
.band-dark .spec-list dd { color: var(--on-dark-2); }

.checksum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-3);
}

.checksum code {
  flex: 1 1 20rem;
  min-inline-size: 0;
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.ol-steps {
  padding-inline-start: 1.25rem;
  display: grid;
  gap: var(--s-3);
  max-inline-size: var(--measure);
}

.ol-steps li { padding-inline-start: var(--s-2); }

.note {
  border-inline-start: 4px solid var(--mint);
  background: rgba(23, 176, 127, 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-5);
}

.note p { max-inline-size: none; }

.band-dark .note {
  background: rgba(53, 214, 164, 0.1);
  border-inline-start-color: var(--mint-br);
}


/* ==========================================================================
   13. Pricing
   ========================================================================== */

.price-grid {
  display: grid;
  gap: var(--s-5);
  margin-block-start: var(--s-6);
  align-items: stretch;
}

@media (min-width: 820px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.plan {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: var(--shadow-1);
}

.plan-featured {
  border-color: var(--mint);
  border-width: 2px;
  box-shadow: var(--shadow-2);
}

.plan-badge {
  align-self: start;
  background: rgba(23, 176, 127, 0.14);
  color: var(--mint-deep);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.plan h3 { margin: 0; }

.plan-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--green-1);
  padding-block: var(--s-2);
}

.plan .btn { margin-block-start: auto; }


/* ==========================================================================
   14. FAQ — <details>/<summary>, works with JavaScript disabled
   ========================================================================== */

.faq { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }

.faq details {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  padding-inline-end: 3rem;
  font-weight: 700;
  font-size: 1.0625rem;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--s-5);
  inset-block-start: 1.35rem;
  inline-size: 11px;
  block-size: 11px;
  border-inline-end: 2.5px solid var(--mint-deep);
  border-block-end: 2.5px solid var(--mint-deep);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq summary:hover { background: rgba(23, 176, 127, 0.05); }

.faq .faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--ink-soft); }
.faq .faq-body > :first-child { margin-block-start: 0; }


/* ==========================================================================
   15. Contact and footer
   ========================================================================== */

.contact-grid { display: grid; gap: var(--s-5); margin-block-start: var(--s-6); }

@media (min-width: 760px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-item {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: var(--s-5);
  background: rgba(255, 255, 255, 0.05);
}

.contact-item h3 { font-size: 1.0625rem; margin-block-end: var(--s-2); }

.site-footer {
  background: var(--green-1);
  color: var(--on-dark-2);
  padding-block: var(--s-7) var(--s-6);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  padding-block-end: var(--s-6);
  border-block-end: 1px solid var(--rule-dark);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--s-7);
  }
}

.footer-grid h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-br);
  margin-block-end: var(--s-3);
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.footer-base {
  padding-block-start: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: 0.875rem;
}

.footer-base p { max-inline-size: none; margin: 0; }


/* ==========================================================================
   16. Placeholder markers
   Deliberately off-palette so unfinished content is impossible to miss on
   the page. Every one is listed in README.md.
   ========================================================================== */

.ph {
  display: inline-block;
  background: #fff4d6;
  border: 1px dashed #a67c00;
  color: #5c4300;
  border-radius: 5px;
  padding: 0.05em 0.45em;
  font-weight: 700;
  font-size: 0.9375em;
  font-family: var(--font-num);
  overflow-wrap: anywhere;
}

.ph-block {
  display: block;
  padding: var(--s-4);
  margin-block: var(--s-4);
  line-height: 1.5;
  max-inline-size: var(--measure);
}


/* ==========================================================================
   17. Motion and scroll reveal
   Content is visible by default. The .js class is only set by script, so
   with JavaScript disabled nothing is ever hidden.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}


/* ==========================================================================
   18. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-block-start: var(--s-4); }
.mbs-5 { margin-block-start: var(--s-5); }
.mbs-6 { margin-block-start: var(--s-6); }
.mbe-0 { margin-block-end: 0; }


/* ==========================================================================
   19. Print
   ========================================================================== */

@media print {
  .site-header, .btn-row, .site-nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero::after { display: none !important; }
  .band-dark, .hero, .site-footer { background: #fff !important; color: #000 !important; }
  .band-dark h2, .band-dark h3, .hero h1, .pull { color: #000 !important; }
  .faq details { break-inside: avoid; }
}