/* Scroll story: illustrative states, no financial approval or payment claim. */
.cafe-story{--story-progress:0;--scene-zoom:1;--scene-opacity:1;--phone-reveal:0;position:relative;min-height:260vh;margin-block:24px;border-block:1px solid var(--border);background:var(--bg-2)}
.story-sticky{position:sticky;top:88px;min-height:calc(100svh - 108px);display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:32px;padding-block:28px}
.story-copy{position:relative;z-index:3;max-width:440px}.story-copy h2{font-size:clamp(25px,3vw,38px);line-height:1.5;margin:12px 0}.story-intro,.story-chapters p{font-size:15px;line-height:1.9;color:var(--text-muted)}
.story-chapters{min-height:148px;margin-block:28px 12px}.story-chapters article[hidden]{display:none}.story-chapters article>span{font-size:12px;color:var(--gold)}.story-chapters h3{font-size:22px;line-height:1.6;margin:10px 0}.story-chapters p{margin:0}
.story-progress{display:flex;gap:6px;margin-block:20px}.story-progress span{height:3px;flex:1;background:var(--border);border-radius:2px}.story-progress span.active{background:var(--accent)}
.story-action{display:inline-flex;align-items:center;min-height:48px;font-size:14px;font-weight:650;color:var(--accent)}.story-copy>small{display:block;font-size:12px;line-height:1.8;color:var(--text-muted);margin-top:10px}
.story-visual{position:relative;height:min(66vh,580px);min-height:370px;overflow:hidden;border-radius:24px;isolation:isolate;display:grid;place-items:center}
.story-visual:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,transparent 30%,color-mix(in srgb,var(--bg) 70%,transparent));opacity:var(--phone-reveal);pointer-events:none;z-index:1}
.cafe-characters{width:100%;height:100%;object-fit:contain;transform-origin:58% 43%;transform:translateX(calc(var(--story-progress)*-5%)) scale(var(--scene-zoom));opacity:var(--scene-opacity);filter:blur(calc(var(--phone-reveal)*6px));will-change:transform,opacity}
.story-phone{position:absolute;z-index:2;width:258px;height:432px;border:7px solid #30343a;border-radius:34px;overflow:hidden;padding:24px 17px;background:var(--surface);box-shadow:0 22px 60px #0003;opacity:var(--phone-reveal);transform:translateY(calc((1 - var(--phone-reveal))*120px)) scale(calc(.78 + var(--phone-reveal)*.22));direction:rtl}
.phone-camera{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:54px;height:7px;border-radius:5px;background:#30343a}.phone-header{display:flex;justify-content:space-between;font-size:12px;font-weight:700;border-bottom:1px solid var(--border);padding:7px 0 14px}.phone-header span{font-size:10px;font-weight:400;color:var(--text-muted)}
.phone-view{position:absolute;inset:78px 17px 20px;transition:opacity .2s}.phone-kicker{font-size:10px;color:var(--gold)}.phone-view h4{font-size:17px;margin:10px 0 16px;line-height:1.7}.phone-field{padding:10px 12px;margin-bottom:9px;font-size:10px;color:var(--text-muted);background:var(--bg-2);border:1px solid var(--border);border-radius:9px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}.phone-field strong{display:block;font-size:12px;color:var(--text);margin-top:4px;font-weight:600}
.cafe-story[data-stage="2"] .phone-field,.cafe-story[data-stage="3"] .phone-field{opacity:1;transform:none}.phone-field:nth-of-type(1){transition-delay:.08s}.phone-field:nth-of-type(2){transition-delay:.18s}.phone-field:nth-of-type(3){transition-delay:.28s}
.phone-submit{margin-top:13px;padding:11px 8px;background:var(--accent);color:var(--accent-text,#10241d);font-size:11px;font-weight:700;border-radius:9px;text-align:center}.phone-view>p{font-size:11px;line-height:1.8;color:var(--text-muted)}
.phone-form{opacity:0}.cafe-story[data-stage="1"] .phone-form,.cafe-story[data-stage="2"] .phone-form,.cafe-story[data-stage="3"] .phone-form{opacity:1}.phone-loading{display:none}.cafe-story[data-stage="3"] .phone-submit-label{display:none}.cafe-story[data-stage="3"] .phone-loading{display:inline-flex;gap:7px;align-items:center}.phone-spinner{width:12px;height:12px;border:2px solid currentColor;border-left-color:transparent;border-radius:50%;animation:phone-spin .8s linear infinite}
.phone-result{opacity:0;pointer-events:none;text-align:center;padding-top:12px}.cafe-story[data-stage="4"] .phone-result{opacity:1}.phone-check{display:grid;place-items:center;margin:0 auto 12px;width:44px;height:44px;background:var(--accent);color:var(--accent-text,#10241d);border-radius:12px;font-size:24px}.phone-status{padding:12px;font-size:10px;text-align:right;border:1px solid var(--border);border-radius:9px;line-height:2}.phone-status strong{display:block;font-size:12px}.phone-demo-label{position:absolute;bottom:12px;inset-inline:12px;text-align:center;font-size:10px;color:var(--text-muted)}
@keyframes phone-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.story-sticky{grid-template-columns:1fr;gap:8px;min-height:calc(100svh - 100px);padding-block:18px}.story-copy{max-width:none}.story-copy h2{font-size:25px;margin:6px 0}.story-intro{margin:0;font-size:13px}.story-chapters{margin:12px 0;min-height:92px}.story-chapters h3{font-size:18px;margin:4px 0}.story-chapters p{font-size:13px}.story-progress{margin:10px 0}.story-action{min-height:40px}.story-copy>small{margin:0;font-size:11px}.story-visual{height:43svh;min-height:260px}.story-phone{width:225px;height:360px;padding:20px 12px;border-width:6px;border-radius:28px}.phone-view{inset:67px 12px 16px}.phone-view h4{font-size:14px;margin:7px 0 10px}.phone-field{padding:7px 9px;margin-bottom:6px}.phone-submit{padding:8px;margin-top:9px}.phone-result{padding-top:6px}.phone-check{width:36px;height:36px;margin-bottom:8px}.phone-header{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.cafe-story{min-height:0}.story-sticky{position:relative;top:auto;min-height:0}.story-chapters{min-height:0}.story-chapters article{margin-bottom:18px}.cafe-characters{transform:none;filter:none;will-change:auto}.phone-spinner{animation:none}.phone-field{transition:none}.story-phone{transform:none}.phone-form{opacity:0!important}.story-progress{display:none}}
/* Clipping without a separate scroll container lets the story remain sticky. */
.landing-page{overflow-x:clip;overflow-y:visible}
.story-sticky{direction:ltr}.story-copy{direction:rtl}
@media(max-width:800px) and (max-height:650px){.story-sticky{top:78px;gap:4px;padding-block:8px;min-height:calc(100svh - 86px)}.story-copy>.eyebrow,.story-intro{display:none}.story-copy h2{font-size:20px;margin:0 0 5px}.story-chapters{min-height:82px;margin:6px 0}.story-chapters h3{font-size:16px;line-height:1.6}.story-chapters p{font-size:12px;line-height:1.7}.story-progress{margin:6px 0}.story-action{min-height:34px;font-size:12px}.story-copy>small{font-size:10px}.story-visual{height:235px;min-height:235px}.story-phone{transform:translateY(calc((1 - var(--phone-reveal))*100px)) scale(calc((.78 + var(--phone-reveal)*.22)*.65))}}
.phone-check{color:var(--success);background:color-mix(in srgb,var(--success) 16%,var(--surface))}
@media(prefers-reduced-motion:reduce) and (max-width:800px) and (max-height:650px){.story-sticky{top:auto}.story-phone{transform:scale(.65)}}
.story-is-visible .assistant-link{visibility:hidden;pointer-events:none}