/* ==========================================================================
   Monte Vista Digital — design system
   Tokens, primitives, components. No framework, no reset library.
   Brand: teal #16A497 / deep slate #1E4552. Type: Archivo variable.
   ========================================================================== */

/* ---------- 1. Font ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  /* optional, not swap. swap re-lays-out the page when Archivo arrives, and that
     reflow was the entire measured CLS (0.047, and 0.13 once a mis-tuned fallback
     was in play). optional gives the font a short window to arrive; if it makes it
     the page is drawn in Archivo from the first paint, and if it does not the
     metric-matched fallback below is kept for that pageview and NOTHING moves.
     The font is preloaded in functions.php and cached for a year, so in practice
     Archivo wins on any decent connection and on every repeat view. The cost is
     that a first-time visitor on a slow connection sees the fallback -- which is
     why the fallback metrics above are tuned to reproduce Archivo's layout.
     Switch back to swap if you would rather guarantee the typeface than the
     stability; it is a one-word change and CLS returns. */
  font-display:optional;
  src:url('../fonts/archivo-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

/* Metric-matched fallbacks, so swapping in Archivo reflows nothing and the page
   does not shift. Four faces, for two reasons.

   First, Archivo is a variable font and one scalar cannot serve both ends of it:
   body runs at weight 420 and headings at 880, and a fallback's bold is
   proportionally much narrower against Archivo's bold than its regular is against
   Archivo's regular. Second, the right scalar depends on WHICH font the visitor
   actually falls back to, so Arial-metric platforms and Roboto platforms need
   separate numbers.

   Every value below was measured with canvas measureText on the real strings at the
   real sizes, then checked against real layout at 390px wide. Roboto was measured by
   loading the actual Google Fonts file as a variable instance, not guessed.

     Arial   body 98.5%   heading 109.8%
     Roboto  body 98.8%   heading 116.1%

   The Roboto family is listed FIRST in the stack on purpose. Android has no Arial,
   and if local('Arial') were ever aliased to Roboto there the Arial numbers would be
   applied to Roboto glyphs -- which is exactly the bug that once pushed CLS from
   0.047 to 0.13. Desktops that lack Roboto simply fall through to the Arial family.

   Two earlier attempts were wrong and are worth recording. Deriving the scalar from
   xAvgCharWidth gave 94.9%, nowhere near right for prose. A single 98.8% face then
   matched body text to 0.01% but left headings far too narrow, so the h1 wrapped to
   two lines instead of three and dropped everything below it by 40px -- that was the
   whole of the reported CLS, even though Lighthouse blamed the paragraph, because the
   paragraph is what visibly moved.

   Verified at 390px: the Arial family reproduces Archivo's layout exactly (every
   section and total document height identical); the Roboto family lands within 21px
   over a 13,836px document, down from 118px untuned. Desktop differs by ~90px over
   10,810px, which no single scalar can remove, and desktop already measures CLS 0
   because the font arrives before first paint there. Re-measure if the type scale
   changes. */
@font-face{
  font-family:'Archivo Fallback Roboto';
  src:local('Roboto'),local('Roboto Regular');
  font-weight:100 500;
  size-adjust:98.8%;
  ascent-override:88.9%;
  descent-override:21.3%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Archivo Fallback Roboto';
  src:local('Roboto Bold');
  font-weight:501 900;
  size-adjust:116.1%;
  ascent-override:75.6%;
  descent-override:18.1%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Archivo Fallback Arial';
  src:local('Arial'),local('Liberation Sans'),local('Helvetica');
  font-weight:100 500;
  size-adjust:98.5%;
  ascent-override:89.1%;
  descent-override:21.3%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Archivo Fallback Arial';
  src:local('Arial Bold'),local('Liberation Sans Bold'),local('Helvetica Bold');
  font-weight:501 900;
  size-adjust:109.8%;
  ascent-override:80.0%;
  descent-override:19.1%;
  line-gap-override:0%;
}

/* ---------- 2. Tokens ----------
   Dark is the default. A light system preference switches to light. An explicit
   choice from the header toggle beats both, in either direction.

   Components only ever read the SEMANTIC tokens (--bg, --text, --accent…).
   The brand constants below are the raw ink and never used directly, so both
   themes stay derivable from one place. Every pair here is measured; the
   numbers live in build/audit.py, which reads this file rather than a copy.
   ------------------------------------------------------------------------ */
:root{
  /* brand constants — same ink in both themes */
  --brand:#16A497;
  --brand-deep:#0E7268;
  --brand-bright:#2ACFBE;

  /* ---- DARK (default) ---- */
  color-scheme:dark;

  --bg:#0E1A1F;              /* page ground */
  --bg-alt:#131F25;          /* alternating section */
  --surface:#17262C;         /* cards, tables, form wells */
  --surface-2:#1B2C33;       /* inset within a card */
  --hair:#26393F;            /* 1.47:1 on --bg — visible, not loud */
  --hair-soft:#1E2E34;

  --text:#B0C2C8;            /* 9.61:1 on --bg */
  --text-strong:#EAF1F3;     /* 15.49:1 */
  --text-muted:#8FA6AE;      /* 6.94:1 */

  --bad-ink:#FF9A8B;         /* 7.59:1 on --surface — form errors */
  --bad-soft:#3A1C18;

  --accent:#2ACFBE;          /* 9.08:1 on --bg — display type AND small text */
  --accent-ink:#2ACFBE;      /* small text / links */
  --accent-soft:#12312F;     /* tinted panel */
  --accent-line:#2ACFBE;

  --btn-bg:#2ACFBE;
  --btn-fg:#06231F;          /* 8.49:1 on --btn-bg */
  --btn-bg-h:#4FE0D2;

  /* The contrast band stays dark in BOTH themes. In dark mode a *darker* panel
     is invisible against the page (1.05:1), so it becomes a teal-tinted
     elevated one instead: 1.38:1 against --bg, white on it 12.85:1. */
  --band:#103832;
  --band-2:#0A2320;
  --band-text:rgba(255,255,255,.78);
  --band-strong:#FFFFFF;
  --band-muted:rgba(255,255,255,.66);
  --band-accent:#6FE8DC;     /* 12.66:1 on --band */
  --band-hair:rgba(255,255,255,.14);
  --band-surface:rgba(255,255,255,.05);

  --glow:rgba(42,207,190,.20);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 26px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45),0 26px 60px -28px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(42,207,190,.32);
  --hdr-bg:rgba(14,26,31,.88);
  --img-bg:#1B2C33;

  /* ---- scale, rhythm, motion: theme-independent ---- */
  --t-micro:clamp(.66rem,.60rem + .12vw,.72rem);
  --t-sm:clamp(.82rem,.78rem + .18vw,.9rem);
  --t-base:clamp(1rem,.96rem + .22vw,1.075rem);
  --t-lg:clamp(1.1rem,1.02rem + .4vw,1.3rem);
  --t-xl:clamp(1.35rem,1.15rem + .9vw,1.85rem);
  --t-2xl:clamp(1.7rem,1.35rem + 1.6vw,2.6rem);
  --t-3xl:clamp(2.1rem,1.5rem + 2.7vw,3.7rem);
  --t-4xl:clamp(2.5rem,1.5rem + 4.4vw,5.2rem);

  --gut:clamp(1.15rem,.7rem + 2vw,2rem);
  --sec:clamp(3.6rem,2.2rem + 6vw,7rem);
  --sec-sm:clamp(2.4rem,1.6rem + 3.6vw,4.2rem);
  --wrap:1216px;
  --wrap-narrow:820px;

  --r:14px;
  --r-sm:9px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dot:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  --sticky-h:0px;
}

