/* lumafolk.com. Home is the approved "Lumafolk Website" canvas (round 2); Help,
   Privacy and the press kit share its sky, type and windows. Pixel art is always
   scaled by whole numbers, nearest neighbour (--s). The folk's sprite strips and
   their frame timings are in art.css, generated from the app's animations. */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/Fraunces-Variable-latin.woff2?v=7e74484902") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/DMSans-Variable-latin.woff2?v=9fea608a94") format("woff2");font-weight:100 1000;font-display:swap}

:root{
  --ink:#463F4F;--ink-soft:#6F6880;--accent:#6A58A6;--mist:#F3EEFA;--lilac:#DBD1F0;--cream:#FCF5EC;
  --blush:#F5B8C4;--butter:#FBE3A1;--ground:#FBF9FD;--night:#17132A;
  --sans:-apple-system,BlinkMacSystemFont,"DM Sans","Hiragino Sans","PingFang SC","Apple SD Gothic Neo","Noto Sans CJK",system-ui,sans-serif;
  --serif:"Fraunces",-apple-system,"Hiragino Sans","PingFang SC","Apple SD Gothic Neo",Georgia,serif;
  --rounded:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
:lang(zh-Hant){--sans:-apple-system,BlinkMacSystemFont,"DM Sans","PingFang TC","Noto Sans CJK TC",system-ui,sans-serif;--serif:"Fraunces",-apple-system,"PingFang TC",Georgia,serif}
:lang(ja){--sans:-apple-system,BlinkMacSystemFont,"DM Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP",system-ui,sans-serif;--serif:"Fraunces",-apple-system,"Hiragino Sans",Georgia,serif}
:lang(ko){--sans:-apple-system,BlinkMacSystemFont,"DM Sans","Apple SD Gothic Neo","Noto Sans CJK KR",system-ui,sans-serif;--serif:"Fraunces",-apple-system,"Apple SD Gothic Neo",Georgia,serif}

*{box-sizing:border-box}
html,body{margin:0;background:var(--ground)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent)}a:hover{color:var(--ink)}
img{max-width:100%}
.serif{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-weight:500;letter-spacing:-.035em}
:lang(ja) .serif,:lang(ko) .serif,:lang(zh-Hans) .serif,:lang(zh-Hant) .serif{letter-spacing:-.01em;font-weight:600}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) p{word-break:auto-phrase}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{word-break:keep-all}
.accent{color:var(--accent)}
.kicker{margin:0;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
:lang(ja) .kicker,:lang(ko) .kicker,:lang(zh-Hans) .kicker,:lang(zh-Hant) .kicker{letter-spacing:.04em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--cream)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.layer{position:absolute;inset:0}
/* Lines that slide in from the side start past the screen's edge: clip them, or a
   phone widens the page to fit them and zooms out. (clip, not hidden: the sticky
   scroll scenes keep working.) */
main{overflow-x:clip}

/* --- pixel scenes: a folk in its widened world, as on the widget ---------- */
.s2{--s:2}.s3{--s:3}
@media (max-width:720px){.s3{--s:2}}
.scene{position:absolute;left:50%;bottom:0;width:calc(240px*var(--s));height:calc(276px*var(--s));margin-left:calc(var(--ax)*var(--s)*-1px)}
.scene>.world{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;image-rendering:pixelated}
.scene>.folk{position:absolute;left:calc((var(--ax) - 24)*var(--s)*1px);top:calc((var(--base) - 56)*var(--s)*1px);width:calc(48px*var(--s));height:calc(56px*var(--s))}
.sp{display:block;background-repeat:no-repeat;background-size:calc(var(--fw)*48px*var(--s)) 100%;image-rendering:pixelated}
.w-dusk,.f-asleep{display:none!important}
.is-dusk .w-dusk,.is-asleep .f-asleep{display:block!important}
.is-dusk .w-day,.is-asleep .f-awake{display:none!important}
.sky-flora,.sky-flora-day{background:linear-gradient(#f2dcd4,#f7e8c9)}.sky-flora-dusk,.is-dusk .sky-flora{background:linear-gradient(#1e1830,#352348)}
.sky-pio,.sky-pio-day{background:linear-gradient(#b2d2ec,#e2dce6)}.sky-pio-dusk,.is-dusk .sky-pio{background:linear-gradient(#18213c,#283252)}
.sky-toby,.sky-toby-day{background:linear-gradient(#a6d0ee,#cbe4f2)}.sky-toby-dusk,.is-dusk .sky-toby{background:linear-gradient(#18213c,#263352)}

/* --- header --------------------------------------------------------------- */
.bar{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.bar-home{margin-bottom:-64px}
.barbg{position:absolute;inset:0;background:rgba(251,249,253,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(219,209,240,.6)}
.barlogo{position:relative;display:flex}.barlogo img{height:24px;width:auto}
.pill{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:19px;background:var(--ink);color:var(--cream)!important;text-decoration:none;font-size:14px;font-weight:600}
.soon{cursor:default;opacity:.85}

/* --- hero ----------------------------------------------------------------- */
.hero{position:relative;height:1040px;overflow:hidden;background:linear-gradient(180deg,#CFC3EC 0%,#E4DBF5 36%,#F6EDF2 68%,#FCE9D6 100%)}
.is-dusk .hero{background:linear-gradient(180deg,#0F0C20 0%,#1C1634 45%,#2E2449 80%,#3E2F55 100%)}
.cloud{position:absolute;border-radius:999px;background:#fff;filter:blur(22px);opacity:.75}
.cloud.c1{left:-6%;top:120px;width:520px;height:110px}.cloud.c2{right:-4%;top:70px;width:440px;height:90px}.cloud.c3{left:38%;top:540px;width:620px;height:120px}
.is-dusk .cloud{opacity:.06}
.p-far,.p-mid,.p-near,.p-wm{transition:translate .6s var(--ease)}
.p-far{translate:calc(var(--mx,0)*-10px) calc(var(--my,0)*-6px)}
.p-mid{translate:calc(var(--mx,0)*-24px) calc(var(--my,0)*-14px)}
.p-near{translate:calc(var(--mx,0)*-44px) calc(var(--my,0)*-26px)}
.p-wm{translate:calc(var(--mx,0)*14px) calc(var(--my,0)*8px)}
.mote{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFF4CF;box-shadow:0 0 14px 5px rgba(251,227,161,.55);animation:drift 16s ease-in-out infinite,twinkle 3.4s ease-in-out infinite}
.mote:nth-child(2n){animation-duration:21s,4.2s}.mote:nth-child(3n){animation-duration:13s,2.6s;animation-delay:-5s,-1s}
.sunglow{position:absolute;left:50%;top:-260px;width:1300px;height:1100px;margin-left:-450px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,196,.95),rgba(251,227,161,.45) 45%,rgba(251,227,161,0));animation:glowOn 2.2s 1.5s ease-out both}
.is-dusk .sunglow{background:radial-gradient(closest-side,rgba(255,226,160,.55),rgba(245,190,142,.18) 45%,rgba(245,190,142,0))}
.wmwrap{position:absolute;left:50%;top:210px;width:min(1180px,90vw);margin-left:calc(min(1180px,90vw)/-2)}
.wm{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.is-dusk .wm{color:var(--cream)}
.lt{transform-box:fill-box;transform-origin:50% 100%;animation:letterIn 1.15s cubic-bezier(.2,.9,.25,1.15) backwards;transition:transform .45s cubic-bezier(.3,1.7,.5,1);cursor:default}
.lt:hover{transform:translateY(-140px) rotate(-4deg)}
.lt1{animation-delay:.15s}.lt2{animation-delay:.23s}.lt3{animation-delay:.31s}.lt4{animation-delay:.39s}.lt5{animation-delay:.47s}.lt6{animation-delay:.55s}.lt7{animation-delay:.63s}.lt8{animation-delay:.71s}
.orbg{animation:orbOn 1.7s 1.05s both,orbBob 4.2s 2.8s ease-in-out infinite}
.halo{transform-box:fill-box;transform-origin:center;animation:haloPulse 3.2s 2.8s ease-in-out infinite}
.core{filter:drop-shadow(0 0 60px rgba(251,227,161,.95))}
.tagline{position:absolute;left:24px;right:24px;top:calc(210px + min(1180px,90vw)*.2336 + 44px);text-align:center}
.tagtxt{margin:0;font-size:clamp(28px,3.4vw,48px);line-height:1.1}
.is-dusk .tagtxt{color:var(--cream)}
.tw{display:inline-block;animation:wordIn 1s var(--ease) backwards}
.tw1{animation-delay:1.9s}.tw2{animation-delay:2s}.tw3{animation-delay:2.1s}.tw4{animation-delay:2.2s}.tw5{animation-delay:2.3s}.tw6{animation-delay:2.4s}
.tagrow{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:22px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:9px 16px;border-radius:20px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15px;color:#5A5266;animation:wordIn 1s 2.5s backwards}
.chip [data-chip]:empty{display:inline-block;width:14em}
.is-dusk .chip{background:rgba(255,255,255,.08);color:#D8D0E6}
.dot{width:8px;height:8px;flex:none;border-radius:50%;background:#E79AAE;animation:twinkle 2s ease-in-out infinite}
.heroCta{display:inline-flex;align-items:center;height:56px;padding:0 28px;border-radius:28px;background:var(--ink);color:var(--cream)!important;text-decoration:none;font-weight:600;font-size:17px;animation:wordIn 1s 2.6s backwards;transition:transform .2s}
.heroCta:hover{transform:translateY(-2px)}
.is-dusk .heroCta{background:var(--butter);color:#2A2340!important;box-shadow:0 0 50px rgba(251,227,161,.35)}
.winpar{position:absolute}
.w-flora{left:5%;bottom:-10px}.w-toby{right:6%;bottom:70px}.w-pio{left:50%;bottom:-170px;margin-left:-170px}
.winbob{animation:bob 6s ease-in-out infinite}
.winbob.b2{animation-duration:7.5s;animation-delay:-2s}.winbob.b3{animation-duration:5.4s;animation-delay:-3.5s}
.arch{--s:2;position:relative;overflow:hidden;border-radius:999px 999px 28px 28px;box-shadow:0 40px 80px rgba(70,63,79,.28),inset 0 0 0 3px rgba(255,255,255,.5)}
.hero .arch{animation:floatUp 1.4s var(--ease) backwards}
.is-dusk .arch{box-shadow:0 0 90px rgba(251,227,161,.22),inset 0 0 0 3px rgba(251,227,161,.35)}
.a1{width:270px;height:360px;animation-delay:1.7s!important}.a2{width:230px;height:306px;animation-delay:1.95s!important}.a3{width:340px;height:450px;animation-delay:2.2s!important}

/* --- kinetic type ----------------------------------------------------------- */
.kin{padding:150px 0 170px;overflow:hidden}
.kline{white-space:nowrap;font-size:clamp(84px,15vw,230px);line-height:.92;will-change:transform}
.kdot{display:inline-block;width:.18em;height:.18em;margin:0 .28em;border-radius:50%;vertical-align:.22em;background:radial-gradient(circle at 40% 35%,#FFFCF2,#FBE3A1 55%,#F5BE8E);box-shadow:0 0 .3em rgba(251,227,161,.8)}
.outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
.pf{color:transparent;-webkit-background-clip:text;background-clip:text;image-rendering:pixelated;font-weight:800;background-repeat:repeat-x;background-size:960px 1104px}
.pf-flora{background-image:url("/assets/art/flora-day.png?v=ce843b0e8a");background-position:center 80%}
.pf-toby{background-image:url("/assets/art/toby-day.png?v=e1a5d7eed9");background-position:center 82%}
.pf-pio{background-image:url("/assets/art/pio-dusk.png?v=b040febc4a");background-position:center 30%}

/* --- right now --------------------------------------------------------------- */
.nowtrack{position:relative;height:3200px;view-timeline:--now block}
.nowstage{position:sticky;top:0;height:min(100vh,920px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:80px 24px 24px;text-align:center;overflow:hidden}
.nowtime{margin:0;font-size:clamp(44px,6.6vw,108px);line-height:1;text-wrap:balance}
.nowtime:empty::before{content:"\00a0"}
.nowlines{margin:0;display:grid;font-size:clamp(36px,5vw,80px);line-height:1.02;color:var(--accent);text-wrap:balance}
.nowlines>span{grid-area:1/1}
.nl2,.nl3{opacity:0}
.nowwin{position:relative;width:min(720px,100%);height:min(380px,40vh);border-radius:36px;overflow:hidden;box-shadow:0 30px 70px rgba(70,63,79,.18)}
.nowdusk,.nowsleep,.nowz{opacity:0}
.nowwin .scene{position:absolute}
.nowz{position:absolute;left:calc(50% + 40px);bottom:200px}
.zz{position:absolute;left:0;bottom:0;color:var(--cream);font-weight:700;font-size:26px;animation:zzz 3.2s ease-out infinite}
.zz2{animation-delay:1.1s;font-size:20px}.zz3{animation-delay:2.2s;font-size:32px}
.nownote{margin:0;max-width:560px;font-size:19px;line-height:1.5;color:var(--ink-soft)}

/* --- day to dusk -------------------------------------------------------------- */
.ddtrack{position:relative;height:2500px;view-timeline:--dd block}
.ddstage{position:sticky;top:0;height:min(100vh,920px);overflow:hidden;background:var(--cream)}
.ddgrid{position:relative;height:100%;max-width:1240px;margin:0 auto;padding:80px 28px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:56px;align-items:center}
.ddtitle{margin:0;font-size:clamp(56px,7.4vw,120px);line-height:.95}
.ddline2{display:inline-block;color:var(--accent)}
.ddbody{margin:28px 0 0;max-width:440px;font-size:20px;line-height:1.5;color:var(--ink-soft)}
.ddhint{margin:18px 0 0;font-size:15px;font-weight:600;color:var(--ink-soft)}
.ddwin{position:relative;height:min(640px,62vh);border-radius:40px;overflow:hidden}
.ddff{position:absolute;inset:0;opacity:0;pointer-events:none}
.ddin{opacity:0}
.ddlabel{position:absolute;left:26px;top:22px;font-family:var(--rounded);color:var(--ink);display:flex;flex-direction:column}
.ddlabel b{font-size:22px}.ddlabel span{font-size:16px;opacity:.8}.ddlabel.dusk{color:var(--cream)}

/* --- widgets ------------------------------------------------------------------ */
.wsec{position:relative;height:1400px;overflow:hidden;background:linear-gradient(#FBF9FD,#F1EBFA 40%,#F1EBFA 60%,#FBF9FD)}
.wcenter{position:absolute;left:50%;top:430px;width:min(640px,90vw);margin-left:calc(min(640px,90vw)/-2);text-align:center;z-index:2}
.wcenter h2{margin:0;font-size:clamp(52px,6.6vw,104px);line-height:.95}
.wcenter p{margin:26px auto 0;max-width:520px;font-size:19px;line-height:1.5;color:var(--ink-soft)}
.wd{position:absolute;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px rgba(70,63,79,.2)}
.wd-xl{left:3%;top:140px;width:350px;height:566px;rotate:-4deg}
.wd-m{left:9%;top:820px;width:350px;height:164px;rotate:3deg}
.wd-l{right:4%;top:90px;width:350px;height:365px;rotate:4deg}
.wd-s1{right:20%;top:640px;width:164px;height:164px;rotate:-5deg}
.wd-s2{right:5%;top:900px;width:164px;height:164px;rotate:6deg}
.wlabel{position:absolute;left:16px;top:14px;line-height:1.2;z-index:1;font-family:var(--rounded);color:var(--ink);display:flex;flex-direction:column}
.wlabel b{font-size:17px}.wlabel span{font-size:14px;opacity:.75}.wlabel em{font-style:normal;font-size:34px;font-weight:600;margin-top:4px}
.wtoys{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:1}
.wtoys.row{flex-direction:row;top:12px;right:auto;left:50%;transform:translateX(-50%)}
.wtoy{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.62);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wtoy svg{width:16px;height:16px}
.dusk .wtoy{background:rgba(255,255,255,.16);color:var(--cream)}

/* --- toys ----------------------------------------------------------------------- */
.toys{padding:170px 24px 200px}
.toyhead{max-width:1100px;margin:0 auto;text-align:center}
.toyhead h2{margin:0;font-size:clamp(60px,9vw,150px);line-height:.92}
.toyhead h2 span{display:inline-block}
.toyhead p{margin:32px auto 0;max-width:620px;font-size:20px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.toystage{position:relative;max-width:760px;height:580px;margin:72px auto 0;border-radius:40px;overflow:hidden;box-shadow:0 40px 80px rgba(70,63,79,.18)}
.toybtns{margin:30px auto 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.toybtn{display:flex;align-items:center;gap:10px;height:56px;padding:0 24px;border-radius:28px;border:1px solid var(--lilac);background:#fff;color:var(--ink);font:600 17px/1 var(--sans);cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.toybtn svg{width:20px;height:20px}
.toybtn:hover{background:var(--mist);transform:translateY(-3px);box-shadow:0 10px 24px rgba(106,88,166,.15)}
.toybtn:active{transform:scale(.95)}
.toycap{margin:22px auto 0;min-height:26px;text-align:center;font-size:18px;color:var(--ink-soft)}
.bird{position:absolute;color:var(--ink);animation:fly 3.4s linear both}
.bird svg{width:38px;height:22px}
.ball{position:absolute;left:calc(146px*var(--s));top:calc(262px*var(--s));width:calc(7px*var(--s));height:calc(7px*var(--s));border-radius:calc(2px*var(--s));background:#E2EC74;box-shadow:inset calc(-1px*var(--s)) calc(-1px*var(--s)) 0 #B6C24E;animation:pop .4s cubic-bezier(.3,1.8,.5,1) both}
.ball[hidden],.bird[hidden]{display:none}

/* --- doors ---------------------------------------------------------------------- */
.doors{padding:170px 0 180px;background:var(--night);color:var(--cream);overflow:hidden}
.doorhead{max-width:1000px;margin:0 auto 80px;padding:0 24px;text-align:center}
.doorhead h2{margin:0;font-size:clamp(56px,8vw,130px);line-height:.95}
.doorhead .glow{color:var(--butter);text-shadow:0 0 60px rgba(251,227,161,.45)}
.doorhead p{margin:28px auto 0;max-width:560px;font-size:20px;line-height:1.5;color:#CFC6E0}
.drow{display:flex;gap:22px;width:max-content;padding:11px 0}
.dr{margin-left:-80px}
.door{position:relative;width:132px;height:176px;flex-shrink:0;border-radius:999px 999px 16px 16px;background:linear-gradient(#2A2340,#3B2F55);overflow:hidden}
.door::before{content:"";position:absolute;inset:18% 20% 38%;border-radius:999px 999px 8px 8px;background:radial-gradient(closest-side at 50% 58%,#FFF6DA,#FBE3A1 40%,#F5BE8E 75%,#E9A97F 100%);box-shadow:0 0 16px 2px rgba(251,227,161,.35);animation:twinkle 4.5s ease-in-out infinite}
.door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:#2A2340;box-shadow:0 -6px 0 0 #332A4C}
.door:nth-child(2n)::before{animation-delay:1.4s}.door:nth-child(3n)::before{animation-delay:2.6s;opacity:.25}.door:nth-child(5n)::before{animation:none;opacity:.12}

/* --- promises & plans ---------------------------------------------------------------- */
.promises{padding:180px 24px 120px;overflow:hidden;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:56px}
.prom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 40px}
.prom.right{justify-content:flex-end}.prom.right .stnote{text-align:right}
.st{font-size:clamp(64px,11.5vw,180px);line-height:.95;white-space:nowrap}
.stnote{font-size:18px;line-height:1.5;color:var(--ink-soft);max-width:300px}
.plans{padding:60px 24px 160px}
.plangrid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:24px}
.plan{padding:52px;border-radius:40px}
.plan h3{margin:12px 0 0;font-size:clamp(40px,4vw,60px);line-height:1}
.plan p:last-child{margin:18px 0 0;font-size:18px;line-height:1.5}
.plan.free{background:var(--cream)}.plan.free p:last-child{color:var(--ink-soft)}
.plan.plus{background:#2A2340;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(251,227,161,.2)}
.plan.plus .kicker{color:var(--butter)}.plan.plus p:last-child{color:#D8D0E6}
.plan .kicker{text-transform:none;letter-spacing:0}

/* --- finale & footer ---------------------------------------------------------------- */
.finale{position:relative;padding:160px 24px 120px;text-align:center;overflow:hidden;background:radial-gradient(60% 50% at 50% 38%,#FFF3D6,rgba(255,243,214,0) 70%),linear-gradient(#FBF9FD,#EDE5FA)}
.fwm{position:relative;width:min(1000px,88vw);margin:0 auto}
.fwm img{display:block;width:100%;height:auto}
.forb{position:absolute;left:70.3%;top:29.3%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,180,.9),rgba(251,227,161,.35) 50%,rgba(251,227,161,0));animation:haloPulse 3.2s ease-in-out infinite;pointer-events:none}
.fintag{margin:40px 0 0;font-size:clamp(30px,3.6vw,52px)}
.fincta{margin-top:40px}
.finnote{margin:18px 0 0;font-size:15px;color:var(--ink-soft)}
.cta{display:inline-flex;align-items:center;min-height:60px;padding:0 32px;border-radius:30px;background:var(--ink);color:var(--cream)!important;text-decoration:none;font-weight:600;font-size:18px;transition:transform .2s}
.cta:hover{transform:translateY(-2px)}
.foot{background:#EDE5FA}
.footstrip{position:relative;height:112px;overflow:hidden}
.walker{position:absolute;left:0;bottom:0;width:calc(48px*var(--s));height:calc(56px*var(--s));background-image:url("/assets/art/toby-side.png?v=fc61efa20a");background-size:calc(288px*var(--s)) 100%;background-repeat:no-repeat;image-rendering:pixelated;animation:walkframes .62s steps(6) infinite,trot 24s linear infinite}
.footrow{border-top:1px solid var(--lilac);max-width:1240px;margin:0 auto;padding:28px 24px 40px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-soft)}
.footlinks{display:flex;gap:12px 24px;flex-wrap:wrap}
.lang select{appearance:none;-webkit-appearance:none;font:inherit;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F6880' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--lilac);border-radius:14px;padding:8px 32px 8px 14px;cursor:pointer}

/* --- cookie consent (analytics.js shows it) -------------------------------------------- */
.consent{position:fixed;z-index:100;left:16px;right:16px;bottom:16px;max-width:460px;padding:20px 22px;border-radius:28px;
  background:rgba(251,249,253,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink);
  box-shadow:0 30px 70px -20px rgba(46,38,62,.35),inset 0 0 0 1px rgba(219,209,240,.9);font-size:15px;line-height:1.5}
.consent[hidden]{display:none}
.consent p{margin:0}
.consent a{font-weight:600}
.consent-btns{display:flex;gap:10px;margin-top:16px}
.consent button{flex:1;min-height:46px;font:600 15px/1 var(--sans);cursor:pointer;border-radius:999px;padding:0 16px;background:var(--ink);color:var(--cream);border:0;transition:transform .2s}
.consent button:hover{transform:translateY(-1px)}
@media (min-width:600px){.consent{left:24px;bottom:24px}}
/* Phones (as on plantempo.app): the same card, tighter, so it covers a strip of the
   page rather than a quarter of it, and clear of the iPhone's home indicator (the
   page asks for viewport-fit=cover, so the inset is ours to keep). */
@media (max-width:599px){
  .consent{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:14px 16px;border-radius:22px;font-size:13px;line-height:1.45}
  .consent-btns{gap:8px;margin-top:11px}
  .consent button{min-height:42px;padding:0 14px;font-size:14px}
}

/* --- pages: Help, Privacy, Press, 404 ------------------------------------------------ */
.phero{background:linear-gradient(180deg,#CFC3EC 0%,#E4DBF5 40%,#F6EDF2 75%,var(--ground) 100%);padding:72px 24px 40px;overflow:hidden}
.phero-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.phero h1{margin:14px 0 0;font-size:clamp(48px,7vw,96px);line-height:.95;text-wrap:balance}
.phero .lead{margin:24px 0 0;max-width:600px;font-size:20px;line-height:1.5;color:#5A5266;text-wrap:pretty}
.phero-win{width:220px;height:292px;animation:floatUp 1.2s var(--ease) backwards .2s}
.mailcta{display:inline-flex;align-items:center;margin-top:28px;min-height:56px;padding:0 26px;border-radius:28px;background:var(--ink);color:var(--cream)!important;text-decoration:none;font-weight:600;font-size:17px;overflow-wrap:anywhere}
.reply,.effective{margin:14px 0 0;font-size:15px;color:var(--ink-soft)}
.prose-wrap{max-width:1100px;margin:0 auto;padding:40px 24px 140px}
.sect{margin:56px 0 18px;font-size:clamp(34px,4vw,52px);line-height:1}
.faq{display:flex;flex-direction:column;gap:10px}
.qa{border-radius:24px;background:#fff;box-shadow:0 1px 0 var(--lilac),0 10px 30px rgba(70,63,79,.05)}
.qa summary{list-style:none;cursor:pointer;padding:22px 64px 22px 26px;font-size:19px;font-weight:600;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:26px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s}
.qa[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.qa p{margin:0;padding:0 26px 24px;font-size:18px;line-height:1.6;color:#5A5266}
.pbadges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin:8px 0 40px}
.pbadge{padding:24px 26px;border-radius:24px;background:var(--cream);display:flex;flex-direction:column;gap:6px}
.pbadge b{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-weight:500;font-size:26px}.pbadge span{color:var(--ink-soft);font-size:16px;line-height:1.45}
.policy{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column}
.toc .kicker{margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;color:var(--ink-soft);text-decoration:none;font-size:15px;border-left:2px solid #E6DFF3}
.toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.prose h2{font-size:30px;line-height:1.15;margin:48px 0 12px}
.prose section:first-child h2{margin-top:0}
.prose p,.prose li{font-size:18px;line-height:1.65;color:#5A5266}
.prose p{margin:0 0 14px}.prose ul{margin:0 0 14px;padding-left:22px}.prose li{margin:6px 0}
.prose section{scroll-margin-top:90px}
.press{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:56px;align-items:start}
.facts{margin:0;display:flex;flex-direction:column;gap:2px;border-radius:24px;overflow:hidden}
.facts div{background:#fff;padding:14px 20px}
.facts dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.facts dd{margin:4px 0 0;font-size:16px;line-height:1.45}
.pshort{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:24px!important;line-height:1.35!important;color:var(--ink)!important}
.note{font-size:15px!important;color:var(--ink-soft)!important}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.asset{margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--lilac)}
.assetimg{height:200px;display:grid;place-items:center;padding:28px;background:var(--mist)}
.asset.dark .assetimg{background:#2A2340}
.assetimg img{display:block;max-width:100%;max-height:144px;width:auto;height:auto;object-fit:contain}
.assetimg img.px{image-rendering:pixelated;height:144px}
.asset figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 18px;font-size:15px}
.dl{display:flex;gap:10px}.dl a{font-weight:600}
.nf{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px 80px}
.nf h1{margin:36px 0 0;font-size:clamp(40px,6vw,72px);line-height:1}
.nf p{margin:16px 0 30px;font-size:19px;color:var(--ink-soft)}
.nf-win{width:200px;height:266px}
@media (max-width:860px){
  .phero-in{grid-template-columns:1fr}
  .phero-win{width:160px;height:212px;--s:2;justify-self:end;margin-top:-20px}
  .policy,.press{grid-template-columns:1fr}
  .toc{position:static;display:none}
}

/* --- keyframes ------------------------------------------------------------------------ */
@keyframes letterIn{0%{opacity:0;transform:translateY(620px) rotate(10deg) scale(.7)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes orbOn{0%,30%{opacity:0}40%{opacity:.9}46%{opacity:.15}54%{opacity:1}60%{opacity:.4}70%,100%{opacity:1}}
@keyframes orbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(46px)}}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.22);opacity:.65}}
@keyframes glowOn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;filter:blur(14px);transform:translateY(26px)}to{opacity:1;filter:none;transform:none}}
@keyframes floatUp{from{opacity:0;transform:translateY(260px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes drift{0%{transform:translate(0,0)}25%{transform:translate(22px,-30px)}50%{transform:translate(-12px,-56px)}75%{transform:translate(-26px,-20px)}100%{transform:translate(0,0)}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes walkframes{from{background-position:0 0}to{background-position:calc(-288px*var(--s)) 0}}
@keyframes trot{from{transform:translateX(-140px)}to{transform:translateX(100vw)}}
@keyframes fly{from{left:-40px;top:120px}50%{top:70px}to{left:100%;top:110px}}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translate(30px,-80px) scale(1.25)}}

/* --- scroll-driven scenes (Safari 26, Chrome; elsewhere the page stays still) --------- */
@supports (animation-timeline: scroll()){
.bar-home .barbg,.bar-home .barlogo{animation:fadeIn linear both;animation-timeline:scroll(root);animation-range:560px 820px}
.px-wm{animation:pxWm linear both;animation-timeline:scroll(root);animation-range:0px 1000px}
.px-tag{animation:pxTag linear both;animation-timeline:scroll(root);animation-range:0px 700px}
.px-far{animation:pxFar linear both;animation-timeline:scroll(root);animation-range:0px 1040px}
.px-mid{animation:pxMid linear both;animation-timeline:scroll(root);animation-range:0px 1040px}
.px-near{animation:pxNear linear both;animation-timeline:scroll(root);animation-range:0px 1040px}
.px-closest{animation:pxClosest linear both;animation-timeline:scroll(root);animation-range:0px 1040px}
.px-glow{animation:pxGlow linear both;animation-timeline:scroll(root);animation-range:0px 900px}
.kl1{animation:kLeft linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.kl2{animation:kRight linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.kl3{animation:kLeft2 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.nw{animation:blurIn linear both;animation-timeline:--now}
.r1{animation-range:contain 0% contain 10%}.r2{animation-range:contain 4% contain 16%}.r7{animation-range:contain 86% contain 96%}
.nowwin{animation:winIn linear both;animation-timeline:--now;animation-range:contain 16% contain 36%}
.nl1{animation:nl1 linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.nl2{animation:nl2 linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.nl3{animation:nl3 linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.nowdusk{animation:nowDusk linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.nowawake{animation:nowAwake linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.nowsleep{animation:nowSleep linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.nowz{animation:nowZ linear both;animation-timeline:--now;animation-range:contain 0% contain 100%}
.ddstage{animation:ddBg linear both;animation-timeline:--dd;animation-range:contain 0% contain 100%}
.ddink{animation:ddInk linear both;animation-timeline:--dd;animation-range:contain 0% contain 100%}
.ddsub{animation:ddSub linear both;animation-timeline:--dd;animation-range:contain 0% contain 100%}
.ddin{animation:ddIn linear both;animation-timeline:--dd;animation-range:contain 0% contain 100%}
.ddout{animation:ddOut linear both;animation-timeline:--dd;animation-range:contain 0% contain 100%}
.ddline2{animation:ddLine linear both;animation-timeline:--dd;animation-range:contain 0% contain 100%}
.wp1{animation:wp1 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.wp2{animation:wp2 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.wp3{animation:wp3 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.wtext{animation:wText linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.dl{animation:kLeft linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.dr{animation:kRight linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.inL{animation:inL linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.inR{animation:inR linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.zoomIn{animation:zoomIn linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
}
/* Without scroll-driven animations the "Right now" scene shows its first line, awake. */
@supports not (animation-timeline: scroll()){
.nowtrack{height:auto}.nowstage{position:relative;height:auto;padding:120px 24px}
.ddtrack{height:auto}.ddstage{position:relative;height:auto}.ddin{display:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes nl1{0%,20%{opacity:0;filter:blur(14px);transform:translateY(30px)}30%,46%{opacity:1;filter:none;transform:none}52%,100%{opacity:0;filter:blur(14px);transform:translateY(-30px)}}
@keyframes nl2{0%,52%{opacity:0;filter:blur(14px);transform:translateY(30px)}58%,70%{opacity:1;filter:none;transform:none}76%,100%{opacity:0;filter:blur(14px);transform:translateY(-30px)}}
@keyframes nl3{0%,76%{opacity:0;filter:blur(14px);transform:translateY(30px)}82%,100%{opacity:1;filter:none;transform:none}}
@keyframes nowDusk{0%,44%{opacity:0}70%,100%{opacity:1}}
@keyframes nowAwake{0%,77.9%{opacity:1}78%,100%{opacity:0}}
@keyframes nowSleep{0%,77.9%{opacity:0}78%,100%{opacity:1}}
@keyframes nowZ{0%,80%{opacity:0}86%,100%{opacity:1}}
@keyframes pxWm{to{transform:translateY(360px) scale(.82);opacity:.1}}
@keyframes pxTag{to{transform:translateY(260px);opacity:0}}
@keyframes pxFar{to{transform:translateY(300px)}}
@keyframes pxMid{to{transform:translateY(-160px)}}
@keyframes pxNear{to{transform:translateY(-420px)}}
@keyframes pxClosest{to{transform:translateY(-640px)}}
@keyframes pxGlow{to{transform:translateY(200px) scale(1.3);opacity:.4}}
@keyframes kLeft{from{transform:translateX(6%)}to{transform:translateX(-38%)}}
@keyframes kRight{from{transform:translateX(-42%)}to{transform:translateX(2%)}}
@keyframes kLeft2{from{transform:translateX(-4%)}to{transform:translateX(-30%)}}
@keyframes blurIn{from{opacity:0;filter:blur(18px);transform:translateY(50px) scale(.94)}to{opacity:1;filter:none;transform:none}}
@keyframes winIn{from{opacity:0;transform:translateY(200px) scale(.7);clip-path:inset(20% 25% 0 25% round 300px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 36px)}}
@keyframes ddBg{0%,22%{background-color:#FCF5EC}78%,100%{background-color:#141128}}
@keyframes ddInk{0%,22%{color:#463F4F}78%,100%{color:#FCF5EC}}
@keyframes ddSub{0%,22%{color:#6F6880}78%,100%{color:#BDB4D0}}
@keyframes ddIn{0%,30%{opacity:0}72%,100%{opacity:1}}
@keyframes ddOut{0%,30%{opacity:1}72%,100%{opacity:0}}
@keyframes ddLine{0%,8%{opacity:.12;filter:blur(8px);color:#6A58A6}30%{opacity:1;filter:none;color:#6A58A6}78%,100%{opacity:1;filter:none;color:#FBE3A1;text-shadow:0 0 50px rgba(251,227,161,.5)}}
@keyframes wp1{from{transform:translateY(240px)}to{transform:translateY(-240px)}}
@keyframes wp2{from{transform:translateY(120px)}to{transform:translateY(-120px)}}
@keyframes wp3{from{transform:translateY(420px)}to{transform:translateY(-420px)}}
@keyframes wText{from{transform:translateY(80px) scale(.92)}to{transform:translateY(-80px) scale(1.04)}}
@keyframes inL{from{opacity:0;transform:translateX(-35%)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(35%)}to{opacity:1;transform:none}}
@keyframes revealUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

@media (max-width:1180px){
.wsec{height:auto;padding:120px 24px}
.wcenter{position:relative;left:auto;top:auto;margin:0 auto 56px}
.wlayout{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.wd{position:relative!important;left:auto!important;right:auto!important;top:auto!important}
.wp1,.wp2,.wp3{animation:none!important}
}
@media (max-width:720px){
.bar{padding:0 16px}
.hero{height:860px}
.a1{width:150px;height:200px}.a2{width:130px;height:172px}.a3{width:210px;height:270px}
.w-pio{margin-left:-105px;bottom:-90px}
.st{white-space:normal}
.plan{padding:36px 28px}
.toystage{height:440px}
.footrow{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}