/* Only one panel participates in layout at a time. */
html{scroll-behavior:auto;scroll-padding-top:0}
[hidden]{display:none!important}
body{overscroll-behavior-y:none}
.flow-panel{position:relative;min-height:calc(100svh - var(--mobile-download-height,0px))}
.banner-panel .hero{padding-bottom:0}
.banner-panel .hero-copy{display:flex;flex-direction:column;align-items:center;min-height:calc(100svh - var(--mobile-download-height,0px) - 140px)}
.flow-next,.hero .flow-next{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;border-radius:0;background:transparent;color:var(--muted);font:400 .875rem/1.5 'DM Sans',sans-serif;letter-spacing:0;text-align:center;cursor:pointer;min-height:88px;width:100%;margin:24px 0 0;padding:14px 20px 16px;text-decoration:none;flex-shrink:0}
.flow-next span{display:block;font-size:30px;line-height:1;color:var(--accent)}
.hero .flow-next{margin-top:auto;padding-top:24px}
.flow-next:hover{color:var(--ink)}
.flow-next:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.orb-panel,.support-panel{max-width:1140px;margin:auto;display:flex;flex-direction:column;padding:28px 48px 0}
.flow-heading{font:500 .875rem/1.5 'DM Sans',sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);text-align:center;margin:0 0 24px;padding:0;border:0}
.flow-heading:focus{outline:none}
.flow-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:60px;margin:auto 0;width:100%}
.orb-art,.support-art{position:relative;width:min(100%,380px);aspect-ratio:1;justify-self:center;flex-shrink:0}
.orb-art canvas,.support-art canvas{display:block;width:100%;height:100%;visibility:visible!important;transform:none}
.journey-center-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 27px/1.25 'DM Sans',sans-serif;color:var(--ink);letter-spacing:-.5px}
.flow-copy{min-width:0;width:100%}
.flow-copy p,.journey-description{font:400 1rem/1.65 'DM Sans',sans-serif;letter-spacing:0;color:var(--muted);margin:0}
.support-copy h3{font:500 calc(1.5rem + 4px)/1.3 'DM Sans',sans-serif;letter-spacing:-.5px;color:var(--ink);margin:0 0 14px}
.support-copy .area-action{display:inline-flex;align-items:center;gap:12px;border:0;background:none;padding:12px 0;color:var(--accent);font:400 1rem/1.5 'DM Sans',sans-serif;margin-top:8px;text-decoration:none;min-height:44px}
.flow-progress{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:0}
.flow-progress button{width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer;padding:0}
.flow-progress button::after{content:'';position:absolute;right:14px;top:7px;bottom:7px;width:3px;background:var(--line);border-radius:3px}
.flow-progress button.selected::after{background:var(--primary)}
.orb-panel>.flow-next,.support-panel>.flow-next{margin-top:24px}
.final-panel{display:block;min-height:100svh}
.final-panel .try-content{opacity:calc(.4 + var(--cta-reveal,1)*.6)}
@media(max-width:700px) and (orientation:portrait){
 .banner-panel .hero-copy{min-height:calc(100svh - var(--mobile-download-height,0px) - 112px)}
 .orb-panel,.support-panel{padding:24px 38px 0 24px}
 .flow-layout{display:flex;flex-direction:column;gap:18px}
 .orb-art,.support-art{width:min(100%,320px,39svh)}
 .flow-copy{text-align:center;max-width:380px}
 .support-copy h3{font-size:calc(1.375rem + 4px)}
 .flow-heading{margin-bottom:24px}
 .flow-progress{right:0}
 .flow-progress button::after{right:10px}
 .flow-next{min-height:80px}
}
@media(orientation:landscape) and (max-height:600px){
 .orb-panel,.support-panel{padding:12px 48px 0 24px}
 .flow-heading{font-size:.75rem;margin-bottom:8px}
 .flow-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
 .orb-art,.support-art{width:min(100%,48svh)}
 .flow-copy{text-align:left}
 .flow-copy p{font-size:.9375rem;line-height:1.5}
 .support-copy h3{font-size:calc(1.25rem + 4px);margin-bottom:8px}
 .support-copy .area-action{margin-top:0;padding:6px 0}
 .orb-panel>.flow-next,.support-panel>.flow-next{min-height:58px;margin-top:8px;padding:6px 12px;gap:2px}
 .flow-next span{font-size:24px}
 .flow-progress button{height:36px}
}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){
 .orb-art,.support-art{width:min(100%,250px,33svh)}
 .flow-heading{margin-bottom:14px}
 .flow-copy p{font-size:.875rem}
 .support-copy h3{font-size:calc(1.25rem + 2px)}
 .flow-layout{gap:12px}
}
/* Larger text and reduced motion retain the same explicit steps with natural overflow. */
.reading-layout .flow-panel{height:auto}
.reading-layout .orb-art,.reading-layout .support-art{display:block!important}
@media(prefers-reduced-motion:reduce){.flow-panel *{scroll-behavior:auto!important}}

