/* ============================================================
   FINAL DIRECTION — Living Pixel Overworld × Premium Portal
   1a foundation: one connected morning-to-night world, centered
   cinematic column, waypoint trail, landmarks, era lookout,
   campfire rest, dusk destination.
   1c commerce layer: slim store nav with BUY · $[TBC] shortcut,
   first-viewport price/CTA hierarchy, porcelain dossier specs,
   calm white shelves near money, premium spacing.
   Bright everywhere; navy = ink + footer night only.
   Palette (Coolors): coolors.co/87d9f5-fff4d6-fffdf6-1c2541-ffd166-ff5d73-7c3aed-3aa76d
   ============================================================ */

@font-face{font-family:'Inter';src:url('../shared/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../shared/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../shared/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../shared/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../shared/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Press Start 2P';src:url('../shared/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --sky:#87D9F5; --sky-deep:#4FB4E6; --sky-pale:#C9EFFB; --sky-mist:#E4F6FE;
  --cream:#FFF4D6; --cream-warm:#FFEFC9; --porcelain:#FFFDF6;
  --navy:#1C2541; --navy-2:#2A3564;
  --gold:#FFD166; --gold-deep:#FFC23D;
  --coral:#FF5D73; --violet:#7C3AED; --green:#06D6A0;
  --leaf:#3AA76D; --leaf-deep:#1E7A4F; --leaf-pale:#EAF9F0; --leaf-mist:#F2FBF3;
  --after-1:#FFE29A; --after-2:#FFD08A;
  --dusk-1:#EFE7FB; --dusk-2:#DCCFF4;
  --ink:#1C2541; --ink-soft:rgba(28,37,65,.74); --line:rgba(28,37,65,.14);
  --trail:rgba(30,122,79,.5);
  --ribbon-h:0px; --nav-h:64px; --r-pill:999px;
  --shadow-hard:0 4px 0 var(--navy);
  --t-fast:120ms; --t-mid:220ms;
  --motion-enter:520ms; --motion-stagger:80ms; --motion-row-stagger:50ms;
  --motion-distance:12px; --motion-ease:cubic-bezier(.22,.72,.28,1);
  --home-page:#eaf9f0;--home-nav:rgba(255,253,246,.96);--home-ink:#1c2541;
  --home-edge:rgba(28,37,65,.14);--home-active:#1e7a4f;--home-focus:#7c3aed;
  --home-control:#fffdf6;
  color-scheme:light;
}
:root[data-home-theme="dark"]{
  --home-page:#141d32;--home-nav:rgba(20,29,50,.97);--home-ink:#f3f4fa;
  --home-edge:#485a7c;--home-active:#9de0bb;--home-focus:#ffd166;
  --home-control:#1e2b44;
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){:root:not([data-home-theme="light"]){
  --home-page:#141d32;--home-nav:rgba(20,29,50,.97);--home-ink:#f3f4fa;
  --home-edge:#485a7c;--home-active:#9de0bb;--home-focus:#ffd166;
  --home-control:#1e2b44;
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; padding-top:calc(var(--ribbon-h) + var(--nav-h)); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--home-page); overflow-x:hidden}
/* Dark site: keep the page canvas dark over the scroll "world phase" tints (it shows when the page bounces). */
:root[data-home-theme="dark"].motion-enabled[data-world-phase] body{background-color:var(--home-page)}
#top{scroll-margin-top:calc(var(--ribbon-h) + var(--nav-h))}
img{max-width:100%; display:block}
h1,h2{font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; margin:0; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit}
a{color:var(--violet)}
a:hover{color:#6429d6}
:focus-visible{outline:3px solid var(--home-focus); outline-offset:3px; border-radius:6px}

.vtag{color:var(--gold)}
.s0[hidden]{display:none !important}
.wordmark{font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:17px; color:var(--navy); letter-spacing:-.02em; flex:0 0 auto}
.wordmark em{font-style:normal; color:#8a6a12}

/* The store bar (links, promise and Buy) lives in nav.css. */

/* ---------- editorial frame ---------- */
.sec{position:relative; padding:58px 20px 64px; overflow:hidden}
.sec > *{position:relative; z-index:2}
.wpwrap,.lede,.giftline,.dossier,.shelves,.restpanel,.trust,.caption,.disclosure,
.chips,.window,.cards,.worldrow,.playhint{margin-inline:auto}
.wpwrap{max-width:640px; text-align:center}
.lede{color:var(--ink-soft); font-size:15px; line-height:1.65; margin-top:10px; max-width:54ch; text-align:center}
.chapline{display:flex; align-items:center; justify-content:center; gap:9px; margin:0 0 14px;
  font-family:'Press Start 2P',monospace; font-size:7px; letter-spacing:.14em; color:var(--leaf-deep)}
.waymark{display:block; width:30px; height:10px; flex:0 0 auto;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 100%/10px 4px no-repeat,
    linear-gradient(var(--leaf),var(--leaf)) 10px 50%/10px 4px no-repeat,
    linear-gradient(var(--green),var(--green)) 20px 0/10px 4px no-repeat}
.kicker{font-family:'Press Start 2P',monospace; font-size:7.5px; letter-spacing:.1em; color:var(--violet)}
.chip{display:inline-block; background:var(--gold); border:1.5px solid var(--navy); border-radius:var(--r-pill);
  padding:6px 15px; font-weight:600; font-size:13px}
.trust{font-size:12px; color:var(--ink-soft); line-height:1.55; margin-top:12px; text-align:center}
.tbc{border-bottom:1px dashed rgba(28,37,65,.45); display:inline-block; padding-bottom:1px}
.quiet{display:inline-flex; align-items:center; margin-top:8px; min-height:44px; padding:0 2px;
  color:var(--violet); font-size:13.5px; font-weight:500; text-decoration:underline;
  text-decoration-color:rgba(124,58,237,.4); text-underline-offset:5px; text-decoration-thickness:2px}
.disclosure{margin-top:14px; font-family:'Press Start 2P',monospace; font-size:7px; line-height:1.7;
  letter-spacing:.05em; color:var(--ink-soft); text-align:center}
.disclosure.small{font-size:6.5px; opacity:.85}
.rise{opacity:1; transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:12px 22px; border-radius:var(--r-pill);
  border:1.5px solid var(--navy); background:var(--gold); color:var(--navy);
  font-weight:600; font-size:15px; cursor:pointer; box-shadow:0 3px 0 var(--navy);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); max-width:100%}
.btn:hover{background:var(--gold-deep)}
.btn:active,.btn.pressed{transform:translateY(3px); box-shadow:0 0 0 var(--navy)}
.btn.small{min-height:44px; padding:9px 16px; font-size:14px}
.btn.ghost{background:var(--porcelain); box-shadow:0 2px 0 var(--navy); font-size:13.5px; min-height:44px; padding:10px 16px}
.btn.demo{margin-top:22px}

/* ---------- trail connectors ---------- */
.trailseg{position:relative; height:64px; background:transparent; z-index:1}
.trailseg::before{content:""; position:absolute; top:-6px; bottom:-6px; border-left:3px dashed var(--trail)}
.trailseg.wl::before{left:calc(50% - 46px); transform:rotate(7deg)}
.trailseg.wr::before{left:calc(50% + 46px); transform:rotate(-7deg)}
.trailseg::after{content:""; position:absolute; width:8px; height:8px; background:var(--gold); top:50%; margin-top:-4px}
.trailseg.wl::after{left:calc(50% - 52px)}
.trailseg.wr::after{left:calc(50% + 40px)}

/* ---------- world decorations ---------- */
.deco{position:absolute; z-index:1; pointer-events:none}
.cloud{width:84px; height:26px; background:var(--cream); border-radius:14px; box-shadow:0 5px 0 rgba(28,37,65,.06)}
.cloud::before,.cloud::after{content:""; position:absolute; background:var(--cream); border-radius:50%}
.cloud::before{left:12px; top:-13px; width:32px; height:26px}
.cloud::after{right:10px; top:-9px; width:22px; height:18px}
.c1{left:-12px; top:48px; animation:drift 52s linear infinite alternate}
.c2{right:-16px; top:128px; transform:scale(.8); opacity:.92; animation:drift 44s linear infinite alternate-reverse}
.sun{position:absolute; z-index:0; top:30px; right:11%; width:54px; height:54px; border-radius:50%;
  background:var(--cream); box-shadow:0 0 0 6px rgba(255,209,102,.55), 0 0 0 14px rgba(255,209,102,.18); pointer-events:none}
.pollen{position:absolute; z-index:1; width:5px; height:5px; background:var(--gold); pointer-events:none; animation:floaty 11s ease-in-out infinite}
.p3{right:10%; top:20%; animation-delay:-7s}
.meadow{position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none}
.meadow.back{height:150px; background:var(--green); opacity:.38;
  clip-path:polygon(0 46%,6% 46%,6% 30%,16% 30%,16% 44%,28% 44%,28% 24%,40% 24%,40% 42%,54% 42%,54% 32%,66% 32%,66% 46%,78% 46%,78% 26%,90% 26%,90% 40%,100% 40%,100% 100%,0 100%)}
.meadow.front{height:96px; background:var(--leaf);
  clip-path:polygon(0 54%,8% 54%,8% 38%,20% 38%,20% 52%,34% 52%,34% 30%,48% 30%,48% 48%,62% 48%,62% 36%,76% 36%,76% 52%,88% 52%,88% 40%,100% 40%,100% 100%,0 100%)}
.fgrass{position:absolute; left:0; right:0; bottom:0; height:18px; z-index:2; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--leaf-deep) 0 5px, transparent 5px 13px) 0 100%/100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--leaf) 0 4px, transparent 4px 10px) 4px 100%/100% 15px no-repeat}