/* ---- LIGHT: applied when the system asks for it, unless dark was chosen ---- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;

    --bg:#FFFFFF;
    --bg-alt:#F6F9F9;
    --surface:#FFFFFF;
    --surface-2:#F6F9F9;
    --hair:#DDE5E7;
    --hair-soft:#EDF2F3;

    --text:#41565E;          /* 7.73:1 on white */
    --text-strong:#101A1E;   /* 17.67:1 */
    --text-muted:#5E747D;    /* 4.92:1 */

    --bad-ink:#A81E17;       /* 7.33:1 on white */
    --bad-soft:#FDECEA;

    --accent:#16A497;        /* 3.09:1 — large text and graphics only */
    --accent-ink:#0E6F66;    /* 6.03:1 — small text and links */
    --accent-soft:#EAF7F5;
    --accent-line:#16A497;

    --btn-bg:#0E7268;        /* white on it = 5.79:1 */
    --btn-fg:#FFFFFF;
    --btn-bg-h:#0D6A61;

    --band:#1E4552;
    --band-2:#122C35;
    --band-text:rgba(255,255,255,.80);
    --band-strong:#FFFFFF;
    --band-muted:rgba(255,255,255,.66);
    --band-accent:#8FE0D6;
    --band-hair:rgba(255,255,255,.14);
    --band-surface:rgba(255,255,255,.06);

    --glow:rgba(22,164,151,.30);
    --shadow:0 1px 2px rgba(16,26,30,.05),0 8px 26px -12px rgba(16,26,30,.16);
    --shadow-lg:0 2px 6px rgba(16,26,30,.06),0 26px 60px -28px rgba(16,26,30,.30);
    --ring:0 0 0 3px rgba(22,164,151,.28);
    --hdr-bg:rgba(255,255,255,.90);
    --img-bg:#EDF2F3;
  }
}

