/* ============================================================
   DOLLSKIN — playful animated-feature treatment
   Candy twilight palette · Baloo 2 + Nunito + Fredoka
   Chunky rounded forms, glossy highlights, springy motion
   ============================================================ */

:root{
  --ink:#2A1B5E;
  --ink-2:#4A3690;
  --muted:#7C6BAE;
  --paper:#FFF8EC;
  --paper-2:#FFEFD9;
  --surface:#FFFFFF;
  --surface-2:#F4EEFF;
  --line:#E6DCFA;
  --line-2:#CFC0F0;

  --teal:#2FD39B;      --teal-deep:#12A879;
  --coral:#FF5D8F;     --coral-deep:#EE3573;
  --gold:#FFC531;      --gold-deep:#FF9A1F;
  --violet:#7B5CFA;    --violet-deep:#5B3AE0;
  --rose:#FF7BA6;

  --on-accent:#FFFFFF;
  --hill-1:#7B5CFA; --hill-2:#5B3AE0; --hill-3:#2A1B5E;

  --g-sky:linear-gradient(176deg,#8FE6FF 0%,#B9E9FF 38%,#FFD8B0 74%,#FFC0A8 100%);
  --g-gold:linear-gradient(140deg,#FFE293 0%,#FFC531 52%,#F58A0C 100%);
  --g-coral:linear-gradient(140deg,#FF8FB4 0%,#FF5D8F 52%,#E52C6B 100%);
  --g-teal:linear-gradient(140deg,#7BF0C9 0%,#2FD39B 55%,#0F9B70 100%);
  --g-violet:linear-gradient(140deg,#A48CFF 0%,#7B5CFA 55%,#5028D6 100%);

  --sh-1:0 2px 0 rgba(42,27,94,.06), 0 10px 22px rgba(42,27,94,.10);
  --sh-2:0 4px 0 rgba(42,27,94,.08), 0 22px 44px rgba(42,27,94,.18);
  --sh-3:0 6px 0 rgba(42,27,94,.10), 0 38px 70px rgba(42,27,94,.26);
  --sh-toy:inset 0 -5px 0 rgba(0,0,0,.13), inset 0 3px 0 rgba(255,255,255,.4);

  --r-s:14px; --r-m:22px; --r-l:34px; --r-xl:46px; --pill:999px;
  --wrap:1200px;
  --gut:clamp(18px,5vw,54px);
  --wave-h:clamp(46px,6.2vw,94px);

  --f-display:"Baloo 2","Trebuchet MS",sans-serif;
  --f-body:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-fun:"Fredoka","Baloo 2","Trebuchet MS",sans-serif;

  --spring:cubic-bezier(.34,1.5,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2EAFF; --ink-2:#CFC0F5; --muted:#9C8BCB;
    --paper:#170F36; --paper-2:#20164A; --surface:#241A52; --surface-2:#2E2166;
    --line:#3B2C7A; --line-2:#54409E;
    --teal:#4FE4B0; --teal-deep:#23C892;
    --coral:#FF7FA8; --coral-deep:#FF4F86;
    --gold:#FFD25C; --gold-deep:#FFAE3D;
    --violet:#A18DFF; --violet-deep:#8168FF;
    --rose:#FF9DBF;
    --on-accent:#170F36;
    --hill-1:#3E2C86; --hill-2:#2B1D63; --hill-3:#170F36;
    --g-sky:linear-gradient(176deg,#2B2C7A 0%,#3E3A96 34%,#7B4C9E 70%,#C2607F 100%);
    --sh-1:0 2px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.34);
    --sh-2:0 4px 0 rgba(0,0,0,.34), 0 22px 44px rgba(0,0,0,.44);
    --sh-3:0 6px 0 rgba(0,0,0,.38), 0 38px 70px rgba(0,0,0,.52);
    --sh-toy:inset 0 -5px 0 rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.18);
  }
}
:root[data-theme="dark"]{
  --ink:#F2EAFF; --ink-2:#CFC0F5; --muted:#9C8BCB;
  --paper:#170F36; --paper-2:#20164A; --surface:#241A52; --surface-2:#2E2166;
  --line:#3B2C7A; --line-2:#54409E;
  --teal:#4FE4B0; --teal-deep:#23C892; --coral:#FF7FA8; --coral-deep:#FF4F86;
  --gold:#FFD25C; --gold-deep:#FFAE3D; --violet:#A18DFF; --violet-deep:#8168FF; --rose:#FF9DBF;
  --on-accent:#170F36;
  --hill-1:#3E2C86; --hill-2:#2B1D63; --hill-3:#170F36;
  --g-sky:linear-gradient(176deg,#2B2C7A 0%,#3E3A96 34%,#7B4C9E 70%,#C2607F 100%);
  --sh-1:0 2px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.34);
  --sh-2:0 4px 0 rgba(0,0,0,.34), 0 22px 44px rgba(0,0,0,.44);
  --sh-3:0 6px 0 rgba(0,0,0,.38), 0 38px 70px rgba(0,0,0,.52);
  --sh-toy:inset 0 -5px 0 rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:500;
  font-size:clamp(16px,.4vw + 15.1px,17.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}

/* ---------------- type ---------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:800;
  line-height:.98;letter-spacing:-.018em;margin:0;text-wrap:balance;
}
.h-xl{font-size:clamp(3rem,9vw,7rem)}
.h-l{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.h-m{font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.04}
.h-s{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.12}
p{margin:0}
.lede{font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.55;color:var(--ink-2)}
.prose{max-width:60ch;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:800}

.badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-body);font-weight:700;font-size:.82rem;
  letter-spacing:.01em;padding:7px 15px 8px;border-radius:var(--pill);
  background:var(--surface);color:var(--violet-deep);
  box-shadow:var(--sh-1);border:2px solid var(--line);
}
.badge.gold{background:var(--g-gold);color:#5B3200;border-color:rgba(0,0,0,.06)}
.badge.teal{background:var(--g-teal);color:#04372A;border-color:rgba(0,0,0,.06)}
.badge.violet{background:var(--g-violet);color:#fff;border-color:rgba(0,0,0,.06)}
.badge.coral{background:var(--g-coral);color:#fff;border-color:rgba(0,0,0,.06)}
.badge.teal{background:linear-gradient(140deg,#9EE8FF,#4BC9F0 55%,#2A7FD4);color:#04293D;border-color:rgba(0,0,0,.06)}

.fun{font-family:var(--f-fun);font-weight:600}
.num{font-family:var(--f-body);font-weight:700;font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative;scroll-margin-top:86px}

/* ---------------- motion ---------------- */
.anim .rv{opacity:.001;transform:translateY(26px) scale(.965);transition:opacity .6s var(--ease),transform .72s var(--spring)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-2{transition-delay:.09s} .anim .rv-3{transition-delay:.18s} .anim .rv-4{transition-delay:.27s}
@keyframes bob{from{transform:translateY(0) rotate(var(--rot,0deg))}to{transform:translateY(-14px) rotate(var(--rot,0deg))}}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes pop{0%{transform:translateY(16px) scale(.8)}68%{transform:translateY(0) scale(1.05)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){
  .anim .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;scroll-behavior:auto!important}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:15px 26px 17px;border-radius:var(--pill);border:0;cursor:pointer;
  font-family:var(--f-display);font-weight:750;font-size:1.02rem;letter-spacing:-.01em;
  background:var(--g-coral);color:#fff;
  box-shadow:var(--sh-toy),0 8px 0 var(--coral-deep),0 18px 30px rgba(238,53,115,.34);
  transition:transform .18s var(--spring),box-shadow .18s var(--ease),filter .2s;
  line-height:1;
}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--sh-toy),0 11px 0 var(--coral-deep),0 22px 36px rgba(238,53,115,.4)}
.btn:active{transform:translateY(4px);box-shadow:var(--sh-toy),0 3px 0 var(--coral-deep),0 8px 16px rgba(238,53,115,.3)}
.btn.sm{padding:11px 19px 13px;font-size:.92rem;box-shadow:var(--sh-toy),0 5px 0 var(--coral-deep),0 10px 18px rgba(238,53,115,.3)}
.btn.sm:hover{box-shadow:var(--sh-toy),0 7px 0 var(--coral-deep),0 14px 22px rgba(238,53,115,.34)}
.btn.violet{background:var(--g-violet);box-shadow:var(--sh-toy),0 8px 0 var(--violet-deep),0 18px 30px rgba(91,58,224,.32)}
.btn.violet:hover{box-shadow:var(--sh-toy),0 11px 0 var(--violet-deep),0 22px 36px rgba(91,58,224,.4)}
.btn.violet.sm{box-shadow:var(--sh-toy),0 5px 0 var(--violet-deep),0 10px 18px rgba(91,58,224,.3)}
.btn.teal{background:var(--g-teal);color:#03362A;box-shadow:var(--sh-toy),0 8px 0 var(--teal-deep),0 18px 30px rgba(18,168,121,.3)}
.btn.cream{background:var(--surface);color:var(--violet-deep);box-shadow:var(--sh-toy),0 7px 0 var(--line-2),0 14px 26px rgba(42,27,94,.16)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;padding:10px var(--gut) 0;pointer-events:none}
.nav-in{
  max-width:var(--wrap);margin-inline:auto;pointer-events:auto;
  display:flex;align-items:center;gap:14px;
  /* No backdrop-filter here: a sticky blurred pill over moving
     photography re-composites every frame and flickers on phones. */
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  border:2px solid var(--line);border-radius:var(--pill);
  padding:9px 9px 9px 18px;box-shadow:var(--sh-1);
}
.brand{
  font-family:var(--f-display);font-weight:750;font-size:1.22rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:8px;flex:none;
}
.brand-mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{
  padding:9px 14px;border-radius:var(--pill);font-weight:700;font-size:.94rem;color:var(--ink-2);
  transition:background .2s,color .2s,transform .2s var(--spring);
}
.nav-links a:hover{background:var(--surface-2);color:var(--violet-deep);transform:translateY(-2px)}
@media (max-width:900px){ .nav-links a.hide-sm{display:none} }
@media (max-width:560px){ .nav-links a.hide-xs{display:none} }
.btn.gold{background:var(--g-gold);color:#2A1B5E;box-shadow:var(--sh-toy),0 8px 0 var(--gold-deep),0 18px 30px rgba(255,197,49,.34)}
.btn.gold:hover{box-shadow:var(--sh-toy),0 11px 0 var(--gold-deep),0 22px 36px rgba(255,197,49,.42)}
.btn.gold.sm{box-shadow:var(--sh-toy),0 5px 0 var(--gold-deep),0 10px 18px rgba(255,197,49,.3)}
.btn.gold.sm:hover{box-shadow:var(--sh-toy),0 7px 0 var(--gold-deep),0 14px 22px rgba(255,197,49,.34)}
@media (max-width:420px){
  .nav-links{gap:6px}
  .btn.sm{padding:10px 13px 12px;font-size:.84rem}
}
@media (max-width:620px){
  .nav-links a{display:none}
  .nav-in{padding:8px 8px 8px 14px;gap:8px}
  .brand{font-size:1.06rem}
  .brand-mark{width:26px;height:26px}
}
.bag-btn{position:relative}
.bag-count{
  position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;
  border-radius:var(--pill);background:var(--gold);color:#5B3200;
  font-family:var(--f-body);font-weight:700;font-size:.72rem;line-height:22px;text-align:center;
  border:2.5px solid var(--paper);
}

/* ============================================================
   HERO — the title card
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94svh,920px);
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  background:var(--g-sky);
  margin-top:calc(-1 * (49px + env(safe-area-inset-top,0px)));
  padding-top:calc(49px + env(safe-area-inset-top,0px));
}
/* matte-painting backdrop */
.matte{
  position:absolute;inset:-2% -2% -2%;z-index:0;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 82%,transparent 100%);
}
/* The 55% lives here, on the stack, not on each photo. Inside it the two
   buffers cross-fade at full opacity, so the arriving photo covers the
   outgoing one instead of blending with it and the composite density never
   moves. Dimming each photo separately is what made the hero pulse. */
.matte-stack{position:absolute;inset:0;opacity:.55}
.matte img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;
  opacity:0;transition:opacity .6s var(--ease);
  filter:saturate(1.8) contrast(1.16) brightness(1.06) blur(2.5px);
  transform:scale(1.08);
}
.matte img.on{opacity:1}
@keyframes mattedrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}
.matte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(120,220,255,.6) 0%,rgba(185,233,255,.3) 30%,rgba(255,180,140,.44) 76%,rgba(255,140,130,.6) 100%);
  mix-blend-mode:soft-light;
}
.matte::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(112% 74% at 50% 2%,transparent 38%,rgba(42,27,94,.3) 100%);
}

