/* ==========================================================================
   tb-theme.css :: premium editorial theme, dark default + light variant
   --------------------------------------------------------------------------
   Loaded AFTER site.css / enhance.css / home-enhance.css / viz.css on every
   page except admin.html. It overrides by the cascade: same selectors, later
   file. No new markup requirements, no external fonts, no network requests.

   TWO SCOPES (Jul 2026):
     :root          = dark premium editorial (the default, unchanged visuals)
     html.tb-light  = "light authority": warm paper canvas, white cards,
                      deep navy header/footer, darkened teal, muted gold.
   Every colour a component needs lives in a --tb-* token with a value in
   both scopes. Component rules below reference tokens only; the few
   remaining literals are same-in-both-scopes by design (paper figure
   plates, the ask band, the navy mobile overlay, book gold button ink).

   DARK: canvas #0A0F1E, surfaces #111A33/#16203D, text #F3F0EA,
     teal #2BD4BA / fills #17BFA6, gold #D8B36A.
   LIGHT: canvas #FAF7F2, cards #FFFFFF, hairline rgba(16,24,51,.10),
     ink #1A2233, muted #5B6478, heads #101830, teal #0E7C6B (AA on paper),
     gold rules #B8923F (text-gold darkened to #8A6B2A for AA),
     header/footer deep navy #101830 with white nav text.

   Contrast (WCAG AA, checked):
     dark:  #F3F0EA on #0A0F1E = 16.9:1  #9AA3B5 on #0A0F1E = 7.5:1
            #2BD4BA on #0A0F1E = 10.2:1  #04211B on #17BFA6 = 6.4:1
     light: #1A2233 on #FAF7F2 = 13.4:1  #5B6478 on #FFFFFF = 6.6:1
            #0E7C6B on #FAF7F2 = 4.9:1   #FFFFFF on #0E7C6B = 4.9:1
            #8A6B2A on #F3EFE7 = 5.0:1   #DCE1EC on #101830 = 12.3:1
   ========================================================================== */

:root{
  /* core theme tokens (dark) */
  --tb-bg:#0A0F1E; --tb-s1:#111A33; --tb-s2:#16203D; --tb-s0:#0D1529;
  --tb-deep:#060B18; --tb-hair:rgba(255,255,255,.08); --tb-hair2:rgba(255,255,255,.14);
  --tb-text:#F3F0EA; --tb-head:#ffffff; --tb-mut:#9AA3B5; --tb-soft-text:#D9DEE8;
  --tb-teal:#2BD4BA; --tb-teal-fill:#17BFA6; --tb-teal-ink:#04211B;
  --tb-gold:#D8B36A; --tb-gold-text:#D8B36A; --tb-gold-tint:rgba(216,179,106,.14);
  --tb-ease:cubic-bezier(.22,.7,.2,1); --tb-easeout:cubic-bezier(.16,1,.3,1);
  /* accent washes, rules and rings */
  --tb-tint:rgba(43,212,186,.10);        /* soft teal wash bg */
  --tb-tint-strong:rgba(43,212,186,.13); /* pill / chip bg */
  --tb-teal-bright:#7EE9D6;              /* teal text on tinted chips */
  --tb-chip-br:rgba(43,212,186,.35);
  --tb-hover-br:rgba(43,212,186,.5);
  --tb-ring:rgba(43,212,186,.22);
  --tb-sel:rgba(43,212,186,.28); --tb-sel-text:#ffffff;
  --tb-btn-glow:rgba(43,212,186,.45);
  /* ambient glows + textures */
  --tb-glow1:rgba(43,212,186,.13); --tb-glow2:rgba(216,179,106,.06);
  --tb-grid:rgba(255,255,255,.035);
  --tb-rail:rgba(255,255,255,.12);
  --tb-rowalt:rgba(255,255,255,.025);
  --tb-chipbg:rgba(255,255,255,.10);
  --tb-node-br:rgba(255,255,255,.20);
  --tb-ghost-br:rgba(255,255,255,.24);
  --tb-faint:#77809A;
  --tb-shot-br:#3A4560; --tb-star-dim:#4A5570;
  /* header + chrome-on-navy (footer, topbar) */
  --tb-hdr-bg:rgba(10,15,30,.78); --tb-hdr-solid:rgba(10,15,30,.92);
  --tb-nav-text:#D9DEE8; --tb-nav-strong:#ffffff;
  --tb-on-deep:#9AA3B5; --tb-on-deep-strong:#D9DEE8; --tb-teal-deep:#2BD4BA;
  --tb-overlay:rgba(6,10,22,.97);
  /* reading surface */
  --tb-prose-bg:#131C38; --tb-prose-br:rgba(255,255,255,.07); --tb-prose-text:#EDEAE2;
  /* remap the site tokens that are safe to remap (text + line roles).
     --navy is deliberately NOT remapped: it still paints light plates
     (calculators, article figures, book checkout) with readable navy text. */
  --ink:#ffffff;
  --slate:#D9DEE8;
  --mut:#9AA3B5;
  --line:rgba(255,255,255,.10);
  --soft:#0D1529;
  --teal:#2BD4BA;
  --teal-dk:#17BFA6;
  --tealsoft:rgba(43,212,186,.14);
  --gold:#D8B36A;
  --white:#0A0F1E;               /* bg role in site.css body/table */
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --shadow:0 24px 48px -24px rgba(0,0,0,.65);
  --tb-card-shadow:none;         /* light cards get a resting soft shadow */
  --radius:10px;
}

