/* The public front door (landing.html): a dark page over a live 3D city.

   Fonts are self-hosted (app/static/fonts, SIL OFL 1.1 texts beside them):
   the page asks nothing of any other server. Status colours match the app's
   cleaning states. Content is visible at rest; motion only adds to it. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-var.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;
}
/* Bricolage's lowercase f, drawn from Hanken Grotesk (Taylor, Oct 19, 2026:
   "fix this bad f in the main page and anywhere else the bad f appears"). A
   later face of the same family wins for the characters its range names, so
   every other letter stays Bricolage. The ads keep theirs. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-var.woff2) format("woff2");
  unicode-range: U+0066;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-var.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-var.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;
}

:root {
  color-scheme: dark;
  --bg: #04060c;
  --bg-2: #080c16;
  --ink: #eef1f8;
  --body: #b4bccd;
  --muted: #7c869b;
  --line: rgba(160, 180, 230, .14);
  --line-strong: rgba(160, 180, 230, .26);
  --glass: rgba(12, 17, 30, .62);
  --glass-strong: rgba(14, 20, 36, .82);
  --accent: #8f8cff;
  --accent-2: #b9a6ff;
  --accent-ink: #0b0a1f;
  --ready: #34d399;
  --clean: #fbbf24;
  --trip: #38bdf8;
  --late: #fb7185;
  --cleaner: #c084fc;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 18px;
  --gutter: 16px;
}
* { box-sizing: border-box; }
/* No smooth scrolling: a top link jumps straight to its section, and the
   camera makes one short move to that section's shot (landing.js). Smooth
   scrolling streamed up to eight screens past while the camera flew through
   every section on the way (the owner, Oct 16, 2026). */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
/* Anchors land below the 64px sticky header. */
[id] { scroll-margin-top: 64px; }

/* Skip link: hidden until focused from the keyboard. */
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-weight: 650; }
.skip:focus { top: 8px; }

/* Fixed stage */
#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(2,3,8,.75) 100%),
    linear-gradient(180deg, rgba(4,6,12,.35), transparent 18%, transparent 80%, rgba(4,6,12,.6)); }
#tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* The still city, shown only without 3D. Its two pictures are named on the
   element itself (--fb-wide, --fb-tall in landing.html), so a browser with
   3D never downloads them. */
.fallback { display: none; }
.no-gl #stage, .no-gl #tags { display: none; }
.no-gl .fallback { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--fb-wide) center / cover no-repeat, var(--bg); }
@media (max-width: 720px) { .no-gl .fallback { background: var(--fb-tall) center top / cover no-repeat, var(--bg); } }
.no-gl .gl-only { display: none; }

/* Car card and labels over the scene */
.card3d { position: absolute; left: 0; top: 0; width: 248px; padding: 12px 14px; border-radius: 14px;
  background: rgba(10, 14, 26, .78); border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(.96); transition: opacity .18s, transform .18s; }
.card3d.show { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1); }
.card3d::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: rgba(10, 14, 26, .9); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.card3d .c-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card3d .c-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.card3d .c-rows { margin-top: 8px; display: grid; gap: 4px; font-size: 12.5px; color: var(--body); font-family: var(--font-mono); }
.card3d .c-rows b { color: var(--ink); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: color-mix(in srgb, var(--c, var(--ready)) 16%, transparent); color: var(--c, var(--ready)); border: 1px solid color-mix(in srgb, var(--c, var(--ready)) 40%, transparent); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
/* A chip is moved over its car with transform (landing.js), which needs no
   layout; the translate(-50%, -100%) here is the no-script resting place. */
.chip { position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  font: 600 11px/1.3 var(--font-mono); background: rgba(8, 12, 22, .78); border: 1px solid var(--line-strong);
  transform: translate(-50%, -100%); opacity: 0; will-change: transform, opacity; }
.chip.pos { color: var(--ready); }
.chip.cd { color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); font-weight: 500; font-size: 10.5px; padding: 3px 7px; }
.chip.cd::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; transform: translateY(-1px); box-shadow: 0 0 6px currentColor; }
.chip.neg { color: var(--late); }

/* The car panel (tap a car; landing.html #carsheet, landing.js): on the right
   on a computer, a sheet from the bottom on a phone. Above the legend, under
   the top bar. The phone rule matches landing.js's isPhone. */
