/* theme.css — the one look for salesengineer101.com, modelled on notion.com.
   Light is white, dark is Notion dark. The page picks the system scheme unless
   <html data-theme="light|dark"> says otherwise (theme.js sets that from the
   header toggle and remembers it in localStorage "se-theme"). No build step.
   Motion: sections carry class "reveal" and fade up when they scroll into
   view (theme.js); the hero rises on load. Reduced-motion turns it all off. */

:root{
  color-scheme: light;
  --bg:#FFFFFF;            /* page */
  --bg-2:#F6F5F4;          /* soft section / card fill */
  --bg-3:#EFEFED;          /* secondary button, hover fill */
  --ink:#191919;           /* headlines, primary text */
  --ink-2:#37352F;         /* body text */
  --ink-3:#787774;         /* secondary text, captions */
  --line:#E9E9E7;          /* hairlines */
  --line-2:#D3D1CB;        /* stronger lines, inputs */
  --blue:#0075DE;          /* the one accent (links, primary button) */
  --blue-ink:#FFFFFF;
  --blue-soft:#E8F1FB;
  --amber:#B8730D;         /* "variable / at risk" */
  --amber-soft:#FBF0DC;
  --violet:#6940A5;        /* equity */
  --violet-soft:#EEE8F7;
  --red:#C4423B;
  --green:#2B7F5D;
  --green-soft:#E3F1EA;
  --radius:8px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(15,15,15,.06), 0 8px 24px -12px rgba(15,15,15,.14);
  --shadow-lg:0 2px 4px rgba(15,15,15,.05), 0 24px 48px -20px rgba(15,15,15,.22);
  --glow-a:rgba(0,117,222,.16);
  --glow-b:rgba(105,64,165,.14);
  --glow-c:rgba(184,115,13,.12);
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* the splash: one deep cobalt block per page, and citrus ONLY on the main
     "do it" buttons (Book a mentor call, Map your path) — never on numbers or words */
  --cobalt:#0B3D91;        /* the block */
  --cobalt-2:#164CA8;      /* cards sitting on the block */
  --on-cobalt:#FFFFFF;     /* text on the block */
  --on-cobalt-2:rgba(255,255,255,.72);
  --on-cobalt-line:rgba(255,255,255,.22);
  --sky:#A9CBFF;           /* the accent word on the block */
  --citrus:#D7F25C; --citrus-ink:#172000; --citrus-line:#B9D63F;
  /* the comp split, re-tinted to read on the block */
  --blk-base:#6FA8FF; --blk-var:#F2B544; --blk-eq:#C3A8F5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#191919; --bg-2:#202020; --bg-3:#2C2C2C;
    --ink:#E8E8E8; --ink-2:#D4D4D4; --ink-3:#9B9B9B;
    --line:#333333; --line-2:#474747;
    --blue:#529CCA; --blue-ink:#0F1418; --blue-soft:#1E2D3A;
    --amber:#E0A94F; --amber-soft:#3A2E17;
    --violet:#B39DDB; --violet-soft:#2C2540;
    --red:#EB7A72; --green:#5FB58A; --green-soft:#1C3328;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.8);
    --glow-a:rgba(82,156,202,.22); --glow-b:rgba(179,157,219,.18); --glow-c:rgba(224,169,79,.14);
    --cobalt:#0E2F6E; --cobalt-2:#183E86; --citrus-line:#D7F25C;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#191919; --bg-2:#202020; --bg-3:#2C2C2C;
  --ink:#E8E8E8; --ink-2:#D4D4D4; --ink-3:#9B9B9B;
  --line:#333333; --line-2:#474747;
  --blue:#529CCA; --blue-ink:#0F1418; --blue-soft:#1E2D3A;
  --amber:#E0A94F; --amber-soft:#3A2E17;
  --violet:#B39DDB; --violet-soft:#2C2540;
  --red:#EB7A72; --green:#5FB58A; --green-soft:#1C3328;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.8);
  --glow-a:rgba(82,156,202,.22); --glow-b:rgba(179,157,219,.18); --glow-c:rgba(224,169,79,.14);
  --cobalt:#0E2F6E; --cobalt-2:#183E86; --citrus-line:#D7F25C;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
[hidden]{display:none !important}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- type: big, tight, one accent word ---------- */
h1,h2,h3{color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.02em}
h1{font-size:clamp(40px,6.4vw,72px); line-height:1.02; font-weight:800; letter-spacing:-.035em}
h2{font-size:clamp(28px,4vw,44px); line-height:1.08; font-weight:800; letter-spacing:-.03em}
h3{font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.01em}
h1 em, h2 em{font-style:normal; color:var(--blue)}
h1 em.amber, h2 em.amber{color:var(--amber)}
h1 em.violet, h2 em.violet{color:var(--violet)}
p{margin:0}
.lede{font-size:clamp(18px,1.9vw,22px); line-height:1.4; color:var(--ink-3); max-width:44ch; text-wrap:pretty}
.eyebrow{font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; text-transform:none; margin:0}
.eyebrow.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2); font-size:13px}
.eyebrow.pill::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.muted{color:var(--ink-3)}
.small{font-size:13px; color:var(--ink-3)}
b,strong{color:var(--ink); font-weight:600}