/* ---------- light authority scope ---------- */
html.tb-light{
  --tb-bg:#FAF7F2; --tb-s1:#FFFFFF; --tb-s2:#F6F3EC; --tb-s0:#F3EFE7;
  --tb-deep:#101830; --tb-hair:rgba(16,24,51,.10); --tb-hair2:rgba(16,24,51,.16);
  --tb-text:#1A2233; --tb-head:#101830; --tb-mut:#5B6478; --tb-soft-text:#333D52;
  --tb-teal:#0E7C6B; --tb-teal-fill:#0E7C6B; --tb-teal-ink:#FFFFFF;
  --tb-gold:#B8923F; --tb-gold-text:#8A6B2A; --tb-gold-tint:rgba(184,146,63,.14);
  --tb-tint:rgba(14,124,107,.08);
  --tb-tint-strong:rgba(14,124,107,.12);
  --tb-teal-bright:#0B6A5B;
  --tb-chip-br:rgba(14,124,107,.35);
  --tb-hover-br:rgba(14,124,107,.45);
  --tb-ring:rgba(14,124,107,.22);
  --tb-sel:rgba(14,124,107,.20); --tb-sel-text:#101830;
  --tb-btn-glow:rgba(14,124,107,.35);
  --tb-glow1:rgba(14,124,107,.07); --tb-glow2:rgba(184,146,63,.06);
  --tb-grid:rgba(16,24,51,.045);
  --tb-rail:rgba(16,24,51,.14);
  --tb-rowalt:rgba(16,24,51,.03);
  --tb-chipbg:rgba(16,24,51,.06);
  --tb-node-br:rgba(16,24,51,.18);
  --tb-ghost-br:rgba(16,24,51,.30);
  --tb-faint:#7A8296;
  --tb-shot-br:#B9BFCE; --tb-star-dim:#B9BFCE;
  --tb-hdr-bg:rgba(16,24,51,.94); --tb-hdr-solid:rgba(16,24,51,.98);
  --tb-nav-text:#DCE1EC; --tb-nav-strong:#FFFFFF;
  --tb-on-deep:#B9C1D2; --tb-on-deep-strong:#E7EAF2; --tb-teal-deep:#2BD4BA;
  --tb-overlay:rgba(16,24,51,.97);
  --tb-prose-bg:#FFFFFF; --tb-prose-br:rgba(16,24,51,.10); --tb-prose-text:#1A2233;
  --ink:#101830;
  --slate:#333D52;
  --mut:#5B6478;
  --line:rgba(16,24,51,.10);
  --soft:#F3EFE7;
  --teal:#0E7C6B;
  --teal-dk:#0B6A5B;
  --tealsoft:rgba(14,124,107,.10);
  --gold:#B8923F;
  --white:#FAF7F2;
  --shadow:0 18px 40px -24px rgba(16,24,51,.20);
  --tb-card-shadow:0 10px 28px -18px rgba(16,24,51,.14);
}

