/* A bounded composition: Ora on the left on desktop, above the cards on mobile. */
body[data-step="7"]{height:100dvh;overflow:hidden;background:linear-gradient(160deg,#fff,#eff7ff 55%,#fff)}
/* Reuse the paywall art and canvas styling without extra blur or attenuation. */
.ov-art{z-index:0}
body[data-step="7"] .onboarding-app{height:100dvh;min-height:0!important;padding-bottom:0!important;display:grid;grid-template-rows:auto minmax(0,1fr) auto;position:relative;z-index:1}
body[data-step="7"] .onboarding-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,70px);align-items:center;min-height:0;padding:12px 0;overflow:hidden}
body[data-step="7"] .question-column{width:100%;max-width:650px;min-width:0;text-align:center}
body[data-step="7"] .step-kicker,body[data-step="7"] .ora-caption{display:none}
body[data-step="7"] .ora-column{display:flex!important;height:100%!important;min-height:0!important;margin:0!important;width:100%;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:0!important}
body[data-step="7"] .ora-halo{width:min(36vw,54dvh,480px)!important;height:auto!important;aspect-ratio:1;border:0;background:none;box-shadow:none;flex:none!important;position:relative;isolation:isolate;animation:ov-enter .9s cubic-bezier(.16,1,.3,1) both}
body[data-step="7"] .ora-halo:before{content:'';position:absolute;inset:10%;border-radius:50%;background:#92cfff;filter:blur(45px);opacity:.2;z-index:-1;transition:opacity .5s,transform .5s}
body[data-step="7"].voice-speaking .ora-halo:before{opacity:.4;transform:scale(1.15)}
body[data-step="7"] .ora-halo canvas{width:100%!important;height:100%!important}
body[data-step="7"] .step-content{animation:none!important;filter:none!important;transform:none!important}

.ov{width:100%;animation:ov-enter .7s cubic-bezier(.16,1,.3,1) both}
body[data-step="7"] .ov>h2{font-size:clamp(30px,3.1vw,44px);line-height:1.08;letter-spacing:-.05em;margin:0 0 14px}
.ov-narration{height:80px;max-width:530px;margin:0 auto 10px;display:grid;align-items:center}
.ov-caption{margin:0!important;color:#7489a8;font-size:17px;line-height:1.5;text-wrap:balance;padding:0 16px}
.ov-caption>span{display:inline-block;opacity:.14;filter:blur(3px);translate:0 5px;transition:opacity .26s,filter .26s,translate .26s;color:#263e60}
.ov-caption>span.is-visible{opacity:1;filter:none;translate:0 0}.ov-caption>span.ov-blue{color:#006aff;font-weight:700}
.ov-carousel{--card-width:300px;--card-gap:calc(var(--card-width) + 18px);position:relative;height:290px;width:100%;overflow:visible;clip-path:inset(-36px 0 -36px);touch-action:pan-y;isolation:isolate;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ov-track{position:relative;width:100%;height:100%}
.ov-card{position:absolute;left:50%;top:10px;width:var(--card-width);height:264px;padding:24px 22px;border:1px solid #e4effe;border-radius:34px;background:linear-gradient(150deg,#fffffffa,#fafdfff5);box-shadow:0 16px 36px #2968b514;text-align:center;transform:translateX(calc(-50% + var(--offset)*var(--card-gap))) scale(.85);opacity:.35;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s,box-shadow .4s;cursor:pointer;will-change:transform}
.ov-card[aria-hidden="true"]{opacity:0;pointer-events:none}
.ov-card.is-active{transform:translateX(-50%) scale(1);opacity:1;box-shadow:0 18px 42px #2968b520}
.ov-card h3{font-size:32px;letter-spacing:-.035em;color:#182b48;margin:0 0 8px;font-weight:700}
.ov-style{display:inline-block;border-radius:999px;padding:5px 12px;font-size:12px;color:#0871ff;background:#eaf4ff}
.ov-card>p{min-height:48px;margin:16px 0 12px;color:#7a90b1;font-size:14px;line-height:1.45;text-wrap:balance}
.ov-audio{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:12px}
.ov-play{width:68px;height:68px;border:1px solid #e3f0ff;background:radial-gradient(circle,#dfedff,#f0f7ff);border-radius:50%;display:grid;place-items:center;color:#0871ff;flex-shrink:0;transition:transform .25s,box-shadow .35s;cursor:pointer}
.ov-play svg{width:28px;height:28px;fill:currentColor}.ov-play:active{transform:scale(.93)}
.ov-play:focus-visible,.ov-arrow:focus-visible,.ov-dots button:focus-visible{outline:3px solid #77b6ff;outline-offset:4px}
.ov-play[aria-busy="true"]{animation:ov-loading 1s ease-in-out infinite}
.ov-wave{display:flex;align-items:center;gap:4px;height:38px;color:#b6d7ff}.ov-wave i{width:3px;height:var(--bar);border-radius:5px;background:currentColor;transform:scaleY(.55);transition:transform .15s,color .4s}
.ov-card.is-playing .ov-wave i{transform:scaleY(calc(.25 + var(--level,0)*1.65));transition:transform 70ms linear;color:#3892ff}
.ov-card.is-playing .ov-play{box-shadow:0 0 0 7px #e7f3ff;transform:scale(1.04)}
.ov-navigation{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:4px}
.ov-arrow{border:1px solid #dceafd;border-radius:50%;width:36px;height:36px;color:#1678ed;background:#ffffffa8;font-size:19px;cursor:pointer;transition:transform .2s,background .2s}.ov-arrow:hover{background:#eaf4ff}.ov-arrow:active{transform:scale(.9)}
.ov-dots{display:flex;justify-content:center;gap:12px}
.ov-dots button{position:relative;border:0;background:#bed8fa;width:9px;height:9px;border-radius:50%;padding:0;transition:transform .3s,background .3s;cursor:pointer}.ov-dots button:before{content:'';position:absolute;inset:-12px}.ov-dots button[aria-pressed="true"]{background:#0875ff;transform:scale(1.2)}
.ov-note{font-size:12px;color:#8ba0bd;margin:10px 0 0}
body[data-step="7"] .onboarding-footer{position:relative;bottom:auto;left:auto;right:auto;width:100%;max-width:none;margin:0;min-height:74px;padding:12px 0;box-shadow:none;background:transparent;border:0;backdrop-filter:none}
body[data-step="7"] .footer-note{display:none}
body[data-step="7"] #next-button{margin-left:auto;min-width:240px;border-radius:18px;background:linear-gradient(135deg,#1689ff,#0061f7)}
@keyframes ov-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes ov-loading{50%{opacity:.5}}
@media(max-width:800px){
 body[data-step="7"] .onboarding-app{padding-inline:0}
 body[data-step="7"] .onboarding-header{margin-inline:20px;padding:10px 0;gap:6px}
 body[data-step="7"] #progress-stages{display:none}
 body[data-step="7"] .onboarding-layout{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:4px 0;overflow:hidden}
 body[data-step="7"] .ora-column{height:auto!important;flex:0 1 auto}
 body[data-step="7"] .ora-halo{width:min(49vw,23dvh,220px)!important}
 body[data-step="7"] .question-column{flex:0 0 auto;max-width:none}
 body[data-step="7"] .ov>h2{font-size:clamp(27px,7.7vw,36px);margin:0 0 8px}
 .ov-narration{height:70px;margin-bottom:5px;max-width:96%}.ov-caption{font-size:clamp(13px,3.7vw,16px);line-height:1.45}
 .ov-carousel{--card-width:clamp(214px,64vw,300px);--card-gap:calc(var(--card-width) + 12px);height:250px}
 .ov-card{height:230px;padding:20px 16px;border-radius:31px}.ov-card h3{font-size:28px}.ov-card>p{font-size:12px;min-height:43px;margin:13px 0 10px}.ov-style{font-size:11px;padding:4px 9px}.ov-audio{gap:9px;margin-top:9px}.ov-play{width:58px;height:58px}.ov-wave{gap:3px}.ov-wave i{width:2.5px}
 .ov-navigation{margin-top:0}.ov-note{display:none}
 body[data-step="7"] .onboarding-footer{padding:10px 20px calc(10px + env(safe-area-inset-bottom));gap:12px;background:transparent;min-height:72px}
 body[data-step="7"] #back-button{padding:13px 16px;color:#0871ff;border-radius:17px;font-size:16px}
 body[data-step="7"] #next-button{min-width:0;flex:1;padding:14px 15px;font-size:16px}
}
@media(max-height:720px) and (max-width:800px){
 body[data-step="7"] .ora-halo{width:min(36vw,15dvh)!important}
 body[data-step="7"] .onboarding-layout{gap:2px}
 body[data-step="7"] .ov>h2{font-size:27px;margin-bottom:5px}
 .ov-narration{height:62px}.ov-carousel{height:218px}.ov-card{height:202px;padding:14px 16px}.ov-card h3{font-size:25px}.ov-card>p{margin:10px 0 6px;min-height:36px;font-size:11px}.ov-play{width:49px;height:49px}.ov-audio{margin-top:6px}.ov-navigation{gap:18px}.ov-arrow{width:30px;height:30px}
}
@media(min-width:801px) and (max-height:650px){body[data-step="7"] .onboarding-header{min-height:65px}.ov-narration{height:65px}.ov-carousel{height:245px}.ov-card{height:225px;padding:16px 22px}.ov-card>p{margin:12px 0 7px}.ov-play{width:56px;height:56px}.ov-note{display:none}body[data-step="7"] .ov>h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.ov,.ov-play,body[data-step="7"] .ora-halo{animation:none!important}.ov-card,.ov-caption>span,.ov-play,.ov-dots button,.ov-wave i{transition:none!important}.ov-caption>span{opacity:1;filter:none;translate:none}}
@media(max-width:800px) and (max-height:600px){body[data-step="7"] .onboarding-header{padding:6px 0}body[data-step="7"] .ora-halo{width:60px!important}body[data-step="7"] .ov>h2{font-size:24px;line-height:1.02}.ov-narration{height:54px}.ov-caption{font-size:12px}.ov-carousel{height:193px}.ov-card{height:181px;padding:10px 15px}.ov-card h3{font-size:23px}.ov-card>p{min-height:33px;margin:7px 0 4px}.ov-play{width:43px;height:43px}.ov-audio{margin-top:4px}body[data-step="7"] .onboarding-footer{min-height:62px;padding-top:7px;padding-bottom:7px}}
body[data-step="7"].is-building-plan .onboarding-layout{min-height:0;display:flex;gap:14px;padding:8px 0}
body[data-step="7"].is-building-plan .ora-column{height:auto!important;min-height:0!important;flex:0 1 auto}
body[data-step="7"].is-building-plan .ora-halo{width:min(28dvh,200px)!important;height:auto!important}
body[data-step="7"].is-building-plan .plan-build-copy{max-width:500px}
/* CSS blur also softens Safari, whose canvas filter support varies. */

.ov-carousel{mask-image:none;overflow:visible}
.ov-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;background:#ffffffed;box-shadow:0 4px 14px #2a6ab218;backdrop-filter:blur(12px)}
.ov-arrow-prev{left:8px}.ov-arrow-next{right:8px}.ov-arrow:active{transform:translateY(-50%) scale(.93)}
.ov-card{--card-gap:calc(var(--card-width)*.83);transform:translateX(calc(-50% + var(--offset)*var(--card-gap))) scale(.86);opacity:.38}
.ov-card.is-active{transform:translateX(-50%) scale(1);opacity:1}
.ov-card.is-playing .ov-play{transform:none;box-shadow:0 0 0 7px #e7f3ff}
@media(max-width:800px){.ov-arrow{width:34px;height:34px}.ov-arrow-prev{left:12px}.ov-arrow-next{right:12px}}
/* Use the available height for readable narration and a larger voice card. */
.ov-narration{height:116px;margin-bottom:12px}
.ov-caption{font-size:18px;line-height:1.4;font-weight:400}
.ov.has-narration .ov-caption{font-size:22px;font-weight:500}
body[data-step="7"] .onboarding-footer{align-self:end}
@media(max-width:800px){
 body[data-step="7"] #progress-stages{display:flex;margin:0;gap:8px}
 body[data-step="7"] .onboarding-header{padding:9px 0;gap:6px}
 body[data-step="7"] .onboarding-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(60px,1fr) auto;gap:4px;align-items:center;justify-content:normal;padding:4px 0 8px}
 body[data-step="7"] .ora-column{grid-column:1;grid-row:1;justify-self:stretch;height:100%!important;min-height:0}
 body[data-step="7"] .question-column{grid-column:1;grid-row:2}
 body[data-step="7"] .ora-halo{width:min(55vw,24dvh,250px)!important;max-height:100%;max-width:100%;aspect-ratio:1}
 body[data-step="7"] .ov>h2{margin:0 0 8px;font-size:clamp(29px,7.5vw,36px)}
 .ov-narration{height:clamp(104px,13dvh,135px);margin-bottom:8px;max-width:96%}
 .ov-caption{font-size:clamp(14px,3.9vw,17px);line-height:1.5;padding:0 16px}
 .ov.has-narration .ov-caption{font-size:clamp(19px,5.1vw,24px);line-height:1.4}
 .ov-carousel{height:clamp(235px,29dvh,290px);--card-width:clamp(235px,68vw,330px)}
 .ov-card{height:calc(100% - 22px);display:flex;flex-direction:column;justify-content:center;padding:20px 18px}
 .ov-card h3{font-size:clamp(29px,7.5vw,35px)}.ov-style{align-self:center;font-size:12px}.ov-card>p{font-size:14px;line-height:1.4;margin:14px 0 10px;min-height:0}
 .ov-audio{margin-top:8px}.ov-play{width:62px;height:62px}
 .ov-navigation{height:27px;margin:0;padding:0;gap:0}
 body[data-step="7"] .onboarding-footer{min-height:0;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:transparent;gap:12px}
 body[data-step="7"] .onboarding-footer button{min-height:50px}
}
@media(max-width:800px) and (max-height:720px){
 body[data-step="7"] .onboarding-layout{grid-template-rows:minmax(40px,1fr) auto;padding:2px 0 5px}
 body[data-step="7"] .ora-halo{width:min(28vw,13dvh)!important}
 body[data-step="7"] .ov>h2{font-size:27px;margin-bottom:4px}
 .ov-narration{height:94px;margin-bottom:4px}.ov-caption{font-size:14px;line-height:1.4}.ov.has-narration .ov-caption{font-size:18px;line-height:1.3}
 .ov-carousel{height:205px;--card-width:clamp(220px,66vw,290px)}.ov-card{padding:13px 16px}
 .ov-card h3{font-size:27px}.ov-card>p{font-size:12px;margin:10px 0 7px}.ov-style{font-size:11px}.ov-play{width:49px;height:49px}.ov-audio{margin-top:5px}.ov-navigation{height:25px}
}
@media(max-width:800px) and (max-height:600px){
 body[data-step="7"] .onboarding-header{padding:5px 0;gap:4px}body[data-step="7"] #progress-stages li{font-size:10px}
 body[data-step="7"] .ora-halo{width:55px!important}body[data-step="7"] .ov>h2{font-size:23px}
 .ov-narration{height:86px}.ov-caption{font-size:13px;line-height:1.4}.ov.has-narration .ov-caption{font-size:16px;line-height:1.3}.ov-carousel{height:180px}.ov-card{padding:10px 14px}.ov-card h3{font-size:24px}.ov-card>p{font-size:11px;margin:7px 0}.ov-play{width:43px;height:43px}.ov-navigation{height:24px}
 body[data-step="7"] .onboarding-footer{padding-top:7px;padding-bottom:7px}body[data-step="7"] .onboarding-footer button{min-height:46px;padding:10px 12px}
}
@media(min-width:801px) and (max-height:650px){.ov-narration{height:100px}.ov-caption{font-size:16px}.ov.has-narration .ov-caption{font-size:20px}}
@media(max-width:800px) and (min-height:721px){.ov-narration{height:clamp(124px,15dvh,150px)}}
@media(max-width:360px) and (min-height:721px){.ov-narration{height:140px}.ov-card>p{font-size:13px}}
@media(max-width:800px) and (max-height:720px){.ov-narration{height:116px}.ov-carousel{height:195px}}
@media(max-width:800px) and (max-height:600px){.ov-narration{height:104px}.ov-carousel{height:170px}.ov-card>p{min-height:0}.ov-card h3{margin-bottom:5px}}

/* Compact introduction expands into a caption, gently moving Ora upward. */
body[data-step="7"] .ov-narration{height:64px;align-items:start;padding-top:4px;transition:height .55s cubic-bezier(.22,1,.36,1)}
body[data-step="7"] .ov.has-narration .ov-narration{height:116px;align-items:center;padding-top:0}
.ov-navigation{position:relative;z-index:4;background:transparent;border:0;box-shadow:none}
@media(max-width:800px){
 body[data-step="7"] .ov-narration{height:clamp(58px,8dvh,76px);margin-bottom:8px}
 body[data-step="7"] .ov.has-narration .ov-narration{height:clamp(124px,15dvh,150px)}
 body[data-step="7"] .ora-halo{transition:translate .55s cubic-bezier(.22,1,.36,1)}
 body[data-step="7"].voice-narrating .ora-halo{translate:0 -8px}
}
@media(max-width:800px) and (max-height:720px){
 body[data-step="7"] .ov-narration{height:52px;margin-bottom:4px}
 body[data-step="7"] .ov.has-narration .ov-narration{height:116px}
 body[data-step="7"].voice-narrating .ora-halo{translate:0 -4px}
}
@media(max-width:800px) and (max-height:600px){body[data-step="7"] .ov-narration{height:46px}body[data-step="7"] .ov.has-narration .ov-narration{height:104px}}
@media(min-width:801px) and (max-height:650px){body[data-step="7"] .ov.has-narration .ov-narration{height:100px}}
@media(prefers-reduced-motion:reduce){body[data-step="7"] .ov-narration,body[data-step="7"] .ora-halo{transition:none}body[data-step="7"].voice-narrating .ora-halo{translate:none}}

/* Voice selection arrives in a short sequence around the traveling Ora. */
.ov{animation:none}
.ov>h2{animation:ov-copy-enter .82s .3s cubic-bezier(.25,.6,.3,1) both}
.ov-narration{animation:ov-copy-enter .86s .46s cubic-bezier(.25,.6,.3,1) both}
.ov-carousel{animation:ov-cards-enter 1s .7s cubic-bezier(.25,.6,.3,1) both}
.ov-navigation,.ov-note{animation:ov-copy-enter .72s 1.06s cubic-bezier(.25,.6,.3,1) both}
@keyframes ov-copy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ov-cards-enter{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ov>h2,.ov-narration,.ov-carousel,.ov-navigation,.ov-note{animation:none}}