/* 10xvid.com. Near black, one coral accent, bold tight sans, monospace
   labels. The work itself (vertical ads, real product UI) carries the page. */

:root {
  --bg: #08080a;
  --bg-2: #0c0c0f;
  --card: #111114;
  --card-2: #16161a;
  --card-3: #1d1d22;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --text: #f4f4f6;
  --text-2: #a9a9b4;
  --dim: #7b7b86;
  --faint: #53535d;
  --accent: #ff3d5a;
  --accent-hi: #ff6277;
  --accent-soft: rgba(255, 61, 90, 0.14);
  --ok: #34d399;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tight: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 20px;
  --max: 1200px;
  --nav-h: 64px;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 44px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}
@media (min-width: 760px) { body { font-size: 16.5px; } }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--tight); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
::selection { background: rgba(255, 61, 90, 0.3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--accent); color: #fff; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ type */
.h1 { font-size: clamp(42px, 7.4vw, 88px); line-height: 0.98; letter-spacing: -0.045em; }
.h2 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -0.04em; }
.h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; }
.lede { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 580px; }
.label { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.muted { color: var(--dim); }
.center { text-align: center; }
.balance { text-wrap: balance; }
.grad { background: linear-gradient(96deg, #ff3d5a, #ff9a6b 62%, #ffcf8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 76px 0; position: relative; }
@media (min-width: 900px) { .section { padding: 108px 0; } }
.section + .section { border-top: 1px solid var(--line); }
.head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.head .label { margin-bottom: 18px; }
.head .lede { margin: 18px auto 0; }
@media (min-width: 900px) { .head { margin-bottom: 60px; } }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text); font: 600 15px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: transform 0.22s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.22s; touch-action: manipulation; }
.btn:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--line-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 10px 30px rgba(255, 61, 90, 0.28); }
.btn.primary:hover { background: var(--accent-hi); box-shadow: 0 14px 38px rgba(255, 61, 90, 0.36); }
.btn.big { height: 56px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.btn.sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

/* ------------------------------------------------------------------ nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(8, 8, 10, 0.78); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 10px; height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 700 19px/1 var(--tight); letter-spacing: -0.04em; }
.logo-mark { display: inline-grid; place-items: center; height: 28px; padding: 0 7px; border-radius: 8px; background: var(--accent); color: #fff; font: 800 13px/1 var(--sans); letter-spacing: -0.03em; }
.nav-links { display: none; gap: 2px; margin-left: 22px; }
.nav-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 9px; color: var(--text-2); font-weight: 500; font-size: 14.5px; transition: color 0.15s, background 0.15s; }
.nav-links a:hover, .nav-links a.on { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-cta .signin { display: none; }
.nav-burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; cursor: pointer; }
.nav-burger svg { width: 19px; height: 19px; }
@media (min-width: 860px) { .nav-links { display: flex; } .nav-cta .signin { display: inline-flex; } .nav-burger { display: none; } }
.menu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 59; background: rgba(8, 8, 10, 0.97); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; display: none; }
.menu.open { display: block; }
.menu a { display: block; padding: 13px 4px; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line); }
.menu a:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding: calc(var(--nav-h) + 54px) 0 0; text-align: center; overflow: hidden; }
@media (min-width: 900px) { .hero { padding-top: calc(var(--nav-h) + 76px); } }
.hero-glow { position: absolute; left: 50%; top: -300px; width: 1500px; height: 920px; margin-left: -750px; pointer-events: none; z-index: 0;
  background: radial-gradient(42% 46% at 50% 50%, rgba(255, 61, 90, 0.22), transparent 70%), radial-gradient(28% 32% at 66% 44%, rgba(255, 154, 107, 0.1), transparent 70%); }
.hero .wrap { position: relative; z-index: 2; }
.hero .label { margin-bottom: 22px; }
.hero h1 { max-width: 15ch; margin: 0 auto; }
.hero .lede { margin: 22px auto 0; max-width: 600px; }

/* the paste-your-link bar */
.try { display: flex; gap: 8px; max-width: 540px; margin: 32px auto 0; padding: 7px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.try input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 15.5px; outline: none; }
.try input::placeholder { color: var(--faint); }
.try .btn { flex: none; }
@media (max-width: 559px) {
  /* a real field on a phone, and 16px so iOS does not zoom into it */
  .try { flex-direction: column; gap: 8px; padding: 8px; }
  .try input { flex: none; height: 54px; padding: 0 16px; font-size: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 12px; }
  .try input:focus { border-color: var(--line-3); }
  .try .btn { width: 100%; height: 54px; } }
.hero-note { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--dim); font-size: 13.5px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 14px; height: 14px; color: var(--ok); }

