/* The public site (Cloudflare Pages, no build step). The look of 29 Oct (the founder's reference): dark only, Midnight
   Black page, Electric Blue for links and focus, Cantaloupe Orange as the one warm accent; white pill buttons set in
   mono, a glass orb for the landing page's main button and a blue-to-orange glow behind the hero; a 4 px grid; TikTok Sans (self-hosted, OFL: /fonts/TikTokSans-OFL.txt) for
   headings and the system font for text and buttons. Contrast, measured: text 4.5:1 or more on every background,
   control borders 3:1 or more. No inline styles anywhere: the CSP allows style-src 'self' only. The tokens block is
   a byte-identical copy of the one in app/static/beta/app.css and engine/report.py (tests/test_tokens.py). */
/* tokens:start (shared: app/static/beta/app.css, site/styles.css, engine/report.py TOKENS_CSS) */
:root{
  color-scheme:dark;
  /* colour: the founder's palette of 29 Oct, dark only. Midnight Black #02070A, Electric Blue #0297DE, Cantaloupe
     Orange #FC734D; contrast measured on bg and on surface */
  --bg:#02070A;            /* Midnight Black: the page */
  --surface:#0B151C;       /* cards, fields, dialog, tables, notices */
  --sunk:#131F27;          /* skeleton blocks, disabled fill, pressed secondary button */
  --ink:#F4F6F7;           /* text, and the white primary button: 18.67 on bg, 17.02 on surface */
  --ink-hover:#FFFFFF;     /* primary button hover */
  --on-ink:#02070A;        /* words on the white primary button: 18.67 */
  --mute:#9AA7B0;          /* secondary text: 8.22 on bg, 7.49 on surface */
  --line:#56656F;          /* control borders: 3.36 on bg, 3.06 on surface */
  --hair:#18242C;          /* decorative dividers and card borders only */
  --glass:rgba(244,246,247,.06);  /* the secondary button's fill */
  --glass-line:rgba(244,246,247,.22); /* the secondary button's and the button pair's border */
  --accent:#0297DE;        /* Electric Blue: links, focus, selected. 6.25 on bg, 5.70 on surface */
  --accent-hover:#3DB3EC;  /* hovered link: 8.54 */
  --warm:#FC734D;          /* Cantaloupe Orange, the one warm accent: Recommended, Founding 20, the glow. 7.42 */
  --ok:#3FC982;            /* 9.53 */
  --warn:#F2B04A;          /* 10.69 */
  --bad:#FF7070;           /* 7.52 */
  --scrim:rgba(2,7,10,.72); /* behind the pop-up: flat, no blur */
  /* type */
  --font-head:"TikTok Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-btn:var(--font-mono); /* buttons are set in mono, like the reference */
  --fs-meta:13px; --fs-small:15px; --fs-body:16px; --fs-lead:18px;
  --fs-h3:18px; --fs-h2:20px; --fs-h1:28px; --fs-display:40px; /* display: landing hero only, 32px under 600px */
  --lh-text:1.5; --lh-head:1.2;
  --w-text:400; --w-strong:600;
  --measure:70ch;
  /* space: a 4 px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* shape: buttons are pills; cards and fields round more than before */
  --r-label:6px; --r-control:10px; --r-card:16px; --r-bar:2px; --r-pill:999px;
  /* size */
  --tap:44px; --control-h:48px; --control-h-big:56px;
  --col:720px; --col-wide:1100px; --gutter:16px; --dialog:480px;
  /* motion: the progress bar, skeletons and button hovers */
  --t-bar:150ms; --t-pulse:1.2s; --t-hover:160ms;
}
/* tokens:end */
@font-face{font-family:"TikTok Sans";src:url("/fonts/TikTokSans-Variable.ttf") format("truetype");font-weight:300 900;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--w-text) var(--fs-body)/var(--lh-text) var(--font-text)}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--w-strong);line-height:var(--lh-head);margin:0 0 var(--s2)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{max-width:var(--measure)}
a{color:var(--accent)} a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
em,i{font-style:normal}   /* no italic emphasis (R23-4) */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-wrap:anywhere}
a:focus-visible,summary:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:var(--fs-display);letter-spacing:-.01em;margin:0}
h2{font-size:28px;margin:0 0 16px}
h3{font-size:var(--fs-h2);margin:0 0 4px}
p{margin:0}
.col{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.wide{max-width:var(--col-wide);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-label);z-index:2}

