/* ============================================================
   SHADOW — one sheet, six skins
   Dials: DESIGN_VARIANCE 8 / MOTION_INTENSITY 6 / VISUAL_DENSITY 4
   Token contract on :root; every skin overrides the whole contract.
   Every colour in the build traces to a token here.
   ============================================================ */

:root {
  --ink: #0B0C0F;
  --surface: #12141A;
  --surface-2: #181B23;
  --line: #262A34;
  --line-strong: #3A404F;
  --text: #F2EFE8;
  --muted: #9AA0AE;
  --faint: #61697A;
  --hot: #E2685A;
  --warm: #D9A441;
  --accent: #E9E2CF;
  --accent-ink: #0B0C0F;
  --accent-rgb: 233, 226, 207;
  --accent-2: #6C7A9C;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -24px rgba(0,0,0,.8);
  --shadow-lift: 0 30px 70px -30px rgba(0,0,0,.75);
  --grain: .045;
  color-scheme: dark;
}

/* 01 · designer — "Gallery" (Swiss: off-white, hard grid, one signal red) */
html[data-theme="designer"] {
  --ink: #F3F3F3;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --line: #E3E3E3;
  --line-strong: #B8B8B8;
  --text: #111110;
  --muted: #5F5F58;
  --faint: #8E8E85;
  --accent: #D9432F;
  --accent-ink: #FFFFFF;
  --accent-rgb: 217, 67, 47;
  --accent-2: #16181A;
  --font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius: 0px;
  --radius-sm: 0px;
  --shadow-1: none;
  --shadow-lift: 0 24px 60px -34px rgba(17,17,16,.4);
  --grain: .012;
  color-scheme: light;
}
html[data-theme="designer"] h1.display { letter-spacing: -.045em; line-height: .98; }
html[data-theme="designer"] .island,
html[data-theme="designer"] .btn,
html[data-theme="designer"] .nav-book,
html[data-theme="designer"] .nav-who,
html[data-theme="designer"] .verdict,
html[data-theme="designer"] .countries a,
html[data-theme="designer"] .arrow { border-radius: 0; }
html[data-theme="designer"] .wordmark .mark { font-size: 17px; }
/* gallery: the readout drops its dashboard chrome and becomes a typographic index */
html[data-theme="designer"] .readout,
html[data-theme="designer"] .readout .rhead,
html[data-theme="designer"] .readout .rrow,
html[data-theme="designer"] .readout .rfoot { border-left: 0; border-right: 0; }
html[data-theme="designer"] .readout {
  border: 0; background: none; box-shadow: none;
}
html[data-theme="designer"] .readout .rhead {
  padding: 0 0 10px; border-bottom: 1px solid var(--line-strong);
}
html[data-theme="designer"] .readout .rhead .live { display: none; }
html[data-theme="designer"] .readout .rrow { padding: 12px 0; }
html[data-theme="designer"] .readout .rfoot { padding: 10px 0 0; border-top: 1px solid var(--line); }
html[data-theme="designer"] .rung,
html[data-theme="designer"] .module,
html[data-theme="designer"] .proofcard,
html[data-theme="designer"] .step,
html[data-theme="designer"] .offer,
html[data-theme="designer"] .readout,
html[data-theme="designer"] .demo,
html[data-theme="designer"] .demo-out { border-width: 1px; }

/* 02 · developer — "Terminal" (near-black, phosphor) */
html[data-theme="developer"] {
  --ink: #05090A;
  --surface: #0B1113;
  --surface-2: #0E1618;
  --line: #17302C;
  --line-strong: #1F4A40;
  --text: #D9F7E6;
  --muted: #6E9186;
  --faint: #456057;
  --accent: #35F0A0;
  --accent-ink: #03120C;
  --accent-rgb: 53, 240, 160;
  --accent-2: #4CC9F0;
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;
  --radius: 4px;
  --radius-sm: 3px;
  color-scheme: dark;
}

/* 03 · founder — "Launch" (ink, acid) */
html[data-theme="founder"] {
  --ink: #08090B;
  --surface: #101217;
  --surface-2: #161A21;
  --line: #23272F;
  --line-strong: #3A414D;
  --text: #F6F3EA;
  --muted: #9C9A92;
  --faint: #62625F;
  --accent: #C6FF3D;
  --accent-ink: #08090B;
  --accent-rgb: 198, 255, 61;
  --accent-2: #7B61FF;
  --font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  color-scheme: dark;
}

/* 04 · marketer — "Signal" (plum, coral) */
html[data-theme="marketer"] {
  --ink: #120A16;
  --surface: #1A1020;
  --surface-2: #21142A;
  --line: #35203F;
  --line-strong: #4C2E5C;
  --text: #FBEFF5;
  --muted: #B394A6;
  --faint: #7A627F;
  --accent: #FF5A3C;
  --accent-ink: #17040A;
  --accent-rgb: 255, 90, 60;
  --accent-2: #FFD166;
  --font-display: "Archivo Black", "Inter Tight", system-ui, sans-serif;
  --radius: 6px;
  --radius-sm: 4px;
  color-scheme: dark;
}
html[data-theme="marketer"] h1.display,
html[data-theme="marketer"] h2 { letter-spacing: -.045em; font-weight: 400; }
html[data-theme="marketer"] h1.display { font-size: clamp(33px, 4.6vw, 55px); line-height: 1.07; }
html[data-theme="marketer"] .kicker,
html[data-theme="marketer"] .label { letter-spacing: .2em; }

/* 05 · agency — "Studio" (cream, rust) */
html[data-theme="agency"] {
  --ink: #F5EFE3;
  --surface: #FFFDF7;
  --surface-2: #FBF5E9;
  --line: #DED4C0;
  --line-strong: #C4B79D;
  --text: #1B1814;
  --muted: #6B6355;
  --faint: #9A9081;
  --accent: #B33A25;
  --accent-ink: #FFF8F2;
  --accent-rgb: 179, 58, 37;
  --accent-2: #1F5C4B;
  --font-display: "Instrument Serif", "Newsreader", Georgia, serif;
  --radius: 2px;
  --radius-sm: 2px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px -28px rgba(60,44,20,.5);
  --shadow-lift: 0 30px 60px -30px rgba(60,44,20,.45);
  --grain: .028;
  color-scheme: light;
}
html[data-theme="agency"] h1.display,
html[data-theme="agency"] h2 { letter-spacing: -.012em; font-weight: 400; }

/* 06 · business — "Control" (slate, blue) */
html[data-theme="business"] {
  --ink: #F2F5FA;
  --surface: #FFFFFF;
  --surface-2: #F7F9FD;
  --line: #DDE4EF;
  --line-strong: #C3CEDF;
  --text: #0E1A2B;
  --muted: #566579;
  --faint: #8A97A8;
  --accent: #0B3D91;
  --accent-ink: #FFFFFF;
  --accent-rgb: 11, 61, 145;
  --accent-2: #0E9F8E;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 40px -26px rgba(14,26,43,.35);
  --shadow-lift: 0 28px 60px -30px rgba(14,26,43,.3);
  --grain: .02;
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-style: normal; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
textarea, input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--accent); color: var(--accent-ink); padding: 12px 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- atmosphere ---------- */
.atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(var(--accent-rgb), .09), transparent 62%),
    radial-gradient(900px 600px at 2% 6%, rgba(var(--accent-rgb), .05), transparent 58%);
  transition: background .6s ease;
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
#glow {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb), .07), transparent 62%);
  transition: opacity .5s ease;
}
@media (hover: hover) { #glow { opacity: 1; } }

.shell { position: relative; z-index: 3; }
.wrap { width: min(1180px, 100% - 44px); margin-inline: auto; }

/* ---------- nav island ---------- */
.nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(1150px, 100% - 28px); }
.island {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 18px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  transition: background-color .5s ease, border-color .5s ease;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.wordmark .mark {
  font-family: var(--font-display); font-size: 16px; color: var(--accent);
  letter-spacing: 0; line-height: 1; margin-right: 2px;
}
.nav-prod {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 4px;
  white-space: nowrap; margin-left: 4px;
}
html[data-theme="designer"] .nav-prod { border-radius: 0; }
@media (max-width: 900px) { .nav-prod { display: none; } }
.wordmark .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
  animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .42; } }
.navlinks { display: flex; gap: 2px; margin-left: auto; }
.navlinks a {
  padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--muted);
  transition: color .2s ease, background-color .2s ease;
}
.navlinks a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav-who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; color: var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.nav-who:hover { color: var(--text); border-color: var(--accent); }
.nav-who b { color: var(--accent); font-weight: 700; }
.nav-book {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}
.nav-book:hover { transform: translateY(-1px); filter: brightness(1.06); }
.nav-book .arrow { background: rgba(0,0,0,.16); }

