/* ═══════════════════════════════════════════════════════════════════
   Smart Advance — one stylesheet for the whole site.
   Change a colour here and it changes on every page.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ---- the palette. These are the only colours the site uses. ---- */
  --paper:#F5F4EF;        /* page background        */
  --paper-2:#EDEBE3;      /* alternate band         */
  --sand:#E4DFD2;         /* soft fill              */
  --ink:#14262E;          /* body text              */
  --ink-2:#3F5A63;        /* secondary text         */
  --ink-3:#597078;        /* captions, quiet labels (4.7:1 on paper, measured) */
  --deep:#1C3D48;         /* headings, dark bands   */
  --deep-2:#2A5666;
  --line:#D6D2C6;         /* hairlines and borders  */
  --amber:#9C5A0A;        /* accent that carries words (4.9:1 on paper, measured) */
  --amber-lt:#E8A33D;     /* accent on dark grounds */
  --amber-wash:#F6EBD8;
  --moss:#456B4E;         /* the Smart System       */
  --moss-wash:#E2EBE2;
  --clay:#9A4B34;         /* warnings, limits       */
  --clay-wash:#F6E4DE;
  --slate:#3C5A75; --slate-wash:#E3EAF1;
  --plum:#6B4A6B; --plum-wash:#EFE6EF;
  --white:#FFFFFF;
  --shadow:0 24px 60px -34px rgba(20,38,46,.45);
  --r:14px;

  /* Text that sits ON a coloured surface, not on the page background.
     --deep and --moss deliberately INVERT between the two palettes: the dark
     navy band of light mode becomes a pale band in dark mode. Anything painted
     on top of them has to invert with them. Hard-coding a light text colour
     there is exactly how the footer and every primary button ended up as
     near-white on near-white. These tokens are that pairing, declared once. */
  --on-deep:#F5F4EF;
  --on-deep-strong:rgba(245,244,239,.88);
  --on-deep-soft:rgba(245,244,239,.72);
  --on-deep-line:rgba(245,244,239,.20);
  --on-deep-fill:rgba(245,244,239,.16);
  --on-accent:#F5F4EF;
  --amber-on-deep:#E8A33D;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101E24; --paper-2:#16282F; --sand:#1E343C;
    --ink:#EDEAE2; --ink-2:#B4C3C7; --ink-3:#8B9EA4;
    --deep:#DCE6E7; --deep-2:#B8CBCE; --line:#2B454E;
    --amber:#E8A33D; --amber-lt:#C9862A; --amber-wash:#2A2317;
    --moss:#8FBE99; --moss-wash:#1A2A1E; --clay:#D9836A; --clay-wash:#2C1B16;
    --slate:#8FB0CC; --slate-wash:#16242F; --plum:#C296C2; --plum-wash:#251A25;
    --white:#16282F; --shadow:0 24px 60px -34px rgba(0,0,0,.7);
    --on-deep:#14262E; --on-deep-strong:rgba(20,38,46,.9);
    --on-deep-soft:rgba(20,38,46,.78); --on-deep-line:rgba(20,38,46,.22);
    --on-deep-fill:rgba(20,38,46,.10);
    --on-accent:#0F2415;
    --amber-on-deep:#8A5200;
  }
}
:root[data-theme="dark"]{
  --paper:#101E24; --paper-2:#16282F; --sand:#1E343C;
  --ink:#EDEAE2; --ink-2:#B4C3C7; --ink-3:#8B9EA4;
  --deep:#DCE6E7; --deep-2:#B8CBCE; --line:#2B454E;
  --amber:#E8A33D; --amber-lt:#C9862A; --amber-wash:#2A2317;
  --moss:#8FBE99; --moss-wash:#1A2A1E; --clay:#D9836A; --clay-wash:#2C1B16;
  --slate:#8FB0CC; --slate-wash:#16242F; --plum:#C296C2; --plum-wash:#251A25;
  --white:#16282F; --shadow:0 24px 60px -34px rgba(0,0,0,.7);
  --on-deep:#14262E; --on-deep-strong:rgba(20,38,46,.9);
  --on-deep-soft:rgba(20,38,46,.78); --on-deep-line:rgba(20,38,46,.22);
  --on-deep-fill:rgba(20,38,46,.10);
  --on-accent:#0F2415;
  --amber-on-deep:#8A5200;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  text-wrap:balance; letter-spacing:-.025em; margin:0;
  /* A long word in a big heading - "interchangeable" - was wider than a phone
     once the reader turned their text size up, and dragged the page sideways.
     Breaking it is far better than a page that scrolls. */
  overflow-wrap:break-word}
