/* ==========================================================================
   Wishfill website - layout and components.
   Everything visual comes from tokens.css. The blocks at the very end marked
   "DIRECTION FLOURISHES" are the only places that are specific to a direction;
   delete the ones you don't keep.
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--body-size)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:var(--h2-weight)}
h3{font-size:1.35rem;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.ico{width:1.1em;height:1.1em;vertical-align:-.15em;fill:currentColor}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 1.05rem/1 var(--font-display);text-decoration:none;padding:1rem 1.6rem;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);border:var(--border-w) solid var(--line);box-shadow:var(--shadow-btn);transition:transform .15s,box-shadow .15s,filter .15s;cursor:pointer}
.btn:hover{filter:brightness(1.06);transform:translate(-1px,-1px)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--shadow-btn-press)}
.btn-ghost{background:transparent;color:inherit}
.btn-small{padding:.7rem 1.1rem;font-size:.95rem}
.link-quiet{text-decoration:none;font-weight:700;padding:.5rem .6rem;border-radius:8px}
.link-quiet:hover{text-decoration:underline}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.nav-in{display:flex;align-items:center;gap:1.2rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-mark{display:block;width:34px;height:42px}
.brand-mark svg{width:100%;height:100%}
.brand-name{font:800 1.5rem/1 var(--font-display);letter-spacing:-.02em}
.nav-links{display:flex;gap:1.3rem;margin-left:auto;font-weight:600;font-size:.98rem}
.nav-links a{text-decoration:none;padding:.4rem .2rem;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:.6rem}

/* ---------- jar (shared) ---------- */
.jar{display:flex;justify-content:center}
.jar-svg{height:100%;width:auto;display:block;overflow:visible}
.jar-hero .jar-svg{height:min(50vh,390px)}
.jar-phone .jar-svg{height:150px}
.jar-feat .jar-svg{height:210px}
.jar-gift .jar-svg{height:120px}
.jar-svg .glass{fill:none;stroke:var(--glass);stroke-width:4}
.jar-svg .glassfill{fill:#ffffff14}
.jar-svg .lidr{fill:var(--lid)}
.jar-svg .liquid{transition:transform 1.7s cubic-bezier(.2,.8,.2,1)}
/* the goo sloshes gently all the time: the whole body tilts and bobs around the middle of the surface */
.jar-svg .slosh{transform-origin:100px 0;transform-box:view-box;animation:slosh 6.4s ease-in-out infinite}
@keyframes slosh{
  0%{transform:rotate(calc(var(--slosh,1) * -1.4deg)) translateY(0)}
  18%{transform:rotate(calc(var(--slosh,1) * 1.9deg)) translateY(calc(var(--slosh,1) * 1.6px))}
  37%{transform:rotate(calc(var(--slosh,1) * -2.1deg)) translateY(calc(var(--slosh,1) * -1px))}
  58%{transform:rotate(calc(var(--slosh,1) * 1.3deg)) translateY(calc(var(--slosh,1) * 1.8px))}
  79%{transform:rotate(calc(var(--slosh,1) * -1.6deg)) translateY(calc(var(--slosh,1) * -.6px))}
  100%{transform:rotate(calc(var(--slosh,1) * -1.4deg)) translateY(0)}}
.jar-hero{--slosh:2.2}
.jar-phone,.jar-feat,.jar-gift{--slosh:.7}
.brand-mark .slosh{animation:none}
.jar-svg .wave{animation:wave 3.4s linear infinite}
.jar-svg .wave2{animation:wave 5.2s linear infinite reverse;opacity:.55}
@keyframes wave{to{transform:translateX(50px)}}
.jar-svg .bub{animation:rise 4s ease-in infinite;transform-box:fill-box;transform-origin:center}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}85%{opacity:.9}100%{transform:translateY(-34px) scale(1.05);opacity:0}}
.jar-svg .spark{fill:var(--tier-legendary);animation:twinkle 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.jar-svg .s2{animation-delay:.9s}.jar-svg .s3{animation-delay:1.7s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1) rotate(25deg)}}
.goo{position:fixed;pointer-events:none;z-index:30;filter:drop-shadow(0 4px 8px #0005)}
.goo svg{width:100%;height:100%;display:block}
.confetti{position:fixed;pointer-events:none;z-index:31;width:8px;height:5px;border-radius:1px}
.stage.glow{animation:stageglow 2.4s ease-out}
@keyframes stageglow{0%{box-shadow:0 0 0 0 var(--tier-legendary)}30%{box-shadow:0 0 60px 14px color-mix(in srgb,var(--tier-legendary) 70%,transparent)}100%{box-shadow:var(--stage-shadow,none)}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--hero-bg);color:var(--hero-ink);padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(3rem,8vw,6rem);overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:800 .85rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-3);margin-bottom:1rem}
.sec .eyebrow{color:var(--accent)}
.sec-dark .eyebrow{color:var(--accent-3)}
.hero h1{font-size:var(--h1-size);font-weight:var(--h1-weight);letter-spacing:var(--h1-track);line-height:var(--h1-lh)}
.mark{position:relative;white-space:nowrap;color:var(--accent-3)}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;margin-top:1.4rem;max-width:34em;color:var(--hero-soft)}
.lead strong{color:var(--hero-ink)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero .btn-ghost{border-color:currentColor;box-shadow:none}
.fine{margin-top:1.3rem;font-size:.95rem;color:var(--hero-soft)}
.fine a{color:var(--hero-ink);font-weight:700}
.hero-art{position:relative;min-height:clamp(340px,44vw,520px);display:grid;justify-items:start;align-items:center}
.stage{position:relative;width:min(80%,410px);aspect-ratio:1/1.12;display:grid;place-items:end center;padding:1.2rem 1rem 1rem;background:var(--stage-bg);border-radius:var(--radius-l);overflow:visible;--stage-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}
.stage .jar{align-items:flex-end}
.toast-slot{position:absolute;top:-1.1rem;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;z-index:5;pointer-events:none}
.toast{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.2rem;border-radius:999px;font:700 .98rem/1.2 var(--font-display);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:tin .5s cubic-bezier(.2,1.2,.3,1)}
.toast i{font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:.3em .7em;border-radius:99px;background:#00000040}
.toast.t-legendary{background:linear-gradient(135deg,#c9811a,#f2b134 45%,#ffe08a 60%,#f2b134);color:#3b2a00}
.toast.out{opacity:0;transform:translateY(-14px);transition:all .5s}
@keyframes tin{from{opacity:0;transform:translateY(-22px) scale(.9)}to{opacity:1;transform:none}}
.phone{position:absolute;right:-2%;bottom:-5%;width:clamp(140px,16vw,190px);aspect-ratio:9/18;background:#0f1720;border:7px solid #1d2733;border-radius:30px;box-shadow:0 24px 50px rgba(0,0,0,.4);padding:.55rem;transform:rotate(5deg);z-index:3}
.kid{height:100%;background:#0f1720;border-radius:22px;color:#f2f5f8;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem .4rem;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
.kid-title{font-size:.62rem;color:#8fa0ae}
.kid .jar-phone{margin:.1rem 0}
.kid-amount{font:800 1.9rem/1 var(--font-display);letter-spacing:-.03em}
.kid-amount small{font-size:.5em;color:#8fa0ae;margin-left:.15em;font-weight:600}
.kid-target{font-size:.6rem;color:#8fa0ae;margin-bottom:.3rem}
.kid-target b{color:#fff}
.kid-wish{display:flex;align-items:center;gap:.35rem;width:100%;background:#192431;border-radius:10px;padding:.3rem .4rem;font-size:.62rem;text-align:left}
.kid-wish .art{width:24px;height:24px;background:#fff;border-radius:6px;padding:2px;flex:none}
.kid-wish span{flex:1;font-weight:700}
.kid-wish em{font-style:normal;color:#8fa0ae}
.art{display:block}

/* ---------- ticker ---------- */
.ticker-clip{overflow:hidden;position:relative;z-index:4}
.ticker{overflow:hidden;background:var(--accent-3);color:#1c1530;border-block:var(--border-w) solid var(--line);font:800 1.05rem/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:.9rem 0}
.ticker-track{display:flex;gap:2.4rem;width:max-content;animation:tick 32s linear infinite}
.ticker-track span::after{content:"✦";margin-left:2.4rem;opacity:.7}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:var(--section-pad) 0}
.sec-alt{background:var(--bg-alt)}
.sec-dark{background:var(--dark-bg);color:var(--dark-ink)}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.sec h2,.cta h2{font-size:var(--h2-size);font-weight:var(--h2-weight);letter-spacing:var(--h1-track);line-height:1.08}
.card{background:var(--card);color:var(--ink);border:var(--border-w) solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:clamp(1.3rem,2.4vw,1.9rem)}
.sec-dark .card{color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);list-style:none;margin:0;padding:0;counter-reset:s}
.steps .card{position:relative;padding-top:2.4rem}
.steps h3{margin:.9rem 0 .5rem}
.steps p{color:var(--ink-soft)}
.num{position:absolute;top:-1.1rem;left:1.4rem;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:800 1.15rem/1 var(--font-display);border:var(--border-w) solid var(--line)}
.step-ico{width:54px;height:54px;color:var(--accent-2)}

/* features */
.features{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,1.6rem)}
.feat{grid-column:span 5;display:flex;flex-direction:column;gap:1.3rem;justify-content:space-between}
.feat-wide{grid-column:span 7}
.feat:nth-child(5),.feat:nth-child(6){grid-column:span 6}
.feat h3{margin-bottom:.5rem}
.feat p{color:var(--ink-soft)}
.feat-art{display:grid;place-items:center;min-height:120px}
.feat-wide:first-child{flex-direction:row;align-items:center}
.feat-wide:first-child .feat-copy{flex:1}
.mini{width:100%;background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:var(--radius-s);padding:.8rem;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.mini-row{display:flex;justify-content:space-between;gap:.8rem;align-items:center}
.mini-row b{color:var(--ok-text)}
.mini-row.dim{opacity:.85}
.mini-btns{display:flex;gap:.5rem}
.pill{display:inline-block;font:700 .82rem/1 var(--font-display);padding:.5rem .9rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:transparent}
.pill.done{background:color-mix(in srgb,var(--accent-4) 22%,transparent);color:var(--ink);border-color:transparent}
.field{border:1px dashed color-mix(in srgb,var(--ink) 35%,transparent);border-radius:8px;padding:.55rem .7rem;font-family:ui-monospace,Consolas,monospace;font-size:.82rem;color:var(--ink-soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.preview{display:flex;align-items:center;gap:.7rem;background:var(--card);border-radius:10px;padding:.5rem}
.preview .art{width:48px;height:48px;background:#fff;border-radius:8px;padding:4px;flex:none}
.preview b{display:block}
.preview span{font-size:.85rem;color:var(--ink-soft)}
.gift{flex-direction:row;align-items:center;gap:.8rem}
.gift-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#c9559f,#f2b134);color:#fff;flex:none}
.gift-ico svg{width:26px;height:26px}
.gift b{display:block}
.gift span{color:var(--ok-text);font-weight:800}
.devices{display:flex;align-items:flex-end;gap:1rem;color:var(--accent-2)}
.devices svg{width:54px;height:54px}
.devices .tablet{width:86px;height:64px}
.tiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;width:100%}
.tiers li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .9rem;border-radius:999px;color:#fff;font:700 .92rem/1.25 var(--font-display)}
.tiers i{font-style:normal;font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:.28em .7em;border-radius:99px;background:#00000040}
.tiers .t-uncommon{background:linear-gradient(135deg,#1f9d78,#3ab795)}
.tiers .t-rare{background:linear-gradient(135deg,#2e5bd1,#5b8def)}
.tiers .t-epic{background:linear-gradient(135deg,#6b2fa8,#b46bdf)}
.tiers .t-legendary{background:linear-gradient(135deg,#c9811a,#f2b134 45%,#ffe08a 60%,#f2b134);color:#3b2a00}

/* grandparents */
.grand{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.grand-art{display:grid;place-items:center;position:relative;min-height:440px}
.phone-light{position:relative;right:auto;bottom:auto;transform:rotate(-4deg);width:clamp(220px,24vw,280px);aspect-ratio:auto;height:auto;background:#fff;border-color:#e4dccb}
.gift-page{height:auto;background:#f5f1ea;border-radius:20px;padding:.8rem .6rem;display:flex;flex-direction:column;gap:.5rem;text-align:center;color:#1c2630;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.gp-brand{font:800 .95rem/1.1 var(--font-display)}
.gp-stage{background:#0f1720;border-radius:14px;padding:.5rem;color:#8fa0ae;font-size:.62rem;display:flex;flex-direction:column;align-items:center}
.gp-info{background:#fff;border:1px dashed #cfc5b0;border-radius:10px;padding:.5rem;font-size:.66rem;font-weight:800}
.gp-amounts{display:flex;gap:.3rem;justify-content:center}
.gp-amounts span{font-size:.62rem;font-weight:800;border:1px solid #d6cdb9;border-radius:99px;padding:.3rem .55rem;background:#fff}
.gp-amounts .on{background:#d42a62;color:#fff;border-color:#d42a62}
.gp-btn{margin-top:.5rem;background:#d42a62;color:#fff;border-radius:12px;padding:.6rem;font-weight:800;font-size:.72rem}
.grand-copy h2{margin-bottom:1.6rem}
.grand-steps{list-style:none;margin:0;padding:0;counter-reset:g;display:flex;flex-direction:column;gap:1rem}
.grand-steps li{counter-increment:g;position:relative;padding-left:3.2rem;font-size:1.12rem}
.grand-steps li::before{content:counter(g);position:absolute;left:0;top:-.15rem;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:800 1.05rem/1 var(--font-display);border:var(--border-w) solid var(--line)}
.note{margin-top:1.5rem;color:var(--ink-soft);font-size:1rem;border-left:4px solid var(--accent);padding-left:1rem}

/* trust */
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.4rem) clamp(1.5rem,4vw,3.5rem)}
.trust li{display:flex;gap:1rem;align-items:flex-start}
.tick{flex:none;width:2.4rem;height:2.4rem;padding:.5rem;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.trust h3{margin-bottom:.3rem}
.trust p{opacity:.82}

/* faq */
.faq-wrap{max-width:860px}
.faq details{border-bottom:var(--border-w) solid var(--line);padding:1.1rem 0}
.faq summary{cursor:pointer;list-style:none;font:700 1.25rem/1.3 var(--font-display);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:800 1.3rem/1 var(--font-display);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.8rem;color:var(--ink-soft);max-width:42rem}

/* cta + footer */
.cta{background:var(--accent);color:var(--accent-ink);padding:var(--section-pad) 0;text-align:center;border-top:var(--border-w) solid var(--line)}
.cta-in{max-width:44rem}
.cta p{margin-top:1rem;font-size:1.2rem}
.cta .actions{justify-content:center}
.cta .btn{background:var(--bg);color:var(--ink)}
.cta .btn-ghost{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.foot{background:var(--dark-bg);color:var(--dark-ink);padding:2.6rem 0}
.foot-in{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:flex-start;justify-content:space-between}
.foot p{opacity:.75;margin-top:.4rem}
.foot nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot nav a{text-decoration:none;font-weight:600}
.foot nav a:hover{text-decoration:underline}
.foot .lang{margin:0}

/* simple pages (privacy, terms, contact, 404) */
.page{padding:clamp(3rem,7vw,5rem) 0;min-height:60vh}
.page h1{font:var(--h1-weight) clamp(2.2rem,5vw,3.6rem)/1.05 var(--font-display);letter-spacing:var(--h1-track);margin-bottom:1.2rem}
.page .todo{background:var(--card);border:var(--border-w) dashed var(--accent);border-radius:var(--radius-m);padding:1.2rem 1.4rem;margin:1.2rem 0;max-width:46rem}
.page p{max-width:46rem;margin-bottom:1rem;color:var(--ink-soft)}

/* theme switcher (only shown with ?dev) */
.switcher{position:fixed;left:12px;bottom:12px;z-index:200;display:flex;gap:6px;align-items:center;background:#111;color:#fff;border-radius:999px;padding:6px 8px;font:600 13px/1 system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.switcher a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:999px;background:#333}
.switcher a[aria-current="true"]{background:#fff;color:#111}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .hero-grid,.grand{grid-template-columns:1fr}
  .hero-art{min-height:420px;margin-top:1rem}
  .features{grid-template-columns:1fr 1fr}
  .feat,.feat-wide,.feat:nth-child(5),.feat:nth-child(6){grid-column:span 2}
  .feat-wide:first-child{flex-direction:column;align-items:stretch}
  .steps{grid-template-columns:1fr}
  .steps .card{margin-top:1rem}
  .trust{grid-template-columns:1fr}
  .grand-art{min-height:400px}
}
@media (max-width:560px){
  .link-quiet{display:none}
  .btn{padding:.95rem 1.3rem}
  .actions .btn{flex:1 1 100%}
  .phone{width:150px;right:-4px}
  .stage{width:min(88%,330px)}
  .jar-hero .jar-svg{height:min(44vh,320px)}
  .features{grid-template-columns:1fr}
  .feat,.feat-wide,.feat:nth-child(5),.feat:nth-child(6){grid-column:auto}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html:not([data-motion="on"]) .ticker-track{width:auto;flex-wrap:wrap;justify-content:center}
  html:not([data-motion="on"]) .ticker-track span:nth-child(n+6){display:none}
}
.motion-toggle{position:fixed;right:12px;bottom:12px;z-index:90;max-width:min(92vw,360px);text-align:left;font:700 .85rem/1.25 var(--font-display);padding:.75rem 1.05rem;border-radius:999px;border:var(--bw) solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-btn)}
.motion-toggle[hidden]{display:none}


/* ==========================================================================
   DIRECTION FLOURISHES  (specific to a direction)
   ========================================================================== */

/* ----- A: Gloop Arcade ----- */
[data-theme="a"] .hero .btn:not(.btn-ghost){border-color:#fff6ea;box-shadow:4px 4px 0 #ffcf3f}
[data-theme="a"] .hero .btn:not(.btn-ghost):active{box-shadow:1px 1px 0 #ffcf3f}
[data-theme="a"] .mark::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.04em;height:.22em;background:var(--accent);border-radius:99px;z-index:-1;transform:rotate(-1.2deg)}
[data-theme="a"] .deco .blob{position:absolute;border-radius:50% 42% 58% 46%/48% 55% 45% 52%;filter:blur(.3px);opacity:.95;z-index:-1;animation:float 9s ease-in-out infinite}
[data-theme="a"] .b1{width:340px;height:300px;background:var(--accent-2);left:-110px;top:-90px}
[data-theme="a"] .b2{width:240px;height:220px;background:var(--accent);right:-60px;bottom:-70px;animation-delay:-3s}
[data-theme="a"] .b3{width:120px;height:110px;background:var(--accent-3);left:46%;top:14%;animation-delay:-6s;opacity:.85}
@keyframes float{50%{transform:translateY(-18px) rotate(6deg)}}
[data-theme="a"] .stage{border:var(--border-w) solid #fff6ea;box-shadow:8px 8px 0 #ffcf3f}
[data-theme="a"] .sec{background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.4px,transparent 1.6px);background-size:26px 26px}
[data-theme="a"] .sec-alt{background-color:var(--bg-alt)}
[data-theme="a"] .sec-dark{background-image:none}
[data-theme="a"] .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
[data-theme="a"] .card{transition:transform .15s,box-shadow .15s}
[data-theme="a"] .steps li:nth-child(1) .num{background:var(--accent-3);color:var(--ink)}
[data-theme="a"] .steps li:nth-child(2) .num{background:var(--accent-4);color:var(--ink)}
[data-theme="a"] .sec-dark .tick{background:var(--accent-3);color:var(--ink)}
[data-theme="a"] .cta{background:#6a3de8;color:#fff}
[data-theme="a"] .cta .btn{background:var(--accent-3);color:var(--ink);border-color:var(--ink)}

/* ----- B: Quiet Jar ----- */
[data-theme="b"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
[data-theme="b"] .deco{display:none}
[data-theme="b"] .nav{background:color-mix(in srgb,var(--bg) 82%,transparent)}
[data-theme="b"] .hero{border-bottom:1px solid var(--line)}
[data-theme="b"] .hero-grid{grid-template-columns:1.1fr .9fr}
[data-theme="b"] .hero h1{font-variation-settings:"opsz" 144;max-width:12ch}
[data-theme="b"] .mark{font-style:italic;color:var(--accent)}
[data-theme="b"] .eyebrow{color:var(--accent);font-family:var(--font-body);font-weight:700;letter-spacing:.16em}
[data-theme="b"] .hero .btn{border-color:transparent}
[data-theme="b"] .hero .btn-ghost{border-color:var(--ink);color:var(--ink)}
[data-theme="b"] .stage{background:radial-gradient(circle at 50% 38%,#fffaf0,var(--stage-bg) 72%);border:1px solid var(--line);border-radius:999px 999px var(--radius-l) var(--radius-l);--stage-shadow:var(--shadow-card);padding-top:3rem}
[data-theme="b"] .toast{box-shadow:0 12px 30px rgba(29,59,52,.25)}
[data-theme="b"] .phone{border-color:#26332f;box-shadow:0 30px 60px rgba(29,59,52,.25)}
[data-theme="b"] .ticker{background:transparent;color:var(--ink-soft);border-block:1px solid var(--line);font:500 .85rem/1 var(--font-body);letter-spacing:.3em;padding:1.1rem 0}
[data-theme="b"] .sec h2{max-width:18ch}
[data-theme="b"] .sec-head{margin-bottom:clamp(2.4rem,5vw,4rem)}
[data-theme="b"] .card{border-color:var(--line)}
[data-theme="b"] .num{background:transparent;color:var(--accent);border:1px solid var(--accent);top:-1.2rem;font-family:var(--font-display)}
[data-theme="b"] .step-ico{color:var(--accent-2)}
[data-theme="b"] .btn:hover{transform:translateY(-2px)}
[data-theme="b"] .cta{background:var(--ink);color:var(--bg);border-top:0}
[data-theme="b"] .cta .btn{background:var(--accent);color:#fff;border-color:transparent}
[data-theme="b"] .cta .btn-ghost{background:transparent;color:var(--bg);border-color:var(--bg)}
[data-theme="b"] .sec-dark{background:#17302a}
[data-theme="b"] .sec-dark .eyebrow{color:var(--accent-3)}
[data-theme="b"] .tick{background:transparent;color:var(--accent-3);border:1px solid var(--accent-3)}
[data-theme="b"] .gp-btn,[data-theme="b"] .gp-amounts .on{background:#a93d27;border-color:#a93d27}
[data-theme="b"] .faq details{border-bottom-color:var(--line)}
[data-theme="b"] .faq summary::after{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* ----- C: Slime Lab ----- */
[data-theme="c"] .nav{background:color-mix(in srgb,#0c0e13 88%,transparent);border-bottom:2px solid var(--line)}
[data-theme="c"] .hero{background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:44px 44px}
[data-theme="c"] .deco .blob{position:absolute;border-radius:50% 42% 58% 46%/48% 55% 45% 52%;z-index:-1;animation:float 8s ease-in-out infinite;filter:blur(1px)}
[data-theme="c"] .b1{width:420px;height:380px;background:radial-gradient(circle,#ff3df2cc,#ff3df200 68%);left:-140px;top:-120px}
[data-theme="c"] .b2{width:460px;height:420px;background:radial-gradient(circle,#c6ff3dcc,#c6ff3d00 68%);right:-160px;bottom:-140px;animation-delay:-3s}
[data-theme="c"] .b3{width:260px;height:240px;background:radial-gradient(circle,#3de8ffaa,#3de8ff00 70%);left:42%;top:-60px;animation-delay:-5s}
[data-theme="c"] .hero-grid{grid-template-columns:1.32fr .68fr;gap:1.5rem}
[data-theme="c"] .hero-copy{max-width:60rem}
[data-theme="c"] .hero h1{font-size:clamp(3rem,7.3vw,6.7rem)}
[data-theme="c"] .hero h1{text-transform:none}
[data-theme="c"] .mark{background:var(--accent);color:#0c0e13;padding:0 .14em;border-radius:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
[data-theme="c"] .eyebrow{color:var(--accent-2)}
[data-theme="c"] .hero-art{justify-items:end;min-height:clamp(340px,40vw,480px)}
[data-theme="c"] .stage{border:2px solid #c6ff3d;box-shadow:8px 8px 0 #ff3df2;--stage-shadow:8px 8px 0 #ff3df2;width:min(86%,360px);transform:rotate(2.5deg)}
[data-theme="c"] .phone{right:-13%;bottom:-8%;width:clamp(120px,13vw,165px);transform:rotate(-6deg)}
[data-theme="c"] .btn{border-color:#0c0e13;color:#0c0e13}
[data-theme="c"] .btn-ghost{color:#f4f6ff;border-color:#f4f6ff}
[data-theme="c"] .ticker-clip{margin-top:-1.8rem;padding:1.4rem 0 1rem}
[data-theme="c"] .ticker{background:var(--accent);color:#0c0e13;border-block:2px solid #0c0e13;transform:rotate(-1.2deg);margin:0 -3%;font-size:1.2rem}
[data-theme="c"] .sec{padding-top:calc(var(--section-pad) + 1rem)}
[data-theme="c"] .card{background:var(--card);border-color:var(--line)}
[data-theme="c"] .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #c6ff3d}
[data-theme="c"] .card{transition:transform .15s,box-shadow .15s}
[data-theme="c"] .num{background:var(--accent-2);color:#0c0e13;border-color:#0c0e13}
[data-theme="c"] .step-ico{color:var(--accent)}
[data-theme="c"] .mini{background:#0f1118}
[data-theme="c"] .field{color:#a9b0c6}
[data-theme="c"] .sec-alt{background:linear-gradient(180deg,#12151c,#0c0e13)}
[data-theme="c"] .sec-dark{background:#07080b}
[data-theme="c"] .sec-dark .tick{background:var(--accent-2);color:#0c0e13}
[data-theme="c"] .note{border-left-color:var(--accent-2)}
[data-theme="c"] .grand-steps li::before{background:var(--accent-2);color:#0c0e13;border-color:#0c0e13}
[data-theme="c"] .cta{background:var(--accent);color:#0c0e13;border-top:2px solid #0c0e13}
[data-theme="c"] .cta .btn{background:#0c0e13;color:var(--accent);border-color:#0c0e13;box-shadow:5px 5px 0 var(--accent-2)}
[data-theme="c"] .cta .btn-ghost{background:transparent;color:#0c0e13;border-color:#0c0e13}
[data-theme="c"] .foot{background:#07080b}
[data-theme="c"] .faq summary::after{background:var(--accent-2);color:#0c0e13}
[data-theme="c"] .faq details{border-bottom-color:var(--line)}
@media (max-width:980px){
  [data-theme="c"] .hero-grid{grid-template-columns:1fr}
  [data-theme="c"] .hero-art{justify-items:center}
  [data-theme="c"] .stage{transform:none}
  [data-theme="c"] .phone{right:-4px}
}

/* the direction blocks above are more specific than the responsive rules, so the phone layout is restated here */
@media (max-width:980px){
  [data-theme="b"] .hero-grid{grid-template-columns:1fr}
  [data-theme="b"] .hero h1{max-width:none}
  [data-theme="b"] .hero-art{justify-items:center}
}
@media (max-width:560px){
  [data-theme="b"] .stage{width:min(88%,330px);padding-top:2.2rem}
  [data-theme="b"] .phone{width:150px}
}
@media (max-width:980px){ [data-theme="a"] .b3{display:none} }

/* ---- invitation request form ---- */
.inv-dlg{border:var(--border-w) solid var(--ink);border-radius:var(--radius-m);background:var(--card);color:var(--ink);padding:26px 24px 22px;width:min(480px,calc(100vw - 32px));box-shadow:var(--shadow-card)}
.inv-dlg::backdrop{background:rgba(20,10,50,.55)}
.inv-dlg h2{margin:0 0 10px;font-size:1.6rem}
.inv-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:none;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;border-radius:50%}
.inv-form label{display:block;font-weight:700;margin:14px 0 6px}
.inv-form input{width:100%;box-sizing:border-box;font:inherit;color:var(--ink);background:var(--bg);border:var(--border-w) solid var(--ink);border-radius:var(--radius-s);padding:11px 12px}
.inv-form input:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.inv-form .actions{margin:18px 0 10px}
.inv-form .fine{margin:0}
.inv-lead{margin:0}
.inv-err{margin:12px 0 0;color:#b3123e;font-weight:700}
.inv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inv-done:focus{outline:none}
#invite-inline{max-width:520px;margin:18px 0}