:root{
    --ink:#0e1116; --panel:#151a22; --panel-2:#12161d;
    --line:#232b37; --hair:#1a212b; --grid:#151d2a;
    --text:#eef1f5; --muted:#98a2b0; --faint:#697384;
    --accent:#3faf6b; --accent-deep:#2a8050; --gold:#d9a441; --gold-deep:#c2912b; --gold-btn:#d9a441;
    --good:#4fb87e; --warn:#e0a33a; --bad:#d97066;
    --disp:'Newsreader',Georgia,serif;
    --body:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --shadow:0 20px 50px -24px rgba(10,16,32,.9);
    --nav-bg:rgba(14,17,22,.86);color-scheme:dark;
  }
  :root[data-theme="light"]{
    --ink:#f4f6f9; --panel:#ffffff; --panel-2:#eef1f5;
    --line:#d6dce4; --hair:#e7ebf1; --grid:#e4e9f0;
    --text:#141a24; --muted:#576270; --faint:#8892a1;
    --accent:#2f8f57; --accent-deep:#256e43; --gold:#9a7016; --gold-deep:#7d5a10;
    --good:#2f9e6b; --warn:#a8761f; --bad:#c64f4a;
    --shadow:0 18px 44px -22px rgba(40,60,110,.24);
    --nav-bg:rgba(244,246,249,.85);color-scheme:light;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--text);font-family:var(--body);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:46px 46px;background-position:center -1px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--accent);color:#fff}

  /* NAV */
  nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--body);font-weight:700;letter-spacing:.01em;font-size:18px}
  .brand .mark{width:28px;height:28px;flex:none;transform-origin:center;color:var(--gold);animation:hb 2.8s ease-in-out infinite}
  .brand small{font-family:var(--body);font-weight:500;color:var(--faint);font-size:10px;letter-spacing:.18em;margin-left:1px}
  .nav-links{display:flex;gap:32px;font-size:14.5px;color:var(--muted);font-weight:500}
  .nav-links a{transition:color .18s}
  .nav-links a:hover{color:var(--text)}
  .nav-right{display:flex;align-items:center;gap:12px}
  .btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:600;font-size:14px;padding:10px 19px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:transform .12s,background .18s,border-color .18s,box-shadow .2s;text-decoration:none;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .btn-primary{background:var(--gold-btn);color:#1a1204;box-shadow:0 8px 20px -12px var(--gold)}
  .btn-primary:hover{filter:brightness(1.06);box-shadow:0 12px 26px -12px var(--gold)}
  .theme-toggle{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s}
  .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .theme-toggle svg{width:17px;height:17px;display:none}
  :root[data-mode="auto"] .theme-toggle .icon-auto{display:inline}
  :root[data-mode="light"] .theme-toggle .icon-sun{display:inline}
  :root[data-mode="dark"] .theme-toggle .icon-moon{display:inline}
  @media(max-width:860px){.nav-links{display:none}}

  /* HERO */
  .hero{padding:32px 0 44px;border-bottom:1px solid var(--hair);text-align:center}
  .hero-head{max-width:960px;margin:0 auto}
  .kicker{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin-bottom:12px}
  h1{font-family:var(--disp);font-weight:600;font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 auto 14px;max-width:16ch;text-wrap:balance}
  h1 em{font-style:italic;font-weight:600;color:var(--gold)}
  .lede{font-size:clamp(17px,1.9vw,20px);color:var(--muted);max-width:56ch;margin:0 auto}
  .lede b{color:var(--text);font-weight:600}
  .statebar{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
  .statebar .live{display:flex;align-items:center;gap:8px}
  .statebar .live b{width:6px;height:6px;border-radius:50%;background:var(--faint);transition:background .3s}
  .statebar.running .live b{background:var(--accent)}

  /* INSTRUMENT - semicircle speedometer + framed metrics */
  .instrument{max-width:560px;margin:8px auto 0}
  .gauge-shell{position:relative;width:100%;max-width:500px;aspect-ratio:1.62/1;margin:0 auto}
  .gauge-svg{width:100%;height:100%;overflow:visible}
  .track{fill:none;stroke:var(--hair);stroke-width:8;stroke-linecap:round}
  .fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
  .tick{stroke:var(--line);stroke-width:1.5}
  .tick-lbl{fill:var(--faint);font-family:var(--mono);font-size:10px;text-anchor:middle}
  .readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:30px}
  .read-num{font-family:var(--mono);font-weight:500;font-size:clamp(52px,13vw,80px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .read-unit{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-top:9px}
  .read-phase{font-family:var(--body);font-size:12.5px;color:var(--muted);height:16px;margin-top:11px;transition:color .3s}

  .go{margin:10px auto 0;display:block;font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.01em;color:#1a1204;background:var(--gold-btn);
    border:none;border-radius:11px;padding:15px 44px;cursor:pointer;transition:filter .18s,transform .1s,box-shadow .2s;
    box-shadow:0 10px 26px -12px var(--gold);animation:gobeat 2s ease-in-out infinite;transform-origin:center}
  .go:hover{filter:brightness(1.1)}
  .go:active{transform:translateY(1px)}
  .go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .go.busy{animation:none;opacity:.6;cursor:default}

  .metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);overflow:hidden;box-shadow:var(--shadow)}
  .metric{padding:18px 8px;text-align:center;border-right:1px solid var(--hair)}
  .metric:last-child{border-right:none}
  .metric .m-lbl{font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .metric .m-val{font-family:var(--mono);font-weight:500;font-size:21px;margin-top:8px;font-variant-numeric:tabular-nums}
  .metric .m-val span{font-size:11px;color:var(--faint);font-weight:400}

  .verdict{margin-top:22px;border:1px solid var(--line);border-left-width:3px;border-radius:10px;background:var(--panel-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s}
  .verdict.show{max-height:460px;opacity:1}
  .v-in{padding:20px 22px;text-align:left}
  .v-tag{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .v-head{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:9px 0 7px;line-height:1.25}
  .v-body{color:var(--muted);font-size:14.5px}
  .v-load{position:relative;height:3px;border-radius:3px;background:var(--hair);overflow:hidden;margin:2px 0 12px}
  .v-load::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--gold);border-radius:3px;animation:vload 1.05s ease-in-out infinite}
  .v-body b{color:var(--text);font-weight:600}
  .v-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--faint);line-height:1.6}
  .v-cta{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--accent)}
  .v-cta:hover{text-decoration:underline;text-underline-offset:3px}

  /* DIAGNOSTIC INDEX */
  section.band{padding:88px 0;border-bottom:1px solid var(--hair)}
  .band-head{display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:end;margin-bottom:52px}
  .sec-kick{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .sec-title{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.3vw,36px);letter-spacing:-.015em;margin-top:14px;line-height:1.14;text-wrap:balance}
  .sec-sub{color:var(--muted);font-size:16px;max-width:52ch}
  @media(max-width:820px){.band-head{grid-template-columns:1fr;gap:16px}}
  .index{border-top:1px solid var(--line)}
  .row{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:baseline;padding:26px 6px;border-bottom:1px solid var(--hair);transition:background .2s,padding-left .2s}
  .row:hover{background:var(--panel-2);padding-left:16px}
  .row .rx{font-family:var(--mono);font-size:13px;color:var(--faint)}
  .row .rmain h3{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.01em;margin-bottom:6px}
  .row .rmain p{color:var(--muted);font-size:14.5px;max-width:62ch}
  .row .rmain .tag{display:inline-block;font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-deep);border-radius:3px;padding:2px 7px;margin-bottom:10px}
  .row .rgo{font-family:var(--body);font-weight:500;font-size:13.5px;color:var(--muted);white-space:nowrap;transition:color .2s}
  .row:hover .rgo{color:var(--accent)}
  @media(max-width:640px){.row{grid-template-columns:auto 1fr;gap:14px}.row .rgo{display:none}}

  /* AUTHORITY */
  .authority{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
  .auth-txt .a-t{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.01em;margin-bottom:12px;line-height:1.22}
  .auth-txt p{color:var(--muted);font-size:15.5px;max-width:52ch}
  .auth-txt a{color:var(--accent);border-bottom:1px solid var(--accent-deep)}
  .auth-list{display:flex;flex-direction:column;gap:2px}
  .auth-list .ai{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-top:1px solid var(--hair)}
  .auth-list .ai .n{font-family:var(--mono);font-size:11px;color:var(--faint)}
  .auth-list .ai .t{font-size:14.5px;color:var(--text)}
  .auth-list .ai .t span{color:var(--muted);display:block;font-size:13px;margin-top:2px}
  @media(max-width:820px){.authority{grid-template-columns:1fr;gap:28px}}

  /* FAQ */
  .faq{border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--hair)}
  summary{font-family:var(--disp);font-weight:600;font-size:18.5px;letter-spacing:-.005em;padding:22px 44px 22px 0;cursor:pointer;list-style:none;position:relative;transition:color .18s}
  summary:hover{color:var(--accent)}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";position:absolute;right:8px;top:28px;width:11px;height:11px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);transition:transform .22s,border-color .2s}
  summary:hover::after{border-color:var(--accent)}
  details[open] summary::after{transform:rotate(-135deg);top:32px}
  details p{color:var(--muted);font-size:15px;padding:0 40px 24px 0;max-width:72ch}

  /* FOOTER */
  footer{padding:52px 0 44px;color:var(--faint);font-size:13.5px}
  .foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:32px;align-items:center}
  .foot-links{display:flex;gap:26px;flex-wrap:wrap}
  .foot-links a{color:var(--muted)}
  .foot-links a:hover{color:var(--text)}
  .disclaimer{padding-top:24px;border-top:1px solid var(--hair);line-height:1.75;max-width:88ch}

  .reveal{opacity:0;transform:translateY(14px);animation:rise .6s forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes hb{0%,52%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(1)}34%{transform:scale(1.08)}}
  @keyframes gobeat{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  @keyframes vload{0%{left:-40%}100%{left:110%}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

  /* ===== Slot-mapper output - content-sections + FAQ + _default hero (Step 5) =====
     The Brain render emits .pg-section / .pg-faq markup (lib/slot-mapper.ts), NOT the mockup's own
     .band/.index/.row markup - these rules style THAT output in the PULSE (green/gold) face so a
     COC-driven page matches the instrument. All colours are var() -> zero hex -> CF-safe. */
  .band .pg-section{max-width:760px;margin:0 auto 40px;border:none;padding:0;background:none}
  .band .pg-section:last-child{margin-bottom:0}
  .band .pg-section h2{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:-.015em;line-height:1.16;margin-bottom:16px}
  .band .pg-section p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:14px;max-width:68ch}
  .band .pg-section p:last-child{margin-bottom:0}
  .band .pg-section ul,.band .pg-section ol{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 14px 1.15em}
  .band .pg-section li{margin-bottom:6px}
  .band .pg-section a{color:var(--accent);border-bottom:1px solid var(--accent-deep)}
  /* FAQ - hairline definition list (the pg-faq markup), PULSE serif questions */
  .pg-section--faq{max-width:820px;margin:0 auto}
  .pg-section--faq h2{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.3vw,36px);letter-spacing:-.015em;margin-bottom:20px;line-height:1.14}
  .pg-faq{border-top:1px solid var(--line);margin-top:0}
  .pg-faq dt{font-family:var(--disp);font-weight:600;font-size:18.5px;letter-spacing:-.005em;color:var(--text);padding:22px 0 8px}
  .pg-faq dd{color:var(--muted);font-size:15px;line-height:1.7;margin:0;padding:0 0 22px;border-bottom:1px solid var(--hair);max-width:74ch}
  /* Content page (_default) - compact PULSE hero */
  .content-hero{padding:56px 0 44px;border-bottom:1px solid var(--hair);text-align:center}
  .content-hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.02em;max-width:20ch;margin:0 auto 18px;text-wrap:balance}
  .content-hero .lede{font-size:clamp(16px,1.7vw,19px);color:var(--muted);max-width:58ch;margin:0 auto}
  .content-hero .hero-cta-wrap{margin-top:24px}
  /* ===== Typed content blocks (lib/content-blocks.ts .cr-*) - PULSE face ===== */
  .band .cr-lead{font-size:18px;color:var(--muted);line-height:1.7;margin-bottom:22px}
  .band .cr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:22px 0}
  .band .cr-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
  .band .cr-stat-v{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(28px,3.4vw,38px);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
  .band .cr-stat-l{display:block;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:10px}
  .band .cr-stat-n{display:block;font-size:13px;color:var(--muted);margin-top:6px}
  .band .cr-steps{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column}
  .band .cr-step{display:flex;gap:16px;align-items:flex-start;padding-bottom:18px}
  .band .cr-step-n{flex:none;width:38px;height:38px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;color:var(--accent)}
  .band .cr-step-t h4{font-family:var(--disp);font-size:17px;font-weight:600;margin-bottom:4px}
  .band .cr-step-t p{font-size:14.5px;color:var(--muted)}
  .band .cr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:22px 0;align-items:stretch}
  .band .cr-card{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;height:100%}
  .band .cr-card-chip{display:inline-flex;width:38px;height:38px;border-radius:11px;background:rgba(217,164,65,.12);align-items:center;justify-content:center;color:var(--gold)}
  .band .cr-card-chip svg{width:20px;height:20px}
  .band .cr-card-dot{width:12px;height:12px;border-radius:50%;background:var(--gold)}
  .band .cr-card h3,.band .cr-card h4{font-family:var(--disp);font-size:17px;font-weight:600;margin:12px 0 7px}
  .band .cr-card p{font-size:14.5px;color:var(--muted)}
  .band .cr-cards--n2,.band .cr-cards--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media(max-width:600px){.band .cr-cards--n2,.band .cr-cards--n4{grid-template-columns:1fr}}
  .band .cr-cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
  .band .cr-cat-head h3{margin:0}
  .band .cr-cat-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .band .cr-cat-meta{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--gold)}
  .band .cr-cat-badge{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(217,164,65,.14);color:var(--gold);white-space:nowrap}
  .band .cr-callout{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--panel-2);padding:18px 22px;margin:22px 0}
  .band .cr-callout h4{font-family:var(--disp);font-weight:600;font-size:16px;margin-bottom:6px}
  .band .cr-callout p{font-size:14.5px;color:var(--muted);line-height:1.65}
  .band .cr-callout--warning{border-left-color:var(--warn)}
  .band .cr-definition{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;background:var(--panel-2);padding:20px 24px;margin:22px 0}
  .band .cr-def-term{display:block;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .band .cr-def-body{font-size:16px;color:var(--text);line-height:1.7}
  .band .cr-def-note{font-size:13px;color:var(--faint);margin-top:10px}


/* -- STEP 1 (2026-09-25): the split hero, figures, method list and the pass-mark scorecard.
   Moved from BLITZ template 8 into the SHARED layout so every door renders the same blocks
   Mother emits. Colours are the theme variables, not a palette. -- */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.15rem 0 0;font-size:.92rem;color:var(--ink-muted)}
