/* Kumoverse Premium : concept 3 "Dream Board" (lavender dream). The ONE stylesheet for every page: the shop page
   (template.html), the product pop-up, the welcome gift and Telegram pop-ups, the app pages (/account, /orders, /cart,
   /pay) and the legal pages.
   The look: a light lavender board pinned with soft, puffy tiles of different sizes. The first screen is one big dusk
   tile (periwinkle to violet) with Kumo asleep on a crescent moon, his dreams of every app floating above him as soft
   pearly bubbles (tap one to see that app's plans), and four small promise tiles beside it. The apps are
   a bento: the first app is the big tile, the second the wide one, the rest small. Panels are white and pale lavender
   pillows with layered soft shadows: no outlines, no solid offset shadows. Butter yellow marks the main actions, soft
   pink is the accent, a few twinkling dots are the only sky marks. Only the footer fades into night.
   Contrast: white text sits only on dusk stops from #4B43B5 to #6E66D6 (4.6:1 and up); text on the light panels is ink
   #2E2858 or the two softer inks (7.4:1 and 5.5:1 on #F0EEFF).
   Shop CSP: no inline styles; scripts set custom properties with style.setProperty. */
:root{
  color-scheme:light;
  --ink:#2E2858; --ink-2:#4A4480; --ink-3:#5E5894;
  /* the dusk */
  --dusk-0:#4B43B5; --dusk-1:#5A51C6; --dusk-2:#6E66D6; --dusk-3:#8C84EA; --dusk-4:#A9A0F2;
  /* panels */
  --white:#FFFFFF; --lav:#F0EEFF; --lav-2:#E7E3FF; --lav-3:#D9D3FF; --page:#F6F4FF;
  /* accents */
  --butter:#FFD96A; --butter-l:#FFEAA8; --butter-p:#FFF6D9; --butter-d:#E3B53A;
  --pink:#FFB8D2; --pink-l:#FFD9E7; --pink-p:#FFF0F6;
  /* night (the footer only) */
  --night:#3F3794; --night-2:#4A42A6;
  /* soft, layered shadows */
  --sh-1:0 1px 2px rgba(46,40,88,.06),0 6px 14px -6px rgba(46,40,88,.14);
  --sh-2:0 1px 2px rgba(46,40,88,.05),0 10px 24px -10px rgba(46,40,88,.18),0 30px 60px -28px rgba(90,81,198,.34);
  --sh-3:0 2px 6px rgba(46,40,88,.06),0 20px 40px -14px rgba(46,40,88,.24),0 50px 90px -34px rgba(90,81,198,.45);
  --puff:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -12px 24px -14px rgba(110,102,214,.22);
  --ease:cubic-bezier(.22,1,.36,1); --soft:cubic-bezier(.34,1.32,.64,1);
  --navh:66px;
  --display:'Comfortaa','Trebuchet MS',system-ui,sans-serif;
  --text:'Mulish','Segoe UI',system-ui,-apple-system,sans-serif;
  /* read by the shared scripts: the Messenger burst and the welcome wheel */
  --burst-a:#FFD96A; --burst-b:#FFB8D2;
  --wh-ring-a:#8C84EA; --wh-ring-b:#FFB8D2; --wh-gold-a:#FFEAA8; --wh-gold-b:#FFD96A;
  --wh-fill-1:#FFFFFF; --wh-fill-2:#E7E3FF; --wh-fill-3:#FFE4EF; --wh-pointer:#2E2858;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--page)}
body{min-height:100vh;color:var(--ink);font-family:var(--text);font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(900px 640px at 96% -6%,rgba(169,160,242,.36),rgba(169,160,242,0) 70%),
    radial-gradient(760px 560px at -10% 640px,rgba(255,184,210,.26),rgba(255,184,210,0) 70%),
    radial-gradient(860px 660px at 104% 1500px,rgba(255,217,106,.2),rgba(255,217,106,0) 70%),
    radial-gradient(900px 700px at -6% 2400px,rgba(169,160,242,.26),rgba(169,160,242,0) 70%),
    var(--page)}
img{display:block;max-width:100%}
p,li,dd,summary{text-wrap:pretty}
a{color:inherit}
button,input{font:inherit;color:inherit}
.sprite{position:absolute}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.14;color:var(--ink);letter-spacing:-.012em}
.peso{font-family:var(--text);font-weight:800;margin-right:.05em}
svg.i{width:1em;height:1em;flex:none}
section{scroll-margin-top:100px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--dusk-1);outline-offset:3px;border-radius:14px}
.hero-in :focus-visible,.way-msg :focus-visible,.band :focus-visible,.lb-footer :focus-visible,footer.foot :focus-visible,.yv-bar :focus-visible{outline-color:#FFFFFF}
.hero,.home,.lb-footer,footer.foot{overflow-x:clip}

/* ---------- buttons: butter pillows for the main actions, white pillows for the rest ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:999px;
  font:800 16px/1.2 var(--text);letter-spacing:.005em;text-decoration:none;cursor:pointer;color:var(--ink);white-space:nowrap;
  transition:transform .4s var(--soft),box-shadow .4s var(--ease),background-color .3s var(--ease)}
.btn svg{width:20px;height:20px;flex:none}
.btn-grad{background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 58%,#FFD258 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -5px 10px -4px rgba(214,163,40,.5),0 2px 4px rgba(46,40,88,.08),0 12px 24px -10px rgba(206,150,22,.6)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -5px 10px -4px rgba(214,163,40,.5),0 4px 8px rgba(46,40,88,.08),0 20px 34px -12px rgba(206,150,22,.66)}
.btn-paper,.btn-line{background:linear-gradient(180deg,#FFFFFF,#F7F5FF);
  box-shadow:inset 0 0 0 1.5px var(--lav-3),0 2px 4px rgba(46,40,88,.06),0 12px 24px -12px rgba(90,81,198,.4)}
.btn-paper:hover,.btn-line:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--dusk-4),0 4px 8px rgba(46,40,88,.06),0 18px 32px -14px rgba(90,81,198,.5)}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:.12s}
.btn:disabled{cursor:default}
.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:800 14.5px var(--text);color:var(--dusk-0);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(75,67,181,.4)}
.link-btn:hover{text-decoration-color:currentColor}

/* ---------- checks (cards, pop-up, warranty): a lavender bubble with an ink tick ---------- */
.checks{list-style:none;display:grid;gap:10px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-weight:700;line-height:1.45}
.checks li::before{content:'';flex:none;width:22px;height:22px;margin-top:0;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 12.6l3.4 3.4 7-7.2' fill='none' stroke='%232E2858' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat,linear-gradient(180deg,#EEEBFF,#D9D3FF);
  box-shadow:inset 0 1px 0 #FFFFFF,0 2px 5px -2px rgba(90,81,198,.45)}
.checks.gifts li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2858' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M3.5 7h17v3h-17zM12 7v13M12 7c-1.5-3-5-3.3-5-1.1C7 7.4 9.6 7 12 7Zm0 0c1.5-3 5-3.3 5-1.1 0 1.5-2.6 1.1-5 1.1Z'/%3E%3C/svg%3E") center/76% no-repeat,linear-gradient(180deg,#FFE3EE,var(--pink))}

/* ---------- sale, struck prices, tags (app.js) ---------- */
.card-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.card-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;background:var(--lav-2);color:var(--ink);font-weight:800;font-size:12.5px;letter-spacing:.02em;max-width:100%;overflow-wrap:anywhere}
.sale-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px 0 9px;border-radius:999px;background:var(--pink);color:var(--ink);font-weight:800;font-size:12.5px;letter-spacing:.04em}
.sale-pill svg{width:14px;height:14px}
del.was{text-decoration:line-through;text-decoration-color:var(--dusk-3);text-decoration-thickness:2px;color:var(--ink-3)}
.from-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.from-row del.was{font:800 14px var(--text)}
.logo.letter,.d-logo.letter{font:700 34px var(--display);color:var(--dusk-1)}
.logo-plus{font:800 20px var(--text);color:var(--ink-3)}
.pop-spark{position:absolute;width:18px;height:18px;color:var(--dusk-3);pointer-events:none;z-index:3}

/* ---------- the top strip (template and the app pages' topBar()) ---------- */
.yv-bar{position:relative;z-index:41;background:var(--dusk-1);font-size:13.5px;line-height:1.3;color:#F2F0FF}
.bar-in{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar-pay{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700}
.bar-pay b{color:#FFFFFF;font-weight:800}
.bar-dots{display:inline-flex;flex:none}
.bar-dots i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--dusk-1)}
.bar-dots i + i{margin-left:-3px}
.bar-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;flex:none;font-weight:800;color:#FFFFFF;text-decoration:none}
.bar-link:hover span{text-decoration:underline;text-underline-offset:4px}
.bar-link .bar-tg{width:18px;height:18px;color:#FFFFFF}
.bar-link .bar-out{width:13px;height:13px;opacity:.8}
.bar-short{display:none}
.pay-gcash{--c:#3D8BFF}.pay-maya{--c:#1FB25A}.pay-bank{--c:#FFD96A}

/* ---------- the menu: a floating white pillow, sticky ---------- */
.navbar{position:sticky;top:0;z-index:40;height:0}
.nav-in{position:absolute;left:0;right:0;top:0;padding-top:14px;transition:padding .45s var(--ease)}
.navbar .nav-row.wrap{display:flex;align-items:center;gap:12px;width:calc(100% - 64px);max-width:1216px;height:var(--navh);padding:0 10px 0 16px;border-radius:999px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 2px rgba(46,40,88,.06),0 12px 30px -14px rgba(46,40,88,.28),inset 0 0 0 1px rgba(255,255,255,.9);transition:box-shadow .45s var(--ease)}
.navbar.scrolled .nav-in{padding-top:10px}
.navbar.scrolled .nav-row.wrap{box-shadow:0 1px 2px rgba(46,40,88,.08),0 16px 36px -14px rgba(46,40,88,.38),inset 0 0 0 1px rgba(255,255,255,.9)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink)}
.brand img{width:44px;height:44px;flex:none;transition:transform .6s var(--soft)}
.brand:hover img{transform:translateY(-3px) rotate(-6deg)}
.brand b{font:700 20px/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.brand small{display:block;font-weight:800;font-size:10.5px;letter-spacing:.3em;color:var(--ink-3);margin-top:4px}
.brand small:empty{display:none}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;font-weight:800;font-size:15px;color:var(--ink-2);text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav-links a:hover{background:var(--lav);color:var(--ink)}
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--lav);color:var(--ink);text-decoration:none;transition:background-color .3s var(--ease),transform .4s var(--soft)}
.nav-cart:hover{background:var(--lav-2);transform:translateY(-1px)}
.nav-cart svg{width:22px;height:22px}
.nav-cart-n{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--pink);color:var(--ink);font:800 12px/1 var(--text);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #FFFFFF}
.nav-cart-n[hidden]{display:none}
.nav-acct{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:46px;padding:0 18px 0 14px;border-radius:999px;
  background:var(--lav);font-weight:800;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease)}
.nav-acct:hover{background:var(--lav-2)}
.nav-acct svg{width:20px;height:20px}
.navbar .nav-cart{margin-left:6px}
.nav-msg{min-height:46px;padding:0 22px;font-size:15px}

