/* =============================================================================
   Miracle v3 — base.css
   OWNER: MCL-V3-001-T10 (site chassis). Page agents: do NOT edit this file.
   Put page-specific rules in css/<page>.css.

   Full contract, including the CSP rules and the file-ownership map, is in
   docs/site/v3/README.md. Read that before you write a line of markup.

   ---------------------------------------------------------------------------
   1. WHAT YOU MAY NOT DO  (enforced by the server's Content-Security-Policy,
      lead-capture/src/lib.rs:207 — a violation is a blank page, not a warning)
   ---------------------------------------------------------------------------
     - no inline <script> blocks; no onclick=/onsubmit=/onchange= attributes
     - no native form POST (form-action 'none'). preventDefault() + fetch()
     - no external/CDN images; no data: URIs in <img src> OR in CSS
       background-image (both are governed by img-src 'self' — MEASURED, see
       README "CSP: measured, not assumed"). Use a real file under /media/ or
       an inline <svg> element. NEVER /img/ — that URL is shadowed in prod by
       an nginx rule that serves v1/v2 assets (see README "The /img/ trap")
     - no <iframe> of us anywhere (frame-ancestors 'none'), no <base> element
     - Google Fonts ARE allowed (style-src + font-src whitelist them)
     - inline style="" attributes ARE allowed ('unsafe-inline' in style-src)

   ---------------------------------------------------------------------------
   2. TOKENS — what each one is for
   ---------------------------------------------------------------------------
   Brand (from the approved v3 deck, docs/pitch/2026-09-24-miracle-vision-v3-deck.html):
     --ink      #123E4C  all body text, dark surfaces
     --teal     #087E91  primary brand accent; links, <em> emphasis
     --deep     #075A70  deepest teal; dark buttons, gradient start
     --deep2    #0B8F94  gradient end for .panel-gradient
     --mint     #55E9B2  the ACTION colour. Primary button only. Never body text
     --gold     #F5CE70  the RARE colour. Founding/limited things only
     --paper    #F8FBF8  page background
     --muted    #456365  secondary prose
     --line     #D9E7E0  every 1px border
     --cream    #EAFFEF  text on dark teal panels
   Activity (one per movement type — ◆ 12 added Trek):
     --walk #29C693   --run #FD914E   --hike #259CCA   --trek #F5CE70
   Derived surfaces:
     --surface  #FFFFFF  cards on --paper
     --surface-2 #EFF7F1 tinted section band
     --surface-3 #E5F2EA deeper tint / chip backgrounds
     --ink-2    #24494C  prose on tinted surfaces
   Layout:
     --shell    1180px   max content width
     --pad      fluid inline gutter (20px .. 72px). NEVER use vw padding directly
     --gap      default grid gap
   Radius:  --r-xs 8px  --r-sm 12px  --r-md 18px  --r-lg 26px  --r-pill 999px
   Space:   --s1 4 --s2 8 --s3 12 --s4 16 --s5 24 --s6 32 --s7 48 --s8 64 --s9 88
   Motion:  --dur 200ms  --ease cubic-bezier(.2,.7,.3,1)   (both no-op under
            prefers-reduced-motion)
   Shadow:  --shadow-1 resting card   --shadow-2 lifted/hover
   Type:    --heading Manrope   --body DM Sans

   ---------------------------------------------------------------------------
   3. BREAKPOINTS and why
   ---------------------------------------------------------------------------
   Mobile-first. Three min-width bands, chosen so that each width in the
   measured overflow gate (360/390/620/850/1150/1440) lands inside a band that
   the gate actually exercises:
     base            <= 620px   360, 390, 620   single column, nav collapsed
     @media >= 621px 621-850    850             two-up grids, header CTA appears
     @media >= 851px 851-1150   1150            nav goes inline, toggle hidden
     @media >=1151px 1151+      1440            full shell width, largest type
   Use these four bands and no others. A fifth breakpoint is a width the gate
   never tests, i.e. a width nobody checked.

   ---------------------------------------------------------------------------
   4. THE TYPE SCALE — read this before you touch a heading
   ---------------------------------------------------------------------------
   v2 set `letter-spacing:-3px` on an h1 that clamps 42px..72px. -3px is right
   at 72px and destroys the word at 42px, because tracking was absolute while
   size was fluid. Every tracking value in v3 is in `em`, so it scales with the
   glyph across the whole clamp range. If you add a heading, use em. Never px.

   ---------------------------------------------------------------------------
   5. NO HORIZONTAL OVERFLOW — the rules that keep the gate green
   ---------------------------------------------------------------------------
     - never use 100vw for width or padding (it includes the scrollbar)
     - every grid/flex child that holds text needs min-width:0 (base.css sets it
       on .grid-* > * for you). If you nest another grid, set it again
     - long unbroken strings (URLs, IDs like MIR-82941) need .break or
       overflow-wrap:anywhere
     - absolutely-positioned decoration must live inside a
       position:relative;overflow:hidden parent
     - test with docs/site/v3/tests/overflow-check.mjs before you report done
   ============================================================================= */

