/* ============================================================
   Mike Moll: site-v2.css, the light system
   Source of truth: /podcast-guesting (Chris Do pass, 2026-10-07).
   Extracted for the site-wide restyle (PR 1, foundation).

   Opt in, page by page. A page loads EITHER /assets/site.css (v1, frozen)
   OR this file, never both: .hero .btn .eyebrow .logo mean different
   things in each. Use _template.html as the starting point.

   Contract: style only. Never changes links, data-lead forms, forms.js,
   GTM, visits.js, titles, canonicals, OG, JSON-LD.

   Fonts: one link per page, stamped by generator/chrome/head.html:
   Libre Franklin 300/600/700/800 + Poppins 400/500.

   Rules (Mike's, locked):
   . one radius, 6px (--r). Round only for avatars, dots, the favicon. No pills.
   . blue #38b6ff is for fills, dots and buttons. Blue TEXT on white is
     --accent-deep #0874b8 (via --link). #38b6ff text only on navy.
   . buttons: 16px, sentence case, solid accent (.btn) or outlined (.btn.line).
   . no clip-art icons, no long dashes, accent bars or dash bullets: 6px dots.
   . eyebrows rare (about 5 on a long page), ink with the blue dot.
   . hairlines over boxes; never a card inside a card.

   Values below reproduce /podcast-guesting exactly (PR 1 acceptance is a
   pixel-identical render). A few off-scale sizes (13/15/17/21/22px) are
   kept on purpose and marked "parity"; they snap to the scale in a
   reviewed tidy-up, not silently here.

   Breakpoints: 960 / 760 / 560 (sticky header from 761).

   Sections
    1  Tokens
    2  Scopes: .band-soft, dark (.band-dark .hero-photo .site-foot .on-dark), .on-light
    3  Base
    4  Layout + utilities
    5  Type roles: headings, .lead, .eyebrow, .label, .tlink
    6  Buttons
    7  Lists + glyphs
    8  Chrome: .site-nav, .site-foot, .crumbs
    9  Components (9b: content components for lists of episodes and shows;
       9c: page components promoted from the wave A/B pages)
   10  Responsive
   11  Compat (small; delete each line when grep finds no user)
   12  Reduced motion
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;
  /* surfaces */
  --bg:#ffffff;
  --soft:#f4f6f8;
  --panel:#0b1b27;              /* navy bands, footer, hero base */
  /* text on light (AA on white) */
  --ink:#0c1a24;                /* headings, strong, glyph stroke */
  --text:#3a4651;               /* body */
  --muted:#5f6b76;              /* captions, labels */
  /* lines */
  --line:#e4e9ee;               /* hairline; .band-soft re-points it to --line-soft */
  --line-soft:#d9e0e6;
  --field:#8796a3;              /* input border, 3:1 on white */
  /* accent: blue means action and money */
  --accent:#38b6ff;             /* FILLS only on white: buttons, dots, glyph accent */
  --accent-hover:#6cc8ff;
  --accent-ink:#04131d;         /* text on an accent fill */
  --accent-deep:#0874b8;        /* blue as TEXT on white: links, light numerals */
  --link:var(--accent-deep);    /* role token; re-pointed to --accent on navy */
  --focus:0 0 0 3px rgba(56,182,255,.22);
  /* on navy */
  --panel-ink:#ffffff;
  --panel-text:#c0ccd6;
  --panel-muted:#9fb0bd;
  --panel-line:rgba(255,255,255,.12);
  /* type */
  --font-head:'Libre Franklin','Helvetica Neue',Arial,sans-serif;
  --font-body:'Poppins','Helvetica Neue',Arial,sans-serif;
  --fs-cap:12px;                /* caps labels + eyebrows */
  --fs-s:14px;                  /* small: meta, footer, dense lists */
  --fs-b:16px;                  /* body */
  --fs-l:18px;                  /* lead, statement lists, FAQ questions */
  --fs-h3:20px;
  --fs-h4:24px;                 /* card titles, result lines */
  --fs-sub:30px;                /* sub-H2 */
  --fs-h2:clamp(32px,3.6vw,46px);
  --fs-h1:clamp(44px,6.4vw,84px);          /* offer hero */
  --fs-h1-content:clamp(40px,5vw,64px);    /* content hero (B) */
  --fs-num:44px;                /* light numerals 01 02 03 */
  /* space (4/8 base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px;
  --s8:48px; --s9:56px; --s10:64px; --s11:80px; --s12:96px; --s13:112px;
  --sec:var(--s13);             /* section padding-block; 80 at <=960 */
  --sec-tight:var(--s12);       /* compact bands; 64 at <=960 */
  --gutter:28px;                /* 20 at <=560 */
  /* geometry */
  --max:1140px;
  --read:720px;                 /* prose column */
  --r:6px;                      /* the one radius */
  --shadow:0 16px 36px -22px rgba(12,26,36,.32);  /* the one shadow: hero strip card */
  --ease:.15s ease-out;
}

/* ---------- 2. Scopes: components read role tokens, surfaces re-point them ---------- */
.band-soft{background:var(--soft);--line:var(--line-soft)}
.band-dark{background:var(--panel)}
.on-dark,.band-dark,.hero-photo,.site-foot{
  --bg:var(--panel);--ink:var(--panel-ink);--text:var(--panel-text);--muted:var(--panel-muted);
  --line:var(--panel-line);--link:var(--accent);--field:rgba(255,255,255,.45);
  color:var(--text)}
/* a white card on a soft or navy surface resets to the light roles */
.on-light,.strip,.pillars > li,.tcard,.optin{
  --bg:#ffffff;--ink:#0c1a24;--text:#3a4651;--muted:#5f6b76;--line:#e4e9ee;--link:#0874b8;--field:#8796a3;
  color:var(--text)}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-b);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
