/* Ollie — landing. Tokens mirror the editor (ollie.css). */
:root {
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f2f0ec; --surface: #ffffff; --surface-2: #f3f0eb; --surface-3: #e7e3dc; --stage: #e6e2db;
  --border: rgba(20, 15, 10, .1); --border-strong: rgba(20, 15, 10, .24);
  --text: #1c1a17; --text-2: #4d4943; --text-3: #69645c;
  --accent: #ff8f62; --accent-hover: #ff7d4a; --on-accent: #221006; --accent-soft: rgba(255, 120, 70, .14); --accent-ink: #a8421a;
  --c-zoom: #79a2fb; --c-cut: #f77272; --c-click: #ffaa8c;
  --danger: #c23737; --success: #1f8a55; --focus: #1c1a17;
  --shadow-md: 0 8px 24px rgba(40, 30, 20, .12); --shadow-lg: 0 28px 70px rgba(40, 30, 20, .22);
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --wrap: 1200px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, p { margin: 0; text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.brand:hover { color: var(--text); }
.mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; flex: none; }
.mark::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--on-accent); }
.top-link { font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; padding: 10px 4px; }
.top-link:hover { color: var(--text); }

/* Hero */
.hero { text-align: center; padding-block: 56px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { font-size: clamp(38px, 6.4vw, 68px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; max-width: 14ch; }
.hero h1 span { color: var(--text-3); }
.lede { font-size: clamp(17px, 2vw, 19px); color: var(--text-2); max-width: 44ch; }

/* CTA + inline form */
.cta { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .7; cursor: progress; }
.cta-note { font-size: 14px; color: var(--text-3); }
.invite { width: 100%; max-width: 440px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 22px; display: flex; flex-direction: column; gap: 14px; animation: rise .25s ease both; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--text); }
.field label small { font-weight: 400; color: var(--text-3); font-size: 13px; margin-left: 4px; }
.field input { height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 16px; }
.field input::placeholder { color: var(--text-3); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.invite .btn { width: 100%; margin-top: 4px; }
.form-error { font-size: 14px; color: var(--danger); }
.form-error:empty { display: none; }
.thanks { max-width: 440px; width: 100%; padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); font-weight: 600; text-align: center; animation: rise .25s ease both; }
.thanks::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 auto 10px; border-radius: 50%; background: var(--success); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Comparison slider */
.compare-wrap { padding-block: 8px 24px; }
.compare { --pos: 50%; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--stage); border: 1px solid var(--border); box-shadow: var(--shadow-lg); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; isolation: isolate; }
.compare video, .compare .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .layer { position: absolute; inset: 0; }
.compare .layer-a { background: var(--stage); }
.compare .layer-b { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface-2); clip-path: inset(0 0 0 var(--pos)); }
.compare .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--text-3); pointer-events: none; }
.compare .layer-a .ph { padding-right: 50%; } .compare .layer-b .ph { padding-left: 50%; }
.compare.is-ready .ph, .compare.has-poster .ph { display: none; }
.divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 2; }
.divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 18px rgba(0, 0, 0, .25); }
.handle { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0; background: #fff; color: #1c1a17; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); display: grid; place-items: center; cursor: grab; touch-action: none; transition: transform .15s ease; }
.handle::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.handle svg { width: 26px; height: 26px; }
.handle:hover { transform: translate(-50%, -50%) scale(1.06); }
.compare.is-dragging, .compare.is-dragging .handle { cursor: grabbing; }
.compare.is-dragging .handle { transform: translate(-50%, -50%) scale(1.1); }
.handle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tag { position: absolute; top: 16px; z-index: 1; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(16, 14, 18, .62); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .2s ease; pointer-events: none; }
.tag-a { left: 16px; } .tag-b { right: 16px; }
.tag-b { background: var(--accent); color: var(--on-accent); }
.compare.hide-a .tag-a, .compare.hide-b .tag-b { opacity: 0; }
.playpause { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(16, 14, 18, .62); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.playpause svg { width: 16px; height: 16px; }
.playpause .i-play, .playpause[aria-pressed="true"] .i-pause { display: none; }
.playpause[aria-pressed="true"] .i-play { display: block; }
.compare-hint { margin-top: 14px; text-align: center; font-size: 14px; color: var(--text-3); }

/* In between */
.section { padding-top: 112px; }
.section-head { max-width: 560px; margin-bottom: 40px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; }
.section h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.clip { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); container-type: inline-size; }
.clip:not(.is-playing) * { animation-play-state: paused !important; }

/* UI scenes: 40em × 30em, 1em = 1/40 of the clip width */
.scene { position: absolute; inset: 0; font-size: 2.5cqw; line-height: 1.2; color: var(--text); }
.scene * { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .25, 1); animation-fill-mode: both; }
.p-scene *, .f-scene * { animation-duration: 10s; }
.ptr { position: absolute; left: 0; top: 0; width: 1.3em; height: 1.3em; z-index: 5; filter: drop-shadow(0 .1em .15em rgba(0,0,0,.3)); }
.ptr svg { width: 100%; height: 100%; display: block; }
.rip { position: absolute; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; border: .16em solid var(--accent); opacity: 0; z-index: 4; }
@keyframes rip-a { 0%, 13% { opacity: 0; transform: scale(.3); } 14% { opacity: 1; } 21%, 100% { opacity: 0; transform: scale(1.3); } }

