/* ===========================================================================
   ELEVATE PUBLISHERS — one page
   Art direction: "orange holographic archive"
   One ground (near-black), one light (warm orange), one type system.
   =========================================================================== */

/* ---------- 0. fonts (self-hosted) ------------------------------------ *
   Served from this server (assets/fonts/), never from Google, so a visit
   sends no data to a third party. Latin + Latin Extended only. All four
   families are under the SIL Open Font License. Inter and Outfit are
   variable fonts: one file carries every weight.                        */
/* Geist Pixel — latin-ext */
@font-face {
  font-family: 'Geist Pixel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/geist-pixel-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Pixel — latin */
@font-face {
  font-family: 'Geist Pixel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/geist-pixel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono — latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono — latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Outfit — latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(../assets/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit — latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(../assets/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. tokens ---------------------------------------------------- */
:root{
  --bg:            #0a0908;
  --bg-raised:     #100e0c;
  --surface:       rgba(255,255,255,.026);
  --surface-2:     rgba(255,255,255,.045);

  --orange:        #ff6d29;
  --orange-soft:   #ff8b4f;
  --orange-pale:   #ffd3b0;
  --ember:         #7a2b08;

  --white:         #ffffff;
  --muted:         #a6a09a;
  --faint:         #928b84;   /* 3.46:1 was below AA at 9-14px */

  --line:          rgba(255,255,255,.085);
  --line-soft:     rgba(255,255,255,.05);

  /* TITLE FACE — swap this one line to change every title on the site */
  --ff-display: "Geist Pixel", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad:  clamp(20px, 5vw, 76px);
  --sec-pad:  clamp(88px,11vw,168px);   /* top/bottom padding of every .section */
  --stat-pad: clamp(30px,3.6vw,52px);   /* top/bottom padding of a number block */
  --land:     30px;                     /* gap under the header after an in-page jump */
  --maxw: 1440px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:74px; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;      /* clip does not create a scroll container */
}
img,video,canvas,svg{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--orange); color:#140800; }

/* dither: kills 8-bit banding in the big soft gradients */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
@media (prefers-reduced-motion:reduce){ body::after{ opacity:.04; } }

/* ---------- 3. type primitives ------------------------------------------- */
.display{
  font-family:var(--ff-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:.005em;
  margin:0;
}
/* titles are built from inline-block phrases so a line never breaks in an
   awkward place and no title ever runs past two lines */
.display span{ display:inline-block; }
.kicker{
  font-family:var(--ff-mono);
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
}
.lede{
  text-wrap:pretty;
  font-family:var(--ff-body);
  font-weight:300;
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.55;
  letter-spacing:-.003em;
  color:var(--muted);
}
.body-lg{ font-size:clamp(15px,1.15vw,17.5px); line-height:1.68; color:var(--muted); }
.pill{
  display:inline-flex; align-items:center; gap:.55em;
  padding:7px 15px 7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  font-family:var(--ff-mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  backdrop-filter:blur(8px);
}
.pill::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85);
}

/* ---------- 4. layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:var(--sec-pad); }
.section-head{ max-width:760px; margin-inline:auto; text-align:center; }
.section-head .pill{ margin-bottom:clamp(22px,2.6vw,32px); }
.section-head h2{ font-size:clamp(33px,5.4vw,70px); text-wrap:balance; }
.section-head .lede{ margin-top:clamp(16px,1.9vw,26px); text-wrap:balance; }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* SEAM — sits exactly on a section boundary and takes no layout space.
   A wide, very soft ember bloom carries the light from one section into
   the next, so the eye never meets a hard edge while scrolling. */
.seam{ position:relative; height:0; z-index:1; pointer-events:none; }
.seam::before{
  content:"";
  position:absolute; left:50%; top:0;
  transform:translate(-50%,-50%);
  width:100%;
  height:clamp(440px,50vw,820px);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,109,41,0.1550) 0%,
    rgba(255,109,41,0.1364) 11%,
    rgba(255,109,41,0.1132) 22%,
    rgba(255,109,41,0.0899) 33%,
    rgba(255,109,41,0.0667) 44%,
    rgba(255,109,41,0.0465) 55%,
    rgba(255,109,41,0.0295) 66%,
    rgba(255,109,41,0.0170) 77%,
    rgba(255,109,41,0.0070) 88%,
    rgba(255,109,41,0.0000) 100%);
}
/* IN-PAGE JUMPS. The header is fixed; scroll-padding-top on the scroller
   keeps every anchor target clear of it. On its own that lands a section's
   empty top padding under the header, which read as a gap. The negative
   scroll-margin below cancels that padding, so every link (header, footer,
   hero button, scroll cue, "Compare the tiers", and links from other pages)
   lands with the section's first element — its label, or the numbers row —
   exactly --land under the header. The two offsets add up on purpose. */
/* scoped by class, not id: the legal pages have their own #about and
   #community headings, which must not inherit these offsets */
.section.community,
.section.tst,
.section.faq{ scroll-margin-top:calc(var(--land) - var(--sec-pad)); }
.nums{ scroll-margin-top:calc(var(--land) - var(--stat-pad)); }

/* ---------- 5. buttons --------------------------------------------------- */
.btn{
  --btn-fg:#1b0900;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  overflow:hidden;
  color:var(--btn-fg);
  font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
  background-image:
    linear-gradient(108deg, transparent 34%, rgba(255,255,255,.4) 50%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 52%),
    linear-gradient(178deg, #ff8a4d 0%, #ff6d29 46%, #ec5a15 100%);
  background-size:260% 100%, 100% 100%, 100% 100%;
  background-position:-80% 0, 0 0, 0 0;
  background-repeat:no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 1px rgba(120,38,0,.4),
    0 1px 2px rgba(0,0,0,.34),
    0 12px 30px -14px rgba(255,109,41,.55);
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    background-position .9s var(--ease-out),
    filter .35s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.06);
  background-position:180% 0, 0 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 1px rgba(120,38,0,.4),
    0 1px 2px rgba(0,0,0,.34),
    0 18px 42px -16px rgba(255,109,41,.72);
}
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .45s var(--ease-out); }
.btn:hover .arw{ transform:translate(3px,-3px); }

.btn--ghost{
  --btn-fg:var(--white);
  background-image:
    linear-gradient(108deg, transparent 34%, rgba(255,255,255,.14) 50%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 60%);
  background-color:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 24px -16px rgba(0,0,0,.9);
}
.btn--ghost:hover{
  border-color:rgba(255,255,255,.22);
  filter:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 14px 30px -18px rgba(0,0,0,.9);
}
.btn--block{ width:100%; }
.btn--lg{ min-height:58px; padding:0 32px; font-size:15.5px; }

/* ---------- 6. header --------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  /* only the tint is animated. Transitioning `backdrop-filter` re-creates the
     backdrop root on every frame, which both costs frames on the scroll that
     triggers it and can flash the filter box's own edge across the page as a
     full-width hairline. The blur snaps; nobody sees it under the fade. */
  transition:background-color .4s var(--ease);
}
.hdr.is-stuck{
  background:rgba(10,9,8,.7);
  backdrop-filter:blur(20px) saturate(140%);
}
.hdr::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:1px;
  opacity:0; transition:opacity .4s var(--ease);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09) 20%, rgba(255,255,255,.09) 80%, transparent);
}
.hdr.is-stuck::after{ opacity:1; }
.hdr-in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img{ width:26px; height:26px; opacity:.95; }
.brand-txt{
  font-family:var(--ff-display); font-weight:400;
  text-transform:uppercase; font-size:13px; letter-spacing:.1em;
  line-height:1; white-space:nowrap;
}
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative;
  padding:9px 14px; border-radius:999px;
  font-size:13.5px; color:var(--muted);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.nav a:hover{ color:var(--white); background:var(--surface); }
