/* Scroll Ninja · launch site. Shared by index.html, privacy.html and terms.html.
   Art direction from the app prototype: cream paper with grain, navy ink type, muted teal actions,
   sakura accents, subtle gold for the founding price. Mobile first; the big layout switch is at 1024px. */

:root{
  --paper:#F8F5EE;--paper-top:#FAF7F2;--paper-low:#F3EEE5;--paper-deep:#EFE8DC;
  --card:#FBF8F3;--card-low:#F7F4EE;--sunk:#F2EEE7;--hairline:#E5E0D7;--divider:#ECE8E2;--hi:#FFFDF9;--track:#E2E0DB;
  --ink:#0E1328;--ink-2:#141A30;--slate:#3A4A56;--slate-teal:#3E5A5E;--label:#2C3C4B;--muted:#5F656D;
  --cta:#234D4C;--cta-top:#2B5958;--cta-low:#1F4645;--cta-rim:#79BBA9;
  --jade:#11645A;--jade-label:#0D5F52;--mint:#E8F1EC;--mint-line:#A9CFC7;
  --focus:#1B645B;--focus-a:#074E48;--focus-b:#27786A;
  --wisdom:#5059A8;--fantasy:#435DAA;--discipline:#7A3A78;
  --vermilion:#A2241A;--sakura:#EE9AAD;--sakura-deep:#B8506B;--blush:#F5E6E9;
  --gold:#C9A04E;--gold-line:#E3CB95;--gold-text:#7A5718;
  --xp-bg:#F2DEC3;--xp-top:#F7E3C9;--xp-line:#DFC19E;--xp-hi:#FBEBD5;--xp-text:#5E3016;
  --error:#A23B30;

  --serif:"Crimson Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --sh-inset:inset 0 1px 0 rgba(255,253,249,.9);
  --sh-card:0 1px 2px rgba(70,55,35,.05),0 8px 24px rgba(70,55,35,.07);
  --sh-float:0 2px 6px rgba(70,55,35,.06),0 18px 44px rgba(70,55,35,.12);
  --gutter:20px;
  --sec:clamp(52px,8vw,96px);

  /* paper grain and fibre (tiny svg noise, tiled) */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
@media (min-width:640px){:root{--gutter:28px}}
@media (min-width:1024px){:root{--gutter:40px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;min-width:320px;background:var(--grain),var(--fibre),var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0}
::selection{background:rgba(238,154,173,.35)}
:focus-visible{outline:3px solid rgba(35,77,76,.5);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute!important;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;padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font:600 14px/1 var(--sans);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}
.sec{position:relative;padding:var(--sec) 0}

/* type */
.overline{display:inline-flex;align-items:center;gap:12px;font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--jade-label)}
.sec-head .overline::before,.sec-head .overline::after{content:"";width:22px;height:1px;background:currentColor;opacity:.35}
.h2{margin-top:14px;font:600 clamp(33px,8.4vw,54px)/1.06 var(--serif);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.lead{margin:16px auto 0;max-width:34em;font:400 clamp(17px,2.1vw,19px)/1.6 var(--sans);color:var(--slate);text-wrap:pretty}
.sec-head{text-align:center;max-width:720px;margin:0 auto}

/* shared surfaces */
.card{position:relative;background:var(--grain),linear-gradient(180deg,var(--card),var(--card-low));border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--sh-inset),var(--sh-card)}
.xp-pill,.xp-chip{display:inline-flex;align-items:center;white-space:nowrap;background:linear-gradient(180deg,var(--xp-top),var(--xp-bg));border:.75px solid var(--xp-line);box-shadow:inset 0 1px 0 var(--xp-hi),0 1px 2px rgba(120,85,40,.12);font:600 12px/1 var(--sans);color:var(--xp-text)}
.xp-pill{height:24px;padding:0 10px;border-radius:12px}
.xp-chip{height:26px;padding:0 10px;border-radius:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border:0;border-radius:14px;
  background:linear-gradient(180deg,var(--cta-top),var(--cta-low));color:#F4F7F6;font:600 16.5px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(121,187,169,.55),inset 0 -1px 0 rgba(10,30,30,.25),0 1px 2px rgba(20,60,55,.18),0 10px 24px rgba(20,60,55,.16);
  transition:transform .15s var(--ease),filter .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
.btn .ic{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}

/* reveal on scroll (main.js hides only what is below the fold) */
.rv.rv-wait{opacity:0;transform:translateY(22px)}
.rv.rv-go{transition:opacity .9s ease,transform 1s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}

/* falling petals (main.js fills every .petals box) */
.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;--fall:900px}
.petal{position:absolute;top:-24px;width:var(--s,10px);height:calc(var(--s,10px) * .62);border-radius:70% 0 70% 0;background:linear-gradient(135deg,#FBD3DA,#EE9AAD 70%,#E07E95);opacity:var(--o,.85);filter:blur(var(--b,0));animation:petalFall var(--t,14s) linear var(--delay,0s) infinite;will-change:transform}
@keyframes petalFall{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  25%{transform:translate3d(calc(var(--x,40px) * .6),calc(var(--fall) * .25),0) rotate(120deg)}
  50%{transform:translate3d(calc(var(--x,40px) * -.2),calc(var(--fall) * .5),0) rotate(220deg)}
  75%{transform:translate3d(var(--x,40px),calc(var(--fall) * .75),0) rotate(320deg)}
  100%{transform:translate3d(calc(var(--x,40px) * .3),var(--fall),0) rotate(420deg)}
}

/* ================= top bar ================= */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:calc(62px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px));
  pointer-events:none;transition:background-color .45s ease,box-shadow .45s ease}
.bar.solid{background:rgba(248,245,238,.86);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 rgba(40,35,30,.08)}
.bar-logo{display:block;width:112px;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .4s ease,transform .5s var(--ease),visibility 0s linear .5s}
.bar-logo img{width:100%;height:auto}
.bar.solid .bar-logo{pointer-events:auto;opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,transform .5s var(--ease),visibility 0s}
.bar-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.bar-join{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:12px;background:linear-gradient(180deg,var(--cta-top),var(--cta-low));color:#F4F7F6;font:600 14px/1 var(--sans);text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(121,187,169,.5),0 4px 12px rgba(20,60,55,.16);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s ease,transform .45s var(--ease),visibility 0s linear .45s}
.bar.solid:not(.near):not(.joined) .bar-join{pointer-events:auto;opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s var(--ease),visibility 0s}
.music{pointer-events:auto;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(14,19,40,.1);background:rgba(250,247,242,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);transition:background-color .3s,transform .15s var(--ease),opacity .3s;-webkit-tap-highlight-color:transparent}
.music[hidden]{display:none}
.music:not([hidden]){animation:fadeIn .8s ease both}
.music:hover{background:rgba(250,247,242,.85)}
.music:active{transform:scale(.94)}
.music.on{background:rgba(232,241,236,.85);color:var(--jade)}
.eq{display:flex;align-items:center;gap:2.5px;height:16px}
.eq i{display:block;width:2.5px;border-radius:2px;background:currentColor;opacity:.75}
.eq i:nth-child(1){height:6px}.eq i:nth-child(2){height:11px}.eq i:nth-child(3){height:8px}.eq i:nth-child(4){height:4px}
.music:not(.on) .eq{opacity:.7}
.music.on .eq i{opacity:1;animation:eq 1.1s ease-in-out infinite alternate}
.music.on .eq i:nth-child(2){animation-delay:-.35s}.music.on .eq i:nth-child(3){animation-delay:-.7s}.music.on .eq i:nth-child(4){animation-delay:-.2s}
@media (max-width:359.98px){.bar-logo{width:92px}.bar-join{padding:0 11px;font-size:13px}.bar-r{gap:8px}}
@keyframes eq{from{height:3px}to{height:15px}}
.music.loading .eq i{animation:eq 1.6s ease-in-out infinite alternate;opacity:.55}
.music.loading .eq i:nth-child(2){animation-delay:-.5s}.music.loading .eq i:nth-child(3){animation-delay:-1s}.music.loading .eq i:nth-child(4){animation-delay:-.3s}

/* ================= 1 · hero ================= */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden;background:#EBD3C5}
.hero-art{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size}
.art-par{position:absolute;inset:0;will-change:transform}
/* fallback: plain cover; the living layers need container units */
.art{position:absolute;inset:0;animation:artOpen 1.7s var(--ease) both}
.kb{position:absolute;inset:0;transform-origin:42% 62%;animation:kenburns 36s ease-in-out 1.7s infinite alternate}
.art-base{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.fx{display:none}
@supports (width:1cqw){
  /* the painting box keeps its 941:1672 ratio and covers the hero; every layer inside is placed in % of the painting */
  /* phones: a touch of zoom, anchored at the bottom, so the ninja sits between the headline and the form */
  .art{--ax:.42;--ay:1;--z:1.08;inset:auto;width:calc(max(100cqw,56.28cqh) * var(--z));aspect-ratio:941/1672;
    left:calc((100cqw - max(100cqw,56.28cqh) * var(--z)) * var(--ax));
    top:calc((100cqh - max(177.68cqw,100cqh) * var(--z)) * var(--ay))}
  .art-base{object-fit:fill}
  .fx{display:block}
}
@media (min-width:600px){.art{--z:1;--ay:.35}}
.sun{position:absolute;left:72.9%;top:49.6%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.75) 0,rgba(255,226,190,.35) 28%,rgba(255,214,180,0) 62%);mix-blend-mode:screen;animation:sunBreath 7s ease-in-out infinite}
.rays{position:absolute;left:72.9%;top:49.6%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,215,.16) 0deg 3deg,rgba(255,240,215,0) 3deg 14deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 45%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 45%);
  mix-blend-mode:screen;opacity:.5;animation:rays 160s linear infinite}
