/* Kiddy's Blueprint v3: shared design system.
   Dark premium fintech. DM Sans sentence case, sticky blurred nav, glass cards,
   ONE rose glow and ONE gradient phrase per page.
   Page agents use these classes; page-level <style> blocks only handle layout.

   Deleted in v3 (strip the markup): .slot .slot-reel @keyframes slot, .sticker,
   .rubric-slug, .frame-tag, .hero-shape, .ticker .ticker-track @keyframes ticker,
   3px button borders, --r-card, --r-tile, all uppercase display type. */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-400:#f43f5e; --rose-500:#e11d48;
  --rose-600:#be123c; --rose-700:#9f1239; --rose-900:#881337;
  --ink-900:#08080b; --ink-800:#0e0e12; --ink-700:#17171d; --ink-600:#1f1f27; --ink-500:#2a2a34;
  --profit:#22c55e;
  --page:var(--ink-900);
  --band:#0c0c11;
  --surface:var(--ink-800);
  --surface-2:var(--ink-700);
  --line:var(--ink-500);
  --text:var(--rose-50);
  --text-body:rgba(255,241,242,.86);
  --text-muted:rgba(255,241,242,.62);
  --hot:var(--rose-500);
  --hot-deep:var(--rose-600);
  --hot-text:var(--rose-400);
  --on-hot:var(--ink-900);
  --paper:var(--rose-50);

  /* Type: the same DM Sans the app (dashboard, admin, login) already uses. */
  --font-display:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --font-head:var(--font-display); /* legacy alias, do not use in new markup */

  /* Radii: 20px cards, 14px buttons and inputs, 999px chips only. */
  --r-xl:24px; --r-lg:20px; --r-md:14px; --r-sm:11px; --pill:999px;

  /* Hairlines and glass */
  --edge:rgba(255,255,255,.08);
  --edge-soft:rgba(255,255,255,.06);
  --edge-strong:rgba(255,255,255,.12);
  --glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));

  --glow-cta:0 10px 30px -10px rgba(225,29,72,.55);
  --glow-cta-hi:0 14px 38px -10px rgba(225,29,72,.62);
  --shadow-card:0 18px 46px -22px rgba(0,0,0,.8);

  /* Motion tokens. No approximated curves. */
  --ease:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --dur:.22s;

  --w-page:1240px; --w-wide:1440px; --w-read:68ch; --gutter:clamp(1rem,5vw,3.5rem);
}

/* ----------------------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.65 var(--font-body);color:var(--text-body);background:var(--page);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0}
ul[class],ol[class]{list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
main{display:block}
::selection{background:var(--hot);color:#fff}
:focus-visible{outline:2px solid var(--rose-400);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ------------------------------------------------------------- 3. Type scale */
h1,.h1{font:800 clamp(2.5rem,1.6rem + 4.2vw,4.5rem)/1.05 var(--font-display);letter-spacing:-.035em;color:var(--text);text-wrap:balance}
h2,.h2{font:800 clamp(1.875rem,1.4rem + 2.2vw,3rem)/1.1 var(--font-display);letter-spacing:-.03em;color:var(--text);text-wrap:balance}
h3,.h3{font:700 1.375rem/1.25 var(--font-display);letter-spacing:-.02em;color:var(--text)}
h4,.h4{font:600 1.0625rem/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text)}
p{text-wrap:pretty}