.hdr-in .btn{ min-height:42px; padding:0 20px; font-size:13.5px; }
.burger{
  display:none; flex-direction:column; width:42px; height:42px;
  align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  flex:none;
}
.burger span{ display:block; width:15px; height:1.4px; background:var(--white); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.burger span+span{ margin-top:4px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.4px) rotate(-45deg); }

.mnav{
  position:fixed; inset:74px 0 auto 0; z-index:55;
  background:linear-gradient(180deg, rgba(14,12,11,.985), rgba(10,9,8,.985));
  backdrop-filter:blur(26px) saturate(140%);
  box-shadow:0 24px 60px -30px rgba(0,0,0,1);
  border-bottom:1px solid var(--line-soft);
  padding:14px var(--pad) 26px;
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .4s var(--ease-out), visibility .3s;
}
.mnav.is-open{ opacity:1; visibility:visible; transform:none; }
.mnav-scrim{
  position:fixed; inset:0; z-index:54;
  background:rgba(6,5,5,.6);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.mnav-scrim.is-open{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }
.mnav a{
  padding:13px 2px; font-family:var(--ff-display); font-weight:300; text-transform:uppercase;
  font-size:17px; letter-spacing:.055em;
  color:var(--muted);
  border-bottom:1px solid var(--line-soft);
  transition:color .3s var(--ease);
}
.mnav a:hover, .mnav a:active{ color:var(--white); }
.mnav a:nth-last-of-type(2){ border-bottom:0; }
.mnav .btn{
  color:var(--btn-fg);
  margin-top:20px; border-bottom:0;
  font-family:var(--ff-body);
  font-weight:600;              /* .mnav a was making it 300 */
  font-size:15.5px;
  letter-spacing:-.005em;
  text-transform:none;
  min-height:54px;
}
.mnav .btn:hover{ color:var(--btn-fg); }

/* ---------- 7. hero ------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  overflow:hidden;
  background:var(--bg);
}
/* The holographic plate. The media is generated on pure black and composited
   with `screen`, so its black becomes exactly the page ground: no edge, no
   card, no border, and the clip feathers out with a mask on the media itself
   — putting the mask on the parent would form an isolated group and cancel
   the blend. */
/* `.plate` is a stacking context (positioned + z-index), which makes it an
   isolated group for compositing. Without a background of its own the group's
   backdrop is transparent, and screen(black, transparent) is black — so the
   plate painted its own black rectangle over the page ground and every edge of
   the box showed as a hard line. Giving the group the page ground to blend
   against is the whole fix: the clip's black now resolves to exactly the same
   colour as the page, at every edge, at every width. */
/* The 1px overhang is deliberate. The blend group is an opaque rectangle, and
   its own antialiased edge lands on whatever subpixel row the layout happens to
   produce — which shifts with the scrollbar, with fractional heights, and with
   whether the fonts landed before or after first paint. That is why the hairline
   showed up on some loads and not others. Both `.hero` and `.about` clip their
   overflow, so bleeding the plate 1px past them puts the group's edge outside
   the clip: what remains visible is a straight cut between two identical
   colours, which cannot show a seam however the pixels round. */
.plate{
  position:absolute; inset:-1px; z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:var(--bg);
}
.plate > *{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  mix-blend-mode:screen;
}
/* Hand over from the poster to the clip with `visibility`, never opacity.
   An opacity below 1 turns the element into an isolated group, which cancels
   mix-blend-mode — mid-fade the poster would paint its own black rectangle
   and its mask edge would flash across the section as a hard line.
   The poster is the clip's own first frame, so the swap is invisible. */

/* The poster is the DEFAULT visible layer and the clip crosses over it, so
   every state that cannot play a video — reduced motion, no JS, blocked
   autoplay, low power, or simply the seconds before the clip buffers — still
   shows the picture instead of an empty black box. */
.plate-video{ visibility:hidden; }
.plate.has-video .plate-video{ visibility:visible; }
.plate.has-video .plate-still{ visibility:hidden; }

/* Above 16:9 the hero box is wider than the clip, so `cover` would scale by
   width and crop away the clip's own black top and bottom. `contain` keeps the
   whole frame; the letterboxing is pure black, which the blend erases. */
@media (min-aspect-ratio:16/9){
  .hero .plate > *{ object-fit:contain; }
}

.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-rows:auto 1fr auto;
  justify-items:center;
  text-align:center;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding:calc(74px + clamp(18px,4.4vh,52px)) var(--pad) clamp(78px,10.5vh,120px);
}
.hero-top{ align-self:start; }
.hero h1{
  font-size:clamp(40px,7.4vw,96px);
  line-height:.96;
  letter-spacing:-.022em;
}
.hero h1 span{ display:inline-block; }

.hero-sub{ display:none; }
.hero-bot{ align-self:end; display:grid; justify-items:center; }
.hero-claim{
  max-width:52ch; text-wrap:pretty;
  font-family:var(--ff-body); font-weight:300;
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;
  color:var(--muted);
}
.hero-bot .btn{ margin-top:clamp(20px,2.2vw,28px); }

.scrollcue{
  position:absolute; left:50%; bottom:clamp(18px,3vh,30px); z-index:3;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint);
  transition:color .4s var(--ease);
}
.scrollcue:hover{ color:var(--muted); }
.scrollcue svg{ animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{
  0%,100%{ transform:translateY(0);   opacity:.55; }
  45%    { transform:translateY(5px); opacity:1;   }
}

/* ---------- 8. HUD scanner (the reference "detection" overlay) ---------- */
.hud{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hud-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hud-svg polyline{ fill:none; stroke:rgba(255,255,255,.26); stroke-width:1; vector-effect:non-scaling-stroke; }
.hud-svg circle{ fill:rgba(255,255,255,.72); }
.chip{
  position:absolute; top:0; left:0;
  width:var(--cw); height:var(--cw);
  border:1px solid rgba(255,255,255,.32);
  background:transparent;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.9);
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .9s var(--ease);
}
.chip canvas{ width:100%; height:100%; display:block; }
.chip b{
  position:absolute; top:5px; left:7px;
  font-family:var(--ff-mono); font-size:8.5px; font-weight:400;
  letter-spacing:.055em; color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.hud.is-on .chip{ opacity:1; }

/* ---------- 9. reveal --------------------------------------------------- */
/* only arm the reveal once JS is running, so the page is readable without it */
.js [data-rise]{
  opacity:0;
  transform:translate3d(0,26px,0);
  filter:blur(11px);
  transition:opacity .72s var(--ease-out), transform .8s var(--ease-out), filter .72s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-rise].is-in{ opacity:1; transform:none; filter:blur(0); }
/* A blur animating over the screen-blended clip repaints the whole composited
   stack every frame, which is what made the About copy arrive a beat after the
   rest of the section. `.is-armed` is set by a wider observer a screen ahead of
   the reveal so the layer is already rasterised when the transition starts, and
   dropped again on transitionend — so the hint is live on two or three elements
   at a time, never on all twenty-one at once. */
.js [data-rise].is-armed{ will-change:opacity, transform, filter; }

/* ---------- 10. community / pricing ------------------------------------- */
.community{
  position:relative; overflow:hidden;
  padding-bottom:clamp(48px,6.2vw,96px);   /* the run into the next section, ~22% tighter */
}
/* The ember wash behind the pricing card. It used to be the generated image
   with a mask; the mask's tail banded into a visible arc, so it is now the
   same eased CSS falloff the seams use — nothing to clip, nothing to step. */
/* The glow is centred on the cards and its ellipse fills its own box, so it
   reaches zero exactly at the box edge. It used to sit at 46% / 62% of a
   left-anchored box: the ellipse ran 130px past the section's bottom edge
   (cut there into a straight line across the page) and its centre hung left
   of the cards as a stray halo. The box ends at the section bottom, where
   the gradient is already zero; the seam carries the light onward. */
.glow-plate{
  position:absolute; left:50%; top:46%; bottom:0; z-index:0;
  width:min(1500px,100%);
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,109,41,0.1150) 0%,
    rgba(255,109,41,0.1012) 11%,
    rgba(255,109,41,0.0839) 22%,
    rgba(255,109,41,0.0667) 33%,
    rgba(255,109,41,0.0495) 44%,
    rgba(255,109,41,0.0345) 55%,
    rgba(255,109,41,0.0219) 66%,
    rgba(255,109,41,0.0126) 77%,
    rgba(255,109,41,0.0052) 88%,
    rgba(255,109,41,0.0000) 100%);
}
.community > .wrap{ position:relative; z-index:1; }