input,select,textarea,button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- 4. Layout + utilities ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.section.tight{padding-block:var(--sec-tight)}
.section.flush{padding-top:0}
.center{text-align:center}
.cta-center{display:flex;justify-content:center;margin-top:var(--s8)}
.nw{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 5. Type roles ---------- */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);letter-spacing:-.025em;text-wrap:balance}
h1{font-weight:800;font-size:var(--fs-h1);line-height:.98}
h2{font-weight:700;font-size:var(--fs-h2);line-height:1.08}
h3{font-weight:700;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em}
h4{font-weight:800;font-size:var(--fs-h4);line-height:1.15;letter-spacing:-.02em}
.lead{font-size:var(--fs-l);max-width:56ch}
/* eyebrow: rare, ink, the blue dot. Never repeats its H2. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:var(--fs-cap);
  line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/* label: the quiet caps tag, no dot (logo rows, "You get", footer columns) */
.label{display:block;font-family:var(--font-head);font-weight:700;font-size:var(--fs-cap);line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* text link: blue text (deep on white, accent on navy), 1px underline */
.tlink{display:inline-block;padding-block:12px;margin-block:-12px;font-family:var(--font-head);font-weight:600;font-size:15px; /* parity */
  color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tlink:hover{color:var(--ink)}

/* ---------- 6. Buttons: 16px, sentence case, one fill colour ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:18px 30px;border:0;border-radius:var(--r);
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-head);font-weight:700;font-size:var(--fs-b);line-height:20px;letter-spacing:-.005em;
  text-align:center;cursor:pointer;transition:background-color var(--ease),color var(--ease),box-shadow var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--bg)}
/* text action (play glyph only for video) */
.act{display:inline-flex;align-items:center;gap:10px;min-height:56px;font-family:var(--font-head);font-weight:700;font-size:var(--fs-b);color:var(--ink);transition:color var(--ease)}
.act:hover{color:var(--link)}
.act svg{flex:none;width:11px;height:13px}
.act svg path{fill:var(--accent)}

/* ---------- 7. Lists + glyphs ---------- */
.dots li{position:relative;padding-left:20px}
.dots li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* statement list: hairline rows */
.lines li{padding-block:18px;padding-left:24px;border-bottom:1px solid var(--line);font-size:var(--fs-l);color:var(--ink);font-weight:500;letter-spacing:-.005em}
.lines li:first-child{border-top:1px solid var(--line)}
.lines li::before{top:calc(18px + .72em)}
/* dismissed items only (myths, not-a-fit): small thin x */
.mlist{border-top:1px solid var(--line)}
.mlist li{display:flex;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:var(--fs-l);line-height:1.3}
.mlist svg{width:12px;height:12px;flex:none;stroke:#6b7884;stroke-width:1.8;stroke-linecap:round;fill:none} /* parity; folds into --muted */
/* glyphs: Little Black Book language. Ink stroke 1.4 round, exactly ONE accent part (.a stroke or .af fill), no containers */
.g{width:44px;height:44px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.g .a{stroke:var(--accent)}
.g .af{fill:var(--accent);stroke:none}

/* ---------- 8. Chrome (stamped from generator/chrome/ by scripts/stamp_chrome.py) ---------- */
.logo{font-family:var(--font-head);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.logo span{color:var(--accent)}
.logo small{display:block;margin-top:5px;font-size:var(--fs-cap);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* header: site (4 links), podcast (+ outlined "Free assessment"), focus (logo + one action) */
.site-nav{position:relative;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.site-nav .wrap{display:flex;align-items:center;gap:var(--s5);min-height:80px}
.site-nav .logo{margin-right:auto}
.site-nav .links{display:flex;align-items:center;gap:28px;font-family:var(--font-head);font-weight:600;font-size:var(--fs-s)}
.site-nav .links a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--text);transition:color var(--ease)}
.site-nav .links a:hover,.site-nav .links a[aria-current="page"]{color:var(--ink)}
.site-nav .links a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
.site-nav .btn{min-height:44px;padding:12px 20px}
.site-nav .menu{display:none;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-b);color:var(--ink)}
/* the open phone menu (generator/chrome/menu.html) locks the page behind it */
html.menu-open{overflow:hidden}
/* footer: navy. full = brand + three columns + legal row; focus = legal row + socials */
.site-foot{background:var(--panel);border-top:1px solid var(--line);font-size:var(--fs-s)} /* seam after a navy closing band */
.site-foot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6);padding-block:var(--s10) var(--s8)}
.site-foot .cols .label{margin-bottom:var(--s3)}
.site-foot .cols a:not(.logo){display:inline-flex;align-items:center;min-height:40px}
.site-foot .legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s5);
  padding-block:var(--s5);border-top:1px solid var(--line)}
.site-foot .legal > *{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.site-foot .legal a{display:inline-flex;align-items:center;min-height:44px}
.site-foot .legal i{font-style:normal;color:var(--muted)}
.site-foot a:not(.logo):hover{color:var(--ink)}
.site-foot.focus .legal{border-top:0}
/* breadcrumbs (content hero) */
.crumbs{display:flex;flex-wrap:wrap;gap:0 10px;font-family:var(--font-head);font-weight:600;font-size:var(--fs-s);color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--ink)}
.crumbs span{display:inline-flex;align-items:center}

/* ---------- 9. Components ---------- */
/* section head: stack, centered, or split (title left, lead right) */
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:700px}
.sec-head.center{margin-inline:auto;align-items:center;text-align:center}
.sec-head.wide{max-width:none}
.sec-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s9);align-items:end;max-width:none}
.sec-head.split .t{display:flex;flex-direction:column;gap:18px}
.sec-head p{font-size:var(--fs-l)}
.sec-head + .prose{margin-top:var(--s8)}

/* hero A: offer hero, navy photo card (set the photo with style="--hero-img:url(...)") */
.hero-photo{position:relative;border-radius:var(--r);overflow:hidden;min-height:620px;display:flex;align-items:center;
  background:var(--panel) var(--hero-img,none) right center/cover no-repeat}
