/* =============================================================================
   wm.css  ·  The Wealth Marketing AI design system
   The ONLY stylesheet a marketing page loads. One file, one set of decisions.

   Contract (full version in /_system/DESIGN.md):
     · No page-specific rules live here, and no page defines rules of its own.
     · No decorative elements. If it carries no information, it does not exist.
     · Prose sits in one column of 62 to 68 characters, always.
     · Two columns only when there is a genuine second element.
     · Six type steps, one spacing scale, one accent.

   Sections
     1  Fonts
     2  Tokens
     3  Dark mode
     4  Reset and base
     5  Typography
     6  Layout primitives   .wrap .band .prose .cols .card .table-wrap
     7  Components          nav, button, tag, table, dl, faq, stats, form, footer
     8  Answer-engine block
     9  Utilities
    10  Motion
   ============================================================================= */


/* ============================================================ 1. FONTS
   Two families, loaded once, here, and nowhere else. Both are variable fonts,
   so each family is a single file per unicode range: two files for a latin
   page, no @import chain, no render-blocking stylesheet hop.
   A page must never link a font in its own head.                             */

/* Source Serif 4 · headings */
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFI2_tTDB4M7-auWDN0ahZJW1gb8te1Xb7G.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFI2_tTDB4M7-auWDN0ahZJW1gV8te1Xb7GlMo.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Inter · body and interface */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ============================================================ 2. TOKENS */

:root{
  color-scheme:light dark;

  /* --- families. Real fallbacks: the page is readable if gstatic never answers. */
  --font-display:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* --- type scale. Six steps. Nothing on a page may sit off this scale. */
  --fs-1:0.8125rem;                                  /* 13px  micro   labels, captions, fine print */
  --fs-2:0.9375rem;                                  /* 15px  small   meta, table cells, nav */
  --fs-3:clamp(1.0625rem,1.02rem + 0.18vw,1.125rem); /* 17-18 body    every paragraph */
  --fs-4:clamp(1.1875rem,1.12rem + 0.3vw,1.375rem);  /* 19-22 h3      subheads, card titles */
  --fs-5:clamp(1.5625rem,1.34rem + 1.0vw,2.125rem);  /* 25-34 h2      section questions */
  --fs-6:clamp(2.125rem,1.66rem + 2.1vw,3.25rem);    /* 34-52 display h1, and only h1 */

  --lh-tight:1.14;    /* display and h2 */
  --lh-snug:1.3;      /* h3, lead paragraphs */
  --lh-body:1.62;     /* prose */

  /* --- spacing. One scale. A margin exists to express rhythm, never to push
         something away from a bug. */
  --sp-1:0.25rem;   /*  4 */
  --sp-2:0.5rem;    /*  8 */
  --sp-3:0.75rem;   /* 12 */
  --sp-4:1rem;      /* 16 */
  --sp-5:1.5rem;    /* 24 */
  --sp-6:2rem;      /* 32 */
  --sp-7:3rem;      /* 48 */
  --sp-8:4rem;      /* 64 */
  --sp-9:6rem;      /* 96 */

  /* --- measure. The prose column, and nothing else, sets its own width. */
  /* The reading column. Set by MEASURING rendered text, not by nominal units:
     Inter's "ch" is about a third wider than its average character, so 66ch
     rendered as 88 characters per line. 34rem measures 62 to 68 characters at
     the body size, which is the target. Re-measure if the body font changes. */
  --measure:34rem;
  --w-page:66rem;          /* 1056px, the outer content frame */
  --w-narrow:44rem;        /* 704px, single-column reading pages */
  /* Structural lists (steps, terms, FAQ) carry a label gutter beside the
     reading column, so they are wider than --measure but never the full frame.
     A rule that runs twice the width of its own text reads as an accident. */
  --w-structure:46rem;     /* 736px, the measure plus its label gutter */

  --radius:10px;
  --radius-sm:6px;
  --border:1px solid var(--line);

  /* --- colour. Warm neutral ground, near-black ink, one accent.
         Semantic colours are for data states only, never for decoration. */
  --paper:#FBFAF7;         /* page ground */
  --paper-2:#F3F1EB;       /* alternate band */
  --surface:#FFFFFF;       /* cards, tables */
  --ink:#14120E;           /* headings, primary text        17.9:1 */
  --ink-2:#4A463D;         /* body text                      9.0:1 */
  --ink-3:#726C5F;         /* captions, meta, fine print     5.0:1 */
  --line:#E4E0D6;
  --line-strong:#CFC9BB;
  --accent:#1A5276;        /* links and the primary button   8.0:1 */
  --accent-deep:#123B57;   /* hover and active */
  --accent-soft:rgba(26,82,118,.09);
  --on-accent:#FFFFFF;     /*                                8.4:1 on accent */
  --ok:#1E6B45;
  --warn:#8A5A00;
  --bad:#96301F;
  --focus:#1A5276;

  /* --- inverted band, used for one band per page at most */
  --inverse-bg:#14120E;
  --inverse-ink:#F6F3EC;
  --inverse-ink-2:#B8B2A4;
  --inverse-line:rgba(246,243,236,.16);
  --inverse-accent:#8CC2EA;

  --shadow:0 1px 2px rgba(20,18,14,.05),0 8px 24px rgba(20,18,14,.06);
}