.mist{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));filter:blur(6px);mix-blend-mode:screen;pointer-events:none}
.m1{left:40%;top:57%;width:80%;height:9%;opacity:.55;animation:mistA 38s ease-in-out infinite alternate}
.m2{left:55%;top:66%;width:70%;height:8%;opacity:.5;animation:mistB 46s ease-in-out infinite alternate}
.m3{left:30%;top:75%;width:90%;height:10%;opacity:.45;animation:mistA 54s ease-in-out -20s infinite alternate}
.fall{position:absolute;width:1.4%;border-radius:2px;overflow:hidden;mix-blend-mode:screen;opacity:.85}
.fall::after{content:"";position:absolute;left:0;right:0;height:60%;top:-60%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));animation:water 1.6s linear infinite}
.f1{left:72.1%;top:65.6%;height:8%}
.f2{left:82.3%;top:76.4%;height:4.2%;width:1.1%}
.f2::after{animation-duration:1.9s;animation-delay:-.7s}
.lglow{position:absolute;width:3%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,190,120,.95),rgba(255,160,90,0) 70%);mix-blend-mode:screen;animation:flicker 3.2s ease-in-out infinite}
.birds{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bird-track{position:absolute;left:100%;width:100%;height:8px;animation:fly var(--t) linear var(--delay) infinite}
.bird{position:absolute;left:0;top:0;width:16px;height:7px;color:#3B3F4C;opacity:.7}
.bird.b2{width:12px;height:5px;left:14px;top:6px}
.bird.b3{width:10px;height:5px;left:30px;top:-4px}
.bird svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;animation:flap .5s ease-in-out infinite alternate}

.hero-shade{position:absolute;left:0;right:0;bottom:0;height:64%;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,16,28,0) 0,rgba(12,16,28,.14) 30%,rgba(12,16,28,.5) 60%,rgba(12,16,28,.8) 100%)}
.hero>.petals{z-index:2}
.veil{position:absolute;inset:0;z-index:2;background:var(--paper);pointer-events:none;animation:veil 1.2s ease .1s both}
/* torn paper edge into the next section (phones and tablets) */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;z-index:4;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path fill='%23F8F5EE' d='M0 40V22c38-5 66 3 104-1s62-11 101-6 72 10 118 5 79-13 128-8 59 9 108 6 69-11 117-8 81 12 129 6 61-10 108-6 79 9 128 4 72-7 159-1V40Z'/></svg>") bottom/100% 100% no-repeat}

.hero-copy{position:relative;z-index:3;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:600px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 62px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 46px)}
.brand{position:relative;width:min(66vw,300px);line-height:0}
.brand-logo{width:100%;height:auto;
  -webkit-mask-image:linear-gradient(100deg,#000 0 45%,transparent 55%);mask-image:linear-gradient(100deg,#000 0 45%,transparent 55%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:0 0;mask-position:0 0;
  animation:brush 1.5s cubic-bezier(.55,.1,.3,1) .25s both}
.brand-seal{position:absolute;left:41.62%;top:80.06%;width:11.08%;height:auto;animation:stamp .7s cubic-bezier(.3,1.4,.5,1) 1.45s both}
.seal-ring{position:absolute;left:39.85%;top:75.4%;width:14.6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(168,21,15,.28),rgba(168,21,15,0) 65%);opacity:0;animation:inkring 1.2s ease-out 1.65s both}
.hero-title{margin-top:30px;font:600 clamp(31px,8.7vw,50px)/1.05 var(--serif);letter-spacing:-.012em;color:var(--ink);
  text-shadow:0 1px 14px rgba(255,248,240,.9),0 0 3px rgba(255,248,240,.7);animation:tagIn 1s var(--ease) .85s both}
