/* ============ DESIGN TOKENS — "The Quiet Field Guide" ============ */
:root{
  /* surfaces (paper) — now stepping in real value */
  --surface:#FBFAF6;            /* primary page paper (warmer than white) */
  --surface-raised:#FFFFFF;     /* cards / raised elements */
  --surface-2:#F2EFE6;          /* sand alternating band */
  --surface-secondary:#ECE6DB;  /* clay-tint quiet emphasis band */
  --surface-ink-deep:#23272A;   /* dark full-bleed band (Colophon) */
  /* inks */
  --ink-900:#1C1F1D;
  --ink-700:#33383B;
  --ink-500:#5C615F;
  --ink-faint:#8A8E8A;
  --ink-on-dark:#F4F2EC;
  /* accents — two only, plus one caution amber */
  --pine:#1E5A4C;
  --pine-700:#143F35;
  --pine-tint:#DCE7E1;
  --clay:#8F4226;               /* terracotta DEEP — safe as small label text */
  --terra:#B65F40;              /* terracotta — markers / ticks / illustration lines */
  --terra-tint:#F0E2D8;
  --amber:#C68A2E;              /* caution markers only */
  --amber-tint:#F6ECD6;
  --caution-ink:#5E430E;
  --rule:#E2DDD2;
  --card-border:#E6E2D8;
  --focus:#1E5A4C;

  /* ---- Monochromatic green decision-engine tokens (anchored on --pine) ---- */
  --green-primary:#1E5A4C;            /* signature green — branding, active states */
  --green-dark:#143F35;               /* deep forest — headings/labels in callouts */
  --green-tint:rgba(31,92,77,.08);    /* ultra-light wash — card/blockquote fills */
  --green-tint-strong:rgba(31,92,77,.12);
  --green-border:rgba(31,92,77,.25);  /* crisp 25% green — dividers / subtle borders */

  --container:72rem;
  --gutter:clamp(16px,4vw,28px);
  --rhythm:clamp(48px,9vw,96px);
  --radius:14px;
  --radius-sm:10px;

  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink-700);
  background:var(--surface);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-serif);color:var(--ink-900);line-height:1.14;margin:0 0 .4em;font-weight:460;letter-spacing:-0.01em;font-optical-sizing:auto}
h4{font-family:var(--font-sans);color:var(--ink-900);line-height:1.35;margin:0 0 .4em;font-weight:600;letter-spacing:-0.005em}
h1{font-size:clamp(1.5rem,4.5vw,2.25rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:420}
h3{font-size:clamp(1.2rem,2.5vw,1.5rem);line-height:1.22;font-weight:500}
h4{font-size:1.05rem}
p{margin:0 0 1rem;max-width:65ch}
a{color:var(--pine);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pine-700)}
ul{margin:0 0 1rem;padding-left:1.2rem}
li{margin:.35rem 0}
img,svg{max-width:100%;height:auto;display:block}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--rhythm)}
.section--tint{background:var(--surface-2)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);margin:0 0 .7rem;display:flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--terra);flex:0 0 auto;border-radius:2px}
.eyebrow-ic::before{display:none}
.lead{font-size:1.125rem;color:var(--ink-700);max-width:62ch}
.muted{color:var(--ink-500);font-size:.875rem}
.updated{color:var(--ink-500);font-size:.8125rem;margin-top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.visually-quiet{font-size:1.1rem;color:var(--ink-700);font-weight:600;letter-spacing:.02em}
.section-head{max-width:64ch;margin-bottom:1.6rem}

/* Skip link */
.skip{position:absolute;left:8px;top:-60px;background:var(--pine);color:#fff;padding:10px 16px;border-radius:8px;z-index:200;transition:top .15s}
.skip:focus{top:8px;color:#fff}

/* ============ BUTTONS / CTAS ============ */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;border-radius:10px;padding:14px 22px;min-height:48px;cursor:pointer;border:1.5px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.btn--primary{background:var(--pine);color:#fff;border-color:var(--pine)}
.btn--primary:hover{background:var(--pine-700);border-color:var(--pine-700);color:#fff}
.btn--ghost{background:transparent;color:var(--pine);border-color:var(--pine)}
.btn--ghost:hover{background:rgba(31,92,77,.06);color:var(--pine-700);border-color:var(--pine-700)}
.btn .arrow{font-size:1.05em;line-height:1}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.textlink{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;text-decoration:none}
.textlink:hover{text-decoration:underline}
.textlink .arrow{transition:transform .15s}
.textlink:hover .arrow{transform:translateX(2px)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink-900);text-decoration:none;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--pine);display:inline-block}
.brand small{font-weight:500;color:var(--ink-500);font-size:.7rem;letter-spacing:.04em}
.primary-nav{margin-left:auto}
.primary-nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.primary-nav a{display:inline-block;padding:8px 11px;border-radius:8px;color:var(--ink-700);text-decoration:none;font-size:.92rem;font-weight:500}
.primary-nav a:hover{background:var(--surface-2);color:var(--ink-900)}
.primary-nav a[aria-current="page"]{color:var(--pine);font-weight:600}
.header-cta{margin-left:.5rem}
.header-cta .btn{padding:9px 16px;min-height:40px;font-size:.9rem}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--rule);border-radius:9px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-900)}
.nav-toggle svg{width:22px;height:22px}

/* Mobile drawer */
.drawer-backdrop{position:fixed;inset:0;background:rgba(20,22,21,.35);opacity:0;visibility:hidden;transition:opacity .2s;z-index:120}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(88vw,340px);background:#fff;z-index:130;transform:translateX(100%);transition:transform .22s ease;padding:20px;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.08)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.drawer-close{background:transparent;border:1.5px solid var(--rule);border-radius:9px;width:44px;height:44px;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink-900)}
.drawer nav ul{list-style:none;margin:1rem 0;padding:0}
.drawer nav a{display:block;padding:13px 8px;border-bottom:1px solid var(--rule);color:var(--ink-900);text-decoration:none;font-weight:500}
.drawer .btn{width:100%;justify-content:center;margin-top:1rem}

/* ============ HERO ============ */
.hero{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,56px);align-items:center;padding-block:clamp(40px,7vw,84px)}
.hero-display{font-family:var(--font-serif);font-size:clamp(2.1rem,6.8vw,3.7rem);line-height:1.08;color:var(--ink-900);font-weight:360;margin:.2rem 0 1rem;letter-spacing:-.018em;font-optical-sizing:auto}
.hero h1{font-size:1.02rem;font-weight:600;color:var(--ink-500);letter-spacing:0;line-height:1.4;max-width:60ch;margin-bottom:1.1rem}
.hero-intro{font-size:1.0625rem;color:var(--ink-700);max-width:56ch}
.trust-links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--rule);list-style:none;padding-left:0}
.trust-links a{font-size:.85rem;color:var(--ink-500);text-decoration:none;font-weight:500}
.trust-links a:hover{color:var(--pine);text-decoration:underline}
/* Hero editorial illustration */
.hero-figure{margin:0}
.hero-card{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:22px;box-shadow:0 14px 40px -28px rgba(26,29,27,.45)}
.hero-card .hc-eyebrow{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:.7rem}
.hero-card ul{list-style:none;padding:0;margin:0}
.hero-card li{display:flex;gap:.6rem;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--rule);font-size:.92rem;color:var(--ink-700)}
.hero-card li:last-child{border-bottom:0}
.tick{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:rgba(31,92,77,.12);color:var(--pine);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;margin-top:1px}
.hero-fig-cap{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);margin-top:.8rem;text-align:center}

