:root{
    --bg:#fbfaf7;--bg2:#f1eee7;--panel:#ffffff;--panel2:#f7f5f0;
    --ink:#16233a;--mut:#3d4653;--dim:#525d6c;
    --orange:#ef5a1f;--orange-soft:#f26a1b;--gold:#bf8f38;--gold-2:#a87e33;--gold-text:#8a6618;--violet:#8f6fd6;--blue:#3f7fe0;
    --line:rgba(22,35,58,.12);--line-2:rgba(22,35,58,.2);
    --max:1240px;--ease:cubic-bezier(.22,.61,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{background:var(--bg);color:var(--ink);font-family:'Sora','Helvetica Neue',Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:.01em}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--orange);color:#0a0a0a}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
  h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.02}
  .display{font-weight:800;letter-spacing:-.035em;line-height:.94;text-transform:uppercase}
  .eyebrow{font-weight:600;letter-spacing:.4em;text-transform:uppercase;font-size:11.5px;color:var(--gold-text)}
  .mut{color:var(--mut)}
  .grain{position:fixed;inset:0;z-index:5000;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .btn{position:relative;display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:.02em;font-size:14px;padding:16px 30px;border-radius:2px;transition:.4s var(--ease)}
  .btn-orange{background:linear-gradient(180deg,#ff6a2e,#ec4a12);color:#150a04;box-shadow:0 6px 22px rgba(255,90,31,.24)}.btn-orange:hover{background:linear-gradient(180deg,#ff7c45,#f5561b);transform:translateY(-2px)}
  .btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206;box-shadow:0 6px 22px rgba(217,168,106,.28)}.btn-gold:hover{background:linear-gradient(180deg,#f0d6ac,var(--gold-2));transform:translateY(-2px)}
  .btn-light{background:var(--ink);color:#0a0a0a}.btn-light:hover{background:#fff;transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}
  .btn .ar{transition:transform .4s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
  .hairline{height:1px;background:var(--line)}

  /* BOOT */
  #boot{position:fixed;inset:0;z-index:10000;background:#050506;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .9s var(--ease),visibility .9s}
  #boot.done{opacity:0;visibility:hidden}
  #boot .bk{font-weight:200;font-size:clamp(40px,8vw,92px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:34px;padding-left:.14em;line-height:1;text-align:center}
  #boot .barwrap{width:min(340px,66vw);height:2px;background:rgba(22,35,58,.12);overflow:hidden}
  #boot .bar{height:100%;width:0;background:var(--gold);transition:width 1.5s var(--ease)}

  /* OVERLAYS */
  .overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:26px;z-index:9000}
  .overlay.show{display:flex}
  #gate{z-index:9400;background:radial-gradient(circle at 50% 10%,rgba(217,168,106,.10),transparent 55%),#070708}
  #gate .box{max-width:500px;text-align:center}
  #gate .mono{display:inline-block;border:1px solid #a87e33;color:#8a651f;padding:8px 16px;font-size:11px;letter-spacing:.4em;margin-bottom:30px}
  #gate h1,#gate .gate-title{font-size:clamp(40px,8vw,64px);margin-bottom:12px;color:var(--ink);line-height:1.02}
  #gate h1 .o,#gate .gate-title .o{color:var(--orange)}
  #gate p:not(.gate-title){color:var(--mut);font-size:14px;font-weight:400;margin:18px auto 30px;max-width:380px}
  #gate .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  #gate small{display:block;margin-top:26px;color:var(--dim);font-size:11px;max-width:540px;margin-left:auto;margin-right:auto;line-height:1.7}
  #deniedMsg{display:none;color:var(--mut)}
  #concierge{z-index:9200;background:rgba(7,7,8,.94);backdrop-filter:blur(14px)}
  .cc{max-width:720px;width:100%;text-align:center}
  #concierge .aura{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,rgba(217,168,106,.16),transparent 56%);animation:auraPulse 6s ease-in-out infinite}
  @keyframes auraPulse{0%,100%{opacity:.5}50%{opacity:1}}
  .cc-orb{position:relative;width:130px;height:130px;margin:0 auto 30px}
  .cc-orb .core{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff3e2,#f2bd84 44%,#d9853f 72%,#a9531f);box-shadow:0 0 42px rgba(217,168,106,.7),inset 0 0 18px rgba(255,255,255,.35);animation:coreBreathe 4s ease-in-out infinite;z-index:3}
  .cc-orb .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(217,168,106,.05) 90deg,var(--gold) 200deg,rgba(255,205,140,1) 250deg,var(--gold) 300deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 52px,#000 54px,#000 60px,transparent 62px);mask:radial-gradient(circle,transparent 52px,#000 54px,#000 60px,transparent 62px);animation:spinRing 7s linear infinite;z-index:2}
  .cc-orb .ripple{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(217,168,106,.5);animation:ccRipple 3.2s ease-out infinite;z-index:1}
  .cc-orb .spark{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 8px var(--gold);z-index:3}
  .cc-orb .s1{animation:orbit 6s linear infinite}
  .cc-orb .s2{animation:orbit 9s linear infinite reverse;animation-delay:-3s}
  .cc-orb .s3{animation:orbit 12s linear infinite;animation-delay:-6s}
  @keyframes coreBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
  @keyframes spinRing{to{transform:rotate(360deg)}}
  @keyframes ccRipple{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
  @keyframes orbit{from{transform:rotate(0) translateX(56px) rotate(0)}to{transform:rotate(360deg) translateX(56px) rotate(-360deg)}}
  .cc h2{font-size:clamp(28px,4.6vw,44px);margin-bottom:14px}
  .cc .sub{color:var(--mut);font-size:15px;margin-bottom:34px}
  .cc .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
  .chip{border:1px solid var(--line-2);background:rgba(12,10,18,.5);backdrop-filter:blur(6px);color:var(--ink);padding:12px 20px;border-radius:40px;font-size:14px;font-family:inherit;font-weight:500;transition:.3s var(--ease);cursor:pointer}
  .chip:hover{border-color:var(--gold);background:rgba(217,168,106,.08);transform:translateY(-2px)}
  .cc .field{display:flex;gap:8px;max-width:520px;margin:0 auto 16px}
  .cc input{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:#fff;padding:15px 20px;border-radius:40px;font-size:15px;font-family:inherit}
  .cc input:focus{outline:none;border-color:var(--gold)}
  .cc .skip{color:var(--dim);font-size:13px;background:none;border:none;text-decoration:underline;cursor:pointer;font-family:inherit;margin-top:8px}
  .cc .thinking{display:none;color:var(--gold-2);font-size:14px;margin-top:10px}.cc .thinking.on{display:block}

  /* NAV */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;justify-content:space-between;padding:22px 32px;transition:.5s var(--ease)}
  header.nav.solid{padding:14px 32px;background:rgba(8,9,11,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
  .brandmark{display:flex;align-items:center;gap:11px;cursor:pointer}
  .brandmark .emblem{width:24px;height:24px;border-radius:50%;border:1px solid var(--gold);position:relative;flex-shrink:0;transition:.4s var(--ease)}
  .brandmark .emblem:before{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
  .brandmark:hover .emblem{transform:rotate(90deg);box-shadow:0 0 16px rgba(217,168,106,.4)}
  .brandmark .wm{font-weight:600;letter-spacing:.12em;font-size:13px;text-transform:uppercase}
  .brandmark .wm b{color:var(--ink);font-weight:600}
  .brandmark .emblem-img{height:30px;width:auto;display:block;transition:.4s var(--ease)}
  .brandmark:hover .emblem-img{transform:scale(1.07)}
  .gate-logo{width:220px;max-width:72vw;margin:0 auto 26px;display:block}
  .gate-bok{width:130px;height:130px;margin:0 auto 28px}
  .gate-bok svg{width:100%;height:100%;display:block}
  nav.links{display:flex;gap:34px}
  nav.links a{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:.3s;position:relative;cursor:pointer}
  nav.links a:after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:.35s var(--ease)}
  nav.links a:hover{color:var(--gold-2)}nav.links a:hover:after{width:100%}
  .nav-r{display:flex;align-items:center;gap:18px}
  .nav-ai{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);background:none;border:none;cursor:pointer;font-family:inherit}
  .nav-ai .d{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
  .nav-cta{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--ink);padding:10px 20px;border-radius:2px;transition:.3s;cursor:pointer}
  .nav-cta:hover{border-color:var(--gold);color:var(--gold-2)}
  @media(max-width:980px){nav.links{display:none}}

  section{position:relative;padding:130px 0}
  /* Headlines get the whole column; body copy keeps its ~70-character measure.
   A 720px cap on the shared block was breaking three-word headlines onto two
   lines and leaving orphans — "REDEEM.", "YOU", "WALK" stranded alone. */
.sec-head{max-width:1176px;margin-bottom:60px}
.rewards .sec-head{margin-bottom:26px}   /* the deck follows straight on */
.sec-head p{max-width:720px}
  .sec-head h2,.sec-head h1{font-size:clamp(32px,4.4vw,52px);margin:16px 0 18px;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
  .sec-head p{color:var(--mut);font-size:18px;font-weight:400;line-height:1.6}
  .num-tag{font-size:12px;color:var(--dim);letter-spacing:.3em;font-weight:500}

  /* HERO */
  .hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 70px}
  .hero .amb{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 30%,rgba(255,90,31,.17),transparent 52%),radial-gradient(ellipse at 20% 90%,rgba(217,168,106,.08),transparent 45%)}
  .stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:tw 5s infinite}
  @keyframes tw{0%,100%{opacity:.1}50%{opacity:.85}}
  .hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.4fr .6fr;gap:34px;align-items:center;width:100%}
  @media(max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-3d{display:none}}
  .hero h1{font-size:clamp(82px,16vw,224px);font-weight:800;margin:14px 0 4px;letter-spacing:-.058em;-webkit-text-stroke:.9px currentColor}.hero h1 .l2{color:var(--ink);-webkit-text-stroke:.9px currentColor}
  .hero .sub{max-width:480px;color:#cfcbc3;font-size:clamp(16px,1.8vw,19px);margin:28px 0 36px;font-weight:400}.hero .sub b{color:#fff;font-weight:600}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .stage3d{position:relative;aspect-ratio:1/1;width:100%;max-width:460px;margin-left:auto;margin-right:auto}
  .stage3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}.stage3d canvas:active{cursor:grabbing}
  .stage3d .fb{position:absolute;inset:0;display:none;align-items:center;justify-content:center;perspective:1000px}
  .stage3d .fbbox{width:150px;height:210px;transform-style:preserve-3d;animation:spin 10s linear infinite}
  @keyframes spin{from{transform:rotateY(-20deg) rotateX(-8deg)}to{transform:rotateY(340deg) rotateX(-8deg)}}
  .stage3d .fbbox div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0a0a0a;background:linear-gradient(135deg,var(--bx,var(--orange)),#c73d0a);text-align:center;font-size:16px;letter-spacing:.05em}
  .scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:10px;letter-spacing:.35em;text-transform:uppercase;z-index:3}

  .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden;white-space:nowrap;background:var(--bg2)}
  .marquee .track{display:inline-block;animation:slide 26s linear infinite}
  .marquee span{font-weight:700;font-size:22px;color:var(--dim);text-transform:uppercase;margin:0 26px}.marquee span .o{color:var(--gold)}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* COLLECTIONS LIST */
  .col-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .col{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:44px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:.5s var(--ease)}
  /* The five walkers read as one family on the collection heroes and on the
     21+ gate; the index was the only place they all went grey. Same gamma,
     held back to a wash so the type still leads. */
  .col::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(100deg,var(--cg) 0%,var(--cg2,transparent) 34%,transparent 72%);
    opacity:.42;transition:opacity .5s var(--ease)}
  .col:hover::before{opacity:.72}
  .col > *{position:relative;z-index:1}
  .col.soon::before{opacity:.16}
  .col:hover{padding-left:28px;padding-right:28px;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent)}
  .col .idx{font-size:13px;color:var(--dim)}
  .col .swatch{position:absolute;left:0;top:0;bottom:0;width:3px;z-index:1;transition:.5s var(--ease);background:var(--ca)}
  .col:hover .swatch{width:6px}
  .col .mid .tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ca);font-weight:600;margin-bottom:8px}
  .col .mid h3{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.025em;text-transform:uppercase;transition:.4s}
  .col:hover .mid h3{transform:translateX(6px)}
  .col .mid p{color:var(--mut);font-size:14px;margin-top:8px;max-width:440px;font-weight:400}
  .col .right{display:flex;align-items:center;gap:20px;color:var(--mut)}
  .col .right .inf{font-size:12px;text-align:right;max-width:150px}
  .col .right .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--ca);color:var(--ca);background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.4s var(--ease);flex-shrink:0}
  .col:hover .right .go{background:var(--ca);border-color:var(--ca);color:#0a0a0a;transform:rotate(-45deg)}
  .col.soon{opacity:.6;cursor:default}
  .col .soon-badge{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:4px 10px;border-radius:20px}
  @media(max-width:760px){.col{grid-template-columns:auto 1fr;gap:16px}.col .right .inf{display:none}}

  /* generic feature cards */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
  .card{border:1px solid var(--line);border-radius:6px;background:var(--panel2);padding:26px;transition:.4s var(--ease)}
  .card:hover{transform:translateY(-4px);border-color:var(--line-2)}

  /* PRODUCT / COLLECTION PAGE */
  .page{padding-top:120px;min-height:100vh}
  .jrn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:1000px;margin:0 auto}
  .jrn-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;cursor:pointer;transition:.25s}
  .jrn-card:hover{border-color:var(--gold);transform:translateY(-3px)}
  .jrn-card h3{font-size:19px;font-weight:600;color:var(--ink);margin:8px 0 10px;line-height:1.35}
  .jrn-card p{font-size:13.5px;color:var(--mut);font-weight:400;line-height:1.65;margin:0 0 14px}
  .jrn-more{font-size:12.5px;font-weight:600;color:var(--gold-2)}
  /* walker emblems drifting in the Journal header margins */
  .jrn-head{position:relative}
  .jrn-embs{position:absolute;inset:-10px 0 -10px;pointer-events:none;z-index:0}
  .jrn-emb{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));display:block}
  .jrn-emb img{width:100%;height:100%;object-fit:contain;display:block;opacity:0}
  .jrn-emb-t{position:absolute;inset:0;background:var(--rc);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain}
  .jrn-head .sec-head{position:relative;z-index:1}
  /* below this there is no margin to put them in without crowding the words */
  @media(max-width:1100px){.jrn-embs{display:none}}
  /* Product page: the pack and its spec own the first screen, reviews start on
     the next one. The collection pages get this via html:has(.c-hero); a product
     page has no hero, so it hooks off its own crumb marker instead. */
  @media(min-width:761px){
    html:has(#app .prod-crumb){scroll-snap-type:y proximity}
    html:has(#app .prod-crumb) #app .prod-crumb ~ section{
      min-height:calc(100vh - 72px);
      display:flex; flex-direction:column; justify-content:center;
      content-visibility:visible;
      scroll-snap-align:start; scroll-margin-top:72px;
    }
    html:has(#app .prod-crumb) #app .prod-crumb ~ section>*{width:100%}
    /* the crumb is a thin strip, not a screen of its own — it rides with the pack */
    html:has(#app .prod-crumb) #app .p-sec.is-tight{
      min-height:calc(100vh - 72px - 62px);
      padding-top:16px;
    }
  }
  @media (prefers-reduced-motion:no-preference){
    .jrn-emb{animation:jrnDrift 14s ease-in-out infinite alternate}
    .jrn-emb:nth-child(2){animation-duration:17s;animation-delay:-4s}
    .jrn-emb:nth-child(3){animation-duration:19s;animation-delay:-7s}
    .jrn-emb:nth-child(4){animation-duration:15s;animation-delay:-2s}
    .jrn-emb:nth-child(5){animation-duration:21s;animation-delay:-9s}
  }
  @keyframes jrnDrift{
    from{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) translateY(0)}
    to  {transform:translate(-50%,-50%) rotate(var(--rot,0deg)) translateY(-12px)}
  }
  .jrn-date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
  h1.jrn-title,.jrn-title{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:10px 0 22px;line-height:1.1}
  .jrn-body p{font-size:17px;line-height:1.8;color:var(--ink);font-weight:400;margin:0 0 18px}
  .jrn-body h3{font-size:20px;font-weight:600;color:var(--ink);margin:32px 0 10px}
  .jrn-body b{color:var(--ink);font-weight:600}
  .jrn-body a{color:var(--gold-2);text-decoration:underline}
  .jrn-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0 18px}
  .jrn-table th{text-align:left;padding:9px 10px;border-bottom:2px solid var(--line-2);color:var(--ink);font-weight:600}
  .jrn-table td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--mut)}
  .jrn-fine{font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:16px;margin-top:26px}
  .nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
  .nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
  @media(max-width:980px){.nav-burger{display:flex}}
  .mob-nav{position:fixed;top:64px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(22,35,58,.14);z-index:790;display:none;padding:10px 0 14px}
  .mob-nav.on{display:block}
  .mob-nav a{display:block;padding:14px 28px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line)}
  .mob-nav a:last-child{border-bottom:none}
  .mob-nav a:active,.mob-nav a:hover{color:var(--gold-2);background:var(--bg2)}
.draw-table{width:100%;border-collapse:collapse;font-size:13px}
.draw-table td{padding:8px;border-bottom:1px solid var(--line);color:var(--mut)}
.draw-win h3{font-size:26px;font-weight:200;color:var(--ink);margin:8px 0 4px}
@media(max-width:860px){.draw-grid{grid-template-columns:1fr}}
@media(max-width:900px){.foot-cols{grid-template-columns:repeat(2,minmax(140px,1fr));justify-content:start;gap:32px 28px}}
  .rv-cat-row{display:flex;align-items:center;gap:16px;margin-bottom:4px}
  .rv-cat-lbl{width:64px;font-size:13.5px;color:var(--mut);font-weight:500}
  .rv-star-sm{font-size:26px;gap:6px;margin:0}
  .rv-prod{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--gold-2);background:rgba(191,143,56,.12);padding:3px 9px;border-radius:20px;margin-left:9px;vertical-align:middle}
  .rv-cats{font-size:12px;color:var(--dim);margin-top:2px}
  .rv-form-wrap select{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink)}
  .rw-stepsdeck{margin:34px 0 56px}