.hero-trust .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:999px;background:rgba(51,70,92,.08);font-weight:700;font-size:.82rem;color:var(--ink)}
.hero-trust .pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(190,18,60,.25)}
/* 1. DARK - the front-door face, for the pages that carry the niche's head terms */
.content-hero--dark{background:var(--slate-deep);border-bottom-color:rgba(255,255,255,.08)}
.content-hero--dark::before{background:radial-gradient(42rem 20rem at 100% 0%,rgba(190,18,60,.22),transparent 62%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 30px)}
.content-hero--dark h1{color:var(--surface)}
.content-hero--dark .lead{color:rgba(255,255,255,.78)}
.hero--dark .hero-trust,.content-hero--dark .hero-trust{color:rgba(255,255,255,.6)}
.hero--dark .hero-trust .pill,.content-hero--dark .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)}
/* the landing hero is dark by design, so its badges take the dark treatment without a modifier */
.hero .hero-trust{color:rgba(255,255,255,.62);margin-bottom:1.35rem}
.hero .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)}
.content-hero--dark .hero-cta-wrap a:not(.btn-primary){color:var(--surface)}
.content-hero--dark .btn-ghost,.content-hero--dark .btn-outline{color:var(--surface);border-color:rgba(255,255,255,.42)}
.content-hero--dark .btn-ghost:hover,.content-hero--dark .btn-outline:hover{color:var(--surface);border-color:var(--surface);background:rgba(255,255,255,.07)}
/* the copy column is ONE grid child however much the hero carries inside it */
.content-hero--split .hero-copy{min-width:0}
.content-hero--split .hero-figure svg.hero-art{display:block;width:100%;height:auto}
.content-hero--split .hero-figure{margin:2rem 0 0;border-radius:1rem;border:1px solid var(--border);background:var(--surface);overflow:hidden;box-shadow:0 20px 45px -25px rgba(16,24,40,.45)}
.content-hero--split .hero-figure img{display:block;width:100%;height:auto}
.content-hero--split .hero-figure figcaption{padding:.9rem 1.1rem;font-size:.92rem;line-height:1.5;color:var(--ink-muted);border-top:1px solid var(--border);margin:0}
.content-hero--split .hero-figure figcaption b{color:var(--ink)}
/* 3. RULE - the headline plus the numbers the page exists to explain */
.content-hero--rule .hero-facts{display:grid;gap:.7rem;margin:1.5rem 0 0;grid-template-columns:1fr}
.content-hero--rule .hero-fact{padding:.8rem 1rem;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 .6rem .6rem 0;background:rgba(255,255,255,.72)}
.content-hero--rule .hero-fact b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.content-hero--rule .hero-fact span{display:block;font-size:.85rem;color:var(--ink-muted);margin-top:.15rem}
/* 4. COMPACT - a utility page carries less air than a landing page */
.content-hero--compact{padding:2.4rem 0 2rem}
.content-hero--compact h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.content-hero--compact .lead{font-size:1.08rem}
.content-region .cr-figure{margin:1.75rem auto .25rem;max-width:30rem}
.content-region .cr-figure svg{display:block;width:100%;height:auto}
.content-region .cr-figure--wide{max-width:46rem}
.content-region .cr-figure--tight{max-width:18rem}
.content-region .cr-figure figcaption{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-muted);text-align:center;line-height:1.5}
.content-region .cr-illus-band{margin:1.75rem 0 .5rem;padding:1.6rem 1.5rem 1.25rem;background:var(--slate-soft);border:1px solid var(--border);border-radius:var(--radius-lg)}
.content-region .cr-illus-band svg{display:block;width:100%;height:auto;max-width:40rem;margin:0 auto}
.content-region .cr-illus-band figcaption{margin:1rem auto 0;max-width:40rem;font-size:.86rem;color:var(--ink-muted);text-align:center;line-height:1.55}
/* two-section split */
.content-region .cr-split{display:grid;gap:1px;margin:1.75rem 0 .5rem;background:var(--border-mid);border:1px solid var(--border-mid);border-radius:var(--radius-lg);overflow:hidden}
.content-region .cr-split-col{background:var(--surface);padding:1.4rem 1.5rem}
.content-region .cr-split-top{display:flex;align-items:center;gap:.9rem;margin:0 0 1.15rem}
.content-region .cr-split-n{font-size:2.9rem;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--head);font-variant-numeric:tabular-nums}
.content-region .cr-split-col--rs .cr-split-n{color:var(--accent)}
.content-region .cr-split-l{font-weight:800;color:var(--head);font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.content-region .cr-split-l small{display:block;font-weight:600;font-size:.8rem;color:var(--ink-muted);letter-spacing:0;margin-top:.2rem}
.content-region .cr-split-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem}
.content-region .cr-split-topics li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--head);margin:0}
.content-region .cr-split-topics svg{flex:none;width:1.5rem;height:1.5rem}
/* method row */
.content-region .cr-method{list-style:none;margin:1.6rem 0 .5rem;padding:0;display:grid;gap:1.1rem}
.content-region .cr-method li{display:flex;gap:.9rem;align-items:flex-start;margin:0}
.content-region .cr-method .cr-m-ic{flex:none;width:2.9rem;height:2.9rem;border-radius:.7rem;background:var(--accent-soft);display:grid;place-items:center}
.content-region .cr-method .cr-m-ic svg{width:1.55rem;height:1.55rem}
.content-region .cr-method h3{margin:.15rem 0 .3rem;font-size:1.02rem}
.content-region .cr-method p{margin:0;font-size:.95rem;color:var(--ink-muted);line-height:1.55}
/* --- in-content launch CTA row --- */
.cr-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.4rem 0 .4rem}
/* ==================================================================
   THE FIGURE SYSTEM  (2026-09-23)
   Append near the END of the site stylesheet, after the
   "FIGURES ALIGN TO THE COLUMN" block it supersedes.

   THE RULE: a figure BLOCK is the reading column. Always. The art
   inside it may be any size; the block never is.

   Why this replaces the left-anchor fix. That fix was right about the
   fault (four figures centred at four different left edges = nothing
   lines up) and it fixed alignment by anchoring each figure left at its
   own natural width. Alignment came back and DEAD SPACE arrived with
   it: in a 912px column a 480px figure leaves 432px of nothing, a
   352px figure leaves 560px, a 240px figure leaves 672px. Both faults
   have ONE cause - the ART was deciding the BLOCK width. So the block
   stops asking. It takes the column, every time, and the left edge is
   the text's left edge because it is the same edge.

   Three treatments, one job each:
     1 PLATE  (default .cr-figure) - framed art at full column width.
       For art drawn 16:9 to 2:1. Zero dead space by construction.
     2 BAND   (.cr-illus-band) - the plate on a soft ground, for art
       that wants air around it. Also full column.
     3 STAGE  (.cr-figure--stage, and legacy --tight) - the deliberate
       treatment for art that is GENUINELY small: a full-column soft
       panel with the art held left at a cap and the caption set
       beside it. A small drawing then reads as presented, not
       stranded, and the block still starts at the text's left edge.

   No page needs CSS of its own for any of this. Page-authored
   style="max-width:..." on a figure is the bug, not the fix - strip
   it; these rules cannot out-rank an inline style and must not try
   (no !important anywhere in this file).
   ================================================================== */