/* ============================================================ 3. DARK MODE
   Only the tokens are redefined. No component rule is repeated below. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14130F;
    --paper-2:#1C1A15;
    --surface:#1B1915;
    --ink:#F2EFE7;
    --ink-2:#B4AEA0;
    --ink-3:#948E80;
    --line:#2E2B24;
    --line-strong:#3E3A31;
    --accent:#8CC2EA;
    --accent-deep:#B0D6F2;
    --accent-soft:rgba(140,194,234,.13);
    --on-accent:#14130F;
    --ok:#5FCB95;
    --warn:#E0B15C;
    --bad:#EE8B79;
    --focus:#8CC2EA;
    --inverse-bg:#0B0A08;
    --inverse-ink:#F2EFE7;
    --inverse-ink-2:#A9A395;
    --inverse-line:rgba(242,239,231,.15);
    --inverse-accent:#8CC2EA;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#14130F;
  --paper-2:#1C1A15;
  --surface:#1B1915;
  --ink:#F2EFE7;
  --ink-2:#B4AEA0;
  --ink-3:#948E80;
  --line:#2E2B24;
  --line-strong:#3E3A31;
  --accent:#8CC2EA;
  --accent-deep:#B0D6F2;
  --accent-soft:rgba(140,194,234,.13);
  --on-accent:#14130F;
  --ok:#5FCB95;
  --warn:#E0B15C;
  --bad:#EE8B79;
  --focus:#8CC2EA;
  --inverse-bg:#0B0A08;
  --inverse-ink:#F2EFE7;
  --inverse-ink-2:#A9A395;
  --inverse-line:rgba(242,239,231,.15);
  --inverse-accent:#8CC2EA;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.35);
}


/* ============================================================ 4. RESET AND BASE */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;   /* the sticky nav must never cover an anchor target */
}

body{
  margin:0;
  /* overflow-x:clip, not hidden: clip does not create a scroll container, so the
     sticky nav still sticks to the viewport while the page can never scroll
     sideways. Every wide element also scrolls inside its own .table-wrap. */
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--fs-3);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block}
hr{border:0;border-top:var(--border);margin:var(--sp-7) 0}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

::selection{background:var(--accent-soft);color:var(--ink)}


/* ============================================================ 5. TYPOGRAPHY */

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
}

h1{font-size:var(--fs-6);line-height:var(--lh-tight);letter-spacing:-0.022em;font-weight:700}
h2{font-size:var(--fs-5);line-height:var(--lh-tight);letter-spacing:-0.015em;font-weight:700}
h3{font-size:var(--fs-4);line-height:var(--lh-snug)}
h4{font-size:var(--fs-3);line-height:var(--lh-snug);font-weight:700}

