/* Landing page world: a night observation room where you watch AI agents choose.
   Each AI agent has its own signal colour; amber marks a pick, coral marks "your product".
   Layout: phone-first hero (product screens, headline, buttons), then one scene per section, each with its own backdrop
   and its own ambient motion, never repeated. Everything decorative is aria-hidden and stops for reduced motion. */

body:has(.landing-page) { background: #0b1020; }
.landing-page {
  /* Colours, fonts and the agent signal colours come from app.css (the site's world); this page only sets its size. */
  background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 16px; --shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.landing-page .nav { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-color: var(--line); }
.landing-page .footer { border-color: var(--line); }
.landing h1, .landing h2, .landing h3 { font-family: var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.landing h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; margin: 0 0 12px; }
.landing .sub { color: var(--ink-2); max-width: 60ch; margin: 0 0 28px; }
.landing .btn { border-radius: 999px; padding: 12px 20px; font-family: var(--text); min-height: 44px; }
.landing .btn.ghost { background: transparent; border-color: var(--field-border); color: var(--ink); }
.landing .btn.ghost:hover { background: var(--surface-2); }
.landing .btn.primary { color: var(--accent-ink); }
.landing input { background: var(--surface); border-color: var(--field-border); color: var(--ink); min-height: 44px; border-radius: 999px; padding: 12px 18px; }
.landing a { color: var(--accent-text); }

/* Scenes: every section is its own place, with a backdrop and an ambient light that moves. */
.scene { position: relative; overflow: hidden; isolation: isolate; padding-block: 88px; }
.scene > .wrap { position: relative; }
.backdrop, .ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- Hero ---------- */
.scene-hero { padding-block: 40px 72px; }
.scene-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 40%, rgba(140, 155, 255, .20), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(63, 208, 160, .10), transparent 70%); }
.backdrop-queries { display: flex; flex-direction: column; gap: 14px; padding: 20px 0; font-family: var(--data); font-size: clamp(1rem, 2.2vw, 1.6rem); color: var(--ink); opacity: .045; white-space: nowrap; mask-image: linear-gradient(90deg, transparent 35%, #000 70%, transparent); animation: queries-drift 90s linear infinite; }
.backdrop-queries span:nth-child(odd) { padding-left: 18vw; }
@keyframes queries-drift { to { transform: translateY(-40%); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: 'copy art'; gap: 48px; align-items: center; }
.hero-copy { grid-area: copy; min-width: 0; display: flex; flex-direction: column; }
.hero-art { grid-area: art; min-width: 0; }
.versions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.versions a { font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.versions a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
.kicker { font-family: var(--data); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.landing h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); font-weight: 800; line-height: 1.02; margin: 0 0 26px; }
.landing h1 mark { display: block; background: none; color: var(--pick); }
.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; max-width: 640px; }
.hero-form { display: flex; gap: 8px; min-width: 0; }
.hero-form input { min-width: 0; }
.final .hero-form { max-width: 520px; margin: 0 auto; }
.hero-form input { flex: 1; min-width: 0; }
.lede { font-size: 1.15rem; color: var(--ink-2); margin: 0 0 24px; max-width: 46ch; }
.facts { margin-top: 18px !important; }
.facts { font-family: var(--data); font-size: .8rem; color: var(--ink-3); margin: 0; }

/* The fan: three real screens, laid over each other. */
.fan { position: relative; height: 470px; }
.fan .screen { position: absolute; width: min(400px, 82%); transition: transform .6s ease; }
.fan .screen-transcript { left: 0; top: 0; width: 62%; transform: rotate(-4deg); opacity: .92; animation: fan-b 11s ease-in-out infinite alternate; }
.fan .screen-code { right: 0; top: 18px; width: 52%; transform: rotate(5deg); opacity: .88; animation: fan-a 9s ease-in-out infinite alternate; }
.fan .screen-report { left: 14%; top: 150px; width: 72%; transform: rotate(-1deg); animation: fan-c 10s ease-in-out infinite alternate; z-index: 2; }
@keyframes fan-a { to { transform: rotate(6deg) translate(4px, 6px); } }
@keyframes fan-b { to { transform: rotate(-5deg) translate(-4px, -4px); } }
@keyframes fan-c { to { transform: rotate(0deg) translate(0, -6px); } }

/* Screens: the app's own views, drawn in code. */
.screen { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 0 16px 14px; font-size: .86rem; color: var(--ink); text-align: left; overflow: hidden; }
.screen-bar { display: flex; align-items: center; gap: 6px; margin: 0 -16px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.screen-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.screen-bar b { margin-left: 8px; font-family: var(--data); font-weight: 500; font-size: .75rem; color: var(--ink-3); }
.sr-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sr-kpi small { display: block; font-size: .7rem; color: var(--ink-3); }
.sr-kpi strong { font-family: var(--display); font-size: 1.6rem; }
.sr-kpi div:first-child strong { color: var(--you); }
.sr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sr-bars li { display: grid; grid-template-columns: 120px 1fr 26px; gap: 8px; align-items: center; font-size: .78rem; }
.sr-bars li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sr-bars li i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--surface-2), var(--accent)); width: var(--w); min-width: 4px; }
.sr-bars li.you span { color: var(--you); font-weight: 600; }
.sr-bars li.you i { background: var(--you); }
.sr-bars li em { font-style: normal; font-family: var(--data); color: var(--ink-3); text-align: right; }
.st-req { font-weight: 600; margin: 0 0 10px; }
.st-line, .sc-file, .sc-match { font-family: var(--data); font-size: .74rem; color: var(--ink-2); margin: 0 0 6px; overflow-wrap: anywhere; }
.st-line span, .sc-file span, .sc-match span { display: inline-block; min-width: 60px; color: var(--ink-3); }
.st-line.pick, .sc-file.pick { color: var(--pick); font-weight: 500; }
.st-answer { font-size: .8rem; color: var(--ink-2); margin: 6px 0 8px; }