/* The ONE gradient phrase per page. Falls back to solid rose where clipping is unsupported. */
.grad{color:var(--hot-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:linear-gradient(103deg,#fff 12%,#ffe4e6 46%,#f43f5e 92%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}

/* The only uppercase on the site: eyebrow labels and mono stat labels. */
.eyebrow{display:inline-block;font:600 .8125rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--hot-text)}
.lead{font:400 clamp(1.0625rem,1rem + .4vw,1.25rem)/1.6 var(--font-body);color:var(--text-body);max-width:60ch}
.prose{max-width:var(--w-read)}
.prose p + p{margin-top:1rem}
.muted{color:var(--text-muted)}
.num,.tabular{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.stat-figure{display:block;font:700 clamp(1.875rem,1.4rem + 1.6vw,2.75rem)/1.05 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:-.02em}
.stat-figure.profit{color:var(--profit)}
.stat-label{margin-top:.45rem;font:500 .8125rem/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.text-link{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:rgba(244,63,94,.6);text-decoration-thickness:1px;text-underline-offset:4px;transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.text-link:hover{color:var(--hot-text);text-decoration-color:var(--hot-text)}
.price-line{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.price-line .num{font:700 clamp(2.25rem,1.7rem + 1.8vw,3rem)/1 var(--font-mono);letter-spacing:-.03em;color:var(--text)}
.price-line small{font:400 1rem/1.3 var(--font-body);color:var(--text-muted)}
.cadence{display:inline-flex;align-items:center;padding:.25rem .7rem;border-radius:var(--pill);background:rgba(225,29,72,.13);border:1px solid rgba(244,63,94,.28);color:var(--hot-text);font:600 .8125rem/1.5 var(--font-body);letter-spacing:.02em;white-space:nowrap}
.cadence.paid{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.3);color:var(--profit)}
.cadence.passed{background:rgba(225,29,72,.13);border-color:rgba(244,63,94,.28);color:var(--hot-text)}
.cadence.funded{background:rgba(255,228,230,.12);border-color:rgba(255,228,230,.24);color:var(--rose-100)}
.cadence.ink{background:rgba(255,255,255,.06);border-color:var(--edge);color:var(--text-body)}

/* --------------------------------------------------------- 4. Layout rhythm */
.container{max-width:var(--w-page);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4.5rem,9vw,7.5rem)}
.section-tight{padding-block:clamp(2.5rem,5vw,4rem)}
.band{background:var(--band)}
/* Hairline only where two same-coloured sections meet. */
.band + .band,
.section:not(.band) + .section:not(.band){border-top:1px solid var(--edge-soft)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(18px,3vw,3.5rem);align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,3.5rem);align-items:start}
.stack{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
@media (max-width:1000px){.split,.grid-3{grid-template-columns:1fr}}
@media (max-width:700px){.grid-2,.split-even{grid-template-columns:1fr}.grid-2,.grid-3,.split,.split-even,.stack{gap:12px}}

/* ------------------------------------- 5. Nav: floating glass pill that tucks
   v4: the sticky bar itself is an invisible rail. The pill inside it is the nav.
   Sticky, not fixed, so every page keeps its flow space and nothing overlaps. */
.nav{position:sticky;top:0;z-index:900;background:transparent;border-bottom:0;padding:16px var(--gutter) 12px;transition:padding-top .4s var(--ease)}
.nav.is-stuck{padding-top:9px}
.nav .nav-inner{display:flex;align-items:center;gap:1rem;min-height:60px;width:100%;max-width:1120px;margin-inline:auto;padding:8px 8px 8px 20px;border-radius:var(--pill);background:rgba(14,14,18,.74);box-shadow:inset 0 0 0 1px var(--edge-strong),0 18px 50px -22px rgba(0,0,0,.85);transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.nav.is-stuck .nav-inner{background:rgba(10,10,14,.9);box-shadow:inset 0 0 0 1px var(--edge-strong),0 20px 56px -20px rgba(0,0,0,.9)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav .nav-inner{-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
}
.brand{display:inline-flex;align-items:center;gap:.55rem;font:700 1.125rem/1 var(--font-display);letter-spacing:-.02em;color:var(--text);text-decoration:none;white-space:nowrap;flex:none}
.brand svg{width:26px;height:26px;flex:none}
.nav-links{display:flex;align-items:center;gap:.1rem;margin-inline:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 .8rem;border-radius:var(--pill);font:500 .9375rem/1 var(--font-body);color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:color .18s var(--ease),background-color .18s var(--ease)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-login{display:inline-flex;align-items:center;min-height:40px;padding:0 .6rem;font:500 .9375rem/1 var(--font-body);color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:color .18s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
  .nav-login:hover{color:var(--text)}
}
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--edge);border-radius:12px;background:rgba(255,255,255,.04);flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:none}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .25s var(--ease),opacity .18s var(--ease)}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile sheet: drops from under the bar, not a full rose takeover. */
.nav-sheet{display:none;width:100%;max-width:1120px;margin:10px auto 0;border:1px solid var(--edge-strong);border-radius:var(--r-xl);background:var(--sheet-bg,rgba(10,10,14,.97));padding:.5rem 1.25rem 1.25rem;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-sheet{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
}
body.menu-open .nav-sheet{display:block}
.nav-sheet a{display:block;padding:.85rem .25rem;font:500 1.0625rem/1.2 var(--font-body);color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--edge-soft)}
.nav-sheet a[aria-current="page"]{color:var(--text)}
.nav-sheet a:last-of-type{border-bottom:0}
.nav-sheet .btn{margin-top:1rem;width:100%;display:flex}
@media (max-width:1040px){.nav-links a.nav-contact{display:none}}
@media (max-width:900px){.nav-links,.nav-login{display:none}.nav-toggle{display:inline-flex}.nav-links{margin-inline:0}.nav-right{margin-left:auto}}
/* v4: the rose Join CTA stays in the pill on mobile. It is the whole point of it. */
@media (max-width:560px){
  .nav .nav-inner{padding-left:14px;gap:.5rem}
  .nav-right .btn-sm{padding:.55rem .8rem;font-size:.8125rem}
}
@media (max-width:380px){.brand span{display:none}}

/* -------------------------------------------------------------- 6. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.95rem 1.5rem;border:0;border-radius:var(--r-md);background:rgba(255,255,255,.05);color:var(--text);font:600 .9375rem/1 var(--font-body);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.btn-primary,.btn-rose{background:var(--rose-500);color:#fff;box-shadow:var(--glow-cta)}
.btn-ghost,.btn-outline{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--edge-strong)}
.btn-ink{background:var(--ink-900);color:var(--rose-50)}
.btn-ink-outline{background:transparent;color:var(--ink-900);border:1px solid rgba(8,8,11,.28)}
.btn-sm{min-height:40px;padding:.55rem 1rem;font-size:.875rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
.btn:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover,.btn-rose:hover{background:var(--rose-600);box-shadow:var(--glow-cta-hi)}
  .btn-ghost:hover,.btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(244,63,94,.4)}
  .btn-ink:hover{background:var(--ink-700)}
  .btn-ink-outline:hover{background:rgba(8,8,11,.08)}
}
@media (max-width:640px){.btn:not(.btn-inline):not(.btn-sm){width:100%}}
.checkout-note{display:block;margin-top:.6rem;font:400 .9375rem/1.45 var(--font-body);color:var(--text-muted)}

/* --------------------------------------------------- 7. Cards, tiles, media */
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--edge);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:rgba(244,63,94,.34);background:var(--glass-hi);transform:translateY(-3px);box-shadow:var(--shadow-card)}
}
.card-body{padding:1.5rem}
.card-body > * + *{margin-top:.75rem}
.card-body .cadence + h3,.card-body .cadence + .h3{margin-top:.9rem}
.card-body .btn{margin-top:1.25rem}
.card-media{aspect-ratio:4/3;overflow:hidden;background:var(--ink-700)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-rose{background:var(--hot);border-color:transparent;color:#fff}
.card-rose h3,.card-rose p,.card-rose .h3,.card-rose h2{color:#fff}
.card-rose .muted{color:rgba(255,255,255,.78)}
.card-rose .cadence{background:rgba(8,8,11,.28);border-color:rgba(255,255,255,.24);color:#fff}
.card-paper{background:var(--paper);border-color:transparent;color:var(--ink-900)}
.card-paper h3,.card-paper p,.card-paper .h3{color:var(--ink-900)}
.card-paper .muted{color:rgba(8,8,11,.66)}
.tile{padding:1.35rem;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--edge)}
/* Icon tile: inside cards only. */
.icon-tile{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:rgba(225,29,72,.11);color:var(--hot-text);flex:none}
.icon-tile svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.caption{margin-top:1rem;display:flex;flex-direction:column;gap:.35rem}
.cap-slug{font:600 .8125rem/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--hot-text)}
.cap-voice{font:400 1rem/1.55 var(--font-body);color:var(--text-body)}
.avatar{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid var(--edge);color:var(--text);font:600 .9375rem/1 var(--font-display);flex:none}

/* --------------------------------------------------------------- 8. Ticks */
.ticks{display:flex;flex-direction:column;gap:.6rem}
.ticks li{position:relative;padding-left:1.9rem;color:var(--text-body)}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:1.15rem;height:1.15rem;background:var(--profit);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}
.card-rose .ticks li,.ctaband .ticks li{color:rgba(255,255,255,.92)}
.card-rose .ticks li::before,.ctaband .ticks li::before{background:#fff}

/* --------------------------- 9. Hero: ONE glow, ONE gradient phrase per page */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,4rem);align-items:center;padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,7vw,6rem)}
/* The single radial rose glow. Hero only, never on a mid-page section. */
.hero-glow{position:absolute;left:50%;top:0;width:100%;max-width:1400px;height:640px;transform:translate(-50%,-22%);pointer-events:none;background:radial-gradient(1100px 520px at 50% -15%,rgba(225,29,72,.16),transparent 62%);z-index:0}
.hero > *:not(.hero-glow){position:relative;z-index:1}
.hero-copy > * + *{margin-top:1.25rem}
.hero-copy .lead{margin-top:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:1.5rem;font:500 .9375rem/1.4 var(--font-body);color:var(--text-muted)}
.hero-meta span{display:inline-flex;align-items:center;gap:.4rem}
.hero-meta svg{width:15px;height:15px;stroke:var(--profit);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-visual{position:relative}
.hero-card{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--edge);box-shadow:var(--shadow-card)}
.hero-card img,.hero-card video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.hero-caption{margin-top:1rem;display:flex;flex-direction:column;gap:.35rem}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.hero-visual{max-width:560px}}

/* ------------------------------------------------------------ 10. Stat line */
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.statline-2{grid-template-columns:1fr 1fr}
.statline > *{padding:1.25rem 1.35rem;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--edge)}
@media (max-width:700px){.statline{grid-template-columns:1fr 1fr;gap:12px}}

