/* Vibe Story landing page (index.html, the game lives at /play).
   It is the app's start screen (Paper look, design concept A "Vystrihovačka") turned into a page: the hero is the same
   scene (scenery SVG copied from play.html, heroes from js/ui/art.js), and the sections below are coloured paper bands
   glued one over the other with torn / wavy edges. Tokens, cut edges, grain, logo and button rules are copied from
   css/theme-paper.css (that file is scoped to the game's fixed full-screen layout, so the landing does not load it).
   Mobile-first: 375 px first, 16 px+ gutters, tap targets >= 44 px. No layout JS. */
:root{
  --paper:#f3ebdd; --cream:#fbf6ec; --red:#e4432d; --red-d:#b8321f; --yellow:#f6c343; --cobalt:#2b4fa3;
  --green:#3e9c5a; --deep:#2c6e41; --pink:#f1a3b8; --sky:#86c5e6; --ochre:#d8932a; --ink:#1f1d2b;
  --ink-soft:#4f4858; --note:#fbe7a6; --shadow:rgba(74,42,18,.24);
  --disp:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",ui-rounded,system-ui,sans-serif;
  --text:Andika,"Andika New Basic","Trebuchet MS",ui-rounded,system-ui,sans-serif;
  --gut:max(20px, env(safe-area-inset-left, 0px));
  --cut1:polygon(1px 3px,24% 0,51% 2px,77% 0,calc(100% - 1px) 2px,100% 38%,calc(100% - 2px) 71%,100% calc(100% - 2px),74% 100%,47% calc(100% - 3px),21% 100%,2px calc(100% - 1px),0 62%,2px 30%);
  --cut2:polygon(0 1px,31% 3px,60% 0,86% 2px,100% 0,calc(100% - 2px) 47%,100% calc(100% - 3px),68% 100%,39% calc(100% - 2px),11% 100%,0 calc(100% - 3px),3px 52%);
  --cut3:polygon(3px 0,41% 2px,72% 0,calc(100% - 2px) 3px,100% 56%,calc(100% - 1px) 100%,57% calc(100% - 2px),26% 100%,0 calc(100% - 1px),1px 41%);
  --cut-round:polygon(99.4% 50%,97% 62.6%,92.6% 74.6%,84.7% 84.7%,74.5% 92.4%,62.5% 96.8%,50% 99.8%,37% 98.3%,25.4% 92.7%,15.3% 84.7%,6.6% 75.1%,1.6% 63%,.7% 50%,2.8% 37.4%,6.6% 25%,14.7% 14.7%,25.6% 7.7%,37.1% 2%,50% 1.5%,62.8% 2.1%,74.9% 6.9%,84.2% 15.8%,92.8% 25.3%,98.4% 37%);
  /* band edges (masks, 1200 x 30, stretched to the width) */
  --wave1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 V18 C120 4 240 26 380 16 C520 6 640 24 780 14 C920 4 1060 22 1200 10 V30Z'/%3E%3C/svg%3E");
  --wave2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 V22 C200 0 420 2 600 16 C780 30 980 6 1200 14 V30Z'/%3E%3C/svg%3E");
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 9 L30 10 L60 7 L90 17 L120 12 L150 13 L180 8 L210 7 L240 7 L270 6 L300 12 L330 14 L360 20 L390 10 L420 18 L450 18 L480 6 L510 9 L540 14 L570 14 L600 11 L630 10 L660 18 L690 8 L720 19 L750 7 L780 10 L810 9 L840 20 L870 6 L900 19 L930 16 L960 18 L990 10 L1020 18 L1050 10 L1080 9 L1110 8 L1140 10 L1170 10 L1200 16 L1200 30Z'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .9 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --doodle-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%231f1d2b' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M22 108 C24 84 18 64 22 40'/%3E%3Cpath d='M21 76 C10 70 6 62 8 54 C16 56 21 64 21 76Z'/%3E%3Cpath d='M22 92 C33 86 38 78 37 70 C29 72 23 80 22 92Z'/%3E%3C/g%3E%3Cg fill='%23e4432d'%3E%3Ccircle cx='22' cy='24' r='7'/%3E%3Ccircle cx='30.7' cy='29' r='7'/%3E%3Ccircle cx='30.7' cy='39' r='7'/%3E%3Ccircle cx='22' cy='44' r='7'/%3E%3Ccircle cx='13.3' cy='39' r='7'/%3E%3Ccircle cx='13.3' cy='29' r='7'/%3E%3C/g%3E%3Ccircle cx='22' cy='34' r='6' fill='%23f6c343'/%3E%3Ccircle cx='22' cy='34' r='2.2' fill='%231f1d2b'/%3E%3C/svg%3E");
  --doodle-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%231f1d2b' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M22 108 C24 84 18 64 22 40'/%3E%3Cpath d='M21 76 C10 70 6 62 8 54 C16 56 21 64 21 76Z'/%3E%3Cpath d='M22 92 C33 86 38 78 37 70 C29 72 23 80 22 92Z'/%3E%3C/g%3E%3Cg fill='%23f1a3b8'%3E%3Ccircle cx='22' cy='24' r='7'/%3E%3Ccircle cx='30.7' cy='29' r='7'/%3E%3Ccircle cx='30.7' cy='39' r='7'/%3E%3Ccircle cx='22' cy='44' r='7'/%3E%3Ccircle cx='13.3' cy='39' r='7'/%3E%3Ccircle cx='13.3' cy='29' r='7'/%3E%3C/g%3E%3Ccircle cx='22' cy='34' r='6' fill='%23f6c343'/%3E%3Ccircle cx='22' cy='34' r='2.2' fill='%231f1d2b'/%3E%3C/svg%3E");
  --sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpolygon points='0.0,-47.0 9.3,-34.8 23.5,-40.7 25.5,-25.5 40.7,-23.5 34.8,-9.3 47.0,0.0 34.8,9.3 40.7,23.5 25.5,25.5 23.5,40.7 9.3,34.8 0.0,47.0 -9.3,34.8 -23.5,40.7 -25.5,25.5 -40.7,23.5 -34.8,9.3 -47.0,0.0 -34.8,-9.3 -40.7,-23.5 -25.5,-25.5 -23.5,-40.7 -9.3,-34.8' fill='%234a2a12' opacity='.2' transform='translate(2 3)'/%3E%3Cpolygon points='0.0,-47.0 9.3,-34.8 23.5,-40.7 25.5,-25.5 40.7,-23.5 34.8,-9.3 47.0,0.0 34.8,9.3 40.7,23.5 25.5,25.5 23.5,40.7 9.3,34.8 0.0,47.0 -9.3,34.8 -23.5,40.7 -25.5,25.5 -40.7,23.5 -34.8,9.3 -47.0,0.0 -34.8,-9.3 -40.7,-23.5 -25.5,-25.5 -23.5,-40.7 -9.3,-34.8' fill='%23f6c343'/%3E%3Ccircle r='30' fill='%23f6c343'/%3E%3C/svg%3E");
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.5;
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;
}
main{overflow-x:clip}
/* one paper grain over the page, like the app */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background-image:var(--grain);opacity:.38}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:.005em}
h3{font-family:var(--text);font-weight:700;font-size:1.12rem;line-height:1.25;letter-spacing:0}
p,li,dd{text-wrap:pretty}
p{margin:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}
img,svg{display:block}
:focus-visible{outline:4px solid var(--cobalt);outline-offset:4px;border-radius:4px}
.band--blue :focus-visible,.band--green :focus-visible,.band--red :focus-visible,.band--ink :focus-visible{outline-color:var(--yellow)}
.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:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:6px;text-decoration:none}
.skip:focus{top:12px}
.wrap{position:relative;width:100%;max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:760px}