.bar{border-bottom:1px solid var(--hair);background:var(--bg)}
.bar-in{display:flex;align-items:center;gap:16px;min-height:64px}
.name{font-family:var(--font-head);font-weight:var(--w-strong);font-size:20px;color:var(--ink);text-decoration:none;margin-right:auto}
.name:hover{color:var(--ink)}
nav{display:flex;gap:16px}
nav a{color:var(--mute);text-decoration:none;font-size:var(--fs-small)}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:600px){.bar-in{gap:12px}nav{gap:12px}.name{font-size:18px}}  /* Questions is a page of its own now, so the links stay on a phone */

/* buttons: the system font at 600 (T19); primary is ink, secondary a white box with a control border */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h);padding:12px 24px;border-radius:var(--r-pill);
  border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);font:500 15px/1.25 var(--font-btn);text-decoration:none;cursor:pointer;
  transition:background var(--t-hover),box-shadow var(--t-hover),border-color var(--t-hover)}
.btn:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--on-ink);box-shadow:0 0 24px rgba(2,151,222,.45)}
.btn:active{box-shadow:0 0 12px rgba(2,151,222,.45)}
.btn:disabled{background:var(--sunk);border-color:var(--hair);color:var(--mute);box-shadow:none;cursor:default}
.btn.small{min-height:var(--tap);padding:8px 18px;font-size:14px}
.btn.line,.btn.ghost{background:var(--glass);color:var(--ink);border-color:var(--glass-line)}
.btn.line:hover,.btn.ghost:hover{background:rgba(244,246,247,.12);color:var(--ink);box-shadow:none}
.btn.line:active,.btn.ghost:active{background:var(--sunk)}
.btn.full{width:100%}
/* the header's pair: Sign in (glass) and Get started (white) in one pill */
.pair{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--glass-line);border-radius:var(--r-pill);background:rgba(2,7,10,.55)}
.pair .btn{min-height:38px;padding:6px 16px}
.pair .btn.ghost{background:transparent;border-color:transparent}
@media (max-width:480px){.pair .btn:not(.ghost){display:none}}
/* On a phone the header's Get started is hidden (above), so the home and FAQ pages keep one button in reach: a bar
   fixed to the bottom, clear of the phone's home bar, with room left under the footer so it covers nothing */
.phone-cta{display:none;transition:transform var(--t-hover) ease}
.phone-cta.wait{transform:translateY(110%)}
@media (max-width:480px){.phone-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);border-top:1px solid var(--hair);padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}body:has(.phone-cta) .foot{padding-bottom:96px}}
/* the glass orb: the landing page's main button, a frosted disc in a thin ring with the sound-bars mark above the words */
.btn.orb{flex-direction:column;gap:6px;width:140px;height:140px;min-height:0;padding:10px;border-radius:50%;position:relative;
  color:var(--ink);border:1px solid rgba(255,255,255,.5);font-size:13px;line-height:1.3;text-align:center;text-shadow:0 1px 8px rgba(2,7,10,.35);
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.5),rgba(255,255,255,.2) 55%,rgba(255,255,255,.1) 72%);
  box-shadow:0 0 48px rgba(255,255,255,.22),inset 0 0 28px rgba(255,255,255,.35);
  outline:1px solid rgba(255,255,255,.4);outline-offset:11px}  /* the thin outer ring; an outline takes no room */
.btn.orb:focus-visible{outline:2px solid var(--accent);outline-offset:11px}
.btn.orb::before{content:"";width:22px;height:14px;
  background:linear-gradient(currentColor 0 0) 0 50%/2px 6px no-repeat,linear-gradient(currentColor 0 0) 5px 50%/2px 10px no-repeat,
    linear-gradient(currentColor 0 0) 10px 50%/2px 14px no-repeat,linear-gradient(currentColor 0 0) 15px 50%/2px 10px no-repeat,
    linear-gradient(currentColor 0 0) 20px 50%/2px 6px no-repeat}
.btn.orb:hover{color:var(--ink);background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.62),rgba(255,255,255,.26) 55%,rgba(255,255,255,.12) 72%);
  border-color:rgba(255,255,255,.7);box-shadow:0 0 64px rgba(255,255,255,.32),inset 0 0 28px rgba(255,255,255,.4)}
.quiet{font-weight:var(--w-strong)}

main section{padding-top:48px;padding-bottom:16px}
.hero{padding-top:64px}
.lead{font-size:var(--fs-lead);color:var(--mute);margin-top:16px;max-width:62ch}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px}
.meta{margin-top:16px;color:var(--mute);font-size:var(--fs-small)}
@media (max-width:600px){h1{font-size:32px}.hero{padding-top:40px}}