/* sun + clouds + sparkle layer */
.sky-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sunball{
  position:absolute;top:8%;right:11%;width:clamp(96px,15vw,190px);aspect-ratio:1;
  border-radius:50%;background:var(--g-sun);
  box-shadow:0 0 0 clamp(14px,2.4vw,30px) rgba(255,212,94,.22),
             0 0 0 clamp(30px,5vw,64px) rgba(255,212,94,.12),
             0 0 90px 30px rgba(255,180,60,.5);
}
.anim .sunwrap{animation:bob 9s ease-in-out infinite alternate}
.cloud{position:absolute;opacity:.96;filter:drop-shadow(0 10px 18px rgba(42,27,94,.14))}
.cloud.c1{top:12%;left:4%;width:clamp(120px,20vw,260px)}
.cloud.c2{top:26%;left:58%;width:clamp(90px,14vw,190px)}
.cloud.c3{top:2%;left:6%;width:clamp(70px,11vw,150px);opacity:.7}
.anim .cloud.c1{animation:drift 26s ease-in-out infinite alternate}
.anim .cloud.c2{animation:drift 34s ease-in-out infinite alternate-reverse}
.anim .cloud.c3{animation:drift 44s ease-in-out infinite alternate}
.spark{position:absolute;width:14px;height:14px;color:#FFFCEA;filter:drop-shadow(0 0 7px rgba(255,238,170,.95))}
.anim .spark{animation:twinkle 4.2s ease-in-out infinite;will-change:opacity,transform}

/* hills */
.hills{position:absolute;left:0;right:0;bottom:-2px;z-index:2;pointer-events:none}
.hills svg{display:block;width:104%;margin-left:-2%;height:auto}

.hero-eyebrow{
  font-family:var(--f-body);font-weight:800;
  font-size:clamp(.86rem,1.3vw,1.1rem);letter-spacing:.2em;text-transform:uppercase;
  color:#FFFFFF;margin-bottom:clamp(14px,2.2vh,22px);
  text-shadow:0 1px 2px rgba(16,8,38,1),0 2px 6px rgba(16,8,38,.95),0 6px 24px rgba(16,8,38,.85);
}
.hero-copy::before{
  content:"";position:absolute;inset:-14% -6% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%,rgba(20,10,44,.6) 0%,rgba(20,10,44,.36) 52%,rgba(20,10,44,0) 76%);
}
.hero-copy{position:relative;z-index:4;min-width:0;text-align:center;padding:clamp(26px,5.6vh,62px) var(--gut) 0;will-change:transform,opacity}
.hero-kicker{
  display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:clamp(14px,2.4vh,24px);
}
.title{
  font-family:var(--f-display);font-weight:750;
  font-size:clamp(3.4rem,14vw,10rem);line-height:.82;letter-spacing:-.04em;
  color:#FFFDF6;
  -webkit-text-stroke:2px #5B3AE0;
  paint-order:stroke fill;
  text-shadow:
    0 6px 0 #5B3AE0, 0 11px 0 rgba(42,27,94,.55),
    0 26px 46px rgba(42,27,94,.45);
  margin:0;
}
.title .l{display:inline-block;transform-origin:50% 90%}
.anim .title .l{animation:pop .7s var(--spring)}
.subtitle{
  font-family:var(--f-body);font-weight:600;
  font-size:clamp(1.15rem,3.4vw,2.2rem);color:#FFF3D4;
  text-shadow:0 3px 0 rgba(91,58,224,.6),0 10px 24px rgba(42,27,94,.4);
  margin-top:.28em;letter-spacing:.005em;
}
.hero-sub{
  margin:clamp(18px,3vh,26px) auto 0;max-width:42ch;color:#fff;font-weight:700;
  font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.5;
  text-shadow:0 2px 5px rgba(20,10,44,.95),0 8px 26px rgba(20,10,44,.75)
}
.hero-sub-m{
  margin:clamp(16px,2.6vh,22px) auto 0;max-width:30ch;color:#fff;font-weight:700;
  font-size:1.04rem;line-height:1.5;
  text-shadow:0 2px 5px rgba(20,10,44,.95),0 8px 26px rgba(20,10,44,.75)
}
.hero-sub2{
  margin:14px auto 0;max-width:40ch;color:#FFE08A;font-weight:600;
  font-family:var(--f-fun);font-size:clamp(1.04rem,1.35vw,1.26rem);
  text-shadow:0 2px 5px rgba(20,10,44,.95),0 8px 26px rgba(20,10,44,.75)
}

/* floating gel trio */
.cast{
  position:relative;z-index:4;min-width:0;display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(16px,4.5vw,66px);padding:clamp(40px,6.5vh,78px) var(--gut) clamp(16px,3vh,34px);
}
.gel{
  position:relative;flex:none;width:clamp(104px,15.5vw,186px);
  display:grid;justify-items:center;gap:0;
  appearance:none;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  transition:transform .3s var(--spring);
}
.gel:hover,.gel:focus-visible{transform:translateY(-8px) scale(1.04)}
.gel-name{
  display:block;margin-top:6px;font-family:var(--f-fun);font-weight:600;font-size:.8rem;
  color:#fff;text-shadow:0 2px 10px rgba(42,27,94,.8);opacity:.9;
}
.gel .gel-in{width:100%;filter:drop-shadow(0 22px 26px rgba(42,27,94,.34))}
.gel svg{width:100%;height:auto}
.gel .gel-sh{
  display:block;width:62%;height:10px;border-radius:50%;margin-top:4px;
  background:radial-gradient(ellipse,rgba(42,27,94,.4),transparent 70%);
}
.gel .gel-tag{
  position:relative;display:inline-block;margin-top:14px;
  font-family:var(--f-body);font-weight:700;font-size:.76rem;color:#fff;
  background:rgba(42,27,94,.52);border:2px solid rgba(255,255,255,.4);
  padding:3px 11px 4px;border-radius:var(--pill);white-space:nowrap;
}
.gel.g0 .gel-in{transform:rotate(-11deg)}
.gel.g1{z-index:3}
.gel.g2 .gel-in{transform:rotate(6deg)}
.gel.g3 .gel-in{transform:rotate(13deg)}
.anim .gel.g0 .gel-in{animation:bob 6.4s ease-in-out infinite alternate}
.anim .gel.g1 .gel-in{animation:bob 5s ease-in-out infinite alternate;animation-delay:-1.2s}
.anim .gel.g2 .gel-in{animation:bob 7.4s ease-in-out infinite alternate;animation-delay:-2.6s}
.anim .gel.g3 .gel-in{animation:bob 5.8s ease-in-out infinite alternate;animation-delay:-3.8s}

@media (max-width:760px){
  /* four options in a calm 2x2 block, and the design names drop away:
     the tag already says which kind it is, and the hero was crowded. */
  .cast{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;gap:clamp(12px,2.6vh,22px) 10px;
    padding:clamp(24px,4vh,44px) var(--gut) clamp(34px,7vh,66px);
  }
  .gel{width:clamp(96px,30vw,140px)}
  .gel .gel-tag{font-size:.68rem;padding:2px 9px 3px;margin-top:9px}
  .gel-name{display:none}
  .gel.g0 .gel-in{transform:rotate(-8deg)}
  .gel.g1 .gel-in{transform:rotate(5deg)}
  .gel.g2 .gel-in{transform:rotate(-5deg)}
  .gel.g3 .gel-in{transform:rotate(8deg)}
}

