/*
Theme Name: RichAsians
Theme URI: https://richasians.example/
Author: Horizontal
Author URI: https://discord.gg/richasians
Description: Animated WooCommerce theme for the RichAsians Discord server - a Valorant Points top-up store. Red / black / white, notched Valorant-style panels, live Discord member counter, WhatsApp support button and one-click demo content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: richasians
Tags: e-commerce, one-column, two-columns, custom-menu, custom-logo, featured-images, translation-ready, full-width-template, blog
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --ink:#0B0B0F;          /* page base */
  --steel:#13131A;        /* raised panel */
  --steel-2:#1B1B24;      /* panel hover / borders */
  --vp-red:#FF4655;       /* main accent - Valorant red */
  --ember:#C6112A;        /* deep red, gradients + pressed states */
  --white:#FFFFFF;
  --muted:#9A9AA8;        /* secondary text */
  --hair:rgba(255,255,255,.09);
  --online:#57F287;       /* semantic only: Discord online dot */

  --f-display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --f-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0:clamp(.95rem,.92rem + .18vw,1.05rem);
  --step-1:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --step-4:clamp(2.9rem,1.9rem + 5vw,6.2rem);

  --gut:clamp(1.15rem,4vw,2rem);
  --wrap:1240px;
  --notch:18px;           /* corner cut size for panels */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--vp-red);text-decoration:none}
a:hover{color:var(--white)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--f-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.94}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}h4{font-size:var(--step-1)}
p{margin:0 0 1.1em}
::selection{background:var(--vp-red);color:var(--white)}
:focus-visible{outline:2px solid var(--vp-red);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:9999;background:var(--vp-red);
  color:#fff;padding:.7rem 1.1rem;clip:auto;width:auto;height:auto}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#08080B}
::-webkit-scrollbar-thumb{background:var(--ember);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--vp-red)}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.center{text-align:center}
.lead{font-size:var(--step-1);color:#D6D6E0;max-width:62ch}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* signature: notched panel, taken from the in-game store card corners */
.notch{
  background:var(--steel);border:1px solid var(--hair);position:relative;
  clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
}
.notch--red{border-color:rgba(255,70,85,.42)}

/* eyebrow label - carries data, not decoration */
.eyebrow{
  font-family:var(--f-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.22em;color:var(--vp-red);display:inline-flex;align-items:center;
  gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--vp-red)}
.eyebrow--plain::before{display:none}

.hair{height:1px;background:var(--hair);border:0;margin:0}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--vp-red);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--f-mono);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;border:0;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .25s var(--ease),background .25s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn:hover{background:var(--ember);color:#fff;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn::after{ /* shine sweep */
  content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}
.btn:hover::after{animation:ra-shine .7s var(--ease)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn--ghost:hover{--btn-bg:rgba(255,70,85,.14);box-shadow:inset 0 0 0 1px var(--vp-red)}
.btn--sm{padding:.65rem 1.1rem;font-size:.72rem}
.btn--block{width:100%}

/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */
.bar{ /* scroll progress */
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--ember),var(--vp-red));
}
.site-head{
  position:sticky;top:0;z-index:900;background:rgba(11,11,15,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
  transition:background .3s,border-color .3s;
}
.site-head.is-stuck{background:rgba(8,8,11,.94);border-color:rgba(255,70,85,.3)}
.site-head{overflow:visible}
.head-in{display:flex;align-items:center;gap:1rem;min-height:74px;overflow:visible;flex-wrap:nowrap}
.nav{min-width:0}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand__mark{width:38px;height:38px;flex:0 0 auto}
.brand__name{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;
  letter-spacing:.01em;color:var(--white);line-height:1}
.brand__name em{color:var(--vp-red);font-style:normal}
.brand__tag{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.28em;
  color:var(--muted);text-transform:uppercase;margin-top:3px}

.nav ul{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:.6rem .62rem;color:#D8D8E2;font-family:var(--f-mono);
  font-size:.73rem;letter-spacing:.07em;text-transform:uppercase;position:relative;
  white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:.62rem;right:.62rem;bottom:.35rem;height:2px;
  background:var(--vp-red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover,.nav .current-menu-item>a{color:var(--white)}
.nav a:hover::after,.nav .current-menu-item>a::after{transform:scaleX(1)}
.nav .sub-menu{display:none;position:absolute;min-width:210px;flex-direction:column;
  background:var(--steel);border:1px solid var(--hair);padding:.4rem;z-index:5}
.nav li:hover>.sub-menu{display:flex}
.nav li{position:relative}

.head-tools{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.cart-link{position:relative;display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--hair);color:#fff;transition:border-color .25s}
.cart-link:hover{border-color:var(--vp-red)}
.cart-link__count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;
  display:grid;place-items:center;background:var(--vp-red);color:#fff;
  font-family:var(--f-mono);font-size:.65rem;font-weight:700;border-radius:999px;padding:0 5px}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--hair);cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px auto;transition:.3s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1120px){
  .burger{display:block}
  .nav{position:fixed;inset:74px 0 auto 0;background:rgba(8,8,11,.98);
    border-bottom:1px solid var(--hair);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .nav.is-open{max-height:70vh;overflow-y:auto}
  .nav ul{flex-direction:column;align-items:stretch;padding:1rem var(--gut) 1.6rem;gap:0}
  .nav a{padding:.95rem 0;border-bottom:1px solid var(--hair);font-size:.9rem}
  .nav .sub-menu{display:flex;position:static;border:0;background:none;padding-left:1rem}
}

/* ==========================================================================
   6. HERO - the store terminal is the thesis of the page
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem)}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__glow{position:absolute;width:60vw;height:60vw;max-width:760px;max-height:760px;
  border-radius:50%;filter:blur(90px);opacity:.5}
.hero__glow--a{background:radial-gradient(circle,rgba(255,70,85,.55),transparent 65%);top:-18%;right:-12%}
.hero__glow--b{background:radial-gradient(circle,rgba(198,17,42,.4),transparent 65%);bottom:-25%;left:-15%}
.hero__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%)}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
@media(max-width:1000px){.hero__in{grid-template-columns:1fr}}
.hero h1{margin-bottom:.35em}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:block}
.hero h1 .hot{color:var(--vp-red)}
.hero__sub{font-size:var(--step-1);color:#CFCFDA;max-width:46ch}
.hero__type{font-family:var(--f-mono);color:var(--vp-red);font-size:.9rem;letter-spacing:.08em;
  min-height:1.5em;margin-bottom:1.6rem}
.hero__type .caret{display:inline-block;width:9px;background:var(--vp-red);
  animation:ra-blink 1s steps(1) infinite;color:transparent}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero__trust span{display:flex;align-items:center;gap:.45rem}
.hero__trust svg{width:15px;height:15px;color:var(--vp-red);flex:0 0 auto}

/* the terminal card */
.term{--notch:22px;padding:0;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.term__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;border-bottom:1px solid var(--hair);background:rgba(255,70,85,.07)}
.term__title{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.term__dot{display:flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.term__dot i{width:8px;height:8px;border-radius:50%;background:var(--online);
  box-shadow:0 0 0 0 rgba(87,242,135,.6);animation:ra-pulse 2.2s infinite}
.term__body{padding:1.3rem}
.term__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 0;border-bottom:1px dashed var(--hair);font-family:var(--f-mono);font-size:.82rem}
.term__row span:first-child{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}
.term__packs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0 1.2rem}
.term__pack{
  background:#0E0E14;border:1px solid var(--hair);color:#fff;padding:.75rem .3rem;
  font-family:var(--f-mono);font-size:.8rem;cursor:pointer;transition:.2s var(--ease);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.term__pack small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.1em;margin-top:2px}
.term__pack:hover{border-color:var(--vp-red);transform:translateY(-2px)}
.term__pack.is-on{background:var(--vp-red);border-color:var(--vp-red)}
.term__pack.is-on small{color:rgba(255,255,255,.8)}
.term__total{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:1.1rem 0}
.term__total b{font-family:var(--f-display);font-size:clamp(2.2rem,6vw,3rem);line-height:.9;color:var(--white)}
.term__total .cur{color:var(--vp-red)}
.term__note{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;text-align:center;margin-top:.9rem}

/* ==========================================================================
   7. MARQUEE (vouch ticker)
   ========================================================================== */
.ticker{border-block:1px solid var(--hair);background:#08080B;overflow:hidden;padding:.85rem 0}
.ticker__track{display:flex;gap:3rem;width:max-content;animation:ra-marquee 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#C9C9D4;white-space:nowrap}
.ticker__item b{color:var(--vp-red)}
.ticker__item::before{content:"";width:6px;height:6px;background:var(--vp-red);transform:rotate(45deg)}

/* ==========================================================================
   8. SECTION HEADS
   ========================================================================== */
.shead{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem);position:relative}
.shead--center{margin-inline:auto;text-align:center}
.shead h2{position:relative;display:inline-block}
.shead h2 .hot{color:var(--vp-red)}
.shead p{color:var(--muted);margin-bottom:0}
.shead__num{position:absolute;top:-.5em;right:0;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.2em;color:rgba(255,255,255,.18)}

/* ==========================================================================
   9. CARDS / FEATURES / STEPS
   ========================================================================== */
.card{--notch:16px;padding:1.6rem;transition:transform .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,70,85,.45)}
.card__ico{width:48px;height:48px;display:grid;place-items:center;background:rgba(255,70,85,.12);
  color:var(--vp-red);margin-bottom:1rem}
.card__ico svg{width:24px;height:24px}
.card h3{font-size:var(--step-1);margin-bottom:.4em}
.card p{color:var(--muted);margin-bottom:0;font-size:.95rem}

.step{position:relative;padding:1.6rem 1.6rem 1.6rem 4.4rem;--notch:16px}
.step__n{position:absolute;left:1.4rem;top:1.45rem;font-family:var(--f-display);font-size:2rem;
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--vp-red)}
.step h3{font-size:var(--step-1)}
.step p{color:var(--muted);margin-bottom:0;font-size:.95rem}
.step::after{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--vp-red);
  transition:height .5s var(--ease)}