.switch{
  position:relative;
  display:inline-grid; grid-auto-flow:column; gap:0;
  padding:5px;
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(16,14,12,.6);
  backdrop-filter:blur(14px);
}
.switch-i{
  position:absolute; top:5px; left:5px; z-index:0;
  height:calc(100% - 10px);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 54%),
    linear-gradient(178deg, #ff8a4d, #f0611a);
  transition:transform .5s var(--ease-out), width .5s var(--ease-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 6px 20px -10px rgba(255,109,41,.8);
}
.switch button{
  outline-offset:-2px;
  position:relative; z-index:1;
  min-height:42px; padding:0 clamp(20px,2.6vw,34px);
  border-radius:999px;
  font-size:13.5px; font-weight:600; letter-spacing:.005em;
  color:var(--muted);
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.switch button[aria-selected="true"]{ color:#1b0900; }
.switch-wrap{ display:flex; justify-content:center; margin-block:clamp(34px,4.4vw,56px) clamp(26px,3vw,38px); }

/* ---------- 10b. founding access (TEMPORARY) ----------------------------- *
   Stand-alone block above the tier switch. Delete it from index.html after
   the founding period and these rules simply stop matching; the switch
   keeps its own spacing because of the `+` rule at the end.               */
.founding{
  position:relative;
  max-width:920px;              /* the plan card's width (660px at <=1024, below) */
  margin:clamp(34px,4.4vw,56px) auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"copy clock" "cta clock";
  align-items:center;
  gap:18px clamp(24px,3.4vw,48px);
  padding:clamp(22px,2.4vw,30px) clamp(24px,3vw,40px);
  border:1px solid rgba(255,109,41,.26);
  border-radius:20px;
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(255,109,41,.13), rgba(255,109,41,.05) 38%, rgba(255,109,41,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
  backdrop-filter:blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 70px -50px rgba(255,109,41,.6);
}
.founding-copy{ grid-area:copy; min-width:0; align-self:end; }
.founding-cta{ grid-area:cta; justify-self:start; align-self:start; }
.founding-tag{
  display:flex; align-items:center; gap:.65em; width:max-content;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange-soft);
}
.founding-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 10px 2px rgba(255,109,41,.8);
  animation:founding-pulse 2.4s var(--ease) infinite;
}
@keyframes founding-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.founding p{
  margin-top:10px; max-width:56ch;
  font-size:clamp(14.5px,1.1vw,16px); line-height:1.55; color:#e6e2de; text-wrap:pretty;
}
.founding-clock{ grid-area:clock; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.founding-clock div{
  display:grid; justify-items:center; gap:6px;
  min-width:64px; padding:12px 8px 10px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(10,9,8,.45);
}
.founding-clock b{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(24px,2.3vw,30px); line-height:1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--white);
}
.founding-clock span{
  font-family:var(--ff-mono); font-size:8.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.founding + .switch-wrap{ margin-top:clamp(26px,3vw,38px); }

.card{
  position:relative;
  max-width:920px; margin-inline:auto;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,109,41,.1), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  backdrop-filter:blur(20px);
  overflow:hidden;
}
.card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 40px 90px -50px rgba(0,0,0,.9);
}
/* the two panes differ in height, so the card glides between them on a
   switch (js/main.js sets the start and end heights) and the new pane
   settles in instead of snapping */
.card.is-gliding{ transition:height .55s var(--ease-out); }
.pane{ display:none; }
.pane.is-live{ display:block; }
.js .pane.is-live .pane-in{ animation:pane-in .5s var(--ease-out) both; }
@keyframes pane-in{ from{ opacity:0; transform:translate3d(0,8px,0); } }
.pane-in{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,60px);
  padding:clamp(26px,3.4vw,48px);
}

.plan-head h3{
  font-family:var(--ff-display); font-weight:300;
  text-transform:uppercase; font-size:clamp(23px,2.4vw,32px);
  line-height:1; letter-spacing:-.014em;
}
.plan-head > p{ margin-top:12px; font-size:14.5px; line-height:1.62; color:var(--muted); max-width:34ch; }

.price{ display:flex; align-items:baseline; gap:.28em; margin-top:clamp(22px,2.6vw,32px); }
/* the small "Launch pricing" label sitting on top of the price */
.price-tag{
  display:flex; align-items:center; gap:.6em; width:max-content;
  margin-top:clamp(22px,2.6vw,32px);
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange-soft);
}
.price-tag::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85);
}
.price-tag + .price{ margin-top:14px; }
.price .amt{
  font-family:var(--ff-display); font-weight:250;
  font-size:clamp(46px,6vw,80px); line-height:.9; letter-spacing:-.03em;
}
.price .per{ font-size:14px; color:var(--faint); }
.price-note{ margin-top:12px; font-size:12.5px; color:var(--faint); min-height:1.4em; }
.price-note em{ font-style:normal; color:var(--orange-soft); }