/* ------------------------------------------------------ 11. The one CTA band */
.ctaband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;padding:clamp(2rem,4vw,3.25rem);border-radius:var(--r-xl);background:linear-gradient(135deg,var(--rose-600),var(--rose-500) 62%,var(--rose-400));color:#fff}
.ctaband h2,.ctaband h3{max-width:18ch;color:#fff}
.ctaband p{max-width:52ch;margin-top:.85rem;color:rgba(255,255,255,.9)}
.ctaband .eyebrow{color:rgba(255,255,255,.82)}
.ctaband-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.ctaband .btn-primary,.ctaband .btn-rose{background:var(--ink-900);color:var(--rose-50);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.ctaband .btn-ghost,.ctaband .btn-outline{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);color:#fff}
@media (hover:hover) and (pointer:fine){
  .ctaband .btn-primary:hover,.ctaband .btn-rose:hover{background:var(--ink-700)}
  .ctaband .btn-ghost:hover,.ctaband .btn-outline:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
}
@media (max-width:700px){.ctaband{flex-direction:column;align-items:stretch}.ctaband-actions{flex-direction:column}}

/* ----------------------------------------------------------- 12. Pull quote */
.pullquote{padding:clamp(1.75rem,3.5vw,3rem);border-radius:var(--r-xl);background:var(--glass);border:1px solid var(--edge)}
.pullquote p{font:600 clamp(1.375rem,1.1rem + 1.4vw,2rem)/1.3 var(--font-display);letter-spacing:-.02em;color:var(--text);max-width:30ch;text-wrap:balance}
.pullquote cite{display:block;margin-top:1.25rem;font:500 .8125rem/1 var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}

/* -------------------------------------------------------- 13. Numbered steps */
.numbered{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);counter-reset:step}
.numbered > *{counter-increment:step;padding:1.5rem;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--edge)}
.numbered > *::before{content:counter(step,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:1rem;border-radius:11px;background:rgba(225,29,72,.11);color:var(--hot-text);font:700 .875rem/1 var(--font-mono);font-variant-numeric:tabular-nums}
.numbered-title{font:700 1.125rem/1.3 var(--font-display);letter-spacing:-.02em;color:var(--text);margin-bottom:.5rem}
.numbered-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.numbered{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.numbered{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ 14. FAQ */
.faq{max-width:820px}
.faq-item{border-radius:var(--r-md);background:var(--glass);border:1px solid var(--edge);margin-bottom:10px;padding:0 1.25rem;transition:border-color .22s var(--ease)}
.faq-item.open,details.faq-item[open]{border-color:rgba(244,63,94,.28)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:60px;padding:1rem 0;border:0;background:none;text-align:left;font:600 1.0625rem/1.35 var(--font-display);letter-spacing:-.01em;color:var(--text);cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-mark{flex:none;width:28px;height:28px;border-radius:9px;background:rgba(225,29,72,.13);position:relative}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--hot-text);border-radius:2px}
.faq-mark::before{left:8px;top:13px;width:12px;height:2px}
.faq-mark::after{left:13px;top:8px;width:2px;height:12px;transition:transform .22s var(--ease)}
.faq-item.open .faq-mark::after,details.faq-item[open] .faq-mark::after{transform:scaleY(0)}
.faq-a{display:none;padding:0 0 1.25rem;max-width:68ch;color:var(--text-body)}
.faq-item.open .faq-a,details.faq-item[open] .faq-a{display:block}

/* -------------------------------------------------------- 15. Received stamp */
.received{display:inline-flex;flex-direction:column;align-items:center;padding:1.25rem 2rem;border-radius:var(--r-lg);background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);color:var(--text);text-align:center}
.received-word{font:700 1.5rem/1.15 var(--font-display);letter-spacing:-.02em;color:var(--profit)}
.received-meta{margin-top:.4rem;font:500 .8125rem/1.3 var(--font-mono);letter-spacing:.06em;color:var(--text-muted)}

/* ----------------------------------------------------------------- 16. Forms */
.form{display:flex;flex-direction:column;gap:1.1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.form-row{grid-template-columns:1fr;gap:12px}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font:500 .8125rem/1 var(--font-body);letter-spacing:.02em;color:var(--text-muted)}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:.85rem 1rem;background:var(--field-bg,rgba(255,255,255,.04));border:1px solid var(--edge);border-radius:var(--r-md);font:400 16px/1.5 var(--font-body);color:var(--text);outline:none;transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--field-ph,rgba(255,241,242,.42))}
.field input:focus,.field textarea:focus,.field select:focus{background:var(--field-bg-focus,rgba(255,255,255,.06));border-color:rgba(244,63,94,.55);box-shadow:0 0 0 3px rgba(225,29,72,.16)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f43f5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;padding-right:3rem}
.field .error{font:400 .875rem/1.4 var(--font-body);color:var(--rose-400);display:none}
.field.invalid .error{display:block}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--rose-400)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;align-self:flex-start;flex:none;min-height:42px;padding:0 1.1rem;border:1px solid var(--edge-strong);border-radius:var(--pill);background:rgba(255,255,255,.03);font:500 .9375rem/1 var(--font-body);color:var(--text-body);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.chip.selected,.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:rgba(225,29,72,.16);border-color:rgba(244,63,94,.5);color:var(--text)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:rgba(244,63,94,.4);color:var(--text)}}
.check{display:flex;align-items:flex-start;gap:.75rem;font:400 .9375rem/1.55 var(--font-body);color:var(--text-body);cursor:pointer}
.check input{width:20px;height:20px;min-height:0;margin:.2rem 0 0;padding:0;flex:none;accent-color:var(--hot)}
.form-error{display:none;padding:.9rem 1.1rem;border-radius:var(--r-md);background:rgba(225,29,72,.12);border:1px solid rgba(244,63,94,.3);color:var(--rose-100);font-weight:500}
.form-error.show{display:block}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------- 17. Chromeless funnel slim bar */
.slimbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--gutter);max-width:var(--w-wide);margin:0 auto;border-bottom:1px solid var(--edge-soft)}
.slimbar-actions{display:flex;gap:.5rem;align-items:center}
@media (max-width:520px){.slimbar-actions .btn-sm{display:none}}

/* --------------------------------------------------------------- 18. Footer */
.site-footer{background:var(--band);color:var(--text);padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid var(--edge-soft);margin-top:clamp(2rem,4vw,3.5rem)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem}
.footer-line{font:700 clamp(1.5rem,1.1rem + 1.6vw,2.25rem)/1.2 var(--font-display);letter-spacing:-.025em;color:var(--text);max-width:22ch}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:clamp(2.5rem,4vw,3.5rem)}
.footer-cols h4{font:600 .8125rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--hot-text);margin-bottom:.9rem}
.footer-cols a{display:block;min-height:36px;color:var(--text-muted);text-decoration:none;font-weight:400;transition:color .18s var(--ease)}
.footer-cols a:hover{color:var(--text)}
.imprint{display:flex;flex-wrap:wrap;gap:.4rem 1rem;padding:1.25rem 0;margin-top:2.5rem;border-top:1px solid var(--edge-soft);border-bottom:1px solid var(--edge-soft);font:400 .875rem/1.6 var(--font-body);color:var(--text-muted)}
.footer-copy{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;font:400 .875rem/1.6 var(--font-body);color:var(--text-muted)}
.footer-copy .brand{font-size:1rem}
.footer-copy .brand svg{width:20px;height:20px}
.footer-credit a{color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--edge);transition:color .18s var(--ease),border-color .18s var(--ease)}
.footer-credit a:hover{color:var(--text);border-bottom-color:currentColor}
@media (max-width:1000px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-cols{grid-template-columns:1fr}}

/* ----------------------------------------------- 19. Legacy v2 device no-ops
   These classes are DELETED as devices. The rules below only stop leftover
   markup from looking broken before the page agents strip it. */
.rubric{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.rubric-word{display:block}
.rubric-rule{display:flex;align-items:center;gap:.75rem;margin-top:.75rem}
.rubric-note{margin-top:.9rem;font:400 1.0625rem/1.6 var(--font-body);color:var(--text-muted);max-width:60ch}
.sticker,.frame-tag,.rubric-slug{display:inline-block;padding:0;background:none;border:0;transform:none;box-shadow:none;font:600 .8125rem/1.4 var(--font-body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--hot-text)}
.frame-tag small{font:400 .8125rem/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-muted)}
.hero-shape,.ticker,.slot{display:none}
.hero-pick{width:100%;transform:none}
.hero-line-1,.hero-line-3{padding-left:0}
h1 > span,h2 > span{display:inline}

/* ------------------------------------------------------------- 20. Motion
   Non-negotiable: content is legible with no JS and no motion.
   .reveal is opacity 1 by default. site.js adds html.js-motion ONLY after a
   rAF has fired with the document visible, and only then do we hide it. */
