/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* the Discord bar — pure black / pure white, per spec */
  --bar-bg:#000000;
  --bar-fg:#ffffff;
  --bar-h:42px;

  /* neutral ramp — cool near-black, not pure grey */
  --bg:#08080B;
  --surface:#0E0E13;
  --surface-2:#15151C;
  --surface-3:#1C1C25;

  /* hairlines: alpha, so they sit correctly on any surface */
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.10);
  --line-3:rgba(255,255,255,.16);

  /* type */
  --text:#ECECF1;
  --text-2:#A8A8B8;
  --muted:#6E6E80;

  /* one accent, used sparingly */
  --accent:#7C5CFF;
  --accent-hi:#9B82FF;
  --accent-dim:rgba(124,92,255,.12);
  --accent-line:rgba(124,92,255,.30);

  /* success / instant-delivery signal */
  --mint:#3BE8B0;

  --r-sm:8px;
  --r:12px;
  --r-lg:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}

/* The browser's default [hidden]{display:none} is a plain element rule
   and loses to any class that sets display — .co-totals{display:flex},
   .chips{display:flex} and so on. Without this, every element the JS
   hides via the `hidden` attribute stayed visible: empty baskets showed
   "Subtotal 0.00", and the crypto rate panel showed under Card. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  padding-top:var(--bar-h);
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:"Archivo","IBM Plex Sans",sans-serif;margin:0;letter-spacing:-.02em;}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}

/* ============================================================
   ANIMATED DISCORD BAR
   ============================================================ */
.discord-bar{
  position:fixed; inset:0 0 auto 0;
  height:var(--bar-h);
  background:var(--bar-bg);
  color:var(--bar-fg);
  display:flex; align-items:center;
  overflow:hidden;
  z-index:200;
  cursor:pointer;
}
.discord-bar::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  transform:skewX(-18deg);
  animation:sheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{0%{left:-40%}55%{left:118%}100%{left:118%}}