/* ---------- hero ---------- */
.hero { padding: 128px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.32fr .68fr; gap: 40px; align-items: start; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
h1.display {
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.02; letter-spacing: -.028em; text-wrap: balance; margin-bottom: 18px;
}
.deck { font-size: 17px; color: var(--muted); max-width: 48ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.undercta { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: .04em; }

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease,
              border-color .25s ease, color .25s ease, box-shadow .35s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 34px -14px rgba(var(--accent-rgb), .6); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent); font-size: 12px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.btn:hover .arrow { transform: translateX(3px) translateY(-1px); }

.plist { margin-top: 20px; display: grid; gap: 9px; }
.plist li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; }
.plist li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* readout */
.readout {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-1);
  transition: background-color .5s ease, border-color .5s ease;
}
.readout .rhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.readout .rhead .live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.readout .rhead .live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: breathe 2.4s ease-in-out infinite;
}
.rrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px;
}
.rrow:last-child { border-bottom: none; }
.rrow .rl { color: var(--muted); }
.rrow .rv { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.rrow .rv.accent { color: var(--accent); }
.readout .rfoot {
  padding: 11px 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; color: var(--faint); line-height: 1.6;
}

/* ---------- sections ---------- */
section { padding: 78px 0; position: relative; }
section[id], header[id] { scroll-margin-top: 90px; }
.sec-head { display: grid; grid-template-columns: .95fr 1.05fr; gap: 36px; align-items: end; margin-bottom: 38px; }
.sec-head h2 { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.sec-head .note { color: var(--muted); max-width: 50ch; font-size: 15.5px; }
.label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px; display: block;
}

/* ---------- demo ---------- */
.demo {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 18px;
  padding: 24px; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-lift);
  transition: background-color .5s ease, border-color .5s ease;
}
.demo-in { display: flex; flex-direction: column; }
.demo-in .label { margin-bottom: 6px; color: var(--accent); }
.demo-hint { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; max-width: 46ch; }
.demo-ta {
  width: 100%; min-height: 190px; flex: 1; resize: vertical;
  background: color-mix(in srgb, var(--ink) 70%, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 16px; color: var(--text); font-size: 15px; line-height: 1.6;
  transition: border-color .2s ease;
}
.demo-ta:focus { outline: none; border-color: var(--accent); }
.demo-ta::placeholder { color: var(--faint); }
.demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.demo-bar .btn { padding: 12px 18px; font-size: 14px; }
.demo-note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--faint); margin-left: auto; text-transform: uppercase;
}
.demo-out {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); padding: 20px; min-height: 380px;
  display: flex; flex-direction: column;
}
.demo-empty { margin: auto; text-align: center; color: var(--faint); max-width: 30ch; }
.de-big { font-family: var(--font-mono); font-size: 52px; line-height: 1; color: var(--line-strong); margin-bottom: 12px; }
.demo-empty p { font-size: 13.5px; }