/* chooser */
.chooser{position:relative;z-index:5;min-width:0;padding:clamp(8px,1.4vh,16px) var(--gut) clamp(16px,2.6vh,28px)}
.chooser-head{
  max-width:var(--wrap);margin:0 auto 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:center;
}
.chooser-head .now{
  font-family:var(--f-body);font-weight:700;color:#fff;
  background:rgba(42,27,94,.4);border:2px solid rgba(255,255,255,.4);
  padding:6px 14px 7px;border-radius:var(--pill);font-size:.86rem;
}
@media (max-width:900px){ .chooser{display:none} }
.rail{
  max-width:var(--wrap);margin-inline:auto;display:flex;gap:10px;
  overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:center;cursor:pointer;width:clamp(104px,13vw,138px);
  border:3px solid rgba(255,255,255,.55);border-radius:var(--r-m);
  background:rgba(255,255,255,.22);padding:6px;
  transition:transform .24s var(--spring),border-color .22s,box-shadow .22s;
  box-shadow:0 6px 0 rgba(42,27,94,.16);
}
.chip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px}
.chip b{display:block;font-family:var(--f-display);font-weight:750;font-size:.9rem;color:#fff;margin-top:5px;text-shadow:0 1px 6px rgba(42,27,94,.5)}
.chip:hover{transform:translateY(-6px) rotate(-1.5deg);border-color:#fff}
.chip[aria-pressed="true"]{
  border-color:var(--gold);background:rgba(255,197,49,.34);
  box-shadow:0 6px 0 var(--gold-deep),0 14px 24px rgba(255,154,31,.34);
}

/* ============================================================
   WAVE DIVIDERS + SCENES
   ============================================================ */
.wave{display:block;width:100%;height:auto;position:relative;z-index:3}
.scene{position:relative;padding-block:clamp(74px,10vh,128px)}
.scene.cream{background:var(--paper)}
.scene.cream::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 62% at 18% 0%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 70%);pointer-events:none}
.scene.lav{background:var(--paper-2)}
.scene.lav::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 84% 8%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 68%);pointer-events:none}
.scene.night{background:var(--hill-3);color:#FFF8EC}
.scene.night .prose,.scene.night .lede{color:rgba(255,248,236,.84)}
.scene.night .prose strong{color:#fff}
.scene.night h2,.scene.night h3{color:#fff}
.deco{position:absolute;pointer-events:none;z-index:0;opacity:.9}
.deco.cloudy{width:clamp(80px,12vw,170px)}
.anim .deco.cloudy{animation:drift 30s ease-in-out infinite alternate}

.head{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);margin-bottom:clamp(26px,4vh,46px);position:relative;z-index:2}
.head.mid{text-align:center}
.head.mid .prose{margin-inline:auto}
.head .badge{margin-bottom:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;position:relative;z-index:2}
@media (max-width:920px){ .two{grid-template-columns:1fr;gap:32px} }

/* claim word row */
.claims{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.claims span{
  font-family:var(--f-display);font-weight:750;font-size:clamp(1rem,1.7vw,1.32rem);
  padding:9px 18px 11px;border-radius:var(--pill);color:#fff;line-height:1;
  transform:rotate(var(--r,0deg));box-shadow:var(--sh-toy),0 5px 0 rgba(0,0,0,.16);
}
.claims span:nth-child(1){background:var(--g-teal);color:#03362A;--r:-2deg}
.claims span:nth-child(2){background:linear-gradient(140deg,#9EE8FF,#4BC9F0 60%,#2A7FD4);color:#04293D;--r:1.5deg}
.claims span:nth-child(3){background:var(--g-coral);--r:-1deg}
.claims span:nth-child(4){background:var(--g-gold);color:#5B3200;--r:2deg}
.claims span:nth-child(5){background:var(--g-violet);--r:-1.5deg}

/* ============================================================
   CARDS
   ============================================================ */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2;
}
.card{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);
  padding:22px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 7px 0 var(--line),0 18px 34px rgba(42,27,94,.12);
  transition:transform .26s var(--spring),box-shadow .26s;
}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 11px 0 var(--line),0 26px 46px rgba(42,27,94,.18)}
.card .chip-i{
  width:54px;height:54px;border-radius:19px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:750;font-size:1.12rem;color:#fff;
  box-shadow:var(--sh-toy),0 5px 0 rgba(0,0,0,.16);
}
.card h3{font-size:1.24rem}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.card .foot{
  margin-top:auto;padding-top:12px;border-top:2.5px dashed var(--line);
  font-family:var(--f-body);font-weight:600;font-size:.78rem;color:var(--muted);
}
.i-mint{background:var(--g-teal);color:#03362A!important}
.i-candy{background:var(--g-coral)}
.i-sun{background:var(--g-gold);color:#5B3200!important}
.i-grape{background:var(--g-violet)}
.i-sky{background:linear-gradient(140deg,#9EE8FF,#4BC9F0 60%,#2A7FD4);color:#04293D!important}
.card.dark{background:var(--ink);border-color:#3B2C7A;box-shadow:0 7px 0 #3B2C7A,0 18px 34px rgba(42,27,94,.3)}
.card.dark h3{color:#fff}
.card.dark p{color:rgba(255,248,236,.8)}
.card.dark .foot{color:rgba(255,248,236,.55);border-color:rgba(255,248,236,.25)}

/* picture frames */
.frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;margin:0;
  border:5px solid var(--surface);
  box-shadow:0 8px 0 var(--line),0 26px 50px rgba(42,27,94,.24);
  background:var(--surface-2);
}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(1.3) contrast(1.04);transition:transform .6s var(--ease)}
.frame:hover img{transform:scale(1.05)}
.frame.tall img{aspect-ratio:3/4}
.frame figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;color:#fff;
  background:linear-gradient(to top,rgba(42,27,94,.86),transparent);
  font-family:var(--f-body);font-weight:600;font-size:.85rem;
}
.big-num{
  font-family:var(--f-display);font-weight:750;
  font-size:clamp(3.2rem,9vw,5.6rem);line-height:.84;letter-spacing:-.04em;
}

/* ============================================================
   ANATOMY (scroll-scrubbed)
   ============================================================ */
.scrub-track{height:330svh;position:relative}
.scrub-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);
  align-content:center;
  padding:clamp(88px,13vh,132px) 0 clamp(64px,10vh,104px);
}
.scrub-glow{
  position:absolute;top:50%;left:66%;transform:translate(-50%,-50%);
  width:min(80vw,640px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,250,.5),rgba(47,211,155,.14) 46%,transparent 68%);
  filter:blur(10px);
}
.scrub-label{
  position:relative;z-index:3;justify-self:center;margin:0 0 clamp(20px,3.6vh,44px);
  font-family:var(--f-body);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:#2A1B5E;background:var(--g-gold);padding:7px 16px 8px;border-radius:var(--pill);
  box-shadow:var(--sh-toy),0 4px 0 var(--gold-deep);
}
.scrub-inner{
  position:relative;z-index:2;align-self:center;
  max-width:var(--wrap);width:100%;margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(20px,4vw,60px);align-items:center;
}
.scrub-copy{position:relative;min-width:0}
.scrub-heads{position:relative;min-height:2.3em}
.scrub-heads h3{
  position:absolute;left:0;right:0;top:0;color:#fff;
  font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:-.028em;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .6s var(--spring);
  text-shadow:0 4px 0 rgba(91,58,224,.45),0 16px 36px rgba(0,0,0,.45);
}
.scrub-heads h3.on{opacity:1;transform:none;position:relative}
.scrub-cap{position:relative;min-height:7.4em;margin-top:18px}
.scrub-cap article{
  position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .55s var(--spring);pointer-events:none;
}
.scrub-cap article.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.scrub-cap p{
  color:rgba(255,248,236,.88);font-weight:600;max-width:44ch;
  font-size:clamp(.96rem,1.15vw,1.1rem);line-height:1.55;
}
.scrub-stage{position:relative;display:grid;justify-items:center;gap:14px;min-width:0}
.scrub-art{position:relative;width:min(84%,400px);will-change:transform;transition:opacity .3s var(--ease)}
.scrub-art svg{width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.scrub-art .layer{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.scrub-art .layer.on{opacity:1;position:relative}
.scrub-tag{
  position:relative;z-index:3;white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:.9rem;color:#2A1B5E;
  background:#FFF8EC;padding:6px 16px 7px;border-radius:var(--pill);
  box-shadow:0 4px 0 rgba(0,0,0,.2);
}
.scrub-dots{display:none}
.scrub-dots-off{position:absolute;top:50%;right:clamp(12px,2.4vw,28px);transform:translateY(-50%);display:grid;gap:12px;z-index:3}
.scrub-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,248,236,.3);transition:all .3s var(--spring)}
.scrub-dots i.on{background:var(--gold);transform:scale(1.7);box-shadow:0 0 16px var(--gold)}
@media (max-width:900px){
  .scrub-track{height:320svh}
  .scrub-dots{display:none}
  .scrub-inner{grid-template-columns:1fr;gap:clamp(16px,3vh,30px)}
  .scrub-stage{order:-1}
  .scrub-art{width:min(70%,260px)}
  .scrub-heads{min-height:2.6em}
  .scrub-cap{min-height:9.5em;margin-top:12px}
  .scrub-glow{left:50%}
}

/* ============================================================
   STUDIO
   ============================================================ */
.studio-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(310px,.98fr);
  gap:clamp(20px,3vw,40px);max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  align-items:start;position:relative;z-index:2;
}
@media (max-width:1000px){ .studio-grid{grid-template-columns:1fr} }

.stage{
  position:sticky;top:86px;border-radius:var(--r-xl);overflow:hidden;
  border:5px solid var(--surface);background:var(--ink);
  box-shadow:0 9px 0 var(--line),0 30px 56px rgba(42,27,94,.28);
}
@media (max-width:1000px){ .stage{position:static} }
.stage-scene{position:relative;aspect-ratio:4/3.2;display:grid;place-items:center;overflow:hidden}
.stage-scene img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.5) contrast(1.04) blur(1px) brightness(.95);transform:scale(1.05);
}
.stage-scene .vig{
  position:absolute;inset:0;
  background:radial-gradient(85% 60% at 50% 42%,transparent 26%,rgba(42,27,94,.66) 100%);
}
.stage-hills{position:absolute;left:0;right:0;bottom:0;width:100%}
.stage-face{position:relative;z-index:3;width:86%;margin-bottom:6%}
.stage-pair{display:flex;gap:clamp(14px,5%,42px);align-items:center;justify-content:center}
.stage-pair .pw{width:42%;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
.stage-pair svg{width:100%;height:auto}
.anim .stage-pair .pw:first-child{animation:bob 5.6s ease-in-out infinite alternate}
.anim .stage-pair .pw:last-child{animation:bob 6.8s ease-in-out infinite alternate;animation-delay:-1.6s}
.stage-face svg{width:100%;height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.anim .stage-face{animation:bob 5.4s ease-in-out infinite alternate}
.stage-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;background:var(--surface);border-top:3px solid var(--line);
}
.stage-bar .nm{font-family:var(--f-display);font-weight:750;font-size:1.18rem;line-height:1.1}
.stage-bar .mt{font-family:var(--f-body);font-weight:600;font-size:.78rem;color:var(--muted)}
.stage-bar .spacer{margin-left:auto}
.dice{
  border:3px solid var(--line);background:var(--surface-2);border-radius:var(--pill);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--violet-deep);
  box-shadow:0 4px 0 var(--line);transition:transform .22s var(--spring),box-shadow .2s;
}
.dice:hover{transform:translateY(-3px) rotate(-18deg);box-shadow:0 7px 0 var(--line)}
.dice:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}

.panel{display:grid;gap:14px}
.tabs{display:flex;gap:5px;background:var(--surface);border:3px solid var(--line);border-radius:var(--pill);padding:6px;box-shadow:0 5px 0 var(--line)}
.tabs button{
  flex:1;padding:11px 6px 12px;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;
  font-family:var(--f-display);font-weight:750;font-size:.95rem;color:var(--muted);line-height:1;
  transition:background .2s,color .2s,transform .2s var(--spring);white-space:nowrap;
}
.tabs button[aria-selected="true"]{background:var(--g-violet);color:#fff;box-shadow:var(--sh-toy),0 3px 0 var(--violet-deep)}
.tabs button:hover:not([aria-selected="true"]){color:var(--violet-deep);transform:translateY(-2px)}

.tray{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);padding:16px;
  box-shadow:0 7px 0 var(--line),0 16px 30px rgba(42,27,94,.1);
}
.tray-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.tray-head h3{font-size:1.1rem}
.tray-head .count{font-family:var(--f-body);font-weight:600;font-size:.76rem;color:var(--muted)}
.opts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;
  max-height:300px;overflow-y:auto;padding:3px 4px 3px 3px;
}
.opts::-webkit-scrollbar{width:9px}
.opts::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.opt{
  cursor:pointer;border:3px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--paper-2);padding:0;text-align:left;
  transition:transform .2s var(--spring),border-color .2s,box-shadow .2s;
}
.opt:hover{transform:translateY(-4px) rotate(-1.5deg);border-color:var(--line-2);box-shadow:0 6px 0 var(--line)}
.opt .art{width:100%;aspect-ratio:1;display:block;object-fit:cover;background:var(--surface-2)}
.opt .art svg{width:100%;height:100%;display:block}
.opt span{display:block;padding:5px 7px 7px;font-family:var(--f-display);font-weight:750;font-size:.76rem;line-height:1.15}
.opt[aria-pressed="true"]{border-color:var(--coral);box-shadow:0 6px 0 var(--coral-deep)}
.opt[aria-pressed="true"] span{background:var(--g-coral);color:#fff}

.upload{
  border:4px dashed var(--line-2);border-radius:var(--r-l);padding:26px 18px;text-align:center;
  display:grid;gap:11px;place-items:center;background:var(--paper-2);
}
.upload p{font-size:.9rem;color:var(--ink-2);max-width:36ch}
.upload input{display:none}
.note{
  display:flex;gap:10px;padding:14px;border-radius:var(--r-m);
  background:var(--paper-2);border:3px solid var(--gold);
  font-size:.86rem;line-height:1.45;color:var(--ink-2);
}
.note svg{flex:none;margin-top:2px;color:var(--gold-deep)}
.note b{color:var(--ink)}

/* packs */
.packs{display:grid;gap:11px}
.pack{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:15px;border:3px solid var(--line);border-radius:var(--r-l);
  background:var(--paper-2);cursor:pointer;text-align:left;
  box-shadow:0 5px 0 var(--line);
  transition:transform .22s var(--spring),box-shadow .22s,border-color .22s;
}
.pack:hover{transform:translateY(-4px);box-shadow:0 9px 0 var(--line)}
.pack[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 7px 0 var(--teal-deep);background:color-mix(in srgb,var(--teal) 14%,var(--surface))}
.pack .qty{
  font-family:var(--f-display);font-weight:750;font-size:2.5rem;line-height:.82;
  color:var(--teal-deep);font-variant-numeric:tabular-nums;
}
.pack b{display:block;font-family:var(--f-display);font-weight:750;font-size:1.1rem;line-height:1.15}
.pack small{display:block;font-family:var(--f-body);font-weight:600;font-size:.76rem;color:var(--muted)}
.pack .price{text-align:right}
.pack .price b{font-size:1.3rem}

.toggle{display:flex;gap:5px;padding:6px;background:var(--paper-2);border:3px solid var(--line);border-radius:var(--pill);margin-top:12px}
.toggle button{
  flex:1;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;padding:11px 8px;
  font-family:var(--f-display);font-weight:750;font-size:.95rem;color:var(--muted);line-height:1.15;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--spring);
}
.toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--line-2)}
.toggle button:hover:not([aria-pressed="true"]){transform:translateY(-2px);color:var(--ink)}
.toggle button em{display:block;font-style:normal;font-family:var(--f-body);font-weight:700;font-size:.7rem;color:var(--coral-deep);margin-top:3px}

