/* Home page only (loaded after site.css). Candy pink, cream and gold, with the app's world pictures. */
body.home{background:var(--cream);background-image:none;color:var(--ink)}
.home h1,.home h2{text-shadow:none}
.home h2{color:var(--p700)}

/* header sits on top of the hero picture */
.home .site-header{position:absolute;left:0;right:0;top:0}
.home .brand{display:none}
.home .site-header .wrap{justify-content:center;padding-top:12px}
.home .nav{background:rgba(255,247,236,.92);color:var(--ink);border-radius:999px;padding:4px 14px;box-shadow:0 4px 0 rgba(120,40,100,.18);backdrop-filter:blur(6px)}
.home .nav a{opacity:1;font-weight:600}
/* the language flag sits next to the nav pill, on the same row */
.home .site-header .wrap{flex-wrap:nowrap;gap:8px}
.home .site-header .langbtn{box-shadow:0 4px 0 rgba(120,40,100,.18),0 4px 10px rgba(20,5,60,.15)}
@media(max-width:420px){.home .site-header .wrap{padding-left:8px;padding-right:8px;gap:6px}.home .site-header .langbtn{width:36px;height:36px;border-width:2.5px}}
@media(max-width:374px){.home .site-header .nav{font-size:.8rem;gap:2px 7px;padding:2px 8px}}