/* Rhythm comes from the type scale: a heading's space above is a multiple of
   its own size, so the scale and the spacing can never drift apart. */
* + h2{margin-top:1.5em}
* + h3{margin-top:1.7em}
* + h4{margin-top:1.6em}
:where(h1,h2,h3,h4) + *{margin-top:var(--sp-3)}

p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}

/* The one paragraph that sits directly under an h1: the answer an answer engine
   lifts. 40 to 60 words, one per page. */
.lede{
  font-size:var(--fs-4);
  line-height:var(--lh-snug);
  color:var(--ink);
  font-weight:400;
  margin-top:var(--sp-4);
}

ul,ol{margin:0 0 var(--sp-4);padding-left:1.35em}
li{margin:0 0 var(--sp-2)}
li:last-child{margin-bottom:0}
li::marker{color:var(--ink-3)}

/* A list of statements, not bullets: used for inclusions and exclusions. */
.list-plain{list-style:none;padding-left:0}
.list-plain > li{
  padding-left:1.45em;
  position:relative;
}
.list-plain > li::before{
  content:"";
  position:absolute;
  left:0;top:0.62em;
  width:0.5em;height:0.5em;
  border-radius:50%;
  background:var(--accent);
  opacity:.5;
}

a{color:var(--accent);text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:from-font}
a:hover{color:var(--accent-deep)}

strong,b{font-weight:700;color:var(--ink)}
em,i{font-style:italic}
small,.small{font-size:var(--fs-2);line-height:1.5}
.micro{font-size:var(--fs-1);line-height:1.5;color:var(--ink-3)}

/* Figures line up. Everywhere. */
.num,table,.stat-n,time,.dl dd{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

abbr[title]{text-decoration:underline dotted;cursor:help}

blockquote{
  margin:var(--sp-6) 0;
  padding-left:var(--sp-5);
  border-left:3px solid var(--line-strong);
  color:var(--ink-2);
}

code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.92em}
pre{overflow-x:auto;padding:var(--sp-4);background:var(--paper-2);border:var(--border);border-radius:var(--radius)}

/* The eyebrow above a heading. Carries a section label, never decoration. */
.eyebrow{
  display:block;
  font-family:var(--font-sans);
  font-size:var(--fs-1);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 var(--sp-3);
}

/* The last-updated line under the answer paragraph. */
.updated{
  font-size:var(--fs-1);
  color:var(--ink-3);
  margin:var(--sp-4) 0 0;
}


/* ============================================================ 6. LAYOUT PRIMITIVES */

/* .wrap  the outer frame. Every band has exactly one, so every section on the
   page shares one left edge and one width. */
.wrap{
  width:100%;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--sp-5);
}
.wrap-narrow{max-width:var(--w-narrow)}

/* .band  a full-bleed horizontal slice. A band may change the background to
   separate one idea from the next. It may not change the text column. */
.band{
  padding-block:clamp(var(--sp-7),5.5vw,var(--sp-9));
  background:var(--paper);
  border-top:var(--border);
}
.band:first-of-type{border-top:0}
.band-alt{background:var(--paper-2)}
.band-surface{background:var(--surface)}
.band-tight{padding-block:clamp(var(--sp-6),3.5vw,var(--sp-7))}

/* One inverted band per page at most, to mark the close. */
.band-inverse{
  background:var(--inverse-bg);
  color:var(--inverse-ink-2);
  border-top:0;
}
.band-inverse h1,.band-inverse h2,.band-inverse h3,.band-inverse h4,
.band-inverse strong,.band-inverse b{color:var(--inverse-ink)}
.band-inverse .eyebrow,.band-inverse .micro,.band-inverse .updated{color:var(--inverse-ink-2)}
.band-inverse a:not(.btn){color:var(--inverse-accent)}
.band-inverse .btn-quiet{color:var(--inverse-ink);border-color:var(--inverse-line)}
.band-inverse .btn-quiet:hover{background:rgba(246,243,236,.07);border-color:var(--inverse-ink-2)}
.band-inverse hr{border-top-color:var(--inverse-line)}