/* ---- Explicit choice from the toggle. Wins over the system, both ways. ---- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --bg-alt:#F6F9F9; --surface:#FFFFFF; --surface-2:#F6F9F9;
  --hair:#DDE5E7; --hair-soft:#EDF2F3;
  --text:#41565E; --text-strong:#101A1E; --text-muted:#5E747D;
  --bad-ink:#A81E17; --bad-soft:#FDECEA;
  --accent:#16A497; --accent-ink:#0E6F66; --accent-soft:#EAF7F5; --accent-line:#16A497;
  --btn-bg:#0E7268; --btn-fg:#FFFFFF; --btn-bg-h:#0D6A61;
  --band:#1E4552; --band-2:#122C35;
  --band-text:rgba(255,255,255,.80); --band-strong:#FFFFFF; --band-muted:rgba(255,255,255,.66);
  --band-accent:#8FE0D6; --band-hair:rgba(255,255,255,.14); --band-surface:rgba(255,255,255,.06);
  --glow:rgba(22,164,151,.30);
  --shadow:0 1px 2px rgba(16,26,30,.05),0 8px 26px -12px rgba(16,26,30,.16);
  --shadow-lg:0 2px 6px rgba(16,26,30,.06),0 26px 60px -28px rgba(16,26,30,.30);
  --ring:0 0 0 3px rgba(22,164,151,.28);
  --hdr-bg:rgba(255,255,255,.90);
  --img-bg:#EDF2F3;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1A1F; --bg-alt:#131F25; --surface:#17262C; --surface-2:#1B2C33;
  --hair:#26393F; --hair-soft:#1E2E34;
  --text:#B0C2C8; --text-strong:#EAF1F3; --text-muted:#8FA6AE;
  --bad-ink:#FF9A8B; --bad-soft:#3A1C18;
  --accent:#2ACFBE; --accent-ink:#2ACFBE; --accent-soft:#12312F; --accent-line:#2ACFBE;
  --btn-bg:#2ACFBE; --btn-fg:#06231F; --btn-bg-h:#4FE0D2;
  --band:#103832; --band-2:#0A2320;
  --band-text:rgba(255,255,255,.78); --band-strong:#FFFFFF; --band-muted:rgba(255,255,255,.66);
  --band-accent:#6FE8DC; --band-hair:rgba(255,255,255,.14); --band-surface:rgba(255,255,255,.05);
  --glow:rgba(42,207,190,.20);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 26px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45),0 26px 60px -28px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(42,207,190,.32);
  --hdr-bg:rgba(14,26,31,.88);
  --img-bg:#1B2C33;
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo','Archivo Fallback Roboto','Archivo Fallback Arial',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--t-base);
  line-height:1.62;
  font-weight:420;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:var(--sticky-h);
}
img,svg,video{max-width:100%;height:auto;display:block}
img{background:var(--img-bg)}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--btn-bg-h)}
h1,h2,h3,h4,h5{color:var(--text-strong);margin:0 0 .5em;line-height:1.06;letter-spacing:-.022em;font-weight:800;text-wrap:balance}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin:.34em 0}
strong,b{font-weight:700;color:var(--text-strong)}
hr{border:0;border-top:1px solid var(--hair);margin:var(--sec-sm) 0}
::selection{background:var(--accent);color:var(--band-strong)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
button{font:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--band-strong);padding:.8rem 1.2rem;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- 4. Layout primitives ---------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - (var(--gut) * 2),var(--wrap-narrow));margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:var(--sec-sm)}
.sec-tight{padding-block:clamp(2rem,1.4rem + 2.6vw,3.2rem)}

.grid{display:grid;gap:clamp(1rem,.6rem + 1.6vw,1.75rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr))}
/* Explicit column counts. auto-fit is right for unknown item counts, but for a
   known set it strands orphans in the last row, which reads as an accident. */
@media (min-width:640px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
}
.stack>*+*{margin-top:1rem}
.center{text-align:center}
.mxa{margin-inline:auto}
.nowrap{white-space:nowrap}

/* ---------- 5. Type primitives ---------- */
/* The letterspaced micro-label — the single most characteristic device */
.eyebrow{
  display:flex;align-items:baseline;gap:.62rem;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 1.15rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none;border-radius:2px;
  position:relative;top:-.32em}
.eyebrow>span{min-width:0}
.eyebrow.is-center{justify-content:center}
.eyebrow.on-dark{color:var(--band-accent)}
.eyebrow.on-dark::before{background:var(--band-accent)}
.eyebrow.plain::before{display:none}

.num-label{font-size:var(--t-micro);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--text-muted)}

h1,.h1{font-size:var(--t-3xl);font-weight:850}
h2,.h2{font-size:var(--t-2xl);font-weight:830}
h3,.h3{font-size:var(--t-xl);font-weight:800;line-height:1.16}
h4,.h4{font-size:var(--t-lg);font-weight:750;line-height:1.24}
.display{font-size:var(--t-4xl);font-weight:880;line-height:.98;letter-spacing:-.033em}