/* ---------- Trailer ---------- */
.scene-film { padding-block: 24px 80px; }
.amb-sweep::before { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(140, 155, 255, .07), transparent); animation: sweep 7s linear infinite; }
@keyframes sweep { from { top: -40%; } to { top: 100%; } }
.trailer { margin: 0; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, #0f1730, #0b1020); padding: 28px; position: relative; box-shadow: var(--shadow); }
.tr-stage { position: relative; min-height: 320px; }
.tr-request { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); font-size: 1.05rem; }
.tr-request .who { font-family: var(--data); font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.tr-request .typed { clip-path: inset(0 100% 0 0); }
.tr-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.tr-lane { border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 12px; padding: 12px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; opacity: .25; transition: opacity .6s; }
.tr-lane b { font-size: .85rem; color: var(--c); }
.tr-work span { display: block; font-family: var(--data); font-size: .72rem; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: all .6s; overflow-wrap: anywhere; }
.tr-pick { margin-top: auto; align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--pick); color: #1b1400; font-weight: 600; font-size: .82rem; opacity: 0; transform: scale(.8); transition: all .5s cubic-bezier(.2, 1.4, .4, 1); }
.lane-gpt { --c: var(--gpt); } .lane-claude { --c: var(--claude); } .lane-gemini { --c: var(--gemini); } .lane-coder { --c: var(--coder); }
.tr-match, .tr-end { position: absolute; inset: auto 0 0 0; display: flex; gap: 10px; align-items: baseline; justify-content: center; flex-wrap: wrap; font-family: var(--data); color: var(--ink-3); opacity: 0; transition: opacity .6s; }
.tr-match strong { font-family: var(--display); font-size: 2rem; color: var(--coder); }
.tr-end { inset: 0; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, rgba(11, 16, 32, .95), rgba(11, 16, 32, .85)); border-radius: 14px; }
.tr-end strong { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--pick); }
.tr-captions { margin-top: 18px; text-align: center; font-family: var(--display); font-size: 1.25rem; min-height: 1.6em; }
.tr-captions span { display: none; }
/* Beats, set by landing.js as data-beat on the figure. Each beat keeps what the last one built. */
.trailer[data-beat] .tr-request .typed { animation: type 2.4s steps(40, end) forwards; }
.trailer[data-beat="1"] .tr-lane, .trailer[data-beat="2"] .tr-lane, .trailer[data-beat="3"] .tr-lane, .trailer[data-beat="4"] .tr-lane, .trailer[data-beat="5"] .tr-lane { opacity: 1; }
.trailer[data-beat="2"] .w-search, .trailer[data-beat="3"] .w-search, .trailer[data-beat="4"] .w-search, .trailer[data-beat="5"] .w-search,
.trailer[data-beat="2"] .w-read, .trailer[data-beat="3"] .w-read, .trailer[data-beat="4"] .w-read, .trailer[data-beat="5"] .w-read { opacity: 1; transform: none; }
.trailer[data-beat="3"] .lane-coder { box-shadow: 0 0 0 2px var(--coder); }
.trailer[data-beat="4"] .tr-match { opacity: 1; }
.trailer[data-beat="4"] .tr-lanes { opacity: .35; }
.trailer[data-beat="5"] .tr-pick { opacity: 1; transform: none; }
.trailer[data-beat="5"] .lane-claude .tr-pick { transition-delay: .3s; } .trailer[data-beat="5"] .lane-gemini .tr-pick { transition-delay: .6s; } .trailer[data-beat="5"] .lane-coder .tr-pick { transition-delay: .9s; }
.trailer[data-beat="6"] .tr-end { opacity: 1; }
.trailer[data-beat="6"] .tr-lane { opacity: 1; } .trailer[data-beat="6"] .tr-pick { opacity: 1; transform: none; }
.trailer[data-beat="0"] .tr-captions span:nth-child(1), .trailer[data-beat="1"] .tr-captions span:nth-child(2), .trailer[data-beat="2"] .tr-captions span:nth-child(3),
.trailer[data-beat="3"] .tr-captions span:nth-child(4), .trailer[data-beat="4"] .tr-captions span:nth-child(5), .trailer[data-beat="5"] .tr-captions span:nth-child(6), .trailer[data-beat="6"] .tr-captions span:nth-child(7) { display: inline; animation: cap-in .6s ease; }
.trailer:not([data-beat]) .tr-captions span:nth-child(7) { display: inline; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } }
/* Poster (before it plays, and for reduced motion): the finished picture. */
.trailer:not([data-beat]) .typed { clip-path: none; }
.trailer:not([data-beat]) .tr-lane { opacity: 1; }
.trailer:not([data-beat]) .tr-work span, .trailer:not([data-beat]) .tr-pick { opacity: 1; transform: none; }

