.v3-page {
  --v3-bg: #08080a;
  --v3-panel: #101015;
  --v3-text: #f4f1ea;
  --v3-muted: #9996a1;
  --v3-dim: #66626e;
  --v3-accent: #7c4dff;
  --v3-soft: #b79bff;
  --v3-nav-surface: #101014;
  --v3-nav-border: rgba(154, 150, 164, .2);
  background: var(--v3-bg);
}

.v3-header { min-height: 68px; background: rgba(8, 8, 10, .8); }
.v3-header .nav { min-height: 68px; }
.story { position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line); }
.story-ambient { position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 58% 54% at 72% 45%, rgba(75, 42, 145, .24), transparent 74%), radial-gradient(ellipse 52% 52% at 8% 10%, rgba(55, 31, 106, .27), transparent 72%); }
.story-shell { display: grid; grid-template-columns: minmax(340px, .78fr) minmax(0, 1fr); gap: clamp(70px, 9vw, 132px); }
.story-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.story-device-column { grid-column: 1; grid-row: 1; min-width: 0; }
.story-device-sticky { position: sticky; top: calc(50svh - 363px); height: 726px; display: grid; place-items: center; }
.story-device-stage { --side-hover-distance: clamp(56px, 6vw, 96px); position: relative; width: 334px; aspect-ratio: 402 / 874; display: grid; place-items: center; will-change: transform; }
.story-device { position: relative; z-index: 3; width: 100%; height: auto; aspect-ratio: 402 / 874; overflow: hidden; container-type: inline-size; border: 0; border-radius: 40px; background: #070709; box-shadow: 0 40px 110px rgba(0, 0, 0, .62), 0 0 0 8px rgba(255, 255, 255, .025), 0 0 90px rgba(124, 77, 255, .17); transform-origin: center; will-change: transform; }
.story-device::after { content: ""; position: absolute; z-index: 10; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); pointer-events: none; }
.story-side-phone { --side-x: 0%; --side-y: 5%; --side-rotate: 0deg; --side-scale: .92; position: absolute; z-index: 1; top: 8%; height: auto; transform: translateX(var(--side-x)) translateY(var(--side-y)) rotate(var(--side-rotate)) scale(var(--side-scale)); transition: none; will-change: transform, opacity; }
.story-side-phone-card { width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 38px; background: #08080a; box-shadow: 0 34px 80px rgba(0, 0, 0, .58), 0 0 0 7px rgba(255, 255, 255, .025); transform: translateX(0); transition: transform 560ms cubic-bezier(.22, 1.42, .36, 1); will-change: transform; }
.story-side-phone img { width: 100%; height: 100%; display: block; object-fit: contain; }
.story-side-phone--chat { right: 45%; width: 65%; aspect-ratio: 634 / 1436; --side-rotate: -6deg; }
.story-side-phone--after { left: 45%; width: 65%; aspect-ratio: 646 / 1316; --side-y: 6%; --side-rotate: 6deg; }
@media (hover: hover) and (pointer: fine) {
  .story:not(.is-flowing) .story-device-stage:hover .story-side-phone--chat .story-side-phone-card { transform: translateX(calc(-1 * var(--side-hover-distance))); }
  .story:not(.is-flowing) .story-device-stage:hover .story-side-phone--after .story-side-phone-card { transform: translateX(var(--side-hover-distance)); }
}
.story-screen { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity 420ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1); }
.story-screen.is-active { z-index: 2; opacity: 1; transform: none; }
.story-screen img { width: 100%; height: 100%; display: block; object-fit: contain; }
.story-wave { position: absolute; z-index: 3; top: 22.655%; left: 8.706%; width: 4.478%; height: 2.403%; display: flex; align-items: flex-end; justify-content: center; gap: 11%; overflow: hidden; background: #1b1430; pointer-events: none; }
.story-wave i { width: 17%; height: 86%; border-radius: 999px; background: #7c4dff; animation: lyBar 1.1s ease-in-out infinite; }
.story-wave i:nth-child(2) { animation-delay: .22s; }
.story-wave i:nth-child(3) { animation-delay: .44s; }
.story-wave--map { top: 9.153%; left: 9.95%; width: 3.483%; height: 2.059%; gap: 17.857%; background: #0b0b0f; }
.story-wave--map i { width: 21.429%; height: 100%; }
@keyframes lyBar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.story-app-nav { position: absolute; z-index: 5; left: 4.48%; right: 4.48%; bottom: 2.86%; height: 8.7%; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border: 1px solid var(--v3-nav-border); border-radius: 999px; background: var(--v3-nav-surface); box-shadow: 0 9px 28px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .025); pointer-events: none; }
.story-app-nav__item { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.24cqw; color: #4a4754; }
.story-app-nav__item svg { width: 4.73cqw; height: 4.73cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.story-app-nav__item small { color: inherit; font: 500 1.99cqw/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: none; }
.story-app-nav__item.is-active { color: #7c4dff; }
.story-app-nav__item.is-active svg { stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(124, 77, 255, .75)); }
.story-app-nav__create { justify-self: center; width: 11.44cqw; height: 11.44cqw; display: grid; place-items: center; border-radius: 3.23cqw; color: #0b0713; background: #7c4dff; box-shadow: 0 8px 26px rgba(124, 77, 255, .32); }
.story-app-nav__create svg { width: 4.73cqw; height: 4.73cqw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.story-screen-name { position: absolute; right: calc(50% + 190px); bottom: 33px; display: grid; gap: 7px; color: var(--v3-dim); font: 500 8px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-align: right; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 240ms ease; }
.story-screen-name span:first-child { color: var(--v3-soft); }
.story-progress { position: absolute; left: calc(50% + 190px); bottom: 18px; display: none; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms ease, visibility 0s linear 240ms; }
.v3-ready .story-progress { display: flex; }
.story.is-flowing .story-screen-name, .story.is-flowing .story-progress { opacity: 1; }
.story.is-flowing .story-progress { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.story:not(.is-flowing) .story-progress { visibility: hidden; pointer-events: none; }
.story-progress button { width: 40px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.story-progress button::before { content: ""; width: 18px; height: 4px; border-radius: 99px; background: #3f3b46; transition: width 220ms ease, background 220ms ease; }
.story-progress button.is-active::before { width: 34px; background: var(--v3-accent); }
.story-intro { min-height: 125svh; }
.story-intro-card { position: sticky; top: 68px; min-height: calc(100svh - 68px); display: grid; align-content: center; justify-items: start; gap: 24px; will-change: transform, opacity; }
.story-intro-card h1 { max-width: 650px; margin: 0; font: 700 clamp(60px, 6.2vw, 90px)/.91 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.story-intro-card h1 span { color: #c9c5cf; }
.story-intro-card > p { max-width: 550px; margin: 0; color: var(--v3-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.story-mobile-hero { display: none; }
.mobile-story { display: none; }
.story-step { min-height: 96svh; display: flex; align-items: center; opacity: 1; transition: opacity 340ms ease; }
.v3-ready .story-step { opacity: .25; }
.story-step.is-active { opacity: 1; }
.story-copy-card { max-width: 610px; display: grid; justify-items: start; gap: 22px; }
.story-step h2 { margin: 0; font: 700 clamp(52px, 5.4vw, 76px)/.95 "Space Grotesk", sans-serif; letter-spacing: -.055em; text-wrap: balance; }
.story-step p { max-width: 535px; margin: 0; color: var(--v3-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.story-step small { color: var(--v3-dim); font: 500 9px/1.5 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.story-actions { display: flex; align-items: center; gap: 18px; }
.story-actions > span { color: var(--v3-dim); font: 500 8.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.story-link { color: var(--v3-text); font: 600 16px/1 "Space Grotesk", sans-serif; }

.v3-overview { background: #09090b; }
.v3-overview-grid { padding-block: clamp(66px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 112px); border-bottom: 1px solid var(--line); }
.v3-feature { min-width: 0; }
.v3-section-number { color: var(--v3-soft); font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .13em; }
.v3-feature h2 { margin: 27px 0 19px; font: 600 clamp(38px, 4vw, 56px)/1 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.v3-feature p { max-width: 510px; margin: 0 0 26px; color: var(--v3-muted); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.7; }
.v3-feature-tags { display: flex; flex-wrap: wrap; gap: 14px 24px; color: #c6c1cc; font-size: 11px; }
.v3-feature-tags span { padding-bottom: 7px; border-bottom: 1px solid #51465e; }

.v3-access { padding-block: clamp(70px, 8vw, 108px); background: #09090b; }
.v3-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 112px); align-items: center; }
.v3-access-copy { display: grid; gap: 24px; }
.v3-access-copy h2 { margin: 0; font: 600 clamp(40px, 4.6vw, 62px)/1.06 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.v3-access-copy h2 span { color: var(--v3-soft); }
.v3-signup > p:first-child { max-width: 430px; margin: 0 0 22px; color: var(--v3-muted); font-size: 16px; line-height: 1.65; }
.v3-signup .waitlist-form { display: grid; gap: 10px; }
.v3-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.v3-form-row input { width: 100%; min-width: 0; }
.v3-signup .form-note { margin-top: 12px; }
.v3-privacy-note { margin: 8px 0 0; color: var(--v3-dim); font-size: 11px; }
.v3-privacy-note a { color: var(--v3-muted); text-decoration: underline; text-underline-offset: 3px; }
.v3-footer { background: #0a0a0d; }

@media (max-width: 980px) {
  .story-shell { grid-template-columns: 300px minmax(0, 1fr); gap: 50px; }
  .story-device-stage { width: 294px; }
  .story-device { border-radius: 35px; }
  .story-device-sticky { top: calc(50svh - 320px); height: 640px; }
  .story-screen-name { right: calc(50% + 166px); }
  .story-progress { left: calc(50% + 166px); }
}

@media (min-width: 821px) and (max-width: 1300px) {
  .story-device-stage { --side-hover-distance: clamp(32px, calc(28vw - 260px), 78px); }
}

@media (max-width: 820px) {
  .story { overflow: hidden; }
  .story-shell { display: none; }
  .mobile-story { padding: 46px 0 82px; display: block; }
  .mobile-story-copy { padding-inline: 20px; display: grid; justify-items: start; gap: 18px; }
  .mobile-story-copy h1 { margin: 0; font: 700 clamp(46px, 12vw, 66px)/.92 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
  .mobile-story-copy h1 span { color: #c9c5cf; }
  .mobile-story-copy > p { max-width: 540px; margin: 0; color: var(--v3-muted); font-size: 16px; line-height: 1.58; }
  .mobile-story-copy > .button { width: 100%; margin-top: 2px; }
  .mobile-story-swipe { width: 100%; margin-top: 11px; display: flex; align-items: center; justify-content: space-between; color: var(--v3-soft); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
  .mobile-story-swipe span:last-child { font-size: 17px; letter-spacing: 0; }
  .mobile-story-track { width: 100%; margin-top: 18px; padding: 8px max(20px, calc((100vw - 350px) / 2)) 20px; display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 350px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(20px, calc((100vw - 350px) / 2)); scrollbar-width: none; touch-action: auto; }
  .mobile-story-track::-webkit-scrollbar { display: none; }
  .mobile-story-slide { min-width: 0; padding: 20px 14px 22px; display: grid; justify-items: center; align-content: start; gap: 23px; scroll-snap-align: center; border: 1px solid rgba(255, 255, 255, .07); border-radius: 30px; background: linear-gradient(155deg, rgba(31, 22, 51, .72), rgba(13, 13, 18, .96) 48%, rgba(9, 9, 12, .98)); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); transition: opacity 180ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); }
  .mobile-story-slide:not(.is-active) { opacity: .56; transform: scale(.965); }
  .mobile-story-phone { position: relative; width: min(76vw, 300px); aspect-ratio: 402 / 874; overflow: hidden; container-type: inline-size; border-radius: 31px; background: #070709; box-shadow: 0 28px 74px rgba(0, 0, 0, .58), 0 0 0 7px rgba(255, 255, 255, .025), 0 0 58px rgba(124, 77, 255, .14); }
  .mobile-story-phone::after { content: ""; position: absolute; z-index: 10; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); pointer-events: none; }
  .mobile-story-phone .story-screen { z-index: 1; opacity: 1; transform: none; }
  .mobile-story-caption { width: 100%; min-height: 190px; padding: 0 5px; display: grid; align-content: start; gap: 13px; }
  .mobile-story-caption h2 { margin: 0; font: 700 clamp(31px, 8.6vw, 42px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.05em; text-wrap: balance; }
  .mobile-story-caption p { margin: 0; color: var(--v3-muted); font-size: 15px; line-height: 1.55; }
  .mobile-story-controls { min-height: 48px; margin: 5px 20px 0; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 12px; }
  .mobile-story-controls > button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; color: var(--v3-text); background: #111116; font-size: 19px; }
  .mobile-story-controls > button:disabled { color: #4a4652; opacity: .5; }
  .mobile-story-dots { display: flex; align-items: center; justify-content: center; gap: 7px; }
  .mobile-story-dots button { width: 24px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; }
  .mobile-story-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #494450; transition: width 180ms cubic-bezier(.22, 1, .36, 1), background 180ms ease; }
  .mobile-story-dots button.is-active::before { width: 20px; background: var(--v3-accent); }
  .mobile-story-count { grid-column: 1 / -1; justify-self: center; color: var(--v3-dim); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .12em; }
  .story-device-column { position: sticky; z-index: 4; top: 66px; height: 74svh; margin-bottom: -74svh; opacity: 0; visibility: hidden; pointer-events: none; background: linear-gradient(#08080a 86%, transparent); transition: opacity 180ms ease, visibility 0s linear 180ms; }
  .story.is-flowing .story-device-column { visibility: visible; transition-delay: 0s; }
  .story-device-sticky { position: relative; top: auto; height: 100%; padding-top: 8px; align-content: start; }
  .story-device-stage { width: min(300px, 34svh, 76vw); transform-origin: center top; }
  .story-device { border-radius: 30px; }
  .story-device-column .story-side-phone { display: none; }
  .story-side-phone { width: 78%; }
  .story-side-phone-card { border-radius: 26px; }
  .story-side-phone--chat { right: 61%; }
  .story-side-phone--after { left: 61%; }
  .story-screen-name { right: calc(50% + 122px); bottom: 46px; }
  .story-progress { left: calc(50% + 122px); bottom: 39px; pointer-events: auto; }
  .story-copy { position: relative; z-index: 3; }
  .story-intro { min-height: auto; }
  .story-intro-card { position: relative; top: auto; min-height: auto; padding: 56px 20px 64px; align-content: start; background: none; }
  .story-intro-card h1 { font-size: clamp(48px, 10.5vw, 70px); }
  .story-mobile-hero { width: 100%; height: min(142vw, 620px); margin-top: 18px; display: grid; place-items: start center; }
  .story-mobile-hero .story-device-stage { width: min(268px, 32svh, 64vw); transform: none; transform-origin: center top; will-change: opacity; }
  .story-mobile-hero .story-side-phone { display: block; }
  .story-step { min-height: 112svh; padding: 91svh 20px 72px; align-items: flex-start; background: linear-gradient(transparent 64%, rgba(8, 8, 10, .92) 78%, #08080a 89%); }
  .story-step:last-child { padding-bottom: 14svh; }
  .story-copy-card { width: min(100%, 650px); margin-inline: auto; }
  .story-step h1 { font-size: clamp(48px, 10.5vw, 70px); }
  .story-step h2 { font-size: clamp(44px, 9.5vw, 64px); }
  .story-step p { font-size: 17px; }
  .v3-overview-grid, .v3-access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .mobile-story { padding-top: 42px; }
  .mobile-story-copy { padding-inline: 15px; gap: 17px; }
  .mobile-story-track { padding-inline: 15px; scroll-padding-inline: 15px; grid-auto-columns: calc(100vw - 30px); }
  .mobile-story-slide { padding-inline: 12px; border-radius: 26px; }
  .mobile-story-phone { width: min(78vw, 300px); border-radius: 29px; }
  .mobile-story-controls { margin-inline: 15px; }
  .story-device-column { top: 66px; height: 74svh; margin-bottom: -74svh; }
  .story-device-stage { width: min(300px, 34svh, 76vw); }
  .story-device { border-radius: 28px; }
  .story-screen-name { display: none; }
  .story-progress { left: auto; right: 2px; bottom: 10px; }
  .story-progress button { width: 44px; height: 44px; }
  .story-progress button::before { width: 14px; }
  .story-progress button.is-active::before { width: 27px; }
  .story-intro-card { padding: 46px 15px 56px; gap: 17px; }
  .story-intro-card h1 { font-size: clamp(43px, 12vw, 58px); }
  .story-intro-card > p { font-size: 15.5px; line-height: 1.55; }
  .story-mobile-hero { height: min(145vw, 590px); margin-top: 16px; }
  .story-mobile-hero .story-device-stage { width: min(260px, 32svh, 65vw); }
  .story-step { min-height: 112svh; padding: 91svh 15px 68px; }
  .story-copy-card { gap: 17px; }
  .story-step h1 { font-size: clamp(43px, 12vw, 58px); }
  .story-step h2 { font-size: clamp(40px, 11vw, 52px); }
  .story-step p { font-size: 15.5px; line-height: 1.55; }
  .story-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .story-actions .button { width: 100%; }
  .v3-overview-grid { gap: 52px; padding-block: 62px; }
  .v3-access { padding-block: 70px; }
  .v3-access-grid { gap: 38px; }
  .v3-form-row { grid-template-columns: 1fr; }
  .v3-form-row .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-story-track { scroll-behavior: auto; }
  .mobile-story-slide { transform: none !important; transition: opacity .15s; }
  .mobile-story-dots button::before { transition: none; }
  .story-screen, .story-step, .story-progress button, .story-screen-name, .story-progress, .story-device-column { transition-duration: .01ms; }
  .story-wave i { animation: none; transform: scaleY(.65); }
  .story-side-phone-card { transform: none !important; transition: none; }
  .story-device-stage, .story-device, .story-side-phone, .story-intro-card { will-change: auto; }
}

/* Static launch hero: keep the three-phone composition, remove the product tour. */
.story.is-static .mobile-story,
.story.is-static .story-step,
.story.is-static .story-screen-name,
.story.is-static .story-progress,
.story.is-static .story-mobile-hero { display: none; }
.story.is-static .story-shell { display: grid; min-height: calc(100svh - 68px); padding-block: clamp(56px, 7vw, 92px); grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(58px, 8vw, 118px); align-items: center; }
.story.is-static .story-copy { grid-column: 1; grid-row: 1; }
.story.is-static .story-device-column { position: relative; z-index: 1; top: auto; grid-column: 2; grid-row: 1; height: auto; margin: 0; opacity: 1; visibility: visible; pointer-events: none; background: none; }
.story.is-static .story-device-sticky { position: relative; top: auto; height: auto; min-height: 650px; padding: 0; display: grid; place-items: center; }
.story.is-static .story-device-stage { width: min(334px, 72%); transform: none !important; pointer-events: auto; }
.story.is-static .story-device { transform: scale(.78) !important; }
.story.is-static .story-side-phone { display: block; opacity: 1 !important; visibility: visible !important; }
.story.is-static .story-intro { min-height: auto; }
.story.is-static .story-intro-card { position: relative; top: auto; min-height: auto; padding: 0; opacity: 1 !important; transform: none !important; }

@media (max-width: 820px) {
  .story.is-static .story-shell { min-height: auto; padding-block: 54px 72px; grid-template-columns: 1fr; gap: 42px; }
  .story.is-static .story-copy { grid-column: 1; grid-row: 1; }
  .story.is-static .story-device-column { grid-column: 1; grid-row: 2; }
  .story.is-static .story-device-sticky { min-height: min(142vw, 620px); }
  .story.is-static .story-device-stage { width: min(270px, 66vw); transform-origin: center; }
  .story.is-static .story-device { border-radius: 32px; }
  .story.is-static .story-side-phone { width: 65%; }
  .story.is-static .story-side-phone--chat { right: 52%; }
  .story.is-static .story-side-phone--after { left: 52%; }
  .story.is-static .story-intro-card { padding: 0; align-content: center; justify-items: center; text-align: center; }
  .story.is-static .story-actions { align-items: center; }
}

@media (max-width: 540px) {
  .story.is-static .story-shell { padding-block: 44px 58px; gap: 32px; }
  .story.is-static .story-device-sticky { min-height: min(138vw, 545px); }
  .story.is-static .story-device-stage { width: min(250px, 64vw); }
  .story.is-static .story-intro-card { gap: 17px; }
}