.hero-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,14,21,.95) 0%,rgba(5,14,21,.82) 44%,rgba(5,14,21,.2) 80%,rgba(5,14,21,0) 100%)}
.hero-photo .ph{display:none}
.hero-photo .in{position:relative;padding:64px 64px 144px;max-width:740px;display:flex;flex-direction:column;gap:22px}
.hero-photo h1 em{font-style:normal;color:var(--accent)}   /* the money word; blue words only on navy */
.hero-photo p{color:#dfe8ee;font-size:var(--fs-l);max-width:44ch}
.hero-photo .btns{display:flex;gap:8px 32px;flex-wrap:wrap;align-items:center;margin-top:8px}
/* hero badge stack: one per page, top only */
.heard{display:flex;align-items:center;gap:16px;margin-top:6px}
.heard .stack{display:flex}
.heard .stack img{width:40px;height:40px;border-radius:9px;border:2px solid var(--panel);object-fit:cover}
.heard .stack img + img{margin-left:-12px}
.heard b{display:block;font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:15px;line-height:1.2}
.heard span{font-size:13px;color:#b9c7d2}
/* outcome strip under hero A (white card, the site's one shadow) */
.strip{position:relative;z-index:2;margin:-84px 64px 0;background:#ffffff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:28px 44px 32px;text-align:center}
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.outs li{display:flex;align-items:center;justify-content:center;gap:var(--s4);min-width:0}
.outs li + li{border-left:1px solid var(--line)}
.outs .g{width:38px;height:38px}
.outs b{font-family:var(--font-head);font-weight:700;font-size:var(--fs-l);line-height:1.3;color:var(--ink);text-align:left}

/* hero B: content hero, type on white. Crumbs, one eyebrow, H1, one 18px lead. */
.hero-b{padding-block:var(--s11) var(--s10)}
.hero-b .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.hero-b .crumbs{margin-bottom:var(--s2)}
.hero-b h1{font-size:var(--fs-h1-content);line-height:1.02;max-width:18ch}
.hero-b .lead{color:var(--text)}
.hero-b .btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6);margin-top:var(--s2)}
.hero-b + .section:not(.band-soft):not(.band-dark){padding-top:0}

/* hairline grid: open cells divided by hairlines, rows aligned with subgrid */
.hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s10);border-top:1px solid var(--line)}
.hgrid > li{padding:38px 32px;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--s3);min-width:0;
  border-left:1px solid var(--line);border-top:1px solid var(--line)}
.hgrid > li:nth-child(2n+1){border-left:0;padding-left:0}
.hgrid > li:nth-child(2n){padding-right:0;padding-left:var(--s8)}
.hgrid > li:nth-child(2n+1){padding-right:var(--s8)}
.hgrid > li:nth-child(-n+2){border-top:0}
.hgrid h3{margin-top:6px;align-self:end}
/* three columns (title + one line each); one column at <=960 */
.hgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hgrid.c3 > li:nth-child(n){grid-row:auto;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s7) var(--s6);
  border-left:1px solid var(--line);border-top:1px solid var(--line)}
.hgrid.c3 > li:nth-child(3n+1){border-left:0;padding-left:0}
.hgrid.c3 > li:nth-child(3n){padding-right:0}
.hgrid.c3 > li:nth-child(-n+3){border-top:0}
.hgrid.c3 h3{margin-top:0;align-self:auto}
.hgrid p{color:var(--text);font-size:15px;line-height:1.6} /* parity */

/* founder block + "Seen on" row + "Spoken at" row */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s11);align-items:center}
.founder > img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;border-radius:var(--r)}
.founder .copy{display:flex;flex-direction:column;gap:18px}
.seen{display:flex;flex-direction:column;gap:var(--s3);margin-top:10px;padding-top:22px;border-top:1px solid var(--line)}
.seen-stack{display:flex;flex-wrap:wrap}
.seen-stack img{width:44px;height:44px;border-radius:9px;border:2px solid var(--bg);object-fit:cover;box-shadow:0 1px 3px rgba(12,26,36,.18)}
.seen-stack img + img{margin-left:-10px}
.spoke{margin-top:72px;padding-top:var(--s7);border-top:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.seen .label,.spoke .label{font-size:11px;letter-spacing:.22em} /* parity; snaps to 12/.16 */
.logos{--s:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;width:100%}
.logo-tile{display:flex;flex-direction:column;align-items:center;gap:var(--s3);min-width:0}
.logo-tile .box{display:flex;align-items:flex-end;justify-content:center;width:100%;height:calc(52px * var(--s))}
.logo-tile img{width:auto;height:calc(var(--h) * var(--s));max-width:min(calc(var(--mw) * var(--s)),100%);object-fit:contain;
  filter:grayscale(1) brightness(var(--b,1));opacity:.8;transition:filter .2s ease-out,opacity .2s ease-out}
.logo-tile:hover img{filter:none;opacity:1}
.logo-tile .wm{font-family:var(--font-head);font-weight:800;font-size:calc(17px * var(--s));line-height:1.05;letter-spacing:-.01em;color:var(--ink);opacity:.72;text-align:center}
.logo-tile span{max-width:21ch;font-size:13px;line-height:1.4;color:var(--text);text-wrap:balance} /* parity */

/* stat row: four proof numbers */
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s9);border-top:1px solid var(--line)}
.statrow li{display:flex;flex-direction:column;gap:10px;padding:var(--s6) 28px 0;min-width:0}
.statrow li + li{border-left:1px solid var(--line)}
.statrow b{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:clamp(44px,4.6vw,64px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.statrow span{font-size:15px;line-height:1.45;color:var(--text);max-width:22ch} /* parity */

/* light numerals for real sequences */
.num{font-family:var(--font-head);font-weight:300;font-size:var(--fs-num);line-height:1;color:var(--link);letter-spacing:-.04em}

/* pillars: the one card, white on a soft band, rows aligned */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:0;margin-top:60px}
.pillars > li{background:#ffffff;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px 32px;
  display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:14px;min-width:0}
.pillars h3{align-self:start;font-size:21px;line-height:1.25} /* parity */
.pillars .why{font-size:15px;line-height:1.6;border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.pillars .label{align-self:end;margin-top:4px;line-height:1.65} /* parity */
.pillars .incl{display:flex;flex-direction:column;gap:14px}
.pillars .items{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pillars .items li{font-size:var(--fs-s);line-height:1.5;color:var(--ink);padding-block:10px;border-bottom:1px solid var(--line)}
.pillars .items li::before{top:calc(10px + .62em)}

/* testimonials: result first, white cards on navy */
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px;margin:var(--s8) auto 0}
.tcard{background:#ffffff;border-radius:var(--r);padding:28px 28px 16px;display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.tcard .result{font-family:var(--font-head);font-weight:800;font-size:var(--fs-h4);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.tcard .q{flex:1;font-size:var(--fs-b);line-height:1.6;color:var(--text)}
.tcard .by{display:flex;align-items:center;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3);margin-top:4px}
.tcard .by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.tcard .by b{display:block;font-family:var(--font-head);color:var(--ink);font-size:var(--fs-b);line-height:1.2}
.tcard .by > div{flex:1;min-width:0}
.tcard .by span{display:block;font-size:var(--fs-s);line-height:1.35;color:var(--muted);margin-top:2px}
.tcard.wide{grid-column:1/-1}
.watch{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding-inline:12px;margin-right:-12px;flex:none;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-s);color:var(--link)}
.watch svg{flex:none;width:8px;height:10px}
.watch svg path{fill:var(--accent)}
.watch:hover{color:var(--ink)}

/* numbered sequence: open, hairline-topped, light numerals */
.seq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7);margin-top:var(--s9);padding-top:28px;border-top:1px solid var(--line)}
.seq li{display:flex;flex-direction:column;gap:10px;min-width:0}
.seq h3{margin-top:var(--s2)}
.seq p{font-size:15px;line-height:1.6} /* parity */