/* ---------- S1 hero ---------- */
.s1{padding-top:12px; padding-bottom:112px; min-height:calc(100svh - var(--ribbon-h) - var(--nav-h)); display:flex; flex-direction:column; justify-content:center}
.sky{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,var(--sky-deep) 0%,var(--sky) 46%,var(--sky-pale) 78%,var(--sky-mist) 100%)}
.hero-center{display:flex; flex-direction:column; align-items:center; text-align:center; max-width:780px; margin:0 auto; width:100%}
.s1 h1{font-size:clamp(26px,7.4vw,38px); line-height:1.05; max-width:14ch; margin-top:8px}
.s1 .sub{margin-top:8px; font-size:14.5px; color:var(--ink-soft); line-height:1.5; max-width:38ch}
.stage{position:relative; margin-top:8px; width:100%}
.glow{position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:min(120%,600px); aspect-ratio:1.15/1; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,58,237,.45) 0%, rgba(124,58,237,.2) 44%, rgba(124,58,237,0) 74%);
  animation:breathe 9s ease-in-out infinite}
.clearing{position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:min(96%,460px); height:52%; z-index:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,244,214,.6) 0%, rgba(255,244,214,.3) 48%, rgba(255,244,214,0) 74%)}
.devicewrap{position:relative; z-index:2; margin:0 auto; width:min(92%,410px); perspective:1100px}
.deviceholder{transform-style:preserve-3d; transition:transform 260ms cubic-bezier(.2,.7,.3,1); will-change:transform}
.device{width:100%; height:auto; display:block; animation:bob 5.5s ease-in-out infinite; filter:drop-shadow(0 16px 20px rgba(28,37,65,.20))}
.model3d-shell{position:relative; width:100%; aspect-ratio:800/442; animation:bob 5.5s ease-in-out infinite;
  filter:drop-shadow(0 16px 20px rgba(28,37,65,.20)); touch-action:pan-y; isolation:isolate}
.model3d-canvas{display:block; width:100%; height:100%; opacity:0; transition:opacity .35s ease}
.model3d-shell.is-ready .model3d-canvas{opacity:1}
.model3d-status{position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  font-family:'Press Start 2P',monospace; font-size:9px; color:var(--navy); white-space:nowrap}
.model3d-hotspot{position:absolute; z-index:4; width:48px; height:48px; transform:translate(-50%,-50%);
  padding:0; border:0; border-radius:50%; background:transparent; opacity:0; cursor:pointer}
.model3d-hotspot:focus-visible{opacity:1; outline:3px solid var(--violet); outline-offset:2px; background:rgba(255,244,214,.32)}
.model3d-hotspot.pressed{opacity:1; background:rgba(255,209,102,.28); box-shadow:0 0 0 4px rgba(255,209,102,.3)}
.model3d-shell:not(.is-ready) .model3d-hotspot{display:none}
@media (hover:none){.model3d-shell{animation:none}}
.devicewrap:hover .device,.devicewrap:focus-within .device,
.devicewrap:hover .model3d-shell,.devicewrap:focus-within .model3d-shell{animation-play-state:paused}
.dctl{cursor:pointer}
.dctl .press{transition:transform 90ms ease, filter 90ms ease}
.dctl:hover .press{filter:brightness(1.16)}
.dctl.pressed .press{transform:translateY(3px); filter:brightness(1.35)}
.dctl:focus-visible{outline:3px solid var(--violet); outline-offset:2px}
.dpress{animation:blink 1.7s steps(1) infinite}
.hero-disc{margin-top:8px; color:var(--navy); width:fit-content; margin-inline:auto;
  background:rgba(255,244,214,.88); border-radius:8px; padding:5px 10px}
.buyrow{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.buyrow .btn{margin:0}
.scrollcue{margin-top:22px; font-family:'Press Start 2P',monospace; font-size:7px; letter-spacing:.14em;
  color:var(--navy); line-height:2; animation:cuebob 2.6s ease-in-out infinite}
.pslot{width:min(62%,250px); margin:0}
.pslot.tiny{width:min(58%,230px); margin:12px auto 0}
.pslot .device{animation:none; filter:drop-shadow(0 10px 14px rgba(28,37,65,.18))}
.device-poster{object-fit:contain; aspect-ratio:800/442}
.barthumb{width:58px; flex:0 0 auto; display:block}
.barthumb .device{animation:none; filter:none}

/* ---------- S2 three-world showcase ---------- */
.s2{background:linear-gradient(180deg,var(--leaf-pale),var(--leaf-mist)); text-align:center}
.worldrow{margin-top:26px; display:flex; gap:14px; overflow-x:auto; padding:4px 4px 10px; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; max-width:100%; width:fit-content}
.worldcard{flex:0 0 auto; width:min(74vw,300px); margin:0; scroll-snap-align:center}
.wframe{position:relative; aspect-ratio:4/3; border:2px solid var(--navy); border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg,var(--navy-2),var(--navy)); box-shadow:0 7px 0 rgba(30,122,79,.25)}
.wframe img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated}
.scan{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px)}
.worldcard figcaption{display:flex; align-items:baseline; justify-content:center; gap:9px; margin-top:10px}
.worldcard b{font-family:'Press Start 2P',monospace; font-size:6.5px; letter-spacing:.1em; color:var(--leaf-deep); font-weight:400}
.worldcard span{font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:15.5px; color:var(--navy)}
.playhint{margin-top:16px; font-family:'Press Start 2P',monospace; font-size:6.5px; letter-spacing:.1em; color:var(--leaf-deep)}