.carsheet { position: fixed; z-index: 25; right: 28px; top: 84px; width: 372px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 14px; border-radius: 18px; background: rgba(9, 13, 24, .9); border: 1px solid var(--line-strong);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0; transform: translateX(18px); transition: opacity .22s, transform .22s; }
.carsheet.open { opacity: 1; transform: none; }
.cs-grip { display: none; }
.cs-top { display: flex; align-items: center; gap: 10px; }
.cs-name { flex: 1; min-width: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-x, .cs-nav { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--body); font: 400 20px/1 var(--font-body); transition: background .15s, color .15s; }
.cs-x:hover, .cs-nav:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.cs-now { margin-top: 10px; display: grid; gap: 3px; font: 12.5px/1.45 var(--font-mono); color: var(--body); }
.cs-now b { color: var(--ink); font-weight: 500; }
.cs-profit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cs-profit span { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cs-profit b { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.cs-profit .pos { color: var(--ready); }
.cs-profit .neg { color: var(--late); }
.cs-sum { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--body); }
.cs-sum b { margin-left: 6px; font: 500 12.5px/1.4 var(--font-mono); color: var(--ink); }
.cs-bar { margin-top: 6px; display: flex; gap: 2px; height: 9px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.05); }
.cs-bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.cs-legend { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12.5px; color: var(--body); }
.cs-legend li { display: flex; align-items: center; gap: 7px; }
.cs-legend li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.cs-legend b { margin-left: auto; font: 500 12.5px/1.4 var(--font-mono); color: var(--ink); }
.cs-grid { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-grid div { padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.cs-grid dt { font-size: 11.5px; color: var(--muted); }
.cs-grid dd { margin: 2px 0 0; font: 600 15.5px/1.3 var(--font-mono); color: var(--ink); }
.cs-grid small { font-weight: 400; font-size: 11px; color: var(--muted); }
.cs-grid .soon dd { color: var(--clean); }
.cs-grid .meter { display: block; margin-top: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.cs-grid .meter i { display: block; height: 100%; border-radius: 2px; background: var(--trip); }
.cs-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.cs-count { min-width: 52px; text-align: center; font: 11.5px/1 var(--font-mono); color: var(--muted); }
.cs-cta { margin-left: auto; }
@media (max-width: 759px), (max-height: 699px) {
  .carsheet { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 62vh; max-height: 62dvh; padding: 6px 16px 12px; border-radius: 20px; transform: translateY(26px); }
  .cs-grip { display: block; width: 38px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: var(--line-strong); }
  .cs-drag { touch-action: none; }
  .cs-name { font-size: 18px; }
  .cs-profit { margin-top: 10px; padding-top: 10px; }
  .cs-profit b { font-size: 26px; }
  .cs-grid { margin-top: 10px; gap: 6px; }
  .cs-grid div { padding: 7px 10px; }
  .cs-grid dd { font-size: 14.5px; }
  .car-open .hud { opacity: 0; pointer-events: none; }
}

/* Header */
.head { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.head.scrolled { background: rgba(5, 8, 15, .72); border-bottom-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }
.head .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
/* The TF mark (static/brand/tf-mark.svg, _brand_mark.html), as in the ads. */
.brand-mark { display: block; flex: none; width: 28px; height: 28px; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 14.5px; color: var(--body); }
.nav a.l:hover, .nav a.signin:hover { color: var(--ink); }
@media (max-width: 860px) { .nav a.l { display: none; } }
@media (max-width: 480px) { .nav .signin { display: none; } }
@media (max-width: 420px) { .head .brand { gap: 8px; } .head .brand span { font-size: 14.5px; } .head .brand-mark { width: 24px; height: 24px; } .nav .btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 10px; } }
@media (max-width: 350px) { .head .brand span { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; font-weight: 650; white-space: nowrap; font-family: var(--font-body);
  transition: transform .18s, box-shadow .2s, background .2s, border-color .2s; }
.btn-lg { padding: 15px 24px; font-size: 16.5px; }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-primary { color: var(--accent-ink); background: linear-gradient(180deg, #d5ccff, var(--accent) 140%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 30px rgba(143,140,255,.35), 0 0 60px rgba(143,140,255,.18); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 14px 40px rgba(143,140,255,.5), 0 0 80px rgba(143,140,255,.25); }
.btn-ghost { color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(200,210,255,.4); }
.btn svg { width: 18px; height: 18px; }

/* Layout */
main { position: relative; z-index: 3; }
.hero > .wrap, .scene-sec > .wrap { width: 100%; }
section { position: relative; }
/* Each section is as tall as its panel plus a strip of city above and below:
   no screen-high empty gaps (the owner, Oct 14, 2026: the closing section was
   far too far down). The camera blends between section centres (landing.js
   shotBlend, re-measured on resize), so it still moves smoothly. */
.scene-sec { display: flex; align-items: center; padding: 48px 0; }
.panel { width: 100%; max-width: 560px; padding: 30px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
.panel.wide { max-width: 1100px; }
.right .panel { margin-left: auto; }
@media (max-width: 640px) { .panel { padding: 22px 18px; border-radius: 16px; } .scene-sec { padding: 36px 0; } }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.0; font-weight: 800; letter-spacing: -.035em; }
.h1 .glow { background: linear-gradient(92deg, #fff 10%, #cfc8ff 45%, #7dd3fc 75%, #6ee7b7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; margin-top: 14px; }
.h2-sm { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.h2-xl { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.lede { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--body); line-height: 1.6; margin-top: 18px; max-width: 36em; }
.p { color: var(--body); line-height: 1.65; }
.small { font-size: 13.5px; color: var(--muted); }
.mono { font-family: var(--font-mono); }

/* Hero */
.hero { min-height: calc(100vh - 64px); display: flex; align-items: center; padding: 40px 0 72px; }
.hero-inner { max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--body);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); backdrop-filter: blur(8px); margin-bottom: 22px; }
.eyebrow b { width: 8px; height: 8px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 10px var(--ready), 0 0 0 4px rgba(52,211,153,.15); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 480px) { .cta-row .btn { flex: 1 1 100%; } }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; color: var(--body); }
.ticks span { display: inline-flex; align-items: center; gap: 7px; }
.tick { width: 16px; height: 16px; color: var(--ready); flex: none; }
.invite-only { margin-top: 14px; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 70% at 15% 50%, rgba(4,6,12,.78), transparent 70%); }
@media (max-width: 720px) { .hero-shade { background: linear-gradient(180deg, rgba(4,6,12,.2), rgba(4,6,12,.72) 30%, rgba(4,6,12,.72) 75%, rgba(4,6,12,.2)); } }

/* Feed (the example fleet's log). The blinking dot has no words. */
.feed { position: absolute; right: var(--gutter); bottom: 28px; width: 340px; padding: 14px 16px 12px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
@media (max-width: 1000px) { .feed { position: relative; right: auto; bottom: auto; width: auto; margin-top: 28px; } }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--ready); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ready); box-shadow: 0 0 10px var(--ready); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.feed ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; min-height: 148px; }
.feed li { display: grid; grid-template-columns: 62px 10px 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--body); line-height: 1.4; animation: feedIn .4s ease both; }
.feed li time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.feed li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); transform: translateY(-1px); }
.feed li b { color: var(--ink); font-weight: 600; }
@keyframes feedIn { from { opacity: 0; transform: translateY(6px); } }
.feed .small { margin-top: 10px; font-size: 11px; }