/* FAQ */
.faqgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s11);align-items:start}
.faqgrid > .copy{display:flex;flex-direction:column;gap:18px;position:sticky;top:24px}
.faqlist{border-top:1px solid var(--line)}
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-l);color:var(--ink)}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--link);stroke-width:1.5;stroke-linecap:round;transition:transform .2s}
.faqlist details[open] summary svg{transform:rotate(45deg)}
.faqlist summary:hover{color:var(--link)}
.faqlist details p{padding:0 2px var(--s5);font-size:var(--fs-b);max-width:60ch}
.faqlist details p a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* closing navy band: H2, one line, one button */
.closing > .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.closing h2{max-width:15em}
.closing p{color:var(--text);font-size:var(--fs-l);max-width:44ch}
.closing .btn{margin-top:var(--s2)}

/* opt-in card (lead magnets; set the photo with style="--optin-img:url(...)") */
.optin{max-width:900px;margin-inline:auto;background:#ffffff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.optin .photo{background:var(--optin-img,none) 18% center/cover no-repeat;min-height:420px}
.optin form{padding:44px 40px;display:flex;flex-direction:column;gap:14px}
.optin h3{font-size:var(--fs-h4);line-height:1.2}
.optin .sub{font-size:15px} /* parity */
.optin label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* fields: 16px text stops the iOS focus zoom; --field border is 3:1 on white */
.optin input{font-size:var(--fs-b);line-height:20px;padding:13px 16px;border-radius:var(--r);border:1px solid var(--field);color:var(--ink);background:#ffffff}
.optin input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.optin .btn{margin-top:4px;width:100%}
.optin .fine{font-size:13px;color:var(--muted);text-align:center} /* parity */

/* prose: posts, legal, long reads */
.prose{max-width:var(--read)}
.prose > * + *{margin-top:20px}
.prose p,.prose li{font-size:var(--fs-l);line-height:1.7}
.prose h2{font-size:var(--fs-sub);line-height:1.15;margin-top:var(--s9)}
.prose h3{margin-top:var(--s7)}
.prose h2 + *,.prose h3 + *{margin-top:var(--s3)}
.prose a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.prose a:hover{color:var(--ink)}
.prose strong,.prose b{font-weight:500;color:var(--ink)}
.prose ul li,.prose ol li{position:relative;padding-left:28px}
.prose li + li{margin-top:var(--s2)}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--font-head);font-weight:300;color:var(--link)}
.prose blockquote{font-family:var(--font-head);font-weight:600;font-size:var(--fs-h3);line-height:1.45;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:var(--s8)}
.prose img{border-radius:var(--r)}

/* ---------- 9b. Content components ----------
   Built for /media, /guest-appearances and /podcast (restyle PR 6); the blog index and
   the other content pages reuse them. Lists are hairline rows, never cards: the whole
   row is the link, the title turns blue on hover. Covers always point at the show's
   cover_url (generator/_source/appearances.json), never a relative images/ path. */

/* cover tile: a show's square artwork. 64px, the one 6px radius (only the hero badge
   stack keeps 9px), a faint inner edge so white artwork holds its shape.
     <span class="cover"><img src="{cover_url}" alt="Show name" width="64" height="64" loading="lazy" decoding="async"></span>
   .yt   a YouTube hqdefault.jpg: scaled so its letterbox bars fall outside the tile
   .ini  a show with no artwork: its initials, ink on soft (white on a soft band) */
.cover{position:relative;display:block;flex:none;width:64px;height:64px;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(12,26,36,.08);pointer-events:none}
.cover img{width:100%;height:100%;object-fit:cover}
.cover.yt img{transform:scale(1.34)}
.cover.ini{display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:var(--fs-h3);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.band-soft .cover.ini{background:#ffffff}

/* appearance list: one hairline row per guest appearance. Cover tile, title, one line, link.
     <ul class="applist"><li><a href="/blog/slug"><span class="cover">..</span>
       <span class="t"><h3>Title</h3><p>One line.</p><span class="go">See the episode</span></span></a></li></ul>
   .c2  two columns from 761px; the rows line up across both */
.applist > li{min-width:0;border-bottom:1px solid var(--line)}
.applist > li:first-child{border-top:1px solid var(--line)}
.applist > li > a{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s5);align-items:start;padding-block:var(--s5)}
.applist .t{display:flex;flex-direction:column;gap:6px;min-width:0}
.applist h3{transition:color var(--ease)}
.applist p{font-size:15px;line-height:1.55} /* parity with .seq p */
.applist .go{margin-top:2px;font-family:var(--font-head);font-weight:700;font-size:var(--fs-s);color:var(--link)}
.applist a:hover h3{color:var(--link)}
.applist a:hover .go{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.applist.c2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s10)}
.applist.c2 > li:nth-child(2){border-top:1px solid var(--line)}