.score-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.score-num { font-family: var(--font-display); font-size: 52px; line-height: 1; letter-spacing: -.03em; }
.score-den { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.verdict {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.verdict.good { color: #2FBF71; }
.verdict.mid { color: var(--accent); }
.verdict.bad { color: #E5544B; }
.bars { display: grid; gap: 7px; margin: 16px 0 6px; }
.bar {
  display: grid; grid-template-columns: 88px 1fr 34px; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.bar .bt { text-transform: uppercase; letter-spacing: .08em; }
.bar i { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 15%, transparent); overflow: hidden; }
.bar i b { display: block; height: 100%; background: var(--accent); border-radius: 99px; width: 0; transition: width .7s cubic-bezier(.32,.72,0,1); }
.bar .bv { text-align: right; color: var(--text); }
.stopline, .stranger {
  border-left: 2px solid var(--accent); padding: 8px 0 8px 13px; margin: 14px 0;
  font-size: 14px; color: var(--muted); line-height: 1.55;
}
.stopline b, .stranger b {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px; font-weight: 700;
}
.stopline em { color: var(--text); font-style: normal; font-weight: 500; }
.stopline.held { border-left-color: var(--accent-2); }
.stopline.held b { color: var(--accent-2); }
.fixes { display: grid; gap: 9px; margin-top: 6px; }
.fix {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; background: color-mix(in srgb, var(--surface) 88%, var(--text) 5%);
}
.fix .fh {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px; font-weight: 700;
}
.fix .fw { font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.fix .fa {
  font-size: 13.5px; color: var(--text); font-family: var(--font-mono); line-height: 1.6;
  border-left: 2px solid var(--accent); padding-left: 10px; word-break: break-word;
}
.demo-cta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.demo-cta .btn { padding: 11px 16px; font-size: 13.5px; margin-left: auto; }
.demo-cta .btn-link {
  display: block; margin-top: 4px; color: var(--accent); font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px;
}

.demo-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .03em;
}
.demo-foot b { color: var(--accent); font-weight: 700; }
.demo-foot a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.demo-foot a:hover { color: var(--accent); }
.demo-foot .arrow { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* ---------- modules ---------- */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.module {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  transition: transform .3s ease, border-color .3s ease, background-color .5s ease;
}
.module:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.module.live { border-color: var(--accent); box-shadow: 0 18px 40px -30px rgba(var(--accent-rgb), .9); }
.mnum {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--faint); text-transform: uppercase;
}
.mdom { color: var(--accent); }
.module h3 { font-size: 17px; line-height: 1.25; }
.module p { color: var(--muted); font-size: 14px; flex: 1; }
.mfoot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.mmeta { color: var(--faint); }
.mlink { color: var(--accent); }
.mlink.off { color: var(--faint); }

/* ---------- proof ---------- */
.proof { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.proofcard {
  grid-column: span 2; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: transform .3s ease, border-color .3s ease, background-color .5s ease;
}
.proofcard:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.proofcard.feature { grid-column: span 3; }
.proofcard .pt { font-size: 17px; font-family: var(--font-display); font-weight: 600; margin-bottom: 8px; }
.proofcard .pd { color: var(--muted); font-size: 14px; }
.proofcard .pm {
  margin-top: 14px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.proofcard .pstat {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 4px; color: var(--text);
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.step {
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  transition: background-color .5s ease, border-color .5s ease;
}
.step .sn {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent); letter-spacing: .18em; margin-bottom: 13px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }
pre.code {
  margin: 14px 0 0; padding: 14px 16px; overflow-x: auto;
  background: color-mix(in srgb, var(--ink) 88%, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: var(--text);
  white-space: pre;
}

/* ---------- offers ---------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.offer {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  transition: background-color .5s ease, border-color .5s ease;
}
.ok { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--accent); margin-bottom: 10px; }
.offer h3 { font-size: 18px; margin-bottom: 5px; }
.op {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.offer p { color: var(--muted); font-size: 14.5px; }
.om { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .08em; }
.ctaband {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 20px; padding: 26px 28px;
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-1);
}
.ctaband h3 { font-size: 20px; margin-bottom: 6px; }
.ctaband p { color: var(--muted); font-size: 14.5px; max-width: 56ch; }

/* ---------- pack ---------- */
.pack {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; padding: 30px;
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-lift);
  transition: background-color .5s ease, border-color .5s ease;
}
.manifest { border-top: 1px solid var(--line); }
.mrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12.5px;
}
.mrow .mn { color: var(--text); }
.mrow .ms { color: var(--faint); font-size: 11px; text-align: right; }
.pack-aside { display: flex; flex-direction: column; gap: 12px; }
.specbox {
  padding: 16px; border-radius: var(--radius); border: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); line-height: 1.9;
}
.specbox b { color: var(--text); font-weight: 600; }
.hash { word-break: break-all; color: var(--accent); font-size: 10.5px; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 4px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 500; transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .pm {
  font-family: var(--font-mono); font-size: 17px; color: var(--accent);
  flex-shrink: 0; transition: transform .3s ease;
}
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 22px; color: var(--muted); max-width: 74ch; font-size: 15px; }

/* ---------- gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 22px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.gated .gate { display: grid; }
body.gated { overflow: hidden; }
.gate-card {
  width: min(920px, 100%); max-height: min(88vh, 760px); overflow-y: auto;
  padding: 34px clamp(20px, 4vw, 44px) 28px;
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 8px);
  background: var(--surface); box-shadow: var(--shadow-lift);
  animation: rise .5s cubic-bezier(.32,.72,0,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.gate-card h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.025em; line-height: 1.08; margin-bottom: 10px; }
.gate-card .gdeck { color: var(--muted); max-width: 54ch; margin-bottom: 24px; font-size: 15px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.tile {
  text-align: left; padding: 18px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .25s ease, background-color .25s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--accent); }
.tile::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.32,.72,0,1);
}
.tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
.tile .tn { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.tile .td { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gate-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: .06em;
}
.gate-skip { color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.gate-skip:hover { color: var(--accent); border-color: var(--accent); }
.gate-x {
  position: absolute; top: 15px; right: 17px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); font-size: 15px;
}
.gate-x:hover { color: var(--text); border-color: var(--text); }

/* persona swaps — neutral copy renders when no class is known, so the page is
   complete with JS disabled and complete for a crawler */
.pswap, .pcard { display: none; }
html[data-p="designer"] .pswap[data-p="designer"],
html[data-p="developer"] .pswap[data-p="developer"],
html[data-p="founder"] .pswap[data-p="founder"],
html[data-p="marketer"] .pswap[data-p="marketer"],
html[data-p="agency"] .pswap[data-p="agency"],
html[data-p="business"] .pswap[data-p="business"],
html[data-p="all"] .pswap[data-p="all"],
html:not([data-p]) .pswap[data-p="all"] { display: var(--pswap-d, block); }

html[data-p="designer"] .pcard[data-p="designer"],
html[data-p="developer"] .pcard[data-p="developer"],
html[data-p="founder"] .pcard[data-p="founder"],
html[data-p="marketer"] .pcard[data-p="marketer"],
html[data-p="agency"] .pcard[data-p="agency"],
html[data-p="business"] .pcard[data-p="business"],
html[data-p="all"] .pcard[data-p="all"],
html:not([data-p]) .pcard[data-p="all"] { display: block; }

/* ---------- article / table ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.02em; margin: 42px 0 14px; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose p { color: var(--muted); margin: 12px 0; font-size: 16px; }
.prose p strong { color: var(--text); }
.prose ol, .prose ul { margin: 12px 0 12px 0; padding-left: 0; display: grid; gap: 9px; }
.prose ol { counter-reset: n; }
.prose ol li, .prose ul li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15.5px; }
.prose ol li::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .18em;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); letter-spacing: .08em;
}
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

table.grid { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
table.grid th, table.grid td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; border-bottom-color: var(--line-strong);
}
table.grid td { color: var(--muted); }
table.grid td:first-child { color: var(--text); font-weight: 500; }
table.grid .w { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }
table.grid tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

.quoteblock {
  margin: 26px 0; padding: 20px 22px;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.quoteblock p { color: var(--text); font-size: 15.5px; margin: 0 0 10px; }
.quoteblock .qmeta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- pillar rows ---------- */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pillar {
  display: grid; grid-template-columns: 68px 1fr 1.15fr auto; gap: 26px; align-items: start;
  padding: 24px 6px; border-bottom: 1px solid var(--line);
  transition: background-color .25s ease, padding-left .25s ease;
}
.pillar:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); padding-left: 16px; }
.pillar .pnum {
  font-family: var(--font-mono); font-size: 12px; color: var(--faint);
  padding-top: 5px; letter-spacing: .1em;
}
.pillar h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.pillar .ptag {
  display: block; margin-top: 7px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.pillar p { color: var(--muted); font-size: 15px; }
.pillar .pmeta {
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  text-align: right; padding-top: 4px; line-height: 1.6;
}

/* ---------- money ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rung {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  transition: background-color .5s ease, border-color .3s ease, transform .3s ease;
}
.rung:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.rung.hi { border-color: var(--accent); box-shadow: 0 20px 50px -34px rgba(var(--accent-rgb), .9); }
.rung .rk {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.rung h3 { font-size: 19px; margin: 10px 0 0; }
.rung .rp {
  font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em;
  color: var(--accent); margin: 8px 0 2px; line-height: 1;
}
.rung .rm {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
.rung p { color: var(--muted); font-size: 14px; }
.rung ul { margin-top: 12px; display: grid; gap: 7px; }
.rung li { position: relative; padding-left: 17px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rung li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.rung .rfoot {
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- per-class services ---------- */
.services .pillar { grid-template-columns: 58px 1fr 1.05fr .9fr; }
.services .pillar .pmeta { max-width: none; white-space: normal; text-align: right; }
.services .pillar h3 { font-size: 19px; }
@media (max-width: 980px) {
  .services .pillar { grid-template-columns: 44px 1fr; row-gap: 8px; }
  .services .pillar p { grid-column: 2; }
  .services .pillar .pmeta { text-align: left; grid-column: 2; }
}

/* ---------- hook lab + scope guard output ---------- */
.hook-lead { color: var(--muted); font-size: 14px; margin: 10px 0 4px; line-height: 1.55; }
.hook-lead b { color: var(--text); font-weight: 600; }
.hooks { display: grid; gap: 8px; margin-top: 14px; }
.hook-row {
  display: grid; grid-template-columns: 22px 34px 1fr; gap: 12px; align-items: start;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 86%, var(--text) 3%);
  transition: border-color .2s ease;
}
.hook-row:hover { border-color: var(--line-strong); }
.hook-row.best { border-color: var(--accent); }
.hook-n {
  font-family: var(--font-mono); font-size: 10px; color: var(--faint);
  padding-top: 3px; letter-spacing: .06em;
}
.hook-s {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--accent); text-align: right; padding-top: 1px;
}
.hook-row.best .hook-s { color: var(--accent); }
.hook-t {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
}
.hook-x { font-size: 14px; color: var(--text); line-height: 1.5; }
.hook-w { margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 720px) {
  .hook-row { grid-template-columns: 20px 1fr; }
  .hook-s { grid-column: 2; grid-row: 1; text-align: left; }
  .hook-b { grid-column: 2; }
}

/* ---------- buy card + founder strip ---------- */
.buycard {
  display: flex; flex-direction: column; padding: 24px;
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-lift);
  transition: background-color .5s ease, border-color .5s ease;
}
.bc-k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.bc-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: breathe 2.4s ease-in-out infinite;
}
.bc-h { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }
.bc-price {
  font-family: var(--font-display); font-size: 56px; line-height: 1;
  letter-spacing: -.035em; margin: 8px 0 2px;
}
.bc-price span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--faint); margin-left: 9px; vertical-align: super;
}
.bc-l { margin: 18px 0 0; display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 16px; }
.bc-l li { position: relative; padding-left: 18px; font-size: 14px; color: var(--muted); }
.bc-l li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.bc-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.bc-meta span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; }
.bc-btn { width: 100%; justify-content: center; }
.bc-alt { margin-top: 12px; font-size: 12.5px; color: var(--faint); line-height: 1.55; }
.bc-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.founder { padding: 40px 0 4px; }
.founder-grid {
  display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center;
  padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fphoto {
  width: 112px; height: 112px; flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.fphoto img { width: 100%; height: 100%; object-fit: cover; }
.fmono { font-family: var(--font-display); font-size: 30px; letter-spacing: -.02em; color: var(--accent); }
.fwho h2 { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.2; margin-bottom: 8px; letter-spacing: -.015em; }
.fwho p { color: var(--muted); font-size: 14.5px; max-width: 54ch; }
.fwho-links {
  display: flex; gap: 18px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}
.fwho-links a { color: var(--accent); }
.fwho-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fstats { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px; }
.fstats div { display: flex; flex-direction: column; }
.fstats b { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }
.fstats span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); max-width: 15ch; line-height: 1.5;
}
html[data-theme="designer"] .buycard,
html[data-theme="designer"] .bc-meta span,
html[data-theme="designer"] .fphoto { border-radius: 0; }
@media (max-width: 980px) {
  .founder-grid { grid-template-columns: auto 1fr; row-gap: 18px; }
  .fstats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

/* ---------- answer-first pages ---------- */
.answer {
  margin: 10px 0 0; padding: 22px 26px; max-width: 64ch;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1.62; color: var(--text);
}
.fixlist { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 8px; }
.fixrow {
  display: grid; grid-template-columns: 104px 1fr auto; gap: 18px; align-items: baseline;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .2s ease, background-color .2s ease;
}
.fixrow:hover { padding-left: 12px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.fx-cat {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.fx-q { font-size: 15.5px; color: var(--text); }
.fx-go { color: var(--accent); font-size: 13px; }
@media (max-width: 720px) {
  .fixrow { grid-template-columns: 1fr auto; row-gap: 4px; }
  .fx-cat { grid-column: 1 / -1; }
  .answer { padding: 18px 20px; font-size: 16.5px; }
}

/* ---------- geo ---------- */
.geohead { padding: 128px 0 0; }
.geo-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
.avail {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.avail .arow {
  display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px;
}
.avail .arow:last-child { border-bottom: none; }
.avail .ak { color: var(--muted); }
.avail .av { color: var(--text); font-weight: 600; text-align: right; }
.geolist { display: grid; gap: 12px; margin-top: 24px; }
.geoitem {
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.geoitem h3 { font-size: 16.5px; margin-bottom: 6px; }
.geoitem p { color: var(--muted); font-size: 14.5px; }
.countries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.countries a {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); transition: all .2s ease;
}
.countries a:hover, .countries a[aria-current="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 52px 0 36px; margin-top: 36px; font-size: 14px; }
.fgrid { display: grid; grid-template-columns: 1.5fr .75fr .75fr .85fr; gap: 30px; }
.fgrid h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 13px; font-weight: 700;
}
.fgrid li { margin-bottom: 8px; color: var(--muted); }
.fgrid a:hover { color: var(--accent); }
.fbrand { font-family: var(--font-display); font-size: 22px; margin-bottom: 9px; letter-spacing: -.01em; }
.fnote { color: var(--faint); font-size: 13px; max-width: 34ch; }
.fbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .08em;
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(5px); }
.reveal.in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .8s cubic-bezier(.32,.72,0,1), transform .8s cubic-bezier(.32,.72,0,1),
              filter .8s cubic-bezier(.32,.72,0,1);
}
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .26s; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .modules, .offers { grid-template-columns: repeat(2, 1fr); }
  .proofcard, .proofcard.feature { grid-column: span 3; }
}
@media (max-width: 980px) {
  .hero-grid, .geo-grid, .sec-head, .pack, .demo { grid-template-columns: 1fr; gap: 24px; }
  .demo-out { min-height: 320px; }
  .steps { grid-template-columns: 1fr; }
  .steps.four { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .ctaband { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .navlinks { display: none; }
  .island { padding: 7px 7px 7px 13px; gap: 6px; }
  .nav-who { padding: 8px 10px; font-size: 9.5px; }
  .wordmark { font-size: 11px; letter-spacing: .16em; }
  .hero { padding-top: 100px; }
  section { padding: 54px 0; }
  .modules, .offers, .proof, .fgrid, .tiles { grid-template-columns: 1fr; }
  .steps.four { grid-template-columns: 1fr; }
  .proofcard, .proofcard.feature { grid-column: span 1; }
  .pack, .demo { padding: 20px; }
  .demo-note { margin-left: 0; width: 100%; }
  .score-num { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- gate on small screens: all six visible without inner scrolling ---------- */
@media (max-width: 760px) {
  .gate { padding: 10px; place-items: start center; }
  .gate-card { max-height: calc(100dvh - 20px); padding: 20px 16px 16px; border-radius: 12px; }
  .gate-card h2 { font-size: 25px; margin-bottom: 8px; }
  .gate-card .gdeck { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .tile { padding: 11px; }
  .tile .tn { font-size: 13.5px; margin-bottom: 3px; }
  .tile .td { font-size: 11px; line-height: 1.32; }
  .gate-foot { margin-top: 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .gate-foot span { font-size: 10px; }
}
@media (max-width: 340px) { .tiles { grid-template-columns: 1fr; } }

/* ============================================================
   CRAFT LAYER — depth, rhythm, motion
   ============================================================ */

/* --- scroll progress --- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 300;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* --- atmosphere: gradient mesh + fine grid, behind everything --- */
.atmos {
  background:
    radial-gradient(1200px 620px at 10% -10%, rgba(var(--accent-rgb), .26), transparent 62%),
    radial-gradient(980px 560px at 94% 2%, rgba(var(--accent-rgb), .12), transparent 58%),
    radial-gradient(820px 520px at 50% 112%, rgba(var(--accent-rgb), .09), transparent 66%);
}
.atmos::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
  opacity: .55;
}

/* --- ticker band --- */
.ticker {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 11px 0; margin-top: 6px; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-in {
  display: flex; align-items: center; gap: 26px; width: max-content;
  animation: slide 42s linear infinite;
}
.ticker span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.ticker i { color: var(--accent); font-size: 5px; font-style: normal; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-in { animation-play-state: paused; }

/* --- section numbering: printed into the page, never counted in the browser ---
   A counter drifts the moment a section is added, hidden or reordered. The number is now a real
   element in the markup, generated in document order at build time. */
.secn { margin-right: 10px; color: var(--accent); font-weight: 700;
        font-variant-numeric: tabular-nums; }

/* --- bento for the module grid --- */
.modules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.modules .module { grid-column: span 2; }
.modules .module:nth-child(1) { grid-column: span 4; }
.modules .module:nth-child(1) .mtitle { font-size: clamp(22px, 2.4vw, 31px); }
.modules .module:nth-child(2) { grid-column: span 2; }

/* --- card shine on hover --- */
.module, .rung, .proofcard, .step { position: relative; overflow: hidden; }
.module::before, .rung::before, .proofcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 220px at 50% -20%, rgba(var(--accent-rgb), .16), transparent 70%);
  transition: opacity .45s ease;
}
.module:hover::before, .rung:hover::before, .proofcard:hover::before { opacity: 1; }

/* --- giant footer wordmark --- */
.bigmark {
  display: flex; justify-content: space-between; gap: 4vw;
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; line-height: .82;
  font-size: clamp(52px, 13.5vw, 200px); letter-spacing: -.055em;
  color: color-mix(in srgb, var(--text) 9%, transparent);
  user-select: none; overflow: hidden;
}
.bigmark span:last-child {
  color: color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 900px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules .module, .modules .module:nth-child(1), .modules .module:nth-child(2) { grid-column: span 1; }
  .bigmark { font-size: clamp(44px, 17vw, 110px); }
}
@media (max-width: 560px) {
  .modules { grid-template-columns: 1fr; }
  .ticker span { font-size: 9px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-in { animation: none; }
  .atmos::before { opacity: .3; }
}

/* --- hero art layer --- */
.hero { position: relative; overflow: hidden; }
.hero-art {
  position: absolute; left: -3%; top: -10%; width: 106%; height: 122%;
  object-fit: cover; object-position: center top;
  opacity: .34; z-index: 0; pointer-events: none; user-select: none;
  mask-image: radial-gradient(ellipse 82% 72% at 52% 28%, #000 26%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 52% 28%, #000 26%, transparent 74%);
  will-change: transform;
}
html[data-theme="designer"] .hero-art,
html[data-theme="agency"] .hero-art,
html[data-theme="business"] .hero-art { opacity: .22; }
.hero > .wrap { position: relative; z-index: 1; }

/* --- stagger primitive (opt-in with data-stagger) --- */
.stag {
  opacity: 0; transform: translateY(15px);
  transition: opacity .75s cubic-bezier(.32,.72,0,1), transform .75s cubic-bezier(.32,.72,0,1);
  transition-delay: calc(min(var(--i, 0), 4) * 70ms);
}
.stag.in { opacity: 1; transform: none; }

/* --- magnetic CTA --- */
.magnet { transition: transform .18s cubic-bezier(.32,.72,0,1); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .stag { opacity: 1; transform: none; transition: none; }
  .hero-art { opacity: .18; }
}

/* ============================================================
   PER-THEME HERO COMPOSITION — each theme gets its own layout,
   not the same grid in a different colour
   ============================================================ */

/* DESIGNER · stacked, full-bleed type, price as a horizontal band underneath */
html[data-theme="designer"] .hero-grid {
  grid-template-columns: 1fr; gap: 30px; align-items: start;
}
html[data-theme="designer"] h1.display { max-width: 26ch; font-size: clamp(52px, 7.6vw, 116px); }
html[data-theme="designer"] .buycard {
  max-width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  gap: 22px; align-items: center; padding: 18px 22px;
}
html[data-theme="designer"] .buycard .bc-h,
html[data-theme="designer"] .buycard .bc-meta,
html[data-theme="designer"] .buycard .bc-alt { display: none; }
html[data-theme="designer"] .bc-price { font-size: 38px; margin: 0; }
html[data-theme="designer"] .bc-l {
  border-top: 0; padding-top: 0; margin: 0; grid-template-columns: repeat(3, auto);
  gap: 18px; justify-content: start;
}
html[data-theme="designer"] .bc-btn { width: auto; padding: 12px 20px; }

/* DEVELOPER · terminal card, mono chrome, left column tight */
html[data-theme="developer"] .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 26px; }
html[data-theme="developer"] .buycard {
  border-radius: 0; border-color: var(--line-strong);
  background: color-mix(in srgb, #000 55%, var(--surface));
  font-family: var(--font-mono);
}
html[data-theme="developer"] .buycard::before {
  content: "● ● ●   audit.sh — running";
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--faint); padding: 0 0 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
html[data-theme="developer"] .bc-price { font-family: var(--font-mono); letter-spacing: -.02em; }
html[data-theme="developer"] .bc-l li::before { border-radius: 0; }

/* FOUNDER · floating product card, lifted and shadowed */
html[data-theme="founder"] .buycard { transform: translateY(-14px); box-shadow: var(--shadow-lift), 0 0 90px -40px rgba(var(--accent-rgb), .55); }
html[data-theme="founder"] h1.display { font-size: clamp(40px, 5.4vw, 74px); }

/* MARKETER · asymmetric, oversized type, card overlaps the fold */
html[data-theme="marketer"] .hero-grid { grid-template-columns: 1.3fr .7fr; gap: 20px; }
html[data-theme="marketer"] h1.display {
  font-size: clamp(42px, 6.1vw, 86px); line-height: .96; letter-spacing: -.035em;
}
html[data-theme="marketer"] .buycard { margin-left: -26px; margin-top: 34px; }

/* AGENCY · magazine spread, serif headline, sidebar rule instead of a card */
html[data-theme="agency"] .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 46px; }
html[data-theme="agency"] h1.display { font-size: clamp(38px, 4.8vw, 66px); }
html[data-theme="agency"] .buycard {
  border: 0; border-left: 1px solid var(--text); border-radius: 0; background: none;
  box-shadow: none; padding: 0 0 0 26px; transform: translateY(6px);
}
html[data-theme="agency"] .bc-price { font-family: var(--font-display); font-size: 64px; }

/* BUSINESS · centred, calm, everything on one axis */
html[data-theme="business"] .hero-grid {
  grid-template-columns: minmax(0, 720px); justify-content: center; gap: 30px;
}
html[data-theme="business"] .hero-grid > div { text-align: center; }
html[data-theme="business"] .kicker { justify-content: center; }
html[data-theme="business"] .plist { justify-content: center; }
html[data-theme="business"] .plist li { text-align: left; }
html[data-theme="business"] .hero-cta { justify-content: center; }
html[data-theme="business"] .buycard { max-width: 560px; margin: 0 auto; }
html[data-theme="business"] .undercta { text-align: center; }

/* keep every composition sane on a phone */
@media (max-width: 900px) {
  html[data-theme] .hero-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  html[data-theme="marketer"] .buycard,
  html[data-theme="founder"] .buycard { margin: 0; transform: none; }
  html[data-theme="designer"] .buycard {
    grid-template-columns: 1fr; gap: 14px;
  }
  html[data-theme="designer"] .bc-l { grid-template-columns: 1fr; gap: 8px; }
  html[data-theme="agency"] .buycard { padding-left: 18px; }
  html[data-theme="business"] .hero-grid > div { text-align: left; }
  html[data-theme="business"] .kicker,
  html[data-theme="business"] .hero-cta,
  html[data-theme="business"] .plist { justify-content: flex-start; }
}

/* ============================================================
   PER-THEME SECTION RHYTHM — the order and treatment below the
   hero changes per visitor. Same HTML, reordered with flex order.
   ============================================================ */
#main { display: flex; flex-direction: column; }

/* DESIGNER · proof first, then price, then the shelf of work */

/* DEVELOPER · the running thing, then what it is made of */

/* FOUNDER · price first — they are already sold on the problem */

/* MARKETER · the tool, then the receipts, then the price */

/* AGENCY · portfolio first, magazine rules */

/* BUSINESS · plain steps, then price, then the questions */

/* ---- treatment differences, not just order ---- */

/* developer: work reads like a changelog */
html[data-theme="developer"] #work .proofcard { border-radius: 0; font-family: var(--font-mono); }
html[data-theme="developer"] #work .proofcard h3 { font-size: 15px; letter-spacing: -.01em; }
html[data-theme="developer"] #how .step { border-radius: 0; border-left: 2px solid var(--accent); }

/* agency: wide magazine gutters + serif heads */
html[data-theme="agency"] #work .wrap,
html[data-theme="agency"] #services .wrap { max-width: 1120px; }
html[data-theme="agency"] #work h2,
html[data-theme="agency"] #services h2 { font-family: var(--font-display); font-size: clamp(30px,3.4vw,46px); }
html[data-theme="agency"] .proofcard { border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; }

/* business: steps become large numbered blocks, no cards */
html[data-theme="business"] #how .step {
  border: 0; background: none; padding: 0 0 0 62px; position: relative;
}
html[data-theme="business"] #how .step::before {
  content: counter(stepn); counter-increment: stepn;
  position: absolute; left: 0; top: -6px;
  font-family: var(--font-display); font-size: 42px; line-height: 1;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-theme="business"] #how .steps { counter-reset: stepn; gap: 26px; }

/* designer: pricing as a strict price list, no cards */
html[data-theme="designer"] #pricing .rung {
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 0;
  background: none; box-shadow: none; padding: 22px 0;
}

/* marketer: the demo gets the whole width */
html[data-theme="marketer"] #demo .wrap { max-width: 1180px; }
html[data-theme="marketer"] #demo .demo { border-radius: 2px; }

/* founder: pricing cards get a lift */
html[data-theme="founder"] #pricing .rung:hover { transform: translateY(-6px); }
html[data-theme="founder"] #how .step { background: color-mix(in srgb, var(--surface) 92%, var(--accent) 4%); }

/* section numbers are generated in DOM order; hand-written ones drifted and lied */






/* business steps: explicit numerals, no counters */
html[data-theme="business"] #how .step { counter-increment: none; }
html[data-theme="business"] #how .step:nth-child(1)::before{content:"01"}
html[data-theme="business"] #how .step:nth-child(2)::before{content:"02"}
html[data-theme="business"] #how .step:nth-child(3)::before{content:"03"}
html[data-theme="business"] #how .step:nth-child(4)::before{content:"04"}
html[data-theme="business"] #how .step:nth-child(5)::before{content:"05"}

/* ---- demo output: schedules + mini headings ---- */
.sched { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin: 0; }
.sched li { list-style: none; position: relative; padding-left: 14px; }
.sched li::before { content: "—"; position: absolute; left: 0; color: var(--accent); opacity: .7; }
.sched b { color: var(--text); font-weight: 600; }
.minihead {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 20px 0 8px;
}
.stopline code { font-family: var(--font-mono); font-size: 12px; color: var(--text); }

/* ---- multi-demo tabs + install strip ---- */
.demo-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 6px; }
.demo-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.demo-tab:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.demo-tab.on { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.demo-tab .dt-n { font-size: 9px; opacity: .55; }
.demo-tab.on .dt-n { opacity: .75; }
html[data-theme="designer"] .demo-tab { border-radius: 0; }

.demo-install {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  padding: 12px 0 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
}
.di-k { color: var(--faint); opacity: .7; }
.di-v { color: var(--text); }
.di-k + .di-v { margin-right: 8px; }

@media (max-width: 640px) {
  .demo-tab { font-size: 9px; padding: 9px 12px; letter-spacing: .06em; }
  .demo-install { font-size: 8.5px; gap: 3px 12px; }
}

/* ---- founder strip: bio register ---- */
.fwho .label { display: block; margin-bottom: 10px; }
.fwho h2 { max-width: 22ch; }
.fwho p { max-width: 62ch; }
.fwho p + p { margin-top: 12px; }
.fmeta {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}

/* founder strip with a real bio: top-align the portrait, give it presence */
.founder-grid { align-items: start; }
.fstats { align-self: start; }
@media (min-width: 900px) {
  .fphoto { width: 148px; height: 148px; }
  .fwho h2 { font-size: clamp(22px, 2.4vw, 30px); }
  .fwho p { font-size: 15px; }
}

/* ---- premade real-world scenarios ---- */
.demo-scenes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0 0; }
.demo-scenes:empty { display: none; }
.ds-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-right: 4px;
}
.scene-chip {
  padding: 8px 13px; border: 1px dashed var(--line-strong); border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-size: 13px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.scene-chip:hover { color: var(--text); border-color: var(--accent); }
.scene-chip.on { color: var(--ink); background: var(--accent); border-color: var(--accent); border-style: solid; }
html[data-theme="designer"] .scene-chip { border-radius: 0; }

/* ---- custom builds (replaces the inventory section) ---- */
.pset, .builds { display: none; }
html[data-p="all"] .pset[data-p="all"],
html[data-p="designer"] .pset[data-p="designer"],
html[data-p="developer"] .pset[data-p="developer"],
html[data-p="founder"] .pset[data-p="founder"],
html[data-p="marketer"] .pset[data-p="marketer"],
html[data-p="agency"] .pset[data-p="agency"],
html[data-p="business"] .pset[data-p="business"] { display: grid; }

.builds { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
html[data-p="all"] .builds[data-p="all"],
html[data-p="designer"] .builds[data-p="designer"],
html[data-p="developer"] .builds[data-p="developer"],
html[data-p="founder"] .builds[data-p="founder"],
html[data-p="marketer"] .builds[data-p="marketer"],
html[data-p="agency"] .builds[data-p="agency"],
html[data-p="business"] .builds[data-p="business"] { display: grid; }

.build {
  position: relative; padding: 26px 24px 22px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .25s ease, transform .25s ease;
}
.build:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.bnum {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--accent);
}
.build h3 { font-family: var(--font-display); font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.bprob { color: var(--text); font-size: 14.5px; line-height: 1.5; }
.bdoes { display: grid; gap: 7px; margin: 2px 0 4px; }
.bdoes li {
  list-style: none; position: relative; padding-left: 15px;
  font-size: 13.5px; color: var(--muted); line-height: 1.45;
}
.bdoes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--accent); }
.bhow {
  font-size: 12.5px; color: var(--faint); line-height: 1.5;
  border-top: 1px solid var(--line); padding-top: 11px; margin-top: auto;
}
.bhow b {
  display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; font-weight: 500;
}
.bout { font-size: 13px; color: var(--text); line-height: 1.45; font-style: italic; }
html[data-theme="designer"] .build { border-radius: 0; }
@media (max-width: 980px) { .builds { grid-template-columns: 1fr; } }

.bnote {
  display: none; margin-top: 20px; max-width: 68ch;
  font-size: 14px; color: var(--muted); line-height: 1.55;
}
html[data-p="all"] .pset-note[data-p="all"],
html[data-p="designer"] .pset-note[data-p="designer"],
html[data-p="developer"] .pset-note[data-p="developer"],
html[data-p="founder"] .pset-note[data-p="founder"],
html[data-p="marketer"] .pset-note[data-p="marketer"],
html[data-p="agency"] .pset-note[data-p="agency"],
html[data-p="business"] .pset-note[data-p="business"] { display: block; }
.bnote a { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---- offer stack + guarantee (funnel: value before price, risk after) ---- */
.stack { margin-bottom: 22px; }
.stack { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); padding: 24px 24px 20px; }
.stack-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.stacklist { display: grid; gap: 0; }
.stacklist li { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stacklist li:last-child { border-bottom: 0; }
.sl-t { font-size: 14.5px; color: var(--text); line-height: 1.4; }
.sl-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); white-space: nowrap; }
.stack-foot { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }

.guarantee { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.g-seal { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 17px; font-weight: 700; }
.guarantee b { display: block; font-size: 14.5px; line-height: 1.35; margin-bottom: 6px; }
.guarantee span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.close-line { margin-top: 10px; color: var(--text) !important; font-size: 14px; }

/* ---- sticky offer bar ---- */
.offbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 12px 20px; border-top: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(110%); transition: transform .28s ease;
}
.offbar.on { transform: translateY(0); }
.ob-l { display: flex; align-items: baseline; gap: 12px; }
.ob-l b { font-family: var(--font-display); font-size: 16px; letter-spacing: -.01em; }
.ob-l span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.offbar .btn { padding: 10px 18px; }
.ob-x { background: none; border: 1px solid var(--line); color: var(--faint); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.ob-x:hover { color: var(--text); border-color: var(--line-strong); }
@media (max-width: 720px) {
  .ob-l span { display: none; }
  .offbar { gap: 10px; padding: 10px 12px; }
  .offbar .btn { font-size: 12px; padding: 9px 14px; }
}

/* keep the sticky bar from covering the end of the page */
body.has-offbar { padding-bottom: 86px; }
@media (max-width: 720px) { body.has-offbar { padding-bottom: 74px; } }

/* ================= funnel flow: stakes, cases, quotes, anchor, bump ================= */

/* the page now follows one order for every visitor type */

/* ---- stakes ---- */
.stakes { display: none; }
html[data-p="all"] .stakes[data-p="all"], html[data-p="designer"] .stakes[data-p="designer"],
html[data-p="developer"] .stakes[data-p="developer"], html[data-p="founder"] .stakes[data-p="founder"],
html[data-p="marketer"] .stakes[data-p="marketer"], html[data-p="agency"] .stakes[data-p="agency"],
html[data-p="business"] .stakes[data-p="business"] { display: block; }
.stakes-lead { font-family: var(--font-display); font-size: clamp(24px, 3.1vw, 40px); line-height: 1.14; letter-spacing: -.02em; max-width: 26ch; }
.stakes-sub { margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 62ch; }
.srow { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); margin-top: 0; }
.srow:first-of-type { margin-top: 26px; border-top: 1px solid var(--line); }
.srow b { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -.02em; color: var(--accent); min-width: 15ch; }
.srow span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.stakes-note { margin-top: 16px; font-size: 13.5px; color: var(--faint); max-width: 62ch; }
.stakes-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.stakes-foot-p { font-size: 14px; color: var(--text); max-width: 52ch; }

/* ---- cases ---- */
.cases { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
html[data-p="all"] .cases[data-p="all"], html[data-p="designer"] .cases[data-p="designer"],
html[data-p="developer"] .cases[data-p="developer"], html[data-p="founder"] .cases[data-p="founder"],
html[data-p="marketer"] .cases[data-p="marketer"], html[data-p="agency"] .cases[data-p="agency"],
html[data-p="business"] .cases[data-p="business"] { display: grid; }
.case { border: 1px solid var(--line); padding: 22px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.c-who { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.case h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.18; letter-spacing: -.02em; margin-bottom: 14px; }
.c-row { padding: 9px 0; border-top: 1px solid var(--line); }
.c-row span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.c-row p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.c-row:last-child p { color: var(--text); }

/* ---- testimonials ---- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.quote { border: 1px solid var(--line); padding: 26px 24px 20px; background: color-mix(in srgb, var(--surface) 50%, transparent); position: relative; }
.quote::before { content: "\201C"; position: absolute; top: 6px; left: 18px; font-family: var(--font-display); font-size: 54px; color: var(--accent); opacity: .22; line-height: 1; }
.quote blockquote { font-size: 15px; line-height: 1.62; color: var(--text); }
.quote figcaption { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bookbar { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.bb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: bb 2.4s infinite; }
@keyframes bb { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- value anchor ---- */
.anchor { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border: 1px solid var(--line-strong); padding: 20px 24px; margin-bottom: 16px; }
.an-side { display: flex; flex-direction: column; gap: 5px; }
.an-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); }
.an-side b { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }
.an-mid { display: flex; align-items: center; gap: 12px; }
.an-strike { font-family: var(--font-display); font-size: 26px; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }
.an-arrow { color: var(--accent); font-size: 18px; }
.an-right b { color: var(--accent); }

/* ---- order bump ---- */
.bump { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 14px; border: 1px dashed var(--line-strong); padding: 18px 22px; }
.bump-box { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; flex: 1 1 380px; }
.bump-box input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bump-tick { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; margin-top: 1px; }
.bump-tick::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) scale(0); transition: transform .15s ease; }
.bump-box input:checked + .bump-tick { background: var(--accent); border-color: var(--accent); }
.bump-box input:checked + .bump-tick::after { transform: rotate(-45deg) scale(1); }
.bump-box input:focus-visible + .bump-tick { outline: 2px solid var(--accent); outline-offset: 2px; }
.bump-body b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.bump-body em { font-style: normal; color: var(--accent); }
.bump-body span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.bump-total { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.bump-total span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.bump-total b { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }

/* ---- founder portrait: full frame, no crop ---- */
.fphoto { width: 260px; height: auto; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); }
.fphoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (min-width: 900px) { .fphoto { width: 280px; } }

