/* The existing Pip stage stays in place; only its right-hand props change. */
.play-stage .product-demo { width:24%; max-width:330px; right:4vw; top:27%; }
.product-demo .stage-kicker { font-size:13px; }
.mission-tablet { display:block; width:100%; padding:0; border:0; background:none; color:var(--ink); cursor:default; font:inherit; }
.tablet-screen { display:block; position:relative; aspect-ratio:16/10; border:10px solid #452535; border-left-width:16px; border-right-width:16px; border-radius:20px; overflow:hidden; background:#452535; box-shadow:0 5px 0 #795568,0 18px 25px #45253524; transform:rotate(-4deg); transition:transform .2s; }
.tablet-screen img,.tablet-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tablet-caption { display:block; margin-top:20px; font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.play-stage .mission-medallion { top:59%; right:9%; width:145px; }
.mission-medallion span { margin-top:10px; }
.mission-medallion:focus-visible { outline:3px solid var(--rose); outline-offset:8px; border-radius:12px; }
@media(min-width:1700px) { .play-stage .product-demo { right:7vw; } .play-stage .mission-medallion { right:12%; } }
@media(max-width:1100px) and (min-width:701px) { .play-stage .product-demo { right:3vw; width:25%; } .play-stage .mission-medallion { right:7%; width:125px; } }
@media(max-width:700px) {
 .play-stage .product-demo { top:59%; right:5%; width:47%; max-width:240px; text-align:center; }
 .product-demo .stage-kicker { font-size:11px; margin-bottom:14px; }
 .tablet-screen { border-width:7px 11px; border-radius:15px; }
 .tablet-caption { margin-top:13px; font-size:11px; }
 .play-stage .mission-medallion { top:66%; right:auto; left:7%; width:98px; }
 .mission-medallion span { font-size:16px; margin-top:5px; }
 .mission-medallion small { font-size:11px; }
 .play-stage .stage-left { max-width:86%; top:112px; }
 .stage-left h1 { max-width:310px; }
 .play-stage .stage-left p { display:block; font-size:12px; line-height:1.5; max-width:330px; margin-bottom:14px; }
 .stage-left .kit-doors { flex-direction:row; align-items:center; gap:14px; }
 .play-stage .pip-speech { top:48%; z-index:5; }
}
@media(prefers-reduced-motion:reduce) { .tablet-screen { transition:none; } }
/* #e0eaf4: the exact colour baked into the Pip pictures (pip-matched.png, pip-detective-matched.png); the stage and this panel match it, or the picture's top edge shows as a band under the nav (1 Oct) */
/* No panel behind the words (8 Oct, Asaf on the iPad: "some kind of background
   shadow under the text ... hides some of Pip, feels artificial"). Pip moves out
   from under them instead: on a screen wider than tall he stands right of centre,
   clear of the text; on a tall one (an iPad held upright) the words go across the
   top and Pip stands below them. His tap area and speech bubble move with him. */
@media(min-width:701px) and (min-aspect-ratio:1/1) {
 #pip-stage .pip-frame { left:61%; }
 .play-stage .pip-hit, .play-stage .pip-speech { translate:11vw 0; }
}
@media(min-width:701px) and (max-aspect-ratio:1/1) {
 .home-page #pip-stage .pip-frame { height:76%; top:50%; transform:translate(-50%,-21%); -webkit-mask-image:linear-gradient(#0000,#000 11%); mask-image:linear-gradient(#0000,#000 11%); }  /* the picture's top edge sits mid-screen here; Pip's hat starts at 15% */
 .home-page .play-stage .stage-left { top:150px; width:min(620px,78vw); max-width:none; }
 .home-page .play-stage .stage-left .stage-kicker { font-size:15px; }
 .home-page .play-stage .stage-left h1 { max-width:none; font-size:46px; line-height:1.08; }
 .home-page .play-stage .stage-left p { max-width:520px; font-size:17px; line-height:1.6; }
 .home-page .play-stage .stage-left .kit-doors { flex-direction:row; align-items:center; gap:20px; }
 .home-page .play-stage .pip-hit { left:20%; width:60%; top:45%; height:48%; }
 .home-page .play-stage .product-demo { top:auto; bottom:20%; right:4%; width:30%; }
 .home-page .play-stage .mission-medallion { top:auto; bottom:13%; right:4%; width:30%; }
}
.mission-medallion img { clip-path:circle(47%); }

/* Reuse the wand and medallion from the earlier approved hero artwork. */
.play-stage .mission-medallion { right:4vw; width:24%; max-width:330px; }
.mission-medallion .wand-medallion-art { display:block; width:100%; aspect-ratio:440/155; margin:0; background-image:url('/assets/site/hero-props-reference.png'); background-size:360.4545% 640%; background-position:85.515% 90.8005%; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 94%,transparent); mask-composite:intersect; transition:filter .25s; }

@media(min-width:1700px) { .play-stage .mission-medallion { right:7vw; } }
@media(max-width:1100px) and (min-width:701px) { .play-stage .mission-medallion { right:3vw; width:25%; } }
@media(max-width:700px) { .play-stage .mission-medallion { right:auto; left:4%; width:40%; top:69%; } }
@media(prefers-reduced-motion:reduce) { .mission-medallion .wand-medallion-art { transition:none; } }
.mission-medallion .wand-medallion-art { clip-path:polygon(0 0,12% 5%,23% 18%,34% 28%,49% 40%,64% 52%,91% 58%,100% 78%,95% 100%,5% 100%,5% 48%,0 30%); }

/* Let visitors discover the props without labels or a brightened image box. */
.play-stage .mission-medallion { top:63%; background:transparent; box-shadow:none; }
.play-stage .mission-medallion:hover { background:transparent; box-shadow:none; }
.mission-medallion .wand-medallion-art { filter:none; transition:none; }
@media(max-width:700px) { .play-stage .mission-medallion { top:73%; } }

/* The system, its adventures, and Lumina share the established page palette. */
.home-library-intro { padding:75px 8vw 65px; background:var(--paper); }
.home-library-intro h2 { font:500 clamp(38px,4.5vw,68px)/1.08 var(--serif); letter-spacing:-1.3px; margin:16px 0 24px; }
.home-library-intro p { max-width:650px; color:var(--muted); font-size:19px; }
.next-home-adventure { margin-top:42px; padding-top:24px; border-top:1px solid #fff5; max-width:550px; }
.next-home-adventure>span { color:#ffe9a5; font-size:13px; }
.next-home-adventure h3 { font:500 30px/1.15 var(--serif); margin:10px 0; }
.home-page .next-home-adventure p { font-size:16px; margin:0; }
.home-lumina { position:relative; isolation:isolate; overflow:hidden; min-height:100svh; padding:70px 8vw 90px; background:#0b162d; color:#fff8e7; display:flex; flex-direction:column; justify-content:space-between; gap:60px; }
.home-lumina>.lumina-backdrop,.home-lumina>.home-lumina-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.home-lumina>.home-lumina-film { z-index:-2; }
.home-lumina::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0c1830e8,#0c183080 46%,#0c183000 82%),linear-gradient(0deg,#0c1830c0,transparent 45%); }
.home-lumina .eyebrow { color:#ffe9a5; }
.home-lumina-copy { max-width:690px; }
.home-lumina h2 { font:500 clamp(40px,4.6vw,70px)/1.1 var(--serif); letter-spacing:-1.2px; margin:20px 0 25px; }
.home-lumina-copy p { max-width:470px; font-size:19px; line-height:1.6; }
.home-lumina-copy .lumina-no-setup { font-size:15px; color:#ffe9a5; }
.lumina-world-picker { width:100%; max-width:970px; }
.lumina-picker-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:15px; font-size:14px; }
.lumina-motion { background:#07102599; color:#fff8e7; border:1px solid #fff7; border-radius:20px; padding:7px 15px; font-size:12px; }
.lumina-worlds { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.lumina-world { border:2px solid #fff3; padding:0; background:#071025cc; border-radius:15px; overflow:hidden; color:#fff8e7; text-align:left; }
.lumina-world img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.lumina-world span { display:block; padding:11px 12px; font-size:14px; font-weight:800; }
.lumina-world[aria-pressed=true] { border-color:#ffe9a5; background:#302641; }
.lumina-world:hover { border-color:#fff8e7; }
@media(min-width:701px) and (prefers-reduced-motion:no-preference) { .home-page .home-lumina { scroll-snap-align:start; } }
@media(max-width:700px) {
 .home-library-intro { padding:50px 7vw; }
 .home-library-intro p { font-size:17px; }
 .home-lumina { padding:50px 7vw 85px; gap:35px; min-height:850px; }
 .home-lumina h2 { font-size:40px; }
 .home-lumina-copy p { font-size:17px; }
 .lumina-worlds { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .lumina-world span { font-size:12px; padding:9px; }
 .next-home-adventure h3 { font-size:26px; }
}

/* Adventure footage is the full chapter, with copy tucked into its lower edge. */
.home-adventure-wall { position:relative; isolation:isolate; min-height:620px; height:100svh; overflow:hidden; background:#15201a; color:#fff8e7; padding:55px 8vw 100px; display:flex; align-items:flex-end; scroll-snap-align:start; }
.adventure-wall-poster,.adventure-wall-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.adventure-wall-film { z-index:-2; }
.home-adventure-wall::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#101c18eb, #101c1880 33%,transparent 68%),linear-gradient(90deg,#101c1840,transparent 65%); }
.adventure-wall-copy { max-width:680px; }
.adventure-wall-copy .eyebrow { color:#ffe9a5; font-size:14px; }
.adventure-wall-copy h2 { font:500 clamp(38px,4.1vw,62px)/1.07 var(--serif); margin:17px 0 20px; letter-spacing:-1px; }
.adventure-wall-copy p { font-size:18px; line-height:1.55; margin:0 0 24px; }
.adventure-wall-controls { position:absolute; right:5vw; bottom:32px; display:flex; gap:10px; z-index:2; }
.adventure-wall-controls button { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#101c1899; border:1px solid #fff8; color:#fff8e7; }
.wall-sound .sound-on,.wall-sound[aria-pressed=true] .sound-off { display:none; }
.wall-sound[aria-pressed=true] .sound-on { display:block; }
@media(max-width:700px) {
 .home-adventure-wall { padding:40px 7vw 105px; min-height:650px; }
 .adventure-wall-copy h2 { font-size:38px; }
 .adventure-wall-copy p { font-size:16px; }
 .adventure-wall-copy .primary { font-size:13px; padding:13px 18px; }
 .adventure-wall-film,.adventure-wall-poster { object-position:57% center; }
}

.lumina-preview-controls { display:flex; gap:10px; align-items:center; }
.lumina-sound { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid #fff7; color:#fff8e7; background:#07102599; font-size:22px; }
.lumina-sound[aria-pressed=false] { text-decoration:line-through; }

.lumina-worlds { grid-template-columns:repeat(5,minmax(0,1fr)); }
.lumina-daniel>span { display:flex; justify-content:space-between; align-items:center; }
.lumina-daniel>span>span { padding:0; font-size:11px; }
#movie.portrait-movie { width:auto; max-width:94vw; height:auto; max-height:94svh; background:#081327; }
#movie.portrait-movie video { display:block; width:auto; height:88svh; max-width:90vw; object-fit:contain; }
@media(max-width:700px) { .lumina-worlds { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Keep the approved play photos intact, including the raised wand. */
.home-page .how-visual { height:auto; aspect-ratio:4/3; }

/* Prelaunch keeps the homepage stage and its interactions. */
.prelaunch-route .header nav { display:none; }
.prelaunch-route .hero-launch-signup { margin-top:24px; max-width:400px; }
.hero-launch-signup .field { font-size:13px; }
.hero-launch-signup .signup-fields { display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.hero-launch-signup input { width:100%; min-width:0; box-sizing:border-box; padding:13px 15px; border:1px solid #cdbac3; border-radius:12px; background:#fffc; font:inherit; font-size:14px; }
.hero-launch-signup .primary { justify-content:space-between; padding:13px 18px; font-size:14px; }
.prelaunch-route .stage-left .signup-note { display:block; font-size:11px; line-height:1.5; margin:10px 0 0; }
.prelaunch-route .stage-left [role=status] { font-size:12px; }
.prelaunch-route .stage-left { top:20%; }
.launch-family { padding:70px max(7vw,calc((100vw - 780px)/2)); background:var(--paper); text-align:center; }
.launch-family h2 { font:500 clamp(32px,3.4vw,48px)/1.1 var(--serif); margin:20px 0; }
.launch-family p { line-height:1.8; font-size:18px; color:#715a65; }
@media(max-width:700px) {
 .prelaunch-route .play-stage { min-height:1150px; }
 .prelaunch-route .stage-left { top:115px; }
 .prelaunch-route .hero-launch-signup { max-width:100%; margin-top:18px; }
 .prelaunch-route #pip-stage { transform:translateY(140px); }
 .prelaunch-route .product-demo { top:65%; }
 .prelaunch-route .mission-medallion { top:78%; }
 .prelaunch-route .pip-hit { top:53%; }
 .launch-family { padding:55px 7vw; }
}

/* A compact desktop chapter; keep the full raised-wand photo visible. */
.home-page .how-heading { max-width:none; margin-bottom:26px; }
.home-page .how-heading h2 { font-size:clamp(30px,3.5vw,58px); margin-bottom:14px; }
.home-page .how-heading>p { max-width:none; margin:0; }
.home-page .how-heading .eyebrow { margin-bottom:16px; }
@media(min-width:701px) {
 .home-page .how-play { padding-top:clamp(28px,4svh,48px); padding-bottom:28px; }
 .home-page .how-grid { max-width:min(100%,148svh); margin-inline:auto; }
 .home-page .how-copy { padding:20px 24px; }
 .home-page .how-copy h3 { font-size:clamp(22px,1.7vw,29px); margin:10px 0; }
 .home-page .how-copy p { font-size:clamp(14px,1.05vw,16px); line-height:1.55; }
}
@media(max-width:700px) {
 .home-page .how-heading h2 { font-size:36px; }
 .home-page .how-heading>p { font-size:17px; }
}

/* Give the launch invitation its own clear hierarchy beside Pip. */
.prelaunch-route .play-stage .stage-left { width:30vw; max-width:390px; top:21%; background:none; box-shadow:none; }
.prelaunch-route .stage-left .stage-kicker { color:#a3294c; font-size:12px; margin-bottom:14px; }
.prelaunch-route .stage-left h1 { font-size:clamp(27px,2.45vw,38px); line-height:1.12; margin:0 0 20px; max-width:none; }
.prelaunch-route .stage-left h1 span { display:block; }
.prelaunch-route .stage-left>p { font-size:14px; line-height:1.65; max-width:350px; margin:0; }
.prelaunch-route .hero-launch-signup { margin-top:24px; padding:20px; background:#ffffff80; border:1px solid #ffffffb3; border-radius:20px; max-width:350px; }
.prelaunch-route .stage-left .launch-invitation { font-size:13px; line-height:1.55; margin:0 0 14px; }
.launch-invitation strong { color:#452535; font-size:18px; }
.hero-launch-signup .field { margin:0 0 6px; }
.hero-launch-signup .field>span { font-size:12px; margin:0; }
.hero-launch-signup .signup-fields { margin-top:0; gap:10px; }
.hero-launch-signup input { padding:11px 13px; border-radius:10px; background:#fff; }
.hero-launch-signup .primary { padding:11px 15px; border-radius:12px; box-shadow:0 3px 0 #7b1935; }
.prelaunch-route .stage-left .signup-note { font-size:10px!important; line-height:1.5; margin:12px 0 0; }
.hero-launch-signup [role=status]:empty { display:none; }
@media(max-width:1100px) and (min-width:701px) {
 .prelaunch-route .play-stage .stage-left { width:31vw; }
 .prelaunch-route .stage-left h1 { font-size:27px; }
 .prelaunch-route .stage-left>p { font-size:13px; }
 .prelaunch-route .hero-launch-signup { padding:16px; margin-top:18px; }
}
@media(max-width:700px) {
 .prelaunch-route .play-stage .stage-left { width:86%; max-width:390px; top:110px; }
 .prelaunch-route .stage-left h1 { font-size:30px; }
 .prelaunch-route .stage-left>p { font-size:13px; }
 .prelaunch-route .hero-launch-signup { max-width:350px; margin-top:18px; padding:16px; }
}
.prelaunch-route .stage-left>p { max-width:310px; }
.prelaunch-route .hero-launch-signup { background:#f4f7fc; }
@media(min-width:701px) { .prelaunch-route .hero-launch-signup { max-width:330px; } }

/* Keep age guidance and the next-section invitation together. */
.home-page .stage-floor { display:flex; justify-content:flex-start; align-items:center; gap:24px; }
.home-page .stage-floor .stage-outfits { display:contents; }
.home-page .stage-floor .stage-scroll { margin:0; padding:0; }
.home-page .stage-floor .stage-meta { padding:0; }
@media(max-width:700px) {
 .home-page .stage-floor { flex-direction:row; align-items:center; gap:20px; }
 .home-page .stage-floor .stage-scroll { display:inline-flex; }
}

/* The hero stays simple; signup opens only after its launch button. */
.prelaunch-route .kit-doors { margin-top:24px; }
#launch-dialog { width:min(460px,calc(100vw - 32px)); padding:40px; border:1px solid #fff; border-radius:26px; background:#f5f8fc; color:#452535; box-shadow:0 24px 90px #24132340; }
#launch-dialog::backdrop { background:#26374765; backdrop-filter:blur(7px); }
#launch-dialog .launch-close { position:absolute; right:14px; top:8px; width:40px; height:40px; border:0; background:none; font-size:28px; color:#624552; }
#launch-dialog .eyebrow { font-size:12px; margin:0 0 16px; }
#launch-dialog h2 { font:500 38px/1.1 var(--serif); margin:0 0 16px; letter-spacing:-.7px; }
#launch-dialog>p { font-size:15px; line-height:1.6; color:#624552; padding:0; margin:0 0 24px; }
#launch-dialog .hero-launch-signup { background:none; padding:0; border:0; margin:0; max-width:none; }
#launch-dialog .signup-note { font-size:12px!important; margin:16px 0 0; padding:0; color:#715a65; }
#launch-dialog [role=status] { padding:0; margin-bottom:0; font-size:14px; }
@media(max-width:700px) { #launch-dialog { padding:32px 24px; } #launch-dialog h2 { font-size:34px; } }

/* One personal closing invitation for the ad landing page. */
.home-page .launch-closing { padding:64px 7vw; text-align:left; background:#e2ebf5; }
.launch-closing-inner { max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(40px,6vw,90px); }
.launch-closing .launch-family-story h2 { font-size:30px; line-height:1.15; margin:0 0 16px; letter-spacing:-.5px; }
.launch-closing .launch-family-story p { font-size:16px; line-height:1.7; color:#624552; margin:0; }
.launch-closing-invitation>.eyebrow { font-size:13px; margin-bottom:16px; }
.launch-closing .launch-closing-invitation h2 { font-size:clamp(36px,3.8vw,54px); line-height:1.08; margin:0 0 20px; }
.launch-closing-invitation>p { font-size:18px; color:#624552; line-height:1.6; margin:0 0 28px; }
.launch-closing .field { margin:0 0 8px; }
.launch-closing .field>span { font-size:13px; }
.launch-closing .signup-fields { flex-direction:column; gap:12px; }
.launch-closing input { font-size:16px; padding:15px 18px; }
.launch-closing .primary { justify-content:space-between; padding:14px 20px; border-radius:16px; }
.launch-closing form>.signup-note { font-size:12px!important; text-align:left; margin:16px 0 0; }
@media(max-width:700px) {
 .home-page .launch-closing { padding:40px 7vw 50px; }
 .launch-closing-inner { grid-template-columns:1fr; gap:36px; }
 .launch-closing .launch-family-story h2 { font-size:27px; }
 .launch-closing .launch-closing-invitation { border-top:1px solid #c6d2df; padding-top:32px; }
}

.launch-closing .launch-family-story p+p { margin-top:16px; }

/* Consistent card baselines and a useful, quiet footer. */
@media(min-width:701px) {
 .home-page .how-copy h3 { min-height:2.3em; }
 .home-page .how-heading { max-width:min(100%,148svh); margin-inline:auto; }
}
#site-footer { align-items:center; }
.home-page #site-footer { justify-content:space-between; }
#site-footer nav { display:flex; gap:24px; font-size:13px; }
#site-footer a:hover,.signup-note a:hover { color:#ad2347; }
.signup-note a { text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
@media(max-width:700px) { #site-footer { flex-wrap:wrap; gap:16px; } #site-footer nav { gap:20px; } }
@media(min-width:701px) {
 .home-page .how-heading { width:min(100%,148svh); }
 .home-page .how-play { padding-bottom:70px; }
 .home-page .how-play>.chapter-scroll { left:max(5.5vw,calc((100% - 148svh)/2)); }
}
@media(min-width:701px) {
 .home-page .how-play { padding-top:clamp(20px,3svh,36px); }
 .home-page .how-heading { margin-bottom:20px; }
}