/* hero: the logo and headline, the gameplay phone, then the words and buttons (one card on wide screens, two cards with the phone between on a phone) */
.hero2{position:relative;padding:68px 0 56px;color:var(--ink);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* one wide picture of the candy world behind the hero, a very slow zoom in and out (CSS only), a soft veil on top so the text stays readable */
.hero-bg .s1{position:absolute;inset:0;background:url(/assets/img/hero-world-sm.webp) center/cover no-repeat;transform-origin:50% 45%;animation:heroZoom 26s ease-in-out infinite alternate;will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 38%,rgba(255,247,236,.0),rgba(255,236,246,.28) 70%),linear-gradient(180deg,rgba(255,215,236,.18),rgba(255,247,236,.0) 55%,rgba(255,247,236,.92) 100%)}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.14)}}
.hero2-grid{display:grid;gap:18px;align-items:center;justify-items:stretch}
.hero-head,.hero-body{background:rgba(255,247,236,.94);padding:16px 20px 18px;box-shadow:0 8px 0 rgba(150,50,110,.2),0 20px 44px rgba(110,30,90,.22);text-align:center;border-radius:30px}
.hero-body{padding-top:22px}
.hero-logo{width:min(250px,68%);margin:0 auto 4px;height:auto;aspect-ratio:496/310}
.tag2{display:inline-block;background:var(--yellow);color:#6a4300;border-radius:999px;padding:3px 14px;font-size:.88rem;font-weight:600;margin:0 0 8px;box-shadow:0 3px 0 rgba(150,100,0,.25)}
.hero-head h1{font-size:clamp(1.75rem,7.2vw,3rem);color:var(--p700);margin:0}
.hero-body .lead{font-size:1.06rem;color:#4b3a7a;margin:0 auto 1.1em;max-width:30em}
.hero-body .cta-row{justify-content:center}
.btn.big{font-size:1.2rem;padding:15px 34px}
.small-note{margin:12px 0 0;font-size:.92rem;color:var(--muted)}
.store-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}

/* store buttons: light candy buttons, "coming soon" as the small label above the store name */
.home .badge{background:#fff;color:var(--ink);border:2px solid #ffc2df;border-radius:999px;min-width:170px;padding:7px 22px 8px;align-items:center;text-align:center;box-shadow:0 5px 0 rgba(224,48,127,.22)}
.home .badge small{color:#8a5a00;opacity:1;font-weight:600;font-size:.74rem;letter-spacing:.2px}
.home .badge strong{color:var(--p700);font-size:1.15rem}
.home .badge.soon{border-style:solid}
.home .badge:not(.soon){background:linear-gradient(180deg,#ff7cbb,var(--pink));border-color:transparent;box-shadow:0 5px 0 var(--pink-d)}
.home .badge:not(.soon) small,.home .badge:not(.soon) strong{color:#fff}
.home .badge:not(.soon):hover{transform:translateY(-1px)}
.final .badge{border-color:#fff}

/* the gameplay phone: clips play one after another and fade into each other */
.hero-art2{position:relative;display:flex;flex-direction:column;align-items:center;padding:4px 0 2px}
.home .hero-phone{width:min(292px,74vw);padding:9px;border-radius:44px}
.clips{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:540/1170;background:#f3d8ee}
.clips .v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;display:block}
.clips .v.on{opacity:1}
.clip-dots{display:flex;gap:7px;margin-top:14px}
.clip-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 2px 0 rgba(150,50,110,.25);transition:width .3s,background .3s}
.clip-dots i.on{width:26px;border-radius:9px;background:var(--pink)}
.hero-art2 .jelly{position:absolute;width:74px;filter:drop-shadow(0 8px 0 rgba(120,20,80,.22))}
.hero-art2 .j1{left:0;bottom:8%;transform:rotate(-8deg);animation:bob 4s ease-in-out infinite}
.hero-art2 .j2{right:0;top:8%;transform:rotate(8deg);animation:bob 4.6s ease-in-out -1s infinite}

/* bands */
.band2{padding:64px 0;position:relative}
.cream2{background:#ffeef6}
.plain2{background:var(--cream)}
.band2 .section-lead{color:#5b4a8a;opacity:1}
.chip-gold{display:inline-block;background:var(--yellow);color:#6a4300;font-weight:700;border-radius:999px;padding:3px 14px;font-size:.88rem;margin-bottom:10px;box-shadow:0 3px 0 rgba(150,100,0,.25)}
.split{display:grid;gap:30px;align-items:center}
.split-art{display:flex;justify-content:center}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding:0 0 0 38px;margin:0 0 12px}
.ticks li::before{content:"\2713";position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem;box-shadow:0 3px 0 var(--green-d)}
.home .card{box-shadow:0 6px 0 rgba(224,48,127,.16)}
.home .card h3{color:var(--p700)}

/* feature rows with real screenshots */
.feat-row{display:grid;gap:22px;align-items:center;margin:0 0 46px;justify-items:center;text-align:center}
.feat-row:last-child{margin-bottom:0}
.feat-text h3{font-size:1.6rem;color:var(--p700)}
.feat-text p{max-width:30em;margin-left:auto;margin-right:auto}
/* light phone frame: white bezel with a pink rim (no dark purple blocks) */
.home .phone{background:#fff;box-shadow:0 0 0 3px #ffc2df,0 18px 40px rgba(110,30,90,.3),0 8px 0 rgba(224,48,127,.2)}
.home .phone::before{display:none}
.home .phone img{background:#f3d8ee}

/* lands */
.lands{background:linear-gradient(180deg,var(--cream),#ffe3f0)}
.land-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.land{margin:0;position:relative;border-radius:26px;overflow:hidden;box-shadow:0 6px 0 rgba(224,48,127,.22);aspect-ratio:2/3;background:#f6cfe6}
.land img{width:100%;height:100%;object-fit:cover}
.land figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(255,247,236,.94);color:var(--p700);font-weight:700;border-radius:999px;padding:5px 10px;font-size:.95rem;text-align:center}

/* story */
.story2{background:linear-gradient(180deg,#ffe3f0,var(--cream))}
.story2 .wrap{display:grid;gap:26px;align-items:center}
.story2 p{color:#4b3a7a}
/* the opening scene: Grandma's kitchen the morning after, chocolate footprints out the door, Grandma in front */
.scene-art{position:relative;display:block;width:min(380px,82%);margin:0 auto 18px}
.scene-art img.scene{width:100%;border-radius:30px;border:5px solid #fff;box-shadow:0 8px 0 rgba(150,50,110,.2),0 20px 40px rgba(110,30,90,.25);transform:rotate(-1.5deg)}
.scene-art img.gran2{position:absolute;left:-12%;bottom:-6%;width:42%;filter:drop-shadow(0 8px 0 rgba(60,20,90,.22))}
@media(min-width:900px){.story2 .wrap{grid-template-columns:minmax(0,380px) 1fr;gap:64px}.scene-art{width:100%;margin:0 0 18px 30px}}

/* faq + final */
.home details{background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(224,48,127,.16)}
.home details summary::after{background:var(--pink);color:#fff}
.final{background:linear-gradient(180deg,#ff8cc4,#ff4fa3);color:#fff;padding-top:70px;overflow:hidden}
.final h2{color:#fff;text-shadow:0 3px 0 rgba(150,20,90,.3)}
.final .section-lead{color:#fff}
.final .btn.pink{background:linear-gradient(180deg,#ffe07a,var(--yellow));color:#5a3b00;box-shadow:0 5px 0 var(--yellow-d),0 10px 18px rgba(120,20,80,.3);text-shadow:none}
.final-jelly{width:96px;margin:-20px auto 6px;filter:drop-shadow(0 8px 0 rgba(120,20,80,.25))}
.home .site-footer{margin-top:0;color:#fff;background:linear-gradient(180deg,#e0408f,#c42a78)}

@media(min-width:760px){
  .hero2{padding:92px 0 80px}
  /* one card on the left (head above, body below, joined), the phone on the right */
  .hero2-grid{grid-template-columns:1.1fr .9fr;grid-template-rows:1fr 1fr;column-gap:56px;row-gap:0}
  .hero-head{grid-column:1;grid-row:1;align-self:end;text-align:left;border-radius:34px 34px 0 0;padding:30px 40px 6px;box-shadow:none}
  .hero-body{grid-column:1;grid-row:2;align-self:start;text-align:left;border-radius:0 0 34px 34px;padding:8px 40px 34px;box-shadow:0 8px 0 rgba(150,50,110,.2),0 24px 50px rgba(110,30,90,.22)}
  .hero-art2{grid-column:2;grid-row:1/3}
  .hero-head{box-shadow:0 -2px 0 rgba(150,50,110,.0),-0px -0px 0 rgba(0,0,0,0)}
  .hero-logo{margin-left:0;width:min(280px,64%)}
  .hero-body .cta-row,.store-row{justify-content:flex-start}
  .hero-head h1{font-size:clamp(2.2rem,3.6vw,3rem)}
  .home .hero-phone{width:min(330px,28vw);min-width:290px}
  .hero-art2 .jelly{width:96px}
  .hero-art2 .j1{left:-4%}.hero-art2 .j2{right:-4%}
  .split{grid-template-columns:.8fr 1.2fr;gap:56px}
  .feat-row{grid-template-columns:1fr 1.1fr;text-align:left;gap:56px}
  .feat-row.rev .feat-art{order:2}
  .feat-text p{margin-left:0}
  .land-grid{grid-template-columns:repeat(4,1fr);gap:18px}
}
@media(min-width:900px){
  .hero-bg .s1{background-image:url(/assets/img/hero-world.webp)}
}
@media(max-width:420px){.home .nav{font-size:.9rem;padding:2px 10px}}
@media(prefers-reduced-motion:reduce){.clips .v{transition:none}.hero-bg .s1{animation:none}}
/* other languages have longer nav words: a smaller nav and more room above the hero card when the nav wraps to two lines */
@media(max-width:480px){html:not([lang="en"]) .home .nav{font-size:.84rem;gap:2px 9px}html:not([lang="en"]) .home .hero2{padding-top:104px}}