/* ---- designer headline was too large ---- */
html[data-theme="designer"] .hero h1 { font-size: clamp(40px, 5.4vw, 84px); max-width: 24ch; }

@media (max-width: 900px) {
  .cases { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .srow { flex-direction: column; gap: 4px; align-items: flex-start; }
  .srow b { min-width: 0; }
  .fphoto { width: 200px; }
}
.anchor-note { font-size: 13.5px; color: var(--muted); max-width: 70ch; margin: 0 0 18px; line-height: 1.55; }

/* longer, more specific headlines need a tighter measure or they eat the fold */
html[data-theme="developer"] .hero h1 { font-size: clamp(30px, 3.9vw, 58px); max-width: 21ch; }
html[data-theme="business"] .hero h1 { font-size: clamp(32px, 4.2vw, 62px); max-width: 22ch; }
html[data-theme="agency"] .hero h1 { font-size: clamp(34px, 4.6vw, 68px); max-width: 22ch; }

/* the stats column is gone, so the founder grid is two columns now */
.founder-grid { grid-template-columns: auto 1fr; align-items: start; }

/* marketer headline was running to seven lines */
html[data-theme="marketer"] .hero h1 { font-size: clamp(30px, 3.8vw, 58px); max-width: 22ch; }

@media (max-width: 760px) {
  .founder-grid { grid-template-columns: 1fr; row-gap: 18px; }
  .fphoto { width: 150px; }
  .nav-book { display: none; }   /* the sticky offer bar carries the CTA on phones */
  .ticker { overflow: hidden; }
}

/* ---- value equation block ---- */
.veq { display: grid; gap: 0; margin-bottom: 22px; border-top: 1px solid var(--line); }
.veq-row { display: flex; gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.veq-row span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); min-width: 15ch; flex: none;
}
.veq-row b { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.45; }
.stacklist em { display: block; font-style: normal; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.scarcity {
  margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}

/* ---- booking toast ---- */
.booktoast {
  position: fixed; left: 20px; bottom: 20px; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 16px; max-width: 320px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.booktoast.on { transform: translateY(0); opacity: 1; pointer-events: auto; }
.bt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: bb 2.4s infinite; }
.bt-text { font-size: 12.5px; color: var(--text); line-height: 1.35; }
.bt-x { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.bt-x:hover { color: var(--text); }
@media (max-width: 720px) {
  .booktoast { left: 12px; right: 12px; bottom: 78px; max-width: none; }
  .veq-row { flex-direction: column; gap: 3px; }
  .veq-row span { min-width: 0; }
}

/* ---- about: credentials ---- */
.cred { display: grid; gap: 10px; margin: 14px 0 8px; }
.cred li { list-style: none; position: relative; padding-left: 16px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.cred li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--accent); }
.cred li b { color: var(--text); }
.cred-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0 8px; }
.cred-quotes blockquote { border-left: 2px solid var(--accent); padding-left: 14px; font-size: 14px; line-height: 1.6; color: var(--text); }
.cred-quotes cite { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-style: normal; }
.cred-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0; }
.cred-nums li { list-style: none; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); padding-top: 10px; }
.cred-nums b { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; color: var(--accent); }
.cred-nums span { font-size: 11.5px; color: var(--faint); line-height: 1.35; }
@media (max-width: 760px) { .cred-quotes, .cred-nums { grid-template-columns: 1fr 1fr; } }