/* episode list: hairline rows, no artwork. Meta on the left, title and one line, the link on the right.
     <ul class="eplist"><li><a href="/blog/slug"><span class="meta">Interview &middot; May 29, 2025</span>
       <h3>Title</h3><p>One line.</p><span class="go">Read the episode</span></a></li></ul> */
.eplist{border-top:1px solid var(--line)}
.eplist > li{border-bottom:1px solid var(--line)}
.eplist > li > a{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;column-gap:var(--s8);row-gap:var(--s2);
  align-items:baseline;padding-block:var(--s6)}
.eplist .meta{grid-column:1;grid-row:1;font-family:var(--font-head);font-weight:600;font-size:var(--fs-s);line-height:1.4;color:var(--muted)}
.eplist h3{grid-column:2;grid-row:1;font-size:var(--fs-h4);line-height:1.2;letter-spacing:-.02em;transition:color var(--ease)}
.eplist p{grid-column:2;max-width:60ch}
.eplist .go{grid-column:3;grid-row:1;font-family:var(--font-head);font-weight:700;font-size:var(--fs-s);color:var(--link);white-space:nowrap}
.eplist a:hover h3{color:var(--link)}
.eplist a:hover .go{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sec-head + .applist,.sec-head + .eplist{margin-top:var(--s8)}

/* static cover grid: every show as a cover tile, in place of a marquee. No motion, no fades.
     <ul class="covergrid" role="list"><li class="cover"><img ...></li> ... </ul> */
.covergrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);margin-top:var(--s9)}
.covergrid .cover{width:auto;height:auto;aspect-ratio:1/1}
.covergrid .cover.ini{font-size:var(--fs-h4)}

/* stat row on navy: put a .statrow straight into a .band-dark (the band re-points the tokens).
   .c3    three figures
   .lone  the row is the band's only content: no top rule or margin, the first figure on the left edge */
.statrow.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.statrow.lone{margin-top:0;border-top:0}
.statrow.lone li{padding-block:0}
.statrow.lone li:first-child{padding-left:0}

/* closing band with two doors (content pages): one solid button, one outlined */
.closing .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s4)}

/* ---------- 9c. Page components, promoted ----------
   Built inline on the wave A/B pages under "promote to site-v2" and moved here in the
   restyle cleanup (PR 10), unchanged in rendering. Their phone rules are in section 10
   under "9c". Two of them are podcast-family devices (Chris): the record band with
   .dots20 and the myths band stay on /podcast-guesting, /podcast-workshop and the replay,
   so the dot and the myths never become wallpaper. The sticky phone bar (.mbar) is NOT
   here on purpose: it is a /podcast-guesting device and must not spread. */

/* hero wrapper: breathing room between the stamped header and an offer hero.
     <div class="wrap hero-wrap"><div class="hero-photo">..</div><div class="strip">..</div></div> */
.hero-wrap{padding-top:var(--s5)}

/* hero A, a short note beside the hero button ("Free. Instant access.", a price line) */
.hero-photo .note{font-size:var(--fs-s);color:var(--text)}

/* hero A-split: a portrait photo in the right 40% of the navy card, no gradient.
   Phones: the photo first, as a short band, then the copy. The default leaves room
   at the bottom for the .strip that overlaps the card.
     <div class="hero-photo split"><img class="ph" ..><div class="in">..</div></div>
   .shot  the photo sits in a <picture class="shot"> (a portrait crop from 961px):
          it fills the column, and the column sets the height (560px)
   .solo  no .strip under the card: even padding top and bottom
   The page sets the crop: object-position on the .ph, and its phone band height
   (260px under 961px, 180px under 561px unless the page says otherwise). */
.hero-photo.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:stretch;min-height:640px}
.hero-photo.split::before{display:none}
.hero-photo.split > .ph{display:block;grid-column:2;grid-row:1;width:100%;height:0;min-height:100%;object-fit:cover}
.hero-photo.split .in{grid-column:1;grid-row:1;align-self:center;max-width:none;padding:56px 56px 132px 64px;gap:20px}
.hero-photo.split h1{font-size:clamp(44px,4.9vw,70px)}
.hero-photo.split .shot{grid-column:2;grid-row:1;position:relative;min-height:560px}
.hero-photo.split .shot .ph{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo.split.solo{min-height:0}
.hero-photo.split.solo .in{padding:64px 56px 64px 64px;gap:22px}

/* hero A, mirrored: for a photo whose people sit on the left. The copy sits right and
   the gradient runs right to left, so no face is under it (from 961px; the rules are in
   section 10). Phones: photo first, then the copy, as hero A.
     <div class="hero-photo flip" style="--hero-img:url(..)"> */
.hero-photo.flip h1{font-size:clamp(40px,3.9vw,54px);line-height:1}

/* proof figures in the hero strip: a figure and one line each, hairline-divided.
     <div class="strip"><ul class="figs"><li><b>70+</b><span>One line</span></li>..</ul></div>
   Three by default. .c4  four figures (two by two under 961px) */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.figs li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);min-width:0}