/* the heavy all-caps brand-colour headline, lifted from the deck */
.caps{text-transform:uppercase;font-weight:880;letter-spacing:-.012em;line-height:1.02}
.caps-teal{color:var(--accent)}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--text);font-weight:430}
.lede-lg{font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.5;color:var(--text)}
.small{font-size:var(--t-sm)}
.mute{color:var(--text-muted)}
.on-dark{color:var(--band-text)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark strong{color:var(--band-strong)}
.tint{color:var(--accent)}
.measure{max-width:64ch}
.measure-sm{max-width:52ch}

/* ---------- 6. Grounds ---------- */
.bg-paper2{background:var(--bg-alt)}
.bg-teal-050{background:var(--accent-soft)}
.ground{position:relative;background:var(--band);color:var(--band-text);isolation:isolate}
.ground.deep{background:var(--band-2)}
.ground.brand{background:var(--accent-ink)}
.ground::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--dot);background-size:9px 9px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25));
}
.ground h1,.ground h2,.ground h3,.ground h4,.ground h5,.ground strong{color:var(--band-strong)}
.ground a{color:var(--band-accent)}
.rule-top{border-top:1px solid var(--hair)}
.rule-bot{border-bottom:1px solid var(--hair)}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92em 1.55em;border-radius:999px;border:1.5px solid transparent;
  font-size:var(--t-sm);font-weight:750;letter-spacing:.012em;
  text-decoration:none;cursor:pointer;line-height:1.15;
  transition:transform .18s var(--ease),background-color .18s var(--ease),
             border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1em;height:1em;flex:none}

.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.btn-primary:hover{background:var(--btn-bg-h);color:var(--band-strong);box-shadow:0 14px 28px -12px rgba(0,0,0,.45)}
.btn-dark{background:var(--band);color:var(--band-strong)}
.btn-dark:hover{background:var(--band-2);color:var(--band-strong)}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.btn-on-dark{background:rgba(255,255,255,.07);color:var(--band-strong);border-color:rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.btn-on-dark:hover{background:rgba(255,255,255,.15);color:var(--band-strong);border-color:rgba(255,255,255,.5)}
.btn-white{background:var(--band-strong);color:var(--band-2)}
.btn-white:hover{background:var(--band-strong);color:var(--band-2);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.btn-lg{padding:1.02em 1.85em;font-size:var(--t-base)}
.btn-sm{padding:.62em 1.1em;font-size:var(--t-micro);letter-spacing:.05em}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.btn-row.is-center{justify-content:center}

/* text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:var(--t-sm);
  color:var(--accent-ink);text-decoration:none;
}
.tlink::after{content:"→";transition:transform .2s var(--ease);display:inline-block}
.tlink:hover::after{transform:translateX(4px)}
.ground .tlink{color:var(--band-accent)}

/* ---------- 8. Header ---------- */
.hdr{
  position:sticky;top:0;z-index:120;
  background:var(--hdr-bg);
  backdrop-filter:saturate(1.7) blur(14px);
  -webkit-backdrop-filter:saturate(1.7) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--hair);box-shadow:var(--shadow)}
.hdr-in{display:flex;align-items:center;gap:1.1rem;min-height:70px}
@media (min-width:1024px){.hdr-in{min-height:78px}}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none;margin-right:auto}
.brand__mark{width:38px;height:38px;flex:none}
@media (max-width:520px){.brand__mark{width:34px;height:34px}}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:850;font-size:1.02rem;letter-spacing:-.028em;color:var(--text-strong)}
.brand__sub{font-size:.56rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted);margin-top:3px}

.nav{display:none}
@media (min-width:1024px){.nav{display:flex;align-items:center;gap:.15rem}}
.nav a,.nav button.navtrig{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.55rem .78rem;border-radius:8px;background:none;border:0;cursor:pointer;
  font-size:.875rem;font-weight:650;color:var(--text-strong);text-decoration:none;
  transition:color .16s var(--ease),background-color .16s var(--ease);
}
.nav a:hover,.nav button.navtrig:hover,.nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft)}
.navtrig svg{width:.62rem;height:.62rem;transition:transform .2s var(--ease);opacity:.6}
.navitem{position:relative}
.navitem.open .navtrig svg{transform:rotate(180deg)}

/* mega menu */
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  width:min(94vw,960px);background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:1.4rem;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.navitem.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem 1.2rem}
.mega__col p.mega__lbl{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
  font-weight:700;margin:.35rem 0 .5rem;padding:0 .6rem}
/* `.nav a` above sets inline-flex + align-items:center and outspecifies a bare
   `.mega__link`, which stacked the label beside its description instead of above
   it. Matched here at equal specificity so the mega entries stack properly. */
.nav .mega__link{display:block;align-items:normal;gap:0;padding:.5rem .6rem;border-radius:8px;
  text-decoration:none;font-size:inherit;font-weight:inherit;transition:background-color .15s var(--ease)}
.nav .mega__link:hover{background:var(--accent-soft)}
.nav .mega__link b{display:block;font-size:.84rem;font-weight:700;color:var(--text-strong);line-height:1.25;text-wrap:balance}
.nav .mega__link span{display:block;font-size:.725rem;font-weight:500;color:var(--text-muted);line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--hair-soft)}
.mega__foot p{margin:0;font-size:var(--t-sm);color:var(--text-muted)}

