/* v9: product-first presentation, grounded in native AppTheme colors and radii. */
.hero{grid-template-columns:1.05fr 1fr;min-height:690px;padding-block:48px 64px;gap:42px}
.hero-eyebrow{color:var(--accent-text);font-size:12px;line-height:1.7;letter-spacing:.035em;margin:0 0 23px;font-weight:550}
.hero h1{font-size:clamp(60px,6.8vw,94px);margin-bottom:20px}
.hero-promise{font-size:clamp(26px,2.5vw,36px);margin-bottom:24px}
.hero-description{max-width:455px;line-height:1.75;margin-bottom:28px}
.hero .button{border-radius:18px}.hero .text-link{font-size:13px}
.hero-stage{height:568px}
.hero-stage .mirror-frame{inset:45px 1% 38px 42%;border-radius:200px 200px 28px 28px;box-shadow:inset 0 0 0 4px #ffffff05,0 0 0 6px var(--raised);border-color:var(--control-border)}
:root[data-theme=light] .hero-stage .mirror-frame{box-shadow:inset 0 0 0 4px #ffffff60,0 0 0 6px var(--inset)}
.hero-stage .mirror-floor{inset:auto 1% 14px 35%;height:38px}
.hero-stage .studio-mascot{position:absolute;right:3%;bottom:43px;height:365px;z-index:3;pointer-events:none}
.hero-product{position:absolute;left:1%;top:10px;width:258px;margin:0;z-index:2}
.hero-screen{display:block;padding:0;border:0;background:transparent;border-radius:34px;width:100%;color:var(--text)}
.hero-screen .device-frame{width:100%;border:5px solid #454952;border-radius:34px;box-shadow:0 22px 55px var(--shadow),0 0 0 1px #121722}
.hero-screen:hover .device-frame{transform:translateY(-4px)}



.product-intro{padding-top:72px;border-radius:28px 28px 0 0}
.intro-heading{grid-template-columns:1.2fr 1fr;gap:70px}.intro-heading h2{font-size:clamp(40px,4.6vw,62px)}.intro-heading>p{font-size:18px;max-width:420px}
.product-jumps{gap:16px;margin-top:38px}
.product-jumps a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:22px 8px;padding:25px;background:var(--raised);border:1px solid var(--border);border-radius:24px;transition:border-color .2s,background .2s}
.product-jumps a:hover{border-color:var(--accent-text);background:var(--inset)}
.product-jumps .jump-number{grid-column:1;color:var(--accent-text);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.product-jumps .jump-copy{grid-column:1;display:flex;flex-direction:column;gap:10px}
.jump-copy strong{font-size:18px;font-weight:550;line-height:1.35;letter-spacing:-.035em}
.jump-copy>span{font-size:13px;line-height:1.7;color:var(--secondary)}
.product-jumps .jump-arrow{position:absolute;right:22px;top:20px;font-size:24px;color:var(--accent-text)}
.feature-story{padding-block:80px}.story-heading{margin-bottom:36px;gap:70px}.story-heading h2{font-size:clamp(36px,4vw,55px);text-wrap:balance}.story-description{font-size:16px;line-height:1.8}
.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{background:var(--inset);border-radius:28px;padding:28px 18px}
.screen-card figcaption{padding-top:21px}.screen-card h3{font-size:20px}.screen-card p{line-height:1.75}.story-details{margin-top:38px;padding-top:28px;gap:26px 36px}

.section-space{padding-block:88px}.coach-layout{gap:70px}.coach-copy .lead{font-size:23px;line-height:1.65}.coach-features{margin-top:38px;gap:26px}.support-group{padding-block:30px}.support-grid{gap:26px 36px}.support-title{color:var(--text)}
.about-section{border-radius:28px 28px 0 0}.about-copy .lead{font-size:20px;line-height:1.65}.launch-note{font-size:14px;line-height:1.8;color:var(--secondary);margin:0 0 25px}.faq-heading h2{font-size:42px}
.language-switch{min-height:44px;min-width:44px}.screen-close{min-height:44px}.menu-toggle{min-width:44px;min-height:44px}.motion-toggle{min-height:44px}.back-top{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1100px){.hero{gap:26px;grid-template-columns:1fr 1fr;min-height:635px}.hero h1{font-size:clamp(53px,6.7vw,78px)}.hero-stage{height:515px}.hero-product{width:226px}.hero-stage .studio-mascot{height:310px;right:1%;bottom:42px}.hero-actions{gap:15px}.hero .text-link{font-size:12px}.navigation{gap:20px}nav{gap:20px}.jump-copy strong{font-size:17px}.product-jumps a{padding:22px}.intro-heading,.story-heading{gap:45px}.coach-layout{gap:45px}}
@media(min-width:701px) and (max-width:900px){.shell{width:calc(100% - 56px)}nav{gap:15px;font-size:12px}.navigation{gap:12px}.button-nav{display:none}.hero{gap:12px}.hero h1{font-size:clamp(45px,6.4vw,58px)}.hero-promise{font-size:27px}.hero-description{font-size:14px}.hero-eyebrow{font-size:10px}.hero .button{padding:16px 18px;font-size:12px}.hero-stage{height:460px}.hero-product{width:196px;left:0}.hero-stage .studio-mascot{height:250px;right:0;bottom:51px}.hero .availability{font-size:10px}.product-jumps{gap:12px}.product-jumps a{padding:19px}.jump-copy strong{font-size:16px}.jump-copy>span{font-size:12px}}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding-block:35px 44px;gap:28px;min-height:0}.hero-eyebrow{font-size:11px;margin-bottom:17px}.hero h1{font-size:clamp(44px,12.1vw,77px);margin-bottom:17px}.hero-promise{font-size:26px;margin-bottom:18px}.hero-description{font-size:15px;line-height:1.7;margin-bottom:22px;max-width:480px}.hero-actions{gap:14px}.hero .button{font-size:12px;padding:16px 18px;gap:16px}.hero .text-link{font-size:12px}.hero .availability{margin-top:14px}.hero-stage{height:485px;max-width:420px}.hero-product{width:218px;left:2%;top:0}.hero-stage .studio-mascot{height:285px;right:2%;bottom:48px}.hero-stage .mirror-frame{inset:32px 1% 36px 41%}.hero-stage .mirror-floor{bottom:18px}.hero-screen .device-frame{border-radius:30px}.intro-heading{grid-template-columns:1fr;gap:22px}.intro-heading h2{font-size:clamp(39px,10.5vw,58px)}.intro-heading>p{font-size:16px;max-width:480px}.product-intro{padding-top:52px}.product-jumps{grid-template-columns:1fr;gap:12px;margin-top:28px}.product-jumps a{padding:22px 23px;grid-template-columns:27px 1fr;gap:14px}.product-jumps .jump-number{grid-column:1;align-self:start;padding-top:4px}.product-jumps .jump-copy{grid-column:2;padding-right:14px;gap:6px}.jump-copy strong{font-size:18px}.jump-copy>span{font-size:13px}.product-jumps .jump-arrow{right:17px;top:22px;font-size:21px}.feature-story{padding-block:58px}.story-heading{gap:20px}.story-heading h2{font-size:clamp(32px,8.6vw,46px)}.section-space{padding-block:64px}.coach-layout{gap:30px}.coach-copy .lead{font-size:20px}.support-group{gap:22px}.launch-note{font-size:14px}.about-copy .lead{font-size:18px}.faq-heading h2{font-size:36px}}
@media(max-width:600px){.screen-gallery,.two-screens{display:flex;gap:16px;width:100%;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:6px 4px 20px;scrollbar-width:thin;scrollbar-color:var(--accent-text) var(--inset);margin:0}.screen-gallery .screen-card{flex:0 0 87%;scroll-snap-align:start}.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{padding:24px 15px}.screen-gallery .device-frame,.two-screens .device-frame{width:204px;border-radius:28px}.screen-card h3{font-size:20px;min-height:0}.screen-card p{font-size:14px;margin-top:9px}.screen-gallery:focus-visible{outline-offset:1px}.story-details,.training-story .story-details,.progress-story .story-details,.coach-features{gap:24px 20px;margin-top:28px;padding-top:25px}.story-details h3,.coach-features h3{font-size:15px}.story-details p,.coach-features p{font-size:13px;line-height:1.7}.progress-story-layout{gap:23px}.reflection-copy h3{font-size:26px}.reflection-copy p{font-size:14px;line-height:1.75;margin-top:16px}.demo-choices button{min-height:44px}.number-fields input{font-size:24px}.conversation{padding:22px}.menu-toggle{padding-inline:11px}}
@media(max-width:380px){.hero-eyebrow{font-size:10px}.hero h1{font-size:clamp(39px,12vw,44px)}.hero-promise{font-size:24px}.hero-description{font-size:14px}.hero .button{padding:15px 14px;font-size:11px;gap:12px}.hero .text-link{font-size:11px;padding-block:5px}.hero-actions{gap:10px}.hero-stage{height:426px}.hero-product{width:187px;left:0}.hero-stage .studio-mascot{height:244px;right:0;bottom:40px}.hero-stage .mirror-frame{inset:32px 0 30px 40%}.intro-heading h2{font-size:36px}.product-jumps a{padding:21px 18px;gap:9px;grid-template-columns:24px 1fr}.jump-copy strong{font-size:16px}.jump-copy>span{font-size:12px}.screen-gallery .device-frame{width:186px}.screen-card h3{font-size:18px}.screen-card p{font-size:13px}.language-switch{min-width:40px}.nav-actions{gap:4px}.wordmark{font-size:24px}.story-heading h2{font-size:31px}.support-grid{gap:22px}}
/* Accent hierarchy: blue means a primary action, a link, selected state, or data. */
:root{--brand-action:#275fd8;--brand-pressed:#1f4fb8}
.button-primary{background:var(--brand-action);box-shadow:none}.button-primary:hover{background:var(--brand-pressed);box-shadow:0 8px 24px var(--accent-soft)}.button-primary:active{background:var(--brand-pressed)}
.hero-eyebrow,.story-kicker,.light-section .story-kicker{color:var(--secondary)}
.theme-toggle{background:var(--surface);color:var(--secondary)}.theme-toggle:hover{color:var(--text)}
.progress-story{background:var(--surface)}.progress-lab{background:var(--surface);box-shadow:none}.user-message{background:var(--brand-action)}
.hero-stage::before{content:none}
nav a[aria-current=location]{color:var(--accent-text)}
.text-link,.reset-demo{min-height:44px}

/* Keep the mascot centered on the glass, with its feet on the mirror floor. */
.hero-stage{--mirror-left:42%;--mirror-right:1%}
.hero-stage .studio-mascot{left:calc((100% + var(--mirror-left) - var(--mirror-right))/2);right:auto;translate:-50% 0;height:400px;bottom:60px}
.hero-stage .mirror-frame{left:var(--mirror-left);right:var(--mirror-right)}
.hero-stage .mirror-horizon{bottom:5%}
.hero-product{z-index:4}
:root[data-theme=light] .hero-stage .mirror-frame{background:linear-gradient(150deg,#d8e3f1 0%,#a9bdd8 48%,#c3d2e7 72%,#89a9d5 100%);border:2px solid #7389a6;box-shadow:inset 0 0 0 4px #f5f8fd80,0 0 0 6px #c1cad7,0 0 0 7px #879bb6,0 18px 35px #263c5a24}
:root[data-theme=light] .mirror-light{background:linear-gradient(115deg,transparent 28%,#f9fcff70 36%,#ffffffb3 38%,#ffffff21 44%,transparent 51%,transparent 67%,#46668d26 71%,transparent 76%)}
:root[data-theme=light] .mirror-horizon{background:linear-gradient(90deg,transparent,#496e9d99,transparent);box-shadow:0 1px 0 #ffffff70,0 0 18px 4px #527fb526}
:root[data-theme=light] .mirror-floor{background:radial-gradient(ellipse,#466c9e40,transparent 70%);border-color:#708db85c}
@media(max-width:1100px){.hero-product{width:min(226px,47%)}.hero-stage .studio-mascot{height:clamp(290px,32vw,345px);bottom:60px}}
@media(min-width:701px) and (max-width:900px){.hero-product{width:min(196px,49%)}.hero-stage .studio-mascot{height:clamp(225px,34vw,290px);bottom:56px}}
@media(max-width:700px){.hero-stage{--mirror-left:54%;height:450px}.hero-product{width:190px}.hero-stage .studio-mascot{height:260px;bottom:55px}.hero-stage .mirror-frame{top:32px;bottom:36px}}
@media(max-width:380px){.hero-stage{--mirror-left:53%;--mirror-right:0%;height:394px}.hero-product{width:54%}.hero-stage .studio-mascot{height:220px;bottom:46px}.hero-stage .mirror-frame{bottom:30px}}

/* Mirrored display surfaces in all screenshot galleries. */
:root{--gallery-glass:linear-gradient(145deg,#3b4657,#202a38 48%,#2b3c55);--gallery-rim:#69768b;--gallery-rim-inner:#d2def024;--gallery-gleam:#d8e9ff2e;--gallery-floor:#95afd05c;--gallery-reflection:.32}
:root[data-theme=light]{--gallery-glass:linear-gradient(145deg,#e6edf5,#b8c8dc 48%,#d3dfed 73%,#a9bdd6);--gallery-rim:#8192aa;--gallery-rim-inner:#f9fcff99;--gallery-gleam:#ffffff9c;--gallery-floor:#536f9280;--gallery-reflection:.48}
.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{--preview-phone-width:224px;background:var(--gallery-glass);border:2px solid var(--gallery-rim);padding:30px 18px 88px;border-radius:28px;box-shadow:inset 0 0 0 4px var(--gallery-rim-inner)}
.feature-story .screen-preview::before{inset:0;background:linear-gradient(118deg,transparent 8%,var(--gallery-gleam) 17%,transparent 24%,transparent 76%,var(--gallery-gleam) 84%,transparent 90%);translate:0 0;opacity:1}
.feature-story .screen-preview:hover::before{translate:12% 0}
.feature-story .screen-preview::after{content:'';position:absolute;left:8%;right:8%;bottom:82px;height:1px;background:linear-gradient(90deg,transparent,var(--gallery-floor),transparent);pointer-events:none;z-index:-1}
.feature-story .screen-preview .device-frame{width:var(--preview-phone-width);flex-shrink:0;z-index:1}
.screen-reflection{position:absolute;top:calc(100% - 81px);left:50%;translate:-50% 0;width:var(--preview-phone-width);max-width:calc(100% - 36px);height:65px;overflow:hidden;opacity:var(--gallery-reflection);mask-image:linear-gradient(#000,transparent);pointer-events:none}
.device-reflection{display:block;border:4px solid #454952;border-radius:30px;overflow:hidden;background:#121316;transform:scaleY(-1)}
.device-reflection img{display:block;width:100%;height:auto;aspect-ratio:368/800}
.feature-story .screen-preview:hover .device-frame{transform:translateY(-3px)}
@media(max-width:1100px){.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{--preview-phone-width:210px}}
@media(max-width:600px){.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{--preview-phone-width:204px;padding:24px 15px 88px}}
@media(max-width:380px){.feature-story .screen-preview,.feature-story .screen-card:nth-child(2) .screen-preview,.feature-story .screen-card:nth-child(3) .screen-preview{--preview-phone-width:186px}}