/* ------------------------------------------------------------------ the ads */
.reel { position: relative; margin-top: 52px; }
@media (min-width: 900px) { .reel { margin-top: 66px; } }
.ticker { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); height: 46px; display: flex; align-items: center; margin-bottom: 46px; }
.ticker-track { display: flex; width: max-content; animation: ticker 54s linear infinite; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ticker-track span { display: inline-flex; align-items: center; gap: 12px; padding: 0 20px; }
.ticker-track span::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.ticker-track b { color: var(--text-2); font-weight: 500; }
@keyframes ticker { to { transform: translateX(-50%); } }
.spots { display: flex; gap: 16px; justify-content: flex-start; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.spots::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .spots { gap: 24px; overflow: visible; justify-content: center; } }
.spot { position: relative; flex: none; width: min(64vw, 300px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line-2); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); cursor: pointer; padding: 0; text-align: left; scroll-snap-align: center; transition: transform 0.45s var(--ease), border-color 0.25s; }
@media (min-width: 900px) { .spot { width: 288px; } .spot.mid { transform: scale(1.08); z-index: 2; } .spot:hover { transform: translateY(-6px) scale(1.04); border-color: var(--line-3); } .spot.mid:hover { transform: translateY(-6px) scale(1.11); } }
.spot video, .spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot .veil { position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)); }
.spot .who { position: absolute; left: 14px; bottom: 13px; z-index: 3; display: flex; align-items: center; gap: 9px; font: 600 13px/1 var(--sans); }
.spot .who i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.spot .who em { font-style: normal; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.spot .sound { position: absolute; right: 12px; top: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s; }
.spot .sound svg { width: 15px; height: 15px; }
.spot:hover .sound { opacity: 1; }
.reel-note { margin-top: 26px; text-align: center; color: var(--dim); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .spot { transition: none; } }

/* ------------------------------------------------------------------ stat strip */
.strip { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (min-width: 760px) { .strip { grid-template-columns: repeat(3, 1fr); } }
.strip div { background: var(--bg); padding: 26px 24px; }
.strip b { display: block; font: 600 clamp(30px, 3.6vw, 42px)/1 var(--tight); letter-spacing: -0.04em; }
.strip b em { font-style: normal; color: var(--accent-hi); }
.strip p { margin-top: 9px; color: var(--dim); font-size: 14px; line-height: 1.45; }
.strip a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.strip a:hover { color: var(--text); }

/* ------------------------------------------------------------------ steps */
.steps { display: grid; gap: 14px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.step { position: relative; display: flex; flex-direction: column; min-height: 436px; padding: 24px 24px 26px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); overflow: hidden; }
.step .n { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; color: var(--accent-hi); }
.step h3 { margin-top: 14px; }
.step p { margin-top: 9px; color: var(--text-2); font-size: 15px; max-width: 32ch; }
.step .art { position: relative; flex: 1; margin-top: 22px; min-height: 246px; }

/* step 1: the brief filling itself in */
.brief { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; }
.brief .row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); font-size: 13.5px; overflow: hidden; }
.brief .row span { color: var(--faint); flex: none; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.brief .row b { font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief .shots { display: flex; gap: 8px; margin-top: 3px; }
.brief .shots img { width: 52px; border-radius: 9px; border: 1px solid var(--line-2); }

/* step 2: the team working */
.team { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; }
.team li { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.035); border: 1px solid transparent; font-size: 13.5px; color: var(--dim); transition: background 0.4s, border-color 0.4s, color 0.4s, transform 0.4s var(--ease); }
.team li i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex: none; transition: background 0.3s, box-shadow 0.3s; }
.team li b { font-weight: 500; color: var(--text-2); }
.team li span { margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: 0.04em; opacity: 0; transition: opacity 0.3s; color: var(--accent-hi); white-space: nowrap; }
.team li.on { background: rgba(255, 61, 90, 0.1); border-color: rgba(255, 61, 90, 0.34); transform: translateX(3px); }
.team li.on b { color: var(--text); }
.team li.on i { background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 61, 90, 0.16); }
.team li.on span { opacity: 1; }
.team li.done i { background: var(--ok); }