/* ============ ANSWER CALLOUT ============ */
.answer{background:var(--surface-2);border:1px solid var(--rule);border-left:4px solid var(--pine);border-radius:var(--radius-sm);padding:clamp(18px,3vw,28px)}
.answer .eyebrow{color:var(--pine)}
.answer p{margin:0;max-width:70ch}
.answer--inset{margin-top:1.4rem}

/* ============ CARD GRID ============ */
.card-grid{display:grid;gap:clamp(16px,4vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.card{position:relative;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:20px}
.card h3{font-size:1.08rem;margin-bottom:.3rem}
.card p{font-size:.92rem;color:var(--ink-700);margin-bottom:.7rem}
.card .card-icon{width:34px;height:34px;border-radius:9px;background:var(--surface-2);color:var(--pine);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.card .card-icon svg{width:19px;height:19px}
.card .textlink{font-size:.9rem}
.card--link a.stretched::after{content:"";position:absolute;inset:0}

/* ============ CHECKLIST FEATURE ============ */
.feature{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.feature-lede{padding:clamp(22px,4vw,36px);border-bottom:1px solid var(--rule)}
.feature-lede .sub{color:var(--ink-500);font-size:.85rem;margin-top:.6rem;margin-bottom:0}
.theme-list{padding:clamp(20px,4vw,32px)}
.theme-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));list-style:none;padding:0;margin:0}
.theme{background:var(--surface-2);border-radius:var(--radius-sm);padding:15px 16px}
.theme b{display:block;color:var(--ink-900);font-size:.95rem;margin-bottom:.2rem}
.theme span{font-size:.86rem;color:var(--ink-700)}

/* numbered buyer-risk list */
.num-list{list-style:none;counter-reset:nl;padding:0;margin:1.2rem 0;display:grid;gap:10px}
.num-list>li{counter-increment:nl;position:relative;background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 16px 14px 52px;font-size:.92rem;color:var(--ink-700)}
.num-list>li::before{content:counter(nl);position:absolute;left:14px;top:13px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--pine);background:var(--surface-raised);border:1px solid var(--rule);border-radius:50%}
.num-list>li b{color:var(--ink-900)}

/* guided reading sequence */
.readseq{list-style:none;counter-reset:rs;padding:0;margin:1.2rem 0;display:grid;gap:4px}
.readseq>li{counter-increment:rs;position:relative;padding:11px 0 11px 40px;border-bottom:1px solid var(--rule)}
.readseq>li:last-child{border-bottom:0}
.readseq>li::before{content:counter(rs,decimal-leading-zero);position:absolute;left:0;top:13px;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-500)}
.rs-note{display:block;font-size:.84rem;color:var(--ink-500);margin-top:.15rem}

/* ============ FIELD CHECKLIST (interactive) ============ */
.checklist-tool{border:1px solid var(--card-border);border-radius:var(--radius);background:var(--surface-raised);overflow:hidden}
.cl-head{display:flex;align-items:center;gap:.8rem;padding:13px 16px;background:var(--surface-2);border-bottom:1px solid var(--rule)}
.cl-count-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-700);white-space:nowrap}
.cl-count-label [data-cl-count]{color:var(--pine);font-weight:600}
.cl-progress{flex:1;height:6px;border-radius:99px;background:var(--surface-secondary);overflow:hidden;min-width:60px}
.cl-progress-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pine),var(--terra));border-radius:99px;transition:width .35s ease}
.checklist{list-style:none;margin:0;padding:6px}
.checklist li{margin:0}
.cl-row{display:flex;gap:.7rem;align-items:flex-start;padding:12px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s}
.cl-row:hover{background:var(--surface-2)}
.cl-check{position:absolute;opacity:0;width:1px;height:1px}
.cl-box{flex:0 0 auto;width:24px;height:24px;border:1.8px solid var(--ink-faint);border-radius:7px;background:var(--surface-raised);display:flex;align-items:center;justify-content:center;margin-top:1px;transition:border-color .15s,background-color .15s}
.cl-box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cl-box svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease}
.cl-check:checked + .cl-box{background:var(--pine);border-color:var(--pine)}
.cl-check:checked + .cl-box svg path{stroke-dashoffset:0}
.cl-check:focus-visible + .cl-box{outline:2px solid var(--focus);outline-offset:2px}
.cl-text b{display:block;color:var(--ink-900);font-size:.95rem;margin-bottom:.1rem;transition:color .15s}
.cl-text span{font-size:.86rem;color:var(--ink-700)}
.cl-check:checked ~ .cl-text b{color:var(--pine)}
.cl-note{font-size:.8rem;color:var(--ink-500);margin:.2rem 12px 12px;display:flex;gap:.4rem;align-items:flex-start}
@media (prefers-reduced-motion:reduce){.cl-box svg path{transition:none}}