/* ---- 1. THE PLATE: the default ----------------------------------- */
.content-region .cr-figure{
  margin:2rem 0 .5rem;
  max-width:none;
  width:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
}
/* the legacy width modifier stops setting a width - the column sets it */
.content-region .cr-figure--wide{max-width:none}
.content-region .cr-figure>svg,
.content-region .cr-figure>img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;          /* the plate does the clipping */
}
.content-region .cr-figure>figcaption{
  margin:0;
  padding:.8rem 1.15rem .85rem;
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-muted);
  font-size:.85rem;
  line-height:1.55;
  text-align:left;
}
.content-region .cr-figure>figcaption strong,
.content-region .cr-figure>figcaption b{color:var(--head)}
/* ---- 2. THE BAND: the plate on a soft ground ---------------------- */
/* Already full-column and already working. Kept, and made explicit so
   it can never fall back to a 40rem art cap inside a 57rem column. */
.content-region .cr-illus-band{
  margin:2rem 0 .5rem;
  max-width:none;
  padding:1.75rem 1.75rem 1.35rem;
  background:var(--slate-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.content-region .cr-illus-band>svg,
.content-region .cr-illus-band>img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
}
.content-region .cr-illus-band>figcaption{
  margin:1rem 0 0;
  max-width:44rem;
  padding:0;
  border-top:0;
  background:none;
  color:var(--ink-muted);
  font-size:.86rem;
  line-height:1.55;
  text-align:left;
}
/* ---- 3. THE STAGE: for art that is genuinely small ---------------- */
/* Art left at a cap, caption beside it. The panel is the column, so the
   small drawing sits ON something instead of floating in white space. */
.content-region .cr-figure--stage,
.content-region .cr-figure--tight{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:1.25rem;
  margin:2rem 0 .5rem;
  max-width:none;
  padding:1.6rem 1.75rem;
  background:var(--slate-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:visible;
}
.content-region .cr-figure--stage>svg,
.content-region .cr-figure--stage>img,
.content-region .cr-figure--tight>svg,
.content-region .cr-figure--tight>img{
  display:block;
  width:100%;
  max-width:20rem;
  height:auto;
  margin:0;
  border-radius:0;
}
.content-region .cr-figure--stage>figcaption,
.content-region .cr-figure--tight>figcaption{
  margin:0;
  padding:0;
  border-top:0;
  background:none;
  color:var(--ink-muted);
  font-size:.95rem;
  line-height:1.6;
  text-align:left;
}
/* ---- 4. RHYTHM: a figure that opens a section sits closer to it --- */
.content-region .pg-section>h2+.cr-figure,
.content-region .pg-section>h2+.cr-illus-band{margin-top:1.25rem}
/* ---- 5. SMALL SCREENS: tighter frames, smaller staged art ---------- */
@media(max-width:40rem){
.content-region .cr-figure,
  .content-region .cr-illus-band,
  .content-region .cr-figure--stage,
  .content-region .cr-figure--tight{margin:1.5rem 0 .35rem}
.content-region .cr-figure>figcaption{padding:.7rem .9rem .75rem}
.content-region .cr-illus-band{padding:1.1rem 1.1rem .95rem}
.content-region .cr-figure--stage,
  .content-region .cr-figure--tight{padding:1.15rem 1.15rem 1.25rem}
.content-region .cr-figure--stage>svg,
  .content-region .cr-figure--stage>img,
  .content-region .cr-figure--tight>svg,
  .content-region .cr-figure--tight>img{max-width:14rem}
.content-region .cr-figure--stage>figcaption,
  .content-region .cr-figure--tight>figcaption{font-size:.88rem}
}


/* ==================================================================
   THE GOAL BAND - "what passing takes, and how to get there"
   A page's second section: the threshold a test is marked against,
   drawn to scale, and the route to it.

   Names no page and no niche. Any door with a two-gate exam mark
   reskins this for free: every colour comes from the design's own
   custom properties (hex fallbacks only, so a door that has not set
   a var still renders). Nothing is force-overridden. No fixed pixel widths.

   Motif follows the house: the THRESHOLD (crimson rule, crimson
   numerals) and hairlines, not boxes inside boxes.
   Palette in use: --head var(--h1), --muted var(--muted), --accent var(--accent),
   --slate-soft var(--soft), --border var(--border), --border-mid var(--border), white.
   ================================================================== */

.goal-band{
	background:var(--surface,var(--surface));
	border-bottom:1px solid var(--border,var(--border));
	padding:4.25rem 0 3.5rem;
}
.goal-band .goal-head{max-width:48rem;margin:0 0 2.25rem}
/* ---------- THE GOAL: two gates, side by side ---------- */
.goal-gates{display:grid;grid-template-columns:1fr;gap:1rem}
.goal-gate{
	display:flex;
	flex-direction:column;
	margin:0;
	padding:1.5rem 1.5rem 1.4rem;
	background:var(--slate-soft,var(--soft));
	border:1px solid var(--border,var(--border));
	border-radius:var(--radius-lg,1rem);
}
.goal-gate-k{
	margin:0;
	font-size:.7rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted,var(--muted));
}
.goal-gate-n{
	margin:.4rem 0 0;
	font-size:1.25rem;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
/* the pass mark itself: the number is the point of the card */
.goal-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .65rem;margin:1.05rem 0 1.3rem}
.goal-mark-k{
	flex:0 0 100%;
	margin-bottom:.3rem;
	font-size:.7rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--accent,var(--accent));
}
.goal-mark-v{
	font-size:clamp(2.75rem,5.5vw,3.75rem);
	font-weight:800;
	line-height:.88;
	letter-spacing:-.045em;
	color:var(--head,var(--h1));
	font-variant-numeric:tabular-nums;
}
/* --gk carries the default treatment and needs no rule; both modifiers exist so a
   door can re-colour either gate without touching the markup. */