:root {
  --ink:#123E4C;
  --teal:#087E91;
  --deep:#075A70;
  --deep2:#0B8F94;
  --mint:#55E9B2;
  --gold:#F5CE70;
  --paper:#F8FBF8;
  --muted:#456365;
  --line:#D9E7E0;
  --error:#8C441A; --error-bg:#FCE9DE;   /* form errors; always paired with a word, never colour alone */
  --deep-prose:#C9E9DC;                  /* prose on --deep / .panel-gradient bands */
  --cream:#EAFFEF;

  --walk:#29C693;
  --run:#FD914E;
  --hike:#259CCA;
  --trek:#F5CE70;

  --surface:#FFFFFF;
  --surface-2:#EFF7F1;
  --surface-3:#E5F2EA;
  --ink-2:#24494C;
  --on-mint:#064A46;
  --focus:#0E7C6A;

  --heading:'Manrope','Noto Sans Devanagari',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --body:'DM Sans','Noto Sans Devanagari',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;

  --shell:1180px;
  --pad:clamp(20px,4.6vw,72px);
  --gap:clamp(16px,2.4vw,28px);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  --dur:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  --shadow-1:0 1px 2px rgba(5,58,64,.04), 0 8px 24px rgba(5,58,64,.06);
  --shadow-2:0 2px 6px rgba(5,58,64,.06), 0 18px 46px rgba(5,58,64,.12);

  --header-h:68px;
}

/* ---------- reset ---------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:500;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* NOTE: there is deliberately NO `overflow-x:hidden` on html or body.
     It would CLIP the overflow instead of fixing it, and
     document.documentElement.scrollWidth would then stop growing — which makes
     tests/overflow-check.mjs pass on a broken page. A guard that hides the
     failure is BUG-MIRACLE-007 all over again. The checker fails the build if
     it finds overflow-x:hidden on html or body. Fix the offending element. */
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd { margin:0; }
ul,ol { margin:0; padding:0; }
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
hr { border:0; border-top:1px solid var(--line); margin:var(--s7) 0; }
:target { scroll-margin-top:calc(var(--header-h) + 16px); }

/* ---------- typography ----------------------------------------------------- */
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {
  font-family:var(--heading);
  font-weight:800;
  color:var(--ink);
  text-wrap:balance;
}
h1,.h1 { font-size:clamp(2.125rem,1.34rem + 3.4vw,4.25rem); line-height:1.07; letter-spacing:-.032em; }
h2,.h2 { font-size:clamp(1.75rem,1.24rem + 2.2vw,3.125rem); line-height:1.13; letter-spacing:-.028em; }
h3,.h3 { font-size:clamp(1.25rem,1.09rem + .7vw,1.6rem);   line-height:1.25; letter-spacing:-.018em; font-weight:750; }
h4,.h4 { font-size:1.0625rem; line-height:1.4; letter-spacing:-.01em; font-weight:700; }
h5,.h5 { font-size:.9375rem; line-height:1.45; font-weight:700; }
p { text-wrap:pretty; }
em { font-style:normal; color:var(--teal); }
strong { font-weight:700; }
small { font-size:.8125rem; }

