/* Product story experiment. Scoped to content below the approved introduction. */
.product-intro, .product-tabs, .product-notes, .review-story { max-width: 1180px; margin-inline: auto; }
.product-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8%; align-items: end; padding: 40px 0 48px; }
.product-intro h2, .review-heading h2, .story-close h2 { margin: 0; font-size: clamp(36px, 4.5vw, 68px); font-weight: 450; letter-spacing: -.055em; line-height: 1.05; text-wrap: balance; color: #eaf1f2; }
.product-intro p, .review-heading p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: #a4adb3; max-width: 40ch; margin: 0 0 3px; }
.product-tabs { display: flex; justify-content: center; gap: clamp(16px, 4vw, 60px); margin-bottom: 36px; }
.product-tabs button { position: relative; font: 500 clamp(12px, 1.2vw, 16px)/1.4 "Geist", sans-serif; color: #a4adb3; padding: 14px 0; background: none; border: 0; cursor: pointer; transition: color 160ms; }
.product-tabs button::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #8ad6a1; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
.product-tabs button[aria-selected="true"] { color: #eaf1f2; }.product-tabs button[aria-selected="true"]::after { transform: scaleX(1); }.product-tabs button:hover { color: #8ad6a1; }.product-tabs button:active { transform: translateY(1px); }
.product-tabs button:focus-visible, .story-footer a:focus-visible { outline: 2px solid #8ad6a1; outline-offset: 6px; border-radius: 2px; }
.product-notes { position: relative; padding: 0 max(24px, 5vw); margin-top: -72px; margin-bottom: clamp(100px, 13vw, 190px); min-height: 180px; }
.product-notes [role="tabpanel"] { max-width: 720px; margin: auto; text-align: center; }
.product-note-title { color: #eaf1f2; font-size: clamp(23px, 2.4vw, 32px); letter-spacing: -.035em; margin: 0 0 14px; }
.product-notes p:not(.product-note-title) { color: #a4adb3; font-size: 17px; line-height: 1.65; margin: 0; text-wrap: pretty; }
.product-hint { display: block; color: #8ad6a1; font-size: 13px; line-height: 1.6; margin-top: 20px; }
.product-notes [role="tabpanel"].panel-arrive { animation: panel-arrive 260ms ease-out; }
@keyframes panel-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.review-story { padding: 0 max(24px, 5vw) clamp(120px, 15vw, 220px); }
.review-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8%; align-items: end; margin-bottom: 70px; }
.review-detail { position: relative; padding-left: 36px; }
.review-point { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; padding: 30px 0; border-bottom: 1px solid #eaf1f217; }
.review-point h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 450; letter-spacing: -.025em; }.review-point p { margin: 0; max-width: 45ch; color: #a4adb3; font-size: 17px; line-height: 1.6; }
.review-status { align-self: start; display: flex; align-items: center; gap: 10px; font-size: 14px; padding-top: 7px; color: #a4adb3; }.review-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8ad6a1; }.review-status--check::before { background: #d9a441; }.review-status--decision::before { background: #5a7a9e; }
.review-path { position: absolute; top: 37px; bottom: 35px; left: 0; width: 1px; background: #eaf1f217; }.review-path span { position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #5a7a9e; }.review-path span:nth-child(2) { top: 50%; }.review-path span:nth-child(3) { bottom: 0; }
.story-close { position: relative; isolation: isolate; overflow: hidden; min-height: 760px; padding: 90px max(24px, 8vw) 0; background: #101319; }
.story-close-landscape { position: absolute; z-index: -1; inset: 0; background: url("assets/img/generated/terrain-final/02-grosse-bergkette-2560.webp") center bottom / cover no-repeat; opacity: .45; mask-image: linear-gradient(to bottom, transparent 5%, #000 55%); }
.story-close-copy { position: relative; max-width: 650px; padding-bottom: 190px; }
.story-availability { font-size: 14px; color: #8ad6a1; margin: 0 0 25px; }.story-close h2 { font-size: clamp(44px, 6vw, 88px); }.story-close-copy > p:not(.story-availability):not(.story-footnote) { color: #c0c7ca; font-size: 20px; line-height: 1.6; margin: 28px 0; }.story-close .waitlist { margin-inline: 0; max-width: 540px; }.story-close .story-footnote { color: #a4adb3; font-size: 12px; margin-top: 16px; }
.story-footer { display: flex; justify-content: space-between; gap: 24px; padding: 26px 0; border-top: 1px solid #eaf1f233; }.story-footer a { text-decoration: none; color: #eaf1f2; font-size: 14px; }.story-footer > a { font-weight: 600; font-size: 20px; letter-spacing: -.04em; }.story-footer span { display: flex; align-items: center; gap: 25px; }.story-footer a:hover { color: #8ad6a1; }.story-footer a:active { opacity: .75; }
.story-enter.story-pending { opacity: 0; transform: translateY(16px); }.story-enter { transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1); }
@media(max-width: 700px) { .product-intro, .review-heading { grid-template-columns: 1fr; gap: 24px; }.product-intro { padding: 32px 8px; }.product-tabs { gap: 20px; justify-content: flex-start; overflow-x: auto; }.product-tabs button { flex: 0 0 auto; }.product-notes { margin-top: -40px; margin-bottom: 85px; min-height: 240px; }.product-notes p:not(.product-note-title) { font-size: 16px; }.review-heading { margin-bottom: 32px; }.review-point { grid-template-columns: 1fr; gap: 16px; }.review-detail { padding-left: 22px; }.story-close { padding-top: 55px; min-height: 720px; }.story-close-copy { padding-bottom: 140px; }.story-close-landscape { background-position: 60% bottom; background-size: auto 65%; }.story-footer { flex-wrap: wrap; } }
@media(prefers-reduced-motion: reduce) { .story-enter, .product-tabs button::after { transition: none; }.story-enter.story-pending { opacity: 1; transform: none; }.product-notes [role="tabpanel"].panel-arrive { animation: none; } }

/* Keep feature feedback adjacent to the tabs, above the untouched app. */
.sync-showcase .product-notes { margin: 0 auto 36px; padding: 0; min-height: 175px; }
@media(max-width: 700px) { .sync-showcase .product-notes { min-height: 245px; padding: 0 8px; margin-bottom: 24px; } }

.story-close .waitlist__input { min-height: 48px; }
@media(max-width: 700px) { .story-close .waitlist__input { flex: none; width: 100%; } }

/* Second direction: centred product opening, confidence as an alignment motif. */
.product-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.product-intro p { max-width: 52ch; margin-inline: auto; }
.review-v2 .review-heading { display: block; text-align: center; margin-bottom: 20px; }
.review-v2 .review-heading p { margin: 24px auto 0; max-width: 50ch; }
.confidence-signal { position: relative; margin: 28px 0 50px; padding-left: 60px; }
.confidence-signal svg { display: block; width: 100%; height: auto; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.signal-caption { position: absolute; left: 0; top: 31%; font-size: 12px; color: #8f959f; }.signal-caption--audio { top: 66%; }
.signal-inspect { position: absolute; left: 69%; top: 5%; color: #d9a441; font-size: 12px; }
.review-decisions { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; }
.review-decisions h3 { font-size: clamp(20px,2vw,27px); font-weight: 500; letter-spacing: -.03em; margin: 18px 0 12px; }
.review-decisions p { color: #a4adb3; font-size: 16px; line-height: 1.65; margin: 0; max-width: 30ch; }
.story-close { min-height: 850px; }
.story-close-copy { text-align: center; margin-inline: auto; max-width: 780px; padding-bottom: 250px; }
.story-close .waitlist { margin-inline: auto; }
.story-close-landscape { background: none; opacity: .65; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 12%, #000 65%); }
.story-close-landscape img { position: absolute; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center bottom; inset: 110px 0 auto; pointer-events: none; will-change: transform; }
.story-footer { position: relative; justify-content: center; flex-direction: column; align-items: center; text-align: center; }
@media(max-width:700px) { .review-decisions { grid-template-columns: 1fr; gap: 32px; max-width: 420px; margin: auto; }.review-decisions article { text-align: center; }.review-decisions .review-status { justify-content: center; }.review-decisions p { margin-inline: auto; }.confidence-signal { padding-left: 0; margin-bottom: 40px; }.signal-caption { display: none; }.signal-inspect { top: -10%; left: 62%; font-size: 10px; }.story-close-copy { padding-bottom: 220px; }.story-close-landscape { background: none; }.story-close-landscape img { object-position: 60% bottom; inset-block-start: 160px; }.story-close { min-height: 800px; } }
@media(prefers-reduced-motion:reduce) { .story-close-landscape img { transform: none !important; will-change: auto; } }

/* Fade the moving image bases into the footer surface. */
.story-close-landscape { mask-image: linear-gradient(to bottom, transparent 12%, #000 58%, #000 73%, transparent 98%); }

/* Two recordings settle into alignment; a shared playhead reveals the match. */
.confidence-signal { padding-left: 105px; }
.signal-wave--camera { transform: translateX(var(--camera-offset, -18px)); }
.signal-wave--audio { transform: translateX(var(--audio-offset, 36px)); }
.signal-wave { opacity: var(--signal-opacity, .5); }
.signal-scan { opacity: 0; }
.signal-aligned .signal-scan { animation: signal-scan 14.4s linear both; }
@keyframes signal-scan {
 from { transform: translateX(30px); opacity:1; }
 99.9% { opacity:1; }
 to { transform: translateX(970px); opacity:0; }
}
@media(max-width:700px) {
 .confidence-signal { padding: 25px 0 0; }
 .signal-caption { display:block; top:29%; font-size:9px; z-index:1; background:#15181de6; padding:3px 5px; border-radius:3px; }
 .signal-caption--audio { top:64%; }
}
@media(prefers-reduced-motion:reduce) {
 .signal-wave, .signal-scan { animation:none; }
 .signal-wave { transform:none; opacity:1; }
 .signal-scan { display:none; }
}

/* Layered product chapters, independent of the hero. */
.product-stack { position:relative; padding-bottom:60px; }
.product-stack .sync-showcase { position:sticky; top:var(--product-stick,24px); margin-bottom:0; padding-bottom:70px; border:1px solid #ffffff12; border-radius:28px; }
.product-stack .review-story { position:relative; z-index:3; max-width:none; margin:48px 3vw 0; padding:70px max(24px,5vw) 80px; background:#171c21; border:1px solid #ffffff18; border-radius:28px; box-shadow:0 -24px 70px #0005; }
.device-stage { position:relative; perspective:1600px; max-width:1250px; margin:auto; }
.desktop-device { transform-origin:50% 50%; transition:transform 850ms cubic-bezier(.2,.7,.2,1); }
.device-stage.is-qr .desktop-device { transform:translateX(-7%) rotateY(12deg) rotateX(2deg) scale(.78); }
.qr-phone { position:absolute; top:50%; right:3%; width:230px; margin:0; opacity:0; visibility:hidden; transform:translate(90px,-45%) rotateY(-14deg) rotateZ(3deg); transition:transform 850ms cubic-bezier(.2,.7,.2,1),opacity 500ms,visibility 850ms; }
.is-qr .qr-phone { opacity:1; visibility:visible; transform:translate(0,-50%) rotateY(-8deg); }
.qr-screen { position:relative; padding:17px 15px 28px; border:7px solid #060808; outline:1px solid #686e70; border-radius:38px; background:#14191c; color:#eaf1f2; box-shadow:12px 28px 55px #0008; }
.qr-notch { position:absolute; top:0; left:29%; width:42%; height:21px; background:#060808; border-radius:0 0 13px 13px; }
.qr-status { display:flex; justify-content:space-between; font-size:9px; margin:0 3px 18px; }
.qr-app-title { text-align:center; font-size:13px; font-weight:600; }
.qr-app-title small { display:block; margin-top:3px; color:#8f959f; font-size:9px; font-weight:400; }
.qr-time-label,.qr-code-label { font-size:7px; text-transform:uppercase; letter-spacing:2px; margin-top:19px; }
.qr-time-label { text-align:center; }
.qr-time { font:700 23px/1.5 "DSEG7 Classic",monospace; white-space:nowrap; text-align:center; margin-top:4px; }
.qr-meter-label { display:flex; justify-content:space-between; color:#a4adb3; font-size:8px; margin-top:20px; }
.qr-meter { display:flex; gap:2px; height:15px; align-items:end; margin-top:4px; }
.qr-meter i { flex:1; height:var(--bar); background:#6bd89f; opacity:.25; }
.qr-meter i.lit { opacity:1; }
.qr-code { display:block; width:100%; background:#000; border-radius:7px; margin-top:6px; padding:7px; }
.qr-rate { display:flex; align-items:center; gap:3px; border-top:1px solid #ffffff12; padding-top:14px; margin-top:23px; font-size:9px; }
.qr-rate select { margin-left:auto; appearance:auto; color:#8ad6a1; background:#14191c; border:0; font:inherit; cursor:pointer; }
.qr-rate span { color:#8ad6a1; }
.qr-home { width:40%; height:3px; background:#606568; border-radius:3px; margin:34px auto -18px; }
.qr-preview-note { font-size:11px; text-align:center; color:#8f959f; margin-top:12px; }
@media(max-width:700px) {
 .product-stack .sync-showcase { position:relative; top:auto; border-radius:18px; }
 .product-stack .review-story { margin:24px 12px 0; padding:44px 18px; border-radius:18px; }
 .device-stage.is-qr { padding-bottom:490px; }
 .device-stage.is-qr .desktop-device { transform:rotateY(7deg) scale(.95); }
 .qr-phone { top:auto; bottom:0; right:50%; width:210px; transform:translate(80% ,30px); }
 .is-qr .qr-phone { transform:translate(50%,0); }
 .qr-time { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
 .product-stack .sync-showcase { position:relative; top:auto; }
 .desktop-device,.qr-phone { transition:none; }
 .device-stage.is-qr .desktop-device { transform:translateX(-7%) scale(.78); }
}

/* Cohesive app surfaces and a smaller confidence chapter. */
.product-stack { --story-title:clamp(32px,3.6vw,50px); --story-body:clamp(16px,1.35vw,18px); }
.product-stack .sync-showcase { border:0; border-radius:0; }
.product-intro h2,.product-stack .review-heading h2 { font-size:var(--story-title); }
.product-intro p,.product-stack .review-heading p,.product-notes p:not(.product-note-title) { font-size:var(--story-body); line-height:1.6; }
.product-stack .review-story { width:calc(100% - 12vw); max-width:1080px; margin:48px auto 0; padding:48px clamp(24px,4vw,56px) 52px; border-radius:22px; }
.product-stack .review-heading p { margin-top:18px; }
.product-stack .review-decisions { gap:28px; }
.product-stack .review-decisions h3 { font-size:clamp(20px,1.8vw,24px); }
.product-stack .review-decisions p { font-size:16px; }
.product-stack .confidence-signal { margin:18px 0 28px; }
.device-stage { isolation:isolate; }
.device-stage::before { content:""; position:absolute; z-index:-1; inset:-5% -3% -8%; pointer-events:none; background:radial-gradient(ellipse at 48% 55%,#8ad6a123 0%,#5a7a9e0d 40%,transparent 68%); opacity:.65; transition:opacity 650ms; }
.device-stage.is-qr::before { opacity:1; }
.device-stage.is-qr .desktop-device { transform:translateX(-9%) rotateY(7deg) scale(.72); }
.qr-phone { right:4%; width:220px; }
.is-qr .qr-phone { transform:translate(0,-50%) rotateY(-4deg); }
.qr-screen { border:1px solid #343a42; outline:none; border-radius:16px; padding:20px 18px 24px; background:#15181d; box-shadow:0 24px 60px #0005; }
.qr-notch,.qr-home { display:none; }
.qr-status { margin:0 0 16px; }
.qr-status > span:last-child { display:none; }
.qr-app-title { font-size:15px; }
.qr-time { font-size:23px; }
.qr-rate { font-size:11px; }
@media(max-width:700px) {
 .product-stack .review-story { width:calc(100% - 40px); padding:34px 20px 38px; margin-top:32px; border-radius:18px; }
 .product-stack .review-decisions { gap:24px; }
 .device-stage.is-qr { padding-bottom:470px; }
 .device-stage.is-qr .desktop-device { transform:rotateY(3deg) scale(.95); }
 .qr-phone { right:50%; width:210px; }
 .is-qr .qr-phone { transform:translate(50%,0); }
 .qr-time { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) {
 .device-stage::before { transition:none; }
 .device-stage.is-qr .desktop-device { transform:translateX(-9%) scale(.72); }
 .is-qr .qr-phone { transform:translate(0,-50%); }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) {
 .device-stage.is-qr .desktop-device { transform:none; }
 .is-qr .qr-phone { transform:translate(50%,0); }
}

/* Keep the device group inside the covering chapter's footprint. */
.product-stack { padding-bottom:0; }
.device-stage { max-width:940px; width:100%; }
.desktop-device { transform-origin:center top; }
.device-stage.is-qr .desktop-device { transform:translateX(-6%) rotateY(6deg) scale(.76); }
.sync-showcase .product-notes { min-height:0; margin-bottom:28px; }
.qr-phone { width:250px; right:3%; top:24px; }
.is-qr .qr-phone { transform:translate(0,0) rotateY(-3deg); }
.qr-status { display:none; }
.qr-screen { padding:18px 18px 20px; }
.qr-code { max-width:176px; margin-inline:auto; }
.qr-time-label,.qr-code-label { margin-top:12px; }
.qr-meter-label { margin-top:12px; }
.qr-rate { margin-top:16px; padding-top:12px; }
.product-stack .review-story { min-height:calc(100svh - 40px); }
@media(min-width:701px) {
 .device-stage { width:calc(100% - 60px); }
}
@media(max-width:700px) {
 .device-stage.is-qr { padding-bottom:420px; }
 .device-stage.is-qr .desktop-device { transform:scale(.94); }
 .qr-phone { width:240px; right:50%; top:auto; bottom:0; }
 .is-qr .qr-phone { transform:translateX(50%); }
 .product-stack .review-story { min-height:0; }
}
@media(prefers-reduced-motion:reduce) and (min-width:701px) {
 .device-stage.is-qr .desktop-device { transform:translateX(-6%) scale(.76); }
 .is-qr .qr-phone { transform:none; }
}

/* Compact product composition with opposing device perspectives. */
.product-stack .product-intro { padding:20px 0 24px; gap:14px; }
.product-stack .product-intro h2 { font-size:clamp(30px,3.1vw,44px); }
.product-stack .product-intro p { max-width:60ch; }
.product-stack .product-tabs { margin-bottom:18px; }
.product-stack .product-notes { margin-bottom:20px; }
.product-stack .product-note-title { margin-bottom:8px; font-size:clamp(22px,2.1vw,28px); }
.product-stack .product-hint { margin-top:10px; }
.product-stack .sync-showcase { padding-bottom:40px; }
.product-stack .review-story { min-height:0; padding-top:60px; padding-bottom:48px; }
.device-stage { max-width:760px; }
.qr-phone { width:210px; right:4%; top:50px; }
.qr-screen { min-height:440px; display:flex; flex-direction:column; }
.qr-rate { margin-top:auto; }
.qr-code { margin-bottom:18px; }
.qr-time { font-size:21px; }
.device-stage.is-qr .desktop-device { transform:translateX(-7%) rotateY(10deg) scale(.76); }
.is-qr .qr-phone { transform:translate(0,0) rotateY(-12deg) rotateZ(1deg); }
@media(min-width:701px) and (max-height:800px) {
 .device-stage { max-width:580px; }
 .qr-phone { width:180px; top:36px; }
 .qr-screen { min-height:378px; padding:14px; }
 .qr-code { max-width:142px; }
 .qr-time { font-size:18px; }
 .product-stack .product-intro { padding-top:12px; padding-bottom:16px; gap:10px; }
 .product-stack .product-intro h2 { font-size:32px; }
 .product-stack .product-tabs { margin-bottom:12px; }
 .product-stack .product-notes { margin-bottom:16px; }
 .product-stack .product-intro p,.product-stack .product-notes p:not(.product-note-title) { font-size:16px; }
}
@media(max-width:700px) {
 .device-stage.is-qr { padding-bottom:450px; }
 .device-stage.is-qr .desktop-device { transform:rotateY(5deg) scale(.94); }
 .qr-phone { width:210px; right:50%; top:auto; }
 .is-qr .qr-phone { transform:translateX(50%) rotateY(-7deg); }
 .product-stack .review-story { padding:40px 20px; }
}
@media(prefers-reduced-motion:reduce) and (min-width:701px) {
 .device-stage.is-qr .desktop-device { transform:translateX(-7%) scale(.76); }
 .is-qr .qr-phone { transform:none; }
}

@media(min-width:701px) {
 .device-stage { max-width:min(680px,68svh); }
 .qr-phone { width:clamp(174px,22svh,200px); top:36px; }
 .qr-screen { min-height:clamp(370px,46svh,420px); padding:14px; }
 .qr-code { max-width:150px; }
 .qr-time { font-size:19px; }
 .product-stack .product-intro { padding-bottom:16px; }
 .product-stack .product-tabs { margin-bottom:12px; }
}

/* Shared chapter footprint; explanation beside the full-size product. */
.product-stack .sync-showcase { width:calc(100% - 12vw); max-width:1080px; margin-inline:auto; padding:40px 0 44px; }
.product-stack .product-intro { padding:0 0 24px; gap:16px; }
.product-stack .product-intro h2 { font-size:var(--story-title); }
.product-stack .product-tabs { margin-bottom:34px; }
.product-feature-layout { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,2fr); gap:32px; align-items:center; }
.sync-showcase .product-notes { margin:0; padding:0; min-height:0; }
.product-notes [role="tabpanel"] { text-align:left; }
.product-stack .product-note-title { font-size:clamp(22px,2.1vw,28px); margin-bottom:16px; }
.product-stack .product-hint { margin-top:20px; }
.device-stage { width:100%; max-width:none; }
.device-stage.is-qr .desktop-device { transform:translateX(-3%) rotateY(9deg) scale(.91); }
.qr-phone { width:clamp(170px,17vw,200px); right:-1%; top:23%; }
.qr-screen { min-height:390px; }
.is-qr .qr-phone { transform:translate(0,0) rotateY(-12deg); }
.product-stack .review-story { margin-top:44px; }
@media(max-width:700px) {
 .product-stack .sync-showcase { width:calc(100% - 40px); padding:28px 0 32px; }
 .product-feature-layout { grid-template-columns:1fr; gap:24px; }
 .product-notes [role="tabpanel"] { text-align:center; }
 .device-stage.is-qr { padding-bottom:440px; }
 .device-stage.is-qr .desktop-device { transform:rotateY(5deg) scale(.94); }
 .qr-phone { right:50%; top:auto; bottom:0; width:200px; }
 .is-qr .qr-phone { transform:translateX(50%) rotateY(-7deg); }
}
@media(prefers-reduced-motion:reduce) and (min-width:701px) {
 .device-stage.is-qr .desktop-device { transform:translateX(-3%) scale(.91); }
 .is-qr .qr-phone { transform:none; }
}

/* Match the hero window, preserving the video geometry. */
.product-stack .sync-demo { border-radius:18px; }
.product-stack .sd-preview { aspect-ratio:16 / 9; height:auto; }
.product-stack .sd-body { padding-top:1.65cqw; padding-bottom:1.65cqw; }
.product-stack .sd-tracks { min-height:11.2cqw; max-height:11.2cqw; padding-top:1.4cqw; }
.product-stack .sd-playback { margin-block:1cqw; }
.product-stack .sd-footer { padding-block:.7cqw; }

/* Space controls playback without outlining the time ruler. Arrow-key focus remains visible. */
.sync-demo .sd-ruler.is-transport-key { outline:none; }

/* Consistent breathing room around the confidence chapter. */
.product-stack { --chapter-gap:clamp(180px,24vh,300px); padding-bottom:var(--chapter-gap); }
.product-stack .review-story { margin-top:var(--chapter-gap); }
.product-stack .product-intro p { max-width:none; }
@media(max-width:700px) {
 .product-stack { --chapter-gap:clamp(110px,18vh,180px); }
}

/* Intro leaves naturally; tabs and product become the next reading stage. */
.product-intro--flow { width:calc(100% - 12vw); max-width:1080px; margin:0 auto 48px; padding:40px 0 0; gap:16px; }
.product-intro--flow h2 { font-size:clamp(32px,3.6vw,50px); }
.product-intro--flow p { max-width:none; font-size:clamp(16px,1.35vw,18px); }
.product-stack .sync-showcase { margin-top:0; padding-top:12px; padding-bottom:32px; }
.product-feature-layout { display:flex; flex-direction:column; gap:22px; }
.product-feature-layout .device-stage { order:0; width:100%; max-width:min(980px,85svh); }
.product-feature-layout .product-notes { order:1; width:100%; max-width:820px; }
.product-notes [role="tabpanel"] { text-align:center; max-width:none; }
.product-stack .product-note-title { font-size:22px; margin-bottom:8px; }
.product-stack .product-notes p:not(.product-note-title) { font-size:16px; }
.product-stack .product-hint { margin-top:8px; }
.product-stack .product-tabs { margin-bottom:22px; }
@media(max-width:700px) {
 .product-intro--flow { width:calc(100% - 40px); margin-bottom:32px; padding-top:28px; }
 .product-feature-layout .device-stage { max-width:100%; }
 .product-stack .sync-showcase { padding-top:0; }
}

/* Feature copy belongs between the tabs and the app. */
.product-feature-layout .product-notes { order:0; }
.product-feature-layout .device-stage { order:1; }

/* Reserve the tallest caption so switching tabs never relocates the app. */
.product-feature-layout .product-notes { display:grid; }
.product-feature-layout .product-notes [role="tabpanel"] { grid-area:1 / 1; align-self:end; width:100%; margin:0; }
.product-feature-layout .product-notes [role="tabpanel"][hidden] { display:block; visibility:hidden; pointer-events:none; }
.product-feature-layout { gap:clamp(36px,4.5vh,52px); }
@media(max-width:700px) {
 .product-feature-layout .device-stage { padding-bottom:440px; }
}

/* Clarity settles near the top; the preceding navigation yields on arrival. */
.product-stack .review-story { position:sticky; top:16px; }
.product-tabs:not(.story-pending), .product-notes:not(.story-pending) {
 opacity:var(--handoff-opacity,1);
 transition:none;
}
@media(max-width:700px), (prefers-reduced-motion:reduce) {
 .product-stack .review-story { position:relative; top:auto; }
}

/* A dedicated scroll runway gives the Clarity card a real top hold. */
.review-anchor-track { display:flow-root; position:relative; padding-bottom:40vh; }
.product-stack .review-story { top:0; }
@media(max-width:700px), (prefers-reduced-motion:reduce) {
 .review-anchor-track { padding-bottom:0; }
 .product-stack .review-story { top:auto; }
}

.review-anchor-track { padding-bottom:0; }
.review-anchor-track::after { content:""; display:block; height:40vh; }
@media(max-width:700px), (prefers-reduced-motion:reduce) { .review-anchor-track::after { display:none; } }

.product-stack .review-story { top:var(--review-anchor,0px); }
@media(max-width:700px), (prefers-reduced-motion:reduce) { .product-stack .review-story { top:auto; } }