p{margin:0; overflow-wrap:break-word}
img{max-width:100%; height:auto; display:block}
a{color:var(--amber)}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--amber); outline-offset:3px; border-radius:4px}

.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--deep);
  color:var(--on-deep); padding:12px 18px; border-radius:0 0 8px 0; font-weight:700; text-decoration:none}
.skip:focus{left:0}

.wrap{width:min(100% - 40px, 1120px); margin-inline:auto}
.narrow{width:min(100% - 40px, 780px); margin-inline:auto}
section{padding:clamp(50px,7vw,92px) 0}
.stack{display:flex; flex-direction:column}
.band{background:var(--paper-2)}
.dark{background:var(--deep); color:var(--on-deep)}
.dark h1,.dark h2,.dark h3{color:var(--on-deep)}
.dark .eyebrow{color:var(--amber-on-deep)}
.dark a:not(.btn){color:var(--amber-on-deep)}   /* buttons carry their own pairing */
.dark .lede{color:var(--on-deep-soft)}

.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin:0}
.lede{font-size:clamp(1.04rem,2.1vw,1.24rem); color:var(--ink-2); line-height:1.6}
.h-xl{font-size:clamp(2.1rem,5.2vw,3.5rem); line-height:1.04; font-weight:800; color:var(--deep)}
.h-lg{font-size:clamp(1.8rem,4.2vw,2.6rem); line-height:1.07; font-weight:800; color:var(--deep)}
.h-md{font-size:clamp(1.55rem,3.4vw,2.15rem); line-height:1.12; font-weight:700; color:var(--deep)}
.hl{background:linear-gradient(transparent 60%, var(--amber-wash) 60%, var(--amber-wash) 94%, transparent 94%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .08em}

/* ---------- nav ---------- */
.mast{border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:50}
.mast-in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0; flex-wrap:wrap}   /* wraps rather than overflowing at large text sizes */
.brand{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.02rem;
  letter-spacing:-.035em; color:var(--deep); text-decoration:none;
  display:inline-flex; align-items:baseline; gap:.3em; white-space:nowrap;
  /* padding rather than a height, so the row grows with the type */
  padding:5px 0}
.brand .arrow{color:var(--ink-3); font-weight:500; font-size:.9em}
.brand .a{color:var(--amber)}
.nav-links{display:none; gap:17px; font-size:.86rem; font-weight:600; align-items:center}
.nav-links a{color:var(--ink-2); text-decoration:none}
.nav-links a:hover{color:var(--deep)}
.nav-links .p1{color:var(--moss)} .nav-links .p2{color:var(--amber)}
.nav-links .phone{color:var(--deep); font-weight:700}
@media(min-width:1040px){.nav-links{display:flex} .burger{display:none}}
.burger{background:none; border:1.5px solid var(--line); border-radius:9px;
  padding:9px 11px; cursor:pointer; display:inline-flex; flex-direction:column; gap:4px;
  /* 44px is the smallest target a thumb hits reliably. This was 43x34. */
  min-width:44px; min-height:44px; align-items:center; justify-content:center}
.burger i{display:block; width:19px; height:2px; background:var(--deep); border-radius:2px}
.mobile-nav{display:none; border-top:1px solid var(--line); background:var(--paper); padding:8px 0 16px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block; padding:12px 0; font-size:1rem; font-weight:600;
  color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line)}
/* The burger rule above sets display:inline-flex, and it sits AFTER the media
   query that was meant to hide it — so at the same specificity the later rule
   won and the burger showed on desktop next to the full nav. It had been doing
   that on every page. Hiding it here, after the rule that shows it, is what
   actually works. */
@media(min-width:1040px){.mobile-nav{display:none!important} .burger{display:none!important}}

/* ── the menus ──────────────────────────────────────────────────────────────
   Every tool reachable from every page. The two sections open a panel rather
   than going straight to their first page, because "The Smart System" is four
   tools and sending someone to one of them and hoping they find the rest is
   how three of the four never get used.

   Built on a real button with aria-expanded, not a hover-only panel: hover
   alone cannot be reached by a keyboard and does not exist on a phone. Hover
   is added on top for people using a mouse, because waiting for a click when
   you have already pointed at the thing feels slow.                          */