/* ---------- header ---------- */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.nav.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(15,15,15,.25)}
.nav .wrap{display:flex; align-items:center; gap:14px; height:60px}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:700; font-size:16px; letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .mark{width:28px; height:28px; border-radius:8px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:12px; font-weight:800; letter-spacing:0; padding:0}
.nav-links{display:flex; align-items:center; gap:2px; margin-left:8px}
.nav-links a{color:var(--ink-2); font-size:14px; font-weight:500; padding:7px 11px; border-radius:7px; white-space:nowrap; transition:background .15s var(--ease)}
.nav-links a:hover{background:var(--bg-3); text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--ink); background:var(--bg-3)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.theme-toggle{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:transparent;
  color:var(--ink-2); cursor:pointer; display:grid; place-items:center; padding:0; transition:background .15s var(--ease), transform .15s var(--ease);
}
.theme-toggle:hover{background:var(--bg-3); transform:rotate(-12deg)}
.theme-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1;
  padding:13px 18px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:var(--blue); color:var(--blue-ink); border-color:var(--blue); box-shadow:0 1px 2px rgba(0,117,222,.25)}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 8px 20px -10px rgba(0,117,222,.65)}
.btn-secondary{background:var(--bg-3); color:var(--ink); border-color:var(--bg-3)}
.btn-secondary:hover{background:var(--line)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-3)}
.btn-lg{font-size:17px; padding:16px 24px; border-radius:10px}
.btn-sm{font-size:14px; padding:9px 13px; border-radius:7px}
.btn:disabled{opacity:.5; cursor:default; transform:none}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.btn .arr{display:inline-block; transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
@media (max-width:719.98px){ .btn-row .btn{flex:1 1 auto} }

/* ---------- chips / segmented choices ---------- */
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.seg label, .seg button{
  font-family:inherit; font-size:14px; font-weight:500; line-height:1;
  padding:10px 14px; border-radius:8px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink-2); cursor:pointer; white-space:nowrap; user-select:none;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.seg label:hover, .seg button:hover{background:var(--bg-3); border-color:var(--line-2)}
.seg label:active, .seg button:active{transform:scale(.97)}
.seg input:checked + label, .seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink); box-shadow:0 4px 14px -8px rgba(15,15,15,.6)}
.seg input:focus-visible + label{outline:2px solid var(--blue); outline-offset:2px}
.seg .ls{display:none}
.group{border:0; padding:0; margin:0; min-width:0}
.group legend{font-size:13px; font-weight:600; color:var(--ink-3); padding:0; margin-bottom:8px}
@media (max-width:719.98px){
  .seg.scroll{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
  .seg.scroll::-webkit-scrollbar{display:none}
  .seg.bar{flex-wrap:nowrap; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--bg)}
  .seg.bar label{flex:1 1 0; min-width:0; text-align:center; border:0; border-radius:0; padding:11px 2px; font-size:13px; overflow:hidden; text-overflow:ellipsis; box-shadow:none}
  .seg.bar label:nth-of-type(n+2){border-left:1px solid var(--line)}
  .seg.bar .lf{display:none}
  .seg.bar .ls{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* ---------- cards / panels ---------- */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px}
.card.soft{background:var(--bg-2); border-color:transparent}
.card.tint-blue{background:var(--blue-soft); border-color:transparent}
.card-link{display:flex; flex-direction:column; gap:10px; color:inherit; transition:border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)}
.card-link:hover{text-decoration:none; border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card-link .go{margin-top:auto; padding-top:12px; color:var(--blue); font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:6px}
.card-link .go .arr{transition:transform .2s var(--ease)}
.card-link:hover .go .arr{transform:translateX(4px)}
.card-link .tag{align-self:flex-start}
.tag{display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:4px 9px; border-radius:6px; background:var(--bg-3); color:var(--ink-2); white-space:nowrap}
.tag.blue{background:var(--blue-soft); color:var(--blue)}
.tag.amber{background:var(--amber-soft); color:var(--amber)}
.tag.green{background:var(--green-soft); color:var(--green)}
.tag.violet{background:var(--violet-soft); color:var(--violet)}
.figure{font-size:clamp(48px,7vw,80px); font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; margin:8px 0 0; transition:color .3s var(--ease)}
.figure.pop{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(1)} 35%{transform:scale(1.035); color:var(--blue)} 100%{transform:scale(1)}}