/* ---------- S3 landmarks ---------- */
.s3{background:linear-gradient(180deg,var(--leaf-mist),#F6FCF2)}
.landmarks{list-style:none; margin:34px auto 0; padding:0; display:flex; flex-direction:column; gap:44px; max-width:680px}
.landmarks .card{position:relative; display:flex; gap:18px; align-items:center; background:none; border:0; padding:0}
.landmarks .card::before{content:""; flex:0 0 118px; height:118px; image-rendering:pixelated}
.landmarks .card:nth-child(1)::before{background:
  radial-gradient(circle at 50% 30%, var(--leaf-deep) 34px, transparent 35px),
  radial-gradient(circle at 30% 44%, var(--leaf) 24px, transparent 25px),
  radial-gradient(circle at 70% 44%, var(--leaf) 22px, transparent 23px),
  linear-gradient(var(--navy),var(--navy)) 50% 100%/12px 46px no-repeat,
  radial-gradient(50% 12px at 50% 100%, rgba(28,37,65,.18), transparent 70%)}
.landmarks .card:nth-child(2)::before{background:
  radial-gradient(58px 30px at 50% 72%, var(--sky-deep) 97%, transparent 100%),
  radial-gradient(46px 22px at 50% 70%, var(--sky) 97%, transparent 100%),
  linear-gradient(var(--cream),var(--cream)) 34% 66%/14px 3px no-repeat,
  linear-gradient(var(--cream),var(--cream)) 62% 76%/10px 3px no-repeat,
  radial-gradient(circle at 22% 88%, var(--leaf) 8px, transparent 9px),
  radial-gradient(circle at 80% 86%, var(--leaf) 9px, transparent 10px)}
.landmarks .card:nth-child(3)::before{background:
  linear-gradient(var(--navy),var(--navy)) 50% 100%/8px 62px no-repeat,
  linear-gradient(var(--navy),var(--navy)) 50% 26%/34px 8px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 50% 40%/18px 20px no-repeat,
  radial-gradient(circle at 50% 44%, rgba(255,209,102,.45) 26px, transparent 46px),
  radial-gradient(50% 12px at 50% 100%, rgba(28,37,65,.18), transparent 70%)}
.landmarks .card:nth-child(even){flex-direction:row-reverse; text-align:right}
.landmarks .card:nth-child(even) > div{display:flex; flex-direction:column; align-items:flex-end}
.landmarks .card img{position:absolute; top:-8px; left:88px; width:26px; height:26px; padding:5px;
  background:var(--cream); border:2px solid var(--navy); border-radius:50%; box-sizing:content-box}
.landmarks .card:nth-child(even) img{left:auto; right:88px}
.landmarks .card h3{font-family:'Space Grotesk',system-ui,sans-serif; font-size:17.5px; margin:0 0 6px; line-height:1.25}
.landmarks .card p{font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:40ch}
.giftline{margin-top:38px; font-size:14px; color:var(--ink-soft); text-align:center}

/* ---------- S4 lookout ---------- */
.s4{text-align:center; transition:background 600ms ease; background:linear-gradient(180deg,var(--sky-pale),var(--sky-mist))}
.s4[data-era="afternoon"]{background:linear-gradient(180deg,var(--after-1),#FFE7C2)}
.s4[data-era="night"]{background:linear-gradient(180deg,var(--dusk-1),var(--dusk-2))}
.lookstars{position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 600ms ease; pointer-events:none;
  background-image:radial-gradient(2px 2px at 14% 22%,var(--violet) 50%,transparent 51%),
    radial-gradient(2px 2px at 78% 14%,var(--gold) 50%,transparent 51%),
    radial-gradient(2px 2px at 40% 10%,var(--violet) 50%,transparent 51%),
    radial-gradient(2px 2px at 90% 38%,var(--violet) 50%,transparent 51%)}
.s4[data-era="night"] .lookstars{opacity:.6}
.lookhills{position:absolute; left:0; right:0; bottom:0; height:44px; z-index:1; background:var(--leaf); opacity:.5; pointer-events:none;
  clip-path:polygon(0 62%,10% 42%,22% 64%,34% 32%,48% 60%,60% 38%,74% 62%,86% 46%,100% 64%,100% 100%,0 100%)}
.chips{display:flex; gap:8px; margin:18px auto 16px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; width:fit-content; max-width:100%}
.chip-btn{flex:0 0 auto; min-height:44px; padding:10px 15px; border-radius:var(--r-pill);
  border:1.5px solid var(--navy); background:var(--porcelain); color:var(--navy);
  font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  box-shadow:0 3px 0 var(--navy); transition:background var(--t-fast),transform var(--t-fast)}
.chip-btn[aria-selected="true"]{background:var(--gold)}
.chip-btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--navy)}
.window{position:relative; border:2px solid var(--navy); border-radius:18px; overflow:hidden;
  aspect-ratio:4/3; max-height:56svh; width:min(90vw,520px); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 0 rgba(28,37,65,.12)}
.wsky{position:absolute; inset:0; z-index:0; transition:background 400ms ease}
.window[data-era="morning"] .wsky{background:linear-gradient(180deg,var(--sky-deep),var(--sky-pale))}
.window[data-era="afternoon"] .wsky{background:linear-gradient(180deg,var(--after-1),#FFB27D)}
.window[data-era="night"] .wsky{background:linear-gradient(180deg,#141B33,var(--navy-2))}
.whills{position:absolute; left:0; right:0; bottom:0; height:22%; z-index:1; background:var(--leaf-deep); opacity:.92;
  clip-path:polygon(0 62%,10% 42%,22% 64%,34% 32%,48% 60%,60% 38%,74% 62%,86% 46%,100% 64%,100% 100%,0 100%)}
.window[data-era="night"] .whills{background:var(--navy)}
.wstars{position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 400ms ease;
  background-image:radial-gradient(2px 2px at 14% 18%,#FFF4D6 50%,transparent 51%),
    radial-gradient(2px 2px at 68% 12%,#FFD166 50%,transparent 51%),
    radial-gradient(2px 2px at 34% 30%,#FFF4D6 50%,transparent 51%),
    radial-gradient(2px 2px at 84% 34%,#FFF4D6 50%,transparent 51%),
    radial-gradient(2px 2px at 52% 8%,#FFD166 50%,transparent 51%)}
.window[data-era="night"] .wstars{opacity:1; animation:twinkle 3.4s ease-in-out infinite}
.screencard{position:relative; background:linear-gradient(160deg,var(--navy-2),var(--navy)); overflow:hidden}
.screencard.small{width:min(74%,300px); z-index:2; aspect-ratio:4/3; border:2px solid var(--navy); border-radius:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 0 rgba(28,37,65,.18)}
.screencard.small img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated}
.caption{margin-top:12px; font-size:14.5px; color:var(--ink-soft); text-align:center; line-height:1.55; min-height:2.6em; max-width:52ch}

/* ---------- S5 dossier (1c) on the cream field ---------- */
.s5{background:var(--cream)}
.dossier{margin-top:22px; max-width:720px; border:1.5px solid var(--navy); border-radius:14px; background:var(--porcelain); overflow:hidden;
  box-shadow:0 1px 0 var(--line), 0 14px 30px -22px rgba(28,37,65,.3)}
.dosshead{padding:10px 16px; background:var(--leaf-pale); border-bottom:1.5px solid var(--navy);
  font-family:'Press Start 2P',monospace; font-size:6.5px; letter-spacing:.1em; color:var(--navy); text-align:left}
.rows{margin:0; display:block; counter-reset:spec}
.row{display:flex; align-items:baseline; gap:14px; padding:15px 16px; border-bottom:1px solid var(--line); counter-increment:spec}
.rows .row:last-child{border-bottom:0}
.row::before{content:counter(spec,decimal-leading-zero); font-family:'Press Start 2P',monospace; font-size:7px; color:var(--leaf-deep); flex:0 0 22px}
.row dt{font-weight:600; font-size:14px; flex:0 0 auto}
.row dd{margin:0 0 0 auto; font-size:13.5px; color:var(--ink-soft); line-height:1.55; text-align:right; max-width:30ch}

/* ---------- S7 orchard stand: calm white shelves ---------- */
.s7{background:linear-gradient(180deg,var(--after-1),var(--after-2))}
.shelves{margin-top:22px; max-width:920px; display:flex; flex-direction:column; gap:18px}
.shelfcard{border:1.5px solid var(--navy); border-radius:16px; background:var(--porcelain); padding:22px 20px; text-align:center;
  box-shadow:0 1px 0 var(--line), 0 14px 30px -22px rgba(28,37,65,.25)}
.giftrow{display:flex; align-items:center; justify-content:center; gap:12px; width:fit-content; margin-inline:auto}
.ribbonart{width:70px; flex:0 0 auto}
.shelfcard .body{margin-top:14px; font-size:14.5px; color:var(--ink-soft); line-height:1.6; max-width:46ch; margin-inline:auto}
.shelfcard .btn{margin-top:14px}
.standtag{font-family:'Press Start 2P',monospace; font-size:6.5px; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:10px}
.standh{font-size:clamp(19px,5vw,22px)}
.badge{display:inline-block; margin-top:12px; border:1.5px solid var(--coral); border-radius:8px;
  background:#FFF5F6; color:#8E2233; padding:8px 12px;
  font-family:'Press Start 2P',monospace; font-size:7px; line-height:1.7; letter-spacing:.05em}
.shelfcard .lede{font-size:14px}
.slots{display:flex; gap:10px; margin-top:18px}
.slot{flex:1 1 0; min-width:0; aspect-ratio:1; border:1.5px dashed rgba(28,37,65,.45); border-radius:12px; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:6px; text-align:center}
.slot img{width:18px}
.slot span{font-size:10.5px; color:var(--ink-soft); line-height:1.3; word-break:break-word}
.bundlecard{margin-top:14px; border:1.5px solid var(--navy); border-radius:12px; padding:13px 15px; background:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.bundlecard .tbc{font-weight:600}
.nosale{font-size:11.5px; color:var(--ink-soft)}

/* ---------- S8 resting point: calm accordion ---------- */
.s8{background:linear-gradient(180deg,var(--after-2),#FFD9A3)}
.restpanel{margin-top:18px; max-width:680px; background:var(--porcelain); border:1.5px solid var(--navy); border-radius:16px;
  padding:6px 20px; box-shadow:0 1px 0 var(--line), 0 14px 30px -22px rgba(28,37,65,.25)}
.accordion{border-top:0}
.qa{border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qbtn{width:100%; text-align:left; background:none; border:0; padding:15px 34px 15px 0; min-height:52px;
  font-size:14.5px; font-weight:600; cursor:pointer; position:relative}
.qbtn::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:19px; color:var(--violet)}
.qbtn[aria-expanded="true"]::after{content:"–"}
.ans{padding:0 0 15px; font-size:13.5px; color:var(--ink-soft); line-height:1.6}
.ans[hidden]{display:none}
.fireflies i{position:absolute; width:4px; height:4px; background:var(--gold); border-radius:50%;
  box-shadow:0 0 8px 2px rgba(255,209,102,.65); animation:firefly 9s ease-in-out infinite}
.s8 .fireflies i:nth-child(1){left:12%; top:30%}
.s8 .fireflies i:nth-child(2){left:80%; top:24%; animation-delay:-3s}
.s8 .fireflies i:nth-child(3){left:64%; top:64%; animation-delay:-6s}

/* ---------- S9 dusk destination ---------- */
.s9{background:linear-gradient(180deg,#FFD9A3 0%,var(--coral) 52%,var(--violet) 100%); text-align:center; padding-bottom:74px}
.arrival{position:absolute; left:50%; top:0; height:52px; border-left:3px dashed rgba(255,244,214,.75); z-index:1}
.campglow{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%); width:min(120%,640px); height:220px; z-index:1;
  background:radial-gradient(closest-side, rgba(255,209,102,.55), rgba(255,209,102,0) 72%); pointer-events:none;
  animation:breathe 7s ease-in-out infinite}
.s9 .kicker{color:var(--navy)}
.s9 h2{font-size:clamp(24px,6.6vw,30px); margin-top:12px}
.s9 .chip{margin-top:12px}
.s9 .btn.gold{margin-top:12px}
.s9 .trust{color:rgba(28,37,65,.8)}
.hills{position:absolute; left:0; right:0; bottom:0; height:64px; z-index:1; background:var(--navy);
  clip-path:polygon(0 58%,9% 38%,20% 60%,32% 28%,45% 56%,58% 34%,72% 58%,85% 42%,100% 60%,100% 100%,0 100%)}

/* ---------- S10 firefly night ---------- */
.s10{position:relative; background:var(--navy); color:var(--cream); padding:34px 18px 90px; overflow:hidden; text-align:center}
.fstars{position:absolute; inset:0; opacity:.85;
  background-image:radial-gradient(2px 2px at 16% 20%,#FFF4D6 50%,transparent 51%),
    radial-gradient(2px 2px at 72% 16%,#FFD166 50%,transparent 51%),
    radial-gradient(2px 2px at 40% 40%,#FFF4D6 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 52%,#FFF4D6 50%,transparent 51%);
  animation:twinkle 4s ease-in-out infinite}
.s10 .fireflies i:nth-child(1){left:14%; top:36px}
.s10 .fireflies i:nth-child(2){left:58%; top:70px; animation-delay:-3s}
.s10 .fireflies i:nth-child(3){left:84%; top:30px; animation-delay:-6s}
.flinks{position:relative; display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center}
.flinks span{font-size:12.5px; color:rgba(255,244,214,.82); border-bottom:1px dashed rgba(255,244,214,.4); padding-bottom:2px}
.fabn{position:relative; margin-top:16px; font-size:12px; color:rgba(255,244,214,.7); border-color:rgba(255,244,214,.4)}
.signoff{position:relative; margin-top:22px; font-family:'Press Start 2P',monospace; font-size:8px; letter-spacing:.1em; color:var(--gold)}

/* ---------- buy bar + toast ---------- */
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--home-control);color:var(--home-ink);border-top:1.5px solid var(--home-edge);box-shadow:0 -4px 14px rgba(28,37,65,.10);
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.buybar[hidden]{display:none}
.buybar .barthumb{width:54px}
.bprice{font-weight:600; font-size:13.5px; flex:1 1 auto; min-width:0}
.buybar .btn{margin-top:0; flex:0 0 auto}
.toast{position:fixed; left:50%; bottom:78px; transform:translateX(-50%) translateY(8px); z-index:70;
  background:var(--porcelain); border:1.5px solid var(--navy); border-radius:12px; padding:11px 15px;
  font-family:'Press Start 2P',monospace; font-size:7.5px; line-height:1.6; letter-spacing:.05em;
  box-shadow:0 3px 0 var(--navy); opacity:0; transition:opacity var(--t-mid),transform var(--t-mid);
  max-width:calc(100vw - 32px); text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast[hidden]{display:none}

/* ============================================================
   APPROVED MOTION PASS — progressive enhancement only
   motion.js adds .motion-enabled after it has revealed anything
   already in view. Without that gate, every element remains in
   its complete static baseline state.
   ============================================================ */
html.motion-enabled body{transition:background-color 700ms ease}
html.motion-enabled[data-world-phase="morning"] body{background-color:var(--leaf-pale)}
html.motion-enabled[data-world-phase="day"] body{background-color:#F6FCF2}
html.motion-enabled[data-world-phase="golden"] body{background-color:var(--after-1)}
html.motion-enabled[data-world-phase="dusk"] body{background-color:#FFD9A3}
html.motion-enabled[data-world-phase="night"] body{background-color:var(--navy)}
html.motion-enabled .trailseg{transition:background-color 700ms ease}

/* One-time editorial entrances. No control, model or console node is targeted. */
html.motion-enabled .motion-item{
  --motion-x:0px; --motion-y:var(--motion-distance);
  opacity:0; transform:translate3d(var(--motion-x),var(--motion-y),0);
  transition:opacity var(--motion-enter) var(--motion-ease),
    transform var(--motion-enter) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms)
}
html.motion-enabled .motion-item.is-visible{
  opacity:1; transform:translate3d(0,0,0)
}
html.motion-enabled .landmarks .card.motion-item:nth-child(odd){--motion-x:-10px;--motion-y:4px}
html.motion-enabled .landmarks .card.motion-item:nth-child(even){--motion-x:10px;--motion-y:4px}
html.motion-enabled .landmarks .card.motion-item::before{
  transform:translateY(-5px) scale(.985);
  transition:transform 620ms var(--motion-ease) calc(var(--motion-delay,0ms) + 70ms)
}
html.motion-enabled .landmarks .card.motion-item.is-visible::before{transform:none}
html.motion-enabled .row.motion-item{--motion-y:7px}
html.motion-enabled .slot.motion-item{--motion-y:8px}
html.motion-enabled .ribbonart.motion-item{--motion-y:-7px}

/* Dashed route reveals without changing connector geometry. */
html.motion-enabled .motion-trail::before{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 720ms var(--motion-ease)
}
html.motion-enabled .motion-trail::after{
  opacity:0; transform:scale(.45);
  transition:opacity 300ms ease 360ms,transform 460ms var(--motion-ease) 300ms
}
html.motion-enabled .motion-trail.is-visible::before{clip-path:inset(0)}
html.motion-enabled .motion-trail.is-visible::after{opacity:1;transform:scale(1)}

/* Scroll depth stays on scenery and artwork only. */
html.motion-enabled .s1 > .sun{translate:0 var(--hero-sun-y,0px)}
html.motion-enabled .s1 > .cloud{translate:0 var(--hero-cloud-y,0px)}
html.motion-enabled .s1 > .meadow.back{translate:0 var(--hero-back-y,0px)}
html.motion-enabled .s1 > .meadow.front{translate:0 var(--hero-front-y,0px)}
html.motion-enabled .s1 > .fgrass{translate:0 var(--hero-grass-y,0px)}
html.motion-enabled .s2 .wframe img{translate:0 var(--world-depth-y,0px)}
html.motion-enabled .s4 .lookhills{translate:0 var(--lookout-hills-y,0px)}
html.motion-enabled .s9 .hills{translate:0 var(--dusk-hills-y,0px)}

/* Local light passes make the connected world move from cool morning to dusk. */
html.motion-enabled .s2::after,
html.motion-enabled .s3::after,
html.motion-enabled .s4::after,
html.motion-enabled .s5::after,
html.motion-enabled .s7::after,
html.motion-enabled .s8::after,
html.motion-enabled .s9::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:var(--section-light,0); transition:opacity 180ms linear
}
html.motion-enabled .s2::after,
html.motion-enabled .s3::after{background:linear-gradient(135deg,rgba(135,217,245,.56),rgba(255,209,102,.28))}
html.motion-enabled .s4::after,
html.motion-enabled .s5::after{background:linear-gradient(135deg,rgba(255,244,214,.5),rgba(124,58,237,.13))}
html.motion-enabled .s7::after,
html.motion-enabled .s8::after{background:linear-gradient(135deg,rgba(255,209,102,.52),rgba(255,93,115,.18))}
html.motion-enabled .s9::after{background:radial-gradient(circle at 50% 70%,rgba(255,209,102,.46),rgba(124,58,237,.12) 64%,transparent)}

/* Pollen is deterministic, sparse, decorative and only runs near its section. */
.sec > .motion-particles{position:absolute;inset:0;z-index:1;display:none;overflow:hidden;pointer-events:none}
html.motion-enabled .motion-particles{display:block}
.motion-particles i{
  position:absolute; left:var(--particle-x); top:var(--particle-y);
  width:var(--particle-size); height:var(--particle-size); border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px 1px rgba(255,209,102,.42);
  opacity:0
}
html.motion-enabled .ambient-active .motion-particles i{
  animation:pollen-drift var(--particle-duration) ease-in-out var(--particle-delay) infinite
}

/* Existing fireflies/stars are proximity-gated by motion.js. */
html.motion-enabled .fireflies i,
html.motion-enabled .fstars,
html.motion-enabled .pollen{animation:none;opacity:0}
html.motion-enabled .ambient-active .fireflies i{animation:firefly 9s ease-in-out infinite}
html.motion-enabled .ambient-active .fireflies i:nth-child(2){animation-delay:-3s}
html.motion-enabled .ambient-active .fireflies i:nth-child(3){animation-delay:-6s}
html.motion-enabled .ambient-active .fstars{
  opacity:.85; animation:twinkle 4s ease-in-out infinite;
  clip-path:inset(var(--footer-star-mask,0%) 0 0 0)
}
html.motion-enabled .ambient-active .pollen{opacity:1;animation:floaty 11s ease-in-out infinite}
html.motion-enabled .s1 .cloud,
html.motion-enabled .s1 .glow,
html.motion-enabled .s1 .scrollcue,
html.motion-enabled .s1 .device,
html.motion-enabled .s1 .model3d-shell,
html.motion-enabled .s1 .dpress,
html.motion-enabled .s4 .wstars{animation-play-state:paused}
html.motion-enabled .s1.ambient-active .cloud,
html.motion-enabled .s1.ambient-active .glow,
html.motion-enabled .s1.ambient-active .scrollcue,
html.motion-enabled .s1.ambient-active .device,
html.motion-enabled .s1.ambient-active .model3d-shell,
html.motion-enabled .s1.ambient-active .dpress,
html.motion-enabled .s4.ambient-active .wstars{animation-play-state:running}

/* Arrival and night-footer progression. */
html.motion-enabled .s9 .arrival{clip-path:inset(0 0 var(--arrival-mask,100%) 0)}
html.motion-enabled .s9 .campglow{
  animation:none; opacity:var(--campfire-strength,.58);
  transform:translateX(-50%) scale(var(--campfire-scale,.96));
  transition:opacity 140ms linear
}
html.motion-enabled .s10::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(124,58,237,.28),transparent 58%);
  opacity:var(--footer-glow,0);transition:opacity 160ms linear
}

/* Click-driven screen/world responses stay outside console transforms. */
html.motion-enabled .devicewrap{isolation:isolate}
html.motion-enabled .devicewrap::after{
  content:"";position:absolute;inset:12% 5% 10%;z-index:0;pointer-events:none;border-radius:40%;
  box-shadow:0 0 42px 8px rgba(255,209,102,.34);opacity:0
}
html.motion-enabled .devicewrap > .deviceholder{position:relative;z-index:1}
html.motion-enabled .devicewrap.console-world-shift::after{animation:console-world-glow 520ms ease-out}
html.motion-enabled .window.era-shifting .screencard.small{animation:era-settle 440ms var(--motion-ease)}

html.motion-enabled.motion-lite{--motion-distance:7px;--motion-enter:420ms}
html.motion-enabled.motion-lite .motion-particles i:nth-child(n+3){display:none}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused !important}

/* ---------- animations ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes drift{from{transform:translateX(-10px)}to{transform:translateX(28px)}}
@keyframes blink{0%,58%{opacity:1}59%,100%{opacity:.25}}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.85}50%{opacity:.35}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes firefly{0%,100%{transform:translate(0,0); opacity:.9}30%{opacity:.35}50%{transform:translate(16px,-12px); opacity:1}80%{opacity:.5}}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes pollen-drift{
  0%,100%{transform:translate3d(0,8px,0);opacity:0}
  18%{opacity:.72}
  55%{transform:translate3d(var(--particle-drift),-18px,0);opacity:.5}
  82%{opacity:.7}
}
@keyframes console-world-glow{0%{opacity:0;transform:scale(.96)}42%{opacity:.72}100%{opacity:0;transform:scale(1.04)}}
@keyframes era-settle{0%{opacity:.72;transform:scale(.992)}100%{opacity:1;transform:none}}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:768px){
  .sec{padding:76px 32px 84px}
  .trailseg{height:88px}
  .s1 h1{font-size:46px}
  .s1 .sub{font-size:16px; max-width:44ch}
  .devicewrap{width:min(100%,480px)}
  .worldrow{gap:20px; overflow:visible}
  .worldcard{width:246px}
  .window{width:min(90vw,560px)}
  .landmarks{gap:56px}
  .landmarks .card::before{flex-basis:150px; height:150px}
  .landmarks .card img{left:112px}
  .landmarks .card:nth-child(even) img{left:auto; right:112px}
  .meadow.back{height:190px}
  .meadow.front{height:120px}
  .shelves{flex-direction:row; align-items:stretch}
  .shelfcard{flex:1 1 0; min-width:0}
}
@media (min-width:1024px){
  body{padding-bottom:0}
  .sec{padding:92px 40px 100px}
  .s1{padding-bottom:130px}
  .s1 h1{font-size:52px}
  .devicewrap{width:min(100%,540px)}
  .glow{width:min(120%,680px)}
  .c1{top:100px; left:6%}
  .c2{top:190px; right:7%}
  .sun{top:52px; right:14%; width:70px; height:70px}
  .trailseg{height:110px}
  .trailseg.wl::before{left:calc(50% - 120px); transform:rotate(10deg)}
  .trailseg.wr::before{left:calc(50% + 120px); transform:rotate(-10deg)}
  .trailseg.wl::after{left:calc(50% - 132px)}
  .trailseg.wr::after{left:calc(50% + 112px)}
  .buybar{left:auto; right:24px; bottom:24px; width:auto; border:1.5px solid var(--navy);
    border-radius:var(--r-pill); padding:8px 12px; box-shadow:0 6px 0 rgba(28,37,65,.14)}
  .bprice{flex:0 0 auto}
  .toast{bottom:96px; left:auto; right:24px; transform:translateY(8px)}
  .toast.show{transform:translateY(0)}
  .worldcard{width:280px}
  .dossier{max-width:760px}
}
@media (min-width:1440px){
  .sec{padding-inline:calc((100vw - 1100px)/2)}
  .s10{padding-inline:calc((100vw - 1100px)/2)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .device,.model3d-shell{animation:none}
  .deviceholder{transform:none !important}
  .blink{animation:none; opacity:1}
  .fstars,.wstars,.lookstars,.pollen,.fireflies i,.campglow,.glow,.scrollcue{animation:none}
  .rise{opacity:1 !important; transform:none !important; transition:none !important}
  html.motion-enabled .motion-item{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  html.motion-enabled .motion-trail::before{clip-path:inset(0) !important;transition:none !important}
  html.motion-enabled .motion-trail::after{opacity:1 !important;transform:none !important;transition:none !important}
  html.motion-enabled .motion-particles{display:none !important}
  html.motion-enabled .s1 > .sun,
  html.motion-enabled .s1 > .cloud,
  html.motion-enabled .s1 > .meadow,
  html.motion-enabled .s1 > .fgrass,
  html.motion-enabled .s4 .lookhills,
  html.motion-enabled .s9 .hills{translate:none !important}
  html.motion-enabled .s2 .wframe img{translate:none !important;transform:none !important}
  html.motion-enabled .s9 .arrival{clip-path:inset(0) !important}
  html.motion-enabled .s9 .campglow{opacity:.85 !important;transform:translateX(-50%) !important}
  html.motion-enabled .s10 .fstars{clip-path:inset(0) !important;opacity:.85 !important}
}

/* ============================================================
   APPROVED SUMMER MEADOW WIND HERO — isolated Checkpoint 2 layer
   ============================================================ */
.hero-meadow{
  /* The approved hero always keeps its daylight palette, in either site theme. */
  --home-ink:#1c2541;--home-edge:rgba(28,37,65,.14);--home-focus:#7c3aed;--home-control:#fffdf6;
  color-scheme:light;
  --hero-fringe-h:110px;
  --hero-backdrop-size:cover;
  --hero-cloud-size:104.07% auto;
  --hero-cloud-offset-y:-6.64vw;
  isolation:isolate;
  min-height:calc(100svh - var(--ribbon-h) - var(--nav-h));
  padding:0;
  background:#178bea;
  color:#22254c
}
.hero-meadow .hero-meadow__backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#0266fb;
  pointer-events:none
}
.hero-meadow .hero-meadow__layout{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-rows:auto minmax(220px,1fr);
  min-height:inherit;
  width:min(100%,1440px);
  margin:0 auto;
  padding:28px 24px calc(var(--hero-fringe-h) + 18px)
}
.hero-meadow .hero-meadow__copy{
  position:relative;
  z-index:8;
  align-self:start;
  max-width:590px;
  text-align:left
}
.hero-meadow .kicker{
  display:block;
  color:#fff6dc;
  font-size:8px;
  font-weight:400;
  letter-spacing:.18em;
  line-height:1.7;
  text-shadow:0 2px 0 rgba(34,37,76,.35)
}
.hero-meadow #s1h{
  display:flex;
  width:max-content;
  max-width:100%;
  flex-direction:column;
  align-items:flex-start;
  margin-top:10px;
  color:#ffd166;
  font-family:'Press Start 2P',monospace;
  font-size:clamp(40px,11.5vw,48px);
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.94;
  text-wrap:nowrap
}
.hero-meadow .hero-meadow__logo-line{
  --logo-inset:2px;
  display:block;
  position:relative;
  padding:var(--logo-inset) 8px 8px var(--logo-inset);
  paint-order:stroke fill;
  -webkit-text-stroke:2px #1c2541;
  text-shadow:
    2px 2px 0 #69419a,
    4px 4px 0 #2a285c,
    6px 6px 0 #1c2541;
  white-space:nowrap
}
.hero-meadow .hero-meadow__logo-line::before,
.hero-meadow .hero-meadow__logo-line::after{
  content:attr(data-text);
  position:absolute;
  z-index:1;
  top:var(--logo-inset);
  left:var(--logo-inset);
  overflow:hidden;
  -webkit-text-stroke:0;
  text-shadow:none;
  white-space:nowrap;
  pointer-events:none
}
.hero-meadow .hero-meadow__logo-line::before{
  color:#fff4d6;
  clip-path:inset(0 0 72% 0)
}
.hero-meadow .hero-meadow__logo-line--pocket{
  color:#ffd166
}
.hero-meadow .hero-meadow__logo-line--pocket::after{
  color:#ff6b72;
  clip-path:inset(64% 0 0 0)
}
.hero-meadow .hero-meadow__logo-line--pixel{
  margin-left:.5em;
  color:#62d8e8
}
.hero-meadow .hero-meadow__logo-line--pixel::after{
  color:#7c3aed;
  clip-path:inset(64% 0 0 0)
}
.hero-meadow .hero-meadow__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px
}
.hero-meadow .hero-meadow__worlds-link{
  display:none;
  min-height:28px;
  align-items:center;
  color:#22254c;
  font-family:'Press Start 2P',monospace;
  font-size:8px;
  font-weight:400;
  line-height:1.5;
  text-underline-offset:4px
}
.hero-meadow .hero-meadow__console-stage{
  position:relative;
  z-index:4;
  align-self:end;
  width:100%;
  min-height:220px;
  padding-bottom:38px;
  transform:translateY(-180px)
}
.hero-meadow .hero-meadow__contact-shadow{
  position:absolute;
  left:14%;
  right:14%;
  bottom:53px;
  height:17%;
  z-index:0;
  transform:scale(.65);
  transform-origin:50% 100%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(18,20,46,.34),rgba(18,20,46,0) 72%);
  pointer-events:none
}
.hero-meadow .devicewrap{
  position:relative;
  z-index:3;
  width:min(100%,760px);
  min-height:1px;
  margin:0 auto;
  transform:scale(.65);
  transform-origin:50% 100%;
  perspective:1100px
}
.hero-meadow .deviceholder{aspect-ratio:800/442;transform-style:preserve-3d}
.hero-meadow .device,
.hero-meadow .model3d-shell{
  animation:none;
  filter:drop-shadow(0 14px 16px rgba(18,20,46,.23))
}
.hero-meadow .model3d-shell{aspect-ratio:800/442}
.hero-meadow .model3d-hotspot-dpad{
  width:42px;
  height:48px
}
.hero-meadow .hero-meadow__dpad-prev{
  width:42px;
  height:48px
}
.hero-meadow .model3d-hotspot{
  transform:translate(-50%,-50%) scale(2)
}
.hero-meadow .hero-meadow__dpad-prev:disabled{display:none}
.hero-meadow .hero-meadow__fringe{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:var(--hero-fringe-h);
  z-index:5;
  background-image:none;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:var(--hero-backdrop-size);
  image-rendering:pixelated;
  pointer-events:none
}
.hero-meadow .hero-meadow__cloud,
.hero-meadow .hero-meadow__distant,
.hero-meadow .hero-meadow__flower,
.hero-meadow .hero-meadow__grass,
.hero-meadow .hero-meadow__slime,
.hero-meadow .hero-meadow__pollen,
.hero-meadow .hero-meadow__petal{
  position:absolute;
  pointer-events:none
}
.hero-meadow .hero-meadow__distant{
  z-index:2;
  bottom:30%;
  width:40px;
  transform-origin:50% 100%;
  animation:yp-hero-sway-distant var(--sway-duration,12s) ease-in-out var(--sway-phase,-2s) infinite
}
.hero-meadow .hero-meadow__distant img,
.hero-meadow .hero-meadow__flower img,
.hero-meadow .hero-meadow__grass img,
.hero-meadow .hero-meadow__slime img{
  display:block;
  width:100%;
  image-rendering:pixelated
}
.hero-meadow .hero-meadow__distant--left{left:4%;--sway-duration:12.2s;--sway-phase:-1.4s;--sway-x:1.4px;--sway-lift:-.4px;--sway-angle:.18deg}
.hero-meadow .hero-meadow__distant--right{right:4%;--sway-duration:13.1s;--sway-phase:-6.2s;--sway-x:1.1px;--sway-lift:-.3px;--sway-angle:.14deg}
.hero-meadow .hero-meadow__flower{
  z-index:7;
  transform-origin:50% 100%;
  animation:var(--flower-sway) var(--sway-duration,5s) cubic-bezier(.45,.05,.55,.95) var(--sway-phase,-2s) infinite;
  will-change:transform
}
.hero-meadow .hero-meadow__flower--0{left:8.9%;bottom:11.2%;width:38px;--flower-sway:yp-hero-flower-0;--sway-duration:5.2s;--sway-phase:-.6s}
.hero-meadow .hero-meadow__flower--1{left:24.3%;bottom:12.2%;width:38px;--flower-sway:yp-hero-flower-1;--sway-duration:4.7s;--sway-phase:-2.1s}
.hero-meadow .hero-meadow__flower--2{left:29.6%;bottom:14%;width:19px;--flower-sway:yp-hero-flower-2;--sway-duration:4.1s;--sway-phase:-1.4s}
.hero-meadow .hero-meadow__flower--3{left:33%;bottom:15.3%;width:19px;--flower-sway:yp-hero-flower-3;--sway-duration:4.5s;--sway-phase:-3.2s}
.hero-meadow .hero-meadow__flower--4{left:53.6%;bottom:12.7%;width:16px;--flower-sway:yp-hero-flower-4;--sway-duration:4.9s;--sway-phase:-1.9s}
.hero-meadow .hero-meadow__flower--5{left:65.1%;bottom:11.2%;width:39px;--flower-sway:yp-hero-flower-5;--sway-duration:5.4s;--sway-phase:-4s}
.hero-meadow .hero-meadow__flower--6{left:80.4%;bottom:12.2%;width:38px;--flower-sway:yp-hero-flower-6;--sway-duration:5s;--sway-phase:-2.7s}
.hero-meadow .hero-meadow__flower--7{left:88.4%;bottom:10.2%;width:15px;--flower-sway:yp-hero-flower-7;--sway-duration:4.3s;--sway-phase:-.9s}
.hero-meadow .hero-meadow__flower--8{left:96%;bottom:11.2%;width:30px;--flower-sway:yp-hero-flower-8;--sway-duration:5.6s;--sway-phase:-4.6s}
.hero-meadow .hero-meadow__flower--9{left:17.51%;bottom:9.57%;width:58px;--flower-sway:yp-hero-flower-9;--sway-duration:5.8s;--sway-phase:-3.4s}
.hero-meadow .hero-meadow__flower--10{left:26.76%;bottom:9.28%;width:54px;--flower-sway:yp-hero-flower-10;--sway-duration:5.5s;--sway-phase:-1.1s}
.hero-meadow .hero-meadow__flower--11{left:31.38%;bottom:13.77%;width:19px;--flower-sway:yp-hero-flower-11;--sway-duration:4.25s;--sway-phase:-2.8s}
.hero-meadow .hero-meadow__flower--12{left:34.7%;bottom:16.31%;width:17px;--flower-sway:yp-hero-flower-12;--sway-duration:4.65s;--sway-phase:-.35s}
.hero-meadow .hero-meadow__flower--13{left:33.98%;bottom:11.13%;width:44px;--flower-sway:yp-hero-flower-13;--sway-duration:5.15s;--sway-phase:-3.7s}
.hero-meadow .hero-meadow__flower--14{left:50.07%;bottom:12.5%;width:35px;--flower-sway:yp-hero-flower-14;--sway-duration:4.85s;--sway-phase:-1.65s}
.hero-meadow .hero-meadow__flower--15{left:90.04%;bottom:10.55%;width:30px;--flower-sway:yp-hero-flower-15;--sway-duration:5.35s;--sway-phase:-4.25s}
.hero-meadow .hero-meadow__grass{
  z-index:7;
  transform-origin:50% 100%;
  animation:yp-hero-sway-grass var(--sway-duration,10s) ease-in-out var(--sway-phase,-2s) infinite
}
.hero-meadow .hero-meadow__grass--1{left:29.9%;bottom:7.2%;width:48px;--sway-duration:5.8s;--sway-phase:-2.4s;--sway-x:6.8px;--sway-lift:-1.6px;--sway-angle:1.3deg}
.hero-meadow .hero-meadow__grass--2{left:50%;bottom:7.7%;width:64px;--sway-duration:5s;--sway-phase:-3.9s;--sway-x:8.3px;--sway-lift:-2.1px;--sway-angle:1.7deg}
.hero-meadow .hero-meadow__grass--3{left:70.1%;bottom:7%;width:48px;--sway-duration:6s;--sway-phase:-1.4s;--sway-x:7px;--sway-lift:-1.7px;--sway-angle:1.4deg}
.hero-meadow .hero-meadow__slime{left:29.2%;bottom:4.6%;z-index:8;width:74px}
.hero-meadow .hero-meadow__distant--left{--gust-delay:0ms}
.hero-meadow .hero-meadow__distant--right{--gust-delay:660ms}
.hero-meadow .hero-meadow__flower--0{--gust-delay:70ms}
.hero-meadow .hero-meadow__flower--1{--gust-delay:190ms}
.hero-meadow .hero-meadow__flower--2{--gust-delay:240ms}
.hero-meadow .hero-meadow__flower--3{--gust-delay:280ms}
.hero-meadow .hero-meadow__flower--4{--gust-delay:420ms}
.hero-meadow .hero-meadow__flower--5{--gust-delay:520ms}
.hero-meadow .hero-meadow__flower--6{--gust-delay:640ms}
.hero-meadow .hero-meadow__flower--7{--gust-delay:700ms}
.hero-meadow .hero-meadow__flower--8{--gust-delay:760ms}
.hero-meadow .hero-meadow__flower--9{--gust-delay:130ms}
.hero-meadow .hero-meadow__flower--10{--gust-delay:210ms}
.hero-meadow .hero-meadow__flower--11{--gust-delay:255ms}
.hero-meadow .hero-meadow__flower--12{--gust-delay:300ms}
.hero-meadow .hero-meadow__flower--13{--gust-delay:315ms}
.hero-meadow .hero-meadow__flower--14{--gust-delay:400ms}
.hero-meadow .hero-meadow__flower--15{--gust-delay:725ms}
.hero-meadow .hero-meadow__grass--1{--gust-delay:240ms}
.hero-meadow .hero-meadow__grass--2{--gust-delay:400ms}
.hero-meadow .hero-meadow__grass--3{--gust-delay:560ms}
.hero-meadow.wind-gust-active .hero-meadow__distant img,
.hero-meadow.wind-gust-active .hero-meadow__flower img,
.hero-meadow.wind-gust-active .hero-meadow__grass img{
  animation:yp-hero-meadow-gust 1.5s cubic-bezier(.37,0,.2,1) var(--gust-delay,0ms) 1 both;
  will-change:translate
}
.hero-meadow .hero-meadow__pollen,
.hero-meadow .hero-meadow__petal{z-index:9;opacity:0}
.hero-meadow .hero-meadow__pollen{width:3px;height:3px;background:#f2efe4}
.hero-meadow .hero-meadow__pollen--0{left:8%;bottom:19%;animation:yp-hero-pollen-a 17s linear -3s infinite}
.hero-meadow .hero-meadow__pollen--1{left:4%;bottom:12%;width:2px;height:2px;background:#e8d67a;animation:yp-hero-pollen-b 23s linear -8s infinite}
.hero-meadow .hero-meadow__pollen--2{left:16%;bottom:26%;animation:yp-hero-pollen-a 17s linear -11s infinite}
.hero-meadow .hero-meadow__pollen--3{left:2%;bottom:6%;width:2px;height:2px;animation:yp-hero-pollen-b 23s linear -16s infinite}
.hero-meadow .hero-meadow__petal{left:12%;bottom:16%;width:4px;height:3px;background:#e8a0b8;animation:yp-hero-petal 19s linear -6s infinite}
.hero-meadow [data-hero-wind]{animation-play-state:paused}
.hero-meadow.ambient-active [data-hero-wind]{animation-play-state:running}
html.motion-paused .hero-meadow [data-hero-wind]{animation-play-state:paused !important}

@keyframes yp-hero-cloud-left{from{transform:translateX(-106%)}to{transform:translateX(208%)}}
@keyframes yp-hero-cloud-right{from{transform:translateX(-204%)}to{transform:translateX(106%)}}
@keyframes yp-hero-cloud-hover-y{0%,100%{translate:0 -1.5px}50%{translate:0 1.5px}}
@keyframes yp-hero-cloud-hover-x{0%,100%{transform:translate3d(-2px,0,0)}50%{transform:translate3d(2px,0,0)}}
@keyframes yp-hero-cloud-end-left{0%,100%{transform:translate3d(-1px,-.5px,0)}50%{transform:translate3d(1px,.5px,0)}}
@keyframes yp-hero-cloud-end-right{0%,100%{transform:translate3d(1px,.5px,0)}50%{transform:translate3d(-1px,-.5px,0)}}
@keyframes yp-hero-cloud-distortion{0%,100%{translate:0 0}24%{translate:var(--ripple-a-x) var(--ripple-a-y)}48%{translate:var(--ripple-b-x) var(--ripple-b-y)}72%{translate:0 -1px}}
@keyframes yp-hero-meadow-gust{0%,100%{translate:0 0}42%{translate:3px -1px}72%{translate:1px 0}}
@keyframes yp-hero-flower-0{0%,100%{transform:translate3d(-3px,.4px,0) rotate(-1.8deg)}24%{transform:translate3d(2px,-1.2px,0) rotate(.8deg)}57%{transform:translate3d(9px,-3.8px,0) rotate(3.2deg)}81%{transform:translate3d(1px,-1px,0) rotate(.2deg)}}
@keyframes yp-hero-flower-1{0%,100%{transform:translate3d(2px,-.5px,0) rotate(1.1deg)}31%{transform:translate3d(-5px,.3px,0) rotate(-2.5deg)}64%{transform:translate3d(7px,-3.3px,0) rotate(3.1deg)}86%{transform:translate3d(4px,-1.4px,0) rotate(1.7deg)}}
@keyframes yp-hero-flower-2{0%,100%{transform:translate3d(-2px,0,0) rotate(-2.2deg)}19%{transform:translate3d(3px,-1.8px,0) rotate(2deg)}47%{transform:translate3d(6px,-2.8px,0) rotate(4.1deg)}76%{transform:translate3d(-4px,.4px,0) rotate(-3deg)}}
@keyframes yp-hero-flower-3{0%,100%{transform:translate3d(1px,-.6px,0) rotate(.7deg)}28%{transform:translate3d(7px,-3px,0) rotate(3.7deg)}53%{transform:translate3d(3px,-1.6px,0) rotate(1.4deg)}79%{transform:translate3d(-4px,.2px,0) rotate(-2.7deg)}}
@keyframes yp-hero-flower-4{0%,100%{transform:translate3d(-1px,-.4px,0) rotate(-.8deg)}22%{transform:translate3d(-4px,.2px,0) rotate(-3.4deg)}51%{transform:translate3d(5px,-2.6px,0) rotate(4.2deg)}74%{transform:translate3d(2px,-1.3px,0) rotate(1.6deg)}}
@keyframes yp-hero-flower-5{0%,100%{transform:translate3d(-4px,.5px,0) rotate(-2.1deg)}34%{transform:translate3d(1px,-1.2px,0) rotate(.4deg)}68%{transform:translate3d(10px,-4px,0) rotate(3.5deg)}88%{transform:translate3d(4px,-2px,0) rotate(1.5deg)}}
@keyframes yp-hero-flower-6{0%,100%{transform:translate3d(3px,-.8px,0) rotate(1.4deg)}26%{transform:translate3d(8px,-3.6px,0) rotate(3.4deg)}59%{transform:translate3d(-4px,.4px,0) rotate(-2.3deg)}83%{transform:translate3d(0,-1px,0) rotate(-.1deg)}}
@keyframes yp-hero-flower-7{0%,100%{transform:translate3d(-3px,.3px,0) rotate(-3.4deg)}18%{transform:translate3d(1px,-1.1px,0) rotate(.8deg)}44%{transform:translate3d(5px,-2.4px,0) rotate(4.5deg)}69%{transform:translate3d(2px,-1.2px,0) rotate(1.5deg)}87%{transform:translate3d(-4px,.5px,0) rotate(-4deg)}}
@keyframes yp-hero-flower-8{0%,100%{transform:translate3d(1px,-.4px,0) rotate(.5deg)}29%{transform:translate3d(-5px,.5px,0) rotate(-2.5deg)}55%{transform:translate3d(4px,-2px,0) rotate(1.8deg)}78%{transform:translate3d(8px,-3.5px,0) rotate(3.2deg)}}
@keyframes yp-hero-flower-9{0%,100%{transform:translate3d(-2px,.2px,0) rotate(-1.2deg)}21%{transform:translate3d(1px,-1px,0) rotate(.4deg)}49%{transform:translate3d(6px,-2.8px,0) rotate(2.2deg)}73%{transform:translate3d(3px,-1.5px,0) rotate(1deg)}}
@keyframes yp-hero-flower-10{0%,100%{transform:translate3d(2px,-.4px,0) rotate(.9deg)}27%{transform:translate3d(-3px,.2px,0) rotate(-1.8deg)}61%{transform:translate3d(7px,-3px,0) rotate(2.5deg)}84%{transform:translate3d(4px,-1.7px,0) rotate(1.4deg)}}
@keyframes yp-hero-flower-11{0%,100%{transform:translate3d(-2px,.3px,0) rotate(-2.4deg)}33%{transform:translate3d(4px,-1.8px,0) rotate(3.1deg)}58%{transform:translate3d(6px,-2.5px,0) rotate(4deg)}82%{transform:translate3d(0,-.7px,0) rotate(-.2deg)}}
@keyframes yp-hero-flower-12{0%,100%{transform:translate3d(1px,-.2px,0) rotate(.8deg)}23%{transform:translate3d(5px,-2.2px,0) rotate(3.6deg)}54%{transform:translate3d(-3px,.3px,0) rotate(-2.7deg)}77%{transform:translate3d(2px,-1.1px,0) rotate(1.5deg)}}
@keyframes yp-hero-flower-13{0%,100%{transform:translate3d(-3px,.4px,0) rotate(-1.7deg)}18%{transform:translate3d(0,-.6px,0) rotate(.1deg)}46%{transform:translate3d(7px,-3px,0) rotate(2.9deg)}71%{transform:translate3d(4px,-1.6px,0) rotate(1.4deg)}89%{transform:translate3d(-1px,.1px,0) rotate(-.8deg)}}
@keyframes yp-hero-flower-14{0%,100%{transform:translate3d(2px,-.4px,0) rotate(1.2deg)}30%{transform:translate3d(6px,-2.5px,0) rotate(3.2deg)}56%{transform:translate3d(1px,-1px,0) rotate(.5deg)}80%{transform:translate3d(-4px,.3px,0) rotate(-2.5deg)}}
@keyframes yp-hero-flower-15{0%,100%{transform:translate3d(-1px,0,0) rotate(-.5deg)}25%{transform:translate3d(-4px,.4px,0) rotate(-2.8deg)}52%{transform:translate3d(5px,-2.4px,0) rotate(3deg)}76%{transform:translate3d(3px,-1.3px,0) rotate(1.6deg)}}
@keyframes yp-hero-sway-grass{0%,100%{transform:translate3d(-2.5px,.2px,0) rotate(-.9deg)}50%{transform:translate3d(var(--sway-x,7.5px),var(--sway-lift,-1.9px),0) rotate(var(--sway-angle,1.5deg))}}
@keyframes yp-hero-sway-distant{0%,100%{transform:translate3d(-.4px,0,0) rotate(-.1deg)}50%{transform:translate3d(var(--sway-x,1.2px),var(--sway-lift,-.3px),0) rotate(var(--sway-angle,.15deg))}}
@keyframes yp-hero-pollen-a{0%{transform:translate(0,0);opacity:0}6%,50%{opacity:.85}50%{transform:translate(44vw,-36px)}94%{opacity:.7}100%{transform:translate(86vw,-80px);opacity:0}}
@keyframes yp-hero-pollen-b{0%{transform:translate(0,0);opacity:0}8%,60%{opacity:.8}60%{transform:translate(42vw,-20px)}100%{transform:translate(68vw,-52px);opacity:0}}
@keyframes yp-hero-petal{0%{transform:translate(0,0);opacity:0}5%,30%{opacity:.95}30%{transform:translate(21vw,20px)}60%{transform:translate(44vw,-6px);opacity:.9}100%{transform:translate(76vw,30px);opacity:0}}

@media (min-width:900px){
  .hero-meadow .hero-meadow__layout{
    grid-template-columns:minmax(420px,43%) minmax(0,57%);
    grid-template-rows:1fr;
    gap:1%;
    align-items:stretch;
    padding:72px 2% calc(var(--hero-fringe-h) + 24px) 6.7%
  }
  .hero-meadow .hero-meadow__copy{align-self:start;padding-top:86px}
  .hero-meadow #s1h{font-size:clamp(64px,6vw,86px)}
  .hero-meadow .hero-meadow__logo-line{
    --logo-inset:3px;
    padding:var(--logo-inset) 11px 11px var(--logo-inset);
    -webkit-text-stroke-width:3px;
    text-shadow:
      3px 3px 0 #69419a,
      6px 6px 0 #2a285c,
      8px 8px 0 #1c2541
  }
  .hero-meadow .hero-meadow__actions{gap:16px;margin-top:14px}
  .hero-meadow .hero-meadow__worlds-link{display:inline-flex}
  .hero-meadow .hero-meadow__console-stage{
    align-self:start;
    min-height:430px;
    padding-bottom:28px;
    transform:translateY(calc(136.6px - 17.35vw))
  }
  .hero-meadow .hero-meadow__contact-shadow{bottom:50px;height:18%}
}

@media (max-width:899px){
  .hero-meadow{
    --hero-fringe-h:78px;
    --hero-backdrop-size:cover;
    min-height:max(672px,calc(100svh - var(--ribbon-h) - var(--nav-h)))
  }
  .hero-meadow .hero-meadow__backdrop,
  .hero-meadow .hero-meadow__fringe{
    background-position:center bottom;
    background-size:var(--hero-backdrop-size)
  }
  .hero-meadow .hero-meadow__cloud{top:45%;height:12%;background-size:200% 100%}
  .hero-meadow .hero-meadow__cloud--left{animation-name:yp-hero-cloud-left-mobile;animation-duration:220s;animation-delay:-50s}
  .hero-meadow .hero-meadow__cloud--right{animation-name:yp-hero-cloud-right-mobile;animation-duration:190s;animation-delay:-147s}
  .hero-meadow .hero-meadow__actions{display:grid;grid-template-columns:auto;justify-items:start}
  .hero-meadow .hero-meadow__distant,
  .hero-meadow .hero-meadow__flower--0,
  .hero-meadow .hero-meadow__flower--1,
  .hero-meadow .hero-meadow__flower--2,
  .hero-meadow .hero-meadow__flower--6,
  .hero-meadow .hero-meadow__flower--7,
  .hero-meadow .hero-meadow__flower--8,
  .hero-meadow .hero-meadow__flower--9,
  .hero-meadow .hero-meadow__flower--10,
  .hero-meadow .hero-meadow__flower--11,
  .hero-meadow .hero-meadow__flower--15,
  .hero-meadow .hero-meadow__grass--1,
  .hero-meadow .hero-meadow__grass--2,
  .hero-meadow .hero-meadow__grass--3,
  .hero-meadow .hero-meadow__slime,
  .hero-meadow .hero-meadow__pollen--2,
  .hero-meadow .hero-meadow__pollen--3,
  .hero-meadow .hero-meadow__petal{display:none}
  .hero-meadow .hero-meadow__flower--3{left:6%;bottom:13%;width:13px}
  .hero-meadow .hero-meadow__flower--4{left:59%;bottom:10.5%;width:11px}
  .hero-meadow .hero-meadow__flower--5{left:89%;bottom:9%;width:28px}
  .hero-meadow .hero-meadow__flower--12{left:11%;bottom:15.5%;width:12px}
  .hero-meadow .hero-meadow__flower--13{left:8%;bottom:10.8%;width:31px}
  .hero-meadow .hero-meadow__flower--14{left:49%;bottom:12%;width:25px}
  .hero-meadow .hero-meadow__pollen--0{left:5%;bottom:16%;animation-name:yp-hero-pollen-mobile;animation-duration:15s;animation-delay:-4s}
  .hero-meadow .hero-meadow__pollen--1{left:-2%;bottom:9%;animation-name:yp-hero-pollen-mobile;animation-duration:15s;animation-delay:-11s}
}

@media (min-width:600px) and (max-width:799px) and (min-height:800px){
  .hero-meadow .hero-meadow__console-stage{transform:translateY(-250px)}
}

@media (min-width:600px) and (max-width:899px){
  .hero-meadow #s1h{font-size:clamp(52px,7.5vw,58px)}
  .hero-meadow .hero-meadow__flower--1,
  .hero-meadow .hero-meadow__flower--2,
  .hero-meadow .hero-meadow__flower--10,
  .hero-meadow .hero-meadow__flower--11{display:block}
  .hero-meadow .hero-meadow__flower--1{left:2.5%;bottom:12.2%;width:37px}
  .hero-meadow .hero-meadow__flower--2{left:12%;bottom:14%;width:19px}
  .hero-meadow .hero-meadow__flower--3{left:18.5%;bottom:15.3%;width:19px}
  .hero-meadow .hero-meadow__flower--4{left:56.5%;bottom:12.7%;width:16px}
  .hero-meadow .hero-meadow__flower--5{left:78%;bottom:11.2%;width:39px}
  .hero-meadow .hero-meadow__flower--10{left:7%;bottom:9.28%;width:50px}
  .hero-meadow .hero-meadow__flower--11{left:15.5%;bottom:13.77%;width:18px}
  .hero-meadow .hero-meadow__flower--12{left:21.5%;bottom:16.31%;width:16px}
  .hero-meadow .hero-meadow__flower--13{left:20%;bottom:11.13%;width:41px}
  .hero-meadow .hero-meadow__flower--14{left:50%;bottom:12.5%;width:32px}
}

@keyframes yp-hero-cloud-left-mobile{from{transform:translateX(-55%)}to{transform:translateX(190%)}}
@keyframes yp-hero-cloud-right-mobile{from{transform:translateX(-180%)}to{transform:translateX(55%)}}
@keyframes yp-hero-pollen-mobile{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}100%{transform:translate(108vw,-40px);opacity:0}}

@media (max-width:359px){
  .hero-meadow .hero-meadow__layout{padding-inline:18px}
  .hero-meadow #s1h{font-size:40px}
}

@media (max-height:650px){
  .hero-meadow{min-height:620px}
  .hero-meadow .hero-meadow__layout{padding-top:18px}
  .hero-meadow .hero-meadow__copy{padding-top:0}
  .hero-meadow #s1h{font-size:40px}
  .hero-meadow .hero-meadow__actions{margin-top:10px}
  .hero-meadow .hero-meadow__console-stage{min-height:190px}
}

@media (prefers-reduced-motion:reduce){
  .hero-meadow .device,
  .hero-meadow .model3d-shell{animation:none !important}
}

/* Console at 1.7x (25 Sep 2026). Overrides the console size above only; the model, lighting, shadow
   style and controls are unchanged. Scale .65 -> 1.105 around the same bottom-centre origin, so it
   grows evenly left and right. The stage moves down by half the growth so the console keeps its
   visual centre; on wide or short screens the move is limited so the top stays inside the hero. */
.hero-meadow .devicewrap{transform:scale(1.105)}
.hero-meadow .hero-meadow__contact-shadow{transform:scale(1.105)}
@media (min-width:900px){
  /* Desktop console and contact shadow: 80% of the enlarged size. */
  .hero-meadow .devicewrap,
  .hero-meadow .hero-meadow__contact-shadow{transform:scale(.884)}
  .hero-meadow .hero-meadow__console-stage{transform:translateY(max(calc(136.6px - 17.35vw + min(6.42vw,92.5px)),-39px))}
}
@media (min-width:900px) and (max-height:650px){
  .hero-meadow .hero-meadow__console-stage{transform:translateY(calc(max(calc(136.6px - 17.35vw + min(6.42vw,92.5px)),-39px) + 40px))}
}
@media (max-width:899px){
  .hero-meadow .hero-meadow__console-stage{transform:translateY(calc(-180px + min(12.57vw - 6px,96px)))}
  /* Split the touch targets at the rendered D-pad centre, independent of console size. */
  .hero-meadow .model3d-hotspot-dpad,
  .hero-meadow .hero-meadow__dpad-prev{width:12%;min-width:40px;height:48px}
  .hero-meadow .model3d-hotspot-dpad{transform:translate(0,-50%)}
  .hero-meadow .hero-meadow__dpad-prev{transform:translate(-100%,-50%)}
}
@media (min-width:600px) and (max-width:799px) and (min-height:800px){
  .hero-meadow .hero-meadow__console-stage{transform:translateY(calc(-250px + min(12.57vw - 6px,96px)))}
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  .hero-meadow{min-height:460px}
  .hero-meadow .hero-meadow__layout{grid-template-columns:minmax(200px,2fr) minmax(0,3fr);grid-template-rows:1fr;align-items:start;gap:12px;padding:40px 24px 120px}
  .hero-meadow .hero-meadow__copy{padding-top:12px}
  .hero-meadow #s1h{font-size:clamp(28px,4.5vw,40px)}
  .hero-meadow .hero-meadow__console-stage{align-self:start;min-height:0;padding-bottom:0;transform:none}
  .hero-meadow .devicewrap,
  .hero-meadow .hero-meadow__contact-shadow{transform:scale(.94)}
  .hero-meadow .hero-meadow__contact-shadow{bottom:0}
}

/* Split the projected D-pad at its centre so left/right hit areas never overlap. */
.hero-meadow .model3d-hotspot-dpad{transform:translate(0,-50%)}
.hero-meadow .hero-meadow__dpad-prev{transform:translate(-100%,-50%)}