/* ---------- base ---------- */
body{background:var(--tb-bg);color:var(--tb-text)}
h1,h2,h3,h4,.serif{color:var(--tb-head);letter-spacing:-.012em}
a{color:var(--tb-teal)}
::selection{background:var(--tb-sel);color:var(--tb-sel-text)}
hr{border:0;border-top:1px solid var(--tb-hair)}

/* kickers: wide letterspaced small caps with a thin gold rule */
.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--tb-teal);font-weight:600}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--tb-gold);
  vertical-align:middle;margin-right:10px;opacity:.85}

/* ---------- buttons ---------- */
.btn{border-radius:8px;border-width:1px}
.btn-primary,.btn-teal{background:var(--tb-teal-fill);border-color:var(--tb-teal-fill);color:var(--tb-teal-ink)}
.btn-primary:hover,.btn-teal:hover{background:var(--tb-teal);border-color:var(--tb-teal);color:var(--tb-teal-ink)}
html.tb-light .btn-primary:hover,html.tb-light .btn-teal:hover{background:#0B6A5B;border-color:#0B6A5B;color:#fff}
.btn-ghost{background:transparent;color:var(--tb-text);border-color:var(--tb-ghost-br)}
.btn-ghost:hover{background:var(--tb-tint);border-color:var(--tb-teal);color:var(--tb-head)}
.btn-light{background:var(--tb-text);color:#0A0F1E;border-color:var(--tb-text)}
.btn-light:hover{background:#fff;color:#0A0F1E}
html.tb-light .btn-light{background:#101830;border-color:#101830;color:#fff}
html.tb-light .btn-light:hover{background:#1C2A52;border-color:#1C2A52;color:#fff}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .22s var(--tb-easeout),box-shadow .22s var(--tb-easeout),
    background .18s,border-color .18s,color .18s}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover,.btn-teal:hover{box-shadow:0 8px 30px -8px var(--tb-btn-glow)}
}

/* ---------- topbar + header: compact single band, blurred, navy in both
   scopes. Owner feedback Jul 2026: header was too tall. Lockup 36px desktop
   / 28px small screens, nav padding 12px, so total header is ~61px desktop
   and ~52px mobile; the info strip above is slimmed to ~24px. ---------- */
.topbar{background:var(--tb-deep);color:var(--tb-on-deep);font-size:12px;
  border-top:2px solid var(--tb-teal-deep)}
.topbar .wrap{padding:4px 24px}
.topbar a{color:var(--tb-on-deep)}
header.site{background:var(--tb-hdr-bg);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--tb-hair)}
html.tb-light header.site{border-bottom:1px solid rgba(255,255,255,.10)}
.nav{padding:12px 24px}
.brandmark{height:36px}
@media(max-width:560px){.brandmark{height:28px}}
.brand{color:var(--tb-nav-strong)}
/* header lockup was drawn for a light bar; swap to the white lockup
   (header stays navy in the light scope, so this holds in both) */
header.site .brandmark{content:url("/assets/img/logo-lockup-white.png")}
nav.menu a{color:var(--tb-nav-text);position:relative}
nav.menu a:hover,nav.menu a.active{color:var(--tb-nav-strong)}
nav.menu a:not(.navcta)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--tb-teal-deep)}
@media (prefers-reduced-motion: no-preference){
  nav.menu a:not(.navcta)::after{transition:right .3s var(--tb-easeout)}
}
nav.menu a:not(.navcta):hover::after,nav.menu a:not(.navcta).active::after{right:0}
.menu-toggle{color:var(--tb-nav-strong)}
/* the header cta keeps bright teal on the navy bar in the light scope */
html.tb-light header.site .navcta{background:#17BFA6;border-color:#17BFA6;color:#04211B}
html.tb-light header.site .navcta:hover{background:#2BD4BA;border-color:#2BD4BA;color:#04211B}
/* scrolled state (class set by enhance.js past ~40px): slightly shorter bar,
   more opaque, stronger blur, soft drop shadow */
header.site.tb-scrolled{background:var(--tb-hdr-solid);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  box-shadow:0 10px 30px -18px rgba(4,8,20,.55)}
header.site.tb-scrolled .nav{padding:7px 24px}
header.site.tb-scrolled .brandmark{height:32px}
@media(max-width:560px){header.site.tb-scrolled .brandmark{height:26px}}
@media (prefers-reduced-motion: no-preference){
  header.site{transition:background .25s,box-shadow .25s}
  .nav{transition:padding .25s var(--tb-easeout)}
  .brandmark{transition:height .25s var(--tb-easeout)}
}

/* ---------- hero + page headers: ambient glow on the canvas ---------- */
.hero{background:
  radial-gradient(900px 480px at 82% -12%,var(--tb-glow1),transparent 62%),
  radial-gradient(760px 420px at -6% 112%,var(--tb-glow2),transparent 56%),
  var(--tb-bg)}
.pagehead{background:
  radial-gradient(820px 380px at 84% -22%,var(--tb-glow1),transparent 62%),
  var(--tb-bg)}
.hero h1,.pagehead h1{font-family:var(--serif);color:var(--tb-head);line-height:1.06;letter-spacing:-.02em}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
body[data-page="home"] .hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.pagehead h1{font-size:clamp(1.9rem,3.8vw,2.8rem)}
.hero p.sub,.pagehead p.sub{color:var(--tb-soft-text);font-size:clamp(1.05rem,1.4vw,1.2rem)}
/* very slow ambient drift on the hero glow (dark) and its warm radial
   equivalent (light): same animation, scope-specific glow tokens */
@media (prefers-reduced-motion: no-preference){
  .hero{background-size:180% 180%,180% 180%,auto;animation:tbAmbient 36s ease-in-out infinite alternate}
  @keyframes tbAmbient{
    from{background-position:70% 0%,0% 100%,0 0}
    to{background-position:95% 24%,18% 78%,0 0}
  }
}
/* interior-page aurora (enhance.css) + hero grid texture, per scope */
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero)::before{
  background-image:linear-gradient(var(--tb-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--tb-grid) 1px,transparent 1px)}
:is(body[data-page="about"],body[data-page="consulting"],body[data-page="aigxp"],body[data-page="frameworks"]) :is(.pagehead,.hero)::after{
  background:radial-gradient(40% 50% at 75% 30%,var(--tb-glow1),transparent 70%),
    radial-gradient(42% 42% at 88% 60%,var(--tb-glow2),transparent 72%);
  animation-duration:34s}

/* ---------- section shells ---------- */
.soft{background:var(--tb-s0)}
.dark{background:var(--tb-s0);color:var(--tb-soft-text)}
.cred{background:var(--tb-s0);color:var(--tb-soft-text);
  border-top:1px solid var(--tb-hair);border-bottom:1px solid var(--tb-hair)}
h2.sec{font-size:clamp(1.7rem,3vw,2.35rem)}
.lead{color:var(--tb-mut)}

/* ---------- cards + panels ---------- */
.card,.why,.post,.step,.form,.qcard,.result,.opt{
  background:var(--tb-s1);border-color:var(--tb-hair);box-shadow:var(--tb-card-shadow)}
.card:hover,.post:hover{border-color:var(--tb-hover-br);box-shadow:var(--shadow)}
.card .go,.post .go{color:var(--tb-teal)}
.card a.go:hover{color:var(--tb-head)}
.why b{color:var(--tb-head)}
.post .thumb{border-bottom:1px solid var(--tb-hair)}
.post h3,.post h4{color:var(--tb-head)}
.proof{background:var(--tb-s1);border-color:var(--tb-hair);border-left:4px solid var(--tb-teal)}
.hook{background:linear-gradient(120deg,var(--tb-s1),var(--tb-s2));border:1px solid var(--tb-hair)}
.hook p{color:var(--tb-mut)}
/* the animated accent bar on cards (enhance/home-enhance) picks up the new teal via --teal */

/* ---------- stat counters: big serif numerals, small-caps labels ---------- */
.stat{background:var(--tb-s1);border-color:var(--tb-hair);box-shadow:var(--tb-card-shadow)}
.stat .n{font-family:var(--serif);font-size:clamp(2.1rem,3.4vw,2.9rem);color:var(--tb-teal);font-weight:700}
.stat .l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tb-mut);line-height:1.5}
.tierbig{color:var(--tb-teal)}

