/* Loop Studio landing: "scroll to edit".
   The page is an edit session. The visitor's scroll is the playhead: a raw take
   renders into the finished ad, a chat assembles a real timeline, the work runs
   past like a film strip, and the page ends on an export reaching 100%.
   Everyman AI palette (raisin, silver, one lime signal), Space Grotesk and
   JetBrains Mono. The two new shades (ink, slate) are mixed from the brand. */

@font-face { font-family: "Space Grotesk"; src: url("./fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
/* Until Space Grotesk arrives, Arial sized to its metrics (the same numbers
   next/font derives), so the swap never rewraps the headline on a slow phone. */
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 109.69%; ascent-override: 89.71%; descent-override: 26.62%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; src: url("./fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #090B11;
  --raisin: #0F121A;
  --raisin-2: #151A26;
  --raisin-3: #1E2434;
  --steel: #343E5B;
  --slate: #7F8899;
  --silver: #B5BFC2;
  --silver-2: #D2D8DA;
  --silver-3: #E9ECED;
  --lime: #CFFF05;
  --line: rgba(210, 216, 218, 0.09);
  --line-2: rgba(210, 216, 218, 0.17);
  --sans: "Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --quint: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--ink); color: var(--silver-2); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--raisin); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 10px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.grain { position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* scene marker, like a clip label on a timeline */
.marker { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px 0 5px; border-radius: 8px; background: rgba(233, 236, 237, 0.04); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }
.marker b { height: 18px; padding: 0 6px; display: grid; place-items: center; border-radius: 5px; background: var(--lime); color: var(--raisin); font-weight: 600; letter-spacing: 0.04em; }

.h1 { margin: 0; font-size: clamp(48px, 6.2vw, 100px); line-height: 0.92; letter-spacing: -0.055em; font-weight: 600; color: var(--silver-3); }
.h2 { margin: 0; font-size: clamp(38px, 5vw, 78px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 600; color: var(--silver-3); }
.lede { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--silver); max-width: 48ch; }
/* the Everyman marker: lime block behind raisin text, drawn left to right, line by line */
.mark { color: var(--raisin); padding: 0 0.1em; margin: 0 -0.04em; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 60% / calc(var(--m, 1) * 100%) 88%; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 0.08em; transition: background-size 1100ms var(--expo); }
.lime { color: var(--lime); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: transform 500ms var(--expo), box-shadow 500ms var(--expo), background-color 300ms; }
.btn svg { width: 16px; height: 16px; transition: transform 500ms var(--expo); }
.btn:hover svg { transform: translateX(3px); }
.btn-lime { background: var(--lime); color: var(--raisin); box-shadow: 0 0 0 1px rgba(207, 255, 5, 0.45), 0 14px 44px -10px rgba(207, 255, 5, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-lime:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(207, 255, 5, 0.6), 0 20px 60px -12px rgba(207, 255, 5, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-silver { background: var(--silver-3); color: var(--raisin); box-shadow: inset 0 1px 0 #fff; }
.btn-silver:hover { transform: translateY(-1px); background: #F3F5F5; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--silver-2); }
.link svg { width: 15px; height: 15px; transition: transform 500ms var(--expo); }
.link:hover { color: var(--silver-3); }
.link:hover svg { transform: translateY(2px); }

/* ── top bar ──────────────────────────────────────────────────────────── */
.top { position: fixed; z-index: 90; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 11, 17, 0.9), rgba(9, 11, 17, 0.55)); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 -1px 0 var(--line); opacity: 0; transition: opacity 500ms var(--quint); pointer-events: none; }
.top.is-scrolled::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--silver-3); }
.brand svg { width: 28px; height: 28px; }
.top-right { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(15, 18, 26, 0.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--line); }
.top-right a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--silver); transition: color 250ms, background-color 250ms; }
.top-right a:hover { color: var(--silver-3); background: rgba(233, 236, 237, 0.06); }

/* ── timeline HUD: the page as a sequence ─────────────────────────────── */
.hud { position: fixed; z-index: 90; left: 50%; bottom: 16px; transform: translate(-50%, 160%); width: min(100% - 32px, 1120px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; border-radius: 20px; background: rgba(12, 15, 22, 0.8); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px -30px rgba(0, 0, 0, 0.95); transition: transform 900ms var(--expo); }
.hud { visibility: hidden; transition: transform 900ms var(--expo), visibility 0s linear 900ms; }
.hud.is-shown { transform: translate(-50%, calc(-1 * var(--consent-lift, 0px))); visibility: visible; transition: transform 900ms var(--expo), visibility 0s; }
.tc { font-family: var(--mono); font-size: 13px; color: var(--silver-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; min-width: 108px; }
.tc small { display: block; font-size: 10px; letter-spacing: 0.14em; color: var(--slate); text-transform: uppercase; }
.seq { position: relative; display: flex; gap: 3px; height: 34px; }
.seq a { position: relative; flex: var(--w, 1); min-width: 0; display: flex; align-items: center; padding: 0 9px; border-radius: 6px; background: rgba(52, 62, 91, 0.45); box-shadow: inset 0 0 0 1px rgba(233, 236, 237, 0.06); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: background-color 400ms, color 400ms, box-shadow 400ms; }
.seq a:hover { color: var(--silver-3); }
.seq a.is-on { background: var(--raisin-3); color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.playhead { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px var(--lime); pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 8px; border-radius: 2px 2px 5px 5px; background: var(--lime); }

/* ── SC 01 · raw → edit (hero) ────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; padding: 110px 0 70px; display: flex; align-items: center; isolation: isolate; overflow: clip; }
.hero::before { content: ""; position: absolute; z-index: -1; right: -12%; top: 50%; width: 1100px; height: 1100px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(52, 62, 91, 0.7), rgba(30, 36, 52, 0.35) 55%, transparent); filter: blur(20px); }
.hero::after { content: ""; position: absolute; z-index: -1; right: 16%; top: 56%; width: 540px; height: 540px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(207, 255, 5, 0.14), transparent 70%); filter: blur(40px); opacity: var(--glow, 0.25); transition: opacity 1400ms var(--expo); }
.hero.is-edited { --glow: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.works { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(233, 236, 237, 0.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--silver); margin-bottom: 28px; }
.works .logos { display: inline-flex; }
.works .say-short { display: none; }
.works .logos > * { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 2px var(--ink); }
.works .logos > * + * { margin-left: -6px; }
.oa { display: grid; place-items: center; background: #F4F6F6; }
.oa svg { width: 62%; height: 62%; }
.hero:not([data-variant]) h1 { font-size: clamp(40px, 4.9vw, 78px); }
.hero h1 .ln { display: block; overflow: hidden; padding: 0.04em 0 0.16em; margin: -0.04em 0 -0.16em; }
.hero h1 .ln > span { display: inline-block; }
.hero .lede { margin-top: 28px; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 36px; }
.trial-terms { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--silver); }
.plans-sec > .wrap > .trial-terms { text-align: center; }
.trial-terms[hidden] { display: none; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 14px; color: var(--slate); }
.trust > span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 14px; height: 14px; color: var(--silver); }

.rig { position: relative; justify-self: center; display: grid; justify-items: center; }
.frame { position: relative; height: min(72svh, 690px); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #05070B; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 7px rgba(10, 13, 20, 0.9), 0 0 0 8px var(--line), 0 60px 120px -40px rgba(0, 0, 0, 0.95); isolation: isolate; touch-action: pan-y; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .raw { filter: saturate(0.55) contrast(0.92) brightness(0.92); }
.frame .edit { clip-path: inset(0 0 calc(100% - var(--sweep, 0%)) 0); }
.scan { position: absolute; z-index: 3; left: 0; right: 0; top: 0; transform: translateY(var(--sweep-y, 0px)); height: 2px; margin-top: -1px; background: var(--lime); box-shadow: 0 0 18px 2px rgba(207, 255, 5, 0.75), 0 0 60px 8px rgba(207, 255, 5, 0.25); opacity: 0; transition: opacity 400ms; pointer-events: none; }
.frame.is-rendering .scan, .frame.is-comparing .scan { opacity: 1; }
.scan .grip { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--lime); color: var(--raisin); font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.frame.is-comparing .scan .grip { display: inline-flex; pointer-events: auto; touch-action: none; cursor: ns-resize; }
/* a finger-sized handle around the small pill */
.scan .grip::before { content: ""; position: absolute; inset: -16px -12px; }
.frame.is-comparing { cursor: ns-resize; }
.lbl { position: absolute; z-index: 4; left: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; opacity: 0; transition: opacity 400ms; pointer-events: none; }
.lbl.before { top: calc(var(--sweep, 0%) + 10px); background: rgba(8, 10, 15, 0.7); color: var(--silver); }
.lbl.after { top: calc(var(--sweep, 0%) - 32px); background: var(--lime); color: var(--raisin); }
.frame.is-comparing .lbl { opacity: 1; }
.fchip { position: absolute; z-index: 4; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(8, 10, 15, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--silver-2); transition: opacity 400ms; }
.frame.is-comparing .fchip { opacity: 0; }
.fchip i { width: 7px; height: 7px; border-radius: 50%; background: #FF5A4E; box-shadow: 0 0 8px #FF5A4E; }
.hero.is-edited .fchip i { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.fsound { position: absolute; z-index: 4; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(8, 10, 15, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; font-weight: 500; color: var(--silver-2); opacity: 0; transform: translateY(-6px); transition: opacity 600ms var(--expo), transform 600ms var(--expo); }
.fsound svg { width: 14px; height: 14px; }
.hero.is-edited .fsound { opacity: 1; transform: none; }
.fsound[aria-pressed="true"] { background: var(--lime); color: var(--raisin); box-shadow: none; }
.ask { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; padding: 12px; border-radius: 20px; background: rgba(12, 15, 22, 0.76); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(0, 0, 0, 0.9); transition: opacity 800ms var(--expo), transform 800ms var(--expo), filter 800ms var(--expo); }
.hero.is-edited .ask { opacity: 0; transform: translateY(14px); filter: blur(6px); pointer-events: none; }
.ask-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--slate); margin-bottom: 8px; }
.ask-head img, .ask-head .oa { width: 18px; height: 18px; border-radius: 5px; }
.ask-head b { color: var(--silver-2); font-weight: 500; }
.ask-row { display: flex; align-items: flex-end; gap: 10px; }
.ask-text { flex: 1; min-height: 2.9em; font-size: 14.5px; line-height: 1.42; color: var(--silver-3); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.16em; background: var(--lime); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(233, 236, 237, 0.1); color: var(--silver-3); transition: background-color 300ms, transform 300ms var(--expo); }
.send svg { width: 15px; height: 15px; }
.ask.is-ready .send { background: var(--lime); color: var(--raisin); }
.ask.is-sent .send { transform: scale(0.86); }

.ticks { position: absolute; z-index: 6; right: calc(100% + 26px); top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.tick { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 8px; border-radius: 12px; background: rgba(21, 26, 38, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--silver-2); white-space: nowrap; opacity: 0; transform: translateX(10px); transition: opacity 600ms var(--expo), transform 700ms var(--expo); }
.tick.on { opacity: 1; transform: none; }
.tick .d { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--raisin); }
.tick .d svg { width: 11px; height: 11px; }
.mini { width: 100%; margin-top: 22px; display: grid; gap: 5px; }
.mini .row { position: relative; display: flex; gap: 3px; height: 14px; }
.mini .row i { flex: var(--w); border-radius: 4px; background: rgba(233, 236, 237, 0.1); transition: background-color 700ms var(--quint), opacity 700ms, box-shadow 700ms; }
.hero.is-edited .mini .v i { background: var(--lime); }
.mini .g i { opacity: 0; }
.hero.is-edited .mini .g i.b { opacity: 1; background: var(--raisin-3); box-shadow: inset 0 0 0 1px var(--lime); }
.mini .ph { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--silver-3); left: calc(var(--t, 0) * 100%); box-shadow: 0 0 8px rgba(233, 236, 237, 0.6); }
.mini-meta { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--slate); text-transform: uppercase; }

/* ── SC 02 · statement ────────────────────────────────────────────────── */
.statement { padding: clamp(110px, 18vh, 210px) 0; }
.statement p { margin: 0; font-size: clamp(36px, 5.4vw, 88px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 600; max-width: 17ch; }
.statement .w { color: rgba(233, 236, 237, 0.13); transition: color 600ms var(--quint); }
.statement .w.on { color: var(--silver-3); }
.statement .mark { --m: 0; }
.statement .mark .w, .statement .mark .w.on { color: var(--raisin); }
.statement .mark.on { --m: 1; }
.statement .mark:not(.on) .w { color: rgba(233, 236, 237, 0.13); }

/* ── SC 03 · the session (pinned) ─────────────────────────────────────── */
.session { position: relative; height: 320vh; }
.session-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 84px 0 100px; }
.session-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(18px, 3vh, 34px); }
.session-head .h2 { font-size: clamp(32px, 3.9vw, 60px); margin-top: 16px; }
.stepper { display: flex; gap: 6px; flex: none; }
.stepper span { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; color: var(--slate); box-shadow: inset 0 0 0 1px var(--line); transition: color 400ms, background-color 400ms, box-shadow 400ms; }
.stepper span b { font-family: var(--mono); font-weight: 500; font-size: 11px; }
.stepper span.on { color: var(--raisin); background: var(--lime); box-shadow: none; }
.desk { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.45fr); gap: 14px; height: min(62svh, 640px); }
.pane { position: relative; border-radius: 24px; background: linear-gradient(180deg, #141925, #0F131C); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -50px rgba(0, 0, 0, 0.9); overflow: hidden; }
.pane-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--silver); }
.pane-bar .dots { display: flex; gap: 6px; margin-right: 4px; }
.pane-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(233, 236, 237, 0.12); }
.pane-bar img, .pane-bar .oa, .pane-bar > svg { width: 20px; height: 20px; border-radius: 6px; }
.pane-bar .right { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 18px; height: calc(100% - 46px); overflow: hidden; }
.bub { max-width: 92%; padding: 12px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--expo), transform 700ms var(--expo); }
.bub.on { opacity: 1; transform: none; }
.bub.ai { background: rgba(233, 236, 237, 0.045); box-shadow: inset 0 0 0 1px var(--line); color: var(--silver-2); border-top-left-radius: 5px; }
.bub.me { align-self: flex-end; background: var(--raisin-3); color: var(--silver-3); border-top-right-radius: 5px; }
.bub .file { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(9, 11, 17, 0.5); font-size: 12.5px; }
.bub .file span:first-child { width: 26px; height: 40px; flex: none; border-radius: 5px; background: url("/showcase/v2/hero-raw.jpg") center / cover; }
.bub .file small { display: block; font-family: var(--mono); font-size: 10px; color: var(--slate); }
.okchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--silver-3); background: var(--raisin-3); box-shadow: inset 0 0 0 1px var(--lime); align-self: flex-start; }
.okchip svg { width: 13px; height: 13px; color: var(--lime); }
.tool { border-radius: 16px; background: rgba(9, 11, 17, 0.55); box-shadow: inset 0 0 0 1px var(--line-2); padding: 12px 14px; font-size: 13px; }
.tool-h { display: flex; align-items: center; gap: 8px; color: var(--silver-3); font-weight: 500; margin-bottom: 6px; }
.tool-h svg { width: 16px; height: 16px; }
.tool-h code { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--slate); }
.tool-l { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--slate); transition: color 400ms; }
.tool-l i { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--steel); display: grid; place-items: center; transition: background-color 400ms; }
.tool-l i svg { width: 9px; height: 9px; color: var(--raisin); opacity: 0; }
.tool-l.on { color: var(--silver-2); }
.tool-l.on i { background: var(--lime); box-shadow: none; }
.tool-l.on i svg { opacity: 1; }
.editor { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 46px minmax(0, 1fr); }
.editor > .pane-bar { grid-column: 1 / -1; }
.editor > .program { grid-column: 1; grid-row: 2; aspect-ratio: 9 / 16; height: calc(100% - 26px); margin: 12px 0 14px 14px; }
.editor > .tracks { grid-column: 2; grid-row: 2; align-content: center; padding: 14px 18px; }
.program { position: relative; margin: 12px 14px 10px; border-radius: 14px; background: radial-gradient(ellipse at center, #0D1119, #05070B); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.program .vid { position: absolute; inset: 0; }
.program .vid img, .program .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program .vid img { filter: saturate(0.55) contrast(0.92) brightness(0.9); }
.program .vid video { opacity: 0; transition: opacity 900ms var(--quint); }
.program.is-live .vid video { opacity: 1; }
.program .side { position: absolute; top: 12px; left: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.program .side b { display: block; color: var(--silver-3); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.program .side.r { display: none; }
.export { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(12, 15, 22, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--silver-2); opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--expo), transform 600ms var(--expo); }
.export.on { opacity: 1; transform: none; }
.export .bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(233, 236, 237, 0.08); overflow: hidden; }
.export .bar i { display: block; height: 100%; width: calc(var(--x, 0) * 100%); background: var(--lime); box-shadow: 0 0 10px rgba(207, 255, 5, 0.6); }
.export .pct { font-family: var(--mono); font-size: 11.5px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.export.done .pct { color: var(--lime); }
.tracks { position: relative; display: grid; gap: 8px; padding: 0 14px 14px; }
.trk { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; }
.trk > span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--slate); }
.lane { position: relative; height: 26px; border-radius: 6px; background: rgba(233, 236, 237, 0.03); overflow: hidden; }
.clip { position: absolute; top: 2px; bottom: 2px; left: var(--l); width: var(--w); border-radius: 5px; opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--expo), transform 600ms var(--expo), left 900ms var(--expo), width 900ms var(--expo), background-color 500ms, box-shadow 500ms; }
.clip.on { opacity: 1; transform: none; }
.v1 .clip { background: rgba(181, 191, 194, 0.22); box-shadow: inset 0 0 0 1px rgba(233, 236, 237, 0.12); }
.v1 .clip.bad.flag { background: rgba(255, 90, 78, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 90, 78, 0.45); }
.v1 .clip.bad.gone { opacity: 0; transform: scaleY(0.2); }
.v2 .clip { background: var(--raisin-3); box-shadow: inset 0 0 0 1.5px var(--lime); }
.cc .clip { background: rgba(233, 236, 237, 0.11); }
.wv { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: 2px; clip-path: inset(0 calc(100% - var(--r, 0%)) 0 0); transition: clip-path 1000ms var(--expo); }
.wv i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--steel); }
.a2 .wv i { background: var(--silver); }
.tl-ph { position: absolute; z-index: 2; top: 14px; bottom: 14px; left: calc(18px + 68px + (100% - 36px - 68px) * var(--p, 0)); width: 2px; background: var(--lime); box-shadow: 0 0 10px var(--lime); pointer-events: none; }