.hdr-cta{display:none;gap:.5rem;flex:none}
@media (min-width:1024px){.hdr-cta{display:flex;align-items:center}}
.hdr-tel{display:none;font-weight:700;font-size:.875rem;color:var(--text-strong);text-decoration:none;padding:.5rem .6rem;border-radius:8px}
@media (min-width:1180px){.hdr-tel{display:inline-flex;align-items:center;gap:.4rem}}
.hdr-tel:hover{color:var(--accent-ink);background:var(--accent-soft)}

/* theme toggle */
.themetoggle{
  display:inline-grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--hair);color:var(--text-strong);
  transition:border-color .16s var(--ease),background-color .16s var(--ease),color .16s var(--ease);
}
.themetoggle:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.themetoggle svg{width:17px;height:17px}
/* Show the icon for the theme you would switch TO. */
.themetoggle .i-sun{display:none}
.themetoggle .i-moon{display:block}
:root[data-theme="dark"] .themetoggle .i-sun{display:block}
:root[data-theme="dark"] .themetoggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themetoggle .i-sun{display:block}
  :root:not([data-theme="light"]) .themetoggle .i-moon{display:none}
}
/* dark is this site's default, so an unstamped root is dark too */
:root:not([data-theme]) .themetoggle .i-sun{display:block}
:root:not([data-theme]) .themetoggle .i-moon{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .themetoggle .i-sun{display:none}
  :root:not([data-theme]) .themetoggle .i-moon{display:block}
}
.drawer .themetoggle{width:auto;height:auto;padding:.7rem 1rem;gap:.55rem;
  grid-auto-flow:column;font-size:var(--t-sm);font-weight:700;border-radius:999px}

/* burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-left:auto;flex:none;
  background:none;border:1px solid var(--hair);border-radius:10px;cursor:pointer;
}
@media (min-width:1024px){.burger{display:none}}
.burger i{display:block;height:2px;background:var(--text-strong);border-radius:2px;transition:transform .26s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;top:0;z-index:118;background:var(--bg);
  padding:86px var(--gut) 2rem;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.drawer.open{opacity:1;visibility:visible;transform:translateY(0)}
@media (min-width:1024px){.drawer{display:none}}
.drawer a{display:block;text-decoration:none;color:var(--text-strong)}
.drawer>nav>a{font-size:1.35rem;font-weight:800;padding:.62rem 0;border-bottom:1px solid var(--hair-soft);letter-spacing:-.02em}
.drawer details{border-bottom:1px solid var(--hair-soft)}
.drawer summary{font-size:1.35rem;font-weight:800;padding:.62rem 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;letter-spacing:-.02em}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";font-weight:600;color:var(--accent);font-size:1.5rem;line-height:1}
.drawer details[open] summary::after{content:"–"}
.drawer details .sub{padding:.2rem 0 .9rem}
.drawer details .sub a{font-size:.95rem;font-weight:600;color:var(--text);padding:.42rem 0 .42rem .9rem;border-left:2px solid var(--hair)}
.drawer details .sub a:hover{color:var(--accent-ink);border-left-color:var(--accent)}
.drawer__cta{margin-top:1.6rem;display:grid;gap:.6rem}
.drawer__cta .btn{width:100%}
.drawer__meta{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--hair);font-size:var(--t-sm);color:var(--text-muted)}

/* ---------- 9. Sticky CTA rails (desktop + mobile) ---------- */
/* Mobile: fixed bottom action bar */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:115;
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background:var(--hdr-bg);backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border-top:1px solid var(--hair);
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.cta-bar.show{transform:translateY(0)}
.cta-bar .btn{width:100%;padding:.82em 1em;font-size:.83rem}
@media (min-width:1024px){.cta-bar{display:none}}

/* Desktop: fixed right-edge vertical tab */
.cta-rail{
  display:none;position:fixed;right:0;top:50%;translate:0 -50%;z-index:114;
  writing-mode:vertical-rl;
  background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;
  padding:1.25rem .72rem;border-radius:var(--r-sm) 0 0 var(--r-sm);
  font-size:.72rem;font-weight:750;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:var(--shadow-lg);
  transition:background-color .2s var(--ease),padding-right .2s var(--ease);
}
@media (min-width:1024px){.cta-rail{display:block}}
@media (max-height:520px){.cta-rail{display:none}}
.cta-rail:hover{background:var(--btn-bg-h);color:var(--band-strong);padding-right:1rem}