.step:hover::after{height:100%}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  border:1px solid var(--hair);background:var(--steel)}
.stat{padding:1.8rem 1.4rem;text-align:center;border-right:1px solid var(--hair)}
.stat:last-child{border-right:0}
@media(max-width:760px){.stat{border-right:0;border-bottom:1px solid var(--hair)}}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(2.1rem,5vw,3rem);
  line-height:1;color:var(--vp-red)}
.stat span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}

/* ==========================================================================
   10. DISCORD SLIDER (members only)
   ========================================================================== */
.dc{position:relative;overflow:hidden}
.dc__panel{--notch:24px;padding:clamp(1.5rem,4vw,2.4rem)}
.dc__top{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:space-between;
  margin-bottom:1.6rem}
.dc__counts{display:flex;gap:2rem}
.dc__count b{display:block;font-family:var(--f-display);font-size:clamp(1.9rem,5vw,2.6rem);line-height:1}
.dc__count span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.dc__count--on b{color:var(--online)}
.dc__count--all b{color:var(--vp-red)}
.dc__rail{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dc__track{display:flex;gap:.8rem;width:max-content;animation:ra-marquee 40s linear infinite}
.dc__rail:hover .dc__track{animation-play-state:paused}
.dc__member{display:flex;align-items:center;gap:.7rem;padding:.6rem .95rem .6rem .6rem;
  background:#0E0E14;border:1px solid var(--hair);white-space:nowrap;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.dc__member img,.dc__member .ph{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--ember),var(--vp-red));display:grid;place-items:center;
  font-family:var(--f-display);font-size:.95rem;color:#fff}
.dc__member u{text-decoration:none;font-family:var(--f-mono);font-size:.76rem;color:#E6E6EE}
.dc__member i{width:7px;height:7px;border-radius:50%;background:var(--online);flex:0 0 auto}
.dc__note{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:1.2rem}

/* ==========================================================================
   11. PRICING TABLE
   ========================================================================== */
.ptable{width:100%;border-collapse:collapse;background:var(--steel);border:1px solid var(--hair)}
.ptable th,.ptable td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--hair);
  font-family:var(--f-mono);font-size:.85rem}
.ptable th{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  background:#0E0E14}
.ptable tbody tr{transition:background .2s}
.ptable tbody tr:hover{background:rgba(255,70,85,.07)}
.ptable .vp{color:#fff;font-weight:700}
.ptable .price{color:var(--vp-red);font-weight:700}
.ptable .save{color:var(--online)}
.ptable-scroll{overflow-x:auto}

.tier{--notch:18px;padding:1.7rem;display:flex;flex-direction:column;position:relative}
.tier--best{border-color:var(--vp-red);background:linear-gradient(180deg,rgba(255,70,85,.1),var(--steel) 55%)}
.tier__flag{position:absolute;top:0;right:0;background:var(--vp-red);color:#fff;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;padding:.35rem .7rem;text-transform:uppercase}
.tier h3{font-size:var(--step-1);margin-bottom:.2em}
.tier__vp{font-family:var(--f-display);font-size:2.6rem;line-height:1;color:var(--vp-red)}
.tier__vp small{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);letter-spacing:.16em}
.tier ul{list-style:none;margin:1.1rem 0 1.5rem;padding:0;display:grid;gap:.55rem}
.tier li{display:flex;gap:.6rem;font-size:.9rem;color:#C9C9D4}
.tier li::before{content:"";width:6px;height:6px;margin-top:.55em;background:var(--vp-red);
  transform:rotate(45deg);flex:0 0 auto}
.tier .btn{margin-top:auto}

/* ==========================================================================
   12. REVIEWS
   ========================================================================== */
.rev{--notch:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.rev__stars{display:flex;gap:3px;color:var(--vp-red)}
.rev__stars svg{width:16px;height:16px}
.rev__q{font-size:1rem;color:#E4E4EC;margin:0;flex:1}
.rev__who{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--hair);padding-top:.9rem}
.rev__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--ember),var(--vp-red));
  display:grid;place-items:center;font-family:var(--f-display);color:#fff;flex:0 0 auto}
.rev__name{font-family:var(--f-mono);font-size:.8rem;color:#fff;line-height:1.3}
.rev__meta{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.rev__slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}
.rev__slider>*{flex:0 0 min(360px,84%);scroll-snap-align:start}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--hair)}
.faq__item{border-bottom:1px solid var(--hair)}
.faq__q{width:100%;background:none;border:0;cursor:pointer;text-align:left;display:flex;
  align-items:center;gap:1rem;padding:1.25rem 0;color:#fff;font-family:var(--f-body);
  font-size:1.05rem;font-weight:500;transition:color .25s}
.faq__q:hover{color:var(--vp-red)}
.faq__q i{margin-left:auto;position:relative;width:16px;height:16px;flex:0 0 auto}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:var(--vp-red);
  transition:transform .3s var(--ease)}
.faq__q i::before{top:7px;left:0;width:16px;height:2px}
.faq__q i::after{left:7px;top:0;width:2px;height:16px}
.faq__item.is-open .faq__q i::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{color:var(--muted);padding-bottom:1.3rem;margin:0}

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */
.band{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--ember),#7C0A1B 55%,#0B0B0F);
  border-block:1px solid rgba(255,70,85,.4)}
.band::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 22px);
  animation:ra-stripes 14s linear infinite}
.band__in{position:relative;z-index:1;text-align:center;padding-block:clamp(3rem,7vw,5rem)}
.band h2{font-size:var(--step-3);margin-bottom:.4em}
.band p{color:rgba(255,255,255,.82);max-width:56ch;margin-inline:auto}
.band .btn{--btn-bg:#fff;--btn-fg:#0B0B0F}
.band .btn:hover{--btn-bg:#0B0B0F;--btn-fg:#fff}

/* ==========================================================================
   15. CONTACT
   ========================================================================== */
.contact{display:grid;gap:clamp(1.5rem,4vw,2.5rem);grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;background:#0E0E14;border:1px solid var(--hair);color:#fff;padding:.85rem 1rem;
  transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--vp-red);box-shadow:0 0 0 3px rgba(255,70,85,.16)}
.field textarea{min-height:150px;resize:vertical}
.ch{--notch:14px;display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.2rem;
  transition:border-color .3s,transform .3s var(--ease)}
.ch:hover{border-color:rgba(255,70,85,.5);transform:translateX(4px)}
.ch__ico{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,70,85,.12);color:var(--vp-red)}
.ch__ico svg{width:20px;height:20px}
.ch b{display:block;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:#fff}
.ch span{font-size:.88rem;color:var(--muted)}
.notice{--notch:12px;padding:.9rem 1.1rem;font-family:var(--f-mono);font-size:.78rem;margin-bottom:1.2rem}
.notice--ok{border-color:rgba(87,242,135,.5);color:#B8FFD1}
.notice--bad{border-color:rgba(255,70,85,.5);color:#FFC4C9}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-foot{background:#08080B;border-top:1px solid var(--hair);padding-top:clamp(2.5rem,6vw,4rem)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1.4fr repeat(3,1fr)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:.9rem;letter-spacing:.14em;margin-bottom:1.1rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-grid a{color:var(--muted);font-size:.9rem}
.foot-grid a:hover{color:var(--vp-red)}
.foot-about p{color:var(--muted);font-size:.9rem;max-width:38ch}
.socials{display:flex;gap:.6rem;margin-top:1.1rem}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair);
  color:#fff;transition:.25s var(--ease)}
.socials a:hover{border-color:var(--vp-red);color:var(--vp-red);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  border-top:1px solid var(--hair);margin-top:2.5rem;padding-block:1.4rem}
.foot-bottom p{margin:0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted)}
.foot-bottom .disclaimer{max-width:70ch;text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:.75rem}

/* back to top */
.totop{position:fixed;right:20px;bottom:96px;z-index:800;width:44px;height:44px;display:grid;
  place-items:center;background:var(--steel);border:1px solid var(--hair);color:#fff;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s var(--ease)}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{border-color:var(--vp-red);color:var(--vp-red)}

/* ==========================================================================
   17. 404 / PAGE HEADS / BLOG / COMMENTS
   ========================================================================== */
.phead{position:relative;padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--hair);overflow:hidden}
.phead::before{content:"";position:absolute;top:-40%;right:-10%;width:46vw;height:46vw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,70,85,.3),transparent 65%);filter:blur(70px)}
.phead__in{position:relative;z-index:1}
.crumbs{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--vp-red)}