/* ---------- big numbers (stats strip) ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.stat{padding:22px 24px; border-radius:var(--radius-lg); background:var(--bg-2); display:flex; flex-direction:column; gap:6px; min-width:0}
.stat b{font-size:clamp(40px,5.4vw,64px); font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums}
.stat.amber b{color:var(--amber)} .stat.violet b{color:var(--violet)}
.stat span{font-size:15px; color:var(--ink-2); line-height:1.35}
@media (max-width:719.98px){
  .stats{grid-template-columns:1fr 1fr; gap:10px}
  .stat{padding:16px}
  .stat:first-child{grid-column:1 / -1}
}

/* ---------- expanders ---------- */
details.x{border-top:1px solid var(--line)}
details.x:last-of-type{border-bottom:1px solid var(--line)}
details.x > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 0; font-weight:600; color:var(--ink); font-size:17px; transition:color .15s var(--ease);
}
details.x > summary:hover{color:var(--blue)}
details.x > summary::-webkit-details-marker{display:none}
details.x > summary::after{content:""; width:8px; height:8px; border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3); transform:rotate(45deg); flex:0 0 auto; transition:transform .2s var(--ease); margin-right:4px}
details.x[open] > summary::after{transform:rotate(-135deg)}
details.x > .x-body{padding:0 0 20px; color:var(--ink-2); animation:fade-in .3s var(--ease)}
details.x > .x-body p{margin:0 0 12px}
details.x > .x-body p:last-child{margin-bottom:0}
@keyframes fade-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; margin:14px 0; border:1px solid var(--line); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-size:12px; font-weight:600; color:var(--ink-3); background:var(--bg-2)}
td{color:var(--ink-2)}
td.key{font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- inputs ---------- */
.input{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:10px 12px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.money{display:flex; align-items:center; gap:4px; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius); padding:0 12px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.money:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.money > span{font-size:18px; font-weight:600; color:var(--ink-3)}
.money input{border:0; background:transparent; outline:none; width:100%; min-width:0; padding:12px 0; font-family:inherit; font-size:18px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.label{font-size:13px; font-weight:600; color:var(--ink-3)}
.hint{font-size:13px; color:var(--ink-3); margin:0}
.err{font-size:13px; color:var(--red); min-height:1em; margin:0}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; background:transparent; margin:10px 0 4px; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px; background:var(--line-2); border-radius:2px}
input[type=range]::-moz-range-track{height:4px; background:var(--line-2); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--blue); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--line-2); margin-top:-8px}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--blue); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--line-2)}

/* ---------- sections, bands, footer ---------- */
.sec{padding:48px 0}
.sec.tight{padding:24px 0}
.hero{position:relative; padding-top:64px; padding-bottom:28px; display:flex; flex-direction:column; gap:16px}
.hero::before{ /* the colour pop behind every hero */
  content:""; position:absolute; inset:-120px 0 auto; height:520px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 55% at 18% 30%, var(--glow-a), transparent 70%),
    radial-gradient(32% 50% at 82% 20%, var(--glow-b), transparent 70%),
    radial-gradient(28% 40% at 55% 85%, var(--glow-c), transparent 70%);
  filter:blur(28px); opacity:.9; clip-path:inset(0 0 0 0);
}
.band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2)}
.band.blue{background:color-mix(in srgb, var(--blue-soft) 60%, var(--bg)); border-color:transparent}
.band.violet{background:color-mix(in srgb, var(--violet-soft) 60%, var(--bg)); border-color:transparent}
footer{border-top:1px solid var(--line); margin-top:64px; padding:28px 0 48px}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-3)}
@media (max-width:719.98px){
  .wrap{padding:0 16px}
  .nav-links{display:none}          /* on phones the footer carries the page links */
  .hero{padding-top:36px; padding-bottom:16px; gap:12px}
  .hero::before{inset:-80px 0 auto; height:380px}
  .sec{padding:32px 0}
  .card{padding:18px}
  footer{margin-top:40px}
  .lede{font-size:17px}
}

/* ---------- motion: rise on load, reveal on scroll ---------- */
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
html.js .hero > *{animation:rise .7s var(--ease) both}
html.js .hero > *:nth-child(2){animation-delay:.08s}
html.js .hero > *:nth-child(3){animation-delay:.16s}
html.js .hero > *:nth-child(4){animation-delay:.24s}
html.js .hero > *:nth-child(5){animation-delay:.32s}
html.js .reveal:not(.done){opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .reveal.in:not(.done){opacity:1; transform:none}
html.js .stagger:not(.done) > *{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .stagger.in:not(.done) > *{opacity:1; transform:none}
html.js .stagger.in:not(.done) > *:nth-child(2){transition-delay:.1s}
html.js .stagger.in:not(.done) > *:nth-child(3){transition-delay:.2s}
html.js .stagger.in:not(.done) > *:nth-child(4){transition-delay:.3s}
html.js .stagger.in:not(.done) > *:nth-child(5){transition-delay:.4s}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms !important; animation-duration:.001ms !important; animation-delay:0s !important; transition-delay:0s !important}
  html.js .reveal:not(.done), html.js .stagger:not(.done) > *{opacity:1; transform:none}
}