/* .prose  the reading column. All running text lives inside one of these and
   the column never moves, whatever the band behind it is doing. */
.prose{max-width:var(--measure);overflow-wrap:anywhere}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}

/* .cols  two columns, and ONLY when the second column is a real element:
   a form, a table, a chart. Never to fill space. */
.cols{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  align-items:start;
}
@media (min-width:62rem){
  .cols{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:var(--sp-8)}
  .cols-wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr)}
}
.cols > *{min-width:0}

/* .grid  equal cards. The modifier states the CARD COUNT, and the breakpoints
   are chosen so that count never leaves an orphan on its own row. Three grids
   on the old homepage were 4 columns holding 5 cards, each stranding the fifth.
   Use .grid-2 for two cards, .grid-3 for three, .grid-4 for four. */
.grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
.grid > *{min-width:0}

@media (min-width:34rem){
  .grid-2,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:52rem){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:60rem){
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* .card  a bordered container. Content, not chrome. */
.card{
  background:var(--surface);
  border:var(--border);
  border-radius:var(--radius);
  padding:var(--sp-5);
}
.card h2,.card h3,.card h4{margin-top:0}
.card > :last-child{margin-bottom:0}

/* A whole card that is a link. The card is the hit area, so nothing inside it
   is separately underlined. */
a.card{
  display:block;
  text-decoration:none;
  color:var(--ink-2);
  transition:border-color .15s ease,background-color .15s ease;
}
a.card:hover{border-color:var(--ink-3);background:var(--paper)}
a.card h3,a.card h4{color:var(--ink)}
a.card:hover h3,a.card:hover h4{color:var(--accent)}

/* .table-wrap  every wide element scrolls inside its own container. */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:var(--sp-5) 0;
  border:var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}
.table-wrap > table{border:0;margin:0}


/* ============================================================ 7. COMPONENTS */

/* ---- nav --------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:var(--border);
}
@supports not (backdrop-filter:blur(2px)){.nav{background:var(--paper)}}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  padding-block:var(--sp-3);
}
.nav-brand{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-2);
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.nav-brand:hover{color:var(--ink)}
.nav-brand svg{width:1.15em;height:1.15em;flex:none}
.nav-links{
  display:flex;align-items:center;gap:var(--sp-5);
  font-size:var(--fs-2);
}
/* :not(.btn) matters. A bare ".nav-links a" is specificity 0,1,1 and would
   beat ".btn" at 0,1,0, repainting the button's label in body ink. */
.nav-links a:not(.btn){color:var(--ink-2);text-decoration:none}
.nav-links a:not(.btn):hover{color:var(--ink)}
@media (max-width:48rem){
  .nav-links a:not(.btn){display:none}   /* the CTA survives; the rest is in the footer */
  .nav .wrap{padding-block:var(--sp-2)}
}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-sans);
  font-size:var(--fs-2);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  padding:0.72em 1.25em;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
  text-align:center;
}
.btn:hover{background:var(--accent-deep);color:var(--on-accent)}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:var(--fs-3);padding:0.85em 1.6em}
.btn-block{display:flex;width:100%}

.btn-quiet{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-quiet:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink-3)}

/* A single primary action per band, with its qualifier directly under it. */
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-5)}
.cta-note{font-size:var(--fs-1);color:var(--ink-3);margin:var(--sp-3) 0 0;max-width:var(--measure)}

/* ---- tag --------------------------------------------------------------- */
.tag{
  display:inline-block;
  font-size:var(--fs-1);
  font-weight:600;
  line-height:1.4;
  letter-spacing:0.02em;
  padding:0.28em 0.7em;
  border-radius:100px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid transparent;
}
.tag-quiet{background:transparent;border-color:var(--line-strong);color:var(--ink-3)}
.tag-ok{background:transparent;border-color:var(--ok);color:var(--ok)}
.tag-warn{background:transparent;border-color:var(--warn);color:var(--warn)}
.tag-bad{background:transparent;border-color:var(--bad);color:var(--bad)}