/* HUD legend. Decoration (aria-hidden): taps go through it to whatever it
   floats over, a hero button on a short phone screen included. */
.hud { position: fixed; left: var(--gutter); bottom: 16px; z-index: 20; pointer-events: none; display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 12px;
  background: rgba(6, 9, 18, .7); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 500 11.5px/1 var(--font-mono); color: var(--body); transition: opacity .3s, transform .3s; }
.hud span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hud i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hud .clock { color: var(--ink); padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .hud .clock { display: none; } }
@media (max-width: 640px) { .hud { left: 50%; transform: translateX(-50%); bottom: 10px; gap: 10px; padding: 8px 11px; font-size: 10.5px; } }
.no-gl .hud .clock { display: none; }

/* Outcomes */
.grid3 { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 820px) { .grid3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.tile { padding: 22px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line); position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--accent)) 55%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tile .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--c, var(--accent)) 25%, transparent); }
.tile .ico svg { width: 20px; height: 20px; }
.tile p { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.6; }

/* Feature lists */
.items { display: grid; gap: 18px; margin-top: 26px; }
.item { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.item .dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c, var(--ready)); background: color-mix(in srgb, var(--c, var(--ready)) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--ready)) 28%, transparent); }
.item .dot.num { font: 600 12px/1 var(--font-mono); }
.item .dot svg { width: 15px; height: 15px; }
.item p { margin-top: 4px; color: var(--body); font-size: 15px; line-height: 1.6; }