/* ---------- hierarchy pass: two-tone heads, the cobalt block, the citrus button ---------- */
/* Two-tone heading (Linear): the first half reads, the <span class="dim"> second half is quieter. */
.two{font-size:clamp(26px,3.4vw,40px); line-height:1.15; font-weight:700; letter-spacing:-.025em; max-width:26ch}
.two .dim{color:var(--ink-3)}

/* The main "do it" button. Citrus is reserved for this: Book a mentor call, Map your path. */
.btn-go{background:var(--citrus); color:var(--citrus-ink); border-color:var(--citrus-line); font-weight:700}
.btn-go:hover{filter:brightness(1.04); box-shadow:0 10px 24px -12px rgba(120,150,0,.7)}
/* The quiet partner of a citrus button when both sit on the cobalt block. */
.btn-inv{background:transparent; color:var(--on-cobalt); border-color:var(--on-cobalt-line)}
.btn-inv:hover{background:rgba(255,255,255,.08); border-color:var(--on-cobalt-2)}

/* Two buttons side by side, half width each on phones (Clay); one button runs full width. */
.btn-pair{display:grid; grid-template-columns:auto auto; justify-content:start; gap:10px}
.btn-pair .btn{min-height:48px}
@media (max-width:719.98px){
  .btn-pair{grid-template-columns:1fr 1fr; justify-content:stretch; width:100%}
  .btn-pair .btn{white-space:normal; text-align:center; line-height:1.2; padding-left:10px; padding-right:10px}
  .btn-pair .btn:only-child{grid-column:1 / -1}
}

/* The cobalt block: one per page. Headings, text and links switch to the light set. */
.blk{background:var(--cobalt); color:var(--on-cobalt-2); border-color:transparent}
.blk h1, .blk h2, .blk h3, .blk b, .blk strong{color:var(--on-cobalt)}
.blk h1 em, .blk h2 em{color:var(--sky)}
.blk .dim, .blk .lede, .blk .muted, .blk .small, .blk .label, .blk .hint, .blk .panel-label, .blk .eyebrow{color:var(--on-cobalt-2)}
.blk a:not(.btn){color:var(--sky)}
.blk .tag{background:rgba(255,255,255,.14); color:var(--on-cobalt)}
.blk :focus-visible{outline-color:var(--citrus)}
.card.blk{border-color:transparent}
.blk .input, .blk .money{border-color:transparent}

/* Swipeable strip (Clay): one row that scrolls sideways on phones, a plain row on wide screens. */
.strip{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px}
@media (max-width:719.98px){
  .strip{grid-auto-columns:minmax(138px,max-content); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-right:-16px; padding-right:16px}   /* bleeds off the right edge only: a hint that it swipes */
  .strip::-webkit-scrollbar{display:none}
  .strip > *{scroll-snap-align:start}
}

/* "Show the thing" card: a real piece of the tool on top, the title + arrow underneath. */
.show{padding:0; overflow:hidden; display:flex; flex-direction:column}
.show .show-top{background:var(--bg-2); padding:18px; display:grid; gap:10px; flex:1}
.show .show-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; color:var(--ink); font-weight:700; font-size:17px; letter-spacing:-.01em}
.show .show-foot .arr{color:var(--blue); transition:transform .2s var(--ease)}
.show:hover .show-foot .arr{transform:translateX(4px)}

/* Meaning tags under a two-tone head ("Runs the demo"…). */
.says{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.says .tag{font-size:14px; padding:7px 12px; border-radius:999px}
/* The quiet second half of a two-tone head, when the heading text itself must stay exact. */
.two-sub{color:var(--ink-3); margin:0}
.blk .two-sub{color:var(--on-cobalt-2)}
/* A pair whose labels are long ("Book a mentor call" + "Get the 90-day plan") stacks on phones
   instead of breaking each label over two lines. */
@media (max-width:719.98px){
  .btn-pair.stack-sm{grid-template-columns:1fr}
}

/* The EU/UK cookie question (track.js adds it only there, only on the live site). */
.consent{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; max-width:420px; margin-left:auto; display:grid; gap:12px; padding:16px; border-radius:var(--radius-lg); background:var(--bg); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); font-size:14px; color:var(--ink-2)}
.consent p{margin:0}
.consent-btns{display:flex; gap:8px; justify-content:flex-end}