/* "What every reel comes with": a divided list in one column, never a grid of feature cards (T21) */
.gets{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.gets li{padding:16px 0;border-bottom:1px solid var(--hair)}
.gets p{color:var(--mute);margin-top:4px;max-width:var(--measure)}

/* the landing page only (index.html: .home and its section ids): the h1's second line in the secondary ink, air
   between the sections (.col's padding would otherwise zero main section's), more under the hero's price line, and
   the revisions box under the list with air below it */
.h1-next{display:block;color:var(--mute)}
.hero.home{padding-bottom:96px}
.hero.use{padding-bottom:var(--s7)}  /* the use-case pages' opening: room before the first section */
/* the glow behind the landing hero (the reference): Midnight Black at the top, Electric Blue light in fine vertical
   streaks rising to a Cantaloupe Orange glow under the orb, then back to the page so How it works starts on black */
.hero.home{max-width:none;text-align:center;
  background:linear-gradient(180deg,rgba(2,7,10,0) 93%,var(--bg) 100%),
    radial-gradient(58% 40% at 50% 86%,rgba(252,115,77,1),rgba(252,115,77,.55) 45%,rgba(252,115,77,0) 100%),
    radial-gradient(42% 85% at 50% 72%,rgba(2,151,222,1),rgba(2,151,222,.4) 55%,rgba(2,151,222,0) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,rgba(255,255,255,0) 2px 10px),
    linear-gradient(180deg,var(--bg) 0%,#04223A 35%,#0A4F86 100%)}
.hero.home>*{margin-left:auto;margin-right:auto;max-width:var(--col)}
.hero.home .lead{max-width:56ch}
.hero.home .actions{justify-content:center;flex-direction:column;gap:28px;margin-top:40px}
.hero.home .meta{color:var(--ink)}
.hero.home .quiet{color:var(--ink);font:500 14px/1.25 var(--font-btn)}
.hero.home .quiet:hover{color:var(--ink-hover)}
#how.col,#gets.col,#questions.col{padding-top:48px}
/* the standout line of What you get: in the list, not a box of its own (the founder, 26 Oct) */
.gets li.star{padding:24px 0;display:flex;flex-direction:column;gap:6px}
.gets li.star h3{font-size:var(--fs-h2)}
@media (max-width:600px){.hero.home{padding-bottom:32px}}

.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:24px}
.steps li{counter-increment:step;display:grid;grid-template-columns:40px 1fr;column-gap:12px}
.steps li::before{content:counter(step);grid-row:1 / span 2;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-label);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.steps p{color:var(--mute)}

.price{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:24px}
@media (max-width:600px){.price{padding:16px}}
.plain{margin:16px 0 24px;padding-left:20px;color:var(--mute);list-style:disc}
.plain li+li{margin-top:8px}

details{border-top:1px solid var(--hair);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;font-weight:var(--w-strong);min-height:24px}
details p{margin-top:8px;color:var(--mute);max-width:65ch}

/* ----- notices and labels (7.4, 7.5): white, a full 1 px border, a bold lead word; no tints, no stripes ----- */
.notice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 16px;color:var(--ink)}
.notice strong:first-child{font-weight:var(--w-strong)}
.label,.tag{display:inline-block;align-self:flex-start;font:var(--w-strong) var(--fs-meta)/1.4 var(--font-text);color:var(--mute);border:1px solid currentColor;
  border-radius:var(--r-label);padding:2px 8px;background:var(--surface)}
.tag{color:var(--warm)}

/* ----- pricing (7.8, the 27 Oct note) ----- */
/* Founding 20: a white card with the one accent border, its own label, and a 20-place meter (site.js fills it) */
.founding{margin-top:24px;background:var(--surface);border:1px solid var(--warm);border-radius:var(--r-card);padding:24px;
  display:grid;gap:8px;justify-items:start;max-width:760px}
.founding strong{font-family:var(--font-head);font-weight:var(--w-strong);font-size:24px;line-height:var(--lh-head);display:block}
.founding p{color:var(--mute)}
.founding .places{color:var(--ink);font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.meter{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;width:100%;max-width:420px;margin-top:4px}
.meter i{display:block;height:8px;border-radius:var(--r-bar);background:var(--hair)}
.meter i.taken{background:var(--warm)}
@media (max-width:600px){.founding{padding:16px}.founding strong{font-size:20px}}
.toggle{display:inline-flex;border:1px solid var(--glass-line);border-radius:var(--r-pill);padding:4px;gap:4px;margin-top:32px;background:var(--surface)}
.toggle button{min-height:40px;padding:8px 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);
  font:500 14px/1.25 var(--font-btn);cursor:pointer}
.toggle button:hover{background:var(--glass)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.plans{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px;align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:600px){.card{padding:16px}}
.card.pick{border:2px solid var(--warm)}
.cost{font-family:var(--font-head);font-weight:var(--w-strong);font-size:var(--fs-h1);line-height:1.3;font-variant-numeric:tabular-nums}
.cost .was{font-size:var(--fs-lead);font-weight:var(--w-text);color:var(--mute);margin-left:4px}
.reels{font-size:var(--fs-lead);font-weight:var(--w-strong)}
.card ul{margin:0;padding-left:20px;color:var(--mute);list-style:disc}
.card li+li{margin-top:4px}
.card .pay{margin-top:auto;display:grid;gap:8px}
/* the Start button: its words, then (while founding places are offered) "Lock in $199/mo ... · $249 (struck) · 7 of 20 places left" */
.btn.start{flex-direction:column;gap:2px;text-align:center}
.deal{font-weight:var(--w-text);font-size:var(--fs-small);white-space:normal}
.deal .num{font-weight:var(--w-strong)}
.deal del{text-decoration-thickness:2px}
/* The founder, 4 Nov: while the founding deal is offered it is the Start button's face ("Lock in $199/mo ..."), and
   "Start Standard" takes its place on hover or keyboard focus. Both sit in one grid cell, so the button keeps its size;
   a phone (no hover) keeps the deal, and a tap starts checkout. Without :has() both show, as before. */
.btn.start:has(> .deal:not([hidden])){display:grid;place-items:center}
.btn.start:has(> .deal:not([hidden])) > *{grid-area:1/1}
.btn.start:has(> .deal:not([hidden])) > span:first-child{visibility:hidden}
@media (hover:hover){
  .btn.start:has(> .deal:not([hidden])):hover > span:first-child,
  .btn.start:has(> .deal:not([hidden])):focus-visible > span:first-child{visibility:visible}
  .btn.start:has(> .deal:not([hidden])):hover > .deal,
  .btn.start:has(> .deal:not([hidden])):focus-visible > .deal{visibility:hidden}
}
.renew{font-size:var(--fs-small);color:var(--mute)}
.said{font-size:var(--fs-small);color:var(--mute);min-height:22px}
.said a{font-weight:var(--w-strong)}
.contact{margin-top:16px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.contact div{max-width:60ch}
.contact p{color:var(--mute);margin-top:4px}
.contact .ask{display:grid;gap:4px;justify-items:start}
/* the one Reel Pack: a full-width card under the plans, its words on the left and the price and button on the right */
main section.packs{margin-top:32px;padding:24px 0 0;border-top:1px solid var(--hair)}
.card.pack{display:grid;gap:16px}
@media (min-width:720px){.card.pack{grid-template-columns:minmax(0,1fr) minmax(220px,280px);align-items:end;column-gap:32px}}
.packs-lead{font-size:24px;margin:0}
.pack-facts{font-weight:var(--w-strong);margin:8px 0 4px}
.pack-what p:last-child{color:var(--mute)}
.pack-buy{display:grid;gap:8px}
.small-print{margin-top:24px;color:var(--mute);font-size:var(--fs-small);display:grid;gap:8px}
.small-print .guarantee{color:var(--ink);font-size:var(--fs-body)}

/* ----- the legal pages: the draft banner is a warn notice band (a white band with a 1 px warn border) ----- */
.draft{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--warn);font-size:var(--fs-small);padding:8px 0}
.draft strong{color:var(--warn);font-weight:var(--w-strong)}
.legal h1{font-size:32px}
.legal h2{font-size:22px;margin:32px 0 8px}
.legal p,.legal ul{margin:0 0 12px;max-width:var(--measure)}
.legal ul{padding-left:20px}
.legal li+li{margin-top:4px}
.legal .updated{color:var(--mute);margin-top:8px}

.foot{margin-top:64px;border-top:1px solid var(--hair);padding:24px 0 48px;color:var(--mute);font-size:var(--fs-small)}
.foot-in{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.links{display:flex;flex-wrap:wrap;gap:16px}
.card h2{margin:0;font-size:24px}