/* <p class="lead">   one sentence under an h1/h2 */
.lead { font-size:clamp(1rem,.94rem + .3vw,1.1875rem); line-height:1.7; color:var(--ink-2); max-width:56ch; }
/* <p class="body-copy">   ordinary prose */
.body-copy { font-size:.9375rem; line-height:1.85; color:var(--muted); max-width:62ch; }
/* <p class="fine-print">   legal / caveat / GOLDEN-079 qualifier */
.fine-print { font-size:.8125rem; line-height:1.75; color:var(--muted); max-width:72ch; }
/* <span class="eyebrow">HOW IT WORKS</span>   above a heading */
.eyebrow {
  display:block; font-family:var(--heading); font-size:.6875rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:var(--s3);
}
.break { overflow-wrap:anywhere; word-break:break-word; }
.nowrap { white-space:nowrap; }

/* ---------- links ---------------------------------------------------------- */
/* <a class="text-link" href="/faq/">Read the FAQ <span aria-hidden="true">-></span></a> */
.text-link {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--heading); font-size:.875rem; font-weight:700; color:var(--deep);
  border-bottom:1px solid rgba(7,90,112,.35); padding-bottom:2px;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.text-link:hover { color:var(--teal); border-bottom-color:var(--teal); }
.prose a { color:var(--deep); text-decoration:underline; text-underline-offset:3px; }