.drop{position:relative}
.nav-links .drop>button{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:5px;
  color:var(--ink-2)}
.nav-links .drop>button.p1{color:var(--moss)}
.nav-links .drop>button.p2{color:var(--amber)}
.nav-links .drop>button:hover{color:var(--deep)}
.nav-links .drop>button .chev{width:10px;height:7px;flex:0 0 auto;
  transition:transform .16s ease;opacity:.7}
.nav-links .drop>button[aria-expanded=true] .chev{transform:rotate(180deg)}
.drop-panel{position:absolute;top:calc(100% + 12px);left:-16px;z-index:60;
  min-width:344px;background:var(--white);border:1px solid var(--line);
  border-radius:13px;box-shadow:0 14px 40px rgba(20,38,46,.16);padding:9px}
.drop-panel[hidden]{display:none}

/* ── `hidden` must actually hide ──────────────────────────────────────────
   The browser's own rule is [hidden]{display:none}, and it lives in the user-
   agent stylesheet — so ANY rule written here that sets display beats it. An
   element with class="stack" (display:flex) or class="shape" (display:grid)
   stays on screen when JavaScript sets .hidden = true, and nothing reports it.

   That was true in twelve places, three of them live: the readiness tool's
   start row did not disappear when a saved session resumed, and the two
   illustration cards on Finance Updates stayed up beside real published items
   — which is exactly the confusion the note on those cards warns about.

   The line above patched one instance by hand. This covers every element on
   the site, including ones not written yet. !important is right here: the
   whole point is to outrank the display rule on the element's own class,
   which is what quietly defeated it before. */
[hidden]{display:none !important}

/* A hit area across the gap, so the panel does not vanish on the way to it. */
.drop-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.drop-hd{font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--ink-3);
  padding:8px 12px 9px;margin:0;border-bottom:1px solid var(--line);line-height:1.45}
.drop-panel a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none}
.drop-panel a:hover,.drop-panel a:focus-visible{background:var(--paper-2)}
.drop-panel a b{display:block;font-size:.92rem;font-weight:700;color:var(--deep);
  line-height:1.35}
.drop-panel a span{display:block;font-size:.81rem;color:var(--ink-2);
  line-height:1.45;margin-top:2px;font-weight:400}
@media(hover:hover){
  .drop:hover>.drop-panel:not([data-shut]){display:block}
}

/* The phone menu does not need a dropdown — there is room to list everything,
   and a menu inside a menu on a touchscreen is a fiddle nobody enjoys. */
.mobile-nav .mob-hd{font-size:.68rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin:16px 0 2px;padding:0}
.mobile-nav .mob-hd:first-child{margin-top:6px}
.mobile-nav a.sub{padding:10px 0 10px 14px;font-size:.95rem;font-weight:600;
  border-left:2px solid var(--line);margin-left:2px}
.mobile-nav a.sub:hover{border-left-color:var(--amber)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; cursor:pointer;
  font-family:"Public Sans",sans-serif; font-weight:700; font-size:.96rem;
  padding:15px 24px; border-radius:10px; text-decoration:none;
  transition:transform .15s ease, background .15s ease}
.btn-a{background:var(--moss); color:var(--on-accent)}
.btn-a:hover{transform:translateY(-2px)}
.btn-amber{background:var(--amber); color:var(--on-accent)}
.btn-amber:hover{transform:translateY(-2px)}
.btn-b{background:transparent; color:var(--deep); border:1.5px solid var(--line)}
.btn-b:hover{border-color:var(--deep); transform:translateY(-2px)}
.dark .btn-b{color:var(--on-deep); border-color:var(--on-deep-line)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.trust-line{font-size:.85rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:6px 16px}
.trust-line b{color:var(--ink-2); font-weight:600}

/* ---------- photo slots ---------- */
.shot{position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); min-height:300px; background:var(--sand)}
.shot.tall{min-height:420px}
/* The drawn panel. It is the shipped artwork, not a placeholder — a photograph
   dropped into assets/img/ simply layers over the top of it. */
.shot-art{position:absolute; inset:0; width:100%; height:100%; display:block}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2}