.bill{ display:inline-flex; gap:3px; margin-top:20px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); }
.bill button{
  min-height:34px; padding:0 15px; border-radius:999px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.bill button[aria-pressed="true"]{ color:var(--white); background:var(--surface-2); }
.bill .save{ color:var(--orange); margin-left:.55em; }

.plan-cta{ margin-top:clamp(24px,3vw,34px); }
.plan-cta .btn{ width:100%; }
.plan-cta small{ display:block; margin-top:12px; font-size:11.5px; color:var(--faint); text-align:center; }

/* anchored to the top, so "What's included" sits level with the plan title
   in both cards — centred, it drifted lower in Premium, whose left column is
   taller because of the billing switch */
.feats{ display:grid; gap:1px; align-content:start; }

.feats li{
  display:grid; grid-template-columns:19px 1fr; gap:12px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  font-size:14.5px; line-height:1.5;
}
.feats li:last-child{ border-bottom:0; }
.feats li.feats-h{
  display:block; padding:0 0 14px;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid var(--line-soft);
}
.feats li svg{ margin-top:3px; width:19px; height:19px; flex:none; color:var(--orange); }
.feats li i{ font-style:normal; color:var(--muted); }
.feats li b{ font-weight:500; }

/* ---------- 10c. Premium card: price lock, benefits, roadmap button ------ */
.plan-head > .plan-sub{ margin-top:8px; max-width:40ch; }

.lock{
  margin-top:clamp(20px,2.4vw,26px);
  padding:16px 18px 15px;
  border:1px solid rgba(255,109,41,.24);
  border-radius:16px;
  background:
    radial-gradient(110% 150% at 0% 0%, rgba(255,109,41,.12), rgba(255,109,41,.035) 45%, rgba(255,109,41,0) 75%),
    rgba(10,9,8,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.lock-h{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.45; font-weight:500; color:var(--white); text-wrap:pretty;
}
.lock-h svg{
  flex:none; width:16px; height:16px; margin-top:1px; color:var(--orange);
  filter:drop-shadow(0 0 6px rgba(255,109,41,.55));
}
/* rising bars = the price new members pay after each release;
   the dashed line level with the first bar = the price a member keeps */
.lock-bars{
  position:relative;
  display:flex; align-items:flex-end; gap:3px;
  height:40px; margin-top:16px;
}
.lock-bars i{
  flex:1 1 0; height:calc(var(--p) / 199 * 100%);
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
  transform-origin:50% 100%;
}
.lock-bars i:first-child{
  background:linear-gradient(180deg, #ff8a4d, #ec5a15);
  box-shadow:0 0 12px rgba(255,109,41,.7);
}
.lock-bars::after{
  content:""; position:absolute; left:0; right:0;
  bottom:calc(49 / 199 * 100%);
  border-top:1px dashed rgba(255,139,79,.95);
  filter:drop-shadow(0 0 3px rgba(255,109,41,.7));
}
.pane.is-live .lock-bars i{ animation:lock-rise .8s var(--ease-out) both; animation-delay:calc(var(--i) * 32ms + 140ms); }
@keyframes lock-rise{ from{ transform:scaleY(0); opacity:0; } }
.lock-ends{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:9px;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.lock-ends b{ font-weight:500; color:var(--orange-soft); margin-right:.35em; }
.lock-ends span + span{ text-align:right; }
.lock-ends span + span b{ color:#e6e2de; }
.lock-note{ margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--faint); text-wrap:pretty; }

/* "Everything included in Standard" leads, then what Premium adds */
.feats li.feats-std i{ color:var(--white); font-weight:500; }
.feats li.feats-h--plus{ padding:16px 0 14px; color:var(--orange-soft); }
.feats li i small{ display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--faint); }

/* the roadmap button closes the right column, level with "Join Premium" */
.plan-body{ display:flex; flex-direction:column; min-width:0; }
.plan-more{ margin-top:auto; padding-top:clamp(20px,2.4vw,26px); }
.plan-more small{ display:block; margin-top:12px; font-size:11.5px; color:var(--faint); text-align:center; }
.plan-more .btn{ border-color:rgba(255,109,41,.3); }
.plan-more .btn:hover{ border-color:rgba(255,109,41,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 14px 34px -18px rgba(255,109,41,.55); }
.btn:hover .arw--r{ transform:translateX(4px); }
/* opening the roadmap needs the script */
html:not(.js) [data-roadmap-open]{ display:none; }

/* ---------- 10d. Premium course roadmap (dialog) ------------------------ *
   A native <dialog>, opened with showModal(): it sits in the browser's top
   layer (above the header and the cookie banner), the page behind it is
   inert, and focus stays inside. The dialog itself is the full-screen
   frame; a click on it outside the panel closes it.                      */
html.rm-lock{ overflow:hidden; scrollbar-gutter:stable; }
.rm{
  --rm-date:112px;      /* date column */
  --rm-gap:46px;        /* the rail runs down the middle of this gap */
  --rm-dot:29px;        /* node height: level with each card's first line */
  position:fixed; inset:0;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:clamp(16px,3vw,40px);
  border:0; background:transparent; color:var(--white);
  overflow:hidden;
}
.rm[open]{ display:flex; align-items:center; justify-content:center; }
.rm::backdrop{ background:rgba(6,5,5,.74); backdrop-filter:blur(8px) saturate(120%); }
.rm[open]::backdrop{ animation:rm-fade .45s var(--ease) both; }
.rm.is-closing::backdrop{ animation:rm-fade .34s var(--ease) reverse both; }
.rm[open] .rm-panel{ animation:rm-in .62s var(--ease-out) both; }
.rm.is-closing .rm-panel{ animation:rm-out .34s var(--ease) both; }
@keyframes rm-fade{ from{ opacity:0; } }
@keyframes rm-in { from{ opacity:0; transform:translate3d(0,18px,0) scale(.975); filter:blur(8px); } }
@keyframes rm-out{ to  { opacity:0; transform:translate3d(0,10px,0) scale(.985); } }
@keyframes rm-sheet-in { from{ opacity:0; transform:translate3d(0,48px,0); } }
@keyframes rm-sheet-out{ to  { opacity:0; transform:translate3d(0,48px,0); } }

.rm-panel{
  position:relative;
  display:flex; flex-direction:column;
  width:min(860px,100%); max-height:100%;
  border:1px solid var(--line); border-radius:26px;
  background:
    radial-gradient(90% 50% at 50% -6%, rgba(255,109,41,.15), rgba(255,109,41,0) 70%),
    linear-gradient(180deg, #13100e, #0c0b0a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 50px 120px -40px rgba(0,0,0,1),
    0 40px 140px -70px rgba(255,109,41,.45);
  overflow:hidden;
}
.rm-scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(28px,4vw,50px) clamp(22px,4vw,50px) clamp(26px,3.6vw,44px);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent;
}
.rm-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(16,14,12,.72); backdrop-filter:blur(12px);
  color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.rm-x:hover{ color:var(--white); border-color:rgba(255,255,255,.22); background:rgba(28,24,21,.85); }

/* title and intro run the full width of the panel: one line of title, two
   of intro. The close button sits above the title, level with the tag. */
.rm-head .rm-tag{ margin-top:0; }
.rm-head h2{ margin-top:16px; font-size:clamp(26px,3.6vw,44px); text-wrap:balance; }
.rm-head p{ margin-top:16px; font-size:clamp(14.5px,1.15vw,16px); line-height:1.62; color:var(--muted); text-wrap:pretty; }

/* the three-number summary */
.rm-sum{
  margin-top:clamp(24px,3vw,34px);
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  overflow:hidden;
}
.rm-stat{ display:grid; align-content:start; gap:7px; padding:18px 20px; }
.rm-stat + .rm-stat{ border-left:1px solid var(--line-soft); }
.rm-stat b{
  font-family:var(--ff-display); font-weight:250;
  font-size:clamp(28px,3vw,38px); line-height:.95; letter-spacing:-.02em; white-space:nowrap;
}
.rm-stat b small{ margin-left:.2em; font-family:var(--ff-body); font-size:13px; letter-spacing:0; color:var(--faint); }
.rm-k{
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.rm-sub{ font-size:12.5px; color:var(--faint); }
.rm-stat--count{ grid-template-columns:auto minmax(0,1fr); align-items:center; align-content:center; column-gap:16px; }
.rm-stat--count b{ font-size:clamp(44px,4.6vw,60px); color:var(--orange); text-shadow:0 0 24px rgba(255,109,41,.35); }
.rm-stat--count span{ font-size:14px; line-height:1.45; color:#e6e2de; text-wrap:balance; }

/* the timeline */
.rm-tl{ margin-top:clamp(28px,3.4vw,40px); }
.rm-cols{
  display:grid; grid-template-columns:var(--rm-date) minmax(0,1fr) auto; column-gap:var(--rm-gap);
  padding-bottom:12px;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.rm-cols span:first-child{ text-align:right; }
.rm-cols span:nth-child(2){ padding-left:21px; }
.rm-cols span:last-child{ padding-right:21px; }
.rm-row{
  position:relative;
  display:grid; grid-template-columns:var(--rm-date) minmax(0,1fr); column-gap:var(--rm-gap);
  padding-bottom:10px;
}
.rm-row:last-child{ padding-bottom:0; }
/* the rail, one segment per row so it always meets the next node */
.rm-row::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--rm-date) + var(--rm-gap) / 2); width:1px; transform:translateX(-50%);
  background:rgba(255,255,255,.1);
}
.rm-row:first-child::before{ top:var(--rm-dot); background:linear-gradient(180deg, var(--orange), rgba(255,255,255,.1) 85%); }
.rm-row:last-child::before{ bottom:auto; height:var(--rm-dot); }
/* the node */
.rm-row::after{
  content:""; position:absolute; top:var(--rm-dot);
  left:calc(var(--rm-date) + var(--rm-gap) / 2);
  width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--bg); border:1px solid rgba(255,255,255,.32);
}
.rm-row--launch::after{
  width:11px; height:11px; border:0; background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,109,41,.16), 0 0 14px 2px rgba(255,109,41,.8);
  animation:founding-pulse 2.4s var(--ease) infinite;
}
.rm-row--final::after{ border-color:var(--orange-soft); box-shadow:0 0 10px rgba(255,109,41,.45); }

.rm-date{
  padding-top:calc(var(--rm-dot) - 8px);
  text-align:right; white-space:nowrap;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:500; line-height:16px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.rm-row--launch .rm-date{ color:var(--orange-soft); }

.rm-card{
  min-width:0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px 24px;
  padding:18px 20px;
  border:1px solid var(--line-soft); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.rm-card:hover{ border-color:rgba(255,109,41,.26); }
.rm-course{ display:grid; grid-template-columns:28px minmax(0,1fr); align-items:baseline; gap:8px; }
.rm-num{ font-family:var(--ff-mono); font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--orange-soft); }
.rm-course h3{ font-family:var(--ff-body); font-weight:500; font-size:15.5px; line-height:22px; letter-spacing:-.005em; color:var(--white); text-wrap:balance; }

.rm-price{ grid-column:2; grid-row:1; display:grid; justify-items:end; gap:5px; text-align:right; white-space:nowrap; }
.rm-price b{ font-family:var(--ff-display); font-weight:300; font-size:22px; line-height:22px; letter-spacing:-.01em; color:var(--white); }
.rm-price b small{ margin-left:.15em; font-family:var(--ff-body); font-size:12px; letter-spacing:0; color:var(--faint); }
.rm-yr{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; color:var(--faint); }
/* the column header names the prices on a wide screen; on a phone each
   row says it itself */
.rm-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rm-badge{
  display:inline-flex; align-items:center;
  padding:4px 9px; border-radius:999px;
  border:1px solid rgba(255,109,41,.42); background:rgba(255,109,41,.12);
  font-family:var(--ff-mono); font-size:9px; font-weight:500; line-height:1.3;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-pale);
}
.rm-badge--end{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#e6e2de; }
.rm-note{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:9px;
  margin-left:36px;
  font-size:12.5px; line-height:1.45; color:var(--muted);
}
.rm-note::before{
  content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85);
}

/* the launch release: the entry point, lit */
.rm-row--launch .rm-card{
  grid-template-areas:"launch price" "c1 price" "c2 price";
  row-gap:12px;
  border-color:rgba(255,109,41,.34);
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(255,109,41,.14), rgba(255,109,41,.05) 40%, rgba(255,109,41,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 28px 60px -44px rgba(255,109,41,.7);
}
.rm-row--launch .rm-price{ grid-area:price; }
.rm-row--launch .rm-course:nth-of-type(1){ grid-area:c1; }
.rm-row--launch .rm-course:nth-of-type(2){ grid-area:c2; }
.rm-launch{ grid-area:launch; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; min-height:22px; }
.rm-flag{
  display:flex; align-items:center; gap:.65em;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange-soft);
}
.rm-flag::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85);
}
.rm-count{ font-size:13px; color:#e6e2de; }
.rm-row--final .rm-card{ border-color:rgba(255,109,41,.2); }
/* the final price step has no course of its own, so no number column */
.rm-course--final{ grid-template-columns:minmax(0,1fr); }
.rm-course--final h3{ color:#e6e2de; }

/* entries arrive as they scroll into the panel */
.js .rm-row{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--rd,0ms);
}
.js .rm-row.is-in{ opacity:1; transform:none; }

.rm-end{
  margin-top:clamp(28px,3.4vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,30px);
  border:1px solid rgba(255,109,41,.24); border-radius:18px;
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(255,109,41,.12), rgba(255,109,41,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.rm-end p{ flex:1 1 300px; max-width:48ch; font-size:14px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
.rm-end p b{ display:block; margin-bottom:4px; font-size:15px; font-weight:500; color:var(--white); }

/* phones: the panel becomes a sheet from the bottom edge and the timeline
   stacks — rail on the left, date above each card, price under the title */
@media (max-width:640px){
  .rm{ padding:10px 0 0; --rm-dot:8px; }
  .rm[open]{ align-items:flex-end; }
  .rm[open] .rm-panel{ animation-name:rm-sheet-in; }
  .rm.is-closing .rm-panel{ animation-name:rm-sheet-out; }
  .rm-panel{ width:100%; border-radius:22px 22px 0 0; border-bottom:0; }
  .rm-scroll{ padding:24px 16px calc(24px + env(safe-area-inset-bottom)); }
  .rm-x{ top:12px; right:12px; width:44px; height:44px; }
  .rm-head{ padding-right:48px; }
  .rm-head h2{ font-size:clamp(24px,7.4vw,32px); }
  .rm-head p{ font-size:14.5px; }

  .rm-sum{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .rm-stat{ padding:15px 16px; }
  .rm-stat--count{ grid-column:1 / -1; border-bottom:1px solid var(--line-soft); }
  .rm-stat + .rm-stat{ border-left:0; }
  .rm-stat:last-child{ border-left:1px solid var(--line-soft); }
  .rm-stat b{ font-size:28px; }
  .rm-stat--count b{ font-size:46px; }

  .rm-cols{ display:none; }
  .rm-row{ grid-template-columns:minmax(0,1fr); row-gap:8px; padding:0 0 18px 24px; }
  .rm-row::before, .rm-row::after{ left:5px; }
  .rm-date{ padding-top:0; text-align:left; }
  .rm-card{ grid-template-columns:minmax(0,1fr); gap:10px; padding:15px 16px; }
  .rm-course{ grid-template-columns:24px minmax(0,1fr); }
  .rm-course h3{ font-size:15px; }
  .rm-price{
    grid-column:1; grid-row:auto;
    grid-template-columns:auto minmax(0,1fr); align-items:baseline; justify-items:start;
    gap:7px 10px; text-align:left;
    margin-top:2px; padding-top:12px; border-top:1px solid var(--line-soft);
  }
  .rm-price .rm-badge, .rm-lbl{ grid-column:1 / -1; }
  .rm-lbl{
    position:static; width:auto; height:auto; overflow:visible; clip-path:none;
    font-family:var(--ff-mono); font-size:9px; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  }
  .rm-note{ margin-left:32px; }
  .rm-row--launch .rm-card{ grid-template-areas:"launch" "c1" "c2" "price"; }
  .rm-end{ padding:20px 18px; }
  .rm-end .btn{ width:100%; }
}
/* phones: each price-lock label stacks, price over its caption */
@media (max-width:480px){
  .lock-ends span{ display:grid; gap:4px; }
  .lock-ends b{ margin-right:0; font-size:10.5px; }
}

/* ---------- 11. testimonials -------------------------------------------- */
.tst{ position:relative; overflow:hidden; }
.tst-rails{
  position:relative;
  margin-top:clamp(40px,5vw,68px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);
  height:min(74vh,700px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
}
.rail{ position:relative; overflow:hidden; }
.rail-run{ display:grid; gap:clamp(14px,1.4vw,20px); will-change:transform; }
.tst-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  padding:clamp(20px,1.8vw,26px);
  transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .5s var(--ease-out);
}
.tst-card:hover{ border-color:rgba(255,109,41,.32); transform:translateY(-3px); }
.stars{ display:flex; gap:3px; margin-bottom:14px; }
.stars svg{ width:12px; height:12px; color:var(--orange); }
.stars svg.off{ color:rgba(255,255,255,.16); }
.tst-card p{ font-size:14.5px; line-height:1.6; color:#e6e2de; }
.tst-who{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); display:grid; gap:3px; }
.tst-who b{ font-size:13.5px; font-weight:500; }
.tst-who span{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }

.tst-foot{ margin-top:clamp(32px,3.6vw,48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.tst-foot .kicker{ text-align:center; }
.tst-foot .stars{ margin-bottom:0; }

/* ---------- 12. numbers ------------------------------------------------- */
.nums{ position:relative; }
.nums-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.stat{ position:relative; padding:var(--stat-pad) clamp(16px,2vw,32px); }
.nums-grid > .stat:first-child{ padding-left:0; }
.nums-grid > .stat:last-child{ padding-right:0; }
.stat::after{
  content:""; position:absolute; top:14%; bottom:14%; right:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
}
.stat:last-child::after{ display:none; }
.stat .v{
  display:flex; align-items:baseline; gap:.06em;
  font-family:var(--ff-display); font-weight:250;
  font-size:clamp(38px,5vw,68px); line-height:.92; letter-spacing:-.03em;
}
.stat .v u{ text-decoration:none; color:var(--orange); }
.stat .v sub{
  vertical-align:baseline;      /* `bottom` is inert on a static element */
  font-size:.34em; letter-spacing:-.01em; color:var(--muted);
}
.stat p{ margin-top:14px; font-size:13.5px; line-height:1.5; color:var(--muted); max-width:22ch; }

/* ---------- 13. about --------------------------------------------------- */
.about{ position:relative; overflow:hidden; padding-block:0; }
.about-stage{
  position:relative;
  min-height:min(100svh,980px);
  display:grid;
  background:var(--bg);
}
/* Past ~1700px the stage grows wider than it is tall, so `cover` starts scaling
   the clip by width and Dave outgrows the section. The cap therefore belongs on
   the MEDIA, not on the plate: capping the plate would put two opaque vertical
   group edges inside the section, which is the same hairline problem as the
   horizontal one. The plate stays full bleed; the clip is centred inside it and
   its own black surround screens away to the page ground. */
.about .plate{ left:-1px; right:-1px; width:auto; }
.about .plate > *{
  /* left, right and width are all resolved, so the auto inline margins are
     given equal values and the clip centres itself — no transform, so nothing
     here gains a stacking context that could interfere with the blend. Note
     `width:auto` would NOT work: these are replaced elements, and auto resolves
     to the intrinsic width of the file. */
  width:min(100%,1700px); margin-inline:auto;
}
.about-grid{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(74px,9vw,132px) var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,36%) minmax(0,1fr);
  align-items:center; gap:clamp(28px,3.6vw,64px);
}
.about-l{ justify-self:center; max-width:40ch; width:100%; }
.about-r{ justify-self:center; max-width:34ch; width:100%; }
.about-mid{ align-self:end; text-align:center; padding-bottom:clamp(0px,2vw,24px); }
.about-l .pill{ margin-bottom:22px; }
.about-l h2{ font-size:clamp(38px,5.4vw,80px); }
.about-l h2 em{ font-style:normal; color:var(--orange); }
.about-r p+p{ margin-top:1.1em; }
.about-r p{ font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.7; color:var(--muted); text-wrap:pretty; }
.about-r p b{ color:var(--white); font-weight:500; }
.about-r .btn{ margin-top:clamp(22px,2.4vw,30px); }
.about-sig{ display:grid; gap:6px; justify-items:center; }
.about-sig .n{
  font-family:var(--ff-display); font-weight:400;
  text-transform:uppercase; font-size:12.5px; letter-spacing:.16em;
}

/* ---------- 13b. FAQ ---------------------------------------------------- *
   One glass panel like the pricing card; questions separated by hairlines.
   js/main.js keeps one answer open at a time and slides them open/shut. */
.faq-list{
  position:relative;
  max-width:920px; margin:clamp(40px,5vw,64px) auto 0;
  padding:clamp(6px,1vw,12px) clamp(22px,3.4vw,48px) clamp(4px,.6vw,8px);
  border:1px solid var(--line); border-radius:26px;
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(255,109,41,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085), 0 40px 90px -50px rgba(0,0,0,.9);
  overflow-anchor:none;          /* main.js holds the clicked question in place itself */
}
.faq-h{
  padding:24px 0 12px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.faq-group + .faq-group .faq-h{ padding-top:34px; }
.faq-group--now .faq-h{ display:flex; align-items:center; gap:.65em; color:var(--orange-soft); }
.faq-group--now .faq-h::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 10px 2px rgba(255,109,41,.8);
  animation:founding-pulse 2.4s var(--ease) infinite;
}
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-group:last-child .faq-item:last-child{ border-bottom:0; }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:66px; padding:18px 0;
  list-style:none; cursor:pointer;
  font-size:clamp(15px,1.15vw,16.5px); font-weight:500; line-height:1.45; letter-spacing:-.005em;
  color:#e6e2de;
  transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover, .faq-item.is-open summary{ color:var(--white); }
/* plus that turns into a minus */
.faq-ico{
  position:relative; flex:none;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); color:var(--muted);
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
.faq-ico::before, .faq-ico::after{
  content:""; position:absolute; left:50%; top:50%;
  width:11px; height:1.5px; margin:-.75px 0 0 -5.5px;
  border-radius:2px; background:currentColor;
  transition:transform .45s var(--ease-out);
}
.faq-ico::after{ transform:rotate(90deg); }
.faq-item summary:hover .faq-ico{ color:var(--white); border-color:rgba(255,255,255,.22); }
.faq-item.is-open .faq-ico{
  color:var(--orange); border-color:rgba(255,109,41,.45); background:rgba(255,109,41,.08);
  box-shadow:0 0 16px -4px rgba(255,109,41,.7);
}
.faq-item.is-open .faq-ico::after{ transform:rotate(0deg); }

.faq-a{ overflow:hidden; }
.faq-a-in{ max-width:72ch; padding:0 56px 24px 0; }
.faq-a p{ font-size:15px; line-height:1.7; color:var(--muted); text-wrap:pretty; }
.faq-a p + p{ margin-top:.8em; }
.faq-a b{ font-weight:500; color:#e6e2de; }
.faq-a em{ font-style:normal; color:#e6e2de; }
.faq-a a:not(.btn), .faq-link{
  padding:0; font:inherit; color:var(--orange-soft);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color .3s var(--ease);
}
.faq-a a:not(.btn):hover, .faq-link:hover{ color:var(--orange-pale); }
.faq-a .btn{ margin-top:20px; }
.faq-a small{ display:block; margin-top:10px; font-size:12px; color:var(--faint); }
.faq-code{
  padding:1px 7px; border-radius:6px;
  border:1px solid rgba(255,109,41,.32); background:rgba(255,109,41,.1);
  font-family:var(--ff-mono); font-size:.86em; letter-spacing:.08em; color:var(--orange-pale);
}

/* ---------- 14. final CTA ----------------------------------------------- */
.close{ position:relative; overflow:hidden; text-align:center; }
.close-glow{
  position:absolute; left:50%; top:50%; z-index:0;
  width:min(1300px,96%); height:84%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,109,41,0.1400) 0%,
    rgba(255,109,41,0.1232) 11%,
    rgba(255,109,41,0.1022) 22%,
    rgba(255,109,41,0.0812) 33%,
    rgba(255,109,41,0.0602) 44%,
    rgba(255,109,41,0.0420) 55%,
    rgba(255,109,41,0.0266) 66%,
    rgba(255,109,41,0.0154) 77%,
    rgba(255,109,41,0.0063) 88%,
    rgba(255,109,41,0.0000) 100%);
}
.close > .wrap{ position:relative; z-index:1; }
.close .section-head{ max-width:760px; }
.close h2{ font-size:clamp(34px,5.8vw,80px); }
.close .lede{ margin-top:22px; }
.close-btns{ margin-top:clamp(30px,3.6vw,44px); display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- 15. footer -------------------------------------------------- */
.ftr{ position:relative; padding-block:clamp(44px,5vw,72px) 30px; }
.ftr::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07) 18%, rgba(255,255,255,.07) 82%, transparent);
}
.ftr-top{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,60px);
  padding-bottom:clamp(34px,4vw,54px);
}
.ftr-top::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06) 14%, rgba(255,255,255,.06) 86%, transparent);
}
.ftr-brand .brand{ margin-bottom:16px; }
.ftr-brand p{ font-size:13.5px; line-height:1.62; color:var(--faint); max-width:34ch; }
/* "Contact me" + the support address, under the brand line */
.ftr-brand .ftr-contact{ display:grid; justify-items:start; gap:4px; margin-top:20px; max-width:none; }
.ftr-contact span{
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.ftr-contact a{
  display:inline-flex; align-items:center; min-height:36px;
  font-size:14px; color:#e6e2de; overflow-wrap:anywhere;
  transition:color .3s var(--ease);
}
.ftr-contact a:hover{ color:var(--orange); }
/* the YouTube handle, right under the address */
.ftr-contact .ftr-yt{ gap:10px; }
.ftr-yt svg{ flex:none; color:var(--orange); filter:drop-shadow(0 0 6px rgba(255,109,41,.35)); }
.ftr-col h3{
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:16px;
}
.ftr-col li+li{ margin-top:2px; }
.ftr-col a{
  display:inline-flex; align-items:center; min-height:40px;
  font-size:13.5px; color:var(--muted); transition:color .3s var(--ease);
}
.ftr-col a:hover{ color:var(--orange); }
.ftr-linkbtn{
  display:inline-flex; align-items:center; min-height:40px; padding:0;
  font-size:13.5px; color:var(--muted); transition:color .3s var(--ease);
}
.ftr-linkbtn:hover{ color:var(--orange); }
.ftr-btm{
  padding-top:26px;
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:space-between;
}
.ftr-btm p, .ftr-btm span{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
}

/* ---------- 16. legal pages --------------------------------------------- */
.legal{ padding-block:calc(74px + clamp(48px,7vw,104px)) clamp(64px,8vw,120px); }
.legal-in{ max-width:760px; margin-inline:auto; }
.legal h1{ font-size:clamp(34px,5.4vw,66px); }
.legal .kicker{ display:block; margin-bottom:18px; }
.legal .updated{ margin-top:18px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.legal h2{
  font-family:var(--ff-display); font-weight:350;
  text-transform:uppercase; font-size:clamp(17px,1.7vw,21px); letter-spacing:-.004em;
  margin-top:clamp(38px,4vw,56px); margin-bottom:14px;
}
.legal p, .legal li{ font-size:15px; line-height:1.72; color:var(--muted); }
.legal p+p{ margin-top:1em; }
.legal ul{ margin-top:1em; display:grid; gap:.6em; }
.legal ul li{ padding-left:20px; position:relative; }
.legal ul li::before{ content:""; position:absolute; left:2px; top:.66em; width:5px; height:5px; border-radius:50%; background:var(--orange); }
.legal p a:not(.btn), .legal li a{ color:var(--orange-soft); text-decoration:underline; text-underline-offset:3px; }
.legal .btn{ text-decoration:none; }
.legal-back{ margin-top:clamp(44px,5vw,72px); }
.legal h3{
  font-family:var(--ff-body); font-weight:600; font-size:15.5px; color:var(--white);
  margin-top:26px; margin-bottom:8px;
}
.legal strong, .legal b{ color:#e6e2de; font-weight:500; }
.legal code{ font-family:var(--ff-mono); font-size:.86em; color:#e6e2de; background:var(--surface-2); padding:1px 6px; border-radius:5px; }
.legal ul + p, .legal dl + p{ margin-top:1em; }
/* the "who we are" card: business name, VAT, contact */
.legal-id{
  margin-top:18px; display:grid; gap:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.legal-id div{ display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr); gap:16px; padding:13px 18px; border-bottom:1px solid var(--line-soft); }
.legal-id div:last-child{ border-bottom:0; }
.legal-id dt{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-top:4px; }
.legal-id dd{ margin:0; font-size:15px; color:#e6e2de; overflow-wrap:anywhere; }
.legal-id a{ color:var(--orange-soft); text-decoration:underline; text-underline-offset:3px; }
/* "on this page" list at the top of long legal pages */
.legal-toc{
  margin-top:28px; padding:18px 20px;
  border:1px solid var(--line-soft); border-radius:16px; background:var(--surface);
}
.legal-toc .kicker{ margin-bottom:10px; }
.legal-toc ol{ margin:0; padding:0; list-style:none; columns:2 220px; column-gap:28px; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; break-inside:avoid; padding:3px 0; font-size:14px; line-height:1.5; }
.legal-toc li::before{ content:counter(toc, decimal-leading-zero) "  "; font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; color:var(--faint); }
.legal .legal-toc a{ color:var(--muted); text-decoration:none; transition:color .3s var(--ease); }
.legal .legal-toc a:hover{ color:var(--orange); }
/* "On this page" jumps land the heading --land under the header, like
   every other in-page link on the site */
.legal h2[id]{ scroll-margin-top:var(--land); }
/* the storage table in the Cookie Policy; scrolls sideways on a phone */
.legal-table{ margin-top:16px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.legal-table table{ width:100%; min-width:560px; border-collapse:collapse; font-size:13.5px; line-height:1.55; }
.legal-table th{
  text-align:left; padding:11px 14px; background:var(--surface);
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.legal-table td{ padding:12px 14px; border-top:1px solid var(--line-soft); color:var(--muted); vertical-align:top; }
.legal-table td:first-child{ white-space:nowrap; }
@media (max-width:560px){
  .legal-id div{ grid-template-columns:1fr; gap:2px; }
}

/* ---------- 16b. cookie banner (js/consent.js) ------------------------- *
   Shown to every new visitor until they choose. "Accept all" and "Reject
   all" share one style on purpose: equal prominence, no nudging.          */
.cc{
  position:fixed; z-index:70; right:20px; bottom:20px;
  width:min(460px, calc(100% - 40px));
  max-height:calc(100svh - 40px); overflow:auto;
  padding:22px 24px 20px;
  border:1px solid var(--line); border-radius:22px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255,109,41,.09), rgba(255,109,41,0) 70%),
    linear-gradient(180deg, rgba(20,17,15,.975), rgba(12,11,10,.975));
  backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px -30px rgba(0,0,0,1);
  transform:translate3d(0,14px,0); opacity:0;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease);
}
.cc.is-in{ transform:none; opacity:1; }
.cc-tag{
  display:flex; align-items:center; gap:.6em; width:max-content;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange-soft);
}
.cc-tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85); }
.cc h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:20px; letter-spacing:.01em; line-height:1.05; margin:10px 0 10px;
}
.cc p{ font-size:13.5px; line-height:1.62; color:var(--muted); text-wrap:pretty; }
.cc p a{ color:var(--orange-soft); text-decoration:underline; text-underline-offset:3px; }
.cc-x{
  position:absolute; top:12px; right:12px; width:36px; height:36px;
  display:grid; place-items:center; border-radius:999px; color:var(--faint);
}
.cc-x:hover{ color:var(--white); background:var(--surface-2); }
.cc-cats{ margin-top:16px; display:grid; gap:8px; }
.cc-cat{
  display:grid; grid-template-columns:1fr auto; gap:5px 14px; align-items:center;
  padding:13px 15px; border:1px solid var(--line-soft); border-radius:14px; background:var(--surface);
  cursor:pointer;
}
.cc-cat.is-locked{ cursor:default; }
.cc-cat b{ font-size:13.5px; font-weight:500; color:var(--white); }
.cc-cat small{ grid-column:1 / -1; font-size:12px; line-height:1.55; color:var(--faint); }
.cc-cat small em{ font-style:normal; color:var(--muted); }
.cc-on{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-soft); }
/* on/off switch built on a real checkbox, so keyboards and screen readers get it free */
.cc-switch{ position:relative; width:38px; height:22px; flex:none; }
.cc-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.cc-switch i{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background:rgba(255,255,255,.12); border:1px solid var(--line);
  transition:background-color .25s var(--ease);
}
.cc-switch i::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--white); transition:transform .3s var(--ease-out);
}
.cc-switch input:checked + i{ background:var(--orange); border-color:transparent; }
.cc-switch input:checked + i::after{ transform:translateX(16px); }
.cc-switch input:focus-visible + i{ outline:2px solid var(--orange); outline-offset:2px; }
.cc-btns{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cc-btns .btn{ min-height:46px; padding:0 16px; font-size:13.5px; }
.cc-link{
  grid-column:1 / -1; justify-self:center; margin-top:2px; padding:8px 10px;
  font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.cc-link:hover{ color:var(--white); }
.cc.is-open .cc-link{
  justify-self:stretch; text-decoration:none; min-height:46px; border-radius:999px;
  background:var(--orange); color:#1b0900; font-weight:600;
}
@media (prefers-reduced-motion:reduce){ .cc{ transition:none; transform:none; opacity:1; } }

/* ---------- 17. responsive ---------------------------------------------- */
@media (max-width:1180px){
  /* the figure is centred in the stage but the copy is on a grid that does not
     know about it, so two columns put the paragraphs across his face. Use the
     stacked treatment for the whole tablet range. */
  .about-stage{ min-height:0; }
  .about .plate{
    position:relative; inset:auto;
    width:min(100%,620px); margin-inline:auto;
    height:auto; aspect-ratio:3 / 4;
  }
  .about-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"l r" "m m";
    row-gap:clamp(28px,4vw,44px);
    padding-block:clamp(24px,4vw,44px) clamp(60px,8vw,110px);
    align-items:start;
  }
  .about-l{ grid-area:l; } .about-r{ grid-area:r; } .about-mid{ grid-area:m; display:none; }
  .about-l, .about-r{ justify-self:stretch; max-width:none; }
  .nums-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(2)::after{ display:none; }
}
@media (max-width:1024px){
  .nav, .hdr-in .btn{ display:none; }
  .burger{ display:flex; }
  .pane-in{ grid-template-columns:1fr; gap:clamp(22px,3vw,32px); padding:clamp(24px,3vw,34px); }
  .card{ max-width:660px; }
  /* the card stacks here, so the founding box does too, at the card's width */
  .founding{
    max-width:660px;
    grid-template-columns:1fr; grid-template-areas:"copy" "clock" "cta";
    text-align:center; gap:20px;
  }
  .founding-tag, .founding p{ margin-inline:auto; }
  .founding-copy{ align-self:auto; }
  .founding-cta{ justify-self:center; }
  .founding-clock div{ min-width:0; }
  .plan-head h3{ font-size:clamp(21px,2.6vw,26px); }
  .plan-head > p{ font-size:14px; }
  .price{ margin-top:20px; }
  .price .amt{ font-size:clamp(40px,7vw,58px); }
  .feats li{ padding:12px 0; font-size:14px; }
  .plan-cta{ margin-top:22px; }
  .tst-rails{ grid-template-columns:repeat(2,minmax(0,1fr)); height:min(70vh,620px); }
  .rail:nth-child(3){ display:none; }
}
@media (max-width:760px){
  .hero{ min-height:100svh; }
    .hero-grid{ padding:calc(74px + 22px) var(--pad) clamp(38px,6vh,54px); }
  .hero h1{ font-size:clamp(34px,10.6vw,58px); letter-spacing:-.02em; }
  /* the phone hero carries the book alone: the claim and the button below it
     were crowding the frame, and the section right underneath opens with the
     same call to action anyway */
  .hero-bot{ display:none; }
  .hero-sub{
    display:block;
    margin-top:14px;
    font-family:var(--ff-body); font-weight:300;
    font-size:15.5px; line-height:1.5; letter-spacing:-.002em;
    color:var(--muted);
  }
  .scrollcue{ display:grid; }
  .section-head h2{ font-size:clamp(24px,7.4vw,44px); }
  .close h2{ font-size:clamp(26px,8vw,46px); }

  .about-grid{ grid-template-columns:1fr; grid-template-areas:"l" "m" "r"; text-align:left; }
  .about-l, .about-r{ justify-self:stretch; max-width:none; }
  .about-stage{ min-height:0; }
  .about .plate{
    position:relative; inset:auto;
    /* full bleed edge to edge — a capped width left visible margins on
       smaller phones. The band matches the clip's 3:4 frame, so the figure
       is never cropped at the head or the feet. */
    width:100%;
    height:auto; aspect-ratio:3 / 4;
  }
  .about-grid{ row-gap:clamp(18px,4vw,26px); }
  .about-r p{ font-size:15.5px; }
  /* the centre signature labels the figure on desktop; on mobile it just
     repeats the heading that is already right above it */
  .about-mid{ display:none; }
  .about-grid{ padding-block:clamp(18px,4vw,34px) clamp(60px,10vw,90px); }
  .about-mid{ padding-bottom:0; }

  .tst-rails{ grid-template-columns:1fr; height:min(78vh,560px); }
  .rail:nth-child(2){ display:none; }
  /* one column on a phone: the stats read as a centred list, and the number
     carries the block rather than the caption. The first/last padding resets
     below undo the desktop edge trims, which only made sense side by side. */
  .nums-grid{ grid-template-columns:1fr; }
  .stat::after{ display:none; }
  :root{ --stat-pad:clamp(26px,7vw,38px); }
  .stat{ text-align:center; padding:var(--stat-pad) 0; }
  .nums-grid > .stat:first-child,
  .nums-grid > .stat:last-child{ padding-inline:0; }
  .stat .v{ justify-content:center; font-size:clamp(52px,17vw,74px); }
  .stat p{ margin-inline:auto; max-width:26ch; font-size:14.5px; }
  .ftr-top{ grid-template-columns:1fr; }
  .close-btns .btn{ width:100%; }

  .founding{ gap:18px; }
  .founding-cta{ justify-self:stretch; }

  .faq-list{ padding:2px 18px 4px; border-radius:22px; }
  .faq-item summary{ min-height:60px; padding:16px 0; gap:16px; font-size:15px; }
  .faq-ico{ width:30px; height:30px; }
  .faq-a-in{ padding-right:0; padding-bottom:22px; }
  .faq-a .btn{ width:100%; }

  .cc{ left:10px; right:10px; bottom:10px; width:auto; padding:20px 18px 16px; border-radius:20px; }
}

/* ---------- 17b. very small phones --------------------------------------- *
   must sit after the 760px block so these win the cascade                   */
@media (max-width:400px){
  .hero h1{ font-size:clamp(30px,9.6vw,52px); }
  .hero-sub{ font-size:14.5px; margin-top:10px; }
  .hero-grid{ padding-top:calc(74px + 16px); }
}
/* below ~370px "Annual 2 months free" no longer fits beside "Monthly" */
@media (max-width:370px){
  .bill{ display:flex; width:100%; }
  .bill button{ flex:1 1 0; padding:6px 8px; line-height:1.4; }
  .bill .save{ display:block; margin-left:0; }
}

/* ---------- 18. reduced motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-rise]{ opacity:1; transform:none; filter:none; }
  .btn:hover, .tst-card:hover{ transform:none; }
}