/* Cleaner queue mini visual */
.queue { margin-top: 26px; padding: 16px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.queue-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.q-rows { display: grid; gap: 8px; margin-top: 12px; }
.q-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 14px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.q-row .n { font: 600 11px/1 var(--font-mono); color: var(--muted); }
.q-row.on { border-color: color-mix(in srgb, var(--cleaner) 45%, transparent); background: color-mix(in srgb, var(--cleaner) 9%, transparent); }
.q-row .pill { font-size: 9.5px; }
.table-note { margin-top: 10px; font-size: 11.5px; }

/* Profit table */
.ptable { margin-top: 24px; display: grid; gap: 6px; }
.prow { display: grid; grid-template-columns: 1fr 74px; gap: 12px; align-items: center; font-size: 13.5px; }
.prow .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.prow .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(52,211,153,.4), var(--ready)); }
.prow.neg .bar i { background: linear-gradient(90deg, rgba(251,113,133,.4), var(--late)); }
.prow .lbl { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--body); }
.prow .v { font-family: var(--font-mono); text-align: right; color: var(--ready); font-size: 13px; }
.prow.neg .v { color: var(--late); }

/* Pair */
.pair { display: grid; gap: 16px; }
@media (min-width: 860px) { .pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
.pair .panel { max-width: none; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.role { padding: 6px 11px; border-radius: 999px; font: 500 12px/1.2 var(--font-mono); border: 1px solid var(--line-strong); color: var(--body); }
.sources { display: grid; gap: 8px; margin-top: 18px; }
.src { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.src i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }

/* Pricing. Monthly shows by default; data-bill="year" on #pricing swaps
   every price to its yearly total, under the 12-month price struck through,
   with the saving in dollars. Without script the toggle does nothing. */
.lp-y { display: none; }
[data-bill="year"] .lp-y { display: inline; }
[data-bill="year"] .lp-m { display: none; }
/* A paid plan's two buttons, one per period (landing.html pay_cta). */
.pay-y { display: none; }
[data-bill="year"] .pay-y { display: inline-flex; }
[data-bill="year"] .pay-m { display: none; }
.bands { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 720px) { .bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band { padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .25s, background .25s, box-shadow .25s; }
.band.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 0 40px rgba(143,140,255,.15); }
.band .bn { font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.band .br { font-size: 14px; color: var(--body); margin-top: 6px; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; margin-top: 12px; line-height: 1; }
.price small { font: 500 13px/1 var(--font-body); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.price .was { display: block; margin-bottom: 6px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.price .was s { text-decoration-thickness: 2px; text-decoration-color: var(--late); }
.price .was small { font-size: 12px; }
.psub .save { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.35 var(--font-mono); color: var(--ready);
  background: color-mix(in srgb, var(--ready) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ready) 42%, transparent); }
.band.plan { position: relative; display: flex; flex-direction: column; min-width: 0; }
.band.plan .badge { position: absolute; top: -11px; right: 14px; padding: 4px 10px; border-radius: 999px; font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: linear-gradient(180deg, #d5ccff, var(--accent)); box-shadow: 0 0 24px rgba(143,140,255,.45); }
.band.plan.best { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.band .psub { font-size: 12.5px; color: var(--muted); margin-top: 8px; min-height: 2.6em; }
.pfeat { display: grid; gap: 8px; align-content: start; margin: 14px 0 18px; font-size: 13.5px; color: var(--body); line-height: 1.45; flex: 1; }
.pfeat li { display: flex; gap: 8px; align-items: flex-start; }
.pfeat .tick { margin-top: 2px; width: 14px; height: 14px; }
.pbtn { width: 100%; white-space: normal; text-align: center; }
.bill-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-top: 22px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); flex-wrap: wrap; }
.bill-toggle button { appearance: none; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 9px; font: 600 13.5px/1.2 var(--font-body); color: var(--body); background: transparent; }
.bill-toggle button[aria-pressed="true"] { color: var(--accent-ink); background: linear-gradient(180deg, #d5ccff, var(--accent)); }
.calc { margin-top: 18px; padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.25); display: grid; gap: 16px; }
@media (min-width: 820px) { .calc { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 28px; } }
.calc label { display: flex; justify-content: space-between; font-size: 14px; color: var(--body); gap: 8px; }
.calc output { font: 600 14px/1 var(--font-mono); color: var(--ink); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin-top: 10px; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--p, 30%), rgba(255,255,255,.1) var(--p, 30%)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; margin-top: -8px; box-shadow: 0 0 0 4px rgba(143,140,255,.35), 0 0 20px rgba(143,140,255,.6); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(143,140,255,.35); }
.total { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; line-height: 1; }
.total small { font: 500 14px/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
.breakdown { font: 500 12.5px/1.6 var(--font-mono); color: var(--body); margin-top: 8px; }
.guar { display: grid; gap: 8px; margin-top: 18px; font-size: 14.5px; color: var(--body); }
.guar li { display: flex; gap: 9px; align-items: flex-start; }
.guar li > div { min-width: 0; }
.guar b { color: var(--ink); }
.guar .tick { margin-top: 3px; }
.fine { margin-top: 12px; font-size: 12.5px; }

/* Answers written in guide markdown (the FAQ, the No-Surprise Bill). */
.md p { margin: 0; }
.md p + p, .md ul, .md ol { margin-top: 8px; }
.md ul { list-style: disc; padding-left: 20px; }
.md ol { list-style: decimal; padding-left: 20px; }
.md a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.md strong, .md b { color: var(--ink); font-weight: 600; }
.md mark { background: color-mix(in srgb, var(--clean) 22%, transparent); color: var(--ink); border-radius: 3px; }
.md code { font-family: var(--font-mono); font-size: .9em; }
.guar .md { display: inline; }
.guar .md p { display: inline; }

/* About. The photo sits beside the heading at every width, centred up and
   down on the H of "Host" (landing.js sets its margin-top from #about-host;
   the margin here is the no-script guess). On a phone the text runs full
   width under the heading; from 760px it is a column beside the photo. */
.about { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "av head" "body body"; column-gap: 16px; align-items: start; }
.about-head { grid-area: head; min-width: 0; }
.about-body { grid-area: body; margin-top: 14px; }
@media (min-width: 760px) { .about { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "av head" "av body"; column-gap: 30px; } }
/* nowrap: no line break between "Host" and the zero-size mark that finds
   its baseline. */
.host-word { white-space: nowrap; }
.host-word .bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* Taylor's photo, cropped to head and shoulders in its square frame. */
.avatar { grid-area: av; position: relative; width: 76px; height: 76px; margin-top: 44px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 30% 25%, rgba(185,166,255,.5), rgba(56,189,248,.15) 60%, transparent), rgba(255,255,255,.03); }
@media (min-width: 760px) { .avatar { width: 96px; height: 96px; margin-top: 62px; border-radius: 22px; } }
.avatar img { position: absolute; left: -118.75%; top: -120.83%; width: 250%; max-width: none; height: auto; }
.quote { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin-top: 14px; }

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 26px; align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; } }
.faq details { border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .2s, background .2s; }
.faq details[open] { border-color: var(--line-strong); background: rgba(255,255,255,.045); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 44px 16px 18px; font-weight: 600; position: relative; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 500 20px/1 var(--font-mono); color: var(--accent-2); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .md { padding: 0 18px 18px; color: var(--body); font-size: 14.5px; line-height: 1.6; }
.all-q { margin-top: 18px; }
.all-q a { color: var(--accent-2); }
.all-q a:hover { text-decoration: underline; }

/* Final */
.final { text-align: center; padding: 56px 28px; }
.final .lede { margin-left: auto; margin-right: auto; }
.final .cta-row { justify-content: center; }
.foot { position: relative; z-index: 3; padding: 30px 0 90px; border-top: 1px solid var(--line); background: rgba(4,6,12,.85); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot .brand-foot { font: 400 13.5px/1.4 var(--font-body); letter-spacing: 0; white-space: normal; }
.foot .brand-mark { width: 22px; height: 22px; }
.foot nav a:hover { color: var(--ink); }

/* Reveal: visible at rest; animates in only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .rv.in { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
}
@media (prefers-reduced-motion: reduce) {
  .live::before { animation: none; }
  .feed li { animation: none; }
  .card3d, .chip, .carsheet { transition: none; }
}
@media (max-width: 640px) {
  .scene-sec.peek { padding-top: 24vh; align-items: flex-start; }
  .hero { padding-top: 24vh; align-items: flex-start; }
  .hero-shade { background: linear-gradient(180deg, transparent 0, rgba(4,6,12,.55) 26vh, rgba(4,6,12,.8) 50vh, rgba(4,6,12,.7) 85%, rgba(4,6,12,.2)); }
  .lede { font-size: 1rem; }
}