/* ── SC 04 · work (pinned horizontal strip) ───────────────────────────── */
.work { position: relative; height: 560vh; }
.work-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.strip { display: flex; align-items: center; gap: clamp(28px, 4vw, 72px); padding: 0 var(--gutter); will-change: transform; }
.card0 { flex: none; width: min(560px, 80vw); }
.card0 .h2 { margin-top: 20px; }
.card0 .lede { margin-top: 26px; }
.card0 .hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.card0 .hint i { width: 44px; height: 2px; background: linear-gradient(90deg, var(--lime), transparent); }
.shot { position: relative; flex: none; width: min(62vw, 980px); margin: 0; }
.shot .screen { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: #05070B; box-shadow: 0 0 0 1px var(--line-2), 0 60px 120px -50px rgba(0, 0, 0, 0.95); transform: scale(var(--s, 0.9)); opacity: var(--o, 0.4); transition: transform 1000ms var(--expo), opacity 1000ms var(--expo); }
.shot.is-on .screen { --s: 1; --o: 1; }
.shot .screen video { width: 100%; height: 100%; object-fit: cover; }
.shot .no { position: absolute; top: 16px; left: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--silver-3); padding: 6px 10px; border-radius: 8px; background: rgba(8, 10, 15, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.shot figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 22px; opacity: var(--o, 0.4); transition: opacity 1000ms var(--expo); }
.shot.is-on figcaption { --o: 1; }
.shot q { quotes: "\201C" "\201D"; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; color: var(--silver-3); }
.shot figcaption span { max-width: 30ch; text-align: right; font-size: 15.5px; color: var(--silver); }
.strip-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 100px; display: flex; align-items: center; gap: 20px; font-size: 13.5px; color: var(--slate); }
.strip-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line); }
.strip-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--lime); box-shadow: 0 0 10px rgba(207, 255, 5, 0.6); border-radius: inherit; }