/* ---------- tables ---------- */
table.tb{background:transparent}
table.tb th,table.tb td{border-color:var(--tb-hair)}
table.tb th{background:var(--tb-s2);color:var(--tb-head)}
table.tb tr:nth-child(even) td{background:var(--tb-rowalt)}

/* ---------- steps ---------- */
.step b{color:var(--tb-head)}
.step::before{background:var(--tb-teal-fill);color:var(--tb-teal-ink)}

/* ---------- forms ---------- */
label{color:var(--tb-soft-text)}
input,select,textarea{background:var(--tb-s0);border-color:var(--tb-hair2);color:var(--tb-text)}
html.tb-light input,html.tb-light select,html.tb-light textarea{background:#fff}
input::placeholder,textarea::placeholder{color:var(--tb-faint)}
select option{background:var(--tb-s1);color:var(--tb-text)}
input:focus,select:focus,textarea:focus{border-color:var(--tb-teal);
  box-shadow:0 0 0 3px var(--tb-ring)}
.news{background:var(--tb-s0);border:1px solid var(--tb-hair)}
.news input{background:var(--tb-deep);border-color:var(--tb-hair2)}
html.tb-light .news input{background:#fff;color:var(--tb-text)}

/* ---------- pills, crumbs ---------- */
.pill{background:var(--tb-tint-strong);color:var(--tb-teal-bright)}
.pill.gold{background:var(--tb-gold-tint);color:var(--tb-gold-text)}
.pill.navy{background:var(--tb-chipbg);color:var(--tb-soft-text)}
.crumb,.crumb a{color:var(--tb-mut)}

/* ---------- footer: deep navy in both scopes, hairline top rule ---------- */
footer.site{background:var(--tb-deep);border-top:1px solid var(--tb-hair);color:var(--tb-on-deep)}
footer.site a{color:var(--tb-on-deep-strong)}
footer.site a:hover{color:var(--tb-teal-deep)}
.legal{border-top-color:var(--tb-hair);color:var(--tb-faint)}
html.tb-light footer.site{border-top-color:rgba(255,255,255,.10)}
html.tb-light footer.site .legal,html.tb-light .legal{border-top-color:rgba(255,255,255,.12);color:#8892A8}

/* ---------- ask-the-author band (deep teal, works on both canvases) ---------- */
.askband{background:#0D5A4D;color:#E9FFF9}
.askband:hover{background:#0F6B5B;color:#fff}

/* ---------- reading surfaces (thinking articles + legal pages) ----------
   The panel debate's resolution: long-form text sits on an elevated panel
   with a generous measure and line-height (white panel in the light scope). */
.prose{background:var(--tb-prose-bg);border:1px solid var(--tb-prose-br);border-radius:16px;
  padding:clamp(26px,5vw,52px);line-height:1.75;font-size:17.5px;color:var(--tb-prose-text)}
html.tb-light .prose{box-shadow:var(--tb-card-shadow)}
.prose p,.prose li,.prose h2,.prose h3,.prose blockquote{max-width:68ch}
.prose h2,.prose h3{color:var(--tb-head)}
.prose b{color:var(--tb-head)}
.prose blockquote{color:var(--tb-text);border-left-color:var(--tb-teal)}
.prose .pull{color:var(--tb-text)}
/* figures inside articles were drawn for paper: keep them as warm plates */
.diagram,.prose .fig{background:#F6F4EF}
.figcap{color:var(--tb-mut)}

/* stat plates and figures INSIDE articles keep their paper styling
   (the Elsa essay declares .stat{background:#fff} + var() text locally) */
.prose .stat{background:#fff;border-color:#e4e7ec;box-shadow:none}
.prose .stat .n{color:#1f3a5f}
.prose .stat .n span{color:#0e7c6b}
.prose .stat .l{color:#5d6a79;letter-spacing:0;text-transform:none;font-size:13px}
.prose .fig .cap{background:#EFECE4;color:#5d6a79}
.prose .fig .cap b{color:#1f3a5f}

/* ---------- assessment flow ---------- */
.qtext{color:var(--tb-head)}
.opt{color:var(--tb-text);border-color:var(--tb-hair2)}
.opt:hover{border-color:var(--tb-teal);background:var(--tb-s2)}
.opt.sel{border-color:var(--tb-teal);background:var(--tb-tint)}
.progress{background:var(--tb-rail)}
.bar .track{background:var(--tb-rail)}
.qnum{color:var(--tb-teal)}
/* the quadrant SVG uses pastel fills + dark axis text: paper plate, both scopes */
.quadwrap svg{background:#F6F4EF;border-radius:12px}

/* ---------- viz boards (service/framework infographics) ---------- */
.tb-board{background:radial-gradient(620px 240px at 86% -16%,var(--tb-glow1),transparent 60%),var(--tb-s1);
  border-color:var(--tb-hair)}
.tb-nd{background:var(--tb-s2);border-color:var(--tb-node-br)}
.tb-lab{color:var(--tb-soft-text)}
.tb-rail{background:var(--tb-rail)}
.tb-state,.tb-layer,.tb-live,.tb-tier{background:var(--tb-s2);border-color:var(--tb-hair)}
.tb-state h4,.tb-layer h4,.tb-tier h4,.tb-live .tb-ltitle{color:var(--tb-head)}
.tb-state p,.tb-layer p,.tb-tier p{color:var(--tb-mut)}
.tb-track{background:var(--tb-rail)}
.tb-bar .tb-top{color:var(--tb-text)}
details.tb-more{background:var(--tb-s1);border-color:var(--tb-hair)}
details.tb-more>summary{color:var(--tb-text)}
details.tb-more>summary:hover{color:var(--tb-teal)}
details.tb-more .tb-body{color:var(--tb-soft-text)}
.tb-detail{background:var(--tb-s2);border-color:var(--tb-hair)}
.tb-detail h4{color:var(--tb-head)}
.tb-detail p{color:var(--tb-soft-text)}
.tb-hint{color:var(--tb-faint)}
.tb-live .tb-lrow{color:var(--tb-mut);border-top-color:var(--tb-hair)}
.tb-live .tb-lrow b{color:var(--tb-head)}
.tb-layer .tb-ic{background:var(--tb-chipbg);color:var(--acc-lt,#16b89a)}
/* per-page accent colours were tuned for paper (--acc) with a light-on-dark
   variant (--acc-lt). Dark uses the light variant; the light scope flips
   --acc-lt back to the paper-tuned accent with one remap. */
html.tb-light .tb-viz{--acc-lt:var(--acc,#0e7c6b)}
.tb-board .tb-bar .tb-top .v{color:var(--acc-lt,#16b89a)}
.tb-board .tb-nd{color:var(--acc-lt,#16b89a)}
.tb-live .tb-lstat{color:var(--acc-lt,#16b89a);background:var(--tb-chipbg)}
.tb-st.past .tb-nd{border-color:var(--acc-lt,#16b89a);color:var(--acc-lt,#16b89a)}
.tb-st.sel .tb-lab{color:var(--acc-lt,#16b89a)}
.tb-detail{background:var(--tb-s2);border-color:var(--tb-hair);border-left-color:var(--acc-lt,#16b89a)}

/* ---------- homepage pieces (hero pipeline, chips, strips, book band) ---------- */
body[data-page="home"] .hero__aurora{
  background:radial-gradient(40% 50% at 70% 30%,var(--tb-glow1),transparent 70%),
    radial-gradient(42% 42% at 86% 62%,var(--tb-glow2),transparent 72%);
  animation-duration:34s}
body[data-page="home"] .hero::before{
  background-image:linear-gradient(var(--tb-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--tb-grid) 1px,transparent 1px)}
body[data-page="home"] .hh-rail{background:var(--tb-rail)}
body[data-page="home"] .hh-node{background:var(--tb-s1);border-color:var(--tb-node-br)}
body[data-page="home"] .hh-lab{color:var(--tb-soft-text)}
body[data-page="home"] .hh-stat{background:var(--tb-s1);border:1px solid var(--tb-hair);box-shadow:var(--tb-card-shadow)}
body[data-page="home"] .hh-stat .n{font-family:var(--serif);color:var(--tb-teal);font-size:clamp(1.8rem,2.6vw,2.3rem)}
body[data-page="home"] .hh-stat .l{letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;color:var(--tb-mut)}
body[data-page="home"] .hh-chip{color:var(--tb-teal-bright);border-color:var(--tb-chip-br);background:var(--tb-tint)}
body[data-page="home"] .home-authorstrip{background:var(--tb-s1);border-color:var(--tb-hair);color:var(--tb-soft-text)}
body[data-page="home"] .home-authorstrip .as-text{color:var(--tb-soft-text)}
body[data-page="home"] .home-authorstrip .as-cta{color:var(--tb-gold-text)}
body[data-page="home"] .pcard{background:var(--tb-s1);border-color:var(--tb-hair);box-shadow:var(--tb-card-shadow)}
body[data-page="home"] .pcard h3{color:var(--tb-head)}
body[data-page="home"] .pcard .pwho{color:var(--tb-gold-text)}
body[data-page="home"] .pcard .go{color:var(--tb-teal)}
body[data-page="home"] .pcard:hover{border-color:var(--tb-hover-br)}
body[data-page="home"] .home-stats .hs{background:var(--tb-s1);border:1px solid var(--tb-hair);box-shadow:var(--tb-card-shadow)}
body[data-page="home"] .home-stats .n{font-family:var(--serif);color:var(--tb-teal)}
body[data-page="home"] .home-bookband{background:var(--tb-s0);
  border-top:1px solid var(--tb-hair);border-bottom:1px solid var(--tb-hair)}
body[data-page="home"] .home-bookband .eyebrow{color:var(--tb-gold-text)}
body[data-page="home"] .home-bookband p{color:var(--tb-soft-text)}
body[data-page="home"] .home-bookband .meta{color:var(--tb-mut)}
body[data-page="home"] .home-bookband .btn-book{background:var(--tb-gold);border-color:var(--tb-gold);color:#241A05}
body[data-page="home"] .home-bookband .btn-book:hover{background:#E6C888;border-color:#E6C888;color:#241A05;
  box-shadow:0 12px 30px -12px rgba(216,179,106,.5)}
/* the why-now regulatory line, restyled as a slim banner */
.tb-whynow{background:var(--tb-s0);border-top:1px solid var(--tb-hair);border-bottom:1px solid var(--tb-hair);
  padding:14px 24px;text-align:center;font-size:14.5px;color:var(--tb-soft-text)}
.tb-whynow b{color:var(--tb-gold-text)}
.tb-whynow a{font-weight:700}
/* method section: compact horizontal framework row */
.tb-fwrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.tb-fwrow .why{padding:18px 20px;font-size:14px}
@media(max-width:900px){.tb-fwrow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tb-fwrow{grid-template-columns:1fr}}
/* the 4-step method path SVG */
.tb-methodpath{margin:10px 0 4px}
.tb-methodpath svg{width:100%;height:auto;display:block}

/* ---------- SVG stroke draw-in (.tb-draw) ----------
   With JS, enhance.js measures each path and sets stroke-dasharray/offset
   inline, then adds .is-visible on scroll. Without JS or with reduced
   motion, nothing is hidden: strokes are simply visible. */
@media (prefers-reduced-motion: no-preference){
  .tb-draw path{transition:stroke-dashoffset 1.8s var(--tb-easeout)}
  .tb-draw.is-visible path{stroke-dashoffset:0 !important}
}

/* ---------- page rescues: ask / download / resend ---------- */
body[data-page="ask"] .tabs{border-bottom-color:var(--tb-hair)}
body[data-page="ask"] .tab{color:var(--tb-mut)}
body[data-page="ask"] .tab.on{color:var(--tb-head);border-bottom-color:var(--tb-teal)}
body[data-page="ask"] .erratabox{background:var(--tb-s2);border-color:var(--tb-hair)}
body[data-page="ask"] .giftnote{background:var(--tb-tint);border-left-color:var(--tb-teal);color:var(--tb-soft-text)}
body[data-page="ask"] .giftcard{background:var(--tb-s2);border-color:var(--tb-hair)}
body[data-page="ask"] .giftcard .gc-h{color:var(--tb-head)}
body[data-page="ask"] .giftcard .gc-sub{color:var(--tb-mut)}
body[data-page="ask"] .star-row label.dim{color:var(--tb-soft-text)}
body[data-page="ask"] .stars label{color:var(--tb-star-dim)}
body[data-page="ask"] .shot{color:var(--tb-mut);border-color:var(--tb-shot-br)}
body[data-page="ask"] .shot.filled{color:var(--tb-text)}
body[data-page="ask"] .posture,body[data-page="ask"] .wordcount{color:var(--tb-mut)}
body[data-page="ask"] .wordcount.done{color:var(--tb-teal)}
body .dl-card,body .rs-card{background:var(--tb-s1);border:1px solid var(--tb-hair);
  box-shadow:var(--shadow)}
body .dl-card h1,body .rs-card h1{color:var(--tb-head)}
body .dl-card p,body .rs-card p{color:var(--tb-soft-text)}
body .rs-card label{color:var(--tb-soft-text)}
body .rs-card input[type=email]{background:var(--tb-s0);border-color:var(--tb-hair2);color:var(--tb-text)}
html.tb-light body .rs-card input[type=email]{background:#fff}
body .dl-note,body .rs-note{color:var(--tb-mut)}
body .rs-msg.ok{color:var(--tb-teal)}

/* ---------- article engagement strip (article-engage.js injects its own
   styles at runtime; the #tb-engage id outranks them) ---------- */
#tb-engage .tbe-cmts h3,#tb-engage .tbe-form h4{color:var(--tb-head)}
#tb-engage .tbe-c .tbe-cn{color:var(--tb-text)}
#tb-engage .tbe-c .tbe-cb{color:var(--tb-soft-text)}
#tb-engage .tbe-row .tbe-lbl,#tb-engage .tbe-c .tbe-cd,#tb-engage .tbe-empty,#tb-engage .tbe-form .tbe-note{color:var(--tb-mut)}
#tb-engage .tbe-btn{background:var(--tb-s2);border-color:var(--tb-hair2);color:var(--tb-text)}
#tb-engage .tbe-btn .tbe-n{color:var(--tb-mut)}
#tb-engage .tbe-btn:hover{border-color:var(--tb-teal);color:var(--tb-teal)}
#tb-engage .tbe-btn.tbe-on{background:var(--tb-teal-fill);border-color:var(--tb-teal-fill);color:var(--tb-teal-ink)}
#tb-engage .tbe-btn.tbe-on .tbe-n{color:var(--tb-teal-ink)}
#tb-engage .tbe-form{background:var(--tb-s1);border-color:var(--tb-hair)}
#tb-engage .tbe-form label{color:var(--tb-soft-text)}
#tb-engage .tbe-form input,#tb-engage .tbe-form textarea{background:var(--tb-s0);border-color:var(--tb-hair2);color:var(--tb-text)}
html.tb-light #tb-engage .tbe-form input,html.tb-light #tb-engage .tbe-form textarea{background:#fff}
#tb-engage .tbe-submit{background:var(--tb-teal-fill);color:var(--tb-teal-ink)}
/* assessment tier chips are inline-styled teal bg; keep ink readable per scope */
.assess [style*="background:var(--teal)"]{color:var(--tb-teal-ink) !important}

/* ---------- mobile nav: full-screen navy overlay in BOTH scopes (matches
   the navy header), large serif links ---------- */
@media(max-width:900px){
  .menu-toggle{position:relative;z-index:70}
  nav.menu{background:transparent;border-bottom:0}
  nav.menu.open{display:flex;position:fixed;inset:0;z-index:60;
    background:var(--tb-overlay);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    flex-direction:column;justify-content:flex-start;
    padding:96px 34px 44px;overflow-y:auto}
  nav.menu.open a{display:flex;align-items:center;margin:0;padding:14px 0;min-height:48px;
    font-family:var(--serif);font-size:clamp(24px,6vw,32px);font-weight:600;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.07)}
  nav.menu.open a:not(.navcta)::after{display:none}
  nav.menu.open a.navcta{font-family:var(--sans);font-size:17px;justify-content:center;
    margin-top:26px;border-bottom:0;border-radius:10px;min-height:52px}
  html.tb-light nav.menu.open a.navcta{background:#17BFA6;border-color:#17BFA6;color:#04211B}
}

/* ---------- motion polish ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{transition-duration:.8s;transition-timing-function:var(--tb-easeout)}
  .tb-rv.tb-in{transition-duration:.8s}
}
@media (prefers-reduced-motion: reduce){
  .hero{animation:none}
}

/* ---------- print: keep the page readable on paper ---------- */
@media print{
  body{background:#fff;color:#14202e}
  h1,h2,h3,h4{color:#14202e}
  .prose{background:#fff;border:0;color:#14202e}
}