/* ---------- paper pieces: transparent box + ::before (shadow) + ::after (fill), both cut (as in theme-paper.css) ---------- */
.paper,.btn,.eyebrow,.step-num,.stage-polaroid{position:relative;isolation:isolate}
.paper::before,.paper::after,.btn::before,.btn::after,.eyebrow::before,.eyebrow::after,
.step-num::before,.step-num::after,.stage-polaroid::before,.stage-polaroid::after{
  content:"";position:absolute;inset:0;pointer-events:none;clip-path:var(--cut,var(--cut1));
}
.paper::before,.btn::before,.eyebrow::before,.step-num::before,.stage-polaroid::before{z-index:-2;background:var(--shadow);transform:translate(var(--sx,2px),var(--sy,3px))}
.paper::after,.btn::after,.eyebrow::after,.step-num::after,.stage-polaroid::after{z-index:-1;background:var(--pc,var(--cream))}
.tilt-l{transform:rotate(-1.2deg)} .tilt-r{transform:rotate(1deg)}

/* ---------- paper-label buttons (theme-paper.css .btn) ---------- */
.btn{
  --pc:var(--red);--tilt:0deg;color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 24px 10px;
  border:0;background:none;font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.08;text-decoration:none;text-align:center;
  cursor:pointer;transform:rotate(var(--tilt));transition:transform .08s;touch-action:manipulation;
}
.btn:active{transform:translate(1px,2px) rotate(var(--tilt))}
.btn:active::before{transform:translate(1px,1px)}
@media (hover:hover){ .btn:hover{transform:translateY(-2px) rotate(var(--tilt))} }
.btn--red{--pc:var(--red);--tilt:-1.2deg}
.btn--xl{min-height:72px;font-size:28px;width:100%}
.btn--lg{min-height:60px;font-size:22px}
.btn--block{width:100%}
.btn--label{--pc:var(--cream);color:var(--ink);--cut:var(--cut3);--tilt:.6deg;min-height:52px;font-size:19px;padding:10px 22px}
.btn[disabled]{cursor:not-allowed;opacity:.55;transform:rotate(var(--tilt))}
.btn-star{width:28px;height:28px;flex:none}
.btn-star svg{width:100%;height:100%}