/* ---- per-audience offer block ---- */
.offerblock { display: none; margin-bottom: 6px; }
html[data-p="all"] .offerblock[data-p="all"],
html[data-p="business"] .offerblock[data-p="business"],
html[data-p="founder"] .offerblock[data-p="founder"],
html[data-p="agency"] .offerblock[data-p="agency"] { display: block; }
.ob-name { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.025em; line-height: 1.1; }
.ob-line { margin: 10px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 56ch; }
.day5 { margin-top: 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; border-left: 2px solid var(--accent); padding-left: 14px; }
.priceband { margin-top: 12px; font-size: 13.5px; color: var(--text); max-width: 70ch; line-height: 1.55; }
.priceband + .priceband { color: var(--muted); }

/* ---- round three: source, time cost, band, bridge, rate table ---- */
.ob-bridge { margin: -8px 0 20px; font-size: 14px; color: var(--muted); }
.ob-bridge::before { content: "\2192  "; color: var(--accent); }
.ob-time, .ob-source, .ob-band { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 66ch; }
.ob-source { color: var(--text); }
.ob-band { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
.ratetable { margin-top: 18px; overflow-x: auto; }
.ratetable table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ratetable th { text-align: left; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-strong); }
.ratetable td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.ratetable td:last-child { color: var(--accent); font-weight: 600; }
.ratetable p { margin-top: 10px; font-size: 12.5px; color: var(--faint); line-height: 1.5; max-width: 60ch; }

