/* A single stationary device: only its screen changes as the document scrolls. */
.scroll-showcase { position:relative; height:400svh; background:var(--cream); }
.showcase-sticky { position:sticky; top:0; height:100svh; padding:30px 0 22px; display:flex; flex-direction:column; overflow:clip; }
.showcase-heading { text-align:center; flex-shrink:0; margin-bottom:26px; }
.showcase-heading .eyebrow { margin-bottom:15px; }
.showcase-heading h2 { font-size:clamp(32px,3.5vw,47px); line-height:1.12; margin:0; }
.showcase-layout { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; flex:1; min-height:0; }
.showcase-copy { min-width:0; }
.showcase-tabs { display:flex; gap:7px; margin-bottom:28px; }
.showcase-tabs button { font-size:13px; color:#627264; background:none; border:1px solid #dce4d8; border-radius:11px; padding:10px 15px; transition:background .2s,color .2s; }
.showcase-tabs button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:white; }
.showcase-message { min-height:245px; }
.showcase-phase { font-size:10px; letter-spacing:1.3px; color:#63735f; margin-bottom:16px; }
.showcase-message h3 { font-size:clamp(28px,3vw,39px); line-height:1.15; font-weight:500; letter-spacing:-1px; margin:0 0 20px; }
.showcase-message > p:not(.showcase-phase):not(.showcase-benefit) { font-size:17px; line-height:1.75; color:var(--muted); max-width:450px; margin-bottom:23px; }
.showcase-benefit { border-left:3px solid var(--green); padding-left:14px; max-width:420px; }
.showcase-benefit strong { display:block; font-size:12px; margin-bottom:5px; }
.showcase-benefit span { font-size:14px; line-height:1.6; color:var(--muted); }
.showcase-navigation { display:flex; gap:20px; align-items:center; margin-top:25px; }
.showcase-arrows { display:flex; gap:8px; }
.slide-arrow { width:44px; height:42px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--ink); background:var(--ink); color:white; font-size:25px; transition:transform .2s,background .2s; }
.slide-arrow:disabled { border-color:#dfe5dc; color:#9da79a; background:#edf0e8; cursor:default; }
.showcase-count { font-size:12px; color:#82907f; letter-spacing:1px; white-space:nowrap; }
.showcase-count strong { color:var(--ink); }
.showcase-scroll { margin-left:auto; font-size:11px; color:#74816e; white-space:nowrap; }
.showcase-progress { height:2px; max-width:450px; background:#e4e9de; margin-top:19px; overflow:hidden; }
.showcase-progress > span { display:block; width:33.333%; height:100%; background:var(--green); transition:transform .45s; }
.showcase-window { position:relative; display:flex; align-items:center; justify-content:center; height:100%; min-height:0; padding:8px 0 24px; isolation:isolate; }
.screen-backdrop { position:absolute; inset:2% -3% 5%; width:106%; height:93%; z-index:-1; transform:rotate(-4deg); }
button.showcase-phone { position:relative; height:100%; max-height:680px; aspect-ratio:1206/2622; flex-shrink:0; width:auto; max-width:100%; padding:0; border:4px solid var(--ink); border-radius:30px; overflow:hidden; background:white; box-shadow:8px 15px 28px #24392b15; cursor:zoom-in; }
.showcase-phone .feature-screen { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .4s ease; pointer-events:none; background:white; }
.showcase-phone .feature-screen.is-active { opacity:1; }
.enlarge-hint { position:absolute; bottom:0; left:0; width:100%; text-align:center; font-size:10px; color:#697b63; }
@media(hover:hover) and (pointer:fine) { .slide-arrow:not(:disabled):hover { transform:translateX(3px); background:#3f674c; } .showcase-tabs button:not([aria-selected="true"]):hover { background:#e3eddd; } }
@media(max-width:1100px) and (min-width:761px) { .showcase-layout { gap:35px; } .showcase-scroll { display:none; } }
@media(max-width:760px) {
 .showcase-sticky { padding:18px 0 12px; }
 .showcase-heading { margin-bottom:17px; }
 .showcase-heading .eyebrow { font-size:9px; margin-bottom:10px; }
 .showcase-heading h2 { font-size:29px; }
 .showcase-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:12px; }
 .showcase-tabs { gap:6px; margin-bottom:12px; justify-content:center; }
 .showcase-tabs button { font-size:11px; padding:7px 12px; }
 .showcase-phase { display:none; }
 .showcase-message { min-height:0; }
 .showcase-message h3 { font-size:24px; margin-bottom:8px; }
 .showcase-message > p:not(.showcase-phase):not(.showcase-benefit) { font-size:13px; line-height:1.55; margin-bottom:10px; }
 .showcase-benefit { margin:0; padding-left:10px; }
 .showcase-benefit strong { display:inline; font-size:11px; margin-right:6px; }
 .showcase-benefit span { font-size:11px; line-height:1.4; }
 .showcase-navigation { margin-top:10px; gap:14px; }
 .slide-arrow { width:33px; height:31px; border-radius:9px; font-size:21px; }
 .showcase-count,.showcase-scroll { font-size:10px; }
 .showcase-progress { margin-top:9px; }
 .showcase-window { padding:4px 0 18px; }
 button.showcase-phone { border-width:3px; border-radius:20px; }
 .screen-backdrop { inset:0 5% 5%; width:90%; height:95%; }
 .enlarge-hint { font-size:9px; }
}
@media(max-height:560px) {
 .scroll-showcase { height:auto; }
 .showcase-sticky { position:relative; height:auto; padding:45px 0; }
 .showcase-window { height:420px; }
 .showcase-scroll { display:none; }
}
@media(prefers-reduced-motion:reduce) { .feature-screen,.showcase-progress > span,.showcase-tabs button,.slide-arrow { transition:none; } }
#screenshot-dialog { width: min(980px,calc(100% - 24px)); height: 92dvh; max-height: 92dvh; padding: 18px; border-radius: 18px; overflow: hidden; }
.screenshot-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; height: 44px; margin-bottom: 12px; }
.screenshot-heading h2 { font-size: 22px; margin: 0; letter-spacing: -.6px; }
.screenshot-heading > div { display: flex; align-items: center; gap: 9px; }
.screenshot-heading button { border: 1px solid #dce3d6; background: white; color: var(--ink); padding: 8px 12px; border-radius: 9px; font-size: 13px; }
#screenshot-close { font-size: 24px; line-height: 1; padding: 5px 11px; }
#screenshot-zoom[aria-pressed="true"] { color: white; background: var(--ink); }
.screenshot-scroll { height: calc(100% - 56px); overflow: auto; background: #eef2e9; border-radius: 10px; padding: 12px; }
.screenshot-scroll img { width: auto; height: 100%; max-width: 100%; object-fit: contain; margin: 0 auto; border-radius: 12px; }
.screenshot-scroll.is-zoomed img { width: 660px; height: auto; max-width: none; margin: 0 auto; }

@media(max-width:760px) { #screenshot-dialog { padding:12px; } .screenshot-heading h2 { font-size:18px; } .screenshot-scroll.is-zoomed img { margin:0; } }
.showcase-heading .eyebrow { text-align:center; justify-content:center; }

div.showcase-phone.reel-frame { position:relative; height:100%; max-height:680px; aspect-ratio:9/16; width:auto; max-width:100%; flex-shrink:0; padding:0; border:0; border-radius:24px; overflow:hidden; background:#fbfbf6; cursor:default; box-shadow:none; border-radius:0; -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent); mask-composite:intersect; }
.showcase-window:has(.reel-frame) .screen-backdrop { display:none; }
.reel-frame .feature-screen { object-fit:cover; }

/* reel card: same cream as the page; the reel's circles are redrawn outside so they continue across the edge */
.reel-wrap { position:relative; height:100%; max-height:680px; aspect-ratio:9/16; flex-shrink:0; max-width:100%; }
div.showcase-phone.reel-frame { position:absolute; inset:0; height:auto; max-height:none; width:auto; aspect-ratio:auto; -webkit-mask-image:none; mask-image:none; mix-blend-mode:normal; border-radius:0; background:#fbfbf6; box-shadow:none; }
.reel-wrap::before,.reel-wrap::after,.reel-wrap > i { content:''; position:absolute; border-radius:50%; z-index:-1; pointer-events:none; aspect-ratio:1; }
.reel-wrap::before { width:80%; left:-25%; top:-6.75%; background:#eef0f9; }
.reel-wrap::after { width:85%; left:55%; top:66.4%; background:#e9f0df; }
.reel-wrap > i { width:50%; left:-24%; top:83.25%; background:#c8cceb; }
.showcase-window:has(.reel-frame) .screen-backdrop { display:none; }
.reel-frame .feature-screen { filter:brightness(1.009); }
/* Keep the complete circles visible in the pause before the beta invitation. */
.scroll-showcase { clip-path:inset(0 0 -145px); }
.showcase-sticky { overflow:visible; }