:root {
  color-scheme: light;
  --ink: #111a3a;
  --ink-soft: #45506e;
  --blue: #3156e8;
  --blue-deep: #2447cf;
  --violet: #7655e8;
  --mint: #47c6a3;
  --orange: #f08a42;
  --yellow: #f2b84b;
  --canvas: #fdf8eb;
  --paper: #fffdfb;
  --porcelain: #f7f2eb;
  --line: rgba(17, 26, 58, 0.1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-shell: 0 32px 90px rgba(47, 44, 60, 0.12), 0 2px 4px rgba(87, 65, 46, 0.05);
  --shadow-float: 0 14px 34px rgba(41, 37, 68, 0.12), 0 2px 3px rgba(87, 65, 46, 0.06);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--ink); background: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(49,86,232,.35); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.demo-page { min-height: 100vh; display: grid; place-items: center; padding: clamp(12px,2vw,30px); background: var(--canvas); }
.product-film {
  position: relative;
  isolation: isolate;
  width: min(100%,1440px);
  min-height: min(900px,calc(100vh - 24px));
  overflow: hidden;
  padding: clamp(18px,3vw,44px);
  border-radius: clamp(28px,3.2vw,48px);
  background: transparent;
}

.product-shell { width: 100%; max-width: 1330px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(17,26,58,.1); border-radius: 30px; background: rgba(255,253,251,.94); box-shadow: var(--shadow-shell); }
.product-header { min-height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(255,253,251,.88); }
.product-brand { display: inline-flex; width: max-content; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand-orbit { width: 36px; height: 36px; color: var(--blue); }
.product-brand > span { font-size: 17px; font-weight: 780; letter-spacing: -.05em; }
.journey-progress { display: flex; align-items: center; gap: 11px; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.journey-label { color: var(--ink); }
.progress-dots { display: flex; gap: 5px; }
.progress-dots i { width: 18px; height: 4px; border-radius: 999px; background: #dddde6; transition: background 400ms ease; }
.journey-step { min-width: 88px; color: #677089; font-size: 10px; font-variant-numeric: tabular-nums; }
.privacy-state { justify-self: end; display: flex; align-items: center; gap: 7px; margin: 0; color: #66708a; font-size: 10px; font-weight: 650; }
.privacy-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(71,198,163,.12); }

.product-canvas { padding: 32px 34px 28px; background: linear-gradient(180deg,#fffdfa,#fbfaf7); }
.canvas-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 20px; }
.product-kicker,.section-label { margin: 0; color: var(--blue); font-size: 9px; font-weight: 780; letter-spacing: .15em; text-transform: uppercase; }
.canvas-heading h1 { max-width: 720px; margin: 7px 0 0; font-size: clamp(25px,3vw,38px); font-weight: 690; letter-spacing: -.055em; line-height: 1.03; }
.live-state { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px; padding: 8px 11px; border: 1px solid rgba(17,26,58,.08); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.66); font-size: 10px; font-weight: 650; white-space: nowrap; }
.live-state > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(71,198,163,.12); }

.discovery-field { position: relative; display: grid; grid-template-columns: minmax(290px,.9fr) minmax(185px,.55fr) minmax(380px,1.2fr); min-height: 470px; overflow: hidden; border: 1px solid rgba(17,26,58,.085); border-radius: 24px; background: linear-gradient(90deg,rgba(243,247,255,.84),rgba(255,253,248,.94) 56%,rgba(239,251,247,.78)); box-shadow: inset 0 1px rgba(255,255,255,.94); }
.discovery-field::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(90deg,transparent 30.4%,rgba(17,26,58,.05) 30.5%,transparent 30.6%,transparent 49.1%,rgba(17,26,58,.05) 49.2%,transparent 49.3%); }
.flow-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.need-flow,.intro-flow { fill: none; stroke: url(#flow-blue); stroke-width: 2.7; stroke-linecap: round; stroke-dasharray: 4 10; opacity: .3; }
.flow-signal { opacity: 0; }
.need-studio,.fit-studio,.introductions { position: relative; z-index: 2; min-width: 0; }

.need-studio { padding: 23px 20px; }
.section-heading,.introductions-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.section-heading h2,.introductions-heading h2 { margin: 5px 0 0; font-size: 18px; font-weight: 710; letter-spacing: -.035em; line-height: 1.1; }
.profile-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid rgba(49,86,232,.1); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.72); font-size: 8px; font-weight: 700; white-space: nowrap; }
.profile-chip i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: 9px; font-style: normal; }

.conversation { display: grid; gap: 10px; margin-top: 20px; }
.message { display: grid; grid-template-columns: 27px 1fr; gap: 8px; margin: 0; opacity: 1; transition: opacity 620ms ease, transform 700ms var(--ease-out); }
.message p { width: fit-content; max-width: 250px; margin: 0; padding: 9px 11px; border: 1px solid rgba(17,26,58,.07); border-radius: 5px 15px 15px 15px; color: var(--ink-soft); background: rgba(255,255,255,.76); font-size: 9px; line-height: 1.42; }
.message.request-one,.message.request-two { margin-left: 24px; }
.speaker-mark,.sphere-mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 10px; color: white; background: var(--blue); font-size: 9px; font-weight: 780; }
.sphere-mark { border: 1px solid rgba(49,86,232,.12); background: rgba(255,255,255,.9); box-shadow: 0 5px 13px rgba(41,37,68,.08); }
.sphere-mark img { display: block; width: 23px; height: 23px; }
.assistant-one p { color: #3d4770; background: #f1f3ff; }

.need-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.need-summary span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 5px; border: 1px solid rgba(49,86,232,.09); border-radius: 999px; color: #4b5674; background: rgba(255,255,255,.72); font-size: 8px; font-weight: 690; transition: opacity 580ms ease, transform 680ms var(--ease-out); }
.need-summary i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--blue); background: #e9edff; font-size: 7px; font-style: normal; font-weight: 800; }
.need-summary .goal-icon { color: var(--violet); background: #f0ebff; }
.need-summary .time-icon { color: #d36527; background: #fff0e4; }
.need-summary .near-icon,.need-summary .group-icon { color: #20886a; background: #e7f8f2; }

.fit-studio { display: flex; flex-direction: column; align-items: center; padding-top: 23px; }
.fit-engine { position: absolute; top: 115px; left: 50%; width: 190px; height: 190px; transform: translateX(-50%); transition: opacity 580ms ease, transform 720ms var(--ease-out), filter 650ms ease; }
.fit-orbit,.fit-core,.fit-node { position: absolute; border-radius: 50%; }
.fit-orbit { inset: 50%; border: 1px solid rgba(49,86,232,.15); transform: translate(-50%,-50%); }
.fit-orbit.orbit-one { width: 184px; height: 184px; }
.fit-orbit.orbit-two { width: 136px; height: 136px; border-style: dashed; }
.fit-orbit.orbit-three { width: 92px; height: 92px; border-color: rgba(71,198,163,.26); }
.fit-core { top: 50%; left: 50%; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(49,86,232,.16); background: linear-gradient(145deg,#fff,#eaefff); box-shadow: var(--shadow-float); transform: translate(-50%,-50%); }
.fit-core::before { position: absolute; inset: 9px; border: 1px dashed rgba(49,86,232,.2); border-radius: 50%; content: ""; }
.fit-core i { position: absolute; top: 8px; right: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.fit-core strong { color: var(--blue); font-size: 10px; letter-spacing: .08em; }
.fit-node { display: grid; min-width: 38px; height: 25px; place-items: center; padding: 0 7px; border: 3px solid #fff; color: white; box-shadow: 0 6px 15px rgba(49,60,89,.12); font-size: 7px; font-weight: 750; }
.node-goal { top: 4px; left: 76px; background: var(--violet); }
.node-level { top: 42px; right: -7px; background: var(--blue); }
.node-time { right: 2px; bottom: 34px; background: var(--orange); }
.node-place { bottom: -3px; left: 72px; background: var(--mint); }
.node-group { bottom: 35px; left: -7px; background: var(--blue); }
.node-space { top: 44px; left: -10px; background: var(--mint); }
.fit-note { position: absolute; top: 340px; width: 180px; margin: 0; color: var(--ink-soft); font-size: 9px; font-weight: 650; line-height: 1.45; text-align: center; }
.fit-note::before { display: block; width: 28px; height: 2px; margin: 0 auto 9px; border-radius: 2px; background: linear-gradient(90deg,var(--blue),var(--mint)); content: ""; }

.introductions { padding: 23px 20px; }
.intro-count { padding: 5px 8px; border-radius: 999px; color: #278368; background: rgba(71,198,163,.11); font-size: 8px; font-weight: 730; white-space: nowrap; }
.primary-introduction { position: relative; margin-top: 15px; padding: 14px; border: 1px solid rgba(49,86,232,.12); border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 17px 36px rgba(44,42,70,.08); transition: opacity 620ms ease, transform 740ms var(--ease-out); }
.primary-introduction::before { position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--blue),var(--mint)); content: ""; }
.coach-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.portrait-wrap { position: relative; }
.portrait-wrap img,.secondary-introduction > img { display: block; width: 43px; height: 43px; object-fit: cover; border: 3px solid white; border-radius: 15px; box-shadow: 0 7px 17px rgba(41,37,68,.14); }
.portrait-wrap > span { position: absolute; right: -4px; bottom: -4px; display: grid; width: 18px; height: 18px; place-items: center; border: 3px solid white; border-radius: 50%; color: white; background: var(--blue); font-size: 7px; font-weight: 800; }
.coach-name p,.secondary-introduction p { margin: 0 0 2px; color: var(--blue); font-size: 8px; font-weight: 730; }
.coach-name h3 { margin: 0; font-size: 17px; letter-spacing: -.035em; }
.coach-name > span { color: #778097; font-size: 8px; }
.fit-score { padding: 5px 7px; border-radius: 999px; color: #267c64; background: #e9f9f3; font-size: 8px; font-weight: 740; }
.why-fit { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.why-fit span { display: inline-flex; align-items: center; gap: 4px; color: #4e5875; font-size: 8px; font-weight: 650; }
.why-fit i { color: var(--mint); font-style: normal; font-weight: 900; }
.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(17,26,58,.075); }
.trust-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; }
.trust-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; color: #276f5b; background: #eaf8f3; font-size: 7px; font-weight: 770; }
.trust-badge i { font-style: normal; }
.trust-rated .trust-badge { color: #9f6621; background: #fff4df; }
.trust-item p { display: grid; margin: 0; }
.trust-item strong { font-size: 8px; }
.trust-item small { color: #8990a2; font-size: 7px; }
.fit-reason { margin: 10px 0; color: var(--ink-soft); font-size: 8px; line-height: 1.45; }
.fit-reason strong { color: var(--ink); }
.connect-action { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 0 11px; border-radius: 11px; color: white; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); box-shadow: 0 9px 20px rgba(49,86,232,.18); font-size: 9px; font-weight: 700; }
.connect-action i { font-size: 14px; font-style: normal; }

.secondary-introduction { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: 9px; padding: 9px 10px; border: 1px solid rgba(17,26,58,.075); border-radius: 16px; background: rgba(255,255,255,.58); transition: opacity 620ms ease, transform 720ms var(--ease-out); }
.secondary-introduction > img { width: 36px; height: 36px; border-radius: 12px; }
.secondary-introduction div { display: grid; }
.secondary-introduction strong { font-size: 10px; }
.secondary-introduction small { color: #7d8599; font-size: 7px; }
.new-badge { padding: 5px 7px; border-radius: 999px; color: #6248b5; background: #eee9ff; font-size: 7px; font-weight: 760; }
.new-context { grid-column: 1 / -1; display: grid; margin: 3px 0 0 !important; padding-top: 7px; border-top: 1px solid rgba(17,26,58,.06); color: var(--ink-soft) !important; font-size: 7px !important; }
.new-context small { margin-top: 1px; }

.signup-gate { position: absolute; right: 14px; bottom: 13px; left: 14px; z-index: 4; padding: 12px; border: 1px solid rgba(49,86,232,.14); border-radius: 17px; background: rgba(255,253,251,.97); box-shadow: 0 18px 45px rgba(37,45,84,.18); opacity: 1; transform: none; transition: opacity 600ms ease, transform 720ms var(--ease-out); }
.gate-copy { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.gate-check { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; color: white; background: var(--mint); font-size: 12px; font-weight: 800; }
.gate-copy p { display: grid; margin: 0; }
.gate-copy strong { font-size: 9px; }
.gate-copy small { color: #768098; font-size: 7px; }
.email-preview { display: flex; min-height: 34px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 5px 0 11px; border: 1px solid rgba(17,26,58,.09); border-radius: 11px; color: #8b91a3; background: #fff; font-size: 8px; }
.email-preview i { padding: 7px 9px; border-radius: 8px; color: white; background: var(--blue); font-style: normal; font-weight: 720; }
.signup-gate > p { margin: 6px 0 0; color: #7e869a; font-size: 7px; text-align: center; }

.film-footer { max-width: 1330px; min-height: 58px; display: grid; grid-template-columns: 1fr minmax(180px,360px) 1fr; align-items: center; gap: 24px; margin: 0 auto; padding: 13px 8px 0; }
.film-footer > p { display: flex; align-items: center; gap: 9px; margin: 0; color: #626b83; font-size: 11px; font-weight: 670; }
.preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(71,198,163,.1); }
.film-progress { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(17,26,58,.1); }
.film-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--blue),var(--violet) 48%,var(--mint)); transform: scaleX(0); transform-origin: left; }
.film-controls { justify-self: end; display: flex; align-items: center; gap: 8px; }
.film-controls > span { margin-right: 5px; color: #66708a; font-size: 10px; font-weight: 650; }
.film-controls button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; color: var(--ink); border: 1px solid rgba(17,26,58,.1); border-radius: 999px; background: rgba(255,253,251,.85); box-shadow: 0 5px 14px rgba(44,39,64,.06); font-size: 10px; font-weight: 740; cursor: pointer; }
.film-controls svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.play-icon { display: none; }
.is-paused .pause-icon { display: none; }
.is-paused .play-icon { display: block; }
.replay-button { width: 34px; padding: 0 !important; }
.honesty-note { margin: 5px 0 -8px; color: rgba(17,26,58,.47); font-size: 9px; font-weight: 620; letter-spacing: .03em; text-align: center; }

/* Story states */
[data-phase="reset"] .message:not(.request-one),
[data-phase="reset"] .need-summary span,
[data-phase="reset"] .primary-introduction,
[data-phase="reset"] .secondary-introduction,
[data-phase="reset"] .signup-gate { opacity: 0; transform: translateY(10px) scale(.97); }
[data-phase="reset"] .fit-engine { opacity: .18; transform: translateX(-50%) scale(.78); filter: grayscale(.6); }
[data-phase="reset"] .need-flow,[data-phase="reset"] .intro-flow { opacity: 0; }

[data-phase="listen"] .message { opacity: 1; transform: none; }
[data-phase="listen"] .assistant-one { transition-delay: 180ms; }
[data-phase="listen"] .request-two { transition-delay: 360ms; }
[data-phase="listen"] .need-summary span { opacity: 0; transform: translateY(8px); }
[data-phase="listen"] .fit-engine { opacity: .25; transform: translateX(-50%) scale(.82); filter: grayscale(.5); }
[data-phase="listen"] .primary-introduction,[data-phase="listen"] .secondary-introduction,[data-phase="listen"] .signup-gate { opacity: 0; transform: translateY(10px) scale(.97); }

[data-phase="understand"] .message,[data-phase="understand"] .need-summary span { opacity: 1; transform: none; }
[data-phase="understand"] .need-summary span:nth-child(2) { transition-delay: 100ms; }
[data-phase="understand"] .need-summary span:nth-child(3) { transition-delay: 180ms; }
[data-phase="understand"] .need-summary span:nth-child(4) { transition-delay: 260ms; }
[data-phase="understand"] .need-summary span:nth-child(5) { transition-delay: 340ms; }
[data-phase="understand"] .fit-engine { opacity: 1; transform: translateX(-50%) scale(1); filter: none; }
[data-phase="understand"] .fit-orbit.orbit-two { animation: orbit-turn 7s linear infinite; }
[data-phase="understand"] .fit-orbit.orbit-three { animation: orbit-pulse 1.7s ease-in-out infinite; }
[data-phase="understand"] .need-flow { opacity: .9; animation: line-flow 1.1s linear infinite; }
[data-phase="understand"] .signal-in { opacity: 1; animation: signal-travel-in 2s var(--ease-out) infinite; }
[data-phase="understand"] .primary-introduction,[data-phase="understand"] .secondary-introduction,[data-phase="understand"] .signup-gate { opacity: 0; transform: translateY(10px) scale(.97); }

[data-phase="introduce"] .message,[data-phase="introduce"] .need-summary span,[data-phase="trust"] .message,[data-phase="trust"] .need-summary span,[data-phase="connect"] .message,[data-phase="connect"] .need-summary span,[data-phase="settled"] .message,[data-phase="settled"] .need-summary span { opacity: .76; transform: none; }
[data-phase="introduce"] .fit-engine,[data-phase="trust"] .fit-engine,[data-phase="connect"] .fit-engine,[data-phase="settled"] .fit-engine { opacity: 1; transform: translateX(-50%) scale(1); filter: none; }
[data-phase="introduce"] .intro-flow,[data-phase="trust"] .intro-flow,[data-phase="connect"] .intro-flow,[data-phase="settled"] .intro-flow { opacity: .8; }
[data-phase="introduce"] .signal-out { opacity: 1; animation: signal-travel-out 1.1s var(--ease-out) both; }
[data-phase="introduce"] .primary-introduction,[data-phase="trust"] .primary-introduction,[data-phase="connect"] .primary-introduction,[data-phase="settled"] .primary-introduction { opacity: 1; transform: none; }
[data-phase="introduce"] .primary-introduction { animation: introduction-arrive 720ms var(--ease-out) both; }
[data-phase="introduce"] .secondary-introduction { opacity: .15; transform: translateY(7px); }
[data-phase="introduce"] .trust-row,[data-phase="introduce"] .fit-reason { opacity: .18; }
[data-phase="introduce"] .signup-gate,[data-phase="trust"] .signup-gate { opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; }
[data-phase="trust"] .secondary-introduction,[data-phase="connect"] .secondary-introduction,[data-phase="settled"] .secondary-introduction { opacity: 1; transform: none; }
[data-phase="trust"] .trust-row { animation: trust-reveal 700ms var(--ease-out) both; }
[data-phase="trust"] .new-context { animation: trust-reveal 700ms 160ms var(--ease-out) both; }
[data-phase="connect"] .signup-gate { opacity: 1; transform: none; }
[data-phase="connect"] .signup-gate { animation: gate-arrive 720ms var(--ease-out) both; }
[data-phase="settled"] .signup-gate { opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; }

[data-phase="reset"] .progress-dots i { background: #dddde6; }
[data-phase="listen"] .progress-dots i:nth-child(1),[data-phase="understand"] .progress-dots i:nth-child(-n+2),[data-phase="introduce"] .progress-dots i:nth-child(-n+3),[data-phase="trust"] .progress-dots i,[data-phase="connect"] .progress-dots i,[data-phase="settled"] .progress-dots i { background: var(--blue); }
[data-phase="trust"] .progress-dots i:last-child,[data-phase="connect"] .progress-dots i:last-child,[data-phase="settled"] .progress-dots i:last-child { background: var(--mint); }
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

@keyframes orbit-turn { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes orbit-pulse { 50% { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 0 35px rgba(71,198,163,.14); } }
@keyframes line-flow { to { stroke-dashoffset: -28; } }
@keyframes signal-travel-in { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 86%,100% { offset-distance: 100%; opacity: 1; } }
@keyframes signal-travel-out { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 100% { offset-distance: 100%; opacity: 1; } }
@keyframes introduction-arrive { 0% { opacity: .1; transform: translateX(18px) scale(.97); } 72% { opacity: 1; transform: translateX(-3px) scale(1.005); } 100% { opacity: 1; transform: none; } }
@keyframes trust-reveal { from { opacity: .15; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes gate-arrive { 0% { opacity: 0; transform: translateY(18px) scale(.97); } 75% { opacity: 1; transform: translateY(-2px) scale(1.004); } 100% { opacity: 1; transform: none; } }
.signal-in { offset-path: path("M360 238C430 238 429 238 500 238"); }
.signal-out { offset-path: path("M700 238C750 238 760 238 816 238"); }

@media (max-width: 1080px) {
  .product-film { min-height: auto; }
  .product-canvas { padding: 26px 24px 24px; }
  .discovery-field { grid-template-columns: minmax(270px,.92fr) minmax(160px,.54fr) minmax(335px,1.14fr); }
  .privacy-state { font-size: 0; }
  .privacy-state::after { font-size: 9px; content: "Guided discovery"; }
  .fit-engine { width: 168px; height: 168px; }
  .fit-orbit.orbit-one { width: 164px; height: 164px; }
  .fit-orbit.orbit-two { width: 122px; height: 122px; }
  .fit-orbit.orbit-three { width: 82px; height: 82px; }
}

@media (max-width: 830px) {
  .demo-page { display: block; padding: 0; }
  .product-film { min-height: 100vh; padding: 12px; border-radius: 0; }
  .product-header { grid-template-columns: 1fr auto; }
  .journey-progress { display: none; }
  .product-canvas { padding: 25px 20px 20px; }
  .canvas-heading { align-items: start; }
  .discovery-field { display: flex; flex-direction: column; overflow: visible; }
  .discovery-field::before,.flow-lines { display: none; }
  .need-studio { min-height: 430px; padding: 22px; }
  .fit-studio { min-height: 370px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .fit-engine { top: 76px; width: 190px; height: 190px; }
  .fit-orbit.orbit-one { width: 184px; height: 184px; }
  .fit-orbit.orbit-two { width: 136px; height: 136px; }
  .fit-orbit.orbit-three { width: 92px; height: 92px; }
  .fit-note { top: 290px; }
  .introductions { min-height: 550px; padding: 22px; }
  .signup-gate { right: 16px; bottom: 16px; left: 16px; }
  .film-footer { grid-template-columns: 1fr auto; gap: 12px; }
  .film-progress { grid-column: 1 / -1; grid-row: 2; }
  .film-controls > span { display: none; }
}

@media (max-width: 560px) {
  .product-film { padding: 8px; }
  .product-shell { border-radius: 24px; }
  .product-header { min-height: 60px; padding: 10px 14px; }
  .brand-orbit { width: 31px; height: 31px; }
  .privacy-state::after { font-size: 0; }
  .canvas-heading { display: grid; }
  .canvas-heading h1 { max-width: 12ch; font-size: 29px; }
  .live-state { justify-self: start; white-space: normal; }
  .discovery-field { overflow: hidden; }
  .need-studio,.introductions { padding-right: 15px; padding-left: 15px; }
  .section-heading { display: block; }
  .profile-chip { margin-top: 10px; }
  .message.request-one,.message.request-two { margin-left: 0; }
  .need-summary { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .need-summary span { min-width: 0; overflow: hidden; white-space: nowrap; }
  .trust-row { grid-template-columns: 1fr; }
  .introductions { min-height: 590px; }
  .film-footer { padding-inline: 5px; }
  .film-footer > p { font-size: 9px; }
  .honesty-note { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .film-progress { display: none; }
}