.marquee{display:flex;width:max-content;animation:scroll 30s linear infinite;}
.discord-bar:hover .marquee{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Each group is at least a full viewport wide, so the track can never
   run out before the right-hand edge — that gap was the whole bug.
   space-around then spreads the items across whatever width that is,
   which is what makes it fill a 2560px monitor and a phone equally.
   Both groups get the same rule, so they stay identical widths and
   the -50% loop stays seamless. */
.mq-group{
  display:flex;align-items:center;flex:0 0 auto;
  min-width:100vw;
  justify-content:space-around;
}
.mq-item{
  display:inline-flex;align-items:center;gap:9px;
  padding:0 24px;
  font-size:11.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  white-space:nowrap;
}
.mq-item svg{width:15px;height:15px;flex:0 0 auto;}
.mq-dot{width:3px;height:3px;border-radius:50%;background:#fff;opacity:.35;flex:0 0 auto;}

@media (prefers-reduced-motion:reduce){
  .marquee{animation:none;width:100%;justify-content:center;}
  .discord-bar::after{display:none;}
}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:var(--bar-h); z-index:150;
  background:rgba(8,8,11,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.nav{height:64px;display:flex;align-items:center;gap:36px;}
.logo{
  font-family:"Archivo",sans-serif;
  font-size:17px;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px;
}
/* VA monogram. To use the raster file instead, drop logo.png in this folder
   and replace the <svg> in the markup with: <img class="logo-mark" src="logo.png" alt=""> */
.logo-mark{
  height:21px;width:auto;
  display:block;flex:0 0 auto;
  object-fit:contain;
}
.nav-links{display:flex;gap:4px;margin-right:auto;}
.nav-links a{
  font-size:14px;font-weight:450;color:var(--text-2);
  padding:7px 12px;border-radius:var(--r-sm);
  transition:color .16s var(--ease),background .16s var(--ease);
}
.nav-links a:hover{color:var(--text);background:var(--surface-2);}
.nav-actions{display:flex;align-items:center;gap:10px;}

/* buttons */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn-primary{--btn-bg:var(--accent);--btn-fg:#fff;}
.btn-primary:hover{--btn-bg:var(--accent-hi);}
.btn-light{--btn-bg:#ECECF1;--btn-fg:#08080B;font-weight:600;}
.btn-light:hover{--btn-bg:#fff;}
.btn-ghost{--btn-bd:var(--line-2);--btn-fg:var(--text-2);}
.btn-ghost:hover{--btn-bd:var(--line-3);--btn-bg:var(--surface-2);--btn-fg:var(--text);}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-lg{padding:13px 24px;font-size:15px;}

.icon-btn{
  width:36px;height:36px;padding:0;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;position:relative;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.icon-btn:hover{border-color:var(--line-3);color:var(--text);}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;}
.cart-dot{
  position:absolute;top:-5px;right:-5px;
  min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;
  display:grid;place-items:center;
  border:2px solid var(--bg);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:150px 0 130px;overflow:hidden;}
.hero-inner{position:relative;text-align:center;max-width:720px;margin:0 auto;}

h1{
  font-size:clamp(38px,5.6vw,60px);
  line-height:1.06;font-weight:700;
  margin-bottom:20px;
}
.lede{
  font-size:17px;line-height:1.62;color:var(--text-2);
  max-width:520px;margin:0 auto 32px;
}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{display:none;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .hero{padding:96px 0 80px;}

}

/* ============================================================
   NAV ACTIVE STATE
   ============================================================ */
.nav-links a.is-active{color:var(--text);background:var(--surface-2);}

/* ============================================================
   PRIMARY CTA — grows on hover, compresses on press
   ============================================================ */
.btn-cta{
  position:relative;
  transform-origin:center;
  will-change:transform;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:
    transform .26s cubic-bezier(.34,1.4,.5,1),
    box-shadow .26s var(--ease),
    background .16s var(--ease);
}
.btn-cta:hover{
  transform:translateY(-2px) scale(1.045);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
/* snappier on the way down than on the way up — that's the "click" */
.btn-cta:active{
  transform:translateY(0) scale(.965);
  box-shadow:0 1px 6px rgba(0,0,0,.4);
  transition-duration:.07s;
}
.btn-cta .btn-arrow{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .26s cubic-bezier(.34,1.4,.5,1);
}
.btn-cta:hover .btn-arrow{transform:translateX(3px);}

/* keyboard users get the same affordance */
.btn:focus-visible,
.nav-links a:focus-visible,
.icon-btn:focus-visible{
  outline:2px solid var(--accent-hi);
  outline-offset:3px;
}
.btn-cta:focus-visible{transform:translateY(-2px) scale(1.045);}

@media (prefers-reduced-motion:reduce){
  .btn-cta,.btn-cta .btn-arrow{transition:background .16s linear;}
  .btn-cta:hover,.btn-cta:active,.btn-cta:focus-visible{transform:none;}
}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-head{padding:64px 0 36px;border-bottom:1px solid var(--line);}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.crumb a{color:var(--text-2);}
.crumb a:hover{color:var(--text);}
.page-head h1{font-size:clamp(30px,4.4vw,42px);margin-bottom:10px;}
.page-head p{margin:0;color:var(--text-2);font-size:16px;max-width:520px;}

/* ============================================================
   STORE — filters + product grid
   ============================================================ */
.store{padding:36px 0 96px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.chip{
  padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;
  color:var(--text-2);font:inherit;font-size:13px;
  cursor:pointer;transition:all .16s var(--ease);
}
.chip:hover{border-color:var(--line-3);color:var(--text);}
.chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease);
}
.card:hover{border-color:var(--line-3);transform:translateY(-3px);background:var(--surface-2);}
.card-media{
  position:relative;aspect-ratio:4/3;
  background:#0A0A0C;
  background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 55%);
  display:grid;place-items:center;
  border-bottom:1px solid var(--line);
}
.tag{
  position:absolute;top:11px;left:11px;
  font-size:10px;font-weight:700;letter-spacing:.11em;
  padding:4px 8px;border-radius:6px;
  background:rgba(0,0,0,.62);
  border:1px solid var(--line-2);color:var(--text);
}
.tag.new{background:var(--accent);border-color:transparent;color:#fff;}
.tag.sale{background:var(--mint);border-color:transparent;color:#052E22;}

.card-body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1;}
.card-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.card-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;}
.card-desc{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 14px;}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.price{font-family:"Archivo",sans-serif;font-size:17px;font-weight:600;}
.price s{color:var(--muted);font-size:13px;font-weight:400;margin-right:7px;}

/* ============================================================
   BASKET DRAWER
   ============================================================ */
.cart-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s var(--ease);
}
.cart-overlay.is-open{opacity:1;}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:310;
  width:min(400px,100%);
  background:var(--surface);
  border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
}
.cart-drawer.is-open{transform:translateX(0);}

.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.cart-head h2{font-size:17px;letter-spacing:-.01em;}

.cart-items{flex:1 1 auto;overflow-y:auto;padding:8px 22px;}

.cart-item{
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:13px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.cart-thumb{
  width:52px;height:52px;border-radius:10px;
  background:#0A0A0C;
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  font-family:"Archivo",sans-serif;
  font-size:13px;font-weight:700;color:var(--muted);
}
.cart-name{font-size:14px;font-weight:600;line-height:1.35;margin-bottom:3px;}
.cart-price{font-size:12px;color:var(--muted);margin-bottom:9px;}
.cart-line{
  font-family:"Archivo",sans-serif;
  font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.qty{display:flex;align-items:center;gap:2px;}
.qty-btn{
  width:24px;height:24px;
  border:1px solid var(--line-2);border-radius:6px;
  background:transparent;color:var(--text-2);
  font:inherit;font-size:14px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.qty-btn:hover{border-color:var(--line-3);color:var(--text);}
.qty-n{
  min-width:26px;text-align:center;
  font-size:13px;font-variant-numeric:tabular-nums;
}
.cart-remove{
  margin-left:8px;padding:0;
  background:none;border:none;
  color:var(--muted);font:inherit;font-size:12px;
  text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;transition:color .16s var(--ease);
}
.cart-remove:hover{color:#ff7b7b;}

.cart-empty{
  text-align:center;padding:64px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.cart-empty svg{
  width:34px;height:34px;
  fill:none;stroke:var(--muted);stroke-width:1.4;
}
.cart-empty p{margin:0;color:var(--muted);font-size:14px;}

.cart-foot{
  flex:0 0 auto;
  padding:20px 22px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.cart-total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:6px;
}
.cart-total span{font-size:14px;color:var(--text-2);}
.cart-total strong{
  font-family:"Archivo",sans-serif;
  font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cart-note{margin:0 0 14px;font-size:12px;color:var(--muted);line-height:1.5;}
.cart-checkout{width:100%;}

/* Add-to-cart confirmation. The label carries the message, so the
   button keeps its own colour -- it just reads as pressed. */
.add-to-cart.is-added{
  transform:scale(.97);
  opacity:.72;
  transition:transform .12s var(--ease),opacity .12s var(--ease);
}

/* hide the badge when the basket is empty */
.cart-dot[hidden]{display:none;}

/* no matching products */
.no-results{
  padding:56px 0;text-align:center;color:var(--muted);font-size:14.5px;
}

@media (max-width:520px){
  .cart-drawer{width:100%;}
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout{padding:40px 0 96px;}
.checkout-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:40px;align-items:start;
}

/* ---- form ---- */
.checkout-form{display:flex;flex-direction:column;gap:26px;}
.co-block{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  padding:22px 24px;margin:0;
}
.co-step{
  display:flex;align-items:center;gap:11px;
  font-family:"Archivo",sans-serif;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:0;margin-bottom:6px;
}
.co-num{
  width:23px;height:23px;border-radius:50%;
  background:var(--accent-dim);border:1px solid var(--accent-line);
  color:var(--accent-hi);
  font-size:12px;font-weight:700;
  display:grid;place-items:center;flex:0 0 auto;
}
.co-label{
  display:block;font-size:12.5px;font-weight:600;
  color:var(--text-2);margin-bottom:7px;
}
.co-input{
  width:100%;padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--text);font:inherit;font-size:15px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.co-input::placeholder{color:var(--muted);}
.co-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.co-input.is-invalid{border-color:#ff6b6b;}
.co-error{margin:8px 0 0;font-size:12.5px;color:#ff8484;}

/* ---- payment options ---- */
.pay-option{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;margin-top:10px;
  border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.pay-option:hover{border-color:var(--line-3);background:var(--surface-2);}
.pay-option.is-selected{
  border-color:var(--accent);
  background:var(--accent-dim);
}
.pay-option input{position:absolute;opacity:0;pointer-events:none;}
.pay-radio{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--line-3);
  flex:0 0 auto;position:relative;
  transition:border-color .16s var(--ease);
}
.pay-option.is-selected .pay-radio{border-color:var(--accent);}
.pay-option.is-selected .pay-radio::after{
  content:"";position:absolute;inset:3.5px;
  border-radius:50%;background:var(--accent);
}
.pay-body{display:flex;flex-direction:column;gap:2px;margin-right:auto;}
.pay-name{font-size:14.5px;font-weight:600;}
.pay-sub{font-size:12.5px;color:var(--muted);}

.pay-badges,.pay-coins{display:flex;gap:5px;flex:0 0 auto;}
.pay-badge{
  border:1px solid var(--line-2);border-radius:4px;
  padding:3px 6px;font-size:9px;font-weight:700;
  letter-spacing:.06em;color:var(--muted);
}
.coin{
  width:30px;height:22px;border-radius:5px;
  display:grid;place-items:center;
  font-size:8.5px;font-weight:700;letter-spacing:.04em;
  color:#fff;
}
.coin-btc{background:#F7931A;}
.coin-eth{background:#627EEA;}
.coin-sol{background:linear-gradient(120deg,#9945FF,#14F195);}
.coin-ltc{background:#345D9D;}

/* ---- submit ---- */
.co-submit{width:100%;position:relative;}
.co-submit:disabled{opacity:.55;cursor:not-allowed;}
.co-spinner{display:none;width:15px;height:15px;flex:0 0 auto;}
.co-submit.is-busy .co-spinner{
  display:block;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:cospin .7s linear infinite;
}
@keyframes cospin{to{transform:rotate(360deg);}}

.co-secure{
  display:flex;align-items:flex-start;gap:8px;
  margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;
}
.co-secure svg{
  width:14px;height:14px;flex:0 0 auto;margin-top:2px;
  fill:none;stroke:var(--mint);stroke-width:1.7;
}

/* ---- alerts ---- */
.co-alert{
  padding:13px 16px;border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.5;
  border:1px solid var(--line-2);background:var(--surface-2);
}
.co-alert-error{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.10);color:#ffb3b3;}
.co-alert-info{border-color:var(--accent-line);background:var(--accent-dim);color:var(--accent-hi);}

/* ---- summary ---- */
.co-summary{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:24px;
  position:sticky;top:calc(var(--bar-h) + 84px);
}
.co-summary h2{font-size:16px;margin-bottom:18px;}
.co-item{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:10px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.co-item-qty{color:var(--muted);font-variant-numeric:tabular-nums;}
.co-item-name{line-height:1.4;}
.co-item-price{
  font-family:"Archivo",sans-serif;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.co-empty{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6;}
.co-empty a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:2px;}

.co-totals{margin-top:18px;display:flex;flex-direction:column;gap:9px;}
.co-row{display:flex;justify-content:space-between;font-size:13.5px;}
.co-row-muted{color:var(--muted);}
.co-row-total{
  border-top:1px solid var(--line);padding-top:13px;margin-top:4px;
  font-size:15px;font-weight:600;
}
.co-row-total span:last-child{
  font-family:"Archivo",sans-serif;font-size:21px;
  font-variant-numeric:tabular-nums;
}
.co-delivery{
  display:flex;align-items:center;gap:7px;
  margin:18px 0 0;font-size:12.5px;color:var(--mint);
}
.co-delivery svg{width:13px;height:13px;fill:currentColor;}
.co-back{
  display:block;margin-top:18px;
  font-size:13px;color:var(--muted);
}
.co-back:hover{color:var(--text);}

/* ---- success page ---- */
.done{padding:100px 0;text-align:center;}
.done-mark{
  width:64px;height:64px;border-radius:50%;margin:0 auto 26px;
  background:var(--mint);display:grid;place-items:center;
  box-shadow:0 14px 40px rgba(59,232,176,.28);
}
.done-mark svg{width:32px;height:32px;fill:none;stroke:#052E22;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.done h1{font-size:clamp(28px,4vw,40px);margin-bottom:14px;}
.done p{max-width:460px;margin:0 auto 12px;color:var(--text-2);font-size:16px;line-height:1.6;}
.done-ref{
  display:inline-block;margin-top:18px;padding:7px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--muted);
}
.done-cta{display:flex;gap:10px;justify-content:center;margin-top:32px;flex-wrap:wrap;}

@media (max-width:900px){
  .checkout-grid{grid-template-columns:1fr;gap:28px;}
  .co-summary{position:static;order:-1;}
}

/* ============================================================
   PRODUCT CARD — link wrapper + detached footer
   ============================================================ */
.card{position:relative;}
.card-link{display:block;color:inherit;}
.card-link:focus-visible{outline:2px solid var(--accent-hi);outline-offset:-2px;border-radius:var(--r-lg);}
.card .card-body{padding-bottom:6px;}
.card .card-foot{padding:0 16px 16px;margin-top:auto;}
.card-title{transition:color .16s var(--ease);}
.card:hover .card-title{color:var(--accent-hi);}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-crumbwrap{padding:28px 0 0;}
.pd{padding:22px 0 72px;}
.pd-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:52px;align-items:start;
}

.pd-media{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#0A0A0C;
  display:grid;place-items:center;
  position:relative;
}

.pd-cat{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;
}
.pd-title{
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.08;margin-bottom:14px;
}
.pd-blurb{
  margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--text-2);
}

.pd-price{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.pd-price strong{
  font-family:"Archivo",sans-serif;
  font-size:34px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.pd-price s{font-size:17px;color:var(--muted);}
.pd-save{
  background:rgba(59,232,176,.13);
  border:1px solid rgba(59,232,176,.32);
  color:var(--mint);
  padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;
}

.pd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.pd-actions .btn{flex:1 1 170px;}

.pd-instant{
  display:flex;align-items:center;gap:7px;
  margin:0 0 34px;font-size:13px;color:var(--mint);
}
.pd-instant svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto;}

.pd-section{margin-bottom:30px;}
.pd-section h2{
  font-size:15px;margin-bottom:12px;
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:0;
}
.pd-section p{margin:0;font-size:14.5px;line-height:1.68;color:var(--text-2);}

.pd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.pd-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;line-height:1.5;color:var(--text-2);
}
.pd-list svg{
  width:15px;height:15px;flex:0 0 auto;margin-top:3px;
  fill:none;stroke:var(--mint);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}


.pd-missing{
  grid-column:1 / -1;text-align:center;padding:80px 0;
}
.pd-missing h1{font-size:30px;margin-bottom:12px;}
.pd-missing p{color:var(--muted);margin:0 0 26px;}

@media (max-width:880px){
  .pd-grid{grid-template-columns:1fr;gap:32px;}
  .pd-media{position:static;aspect-ratio:16/10;}
  .pd-mark{width:46%;}
}

/* ============================================================
   PRODUCT IMAGERY — VA monogram on black
   Matches the uploaded logo artwork: white mark, black ground.
   ============================================================ */
.card-media,
.pd-media{
  background:#0A0A0C;
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 60%);
}
.card-mark,
.pd-mark{
  width:58%;height:auto;
  object-fit:contain;
  display:block;
}
.pd-mark{width:52%;}

/* A product carrying its own artwork. Contained, never cropped or
   stretched, so a square logo and a wide banner both sit correctly
   in the same box. Overrides the % widths above, including the
   mobile ones, by coming later in the file. */
.card-mark-img,
.pd-mark-img{
  width:auto;height:auto;
  max-width:68%;max-height:68%;
  object-fit:contain;
  border-radius:10px;
}
.pd-mark-img{max-width:60%;max-height:60%;}
.cart-mark-img{
  width:100%;height:100%;
  object-fit:cover;border-radius:9px;
}


/* ============================================================
   TEXT SELECTION
   Interface text is not selectable — a drag across headings,
   prices or product copy used to leave a highlight block, which
   reads as an unstyled web page rather than a product.

   Anything a customer has a real reason to select or copy is
   exempted below.
   ============================================================ */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Customers genuinely need these: typing and copying an order
   reference or a support email must keep working. */
input,
textarea,
select,
.done-ref,
[contenteditable]{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

/* Dragging inside a card no longer starts a link-drag ghost. */
.card-link,
.logo,
.pay-option{
  -webkit-user-drag:none;
}

/* Belt and braces: if anything does get selected, it stays
   on-brand rather than showing the browser's system blue. */
::selection{background:rgba(255,255,255,.14);color:#fff;}
::-moz-selection{background:rgba(255,255,255,.14);color:#fff;}

/* Controls are never selectable — dragging across a button used to
   leave a highlight on its label. Buttons are not inputs, so they are
   not covered by the input exemption above; this is explicit. */
button,
.btn,
.chip,
.qty-btn,
.cart-remove,
.icon-btn,
.pay-option,
.card-foot,
.nav-links a,
.logo{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.store-empty{
  grid-column:1 / -1;
  padding:72px 0;text-align:center;
  color:var(--muted);font-size:15px;
}

.cart-mark{width:74%;height:auto;object-fit:contain;display:block;}

/* ============================================================
   RESPONSIVE
   Breakpoints chosen from real device widths, not round numbers:
     1024  iPad landscape
      834  iPad Air portrait
      768  iPad mini portrait
      430  iPhone Pro Max
      375  iPhone SE / mini
   ============================================================ */

/* --- iPad landscape and small laptops --- */
@media (max-width:1024px){
  .wrap{padding:0 24px;}
  .pd-grid{gap:36px;}
  .checkout-grid{grid-template-columns:1fr 320px;gap:28px;}
}

/* --- iPad portrait --- */
@media (max-width:834px){
  .nav{height:60px;gap:20px;}
  .hero{padding:96px 0 84px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
  .pd-grid{grid-template-columns:1fr;gap:28px;}
  .pd-media{position:static;aspect-ratio:16/9;}
  .checkout-grid{grid-template-columns:1fr;}
  .co-summary{position:static;order:-1;}
}

/* --- phones --- */
@media (max-width:640px){
  :root{--bar-h:38px;}

  .wrap{padding:0 16px;}
  .nav{height:56px;gap:12px;}
  .logo{font-size:15px;gap:7px;}
  .logo-mark{height:18px;}

  .hero{padding:64px 0 56px;}
  h1{font-size:clamp(30px,8.5vw,40px);}
  .lede{font-size:15.5px;}
  /* full-width stacked CTAs — thumb-friendly, no side-by-side squeeze */
  .hero-cta{flex-direction:column;align-items:stretch;gap:9px;}
  .hero-cta .btn{width:100%;}

  .page-head{padding:36px 0 24px;}
  .page-head h1{font-size:clamp(26px,7.5vw,32px);}
  .page-head p{font-size:14.5px;}

  /* two-up cards read better than one giant column on a phone */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
  .card{border-radius:14px;}
  .card-body{padding:11px 11px 4px;}
  .card-cat{font-size:9.5px;letter-spacing:.08em;margin-bottom:5px;}
  .card-title{font-size:13px;line-height:1.3;}
  .card-desc{display:none;}          /* the blurb is on the product page */
  .card .card-foot{padding:0 11px 11px;flex-wrap:wrap;gap:7px;}
  .price{font-size:14px;}
  .price s{font-size:11px;margin-right:5px;}
  .card .card-foot .btn{padding:7px 11px;font-size:12px;}

  /* chips scroll horizontally rather than wrapping into three rows */
  .chips{
    flex-wrap:nowrap;overflow-x:auto;
    margin:0 -16px 20px;padding:0 16px 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;}

  .pd-media{aspect-ratio:3/2;border-radius:14px;}
  .pd-title{font-size:clamp(22px,6.5vw,28px);}
  .pd-blurb{font-size:15px;margin-bottom:20px;}
  .pd-price strong{font-size:28px;}
  .pd-actions{flex-direction:column;}
  .pd-actions .btn{width:100%;flex:none;}

  .co-block{padding:18px 16px;}
  .co-summary{padding:18px 16px;}
  .pay-option{padding:13px 13px;gap:11px;}
  .pay-badges{display:none;}         /* the label already says which cards */
  .pay-sub{font-size:11.5px;}
  .rate-amount{font-size:11.5px;}
  .rate-name{display:none;}          /* ticker + amount is enough at 375px */

  .cart-drawer{width:100%;}
  .cart-item{grid-template-columns:44px 1fr auto;gap:10px;}
  .cart-thumb{width:44px;height:44px;}

  .done{padding:64px 0;}
  .done-cta{flex-direction:column;}
  .done-cta .btn{width:100%;}
}

/* --- iPhone SE / mini --- */
@media (max-width:380px){
  .grid{grid-template-columns:1fr;}
  .card-desc{display:block;}
  .nav-actions{gap:7px;}
}

/* --- touch devices: hover effects never "stick" --- */
@media (hover:none){
  .card:hover{transform:none;background:var(--surface);}
  .card:hover .card-title{color:var(--text);}
  .btn-cta:hover{transform:none;box-shadow:0 2px 10px rgba(0,0,0,.35);}
  .btn-cta:active{transform:scale(.97);}
  .discord-bar:hover .marquee{animation-play-state:running;}
}

/* --- iOS: stop Safari zooming on focus (needs >=16px) --- */
@media (max-width:834px){
  .co-input,input,textarea,select{font-size:16px;}
}

/* --- notch / home indicator safe areas --- */
@supports(padding:max(0px)){
  .wrap{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .cart-drawer{padding-bottom:env(safe-area-inset-bottom);}
}

/* --- landscape phones: reclaim vertical space --- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:40px 0 36px;}
  .co-summary{position:static;}
}

/* Body cannot scroll behind an open basket — on iOS this is what stops
   the page underneath scrolling when you drag inside the drawer. */
body.drawer-open{overflow:hidden;}

/* ============================================================
   MOBILE NAVIGATION
   The links were simply hidden below 900px, which left phone
   users with no way to reach Store or Support at all. Instead:
   drop the wordmark to the VA glyph alone, which frees enough
   width to keep the real links.
   ============================================================ */
@media (max-width:640px){
  .logo{font-size:0;gap:0;}          /* hides the wordmark text node */
  .logo-mark{height:20px;font-size:0;}

  .nav-links{
    display:flex;gap:2px;margin:0 auto 0 10px;
  }
  .nav-links a{
    font-size:12.5px;padding:10px 8px;
    min-height:44px;display:flex;align-items:center;
  }

  /* Apple HIG minimum touch target is 44px. */
  .icon-btn{width:42px;height:42px;}
  .icon-btn svg{width:19px;height:19px;}
  .chip{min-height:40px;display:inline-flex;align-items:center;padding:0 15px;}
  .card .card-foot .btn{min-height:38px;padding:0 14px;}
  .qty-btn{width:32px;height:32px;font-size:16px;}
  .cart-remove{padding:8px 0;min-height:32px;}
}

/* Very narrow phones: Support drops out rather than wrapping the bar. */
@media (max-width:359px){
  .nav-links a:nth-child(3){display:none;}
}

/* On phones a sale price and its button will not share a row without
   one card wrapping and the other not — stack them so every card in
   the grid is the same height. */
@media (max-width:640px){
  .card .card-foot{flex-direction:column;align-items:stretch;gap:9px;}
  .card .card-foot .btn{width:100%;}
  .price{font-size:15px;}
}

/* ============================================================
   CRYPTO PAY PAGE
   ============================================================ */
.pay{padding:32px 0 96px;}
.pay .wrap{max-width:660px;}

.pay-state{
  text-align:center;padding:72px 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.pay-state h2{font-size:22px;}
.pay-state p{margin:0;color:var(--muted);font-size:14.5px;}
.pay-spinner{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:cospin .8s linear infinite;
}

.pay-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.pay-label{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.pay-fiat{
  font-family:"Archivo",sans-serif;
  font-size:34px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.pay-timer{text-align:right;}
.pay-timer strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;font-variant-numeric:tabular-nums;
}
.pay-timer.is-low strong{color:#ffb26b;}
.pay-timer.is-out strong{color:#ff7b7b;}

.pay-coins{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.pay-coin{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px 9px 10px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:transparent;color:var(--text-2);
  font:inherit;font-size:13.5px;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.pay-coin:hover{border-color:var(--line-3);color:var(--text);}
.pay-coin.is-on{border-color:var(--accent);background:var(--accent-dim);color:var(--text);}
.pay-coin-name{font-weight:500;}

.pay-panel{
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);padding:22px;
}
.pay-amount-row,.pay-addr-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;
}
.pay-amount-row{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.pay-amount{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}
.pay-addr-wrap{min-width:0;flex:1;}
.pay-addr{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.5;
  word-break:break-all;color:var(--text);
}
/* the two values people must copy exactly are the exception to the
   site-wide no-select rule */
.pay-amount,.pay-addr{
  -webkit-user-select:text;-moz-user-select:text;user-select:text;
}
.pay-copy{flex:0 0 auto;}
.pay-copy.is-done{--btn-bd:var(--mint);--btn-fg:var(--mint);}

.pay-warn{
  margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.55;
}

.pay-status{
  display:flex;align-items:center;gap:10px;
  margin-top:20px;padding:14px 16px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-2);
  font-size:13.5px;color:var(--text-2);
}
.pay-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--muted);
}
.pay-status.is-waiting .pay-dot{
  background:var(--accent);
  animation:paypulse 1.8s ease-in-out infinite;
}
.pay-status.is-pending .pay-dot{background:#F5B942;animation:paypulse 1.2s ease-in-out infinite;}
.pay-status.is-done{border-color:rgba(59,232,176,.35);background:rgba(59,232,176,.10);color:var(--mint);}
.pay-status.is-done .pay-dot{background:var(--mint);}
.pay-status.is-expired{border-color:rgba(255,123,123,.35);background:rgba(255,123,123,.09);color:#ffb3b3;}
.pay-status.is-expired .pay-dot{background:#ff7b7b;}
@keyframes paypulse{0%,100%{opacity:1;}50%{opacity:.25;}}

@media (max-width:640px){
  .pay-fiat{font-size:28px;}
  .pay-amount{font-size:18px;}
  .pay-panel{padding:16px;}
  .pay-amount-row,.pay-addr-row{flex-direction:column;align-items:stretch;gap:10px;}
  .pay-copy{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .pay-status .pay-dot{animation:none;}
  .pay-spinner{animation-duration:2s;}
}

/* ---- coin picker on checkout ---- */
.coin-pick{
  margin-top:10px;padding:14px 16px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg);
}
.coin-pick-label{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.coin-pick-list{display:flex;gap:8px;flex-wrap:wrap;}
.coin-opt{
  display:flex;align-items:center;gap:9px;
  padding:9px 13px 9px 9px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--text-2);
  font:inherit;text-align:left;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.coin-opt:hover{border-color:var(--line-3);color:var(--text);}
.coin-opt.is-on{border-color:var(--accent);background:var(--accent-dim);color:var(--text);}
.coin-opt-meta{display:flex;flex-direction:column;gap:1px;}
.coin-opt-name{font-size:13px;font-weight:600;}
.coin-opt-net{font-size:11px;color:var(--muted);}

/* ---- network callout on the pay page ---- */
.pay-network{
  display:flex;flex-direction:column;gap:4px;
  padding:13px 15px;margin:18px 0;
  border:1px solid rgba(245,185,66,.30);
  border-radius:var(--r-sm);
  background:rgba(245,185,66,.08);
}
.pay-net-name{font-size:13.5px;font-weight:600;color:#F5B942;}
.pay-net-warn{font-size:12px;color:var(--text-2);line-height:1.5;}

/* Success page states — the mark is not green until the payment is
   actually confirmed by the server. */
.done-mark.is-checking{
  background:var(--surface-2);
  border:1px solid var(--line-2);
  box-shadow:none;
}
.done-mark.is-checking svg{stroke:var(--muted);}
.done-mark.is-pending{
  background:rgba(245,185,66,.15);
  border:1px solid rgba(245,185,66,.4);
  box-shadow:none;
}
.done-mark.is-pending svg{stroke:#F5B942;}
.done-mark.is-ok{
  background:var(--mint);
  border:none;
  box-shadow:0 14px 40px rgba(59,232,176,.28);
}
.done-mark.is-ok svg{stroke:#052E22;}

/* ============================================================
   SUPPORT
   ============================================================ */
.support{padding:36px 0 96px;}
/* The form is capped rather than stretched: an email field 800px
   wide looks like a mistake. The lookup and the info cards share
   the right column, the form spans both rows beside them. */
.support-grid{
  display:grid;
  grid-template-columns:minmax(0,660px) 320px;
  justify-content:center;
  gap:20px 32px;
  /* stretch, not start: the form spans both rows, so the lookup and
     the info cards divide exactly that height between them and the
     column ends level with the form instead of stopping short. */
  align-items:stretch;
}
.support-form{grid-column:1;grid-row:1 / span 2;}
.tk-find{grid-column:2;grid-row:1;}
.support-side{grid-column:2;grid-row:2;}

.support-form{
  display:flex;flex-direction:column;gap:20px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:26px;
}
.tk-field{display:flex;flex-direction:column;}
.tk-opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;}
.tk-textarea{resize:none;min-height:130px;line-height:1.6;font-family:inherit;}
.tk-count{
  align-self:flex-end;margin-top:6px;
  font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
select.co-input{appearance:none;cursor:pointer;}
.tk-submit{width:100%;}

/* honeypot — hidden from people, not from bots */
.tk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.support-side{display:flex;flex-direction:column;gap:16px;}

/* Both info cards grow to fill the row rather than leaving a gap at
   the bottom of the column. Content stays pinned to the top of each. */
.support-side .tk-card{flex:1 1 auto;display:flex;flex-direction:column;}
.support-side .tk-card .tk-list{margin-top:auto;margin-bottom:auto;}
.tk-card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:22px;
}
.tk-card h2{font-size:15px;margin-bottom:9px;font-family:"IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:0;}
.tk-card p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.6;}
.tk-card .btn{width:100%;}
.btn-discord{--btn-bg:#5865F2;--btn-fg:#fff;font-weight:600;}
.btn-discord:hover{--btn-bg:#6b76f5;}
.tk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.tk-list li{
  font-size:13px;color:var(--muted);line-height:1.55;
  padding-left:14px;position:relative;
}
.tk-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--line-3);
}

.support-done{padding:88px 0;text-align:center;}
.support-done h2{font-size:26px;margin-bottom:12px;}
.support-done p{color:var(--text-2);margin:0 auto 8px;max-width:400px;}

@media (max-width:900px){
  /* One column. The lookup goes first but collapsed, so it costs a
     single line instead of the 700px of cards that used to sit
     between a phone user and the form. */
  /* align-items:start is inherited from the grid rule above, where it
     means "top". Once this is a flex COLUMN it becomes the cross axis
     and shrinks every card to its content width -- hence stretch. */
  .support-grid{
    display:flex;flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:16px;
  }
  .support-form,.tk-find,.support-side{grid-column:auto;grid-row:auto;}
  .tk-find{order:1;}
  .support-form{order:2;}
  .support-side{order:3;}
}
@media (max-width:640px){
  .support-form{padding:18px 16px;}
  .tk-card:not(.tk-find){padding:18px 16px;}
}

/* second field in the same block needs breathing room */
.co-label-gap{margin-top:20px;}

/* Hero: the mark carries the brand, the wordmark names it, the line
   underneath says what is actually sold. */
.hero-mark{
  height:clamp(52px,8vw,80px);
  width:auto;
  object-fit:contain;
  margin:0 auto 26px;
  display:block;
}
.hero h1{
  font-size:clamp(34px,5.4vw,56px);
  letter-spacing:-.03em;
}


/* ============================================================
   TICKET THREAD
   The customer's view of their own ticket, opened from the link
   in their email. Reads as a conversation, not a form.
   ============================================================ */
.thread{padding:44px 0 90px;}

.th-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:22px;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.th-ref{
  font-family:"Archivo",sans-serif;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.th-subject{font-size:26px;line-height:1.2;margin:0;}

.th-status{
  flex:0 0 auto;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--text-2);
}
.th-status.is-open{
  border-color:var(--accent-line);background:var(--accent-dim);color:var(--accent-hi);
}
.th-status.is-answered,
.th-status.is-resolved{
  border-color:rgba(59,232,176,.30);background:rgba(59,232,176,.10);color:var(--mint);
}

/* Capped so a long history scrolls inside the card rather than
   pushing the reply box off the bottom of the page. */
.th-log{
  max-height:min(56vh,520px);overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:4px 2px 2px;margin-bottom:20px;
}

.th-msg{
  max-width:min(76%,620px);
  padding:12px 15px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);
}
/* Theirs on the left, ours on the right — the shape alone tells you
   who said what before you read a word of it. */
.th-msg.is-staff{
  align-self:flex-start;
  border-color:var(--accent-line);background:var(--accent-dim);
}
.th-msg.is-customer{align-self:flex-end;background:var(--surface-2);}

.th-meta{
  display:flex;align-items:baseline;gap:10px;margin-bottom:5px;
}
.th-who{font-size:12px;font-weight:600;color:var(--text);}
.th-when{font-size:11px;color:var(--muted);}
.th-body{
  font-size:14.5px;line-height:1.55;color:var(--text-2);
  white-space:pre-wrap;word-break:break-word;
}

.th-reply{
  border-top:1px solid var(--line);padding-top:20px;
}
.th-input{resize:none;min-height:76px;font:inherit;font-size:14.5px;}
.th-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:12px;
}
.th-hint{font-size:12.5px;color:var(--muted);}
.th-send{min-width:104px;}

.th-closed{
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted);
}
.th-closed a{color:var(--accent-hi);}

@media (max-width:640px){
  .th-head{flex-direction:column;gap:12px;}
  .th-subject{font-size:22px;}
  .th-msg{max-width:88%;}
  .th-actions{flex-direction:column;align-items:stretch;}
  .th-hint{order:2;text-align:center;}
  .th-send{width:100%;}
}


/* ============================================================
   "ALREADY OPENED A TICKET?"
   Getting back into a conversation without the email link.
   ============================================================ */
.tk-find .co-label{margin-top:0;}
.tk-find-btn{width:100%;margin-top:16px;}

.tk-find-recent{
  font-size:12.5px;color:var(--muted);
  margin:0 0 16px;line-height:1.6;
}

/* A remembered reference is a button, not decoration — clicking it
   fills the field in. */
.tk-ref-chip{
  font:inherit;font-size:12px;font-weight:600;
  font-family:"Archivo",sans-serif;letter-spacing:.04em;
  padding:3px 8px;border-radius:6px;
  border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--text-2);cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.tk-ref-chip:hover{border-color:var(--accent-line);color:var(--accent-hi);}


/* ============================================================
   "ALREADY OPENED A TICKET?" — collapsible
   A <details> so it costs one line on a phone. JS opens it on
   desktop, where there is room for it to just be there.
   ============================================================ */
.tk-find{padding:0;overflow:hidden;}

.tk-find-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;cursor:pointer;
  font-size:14.5px;font-weight:600;color:var(--text);
  list-style:none;                 /* Firefox */
  user-select:none;
}
.tk-find-head::-webkit-details-marker{display:none;}
.tk-find-head:hover{color:var(--accent-hi);}

.tk-find-caret{
  width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .18s var(--ease);
  margin-top:-3px;
}
.tk-find[open] .tk-find-caret{transform:rotate(-135deg);margin-top:2px;}

.tk-find-body{padding:0 20px 20px;}

/* Two fields side by side where there is room — on the phone they
   stack, which the flex-wrap handles without a second query. */
.tk-find-row{display:flex;flex-wrap:wrap;gap:12px;}
.tk-find-col{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;}
.tk-find-col .co-label{margin-top:0;}

.tk-find-btn{width:100%;margin-top:14px;}

@media (max-width:640px){
  .tk-find-head{padding:14px 16px;}
  .tk-find-body{padding:0 16px 16px;}
}


/* Crypto is the only payment method, so the option is a labelled panel
   rather than a radio with nothing to choose against. */
.pay-option.is-only{cursor:default;}
.pay-option.is-only input{position:absolute;opacity:0;pointer-events:none;}
.pay-option.is-only:hover{border-color:var(--line-2);background:var(--surface);}


/* ============================================================
   FOOTER
   ============================================================ */
/* Everything except the footer lives in .page-body, at least one
   viewport tall. The spacer inside absorbs whatever is left over, so
   the footer always begins below the fold -- you scroll to reach it,
   rather than it eating the bottom third of a short page. */
.page-body{min-height:100vh;display:flex;flex-direction:column;}
.ft-push{flex:1 0 auto;}

.footer{
  flex:0 0 auto;
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:52px 0 30px;
}

.ft-top{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);
  gap:48px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line);
}

.ft-brand .logo{margin-bottom:14px;}
.ft-blurb{
  margin:0 0 18px;max-width:38ch;
  font-size:13.5px;line-height:1.65;color:var(--muted);
}
.ft-discord{width:auto;}

.ft-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
}
.ft-col{display:flex;flex-direction:column;gap:9px;}
.ft-col h2{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text);margin:0 0 4px;
  font-family:"Archivo",sans-serif;
}
.ft-col a{
  font-size:13.5px;color:var(--muted);
  transition:color .16s var(--ease);
  width:fit-content;
}
.ft-col a:hover{color:var(--text);}

.ft-bottom{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:28px;padding-top:24px;
}
.ft-copy{
  margin:0;font-size:12.5px;color:var(--text-2);flex:0 0 auto;
}
.ft-note{
  margin:0;font-size:11.5px;line-height:1.6;color:var(--muted);
  max-width:60ch;text-align:right;
}

@media (max-width:900px){
  .ft-top{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:640px){
  .footer{padding:38px 0 26px;}
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .ft-bottom{flex-direction:column;gap:12px;}
  .ft-note{text-align:left;max-width:none;}
}


/* ============================================================
   LEGAL PAGES
   Long-form text, so a comfortable measure matters more than
   filling the width.
   ============================================================ */
.legal{padding:40px 0 20px;}
.legal-wrap{max-width:74ch;}

.legal-updated{
  margin:10px 0 0;font-size:12.5px;color:var(--muted);
}

.legal-lede{
  font-size:16px;line-height:1.7;color:var(--text-2);
  padding:16px 18px;margin:0 0 30px;
  border:1px solid var(--accent-line);border-radius:var(--r);
  background:var(--accent-dim);
}

.legal h2{
  font-size:17px;margin:34px 0 12px;
  font-family:"IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:0;
}
.legal h2:first-child{margin-top:0;}

.legal p{
  margin:0 0 14px;
  font-size:14.5px;line-height:1.75;color:var(--text-2);
}
.legal strong{color:var(--text);font-weight:600;}
.legal a{color:var(--accent-hi);}
.legal a:hover{text-decoration:underline;}

.legal-list{
  list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
.legal-list li{
  font-size:14.5px;line-height:1.7;color:var(--text-2);
  padding-left:16px;position:relative;
}
.legal-list li::before{
  content:"";position:absolute;left:0;top:10px;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.7;
}

@media (max-width:640px){
  .legal{padding:28px 0 12px;}
  .legal h2{font-size:16px;margin-top:28px;}
  .legal p,.legal-list li{font-size:14px;}
  .legal-lede{font-size:15px;padding:14px 15px;}
}


/* The support boxes are fixed height and cannot be dragged, so a
   scrollbar appearing partway through typing is just a bar that shows
   up and shoves the text sideways. Hidden, not disabled — the wheel,
   the arrow keys and the caret all still scroll the content. */
.tk-textarea,
.th-input{
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* legacy Edge */
}
.tk-textarea::-webkit-scrollbar,
.th-input::-webkit-scrollbar{
  width:0;height:0;display:none; /* Chrome, Safari */
}


/* Small note under a field — explains where to find a value
   without turning the label into a sentence. */
.tk-help{
  margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;
}

/* Dismiss a remembered reference. Small and quiet — it is an escape
   hatch, not an action anyone should be drawn to. */
.tk-ref-clear{
  font:inherit;font-size:15px;line-height:1;
  margin-left:6px;padding:2px 6px;
  border:0;background:transparent;color:var(--muted);
  cursor:pointer;border-radius:5px;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.tk-ref-clear:hover{color:var(--text);background:var(--surface-2);}

/* "Keep this page open" — reassurance while a payment is outstanding.
   Hidden the moment it confirms; telling someone to wait after they
   are already done is just noise. */
.pay-keep{
  margin:14px 0 0;
  font-size:13px;line-height:1.6;color:var(--muted);
  text-align:center;
}
.pay-keep strong{color:var(--text-2);font-weight:600;}