.reveal{opacity:1}
html.js-motion .reveal{opacity:0}
/* site.js adds .is-revealed as it starts the entrance, so the final state is held
   by CSS and never depends on the animation committing its own styles. */
html.js-motion .reveal.is-revealed{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .card:hover,.btn:active{transform:none!important}
}
@media (hover:none){
  .card:hover{transform:none;box-shadow:none}
}

/* ==========================================================================
   21. v4 LANDING COMPONENTS
   Entry's component vocabulary ported into the rose/ink palette and DM Sans.
   Nothing here redefines a colour, a font or a token. Nothing here is used by
   the eight other pages, so every existing class keeps working untouched.
   Everything degrades: no JS means no animation and full legibility.
   ========================================================================== */

/* --- 21.1 Eyebrow chip -----------------------------------------------------
   The plain .eyebrow label is unchanged for the other pages. This is the
   landing-page variant: the same uppercase mono label inside an outline pill
   with a rose dot. Uppercase is allowed here; it is an eyebrow. */
.eyebrow-chip{display:inline-flex;align-items:center;gap:8px;padding:.45rem .85rem;border-radius:var(--pill);border:1px solid rgba(244,63,94,.28);background:rgba(225,29,72,.1);font:500 .8125rem/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--hot-text)}
.eyebrow-chip .dot{width:6px;height:6px;border-radius:var(--pill);background:var(--rose-400);flex:none}

/* --- 21.2 Island button: a pill with a circular icon chip inside -----------
   .btn keeps its 14px radius everywhere else. .btn-island is the landing CTA. */
.btn-island{border-radius:var(--pill);gap:.75rem;padding:.85rem .55rem .85rem 1.5rem}
@supports selector(:has(*)){
  .btn-island:not(:has(.ico)){padding:.85rem 1.5rem}
}
.btn .lbl{line-height:1}
.btn .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--pill);background:rgba(255,255,255,.16);font-size:.9375rem;line-height:1;flex:none;transition:transform .3s var(--ease),background-color .2s var(--ease)}
.btn-ghost .ico,.btn-outline .ico{background:rgba(255,255,255,.09)}
.btn-ink .ico{background:rgba(255,241,242,.14)}
.btn-sm .ico{width:26px;height:26px;font-size:.8125rem}
.btn-sm.btn-island{padding:.4rem .4rem .4rem 1rem}
@media (hover:hover) and (pointer:fine){
  .btn-island:hover .ico{transform:translateX(3px)}
  .btn-primary.btn-island:hover .ico,.btn-rose.btn-island:hover .ico{background:rgba(255,255,255,.24)}
}
@media (prefers-reduced-motion:reduce){.btn-island:hover .ico{transform:none}}

/* --- 21.3 Aurora hero glow -------------------------------------------------
   Three blurred rose blobs on screen blend, drifting slowly. Replaces the flat
   .hero-glow radial on the landing page. HERO ONLY, one per page, as before.
   Sits inside .hero, so it must beat the `.hero > *:not(.hero-glow)` rule. */
.hero > .aurora{position:absolute;z-index:0}
/* overflow:hidden keeps the drifting blobs inside the hero. Nothing can push the
   page sideways, and the glow can never bleed into a mid-page section. */
.aurora{inset:-10% 0 auto;height:820px;pointer-events:none;filter:blur(58px);opacity:.72;overflow:hidden}
.aurora b{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora b:nth-child(1){width:min(520px,60vw);aspect-ratio:1;left:2%;top:70px;background:radial-gradient(circle,rgba(225,29,72,.56),transparent 66%)}
.aurora b:nth-child(2){width:min(440px,54vw);aspect-ratio:1;right:4%;top:0;background:radial-gradient(circle,rgba(190,18,60,.46),transparent 66%)}
.aurora b:nth-child(3){width:min(360px,48vw);aspect-ratio:1;left:38%;top:230px;background:radial-gradient(circle,rgba(244,63,94,.36),transparent 66%)}
html.js-motion .aurora b{animation:kfx-drift 20s var(--ease-in-out) infinite alternate}
html.js-motion .aurora b:nth-child(2){animation-delay:-7s}
html.js-motion .aurora b:nth-child(3){animation-delay:-13s}
@keyframes kfx-drift{to{transform:translate3d(38px,28px,0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){html.js-motion .aurora b{animation:none}}

/* --- 21.4 Double-bezel card: screenshots as real product windows ----------- */
.bezel{padding:8px;border-radius:calc(var(--r-xl) + 8px);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--edge-soft),0 30px 70px -34px rgba(0,0,0,.9)}
.bezel > .core{overflow:hidden;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 1px 1px rgba(255,255,255,.05),inset 0 0 0 1px var(--edge)}
.core-bar{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid var(--edge-soft);background:rgba(255,255,255,.02)}
.core-dots{display:flex;gap:5px;flex:none}
.core-dots i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,241,242,.18)}
.core-bar span{min-width:0;font:500 .8125rem/1 var(--font-mono);letter-spacing:.01em;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.core-shot{display:block;overflow:hidden;background:var(--ink-700)}
.core-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.core-shot-tall{aspect-ratio:4/5}
.core-shot-hero{aspect-ratio:4/4.3}
.core-shot-wide{aspect-ratio:21/10}
.core-shot-box{aspect-ratio:4/3}
.tilt{transform:rotate(-1.5deg)}
/* A rotated box is wider than its own border box. Inset it so its rotated bounding
   box still fits the column and nothing gets a horizontal scroll. */
.tilt{width:calc(100% - 24px);margin-inline:auto}
@media (max-width:1000px){.tilt{transform:rotate(-1deg);width:calc(100% - 18px)}}
@media (max-width:700px){.tilt{transform:none;width:100%}}

/* --- 21.5 Stat band: 4 cells, hairline dividers, big honest figures -------- */
.statband{border-top:1px solid var(--edge-soft);border-bottom:1px solid var(--edge-soft);background:linear-gradient(180deg,var(--band),var(--page))}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.statgrid > div{padding:clamp(1.9rem,4vw,2.6rem) 1.25rem;text-align:center;border-right:1px solid var(--edge-soft)}
.statgrid > div:last-child{border-right:0}
.statgrid b{display:block;font:800 clamp(2rem,1.4rem + 2.2vw,3rem)/1 var(--font-display);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.statgrid span{display:block;margin-top:.55rem;font:500 .8125rem/1.4 var(--font-body);color:var(--text-muted)}
@media (max-width:720px){
  .statgrid{grid-template-columns:1fr 1fr}
  .statgrid > div:nth-child(2){border-right:0}
  .statgrid > div:nth-child(1),.statgrid > div:nth-child(2){border-bottom:1px solid var(--edge-soft)}
}

/* --- 21.6 Replaces-your-stack strip --------------------------------------- */
.stack-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.stack-strip .sx{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--edge);font:500 .875rem/1.3 var(--font-body);color:var(--text-muted)}
.stack-strip .sx s{text-decoration-thickness:1px;text-decoration-color:rgba(244,63,94,.75)}
.stack-strip .sx em{font-style:normal;font:500 .8125rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hot-text);flex:none}
.stack-lead{text-align:center;font:500 .8125rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.25rem}
.stack-foot{text-align:center;margin-top:1.25rem;font:600 clamp(1.0625rem,1rem + .5vw,1.375rem)/1.4 var(--font-display);letter-spacing:-.02em;color:var(--text)}