/* ── SC 05 · shorts wall ──────────────────────────────────────────────── */
.wall { position: relative; height: 250vh; }
.wall-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 var(--gutter); }
.wall-copy { position: relative; z-index: 2; align-self: center; }
.wall-copy .h2 { margin-top: 20px; }
.wall-copy .lede { margin-top: 24px; }
.wall-copy ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.wall-copy li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--silver-2); }
.wall-copy li b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--raisin); background: var(--lime); padding: 2px 7px; border-radius: 5px; }
.cols { position: relative; align-self: stretch; height: 100svh; margin: -20svh 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; transform: rotate(-7deg) translateX(3%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.col { display: grid; gap: 16px; align-content: start; will-change: transform; }
.phone { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #05070B; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 0, 0, 0.9); cursor: pointer; transition: box-shadow 400ms, transform 600ms var(--expo); }
.phone:hover { transform: scale(1.025); box-shadow: 0 0 0 1px rgba(207, 255, 5, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.phone video, .phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(8, 10, 15, 0.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; color: var(--silver-3); font-weight: 500; text-align: left; }
.phone .cap svg { width: 14px; height: 14px; flex: none; color: var(--lime); }

.viewer { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(6, 8, 12, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 500ms var(--expo); }
.viewer.is-open { opacity: 1; pointer-events: auto; }
.viewer video { height: min(86svh, 900px); max-width: 92vw; aspect-ratio: 9 / 16; border-radius: 26px; box-shadow: 0 0 0 1px var(--line-2), 0 60px 120px -30px #000; background: #000; transform: scale(0.94); transition: transform 600ms var(--expo); }
.viewer.is-open video { transform: none; }
.viewer button { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(233, 236, 237, 0.1); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--silver-3); font-size: 24px; line-height: 1; }

/* ── SC 06 · voices ───────────────────────────────────────────────────── */
.voices { padding: clamp(110px, 16vh, 180px) 0 clamp(40px, 6vh, 70px); overflow: clip; }
.pull { font-size: clamp(40px, 5.6vw, 92px); line-height: 0.98; letter-spacing: -0.052em; font-weight: 600; color: var(--silver-3); max-width: 14ch; margin: 22px 0 0; }
.pull-by { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--slate); font-size: 15px; }
.pull-by img { width: 44px; height: 44px; border-radius: 50%; }
.pull-by b { display: block; color: var(--silver-2); font-weight: 600; }
.marquee { margin-top: clamp(56px, 8vh, 90px); display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lane-m { display: flex; gap: 16px; width: max-content; animation: slide 60s linear infinite; }
.lane-m.rev { animation-direction: reverse; animation-duration: 72s; }
.marquee:hover .lane-m { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.q { flex: none; width: 380px; margin: 0; padding: 22px 24px; border-radius: 20px; background: linear-gradient(180deg, #151A26, #10141D); box-shadow: inset 0 0 0 1px var(--line); }
.q p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.45; color: var(--silver-3); }
.q figcaption { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--slate); }
.q figcaption img, .q figcaption .av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.q figcaption .av { display: grid; place-items: center; background: var(--steel); color: var(--silver-3); font-size: 11px; font-weight: 600; }
.q figcaption b { color: var(--silver-2); font-weight: 600; }

/* ── SC 07 · plans ────────────────────────────────────────────────────── */
.plans-sec { padding: clamp(100px, 14vh, 170px) 0; background: radial-gradient(ellipse 70% 60% at 50% 38%, rgba(52, 62, 91, 0.38), transparent 70%); }
.plans-head { text-align: center; display: grid; justify-items: center; gap: 20px; margin-bottom: clamp(48px, 7vh, 80px); }
.plans-head .lede { text-align: center; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: 30px; background: linear-gradient(180deg, #171C29, #10141D); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -60px #000; isolation: isolate; }
.plan.featured { background: linear-gradient(180deg, #1B2131, #121723); box-shadow: 0 60px 120px -60px #000, 0 0 110px -40px rgba(207, 255, 5, 0.3); }
/* a slow lime light running the featured card's edge */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan.featured::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--ang), var(--steel), var(--lime) 8%, var(--lime) 14%, var(--steel) 26%, var(--steel)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: edge 7s linear infinite; }
@keyframes edge { to { --ang: 360deg; } }
.plan-top { display: flex; align-items: center; justify-content: space-between; }
.plan h3 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.035em; color: var(--silver-3); }
.badge { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--lime); color: var(--raisin); font-size: 12.5px; font-weight: 600; }
.plan .for { margin: 6px 0 0; color: var(--silver); font-size: 15.5px; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 2px; }
.amount { font-size: clamp(64px, 6.4vw, 88px); line-height: 0.86; font-weight: 500; letter-spacing: -0.065em; color: var(--silver-3); }
.per { font-family: var(--mono); font-size: 13px; color: var(--slate); }
.billing { margin: 12px 0 28px; font-size: 14px; color: var(--slate); }
/* A `?promo=` code Stripe confirmed: a crisp lime outline on raisin under the price. */
.plan .promo { display: flex; align-items: center; gap: 10px; margin: -14px 0 24px; padding: 9px 14px 9px 10px; border-radius: 14px; background: var(--raisin-2); box-shadow: inset 0 0 0 1px var(--lime); font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--silver-3); }
.plan .promo .ck { flex: none; margin-top: 0; }
.plan .btn { width: 100%; min-height: 58px; font-size: 16.5px; }
.feats { list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.feats li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.4; color: var(--silver-3); }
.feats small { display: block; margin-top: 2px; font-size: 14px; color: var(--slate); }
.ck { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--raisin); }
.ck svg { width: 11px; height: 11px; }
.guarantee { display: flex; align-items: center; gap: 18px; max-width: 1040px; margin: 20px auto 0; padding: 20px 24px; border-radius: 22px; background: rgba(233, 236, 237, 0.035); box-shadow: inset 0 0 0 1px var(--line); }
.guarantee .sh { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--raisin-3); box-shadow: inset 0 0 0 1px var(--lime); color: var(--lime); }
.guarantee .sh svg { width: 22px; height: 22px; }
.guarantee p { margin: 0; font-size: 15.5px; color: var(--silver); }
.guarantee b { color: var(--silver-3); font-weight: 600; }
/* Ad-matched hero: longer promises set a size smaller; the "plugs into" chip follows the headline. */
.hero[data-variant] h1 { font-size: clamp(40px, 5vw, 84px); }
.hero[data-variant] .works { margin: 24px 0 0; }
@media (max-width: 900px) { .hero[data-variant] h1 { order: 1; } .hero[data-variant] .hero-copy .works { order: 2; margin: 16px 0 0; } }
@media (max-width: 560px) { .hero[data-variant] h1 { font-size: 38px; } }

/* The phone's sticky start bar lives in the HUD; on a computer the HUD stays a timeline. */
.hud-start { display: none; }
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  /* On a phone the start bar is there from the first frame, before any script,
     on the real bottom edge above the home indicator, and above the outer
     page's slim cookie bar: it rises by --consent-lift (from the room the bar
     takes, sent by LandingSession.tsx), a transform, so nothing shifts. It
     only steps aside (is-away) where the page shows its own plans or buttons. */
  body .hud { display: block; padding: 6px; border-radius: 22px; bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px), calc(var(--parent-safe, 0px) + 8px)); transform: translate(-50%, calc(-1 * var(--consent-lift, 0px))); visibility: visible; transition: transform 320ms var(--expo), visibility 0s; }
  body .hud.is-away { transform: translate(-50%, 160%); visibility: hidden; transition: transform 700ms var(--expo), visibility 0s linear 700ms; }
  .hud > .tc, .hud > .seq, .hud > .btn { display: none; }
  .hud-start { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 8px 6px 8px 12px; border: 0; border-radius: 17px; background: transparent; cursor: pointer; text-align: left; }
  .hs-copy { display: grid; gap: 1px; }
  .hs-copy b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--silver-3); }
  .hs-copy small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
  .hs-copy small.is-promo { color: var(--lime); }
  .hs-go { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--raisin); box-shadow: 0 0 0 1px rgba(207, 255, 5, 0.45), 0 10px 30px -8px rgba(207, 255, 5, 0.55); transition: transform 400ms var(--expo); }
  .hs-go svg { width: 17px; height: 17px; }
  .hud-start:active .hs-go { transform: scale(0.94); }
}