/* Key takeaways */
.takeaways{border:1px solid var(--rule);border-radius:var(--radius-sm);background:#fff;padding:18px 20px;margin-top:1.6rem}
.takeaways .eyebrow{color:var(--ink-500)}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{font-size:.92rem}

/* Definition list */
.deflist{margin:1.4rem 0 0;display:grid;gap:0}
.deflist dt{font-weight:600;color:var(--ink-900);margin-top:1rem}
.deflist dd{margin:.15rem 0 0;font-size:.95rem;color:var(--ink-700);max-width:68ch}

/* ============ COMPARISON TABLE ============ */
.table-wrap{margin-top:1.2rem}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.cmp-table caption{caption-side:top;text-align:left;font-size:.8rem;color:var(--ink-500);margin-bottom:.5rem;font-weight:500}
.cmp-table th,.cmp-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp-table thead th{background:var(--surface-2);color:var(--ink-900);font-size:.82rem;letter-spacing:.02em}
.cmp-table th[scope=row]{color:var(--ink-900);font-weight:600;width:26%}
.cmp-table tr:last-child td,.cmp-table tr:last-child th{border-bottom:0}
.table-note{font-size:.82rem;color:var(--ink-500);margin-top:.6rem}

/* ============ PILLS / CHIPS ============ */
.axis-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.5rem 0 1.5rem}
.axis-list li{background:var(--surface-2);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:.85rem;color:var(--ink-700);font-weight:500}
.chip-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));list-style:none;padding:0;margin:0 0 1.4rem}
.chip{background:#fff;border:1px solid var(--rule);border-radius:var(--radius-sm);padding:14px 12px;text-align:center;font-weight:600;color:var(--ink-900);font-size:.95rem}

/* ============ TRUST STRIP ============ */
.trust-strip{background:var(--surface-ink-deep);color:var(--ink-on-dark);position:relative}
.trust-strip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--terra),transparent);opacity:.5}
.trust-strip .eyebrow{color:var(--terra-tint)}
.trust-strip .eyebrow::before{background:var(--terra)}
.trust-strip .visually-quiet{color:var(--ink-on-dark)}
.trust-strip .muted{color:#A7ABA6}
.independence{font-family:var(--font-serif);font-size:clamp(1.3rem,2.7vw,1.75rem);line-height:1.36;font-weight:360;color:var(--ink-on-dark);max-width:62ch;margin:0 0 1.8rem;font-optical-sizing:auto}
.trust-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px}
.trust-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3);box-shadow:0 18px 36px -28px rgba(0,0,0,.7)}
.trust-card .card-icon{background:rgba(255,255,255,.07)}
.trust-strip .card-icon .ic{color:var(--terra-tint)}
.trust-card h3{font-size:1rem;margin-bottom:.25rem}
.trust-card h3 a{color:var(--ink-on-dark)}
.trust-card h3 a:hover{color:var(--terra-tint)}
.trust-card p{font-size:.86rem;color:#C9CDC8;margin:0}

/* ============ FAQ ============ */
.faq{max-width:60rem}
.faq details{border:1px solid var(--rule);border-radius:var(--radius-sm);background:#fff;margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 18px;min-height:56px;font-weight:600;color:var(--ink-900);font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:0 0 auto;transition:transform .2s;color:var(--pine)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .faq-body{padding:0 18px 18px}
.faq .faq-body p{font-size:.95rem;margin-bottom:.6rem}
.faq h3{margin:0;font-size:inherit;font-weight:inherit;color:inherit;line-height:1.3}

/* ============ SOFT CTA ============ */
.softcta{background:var(--pine);color:#fff;border-radius:var(--radius);padding:clamp(28px,5vw,52px);text-align:center}
.softcta h2{color:#fff}
.softcta p{color:rgba(255,255,255,.9);margin:0 auto 1.4rem;max-width:54ch}
.softcta .cta-row{justify-content:center}
.softcta .btn--primary{background:#fff;color:var(--pine);border-color:#fff}
.softcta .btn--primary:hover{background:var(--surface-2);color:var(--pine-700)}
.softcta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.softcta .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.softcta .fineprint{color:rgba(255,255,255,.78);font-size:.82rem;margin:1.2rem auto 0}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink-900);color:#cfd3cf;padding-block:clamp(34px,6vw,60px) 24px;margin-top:var(--rhythm)}
.footer-brand{color:#fff;max-width:55ch;font-size:.95rem;margin-bottom:2rem}
.footer-cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));margin-bottom:2rem}
.footer-cols h2{color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem}
.footer-cols ul{list-style:none;padding:0;margin:0}
.footer-cols li{margin:.5rem 0}
.footer-cols a{color:#cfd3cf;text-decoration:none;font-size:.9rem}
.footer-cols a:hover{color:#fff;text-decoration:underline}
.disclosure{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:18px 0;font-size:.82rem;color:#a9aea9;max-width:90ch}
.footer-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.8rem;color:#9aa09a;padding-top:18px}

/* ============ STICKY BAR (mobile) ============ */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--rule);padding:10px var(--gutter);padding-bottom:calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;gap:10px;transform:translateY(110%);transition:transform .18s ease;box-shadow:0 -6px 24px -18px rgba(0,0,0,.4)}
.sticky-bar.show{transform:translateY(0)}
.sticky-bar .btn{flex:1;justify-content:center;padding:12px 14px;min-height:46px}
.sticky-bar .dismiss{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--rule);background:#fff;border-radius:9px;cursor:pointer;color:var(--ink-500);font-size:1.2rem;line-height:1}

/* ============ RESPONSIVE ============ */
@media (max-width:1023px){
  .primary-nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-figure{order:-1;max-width:440px}
}
@media (max-width:639px){
  .sticky-bar{display:flex}
  /* comparison tables -> stacked labeled cards */
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td,.cmp-table th{display:block;width:100%}
  .cmp-table{border:0;background:transparent}
  .cmp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp-table tr{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:14px;padding:6px 14px}
  .cmp-table th[scope=row]{width:100%;font-size:1rem;padding:12px 0 6px;border-bottom:1px solid var(--rule)}
  .cmp-table td{border-bottom:1px dashed var(--rule);padding:10px 0}
  .cmp-table tr td:last-child{border-bottom:0}
  .cmp-table td::before{content:attr(data-label);display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:2px}
}

/* ============ ICON SYSTEM ============ */
.ic{width:1.45em;height:1.45em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:middle}
.card-icon .ic,.tsignal .ic,.review-mini .ic{width:20px;height:20px;color:var(--pine)}
.eyebrow-ic{display:inline-flex;align-items:center;gap:.4rem}
.eyebrow-ic .ic{width:1.05em;height:1.05em;color:var(--clay)}

/* ============ REVEAL / MOTION ============ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.reveal.in-view{opacity:1;transform:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pinDrop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.flow{stroke-dasharray:1;stroke-dashoffset:1}
.in-view .flow{animation:draw 1.7s ease forwards}

/* hover lift (shared) */
.card,.trust-card,.tsignal,.review-mini,.dcard,.region-card,.claim-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover,.trust-card:hover,.tsignal:hover,.review-mini:hover,.region-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(26,29,27,.5);border-color:#cdcabf}

/* ============ HERO DECISION BOARD ============ */
.hero-board{position:relative;background:var(--surface-raised);border:1px solid var(--card-border);border-radius:var(--radius);padding:26px 22px 24px;box-shadow:0 30px 64px -42px rgba(28,31,29,.6);overflow:hidden;animation:floatY 9s ease-in-out infinite}
.hero-board::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pine) 0%,var(--pine) 55%,var(--terra) 55%,var(--terra) 100%)}
.hero-board::after{content:"PLATE 01";position:absolute;top:13px;right:18px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink-faint)}
.board-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board-head{display:flex;align-items:center;gap:.6rem;position:relative;margin-bottom:16px;padding-right:62px}
.board-head .eyebrow{margin:0;color:var(--pine)}
.board-meter{flex:1;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:40px}
.board-meter-fill{display:block;height:100%;width:0;background:var(--pine);border-radius:99px;transition:width 1.5s ease .2s}
.in-view .board-meter-fill{width:100%}
.board-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:0;padding:0}
.dcard{display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--rule);border-radius:11px;padding:11px 12px;font-size:.86rem;font-weight:600;color:var(--ink-900);line-height:1.25}
.dcard .ic{width:18px;height:18px;color:var(--pine)}
.dcard .tk{width:17px;height:17px;margin-left:auto;color:var(--pine);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1}
.in-view .dcard .tk{animation:draw .55s ease forwards;animation-delay:calc(var(--i,0)*.11s + .35s)}
.dcard:hover{border-color:var(--pine);box-shadow:0 12px 26px -22px rgba(31,92,77,.6)}
.dcard:nth-child(7){grid-column:1 / -1}

/* ============ BODY-FIT CHAIR MAP ============ */
.fit-figure{margin:0 0 1.8rem;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(16px,3vw,26px)}
.fit-figure svg{width:100%;height:auto;max-width:520px;margin:0 auto;display:block}
.chair-body{fill:#fff;stroke:var(--pine);stroke-width:2.2;stroke-linejoin:round}
.chair-fill{fill:rgba(31,92,77,.06)}
.cp-dot{fill:var(--pine)}
.cp-ring{fill:none;stroke:var(--pine);stroke-width:1.6}
.in-view .cp-ring{animation:pulse 2.4s ease-in-out infinite}
.cp-line{stroke:#b9b6ab;stroke-width:1.2;stroke-dasharray:3 3}
.cp-label{font:600 12.5px var(--font-sans);fill:var(--ink-900)}
.cp{opacity:0}
.in-view .cp{animation:cpIn .5s ease forwards;animation-delay:calc(var(--i,0)*.14s + .2s)}
.fit-figcap{font-size:.78rem;color:var(--ink-500);text-align:center;margin:.7rem 0 0}

/* ============ TRAILHEAD MAP ============ */
.trailhead-fig{margin:0 0 1.9rem}
.trailhead-fig svg{width:100%;height:auto;max-width:660px}
.th-main{fill:none;stroke:var(--pine);stroke-width:2.4;stroke-linecap:round}
.th-branch{fill:none;stroke:var(--terra);stroke-width:2;stroke-linecap:round}
.th-start{fill:var(--pine)}
.th-fork{fill:var(--pine)}
.th-node{fill:var(--surface-raised);stroke:var(--terra);stroke-width:2}
.th-node-dot{fill:var(--terra)}
.th-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;fill:var(--ink-700)}
.th-start-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;fill:var(--pine);font-weight:600}
.trailhead-cap{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);margin:.7rem 0 0}
/* route-card trail markers */
#start-here .card{border-left-width:3px;border-left-color:var(--rule)}
#start-here .card:hover{border-left-color:var(--terra)}