/* --- 21.7 Value marquee: edge-masked, paused on hover, JS-motion only ------ */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:10px;width:max-content}
html.js-motion .marquee-track{animation:kfx-marquee 46s linear infinite}
@media (hover:hover) and (pointer:fine){
  html.js-motion .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes kfx-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html.js-motion .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
.rep{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.75rem 1.15rem;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--edge);font:500 .875rem/1 var(--font-body);color:var(--text-body)}
.rep b{font:500 .8125rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hot-text)}

/* --- 21.8 Comparison table, our column highlighted ------------------------ */
.cmp-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--edge);background:var(--surface);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;min-width:720px;border-collapse:collapse;font:400 .9375rem/1.5 var(--font-body)}
.cmp th{padding:1.15rem 1.1rem;text-align:left;vertical-align:bottom;border-bottom:1px solid var(--edge-strong);font:500 .8125rem/1.3 var(--font-mono);letter-spacing:.01em;color:var(--text-muted)}
.cmp th.us{font:700 1.0625rem/1.2 var(--font-display);letter-spacing:-.02em;text-transform:none;color:var(--hot-text)}
.cmp td{padding:1rem 1.1rem;border-bottom:1px solid var(--edge-soft);color:var(--text-muted);vertical-align:top}
.cmp td:first-child{color:var(--text-body);font-weight:500}
.cmp tr:last-child td{border-bottom:0}
.cmp .us{background:linear-gradient(90deg,rgba(244,63,94,.09),rgba(244,63,94,.035))}
.cmp td.us{color:var(--text);font-weight:600}
.cmp .y{color:var(--profit);font-weight:700}
.cmp .n{color:var(--text-muted)}
@media (hover:hover) and (pointer:fine){
  .cmp tbody tr:hover td{background:rgba(255,255,255,.02)}
  .cmp tbody tr:hover td.us{background:linear-gradient(90deg,rgba(244,63,94,.14),rgba(244,63,94,.06))}
}
.cmp-note{margin-top:.9rem;font:400 .875rem/1.5 var(--font-body);color:var(--text-muted)}

/* --- 21.9 Pricing: the £50 card centre-stage, scaled up ------------------- */
.plans{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(16px,2.4vw,28px);align-items:center;max-width:1020px;margin-inline:auto}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(1.6rem,3vw,2.25rem);border-radius:var(--r-xl);background:var(--glass);border:1px solid var(--edge);transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.plan.hot{background:linear-gradient(180deg,rgba(244,63,94,.12),rgba(255,255,255,.02) 46%);border-color:rgba(244,63,94,.42);box-shadow:0 40px 90px -46px rgba(225,29,72,.75);transform:scale(1.035)}
.plan .badge{position:absolute;top:-13px;left:clamp(1.6rem,3vw,2.25rem);display:inline-flex;align-items:center;padding:.4rem .85rem;border-radius:var(--pill);background:var(--rose-500);color:#fff;font:500 .8125rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--glow-cta)}
.plan .pname{font:700 1.375rem/1.2 var(--font-display);letter-spacing:-.02em;color:var(--text)}
.plan .pfor{margin-top:.35rem;font:400 .9375rem/1.5 var(--font-body);color:var(--text-muted)}
.plan .price-line{margin-top:1.35rem}
.plan .pnote{margin-top:.5rem;font:400 .875rem/1.5 var(--font-body);color:var(--text-muted)}
.plan ul{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.7rem;flex:1}
.plan li{display:flex;gap:.7rem;align-items:flex-start;font:400 .9375rem/1.5 var(--font-body);color:var(--text-body)}
.plan li .tk{flex:none;width:18px;text-align:center;color:var(--profit);font-weight:700;line-height:1.5}
.plan li.plan-off{color:var(--text-muted);opacity:.72}
.plan li.plan-off .tk{color:var(--text-muted)}
.plan .btn{width:100%;justify-content:center}
.plan .checkout-note{margin-top:.7rem}
@media (hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-4px);border-color:rgba(244,63,94,.34)}
  .plan.hot:hover{transform:scale(1.035) translateY(-4px)}
}
@media (max-width:900px){
  .plans{grid-template-columns:1fr;max-width:520px;gap:22px}
  .plan.hot{transform:none}
  .plan.hot:hover{transform:translateY(-4px)}
}

/* --- 21.10 Nudge cards under the pricing grid ---------------------------- */
.nudge{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1020px;margin:clamp(2rem,4vw,3rem) auto 0}
.n-card{padding:1.35rem;border-radius:var(--r-lg);background:rgba(255,255,255,.028);border:1px solid var(--edge-soft)}
.n-card .n-ico{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:.85rem;border-radius:10px;background:rgba(225,29,72,.11);color:var(--hot-text)}
.n-card .n-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n-card h4{margin-bottom:.4rem}
.n-card p{font:400 .875rem/1.6 var(--font-body);color:var(--text-muted)}
@media (max-width:820px){.nudge{grid-template-columns:1fr}}

/* --- 21.11 Bento: never three identical columns --------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.5vw,18px)}
.bento .b-tall{grid-column:span 7;grid-row:span 2}
.bento .b-half{grid-column:span 5}
.bento .b-full{grid-column:span 12}
.bento .b-tall .card-media{flex:none;aspect-ratio:16/10;margin-top:auto}
.card-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.card-rose .icon-tile{background:rgba(8,8,11,.28);color:#fff}
@media (max-width:960px){
  .bento{grid-template-columns:1fr}
  .bento .b-tall,.bento .b-half,.bento .b-full{grid-column:auto;grid-row:auto}
  .bento .b-tall .card-media{aspect-ratio:4/3}
}

/* ==========================================================================
   22. v4 LANDING RICHNESS
   Depth and detail without breaking a single v3 rule: no new colour, no new
   face, no mid-page radial glow, no clipped corner, no rotation. Everything
   here is hairlines, gradients between existing tokens, and layout.
   ========================================================================== */

/* --- 22.1 Band with vertical depth ---------------------------------------
   Entry fades its bands into the page instead of butting a flat block against
   it. Same two tokens, just not a hard edge. */
.band-grad{background:linear-gradient(180deg,var(--page),var(--band) 18%,var(--band) 82%,var(--page))}

/* --- 22.2 Crest: the Linear/Vercel 1px lit top edge ---------------------- */
.card-crest::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(244,63,94,.55) 22%,rgba(255,241,242,.28) 50%,rgba(244,63,94,.55) 78%,transparent)}

/* --- 22.3 Floating proof chip on a product window ------------------------ */
.bezel{position:relative}
.shot-chip{position:absolute;left:18px;bottom:-16px;z-index:2;display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:var(--r-md);background:var(--ink-800);box-shadow:inset 0 0 0 1px var(--edge-strong),0 22px 48px -22px rgba(0,0,0,.95);font:600 .875rem/1 var(--font-body);color:var(--text);white-space:nowrap}
.shot-chip svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--profit);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* The chip hangs off the window, so the caption below it needs the clearance. */
.hero-visual .bezel + .hero-caption{margin-top:2.6rem}
@media (max-width:520px){.shot-chip{left:10px;bottom:-14px;padding:.6rem .8rem;font-size:.8125rem}
  .hero-visual .bezel + .hero-caption{margin-top:2.25rem}}

/* --- 22.4 The month rail: numbered steps hung off one hairline ------------
   Replaces four identical flat cards. The rail only draws on the wide layout,
   where the cells actually sit in a row. */