/* ---------- header (sits on the blue blob and next to the sun, like the start screen's toggles) ---------- */
.top{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) var(--gut) 0 calc(var(--gut) - 8px)}
.top-nav{display:flex;flex-wrap:wrap;gap:0 4px}
.top-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--cream);font-weight:700;font-size:16px;text-decoration:none}
.top-link:hover{text-decoration:underline}
.top-link:focus-visible{outline-color:var(--yellow)}

/* ---------- hero = the start screen ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}
.start-scene{position:absolute;inset:0;pointer-events:none}
.start-scene svg{position:absolute;overflow:visible}
.sc-blob{left:0;top:0;width:min(66vw,300px);height:auto}
.sc-sun{right:max(-5vw,-40px);top:0;width:min(40vw,190px);height:auto}
.sc-hills{left:0;right:0;bottom:0;width:100%;height:clamp(230px,36%,330px)}
.hero-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  width:min(680px,100%);margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 18px)}
/* the paper logo (theme-paper.css .logo / .logo-paper / .logo-strip, letters as paintLogo() makes them) */
.logo{margin:0;font-family:var(--disp);font-weight:400;line-height:.9;font-size:clamp(54px,min(17vw,10.5svh),104px)}
.logo-paper{display:flex;flex-direction:column;align-items:center}
.logo-paper span span{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
.logo-top{display:flex;white-space:nowrap}
.logo-top span{text-shadow:2px 4px 0 rgba(74,42,18,.22)}
.logo-strip{position:relative;isolation:isolate;display:flex;white-space:nowrap;margin-top:.02em;padding:.08em .34em .16em;font-size:.76em;transform:rotate(-3deg)}
.logo-strip::before,.logo-strip::after{content:"";position:absolute;inset:0;clip-path:var(--cut2)}
.logo-strip::before{z-index:-2;background:var(--shadow);transform:translate(2px,4px)}
.logo-strip::after{z-index:-1;background:var(--cobalt)}
.eyebrow{display:inline-block;margin-top:6px;padding:5px 12px 4px;font-size:.9rem;font-weight:700;--pc:var(--note);--cut:var(--cut2);transform:rotate(-1.2deg)}
.hero h1{font-size:clamp(25px,6.9vw,46px);line-height:1.05;max-width:20ch}
.lead{font-size:16.5px;line-height:1.42;max-width:34em}
.hero-stage{position:relative;flex:1 1 auto;min-height:clamp(120px,22svh,240px);width:min(560px,100%);margin:0;display:flex;justify-content:center;align-items:flex-end}
.stage-group{height:100%;display:flex;align-items:flex-end;gap:clamp(22px,7vw,48px)}
.stage-toy{position:relative;z-index:2;width:clamp(58px,15vw,84px);align-self:center;margin-bottom:8%}
.stage-polaroid{padding:5px 5px 12px;--pc:#ffffff;--cut:var(--cut3);transform:rotate(-6deg)}
.stage-polaroid svg{width:100%;height:auto}
.stage-cap{display:inline-block;margin-top:6px;padding:1px 8px;font-size:13px;font-weight:700;background:var(--cream);box-shadow:1.5px 2px 0 var(--shadow);transform:rotate(-4deg)}
.stage-arrow{position:absolute;left:78%;top:42%;width:clamp(40px,11vw,60px);height:auto}
.stage-hero{height:100%;display:flex;align-items:flex-end}
.stage-hero svg{height:min(100%,240px);width:auto;overflow:visible}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,100%)}
.hero .fine{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion: no-preference){
  .stage-hero--b svg{animation:hop 3.2s ease-in-out 1s infinite;transform-origin:50% 100%}
  @keyframes hop{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-7%)}86%{transform:translateY(0)}}
}
@media (min-width:900px){
  .hero-body{width:min(820px,100%);gap:12px;padding-top:56px}
  .lead{font-size:19px}
}
/* very short phones: keep logo + headline + heroes + red button together */
@media (max-height:700px) and (max-width:600px){
  .hero-body{gap:7px;padding-top:80px}
  .logo{font-size:clamp(46px,9.6svh,70px)}
  .lead{font-size:16px;line-height:1.36}
}