.total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px}
.total .amt{font-family:var(--f-display);font-weight:750;font-size:clamp(2.2rem,5.4vw,3rem);line-height:.86;font-variant-numeric:tabular-nums}
.total .per{font-family:var(--f-body);font-weight:600;font-size:.78rem;color:var(--muted);text-align:right;line-height:1.45}

/* ============================================================
   FOR TEAMS
   ============================================================ */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:14px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2;
}
.logo-card{
  border:3px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface);
  box-shadow:0 6px 0 var(--line);
  transition:transform .26s var(--spring),box-shadow .26s;
}
.logo-card:hover{transform:translateY(-7px) rotate(1deg);box-shadow:0 11px 0 var(--line),0 22px 38px rgba(42,27,94,.16)}
.logo-card .art{aspect-ratio:4/3;display:grid;place-items:center;padding:14px;background:var(--paper-2)}
.logo-card .cap{padding:11px 13px 14px;border-top:3px solid var(--line)}
.logo-card .cap b{display:block;font-family:var(--f-display);font-weight:750;font-size:.95rem}
.logo-card .cap small{font-family:var(--f-body);font-weight:600;font-size:.72rem;color:var(--muted)}

.tier-scroll{overflow-x:auto;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) 8px;position:relative;z-index:2}
table.tiers{border-collapse:separate;border-spacing:0 8px;width:100%;min-width:680px;font-size:.9rem}
table.tiers th{
  text-align:left;padding:8px 14px;font-family:var(--f-body);font-weight:700;font-size:.74rem;
  color:var(--muted);white-space:nowrap;
}
table.tiers td{background:var(--surface);padding:14px;vertical-align:middle;border-block:3px solid var(--line)}
table.tiers td:first-child{border-left:3px solid var(--line);border-radius:var(--r-m) 0 0 var(--r-m)}
table.tiers td:last-child{border-right:3px solid var(--line);border-radius:0 var(--r-m) var(--r-m) 0}
table.tiers td b{font-family:var(--f-display);font-weight:750;font-size:1rem}
table.tiers td.q{font-family:var(--f-body);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tiers td.u{font-family:var(--f-display);font-weight:750;font-size:1.2rem;white-space:nowrap;color:var(--violet-deep)}
table.tiers tr.star td{background:color-mix(in srgb,var(--gold) 16%,var(--surface));border-color:var(--gold)}
table.tiers tr.star td.u{color:var(--gold-deep)}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:var(--surface);border:4px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,3vw,34px);box-shadow:0 9px 0 var(--line),0 24px 44px rgba(42,27,94,.14);
  position:relative;z-index:2;
}
.form .full{grid-column:1/-1}
@media (max-width:660px){ .form{grid-template-columns:1fr} }
.field{display:grid;gap:6px}
.field label{font-family:var(--f-body);font-weight:700;font-size:.78rem;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.96rem;font-weight:600;color:var(--ink);
  padding:12px 14px;border:3px solid var(--line);border-radius:var(--r-s);
  background:var(--paper-2);width:100%;font-family:var(--f-body);
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--violet)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin-inline:auto;padding-inline:var(--gut);display:grid;gap:11px;position:relative;z-index:2}
details{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 6px 0 var(--line);overflow:hidden;
}
summary{
  cursor:pointer;list-style:none;padding:17px 52px 18px 20px;position:relative;
  font-family:var(--f-display);font-weight:750;font-size:clamp(1.04rem,1.6vw,1.22rem);line-height:1.25;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--g-violet);color:#fff;
  font-family:var(--f-display);font-weight:750;font-size:1.1rem;line-height:27px;text-align:center;
  transition:transform .3s var(--spring);
}
details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
details .body{padding:0 20px 18px;color:var(--ink-2);font-size:.95rem;line-height:1.62}
details .body p + p{margin-top:.75em}

/* ============================================================
   BAG
   ============================================================ */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(42,27,94,.62);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(410px,100%);
  background:var(--paper);border-left:4px solid var(--line);
  transform:translateX(102%);transition:transform .44s var(--spring);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:3px solid var(--line)}
.drawer-head h2{font-size:1.3rem;margin-right:auto}
.x{
  border:3px solid var(--line);background:var(--surface);border-radius:var(--pill);
  width:40px;height:40px;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 0 var(--line);
  transition:transform .2s var(--spring);
}
.x:hover{transform:translateY(-2px) rotate(90deg)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px;display:grid;gap:12px;align-content:start}
.line{
  display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;
  padding:12px;border:3px solid var(--line);border-radius:var(--r-m);background:var(--surface);
}
.line .thumb{width:62px;height:44px;display:grid;place-items:center}
.line .thumb svg{width:100%;height:auto}
.line b{display:block;font-family:var(--f-display);font-weight:750;font-size:.98rem}
.line small{font-family:var(--f-body);font-weight:600;font-size:.74rem;color:var(--muted);display:block}
.line .rm{border:0;background:transparent;color:var(--muted);cursor:pointer;font-family:var(--f-fun);font-size:.74rem;text-decoration:underline;padding:2px 0}
.line .rm:hover{color:var(--coral-deep)}
.drawer-foot{padding:16px 20px;border-top:3px solid var(--line);display:grid;gap:12px}
.empty{color:var(--muted);text-align:center;padding:34px 10px;font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--on-dark);padding-block:clamp(44px,7vh,80px) 28px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
@media (max-width:780px){ .foot-grid{grid-template-columns:1fr;gap:26px} }
footer h4{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:rgba(255,248,236,.55);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.95rem;font-weight:600}
footer ul a{color:rgba(255,248,236,.84)}
footer ul a:hover{color:var(--gold)}
.foot-brand{
  font-family:var(--f-display);font-weight:750;font-size:clamp(3.6rem,14vw,10rem);
  line-height:.78;letter-spacing:-.05em;color:rgba(255,248,236,.09);
  margin:26px auto 0;padding-inline:var(--gut);max-width:var(--wrap);position:relative;z-index:2;
}

.toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,150%);z-index:120;
  background:var(--g-violet);color:#fff;padding:14px 24px;border-radius:var(--pill);
  font-family:var(--f-display);font-weight:750;font-size:.97rem;
  box-shadow:var(--sh-toy),0 7px 0 var(--violet-deep),0 20px 34px rgba(42,27,94,.34);
  transition:transform .4s var(--spring);max-width:calc(100vw - 32px);text-align:center;
}
.toast.on{transform:translate(-50%,0)}

/* ============================================================
   MARQUEE — scroll-reactive ticker
   ============================================================ */
.marq{
  background:var(--ink);color:var(--paper);overflow:hidden;
  padding:14px 0;border-block:4px solid var(--violet);position:relative;z-index:5;
}
.marq-in{display:flex;gap:0;white-space:nowrap;will-change:transform}
.marq-in span{
  font-family:var(--f-display);font-weight:750;font-size:clamp(1.1rem,2.2vw,1.7rem);
  letter-spacing:-.01em;padding-inline:.5em;display:inline-flex;align-items:center;gap:.5em;
}
.marq-in span i{color:var(--gold);font-style:normal;font-size:.8em}
.marq-in span:nth-child(3n+2){color:var(--coral)}
.marq-in span:nth-child(3n+3){color:var(--teal)}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,3vw,36px);position:relative;z-index:2}
.stat{display:grid;gap:8px}
.stat .fun{font-size:.87rem;color:var(--ink-2);line-height:1.45;max-width:26ch;font-weight:500}

/* ============================================================
   CATEGORIES — pinned, scroll-driven: city / country / team
   ============================================================ */
.cats{position:relative;background:var(--hill-3)}
.cats-track{height:380svh;position:relative}
.cats-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);
  align-content:center;
  padding:clamp(88px,13vh,132px) 0 clamp(64px,10vh,104px);
}

.cats-bg{position:absolute;inset:0;z-index:0}
.cbg{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.cbg.on{opacity:1}
.cbg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.55) contrast(1.08) brightness(.86);transform:scale(1.08)}

.cbg.kitbg span{
  position:absolute;inset:-10% -30%;
  background:repeating-linear-gradient(97deg,#D50032 0 7%,#F7F7F7 7% 14%);
}

@keyframes kitdrift{from{transform:translateX(0)}to{transform:translateX(14%)}}
.cbg.kitbg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 30% 30%,rgba(255,255,255,.35),transparent 70%);
}
.cbg.ownbg span{
  position:absolute;inset:-6%;
  background:
    radial-gradient(52% 46% at 22% 26%,rgba(255,157,191,.85),transparent 68%),
    radial-gradient(48% 44% at 78% 32%,rgba(255,214,120,.78),transparent 66%),
    radial-gradient(60% 52% at 54% 84%,rgba(120,232,208,.72),transparent 70%),
    linear-gradient(160deg,#6B4FD8,#2A1B5E 70%);
}
.cbg.ownbg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 40% 34%,rgba(255,255,255,.28),transparent 72%);
}

.cats-veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(78% 78% at 14% 46%,rgba(23,15,54,.95) 0%,rgba(23,15,54,.72) 42%,transparent 76%),
    linear-gradient(to top,rgba(23,15,54,.88) 0%,rgba(23,15,54,.2) 46%,rgba(23,15,54,.5) 100%);
}