/* step 3: the finished ads */
.out { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.out .mini { position: relative; width: 92px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.out .mini:nth-child(1) { transform: rotate(-5deg) translateY(10px); }
.out .mini:nth-child(3) { transform: rotate(5deg) translateY(10px); }
.out .mini video, .out .mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.out .pass { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(10, 10, 12, 0.92); border: 1px solid rgba(52, 211, 153, 0.4); color: var(--ok); font: 600 11.5px/1 var(--sans); white-space: nowrap; }
.out .pass i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ------------------------------------------------------------------ the check */
.check { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .check { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; } }
.check .lede { margin-top: 18px; }
.marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mark { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: 500 13.5px/1 var(--sans); color: var(--text-2); }
.mark svg { width: 14px; height: 14px; color: var(--ok); }
.browser { position: relative; border-radius: 16px; overflow: hidden; background: #0a0a0c; border: 1px solid var(--line-2); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); }
.browser .bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #101013; border-bottom: 1px solid var(--line); }
.browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: #26262d; }
.browser .bar span { margin-left: 10px; color: var(--faint); font: 11.5px var(--mono); }
.browser img { width: 100%; height: auto; }
.browser .float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: rgba(14, 14, 17, 0.94); border: 1px solid var(--line-2); font: 600 12.5px/1 var(--sans); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.browser .float svg { width: 14px; height: 14px; color: var(--ok); }
.browser .float.a { left: 5%; top: 26%; }
.browser .float.b { right: 5%; top: 50%; }
@media (max-width: 959px) { .browser .float { display: none; } }

/* ------------------------------------------------------------------ pricing */
.toggle { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.toggle button { height: 36px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; color: var(--dim); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.toggle button.on { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.toggle .save { margin-left: 6px; color: var(--ok); font-size: 11.5px; font-weight: 700; }
.plans { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.plan.hot { border-color: rgba(255, 61, 90, 0.45); background: linear-gradient(180deg, rgba(255, 61, 90, 0.1), var(--card) 46%); box-shadow: 0 30px 80px rgba(255, 61, 90, 0.1); }
.plan .badge { position: absolute; top: -11px; left: 24px; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.plan h3 { font-size: 21px; }
.plan .who { margin-top: 5px; color: var(--dim); font-size: 14px; min-height: 40px; }
.plan .price { display: flex; align-items: baseline; gap: 5px; margin-top: 18px; }
.plan .amt { font: 600 48px/1 var(--tight); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.plan .per { color: var(--dim); font-size: 14px; }
.plan .sub { margin-top: 7px; color: var(--faint); font-size: 12.5px; min-height: 18px; }
.plan .n { margin-top: 18px; padding: 13px 15px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan .n b { font: 600 21px/1 var(--tight); letter-spacing: -0.03em; }
.plan .n span { color: var(--dim); font-size: 12.5px; }
.plan .n2 { margin-top: 8px; }
.plan .n2 b { font-size: 17px; color: var(--text-2); }
.plan ul { margin-top: 18px; display: grid; gap: 9px; font-size: 14px; color: var(--text-2); flex: 1; }
.plan li { display: flex; gap: 9px; align-items: flex-start; }
.plan li svg { width: 15px; height: 15px; color: var(--ok); flex: none; margin-top: 2px; }
.plan .btn { margin-top: 22px; }
.plans-note { margin-top: 22px; text-align: center; color: var(--dim); font-size: 14px; }
.plans-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.agency { margin-top: 16px; display: grid; gap: 14px; align-items: center; padding: 20px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
@media (min-width: 760px) { .agency { grid-template-columns: 1fr auto; } }
.agency h3 { font-size: 20px; }
.agency p { margin-top: 5px; color: var(--dim); font-size: 14px; }
.includes { margin-top: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.includes span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: 500 13.5px/1 var(--sans); color: var(--text-2); }
.includes span svg { width: 14px; height: 14px; color: var(--ok); }
.pricing-hero { padding: calc(var(--nav-h) + 54px) 0 8px; text-align: center; position: relative; overflow: hidden; }
@media (min-width: 900px) { .pricing-hero { padding-top: calc(var(--nav-h) + 76px); } }
.pricing-hero .wrap { position: relative; z-index: 1; }
.pricing-hero .lede { margin: 20px auto 28px; }
.terms { display: grid; gap: 12px; }
@media (min-width: 760px) { .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.terms .t { padding: 20px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.terms .t b { display: block; font: 600 17px/1 var(--tight); letter-spacing: -0.02em; margin-bottom: 8px; }
.terms .t p { color: var(--dim); font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------------------ faq */
.faq { max-width: 740px; margin: 0 auto; display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; font-weight: 600; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 17px; height: 17px; color: var(--dim); flex: none; transition: transform 0.3s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--accent); }
.faq .a { padding: 0 19px 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 66ch; }

/* ------------------------------------------------------------------ final + footer */
.final { position: relative; overflow: hidden; text-align: center; padding: 92px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .final { padding: 124px 0; } }
.final::before { content: ''; position: absolute; left: 50%; bottom: -340px; width: 1100px; height: 640px; margin-left: -550px; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 61, 90, 0.3), transparent 70%); pointer-events: none; }
.final .wrap { position: relative; }
.final h2 { max-width: 15ch; margin: 0 auto; }
.final .lede { margin: 18px auto 0; }
.footer { border-top: 1px solid var(--line); padding: 32px 0 40px; color: var(--dim); font-size: 14px; }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 26px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer nav a:hover { color: var(--text); }
.footer .copy { width: 100%; color: var(--faint); font-size: 13px; }
@media (min-width: 760px) { .footer .copy { width: auto; } }

/* ------------------------------------------------------------------ overlays */
.lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 4, 6, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lightbox.open { display: flex; }
.lightbox-in { position: relative; height: min(88vh, 880px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 24px; overflow: hidden; background: #000; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8); animation: pop 0.34s var(--ease); }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } }
.lightbox video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(10, 10, 12, 0.8); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox-close svg { width: 17px; height: 17px; }
.lightbox-title { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 8px 12px; border-radius: 10px; background: rgba(10, 10, 12, 0.8); font: 600 12.5px/1 var(--sans); backdrop-filter: blur(8px); }
.dialog { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 4, 6, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dialog.open { display: flex; }
.dialog-in { width: 100%; max-width: 460px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 20px; padding: 26px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); animation: pop 0.34s var(--ease); }
.dialog h3 { font-size: 24px; }
.dialog p { margin-top: 11px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.dialog .plan-line { margin-top: 16px; padding: 12px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; }
.dialog .plan-line b { font-weight: 600; }
.dialog .actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

/* ------------------------------------------------------------------ motion */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 0.75s var(--ease), transform 0.95s var(--ease); transition-delay: calc(var(--i, 0) * 0.07s); }
.ready .rise { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.75s var(--ease), transform 0.95s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .reveal, .rise { opacity: 1; transform: none; transition: none; } .btn, .spot { transition: none; } }
.no-js .reveal, .no-js .rise { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ accounts
   Sign in, create an account, set a password, and the account page itself.
   One card, centred, on the same near black as the rest of the site. */
.auth { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: calc(var(--nav-h) + 40px) var(--gutter) 60px; }
.auth-in { position: relative; z-index: 1; width: 100%; max-width: 430px; }
.auth-card { padding: 30px 26px 28px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-2), var(--card)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
@media (min-width: 560px) { .auth-card { padding: 36px 34px 32px; } }
.auth-card h1 { font-size: clamp(26px, 3.4vw, 31px); letter-spacing: -0.035em; }
.auth-card .sub { margin-top: 9px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.auth-google { width: 100%; margin-top: 24px; background: #fff; border-color: transparent; color: #17171b; }
.auth-google:hover { background: #ececf0; }
.auth-google svg { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 4px; color: var(--faint); font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.field { display: block; margin-top: 16px; }
.field > span:first-child { display: block; margin-bottom: 7px; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.field input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); color: var(--text); font-size: 15.5px; outline: none; transition: border-color 0.18s, box-shadow 0.18s; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input::placeholder { color: var(--faint); }
.field .hint { display: block; margin-top: 7px; font-size: 12.5px; color: var(--dim); text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.pass-wrap { display: block; position: relative; }
.pass-wrap input { padding-right: 68px; }
.pass-show { position: absolute; right: 6px; top: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 600 13px/1 var(--sans); cursor: pointer; }
.pass-show:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.auth-go { width: 100%; margin-top: 22px; }
.auth-go[disabled] { opacity: 0.6; cursor: default; transform: none; }
.auth-note { margin-top: 18px; text-align: center; font-size: 14px; color: var(--text-2); }
.auth-note button, .auth-note a { border: 0; background: none; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.auth-note button:hover, .auth-note a:hover { text-decoration-color: var(--accent); }
.auth-small { margin-top: 12px; text-align: center; font-size: 13px; color: var(--dim); }
.auth-msg { display: flex; gap: 9px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.auth-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.auth-msg.bad { background: rgba(255, 61, 90, 0.11); border: 1px solid rgba(255, 61, 90, 0.3); color: #ffb3c0; }
.auth-msg.good { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.28); color: #86efc4; }
.auth-legal { margin-top: 22px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
.auth-legal a { text-decoration: underline; text-underline-offset: 2px; }
.spin { width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

/* the account page */
.acct { max-width: 620px; margin: 0 auto; }
.acct-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line); }
.acct-row:last-child { border-bottom: 0; }
.acct-row .k { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.acct-row .v { font-size: 15.5px; text-align: right; word-break: break-word; }
.acct-plan { display: flex; align-items: center; gap: 9px; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 11px; border-radius: 999px; font: 600 12.5px/1 var(--sans); }
.pill.on { background: rgba(52, 211, 153, 0.13); border: 1px solid rgba(52, 211, 153, 0.3); color: var(--ok); }
.pill.off { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); color: var(--text-2); }
.pill.warn { background: rgba(255, 61, 90, 0.12); border: 1px solid rgba(255, 61, 90, 0.3); color: var(--accent-hi); }

/* ------------------------------------------------------------------ prose
   Terms and the privacy notice: one readable column, nothing decorative. */
.prose-wrap { padding: calc(var(--nav-h) + 56px) 0 80px; }
.prose { max-width: 680px; margin: 0 auto; }
.prose h1 { font-size: clamp(34px, 5vw, 50px); letter-spacing: -0.04em; }
.prose .when { margin-top: 14px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.prose h2 { margin-top: 42px; font-size: 21px; letter-spacing: -0.025em; }
.prose p, .prose li { margin-top: 13px; color: var(--text-2); font-size: 16px; line-height: 1.68; }
.prose ul { margin-top: 6px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.prose a:hover { text-decoration-color: var(--accent); }
.prose .who-we-are { margin-top: 40px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.prose .who-we-are p { margin-top: 4px; font-size: 15px; }
.prose .who-we-are p:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ the cube
   A real 3x3x3 in CSS 3D (assets/cube.js).

   The grid has to read at every angle, always nine equal squares a face. What
   broke it before was four different finishes: the dark ones sank into the
   dark grooves and the nine stopped being countable. A real black cube has ONE
   material on every sticker. All the variety comes from the light, and from a
   whisper of texture on a few tiles that never changes their tone.

   So: the body is pure black, every sticker is the same charcoal with the same
   bright bevel along its top left edge, and the groove between them is the
   black showing through. That bevel is what draws the grid. */
/* There is ONE cube on the page. It is taken out of the flow and placed by
   script over whichever empty slot it belongs in, so the object the reader
   watches scramble in the hero is the same object that comes apart below. */
.cube { --size: 270px; --half: calc(var(--size) / 9.4);   /* step is measured in cube.js: w / 4.6 */
  --spread: 1.15;
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: var(--size); height: var(--size); will-change: transform;
  opacity: 0; transition: opacity 1s var(--ease); }
.cube.ready { opacity: 1; }
/* An empty box: it reserves the room and says where the cube should be. */
.cube-slot { width: 100%; aspect-ratio: 1; }
.hero-art .cube-slot { width: min(86vw, 300px); margin: 0 auto; }
@media (min-width: 620px) { .hero-art .cube-slot { width: 340px; } }
@media (min-width: 1000px) { .hero-art .cube-slot { width: 440px; } }

/* the light in the room, and the floor it hangs over */
.cube::before { content: ''; position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; transform: translate(-50%, -50%);
  background: radial-gradient(42% 38% at 31% 20%, rgba(255, 255, 255, 0.08), transparent 64%); pointer-events: none; }
.cube::after { content: ''; position: absolute; left: 50%; bottom: -4%; width: 74%; height: 44px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.82), transparent 70%); filter: blur(11px); pointer-events: none;
  animation: cube-shadow 11s ease-in-out infinite; }
@keyframes cube-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; } 50% { transform: translateX(-50%) scale(0.92); opacity: 0.66; } }
/* the breathing shadow is a blurred layer repainting every frame: not on a phone */
@media (max-width: 979px), (prefers-reduced-motion: reduce) { .cube::after { animation: none; } }

/* FLAT on purpose. The browser's own 3D sort is what cannot draw a layer
   turn: it orders whole planes by one depth each, and during a turn a
   rotated plane is both in front of AND behind a stationary one. So the
   stage does not sort at all. It is only a perspective box; each piece
   carries the whole view in its own matrix and cube.js sets the painting
   order from the depth it works out. Pieces never interpenetrate each
   other, so ordering whole pieces back to front is exactly right, and a
   layer turn draws correctly. */
.cube-stage { position: absolute; inset: 0; perspective: 2600px; perspective-origin: 50% 44%; }
.cubie { position: absolute; left: 50%; top: 50%; width: calc(var(--half) * 2); height: calc(var(--half) * 2);
  margin: calc(var(--half) * -1) 0 0 calc(var(--half) * -1); transform-style: preserve-3d; }

/* the black plastic body: the grooves are this showing between the stickers */
.face { position: absolute; inset: 0; border-radius: 7%; background: #000; backface-visibility: hidden; }
/* Inside the cube. Never pure black: a face turning toward the reader has to
   still look like the inside of a solid thing, not a hole in the page. */
/* Inside the cube.
   This is what a turning layer opens up, and it has to be clearly LIGHTER than
   the page behind it. Black on black is why a perfectly good layer turn read
   as a bite taken out of the cube: the gap and the background were the same
   colour, so the eye saw missing pieces rather than an inside. It is also not
   dimmed by --light, because --light describes where a face sits on the
   OUTSIDE of the cube and means nothing for a face in a gap. */
.face.in { background: linear-gradient(140deg, #26262f, #101016 74%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
/* The core is one solid block filling the middle, so a turning layer never
   opens a view through the cube. It sits between the layers, so it is a little
   wider than a piece. */
.cubie.core { width: calc(var(--half) * 3); height: calc(var(--half) * 3);
  margin: calc(var(--half) * -1.5) 0 0 calc(var(--half) * -1.5); }
.cubie.core .face { border-radius: 4%;
  background: linear-gradient(140deg, #1d1d24, #0c0c10 74%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }

/* One sticker on every outward face: a ninth of the ad that face makes when
   the cube is solved (cube.js sets --tile, --tx, --ty), under the same gloss
   and bevel as a plastic tile, and tinted by --light like everything else. */
.face.out::before { content: ''; position: absolute; inset: 7%; border-radius: 12%;
  background-color: #141419;
  background-image:
    radial-gradient(56% 46% at 27% 19%, rgba(255, 255, 255, 0.13), transparent 68%),
    var(--tile, linear-gradient(140deg, #2b2b34 0%, #141419 38%, #08080c 100%));
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--tx, 50%) var(--ty, 50%);
  background-repeat: no-repeat;
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.23),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, 0.9),
    inset 0 0 0 999px var(--light, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.85); }

/* Texture, on a few. It never changes a tile's tone, only its surface, so the
   nine squares stay nine squares. */
.face.out.mesh::after { content: ''; position: absolute; inset: 7%; border-radius: 12%; opacity: 0.26;
  background-image: radial-gradient(rgba(0,0,0,0.85) 1.05px, transparent 1.25px); background-size: 5px 5px; }
.face.out.stone::after { content: ''; position: absolute; inset: 7%; border-radius: 12%; opacity: 0.2;
  background-image: radial-gradient(rgba(255,255,255,0.5) 0.65px, transparent 0.75px), radial-gradient(rgba(0,0,0,0.5) 0.6px, transparent 0.7px);
  background-size: 6px 6px, 9px 9px; background-position: 0 0, 3px 5px; }

/* The light is fixed in the room. Up catches it, down never does. Front and
   back are lit alike, and so are the two sides, because the cube rests on its
   back side in the hero and turns to its front further down: both are seen
   head on, and neither may look like the shadow side.
   NOT a filter: a filter flattens the element it is on, which takes the face
   out of the browser's 3D depth sort, and with 156 faces that breaks the cube
   apart visually the instant a layer turns. A translucent fill does the same
   job and keeps every face in the sort. */
.face.u { --light: rgba(255, 255, 255, 0.17); }
.face.f { --light: rgba(255, 255, 255, 0.01); }
.face.r { --light: rgba(0, 0, 0, 0.2); }
.face.l { --light: rgba(0, 0, 0, 0.2); }
.face.b { --light: rgba(255, 255, 255, 0.01); }
.face.d { --light: rgba(0, 0, 0, 0.5); }

/* Solved, it can be taken and turned over (cube.js sets is-free while that is
   allowed). pan-y keeps a phone's scroll: an up and down swipe still scrolls
   the page, a sideways one turns the cube. */
.cube.is-free { pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cube.is-held { cursor: grabbing; }
/* The cube paints under the hero's words and the chapters (they stack above
   it so they stay readable over it on a phone), so the boxes that cover it
   are see-through to the pointer, and the part with something to press, the
   form, takes it back. The chapters have nothing to press. */
.hero .wrap { pointer-events: none; }
.hero-copy { pointer-events: auto; }
.story-text { pointer-events: none; }

/* When it lands, every bevel takes the light for a moment. */
.cube .face.out::before { transition: box-shadow 0.7s var(--ease); }
.cube.is-solved .face.out::before { box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.36),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, 0.9),
    inset 0 0 0 999px var(--light, transparent),
    0 0 0 1px rgba(0, 0, 0, 0.85); }

/* ------------------------------------------------------------------ hero split */
.hero-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero-split { grid-template-columns: 1.02fr 0.98fr; gap: 56px; text-align: left; } }
.hero-copy { text-align: center; }
@media (min-width: 980px) { .hero-copy { text-align: left; }
  .hero-split .lede, .hero-split .try { margin-left: 0; margin-right: 0; }
  .hero-split .hero-note { justify-content: flex-start; }
  .hero-split h1 { margin-left: 0; } }
.hero-art { order: -1; }
@media (min-width: 980px) { .hero-art { order: 0; } }

/* ------------------------------------------------------------------ the story
   The cube stays on screen while four chapters scroll past it, and the scroll
   itself drives what the cube does (assets/cube.js). It is the same argument
   twice: once in English, once as an object coming apart and going back
   together solved. */
.story { position: relative; }
.story-in { display: grid; }
.story-stage { position: sticky; display: grid; place-items: center; z-index: 0; }
.story-text { position: relative; z-index: 2; }

/* A chapter owns one screenful of scroll. Only the one being spoken is lit. */
.chapter { display: grid; align-content: center; padding: 0 0 6vh;
  opacity: 0.16; transform: translateY(14px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.chapter.on { opacity: 1; transform: none; }
.chapter .label { margin-bottom: 20px; }
.chapter h2 { max-width: 13ch; }
.chapter p { margin-top: 18px; max-width: 46ch; color: var(--text-2); font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.62; }
.chapter-kicker { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--text) !important; font-weight: 600; max-width: 34ch !important; }

/* phone and tablet: there is no room for a column each, so the cube becomes the
   backdrop. It is pinned behind the words and held back, and the chapters pass
   over it. Same story, one column. */
@media (max-width: 979px) {
  .story-in { grid-template-columns: 1fr; }
  /* The words take the top of the screen and the cube the bottom, so they
     never sit on top of each other on a narrow one. */
  /* svh, not dvh: on an iPhone the dynamic height changes as the toolbar
     collapses, and everything sized by it jumped on every scroll. */
  .story-stage { grid-area: 1 / 1; top: 0; height: 100svh; align-items: end; padding-bottom: 12svh; opacity: 0.85; }
  .story-text { grid-area: 1 / 1; }
  .story-stage .cube-slot { width: min(56vw, 29svh); position: relative; }
  .cube { --spread: 1.1; }
  /* the phone's story is pictures (cube.js crossfades them); the live cube
     fades out on the way down and its opacity is scripted, not transitioned */
  .cube.ready { transition: none; }
  .chapter { min-height: 92svh; align-content: start; padding-top: 13svh; }
}
.hero-cube, .chapter-pic { display: none; }
/* The phone's story is the words alone: nothing pinned, nothing moving. The
   one cube on a phone is the hero's film. */
@media (max-width: 979px) {
  .story-stage { display: none; }
  .story .chapter, .story .chapter:last-child { min-height: 0; padding: 48px 0 8px; opacity: 1; transform: none; }
  /* each chapter ends with the cube at that step of the story: a short, calm film */
  .chapter-pic { display: block; width: min(100%, 440px); height: auto; aspect-ratio: 1; margin: 18px auto 0; max-width: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent); mask-image: radial-gradient(closest-side, #000 80%, transparent); }
  /* the live cube sits in the hero's own box on a phone (only when capturing the film) */
  .cube.in-slot { position: relative; left: auto; top: auto; transform: none !important; width: 100%; height: 100%; }
  /* the hero's cube on a phone is a film of it, framed a little wider than
     the slot (room for the shadow) and faded at its edges into the page */
  .hero-art .cube-slot { position: relative; }
  .hero-cube { display: block; position: absolute; left: -12%; top: -12%; width: 124%; max-width: none; height: 124%; object-fit: cover;
    -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent); mask-image: radial-gradient(closest-side, #000 78%, transparent); }
}
/* desktop: cube on the right, held still, chapters passing on the left */
@media (min-width: 980px) {
  .story-in { grid-template-columns: 1.02fr 0.98fr; gap: 0 56px; align-items: start; }
  .story-stage { order: 2; top: 0; height: 100dvh; }
  .story-stage .cube-slot { width: min(34vw, 66dvh); }
  .cube { --spread: 1.15; }
  .story-text { order: 1; }
  .chapter { min-height: 88dvh; }
}

/* Open, the pieces are apart, so the black between them needs to feel like
   depth rather than a hole. */
.cube.is-open .face.out::before { box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.3),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.85), 0 6px 20px rgba(0, 0, 0, 0.6); }

/* ------------------------------------------------- the pieces are the ads
   On the story cube the front layer is nine real ad frames. They fade up as
   the cube comes apart, and while it is being checked each one shows the
   piece of blueprint it is measured against. Two custom properties carry the
   whole thing, so a scroll frame writes two values and CSS does the rest. */
.cube { --shots: 0; --dna: 0; }
/* Once the ads are up they are the story, so the plain pieces step back, and
   the versions behind the finished ones sit further back the older they are. */
.cubie:not(.dressed) { opacity: calc(1 - var(--shots) * 0.34); }
.cubie.v2 { opacity: calc(1 - var(--shots) * 0.16); }
.cubie.v1 { opacity: calc(1 - var(--shots) * 0.34); }
.face .tile-shot { position: absolute; inset: 7%; border-radius: 12%; background-size: cover; background-position: 50% 42%;
  opacity: calc(var(--shots) * 0.92); }
/* v1, v2, v3: the same ad getting better, front to back */
.face .cube-ver { position: absolute; left: 11%; top: 10%; padding: 0.22em 0.5em; border-radius: 999px;
  font: 600 clamp(6px, 0.58vw, 8.5px)/1 var(--mono); letter-spacing: 0.08em; color: #fff;
  background: rgba(8, 8, 10, 0.72); opacity: var(--shots); }
.cubie.v3 .cube-ver { background: var(--accent); }
.face .cube-node { position: absolute; left: 12%; right: 12%; bottom: 13%; text-align: center;
  font: 500 clamp(6px, 0.62vw, 9px)/1 var(--mono); letter-spacing: 0.14em; color: #fff;
  opacity: var(--dna); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); }
/* while it is being read, each ad is ringed the way a checked node is ringed */
.face.out.has-shot::after { content: ''; position: absolute; inset: 7%; border-radius: 12%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 61, 90, calc(var(--dna) * 0.85)),
              inset 0 0 22px rgba(255, 61, 90, calc(var(--dna) * 0.35));
  background: linear-gradient(to top, rgba(8, 8, 10, calc(var(--dna) * 0.78)), transparent 52%); }

/* ---------- the film: the centrepiece of the hero ---------- */
.film-wrap { position: relative; z-index: 2; margin-top: 40px; max-width: 1180px; }
@media (min-width: 900px) { .film-wrap { margin-top: 48px; } }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6); }
@media (max-width: 759px) { .film { border-radius: 14px; } }
.film-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: -12%; height: 60%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 61, 90, 0.16), transparent); }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-sound { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(8, 8, 10, 0.6); color: var(--text); font: 600 13.5px/1 var(--sans); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.2s, border-color 0.2s; }
.film-sound:hover { background: rgba(8, 8, 10, 0.8); border-color: rgba(255, 255, 255, 0.36); }
.film-sound svg { width: 16px; height: 16px; flex: none; }
.film-sound[aria-pressed="true"] { border-color: rgba(255, 61, 90, 0.6); }

/* ---------- three outcomes ---------- */
.outcomes div { padding: 30px 28px 32px; }
.outcomes b { font-size: clamp(26px, 2.5vw, 34px); text-wrap: balance; }
.outcomes p { font-size: 15px; max-width: 30ch; }
#work .spots { margin-top: 8px; }
.film-wrap { margin-bottom: 36px; }
@media (max-width: 759px) { .film-wrap { margin-bottom: 28px; } }

/* The film is the point of the hero, so the words above it stay compact. */
@media (min-width: 900px) {
  .hero:has(.film-wrap) { padding-top: calc(var(--nav-h) + 52px); }
  .hero:has(.film-wrap) .h1 { font-size: clamp(42px, 5.6vw, 76px); max-width: none; }
  .hero:has(.film-wrap) .lede { margin-top: 16px; }
  .hero:has(.film-wrap) .try { margin-top: 24px; }
}

/* ---------- a marquee: anything that scrolls sideways for ever ---------- */
.mq { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; width: max-content; align-items: center; animation: mq 46s linear infinite; }
.mq-track.reverse { animation-direction: reverse; }
.mq:hover .mq-track, .mq-off .mq-track { animation-play-state: paused; }
/* A blurred header repaints everything under it on every scroll step; a
   phone gets a solid one. */
@media (max-width: 979px) { .nav.solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 8, 10, 0.96); } }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* ---------- the apps we make ads for ---------- */
.customers { position: relative; z-index: 2; margin-top: 46px; }
@media (min-width: 900px) { .customers { margin-top: 62px; } }
.customers-label { text-align: center; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; }
.customers-track { gap: 64px; padding: 6px 32px; }
@media (min-width: 900px) { .customers-track { gap: 96px; animation-duration: 38s; } }
.cust { display: inline-flex; align-items: center; gap: 12px; color: var(--text); opacity: 0.78; transition: opacity 0.2s; white-space: nowrap; }
.cust:hover { opacity: 1; }
.cust-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.cust-mark.pearl { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #fbe4ee 18%, #d9c6f2 45%, #b9d6f5 75%, #c9f0dc 100%); box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cust-name { font: 700 22px/1 var(--tight); letter-spacing: -0.03em; }
.cust-word { height: 34px; width: auto; }

/* ---------- how it works, on the real screens ---------- */
.flow { display: grid; gap: 22px; }
.flow-step { display: grid; gap: 18px; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); overflow: hidden; }
@media (min-width: 900px) { .flow { gap: 26px; } .flow-step { grid-template-columns: 0.42fr 0.58fr; align-items: center; gap: 36px; padding: 34px 36px; } }
.flow-copy .n { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; color: var(--accent-hi); }
.flow-copy h3 { margin-top: 14px; }
.flow-copy p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; max-width: 40ch; }
.flow-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #0d0d12; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.flow-shot img { display: block; width: 100%; height: auto; }
.flow-shot.short { padding: 10% 6%; }
.flow-shot.short img { border-radius: 10px; }

/* ---------- the walkthrough slot ---------- */
.watch { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #0d0d12; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); }
.watch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: blur(2px) saturate(0.8); opacity: 0.45; }
.watch-veil { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(8, 8, 10, 0.2), rgba(8, 8, 10, 0.85)); }
.watch-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.watch-play { width: 78px; height: 78px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 16px 50px rgba(255, 61, 90, 0.45); }
.watch-play svg { width: 34px; height: 34px; color: #fff; margin-left: 3px; }
.watch-title { margin-top: 20px; font: 600 clamp(18px, 2.4vw, 26px)/1.2 var(--tight); letter-spacing: -0.03em; }
.watch-sub { margin-top: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
@media (min-width: 900px) { .watch-play { width: 96px; height: 96px; } .watch-play svg { width: 42px; height: 42px; } }

/* ---------- reviews ---------- */
.reviews .head { margin-bottom: 30px; }
.rev-mq { padding: 12px 0; }
.rev-track { gap: 16px; padding: 0 8px; animation-duration: 70s; }
@media (min-width: 900px) { .rev-track { gap: 20px; animation-duration: 90s; } }
.rev { width: min(78vw, 400px); flex: none; padding: 24px 24px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.stars { display: flex; gap: 4px; color: #f5a524; }
.stars svg { width: 22px; height: 22px; }
.rev-who { margin-top: 12px; font-size: 13.5px; color: var(--dim); }
.rev-title { margin-top: 26px; font: 600 16px/1.3 var(--sans); color: var(--text); }
.rev-text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.cust-name.serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.01em; font-size: 24px; }
.cust-name.caps { text-transform: uppercase; font-weight: 800; letter-spacing: -0.02em; }
.cust-name.caps b { color: #f5a524; font-weight: 800; }
.rev-track { align-items: stretch; }

/* ---------- the steps move ---------- */
.flow-shot video { display: block; width: 100%; height: auto; }

/* ---------- a review with its ad beside it ---------- */
.rev.has-spot { display: grid; grid-template-columns: 1fr 112px; gap: 18px; width: min(88vw, 540px); }
.rev.has-spot .stars, .rev.has-spot .rev-who, .rev.has-spot .rev-title, .rev.has-spot .rev-text { grid-column: 1; }
.rev-spot { grid-column: 2; grid-row: 1 / span 4; align-self: center; position: relative; width: 112px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line-2); padding: 0; cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transition: transform 0.3s var(--ease), border-color 0.2s; }
.rev-spot:hover { transform: translateY(-3px); border-color: var(--line-3); }
.rev-spot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rev-spot .sound { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.rev-spot .sound svg { width: 13px; height: 13px; }

/* ---------- the wall ---------- */
.wall-sec .head { margin-bottom: 30px; }
.wall-sec .head .lede { max-width: 640px; }
.wall-mq { padding: 8px 0; }
.wall-track { gap: 12px; padding: 0 6px; animation-duration: 80s; }
.wall-track i { display: block; flex: none; width: 150px; aspect-ratio: 9 / 16; border-radius: 12px; background: #16161a center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
@media (min-width: 900px) { .wall-track i { width: 180px; } .wall-track { gap: 16px; animation-duration: 110s; } }
.rev.has-spot { display: flex; align-items: center; gap: 18px; }
.rev.has-spot .rev-body { flex: 1; min-width: 0; }
.rev-spot { flex: none; }
/* On a phone the words sit above the cube, so the last chapter, which has a
   kicker, gets a little less air above and inside it. */
@media (max-width: 979px) { .chapter { padding-top: 10svh; } .chapter-kicker { margin-top: 14px !important; padding-top: 12px; } }
/* The last chapter keeps the cube pinned a while longer, so reading its
   kicker never drags the cube up into the words. */
@media (max-width: 979px) { .chapter { padding-top: 9svh; } .chapter:last-child { min-height: 112svh; } }