/* ============ TRUST SIGNAL GRID ============ */
.tsignal-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));list-style:none;padding:0;margin:0 0 1.6rem}
.tsignal{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-sm);padding:14px 15px}
.tsignal .ts-ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.tsignal b{display:block;color:var(--ink-900);font-size:.92rem}
.tsignal span{font-size:.82rem;color:var(--ink-700)}
.ts-check{display:inline-flex;align-items:center;gap:.25rem;margin-top:.3rem;font-size:.72rem;font-weight:600;color:var(--pine)}
.ts-check .ic{width:13px;height:13px}

/* ============ REVIEW MINI 3-COL ============ */
.review-minis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));list-style:none;padding:0;margin:1.2rem 0 0}
.review-mini{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:18px}
.review-mini .ic{width:24px;height:24px;color:var(--pine);margin-bottom:.5rem}
.review-mini b{display:block;color:var(--ink-900);font-size:1rem;margin-bottom:.2rem}
.review-mini span{font-size:.86rem;color:var(--ink-700)}

/* ============ CLAIM LANGUAGE COMPARE ============ */
.answer--amber{background:var(--amber-tint);border-color:#E7D9B8;border-left-color:var(--amber)}
.answer--amber .eyebrow{color:var(--caution-ink)}
.answer--amber .eyebrow::before{background:var(--amber)}
.claim-compare{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));margin:1.4rem 0 .4rem}
.claim-card{border:1px solid var(--rule);border-radius:var(--radius);padding:16px 17px;background:#fff}
.claim-card p{font-size:.92rem;margin:.5rem 0;color:var(--ink-700)}
.claim-card small{color:var(--ink-500);font-size:.8rem}
.claim-card.is-watch{background:var(--amber-tint);border-color:#E7D9B8}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(31,92,77,.1);color:var(--pine)}
.pill .ic{width:13px;height:13px}
.pill-amber{background:rgba(198,138,46,.16);color:var(--caution-ink)}

/* ============ REGION MAP ============ */
.region-figure{margin:0 0 1.6rem}
.region-map{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,32px);align-items:center;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(18px,3vw,28px)}
.region-map svg{width:clamp(120px,30vw,180px);height:auto}
.ca-shape{fill:#fff;stroke:var(--pine);stroke-width:2;stroke-linejoin:round}
.ca-coast{fill:none;stroke:#b9b6ab;stroke-width:1.2;stroke-dasharray:3 4}
.pin{opacity:0}
.in-view .pin{animation:pinDrop .5s ease forwards;animation-delay:calc(var(--i,0)*.16s + .15s)}
.pin-head{fill:var(--clay)}
.pin-label{font:600 11px var(--font-sans);fill:var(--ink-900)}
.region-note{font-size:.92rem;color:var(--ink-700)}
.region-note b{color:var(--ink-900)}

/* ============ BRAND CHIP REVEAL ============ */
.chip{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease}
.chip:hover{transform:translateY(-2px);border-color:var(--pine)}
.chip .chip-note{display:block;font-size:.68rem;font-weight:500;letter-spacing:.02em;color:var(--pine);margin-top:.25rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease}
.chip:hover .chip-note{max-height:2em;opacity:1}
.chip::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--terra);margin-right:.45rem;vertical-align:middle}
/* Field Index ledger header */
.fi-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .85rem;padding-bottom:.7rem;margin:1.5rem 0 1.1rem;border-bottom:1px solid var(--rule)}
.fi-kicker{font-family:var(--font-serif);font-size:1.2rem;font-weight:500;color:var(--ink-900);letter-spacing:-.01em}
.fi-meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-500);text-transform:uppercase}
.fi-legend-title{font-weight:600;color:var(--ink-900);margin-bottom:.4rem;font-size:.95rem}

@media (max-width:1149px){
  .primary-nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:1023px){
  .hero-board{animation:none}
}
@media (max-width:639px){
  .board-grid{grid-template-columns:1fr}
  .dcard:nth-child(7){grid-column:auto}
  .region-map{grid-template-columns:1fr;text-align:center}
  .region-map svg{margin:0 auto}
}


/* ================= COMPONENTS 6-10 (Quiet Field Guide) ================= */

/* --- hs --- */
.hs-figure {
  margin: 0;
  max-width: 920px;
  width: 100%;
  color: var(--ink-900);
}

.hs-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- line language: two weights, round caps/joins ---- */
.hs-line {
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hs-detail {
  fill: none;
  stroke: var(--ink-700);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* averaged mark */
.hs-star {
  fill: var(--amber-tint);
  stroke: var(--ink-900);
}
.hs-bignum {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 64px;
  fill: var(--ink-900);
  text-anchor: middle;
}
.hs-avglabel {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  fill: var(--ink-700);
  text-anchor: middle;
}
.hs-avgsub {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 13px;
  fill: var(--ink-500);
  text-anchor: middle;
}

/* arrow */
.hs-arrow { stroke: var(--clay); }
.hs-arrowhead { stroke: var(--clay); stroke-width: 1.6; }
.hs-arrowlabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: var(--clay);
  text-anchor: middle;
}

/* eyebrows / labels */
.hs-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  fill: var(--ink-faint);
}
.hs-lenslabel {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--pine-700);
}
.hs-lenssub {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--ink-500);
}
.hs-scaleend {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  fill: var(--ink-faint);
  text-anchor: start;
}
.hs-scaleend--hi { text-anchor: end; }

/* baselines + ticks (pine) */
.hs-base {
  fill: none;
  stroke: var(--pine);
  stroke-width: 2;
  stroke-linecap: round;
}
.hs-tick { stroke: var(--pine); }

/* scattered markers (terracotta) */
.hs-dot {
  fill: var(--terra-tint);
  stroke: var(--terra);
  stroke-width: 2;
}
.hs-dot--low {
  fill: var(--surface-raised);
  stroke: var(--clay);
  stroke-width: 1.6;
  stroke-dasharray: 2.4 2.6;
}

/* legend */
.hs-rule { stroke: var(--rule); stroke-width: 1; }
.hs-legend {
  font-family: var(--font-sans);
  font-size: 12.5px;
  fill: var(--ink-500);
}

/* caption */
.hs-caption {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-500);
  margin-top: 18px;
  max-width: 62ch;
}
.hs-caption-lead {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-900);
}

/* ---- mobile reflow ---- */
@media (max-width: 560px) {
  .hs-bignum { font-size: 56px; }
  .hs-caption { font-size: 14px; }
}

/* --- tl --- */
/* ===== The Trust Ledger — scoped to tl- ===== */
.tl-figure{
  margin:0;
  max-width:720px;
}
.tl-svg{
  width:100%;
  height:auto;
  display:block;
}

/* card + structural rules */
.tl-card{
  fill:var(--surface-raised);
  stroke:var(--card-border);
  stroke-width:1.25;
}
.tl-spine{
  stroke:var(--terra-tint);
  stroke-width:2;
  stroke-linecap:round;
}