/* ---------- layout helpers ---------- */
.two{display:grid; gap:clamp(26px,4.5vw,52px); grid-template-columns:1fr; align-items:center}
/* A grid item will not shrink below its longest word unless told to. With a
   big heading and a reader running large text, the column overflowed the
   page rather than wrapping. */
.two > *{min-width:0}
.grid-3 > *{min-width:0}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr} .two.wide-l{grid-template-columns:1.12fr .88fr}}
.grid-3{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
@media(min-width:860px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-3 > *{background:var(--white); padding:26px 24px}
.dark .grid-3{background:rgba(255,255,255,.16); border:0}
.dark .grid-3 > *{background:var(--deep)}

.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,3vw,30px); box-shadow:var(--shadow)}
.note{border-left:3px solid var(--amber); background:var(--amber-wash);
  padding:16px 20px; border-radius:0 10px 10px 0; font-size:.92rem; color:var(--ink); line-height:1.6}
.note.good{border-color:var(--moss); background:var(--moss-wash)}
.note.warn{border-color:var(--clay); background:var(--clay-wash)}

/* ---------- figures ---------- */
figure{margin:0}
.fig{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,3.5vw,34px); box-shadow:var(--shadow)}
.fig-head{display:flex; flex-direction:column; gap:6px; margin-bottom:22px}
.fig-head h3{font-size:1.26rem; font-weight:700; color:var(--deep)}
.fig-head p{font-size:.92rem; color:var(--ink-2)}
.fig svg{display:block; width:100%; height:auto; overflow:visible}
figcaption{margin-top:18px; font-size:.86rem; color:var(--ink-2); line-height:1.6;
  border-top:1px solid var(--line); padding-top:16px}
figcaption b{color:var(--ink)}
/* A figure wider than the screen scrolls sideways. Without a cue nobody knows
   that, and the indicative-cost column on the lending ladder was simply
   invisible on a phone. These four layers are the CSS-only scroll shadow: the
   two cover gradients are attached to the scrolling content, so a soft shade
   shows on whichever edge still has something past it and disappears when you
   reach the end. No JavaScript, nothing to break. */
.fig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--white) 34%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--white) 34%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0    50%, rgba(20,38,46,.13), rgba(20,38,46,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(20,38,46,.13), rgba(20,38,46,0)) right center;
  background-repeat:no-repeat;
  background-size:38px 100%, 38px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll}
.fig-scroll > svg{min-width:540px}
.fig-hint{display:none; margin:0 0 14px; font-size:.8rem; font-weight:600; color:var(--ink-3)}

/* The lending ladder also keeps a stacked version for narrow screens. An SVG
   cannot reflow, and this is the clearest teaching device on the site, so on a
   phone it becomes four cards rather than a drawing whose cost column is off
   the edge. Exactly one of the two is ever visible, and the numbers in both are
   checked against each other by tests/ladderparity.js. */
.lad-m{display:none; gap:12px; list-style:none; margin:0; padding:0}
.lad-m > li{border:1px solid var(--line); border-left:4px solid var(--rung,var(--line));
  border-radius:10px; padding:14px 16px; background:var(--wash,var(--paper))}
.lad-m-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px}
.lad-m-top b{font-family:"Bricolage Grotesque",sans-serif; font-size:1.04rem; font-weight:700; color:var(--deep)}
.lad-m-top span{font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--ink-3)}
.lad-m p{margin:9px 0 0; font-size:.88rem; color:var(--ink-2); line-height:1.5}
.lad-m dl{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:12px 0 0;
  border-top:1px solid var(--line); padding-top:11px}