/* ---------- How it works ---------- */
.backdrop-requests { display: flex; flex-wrap: wrap; gap: 12px 28px; align-content: center; justify-content: center; padding: 20px; font-family: var(--display); font-size: clamp(1rem, 2vw, 1.6rem); color: var(--ink); opacity: .03; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.amb-rays { background: conic-gradient(from 200deg at 50% -10%, transparent, rgba(255, 209, 102, .10), transparent 20%, rgba(140, 155, 255, .10), transparent 40%); animation: rays 40s linear infinite; transform-origin: 50% 0; }
@keyframes rays { 50% { transform: rotate(8deg); } }
.steps3 { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps3 li { padding: 24px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); }
.steps3 h3 { font-size: 1.3rem; margin: 6px 0 6px; }
.steps3 p { margin: 0; color: var(--ink-2); }
.step-n { font-family: var(--data); font-size: .75rem; color: var(--ink-3) !important; text-transform: uppercase; letter-spacing: .08em; }
.step-ico { position: relative; width: 64px; height: 48px; margin-bottom: 14px; }
.step-ico span { position: absolute; border-radius: 4px; }
.ico-write span { left: 0; height: 6px; background: var(--accent); animation: ico-line 3s ease-in-out infinite; }
.ico-write span:nth-child(1) { top: 6px; width: 60px; } .ico-write span:nth-child(2) { top: 20px; width: 44px; animation-delay: .4s; } .ico-write span:nth-child(3) { top: 34px; width: 52px; animation-delay: .8s; }
@keyframes ico-line { 0% { transform: scaleX(0); transform-origin: left; } 40%, 80% { transform: scaleX(1); transform-origin: left; } 100% { transform: scaleX(0); transform-origin: right; } }
.ico-fan span { width: 14px; height: 14px; border-radius: 50%; animation: ico-pop 2.4s ease-in-out infinite; }
.ico-fan span:nth-child(1) { left: 0; top: 17px; background: var(--gpt); } .ico-fan span:nth-child(2) { left: 25px; top: 4px; background: var(--claude); animation-delay: .3s; } .ico-fan span:nth-child(3) { left: 48px; top: 26px; background: var(--gemini); animation-delay: .6s; }
@keyframes ico-pop { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
.ico-pick span { height: 22px; top: 12px; border-radius: 999px; }
.ico-pick span:nth-child(1) { left: 0; width: 64px; background: var(--surface-2); } .ico-pick span:nth-child(2) { left: 4px; width: 30px; background: var(--pick); animation: ico-slide 3s ease-in-out infinite; } .ico-pick span:nth-child(3) { display: none; }
@keyframes ico-slide { 50% { transform: translateX(26px); } }

/* ---------- Ask the agents ---------- */
.backdrop-fingerprints { overflow: hidden; }
.backdrop-fingerprints span { position: absolute; inset: 0; font-family: var(--data); font-size: 11px; line-height: 1.6; color: var(--coder); opacity: .07; word-break: break-all; }
.amb-leds { background-image: radial-gradient(circle, rgba(196, 155, 255, .35) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); animation: leds 3.2s steps(2) infinite; opacity: .5; }
@keyframes leds { 50% { opacity: .2; } }
.ask { border: 1px solid var(--line); border-radius: 22px; padding: 24px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ask-open { font-size: 1.05rem; }
.ask-panel { margin-top: 20px; }
.ask-pick { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ask-pick legend { font-weight: 600; margin-bottom: 10px; }
.ask-req { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: .88rem; cursor: pointer; color: var(--ink-2); }
.ask-req input { margin-top: 3px; width: auto; min-height: 0; }
.ask-req:has(input:checked) { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.ask-stage { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; margin-top: 18px; }
.ask-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ask-lane { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 12px; padding: 12px; min-height: 150px; display: flex; flex-direction: column; }
.ask-lane b { color: var(--c); font-size: .9rem; }
.ask-lane ol { list-style: none; margin: 8px 0; padding: 0; font-family: var(--data); font-size: .74rem; color: var(--ink-2); display: grid; gap: 4px; }
.ask-lane ol li { animation: cap-in .4s ease both; overflow-wrap: anywhere; }
.ask-lane ol li em { font-style: normal; color: var(--ink-3); }
.ask-pickchip { margin-top: auto; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--pick); color: #1b1400; font-weight: 600; font-size: .82rem; }
.ask-pickchip:empty { display: none; }
.ask-machine { border: 1px dashed var(--line); border-radius: 12px; padding: 14px; font-size: .82rem; }
.ask-machine h3 { font-size: .95rem; margin: 0 0 8px; }
.ask-machine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--data); color: var(--ink-2); }
.ask-machine li::before { content: '○ '; color: var(--ink-3); }
.ask-machine li.on::before { content: '● '; color: var(--gpt); }
.ask-end { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--accent-soft); }
.ask-sum { font-family: var(--display); font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }

/* ---------- Look inside ---------- */
.amb-haze { background: radial-gradient(40% 50% at 20% 30%, rgba(121, 166, 255, .14), transparent 70%), radial-gradient(40% 50% at 80% 70%, rgba(239, 154, 110, .10), transparent 70%); animation: haze 24s ease-in-out infinite alternate; }
@keyframes haze { to { transform: translateX(-6%) scale(1.06); } }
.shelf { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(16px, calc((100vw - 1120px) / 2 + 20px)) 24px; scrollbar-width: thin; }
.shot { flex: 0 0 min(380px, 82vw); margin: 0; scroll-snap-align: center; }
.shot .screen { height: 360px; }
.shot figcaption { margin-top: 10px; color: var(--ink-3); font-size: .88rem; }
.sw-head { font-weight: 600; margin: 0 0 10px; }
.screen-why ol, .screen-fixes ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2); }
.screen-fixes li span { display: block; font-family: var(--data); font-size: .72rem; color: var(--ink-3); }
.screen-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.screen-checks li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); }
.screen-checks li span { flex: none; width: 46px; font-family: var(--data); font-size: .7rem; text-align: center; border-radius: 6px; padding: 1px 0; }
.screen-checks li.pass span { background: rgba(63, 208, 160, .15); color: var(--gpt); }
.screen-checks li.warn span { background: rgba(255, 209, 102, .15); color: var(--pick); }
.screen-checks li.fail span { background: rgba(255, 122, 138, .15); color: var(--you); }