.hero [data-free-month-terms] { order: 6; text-align: left; margin-left: 0; }
.fine { max-width: 1040px; margin: 16px auto 0; text-align: center; font-size: 13.5px; color: var(--slate); }
/* Phones only: most ad visitors pay here, and the setup waits for a computer. */
.phone-note { display: none; max-width: 1040px; margin: 16px auto 0; padding: 0 8px; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--silver); }
@media (max-width: 767px), (hover: none) and (pointer: coarse) { .phone-note { display: block; } }
.ls-cur-eur { display: none !important; }
:root[data-cur="eur"] .ls-cur-usd { display: none !important; }
:root[data-cur="eur"] .ls-cur-eur { display: inline !important; }

/* ── SC 08 · questions ────────────────────────────────────────────────── */
.faq { padding: clamp(90px, 12vh, 150px) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side .h2 { margin-top: 20px; }
.faq-side .lede { margin-top: 22px; }
.faq-side a { color: var(--silver-3); text-decoration: underline; text-underline-offset: 4px; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font-size: clamp(19px, 1.55vw, 22px); font-weight: 600; letter-spacing: -0.025em; color: var(--silver-3); }
.qa summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 300ms; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: var(--silver-2); }
.plus::after { transform: rotate(90deg); transition: transform 600ms var(--expo); }
.qa[open] .plus { background: rgba(233, 236, 237, 0.06); }
.qa[open] .plus::after { transform: rotate(0); }
.qa p { margin: 0; padding: 0 56px 26px 0; font-size: 17px; color: var(--silver); }

