@font-face{font-family:Sora;src:url('../assets/landing/sora-regular.ttf') format('truetype');font-weight:400;font-display:swap;unicode-range:U+0000-024F}
@font-face{font-family:Sora;src:url('../assets/landing/sora-semibold.ttf') format('truetype');font-weight:600;font-display:swap;unicode-range:U+0000-024F}
@font-face{font-family:Inter;src:url('../assets/inter-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/landing/inter-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:dark;--page:#161616;--panel:#1b1b1b;--text:#f3f3f3;--body:#e2e2e2;--gutter:clamp(20px,4vw,48px);font-family:Sora,Inter,Arial,sans-serif;color:var(--text);background:var(--page)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}h1,h2,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #8099f9;outline-offset:5px}button{color:inherit}h1,.pro-copy h2{font-size:54px;font-weight:400;line-height:1.25;letter-spacing:0}.shell{width:min(840px,100%);margin-inline:auto}.screen{position:relative;min-height:100svh;padding-inline:var(--gutter)}.skip-link{position:fixed;left:16px;top:16px;transform:translateY(-200%);background:white;color:#161616;padding:12px;z-index:20}.skip-link:focus{transform:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 24px;border:1px solid #ffffff1a;border-radius:10px;background:transparent;font-size:16px;line-height:21px;white-space:nowrap;transition:background .18s,border-color .18s}.button:hover{background:#ffffff08;border-color:#ffffff35}.hero{height:100svh;display:flex;flex-direction:column;padding-top:clamp(24px,8.8svh,100px);padding-bottom:clamp(24px,3.5svh,40px)}.header{display:flex;align-items:center;justify-content:space-between;flex:none}.brand{display:flex;align-items:center;width:45px;height:24px}.brand img{display:block;max-width:none}.hero-content{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;padding-top:clamp(30px,8svh,116px);gap:clamp(24px,5.6svh,60px)}.intro{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;width:min(600px,100%);flex:none}.intro p,.pro-copy p{font-size:16px;font-weight:400;line-height:1.45;color:var(--body)}.store-links{display:flex;gap:20px;justify-content:center}.store-button{height:48px;font-size:14px;line-height:1.45}.store-button img{display:block;object-fit:contain}.play-icon{transform:scale(1.25,-1.25)}.video-panel{position:relative;flex:1;min-height:120px;max-height:500px;width:100%;border-radius:16px;background:var(--panel);overflow:hidden}.video-panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-fallback{position:absolute;right:12px;bottom:10px;z-index:1;font-family:Inter,Arial,sans-serif;font-size:11px;color:#ddd;padding:6px 8px;background:#161616c9;border-radius:5px;opacity:0;transition:opacity .2s}.video-panel:hover .video-fallback,.video-fallback:focus-visible{opacity:1}.about{display:flex;align-items:center;padding-block:32px}.feature-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.feature-card{height:min(520px,calc(100svh - 64px));min-height:440px;position:relative;background:var(--panel);border-radius:16px;padding:36px;overflow:hidden;isolation:isolate}.card-heading{position:relative;z-index:2}.eyebrow{font-size:14px;line-height:1.25;color:#6a6a6a;margin-bottom:16px}.feature-card h2{font-size:32px;line-height:1.25;font-weight:400;letter-spacing:0}.card-description{position:absolute;left:36px;right:30px;bottom:36px;font-size:14px;line-height:1.45;color:#545454;z-index:2}.planet-slot{position:absolute;left:50%;top:57.7%;width:390px;height:426px;transform:translate(-50%,-50%);pointer-events:none}.planet-slot img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.846);max-width:none}.store-art{position:absolute;left:50%;top:52.5%;transform:translate(-50%,-50%);display:flex;gap:30px}.subscription{display:flex;align-items:center;justify-content:center;overflow:hidden;padding-block:40px}.pro-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(600px,100%)}.pro-art{display:block;width:283px;height:160px;object-fit:contain;margin-bottom:68px}.pro-copy{text-align:center;display:flex;flex-direction:column;gap:20px;width:100%}.pricing{margin-top:60px;display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.price-card{width:min(530px,100%);padding:36px;border:1px solid #adadad1a;border-radius:16px;background:#ffffff05}.price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.price{display:flex;flex-direction:column;gap:0}.price strong{font-size:48px;font-weight:600;line-height:1;white-space:nowrap}.price span{font-size:14px;line-height:1.45;color:var(--body);margin-top:4px}.primary{background:white;color:#161616;border-color:white;font-size:14px;font-weight:600;padding:14px 22px;line-height:1.45}.primary:hover{background:#e8e8e8;border-color:#e8e8e8}.price-note{max-width:292px;margin-top:16px;font-size:12px;line-height:1.45;color:#747b73}.tariffs{color:#8099f9;background:none;border:0;padding:0;font-size:14px;line-height:1.45}.tariffs:hover{text-decoration:underline;text-underline-offset:4px}.pro-glows{position:absolute;width:1040px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}.glow{position:absolute;max-width:none}.glow.one{left:360px;top:330px}.glow.two{left:-100px;top:260px}.glow.three{left:190px;top:-10px}.footer{border-top:1px solid #dfe3dd0d;padding:60px var(--gutter);min-height:153px}.footer-inner{width:min(1200px,100%);margin-inline:auto;display:flex;justify-content:space-between;align-items:center}.footer-brand{font-size:22px;font-weight:600;line-height:1.45}.agency{display:inline-flex;align-items:center;gap:8px;font-family:Inter,Arial,sans-serif;color:#f7c8d0;font-size:12px;line-height:18px}.agency img{border-radius:4px}.agency span{text-decoration:underline wavy;text-underline-offset:3px}.notice{width:min(440px,calc(100% - 32px));border:1px solid #ffffff20;border-radius:20px;background:#202020;color:var(--text);padding:36px}.notice::backdrop{background:#0009;backdrop-filter:blur(6px)}.notice h2{font-size:24px;font-weight:400;line-height:1.25;padding-right:12px}.notice p{font-size:15px;line-height:1.5;margin:20px 0 24px;color:var(--body)}.close{position:absolute;top:8px;right:12px;border:0;background:none;font-size:28px}.notice-account{margin:0 8px 12px 0}.notice-done{font-size:14px}.notice-account[hidden]{display:none}
@media(max-height:800px) and (min-width:701px){.hero{padding-top:32px}.hero-content{padding-top:30px;gap:28px}.intro{gap:16px}.pro-art{width:230px;height:130px;margin-bottom:32px}.pricing{margin-top:32px}.subscription{padding-block:24px}.pro-copy{gap:16px}}
@media(max-width:700px){:root{--gutter:20px}h1,.pro-copy h2{font-size:clamp(32px,7.4vw,42px);letter-spacing:0}.hero{padding-top:24px;padding-bottom:24px}.hero-content{padding-top:clamp(32px,7svh,72px);gap:28px}.intro{gap:20px}.intro p,.pro-copy p{font-size:15px}.desktop-break{display:none}.store-links{gap:12px}.store-button{padding:10px 16px;font-size:13px}.login{font-size:14px;padding:10px 20px;min-height:44px}.video-panel{max-height:440px;min-height:160px}.video-fallback{opacity:1}.about{padding-block:24px}.feature-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;border-radius:16px}.feature-cards::-webkit-scrollbar{display:none}.feature-card{flex:0 0 100%;height:calc(100svh - 48px);min-height:460px;max-height:760px;scroll-snap-align:start;padding:28px}.feature-card h2{font-size:32px}.card-description{left:28px;right:24px;bottom:28px}.store-art{gap:clamp(16px,5vw,30px);width:calc(100% - 56px)}.planet-slot{top:55%}.subscription{padding-block:36px}.pro-art{width:230px;height:130px;margin-bottom:40px}.pricing{margin-top:36px}.price-card{padding:26px}.price strong{font-size:42px}.price-row{gap:12px}.primary{padding:12px 16px;font-size:13px}.price-note{max-width:270px}.pro-glows{transform:translate(-50%,-50%) scale(.7)}.footer{padding-block:40px;min-height:112px}}
@media(max-width:360px){.price-card{padding:22px}.price strong{font-size:36px}.primary{padding:12px;font-size:12px}.feature-card h2{font-size:29px}.store-links{gap:8px}.store-button{padding:10px 12px}.card-description{font-size:13px}}
@media(max-height:640px){.hero{height:auto;min-height:100svh}.hero-content{padding-top:28px}.video-panel{height:220px;flex:none}.subscription{min-height:100svh}.pro-art{margin-bottom:24px;width:210px;height:119px}.pricing{margin-top:24px}.feature-card{min-height:440px}.pro-copy h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Original Figma glass composition, exported at 2× with its icon layers. */
.store-art{display:block;width:330px;height:150px}.store-art>img{display:block;width:100%;height:auto;max-width:330px}
@media(max-width:700px){.store-art{width:min(330px,calc(100% - 56px));height:auto}}

/* Align the visible globe, not its transparent export bounds, with Figma. */
@media(min-width:701px){.planet-slot{top:calc(57.7% + 38px)}}

/* Page 13: the exported cards include their Figma rotation, blur and clipping. */
.hero{isolation:isolate;overflow:hidden;--art-scale:1;--hero-title-y:calc(clamp(24px,8.8svh,100px) + 46px + clamp(30px,8svh,116px))}
.hero-art{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-card{position:absolute;max-width:none;transform:scale(var(--art-scale));transform-origin:top left}
.hero-card-left{left:0;top:calc(var(--hero-title-y) - 8.281px)}
.hero-card-right{right:0;top:calc(var(--hero-title-y) + 20.394px);transform-origin:top right}
.hero-card-blur{left:0;top:calc(var(--hero-title-y) + 280.63px)}
@media(max-width:1199px){.hero{--art-scale:.65}.hero-card-left{left:-30px}.hero-card-right{right:-30px}}
@media(max-width:700px){.hero{--art-scale:.4;--hero-title-y:calc(24px + 44px + clamp(32px,7svh,72px))}.hero-card-left{left:-40px;top:calc(var(--hero-title-y) + 170px)}.hero-card-right{right:-55px;top:calc(var(--hero-title-y) + 180px)}.hero-card-blur{left:-35px;top:calc(var(--hero-title-y) + 260px)}}

@media(max-height:800px) and (min-width:701px){.hero{--hero-title-y:108px}}

.questions{display:flex;align-items:center;justify-content:center;padding-block:32px;overflow:hidden}
.questions-content{width:min(600px,100%);display:flex;flex-direction:column;align-items:center;gap:60px}
.question-preview{width:100%;display:flex;flex-direction:column;gap:12px;opacity:.6;mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 66%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32%,#000 66%,transparent 100%)}
.question-card{background:rgba(48,45,45,.3);border-radius:16px;overflow:hidden;backdrop-filter:blur(30px)}
.question-main{position:relative;min-height:106px;display:flex;align-items:center;padding:21px 78px 21px 24px}
.question-main h3{margin:0;font-size:24px;font-weight:600;line-height:28px;letter-spacing:.24px;color:#f4f8f4}
.question-card:nth-child(2) h3{opacity:.8}
.question-meta{height:46px;display:flex;align-items:center;border-top:1px solid #ffffff08;padding:8px 24px;color:#707070;font-size:14px;line-height:18px}
.question-planet{position:absolute;right:0;top:0;max-width:none;pointer-events:none}
.questions-copy h2{font-size:54px;font-weight:400;line-height:1.25;letter-spacing:0}
@media(max-height:850px){.questions-content{gap:28px}.question-main{min-height:84px;padding-block:14px}.question-main h3{font-size:22px;line-height:26px}.question-meta{height:34px}.questions-copy{gap:18px}.questions-copy h2{font-size:44px}}
@media(max-width:700px){.questions-content{gap:24px}.question-main{padding:18px 62px 18px 18px;min-height:98px}.question-main h3{font-size:20px;line-height:25px;letter-spacing:.2px}.question-meta{height:34px;padding-inline:18px;font-size:12px}.questions-copy h2{font-size:clamp(32px,7.4vw,42px)}.questions-copy{gap:20px}}

.question-planet.career{filter:grayscale(1)}

/* Page 13 uses a 260px rhythm between content groups and before the footer. */
:root{--section-gap:clamp(80px,18.0556vw,260px)}
body{overflow-x:clip}
main{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--section-gap)}
.screen{min-height:0}
.hero{height:auto;min-height:0;padding-bottom:0}
.hero-content{flex:none}
.video-panel{flex:none;height:clamp(220px,34.7222vw,500px);max-height:none}
.about,.subscription,.questions{padding-block:0;min-height:0}
.subscription,.questions{overflow:visible}
.pro-glows{z-index:-1}
.footer{margin-top:var(--section-gap)}

main{overflow-x:clip;overflow-y:visible}

/* Center the globe at SVG x=253.488, excluding asymmetric transparent padding. */
.planet-slot img{left:calc(50% - 19.448px)}

/* Mobile sections share one viewport; desktop keeps the Figma spacing. */
.slider-dots{display:none}
@media(max-width:700px){
 main{gap:0}
 .screen{height:100svh;min-height:100svh;padding-block:24px}
 .hero-content{flex:1;padding-top:clamp(24px,5svh,48px);gap:clamp(20px,4svh,36px)}
 .video-panel{flex:1;height:auto;min-height:120px;max-height:none}
 .about{display:flex;flex-direction:column;gap:0;padding-bottom:0}
 .feature-cards{flex:1;min-height:0;width:100%;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
 .feature-card{height:100%;min-height:0;max-height:none;scroll-snap-stop:always}
 .slider-dots{display:flex;flex:none;height:48px;align-items:center;justify-content:center;gap:8px}
 .slider-dots button{display:grid;place-items:center;width:32px;height:32px;border:0;padding:0;background:transparent}
 .slider-dots button::after{content:'';width:6px;height:6px;border-radius:50%;background:#555;transition:background .2s}
 .slider-dots button[aria-current=true]::after{background:#f3f3f3}
 .pro-art{width:clamp(180px,28svh,230px);height:auto;margin-bottom:clamp(20px,4svh,40px)}
 .pricing{margin-top:clamp(20px,4svh,36px)}
 .questions-content{height:100%;justify-content:center;gap:clamp(20px,4svh,32px)}
 .question-preview{min-height:0;flex:0 1 420px}
 .question-card{flex:1;min-height:0;display:flex;flex-direction:column}
 .question-main{flex:1;min-height:0;padding-block:12px}
 .question-main h3{font-size:18px;line-height:1.3}
 .question-meta{flex:none;height:30px}
 .questions-copy{flex:none}
 .footer{margin-top:0}
}
@media(max-width:700px) and (max-height:700px){
 .intro{gap:14px}.hero-content{padding-top:24px;gap:20px}
 .pro-art{width:180px;margin-bottom:20px}.pro-copy{gap:14px}
 .pricing{margin-top:20px;gap:16px}.price-card{padding:20px}
 .questions-content{gap:20px}.questions-copy{gap:14px}
 .question-main h3{font-size:16px;line-height:1.3}.question-main{padding-block:10px}
 .question-meta{height:26px}.question-preview{gap:8px}
}

/* Page 14 hero: source artwork is positioned on its 960px Figma stage. */
.hero{padding-top:100px;overflow:clip}
.hero-content{width:100%;max-width:none;padding-top:0;gap:0}
.hero-stage{position:relative;width:min(960px,100%);height:575px;flex:none;isolation:isolate}
.hero-scene{position:absolute;width:960px;height:575px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center}
.hero-scene img{position:absolute;max-width:none;pointer-events:none}
.hero-halo{z-index:-1}
.halo-left{left:-80px;top:-74px}.halo-right{left:349px;top:-74px}.halo-center{left:100px;top:-146px}
.hero-deck{left:193px;top:61px}
.hero-star{mix-blend-mode:lighten;object-fit:cover}
.star-small{left:35px;top:433px;width:34px;height:40px}
.star-large{left:867px;top:74px;width:94px;height:108px}
.star-muted{left:803px;top:395px;width:50px;height:58px;opacity:.2}
@media(max-width:1000px) and (min-width:701px){.hero-stage{height:calc((100vw - 2 * var(--gutter)) * .598958)}}
@media(max-width:700px){
 .hero{padding-top:24px}
 .hero-content{flex:1;min-height:0;justify-content:center;gap:24px}
 .hero-stage{flex:1;min-height:160px;max-height:460px;width:100%}
 .hero .intro{flex:none}
}
@media(max-width:700px){.hero-deck{transform:scale(1.4);transform-origin:center}}

.hero-deck-cards{position:absolute;inset:0;perspective:1200px;pointer-events:none}
.deck-card{position:absolute;width:191px;height:338px;padding:0;border:0;background:none;transform:rotate(var(--tilt));pointer-events:auto;perspective:1000px;border-radius:8px}
.deck-devil{left:228.26px;top:133.86px;--tilt:-9deg}
.deck-cups{left:539.26px;top:132.86px;--tilt:9deg}
.deck-wands{left:384px;top:91px;--tilt:0deg}
.card-lift,.card-turn,.card-front,.card-back{display:block;position:absolute;inset:0}
.card-turn{transform-style:preserve-3d}
.card-front,.card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{transform:rotateY(180deg);border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #0006}
.hero-scene .card-back img{width:100%;height:100%;object-fit:cover;inset:0}
.hero-scene .card-front img{left:-10px;top:0;width:211px;height:358px}
.hero-scene .deck-wands .card-front img{left:-40px;top:-30px;width:271px;height:418px}
.hero-scene .deck-card.has-new-face .card-front img{left:0;top:0;width:191px;height:auto;aspect-ratio:228/404;border-radius:8px;box-shadow:0 10px 30px #0006}
.deck-card.is-back .card-turn{transform:rotateY(180deg)}
.deck-wands.is-animating{z-index:4}
@media(max-width:700px){.hero-deck-cards{transform:scale(1.4);transform-origin:center}}
/* Figma Page 14: 8px clipping and a 1px inside overlay stroke. */
.card-front,.card-back{border-radius:8px;overflow:hidden;box-shadow:0 10px 20px #0005;isolation:isolate}
.card-front::after,.card-back::after{content:'';position:absolute;inset:0;border:1px solid #ffffff40;border-radius:inherit;mix-blend-mode:overlay;pointer-events:none;z-index:1}

/* Figma Pages 17–19: feature carousel and Button variants. */
.about{--feature-inset:max(var(--gutter),calc((100vw - 840px)/2));--feature-width:410px;display:block;padding-inline:0;overflow:hidden}
.feature-cards{position:relative;display:flex;gap:20px;width:100%;max-width:none;margin:0;padding:0 calc(100% - var(--feature-inset) - var(--feature-width)) 0 var(--feature-inset);overflow-x:auto;overflow-y:hidden;border-radius:0;scroll-snap-type:x mandatory;scroll-padding-left:var(--feature-inset);scrollbar-width:none;overscroll-behavior-x:contain}
.feature-cards::-webkit-scrollbar{display:none}
.feature-card{position:relative;flex:0 0 var(--feature-width);width:var(--feature-width);height:720px;min-height:0;padding:36px;border-radius:16px;background:#1b1b1b;overflow:hidden;scroll-snap-align:start;opacity:.5;transition:opacity .25s}
.feature-card:nth-child(3){margin-left:13px}
.feature-card.is-current{opacity:1}
.feature-card .card-heading{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.feature-card .eyebrow{margin:0;font-size:14px;line-height:1;color:#464646}
.feature-card h2{margin:0;font-size:32px;line-height:1.25;font-weight:400;letter-spacing:normal;color:#f0f0f0}
.feature-card .card-description{position:static;margin:0;max-width:none;font-size:16px;line-height:1.45;font-weight:400;color:#a1a1a1}
.feature-phone{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:61.25%;max-height:441px;aspect-ratio:242/441}
.feature-phone img{display:block;width:100%;height:100%;object-fit:fill}
.feature-phone::after{content:'';position:absolute;left:-10px;right:-10px;bottom:0;height:24.49%;background:linear-gradient(180deg,transparent,rgba(27,27,27,.9) 81.158%,#1b1b1b 96.023%);pointer-events:none}
.feature-loop-preview{display:none}
.feature-controls{display:flex;gap:16px;margin:36px 0 0 var(--feature-inset)}
.feature-arrow{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;flex:none}
.feature-arrow img{display:block;width:24px;height:24px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.button:not(.primary){transition:background-color .18s,color .18s;border-color:#ffffff1a;backdrop-filter:blur(45px)}
@media(hover:hover){.button:not(.primary):not(:disabled):hover{background:#fff;color:#000;border-color:#ffffff1a}.button:not(.primary):not(:disabled):hover img{filter:invert(1)}}
.button:not(.primary):not(:disabled):active{background:#e7e7e7;color:#000;border-color:#ffffff1a}
.button:not(.primary):not(:disabled):active img{filter:invert(1)}
.button:disabled{opacity:.3;cursor:default}
@media(max-width:700px){
 .about{--feature-inset:20px;--feature-width:calc(100vw - 68px);display:flex;flex-direction:column;padding:24px 0;min-height:100svh;height:100svh}
 .feature-cards{flex:1;min-height:0;gap:16px;width:100%;padding-right:calc(100% - var(--feature-inset) - var(--feature-width))}
 .feature-card{height:100%;padding:clamp(20px,6vw,28px)}
 .feature-card:nth-child(3){margin-left:0}
 .feature-card h2{font-size:clamp(24px,6.7vw,30px)}
 .feature-card .eyebrow{font-size:12px}
 .feature-card .card-description{font-size:14px}
 .feature-card .card-heading{gap:14px}
 .feature-phone{height:min(61.25%,calc(100% - 202px));max-width:75%}
 .feature-loop-preview{display:block}
 .feature-controls{flex:none;margin-top:16px;gap:16px}
}
@media(max-width:700px) and (max-height:520px){.about{height:600px}}
@media(prefers-reduced-motion:reduce){.feature-card,.button:not(.primary){transition:none}}
@media(max-width:360px){.feature-phone{height:min(61.25%,calc(100% - 232px))}}
.feature-controls{align-self:flex-start}

/* Page 20: shared 1040px grid, 510px cards, two subscription plans. */
:root{--content-width:1040px}
.header.shell{width:min(var(--content-width),100%)}
.about{--feature-inset:max(var(--gutter),calc((100vw - var(--content-width))/2));--feature-width:510px}
.feature-card:nth-child(3){margin-left:0}
.feature-card .card-heading{width:min(338px,100%)}
.pro-content{width:min(var(--content-width),100%)}
.pro-copy{width:min(600px,100%)}
.pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:20px;width:100%;margin-top:104px}
.price-card{display:flex;flex-direction:column;gap:24px;width:100%;padding:36px;min-width:0}
.price-row{min-height:68px;align-items:flex-start}
.free-plan{background:#ffffff03}
.free-plan h3{font-size:36px;line-height:48px;font-weight:600;margin:0}
.plan-features{list-style:none;margin:0;padding:32px 0 0;border-top:1px solid #ffffff0d;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.45;min-height:160px;color:#f0f0f0}
.plan-features li{padding-left:18px;position:relative}
.plan-features li::before{content:'—';position:absolute;left:0}
.price-note{margin:0;max-width:292px;font-size:12px;line-height:1.45;font-weight:300}
.pro-glows{width:909px;height:784px;left:calc(50% - 27px);top:-77px;transform:translateX(-50%)}
.pro-glows>img{position:absolute;left:-200px;top:-200px;max-width:none}
@media(min-width:701px){
 .subscription{margin-top:-84px}
 .pro-art{width:283px;height:160px;margin-bottom:68px}
 .pro-copy{gap:20px}.pro-copy h2{font-size:54px}
 .questions-content{gap:72px}.question-preview{height:480px;flex:none}
 .question-main{min-height:106px;padding-block:21px}.question-main h3{font-size:24px;line-height:28px}
 .question-meta{height:46px}.questions-copy{gap:24px}.questions-copy h2{font-size:54px}
 .footer{margin-top:200px;min-height:193px}
}
@media(max-width:1100px) and (min-width:701px){.price-card{padding:24px}.plan-features{font-size:14px}.free-plan h3{font-size:30px}}
@media(max-width:700px){
 .about{--feature-inset:20px;--feature-width:calc(100vw - 68px)}
 .subscription{height:auto;min-height:100svh;padding-block:40px}
 .pricing{grid-template-columns:1fr;gap:16px;margin-top:32px}
 .price-card{padding:24px;gap:20px}
 .plan-features{min-height:0;font-size:14px;padding-top:20px;gap:10px}
 .price-row{min-height:60px}.free-plan h3{font-size:30px;line-height:42px}
 .price-note{max-width:100%}.pro-glows{transform:translateX(-50%) scale(.7);transform-origin:top center}
}

.pricing .price span{margin-top:0}
/* Page 21 enlarges the interface frames, keeping their bottom edge aligned. */
.feature-phone{height:64.4444%;max-height:464px;aspect-ratio:300/464}
.feature-phone::after{left:-13px;right:-13px;height:23.2759%}
.feature-card:nth-child(2) .feature-phone::after{left:-13px;right:-33px}
.feature-card:nth-child(3) .feature-phone::after{left:-21px;right:-21px}
@media(max-width:700px){.feature-phone{height:min(64.4444%,calc(100% - 202px));max-width:82%}.feature-card .card-description br{display:none}}
@media(max-width:360px){.feature-phone{height:min(64.4444%,calc(100% - 232px))}}
@media(max-width:700px){.feature-phone{height:min(64.4444%,calc(100% - 202px),calc((100vw - 68px) * 1.2682667));max-width:none}}
@media(max-width:360px){.feature-phone{height:min(64.4444%,calc(100% - 232px),calc((100vw - 68px) * 1.2682667))}}

/* Revised Page 21: 300×524 frame, same top, clipped below the panel. */
@media(min-width:701px){.feature-phone{height:524px;max-height:none;aspect-ratio:300/524;bottom:-60px}.feature-phone::after{bottom:60px;height:108px}}
@media(max-width:700px){.feature-phone{height:min(72.7778%,calc(100% - 202px),calc((100vw - 68px) * 1.4322667));max-height:524px;aspect-ratio:300/524}}
@media(max-width:360px){.feature-phone{height:min(72.7778%,calc(100% - 232px),calc((100vw - 68px) * 1.4322667))}}
/* Current Page 21: the panel grows with the 524px phone frame. */
.feature-card{opacity:.5}.feature-card.is-current{opacity:1}
@media(min-width:701px){.feature-card{height:780px}.feature-phone{bottom:0}.feature-phone::after{bottom:0}}

/* Native 4x Figma screen inside the existing phone bezel. */
.feature-phone--hires .feature-screen{position:absolute;left:4.1%;top:2.62%;width:91.8%;height:97.38%;overflow:hidden;border-radius:16% 16% 0 0 / 7% 7% 0 0;background:#101010}
.feature-phone--hires .feature-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.feature-island{position:absolute;top:4.48%;left:35.99%;width:28.25%;height:4.7%;border-radius:999px;background:#080808}
.feature-phone--hires::after{z-index:2}

/* Page 21 — revised subscription, 480px panels on a 1000px grid. */
.subscription .pro-content{width:min(1000px,100%)}
.subscription .pricing{gap:40px;margin-top:80px}
.subscription .price-card{padding:36px;gap:24px;border:0;background:rgba(27,27,27,.4);backdrop-filter:blur(50px);min-height:382px}
.subscription .plan-features{color:#e2e2e2;min-height:136px;padding-top:32px;font-size:16px;gap:12px}
.subscription .plan-features li{padding-left:12px}
.subscription .plan-features li::before{content:'·'}
.subscription .price-note{margin-top:auto;font-weight:300}
.subscription .pro-glows{width:618px;height:507px;left:calc(50% - 25px);top:-102px;transform:translateX(-50%)}
.subscription .pro-glows>img{left:-200px;top:-200px}
.pricing-glow{position:absolute;width:512px;height:512px;top:361px;left:calc(50% - 2px);transform:translateX(-50%);pointer-events:none;z-index:-1}
.pricing-glow>img{position:absolute;left:-200px;top:-200px;max-width:none}
@media(min-width:701px){.subscription .pro-copy p{min-height:69.6px}.subscription .price-row{min-height:68px}.subscription .price-card{height:382px}.subscription .free-plan h3{font-size:36px}.subscription{margin-top:-84px}}
@media(max-width:1050px) and (min-width:701px){.subscription .pricing{gap:24px}.subscription .price-card{padding:24px;height:auto;min-height:382px}.subscription .plan-features{font-size:14px}.subscription .free-plan h3{font-size:30px}}
@media(max-width:700px){.subscription .pricing{gap:16px;margin-top:32px}.subscription .price-card{padding:24px;gap:20px;min-height:0}.subscription .plan-features{min-height:0;font-size:14px;gap:10px;padding-top:28px}.subscription .price-note{margin-top:0}.subscription .pro-glows,.pricing-glow{transform:translateX(-50%) scale(.7);transform-origin:top center}}

/* Page 23: scoped typography and geometry; the final questions section is unchanged. */
.hero .intro p,.subscription .pro-copy p{color:#b3b3b3}
.feature-card--daily h2,.feature-card--history h2{color:#f3f3f3}
.feature-card--daily .card-description{color:#b3b3b3}
.subscription .price,.subscription .price span,.subscription .free-plan h3{color:#f0f0f0}
.subscription .plan-features{color:#b3b3b3}
.subscription .price-note{max-width:none;font-size:14px;line-height:18px;color:#464646}
@media(min-width:701px){
 .hero .intro p,.subscription .pro-copy p{font-size:24px;line-height:1.45}
 .subscription .pro-copy p{min-height:104.4px}
 .subscription .pricing{margin-top:120px}
 .feature-card--reading{height:774px;margin-top:6px}
 .feature-card--reading .feature-phone{height:518px;width:300px;aspect-ratio:auto}
 .subscription .free-plan{height:384px}
}
@media(max-width:1050px) and (min-width:701px){.subscription .price-card{height:auto}}
@media(max-width:700px){
 .hero .intro p,.subscription .pro-copy p{font-size:18px;line-height:1.45}
 .subscription .price-note{font-size:14px;line-height:18px}
}

/* Fit the complete hero, including store actions, inside the available viewport. */
.hero{height:100svh;max-height:1060px;min-height:0;padding-top:clamp(24px,5svh,64px);padding-bottom:max(32px,env(safe-area-inset-bottom))}
.hero .hero-content{flex:1;min-height:0;justify-content:center;gap:0}
.hero .hero-stage{flex:1;min-height:0;height:auto;max-height:575px}
.hero .intro{flex-shrink:0}
@media(max-width:700px){
 .hero{padding-top:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));max-height:none}
 .hero .hero-content{gap:16px}
 .hero .hero-stage{max-height:460px}
}
@media(max-height:600px){
 .hero{padding-top:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .hero .intro{gap:12px}
 .hero h1{font-size:32px}
 .hero .intro p{font-size:16px}
}

/* Page 23 — four-part example reading and expanded footer. */
.reading{width:min(1040px,calc(100% - var(--gutter)*2));display:grid;grid-template-columns:minmax(0,333fr) minmax(0,687fr);grid-template-rows:auto 1fr auto;column-gap:20px;position:relative;align-items:start}
.reading-heading{grid-column:1;grid-row:1}.reading-heading>p{color:#e2e2e266;font-size:16px;line-height:1.45;margin-bottom:6px}.reading-heading h2{font-size:34px;line-height:1.25;font-weight:400;margin:0;width:355px;max-width:100%}
.reading-tabs{grid-column:1;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:16px;background:#ffffff08}
.reading-tab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:53px;padding:8px 12px;border:0;border-radius:12px;background:transparent;text-align:left;opacity:.3;transition:opacity .25s,background .25s}
.reading-tab>span{display:flex;flex-direction:column;gap:2px}.reading-tab small{font-size:12px;color:#8d8d8d;line-height:15px}.reading-tab>span>span{font-size:16px;line-height:1.25}.reading-tab.is-active{opacity:1;background:#ffffff0d}.reading-tab:hover{opacity:1}
.reading-progress{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:conic-gradient(#f3f3f3 var(--progress,0deg),transparent 0);visibility:hidden}.is-active .reading-progress{visibility:visible}
.reading-panel{grid-column:2;grid-row:1 / 3;position:relative;min-height:635px;background:#ffffff08;border-radius:16px;padding:438px 36px 36px;overflow:hidden}
.reading-art{position:absolute;top:8px;left:8px;right:8px;height:344px;border-radius:10px;overflow:hidden}.reading-art::after{content:'';position:absolute;inset:0;background:rgba(28,28,28,.8)}
.reading-background{position:absolute;width:100%;height:auto;top:-51.5%;left:0;max-width:none}.reading-count{position:absolute;z-index:1;top:28px;right:28px;color:#b3b3b3;font-size:14px;line-height:18px}
.reading-cards{position:absolute;top:80px;left:36px;right:36px;display:flex;gap:16px;align-items:start;pointer-events:none}.reading-card{display:block;width:181px;height:320px;object-fit:cover;border-radius:9px}.reading-cards.is-summary{gap:12px}.reading-cards.is-summary .reading-card{width:calc((100% - 24px)/3);max-width:181px;height:auto;aspect-ratio:181/320}
.reading-arrows{position:absolute;top:280px;right:36px;display:flex;gap:16px}.reading-arrows .feature-arrow{width:48px;height:48px;min-height:48px;padding:11px;background:transparent}
.reading-panel.is-summary .reading-arrows{top:362px}
.reading-label{font-size:14px;line-height:18px;color:#8d8d8d;margin-bottom:6px}.reading-copy h3{font-weight:400;font-size:24px;line-height:1.25;margin:0 0 21px}.reading-description{font-size:16px;line-height:1.45;color:#cbcbcb}.reading-description p+p{margin-top:16px}
.reading-playback{grid-column:2;grid-row:3;justify-self:end;font-size:11px;color:#8d8d8d;border:0;background:transparent;padding:10px 0}.reading-playback:hover{color:#f3f3f3}
.footer-expanded{margin-top:200px;padding:60px var(--gutter) 40px}.footer-expanded .footer-inner{width:min(1040px,100%);display:flex;flex-direction:column;align-items:stretch}.footer-expanded .footer-brand{display:flex;align-items:center;gap:12px;align-self:start;letter-spacing:.88px}.footer-expanded .footer-brand img{display:block;transform:rotate(180deg) scaleY(-1)}
.footer-columns{margin-top:60px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.footer-columns nav{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.footer-columns h2{font-size:12px;line-height:15px;font-weight:400;color:#b3b3b3;margin:0 0 8px}.footer-columns a,.footer-columns button{font:inherit;font-size:14px;line-height:18px;color:#f3f3f3;text-align:left;padding:0;border:0;background:none}.footer-columns a:hover,.footer-columns button:hover{text-decoration:underline;text-underline-offset:4px}.footer-expanded .agency{align-self:end;margin-top:120px}
@media(min-width:701px) and (max-width:1100px){.reading{grid-template-columns:30% minmax(0,1fr)}.reading-heading h2{font-size:28px}.reading-tab>span>span{font-size:14px}.reading-card{width:160px;height:auto;aspect-ratio:181/320}.reading-panel{padding-inline:28px}.reading-cards{left:28px;right:28px}.reading-arrows{right:28px}.footer-columns{gap:24px}}
@media(max-width:700px){
 .reading{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:20px}.reading-heading{grid-column:1;grid-row:1}.reading-heading h2{font-size:30px;width:100%;max-width:390px}.reading-heading>p{font-size:14px}
 .reading-tabs{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-self:auto}.reading-tab{min-height:64px;padding:8px;gap:6px}.reading-tab small{font-size:10px;line-height:14px}.reading-tab>span>span{font-size:12px;line-height:1.3}.reading-progress{width:8px;height:8px}
 .reading-panel{grid-column:1;grid-row:3;min-height:0;padding:330px 24px 28px}.reading-art{height:260px}.reading-card{width:144px;height:auto;aspect-ratio:181/320}.reading-cards{top:52px;left:24px;right:24px}.reading-count{top:16px;right:16px}.reading-arrows{top:204px;right:16px;gap:8px}.reading-arrows .feature-arrow{width:44px;height:44px;min-height:44px;padding:9px}.reading-panel.is-summary .reading-arrows{top:270px}.reading-cards.is-summary{gap:8px;top:64px}.reading-cards.is-summary .reading-card{width:calc((100% - 16px)/3)}
 .reading-copy h3{font-size:22px;margin-bottom:16px}.reading-description{font-size:15px;line-height:1.5}.reading-playback{grid-column:1;grid-row:4;padding:0;margin-top:-10px}
 .footer-expanded{margin-top:100px;padding-block:40px 28px}.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px;gap:32px 20px}.footer-columns a,.footer-columns button{font-size:12px;line-height:1.5}.footer-expanded .agency{margin-top:60px}
}
@media(max-width:360px){.reading-panel{padding-inline:20px}.reading-heading h2{font-size:28px}.reading-cards{left:20px;right:20px}.reading-card{width:125px}.reading-tab>span>span{font-size:11px}}

.reading>*{min-width:0}
.reading-arrows .feature-arrow:hover,.reading-arrows .feature-arrow:active{background:transparent}

/* Keep the reading text anchored to the panel bottom. */
.reading-panel{display:flex;flex-direction:column;justify-content:flex-end}
.reading-copy{flex-shrink:0}

/* Frame 513454 — four slide geometry and image crops. */
.reading-panel{min-height:659px;padding-top:377px}
.reading-copy h3{margin-bottom:15px}
.reading-background{height:344.85%;object-fit:fill}
.reading-panel[data-slide="1"] .reading-background{top:-25.92%}
.reading-panel[data-slide="2"] .reading-background{top:-14%}
.reading-panel.is-summary .reading-background{top:0;height:100%;object-fit:cover}
.reading-cards.is-summary{top:88px;left:40px;gap:24px;right:194px}
.reading-cards.is-summary .reading-card{width:calc((100% - 48px)/3);max-width:135px;height:auto;aspect-ratio:135/240;border-radius:0}
.reading-panel.is-summary .reading-arrows{top:280px}
@media(max-width:700px){
 .reading{grid-template-rows:auto auto auto}
 .reading-panel{min-height:0;padding-top:330px}
 .reading-cards.is-summary{top:64px;left:24px;right:24px;gap:12px}
 .reading-cards.is-summary .reading-card{width:calc((100% - 24px)/3)}
 .reading-panel.is-summary .reading-arrows{top:270px}
}
@media(min-width:701px){.reading-description{line-height:23px}}

/* Updated Figma fourth slide: plain charcoal surface. */
.reading-panel.is-summary .reading-art{background:#242424}
.reading-panel.is-summary .reading-background,.reading-panel.is-summary .reading-art::after{display:none}
/* Figma 3918:476 — updated reading navigation spacing. */
.reading-tabs{gap:0}
.reading-tab{padding:12px}
.reading-tab.is-active>span{gap:4px}
@media(min-width:701px){.reading-arrows,.reading-panel.is-summary .reading-arrows{top:276px}}
@media(min-width:701px){.reading-cards.is-summary{top:84px;left:36px;right:198px}}
.reading-tab>span{gap:4px}
/* Compact mobile rhythm: content determines height, not the viewport. */
@media(max-width:700px){
 main{gap:64px}
 .screen,.hero,.about,.subscription{height:auto;min-height:0;max-height:none}
 .hero{padding-top:20px;padding-bottom:0}
 .hero .hero-content{flex:none;gap:20px;padding-top:20px}
 .hero .hero-stage{flex:none;width:100%;height:clamp(230px,72vw,350px);max-height:none}
 .hero .intro{gap:16px}
 .hero h1{font-size:36px}
 .hero .intro p{font-size:16px;line-height:1.5}
 .about{padding-block:0}
 .feature-cards{flex:none;align-items:stretch}
 .feature-card{height:auto;min-height:0;max-height:none;padding:24px 24px 0;display:flex;flex-direction:column;gap:24px}
 .feature-card .card-heading{min-height:172px;gap:12px}
 .feature-card h2{font-size:26px}
 .feature-phone{position:relative;left:auto;bottom:auto;transform:none;align-self:center;flex:none;width:min(240px,100%);height:auto;max-width:100%;max-height:none;aspect-ratio:300/524}
 .feature-controls{margin-top:16px}
 .reading{gap:20px}
 .reading-heading h2{font-size:28px;line-height:1.25}
 .reading-heading>p{font-size:13px}
 .reading-tab{padding:10px;min-height:66px}
 .reading-panel{padding:286px 20px 24px;justify-content:flex-start}
 .reading-art{height:230px}
 .reading-cards{top:32px;left:20px;right:20px}
 .reading-card{width:128px;height:auto;aspect-ratio:181/320}
 .reading-arrows{top:166px;right:20px}
 .reading-cards.is-summary{top:42px;left:20px;right:20px;gap:12px}
 .reading-cards.is-summary .reading-card{width:calc((100% - 24px)/3);max-width:100px}
 .reading-panel.is-summary .reading-arrows{top:218px}
 .reading-copy h3{font-size:22px;margin-bottom:14px}
 .reading-description{font-size:15px;line-height:1.5}
 .subscription{padding-block:0;margin-top:0}
 .pro-art{width:200px;height:auto;margin-bottom:28px}
 .pro-copy{gap:16px}
 .pro-copy h2{font-size:34px;line-height:1.2}
 .subscription .pro-copy p{font-size:16px;line-height:1.5;min-height:0}
 .subscription .pricing{margin-top:28px;gap:16px}
 .subscription .price-card{padding:24px;gap:20px;min-height:0;height:auto}
 .subscription .plan-features{padding-top:20px}
 .subscription .price-note{font-size:12px;line-height:1.5;color:#888}
 .footer-expanded{margin-top:64px;padding-top:32px}
 .footer-columns{margin-top:32px}
 .footer-expanded .agency{margin-top:40px}
}
@media(max-width:360px){.feature-card{padding:20px 20px 0}.feature-card h2{font-size:24px}.feature-card .card-heading{min-height:184px}.hero h1{font-size:32px}.store-button{padding-inline:12px}.reading-tab{padding:8px}.reading-card{width:120px}}
/* Preserve the 48px card overhang on narrower desktop layouts. */
@media(min-width:701px) and (max-width:1100px){
 .reading-cards:not(.is-summary){top:117px}
 .reading-cards.is-summary{height:240px;align-items:flex-end}
}

/* Mobile tariffs use the same card width and next-card hint as features. */
.pricing-controls{display:none}
@media(max-width:700px){
 .subscription{padding-inline:0}
 .subscription .pro-content{width:100%;min-width:0}
 .subscription .pro-copy{padding-inline:20px}
 .subscription .pricing{display:flex;flex-direction:row;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 48px 0 20px;gap:16px}
 .subscription .pricing::-webkit-scrollbar{display:none}
 .subscription .price-card{flex:0 0 calc(100vw - 68px);width:calc(100vw - 68px);scroll-snap-align:start;opacity:.5;transition:opacity .2s}
 .subscription .price-card.is-current{opacity:1}
 .subscription .price-row{flex-wrap:wrap}
 .pricing-controls{display:flex;gap:16px;align-self:flex-start;margin:16px 0 0 20px}
}

/* One spacing rhythm between content groups; no stacked section padding. */
:root{--section-gap:clamp(96px,12vw,160px)}
main{gap:var(--section-gap)}
.about,.subscription{height:auto;min-height:0;padding-block:0;margin-block:0}
.footer-expanded{margin-top:var(--section-gap)}
@media(max-width:700px){
 :root{--section-gap:72px}
 main{gap:var(--section-gap)}
 .footer-expanded{margin-top:var(--section-gap)}
}