/* ---------- Reasons and their films ---------- */
.amb-aurora { background: linear-gradient(120deg, rgba(63, 208, 160, .08), rgba(121, 166, 255, .10), rgba(196, 155, 255, .08), rgba(63, 208, 160, .08)); background-size: 300% 300%; animation: aurora 30s ease-in-out infinite; }
@keyframes aurora { 50% { background-position: 100% 50%; } }
.lp-reason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; margin-top: 56px; }
.lp-reason.flip .reason-text { order: 2; }
.reason-n { font-family: var(--data); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pick); margin: 0 0 8px; }
.lp-reason h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.12; margin: 0 0 14px; }
.reason-num { color: var(--ink-2); margin: 0; }
.reason-num strong { font-family: var(--display); font-size: 1.6rem; color: var(--ink); margin-right: 6px; }
.film { position: relative; }
.reason-film { min-height: 280px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); padding: 22px; overflow: hidden; box-shadow: var(--shadow); }
.reason-film:not(.playing) * { animation-play-state: paused !important; }
/* split: two columns of real picks peel apart */
.f-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; height: 100%; }
.f-split .col { display: grid; gap: 8px; align-content: start; }
.f-split b { font-size: .85rem; color: var(--ink-3); font-weight: 500; }
.f-split .col:first-child b { color: var(--coder); } .f-split .col:last-child b { color: var(--gpt); }
.f-split span { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 600; animation: split-l 6s ease-in-out infinite; }
.f-split .col:last-child span { animation-name: split-r; }
.f-split span:nth-child(5) { background: rgba(255, 209, 102, .16); animation: none; }
.f-split strong { grid-column: 1 / -1; justify-self: end; font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--pick); }
@keyframes split-l { 50% { transform: translateX(-10px) rotate(-1.5deg); } }
@keyframes split-r { 50% { transform: translateX(10px) rotate(1.5deg); } }
/* morph: the plain request fades into the one-tool request, and the meter climbs */
.f-morph { display: grid; gap: 14px; }
.f-morph p { margin: 0; font-family: var(--display); font-size: 1.25rem; grid-area: 1 / 1; }
.f-morph .a { animation: morph-a 8s ease-in-out infinite; } .f-morph .b { opacity: 0; color: var(--pick); animation: morph-b 8s ease-in-out infinite; }
@keyframes morph-a { 0%, 40% { opacity: 1; filter: none; } 50%, 90% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; } }
@keyframes morph-b { 0%, 40% { opacity: 0; filter: blur(4px); } 50%, 90% { opacity: 1; filter: none; } 100% { opacity: 0; } }
.f-morph .meter { height: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.f-morph p { min-height: 3.2em; }
.f-morph .meter i { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--accent), var(--pick)); animation: meter 8s ease-in-out infinite; }
@keyframes meter { 0%, 40% { width: 8%; } 50%, 90% { width: 67%; } 100% { width: 8%; } }
.f-morph span { font-family: var(--data); font-size: .8rem; color: var(--ink-3); }
.f-morph .hi { color: var(--pick); }
/* swap: the two names trade places; the verdict stays put */
.f-swap { position: relative; height: 230px; display: grid; place-items: center; }
.f-swap span { position: absolute; top: 40px; padding: 12px 18px; border-radius: 14px; font-family: var(--display); font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.f-swap .n1 { left: 6%; background: var(--surface-2); animation: swap-1 6s ease-in-out infinite; }
.f-swap .n2 { right: 6%; background: rgba(255, 122, 138, .14); color: var(--you); animation: swap-2 6s ease-in-out infinite; }
.f-swap .vs { left: 50%; transform: translateX(-50%); color: var(--ink-3); font-family: var(--data); font-size: .9rem; padding: 0; }
.f-swap strong { position: absolute; bottom: 20px; font-family: var(--data); font-weight: 500; color: var(--pick); border: 1px solid var(--pick); border-radius: 999px; padding: 6px 14px; }
@keyframes swap-1 { 40%, 60% { left: 58%; } }
@keyframes swap-2 { 40%, 60% { right: 58%; } }
/* slots: a store's app slots fill with Shopify's own tools */
.f-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; }
.f-slots b { grid-column: 1 / -1; color: var(--ink-3); font-weight: 500; font-size: .85rem; }
.f-slots span { height: 70px; border-radius: 12px; border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; position: relative; }
.f-slots em { font-style: normal; font-size: .8rem; color: var(--ink-3); }
.f-slots i { position: absolute; inset: 6px; border-radius: 8px; background: rgba(63, 208, 160, .18); color: var(--gpt); font-style: normal; font-weight: 700; display: grid; place-items: center; opacity: 0; animation: slot 7s ease-in-out infinite; }
.f-slots span:nth-of-type(2) i { animation-delay: .5s; } .f-slots span:nth-of-type(3) i { animation-delay: 1s; } .f-slots span:nth-of-type(4) i { animation-delay: 1.5s; } .f-slots span:nth-of-type(5) i { animation-delay: 2s; }
.f-slots span:nth-of-type(6) i { animation: none; }
.f-slots strong { grid-column: 1 / -1; font-family: var(--display); font-size: 2.6rem; color: var(--gpt); }
@keyframes slot { 0%, 15% { opacity: 0; transform: scale(.8); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* scatter: one request bursts into many niche tools */
.f-scatter { position: relative; height: 240px; }
.f-scatter b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); z-index: 1; white-space: nowrap; }
.f-scatter span { position: absolute; left: 50%; top: 50%; font-weight: 600; font-size: .85rem; color: var(--gemini); white-space: nowrap; animation: scatter 9s ease-in-out infinite; --a: calc(var(--k) * 30deg); }
@keyframes scatter { 0%, 10% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))); opacity: 0; } 35%, 85% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(150px) rotate(calc(-1 * var(--a))); opacity: 1; } 100% { opacity: 0; } }
/* race: bars grow, the leader runs away */
.f-race { display: grid; gap: 16px; padding-top: 20px; }
.f-race p { display: grid; grid-template-columns: 130px 1fr 30px; gap: 10px; align-items: center; margin: 0; }
.f-race i { height: 18px; border-radius: 99px; background: linear-gradient(90deg, var(--surface-2), var(--accent)); width: var(--w); animation: race 6s cubic-bezier(.2, .8, .2, 1) infinite; transform-origin: left; }
.f-race p.you span, .f-race p.you em { color: var(--you); } .f-race p.you i { background: var(--you); }
.f-race em { font-style: normal; font-family: var(--data); }
@keyframes race { 0% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .4; } }