.figs li + li{border-left:1px solid var(--line)}
.figs b{font-family:var(--font-head);font-weight:800;font-size:var(--fs-num);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.figs span{font-size:var(--fs-s);line-height:1.4;color:var(--text)}
.figs.c4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.figs.c4 b{font-size:clamp(26px,2.75vw,36px);white-space:nowrap}

/* hero B-split: type on white on the left, a player or a card on the right.
     <section class="hero-b split"><div class="wrap"><div class="copy">..</div><div class="embed"><iframe ..></div></div></section>
   .embed      a player (Spotify, video): its own card fills it, 6px corners
   .with-card  a lead magnet: the opt-in card (.card-col) runs the full height on the
               right, beside the copy and a list under it (.learn). Phones: the copy,
               then the card (so the form stays near the top), then the list. */
.hero-b.split .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s9);align-items:center}
.hero-b.split .copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.hero-b.split h1{max-width:14ch}
.hero-b.split .embed{border-radius:var(--r);overflow:hidden}
.hero-b.split .embed iframe{display:block;width:100%;border:0}
.hero-b.split.with-card .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;grid-template-areas:"copy card" "learn card";
  column-gap:var(--s11);row-gap:var(--s7);align-items:start}
.hero-b.split.with-card .copy{grid-area:copy}
.hero-b.split.with-card .learn{grid-area:learn}
.hero-b.split.with-card .card-col{grid-area:card}
.hero-b.split.with-card h1{max-width:12ch}

/* opt-in card: visible field labels (the card hides bare labels; a .field wrapper shows them) */
.optin .field label{position:static;display:block;width:auto;height:auto;overflow:visible;clip:auto;margin-bottom:6px;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-s);color:var(--ink)}
/* opt-in card, stacked in a column: photo on top, then the form (.body). The form inside
   is the lead form as it was, so its own classes are styled here: .field, button.submit
   (the .btn look, for a form whose button can't take .btn) and .micro (the fine print). */
.optin.stack{max-width:none;margin:0;grid-template-columns:minmax(0,1fr)}
.optin.stack .photo{min-height:0;aspect-ratio:3/2;background-position:50% 30%}
.optin.stack .body{display:flex;flex-direction:column;gap:6px;padding:var(--s6) var(--s6) 28px}
.optin.stack h2{font-size:var(--fs-h4);line-height:1.2}
.optin.stack .sub{font-size:15px;color:var(--text)} /* parity with .optin .sub */
.optin.stack form{padding:0;margin-top:var(--s4);gap:12px}
.optin.stack input{width:100%}
.optin button.submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:6px;padding:18px 24px;border:0;border-radius:var(--r);
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-head);font-weight:700;font-size:var(--fs-b);line-height:20px;letter-spacing:-.005em;
  text-align:center;cursor:pointer;transition:background-color var(--ease)}
.optin button.submit:hover{background:var(--accent-hover)}
.optin.stack .micro{margin-top:2px;font-size:13px;color:var(--muted);text-align:center} /* parity with .optin .fine */

/* form fields: a two-column grid of 48px fields under a 56px button. --field border
   (3:1 on white), 16px text (no iOS focus zoom), a drawn select chevron. One column
   under 561px. The form markup is never changed: forms.js swaps in its success message.
     <form class="form" data-lead=".."><input class="full" ..><input ..><select class="full" ..>..
   .full    a field that spans both columns
   .radio   a group of choices: hairline rows, a round radio with the blue dot
   form.ap  is /consulting's application. Its class is part of the frozen form markup,
            so it is listed beside .form rather than renamed. */
.form,form.ap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form .full,.form > p[style],form.ap .full,form.ap > p[style]{grid-column:1/-1}
.form input:not([type=radio]),.form select,.form textarea,form.ap input,form.ap select,form.ap textarea{width:100%;min-width:0;margin:0;font-size:var(--fs-b);line-height:20px;padding:13px 16px;
  border:1px solid var(--field);border-radius:var(--r);background:#ffffff;color:var(--ink)}
.form select,form.ap select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230c1a24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.form select:invalid,form.ap select:invalid{color:var(--muted)}
.form option,form.ap option{color:var(--ink)}
.form input::placeholder,.form textarea::placeholder,form.ap input::placeholder,form.ap textarea::placeholder{color:var(--muted);opacity:1}
.form textarea,form.ap textarea{min-height:96px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus,form.ap input:focus,form.ap select:focus,form.ap textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.radio{grid-column:1/-1;display:flex;flex-direction:column;margin-top:4px;border-top:1px solid var(--line)}
.radio label{display:flex;align-items:center;gap:12px;min-height:52px;padding-block:10px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--ink);cursor:pointer}
.radio input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;flex:none;width:20px;height:20px;margin:0;
  border:1.5px solid var(--field);border-radius:50%;background:#ffffff;cursor:pointer}
.radio input::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--ease)}
.radio input:checked{border-color:var(--ink)}
.radio input:checked::before{transform:scale(1)}
.form .btn,form.ap .btn{width:100%;margin-top:var(--s2)}

/* record band (podcast family only): the money figure as the hero of a navy band,
   with the 20-dot graphic (.h = the share in accent; the other dots are white at 28%).
     <section class="section band-dark record"><div class="wrap rec-top">
       <div class="t"><h2>..</h2><p>.. <span class="hl">..</span> <span class="hl h">70%</span></p></div>
       <div class="fig-block"><b class="fig">$386,000</b><span class="fig-cap">..</span><div class="dots20" aria-hidden="true"><i class="h"></i>..</div></div>
     </div></section> */
.rec-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.rec-top .t{display:flex;flex-direction:column;gap:20px}
.rec-top .t p{font-size:var(--fs-l)}
.rec-top .hl{color:var(--ink);font-weight:500}
.rec-top .hl.h{color:var(--accent)}
.fig-block{display:flex;flex-direction:column;min-width:0}
.fig-block .fig{font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:clamp(56px,7vw,96px);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.fig-cap{margin-top:14px;font-size:var(--fs-b);color:var(--text)}
.dots20{display:grid;grid-template-columns:repeat(20,12px);gap:8px;margin-top:28px}
.dots20 i{display:block;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.28)}
.dots20 .h{background:var(--accent)}