/* ---- table ------------------------------------------------------------- */
table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;          /* below this it scrolls inside .table-wrap */
  font-size:var(--fs-2);
  line-height:1.5;
  background:var(--surface);
}
caption{
  caption-side:top;
  text-align:left;
  font-size:var(--fs-1);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
}
th,td{
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  vertical-align:top;
  border-bottom:var(--border);
  color:var(--ink-2);
}
thead th{
  color:var(--ink);
  font-weight:700;
  font-size:var(--fs-1);
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:var(--paper-2);
  border-bottom:1px solid var(--line-strong);
}
tbody th[scope="row"]{color:var(--ink);font-weight:600;width:1%;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td .num,th .num{white-space:nowrap}

/* ---- definition list ---------------------------------------------------- */
/* The terms of the offer, stated once, in one place, on every page. */
.dl{margin:var(--sp-5) 0;border-top:var(--border);max-width:var(--w-structure)}
.dl > div{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-1) var(--sp-5);
  padding:var(--sp-4) 0;
  border-bottom:var(--border);
}
@media (min-width:40rem){
  .dl > div{grid-template-columns:minmax(8rem,11rem) 1fr;gap:var(--sp-5);align-items:baseline}
}
.dl dt{
  font-size:var(--fs-1);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}
.dl dd{margin:0;color:var(--ink-2);max-width:var(--measure)}
.dl dd > :last-child{margin-bottom:0}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{margin:var(--sp-5) 0 0;border-top:var(--border);max-width:var(--w-structure)}
.faq details{border-bottom:var(--border)}
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:flex-start;gap:var(--sp-4);
  justify-content:space-between;
  padding:var(--sp-4) 0;
  font-family:var(--font-display);
  font-size:var(--fs-4);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  flex:none;
  width:0.62em;height:0.62em;
  margin-top:0.42em;
  border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.faq details[open] > summary::after{transform:rotate(-135deg);margin-top:0.62em}
.faq summary:hover{color:var(--accent)}
.faq .answer{padding:0 0 var(--sp-5);max-width:var(--measure)}
.faq .answer > :last-child{margin-bottom:0}

/* ---- stat row ------------------------------------------------------------ */
/* Only ever holds figures we can stand behind. No stat without a source. */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:var(--sp-5);
  margin:var(--sp-6) 0;
  padding:var(--sp-5) 0;
  border-top:var(--border);
  border-bottom:var(--border);
}
.stat-n{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-5);
  font-weight:700;
  line-height:1.1;
  color:var(--ink);
  letter-spacing:-0.02em;
}
.stat-l{
  display:block;
  font-size:var(--fs-1);
  color:var(--ink-3);
  margin-top:var(--sp-2);
  line-height:1.45;
}

/* ---- steps --------------------------------------------------------------- */
/* An ordered process. The number is information, so it stays. */
.steps{list-style:none;padding:0;margin:var(--sp-5) 0;counter-reset:step;max-width:var(--w-structure)}
.steps > li{
  counter-increment:step;
  position:relative;
  padding:0 0 var(--sp-5) 3rem;
  margin:0;
  border-bottom:var(--border);
}
.steps > li:last-child{border-bottom:0;padding-bottom:0}
.steps > li + li{padding-top:var(--sp-5)}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-1);
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--accent);
}
.steps > li + li::before{top:var(--sp-5)}
.steps h3{margin-top:0;font-size:var(--fs-3);font-family:var(--font-sans);font-weight:700}
.steps p{margin:var(--sp-2) 0 0;max-width:var(--measure)}