/* hairline rules between rows (two-weight: detail 1.25, strong 2) */
.tl-rule{
  stroke:var(--rule);
  stroke-width:1.25;
  stroke-linecap:round;
  fill:none;
}
.tl-rule-strong{
  stroke:var(--ink-faint);
  stroke-width:2;
}

/* header type */
.tl-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  fill:var(--clay);
}
.tl-headline{
  font-family:var(--font-serif);
  font-size:23px;
  font-weight:600;
  fill:var(--ink-900);
}
.tl-colhead{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.13em;
  fill:var(--ink-500);
}

/* row numbers + decorative open-square markers */
.tl-mark{
  fill:none;
  stroke:var(--pine);
  stroke-width:1.5;
}
.tl-num{
  font-family:var(--font-mono);
  font-size:10px;
  text-anchor:middle;
  fill:var(--pine-700);
}

/* row content */
.tl-crit{
  font-family:var(--font-sans);
  font-size:15.5px;
  font-weight:600;
  fill:var(--ink-900);
}
.tl-good{
  font-family:var(--font-sans);
  font-size:14px;
  fill:var(--ink-700);
}
/* warm small text uses --clay (contrast-safe), never raw terracotta */
.tl-good-warm{
  fill:var(--clay);
}

/* footer note */
.tl-leader{
  stroke:var(--terra);
  stroke-width:2;
  stroke-linecap:round;
  fill:none;
}
.tl-note{
  font-family:var(--font-sans);
  font-size:13px;
  font-style:italic;
  fill:var(--ink-500);
}
.tl-note-2{
  font-style:normal;
}

/* single allowed pine->terracotta hairline (decorative, aria-hidden) */
.tl-hairline{
  stroke:url(#tl-grad);
  stroke-width:1.25;
  stroke-linecap:round;
}
.tl-foot-tag{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-anchor:end;
  fill:var(--ink-faint);
}

/* caption */
.tl-cap{
  margin-top:14px;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  color:var(--ink-500);
  max-width:60ch;
}

@media (max-width:560px){
  .tl-headline{ font-size:20px; }
  .tl-crit{ font-size:14.5px; }
  .tl-good{ font-size:13px; }
}

/* --- fm --- */
/* ===== The Fit Map — scoped to .fm- prefix ===== */
.fm-fig{
  margin:0;
  max-width:880px;
  width:100%;
  font-family:var(--font-sans);
}
.fm-cap{
  margin:0 0 1.25rem;
  max-width:46rem;
}
.fm-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay);
  margin-bottom:.55rem;
}
.fm-title{
  font-family:var(--font-serif);
  font-weight:480;
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.18;
  color:var(--ink-900);
  margin:0 0 .5rem;
}
.fm-lede{
  font-size:.98rem;
  line-height:1.55;
  color:var(--ink-700);
  margin:0;
}
.fm-lede em{
  font-style:italic;
  color:var(--ink-900);
}
.fm-svg{
  display:block;
  width:100%;
  height:auto;
}

/* lines — chair glyph */
.fm-main{
  fill:none;
  stroke:var(--ink-900);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fm-detail{
  fill:none;
  stroke:var(--ink-700);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fm-fill-pine{ fill:var(--pine-tint); stroke:none; }
.fm-fill-sand{ fill:var(--surface-2); stroke:none; }
.fm-pad{ fill:var(--surface-raised); }
.fm-dot{ fill:var(--ink-700); stroke:none; }
.fm-ripple{ stroke:var(--terra); }

/* reference plate */
.fm-rule{
  fill:none;
  stroke:var(--rule);
  stroke-width:1.5;
  stroke-linecap:round;
}
.fm-tick{
  stroke:var(--ink-faint);
  stroke-width:1;
  stroke-linecap:round;
}
.fm-platelabel{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  fill:var(--ink-faint);
}

/* annotation leaders + labels */
.fm-lead{
  fill:none;
  stroke:var(--terra);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-dasharray:1.5 4;
}
.fm-anchor{
  fill:var(--surface);
  stroke:var(--clay);
  stroke-width:1.5;
}
.fm-num{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  fill:var(--clay);
}
.fm-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  fill:var(--ink-900);
}
.fm-hint{
  font-family:var(--font-sans);
  font-size:11.5px;
  fill:var(--ink-500);
}
/* caution checkpoint — calm amber, dark text for contrast */
.fm-label-amber{ fill:var(--caution-ink); }
.fm-hint-amber{ fill:var(--caution-ink); }

/* legend */
.fm-legend-rule{
  stroke:var(--rule);
  stroke-width:1;
}
.fm-legend-txt{
  font-family:var(--font-sans);
  font-size:11.5px;
  fill:var(--ink-500);
}
.fm-lead-legend{
  stroke:var(--terra);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-dasharray:1.5 4;
}
.fm-legend-swatch{
  fill:var(--amber-tint);
  stroke:var(--amber);
  stroke-width:1.25;
}

/* --- td --- */
.td-fig{
  margin:0;
  width:100%;
  max-width:880px;
  margin-inline:auto;
}
.td-svg{
  display:block;
  width:100%;
  height:auto;
}

/* ---- line weights (field-guide two-weight line) ---- */
.td-line{
  stroke:var(--ink-900);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.td-line-d{
  stroke:var(--ink-700);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

/* ---- soft tint fills ---- */
.td-glyph-tint{ fill:var(--pine-tint); }
.td-glyph-tint-t{ fill:var(--terra-tint); }
.td-fill-paper{ fill:var(--surface); }
.td-fill-pine{ fill:var(--pine); stroke:none; }

/* ---- eyebrow ---- */
.td-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  fill:var(--clay);
}
.td-eyebrow-rule{
  stroke:var(--terra);
  stroke-width:1.25;
  stroke-linecap:round;
}

/* ---- door labels ---- */
.td-door-label{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.18em;
  fill:var(--ink-900);
}
.td-door-sub{
  font-family:var(--font-sans);
  font-size:12.5px;
  fill:var(--ink-500);
}

/* ---- centre spine ---- */
.td-spine-plate{
  fill:var(--surface-2);
  stroke:var(--card-border);
  stroke-width:1.25;
}
.td-spine-eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  fill:var(--pine-700);
}
.td-spine-eyebrow-2{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  fill:var(--ink-500);
}
.td-spine{
  stroke:var(--pine);
  stroke-width:2;
}

/* ---- question nodes ---- */
.td-node{
  stroke:var(--pine);
  stroke-width:2;
}
.td-node-num{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  fill:var(--pine-700);
}
.td-q{
  font-family:var(--font-serif);
  font-size:16px;
  font-weight:500;
  fill:var(--ink-900);
}

/* ---- connectors ---- */
.td-conn{
  stroke:var(--terra);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-dasharray:3 4;
  fill:none;
}

/* ---- trade-offs ---- */
.td-trade-head{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  fill:var(--ink-700);
}
.td-trade-rule{
  stroke:var(--rule);
  stroke-width:1.25;
}
.td-trade{
  font-family:var(--font-sans);
  font-size:13px;
  fill:var(--ink-700);
}
.td-trade-soft{
  fill:var(--ink-500);
}
.td-tick{
  stroke:var(--pine);
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.td-dash{
  fill:none;
  stroke:var(--ink-faint);
  stroke-width:1.5;
}
.td-dash-line{
  stroke:var(--ink-faint);
  stroke-width:1.5;
  stroke-linecap:round;
}

/* ---- spine foot ---- */
.td-end-node{ stroke:none; }
.td-spine-foot{
  font-family:var(--font-sans);
  font-size:12.5px;
  font-style:italic;
  fill:var(--ink-500);
}

/* ---- figcaption ---- */
.td-figcaption{
  margin-top:18px;
  font-family:var(--font-serif);
  font-size:15px;
  line-height:1.5;
  color:var(--ink-500);
  text-align:center;
  max-width:46ch;
  margin-inline:auto;
}

/* ---- mobile reflow ---- */
@media (max-width:560px){
  .td-q{ font-size:14.5px; }
  .td-figcaption{ font-size:14px; }
}

/* --- lol --- */
.lol-figure {
  margin: 0;
  max-width: 760px;
}

.lol-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* faint graticule grid */
.lol-grid line {
  stroke: var(--rule);
  stroke-width: 1;
  opacity: 0.55;
}

/* registration ticks */
.lol-ticks path {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* landmass */
.lol-land-fill {
  fill: var(--pine-tint);
  opacity: 0.5;
}

.lol-coast-inland {
  fill: none;
  stroke: var(--ink-700);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lol-coast-dash {
  fill: none;
  stroke: var(--terra);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 6;
}

/* leaders / measure lines */
.lol-leader {
  stroke: var(--terra);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.85;
}

/* pin dots */
.lol-dot {
  fill: var(--pine);
}

.lol-dot-ring {
  fill: none;
  stroke: var(--pine);
  stroke-width: 1.25;
  opacity: 0.55;
}

.lol-dot--accent {
  fill: var(--clay);
}

.lol-dot-ring--accent {
  stroke: var(--clay);
  opacity: 0.6;
}

/* pin labels */
.lol-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--ink-900);
}

.lol-label--right {
  text-anchor: end;
}

.lol-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--ink-500);
}

