/* Pipjam marketing page v2: one day in Sunrise Valley, told by the scroll.
   Look: games/pipjam-ios/docs/direction/v2/DIRECTION-V2.md (§7 tokens, §8 skins, §9 moods).
   Fonts are self-hosted OFL files (/assets/fonts/OFL.txt). Nothing loads from a third party.
   Rule from the CEO: phones, cards, pills, buttons and their ledges are always upright and level. */

@font-face{font-family:"Baloo 2";src:url("/assets/fonts/Baloo2-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/Nunito-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/Nunito-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* time-of-day tokens, rewritten by pipjam.js (start: dawn) */
  --skyTop:#4E5FA8;--skyMid:#C98FB4;--skyLow:#FFD2A6;--sunDisc:#FFE6CC;--sunGlow:#FFC9A0;
  --farTop:#CDBFDC;--far:#A9A6CC;--midTop:#A2B4C0;--mid:#7FA6A6;--nearTop:#7AAE98;--near:#5A9284;--mid2:#4F8A7C;--foreTop:#3A7466;--fore:#183C3A;
  --haze:#FFD6CC;--hazeA:.6;--cloud:#FFE4EC;--cloudU:#E2B8CE;--cloudA:.85;--treeA:#3A8070;--treeB:#6FA894;
  --stone:#F7DCD0;--stoneLo:#DDB0A6;--stoneSide:#C7938E;--roof:#F27A6A;--snow:#FFE6EE;--trunk:#6B4A4A;--win:#2E6F75;
  --stars:.25;--lights:.35;--flies:0;--windows:.4;--shadowA:.25;

  /* constant UI and board (§7.3: the board never takes the sky's light) */
  --b-stone:#FBE6CF;--b-stoneLo:#E9B99C;--b-side:#D79A82;--b-cornice:#FF7B5C;--b-corniceLo:#D9573C;--b-niche:#2E8D88;--b-nicheDeep:#0E5A5C;
  --gold:#FFC93C;--gold-lip:#D0890B;--gold-ink:#4A2A00;--cream:#FFF7EA;--cream-lip:#C9B79B;--ink:#0F4643;--ink-soft:#2F6A64;
  --night-ink:#FFE3C8;

  --display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --text:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --g:clamp(16px,4vw,48px);
  --top:calc(68px + env(safe-area-inset-top,0px));
  --out:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;background:#08122E}
body{margin:0;color:var(--ink);font:700 1.0625rem/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip;background:transparent}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
.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{position:fixed;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:14px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 6px var(--ink);border-radius:12px}
.ph{background:#FFE36E;color:#5A3A00;border:1.5px dashed #B07A00;border-radius:6px;padding:0 .3em;font-weight:800;white-space:nowrap}

/* ===================================================================== the world */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.w-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--skyTop) 0%,var(--skyMid) 55%,var(--skyLow) 92%)}
.w-stars{position:absolute;inset:0 0 30% 0;opacity:var(--stars);background-repeat:repeat;background-size:420px 360px;
  background-image:
   radial-gradient(1.6px 1.6px at 12px 18px,#fff 98%,#0000),radial-gradient(1px 1px at 86px 72px,#fff 98%,#0000),radial-gradient(2px 2px at 150px 30px,#fff 98%,#0000),
   radial-gradient(1px 1px at 210px 120px,#fff 98%,#0000),radial-gradient(1.4px 1.4px at 268px 52px,#fff 98%,#0000),radial-gradient(1px 1px at 330px 160px,#fff 98%,#0000),
   radial-gradient(2px 2px at 392px 96px,#fff 98%,#0000),radial-gradient(1px 1px at 40px 200px,#fff 98%,#0000),radial-gradient(1.5px 1.5px at 120px 260px,#fff 98%,#0000),
   radial-gradient(1px 1px at 250px 230px,#fff 98%,#0000),radial-gradient(1.6px 1.6px at 300px 310px,#fff 98%,#0000),radial-gradient(1px 1px at 180px 330px,#fff 98%,#0000),
   radial-gradient(1.2px 1.2px at 360px 280px,#fff 98%,#0000),radial-gradient(1px 1px at 60px 120px,#fff 98%,#0000)}
.w-sun,.w-moon{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.w-sun .glow,.w-moon .glow{position:absolute;left:0;top:0;width:min(80vmin,720px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sunGlow) 90%,transparent),color-mix(in srgb,var(--sunGlow) 40%,transparent) 30%,transparent)}
.w-sun .disc{position:absolute;left:0;top:0;width:clamp(44px,6vmin,64px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--sunDisc);box-shadow:0 0 30px 6px color-mix(in srgb,var(--sunGlow) 70%,transparent)}
.w-moon .glow{width:min(50vmin,460px);background:radial-gradient(closest-side,rgba(159,180,255,.45),rgba(159,180,255,.12) 40%,transparent)}
.w-moon .disc{position:absolute;left:0;top:0;width:clamp(38px,5vmin,54px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:#F3F1E6;
  -webkit-mask:radial-gradient(circle at 74% 30%,#0000 40%,#000 41.5%);mask:radial-gradient(circle at 74% 30%,#0000 40%,#000 41.5%)}
.w-clouds{position:absolute;inset:0;opacity:var(--cloudA);will-change:transform}
.cloud{position:absolute;left:0;top:var(--ct);width:var(--cw);animation:drift var(--cd) linear infinite;animation-delay:var(--cdl)}
.cloud svg{width:100%;height:auto;overflow:visible}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
/* desktop: the copy column is on the left, so clouds drift only across the right part of the sky */
@media (min-width:960px){.cloud{animation-name:drift-d}}
@keyframes drift-d{0%{transform:translateX(46vw);opacity:0}14%{opacity:1}100%{transform:translateX(104vw);opacity:1}}
.w-layer{position:absolute;left:-15%;width:130%;bottom:0;will-change:transform}
.w-layer svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.w-haze{position:absolute;left:0;right:0;height:30%;will-change:transform;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--haze) calc(var(--hazeA)*100%),transparent) 60%,transparent)}
.w-flies{position:absolute;inset:40% 0 0 0;opacity:var(--flies)}
.w-flies i{position:absolute;width:5px;height:5px;border-radius:50%;background:#FBFFD0;box-shadow:0 0 10px 5px rgba(216,255,106,.55);
  animation:fly var(--fd) ease-in-out infinite alternate;animation-delay:var(--fdl);animation-play-state:var(--fly-run,paused)}
@keyframes fly{0%{transform:translate(0,0)}33%{transform:translate(var(--fx1),var(--fy1))}66%{transform:translate(var(--fx2),var(--fy2))}100%{transform:translate(var(--fx3),var(--fy3))}}

/* ===================================================================== header */
.top{position:fixed;z-index:30;isolation:isolate;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--g) 0;pointer-events:none}
.top::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(100% + 24px);background:linear-gradient(var(--skyTop) calc(100% - 18px),color-mix(in srgb,var(--skyTop) 0%,transparent));pointer-events:none}
.top > *{pointer-events:auto}
.top-right{display:flex;align-items:center;gap:8px}
.top nav{display:flex;gap:6px}
.pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:var(--cream);color:var(--ink);
  font:800 .95rem/1 var(--text);text-decoration:none;white-space:nowrap;box-shadow:0 4px 0 var(--cream-lip),0 10px 18px -10px rgba(10,30,40,.55);
  transition:transform .16s var(--out),box-shadow .16s var(--out)}
a.pill:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cream-lip),0 4px 10px -6px rgba(10,30,40,.5)}
@media (hover:hover) and (pointer:fine){a.pill:hover{transform:translateY(-1px)}}
/* the icon is a circle concentric with the pill's left end: equal 4px padding top, bottom and left,
   so its radius = pill radius - 4px and both curves share one centre */