/* ---------- Made for, proof, offer, questions, final ---------- */
.amb-stars { background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #fff, transparent), radial-gradient(1px 1px at 85% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 55%, #fff, transparent); opacity: .35; animation: stars 5s ease-in-out infinite alternate; }
@keyframes stars { to { opacity: .12; } }
.for-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.for-list a { display: block; height: 100%; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); text-decoration: none; }
.for-list a:hover { border-color: var(--accent); }
.for-list b { display: block; font-family: var(--display); font-size: 1.3rem; margin-bottom: 6px; }
.for-list span { color: var(--ink-2); }
.for-list li.here a { border-color: var(--pick); }
.amb-sparks::before, .amb-sparks::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--pick); box-shadow: 120px 40px 0 var(--pick), 300px 140px 0 var(--accent), 520px 60px 0 var(--pick), 760px 160px 0 var(--accent), 980px 90px 0 var(--pick); opacity: .5; animation: sparks 6s ease-in-out infinite; left: 4%; top: 30%; }
.amb-sparks::after { top: 70%; left: 10%; animation-delay: -3s; }
@keyframes sparks { 50% { transform: translateY(-24px); opacity: .1; } }
.proof { list-style: none; padding: 0; margin: 24px 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.proof strong { display: block; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--pick); }
.proof span { color: var(--ink-2); font-size: .95rem; }
.scene-offer { padding-block: 88px; }
.amb-glow { background: radial-gradient(50% 60% at 50% 0%, rgba(140, 155, 255, .12), transparent 70%); animation: glow 12s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: .5; } }
.scene-offer .price-card { background: var(--surface); }
.amb-ripple { background: repeating-radial-gradient(circle at 50% 120%, transparent 0 40px, rgba(121, 166, 255, .05) 40px 42px); animation: ripple 14s linear infinite; }
@keyframes ripple { to { background-position: 0 -84px; } }
.narrow-wrap { max-width: 760px; }
.landing .faq details { border-color: var(--line); }
.landing .faq p { color: var(--ink-2); }
.amb-embers { background: radial-gradient(60% 80% at 50% 110%, rgba(255, 209, 102, .16), transparent 70%); animation: embers 9s ease-in-out infinite alternate; }
@keyframes embers { to { transform: scale(1.08); opacity: .7; } }
.final { text-align: center; display: grid; justify-items: center; gap: 6px; }
.final h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--pick); }
.final p { color: var(--ink-2); margin: 0 0 16px; }
.final .hero-form { width: 100%; }