/* ---- sample artifacts: show the work, don't describe it ---- */
.sample { margin: 0 0 14px; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; }
.sample-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); padding: 9px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, transparent); }
.sample-b { padding: 16px 18px; font-size: 14px; line-height: 1.62; color: var(--text); max-width: 74ch; }
.sample-wording .sample-b { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; }
.sample-email .sample-b { font-size: 13.5px; }
.sample-note { margin: -4px 0 22px; font-size: 12.5px; color: var(--faint); max-width: 66ch; line-height: 1.5; }
table.ranked { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ranked th { text-align: left; font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); padding: 0 10px 7px 0; border-bottom: 1px solid var(--line-strong); }
table.ranked td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
table.ranked td:first-child { color: var(--text); font-weight: 500; }
table.ranked td:last-child { color: var(--accent); }
.ob-alt { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: 68ch; }
.ob-leak { margin-top: 12px; font-size: 13px; color: var(--text); line-height: 1.55; max-width: 68ch; }
@media (max-width: 720px) { table.ranked { font-size: 11.5px; } table.ranked th, table.ranked td { padding-right: 6px; } }


/* ---- market pricing ---- */
html[data-mkt="in"] .p-usd { display: none; }
html:not([data-mkt="in"]) .p-inr { display: none; }
.p-inr { font-variant-numeric: tabular-nums; }
.mkt-switch {
  position: fixed; right: 20px; bottom: 20px; z-index: 71;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 1px solid var(--line-strong); color: var(--faint);
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
}
.mkt-switch:hover { color: var(--text); border-color: var(--accent); }

