:root {
  --ink: #173f3a;
  --ink-deep: #0c2927;
  --ink-soft: #2e5f58;
  --cream: #fffaf0;
  --paper: #f8f1df;
  --gold: #f5bd59;
  --yellow: #ffe682;
  --pink: #f47f92;
  --purple: #8c72d8;
  --lilac: #ddd0f3;
  --mint: #bde7ca;
  --blue: #72c7df;
  --line: rgba(23, 63, 58, .16);
  --shadow: 0 26px 70px rgba(17, 48, 44, .18);
  --radius: 28px;
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
img { max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
.page-shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; background: #fff; color: #111; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(1220px, calc(100% - 32px));
  min-height: 68px;
  padding: 10px 12px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
  background: rgba(12, 41, 39, .83);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  box-shadow: 0 16px 50px rgba(4,25,24,.24);
  backdrop-filter: blur(16px) saturate(130%);
  transition: background .25s ease, transform .25s ease;
}
.site-header.is-scrolled { background: rgba(12, 41, 39, .96); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 .76rem/1 Georgia, serif; letter-spacing: .08em; white-space: nowrap; }
.brand img { width: 44px; height: 44px; border-radius: 12px; }
.brand span { display: grid; gap: 3px; }
.brand strong { color: var(--yellow); font-size: .9rem; letter-spacing: .1em; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { padding: 12px 12px; color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 750; text-decoration: none; border-radius: 12px; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.site-nav .nav-cta { background: var(--yellow); color: var(--ink-deep); padding-inline: 16px; }
.site-nav .nav-cta:hover { color: var(--ink-deep); background: #fff0a6; }
.nav-cta span { margin-left: 5px; padding: 2px 5px; font-size: .61rem; text-transform: uppercase; border: 1px solid currentColor; border-radius: 5px; }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 12px; border: 0; border-radius: 12px; color: white; background: rgba(255,255,255,.09); }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: currentColor; border-radius: 2px; }

.hero {
  position: relative;
  min-height: 920px;
  color: #fff;
  background: var(--ink-deep);
  isolation: isolate;
  overflow: hidden;
}
.hero-map { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-map img { width: 110%; height: 110%; margin: -3% 0 0 -5%; object-fit: cover; object-position: center; transform: translate3d(var(--px,0), var(--py,0), 0) scale(1.035); filter: saturate(1.12) contrast(1.02); }
.hero-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,34,32,.96) 0%, rgba(8,34,32,.82) 37%, rgba(8,34,32,.22) 72%, rgba(8,34,32,.47) 100%), linear-gradient(0deg, rgba(8,34,32,.78), transparent 42%); }
.hero::after { content:""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: radial-gradient(circle at 28% 30%, var(--yellow), transparent 26%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: auto, 40px 40px, 40px 40px; mask-image: linear-gradient(to bottom,#000,transparent 80%); }
.hero-grid { min-height: 920px; padding: 150px 0 100px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(390px,.95fr); align-items: center; gap: 48px; }
.hero-copy { max-width: 660px; }
.eyebrow { margin: 0 0 18px; color: var(--yellow); font-size: .74rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow span::before { content:""; width: 8px; height: 8px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 5px rgba(244,127,146,.17); }
.eyebrow.dark { color: var(--ink-soft); }
.platform-line { display:flex; align-items:center; gap:8px; }
.platform-line img { width:32px; height:25px; object-fit:contain; }
.platform-line span::before { display:none; }
.wordmark { display: block; width: min(640px, 100%); margin: 0 0 6px -12px; filter: drop-shadow(0 7px 0 rgba(6,38,30,.32)); }
.hero h1 { max-width: 640px; margin: 0 0 22px; font: 800 clamp(2.5rem,5vw,4.9rem)/.94 Georgia, serif; letter-spacing: -.045em; }
.hero-lede { max-width: 650px; margin: 0; color: rgba(255,255,255,.85); font-size: clamp(1.05rem,1.8vw,1.25rem); line-height: 1.65; }
.hero-lede strong { color: #fff2a8; }
.price-promise { width:fit-content; max-width:100%; margin-top:22px; display:flex; align-items:stretch; overflow:hidden; color:var(--ink-deep); background:var(--yellow); border:2px solid #fff3b8; border-radius:15px; box-shadow:0 13px 30px rgba(0,0,0,.24),0 5px 0 #b98135; transform:rotate(-1deg); }
.price-promise span { min-width:170px; padding:11px 16px; display:grid; gap:4px; }
.price-promise span + span { background:#fff3b8; border-left:2px solid rgba(23,63,58,.22); }
.price-promise small { font-size:.58rem; font-weight:950; letter-spacing:.13em; }
.price-promise strong { font:900 clamp(.9rem,1.35vw,1.15rem)/1.05 Georgia,serif; }
.world-choice-note { width:fit-content; max-width:100%; margin-top:21px; padding:10px 14px; display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.72); background:rgba(8,34,32,.58); border:1px solid rgba(255,255,255,.2); border-radius:12px; font-size:.76rem; backdrop-filter:blur(9px); }
.world-choice-note > span { display:flex; align-items:center; }
.world-choice-note i { width:19px; height:19px; margin-right:-5px; display:block; border:2px solid var(--ink-deep); border-radius:50%; background:var(--pink); }
.world-choice-note i:nth-child(2) { background:var(--yellow); }
.world-choice-note i:nth-child(3) { margin-right:3px; background:var(--mint); }
.world-choice-note i:nth-child(4) { margin-right:3px; background:#8c72d8; }
.world-choice-note strong { color:#fff; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.button { min-height: 54px; padding: 15px 21px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 15px; font-weight: 850; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.button-primary { color: var(--ink-deep); background: var(--yellow); box-shadow: 0 9px 0 #b98135, 0 20px 35px rgba(0,0,0,.22); }
.button-primary:hover { box-shadow: 0 6px 0 #b98135, 0 14px 28px rgba(0,0,0,.23); }
.button-store { min-height: 62px; padding: 9px 18px; color: #fff; background: #0a0a0a; border: 1px solid rgba(255,255,255,.28); }
.button-store span:not(.play-mark) { display: grid; text-align: left; line-height: 1.04; }
.button-store small { margin-bottom: 5px; color: rgba(255,255,255,.7); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.play-mark { color: #7dda78; font-size: 1.4rem; }
.store-badge-link { position:relative; min-width:190px; min-height:63px; display:inline-grid; place-items:center; text-decoration:none; transition:transform .2s ease; }
.store-badge-link:hover { transform:translateY(-3px); }
.store-badge-link:focus-visible { outline:3px solid #fff; outline-offset:4px; border-radius:10px; }
.store-badge-link img { display:block; width:190px; height:auto; }
.store-badge-link > span { position:absolute; right:-8px; top:-7px; padding:5px 8px; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); border-radius:8px; box-shadow:2px 2px 0 var(--ink); font-size:.61rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.hero-note { margin: 18px 0 0; color: #fff3ae; font-size: .76rem; font-weight:800; letter-spacing:.015em; }
.hero-safety { width:fit-content; max-width:100%; margin:13px 0 0; padding:10px 13px; display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; color:#dff9ef; background:rgba(8,34,32,.76); border:1px solid rgba(151,231,194,.42); border-radius:12px; font-size:.68rem; font-weight:750; letter-spacing:.02em; }
.hero-safety strong { color:#fff3ae; }
.hero-safety span { position:relative; padding-left:12px; }
.hero-safety span::before { content:""; position:absolute; left:0; top:50%; width:5px; height:5px; border-radius:50%; background:#97e7c2; transform:translateY(-50%); }
.hero-device { position: relative; min-height: 590px; display: grid; place-items: center; }
.tablet-label { position:absolute; z-index:7; top:42px; left:50%; margin:0; padding:8px 12px; display:flex; align-items:center; gap:9px; color:#dff9ef; background:rgba(8,34,32,.82); border:1px solid rgba(255,255,255,.28); border-radius:11px; box-shadow:0 12px 28px rgba(0,0,0,.24); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; transform:translateX(-50%) rotate(-2deg); white-space:nowrap; }
.tablet-label strong { color:#fff3ae; }
.tablet-label span { padding-left:9px; border-left:1px solid rgba(255,255,255,.25); }
.tablet { position:relative; width:min(660px,54vw); aspect-ratio:16/10; padding:14px; overflow:hidden; background:#101817; border:2px solid rgba(255,255,255,.3); border-radius:34px; box-shadow:0 50px 100px rgba(0,0,0,.42),inset 0 0 0 2px rgba(255,255,255,.08); transform:perspective(1100px) rotateY(-5deg) rotateX(var(--tilt-y,1deg)) rotateY(var(--tilt-x,-5deg)); transition:transform .18s ease; }
.tablet::before { content:""; position:absolute; inset:4px; z-index:5; border:1px solid rgba(255,255,255,.12); border-radius:29px; pointer-events:none; }
.tablet-camera { position:absolute; z-index:6; top:50%; left:4px; width:14px; height:32px; display:grid; place-items:center; background:#0b100f; border-radius:0 10px 10px 0; transform:translateY(-50%); }
.tablet-camera span { width:5px; height:5px; display:block; background:#34433f; border:1px solid #52645f; border-radius:50%; }
.tablet-screen { position:relative; height:100%; overflow:hidden; border-radius:22px; background:var(--ink); }
.tablet-screen > img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.18); }
.tablet-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(10,35,31,.03) 55%),linear-gradient(0deg,rgba(10,35,31,.78),transparent 58%); }
.map-ui { position:absolute; z-index:2; left:28px; bottom:25px; width:min(320px,52%); padding:16px; color:#fff; background:rgba(8,34,32,.72); border:1px solid rgba(255,255,255,.23); border-radius:17px; text-shadow:0 2px 8px rgba(0,0,0,.5); backdrop-filter:blur(8px); }
.map-ui span { font-size:.58rem; letter-spacing:.16em; color:#ffe083; }
.map-ui strong { display:block; margin:8px 0 15px; font:700 1.4rem/1.03 Georgia,serif; }
.map-ui button { width:100%; min-height:46px; color:var(--ink); background:var(--yellow); border:0; border-radius:12px; font-size:.68rem; font-weight:900; letter-spacing:.08em; box-shadow:0 4px 0 #b47b2e; }
.hero-monster { position:absolute; z-index:6; filter:drop-shadow(0 25px 24px rgba(0,0,0,.32)); transform:translate3d(var(--px,0),var(--py,0),0); animation:float 5s ease-in-out infinite; }
.hero-monster-orange { width:160px; right:-20px; bottom:45px; }
.hero-monster-green { width:112px; left:-18px; top:88px; animation-delay:-2.3s; }
@keyframes float { 0%,100%{margin-top:0} 50%{margin-top:-14px} }
.hero-bottom { position:absolute; z-index:3; left:-3%; right:-3%; bottom:-68px; height:140px; background:var(--cream); border-radius:50% 50% 0 0/35% 35% 0 0; }

.proof-strip { position:relative; z-index:4; margin-top:-26px; }
.proof-grid { padding:24px 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.proof-grid div { min-height:78px; padding:8px 22px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }
.proof-grid div:last-child { border:0; }
.proof-grid strong { font:800 clamp(1.35rem,2vw,2rem)/1 Georgia,serif; color:#6d55b3; }
.proof-grid span { margin-top:7px; color:#5c716e; font-size:.73rem; line-height:1.35; }

.section { padding:120px 0; }
.intro-section { padding-top:145px; }
.split-intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(350px,.8fr); gap:9vw; align-items:start; }
.section h2, .split-intro h2 { margin:0; font:800 clamp(2.5rem,5vw,5.2rem)/.97 Georgia,serif; letter-spacing:-.045em; }
.intro-copy { padding-top:32px; color:#425f5b; font-size:1.08rem; line-height:1.75; }
.intro-copy p { margin:0 0 16px; }
.journey-grid { margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.journey-card { position:relative; min-height:460px; padding:28px; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(23,63,58,.13); border-radius:var(--radius); box-shadow:0 16px 50px rgba(29,63,57,.11); }
.journey-card::after { content:""; position:absolute; inset:auto -80px -110px auto; width:260px; height:260px; border:1px solid rgba(23,63,58,.13); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.09),0 0 0 70px rgba(255,255,255,.08); }
.journey-card .step { align-self:flex-start; padding:6px 9px; color:#fff; background:var(--ink); border-radius:7px; font-size:.7rem; font-weight:900; letter-spacing:.12em; }
.journey-card img { position:relative; z-index:1; width:220px; height:220px; margin:4px auto 0; object-fit:contain; filter:drop-shadow(0 16px 16px rgba(38,55,51,.15)); transition:transform .3s ease; }
.journey-card:hover img { transform:scale(1.04) rotate(-2deg); }
.journey-card h3 { position:relative; z-index:1; margin:4px 0 10px; font:800 1.75rem/1.05 Georgia,serif; }
.journey-card p { position:relative; z-index:1; margin:0; color:#385a54; line-height:1.6; }
.card-lilac { background:var(--lilac); }
.card-yellow { background:#f9d27f; }
.card-mint { background:var(--mint); }

.video-section { position:relative; color:#fff; background:var(--ink-deep); overflow:hidden; }
.video-section::before { content:""; position:absolute; inset:0; opacity:.22; background:radial-gradient(circle at 8% 90%,#9d71d8,transparent 31%),radial-gradient(circle at 90% 5%,#f7c866,transparent 24%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:auto,auto,46px 46px,46px 46px; }
.section-head { position:relative; display:flex; align-items:end; justify-content:space-between; gap:50px; }
.section-head > p { max-width:500px; margin:0; color:#4e6d68; font-size:1.02rem; line-height:1.7; }
.section-head.light > p { color:rgba(255,255,255,.68); }
.video-grid { position:relative; margin-top:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video-card { position:relative; aspect-ratio:3/4; padding:0; overflow:hidden; color:#fff; text-align:left; background:#173f3a; border:1px solid rgba(255,255,255,.2); border-radius:24px; cursor:pointer; box-shadow:0 24px 60px rgba(0,0,0,.22); }
.video-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.video-card:hover > img { transform:scale(1.055); }
.video-shade { position:absolute; inset:0; background:linear-gradient(transparent 24%,rgba(7,29,28,.18) 45%,rgba(7,29,28,.96) 100%); }
.video-number { position:absolute; top:18px; left:18px; padding:6px 9px; color:var(--ink); background:var(--yellow); border-radius:8px; font-size:.7rem; font-weight:900; }
.video-play { position:absolute; top:50%; left:50%; width:72px; height:72px; display:grid; place-items:center; transform:translate(-50%,-56%); color:var(--ink); background:rgba(255,255,255,.92); border-radius:50%; box-shadow:0 16px 40px rgba(0,0,0,.28); transition:transform .2s ease,background .2s ease; }
.video-card:hover .video-play { transform:translate(-50%,-56%) scale(1.08); background:var(--yellow); }
.video-text { position:absolute; z-index:2; left:25px; right:25px; bottom:25px; display:grid; gap:8px; }
.video-text small { color:var(--yellow); font-size:.67rem; text-transform:uppercase; letter-spacing:.14em; }
.video-text strong { font:800 1.65rem/1.05 Georgia,serif; }
.video-text em { color:rgba(255,255,255,.68); font-size:.81rem; font-style:normal; line-height:1.5; }
.production-note { position:relative; margin-top:20px; color:rgba(255,255,255,.57); font-size:.75rem; }
.production-note span { color:var(--yellow); font-weight:850; text-transform:uppercase; letter-spacing:.1em; }

.worlds-section { background:var(--paper); }
.world-browser { margin-top:60px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr); min-height:660px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); }
.world-visual { position:relative; min-height:650px; overflow:hidden; background:#87c7f5; }
.world-visual > img { width:100%; height:100%; object-fit:cover; transition:opacity .22s ease,transform .55s cubic-bezier(.22,1,.36,1); }
.world-visual.is-changing > img { opacity:.25; transform:scale(1.025); }
.world-caption { position:absolute; left:28px; right:28px; bottom:28px; max-width:540px; padding:24px 25px; color:#fff; background:rgba(12,41,39,.88); border:1px solid rgba(255,255,255,.22); border-radius:20px; backdrop-filter:blur(12px); }
.world-caption span { color:var(--yellow); font-size:.65rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.world-caption strong { display:block; margin:7px 0 6px; font:800 2rem/1 Georgia,serif; }
.world-caption p { margin:0; color:rgba(255,255,255,.77); line-height:1.55; }
.world-list { padding:17px; display:grid; align-content:center; gap:8px; background:#fffdf7; }
.world-list button { width:100%; padding:13px 14px; display:grid; grid-template-columns:52px 1fr; column-gap:13px; color:var(--ink); text-align:left; background:transparent; border:1px solid transparent; border-radius:15px; cursor:pointer; }
.world-list button > span { grid-row:1/3; width:48px; height:48px; display:grid; place-items:center; color:#fff; background:var(--purple); border-radius:14px; font-size:.74rem; font-weight:900; }
.world-list button:nth-child(2) > span { background:#4d996b; }
.world-list button:nth-child(3) > span { background:#4474a9; }
.world-list button:nth-child(4) > span { background:#c5749c; }
.world-list button:nth-child(5) > span { background:#4b8fa5; }
.world-list button:nth-child(6) > span { background:#8a6ca6; }
.world-list button strong { align-self:end; font:750 1rem/1.1 Georgia,serif; }
.world-list button small { margin-top:4px; color:#69807c; font-size:.69rem; }
.world-list button:hover { background:#f6f0e3; }
.world-list button.is-active { background:#edf4df; border-color:#a8bd92; box-shadow:inset 4px 0 #52775d; }

.stages-section { color:#fff; background:#7259b2; }
.stages-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(430px,1.15fr); gap:8vw; align-items:center; }
.stages-copy p:not(.eyebrow) { color:rgba(255,255,255,.8); font-size:1.05rem; line-height:1.72; }
.stages-copy .stage-note { padding:15px 17px; color:rgba(255,255,255,.72); background:rgba(30,22,63,.24); border-left:3px solid var(--yellow); border-radius:0 10px 10px 0; font-size:.78rem; }
.stage-road { position:relative; display:grid; gap:14px; }
.stage-road::before { content:""; position:absolute; left:39px; top:48px; bottom:48px; width:3px; background:rgba(255,255,255,.25); }
.stage-road article { position:relative; z-index:1; padding:20px; display:grid; grid-template-columns:78px 1fr; gap:18px; align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:20px; }
.stage-road article > span { width:78px; height:78px; display:grid; place-items:center; color:var(--ink); background:var(--mint); border:4px solid #fff; border-radius:50%; font:900 1.2rem/1 Georgia,serif; }
.stage-road article:nth-child(2) > span { background:var(--yellow); }
.stage-road article:nth-child(3) > span { background:var(--pink); }
.stage-road article.current { background:#fff; color:var(--ink); transform:scale(1.035); box-shadow:0 20px 50px rgba(31,22,70,.25); }
.stage-road strong { font:750 1.12rem/1.15 Georgia,serif; }
.stage-road p { margin:6px 0 0; color:rgba(255,255,255,.7); font-size:.78rem; line-height:1.5; }
.stage-road .current p { color:#5a716e; }

.benefit-section { background:#fffdf7; }
.benefits-grid { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.benefits-grid article { min-height:255px; padding:28px; border:1px solid var(--line); border-radius:22px; background:#fff; transition:transform .22s ease,box-shadow .22s ease; }
.benefits-grid article:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(23,63,58,.1); }
.benefits-grid article > span { width:48px; height:48px; display:grid; place-items:center; color:#fff; background:var(--purple); border-radius:14px; font-size:1.35rem; font-weight:900; }
.benefits-grid article:nth-child(2) > span,.benefits-grid article:nth-child(6) > span { background:#e4868b; }
.benefits-grid article:nth-child(3) > span,.benefits-grid article:nth-child(5) > span { color:var(--ink); background:var(--yellow); }
.benefits-grid article:nth-child(4) > span { background:#63a17a; }
.benefits-grid h3 { margin:22px 0 10px; font:750 1.35rem/1.1 Georgia,serif; }
.benefits-grid p { margin:0; color:#5d7470; font-size:.86rem; line-height:1.65; }

.parent-section { position:relative; overflow:hidden; color:#fff; background:#173f3a; }
.parent-section::after { content:""; position:absolute; right:-12vw; top:-14vw; width:40vw; height:40vw; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.025); }
.parent-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(410px,.75fr); gap:8vw; align-items:center; }
.parent-copy > p:not(.eyebrow) { color:rgba(255,255,255,.75); font-size:1.04rem; line-height:1.7; }
.family-safety { margin:27px 0 30px; padding:24px; color:var(--ink); background:#fff6bf; border:1px solid rgba(255,255,255,.5); border-radius:20px; box-shadow:0 18px 42px rgba(0,0,0,.18); }
.family-safety .eyebrow { margin-bottom:9px; color:#7259b2; }
.family-safety h3 { margin:0 0 14px; font:800 clamp(1.45rem,2.4vw,2.15rem)/1.05 Georgia,serif; letter-spacing:-.025em; }
.family-safety p:not(.eyebrow) { margin:0 0 11px; color:#49615e; font-size:.92rem; line-height:1.62; }
.family-safety p:last-child { margin-bottom:0; }
.family-safety strong { color:var(--ink-deep); }
.parent-copy ul { padding:0; margin:28px 0; display:grid; gap:13px; list-style:none; }
.parent-copy li { position:relative; padding-left:31px; color:rgba(255,255,255,.82); line-height:1.45; }
.parent-copy li::before { content:"✓"; position:absolute; left:0; top:0; width:21px; height:21px; display:grid; place-items:center; color:var(--ink); background:var(--yellow); border-radius:50%; font-size:.7rem; font-weight:900; }
.text-link { color:var(--yellow); font-weight:800; text-underline-offset:5px; }
.parent-device { position:relative; min-height:680px; display:grid; place-items:center; }
.parent-screen { width:min(410px,88vw); min-height:620px; padding:32px 28px; color:var(--ink); background:#fffaf0; border:10px solid #0b1f1e; border-radius:40px; box-shadow:0 40px 80px rgba(0,0,0,.35); transform:rotate(3deg); }
.parent-top { display:flex; align-items:center; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line); font-size:.66rem; letter-spacing:.08em; }
.parent-top img { width:40px; height:40px; border-radius:11px; }
.parent-top span { display:grid; }
.parent-top strong { color:#7259b2; font-size:.8rem; }
.parent-label { margin:24px 0 7px; color:#7a6592; font-size:.62rem; font-weight:850; letter-spacing:.16em; }
.parent-screen h3 { margin:0; font:800 1.95rem/1.05 Georgia,serif; }
.progress-ring { width:168px; height:168px; margin:24px auto; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#765eb7 0 72%,#e6dfd3 72% 100%); box-shadow:inset 0 0 0 18px #fffaf0; }
.progress-ring span { width:118px; height:118px; display:grid; place-content:center; text-align:center; background:#fff; border-radius:50%; box-shadow:0 6px 18px rgba(25,53,48,.08); }
.progress-ring strong { font:800 1.7rem/1 Georgia,serif; }
.progress-ring small { margin-top:4px; color:#6a7b78; font-size:.58rem; }
.progress-row { margin:16px 0; display:grid; grid-template-columns:1fr 42px; gap:7px 10px; align-items:center; font-size:.72rem; }
.progress-row b { grid-column:1/2; height:8px; overflow:hidden; background:#e0dbce; border-radius:8px; }
.progress-row b::after { content:""; display:block; width:var(--progress); height:100%; background:#6c55ae; border-radius:inherit; }
.progress-row > strong { grid-column:2; grid-row:1/3; color:#6c55ae; font-size:.76rem; }
.parent-message { margin-top:24px; padding:12px; display:flex; align-items:center; gap:12px; background:#efe7f7; border-radius:14px; }
.parent-message img { width:52px; height:52px; object-fit:contain; }
.parent-message span { display:grid; gap:4px; }
.parent-message strong { font:700 .75rem/1.2 Georgia,serif; }
.parent-message small { color:#687b78; font-size:.6rem; line-height:1.4; }
.parent-friend { position:absolute; z-index:2; width:170px; right:-14px; bottom:15px; filter:drop-shadow(0 24px 20px rgba(0,0,0,.25)); animation:float 5.4s ease-in-out infinite; }

.trust-section { background:#f5eedc; }
.trust-grid { display:grid; grid-template-columns:minmax(0,.75fr) minmax(400px,1fr); gap:9vw; }
.trust-points { display:grid; gap:0; }
.trust-points p { margin:0; padding:22px 0; color:#4e6965; line-height:1.65; border-bottom:1px solid rgba(23,63,58,.16); }
.trust-points strong { color:var(--ink); }
.trust-points .legal-note { padding:16px 18px; margin-top:20px; background:#fff8e8; border:1px solid #dfd2b9; border-radius:12px; font-size:.76rem; }

.download-section { position:relative; min-height:590px; display:grid; align-items:center; color:#fff; overflow:hidden; background:var(--ink-deep); }
.download-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.download-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,31,29,.96),rgba(7,31,29,.63) 55%,rgba(7,31,29,.48)); }
.download-inner { position:relative; z-index:1; padding-block:90px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:center; }
.download-inner h2 { font-size:clamp(3rem,7vw,6.5rem); }
.download-inner p:not(.eyebrow) { max-width:650px; color:rgba(255,255,255,.78); line-height:1.7; }
.download-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:530px; }
.button-store.large { min-height:70px; }
.store-badge-link.large { min-height:76px; padding:7px 16px; background:#0a0a0a; border:1px solid rgba(255,255,255,.24); border-radius:15px; }
.store-badge-link.large img { width:175px; }
.app-store-badge { min-height:76px; padding:12px 20px; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; background:#050505; border:1px solid rgba(255,255,255,.24); border-radius:15px; }
.app-store-badge > span:last-child { display:grid; text-align:left; font-size:1.07rem; font-weight:750; line-height:1.05; }
.app-store-badge small { margin-bottom:5px; color:rgba(255,255,255,.7); font-size:.59rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.apple-mark { width:30px; height:34px; display:grid; place-items:center; color:#000; background:#fff; border-radius:48% 48% 50% 50% / 54% 54% 45% 45%; font-size:0; transform:rotate(-5deg); }
.apple-mark::before { content:""; width:11px; height:7px; margin:-8px 0 0 11px; display:block; background:#fff; border-radius:100% 0; transform:rotate(-35deg); }
.updates-form { grid-column:1/-1; padding:18px; color:var(--ink); background:#fff; border:3px solid #7259b2; border-radius:18px; box-shadow:8px 8px 0 rgba(239,189,96,.9); overflow:hidden; }
.updates-form h3 { margin:0 0 10px; font:800 1.05rem/1.2 Georgia,serif; }
.updates-form iframe { display:block; width:100%; min-height:360px; border:0; background:#fff; }
.button-ghost { color:#fff; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.08); }

.site-footer { padding:55px 0 28px; color:rgba(255,255,255,.75); background:#081f1d; }
.footer-grid { display:grid; grid-template-columns:1fr 1.2fr .8fr; gap:35px; align-items:start; }
.footer-brand { color:#fff; }
.footer-grid > p { margin:8px 0 0; max-width:390px; font-size:.8rem; line-height:1.6; }
.footer-grid > div { display:grid; gap:10px; font-size:.78rem; }
.footer-grid > div a { color:rgba(255,255,255,.68); }
.copyright { grid-column:1/-1; padding-top:24px; border-top:1px solid rgba(255,255,255,.13); font-size:.67rem !important; }

.video-dialog { width:min(820px,calc(100% - 30px)); max-height:min(880px,calc(100dvh - 30px)); padding:0; color:var(--ink); background:#fffaf0; border:0; border-radius:26px; box-shadow:0 35px 100px rgba(0,0,0,.42); overflow:auto; }
.video-dialog::backdrop { background:rgba(5,22,21,.78); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; z-index:2; right:16px; top:16px; width:44px; height:44px; color:#fff; background:rgba(7,31,29,.8); border:1px solid rgba(255,255,255,.3); border-radius:50%; font-size:1.5rem; cursor:pointer; }
.dialog-poster { min-height:330px; background-position:center; background-size:cover; }
.dialog-content { padding:34px; }
.dialog-content h2 { margin:0 0 14px; font:800 2.4rem/1 Georgia,serif; }
.dialog-content > p:not(.eyebrow) { color:#516d68; line-height:1.65; }
.dialog-content ol { margin:24px 0; padding:0; display:grid; gap:10px; list-style:none; counter-reset:chapters; }
.dialog-content li { counter-increment:chapters; padding:13px 15px; display:grid; grid-template-columns:34px 1fr; gap:8px; align-items:center; background:#efe9dc; border-radius:11px; }
.dialog-content li::before { content:counter(chapters,decimal-leading-zero); color:#7058b0; font-size:.68rem; font-weight:900; }
.dialog-note { padding:13px 15px; background:#fff3bd; border-left:3px solid #c99834; border-radius:0 9px 9px 0; font-size:.75rem; }

@media (max-width: 980px) {
  :root { --shell: min(100% - 34px, 900px); }
  .site-header { top:10px; width:calc(100% - 20px); }
  .nav-toggle { display:block; }
  .site-nav { position:absolute; top:74px; left:0; right:0; padding:12px; display:none; background:rgba(12,41,39,.98); border:1px solid rgba(255,255,255,.18); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.28); }
  .site-nav.is-open { display:grid; }
  .site-nav a { padding:14px; }
  .hero-grid { grid-template-columns:1fr 430px; gap:15px; }
  .hero-device { transform:translateX(25px) scale(.9); }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
  .proof-grid div:nth-child(2) { border-right:0; }
  .proof-grid div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .journey-grid, .video-grid, .benefits-grid { grid-template-columns:repeat(2,1fr); }
  .journey-card:last-child, .video-card:last-child { grid-column:1/-1; aspect-ratio:16/8; min-height:370px; }
  .journey-card:last-child { min-height:390px; }
  .world-browser { grid-template-columns:1fr; }
  .world-visual { min-height:560px; }
  .world-list { grid-template-columns:repeat(2,1fr); }
  .stages-grid, .parent-grid { grid-template-columns:1fr; }
  .stages-copy { max-width:760px; }
  .parent-copy { max-width:760px; }
  .parent-device { min-height:680px; }
  .download-inner { grid-template-columns:1fr; }
  .download-actions { min-width:0; grid-template-columns:repeat(2,minmax(220px,300px)); }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 28px); --radius:22px; }
  .section { padding:82px 0; }
  .brand span { display:none; }
  .hero { min-height:auto; }
  .hero-grid { min-height:auto; padding:120px 0 120px; grid-template-columns:1fr; }
  .hero-copy { position:relative; z-index:4; }
  .hero-map img { object-position:62% center; }
  .hero-wash { background:linear-gradient(0deg,rgba(8,34,32,.98) 0%,rgba(8,34,32,.9) 50%,rgba(8,34,32,.35) 100%); }
  .wordmark { width:100%; margin-left:0; }
  .hero h1 { font-size:clamp(2.6rem,13vw,4.25rem); }
  .hero-lede { font-size:1rem; }
  .price-promise { width:100%; display:grid; transform:rotate(-.5deg); }
  .price-promise span { min-width:0; padding:11px 13px; }
  .price-promise span + span { border-left:0; border-top:2px solid rgba(23,63,58,.22); }
  .world-choice-note { align-items:flex-start; flex-wrap:wrap; font-size:.72rem; }
  .hero-safety { font-size:.64rem; }
  .hero-device { margin-top:28px; min-height:420px; transform:none; }
  .tablet { width:min(650px,94vw); }
  .tablet-label { top:7px; font-size:.58rem; }
  .map-ui { left:16px; right:16px; bottom:16px; width:auto; padding:13px; }
  .map-ui strong { margin:5px 0 10px; font-size:1.1rem; }
  .map-ui button { min-height:40px; }
  .hero-monster-orange { width:125px; right:-5px; bottom:18px; }
  .hero-monster-green { width:90px; left:-7px; top:65px; }
  .proof-strip { margin-top:-40px; }
  .proof-grid { padding:12px; }
  .proof-grid div { min-height:96px; padding:12px; }
  .proof-grid strong { font-size:1.55rem; }
  .proof-grid span { font-size:.65rem; }
  .intro-section { padding-top:115px; }
  .split-intro, .trust-grid { grid-template-columns:1fr; gap:25px; }
  .section h2, .split-intro h2 { font-size:clamp(2.45rem,12vw,4rem); }
  .intro-copy { padding-top:0; font-size:.98rem; }
  .journey-grid, .video-grid, .benefits-grid { grid-template-columns:1fr; }
  .journey-card, .journey-card:last-child { grid-column:auto; min-height:430px; aspect-ratio:auto; }
  .video-card, .video-card:last-child { grid-column:auto; min-height:450px; aspect-ratio:3/4; }
  .section-head { display:grid; gap:22px; }
  .section-head > p { font-size:.92rem; }
  .world-browser { min-height:0; }
  .world-visual { min-height:530px; }
  .world-caption { left:14px; right:14px; bottom:14px; padding:19px; }
  .world-caption strong { font-size:1.6rem; }
  .world-caption p { font-size:.78rem; }
  .world-list { grid-template-columns:1fr; padding:12px; }
  .world-list button { padding:10px 12px; }
  .stages-grid { gap:45px; }
  .stage-road article { grid-template-columns:64px 1fr; padding:15px; }
  .stage-road article > span { width:64px; height:64px; }
  .stage-road::before { left:31px; }
  .stage-road article.current { transform:none; }
  .benefits-grid article { min-height:auto; }
  .parent-grid { gap:30px; }
  .parent-device { min-height:610px; }
  .parent-screen { min-height:570px; padding:25px 20px; transform:none; }
  .parent-friend { width:135px; right:-3px; }
  .download-inner { padding-block:80px; gap:34px; }
  .download-actions { grid-template-columns:1fr; min-width:0; }
  .updates-form { grid-column:1; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > div { grid-template-columns:repeat(3,auto); justify-content:start; gap:15px; }
  .copyright { grid-column:1; }
  .dialog-poster { min-height:220px; }
  .dialog-content { padding:27px 20px; }
  .dialog-content h2 { font-size:2rem; }
}

@media (max-width: 430px) {
  .hero-actions { display:grid; }
  .hero-actions .button { width:100%; }
  .hero-device { min-height:360px; }
  .hero-monster-green { left:-20px; }
  .footer-grid > div { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-parallax] { transform:none !important; }
}

/* Free starter and family unlock — based on the current release plan. */
.access-section {
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(140,114,216,.45), transparent 28%),
    radial-gradient(circle at 8% 88%, rgba(114,199,223,.24), transparent 25%),
    var(--ink-deep);
  overflow: hidden;
}
.access-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(130deg, #000, transparent 72%);
}
.access-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
  gap: clamp(40px,6vw,88px);
  align-items: center;
}
.access-copy h2 { max-width: 850px; }
.access-copy > p:not(.eyebrow):not(.access-note) { max-width: 760px; color: rgba(255,255,255,.78); font-size: 1.05rem; line-height: 1.7; }
.access-offers { margin-top: 38px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.access-offers article { padding: 26px; color: var(--ink); background: rgba(255,250,240,.97); border-radius: 22px; box-shadow: 0 20px 55px rgba(0,0,0,.2); }
.access-offers article.full-access { position:relative; background:#fff1a9; border:3px solid var(--pink); box-shadow:0 22px 60px rgba(0,0,0,.26),0 0 0 5px rgba(244,127,146,.2); }
.access-offers article > span { display: inline-block; padding: 6px 9px; color: #fff; background: #7259b2; border-radius: 8px; font-size: .65rem; font-weight: 900; letter-spacing: .11em; }
.access-offers .full-access > span { color: var(--ink-deep); background: var(--pink); }
.access-offers h3 { margin: 14px 0 17px; font: 800 1.45rem/1.05 Georgia,serif; }
.access-offers ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.access-offers li { position: relative; padding-left: 22px; color: #506b67; font-size: .84rem; line-height: 1.45; }
.access-offers li::before { content: "✓"; position: absolute; left: 0; color: #7259b2; font-weight: 900; }
.access-note { margin: 20px 0 0; padding: 15px 17px; color: #fff3ae; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17); border-radius: 14px; font-weight: 750; line-height: 1.55; }
.access-note strong { color:#fff; }
.rewards-panel { padding: 30px; color: var(--ink); background: rgba(255,250,240,.97); border-radius: 28px; box-shadow: var(--shadow); }
.rewards-panel .eyebrow { color: #7259b2; }
.rewards-panel h3 { margin: 0 0 16px; font: 800 clamp(2rem,3.5vw,3.4rem)/.98 Georgia,serif; letter-spacing: -.035em; }
.rewards-panel > p:not(.eyebrow) { margin: 0; color: #55706b; line-height: 1.65; }
.rewards-panel > img { width: 100%; margin: 24px 0 17px; display: block; border-radius: 19px; background: #e8ddf6; }
.rewards-panel > div { padding-top: 17px; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 10px; align-items: center; border-top: 1px solid var(--line); }
.rewards-panel > div strong { color: #7259b2; font: 800 1.7rem/1 Georgia,serif; }
.rewards-panel > div span { color: #607772; font-size: .72rem; line-height: 1.25; }

@media (max-width: 980px) {
  .access-grid { grid-template-columns: 1fr; }
  .rewards-panel { max-width: 740px; }
}

@media (max-width: 720px) {
  .access-offers { grid-template-columns: 1fr; }
  .access-offers article { padding: 22px; }
  .rewards-panel { padding: 22px; }
  .rewards-panel > div { grid-template-columns: auto 1fr; }
}

/* The family behind the adventure. */
.story-section { background: #eee5f8; border-block: 1px solid var(--line); }
.story-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(28px,6vw,90px); align-items: start; }
.story-heading h2 { max-width: 570px; }
.story-caption { max-width: 440px; color: var(--ink-soft); line-height: 1.65; }
.story-copy { padding: clamp(24px,4vw,42px); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.story-copy p { margin: 0 0 20px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.8; }
.story-copy .story-signoff { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 800; color: var(--ink); }
#our-story { scroll-margin-top: 110px; }
@media (max-width: 980px) { .story-grid { grid-template-columns: 1fr; } }

/* Four selectable visual worlds, including the new Punk line-up. */
.looks-section {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(244,127,146,.22), transparent 27%),
    radial-gradient(circle at 5% 90%, rgba(114,199,223,.24), transparent 25%),
    #f4eddf;
  overflow: hidden;
}
.looks-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(23,63,58,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,63,58,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg,#000,transparent 78%);
}
.looks-section .section-head,
.looks-grid,
.punk-rewards { position: relative; z-index: 1; }
.looks-grid {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.look-card {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  color: #fff;
  background: var(--ink-deep);
  border: 1px solid rgba(23,63,58,.16);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(15,48,44,.18);
  isolation: isolate;
}
.look-card > img:first-child {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.look-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg,rgba(6,25,23,.94) 0%,rgba(6,25,23,.08) 67%);
}
.look-card:hover > img:first-child { transform: scale(1.04); filter: saturate(1.08); }
.look-card > div {
  position: absolute;
  z-index: 3;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 13px;
  align-items: end;
}
.look-card > div > span {
  grid-row: 1/3;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  color: var(--ink-deep);
  background: var(--yellow);
  border-radius: 13px;
  font-size: .7rem;
  font-weight: 900;
}
.look-card h3 { margin: 0; font: 800 2.2rem/1 Georgia,serif; }
.look-card p { margin: 7px 0 0; color: rgba(255,255,255,.78); font-size: .8rem; line-height: 1.5; }
.look-punk { min-height: 590px; border-color: rgba(244,127,146,.64); box-shadow: 0 28px 74px rgba(69,32,82,.26); }
.look-punk::after { background: linear-gradient(0deg,rgba(20,14,31,.97) 0%,rgba(20,14,31,.22) 70%); }
.look-punk-cast {
  position: absolute;
  z-index: 1;
  right: -3%;
  bottom: 110px;
  width: 74%;
  max-height: 430px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.42));
}
.look-new {
  position: absolute;
  z-index: 4;
  top: 20px;
  right: 20px;
  padding: 8px 11px;
  color: #180f24;
  background: #ffdf61;
  border: 2px solid #180f24;
  border-radius: 9px;
  box-shadow: 3px 3px 0 #f47f92;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.punk-rewards {
  margin-top: 20px;
  padding: clamp(26px,4vw,48px);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.72fr);
  gap: clamp(28px,6vw,74px);
  align-items: center;
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.punk-rewards h3 { margin: 0 0 16px; font: 800 clamp(2rem,4vw,4rem)/.98 Georgia,serif; letter-spacing: -.035em; }
.punk-rewards div > p:last-child { max-width: 650px; margin: 0; color: var(--ink-soft); line-height: 1.7; }
.punk-rewards > img { width: 100%; max-height: 400px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(20,14,31,.16)); }

@media (max-width: 980px) {
  .look-card { min-height: 420px; }
  .look-punk { min-height: 520px; }
  .punk-rewards { grid-template-columns: 1fr; }
  .punk-rewards > img { max-width: 620px; margin-inline: auto; }
}

@media (max-width: 720px) {
  .looks-grid { grid-template-columns: 1fr; }
  .look-card { min-height: 430px; }
  .look-punk { min-height: 570px; }
  .look-punk-cast { width: 96%; right: -13%; bottom: 108px; }
  .punk-rewards { padding: 24px; }
}

/* One-time family launch price, 18 October 2026. */

/* Cute / Grumpy choices: use the original app artwork, 18 October 2026. */
.monster-choice-section{background:#f4eee5}
.monster-choice-section .section-head>p{max-width:580px}
.monster-mood-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.monster-mood-card{padding:clamp(22px,3vw,36px);border:1px solid rgba(23,63,58,.15);border-radius:26px;background:#e1f2e8;box-shadow:0 18px 40px rgba(23,63,58,.08)}
.monster-mood-card.mood-grumpy{background:#e9e0f5}
.monster-mood-tag{display:inline-block;color:#244b40;font-size:.7rem;font-weight:900;letter-spacing:.08em;line-height:1.5}
.monster-mood-card h3{margin:12px 0 18px;font:800 clamp(1.5rem,2.8vw,2.2rem)/1.1 Georgia,serif;color:var(--ink-deep)}
.monster-mood-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 20px;max-width:480px}
.monster-mood-card p{margin:0;color:var(--ink-soft);line-height:1.7}
.monster-switch-note{margin-top:24px;padding:clamp(24px,4vw,40px);border:1px solid #dfc663;border-radius:22px;background:#fff1ad}
.monster-switch-note>div{display:flex;align-items:center;gap:16px}
.monster-switch-note>div>span{flex:0 0 auto;font-size:2.3rem;line-height:1}
.monster-switch-note h3{margin:0;font:800 clamp(1.45rem,3vw,2rem)/1.15 Georgia,serif;color:var(--ink-deep)}
.monster-switch-note p{max-width:950px;margin:15px 0 0;line-height:1.7;color:#37594f}
.monster-switch-note .monster-choice-extra{font-size:.85rem}
@media(max-width:720px){.monster-mood-grid{grid-template-columns:1fr;gap:18px}.monster-switch-note>div{align-items:flex-start;gap:12px}}