/* ---------- bands: coloured paper glued over the previous one, with a wavy or torn top edge ---------- */
.sec{position:relative;padding:52px 0 60px}
.band{--bg:var(--paper);--edge:var(--wave1);background:var(--bg);color:var(--fg,var(--ink))}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px;pointer-events:none;
  -webkit-mask:var(--edge) center bottom / 100% 100% no-repeat;mask:var(--edge) center bottom / 100% 100% no-repeat}
.band::before{background:rgba(74,42,18,.22);transform:translateY(-4px)}
.band::after{background:var(--bg)}
.band--field{--bg:var(--ochre)}
.band--field::before,.band--field::after{display:none}      /* continues the field at the bottom of the hero */
.band--green{--bg:var(--deep);--fg:var(--cream);--edge:var(--wave2)}
.band--blue{--bg:var(--cobalt);--fg:var(--cream);--edge:var(--torn)}
.band--sky{--bg:var(--sky);--edge:var(--wave1);padding-bottom:0}
.band--paper{--bg:var(--paper);--edge:var(--torn)}
.band--yellow{--bg:var(--yellow);--edge:var(--wave2)}
.band--cream{--bg:var(--cream);--edge:var(--torn)}
.band--red{--bg:var(--red);--edge:var(--wave1)}
.band--ink{--bg:var(--ink);--fg:var(--cream);--edge:var(--wave2)}
.sec h2{font-size:clamp(30px,8vw,46px);max-width:18ch}
.sec-sub{margin-top:12px;font-size:1.08rem;max-width:40em}
.band--green .sec-sub{color:#e3efe6}
.band--blue .sec-sub{color:#e2e8f6}
@media (min-width:900px){ .sec{padding:76px 0 84px} }

/* small scenery bits in the band corners (never behind body text) */
.deco{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain}
.deco--flower-r{right:8px;top:18px;width:84px;height:84px;background-image:var(--doodle-bl);transform:scaleX(-1)}
.deco--flower-l{left:2px;top:14px;width:84px;height:84px;background-image:var(--doodle-pink)}
.band--yellow .deco--sun{right:-26px;top:-46px;width:110px;height:110px;background-image:var(--sun)}
@media (max-width:520px){
    .deco--flower-r,.deco--flower-l{width:64px;height:64px;top:8px}
  .deco--flower-l{left:auto;right:4px;transform:scaleX(-1)}
}
@media (min-width:900px){
  .deco--flower-r,.deco--flower-l{width:120px;height:120px}
  .deco--flower-r{right:4%} .deco--flower-l{left:auto;right:4%}
    .deco--sun{width:150px;height:150px;right:3%;top:-60px}
}

/* how it works (on the ochre field) */
.steps{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:30px}
.step{padding:28px 20px 22px;--pc:var(--cream)}
.step:nth-child(1){transform:rotate(-.8deg)} .step:nth-child(2){transform:rotate(.7deg);--cut:var(--cut2)} .step:nth-child(3){transform:rotate(-.5deg);--cut:var(--cut3)}
.step-num{position:absolute;left:-8px;top:-18px;width:50px;height:50px;display:grid;place-items:center;font-family:var(--disp);font-size:1.55rem;color:var(--cream);--pc:var(--red);--cut:var(--cut-round);transform:rotate(-8deg)}
.step:nth-child(2) .step-num{--pc:var(--cobalt)}
.step:nth-child(3) .step-num{--pc:var(--green)}
.step-art{height:110px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.step-art svg{height:100%;width:auto;max-width:48%}
.step-art--note{padding:0 6px}
.note-line{display:block;padding:14px;background:var(--note);font-weight:700;line-height:1.3;transform:rotate(-2deg);box-shadow:2px 3px 0 var(--shadow);
  background-image:repeating-linear-gradient(transparent 0 26px, rgba(31,29,43,.12) 26px 27px)}
.step h3{margin-bottom:6px}
.step p{max-width:62ch}
.tip{margin-top:32px;padding:16px 20px;--pc:var(--note);--cut:var(--cut2);max-width:600px;transform:rotate(-1.4deg)}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} .tip{margin-left:auto;margin-right:6%} }

/* together (deep green hill): cream paper pieces, heroes standing on top of them */
.cards{display:grid;gap:30px;margin-top:34px}
.card{padding:18px 20px 22px;color:var(--ink);--pc:var(--cream)}
.card:nth-child(2n){transform:rotate(.6deg)} .card:nth-child(2n+1){transform:rotate(-.5deg)}
.card-art{height:112px;margin:-56px 0 6px;display:flex;align-items:flex-end;gap:4px}
.card-art svg{height:100%;width:auto}
.card h3{margin-bottom:6px}
.card p{max-width:62ch}
.cards{padding-top:40px}
.src{margin-top:10px;font-size:.9rem;color:var(--ink-soft)}
.src a{display:inline-block;padding:4px 0}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr);gap:56px 30px} }