/* ---------- 10. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(1.25rem,.9rem + 1.2vw,1.75rem);
  display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px)}
.card h3{margin:0;font-size:var(--t-lg)}
.card p{margin:0;font-size:var(--t-sm);line-height:1.58;color:var(--text)}
.card__ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);margin-bottom:.35rem;flex:none;
}
.card__ico svg{width:21px;height:21px}
.card__meta{margin-top:auto;padding-top:.9rem;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
a.card:hover .card__meta{color:var(--accent-ink)}
.card.on-ground{background:var(--band-surface);border-color:var(--band-hair)}
.card.on-ground p{color:var(--band-text)}
a.card.on-ground:hover{border-color:var(--band-accent);background:rgba(255,255,255,.08)}
.card.on-ground .card__ico{background:rgba(255,255,255,.10);color:var(--band-accent)}
.card.flush{border-radius:0;border:0;border-top:2px solid var(--hair);padding-inline:0;background:none}

/* numbered row — the deck's signature content block */
.nrow{display:grid;grid-template-columns:auto 1fr;gap:1rem clamp(1rem,.6rem + 1.4vw,1.9rem);
  padding-block:clamp(1.15rem,.8rem + 1.2vw,1.7rem);border-top:1px solid var(--hair)}
.nrow:last-child{border-bottom:1px solid var(--hair)}
.nrow__n{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);font-weight:880;color:var(--accent);
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:2.1ch}
.nrow__b h3{margin:0 0 .3rem;font-size:var(--t-lg);text-transform:uppercase;letter-spacing:.01em;font-weight:820}
.nrow__b p{margin:0;font-size:var(--t-sm);color:var(--text);max-width:70ch}
.ground .nrow{border-color:var(--band-hair)}
.ground .nrow__n{color:var(--band-accent)}
.ground .nrow__b p{color:var(--band-text)}

/* hairline grid box set */
.hgrid{display:grid;gap:0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--hair)}
.hgrid.c2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.hgrid.c3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.hgrid>*{background:var(--surface);padding:clamp(1.2rem,.85rem + 1.2vw,1.7rem);margin:0;gap:.5px}
.hgrid .hg h3{font-size:var(--t-base);text-transform:uppercase;letter-spacing:.04em;font-weight:800;margin:0 0 .4rem}
.hgrid .hg p{margin:0;font-size:var(--t-sm);color:var(--text)}
.hgrid .hg .num-label{display:block;margin-bottom:.5rem}

/* "WHAT YOU GET" band — the highest-converting device in the deck */
.wyg{
  background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:clamp(1.1rem,.8rem + 1vw,1.5rem) clamp(1.2rem,.9rem + 1.2vw,1.75rem);
  margin-top:1.6rem;
}
.wyg__lbl{font-size:var(--t-micro);font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-ink);display:block;margin-bottom:.6rem}
.wyg p{margin:0;color:var(--text-strong);font-weight:520}
.wyg ul{margin:0;padding-left:1.1em;columns:2;column-gap:2rem}
@media (max-width:640px){.wyg ul{columns:1}}
.wyg li{color:var(--text-strong);font-size:var(--t-sm);font-weight:520;break-inside:avoid}
.wyg li::marker{color:var(--accent)}
.ground .wyg{background:var(--band-surface);border-left-color:var(--band-accent)}
.ground .wyg__lbl{color:var(--band-accent)}
.ground .wyg p,.ground .wyg li{color:var(--band-strong)}

/* ---------- 11. Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.stats>div{background:var(--surface);padding:clamp(1.1rem,.8rem + 1vw,1.6rem) clamp(.9rem,.6rem + 1vw,1.4rem)}
.stats b{display:block;font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:880;color:var(--text-strong);
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:.5rem;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);line-height:1.4}
.ground .stats,.stats.on-ground{background:var(--band-hair);border-color:var(--band-hair)}
.ground .stats>div,.stats.on-ground>div{background:var(--band)}
.ground .stats b{color:var(--band-strong)}
.ground .stats span{color:var(--band-muted)}

/* ---------- 12. Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.4rem,2rem + 7vw,7.5rem) clamp(3rem,2rem + 5vw,6rem)}
.hero__glow{
  position:absolute;pointer-events:none;z-index:-1;
  width:min(78vw,880px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 66%);
  top:-24%;right:-16%;filter:blur(14px);
}
.hero__grid{display:grid;gap:clamp(2rem,1.2rem + 3vw,3.6rem);align-items:center}
@media (min-width:1000px){.hero__grid{grid-template-columns:1.08fr .92fr}}
.hero h1{margin-bottom:1.1rem}
.hero .lede{max-width:56ch}

/* thesis line — one sentence, stated once, everything defends it */
.thesis{
  font-size:clamp(1.2rem,1rem + 1.05vw,1.75rem);line-height:1.4;font-weight:700;
  color:var(--text-strong);letter-spacing:-.02em;text-wrap:balance;
}
.thesis em{font-style:normal;color:var(--accent);font-weight:800}
.ground .thesis{color:var(--band-strong)}
.ground .thesis em{color:var(--band-accent)}