/* ---- application form ---- */
.apply-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.apply-form { display: grid; gap: 16px; }
.apply-form label { display: grid; gap: 6px; }
.apply-form label > span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.apply-form input, .apply-form select, .apply-form textarea {
  width: 100%; background: transparent; border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 11px 13px; color: var(--text); font-family: inherit; font-size: 15px;
}
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.apply-form textarea { resize: vertical; min-height: 96px; }
.apply-note { font-size: 12.5px; color: var(--faint); line-height: 1.5; max-width: 52ch; }
.apply-note.ok { color: var(--accent); }
.apply-side { display: grid; gap: 16px; }
.side-card { border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; }
.side-card b { display: block; font-size: 13px; margin-bottom: 8px; }
.side-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.side-steps { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.side-steps li { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 860px) { .apply-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---- numbering was rendering twice: native markers plus a ::before counter ---- */
.prose ol li, .prose ul li, .prose li, .simple li, .side-steps li, .cred li, .cred-nums li { list-style: none; }
.prose ol, .prose ul, .simple, .side-steps { list-style: none; }
.simple li { position: relative; padding-left: 28px; margin: 10px 0; }
.simple li::before {
  content: counter(s, decimal-leading-zero); counter-increment: s;
  position: absolute; left: 0; top: .15em; color: var(--accent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
}
.simple { counter-reset: s; }
ul.simple li::before { content: "\2014"; }
.simple-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.simple-table td { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.simple-table td.w { width: 12ch; color: var(--text); font-weight: 600; }
.prose ol li::marker, .prose ul li::marker { content: ""; }

/* ---- send chooser ---- */
.send-pick { border: 1px solid var(--accent); border-radius: 6px; padding: 16px 18px; margin-top: 4px; }
.send-pick[hidden] { display: none; }
.sp-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.sp-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-ghost { background: none; border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.send-pick .btn-link { font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; padding: 0; }
.send-pick .btn-link:hover { color: var(--text); }

/* price comparison rows: b and span were running together */
.pc-row { display: grid; grid-template-columns: 15ch 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pc-row b { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding-top: 3px; }
.pc-row span { font-size: 14px; color: var(--text); line-height: 1.55; }
.pc-row span em { color: var(--accent); font-style: normal; }
@media (max-width: 720px) { .pc-row { grid-template-columns: 1fr; gap: 5px; } }

/* ---- live capacity counter ---- */
.capacity { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.cap-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.cap-count { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cap-clock { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; }
.cap-sub { font-size: 13px; color: var(--muted); margin: 7px 0 0; max-width: 62ch; }
.capacity .scarcity { margin-top: 10px; }

/* ---- business hero was centred while everything under it ran left ---- */
html[data-theme="business"] .hero-grid { grid-template-columns: minmax(0, 760px); justify-content: start; }
html[data-theme="business"] .hero-grid > div { text-align: left; }
html[data-theme="business"] .kicker,
html[data-theme="business"] .plist,
html[data-theme="business"] .hero-cta { justify-content: flex-start; }
html[data-theme="business"] .undercta { text-align: left; }
html[data-theme="business"] .buycard { margin: 0; }

/* footer geography is text, not navigation */
footer ul li span, .countries .geo-plain { color: var(--faint); }
.countries .geo-plain { cursor: default; }

/* the Where column is information, not navigation: make that visible */
.ft-where ul li span { color: var(--faint); opacity: .85; }
.ft-where ul li { cursor: default; }
.ft-where h4::after { content: " · not links"; font-weight: 400; opacity: .5; letter-spacing: .06em; }

/* prose links inherit the accent colour, which painted buttons the same as their background */
.prose .btn, .prose .btn-primary, .prose .btn-ghost,
.ctaband .btn, .ctaband .btn-primary { color: var(--accent-ink); text-decoration: none; }
.prose .btn-ghost, .ctaband .btn-ghost { color: var(--text); }
.ctaband .btn, .prose .btn { white-space: nowrap; }

/* ---- hero scorer: the demo before the scroll ---- */
.scorer { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 22px; margin: 26px 0 22px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: 0 30px 70px -40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.03); }
@media (max-width: 860px) { .scorer { grid-template-columns: 1fr; gap: 16px; padding: 16px; } }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sc-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sc-live { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sc-field span { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.sc-field textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.55; padding: 12px 14px; resize: vertical; }
.sc-field textarea:focus { outline: none; border-color: var(--accent); }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.sc-out { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; gap: 6px 16px; align-content: start; }
.sc-gauge { position: relative; grid-row: 1 / span 2; width: 96px; height: 96px; }
.sc-gauge svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.sc-track, .sc-arc { fill: none; stroke-width: 7; }
.sc-track { stroke: var(--line-strong); }
.sc-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.1s cubic-bezier(.22,.9,.24,1), stroke .4s ease; }
.sc-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 30px; color: var(--text); font-variant-numeric: tabular-nums; }
.sc-verdict { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 0; }
.sc-fixes { list-style: none; padding: 0; margin: 4px 0 0; grid-column: 2; display: grid; gap: 8px; }
.sc-fixes li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line-strong); }
.sc-fixes b { font-size: 12.5px; color: var(--text); font-weight: 600; }
.sc-fixes span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sc-rewrite { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-rewrite p { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 6px 0 8px; }
.scored .sc-num { animation: scPop .5s ease-out; }
@keyframes scPop { from { transform: scale(.7); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.sc-hint { font-size: 12px; color: var(--faint); line-height: 1.5; margin: 0 0 8px; max-width: 62ch; }

/* ---- cinematic layer ---- */
#hourmap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .9; }
.hero > .wrap { position: relative; z-index: 2; }
.hero-art { position: absolute; z-index: 0; }
@supports (mix-blend-mode: screen) { #hourmap { mix-blend-mode: screen; opacity: .7; } }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), transparent); z-index: 90; pointer-events: none; }

.cursor-glow { position: fixed; top: -160px; left: -160px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(233,226,207,.05), transparent 62%); will-change: transform; }

[data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .7s cubic-bezier(.22,.9,.24,1), transform .7s cubic-bezier(.22,.9,.24,1), filter .7s ease; }
[data-reveal].rv-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  #hourmap, .cursor-glow { display: none; }
}

/* ---- demo verdict stamp ---- */
.verdict.stamped { animation: stampIn .55s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes stampIn {
  0% { opacity: 0; transform: scale(1.5) rotate(-7deg); filter: blur(3px); }
  60% { opacity: 1; transform: scale(.97) rotate(-2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(-2deg); }
}
.demo-out .bar b[data-w] { transition: width .8s cubic-bezier(.22,.9,.24,1); }

/* ---- apply: two steps, details then slot ---- */
.app-step[hidden] { display: none; }
.step-k { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.step-k b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); font-size: 10px; }
.step-k em { font-style: normal; opacity: .65; }
.app-hint { font-size: 12.5px; color: var(--faint); margin: 10px 0 0; }
.app-hint.ok, .note.ok { color: var(--text); }
.bk-lead { max-width: 54ch; }
.bk-days { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 14px 0 12px; }
@media (max-width: 760px) { .bk-days { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.bk-day { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--surface-2); }
.bk-day-h { font-size: 11.5px; color: var(--text); margin-bottom: 8px; letter-spacing: .02em; }
.bk-chip { display: block; width: 100%; margin-bottom: 6px; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.bk-chip:last-child { margin-bottom: 0; }
.bk-chip:hover { color: var(--text); border-color: var(--accent); }
.bk-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bk-summary { font-size: 13px; color: var(--muted); margin: 0 0 14px; min-height: 1.2em; }
#app-book:disabled { opacity: .45; cursor: not-allowed; transform: none; }
#app-back { margin-top: 10px; display: inline-block; }

/* ---- apply: verdict, deposit, calendar ---- */
.verdict-box { border: 1px solid var(--line-strong); border-radius: 10px; padding: 18px; background: var(--surface-2); margin-bottom: 14px; }
.verdict-box[hidden] { display: none; }
.vb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vb-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.vb-score { font-family: var(--font-display); font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; }
.vb-p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; max-width: 62ch; }
.vb-next { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 8px; counter-reset: vbn; }
.vb-next li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.vb-next li b { color: var(--text); font-weight: 600; }
.vb-next li::before { counter-increment: vbn; content: counter(vbn); position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.cal-wrap { margin: 18px 0 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.cal-wrap[hidden] { display: none; }
.cal-lead { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 6px 0 12px; max-width: 64ch; }
.cal-lead b { color: var(--text); }
#cal-slot { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vet-rules { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.vet-rules summary { cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vet-rules summary:hover { color: var(--text); }
.vet-rules p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 10px 0; max-width: 68ch; }
.vet-rules ol { margin: 10px 0; padding-left: 18px; display: grid; gap: 6px; }
.vet-rules li { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Calendly's embed sheet is white and cannot be recoloured from outside. Frame it as paper
   instead of pretending it matches: a light card on a dark page reads as deliberate. */
#cal-slot { background: #F7F3EA; padding: 10px; border-radius: 10px; box-shadow: 0 24px 60px -34px rgba(0,0,0,.8); }
#cal-slot iframe { border-radius: 6px; display: block; }
.cal-note { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 10px 0 8px; }

/* ---- the machine, said on the page rather than in a mail ------------------- */
.machine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0 0; }
.gear { border: 1px solid var(--line); border-radius: 10px; padding: 20px 18px; background: var(--surface-2); position: relative; }
.gear-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--accent); }
.gear b { display: block; margin: 10px 0 8px; font-size: 15px; color: var(--text); font-weight: 600; }
.gear p { font-size: 13.5px; line-height: 1.62; color: var(--muted); margin: 0; }
.machine-foot { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 78ch; }
.machine-foot b { color: var(--text); }
@media (max-width: 860px) { .machine-grid { grid-template-columns: 1fr; } }

/* the scorer lost its text box, so the lead line carries the framing */
.sc-lead { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 10px 0 14px; max-width: 52ch; }

/* the scorer lost its text field, so its two columns left a hole under the buttons */
.scorer { grid-template-columns: minmax(0, 1fr); }
.sc-actions { margin-top: 4px; }

/* the email fallback is a footnote, not a fork in the road */
.alt-mail { margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px; }
.alt-mail:hover { color: var(--muted); }

/* the exact figure only appears for the lowest band, so it is asked once and explained */
.field-hint { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--faint); font-style: normal; }

/* ---- the comparison, replacing the dial ------------------------------------- */
.sc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.sc-card { border: 1px solid var(--line-strong); border-radius: 10px; padding: 16px; background: var(--surface-2); }
.sc-card.bad { border-top: 3px solid var(--hot); }
.sc-card.good { border-top: 3px solid var(--ok, #3f9c6b); }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sc-badge { font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.sc-card.bad .sc-badge { color: var(--hot); }
.sc-card.good .sc-badge { color: #6fce9d; }
.sc-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sc-text { margin: 0 0 12px; padding: 10px 12px; border-left: 2px solid var(--line-strong); font-size: 13px; line-height: 1.55; color: var(--muted); }
.sc-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sc-why li { display: grid; gap: 1px; }
.sc-why b { font-size: 12px; font-weight: 600; color: var(--text); }
.sc-why span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.sc-foot { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); max-width: 70ch; }
@media (max-width: 760px) { .sc-compare { grid-template-columns: 1fr; } }

/* the offer, stated before the fold: price, deliverable, and what happens if it is not there */
.hero-price { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); max-width: 58ch; }
.hero-price b { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; }
.hp-sub { color: var(--muted); }
.hero-cta-mobile { display: none; margin-top: 14px; }
.vb-guarantee { margin: 10px 0 12px; padding: 9px 12px; border-left: 2px solid var(--ok, #3f9c6b);
  font-size: 12.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .hero-cta-mobile { display: block; }
  .hero-cta-mobile .btn { width: 100%; justify-content: center; }
}

/* [hidden] must win over any display rule, or a hidden button still shows */
[hidden] { display: none !important; }
.src-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--faint); max-width: 62ch; }
.src-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* phones: the section links get their own row instead of vanishing.
   The earlier attempt set the strip to width:100% inside .island, but the island was flex-wrap:nowrap,
   so the strip collapsed to a 45px sliver and every link sat outside the viewport. Wrap the island. */
@media (max-width: 760px) {
  .nav { width: calc(100% - 20px); }
  .island {
    flex-wrap: wrap; border-radius: 18px; padding: 8px 8px 4px; row-gap: 4px;
  }
  .navlinks {
    display: flex !important; flex: 0 0 100%; order: 9; width: 100%;
    margin: 0; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-top: 1px solid var(--line); padding: 2px 0 0;
  }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a { padding: 10px 9px; font-size: 12px; white-space: nowrap; letter-spacing: .03em; }
}

/* ---- the fit check: eight questions, then the money ------------------------ */
.mcq { border: 1px solid var(--line-strong); border-radius: 16px; padding: 22px 24px 18px;
       background: var(--surface-2); max-width: 720px; margin: 18px 0 0; }
.mcq-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mcq-count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--faint); }
.mcq-fill { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.mcq-fill i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.mcq-q { font-family: var(--font-display); font-size: clamp(19px, 2.1vw, 24px); line-height: 1.22;
         letter-spacing: -.015em; margin: 0 0 16px; color: var(--text); }
.mcq-opts { display: grid; gap: 8px; }
.mcq-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px;
           text-align: left; width: 100%; padding: 14px 16px; border-radius: 10px; cursor: pointer;
           background: var(--surface); border: 1px solid var(--line); color: var(--text);
           font: inherit; font-size: 14.5px; transition: border-color .15s ease, background .15s ease; }
.mcq-opt:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.mcq-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.mcq-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); flex: 0 0 auto; }
.mcq-opt.on .mcq-dot { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.mcq-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; min-height: 24px; }
.mcq-hint { font-size: 12px; color: var(--faint); }

.pay-cta { border: 1px solid var(--accent); border-radius: 14px; padding: 20px 22px;
           background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); margin: 18px 0; }
.pay-amount { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.pay-amount small { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--muted);
                    letter-spacing: 0; margin-top: 2px; }
.btn-pay { width: 100%; justify-content: center; margin: 16px 0 10px; }
.pay-fine { font-size: 12px; color: var(--muted); line-height: 1.5; }
.fail-next { margin: 10px 0 0; padding-left: 18px; }
.fail-next li { margin-bottom: 6px; font-size: 14px; }
.fail-next a { color: var(--accent); }

/* ============ polish pass: rhythm, type, cards ============================== */
:root {
  --sp-section: clamp(88px, 11vw, 148px);
  --sp-block: clamp(28px, 3.4vw, 44px);
  --radius-card: 16px;
}
section { padding: var(--sp-section) 0; }
.sec-head { margin-bottom: var(--sp-block); }
.sec-head h2 { letter-spacing: -.025em; text-wrap: balance; }
.sec-head .note { max-width: 46ch; }

/* hero: tighter, calmer, one idea per line */
.hero { padding-top: clamp(96px, 12vw, 152px); }
.hero h1.display, h1.display { text-wrap: balance; letter-spacing: -.03em; }
.deck { max-width: 52ch; line-height: 1.6; }
.hero-price { margin-top: 22px; }

/* pricing boxes: price first, everything else on demand */
.tiers { gap: 14px; margin-top: 26px; }
.tier { border-radius: var(--radius-card); background: var(--surface-2);
        border: 1px solid var(--line); transition: transform .18s ease, border-color .18s ease; }
.tier:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.tier-head { padding: 22px 20px 20px; }
.tier-name { font-size: 15px; letter-spacing: .01em; color: var(--muted); font-family: var(--font-body);
             font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.tier-price { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1; }
.tier-per { display: block; font-size: 12px; color: var(--faint); margin-top: 4px; }
.tier-sub { font-size: 12px; color: var(--faint); margin-top: 6px; }
.tier-k { align-self: start; margin-top: 4px; }
.tier-x { font-size: 20px; }
.tier-head[aria-expanded="true"] { padding-bottom: 14px; }
.tier-body { padding: 0 20px 20px; }
.trow { padding: 12px 0; }
.trow b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 600; }
.trow span { font-size: 14px; line-height: 1.5; color: var(--text); }
.tier-cta { margin-top: 14px; font-size: 14px; }

/* case cards: one line and a number */
.case { border-radius: 14px; padding: 20px; }
.case h3 { font-size: 18px; line-height: 1.25; margin: 6px 0 8px; letter-spacing: -.01em; }
.c-one { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.c-who { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* the fit check sits on its own */
#apply .wrap { max-width: 760px; }
.mcq { margin-top: 8px; }

/* verdict blocks: calm, not shouty */
.verdict-box { border-radius: var(--radius-card); padding: 26px 24px; margin-top: 20px; }
.vb-k { font-size: 11px; letter-spacing: .14em; }
.vb-p { max-width: 54ch; }

@media (max-width: 760px) {
  section { padding: clamp(64px, 16vw, 88px) 0; }
  .tier-head { padding: 18px 16px; }
  .tier-body { padding: 0 16px 18px; }
  .mcq { padding: 18px 16px 16px; }
  .verdict-box { padding: 20px 18px; }
}

/* ---- contact before money ------------------------------------------------- */
.lead-form { display: grid; gap: 12px; max-width: 420px; margin: 6px 0 4px; }
.lead-form label { display: grid; gap: 5px; }
.lead-form label span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.lead-form label em { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px; opacity: .75; }
.lead-form input { width: 100%; padding: 13px 14px; border-radius: 10px; background: var(--surface);
                   border: 1px solid var(--line-strong); color: var(--text); font: inherit; font-size: 15px; }
.lead-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lead-form .btn { margin-top: 4px; justify-content: center; }
.lead-fine { font-size: 12px; color: var(--muted); margin: 0; }
.book-paths { display: grid; gap: 10px; justify-items: start; margin-top: 6px; }
.book-paths .btn { width: 100%; justify-content: center; }
.mcq-note { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; max-width: 46ch; line-height: 1.5; }
.vb-rec { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; margin: 4px 0 18px;
          font-size: 14px; color: var(--text); max-width: 54ch; line-height: 1.55; }

/* ---- proof cards: trade, problem, one number, what changed ---------------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px 20px;
        background: var(--surface-2); }
.c-who { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
         font-weight: 600; }
.c-prob { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 10px 0 12px; }
.c-num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 46px); line-height: .95;
         letter-spacing: -.035em; color: var(--accent); margin: 4px 0 2px; }
.c-num span { display: block; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.c-one { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.q-meta { display: block; font-size: 11px; color: var(--faint); letter-spacing: .04em; margin-top: 3px; }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; } }

/* ---- the four lines procurement looks for -------------------------------- */
.procur { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 160px;
          gap: 12px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.procur li { display: grid; gap: 3px; font-size: 13px; }
.procur b { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.procur span { color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.procur li:last-child { align-content: center; }
.procur a { color: var(--accent); font-size: 13px; }
@media (max-width: 860px) { .procur { grid-template-columns: 1fr 1fr; } }

/* ---- the leak calculators -------------------------------------------------- */
.calc { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px 24px 20px;
        background: var(--surface-2); max-width: 780px; }
.calc-lede { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; max-width: 60ch; }
.calc-lede b { color: var(--text); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.calc-grid label { display: grid; gap: 5px; }
.calc-grid label span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.calc-grid input { width: 100%; padding: 12px 13px; border-radius: 9px; background: var(--surface);
                   border: 1px solid var(--line-strong); color: var(--text); font: inherit; font-size: 16px;
                   font-variant-numeric: tabular-nums; }
.calc-grid input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 26px; margin: 22px 0 6px;
            padding-top: 18px; border-top: 1px solid var(--line); }
.co-main b { font-family: var(--font-display); font-size: clamp(32px, 4vw, 46px); letter-spacing: -.03em;
             color: var(--text); display: block; line-height: 1; }
.co-main span, .co-side span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.co-side b { display: block; font-size: 20px; letter-spacing: -.01em; color: var(--accent);
             font-variant-numeric: tabular-nums; }
.calc-foot { font-size: 12px; color: var(--faint); line-height: 1.55; margin: 14px 0 0; max-width: 62ch; }
.systems { margin: 26px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 66ch; }
.systems b { color: var(--text); font-weight: 600; }
.pstats { display: none; }

/* ---- honest dates, evidence, in-article quotes ------------------------------ */
.stamp { margin-top: 14px; font-size: 12px; letter-spacing: .04em; color: var(--faint);
         text-transform: uppercase; }
.stamp::before { content: ""; display: inline-block; width: 18px; height: 1px;
                 background: var(--line-strong); vertical-align: middle; margin-right: 9px; }
.evidence { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
            margin: 30px 0 6px; padding: 22px 24px; border-radius: var(--radius-card);
            border: 1px solid var(--line); background: var(--surface-2); }
.ev-num { text-align: right; padding-right: 4px; }
.ev-num b { display: block; font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px);
            line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.ev-num span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ev-who { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
          margin-bottom: 8px; }
.ev-body p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ev-line { color: var(--text) !important; font-weight: 500; }
.ev-changed { color: var(--text) !important; }
.ev-changed::before { content: "\2192  "; color: var(--accent); }
blockquote.inq { margin: 26px 0 6px; padding: 20px 24px; border-left: 2px solid var(--accent);
                background: var(--surface-2); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
blockquote.inq p { margin: 0 0 8px; font-size: 17px; line-height: 1.55; color: var(--text); }
blockquote.inq cite { font-style: normal; font-size: 12px; letter-spacing: .06em;
                      text-transform: uppercase; color: var(--faint); }
@media (max-width: 620px) {
  .evidence { grid-template-columns: 1fr; gap: 10px; }
  .ev-num { text-align: left; }
}

/* ---- the contact step has to be obvious to act on ---------------------------- */
.lead-fine { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.lead-fine a.lead-send { color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
                         font-weight: 600; }
.lead-fine .lead-skip { display: inline-block; margin-left: 6px; padding: 7px 13px; border-radius: 999px;
                        border: 1px solid var(--line-strong); background: var(--surface);
                        color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
                        cursor: pointer; }
.lead-fine .lead-skip:hover { border-color: var(--accent); color: var(--accent); }

/* ---- small products -------------------------------------------------------- */
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.prod { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: var(--radius-card);
        border: 1px solid var(--line); background: var(--surface-2); text-decoration: none;
        transition: border-color .18s ease, transform .18s ease; }
.prod:hover { border-color: var(--accent); transform: translateY(-2px); }
.prod-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.prod-h { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: -.01em; color: var(--text); line-height: 1.25; }
.prod-l { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.prod-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px;
             padding-top: 12px; border-top: 1px solid var(--line); }
.prod-p { font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.prod-go { font-size: 12px; color: var(--accent); font-weight: 600; }