/* Home page layout. Loaded after film.css; colours and faces come from the page's :root. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- hero: the headline on calm space, the ledger rising from the bottom edge ---------- */
.hero { position: relative; height: 100svh; min-height: 720px; padding-top: 68px; overflow: hidden; display: flex; flex-direction: column; }
.hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; padding-top: clamp(48px, 9vh, 96px); }
.hero-top h1 { font-size: clamp(48px, 6.6vw, 104px); line-height: .95; }
.hero-copy { animation: rise .8s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.hero-copy p { margin: 0 0 28px; color: var(--fg-2); font-size: clamp(17px, 1.3vw, 20px); max-width: 40ch; }
.hero-copy .row { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; }
.hero-stage { flex: 1; min-height: 0; margin-top: clamp(40px, 7vh, 72px); animation: hero-up 1s var(--ease) .12s both; }
@keyframes hero-up { from { opacity: 0; transform: translateY(40px); } }
.hero-win { zoom: 1.35; }
.hero-win .cs .win { border-radius: 14px 14px 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 -24px 80px -40px #000; }
.hero-win .cs .tbl-clip { height: 520px; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 96px; background: linear-gradient(0deg, var(--bg), transparent); pointer-events: none; }
@media (max-width: 1100px) { .hero-win { zoom: 1.1; } }

/* the film, small: a moving thumbnail beside the main button */
.film-chip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; border-radius: 10px; }
.film-chip .thumb { position: relative; width: 96px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0c0d10; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); transition: box-shadow .2s; }
.film-chip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-chip i, .film-play i { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--fg); transition: transform .25s var(--ease); }
.film-chip i { inset: 0; margin: auto; width: 28px; height: 28px; }
.film-chip i::after, .film-play i::after { content: ""; border-left: 9px solid var(--bg); border-block: 5.5px solid transparent; margin-left: 2px; }
.film-chip .lbl, .film-play .lbl { display: grid; gap: 4px; }
.film-chip b { font-weight: 550; font-size: 15.5px; }
.film-chip small, .film-play small { color: var(--fg-2); font-size: 14px; }
.film-chip:hover .thumb { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 44%, transparent); }
.film-chip:hover i, .film-play:hover i { transform: scale(1.08); }
.film-chip:active i, .film-play:active i { transform: scale(.96); }
.film-chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; }

/* ---------- the film, large ---------- */
.film { padding: clamp(40px, 7vh, 80px) 0 clamp(88px, 14vh, 160px); }
.film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0b0c0f; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent), 0 60px 120px -48px #000; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-frame .pre { opacity: .82; transition: opacity .3s; }
.film-frame:hover .pre { opacity: 1; }
.film-play { all: unset; cursor: pointer; position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 20px; padding: clamp(20px, 3vw, 40px); background: linear-gradient(0deg, rgba(7,8,10,.82) 0%, transparent 34%); }
.film-play i { position: relative; flex: none; width: clamp(56px, 6vw, 88px); height: clamp(56px, 6vw, 88px); }
.film-play i::after { border-left-width: clamp(16px, 1.7vw, 24px); border-block-width: clamp(10px, 1.05vw, 15px); margin-left: 5px; }
.film-play .lbl { padding-bottom: clamp(4px, .9vw, 16px); }
.film-play b { font: var(--display-w) clamp(22px, 2.6vw, 40px)/1.05 var(--display); letter-spacing: var(--display-ls); }
.film-play small { font-size: clamp(14px, 1.2vw, 17px); }
.film-play:focus-visible { outline: 2px solid var(--fg); outline-offset: -6px; border-radius: 20px; }

/* ---------- screens: a slight lean that settles as they reach the middle ---------- */
.shot { perspective: 1600px; min-width: 0; }
.shot > div { transform-origin: 50% 100%; transform: rotateX(calc(var(--tilt, 0) * 14deg)) translateY(calc(var(--tilt, 0) * 24px)); will-change: transform; }
.shot .cs .win, .shot .cs .card[data-slab], .shot .cs .passport { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 48px 96px -40px #000; }

/* ---------- why ---------- */
.beat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(56px, 10vh, 112px) 0; border-top: 1px solid var(--hair); }
.beat .kicker { color: var(--accent); }
.beat h2 { font-size: clamp(32px, 3.7vw, 58px); line-height: 1.03; margin: 20px 0 16px; }
.beat p { margin: 0; color: var(--fg-2); max-width: 40ch; }
.beat .shot > div { margin-left: auto; }

/* ---------- the product ---------- */
.how { padding: clamp(88px, 15vh, 168px) 0 clamp(40px, 8vh, 96px); border-top: 1px solid var(--hair); }
.how > .wrap > h2 { font-size: clamp(40px, 5.6vw, 92px); line-height: .97; max-width: 14ch; margin-bottom: clamp(40px, 8vh, 88px); }
.steps { --rail: clamp(36px, 6vw, 96px); position: relative; padding-left: var(--rail); }
.steps::before, .steps .fill { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.steps .fill { background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); }
.step { position: relative; padding: 0 0 clamp(72px, 13vh, 144px); }
.step .group { display: block; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; color: var(--accent); margin-bottom: 32px; }
.step .node { position: absolute; left: calc(-1 * var(--rail)); width: 11px; height: 11px; margin-top: 1px; border-radius: 3px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg-3); transition: background .3s, box-shadow .3s; }
.step.on .node { background: var(--accent); box-shadow: none; }
.step-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 5vh, 48px); }
.step-head h3 { font-size: clamp(28px, 3.1vw, 48px); line-height: 1.04; margin-top: 16px; max-width: 16ch; }
.step-head p { margin: 0; color: var(--fg-2); max-width: 44ch; }
.step-head .cap-apps { grid-column: 2; margin-top: 0; }
@media (min-width: 1280px) { .step .shot > div { zoom: 1.2; } }

/* ---------- the rest ---------- */
.road-card .shot { height: 400px; display: grid; align-items: center; }
.road-card .shot > div { transition: none; }
.plan .price { color: var(--fg-2); border-color: color-mix(in srgb, var(--fg) 24%, transparent); }

@media (max-width: 760px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-top { grid-template-columns: 1fr; gap: 16px; padding-top: 40px; }
  .hero-top h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero-copy p { margin: 0 0 24px; font-size: 17px; }
  .hero-stage { margin-top: 40px; height: 380px; flex: none; overflow: hidden; }
  .hero-win { zoom: 1; }
  .film-frame { border-radius: 14px; }
  .film-play { gap: 14px; }
  .beat, .step-head { grid-template-columns: 1fr; }
  .beat h2 { margin: 16px 0 12px; }
  .step-head .cap-apps { grid-column: 1; }
  .shot > div { transform: rotateX(calc(var(--tilt, 0) * 8deg)); }
  .road-card .shot { height: auto; min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .shot > div { transform: none; } .hero-copy, .hero-stage { animation: none; } .film-chip i, .film-play i { transition: none; } }
main { overflow-x: clip; }
.plan .price { font: var(--display-w) 26px/1 var(--display); letter-spacing: var(--display-ls); color: var(--fg); border: 0; padding: 0; }