.cats-inner{
  position:relative;z-index:3;align-self:center;width:100%;
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;gap:clamp(20px,4vw,60px);
}
.cats-copy{position:relative}
.cats-copy article{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-38%) scale(.96);opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease),transform .7s var(--spring);
}
.cats-copy article.on{transform:translateY(-50%);opacity:1;pointer-events:auto}
.cats-kicker{
  font-family:var(--f-body);font-weight:700;font-size:.76rem;letter-spacing:.18em;
  margin-bottom:12px;text-transform:uppercase;color:rgba(255,248,236,.62);
}
.cats-eg{
  font-family:var(--f-fun);font-weight:600;font-size:clamp(1.1rem,1.8vw,1.5rem);
  margin-top:14px;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.cats-label{
  position:relative;z-index:5;justify-self:center;white-space:nowrap;
  margin:0 0 clamp(20px,3.6vh,44px);
  font-family:var(--f-body);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,248,236,.9);background:rgba(23,15,54,.72);
  border:2px solid rgba(255,255,255,.28);padding:7px 15px 8px;border-radius:var(--pill);
  margin:0;
}

.cats-copy article:nth-child(1) .cats-eg{color:#5FE8DA}
.cats-copy article:nth-child(2) .cats-eg{color:#FFD25C}
.cats-copy article:nth-child(3) .cats-eg{color:#FF9DBF}
.cats-copy article:nth-child(4) .cats-eg{color:#C9B6FF}
.cats-hint{transition:opacity .5s var(--ease)}
.cats-h{
  font-family:var(--f-display);font-weight:800;color:#fff;
  font-size:clamp(2.9rem,7.6vw,6rem);line-height:.9;letter-spacing:-.032em;
  text-shadow:0 4px 0 rgba(91,58,224,.5),0 18px 40px rgba(0,0,0,.5);
}
.cats-p{
  margin-top:14px;max-width:38ch;color:rgba(255,248,236,.86);
  font-weight:600;font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.5;
}
.cats-btn{margin-top:24px}

.cats-stage{position:relative;display:grid;place-items:center;height:100%}
.cats-glow{
  position:absolute;width:min(78vw,600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,250,.6),rgba(47,211,155,.2) 46%,transparent 68%);
  filter:blur(14px);
}
.cats-patch{position:relative;width:min(78%,430px);will-change:transform}
.cats-patch svg{width:100%;height:auto;filter:drop-shadow(0 28px 40px rgba(0,0,0,.55))}
.cats-patch .layer{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.cats-patch .layer.on{opacity:1;position:relative}

.cats-nav{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:clamp(20px,4vh,44px);
  display:flex;gap:8px;list-style:none;margin:0;padding:0;
}
.cats-nav button{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  border:2px solid rgba(255,255,255,.3);background:rgba(23,15,54,.44);
  color:rgba(255,248,236,.86);
  padding:8px 15px 9px;border-radius:var(--pill);
  font-family:var(--f-display);font-weight:800;font-size:.88rem;line-height:1;
  transition:transform .22s var(--spring),border-color .22s,background .22s,color .22s;
}
.cats-nav button span{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .3s,transform .3s var(--spring);
}
.cats-nav button:hover{transform:translateY(-3px);color:#fff;border-color:rgba(255,255,255,.65)}
.cats-nav button[aria-current="true"]{background:var(--g-gold);color:#2A1B5E;border-color:transparent}
.cats-nav button[aria-current="true"] span{background:#2A1B5E;transform:scale(1.4)}

.cats-hint{
  position:absolute;z-index:4;right:var(--gut);bottom:clamp(22px,4vh,46px);
  font-family:var(--f-fun);font-weight:600;font-size:.82rem;color:rgba(255,248,236,.6);
  display:flex;align-items:center;gap:8px;
}
.anim .cats-hint svg{animation:nudgeY 1.3s var(--ease) infinite alternate}
@keyframes nudgeY{from{transform:translateY(0)}to{transform:translateY(6px)}}

@media (max-width:900px){
  .cats-track{height:400svh}
  /* three flow rows: the label clears the menu, the copy sits under it,
     and the patch and pills get their own space instead of overlapping. */
  .cats-pin{
    grid-template-rows:auto 1fr auto;align-content:stretch;row-gap:clamp(10px,2vh,20px);
    padding:calc(clamp(74px,11vh,96px) + env(safe-area-inset-top,0px)) 0 clamp(14px,2.6vh,24px);
  }
  .cats-pin{padding-bottom:calc(clamp(14px,2.6vh,24px) + var(--wave-h))}
  .cats-label{align-self:start}
  .cats-inner{
    grid-template-columns:1fr;grid-template-rows:1fr auto;
    align-content:stretch;align-items:start;gap:clamp(8px,1.6vh,18px);padding-top:0;
  }
  .cats-copy{min-height:clamp(258px,42vh,376px);align-self:start}
  .cats-copy article{top:0;transform:translateY(8%) scale(.96)}
  .cats-copy article.on{transform:translateY(0)}
  .cats-h{font-size:clamp(2.5rem,11vw,3.6rem)}
  .cats-p{margin-top:10px;font-size:.95rem;line-height:1.45}
  .cats-btn{margin-top:16px}
  .cats-stage{height:auto;align-self:end;margin-top:clamp(22px,4.4vh,44px)}
  .cats-patch{width:min(52%,196px)}
  .cats-nav{
    position:relative;left:auto;bottom:auto;transform:none;
    justify-content:center;flex-wrap:wrap;gap:6px;align-self:end;
  }
  .cats-nav button{padding:7px 12px 8px;font-size:.8rem;gap:6px}
  .cats-hint{display:none}
}
@media (max-width:900px) and (max-height:730px){
  .cats-p{display:none}
  .cats-copy{min-height:212px}
  .cats-patch{width:min(48%,180px)}
}

/* curved scene dividers: zero-height, wave overlaps the section above */
.divider{position:relative;z-index:6;height:0;line-height:0;pointer-events:none}
.divider svg{
  display:block;width:101%;margin-left:-.5%;
  height:var(--wave-h);position:relative;top:calc(-1 * var(--wave-h) + 1px);
}
.divider.flip svg{transform:scaleX(-1)}

/* ============================================================
   POSTCARDS
   ============================================================ */
.postcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;position:relative;z-index:2}
.postcards .frame:nth-child(odd){transform:rotate(-1.4deg)}
.postcards .frame:nth-child(even){transform:rotate(1.4deg)}
.anim .postcards .frame.rv.in:nth-child(odd){transform:rotate(-1.4deg)}
.anim .postcards .frame.rv.in:nth-child(even){transform:rotate(1.4deg)}
.postcards .frame{transition:transform .3s var(--spring),box-shadow .3s}
.postcards .frame:hover{transform:rotate(0) translateY(-7px) scale(1.02)!important;box-shadow:0 12px 0 var(--line),0 32px 56px rgba(42,27,94,.26)}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;height:5px;width:0;z-index:200;
  background:var(--g-coral);border-bottom-right-radius:5px;
  box-shadow:0 0 14px rgba(255,93,143,.6);transition:width .08s linear;
}

/* ============================================================
   HERO CTAS
   ============================================================ */
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px)}

/* ============================================================
   HORIZONTAL SCROLL GALLERY
   ============================================================ */
.hs-track{height:330svh;position:relative}
.hs-pin{
  position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;align-content:stretch;
  gap:clamp(14px,2.6vh,28px);overflow:hidden;z-index:2;
  /* clear the sticky menu rather than centring underneath it */
  padding-top:calc(clamp(100px,12.5vh,124px) + env(safe-area-inset-top,0px));
}
.hs-head{align-self:start}
.hs-row{align-self:center}
.hs-head{padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto;width:100%}
.hs-row{display:flex;gap:clamp(14px,2vw,26px);padding-inline:var(--gut);will-change:transform;width:max-content;backface-visibility:hidden}
.hs-card{
  appearance:none;padding:0;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left;display:block;
  flex:none;width:clamp(210px,27vw,330px);
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  border:5px solid var(--surface);box-shadow:0 8px 0 var(--line),0 24px 44px rgba(42,27,94,.22);
  transition:transform .3s var(--spring);
}
.hs-card:hover,.hs-card:focus-visible{transform:translateY(-8px) scale(1.02)}
.hs-card:active{transform:translateY(-2px)}
.hs-card .ph{position:relative;overflow:hidden;height:min(48vh,430px)}
.hs-card .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.4) contrast(1.05);transition:transform .7s var(--ease)}
.hs-card:hover .ph img{transform:scale(1.06)}
.hs-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,27,94,.9),rgba(42,27,94,.05) 52%)}
.hs-card .gelover{position:absolute;left:17%;top:33%;width:66%;--rot:-6deg;transform:rotate(-6deg);z-index:3;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5))}
.anim .hs-card .gelover{animation:bob 6s ease-in-out infinite alternate}
.hs-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:18px 118px 18px 18px;display:block}
.hs-card .cap b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:#fff;line-height:1.05}
.hs-card .cap small{font-family:var(--f-fun);font-weight:500;font-size:.78rem;color:rgba(255,248,236,.78)}
.hs-hint{
  padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto;width:100%;
  font-family:var(--f-fun);font-weight:600;font-size:.82rem;color:var(--muted);
}
@media (max-width:700px){
  .hs-track{height:300svh}
  .hs-pin{gap:clamp(12px,2.2vh,20px);padding-top:calc(clamp(88px,11.5vh,104px) + env(safe-area-inset-top,0px))}
  .hs-card{width:clamp(238px,66vw,300px)}
  .hs-card .ph{height:min(50vh,420px)}
  .hs-card .gelover{top:38%}
}

/* word-by-word headline reveal */
.anim .w{display:inline-block;opacity:.001;transform:translateY(24px) rotate(2deg);transition:opacity .5s var(--ease),transform .62s var(--spring)}
.anim .in .w,.anim .w.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .anim .w{opacity:1!important;transform:none!important} }

/* moment cards: category CTA + team-colour background */
.moment .mcta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--f-display);font-weight:800;font-size:.92rem;color:#2A1B5E;
  background:var(--g-gold);padding:9px 16px 10px;border-radius:var(--pill);
  box-shadow:var(--sh-toy),0 4px 0 var(--gold-deep);
  transition:transform .22s var(--spring),box-shadow .22s;
}
.moment:hover .mcta{transform:translateY(-3px);box-shadow:var(--sh-toy),0 7px 0 var(--gold-deep)}
.moment:hover .mcta svg{animation:nudge .7s var(--ease) infinite alternate}
@keyframes nudge{from{transform:translateX(0)}to{transform:translateX(5px)}}
.kit-ph{position:relative;background:#D50032;overflow:hidden}
.kit-bg{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#D50032 0 11%,#F7F7F7 11% 22%);
}
.kit-ph::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(70% 50% at 50% 34%,rgba(255,255,255,.34),transparent 70%);
}

/* button life: a slow gloss sweep, and a nudge on the hero CTA */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translate3d(-180%,0,0) skewX(-18deg);
}
.anim .btn::after{animation:sweep 4.6s var(--ease) infinite}
.anim .btn.cream::after{animation-delay:.9s}
@keyframes sweep{0%{transform:translate3d(-180%,0,0) skewX(-18deg)}38%,100%{transform:translate3d(340%,0,0) skewX(-18deg)}}
.hero-cta .btn:first-child{animation:pulse 3.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-cta .btn:first-child:hover{animation:none}
@media (prefers-reduced-motion: reduce){ .btn::after{display:none} .hero-cta .btn:first-child{animation:none} }

/* chips + options: livelier hover */
.chip:focus-visible{transform:translateY(-6px)}
.opt:active{transform:translateY(1px)}
.tabs button:active{transform:translateY(2px)}

/* ============================================================
   NEW: plain facts row, paired frames, rail swatches, flag search
   ============================================================ */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,2.4vw,26px);position:relative;z-index:2}
