:root{
  --pink:#f064a1;
  --pink-strong:#ef4f95;
  --lavender:#aaa0dc;
  --lavender-deep:#8d7ad0;
  --peach:#f6b68c;
  --navy:#263656;
  --navy-dark:#16233f;
  --white:#fffdfd;
  --soft:#fff8fc;
  --line:rgba(38,54,86,.12);
  --shadow:0 24px 80px rgba(55,45,88,.12);
  --radius-xl:42px;
  --radius-lg:30px;
  --radius-md:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--navy);background:var(--white);font-family:'Noto Sans JP',system-ui,sans-serif;line-height:1.8;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
.section-shell{width:min(1180px,calc(100% - 56px));margin-inline:auto}
.sp-only{display:none}
.page-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;background:transparent}.page-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--lavender),var(--peach))}
.site-header{height:88px;display:grid;grid-template-columns:180px 1fr 180px;align-items:center;gap:24px;padding:0 38px;position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,253,253,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(38,54,86,.06);transition:.3s}
.site-header.scrolled{height:72px;box-shadow:0 10px 38px rgba(22,35,63,.06)}
.brand img{width:132px;height:auto}
.desktop-nav{justify-self:center;display:flex;gap:34px;font:600 12px/1 'Poppins',sans-serif;letter-spacing:.12em}.desktop-nav a{position:relative;padding:10px 0}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;border-radius:2px;background:var(--pink);transition:.25s}.desktop-nav a:hover:after{right:0}
.header-download{justify-self:end;display:flex;align-items:center;justify-content:center;gap:16px;width:168px;height:46px;border-radius:999px;background:var(--navy);color:#fff;font:600 11px/1 'Poppins';letter-spacing:.12em;box-shadow:0 8px 25px rgba(38,54,86,.16)}.header-download i{font-style:normal;font-size:16px}
.menu-button,.mobile-menu{display:none}
.hero{min-height:100vh;padding-top:136px;padding-bottom:70px;display:grid;grid-template-columns:.9fr 1.15fr;align-items:center;gap:54px;position:relative}
.hero:before{content:"";position:absolute;z-index:-3;inset:80px -40vw -60px -40vw;background:radial-gradient(circle at 35% 20%,rgba(240,100,161,.14),transparent 28%),radial-gradient(circle at 75% 32%,rgba(170,160,220,.22),transparent 30%),radial-gradient(circle at 65% 80%,rgba(246,182,140,.24),transparent 32%),linear-gradient(180deg,#fff 0%,#fffafd 55%,#fff 100%)}
.hero-ornament{position:absolute;z-index:-1;border-radius:999px;filter:blur(.2px);opacity:.7}.ornament-a{width:240px;height:240px;left:-150px;top:220px;background:linear-gradient(145deg,rgba(240,100,161,.2),rgba(170,160,220,.08))}.ornament-b{width:140px;height:140px;right:-70px;bottom:90px;background:rgba(246,182,140,.22)}
.hero-copy{padding-bottom:18px}.hero-logo{width:250px;margin-bottom:34px}.eyebrow{font:600 11px/1 'Poppins';letter-spacing:.28em;color:var(--lavender-deep);margin:0 0 18px}.hero h1{font-size:clamp(46px,5vw,78px);line-height:1.18;letter-spacing:.04em;margin:0;font-weight:800}.hero h1 span{color:var(--pink-strong)}.hero-subcopy{font-size:17px;font-weight:600;letter-spacing:.06em;margin:28px 0 30px}
.store-row{display:flex;gap:12px;flex-wrap:wrap}.store-button{height:58px;min-width:178px;background:var(--navy-dark);color:#fff;border-radius:12px;padding:8px 15px;display:flex;align-items:center;gap:11px;font:600 15px/1.15 'Poppins';box-shadow:0 10px 25px rgba(22,35,63,.13);transition:transform .2s}.store-button:hover{transform:translateY(-2px)}.store-button small{font-size:8px;font-weight:500;display:block;letter-spacing:.03em;margin-bottom:2px}.store-icon{display:grid;place-items:center;width:26px;height:26px;font-size:18px}.store-icon.play{font-size:16px}
.asset-slot{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.7);background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.28));box-shadow:var(--shadow);isolation:isolate}.hero-visual{height:min(610px,68vh);min-height:520px;border-radius:48% 42% 38% 45% / 42% 50% 40% 48%;background:linear-gradient(145deg,#fff4f9 0%,#f2edff 48%,#fff1e8 100%);display:grid;place-items:center}.hero-visual:after{content:"";position:absolute;inset:9%;border:1px solid rgba(255,255,255,.75);border-radius:inherit;z-index:-1}.room-shape{position:absolute;border-radius:36px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.room-shape-a{width:58%;height:36%;bottom:13%;left:10%;transform:rotate(-4deg)}.room-shape-b{width:40%;height:55%;right:9%;top:12%;transform:rotate(5deg)}
.asset-slot-label{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;z-index:2;padding:24px;color:var(--navy)}.asset-slot-label small{font:600 9px/1 'Poppins';letter-spacing:.24em;color:var(--pink)}.asset-slot-label strong{font:600 16px/1.4 'Poppins';letter-spacing:.08em}.asset-slot-label span{font-size:11px;opacity:.58}.sparkle{position:absolute;color:#fff;text-shadow:0 4px 15px rgba(170,160,220,.35)}.s1{font-size:48px;right:12%;top:10%}.s2{font-size:30px;left:11%;top:20%}.s3{font-size:38px;right:17%;bottom:15%;color:rgba(240,100,161,.65)}
.scroll-cue{position:absolute;left:0;bottom:30px;display:flex;align-items:center;gap:12px;font:600 9px/1 'Poppins';letter-spacing:.22em}.scroll-cue i{display:block;width:56px;height:1px;background:var(--navy);position:relative}.scroll-cue i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg)}
.section-kicker{font:600 11px/1 'Poppins';letter-spacing:.18em;display:flex;align-items:center;gap:12px;margin-bottom:34px}.section-kicker span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;letter-spacing:0}.section-kicker.light{color:#fff}.section-kicker.light span{background:#fff;color:var(--navy)}.section-kicker.centered{justify-content:center}
.about{padding:145px 0 130px;position:relative}.about:before{content:"";position:absolute;z-index:-2;left:50%;transform:translateX(-50%);top:50px;width:100vw;height:calc(100% - 70px);background:linear-gradient(180deg,#fff 0%,#fff8fb 38%,#fff 100%)}.about-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:end;margin-bottom:78px}.about h2,.play h2,.more h2,.collection h2,.download h2{margin:0;font-size:clamp(36px,4vw,60px);line-height:1.35;letter-spacing:.035em}.about-heading p{margin:0 0 7px;font-size:17px;font-weight:600;line-height:2;letter-spacing:.035em}
.experience-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.12fr;align-items:center;gap:14px}.flow-item{display:grid;grid-template-columns:1fr;gap:12px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .65s ease,transform .65s ease}.flow-item.is-visible{opacity:1;transform:none}.flow-image{height:150px}.asset-mini{border-radius:24px;background:linear-gradient(145deg,#ffe8f2,#fff);border:1px solid rgba(240,100,161,.14);display:grid;place-items:center;box-shadow:0 14px 30px rgba(38,54,86,.06)}.asset-mini.lavender{background:linear-gradient(145deg,#eeeaff,#fff)}.asset-mini.peach{background:linear-gradient(145deg,#fff0e5,#fff)}.asset-mini.navy{background:linear-gradient(145deg,#eef1f8,#fff)}.asset-mini span{font:600 10px/1 'Poppins';letter-spacing:.18em;opacity:.42}.flow-copy{display:flex;align-items:center;justify-content:space-between;padding:0 3px}.flow-copy strong{font-size:18px}.flow-copy small{font:600 10px/1 'Poppins';color:var(--pink)}.flow-arrow{font-size:20px;color:var(--lavender);opacity:0;transform:translateX(-7px);transition:.45s}.flow-arrow.is-visible{opacity:1;transform:none}
.play{padding:120px 0 130px}.play-intro{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:70px}.play-intro p{max-width:470px;margin:0 0 9px;font-size:15px;font-weight:500;line-height:2}.play-scenes{display:flex;flex-direction:column;gap:46px}.play-scene{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;min-height:430px}.scene-b{grid-template-columns:.85fr 1.15fr}.scene-media{height:430px;border-radius:var(--radius-xl);background:linear-gradient(145deg,#fff1f7,#fff);display:grid;place-items:center}.lavender-slot{background:linear-gradient(145deg,#eeeaff,#fff)}.peach-slot{background:linear-gradient(145deg,#fff0e7,#fff)}.scene-copy{padding:36px 20px}.scene-no{font:600 10px/1 'Poppins';letter-spacing:.2em;color:var(--pink)}.scene-copy h3{font-size:clamp(32px,3.3vw,50px);line-height:1.35;margin:16px 0 22px;letter-spacing:.04em}.scene-copy p{font-size:15px;line-height:2;max-width:420px;margin:0}.style-dots{position:absolute;left:28px;top:28px;display:flex;gap:7px}.style-dots i{width:12px;height:12px;border-radius:50%;background:var(--pink)}.style-dots i:nth-child(2){background:var(--lavender)}.style-dots i:nth-child(3){background:var(--peach)}.style-dots i:nth-child(4){background:var(--navy)}.style-dots i:nth-child(5){background:#fff;border:1px solid var(--line)}
.more{padding:120px 0 145px}.more-title{margin-bottom:55px}.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.more-card{border-radius:30px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 16px 40px rgba(38,54,86,.06)}.more-media{height:270px;background:linear-gradient(150deg,#ffedf5,#fff);position:relative;display:grid;place-items:center}.more-media.peach{background:linear-gradient(150deg,#fff0e5,#fff)}.more-media.lavender{background:linear-gradient(150deg,#eeeaff,#fff)}.asset-card:before,.asset-card:after{content:"";position:absolute;border-radius:30px;background:rgba(255,255,255,.55)}.asset-card:before{width:46%;height:44%;left:12%;bottom:12%;transform:rotate(-5deg)}.asset-card:after{width:34%;height:54%;right:10%;top:10%;transform:rotate(5deg)}.asset-card span{z-index:2;font:600 10px/1 'Poppins';letter-spacing:.18em;opacity:.45}.more-media b{position:absolute;z-index:3;right:16px;top:16px;background:var(--navy);color:#fff;border-radius:999px;padding:8px 11px;font:600 8px/1 'Poppins';letter-spacing:.12em}.more-copy{padding:30px 28px 34px}.tag{font:600 9px/1 'Poppins';letter-spacing:.16em;color:var(--pink)}.more-copy h3{font-size:25px;line-height:1.5;margin:13px 0 14px}.more-copy p{font-size:13px;line-height:1.9;margin:0;color:rgba(38,54,86,.76)}
.collection{background:var(--navy-dark);color:#fff;overflow:hidden;position:relative}.collection:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-260px;top:-260px;background:radial-gradient(circle at 30% 30%,rgba(170,160,220,.55),rgba(240,100,161,.17) 42%,transparent 66%)}.collection:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;left:-200px;bottom:-290px;background:rgba(246,182,140,.14)}.collection-inner{min-height:780px;padding-top:125px;padding-bottom:125px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:75px;position:relative;z-index:1}.collection-label{font:600 9px/1 'Poppins';letter-spacing:.2em;color:var(--peach);margin:0 0 20px}.collection-copy h2{font-size:clamp(44px,5vw,70px)}.collection-lead{font-size:15px;line-height:2;max-width:510px;margin:27px 0 30px;color:rgba(255,255,255,.82)}.collection-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.collection-points li{font-size:13px;position:relative;padding-left:20px;color:rgba(255,255,255,.9)}.collection-points li:before{content:"✦";position:absolute;left:0;color:var(--pink);font-size:9px;top:3px}
.collection-ui{height:570px;position:relative}.phone{position:absolute;width:290px;height:545px;border-radius:42px;background:#fff;color:var(--navy);padding:32px 22px 24px;box-shadow:0 30px 70px rgba(0,0,0,.28);border:7px solid #fff}.phone-back{left:7%;top:0;transform:rotate(-7deg) scale(.92);opacity:.8}.phone-front{right:7%;top:30px;transform:rotate(6deg)}.phone-top{width:78px;height:18px;border-radius:999px;background:var(--navy-dark);margin:-23px auto 25px}.ui-title{font:700 13px/1 'Poppins';letter-spacing:.08em;margin-bottom:20px}.ui-tabs{display:flex;gap:6px;margin-bottom:16px}.ui-tabs i{height:7px;width:44px;border-radius:99px;background:#f0eaf6}.ui-tabs i:first-child{background:var(--pink)}.ui-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ui-grid b{height:112px;border-radius:16px;background:linear-gradient(145deg,#fde7f1,#f3efff)}.ui-search{height:34px;border-radius:99px;background:#f2f3f7;margin-bottom:15px}.ui-list{display:grid;gap:11px}.ui-list b{height:86px;border-radius:16px;background:linear-gradient(90deg,#fcecf3,#f7f5fb)}.replace-chip{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:9px 14px;border-radius:99px;font:600 8px/1 'Poppins';letter-spacing:.15em;color:rgba(255,255,255,.68)}
.download{min-height:760px;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}.download:before{content:"";position:absolute;z-index:-2;inset:0 -40vw;background:radial-gradient(circle at 30% 40%,rgba(240,100,161,.18),transparent 25%),radial-gradient(circle at 72% 46%,rgba(170,160,220,.22),transparent 29%),radial-gradient(circle at 58% 80%,rgba(246,182,140,.19),transparent 27%)}.download-content{max-width:680px}.download-logo{width:220px;margin:0 auto 36px}.download h2{font-size:clamp(43px,5vw,68px);margin-bottom:18px}.download-content>p:not(.section-kicker){font-size:16px;font-weight:600;margin:0 0 28px}.centered-row{justify-content:center}.download-orb{position:absolute;border-radius:50%;z-index:-1}.orb-a{width:120px;height:120px;background:rgba(240,100,161,.12);left:7%;top:15%}.orb-b{width:180px;height:180px;background:rgba(170,160,220,.13);right:5%;bottom:12%}
.site-footer{border-top:1px solid var(--line);padding:50px 50px 34px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:#fff}.footer-brand img{width:138px}.footer-brand p{font-size:11px;margin:9px 0 0;letter-spacing:.08em}.footer-links{display:flex;gap:26px;font-size:11px}.copyright{grid-column:1/-1;margin:0;padding-top:26px;border-top:1px solid var(--line);font:500 9px/1 'Poppins';letter-spacing:.12em;color:rgba(38,54,86,.45)}
.floating-download{position:fixed;z-index:90;right:22px;bottom:22px;width:82px;height:82px;border-radius:50%;background:var(--pink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 14px 35px rgba(240,100,161,.34);font:600 8px/1 'Poppins';letter-spacing:.08em;transition:.25s}.floating-download b{font-size:16px}.floating-download:hover{transform:translateY(-3px) rotate(2deg)}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.75,.24,1)}.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}
@media (max-width:980px){
  .site-header{grid-template-columns:150px 1fr 54px;padding:0 22px}.desktop-nav,.header-download{display:none}.menu-button{display:block;justify-self:end;width:44px;height:44px;border:0;background:transparent;position:relative}.menu-button span{position:absolute;right:6px;width:28px;height:2px;background:var(--navy);transition:.25s}.menu-button span:first-child{top:17px}.menu-button span:last-child{top:26px;width:20px}.menu-button.is-open span:first-child{transform:translateY(4px) rotate(45deg)}.menu-button.is-open span:last-child{width:28px;transform:translateY(-5px) rotate(-45deg)}
  .mobile-menu{display:flex;position:fixed;z-index:95;top:0;right:0;width:min(390px,88vw);height:100vh;background:rgba(255,253,253,.98);padding:120px 40px 40px;flex-direction:column;gap:25px;transform:translateX(105%);transition:.35s;box-shadow:-20px 0 60px rgba(38,54,86,.08)}.mobile-menu.is-open{transform:none}.mobile-menu a{font:600 20px/1.2 'Poppins';letter-spacing:.08em}.mobile-menu[aria-hidden="false"]{visibility:visible}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:125px;padding-bottom:95px;gap:40px}.hero-copy{max-width:680px}.hero-visual{height:580px}.scroll-cue{display:none}.about-heading{grid-template-columns:1fr;gap:24px}.experience-flow{grid-template-columns:1fr 1fr;gap:20px}.flow-arrow{display:none}.flow-image{height:180px}.play-scene,.scene-b{grid-template-columns:1fr;gap:18px}.scene-b .scene-copy{order:2}.scene-media{height:520px}.scene-copy{padding:22px 12px 40px}.more-grid{grid-template-columns:1fr 1fr}.more-card:last-child{grid-column:1/-1}.collection-inner{grid-template-columns:1fr;gap:45px}.collection-ui{max-width:720px;width:100%;justify-self:center}.collection-points{max-width:560px}.site-footer{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.copyright{grid-column:auto}
}
@media (max-width:640px){
  .section-shell{width:min(100% - 34px,1180px)}.sp-only{display:block}.site-header{height:70px;padding:0 16px}.site-header.scrolled{height:64px}.brand img{width:112px}.hero{padding-top:105px;padding-bottom:70px}.hero:before{top:55px}.hero-logo{width:205px;margin-bottom:24px}.hero h1{font-size:43px}.hero-subcopy{font-size:14px;margin:22px 0}.store-row{gap:8px}.store-button{min-width:0;flex:1;height:54px;padding:8px 10px;font-size:12px}.hero-visual{height:410px;min-height:0;border-radius:38px}.asset-slot-label strong{font-size:13px}.asset-slot-label span{font-size:9px}.about{padding:90px 0 80px}.section-kicker{margin-bottom:25px}.about-heading{margin-bottom:45px}.about h2,.play h2,.more h2,.collection h2,.download h2{font-size:35px}.about-heading p{font-size:14px;line-height:1.9}.experience-flow{gap:14px}.flow-image{height:120px;border-radius:18px}.flow-copy strong{font-size:14px}.play{padding:80px 0 85px}.play-intro{display:block;margin-bottom:40px}.play-intro p{margin-top:18px;font-size:13px}.play-scenes{gap:18px}.scene-media{height:310px;border-radius:28px}.scene-copy{padding:20px 8px 35px}.scene-copy h3{font-size:31px;margin:11px 0 13px}.scene-copy p{font-size:13px;line-height:1.9}.more{padding:80px 0 90px}.more-grid{grid-template-columns:1fr}.more-card:last-child{grid-column:auto}.more-media{height:230px}.more-copy{padding:24px}.more-copy h3{font-size:23px}.collection-inner{padding-top:85px;padding-bottom:90px}.collection-copy h2{font-size:43px}.collection-lead{font-size:13px}.collection-points{grid-template-columns:1fr}.collection-ui{height:460px;margin-top:5px}.phone{width:235px;height:435px;border-radius:34px;padding:27px 18px}.phone-back{left:0}.phone-front{right:0}.ui-grid b{height:84px}.ui-list b{height:64px}.download{min-height:630px}.download-logo{width:190px}.download h2{font-size:42px}.site-footer{padding:40px 24px 95px}.footer-links{gap:16px 22px}.floating-download{width:68px;height:68px;right:14px;bottom:14px}.floating-download span{font-size:7px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.flow-item,.flow-arrow{transition:none!important;opacity:1!important;transform:none!important}}

/* =========================================================
   v2 direction adjustments
   - Center-aligned content hierarchy
   - Smaller headline scale
   - Larger portrait image placeholders
   - No scroll/reveal staging
   ========================================================= */
html{scroll-behavior:auto}

/* HERO */
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:0}
.hero-logo{width:330px;margin:0 auto 28px}
.hero h1{font-size:clamp(34px,3.7vw,52px);line-height:1.28;letter-spacing:.045em}
.hero-subcopy{font-size:15px;margin:22px 0 28px}
.hero-copy .store-row{justify-content:center}

/* Shared headline scale */
.about h2,.play h2,.more h2,.download h2{font-size:clamp(32px,3.3vw,44px);line-height:1.45}

/* ABOUT */
.about{padding:115px 0 115px}
.about-heading{display:block;text-align:center;max-width:920px;margin:0 auto 64px}
.about-heading h2{margin-bottom:20px}
.about-heading p{font-size:16px;font-weight:700;line-height:2;letter-spacing:.03em;margin:0}
.experience-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:18px;align-items:center}
.flow-item{display:flex;flex-direction:column;align-items:center;gap:14px;opacity:1;transform:none}
.flow-image{width:100%;height:auto;aspect-ratio:3/4;border-radius:30px}
.flow-copy{display:block;text-align:center;padding:0;width:100%}
.flow-copy strong{font-size:18px;line-height:1.5}
.flow-arrow{font-size:20px;color:var(--lavender);opacity:.78;transform:none;margin-top:-38px}

/* PLAY */
.play{padding:105px 0 115px}
.play-intro{display:block;text-align:center;max-width:800px;margin:0 auto 54px}
.play-intro h2{margin-bottom:18px}
.play-intro p{max-width:650px;margin:0 auto;font-size:14px;line-height:2}
.play-scenes{gap:30px}
.play-scene,.scene-b{grid-template-columns:1fr 1fr;gap:34px;align-items:center;min-height:0;padding:14px 0}
.scene-media{width:min(100%,390px);height:auto;aspect-ratio:1/1.08;justify-self:center;border-radius:48% 42% 38% 45% / 42% 50% 40% 48%}
.scene-media.blob-alt{border-radius:41% 50% 44% 38% / 49% 39% 51% 43%}
.scene-media.blob-alt-2{border-radius:50% 39% 47% 42% / 40% 48% 39% 52%}
.scene-copy{padding:22px 18px;text-align:center;max-width:470px;justify-self:center}
.scene-copy h3{font-size:clamp(25px,2.6vw,34px);line-height:1.48;margin:0 0 14px;letter-spacing:.035em}
.scene-copy p{font-size:14px;line-height:2;max-width:440px;margin:0 auto}

/* MORE */
.more{padding:105px 0 120px}
.more-title{text-align:center;margin-bottom:46px}
.more-grid{gap:22px;align-items:stretch}
.more-card{display:flex;flex-direction:column}
.more-media{height:auto;aspect-ratio:3/4}
.more-copy{text-align:center;padding:27px 26px 32px}
.more-copy h3{font-size:22px;line-height:1.55;margin:0 0 13px}
.more-copy p{font-size:13px;line-height:1.9;margin:0 auto;max-width:300px}

/* COLLECTION */
.collection{background:linear-gradient(135deg,#69758f 0%,#586983 54%,#687892 100%)}
.collection:before{opacity:.6;background:radial-gradient(circle at 30% 30%,rgba(207,198,245,.44),rgba(240,150,190,.14) 44%,transparent 68%)}
.collection:after{background:rgba(255,211,184,.12)}
.collection-inner{min-height:720px;padding-top:110px;padding-bottom:110px}
.collection-copy h2{font-size:clamp(34px,3.5vw,46px);line-height:1.45}
.collection-lead{font-size:14px;line-height:2;margin:22px 0 28px;color:rgba(255,255,255,.88)}
.collection-points{gap:12px 14px}
.collection-points li{font-size:15px;font-weight:700;line-height:1.55;padding:12px 14px 12px 35px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:13px}
.collection-points li:before{left:14px;top:15px;font-size:10px;color:#ffd5e7}
.phone{box-shadow:0 24px 55px rgba(28,39,65,.22)}

/* DOWNLOAD */
.download{min-height:680px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 0 80px}
.download-kicker{position:absolute;top:92px;left:0;margin:0}
.download-content{max-width:680px;margin-top:32px}
.download-logo{width:220px;margin:0 auto 30px}
.download h2{font-size:clamp(32px,3.3vw,44px);margin-bottom:16px}
.download-content>p:not(.section-kicker){font-size:15px;margin:0 0 26px}

/* No entrance animations */
.reveal,.flow-item,.flow-arrow{opacity:1!important;transform:none!important;transition:none!important}

@media (max-width:980px){
  .hero-copy{max-width:none}
  .hero-logo{width:300px}
  .about-heading{max-width:760px}
  .experience-flow{grid-template-columns:repeat(4,1fr);gap:16px}
  .flow-arrow{display:none}
  .play-scene,.scene-b{grid-template-columns:1fr 1fr;gap:22px}
  .scene-media{width:min(100%,350px)}
  .more-media{aspect-ratio:3/4}
}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:115px;gap:34px}
  .hero-logo{width:265px}
  .hero h1{font-size:38px}
  .hero-subcopy{font-size:14px}
  .experience-flow{grid-template-columns:1fr 1fr;gap:24px 16px}
  .flow-image{max-width:250px}
  .play-scene,.scene-b{grid-template-columns:1fr;gap:10px;padding:15px 0 26px}
  .scene-b .scene-copy{order:2}
  .scene-media{width:min(88vw,390px);aspect-ratio:1/1.08}
  .scene-copy{padding:15px 6px}
  .more-grid{grid-template-columns:1fr 1fr}
  .more-card:last-child{grid-column:1/-1;max-width:calc(50% - 11px);width:100%;justify-self:center}
  .download-kicker{top:72px}
}

@media (max-width:640px){
  .hero-logo{width:245px;margin-bottom:22px}
  .hero h1{font-size:34px}
  .hero-visual{border-radius:48% 42% 38% 45% / 42% 50% 40% 48%}
  .about{padding:82px 0 82px}
  .about-heading{margin-bottom:42px}
  .about-heading h2{font-size:29px;margin-bottom:15px}
  .about-heading p{font-size:13px;line-height:1.9}
  .flow-image{border-radius:24px}
  .flow-copy strong{font-size:15px}
  .play{padding:78px 0 82px}
  .play-intro{margin-bottom:32px}
  .play-intro h2{font-size:29px}
  .play-intro p{font-size:13px}
  .scene-copy h3{font-size:25px;margin-bottom:10px}
  .scene-copy p{font-size:13px;line-height:1.9}
  .more{padding:78px 0 88px}
  .more-title{margin-bottom:34px}
  .more-title h2{font-size:29px}
  .more-grid{grid-template-columns:1fr}
  .more-card:last-child{grid-column:auto;max-width:none}
  .more-media{aspect-ratio:3/4}
  .more-copy h3{font-size:21px}
  .collection-inner{padding-top:82px;padding-bottom:88px}
  .collection-copy h2{font-size:34px}
  .collection-points li{font-size:14px}
  .download{min-height:600px;padding-top:105px}
  .download-kicker{top:62px}
  .download-logo{width:190px}
  .download h2{font-size:32px}
}


/* =========================================================
   v3 direction adjustments
   ========================================================= */
:root{
  --flow-pink:#e68bb8;
  --flow-purple:#9f83ea;
  --flow-coral:#eb9a7e;
  --flow-blue:#6b88d8;
}

/* overall tighten */
.section-kicker{margin-bottom:20px}
.hero h1,.about h2,.play h2,.more h2,.collection h2,.download h2{letter-spacing:.03em}
.about h2,.play h2,.more h2,.download h2{font-size:clamp(28px,3vw,38px);line-height:1.38}
.collection-copy h2{font-size:clamp(30px,3.1vw,40px);line-height:1.38}

/* hero stacked overlap */
.hero{grid-template-columns:1fr;padding-top:112px;padding-bottom:78px;gap:0;min-height:auto}
.hero-stack{width:min(100%,760px);margin:0 auto;display:flex;flex-direction:column;align-items:center;position:relative}
.hero-logo{position:relative;z-index:3;width:min(340px,52vw);margin:0 auto -54px}
.hero-visual{width:min(100%,620px);height:auto;aspect-ratio:1.12/1;min-height:0;border-radius:42% 39% 46% 40% / 39% 48% 41% 46%;margin:0 auto;z-index:1}
.hero-copy{position:relative;z-index:3;margin-top:-42px;background:rgba(255,250,252,.86);backdrop-filter:blur(6px);padding:18px 28px 0;border-radius:30px;max-width:520px}
.hero h1{font-size:clamp(30px,3.4vw,42px);line-height:1.34;margin-bottom:10px}
.hero-subcopy{font-size:15px;line-height:1.9;margin:0}
.hero .store-row{margin-top:18px;justify-content:center}
.eyebrow{display:none!important}

/* about */
.about{padding:88px 0 82px}
.about-heading{margin:0 auto 42px;max-width:860px}
.about-heading h2{margin-bottom:14px}
.about-heading p,.play-intro p{font-size:15px;line-height:1.95;font-weight:500;letter-spacing:.02em}
.experience-flow{gap:14px;align-items:start}
.flow-image{aspect-ratio:3/4;max-width:170px;margin:0 auto;border-radius:28px}
.flow-copy strong{font-size:20px;letter-spacing:.06em}
.flow-item.pink .flow-copy strong{color:var(--flow-pink)}
.flow-item.purple .flow-copy strong{color:var(--flow-purple)}
.flow-item.coral .flow-copy strong{color:var(--flow-coral)}
.flow-item.blue .flow-copy strong{color:var(--flow-blue)}
.flow-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.84);box-shadow:0 10px 18px rgba(60,46,88,.08);color:#af9ad8;font-size:12px;margin-top:58px}

/* play */
.play{padding:80px 0 84px;background:linear-gradient(180deg,rgba(255,243,248,.72) 0%,rgba(255,250,252,.92) 78%,rgba(255,255,255,0) 100%);border-radius:48px}
.play-intro{margin:0 auto 34px;max-width:760px}
.play-intro h2{margin-bottom:12px}
.play-scenes{gap:22px}
.play-scene,.scene-b{grid-template-columns:1fr 1fr;gap:26px;padding:8px 0;align-items:center}
.scene-media{width:min(100%,430px);aspect-ratio:4/3;height:auto;border-radius:45% 42% 39% 43% / 42% 47% 41% 46%}
.scene-media.blob-alt{border-radius:40% 47% 44% 41% / 46% 40% 48% 44%}
.scene-media.blob-alt-2{border-radius:47% 40% 45% 43% / 41% 47% 42% 49%}
.scene-copy{padding:10px 6px;max-width:430px}
.scene-copy h3{font-size:clamp(22px,2.25vw,28px);line-height:1.45;margin:0 0 10px}
.scene-copy p{font-size:13px;line-height:1.9;max-width:380px}

/* more */
.more{padding:78px 0 86px}
.more-title{margin-bottom:26px}
.more-grid{gap:18px}
.more-media{aspect-ratio:4/3;max-height:210px}
.more-copy{padding:22px 22px 26px}
.more-copy h3{font-size:20px;line-height:1.48;margin-bottom:10px}
.more-copy p{font-size:13px;line-height:1.85}

/* collection */
.collection{background:linear-gradient(135deg,#7a88a0 0%,#70809a 52%,#8090a9 100%)}
.collection-inner{min-height:660px;padding-top:90px;padding-bottom:92px;gap:36px}
.collection-label{margin-bottom:10px}
.collection-copy h2{margin-bottom:12px}
.collection-lead{font-size:14px;line-height:1.9;margin:18px 0 24px}
.collection-points li{font-size:16px;font-weight:800;line-height:1.5;padding:13px 14px 13px 37px}

/* download */
.download{min-height:560px;padding:88px 0 72px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.download-kicker{top:62px;left:0}
.download-content{max-width:620px;margin-top:16px;position:relative;z-index:2}
.download-logo{width:195px;margin:0 auto 18px}
.download h2{font-size:clamp(28px,3vw,38px);margin-bottom:10px}
.download-content>p:not(.section-kicker){font-size:14px;margin:0 0 20px}
.download-ghost{position:absolute;top:50%;transform:translateY(-50%);width:260px;aspect-ratio:4/3;opacity:.24;filter:saturate(.9);z-index:1;border-width:1px}
.download-ghost .asset-slot-label{transform:scale(.9);opacity:.8}
.download-ghost.ghost-left{left:-20px;border-radius:45% 40% 46% 42% / 41% 48% 42% 47%}
.download-ghost.ghost-right{right:-20px;border-radius:42% 48% 40% 45% / 47% 40% 48% 42%}

@media (max-width:980px){
  .hero-logo{width:min(300px,58vw);margin-bottom:-48px}
  .hero-visual{width:min(100%,560px)}
  .hero-copy{margin-top:-38px}
  .flow-image{max-width:150px}
  .play{border-radius:36px}
  .scene-media{width:min(100%,360px)}
  .download-ghost{width:210px}
}

@media (max-width:760px){
  .hero{padding-top:104px;padding-bottom:66px}
  .hero-logo{width:240px;margin-bottom:-38px}
  .hero-visual{width:min(92vw,520px);aspect-ratio:1/1.04}
  .hero-copy{margin-top:-30px;padding:16px 22px 0;max-width:460px}
  .hero h1{font-size:34px}
  .about{padding:78px 0 74px}
  .experience-flow{grid-template-columns:1fr 1fr;gap:18px 14px}
  .flow-image{max-width:150px}
  .flow-copy strong{font-size:18px}
  .flow-arrow{display:none}
  .play{padding:72px 0 76px;border-radius:30px}
  .play-intro{margin-bottom:28px}
  .play-scene,.scene-b{grid-template-columns:1fr;gap:10px;padding:6px 0 10px}
  .scene-media{width:min(90vw,430px);aspect-ratio:1.28/1}
  .scene-copy{padding:4px 6px 10px}
  .scene-copy p{max-width:440px}
  .more{padding:72px 0 78px}
  .more-grid{grid-template-columns:1fr}
  .more-card:last-child{grid-column:auto;max-width:none;width:100%}
  .more-media{max-height:none;aspect-ratio:4/3}
  .collection-inner{padding-top:78px;padding-bottom:82px}
  .download{min-height:520px;padding:98px 0 66px}
  .download-kicker{top:52px}
  .download-ghost{width:170px;opacity:.2}
  .download-ghost.ghost-left{left:-36px}
  .download-ghost.ghost-right{right:-36px}
}

@media (max-width:640px){
  .hero-logo{width:215px;margin-bottom:-32px}
  .hero h1{font-size:30px}
  .hero-subcopy,.about-heading p,.play-intro p{font-size:13px}
  .hero .store-row{margin-top:16px}
  .about h2,.play h2,.more h2,.download h2{font-size:26px}
  .flow-image{max-width:138px}
  .flow-copy strong{font-size:17px}
  .play{padding:64px 0 68px;border-radius:24px}
  .scene-media{aspect-ratio:1.22/1}
  .scene-copy h3{font-size:22px}
  .more{padding:66px 0 72px}
  .collection-copy h2{font-size:30px}
  .collection-points li{font-size:14px}
  .download-logo{width:175px}
  .download h2{font-size:28px}
  .download-content{margin-top:10px}
  .download-ghost{display:none}
}

/* =========================================================
   v3 direction adjustments
   - hero overlap composition
   - smaller type / tighter spacing
   - softer play section + refined placeholders
   ========================================================= */

:root{
  --toki-pink:#e17fa7;
  --toki-lav:#9a7de3;
  --toki-peach:#f09a88;
  --toki-blue:#5f8fd8;
}

/* HERO */
.hero{
  display:block;
  padding-top:118px;
  padding-bottom:90px;
}
.hero-stack{
  width:min(100%,780px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.hero-logo-wrap{
  position:relative;
  z-index:3;
  margin-bottom:-58px;
}
.hero-logo{
  width:min(380px,58vw);
  margin:0;
  filter:drop-shadow(0 10px 24px rgba(43,52,90,.1));
}
.hero-visual{
  width:min(100%,700px);
  height:auto;
  aspect-ratio:4/5;
  border-radius:46% 38% 44% 40% / 38% 44% 36% 45%;
}
.hero-caption{
  position:relative;
  z-index:3;
  margin-top:-46px;
  width:min(100%,620px);
  background:rgba(255,252,254,.88);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 45px rgba(53,62,95,.08);
  backdrop-filter:blur(14px);
  border-radius:34px;
  padding:24px 28px 24px;
  text-align:center;
}
.hero h1{
  font-size:clamp(28px,3vw,40px);
  line-height:1.35;
  letter-spacing:.04em;
  margin:0 0 10px;
}
.hero-subcopy{
  font-size:14px;
  line-height:1.85;
  margin:0 0 18px;
}
.hero .store-row{justify-content:center}
.hero .store-button{min-width:194px}

/* Shared spacing + headings */
.about,.play,.more{padding-top:88px;padding-bottom:92px}
.about h2,.play h2,.more h2,.download h2{font-size:clamp(28px,3vw,38px);line-height:1.42}
.section-kicker{margin-bottom:22px}

/* ABOUT */
.about-heading{margin:0 auto 44px;max-width:860px}
.about-heading h2{margin-bottom:14px}
.about-lead,.about-heading p{font-size:15px;font-weight:400!important;line-height:1.9;letter-spacing:.02em;color:var(--text)}
.experience-flow{gap:14px;align-items:start}
.flow-image{aspect-ratio:3/4;border-radius:30px;max-width:180px;margin:0 auto}
.flow-copy{margin-top:10px}
.flow-copy strong{font-size:22px;line-height:1.45;font-weight:700}
.flow-copy.pink strong{color:var(--toki-pink)}
.flow-copy.lavender strong{color:var(--toki-lav)}
.flow-copy.peach strong{color:var(--toki-peach)}
.flow-copy.blue strong{color:var(--toki-blue)}
.flow-arrow{
  font-size:18px;
  color:#9fa1d7;
  line-height:1;
  margin-top:68px;
  width:28px;
  text-align:center;
}

/* PLAY */
.play{
  background:linear-gradient(180deg,rgba(255,243,248,.88) 0%, rgba(255,248,252,.5) 38%, rgba(255,255,255,0) 100%);
  border-radius:52px;
}
.play-intro{margin:0 auto 36px;max-width:760px}
.play-intro h2{margin-bottom:12px}
.play-intro p{max-width:660px;margin:0 auto;font-size:15px;line-height:1.9;color:var(--text)}
.play-scenes{gap:24px}
.play-scene,.scene-b{gap:24px;padding:8px 0;align-items:center}
.scene-media{
  width:min(100%,470px);
  aspect-ratio:4/3;
  border-radius:43% 48% 42% 39% / 40% 43% 47% 45%;
}
.scene-media.blob-alt{border-radius:46% 40% 48% 42% / 43% 47% 40% 45%}
.scene-media.blob-alt-2{border-radius:40% 46% 41% 49% / 48% 39% 46% 42%}
.scene-copy{padding:10px 10px;text-align:center;max-width:420px}
.scene-copy h3{font-size:clamp(22px,2.2vw,30px);line-height:1.42;margin:0 0 10px}
.scene-copy p{font-size:14px;line-height:1.85;max-width:400px}
.scene-a .scene-copy,.scene-c .scene-copy{justify-self:start}
.scene-b .scene-copy{justify-self:end}

/* MORE */
.more{padding-top:78px;padding-bottom:88px}
.more-title{margin-bottom:30px}
.more-title h2{margin-bottom:0}
.more-grid{gap:20px}
.more-card{border-radius:28px}
.more-media{aspect-ratio:4/4.2;max-width:none}
.more-copy{padding:22px 22px 24px}
.more-copy h3{font-size:20px;margin-bottom:10px}
.more-copy p{font-size:13px;line-height:1.8;max-width:290px}

/* COLLECTION */
.collection{background:linear-gradient(135deg,#7b8597 0%,#6e7c93 46%,#8090a6 100%)}
.collection-inner{min-height:680px;padding-top:92px;padding-bottom:96px}
.collection-copy h2{font-size:clamp(30px,3.1vw,40px);margin-bottom:14px}
.collection-label{font-size:12px;letter-spacing:.16em}
.collection-lead{font-size:14px;line-height:1.9;margin:18px 0 24px}
.collection-points li{font-size:16px;font-weight:700;background:rgba(255,255,255,.10)}

/* DOWNLOAD */
.download{min-height:560px;padding:92px 0 72px;overflow:hidden}
.download-content{max-width:620px;margin-top:18px;position:relative;z-index:2}
.download-logo{width:205px;margin:0 auto 22px}
.download h2{font-size:clamp(28px,3vw,38px);margin-bottom:12px}
.download-content>p:not(.section-kicker){font-size:14px;line-height:1.85;margin-bottom:22px}
.download-ghost{
  position:absolute;
  top:50%;
  width:min(31vw,270px);
  aspect-ratio:4/3;
  transform:translateY(-44%);
  border-radius:45% 40% 48% 42% / 43% 50% 40% 47%;
  border:1px dashed rgba(127,128,189,.22);
  background:linear-gradient(135deg,rgba(240,140,175,.12),rgba(160,132,240,.10) 58%,rgba(245,182,144,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  display:grid;
  place-items:center;
  z-index:0;
  opacity:.75;
}
.download-ghost span{font:600 13px/1 'Poppins';letter-spacing:.18em;color:rgba(93,104,154,.42)}
.download-ghost:before,.download-ghost:after{
  content:'';position:absolute;border-radius:inherit;inset:16px;border:1px solid rgba(255,255,255,.34)
}
.ghost-left{left:2%}
.ghost-right{right:2%;transform:translateY(-44%) rotate(6deg)}
.download-orb{opacity:.45}

/* Reduce oversized utility labels in asset slots */
.asset-slot-label strong{font-size:12px}
.asset-slot-label span{font-size:10px;line-height:1.55}

/* mobile / tablet */
@media (max-width:980px){
  .hero{padding-top:106px;padding-bottom:82px}
  .hero-logo-wrap{margin-bottom:-48px}
  .hero-caption{margin-top:-34px;width:min(100%,600px)}
  .experience-flow{grid-template-columns:repeat(4,1fr);gap:16px 10px}
  .flow-arrow{display:none}
  .flow-image{max-width:170px}
  .play{border-radius:42px}
  .play-scene,.scene-b{grid-template-columns:1fr 1fr;gap:18px}
  .scene-media{width:min(100%,390px)}
  .scene-copy{max-width:360px}
  .download-ghost{width:220px}
}
@media (max-width:760px){
  .hero-logo{width:min(300px,68vw)}
  .hero-logo-wrap{margin-bottom:-40px}
  .hero-visual{width:min(100%,520px);aspect-ratio:4/5.1}
  .hero-caption{width:min(100%,92vw);padding:22px 18px 20px;margin-top:-26px;border-radius:28px}
  .hero h1{font-size:32px}
  .about,.play,.more{padding-top:72px;padding-bottom:76px}
  .experience-flow{grid-template-columns:1fr 1fr;gap:20px 14px}
  .flow-image{max-width:220px}
  .flow-copy strong{font-size:20px}
  .play-intro{margin-bottom:28px}
  .play-scene,.scene-b{grid-template-columns:1fr;gap:8px;padding:4px 0 10px}
  .scene-b .scene-copy{order:2}
  .scene-copy,.scene-a .scene-copy,.scene-b .scene-copy,.scene-c .scene-copy{justify-self:center}
  .scene-media{width:min(100%,440px);aspect-ratio:4/3.2}
  .more-grid{grid-template-columns:1fr}
  .more-card:last-child{grid-column:auto;max-width:none}
  .download{min-height:520px;padding-top:88px}
  .download-kicker{top:54px}
  .download-ghost{width:180px;opacity:.55}
  .ghost-left{left:-24px}.ghost-right{right:-24px}
}
@media (max-width:640px){
  .hero-logo{width:min(270px,72vw)}
  .hero-visual{aspect-ratio:4/5.2}
  .hero h1{font-size:28px}
  .hero-subcopy,.about-lead,.about-heading p,.play-intro p,.download-content>p:not(.section-kicker){font-size:13px}
  .about h2,.play h2,.more h2,.download h2{font-size:28px}
  .about-heading{margin-bottom:34px}
  .flow-copy strong{font-size:18px}
  .scene-copy h3{font-size:23px}
  .scene-copy p{font-size:13px}
  .more-copy h3{font-size:19px}
  .collection-copy h2{font-size:32px}
  .collection-points li{font-size:14px}
  .download-logo{width:180px}
  .download h2{font-size:30px}
  .download-ghost{display:none}
}

/* v3 patch fixes */
.flow-item.pink .flow-copy strong{color:var(--toki-pink)}
.flow-item.purple .flow-copy strong{color:var(--toki-lav)}
.flow-item.coral .flow-copy strong{color:var(--toki-peach)}
.flow-item.blue .flow-copy strong{color:var(--toki-blue)}
.download-ghost .asset-slot-label{opacity:.62;max-width:72%;text-align:center}
.download-ghost .asset-slot-label small{font-size:10px}
.download-ghost .asset-slot-label strong{font-size:11px}
.download-ghost .asset-slot-label span{font-size:9px}

/* =========================================================
   v4 adjustments
   ========================================================= */

/* HERO: wide KV, no caption frame, desktop first view fits without scrolling */
.hero{
  width:min(100% - 48px,1180px);
  min-height:calc(100svh - 84px);
  padding-top:84px;
  padding-bottom:40px;
  display:flex;
  align-items:center;
}
.hero-stack{width:min(100%,930px)}
.hero-logo-wrap{margin-bottom:-46px;z-index:4}
.hero-logo{width:min(350px,48vw)}
.hero-visual{
  width:min(100%,900px);
  aspect-ratio:16/7.4;
  min-height:0;
  border-radius:43% 38% 44% 39% / 34% 42% 37% 44%;
}
.hero-caption{
  position:relative;
  z-index:4;
  width:auto;
  max-width:600px;
  margin-top:-42px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  text-align:center;
  text-shadow:0 2px 16px rgba(255,255,255,.96),0 0 4px rgba(255,255,255,.9);
}
.hero h1{font-size:clamp(26px,2.7vw,36px);margin:0 0 8px;line-height:1.3}
.hero-subcopy{font-size:13px;line-height:1.75;margin:0}
.hero-store-row{margin-top:18px;justify-content:center;position:relative;z-index:5}
.hero .store-button{min-width:188px;height:54px}

/* ABOUT: larger portrait frames and tighter arrow spacing */
.about{padding-top:76px;padding-bottom:82px}
.about-heading{margin-bottom:34px}
.experience-flow{
  width:min(100%,1110px);
  margin:0 auto;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);
  column-gap:2px;
  align-items:start;
}
.flow-item{width:100%}
.flow-image{width:100%;max-width:235px;aspect-ratio:3/4;border-radius:30px}
.flow-arrow{width:22px;height:22px;margin-top:102px;font-size:11px}
.flow-copy{margin-top:8px}
.flow-copy strong{font-size:23px}

/* PLAY: true full-width section background */
.play{
  width:100%;
  max-width:none;
  margin:0;
  padding:74px 0 78px;
  border-radius:0;
  background:#fff2f7;
}
.play > .section-kicker,
.play > .play-intro,
.play > .play-scenes{
  width:min(100% - 48px,1180px);
  margin-left:auto;
  margin-right:auto;
}
.play > .play-intro{margin-bottom:28px}
.play-scenes{gap:6px}
.play-scene,.scene-b{
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:0;
  min-height:0;
  position:relative;
}
.scene-media{
  width:min(114%,650px);
  max-width:none;
  aspect-ratio:1.58/1;
  min-height:0;
  position:relative;
  z-index:1;
}
.scene-a .scene-media,.scene-c .scene-media{justify-self:end;margin-right:-34px}
.scene-b .scene-media{justify-self:start;margin-left:-34px}
.scene-copy{
  position:relative;
  z-index:2;
  max-width:430px;
  padding:8px 18px;
  align-self:center;
}
.scene-a .scene-copy,.scene-c .scene-copy{justify-self:start;margin-left:-4px}
.scene-b .scene-copy{justify-self:end;margin-right:-4px}
.scene-copy h3{font-size:clamp(21px,2vw,28px);margin-bottom:8px}
.scene-copy p{font-size:14px;line-height:1.78;max-width:390px}
.style-dots{display:none!important}

/* MORE: tighter handoff from PLAY */
.more{padding-top:66px;padding-bottom:80px}
.more-title{margin-bottom:26px}
.more-grid{gap:18px}
.more-media{aspect-ratio:4/4.05}
.more-copy{padding:20px 20px 22px}

/* DOWNLOAD: full-width background and much larger image placeholders */
.download{
  width:100%;
  max-width:none;
  margin:0;
  min-height:560px;
  padding:82px 0 66px;
  background:#fff6fa;
  overflow:hidden;
}
.download-kicker{
  left:max(28px,calc((100vw - 1180px)/2));
  top:56px;
}
.download-content{max-width:520px;margin-top:26px;position:relative;z-index:3}
.download-logo{width:215px;margin-bottom:16px}
.download h2{
  font-size:clamp(23px,2.4vw,31px);
  line-height:1.42;
  color:#75678f;
  font-weight:600;
  letter-spacing:.045em;
  margin-bottom:10px;
}
.download-content>p:not(.section-kicker){font-size:13px;color:#6f7488;margin-bottom:20px}
.download-ghost{
  width:min(43vw,520px);
  aspect-ratio:1.32/1;
  top:53%;
  opacity:.56;
  border-color:rgba(127,128,189,.18);
  background:linear-gradient(135deg,rgba(240,140,175,.14),rgba(160,132,240,.12) 58%,rgba(245,182,144,.15));
  filter:blur(.1px);
}
.download-ghost.ghost-left{left:-7%;transform:translateY(-48%) rotate(-5deg)}
.download-ghost.ghost-right{right:-7%;transform:translateY(-45%) rotate(7deg)}
.download-ghost .asset-slot-label{opacity:.35}

@media (max-width:980px){
  .hero{min-height:auto;padding-top:96px;padding-bottom:54px}
  .hero-visual{width:min(100%,820px);aspect-ratio:16/8}
  .experience-flow{width:min(100%,920px)}
  .flow-image{max-width:205px}
  .flow-arrow{margin-top:88px}
  .play > .section-kicker,.play > .play-intro,.play > .play-scenes{width:min(100% - 40px,920px)}
  .scene-media{width:108%;}
  .scene-a .scene-media,.scene-c .scene-media{margin-right:-20px}
  .scene-b .scene-media{margin-left:-20px}
  .download-ghost{width:min(46vw,400px)}
}

@media (max-width:760px){
  .hero{width:min(100% - 34px,1180px);padding-top:96px}
  .hero-logo-wrap{margin-bottom:-34px}
  .hero-logo{width:min(280px,68vw)}
  .hero-visual{width:100%;aspect-ratio:4/2.7}
  .hero-caption{margin-top:-28px}
  .hero h1{font-size:29px}
  .hero-store-row{margin-top:15px;width:min(100%,440px)}
  .experience-flow{grid-template-columns:1fr 1fr;gap:20px 14px;width:100%}
  .flow-image{max-width:250px}
  .flow-arrow{display:none}
  .play{padding:66px 0 70px}
  .play > .section-kicker,.play > .play-intro,.play > .play-scenes{width:min(100% - 34px,720px)}
  .play-scene,.scene-b{grid-template-columns:1fr;gap:2px;padding:0 0 8px}
  .scene-b .scene-copy{order:2}
  .scene-media{width:min(100%,560px);aspect-ratio:1.45/1;margin-left:auto!important;margin-right:auto!important}
  .scene-copy,.scene-a .scene-copy,.scene-b .scene-copy,.scene-c .scene-copy{justify-self:center;margin:0;text-align:center;padding:5px 8px 8px}
  .download{min-height:500px;padding-top:82px}
  .download-kicker{left:20px;top:48px}
  .download-ghost{width:52vw;opacity:.42}
  .download-ghost.ghost-left{left:-17%}
  .download-ghost.ghost-right{right:-17%}
}

@media (max-width:640px){
  .hero-visual{aspect-ratio:4/2.9}
  .hero-caption{margin-top:-22px}
  .hero h1{font-size:27px}
  .hero .store-button{height:52px;min-width:0}
  .flow-copy strong{font-size:19px}
  .download-logo{width:175px}
  .download h2{font-size:25px}
  .download-ghost{display:block;width:60vw;opacity:.26}
  .download-ghost.ghost-left{left:-27%}
  .download-ghost.ghost-right{right:-27%}
}

/* =========================================================
   v5 adjustments
   ========================================================= */

/* Header */
.header-download{
  width:154px;
  gap:0;
  background:var(--pink);
  box-shadow:0 8px 25px rgba(240,100,161,.24);
}
.header-download i{display:none}

/* Store badge: stable CSS triangle instead of text glyph */
.store-icon.play{
  position:relative;
  width:26px;
  height:26px;
  font-size:0;
  flex:0 0 26px;
}
.store-icon.play::before{
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:15px solid #fff;
  margin-left:4px;
}

/* HERO */
.hero{
  padding-top:112px;
  padding-bottom:34px;
}
.hero-logo-wrap{
  margin-bottom:-50px;
}
.hero-logo{
  width:min(410px,54vw);
}
.hero h1{
  white-space:nowrap;
  font-size:clamp(24px,2.55vw,34px);
  letter-spacing:.035em;
}
.hero-caption{max-width:760px}

/* PLAY: one-line titles and alternating text alignment */
.scene-copy h3{
  white-space:nowrap;
  font-size:clamp(20px,1.85vw,26px);
}
.scene-a .scene-copy,
.scene-c .scene-copy{
  text-align:right;
}
.scene-a .scene-copy p,
.scene-c .scene-copy p{
  margin-left:auto;
  margin-right:0;
}
.scene-b .scene-copy{
  text-align:left;
}
.scene-b .scene-copy p{
  margin-left:0;
  margin-right:auto;
}

/* Collection */
.replace-chip{display:none!important}

/* Footer: no repeated brand mark/catch */
.site-footer{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  padding:38px 50px 28px;
}
.footer-links{
  justify-content:center;
  flex-wrap:wrap;
}
.copyright{
  grid-column:auto;
  width:100%;
  text-align:center;
}
.footer-brand{display:none!important}
.floating-download{display:none!important}

@media (max-width:980px){
  .hero{padding-top:118px;padding-bottom:46px}
  .hero-logo{width:min(370px,58vw)}
}

@media (max-width:760px){
  .hero{padding-top:104px}
  .hero-logo{width:min(315px,72vw)}
  .hero h1{
    white-space:nowrap;
    font-size:clamp(20px,6vw,27px);
  }
  .scene-copy h3{white-space:normal}
  .scene-a .scene-copy,
  .scene-b .scene-copy,
  .scene-c .scene-copy{
    text-align:center;
  }
  .scene-a .scene-copy p,
  .scene-b .scene-copy p,
  .scene-c .scene-copy p{
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:420px){
  .hero h1{font-size:19px;letter-spacing:.01em}
}

/* =========================================================
   v6 adjustments
   ========================================================= */

/* Google Play mark: use a dedicated class so PLAY-section styles cannot leak into the icon */
.store-icon.google-play-icon{
  position:relative;
  width:26px;
  height:26px;
  flex:0 0 26px;
  font-size:0;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  background:none;
  border:0;
  border-radius:0;
}
.store-icon.google-play-icon::before{
  content:"";
  display:block;
  width:18px;
  height:20px;
  background:#fff;
  clip-path:polygon(14% 5%,92% 50%,14% 95%);
}

/* DOWNLOAD: larger background visuals and quieter one-line copy */
.download-content{
  max-width:760px;
  margin-top:20px;
}
.download-logo{
  width:300px;
  margin:0 auto 18px;
}
.download h2{
  white-space:nowrap;
  font-size:clamp(23px,2.25vw,30px);
  line-height:1.35;
  color:#756f89;
  font-weight:600;
  letter-spacing:.035em;
  margin-bottom:10px;
}
.download-ghost{
  width:min(62vw,920px);
  aspect-ratio:1.38/1;
  top:54%;
  opacity:.46;
  z-index:1;
}
.download-ghost.ghost-left{
  left:-10%;
  transform:translateY(-49%) rotate(-4deg);
}
.download-ghost.ghost-right{
  right:-10%;
  transform:translateY(-47%) rotate(5deg);
}
.download-ghost .asset-slot-label{opacity:.24}

@media (max-width:980px){
  .download-logo{width:270px}
  .download-ghost{width:min(68vw,720px)}
  .download-ghost.ghost-left{left:-22%}
  .download-ghost.ghost-right{right:-22%}
}
@media (max-width:760px){
  .download-content{max-width:92vw}
  .download-logo{width:235px}
  .download h2{font-size:24px;white-space:nowrap}
  .download-ghost{width:76vw;opacity:.34}
  .download-ghost.ghost-left{left:-34%}
  .download-ghost.ghost-right{right:-34%}
}
@media (max-width:520px){
  .download-logo{width:210px}
  .download h2{font-size:21px;letter-spacing:.015em}
  .download-ghost{width:88vw;opacity:.25}
  .download-ghost.ghost-left{left:-48%}
  .download-ghost.ghost-right{right:-48%}
}

/* =========================================================
   v8 adjustments
   - desktop navigation grouped on the right
   - editorial line breaks in body copy
   - ABOUT title stays on one line on smartphones
   ========================================================= */

@media (min-width:981px){
  .site-header{
    display:flex;
    grid-template-columns:none;
    gap:18px;
  }
  .brand{margin-right:auto;flex:0 0 auto}
  .desktop-nav{
    justify-self:auto;
    margin-left:auto;
    gap:30px;
  }
  .header-download{
    justify-self:auto;
    flex:0 0 154px;
    margin-left:4px;
  }
}

/* Preserve the requested sentence rhythm */
.scene-copy p br,
.more-copy p br{display:block}

@media (max-width:640px){
  .about-heading h2{
    white-space:nowrap;
    font-size:clamp(13px,4vw,18px);
    letter-spacing:0;
  }
}

/* =========================================================
   v9 PLAY text-edge alignment + line wrapping refinement
   ========================================================= */
@media (min-width:761px){
  /* Match the text blocks to the outer edges of the alternating image frames. */
  .scene-a .scene-copy,
  .scene-c .scene-copy{
    justify-self:end;
    width:min(100%,520px);
    max-width:520px;
    margin-left:0;
    margin-right:0;
    padding-left:18px;
    padding-right:0;
    text-align:right;
  }
  .scene-b .scene-copy{
    justify-self:start;
    width:min(100%,520px);
    max-width:520px;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:18px;
    text-align:left;
  }
  .scene-copy p{
    width:100%;
    max-width:520px;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
  .scene-a .scene-copy p,
  .scene-c .scene-copy p{margin-left:auto;margin-right:0}
  .scene-b .scene-copy p{margin-left:0;margin-right:auto}
}

/* Community copy should flow naturally without a forced line break. */
.more-copy p br{display:none}


/* =========================================================
   v10 mobile heading refinement
   ========================================================= */
.about-mobile-break{display:none}

@media (max-width:640px){
  /* ABOUT: deliberate two-line composition, with a useful type size. */
  .about-heading h2{
    white-space:normal;
    font-size:clamp(23px,6.25vw,27px);
    line-height:1.55;
    letter-spacing:.01em;
  }
  .about-mobile-break{display:block}

  /* PLAY: keep this short headline on a single line on phones. */
  .play-intro h2{
    white-space:nowrap;
    font-size:clamp(18px,5.05vw,21px);
    line-height:1.45;
    letter-spacing:-.015em;
  }
}

@media (max-width:380px){
  .play-intro h2{font-size:17.5px}
  .about-heading h2{font-size:22px}
}


/* =========================================================
   v11 mobile PLAY heading refinement
   ========================================================= */
.play-mobile-break{display:none}

@media (max-width:640px){
  .play-intro h2{
    white-space:normal;
    font-size:clamp(23px,6.25vw,27px);
    line-height:1.5;
    letter-spacing:.005em;
  }
  .play-mobile-break{display:block}
}

@media (max-width:380px){
  .play-intro h2{font-size:22px}
}