.numbered-rail{position:relative;padding-top:36px}
.numbered-rail > *{position:relative;overflow:visible;padding-top:2.1rem}
.numbered-rail > *::before{position:absolute;top:-36px;left:50%;transform:translateX(-50%);margin:0;width:44px;height:44px;border-radius:50%;background:var(--ink-800);box-shadow:inset 0 0 0 1px rgba(244,63,94,.45),0 0 0 7px var(--page);font-size:.8125rem}
.numbered-rail .step-when{position:absolute;top:1.15rem;left:0;right:0;text-align:center;font:500 .8125rem/1 var(--font-mono);letter-spacing:.06em;color:var(--text-muted)}
.numbered-rail .numbered-title,.numbered-rail p{text-align:center}
@media (min-width:1001px){
  .numbered-rail::before{content:"";position:absolute;left:12.5%;right:12.5%;top:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(244,63,94,.5) 10%,rgba(244,63,94,.5) 90%,transparent)}
}
@media (max-width:1000px){
  .numbered-rail{padding-top:36px}
  .numbered-rail > *::before{box-shadow:inset 0 0 0 1px rgba(244,63,94,.45)}
}

/* --- 22.5 Ledger: a short honest list as its own object ------------------ */
.ledger{margin-top:14px;padding:clamp(1.35rem,2.4vw,1.75rem);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--edge)}
.ledger h4{margin-bottom:1rem}
.ledger ul{display:grid;gap:.75rem}
.ledger li{display:flex;align-items:flex-start;gap:.75rem;font:400 .9375rem/1.5 var(--font-body);color:var(--text-body)}
.ledger .x{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(225,29,72,.13);color:var(--hot-text);font:700 .8125rem/1 var(--font-body)}

/* --- 22.6 FAQ beside an ask card ----------------------------------------- */
.faq-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(18px,3vw,3rem);align-items:start}
.faq-split .faq{max-width:none}
.ask-card{position:sticky;top:100px;padding:clamp(1.6rem,3vw,2rem);border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(244,63,94,.13),rgba(255,255,255,.02) 58%);border:1px solid rgba(244,63,94,.34)}
.ask-card p{margin-top:.75rem;font:400 .9375rem/1.6 var(--font-body);color:var(--text-body)}
.ask-card .btn{margin-top:1.35rem;width:100%;justify-content:center}
@media (max-width:900px){.faq-split{grid-template-columns:1fr}.ask-card{position:static}}

/* --- 22.7 Hero balance --------------------------------------------------- */
.hero-copy .eyebrow-chip{margin-bottom:.35rem}
@media (min-width:1001px){.hero{align-items:center}}

/* --- 22.8 Mentor split: signature block, columns optically centred -------- */
.sig{display:flex;align-items:center;gap:.85rem;margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid var(--edge-soft)}
.sig > div{display:flex;flex-direction:column;gap:.2rem}
.sig b{font:700 1rem/1.2 var(--font-display);letter-spacing:-.01em;color:var(--text)}
.sig span:not(.avatar){font:500 .8125rem/1.3 var(--font-mono);letter-spacing:.02em;color:var(--text-muted)}
@media (min-width:1001px){.mentor-split{align-items:center}}

/* --- 22.9 Showcase feature: the wide screenshot gets the full column ------
   A 900x420 shot squeezed into a half-width column is unreadable. Full width
   it renders above 1:1 and reads as a real product window. It also breaks the
   three-identical-rows rhythm the section had. */
/* The brief shot is 900x420. Framed at its own aspect so the whole window
   shows with no crop; a tighter crop cuts the breadcrumb mid-word. */
.core-shot-brief{aspect-ratio:900/420}

/* --- 22.10 Narrow-width safety ------------------------------------------
   Grid and flex items default to min-width:auto, so one nowrap string (the
   window title, a long CTA label) can push a whole column past the viewport.
   Pin them to 0 and let the ellipsis and the wrap do their job. */
.hero > *,.showrow > *,.split > *,.faq-split > *,.plans > *{min-width:0}
@media (max-width:400px){
  .btn-island{padding-left:1.1rem;gap:.55rem}
  .btn .ico{width:28px;height:28px}
}

/* --- 22.11 Full-width bento card: use the width, don't hug the left edge -- */
.card-row .card-body{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(1.25rem,4vw,3.5rem);align-items:center;padding:clamp(1.5rem,3vw,2.25rem)}
.card-row .card-body > *{margin-top:0}
.card-row .card-head{margin-bottom:.9rem}
.card-row .card-body > div{min-width:0}
.card-row h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.card-row p{font-size:1.0625rem;max-width:52ch}
@media (max-width:760px){
  .card-row .card-body{grid-template-columns:1fr;gap:.75rem}
  .card-row .card-head{margin-bottom:.75rem}
}

/* ─────────────────────────────────────────────────────────────
   23. CRAFT PASS
   Six fixes. Each solves a visible defect rather than adding a
   style, so none of them changes the look of the brand.
   ───────────────────────────────────────────────────────────── */

/* 23.1 Anchor targets. The nav is a floating pill about 76px tall with
   16px of air above it, so "Join for £50" jumping to #pricing used to
   land the heading underneath it. */
section[id], [id="pricing"], [id="faq"], [id="top"] { scroll-margin-top: 7rem; }

/* 23.2 The aurora is blurred and then clipped by its own overflow:hidden,
   which slices the blobs mid-intensity and draws a hard line across the
   bottom of the hero. Feather the layer so it fades out instead. */
.aurora {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}

/* 23.3 Section seams. The page alternates ink-900 and ink-800, and the two
   tones used to meet on a hard 1px line. Every .band now fades its own top
   and bottom edge into the page tone, so sections dissolve into each other.
   Painted as a background-image, so it sits behind all content and needs no
   markup change and no stacking context. */
.band {
  background-image: linear-gradient(
    to bottom,
    var(--page) 0,
    var(--band) 110px,
    var(--band) calc(100% - 110px),
    var(--page) 100%
  );
}
/* A band that opens or closes the page has nothing to blend into on that side. */
.band:first-of-type { background-image: linear-gradient(to bottom, var(--band) 0, var(--band) calc(100% - 110px), var(--page) 100%); }
.band:last-of-type  { background-image: linear-gradient(to bottom, var(--page) 0, var(--band) 110px, var(--band) 100%); }

/* 23.4 Primary buttons were a flat fill. A one-pixel inset highlight along the
   top edge is what makes a button read as a physical object rather than a
   coloured rectangle, and it costs nothing. */
.btn-primary, .btn-rose {
  background-image: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 62%);
  box-shadow: var(--glow-cta), inset 0 1px 0 rgba(255,255,255,.20);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-rose:hover {
    box-shadow: var(--glow-cta-hi), inset 0 1px 0 rgba(255,255,255,.26);
  }
}
/* On the rose band the buttons are ink, so the highlight has to be softer. */
.ctaband .btn-primary, .ctaband .btn-rose {
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 62%);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
}

/* 23.5 iOS Safari zooms the whole page when a focused input is under 16px,
   which throws the layout on the contact form, the one page that converts.
   Mobile only; desktop sizing is untouched. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; }
}

/* 23.6 Scrollbar, so the chrome does not sit outside the palette. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--page); }
  ::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 999px; border: 3px solid var(--page); }
  ::-webkit-scrollbar-thumb:hover { background: var(--rose-600); }
}
html { scrollbar-color: var(--ink-500) var(--page); scrollbar-width: thin; }

/* 23.7 The nav never actually stuck. body had overflow-x:hidden, and setting
   overflow on one axis makes the other compute to auto, which turns the body
   into a scroll container and silently disables position:sticky on every
   descendant. overflow-x:clip does the same clipping WITHOUT creating that
   container, so the nav sticks again. The hidden line is kept first as the
   fallback for engines that do not support clip. */
body { overflow-x: hidden; overflow-x: clip; }

/* 23.8 site.js injects the nav INTO #nav-mount, so the nav's parent was a div
   exactly as tall as the nav itself. A sticky element can only stick inside its
   parent's box, so it unstuck immediately. display:contents makes the mount
   form no box at all, which puts the nav in body's flow where it can stick for
   the length of the page. Same for the footer mount, for consistency. */