.rw-h-sub{font-size:22px !important;margin-bottom:4px}
  .rw-step-hi{border-color:var(--gold);box-shadow:0 8px 30px rgba(191,143,56,.12)}

  .colpack{width:118px;height:126px;flex:0 0 auto;position:relative;margin-right:6px}
  .colpack-in{position:absolute;left:0;top:0;transform:scale(.44);transform-origin:top left}
  @media(max-width:760px){.colpack{width:92px;height:100px}.colpack-in{transform:scale(.34)}}
  .rv-title{font-size:clamp(38px,6vw,72px);font-weight:800;letter-spacing:-.035em;margin:18px 0 18px}
  .rv-agg{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 44px}
  .rv-agg-num{font-size:52px;font-weight:200;color:var(--ink);line-height:1}
  .rv-stars{color:var(--gold);letter-spacing:2px;font-size:18px;white-space:nowrap}
  .rv-stars span{color:var(--line-2)}.rv-stars span.on{color:var(--gold)}
  .rv-count{font-size:13px;color:var(--mut)}
  .rv-gate{max-width:520px;margin:0 auto 50px;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:40px 30px}
  .rv-gate h3{font-size:22px;font-weight:200;color:var(--ink);margin:0 0 10px}
  .rv-gate p{font-size:15px;color:var(--mut);font-weight:400;margin:0 auto;max-width:400px}
  .rv-gate-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
  .rv-form-wrap{max-width:640px;margin:0 auto 50px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px}
  .rv-lbl{font-size:12px;letter-spacing:.06em;color:var(--mut);font-weight:500;margin-bottom:8px}.rv-lbl i{color:var(--orange);font-style:normal;margin-left:2px}
  .rv-star-input{display:flex;gap:8px;font-size:34px;cursor:pointer;margin:0 0 18px;line-height:1}
  .rv-star-input span{color:var(--line-2);transition:.15s}.rv-star-input span:hover,.rv-star-input span.on{color:var(--gold)}
  .rv-list{max-width:760px;margin:0 auto}
  .rv-item{padding:24px 0;border-bottom:1px solid var(--line)}.rv-item:last-child{border-bottom:none}
  .rv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:6px}
  .rv-item h5{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--ink)}
  .rv-meta{font-size:12px;color:var(--dim)}
  .rv-item p{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--mut);font-weight:400}
  .reg-head{text-align:center;max-width:none;margin-left:auto;margin-right:auto}.reg-head .num-tag{display:inline-flex;justify-content:center}.reg-head p{margin-left:auto;margin-right:auto}
  .reg-wrap{max-width:620px;margin:0 auto}
  .reg-tabs{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:0 0 30px}
  .reg-tab{font-size:15px;color:var(--mut);background:none;border:none;cursor:pointer;font-family:inherit;padding:8px 2px;border-bottom:2px solid transparent;transition:.2s}
  .reg-tab:hover{color:var(--ink)}.reg-tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--gold)}
  .reg-form .ct-field{margin-bottom:16px}.reg-lbl{font-size:12px;letter-spacing:.06em;color:var(--mut);font-weight:500;margin:6px 0 8px}.reg-lbl i{color:var(--orange);font-style:normal}
  .reg-addr{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.ct-span2{grid-column:1/-1}
  .reg-form select{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink)}
  .reg-submit{width:100%;justify-content:center;margin-top:10px}
  .reg-alt{text-align:center;font-size:13.5px;color:var(--mut);margin:14px 0 0}.reg-alt a{color:var(--gold-2);cursor:pointer;font-weight:600}
  .reg-sub2{font-size:14px;color:var(--mut);margin:-4px 0 20px;font-weight:400}
  .partner-title{white-space:nowrap;font-size:clamp(30px,4.8vw,58px);letter-spacing:.01em}
  @media(max-width:560px){.partner-title{white-space:normal;font-size:clamp(30px,9vw,46px)}}
  .fld-hint{display:block;font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.4}
  .fld-err{font-size:12.5px;color:#c0392b;margin:2px 0 6px;font-weight:500}
  .fake-captcha{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:6px;padding:12px 14px;max-width:300px;margin:8px 0 4px;background:var(--panel)}
  .fake-captcha .fc-box{width:24px;height:24px;border:2px solid var(--line-2);border-radius:3px;flex:0 0 auto;cursor:pointer;transition:.2s}
  .fake-captcha .fc-box.ck{background:var(--gold-2);border-color:var(--gold-2)}
  .fake-captcha .fc-label{font-size:14px;color:var(--ink);flex:1}
  .fake-captcha .fc-logo{font-size:10px;color:var(--dim);text-align:center;line-height:1.3}.fake-captcha .fc-r{display:block;font-size:16px;color:#4a90d9}
  .acct-menu{position:relative}
  .nav-person{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--line-2);border-radius:30px;padding:8px 12px;cursor:pointer;color:var(--ink);transition:.25s}
  .nav-person:hover{border-color:var(--gold);color:var(--gold-2)}.nav-person .pico{width:20px;height:20px;display:block}.nav-person .pcaret{font-size:10px}
  .acct-dd{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(22,35,58,.16);min-width:170px;padding:6px;display:none;z-index:900}
  .acct-dd.on{display:block}.acct-dd a{display:block;padding:11px 14px;font-size:13.5px;color:var(--ink);cursor:pointer;border-radius:8px;text-decoration:none}.acct-dd a:hover{background:var(--bg2);color:var(--gold-2)}
  @media(max-width:720px){.reg-addr{grid-template-columns:1fr}}
  .legal-wrap{max-width:760px;margin:0 auto;padding:0 8px}
  .legal-wrap .eff{font-size:13px;color:var(--dim);margin:0 0 26px}
  .legal-wrap h3{font-size:19px;font-weight:600;color:var(--ink);margin:34px 0 10px}
  .legal-wrap h4{font-size:14px;font-weight:600;color:var(--ink);margin:20px 0 8px}
  .legal-wrap p{font-size:17px;line-height:1.75;color:var(--ink);font-weight:400;margin:0 0 15px}
  .legal-wrap ul{margin:0 0 16px;padding-left:22px}
  .legal-wrap li{font-size:17px;line-height:1.7;color:var(--ink);font-weight:400;margin-bottom:8px}
  .legal-wrap a{color:var(--gold-2);text-decoration:underline}
  .legal-wrap b{color:var(--ink);font-weight:600}
  .partner-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
  .partner-cta .btn{text-decoration:none}
  /* STORY PAGE */
  .story .story-wrap{max-width:760px;margin:0 auto;padding:0 24px}
  .story-head{text-align:center;margin-bottom:56px}
  .story-title{font-size:clamp(34px,4.6vw,54px);line-height:1.06;font-weight:200;letter-spacing:-.01em;margin:16px 0 24px}
  .story-lead{font-size:clamp(18px,2.4vw,22px);line-height:1.65;color:var(--ink);font-weight:400;max-width:640px;margin:0 auto}
  .story-body{font-size:17px;line-height:1.85;color:var(--mut);font-weight:400}
  .story-body p{margin:0 0 26px}
  .story-body b{color:var(--ink);font-weight:600}
  .story-pull{margin:40px 0;padding:0;border:0;text-align:center;font-size:clamp(26px,3.4vw,36px);line-height:1.15;font-weight:200;letter-spacing:-.01em;color:var(--ink)}
  .story-sub{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin:40px 0 14px}
  .story-close{text-align:center;margin:72px 0 30px;padding-top:52px;border-top:1px solid var(--line)}
  .story-close-k{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
  .story-close-bok{font-size:clamp(34px,6vw,56px);font-weight:200;letter-spacing:.04em;color:var(--ink)}
  .story-close-bok span{font-weight:700}
  .story-link{color:var(--gold-2);cursor:pointer;font-weight:500;white-space:nowrap;border-bottom:1px solid var(--line-2)}
  .story-link:hover{color:var(--ink)}
  /* REWARDS PAGE */
  .rewards .sec-head{max-width:1176px}
  .rewards .sec-head p{max-width:720px}
  .rw-step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 22px}
  .rw-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bg2);color:var(--gold-2);font-weight:700;font-size:15px;margin-bottom:14px}
  .rw-step h4{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--ink)}
  .rw-step p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut);font-weight:400}
  .rw-block{margin:0 0 62px}
  .rw-h{font-size:clamp(24px,3.4vw,32px);font-weight:200;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
  .rw-sub{font-size:15px;color:var(--mut);font-weight:400;margin:0 0 28px}
  .rw-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1180px){.rw-tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1181px){.rw-tiers .rw-tier:last-child{grid-column:1/-1}}
  .rw-tier{display:flex;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px;transition:.3s}
  .rw-tier:hover{border-color:var(--line-2);transform:translateY(-2px)}
  .rw-tier-star{border-color:var(--gold);box-shadow:0 8px 30px rgba(191,143,56,.12)}
  .rw-pts{flex:0 0 auto;text-align:center;min-width:76px}
  .rw-pts b{display:block;font-size:34px;font-weight:200;color:var(--ink);line-height:1}
  .rw-pts span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
  .rw-tier-b h4{margin:8px 0 6px;font-size:17px;font-weight:600;color:var(--ink)}
  .rw-tier-b p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut);font-weight:400}
  .rw-loc{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:20px}
  .rw-loc-store{background:rgba(191,143,56,.12);color:var(--gold-2)}
  .rw-loc-shop{background:rgba(63,127,224,.12);color:var(--blue)}
  .rw-loc-both{background:rgba(143,111,214,.12);color:var(--violet)}
  .rw-earns{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rw-earns[hidden]{display:none}   /* a class-set display beats the UA [hidden] rule */
  .rw-earn{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px}
  .rw-earn-amt{flex:0 0 auto;font-size:22px;font-weight:400;color:var(--gold-2);min-width:56px}
.rw-earn{align-items:flex-start}
.rw-earn-b{min-width:0;flex:1}
.rw-earn-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rw-earn h5{margin:0}
.rw-earn-rep{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line-2);border-radius:20px;padding:2px 8px;white-space:nowrap}
.rw-earn p{margin:6px 0 0}
/* Status chip — the thing that tells you what to do next at a glance. */
.rw-chip{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:20px;border:1px solid transparent}
.rw-chip:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rw-chip-available{color:#5b6675;background:#f1eee8;border-color:#e2dbcd}
.rw-chip-progress{color:#9a6410;background:#fdf3e0;border-color:#f2ddb4}
.rw-chip-done{color:#1a7c69;background:#e7f5f1;border-color:#bde3d9}
.rw-chip-done:before{display:none}
.rw-earn.is-done{background:#f7fbf9;border-color:#cde7de}
.rw-earn.is-done .rw-earn-amt{color:#1a7c69}
.rw-earn.is-progress{border-color:#f0dcb2}
/* One-line "where you stand" summary above the cards. */
.rw-earn-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px;
  font-size:13px;color:var(--mut)}
.rwr-toggle{margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:20px;
  color:var(--ink);font-family:inherit;font-size:12px;letter-spacing:.04em;padding:7px 15px;cursor:pointer;transition:.25s}
.rwr-toggle:hover{border-color:var(--gold);color:var(--gold-2)}

/* --- the ring -------------------------------------------------------------
   Cards sit stacked in the middle and are pushed out sideways by --d, the
   signed distance from the front card. One transform expression drives the
   whole thing, so there is no per-slot bookkeeping to fall out of sync. */
.rwr{position:relative;height:430px;margin:4px 0 0;perspective:1400px;overflow:hidden}
.rwr[hidden]{display:none}
.rwr-track{position:absolute;inset:0}
.rwr-card{position:absolute;top:50%;left:50%;width:min(400px,80vw);
  /* transform and opacity are set by rwrPaint(); CSS abs()/min() on custom
     properties is not safe across the browsers this site has to run in. */
  transform:translate(-50%,-50%);
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;
  cursor:pointer;transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .45s ease,box-shadow .45s ease,border-color .3s;
  box-shadow:0 10px 30px -22px rgba(22,35,58,.4);text-align:left;display:flex;flex-direction:column;justify-content:center}
.rwr-card.is-front{cursor:default;box-shadow:0 26px 60px -28px rgba(22,35,58,.5);border-color:var(--line-2)}
.rwr-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rwr-card h4{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px;color:var(--ink);line-height:1.2}
.rwr-card p{font-size:13.5px;line-height:1.6;color:var(--mut);margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rwr-card p.rwr-warn{display:block;-webkit-line-clamp:none;overflow:visible}
.rwr-amt{font-size:34px;font-weight:200;color:var(--gold-2);line-height:1;margin-bottom:12px;display:flex;align-items:baseline;gap:7px}
.rwr-card.is-foil .rwr-amt{color:#9c7410}
.rwr-qr{display:flex;gap:14px;align-items:center;background:#faf6ee;border:1px solid #eadfcb;
  border-radius:12px;padding:12px 14px;margin:0 0 12px}
.rwr-qr img{width:88px;height:88px;flex:none;border-radius:5px;display:block}
.rwr-qr p{font-size:12px;line-height:1.45;color:var(--mut);margin:0;-webkit-line-clamp:4}
.rwr-card:not(.is-front) .rwr-qr{opacity:.6}
@media(max-width:560px){
  .rwr-qr{display:none}   /* you cannot scan the screen you are holding */
}
.rwr-amt i{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:600}
.rwr-note{margin:9px 0 0;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--gold-2)}
/* earning-power meter */
/* the card takes its accent from its heat rating */
.rwr-card.has-heat{border-top:3px solid var(--rc)}
.rwr-card.has-heat .rwr-amt{color:var(--rc)}
.rwr-card.heat-5{background:linear-gradient(180deg,#fff4ef,var(--panel));border-color:#f0c3ad}
.rwr-card.heat-4{background:linear-gradient(180deg,#fdf7e8,var(--panel));border-color:#e8d6a8}
.rwr-card.heat-3{background:linear-gradient(180deg,#eff9f6,var(--panel));border-color:#bfe3d9}
.rwr-card.heat-1{background:var(--panel)}
.rwr-card.has-heat .rwr-pips i.on{background:var(--rc)}
.rwr-card.has-heat .rwr-heat-l{color:var(--rc)}
.rwr-card.heat-5 .rwr-note{color:var(--rc)}
.rw-earn.has-heat{border-left:3px solid var(--rc)}
.rw-earn.has-heat .rw-earn-amt{color:var(--rc)}
.rw-earn.has-heat .rwr-pips i.on{background:var(--rc)}
.rw-earn.has-heat .rwr-heat-l{color:var(--rc)}
.rwr-heat{display:flex;align-items:center;gap:9px;margin-top:12px}
.rwr-pips{display:flex;gap:3px;flex:none}
.rwr-pips i{width:16px;height:4px;border-radius:2px;background:var(--line-2);transition:background .3s}
.rwr-pips i.on{background:linear-gradient(90deg,#e0a83a,#c2440f)}
.rwr-heat-l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}
@media(max-width:560px){ .rwr-pips i{width:13px} .rwr-heat-l{font-size:10px} }
/* The consequence of a duplicate account, said on the card itself and not
   only buried in the terms. Muted, but present before anyone signs up. */
.rwr-warn{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:#8a7550;-webkit-line-clamp:none;display:block;overflow:visible}
.rwr-warn b{color:#8f2f14}
.rwr-warn a{color:#8f2f14;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.rwr-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.rwr-meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line-2);border-radius:20px;padding:3px 9px}
.rwr-go{margin-top:14px;background:none;border:0;padding:0;color:var(--ink);font-family:inherit;
  font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;opacity:0;transition:opacity .35s ease,color .2s}
.rwr-card.is-front .rwr-go{opacity:1}
.rwr-go:hover{color:var(--gold-2)}
.rwr-card.is-done{background:#f7fbf9;border-color:#cde7de}
.rwr-card.is-done .rwr-amt{color:#1a7c69}
/* Live promotions get the same gold foil as the Ambassador
   banner, so a promotion is unmistakable in a deck of cream cards. */
.rwr-card.is-foil{border:1px solid #d9ae4d;overflow:hidden;
  background:linear-gradient(120deg,#f7e3ae 0%,#eecd82 38%,#e0a83a 100%);
  box-shadow:0 18px 40px -26px rgba(150,110,30,.9)}
.rwr-card.is-foil:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%)}
.rwr-card.is-foil > *{position:relative}
.rwr-card.is-foil .rwr-amt{color:#16233a}
.rwr-card.is-foil .rwr-amt i{color:#7a5410}
.rwr-card.is-foil h4{color:#16233a}
.rwr-card.is-foil p{color:#4a3a18}
.rwr-card.is-foil p b{color:#16233a}
.rwr-card.is-foil .rwr-warn{color:#5c4a20;border-top-color:rgba(122,84,16,.25)}
.rwr-card.is-foil .rwr-warn b{color:#16233a}
.rwr-card.is-foil .rwr-meta{color:#7a5410;border-color:rgba(122,84,16,.35)}
.rwr-card.is-foil .rwr-go{color:#16233a}
.rwr-card.is-foil .rwr-go:hover{color:#7a5410}
.rwr-card.is-foil .rw-chip-available{background:rgba(255,255,255,.55);border-color:rgba(122,84,16,.3);color:#5c4a20}
.rwr-card.is-prize{border:1px solid #e6ce9a;background:linear-gradient(180deg,#fffaf0,var(--panel))}
.rwr-card.is-prize .rwr-amt{color:#9c7410}
.rwr-card.is-prize .rwr-flag{background:#f0dcae;color:#6b4d0c}
/* The list is the same information in another shape, so it takes the same
   colour language: heat tints, gold foil for the biggest earner and live
   promotions. */
.rw-earn{position:relative;overflow:hidden}
.rw-earn.heat-5{background:linear-gradient(90deg,#fff4ef,var(--panel));border-color:#f0c3ad}
.rw-earn.heat-4{background:linear-gradient(90deg,#fdf7e8,var(--panel));border-color:#e8d6a8}
.rw-earn.heat-3{background:linear-gradient(90deg,#eff9f6,var(--panel));border-color:#bfe3d9}
.rw-earn.is-foil{border:1px solid #d9ae4d;border-left-width:3px;
  background:linear-gradient(110deg,#f7e3ae 0%,#eecd82 45%,#e0a83a 100%)}
.rw-earn.is-foil h5,.rw-earn.is-foil .rw-earn-amt{color:#16233a}
.rw-earn.is-foil p{color:#4a3a18}
.rw-earn.is-foil p b,.rw-earn.is-foil .rwr-note{color:#16233a}
.rw-earn.is-foil .rwr-heat-l{color:#7a5410}
.rw-earn.is-foil .rwr-pips i{background:rgba(122,84,16,.25)}
.rw-earn.is-foil .rwr-pips i.on{background:#16233a}
.rw-earn.is-foil .rw-earn-rep{color:#5c4a20;border-color:rgba(122,84,16,.4)}
.rw-earn.is-foil .rw-chip-available{background:rgba(255,255,255,.55);border-color:rgba(122,84,16,.3);color:#5c4a20}
.rw-earn.is-foil .rwr-warn{color:#5c4a20;border-top-color:rgba(122,84,16,.25)}
.rw-earn.is-foil .rwr-warn b{color:#16233a}
.rw-earn .rwr-flag{top:0;right:14px}
.rw-earn.is-foil .rwr-flag{background:#16233a;color:#f3d689}
.rw-earn.is-prize{border:1px solid #e6ce9a;border-left-width:3px;background:linear-gradient(90deg,#fffaf0,var(--panel))}
.rw-earn.is-prize .rw-earn-amt{color:#9c7410}
.rw-earn.is-prize .rwr-flag{background:#f0dcae;color:#6b4d0c}
.rwr-flag{z-index:2}
.rwr-card.is-foil .rwr-flag{background:#16233a;color:#f3d689}
@media (prefers-reduced-motion:reduce){ .rwr-card.is-foil:before{display:none} }
/* how-it-works deck: same shell, numbers instead of point values */
.rwr-steps{height:330px}
.rwr-scard{width:min(400px,80vw)}
.rwr-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--bg2);color:var(--gold-2);font-weight:700;font-size:15px;margin-bottom:14px}
.rwr-scard h4{font-size:19px}
.rwr-scard p{-webkit-line-clamp:5}
.rwr-scard.is-promo .rwr-num{background:#fff3dc;color:#9c7410}
@media(max-width:760px){ .rwr-steps{height:340px} .rwr-scard{width:min(320px,84vw)} }

/* Deck <-> list, on all three decks. Same content, two shapes: the deck is the
   one you browse, the list is the one you scan or search in the page. */
.rw-h-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:2px}
.rw-h-row .rw-h{margin:0}
.rw-h-row .rwr-toggle{margin-left:auto}
.rw-steplist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}
.rw-steplist[hidden]{display:none}
.rw-stepitem{display:flex;gap:18px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.rw-stepitem .rwr-num{margin-bottom:0;flex:0 0 auto}
.rw-stepitem h4{margin:0 0 4px;font-size:17px}
.rw-stepitem p{margin:0;font-size:14px;line-height:1.6;color:var(--dim)}
@media(min-width:901px){.rw-steplist .rw-stepitem:last-child{grid-column:1/-1}}
@media(max-width:900px){.rw-steplist{grid-template-columns:1fr}}
/* the ladder, as a deck */
.rwr-tiers{height:340px}
.rwr-tcard{width:min(400px,80vw)}
.rwr-tloc{margin-bottom:10px}
.rwr-tcard .rwr-num{width:auto;min-width:66px;border-radius:20px;padding:0 14px;font-size:16px;margin-bottom:12px}
.rwr-tcard h4{font-size:19px}
.rwr-tcard.is-star{border-color:var(--gold)}
.rwr-tcard.is-star .rwr-num{background:#fff3dc;color:#9c7410}
.rw-tiers[hidden]{display:none}
.ct-hint{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--dim)}
.ct-hint b{color:var(--mut);font-weight:600}
@media(max-width:760px){ .rwr-tiers{height:380px} .rwr-tcard{width:min(320px,84vw)} }
.rwr-flag{position:absolute;top:-1px;right:18px;background:var(--gold);color:#1a1204;font-size:10.5px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:0 0 6px 6px}
.rwr-nav{position:absolute;top:50%;margin-top:-23px;z-index:30;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font-size:20px;line-height:1;
  font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.rwr-nav:hover{border-color:var(--gold);color:var(--gold-2)}
.rwr-nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rwr-nav.prev{left:6px} .rwr-nav.next{right:6px}
.rwr-dots{display:flex;gap:9px;justify-content:center;margin:16px 0 4px}
.rwr-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:18px 0 4px}
.rwr-chips[hidden]{display:none}
.rwr-chip{display:flex;align-items:baseline;gap:6px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:30px;padding:7px 15px;font-family:inherit;cursor:pointer;transition:.22s;white-space:nowrap}
.rwr-chip b{font-size:13.5px;font-weight:700;color:var(--gold-2);letter-spacing:-.01em}
.rwr-chip span{font-size:12.5px;color:var(--mut)}
.rwr-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.rwr-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rwr-chip.on{background:var(--ink);border-color:var(--ink)}
.rwr-chip.on b{color:#f3d689}
.rwr-chip.on span{color:#e6e2d9}
@media(max-width:560px){
  .rwr-chips{gap:7px}
  .rwr-chip{padding:6px 12px}
  .rwr-chip b{font-size:12.5px} .rwr-chip span{font-size:11.5px}
}
.rwr-dots[hidden]{display:none}
.rwr-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:.3s}
.rwr-dots i.on{background:var(--ink);transform:scale(1.2)}
.rwr-hint{text-align:center;font-size:12px;color:var(--dim);margin:6px 0 0}
.rwr-hint[hidden]{display:none}
@media(max-width:760px){
  .rwr{height:380px}
  .rwr-card{width:min(320px,84vw);padding:22px 20px 18px}
  .rwr-nav{width:40px;height:40px;margin-top:-20px;font-size:18px}
  .rwr-nav.prev{left:0} .rwr-nav.next{right:0}
  .rwr-toggle{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ .rwr-card{transition:none} }
.rw-earn-sum b{color:var(--ink);font-weight:600}
.rw-earn-prog{flex:0 0 130px;height:6px;border-radius:6px;background:#e8e3d8;overflow:hidden}
.rw-earn-prog i{display:block;height:100%;background:var(--gold);border-radius:6px;transition:width .5s ease}
.rw-earn-next{padding-left:14px;border-left:1px solid var(--line-2)}
@media(max-width:560px){
  .rw-earn-next{padding-left:0;border-left:0;flex-basis:100%}
}
  .rw-earn h5{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--ink)}
  .rw-earn p{margin:0;font-size:13px;line-height:1.5;color:var(--mut);font-weight:400}
  .rw-cta{text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:52px 30px;margin:8px 0 34px}
  .rw-cta h3{font-size:clamp(22px,3vw,30px);font-weight:200;color:var(--ink);margin:0 0 10px}
  .rw-cta p{font-size:15px;color:var(--mut);font-weight:400;margin:0 auto 24px;max-width:440px}
  .rw-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .rw-fine{font-size:11.5px;line-height:1.7;color:var(--dim);max-width:820px;margin:0 auto;text-align:center}
  @media(max-width:820px){.rw-tiers{grid-template-columns:1fr}.rw-earns{grid-template-columns:1fr}}
  /* CONTACT PAGE */
  .ct-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start}
  .ct-info{padding-top:6px}
  .ct-item{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
  .ct-k{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
  .ct-v{font-size:22px;font-weight:200;color:var(--ink);text-decoration:none;transition:.25s}
  .ct-v:hover{color:var(--gold-2)}
  .ct-social{display:flex;gap:18px}
  .ct-social a{font-size:15px;color:var(--gold-2);text-decoration:none;font-weight:500;border-bottom:1px solid var(--line-2);transition:.25s}
  .ct-social a:hover{color:var(--ink)}
  .ct-note{font-size:13.5px;line-height:1.7;color:var(--mut);font-weight:400;margin-top:4px}
  .ct-form-wrap{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:38px 40px}
  .ct-form-h{margin:0 0 22px;font-size:20px;font-weight:600;color:var(--ink)}
  .ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ct-field{display:block;margin-bottom:18px}
  .ct-field>span{display:block;font-size:12px;letter-spacing:.06em;color:var(--mut);margin-bottom:7px;font-weight:500}
  .ct-field i{color:var(--orange);font-style:normal;margin-left:2px}
  .ct-field input,.ct-field textarea{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);transition:.25s;resize:vertical}
  .ct-field input:focus,.ct-field textarea:focus{outline:none;border-color:var(--gold);background:#fff}
  .ct-consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 22px}
  .ct-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--gold-2)}
  .ct-consent span{font-size:11.5px;line-height:1.65;color:var(--dim);font-weight:400}
  .ct-consent a{color:var(--gold-2);text-decoration:underline}
  .ct-submit{width:100%;justify-content:center}
  .ct-thanks{background:rgba(191,143,56,.1);border:1px solid var(--gold);border-radius:12px;padding:20px;text-align:center;color:var(--ink);font-size:15px;font-weight:400}
  .ct-demo{font-size:11px;color:var(--dim);text-align:center;margin:16px 0 0;font-weight:400}
  @media(max-width:820px){.ct-grid{grid-template-columns:1fr;gap:32px}.ct-form-wrap{padding:30px 24px}.ct-row2{grid-template-columns:1fr}}
  /* CART + AUTH */
  .nav-cart{position:relative;background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;padding:6px;transition:.25s}
  .nav-cart:hover{color:var(--gold-2)}
  .nav-cart .cico{width:22px;height:22px;display:block}
  .cart-badge{position:absolute;top:-3px;right:-5px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
  .cart-badge.empty{display:none}
  .cart-scrim{position:fixed;inset:0;background:rgba(22,35,58,.42);opacity:0;visibility:hidden;transition:.3s;z-index:8600}
  .cart-scrim.on{opacity:1;visibility:visible}
  .cart-drawer{position:fixed;top:0;right:0;height:100%;width:430px;max-width:92vw;background:var(--panel);box-shadow:-24px 0 70px rgba(22,35,58,.18);transform:translateX(102%);transition:transform .38s var(--ease);z-index:8700;display:flex;flex-direction:column}
  .cart-drawer.on{transform:translateX(0)}
  .cart-head{padding:26px 26px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
  .cart-head h3{margin:0;font-size:18px;font-weight:600;color:var(--ink)}
  .cart-close{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--mut)}
  .cart-items{flex:1;overflow-y:auto;padding:6px 26px}
  .cart-line{display:flex;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
  .cart-line .ci-ic{width:54px;height:54px;border-radius:11px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .cart-line .ci-ic svg{width:32px;height:32px}
  .cart-line .ci-info{flex:1;min-width:0}
  .cart-line h5{margin:0 0 3px;font-size:14.5px;font-weight:600;color:var(--ink)}
  .cart-line .ci-sub{font-size:12px;color:var(--mut)}
  .cart-line .ci-pr{font-size:13px;color:var(--ink);font-weight:600;margin-top:4px}
  .ci-qty{display:flex;align-items:center;gap:9px;flex:0 0 auto}
  .ci-qty button{width:28px;height:28px;border:1px solid var(--line-2);background:var(--bg);border-radius:7px;cursor:pointer;font-size:15px;color:var(--ink);line-height:1}
  .ci-qty button:hover{border-color:var(--gold)}
  .ci-qty span{min-width:18px;text-align:center;font-size:13px;font-weight:600}
  .cart-empty{padding:56px 20px;text-align:center;color:var(--mut);font-size:15px}
  .cart-empty p{margin:0 0 16px}
  .cart-done{width:52px;height:52px;border-radius:50%;background:rgba(191,143,56,.14);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto}
  .cart-empty h4{color:var(--ink);font-size:18px}
  .cart-foot{padding:22px 26px 26px;border-top:1px solid var(--line)}
  .cart-sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;font-size:15px;color:var(--mut)}
  .cart-sub b{font-size:20px;color:var(--ink)}
  .cart-note{font-size:11px;color:var(--dim);margin:14px 0 0;text-align:center;line-height:1.6}
  .auth-modal{position:fixed;inset:0;z-index:8800;display:none;align-items:center;justify-content:center;padding:20px}
  .auth-modal.on{display:flex}
  .auth-scrim{position:absolute;inset:0;background:rgba(22,35,58,.5)}
  .auth-card{position:relative;background:var(--panel);border-radius:22px;padding:40px;max-width:420px;width:100%;box-shadow:0 30px 90px rgba(22,35,58,.28);z-index:1}
  .auth-x{position:absolute;top:16px;right:20px;background:none;border:none;font-size:26px;line-height:1;color:var(--mut);cursor:pointer}
  .auth-brand{font-size:12px;letter-spacing:.24em;font-weight:700;color:var(--gold-2);margin-bottom:16px}
  .auth-h{margin:0 0 6px;font-size:24px;font-weight:200;letter-spacing:-.01em;color:var(--ink)}
  .auth-sub{margin:0 0 22px;font-size:14px;color:var(--mut);font-weight:400;line-height:1.6}
  .auth-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .auth-alt{margin-top:18px;font-size:13.5px;color:var(--mut);text-align:center}
  .auth-alt a{color:var(--gold-2);cursor:pointer;font-weight:600}
  .auth-fine{margin:14px 0 0;font-size:11px;color:var(--dim);text-align:center}
  .acct-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:22px;align-items:start}
  .acct-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px}
  .acct-card h4{margin:0 0 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600}
  .acct-pts{font-size:46px;font-weight:200;color:var(--gold-2);line-height:1;margin-bottom:10px}
  .acct-order{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
  .acct-order:last-child{border-bottom:none}
  .st.paid{background:rgba(87,165,110,.14);color:#3f8259;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
  @media(max-width:720px){.acct-grid{grid-template-columns:1fr}.auth-card{padding:32px 24px}}
  .crumb{font-size:12px;color:var(--mut);letter-spacing:.1em;margin-bottom:16px}
  .crumb a{color:var(--gold-2);cursor:pointer}
  .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  .p-grid>*{min-width:0}
  @media(max-width:940px){.p-grid{grid-template-columns:1fr;gap:44px}}
  /* one-screen variant used on collection pages */
  .p-sec.is-tight{padding:56px 0 48px}
  .p-sec.is-tight .sec-head{margin-bottom:14px}
  .p-sec.is-tight .sec-head .display{font-size:clamp(26px,3.4vw,40px);line-height:1.02}
  .p-sec.is-tight .num-tag{margin-bottom:6px}
  .p-grid.p-tight{gap:46px;align-items:start}
  .p-grid.p-tight .prod-stage{min-height:330px}
  .p-grid.p-tight .pname{font-size:clamp(26px,2.9vw,40px);margin:6px 0 4px;line-height:1.02}
  .p-grid.p-tight .pdesc{font-size:15px;line-height:1.55;margin:8px 0 10px}
  .p-grid.p-tight .pspec{margin:4px 0 0}
  .p-grid.p-tight .lab{margin:12px 0 0}
  .p-grid.p-tight .lab h4{margin-bottom:9px}
  .p-grid.p-tight .ai-rec{margin-top:12px;padding:12px 15px}
  .p-grid.p-tight .ai-rec p{font-size:14px;line-height:1.55;margin:6px 0 0}
  .p-grid.p-tight .buyrow{margin-top:12px}
  .p-grid.p-tight .qr-note{margin:0}
  /* the pack art is a px-composed card, so it is scaled rather than re-laid-out */
  /* A real square, sized from the column, rather than a fixed 376px band: this
     is the space a photograph will occupy once one exists, so it is reserved
     now and the layout will not move when the art is swapped in. */
  .p-grid.p-tight .prod-stage{min-height:0;height:auto;aspect-ratio:1/1;
    width:100%;max-width:520px;margin-left:auto;margin-right:auto;overflow:visible}
  .p-grid.p-tight .prod-shot-lg{transform:scale(.96);transform-origin:center center}
  /* Flavour notes and Suggested for now sit clear of the pack instead of
     crowding its lower edge. */
  .p-grid.p-tight .prod-stage + .lab{margin-top:40px}
  .p-grid.p-tight .meter{margin-bottom:9px}
  .p-grid.p-tight .meter .top{font-size:12.5px;margin-bottom:5px}
  .p-grid.p-tight .meter-total{padding:11px 14px 10px;margin-bottom:10px}
  .p-grid.p-tight .meter-note{margin-top:6px;font-size:10.5px;line-height:1.4}
  .p-grid.p-tight .ai-rec{padding:12px 15px}
  /* the four secondary cannabinoids read fine two-up and save a whole screen */
  .p-grid.p-tight .lab-cann{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
  .p-grid.p-tight .lab-cann>h4,.p-grid.p-tight .lab-cann>.meter-total{grid-column:1/-1}
  .p-sec.is-tight .sec-head-inline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
  .p-sec.is-tight .sec-head-inline .num-tag{margin:0}
  .p-sec.is-tight .sec-head-inline .display{font-size:clamp(22px,2.4vw,30px);margin:0;line-height:1.05}
  .p-grid.p-tight .qr-note{margin:0;padding:11px 14px}
  .p-grid.p-tight .buyrow .btn{padding:11px 20px}
  @media(max-width:620px){.p-grid.p-tight .lab-cann{grid-template-columns:1fr}}
  @media(max-width:940px){
    .p-sec.is-tight{padding:40px 0 38px}
    .p-grid.p-tight{gap:26px}
    .p-grid.p-tight .prod-stage{min-height:0;height:auto;aspect-ratio:1/1;max-width:330px}
    .p-grid.p-tight .prod-shot-lg{transform:scale(.82)}
    .p-grid.p-tight .prod-stage + .lab{margin-top:26px}
  }
  .stage{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;margin-left:auto;margin-right:auto;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 42%,var(--gl,rgba(191,143,56,.14)),transparent 60%),#f5f2ec}
  .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}.stage canvas:active{cursor:grabbing}
  .stage .b360{position:absolute;top:18px;left:18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);padding:7px 12px;border-radius:20px;background:rgba(255,255,255,.7);z-index:2}
  .stage .hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--dim);font-size:10px;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;z-index:2}
  .pcat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--pc,var(--gold));font-weight:600}
  .pname{font-size:clamp(32px,5vw,58px);margin:10px 0 8px;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
  .pspec{color:var(--dim);font-size:12.5px;letter-spacing:.04em;margin:12px 0 0;font-weight:500}
  .pdesc{color:var(--mut);font-size:16px;margin:14px 0 26px;max-width:480px;font-weight:400;line-height:1.7}
  .lab{margin:24px 0}
  .lab h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:600}
  .meter{margin-bottom:14px}
  .meter .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}.meter .top b{color:#fff}.meter .top span{color:var(--mut)}
  .track{height:5px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
  .fill{height:100%;border-radius:6px;transition:width 1.2s var(--ease)}
  .chips-row{display:flex;gap:9px;flex-wrap:wrap}
  /* flavour chips: line-art family mark, tinted, in place of emoji */
  .tagpill-fl{display:inline-flex;align-items:center;gap:8px}
  .tagpill-fl .fl-i{width:17px;height:17px;flex:0 0 auto;display:block;
    fill:none;stroke:var(--fl,var(--gold));stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:560px){.tagpill-fl .fl-i{width:15px;height:15px}}
  .tagpill{border:1px solid var(--line-2);border-radius:30px;padding:9px 16px;font-size:13px;color:#4e5968;font-weight:400}
  .ai-rec{margin-top:28px;border:1px solid rgba(217,168,106,.28);background:rgba(217,168,106,.05);border-radius:6px;padding:20px 22px}
  .ai-rec .h{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:10px}
  .ai-rec .h .o{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe3c4,var(--gold));box-shadow:0 0 12px var(--gold)}
  .ai-rec p{font-size:14px;color:#e9e5df;font-weight:400}.ai-rec p b{color:#fff;font-weight:600}
  .buyrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
  .rel{border:1px solid var(--line);border-radius:8px;padding:24px;transition:.4s var(--ease);cursor:pointer;background:var(--panel2)}
  .rel:hover{transform:translateY(-5px);border-color:var(--rc)}
  .rel .sw{width:40px;height:40px;border-radius:10px;margin-bottom:18px;background:var(--rc)}
  .rel h5{font-size:19px;font-weight:700;margin-bottom:4px}.rel .t{font-size:12px;color:var(--mut)}
  .rel .m{font-size:12px;color:var(--rc);font-weight:600;margin-top:14px}

  /* COLLECTION IMMERSIVE */
  .c-hero{min-height:auto;display:flex;align-items:flex-start;position:relative;overflow:hidden;padding:108px 0 34px}
  .c-hero + section{padding-top:56px}   /* the story follows straight on */
  .c-hero .cbg{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,var(--cga),transparent 55%),radial-gradient(ellipse at 18% 78%,var(--cgb,transparent),transparent 52%),radial-gradient(ellipse at 10% 90%,rgba(255,255,255,.03),transparent 45%),var(--bg)}
  .c-hero .big{position:absolute;left:50%;transform:translateX(-50%);top:12%;font-weight:800;font-size:clamp(44px,9.2vw,150px);letter-spacing:-.04em;color:rgba(255,255,255,.035);text-transform:uppercase;pointer-events:none;line-height:.8;white-space:nowrap;max-width:none}
  .c-hero .inner{position:relative;z-index:2;text-align:center;max-width:960px;margin-left:auto;margin-right:auto}
  .c-hero .crumb{justify-content:center;display:flex;gap:6px}
  .c-hero .tag{color:var(--cca);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:17px;margin-bottom:16px}
  /* The crumb and the kicker sat at 12px under a 130px display heading, so
     neither registered as you arrived — the eye went straight to the name and
     skipped the two lines that say where you are and what this walker is for. */
  .c-hero .crumb{font-size:15px;letter-spacing:.06em;margin-bottom:24px}
  @media(max-width:560px){
    .c-hero .tag{font-size:13.5px;letter-spacing:.16em;margin-bottom:12px}
    .c-hero .crumb{font-size:13px;margin-bottom:16px}
  }
  .c-hero h1{font-size:clamp(38px,6vw,76px);font-weight:800;letter-spacing:-.035em;text-transform:uppercase;line-height:.94;white-space:nowrap}
  .c-hero .lead{max-width:520px;color:#d4cfc7;font-size:17px;font-weight:400;margin:16px auto 22px}
  .c-hero .hero-ctas{justify-content:center}
  @media(max-width:600px){.c-hero h1{white-space:normal;font-size:clamp(34px,11vw,60px)}}
  .c-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  @media(max-width:940px){.c-split{grid-template-columns:1fr;gap:44px}}
  .c-story p{color:#4e5968;font-size:17px;font-weight:400;line-height:1.75;margin-bottom:16px}
  .c-story .pull{border-left:2px solid var(--cca);padding-left:20px;margin:24px 0;font-size:20px;font-style:italic;color:#fff;font-weight:500}
  .videoblk{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(120deg,#0c0d10,#0a0b0e);display:flex;align-items:center;justify-content:center}
  .videoblk .vgrad{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--cga),transparent 60%);animation:breathe 6s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
  .videoblk .play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;border:1px solid var(--line-2);background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;transition:.3s}
  .videoblk:hover .play{border-color:var(--cca);transform:scale(1.06)}
  .videoblk .vlabel{position:absolute;bottom:14px;left:16px;z-index:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

  /* WHERE TO BUY */
  .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  @media(max-width:940px){.loc-grid{grid-template-columns:1fr;gap:32px}}
  .loc-search{display:flex;gap:8px;margin-bottom:24px}
  .loc-search input{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:#fff;padding:15px 18px;border-radius:3px;font-size:15px;font-family:inherit}
  .loc-search input:focus{outline:none;border-color:var(--gold)}
  .store{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
  .store .n{font-weight:600;font-size:16px}.store .a{font-size:13px;color:var(--mut);font-weight:400;margin-top:2px}
  .store .d{font-size:13px;color:var(--gold-2);white-space:nowrap;font-weight:500}
  .store .stk{font-size:11px;color:#3f8259;margin-top:4px}
  .store{cursor:pointer;transition:background .2s,padding-left .2s}
  .store:hover{background:rgba(255,255,255,.02);padding-left:8px}
  .store .m2{font-size:12px;color:var(--mut);font-weight:400;margin-top:5px}
  .store .m2 a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid transparent}
  .store .m2 a:hover{border-bottom-color:var(--gold-2)}
  /* which Walkers a shop has — the difference between a worthwhile trip and a wasted one */
  .store-main{min-width:0;flex:1 1 auto}
  .store-flag{display:inline-block;margin-left:9px;font-size:10px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:#8a5a00;background:rgba(217,168,106,.18);border-radius:20px;padding:3px 9px;vertical-align:middle}
  .cbadges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .cbadge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:20px;
    padding:4px 10px 4px 6px;background:var(--panel);transition:.2s}
  .cbadge .cb-art{position:relative;width:20px;height:16px;display:block;flex:0 0 auto}
  .cbadge .cb-art img{width:100%;height:100%;object-fit:contain;display:block;opacity:0}
  .cbadge .cb-tint{position:absolute;inset:0;background:var(--rc);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
  .cbadge .cb-n{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
  .cbadge.is-off{opacity:.34;border-style:dashed}
  .cbadge.is-off .cb-tint{background:var(--dim)}
  .cbadge.is-off .cb-n{color:var(--dim);text-decoration:line-through}
  /* filter: find the shop that has the one you want */
  .cfilbar{margin:0 0 16px}
  .cfil-k{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
  .cfil-row{display:flex;gap:7px;flex-wrap:wrap}
  .cfil{font-family:inherit;cursor:pointer;font-size:12px;font-weight:600;padding:7px 13px;border-radius:20px;
    background:var(--panel);border:1px solid var(--line);color:var(--mut);transition:.2s}
  .cfil:hover{border-color:var(--rc,var(--line-2));color:var(--ink)}
  .cfil.on{border-color:var(--rc,var(--gold));color:var(--ink);box-shadow:inset 0 0 0 1px var(--rc,var(--gold))}
  @media(max-width:560px){ .cbadge .cb-n{font-size:10px} .cbadge{padding:3px 8px 3px 5px} }
  .bokmap{width:100%;height:560px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0b0e13;position:sticky;top:96px}
  @media(max-width:940px){.bokmap{height:420px;position:relative;top:0}}
  .bokmap .map-fb{display:flex;align-items:center;justify-content:center;height:100%;color:var(--mut);font-size:14px;padding:24px;text-align:center;line-height:1.6}
  /* the join panel under the map — same card language, deliberately not gold:
     it sits beside the map, not on top of the page */
  .buyjoin{display:flex;gap:22px;align-items:center;margin-top:16px;padding:22px 24px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px}
  .bj-qr{flex:0 0 auto;width:118px;height:118px;border-radius:8px;display:block;background:#fff;
    padding:7px;border:1px solid var(--line)}
  .bj-txt{flex:1 1 auto;min-width:0}
  .bj-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .bj-h{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:7px 0 0;line-height:1.3}
  .bj-h b{color:var(--gold-2)}
  .bj-p{font-size:13.5px;line-height:1.6;color:var(--mut);margin:8px 0 0}
  .bj-p b{color:var(--ink)}
  .bj-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .buyjoin.is-member{display:block}
  .bj-bar{height:7px;border-radius:6px;background:var(--bg2);margin:12px 0 0;overflow:hidden}
  .bj-bar i{display:block;height:100%;border-radius:6px;background:var(--gold-2)}
  @media(max-width:940px){.buyjoin{margin-top:14px}}
  @media(max-width:700px){
    .buyjoin{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
    .bj-qr{display:none}          /* you cannot scan the screen you are holding */
    .bj-btns .btn{width:100%;justify-content:center}
  }
  .leaflet-popup-content-wrapper{border-radius:8px}
  .leaflet-popup-content{font-family:inherit;color:#141414;font-size:13px;line-height:1.5}
  .leaflet-popup-content b{color:#000}
  .mapbox{aspect-ratio:1/1;border-radius:6px;border:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(circle at 60% 40%,rgba(217,168,106,.14),transparent 55%),linear-gradient(135deg,#0c0d10,#0a0b0e)}
  .mapbox .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.5}
  .mapbox .pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.2),0 0 16px var(--orange)}
  .mapbox .pin.g{background:var(--gold);box-shadow:0 0 0 4px rgba(217,168,106,.2),0 0 16px var(--gold)}
  .mapbox .lab{position:absolute;bottom:16px;left:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

  /* SHOP */
  .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
  .merch{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel2);transition:.45s var(--ease);cursor:pointer}
  .merch:hover{transform:translateY(-6px);border-color:var(--line-2)}
  .merch .art{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--mg,rgba(255,90,31,.16)),transparent 62%),#0b0c0f}
  .merch .art .ico{font-size:64px;transition:.5s var(--ease);filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
  .merch .art .ico svg{width:98px;height:98px;display:block}
  .merch:hover .art .ico{transform:scale(1.08) rotate(-3deg)}
  .merch .art .tag{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#0a0a0a;background:var(--gold);padding:5px 9px;border-radius:20px;font-weight:700}
  .merch .info{padding:20px}.merch .info h5{font-size:17px;font-weight:600;margin-bottom:3px}.merch .info .t{font-size:12px;color:var(--mut);font-weight:400}
  .merch .info .row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
  .merch .info .pr{font-size:16px;font-weight:600;color:var(--gold-2)}
  .merch .info .add{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);padding:8px 12px;border-radius:2px;transition:.3s;background:none;cursor:pointer;font-family:inherit}
  .merch .info .add:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(191,143,56,.06)}
  .merch:hover .info .add{border-color:var(--gold);color:var(--gold-2)}

  /* WHOLESALE */
  .portal{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}
  .portal-top{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);flex-wrap:wrap;gap:10px}
  .portal-top .l{display:flex;align-items:center;gap:12px;font-weight:600;font-size:13px}.portal-top .l .lock{color:var(--gold)}
  .portal-top .r{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--mut)}
  .live{display:flex;align-items:center;gap:7px;color:#3f8259;font-weight:600}
  .live .d{width:7px;height:7px;border-radius:50%;background:#66d19e;box-shadow:0 0 10px #66d19e;animation:tw 1.6s infinite}
  table{width:100%;border-collapse:collapse}
  th,td{text-align:left;padding:15px 24px;font-size:14px;border-bottom:1px solid var(--line)}
  th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600}
  .pill{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700}
  .pill.in{background:rgba(102,209,158,.14);color:#3f8259}.pill.low{background:rgba(255,180,84,.14);color:var(--gold-2)}.pill.out{background:rgba(255,90,31,.14);color:var(--orange)}
  .qbtn{width:26px;height:26px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:#fff;border-radius:4px;font-size:15px;cursor:pointer;font-family:inherit}
  .qty{display:inline-flex;align-items:center;gap:9px}
  .portal-foot{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-top:1px solid var(--line);flex-wrap:wrap;gap:14px}
  .portal-foot .tot{font-size:14px;color:var(--mut)}.portal-foot .tot b{color:#fff;font-size:22px}
  .inv-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
  .inv-tab{border:1px solid var(--line-2);background:transparent;color:var(--mut);padding:10px 18px;border-radius:30px;font-size:13px;font-family:inherit;cursor:pointer;transition:.3s}
  .inv-tab.on{background:var(--ink);color:#0a0a0a;border-color:var(--ink)}
  .invoice-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
  .invoice-row .st{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:700}
  .st.paid{background:rgba(102,209,158,.14);color:#3f8259}.st.due{background:rgba(255,180,84,.14);color:var(--gold-2)}

  /* MANIFESTO */
  .manifesto{background:radial-gradient(circle at 50% 50%,rgba(255,90,31,.1),transparent 60%),var(--bg2);text-align:center}
  .manifesto h2{font-size:clamp(38px,7vw,84px);font-weight:800;letter-spacing:-.04em;line-height:.98}
  .manifesto p{color:var(--mut);max-width:560px;margin:26px auto 34px;font-size:18px;font-weight:400}

  footer{background:var(--bg2);padding:70px 0 44px;border-top:1px solid var(--line)}
  .foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:40px}
  .foot-brand{font-weight:700;letter-spacing:.2em;font-size:18px}.foot-brand .dot{color:var(--gold)}
  .foot-cols{display:grid;grid-template-columns:repeat(4,minmax(150px,auto));gap:44px 64px;justify-content:end}
  .foot-col h6{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 16px;font-weight:700}
  .foot-col a{display:block;font-size:13.5px;color:var(--mut);margin-bottom:12px;font-weight:400;cursor:pointer;line-height:1.4;white-space:nowrap;transition:.2s}.foot-col a:hover{color:var(--gold-2)}.foot-col a:last-child{margin-bottom:0}
  .disc{font-size:12.5px;line-height:1.75;color:var(--dim);max-width:840px;margin-top:20px}
  .disc .warn{color:var(--mut);font-weight:600;display:block;margin-bottom:8px}
  .copy{margin-top:22px;font-size:11px;color:#3d3a35}

  .reveal{opacity:0;transform:translateY(30px);transition:.85s var(--ease)}.reveal.in{opacity:1;transform:none}
  #aiFab{position:fixed;bottom:26px;right:26px;z-index:700;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:40px;padding:12px 18px;box-shadow:0 14px 38px rgba(22,35,58,.16);cursor:pointer;color:var(--ink)}
  #aiFab .o{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe3c4,var(--gold));box-shadow:0 0 14px var(--gold)}
  #aiFab span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

  .gate-logo-wrap{position:relative;display:block;width:230px;max-width:72vw;margin:0 auto 26px}
  .gate-logo-wrap .gate-logo{display:block;width:100%;margin:0}
  .gate-logo-wrap .sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,248,225,.95) 50%,transparent 60%);transform:translateX(-130%);animation:sheen 3.6s ease-in-out infinite;mix-blend-mode:screen}
  @keyframes sheen{0%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
  .leaf{position:absolute;width:16px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cg fill='%23cfa24a'%3E%3Cellipse cx='20' cy='24' rx='3' ry='16'/%3E%3Cellipse cx='20' cy='24' rx='2.7' ry='14' transform='rotate(30 20 40)'/%3E%3Cellipse cx='20' cy='24' rx='2.7' ry='14' transform='rotate(-30 20 40)'/%3E%3Cellipse cx='20' cy='26' rx='2.2' ry='11' transform='rotate(58 20 40)'/%3E%3Cellipse cx='20' cy='26' rx='2.2' ry='11' transform='rotate(-58 20 40)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;z-index:2;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
  .leaf.burst{position:fixed;z-index:9999;top:0}
  @keyframes leafFloat{0%{opacity:0;transform:translateY(30px) rotate(0)}12%{opacity:.55}88%{opacity:.55}100%{opacity:0;transform:translateY(-140px) rotate(200deg)}}
  @keyframes leafFall{0%{opacity:1;transform:translate(0,-8vh) rotate(0)}100%{opacity:0;transform:translate(var(--dx),112vh) rotate(var(--dr))}}
  .cc-scene{position:absolute;inset:0;overflow:hidden;z-index:0}
  .cc-scene svg{width:100%;height:100%;display:block}
  .cc-veil{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(5,7,11,.22) 0%,rgba(5,7,11,.4) 32%,rgba(4,6,10,.68) 58%,rgba(3,5,9,.92) 100%),linear-gradient(100deg,rgba(8,12,28,.66) 0%,rgba(8,10,20,.34) 44%,rgba(12,8,6,.05) 74%,rgba(30,14,4,0) 100%)}
  #concierge .aura{z-index:1}
  #concierge .cc{position:relative;z-index:2}
  .sc-star{fill:#fff;opacity:.5;animation:twinkle 3.6s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.95}}
  .sc-sun{animation:sunbob 14s ease-in-out infinite alternate}
  @keyframes sunbob{from{transform:translateY(16px)}to{transform:translateY(-10px)}}
  .sc-moon{animation:moonbob 20s ease-in-out infinite alternate}
  @keyframes moonbob{from{transform:translate(0,0)}to{transform:translate(-12px,10px)}}
  .sc-walker{animation:walkerFade 12s linear infinite}
  @keyframes walkerFade{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
  .sc-bob{animation:bob 1.1s ease-in-out infinite}
  .sc-bob2{animation:bob 1.1s ease-in-out .3s infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  #ccStars,#ccNear{transition:transform .25s ease-out;will-change:transform}
  .shoot{opacity:0}
  .shoot1{animation:shootA 9s ease-in 2.5s infinite}
  .shoot2{animation:shootB 13s ease-in 8s infinite}
  @keyframes shootA{0%{opacity:0;transform:translate(150px,26px)}3%{opacity:.95}15%{opacity:0}100%{opacity:0;transform:translate(560px,150px)}}
  @keyframes shootB{0%{opacity:0;transform:translate(820px,50px)}3%{opacity:.95}14%{opacity:0}100%{opacity:0;transform:translate(1130px,190px)}}
  .btn.mag{transition:transform .18s cubic-bezier(.2,.7,.2,1)}
  .sc-sunglow{animation:sunPulse 6s ease-in-out infinite}
  @keyframes sunPulse{0%,100%{opacity:.82}50%{opacity:1}}
  .shoot3{animation:shootC 12s ease-in 5s infinite}
  .shoot4{animation:shootD 16.5s ease-in 11s infinite}
  @keyframes shootC{0%{opacity:0;transform:translate(400px,18px)}3%{opacity:.9}15%{opacity:0}100%{opacity:0;transform:translate(770px,150px)}}
  @keyframes shootD{0%{opacity:0;transform:translate(60px,90px)}3%{opacity:.9}14%{opacity:0}100%{opacity:0;transform:translate(370px,250px)}}
  .ember{position:absolute;bottom:-8px;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#ffe0a0,#ff9e3d);box-shadow:0 0 8px #ffb347;pointer-events:none;opacity:0;z-index:1;animation:emberRise linear infinite}
  @keyframes emberRise{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:.85}100%{opacity:0;transform:translateY(-360px) scale(1.15)}}
  .sc-star.bright{fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
  .instar{position:absolute;left:50%;top:40%;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;pointer-events:none;opacity:0;z-index:1;animation:warp linear infinite}
  @keyframes warp{0%{opacity:0;transform:translate(0,0) scale(.2)}12%{opacity:.85}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(2.7)}}
  .cc h2{text-shadow:0 2px 30px rgba(0,0,0,.62),0 1px 4px rgba(0,0,0,.4)}
  .cc .sub{text-shadow:0 1px 12px rgba(0,0,0,.55)}
  .cc-kicker{text-shadow:0 1px 10px rgba(0,0,0,.55)}
  .cc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:kenburns 34s ease-in-out infinite alternate}
  @keyframes kenburns{0%{transform:scale(1.06)}100%{transform:scale(1.15) translate(-1.6%,-1.2%)}}
  #concierge .cc-orb{transform:scale(.6);margin:0 auto 8px}
  .cc-sky{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
  .cc-sky .star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.7);animation:twk 3.6s ease-in-out infinite}
  @keyframes twk{0%,100%{opacity:.14}50%{opacity:.92}}
  .cc-sunhaze{position:absolute;right:-6%;top:30%;width:56%;height:66%;background:radial-gradient(ellipse at 72% 42%,rgba(255,178,92,.22),rgba(255,150,70,.08) 42%,transparent 66%);animation:sunpulse 8s ease-in-out infinite}
  @keyframes sunpulse{0%,100%{opacity:.8}50%{opacity:1}}
  .cc-moon{position:absolute;left:12%;top:14%;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 40% 37%,#fdfbf4,#eae7dc 55%,#c9c7be);box-shadow:0 0 42px 12px rgba(224,230,255,.16),0 0 96px 34px rgba(190,205,240,.1);animation:moonrise 5.5s ease-out both,moonfloat 13s ease-in-out 5.5s infinite}
  @keyframes moonrise{0%{transform:translateY(46px);opacity:0}100%{transform:translateY(0);opacity:1}}
  @keyframes moonfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .shootstar{position:absolute;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));opacity:0}
  .s1{left:6%;top:11%;animation:shoot1 10s ease-in 3s infinite}
  .s2{left:24%;top:5%;animation:shoot2 15s ease-in 9s infinite}
  @keyframes shoot1{0%{opacity:0;transform:translate(0,0) rotate(22deg)}4%{opacity:.9}18%{opacity:0}100%{opacity:0;transform:translate(240px,98px) rotate(22deg)}}
  @keyframes shoot2{0%{opacity:0;transform:translate(0,0) rotate(26deg)}4%{opacity:.9}16%{opacity:0}100%{opacity:0;transform:translate(200px,88px) rotate(26deg)}}
  #concierge .aura{display:none}
  #concierge .cc{z-index:3}
  .chip .ic{color:#ecca9c;font-weight:700;margin-right:3px;font-size:15px}
  .milkyway{position:absolute;left:-4%;top:-8%;width:78%;height:66%;pointer-events:none;background:radial-gradient(ellipse at 34% 34%,rgba(200,212,255,.12),rgba(200,212,255,.035) 46%,transparent 66%);transform:rotate(-18deg)}
  .aurora{position:absolute;left:-4%;top:3%;width:62%;height:50%;pointer-events:none;filter:blur(17px);mix-blend-mode:screen;opacity:.55}
  .aurora span{position:absolute;bottom:0;width:26%;border-radius:46% 46% 0 0;background:linear-gradient(to top,rgba(70,215,160,0),rgba(84,224,172,.5) 42%,rgba(120,196,255,.26) 78%,transparent);transform-origin:bottom;animation:aur 9s ease-in-out infinite}
  @keyframes aur{0%,100%{opacity:.32;transform:scaleY(.92) skewX(-5deg)}50%{opacity:.72;transform:scaleY(1.08) skewX(5deg)}}

/* ===== Walker onboarding ===== */
.wov{position:fixed;inset:0;z-index:9500;background:#fbfaf7;color:#16233a;display:none;overflow:hidden}
.wov.show{display:block}
.wov.show .wov-inner{animation:wovIn .5s ease}
@keyframes wovIn{from{opacity:0}to{opacity:1}}
.wov-inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:26px 24px 20px}
.wk-head{text-align:center;flex:0 0 auto;padding-top:6px;transition:opacity .4s ease}
.wk-bok{font-family:Georgia,serif;letter-spacing:.34em;font-size:13px;color:#667080;margin-bottom:14px}
.wk-q{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(23px,3.3vw,40px);letter-spacing:.01em;color:#16233a}
.wk-sub{margin-top:12px;color:#4e5968;font-size:15px}
.wk-sub2{margin-top:2px;color:#667080;font-size:12.5px;letter-spacing:.02em}
.wk-stage{position:relative;flex:1 1 auto;max-width:1180px;width:100%;margin:0 auto;min-height:0}
.wk{position:absolute;transform:translate(-50%,-50%);width:clamp(120px,19vw,188px);text-align:center;cursor:pointer;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease;opacity:1;will-change:transform}
.wk::before{content:'';position:absolute;left:50%;top:38%;
  width:330%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle closest-side,var(--wad) 0%,var(--wad) 22%,transparent 70%);
  opacity:.16;transition:opacity .5s ease,width .55s cubic-bezier(.2,.7,.2,1)}
/* The colour belongs to the walker, not to the corner: it rides along as they
   orbit, so whoever moves into a corner brings their colour with them and the
   one leaving takes theirs away. The focused walker carries the most. */
.wk:hover::before{opacity:.34;width:380%}
.wk.wk-focus::before{opacity:.40;width:400%}
@media(prefers-reduced-motion:reduce){.wk::before{transition:none}}
.wk-art{width:100%;height:auto;max-height:150px;object-fit:contain;opacity:.62;transition:opacity .4s ease}
.wk-nm{font-family:Georgia,'Times New Roman',serif;letter-spacing:.15em;font-size:14px;margin-top:12px;color:#33405a;transition:color .3s}
.wk-nm:after{content:"";display:block;height:1px;width:0;background:var(--wa);margin:8px auto 0;transition:width .4s ease}
.wk-ln{font-size:12.5px;color:#5b6675;max-width:210px;margin:8px auto 0;opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease;line-height:1.5}
.wk-stage:hover .wk{opacity:.4}
.wk-stage .wk:hover{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
.wk:hover .wk-art{opacity:1}
.wk:hover .wk-nm{color:#16233a}
.wk:hover .wk-nm:after{width:34px}
.wk:hover .wk-ln{opacity:1;transform:none}
.wk.gone{opacity:0!important;transform:translate(-50%,-50%) scale(.55)!important;pointer-events:none}
.wk.chosen{left:50%!important;top:50%!important;opacity:1!important;transform:translate(-50%,-50%) scale(1.32)!important;z-index:3}
.wk.chosen .wk-art{opacity:1}
.wk.chosen .wk-tint{opacity:1!important}
.wk.chosen .wk-ln,.wk.chosen .wk-nm:after{opacity:0}
.wov.picking .wk-head,.wov.picking .wk-skip,.wov.picking .wk-swipe{opacity:0;pointer-events:none;transition:opacity .4s ease}
.wk-skip{flex:0 0 auto;align-self:center;margin-top:4px;background:none;border:none;color:#5b6675;font-family:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer;padding:12px;transition:color .3s}
.wk-skip:hover{color:#16233a}
.wov-inner{transition:opacity .45s ease}
.wov-result{position:absolute;inset:0;background:#fbfaf7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 24px;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;overflow-y:auto}
.wov-result.on{opacity:1;pointer-events:auto;transform:none}
.wkr-art{width:clamp(150px,34vw,220px);height:auto;margin-bottom:8px}
.wkr-k{font-family:Georgia,serif;letter-spacing:.3em;font-size:12px;color:#667080;margin-bottom:14px}
.wkr-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,5vw,54px);color:#16233a;letter-spacing:.01em}
.wkr-sub{color:#4e5968;font-size:16px;margin-top:12px}
.wkr-pack{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 18px;border:1px solid #e6e2d9;border-radius:6px;background:#fff}
/* Thank You card + QR ticket — walker result card and product pages */
.qr-note{position:relative;display:flex;align-items:center;gap:15px;text-align:left;
  max-width:430px;margin:14px auto 0;padding:11px 16px;overflow:hidden;
  background:linear-gradient(135deg,#fffdf8 0%,#f8f2e5 100%);
  border:1px solid #ead9b8;border-radius:14px;text-decoration:none;cursor:pointer;
  box-shadow:0 12px 28px -22px rgba(120,90,30,.65);
  transition:transform .22s cubic-bezier(.3,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
.qr-note:hover{transform:translateY(-2px);border-color:#dcc189;
  box-shadow:0 18px 34px -20px rgba(120,90,30,.72)}
.qr-note:focus-visible{outline:2px solid var(--gold,#bf8f38);outline-offset:3px}
.qr-note-go{position:relative;flex:none;margin-left:auto;padding-left:8px;font-size:22px;line-height:1;
  color:#c9ab6a;transition:transform .22s ease,color .22s ease}
.qr-note:hover .qr-note-go{transform:translateX(3px);color:#16233a}
/* a single soft sheen, so it reads like foil rather than a beige box */
.qr-note:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.72) 47%,transparent 63%)}
.qr-note-i{position:relative;flex:none;width:44px;height:44px;border-radius:11px;
  background:#16233a;color:#f3d689;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 16px -10px rgba(22,35,58,.9)}
.qr-note-i svg{width:25px;height:25px;display:block}
.qr-note-t{position:relative;min-width:0;padding-left:15px;border-left:1px dashed #e2cfa6}
.qr-note-t > b{display:block;font-size:15px;font-weight:700;letter-spacing:-.012em;color:#16233a;line-height:1.2}
.qr-note-t > span{display:block;font-size:12.5px;line-height:1.45;color:#8a7550;margin-top:4px}
.qr-note-t > span b{color:#5f4d2c;font-weight:600}
.qr-note-l{margin-left:0;margin-right:0;max-width:none}
/* Rewards Terms — the duplicate-account warning. Deliberately loud: it is
   the one clause where getting it wrong costs a member everything. */
.rt-note{background:#f7f4ee;border:1px solid #e4dccd;border-left:4px solid #1f2a37;
  border-radius:10px;padding:18px 20px;margin:20px 0 26px}
.rt-note p{margin:0 0 10px}
.rt-note p:last-child{margin-bottom:0}
.rt-note b{color:var(--ink,#16233a)}
/* Clickwrap consent on the three registration forms. Deliberately not a
   footnote: it is a real control, sized and spaced like one, immediately
   above the button that binds the member to it. */
.reg-consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.55;
  color:var(--mut);cursor:pointer;margin:4px 0 0}
.reg-consent input{width:17px;height:17px;flex:none;margin:2px 0 0;accent-color:var(--orange);cursor:pointer}
.reg-consent b{color:var(--ink);font-weight:600}
.reg-consent a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.reg-consent-opt{padding-top:10px;border-top:1px solid var(--line,#e0d9cd);margin-top:12px}
.rt-warn{background:#fdf6f4;border:1px solid #f0cfc7;border-left:4px solid #c2440f;
  border-radius:10px;padding:18px 20px;margin:20px 0}
.rt-warn p{margin:0 0 10px}
.rt-warn p:last-child{margin-bottom:0}
.rt-warn b{color:#8f2f14}
.rt-warn a{color:#8f2f14;font-weight:600}
@media(max-width:560px){
  .qr-note{margin-top:14px;padding:12px 14px;gap:12px}
  .qr-note-i{width:38px;height:38px;border-radius:10px}
  .qr-note-i svg{width:21px;height:21px}
  .qr-note-t{padding-left:12px}
  .qr-note-t > b{font-size:14px}
  .qr-note-t > span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .qr-note:before{display:none} }
.wkr-pack .sw{width:12px;height:12px;border-radius:3px;background:var(--wa)}
.wkr-pack b{font-size:13px;letter-spacing:.06em;color:#33405a;font-weight:600}
.wkr-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.wkr-b1{background:#16233a;color:#fff;border:none;padding:15px 26px;border-radius:3px;font-family:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.3s}
.wkr-b1:hover{background:var(--wa);color:#0e1524}
.wkr-b2{background:none;border:1px solid #cfcabd;color:#33405a;padding:15px 26px;border-radius:3px;font-family:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.3s}
.wkr-b2:hover{border-color:#16233a}
.wk-swipe{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;width:100%}
.wk-track{display:flex;transition:transform .4s ease;width:100%}
.wk-slide{flex:0 0 100%;text-align:center;padding:0 10px}
.wk-slide .wk-art{width:62vw;max-width:250px;max-height:none;opacity:1;margin:0 auto}
.wk-slide .wk-nm{font-size:18px;margin-top:18px}
.wk-slide .wk-nm:after{display:none}
.wk-slide .wk-ln{opacity:1;transform:none;font-size:14px;margin-top:10px}
.wk-dots{display:flex;gap:9px;justify-content:center;margin:22px 0 6px}
.wk-dots i{width:8px;height:8px;border-radius:50%;background:#d6d1c6;transition:.3s}
.wk-dots i.on{background:#16233a;transform:scale(1.15)}
.wk-mbtns{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:6px}
.wk-thisme{background:#16233a;color:#fff;border:none;padding:15px 40px;border-radius:3px;font-family:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.wk-next{background:none;border:none;color:#5b6675;font-family:inherit;font-size:13px;cursor:pointer;letter-spacing:.04em}
.wk-spot{background:#fbfaf7;border-bottom:1px solid var(--line)}
.wk-spot-in{display:flex;align-items:center;gap:16px;padding:76px 0 14px;flex-wrap:wrap}
.wk-spot-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--wa)}
.wk-spot b{font-weight:800;letter-spacing:.02em;font-size:17px;color:var(--ink)}
.wk-spot-go{margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--ink);padding:9px 15px;border-radius:2px;font-family:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.3s}
.wk-spot-go:hover{border-color:var(--wa);color:var(--wa)}
.wk-spot-x{margin-left:auto;cursor:pointer;color:var(--mut);font-size:15px;padding:4px}
/* --- walkers drift, and can be stepped through left/right -----------------
   The float lives on an inner .wk-float wrapper, NOT on .wk itself: .wk owns
   the translate(-50%,-50%) that positions it, and .chosen/.gone override that
   transform with !important. Animating .wk directly would fight both. */
.wk-float{display:block;animation:wkDrift var(--wkd,14s) ease-in-out infinite alternate;
  animation-delay:var(--wkl,0s);will-change:transform}
@keyframes wkDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--wkx,10px),var(--wky,-12px),0)}}
.wk:hover .wk-float,.wk.chosen .wk-float,.wk.wk-focus .wk-float{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wk-float{animation:none}}

.wk-arrow{position:absolute;top:50%;margin-top:-23px;z-index:6;width:46px;height:46px;border-radius:50%;
  border:1px solid #dcd6c9;background:rgba(255,255,255,.92);color:#33405a;font-size:20px;line-height:1;
  font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.25s;opacity:.8}
.wk-arrow:hover{border-color:#16233a;color:#16233a;opacity:1;box-shadow:0 10px 24px -14px rgba(22,35,58,.6)}
.wk-arrow:focus-visible{outline:2px solid var(--gold,#bf8f38);outline-offset:3px}
.wk-prev{left:0}
.wk-nextb{right:0}
.wov.picking .wk-arrow{opacity:0;pointer-events:none}
.wk-hint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);z-index:6;font-size:12px;
  letter-spacing:.04em;color:#8b93a1;white-space:nowrap;pointer-events:none;transition:opacity .3s}
.wov.picking .wk-hint{opacity:0}
/* Orbit: the five ride a ring. Scrolling rotates the ring, so a walker
   travels into the front slot rather than merely lighting up where it stands
   — scroll right and the astronaut comes round to meet you. Declared after
   the hover rules above so it wins at equal specificity. */
.wk-stage.wk-orbit .wk{opacity:var(--wop,1);z-index:var(--wz,1);
  transform:translate(-50%,-50%) scale(var(--wsc,1));
  transition:left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1),
             transform .6s cubic-bezier(.3,.7,.2,1),opacity .5s ease}
.wk-stage.wk-orbit .wk:hover{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--wsc,1) * 1.07))}
.wk-stage.wk-orbit .wk .wk-nm{font-size:12.5px}
.wk-stage.wk-orbit .wk.wk-focus .wk-nm{font-size:15px}
.wk.wk-focus .wk-art{opacity:1}
.wk.wk-focus .wk-nm{color:#16233a}
.wk.wk-focus .wk-nm:after{width:34px}
.wk.wk-focus .wk-ln{opacity:1;transform:none}
@media(max-width:900px){.wk-arrow{width:40px;height:40px;margin-top:-20px;font-size:18px}}

/* mobile carousel gets a back step too, and tappable dots */
.wk-mrow{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:4px}
.wk-mrow button{background:none;border:1px solid #dcd6c9;border-radius:30px;color:#33405a;
  font-family:inherit;font-size:13px;letter-spacing:.04em;padding:9px 18px;cursor:pointer}
.wk-mrow button:hover{border-color:#16233a}
.wk-dots i{cursor:pointer}
@media(max-width:760px){.wk-stage{display:none}.wk-spot-in{padding-top:70px;gap:10px}.wk-spot-go{margin-left:0}}
@media(min-width:761px){.wk-swipe{display:none}}


/* ============ LIGHT THEME OVERRIDES ============ */
::selection{background:var(--orange);color:#fff}
#boot{
  background:
    radial-gradient(ellipse 58% 48% at 50% 3%,   rgba(255,190,30,.20) 0%, rgba(255,190,30,.12) 40%, transparent 70%),  /* Daywalkers  — top */
    radial-gradient(ellipse 54% 48% at 95% 34%,  rgba(22,112,56,.15)  0%, rgba(22,112,56,.09)  40%, transparent 70%),  /* Trailblazers — upper right */
    radial-gradient(ellipse 54% 48% at 80% 98%,  rgba(52,122,240,.17) 0%, rgba(52,122,240,.10) 40%, transparent 70%),  /* Starwalkers  — lower right */
    radial-gradient(ellipse 54% 48% at 20% 98%,  rgba(234,74,16,.17)  0%, rgba(234,74,16,.10)  40%, transparent 70%),  /* Duskwalkers  — lower left */
    radial-gradient(ellipse 54% 48% at 5%  34%,  rgba(84,66,132,.15)  0%, rgba(84,66,132,.09)  40%, transparent 70%),  /* Moonwalkers  — upper left */
    #fbfaf7;
}
#boot .bk{color:var(--ink)}
#boot .barwrap{background:rgba(22,35,58,.12)}
#boot .bar{background:var(--gold)}
/* Same five, pulled tighter and lifted — on the gate they gather toward the
   centre instead of sitting out at the edges. */
#gate{
  background:
    radial-gradient(ellipse 54% 46% at 50% 4%,   rgba(255,190,30,.50) 0%, rgba(255,190,30,.32) 46%, transparent 78%),  /* Daywalkers */
    radial-gradient(ellipse 52% 46% at 92% 32%,  rgba(22,112,56,.36)  0%, rgba(22,112,56,.22)  46%, transparent 78%),  /* Trailblazers */
    radial-gradient(ellipse 52% 46% at 78% 96%,  rgba(52,122,240,.40) 0%, rgba(52,122,240,.25) 46%, transparent 78%),  /* Starwalkers */
    radial-gradient(ellipse 52% 46% at 22% 96%,  rgba(234,74,16,.42)  0%, rgba(234,74,16,.26)  46%, transparent 78%),  /* Duskwalkers */
    radial-gradient(ellipse 52% 46% at 8%  32%,  rgba(84,66,132,.36)  0%, rgba(84,66,132,.22)  46%, transparent 78%),  /* Moonwalkers */
    #fbfaf7;
}
#gate .mono{border-color:var(--gold);background:none;
  background-image:linear-gradient(100deg,#a87e33 0%,#bf8f38 30%,#f3d689 46%,#fff6da 50%,#f3d689 54%,#bf8f38 70%,#a87e33 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:goldShine 4.5s linear infinite;font-weight:600}
@keyframes goldShine{to{background-position:-220% center}}
#gate p:not(.gate-title){color:var(--mut)}#gate small{color:var(--dim)}
header.nav.solid{background:rgba(251,250,247,.82);border-bottom:1px solid var(--line)}
.btn-light{background:var(--ink);color:#fff}.btn-light:hover{background:#0d1626;color:#fff}
.btn-ghost{color:var(--ink)}
.btn-orange{color:#fff}
/* hero */
.hero{background:#fbfaf7}
.hero .amb{background:radial-gradient(ellipse at 78% 26%,rgba(239,90,31,.09),transparent 52%),radial-gradient(ellipse at 18% 88%,rgba(191,143,56,.08),transparent 45%)}
.hero .stars{display:none!important}
.hero .sub{color:var(--mut)}.hero .sub b{color:var(--ink)}
/* collections */
.col:hover{background:linear-gradient(90deg,rgba(22,35,58,.03),transparent)}
.col .right .go{color:var(--ink)}
.col:hover .right .go{color:#fff}
/* collection hero */
.c-hero .big{color:rgba(22,35,58,.05)}
.c-hero .cbg{background:radial-gradient(ellipse at 70% 20%,var(--cga),transparent 55%),radial-gradient(ellipse at 10% 90%,rgba(22,35,58,.02),transparent 45%),var(--bg)}
.c-story .pull{color:var(--ink)}
.c-hero .lead{color:var(--mut)}
/* Collection pages read as a sequence of screens: each section snaps to the
   top so you never land halfway through one. `proximity` rather than
   `mandatory` — mandatory fights you on a long section like the product spec
   column, which is taller than the viewport. */
html:has(#app .c-hero){scroll-snap-type:y proximity}
#app .c-hero,#app .c-hero ~ section,#app footer{scroll-snap-align:start;scroll-margin-top:72px}
/* Every block on a collection page owns a screen. Without this each section
   is shorter than the viewport, so you always see the tail of one and the head
   of the next — the story and the pack block were sharing a screen. Height is
   a floor only: anything taller (reviews, related) simply grows past it.
   Off on small screens, where 100vh fights the browser's collapsing chrome. */
@media(min-width:761px){
  html:has(#app .c-hero) #app .c-hero ~ section{
    min-height:calc(100vh - 72px);
    display:flex; flex-direction:column; justify-content:center;
    padding-top:52px; padding-bottom:52px;
  }
  /* the single .wrap child must still span the section, or inner grids collapse */
  html:has(#app .c-hero) #app .c-hero ~ section>*{width:100%}
  /* content-visibility:auto renders off-screen sections at the 700px
     placeholder, which fights one-screen snapping and reflows on arrival.
     Five cheap sections — render them for real. */
  html:has(#app .c-hero) #app .c-hero ~ section{content-visibility:visible}
  /* the generous 60px head gap is tuned for a scrolling page; inside a
     one-screen section it is what pushes the block past the fold */
  html:has(#app .c-hero) #app .c-hero ~ section .sec-head{margin-bottom:32px}
  html:has(#app .c-hero) #app .rv-summary{margin-bottom:16px}
  html:has(#app .c-hero) #app .rv-rail-wrap{margin-bottom:12px}
  /* The hero owns the first screen on the same terms, so the story does not
     bleed into it. Centred, not padded out — the content stays compact. */
  html:has(#app .c-hero) #app .c-hero{
    min-height:100vh;
    align-items:center;
    padding-top:124px; padding-bottom:52px;
  }
}
.c-nav-v{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);pointer-events:auto;z-index:6;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--line-2);
  color:var(--ink);font-size:20px;line-height:1;font-family:inherit;cursor:pointer;
  transition:border-color .25s,color .25s;animation:cnavDrop 2.8s ease-in-out infinite}
.c-nav-v:hover{border-color:var(--gold);color:var(--gold-2);animation:none}
.c-nav-v:focus-visible{outline:2px solid var(--gold);outline-offset:3px;animation:none}
.c-nav-v.is-up{animation:none}
@keyframes cnavDrop{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(5px)}
}
@media (prefers-reduced-motion:reduce){ .c-nav-v{animation:none;transform:translateX(-50%)} }
@media(max-width:760px){ .c-nav-v{width:40px;height:40px;bottom:18px;font-size:18px} }

/* Collection-to-collection nav. Fixed to the middle of the viewport, not the
   hero, so they stay reachable however far down the page you have scrolled.
   They pulse a soft white ring on arrival so it is obvious there is another
   Walker either side — the arrows were easy to miss sitting still. */
.c-nav{position:absolute;inset:0;pointer-events:none;z-index:3}
.c-nav-b{position:fixed;top:50%;margin-top:-24px;pointer-events:auto;
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--line-2);
  color:var(--ink);font-size:21px;line-height:1;font-family:inherit;cursor:pointer;
  transition:transform .25s cubic-bezier(.3,.7,.2,1),border-color .25s,color .25s;
  animation:cnavPulse 2.8s ease-out infinite}
.c-nav-b.prev{left:26px} .c-nav-b.next{right:26px}
.c-nav-b.next{animation-delay:1.4s}   /* alternate, so they read as a pair */
.c-nav-b:hover{border-color:var(--gold);color:var(--gold-2);transform:scale(1.08);animation:none;
  box-shadow:0 14px 30px -16px rgba(22,35,58,.55)}
.c-nav-b:focus-visible{outline:2px solid var(--gold);outline-offset:3px;animation:none}
@keyframes cnavPulse{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.95), 0 0 0 1px rgba(191,143,56,.35), 0 8px 20px -14px rgba(22,35,58,.45)}
  55% {box-shadow:0 0 0 16px rgba(255,255,255,0), 0 0 0 1px rgba(191,143,56,0),   0 8px 20px -14px rgba(22,35,58,.45)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0),  0 0 0 1px rgba(191,143,56,0),   0 8px 20px -14px rgba(22,35,58,.45)}
}
@media(max-width:760px){
  .c-nav-b{width:40px;height:40px;margin-top:-20px;font-size:18px}
  .c-nav-b.prev{left:8px} .c-nav-b.next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .c-nav-b{animation:none;box-shadow:0 8px 20px -14px rgba(22,35,58,.45)}
}
/* product */
.meter .top b{color:var(--ink)}.track{background:rgba(22,35,58,.08)}
.ai-rec{background:rgba(22,35,58,.03);border:1px solid var(--line)}
.ai-rec p{color:var(--mut)}.ai-rec p b{color:var(--ink)}
.tagpill{border:1px solid var(--line)}
/* buy */
.loc-search input{background:#fff;color:var(--ink)}
.loc-search input::placeholder{color:var(--dim)}
.store:hover{background:rgba(22,35,58,.03)}
.bokmap{background:#eef1f4}
/* wholesale */
.portal{background:var(--panel2)}
.portal-top{background:rgba(22,35,58,.02)}
.portal-foot .tot b{color:var(--ink)}
.qbtn{background:#fff;color:var(--ink)}
.inv-tab{color:var(--mut)}
table thead th{color:var(--mut)}
/* manifesto */
.manifesto{background:radial-gradient(circle at 50% 50%,rgba(239,90,31,.07),transparent 60%),var(--bg2)}
.manifesto p{color:var(--mut)}
/* shop */
.merch .art{background:linear-gradient(160deg,#f4f1ea,#eceae2)}
.merch .art .ico svg{stroke:#b08a3c}
.merch .info .add{color:var(--ink)}
.shop-sec-head{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
.shop-sec-head .num-tag{display:inline-flex;justify-content:center}
.shop-sec-head p{margin-left:auto;margin-right:auto}
.shop-tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 34px}
.shop-tab{font-size:12px;letter-spacing:.05em;font-weight:600;color:var(--mut);background:none;border:1px solid var(--line-2);border-radius:30px;padding:9px 17px;cursor:pointer;font-family:inherit;transition:.25s;white-space:nowrap}
.shop-tab:hover{border-color:var(--gold);color:var(--ink)}
.shop-tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.shop-empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:50px 0;font-size:15px}
/* concierge -> light */
#concierge{background:rgba(251,250,247,.97);backdrop-filter:blur(12px)}
.cc-photo,.cc-sky,.cc-moon,.cc-sunhaze,.aurora,.milkyway,.shootstar,#skyStars,.cc-stars,.cc-veil,.cc-aurora,.cc-milkyway{display:none!important}
#concierge .aura{background:radial-gradient(circle at 50% 38%,rgba(191,143,56,.14),transparent 56%)}
.cc input{background:#fff;color:var(--ink)}
.cc input::placeholder{color:var(--dim)}
.cc h2,.cc .cc-q,.cc-title{color:var(--ink)}
.cc p,.cc-sub{color:var(--mut)}
.chip{background:#fff;border:1px solid var(--line);color:var(--ink)}
.chip:hover{border-color:var(--gold)}
#ccThinking{color:var(--ink)}
/* footer */
footer,.foot{border-top:1px solid var(--line)}


/* ===== Walker result -> product page ===== */
.wov-result{justify-content:center}
.wkr2-corner{position:absolute;top:26px;left:32px;display:flex;align-items:center;gap:12px;z-index:4}
.wk-fig{position:relative;display:inline-block;flex:0 0 auto}
.wkr2-cnr{position:absolute;z-index:4;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .3s ease}
.wkr2-cnr .wk-fig{width:86px;height:86px}
.wkr2-cnr .wk-fig img{animation:none;opacity:.45;transition:opacity .35s ease}
.wkr2-cnr .wk-fig i{animation:none;opacity:.22;transition:opacity .35s ease}
.wkr2-cnr:hover{transform:scale(1.1)}
.wkr2-cnr:hover .wk-fig img{opacity:.95}
.wkr2-cnr:hover .wk-fig i{opacity:1}
.cnr-nm{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);opacity:0;transition:opacity .35s ease;font-weight:600}
.wkr2-cnr:hover .cnr-nm{opacity:1}
.cnr-tl{top:120px;left:46px}.cnr-tr{top:120px;right:46px}.cnr-bl{bottom:46px;left:46px}.cnr-br{bottom:46px;right:46px}

/* --- The "You're a …" line, under the ring ------------------------------- */
.wkr2-youare{
  font-family:Georgia,'Times New Roman',serif; font-size:17px; font-weight:400;
  color:var(--mut); letter-spacing:.01em; margin:18px 0 2px;
}
.wkr2-youare b{font-weight:600; color:var(--ink)}
@media(max-width:760px){ .wkr2-youare{font-size:14px; margin-top:10px} }

/* --- The chosen walker, in the ring --------------------------------------
   It rides with the others but carries its own accent and sits a little
   brighter, so you can find yourself in the circle without a second badge. */
.wkr2-cnr.is-me .wk-fig img{opacity:.72}
.wkr2-cnr.is-me .wk-fig i{opacity:.62; background:var(--wad,#16233a)}
.wkr2-cnr.is-me .cnr-nm{opacity:.62; color:var(--wad,#16233a); font-weight:600}
.wkr2-cnr.is-me{cursor:default}

/* The marks pass behind the content, so anything with a transparent
   background lets one show through it. The buttons and the dot row get an
   opaque ground so a walker slides cleanly underneath instead of tangling
   with the label. */
.wkr2-stage-orbit .wkr-b2{background:var(--bg,#fbfaf7)}
.wkr2-stage-orbit .wkr2-dots{position:relative; z-index:3}
.wkr2-stage-orbit .wkr2-youare{position:relative; z-index:3}

/* --- Clock orbit ---------------------------------------------------------
   The four other walkers no longer sit in fixed corners. They travel a slow
   clockwise ellipse around the walker you chose, like hands on a clock face,
   so the centre of the screen reads as the thing being watched.

   Positions are written by JS into --ox/--oy, which keeps the ellipse honest
   at any viewport (a circle would either be squashed by the height or run off
   the sides on a wide screen). The symbols themselves never rotate — only
   their position travels, so the artwork always sits upright. ------------- */

.wkr2-stage-orbit .wkr2-mid{position:relative; z-index:3}
  /* The pack art was set for a tall desktop window; on a laptop it pushed
     everything else off both ends. */
  .wkr2-mid .mb-card,.wkr2-mid .mbwrap,.wkr2-mid .mb{max-width:230px;margin-left:auto;margin-right:auto}
  .wkr2-btns,.wkr-btns{margin-top:18px}
.wkr2-stage-orbit .wkr2-corner{z-index:4}
.wkr2-stage-orbit .wkr2-nav{z-index:4}
.wkr2-stage-orbit .wkr2-cnr{
  /* Behind the content, not in front of it. An ellipse centred on the box must
     cross the badge above and the title below — there is no radius that avoids
     a centred column. At 45% opacity these are faint line marks, so sliding
     behind the type reads as depth rather than collision, and it means the
     path can stay a true circle instead of being bent around the copy. */
  z-index:1;
  top:50%; left:50%; right:auto; bottom:auto;
  transform:translate(-50%,-50%) translate(var(--ox,0px), var(--oy,0px));
  transition:opacity .95s cubic-bezier(.4,0,.3,1);
  will-change:transform;
}
.wkr2-stage-orbit .wkr2-cnr:hover,
.wkr2-stage-orbit .wkr2-cnr:focus-visible{
  transform:translate(-50%,-50%) translate(var(--ox,0px), var(--oy,0px)) scale(1.12);
  transition:opacity .35s ease, transform .3s ease;
}
@media(max-width:900px){ .wkr2-stage-orbit .wkr2-cnr{display:none} }
@media(prefers-reduced-motion:reduce){
  .wkr2-stage-orbit .wkr2-cnr{transition:none}
}

/* --- Corner walkers: arrive one at a time, then breathe -------------------
   They used to all be present the instant the screen rendered. Now they come
   out like stars — a shuffled entrance, then one at a time drifting brighter
   and settling again, so the four of them read as watching the walker you
   chose rather than sitting in the corners waiting.

   They never fade out completely: each one is a link to that walker, and a
   navigation target that disappears is a navigation target you can't hit. --- */
.wkr2-cnr{opacity:0; transition:opacity .95s cubic-bezier(.4,0,.3,1), transform .3s ease}
.wkr2-cnr.lit{opacity:1}
.wkr2-cnr .wk-fig img{transition:opacity .9s cubic-bezier(.4,0,.3,1)}
.wkr2-cnr .wk-fig i{transition:opacity .9s cubic-bezier(.4,0,.3,1)}
/* the drifting highlight — a full colour pop wherever the mark happens to be
   on its orbit, so it fires at a different spot of the screen every time */
.wkr2-cnr.glow .wk-fig img{opacity:.92}
.wkr2-cnr.glow .wk-fig i{opacity:1}
.wkr2-cnr.glow .cnr-nm{opacity:.9;color:var(--wad,#16233a);font-weight:600}
/* soft halo in the walker's own accent, behind the mark */
.wkr2-stage-orbit .wkr2-cnr::before{content:'';position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(closest-side, var(--wad,#16233a), transparent 72%);
  opacity:0;transition:opacity .55s ease;pointer-events:none;z-index:-1}
.wkr2-stage-orbit .wkr2-cnr.glow::before{opacity:.20}
/* springy scale-up on pop; settles back when the glow lifts */
.wkr2-stage-orbit .wkr2-cnr.glow{animation:cnrPop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cnrPop{
  0%{transform:translate(-50%,-50%) translate(var(--ox,0px),var(--oy,0px)) scale(1)}
  55%{transform:translate(-50%,-50%) translate(var(--ox,0px),var(--oy,0px)) scale(1.24)}
  100%{transform:translate(-50%,-50%) translate(var(--ox,0px),var(--oy,0px)) scale(1.15)}
}
/* hover still wins over the glow */
.wkr2-cnr:hover .wk-fig img,.wkr2-cnr:focus-visible .wk-fig img{opacity:.95}
.wkr2-cnr:hover .wk-fig i,.wkr2-cnr:focus-visible .wk-fig i{opacity:1}
.wkr2-cnr:hover .cnr-nm,.wkr2-cnr:focus-visible .cnr-nm{opacity:1}
@media(prefers-reduced-motion:reduce){
  /* no staggered arrival, no drift — all four simply present */
  .wkr2-cnr{opacity:1!important; transition:none}
  .wkr2-cnr.glow .wk-fig img{opacity:.45}
  .wkr2-cnr.glow .wk-fig i{opacity:.22}
  .wkr2-stage-orbit .wkr2-cnr.glow{animation:none}
  .wkr2-stage-orbit .wkr2-cnr.glow::before{opacity:0}
}
.wkr2-corner{left:50%!important;transform:translateX(-50%);}
@media(max-width:900px){.wkr2-cnr{display:none}}
@media(prefers-reduced-motion:reduce){.wkr2-cnr,.wkr2-cnr *{transition:none}}
.wk-fig img{width:100%;height:100%;object-fit:contain;display:block;opacity:0;animation:wkFigIn .5s ease forwards}
.wk-fig i{position:absolute;inset:0;background:var(--wt,#16233a);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;opacity:0;animation:wkTintIn 1s ease .55s forwards}
.wk-fig-sm{width:54px;height:54px}
.wk-fig-lg{width:148px;height:148px;margin-bottom:6px}
@keyframes wkFigIn{from{opacity:0;transform:scale(.92)}to{opacity:.96;transform:scale(1)}}
@keyframes wkTintIn{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.wk-fig-lg{width:104px;height:104px}}
@media(prefers-reduced-motion:reduce){.wk-fig img{animation:none;opacity:.96}.wk-fig i{animation:none;opacity:1}}
.wkr2-corner img{width:54px;height:54px;object-fit:contain;opacity:.92}
.wkr2-corner span{font-family:Georgia,'Times New Roman',serif;font-size:14px;letter-spacing:.05em;color:#33405a}
.wkr2-mid{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:540px;margin:0 auto;padding:8px 20px}
.wkr2-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(26px,3.4vw,38px);color:#16233a;margin-top:12px;letter-spacing:.01em}
.wkr2-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wa);margin-top:8px;font-weight:600}
.wkr2-desc{color:#4e5968;font-size:15px;line-height:1.55;margin-top:10px;max-width:440px}
.prod-shot{position:relative;width:260px;height:280px;margin:0 auto}
.prod-shot .minis{position:absolute;inset:0;z-index:1}
.prod-shot .mini{position:absolute;bottom:12px;left:50%;width:9px;height:150px;border-radius:6px;background:linear-gradient(#f8f2e6,#e7dcc6);box-shadow:0 8px 16px rgba(22,35,58,.16);transform-origin:bottom center}
.prod-shot .mini:after{content:"";position:absolute;left:0;right:0;top:0;height:24px;border-radius:6px 6px 0 0;background:var(--wa)}
.prod-shot .m1{transform:translateX(-50%) rotate(-20deg)}
.prod-shot .m2{transform:translateX(-50%) rotate(-7deg)}
.prod-shot .m3{transform:translateX(-50%) rotate(9deg)}
.prod-shot .matchbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);width:224px;height:238px;border-radius:9px;z-index:3;
  background:linear-gradient(150deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 30%,rgba(0,0,0,.30) 100%),var(--wa);
  box-shadow:0 42px 70px -24px rgba(22,35,58,.55),0 8px 20px -8px rgba(22,35,58,.35),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 2px 1px rgba(255,255,255,.32),inset 0 -3px 3px rgba(0,0,0,.22);
  display:flex;flex-direction:row;color:var(--foil,#fff);padding:0;overflow:hidden}
.prod-shot .mb-stack{width:100%;height:100%;display:block;color:var(--foil,#fff)}
.prod-shot .mb-face{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 7px;position:relative;text-align:center}
.prod-shot .mb-emblem{width:44px;height:44px;margin-bottom:10px;opacity:.97;color:var(--foil,#fff)}
.prod-shot .mb-emblem svg{width:100%;height:100%;display:block}
.prod-shot-lg .mb-emblem{width:66px;height:66px;margin-bottom:15px}
.prod-shot .mb-strike{flex:0 0 22px;align-self:stretch;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.05)),repeating-linear-gradient(180deg,#83502a 0 2px,#5c3616 2px 4px)}
.prod-shot .mb-brand{font-size:10.5px;letter-spacing:.2em;font-weight:700;opacity:.95;margin-bottom:2px}
.prod-shot .mb-name{font-size:17px;font-weight:800;letter-spacing:0;margin:9px 0 7px;line-height:1;text-align:center;white-space:nowrap;max-width:100%}
.prod-shot .mb-sub{font-size:10px;letter-spacing:.05em;opacity:.9;white-space:nowrap;margin-bottom:5px}
.prod-shot .mb-foot{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.26em;opacity:.72}
@media(max-width:760px){.wkr2-corner{top:18px;left:18px}.wkr2-corner img{width:44px;height:44px}.wkr2-corner span{font-size:12px}.prod-shot{width:216px;height:236px}.prod-shot .matchbox{width:188px;height:200px}}
.prod-shot .mb-inf{font-size:10px;letter-spacing:.14em;opacity:.85;text-align:center;max-width:70%}
.prod-stage{display:flex;align-items:center;justify-content:center;min-height:440px}
.prod-shot-lg{width:430px;height:460px}
.prod-shot-lg .matchbox{width:380px;height:400px;border-radius:17px}
.prod-shot-lg .mb-face{padding:16px 10px}
.prod-shot-lg .mb-strike{flex-basis:28px}
/* pulled-out mini pre-rolls */
.prod-shot-lg .rolls{position:absolute;left:50%;top:-2px;transform:translateX(-50%) rotate(-5deg);z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:7px;height:150px;pointer-events:none}
.prod-shot-lg .roll{width:16px;height:140px;border-radius:8px 8px 3px 3px;position:relative;transform-origin:bottom center;
  background:linear-gradient(90deg,#cdbf9c 0%,#fdf8ee 42%,#f0e7cf 66%,#c9ba95 100%);
  box-shadow:0 12px 20px rgba(22,35,58,.18),inset -2px 0 3px rgba(0,0,0,.08),inset 2px 0 2px rgba(255,255,255,.5)}
.prod-shot-lg .roll:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#b1854c,#dcb478,#a97e46)}
.prod-shot-lg .roll:before{content:"";position:absolute;left:3px;right:3px;top:-5px;height:9px;border-radius:50%;background:#efe6cf;box-shadow:inset 0 -1px 1px rgba(0,0,0,.15)}
.prod-shot-lg .roll:nth-child(1){transform:rotate(-14deg) translateY(9px)}
.prod-shot-lg .roll:nth-child(2){transform:rotate(-7deg) translateY(3px)}
.prod-shot-lg .roll:nth-child(3){transform:rotate(0)}
.prod-shot-lg .roll:nth-child(4){transform:rotate(7deg) translateY(3px)}
.prod-shot-lg .roll:nth-child(5){transform:rotate(14deg) translateY(9px)}
/* matches with red heads */
.prod-shot-lg .matches{position:absolute;right:16%;top:6px;z-index:2;transform:rotate(-5deg);pointer-events:none}
.prod-shot-lg .match{position:absolute;width:10px;height:120px;border-radius:3px;
  background:linear-gradient(90deg,#c49a54,#f1d99e 50%,#bf9350);box-shadow:0 8px 15px rgba(22,35,58,.16)}
.prod-shot-lg .match:after{content:"";position:absolute;top:-10px;left:-2px;right:-2px;height:22px;border-radius:48% 48% 46% 46%;
  background:radial-gradient(circle at 38% 30%,#ff8163,#e23b2f 52%,#a81f16);box-shadow:0 2px 5px rgba(168,31,22,.55)}
.prod-shot-lg .match:nth-child(1){transform:rotate(11deg)}
.prod-shot-lg .match:nth-child(2){left:15px;top:-8px;transform:rotate(19deg)}
.prod-shot-lg .prod-stage,.prod-stage{min-height:480px}
.prod-shot-lg .mb-brand{font-size:12px;letter-spacing:.22em}
.prod-shot-lg .mb-name{font-size:29px;margin:12px 0 9px;white-space:nowrap}
.prod-shot-lg .mb-inf{font-size:10.5px;letter-spacing:.16em;max-width:70%}
.prod-shot-lg .mb-sub{font-size:10.5px;letter-spacing:.05em;margin-bottom:7px}
.prod-shot-lg .mb-foot{font-size:10px;bottom:22px;letter-spacing:.28em}
.prod-shot-lg .mini{height:210px;width:12px;bottom:16px}
@media(max-width:760px){.prod-shot-lg{width:300px;height:330px}.prod-shot-lg .matchbox{width:264px;height:284px}.prod-shot-lg .mb-name{font-size:28px}.prod-stage{min-height:400px}}


/* ===== Result carousel (roller) ===== */
.wkr2-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:#16233a;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:.25s;box-shadow:0 10px 26px rgba(22,35,58,.12);font-family:Georgia,serif;padding-bottom:3px}
.wkr2-nav:hover{border-color:var(--wa);color:var(--wa);transform:translateY(-50%) scale(1.07)}
.wkr2-nav.prev{left:6%}.wkr2-nav.next{right:6%}
.wkr2-dots{display:flex;gap:9px;justify-content:center;margin:22px 0 2px}
.wkr2-dots i{width:8px;height:8px;border-radius:50%;background:#d6d1c6;cursor:pointer;transition:.3s}
.wkr2-dots i.on{background:var(--wa);transform:scale(1.25)}
.wkr2-mid.slide-r{animation:wkrSlideR .42s cubic-bezier(.2,.7,.2,1)}
.wkr2-mid.slide-l{animation:wkrSlideL .42s cubic-bezier(.2,.7,.2,1)}
@keyframes wkrSlideR{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes wkrSlideL{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@media(max-width:760px){.wkr2-nav{width:42px;height:42px;font-size:22px}.wkr2-nav.prev{left:2%}.wkr2-nav.next{right:2%}}


/* ===== Onboarding top bar (logo + login) ===== */
.onb-nav{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:20px 32px}
.onb-nav-r{display:flex;align-items:center;gap:14px}
.onb-brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.onb-brand svg{width:34px;height:34px;display:block}
.onb-brand span{font-weight:600;letter-spacing:.12em;font-size:13px;color:var(--ink);text-transform:uppercase}
.onb-login{background:none;border:1px solid var(--line-2);color:#16233a;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 20px;border-radius:2px;cursor:pointer;transition:.3s}
.onb-login:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(191,143,56,.06)}
.wk-head{padding-top:120px}
.wk-bok{display:none}
.wkr2-corner{top:84px}
@media(max-width:760px){.onb-nav{padding:14px 18px}.onb-brand span{display:none}.onb-brand svg{width:30px;height:30px}.wkr2-corner{top:74px}}


/* onboarding nav links */
.onb-links{display:flex;gap:28px}
.onb-links a{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:.3s;position:relative;white-space:nowrap}
.onb-links a:hover{color:var(--gold-2)}
.onb-links a:after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:.35s var(--ease)}
.onb-links a:hover:after{width:100%}
@media(max-width:900px){.onb-links{display:none}}


#gate h1,#gate .gate-title{font-weight:200;letter-spacing:.04em}

/* ===== Walker hover colour ===== */
.wk-artw{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.wk-art{opacity:.68;transition:opacity .4s ease}
.wk-tint{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--wad,var(--wa));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;opacity:.92;transition:opacity .45s ease;pointer-events:none}
.wk-artw::before{content:"";position:absolute;left:50%;top:50%;width:175px;height:175px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--wa),transparent 66%);opacity:0;transition:opacity .5s ease;filter:blur(5px);z-index:-1}
.wk:hover .wk-art{opacity:0}
.wk:hover .wk-tint{opacity:1}
.wk:hover .wk-artw::before{opacity:.22}
.wk:hover .wk-nm{color:var(--wad)!important}
.wk .wk-nm:after{background:var(--wad)}


/* ===== Hero: thin full-width wordmark (pack removed) ===== */
.hero-solo{position:relative;z-index:3;width:100%;text-align:center;padding:0 6px}
.hero-solo .eyebrow{margin-bottom:18px;font-size:clamp(22px,3.2vw,38px);letter-spacing:.24em}
.hero-solo .eyebrow .hb-dot{display:inline-block;width:.26em;height:.26em;border-radius:50%;background:currentColor;vertical-align:.22em;margin:0 .55em;opacity:.85}
.hero h1.hero-word,.hero-word{font-weight:200!important;-webkit-text-stroke:0!important;letter-spacing:.005em;font-size:clamp(40px,11.5vw,168px);line-height:1.02;margin:14px 0 4px;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.hero-word .l2{color:var(--ink);-webkit-text-stroke:0!important;font-weight:200!important}
.hero-solo .sub{max-width:560px;margin-left:auto;margin-right:auto;text-align:center}
.hero-solo .hero-ctas{justify-content:center}
@media(max-width:560px){.hero h1.hero-word,.hero-word{white-space:normal;font-size:clamp(46px,16vw,90px)}}

h1.pname,h2.pname{margin:0;font-weight:inherit;letter-spacing:inherit;line-height:inherit}

/* ============================================================
   BOK MATCHBOX v2 — sharper, cleaner
   Goals: true brand colour (no muddying overlay), crisp edges,
   real box depth, print-accurate type (no stretched glyphs),
   and a shadow that grounds the box instead of fogging it.
   ============================================================ */
.bk2{--paper:#25252b;--foil:#fff;display:flex;align-items:center;justify-content:center}
.bk2-lg{width:440px;height:470px}

.bk2-scene{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;perspective-origin:50% 42%;
}

.bk2-box{
  position:relative;width:352px;height:370px;border-radius:14px;
  transform:rotateX(4deg) rotateY(-9deg) rotateZ(-1deg);
  transform-style:preserve-3d;
  display:flex;flex-direction:row;overflow:hidden;
  color:var(--foil);
  /* True brand colour first; sheen kept to a narrow, directional band so the
     paper reads as itself rather than as a darkened version of itself. */
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.07) 26%,
      rgba(255,255,255,0)   46%,
      rgba(0,0,0,.06)       78%,
      rgba(0,0,0,.15)      100%),
    var(--paper);
  box-shadow:
    /* crisp 1px edge — this is what reads as "sharp" */
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 1px 0 0 rgba(255,255,255,.42),
    inset 0 -1px 0 0 rgba(0,0,0,.30),
    /* tight contact shadow */
    0 2px 4px rgba(22,35,58,.28),
    /* mid */
    0 14px 26px -10px rgba(22,35,58,.38),
    /* soft ambient, well below the box so it never fogs the artwork */
    0 46px 60px -30px rgba(22,35,58,.50);
}

/* Craft-paper fibre. Very low opacity, high frequency — texture you feel
   rather than see, and it does not soften the type. */
.bk2-box::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bk2-face{
  flex:1;min-width:0;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;padding:15px 11px;
}
.bk2-art{width:100%;height:100%;display:block;color:var(--foil)}

/* Striker panel — defined corrugation with a real lit edge on the left,
   so it reads as a separate physical surface, not a printed stripe. */
.bk2-strike{
  flex:0 0 30px;align-self:stretch;position:relative;z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, rgba(0,0,0,.10) 2px 7px, rgba(0,0,0,0) 7px),
    repeating-linear-gradient(180deg,
      #8a5730 0 1.5px,
      #6d4220 1.5px 3px,
      #58331580 3px 4.5px);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.20);
}
.bk2-strike i{
  position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(255,255,255,.16),transparent 55%);
}

/* The box has thickness. A thin lit sliver on the right sells the 3D. */

/* Contact shadow on the ground plane. Elliptical + tight, so the box sits. */
.bk2-shadow{
  position:absolute;left:50%;bottom:14%;width:62%;height:26px;
  transform:translateX(-50%) rotateX(74deg);
  background:radial-gradient(ellipse at center, rgba(22,35,58,.36) 0%, rgba(22,35,58,.16) 45%, rgba(22,35,58,0) 72%);
  filter:blur(7px);z-index:0;pointer-events:none;
}

@media (prefers-reduced-motion: reduce){ .bk2-box{transition:none} }

/* Footprints match the old .prod-shot / .prod-shot-lg so every existing layout
   (collection rows, onboarding carousel, product hero) is unaffected. */
.bk2{width:260px;height:280px}
.bk2 .bk2-box{width:216px;height:228px;border-radius:10px}
.bk2 .bk2-face{padding:10px 7px}
.bk2 .bk2-strike{flex:0 0 20px}
.bk2-lg{width:430px;height:460px}
.bk2-lg .bk2-box{width:352px;height:370px;border-radius:15px}
.bk2-lg .bk2-face{padding:15px 11px}
.bk2-lg .bk2-strike{flex:0 0 30px}
@media(max-width:760px){
  .bk2{width:216px;height:236px}
  .bk2 .bk2-box{width:184px;height:194px}
  .bk2-lg{width:300px;height:330px}
  .bk2-lg .bk2-box{width:252px;height:266px}
}

/* --- Hero layout ---
   .hero is display:flex, so its .wrap child was a shrink-to-fit flex item —
   789px wide inside a 1440px viewport. That is why the wordmark ran off the
   edge: it was sized against the viewport but laid out in a narrower box. --- */
.hero > .wrap{width:100%}

/* --- Unpriced merch: upcoming, not free --- */
.pr-soon{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-2);
  font-weight:600;white-space:nowrap;line-height:1}
.merch-soon .art{opacity:.6}
.merch-soon .info .row{gap:10px;flex-wrap:nowrap}
.merch-soon .info .add{padding:8px 11px;flex:none}
.add-notify{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;line-height:1}

/* ============================================================
   ACCESSIBILITY + PERFORMANCE LAYER
   Appended last so it wins the cascade over earlier outline:none rules.
   ============================================================ */

/* --- Visible keyboard focus, everywhere ---
   Earlier rules strip outlines. :focus-visible only fires for keyboard and
   assistive-tech navigation, so mouse users never see a ring. */
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:3px solid var(--orange)!important;
  outline-offset:3px!important;
  border-radius:3px;
}
/* Older browsers with no :focus-visible support still get a ring. */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,select:focus,textarea:focus{
    outline:3px solid var(--orange)!important;outline-offset:3px!important;
  }
}

/* --- Skip link: first tab stop on the page --- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink);color:#fff;padding:14px 22px;
  font-weight:600;font-size:14px;letter-spacing:.02em;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* --- Respect prefers-reduced-motion ---
   The site runs floating leaves, magnetic buttons, scroll reveals, a boot
   sequence, twinkling stars and a rotating 3D object. All of it is decorative. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto!important}
  .leaf,.star,.marquee .track,.amb,.scroll-cue{animation:none!important;opacity:.35}
  .marquee .track{transform:none!important}
  /* Reveals animate in via .in — make sure nothing stays invisible. */
  .reveal{opacity:1!important;transform:none!important}
  .btn.mag{transform:none!important}
  #boot{display:none!important}
}

/* --- Tap targets: 44px minimum on touch devices (WCAG 2.5.8) --- */
@media (pointer:coarse){
  .nav .links a,.mob-nav a,.foot-col a,.shop-tab,.ci-qty button,.acct-dd a{
    min-height:44px;display:flex;align-items:center;
  }
  .nav-cart,.nav-person,.nav-burger,.cart-close{min-width:44px;min-height:44px}
}

/* --- Nav links are real <a href> now; keep them looking identical --- */
.nav .links a,.mob-nav a,.foot-col a,.onb-links a{cursor:pointer;text-decoration:none}

/* --- Static pre-rendered content shown to crawlers and no-JS visitors.
       Hidden the moment the router takes over. --- */
#app[data-hydrated="1"] .seo-static{display:none}
.noscript-note{
  max-width:720px;margin:120px auto;padding:0 24px;text-align:center;
}
.noscript-note h2{font-size:28px;margin-bottom:12px}
.noscript-note p{color:var(--mut);margin-bottom:10px}

/* --- Content-visibility: skip layout/paint for off-screen sections --- */
section{content-visibility:auto;contain-intrinsic-size:auto 700px}
.hero,.c-hero{content-visibility:visible}


.wkr2-save{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:7px}
.wks-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wks-form input{padding:11px 14px;border:1px solid var(--line-2);border-radius:9px;font-family:inherit;font-size:14px;width:220px;background:var(--bg)}
.wks-fine{font-size:11px;color:var(--dim);margin:0;text-align:center}
.wks-ok{display:flex;gap:9px;align-items:flex-start;justify-content:flex-start;margin:10px auto 0;
  font-size:12px;line-height:1.45;color:#5b6675;cursor:pointer;text-align:left;max-width:420px}
.wks-ok input{width:16px;height:16px;flex:none;margin:1px 0 0;accent-color:var(--orange);cursor:pointer}
.wks-ok a{color:#16233a;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.wks-skip{background:none;border:none;color:var(--dim);font-size:11px;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0 0 0 6px}
.wkr2-saved{font-size:13.5px;color:#3f8259;font-weight:500;margin:0}
.ask-shop{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:26px;margin:6px 0 4px}
.ask-shop h3{font-size:19px;font-weight:600;color:var(--ink);margin:0 0 8px}
.ask-shop p{font-size:13.5px;color:var(--mut);line-height:1.65;margin:0 0 16px}
.ask-form{display:flex;flex-direction:column;gap:10px}
.ask-row{display:flex;gap:10px}
.ask-form input{flex:1;padding:11px 13px;border:1px solid var(--line-2);border-radius:9px;font-family:inherit;font-size:14px;background:var(--bg);min-width:0;width:100%;box-sizing:border-box}
.ask-sel{flex:1;padding:11px 13px;border:1px solid var(--line-2);border-radius:9px;font-family:inherit;
  font-size:14px;background:var(--bg);color:var(--ink);min-width:0;width:100%;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238a93a7' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px}
.ask-sel:invalid{color:var(--dim)}
.ask-form input:focus-visible,.ask-sel:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.ask-consent{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--mut);cursor:pointer;margin-top:2px}
.ask-consent input{width:16px;height:16px;flex:none;margin:1px 0 0;accent-color:var(--orange);cursor:pointer}
.ask-fine{font-size:11.5px;line-height:1.5;color:var(--dim);margin:2px 0 0}
.ask-fine b{color:var(--mut);font-weight:600}

/* ---------- Legal pages: collapsed sections ---------- */
.legal-acc{max-width:820px}
.legal-tools{margin:0 0 18px}
.legal-tools button{background:none;border:1px solid var(--line-2);border-radius:30px;color:var(--ink);
  font-family:inherit;font-size:12.5px;letter-spacing:.03em;padding:8px 16px;cursor:pointer;transition:.22s}
.legal-tools button:hover{border-color:var(--gold);color:var(--gold-2)}
.legal-sec{border-bottom:1px solid var(--line)}
.legal-sec > summary{list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.legal-sec > summary::-webkit-details-marker{display:none}
.legal-sec > summary:hover{color:var(--gold-2)}
.legal-sec > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.legal-sec > summary:after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.8px solid var(--mut);border-bottom:1.8px solid var(--mut);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.legal-sec[open] > summary:after{transform:translateY(-30%) rotate(-135deg)}
.legal-body{padding:0 0 20px;font-size:14.5px;line-height:1.7}
.legal-body > *:first-child{margin-top:0}
.legal-body p{margin:0 0 12px}
.legal-body ul,.legal-body ol{margin:0 0 12px}
.legal-body li{margin-bottom:6px;line-height:1.65}
.legal-body h4{margin:16px 0 8px}
@media(max-width:560px){
  .legal-sec > summary{font-size:15px;padding:14px 30px 14px 0}
  .legal-body{font-size:14px}
}

/* ---------- Earn the most ---------- */
.mx{padding:106px 0 90px}
.mx-stage{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:26px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin:0 0 16px}
.mx-stage.is-gold{border-color:#d9ae4d;background:linear-gradient(120deg,#fdf6e6,var(--panel) 60%)}
.mx-k span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:7px}
.mx-k b{display:block;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.mx-fig{grid-column:1;margin-top:16px}
.mx-fig b{display:block;font-size:clamp(38px,5vw,52px);font-weight:200;line-height:1;color:var(--gold-2);letter-spacing:-.03em}
.mx-stage.is-gold .mx-fig b{color:#9c7410}
.mx-fig i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-top:6px}
.mx-list{grid-column:2;grid-row:1/span 2;list-style:none;margin:0;padding:0}
.mx-list li{position:relative;padding:0 0 11px 18px;font-size:14.5px;line-height:1.65;color:var(--mut)}
.mx-list li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mx-list b{color:var(--ink);font-weight:600}
.mx-note{grid-column:2;font-size:13.5px;line-height:1.6;color:var(--mut);margin:6px 0 0;
  padding-top:12px;border-top:1px solid var(--line)}
.mx-note b{color:var(--ink);font-weight:600}
/* the total */
.mx-total{text-align:center;background:linear-gradient(120deg,#f7e3ae,#eecd82 38%,#e0a83a);border:1px solid #d9ae4d;
  border-radius:18px;padding:34px 28px;margin:6px 0 26px;position:relative;overflow:hidden}
.mx-total:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%)}
.mx-total > *{position:relative}
.mx-total span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#7a5410;font-weight:800}
.mx-total b{display:block;font-size:clamp(56px,10vw,96px);font-weight:200;line-height:1;color:#16233a;letter-spacing:-.04em;margin:8px 0 6px}
.mx-total i{display:block;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7a5410;font-weight:800}
.mx-total p{font-size:13.5px;line-height:1.6;color:#4a3a18;margin:14px auto 0;max-width:560px}
/* the table */
.mx-table-w{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin:0 0 16px;overflow-x:auto}
.mx-table-w h3{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 16px}
.mx-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.mx-table th{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  font-weight:800;padding:0 14px 10px 0;border-bottom:1px solid var(--line-2)}
.mx-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--mut);line-height:1.5}
.mx-table tr.is-gold td{background:linear-gradient(90deg,#fdf5e2,transparent);color:#5c4a20}
.mx-table tr.is-gold td:first-child{font-weight:700;color:#16233a}
.mx-table b{color:#16233a}
/* the honest part */
.mx-real{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin:0 0 16px}
.mx-real h3{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 14px}
.mx-real ul{list-style:none;margin:0;padding:0}
.mx-real li{position:relative;padding:0 0 11px 20px;font-size:14px;line-height:1.65;color:var(--mut)}
.mx-real li:before{content:"!";position:absolute;left:0;top:0;color:#c2440f;font-weight:800;font-size:13px}
.mx-real b{color:var(--ink);font-weight:600}
.mx-fine{font-size:11.5px;line-height:1.6;color:var(--dim);margin:14px 0 0}
.mx-fine a{color:var(--mut);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* the order */
.mx-cta{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px}
.mx-cta h3{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 16px}
.mx-order{counter-reset:mx;list-style:none;margin:0 0 24px;padding:0}
.mx-order li{counter-increment:mx;position:relative;padding:0 0 12px 34px;font-size:14.5px;line-height:1.6;color:var(--mut)}
.mx-order li:before{content:counter(mx);position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;
  background:var(--bg2);color:var(--gold-2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mx-order b{color:var(--ink);font-weight:700}
.mx-btns{display:flex;gap:12px;flex-wrap:wrap}
/* the worked example inside a stage */
.mx-ledger{margin:16px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.mx-led-k{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  padding:11px 16px 9px;border-bottom:1px solid var(--line)}
.mx-led-r{display:flex;align-items:baseline;gap:14px;padding:10px 16px;font-size:14px;line-height:1.5;color:var(--mut)}
.mx-led-r+.mx-led-r{border-top:1px solid var(--line)}
.mx-led-r span{flex:1 1 auto;min-width:0}
.mx-led-r i{font-style:normal;color:var(--dim);font-size:13px}
.mx-led-r b{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);font-size:15.5px}
.mx-led-r.is-total{background:var(--panel);color:var(--ink);font-weight:600}
.mx-led-r.is-total b{font-size:19px;color:var(--gold-2)}
@media(max-width:560px){.mx-led-r{padding:9px 13px;font-size:13.5px}}
/* join-by-QR block */
.jqr{display:flex;gap:26px;align-items:center;margin:0 0 30px;padding:24px 28px;border-radius:18px;
  background:linear-gradient(120deg,#fdf8ec,#f7ecd3 55%,#f2e0b8);border:1px solid #e6d3a6;
  box-shadow:0 12px 34px rgba(191,143,56,.16)}
.jqr-code{flex:0 0 auto;width:132px;height:132px;border-radius:10px;display:block;background:#fff;
  padding:8px;border:1px solid #e6d3a6}
.jqr-txt{flex:1 1 auto;min-width:0}
.jqr-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7a5a14}
.jqr-h{display:block;font-size:clamp(18px,2.2vw,25px);font-weight:800;letter-spacing:-.02em;color:#2a1e07;
  margin:6px 0 0;line-height:1.18}
.jqr-h span{color:#9c7410}
.jqr-txt p{font-size:13.5px;line-height:1.6;color:#5b451a;margin:8px 0 0;max-width:62ch}
.jqr-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.jqr-btns .btn-ghost{border-color:rgba(42,30,7,.3);color:#2a1e07}
.jqr-btns .btn-ghost:hover{border-color:#2a1e07;color:#2a1e07}
@media(max-width:700px){
  .jqr{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px;border-radius:14px}
  .jqr-code{display:none}          /* you cannot scan the screen you are holding */
  .jqr-btns .btn{width:100%}
}
.mx-band-w{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin:0 0 26px}
.mx-band-w h3{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 16px}
.mx-band tr.is-mid td{background:rgba(63,127,224,.07)}
.mx-band tr.is-gold td{background:rgba(191,143,56,.13)}
.mx-band-n{font-size:13.5px;line-height:1.65;color:var(--mut);margin:16px 0 0;max-width:70ch}
.mx-band-n b{color:var(--ink)}
@media(max-width:760px){.mx-band-w{padding:20px 16px;border-radius:14px}}
/* the "where you stand" strip — anonymous shows the ceiling, member shows the gap */
.mx-you{background:linear-gradient(120deg,#f7e3ae,#eecd82 40%,#e0a83a);border:1px solid #d9ae4d;
  border-radius:18px;padding:24px 28px;margin:0 0 30px;box-shadow:0 12px 34px rgba(191,143,56,.22)}
.mx-you-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mx-you-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7a5a14;width:100%}
.mx-you-h b{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;color:#2a1e07;line-height:1;
  font-variant-numeric:tabular-nums}
.mx-you-h i{font-style:normal;font-size:14px;font-weight:600;color:#5b451a}
.mx-you-bar{height:8px;border-radius:6px;background:rgba(42,30,7,.16);margin:14px 0 0;overflow:hidden}
.mx-you-bar i{display:block;height:100%;border-radius:6px;background:#2a1e07}
.mx-you-d{font-size:14.5px;line-height:1.6;color:#4a3712;margin:12px 0 0;max-width:64ch}
.mx-you-d b{color:#2a1e07;font-weight:700}
.mx-you-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mx-you-btns .btn-ghost{border-color:rgba(42,30,7,.32);color:#2a1e07}
.mx-you-btns .btn-ghost:hover{border-color:#2a1e07;color:#2a1e07}
.mx-you-grid{display:flex;gap:26px;align-items:center}
.mx-you-grid>div{flex:1 1 auto;min-width:0}
.mx-you-qr{flex:0 0 auto;width:150px;height:150px;border-radius:10px;display:block;background:#fff;
  padding:9px;border:1px solid rgba(42,30,7,.16)}
@media(max-width:700px){
  .mx-you-grid{gap:0}
  .mx-you-qr{display:none}   /* you cannot scan the screen you are holding */
}
@media(max-width:600px){.mx-you{padding:20px 18px;border-radius:14px}.mx-you-btns .btn{width:100%}}

/* entry point from the Rewards page */
.mx-link{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  margin:22px 0 0;padding:17px 20px;border-radius:15px;font-family:inherit;
  background:linear-gradient(120deg,#f7e3ae,#eecd82 42%,#e0a83a);border:1px solid #d9ae4d;
  box-shadow:0 10px 30px rgba(191,143,56,.20);transition:transform .18s ease,box-shadow .18s ease}
.mx-link:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(191,143,56,.30)}
.mx-link .mxl-txt{flex:1 1 auto;min-width:0}
.mx-link .mxl-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:#7a5a14}
.mx-link .mxl-t{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:#2a1e07;margin-top:3px}
.mx-link .mxl-d{display:block;font-size:13px;line-height:1.5;color:#5b451a;margin-top:3px}
.mx-link .mxl-go{flex:0 0 auto;font-size:19px;color:#2a1e07}
@media(max-width:560px){.mx-link{padding:15px 16px;gap:12px}.mx-link .mxl-t{font-size:15px}}

/* ---------------------------------------------------------------------------
   THE VAULT — the Earn the Most banner.

   This is the doorway to the ambassador programme and it was a flat gold bar
   with three lines of text on it. It now carries the real number at the size
   the number deserves, over a field of struck coins.

   The coins are CSS radial gradients on one pseudo-element: no images, no
   canvas, no extra requests, and nothing that touches the main thread again
   after paint. That matters here — the audit already flagged this page's
   interaction budget.
   --------------------------------------------------------------------------- */
.mx-vault{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  margin:26px 0 0;padding:0;border:0;border-radius:20px;font-family:inherit;overflow:hidden;
  background:linear-gradient(118deg,#d4a232 0%,#ecc86a 24%,#f9ecc0 48%,#e9c05a 72%,#d4a232 100%);
  box-shadow:0 18px 44px -18px rgba(122,90,20,.72), inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .22s cubic-bezier(.3,.7,.2,1),box-shadow .22s ease}
.mx-vault:hover{transform:translateY(-3px);
  box-shadow:0 26px 60px -20px rgba(122,90,20,.85), inset 0 1px 0 rgba(255,255,255,.5)}
.mx-vault:focus-visible{outline:3px solid #16233a;outline-offset:3px}

.mx-vault-coins{position:absolute;inset:0;pointer-events:none;opacity:.62;
  background-image:
    radial-gradient(circle at 6% 74%,  rgba(255,247,214,.85) 0 11px, rgba(140,102,18,.30) 11px 13px, transparent 13px),
    radial-gradient(circle at 15% 26%, rgba(255,247,214,.70) 0 7px,  rgba(140,102,18,.26) 7px 8.5px, transparent 8.5px),
    radial-gradient(circle at 27% 82%, rgba(255,247,214,.62) 0 9px,  rgba(140,102,18,.24) 9px 10.5px, transparent 10.5px),
    radial-gradient(circle at 38% 14%, rgba(255,247,214,.55) 0 6px,  rgba(140,102,18,.22) 6px 7px, transparent 7px),
    radial-gradient(circle at 52% 88%, rgba(255,247,214,.50) 0 8px,  rgba(140,102,18,.20) 8px 9.5px, transparent 9.5px),
    radial-gradient(circle at 63% 22%, rgba(255,247,214,.62) 0 10px, rgba(140,102,18,.26) 10px 11.5px, transparent 11.5px),
    radial-gradient(circle at 78% 70%, rgba(255,247,214,.55) 0 7px,  rgba(140,102,18,.22) 7px 8.5px, transparent 8.5px),
    radial-gradient(circle at 88% 32%, rgba(255,247,214,.70) 0 12px, rgba(140,102,18,.30) 12px 14px, transparent 14px),
    radial-gradient(circle at 96% 80%, rgba(255,247,214,.45) 0 6px,  rgba(140,102,18,.18) 6px 7px, transparent 7px)}
.mx-vault-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.40) 47%,transparent 60%);
  transform:translateX(-60%);animation:mxSheen 7s ease-in-out 1.2s infinite}
@keyframes mxSheen{0%{transform:translateX(-60%)}42%,100%{transform:translateX(160%)}}

.mx-vault-in{position:relative;display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  padding:26px 30px}
.mx-vault-l{flex:1 1 320px;min-width:0}
.mx-vault-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.20em;
  text-transform:uppercase;color:#3d2b04}
.mx-vault-t{display:block;font-size:clamp(21px,2.5vw,29px);font-weight:800;letter-spacing:-.025em;
  line-height:1.08;color:#1c1405;margin-top:6px;text-wrap:balance}
.mx-vault-d{display:block;font-size:13.5px;line-height:1.55;color:#3d2b04;margin-top:8px;max-width:46ch}
.mx-vault-d b{color:#2a1e07;font-weight:700}

.mx-vault-r{flex:0 0 auto;display:flex;align-items:center;gap:22px;margin-left:auto}
.mx-vault-big{text-align:right;line-height:1}
.mx-vault-n{display:block;font-size:clamp(38px,5.6vw,62px);font-weight:800;letter-spacing:-.045em;
  color:#1c1405;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.mx-vault-u{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#3d2b04;margin-top:5px}
.mx-vault-go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:21px;color:#f6e6b8;background:#2a1e07;
  box-shadow:0 8px 18px -8px rgba(30,20,4,.9);transition:transform .22s ease}
.mx-vault:hover .mx-vault-go{transform:translateX(4px)}

.mx-vault-rungs{position:relative;display:flex;gap:0;flex-wrap:wrap;
  border-top:1px solid rgba(107,77,12,.28);background:rgba(42,30,7,.07)}
.mx-vault-rung{flex:1 1 0;min-width:132px;padding:11px 16px 12px;
  border-right:1px solid rgba(107,77,12,.20)}
.mx-vault-rung:last-child{border-right:0}
.mx-vault-rung b{display:block;font-size:17px;font-weight:800;color:#1c1405;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mx-vault-rung span{display:block;font-size:11.5px;line-height:1.4;color:#3d2b04;margin-top:2px}

@media(max-width:760px){
  .mx-vault-in{padding:20px 18px;gap:18px}
  .mx-vault-r{margin-left:0;width:100%;justify-content:space-between}
  .mx-vault-rung{min-width:0;flex:1 1 33%}
}
@media(prefers-reduced-motion:reduce){
  .mx-vault-sheen{animation:none;opacity:.28;transform:none}
  .mx-vault{transition:none}
  .mx-vault:hover{transform:none}
}
@media(max-width:760px){
  .mx-stage{grid-template-columns:1fr;gap:14px;padding:22px 18px}
  .mx-list{grid-column:1;grid-row:auto}
  .mx-note{grid-column:1}
  .mx-fig{grid-column:1;margin-top:0}
  .mx-table-w,.mx-real,.mx-cta{padding:22px 18px;border-radius:14px}
  .mx{padding:92px 0 70px}
}

/* ---------- Member benefits ---------- */
.mbr{padding:106px 0 90px}
.mbr-bal{display:flex;gap:30px;align-items:center;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin:0 0 26px}
.mbr-bal-n{flex:0 0 auto;line-height:1}
.mbr-bal-n span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.mbr-bal-n b{font-size:clamp(40px,6vw,62px);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.mbr-bal-n i{font-style:normal;font-size:13px;color:var(--mut);margin-left:8px}
.mbr-bal-r{flex:1 1 260px;min-width:0}
.mbr-bal-r p{font-size:15px;line-height:1.6;color:var(--mut);margin:0}
.mbr-bal-r p b{color:var(--ink)}
.mbr-bar{height:8px;border-radius:6px;background:var(--bg2);margin:14px 0 0;overflow:hidden}
.mbr-bar i{display:block;height:100%;border-radius:6px;background:var(--gold-2)}
.mbr-block{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin:0 0 20px}
.mbr-h{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 6px}
.mbr-sub{font-size:13.5px;line-height:1.6;color:var(--mut);margin:0 0 18px;max-width:70ch}
.mbr-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mbr-tier{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:13px;padding:16px 18px;background:var(--bg2)}
.mbr-tier.is-open{border-color:var(--gold);background:rgba(191,143,56,.07)}
.mbr-tp{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.mbr-tn{font-size:13.5px;font-weight:600;color:var(--ink)}
.mbr-ts{font-size:11.5px;color:var(--dim)}
.mbr-tier.is-open .mbr-ts{color:var(--gold-2);font-weight:700}
.mbr-opens{display:flex;flex-direction:column;gap:10px}
.mbr-open{font-family:inherit;cursor:pointer;text-align:left;display:flex;align-items:center;gap:16px;
  background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:15px 18px;transition:.2s;width:100%}
.mbr-open:hover{border-color:var(--gold);transform:translateY(-2px)}
.mbr-oamt{flex:0 0 auto;min-width:64px;font-size:17px;font-weight:800;color:var(--gold-2);font-variant-numeric:tabular-nums}
.mbr-ot{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.mbr-ot b{font-size:14.5px;color:var(--ink)}
.mbr-ot i{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--mut)}
.mbr-oar{flex:0 0 auto;font-size:17px;color:var(--dim)}
.mbr-open:hover .mbr-oar{color:var(--gold-2)}
.mbr-only{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mbr-only>div{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.mbr-only b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px}
.mbr-only p{margin:0;font-size:12.5px;line-height:1.55;color:var(--mut)}
.mbr-real{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin:0 0 20px}
.mbr-real h3{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 14px}
.mbr-real ul{margin:0;padding-left:19px}
.mbr-real li{font-size:13.5px;line-height:1.65;color:var(--mut);margin-bottom:9px}
.mbr-real li b{color:var(--ink)}
.mbr-fine{font-size:12px;color:var(--dim);margin:14px 0 0}
.mbr-fine a{color:var(--gold-2);text-decoration:underline}
.mbr-cta{display:flex;gap:12px;flex-wrap:wrap}
.mbr-locked{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 30px}
.mbr-locked h3{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 14px}
.mbr-locked ul{margin:0;padding-left:19px}
.mbr-locked li{font-size:14px;line-height:1.65;color:var(--mut);margin-bottom:9px}
.mbr-locked li b{color:var(--ink)}
@media(max-width:1000px){.mbr-tiers{grid-template-columns:repeat(2,1fr)}.mbr-only{grid-template-columns:1fr}}
@media(max-width:600px){
  .mbr{padding:92px 0 70px}
  .mbr-bal,.mbr-block,.mbr-real,.mbr-locked{padding:20px 18px;border-radius:14px}
  .mbr-tiers{grid-template-columns:1fr}
  .mbr-cta .btn{width:100%;justify-content:center}
}

/* ---------- Brand Ambassador ---------- */
.amb{padding:106px 0 90px}
.amb-hero-stat{display:flex;align-items:center;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#f7e3ae 0%,#eecd82 38%,#e0a83a 100%);
  border:1px solid #d9ae4d;border-radius:18px;padding:30px 34px;margin:0 0 22px;
  box-shadow:0 18px 44px -26px rgba(150,110,30,.85)}
/* one diagonal sheen, so it reads as foil rather than a flat yellow box */
.amb-hero-stat:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.55) 46%,transparent 62%)}
.ahs-num{position:relative;flex:none;text-align:left;line-height:1}
.ahs-k{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7a5410;font-weight:800;margin-bottom:8px}
.amb-hero-stat a{color:#5b3f08;text-decoration:underline;font-weight:700;white-space:nowrap}
.amb-hero-stat a:hover{color:#2a1e07}
.amb-hero-stat b{display:block;font-size:clamp(52px,8vw,92px);font-weight:400;line-height:.92;color:#16233a;letter-spacing:-.04em}
.ahs-num i{display:block;font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#7a5410;font-weight:800;margin-top:6px}
.amb-hero-stat > span{position:relative;flex:1 1 340px;font-size:15px;line-height:1.65;color:#4a3a18}
.amb-hero-stat > span b{display:inline;font-size:inherit;font-weight:700;color:#16233a;letter-spacing:0}
@media(max-width:620px){
  .amb-hero-stat{padding:24px 20px;gap:18px}
  .amb-hero-stat > span{font-size:14px}
}
@media (prefers-reduced-motion:reduce){ .amb-hero-stat:before{display:none} }
.amb-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 22px}
.amb-step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px}
.amb-step.amb-wide{grid-column:1/-1}
.amb-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--bg2);color:var(--gold-2);font-weight:700;font-size:14px;margin-bottom:13px}
.amb-step h3{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 10px}
.amb-step p{font-size:14px;line-height:1.65;color:var(--mut);margin:0 0 10px}
.amb-step p:last-child{margin-bottom:0}
.amb-step b{color:var(--ink);font-weight:600}
.amb-chain{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px!important;
  font-size:15px;color:var(--ink)}
.amb-chain span{color:var(--gold-2)}
/* the payout */
.amb-diff{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.amb-diff h3{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px;text-wrap:balance}
.amb-diff-sub{font-size:14px;line-height:1.6;color:var(--mut);margin:0 0 20px;max-width:660px}
.amb-diff-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0}
.amb-diff-list li{position:relative;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;
  padding:16px 18px 16px 42px;font-size:13.5px;line-height:1.6;color:var(--mut)}
.amb-diff-list li:before{content:"\2713";position:absolute;left:16px;top:15px;color:#1a7c69;font-weight:800;font-size:14px}
.amb-diff-list b{color:var(--ink);font-weight:700}
.amb-diff-fine{font-size:12.5px;line-height:1.6;color:var(--dim);margin:18px 0 0}
.amb-diff-fine a{color:var(--mut);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){ .amb-diff-list{grid-template-columns:1fr} }
@media(max-width:560px){ .amb-diff{padding:22px 18px;border-radius:14px} .amb-diff h3{font-size:20px} }
.amb-lock{display:flex;gap:24px;align-items:flex-start;
  background:linear-gradient(135deg,#16233a 0%,#1e2f4d 100%);border-radius:18px;padding:30px 32px;margin:0 0 22px}
.amb-lock-i{flex:none;width:52px;height:52px;border-radius:14px;background:rgba(243,214,137,.13);
  display:flex;align-items:center;justify-content:center;color:#f3d689}
.amb-lock-i svg{width:28px;height:28px;display:block}
.amb-lock-b{min-width:0}
.amb-lock h3{font-size:23px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.amb-lock p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.74);margin:0 0 12px;max-width:720px}
.amb-lock p b{color:#f3d689;font-weight:600}
.amb-lock-fine{font-size:12.5px!important;line-height:1.65;color:rgba(255,255,255,.55)!important;
  border-top:1px solid rgba(243,214,137,.2);padding-top:13px;margin:16px 0 0!important}
.amb-lock-fine a{color:#f3d689;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.amb-lock-k{font-size:12px!important;letter-spacing:.18em;text-transform:uppercase;color:#f3d689!important;
  font-weight:800;margin:16px 0 0!important}
@media(max-width:620px){
  .amb-lock{flex-direction:column;gap:16px;padding:24px 20px;border-radius:14px}
  .amb-lock h3{font-size:20px}
}
.amb-chain-flow{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.acf-h{text-align:center;max-width:600px;margin:0 auto 24px}
.acf-h h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.acf-h p{font-size:14px;line-height:1.6;color:var(--mut);margin:0}
.acf-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0}
.acf-steps li{position:relative;background:var(--bg);border:1px solid var(--line-2);border-radius:14px;padding:18px 18px 16px}
.acf-steps li:not(:last-child):after{content:"";position:absolute;right:-11px;top:50%;width:8px;height:8px;
  border-right:1.8px solid var(--gold);border-top:1.8px solid var(--gold);transform:translateY(-50%) rotate(45deg);z-index:2}
.acf-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--bg2);color:var(--gold-2);font-weight:700;font-size:12.5px;margin-bottom:11px}
.acf-steps b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-.01em}
.acf-steps b i{font-style:normal;color:var(--gold-2)}
.acf-d{display:block;font-size:12.5px;line-height:1.55;color:var(--mut);margin-top:7px}
.acf-goal{margin:22px auto 0;max-width:660px;text-align:center;font-size:14px;line-height:1.65;color:var(--mut)}
.acf-goal b{color:var(--ink);font-weight:600}
@media(max-width:1000px){
  .acf-steps{grid-template-columns:1fr 1fr}
  .acf-steps li:nth-child(2):after{display:none}
}
@media(max-width:620px){
  .acf-steps{grid-template-columns:1fr}
  .acf-steps li:after{display:none}
  .amb-chain-flow{padding:22px 18px;border-radius:14px}
}
.amb-fork{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.amb-fork-h{text-align:center;max-width:600px;margin:0 auto 22px}
.amb-fork-h h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.amb-fork-h p{font-size:14px;line-height:1.6;color:var(--mut);margin:0}
.amb-fork-grid{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap}
.amb-fork-c{flex:1 1 260px;max-width:360px;background:var(--bg);border:1px solid var(--line-2);border-radius:14px;padding:20px 22px}
.amb-fork-c.is-amb{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,var(--bg))}
.amb-fork-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:9px}
.amb-fork-c.is-amb .amb-fork-k{color:#9c7410}
.amb-fork-c p{font-size:13.5px;line-height:1.6;color:var(--mut);margin:0}
.amb-fork-or{display:flex;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
@media(max-width:860px){ .amb-fork-or{display:none} }
@media(max-width:560px){ .amb-fork{padding:22px 18px;border-radius:14px} }
.amb-earn{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.amb-earn-h{text-align:center;max-width:600px;margin:0 auto 24px}
.amb-earn-h h3{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.amb-earn-h p{font-size:14.5px;line-height:1.6;color:var(--mut);margin:0}
.amb-split{display:flex;align-items:stretch;justify-content:center;gap:18px;flex-wrap:wrap}
.amb-card{flex:1 1 240px;max-width:320px;text-align:center;background:var(--bg);border:1px solid var(--line-2);
  border-radius:14px;padding:22px 20px}
.amb-card.is-amb{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,var(--bg))}
.amb-who{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:10px}
.amb-card.is-amb .amb-who{color:#9c7410}
.amb-pts{font-size:46px;font-weight:200;line-height:1;color:var(--gold-2);letter-spacing:-.02em}
.amb-lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-top:4px}
.amb-card p{font-size:13px;line-height:1.55;color:var(--mut);margin:12px 0 0}
.amb-plus{display:flex;align-items:center;font-size:26px;font-weight:200;color:var(--dim)}
.amb-note{text-align:center;font-size:13px;color:var(--mut);margin:20px 0 0}
.amb-note b{color:var(--ink)}
/* two ways */
.amb-ways{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 22px}
.amb-way{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
.amb-way-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);font-weight:800;margin-bottom:10px}
.amb-way p{font-size:15px;line-height:1.6;color:var(--mut);margin:0}
.amb-way b{color:var(--ink);font-weight:600}
/* example */
.amb-eg{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.amb-eg h3{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 14px}
.amb-eg ul{list-style:none;margin:0 0 20px;padding:0}
.amb-eg li{position:relative;padding:0 0 9px 18px;font-size:14.5px;line-height:1.6;color:var(--mut)}
.amb-eg li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.amb-eg b{color:var(--ink);font-weight:600}
.amb-eg-out{display:flex;gap:16px;flex-wrap:wrap}
.amb-eg-out > div{flex:1 1 200px;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:16px 18px}
.amb-eg-out > div.is-you{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,var(--bg))}
.amb-eg-out span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:6px}
.amb-eg-out b{display:block;font-size:22px;font-weight:400;color:var(--gold-2);letter-spacing:-.01em}
/* close */
.amb-cta{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:38px 28px}
.amb-cta-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);font-weight:800;margin-bottom:12px}
.amb-cta h3{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 22px}
.amb-cta .btn{display:inline-flex}
.amb-fine{font-size:11.5px;line-height:1.6;color:var(--dim);margin:22px auto 0;max-width:620px}
.amb-fine a{color:var(--mut);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){
  .amb-row,.amb-ways{grid-template-columns:1fr}
  .amb-plus{display:none}
}
@media(max-width:560px){
  .amb{padding:92px 0 70px}
  .amb-step,.amb-way,.amb-eg,.amb-earn{padding:22px 18px;border-radius:14px}
  .amb-cta{padding:30px 18px}
  .amb-earn-h h3,.amb-cta h3{font-size:21px}
  .amb-pts{font-size:38px}
}

/* ---------- Ambassador estimator ---------- */
.amb-calc{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.amb-calc h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.amb-calc-sub{font-size:14px;line-height:1.6;color:var(--mut);margin:0 0 24px;max-width:640px}
.amb-calc-sub b{color:var(--ink);font-weight:600}
.amb-calc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:26px}
.amb-ctrl label,.amb-ctrl-k{display:block;font-size:12.5px;letter-spacing:.02em;color:var(--mut);margin-bottom:12px;font-weight:500}
.amb-ctrl label b,.amb-ctrl-k b{color:var(--gold-2);font-weight:700;font-size:15px}
.amb-ctrl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;
  background:var(--line-2);outline:none;cursor:pointer;margin:0}
.amb-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg);box-shadow:0 2px 8px rgba(22,35,58,.35);cursor:pointer}
.amb-ctrl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);
  border:3px solid var(--bg);box-shadow:0 2px 8px rgba(22,35,58,.35);cursor:pointer;border-color:var(--bg)}
.amb-ctrl input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.amb-scale{display:flex;justify-content:space-between;margin-top:7px}
.amb-scale i{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.amb-seg{display:flex;gap:6px;flex-wrap:wrap}
.amb-seg button{flex:1;min-width:88px;background:var(--bg);border:1px solid var(--line-2);border-radius:30px;
  padding:9px 10px;font-family:inherit;font-size:12.5px;color:var(--mut);cursor:pointer;transition:.22s;white-space:nowrap}
.amb-seg button:hover{border-color:var(--gold);color:var(--ink)}
.amb-seg button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.amb-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* the readout */
.amb-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:stretch;
  background:linear-gradient(135deg,#fffdf8,#f7f1e4);border:1px solid #ead9b8;border-radius:14px;padding:22px 24px}
.amb-out-main{text-align:left}
.amb-out-main span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#9c7410;font-weight:700}
.amb-out-main b{display:block;font-size:clamp(40px,6vw,58px);font-weight:200;line-height:1.05;color:var(--gold-2);letter-spacing:-.02em;margin:6px 0 2px}
.amb-out-main i{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600}
.amb-out-side{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:center}
.amb-out-side > div{border-left:1px solid #ead9b8;padding-left:14px}
.amb-out-side span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:5px}
.amb-out-side b{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.25;display:block}
/* --- paid in things, not cash --- */
.amb-nocash{display:flex;gap:14px;align-items:flex-start;background:#f4f7f4;border:1px solid #cfe0d2;
  border-radius:12px;padding:15px 18px;margin:0 0 22px}
.amb-nocash svg{width:22px;height:22px;flex:none;stroke:#3f7a4e;fill:none;stroke-width:1.6;margin-top:1px}
.amb-nocash p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut)}
.amb-nocash p b{color:var(--ink);font-weight:700}
.amb-pay{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.amb-pay-card{background:var(--bg);border:1px solid var(--line-2);border-radius:13px;padding:18px 20px}
.amb-pay-card .k{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:11px}
.amb-pay-card .k svg{width:17px;height:17px;stroke:var(--gold-2);fill:none;stroke-width:1.5;flex:none}
.amb-pay-card .big{font-size:30px;font-weight:400;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.amb-pay-card .big em{font-style:normal;font-size:14px;font-weight:600;color:var(--mut);letter-spacing:0}
.amb-pay-card ul{list-style:none;margin:11px 0 0;padding:0}
.amb-pay-card li{font-size:13px;line-height:1.55;color:var(--mut);padding:3px 0 3px 15px;position:relative}
.amb-pay-card li:before{content:'';position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.amb-pay-card li b{color:var(--ink);font-weight:600}
.amb-pay-card .none{font-size:13px;color:var(--dim);margin:11px 0 0;font-style:italic}
.amb-worth{font-size:12.5px;line-height:1.65;color:var(--mut);background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:13px 16px;margin:14px 0 0}
.amb-worth b{color:var(--ink);font-weight:600}
/* ═══════════ INSIDER POINTS CALCULATOR (#/calculator) ═════════════════════
   Three columns that read left to right as a sentence: what you would do,
   what it comes to, what to do next. Operated, not read — so controls look
   like controls and every row carries its own live number. */
.ic-board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:start;margin-top:30px}
.ic-col{min-width:0;display:flex;flex-direction:column}
.ic-h{font-size:19px;font-weight:700;letter-spacing:-.018em;color:var(--ink);margin:0 0 5px}
.ic-sub{font-size:13px;line-height:1.6;color:var(--mut);margin:0 0 16px;max-width:44ch}
.ic-sub em{font-style:italic;color:var(--ink)}

/* an action row */
.ic-act{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 17px;margin-bottom:10px;transition:border-color .25s ease,box-shadow .25s ease}
.ic-act.is-lit{border-color:var(--orange);box-shadow:0 0 0 3px rgba(239,90,31,.15)}
.ic-act.is-gold{background:linear-gradient(180deg,#fffdf7,#fff9ed);border-color:#eadfcb}
.ic-act.is-off{background:var(--bg2);opacity:.72}
.ic-act.is-lapsed{background:var(--bg2);border-color:var(--line-2)}
.ic-act.is-lapsed .ic-act-v b{color:var(--dim);font-size:15px;letter-spacing:.02em;text-transform:uppercase}
.ic-act.is-lapsed .ic-note,.ic-act.is-lapsed .ic-note b{color:var(--orange)}
.ic-act-h{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.ic-act-h b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.012em;color:var(--ink);line-height:1.3}
.ic-act-h span{display:block;font-size:12.5px;line-height:1.55;color:var(--mut);margin-top:4px}
.ic-act-h span b{display:inline;font-size:inherit}
.ic-act-v{text-align:right;flex:none}
.ic-act-v b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--gold-2);
  font-variant-numeric:tabular-nums;line-height:1}
.ic-act-v i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-top:5px}
.ic-act.is-off .ic-act-v b{color:var(--dim)}

.ic-step-row{display:flex;align-items:center;gap:10px}
.ic-step-row button{width:34px;height:34px;flex:none;border-radius:50%;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
  font-family:inherit;font-size:18px;line-height:1;font-weight:600;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.ic-step-row button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ic-step-row button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ic-step-row>b{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.ic-step-row>span{font-size:12.5px;color:var(--mut)}
.ic-toggle{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;background:var(--bg2);
  border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:8px 18px;transition:all .18s ease}
.ic-toggle.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ic-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ic-seg{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:4px}
.ic-seg button{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;background:none;
  border:0;color:var(--mut);border-radius:999px;padding:6px 12px;transition:all .15s ease}
.ic-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(22,35,58,.15)}
.ic-seg button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ic-note{font-size:12px;line-height:1.55;color:var(--mut);margin:11px 0 0}
.ic-note b{color:var(--ink);font-weight:600}
.ic-have{display:block;background:var(--panel);border:1px dashed var(--line-2);border-radius:14px;padding:14px 17px}
.ic-have span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:8px}
.ic-have input{width:100%;font-family:inherit;font-size:19px;font-weight:700;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.ic-have input:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

/* the answer */
.ic-out{background:var(--ink);border-radius:16px;padding:20px;color:#fff;margin-bottom:12px;
  box-shadow:0 20px 44px -24px rgba(22,35,58,.66)}
.ic-out-top{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);
  border-radius:11px;overflow:hidden}
.ic-out-top>div{background:var(--ink);padding:14px 15px}
.ic-out-top .is-alt{background:#1d2b45}
.ic-out-top span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;margin-bottom:7px}
.ic-out-top b{display:block;font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums}
.ic-out-top i{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.55);margin-top:6px}
.ic-out-top i b{display:inline;font-size:inherit;color:#f3d689}
.ic-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);
  border-radius:11px;overflow:hidden;margin-top:12px}
.ic-split>div{background:#1d2b45;padding:11px 14px}
.ic-split span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:4px}
.ic-split b{font-size:17px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

.ic-brk{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:6px 17px;margin-bottom:12px}
.ic-brk-r{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.ic-brk-r:last-child{border-bottom:0}
.ic-brk-r i{font-style:normal;color:var(--dim);font-size:12.5px}
.ic-brk-r b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.ic-brk-r.is-total{border-top:2px solid var(--ink);margin-top:2px;padding-top:12px}
.ic-brk-r.is-total span{color:var(--ink);font-weight:700}
.ic-brk-r.is-total b{font-size:20px;color:var(--gold-2)}

.ic-unlock{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:17px}
.ic-unlock-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:9px}
.ic-big{font-size:26px;font-weight:800;letter-spacing:-.028em;color:var(--ink);line-height:1.1}
.ic-big em{font-style:normal;font-size:15px;font-weight:600;color:var(--mut)}
.ic-big-sub{font-size:12.5px;line-height:1.6;color:var(--mut);margin:8px 0 14px}
.ic-big-sub b{color:var(--ink)}
.ic-ladder{display:flex;flex-direction:column;gap:5px}
.ic-tier{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  padding:9px 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);
  opacity:.55;transition:all .3s ease}
.ic-tier.is-hit{opacity:1;border-color:var(--gold);background:#fffaf1}
.ic-tier b{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ic-tier span{font-size:12px;line-height:1.4;color:var(--mut)}
.ic-tier i{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.ic-tier.is-hit i{color:#1a7c69;font-weight:700}
.ic-when{font-size:12.5px;line-height:1.65;color:var(--mut);margin:14px 0 0;padding-top:13px;
  border-top:1px solid var(--line)}
.ic-when b{color:var(--ink)}

/* the path */
.ic-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ic-step{display:grid;grid-template-columns:auto 1fr auto;gap:13px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 15px;
  font-family:inherit;cursor:pointer;transition:all .18s ease;align-items:start}
.ic-step:hover{border-color:var(--orange);box-shadow:0 6px 18px -12px rgba(22,35,58,.4)}
.ic-step:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ic-step-n{width:25px;height:25px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ic-step-b b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
/* ── home: join-and-get-the-simulator ─────────────────────────────────── */
.sim-cta{background:var(--bg2)}
/* ── rewards: the simulator panel ─────────────────────────────────────── */
/* ── calculator: open to look at, members to drive ────────────────────── */
/* ── ambassador page: the simulator teaser ────────────────────────────── */
/* ── journal: a full-height product screenshot ────────────────────────── */
.jr-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.jr-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);padding:0 12px 10px 0;border-bottom:1px solid rgba(22,35,58,.16)}
.jr-table th:nth-child(2),.jr-table td:nth-child(2){text-align:right;white-space:nowrap;width:74px}
.jr-table th:nth-child(3),.jr-table td:nth-child(3){text-align:right;white-space:nowrap}
.jr-table td{padding:13px 12px 13px 0;border-bottom:1px solid rgba(22,35,58,.09);vertical-align:top;
  line-height:1.45}
.jr-table tr:last-child td{border-bottom:0}
.jr-table td:nth-child(2){font-weight:800;color:var(--gold-2);font-variant-numeric:tabular-nums;font-size:16px}
.jr-table td:nth-child(3){color:var(--mut);font-size:12.5px}
.jr-table td span{display:block;margin-top:3px;font-size:12.5px;color:var(--mut);line-height:1.45}
@media (max-width:560px){
  .jr-table,.jr-table tbody,.jr-table tr,.jr-table td{display:block;width:auto}
  .jr-table thead{display:none}
  .jr-table tr{padding:13px 0;border-bottom:1px solid rgba(22,35,58,.09)}
  .jr-table td{border:0;padding:0}
  .jr-table td:nth-child(2),.jr-table td:nth-child(3){display:inline-block;text-align:left;width:auto;margin-top:6px}
  .jr-table td:nth-child(3){margin-left:14px}
}
.jr-shot{margin:26px 0;padding:0}
.jr-shot img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid rgba(22,35,58,.14);box-shadow:0 22px 54px -30px rgba(22,35,58,.45)}
.jr-shot figcaption{margin:12px 2px 0;font-size:12.5px;line-height:1.55;color:var(--mut)}
.mx-sim{border:1px solid rgba(214,163,67,.30);border-radius:18px;padding:30px 32px;margin:34px 0 0;
  background:linear-gradient(165deg,rgba(214,163,67,.09),rgba(214,163,67,0) 64%)}
@media (max-width:640px){.mx-sim{padding:22px}}
.mx-sim h3{margin:10px 0 12px;font-size:clamp(20px,2.9vw,27px);line-height:1.2;letter-spacing:-.02em}
.mx-sim p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--mut);max-width:52em}
.mx-sim-card{border:1px solid rgba(214,163,67,.26);border-radius:14px;overflow:hidden}
.mx-sim-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:14px 18px;border-bottom:1px solid rgba(214,163,67,.15);font-size:14px}
.mx-sim-row:last-child{border-bottom:0}
.mx-sim-row span{color:var(--mut);flex:1}
.mx-sim-row b{font-variant-numeric:tabular-nums;font-size:17px;font-weight:800;color:var(--gold-2)}
.mx-sim-row.is-sum{background:rgba(214,163,67,.10)}
.mx-sim-row.is-sum span{color:var(--ink);font-weight:700}
.mx-sim-row.is-sum b{font-size:22px}
.mx-sim-note{margin:14px 0 0!important}
.mx-sim-btns{display:flex;gap:11px;flex-wrap:wrap;margin:18px 0 0}
/* ── ambassador: how the two-person chain actually works ──────────────── */
.amb-chain2{margin:34px 0 0}
.amb-chain2 h3{margin:0 0 18px;font-size:clamp(21px,3vw,29px);line-height:1.18;letter-spacing:-.02em}
.ac2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.ac2-card{border:1px solid rgba(22,35,58,.14);border-radius:15px;padding:20px 22px;
  background:rgba(255,255,255,.5)}
.ac2-card.is-gold{border-color:rgba(214,163,67,.42);
  background:linear-gradient(168deg,rgba(214,163,67,.11),rgba(214,163,67,0) 68%)}
.ac2-k{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a6618;margin-bottom:9px}
.ac2-card p{margin:0;font-size:14px;line-height:1.6;color:var(--mut)}
.ac2-card b{color:var(--ink)}
.ac2-do{margin:18px 0 0;padding:17px 20px;border-left:2px solid rgba(214,163,67,.5);
  background:rgba(214,163,67,.07);border-radius:0 12px 12px 0;
  font-size:14.5px;line-height:1.62;color:var(--mut);max-width:56em}
.ac2-do b{color:var(--ink)}
.amb-sim{padding:56px 0}
.amb-sim-card{border:1px solid rgba(214,163,67,.30);border-radius:16px;overflow:hidden;
  background:linear-gradient(168deg,rgba(214,163,67,.09),rgba(214,163,67,0) 66%);margin:6px 0 0}
.amb-sim-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 20px;border-bottom:1px solid rgba(214,163,67,.16);font-size:14.5px}
.amb-sim-row:last-child{border-bottom:0}
.amb-sim-row span{color:var(--mut);flex:1}
.amb-sim-row b{font-variant-numeric:tabular-nums;font-size:18px;font-weight:800;color:var(--gold-2)}
.amb-sim-row.is-sum{background:rgba(214,163,67,.10)}
.amb-sim-row.is-sum span{color:var(--ink);font-weight:700}
.amb-sim-row.is-sum b{font-size:24px}
.amb-sim-note{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--mut);max-width:52em}
.amb-sim-btns{display:flex;gap:11px;flex-wrap:wrap;margin:20px 0 0}
.amb-sim-fine{margin:16px 0 0;font-size:11.5px;line-height:1.55;color:var(--mut);opacity:.8;max-width:52em}
/* ── MY POINTS — the simulator's card, with the dials taken out ───────── */

/* The header over a dark hero. CSS beats SVG presentation attributes, so the
   logo recolours too. Only while un-scrolled — .solid already has a ground. */
body.on-dark-hero .nav:not(.solid) a,
body.on-dark-hero .nav:not(.solid) .nav-cart,
body.on-dark-hero .nav:not(.solid) .nav-person,
body.on-dark-hero .nav:not(.solid) .nav-burger{color:#F5F5F2}
body.on-dark-hero .nav:not(.solid) a span,
body.on-dark-hero .nav:not(.solid) a b,
body.on-dark-hero .nav:not(.solid) .brand,
body.on-dark-hero .nav:not(.solid) .brand span{color:#F5F5F2}
body.on-dark-hero .nav:not(.solid) a:hover{color:#E8B94F}
body.on-dark-hero .nav:not(.solid) svg circle,
body.on-dark-hero .nav:not(.solid) svg path,
body.on-dark-hero .nav:not(.solid) svg rect{stroke:#F5F5F2}
body.on-dark-hero .nav:not(.solid) svg text{fill:#F5F5F2}
body.on-dark-hero .nav:not(.solid) .nav-person{border-color:rgba(245,245,242,.34)}

/* ══ BRAND AMBASSADOR — conversion journey ═══════════════════════════════
   Dark navy/gold for the three "moment" sections (hero, unlock, final CTA);
   the site's light ground for everything read at length. Same gold, same
   type scale, same buttons as the rest of BOK. */
.cap-wrap{display:flex;justify-content:center;margin:18px 0 4px}
.cap-box{display:flex;align-items:center;gap:13px;width:100%;max-width:304px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:5px;padding:14px 15px;background:var(--panel2)}
.cap-box:hover{border-color:var(--gold-2)}
.cap-box input{width:26px;height:26px;flex:0 0 26px;accent-color:var(--gold-2);cursor:pointer;margin:0}
.cap-t{flex:1;min-width:0}
.cap-t b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.cap-t i{display:block;font-style:normal;font-size:10px;line-height:1.4;color:var(--mut);margin-top:3px}
.cap-logo{flex:0 0 auto;text-align:center;color:var(--mut)}
.cap-logo svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 2px}
.cap-logo em{font-style:normal;font-size:8px;letter-spacing:.03em;color:var(--mut)}
.ct-field .ct-opt{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);opacity:.75;margin-left:7px}
.ct-field .ct-help{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--mut)}
.ct-field .ct-help b{color:var(--gold-text)}
.ct-field input[name="refcode"]{text-transform:uppercase}
.ct-field input[name="refcode"]::placeholder{text-transform:none}

.ba-dark{--ba-ink:#F5F5F2;--ba-mut:#B4BDC9;--ba-dim:#8792A2;
  background:linear-gradient(168deg,#101B2E,#070E1B 62%);color:var(--ba-ink);
  position:relative;overflow:hidden}
.ba-dark::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 12% -18%,rgba(214,163,67,.16),transparent 62%),
             radial-gradient(620px 380px at 92% 8%,rgba(239,90,31,.10),transparent 60%)}
.ba-dark>*{position:relative;z-index:1}
.ba-dark .num-tag{color:#D6A343}
.ba-dark p{color:var(--ba-mut)}

/* hero */
.ba-hero{padding:74px 0 66px}
@media (max-width:720px){.ba-hero{padding:52px 0 46px}}
.ba-hero .num-tag{margin-bottom:14px}
.ba-hero h1{font-size:clamp(34px,6.4vw,68px);line-height:1.02;letter-spacing:-.03em;
  font-weight:800;margin:0 0 18px;color:var(--ba-ink);text-wrap:balance}
.ba-hero h1 em{font-style:normal;color:#D6A343}
.ba-hero-p{font-size:clamp(16px,2vw,19px);line-height:1.6;max-width:34em;margin:0 0 26px}
.ba-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ba-note{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--ba-dim);max-width:40em}
.ba-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media (max-width:900px){.ba-hero-grid{grid-template-columns:1fr;gap:30px}}
.ba-seal{border:1px solid rgba(214,163,67,.4);border-radius:20px;padding:28px;
  background:linear-gradient(165deg,rgba(214,163,67,.13),rgba(214,163,67,0) 66%)}
.ba-seal-k{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#D6A343}
.ba-seal-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(245,245,242,.12);font-size:14px;color:var(--ba-mut)}
.ba-seal-row:last-of-type{border-bottom:0}
.ba-seal-row b{color:#E8B94F;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.btn-gold{border:1px solid #D6A343;background:linear-gradient(180deg,#E8B94F,#D6A343);color:#0B0705;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 26px;border-radius:999px;cursor:pointer;transition:.18s}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-onDark{border:1px solid rgba(245,245,242,.28);background:transparent;color:#F5F5F2;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 24px;border-radius:999px;cursor:pointer;transition:.18s}
.btn-onDark:hover{border-color:#D6A343;color:#E8B94F}

/* value cards */
.ba-val{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:6px 0 0}
.ba-vc{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--panel);
  transition:border-color .2s,transform .2s}
.ba-vc:hover{border-color:rgba(214,163,67,.5);transform:translateY(-2px)}
.ba-vc-i{width:38px;height:38px;border-radius:10px;border:1px solid rgba(214,163,67,.42);
  background:rgba(214,163,67,.1);display:grid;place-items:center;color:var(--gold-text);margin-bottom:14px}
.ba-vc-i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ba-vc b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:7px;letter-spacing:-.01em}
.ba-vc p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut)}

/* how it works */
.ba-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:12px;margin:6px 0 0;counter-reset:baf}
.ba-fs{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);position:relative}
.ba-fs-n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;margin-bottom:11px}
.ba-fs.is-key .ba-fs-n{background:linear-gradient(180deg,#E8B94F,#D6A343);color:#0B0705}
.ba-fs.is-key{border-color:rgba(214,163,67,.5);background:linear-gradient(168deg,rgba(214,163,67,.09),rgba(214,163,67,0) 68%)}
.ba-fs b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:5px;line-height:1.3}
.ba-fs span{display:block;font-size:12.5px;line-height:1.5;color:var(--mut)}

/* the unlock milestone */
.ba-unlock{padding:60px 0}
.ba-medal{width:132px;height:132px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(214,163,67,.55);
  background:radial-gradient(circle at 50% 34%,rgba(214,163,67,.30),rgba(214,163,67,.05) 62%,transparent 74%)}
.ba-medal svg{width:56px;height:56px;stroke:#E8B94F;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ba-medal.is-locked{border-color:rgba(245,245,242,.2);background:rgba(245,245,242,.04)}
.ba-medal.is-locked svg{stroke:#8792A2}
.ba-unlock-s{text-align:center;max-width:44em;margin:0 auto}
.ba-unlock-s h2{font-size:clamp(24px,4vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:800;
  margin:0 0 14px;color:var(--ba-ink)}
.ba-state{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;border-radius:999px;padding:7px 16px;margin-bottom:18px}
.ba-state.is-locked{border:1px solid rgba(245,245,242,.24);color:#B4BDC9}
.ba-state.is-open{border:1px solid rgba(101,209,93,.5);color:#8ee085;background:rgba(101,209,93,.1)}
.ba-req{display:inline-block;text-align:left;border:1px solid rgba(214,163,67,.34);border-radius:14px;
  padding:20px 24px;margin:8px 0 22px;background:rgba(214,163,67,.07);max-width:38em}
.ba-req b{color:#E8B94F}
.ba-req p{margin:0;font-size:14.5px;line-height:1.6}
.ba-req p+p{margin-top:10px}

/* the two-person chain */
.ba-chain{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:6px 0 0;align-items:stretch}
@media (max-width:900px){.ba-chain{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ba-chain{grid-template-columns:1fr}}
.ba-cn{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);position:relative}
.ba-cn.is-gold{border-color:rgba(214,163,67,.48);background:linear-gradient(168deg,rgba(214,163,67,.1),rgba(214,163,67,0) 70%)}
.ba-cn-k{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.ba-cn b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:5px}
.ba-cn span{display:block;font-size:12.5px;line-height:1.5;color:var(--mut)}
.ba-nomlm{margin:16px 0 0;padding:16px 20px;border-left:2px solid rgba(214,163,67,.55);
  background:rgba(214,163,67,.07);border-radius:0 12px 12px 0;font-size:14px;line-height:1.6;color:var(--mut);max-width:56em}
.ba-nomlm b{color:var(--ink)}

/* product previews */
.ba-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin:6px 0 0}
.ba-shot{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column}
.ba-shot-img{position:relative;background:var(--bg2);border-bottom:1px solid var(--line);
  aspect-ratio:16/11;overflow:hidden}
.ba-shot-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ba-shot-tag{position:absolute;top:10px;left:10px;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(22,35,58,.86);color:#fff;padding:4px 9px;border-radius:6px}
.ba-shot-b{padding:18px 20px}
.ba-shot-b b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:5px}
.ba-shot-b p{margin:0;font-size:13px;line-height:1.5;color:var(--mut)}
@media (max-width:640px){
  .ba-shots{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .ba-shot{scroll-snap-align:center}
}

/* my points vs simulator */
.ba-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 0}
@media (max-width:720px){.ba-vs{grid-template-columns:1fr}}
.ba-vs-c{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--panel)}
.ba-vs-c.is-gold{border-color:rgba(214,163,67,.45);background:linear-gradient(168deg,rgba(214,163,67,.08),rgba(214,163,67,0) 70%)}
.ba-vs-k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.ba-vs-c h4{margin:0 0 12px;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ba-vs-c ul{margin:0;padding:0;list-style:none}
.ba-vs-c li{position:relative;padding:8px 0 8px 22px;font-size:13.5px;line-height:1.5;color:var(--mut);
  border-bottom:1px solid rgba(22,35,58,.07)}
.ba-vs-c li:last-child{border-bottom:0}
.ba-vs-c li::before{content:'';position:absolute;left:4px;top:15px;width:6px;height:6px;border-radius:50%;
  background:var(--gold-2)}
.ba-vs-note{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--mut);
  border:1px dashed rgba(214,163,67,.5);border-radius:12px;padding:13px 16px;background:rgba(214,163,67,.06)}
.ba-vs-note b{color:var(--gold-text)}

/* ambassador centre preview */
.ba-centre{border:1px solid rgba(214,163,67,.4);border-radius:18px;overflow:hidden;background:var(--panel);margin:6px 0 0}
.ba-centre-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 22px;background:linear-gradient(168deg,rgba(214,163,67,.14),rgba(214,163,67,.03));
  border-bottom:1px solid rgba(214,163,67,.28)}
.ba-centre-top b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.ba-demo-pill{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(22,35,58,.32);color:var(--mut);border-radius:999px;padding:5px 12px;background:var(--bg)}
.ba-centre-grid{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:24px}
@media (max-width:720px){.ba-centre-grid{grid-template-columns:1fr;gap:18px}}
.ba-qr{width:132px;height:132px;border:1px solid rgba(214,163,67,.45);border-radius:14px;
  display:grid;place-items:center;text-align:center;background:var(--bg2);
  font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--gold-text);line-height:1.5;padding:10px}
.ba-centre-r{min-width:0}
.ba-centre-link{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;color:var(--gold-text);
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px 13px;
  word-break:break-all;margin:0 0 16px}
.ba-centre-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:2px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ba-centre-stats div{background:var(--bg);padding:13px 14px}
.ba-centre-stats span{display:block;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-bottom:4px;line-height:1.3}
.ba-centre-stats b{font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ba-centre-stats div:last-child b{color:var(--gold-text)}
.ba-next{margin:16px 0 0;border:1px solid rgba(214,163,67,.36);border-radius:12px;padding:15px 18px;
  background:rgba(214,163,67,.07)}
.ba-next-k{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.ba-next b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:3px}
.ba-next span{font-size:12.5px;line-height:1.5;color:var(--mut)}

/* faq */
.ba-faq{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);margin:6px 0 0}
.ba-faq details{border-bottom:1px solid var(--line)}
.ba-faq details:last-child{border-bottom:0}
.ba-faq summary{cursor:pointer;list-style:none;padding:17px 22px;font-size:14.5px;font-weight:700;
  color:var(--ink);display:flex;align-items:center;gap:14px;transition:background .15s}
.ba-faq summary::-webkit-details-marker{display:none}
.ba-faq summary:hover{background:var(--panel2)}
.ba-faq summary::after{content:'+';margin-left:auto;font-size:19px;font-weight:400;color:var(--gold-2);
  transition:transform .2s;line-height:1}
.ba-faq details[open] summary::after{transform:rotate(45deg)}
.ba-faq details[open] summary{background:var(--panel2)}
.ba-faq-b{padding:2px 22px 20px;font-size:14px;line-height:1.65;color:var(--mut);max-width:58em}
.ba-faq-b p{margin:0 0 11px}
.ba-faq-b p:last-child{margin:0}
.ba-faq-b b{color:var(--ink)}

/* rules */
.ba-rules{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 0}
.ba-rule-l{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;
  padding:17px 22px;background:var(--panel);cursor:pointer;transition:.18s;text-align:left}
.ba-rule-l:hover{border-color:rgba(214,163,67,.5)}
.ba-rule-l b{font-size:14px;font-weight:800;color:var(--ink)}
.ba-rule-l i{font-style:normal;display:block;font-size:12.5px;color:var(--mut);margin-top:2px}

/* final */
.ba-final{padding:76px 0;text-align:center}
.ba-final h2{font-size:clamp(28px,5vw,50px);line-height:1.04;letter-spacing:-.03em;font-weight:800;
  margin:12px 0 16px;color:var(--ba-ink)}
.ba-final p{max-width:36em;margin:0 auto 26px;font-size:16px;line-height:1.6}
.ba-final .ba-cta-row{justify-content:center}
.ba-fine{margin:26px auto 0;max-width:52em;font-size:11.5px;line-height:1.6;color:var(--ba-dim)}
.ba-fine a{color:#B4BDC9;text-decoration:underline;text-underline-offset:2px}
.ba-sec{padding:58px 0}
@media (max-width:720px){.ba-sec{padding:42px 0}}
.ba-sec-alt{background:var(--bg2)}
.mp-portal{display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;
  border:1px solid rgba(214,163,67,.4);border-radius:16px;padding:20px 24px;margin:0 0 18px;
  background:linear-gradient(165deg,rgba(214,163,67,.12),rgba(214,163,67,0) 66%);transition:.2s}
.mp-portal:hover{border-color:var(--gold-2);transform:translateY(-1px)}
.mp-portal-t{flex:1;min-width:0}
.mp-portal-t b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:3px}
.mp-portal-t i{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--mut)}
.mp-portal-n{font-size:30px;font-weight:800;color:var(--gold-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;line-height:1}
.mp-portal-n em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-left:7px}
@media (max-width:560px){.mp-portal{flex-wrap:wrap;gap:12px}.mp-portal-n{font-size:26px}}

.mp-demo{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.6);
  border:1px solid rgba(191,143,56,.5);border-radius:13px;padding:15px 17px;margin:0 0 22px}
.mp-demo svg{flex:0 0 18px;width:18px;height:18px;stroke:#8a6618;fill:none;stroke-width:1.5;margin-top:2px}
.mp-demo p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut)}
.mp-demo b{color:#8a6618}
.mp-demo code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;color:#8a6618}

.mp-act{border:1px solid rgba(22,35,58,.13);border-radius:14px;padding:18px 20px;margin-bottom:12px;
  background:rgba(255,255,255,.55);transition:border-color .2s}
.mp-act.is-locked{opacity:.62;background:rgba(255,255,255,.34)}
.mp-stats{display:flex;flex-wrap:wrap;gap:0 24px;margin:13px 0 0;padding-top:12px;
  border-top:1px solid rgba(22,35,58,.10)}
.mp-stats div{min-width:88px}
.mp-stats span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-bottom:3px}
.mp-stats b{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mp-stats b.is-g{color:#12705d}
.mp-do{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.mp-btn{border:1px solid var(--gold-2);background:rgba(214,163,67,.12);color:#8a6618;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;cursor:pointer;transition:.16s}
.mp-btn:hover{background:var(--gold-2);color:#fff}
.mp-avail{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#12705d;
  border:1px solid rgba(18,112,93,.4);border-radius:999px;padding:4px 11px}
.mp-lock{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--mut)}
.mp-lock b{color:var(--ink)}

.mp-funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:2px;width:100%;
  margin:2px 0 0;border:1px solid rgba(22,35,58,.12);border-radius:11px;overflow:hidden}
.mp-funnel div{background:rgba(255,255,255,.6);padding:11px 12px}
.mp-funnel span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);margin-bottom:3px;line-height:1.3}
.mp-funnel b{font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mp-funnel div:last-child b{color:#12705d}

.mp-hp{width:100%;margin:13px 0 0}
.mp-hp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.mp-hp-top span{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.mp-hp-top b{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mp-hp-bar{height:7px;border-radius:7px;background:rgba(22,35,58,.10);overflow:hidden}
.mp-hp-bar i{display:block;height:100%;border-radius:7px;transition:width .5s}
.mp-hp p{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--mut)}
.mp-hp.is-good b{color:#12705d} .mp-hp.is-good .mp-hp-bar i{background:#12705d}
.mp-hp.is-low  b{color:#8a6618} .mp-hp.is-low  .mp-hp-bar i{background:var(--gold-2)}
.mp-hp.is-dead b{color:#b8410f} .mp-hp.is-dead .mp-hp-bar i{background:#b8410f}
.mp-tiers .ic-tier-r{display:flex;align-items:baseline;gap:12px;flex-wrap:nowrap}
.mp-tiers .ic-tier-r span{flex:1;min-width:0}
.mp-tier-i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);white-space:nowrap;flex:0 0 auto}
.mp-tiers .ic-tier-r.is-gold .mp-tier-i{color:#12705d}
@media (max-width:420px){.mp-tiers .ic-tier-r{flex-wrap:wrap}.mp-tier-i{width:100%;margin-top:3px}}
.ic-lock{border:1px solid rgba(214,163,67,.34);border-radius:18px;padding:30px 32px;margin:0 0 24px;
  background:linear-gradient(165deg,rgba(214,163,67,.10),rgba(214,163,67,0) 64%)}
@media (max-width:640px){.ic-lock{padding:22px}}
.ic-lock h2{margin:10px 0 12px;font-size:clamp(20px,2.9vw,27px);line-height:1.2;letter-spacing:-.02em}
.ic-lock p{margin:0 0 11px;font-size:14.5px;line-height:1.6;color:var(--mut);max-width:52em}
.ic-lock-btns{display:flex;gap:11px;flex-wrap:wrap;margin:18px 0 0}
.ic-lock-fine{margin:14px 0 0!important;font-size:12px;opacity:.85}
/* The board stays legible and keeps its live numbers; only the dials go quiet. */
.ic-board.is-locked .ic-step-row button,
.ic-board.is-locked .ic-toggle,
.ic-board.is-locked [data-ecfreq],
.ic-board.is-locked .ic-have input{opacity:.42;cursor:not-allowed}
.ic-board.is-locked .ic-step-row button:hover,
.ic-board.is-locked .ic-toggle:hover{border-color:inherit;color:inherit}
.rw-sim{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:start;
  border:1px solid rgba(214,163,67,.30);border-radius:18px;padding:32px;margin:34px 0 0;
  background:linear-gradient(165deg,rgba(214,163,67,.08),rgba(214,163,67,0) 62%)}
@media (max-width:820px){.rw-sim{grid-template-columns:1fr;gap:24px;padding:24px}}
.rw-sim h3{margin:10px 0 12px;font-size:clamp(21px,3vw,28px);line-height:1.18;letter-spacing:-.02em}
.rw-sim p{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--mut)}
.rw-sim-eth{border-left:2px solid rgba(214,163,67,.45);padding-left:14px;font-style:italic}
.rw-sim-btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}
.rw-sim-r{display:flex;flex-direction:column;gap:11px}
.rw-sim-stat{border:1px solid rgba(214,163,67,.24);border-radius:13px;padding:16px 18px}
.rw-sim-stat b{display:block;font-size:29px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--gold-2);margin-bottom:7px;font-variant-numeric:tabular-nums}
.rw-sim-stat span{display:block;font-size:12.5px;line-height:1.5;color:var(--mut)}
.sim-cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:6px 0 0}
.sim-cta-card{border:1px solid rgba(214,163,67,.30);border-radius:14px;padding:20px 22px;
  background:linear-gradient(168deg,rgba(214,163,67,.07),rgba(214,163,67,0) 70%)}
.sim-cta-card b{display:block;font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--gold-2);margin-bottom:9px;font-variant-numeric:tabular-nums}
.sim-cta-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--mut)}
.sim-cta-eth{max-width:46em;margin:26px 0 0;font-size:15px;line-height:1.6;color:var(--mut)}
.sim-cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.sim-cta-fine{margin:18px 0 0;font-size:11.5px;line-height:1.55;color:var(--mut);opacity:.8;max-width:52em}

.ic-free{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#12705d;border:1px solid rgba(18,112,93,.42);border-radius:999px;padding:2px 7px;
  margin-left:7px;vertical-align:middle}
.ic-step-b i{display:block;font-style:normal;font-size:12px;line-height:1.55;color:var(--mut);margin-top:4px}
.ic-step-p{font-size:17px;font-weight:800;color:var(--gold-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:none}

.ic-tiers{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px}
.ic-tiers-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:11px}
.ic-tier-r{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mut);line-height:1.5}
.ic-tier-r:last-of-type{border-bottom:0}
.ic-tier-r>b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ic-tier-r span b{color:var(--ink)}
.ic-tier-r.is-gold{background:#fffaf1;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}
.ic-tier-r.is-gold>b{color:var(--gold-2)}
.ic-tiers-n{font-size:11.5px;line-height:1.6;color:var(--dim);margin:12px 0 0;padding-top:11px;
  border-top:1px solid var(--line)}

/* ways to earn */
.ic-ways{margin-top:30px}
.ic-way-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-top:14px}
.ic-way{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px}
.ic-way.is-gold{background:linear-gradient(180deg,#fffdf7,#fff9ed);border-color:#eadfcb}
.ic-lim{display:inline-block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--gold-2);background:#fdf6e6;border:1px solid #eadfcb;
  border-radius:999px;padding:3px 9px;margin-bottom:10px}
.ic-way b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.ic-way p{font-size:12.5px;line-height:1.55;color:var(--mut);margin:6px 0 12px}
.ic-way i{font-style:normal;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--gold-2);
  font-variant-numeric:tabular-nums}

/* the model, shown rather than claimed */
.ic-maths{margin-top:30px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.ic-maths-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.ic-m{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 17px}
.ic-m-k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin-bottom:11px}
.ic-m-r{display:grid;grid-template-columns:88px 1fr;gap:11px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--mut)}
.ic-m-r:last-child{border-bottom:0}
.ic-m-r code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:600;
  color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;
  justify-self:start}
.ic-m-r span b{color:var(--ink);font-weight:700}
.ic-fine{font-size:12.5px;line-height:1.7;color:var(--mut);margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line)}
.ic-fine b{color:var(--ink)}

.ic-cta{text-align:center;padding:40px 0 10px}
.ic-cta h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:0 0 18px}
.ic-cta-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:1080px){ .ic-board{grid-template-columns:1fr 1fr} .ic-col:nth-child(3){grid-column:1/-1} }
@media(max-width:760px){ .ic-board{grid-template-columns:1fr} .ic-maths-grid{grid-template-columns:1fr}
  .ic-out-top{grid-template-columns:1fr} }
@media(max-width:560px){
  .ic-act,.ic-unlock,.ic-tiers,.ic-way{padding:14px 15px;border-radius:12px}
  .ic-maths{padding:19px 16px}
  .ic-step{grid-template-columns:auto 1fr;gap:11px}
  .ic-step-p{grid-column:2;margin-top:6px}
}
/* WHAT YOUR CODE IS WORTH — three figures, the last one the ambassador's */
.amb-worth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0 4px}
.amb-worth-c{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.amb-worth-c b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:9px}
.amb-worth-c span{display:block;font-size:13.5px;line-height:1.6;color:var(--mut)}
.amb-worth-c.is-you{background:linear-gradient(180deg,#fffaf1,#fff6e6);border-color:#eadfcb}
.amb-worth-c.is-you b{color:var(--gold-2)}
/* the ambassador's own routes, under "Ambassadors are customers too" */
.amb-own{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.amb-own li{position:relative;padding:0 0 0 18px;font-size:14px;line-height:1.65;color:var(--mut)}
.amb-own li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.amb-own b{color:var(--ink);font-weight:700}
@media(max-width:560px){.amb-worth-c{padding:15px 16px}.amb-worth-c b{font-size:29px}}
.amb-keep{display:flex;gap:11px;align-items:flex-start;margin:14px 0 0;padding:13px 16px;
  border:1px solid #e8d3a8;background:#fffaf0;border-radius:10px}
.amb-keep svg{width:19px;height:19px;flex:none;stroke:#a8791d;fill:none;stroke-width:1.6;margin-top:1px}
.amb-keep p{margin:0;font-size:12.5px;line-height:1.65;color:var(--mut)}
.amb-keep p b{color:var(--ink);font-weight:600}
@media(max-width:700px){.amb-pay{grid-template-columns:1fr}}
/* --- Shared shell for the two new ambassador sections --- */
.amb-block{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;margin:0 0 22px}
.amb-block .num-tag{margin:0 0 10px}
.amb-block h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.amb-lede{font-size:14px;line-height:1.6;color:var(--mut);margin:0 0 22px;max-width:660px}
.amb-lede b{color:var(--ink);font-weight:600}
@media(max-width:560px){.amb-block{padding:22px 18px;border-radius:14px}}
/* --- One rule when you share: the disclosure block --- */
.amb-rules{display:flex;flex-direction:column;gap:14px;margin:0 0 8px}
.amb-rule{display:flex;gap:16px;align-items:flex-start;border-radius:12px;padding:20px 22px}
.amb-rule svg{width:24px;height:24px;flex:none;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.amb-rule .t{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}
.amb-rule p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
.amb-rule p b{color:var(--ink);font-weight:600}
.amb-rule-a{background:#f4f7f4;border:1px solid #cfe0d2}
.amb-rule-a svg{stroke:#3f7a4e}
.amb-rule-b{background:#fffaf0;border:1px solid #e8d3a8}
.amb-rule-b svg{stroke:#a8791d}
.amb-rule-c{background:var(--panel);border:1px solid var(--line)}
.amb-rule-c svg{stroke:var(--mut)}
/* --- Try it before you share it: the unlock + upkeep pair --- */
.amb-unlock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
.amb-unlock-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:flex;flex-direction:column;gap:12px}
.amb-unlock-card .k{font-size:10.5px;color:var(--mut);letter-spacing:.18em;font-weight:700;text-transform:uppercase}
.amb-unlock-card .big{font-size:46px;font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.amb-unlock-card .big.gold{color:var(--gold-2)}
.amb-unlock-card .big em{font-style:normal;font-size:15px;font-weight:600;color:var(--mut);letter-spacing:0}
.amb-unlock-card .ledger{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.amb-unlock-card .ledger>div{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--mut)}
.amb-unlock-card .ledger>div:first-child{border-bottom:1px solid var(--line);padding-bottom:7px}
.amb-unlock-card .ledger b{color:var(--ink);font-weight:600;white-space:nowrap}
.amb-unlock-card p{margin:0;font-size:14px;line-height:1.6;color:var(--mut)}
.amb-unlock-card p.sm{font-size:13px;color:var(--dim)}
@media(max-width:700px){.amb-unlock{grid-template-columns:1fr}}
/* --- Incentivised-review marker --- */
.store-shop{color:var(--orange);font-weight:600}
.store-shop:hover{color:var(--ink)}
.loc-step{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.02em;
  color:var(--mut);font-weight:500;margin:22px 0 12px}
.loc-step-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;flex:none}
.cfilbar .cfil-k{display:flex;align-items:center;gap:10px}
.promo{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:18px 0 0}
.promo-k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:10px}
.promo-h{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.promo-h b{color:var(--gold-2);font-weight:800}
.promo-p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--mut)}
.promo-p b{color:var(--ink);font-weight:600}
.promo-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.promo-card{position:relative;overflow:hidden;text-align:left;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);border-radius:13px;padding:16px 16px 14px;background:var(--bg);
  display:flex;flex-direction:column;gap:4px;transition:.35s var(--ease)}
.promo-card:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(140deg,var(--pcg),transparent 68%);opacity:.5;transition:opacity .35s var(--ease)}
.promo-card>*{position:relative;z-index:1}
.promo-card:hover{border-color:var(--pct);transform:translateY(-2px)}
.promo-card:hover:before{opacity:.85}
.promo-card:focus-visible{outline:2px solid var(--pct);outline-offset:2px}
.promo-card-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pca);font-weight:700}
.promo-card-n{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.promo-card-go{font-size:12px;color:var(--mut);margin-top:4px;font-weight:600}
.promo-fine{margin:16px 0 0;font-size:11.5px;line-height:1.6;color:var(--dim)}
@media(max-width:560px){.promo-cards{grid-template-columns:1fr}.promo{padding:20px 18px}}
/* The five-walker wash from the gate, held to a band so the type stays the
   loudest thing on it. */
.pbanner{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);
  background:var(--panel);margin:0 0 16px}
.pbanner-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 78% at 8% 12%,  rgba(255,190,30,.58) 0%, rgba(255,190,30,.34) 44%, transparent 76%),
    radial-gradient(ellipse 44% 74% at 34% 96%, rgba(22,112,56,.40)  0%, rgba(22,112,56,.24)  44%, transparent 76%),
    radial-gradient(ellipse 44% 74% at 62% 6%,  rgba(234,74,16,.46)  0%, rgba(234,74,16,.28)  44%, transparent 76%),
    radial-gradient(ellipse 44% 74% at 88% 92%, rgba(52,122,240,.44) 0%, rgba(52,122,240,.26) 44%, transparent 76%),
    radial-gradient(ellipse 42% 70% at 98% 20%, rgba(84,66,132,.40)  0%, rgba(84,66,132,.24)  44%, transparent 76%);}
.pbanner-in{position:relative;z-index:1;padding:24px 26px 22px;display:flex;gap:22px;align-items:flex-start;
  background:linear-gradient(90deg,rgba(251,250,247,.90) 0%,rgba(251,250,247,.70) 52%,rgba(251,250,247,.42) 100%)}
.pb-body{flex:1 1 auto;min-width:0}
.pb-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:12px;padding:11px 11px 9px}
.pb-qr img{display:block;width:124px;height:124px;border-radius:4px}
.pb-qr span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}
.pb-here{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--mut);
  background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.pb-here b{color:var(--ink);font-weight:600}
@media(max-width:900px){.pbanner-in{flex-direction:column;align-items:stretch}
  .pb-qr{align-self:flex-start}}
.pb-k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#6b6350;font-weight:700;margin-bottom:9px}
.pb-h{margin:0 0 14px;font-size:23px;font-weight:700;letter-spacing:-.022em;color:var(--ink);line-height:1.2}
.pb-h b{color:#a8600c;font-weight:800}
.pb-steps{list-style:none;margin:0 0 16px;padding:0;counter-reset:pb}
.pb-steps li{counter-increment:pb;position:relative;padding-left:28px;margin-bottom:7px;
  font-size:13.5px;line-height:1.55;color:var(--mut)}
.pb-steps li:before{content:counter(pb);position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.pb-steps li b{color:var(--ink);font-weight:700}
.pb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pb-chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.82);
  border:1px solid var(--line-2);border-radius:30px;padding:8px 15px 8px 12px;transition:.28s var(--ease)}
.pb-chip:hover{border-color:var(--pbc);background:#fff;transform:translateY(-1px)}
.pb-chip:focus-visible{outline:2px solid var(--pbc);outline-offset:2px}
.pb-dot{width:9px;height:9px;border-radius:50%;background:var(--pbc);flex:none}
.pb-cta{padding:13px 22px;font-size:13.5px}
.pb-fine{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:#6d6656}
.pb-fine b{color:var(--ink);font-weight:700}
.pb-fine a{color:#a8600c}
@media(max-width:560px){.pbanner-in{padding:20px 18px}.pb-h{font-size:20px}
  .pbanner-in{background:linear-gradient(180deg,rgba(251,250,247,.92),rgba(251,250,247,.66))}}
/* ---------- Suggest a shop ---------- */
.sug-single{max-width:620px}
.sug-lock{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:26px 28px}
.sug-lock svg{width:26px;height:26px;flex:none;stroke:var(--gold-2);fill:none;stroke-width:1.6;margin-top:3px}
.sug-lock h3{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sug-lock p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--mut)}
.sug-lock p b{color:var(--ink);font-weight:600}
.sug-lock-btns{display:flex;gap:10px;flex-wrap:wrap}
.sug-step{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut);font-weight:500;margin:0 0 12px}
.sug-step:not(:first-child){margin-top:26px}
.sug-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;flex:none}
.sug-search{display:flex;gap:10px}
.sug-search input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-2);border-radius:4px;
  padding:15px 16px;font-family:inherit;font-size:14.5px;color:var(--ink)}
.sug-search input:focus{outline:none;border-color:var(--gold)}
.sug-hint{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--dim)}
.sug-res{border-radius:13px;padding:18px 20px;margin:16px 0 0}
.sug-res-h{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.sug-res p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut)}
.sug-res p b{color:var(--ink);font-weight:600}
.sug-no{background:#fdf3f0;border:1px solid #eccdc2}   .sug-no .sug-res-h{color:#a33c17}
.sug-yes{background:#f4f7f4;border:1px solid #cfe0d2}  .sug-yes .sug-res-h{color:#2f6b46}
.sug-maybe{background:#fffaf0;border:1px solid #e8d3a8}.sug-maybe .sug-res-h{color:#8a651f}
.sug-hits{list-style:none;margin:12px 0 0;padding:0}
.sug-hits li{font-size:13px;color:var(--mut);padding:5px 0;border-top:1px solid rgba(22,35,58,.08)}
.sug-hits li b{color:var(--ink);font-weight:600}
.sug-sm{margin:12px 0 0!important;font-size:12.5px!important;color:var(--dim)!important}
.sug-link{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;color:var(--gold-2);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sug-form{display:flex;flex-direction:column;gap:14px}
.sug-f{display:flex;flex-direction:column;gap:6px}
.sug-f span{font-size:12px;letter-spacing:.02em;color:var(--mut);font-weight:600}
.sug-f span i{font-style:normal;font-weight:400;color:var(--dim)}
.sug-f input{background:var(--panel);border:1px solid var(--line-2);border-radius:4px;padding:13px 14px;
  font-family:inherit;font-size:14px;color:var(--ink)}
.sug-f input:focus{outline:none;border-color:var(--gold)}
.sug-row{display:grid;grid-template-columns:1fr auto auto;gap:12px}
.sug-sm-f input{width:96px}
.sug-you{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column;gap:12px}
.sug-you .sug-row{grid-template-columns:1fr 1fr}
.sug-you-k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-weight:700}
.sug-err{margin:0;font-size:13px;color:#a33c17;background:#fdf3f0;border:1px solid #eccdc2;
  border-radius:8px;padding:11px 13px}
.sug-fine{margin:4px 0 0;font-size:11.5px;line-height:1.6;color:var(--dim)}
@media(max-width:560px){.sug-row,.sug-you .sug-row{grid-template-columns:1fr}.sug-sm-f input{width:100%}
  .sug-search{flex-direction:column}}
.buy-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--mut);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin:0 0 14px}
.buy-note b{color:var(--ink);font-weight:600}
.buy-note-x{background:none;border:none;font-family:inherit;font-size:13px;color:var(--gold-2);
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.buy-note-x:hover{color:var(--ink)}
.prod-find{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--line-2);
  border-radius:2px;padding:14px 22px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:.3s var(--ease);letter-spacing:.02em}
.prod-find:hover{border-color:var(--orange);color:var(--orange)}
.prod-find svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.rv-inc{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);
  border-radius:20px;padding:5px 11px 5px 9px;align-self:flex-start;margin:2px 0 0}
.rv-inc svg{width:14px;height:14px;flex:none;stroke:var(--mut);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rv-inc span{font-size:11.5px;font-weight:600;color:var(--mut);letter-spacing:.01em}
.rv-inc-note{font-size:12.5px;line-height:1.65;color:var(--mut);background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:13px 16px;margin:14px auto 0;max-width:720px;text-align:left}
.rv-inc-note b{color:var(--ink);font-weight:600}
.amb-calc-fine{font-size:12px;line-height:1.6;color:var(--mut);margin:16px 0 0}
.amb-calc-fine b{color:var(--ink);font-weight:600}
@media(max-width:860px){
  .amb-calc-grid{grid-template-columns:1fr;gap:22px}
  .amb-out{grid-template-columns:1fr;gap:18px}
  .amb-out-side{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .amb-out-side > div{border-left:0;border-top:1px solid #ead9b8;padding:12px 0 0}
}
@media(max-width:560px){
  .amb-calc{padding:22px 18px;border-radius:14px}
  .amb-out{padding:18px}
  .amb-out-side{grid-template-columns:1fr}
  .amb-seg button{min-width:0}
}

/* ---------- Stay informed ---------- */
.si{padding:106px 0 90px}
.si-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:start}
.si-form{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:28px}
.si-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.si-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.si-f > span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600}
.si-f i{color:var(--orange);font-style:normal;margin-left:3px}
.si-f input{padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;font-family:inherit;
  font-size:15px;background:var(--bg);color:var(--ink);width:100%;box-sizing:border-box}
.si-f input:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.si-check{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--mut);cursor:pointer}
.si-check input{width:17px;height:17px;flex:none;margin:2px 0 0;accent-color:var(--orange);cursor:pointer}
.si-check b{color:var(--ink);font-weight:600}
.si-check a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.si-confirm{background:#faf6ee;border:1px solid #eadfcb;border-radius:10px;padding:11px 14px;
  font-size:12.5px;line-height:1.55;color:#5b6675}
.si-confirm b{color:var(--ink);font-weight:600}
.si-done-sub{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--dim)}
.si-done-sub a{color:var(--mut);font-weight:600}
.si-err{background:#fdeceb;border:1px solid #f3c4bf;color:#a33127;border-radius:10px;
  padding:10px 13px;font-size:13px;line-height:1.45}
.si-err[hidden]{display:none}
.si-go{width:100%;justify-content:center;margin-top:2px}
.si-fine{font-size:11.5px;line-height:1.5;color:var(--dim);margin:0}
.si-side h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px}
.si-list{list-style:none;margin:0 0 18px;padding:0}
.si-list li{position:relative;padding:0 0 12px 18px;font-size:14px;line-height:1.55;color:var(--mut)}
.si-list li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.si-list b{color:var(--ink);font-weight:600}
.si-side .qr-note{margin-top:0}
.si-done{text-align:center;max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:36px 28px}
.si-tick svg{width:52px;height:52px;margin-bottom:14px}
.si-done h3{font-size:22px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 8px}
.si-done p{font-size:15px;line-height:1.6;color:var(--mut);margin:0 auto;max-width:420px}
.si-done p b{color:var(--ink)}
.si-done-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media(max-width:860px){
  .si-grid{grid-template-columns:1fr;gap:28px}
  .si-side{order:-1}
}
@media(max-width:560px){
  .si{padding:92px 0 70px}
  .si-row{grid-template-columns:1fr}
  .si-form{padding:22px 18px;border-radius:14px}
}
.ask-done p{font-size:13.5px;color:var(--mut);line-height:1.6}
.ask-card{background:var(--panel);border:1px dashed var(--line-2);border-radius:12px;padding:16px;font-size:13px;line-height:1.7;color:var(--ink);margin:12px 0}
.calc-wrap{max-width:560px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px}
.calc-in{display:flex;gap:16px}
.calc-in label{flex:1;font-size:12px;letter-spacing:.06em;color:var(--mut);font-weight:500}
.calc-in input{width:100%;box-sizing:border-box;margin-top:7px;padding:14px;border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:22px;font-weight:600;color:var(--ink);background:var(--bg);text-align:center}
.calc-out{display:flex;flex-direction:column;align-items:center;margin:24px 0 14px}
.calc-out span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:600}
.calc-out b{font-size:56px;font-weight:200;color:var(--gold-2);line-height:1.1}
.calc-f{font-size:12.5px;color:var(--mut);line-height:1.7;text-align:center;margin:0}
.calc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.calc-seg{display:flex;gap:0;margin:0 0 22px;padding:0;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;width:max-content;max-width:100%}
.calc-seg label{cursor:pointer}
.calc-seg input{position:absolute;opacity:0;pointer-events:none}
.calc-seg span{display:block;padding:10px 18px;font-size:13px;font-weight:600;color:var(--mut);letter-spacing:.03em}
.calc-seg input:checked+span{background:var(--ink);color:#fff}
.calc-seg input:focus-visible+span{outline:2px solid var(--gold-2);outline-offset:-2px}
.calc-in input{font-size:16px}
.calc-help{display:block;font-size:12px;color:var(--dim);font-weight:400;letter-spacing:0;line-height:1.55;margin-top:6px;text-transform:none}
.calc-warn{font-size:12.5px;color:var(--mut);background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:16px 0 0;line-height:1.6}
.calc-err{margin:16px 0 0;font-size:13.5px;color:#8a3320;background:#fdf0ec;border:1px solid #ecc7ba;border-radius:9px;padding:11px 14px;line-height:1.7}
.calc-rows{width:100%;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px}
.calc-rows:empty{display:none}
.calc-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--mut)}
.calc-row b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap}
details.calc-x{margin:14px 0 0;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
details.calc-x summary{cursor:pointer;padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--ink)}
details.calc-x summary:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px;border-radius:9px}
details.calc-x[open] summary{border-bottom:1px solid var(--line)}
.calc-x-in{padding:12px 14px 14px;font-size:13px;color:var(--mut);line-height:1.65}
.calc-x-in p{margin:0}
.calc-wt{display:flex;gap:10px;flex-wrap:wrap}
.calc-wt label{flex:1;min-width:130px;font-size:12px;letter-spacing:.06em;color:var(--mut);font-weight:500}
.calc-wt input,.calc-wt select{width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid var(--line-2);border-radius:9px;font-size:16px;font-family:inherit;background:var(--panel)}
.calc-disc{font-size:11.5px;color:var(--dim);line-height:1.65;margin:16px 0 0}
@media(max-width:560px){.calc-seg{width:100%}.calc-seg label{flex:1}.calc-seg span{text-align:center;padding:10px 8px}}
@media(max-width:560px){.calc-in{flex-direction:column}.ask-row{flex-direction:column}}

.wks-err{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--orange);max-width:44ch;
  margin-left:auto;margin-right:auto}

/* --- Total THC: the headline number, given headline treatment --- */
.meter-total{
  padding:14px 16px 12px; margin-bottom:14px; border-radius:3px;
  background:var(--panel2); border:1px solid var(--line);
}
.meter-total .top b{font-size:14px; letter-spacing:.01em}
.meter-total .top span{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums}
.meter-note{
  margin-top:9px; font-size:11px; letter-spacing:.02em; color:var(--dim);
  font-weight:400; line-height:1.45;
}


/* --- Rating chips: compact per-product summary --- */
.rv-chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0 0 18px}
/* Each walker carries its own emblem above its score — the same artwork the
   chooser uses, so the mark a customer picked is the mark they see here. */
/* These are the anchor of the page, so they are sized against the review
   cards below them rather than shrunk to chip size. */
.rv-chip{
  font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px 20px;transition:.25s;min-width:194px;
}
.rv-chip:hover{border-color:var(--line-2);transform:translateY(-2px)}
.rv-chip.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
/* the source art is ~360x254, so the box must constrain it, not the other way round */
.rv-cart{width:86px;height:66px;position:relative;margin-bottom:14px;display:block;flex:0 0 auto}
.rv-cart img{width:100%;height:100%;object-fit:contain;display:block;opacity:.9}
.rv-cart .rv-ctint{position:absolute;inset:0;background:var(--wa,var(--gold));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;opacity:.85;pointer-events:none}
.rv-chip:hover .rv-cart img,.rv-chip.on .rv-cart img{opacity:1}
.rv-cname{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600}
.rv-cnum{font-size:34px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.rv-ccount{font-size:12px;color:var(--dim);margin-top:1px}
.rv-ccount::before{content:''}
.rv-ccount::after{content:' reviews'}
.rv-chip-empty{opacity:.55}
.rv-chip-empty .rv-cnone{font-size:30px;color:var(--dim);line-height:1.1}
/* Keep all five on one row as long as they can be read there — a 3+2 wrap
   makes two of them look like an afterthought. Two-up only on phones. */
@media(max-width:1080px){
  .rv-chip{min-width:0;flex:1 1 0;padding:20px 12px 16px}
  .rv-cart{width:72px;height:56px;margin-bottom:11px}
  .rv-cnum{font-size:29px}
  .rv-cname{font-size:10.5px;letter-spacing:.1em}
}
@media(max-width:700px){
  .rv-chips{gap:10px}
  .rv-chip{flex:1 1 44%;padding:16px 10px 13px}
  .rv-cart{width:62px;height:48px;margin-bottom:10px}
  .rv-cnum{font-size:26px}
}

/* --- Review ribbon --- */
.rv-rail>.rv-card{
  flex:0 0 300px;scroll-snap-align:none start;   /* inline axis only — 'start' alone also snapped the PAGE to each card */
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:20px 20px 16px;display:flex;flex-direction:column;gap:11px;
}
.rv-card-stars{font-size:14px;letter-spacing:1px}
.rv-card-stars .on{color:var(--gold)}
.rv-card-text{
  margin:0;font-size:14px;line-height:1.6;color:var(--ink);font-weight:400;flex:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.rv-card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:11px}
.rv-card-name{font-size:12.5px;font-weight:600;color:var(--ink)}
.rv-card-prod{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap}
.rv-card-none{align-items:center;justify-content:center;text-align:center;flex:0 0 300px}
@media(max-width:560px){ .rv-rail>.rv-card{flex:0 0 262px;padding:17px 16px 14px} }

/* --- Reviews: per-product breakdown --- */
.rv-rail-wrap{position:relative;margin:0 0 20px;display:flex;align-items:stretch;gap:8px}
.rv-rail{
  flex:1;display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:4px 2px 10px;
  overscroll-behavior-x:contain;   /* x only: a sideways swipe must not move the page, but a
                                       vertical wheel over the rail still scrolls the page normally */
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.rv-rail::-webkit-scrollbar{height:6px}
.rv-rail::-webkit-scrollbar-track{background:transparent}
.rv-rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.rv-arrow{
  flex:0 0 40px;align-self:center;height:40px;border-radius:50%;cursor:pointer;
  font-family:inherit;font-size:20px;line-height:1;color:var(--ink);
  background:var(--panel);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;transition:.25s;
}
.rv-arrow:hover:not(:disabled){border-color:var(--gold);color:var(--gold-2)}
.rv-arrow:disabled{opacity:.28;cursor:default}
.rv-rail-wrap.no-scroll .rv-arrow{display:none}
/* a soft edge so the row visibly continues past the frame */
.rv-rail-wrap::after{content:'';position:absolute;right:48px;top:0;bottom:10px;width:46px;
  pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg));
  opacity:1;transition:opacity .3s ease}
.rv-rail-wrap.at-end::after,.rv-rail-wrap.no-scroll::after{opacity:0}
.rv-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:6px 0 0}
/* the merged "you might also walk" row */
.relstrip{margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.relstrip-k{display:block;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.relstrip-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.relx{font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:11px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 15px 9px 11px;transition:.22s}
.relx:hover{border-color:var(--rc);transform:translateY(-2px)}
.relx-art{position:relative;width:38px;height:30px;flex:0 0 auto;display:block}
.relx-art img{width:100%;height:100%;object-fit:contain;display:block;opacity:.9}
.relx-tint{position:absolute;inset:0;background:var(--rc);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;opacity:.9;pointer-events:none}
.relx-sw{width:26px;height:26px;border-radius:7px;background:var(--rc);flex:0 0 auto}
.relx-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.relx-t b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.relx-t i{font-style:normal;font-size:10.5px;color:var(--dim);white-space:nowrap}
@media(max-width:760px){
  .relstrip-row{gap:8px}
  .relx{flex:1 1 44%;padding:8px 10px}
  .relx-t i{display:none}
}
@media(max-width:560px){.rv-actions .btn{width:100%}}
@media(pointer:coarse){.rv-rail-wrap::after{right:0}}
@media(pointer:coarse){ .rv-arrow{display:none} }
.rv-pcard{
  font-family:inherit;text-align:center;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:20px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.rv-pcard:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(22,35,58,.4)}
.rv-pcard.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.rv-pname{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:600}
.rv-pnum{font-size:34px;font-weight:200;line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ink);margin-top:4px}
.rv-pstars{font-size:14px}
.rv-pcount{font-size:11.5px;color:var(--dim)}
.rv-pcard-empty{opacity:.62}
.rv-pcard-empty .rv-pnone{font-size:12px;color:var(--dim);margin-top:10px;font-style:italic}
.rv-blend{text-align:center;font-size:13.5px;color:var(--mut);margin:0 0 26px}
.rv-blend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.rv-blend-note{max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.6}
.rv-listhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:34px 0 14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.rv-listh{font-size:15px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);
  font-weight:600;margin:0}
.rv-clear{font-family:inherit;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--ink);background:none;border:1px solid var(--line-2);
  border-radius:2px;padding:7px 13px;cursor:pointer;transition:.25s}
.rv-clear:hover{border-color:var(--gold);color:var(--gold-2)}
@media(max-width:560px){
  .rv-pcard{padding:16px 10px 13px}
  .rv-pnum{font-size:28px}
}


/* --- Per-product reviews --- */
.pr-reviews{padding:70px 0 10px}
.rv-summary{display:flex;gap:44px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:26px 30px;margin-bottom:26px}
.rv-summary-l{text-align:center;flex:0 0 auto;min-width:150px}
.rv-summary-r{flex:1;min-width:240px;display:flex;flex-direction:column;gap:11px}
.rv-bar{display:flex;align-items:center;gap:14px;font-size:13px}
.rv-bar-l{flex:0 0 74px;color:var(--mut);font-weight:500}
.rv-bar-t{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.rv-bar-t i{display:block;height:100%;background:var(--gold);border-radius:3px}
.rv-bar b{flex:0 0 30px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.rv-verified{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok,#2f6b45);
  font-weight:600;margin-left:7px;vertical-align:1px}
.rv-empty{background:var(--panel2);border:1px dashed var(--line-2);border-radius:4px;
  padding:34px 30px;text-align:center;max-width:640px;margin:0 auto}
.rv-empty-h{font-weight:600;font-size:17px;margin-bottom:8px}
.rv-empty p.mut{max-width:46ch;margin:0 auto 18px;font-size:14px}
.rv-more{margin-top:20px}
@media(max-width:720px){
  .pr-reviews{padding:48px 0 6px}
  .rv-summary{gap:24px;padding:22px 20px}
  .rv-summary-l{min-width:0;width:100%}
}

/* --- rating summary: distribution + per-dimension performance -------------
   Both halves show at once. The distribution is the honest half: it puts the
   one-star count on screen next to the five-star count, at the same weight. */
.rv-sumgrid{display:flex;gap:38px;flex-wrap:wrap;flex:1;min-width:240px}
.rv-sumcol{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:9px}
.rv-sumh{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--dim);margin:0 0 2px}
/* A distribution row is a button when it filters, a plain row when it can't. */
.rv-drow{display:flex;align-items:center;gap:12px;font-size:13px;width:100%;
  background:none;border:0;padding:3px 6px;margin:0 -6px;border-radius:6px;
  font-family:inherit;color:inherit;text-align:left}
button.rv-drow{cursor:pointer;transition:background .2s}
button.rv-drow:hover{background:var(--bg2)}
button.rv-drow:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rv-drow.on{background:var(--bg2);box-shadow:inset 2px 0 0 var(--gold)}
.rv-drow-l{flex:0 0 38px;color:var(--mut);font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums}
button.rv-drow:hover .rv-drow-l{color:var(--gold-2)}
.rv-drow-t{flex:1;height:9px;border-radius:3px;background:var(--line);overflow:hidden;min-width:40px}
.rv-drow-t i{display:block;height:100%;background:var(--gold);border-radius:3px;
  transition:width .5s ease}
.rv-drow-n{flex:0 0 62px;text-align:right;color:var(--mut);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-drow-n b{color:var(--ink);font-weight:600}
.rv-thin{font-size:12px;line-height:1.55;color:var(--dim);margin:2px 0 0}
.rv-sumfoot{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--dim)}
.rv-starfilt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;font-size:13px;color:var(--mut)}
.rv-starfilt b{color:var(--ink);font-weight:600}
@media(max-width:760px){ .rv-sumgrid{gap:22px} .rv-drow-n{flex-basis:56px} }


/* ---------- join popup ---------- */

#joinPop{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
#joinPop.on{display:flex}
#joinPop .jp-scrim{position:absolute;inset:0;background:rgba(40,30,18,.46);backdrop-filter:blur(3px);animation:jpFade .25s ease}
#joinPop .jp-card{position:relative;background:#fffdf9;border:1px solid #eadfcb;border-radius:16px;
  max-width:392px;width:100%;padding:26px 26px 20px;box-shadow:0 20px 56px -22px rgba(58,42,24,.42);
  animation:jpRise .3s cubic-bezier(.2,.8,.3,1);max-height:88vh;overflow-y:auto}
/* Step 1 is a single question — it should feel like a knock, not a leaflet. */
#joinPop .jp-card.is-ask{max-width:340px;padding:24px 26px 16px}
@keyframes jpFade{from{opacity:0}to{opacity:1}}
@keyframes jpRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#joinPop .jp-scrim,#joinPop .jp-card{animation:none}}
#joinPop .jp-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;
  background:transparent;color:#a89f8e;font-size:20px;line-height:1;font-family:inherit;cursor:pointer;z-index:2}
#joinPop .jp-x:hover{background:#f3ece0;color:var(--ink)}
#joinPop .jp-x:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#joinPop .jp-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c2440f;font-weight:700;margin-bottom:8px}
#joinPop h2{font-size:21px;line-height:1.18;margin:0 0 8px;color:var(--ink);text-wrap:balance}
#joinPop .jp-lede{font-size:13.5px;line-height:1.5;color:#5b6675;margin:0 0 14px}
#joinPop .jp-lede b{color:var(--ink)}
#joinPop .jp-qr{display:flex;gap:13px;align-items:center;background:#faf6ee;border:1px solid #eadfcb;border-radius:10px;padding:11px 13px}
#joinPop .jp-qr svg,#joinPop .jp-qr img{width:76px;height:76px;flex:none;border-radius:4px;display:block}
#joinPop .jp-qr p{margin:0;font-size:12.5px;line-height:1.45;color:#5b6675}
#joinPop .jp-btn{display:block;width:100%;text-align:center;background:var(--orange);color:#fff;border:0;border-radius:9px;
  padding:12px 16px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;margin-top:14px;
  box-shadow:0 8px 18px -10px rgba(255,90,31,.75);transition:background .2s ease}
#joinPop .jp-btn:hover{background:#e64d16}
#joinPop .jp-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#joinPop .jp-later{display:block;width:100%;background:none;border:0;color:#a09789;font-size:12.5px;
  font-family:inherit;padding:10px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#joinPop .jp-later:hover{color:#4a5670}
#joinPop .jp-fine{font-size:10.5px;line-height:1.45;color:#a09789;margin:10px 0 0;text-align:center}
#joinPop .jp-steps{list-style:none;margin:13px 0 0;padding:0;font-size:12.5px;color:#5b6675}
#joinPop .jp-steps li{display:flex;gap:9px;padding:3.5px 0;align-items:flex-start;line-height:1.4}
#joinPop .jp-steps b{color:var(--ink);font-weight:600}
#joinPop .jp-n{flex:none;width:17px;height:17px;border-radius:50%;background:#ffe8de;color:#c2440f;
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
@media (max-width:560px){
  #joinPop{padding:16px}
  #joinPop .jp-card{padding:22px 18px 16px;border-radius:14px}
  #joinPop .jp-card.is-ask{padding:20px 18px 12px}
  #joinPop h2{font-size:19px}
  #joinPop .jp-qr{display:none}          /* a QR is useless on the device showing it */
}
@media (min-width:561px){ #joinPop .jp-mobonly{display:none} }


/* ---------- seasonal age-gate backdrop ------------------------------------
   Four aerial photographs, one per season, swapped automatically by date.
   The image sits under a scrim so the gate copy stays readable on any of
   them; if a file is missing the scrim alone still reads as the existing
   cream gate, so a broken path degrades quietly instead of loudly. */
#gate{overflow:hidden}   /* stays position:fixed from .overlay — do not override */
#gateBg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
        background-repeat:no-repeat;opacity:0;transition:opacity .9s ease}
#gateBg.ready{opacity:1}
#gateScrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 33% 42% at 50% 46%,
             rgba(251,250,247,.86) 0%, rgba(251,250,247,.66) 44%,
             rgba(251,250,247,.22) 76%, rgba(251,250,247,0) 100%);}
#gate .box{position:relative;z-index:2}
/* Each season nudges the scrim warmth so the paper agrees with the photo. */
#gate[data-season="spring"] #gateScrim{background:radial-gradient(ellipse 33% 42% at 50% 46%,rgba(252,251,246,.94),rgba(250,252,246,.87) 42%,rgba(247,252,244,.52) 68%,rgba(240,250,238,.16) 100%)}
#gate[data-season="summer"] #gateScrim{background:radial-gradient(ellipse 33% 42% at 50% 46%,rgba(251,250,245,.94),rgba(248,251,244,.87) 42%,rgba(242,250,240,.52) 68%,rgba(232,246,230,.16) 100%)}
#gate[data-season="autumn"] #gateScrim{background:radial-gradient(ellipse 33% 42% at 50% 46%,rgba(253,250,244,.94),rgba(253,247,238,.87) 42%,rgba(252,243,229,.52) 68%,rgba(248,235,214,.16) 100%)}
#gate[data-season="winter"] #gateScrim{background:radial-gradient(ellipse 33% 42% at 50% 46%,rgba(251,251,252,.94),rgba(248,250,252,.88) 42%,rgba(242,247,251,.55) 68%,rgba(232,241,249,.18) 100%)}
@media (max-width:620px){
  /* Tighter scrim on a phone: less photo, more paper, so the copy holds. */
  #gateScrim{background:radial-gradient(ellipse 120% 62% at 50% 44%,
             rgba(251,250,247,.96) 0%, rgba(251,250,247,.92) 52%, rgba(251,250,247,.42) 100%)}
}
@media (prefers-reduced-motion:reduce){ #gateBg{transition:none} }


#joinPop .jp-accept{display:flex;gap:9px;align-items:flex-start;margin-top:13px;
  font-size:12.5px;line-height:1.45;color:#5b6675;cursor:pointer}
#joinPop .jp-accept input{margin:1px 0 0;width:16px;height:16px;flex:none;accent-color:var(--orange);cursor:pointer}
#joinPop .jp-accept a{color:var(--ink);font-weight:600}
#joinPop .jp-btn.is-locked{background:#e6ded1;color:#a8a294;cursor:not-allowed;pointer-events:none;box-shadow:none}

/* ---------- two-step join popup -------------------------------------------
   Step 1 asks one question — new here, or already a member? — because the
   250-point offer is only for new accounts and a returning member should not
   be pitched something they cannot claim. Step 2 is the offer itself.
   The steps swap in place inside .jp-rail-wrap; the card animates its own
   height so it does not snap. */
#joinPop .jp-rail{display:flex;gap:0;position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:16px 16px 0 0;overflow:hidden;opacity:.9}
#joinPop .jp-rail i{flex:1}
#joinPop .jp-rail i:nth-child(1){background:#9c7410}
#joinPop .jp-rail i:nth-child(2){background:#1f8f7a}
#joinPop .jp-rail i:nth-child(3){background:#3d63d6}
#joinPop .jp-rail i:nth-child(4){background:#c23b96}
#joinPop .jp-rail i:nth-child(5){background:#c94f22}
#joinPop .jp-step[hidden]{display:none}
#joinPop .jp-step{animation:jpStepIn .28s cubic-bezier(.2,.8,.3,1)}
@keyframes jpStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#joinPop .jp-step{animation:none}}
#joinPop .jp-choices{display:grid;gap:9px;margin-top:14px}
#joinPop .jp-choice{display:block;width:100%;text-align:center;background:#fff;border:1px solid #eadfcb;
  border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
#joinPop .jp-choice b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
#joinPop .jp-choice span{display:block;font-size:13.5px;color:#8a93a7;margin-top:3px;line-height:1.4}
#joinPop .jp-choice:hover{border-color:#c9c0b0;box-shadow:0 6px 18px -10px rgba(16,22,38,.4)}
#joinPop .jp-choice:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#joinPop .jp-choice-new{background:#fff4ee;border-color:#ffcdb6;color:#c2440f}
#joinPop .jp-choice-new b{color:var(--ink)}
#joinPop .jp-choice-new span{color:#c2440f;font-weight:600}
#joinPop .jp-choice-new:hover{border-color:var(--orange);background:#fff1ea}
#joinPop .jp-back{position:absolute;top:12px;left:14px;background:none;border:0;padding:4px 8px;
  color:#a89f8e;font-size:17px;line-height:1;font-family:inherit;cursor:pointer;border-radius:50%}
#joinPop .jp-back:hover{background:#f3ece0;color:var(--ink)}
#joinPop .jp-back:hover{color:#4a5670}
@media (max-width:560px){
  #joinPop .jp-choice{padding:14px 16px}
  #joinPop .jp-choice b{font-size:15px}
}
/* gift box + thank-you step */
#joinPop .jp-gift{text-align:center;margin:0 0 8px}
#joinPop .jp-gift svg{width:64px;height:56px;display:inline-block}
#joinPop .jp-tick{text-align:center;margin:2px 0 12px}
#joinPop .jp-tick svg{width:44px;height:44px;display:inline-block}
#joinPop .jp-thanks{text-align:center}
#joinPop .jp-thanks .jp-eyebrow{color:#1f8f7a}
#joinPop .jp-ask{font-size:12.5px;line-height:1.5;color:#5b6675;margin:0 0 2px;
  padding-top:12px;border-top:1px solid #f0e7d8}
#joinPop .jp-ask b{color:var(--ink)}
/* "read the terms first" — an option, not a requirement */
#joinPop .jp-readterms{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 0 0 25px;
  color:#8a8272;font-family:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#joinPop .jp-readterms:hover{color:var(--ink)}
#joinPop .jp-readterms:after{content:" \25be"}
#joinPop .jp-readterms[aria-expanded="true"]:after{content:" \25b4"}
#joinPop .jp-termsbox{margin-top:9px;background:#faf6ee;border:1px solid #eadfcb;border-radius:10px;
  padding:12px 14px;max-height:168px;overflow-y:auto}
#joinPop .jp-termsbox[hidden]{display:none}
#joinPop .jp-termsbox ul{list-style:none;margin:0;padding:0}
#joinPop .jp-termsbox li{position:relative;padding:0 0 8px 14px;font-size:11.5px;line-height:1.5;color:#5b6675}
#joinPop .jp-termsbox li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--orange)}
#joinPop .jp-termsbox li b{color:var(--ink)}
#joinPop .jp-termsbox a{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ink)}



/* ---------- rewards page: join QR ---------- */
.rw-join{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line,#e0d9cd);border-radius:8px;
  padding:26px 28px;margin:0 0 34px;box-shadow:0 1px 2px rgba(22,32,58,.05),0 12px 32px -20px rgba(22,32,58,.35)}
.rw-join-qr{width:150px;height:150px;flex:none;border:1px solid var(--line,#e0d9cd);border-radius:6px;padding:8px;background:#fff}
.rw-join-qr img{width:100%;height:100%;display:block}
.rw-join h3{font-size:23px;margin:0 0 8px;line-height:1.15}
.rw-join p{margin:0 0 14px;font-size:15px;color:var(--ink-2,#4a5670);max-width:56ch}
.rw-join p b{color:var(--ink,#16233a)}
.rw-join-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rw-join-fine{font-size:12px;color:var(--ink-3,#8a93a7);margin:12px 0 0;line-height:1.5}
.rw-join-fine a{color:inherit}
@media (max-width:700px){
  /* No QR on a phone — you cannot scan the screen you are holding. */
  .rw-join{grid-template-columns:1fr;gap:18px;padding:22px}
  .rw-join-qr{display:none}
}