/* ---------- the dream board: one big dusk tile and four small promise tiles ---------- */
.hero{position:relative;padding-top:calc(14px + var(--navh) + 22px)}
.nav-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.board{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:18px}
.hero-in{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:center;gap:0;
  min-height:560px;padding:0 0 0 54px;border-radius:44px;color:#FFFFFF;
  background:
    radial-gradient(560px 380px at 72% 112%,rgba(169,160,242,.6),rgba(169,160,242,0) 70%),
    radial-gradient(380px 300px at -4% -8%,rgba(255,184,210,.2),rgba(255,184,210,0) 70%),
    linear-gradient(158deg,#4B43B5 0%,#5A51C6 40%,#6760D2 74%,#6E66D6 100%);
  box-shadow:var(--sh-3),inset 0 2px 0 rgba(255,255,255,.14)}
.hero-copy{position:relative;z-index:2;padding:54px 0}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 16px 0 10px;border-radius:999px;background:rgba(30,24,90,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);font:800 14px/1.3 var(--text);letter-spacing:.01em;color:#FFFFFF}
.hero .kicker::before{content:'';width:24px;height:24px;flex:none;border-radius:50%;background:#FFFFFF url(/boutique/kumoverse/kumo-dream-stand.svg?v=1) center 58%/150% no-repeat}
.hero h1{margin:20px 0 16px;font-size:60px;line-height:1.08;letter-spacing:-.03em;color:#FFFFFF;text-wrap:balance;overflow-wrap:anywhere}
.hero h1 .w{display:inline-block}
/* wide screens: the same three lines in Comfortaa and in the fallback font, so nothing jumps when the font arrives */
@media (min-width:761px){ .hero h1{max-width:5.7em} }
.hero h1 .w:last-child{color:var(--butter-l)}
.hero p.lead{max-width:17.5em;font-size:19px;font-weight:600;line-height:1.55;color:#FFFFFF}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-cta .btn{padding:0 24px}
.btn-ghost{color:#FFFFFF;background:rgba(30,24,90,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 12px 24px -12px rgba(20,14,80,.6)}
.btn-ghost svg{width:18px;height:18px;margin-right:-6px;transition:translate .35s var(--ease)}
.btn-ghost:hover svg{translate:3px 0}
/* Kumo asleep on the moon, dreaming of the apps. The dreamscape is drawn at one fixed size (380 x 540 on wide screens,
   354 x 300 on phones) and scaled as one piece (--k), so the dreams never crowd Kumo or reach the words. kv.js puts one
   dream bubble per app in #dreams, a [data-open] link that opens that app's plans; the spots, sizes and tints are here,
   by each bubble's place in the row (the first ones are the big, central ones). --hx/--hy: Kumo's head, where the
   dreams rise from. */
.hero-art{position:relative;z-index:1;align-self:stretch;min-height:540px}
.dreamscape{--k:1;--hx:190px;--hy:336px;position:absolute;right:0;bottom:0;width:380px;height:540px;transform-origin:100% 100%;scale:var(--k)}
.moonglow{position:absolute;left:190px;top:410px;width:460px;height:460px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,246,214,.55) 0%,rgba(255,226,140,.22) 26%,rgba(169,160,242,.22) 46%,rgba(169,160,242,0) 68%)}
.dream-haze{position:absolute;left:190px;top:156px;width:500px;height:380px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,206,228,.3),rgba(169,160,242,.24) 50%,rgba(169,160,242,0))}
.hero-kumo{position:absolute;left:50%;bottom:16px;width:280px;height:auto;translate:-50% 0;filter:drop-shadow(0 22px 26px rgba(36,30,110,.35))}
html.motion:not(.reduce) .hero-kumo{animation:drift 7s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-5px) rotate(-1.2deg)}to{transform:translateY(5px) rotate(1.2deg)}}
/* a dream bubble: a soft, see-through pearl in the dusk (periwinkle, pink or butter), a thin rainbow sheen at its rim, a
   white highlight, a gentle glow, and the app's mark on a white disc */
.dreams{position:absolute;inset:0;z-index:3}
.dream-b{--tint:156,140,255;position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  display:grid;place-items:center;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;user-select:none;
  background:radial-gradient(circle,rgba(var(--tint),.12) 0 50%,rgba(var(--tint),.36) 73%,rgba(255,255,255,.5) 93%,rgba(255,255,255,.78) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62),inset 0 -7px 14px -6px rgba(var(--tint),.6),0 0 28px 3px rgba(var(--tint),.34),0 16px 28px -14px rgba(20,14,80,.6);
  transition:scale .5s var(--soft),box-shadow .5s var(--ease)}
.dream-b:nth-child(3n+2){--tint:255,184,210}
.dream-b:nth-child(3n){--tint:255,217,106}
.dream-b::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 150deg,rgba(156,140,255,0),rgba(255,184,210,.75) 55deg,rgba(255,217,106,.62) 110deg,rgba(255,255,255,.22) 165deg,rgba(156,140,255,.72) 230deg,rgba(255,184,210,.5) 300deg,rgba(156,140,255,0));
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 84%);mask:radial-gradient(circle,transparent 61%,#000 84%)}
.dream-b::after{content:'';position:absolute;z-index:2;left:15%;top:11%;width:30%;height:18%;border-radius:50%;rotate:-34deg;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,0))}
.dream-disc{position:relative;z-index:1;display:grid;place-items:center;width:63%;height:63%;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(255,255,255,.3),0 6px 12px -6px rgba(30,24,100,.6),inset 0 -3px 6px -3px rgba(110,102,214,.3)}
.dream-disc img{width:calc(var(--s) * 94%);height:calc(var(--s) * 94%);object-fit:contain;pointer-events:none}
.dream-b:hover{scale:1.1;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),inset 0 -7px 14px -6px rgba(var(--tint),.7),0 0 36px 8px rgba(var(--tint),.5),0 18px 30px -14px rgba(20,14,80,.6)}
.dream-b:active{scale:.96;transition-duration:.12s}
.dream-b:nth-child(1){--x:236px;--y:160px;--d:98px}
.dream-b:nth-child(2){--x:130px;--y:162px;--d:92px}
.dream-b:nth-child(3){--x:226px;--y:54px;--d:76px}
.dream-b:nth-child(4){--x:134px;--y:60px;--d:74px}
.dream-b:nth-child(5){--x:314px;--y:82px;--d:70px}
.dream-b:nth-child(6){--x:88px;--y:250px;--d:62px}
.dream-b:nth-child(7){--x:300px;--y:250px;--d:64px}
.dream-b:nth-child(8){--x:58px;--y:94px;--d:62px}
.dream-b:nth-child(9){--x:338px;--y:170px;--d:62px}
.dream-b:nth-child(10){--x:40px;--y:162px;--d:62px}
.dream-b:nth-child(n+11){display:none}
/* they rise out of Kumo one by one, then bob and drift on their own slow beat. A bubble still waiting for its turn is
   hidden, not just see-through, so a tap on Kumo never opens an app you cannot see */
html.motion:not(.reduce) .dream-b{animation:dreamrise 1.3s var(--ease) both,dreambob calc(5.2s + var(--i) * .43s) ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * 110ms + 300ms),calc(var(--i) * -.9s)}
@keyframes dreamrise{from{opacity:0;visibility:hidden;transform:translate(calc(var(--hx) - var(--x)),calc(var(--hy) - var(--y))) scale(.18)}to{opacity:1;visibility:visible;transform:none}}
@keyframes dreambob{0%{translate:0 -5px}50%{translate:3px 1px}100%{translate:-2px 5px}}
/* the trail of tiny bubbles from Kumo's "z z" up to his dreams */
.dream-trail i{position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFFFFF 0 16%,rgba(255,255,255,.3) 30%,rgba(196,186,255,.3) 62%,rgba(255,255,255,.85) 100%);
  box-shadow:0 0 10px 1px rgba(255,255,255,.4)}
.dream-trail i:nth-child(1){--x:265px;--y:305px;--d:6px}
.dream-trail i:nth-child(2){--x:253px;--y:289px;--d:8px}
.dream-trail i:nth-child(3){--x:238px;--y:272px;--d:10px}
.dream-trail i:nth-child(4){--x:221px;--y:255px;--d:13px}
.dream-trail i:nth-child(5){--x:204px;--y:236px;--d:16px}
.dreams:empty ~ .dream-trail{display:none}
html.motion:not(.reduce) .dream-trail i{animation:trailup .8s var(--ease) both,trailbob 3.4s ease-in-out infinite alternate}
html.motion:not(.reduce) .dream-trail i:nth-child(2){animation-delay:.12s,-.8s}
html.motion:not(.reduce) .dream-trail i:nth-child(3){animation-delay:.24s,-1.6s}
html.motion:not(.reduce) .dream-trail i:nth-child(4){animation-delay:.36s,-2.4s}
html.motion:not(.reduce) .dream-trail i:nth-child(5){animation-delay:.48s,-3.2s}
@keyframes trailup{from{opacity:0;transform:translateY(10px) scale(.3)}to{opacity:1;transform:none}}
@keyframes trailbob{from{translate:-1px -2px}to{translate:1px 2px}}
.twinkles i{position:absolute;left:var(--x);top:var(--y);width:var(--d,5px);height:var(--d,5px);margin:calc(var(--d,5px) / -2) 0 0 calc(var(--d,5px) / -2);border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 10px 2px rgba(255,255,255,.75);opacity:.9}
.twinkles i:nth-child(1){--x:182px;--y:110px;--d:5px;background:var(--butter-l);box-shadow:0 0 12px 3px rgba(255,217,106,.7)}
.twinkles i:nth-child(2){--x:364px;--y:252px;--d:5px}
.twinkles i:nth-child(3){--x:14px;--y:248px;--d:4px}
.twinkles i:nth-child(4){--x:304px;--y:322px;--d:4px;background:var(--pink-l);box-shadow:0 0 10px 2px rgba(255,184,210,.75)}
.twinkles i:nth-child(5){--x:100px;--y:18px;--d:4px}
.twinkles i:nth-child(6){--x:128px;--y:304px;--d:5px;background:var(--butter-l);box-shadow:0 0 12px 3px rgba(255,217,106,.7)}
.twinkles i:nth-child(7){--x:276px;--y:10px;--d:4px}
html.motion:not(.reduce) .twinkles i{animation:twinkle 3.6s ease-in-out infinite}
html.motion:not(.reduce) .twinkles i:nth-child(2n){animation-duration:4.4s;animation-delay:-1.4s}
html.motion:not(.reduce) .twinkles i:nth-child(3n){animation-duration:5.2s;animation-delay:-2.6s}
@keyframes twinkle{0%,100%{opacity:.95;scale:1}50%{opacity:.25;scale:.6}}
.fan,.marquee{display:none!important}
/* app.js drops twelve shapes in #petals; here they are soft motes that drift up through the dusk */
.petals{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.petal-track{position:absolute;top:100%;width:24px;height:24px}
.petal-track:nth-child(n+9){display:none}
.petal{display:block;width:calc(var(--w) * .8);height:calc(var(--w) * .8);color:rgba(255,255,255,.75)}
.petal-track:nth-child(3n+1) .petal{color:rgba(255,226,140,.8)}
.petal-track:nth-child(4n+2) .petal{color:rgba(255,200,222,.8)}
html.motion:not(.reduce) .petal-track{animation:mote var(--dur) linear infinite;animation-delay:var(--delay)}
html.motion:not(.reduce) .petal{animation:sway var(--sway) ease-in-out infinite alternate}
@keyframes mote{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(-640px);opacity:0}}
@keyframes sway{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
.hero-off .petal-track,.hero-off .petal,.hero-off .hero-kumo,.hero-off .twinkles i,.hero-off .dream-b,.hero-off .dream-trail i{animation-play-state:paused!important}
/* the four promise tiles */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:24px 18px 22px 20px;border-radius:34px;
  background:linear-gradient(180deg,#FFFFFF,#FAF9FF);box-shadow:var(--sh-2),var(--puff)}
.tile::after{content:'';position:absolute;z-index:-1;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(169,160,242,.4)),transparent 68%)}
.tile svg{position:absolute;right:-14px;bottom:-14px;width:116px;height:116px;padding:30px;border-radius:42px;rotate:-8deg;color:var(--ink);background:rgba(255,255,255,.88);
  box-shadow:0 2px 4px rgba(46,40,88,.06),0 18px 34px -14px rgba(46,40,88,.4),inset 0 -8px 16px -10px rgba(110,102,214,.3);transition:rotate .6s var(--soft),translate .6s var(--soft)}