.lol-sub--right {
  text-anchor: end;
}

/* legend plate */
.lol-legend-box {
  fill: var(--surface-raised);
  stroke: var(--card-border);
  stroke-width: 1;
}

.lol-legend-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--ink-faint);
}

.lol-legend-dash {
  stroke: var(--terra);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
}

.lol-legend-dot {
  fill: var(--pine);
}

.lol-legend-key {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--ink-700);
}

/* mono stamp */
.lol-stamp-box {
  fill: none;
  stroke: var(--clay);
  stroke-width: 1.25;
  opacity: 0.85;
}

.lol-stamp-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: var(--clay);
  text-anchor: middle;
}

/* not-to-scale note */
.lol-scale-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--ink-faint);
}

/* caption */
.lol-cap {
  margin-top: 18px;
  max-width: 60ch;
}

.lol-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 8px;
}

.lol-cap-text {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* mobile: tighten labels and reflow caption */
@media (max-width: 380px) {
  .lol-label { font-size: 13px; }
  .lol-sub { font-size: 12px; }
  .lol-legend-key { font-size: 12px; }
  .lol-stamp-text { font-size: 12px; }
  .lol-cap-text { font-size: 14px; }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .board-meter-fill{width:100%!important}
  .cp,.pin{opacity:1!important}
  .flow{stroke-dashoffset:0!important}
  .dcard .tk{stroke-dashoffset:0!important}
}

/* ================= INNER PAGES ================= */
.breadcrumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-500);padding-block:1.3rem .2rem}
.breadcrumb a{color:var(--ink-500);text-decoration:none}
.breadcrumb a:hover{color:var(--pine);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink-700)}
.breadcrumb .sep{margin:0 .5rem;color:var(--ink-faint)}
.page-hero{padding-block:clamp(14px,3vw,28px) clamp(22px,4vw,40px);border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,5vw,48px)}
.page-hero .eyebrow{color:var(--clay)}
.page-hero h1{font-family:var(--font-serif);font-size:clamp(1.9rem,5vw,3rem);font-weight:380;line-height:1.08;letter-spacing:-.018em;margin:0 0 .6rem;max-width:22ch;font-optical-sizing:auto}
.page-hero .lead{font-size:clamp(1.08rem,2.2vw,1.22rem);color:var(--ink-700);max-width:60ch}
.prose{max-width:44rem}
.prose>h2{margin-top:2.4rem}
.prose>h3{margin-top:1.7rem}
.prose>p,.prose li{font-size:1.0625rem;color:var(--ink-700)}
.prose>p{max-width:42rem}
.prose .answer,.prose .takeaways,.prose .table-wrap,.prose .softcta{margin:1.8rem 0}
.prose ul,.prose ol{margin:0 0 1.1rem}
.page-updated{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);margin-top:2.8rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.page-related{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--rule)}

/* ================= INNER-PAGE HERO ILLUSTRATION ================= */
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,4vw,52px);align-items:center}
.page-hero-illu{margin:0;min-width:0}
.page-hero-illu .illu{width:100%;height:auto;max-width:480px;display:block}
.illu-cap{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);margin:.7rem 0 0}
@media (max-width:860px){
  .page-hero-grid{grid-template-columns:1fr}
  .page-hero-illu{max-width:440px;margin-top:.6rem}
}
/* shared illustration kit — one family for every page */
.illu .il-ln{fill:none;stroke:var(--ink-900);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.illu .il-d{fill:none;stroke:var(--ink-700);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.illu .il-p{fill:none;stroke:var(--pine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.illu .il-t{fill:none;stroke:var(--terra);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.illu .il-dash{stroke-dasharray:3 4}
.illu .if-p{fill:var(--pine-tint)}
.illu .if-t{fill:var(--terra-tint)}
.illu .if-s{fill:var(--surface-2)}
.illu .if-w{fill:var(--surface-raised)}
.illu .if-a{fill:var(--amber-tint)}
.illu .in-t{fill:var(--terra)}
.illu .in-p{fill:var(--pine)}
.illu .in-a{fill:var(--amber)}
.illu .il-lbl{font-family:var(--font-sans);font-size:13px;font-weight:500;fill:var(--ink-700)}
.illu .il-sm{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;fill:var(--ink-500)}
.illu .il-ttl{font-family:var(--font-serif);font-size:19px;fill:var(--ink-900)}
.illu .il-num{font-family:var(--font-serif);font-size:42px;fill:var(--ink-900)}
/* page photo slot (atmospheric, lazy; placeholder until a real image is dropped in) */
.page-photo{margin:1.8rem 0;max-width:44rem}
.page-photo img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--card-border);display:block}
.page-photo figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);margin-top:.55rem}

/* ============ ON-PAGE NAV (compact table of contents) ============ */
.onpage{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface-raised);padding:16px 18px;margin:1.8rem 0}
.onpage .eyebrow{margin-bottom:.75rem}
.onpage ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem .5rem;margin:0;padding:0}
.onpage li{margin:0}
.onpage a{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:500;color:var(--ink-700);text-decoration:none;background:var(--surface-2);border:1px solid var(--rule);border-radius:999px;padding:7px 14px;white-space:nowrap;min-height:36px}
.onpage a:hover{color:var(--pine);border-color:var(--pine);background:var(--surface-raised)}
.onpage a .num{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint)}
.onpage a:hover .num{color:var(--pine)}
@media (max-width:639px){
  .onpage ol{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:5px;scrollbar-width:thin}
  .onpage a{white-space:nowrap}
}

/* mini definition pair used inline in prose (AI-extractable key terms) */
.deflist--terms{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px;margin:1.6rem 0}
.deflist--terms dt{margin-top:.9rem}
.deflist--terms dt:first-of-type{margin-top:0}