.goal-gate--rs .goal-mark-v{color:var(--accent,var(--accent))}
.goal-mark-u{font-size:1rem;font-weight:700;color:var(--muted,var(--muted))}
/* the scorecard. ONE question = ONE cell, always 15 to a row, so the
   two gates read at the same scale and road safety honestly takes two
   rows to the general-knowledge one. Filled = must be right; hollow =
   the margin you have. Never colour alone: the shapes differ, the
   legend counts them, and the track carries its own aria-label. */
.goal-track{
	--goal-gap:4px;
	display:grid;
	grid-template-columns:repeat(15,1fr);
	column-gap:var(--goal-gap);
	row-gap:.9rem;
	margin:0;
}
.goal-cell{
	aspect-ratio:1;
	border-radius:3px;
	background:var(--head,var(--h1));
}
.goal-cell--spare{
	background:var(--surface,var(--surface));
	box-shadow:inset 0 0 0 2px var(--muted,var(--muted));
}
/* the pass mark, drawn where it falls: a crimson rule in the gap
   before the first question you are allowed to get wrong. */
.goal-cell--edge{position:relative}
.goal-cell--edge::before{
	content:"";
	position:absolute;
	top:-.35rem;
	bottom:-.35rem;
	left:calc((var(--goal-gap) / -2) - 1.5px);
	width:3px;
	border-radius:2px;
	background:var(--accent,var(--accent));
}
.goal-legend{
	display:flex;
	flex-wrap:wrap;
	gap:.4rem 1.35rem;
	margin:auto 0 0;          /* pins to the foot of the card, so both cards agree */
	padding-top:1.15rem;
	font-size:.85rem;
	font-weight:700;
	line-height:1.4;
	color:var(--head,var(--h1));
}
.goal-key-item{display:inline-flex;align-items:center;gap:.5rem}
.goal-key{
	flex:none;
	width:.7rem;
	height:.7rem;
	border-radius:2px;
	background:var(--head,var(--h1));
}
.goal-key--spare{
	background:var(--surface,var(--surface));
	box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted));
}
/* ---------- the consequence of two separate marks ---------- */
.goal-both{
	max-width:54rem;
	margin:1.6rem 0 0;
	padding:.1rem 0 .1rem 1.25rem;
	border-left:3px solid var(--accent,var(--accent));
}
.goal-both-h{
	margin:0 0 .4rem;
	font-size:1.2rem;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
.goal-both-p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--ink,var(--ink))}
.goal-both-p b{color:var(--head,var(--h1));font-weight:800}
/* ---------- THE ROUTE ---------- */
.goal-path{margin:3.25rem 0 0}
.goal-path-h{
	margin:0 0 .4rem;
	font-size:clamp(1.35rem,2.4vw,1.75rem);
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.025em;
	color:var(--head,var(--h1));
}
.goal-path-l{margin:0;max-width:44rem;font-size:1.05rem;line-height:1.6;color:var(--muted,var(--muted))}
.goal-steps{
	list-style:none;
	margin:1.5rem 0 0;
	padding:0;
	display:grid;
	grid-template-columns:1fr;
	gap:0;
	border-top:1px solid var(--border-mid,var(--border));
}
.goal-step{
	display:flex;
	gap:1.1rem;
	align-items:flex-start;
	margin:0;
	padding:1.45rem 0;
	border-bottom:1px solid var(--border-mid,var(--border));
}
.goal-step-n{
	flex:none;
	min-width:1.8rem;
	font-size:2rem;
	font-weight:800;
	line-height:.95;
	letter-spacing:-.045em;
	color:var(--accent,var(--accent));
	font-variant-numeric:tabular-nums;
}
.goal-step-b{min-width:0}
.goal-step-t{
	margin:.12rem 0 .4rem;
	font-size:1.08rem;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
.goal-step-b p{margin:0;font-size:.98rem;line-height:1.62;color:var(--muted,var(--muted))}
/* ---------- the action ---------- */
.goal-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:2.4rem 0 0}
.goal-note{margin:1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted,var(--muted))}
/* gates: side by side once there is room for two */
@media(min-width:48rem){
	.goal-gates{grid-template-columns:1fr 1fr;gap:1.25rem}
}
/* steps: two columns, hairline between them (the house pattern) */
@media(min-width:40rem) and (max-width:71.99rem){
	.goal-steps{grid-template-columns:1fr 1fr}
	.goal-step:nth-child(odd){padding-right:2rem;border-right:1px solid var(--border-mid,var(--border))}
	.goal-step:nth-child(even){padding-left:2rem}
}
/* steps: four across, the number stacked over its line */
@media(min-width:72rem){
	.goal-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
	.goal-step{flex-direction:column;gap:.55rem;padding:1.7rem 1.6rem 1.7rem 0}
	.goal-step+.goal-step{padding-left:1.6rem;border-left:1px solid var(--border-mid,var(--border))}
	.goal-step:last-child{padding-right:0}
	.goal-step-n{font-size:2.4rem}
	.goal-gate{padding:1.75rem 1.75rem 1.5rem}
}
@media(max-width:39.99rem){
	.goal-band{padding:3rem 0 2.75rem}
	.goal-band .goal-head{margin-bottom:1.75rem}
	.goal-gate{padding:1.25rem 1.15rem 1.2rem}
	.goal-track{--goal-gap:3px}
	.goal-cell{border-radius:2px}
	.goal-cell--spare{box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted))}
	.goal-cell--edge::before{top:-.25rem;bottom:-.25rem;width:2px;left:calc((var(--goal-gap) / -2) - 1px)}
	.goal-both{padding-left:1rem}
	.goal-path{margin-top:2.5rem}
	.goal-cta{margin-top:2rem;gap:.6rem}
	.goal-cta .btn{width:100%;justify-content:center}
}
/* the hover lift on the primary is the site's; nothing here animates */
@media(prefers-reduced-motion:reduce){
	.goal-band *{transition:none}
}


