/* ============================================================
   FinePrint — site.css (v12, round 2 re-theme)
   Design system: night ground + NEAR-WHITE paper sections, serif
   display, Space Grotesk UI, Space Mono meta. White header and
   segmented switch carried back from the previous site.

   Round-2 rules (REDESIGN-BRIEF.md):
   · light grounds are #FFFFFF / #FAFAF9 / #F4F4F2 — no beige
   · the header is white; the switch indicator is ink
   · ONE accent: --amber is the colour of SHAPES on every ground,
     --amber-ink is the colour of TYPE on light grounds
   · small radii (4–6px) on cards / buttons / inputs / image
     containers; full-bleed bordered grids stay square
   · .bleed image bands (§6 of the brief) live near the bottom

   Nothing was renamed or removed: every class in the round-1
   inventory still exists and still means what it meant.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Space Grotesk';src:url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/space-grotesk-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url(../fonts/space-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* dark grounds — unchanged */
  --night:#0E0D0C; --night-2:#151412; --panel:#1B1916; --panel-2:#211E1A;
  --line-d:#2E2B25; --line-d2:#3A362E;

  /* light grounds — near-white, replacing the round-1 beige */
  --paper:#FFFFFF; --paper-2:#FAFAF9; --paper-3:#F4F4F2;
  --line-p:#E6E4DF; --line-p2:#EFEDE9;

  /* ink */
  --ink:#171512; --ink-soft:#554E42;
  --lt-d:#EDE8DC; --mut-d:#A8A192; --dim-d:#8A8377;
  --mut-p:#6E675A;

  /* ONE accent, two jobs.
     --amber      = every amber SHAPE, on any ground (markers, meter
                    fills, the tier rule, dots, rings, chart strokes).
     --amber-ink  = amber TYPE on a light ground only (eyebrows, inline
                    links, .golink--paper, endpoint chips). 5.87:1 on
                    #FFFFFF; bright amber would be 2.25:1 and fail.
     --amber-deep = retained ALIAS. Round-1 pages and page-scoped
                    <style> blocks still reference it; it now resolves
                    to --amber-ink, which is what those uses were. */
  --amber:#D9A43A; --amber-ink:#8A5B08; --amber-deep:var(--amber-ink);
  --amber-wash:rgba(217,164,58,.07);

  --green:#3B8A66; --green-deep:#2C7355; --green-lt:#8FC7A6;
  --warn:#A87413; --red:#A32017; --slash:#CC3B26;

  /* warmth: small radii + soft shadows for raised light cards.
     Full-bleed bordered grids (.grid-b/.grid-d/.levels/.tiers/.stats)
     deliberately take NO radius — the grid is the structure. */
  --r4:4px; --r6:6px;
  --sh:0 1px 2px rgba(20,18,16,.05), 0 18px 40px -22px rgba(20,18,16,.22);
  --sh-lift:0 1px 2px rgba(20,18,16,.06), 0 34px 72px -34px rgba(20,18,16,.30);

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --grot:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--lt-d);font-family:var(--sans);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
/* Amber is a 2.25:1 ring on white — invisible as a focus indicator on the
   new light grounds. Every light context switches the ring to ink. Each
   selector is (0,2,1) against the (0,1,1) base, so this holds wherever the
   rules end up in the file. */
.nav a:focus-visible,.nav button:focus-visible,
.sec--paper a:focus-visible,.sec--paper button:focus-visible,
.sec--paper2 a:focus-visible,.sec--paper2 button:focus-visible,
.frame--light a:focus-visible,.frame--light button:focus-visible,
.app a:focus-visible,.app button:focus-visible{outline-color:var(--ink)}
img,svg{max-width:100%;display:block}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1180px,100% - 44px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-72px;z-index:200;background:var(--ink);color:#FFFFFF;font:600 14px/1 var(--grot);padding:12px 16px;border-radius:var(--r4);transition:top .16s ease}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type (scale, serif display and mono labels unchanged) ---------- */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.06;text-wrap:balance;color:#F6F2E8}
h1{font-size:clamp(46px,5.8vw,84px)}
h2{font-size:clamp(32px,4vw,54px)}
h3{font-family:var(--grot);font-weight:700;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.015em;line-height:1.25;color:#F3EFE5}
p{max-width:68ch}
.eyebrow{font:400 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:20px}
.lede{margin-top:22px;font-size:clamp(16.5px,1.75vw,19.5px);line-height:1.6;color:var(--mut-d)}
.body{font-size:15.5px;line-height:1.65;color:var(--mut-d)}
.small{font-size:13px;line-height:1.6;color:var(--dim-d)}
.klabel{font:400 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-d)}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt56{margin-top:56px}

/* ---------- header — WHITE (carried back from the previous site) ----------
   MARKUP NOTE: the brand lockup is the supplied FinePrint vector, not live
   text — brand rule 4, the wordmark is hand-spaced and is never re-typeset.
   Two cuts ship as symbols: #lgd is the ink lockup (ink brackets, the
   #CC3B26 seal-red slash, ink wordmark) and belongs on this white bar;
   #lg is the reversed lockup (paper brackets, #F2603F seal red on night,
   paper wordmark) and belongs in the still-dark FOOTER. Both carry
   hard-coded fills that CSS cannot repaint through <use>'s shadow tree, so
   the right symbol must be chosen in markup. No filter hack is used here on
   purpose; a filter would shift the slash off seal red. */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(20,18,16,.10)}
.nav__in{max-width:1220px;margin:0 auto;padding:0 32px;min-height:66px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center}
.brand svg{height:19px;width:93.3px;flex:none}
/* .brand is shared with the (still dark) footer, so the ink wordmark is
   scoped to the header at (0,2,0) — order-independent. */