.top .brand{padding-left:4px;font:800 1.2rem/1 var(--display)}
.brand img{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover}
.clock{padding:0 12px 0 8px;font-variant-numeric:tabular-nums;min-width:104px;justify-content:flex-start}
.clock-orb{width:22px;height:22px;border-radius:50%;flex:none;background:radial-gradient(circle at 40% 38%,#FFF6D8,#FFC93C 62%,#E79A10);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.clock.is-night .clock-orb{background:#F3F1E6;-webkit-mask:radial-gradient(circle at 74% 30%,#0000 40%,#000 41.5%);mask:radial-gradient(circle at 74% 30%,#0000 40%,#000 41.5%)}
.rm .clock,.no-clock .clock{display:none}
@media (max-width:640px){.top nav .hide-sm{display:none}.top .pill{height:38px;padding:0 12px;font-size:.88rem}.top .brand{font-size:1.08rem;padding-left:4px}.brand img{width:30px;height:30px}.clock{display:none}}
@media (max-width:370px){.top nav a[href="#play"]{display:none}}

/* ===================================================================== chapters */
main{position:relative;z-index:1}
.ch{position:relative;--fg:var(--ink);--halo:rgba(255,250,240,.78);color:var(--fg)}
.ch[data-tone="light"]{--fg:#FFF7EA;--halo:rgba(8,14,44,.56)}
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--top) + 30px) var(--g) 28px}
.motion .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.motion .ch-hero{height:170svh}
.motion .ch-play{height:520svh}
.motion .ch-ads{height:200svh}
.motion .ch-moods{height:400svh}
.motion .ch-shapes{height:330svh}
.motion .ch-hard{height:360svh}
.motion .ch-daily{height:340svh}
.motion .ch-hats{height:380svh}
.motion .ch-night{height:300svh}