/* myths band (podcast family only): the dismissed beliefs as an .mlist on the left,
   the answer on the right, closed by one line under a hairline (b in the line = blue).
     <section class="section tight band-soft myths"><div class="wrap">
       <div class="t"><h2 class="mh">..</h2><ul class="mlist">..</ul></div>
       <div class="a"><h3>..</h3><p>..</p><p class="close">..</p></div>
     </div></section> */
.myths .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.myths .t,.myths .a{display:flex;flex-direction:column;gap:20px}
.myths .mh,.myths .a h3{font-size:clamp(26px,2.6vw,30px);line-height:1.15}
.myths .a p{font-size:var(--fs-l)}
.myths .a p.close{font-family:var(--font-head);font-weight:600;color:var(--ink);line-height:1.45;padding-top:18px;border-top:1px solid var(--line)}
.myths .a p.close b{color:var(--link)}

/* text-only quotes (no photo): a hairline pair, the quote as the headline, the name under it.
     <ul class="said"><li><blockquote>..</blockquote><p class="by"><b>Name</b> &middot; Company</p></li>..</ul> */
.said{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s8);border-block:1px solid var(--line)}
.said li{display:flex;flex-direction:column;gap:var(--s4);min-width:0;padding:var(--s7) var(--s8) var(--s7) 0}
.said li + li{border-left:1px solid var(--line);padding-inline:var(--s8) 0}
.said blockquote{flex:1;font-family:var(--font-head);font-weight:600;font-size:var(--fs-h4);line-height:1.3;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.said .by{font-size:var(--fs-s);line-height:1.4;color:var(--muted)}
.said .by b{font-family:var(--font-head);font-weight:700;font-size:var(--fs-b);color:var(--ink)}

/* ---------- 10. Responsive ---------- */
@media (min-width:761px){
  .site-nav{position:sticky;top:env(safe-area-inset-top,0px);backdrop-filter:blur(8px)}
  html:has(> body > .site-nav){scroll-padding-top:96px}   /* anchor targets clear the sticky header */
}
@media (min-width:961px){
  /* 9c hero A, mirrored: the copy right, the gradient from the right edge in px, so the
     500px copy column always sits on the solid part */
  .hero-photo.flip{justify-content:flex-end;background-position:left center;min-height:580px}
  .hero-photo.flip::before{background:linear-gradient(270deg,rgba(5,14,21,.95) 0,rgba(5,14,21,.9) 530px,rgba(5,14,21,.35) 660px,rgba(5,14,21,0) 780px)}
  .hero-photo.flip .in{max-width:500px;gap:20px;padding:56px 56px 136px 0}
}
@media (max-width:960px){
  :root{--sec:var(--s11);--sec-tight:var(--s10)}
  /* header: logo, the CTA (if any) and "Menu"; links move into a full-height sheet.
     Open, the header sticks to the top (it keeps its place in the flow, so nothing shifts)
     and the sheet fills the rest of the screen, so the page never shows under it. */
  .site-nav .menu{display:inline-flex;align-items:center}
  .site-nav.open{position:sticky;top:0;z-index:60;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-nav .links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;
    height:calc(100vh - 100% - 1px);height:calc(100dvh - 100% - 1px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s2) var(--gutter) calc(var(--s8) + env(safe-area-inset-bottom,0px));background:var(--bg);font-size:var(--fs-l)}
  .site-nav.open .links{display:flex}
  .site-nav .links a{flex:none;min-height:56px;border-bottom:1px solid var(--line)}
  .site-foot .cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-foot .cols .brand{grid-column:1/-1}
  .hero-photo{display:block;min-height:0;background:var(--panel)}
  .hero-photo::before{display:none}
  .hero-photo .ph{display:block;width:100%;height:260px;aspect-ratio:auto;object-fit:cover;object-position:70% 35%}
  .hero-photo .in{padding:36px 28px 128px;max-width:none}
  .strip{margin-inline:16px;padding:24px 20px 28px}
  .outs b{font-size:var(--fs-b)}
  .hero-b{padding-block:var(--s9) var(--s8)}
  .sec-head.split,.founder,.faqgrid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .faqgrid > .copy{position:static}
  .hgrid > li:nth-child(n){padding:30px 22px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .hgrid > li:nth-child(2n+1){border-left:0;padding-left:0}
  .hgrid > li:nth-child(2n){padding-right:0}
  .hgrid > li:nth-child(-n+2){border-top:0}
  .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hgrid.c3{grid-template-columns:minmax(0,1fr)}
  .hgrid.c3 > li:nth-child(n){padding:var(--s6) 0;border-left:0;border-top:1px solid var(--line)}
  .hgrid.c3 > li:first-child{border-top:0}
  .founder > img{max-width:520px}
  .spoke{margin-top:var(--s9)}
  .logos{--s:.86;column-gap:var(--s3)}
  .logo-tile span{max-width:none;font-size:12.5px} /* parity */
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statrow li{padding:28px 20px}
  .statrow li:nth-child(3){border-left:0}
  .statrow li:nth-child(n+3){border-top:1px solid var(--line)}
  .pillars{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
  .pillars > li{grid-row:auto;display:flex;flex-direction:column;gap:14px}
  .pillars .label{align-self:auto}
  .tgrid{grid-template-columns:minmax(0,1fr)}
  .seq{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .optin{grid-template-columns:minmax(0,1fr)}
  .optin .photo{min-height:260px}
  /* 9b content components */
  .statrow.c3 li:nth-child(3){border-left:1px solid var(--line)}
  .statrow.c3 li:nth-child(n+3){border-top:0}
  .eplist > li > a{grid-template-columns:minmax(0,160px) minmax(0,1fr) auto;column-gap:var(--s6)}
  .covergrid{grid-template-columns:repeat(10,minmax(0,1fr))}
  /* 9c page components */
  .hero-photo.split{display:block;min-height:0}
  .hero-photo.split > .ph{height:260px;min-height:0}
  .hero-photo.split .in{padding:32px 28px 128px}
  .hero-photo.split .shot{display:block;min-height:0}
  .hero-photo.split .shot .ph{position:static;height:260px}
  .hero-photo.split.solo .in{padding:32px 28px 40px}
  .figs b{font-size:36px}
  .figs.c4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  .figs.c4 li{padding-block:var(--s4)}
  .figs.c4 li:nth-child(3){border-left:0}
  .figs.c4 li:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-b.split .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .hero-b.split.with-card .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"copy" "card" "learn";row-gap:var(--s7)}
  .hero-b.split.with-card .card-col{max-width:560px}
  .rec-top,.myths .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
}
@media (max-width:760px){
  .logos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s5)}
  .outs{grid-template-columns:minmax(0,1fr);gap:0}
  .outs li{justify-content:flex-start;padding-block:var(--s3)}
  .outs li + li{border-left:0;border-top:1px solid var(--line)}
  .site-foot .cols a:not(.logo){min-height:44px}
  /* 9b content components: one column */
  .applist.c2{grid-template-columns:minmax(0,1fr)}
  .applist.c2 > li:nth-child(2){border-top:0}
  .eplist > li > a{grid-template-columns:minmax(0,1fr);padding-block:var(--s5)}
  .eplist .meta,.eplist h3,.eplist p,.eplist .go{grid-column:1;grid-row:auto}
  .eplist h3{font-size:var(--fs-h3);line-height:1.3}
  .covergrid{grid-template-columns:repeat(8,minmax(0,1fr))}
  /* 9c page components */
  .said{grid-template-columns:minmax(0,1fr)}
  .said li{padding:var(--s6) 0}
  .said li + li{border-left:0;border-top:1px solid var(--line);padding-inline:0}
  .said blockquote{font-size:var(--fs-h3)}
}
@media (max-width:560px){
  :root{--gutter:20px}
  /* logo + button + Menu fit a 360px phone: no tagline, 14px header button (as the live phone header) */
  .site-nav .wrap{gap:var(--s2);min-height:72px}
  .site-nav.with-cta .logo small{display:none}
  .site-nav .btn{white-space:nowrap;padding-inline:14px;font-size:var(--fs-s)}
  .site-nav .menu{padding:0}
  .site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:var(--s8)}
  .site-foot .legal{flex-direction:column;align-items:flex-start}
  .strip{margin-inline:12px;padding:22px 14px 24px}
  .logos{--s:.82;column-gap:10px}
  .logo-tile{gap:10px}
  .logo-tile span{font-size:11.5px} /* parity */
  .seen-stack img{width:38px;height:38px;border-radius:8px}
  .hero-photo .ph{height:180px;object-position:74% 28%}
  .hero-photo .in{gap:var(--s4);padding:28px 20px 120px}
  .hero-photo p{font-size:var(--fs-b)}
  .hero-photo .btns,.hero-b .btns{flex-direction:column;align-items:stretch;gap:2px}
  .act{justify-content:center}
  .btn{width:100%;padding-inline:20px}
  .site-nav .btn{width:auto}
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .hgrid > li:nth-child(n){padding:28px 0;border-left:0;border-top:1px solid var(--line)}
  .hgrid > li:first-child{border-top:0}
  .mlist li{font-size:17px} /* parity */
  .lines li{font-size:var(--fs-b)}
  .founder > img{aspect-ratio:1/1;object-position:50% 12%;max-width:none}
  .statrow b{font-size:40px}
  .statrow li{padding:24px 14px}
  .pillars > li{padding:28px 20px}
  .tcard{padding:22px 20px 12px}
  .tcard .result{font-size:22px} /* parity */
  .optin form{padding:32px 22px}
  .prose p,.prose li{font-size:var(--fs-b)}
  /* 9b content components */
  .applist > li > a{column-gap:var(--s4)}
  .statrow.c3{grid-template-columns:minmax(0,1fr)}
  .statrow.c3 li:nth-child(n){flex-direction:row;align-items:baseline;gap:var(--s4);padding:var(--s4) 0;border-left:0}
  .statrow.c3 li:nth-child(n+2){border-top:1px solid var(--line)}
  .statrow.c3 b{flex:none;min-width:140px}
  .statrow.lone li:first-child{padding-top:0}
  .statrow.lone li:last-child{padding-bottom:0}
  .closing .btns{flex-direction:column;align-items:stretch;width:100%}
  .covergrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
  .covergrid .cover.ini{font-size:var(--fs-b)}
  /* 9c page components */
  .hero-wrap{padding-top:var(--s3)}
  .hero-photo .btns .note{text-align:center}
  .hero-photo.split > .ph,.hero-photo.split .shot .ph{height:180px}
  .hero-photo.split .in{padding:22px 20px 120px}
  .hero-photo.split.solo .in{gap:16px;padding:24px 20px 28px}
  .hero-photo.flip h1{font-size:36px;line-height:1.02}
  .figs{grid-template-columns:minmax(0,1fr);gap:0;text-align:left}
  .figs.c4{grid-template-columns:minmax(0,1fr)}
  .figs li,.figs.c4 li{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:var(--s4);padding-block:var(--s3)}
  .figs li + li{border-left:0;border-top:1px solid var(--line)}
  .figs b{flex:none;min-width:116px;font-size:28px}
  .figs.c4 b{min-width:150px;font-size:28px}
  .hero-b.split.with-card .wrap{row-gap:var(--s6)}
  .hero-b.split.with-card .copy{gap:var(--s4)}
  .optin.stack .photo{aspect-ratio:auto;height:132px;background-position:50% 26%}
  .optin.stack .body{padding:var(--s5) 20px}
  .form,form.ap{grid-template-columns:minmax(0,1fr)}
  .fig-block .fig{font-size:60px}
  .dots20{grid-template-columns:repeat(20,10px);gap:6px}
  .dots20 i{width:10px;height:10px}
}

/* ---------- 11. Compat (small) ----------
   forms.js (untouched by contract) writes its success message with
   style="font-family:var(--display);color:var(--accent)": blue text on white
   fails AA. These two lines keep it legible on v2 pages. */
:root{--display:var(--font-head)}
form[data-lead] > p[style]{color:var(--ink)!important}

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