/* Buy bar: phones only, after the hero buttons scroll away, hidden over the offer. */
.buybar { display: none; }
@media (max-width: 760px) {
  .buybar:not([hidden]) { display: flex; gap: 8px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .buybar span { display: none; }
  .buybar .btn { flex: 1; padding: 10px; }
}

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: 'art' 'copy'; gap: 8px; }
  .fan { height: 430px; max-width: 560px; margin: 0 auto; }
  .steps3, .for-list, .proof { grid-template-columns: 1fr; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-reason, .lp-reason.flip { grid-template-columns: 1fr; gap: 20px; }
  .lp-reason.flip .reason-text { order: 0; }
  .ask-stage { grid-template-columns: 1fr; }
  .ask-pick { grid-template-columns: 1fr; }
  .tr-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .scene { padding-block: 56px; }
  .scene-hero { padding-block: 8px 40px; }
  .landing h1 { font-size: 30px; margin-bottom: 16px; }
  .versions { margin-bottom: 12px; }
  .versions a { font-size: .78rem; padding: 5px 10px; }
  .kicker { display: none; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-form { flex-direction: column; }
  .hero-actions .btn.ghost { width: 100%; }
  .lede { font-size: 1rem; margin-top: 16px; }
  .fan { height: auto; transform: none; margin: 0 0 18px; }
  .fan .screen-code, .fan .screen-transcript { display: none; }
  .fan .screen-report { position: static; width: 100%; transform: none; animation: none; }
  .versions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .versions a { flex: none; }
  .hero-copy .lede { order: 3; margin: 18px 0 0; }
  .hero-copy .facts { order: 4; }
  .ask-lanes { grid-template-columns: 1fr; }
  .trailer { padding: 16px; }
  .tr-lanes { gap: 8px; }
  .tr-lane { min-height: 120px; padding: 10px; }
  .proof strong { font-size: 2.2rem; }
  .reason-film { min-height: 240px; }
  .backdrop-requests { display: none; }
  .f-swap span { left: 50% !important; right: auto !important; transform: translateX(-50%); }
  .f-swap .n1 { top: 20px; animation: swap-1v 6s ease-in-out infinite; }
  .f-swap .n2 { top: 110px; animation: swap-2v 6s ease-in-out infinite; }
  .f-swap .vs { top: 76px; }
  @keyframes swap-1v { 25% { transform: translateX(-100%); } 40%, 60% { top: 110px; transform: translateX(-50%); } }
  @keyframes swap-2v { 25% { transform: translateX(0%); } 40%, 60% { top: 20px; transform: translateX(-50%); } }
  .f-swap { height: 270px; }
  .f-swap strong { bottom: 14px; }
  .f-race p { grid-template-columns: 96px 1fr 26px; font-size: .85rem; }
  .f-scatter span { animation-name: scatter-sm; }
  @keyframes scatter-sm { 0%, 10% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))); opacity: 0; } 35%, 85% { transform: translate(-50%, -50%) rotate(var(--a)) translateX(105px) rotate(calc(-1 * var(--a))); opacity: 1; } 100% { opacity: 0; } }
}