/* ---------- buttons -------------------------------------------------------- */
/* <a class="button" href="/join/">Be a founding member</a>      mint, one per view
   <button class="button button--ghost" type="button">Cancel</button>
   <a class="button button--gold" href="/founding/">...</a>      founding only
   <a class="button button--sm" href="...">...</a>               header / inline  */
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  padding:15px 24px; min-height:48px;
  border-radius:var(--r-sm);
  background:var(--mint); color:var(--on-mint);
  font-family:var(--heading); font-size:.875rem; font-weight:800; letter-spacing:.005em;
  line-height:1.2; text-align:center;
  box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.button:hover { background:#74F0C4; transform:translateY(-2px); box-shadow:var(--shadow-2); }
.button:active { transform:translateY(0); }
.button--sm { padding:11px 16px; min-height:40px; font-size:.75rem; gap:var(--s2); }
.button--lg { padding:18px 30px; min-height:56px; font-size:.9375rem; }
.button--gold { background:var(--gold); color:#4A3305; }
.button--gold:hover { background:#FBDD92; }
.button--dark { background:var(--deep); color:#EAFFEF; }
.button--dark:hover { background:var(--deep2); }
.button--ghost {
  background:transparent; color:var(--deep);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.button--ghost:hover { background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--teal); }
.button--block { width:100%; }
.button[disabled],.button[aria-disabled="true"] { opacity:.55; cursor:default; transform:none; box-shadow:var(--shadow-1); }

/* ---------- pills & chips -------------------------------------------------- */
/* <span class="pill">Kathmandu first</span> */
.pill {
  display:inline-flex; align-items:center; gap:var(--s2);
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-pill); padding:7px 14px;
  font-family:var(--heading); font-size:.6875rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.pill--mint { background:var(--surface-3); border-color:#BCE4CE; color:#12604F; }
.pill--gold { background:#FDF4DE; border-color:#EFD79B; color:#6B4E08; }

/* <span class="chip" data-activity="trek">Trek</span>   walk|run|hike|trek */
.chip {
  display:inline-flex; align-items:center; gap:var(--s2);
  border-radius:var(--r-pill); padding:8px 15px;
  font-family:var(--heading); font-size:.8125rem; font-weight:800;
  background:var(--surface-3); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.chip::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--walk); flex:none; }
.chip[data-activity="run"]::before  { background:var(--run); }
.chip[data-activity="hike"]::before { background:var(--hike); }
.chip[data-activity="trek"]::before { background:var(--trek); }
.chip-row { display:flex; flex-wrap:wrap; gap:var(--s2); }

/* ---------- layout --------------------------------------------------------- */
/* <div class="wrap"> ... </div>   the ONLY horizontal gutter. Do not add your own */
.wrap { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow { max-width:780px; }
.wrap--prose  { max-width:680px; }

/* <section class="section"> <div class="wrap"> ... */
.section { padding-block:clamp(48px,7vw,96px); }
.section--tight { padding-block:clamp(32px,4.5vw,56px); }
.section--tint  { background:var(--surface-2); }
.section--deep  { background:var(--deep); color:var(--cream); }
/* Element AND utility-class forms, plus every prose role that can appear on a
   dark band. Three separate page agents (T11, T13, T14) each re-solved this
   locally because the original rule only matched h1-h4 by element: a
   <p class="h2">, a .lead, a <dt>/<dd> or a .text-link fell through to
   var(--ink) and rendered near-invisible on deep teal. Fixed centrally. */
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4,
.section--deep .h1,.section--deep .h2,.section--deep .h3,.section--deep .h4,
.section--deep h5,.section--deep .h5,.section--deep dt { color:#FFFFFF; }
.section--deep .body-copy,.section--deep .fine-print,
.section--deep .lead,.section--deep dd,
.section--deep .list-check,.section--deep li { color:var(--deep-prose); }
.section--deep em { color:#7EF1C0; }   /* --teal is unreadable on --deep; matches .panel-gradient em */
.section--deep .text-link { color:var(--cream); border-bottom-color:rgba(234,255,239,.45); }
.panel-gradient .text-link { color:var(--cream); border-bottom-color:rgba(234,255,239,.45); }
.panel-gradient dt { color:#FFFFFF; }
.panel-gradient dd,.panel-gradient li { color:#D2EFDF; }
.section--deep .eyebrow { color:var(--gold); }
.section + .section--tint, .section--tint + .section { border-top:1px solid var(--line); }

/* <div class="section-heading"> <div> eyebrow + h2 + lead </div> <a class="text-link">..</a> </div> */
.section-heading {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4);
  margin-bottom:clamp(28px,3.4vw,48px);
}
.section-heading > :first-child { min-width:0; }

.stack   { display:flex; flex-direction:column; gap:var(--s5); align-items:flex-start; }
.stack--tight { gap:var(--s3); }
.row     { display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; }
.grid-2,.grid-3,.grid-4 { display:grid; gap:var(--gap); grid-template-columns:1fr; }
.grid-2 > *,.grid-3 > *,.grid-4 > * { min-width:0; }
.grid--wide-first { }

/* ---------- cards ---------------------------------------------------------- */
/* <article class="card"> <h3>..</h3> <p class="body-copy">..</p> </article> */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(20px,2.6vw,32px);
  display:flex; flex-direction:column; gap:var(--s3); min-width:0;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--flat { box-shadow:none; }
.card--tint { background:var(--surface-2); }
.card--lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-2); }
.card__media { margin:calc(-1 * clamp(20px,2.6vw,32px)); margin-bottom:var(--s4); border-radius:var(--r-md) var(--r-md) 0 0; overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; }
.card > .text-link { margin-top:auto; }

/* the v2 "founding" gradient panel, carried forward */
/* <div class="panel-gradient"> <div class="wrap"> ... </div> </div> */
.panel-gradient {
  background:linear-gradient(115deg,var(--deep),var(--deep2));
  color:var(--cream);
  border-radius:var(--r-lg);
  padding:clamp(26px,4vw,56px);
  min-width:0;
}
/* Element AND utility-class forms. A <p class="h2"> inside a gradient panel
   otherwise falls through to var(--ink) — near-invisible on deep teal. */
.panel-gradient h1,.panel-gradient h2,.panel-gradient h3,
.panel-gradient .h1,.panel-gradient .h2,.panel-gradient .h3 { color:#FFFFFF; }
.panel-gradient .lead { color:var(--cream); }
.panel-gradient em { color:#7EF1C0; }
.panel-gradient .body-copy { color:#D2EFDF; }
.panel-gradient .fine-print { color:#A9D8C8; }
.panel-gradient .eyebrow { color:var(--gold); }

/* <figure class="media"> <img ...> <figcaption>..</figcaption> </figure>
   ALWAYS give <img> width+height attributes so the page does not reflow. */
.media { position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--surface-3); }
.media img { width:100%; height:100%; object-fit:cover; }
.media figcaption { font-size:.6875rem; letter-spacing:.06em; color:var(--muted); margin-top:var(--s2); }
.media--scrim::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,60,72,.05) 0%,rgba(7,60,72,.62) 100%);
}
.ratio-16x9 { aspect-ratio:16/9; }
.ratio-4x3  { aspect-ratio:4/3; }
.ratio-1x1  { aspect-ratio:1/1; }

/* ---------- notes / callouts ----------------------------------------------- */
/* <p class="note">There's no confirmed launch date yet.</p> */
.note {
  border-left:3px solid var(--mint); background:var(--surface-2);
  padding:var(--s4) var(--s5); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.875rem; line-height:1.75; color:var(--ink-2);
}
.note--gold { border-left-color:var(--gold); background:#FDF7E7; }

/* ---------- lists ---------------------------------------------------------- */
.list-check { list-style:none; display:flex; flex-direction:column; gap:var(--s3); }
.list-check > li { position:relative; padding-left:28px; font-size:.9375rem; line-height:1.7; color:var(--ink-2); }
.list-check > li::before {
  content:""; position:absolute; left:0; top:.55em; width:14px; height:14px;
  border-radius:50%; background:var(--mint); box-shadow:inset 0 0 0 3px var(--paper);
}
.prose ul,.prose ol { padding-left:1.25em; }
.prose li { margin-bottom:var(--s2); }

/* ---------- forms ---------------------------------------------------------- */
/* EVERY form must preventDefault() and fetch() — form-action 'none' blocks POST.
   <form class="form" id="x" novalidate>
     <div class="field"><label for="name">Name</label><input id="name" name="name" required></div>
     <p class="form-status" id="x-status" role="status" aria-live="polite" hidden></p>
     <button class="button button--block" type="submit">Join</button>
   </form>                                                                      */
.form { display:flex; flex-direction:column; gap:var(--s4); max-width:520px; width:100%; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label { font-family:var(--heading); font-size:.8125rem; font-weight:700; color:var(--ink); }
.field .hint { font-size:.75rem; color:var(--muted); }
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea {
  width:100%; max-width:100%;
  padding:13px 14px; border:1px solid #BFDCD1; border-radius:var(--r-xs);
  background:var(--surface); font-size:1rem; line-height:1.4;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,126,145,.18); }
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:#B3341F; }
.field--inline { flex-direction:row; align-items:flex-start; gap:var(--s3); }
.consent { display:flex; gap:var(--s3); align-items:flex-start; font-size:.8125rem; line-height:1.65; color:var(--ink-2); }
.consent input[type=checkbox] { margin-top:3px; flex:none; width:18px; height:18px; accent-color:var(--teal); }
/* spam trap — keep it off-screen, never display:none (bots skip hidden fields) */
/* Honeypot. MUST stay inside the viewport box: an element parked at
   left:-10000px is reported by tests/overflow-check.mjs assertion 2 on EVERY
   page that ships a form, and an element's own overflow:hidden does not clip
   itself. Clipped + transparent + inert instead, so a bot still sees a real
   field and a human never does. (BUG found by T14, fixed centrally so /join/,
   / and /founding/ do not each carry a local shield.) */
.form-trap { position:absolute; left:0; top:0; width:1px; height:1px;
             overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
.form-status {
  font-size:.8125rem; line-height:1.7; padding:12px 14px; border-radius:var(--r-xs);
  background:var(--surface-3); color:#12604F; margin:0;
}
.form-status[data-state="error"] { background:var(--error-bg); color:var(--error); }
.form-status[data-state="working"] { background:var(--surface-2); color:var(--ink-2); }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { font-family:var(--heading); font-size:.8125rem; font-weight:700; padding:0; margin-bottom:var(--s2); }

/* ---------- accessibility helpers ------------------------------------------ */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:var(--s4); top:-100px; z-index:60;
  background:var(--surface); color:var(--deep);
  padding:12px 18px; border-radius:var(--r-xs); box-shadow:var(--shadow-2);
  font-family:var(--heading); font-weight:700; font-size:.875rem;
  transition:top var(--dur) var(--ease);
}
.skip:focus { top:var(--s3); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:2px; }

/* ---------- header --------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(248,251,248,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner {
  display:flex; align-items:center; gap:var(--s4);
  min-height:var(--header-h); padding-block:10px;
}
.brand { display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; }
.brand > img { width:34px; height:22px; object-fit:contain; flex:none; }
.brand__name {
  font-family:var(--heading); font-size:1.25rem; font-weight:800;
  letter-spacing:.06em; line-height:1; color:var(--ink);
}
.brand__name small {
  display:block; font-size:.5rem; font-weight:700; letter-spacing:.13em;
  color:var(--muted); margin-top:5px; white-space:nowrap;
}
.site-header__cta { display:none; }

.nav-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none;
  border-radius:var(--r-xs); color:var(--deep);
  box-shadow:inset 0 0 0 1px var(--line);
}
.nav-toggle svg { width:20px; height:20px; }
.nav-toggle .nav-toggle__close { display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display:block; }

.site-nav { display:none; }
.site-nav[data-open="true"] {
  display:flex; flex-direction:column; gap:2px;
  position:absolute; left:0; right:0; top:100%;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-2);
  padding:var(--s3) var(--pad) var(--s5);
}
.site-nav a {
  font-family:var(--heading); font-size:.9375rem; font-weight:700; color:var(--ink);
  padding:12px 0; border-bottom:1px solid var(--line);
}
.site-nav a:last-of-type { border-bottom:0; }
.site-nav a[aria-current="page"] { color:var(--teal); }
.site-nav .button { margin-top:var(--s4); }

/* ---------- footer --------------------------------------------------------- */
.site-footer { background:var(--surface-2); border-top:1px solid var(--line); margin-top:clamp(48px,6vw,88px); }
.site-footer__inner { display:grid; gap:var(--s7); padding-block:clamp(40px,5vw,64px); grid-template-columns:1fr; }
.site-footer__brand { display:flex; flex-direction:column; gap:var(--s3); min-width:0; }
.site-footer__nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
.site-footer__col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.site-footer__col h2 {
  font-family:var(--heading); font-size:.6875rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.site-footer__col a { font-size:.875rem; color:var(--ink-2); }
.site-footer__col a:hover { color:var(--teal); }
.site-footer__legal {
  border-top:1px solid var(--line); padding-block:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
}

/* ---------- 621px and up --------------------------------------------------- */
@media (min-width:621px) {
  .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-header__cta { display:inline-flex; }
  .site-footer__nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .section-heading { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:var(--s6); }
  .section-heading > :first-child { flex:1 1 auto; }
}

/* ---------- 851px and up --------------------------------------------------- */
@media (min-width:851px) {
  :root { --header-h:76px; }
  .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .nav-toggle { display:none; }
  .brand > img { width:39px; height:25px; }
  .brand__name { font-size:1.4375rem; }
  .brand__name small { font-size:.5rem; }
  .site-nav,
  .site-nav[data-open="true"] {
    display:flex; flex-direction:row; align-items:center; gap:clamp(14px,1.8vw,28px);
    position:static; background:none; border:0; box-shadow:none; padding:0;
  }
  .site-nav a { font-size:.8125rem; padding:6px 0; border-bottom:0; white-space:nowrap; }
  .site-nav .button { display:none; }
  .site-footer__inner { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
  .site-footer__nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .site-footer__legal { flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s5); }
}

/* ---------- 1151px and up -------------------------------------------------- */
@media (min-width:1151px) {
  .site-nav { gap:30px; }
  .site-nav a { font-size:.875rem; }
}

/* ---------- language picker + Hindi / Nepali (js/i18n.js) ------------------ */
/* Hidden until a dictionary is applied, so a translated page never flashes English.
   i18n.js removes the attribute after apply, or after 2.5s no matter what. */
html[data-i18n-pending] body { visibility:hidden; }

.lang-pick {
  position:relative; display:inline-flex; align-items:center; flex:none;
  height:44px; border-radius:var(--r-xs); color:var(--deep);
  box-shadow:inset 0 0 0 1px var(--line); background:var(--surface);
}
.lang-pick[hidden] { display:none; }
.lang-pick__icon { position:absolute; left:10px; width:18px; height:18px; pointer-events:none; }
.lang-pick::after {
  content:""; position:absolute; right:11px; top:50%; width:7px; height:7px; margin-top:-5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); pointer-events:none;
}
.lang-pick__select {
  appearance:none; -webkit-appearance:none; border:0; background:transparent; color:inherit;
  height:44px; padding:0 30px 0 34px; border-radius:var(--r-xs); cursor:pointer;
  font-family:var(--heading); font-size:.875rem; font-weight:700; line-height:1.2;
}
.lang-pick__select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.nav-toggle { width:44px; height:44px; }

/* Mobile-first: on phones brand + picker + menu button share ~320px, so the picker
   drops its globe and the header gap tightens; 621px+ restores both (README §8). */
.site-header__inner { gap:8px; }
.lang-pick__icon { display:none; }
.lang-pick__select { padding:0 26px 0 11px; font-size:.8125rem; }
.lang-pick::after { right:10px; }
@media (min-width:621px) {
  .site-header__inner { gap:var(--s4); }
  .lang-pick__icon { display:block; }
  .lang-pick__select { padding:0 30px 0 34px; font-size:.875rem; }
  .lang-pick::after { right:11px; }
}
.i18n-gloss { margin-top:var(--s2); }
.i18n-gloss[hidden] { display:none; }

/* Devanagari: matras sit above and below the line, so the tight Latin line-heights
   clip them; and any letter-spacing breaks conjunct shaping. */
:lang(hi), :lang(ne) { word-break:normal; overflow-wrap:break-word; }
:is(:lang(hi), :lang(ne)):not(.brand__name) { letter-spacing:normal !important; }
:where(:lang(hi), :lang(ne)) :is(h1, .h1) { line-height:1.28; font-size:clamp(1.875rem,1.2rem + 2.9vw,3.5rem); }
:where(:lang(hi), :lang(ne)) :is(h2, .h2) { line-height:1.3; font-size:clamp(1.5rem,1.1rem + 1.9vw,2.625rem); }
:where(:lang(hi), :lang(ne)) :is(h3, .h3) { line-height:1.42; }
:where(:lang(hi), :lang(ne)) :is(h4, .h4, h5, .h5) { line-height:1.55; }
:is(:lang(hi), :lang(ne)) .eyebrow { text-transform:none; font-size:.8125rem; }
:is(:lang(hi), :lang(ne)) .brand__name small { font-size:.5rem; }

/* ---------- motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .button:hover,.card--lift:hover { transform:none; }
}

/* ---------- print ---------------------------------------------------------- */
@media print {
  .site-header,.site-footer__nav,.nav-toggle,.skip,.button { display:none !important; }
  body { background:#fff; color:#000; }
  .section { padding-block:12pt; }
  .panel-gradient,.section--deep { background:none !important; color:#000 !important; border:1pt solid #000; }
  a[href^="/"]::after { content:" (miracle.technology" attr(href) ")"; font-size:9pt; }
}

/* MCL-CONV-006 A4: back-to-home control on inner pages. */
.back-home__bar { padding-top: var(--s4); }
.back-home { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 1rem;
  border-radius: 999px; border: 1px solid currentColor; color: var(--teal); font-weight: 600; text-decoration: none; }
.back-home:hover { background: rgba(8, 126, 145, .08); }
.back-home:focus-visible { outline: 3px solid var(--focus, var(--teal)); outline-offset: 2px; }