#nav-mount, #footer-mount { display: contents; }

/* ═════════════════════════════════════════════════════════════
   24. THE FUN PASS
   Mollison's shape language, not his typeface. The condensed
   uppercase face was the thing that read as another client's
   site, so it stays gone. What comes back is the playful
   geometry: stickers, a cut corner, a tilt on hover. DM Sans
   keeps the whole thing serious underneath.
   ═════════════════════════════════════════════════════════════ */

/* 24.1 Section labels become rotated stickers. Every page already uses
   .eyebrow, so this lands site-wide with no markup change. Alternating
   angles stop a page of them looking mechanically repeated. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .8rem;border-radius:9px 9px 9px 3px;
  /* rose-400 not rose-500: ink on 500 measures 4.26:1, which fails AA for
     text this size. On 400 it is 5.5:1 and the sticker still reads as brand. */
  background:var(--sticker,var(--rose-400));color:var(--on-hot);
  font:700 .8125rem/1.15 var(--font-body);letter-spacing:.1em;text-transform:uppercase;
  transform:rotate(-1.6deg);transform-origin:left center;
  box-shadow:0 4px 14px -8px rgba(225,29,72,.7);
}
.eyebrow.eyebrow-chip{border:0}
/* Hand-placed feel: nudge every other one the other way. */
section:nth-of-type(even) .eyebrow{transform:rotate(1.2deg)}
.eyebrow .dot{width:6px;height:6px;border-radius:999px;background:var(--on-hot);opacity:.55;flex:none}

/* 24.2 One cut corner. A print crop mark, not a whole new card shape:
   three corners keep the 20px radius, the bottom left is clipped. */
.card,.tile,.co-panel{border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 6px}
.bezel{border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 8px}

/* 24.3 A tilt on hover. Small enough to read as life rather than wobble,
   and gated so a touch device never gets a stuck hover state. */
@media (hover:hover) and (pointer:fine){
  .card:hover,.tile:hover{transform:translateY(-3px) rotate(-.35deg)}
  .card:nth-child(even):hover,.tile:nth-child(even):hover{transform:translateY(-3px) rotate(.35deg)}
}
@media (prefers-reduced-motion:reduce){
  .eyebrow{transform:none}
  section:nth-of-type(even) .eyebrow{transform:none}
  .card:hover,.tile:hover,.card:nth-child(even):hover,.tile:nth-child(even):hover{transform:none}
}

/* ═════════════════════════════════════════════════════════════
   25. CREAM THEME  [data-theme="cream"]
   Warm cream page, warm red accent, near-black boxes. The
   inversion of the dark site: the widgets become the dark
   objects sitting ON the paper instead of glass cut out of it.
   Only tokens change, so every component follows automatically.
   ═════════════════════════════════════════════════════════════ */
[data-theme="cream"]{
  /* Paper */
  --cream:#f7f2e8; --cream-2:#efe7d7; --cream-3:#e6dcc7;
  /* The boxes */
  --box:#121016; --box-2:#1b1820;
  /* A warmer red than the cool rose, because rose goes pink on cream. */
  --red-500:#c62234; --red-600:#a5152a; --red-400:#e03a4c;

  --page:var(--cream);
  --band:var(--cream-2);
  --surface:var(--box);
  --surface-2:var(--box-2);
  --line:var(--cream-3);

  /* Page-level type is ink on paper. */
  --text:#171319;
  --text-body:rgba(23,19,25,.84);
  --text-muted:rgba(23,19,25,.6);

  --hot:var(--red-500);
  --hot-deep:var(--red-600);
  --hot-text:var(--red-600);
  --on-hot:#fffaf2;
  --paper:var(--cream);
  --sticker:var(--red-500);
  /* The dark theme's #22c55e measures about 1.9:1 on cream and is unreadable.
     This darker green is 4.4:1 and still unmistakably "profit". */
  --profit:#15803d;
  --loss:#b91c1c;

  --edge:rgba(23,19,25,.14);
  --edge-soft:rgba(23,19,25,.09);
  --edge-strong:rgba(23,19,25,.22);
  --glass:linear-gradient(180deg,rgba(23,19,25,.03),rgba(23,19,25,.01));
  --glass-hi:linear-gradient(180deg,rgba(23,19,25,.05),rgba(23,19,25,.02));

  --glow-cta:0 10px 26px -12px rgba(198,34,52,.5);
  --glow-cta-hi:0 14px 34px -12px rgba(198,34,52,.58);
  --shadow-card:0 20px 44px -26px rgba(23,19,25,.45);
}
[data-theme="cream"] body{background:var(--cream)}

/* The boxes are dark objects on paper, so inside one the type tokens
   flip back to light. Custom properties re-scope to descendants, which
   is what makes a light page with dark widgets work at all. */
[data-theme="cream"] .card,
[data-theme="cream"] .tile,
[data-theme="cream"] .co-panel,
[data-theme="cream"] .bezel,
[data-theme="cream"] .nudge .n-card,
[data-theme="cream"] .plan,
[data-theme="cream"] .statband,
[data-theme="cream"] .numbered > *,
[data-theme="cream"] .ledger,
[data-theme="cream"] .pullquote,
[data-theme="cream"] .cmp-wrap{
  --text:#fdf8f1;
  --text-body:rgba(253,248,241,.86);
  --text-muted:rgba(253,248,241,.58);
  --edge:rgba(255,255,255,.10);
  --edge-soft:rgba(255,255,255,.07);
  --edge-strong:rgba(255,255,255,.16);
  --hot-text:#ff6d7d;
  background:var(--box);
  border-color:rgba(255,255,255,.10);
  color:var(--text-body);
  box-shadow:var(--shadow-card);
}
[data-theme="cream"] .card h1,[data-theme="cream"] .card h2,[data-theme="cream"] .card h3,
[data-theme="cream"] .co-panel h2,[data-theme="cream"] .plan h3{color:var(--text)}

/* The rose band inverts to a dark band so it still reads as the one
   loud object on the page rather than red-on-red. */