/* two-up scenario / buyer-fit cards keep the icon tidy */
.fit-buyer .card-icon{margin-bottom:.6rem}
.fit-buyer .card{display:flex;flex-direction:column}
.fit-buyer .card .textlink{margin-top:auto;padding-top:.4rem}

/* ============ CHECKLIST PAGE — additive layout helpers ============ */
/* hero action row + trust links sit at the very top of .prose */
.hero-actions{margin:.2rem 0 .4rem}
.hero-actions .cta-row{margin-top:0}
.hero-actions .trust-links{margin-top:1rem;padding-top:.9rem}

/* on-page nav: scroll-spy current state + section anchor offset */
.onpage a[aria-current]{color:#fff;background:var(--pine);border-color:var(--pine)}
.onpage a[aria-current] .num{color:rgba(255,255,255,.75)}
.prose h2[id],.prose section[id],.prose [data-anchor]{scroll-margin-top:96px}
.prose .cl-section{margin-top:2.6rem}
.prose .cl-section>h2{margin-top:0}

/* spacing for interactive checklists and comparison modules inside prose */
.prose .checklist-tool{margin:1.4rem 0}
.prose .card-grid,.prose .dual-list,.prose .review-minis,.prose .chip-grid,
.prose .claim-compare,.prose .tsignal-grid,.prose .fit-figure,.prose .deflist--terms{margin:1.5rem 0}

/* dual checklist (online vs showroom, side by side, stacks on mobile) */
.dual-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.dual-list>div{min-width:0}
.dual-list .checklist-tool{margin:.55rem 0 0}
.dl-head{display:flex;align-items:center;gap:.5rem;font-family:var(--font-sans);font-size:1.02rem;font-weight:600;color:var(--ink-900);margin:0}
.dl-head .ic{width:18px;height:18px;color:var(--pine)}

/* brand-chip neutrality note */
.brand-note{font-size:.82rem;color:var(--ink-500);margin:.3rem 0 0}

/* ============ PRINT: a clean, saveable checklist (no email capture) ============ */
@media print{
  .site-header,.site-footer,.sticky-bar,.drawer,.drawer-backdrop,.skip,.breadcrumb,
  .onpage,.hero-actions,.page-hero-illu,.no-print,.cta-row{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.4}
  .container{max-width:none;padding:0 12mm}
  .prose{max-width:none}
  .section{padding-block:0}
  .js .reveal{opacity:1!important;transform:none!important}
  a{color:#000;text-decoration:none}
  .faq details>*{display:block!important}
  .faq summary .chev{display:none!important}
  .checklist-tool,.card,.answer,.defcard,.cmp-table,.fit-figure,.faq details,.deflist--terms{break-inside:avoid;box-shadow:none}
  .cl-box{border-color:#000!important}
}

/* ============================================================
   SHOWROOM LEGITIMACY PAGE — trust-signal tiles + red-flag cards
   (scoped, token-consistent additions)
   ============================================================ */
.signal-board{margin:1.8rem 0}
.signal-board .signal-title{margin:.4rem 0 .3rem}
.signal-board .sub{color:var(--ink-500);font-size:.9rem;max-width:60ch;margin:.2rem 0 0}
.signal-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));list-style:none;padding:0;margin:1.3rem 0 .8rem}
.signal{background:var(--surface-raised);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:14px 15px}
.signal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem}
.signal-ic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--pine);display:inline-flex;align-items:center;justify-content:center}
.signal-ic .ic{width:17px;height:17px;color:var(--pine)}
.signal-tick{width:16px;height:16px;color:var(--pine);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.signal b{display:block;font-size:.92rem;color:var(--ink-900);margin-bottom:.12rem}
.signal small{display:block;font-size:.8rem;color:var(--ink-500);line-height:1.45}

/* red-flag cards — calm, consumer-protective, never color-only */
.flags{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));list-style:none;padding:0;margin:1.4rem 0}
.flag{display:flex;gap:.7rem;align-items:flex-start;background:var(--amber-tint);border:1px solid #E6D2A6;border-left:4px solid var(--amber);border-radius:var(--radius-sm);padding:13px 15px}
.flag-ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--amber);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.flag-ic svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flag>span{font-size:.85rem;color:var(--ink-700);line-height:1.45}
.flag b{display:block;font-size:.9rem;color:var(--caution-ink);margin-bottom:.08rem}
@media (max-width:560px){
  .signal-grid{grid-template-columns:1fr 1fr}
  .flags{grid-template-columns:1fr}
}

/* ============================================================
   HEALTH CLAIMS PAGE — claim-evaluation cards (4-part read)
   + word-labeled risk levels (never colour-only)
   (scoped, token-consistent additions)
   ============================================================ */
.claim-eval{background:var(--surface-raised);border:1px solid var(--card-border);border-radius:var(--radius);padding:clamp(16px,3vw,22px);margin:1.2rem 0}
.claim-eval>h3{margin-top:0;font-size:1.12rem}
.claim-eval .ce-sounds{font-size:.95rem;color:var(--ink-700);margin:.2rem 0 .9rem}
.ce-dl{display:grid;grid-template-columns:max-content 1fr;gap:.45rem .9rem;margin:0}
.ce-dl dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--clay);font-weight:600;padding-top:.15rem}
.ce-dl dt.ce-watch{color:var(--caution-ink)}
.ce-dl dd{margin:0;font-size:.9rem;color:var(--ink-700);line-height:1.5}
@media (max-width:540px){
  .ce-dl{grid-template-columns:1fr;gap:.1rem}
  .ce-dl dt{margin-top:.6rem}
}
/* word-labeled caution pills for the risk-level table (icon + text, not colour alone) */
.risk{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--rule);white-space:nowrap}
.risk .ic{width:13px;height:13px}
.risk--low{background:var(--pine-tint);color:var(--pine-700);border-color:#bcd3c9}
.risk--mid{background:var(--surface-2);color:var(--ink-700)}
.risk--high{background:var(--amber-tint);color:var(--caution-ink);border-color:#E6D2A6}

/* ============================================================
   HOMEPAGE DECISION-ENGINE UPGRADES (monochromatic-green system)
   Additive, scoped — anchored on the existing pine/field-guide kit.
   ============================================================ */

/* --- Eyebrow rendered as a solid pill badge (hero value-prop) --- */
.eyebrow--badge{
  display:inline-flex;align-items:center;width:auto;
  background:var(--green-tint-strong);color:var(--green-dark);
  border:1px solid var(--green-border);
  padding:6px 14px;border-radius:999px;
  font-size:.7rem;letter-spacing:.12em;margin-bottom:1.05rem;
}
.eyebrow--badge::before{display:none}

/* --- Header CTA: premium outline pill that floods green on hover --- */
.btn--pill{border-radius:999px;background:transparent;color:var(--green-primary);border-color:var(--green-border);font-weight:600}
.btn--pill:hover{background:var(--green-primary);color:#fff;border-color:var(--green-primary)}
.btn--pill:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* --- "The Short Answer" executive-summary card (stronger green anchor) --- */
.answer{border-left-width:4px;border-left-color:var(--green-primary);background:var(--green-tint)}
.answer .eyebrow{color:var(--green-dark)}

/* ============ THE TRAILHEAD — two intent buckets (Hick's Law) ============ */
.trail-buckets{display:grid;gap:clamp(26px,4vw,40px);margin-top:1.6rem}
.trail-bucket-head{display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--green-border)}
.trail-bucket-head .tb-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--green-tint);color:var(--green-primary);display:inline-flex;align-items:center;justify-content:center}
.trail-bucket-head .tb-ic .ic{width:21px;height:21px}
.trail-bucket-head .tb-txt{display:flex;flex-direction:column;gap:.1rem}
.trail-bucket-head h3{margin:0;font-size:1.18rem;line-height:1.2}
.trail-bucket-head .tb-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
/* route cards lift a touch more + green accent edge */
#start-here .card{border-left-width:3px;border-left-color:var(--green-border)}
#start-here .card:hover{transform:translateY(-4px);border-left-color:var(--green-primary)}