.lad-m dt{font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--ink-3)}
.lad-m dd{margin:3px 0 0; font-size:.98rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
/* 540px of drawing plus the figure's own padding wants about 610px of viewport,
   so the swap happens at 700 with room to spare. */
@media(max-width:699px){
  .fig-scroll.lad-d{display:none}
  .lad-m{display:grid}
  .fig-hint{display:block}
}
.svg-lab{font-family:"Public Sans",sans-serif; font-size:12px; font-weight:600; fill:var(--ink-2)}
.svg-lab-sm{font-family:"Public Sans",sans-serif; font-size:10.5px; font-weight:600; fill:var(--ink-3); letter-spacing:.06em}
.svg-val{font-family:"Public Sans",sans-serif; font-size:13px; font-weight:700; fill:var(--ink); font-variant-numeric:tabular-nums}
.svg-hd{font-family:"Bricolage Grotesque",sans-serif; font-size:13px; font-weight:700; fill:var(--deep)}

/* ---------- forms ---------- */
.form{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,3.5vw,34px); box-shadow:var(--shadow); margin-top:24px}
.frow{display:grid; gap:14px; margin-bottom:14px}
@media(min-width:640px){.frow.two-up{grid-template-columns:1fr 1fr}}
label{display:block; font-size:.88rem; font-weight:700; color:var(--ink); margin-bottom:6px}
label .opt{font-weight:400; color:var(--ink-3); font-size:.84rem}
input,select,textarea{width:100%; font:inherit; font-size:.95rem; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink)}
/* iOS zooms the whole page in whenever you tap a field whose text is under
   16px, and it does not zoom back out. Every form on this site did that. The
   desktop design keeps .95rem; anything touch-driven or narrow gets 16px. */
@media (hover:none), (max-width:1039px){
  input,select,textarea{font-size:16px}
}
textarea{resize:vertical; min-height:110px}
.fine{font-size:.83rem; color:var(--ink-3); line-height:1.55; margin-top:14px}
.err{color:var(--clay); font-size:.88rem; font-weight:600; margin-top:10px; min-height:1.2em}
.sent{background:var(--moss-wash); border:1px solid var(--moss); border-radius:var(--r);
  padding:26px 24px; margin-top:24px}
.sent h3{color:var(--moss); font-size:1.25rem; margin-bottom:8px}
.sent p{font-size:.95rem; color:var(--ink-2); line-height:1.6}