/* trust ticker */
.ticker{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.6rem}
.pill{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.4rem .8rem;border-radius:999px;border:1px solid var(--hair);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text);
  background:var(--surface);
}
.pill svg{width:.85em;height:.85em;color:var(--accent)}
.ground .pill{background:var(--band-surface);border-color:rgba(255,255,255,.18);color:var(--band-text)}
.ground .pill svg{color:var(--band-accent)}

/* ---------- 13. Page header (interior) ---------- */
.phead{position:relative;overflow:hidden;padding-block:clamp(3rem,2rem + 4.6vw,5.4rem) clamp(2.2rem,1.6rem + 3vw,3.6rem)}
.phead h1{max-width:19ch}
.phead .lede{max-width:60ch;margin-top:1rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.42rem;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--text-muted);margin-bottom:1.1rem;list-style:none;padding:0}
.crumbs li{margin:0}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs li+li::before{content:"/";margin-right:.42rem;opacity:.5}
.ground .crumbs{color:var(--band-muted)}
.ground .crumbs a:hover{color:var(--band-accent)}

/* ---------- 15. Process / timeline ---------- */
.steps{display:grid;gap:0;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:0}}
.step{position:relative;padding:clamp(1.4rem,1rem + 1.4vw,2rem) 0 0;border-top:2px solid var(--hair)}
@media (min-width:900px){.step{padding-right:1.6rem}}
.step.is-on{border-top-color:var(--accent)}
.step__n{font-size:var(--t-micro);font-weight:800;letter-spacing:.26em;color:var(--accent-ink);display:block;margin-bottom:.75rem}
.step h3{font-size:var(--t-lg);text-transform:uppercase;margin:0 0 .45rem;letter-spacing:.01em}
.step p{font-size:var(--t-sm);margin:0;color:var(--text)}
@media (max-width:899px){.step+.step{margin-top:1.4rem}}

/* ---------- 16. FAQ / accordion ---------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.2rem;cursor:pointer;
  padding:1.25rem 0;font-size:var(--t-lg);font-weight:750;color:var(--text-strong);
  list-style:none;line-height:1.32;letter-spacing:-.015em;
  transition:color .16s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::after{
  content:"";flex:none;width:1.4rem;height:1.4rem;margin-top:.15rem;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);
  background-image:linear-gradient(var(--accent-ink),var(--accent-ink)),linear-gradient(var(--accent-ink),var(--accent-ink));
  background-size:11px 2px,2px 11px;background-position:center,center;background-repeat:no-repeat;
  transition:transform .24s var(--ease),background-size .24s var(--ease);
}
.faq details[open] summary::after{transform:rotate(90deg);background-size:11px 2px,0 0}
.faq .ans{padding:0 0 1.5rem;max-width:76ch}
.faq .ans p{font-size:var(--t-base)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- 17. Forms ---------- */
.formwrap{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(1.3rem,.9rem + 1.4vw,2rem);box-shadow:var(--shadow)}
.field{display:grid;gap:.38rem;margin-bottom:1rem}
.field label{font-size:var(--t-micro);font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong)}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .95rem;border:1px solid var(--hair);border-radius:var(--r-sm);
  font:inherit;font-size:var(--t-sm);color:var(--text-strong);background:var(--bg);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.field textarea{min-height:118px;resize:vertical}
.field .hint{font-size:var(--t-micro);color:var(--text-muted);letter-spacing:0;text-transform:none;font-weight:500}
.f2{display:grid;gap:0 1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:var(--t-micro);color:var(--text-muted);margin-top:.9rem;line-height:1.5}

/* ---------- 17a. White-label promise rows ---------- */
.wlrow{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.15rem;align-items:start;
  padding:1.35rem 0;border-top:1px solid var(--hair)}
.wlrow:last-child{border-bottom:1px solid var(--hair)}
.wlrow__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent-ink);flex:none}
.wlrow__ico svg{width:22px;height:22px}
.wlrow h3{margin:0 0 .35rem;font-size:var(--t-lg);text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.wlrow p{margin:0;color:var(--text);max-width:74ch}
@media (max-width:560px){.wlrow{grid-template-columns:1fr}.wlrow__ico{width:38px;height:38px}}

/* ---------- 17b. Contact form (self-hosted, no third-party embed) ---------- */
.formhost{display:block}
.lform{display:block}
.frow{display:grid;gap:0 1rem;align-items:start}
.frow .field{align-content:start}
@media (min-width:560px){.frow{grid-template-columns:1fr 1fr}}
.field .req{color:var(--accent-ink);margin-left:.15em}
.field__err{font-size:var(--t-micro);font-weight:600;color:var(--bad-ink);letter-spacing:0;text-transform:none;line-height:1.4}
.field [aria-invalid="true"]{border-color:var(--bad-ink)}
.field [aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--bad-soft)}
.lform__go{width:100%;justify-content:center;margin-top:.4rem}
@media (min-width:560px){.lform__go{width:auto}}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is display:none, and hidden from assistive tech entirely. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.fnote{border-radius:var(--r);padding:1rem 1.15rem;margin-bottom:1.3rem;border:1px solid var(--hair);
  background:var(--surface-2);font-size:var(--t-sm)}