/* ============ CHECKLIST — counter rendered as a live green pill ============ */
.cl-count-label{background:var(--green-tint);border:1px solid var(--green-border);color:var(--green-dark);padding:5px 12px;border-radius:999px;font-weight:600}
.cl-count-label [data-cl-count]{color:var(--green-primary)}
.cl-progress-fill{background:linear-gradient(90deg,var(--green-primary),var(--pine-700))}

/* ============ THE FIT MAP — bidirectional diagram ↔ list ============ */
.fm-interactive{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(22px,4vw,44px);align-items:center;margin:0 0 1.9rem}
.fm-interactive .fm-fig{margin:0}
.fm-points{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fm-points-head{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin:0 0 .2rem}
.fm-point{display:flex;gap:.75rem;align-items:flex-start;padding:11px 14px;background:var(--surface-raised);border:1px solid var(--green-border);border-left:3px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.fm-point:hover,.fm-point.is-active{background:var(--green-tint);border-left-color:var(--green-primary);transform:translateX(3px)}
.fm-point:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fm-point .fm-pn{flex:0 0 auto;font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--green-primary);min-width:1.4em;padding-top:.1rem}
.fm-point.fm-point--watch .fm-pn{color:var(--caution-ink)}
.fm-point b{display:block;font-size:.9rem;color:var(--ink-900);letter-spacing:.01em}
.fm-point span{font-size:.82rem;color:var(--ink-500)}
/* SVG checkpoint active state driven by the list (and vice-versa) */
.fm-note{transition:opacity .2s ease}
.fm-note .fm-anchor,.fm-note .fm-num,.fm-note .fm-label,.fm-note .fm-lead{transition:fill .2s ease,stroke .2s ease,r .2s ease}
.fm-note.is-active .fm-anchor{fill:var(--green-primary);stroke:var(--green-dark);animation:fmPulse 1.25s ease-in-out infinite}
.fm-note.is-active .fm-num{fill:var(--green-dark)}
.fm-note.is-active .fm-label{fill:var(--green-dark);font-weight:700}
.fm-note.is-active .fm-lead{stroke:var(--green-primary);opacity:1;stroke-dasharray:none}
@keyframes fmPulse{0%,100%{r:3.4}50%{r:7}}
@media (max-width:860px){.fm-interactive{grid-template-columns:1fr;gap:24px}}
@media (prefers-reduced-motion:reduce){.fm-note.is-active .fm-anchor{animation:none}}

/* ============ TRUST-LEDGER TABLE — green checkmark scan column ============ */
.cmp-good{border-color:var(--green-border)}
.cmp-good thead th{background:var(--green-tint);color:var(--green-dark)}
.cmp-good th,.cmp-good td{border-bottom-color:var(--green-border)}
.cmp-good tbody td{position:relative;padding-left:38px}
.cmp-good tbody td::before{
  content:"";position:absolute;left:13px;top:14px;width:16px;height:16px;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5A4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4 4 10-10'/></svg>");
}
@media (max-width:639px){
  .cmp-good tbody td{padding-left:26px}
  .cmp-good tbody td::before{left:0;top:12px}
}

/* ============ AVG-VS-SPREAD — green = positive, amber = service miss ============ */
.hs-base{stroke:var(--ink-faint)}
.hs-tick{stroke:var(--ink-faint)}
.hs-dot{fill:var(--green-primary);stroke:var(--green-dark);stroke-width:1.5}
.hs-dot--low{fill:var(--amber-tint);stroke:var(--amber);stroke-width:2;stroke-dasharray:none}

/* ============ HEADER NAV REFINEMENT + BRANDS DROPDOWN ============ */
/* Tighten the primary nav so 8 items + wordmark + CTA never overlap inside the 72rem container */
.header-inner{gap:.65rem}
.primary-nav{margin-left:auto}
.primary-nav ul{gap:.1rem;align-items:center;flex-wrap:nowrap}
.primary-nav>ul>li{flex:0 0 auto}
.primary-nav a{padding:8px 10px;font-size:.9rem;white-space:nowrap;line-height:1.2}
.header-cta{margin-left:.4rem;flex:0 0 auto}
/* When the full horizontal nav is shown, drop the wordmark tagline so the row breathes */
@media (min-width:1150px){ .brand small{display:none} }

/* Dropdown trigger styled to match nav links */
.has-dropdown{position:relative}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;line-height:1.2;color:var(--ink-700);padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav-drop-toggle:hover{background:var(--surface-2);color:var(--ink-900)}
.nav-drop-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav-drop-toggle .caret{font-size:.6em;opacity:.75;transform:translateY(1px);transition:transform .18s ease}
.has-dropdown:hover .nav-drop-toggle .caret,
.has-dropdown.open .nav-drop-toggle .caret,
.nav-drop-toggle[aria-expanded="true"] .caret{transform:translateY(1px) rotate(180deg)}

/* Dropdown panel: 2-column grid of brand guides */
.nav-dropdown{position:absolute;top:calc(100% + 9px);right:0;z-index:140;display:none;grid-template-columns:1fr 1fr;gap:2px;min-width:372px;padding:8px;background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 20px 44px -20px rgba(20,30,26,.4)}
.nav-dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} /* hover bridge over the gap */
.nav-dropdown a{display:block;padding:9px 11px;border-radius:9px;color:var(--ink-700);text-decoration:none;font-size:.875rem;font-weight:500;white-space:nowrap}
.nav-dropdown a:hover{background:var(--surface-2);color:var(--ink-900)}
.nav-dropdown .nd-all{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;color:var(--green-primary);font-weight:600;background:var(--green-tint);margin-bottom:4px}
.nav-dropdown .nd-all:hover{background:var(--green-tint-strong);color:var(--green-primary)}
@media (hover:hover){
  .has-dropdown:hover .nav-dropdown,
  .has-dropdown:focus-within .nav-dropdown{display:grid}
}
.has-dropdown.open .nav-dropdown{display:grid}

/* Mobile drawer: Brands accordion */
.drawer-acc details>summary{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:13px 8px;border-bottom:1px solid var(--rule);color:var(--ink-900);font-weight:500;cursor:pointer;list-style:none}
.drawer-acc summary::-webkit-details-marker{display:none}
.drawer-acc summary::marker{content:""}
.drawer-acc summary .caret{font-size:.7em;color:var(--ink-500);transition:transform .18s ease}
.drawer-acc details[open]>summary .caret{transform:rotate(180deg)}
.drawer-sub{list-style:none;margin:0;padding:2px 0 6px}
.drawer-sub li{margin:0}
.drawer-sub a{display:block;padding:11px 8px 11px 22px;border-bottom:1px solid var(--rule);color:var(--ink-700);text-decoration:none;font-weight:500;font-size:.95rem}
.drawer-sub a:hover{color:var(--ink-900)}
.drawer-sub li:last-child a{border-bottom:0}