/* ---------- footer ---------- */
.foot{background:var(--deep); color:var(--on-deep-soft); padding:48px 0 40px; font-size:.87rem}
.foot a{color:var(--on-deep-strong); text-decoration:none}
.foot a:hover{color:var(--on-deep)}
.foot-grid{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{font-family:"Bricolage Grotesque",sans-serif; color:var(--on-deep);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
/* The footer link lists are real tap targets on a phone: they were 32-35px
   tall and, on a 320px screen, under 6px apart. Links inside legal prose are
   left alone - they are part of a sentence, not buttons. */
.foot ul a{display:inline-block; padding:8px 0; min-height:40px}
.foot ul{gap:10px}
.foot .legal{margin-top:32px; padding-top:22px; border-top:1px solid var(--on-deep-line);
  font-size:.8rem; line-height:1.6; color:var(--on-deep-soft)}
.foot .brandline{font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  color:var(--on-deep); font-size:1.05rem; letter-spacing:-.03em; margin-bottom:10px}

@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* ── the footer legal, restructured ──────────────────────────────────────
   It was one ~200-word paragraph carrying identity, scope, disclaimers, the
   referral disclosure, an advice warning and two ombudsman references, all at
   one weight. A block nobody reads does not establish the boundaries it
   exists to establish — so the important three are surfaced as columns and
   the rest sits behind a disclosure. Same words, findable. */
.foot .legal{margin-top:32px;padding-top:22px;border-top:1px solid var(--on-deep-line);
  font-size:.8rem;line-height:1.65;color:var(--on-deep-soft)}
.foot .legal-id{margin:0 0 20px;font-size:.82rem;color:var(--on-deep)}
.foot .legal-id a{text-decoration:none;border-bottom:1px solid var(--on-deep-line)}

.foot .legal-cols{display:grid;gap:20px 30px;grid-template-columns:1fr}
@media(min-width:720px){.foot .legal-cols{grid-template-columns:repeat(3,1fr)}}
.foot .legal-cols b{display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--on-deep);margin-bottom:5px}
.foot .legal-cols p{margin:0;font-size:.79rem;line-height:1.6;color:var(--on-deep-soft)}

.foot .legal-more{margin-top:22px;border-top:1px solid var(--on-deep-line);padding-top:14px}
.foot .legal-more summary{cursor:pointer;list-style:none;font-size:.78rem;
  color:var(--on-deep);display:inline-flex;align-items:center;gap:7px;
  padding:9px 0;min-height:40px}   /* 32px was under the thumb-target minimum */
.foot .legal-more summary::-webkit-details-marker{display:none}

/* ---------- thumb-sized links ----------
   A paragraph whose whole content is one link is a control, not prose: the
   "Learn ... ->" hints under the tools, and the email address on the contact
   card. They were between 15 and 34px tall, under the 40px a thumb needs.
   Links inside a sentence are deliberately left alone. */
p > a:only-child{display:inline-flex; align-items:center; min-height:40px}
.foot .legal-more summary::before{content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;margin-top:-2px}
.foot .legal-more[open] summary::before{transform:rotate(45deg);margin-top:2px}
.foot .legal-more summary:hover{color:#fff}
.foot .legal-more>div{padding-top:10px;max-width:78ch}
.foot .legal-more p{margin:0 0 10px;font-size:.78rem;line-height:1.65}
.foot .legal-more b{color:var(--on-deep)}

/* ── the homepage journey ────────────────────────────────────────────────
   Three benefits were three stacked text blocks reading as a list of claims.
   As a numbered path with a connecting line they read as a sequence — which
   is what they actually are: find out where you stand, work out what matters,
   then meet someone if you need to. */
.journey{display:grid;gap:0;grid-template-columns:1fr;margin:4px 0 2px;
  counter-reset:jrn;position:relative}
@media(min-width:780px){
  .journey{grid-template-columns:repeat(3,1fr);gap:26px}
  /* One continuous rule behind the markers. A gradient was tried and read as
     three broken segments, which looked like a rendering fault rather than a
     path — the whole point is that the three steps connect. */
  .journey::before{content:"";position:absolute;left:16px;right:16px;top:15px;height:2px;
    background:var(--line);z-index:0}
}
.journey>div{counter-increment:jrn;position:relative;z-index:1;
  padding:0 0 20px 44px}
@media(min-width:780px){.journey>div{padding:0 6px 0 0}}
.journey>div::before{content:counter(jrn);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:.86rem;background:var(--deep);color:var(--paper);
  box-shadow:0 0 0 5px var(--paper)}
@media(min-width:780px){.journey>div{padding-top:46px}
  .journey>div::before{top:0;left:0}}
.journey>div:last-child::before{background:var(--amber)}
.journey b{display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.02rem;font-weight:800;color:var(--deep);line-height:1.3;
  margin:0 0 4px}
.journey span{display:block;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
@media(max-width:779px){
  .journey>div:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;
    bottom:4px;width:2px;background:var(--line)}
}

@media print{.mast,.foot,.btn,.shot{display:none!important} body{background:#fff}}

/* ═══════════════════════════════════════════════════════════════════════════
   THE GAUGE AND THE CAS READING
   ═══════════════════════════════════════════════════════════════════════════

   The mark is a dial with a needle: "where you stand", drawn rather than said.
   CAS is Capacity, Access, Structure — the three readings behind the one
   needle. Everything below is used on the home page, the Readiness report and
   the Advance Network band.

   Colours come from the tokens, never literals, so the dark palette inverts
   with everything else. Anything painted on --deep uses the --on-* pair.
   ═══════════════════════════════════════════════════════════════════════════ */

.brand{align-items:center}
.brand .mk{flex:0 0 auto; width:34px; height:25px; display:block}
.brand .mk .dial{stroke:var(--line)}
.brand .mk .fill{stroke:var(--deep)}
.brand .mk .needle{stroke:var(--amber)}
.brand .mk .hub{fill:var(--amber)}

/* the reading panel beside the hero */
.reading{background:var(--deep); color:var(--on-deep); border-radius:var(--r);
  padding:clamp(22px,3vw,32px); display:grid; gap:20px}
.reading .cap{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-deep-soft)}
.reading .cap em{font-style:normal; font-weight:500; letter-spacing:.02em; text-transform:none;
  font-size:.8rem}
.reading .top{display:flex; gap:clamp(16px,3vw,28px); align-items:center; flex-wrap:wrap}
.reading .top svg{flex:0 0 auto; width:clamp(150px,20vw,208px); height:auto}
.reading .top .dial{stroke:var(--on-deep-fill)}
.reading .top .fill{stroke:var(--amber-on-deep)}
.reading .top .needle{stroke:var(--on-deep)}
.reading .top .hub{fill:var(--on-deep)}
.reading .verdict{font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.08; color:var(--on-deep)}
.reading .verdict span{display:block; font-family:"Public Sans",sans-serif; font-weight:400;
  font-size:.9rem; line-height:1.45; color:var(--on-deep-soft); margin-top:7px}
.reading hr{border:0; border-top:1px solid var(--on-deep-line); margin:0}

.cas-rows{display:grid; gap:13px}
.cas-row{display:flex; align-items:center; gap:12px}
.cas-l{flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  display:inline-grid; place-items:center; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800; font-size:.72rem; background:var(--sand); color:var(--deep)}
.reading .cas-l{background:var(--on-deep-fill); color:var(--on-deep)}
.cas-row .nm{flex:0 0 4.9em; font-size:.87rem; font-weight:600; color:var(--on-deep)}
.cas-row .bar{flex:1 1 auto; height:9px; border-radius:6px; background:var(--on-deep-fill);
  overflow:hidden; display:block}
.cas-row .bar i{display:block; height:100%; border-radius:6px}
.cas-row .rd{flex:0 0 5.6em; text-align:right; font-size:.8rem; color:var(--on-deep-soft)}

/* the handover line under the panel */
.handover{display:flex; gap:14px; align-items:flex-start; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin-top:12px}
.handover svg{flex:0 0 auto; width:24px; height:24px; stroke:var(--amber); fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; margin-top:1px}
.handover b{display:block; color:var(--deep); font-size:.95rem; margin-bottom:2px}
.handover span{font-size:.9rem; line-height:1.5; color:var(--ink-2)}

/* the three dials */
.cas-grid{display:grid; gap:16px}
@media(min-width:820px){.cas-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cas-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; display:flex; flex-direction:column; gap:14px}
.cas-card .hd{display:flex; align-items:center; gap:15px}
.cas-card .hd svg{flex:0 0 auto; width:104px; height:73px}
.cas-card .hd .dial{stroke:var(--line)}
.cas-card .hd .needle{stroke:var(--deep)}
.cas-card .hd .hub{fill:var(--deep)}
.cas-card .ltr{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:2rem;
  line-height:1; color:var(--deep); margin:0}
.cas-card h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.15rem;
  color:var(--deep); margin:2px 0 0}
.cas-card .q{font-size:.98rem; line-height:1.5; font-weight:600; color:var(--ink)}
.cas-card p{font-size:.9rem; line-height:1.6; color:var(--ink-2); margin:0}
.cas-card .moves{margin-top:auto; border-top:1px solid var(--line); padding-top:14px}
.cas-card .moves b{display:block; font-size:.74rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-size:.8rem; padding:4px 10px; border-radius:6px; background:var(--paper-2);
  color:var(--ink)}
.chips.c span{background:var(--amber-wash)}
.chips.a span{background:var(--moss-wash)}
.chips.s span{background:var(--clay-wash)}

/* the archetypes, on the dark band */
.arch{display:grid; gap:12px}
@media(min-width:760px){.arch{grid-template-columns:repeat(3,minmax(0,1fr))}}
.arch-card{border:1px solid var(--on-deep-line); border-radius:12px; padding:17px 19px;
  display:flex; flex-direction:column; gap:7px; background:var(--on-deep-fill)}
.arch-card b{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1rem;
  color:var(--on-deep)}
.arch-card span{font-size:.88rem; line-height:1.5; color:var(--on-deep-soft)}
.arch-card.match{background:var(--paper); border:2px solid var(--amber-on-deep)}
.arch-card.match b{color:var(--deep)} .arch-card.match span{color:var(--ink-2)}
.arch-card.match .tag{font-size:.74rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--amber); margin-top:auto}
.arch-card.none{background:none; border-style:dashed}


/* ═══════════════════════════════════════════════════════════════════════════
   FORM CHECKBOXES AND RADIOS

   Left at browser default these render 13x13, which is less than half the
   size a thumb reliably hits — and on the lane picker seven of them sit in a
   stack, so a near miss ticks the wrong lane rather than nothing. The control
   itself is sized up and the label row is made tall enough to be the target,
   because most people aim at the words rather than the box.
   ═══════════════════════════════════════════════════════════════════════════ */
input[type=checkbox], input[type=radio]{
  width:20px; height:20px; flex:0 0 auto; accent-color:var(--moss);
  cursor:pointer; margin:0}
label:has(> input[type=checkbox]), label:has(> input[type=radio]){
  display:flex; align-items:center; gap:11px; min-height:34px; cursor:pointer;
  padding:2px 0}


/* EXPERT NUANCE 2026-09-05 */
.expert-read{margin-top:16px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--slate);border-radius:0 12px 12px 0;background:var(--paper)}
.expert-read .tag{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--slate);margin:0 0 7px}
.expert-read h4{margin:0 0 7px;color:var(--deep);font-size:1rem}
.expert-read p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.62}
.expert-read ul{margin:8px 0 0 18px;color:var(--ink-2);font-size:.88rem;line-height:1.55}
.expert-grid{display:grid;gap:12px;margin-top:14px}
@media(min-width:760px){.expert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.expert-card{border:1px solid var(--line);border-radius:12px;background:var(--white);padding:16px}
.expert-card .ey{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--amber);margin-bottom:6px}
.expert-card b{display:block;color:var(--deep);font-size:.98rem;margin-bottom:5px}
.expert-card p{font-size:.84rem;line-height:1.55;color:var(--ink-2);margin:0}
.result-story{margin:0;border-bottom:1px solid var(--line);background:var(--paper)}
.result-layer{padding:22px 24px;border-bottom:1px solid var(--line)}
.result-layer:last-child{border-bottom:0}.result-kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--amber);margin:0 0 8px}
.result-layer h3{font-size:1.1rem;color:var(--deep);margin:0 0 8px}.result-layer p{color:var(--ink-2);line-height:1.62;margin:0}
.result-quick{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
@media(min-width:720px){.result-quick{grid-template-columns:repeat(3,1fr)}}
.result-quick>div{background:var(--white);padding:16px 17px}.result-quick b{display:block;color:var(--deep);font-size:1rem}.result-quick span{display:block;margin-top:5px;color:var(--ink-3);font-size:.78rem}
.delay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.delay-box{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--white)}.delay-box b{display:block;color:var(--deep)}.delay-box span{font-size:.76rem;color:var(--ink-3)}
.article-index{display:grid;gap:14px;margin-top:22px}@media(min-width:760px){.article-index{grid-template-columns:repeat(3,minmax(0,1fr))}}
.article-index a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;background:var(--white);padding:18px}.article-index a:hover{border-color:var(--amber)}.article-index b{display:block;color:var(--deep);margin-bottom:6px}.article-index span{display:block;color:var(--ink-2);font-size:.86rem;line-height:1.5}