.hero-sub{margin-top:12px;max-width:23em;font:500 15.5px/1.5 var(--sans);color:#1E2942;text-wrap:pretty;
  text-shadow:0 0 12px rgba(255,246,236,.95),0 0 3px rgba(255,246,236,.85);animation:rise .9s var(--ease) 1.1s both}
.hero-gap{flex:1 0 clamp(210px,52vw,236px)}
.hero-join{width:100%;max-width:460px;animation:rise .9s var(--ease) 1.3s both}

/* ================= waitlist form ================= */
.join{position:relative;width:100%;text-align:left}
.join-row{display:flex;flex-direction:column;gap:10px}
.join-email{flex:1 1 auto;min-width:0;width:100%;height:54px;padding:0 18px;border:1px solid #D9D2C6;border-radius:14px;background:var(--hi);
  font:500 16px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);box-shadow:inset 0 1px 2px rgba(70,55,35,.06);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.join-email::placeholder{color:#7D838B;opacity:1}
.join-email:focus{border-color:rgba(35,77,76,.65);box-shadow:0 0 0 4px rgba(35,77,76,.15)}
.join-email[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 4px rgba(162,59,48,.13)}
.join-btn{width:100%}
@media (max-width:519.98px){
  .join-email,.join-btn{height:52px}
  .join .consent{margin-top:12px}
}
@media (min-width:520px){
  .join-row{flex-direction:row}
  .join-btn{width:auto;flex:none}
}
.join .spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
.join[data-state="sending"] .spin{display:block}
.join[data-state="sending"] .join-btn{filter:saturate(.8);cursor:progress}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font:400 13.5px/1.45 var(--sans);color:var(--slate);cursor:pointer;-webkit-tap-highlight-color:transparent}
.consent a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.cbox{position:relative;flex:none;width:22px;height:22px;margin-top:-1px}
.cbox input{position:absolute;left:-6px;top:-6px;width:34px;height:34px;margin:0;opacity:0;cursor:pointer}
.cbox .box{position:absolute;inset:0;display:grid;place-items:center;border-radius:7px;border:1.5px solid #ADA597;background:var(--hi);color:#fff;pointer-events:none;transition:background-color .2s,border-color .2s,box-shadow .2s}
.cbox .box .ic{width:14px;height:14px;stroke-width:3;opacity:0;transform:scale(.5);transition:opacity .2s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.cbox input:checked+.box{background:var(--cta);border-color:var(--cta)}
.cbox input:checked+.box .ic{opacity:1;transform:none}
.cbox input:focus-visible+.box{box-shadow:0 0 0 3px rgba(35,77,76,.45)}
.cbox input[aria-invalid="true"]+.box{border-color:var(--error);box-shadow:0 0 0 3px rgba(162,59,48,.15)}
.join-msg{margin-top:10px;font:500 13.5px/1.4 var(--sans);color:var(--error)}
.join-msg:empty{display:none}
.join[data-state="success"] .join-msg,.join[data-state="already"] .join-msg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.founding{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font:500 13px/1.4 var(--sans);color:var(--gold-text);text-align:center}
.founding .ic{width:13px;height:13px}
.join-done{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;overflow:hidden;
  background:var(--grain),linear-gradient(180deg,#FDFBF7,#F6F1E8);border:1px solid var(--gold-line);box-shadow:var(--sh-float);outline:none}
.join-done[hidden]{display:none}
.done-seal{flex:none;width:50px;height:auto}
.join-done.stamped .done-seal{animation:stamp .7s cubic-bezier(.3,1.4,.5,1) .1s both}
.done-t{font:600 21px/1.2 var(--serif);color:var(--ink)}
.done-s{margin-top:3px;font:400 14px/1.45 var(--sans);color:var(--slate)}
.done-petals{z-index:0;--fall:160px}
.join-done>div:not(.petals){position:relative;z-index:1}

/* the hero form sits on the dark cliff on phones and tablets */
@media (max-width:1023.98px){
  .hero .consent{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.45)}
  .hero .cbox .box{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.12)}
  .hero .cbox input:checked+.box{background:var(--cta);border-color:#9ED0C3}
  .hero .join-msg{color:#FFD6CF;text-shadow:0 1px 2px rgba(0,0,0,.5)}
  .hero .founding{color:#F3DDA8;text-shadow:0 1px 2px rgba(0,0,0,.5)}
  .hero .join-btn{box-shadow:inset 0 1px 0 rgba(121,187,169,.6),0 0 0 1px rgba(255,255,255,.22),0 10px 26px rgba(0,0,0,.3)}
  .hero .join-email{border-color:rgba(255,255,255,.5)}
}

/* hero, wide screens: copy on paper at left, the painting bleeds off the right edge */
@media (min-width:1024px){
  .hero{flex-direction:row;min-height:max(100svh,680px);background:radial-gradient(60% 70% at 85% 30%,rgba(246,214,197,.5),rgba(246,214,197,0) 70%),var(--paper)}
  .hero::after,.hero-shade{display:none}
  .hero-art{left:calc(max(560px,50vw - 70px) - 40px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 60px,#000 140px),linear-gradient(180deg,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 60px,#000 140px),linear-gradient(180deg,#000 82%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) min(70px,8%),#000 min(180px,20%)),linear-gradient(180deg,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) min(70px,8%),#000 min(180px,20%)),linear-gradient(180deg,#000 82%,transparent 100%);mask-composite:intersect}
  .art{--ay:.62}
  .hero-copy{flex:0 0 auto;width:max(560px,50vw - 70px);max-width:none;margin:0;align-items:flex-start;justify-content:center;text-align:left;
    padding:120px 0 96px max(56px,50vw - 560px)}
  .hero-copy>*{max-width:500px}
  .brand{width:min(360px,100%);margin-left:-10px}
  .hero-title{margin-top:36px;font-size:clamp(48px,4.2vw,62px);text-shadow:none}
  .hero-sub{margin-top:18px;max-width:26em;font:400 19px/1.55 var(--sans);color:var(--slate);text-shadow:none}
  .hero-gap{display:none}
  .hero-join{margin-top:36px;max-width:500px}
  .hero .founding{justify-content:flex-start;text-align:left}
}

/* ================= 2 · the mirror ================= */
.mirror{overflow:hidden}
.mirror-branch{position:absolute;right:-56px;top:-4px;width:min(40vw,300px);pointer-events:none;opacity:.95;transform-origin:100% 0;animation:sway 9s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
.dial{margin:44px auto 0;max-width:520px;text-align:center}
.dial-val{display:flex;justify-content:center;align-items:baseline;font:600 clamp(68px,19vw,104px)/1 var(--sans);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.dial-val b{font-weight:600}
.dial-val span{margin-left:3px;font-size:.38em;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.dial-val #mv{margin-left:.16em}
.dial-val [hidden]{display:none}
.dial-s{margin-top:8px;font:400 15px/1.4 var(--sans);color:var(--slate-teal)}
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:36px;margin:26px 0 0;padding:0;background:transparent;cursor:pointer;--f:.4286;touch-action:pan-y}
.rng:focus{outline:none}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cta) 0,var(--cta) calc(15px + (100% - 30px) * var(--f)),var(--track) calc(15px + (100% - 30px) * var(--f)))}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:#fff;border:.5px solid rgba(0,0,0,.06);box-shadow:0 2px 6px rgba(20,40,40,.2),0 0 0 6px rgba(35,77,76,.08);transition:box-shadow .2s}
.rng:active::-webkit-slider-thumb{box-shadow:0 2px 8px rgba(20,40,40,.22),0 0 0 11px rgba(35,77,76,.1)}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 6px rgba(20,40,40,.2),0 0 0 4px rgba(35,77,76,.5)}
.rng::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}
.rng::-moz-range-progress{height:6px;border-radius:3px;background:var(--cta)}
.rng::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:.5px solid rgba(0,0,0,.06);box-shadow:0 2px 6px rgba(20,40,40,.2),0 0 0 6px rgba(35,77,76,.08)}
.rng:focus-visible::-moz-range-thumb{box-shadow:0 2px 6px rgba(20,40,40,.2),0 0 0 4px rgba(35,77,76,.5)}
.ends{display:flex;justify-content:space-between;margin-top:6px;padding:0 8px;font:500 12.5px/1 var(--sans);color:var(--muted)}
.proj{max-width:520px;margin:30px auto 0;padding:2px 20px}
.proj p{display:flex;gap:14px;align-items:flex-start;padding:15px 0;font:400 16px/1.45 var(--sans);color:var(--slate)}
.proj p+p{border-top:1px solid var(--divider)}
.proj .ic{width:19px;height:19px;margin-top:2px;color:var(--jade)}
.proj b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.year{max-width:520px;margin:34px auto 0}
.year-grid{display:grid;grid-template-columns:repeat(25,1fr);gap:5px}
.year-grid i{display:block;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px #D8D0C3;transition:background-color .4s ease,box-shadow .4s ease,transform .4s var(--ease)}
.year-grid i.on{background:#283350;box-shadow:none}
.year-grid i.on:nth-child(3n){background:#323E5C}
.year-grid i.on:nth-child(7n+2){background:#1E2843}
.year-grid i.on:nth-child(11n+5){background:#3B4767}
@media (min-width:640px){.year-grid{grid-template-columns:repeat(37,1fr);gap:4px}}
.year figcaption{margin-top:14px;font:400 13.5px/1.5 var(--sans);color:var(--muted);text-align:center}
.mirror-note{max-width:26em;margin:44px auto 0;font:400 italic clamp(21px,3.4vw,26px)/1.4 var(--serif);color:var(--ink-2);text-align:center;text-wrap:balance}

/* ================= 3 · what you take back ================= */
.gifts{list-style:none;max-width:620px;margin:52px auto 0;padding:4px 22px;background:var(--grain),linear-gradient(180deg,var(--card),var(--card-low));border:1px solid var(--hairline);border-radius:20px;box-shadow:var(--sh-inset),var(--sh-card)}
.gift{display:flex;gap:18px;align-items:flex-start;padding:20px 0}
.gift+.gift{border-top:1px solid var(--divider)}
.gift-ic{flex:none;display:grid;place-items:center;width:46px;height:46px}
.gift-ic img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 .6px #fff)}
.gift-time .ic{width:36px;height:36px;stroke-width:1.5;color:var(--slate-teal)}
.gift h3{font:600 23px/1.15 var(--serif);color:var(--tc,var(--ink))}
.gift p{margin-top:4px;font:400 15.5px/1.5 var(--sans);color:var(--slate)}
.xpline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:30px;font:500 15px/1.4 var(--sans);color:var(--slate-teal);text-align:center}
@media (min-width:1024px){
  .gifts{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:none;padding:0;background:none;border:0;box-shadow:none}
  .gift{flex-direction:column;gap:20px;padding:30px 22px 28px;border-radius:20px;background:var(--grain),linear-gradient(180deg,var(--card),var(--card-low));border:1px solid var(--hairline);box-shadow:var(--sh-inset),var(--sh-card);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .gift+.gift{border-top:1px solid var(--hairline)}
  .gift:hover{transform:translateY(-4px);box-shadow:var(--sh-inset),var(--sh-float)}
  .gift-ic{width:56px;height:56px}
  .gift-ic img{width:54px;height:54px}
  .gift-time .ic{width:44px;height:44px}
}

/* ================= 4 · how it works ================= */
.loop{background:linear-gradient(180deg,rgba(239,232,220,0),rgba(239,232,220,.65) 14%,rgba(239,232,220,.65) 86%,rgba(239,232,220,0))}
.chain{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;list-style:none;max-width:880px;margin:36px auto 0;padding:0}
.chain li{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;background:rgba(251,248,243,.9);border:1px solid var(--hairline);font:500 13.5px/1 var(--sans);color:var(--label);white-space:nowrap}
.chain li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:12px;height:12px;margin-top:-6px;opacity:.55;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E5A5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center/contain no-repeat}
.chain-end{background:var(--mint)!important;border-color:var(--mint-line)!important;color:var(--jade-label)!important}
.chain-end .ic{width:13px;height:13px}

.steps{position:relative;max-width:1040px;margin:64px auto 0}
.path{position:absolute;left:0;top:0;width:44px;height:100%;overflow:visible;pointer-events:none}
.path path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.path-wash{stroke:#3E5A5E;stroke-width:9;opacity:.07}
.path-ink{stroke:url(#inkGrad);stroke-width:2.6}
.js .path-ink{transition:stroke-dashoffset .12s linear}
.steps::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;border-radius:1px;background:linear-gradient(180deg,#C9C2B6,#86AEA5 50%,#E0C28B)}
.js .steps::before{display:none}
.step-list{list-style:none;margin:0;padding:0}
.step{position:relative;padding:0 0 72px 60px}
.step:last-child{padding-bottom:0}
.node{position:absolute;left:4px;top:-2px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 1.5px #C9C2B6,0 0 0 6px var(--paper);font:600 17px/1 var(--serif);color:var(--muted);transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}
.step.lit .node{background:var(--cta);color:#F4F7F6;box-shadow:0 0 0 1.5px var(--cta),0 0 0 6px rgba(35,77,76,.12)}
.step-k{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--jade-label)}
.step-text h3{margin-top:8px;font:600 clamp(26px,5.6vw,34px)/1.12 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.step-text p:last-child{margin-top:10px;max-width:30em;font:400 16.5px/1.6 var(--sans);color:var(--slate)}
.glimpse{margin-top:26px}

@media (min-width:900px){
  .path{left:50%;width:120px;margin-left:-60px}
  .steps::before{left:50%;margin-left:-1px}
  .step{display:grid;grid-template-columns:1fr 1fr;column-gap:150px;align-items:center;padding:0 0 110px}
  .node{left:50%;top:50%;margin:-18px 0 0 -18px}
  .step-text{justify-self:end;max-width:410px}
  .glimpse{margin-top:0;justify-self:start;width:100%;max-width:370px}
  .step:nth-child(even) .step-text{order:2;justify-self:start}
  .step:nth-child(even) .glimpse{order:1;justify-self:end}
}

/* app UI glimpses: clean cream cards, rebuilt from the prototype */
.ui{position:relative;width:100%;max-width:370px;padding:18px;border-radius:20px;overflow:hidden;
  background:var(--grain),linear-gradient(180deg,#FDFBF7,#F7F3EC);border:1px solid var(--hairline);box-shadow:var(--sh-inset),var(--sh-float)}
.ui-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-t{font:600 18px/1.2 var(--serif);color:var(--ink)}
.ui-k{font:600 11px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--indigo,#25255F)}
.ui-s{font:500 12px/1 var(--sans);color:var(--muted)}
.chip-good{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--mint);border:1px solid var(--mint-line);font:600 12px/1 var(--sans);color:var(--jade-label)}
.chip-good .ic{width:13px;height:13px;stroke-width:2.4}

/* week chart */
.wk{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;height:132px;margin-top:16px}
.wk-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.wk-col i{display:block;width:100%;max-width:24px;height:calc(var(--h) * 96px);border-radius:7px 7px 4px 4px;background:linear-gradient(180deg,#A9C6BF,#6D998F);transform-origin:50% 100%;transition:transform 1s var(--ease) calc(var(--i) * 90ms + 150ms)}
.wk-col.today i{background:linear-gradient(180deg,var(--focus-b),var(--focus-a))}
.wk-col b{font:500 11px/1 var(--sans);color:var(--muted)}
.wk-col.today b{color:var(--jade-label);font-weight:700}
.wk-base{position:absolute;left:-4px;right:-4px;bottom:calc(19px + 87px);border-top:1.5px dashed rgba(184,80,107,.45)}
.wk-base em{position:absolute;right:0;top:-19px;font:600 10.5px/1 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--sakura-deep)}
.js .ui-week:not(.play) .wk-col i{transform:scaleY(.02)}

/* mission card */
.ui-mission{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.ui-pi{width:44px;height:44px;object-fit:contain;margin-top:2px}
.m-t{margin-top:6px;font:600 17.5px/1.25 var(--serif);color:var(--ink)}
.m-p{display:flex;align-items:center;gap:12px;margin-top:14px}
.m-bar{position:relative;flex:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.m-bar i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--focus-a),var(--focus-b))}
.js .ui-mission .m-bar i{width:0}
.js .ui-mission.run .m-bar i{width:100%;transition:width 2.6s cubic-bezier(.45,.1,.35,1)}
.m-c{font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--slate);white-space:nowrap}
.m-done{display:flex;align-items:center;gap:8px;height:0;margin-top:0;overflow:hidden;opacity:0;font:600 13px/1 var(--sans);color:var(--jade-label);transition:height .5s var(--ease),margin .5s var(--ease),opacity .5s ease}
.m-done .ck{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--jade);color:#fff}
.m-done .ck .ic{width:11px;height:11px;stroke-width:3.2}
.ui-mission.complete .m-done{height:18px;margin-top:12px;opacity:1}
.ui-mission.complete .xp-chip{box-shadow:inset 0 1px 0 var(--xp-hi),0 0 0 3px rgba(223,193,158,.35),0 2px 10px rgba(180,130,60,.22);transition:box-shadow .6s}

/* reward moment */
.ui-reward{padding:26px 20px 22px;text-align:center}
.rw-ink{position:absolute;left:50%;top:22px;width:170px;height:170px;margin-left:-85px;border-radius:50%;background:radial-gradient(circle,rgba(17,100,90,.16),rgba(17,100,90,0) 65%);opacity:0;pointer-events:none}
.rw-seal{position:relative;width:54px;height:auto;margin:0 auto 10px}
.rw-k{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
.rw-xp{margin-top:8px;font:700 42px/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.rw-xp small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--muted)}
.rw-traits{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.rw-trait{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 7px;border-radius:999px;background:#fff;border:1px solid var(--hairline);font:600 13px/1 var(--sans);color:var(--ink)}
.rw-trait img{width:20px;height:20px;object-fit:contain}
.js .ui-reward:not(.play) .rw-seal,.js .ui-reward:not(.play) .rw-trait{opacity:0}
.ui-reward.play .rw-seal{animation:stamp .7s cubic-bezier(.3,1.4,.5,1) .2s both}
.ui-reward.play .rw-ink{animation:inkring 1.4s ease-out .3s both}
.ui-reward.play .rw-trait{animation:rise .55s var(--ease) both}
.ui-reward.play .rw-trait:nth-child(1){animation-delay:.9s}
.ui-reward.play .rw-trait:nth-child(2){animation-delay:1.05s}
.rescue{display:flex;align-items:center;gap:10px;max-width:370px;margin-top:14px;padding:10px 14px;border-radius:14px;background:rgba(251,248,243,.8);border:1px solid var(--hairline);font:400 14px/1.35 var(--sans);color:var(--slate)}
.rescue img{width:26px;height:36px;object-fit:contain}
.rescue b{font-weight:600;color:var(--ink)}

/* ninja card */
.ui-ninja{display:flex;align-items:center;gap:16px}
.nj-av{position:relative;flex:none;width:84px;height:84px}
.nj-aura{position:absolute;inset:-16px;border-radius:50%;opacity:0;transition:opacity 1s ease;
  background:radial-gradient(circle closest-side,rgba(242,204,128,0) 62%,rgba(242,204,128,.6) 74%,rgba(246,214,150,.26) 86%,rgba(246,214,150,0) 100%)}
.nj-c{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#F3F6F1,#DCE8E1);box-shadow:0 0 0 2px #86AEA5,0 0 0 5px #FBF8F3;transition:box-shadow 1s ease}
.nj-c img{position:absolute;left:-15%;top:-5%;width:118%;max-width:none;height:auto;filter:saturate(.6);transition:filter 1.2s ease}
.nj-i{flex:1;min-width:0}
.nj-lv,.nj-t{display:grid}
.nj-lv>span,.nj-t>span{grid-area:1/1;transition:opacity .5s ease,transform .6s var(--ease)}
.nj-lv{font:600 12.5px/1.3 var(--sans);color:var(--jade-label)}
.nj-t{margin-top:2px;font:600 20px/1.15 var(--serif);color:var(--ink)}
.nj-lv .b,.nj-t .b{opacity:0;transform:translateY(6px)}
.nj-lv .b{color:#8A6424}
.nj-bar{position:relative;display:block;height:7px;margin-top:12px;border-radius:4px;background:var(--track);overflow:hidden}
.nj-bar i{position:absolute;inset:0 auto 0 0;width:62%;border-radius:inherit;background:linear-gradient(90deg,#0B4744,#125E55 60%,#3D6964)}
.nj-x{margin-top:8px;font:500 12px/1.3 var(--sans);color:var(--muted)}
.ui-ninja.fill .nj-bar i{width:100%;transition:width 1.4s cubic-bezier(.45,.1,.35,1)}
.ui-ninja.lvl .nj-bar i{width:12%;background:linear-gradient(90deg,#B8862E,#E0C28B);transition:width .8s var(--ease) .3s}
.ui-ninja.lvl .nj-lv .a,.ui-ninja.lvl .nj-t .a{opacity:0;transform:translateY(-6px)}
.ui-ninja.lvl .nj-lv .b,.ui-ninja.lvl .nj-t .b{opacity:1;transform:none}
.ui-ninja.lvl .nj-aura{opacity:1}
.ui-ninja.lvl .nj-c{box-shadow:0 0 0 2px #D9B56E,0 0 0 5px rgba(248,236,208,.95)}
.ui-ninja.lvl .nj-c img{filter:none}

/* streak card */
.streak-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:16px;background:linear-gradient(180deg,#FFF8E8,#FEF3E0 40%);border:.75px solid #E2CBB0;font:600 12.5px/1 var(--sans);color:var(--vermilion)}
.streak-pill .ic{width:15px;height:15px;fill:rgba(228,108,58,.2)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:18px}
.days span{display:flex;flex-direction:column;align-items:center;gap:7px;font:500 11px/1 var(--sans);color:var(--muted)}
.days i{display:block;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#F5B26B,#D9572E);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .45s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 140ms + 200ms),opacity .3s ease calc(var(--i) * 140ms + 200ms)}
.days span:last-child i{background:var(--sunk);box-shadow:inset 0 0 0 1.5px #D8D0C3}
.js .ui-streak:not(.play) .days i{transform:scale(.3);opacity:.15}
.moved{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid var(--divider);font:500 13.5px/1.2 var(--sans);color:var(--slate)}
.moved img{width:26px;height:26px;object-fit:contain}
.moved b{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-weight:600;color:var(--jade-label);transition:opacity .5s ease 1.3s,transform .6s var(--ease) 1.3s}
.moved b .ic{width:14px;height:14px;stroke-width:2.4}
.js .ui-streak:not(.play) .moved b{opacity:0;transform:translateY(6px)}

/* ================= 5 · the living world ================= */
.worlds{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:8px var(--gutter) 22px;margin-top:48px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.worlds::-webkit-scrollbar{display:none}
.worlds:focus-visible{outline-offset:-3px}
.w-card{flex:0 0 min(78vw,340px);scroll-snap-align:start}
.w-frame{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;isolation:isolate;background:#DCD5C8;box-shadow:var(--sh-float)}
.w-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(30,35,60,.08);pointer-events:none;z-index:5}
.w-img{position:absolute;left:0;top:-6%;width:100%;height:112%;max-width:none;object-fit:cover;will-change:transform}
.w-tag{position:absolute;left:12px;top:12px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:rgba(250,247,242,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 12.5px/1 var(--sans);color:var(--ink)}
.w-tag .ic{width:15px;height:15px}
.w-card figcaption{margin-top:18px;padding:0 4px;font:400 15.5px/1.55 var(--sans);color:var(--slate)}
.w-card figcaption b{display:block;margin-bottom:4px;font:600 22px/1.2 var(--serif);color:var(--ink)}
.w-fog{position:absolute;left:-30%;width:160%;top:58%;height:22%;z-index:2;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));animation:fogDrift 18s ease-in-out infinite alternate}
.w-storm .w-img{filter:brightness(.74) saturate(.78)}
.w-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,20,38,.42),rgba(12,20,38,.08) 60%,rgba(12,20,38,.25))}
.w-storm .w-fog{top:40%;height:26%;background:radial-gradient(closest-side,rgba(192,204,224,.42),rgba(192,204,224,0));animation-duration:15s}
.w-storm .w-tag{background:rgba(22,30,52,.66);color:#EEF2F8}
.rain{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;--rh:520px}
.rain i{position:absolute;top:-30px;width:1px;border-radius:1px;background:linear-gradient(180deg,rgba(220,230,245,0),rgba(220,230,245,.8));animation:rainFall var(--t,.8s) linear var(--delay,0s) infinite}
.w-sun{position:absolute;left:46%;top:15.6%;z-index:2;width:70%;aspect-ratio:1;margin:-35% 0 0 -35%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,244,214,.7) 0,rgba(255,226,190,.3) 30%,rgba(255,214,180,0) 64%);mix-blend-mode:screen;animation:sunBreath 7s ease-in-out infinite}
@media (min-width:900px){
  .worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1160px;margin:60px auto 0;padding:0 var(--gutter);overflow:visible}
  .w-card{flex:none}
}

/* ================= 6 · the path of ranks: five painted transformations ================= */
.evo{list-style:none;margin:44px -20px 0;padding:6px 20px 10px;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.evo::-webkit-scrollbar{display:none}
.ev{scroll-snap-align:center;text-align:center;transition:opacity .9s ease calc(var(--i) * 140ms),transform .9s var(--ease) calc(var(--i) * 140ms)}
.js .ev{opacity:0;transform:translateY(18px)}
.js .evo.play .ev{opacity:1;transform:none}
.ev figure{position:relative;margin:0;aspect-ratio:1;isolation:isolate}
.ev figure img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);
  transition:transform 1.2s var(--ease)}
.ev:hover figure img{transform:scale(1.03)}
.ev1 figure img{filter:saturate(.8)}
.ev-lv{margin:4px 0 0;font:600 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ev3 .ev-lv{color:var(--jade-label)}
.ev4 .ev-lv,.ev5 .ev-lv{color:#8A6424}
.ev-t{margin:6px 0 0;font:600 25px/1.15 var(--serif);color:var(--ink)}
.ev-d{margin:8px auto 0;max-width:260px;font:400 15px/1.45 var(--sans);color:var(--slate)}
.ev-aura{position:absolute;inset:4%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(240,170,120,.38),rgba(240,170,120,0) 62%);animation:breathe 6s ease-in-out infinite}
.evo-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.evo-dots i{width:6px;height:6px;border-radius:50%;background:#D6CFC4;transition:background .3s,width .3s}
.evo-dots i.on{width:18px;border-radius:3px;background:var(--jade-label)}
@media (min-width:1024px){
  .evo{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible;margin:56px 0 0;padding:0;gap:14px;align-items:start}
  .ev:nth-child(2){margin-top:28px}.ev:nth-child(3){margin-top:56px}.ev:nth-child(4){margin-top:28px}
  .ev-t{font-size:21px}.ev-d{font-size:14px}
  .evo-dots{display:none}
}
@media (prefers-reduced-motion:reduce){.ev{opacity:1;transform:none;transition:none}.ev-aura{animation:none}}

/* ================= 7 · the dojo ================= */
.dojo-grid{display:grid;gap:44px;justify-items:center}
.dojo-copy{text-align:center;max-width:560px}
.dojo-trophy{width:104px;height:auto;margin:0 auto 22px;filter:drop-shadow(0 8px 16px rgba(120,90,40,.18))}
.dojo-copy .lead{margin-left:auto;margin-right:auto}
.board{max-width:400px;padding:16px 14px 14px}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--sunk)}
.tabs span{flex:1;height:32px;display:grid;place-items:center;border-radius:9px;font:500 12.5px/1 var(--sans);color:var(--muted)}
.tabs .on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(60,45,25,.1)}
.rows{position:relative;list-style:none;height:232px;margin:12px 0 0;padding:0}
.row{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:28px 38px minmax(0,1fr) 34%;align-items:center;column-gap:10px;height:52px;padding:0 10px 0 6px;border-radius:12px;
  transform:translateY(calc(var(--pos) * 58px));transition:transform .9s var(--ease),background-color .5s ease}
.row.me{background:var(--mint);box-shadow:inset 0 0 0 1px var(--mint-line)}
.b-rk{font:700 14px/1 var(--sans);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.row.me .b-rk{color:var(--jade)}
.b-av{position:relative;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#E9E3D8}
.b-av img{position:absolute;left:-15%;top:-5%;width:118%;max-width:none;height:auto}
.av-a{background:radial-gradient(circle at 50% 38%,#C9C5E6 0 28%,#9A9FD0 29% 100%)}
.av-b{background:radial-gradient(circle at 50% 38%,#BFD8D0 0 28%,#7FAEA3 29% 100%)}
.av-c{background:radial-gradient(circle at 50% 38%,#E8C9D6 0 28%,#C892AE 29% 100%)}
.b-nm{font:600 14.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-xp{position:relative;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.b-xp i{position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,#8C93A6,#B7BDCC);transition:width 1s var(--ease)}
.row.me .b-xp i{background:linear-gradient(90deg,var(--focus-a),var(--focus-b))}
.row[data-id="a"] .b-xp i{background:linear-gradient(90deg,#C9A04E,#E5C77E)}
.board-foot{margin-top:6px;font:500 12px/1.3 var(--sans);color:var(--muted);text-align:center}
@media (min-width:1024px){
  .dojo-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:center;justify-items:stretch;max-width:1080px}
  .dojo-copy{text-align:left;justify-self:end;max-width:500px}
  .dojo-trophy{margin:0 0 24px -6px}
  .dojo-copy .lead{margin-left:0}
  .board{justify-self:start}
}

/* ================= 8 · privacy promise ================= */
.promises{list-style:none;max-width:620px;margin:44px auto 0;padding:6px 24px}
.promises li{display:flex;gap:18px;align-items:flex-start;padding:20px 0}
.promises li+li{border-top:1px solid var(--divider)}
.pr-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--jade)}
.pr-ic .ic{width:20px;height:20px}
.promises b{display:block;font:600 19px/1.3 var(--serif);color:var(--ink)}
.promises p{margin-top:4px;font:400 15px/1.5 var(--sans);color:var(--slate)}

/* ================= 9 · pricing ================= */
.price-card{position:relative;max-width:560px;margin:84px auto 0;padding:66px 24px 30px;border-radius:26px;text-align:center;
  background:radial-gradient(90% 50% at 50% 0,rgba(250,230,196,.55),rgba(250,230,196,0) 70%),var(--grain),linear-gradient(180deg,#FDFAF4,#F7F1E6);
  border:1px solid var(--gold-line);box-shadow:var(--sh-inset),0 2px 6px rgba(120,90,40,.06),0 30px 70px rgba(120,90,40,.14)}
.pc-av{position:absolute;left:50%;top:-46px;width:92px;height:92px;margin-left:-46px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#FFEBCB,#F6D3B4 55%,#EDC1AE);box-shadow:0 0 0 2.5px #D2A64E,0 0 0 7px #FBF6EC,0 0 30px 12px rgba(232,196,120,.42)}
.pc-av img{position:absolute;left:-15%;top:-5%;width:118%;max-width:none;height:auto}
.price{display:flex;align-items:baseline;justify-content:center;gap:6px;font:700 clamp(54px,14vw,68px)/1 var(--sans);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.price .per{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:7px;height:30px;margin-top:16px;padding:0 13px;border-radius:9px;background:linear-gradient(180deg,var(--xp-top),var(--xp-bg));border:.75px solid var(--xp-line);box-shadow:inset 0 1px 0 var(--xp-hi),0 1px 2px rgba(120,85,40,.12);font:600 13px/1 var(--sans);color:var(--xp-text)}
.badge .ic{width:13px;height:13px}
.price-note{margin-top:12px;font:400 15px/1.5 var(--sans);color:var(--slate)}
.incl{list-style:none;max-width:420px;margin:26px auto 0;padding:18px 0 4px;border-top:1px solid #EADFCB;text-align:left}
.incl li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font:500 15px/1.45 var(--sans);color:var(--ink)}
.incl .ck{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;background:var(--mint);color:var(--jade)}
.incl .ck .ic{width:13px;height:13px;stroke-width:3}
.cancel{margin:14px 0 26px;font:500 14px/1.4 var(--sans);color:var(--slate-teal)}
.pc-join{max-width:460px;margin:0 auto}
.soon{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;font:500 13px/1.4 var(--sans);color:var(--muted)}
.soon .ic{width:15px;height:15px}
@media (min-width:640px){.price-card{padding:70px 48px 36px}}

/* ================= 10 · FAQ ================= */
.qa{max-width:680px;margin:44px auto 0;border-top:1px solid var(--hairline)}
.qa details{border-bottom:1px solid var(--hairline)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;list-style:none;cursor:pointer;font:600 clamp(19px,2.6vw,22px)/1.3 var(--serif);color:var(--ink);-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{width:20px;height:20px;color:var(--slate-teal);transition:transform .4s var(--ease)}
.qa details[open] summary .ic{transform:rotate(180deg)}
.qa summary:hover{color:var(--jade-label)}
.ans{padding:0 4px 22px}
.ans p{max-width:36em;font:400 16px/1.65 var(--sans);color:var(--slate)}
.ans p+p{margin-top:10px}
.ans a{color:var(--jade-label);text-underline-offset:2px}
@supports (interpolate-size:allow-keywords){
  .qa{interpolate-size:allow-keywords}
  .qa details::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
  .qa details[open]::details-content{height:auto}
}

/* ================= closing + footer ================= */
.closing{position:relative;padding:clamp(120px,18vw,200px) 0 clamp(72px,10vw,110px);text-align:center;overflow:hidden}
.closing-mist{position:absolute;left:50%;top:0;width:max(1100px,110vw);max-width:none;transform:translateX(-50%);opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 55%,transparent 100%)}
.closing .wrap{position:relative}
.closing-seal{width:46px;height:auto;margin:0 auto 22px;opacity:.9}
.closing .h2{margin-top:0}
.closing .lead{margin-top:12px}
.closing .btn{margin-top:30px}
.foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hairline);font:400 13px/1.4 var(--sans);color:var(--muted);text-align:center}
.foot nav{display:flex;gap:22px}
.foot a{color:var(--slate);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ================= legal pages ================= */
.legal-top{display:flex;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gutter) 0}
.legal-top a{display:block;width:124px}
.legal-top .back{width:auto;font:500 14px/1 var(--sans);color:var(--slate-teal);text-decoration:none}
.legal-top .back:hover{text-decoration:underline;text-underline-offset:3px}
.doc{max-width:760px;margin:0 auto;padding:56px var(--gutter) 80px}
.doc h1{font:600 clamp(38px,8vw,54px)/1.06 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.doc .updated{margin-top:12px;font:500 13.5px/1.4 var(--sans);color:var(--muted)}
.doc .summary{margin-top:30px;padding:20px 22px}
.doc .summary p{font:500 16px/1.6 var(--sans);color:var(--ink)}
.doc .summary ul{margin-top:8px}
.doc h2{margin-top:44px;font:600 clamp(24px,4vw,28px)/1.2 var(--serif);color:var(--ink)}
.doc p,.doc li{font:400 16.5px/1.7 var(--sans);color:var(--slate)}
.doc p{margin-top:12px}
.doc ul{margin-top:12px;padding-left:20px}
.doc li+li{margin-top:6px}
.doc li::marker{color:var(--jade)}
.doc strong{font-weight:600;color:var(--ink)}
.doc a{color:var(--jade-label);text-underline-offset:2px}
.company{margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline)}
.company p{margin-top:4px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.company p:first-child{margin-top:0;font-weight:600;color:var(--slate)}

/* ================= keyframes ================= */
@keyframes artOpen{from{transform:scale(1.06);filter:blur(6px)}to{transform:none;filter:none}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.045) translate(-4px,-3px)}}
@keyframes veil{from{opacity:1}to{opacity:0}}
@keyframes brush{from{-webkit-mask-position:100% 0;mask-position:100% 0;filter:blur(1.2px)}70%{filter:blur(.3px)}to{-webkit-mask-position:0 0;mask-position:0 0;filter:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-9deg)}55%{opacity:1;transform:scale(.9) rotate(1deg)}78%{transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes inkring{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes tagIn{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sunBreath{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes mistA{from{transform:translateX(-18%)}to{transform:translateX(10%)}}
@keyframes mistB{from{transform:translateX(12%)}to{transform:translateX(-16%)}}
@keyframes water{to{top:100%}}
@keyframes fly{from{transform:translate(0,0)}to{transform:translate(-125%,var(--dy,-20px))}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes flicker{0%,100%{opacity:.55}40%{opacity:.85}60%{opacity:.65}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes fogDrift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
@keyframes rainFall{from{transform:translate(0,0) rotate(9deg)}to{transform:translate(-26px,calc(var(--rh) + 40px)) rotate(9deg)}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ================= calm motion only, and none if asked ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .petals,.rain,.birds,.rays{display:none!important}
  .rv.rv-wait{opacity:1;transform:none}
  .join .spin{animation:spin 1s linear infinite!important;animation-duration:1s!important;animation-iteration-count:infinite!important}
}

/* ================= cherry branches that tie one section to the next ================= */
.sec + .sec::before{content:"";position:absolute;top:0;width:clamp(110px,24vw,190px);aspect-ratio:440/324;pointer-events:none;z-index:1;
  background:url(assets/img/branch.webp) center/contain no-repeat;opacity:.9;transform:translateY(-52%)}
.sec + .sec:nth-of-type(odd)::before{right:-14px}
.sec + .sec:nth-of-type(even)::before{left:-14px;transform:translateY(-52%) scaleX(-1)}
.sec + .sec::after{content:"";position:absolute;top:0;left:50%;width:min(60%,520px);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(201,160,96,0),rgba(201,160,96,.35),rgba(233,175,174,.45),rgba(201,160,96,.35),rgba(201,160,96,0))}
.drift-petal{position:absolute;width:12px;height:8px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#FBD3DA,#EE9AAD 70%);opacity:.85;pointer-events:none;z-index:1}
@media (prefers-reduced-motion:no-preference){.drift-petal{animation:petalDrift 9s ease-in-out infinite}}
@keyframes petalDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,10px) rotate(40deg)}}