/* Reduced motion: every animation stops on a readable, finished picture. */
/* ---------- The platform ---------- */
.amb-drift { background: radial-gradient(30% 40% at 15% 40%, rgba(63, 208, 160, .12), transparent 70%), radial-gradient(30% 40% at 85% 60%, rgba(196, 155, 255, .12), transparent 70%); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { background-position: 12% -8%, -12% 8%; transform: scale(1.04); } }
.platform { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: pl; }
.platform li { position: relative; padding: 24px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); }
.platform li:not(:last-child)::after { content: ''; position: absolute; top: 48px; right: -20px; width: 20px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.platform h3 { font-size: 1.5rem; margin: 6px 0; }
.platform p { margin: 0; color: var(--ink-2); }
.platform .pl-where { margin-top: 14px; font-family: var(--data); font-size: .8rem; color: var(--pick); }
.pl-ico { position: relative; width: 64px; height: 48px; margin-bottom: 14px; }
.pl-ico span { position: absolute; border-radius: 50%; }
.pl-check span { width: 14px; height: 14px; top: 17px; background: var(--accent); animation: pl-scan 3.6s ease-in-out infinite; }
.pl-check span:nth-child(1) { left: 0; } .pl-check span:nth-child(2) { left: 24px; animation-delay: .5s; } .pl-check span:nth-child(3) { left: 48px; animation-delay: 1s; background: var(--pick); }
@keyframes pl-scan { 0%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
.pl-fix span { left: 0; height: 8px; border-radius: 4px; background: var(--ink-3); animation: pl-fix 4s ease-in-out infinite; }
.pl-fix span:nth-child(1) { top: 4px; width: 40px; } .pl-fix span:nth-child(2) { top: 20px; width: 56px; animation-delay: .6s; } .pl-fix span:nth-child(3) { top: 36px; width: 32px; animation-delay: 1.2s; }
@keyframes pl-fix { 0%, 30% { background: var(--ink-3); } 50%, 90% { background: var(--pick); } }
.pl-watch span { bottom: 4px; width: 12px; border-radius: 3px; background: var(--accent); transform-origin: bottom; animation: pl-grow 4.4s ease-in-out infinite; }
.pl-watch span:nth-child(1) { left: 0; height: 14px; } .pl-watch span:nth-child(2) { left: 22px; height: 26px; animation-delay: .4s; } .pl-watch span:nth-child(3) { left: 44px; height: 40px; animation-delay: .8s; background: var(--pick); }
@keyframes pl-grow { 0% { transform: scaleY(.2); } 40%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.2); } }
@media (max-width: 760px) { .platform { grid-template-columns: 1fr; } .platform li:not(:last-child)::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; }
  .f-morph .a { opacity: 0; } .f-morph .b { opacity: 1; filter: none; } .f-morph .meter i { width: 67%; }
  .f-slots i { opacity: 1; }
  .f-scatter span { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(110px) rotate(calc(-1 * var(--a))); }
}