/* Anchor every illustration and copy block to the same top coordinates. */
.flow-layout{align-items:start;margin:clamp(24px,8svh,80px) 0 24px}
.orb-panel>.flow-next,.support-panel>.flow-next{margin-top:auto}
.flow-transition-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:90}
.flow-transition-layer>.flow-panel{background:var(--bg)}
@media(max-width:700px) and (orientation:portrait){
 .flow-layout{align-items:center;margin-top:20px}
}
@media(orientation:landscape) and (max-height:600px){
 .flow-layout{margin-top:8px;margin-bottom:8px}
}
/* Keep each support description directly below its heading. */
.support-copy h3{min-height:0}

/* Match the side-by-side layout, including desktop windows taller than wide. */
@media(min-width:701px), (orientation:landscape){
 .flow-layout{align-items:center}
 .support-copy h3{min-height:0}
}

.hero .shield-support{color:#fff}
.expert-intro .expert-kicker{color:#34d399}
.expert-section .methodologies{max-width:800px}
@media(max-width:700px){
 .psych-test-cta{width:max-content;max-width:none;white-space:nowrap;margin-inline-start:var(--test-button-offset,0px)}
}
@media(max-width:800px), (pointer:coarse){
 .expert-section .method-grid{display:flex;width:100%;max-width:800px;margin-inline:0;padding:0 0 4px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;scrollbar-width:none;align-items:stretch;touch-action:pan-x pan-y pinch-zoom}
 .expert-section .method-grid::-webkit-scrollbar{display:none}
 .expert-section .method-card,.expert-section .method-card:last-child{flex:0 0 calc(100% - 24px);scroll-snap-align:start;scroll-snap-stop:always}
}

/* Shared cue for Discover how it works and Scroll to see next. */
.flow-next,.hero .flow-next,.orb-panel>.flow-next,.support-panel>.flow-next{gap:2px}
.flow-next span{font-size:22px;animation:flow-arrow-bob 1.8s ease-in-out infinite}
@keyframes flow-arrow-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.flow-next span{animation:none}}

@media(max-width:900px){
 .mobile-download{padding-top:9px;padding-bottom:calc(9px + min(env(safe-area-inset-bottom,0px),34px))}
 .mobile-download .store{min-height:3rem;padding-block:6px}
}

/* Reserve the same visible viewport used to anchor the iPhone download bar. */
@media(max-width:900px){
 .has-mobile-download .flow-panel{min-height:calc(var(--mobile-visible-height,100svh) - var(--mobile-download-height,0px))}
 .mobile-download.is-visible{transform:none}
}

/* In-flow, button-only section navigation. */
.step-controls{position:relative;flex-shrink:0;margin: auto auto 0;display:flex;align-items:center;gap:4px;width:270px;max-width:calc(100vw - 32px);padding:4px;border:1px solid #a4a7ff26;border-radius:999px;background:#111d3b;color:var(--muted)}
.step-controls:has(button[hidden]){width:150px}
.step-controls button{display:flex;flex:1;align-items:center;justify-content:center;min-width:0;min-height:40px;padding:8px 20px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:500 .875rem/1.2 'DM Sans',sans-serif;cursor:pointer;transition:background .18s,transform .18s}
.step-controls .step-next{background:#343365;color:#eeecff}
.step-controls button:hover{background:#a4a7ff18;color:var(--ink)}
.step-controls .step-next:hover{background:#42417a}
.step-controls button:active{transform:scale(.97)}
.step-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.flow-panel{padding-bottom:16px}
.banner-panel{display:flex;flex-direction:column}
.final-panel>.step-controls{margin-top:24px}
.banner-panel .hero-copy{min-height:calc(100svh - var(--mobile-download-height,0px) - 228px)}
@media(max-width:700px) and (orientation:portrait){
 .banner-panel .hero-copy{min-height:calc(100svh - var(--mobile-download-height,0px) - 200px)}
}
@media(prefers-reduced-motion:reduce){.step-controls button{transition:none}}

/* Let cards cross the content margins, with the next card visibly peeking in. */
@media(max-width:800px), (pointer:coarse){
 .expert-section .methodologies{min-width:0;overflow:visible}
 .expert-section .method-grid{box-sizing:border-box;width:100vw;min-width:0;max-width:none;margin-inline:calc(50% - 50vw);padding-inline:22px;scroll-padding-inline:22px;overflow-x:auto}
 .expert-section .method-card,.expert-section .method-card:last-child{flex-basis:calc((100vw - 36px)/1.3);max-width:none;scroll-snap-align:start}
}

/* Minimum gap above navigation; auto margins can add space, never remove it. */
.banner-panel>.opening-pin{padding-bottom:28px}
.orb-panel>.flow-layout,.support-panel>.flow-layout{margin-bottom:28px}
.final-panel>.step-controls{margin-top:28px}

/* Same compact top progress dots as the original onboarding. */
body{padding-top:44px}
.step-dots{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:112;width:600px;max-width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--bg)}
.step-dots span{display:block;width:5px;height:5px;border-radius:5px;background:#414967;transition:width .4s ease,background .4s ease}
.step-dots span.active{width:18px;background:#b9aff2}
.flow-panel{min-height:calc(100svh - var(--mobile-download-height,0px) - 44px)}
@media(max-width:900px){
 .has-mobile-download .flow-panel{min-height:calc(var(--mobile-visible-height,100svh) - var(--mobile-download-height,0px) - 44px)}
}
.support-copy{--description-font-size:1rem}
.support-copy p{font-size:calc(var(--description-font-size) + var(--copy-font-increase,4px) - 1px)}
.support-copy .area-action{font-size:calc(var(--description-font-size) - 2px)}
@media(orientation:landscape) and (max-height:600px){.support-copy{--description-font-size:.9375rem}}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){.support-copy{--description-font-size:.875rem;--copy-font-increase:2px}}
@media(prefers-reduced-motion:reduce){.step-dots span{transition:none}}

/* Edge navigation shares the section controls' rounded purple treatment. */
.step-dots{width:100%;padding-inline:56px;box-sizing:border-box}
.step-dots button{position:absolute;top:0;width:44px;height:44px;padding:6px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.step-dots .header-back{left:max(6px,env(safe-area-inset-left,0px))}
.step-dots .header-next{right:max(6px,env(safe-area-inset-right,0px))}
.step-dots button::before{content:'';position:absolute;inset:8px 6px;border:1px solid #a4a7ff26;border-radius:8px;background:#111d3b}
.step-dots button:hover::before{background:#42417a}
.step-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.step-dots button svg{position:relative;width:19px;height:19px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.final-scroll-hint{position:fixed;bottom:calc(var(--mobile-download-height,0px) + 8px);left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 16px;border-radius:16px;background:var(--bg);color:var(--muted);font:400 .75rem/1.4 'DM Sans',sans-serif;white-space:nowrap;pointer-events:none}
.final-scroll-hint svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:flow-arrow-bob 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.final-scroll-hint svg{animation:none}}

/* Center the final step's Previous control in the existing title top space. */
.final-panel>.step-controls{position:absolute;top:56px;left:50%;transform:translate(-50%,-50%);margin:0}
@media(max-width:700px){.final-panel>.step-controls{top:50px}}

/* Keep the dot appearance while making the full header height clickable. */
.step-dots{gap:0}
.step-dots .step-dot{position:relative;top:auto;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;height:44px;padding:0 3.5px}
.step-dots .step-dot::before{content:none}
.step-dots .step-dot:focus-visible{outline-offset:-1px;border-radius:4px}

/* Closer heading/art/copy spacing in the stacked mobile steps. */
@media(max-width:700px) and (orientation:portrait){
 .orb-panel .flow-heading,.support-panel .flow-heading{margin-bottom:8px}
 .orb-panel .flow-layout,.support-panel .flow-layout{margin-top:0;gap:0}
 .support-panel .support-art{width:min(100%,272px,33svh)}
}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){
 .support-panel .support-art{width:min(100%,212px,28svh)}
}
@media(orientation:landscape) and (max-height:600px){
 .support-panel .support-art{width:min(100%,41svh)}
}

/* Mobile content and download bar occupy separate, non-overlapping rows. */
.landing-scroll{display:contents}
@media(max-width:900px){
 html.mobile-step-layout{height:100%;overflow:hidden;overscroll-behavior:none}
 html.mobile-step-layout body{height:100svh;height:100dvh;min-height:0;padding:44px 0 0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;position:relative}
 .mobile-step-layout .landing-scroll{display:block;grid-row:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-behavior:auto}
 html.mobile-step-layout body>.mobile-download{position:relative;inset:auto;grid-row:2;height:auto;min-height:0;transform:none;transition:none}
 .mobile-step-layout .flow-panel{min-height:calc(100dvh - var(--mobile-download-height,0px) - 44px)}
 .mobile-step-layout .final-scroll-hint{position:absolute}
 .mobile-step-layout .flow-transition-layer{top:44px;bottom:var(--mobile-download-height,0px)}
}

/* Opening screen: one message, flexible illustration, one action. */
body[data-flow-step="1"]{padding-top:0}
body[data-flow-step="1"] .banner-panel{min-height:calc(100svh - var(--mobile-download-height,0px))}
.banner-panel .opening-pin .logo{top:18px;width:44px;height:44px}
.banner-panel .hero{padding-top:24px;padding-bottom:0}
.banner-panel .hero .hero-copy{min-height:0}
.banner-panel .hero .opening-caption{font:500 .875rem/1.5 'DM Sans',sans-serif;letter-spacing:.3px;text-transform:none;margin:0 0 14px}
.banner-panel #hero-title{width:100%;color:#fff;font:400 clamp(2rem,7vw,3rem)/1.12 Fraunces,serif;letter-spacing:-1px;margin:0 0 16px}
.banner-panel .hero-benefit{font:400 clamp(2rem,7vw,3rem)/1.3 'DM Sans',sans-serif;letter-spacing:-1px;color:#f59e0b;margin:0 0 20px}
.banner-panel .hero-benefit span{display:block;position:relative;isolation:isolate;width:max-content;white-space:nowrap;margin-inline:auto}
.banner-panel #mindify-stages{width:var(--hero-art-width,var(--hero-art-size,240px));height:var(--hero-art-size,240px);max-width:100%;margin:0 auto}
.banner-panel>.opening-pin{padding-bottom:20px;flex-shrink:0}
.banner-panel>.step-controls:has(button[hidden]){width:240px}
.banner-panel>.step-controls .step-next{white-space:nowrap}
body[data-flow-step="1"] .flow-transition-layer{top:0}
@media(max-width:900px){
 html.mobile-step-layout body[data-flow-step="1"]{padding-top:0}
 .mobile-step-layout body[data-flow-step="1"] .banner-panel{min-height:calc(100dvh - var(--mobile-download-height,0px))}
}

/* Closing identity frame shares the illustration's existing footprint. */
#mindify-stages .shield-closing{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;opacity:0;pointer-events:none}
#mindify-stages .shield-closing .shield-closing-message{font:400 1rem/1.3 'DM Sans',sans-serif;color:#fff;letter-spacing:-.4px;margin:0;display:block}
#mindify-stages .shield-closing-content{position:relative;width:calc(100vw - 48px);flex-shrink:0}

.banner-panel .opening-brand{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 24px}
.banner-panel .opening-brand img{width:30px;height:30px}
.banner-panel .opening-brand span{font:400 1rem/1.3 Fraunces,serif;color:#fff}

.banner-panel .hero .opening-caption{color:#A5A6FF}

.support-panel .flow-heading,.orb-panel .flow-heading{font:400 22px/1.35 'DM Sans',sans-serif;letter-spacing:0;text-transform:none;color:#fff}

.support-panel .flow-heading span{display:block;white-space:nowrap}
:is(.support-panel,.orb-panel) .support-copy h3{line-height:1.2;margin-bottom:8px}
:is(.support-panel,.orb-panel) .support-copy p{line-height:1.45}
:is(.support-panel,.orb-panel) .support-copy .area-action{margin-top:2px;padding:6px 0;line-height:1.3}

:is(.support-panel,.orb-panel) .support-copy h3{font-family:Fraunces,serif}
@media(max-width:700px) and (orientation:portrait){.support-panel .flow-heading,.orb-panel .flow-heading{font-size:20px}}
@media(orientation:landscape) and (max-height:600px),(max-width:700px) and (max-height:700px) and (orientation:portrait){.support-panel .flow-heading,.orb-panel .flow-heading{font-size:18px}}



.orb-panel .support-copy .journey-center-label{position:static;inset:auto;display:block}

/* Labels anchor to their own profile rather than to the overall scene width. */
.banner-panel #mindify-stages .scene{height:100%;aspect-ratio:auto;overflow:visible}
.banner-panel #mindify-stages .profile{width:var(--hero-art-size,240px);left:auto;right:0}
.banner-panel #mindify-stages .profile.other{left:0;right:auto}
.banner-panel #mindify-stages .person-label{width:var(--hero-label-width,91.2px)}
.banner-panel #mindify-stages .person-label:first-child{left:calc(var(--hero-art-size,240px) * .24 - 10px - var(--hero-label-width,80px))}
.banner-panel #mindify-stages .person-label:last-child{width:40px;right:calc(var(--hero-art-size,240px) * .24 - 10px - 40px)}

.banner-panel #mindify-stages .person-label:first-child{white-space:nowrap}

.banner-panel #mindify-stages{left:0}

/* CMS copy preserves explicit line breaks without accepting HTML. */
.support-copy h3,.support-copy p,.support-copy .area-action{white-space:pre-line}

/* One section-entry button on the last support step, matching the introduction. */
body[data-support-end="true"] .support-panel>.step-controls{width:240px}
body[data-support-end="true"] .support-panel>.step-controls .step-next{white-space:nowrap}

/* Spacing between psychology tests and the following invitation. */
.final-panel .psych-tests {
  padding-bottom: 24px;
}

.final-panel .psych-tests + .try-section {
  padding-top: 24px;
}

/* Last step uses the existing top back arrow. */
.final-panel > .step-controls {
  display: none;
}

.final-panel .psych-tests {
  padding-top: 24px;
}