/* FINAL 2026-09-05 — trust, education and referral UX */
.info-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.info-rail>div{background:var(--white);padding:16px 18px}
.info-rail b{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--deep);margin-bottom:5px}
.info-rail p{font-size:.84rem;line-height:1.48;color:var(--ink-2);margin:0}
.purpose-band{border:1px solid var(--line);background:linear-gradient(135deg,var(--white),var(--slate-wash));border-radius:18px;padding:clamp(22px,4vw,34px)}
.purpose-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.purpose-arrow{font-size:2rem;color:var(--amber);font-weight:800}
.purpose-grid h3{font-size:1.1rem;color:var(--deep);margin:6px 0}
.purpose-grid p{font-size:.91rem;line-height:1.55;color:var(--ink-2);margin:0}
.referral-box{border:1px solid rgba(224,122,18,.34);background:var(--amber-wash);border-radius:14px;padding:18px 20px}
.referral-box .eyebrow{margin-bottom:6px}
.referral-box h3{margin:0 0 7px;color:var(--deep);font-size:1.1rem}
.referral-box p{margin:0;color:var(--ink-2);line-height:1.55}
.boundary-note{font-size:.76rem;line-height:1.52;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.source-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;min-height:32px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2);background:var(--paper)}
@media(max-width:760px){.info-rail{grid-template-columns:1fr}.purpose-grid{grid-template-columns:1fr}.purpose-arrow{transform:rotate(90deg);justify-self:start}}


/* Homepage benefit strip */
.hero-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:760px}
.hero-benefits>div{background:var(--white);padding:15px 16px}
.hero-benefits b{display:block;color:var(--deep);font-family:"Bricolage Grotesque",sans-serif;font-size:.95rem;line-height:1.25}
.hero-benefits span{display:block;margin-top:5px;color:var(--ink-3);font-size:.78rem;line-height:1.45}
@media(max-width:720px){.hero-benefits{grid-template-columns:1fr}}