/* safety (cobalt) */
.facts{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px}
.fact{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.fact-ic{width:44px;height:44px}
.fact h3{margin-bottom:4px;color:var(--cream)}
.fact p{color:#e9eefa;max-width:56ch}
.honest{margin-top:36px;padding:16px 20px;color:var(--ink);--pc:var(--note);--cut:var(--cut3);max-width:640px;transform:rotate(-1deg)}
@media (min-width:760px){ .facts{grid-template-columns:repeat(2,1fr);gap:28px 44px} }

/* privacy (sky) with the village on a hill at the bottom */
.plain{margin:26px 0 0;padding:6px 20px;--pc:var(--cream);max-width:860px}
.plain-row{padding:16px 0;border-top:2px dashed rgba(31,29,43,.2)}
.plain-row:first-child{border-top:0}
.plain dt{font-weight:700;font-size:1.08rem;margin-bottom:4px}
.plain dd{margin:0;max-width:62ch}
.village{position:relative;height:110px;margin-top:20px}
.village svg{position:absolute;inset:0;width:100%;height:100%}
@media (min-width:760px){ .plain-row{display:grid;grid-template-columns:220px 1fr;gap:24px} .village{height:150px} }

/* research (paper): pinned notes */
.findings{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:24px}
.finding{padding:18px 20px;--pc:#ffffff}
.finding:nth-child(odd){transform:rotate(-.6deg)} .finding:nth-child(even){transform:rotate(.7deg)}
.finding p{max-width:62ch}
.peek{position:absolute;pointer-events:none}
.peek svg{width:100%;height:auto;overflow:visible}
.peek--owl{right:16px;bottom:-14px;width:84px;z-index:2}
@media (min-width:760px){ .findings{grid-template-columns:repeat(2,1fr)} .peek--owl{width:110px;right:6%} }

/* who it's for (yellow field) */
.who{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.who-item{padding:16px 14px;display:flex;flex-direction:column;gap:4px}
.who-item:nth-child(odd){transform:rotate(-1deg)} .who-item:nth-child(even){transform:rotate(.8deg)}
.who-item b{font-family:var(--disp);font-weight:400;font-size:1.15rem;line-height:1.1}
.who-item span{font-size:.98rem}
@media (min-width:900px){ .who{grid-template-columns:repeat(4,1fr)} }

/* FAQ (cream) */
.faq{margin-top:24px}
.faq details{border-top:2px dashed rgba(31,29,43,.22)}
.faq details:last-child{border-bottom:2px dashed rgba(31,29,43,.22)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:10px 0;font-weight:700;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;clip-path:var(--cut-round);background:var(--yellow);font-family:var(--disp);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–";background:var(--pink)}
.faq details p{padding:0 0 18px;max-width:62ch}

/* closing call to action (red) */
.band--red{padding:76px 0 70px}
.signup{padding:28px 20px 22px;--pc:var(--cream);--cut:var(--cut2);transform:rotate(-.6deg)}
.signup .peek--cat{right:6px;top:-72px;width:84px;transform:scaleX(-1)}
.signup h2{font-size:clamp(30px,8vw,42px);margin-bottom:10px;max-width:12ch}
.signup > p{max-width:52ch}
.fine{margin-top:12px;font-size:.92rem;color:var(--ink-soft)}
.signup .fine{margin-top:14px}
@media (min-width:640px){ .signup{padding:34px 34px 26px} .signup .peek--cat{width:110px;top:-92px;right:24px} }

/* founder (paper) */
.founder-grid{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.founder-art svg{width:100%;height:auto}
.founder h2{font-size:clamp(26px,6.4vw,36px);margin-bottom:10px}
.founder p{max-width:60ch}
.sign{margin-top:12px;font-weight:700}
@media (min-width:640px){ .founder-grid{grid-template-columns:150px 1fr;gap:28px} }

/* footer (ink) */
.foot{position:relative;padding:34px 0 calc(env(safe-area-inset-bottom,0px) + 32px)}
.foot-grid{display:grid;gap:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.foot .fine{color:#c9c2d3;margin:0}

}

/* ---------- v3: decorations never touch text ---------- */
.village{height:max(110px, 10vw)}
@media (min-width:760px){ .village{height:max(150px, 10vw)} }
.peek--owl{right:18px;top:-58px;bottom:auto;width:76px}
@media (min-width:760px){ .peek--owl{width:96px;top:-76px;right:6%} }
.band--red{padding-top:110px}
@media (max-width:899px){
  .deco--flower-r,.deco--flower-l{top:-46px;width:64px;height:64px}
}
@media (max-width:899px){
  .stage-hero svg{height:clamp(130px,25svh,230px)}
  .band--field .deco{display:none}
}
.stage-cap{white-space:nowrap}
@media (max-width:600px){
  .sc-blob{width:min(58vw,260px)}
  .top-link{font-size:15px;padding:0 7px}
}

/* ---------- v4: the land (hills + toy/bear + buttons) starts right under the text, so there is no empty sky ---------- */
.hero-body{padding-bottom:0}
.hero-land{position:relative;flex:1 0 auto;align-self:stretch;margin:clamp(28px,5svh,56px) calc(50% - 50vw) 0;
  display:flex;flex-direction:column;align-items:center;padding:0 var(--gut) calc(env(safe-area-inset-bottom,0px) + 22px)}
.hero-land .sc-hills{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-land > :not(svg){position:relative;z-index:1}
.hero-land .hero-stage{flex:0 0 auto;min-height:0;height:auto}
.hero-land .hero-cta{margin-top:auto;padding-top:18px}
@media (min-width:900px){
  .hero-body{width:min(820px,100%)}
  .hero h1{max-width:24ch;font-size:clamp(34px,3.6vw,50px)}
  .logo{font-size:clamp(64px,min(8vw,11svh),104px)}
  .hero-land{min-height:max(380px, 44svh);padding-bottom:40px;margin-top:30px}
  .hero-land .hero-stage{position:absolute;z-index:1;right:max(3vw, calc(50vw - 640px));top:16px;width:auto;height:clamp(200px,30svh,300px);pointer-events:none}
  .stage-toy{width:96px}
  .hero-land .hero-cta{margin-top:40px;padding-top:0}
}

/* ---------- v5: pricing (pink band) + longer CTA label ---------- */
.band--pink{--bg:var(--pink);--edge:var(--torn)}
.prices{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:26px}
.price{padding:22px 20px 22px;display:flex;flex-direction:column;gap:4px}
.price:nth-child(1){transform:rotate(-.6deg)} .price:nth-child(2){transform:rotate(.5deg)} .price:nth-child(3){transform:rotate(-.4deg)}
.price h3{font-size:1.15rem}
.price-tag{font-family:var(--disp);font-size:clamp(30px,8vw,40px);line-height:1.05;margin-top:4px}
.price-sub{font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.price p{max-width:46ch}
.price .fine{margin-top:6px}
.badge{position:absolute;right:12px;top:-14px;padding:4px 10px;background:var(--red);color:var(--cream);font-weight:700;font-size:14px;transform:rotate(3deg);box-shadow:1.5px 2px 0 var(--shadow)}
@media (min-width:820px){ .prices{grid-template-columns:repeat(3,1fr)} }
.hero .btn--xl{font-size:clamp(20px,5.6vw,28px);padding-left:16px;padding-right:16px}
.hero .fine{font-size:15px}
.start-btn{margin-top:18px;font-size:clamp(19px,5.2vw,22px)}