.tile:hover svg{rotate:0deg;translate:-4px -4px}
.t-user svg{background:linear-gradient(180deg,#F1EEFF,#E1DCFF)}
.tile b{font:700 20.5px/1.18 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tile small{font:700 15.5px/1.3 var(--text);color:var(--ink-2)}
.t-key{background:linear-gradient(165deg,#FFF8E1 0%,#FFEDB8 100%);--glow:rgba(255,255,255,.9)}
.t-user{--glow:rgba(169,160,242,.45)}
.t-shield{background:linear-gradient(165deg,#F4F2FF 0%,#E4DFFF 100%);--glow:rgba(255,255,255,.85)}
.t-chat{background:linear-gradient(165deg,#FFF3F8 0%,#FFDDEA 100%);--glow:rgba(255,255,255,.85)}
/* entrance: waits for app.js to number the words (.go), so nothing flashes first */
.enter{--i:0}
html.motion:not(.reduce) .hero-in:not(.go) .enter,html.motion:not(.reduce) .hero-in:not(.go) #tagline,
html.motion:not(.reduce) .hero-in:not(.go) ~ .trust .enter{opacity:0}
html.motion:not(.reduce) .hero-in.go .enter,html.motion:not(.reduce) .hero-in.go ~ .trust .enter{animation:dreamin .9s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 80ms)}
@keyframes dreamin{from{opacity:0;translate:0 14px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* ---------- sections ---------- */
.home > section{padding-top:118px}
.home > section.shop{padding-top:40px}   /* the board comes right under the hero (owner, 2026-10-17: "too much space") */
.head{max-width:640px}
.head-c{margin:0 auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 13px/1.2 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--dusk-0)}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dusk-3);box-shadow:0 0 0 4px rgba(140,132,234,.22),0 0 12px 2px rgba(140,132,234,.5)}
.head h2{margin-top:12px;font-size:46px;letter-spacing:-.025em;text-wrap:balance}
.head p{margin-top:10px;font-size:18px;font-weight:600;color:var(--ink-2)}
html.motion:not(.reduce) [data-reveal]{transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:var(--d,0ms)}
html.motion:not(.reduce) [data-reveal]:not(.in){opacity:0;translate:0 26px}
.noscript{margin-top:20px;font-weight:700;color:var(--ink-2)}

/* ---------- the apps: a toolbar (search + chips) over a bento board ---------- */
.shop-top{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.finder{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:fit-content;max-width:100%;padding:8px;border-radius:30px;background:rgba(255,255,255,.9);box-shadow:var(--sh-2)}
.search{position:relative;flex:0 0 320px;min-width:0}
.search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--ink-3);pointer-events:none}
.search input{width:100%;height:48px;padding:0 48px 0 48px;border:0;border-radius:999px;background:var(--lav);font:700 16px var(--text);color:var(--ink);
  box-shadow:inset 0 1px 3px rgba(46,40,88,.08);transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.search input::placeholder{color:var(--ink-3);opacity:1}
.search input:focus{outline:none;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--dusk-1),0 0 0 5px rgba(90,81,198,.18)}
.search input::-webkit-search-cancel-button{display:none}
.clear{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font:700 22px/1 var(--text);color:var(--ink-3);cursor:pointer}
.clear:hover{color:var(--ink)}
.search input:placeholder-shown ~ .clear{display:none}
.chips{display:flex;flex-wrap:nowrap;gap:4px}
.chip{min-height:46px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:800 14.5px var(--text);color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.chip:hover{background:var(--lav);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--dusk-1);color:#FFFFFF;box-shadow:0 8px 18px -8px rgba(90,81,198,.7)}
.chip-sale{display:inline-flex;align-items:center;gap:6px}
.chip-sale svg{width:14px;height:14px}
/* the board: 4 columns; the first app is big (2 x 2), the second wide (2 x 1), the rest small; the note comes last */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(274px,auto);grid-auto-flow:row dense;gap:20px;margin-top:30px}
.grid > *{min-width:0}
.grid > article.card:first-of-type{grid-column:span 2;grid-row:span 2}
.grid > article.card:nth-of-type(2){grid-column:span 2}
.card{--glow:rgba(169,160,242,.34);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:32px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAFF 100%);box-shadow:var(--sh-2),var(--puff)}
.grid > .card:nth-of-type(3n+1){--glow:rgba(255,184,210,.38)}
.grid > .card:nth-of-type(3n+2){--glow:rgba(255,217,106,.34)}
.card::before{content:'';position:absolute;z-index:-1;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 68%);transition:scale .6s var(--ease)}
.card:hover{box-shadow:var(--sh-3),var(--puff)}
.card:hover::before,.card.lift::before{scale:1.25}
html.motion:not(.reduce) .card[data-reveal]{transition:opacity .8s var(--ease),translate .8s var(--ease),transform .3s var(--ease),box-shadow .4s var(--ease)}
.card .tiles{display:flex;align-items:center;margin-bottom:18px}
.card .logo{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:21px;background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(217,211,255,.8),0 2px 4px rgba(46,40,88,.06),0 12px 22px -10px rgba(46,40,88,.32)}
.card .logo img{width:calc(var(--s) * 60px);height:calc(var(--s) * 60px);object-fit:contain}
.card .logo-plus{display:none}
.card .logo-plus + .logo{margin-left:-14px;translate:0 10px}
.card .card-badges{margin-bottom:8px}
.card h3{font-size:19px;line-height:1.22;letter-spacing:-.015em;overflow-wrap:anywhere}
.card .blurb{margin-top:6px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .checks{display:none}
.card .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px}
.card .from{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--ink-3);line-height:1.2}
.card .from b{display:block;margin-top:3px;font:800 22px/1.1 var(--text);letter-spacing:-.01em;color:var(--ink)}
.card .from b .peso{font-size:.78em}
.card .from b.ask{font-size:14px}
.card .btn{min-height:44px;padding:0 18px;font-size:14.5px;background:var(--lav);box-shadow:inset 0 0 0 1px rgba(217,211,255,.9)}
.card:hover .btn,.card .btn:focus-visible{background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 58%,#FFD258 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 10px 20px -10px rgba(206,150,22,.6)}
.feat-pill{position:absolute;right:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 13px 0 10px;border-radius:999px;
  background:#FFFFFF;color:var(--ink);font-weight:800;font-size:12.5px;letter-spacing:.04em;box-shadow:0 6px 16px -6px rgba(30,24,100,.45)}
.feat-pill svg{width:15px;height:15px;color:var(--dusk-1)}
/* the big tile: a little dusk window at the top, the app's mark resting on its edge */
.grid > article.card:first-of-type{padding:0 34px 30px;background:linear-gradient(180deg,#FFFFFF 0%,#F7F5FF 100%)}
.grid > article.card:first-of-type::after{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:206px;border-radius:32px 32px 50% 50% / 32px 32px 30px 30px;
  background:radial-gradient(300px 200px at 82% 120%,rgba(255,226,140,.45),rgba(255,226,140,0) 70%),
    radial-gradient(circle at 18% 28%,#FFFFFF 0 1.6px,transparent 2.6px),radial-gradient(circle at 70% 18%,#FFFFFF 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 46% 54%,rgba(255,255,255,.9) 0 1px,transparent 2px),radial-gradient(circle at 90% 46%,#FFF3C6 0 1.8px,transparent 3px),
    linear-gradient(160deg,var(--dusk-0) 0%,var(--dusk-1) 50%,var(--dusk-2) 100%)}
.grid > article.card:first-of-type::before{top:auto;bottom:-90px;right:-90px;width:320px;height:320px}
.grid > article.card:first-of-type .tiles{margin:142px 0 22px}
.grid > article.card:first-of-type .logo{width:116px;height:116px;border-radius:36px;box-shadow:0 0 0 6px rgba(255,255,255,.95),0 18px 34px -14px rgba(30,24,100,.55)}
.grid > article.card:first-of-type .logo img{width:calc(var(--s) * 108px);height:calc(var(--s) * 108px)}
.grid > article.card:first-of-type h3{font-size:32px;letter-spacing:-.025em}
.grid > article.card:first-of-type .blurb{margin-top:8px;font-size:16.5px;-webkit-line-clamp:3}
.grid > article.card:first-of-type .checks{display:grid;gap:9px;margin-top:20px;font-size:15px}
.grid > article.card:first-of-type .foot{padding-top:24px}
.grid > article.card:first-of-type .from b{font-size:30px}
.grid > article.card:first-of-type .btn,.grid > article.card:nth-of-type(2) .btn{min-height:52px;padding:0 28px;font-size:16px;
  background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 58%,#FFD258 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -5px 10px -4px rgba(214,163,40,.5),0 12px 24px -10px rgba(206,150,22,.6)}
/* the wide tile: the mark in a small dusk window on the left, the words on the right */
.grid > article.card:nth-of-type(2){display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:"tiles badges" "tiles title" "tiles blurb" "tiles checks" "tiles foot";column-gap:26px;padding:24px 26px 22px 22px}
.grid > article.card:nth-of-type(2)::after{content:'';position:absolute;z-index:-1;left:10px;top:10px;bottom:10px;width:162px;border-radius:24px;
  background:radial-gradient(160px 140px at 50% 110%,rgba(255,226,140,.42),rgba(255,226,140,0) 70%),
    radial-gradient(circle at 22% 20%,#FFFFFF 0 1.4px,transparent 2.4px),radial-gradient(circle at 78% 30%,#FFF3C6 0 1.6px,transparent 2.6px),
    radial-gradient(circle at 30% 82%,rgba(255,255,255,.9) 0 1px,transparent 2px),
    linear-gradient(170deg,var(--dusk-0),var(--dusk-2))}
.grid > article.card:nth-of-type(2) .tiles{grid-area:tiles;justify-content:center;margin:0}
.grid > article.card:nth-of-type(2) .logo{width:88px;height:88px;border-radius:28px;box-shadow:0 0 0 5px rgba(255,255,255,.9),0 16px 30px -12px rgba(20,14,80,.6)}
.grid > article.card:nth-of-type(2) .logo img{width:calc(var(--s) * 82px);height:calc(var(--s) * 82px)}
/* a pair of marks (a bundle such as Gemini + YouTube) stays inside the window: smaller, one up and one down (owner,
   2026-10-17: the pair spilled out of it once ChatGPT took the big tile) */
.grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo{width:66px;height:66px;border-radius:22px}
.grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo img{width:calc(var(--s) * 62px);height:calc(var(--s) * 62px)}
.grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo:first-child{translate:0 -10px}
.grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo-plus + .logo{margin-left:-12px;translate:0 14px}
.grid > article.card:nth-of-type(2) .card-badges{grid-area:badges}
.grid > article.card:nth-of-type(2) h3{grid-area:title;align-self:end;padding-right:112px;font-size:25px}
.grid > article.card:nth-of-type(2) .blurb{grid-area:blurb;font-size:15px}
.grid > article.card:nth-of-type(2) .checks{grid-area:checks;display:grid;gap:7px;margin-top:12px;font-size:14px}
.grid > article.card:nth-of-type(2) .checks li:nth-child(n+3){display:none}
.grid > article.card:nth-of-type(2) .foot{grid-area:foot}
.grid > article.card:nth-of-type(2) .from b{font-size:26px}
/* the note: an empty spot on the board, always last */
.note-tile{order:1;grid-column:span 2;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;align-items:center;gap:0 22px;
  padding:24px 28px;border-radius:32px;border:2px dashed rgba(140,132,234,.55);background:linear-gradient(135deg,rgba(255,240,246,.9) 0%,rgba(240,238,255,.9) 70%)}
.note-kumo{grid-row:1 / -1;grid-column:1;width:148px;height:148px;margin:-14px -6px -14px -10px}
.note-copy{grid-row:2;grid-column:2}
.note-copy h3{font-size:23px;text-wrap:balance}
.note-copy p{margin-top:4px;font-weight:600;color:var(--ink-2)}
.note-cta{grid-row:3;grid-column:2;justify-self:start;min-height:48px;margin-top:16px;padding:0 22px;font-size:15px}
.note-cta svg{width:19px;height:19px;color:#5B4BFF}
.shop:has(.empty:not([hidden])) .note-tile{display:none}
.empty{margin-top:10px;padding:30px 20px 10px;text-align:center}
.empty::before{content:'';display:block;width:140px;height:140px;margin:0 auto 6px;background:url(/boutique/kumoverse/kumo-dream-thinking.svg?v=1) center/contain no-repeat}
.empty h3{font-size:28px}
.empty p{margin:8px 0 18px;font-weight:600;color:var(--ink-2)}

/* ---------- how it works: two dreamy cards ---------- */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:40px}
.way{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:28px 34px 34px;border-radius:40px;overflow:hidden;box-shadow:var(--sh-2),var(--puff)}
.way-qr{background:radial-gradient(460px 320px at 104% -6%,rgba(255,217,106,.4),rgba(255,217,106,0) 70%),linear-gradient(180deg,#FFFFFF,#FAF9FF)}
.way-msg{color:#FFFFFF;background:
    radial-gradient(420px 320px at 104% -8%,rgba(255,184,210,.28),rgba(255,184,210,0) 70%),
    radial-gradient(520px 360px at 0% 118%,rgba(169,160,242,.42),rgba(169,160,242,0) 70%),
    linear-gradient(160deg,#4B43B5 0%,#554CC0 55%,#625AC9 100%);box-shadow:var(--sh-3),inset 0 2px 0 rgba(255,255,255,.14)}
.way-msg::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(circle at 5% 4%,#FFFFFF 0 1.5px,transparent 2.5px),radial-gradient(circle at 58% 2.4%,rgba(255,255,255,.85) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 97.4% 48%,#FFF3C6 0 1.6px,transparent 2.6px),radial-gradient(circle at 30% 98%,rgba(255,255,255,.8) 0 1.2px,transparent 2.2px)}
.way-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:104px}
.way-tag{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-top:6px;padding:0 15px 0 12px;border-radius:999px;font-weight:800;font-size:13.5px;letter-spacing:.02em;
  background:var(--butter-p);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(227,181,58,.35)}
.way-tag svg{width:18px;height:18px}
.way-msg .way-tag{background:rgba(255,255,255,.12);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.way-kumo{width:140px;height:140px;margin:-26px -16px -34px 0;flex:none}
.way h3{font-size:32px;letter-spacing:-.025em;text-wrap:balance}
.way-msg h3{color:#FFFFFF}
.way-sub{margin-top:6px;font-size:17px;font-weight:600;color:var(--ink-2)}
.way-msg .way-sub{color:#FFFFFF}
.way-steps{list-style:none;display:grid;gap:10px;margin:24px 0 28px}
.way-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:24px;background:var(--lav)}
.way-msg .way-steps li{background:rgba(24,18,84,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#FFFFFF;font:700 18px/1 var(--display);color:var(--dusk-0);
  box-shadow:0 1px 2px rgba(46,40,88,.08),0 8px 16px -8px rgba(46,40,88,.4)}
.way-msg .step-n{background:var(--butter);color:var(--ink)}
.way-steps b{display:block;font-weight:800;font-size:16.5px;line-height:1.3}
.way-steps small{display:block;margin-top:1px;font-weight:600;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.way-msg .way-steps b,.way-msg .way-steps small{color:#FFFFFF}
.way-cta{align-self:flex-start;margin-top:auto}
.way-cta svg{color:#5B4BFF}
.how-foot{margin-top:26px}
.how-foot:not(:has(*)){display:none}

/* ---------- warranty + questions ---------- */
.care-board{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:26px;align-items:start;margin-top:72px}
.wcard{position:relative;isolation:isolate;padding:34px 34px 28px;border-radius:40px;
  background:radial-gradient(380px 300px at 100% 0%,rgba(255,184,210,.42),rgba(255,184,210,0) 70%),radial-gradient(360px 260px at 0% 100%,rgba(169,160,242,.28),rgba(169,160,242,0) 70%),
    linear-gradient(180deg,#FFFFFF,#FAF9FF);box-shadow:var(--sh-2),var(--puff)}
.w-kumo{position:absolute;right:14px;top:-48px;width:150px;height:150px;filter:drop-shadow(0 14px 18px rgba(90,81,198,.25))}
.wcard .badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 15px 0 12px;border-radius:999px;background:var(--lav-2);color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.04em}
.wcard .badge svg{width:18px;height:18px;color:var(--dusk-0)}
.wcard h3{margin:18px 0 8px;padding-right:110px;font-size:34px;letter-spacing:-.025em}
.w-lead{margin-bottom:18px;font-size:17px;font-weight:700;color:var(--ink-2)}
.w-claim{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:16px;font-weight:800;color:var(--dusk-0);text-decoration:none}
.w-claim svg{width:18px;height:18px;transition:translate .3s var(--ease)}
.w-claim:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.w-claim:hover svg{translate:3px 0}
.faq{padding:12px;border-radius:40px;background:linear-gradient(180deg,#FFFFFF,#FCFBFF);box-shadow:var(--sh-2)}
.faq-h{padding:14px 18px 8px;font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.faq-item{border-radius:26px;transition:background-color .35s var(--ease)}
.faq-item + .faq-item{margin-top:2px}
.faq-item[open]{background:var(--lav)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:8px 14px 8px 18px;border-radius:26px;
  font-weight:800;font-size:16.5px;line-height:1.35;cursor:pointer;transition:background-color .3s var(--ease)}
.faq-item summary:hover{background:var(--lav)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';flex:none;width:34px;height:34px;border-radius:50%;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5v11M6.5 12h11' fill='none' stroke='%232E2858' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 1px 2px rgba(46,40,88,.08),0 6px 12px -6px rgba(46,40,88,.35);transition:rotate .45s var(--ease)}
.faq-item[open] summary::after{rotate:45deg}
.faq-item p{padding:0 22px 20px 18px;font-weight:600;color:var(--ink-2)}
html.motion:not(.reduce) .faq-item[open] p{animation:rise .5s var(--ease)}

/* ---------- reviews ({{REVIEWS}}, only if the shop has some) ---------- */
.rv{border-radius:30px;background:#FFFFFF;box-shadow:var(--sh-2);padding:22px}

/* ---------- the closing call ---------- */
.band{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 30px;margin-top:120px;padding:30px 44px 30px 28px;border-radius:44px;
  background:radial-gradient(180px 150px at 9% 50%,rgba(255,226,140,.3),rgba(255,226,140,0) 70%),radial-gradient(260px 160px at 100% 120%,rgba(255,184,210,.24),rgba(255,184,210,0) 70%),
    linear-gradient(115deg,#4B43B5 0%,#5A51C6 50%,#6760D2 100%);box-shadow:var(--sh-3),inset 0 2px 0 rgba(255,255,255,.14)}
.band::after{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 24% 9%,#FFFFFF 0 1.5px,transparent 2.5px),radial-gradient(circle at 66% 90%,rgba(255,255,255,.8) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 71% 14%,#FFF3C6 0 1.8px,transparent 2.8px),radial-gradient(circle at 98.4% 46%,rgba(255,255,255,.9) 0 1.2px,transparent 2.2px)}
.band-kumo{width:170px;height:170px;margin:-46px 0 -40px;filter:drop-shadow(0 18px 22px rgba(20,14,80,.35))}
.band h2{font-size:40px;letter-spacing:-.025em;color:#FFFFFF;text-wrap:balance}
.band p{margin-top:8px;font-size:18px;font-weight:600;color:#FFFFFF}

/* ---------- footer: the page fades softly into night ---------- */
.lb-footer,footer.foot{position:relative;margin-top:230px;padding:64px 0 40px;background:linear-gradient(180deg,var(--night) 0%,#352E82 100%);color:#FFFFFF}
.lb-footer::before,footer.foot::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:220px;pointer-events:none;
  background:radial-gradient(circle at 12% 74%,rgba(255,255,255,.85) 0 1.3px,transparent 2.4px),radial-gradient(circle at 31% 58%,rgba(255,255,255,.6) 0 1px,transparent 2px),radial-gradient(circle at 57% 82%,rgba(255,243,198,.95) 0 1.6px,transparent 2.7px),radial-gradient(circle at 76% 64%,rgba(255,255,255,.7) 0 1.1px,transparent 2.1px),radial-gradient(circle at 91% 86%,rgba(255,255,255,.8) 0 1.3px,transparent 2.4px),linear-gradient(180deg,rgba(169,160,242,0) 0%,rgba(150,142,236,.3) 34%,rgba(104,96,206,.74) 66%,rgba(74,66,170,.94) 86%,var(--night) 100%)}
.lb-footer .wrap,footer.foot .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;align-items:start}
.lb-footer .brand,footer.foot .brand{color:#FFFFFF}
.foot-brand p{max-width:36ch;margin-top:14px;font-weight:600;color:#E2DEFF}
.foot-h{margin-bottom:12px;font:800 12.5px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#C3BDF8}
.foot-links{display:grid;gap:2px}
.foot-links a{display:inline-flex;align-items:center;min-height:38px;font-weight:700;color:#FFFFFF;text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.pay-badges{display:flex;flex-wrap:wrap;gap:10px}
.pay-badge{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:999px;font-weight:800;font-size:15px;
  background:rgba(255,255,255,.1);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pay-badge::before{content:'';width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.tm{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);text-align:center;font-size:13.5px;font-weight:600;color:#D4CFFB}
/* the app and legal pages' footer (footerHtml in lib/pages.mjs) */
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.foot-col{display:grid;gap:4px;align-content:start}
.foot-col[aria-labelledby="foot-more"]{display:none}   /* "Our other shops": the directory is offline */
.foot-col h2,.foot-col h3{font:800 12.5px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#C3BDF8;margin-bottom:8px}
.foot-col a{display:inline-flex;align-items:center;min-height:36px;font-weight:700;color:#FFFFFF;text-decoration:none}
.foot-col a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.foot-bottom{position:relative;margin-top:34px;padding-top:22px;text-align:center;font-size:13.5px;font-weight:600;color:#D4CFFB}
.foot-bottom::before{content:'';position:absolute;top:0;left:32px;right:32px;height:1px;background:rgba(255,255,255,.16)}
.foot-legal-note{margin-top:8px}

/* ---------- dialogs: product pop-up, log-in sheet, welcome gift, Telegram ---------- */
dialog{margin:auto;border:0;background:transparent;max-width:640px;width:calc(100% - 32px);overflow:visible;color:var(--ink)}
dialog::backdrop{background:rgba(46,40,88,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog:focus,dialog:focus-visible{outline:none}
.d-card{position:relative;isolation:isolate;max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;padding:36px 36px 28px;border-radius:36px;
  background:radial-gradient(440px 280px at 100% 0%,rgba(169,160,242,.3),rgba(169,160,242,0) 70%),radial-gradient(360px 240px at 0% 100%,rgba(255,184,210,.2),rgba(255,184,210,0) 70%),
    linear-gradient(180deg,#FFFFFF 0%,#FBFAFF 100%);
  box-shadow:0 2px 6px rgba(46,40,88,.08),0 40px 90px -24px rgba(30,24,90,.55);scrollbar-width:thin;scrollbar-color:var(--lav-3) transparent}
.d-card:focus,.d-card:focus-visible{outline:none}
.d-close{position:absolute;right:18px;top:18px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:var(--lav);font:700 24px/1 var(--text);color:var(--ink);cursor:pointer;
  transition:background-color .3s var(--ease),rotate .45s var(--ease)}
.d-close:hover{background:var(--lav-2);rotate:90deg}
.d-head{display:flex;gap:18px;align-items:center;margin-bottom:20px;padding-right:48px}
.d-logos{display:flex;align-items:center;gap:6px;flex:none}
.d-logo{display:grid;place-items:center;width:80px;height:80px;border-radius:26px;background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(217,211,255,.8),0 2px 4px rgba(46,40,88,.06),0 14px 26px -12px rgba(46,40,88,.38)}
.d-logo img{width:calc(var(--s) * 74px);height:calc(var(--s) * 74px);object-fit:contain}
.d-logos .logo-plus{display:none}
.d-logos .logo-plus + .d-logo{margin-left:-22px;translate:0 12px;box-shadow:0 0 0 4px #FFFFFF,0 14px 26px -12px rgba(46,40,88,.38)}
.d-logos{gap:0}
.d-cat{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dusk-0)}
.d-title{margin-top:2px;font-size:30px;letter-spacing:-.025em;overflow-wrap:anywhere}
.d-blurb{margin-top:4px;font-weight:600;color:var(--ink-2)}
.d-extra{margin-top:10px;font-weight:600;color:var(--ink-2)}
.d-share{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin-top:10px;padding:0 14px;border:0;border-radius:999px;background:var(--lav);
  font:800 13.5px var(--text);color:var(--ink);cursor:pointer;transition:background-color .3s var(--ease)}
.d-share:hover{background:var(--lav-2)}
.d-share svg{width:16px;height:16px}
.d-label{margin:22px 0 10px;font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.d-plans{display:grid;gap:10px}
.d-plan{position:relative;display:flex;align-items:center;gap:13px;min-height:60px;padding:9px 18px;border-radius:22px;background:#FFFFFF;cursor:pointer;font-weight:800;
  box-shadow:inset 0 0 0 1.5px var(--lav-3);transition:box-shadow .3s var(--ease),background-color .3s var(--ease),transform .35s var(--soft)}
.d-plan:hover{box-shadow:inset 0 0 0 1.5px var(--dusk-3)}
.d-plan:has(input:checked){background:linear-gradient(180deg,#F7F5FF,#ECE8FF);box-shadow:inset 0 0 0 2px var(--dusk-1),0 10px 22px -12px rgba(90,81,198,.6)}
.d-plan:has(input:focus-visible){outline:3px solid var(--dusk-1);outline-offset:3px}
.d-plan input{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:inherit;opacity:0;cursor:pointer}
.d-plan:not(.static)::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--lav-3);transition:box-shadow .3s var(--ease)}
.d-plan:has(input:checked)::before{box-shadow:inset 0 0 0 2px var(--dusk-1),inset 0 0 0 6px #FFFFFF,inset 0 0 0 11px var(--dusk-1)}
.d-plan.is-out input{cursor:not-allowed}
.d-plan-name{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.d-plan-sub{font-weight:600;font-size:13px;color:var(--ink-3)}
.d-few,.d-save{align-self:flex-start;margin-top:4px;padding:1px 10px;border-radius:999px;background:var(--pink-l);color:var(--ink);font-size:12px;font-weight:800}
.d-plan.is-out{opacity:.55;cursor:not-allowed}
.d-plan.static{cursor:default}
.d-plan-price{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;font:800 22px/1.1 var(--text);font-variant-numeric:tabular-nums}
.d-plan-price .peso{font-size:.75em}
.d-plan-price del.was{font:800 13px var(--text)}
.d-plan-price.ask{font:800 14px var(--text);color:var(--ink-3)}
.d-sale{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 16px;padding:10px 16px;border-radius:18px;background:var(--pink-p);color:var(--ink);font-weight:800}
.d-sale > svg{width:16px;height:16px;color:var(--ink)}
.d-sale > b{letter-spacing:.04em}
.d-sale-ends{margin-left:auto;font-size:14px}
.d-countdown{font-variant-numeric:tabular-nums}
.d-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:22px;padding-top:20px;border-top:2px dashed var(--lav-3)}
.d-total{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;font-weight:800;color:var(--ink-2)}
.d-total-price{font:800 34px/1.1 var(--text);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.d-total-price .peso{font-size:.68em}
.d-total del.d-total-was{font:800 18px var(--text)}
.d-total-was:empty{display:none}
.d-saved{flex-basis:100%;font-weight:800;font-size:13.5px;color:var(--dusk-0)}
.d-saved:empty{display:none}
.d-total-ask{font:700 24px var(--display);color:var(--ink)}
.d-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:min(100%,280px)}
.d-actions:has(.d-buyrow){flex:1 1 100%}
.d-buyrow{display:flex;gap:10px}
.d-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border:0;border-radius:999px;font:800 16px/1.2 var(--text);color:var(--ink);text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 58%,#FFD258 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -5px 10px -4px rgba(214,163,40,.5),0 2px 4px rgba(46,40,88,.08),0 12px 24px -10px rgba(206,150,22,.6);
  transition:transform .4s var(--soft),box-shadow .4s var(--ease)}
.d-cta:hover{transform:translateY(-2px)}
.d-buyrow .d-cta{flex:1 1 0;min-width:0;padding:0 16px;white-space:nowrap}
.d-add{background:linear-gradient(180deg,#FFFFFF,#F7F5FF);box-shadow:inset 0 0 0 1.5px var(--lav-3),0 2px 4px rgba(46,40,88,.06),0 12px 24px -12px rgba(90,81,198,.4)}
.d-buy:disabled{opacity:.65;cursor:progress}
.d-msg{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:800;font-size:14px;color:var(--dusk-0);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(75,67,181,.4)}
.d-msg:hover{text-decoration-color:currentColor}
.d-note{margin-top:14px;font-size:14px;font-weight:600;color:var(--ink-3)}
.d-err{margin-top:12px;padding:10px 14px;border-radius:16px;background:#FFE8EE;color:#8C1D40;font-weight:800;font-size:14px}
.d-added{margin-top:12px;padding:10px 14px;border-radius:16px;background:var(--lav);color:var(--ink);font-weight:800;font-size:14px}
.d-added-go{color:var(--dusk-0);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}
.d-deal{margin-top:12px;padding:10px 14px;border-radius:16px;background:var(--butter-p);box-shadow:inset 0 0 0 1.5px rgba(227,181,58,.5);color:var(--ink);font-weight:800;font-size:14px}
/* the discount code */
.d-code{margin-top:14px}
.d-code-open{min-height:44px;padding:0;border:0;background:none;font:800 14.5px var(--text);color:var(--dusk-0);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(75,67,181,.4)}
.d-code-open[hidden],.d-code-row[hidden]{display:none}
.d-code-row{display:flex;gap:8px;max-width:400px}
.d-code-input{flex:1;min-width:0;height:48px;padding:0 18px;border:0;border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--lav-3);
  font:800 15px var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.d-code-input::placeholder{letter-spacing:0;text-transform:none;font-weight:700;color:var(--ink-3);opacity:1}
.d-code-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--dusk-1),0 0 0 5px rgba(90,81,198,.16)}
.d-code-apply{flex:none;height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--dusk-1);color:#FFFFFF;font:800 15px var(--text);cursor:pointer}
.d-code-apply:hover{background:var(--dusk-0)}
.d-code-apply:disabled{opacity:.6;cursor:default}
.d-code-msg{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;margin-top:8px;font-weight:800;font-size:14px}
.d-code-msg:empty{display:none}
.d-code-msg.is-err{color:#9F1D45}
.d-code-msg.is-ok{color:var(--dusk-0)}
.d-code-msg.is-info{color:#6B4A00}
.d-code-msg .link-btn{min-height:32px;margin-left:6px}

/* ---------- log-in / sign-up / guest sheet and forms (account.js) ---------- */
.acct-sheet{max-width:470px}
.auth-card .auth-title{padding-right:48px;font-size:28px;letter-spacing:-.02em}
.auth-sub,.app-sub{margin:6px 0 18px;font-weight:600;color:var(--ink-2)}
.auth-tabs{display:flex;gap:4px;margin-bottom:20px;padding:5px;border-radius:999px;background:var(--lav)}
.auth-tabs[hidden]{display:none}
.auth-tab{flex:1;min-height:44px;border:0;border-radius:999px;background:none;font:800 15px var(--text);color:var(--ink-2);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.auth-tab:hover{color:var(--ink)}
.auth-tab[aria-selected="true"]{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 2px rgba(46,40,88,.08),0 8px 16px -8px rgba(46,40,88,.35)}
.auth-form{display:grid;gap:13px}
.auth-h{font-size:23px}
.f-field{display:grid;gap:6px}
.f-label{font-weight:800;font-size:14px}
.f-field input{width:100%;height:52px;padding:0 18px;border:0;border-radius:18px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--lav-3);font:700 16px var(--text);color:var(--ink);
  transition:box-shadow .3s var(--ease)}
.f-field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--dusk-1),0 0 0 5px rgba(90,81,198,.16)}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-hint{font-weight:600;font-size:14px;color:var(--ink-3)}
.f-err{font-weight:800;font-size:14px;color:#9F1D45}
.f-err:empty{display:none}
.f-submit{width:100%}
.auth-code{display:grid;gap:12px;text-align:center}
.code-box{padding:16px;border-radius:18px;background:var(--butter-p);box-shadow:inset 0 0 0 2px rgba(227,181,58,.55);color:var(--ink);font:800 22px var(--text);letter-spacing:.08em;word-break:break-all}
.guest-member{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:20px;padding-top:18px;border-top:2px dashed var(--lav-3)}
.guest-perk{flex:1 1 100%;font-weight:600;color:var(--ink-2)}
.guest-perk b{color:var(--ink);font-weight:800;background:linear-gradient(transparent 58%,rgba(255,217,106,.75) 58%)}

/* ---------- the app pages: /account, /orders, /cart, /pay/<invoice> (body.t-kumoverse-cloud) ---------- */
.app-nav{position:sticky;top:0;z-index:40;padding:12px 0}
.app-nav .nav-row.wrap{display:flex;align-items:center;gap:14px;width:calc(100% - 64px);max-width:1216px;height:var(--navh);padding:0 10px 0 16px;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 2px rgba(46,40,88,.06),0 12px 30px -14px rgba(46,40,88,.3)}
.app-nav-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.app-nav .nav-acct{width:46px;padding:0}
.app-nav .nav-acct span{display:none}
.app-nav .btn{min-height:46px;padding:0 20px;font-size:15px}
.app-nav .btn-paper{background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 58%,#FFD258 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 10px 20px -10px rgba(206,150,22,.6)}
.app-main{min-height:calc(100vh - 420px);padding-top:30px;padding-bottom:40px}
.app-card{max-width:560px;margin:0 auto;padding:34px 32px;border-radius:36px;background:linear-gradient(180deg,#FFFFFF 0%,#FBFAFF 100%);box-shadow:var(--sh-2),var(--puff)}
section.app-card.auth-card{position:relative;margin-top:40px;padding-top:26px}
section.app-card.auth-card::before{content:'';display:block;width:132px;height:132px;margin:-74px auto 2px;background:url(/boutique/kumoverse/kumo-dream-wave.svg?v=1) center/contain no-repeat;
  filter:drop-shadow(0 12px 16px rgba(90,81,198,.25))}
section.app-card.auth-card > .app-h,section.app-card.auth-card > .auth-sub{text-align:center}
.app-h{font-size:36px;letter-spacing:-.025em;text-wrap:balance}
.app-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:20px}
.app-head .app-sub{margin:0}
.app-note{text-align:center;font-weight:600;color:var(--ink-2)}
.kicker{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 15px;border-radius:999px;background:var(--lav-2);font-weight:800;font-size:13.5px;letter-spacing:.02em;color:var(--ink)}
/* order status chips: no green anywhere (paid is periwinkle, delivered dusk) */
.ochip{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;font-weight:800;font-size:12.5px;white-space:nowrap;background:var(--lav-2);color:var(--ink)}
.o-awaiting_payment{background:#FFF1C9;color:#5C4000}
.o-paid{background:#E4E0FF;color:#2E2858}
.o-delivered{background:var(--dusk-1);color:#FFFFFF}
.o-review{background:#FFE1EC;color:#7A1F45}
.o-expired,.o-cancelled{background:#EDEBF5;color:#4A4766}
.ord-tabs{max-width:640px}
.ord-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:18px;margin-bottom:28px}
.ord{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border-radius:30px;background:linear-gradient(180deg,#FFFFFF,#FBFAFF);box-shadow:var(--sh-2),var(--puff)}
.ord-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-bottom:6px}
.ord-id{font-size:15px;letter-spacing:.03em;white-space:nowrap}
.ord-prod{font:700 21px/1.2 var(--display);letter-spacing:-.015em}
.ord-plan,.ord-meta{font-weight:600;font-size:14px;color:var(--ink-2)}
.ord .btn{align-self:flex-start;min-height:44px;margin-top:10px}
.ord-empty{display:grid;justify-items:center;gap:14px;padding:30px;text-align:center;font-weight:600;color:var(--ink-2)}
.ord-empty::before{content:'';width:150px;height:120px;background:url(/boutique/kumoverse/kumo-dream-moonbed.svg?v=1) center/contain no-repeat}
.ord-items{list-style:none;display:grid;gap:4px;margin:4px 0 8px;font-weight:600;font-size:14px;color:var(--ink-2)}
.ord-items b{color:var(--ink)}
.ord-free{font-weight:800;color:var(--dusk-0)}
.pay-head .ord-items{margin-top:10px}
.rc-list .ord-items{margin:0;font-size:15px}
.pw-box{max-width:none;margin:0}
.pw-box summary{min-height:28px;font-weight:800;cursor:pointer}
.pw-box .auth-form{max-width:420px;margin-top:16px}
.reward-card{margin:0 auto 18px;max-width:none;background:linear-gradient(160deg,#FFF8E0,#FFE9A6);color:var(--ink)}
.reward-card .kicker{background:#FFFFFF}
.reward-label{margin-top:6px;font:700 25px var(--display)}
.reward-code{margin-top:6px;font-size:18px;letter-spacing:.06em}
/* the pay page: the QR keeps a white quiet zone so every phone can scan it */
.pay-head{position:relative;margin-bottom:24px}
@media (min-width:761px){
  .pay-head{padding-right:190px;min-height:150px}
  .pay-head::after{content:'';position:absolute;right:10px;top:-14px;width:170px;height:170px;background:url(/boutique/kumoverse/kumo-dream-phone.svg?v=1) center/contain no-repeat;filter:drop-shadow(0 14px 18px rgba(90,81,198,.25))}
}
.pay-head .kicker{margin-bottom:8px}
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:start}
.pay-qr{display:grid;justify-items:center;gap:16px;padding:24px;border-radius:36px;background:#FFFFFF;box-shadow:var(--sh-2),inset 0 0 0 1px rgba(217,211,255,.7)}
.pay-qr img{width:100%;max-width:414px;height:auto;border-radius:18px}
.pay-info{display:grid;gap:14px}
.pay-label{font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.pay-amt-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.pay-amt{font:800 48px/1 var(--text);letter-spacing:-.02em;color:var(--dusk-0);font-variant-numeric:tabular-nums}
.pay-copy{min-height:44px;padding:0 18px;font-size:14px}
.pay-steps{display:grid;gap:10px;padding-left:24px;font-weight:600;color:var(--ink-2)}
.pay-steps b{color:var(--ink);font-weight:800}
.pay-steps li::marker{color:var(--dusk-1);font-weight:800}
.pay-timer{font-weight:800;color:var(--ink-2)}
.pay-status{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:20px;background:#FFFFFF;box-shadow:var(--sh-1),inset 0 0 0 1px rgba(217,211,255,.8);font-weight:800}
.pay-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 3px rgba(255,217,106,.35)}
html.motion:not(.reduce) .pay-dot{animation:paydot 1.6s var(--ease) infinite}
@keyframes paydot{0%{box-shadow:0 0 0 0 rgba(227,181,58,.6)}100%{box-shadow:0 0 0 12px rgba(227,181,58,0)}}
.pay-ref{padding:12px 18px;border-radius:20px;background:#FFFFFF;box-shadow:var(--sh-1),inset 0 0 0 1px rgba(217,211,255,.8)}
.pay-ref summary{min-height:30px;font-weight:800;cursor:pointer}
.pay-ref .auth-form{margin-top:12px}
.pay-other{display:grid;gap:10px;justify-items:start}
.pay-code{width:fit-content;margin-top:2px;padding:5px 14px;border-radius:999px;background:var(--butter-p);box-shadow:inset 0 0 0 1px rgba(227,181,58,.45);color:var(--ink);font-weight:800;font-size:14px}
.pay-guest{margin-top:8px;font-weight:600;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
/* the receipt: Payment Success, Kumo cheering */
.receipt{max-width:620px;margin:0 auto;padding:30px 34px 28px;border-radius:40px;text-align:center;
  background:radial-gradient(420px 260px at 50% 0%,rgba(255,217,106,.3),rgba(255,217,106,0) 70%),linear-gradient(180deg,#FFFFFF,#FBFAFF);box-shadow:var(--sh-3),var(--puff)}
.rc-check{display:block;width:150px;height:150px;margin:0 auto 4px;background:url(/boutique/kumoverse/kumo-dream-cheer.svg?v=1) center/contain no-repeat;filter:drop-shadow(0 14px 18px rgba(90,81,198,.28))}
.rc-icon{display:none}
@keyframes arrive{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
html.motion:not(.reduce) .rc-check{animation:arrive .8s var(--soft) both}
.rc-list{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:22px 0;padding:20px 22px;border-radius:24px;background:var(--lav);text-align:left}
.rc-list dt{padding-top:2px;font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rc-list dd{font-weight:800;overflow-wrap:anywhere}
.rc-id{font-size:18px;letter-spacing:.04em}
.rc-list .link-btn{min-height:0;margin-left:6px;font-size:13px}
.rc-next{padding:20px 22px;border-radius:24px;border:2px dashed var(--lav-3);text-align:left}
.rc-next h2{margin-bottom:6px;font-size:24px}
.rc-next p{font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.rc-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.receipt > .link-btn{margin-top:14px}
.rc-member{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;padding:18px 22px;border-radius:24px;border:2px dashed var(--lav-3);text-align:left}
.rc-member .guest-perk{flex:1 1 220px}
.rc-thanks{margin-top:16px;padding:20px 22px;border-radius:24px;background:linear-gradient(160deg,#FFF6D9,#FFE59A);color:var(--ink);text-align:center}
.rc-thanks-k{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.rc-thanks-code{margin:6px 0 2px;font:800 28px var(--text);letter-spacing:.1em;overflow-wrap:anywhere}
.rc-thanks-sub{margin-bottom:10px;font-weight:600}
/* the cart */
.app-card.cart{max-width:780px}
.cart-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.cart-head .app-sub{margin:0}
.cart-list{list-style:none;display:grid;gap:12px;margin:22px 0 16px;padding:0}
.cart-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:24px;background:var(--lav)}
.cart-item.is-problem{background:#FFF0F4;box-shadow:inset 0 0 0 1.5px #F2A7C0}
.cart-logo{display:grid;place-items:center;width:64px;height:64px;overflow:hidden;border-radius:20px;background:#FFFFFF;box-shadow:0 2px 4px rgba(46,40,88,.06),0 10px 18px -10px rgba(46,40,88,.35)}
.cart-logo img{width:64%;height:64%;object-fit:contain}
.cart-logo.two{grid-template-columns:1fr 1fr;gap:3px;padding:0 7px}
.cart-logo.two img{width:100%;height:auto}
.cart-letter{font:700 30px var(--display);color:var(--dusk-1)}
.cart-title{font:700 19px/1.25 var(--display);letter-spacing:-.015em}
.cart-plan{margin-top:2px;font-weight:600;font-size:14px;color:var(--ink-2)}
.cart-flag{margin-top:6px;font-weight:800;font-size:13.5px;color:#9F1D45}
.cart-flag.is-info{color:#6B4A00}
.cart-code-on{margin-top:6px;font-weight:800;font-size:13.5px;color:var(--dusk-0)}
.cart-code-off{margin-top:6px;font-weight:600;font-size:13px;color:var(--ink-3)}
.cart-free{margin-top:6px;font-weight:800;font-size:13.5px;color:var(--dusk-0)}
.cart-right{display:grid;justify-items:end;gap:2px}
.cart-price{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.cart-price b{font:800 20px var(--text);color:var(--ink)}
.cart-was{font:800 14px var(--text);color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--dusk-3);text-decoration-thickness:2px}
.cart-rm{min-height:36px;font-size:13.5px}
.cart-codebox{margin-bottom:16px;padding:16px 18px;border-radius:24px;border:2px dashed var(--lav-3)}
.cart-k{margin-bottom:10px;font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cart-code-row{display:flex;gap:8px;max-width:440px}
.cart-sum{display:grid;grid-template-columns:1fr auto;gap:8px 0;padding:16px 20px;border-radius:24px;background:var(--lav);font-weight:800}
.cart-sum dt{color:var(--ink-2)}
.cart-sum dd{padding-left:16px;text-align:right;font-variant-numeric:tabular-nums}
.cart-sum .is-off{color:var(--dusk-0)}
.cart-sum .is-total{padding-top:10px;border-top:2px dashed var(--lav-3);font-size:20px;color:var(--ink)}
.cart-sum dd.is-total{font-size:26px}
.cart-err{margin-top:12px}
.cart-go{display:flex;width:100%;min-height:58px;margin-top:16px;font-size:17px}
.cart-go:disabled{opacity:.55;cursor:not-allowed;transform:none}
.cart-note{margin-top:10px;text-align:center}
.cart-back{display:flex;justify-content:center;width:max-content;margin:4px auto 0}
.cart-empty{display:grid;justify-items:center;gap:14px;padding:22px;text-align:center;font-weight:600;color:var(--ink-2)}
.cart-empty::before{content:'';width:150px;height:120px;background:url(/boutique/kumoverse/kumo-dream-moonbed.svg?v=1) center/contain no-repeat}
.cart-deal{margin-bottom:16px;padding:16px 18px;border-radius:24px;background:var(--butter-p);box-shadow:inset 0 0 0 1.5px rgba(227,181,58,.45)}
.cart-deal.is-on{background:var(--lav);box-shadow:inset 0 0 0 2px var(--dusk-3)}
.cart-deal-h{font:700 18px/1.3 var(--display);color:var(--ink)}
.cart-deal-bar{height:12px;margin:12px 0 8px;overflow:hidden;border-radius:999px;background:#FFFFFF;box-shadow:inset 0 1px 3px rgba(46,40,88,.12)}
.cart-deal-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--butter-d),var(--butter));transition:width .6s var(--ease)}
.cart-deal.is-on .cart-deal-bar span{background:linear-gradient(90deg,var(--dusk-1),var(--dusk-3))}
.cart-deal-sub{font-weight:600;font-size:13.5px;color:var(--ink-2)}
.cart-deal-more{min-height:40px;margin-top:4px}
.cart-code-msg.is-info{color:#6B4A00}

/* ---------- legal and help pages (lib/pages.mjs) ---------- */
.crumbs{padding-top:26px;font-weight:800}
.crumbs-legal{max-width:880px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.legal{max-width:880px;padding-top:16px;padding-bottom:24px}
.ptitle{margin:14px 0 8px;font-size:50px;letter-spacing:-.03em}
.legal-meta{font-weight:600;font-size:14px;color:var(--ink-3)}
.legal-lead{margin-top:22px;font-size:18px;font-weight:600;color:var(--ink-2)}
.legal-sec{margin-top:20px;padding:26px 30px;border-radius:32px;background:linear-gradient(180deg,#FFFFFF,#FCFBFF);box-shadow:var(--sh-1),inset 0 0 0 1px rgba(217,211,255,.6)}
.legal-sec h2{margin-bottom:8px;font-size:24px}
.legal-sec p{margin-top:8px;color:var(--ink-2)}
.legal-list{margin:10px 0 0 22px;color:var(--ink-2)}
.legal-list li{margin-top:6px}
.legal-list li::marker{color:var(--dusk-1)}
.legal-contact{margin-top:26px;padding:18px 22px;border-radius:24px;background:var(--butter-p);box-shadow:inset 0 0 0 1.5px rgba(227,181,58,.4);color:var(--ink);font-weight:700}
.legal-contact a{font-weight:800}

/* ---------- welcome gift (wheel.js): the 10% offer with Kumo holding the gift; the wheel if admin sets prizes ---------- */
.wh-sheet{max-width:470px}
.wh-card{text-align:center;padding-top:28px}
.wh-offer{max-width:440px}
.wh-offer .wh-card,.tg-card{padding-top:0;overflow:auto}
.wh-offer .wh-card::after,.tg-card::after{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:150px;border-radius:0 0 50% 50% / 0 0 26px 26px;
  background:radial-gradient(200px 140px at 50% 120%,rgba(255,226,140,.5),rgba(255,226,140,0) 70%),
    radial-gradient(circle at 14% 26%,#FFFFFF 0 1.5px,transparent 2.5px),radial-gradient(circle at 84% 22%,#FFF3C6 0 1.8px,transparent 2.8px),
    radial-gradient(circle at 72% 62%,rgba(255,255,255,.85) 0 1.1px,transparent 2.1px),radial-gradient(circle at 28% 70%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    linear-gradient(170deg,var(--dusk-0),var(--dusk-2))}
.wh-offer .wh-card::before{content:'';display:block;width:150px;height:150px;margin:6px auto 2px;background:url(/boutique/kumoverse/kumo-dream-gift.svg?v=1) center/contain no-repeat;
  filter:drop-shadow(0 16px 18px rgba(20,14,80,.35))}
.wh-offer .d-close,.tg-card .d-close{background:rgba(255,255,255,.92)}
.wh-kicker{margin-top:6px;font-weight:800;font-size:12px;letter-spacing:.24em;color:var(--dusk-0)}
.wh-title{margin-top:6px;font:700 30px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.wh-sub{margin-top:6px;font-weight:600;color:var(--ink-2)}
.wh-stage{position:relative;width:min(320px,76vw);aspect-ratio:1;margin:22px auto 8px}
.wh-rotor{position:absolute;inset:0}
.wh-rotor svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 22px rgba(90,81,198,.35))}
.wh-big{font:700 21px var(--display);fill:var(--ink)}
.wh-small{font:800 8.5px var(--text);letter-spacing:.06em;fill:var(--ink)}
.wh-big-gift{font-size:17px}
.wh-tiny{font:800 7.4px var(--text);fill:var(--ink)}
/* Comfortaa's digits sit high in their line box: more room above than below centres them in the pill (owner, 2026-10-17) */
.wh-offer-big{display:inline-block;margin-top:12px;padding:.21em 26px .06em;border-radius:28px;font:700 60px/1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums;
  background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 60%,#FFD258 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -6px 12px -4px rgba(214,163,40,.5),0 16px 30px -14px rgba(206,150,22,.65)}
.wh-offer .wh-result{margin-top:18px}
.wh-pointer{position:absolute;left:50%;top:-16px;z-index:2;width:34px;height:40px;margin-left:-17px;transform-origin:50% 32%}
.wh-pointer svg{display:block;width:100%;height:100%}
.wh-hub{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#FFEAB0,var(--butter));color:var(--ink);font:800 16px var(--text);letter-spacing:.08em;box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 10px 20px -8px rgba(206,150,22,.6)}
.wh-hub:disabled{cursor:default}
.wh-odds{margin-top:8px;font-weight:800;font-size:13px}
.wh-terms{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.wh-result{margin-top:16px;padding:16px 18px;border-radius:24px;background:var(--lav)}
.wh-result[hidden]{display:none}
.wh-won{font:700 26px/1.2 var(--display);color:var(--ink)}
.wh-won-sub{margin-top:4px;font-weight:600;color:var(--ink-2)}
.wh-ok{margin-top:8px;font-weight:800;color:var(--dusk-0)}
.wh-code{display:inline-block;margin-top:8px;padding:6px 16px;border-radius:999px;background:var(--butter-p);box-shadow:inset 0 0 0 2px rgba(227,181,58,.55);font:800 18px var(--text);letter-spacing:.08em;color:var(--ink)}
.wh-actions{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px}
.wh-err{margin-top:8px;font-weight:800;color:#9F1D45}
.wh-pill{position:fixed;left:calc(18px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));z-index:44;display:flex;align-items:center;gap:9px;
  min-height:52px;max-width:calc(100% - 124px);padding:0 20px 0 14px;border:0;border-radius:999px;cursor:pointer;color:var(--ink);font:800 14.5px/1.25 var(--text);text-align:left;
  background:linear-gradient(180deg,#FFEAB0 0%,var(--butter) 60%,#FFD258 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 4px 10px rgba(46,40,88,.12),0 16px 30px -12px rgba(206,150,22,.7)}
.wh-pill[hidden]{display:none}
.wh-pill svg{flex:none;width:22px;height:22px}
html.motion:not(.reduce) .wh-pill{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 -3px}}
/* the Telegram pop-up: the same dusk window, Kumo with the phone, a Telegram-blue button (ink on it is 5.6:1) */
.tg-pop{max-width:440px}
.tg-card{text-align:center}
.tg-card::before{content:'';display:block;width:150px;height:150px;margin:6px auto 2px;background:url(/boutique/kumoverse/kumo-dream-phone.svg?v=1) center/contain no-repeat;
  filter:drop-shadow(0 16px 18px rgba(20,14,80,.35))}
.tg-kicker{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-weight:800;font-size:12px;letter-spacing:.24em;color:#17669A}
.tg-kicker .i{width:17px;height:17px;color:#2AABEE}
.tg-title{margin-top:6px;font:700 30px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tg-sub{margin-top:8px;font-weight:600;color:var(--ink-2);text-wrap:balance}
.tg-actions{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:20px}
.tg-join{min-width:250px;background:linear-gradient(180deg,#9BD8F8 0%,#3FB2EE 70%);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 14px 26px -12px rgba(42,140,210,.7)}
.tg-join:hover{transform:translateY(-2px)}
.tg-join .i{width:22px;height:22px}
.tg-terms{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink-3)}

/* ---------- the floating Messenger button (server.mjs): Messenger keeps its own colours ---------- */
.msgr{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:45;width:62px;height:62px;border-radius:50%;text-decoration:none}
.msgr-btn{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 20% 100%,#FF6A6A 0%,#A834F6 50%,#0A8CFF 100%);box-shadow:0 0 0 4px #FFFFFF,0 6px 12px rgba(46,40,88,.18),0 18px 34px -12px rgba(90,81,198,.55);
  transition:transform .45s var(--soft),box-shadow .45s var(--ease)}
html.motion:not(.reduce) .msgr-btn{animation:msgr-in .8s var(--soft) 1.2s both}
.msgr-btn svg{width:30px;height:30px;fill:#FFFFFF}
.msgr:hover .msgr-btn,.msgr:focus-visible .msgr-btn{transform:translateY(-3px) scale(1.05)}
.msgr:active .msgr-btn{transform:scale(.96);transition-duration:.12s}
.msgr:focus-visible{outline:3px solid var(--dusk-1);outline-offset:7px;border-radius:50%}
.msgr-tip{position:absolute;right:76px;top:50%;display:flex;align-items:center;height:40px;margin-top:-20px;padding:0 16px;border-radius:999px;white-space:nowrap;
  background:#FFFFFF;color:var(--ink);font-weight:800;font-size:14px;box-shadow:var(--sh-2);opacity:0;translate:10px 0;pointer-events:none;
  transition:opacity .35s var(--ease),translate .35s var(--ease)}
.msgr:hover .msgr-tip,.msgr:focus-visible .msgr-tip{opacity:1;translate:0 0}
@keyframes msgr-in{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.burst{position:fixed;inset:0;z-index:60;pointer-events:none}
.burst svg{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px}

/* ---------- product details on phones and small screens ---------- */
#detail .d-card{overscroll-behavior:contain}

/* ---------- smaller screens ---------- */
@media (max-width:1280px){
  .hero-in{grid-template-columns:minmax(0,1fr) 344px;min-height:600px;padding-left:48px}
  .hero-art{min-height:489px}
  .dreamscape{--k:.905}
  .hero h1{font-size:56px}
  .tile b{font-size:19px}
  .nav-links a{padding:0 12px}
}
/* the board stacks: the dusk tile runs the full width, the four promise tiles sit in a row under it */
@media (max-width:1180px){
  .board{grid-template-columns:minmax(0,1fr)}
  .trust{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}
  .tile{min-height:170px}
  .hero-in{grid-template-columns:minmax(0,1fr) 380px;min-height:560px;padding-left:50px}
  .hero-copy{padding:46px 0}
  .hero-art{min-height:540px}
  .dreamscape{--k:1}
}
@media (max-width:1060px){
  .nav-links{display:none}
  .navbar .nav-cart{margin-left:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder{flex-wrap:wrap}
  .search{flex:1 1 280px}
  .chips{flex-wrap:wrap}
  .ways,.care-board{grid-template-columns:minmax(0,1fr)}
  .care-board{max-width:720px;margin-left:auto;margin-right:auto}
  .ways{max-width:720px;margin-left:auto;margin-right:auto}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr) 322px;min-height:590px;padding-left:44px}
  .hero-art{min-height:457px}
  .dreamscape{--k:.847}
  .hero h1{font-size:52px}
}
@media (max-width:760px){
  :root{--navh:60px}
  .wrap{padding:0 18px}
  .navbar .nav-row.wrap,.app-nav .nav-row.wrap{width:calc(100% - 24px);padding:0 8px 0 12px;gap:8px}
  .nav-in{padding-top:10px}
  .navbar.scrolled .nav-in{padding-top:8px}
  .brand img{width:38px;height:38px}
  .brand b{font-size:17px}
  .nav-msg{display:none}
  .nav-cart,.nav-acct{width:44px;height:44px;min-height:44px}
  .nav-acct{padding:0}
  .nav-acct span{display:none}
  .hero{padding-top:calc(10px + var(--navh) + 14px)}
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0;padding:0 20px 26px;border-radius:36px}
  .hero-copy{padding:0}
  /* phones: the dreamscape sits on top of the words, Kumo low in the middle, his dreams above and beside him */
  .hero-art{order:-1;align-self:auto;height:300px;min-height:0;margin:0 -20px}
  .dreamscape{--k:1;--hx:177px;--hy:148px;left:50%;right:auto;width:354px;height:300px;margin-left:-177px;transform-origin:50% 100%}
  .moonglow{left:177px;top:214px;width:300px;height:300px}
  .dream-haze{left:177px;top:96px;width:400px;height:250px}
  .hero-kumo{bottom:6px;width:216px}
  .dream-b:nth-child(1){--x:150px;--y:68px;--d:64px}
  .dream-b:nth-child(2){--x:228px;--y:52px;--d:58px}
  .dream-b:nth-child(3){--x:76px;--y:48px;--d:54px}
  .dream-b:nth-child(4){--x:292px;--y:102px;--d:54px}
  .dream-b:nth-child(5){--x:40px;--y:114px;--d:50px}
  .dream-b:nth-child(6){--x:304px;--y:40px;--d:50px}
  .dream-b:nth-child(7){--x:38px;--y:180px;--d:52px}
  .dream-b:nth-child(8){--x:318px;--y:166px;--d:52px}
  .dream-b:nth-child(9){--x:42px;--y:248px;--d:50px}
  .dream-b:nth-child(10){--x:312px;--y:236px;--d:50px}
  .dream-b:hover{scale:1}
  .dream-trail i:nth-child(1){--x:240px;--y:127px;--d:5px}
  .dream-trail i:nth-child(2){--x:244px;--y:114px;--d:7px}
  .dream-trail i:nth-child(3){--x:246px;--y:98px;--d:9px}
  .dream-trail i:nth-child(n+4){display:none}
  .twinkles i:nth-child(1){--x:110px;--y:128px;--d:4px}
  .twinkles i:nth-child(2){--x:186px;--y:16px;--d:4px}
  .twinkles i:nth-child(3){--x:12px;--y:72px;--d:4px}
  .twinkles i:nth-child(4){--x:272px;--y:146px;--d:4px}
  .twinkles i:nth-child(5){--x:346px;--y:122px;--d:4px}
  .twinkles i:nth-child(6){--x:346px;--y:280px;--d:5px}
  .twinkles i:nth-child(7){--x:14px;--y:290px;--d:4px}
  .hero .kicker{font-size:13px;padding:0 14px 0 8px}
  .hero h1{margin:16px 0 12px;font-size:40px}
  .hero p.lead{font-size:17px}
  .hero-cta{flex-direction:column;gap:10px;margin-top:24px}
  .hero-cta .btn{width:100%}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile{min-height:136px;padding:16px 16px 18px;border-radius:28px}
  .tile svg{right:-10px;bottom:-10px;width:74px;height:74px;padding:19px;border-radius:28px}
  .tile b{font-size:17px}
  .tile small{font-size:14px}
  .home > section{padding-top:84px}
  .home > section.shop{padding-top:24px}
  .head h2{font-size:33px}
  .head p{font-size:16.5px}
  .shop-top{gap:20px}
  .finder{width:100%;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border-radius:28px}
  .search{flex:none;width:100%}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -8px;padding:0 8px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 22px),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .grid{grid-auto-rows:auto;gap:12px;margin-top:20px}
  .grid > article.card:first-of-type{grid-row:auto}
  .card{padding:16px 16px 16px;border-radius:28px}
  .card .tiles{margin-bottom:14px}
  .card .logo{width:54px;height:54px;border-radius:18px}
  .card .logo img{width:calc(var(--s) * 50px);height:calc(var(--s) * 50px)}
  .card h3{font-size:16.5px}
  .card .blurb{font-size:13px}
  .card .foot{flex-direction:column;align-items:stretch;gap:12px;padding-top:14px}
  .card .from b{font-size:20px}
  .card .btn{width:100%;padding:0 12px}
  .grid > article.card:first-of-type{padding:0 20px 22px}
  .grid > article.card:first-of-type::after{height:132px;border-radius:28px 28px 50% 50% / 28px 28px 22px 22px}
  .grid > article.card:first-of-type .tiles{margin:82px 0 16px}
  .grid > article.card:first-of-type .logo{width:88px;height:88px;border-radius:28px}
  .grid > article.card:first-of-type .logo img{width:calc(var(--s) * 82px);height:calc(var(--s) * 82px)}
  .grid > article.card:first-of-type h3{font-size:25px}
  .grid > article.card:first-of-type .blurb{font-size:15px}
  .grid > article.card:first-of-type .checks{font-size:14px}
  .grid > article.card:first-of-type .from b{font-size:26px}
  .grid > article.card:nth-of-type(2){grid-template-columns:96px minmax(0,1fr);column-gap:16px;padding:16px 16px 18px 14px}
  .grid > article.card:nth-of-type(2)::after{left:8px;top:8px;bottom:auto;height:112px;width:104px;border-radius:22px}
  .grid > article.card:nth-of-type(2) .tiles{align-self:start;margin-top:12px}
  .grid > article.card:nth-of-type(2) .logo{width:68px;height:68px;border-radius:22px}
  .grid > article.card:nth-of-type(2) .logo img{width:calc(var(--s) * 64px);height:calc(var(--s) * 64px)}
  .grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo{width:46px;height:46px;border-radius:16px}
  .grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo img{width:calc(var(--s) * 43px);height:calc(var(--s) * 43px)}
  .grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo:first-child{translate:0 -4px}
  .grid > article.card:nth-of-type(2) .tiles:has(.logo-plus) .logo-plus + .logo{margin-left:-10px;translate:0 12px}
  .grid > article.card:nth-of-type(2) h3{padding-right:0;padding-top:34px;font-size:20px}
  .grid > article.card:nth-of-type(2) .blurb{font-size:13.5px}
  .grid > article.card:nth-of-type(2) .checks{font-size:13.5px}
  .grid > article.card:nth-of-type(2) .foot{grid-column:1 / -1}
  .grid > article.card:first-of-type .foot,.grid > article.card:nth-of-type(2) .foot{flex-direction:row;align-items:flex-end}
  .grid > article.card:first-of-type .btn,.grid > article.card:nth-of-type(2) .btn{width:auto;padding:0 22px}
  .feat-pill{right:12px;top:12px}
  .note-tile{grid-template-rows:auto auto;padding:18px;border-radius:28px;gap:0 14px}
  .note-kumo{grid-row:1;width:88px;height:88px;margin:-6px -4px -6px -6px}
  .note-copy{grid-row:1}
  .note-copy h3{font-size:19px}
  .note-copy p{font-size:14.5px}
  .note-cta{grid-row:2;grid-column:1 / -1;justify-self:stretch;margin-top:14px}
  .ways{gap:16px;margin-top:28px}
  .way{padding:22px 20px 24px;border-radius:34px}
  .way-top{min-height:90px}
  .way-kumo{width:116px;height:116px;margin:-18px -8px -26px 0}
  .way h3{font-size:26px}
  .way-sub{font-size:16px}
  .way-steps li{padding:10px 14px 10px 10px;gap:12px}
  .way-cta{align-self:stretch}
  .care-board{gap:18px;margin-top:74px}
  .wcard{padding:26px 22px 22px;border-radius:34px}
  .w-kumo{width:108px;height:108px;top:-62px;right:4px}
  .wcard h3{font-size:28px;padding-right:76px}
  .faq{padding:8px;border-radius:34px}
  .faq-item summary{font-size:16px;padding:8px 10px 8px 14px}
  .faq-item p{padding:0 16px 18px 14px}
  .band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;margin-top:100px;padding:6px 22px 28px;border-radius:38px;
    background:radial-gradient(170px 120px at 50% 0%,rgba(255,226,140,.26),rgba(255,226,140,0) 70%),linear-gradient(160deg,#4B43B5 0%,#5A51C6 55%,#6760D2 100%)}
  .band::after{background:radial-gradient(circle at 8% 7%,#FFFFFF 0 1.5px,transparent 2.5px),radial-gradient(circle at 93% 9%,#FFF3C6 0 1.8px,transparent 2.8px),radial-gradient(circle at 4% 60%,rgba(255,255,255,.8) 0 1.2px,transparent 2.2px),radial-gradient(circle at 96.5% 70%,rgba(255,255,255,.9) 0 1.2px,transparent 2.2px)}
  .band-kumo{width:140px;height:140px;margin:-62px 0 -4px}
  .band h2{font-size:30px}
  .band p{font-size:16.5px}
  .band-cta{width:100%}
  .lb-footer,footer.foot{margin-top:180px;padding-top:50px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot-links a,.foot-col a{min-height:44px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .msgr{right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:58px;height:58px}
  .msgr-btn svg{width:28px;height:28px}
  .wh-pill{left:calc(14px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));max-width:calc(100% - 110px);min-height:50px;font-size:14px}
  /* dialogs */
  dialog{width:calc(100% - 24px)}
  .d-card{padding:28px 20px 22px;border-radius:32px}
  .d-head{flex-direction:column;align-items:flex-start;gap:14px}
  .d-title{font-size:26px}
  .d-share{min-height:44px}
  .d-sale-ends{margin-left:0}
  .d-actions{width:100%}
  .wh-title,.tg-title{font-size:26px}
  .wh-offer-big{font-size:54px}
  /* product details: a bottom sheet with a grab handle. motion.js grows the card from the tapped tile with a
     transform; !important keeps it still, so the sheet slides up on the translate property instead */
  #detail{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden}
  #detail .d-card{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;max-height:90vh;padding:34px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius:34px 34px 0 0;transform:none!important}
  #detail .d-card::before{content:'';position:absolute;left:50%;top:11px;width:46px;height:5px;margin-left:-23px;border-radius:3px;background:var(--lav-3)}
  html.motion:not(.reduce) #detail[open] .d-card{animation:sheet-up .5s var(--ease)}
  /* app pages */
  .app-nav{padding:10px 0}
  .app-nav-r{gap:6px}
  .app-nav .btn{min-height:44px;padding:0 16px;font-size:14px}
  .app-h{font-size:30px}
  .app-card{padding:26px 20px;border-radius:32px}
  .app-main{padding-top:22px}
  .foot-bottom::before{left:18px;right:18px}
  section.app-card.auth-card{margin-top:46px}
  .pay-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .pay-qr{padding:18px;border-radius:32px}
  .pay-amt{font-size:40px}
  .receipt{padding:24px 18px 22px;border-radius:34px}
  .rc-list{grid-template-columns:minmax(0,1fr);gap:2px}
  .rc-list dd{margin-bottom:8px}
  .ptitle{font-size:38px}
  .legal-sec{padding:22px 20px;border-radius:28px}
  .cart-rm,.cart-deal-more,.rc-list .link-btn,.d-code-msg .link-btn{min-height:44px}
  .pw-box summary,.pay-ref summary{padding:10px 0}
}
@keyframes sheet-up{from{translate:0 100%}to{translate:0 0}}
@media (max-width:560px){
  .app-card.cart{padding:24px 16px}
  .cart-item{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:12px}
  .cart-logo{width:52px;height:52px;border-radius:16px}
  .cart-right{grid-column:2;grid-auto-flow:column;justify-content:space-between;align-items:center}
  .d-buyrow{flex-direction:column}
  .app-nav-r:has(.nav-cart) .btn{display:none}
}
@media (max-width:420px){
  .hero h1{font-size:36px}
  .brand b{font-size:16px}
  .tile b{font-size:15.5px}
  .grid > article.card:first-of-type h3{font-size:23px}
  .wh-title,.tg-title{font-size:25px}
}
@media (max-width:389px){
  .hero-art{height:275px}
  .dreamscape{--k:.915}
}
@media (max-width:380px){
  .brand b{font-size:15px;white-space:normal;line-height:1.02;max-width:6.4em}
  .wh-pill{font-size:13px;padding:0 14px 0 12px;gap:7px}
  .wh-pill svg{width:20px;height:20px}
  .bar-pre{display:none}
  .card{padding:14px 14px 14px}
  .tile{padding:14px 14px 16px}
}
@media (max-width:640px){
  .yv-bar{font-size:13px}
  .bar-in{min-height:44px;gap:10px}
  .bar-link{min-height:44px}
  .bar-long{display:none}
  .bar-short{display:inline}
}

/* ---------- reduced motion: no loops, no travel; everything still works ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .petals{display:none}
  .hero-kumo,.twinkles i,.dream-b,.dream-trail i,.wh-pill,.pay-dot,.msgr-btn,.rc-check,.faq-item[open] p{animation:none!important}
  #detail[open] .d-card{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}
html.reduce .petals{display:none}
html.reduce .hero-kumo,html.reduce .twinkles i,html.reduce .dream-b,html.reduce .dream-trail i,html.reduce .wh-pill,html.reduce .pay-dot{animation:none!important}