.copy{position:relative;isolation:isolate;flex:none;width:min(100%,560px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.copy::before{content:"";position:absolute;z-index:-1;inset:-20px -30px;border-radius:60px;background:var(--halo);filter:blur(34px);pointer-events:none}
.title{font-size:clamp(2.35rem,9.6vw,4.2rem);letter-spacing:-.01em;color:var(--fg)}
.ch[data-tone="dark"] .title{text-shadow:0 .05em 0 rgba(255,255,255,.55)}
.ch[data-tone="light"] .title{text-shadow:0 .055em 0 rgba(10,16,48,.7),0 .1em .3em rgba(10,16,48,.35)}
.kicker-s{font:800 1.15rem/1.2 var(--text);color:var(--fg)}
.body,.cap{font:800 clamp(1.05rem,4.2vw,1.3rem)/1.45 var(--text);color:var(--fg);max-width:34ch}
.ch[data-tone="light"] .body,.ch[data-tone="light"] .cap{text-shadow:0 1px 2px rgba(8,14,44,.45)}
.caps{display:grid;width:100%;justify-items:center}
.motion .caps > *{grid-area:1/1;opacity:0}
.rm .caps,.no-js .caps,.flow .caps{gap:14px}
.cap-h{display:block;font:800 1.6em/1 var(--display);margin-bottom:6px;color:var(--b-cornice);text-shadow:0 .05em 0 #fff}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tabs li{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:rgba(255,247,234,.75);color:var(--ink);font:800 .92rem/1 var(--text);
  box-shadow:0 3px 0 rgba(15,70,67,.18);transition:background-color .25s ease,color .25s ease}
.tabs li.on{background:var(--gold);color:var(--gold-ink);box-shadow:0 3px 0 var(--gold-lip)}

.scene{position:relative;flex:1 1 auto;width:100%;min-height:0}
.scene-in{position:absolute;left:0;top:0;transform-origin:0 0}
.rm .scene,.no-js .scene{min-height:min(70vw,420px)}
.flow .scene{flex:none}

/* desktop: copy left, scene right (and a phone column when a chapter has one) */
@media (min-width:960px){
  .stage{display:grid;grid-template-columns:minmax(340px,.82fr) 1.18fr;grid-template-rows:1fr;align-items:center;column-gap:4vw;padding:calc(var(--top) + 34px) max(48px,5vw) 40px}
  .stage:has(> .phone){grid-template-columns:minmax(320px,.8fr) 1fr auto}
  .copy{text-align:left;align-items:flex-start;width:auto;max-width:520px;align-self:start;margin-top:2vh}
  .tabs{justify-content:flex-start}
  .scene{height:100%;align-self:stretch}
  .caps{justify-items:start}
  .copy--center{grid-column:1/-1;text-align:center;align-items:center;justify-self:center;align-self:center;margin-top:0}
}

/* ===================================================================== hero */
.ch-hero .stage{justify-content:flex-start}
.logo{font-size:clamp(4.6rem,22vw,10rem);line-height:.9;color:#fff;letter-spacing:-.02em;
  text-shadow:0 .05em 0 #26285E,0 .09em .12em rgba(10,16,48,.45)}
.logo-word{display:inline-block}
.kicker{font:800 clamp(1.3rem,5vw,2rem)/1.1 var(--display);color:#FFF7EA;text-shadow:0 2px 0 rgba(10,16,48,.55)}
.lead{font:800 clamp(1rem,3.8vw,1.2rem)/1.45 var(--text);color:#FFF7EA;max-width:36ch;text-shadow:0 1px 3px rgba(10,16,48,.55)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:6px}
.ch-hero .scene{margin-top:auto;flex:0 0 auto;height:min(44vw,260px);max-height:30svh}
.scroll-cue{flex:none;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;font:800 .85rem/1 var(--text);color:#E8F6F0;text-shadow:0 1px 3px rgba(5,30,30,.8)}
.scroll-cue span{display:block;width:10px;height:10px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-3px) rotate(45deg);animation:cue 1.6s var(--out) infinite}
@keyframes cue{0%{transform:translateY(-5px) rotate(45deg);opacity:0}40%{opacity:1}100%{transform:translateY(3px) rotate(45deg);opacity:0}}
.rm .scroll-cue,.no-js .scroll-cue,.flow .scroll-cue{display:none}
@media (min-width:960px){
  .ch-hero .stage,.ch-night .stage{display:flex}
  .ch-hero .scene{height:min(26vw,300px);max-height:34svh;width:min(100%,900px);align-self:center}
  .ch-night .scene{width:min(100%,1000px);align-self:center}
  .copy--center{max-width:800px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 26px;border-radius:999px;font:800 1.05rem/1.1 var(--text);text-decoration:none;cursor:pointer;border:0;
  transition:transform .16s var(--out),box-shadow .16s var(--out)}
.btn--cream{background:var(--cream);color:var(--ink);box-shadow:0 6px 0 var(--cream-lip),0 14px 22px -12px rgba(10,30,40,.6)}
.btn--cream:active{transform:translateY(5px);box-shadow:0 1px 0 var(--cream-lip)}
@media (hover:hover) and (pointer:fine){.btn--cream:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--cream-lip),0 16px 24px -12px rgba(10,30,40,.6)}}
.store-soon{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:9px 24px 9px 12px;border-radius:999px;background:var(--gold);color:var(--gold-ink);
  box-shadow:0 6px 0 var(--gold-lip),0 14px 22px -10px rgba(90,50,0,.6);font:800 1rem/1.15 var(--text);text-align:left}
.store-soon .dot{flex:none;width:36px;height:36px;border-radius:50%;background:#FFF6D6;display:grid;place-items:center;box-shadow:inset 0 -3px 0 #F2D27A}
.store-soon .dot svg{width:18px;height:18px}
.store-soon b{display:block;font:800 1.22rem/1 var(--display)}
.store-soon small{display:block;font-size:.82rem;font-weight:800;opacity:.8}

/* ===================================================================== jellies */
.j{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w)*.86)}
.j-sh{position:absolute;left:12%;right:12%;bottom:-5%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(6,40,36,.5),rgba(6,40,36,0));transform-origin:50% 50%}
.j-hop{position:absolute;inset:0;transform-origin:50% 100%}
.j-br{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 2.4s ease-in-out infinite;animation-delay:var(--bd,0s)}
.j-br svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.j-br .j-alt{opacity:0}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.965)}}
.j[data-tap]{cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.zz{position:absolute;font:900 22px/1 var(--text);color:#FFF1D6;text-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none;opacity:0}
.zz.on{animation:zz 2.4s ease-out infinite}
.zz.on:nth-of-type(2){animation-delay:1.2s}
@keyframes zz{0%{transform:translate(0,0) scale(.7);opacity:0}20%{opacity:.95}100%{transform:translate(14px,-40px) scale(1.15);opacity:0}}
.bubble{position:absolute;z-index:5;padding:7px 13px 8px;border-radius:16px;background:#FFF7EA;color:#0F4643;font:800 15px/1.15 var(--text);white-space:nowrap;
  box-shadow:0 0 0 2px rgba(15,70,67,.14),0 6px 14px rgba(0,30,30,.25);pointer-events:none;transform-origin:30% 100%;opacity:0}
.bubble::after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:#FFF7EA;border-bottom:0}
.spark{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;pointer-events:none}
.burst{position:absolute;border-radius:50%;opacity:0;pointer-events:none;border:6px solid #FFE27A;box-shadow:0 0 24px 6px rgba(255,214,90,.6)}
.slam-word{position:absolute;font:800 44px/1 var(--display);color:#fff;white-space:nowrap;text-shadow:0 3px 0 #D9573C,0 6px 12px rgba(120,40,10,.4);opacity:0;pointer-events:none}

/* sandstone (constant board light) */
.board{position:absolute}
.board svg{position:absolute;inset:0;overflow:visible}
.lamp{position:absolute;width:16px;height:30px;margin-left:-8px}
.lamp i{position:absolute;left:50%;top:14px;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,197,106,.85),rgba(255,176,80,.25) 45%,transparent);opacity:var(--lights,0)}
.lamp b{position:absolute;left:3px;top:8px;width:10px;height:16px;border-radius:4px;background:color-mix(in srgb,#FFD27A calc(var(--lights,0)*100%),#F3E2C8);box-shadow:0 -2px 0 #6B4A3A,0 2px 0 #6B4A3A}
.lamp::before{content:"";position:absolute;left:7px;top:0;width:2px;height:8px;background:#6B4A3A}
.pedestal{position:absolute;overflow:hidden;pointer-events:none;padding:0 4px;margin-left:-4px;box-sizing:content-box}
.pedestal i{display:block;height:60px;margin:0 -4px;transform:translateY(60px);border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,transparent 0 80%,rgba(176,112,90,.35) 80%),repeating-linear-gradient(180deg,#E9B99C 0 13px,#E2AE90 13px 14.5px);
  box-shadow:inset 0 3px 0 #FFF3E2}
.block{position:absolute}
.block svg{position:absolute;inset:0;overflow:visible}

/* perk cards and stones (Daily Run) */
.perk{position:absolute;width:118px;height:132px;border-radius:20px;background:linear-gradient(#FFFFFF,#FFF2DC);color:var(--ink);
  box-shadow:0 6px 0 var(--cream-lip),0 14px 22px -12px rgba(0,20,30,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  font:800 15px/1.1 var(--text);opacity:0}
.perk svg{width:40px;height:40px}
.perk.pick{box-shadow:0 0 0 4px var(--gold),0 6px 0 4px var(--gold-lip),0 14px 22px -10px rgba(0,20,30,.6)}
.perk-take{display:inline-block;margin-top:2px;padding:4px 12px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:13px;box-shadow:0 3px 0 var(--gold-lip)}
.stone{position:absolute;width:96px;height:34px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#FFF6E6,#E9C9A4 70%);box-shadow:0 7px 0 #B8916C,0 14px 16px -6px rgba(0,0,0,.45)}
.stone-n{position:absolute;left:-30px;width:24px;top:4px;text-align:center;font:800 16px/1 var(--display);color:#FFF7EA;text-shadow:0 1px 3px rgba(8,14,44,.7)}
.stone.done{background:radial-gradient(ellipse at 50% 35%,#FFF4C4,#FFD45E 70%);box-shadow:0 7px 0 #D0890B,0 14px 16px -6px rgba(0,0,0,.45)}
.streak{position:absolute;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 10px;border-radius:999px;background:var(--cream);color:var(--ink);font:800 15px/1 var(--text);
  box-shadow:0 4px 0 var(--cream-lip);white-space:nowrap}
.streak svg{width:22px;height:22px}
.hat-tag{position:absolute;height:38px;display:flex;align-items:center;padding:0 16px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font:800 16px/1 var(--text);box-shadow:0 4px 0 var(--gold-lip);white-space:nowrap}
.plinth{position:absolute;border-radius:14px;background:linear-gradient(var(--b-stone),var(--b-stoneLo));box-shadow:0 8px 0 var(--b-side),0 22px 24px -10px rgba(0,0,0,.5)}
.plinth::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:14px 14px 0 0;background:var(--b-cornice);box-shadow:0 3px 0 var(--b-corniceLo)}
.night-lamp{position:absolute;width:20px;height:110px}
.night-lamp::before{content:"";position:absolute;left:8px;top:30px;width:4px;height:80px;background:#3A2E3A;border-radius:2px}
.night-lamp b{position:absolute;left:0;top:4px;width:20px;height:26px;border-radius:6px;background:#FFD27A;box-shadow:0 -3px 0 #3A2E3A,0 3px 0 #3A2E3A}
.night-lamp i{position:absolute;left:10px;top:18px;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,197,106,.6),rgba(255,176,80,.18) 45%,transparent)}

/* ===================================================================== promise sign */
.ch-ads .stage{justify-content:center}
@media (min-width:960px){.ch-ads .stage{display:flex}}
.sign{position:relative;width:min(100% - 28px,880px);margin:auto 0;filter:drop-shadow(0 26px 30px rgba(20,60,80,.28))}
.sign-cornice{height:22px;margin:0 -10px;border-radius:8px;background:var(--b-cornice);box-shadow:0 6px 0 var(--b-corniceLo)}
.sign-face{position:relative;margin-top:6px;padding:clamp(22px,4vw,44px) clamp(18px,4vw,48px) clamp(22px,3vw,36px);background:var(--b-stone);
  background-image:repeating-linear-gradient(180deg,transparent 0 32px,rgba(233,185,156,.55) 32px 34px);text-align:center;color:var(--ink);border-radius:0 0 6px 6px}
.sign-plinth{height:16px;margin:0 -14px;border-radius:5px;background:var(--b-stoneLo);box-shadow:inset 0 3px 0 #FFF3E2,0 7px 0 var(--b-side)}
.promise{font-size:clamp(2.7rem,11.5vw,6.6rem);line-height:.95;color:var(--ink);letter-spacing:-.015em}
.promise .w{display:inline-block}
.promise .w--gold{color:#C8452B;text-shadow:0 .05em 0 rgba(255,123,92,.45)}
.niches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,22px);margin:clamp(18px,3vw,30px) auto clamp(14px,2.4vw,24px);max-width:640px}
.niches li{display:flex;flex-direction:column;align-items:center;gap:10px}
.niche{position:relative;display:block;overflow:hidden;width:100%;max-width:150px;aspect-ratio:1/1.05;border-radius:999px 999px 8px 8px;
  background:linear-gradient(90deg,rgba(14,90,92,.55),rgba(14,90,92,.12) 35%,rgba(127,211,198,.25)),var(--b-niche);box-shadow:inset 0 -6px 0 #FFF7EA}
.niche .j{left:50%;top:auto;bottom:10%;margin-left:calc(var(--w)*-.5)}
.niche-t{font:800 clamp(.9rem,3.2vw,1.15rem)/1.2 var(--text);color:var(--ink);max-width:14ch}
.fine{font:700 clamp(.95rem,3.2vw,1.08rem)/1.5 var(--text);color:#1F4F4A;max-width:52ch;margin:0 auto}

/* ===================================================================== phones (always upright) */
.phone{position:relative;margin:0;flex:none;height:min(66svh,600px);aspect-ratio:600/1300;border-radius:13%/6%;padding:3.2%;
  background:linear-gradient(160deg,#2D6B67,#0E3533 55%,#0A2725);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 8px 0 #0A2725,0 30px 46px -20px rgba(0,20,30,.7)}
.phone--shot{aspect-ratio:640/1391}
.phone > video,.phone > img{width:100%;height:100%;object-fit:cover;border-radius:10.5%/4.8%;background:#9FD8E6}
.vid-toggle{position:absolute;left:-58px;bottom:6%;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(15,70,67,.82);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.vid-toggle svg{width:20px;height:20px;fill:currentColor}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed="true"] .i-play{display:block}
.vid-toggle[aria-pressed="true"] .i-pause{display:none}
/* mobile: the phone rises into the scene for the chapter's last beat */
@media (max-width:959px){
  .motion .stage > .phone{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));height:min(58svh,520px);margin-left:calc(min(58svh,520px)*-.2308);opacity:0;visibility:hidden}
  .motion .stage > .phone--shot{margin-left:calc(min(58svh,520px)*-.23)}
}
@media (min-width:960px){.stage > .phone{height:min(64svh,580px)}}
.rm .stage > .phone,.no-js .stage > .phone,.flow .stage > .phone{margin-top:22px}

/* ===================================================================== ground: questions + footer */
.ground{position:relative;z-index:2;background:linear-gradient(180deg,#12283E 0,#0B1A2C 40%,#070F1E);color:#E8EEF8;padding:0 0 0}
.ground-edge{position:absolute;left:0;right:0;top:-88px;width:100%;height:90px;fill:#12283E}
.wrap{width:min(100% - 2*var(--g),1180px);margin-inline:auto}
.ground-grid{display:grid;gap:36px;padding:56px 0 70px}
@media (min-width:960px){.ground-grid{grid-template-columns:.85fr 1.15fr;gap:64px;padding:80px 0 100px}}
.ground .title{color:#fff;text-shadow:0 .055em 0 rgba(0,0,0,.5)}
.faq-head > p{margin-top:12px;font-size:1.05rem;color:#C9D6EA}
.faq-head a{color:#FFE3C8;text-underline-offset:3px;text-decoration-thickness:2px}
.comfort{margin-top:30px;padding:22px 24px;border-radius:24px;background:rgba(255,247,234,.07);box-shadow:inset 0 0 0 2px rgba(255,236,200,.14)}
.comfort h3{font-size:1.4rem;color:#FFE3C8;margin-bottom:10px}
.comfort li{position:relative;padding-left:26px;margin:8px 0;color:#DDE6F4}
.comfort li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 2px 0 var(--gold-lip)}
.faq-list{display:grid;gap:18px;align-content:start}
.faq-list details{background:var(--cream);color:var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--cream-lip),0 18px 26px -16px rgba(0,0,0,.7)}
.faq-list summary{list-style:none;cursor:pointer;padding:18px 58px 18px 22px;position:relative;font:800 1.18rem/1.25 var(--display)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--gold);box-shadow:0 3px 0 var(--gold-lip)}
/* only the glyph turns (+ to x); the button and its ledge never transform */
.faq-list summary::before{content:"";position:absolute;z-index:1;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 6h2v5h5v2h-5v5h-2v-5H6v-2h5z' fill='%234A2A00'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .25s var(--out)}
.faq-list details[open] summary::before{transform:rotate(45deg)}
.faq-list details p{padding:0 22px 20px;color:#1F524E;line-height:1.6}
.foot{border-top:2px solid rgba(255,236,200,.1);padding:28px 0 calc(32px + env(safe-area-inset-bottom,0px));color:#B9C6DA}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.foot-brand{display:flex;align-items:center;gap:10px;font:800 1.4rem/1 var(--display);color:#fff}
.foot-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.foot ul{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:800}
.foot a{color:#fff;text-underline-offset:3px}
.foot small{display:block;margin-top:18px;font-size:.82rem;line-height:1.5;color:#8C9AB2;font-weight:700}

/* ===================================================================== reduced motion / no JS: calm static story */
.rm .stage,.no-js .stage,.flow .stage{padding-bottom:64px}
.rm .ch + .ch .stage,.no-js .ch + .ch .stage,.flow .ch + .ch .stage{padding-top:48px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .world *{transition:opacity .6s ease}
}
.ch-night .cap,.ch-night .body{max-width:none}
.ch-night .cap{display:flex;flex-direction:column;align-items:center;gap:14px}
.ch-night .store-soon{margin-top:12px}
.ch-night .copy--center{max-width:640px}

/* ===================================================================== legal dialog (privacy, support) */
html.legal-open{overflow:hidden}
.legal{position:fixed;inset:0;z-index:60;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;
  background:rgba(6,12,38,.64);display:none;place-items:center;overflow:hidden;color:var(--ink)}
.legal[open]{display:grid}
.legal::backdrop{background:transparent}
.legal-box{position:relative;width:min(100%,780px);max-height:calc(100vh - 40px);max-height:calc(100svh - 40px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--cream);border-radius:26px;box-shadow:0 8px 0 var(--cream-lip),0 30px 60px -20px rgba(0,0,0,.65);padding:clamp(20px,5vw,48px);padding-top:clamp(18px,4vw,40px)}
.legal-close{position:sticky;top:0;float:right;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin:0 0 10px 14px;border-radius:50%;
  background:var(--gold);box-shadow:0 4px 0 var(--gold-lip);transition:box-shadow .12s var(--out)}
.legal-close svg{width:22px;height:22px;fill:none;stroke:var(--gold-ink);stroke-width:3;stroke-linecap:round;transition:transform .12s var(--out)}
.legal-close:active{box-shadow:0 1px 0 var(--gold-lip)}
.legal-close:active svg{transform:translateY(3px)}
.legal-doc h1{font-size:clamp(2rem,7vw,3rem);color:var(--ink);margin:4px 0 6px}
.legal-meta{font-weight:800;color:var(--ink-soft)}
.legal-text{clear:both;margin-top:18px;overflow-wrap:anywhere}
.legal-text > p:first-child{font-size:1.08rem}
.legal-text h2{font-size:clamp(1.4rem,4.4vw,1.8rem);margin:36px 0 10px;color:var(--ink)}
.legal-text p,.legal-text li{line-height:1.65;max-width:68ch}
.legal-text p + p{margin-top:14px}
.legal-text ul{padding-left:22px;margin:12px 0;list-style:disc}
.legal-text li{margin:8px 0}
.legal-text li::marker{color:var(--b-cornice)}
.legal-text a{color:#0B6E69;text-decoration-thickness:2px;text-underline-offset:3px}
.legal-text strong{font-weight:800}
.legal-text .legal-foot{margin-top:36px;padding-top:18px;border-top:2px dashed var(--b-stoneLo);color:var(--ink-soft);font-size:.95rem}
/* short screens (small phones, landscape laptops): tighter type so the scene keeps room */
@media (max-height:760px){
  .title{font-size:clamp(1.9rem,7.6vw,3.2rem)}
  .body,.cap{font-size:clamp(.95rem,3.8vw,1.1rem);line-height:1.4}
  .kicker-s{font-size:1rem}
  .copy{gap:8px}
  .logo{font-size:clamp(4rem,18vw,7rem)}
  .promise{font-size:clamp(2.3rem,10vw,4.6rem)}
  .niche{max-width:110px}
}
@media (max-height:860px) and (min-width:600px){
  .promise{font-size:clamp(2.6rem,8.5vh,5.4rem)}
  .niche{max-width:min(150px,17vh)}
  .sign-face{padding-top:24px;padding-bottom:20px}
  .niches{margin:16px auto 14px}
}

/* ===================================================================== flow mode (phones, short screens, touch tablets)
   Every chapter is a normal block: heading, text, then its scene, all visible without pinning. Each scene plays its
   little sequence once, in real time, when it comes into view. */
.flow .stage{min-height:0;height:auto}
.flow .ch-hero .stage{padding-top:calc(var(--top) + 28px)}
.flow .ch-hero .scene{margin-top:22px}
.flow .stage > .phone{height:min(70svh,560px);max-width:80vw;position:relative;left:auto;bottom:auto;margin-left:0;opacity:1;visibility:visible}
.flow .w-sun,.flow .w-moon,.flow .w-clouds{display:none}
.flow .ch .copy > *{opacity:0;transform:translateY(14px);transition:opacity .28s ease-out,transform .28s var(--out)}
.flow .ch .copy .caps > *{opacity:1}
.flow .ch.in .copy > *{opacity:1;transform:none}
.flow .ch-ads .sign{opacity:0;transition:opacity .28s ease-out}
.flow .ch-ads.in .sign{opacity:1}
@media (min-width:960px){.flow .stage{display:flex;flex-direction:column;align-items:center}.flow .copy{align-self:center;text-align:center;align-items:center;margin-top:0}.flow .tabs{justify-content:center}.flow .caps{justify-items:center}.flow .scene{width:min(100%,760px)}}

/* QA pass 1 fixes */
.scroll-cue{width:max-content;margin-inline:auto;padding:8px 16px;border-radius:999px;background:rgba(8,14,44,.62);color:#FFF7EA;text-shadow:none}
.flow .ch-ads .stage{padding-bottom:88px}
.flow .ch-play .stage{padding-bottom:24px}
.flow .ch-ads .stage{padding-top:8px}
.flow .ch-moods .stage{padding-top:40px}
.flow .ch-night .caps{gap:40px}
.flow .ch-night .stage{padding-bottom:150px}
.flow .vid-toggle{left:50%;bottom:-60px;margin-left:-22px}
.flow .stage > .phone--video{margin-bottom:64px}
@media (max-width:400px){.tabs{gap:6px}.tabs li{height:32px;padding:0 10px;font-size:.84rem}}
.no-js .scene-shot{display:block;width:min(260px,70vw);height:auto;margin:0 auto;border-radius:22px;box-shadow:0 8px 0 #0A2725,0 24px 36px -18px rgba(0,20,30,.6)}
.no-js .scene{display:flex;align-items:center;justify-content:center;min-height:0;padding:12px 0}
.js .scene-shot{display:none}