.fact{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);
  padding:18px 18px 20px;box-shadow:0 6px 0 var(--line);
  transition:transform .26s var(--spring),box-shadow .26s;
}
.fact:hover{transform:translateY(-5px);box-shadow:0 10px 0 var(--line)}
.fact-k{font-family:var(--f-fun);font-weight:500;font-size:.78rem;color:var(--muted)}
.fact-v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.02;letter-spacing:-.03em;margin:2px 0 8px}
.fact:nth-child(1) .fact-v{color:var(--violet-deep)}
.fact:nth-child(2) .fact-v{color:var(--coral-deep)}
.fact:nth-child(3) .fact-v{color:var(--teal-deep)}
.fact:nth-child(4) .fact-v{color:var(--gold-deep)}
.fact-n{font-size:.86rem;color:var(--ink-2);line-height:1.45;font-weight:600}

.pair-frames{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair-frames .frame img{aspect-ratio:3/4}
@media (max-width:520px){ .pair-frames{grid-template-columns:1fr} .pair-frames .frame img{aspect-ratio:16/10} }

.chip.chip-art{background:rgba(255,255,255,.28)}
.chip .swatch{display:block;width:100%;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:#fff}
.chip .swatch svg{width:100%;height:100%;display:block}

.tray-search{margin-bottom:12px}
.tray-search input{
  width:100%;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink);
  padding:11px 14px;border:3px solid var(--line);border-radius:var(--pill);
  background:var(--paper-2);font-family:var(--f-body);
}
.tray-search input:focus{outline:0;border-color:var(--violet)}
.opts{max-height:326px}

.card-sub{
  font-family:var(--f-fun);font-weight:500;font-size:.82rem;color:var(--violet-deep);
  margin-top:-4px;
}
.card.dark .card-sub{color:var(--gold)}

.hs-go{
  position:absolute;right:14px;bottom:16px;z-index:5;
  font-family:var(--f-display);font-weight:800;font-size:.82rem;color:#2A1B5E;
  background:var(--g-gold);padding:7px 14px 8px;border-radius:var(--pill);
  box-shadow:var(--sh-toy),0 3px 0 var(--gold-deep);
  opacity:0;transform:translateY(6px);transition:opacity .24s var(--ease),transform .28s var(--spring);
}
.hs-card:hover .hs-go,.hs-card:focus-visible .hs-go{opacity:1;transform:none}
@media (hover:none){ .hs-go{opacity:1;transform:none} }

/* ============================================================
   WAVE CLEARANCE
   A divider's crest hangs up over the section above it, so any
   section that precedes one reserves that height at the bottom.
   ============================================================ */
.pre-wave{padding-bottom:calc(clamp(74px,10vh,128px) + var(--wave-h))}
.facts-scene{padding-block:clamp(44px,7vh,76px)}
.facts-scene.pre-wave{padding-bottom:calc(clamp(44px,7vh,76px) + var(--wave-h))}

/* the pinned sections keep their controls above the crest */
.cats-pin{padding-bottom:calc(clamp(64px,10vh,104px) + var(--wave-h))}
.cats-nav{bottom:calc(clamp(20px,4vh,44px) + var(--wave-h))}
.cats-hint{bottom:calc(clamp(22px,4vh,46px) + var(--wave-h))}
.scrub-pin{padding-bottom:calc(clamp(64px,10vh,104px) + var(--wave-h))}
.hs-pin{padding-bottom:calc(clamp(10px,2vh,22px) + var(--wave-h))}
@media (max-width:900px){
  .cats-nav{bottom:calc(18px + var(--wave-h))}
}

/* ============================================================
   MOBILE FIXES: product scroll + gallery pick button
   ============================================================ */
@media (max-width:900px){
  /* the pinned product scroll was centring a short block inside a
     full-viewport grid, which left a dead band under the copy.
     Distribute the rows instead and give the leftover space to a
     progress rail that means something. */
  .scrub-pin{
    position:sticky;grid-template-rows:auto auto auto;
    align-content:center;justify-items:center;row-gap:clamp(30px,5.6vh,54px);
    padding:clamp(74px,10.5vh,98px) 0 clamp(12px,2.2vh,22px);
  }
  .scrub-pin{padding-bottom:calc(clamp(12px,2.2vh,22px) + var(--wave-h))}
  .scrub-label{margin-bottom:0}
  .scrub-inner{align-self:center;row-gap:clamp(10px,2vh,20px)}
  .scrub-stage{gap:12px;margin-top:clamp(4px,1.2vh,14px)}
  .scrub-art{width:min(76%,270px)}
  .scrub-heads{min-height:2.2em;text-align:center}
  .scrub-heads h3{font-size:clamp(1.58rem,7.8vw,2.24rem)}
  .scrub-cap{min-height:7.6em;margin-top:10px;text-align:center}
  .scrub-cap p{font-size:1rem;line-height:1.52;max-width:38ch;margin-inline:auto}
  .scrub-copy{text-align:center}
  .scrub-glow{width:min(96vw,460px);top:34%}
}
/* the horizontal step rail: it closes the dead band at the bottom of the
   pinned product scroll, on the phone and on the desktop alike */
.scrub-steps{
  display:grid;grid-auto-flow:column;gap:0;align-items:start;
  position:relative;z-index:3;width:min(100%,520px);
  margin:clamp(34px,5.4vh,74px) auto 0;padding-inline:var(--gut);
}
.scrub-steps::before{
  content:"";position:absolute;left:calc(var(--gut) + 15%);right:calc(var(--gut) + 15%);top:10px;
  height:3px;border-radius:2px;background:rgba(255,248,236,.2);
}
.scrub-steps i{
  position:relative;display:grid;justify-items:center;gap:10px;
  font-family:var(--f-fun);font-weight:600;font-size:.82rem;
  color:rgba(255,248,236,.5);transition:color .3s var(--ease);
}
.scrub-steps i::before{
  content:"";width:23px;height:23px;border-radius:50%;
  background:#3B2A7A;box-shadow:inset 0 0 0 3px rgba(255,248,236,.22);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .4s var(--spring);
}
.scrub-steps i.done{color:rgba(255,248,236,.82)}
.scrub-steps i.done::before{background:var(--gold-deep);box-shadow:inset 0 0 0 3px rgba(255,197,49,.7)}
.scrub-steps i.on{color:#FFF8EC}
.scrub-steps i.on::before{
  background:var(--gold);box-shadow:inset 0 0 0 3px var(--gold-deep),0 0 18px rgba(255,197,49,.6);
  transform:scale(1.18);
}
@media (max-width:900px){
  .scrub-steps{width:min(100%,340px);margin-top:clamp(28px,5vh,56px)}
  .scrub-steps i{gap:8px;font-size:.7rem}
  .scrub-steps i::before{width:21px;height:21px}
  .scrub-steps::before{left:calc(var(--gut) + 14%);right:calc(var(--gut) + 14%);top:9px}
}
/* the pick button collided with the card caption on phones */
@media (max-width:700px){
  .hs-card .cap{padding:16px 66px 16px 16px}
  .hs-go{
    right:12px;bottom:12px;width:46px;height:46px;padding:0;
    display:grid;place-items:center;font-size:0;border-radius:50%;
    box-shadow:var(--sh-toy),0 4px 0 var(--gold-deep);
  }
  .hs-go::after{
    content:"";width:15px;height:15px;font-size:0;
    background:
      linear-gradient(#2A1B5E,#2A1B5E) center/13px 3px no-repeat,
      linear-gradient(#2A1B5E,#2A1B5E) right 1px center/3px 11px no-repeat;
    clip-path:polygon(0 38%,62% 38%,62% 8%,100% 50%,62% 92%,62% 62%,0 62%);
    background:#2A1B5E;
  }
}

/* ============================================================
   PRE-ORDER: THE BOARDING PASS
   ============================================================ */
/* the scrim's blur is only attached while the dialog is open: a
   full-screen backdrop-filter sitting in the page costs a
   composite every frame even at zero opacity. */
.pass-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(24,13,58,.72);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .38s var(--ease),visibility 0s linear .38s;
}
.pass-scrim.on{opacity:1;pointer-events:auto;visibility:visible;backdrop-filter:blur(2px);transition-delay:0s}
.pass-wrap{
  position:fixed;inset:0;z-index:71;overflow-y:auto;overscroll-behavior:contain;
  display:grid;place-items:center;padding:clamp(12px,3vh,40px) clamp(12px,3vw,32px);
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(22px) scale(.98);
  transition:opacity .34s var(--ease),transform .46s var(--spring),visibility 0s linear .34s;
}
.pass-wrap.on{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.pass-shell{
  position:relative;width:100%;max-width:1060px;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(16px,2.4vw,34px);align-items:start;
}
.pass-x{
  position:absolute;top:-6px;right:-6px;z-index:6;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#2A1B5E;background:#FFF8EC;
  box-shadow:0 5px 0 rgba(0,0,0,.24),0 12px 26px rgba(0,0,0,.3);
  transition:transform .26s var(--spring)}
.pass-x:hover{transform:translateY(-2px) rotate(90deg)}

/* --- the pass itself --- */
.pass-stage{position:relative;perspective:1200px;display:grid;gap:12px;justify-items:center}
.pass-card{
  --pa:#7B5CFA;--pb:#2FD39B;--pink:#2A1B5E;
  position:relative;width:100%;max-width:430px;
  display:grid;grid-template-rows:1fr auto auto;
  border-radius:24px;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--pa),var(--pb));
  box-shadow:0 26px 60px rgba(24,13,58,.5),inset 0 0 0 1px rgba(255,255,255,.22);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),box-shadow .4s var(--ease);
}
.pass-card::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.26;
  background-image:var(--pshot,none);background-size:cover;background-position:center;
  mix-blend-mode:luminosity;
}
.pass-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 18% 8%,rgba(255,255,255,.34),transparent 56%);
}
.pc-body{position:relative;z-index:2;padding:clamp(18px,2.6vw,24px)}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-brand{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-display);font-weight:800;font-size:1.02rem;letter-spacing:.04em;color:#fff;
}
.pc-brand svg{width:26px;height:auto;color:rgba(255,255,255,.9)}
.pc-kind{
  font-family:var(--f-body);font-weight:800;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.92);background:rgba(0,0,0,.24);padding:5px 10px 6px;border-radius:var(--pill);
}
.pc-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:clamp(14px,2.4vh,22px)}
.pc-end{display:grid;gap:2px;min-width:0}
.pc-end.r{text-align:right}
.pc-end small{
  font-family:var(--f-body);font-weight:700;font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.pc-end b{
  font-family:var(--f-display);font-weight:800;line-height:1;
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw;
}
.pc-path{position:relative;height:22px;display:block}
.pc-dots{
  position:absolute;left:0;right:0;top:11px;height:2px;display:block;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.75) 0 5px,transparent 5px 11px);
}
.pc-flyer{position:absolute;top:0;left:0;width:34px;display:block}
.pc-flyer svg{width:100%;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.anim .pc-flyer{animation:flyer 5.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes flyer{
  0%{left:0;opacity:0;transform:translateY(2px) scale(.7)}
  12%{opacity:1;transform:none}
  86%{opacity:1;transform:translateY(-1px)}
  100%{left:calc(100% - 34px);opacity:0;transform:translateY(-3px) scale(.86)}
}
.pc-art{
  position:relative;z-index:2;display:flex;justify-content:center;gap:8px;
  margin:clamp(12px,2.2vh,20px) 0 clamp(14px,2.4vh,22px);
}
.pc-art .pw{width:min(38%,132px);display:block}
.pc-art .pw svg{width:100%;height:auto;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.anim .pc-art .pw:first-child{animation:bob 5s ease-in-out infinite alternate}
.anim .pc-art .pw:last-child{animation:bob 5s ease-in-out .5s infinite alternate-reverse}
.pc-art.swap{animation:swapin .5s var(--spring)}
@keyframes swapin{0%{transform:translateY(12px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.pc-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;
  border-top:1px dashed rgba(255,255,255,.35);padding-top:clamp(12px,2vh,16px);
}
.pc-grid span{display:grid;gap:2px;min-width:0}
.pc-grid small{
  font-family:var(--f-body);font-weight:700;font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.pc-grid b{
  font-family:var(--f-display);font-weight:800;font-size:.98rem;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-grid b.ph{color:rgba(255,255,255,.44);font-weight:600}
.pc-stamp{
  position:absolute;right:clamp(6px,1.6vw,14px);top:40%;z-index:4;
  display:grid;place-items:center;padding:9px 15px 10px;border-radius:9px;
  border:2.6px solid rgba(255,255,255,.8);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:rotate(-13deg) scale(2.2);pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,.25);background:rgba(0,0,0,.16);
}
.pc-stamp.on{opacity:.94;transform:rotate(-13deg) scale(1);transition:opacity .16s linear,transform .42s cubic-bezier(.2,1.5,.4,1)}
.pc-stamp i{font-style:normal;display:block;max-width:7ch;text-align:center;line-height:1.08}
@media (max-width:860px){ .pc-stamp{font-size:.68rem;padding:7px 11px 8px;top:38%} }
.pc-tear{
  position:relative;z-index:3;height:0;
  border-top:2px dashed rgba(255,255,255,.5);
}
.pc-tear::before,.pc-tear::after{
  content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 2px 5px rgba(0,0,0,.28);
}
.pc-tear::before{left:-11px}
.pc-tear::after{right:-11px}
.pc-stub{
  position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:14px clamp(18px,2.6vw,24px) 16px;background:rgba(0,0,0,.22);
}
.pc-code{
  font-family:var(--f-body);font-weight:800;font-size:.76rem;letter-spacing:.12em;
  color:#fff;background:rgba(255,255,255,.16);padding:6px 10px 7px;border-radius:8px;white-space:nowrap;
}
.pc-bars{display:flex;align-items:flex-end;gap:2px;height:30px;overflow:hidden}
.pc-bars i{display:block;width:2px;height:100%;background:rgba(255,255,255,.82);border-radius:1px;transform-origin:bottom}
.anim .pc-bars i{animation:barin .5s var(--spring) both}
@keyframes barin{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
.pc-fare{display:grid;gap:1px;text-align:right}
.pc-fare small{
  font-family:var(--f-body);font-weight:700;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.64);
}
.pc-fare b{font-family:var(--f-display);font-weight:800;font-size:1.06rem}
.pass-note{
  font-family:var(--f-fun);font-weight:500;font-size:.78rem;color:rgba(255,248,236,.72);
  text-align:center;max-width:34ch;margin:0;
}
/* tear-off on submit */
.pass-card.torn .pc-stub{animation:stubgo 1.05s var(--ease) forwards}
.pass-card.torn .pc-body{animation:bodysink .8s var(--ease) forwards}
@keyframes stubgo{
  0%{transform:none;opacity:1}
  22%{transform:translateY(6px) rotate(1.4deg)}
  100%{transform:translate(18%,-150%) rotate(15deg);opacity:0}
}
@keyframes bodysink{0%{transform:none}100%{transform:translateY(10px) scale(.985)}}

/* --- the step form --- */
.pass-form{
  position:relative;background:var(--paper);border-radius:24px;
  padding:clamp(18px,2.6vw,28px);
  box-shadow:0 26px 60px rgba(24,13,58,.42),inset 0 0 0 1px rgba(42,27,94,.07);
  display:grid;gap:14px;align-content:start;min-width:0;
}
.pf-steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.pf-steps button{
  display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  background:rgba(123,92,250,.1);color:var(--violet-deep);
  font-family:var(--f-display);font-weight:800;font-size:.8rem;
  padding:7px 13px 8px;border-radius:var(--pill);
  transition:background .25s var(--ease),color .25s var(--ease),transform .3s var(--spring);
}
.pf-steps button span{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:#fff;color:var(--violet-deep);font-size:.68rem;
}
.pf-steps button[aria-current="true"]{background:var(--g-violet);color:#fff;transform:translateY(-1px)}
.pf-steps button[aria-current="true"] span{background:rgba(255,255,255,.9);color:var(--violet-deep)}
.pf-steps button[data-done="1"]{background:rgba(47,211,155,.18);color:#16794F}
.pf-rail{height:5px;border-radius:3px;background:rgba(42,27,94,.1);overflow:hidden}
.pf-rail i{display:block;height:100%;width:8%;border-radius:3px;background:var(--g-gold);transition:width .5s var(--spring)}
.pf-panes{position:relative;min-height:clamp(268px,38vh,340px)}
.pf-pane{
  position:absolute;inset:0;opacity:0;transform:translateX(18px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .42s var(--spring);
  display:grid;gap:9px;align-content:start;overflow-y:auto;
}
.pf-pane.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.pf-pane.back{transform:translateX(-18px)}
.pf-h{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.06;letter-spacing:-.02em;margin:0}
.pf-p{font-family:var(--f-fun);font-weight:500;font-size:.88rem;color:var(--muted);margin:0;max-width:44ch}
.pf-kinds{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.pf-kinds button{
  border:0;cursor:pointer;background:#fff;color:var(--violet-deep);
  font-family:var(--f-display);font-weight:800;font-size:.82rem;padding:8px 14px 9px;border-radius:var(--pill);
  box-shadow:0 3px 0 rgba(42,27,94,.13);transition:all .24s var(--ease);
}
.pf-kinds button[aria-selected="true"]{background:var(--g-violet);color:#fff;box-shadow:0 3px 0 var(--violet-deep)}
.pf-search input{
  width:100%;border:0;border-radius:14px;padding:11px 14px;
  font-family:var(--f-body);font-weight:600;font-size:.92rem;color:var(--ink);
  background:#fff;box-shadow:inset 0 0 0 2px rgba(42,27,94,.1);
}
.pf-search input:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--violet)}
.pf-pick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;
  max-height:clamp(180px,26vh,240px);overflow-y:auto;padding:2px 2px 10px;
  mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);
}
.pf-o{
  border:0;cursor:pointer;background:#fff;border-radius:15px;padding:8px 6px 9px;
  display:grid;gap:5px;justify-items:center;
  box-shadow:0 3px 0 rgba(42,27,94,.12);transition:transform .22s var(--spring),box-shadow .22s var(--ease);
}
.pf-o:hover{transform:translateY(-3px)}
.pf-o svg{width:100%;height:auto;max-width:74px}
.pf-o span{
  font-family:var(--f-fun);font-weight:600;font-size:.7rem;color:var(--ink);
  line-height:1.1;text-align:center;
}
.pf-o[aria-pressed="true"]{box-shadow:0 0 0 2.6px var(--violet),0 5px 0 var(--violet-deep);transform:translateY(-3px)}
.pf-packs{display:grid;gap:8px;margin-top:4px}
.pf-packs button{
  border:0;cursor:pointer;background:#fff;border-radius:16px;padding:12px 14px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;text-align:left;
  box-shadow:0 3px 0 rgba(42,27,94,.12);transition:all .22s var(--ease);
}
.pf-packs b{font-family:var(--f-display);font-weight:800;font-size:1.06rem;color:var(--ink)}
.pf-packs small{font-family:var(--f-fun);font-weight:500;font-size:.76rem;color:var(--muted);grid-column:1}
.pf-packs em{
  grid-row:1/3;grid-column:2;font-style:normal;
  font-family:var(--f-display);font-weight:800;font-size:1.12rem;color:var(--violet-deep);
}
.pf-packs button[aria-pressed="true"]{box-shadow:0 0 0 2.6px var(--violet),0 5px 0 var(--violet-deep)}
.pf-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(42,27,94,.07);padding:5px;border-radius:var(--pill)}
.pf-modes button{
  border:0;cursor:pointer;background:transparent;border-radius:var(--pill);padding:9px 8px 10px;
  font-family:var(--f-display);font-weight:800;font-size:.84rem;color:var(--violet-deep);
  transition:all .24s var(--ease);
}
.pf-modes button i{display:block;font-style:normal;font-family:var(--f-fun);font-weight:600;font-size:.66rem;opacity:.75}
.pf-modes button[aria-pressed="true"]{background:#fff;box-shadow:0 3px 0 rgba(42,27,94,.14)}
.pf-fine{font-family:var(--f-fun);font-weight:500;font-size:.78rem;color:var(--muted);margin:0}
.pf-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.pf-f{display:grid;gap:4px;grid-column:1/-1;min-width:0}
.pf-f.half{grid-column:auto}
.pf-f span{
  font-family:var(--f-body);font-weight:800;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--violet-deep);
}
.pf-f input,.pf-f select{
  width:100%;border:0;border-radius:13px;padding:11px 13px;
  font-family:var(--f-body);font-weight:600;font-size:.92rem;color:var(--ink);background:#fff;
  box-shadow:inset 0 0 0 2px rgba(42,27,94,.1);transition:box-shadow .2s var(--ease);
}
.pf-f select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3AE0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px 15px;
}
.pf-f input:focus,.pf-f select:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--violet)}
.pf-f input.bad,.pf-f select.bad{box-shadow:inset 0 0 0 2.5px var(--coral)}
.pf-f.solo{grid-column:1/-1}
.pf-err{
  font-family:var(--f-fun);font-weight:600;font-size:.82rem;color:#fff;margin:0;
  background:var(--g-coral);padding:9px 13px 10px;border-radius:12px;
  box-shadow:0 3px 0 var(--coral-deep);
  animation:pop .42s var(--spring) both;
}
.pf-nav{display:flex;gap:9px;align-items:center}
.pf-nav .btn{flex:1}
.pf-nav .btn.cream{flex:0 0 auto}
.pf-done{display:grid;gap:10px;justify-items:start;align-content:center;height:100%}
.pf-tick{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--g-teal);color:#0C3F2C;box-shadow:0 5px 0 rgba(22,121,79,.8);
  animation:pop .6s var(--spring) both;
}
.pf-tick svg{width:26px;height:26px}
.pf-code{
  font-family:var(--f-body);font-weight:800;font-size:.9rem;letter-spacing:.12em;color:var(--violet-deep);
  background:rgba(123,92,250,.12);padding:9px 14px;border-radius:12px;margin:0;
}
@media (max-width:860px){
  .pass-wrap{
    background:var(--paper);align-content:start;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(24px + env(safe-area-inset-bottom,0px));
  }
  .pass-shell{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:50px}
  .pass-x{top:2px;right:0}
  .pass-form{box-shadow:none;padding:4px 2px 0;background:none;border-radius:0}
  .pass-card{box-shadow:0 14px 34px rgba(24,13,58,.32),inset 0 0 0 1px rgba(255,255,255,.22)}
  .pc-tear::before,.pc-tear::after{background:var(--paper)}
  .pass-card{max-width:none}
  .pass-stage{perspective:none}
  .pf-panes{min-height:clamp(250px,36vh,320px)}
  .pass-note{display:none}
  .pc-body{padding:16px 16px 14px}
  .pc-route{margin-top:12px}
  .pc-art{margin:12px 0 14px}
  .pc-art .pw{width:min(31%,112px)}
  .pc-grid{gap:9px 12px;padding-top:11px}
  .pc-stub{padding:11px 16px 13px}
  .pc-bars{height:24px}
}
@media (max-width:420px){
  .pc-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pc-end b{font-size:1.1rem;max-width:34vw}
  .pf-fields{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .pass-card,.pc-flyer,.pc-art .pw{animation:none!important;transition:none!important}
}

/* small national flags beside the Korea / Switzerland line */
.flagchip{
  display:inline-block;width:1.06em;height:auto;vertical-align:-.12em;
  margin:0 .34em;border-radius:.18em;
  box-shadow:0 1px 3px rgba(42,27,94,.28);
}
.hero-sub2 .flagchip{width:1.5em;vertical-align:-.28em;margin:0 .3em;border-radius:.2em}
.nw{white-space:nowrap}
.flagpair{display:flex;align-items:center;gap:.4rem;margin:12px 0 0}
.flagpair .flagchip{width:36px;margin:0;border-radius:5px;box-shadow:0 3px 8px rgba(42,27,94,.24)}
.flagpair i{
  font-style:normal;font-family:var(--f-display);font-weight:800;
  font-size:.95rem;color:var(--violet-deep);opacity:.55;
}

/* ============================================================
   MOBILE OVERRIDES THAT MUST OUTRANK THE WAVE-CLEARANCE BLOCK
   (the clearance rules set `bottom` on elements this breakpoint
   puts back into normal flow, which would shift them upward)
   ============================================================ */
@media (max-width:900px){
  .cats-pin{padding-bottom:calc(clamp(14px,2.6vh,24px) + var(--wave-h))}
  .cats-nav{position:relative;left:auto;right:auto;bottom:auto;transform:none}
  .cats-hint{bottom:auto}
}

/* the pass's own upload pane */
.pf-own{display:grid;gap:10px;justify-items:start;padding:2px}
.pf-own p{
  font-family:var(--f-fun);font-weight:500;font-size:.88rem;color:var(--muted);
  margin:0;max-width:44ch;line-height:1.5;
}
.pf-own small{font-family:var(--f-fun);font-weight:500;font-size:.76rem;color:var(--muted)}
.pf-own input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ============================================================
   MOBILE HERO: one message, one button, one pair of patches.
   The four-up option block and the second CTA belong to the
   wider layout; on a phone they crowded the fold.
   ============================================================ */
.hero-sub-m{display:none}
.hero-pair{display:none}
@media (max-width:760px){
  .hero-pair{
    display:flex;align-items:center;justify-content:center;gap:10px;
    position:relative;z-index:4;width:min(88%,420px);
    margin:clamp(26px,5vh,48px) auto clamp(30px,6vh,58px);
  }
  .hero-pair .hp{width:min(46%,176px);display:block}
  .hero-pair .hp svg{width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(42,27,94,.42))}
  .hero-pair .hp.flip{transform:scaleX(-1)}
  .anim .hero-pair .hp{animation:bob 6.4s ease-in-out infinite alternate}
  .anim .hero-pair .hp.flip{animation:bobFlip 6.4s ease-in-out -2.2s infinite alternate}
  @keyframes bobFlip{from{transform:scaleX(-1) translateY(0)}to{transform:scaleX(-1) translateY(-9px)}}

  .cast{display:none}
  .nav-links a.hide-phone,.hero-cta .btn.hide-phone{display:none}
  .hero-sub{display:none}
  .hero-sub-m{display:block}
  .hero-sub2{font-size:.92rem;max-width:28ch;margin-top:12px}
  .hero-cta{margin-top:clamp(18px,3vh,28px)}
  .hero-eyebrow{font-size:.66rem;letter-spacing:.2em}
  /* with the option block and the rail gone, the hero can be shorter,
     and the pair floats in the space above the hills */
  .hero{min-height:min(82svh,760px)}
  .hero-pair{align-self:center;margin:clamp(14px,2.6vh,26px) auto clamp(20px,4vh,40px)}
}

/* On a short phone the pinned product scroll is taller than the space it
   has, and centring it rode the label up under the menu. Start it from
   the top there instead, and tighten the caption reserve. */
@media (max-width:900px) and (max-height:780px){
  .scrub-pin{align-content:start;row-gap:clamp(22px,4vh,38px);padding-top:clamp(86px,12.8vh,100px)}
  .scrub-cap{min-height:8.6em}
  .scrub-art{width:min(62%,216px)}
}
@media (max-width:900px) and (max-height:680px){
  .scrub-heads h3{font-size:clamp(1.42rem,6.6vw,1.9rem)}
  .scrub-cap p{font-size:.94rem}
  .scrub-art{width:min(52%,180px)}
}

/* ============================================================
   MOOD GATE
   Shown once, before the page is chosen. The two halves are
   drawn in the two editions' own palettes so the choice is
   legible without having to read it.
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:120;display:none;
  place-items:center;overflow-y:auto;overscroll-behavior:contain;
  background:#1B1046;
  /* fixed insets track the small viewport on mobile browsers, which let a
     strip of the page show through under the toolbar; fill the large
     viewport too, and paint the page's own background the same colour. */
  min-height:100vh;min-height:100lvh;
  padding:calc(24px + env(safe-area-inset-top,0px)) 18px calc(28px + env(safe-area-inset-bottom,0px));
}
html.needs-mood .gate,.gate.closing{display:grid}
html.needs-mood,html.needs-mood body{background:#1B1046}
html.needs-mood,html.needs-mood body{overflow:hidden}
html.needs-mood body>*:not(.gate){visibility:hidden}
.gate.closing{animation:gateOut .5s var(--ease) forwards}
@keyframes gateOut{to{opacity:0;visibility:hidden}}
.gate-in{width:100%;max-width:880px;text-align:center;animation:gateIn .7s var(--spring) both}
@keyframes gateIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.gate-eyebrow{
  margin:0;font-family:var(--f-body);font-weight:800;font-size:.72rem;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,248,236,.62);
}
.gate-h{
  margin:14px 0 0;color:#fff;font-family:var(--f-display);font-weight:800;
  font-size:clamp(2rem,6.4vw,3.5rem);line-height:.98;letter-spacing:-.03em;
}
.gate-p{
  margin:14px auto 0;max-width:44ch;color:rgba(255,248,236,.72);
  font-family:var(--f-fun);font-weight:500;font-size:clamp(.92rem,1.5vw,1.04rem);
}
.gate-opts{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);
  margin-top:clamp(26px,4.5vh,44px);
}
.gate-o{
  position:relative;border:0;cursor:pointer;padding:0;overflow:hidden;text-align:left;
  border-radius:var(--r-l);display:grid;grid-template-rows:auto 1fr;
  transition:transform .32s var(--spring),box-shadow .32s var(--ease);
}
.gate-o:hover,.gate-o:focus-visible{transform:translateY(-6px)}
.gate-art{display:block;height:clamp(96px,17vh,168px);position:relative;overflow:hidden}
.gate-t{display:grid;gap:7px;padding:clamp(14px,2.2vw,22px) clamp(14px,2.2vw,22px) clamp(16px,2.4vw,24px)}
.gate-t b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.05}
.gate-t small{font-size:.84rem;line-height:1.45}
.gate-t em{font-style:normal;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-top:4px}