.fnote p{margin:0}
.fnote p + p{margin-top:.4rem;color:var(--text-muted)}
.fnote:focus{outline:0;box-shadow:var(--ring)}
.fnote--ok{border-color:var(--accent);background:var(--accent-soft)}
.fnote--ok strong{color:var(--text-strong)}
.fnote--bad{border-color:var(--bad-ink);background:var(--bad-soft)}

/* ---------- 18. CTA band ---------- */
.ctaband{position:relative;overflow:hidden;text-align:center}
.ctaband h2{max-width:20ch;margin-inline:auto}
.ctaband .lede{max-width:56ch;margin:1rem auto 1.9rem;color:var(--band-text)}
.ctaband__glow{position:absolute;z-index:-1;width:min(90vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 66%);left:50%;translate:-50% 0;bottom:-58%}

/* ---------- 19. Footer ---------- */
.ftr{background:var(--band-2);color:var(--band-muted);padding-block:clamp(3rem,2rem + 3.6vw,4.6rem) 0}
.ftr a{color:var(--band-muted);text-decoration:none;transition:color .16s var(--ease)}
.ftr a:hover{color:var(--band-accent)}
.ftr__top{display:grid;gap:2.4rem clamp(1.2rem,.6rem + 2vw,2.6rem)}
@media (min-width:900px){.ftr__top{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ftr h2{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--band-strong);
  font-weight:750;margin:0 0 1rem}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.ftr li{margin:0;font-size:var(--t-sm)}
.ftr__blurb{max-width:38ch;font-size:var(--t-sm);line-height:1.66;margin:1rem 0 1.4rem}
.ftr__brand .brand__name{color:var(--band-strong)}
.ftr__brand .brand__sub{color:var(--band-muted)}
.ftr__bot{margin-top:clamp(2.4rem,1.6rem + 3vw,3.6rem);padding-block:1.5rem;
  border-top:1px solid var(--band-hair);
  display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between;
  font-size:var(--t-micro);letter-spacing:.06em}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:.9rem 1.3rem}
/* the running deck footer rail, kept as a brand signature */
.railline{font-size:var(--t-micro);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--band-muted)}

/* ---------- 20. Article / prose ---------- */
.prose{max-width:72ch}
.prose h2{font-size:var(--t-xl);margin-top:2.4em}
.prose h3{font-size:var(--t-lg);margin-top:1.9em}
.prose>*:first-child{margin-top:0}
.prose img{border-radius:var(--r);margin-block:1.8rem}
.prose blockquote{margin:1.8rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:3px solid var(--accent);
  font-size:var(--t-lg);font-weight:600;color:var(--text-strong);font-style:normal}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{background:var(--bg-alt);padding:.14em .38em;border-radius:5px;font-size:.9em;
  border:1px solid var(--hair-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin-block:1.6rem}
.prose th,.prose td{padding:.72rem .9rem;border-bottom:1px solid var(--hair);text-align:left}
.prose th{background:var(--bg-alt);font-weight:750;color:var(--text-strong)}

/* answer capsule — the AEO device: a direct 40-60 word answer engines can lift */
.answer{
  background:var(--bg-alt);border:1px solid var(--hair);border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.15rem 1.4rem;margin-block:1.6rem;
}
.answer .num-label{color:var(--accent-ink);display:block;margin-bottom:.45rem}
.answer p{margin:0;font-size:var(--t-base);color:var(--text-strong);font-weight:520}

/* ---------- 21. Motion (progressive, opt-in) ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.no-js .rv{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}

/* ---------- 22. Utilities ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt1{margin-top:1rem}.mt2{margin-top:1.7rem}.mt3{margin-top:2.6rem}
.hide-sm{display:none}
@media (min-width:768px){.hide-sm{display:revert}}
/* The mobile header carries its own theme toggle next to the burger; the
   desktop one lives in the CTA cluster. Only ever show one. */
@media (min-width:1024px){.hide-lg{display:none!important}}
@media print{
  /* Always print light, whichever theme is on screen. */
  :root{
    --bg:#fff;--bg-alt:#fff;--surface:#fff;--surface-2:#fff;
    --text:#222;--text-strong:#000;--text-muted:#555;
    --hair:#bbb;--hair-soft:#ddd;
    --accent:#0E6F66;--accent-ink:#0E6F66;--accent-soft:#f2f2f2;
    --band:#fff;--band-2:#fff;--band-text:#222;--band-strong:#000;
    --band-muted:#555;--band-accent:#0E6F66;--band-hair:#bbb;--band-surface:#fff;
    --glow:transparent;--shadow:none;--shadow-lg:none;
  }
  .hdr,.cta-bar,.cta-rail,.drawer,.ctaband,.themetoggle{display:none!important}
  body{padding:0;background:#fff;color:#222}
  .ground::before,.hero__glow,.ctaband__glow{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}