/* ── SC 09 · export (finale) ──────────────────────────────────────────── */
.exportsec { position: relative; padding: 88px var(--gutter); border-top: 1px solid var(--line); }
.exp-ready { max-width: 760px; margin: 0 auto; text-align: center; }
.exp-ready .h2 { font-size: clamp(38px, 4.5vw, 64px); }
.exp-ready .lede { margin: 24px auto 0; }
.exp-ready .hero-cta, .exp-ready .trust { justify-content: center; }

footer { padding: 72px 0 130px; border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot p { margin: 14px 0 0; font-size: 15px; color: var(--slate); max-width: 28ch; }
.foot h4 { margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { font-size: 15px; color: var(--silver); }
.foot a:hover { color: var(--silver-3); }
.legal { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--slate); }

/* reveal: below the first screen only. The first screen (headline, demo, copy,
   buttons) paints at once, readable in its first frame; its entrance is a
   short settle that never hides anything, and needs no script. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1100ms var(--expo), transform 1200ms var(--expo), filter 1000ms var(--expo); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .ln > span { animation: hero-settle-line 900ms var(--expo) both; animation-delay: var(--d, 0ms); }
  .hero .works, .hero .lede, .hero .hero-cta, .hero .trust, .hero .rig { animation: hero-settle 900ms var(--expo) both; animation-delay: var(--d, 0ms); }
}
@keyframes hero-settle-line { from { transform: translateY(0.12em); } to { transform: none; } }
@keyframes hero-settle { from { transform: translateY(10px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .lane-m, .plan.featured::before, .caret, .chat .bub.on { animation: none; }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ticks { display: none; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .top { padding-block: 16px; }
  .top-right a:not(:last-child) { display: none; }
  .statement { padding: 72px 0 24px; }

  /* The timeline HUD stays a timeline on a phone: a slim strip of the page's
     chapters with the playhead, the chapter name and the one action. */
  .hud { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 7px 7px 7px 14px; border-radius: 18px; }
  .tc { min-width: 0; }
  .hud .tc [data-tc] { display: none; }
  .hud .tc small { font-size: 10.5px; color: var(--silver-3); }
  .seq { height: 6px; gap: 2px; }
  .seq a { padding: 0; font-size: 0; border-radius: 3px; pointer-events: none; }
  .playhead { top: -5px; bottom: -5px; }
  .playhead::before { display: none; }

  /* SC 01: headline, then the whole stage in the first screen, the request
     card included, so the raw take renders where the visitor is looking. */
  .hero { min-height: 0; padding: 82px 0 44px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy .works { order: 1; align-self: flex-start; margin-bottom: 16px; }
  .hero h1 { order: 2; }
  .rig { order: 3; width: 100%; margin-top: 18px; justify-items: center; }
  .hero .lede { order: 4; margin-top: 26px; }
  .hero-cta { order: 5; margin-top: 24px; }
  .trust { order: 7; }
  .frame { height: auto; width: clamp(236px, calc((100svh - 312px) * 0.5625), min(100%, 340px)); aspect-ratio: 9 / 16; align-self: center; border-radius: 24px; }
  .ask { left: 10px; right: 10px; bottom: 10px; padding: 10px; border-radius: 16px; }
  .ask-text { min-height: 2.8em; font-size: 13.5px; }
  .mini { max-width: 340px; }

  /* SC 03: pinned like the desktop, stacked. The chat on top keeps its latest
     messages, the editor below builds the timeline, both driven by the scroll. */
  .session { height: 300vh; }
  .session-pin { padding: 78px 0 92px; justify-content: flex-start; }
  .session-head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 14px; }
  .session-head .h2 { font-size: 30px; margin-top: 12px; }
  .stepper { display: none; }
  .desk { grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 10px; height: calc(100svh - 78px - 92px - 108px); }
  .pane { border-radius: 20px; }
  .pane-bar { height: 38px; padding: 0 14px; font-size: 12.5px; }
  .pane-bar .dots { display: none; }
  .chat { height: calc(100% - 38px); padding: 12px; gap: 8px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 34px); mask-image: linear-gradient(180deg, transparent, #000 34px); }
  .chat .bub:not(.on) { display: none; }
  .chat .bub.on { animation: bub-in 600ms var(--expo); }
  .bub { font-size: 13px; padding: 9px 12px; border-radius: 14px; }
  .bub .file { margin-bottom: 6px; font-size: 11.5px; }
  .bub .file span:first-child { width: 20px; height: 32px; }
  .okchip { height: 28px; font-size: 12px; }
  .tool { padding: 9px 12px; border-radius: 14px; font-size: 12px; }
  .tool-h { margin-bottom: 3px; }
  .tool-l { padding: 2px 0; }
  .editor { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 38px minmax(0, 1fr); }
  .editor > .program { height: calc(100% - 20px); margin: 10px 0 10px 10px; border-radius: 12px; }
  .editor > .tracks { padding: 10px 12px 10px 10px; gap: 6px; }
  .program .side { top: 8px; left: 9px; font-size: 8.5px; }
  .program .side b { font-size: 10.5px; }
  .export { left: 6px; right: 6px; bottom: 6px; height: 28px; gap: 6px; padding: 0 8px; border-radius: 9px; }
  .export > span:first-child { display: none; }
  .export .pct { min-width: 34px; font-size: 10px; }
  .trk { grid-template-columns: 46px 1fr; gap: 6px; }
  .trk > span { font-size: 8px; letter-spacing: 0.02em; white-space: nowrap; }
  .lane { height: 18px; }
  .tl-ph { top: 10px; bottom: 10px; left: calc(62px + (100% - 74px) * var(--p, 0)); }

  /* SC 04: a native swipe strip. Pinning the page and moving the shots with
     the vertical scroll made the page stand still under the thumb, which read
     as lag. Now the page scrolls normally, the strip follows the finger with
     the phone's own momentum and snaps to each shot, and the neighbours shrink
     and fade continuously with the swipe (--s/--o set per frame in JS). */
  .work { height: auto; }
  .work-pin { position: relative; height: auto; overflow: visible; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 72px 0 8px; }
  .work-pin > .card0 { width: auto; padding: 0 var(--gutter); margin-bottom: 24px; }
  .card0 .h2 { font-size: 34px; margin-top: 14px; }
  .card0 .lede { font-size: 15.5px; margin-top: 14px; }
  .card0 .hint { display: none; }
  .strip { gap: 12px; align-items: flex-start; padding: 0 10vw; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 10vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; will-change: auto; transform: none !important; }
  .strip::-webkit-scrollbar { display: none; }
  .shot { width: 80vw; scroll-snap-align: center; scroll-snap-stop: always; }
  .shot .screen { border-radius: 18px; transition: none; will-change: transform, opacity; }
  .shot .no { top: 10px; left: 10px; font-size: 10px; padding: 4px 8px; }
  .shot figcaption { flex-direction: column; gap: 6px; margin-top: 16px; opacity: var(--co, 0); transition: none; }
  .shot q { font-size: 25px; }
  .shot figcaption span { text-align: left; font-size: 14.5px; }
  .strip-foot { position: static; margin: 18px var(--gutter) 0; font-size: 12px; }
  .strip-foot > span:first-child { display: none; }

  .wall { height: auto; }
  .wall-pin { position: relative; height: auto; grid-template-columns: 1fr; padding: 72px var(--gutter) 24px; }
  .cols { height: 110svh; margin: 0; transform: rotate(-4deg); }
  .voices { padding: 72px 0 24px; }
  .marquee { margin-top: 44px; }
  .q { width: 300px; }
  .plans-sec { padding: 80px 0; }
  .plans-head { margin-bottom: 36px; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 26px 22px; border-radius: 26px; }
  .faq { padding: 64px 0 72px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .qa p { padding-right: 0; }

  .exportsec { padding: 64px var(--gutter); }
  .exp-ready .lede { font-size: 16px; }
  .exp-ready .trust { gap: 6px 16px; font-size: 13px; }

  footer { padding: 56px 0 120px; }
  .legal { flex-direction: column; margin-top: 44px; }
}
@media (max-width: 900px) and (max-height: 720px) {
  .work-pin > .card0 .lede { display: none; }
  .session-head .marker { display: none; }
  .desk { height: calc(100svh - 78px - 92px - 64px); }
}
@media (max-width: 560px) {
  .hero:not([data-variant]) h1 { font-size: clamp(32px, 9.6vw, 40px); }
  .works { font-size: 12.5px; padding: 5px 12px 5px 5px; }
  .works .say-long { display: none; }
  .works .say-short { display: inline; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-cta .link { justify-content: center; }
  .guarantee { flex-direction: column; text-align: center; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols .col:nth-child(3) { display: none; }
}
/* A phone keeps room for the start bar under the demo, so the headline, the
   whole demo and a button share the first screen. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 900px) {
  .frame { width: clamp(220px, calc((100svh - 392px) * 0.5625), min(100%, 340px)); }
}
@keyframes bub-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The free week is Starter only: no Pro card for a free-week visitor. */
html[data-free-week] [data-plan-card="monthly"], html[data-one-month] [data-plan-card="monthly"] { display: none; }
html[data-free-week] .plans, html[data-one-month] .plans { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* Trial terms use sentence case so the phone offer stays compact and readable. */
html[data-free-week] .hs-copy small { font-family: inherit; font-size: 12px; line-height: 1.4; letter-spacing: 0; text-transform: none; }

/* ── The film: poster-first player for the two-minute tour ─────────────── */
.film { padding: clamp(90px, 12vh, 150px) 0 clamp(40px, 6vh, 80px); }
.film-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(28px, 4vw, 48px); }
.film-head .h2 { margin-top: 20px; }
.film-head .lede { max-width: 40ch; }
.film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #05070B; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 7px rgba(10, 13, 20, 0.9), 0 0 0 8px var(--line), 0 60px 120px -40px rgba(0, 0, 0, 0.95); isolation: isolate; }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--expo); }
.film-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9, 11, 17, 0) 52%, rgba(9, 11, 17, 0.82) 100%); transition: opacity 0.4s var(--quint); }
.film-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; gap: 18px; padding: clamp(18px, 3vw, 40px); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.film-btn { flex: none; width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px); display: grid; place-items: center; border-radius: 999px; background: var(--lime); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8); transition: transform 0.5s var(--expo); }
.film-btn svg { width: 42%; height: 42%; margin-left: 8%; fill: var(--raisin); }
.film-copy { display: grid; gap: 6px; padding-bottom: 4px; }
.film-copy b { font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.03em; color: var(--silver-3); }
.film-copy span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }
.film-tag { position: absolute; z-index: 2; right: clamp(18px, 3vw, 40px); bottom: clamp(22px, 3.2vw, 46px); height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; background: rgba(9, 11, 17, 0.6); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.film-play:hover .film-btn { transform: scale(1.06); }
.film-frame:hover .film-poster { transform: scale(1.015); }
.film-play:active .film-btn { transform: scale(0.98); }
.film-play:focus-visible { outline: none; }
.film-play:focus-visible .film-btn { outline: 2px solid var(--silver-3); outline-offset: 4px; }
.film-frame video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: #05070B; opacity: 0; pointer-events: none; }
.film-poster { z-index: 1; }
.film-frame::after { z-index: 1; }
.film-frame.is-playing video { z-index: 3; opacity: 1; pointer-events: auto; }
.film-frame.is-playing .film-poster { opacity: 0; }
.film-btn { position: relative; }
.film-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid transparent; border-top-color: var(--silver-3); opacity: 0; }
.film-frame.is-loading .film-btn::after { opacity: 1; animation: film-spin 0.8s linear infinite; }
.film-frame.is-loading .film-play { cursor: progress; }
@keyframes film-spin { to { transform: rotate(360deg); } }
:root.film-watching .hud { opacity: 0 !important; visibility: hidden; pointer-events: none !important; transition: opacity 0.3s var(--quint), visibility 0s linear 0.3s; }
.film-frame.is-playing .film-play, .film-frame.is-playing .film-tag, .film-frame.is-playing::after { display: none; }
@media (max-width: 900px) {
  .film-head { flex-direction: column; align-items: flex-start; }
  .film-frame { border-radius: 16px; }
}
@media (max-width: 700px) {
  .film-tag { display: none; }
  .film-play { justify-content: flex-end; gap: 12px; padding: 14px; }
  .film-copy { order: -1; padding-bottom: 2px; }
  .film-copy b { display: none; }
  .film-copy span { font-size: 11px; color: var(--silver-3); }
  .film-btn { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-poster, .film-btn { transition: none; }
  .film-frame:hover .film-poster, .film-play:hover .film-btn { transform: none; }
}

/* Phones read the product story in normal document flow. No pinned demo,
   moving quote lanes or decorative video-wall parallax under the thumb. */
.mobile-how { display: none; }
@media (max-width: 900px) {
  .session { height: auto; }
  .session-pin { position: relative; top: auto; height: auto; min-height: 0; padding-block: 64px; }
  .session .desk, .session .stepper { display: none; }
  .mobile-how { display: grid; gap: 24px; list-style: none; padding: 0; margin: 32px 0 0; }
  .mobile-how li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-2); }
  .mobile-how li > span { color: var(--lime); font: 12px var(--mono); padding-top: 4px; }
  .mobile-how h3 { color: var(--silver-3); font-size: 20px; line-height: 1.25; margin: 0; }
  .mobile-how p { color: var(--silver-2); font-size: 16px; line-height: 1.55; margin: 12px 0 0; }
  .marquee { display: block; padding-inline: var(--gutter); mask-image: none; -webkit-mask-image: none; }
  .lane-m, .lane-m.rev { display: grid; width: 100%; gap: 16px; animation: none; transform: none; margin-bottom: 16px; }
  .q { width: 100%; min-width: 0; padding: 24px; }
  .q[aria-hidden="true"] { display: none; }
  .q figcaption > span { min-width: 0; overflow-wrap: anywhere; }
  .q figcaption img, .q figcaption .av { flex: 0 0 30px; }
  .cols { height: auto; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cols .col { transform: none !important; }
  .cols .col:last-child { display: none; }
}

/* Phone visitors see the proof and setup requirements before the main action. */
.mobile-setup-note, .mobile-demo-caption { display: none; }
@media (max-width: 900px) {
  .mobile-demo-caption { display: block; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--silver-2); text-align: center; }
  .mobile-setup-note { display: block; order: 4; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--silver-2); }
  .hero [data-free-month-terms] { display: none; }
}