/* Mobile layout: one readable column, native scrolling, finger-sized controls. */
.nav-toggle,.nav-cta-mobile{display:none}
@media(max-width:760px){
 html{scroll-padding-top:calc(var(--nav-height,72px) + 18px);scrollbar-gutter:auto}
 body{-webkit-text-size-adjust:100%}
 .wrap,.story-enabled #studio.film-scene,.cinema-wrap{width:calc(100% - 40px);max-width:560px}
 header.nav.wrap{width:100%;max-width:none;min-height:72px;padding:12px 20px;gap:12px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;z-index:60;box-sizing:border-box;background:#0e1110f5}
 header.nav .brand{grid-column:1;grid-row:1;font-size:22px;gap:8px;min-width:0}
 header.nav .brand img{width:30px;height:30px}
 header.nav>.button.small{grid-column:2;grid-row:1;min-height:44px;padding:10px 13px;font-size:12px;border-radius:10px}
 .nav-cta-full{display:none}.nav-cta-mobile{display:inline}
 header.nav .nav-toggle:not([hidden]){grid-column:3;grid-row:1;display:grid;place-content:center;gap:5px;width:44px;height:44px;padding:10px;border:1px solid #ffffff26;border-radius:10px;color:#e9f0e5;background:#ffffff04;cursor:pointer}
 .nav-toggle span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .2s}
 .menu-open .nav-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
 .menu-open .nav-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
 header.nav.has-mobile-menu nav{position:absolute;top:calc(100% + 6px);left:12px;right:12px;width:auto;margin:0;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:calc(100dvh - 100px);overflow:auto;background:#171e19;border:1px solid #3a463b;border-radius:16px;box-shadow:0 24px 55px #0008;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
 header.nav.has-mobile-menu.menu-open nav{visibility:visible;opacity:1;pointer-events:auto;transform:none}
 header.nav nav a,header.nav nav a:last-child{font-size:14px;min-height:48px;padding:14px;text-align:left;display:flex;align-items:center;border-radius:9px;white-space:normal;box-sizing:border-box}
 header.nav nav a[aria-current=location]{background:#c1ee9f12;color:#d7f2c5}
 header.nav nav a[aria-current=location]::after{left:auto;right:12px;top:calc(50% - 2px);bottom:auto;width:5px;height:5px;border-radius:50%}
 .nav-toggle:focus-visible{outline:2px solid #c1ee9f;outline-offset:3px}
 .cinematic{--sticky-top:72px;--stage-height:calc(100svh - 72px)}
 .cinematic.is-ready:not(.is-static){height:calc(var(--stage-height) + 110svh)}
 .cinema-sticky,.cinematic.is-ready:not(.is-static) .cinema-sticky{height:var(--stage-height);min-height:0;max-height:none}
 .cinema-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--mobile-copy-height,auto) minmax(190px,1fr) auto;gap:14px;height:100%;padding:18px 0 12px;box-sizing:border-box}
 .cinema-copy,.cinematic:not(.is-static) .cinema-copy{position:relative;grid-column:1;grid-row:1;left:auto;top:auto;width:100%;max-width:none;align-self:start}
 .cinema-copy .eyebrow,.cinematic:not(.is-static) .cinema-copy .eyebrow{font-size:9px;line-height:1.5;margin:0 0 9px;letter-spacing:.08em}
 .cinema-copy h1,.cinema-copy h2,.cinematic:not(.is-static) .cinema-copy h1,.cinematic:not(.is-static) .cinema-copy h2{font-size:clamp(33px,10vw,44px);line-height:1.06;letter-spacing:-.055em;margin:0 0 12px;text-wrap:initial}
 .cinema-copy p:not(.eyebrow),.cinematic:not(.is-static) .cinema-copy p:not(.eyebrow){font-size:14px;line-height:1.55;margin:0 0 9px;max-width:100%;color:#c4cdc5}
 .cinema-copy p.cinema-audience,.cinematic:not(.is-static) .cinema-copy p.cinema-audience{font-size:12px;margin:0 0 10px;color:#a8b6ab}
 .beta-status{margin:0 0 12px;font-size:10px;padding:5px 9px;line-height:1.5}
 .cinema-actions,.cinematic:not(.is-static) .cinema-actions,.cinema-copy[data-beat="2"] .cinema-actions{margin-top:12px;gap:10px;flex-wrap:nowrap}
 .cinema-copy .cinema-actions>.button,.cinematic:not(.is-static) .cinema-actions .button{min-height:46px;font-size:12px;line-height:1.3;padding:11px 13px;gap:9px;white-space:nowrap}
 .cinema-actions .text-link,.cinematic:not(.is-static) .cinema-actions .text-link{font-size:12px;min-height:44px;display:inline-flex;align-items:center;padding:8px 0;white-space:nowrap}
 .cinema-scroll-cue{font-size:10px;margin-top:10px;line-height:1.4;color:#9faf98}
 .cinema-copy p.cinema-footnote{display:none}
 .cinema-presets,.cinematic:not(.is-static) .cinema-presets,.cinema-copy[data-beat="2"] .cinema-presets{margin:8px 0;gap:8px}
 .cinema-presets button,.cinematic:not(.is-static) .cinema-presets button{min-height:44px;font-size:12px;padding:9px 13px}
 .cinema-visual,.cinematic:not(.is-static) .cinema-visual{position:relative;grid-column:1;grid-row:2;left:0;right:auto;top:auto;bottom:auto;width:100%;min-height:0}
 .cinema-visual .cinema-frame-label{top:0;left:0;right:0;font-size:9px;line-height:1.5}
 .cinema-canvas{inset:22px -8px 55px}
 .cinematic[data-beat="1"] .cinema-canvas{bottom:12px}
 .cinematic[data-beat="2"] .cinema-canvas{inset:24px -8px 50px}
 .cinema-timeline{left:0;right:0;bottom:0}
 .cinema-timeline-top{font-size:8px;margin-bottom:5px}.cinema-filmstrip{height:28px}.cinema-ruler{display:none}
 .cinema-bottom,.cinematic:not(.is-static) .cinema-bottom{position:relative;grid-column:1;grid-row:3;left:auto;right:auto;bottom:auto;display:flex;flex-direction:column;gap:8px;align-items:stretch}
 .cinema-chapters{gap:10px}
 .cinema-chapters button{min-height:44px;padding:12px 5px 9px;font-size:12px;display:flex;align-items:center;gap:6px;flex:1}
 .cinema-chapters button b{font-size:9px;margin:0}
 .cinema-meta{display:flex;flex-direction:column;gap:6px;align-items:stretch}
 .cinema-tools{gap:6px;justify-content:stretch}
 .cinema-tools button,.cinematic:not(.is-static) .cinema-tools button{flex:1;min-height:44px;padding:9px 6px;font-size:10px;line-height:1.4}
 .cinema-note{display:none}
 .cinema-finish-label{font-size:8px}
 .cinema-finish-controls{min-width:190px;gap:8px;margin-top:5px;padding-top:3px}
 .cinema-finish-controls button{width:44px;height:44px}
 .cinema-finish-controls input{height:44px;min-width:30px}
 .cinema-finish-controls time{font-size:10px}
 .cinema-finish-badge{display:none}
 .cinematic.is-static .cinema-sticky{height:auto;min-height:0}
 .cinematic.is-static .cinema-wrap{height:auto;grid-template-rows:var(--mobile-copy-height,auto) 340px auto}
 .cinematic.is-static .cinema-scroll-cue{display:flex}
 .cinematic.is-static .cinema-scroll-cue::before{content:'↔'}
 .cinematic.is-static .cinema-copy p.cinema-footnote{display:none}
 /* Keep the page animated, but let content read at full contrast on small screens. */
 .story-enabled .cinema-wrap{transform:none;opacity:1}
 .story-enabled .film-body{opacity:1}
 .story-enabled main>[data-section]:not(.cinematic){padding-block:48px;margin-block:0}
 .story-enabled main>.film-scene{padding-block:28px 40px}
 .film-stage{padding:34px 0 18px}
 .film-chapter{font-size:9px;letter-spacing:.045em}
 .film-ruler{display:none}
 .story-enabled .why-section .section-heading h2,.film-scene[data-film=studio] .studio-heading h2,.film-scene[data-film=faq] h2,.product-section .product-copy h2{font-size:clamp(32px,9.5vw,42px);line-height:1.12}
 .why-section .view-intro,.product-copy>p:not(.eyebrow),.studio-heading>p{font-size:14px;line-height:1.65}
 .recovery-demo{padding:26px 16px 20px;gap:25px;border-radius:18px}
 .recovery-copy h3{font-size:clamp(34px,10vw,43px)}
 .recovery-intro{font-size:14px}.recovery-action>p{font-size:12px}
 .recovery-project-bar{flex-wrap:wrap;gap:8px}.recovery-project-name{font-size:12px}
 .recovery-project-body{padding-inline:12px}
 .recovery-export-status{font-size:9px}.recovery-retained{flex-wrap:wrap;gap:8px}
 .recovery-checkpoint strong{font-size:12px}.recovery-checkpoint p{font-size:11px}
 .recovery-disclosure{flex-wrap:wrap;line-height:1.6}
 .story-enabled .value-basics.film-scene{margin-top:24px}
 .film-scene[data-film=benefits] .film-body{padding:10px 0;gap:30px}
 .story-enabled .value-basics .value-card h3{font-size:29px}
 .story-enabled .value-basics .value-card p{font-size:14px}
 .film-scene[data-film=app] .film-body{gap:24px}
 .film-scene[data-film=app] .workspace-image{height:auto;aspect-ratio:1.2;min-height:0;padding:10px}
 .workspace-image .image-open{min-height:44px;font-size:12px}
 .journey-enabled .workspace-tabs button{min-height:44px;font-size:13px}
 .workspace-panel figcaption{padding:17px}.workspace-panel figcaption span{font-size:13px}
 .layout-mini ul{gap:12px}.layout-mini li{font-size:12px}
 .film-tour-note{font-size:11px}.film-tour-note button{min-height:44px}
 /* Preview and transport share a row, so the settings are nearby. */
 .film-scene[data-film=studio] .caption-workbench{transform:none;border-radius:16px}
 .film-scene[data-film=studio] .lab-toolbar{padding:15px;gap:10px}
 .lab-toolbar strong{font-size:15px}.lab-toolbar div div>span{font-size:11px}
 .reset-look{min-height:44px;font-size:12px;padding:10px}
 .film-scene[data-film=studio] .preview-area{position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px 16px;padding:18px 16px;align-items:center;transform:none}
 .film-scene[data-film=studio] .preview-meta{grid-column:1/-1;grid-row:1;width:100%;font-size:11px;margin:0}
 .film-scene[data-film=studio] .demo-phone{grid-column:1;grid-row:2;width:100%;max-width:180px;margin:0;transform:none}
 .film-scene[data-film=studio] .preview-transport{grid-column:2;grid-row:2;width:100%;max-width:100%;margin:0}
 .preview-player{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}
 .preview-player #preview-time{grid-column:1/-1;grid-row:1;font-size:12px;letter-spacing:0}
 .preview-player #preview-play{grid-column:1;grid-row:2;justify-self:stretch}
 .preview-player #preview-sound{grid-column:2;grid-row:2;justify-self:stretch}
 .preview-player #preview-seek{grid-column:1/-1;grid-row:3;height:36px;margin:0;width:100%}
 .preview-player #preview-reset{grid-column:1/-1;grid-row:4;justify-self:stretch;display:flex;gap:8px;font-size:11px}
 .preview-player #preview-reset::after{content:'Replay'}
 .preview-player button{width:100%;min-width:44px;height:44px;min-height:44px;border-radius:10px}
 .preview-player button svg{width:18px;height:18px}
 .preview-transport .word-timing{margin-top:10px}
 .preview-transport .word-timing summary{font-size:11px;gap:4px;flex-wrap:wrap;min-height:44px}
 .preview-transport #preview-status{font-size:10px}
 .word-scrubber{max-height:160px}.word-scrubber button{min-height:44px;font-size:12px}
 .demo-phone #preview-watermark{font-size:8px!important;line-height:1.4;padding:2px 4px}
 .film-scene[data-film=studio] .studio-controls{padding:20px 16px}
 .lab-tabs{gap:16px}.lab-tabs button{min-height:48px;font-size:13px}
 .look-grid{gap:10px;margin-bottom:22px}.look-sample{font-size:17px;min-height:48px}.look-label{padding:10px;font-size:13px}
 .swatches{gap:10px}.swatch{width:44px;height:44px;border-width:7px;outline-offset:0}
 .swatch[aria-pressed=true]{outline-offset:1px}
 .fine-tune summary,.mark-positions button{min-height:44px}
 .studio-controls input[type=text],.studio-controls textarea,.studio-controls select{font-size:16px}
 #custom-highlight{min-height:44px;min-width:44px}
 .studio-controls input[type=range]{height:44px}
 .pricing-section{padding-top:48px!important;padding-bottom:48px!important;scroll-margin-top:0}
 .pricing-heading{gap:16px;margin-bottom:24px}.pricing-heading h2{font-size:36px}.pricing-heading>p{font-size:14px}
 .pricing-card{padding:24px 20px;border-radius:18px}.pricing-grid{gap:16px}
 .pricing-card>p:not(.pricing-price),.pricing-card li{font-size:14px;line-height:1.65}
 .pricing-action{min-height:50px;font-size:13px;padding:13px 12px;white-space:normal;text-align:center}
 .pricing-note{font-size:12px;line-height:1.7}.pricing-note>a{min-height:44px;display:inline-flex;align-items:center}
 .faq summary{font-size:14px;line-height:1.55;padding:18px 0;min-height:60px}
 .faq details p{font-size:14px;padding-left:0;line-height:1.75}
 .faq summary>span{flex:0 0 28px;width:28px;height:28px}
 .film-scene[data-film=launch] .launch-content h2{font-size:clamp(39px,11vw,52px)}
 .launch-benefits{display:flex;flex-wrap:wrap;flex-direction:row;gap:12px 16px;padding-block:18px;margin:22px 0}
 .launch-benefits>span{font-size:12px}
 .access .access-action{margin-top:18px}.access .access-action .button{width:100%;justify-content:space-between;min-height:52px;font-size:14px}
 .access .beta-steps p{font-size:13px}.beta-steps h3{font-size:16px}
 body>footer.wrap{width:calc(100% - 40px);max-width:560px;display:flex;flex-wrap:wrap;gap:12px 20px;padding-block:28px}
 body>footer p{flex-basis:100%;margin:0;font-size:12px}
 body>footer>span{margin:0;font-size:11px}
 body>footer .legal-links{flex-basis:100%;gap:6px 20px;font-size:12px}
 .legal-links a,.legal-links button,.motion-control{display:inline-flex;align-items:center;min-height:44px}
 #access-dialog{max-height:calc(100dvh - 24px);width:calc(100% - 24px);padding:28px 22px 22px;border-radius:18px;overscroll-behavior:contain}
 #access-dialog .dialog-close{width:44px;height:44px;top:12px;right:12px}
 #access-dialog h2{font-size:31px;max-width:260px}#access-dialog .eyebrow{margin-top:28px}
 .launch-consent{font-size:13px;gap:12px}.launch-consent input{width:22px;height:22px}
 .screen-dialog{max-height:calc(100dvh - 20px);max-width:calc(100vw - 20px);width:calc(100vw - 20px)}
 .screen-dialog-bar{flex-wrap:wrap;padding:14px;gap:12px}.screen-dialog-actions{margin-left:auto}.screen-dialog-actions button{min-height:44px}
 .screen-image-scroll{max-height:65dvh;overscroll-behavior:contain}
 .cookie-notice{bottom:max(12px,env(safe-area-inset-bottom));font-family:inherit;max-height:calc(100dvh - 24px);overflow:auto}
 .cookie-notice p{font-size:13px}.cookie-action,.cookie-notice .cookie-actions [data-cookie-settings]{min-height:44px}
 .cookie-dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
}
@media(max-width:360px){
 header.nav.wrap{padding-inline:14px;gap:8px}.nav .brand{font-size:20px!important}.nav .brand img{width:26px!important;height:26px!important}
 header.nav>.button.small{padding-inline:10px;font-size:11px}
 .wrap,.story-enabled #studio.film-scene,.cinema-wrap{width:calc(100% - 28px)}
 .cinema-copy .cinema-actions>.button{font-size:11px;padding-inline:11px}.cinema-actions .text-link{font-size:11px}
 .cinema-presets button{padding-inline:10px}
 .film-scene[data-film=studio] .preview-area{gap:10px 12px;padding-inline:12px}
 .film-scene[data-film=studio] .studio-controls{padding-inline:12px}
 .pricing-card{padding:22px 16px}.pricing-heading h2{font-size:32px}
}
@media(max-width:760px) and (min-height:750px) and (max-height:830px){
 .cinema-wrap{padding-top:12px;gap:10px;grid-template-rows:var(--mobile-copy-height,auto) minmax(175px,1fr) auto}
 .cinema-copy h1,.cinema-copy h2{font-size:36px!important;margin-bottom:9px!important}
 .cinema-copy p.cinema-audience{font-size:11px!important;margin-bottom:7px!important}
 .cinema-copy .eyebrow{font-size:8px!important}.beta-status{margin-bottom:9px}
 .cinema-scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){.nav-toggle span,header.nav.has-mobile-menu nav{transition:none}}