/* Mini web app (36em × 20.25em) */
.ma { position: absolute; left: 0; top: 0; width: 36em; height: 20.25em; background: #f6f7fb; display: grid; grid-template-columns: 5.4em minmax(0, 1fr); overflow: hidden; text-align: left; }
.ma i { display: block; }
.ma-side { background: #1e2235; padding: .7em .5em; display: flex; flex-direction: column; gap: .4em; }
.ma-logo { width: 1em; height: 1em; border-radius: .28em; background: #7c8cff; margin: 0 0 .5em .25em; }
.ma-nav { height: 1.05em; border-radius: .3em; display: flex !important; align-items: center; gap: .35em; padding: 0 .3em; }
.ma-nav::before { content: ""; width: .5em; height: .5em; border-radius: .14em; background: #4a5170; }
.ma-nav::after { content: ""; width: 2.4em; height: .28em; border-radius: .14em; background: #4a5170; }
.ma-nav.on { background: #30364f; } .ma-nav.on::before { background: #7c8cff; } .ma-nav.on::after { background: #c9cdf0; }
.ma-main { display: grid; grid-template-rows: 1.7em minmax(0, 1fr); min-width: 0; }
.ma-top { background: #fff; border-bottom: .06em solid #e6e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 .7em; }
.ma-search { position: relative; width: 9.5em; height: 1em; border-radius: .28em; background: #f1f2f7; display: flex; align-items: center; padding: 0 .4em; }
.ma-ph { font-size: .42em; color: #9aa0b4; white-space: nowrap; }
.ma-typed { position: absolute; left: .95em; top: 50%; transform: translateY(-50%); font-size: .42em; color: #1b1e2b; font-weight: 500; white-space: nowrap; overflow: hidden; width: 0; }
.ma-btn { height: 1em; padding: 0 .5em; border-radius: .28em; background: #5b6cff; color: #fff; display: flex; align-items: center; }
.ma-btn span { font-size: .42em; font-weight: 600; white-space: nowrap; }
.ma-body { padding: .7em; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: .55em; min-height: 0; }
.ma-h { font-size: .85em; font-weight: 700; color: #1b1e2b; line-height: 1.1; }
.ma-sub { font-size: .42em; color: #6b7188; margin-top: .5em; }
.ma-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; }
.ma-kpi { background: #fff; border: .06em solid #e6e8f0; border-radius: .4em; padding: .5em; display: flex; flex-direction: column; gap: .35em; }
.ma-kpi i { width: 1.8em; height: .28em; border-radius: .14em; background: #d5d8e3; }
.ma-kpi b { font-size: .62em; color: #1b1e2b; font-weight: 700; line-height: 1; }
.ma-row { display: grid; grid-template-columns: 2fr 1fr; gap: .45em; min-height: 0; }
.ma-card { background: #fff; border: .06em solid #e6e8f0; border-radius: .4em; padding: .6em; min-height: 0; display: flex; }
.ma-card svg { width: 100%; height: 100%; display: block; }
.ma-list { flex-direction: column; justify-content: space-around; }
.ma-list i { height: .32em; border-radius: .16em; background: #c9d0ff; }
.ma-list i:nth-child(1) { width: 90%; } .ma-list i:nth-child(2) { width: 70%; } .ma-list i:nth-child(3) { width: 52%; } .ma-list i:nth-child(4) { width: 34%; }

/* 1 · Auto zoom that follows the pointer */
.z-stage { position: absolute; left: 2em; top: 2em; width: 36em; height: 20.25em; border-radius: .8em; overflow: hidden; box-shadow: var(--shadow-md); }
.z-cam { position: absolute; inset: 0; transform-origin: 0 0; animation-name: z-cam; }
@keyframes z-cam { 0%, 16% { transform: none; } 28%, 31% { transform: translate(-50.4em, 0) scale(2.4); } 46%, 74% { transform: translate(-7.9em, 0) scale(2.4); } 86%, 100% { transform: none; } }
.z-scene .ptr { animation-name: z-ptr; transform: translate(20em, 12em); }
@keyframes z-ptr { 0% { transform: translate(20em, 12em); } 12%, 31% { transform: translate(33.2em, .7em); } 46%, 76% { transform: translate(8.6em, .75em); } 90%, 100% { transform: translate(20em, 12em); } }
.z-rip1 { left: 33.3em; top: .85em; animation-name: rip-a; }
.z-rip2 { left: 8.7em; top: .9em; animation-name: z-rip2; }
@keyframes z-rip2 { 0%, 47% { opacity: 0; transform: scale(.3); } 48% { opacity: 1; } 55%, 100% { opacity: 0; transform: scale(1.3); } }
.z-scene .ma-typed { animation-name: z-type; }
.z-scene .ma-ph { animation-name: z-ph; }
@keyframes z-type { 0%, 50% { width: 0; animation-timing-function: steps(10, end); } 68%, 95% { width: 10.5ch; } 100% { width: 0; } }
@keyframes z-ph { 0%, 49% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
.z-tl { position: absolute; left: 2em; right: 2em; top: 24em; height: 3.8em; background: var(--surface); border: 1px solid var(--border); border-radius: .7em; padding: .6em .8em; }
.z-lane { position: relative; height: 100%; }
.z-blk { position: absolute; left: 16%; width: 70%; top: 0; bottom: 0; border-radius: .45em; background: color-mix(in oklab, var(--c-zoom) 18%, var(--surface)); border: .1em solid var(--c-zoom); display: flex; align-items: center; gap: .4em; padding: 0 .6em; font-size: .78em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.z-blk svg, .p-blk svg { width: 1.1em; height: 1.1em; flex: none; }
.z-click { position: absolute; bottom: -.45em; width: .5em; height: .5em; margin-left: -.25em; border-radius: 50%; background: var(--c-click); }
.z-ph { position: absolute; top: -.45em; bottom: -.45em; left: 0; width: .16em; margin-left: -.08em; border-radius: .08em; background: var(--accent); animation-name: z-ph-move; animation-timing-function: linear; }
@keyframes z-ph-move { from { left: 0; } to { left: 100%; } }

/* 2 · Polish my video */
.p-bar { position: absolute; left: 0; right: 0; top: 0; height: 3.6em; background: var(--surface); border-bottom: 1px solid var(--border); }
.p-logo { position: absolute; left: 1em; top: .95em; width: 1.7em; height: 1.7em; border-radius: .5em; background: var(--accent); display: grid; place-items: center; }
.p-logo::after { content: ""; width: .7em; height: .7em; border-radius: 50%; border: .18em solid var(--on-accent); }
.p-title { position: absolute; left: 3.3em; top: 1.15em; font-size: .85em; font-weight: 700; white-space: nowrap; }
.p-ic { position: absolute; top: 1em; width: 1.6em; height: 1.6em; border-radius: .45em; display: grid; place-items: center; color: var(--text-2); }
.p-ic svg { width: 1em; height: 1em; }
.p-undo { left: 10.4em; animation-name: p-undo; } .p-redo { left: 12.2em; opacity: .4; }
@keyframes p-undo { 0%, 73% { background: transparent; } 75%, 79% { background: var(--surface-3); } 83%, 100% { background: transparent; } }
.p-pill { position: absolute; right: 1em; top: .7em; height: 2.2em; padding: 0 .9em 0 .7em; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; gap: .35em; }
.p-pill svg { width: 1.05em; height: 1.05em; }
.p-lbl { display: grid; font-size: .8em; font-weight: 700; white-space: nowrap; }
.p-lbl > span { grid-area: 1 / 1; }
.p-idle { animation-name: p-idle; } .p-busy { opacity: 0; animation-name: p-busy; }
@keyframes p-idle { 0%, 15% { opacity: 1; } 16%, 60% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes p-busy { 0%, 15% { opacity: 0; } 16%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.p-prev { position: absolute; top: 4.6em; left: 6.65em; width: 26.7em; height: 15em; border-radius: .5em; overflow: hidden; box-shadow: var(--shadow-md); }
.p-prev .ma { font-size: .7417em; }
.p-toast { position: absolute; left: 50%; top: 23em; transform: translateX(-50%); display: flex; align-items: center; gap: .9em; height: 2.2em; padding: 0 1em; border-radius: 999px; background: #1c1b20; color: #fff; font-size: .72em; font-weight: 600; white-space: nowrap; opacity: 0; animation-name: p-toast; z-index: 3; }
.p-toast b { color: #ffb08f; }
@keyframes p-toast { 0%, 60% { opacity: 0; transform: translate(-50%, .5em); } 63%, 88% { opacity: 1; transform: translate(-50%, 0); } 91%, 100% { opacity: 0; transform: translate(-50%, 0); } }
.p-tl { position: absolute; left: 1em; right: 1em; top: 20.8em; bottom: 1em; background: var(--surface); border: 1px solid var(--border); border-radius: .8em; padding: .7em .9em; }
.p-ruler { display: flex; justify-content: space-between; font-size: .66em; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 600; }
.p-dur { display: grid; } .p-dur > span { grid-area: 1 / 1; }
.p-d-old { opacity: 0; animation-name: p-d-old; } .p-d-new { animation-name: p-d-new; }
@keyframes p-d-old { 0%, 45% { opacity: 1; } 48%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes p-d-new { 0%, 45% { opacity: 0; } 48%, 97% { opacity: 1; } 100% { opacity: 0; } }
.p-lane { display: flex; height: 3.6em; margin-top: .8em; }
.p-seg { position: relative; flex: 0 0 28%; min-width: 0; }
.p-s2 { flex-basis: 24%; } .p-s3 { flex-basis: 22%; }
.p-dead { flex-basis: 0%; overflow: hidden; }
.p-dd1 { animation-name: p-dd1; } .p-dd2 { animation-name: p-dd2; }
@keyframes p-dd1 { 0%, 40% { flex-basis: 14%; } 50%, 96% { flex-basis: 0%; } 100% { flex-basis: 14%; } }
@keyframes p-dd2 { 0%, 40% { flex-basis: 12%; } 50%, 96% { flex-basis: 0%; } 100% { flex-basis: 12%; } }
.p-strip { position: absolute; left: .12em; right: .12em; bottom: 0; height: .45em; border-radius: .225em; background: var(--surface-3); }
.p-dead .p-strip { background: repeating-linear-gradient(90deg, var(--surface-3) 0 .25em, transparent .25em .5em); }
.p-blk { position: absolute; left: .12em; right: .12em; top: 0; height: 3.4em; border-radius: .6em; display: flex; align-items: center; gap: .35em; padding: 0 .7em; font-size: .78em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.p-zoom { background: color-mix(in oklab, var(--c-zoom) 18%, var(--surface)); border: .12em solid var(--c-zoom); left: .3em; right: .3em; }
.p-cut { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--c-cut) 26%, var(--surface)) 0 .4em, color-mix(in oklab, var(--c-cut) 12%, var(--surface)) .4em .8em); border: .12em solid var(--c-cut); justify-content: center; padding: 0; opacity: 0; }
.p-z1 { animation-name: p-z1; } .p-z2 { animation-name: p-z2; } .p-z3 { opacity: 0; animation-name: p-z3; }
.p-c1 { animation-name: p-c1; } .p-c2 { animation-name: p-c2; }
@keyframes p-c1 { 0%, 29% { opacity: 0; } 32%, 40% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes p-c2 { 0%, 32% { opacity: 0; } 35%, 40% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes p-z1 { 0%, 50% { opacity: 0; transform: scale(.8); } 53%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes p-z2 { 0%, 53% { opacity: 0; transform: scale(.8); } 56%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes p-z3 { 0%, 56% { opacity: 0; transform: scale(.8); } 59%, 75% { opacity: 1; transform: none; } 79%, 100% { opacity: 0; transform: scale(.8); } }
.p-scene .ptr { transform: translate(30em, 12em); animation-name: p-ptr; }
@keyframes p-ptr { 0% { transform: translate(22em, 25em); } 12%, 16% { transform: translate(33.6em, 1.5em); } 28%, 66% { transform: translate(30em, 12em); } 72%, 78% { transform: translate(11em, 1.6em); } 90%, 100% { transform: translate(22em, 25em); } }
.p-rip1 { left: 33.7em; top: 1.7em; animation-name: rip-a; }
.p-rip2 { left: 11.1em; top: 1.8em; animation-name: p-rip2; }
@keyframes p-rip2 { 0%, 74% { opacity: 0; transform: scale(.3); } 75% { opacity: 1; } 82%, 100% { opacity: 0; transform: scale(1.3); } }

/* 3 · Background, shape and end card */
.f-frame { position: absolute; top: 1.8em; left: 50%; width: 35.5em; height: 20em; transform: translateX(-50%); border-radius: .6em; overflow: hidden; background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 1em 1em; box-shadow: var(--shadow-md); animation-name: f-frame; }
@keyframes f-frame { 0%, 34% { width: 35.5em; } 39%, 52% { width: 20em; } 57%, 70% { width: 11.25em; } 75%, 100% { width: 35.5em; } }
.f-bg { position: absolute; inset: 0; background: linear-gradient(140deg, #4b3fc9 0%, #b860b0 55%, #f3a37a 100%); animation-name: f-bg; }
@keyframes f-bg { 0%, 12% { opacity: 0; } 22%, 97% { opacity: 1; } 100% { opacity: 0; } }
.f-app { position: absolute; left: 50%; top: 50%; width: 36em; height: 20.25em; border-radius: 1em; overflow: hidden; transform: translate(-50%, -50%) scale(.8); box-shadow: 0 1.5em 3em rgba(20, 10, 40, .35); animation-name: f-app; }
@keyframes f-app {
  0%, 12% { transform: translate(-50%, -50%) scale(.986); border-radius: 0; box-shadow: none; }
  22%, 34% { transform: translate(-50%, -50%) scale(.8); border-radius: 1em; box-shadow: 0 1.5em 3em rgba(20, 10, 40, .35); }
  39%, 52% { transform: translate(-50%, -50%) scale(.47); border-radius: 1.4em; }
  57%, 70% { transform: translate(-50%, -50%) scale(.27); border-radius: 2em; }
  75%, 97% { transform: translate(-50%, -50%) scale(.8); border-radius: 1em; }
  100% { transform: translate(-50%, -50%) scale(.986); border-radius: 0; box-shadow: none; } }
.f-tag { position: absolute; top: .7em; left: .7em; display: grid; padding: .3em .7em; border-radius: 999px; background: rgba(16, 14, 18, .62); color: #fff; font-size: .7em; font-weight: 600; white-space: nowrap; animation-name: f-tag; }
.f-tag > span { grid-area: 1 / 1; opacity: 0; }
.f-tag > .f-yt { opacity: 1; animation-name: f-yt; } .f-li { animation-name: f-li; } .f-tt { animation-name: f-tt; }
.f-yt, .f-li, .f-tt { animation-timing-function: steps(1, end) !important; }
@keyframes f-tag { 0%, 18% { opacity: 0; } 24%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes f-yt { 0% { opacity: 1; } 37% { opacity: 0; } 72% { opacity: 1; } }
@keyframes f-li { 0% { opacity: 0; } 37% { opacity: 1; } 55% { opacity: 0; } }
@keyframes f-tt { 0% { opacity: 0; } 55% { opacity: 1; } 72% { opacity: 0; } }
.f-end { position: absolute; inset: 0; background: linear-gradient(140deg, #4b3fc9 0%, #b860b0 55%, #f3a37a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; color: #fff; opacity: 0; animation-name: f-end; }
.f-end-logo { width: 2.6em; height: 2.6em; border-radius: .75em; background: #7c8cff; box-shadow: 0 .6em 1.4em rgba(20, 10, 40, .3); margin-bottom: .3em; }
.f-end b { font-size: 1.6em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.f-end span:last-child { font-size: .8em; opacity: .9; }
@keyframes f-end { 0%, 77% { opacity: 0; transform: scale(1.04); } 81%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.f-seg { position: absolute; top: 23.6em; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 7em); padding: .3em; border-radius: .8em; background: var(--surface); border: 1px solid var(--border); }
.f-ind { position: absolute; top: .3em; left: .3em; width: 7em; height: 2.6em; border-radius: .55em; background: var(--accent-soft); box-shadow: inset 0 0 0 .1em var(--accent); transform: translateX(7em); animation-name: f-ind; }
@keyframes f-ind { 0%, 34% { transform: translateX(7em); } 39%, 52% { transform: translateX(14em); } 57%, 70% { transform: translateX(21em); } 75%, 100% { transform: translateX(7em); } }
.f-opt { position: relative; height: 2.6em; display: flex; align-items: center; justify-content: center; gap: .45em; font-size: .78em; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.f-opt i { display: block; border: .14em solid currentColor; border-radius: .15em; }
.f-scene .ptr { transform: translate(36em, 28em); animation-name: f-ptr; }
@keyframes f-ptr { 0%, 26% { transform: translate(36em, 28.5em); } 34%, 38% { transform: translate(23.4em, 25.1em); } 48%, 56% { transform: translate(30.4em, 25.1em); } 68%, 100% { transform: translate(36em, 28.5em); } }
.f-rip1 { left: 23.5em; top: 25.3em; animation-name: f-rip1; }
.f-rip2 { left: 30.5em; top: 25.3em; animation-name: f-rip2; }
@keyframes f-rip1 { 0%, 35% { opacity: 0; transform: scale(.3); } 36% { opacity: 1; } 43%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes f-rip2 { 0%, 53% { opacity: 0; transform: scale(.3); } 54% { opacity: 1; } 61%, 100% { opacity: 0; transform: scale(1.3); } }
.step h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-top: 4px; }
.step p { color: var(--text-2); font-size: 16px; }

/* Closing */
.closing { padding-block: 128px 112px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.closing h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; max-width: 18ch; }
.closing p { color: var(--text-2); }

/* Footer */
.foot { border-top: 1px solid var(--border); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; padding-bottom: 36px; font-size: 14px; color: var(--text-3); }
.foot nav { display: flex; gap: 20px; }
.foot a { color: var(--text-2); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }

/* Privacy */
.doc { max-width: 680px; margin: 0 auto; padding: 48px 24px 112px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 8px; }
.doc .meta { color: var(--text-3); font-size: 15px; margin-bottom: 40px; }
.doc h2 { font-size: 21px; letter-spacing: -.01em; margin: 40px 0 10px; }
.doc p, .doc li { color: var(--text-2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; margin: 10px 0 0; }
.doc ul + p { margin-top: 12px; }

@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .section { padding-top: 88px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .top { height: 64px; }
  .hero { padding-block: 32px 28px; gap: 16px; }
  .compare { border-radius: var(--r-md); }
  .handle { width: 48px; height: 48px; }
  .tag { top: 10px; font-size: 12px; padding: 5px 10px; }
  .tag-a { left: 10px; } .tag-b { right: 10px; }
  .closing { padding-block: 96px 88px; }
  .invite { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}