.e404{min-height:72vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.e404__code{font-family:var(--f-display);font-size:clamp(6rem,26vw,18rem);line-height:.82;
  color:#fff;position:relative;display:inline-block}
.e404__code::before,.e404__code::after{content:attr(data-t);position:absolute;inset:0}
.e404__code::before{color:var(--vp-red);animation:ra-glitch-a 2.6s infinite steps(2)}
.e404__code::after{color:#00E5FF;opacity:.7;animation:ra-glitch-b 2.1s infinite steps(2)}
.e404__links{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}

.post-card{--notch:16px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.post-card:hover{transform:translateY(-6px);border-color:rgba(255,70,85,.45)}
.post-card__thumb{aspect-ratio:16/9;overflow:hidden;background:#0E0E14}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover .post-card__thumb img{transform:scale(1.06)}
.post-card__body{padding:1.3rem}
.post-card h3{font-size:var(--step-1);margin-bottom:.3em}
.post-card time{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.entry{max-width:74ch}
.entry img{margin-block:1.5rem}
.entry blockquote{margin:1.6rem 0;padding:1rem 1.4rem;border-left:3px solid var(--vp-red);
  background:var(--steel);color:#DCDCE6}
.entry ul,.entry ol{padding-left:1.3rem;color:#D2D2DC}
.entry li{margin-bottom:.5rem}
.entry h2,.entry h3{margin-top:1.8em}
.entry table{width:100%;border-collapse:collapse}
.entry th,.entry td{border:1px solid var(--hair);padding:.7rem}
.pagination{display:flex;gap:.5rem;margin-top:2.5rem;font-family:var(--f-mono);font-size:.8rem}
.pagination .page-numbers{padding:.6rem .95rem;border:1px solid var(--hair);color:#fff}
.pagination .current,.pagination a:hover{background:var(--vp-red);border-color:var(--vp-red);color:#fff}
.comment-list{list-style:none;padding:0}
.comment-list li{border:1px solid var(--hair);background:var(--steel);padding:1.2rem;margin-bottom:1rem}
.comment-form input,.comment-form textarea{width:100%;background:#0E0E14;border:1px solid var(--hair);
  color:#fff;padding:.8rem 1rem;margin-bottom:1rem}
.comment-form .submit{background:var(--vp-red);border:0;color:#fff;padding:.9rem 1.6rem;
  font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.14em;cursor:pointer}

/* WP core alignment classes */
.alignleft{float:left;margin:.4rem 1.5rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.5rem}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-block-image figcaption{font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}
.sticky,.bypostauthor{}

/* ==========================================================================
   16. REGION PICKER
   ========================================================================== */
.rgn{position:relative;flex:0 0 auto}
.rgn__toggle{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--steel-2);
  border:1px solid var(--hair);color:#fff;padding:.5rem .7rem;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.06em;
  transition:border-color .2s,background .2s;
}
.rgn__toggle:hover{border-color:rgba(255,70,85,.5);background:#20202a}
.rgn__toggle svg{width:15px;height:15px;color:var(--vp-red);flex:0 0 auto}
.rgn__now{font-weight:700}
.rgn__cur{color:var(--muted);font-size:.72em}
.rgn__chev{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--muted);transition:transform .25s;
}
.rgn.is-open .rgn__chev{transform:rotate(180deg)}

.rgn__menu{
  --notch:12px;position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:calc(100vw - 2rem);
  background:#101018;border:1px solid rgba(255,70,85,.3);padding:.5rem;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
  max-height:min(70vh,480px);overflow-y:auto;
}
.rgn.is-open .rgn__menu{opacity:1;visibility:visible;transform:none}
.rgn__hint{
  font-family:var(--f-mono);font-size:.7rem;line-height:1.5;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;padding:.5rem .6rem .7rem;margin:0;
  border-bottom:1px solid var(--hair);
}
.rgn__opt{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:.7rem;width:100%;
  background:none;border:0;border-left:2px solid transparent;color:#fff;text-align:left;
  padding:.6rem;cursor:pointer;transition:background .18s,border-color .18s;
}
.rgn__opt:hover:not(.is-out){background:rgba(255,70,85,.09);border-left-color:var(--vp-red)}
.rgn__opt.is-on{background:rgba(255,70,85,.14);border-left-color:var(--vp-red)}
.rgn__opt.is-out{opacity:.4;cursor:not-allowed}
.rgn__opt-code{font-weight:700;font-size:.8rem;color:var(--vp-red)}
.rgn__opt.is-out .rgn__opt-code{color:var(--muted)}
.rgn__opt-name{font-size:.9rem;line-height:1.2}
.rgn__opt-name small{display:block;color:var(--muted);font-size:.72rem;margin-top:.15rem}
.rgn__opt-cur{font-size:.7rem;color:var(--muted)}
.rgn--inline .rgn__menu{left:0;right:auto}
@media (max-width:860px){.rgn--head{display:none}}

/* the terminal's region row */
.term__region{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.02);
}
.term__region-label{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
}
.term__region-servers{font-size:.76rem;color:var(--muted);flex:1 1 100%;line-height:1.4}
.term__region .rgn__menu{left:0;right:auto}

/* price table region bar */
.ptable__bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.ptable__bar>span:first-child{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.ptable__note{font-size:.74rem;color:var(--muted)}

/* the little flip when a converted number changes */
.is-flip{animation:ra-flip .38s ease-out}

/* ==========================================================================
   17. ACCOUNT: header control
   ========================================================================== */
.acct-link{
  display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);
  font-family:var(--f-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;transition:color .2s;
}
.acct-link:hover{color:#fff}
.acct-link svg{width:15px;height:15px}

.acct{position:relative}
.acct__btn{
  display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--hair);
  color:#fff;padding:.3rem .6rem .3rem .3rem;cursor:pointer;transition:border-color .2s;
}
.acct__btn:hover{border-color:rgba(255,70,85,.5)}
.acct__pic{width:26px;height:26px;border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.acct__name{font-size:.82rem;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__dot{
  background:var(--vp-red);color:#fff;font-size:.64rem;font-weight:700;
  min-width:17px;height:17px;display:grid;place-items:center;padding:0 .25rem;
}
.acct__menu{
  --notch:12px;position:absolute;top:calc(100% + 8px);right:0;width:250px;background:#101018;
  border:1px solid rgba(255,70,85,.28);padding:.35rem;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.acct.is-open .acct__menu{opacity:1;visibility:visible;transform:none}
.acct__menu a{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;color:#DCDCE6;
  font-size:.88rem;border-left:2px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.acct__menu a:hover{background:rgba(255,70,85,.1);color:#fff;border-left-color:var(--vp-red)}
.acct__menu a svg{width:15px;height:15px;color:var(--vp-red);flex:0 0 auto}
.acct__menu a b{margin-left:auto;background:var(--vp-red);color:#fff;font-size:.68rem;padding:0 .35rem}
.acct__out{border-top:1px solid var(--hair);margin-top:.25rem;color:var(--muted)!important}
@media (max-width:620px){.acct__name{display:none}}

/* ==========================================================================
   18. SIGN IN / REGISTER
   ========================================================================== */
.auth{max-width:520px;margin-inline:auto}
.auth--page{margin-block:2rem}
.auth__tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:1.6rem;border-bottom:1px solid var(--hair)}
.auth__tab{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font-family:var(--f-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  padding:.85rem .5rem;cursor:pointer;transition:color .2s,border-color .2s;
}
.auth__tab:hover{color:#fff}
.auth__tab.is-on{color:#fff;border-bottom-color:var(--vp-red)}
.auth__form{display:none}
.auth__form.is-on{display:block;animation:ra-fade-up .4s ease-out both}
.auth__remember{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--muted);margin:.4rem 0 1.2rem}
.auth__alt{margin-top:1rem;font-size:.86rem;text-align:center}
.auth__alt a{color:var(--vp-red)}
.auth__alt--fine{color:var(--muted);font-size:.8rem;line-height:1.6}
.ra-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.acc-fields{border:1px solid var(--hair);padding:1.2rem;margin:1.5rem 0}
.acc-fields legend{
  font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--vp-red);padding:0 .5rem;
}
.acc-fields__note{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}

/* ==========================================================================
   19. ACCOUNT AREA
   ========================================================================== */
.acc-hi h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .3rem}
.acc-hi p{font-size:.78rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.8rem}

.acc-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:2rem}
.acc-sum__cell{--notch:12px;padding:1.1rem 1.2rem}
.acc-sum__cell span{
  display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:.4rem;
}
.acc-sum__cell b{font-family:var(--f-display);font-size:1.9rem;font-weight:400;line-height:1;color:#fff}
.acc-sum__cell b .woocommerce-Price-amount{font-family:var(--f-display)}

.acc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2rem}
.acc-card{--notch:14px;padding:1.4rem;display:block;transition:transform .3s,border-color .3s}
.acc-card:hover{transform:translateY(-4px);border-color:rgba(255,70,85,.45)}
.acc-card svg{width:24px;height:24px;color:var(--vp-red);margin-bottom:.7rem}
.acc-card h3{font-size:1.15rem;margin:0 0 .4rem}
.acc-card p{font-size:.86rem;color:var(--muted);margin:0;line-height:1.55}

.acc-empty{--notch:16px;padding:2.6rem 1.6rem;text-align:center}
.acc-empty svg{width:34px;height:34px;color:var(--vp-red);opacity:.7;margin-bottom:.9rem}
.acc-empty h3{margin:0 0 .5rem}
.acc-empty p{color:var(--muted);max-width:46ch;margin:0 auto 1.3rem;line-height:1.6}

/* ==========================================================================
   20. VP CODES
   ========================================================================== */
.keys-list{display:grid;gap:1rem}
.keyrow{--notch:14px;padding:1.2rem 1.3rem}
.keyrow.is-wait{border-color:rgba(255,255,255,.12)}
.keyrow__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.keyrow__head h3{font-size:1.05rem;margin:0 0 .3rem}
.keyrow__meta{font-size:.74rem;color:var(--muted)}
.keyrow__meta a{color:var(--vp-red)}
.keyrow__vp{
  font-size:.8rem;font-weight:700;color:var(--vp-red);border:1px solid rgba(255,70,85,.35);
  padding:.25rem .6rem;white-space:nowrap;
}
.keyrow__wait{
  display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--muted);
  margin:.9rem 0 0;line-height:1.5;
}
.keyrow__wait svg{width:16px;height:16px;color:var(--vp-red);flex:0 0 auto}

.ra-keys{margin-top:.9rem;display:grid;gap:.5rem}
.ra-keys__label{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
}
.ra-keys--wait{font-size:.8rem;color:var(--muted)}
.ra-key{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  background:rgba(0,0,0,.35);border:1px solid var(--hair);padding:.5rem .6rem;
  transition:border-color .2s,opacity .2s;
}
.ra-key:hover{border-color:rgba(255,70,85,.3)}
.ra-key.is-used{opacity:.5}
.ra-key.is-used .ra-key__code{text-decoration:line-through}
.ra-key__code{
  flex:1 1 14ch;font-size:.9rem;letter-spacing:.06em;color:#fff;user-select:all;
  transition:color .2s;
}
.ra-key__code.is-open{color:var(--vp-red)}
.ra-key__btn{
  background:none;border:1px solid var(--hair);color:var(--muted);cursor:pointer;
  font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.3rem .55rem;transition:color .18s,border-color .18s,background .18s;
}
.ra-key__btn:hover{color:#fff;border-color:var(--vp-red)}
.ra-key__btn.is-done{color:var(--online);border-color:var(--online)}
.ra-key__btn--tick{margin-left:auto}
.ra-keys__how,.keys-note{
  font-size:.78rem;color:var(--muted);line-height:1.6;margin:.7rem 0 0;
  display:flex;gap:.6rem;align-items:flex-start;
}
.keys-note{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
.keys-note svg{width:16px;height:16px;color:var(--vp-red);flex:0 0 auto;margin-top:.15rem}

.ra-pill{
  display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.22rem .5rem;border:1px solid var(--hair);white-space:nowrap;
}
.ra-pill--ok{color:var(--online);border-color:rgba(87,242,135,.4)}
.ra-pill--part{color:#FFD166;border-color:rgba(255,209,102,.4)}
.ra-pill--wait{color:var(--muted)}

/* ==========================================================================
   21. TICKETS
   ========================================================================== */
.tix{display:grid;gap:1.1rem}
.tix__item{--notch:14px;padding:1.3rem}
.tix__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.tix__num{
  font-size:.7rem;letter-spacing:.14em;color:var(--vp-red);display:block;margin-bottom:.25rem;
}
.tix__head h3{font-size:1.08rem;margin:0 0 .25rem}
.tix__meta{font-size:.72rem;color:var(--muted)}
.tix__status{
  font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  padding:.28rem .6rem;border:1px solid var(--hair);white-space:nowrap;
}
.tix__status--open{color:var(--online);border-color:rgba(87,242,135,.4)}
.tix__status--waiting{color:#FFD166;border-color:rgba(255,209,102,.4)}
.tix__status--closed{color:var(--muted)}
.tix__body{margin-top:1rem;font-size:.92rem;line-height:1.65;color:#D2D2DC}
.tix__body>p{margin:0 0 .8rem}
.tix__reply{border-left:2px solid rgba(255,70,85,.4);padding:.2rem 0 .2rem .9rem;margin:.8rem 0}
.tix__reply span{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  display:block;margin-bottom:.2rem;
}
.tix__reply p{margin:0}
.tix__form{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--hair)}
.tix__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}

/* account sign-in page + non-Woo fallback */
.acclogin{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
@media(max-width:900px){.acclogin{grid-template-columns:1fr;gap:2rem}}
.acclogin__form h2{font-size:clamp(2rem,4.5vw,3rem);margin:0 0 1.4rem}
.acclogin__form .auth{margin-inline:0}
.acclogin__why{--notch:16px;padding:1.8rem}
.acclogin__why h3{font-size:1.15rem;margin:0 0 1.2rem}
.acclogin__list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.acclogin__list li{display:flex;gap:.85rem;align-items:flex-start}
.acclogin__list svg{width:20px;height:20px;color:var(--vp-red);flex:0 0 auto;margin-top:.15rem}
.acclogin__list strong{display:block;font-size:.94rem;margin-bottom:.2rem}
.acclogin__list p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.55}
.acclogin__note{
  font-size:.78rem;color:var(--muted);line-height:1.6;margin:1.4rem 0 1.2rem;
  padding-top:1.2rem;border-top:1px solid var(--hair);
}

.accfall{display:grid;grid-template-columns:220px 1fr;gap:2.4rem;align-items:start}
@media(max-width:880px){.accfall{grid-template-columns:1fr}}
.accfall__nav{display:grid;border:1px solid var(--hair)}
.accfall__nav a{
  padding:.8rem 1rem;color:var(--muted);font-family:var(--f-mono);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--hair);
  border-left:2px solid transparent;transition:color .2s,background .2s,border-color .2s;
}
.accfall__nav a:last-child{border-bottom:0}
.accfall__nav a:hover{color:#fff;background:rgba(255,255,255,.03)}
.accfall__nav a.is-on{color:#fff;background:rgba(255,70,85,.1);border-left-color:var(--vp-red)}

/* ==========================================================================
   22. SEARCH
   ========================================================================== */
.srchwrap{position:relative;flex:0 0 auto}
.srchwrap__btn{
  display:grid;place-items:center;width:36px;height:36px;background:none;
  border:1px solid var(--hair);color:var(--muted);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.srchwrap__btn:hover,.srchwrap.is-open .srchwrap__btn{
  color:#fff;border-color:rgba(255,70,85,.5);background:rgba(255,70,85,.08);
}
.srchwrap__btn svg{width:16px;height:16px}
.srchwrap__panel{
  position:absolute;top:calc(100% + 8px);right:0;width:min(420px,calc(100vw - 2rem));
  opacity:0;visibility:hidden;transform:translateY(-8px);z-index:70;
  transition:opacity .24s,transform .24s,visibility .24s;
}
.srchwrap.is-open .srchwrap__panel{opacity:1;visibility:visible;transform:none}

.srch{position:relative;display:flex;gap:.5rem}
.srch__field{
  position:relative;flex:1;display:flex;align-items:center;gap:.5rem;
  background:#101018;border:1px solid var(--hair);padding:0 .7rem;min-width:0;
  transition:border-color .2s;
}
.srch__field:focus-within{border-color:var(--vp-red)}
.srch__field>svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto}
.srch__field:focus-within>svg{color:var(--vp-red)}
.srch input[type="search"]{
  flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;font-size:.92rem;
  padding:.7rem 0;outline:none;-webkit-appearance:none;appearance:none;
}
.srch input[type="search"]::placeholder{color:var(--muted)}
.srch input[type="search"]::-webkit-search-cancel-button{display:none}
.srch__clear{
  background:none;border:0;color:var(--muted);font-size:1.25rem;line-height:1;
  cursor:pointer;padding:0 .2rem;transition:color .2s;
}
.srch__clear:hover{color:#fff}
.srch__go{
  background:var(--vp-red);border:0;color:#fff;cursor:pointer;padding:0 1rem;
  font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  transition:background .2s;
}
.srch__go:hover{background:var(--ember)}
.srch--head .srch__go{padding:0 .85rem}

/* the suggestion list */
.srch__out{
  --notch:12px;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0E0E15;
  border:1px solid rgba(255,70,85,.28);padding:.4rem;z-index:80;
  max-height:min(70vh,460px);overflow-y:auto;
  animation:ra-fade-up .22s ease-out both;
}
.srch__group{padding:.2rem 0}
.srch__group+.srch__group{border-top:1px solid var(--hair);margin-top:.2rem}
.srch__label{
  display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);padding:.5rem .6rem .35rem;
}
.srch__hit{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.55rem .6rem;color:#DCDCE6;border-left:2px solid transparent;
  transition:background .16s,color .16s,border-color .16s;
}
.srch__hit:hover,.srch__hit.is-at{background:rgba(255,70,85,.1);color:#fff;border-left-color:var(--vp-red)}
.srch__hit-t{font-size:.9rem;line-height:1.35}
.srch__hit-m{font-size:.7rem;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.srch__hit--vp .srch__hit-t{font-family:var(--f-mono);font-weight:700;color:var(--vp-red)}
.srch__hit--vp.is-at .srch__hit-t,.srch__hit--vp:hover .srch__hit-t{color:#fff}
.srch__hit--faq .srch__hit-m{white-space:normal;text-align:right;max-width:16ch}
.srch__all{
  display:block;text-align:center;padding:.65rem;margin-top:.2rem;
  border-top:1px solid var(--hair);color:var(--vp-red);
  font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  transition:background .16s;
}
.srch__all:hover,.srch__all.is-at{background:rgba(255,70,85,.1)}
.srch__none{
  padding:.9rem .7rem;margin:0;font-size:.84rem;color:var(--muted);
}

/* on small screens the header search takes the full width under the bar */
@media (max-width:860px){
  .srchwrap__panel{
    position:fixed;top:74px;left:1rem;right:1rem;width:auto;
  }
  .srch__out{max-height:60vh}
}

/* the "closest pack" shortcut on the results page */
.srchvp{
  --notch:14px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:1rem;padding:1.1rem 1.3rem;margin-bottom:2rem;background:var(--steel);
  border:1px solid rgba(255,70,85,.42);transition:transform .3s,background .3s;
}
.srchvp:hover{transform:translateY(-3px);background:#1e1e28}
.srchvp__k{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
}
.srchvp__t{font-family:var(--f-display);font-size:1.7rem;line-height:1;color:#fff}
.srchvp__m{font-size:.78rem;color:var(--vp-red)}
.srchvp__go svg{width:20px;height:20px;color:var(--vp-red)}
@media(max-width:640px){
  .srchvp{grid-template-columns:1fr auto;gap:.4rem 1rem}
  .srchvp__k{grid-column:1/-1}
}

/* ==========================================================================
   23. DESKTOP HEADER FIT
   The header carries brand, nav, search, region, account, cart and Buy VP.
   On a 1280px laptop that is a lot of horizontal budget, so the middle tier
   drops the least useful text before anything is allowed to overflow.
   ========================================================================== */
@media (min-width:1121px) and (max-width:1360px){
  .brand__tag{display:none}
  .brand__name{font-size:1.2rem}
  .rgn--head .rgn__cur{display:none}          /* keep the code, drop the ISO */
  .acct__name{display:none}
  .nav a{padding:.6rem .5rem;font-size:.7rem;letter-spacing:.04em}
  .cart-link{width:38px;height:38px}
}

/* Below the burger threshold the nav leaves the flow, so the tools have the
   row to themselves — but the region picker still needs to go on phones. */
@media (max-width:1120px){
  .head-in{gap:.75rem}
}

/* The dropdowns hang off the header, so nothing above them may clip. */
.site-head,.head-in,.head-tools{overflow:visible}
.srchwrap,.rgn,.acct{position:relative}

/* ==========================================================================
   24. ACCOUNT PAGE LAYOUT FIXES
   ========================================================================== */
/* WooCommerce prints notices as siblings of the nav and content, so without
   this a notice claims the 240px nav column and shunts the layout sideways. */
/* superseded by the :has() rule in section 25 */

/* A grid item defaults to min-width:auto, so one unbreakable code string can
   widen the content column and push the whole page out. */
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation{min-width:0}
.woocommerce-MyAccount-content table{max-width:100%}

.ra-key{flex-wrap:wrap}
.ra-key__code{
  min-width:0;overflow-wrap:anywhere;word-break:break-all;
}
.keyrow__head,.tix__head{min-width:0}
.keyrow__meta,.tix__meta{overflow-wrap:anywhere}

/* Wide tables get to scroll rather than break the column. */
.woocommerce-MyAccount-content .woocommerce-orders-table{display:table;width:100%}
@media (min-width:721px){
  .woocommerce-MyAccount-content .woocommerce-orders-table{table-layout:auto}
  .woocommerce-orders-table th,.woocommerce-orders-table td{white-space:nowrap}
  .woocommerce-orders-table__cell-order-number{white-space:nowrap}
}

/* If a shop owner adds more menu items than the demo's seven, the header grows
   a second row instead of pushing the page sideways. Never overflow. */
.nav ul{flex-wrap:wrap}
@media (max-width:1120px){.nav ul{flex-wrap:nowrap}}

/* ==========================================================================
   25. INTERFACES ARE NOT PROSE
   .entry is capped at a 74ch reading measure, which is correct for Terms and
   Privacy and wrong for anything with a layout of its own. WooCommerce pages
   are ordinary pages holding a shortcode, so they inherit that cap and get
   crushed into a column. This releases it.
   ========================================================================== */
.entry--wide{max-width:none}

/* Belt and braces: if a Woo block turns up inside .entry on any other page,
   drop the cap there too rather than squeezing it. */
.entry:has(.woocommerce),
.entry:has(.woocommerce-MyAccount-navigation),
.entry:has(.ra-keys),
.entry:has(.tix),
.entry:has(.acc-sum){max-width:none}

/* The account grid no longer depends on a body class, so it works whether the
   page is Woo's own or one built from the Account template. */
.woocommerce:has(> .woocommerce-MyAccount-navigation){
  display:grid;grid-template-columns:minmax(215px,250px) minmax(0,1fr);
  gap:2.4rem;align-items:start;
}
.woocommerce-MyAccount-navigation{grid-column:1}
.woocommerce-MyAccount-content{grid-column:2}
.woocommerce:has(> .woocommerce-MyAccount-navigation) > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content){
  grid-column:1/-1;
}
@media (max-width:880px){
  .woocommerce:has(> .woocommerce-MyAccount-navigation){grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .woocommerce-MyAccount-navigation,.woocommerce-MyAccount-content{grid-column:1}
}

/* Browsers without :has() still get the two columns via the body class. */
@supports not selector(:has(*)){
  body.woocommerce-account .woocommerce{
    display:grid;grid-template-columns:minmax(215px,250px) minmax(0,1fr);
    gap:2.4rem;align-items:start;
  }
  @media (max-width:880px){
    body.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr)}
  }
}

/* ==========================================================================
   26. CATEGORY GRID (home buy area)
   ========================================================================== */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.cat{--notch:16px;display:block;overflow:hidden;transition:transform .35s,border-color .35s}
.cat:hover{transform:translateY(-5px);border-color:rgba(255,70,85,.5)}
.cat__img{
  display:block;height:170px;background:#15151d center/cover no-repeat;position:relative;
}
.cat__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,15,.15),rgba(11,11,15,.85));
}
.cat__img--none{display:grid;place-items:center;background:linear-gradient(135deg,#16161f,#241016)}
.cat__img--none svg{width:34px;height:34px;color:var(--vp-red);opacity:.65;position:relative;z-index:1}
.cat__body{display:block;padding:1.2rem 1.3rem 1.4rem}
.cat__count{
  display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--vp-red);margin-bottom:.45rem;
}
.cat h3{font-size:1.35rem;margin:0 0 .45rem;color:#fff}
.cat__desc{display:block;font-size:.86rem;color:var(--muted);line-height:1.55;margin-bottom:.9rem}
.cat__go{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:#fff;
}
.cat__go svg{width:14px;height:14px;color:var(--vp-red);transition:transform .3s}
.cat:hover .cat__go svg{transform:translateX(4px)}
.cats__foot{margin-top:1.8rem;text-align:center}

/* ==========================================================================
   27. BANK TRANSFER PANEL
   ========================================================================== */
.rabank{margin-top:.6rem}
.rabank__intro{font-size:.9rem;color:var(--muted);margin:0 0 .9rem}
.rabank__warn{
  font-size:.86rem;color:#FFD166;background:rgba(255,209,102,.08);
  border-left:2px solid #FFD166;padding:.7rem .9rem;margin:0;
}
.rabank__card{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,70,85,.28);
  padding:1rem 1.1rem;margin-bottom:.8rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.rabank__head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid var(--hair);
}
.rabank__bank{
  font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;
}
.rabank__n{font-size:.7rem;color:var(--muted)}
.rabank__rows{margin:0;display:grid;gap:.5rem}
.rabank__row{
  display:grid;grid-template-columns:minmax(110px,34%) 1fr;align-items:center;gap:.8rem;
}
.rabank__row dt{
  font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);
}
.rabank__row dd{margin:0;display:flex;align-items:center;gap:.5rem;min-width:0}
.rabank__row code{
  font-size:.94rem;letter-spacing:.04em;color:#fff;background:none;padding:0;
  overflow-wrap:anywhere;user-select:all;
}
.rabank__copy{
  background:none;border:1px solid var(--hair);color:var(--muted);cursor:pointer;
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.22rem .45rem;flex:0 0 auto;transition:color .18s,border-color .18s;
}
.rabank__copy:hover{color:#fff;border-color:var(--vp-red)}
.rabank__copy.is-done{color:var(--online);border-color:var(--online)}
.rabank__steps{
  margin:1rem 0 1.2rem;padding-left:1.2rem;font-size:.86rem;color:var(--muted);line-height:1.6;
}
.rabank__steps li{margin-bottom:.3rem}
.rabank__steps li::marker{color:var(--vp-red);font-family:var(--f-mono);font-size:.8rem}

/* ---- payment screenshot ---- */
.raproof{margin-top:1rem}
.raproof__label{
  display:block;font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:.5rem;
}
.raproof__label small{text-transform:none;letter-spacing:0;font-size:.8em;margin-left:.3rem}
.raproof__label .required{color:var(--vp-red);text-decoration:none;margin-left:.2rem}
.raproof__drop{
  display:block;border:1px dashed rgba(255,255,255,.22);background:rgba(0,0,0,.25);
  padding:1.3rem 1rem;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.raproof__drop:hover{border-color:var(--vp-red);background:rgba(255,70,85,.06)}
.raproof__drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.raproof__inner{display:grid;justify-items:center;gap:.3rem}
.raproof__inner svg{width:22px;height:22px;color:var(--vp-red)}
.raproof__inner b{font-size:.92rem;color:#fff;font-weight:600;overflow-wrap:anywhere}
.raproof__inner small{font-size:.74rem;color:var(--muted)}
.raproof__preview{margin-top:.7rem;border:1px solid var(--hair);padding:.5rem}
.raproof__preview img{max-height:200px;width:auto;margin-inline:auto}
.raproof__meta{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.5rem;font-size:.74rem;color:var(--muted);
}
.raproof__meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raproof__x{
  background:none;border:0;color:var(--vp-red);cursor:pointer;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.1em;font-family:var(--f-mono);flex:0 0 auto;
}
.raproof__note{font-size:.8rem;color:var(--online);margin:.6rem 0 0;line-height:1.5}
.raproof__note.is-bad{color:var(--vp-red)}
.raproof__note:empty{display:none}

/* ==========================================================================
   28. MOBILE PASS
   Phones get their own set of decisions rather than a shrunken desktop.
   ========================================================================== */
@media (max-width:640px){
  :root{--gut:1rem}

  /* nothing may cause a sideways scroll */
  html,body{max-width:100%;overflow-x:hidden}

  /* the terminal is the main event, so it gets the room */
  .term__region{padding:.8rem .9rem;gap:.5rem}
  .term__region .rgn__toggle{padding:.45rem .55rem}
  .term__region-servers{font-size:.7rem}
  .term__packs{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .term__pack{padding:.6rem .4rem}
  .term__out b{font-size:2.1rem}
  .term__row{font-size:.8rem}

  /* region menu becomes a sheet rather than a cramped dropdown */
  .rgn__menu{
    position:fixed;left:.75rem;right:.75rem;top:auto;bottom:.75rem;width:auto;
    max-height:64vh;
  }
  .rgn__opt{grid-template-columns:46px 1fr;gap:.5rem;padding:.7rem .5rem}
  .rgn__opt-cur{grid-column:2;font-size:.64rem}

  /* account drop-down, same treatment */
  .acct__menu{position:fixed;left:.75rem;right:.75rem;top:auto;bottom:.75rem;width:auto}
  .acct__menu a{padding:.8rem .7rem;font-size:.92rem}

  /* search panel */
  .srchwrap__panel{top:64px;left:.75rem;right:.75rem}
  .srch__go span{display:none}
  .srch__go::after{content:"→"}
  .srch__go{padding:0 .8rem}
  .srch__hit{flex-direction:column;align-items:flex-start;gap:.15rem}
  .srch__hit-m{white-space:normal}

  /* tables scroll instead of squashing */
  .ptable-wrap,.woocommerce-orders-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ptable{min-width:620px}

  /* account area */
  .acc-sum{grid-template-columns:1fr 1fr;gap:.6rem}
  .acc-sum__cell{padding:.85rem .9rem}
  .acc-sum__cell b{font-size:1.5rem}
  .acc-cards{grid-template-columns:1fr;gap:.7rem}
  .acc-card{padding:1.1rem}
  .acc-hi h2{font-size:1.9rem}

  /* codes: stack the buttons under the code so nothing is 20px wide */
  .ra-key{gap:.4rem}
  .ra-key__code{flex:1 1 100%;font-size:.82rem}
  .ra-key__btn{flex:1 1 auto;text-align:center;padding:.42rem .3rem}
  .ra-key__btn--tick{margin-left:0}
  .keyrow{padding:1rem}
  .keyrow__head{gap:.5rem}
  .keyrow__vp{font-size:.72rem}

  /* tickets */
  .tix__item{padding:1rem}
  .tix__head{gap:.5rem}
  .tix__status{align-self:flex-start}
  .tix__actions{flex-direction:column}
  .tix__actions .btn{width:100%;justify-content:center}

  /* sign in */
  .acclogin{gap:1.4rem}
  .acclogin__why{padding:1.2rem}
  .auth__tab{font-size:.72rem;letter-spacing:.08em;padding:.75rem .3rem}
  .auth .grid.g-2{grid-template-columns:1fr!important}

  /* categories */
  .cats{grid-template-columns:1fr;gap:.9rem}
  .cat__img{height:140px}

  /* bank panel */
  .rabank__card{padding:.85rem}
  .rabank__row{grid-template-columns:1fr;gap:.15rem}
  .rabank__row dd{justify-content:space-between}
  .rabank__bank{font-size:1rem}
  .raproof__drop{padding:1rem .7rem}

  /* buttons are thumb targets, not mouse targets */
  .btn{min-height:46px}
  .srchwrap__btn,.rgn__toggle,.acct__btn{min-height:40px}

  /* the footer stops pretending to be four columns */
  .foot__grid{grid-template-columns:1fr;gap:1.8rem}
}

@media (max-width:400px){
  .term__packs{grid-template-columns:1fr 1fr}
  .acc-sum{grid-template-columns:1fr}
  .head-tools{gap:.35rem}
  .brand__name{font-size:1.05rem}
}

/* iOS zooms the page in when a font under 16px gets focus. */
@media (max-width:860px){
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=password],input[type=search],select,textarea{font-size:16px}
}

/* ==========================================================================
   29. MOBILE HEADER
   The bar holds brand, search, cart and burger. Everything else moves into
   the menu, where there is room for it.
   ========================================================================== */

/* The brand must be able to shrink, and must never wrap onto two lines. */
.brand{min-width:0}
.brand>span{min-width:0}
.brand__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.brand__tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The block inside the menu. Hidden until the burger takes over. */
.nav__extra{display:none}

@media (max-width:1120px){
  .nav__extra{
    display:block;padding:1.2rem var(--gut) 1.6rem;border-top:1px solid var(--hair);
    margin-top:.5rem;
  }
  .nav__extra-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
  .nav__extra-label{
    font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  }
  .rgn--nav .rgn__menu{left:0;right:auto;width:min(320px,calc(100vw - 3rem))}
  .nav__extra-links{display:grid;gap:.15rem;margin-bottom:1.2rem}
  .nav__extra-links a{
    display:flex;align-items:center;gap:.7rem;padding:.7rem .2rem;color:#D8D8E2;
    font-size:.95rem;border-bottom:1px solid var(--hair);
  }
  .nav__extra-links a:last-child{border-bottom:0}
  .nav__extra-links svg{width:16px;height:16px;color:var(--vp-red);flex:0 0 auto}
}

@media (max-width:860px){
  /* The account control moves into the menu, so the bar loses it. */
  .head-tools .acct,
  .head-tools .acct-link{display:none}
  .brand__tag{display:none}
  .brand__name{font-size:1.15rem}
}

@media (max-width:640px){
  .head-in{min-height:62px;gap:.5rem}
  .head-tools{gap:.35rem}

  /* Buy VP is the first thing in the menu, so the bar does not need it too. */
  .head-tools>.btn{display:none}

  .brand{gap:.5rem}
  .brand__name{font-size:1.1rem;letter-spacing:0}
  .brand svg,.brand img,.custom-logo{width:30px;height:30px}

  .srchwrap__btn{width:34px;height:34px}
  .cart-link{width:34px;height:34px}
  .burger{width:38px;height:38px}

  /* Panels line up under the shorter bar. */
  .srchwrap__panel{top:58px}
  .nav{top:62px}
}

@media (max-width:380px){
  .brand__name{font-size:1rem}
  .brand svg,.brand img,.custom-logo{width:26px;height:26px}
  .head-tools{gap:.25rem}
}

/* The menu is taller now it carries the region and account links. */
@media (max-width:1120px){
  .nav.is-open{max-height:calc(100vh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* .nav a in the burger block would otherwise flatten the Buy VP button. */
  .nav__extra .btn{
    padding:.9rem 1.2rem;border-bottom:0;font-size:.78rem;
    justify-content:center;
  }
  .nav__extra .rgn__toggle{border-bottom:0;padding:.5rem .7rem}
  .nav__extra .rgn__opt{border-bottom:0}
}
@media (max-width:640px){
  .nav.is-open{max-height:calc(100vh - 62px)}
}

/* ==========================================================================
   30. BANK PANEL IN THE BLOCK CHECKOUT
   The block checkout has its own light-on-dark card styling, so the panel
   needs to sit in it without looking bolted on.
   ========================================================================== */
.rabank--blocks{
  margin:1rem 0 0;padding:1rem;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,70,85,.28);
}
.wc-block-checkout .rabank__bank,
.rabank--blocks .rabank__bank{font-size:1.05rem}
.wc-block-checkout .rabank__row code,
.rabank--blocks .rabank__row code{color:#fff}
.rabank--blocks .rabank__card{background:rgba(255,255,255,.03)}

/* Place Order is held until the screenshot is attached, and says why. */
.ra-blocked{opacity:.5;cursor:not-allowed;position:relative}
.wc-block-components-checkout-place-order-button.ra-blocked::after{
  content:attr(data-ra-why);
}

/* The block checkout renders light by default; keep our fields legible. */
.wc-block-checkout .raproof__drop{border-color:rgba(255,255,255,.28)}
.wc-block-checkout .raproof__inner b{color:#fff}
.wc-block-checkout .rabank__steps{color:var(--muted)}

@media (max-width:640px){
  .rabank--blocks{padding:.8rem}
}

/* ticket log: staff, you, and status changes read differently */
.tix__reply--staff{border-left-color:var(--online)}
.tix__reply--system{
  border-left-color:var(--muted);opacity:.75;font-size:.86rem;
}
.tix__reply--system p{font-style:italic}

/* live indicator above the ticket list */
.tix__live{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);
}
.tix__live i{
  width:7px;height:7px;border-radius:50%;background:var(--online);
  animation:ra-pulse 2s ease-in-out infinite;
}
.tix__live.is-new{color:var(--online)}
.tix__live.is-new i{background:var(--vp-red);animation-duration:.6s}
@media(prefers-reduced-motion:reduce){.tix__live i{animation:none}}

/* the sign-in gate explanation */
.notice--gate{
  border-left:3px solid var(--vp-red);background:rgba(255,70,85,.07);
  margin-bottom:1.6rem;line-height:1.6;
}
.notice--gate strong{display:block;margin-bottom:.3rem;color:#fff}

/* ==========================================================================
   31. TICKET ATTACHMENTS
   ========================================================================== */
.raatt{margin:.9rem 0 1.1rem}
.raatt__label{
  display:block;font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:.5rem;
}
.raatt__label small{
  text-transform:none;letter-spacing:0;font-size:.85em;margin-left:.4rem;opacity:.75;
}
.raatt input[type="file"]{
  display:block;width:100%;background:rgba(0,0,0,.3);border:1px dashed rgba(255,255,255,.2);
  color:var(--muted);font:inherit;font-size:.82rem;padding:.7rem;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.raatt input[type="file"]:hover{border-color:var(--vp-red);background:rgba(255,70,85,.05)}
.raatt input[type="file"]::file-selector-button{
  background:var(--steel-2);border:1px solid var(--hair);color:#fff;font:inherit;
  font-size:.74rem;padding:.4rem .7rem;margin-right:.7rem;cursor:pointer;
}
.raatt input[type="file"]::file-selector-button:hover{border-color:var(--vp-red)}
.raatt__hint{
  display:block;font-size:.74rem;color:var(--muted);margin-top:.45rem;line-height:1.5;
}
.raatt__hint.is-bad{color:var(--vp-red)}
.raatt__list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem}
.raatt__item{
  display:flex;align-items:center;gap:.6rem;background:rgba(0,0,0,.3);
  border:1px solid var(--hair);padding:.4rem .55rem;font-size:.76rem;color:#DCDCE6;
}
.raatt__item img{width:34px;height:34px;object-fit:cover;flex:0 0 auto}
.raatt__item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* files already on a ticket */
.tixfiles{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 .2rem}
.tixfile{
  display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.32);
  border:1px solid var(--hair);padding:.35rem .55rem .35rem .35rem;max-width:100%;
  transition:border-color .2s;
}
.tixfile:hover{border-color:var(--vp-red)}
.tixfile img{width:44px;height:44px;object-fit:cover;flex:0 0 auto}
.tixfile--doc{padding:.5rem .7rem}
.tixfile--doc svg{width:18px;height:18px;color:var(--vp-red)}
.tixfile__meta{
  font-size:.72rem;color:#DCDCE6;line-height:1.3;overflow:hidden;
  display:flex;flex-direction:column;
}
.tixfile__meta small{color:var(--muted);font-size:.9em}

@media (max-width:640px){
  .tixfile{width:100%}
  .raatt input[type="file"]{font-size:.78rem}
}

/* ---- code rows with confirmation ---- */
.ra-key{flex-wrap:wrap;align-items:flex-start}
.ra-key__acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-left:auto}
.ra-key.is-ok{border-color:rgba(87,242,135,.35)}
.ra-key__btn--good:hover{color:var(--online);border-color:var(--online)}
.ra-key__btn--bad:hover{color:var(--vp-red);border-color:var(--vp-red)}
.ra-key__ok{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--online);
  border:1px solid rgba(87,242,135,.4);padding:.3rem .5rem;
}
.ra-key__ok::before{content:"✓";font-size:.9em}
.ra-key__say{
  flex:1 1 100%;margin:.4rem 0 0;font-size:.78rem;line-height:1.5;color:var(--online);
}
.ra-key__say.is-bad{color:#FFD166}
.ra-key__say:empty{display:none}

/* ---- the conversation on an order ---- */
.ochat{--notch:16px;padding:1.6rem;margin-top:2rem}
.ochat__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.ochat__head h2{font-size:1.3rem;margin:0 0 .35rem}
.ochat__head p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6;max-width:60ch}
.ochat__ref{
  font-size:.7rem;color:var(--vp-red);border:1px solid rgba(255,70,85,.35);padding:.25rem .55rem;
}
.ochat__log{margin:1.3rem 0;display:grid;gap:.8rem}
.ochat__msg{padding:.2rem 0 .2rem .9rem;border-left:2px solid var(--hair)}
.ochat__msg--customer{border-left-color:var(--vp-red)}
.ochat__msg--staff{border-left-color:var(--online)}
.ochat__msg--system{border-left-color:var(--muted);opacity:.75}
.ochat__msg span{
  display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:.2rem;
}
.ochat__msg p{margin:0;font-size:.92rem;line-height:1.6;color:#DCDCE6}
.ochat__closed{font-size:.84rem;color:var(--muted);margin:1rem 0 0}
.ochat__form{margin-top:1.2rem}

/* ---- the sign-in button was oversized ---- */
.auth .btn--block,
.acclogin .btn--block{
  min-height:44px;padding:.75rem 1.4rem;font-size:.74rem;letter-spacing:.12em;
}
.auth .btn--block svg{width:15px;height:15px}

@media (max-width:640px){
  .ra-key__acts{margin-left:0;width:100%}
  .ra-key__acts .ra-key__btn{flex:1 1 auto}
  .ochat{padding:1.1rem}
}

/* ==========================================================================
   32. ICON SIZING
   Every inline icon defaults to something sane. Context rules elsewhere are
   free to override; this only stops an unstyled icon filling its parent.
   ========================================================================== */
.ra-i{flex:0 0 auto}

.btn .ra-i,
.btn svg{
  width:1em;height:1em;flex:0 0 auto;
}
.btn--block .ra-i,
.btn--block svg{width:1.05em;height:1.05em}

/* Buttons that carry an icon need it beside the label, not above it. */
.btn{gap:.5rem}

/* The sign-in and register buttons sit at a sensible weight now. */
.auth .btn--block,
.acclogin .btn--block{
  min-height:46px;padding:.8rem 1.4rem;font-size:.75rem;letter-spacing:.12em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
}
.auth .btn--block .ra-i,
.auth .btn--block svg{width:16px;height:16px}

/* Small icon buttons elsewhere. */
.ra-key__btn .ra-i,
.rgn__toggle .ra-i,
.srchwrap__btn .ra-i,
.acct__menu a .ra-i,
.acct-link .ra-i{width:15px;height:15px}

.ochat__form .btn .ra-i{width:15px;height:15px}

/* ==========================================================================
   33. NOTIFICATION CARDS
   ========================================================================== */
.ratoast{
  position:fixed;right:1rem;bottom:1rem;z-index:9000;
  display:grid;gap:.6rem;width:min(340px,calc(100vw - 2rem));
  pointer-events:none;
}
.ratoast__card{
  position:relative;pointer-events:auto;background:#101018;
  border:1px solid rgba(255,70,85,.4);padding:1rem 2.2rem 1rem 1rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  opacity:0;transform:translateY(12px);
  transition:opacity .28s ease-out,transform .28s ease-out;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.ratoast__card.is-in{opacity:1;transform:none}
.ratoast__card--keys{border-color:rgba(87,242,135,.45)}
.ratoast__card strong{
  display:block;font-family:var(--f-display);font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;margin-bottom:.3rem;
}
.ratoast__card--keys strong{color:var(--online)}
.ratoast__card p{margin:0 0 .7rem;font-size:.85rem;line-height:1.5;color:var(--muted)}
.ratoast__go{
  display:inline-block;font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--vp-red);border-bottom:1px solid rgba(255,70,85,.4);
  padding-bottom:.15rem;
}
.ratoast__go:hover{color:#fff;border-bottom-color:#fff}
.ratoast__x{
  position:absolute;top:.5rem;right:.6rem;background:none;border:0;color:var(--muted);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .2rem;
}
.ratoast__x:hover{color:#fff}

@media (max-width:640px){
  .ratoast{left:.75rem;right:.75rem;bottom:.75rem;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .ratoast__card{transition:opacity .01s}
}

/* ---- code row as a form ---- */
form.ra-key{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ra-key__peek{flex:1 1 14ch;min-width:0}
.ra-key__peek summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
}
.ra-key__peek summary::-webkit-details-marker{display:none}
.ra-key__masked{font-size:.9rem;letter-spacing:.06em;color:#fff}
.ra-key__show{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--hair);padding:.2rem .4rem;transition:color .2s,border-color .2s;
}
.ra-key__peek summary:hover .ra-key__show{color:#fff;border-color:var(--vp-red)}
.ra-key__peek[open] summary .ra-key__masked{display:none}
.ra-key__peek[open] summary .ra-key__show::after{content:" ▲"}
.ra-key__peek .ra-key__code{
  display:block;margin-top:.4rem;font-size:.95rem;color:var(--vp-red);
  user-select:all;overflow-wrap:anywhere;
}
.ra-key__note{flex:1 1 100%;margin-top:.1rem}
.ra-key__note input{
  width:100%;background:rgba(0,0,0,.3);border:1px solid var(--hair);color:#fff;
  font:inherit;font-size:.78rem;padding:.45rem .6rem;
}
.ra-key__note input:focus{border-color:var(--vp-red);outline:none}

/* ==========================================================================
   34. STAFF TICKET VIEW
   ========================================================================== */
.tixbar{margin-bottom:1.6rem}
.tixbar__top{
  display:flex;align-items:flex-start;gap:.9rem;flex-wrap:wrap;
  padding:.9rem 1rem;background:rgba(255,70,85,.07);
  border-left:2px solid var(--vp-red);margin-bottom:1rem;
}
.tixbar__badge{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--vp-red);
  border:1px solid rgba(255,70,85,.4);padding:.25rem .5rem;flex:0 0 auto;
}
.tixbar__top p{margin:0;font-size:.82rem;line-height:1.55;color:var(--muted);flex:1 1 20ch}

.tixbar__filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tixbar__tab{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;
  border:1px solid var(--hair);color:var(--muted);font-family:var(--f-mono);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  transition:color .2s,border-color .2s,background .2s;
}
.tixbar__tab:hover{color:#fff;border-color:var(--vp-red)}
.tixbar__tab.is-on{color:#fff;background:rgba(255,70,85,.12);border-color:rgba(255,70,85,.5)}
.tixbar__tab b{color:var(--vp-red);font-size:.9em}
.tixbar__search{display:flex;gap:.4rem;margin-left:auto;flex:1 1 200px;max-width:340px}
.tixbar__search input{
  flex:1;min-width:0;background:#101018;border:1px solid var(--hair);color:#fff;
  font:inherit;font-size:.82rem;padding:.45rem .6rem;
}
.tixbar__search input:focus{border-color:var(--vp-red);outline:none}

.tix__item--staff{border-color:rgba(255,70,85,.24)}
.tix__who{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;
  padding:.6rem .8rem;margin-top:.8rem;background:rgba(0,0,0,.3);
  border:1px solid var(--hair);font-size:.76rem;color:var(--muted);
}
.tix__who a{color:var(--vp-red)}
.tix__reply--note{border-left-color:#FFD166;opacity:.85}
.tix__reply--note p{font-style:italic}

.tix__statusform{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--hair);
}
.tix__statusform>span{
  font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.tix__statusform button[disabled]{opacity:.4;cursor:default}

.tixpage{display:flex;justify-content:center;gap:.4rem;margin-top:1.6rem}
.tixpage .page-numbers{
  padding:.45rem .7rem;border:1px solid var(--hair);color:var(--muted);
  font-family:var(--f-mono);font-size:.74rem;
}
.tixpage .page-numbers.current,
.tixpage .page-numbers:hover{color:#fff;border-color:var(--vp-red)}

@media (max-width:640px){
  .tixbar__search{margin-left:0;max-width:none}
  .tix__who{flex-direction:column;align-items:flex-start;gap:.25rem}
  .tix__statusform{flex-direction:column;align-items:stretch}
  .tix__statusform button{width:100%}
}

/* internal Discord chatter, staff only */
.tix__reply--note{
  border-left-color:#FFD166;background:rgba(255,209,102,.05);
  padding-top:.5rem;padding-bottom:.5rem;
}
.tix__reply--note span{color:#FFD166}
.tix__reply--note span::after{
  content:"· not visible to the customer";
  margin-left:.4rem;opacity:.75;text-transform:none;letter-spacing:0;font-size:.95em;
}

/* a staff reply should be unmistakable in the thread */
.tix__reply--staff::before,
.ochat__msg--staff::before{
  content:"STAFF";display:inline-block;font-family:var(--f-mono);font-size:.56rem;
  letter-spacing:.16em;color:var(--online);border:1px solid rgba(87,242,135,.4);
  padding:.1rem .3rem;margin-bottom:.3rem;
}
.tix__reply--staff,.ochat__msg--staff{background:rgba(87,242,135,.04)}

/* "you are replying as staff" line above the reply box */
.tix__as{
  font-size:.76rem;line-height:1.5;color:var(--online);margin:0 0 .6rem;
  padding:.45rem .65rem;background:rgba(87,242,135,.07);
  border-left:2px solid rgba(87,242,135,.5);
}
.tix__as strong{color:#fff}
.tix__as a{color:var(--muted);margin-left:.4rem;text-decoration:underline}
.tix__as a:hover{color:#fff}

/* guest ticket page */
.wrap--narrow{max-width:760px}
.tixguest{
  margin-top:1.6rem;padding:1rem 1.2rem;border:1px solid var(--hair);
  font-size:.82rem;line-height:1.6;color:var(--muted);
}
.tixguest p{margin:0 0 .5rem}
.tixguest p:last-child{margin:0}
.tixguest a{color:var(--vp-red)}