/* ---- what used to be inline on the page ---------------------------- */
.cr-cta--center{justify-content:center;margin-top:1.6rem}
@media(min-width:60rem){
.content-hero--split .wrap{max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.content-hero--split .hero-figure{margin:0}
}
@media(min-width:40rem){
.content-hero--rule .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:44rem}
.content-region .cr-split{grid-template-columns:1fr 1fr}
}
@media(min-width:48rem){
.content-region .cr-method{grid-template-columns:repeat(3,1fr)}
.content-region .cr-method li{flex-direction:column}
.content-region .cr-figure--stage,
  .content-region .cr-figure--tight{
    /* a FIXED first track, not minmax(0,20rem): a content-sized track would
       shrink to the art's intrinsic width and the stage would wander again */
    grid-template-columns:20rem minmax(0,1fr);
    gap:2rem;
  }
}

/* classes the Mother renderer emits that the BLITZ template never needed: gate counts other than
   two, a gate sub-line, and the per-gate topic list */
.goal-gates--n1{grid-template-columns:1fr}
.goal-gates--n3{grid-template-columns:repeat(3,1fr)}
.goal-gates--n4{grid-template-columns:repeat(2,1fr)}
.goal-gate-s{margin:.1rem 0 .6rem;color:var(--muted);font-size:.95rem}
.goal-topics{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--border);display:grid;gap:.45rem}
.goal-topics li{display:flex;align-items:center;gap:.55rem;font-size:.95rem;color:var(--ink)}
.goal-topics .cr-card-chip{width:1.5rem;height:1.5rem;flex:0 0 1.5rem}
@media(max-width:40rem){.goal-gates--n3,.goal-gates--n4{grid-template-columns:1fr}}
/* -- SHARED-BLOCK DEFAULTS (2026-10-20, IQ cut K9b). scroll-to-content.cfm prints its link with utility
   class names (inline-flex, items-center, gap-2, text-sm, font-semibold, text-brand-700, h-5, w-5) and
   the shared CSS defined none of them, so a door whose own stylesheet never had them rendered the svg at
   its 300x150 replaced-element default and the hero CTA row stretched to that height on every page
   (SAGE dev, Abdul: "hero section broke", 117 pages). The doors that DO define them (the DKT rows) must
   keep their own values whatever the cascade order, so these are written at ZERO specificity with
   :where() - any door rule wins. Colour is the theme variable, not a palette. -- */
