/* Experimental edition. The original app and hero files remain untouched. */
.signal-journey { height:250svh; position:relative; background:#0d0f12; }
.signal-stage { position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; display:grid; place-items:center; perspective:1200px; }
.signal-light { position:absolute; inset:-30%; z-index:-1; background:radial-gradient(ellipse at 54% 57%,#42745666,transparent 40%),radial-gradient(ellipse at 72% 65%,#8b593c33,transparent 30%); transform:translateY(var(--light-y,0px)); }
.signal-copy { position:absolute; top:12%; left:9%; z-index:2; opacity:var(--copy-alpha,1); transform:translateY(var(--copy-y,0px)); }
.signal-copy p { color:#aab5ad; font-size:clamp(15px,1.5vw,20px); margin-bottom:20px; }
.signal-copy h2 { color:#eaf1f2; font-size:clamp(66px,9vw,142px); line-height:.94; letter-spacing:-.07em; font-weight:500; margin:0; }
.signal-space { position:absolute; width:min(1000px,85vw); height:330px; top:51%; perspective:1400px; transform:translateY(-12%); }
.signal-orbits { position:relative; height:100%; transform-style:preserve-3d; transform:rotateX(var(--rx,38deg)) rotateY(var(--ry,-24deg)) rotateZ(var(--rz,-12deg)); }
.orbit-lane { position:absolute; top:calc(var(--i)*78px); width:100%; height:66px; border:1px solid #8ad6a144; border-radius:9px; background:linear-gradient(105deg,#345044,#162d24 70%,#1b2d2a); display:flex; align-items:center; gap:20px; padding:0 22px; box-shadow:0 25px 60px #0008; transform:translate3d(var(--x,0px),var(--y,0px),var(--z,0px)); }
.orbit-lane:nth-child(2) { background:linear-gradient(105deg,#495748,#263528); }
.orbit-lane:nth-child(3) { background:linear-gradient(105deg,#445260,#23313a); }
.orbit-lane:last-of-type { background:linear-gradient(105deg,#686741,#333c24); }
.orbit-lane span { min-width:110px; color:#dbece0; font-size:13px; }
.orbit-lane b { font-family:monospace; font-weight:400; color:#a8c5ad; font-size:11px; }
.orbit-wave { height:40px; display:flex; flex:1; align-items:center; gap:2px; overflow:hidden; }
.orbit-wave i { flex:1; min-width:2px; height:var(--h); background:#8ad6a1; opacity:.8; }
.signal-axis { position:absolute; left:28%; top:-20px; bottom:-20px; width:2px; background:#d8e63f; opacity:var(--axis-alpha,0); transform:translateZ(70px); }
.signal-resolution { position:absolute; bottom:9%; color:#b6cabb; font-size:clamp(18px,2.5vw,32px); letter-spacing:-.035em; opacity:var(--resolve-alpha,0); }
.product-intro--flow { padding-top:110px; margin-bottom:65px; }
.product-intro--flow h2 { font-size:clamp(45px,6.5vw,88px); line-height:1.02; letter-spacing:-.065em; }
.product-stack { isolation:isolate; position:relative; background:radial-gradient(ellipse at 20% 24%,#285c3c36,transparent 46%),radial-gradient(ellipse at 90% 38%,#7c623124,transparent 38%); }
.product-stack .sync-showcase { max-width:1240px; }
.product-feature-layout .device-stage { max-width:min(1100px,96svh); perspective:1600px; }
.product-stack .desktop-device { transform:rotateX(var(--app-rx,0deg)) rotateY(var(--app-ry,0deg)) translateY(var(--app-y,0px)); transform-origin:50% 40%; }
.product-stack .device-stage.is-qr .desktop-device { transform:translateX(-6%) rotateY(12deg) rotateX(3deg) scale(.9); }
.product-stack .sync-demo { box-shadow:0 45px 90px #0009,0 2px 0 #a3b8a82b; }
.product-stack .review-story { background:radial-gradient(ellipse at 100% 0%,#315a4059,transparent 65%),linear-gradient(135deg,#1b2420,#111714 65%); border:1px solid #94b39b35; box-shadow:0 45px 100px #0009; }
.product-stack .review-story h2 { letter-spacing:-.055em; }
.product-tabs { backdrop-filter:blur(18px); }
@media(max-width:700px) {
 .signal-journey { height:180svh; }
 .signal-copy { top:15%; left:7%; }
 .signal-copy h2 { font-size:clamp(56px,13vw,86px); }
 .signal-space { width:86vw; top:57%; height:240px; }
 .orbit-lane { height:48px; top:calc(var(--i)*57px); padding:0 10px; gap:12px; }
 .orbit-lane span { font-size:10px; min-width:80px; }
 .orbit-lane b { display:none; }
 .signal-resolution { bottom:12%; }
 .product-intro--flow { padding-top:50px; }
 .product-stack .desktop-device { transform:none; }
}
@media(prefers-reduced-motion:reduce) {
 .signal-journey { height:100svh; }
 .signal-stage { position:relative; }
 .signal-copy { opacity:1; transform:none; }
 .signal-space { top:57%; }
 .signal-orbits { transform:none; }
 .orbit-lane { transform:none; }
 .signal-axis,.signal-resolution { opacity:1; }
 .product-stack .desktop-device { transform:none; }
}
.signal-resolution { top:24%; bottom:auto; }
@media(max-width:700px) { .signal-resolution { top:34%; bottom:auto; } }
.product-stack .sync-showcase { background:transparent; }

/* Revision 2: photographic video lanes and a continuous product stage. */
.signal-journey { background:transparent; }
.signal-light { inset:0; background:radial-gradient(ellipse at 54% 52%,#42745640,transparent 68%); mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent); }
.orbit-film { display:flex; flex:1; min-width:0; height:48px; gap:4px; overflow:hidden; }
.orbit-lane .film-frame { position:relative; flex:0 0 85px; min-width:0; height:48px; overflow:hidden; border-radius:3px; }
.film-frame img { position:absolute; max-width:none; width:166.08%; left:-9.62%; top:-34.46%; }
.camera-lane { background:#273630; padding-block:7px; }
.camera-lane:nth-child(2) { background:#2c3338; }
.camera-lane:nth-child(2) .film-frame img { filter:saturate(.65); }
.product-stack { background:none; }
.product-intro--flow { padding-top:40px; margin-bottom:56px; }
.product-intro--flow h2 { font-size:clamp(42px,5vw,70px); }
.product-stack .sync-showcase { width:calc(100% - 8vw); max-width:1360px; }
.product-feature-layout .device-stage { width:100%; max-width:1180px; perspective:1600px; }
.product-stack .desktop-device { transform:none; }
.product-stack .device-stage::before { display:none; }
.product-stack .sync-demo { box-shadow:0 32px 65px #0007,0 1px 0 #b5c2ba26; }
.product-stack .product-tabs { backdrop-filter:none; gap:clamp(24px,5vw,72px); margin-bottom:30px; }
.product-stack .product-tabs button { font-size:16px; }
.product-feature-layout { gap:36px; }
.product-feature-layout .product-notes { max-width:750px; }
.product-stack .product-note-title { font-size:clamp(26px,2.8vw,36px); letter-spacing:-.04em; }
.product-stack .device-stage.is-qr .desktop-device { transform:translateX(-4%) rotateY(8deg) scale(.9); }
.product-stack .qr-phone { width:clamp(180px,20vw,240px); right:0; }
@media(max-width:700px) {
 .orbit-film { height:34px; }
 .orbit-lane .film-frame { height:34px; flex-basis:60px; }
 .product-stack .sync-showcase { width:calc(100% - 32px); }
 .product-stack .product-tabs { gap:20px; }
 .product-stack .product-tabs button { font-size:13px; }
 .product-stack .qr-phone { width:200px; right:50%; }
 .product-intro--flow { padding-top:30px; }
}
.product-stack .sync-demo { max-width:1080px; }
.product-feature-layout .device-stage { max-width:1080px; }

/* Continuous vertical depth beyond the terrain, without moving hit targets sideways. */
.product-intro--flow h2 { translate:0 var(--title-depth,0px); }
.product-intro--flow > p { translate:0 var(--caption-depth,0px); }
.signal-space { translate:0 var(--field-depth,0px); }
.product-stack .device-stage { translate:0 calc(var(--device-depth,0px) + var(--recede-depth,0px)); }
.product-stack .confidence-signal { translate:0 var(--signal-depth,0px); }
.product-stack .product-tabs, .product-stack .product-notes { translate:0 calc(var(--recede-depth,0px) * .25); }
@media(prefers-reduced-motion:reduce) {
 .product-intro--flow h2,.product-intro--flow > p,.signal-space,
 .product-stack .device-stage,.product-stack .confidence-signal,
 .product-stack .product-tabs,.product-stack .product-notes { translate:none; }
}

/* Clarity's top edge, rather than its centre, settles at the viewport midpoint. */
@media(prefers-reduced-motion:no-preference) {
 .product-stack .review-story { position:sticky; top:var(--review-anchor,24px); z-index:3; }
 .review-anchor-track::after { display:block; height:40svh; }
}

/* One viewport product composition: a quiet side rail and a full app window. */
@media(min-width:901px) {
 .product-stack .sync-showcase { display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:30px; align-items:start; width:calc(100% - 64px); max-width:1440px; padding-top:24px; padding-bottom:24px; }
 .product-stack .product-tabs { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:8px; margin:0; padding:150px 0 0; overflow:visible; }
 .product-stack .product-tabs button { text-align:left; white-space:normal; font-size:14px; line-height:1.45; padding:14px 14px; border-bottom:0; border-left:2px solid transparent; border-radius:0; }
 .product-stack .product-tabs button[aria-selected="true"] { border-left-color:#8ad6a1; background:#8ad6a10a; }
 .product-feature-layout { gap:20px; min-width:0; }
 .product-feature-layout .product-notes { max-width:780px; }
 .product-stack .product-note-title { font-size:clamp(24px,2.5vw,34px); margin-bottom:8px; }
 .product-stack .product-notes p:not(.product-note-title) { font-size:14px; line-height:1.5; }
 .product-stack .product-hint { font-size:12px; margin-top:6px; }
 .product-feature-layout .device-stage { max-width:min(1080px,calc((100svh - 240px) * 1.37)); }
 .product-stack .sync-demo { max-width:none; }
 .product-stack .device-stage { translate:0 var(--recede-depth,0px); }
 .product-stack .qr-phone { width:clamp(160px,17vw,210px); }
}

@media(min-width:901px) { .product-stack .product-tabs button[aria-selected="true"]::after { display:none; } }

/* Lower the media field; the playhead follows scroll directly and reversibly. */
.signal-space { top:57%; }
.signal-axis { left:var(--playhead-x,14%); }
@media(max-width:700px) { .signal-space { top:62%; } }
@media(prefers-reduced-motion:reduce) { .signal-axis { left:50%; } }

/* Alternating entrances, with a separate quiet zone for the headline. */
.signal-copy { top:10%; left:7%; right:7%; text-align:center; }
.signal-copy p { margin-bottom:18px; }
.signal-copy h2 { font-size:clamp(56px,7.3vw,108px); line-height:.98; letter-spacing:-.06em; }
.signal-space { top:62%; }
.signal-resolution { top:28%; }
@media(max-width:700px) {
 .signal-copy { top:12%; }
 .signal-copy h2 { font-size:clamp(48px,12vw,70px); }
 .signal-copy p { font-size:14px; }
 .signal-space { top:62%; }
 .signal-resolution { top:35%; }
}

/* Editorial composition: visible spatial tracks, a left-aligned statement. */
.signal-copy { left:9%; right:auto; top:12%; text-align:left; }
.signal-copy h2 { font-size:clamp(66px,9vw,142px); line-height:.94; letter-spacing:-.07em; }
@media(max-width:700px) {
 .signal-copy { left:7%; top:12%; }
 .signal-copy h2 { font-size:clamp(52px,12vw,72px); }
}

/* Keep neighbouring tracks from casting changing 3D shadows onto each other. */
.orbit-lane { box-shadow:none; backface-visibility:hidden; }

/* A centred product stage with one compact navigation strip. */
@media(min-width:901px) {
 .product-stack .sync-showcase { display:flex; flex-direction:column; align-items:center; gap:24px; padding-top:24px; padding-bottom:24px; }
 .product-stack .product-tabs { flex-direction:row; align-items:center; justify-content:center; padding:4px; margin:0; gap:4px; border:1px solid #ffffff12; border-radius:12px; background:#191e20; }
 .product-stack .product-tabs button { border:0; border-radius:8px; padding:10px 18px; white-space:nowrap; text-align:center; font-size:14px; }
 .product-stack .product-tabs button[aria-selected="true"] { background:#2a3730; color:#b6e5c4; border:0; }
 .product-feature-layout { width:100%; gap:28px; }
 .product-feature-layout .product-notes { max-width:780px; }
 .product-feature-layout .device-stage { max-width:min(1080px,calc((100svh - 240px) * 1.37)); }
}
.product-feature-layout .product-notes [role="tabpanel"] { align-self:start; }
.product-stack .product-notes p:not(.product-note-title) { margin-bottom:0; }
@media(min-width:901px) { .product-stack .sync-showcase { padding-block:8px; } }

/* Research revision: independent chapters, one persistent product window. */
.signal-copy h2 {
 mask-image:linear-gradient(to bottom,#000 calc(var(--title-edge,118%) - 18%),transparent var(--title-edge,118%));
 -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--title-edge,118%) - 18%),transparent var(--title-edge,118%));
}
.product-intro--flow { padding-block:clamp(50px,10vh,110px); margin-bottom:40px; }
.product-intro--flow h2 { font-size:clamp(44px,5.8vw,82px); }
.product-intro--flow p { max-width:760px; margin-inline:auto; line-height:1.6; }
.product-feature-layout .device-stage { position:relative; }
.product-stack .desktop-device { transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .65s ease; }
.qr-explainer { display:flex; justify-content:center; gap:28px; min-height:20px; opacity:0; transition:opacity .4s; font-size:12px; color:#b6cabb; }
.qr-explainer.is-visible { opacity:1; }
.qr-explainer span+span { border-left:1px solid #65726a; padding-left:28px; }
@media(min-width:901px) {
 .product-feature-layout .device-stage { max-width:min(1120px,calc((100svh - 225px) * 1.37)); }
 .product-stack .sync-showcase { gap:18px; }
 .product-feature-layout { gap:24px; }
 .product-stack .product-notes p:not(.product-note-title) { max-width:690px; margin-inline:auto; }
}
@media(max-width:900px) {
 .qr-explainer { gap:10px; font-size:10px; }
 .qr-explainer span+span { padding-left:10px; }
}
@media(max-width:700px) {
 .product-feature-layout .device-stage { padding-bottom:30px; min-height:330px; }
 .product-feature-layout .device-stage.is-qr { padding-bottom:360px; }
 .product-stack .qr-phone { width:170px; right:50%; }
 .qr-screen { min-height:0; padding:16px; }
 .qr-time { font-size:17px; }
 .qr-explainer { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
 .signal-copy h2 { mask-image:none; -webkit-mask-image:none; }
}
@media(min-width:701px) {
 .product-stack .qr-phone { width:clamp(160px,19svh,200px); top:16%; }
 .product-stack .qr-screen { min-height:0; padding:16px; }
 .product-stack .qr-time { font-size:18px; }
}

/* App-first audit: give the actual working interface priority over viewport fitting. */
.product-stack .sync-showcase { width:calc(100% - 64px); max-width:1260px; padding:12px 0 36px; }
.product-feature-layout .device-stage { width:100%; max-width:1120px; }
.product-stack .product-notes { max-width:780px; }
.product-stack .product-note-title { font-size:clamp(24px,2.5vw,32px); }
.product-stack .product-tabs { margin-bottom:0; }
.product-feature-layout { gap:24px; }
.product-stack .device-stage.is-export .desktop-device { transform:none; opacity:1; pointer-events:auto; }
.product-stack .device-stage.is-qr .desktop-device { transform:translateX(-2%) rotateY(4deg) scale(.96); }
.product-actions { order:2; display:flex; align-items:center; justify-content:center; gap:30px; min-height:58px; width:100%; }
.product-access { color:#b6e5c4; font-size:14px; text-decoration:none; border-bottom:1px solid #8ad6a166; padding:8px 0; }
.product-access:hover { color:#eaf1f2; border-color:#eaf1f2; }
.product-access:focus-visible { outline:2px solid #8ad6a1; outline-offset:5px; }
.export-receipt { display:flex; align-items:center; gap:13px; padding:12px 20px; border:1px solid #8ad6a133; border-radius:10px; background:#1b2620; animation:receipt-in .5s ease both; }
.export-receipt[hidden] { display:none; }
.export-receipt svg { width:26px; height:30px; stroke:#8ad6a1; stroke-width:1; fill:none; }
.export-receipt strong { display:block; font-size:13px; font-weight:500; }
.export-receipt small { display:block; color:#a4afa9; font-size:11px; margin-top:3px; }
@keyframes receipt-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.qr-explainer { display:none; }
@media(max-width:700px) {
 .product-stack .sync-showcase { width:calc(100% - 24px); }
 .product-actions { gap:18px; flex-wrap:wrap; }
 .product-feature-layout .device-stage { min-height:0; }
 .product-stack .device-stage.is-qr .desktop-device { transform:none; }
}
@media(prefers-reduced-motion:reduce) { .export-receipt { animation:none; } }
.device-stage:not(.is-qr) .qr-phone { visibility:hidden; transform:translateY(20px) rotateY(-12deg); }
.device-stage.is-qr .qr-phone { visibility:visible; }

/* Shared footprint for the app and its foreground card. */
.signal-stage { position:relative; }
.product-stack { --matched-width:min(1080px,88vw,calc((100svh - 48px) * 1.374)); }
.product-stack .sync-showcase { width:var(--matched-width); max-width:none; padding-bottom:0; }
.product-feature-layout .device-stage { width:100%; max-width:none; }
.product-stack .device-stage { translate:none; }
.product-stack .product-tabs,.product-stack .product-notes { translate:none; }
.product-stack .review-story { width:var(--matched-width); max-width:none; height:var(--matched-height); box-sizing:border-box; border-radius:18px; display:flex; flex-direction:column; justify-content:center; padding:32px 40px; }
.product-stack .review-heading { margin-bottom:12px; }
.product-stack .confidence-signal { margin:14px 0 24px; }
.product-stack .confidence-signal svg { max-height:170px; }
.product-stack .review-decisions h3 { font-size:21px; margin:12px 0 8px; }
.product-stack .review-decisions p { font-size:15px; line-height:1.55; }
.product-actions:has(.export-receipt[hidden]) { display:none; }
@media(max-width:700px), (prefers-reduced-motion:reduce) {
 .product-stack { --matched-width:min(1080px,calc(100% - 40px)); }
 .product-stack .sync-showcase { position:relative; top:auto; }
 .product-stack .review-story { position:relative; top:auto; height:auto; padding:40px 20px; }
}

/* Landscape cards, matching Fora's broad rather than portrait-like composition. */
.signal-stage { position:sticky; top:0; translate:none; }
.signal-copy { transform:none; }
@media(min-width:701px) {
 .product-stack { --matched-width:min(1080px,88vw); }
 .product-stack .sd-preview { width:62%; margin-inline:auto; aspect-ratio:16/9; }
 .product-stack .sd-body { padding-block:.8cqw; }
 .product-stack .sd-playback { margin-block:.6cqw; }
 .product-stack .sd-tracks { min-height:9.8cqw; max-height:9.8cqw; padding-top:1cqw; }
 .product-stack .review-story { padding:42px 48px; }
 .product-stack .review-heading { margin-bottom:18px; }
 .product-stack .confidence-signal { margin:18px 0 28px; }
 .product-stack .confidence-signal svg { max-height:170px; }
 .product-stack .review-decisions h3 { font-size:clamp(20px,1.8vw,24px); }
 .product-stack .review-decisions p { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .signal-stage { position:relative; } }

/* Roomier paired cards; the preview gains width without a tall video frame. */
@media(min-width:701px) {
 .product-stack .sd-preview { width:94%; aspect-ratio:2 / 1; }
 .product-stack .confidence-signal svg { height:190px; max-height:none; }
}

/* Recessed edge tabs share the foreground card's outer footprint. */
.product-stack .device-stage { --tab-rail:60px; padding-left:var(--tab-rail); box-sizing:border-box; }
.product-stack .desktop-device { position:relative; z-index:2; }
.product-stack .device-stage > .product-tabs {
 position:absolute; inset:0 auto 0 0; width:calc(var(--tab-rail) + 18px);
 display:flex; flex-direction:column; align-items:stretch; justify-content:stretch;
 gap:8px; margin:0; padding:0; border:0; background:none; border-radius:0;
 opacity:1; transform:none; overflow:visible; z-index:1;
}
.product-stack .device-stage > .product-tabs button {
 flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
 writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
 padding:16px 12px 16px 26px; margin:0; border:1px solid #ffffff0d;
 border-radius:0 18px 18px 0; background:#101418; color:#89939b;
 font-size:13px; font-weight:500; letter-spacing:.01em;
 transition:background .2s,color .2s; text-align:center;
}
.product-stack .device-stage > .product-tabs button:hover { background:#20282a; color:#eaf1f2; }
.product-stack .device-stage > .product-tabs button[aria-selected="true"] { background:#25332d; color:#b6e5c4; border-color:#8ad6a12b; }
.product-stack .device-stage > .product-tabs button:focus-visible { outline:2px solid #8ad6a1; outline-offset:-5px; }
@media(min-width:701px) {
 .product-stack .sync-demo { min-height:min(682px,55.57vw); }
}
@media(max-width:700px) {
 .product-stack .device-stage { --tab-rail:38px; }
 .product-stack .device-stage > .product-tabs button { font-size:10px; padding:8px 8px 8px 24px; }
}

/* A single editorial rail, distinct from the app's mint controls. */
.product-stack .device-stage > .product-tabs { gap:0; background:#101317; border:1px solid #ffffff10; border-radius:18px 0 0 18px; overflow:hidden; }
.product-stack .device-stage > .product-tabs button { border:0; border-radius:0; background:transparent; color:#899099; position:relative; }
.product-stack .device-stage > .product-tabs button + button { border-bottom:1px solid #ffffff12; }
.product-stack .device-stage > .product-tabs button[aria-selected="true"] { background:#20252b; color:#f0f2f4; border-color:#ffffff12; }
.product-stack .device-stage > .product-tabs button::after { content:none; display:none; }
.product-stack .device-stage > .product-tabs button:hover { background:#252a30; color:#fff; }
.product-stack .device-stage.is-qr .desktop-device { transform:rotateY(7deg); transform-origin:left center; }
.product-stack .qr-phone { z-index:4; }
.product-stack .device-stage.is-qr .qr-phone { top:auto; bottom:16px; right:2%; transform:rotateY(-12deg); }
.export-film { position:absolute; inset:0 0 0 var(--tab-rail); z-index:5; pointer-events:none; overflow:hidden; border-radius:18px; }
.export-film[hidden] { display:none; }
.export-save { position:absolute; width:min(380px,75%); left:50%; top:25%; transform:translateX(-50%); border:1px solid #ffffff30; border-radius:12px; background:#292d33; box-shadow:0 24px 70px #0009; font-size:13px; opacity:0; }
.export-save-title { padding:16px 20px; border-bottom:1px solid #ffffff14; font-weight:600; }
.export-save-content { display:grid; grid-template-columns:65px 1fr; align-items:center; gap:14px; padding:22px; }
.export-save-content span { color:#a4adb3; }
.export-save-content strong { padding:8px 10px; border:1px solid #ffffff20; border-radius:6px; font-weight:400; background:#191d23; }
.export-save-actions { display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:0 22px 18px; }
.export-save-actions b { padding:7px 22px; background:#dfe5eb; color:#171b20; border-radius:6px; }
.export-file { position:absolute; right:5%; bottom:10%; display:grid; justify-items:center; gap:8px; opacity:0; }
.export-file-icon { display:grid; place-items:center; width:52px; height:66px; border-radius:5px 15px 5px 5px; background:#eaf1f2; color:#465768; box-shadow:0 10px 30px #0005; font-size:13px; font-weight:700; }
.export-file strong { font-size:12px; font-weight:500; }.export-file small { font-size:11px; color:#a4adb3; }
.export-cursor { position:absolute; width:13.2px; height:16.8px; left:72%; top:26%; opacity:0; }
.export-playing .export-save { animation:export-dialog 6s both; }
.export-playing .export-file { animation:export-saved 6s both; }
.export-playing .export-cursor { animation:export-pointer 6s both; }
.export-playing .sd-export { animation:export-button 6s both; }
@keyframes export-button { 0%,18%,100% { filter:none; } 10%,15% { background:#243b31; color:#b8f4ce; } }
@keyframes export-dialog { 0%,20% { opacity:0; translate:0 -12px; } 28%,62% { opacity:1; translate:0 0; } 70%,100% { opacity:0; translate:0 8px; } }
@keyframes export-saved { 0%,67% { opacity:0; transform:translateY(-28px) scale(.85); } 82%,100% { opacity:1; transform:none; } }
@keyframes export-pointer { 0% { opacity:0; left:72%; top:26%; } 8%,17% { opacity:1; left:var(--export-x); top:var(--export-y); } 42%,59% { opacity:1; left:var(--save-x); top:var(--save-y); } 65%,100% { opacity:0; left:var(--save-x); top:var(--save-y); } }
@media(prefers-reduced-motion:reduce) { .export-playing .export-save,.export-playing .export-cursor { animation:none; opacity:0; }.export-playing .export-file { animation:none; opacity:1; }.export-playing .sd-export { animation:none; } }

/* Keep a single pivot throughout the transition, including the return to flat. */
.product-stack .device-stage .desktop-device { transform-origin:left center; transform:rotateY(0deg); transition:transform .85s cubic-bezier(.22,1,.36,1); }
.product-stack .device-stage.is-qr .desktop-device { transform:rotateY(7deg); }
.product-stack .device-stage .qr-phone { top:auto; bottom:16px; right:2%; transform:translateX(100px) rotateY(-12deg); }
.product-stack .device-stage.is-qr .qr-phone { transform:translateX(0) rotateY(-12deg); }
@media(min-width:701px) { .product-stack .sd-preview img { top:-38.77%; } }
.export-save-actions button { font:inherit; border:1px solid #ffffff25; border-radius:6px; padding:7px 20px; background:#383e46; color:#eef1f4; cursor:default; }
.export-save-actions [data-export-save] { background:#dfe5eb; color:#171b20; }
.export-save-actions button:hover { filter:brightness(1.12); }
.export-manual .export-film { pointer-events:auto; }
.export-manual .export-save { opacity:1; animation:none; }
.export-manual .export-cursor { display:none; }
.product-stack .sd-export { cursor:default; }
@media(prefers-reduced-motion:reduce) { .product-stack .device-stage .desktop-device,.product-stack .device-stage .qr-phone { transition:none; } }

/* Use the available app height for the editor, with a compact fixed footer. */
@media(min-width:701px) {
 .product-stack .sync-demo { display:flex; flex-direction:column; }
 .product-stack .sd-body { flex:1; }
 .product-stack .sd-footer { flex:none; padding-block:.7cqw; }
 .product-stack .sd-preview { aspect-ratio:16/9; }
 .product-stack .sd-preview img { top:-34.46%; }
 .product-stack .sd-tracks { min-height:14cqw; max-height:14cqw; padding-top:.6cqw; }
}
.product-stack .sd-clip[data-clip="camera2"] { left:20%; width:65%; }
.product-stack .product-note-title { font-size:clamp(21px,1.8vw,24px); font-weight:500; }
.product-stack .staging-intro [data-clip] { opacity:0; transition:opacity .35s ease,translate .35s ease; }
.product-stack .staging-intro .sd-file { translate:0 -10px; }
.product-stack .staging-intro [data-clip].is-staged { opacity:1; translate:0 0; }
.product-stack .staging-intro .sd-preview img,.product-stack .staging-intro .sd-playhead { opacity:0; }
.product-stack .staging-intro.has-preview .sd-preview img,.product-stack .staging-intro.has-preview .sd-playhead { opacity:1; transition:opacity .4s; }

.product-stack .sd-track { height:2.6cqw; }

@media(min-width:701px) { .product-stack .sd-preview { width:88%; aspect-ratio:1.9; } .product-stack .sd-preview img { top:-36.83%; } }

/* One shared editor width keeps transport and timeline flush with the picture. */
.product-stack .sd-editor { --editor-content-width:100%; }
.product-stack .sd-editor > :is(.sd-preview,.sd-playback,.sd-timeline-label,.sd-timeline) {
 width:var(--editor-content-width); box-sizing:border-box; margin-inline:auto;
}
@media(min-width:701px) { .product-stack .sd-editor { --editor-content-width:88%; } }

/* The simulated press lands just before the save sheet closes. */
.export-playing [data-export-save] { animation:export-save-press 6s both; }
@keyframes export-save-press {
 0%,55%,62%,100% { background:#dfe5eb; transform:none; }
 57%,60% { background:#b6bdc5; transform:translateY(1px); }
}
.export-save-actions button:active { filter:brightness(.82); transform:translateY(1px); }
@media(prefers-reduced-motion:reduce) { .export-playing [data-export-save] { animation:none; } }

/* Video counts upward from the audio/video boundary; audio counts downward. */
.sd-track--audio-start,.terrain-app-slot .ar-track--audio {
 position:relative;
}
.sd-track--audio-start::before,.terrain-app-slot .ar-track--audio::before {
 content:""; position:absolute; z-index:2; inset:-2px 0 auto; height:3px;
 background:linear-gradient(to bottom,#343a42 0 1px,#13161a 1px 2px,#343a42 2px 3px);
 pointer-events:none;
}
.sync-demo .sd-clip[data-clip="camera2"] { left:6.6667%; width:86.6667%; }
.product-stack .sd-clip[data-clip="camera2"] { left:6.6667%; width:86.6667%; }

/* Empty editor before the staged files arrive. */
.sd-idle { display:none; position:absolute; inset:0; z-index:1; align-items:center; justify-content:center; background:linear-gradient(120deg,#192d23,#0c0e10 75%); }
.product-stack .sd-preview .sd-idle img { position:static; width:43%; height:auto; max-width:100%; opacity:1; }
.product-stack .staging-intro:not(.has-preview) .sd-idle { display:flex; }
.product-stack .staging-intro .sd-file:not(.is-staged) { opacity:0; visibility:hidden; translate:0 -18px; }
.product-stack .staging-intro .sd-clip:not(.is-staged) { opacity:0; visibility:hidden; }
.product-stack .staging-intro .sd-file.is-staged { visibility:visible; animation:stage-file-in .5s ease both; }
@keyframes stage-file-in { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:none; } }

/* Overlapping file arrivals and a true dissolve from the idle screen. */
.product-stack .sd-idle { display:flex; opacity:0; pointer-events:none; transition:opacity .8s cubic-bezier(.22,1,.36,1); }
.product-stack .staging-intro:not(.has-preview) .sd-idle { opacity:1; }
.product-stack .sd-preview > img { transition:opacity .8s cubic-bezier(.22,1,.36,1); }
.product-stack .staging-intro.has-preview .sd-preview > img { transition:opacity .8s cubic-bezier(.22,1,.36,1); }
.product-stack .staging-intro .sd-file.is-staged { animation:stage-file-in .6s cubic-bezier(.22,1,.36,1) both; }
.product-stack .staging-intro .sd-clip { transition:opacity .45s ease; }
@media(prefers-reduced-motion:reduce) { .product-stack .sd-idle,.product-stack .sd-preview > img { transition:none; } }

/* Earlier arrival with balanced acceleration and deceleration. */
.product-stack .staging-intro .sd-file.is-staged { animation-timing-function:cubic-bezier(.45,0,.55,1); }
.product-stack .staging-intro .sd-clip { transition-timing-function:cubic-bezier(.45,0,.55,1); }
.product-stack .sd-idle,
.product-stack .sd-preview > img,
.product-stack .staging-intro.has-preview .sd-preview > img { transition-timing-function:cubic-bezier(.45,0,.55,1); }

.sync-demo .sd-preview > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.product-stack .sd-preview > video { transition:opacity .8s cubic-bezier(.45,0,.55,1); }
.product-stack .staging-intro:not(.has-preview) .sd-preview > video { opacity:0; }
.product-stack .staging-intro.has-preview .sd-preview > video { opacity:1; }

/* Cover the full preview, including fractional-pixel edges during 3D motion. */
.sync-demo .sd-preview > video { object-fit:cover; object-position:center; min-width:100%; min-height:100%; transform:scale(1.005); transform-origin:center; }

/* Clip duration remains legible as varied recording lengths. */
.signal-orbits .orbit-lane:nth-child(1),.signal-orbits .orbit-lane:nth-child(3) { width:66.6667%; }
.signal-orbits .orbit-lane:nth-child(2) { width:83.3333%; }
.signal-orbits .orbit-lane:nth-child(4) { width:100%; }
.sync-demo .sd-zoom { display:flex; padding:0; overflow:hidden; }
.sync-demo .sd-zoom button { display:grid; place-items:center; border:0; background:transparent; color:#8f959f; padding:.1cqw .45cqw; font:inherit; line-height:1.3; }
.sync-demo .sd-zoom button:hover:not(:disabled) { color:#eaf1f2; background:#ffffff12; }
.sync-demo .sd-zoom button:disabled { opacity:.35; cursor:default; }
.sync-demo .sd-lane { overflow:hidden; }

/* Tab headings keep their common baseline throughout the text transition. */
.product-stack .product-notes [role="tabpanel"].panel-arrive { animation:panel-copy-dissolve 260ms ease-in-out; }
@keyframes panel-copy-dissolve { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .product-stack .product-notes [role="tabpanel"].panel-arrive { animation:none; } }

/* Offset recordings share one time axis; camera 1 and its sound stay paired. */
.signal-orbits .orbit-lane:nth-child(1) { left:8%; width:88%; }
.signal-orbits .orbit-lane:nth-child(2),.signal-orbits .orbit-lane:nth-child(3) { left:12%; width:80%; }
.signal-orbits .orbit-lane:nth-child(4) { left:0; width:96%; }

/* Quiet navigation and an independently masked closing foreground. */
.site-bar__mark { display:flex; align-items:center; }
.site-bar__mark img { display:block; width:129.2px; height:auto; }
.site-nav { display:flex; align-items:center; gap:clamp(18px,3vw,38px); }
.site-nav a { color:#313a32; font:500 13px/1.4 Geist,sans-serif; text-decoration:none; opacity:1; transition:color .2s; }
.site-nav a:hover { opacity:1; }
.site-nav a:focus-visible { outline:2px solid #456b50; outline-offset:6px; border-radius:3px; }
#features,#review { scroll-margin-top:40px; }

@media(max-width:520px) { .site-bar { padding-inline:20px; } .site-bar__mark img { width:102px; } .site-nav { gap:14px; } .site-nav a { font-size:11px; } }

/* Both story illustrations use the same waveform geometry. */
.orbit-wave svg { display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:#8ad6a1; stroke-width:3; stroke-linecap:round; }
#shared-waveform path { vector-effect:non-scaling-stroke; stroke-width:2px; }

/* Sequential frames from the two supplied camera views. */
.orbit-film .film-frame { flex:1 0 0; }
.orbit-film .film-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:100%; }
.camera-lane:nth-child(2) .film-frame img { filter:none; }

/* Persistent navigation; original logo colours and flat beta badge. */
.site-bar { position:fixed; transition:background-color .2s ease; }
.site-bar, .site-bar.is-scrolled { background:transparent; }
.site-bar.is-scrolled .site-nav a { color:#b8bec7; }
.site-bar.is-scrolled .site-nav a:focus-visible { outline-color:#8ad6a1; }
#about,#features { scroll-margin-top:100px; }
.hero__text .badge { background:#d8e1d5; color:#35443a; border:1px solid #b9c8ba; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
@media(prefers-reduced-motion:reduce) { .site-bar { transition:none; } }

/* Logo shadow is restricted to the bright hero; timeline Lime for page progress. */
.site-bar__mark img { filter:drop-shadow(0 1px 2px rgba(13,15,18,.48)) drop-shadow(0 3px 8px rgba(13,15,18,.2)); transition:filter .2s; }
.site-bar.is-scrolled .site-bar__mark img { filter:none; }
.site-bar.is-scrolled .site-nav a:hover { color:#eaf1f2; }
[data-sc-progress] { background:#d8e63f; z-index:90; }
@media(prefers-reduced-motion:reduce) { .site-bar__mark img,.site-nav a { transition:none; } }

/* Keep the shared desktop footprint, but let wrapped content grow the card. */
.product-stack .review-story { height:auto; min-height:var(--matched-height,0px); }
.product-stack .review-story > * { flex-shrink:0; }
@media(max-width:700px), (prefers-reduced-motion:reduce) {
 .product-stack .review-story { min-height:0; }
}
@media(max-width:1100px) {
 .product-stack .confidence-signal { translate:none; }
}

.story-footer { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px; text-align:left; color:#b8bec7; }
.story-footer .footer-links { display:flex; gap:25px; flex-wrap:wrap; }
.story-footer a,.story-footer small { color:#b8bec7; font-size:12px; font-weight:400; text-decoration:none; }
.story-footer a:hover { color:#eaf1f2; }
@media(max-width:600px){.story-footer{flex-wrap:wrap;gap:18px;}}

.site-bar .site-nav a { color:#313a32; }
.site-bar .site-nav.on-dark a { color:#b8bec7; }
.site-bar .site-nav.on-dark a:hover { color:#eaf1f2; }
.site-bar__mark.on-dark img { filter:none; }
.product-stack .staging-intro .sd-file.is-staged { animation-duration:.85s; }
.product-stack .staging-intro .sd-clip { transition-duration:.65s; }

/* Only the bright hero uses the monochrome lockup. */
.site-bar__mark { position:relative; }
.site-bar__mark img { filter:none; transition:opacity .2s ease; }
.site-bar__mark .logo-original { position:absolute; inset:0; opacity:0; }
.site-bar__mark.on-dark .logo-original { opacity:1; }
.site-bar__mark.on-dark .logo-hero { opacity:0; }
@media(prefers-reduced-motion:reduce){.site-bar__mark img{transition:none;}}

html, body { overscroll-behavior-y:none; }

/* Phone composition: preserve the desktop scene and keep touch content in bounds. */
@media(max-width:700px) {
 html,body { max-width:100%; overflow-x:clip; }
 #hero-stage .hero__text { width:78vw; }
 #hero-stage .hero__text .badge { transform:scale(.6); margin-block:-8px; }
 .signal-stage { overflow:clip; }
 .signal-copy { opacity:1; }
 .signal-copy h2 { mask-image:none; -webkit-mask-image:none; }
 .product-stack .device-stage { --tab-rail:0px; padding:0; width:100%; min-height:0; }
 .product-stack .desktop-device { width:100%; margin:0; }
 .product-stack .device-stage .desktop-device,
 .product-stack .device-stage.is-qr .desktop-device { transform:none; opacity:1; }
 .product-stack .sync-demo,.app-visual-media .sync-demo { border-radius:6px; }
 .product-stack .sync-demo { height:auto; min-height:0; }
 .product-stack .sd-body { height:auto; min-height:0; }
 .product-stack .sd-tracks { height:18cqw; min-height:18cqw; max-height:18cqw; padding-top:.5cqw; }
 .product-stack .sd-track { height:3.4cqw; }
 .product-stack .device-stage > .product-tabs {
  position:relative; inset:auto; width:100%; flex-direction:row; min-height:48px;
  border-radius:0 0 6px 6px; margin-top:-3px; padding-top:3px; overflow:hidden;
 }
 .product-stack .device-stage > .product-tabs button {
  writing-mode:horizontal-tb; transform:none; white-space:normal; min-width:0;
  font-size:10px; line-height:1.35; padding:10px 6px; border-radius:0;
 }
 .product-stack .device-stage > .product-tabs button + button { border-bottom:0; border-left:1px solid #ffffff12; }
 .product-stack .device-stage .qr-phone { display:none; }
 .product-stack .device-stage.is-qr .qr-phone {
  display:block; position:relative; inset:auto; width:160px; margin:18px auto;
  transform:none; opacity:1; visibility:visible;
 }
 .product-stack .export-film { inset:0 0 48px; border-radius:6px; }
 .export-save { width:82%; top:18%; font-size:10px; border-radius:7px; }
 .export-save-title { padding:9px 12px; }
 .export-save-content { grid-template-columns:48px minmax(0,1fr); padding:12px; gap:8px; }
 .export-save-content strong { padding:5px 6px; }
 .export-save-actions { gap:12px; padding:0 12px 10px; }
 .export-save-actions b,.export-save-actions button { font-size:10px; padding:5px 12px; }
 .product-stack { padding-bottom:calc(var(--chapter-gap) * .5); }
 .app-visual { padding-top:16px; }
 .app-visual-media { margin-left:25%; margin-right:-40%; }
}
@media(max-width:700px) {
 .product-stack .device-stage.is-qr { padding:0; min-height:0; }
 .product-stack .device-stage .desktop-device { transition:none; }
}
@media(max-width:700px) {
 .product-stack .device-stage { display:flex; flex-direction:column; }
 .product-stack .device-stage > .desktop-device { order:0; }
 .product-stack .device-stage > .qr-phone { order:1; }
 .product-stack .device-stage > .product-tabs { order:2; flex-shrink:0; }
}

@media(max-width:700px) {
 .product-stack .device-stage.is-qr .desktop-device { filter:brightness(.9); }
 .product-stack .device-stage .desktop-device { transition:filter .3s ease; }
 .product-stack .device-stage.is-qr .qr-phone {
  position:absolute; left:50%; right:auto; top:var(--mobile-qr-center,120px); bottom:auto;
  width:160px; margin:0; transform:translate(-50%,-50%) scale(var(--mobile-qr-scale,.65));
  transform-origin:center; z-index:4;
 }
}

@media(max-width:700px) { #hero-stage .hero__text .hero__sub + a { margin-top:16px; } }

/* One shared outer radius across all three app presentations. */
.terrain-app-slot .ar-window,.product-stack .sync-demo,.app-visual-media .sync-demo { border-radius:18px; }
@media(max-width:700px) { .terrain-app-slot .ar-window,.product-stack .sync-demo,.app-visual-media .sync-demo { border-radius:6px; } }

@media(max-width:700px) {
 .terrain-app-slot .ar-toolbar { display:flex; flex-wrap:nowrap; }
 .terrain-app-slot .ar-rail { display:flex; width:28%; min-width:0; padding:1.65cqw 1.65cqw 1.65cqw 0; gap:1cqw; }
 .terrain-app-slot .ar-body { flex-direction:row; }
 .terrain-app-slot .ar-staged,.terrain-app-slot .ar-fps-label { display:inline; }
 .terrain-app-slot .ar-window,.product-stack .sync-demo,.app-visual-media .sync-demo { border-radius:6px; border-width:.5px; }
 /* The selected tab extends behind the rounded bottom corners of the app. */
 .product-stack .device-stage > .product-tabs { margin-top:-7px; padding-top:0; }
 .product-stack .device-stage > .product-tabs button { padding-top:17px; }
 .product-stack .device-stage.is-qr .desktop-device { filter:brightness(.85); }
 .product-stack .device-stage.is-qr .qr-phone {
  left:76%; transform:translate(-50%,-50%) scale(var(--mobile-qr-scale,.65)) perspective(700px) rotateY(-12deg) rotateZ(2deg);
  filter:drop-shadow(-10px 14px 14px rgba(0,0,0,.65));
 }
 .app-visual-media { margin-left:55%; margin-right:-70%; }
}

/* Scale the complete hero interface across phone and tablet widths. */
@media(max-width:1100px) {
 .terrain-app-slot .ar-titlebar { height:2.7cqw; padding:0 1.65cqw; gap:.6cqw; }
 .terrain-app-slot .ar-traffic { width:1cqw; height:1cqw; }
 .terrain-app-slot .ar-title { font-size:1.15cqw; }
 .terrain-app-slot .ar-toolbar { display:flex; flex-wrap:nowrap; height:4.3cqw; padding:0 1.65cqw 1cqw; gap:1cqw; overflow:visible; }
 .terrain-app-slot .ar-body { display:flex; flex-direction:row; }
 .terrain-app-slot .ar-editor { width:72%; flex:1; min-width:0; }
 .terrain-app-slot .ar-rail { display:flex; flex:0 0 28%; min-width:0; padding:1.65cqw 1.65cqw 1.65cqw 0; gap:1cqw; box-sizing:border-box; }
 .terrain-app-slot .ar-card { font-size:1.2cqw; padding:1cqw 1.2cqw; border-radius:.6cqw; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
 .terrain-app-slot .ar-preview { display:flex; }
}

@media(max-width:700px) { .terrain-app-slot .ar-editor .ar-preview { border-radius:.9cqw; } }