/* ---- form ---------------------------------------------------------------- */
/* No label smaller than --fs-1 (13px). Ever. */
.field{display:block;margin:0 0 var(--sp-4)}
.field > span{
  display:block;
  font-size:var(--fs-1);
  font-weight:600;
  color:var(--ink);
  margin:0 0 var(--sp-2);
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-3);
  line-height:1.4;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:0.7em 0.8em;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.form-note{font-size:var(--fs-1);color:var(--ink-3);margin:var(--sp-4) 0 0;line-height:1.5}
.form-error{font-size:var(--fs-1);color:var(--bad);margin:0 0 var(--sp-3);min-height:1.2em}
.progress{height:3px;background:var(--line);border-radius:100px;overflow:hidden;margin:0 0 var(--sp-5)}
.progress > i{display:block;height:100%;background:var(--accent);transition:width .25s ease}

/* Multi-step qualifier. The class names .qcount and .qq and the data-step
   attribute are the shared tracker's contract (DESIGN.md part 2, rule 5), so
   they are styled once here and never redefined on a page. */
.qhead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);
  margin:0 0 var(--sp-4);
}
.qcount{font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap}
.qq{
  font-family:var(--font-display);
  font-size:var(--fs-4);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--ink);
  margin:0 0 var(--sp-2);
}
.qsub{font-size:var(--fs-1);color:var(--ink-3);line-height:1.5;margin:0 0 var(--sp-5)}

/* ---- footer -------------------------------------------------------------- */
.footer{
  background:var(--paper-2);
  border-top:var(--border);
  padding-block:var(--sp-7);
  font-size:var(--fs-2);
  color:var(--ink-3);
}
.footer a:not(.btn){color:var(--ink-2);text-decoration:none}
.footer a:not(.btn):hover{color:var(--accent);text-decoration:underline}
.footer-top{
  display:flex;flex-wrap:wrap;gap:var(--sp-5);
  justify-content:space-between;align-items:baseline;
  padding-bottom:var(--sp-5);
  border-bottom:var(--border);
}
/* Footer links are a real list, so they can never run together into one
   unreadable string. */
.footer-nav{
  list-style:none;margin:var(--sp-5) 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:var(--sp-3) var(--sp-5);
}
.footer-nav li{margin:0}
.footer-fine{
  margin:var(--sp-5) 0 0;
  font-size:var(--fs-1);
  line-height:1.55;
  color:var(--ink-3);
  max-width:var(--measure);
}
.footer-fine + .footer-fine{margin-top:var(--sp-3)}


/* ============================================================ 8. ANSWER-ENGINE BLOCK
   H1, a direct answer of 40 to 60 words, a last-updated line, question-shaped
   H2s, at least one real table. This is the page's spine, not a section. */

.qa h2{scroll-margin-top:5rem}
.qa .answer-first{
  font-size:var(--fs-3);
  font-weight:600;
  color:var(--ink);
  max-width:var(--measure);
  margin:0 0 var(--sp-3);
}
.qa p{max-width:var(--measure)}
.qa ul,.qa ol{max-width:var(--measure)}


/* ============================================================ 9. UTILITIES
   A short, closed list. A page may use these and nothing else. */

.stack-1{margin-top:var(--sp-1)}
.stack-2{margin-top:var(--sp-2)}
.stack-3{margin-top:var(--sp-3)}
.stack-4{margin-top:var(--sp-4)}
.stack-5{margin-top:var(--sp-5)}
.stack-6{margin-top:var(--sp-6)}
.stack-7{margin-top:var(--sp-7)}

.measure{max-width:var(--measure)}
.nowrap{white-space:nowrap}
.muted{color:var(--ink-3)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--sp-4);top:-4rem;z-index:100;
  background:var(--accent);color:var(--on-accent);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);
  font-size:var(--fs-2);font-weight:600;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:var(--sp-4);color:var(--on-accent)}


/* ============================================================ 10. MOTION
   There is no ambient animation in this system. These rules exist so that the
   few functional transitions above respect the viewer's setting. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================ PRINT */

@media print{
  .nav,.skip-link,.btn{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .band{padding-block:0;border-top:0}
  .faq details{display:block}
  .faq .answer{display:block !important}
}