/* the playful half */
.gate-o.kid{background:var(--paper);color:var(--ink);box-shadow:0 10px 0 var(--violet-deep),0 26px 44px rgba(0,0,0,.4)}
.gate-o.kid .gate-t small{color:var(--muted)}
.gate-o.kid .gate-t em{color:var(--coral)}
.gate-o.kid .gate-art{background:var(--g-sky)}
.gate-o.kid .gate-art::before{
  content:"";position:absolute;inset:auto -10% -34% -10%;height:70%;border-radius:50% 50% 0 0;
  background:var(--g-violet);
}
.gate-o.kid .gate-art::after{
  content:"";position:absolute;left:14%;top:26%;width:26px;height:26px;border-radius:50%;
  background:var(--g-gold);box-shadow:0 0 22px rgba(255,197,49,.8);
}
/* positioned without a transform: the bob animation owns transform */
.gate-o.kid .gate-art i{
  position:absolute;left:21%;top:26%;width:58%;display:block;
}
.gate-o.kid .gate-art i svg{width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(42,27,94,.45))}
.anim .gate-o.kid .gate-art i{animation:bob 4.4s ease-in-out infinite alternate}

/* the quiet half */
.gate-o.adult{background:#F1F0ED;color:#161616;box-shadow:0 10px 0 #C9C6BE,0 26px 44px rgba(0,0,0,.4)}
.gate-o.adult .gate-t b{font-family:var(--f-body);font-weight:500;letter-spacing:-.02em;text-transform:lowercase}
.gate-o.adult .gate-t small{color:rgba(22,22,22,.56);font-family:var(--f-body)}
.gate-o.adult .gate-t em{color:#161616}
.gate-o.adult .gate-art{background:#E7E4DD}
.gate-o.adult .gate-art img{
  width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:saturate(.9) contrast(1.02)
}
.gate-note{
  margin:clamp(18px,3vh,28px) 0 0;color:rgba(255,248,236,.44);
  font-family:var(--f-fun);font-weight:500;font-size:.78rem;
}
@media (max-width:640px){
  /* One column, and both cards take the taller of the two rows: the two
     blurbs wrap to different line counts in two different typefaces. */
  .gate-opts{grid-template-columns:1fr;gap:12px;grid-auto-rows:1fr}
  .gate-art{height:clamp(84px,13vh,120px)}
  .gate-o{grid-template-columns:34% 1fr;grid-template-rows:1fr;align-items:stretch}
  .gate-art{height:100%;min-height:112px}
  .gate-t{padding:14px 15px 15px}
  .gate-t small{font-size:.8rem}
}

/* corner switch on the playful edition */
.switch-adult{
  position:fixed;right:14px;bottom:14px;z-index:58;
  background:#161616;color:#F1F0ED;padding:10px 15px;border-radius:3px;
  font-family:var(--f-body);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.34);opacity:.86;
  transition:opacity .3s var(--ease),transform .3s var(--spring);
}
.switch-adult:hover{opacity:1;transform:translateY(-2px)}
@media (max-width:520px){ .switch-adult{right:10px;bottom:10px;padding:9px 12px;font-size:.55rem} }

/* The pinned product scroll on wider screens: the step rail now closes
   the bottom, so the pin needs less reserved space under it. Must sit
   after the wave-clearance block to win. */
@media (min-width:901px){
  .scrub-pin{padding-bottom:calc(clamp(22px,3.4vh,40px) + var(--wave-h))}
  .scrub-art{width:min(92%,440px)}
  .scrub-steps{margin-top:clamp(40px,6.4vh,88px)}
}