:where(.inline-flex){display:inline-flex}
:where(.items-center){align-items:center}
:where(.gap-2){gap:.5rem}
:where(.text-sm){font-size:.9rem}
:where(.font-semibold){font-weight:600}
:where(.text-brand-700){color:var(--accent);text-decoration:none}
:where(.h-5){height:1.25rem}
:where(.w-5){width:1.25rem}
/* -- MOTHER'S CARD CHIP (2026-10-20, IQ cut K15 seed). content-blocks.ts prints an inline svg inside span.cr-card-chip on
   category cards, topic grids and section summaries. The sizes lived only in the DKT door rows, so a door without them
   rendered each icon at the column's full width (SAGE /iq-scores: fifteen 748px icons, Abdul's QC). Zero specificity, so
   every door row that already sizes the chip keeps its own values; the numbers are THUNDER's (its row, 2026-10-20). The
   rest of the card family (98 rules) stays a tracked move: IQ_KING_DOOR_WORK_ORDER K15. -- */
:where(.cr-card-chip){display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;flex:0 0 auto;border-radius:.5rem;background:var(--accent-soft);color:var(--accent-text,var(--accent))}
:where(.cr-card-chip) svg{width:1.3rem;height:1.3rem;stroke-width:1.8}
/* -- SOURCES / EVIDENCE BOX (2026-10-20): a page whose spec carries verified sources renders a
   citations box after its body (lib/mother/evidence-box.ts). NICHE-NEUTRAL — the door's own palette
   tokens style it (SAGE renders it warm/terracotta). Zero specificity (:where), so any door row can
   override a rule without a fight. External citation links are nofollow in the markup. -- */
:where(.evidence-sources){margin:2.5rem 0 0;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,.75rem)}
:where(.evidence-sources__title){margin:0 0 .75rem;font-size:1rem;font-weight:700;color:var(--head,var(--ink))}
:where(.evidence-sources__list){margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
:where(.evidence-source){font-size:.92rem;line-height:1.45;color:var(--ink-muted,var(--muted));display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
:where(.evidence-source a){color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
:where(.evidence-source a:hover){border-bottom-color:var(--accent)}
:where(.evidence-tier){font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-muted,var(--muted));background:var(--accent-soft);padding:.1rem .45rem;border-radius:.3rem;white-space:nowrap}