[data-theme="cream"] .ctaband{background:var(--box);color:#fdf8f1}
[data-theme="cream"] .ctaband h2,[data-theme="cream"] .ctaband p{color:#fdf8f1}
[data-theme="cream"] .ctaband .btn-primary,[data-theme="cream"] .ctaband .btn-rose{
  background:var(--red-500);color:#fffaf2;background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 62%)}

/* Nav is paper-toned glass with an ink hairline. */
[data-theme="cream"] .nav-inner{background:rgba(247,242,232,.82);border-color:rgba(23,19,25,.12)}
[data-theme="cream"] .nav.is-stuck .nav-inner{background:rgba(247,242,232,.94)}

/* The hero glow and aurora are built for a dark ground: on paper they
   turn to muddy smears, so they go and the hero sits clean. */
[data-theme="cream"] .hero-glow,[data-theme="cream"] .aurora{display:none}

/* Section seams: blend cream into cream, not ink into ink. */
[data-theme="cream"] .band{
  background-image:linear-gradient(to bottom,var(--cream) 0,var(--cream-2) 110px,
                   var(--cream-2) calc(100% - 110px),var(--cream) 100%)}

/* Comparison table sits on paper with ink rules. */
[data-theme="cream"] .cmp-wrap{background:var(--cream);border-color:var(--edge)}
[data-theme="cream"] table.cmp th,[data-theme="cream"] table.cmp td{border-color:rgba(23,19,25,.10)}

/* Scrollbar follows the paper. */
[data-theme="cream"] ::-webkit-scrollbar-track{background:var(--cream)}
[data-theme="cream"] ::-webkit-scrollbar-thumb{background:var(--cream-3);border-color:var(--cream)}
[data-theme="cream"] ::-webkit-scrollbar-thumb:hover{background:var(--red-500)}

/* The gradient headline is built white -> rose for a dark ground, so on cream
   its light half vanishes. Invert it: ink into red, so the phrase still lifts
   off the paper and still ends on the brand colour. */
[data-theme="cream"] .grad{
  background:linear-gradient(103deg,#171319 6%,#7d1226 46%,#c62234 92%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* The point of this theme is that every widget is a black object on paper.
   These four were painting cream on cream and disappearing, so they join the
   rule above and get an explicit fill (some had transparent backgrounds). */
[data-theme="cream"] .numbered > *,
[data-theme="cream"] .ledger,
[data-theme="cream"] .pullquote,
[data-theme="cream"] .cmp-wrap{
  background:var(--box);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 6px;
}
[data-theme="cream"] .pullquote{padding:clamp(1.5rem,3vw,2rem)}
[data-theme="cream"] .ledger{padding:clamp(1.25rem,2.5vw,1.6rem)}
/* Table sits inside a black box, so its rules and the highlighted column
   have to flip to light-on-dark too. */
[data-theme="cream"] table.cmp th,
[data-theme="cream"] table.cmp td{border-color:rgba(255,255,255,.09);color:var(--text-body)}
[data-theme="cream"] table.cmp .us{background:rgba(198,34,52,.16)}
[data-theme="cream"] table.cmp th.us{color:#ff8593}
/* The rail line joining the month steps was drawn for a dark ground. */
[data-theme="cream"] .numbered-rail::before{background:rgba(23,19,25,.18)}

/* Form fields have to follow the ground they sit on. The base values assume a
   dark page; on cream paper a 4% white fill is invisible and a near-white
   placeholder cannot be read at all. These tokens flip with context, so a form
   on paper gets a white field with ink placeholder, and the same form inside a
   black widget box keeps the dark treatment. */
[data-theme="cream"]{
  --field-bg:#fffdf9;
  --field-bg-focus:#ffffff;
  --field-ph:rgba(23,19,25,.58);
}
[data-theme="cream"] .card,
[data-theme="cream"] .co-panel,
[data-theme="cream"] .tile{
  --field-bg:rgba(255,255,255,.06);
  --field-bg-focus:rgba(255,255,255,.09);
  --field-ph:rgba(253,248,241,.45);
}

/* ═════════════════════════════════════════════════════════════
   26. SCROLL PERFORMANCE
   Measured: 12% of frames dropped while scrolling the homepage,
   p95 frame time 33ms against a 16.7ms budget. Three causes,
   all of them the same mistake: asking the compositor to
   re-rasterise a large blurred area on every single frame.
   ═════════════════════════════════════════════════════════════ */

/* 26.1 The aurora was filter:blur(58px) on a PARENT whose three children
   animate transform. A blur on an ancestor cannot be cached while its
   subtree moves, so the whole layer re-rasterised every frame. The blobs
   are radial gradients and already soft, so the huge blur was buying
   almost nothing. Blur each blob instead, much smaller, and let each one
   be its own cheap layer. */
.aurora{filter:none}
.aurora b{filter:blur(26px);contain:paint}

/* 26.2 Nothing off screen should animate. Both of these ran permanently,
   burning frames while the user read something else entirely. site.js
   toggles .anim-off when the section leaves the viewport. */
.aurora.anim-off b,
.marquee.anim-off .marquee-track{animation-play-state:paused}

/* 26.3 The nav blur is the other per-frame repaint. 20px saturate over a
   wide bar is expensive and visually indistinguishable from 12px here. */
.nav-inner{backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25)}

/* 26.4 will-change on three permanently-animating blobs kept three extra
   layers alive for the life of the page. The animation itself promotes
   them while it runs, so the hint is pure cost. */
.aurora b{will-change:auto}

/* Any block that paints itself with the dark --surface tokens on the cream
   theme must ALSO re-scope its text tokens, or it inherits the page's ink and
   renders black on black. .payout-gate and .riskwarn were added to results.html
   after the original dark-box list was written, so they were invisible: the
   heading measured 1.03:1 against its own background. */
[data-theme="cream"] .payout-gate,
[data-theme="cream"] .riskwarn{
  --text:#fdf8f1;
  --text-body:rgba(253,248,241,.86);
  --text-muted:rgba(253,248,241,.62);
  --edge:rgba(255,255,255,.10);
  --edge-strong:rgba(255,255,255,.18);
  --hot-text:#ff8593;
  color:var(--text-body);
  border-color:rgba(255,255,255,.12);
}
[data-theme="cream"] .payout-gate h3,
[data-theme="cream"] .riskwarn strong{color:var(--text)}
[data-theme="cream"] .payout-gate p{color:var(--text-body)}

/* .card-paper means "the light card". In the dark theme it is a pale card on an
   ink page. The cream theme's blanket dark-box rule was overriding its
   background but NOT its children's ink text (.card-paper p sets ink
   explicitly), so paragraphs and .btn-ink-outline rendered at 1.06:1 inside a
   near-black box. Restore its intent instead: on cream it is a WHITE card on
   the warm page, which keeps every ink-on-paper child correct. */
[data-theme="cream"] .card.card-paper,
[data-theme="cream"] article.card-paper,
[data-theme="cream"] div.card-paper{
  --text:#171319;
  --text-body:rgba(23,19,25,.84);
  --text-muted:rgba(23,19,25,.6);
  --edge:rgba(23,19,25,.14);
  --hot-text:var(--red-600);
  background:#fffdf9;
  border:1px solid rgba(23,19,25,.14);
  color:var(--text-body);
  box-shadow:0 18px 40px -30px rgba(23,19,25,.4);
}
[data-theme="cream"] .card-paper h1,[data-theme="cream"] .card-paper h2,
[data-theme="cream"] .card-paper h3,[data-theme="cream"] .card-paper .h3{color:#171319}
[data-theme="cream"] .card-paper p{color:rgba(23,19,25,.84)}
[data-theme="cream"] .card-paper .muted{color:rgba(23,19,25,.6)}
[data-theme="cream"] .card-paper .btn-ink-outline{color:#171319;border-color:rgba(23,19,25,.3)}
[data-theme="cream"] .card-paper .btn-ink{background:#171319;color:#fffdf9}

/* ═════════════════════════════════════════════════════════════
   27. THEME TOGGLE
   Injected by site.js into whichever bar the page has. Sized to
   a 44px hit area while drawing as a 38px control.
   ═════════════════════════════════════════════════════════════ */
.theme-toggle{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:38px;height:38px;padding:0;margin-right:.15rem;
  border:1px solid var(--edge);border-radius:var(--r-sm);
  background:transparent;color:var(--text-body);cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.theme-toggle svg{width:17px;height:17px;display:block}
/* The visible control is 38px but the tappable one is 44px. */
.theme-toggle::after{content:"";position:absolute;inset:-3px}
@media (hover:hover) and (pointer:fine){
  .theme-toggle:hover{background:var(--surface-2);border-color:var(--edge-strong);color:var(--text)}
}
.theme-toggle:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
@media (max-width:420px){ .theme-toggle{width:36px;height:36px} }

/* The mobile menu sheet hardcoded a near-black fill. Under the light theme that
   left dark links on a dark panel at 1.08:1, invisible the moment anyone opened
   the burger menu on a phone. It follows the theme now. */
[data-theme="cream"]{ --sheet-bg:rgba(255,253,249,.98); }
[data-theme="cream"] .nav-sheet{ border-color:rgba(23,19,25,.16); box-shadow:0 22px 50px -30px rgba(23,19,25,.45); }
[data-theme="cream"] .nav-sheet a{ border-bottom-color:rgba(23,19,25,.1) }