/* Viewport scenes: the document stays still while each panel moves upward. */
.panel-mode,.panel-mode body{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
.panel-mode body{--header-height:96px;--controls-height:64px;background:var(--navy)}
/* One viewport backdrop, outside the moving section track. */
.panel-mode body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 82% 40%,#26a59b30,transparent 44%),radial-gradient(ellipse at 52% 56%,#15418785,transparent 70%)}
.panel-mode main#main{position:fixed;inset:0;overflow:clip;isolation:isolate;z-index:1;background:transparent}
.panel-mode>.skip-link{z-index:100}
.panel-mode body>.header{position:fixed;top:0;left:50%;translate:-50% 0;height:var(--header-height);z-index:40;background:transparent;backdrop-filter:none;box-shadow:none}
.panel-mode body>.header:before{content:none;display:none}
.panel-mode #mobile-menu{position:fixed;z-index:50}
.panel-mode .header nav>a.button[aria-current]{color:var(--navy)}
.scene-track{position:relative;width:100%;height:100%;display:flex;flex-direction:column;will-change:transform;transform:translate3d(0,0,0)}
.scene-track{transition:none}
.scene{position:relative;width:100%;height:100%;flex:0 0 100%;padding:var(--header-height) 0 var(--controls-height);background:transparent;overflow:clip}
.scene-inner{width:100%;height:100%;overflow-y:auto;overflow-x:clip;scrollbar-width:thin;scrollbar-color:#96eac85c transparent;display:flex;flex-direction:column;justify-content:safe center;overscroll-behavior:contain}
.panel-mode [data-reveal]{opacity:1;translate:none;transition:none}
.panel-mode .hero-wrap{width:100%;height:100%;flex-shrink:0;overflow:hidden;background:transparent}
.panel-mode .hero{height:100%;min-height:0;padding-block:12px;gap:45px}
.panel-mode .hero-visual{height:100%;min-height:0;padding:22px 0 30px;transform:none}
.panel-mode .hero-visual .phone{width:min(280px,calc((100dvh - 218px)/2.2));transform:rotate(8deg)}
.panel-mode .hero-visual figcaption{position:static;margin-top:20px;font-size:9px}
.panel-mode .hero h1{font-size:clamp(44px,5vw,74px)}
.panel-mode .feature-panel{padding:28px 44px;gap:55px;flex-shrink:0;background:transparent;border-color:transparent}
.panel-mode .feature-visual .phone{width:min(266px,calc((100dvh - 270px)/2.2))}
.panel-mode .feature-copy h2{margin-bottom:24px}
.panel-mode .benefit{min-height:156px;padding:17px}
.panel-mode .benefit-top{margin-bottom:12px}
.panel-mode .how-section{padding-block:8px;flex-shrink:0;overflow:visible}
.panel-mode .section-intro{margin-bottom:18px;max-width:none}
.panel-mode .section-intro h2{font-size:clamp(30px,3.3vw,45px);margin:10px 0}
.panel-mode .section-intro h2 br{display:none}
.panel-mode .section-intro .lead{font-size:14px}
.panel-mode .how-section .how-layout{padding:0;gap:70px;align-items:center}
.panel-mode .how-preview{padding:8px;height:auto;background:transparent}
.panel-mode .how-preview .phone{width:min(245px,calc((100dvh - 340px)/2.2));transform:rotate(5deg);transform-origin:center}
.panel-mode .how-preview .caption{margin-top:14px;font-size:9px}
.panel-mode .how-steps article{padding:18px 0;gap:18px}
.panel-mode .how-section .how-steps h3{font-size:20px;margin-bottom:10px}
.panel-mode .how-steps p{font-size:12px}
.panel-mode .how-section .coming-note{margin:16px 0;font-size:10px}
.panel-mode .how-steps>.button{min-height:46px;font-size:12px}
.panel-mode .landing-faq{padding-block:18px;border:0;gap:70px;flex-shrink:0}
.panel-mode .faq-list summary{padding:17px 0;font-size:13px}
.panel-mode .answer{font-size:12px;padding-bottom:17px}
.panel-mode .waitlist{padding:44px;flex-shrink:0}
.panel-mode .footer{flex-shrink:0;margin-top:30px;padding-block:22px 12px}
.panel-controls{position:fixed;z-index:45;bottom:18px;right:clamp(18px,4.1vw,70px);display:flex;align-items:center;gap:9px;color:var(--mint)}
.panel-status{font-size:10px;letter-spacing:.035em;margin-right:10px;color:var(--muted)}
.panel-controls button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:0;background:transparent;color:var(--mint);font-size:20px;line-height:1;transition:color .2s}
.panel-controls button:hover{color:var(--white)}
.panel-controls button:disabled{opacity:.25;cursor:default}
@media(max-width:1000px){.panel-mode .container{width:calc(100% - 64px)}.panel-mode .feature-panel{gap:25px;padding:25px}.panel-mode .feature-copy h2{font-size:31px}.panel-mode .benefit{padding:13px;min-height:155px}.panel-mode .how-section .how-layout{gap:30px}.panel-mode .landing-faq{gap:35px}.panel-mode .faq-heading h2{font-size:35px}}
@media(max-width:800px){.panel-mode body{--header-height:84px;--controls-height:55px}.panel-mode .hero{grid-template-columns:1.1fr 1fr;gap:20px}.panel-mode .hero h1{font-size:43px}.panel-mode .hero .lead{font-size:14px}.panel-mode .feature-panel{grid-template-columns:.7fr 1.3fr}.panel-mode .feature-visual{order:0}.panel-mode .feature-visual .phone{width:185px}.panel-mode .feature-copy h2{font-size:27px}.panel-mode .benefit{min-height:140px}.panel-mode .benefit h3{font-size:13px}.panel-mode .benefit p{font-size:10px}.panel-mode .benefit-top{margin-bottom:9px}.panel-mode .how-preview .phone{width:190px}.panel-mode .landing-faq{grid-template-columns:1fr 1.3fr}.panel-mode .faq-heading>p:not(.eyebrow){font-size:12px}.panel-mode .waitlist{gap:25px;padding:30px}.panel-controls{bottom:12px}}
@media(max-width:560px){
 .panel-mode body{--header-height:76px;--controls-height:52px}
 .panel-mode .container{width:calc(100% - 36px)}
 .panel-mode .hero{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:12px;padding-block:0}
 .panel-mode .hero-copy{padding-top:0}
 .panel-mode .hero-copy .eyebrow{font-size:8px;margin-bottom:12px}
 .panel-mode .hero h1{font-size:clamp(32px,8.8vw,43px);margin-bottom:12px;line-height:1.07}
 .panel-mode .hero .lead{font-size:12px;line-height:1.6;margin-bottom:15px;max-width:310px}
 .panel-mode .hero .button{min-height:40px;font-size:10px;padding:5px 6px 5px 17px}
 .panel-mode .hero .button .arrow{height:28px;width:28px}
 .panel-mode .hero-visual{height:auto;min-height:0;padding:4px 0 0;flex:0 0 auto}
 .panel-mode .hero-visual .phone{width:clamp(118px,calc((100dvh - 414px)/2.2),180px);transform:rotate(6deg)}
 .panel-mode .hero-visual figcaption{margin-top:10px;font-size:7px}
 .panel-mode .feature-panel{grid-template-columns:1fr;padding:22px 18px;gap:14px}
 .panel-mode .feature-visual{display:none}
 .panel-mode .feature-copy h2{font-size:30px;margin-bottom:20px}
 .panel-mode .benefit-grid{gap:10px}
 .panel-mode .benefit{min-height:150px;padding:15px 12px}
 .panel-mode .benefit h3{font-size:13px}
 .panel-mode .benefit p{font-size:10px}
 .panel-mode .how-section{padding:0}
 .panel-mode .section-intro{margin-bottom:20px}
 .panel-mode .section-intro h2{font-size:30px;line-height:1.18;margin:10px 0}
 .panel-mode .section-intro h2 br{display:initial}
 .panel-mode .section-intro .lead{font-size:11px}
 .panel-mode .how-section .how-layout{grid-template-columns:100px 1fr;gap:18px;align-items:center}
 .panel-mode .how-preview{padding:0}
 .panel-mode .how-preview .phone{width:100px;transform:rotate(3deg)}
 .panel-mode .how-preview .caption{font-size:6px;line-height:1.6;margin-top:12px}
 .panel-mode .how-steps article{gap:8px;padding:13px 0}
 .panel-mode .step-num{font-size:19px}
 .panel-mode .how-section .how-steps h3{font-size:14px;line-height:1.3;margin-bottom:7px}
 .panel-mode .how-steps p{font-size:9px;line-height:1.7}
 .panel-mode .how-section .coming-note{font-size:8px;line-height:1.7;margin:12px 0}
 .panel-mode .how-steps>.button{font-size:9px;gap:9px;min-height:35px;padding:5px 5px 5px 12px}
 .panel-mode .how-steps>.button .arrow{height:24px;width:24px}
 .panel-mode .landing-faq{grid-template-columns:1fr;gap:18px;padding:0}
 .panel-mode .landing-faq .faq-heading h2{font-size:30px;margin:10px 0}
 .panel-mode .faq-heading>.eyebrow{font-size:8px}
 .panel-mode .faq-heading>p:not(.eyebrow){font-size:10px;margin-bottom:0}
 .panel-mode .faq-list summary{font-size:11px;padding:12px 0;line-height:1.5;gap:12px}
 .panel-mode .faq-toggle{height:20px;width:20px}
 .panel-mode .faq-toggle:before,.panel-mode .faq-toggle:after{top:9px;left:4px;width:10px}
 .panel-mode .answer{font-size:10px;padding:0 12px 12px 0;line-height:1.7}
 .panel-mode .waitlist{padding:24px 20px;gap:22px}
 .panel-mode .waitlist h2{font-size:28px}
 .panel-mode .waitlist>div>p{font-size:11px}
 .panel-mode .footer{margin-top:20px;padding-top:16px;gap:12px}
 .panel-mode .footer nav{font-size:9px}
 .panel-controls{right:18px;bottom:10px}
 .panel-status{font-size:8px;margin-right:3px}
 .panel-controls button{width:29px;height:29px;font-size:17px}
}
@media(min-width:561px) and (max-height:720px){.panel-mode .hero h1{font-size:45px}.panel-mode .hero .lead{font-size:14px}.panel-mode .feature-panel{padding:20px 28px}.panel-mode .feature-copy h2{font-size:28px;margin-bottom:16px}.panel-mode .benefit{min-height:125px;padding:12px}.panel-mode .benefit p{font-size:10px}.panel-mode .benefit h3{font-size:12px}.panel-mode .benefit-top{margin-bottom:8px}.panel-mode .icon-circle{height:29px;width:29px}.panel-mode .section-intro h2{font-size:30px}.panel-mode .section-intro .lead{font-size:12px}.panel-mode .section-intro{margin-bottom:10px}.panel-mode .how-steps article{padding:10px 0}.panel-mode .how-section .how-steps h3{font-size:16px}.panel-mode .how-steps p{font-size:10px}.panel-mode .faq-list summary{padding:12px 0;font-size:12px}.panel-mode .answer{font-size:10px}.panel-mode .waitlist{padding:28px}.panel-mode .footer{margin-top:16px}}
@media(max-width:560px){.panel-controls{gap:6px}.panel-status{font-size:7px;margin-right:0}}

/* Ambient light stays in the fixed backdrop, never inside a moving panel. */
.panel-mode .hero-wrap::before,.panel-mode .feature-visual::before,.panel-mode .orb{display:none}

/* This screenshot includes its own iPhone status bar and Dynamic Island. */
.phone-native-status .phone-top{display:none}

/* Browser zoom can leave a very short CSS viewport. Let the scene's existing
   inner scroller expose the whole hero instead of clipping its content. */
@media(max-height:650px){
 .panel-mode .hero-wrap{height:auto;min-height:100%}
 .panel-mode .hero{height:auto;min-height:calc(100dvh - var(--header-height) - var(--controls-height))}
 .panel-mode .hero-visual{height:auto}
}