.nav .brand{color:var(--ink)}
.switch{position:relative;display:none;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(20,18,16,.13);background:#FFFFFF;box-shadow:0 1px 2px rgba(20,18,16,.04)}
.switch__ind{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:999px;background:var(--ink);transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);z-index:0}
.switch__a{position:relative;z-index:1;font:500 13px/1 var(--sans);color:var(--ink-soft);padding:9px 14px;border-radius:999px;transition:color .2s ease;white-space:nowrap}
.switch__a:hover{color:var(--ink)}
.switch__a.is-on{color:#FFFFFF;background:var(--ink)}
/* until site.js has measured the sliding indicator, the active item carries
   its own ink fill so the white label is never white-on-white */
/* (is-on now carries its own ink background at all times — the sliding
   indicator overlays it in the same color, so no FOUC and no doubling) */
.nav__right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__link{font:500 13.5px/1 var(--sans);color:var(--ink-soft)}
.nav__link:hover{color:var(--ink)}
.nav__toggle{display:inline-flex}
/* The header CTA is written as .btn--primary (cream, built for dark
   grounds). On the white bar it must read as .btn--ink. These two rules
   deliver that without touching anyone's markup, and they beat the base
   button rules on specificity alone — (0,2,0) over (0,1,0) and (0,3,0)
   over (0,2,0) — so they hold regardless of where .btn is declared.
   Writing class="btn btn--ink btn--sm" in the header instead produces an
   identical result; both spellings are supported. */
.nav .btn--primary,.nav .btn--ink{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.nav .btn--primary:hover,.nav .btn--ink:hover{background:#000;border-color:#000}
.nav .btn--ghost{border-color:rgba(20,18,16,.20);color:var(--ink)}
.nav .btn--ghost:hover{border-color:rgba(20,18,16,.45)}
.navmenu{display:none;border-top:1px solid rgba(20,18,16,.10);padding:10px 32px 18px;background:#FFFFFF}
.navmenu.is-open{display:block}
.navmenu a{display:block;padding:12px 0;font:500 15px/1.4 var(--sans);color:var(--ink-soft);border-bottom:1px solid var(--line-p)}
.navmenu a:last-child{border-bottom:0}
.navmenu a[aria-current="page"]{color:var(--ink);font-weight:600}
/* The .btn rules are declared after this block, so the hide rules below are
   scoped to .nav to out-specify .btn's own display value. */
@media(min-width:1060px){
  .switch{display:flex}
  .nav .nav__toggle{display:none}
  .navmenu{display:none!important}
}
@media(max-width:1059px){
  .nav__right .nav__link{display:none}
}
@media(max-width:620px){
  .nav__in{padding:0 20px;min-height:60px}
  .navmenu{padding:10px 20px 18px}
  .nav__right .btn--primary{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;font:600 14.5px/1 var(--grot);border:1px solid transparent;border-radius:var(--r6);white-space:nowrap;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--paper);color:var(--ink)}
.btn--primary:hover{background:#fff}
.btn--ghost{border-color:var(--line-d2);color:var(--lt-d)}
.btn--ghost:hover{border-color:var(--dim-d)}
.btn--ink{background:var(--ink);color:#FFFFFF}
.btn--ink:hover{background:#000}
.btn--outline-ink{border-color:var(--ink);color:var(--ink)}
.btn--outline-ink:hover{background:rgba(23,21,18,.05)}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:#E4B252}
.btn--sm{min-height:40px;padding:0 16px;font-size:12.5px}
.golink{display:inline-block;font:600 15px/1 var(--grot);color:var(--amber)}
.golink:hover{text-decoration:underline;text-underline-offset:4px}
/* TYPE on a light ground → --amber-ink */
.golink--paper{color:var(--amber-ink)}

/* Inline prose links. The base rule sets a{color:inherit;text-decoration:none},
   which makes a plain link inside a sentence invisible. :not([class]) targets
   exactly those bare links and leaves .btn/.golink/.nav__link untouched. */
.sec a:not([class]),.phero a:not([class]),.cta a:not([class]),.strip a:not([class]){color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sec a:not([class]):hover,.phero a:not([class]):hover,.cta a:not([class]):hover{color:#E8BC63}
/* TYPE on a light ground → --amber-ink */
.sec--paper a:not([class]),.sec--paper2 a:not([class]){color:var(--amber-ink)}
.sec--paper a:not([class]):hover,.sec--paper2 a:not([class]):hover{color:#6D4706}

/* ---------- sections ---------- */
.sec{padding:clamp(76px,9vw,132px) 0}
.sec--tight{padding:clamp(56px,6vw,84px) 0}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--paper2{background:var(--paper-2);color:var(--ink)}
.sec--night2{background:var(--night-2)}
.sec--line{border-top:1px solid var(--line-d)}
.sec--paper .body,.sec--paper2 .body,.sec--paper .lede,.sec--paper2 .lede,.sec--paper p,.sec--paper2 p{color:var(--ink-soft)}
.sec--paper h1,.sec--paper h2,.sec--paper h3,.sec--paper2 h1,.sec--paper2 h2,.sec--paper2 h3{color:var(--ink)}
/* TYPE on a light ground → --amber-ink */
.sec--paper .eyebrow,.sec--paper2 .eyebrow{color:var(--amber-ink)}
.sec--paper .klabel,.sec--paper2 .klabel{color:var(--mut-p)}
.sec--paper .small,.sec--paper2 .small{color:var(--mut-p)}
/* Safety nets: components whose base colours were written for the night
   ground but which a page may legitimately place on paper. Each is a
   strictly-more-specific override, never a redefinition. */
.sec--paper .kicker,.sec--paper2 .kicker{color:var(--ink)}
.sec--paper .kicker em,.sec--paper2 .kicker em{color:var(--amber-ink)}
.sec--paper .golink,.sec--paper2 .golink{color:var(--amber-ink)}
.sec--paper .chip,.sec--paper2 .chip{border-color:var(--line-p);color:var(--mut-p)}
.sec--paper .btn--primary,.sec--paper2 .btn--primary{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.sec--paper .btn--primary:hover,.sec--paper2 .btn--primary:hover{background:#000;border-color:#000}
.sec--paper .btn--ghost,.sec--paper2 .btn--ghost{border-color:rgba(20,18,16,.22);color:var(--ink)}
.sec--paper .btn--ghost:hover,.sec--paper2 .btn--ghost:hover{border-color:rgba(20,18,16,.45)}
/* Light sections breathe a little more than dark ones. :not(.sec--tight)
   raises this to (0,2,0) so a .sec--tight.sec--paper keeps its tight
   padding no matter which rule is declared last. */
.sec--paper:not(.sec--tight),.sec--paper2:not(.sec--tight){padding-block:clamp(84px,9.6vw,140px)}
/* Extra air between a heading block and whatever grid follows it. Written
   as padding on the heading rather than margin on the sibling, so it ADDS
   to the page's own .mt40/.mt56 instead of silently overriding it. */
.sec--paper .head,.sec--paper2 .head,
.sec--paper .head2,.sec--paper2 .head2{padding-bottom:clamp(8px,1.4vw,20px)}
.head{max-width:900px}
.head2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,80px);align-items:end}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.5vw,84px);align-items:center}
.split--top{align-items:start}
.duo{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(44px,5.5vw,92px);align-items:start}
.duo--flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* A grid track sized 1fr still refuses to shrink below its content's min-content
   width, so one wide child (a code block, a mockup, a nowrap chip row) silently
   widens its whole column and pushes the page sideways on mobile. min-width:0
   lets tracks shrink; the wide child then scrolls inside its own container. */
.head2>*,.split>*,.duo>*,.g2>*,.g3>*,.g4>*,.levels>*,.tiers>*,.stats>*,.zones>*{min-width:0}

/* ---------- .bleed — full-bleed photographic bands (brief §6) ----------
   A .bleed is a TOP-LEVEL band: a sibling of .sec, never nested inside
   .sec--paper. It paints its own night ground, so everything inside it
   uses the dark-ground colours. It stays square and full-width by
   design — the radius rules elsewhere in this file do not apply to it.
   A photograph never sits under body copy without a scrim: overlaid
   text goes in .onimg over .bleed__scrim--deep. */
.bleed{position:relative;width:100%;overflow:hidden;background:var(--night);display:flex;align-items:center;color:var(--lt-d)}
.bleed__img{position:absolute;inset:0;z-index:0}
.bleed__img picture{display:block;width:100%;height:100%}
.bleed__img img{width:100%;height:100%;object-fit:cover}
.bleed__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,13,12,.86),rgba(14,13,12,.79) 45%,rgba(14,13,12,.90))}
.bleed__scrim--deep{background:linear-gradient(90deg,rgba(14,13,12,.97),rgba(14,13,12,.95) 44%,rgba(14,13,12,.68) 70%,rgba(14,13,12,.22))}
.bleed__scrim--strip{background:linear-gradient(180deg,rgba(14,13,12,.32),rgba(14,13,12,.12) 45%,rgba(14,13,12,.44))}
.bleed__in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,6vw,88px)}
.bleed--band{min-height:clamp(420px,44vw,560px)}
.bleed--cta{min-height:clamp(460px,48vw,600px)}
.bleed--strip{min-height:clamp(200px,22vw,280px)}
.bleed--strip .bleed__in{padding-block:0}
/* the readable column: overlaid text never runs past the dense end of the scrim */
.onimg{max-width:min(56ch,64%)}
/* dark-ground type inside a band */
.bleed h1,.bleed h2{color:#F6F2E8}
.bleed h3{color:#F3EFE5}
.bleed .lede,.bleed .body{color:var(--mut-d)}
.bleed .small,.bleed .klabel{color:var(--mut-d)}
.bleed .eyebrow{color:var(--amber)}
.bleed a:not([class]){color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bleed .golink{color:var(--amber)}

/* ---------- page hero (subpages) ---------- */
.phero{padding:clamp(64px,7.5vw,116px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--line-d);position:relative;overflow:hidden}
.phero:before{content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;background:radial-gradient(50% 60% at 50% 100%,var(--amber-wash),transparent 70%);pointer-events:none}
.phero__in{position:relative;max-width:900px}
.phero .lede{max-width:62ch}

/* ---------- frames / panels ----------
   .frame is also the site's inset IMAGE CONTAINER: 6px radius plus
   overflow:hidden, so a <picture>/<img> dropped inside it is clipped to
   the same corner as every other card. */
.frame{background:var(--panel);border:1px solid var(--line-d2);border-radius:var(--r6);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.frame__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-d);font:400 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim-d)}
.frame__bar b{color:var(--mut-d);font-weight:400}
.frame--light{background:var(--paper-2);border-color:var(--line-p);color:var(--ink);box-shadow:var(--sh-lift)}
.frame--light .frame__bar{border-color:var(--line-p);color:var(--mut-p)}
.frame--light .frame__bar b{color:var(--ink-soft)}
.frame--flat{box-shadow:none}
/* Utilities whose base colour is a dark-ground colour, corrected inside the
   light containers. Same values the .sec--paper overrides use. */
.frame--light .body,.app .body,.plan .body{color:var(--ink-soft)}
.frame--light .small,.frame--light .klabel,.app .small,.app .klabel,.plan .small{color:var(--mut-p)}
.chip{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--line-d2);border-radius:var(--r4);color:var(--dim-d);font:400 9px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.frame--light .chip{border-color:var(--line-p);color:var(--mut-p)}
.chip--doc{padding:8px 12px;font-size:10.5px;letter-spacing:normal;text-transform:none;border-color:var(--line-p);background:var(--paper-3);color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* A dark .frame (a product mockup) may legitimately sit on a paper section.
   The .sec--paper safety nets are (0,2,0) and would otherwise reach inside
   it and paint light-ground colours onto the dark panel. These put the
   dark-ground values back at (0,3,0)/(0,4,0), so they hold whichever rule
   the file happens to declare last. */
.frame:not(.frame--light) .body{color:var(--mut-d)}
.frame:not(.frame--light) .small,.frame:not(.frame--light) .klabel{color:var(--dim-d)}
.frame:not(.frame--light) .chip{border-color:var(--line-d2);color:var(--dim-d)}
.frame:not(.frame--light) .btn--primary{background:var(--paper);color:var(--ink);border-color:transparent}
.frame:not(.frame--light) .btn--primary:hover{background:#fff;border-color:transparent}
.frame:not(.frame--light) .btn--ghost{border-color:var(--line-d2);color:var(--lt-d)}
.frame:not(.frame--light) .btn--ghost:hover{border-color:var(--dim-d)}
.mockcap{margin-top:16px;color:var(--dim-d);font:400 11px/1.6 var(--mono);letter-spacing:.05em}
.sec--paper .mockcap,.sec--paper2 .mockcap{color:var(--mut-p)}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line-p);border-radius:var(--r4);background:#fff;color:var(--ink-soft);font:600 10.5px/1.3 var(--grot);white-space:nowrap}
.pill i{font-style:normal;font-size:10px;line-height:1}
/* mono TYPE on a light pill → --amber-ink */
.pill--mono{font:400 10px/1.3 var(--mono);color:var(--amber-ink)}
.pill--ok{border-color:#BFD6C9;background:#EDF5F0;color:var(--green-deep)}
.pill--warn{border-color:#E2CB9A;background:#F8F0DC;color:#7A560E}
.pill--risk{border-color:#E0B3AC;background:#F9ECE9;color:var(--red)}
.pill--dark{border-color:var(--line-d2);background:var(--panel-2);color:var(--mut-d)}

/* ---------- tiles / cards (bordered grid, no rounding) ---------- */
.grid-b{gap:0;border-top:1px solid var(--line-p);border-left:1px solid var(--line-p)}
.grid-b>*{border-right:1px solid var(--line-p);border-bottom:1px solid var(--line-p)}
.grid-d{gap:0;border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.grid-d>*{border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.tile{padding:30px 28px 34px;display:flex;flex-direction:column}
/* .tile p below is (0,1,1) and would beat a bare .tile__k (0,1,0) whenever the
   label is written as a <p>, silently rendering the mono micro-label at body
   size. Scoping to .tile .tile__k (0,2,0) makes the label win either way. */
.tile__k,.tile .tile__k{font:400 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-p);margin-top:0}
.sec--night2 .tile__k,.tile--dark .tile__k,.sec--night2 .tile .tile__k{color:var(--dim-d)}
.tile h3{margin-top:14px}
.tile p{margin-top:12px;font-size:13.5px;line-height:1.6}
.tile .eps{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
/* endpoint chips: TYPE on a light ground → --amber-ink */
.tile .eps span{padding:6px 9px;border:1px solid var(--line-p);border-radius:var(--r4);background:var(--paper-3);font:400 10.5px/1.3 var(--mono);color:var(--amber-ink)}
.cap{padding:28px 26px 32px;display:flex;flex-direction:column}
/* the capability index numeral is 11px mono TYPE → --amber-ink */
.cap i{font:400 11px/1 var(--mono);color:var(--amber-ink);font-style:normal}
.cap h3{margin-top:18px;padding-top:0}
.cap p{margin-top:12px;font-size:13.5px;line-height:1.6}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.stat{background:var(--night-2);padding:26px 28px 28px}
.stat b{display:block;font:700 clamp(32px,3.8vw,44px)/1 var(--grot);letter-spacing:-.03em;color:#F6F2E8;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:9px;font:400 10.5px/1.55 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim-d)}
.stats--paper{background:var(--line-p);border-color:var(--line-p)}
.stats--paper .stat{background:var(--paper-2)}
.stats--paper .stat b{color:var(--ink)}
.stats--paper .stat span{color:var(--mut-p)}
.fact b{display:block;font:700 16px/1.35 var(--grot);letter-spacing:-.01em;color:#F3EFE5}
.fact span{display:block;margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--mut-d)}
.sec--paper .fact b,.sec--paper2 .fact b{color:var(--ink)}
.sec--paper .fact span,.sec--paper2 .fact span{color:var(--ink-soft)}

/* ---------- quote ---------- */
.quote{font-family:var(--serif);font-size:clamp(21px,2.3vw,27px);line-height:1.35;letter-spacing:-.008em;color:var(--ink);max-width:26ch}
.quote--dark{color:var(--lt-d)}
.quote--wide{max-width:44ch}
.kicker{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);color:var(--lt-d)}
.kicker em{font-style:italic;color:var(--amber)}

/* ---------- key-value rows ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 22px;padding:18px 24px;border-bottom:1px solid var(--line-p)}
.kv b{font:400 10px/1.7 var(--mono);letter-spacing:.12em;color:var(--mut-p);font-weight:400}
.kv span{font-size:13px;color:var(--ink-soft)}
/* .kv em carried a dark-ground grey even inside .frame--light. The light
   value is the base; the dark frame overrides it at (0,3,1). */
.kv em{font-style:normal;font:400 10px/1.6 var(--mono);color:var(--mut-p);white-space:nowrap}
.frame:not(.frame--light) .kv{border-color:var(--line-d)}
.frame:not(.frame--light) .kv b{color:var(--dim-d)}
.frame:not(.frame--light) .kv span{color:var(--mut-d);font-size:12.5px}
.frame:not(.frame--light) .kv em{color:var(--dim-d)}
.kv--3{grid-template-columns:auto 1fr auto}

/* ---------- issues ---------- */
.issue{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--line-p)}
.issue:last-child{border-bottom:0}
.issue b{font:600 14.5px/1.4 var(--grot);letter-spacing:-.01em;color:var(--ink)}
.issue p{grid-column:1 / -1;font-size:12.5px;line-height:1.55;color:var(--mut-p);max-width:none}

/* ---------- levels (green / yellow / red) ---------- */
.levels{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-p)}
.level{padding:34px 30px 38px;border-right:1px solid var(--line-p)}
.level:last-child{border-right:0}
.level__band{display:flex;align-items:center;gap:9px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-p)}
.level__band .dot{width:10px;height:10px;border-radius:50%}
.level--g .dot{background:var(--green)}
.level--y .dot{background:var(--warn)}
.level--r .dot{background:var(--red)}
.level h3{margin-top:24px;color:var(--ink)}
.level p{margin-top:13px;font-size:13.5px;line-height:1.62;color:var(--ink-soft)}
.level .pill{margin-top:18px}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-p)}
.tier{padding:34px 30px 38px;border-right:1px solid var(--line-p);background:var(--paper);display:flex;flex-direction:column}
.tier:last-child{border-right:0}
.tier--pro{background:var(--paper-2);position:relative}
/* the tier top-rule is a SHAPE → bright --amber on every ground */
.tier--pro:before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;background:var(--amber)}
.tier i{display:flex;align-items:center;gap:10px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-p);font-style:normal}
/* the tag is 8.5px TYPE in a hairline box → --amber-ink for both */
.tier i .tag{padding:4px 7px;border:1px solid var(--amber-ink);border-radius:var(--r4);color:var(--amber-ink);font-size:8.5px;letter-spacing:.1em}
.tier .price{margin-top:18px;font:700 clamp(28px,3vw,36px)/1 var(--grot);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.tier .price small{font:400 13px/1 var(--sans);color:var(--mut-p);letter-spacing:0}
.tier p{margin-top:14px;font-size:13.5px;line-height:1.62;color:var(--ink-soft)}
.tier ul{margin:18px 0 0;padding:0;list-style:none}
.tier li{position:relative;padding:7px 0 7px 20px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);border-top:1px solid var(--line-p2)}
/* the 7px list marker is a SHAPE → bright --amber */
.tier li:before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;background:var(--amber)}
.tier .btn{margin-top:24px}

/* ---------- code ---------- */
.code{background:#121110;border:1px solid var(--line-d2);border-radius:var(--r6);overflow-x:auto}
.code__bar{padding:10px 18px;border-bottom:1px solid var(--line-d);font:400 10px/1.4 var(--mono);letter-spacing:.1em;color:var(--dim-d)}
.code pre{margin:0;padding:22px 24px;font:400 13px/1.75 var(--mono);color:#D8D2C2;white-space:pre}
.code .c{color:#6F6A5E}
.code .k{color:var(--amber)}
.code .s{color:var(--green-lt)}
.code .f{color:#EDE8DC}
.code .p{color:#A8A192}

/* ---------- faq / accordion ---------- */
.faq{border-top:1px solid var(--line-p)}
.faq details{border-bottom:1px solid var(--line-p)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font:700 17px/1.35 var(--grot);letter-spacing:-.012em;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* the +/– is a 20px glyph that carries the open/closed STATE — it is type
   and it is functional, so it takes --amber-ink on the light ground */
.faq summary:after{content:"+";font:400 20px/1 var(--mono);color:var(--amber-ink);flex:none}
.faq details[open] summary:after{content:"–"}
.faq p{padding:0 0 24px;font-size:14.5px;line-height:1.65;color:var(--ink-soft);max-width:76ch}
.faq--dark{border-color:var(--line-d)}
.faq--dark details{border-color:var(--line-d)}
.faq--dark summary{color:#F3EFE5}
.faq--dark summary:after{color:var(--amber)}
.faq--dark p{color:var(--mut-d)}

/* ---------- numbered promises ---------- */
.five{counter-reset:promise;border-top:1px solid var(--line-d)}
.promise{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:28px 0;border-bottom:1px solid var(--line-d)}
/* on the night ground the counter is bright --amber, per the brief */
.promise:before{counter-increment:promise;content:"0" counter(promise);font:400 13px/1.2 var(--mono);color:var(--amber);padding-top:6px}
/* The promise body may be written as a wrapping <div>, or as <b>+<span> straight
   inside .promise. Without this, the loose <span> wraps into the 64px counter
   column and renders one word per line. Pin both to the content column. */
.promise>b,.promise>span{grid-column:2}
.promise b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.01em;color:#F3EFE5;line-height:1.2}
.promise span{display:block;margin-top:9px;color:var(--mut-d);font-size:14.5px;line-height:1.6;max-width:62ch}
.five--paper{border-color:var(--line-p)}
.five--paper .promise{border-color:var(--line-p)}
/* on paper the same numeral is 13px TYPE on near-white: --amber-ink */
.five--paper .promise:before{color:var(--amber-ink)}
.five--paper .promise b{color:var(--ink)}
.five--paper .promise span{color:var(--ink-soft)}

/* ---------- security strip ---------- */
.strip{background:var(--night-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.strip__in{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:34px;align-items:center;padding:32px 0}
.strip__cell b{display:block;font:600 14px/1.4 var(--grot);color:#F3EFE5}
.strip__cell span{display:block;margin-top:4px;color:var(--dim-d);font-size:12.5px;line-height:1.5}

/* ---------- scope strip ---------- */
.scope{border-bottom:1px solid var(--line-d);background:var(--night-2)}
.scope__in{display:grid;grid-template-columns:repeat(3,1fr)}
.scope__cell{padding:30px 34px 32px;border-right:1px solid var(--line-d)}
.scope__cell:first-child{padding-left:0}
.scope__cell:last-child{border-right:0}
.scope__cell b{display:block;font:700 16px/1.3 var(--grot);letter-spacing:-.01em;color:#F3EFE5}
.scope__cell span{display:block;margin-top:7px;color:var(--dim-d);font-size:13.5px;line-height:1.55}

/* ---------- system map ---------- */
.mapcard{border:1px solid var(--line-p);border-radius:var(--r6);background:var(--paper-3);box-shadow:var(--sh);padding:10px 26px}
.maprow{display:grid;grid-template-columns:110px 28px 1fr;align-items:center;padding:15px 0;border-bottom:1px solid var(--line-p)}
.maprow:last-child{border-bottom:0}
.maprow .fn{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-p)}
.maprow .to{color:var(--mut-p)}
.maprow .sw{font:700 15.5px/1.3 var(--grot);letter-spacing:-.01em;color:var(--ink)}
.maprow--empty .fn{color:var(--ink)}
/* the "missing" chip is mono TYPE in a dashed box → --amber-ink for both */
.maprow--empty .sw span{display:inline-flex;padding:6px 11px;border:1px dashed var(--amber-ink);border-radius:var(--r4);color:var(--amber-ink);font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---------- chat / plan (the counsel conversation) ---------- */
.chat__body{padding:20px 22px 6px}
.msg{display:grid;grid-template-columns:34px 1fr;gap:14px;margin-bottom:20px}
.msg:last-child{margin-bottom:0}
.msg__a{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r4);font:700 11px/1 var(--grot);background:var(--paper);color:var(--ink)}
.msg__a--m{background:var(--panel-2);border:1px solid var(--line-d2);color:var(--amber);font-family:var(--mono);font-size:10px}
.msg__who{font:400 9.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim-d);margin-bottom:6px}
.msg__q{font-size:15px;color:#F3EFE5;line-height:1.5;max-width:none}
.msg__lead{font-size:13px;color:var(--mut-d);line-height:1.55;max-width:none}
.msg__lead .ep{font:400 11px/1.3 var(--mono);color:var(--amber)}
.plan{margin-top:14px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line-p);border-radius:var(--r6);overflow:hidden}
.plan__h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-p);font:700 12.5px/1.4 var(--grot);color:var(--ink)}
.plan__h .pill{margin-left:auto}
.pitem{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-p)}
.pitem:last-child{border-bottom:0}
.pitem__c{width:18px;height:18px;margin-top:1px;display:grid;place-items:center;border:1px solid var(--green-deep);color:var(--green-deep);font-size:10px;border-radius:50%}
.pitem__c--o{border-color:var(--warn);color:var(--warn)}
.pitem__t{font:600 13.5px/1.4 var(--grot);letter-spacing:-.01em;color:var(--ink)}
.pitem__m{margin-top:4px;font-size:12px;line-height:1.55;color:var(--mut-p);max-width:none}
.pitem__x{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--mut-p);max-width:none}
/* emphasised inline TYPE on a light panel → --amber-ink */
.pitem__x strong{color:var(--amber-ink);font-weight:600}
.docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.docs span{padding:5px 8px;border:1px solid var(--line-p);border-radius:var(--r4);background:#fff;font:400 9.5px/1.3 var(--mono);color:var(--ink-soft)}
.esc{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:14px;padding:15px 18px;background:var(--panel-2);border:1px solid var(--line-d2);border-left:3px solid var(--warn);border-radius:var(--r4)}
.esc i{font-style:normal;color:var(--amber);font-size:12px}
.esc b{display:block;font:600 13px/1.4 var(--grot);color:#F3EFE5}
.esc p{margin-top:5px;font-size:12px;line-height:1.55;color:var(--mut-d);max-width:none}
.askbar{display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--line-d);color:var(--dim-d);font-size:13px}
.askbar .caret{display:inline-block;width:7px;height:14px;background:var(--amber);animation:caret 1.1s steps(1) infinite;vertical-align:-2px}
@keyframes caret{50%{opacity:0}}
.askbar .btn{margin-left:auto}

/* ---------- health check score ---------- */
.hc__score{padding:24px 24px 22px;border-bottom:1px solid var(--line-p);background:var(--paper-3)}
.score{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.score b{font:700 clamp(46px,4.6vw,64px)/1 var(--grot);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.score span{font:600 15px/1.3 var(--grot);color:var(--ink-soft)}
.meter{display:flex;gap:5px;margin-top:16px}
.meter i{height:8px;flex:1;border-radius:2px;background:var(--line-p2)}
/* the meter fill is a SHAPE → bright --amber. The score it reinforces is
   stated in text directly above it (.score), so the fill is redundant
   reinforcement rather than the sole carrier of the value. */
.meter i.on{background:var(--amber)}
.hc__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 24px;background:var(--paper-3);border-top:1px solid var(--line-p)}
.hc__foot .note{margin-right:auto;font-size:12.5px;color:var(--ink-soft)}

/* ---------- app mockup (Today) ---------- */
.app{background:var(--paper-2);border:1px solid var(--line-p);border-radius:var(--r6);overflow:hidden;box-shadow:var(--sh-lift);color:var(--ink)}
.app__bar{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line-p);font:400 11px/1.4 var(--mono);color:var(--mut-p)}
.app__brand{display:flex;align-items:center}
.app__brand svg{height:14px;width:68.7px}
.app__co{display:flex;align-items:center;gap:8px}
.app__co .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.app__search{margin-left:auto;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-p);border-radius:var(--r4);background:#fff;font-size:10.5px}
.app__kbd{padding:1px 5px;border:1px solid var(--line-p);border-radius:3px;font-size:9px}
.app__body{display:grid;grid-template-columns:200px 1fr}
.side{border-right:1px solid var(--line-p);padding:16px 0 18px;background:var(--paper-3)}
.side__label{padding:0 18px;font:400 9px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-p);margin-bottom:6px}
.side__item{display:flex;align-items:center;gap:9px;padding:7px 18px;font:500 12px/1.4 var(--grot);color:var(--ink-soft)}
.side__item .n{margin-left:auto;font:400 10px/1.3 var(--mono);color:var(--mut-p)}
/* the active marker bar is a SHAPE → bright --amber. The active row is also
   identified by its white fill and its ink label. */
.side__item.on{background:var(--paper);color:var(--ink);box-shadow:inset 3px 0 0 var(--amber)}
.main{padding:20px 24px 18px}
.main__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.main__h{font:700 18px/1.2 var(--grot);letter-spacing:-.015em;color:var(--ink)}
.main__sub{margin-top:3px;font:400 10.5px/1.5 var(--mono);color:var(--mut-p)}
/* the segmented control's track is paper-3 so its selected cell can be white
   — at the round-1 beige the selected cell was the tinted one */
.seg{display:flex;border:1px solid var(--line-p);border-radius:var(--r4);overflow:hidden;background:var(--paper-3)}
.seg span{padding:7px 12px;font:600 11px/1 var(--grot);color:var(--mut-p);border-right:1px solid var(--line-p)}
.seg span:last-child{border-right:0}
.seg span.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,18,16,.10)}
.row{display:grid;grid-template-columns:34px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-p);align-items:start}
.row:last-child{border-bottom:0}
.row__gl{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-p);border-radius:var(--r4);background:#fff;font:700 12px/1 var(--grot);color:var(--ink-soft)}
.row__t{font:600 13.5px/1.45 var(--grot);letter-spacing:-.01em;color:var(--ink)}
.row__m{margin-top:4px;font-size:12px;line-height:1.55;color:var(--mut-p);max-width:none}
.row__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.row__act{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.row__due{font:400 9.5px/1.4 var(--mono);color:var(--mut-p);white-space:nowrap}
.app__ok{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:12px;color:var(--mut-p)}
.app__ok i{font-style:normal;color:var(--green-deep)}

/* ---------- company record ---------- */
.rec__foot{display:flex;justify-content:space-between;gap:14px;padding:13px 20px;font:400 10px/1.5 var(--mono);color:var(--dim-d)}
.rec__foot b{color:var(--amber);font-weight:400}

/* ---------- confidence gate ---------- */
.gatebox{border:1px solid var(--line-d2);border-radius:var(--r6);background:var(--panel);padding:clamp(22px,3vw,36px);overflow-x:auto}
.gauges{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(8px,1.4vw,18px);margin-top:16px;min-width:560px}
.gauge{display:flex;flex-direction:column;gap:3px}
.gauge i{height:5px;background:rgba(242,237,227,.09)}
.gauge i.on{background:var(--amber)}
.gauge span{margin-top:7px;font:400 8.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim-d)}
.gateline{position:relative;margin-top:26px;min-width:560px}
.gateline hr{border:0;height:1px;background:linear-gradient(90deg,rgba(242,237,227,.05),rgba(242,237,227,.35) 12%,rgba(242,237,227,.35) 88%,rgba(242,237,227,.05))}
.gateline .lab{position:absolute;top:-7px;left:0;transform:translateY(-100%);font:400 9.5px/1.3 var(--mono);letter-spacing:.15em;color:var(--dim-d)}
.zones{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:26px;min-width:560px}
.zone{background:var(--night-2);padding:18px 20px 20px}
.zone b{display:flex;align-items:center;gap:8px;font:400 10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.zone .dot{width:9px;height:9px;border-radius:50%}
.zone--g b{color:var(--green-lt)}.zone--g .dot{background:var(--green)}
.zone--y b{color:var(--amber)}.zone--y .dot{background:var(--warn)}
.zone--r b{color:#E08578}.zone--r .dot{background:var(--red)}
.zone span{display:block;margin-top:8px;font:600 13.5px/1.4 var(--grot);color:#F3EFE5}

/* ---------- table ---------- */
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-p);font-size:13.5px;vertical-align:top}
th{font:400 10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mut-p);border-bottom-color:var(--ink)}
td{color:var(--ink-soft)}
td strong{color:var(--ink);font-weight:600}

/* ---------- form ---------- */
.field{display:block;margin-bottom:20px}
.field span{display:block;margin-bottom:8px;font:600 12.5px/1.4 var(--grot);color:var(--lt-d)}
/* max-width/min-width guard: form controls carry an intrinsic default size that
   otherwise refuses to shrink inside narrow columns. */
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;padding:14px 16px;background:var(--panel);border:1px solid var(--line-d2);border-radius:var(--r4);color:var(--lt-d);font:400 15px/1.5 var(--sans)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--amber);outline-offset:2px}
.field textarea{min-height:130px;resize:vertical}
.field .hint{margin-top:7px;font-size:12px;color:var(--dim-d);font-weight:400}

/* ---------- final CTA ---------- */
.cta{padding:clamp(88px,10.5vw,146px) 0;border-top:1px solid var(--line-d);background:radial-gradient(60% 90% at 50% 0%,rgba(217,164,58,.06),transparent 70%),var(--night)}
.cta h2{max-width:20ch}
.cta .lede{max-width:56ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px}

/* ---------- footer (still dark — the #lg symbol stays correct here) ---------- */
.foot{padding:62px 0 46px;color:var(--dim-d);border-top:1px solid var(--line-d)}
.foot__top{display:grid;grid-template-columns:1.2fr repeat(3,auto);gap:48px;align-items:start}
.foot__line{margin-top:14px;font-size:13.5px;max-width:34ch;line-height:1.6}
.foot__col b{display:block;font:400 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim-d);margin-bottom:16px}
.foot__col a{display:block;color:var(--mut-d);font-size:13.5px;padding:5px 0}
.foot__col a:hover{color:#fff}
.legal{margin-top:50px;padding-top:26px;border-top:1px solid var(--line-d);font-size:11.5px;line-height:1.7;max-width:100ch;color:var(--dim-d)}
.legal a{color:var(--mut-d);text-decoration:underline;text-underline-offset:2px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .askbar .caret{animation:none}
  .btn:hover{transform:none}
  .switch__ind{transition:none}
}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .head2,.split,.duo,.duo--flip{grid-template-columns:1fr}
  .head2{gap:18px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .levels,.tiers{grid-template-columns:1fr}
  .level,.tier{border-right:0;border-bottom:1px solid var(--line-p)}
  .level:last-child,.tier:last-child{border-bottom:0}
  .scope__in{grid-template-columns:1fr}
  .scope__cell{padding:20px 0;border-right:0;border-bottom:1px solid var(--line-d)}
  .scope__cell:last-child{border-bottom:0}
  .strip__in{grid-template-columns:1fr;gap:18px}
  .foot__top{grid-template-columns:1fr 1fr;gap:36px}
  .app__body{grid-template-columns:1fr}
  .side{display:flex;flex-wrap:wrap;gap:2px 14px;border-right:0;border-bottom:1px solid var(--line-p);padding:12px 16px}
  .side__label{display:none}
  .side__item{padding:5px 8px}
  .side__item .n{margin-left:6px}
  .app__search{display:none}
  /* The two-column bands stack here, so overlaid copy leaves the dense end
     of the horizontal scrim. Both text scrims become dense vertical ones and
     the readable column runs the full width. */
  .onimg{max-width:none}
  .bleed__scrim,.bleed__scrim--deep{background:linear-gradient(180deg,rgba(14,13,12,.88),rgba(14,13,12,.82) 45%,rgba(14,13,12,.92))}
  /* Below 1020px these bands stop reserving desktop height so a TEXT band can
     shrink to its content. But an image-only band (no .bleed__in) has nothing
     in flow — min-height:0 collapsed it to 0px and the photograph vanished on
     mobile. Keep a floor instead of zero: text bands still grow past it,
     image-only bands stay visible. */
  .bleed--band,.bleed--cta{min-height:300px}
}
@media(max-width:620px){
  .wrap{width:min(100% - 32px,1180px)}
  h1{font-size:clamp(40px,10.5vw,50px)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .cap{min-height:auto}
  .cap h3{margin-top:14px;padding-top:0}
  .foot__top{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .row__gl{display:none}
  .row__act{flex-direction:row;align-items:center}
  .maprow{grid-template-columns:86px 20px 1fr}
  .promise{grid-template-columns:44px 1fr;gap:16px}
  .msg{grid-template-columns:1fr}
  .msg__a{display:none}
  .bleed__in{padding-block:clamp(40px,10vw,56px)}
  .bleed--strip{min-height:170px}
}

/* ============================================================
   v14 layer — amber accent in the writing + scope band + fixes.
   ADD-ONLY: nothing above was renamed or removed.
   ============================================================ */

/* Amber accent phrases in display type. The accent is the POINT of the
   sentence — one <em> per heading. Serif display is already the h1/h2
   face; italic amber inherits it. Light sections step down to
   --amber-ink for contrast (5.87:1 on #FFFFFF). */
h1 em,h2 em{font-style:italic;color:var(--amber);letter-spacing:0}
.sec--paper h2 em,.sec--paper2 h2 em,.frame--light h2 em{color:var(--amber-ink)}
.lede em{font-style:italic;color:var(--amber)}
.sec--paper .lede em,.sec--paper2 .lede em{color:var(--amber-ink)}

/* Scope band — Formation. Equity. Hiring. … as display type. Dark ground. */
.scopeband{border-bottom:1px solid var(--line-d);background:var(--night)}
.scopeband__in{padding:clamp(30px,4.6vw,54px) 0}
.scopeband__words{display:flex;flex-wrap:wrap;column-gap:clamp(18px,2.6vw,34px);row-gap:6px;align-items:baseline}
.scopeband__w{font-family:var(--serif);font-size:clamp(24px,3.6vw,46px);line-height:1.18;letter-spacing:-.012em;color:#F6F2E8}
.scopeband__w:nth-child(odd){color:var(--mut-d)}
/* (0,2,0) after the nth-child rule so the modifier wins regardless of the
   word's position — agent 1 caught the plain (0,1,0) version losing. */
.scopeband__w.scopeband__w--amber{color:var(--amber);font-style:italic}
.scopeband__line{margin-top:18px;font-size:15px;line-height:1.6;color:var(--dim-d);max-width:62ch}

/* Confidence-gate internals now wrap on phones instead of forcing a
   560px scroll strip inside the gatebox. */
@media(max-width:640px){
  .gauges{grid-template-columns:repeat(3,1fr);min-width:0}
  .gateline{min-width:0}
  .zones{grid-template-columns:1fr;min-width:0}
}

/* Small shared motion for hero/product moments (used via page CSS
   animation-name only; honors reduced motion). */
@keyframes v14-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes v14-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes v14-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .scopeband *,[style*="v14-"]{animation:none!important;transition:none!important}
}