/* Two palettes behind one set of names. The night one is what the shop wears, pitched to the
   violet of the banner art so the page the banners sit on is the same colour they are. The
   cream one is still here and comes back with data-theme="light". */
:root{
  --pink:#c05cff;
  --pink-hi:#d489ff;
  --pink-ink:#12061f;
  --pink-ink-soft:rgba(18,6,31,.28);
  --pink-soft:rgba(192,92,255,.11);
  --pink-line:rgba(192,92,255,.55);

  /* the magenta that runs through the wordmark, kept for counters and badges */
  --warm:#ff45a8;
  --warm-soft:rgba(255,69,168,.13);
  --warm-line:rgba(255,69,168,.4);

  --bg:#0a0614;
  --bg-2:#110a20;
  --card:#170f29;
  --card-2:#211636;
  --line:rgba(196,160,255,.12);
  --line-2:rgba(196,160,255,.2);
  --line-3:rgba(196,160,255,.34);

  --text:#f3eeff;
  --muted:#a89cc4;
  --dim:#8d82a8;
  --ok:#3ad39a;
  --warn:#f1aa3c;
  --bad:#ff5b7b;

  --field:#110a20;
  --hdr:rgba(10,6,20,.94);
  --scrim:rgba(6,3,14,.76);
  --sh-1:0 8px 24px -6px rgba(0,0,0,.66);
  --sh-2:0 22px 54px -14px rgba(0,0,0,.76);
  --skel-hi:#2a1d42;
  --warn-ink:#f3d4a0;
  --bad-ink:#ffc2ce;
  --sel:rgba(192,92,255,.35);
  --wash-a:rgba(140,70,255,.2);
  --wash-b:rgba(255,69,168,.1);
  --shine:rgba(255,255,255,.5);

  --r-sm:7px;
  --r:10px;
  --r-lg:14px;
  --max:1180px;
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --e-out:cubic-bezier(.22,.75,.25,1);
  --e-pop:cubic-bezier(.34,1.35,.5,1);
  --d1:130ms;
  --d2:220ms;
  --d3:340ms;
}

[data-theme="light"]{
  --pink:#8b3dff;
  --pink-hi:#7a22f2;
  --pink-ink:#fff;
  --pink-ink-soft:rgba(255,255,255,.32);
  --pink-soft:rgba(139,61,255,.09);
  --pink-line:rgba(139,61,255,.45);

  --warm:#d81b87;
  --warm-soft:rgba(216,27,135,.1);
  --warm-line:rgba(216,27,135,.32);

  --bg:#f7f4fd;
  --bg-2:#efe9fb;
  --card:#fff;
  --card-2:#f7f3fe;
  --line:rgba(46,20,80,.11);
  --line-2:rgba(46,20,80,.17);
  --line-3:rgba(46,20,80,.3);

  --text:#1b1226;
  --muted:#665c78;
  --dim:#7d7390;
  --ok:#0f9f5c;
  --warn:#b9780a;
  --bad:#d92d4a;

  --field:#fdfcff;
  --hdr:rgba(255,255,255,.93);
  --scrim:rgba(30,14,58,.45);
  --sh-1:0 6px 18px -6px rgba(60,30,110,.18);
  --sh-2:0 22px 54px -14px rgba(60,30,110,.26);
  --skel-hi:#ebe4f7;
  --warn-ink:#7a4f06;
  --bad-ink:#951f36;
  --sel:rgba(139,61,255,.2);
  --wash-a:rgba(160,100,255,.16);
  --wash-b:rgba(255,69,168,.08);
  --shine:rgba(255,255,255,.75);
}



*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
/* a soft warmth in the corners so the page is not a flat sheet of cream */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 520px at 88% -6%,var(--wash-a),transparent 62%),
             radial-gradient(680px 460px at -8% 12%,var(--wash-b),transparent 60%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-stretch:112%;font-weight:800;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(30px,4.2vw,46px)}
h2{font-size:clamp(23px,2.7vw,31px)}
h3{font-size:17px;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:4px}
.opt:focus-visible,.btn:focus-visible{outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.hide{display:none !important}
[hidden]{display:none !important}
.muted{color:var(--muted)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--pink);
  color:var(--pink-ink);font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- top bar + header ---------- */
.topbar{background:var(--pink);color:var(--pink-ink);font-size:13px;font-weight:600}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;height:34px;text-align:center}
.topbar b{font-weight:800}
.topbar-sep{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}

.hdr{position:sticky;top:0;z-index:50;background:var(--hdr);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:30px;height:64px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;color:var(--text)}
.logo img{width:32px;height:32px;border-radius:9px;flex-shrink:0}
.logo b{font-size:17px;font-weight:800;font-stretch:112%;letter-spacing:-.03em;white-space:nowrap}
.nav{display:flex;align-self:stretch;gap:4px}
.nav a{display:flex;align-items:center;padding:0 12px;font-size:14.5px;font-weight:500;color:var(--muted);
  position:relative;transition:color .15s}
.nav a:hover{color:var(--text)}
.nav a.on{color:var(--text)}
.nav a.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--pink)}
.hdr-dc{margin-left:8px}
.themebtn{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--card);color:var(--muted);
  cursor:pointer;transition:color var(--d1) var(--e-out),border-color var(--d1) var(--e-out)}
.themebtn:hover{color:var(--text);border-color:var(--line-3)}
.themebtn svg{width:18px;height:18px}
/* only the face that is not showing is offered */
.themebtn .moon{display:none}
[data-theme="light"] .themebtn .moon{display:block}
[data-theme="light"] .themebtn .sun{display:none}
.menu-btn{display:none;margin-left:auto;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--card);cursor:pointer;place-items:center}
.menu-btn svg{width:18px;height:18px}
.mnav{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;
  border-radius:var(--r-sm);border:1px solid transparent;font-weight:700;font-size:14.5px;font-stretch:104%;
  cursor:pointer;white-space:nowrap;
  transition:background var(--d1) var(--e-out),border-color var(--d1),color var(--d1),transform var(--d1) var(--e-out)}
.btn:active{transform:scale(.985)}
.btn-p:hover{transform:translateY(-1px)}
.btn-p:active{transform:translateY(0) scale(.985)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-p{background:var(--pink);color:var(--pink-ink)}
.btn-p:hover{background:var(--pink-hi)}
.btn-2{background:var(--card-2);border-color:var(--line-2);color:var(--text)}
.btn-2:hover{border-color:var(--line-3)}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px}
.btn-lg{height:52px;padding:0 22px;font-size:16px}
.btn-full{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.busy{opacity:1}
.link{color:var(--pink);font-weight:600}
.link:hover{text-decoration:underline}
.linkbtn{background:none;border:0;padding:0;color:var(--pink);font-weight:600;font-size:14px;cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}

/* ---------- shared blocks ---------- */
.sec{padding:64px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.sec-h p{color:var(--muted);margin-top:8px;max-width:560px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-b{padding:20px}
.sn{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 7px;background:var(--pink);color:var(--pink-ink);
  font-size:13px;font-weight:800;font-stretch:110%;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);flex-shrink:0}
.pagehead{padding:40px 0 28px;border-bottom:1px solid var(--line)}
.pagehead p{color:var(--muted);margin-top:10px;max-width:620px}
.crumb{font-size:13px;color:var(--dim);margin-bottom:12px}
.crumb a:hover{color:var(--text)}
.fine{font-size:12.5px;color:var(--dim);line-height:1.5}
.empty{padding:56px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.empty h3{font-size:20px;margin-bottom:8px}
.empty p{color:var(--muted);margin-bottom:20px}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field label span{color:var(--dim);font-weight:400}
.field input,.field textarea,.field select{width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);
  background:var(--field);border:1px solid var(--line-2);font-size:15px;transition:border-color .15s}
.field textarea{height:auto;min-height:90px;padding:12px 14px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--pink)}
.field input[type=file]{height:auto;padding:10px 12px;font-size:13.5px;color:var(--muted)}
.field input[type=file]::file-selector-button{margin-right:12px;height:30px;padding:0 12px;border-radius:5px;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--text);font-weight:600;cursor:pointer}
.field .hint{font-size:12.5px;color:var(--dim);margin-top:6px}
.field .msg{font-size:12.5px;color:var(--bad);margin-top:6px;display:none}
.field.err input,.field.err textarea{border-color:var(--bad)}
.field.err .msg{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prefix{position:relative}
.prefix input{padding-left:34px}
.prefix::before{content:'@';position:absolute;left:14px;top:50%;transform:translateY(-52%);color:var(--dim);font-weight:600;pointer-events:none}

/* ---------- home: banner + buy ---------- */
.banner{margin-top:22px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--card)}
.banner img{display:block;width:100%;height:auto}
.banner+.banner{margin-top:14px}
.buy{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;padding:22px 0 10px}
.buy>*{min-width:0}
.hero{padding:26px 0 4px}
.hero h1{margin-bottom:9px;text-wrap:balance}
.hero h1 span{font-weight:700;color:var(--muted)}
.hero h1 b{color:var(--pink);font-weight:800}
.hero p{color:var(--muted);max-width:700px;text-wrap:pretty}
.step{margin-bottom:14px}
.step .card-h{justify-content:flex-start}
.step .card-h h3{flex:1}
.step .card-h .fine{font-size:13px}

.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{position:relative;display:block;width:100%;text-align:left;padding:14px 14px 13px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--bg-2);cursor:pointer;
  transition:border-color var(--d1) var(--e-out),background var(--d1) var(--e-out),transform var(--d1) var(--e-out),box-shadow var(--d1)}
.opt:active{transform:scale(.985)}
.opt:hover{border-color:var(--line-3)}
.opt.on{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink);background:var(--pink-soft)}
.opt .tick{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-3);
  transition:border-color var(--d1),background var(--d1)}
.opt.on .tick{border-color:var(--pink);background:var(--pink)}
.opt.on .tick::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--pink-ink);
  border-width:0 2px 2px 0;transform:rotate(45deg);animation:tick var(--d2) var(--e-pop) both}
@keyframes tick{from{opacity:0;transform:rotate(45deg) scale(.3)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.opt .flag{position:absolute;top:-9px;left:12px;padding:2px 7px;border-radius:4px;background:var(--pink);color:var(--pink-ink);
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.opt-name{display:block;font-weight:700;font-size:14.5px;font-stretch:106%;padding-right:22px}
.opt-rate{display:block;font-size:21px;font-weight:800;font-stretch:110%;margin:6px 0 1px;letter-spacing:-.02em}
.opt-rate small{font-size:12.5px;font-weight:500;color:var(--muted);font-stretch:100%;letter-spacing:0}
.opt-meta{display:block;font-size:12.5px;color:var(--muted)}
.method-note{margin-top:14px;padding:13px 16px;border-left:2px solid var(--pink);background:var(--bg-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px;color:var(--muted)}
.method-note p{margin:0;line-height:1.55}
.method-note a{color:var(--pink);font-weight:600}
/* the group's 14-day rule is the one thing people miss, so it gets the accent and its own action */
.method-note.note-warn{background:var(--pink-soft);border-left-color:var(--pink)}
.method-note.note-warn p{color:var(--text)}
.note-act{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--pink-line)}
.note-act b{font-size:13.5px;color:var(--text);font-weight:600}
.note-act .btn{color:var(--pink-ink)}

.amts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.amts.stagger .opt{animation:tile-in var(--d3) var(--e-out) both;animation-delay:calc(var(--i,0)*34ms)}
@keyframes tile-in{from{opacity:0;transform:translateY(8px)}}
.amt-r{display:block;font-size:20px;font-weight:800;font-stretch:110%;letter-spacing:-.02em}
.amt-r small{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:3px}
.amt-p{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.opt.on .amt-p{color:var(--text)}
.custom{display:flex;align-items:center;gap:12px;margin-top:10px;padding:0 14px;height:54px;border-radius:var(--r);
  border:1px dashed var(--line-3);background:var(--bg-2);transition:border-color .15s}
.custom.on{border-style:solid;border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.custom label{font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.custom input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;font-size:18px;font-weight:700;
  font-stretch:108%;text-align:right}
.custom input::placeholder{color:var(--dim);font-weight:500;font-size:15px}
.custom .unit{font-weight:700;color:var(--muted)}
.custom .cprice{min-width:84px;text-align:right;font-weight:700}
.amt-msg{font-size:13px;color:var(--warn);margin-top:8px}
.amt-msg:empty{display:none}
.opt .pop{position:absolute;bottom:10px;right:12px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.opt.on .pop{color:var(--pink)}
.amt-msg a{color:var(--pink);font-weight:600}

.summary{position:sticky;top:84px}
.summary .card-b{padding:18px 20px 20px}
.rows{margin:0}
.rows div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rows div:last-child{border-bottom:0}
.rows dt{color:var(--muted)}
.rows dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;margin-top:6px;border-top:1px solid var(--line-2)}
.total span{font-weight:600}
.total b{font-size:30px;font-weight:800;font-stretch:112%;letter-spacing:-.03em}
.summary .fine{margin-top:12px;text-align:center}
.mbar{display:none;transform:translateY(100%);transition:transform var(--d3) var(--e-out)}
.mbar.up{transform:none}
.trustrow{display:flex;flex-wrap:wrap;gap:10px 26px;padding:16px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.trustrow li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.trustrow svg{width:15px;height:15px;color:var(--pink);flex-shrink:0}

/* ---------- compare table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.tbl{width:100%;border-collapse:collapse;min-width:640px}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{background:var(--bg-2);font-size:14px;font-weight:700;font-stretch:106%}
.tbl thead th small{display:block;font-size:11px;font-weight:700;color:var(--pink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.tbl tbody th{color:var(--muted);font-weight:500;width:20%}
.tbl .big{font-size:18px;font-weight:800;font-stretch:110%}
.tbl .col-on{background:rgba(255,45,142,.045)}
.tbl-prices td{font-variant-numeric:tabular-nums}
.tbl-prices tbody th{color:var(--text);font-weight:700;font-stretch:108%}
.tbl-prices td button{background:none;border:0;padding:0;cursor:pointer;font-weight:700;font-size:15px;color:var(--text);
  font-variant-numeric:tabular-nums;border-bottom:1px dashed transparent}
.tbl-prices td button:hover{color:var(--pink);border-bottom-color:var(--pink)}
.tbl-prices td small{display:block;font-size:12px;color:var(--dim);font-weight:500}

/* ---------- how to pay ---------- */
.paysteps{display:grid;grid-template-columns:repeat(3,1fr)}
.paysteps li{padding:22px 24px}
.paysteps li+li{border-left:1px solid var(--line)}
.paysteps h3{margin:14px 0 6px}
.paysteps p{color:var(--muted);font-size:14px}
.wallet-row{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px;border-top:1px solid var(--line);align-items:center}
.wallet-row>span{font-size:13px;color:var(--dim);margin-right:4px}
.wchip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--line-2);font-size:13.5px;font-weight:600}
.wchip img{height:18px;width:auto}

.cta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;flex-wrap:wrap}
.cta-row h3{font-size:20px;margin-bottom:6px}
.cta-row p{color:var(--muted);font-size:14px;max-width:560px}

.split{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.split>*{min-width:0}
.split .sec-h{display:block}
.split .sec-h p{margin-bottom:16px}

.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;gap:16px;padding:17px 2px;cursor:pointer;list-style:none;font-weight:600;font-size:15px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--pink);font-size:20px;line-height:1;font-weight:500;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--text)}
.qa .ans{padding:0 2px 18px;color:var(--muted);font-size:14.5px;max-width:720px}

/* ---------- prices page ---------- */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.rate{padding:18px 20px}
.rate h3{font-size:15px;margin-bottom:8px}
.rate .opt-rate{margin:0 0 4px}
.rate p{font-size:13px;color:var(--muted)}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.game{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;transition:border-color .15s}
.game:hover,.rate:hover{border-color:var(--line-2)}
.game b{display:block;font-size:16px;font-stretch:108%}
.game span{font-size:13px;color:var(--muted)}

/* ---------- checkout ---------- */
.co-head{padding-top:26px}
.co-head h1{margin:0 0 16px}
.co{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;padding:26px 0 70px}
.co>*{min-width:0}
.co .card{margin-bottom:14px}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-bottom:10px}
.backlink svg{width:15px;height:15px}
.backlink:hover{color:var(--text)}
.flow{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 22px;font-size:13.5px;color:var(--dim)}
.flow li{display:flex;align-items:center;gap:9px}
.flow li+li::before{content:"";width:26px;height:1px;background:var(--line-2);margin:0 14px}
.flow .dot{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-3);font-size:11.5px;font-weight:700}
.flow li.done,.flow li.now{color:var(--text)}
.flow li.done .dot{background:var(--pink);border-color:var(--pink);color:var(--pink-ink)}
.flow li.now .dot{border-color:var(--pink);color:var(--pink)}
.walhint{font-size:13px;color:var(--muted);margin:-6px 0 16px;padding-left:2px}
.wallets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.wallets .opt{text-align:center;padding:12px 8px}
.wallets .opt img{height:22px;width:auto;margin:0 auto 6px}
.wallets .opt b{font-size:14px;font-stretch:106%}
.payto{border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);margin-bottom:18px}
.payto-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.payto-row:last-child{border-bottom:0}
.payto-row span{flex:1;font-size:13.5px;color:var(--muted)}
.payto-row b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.payto-row.amt b{font-size:24px;font-weight:800;font-stretch:112%;color:var(--pink)}
.copybtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--card-2);cursor:pointer;color:var(--muted);flex-shrink:0}
.copybtn:hover{color:var(--text);border-color:var(--line-3)}
.copybtn svg{width:15px;height:15px}
.notice{padding:12px 14px;border-radius:var(--r-sm);background:rgba(241,170,60,.08);border:1px solid rgba(241,170,60,.28);
  font-size:13.5px;color:var(--warn-ink);margin-bottom:16px}
.notice a{color:var(--warn);font-weight:600;text-decoration:underline}
.final{font-size:12.5px;color:var(--dim);margin-top:12px;line-height:1.5}
.promo-line summary{cursor:pointer;font-size:13.5px;color:var(--muted);list-style:none;padding:10px 0 2px}
.promo-line summary::-webkit-details-marker{display:none}
.promo-line summary:hover{color:var(--text)}
.promo-in{display:flex;gap:8px;margin-top:8px}
.promo-in input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:var(--r-sm);background:var(--field);border:1px solid var(--line-2)}
.promo-in input:focus{outline:none;border-color:var(--pink)}
.promo-msg{font-size:12.5px;color:var(--bad);margin-top:6px}
.promo-msg:empty{display:none}
.promo-on{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ok);padding:10px 0 2px}
.promo-on button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:13px}
.promo-on button:hover{color:var(--bad)}
.spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--pink-ink-soft);border-top-color:var(--pink-ink);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- receipt + eligibility ---------- */
.drop{display:flex;align-items:center;gap:14px;min-height:82px;padding:16px;border-radius:var(--r);
  border:1px dashed var(--line-3);background:var(--bg-2);cursor:pointer;
  transition:border-color var(--d1) var(--e-out),background var(--d1) var(--e-out),transform var(--d1) var(--e-out)}
.drop.over{transform:scale(1.01)}
.drop.busy{pointer-events:none}
.drop.busy .drop-in{opacity:.6}
.drop .shot-thumb{animation:pop var(--d3) var(--e-pop) both}
.drop:hover,.drop.over{border-color:var(--pink);background:var(--pink-soft)}
.drop.has{border-style:solid;border-color:var(--line-2)}
.drop-in{display:flex;align-items:center;gap:14px;width:100%}
.drop-in>b{display:block;font-size:14.5px;font-stretch:104%}
.drop:not(.has) .drop-in{flex-direction:column;align-items:flex-start;gap:4px}
.shot-thumb{width:54px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--line-2);flex-shrink:0}
.shot-meta{flex:1;min-width:0}
.shot-meta b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field.err .drop{border-color:var(--bad)}
.elig{padding:14px;border-radius:var(--r);border:1px solid rgba(241,170,60,.3);background:rgba(241,170,60,.06)}
.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14.5px}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--pink);flex-shrink:0}
.elig .fine{margin-top:8px;padding-left:31px}
.elig .fine a{color:var(--warn);font-weight:600}
.field.err .elig{border-color:var(--bad)}
.field.err .elig .msg{padding-left:31px}
.handoff{margin-top:14px;border-color:var(--pink-line)}
.handoff .card-h{border-bottom-color:var(--pink-line)}

/* ---------- order / track ---------- */
.done-h{display:flex;gap:16px;align-items:flex-start;padding:24px;margin-top:30px}
.done-h .ok{width:40px;height:40px;border-radius:50%;background:rgba(54,201,131,.14);color:var(--ok);display:grid;place-items:center;flex-shrink:0}
.done-h .ok svg{width:20px;height:20px}
.done-h h1{font-size:clamp(24px,3vw,32px);margin-bottom:6px}
.done-h p{color:var(--muted)}
.tl{padding:6px 0}
.tl li{position:relative;padding:0 0 22px 32px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;left:7px;top:22px;bottom:2px;width:2px;background:var(--line-2)}
.tl li:last-child::before{display:none}
.tl li::after{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;border:2px solid var(--line-3);background:var(--card)}
.tl li.done::after{background:var(--pink);border-color:var(--pink)}
.tl li.done::before{background:var(--pink);transform-origin:top;animation:line-grow var(--d3) var(--e-out) both}
@keyframes line-grow{from{transform:scaleY(0)}}
.tl li.now::after{border-color:var(--pink);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 8px var(--pink);
  animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
.tl li.just::after{animation:pop var(--d3) var(--e-pop) both}
.tl b{display:block;font-size:15px}
.tl span{font-size:13.5px;color:var(--muted)}
.tl li:not(.done):not(.now) b{color:var(--dim)}
.status{white-space:nowrap;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:5px;font-size:12.5px;font-weight:700}
.status.pend{background:rgba(241,170,60,.12);color:var(--warn)}
.status.ok{background:rgba(54,201,131,.12);color:var(--ok)}
.olist{display:grid;gap:10px}
.oitem{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:16px 20px}
.oitem b{font-stretch:106%}
.oitem .fine{margin-top:2px}
.idcopy{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit}
.idcopy svg{width:14px;height:14px;color:var(--dim)}
.idcopy:hover svg{color:var(--pink)}

.nextlist{display:grid;gap:16px;counter-reset:n}
.nextlist li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.nextlist li::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;border:1px solid var(--line-2);font-size:12.5px;font-weight:700;color:var(--muted)}
.nextlist b{grid-column:2;font-size:14.5px}
.nextlist span{grid-column:2;font-size:13.5px;color:var(--muted)}
/* ---------- docs ---------- */
.doc{max-width:760px;padding:34px 0 70px}
.doc h2{font-size:21px;margin:34px 0 10px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--muted);margin-bottom:10px}
.doc ul li{padding-left:16px;position:relative}
.doc ul li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:2px;background:var(--pink)}
.doc a{color:var(--pink)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--bg-2);margin-top:40px}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:44px 0 32px}
.ftr-about .ftr-logo{display:block;width:131px;height:34px;overflow:hidden;margin-bottom:10px}
.ftr-logo{display:flex;align-items:center;gap:9px;color:var(--text)}
.ftr-logo img{width:30px;height:30px;border-radius:8px}
.ftr-logo b{font-size:16px;font-weight:800;font-stretch:112%;letter-spacing:-.03em}
.ftr-about p{color:var(--muted);font-size:14px;max-width:280px}
.ftr h4{font-size:13px;font-stretch:100%;letter-spacing:0;color:var(--dim);font-weight:600;margin-bottom:12px}
.ftr-top a{display:block;font-size:14px;color:var(--muted);padding:9px 0;min-height:40px}
.ftr-top a:hover{color:var(--text)}
.ftr-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 0 28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}


/* ---------- support chat ---------- */
.chat-btn{position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;border:0;
  background:var(--pink);color:var(--pink-ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--sh-1);transition:transform .15s,background .15s}
.chat-btn:hover{background:var(--pink-hi);transform:translateY(-1px) scale(1.04)}
.chat-btn:active{transform:scale(.95)}
.chat-btn svg{width:23px;height:23px}
.chat-dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:var(--ok);
  border:2px solid var(--bg)}
.chat.on .chat-btn{transform:scale(.9);opacity:0}
.chat-panel{position:fixed;right:20px;bottom:20px;z-index:71;width:min(372px,calc(100vw - 32px));
  height:min(540px,calc(100vh - 110px));background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-2);
  opacity:0;transform:translateY(12px) scale(.96);transform-origin:bottom right;pointer-events:none;
  transition:opacity var(--d2) var(--e-out),transform var(--d2) var(--e-pop)}
.chat.on .chat-panel{opacity:1;transform:none;pointer-events:auto}
.chat-h{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.chat-h b{display:block;font-size:15px;font-stretch:106%}
.chat-h span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.chat-h div{flex:1}
.chat-x{width:38px;height:38px;border-radius:8px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);
  cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.chat-x:hover{color:var(--text)}
.chat-x svg{width:14px;height:14px}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-ctx{align-self:center;font-size:12px;color:var(--dim);background:var(--bg-2);border:1px solid var(--line);
  padding:5px 11px;border-radius:99px}
.cmsg{display:flex;flex-direction:column;max-width:84%}
.chat-body .cmsg:last-child{animation:bubble var(--d3) var(--e-out) both}
@keyframes bubble{from{opacity:0;transform:translateY(8px) scale(.97)}}
.cmsg.me{align-self:flex-end;align-items:flex-end}
.cmsg.them{align-self:flex-start}
.bubble{padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cmsg.them .bubble{background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.cmsg.me .bubble{background:var(--pink);color:var(--pink-ink);font-weight:500;border-bottom-right-radius:4px}
.cmsg-t{font-size:11px;color:var(--dim);margin-top:4px}
.typing{display:flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--bg-2)}
.chat-f input{flex:1;min-width:0;height:42px;padding:0 13px;border-radius:var(--r-sm);background:var(--card);
  border:1px solid var(--line-2);font-size:14.5px}
.chat-f input:focus{outline:none;border-color:var(--pink)}
.chat-f .btn{width:42px;height:42px;padding:0;flex-shrink:0}
body.has-bar .chat-btn{bottom:84px}
body.has-bar .chat-panel{bottom:84px;height:min(540px,calc(100vh - 170px))}

/* ---- what the shop is doing right now ---- */
.shopbar{background:var(--card);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.shopbar .wrap{padding:10px 20px}
.shopbar.shut{background:color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--text)}
.shopbar.shut .wrap::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bad);margin-right:9px;vertical-align:1px}
.fine.why{color:var(--bad);font-weight:600}
.opt.off{opacity:.55;cursor:not-allowed}
.opt.off:hover{border-color:var(--line);transform:none}
.flag-off{background:var(--bad);color:#fff}
.rate h3 .flag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:4px;vertical-align:2px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.card.rate.off{opacity:.62}

/* ---- rating an order that arrived ---- */
.stars{display:flex;gap:6px;margin-bottom:12px}
.star{width:40px;height:40px;padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--dim);cursor:pointer;transition:color .16s var(--e-out),border-color .16s var(--e-out),transform .16s var(--e-pop)}
.star svg{width:100%;height:100%}
.star:hover{color:var(--pink);border-color:var(--pink);transform:translateY(-1px)}
.star.on{color:var(--pink);border-color:var(--pink)}
.star.on svg{fill:currentColor}
.rate-c textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font:inherit;resize:vertical;margin-bottom:12px}
.rate-c textarea:focus{outline:none;border-color:var(--pink)}
.rate-c.done .card-b{padding:16px 18px}

/* ---- what buyers said, on the home page ---- */
.saysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.say{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.say blockquote{margin:10px 0 12px;font-size:15px;line-height:1.5}
.say figcaption{font-size:13px;font-weight:600;color:var(--muted)}
.say figcaption span{color:var(--dim);font-weight:500}
.say figcaption span::before{content:"· "}
.rstars{display:inline-flex;gap:2px;color:var(--dim)}
.rstars span{width:15px;height:15px}
.rstars svg{width:100%;height:100%}
.rstars .on{color:var(--pink)}
.rstars .on svg{fill:currentColor}


/* numbers we can back up, so they read as facts rather than marketing */
.trustnums{list-style:none;display:flex;flex-wrap:wrap;gap:0 30px;margin:18px 0 0;padding:0}
.trustnums li{position:relative;padding:2px 0}
.trustnums li+li::before{content:'';position:absolute;left:-15px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.trustnums b{font-size:17px;font-weight:800;font-stretch:110%;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.trustnums span{margin-left:6px;font-size:13px;color:var(--muted)}


/* what Roblox says about the username someone typed */
.rblx{display:flex;align-items:center;gap:9px;margin-top:8px;padding:9px 11px;border-radius:var(--r-sm);
  font-size:13px;line-height:1.45;background:var(--bg-2);border:1px solid var(--line)}
.rblx img{border-radius:50%;flex-shrink:0;background:var(--card-2)}
.rblx b{font-weight:700}
.rblx.good{background:color-mix(in srgb,var(--ok) 11%,var(--bg-2));border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.rblx.bad{background:color-mix(in srgb,var(--bad) 11%,var(--bg-2));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.rblx.wait{background:color-mix(in srgb,var(--warn) 11%,var(--bg-2));border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.rblx.busy{color:var(--muted)}
.rblx a{color:var(--pink);font-weight:600}
.rblx .spin{width:13px;height:13px;flex-shrink:0}

.payto-why{margin:2px 0 0;padding:0 2px;font-size:12.5px;line-height:1.45;color:var(--muted)}


/* whether the shop is open, said plainly next to the headline */
.livechip{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:5px 11px 5px 10px;
  border-radius:99px;border:1px solid var(--line-2);background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.livechip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dim)}
.livechip.on{color:var(--text);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.livechip.on::before{background:var(--ok);animation:livepulse 2.4s var(--e-out) infinite}
.livechip.off{color:var(--text);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.livechip.off::before{background:var(--bad)}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.livechip.on::before{animation:none}}

/* said where it matters, not only on the help page */
.onlyacct{display:flex;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--muted)}
.onlyacct::before{content:"";flex-shrink:0;width:3px;border-radius:2px;background:var(--pink);opacity:.7}

/* the alternative offered to someone the group rule would otherwise turn away */
.rblx.wayout{display:block;margin-top:10px;padding:13px 15px;line-height:1.5}
.rblx.wayout .fine{display:block;margin-top:7px;font-size:12.5px}
.rblx.wayout .swapbtn{margin-top:11px}


/* ---- a sale ---- */
.topbar.sale{background:var(--pink);color:var(--pink-ink)}
.topbar.sale b{color:var(--pink-ink)}
.topbar.sale .topbar-sep{background:currentColor;opacity:.4}
s.was{margin-left:7px;font-size:13px;font-weight:600;color:var(--dim);text-decoration-thickness:1px}
.amt-p s.was{margin-left:6px;font-size:12px}

/* the one announcement, on arrival */
.saleover{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.saleover-bg{position:absolute;inset:0;background:var(--scrim);opacity:0;
  transition:opacity 260ms var(--e-out),backdrop-filter 420ms var(--e-out)}
.saleover.in .saleover-bg{opacity:1;backdrop-filter:blur(4px)}

/* The card arrives quietly and lets what is inside it do the talking. */
.saleover-card{position:relative;width:min(400px,100%);padding:30px 26px 24px;text-align:center;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  opacity:0;transform:translateY(10px) scale(.975);
  transition:opacity 200ms var(--e-out),transform 300ms var(--e-pop)}
.saleover.in .saleover-card{opacity:1;transform:none}

/* Then each line lands in turn — the discount, the name, the price, what you keep. A single
   pop would say "a box appeared"; this says "here is the offer, piece by piece". */
.saleover-card>*{opacity:0;transform:translateY(9px)}
.saleover.in .saleover-card>*{animation:sale-line 380ms var(--e-out) both;
  animation-delay:calc(120ms + var(--i,0)*70ms)}
.saleover.in .saleover-card>.chat-x{animation-delay:340ms}
.saleover.in .saleover-card>.saleprice{animation:sale-hero 460ms var(--e-pop) both}
@keyframes sale-line{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes sale-hero{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

/* the old price is crossed out a beat after it lands, which is the bit that feels good */
.saleold{position:relative;text-decoration:none}
.saleold::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 280ms var(--e-out) 900ms}
.saleover.in .saleold::after{transform:scaleX(1)}

/* one pass of light across the discount, and nothing after it */
.salepill{position:relative;overflow:hidden}
.salepill::after{content:'';position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 34%,var(--shine) 50%,transparent 64%)}
.saleover.in .salepill::after{animation:sale-sheen 780ms var(--e-out) 820ms both}
@keyframes sale-sheen{to{transform:translateX(130%)}}

/* the saving settles a moment after the price it comes from */
.saleover.in .salesave b{animation:sale-save 420ms var(--e-pop) 1040ms both}
@keyframes sale-save{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* leaving is quick and downward — it should not linger once it is dismissed */
.saleover.out .saleover-card{opacity:0;transform:translateY(8px) scale(.985);
  transition:opacity 150ms var(--e-out),transform 180ms var(--e-out)}
.saleover.out .saleover-bg{opacity:0;transition:opacity 180ms var(--e-out)}
.saleover .chat-x{position:absolute;right:14px;top:14px}
.salepill{display:inline-block;margin-bottom:14px;padding:5px 13px;border-radius:99px;
  background:var(--pink);color:var(--pink-ink);font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.saleover h2{font-size:27px;font-stretch:112%;letter-spacing:-.02em;margin-bottom:6px}
.salenote{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:18px}
.saleprice{margin:18px 0 4px}
.saleprice .num:first-child{display:block;font-size:44px;font-weight:800;font-stretch:115%;
  letter-spacing:-.04em;line-height:1;color:var(--pink)}
.saleold{display:inline-block;margin-top:9px;font-size:15px;color:var(--dim)}
.saleunit{display:block;margin-top:5px;font-size:13px;color:var(--muted)}
.salesave{margin:14px 0 0;font-size:14px;color:var(--text)}
.salesave b{color:var(--ok)}
.saleends{margin:6px 0 18px;font-size:13px;color:var(--warn);font-variant-numeric:tabular-nums}
.saleover .btn-full{margin-top:4px}

@media(prefers-reduced-motion:reduce){
  .saleover-card,.saleover.in .saleover-card{transition:opacity var(--d1) linear;transform:none}
  .saleover-card>*,.saleover.in .saleover-card>*{animation:none;opacity:1;transform:none}
  .saleover.in .saleold::after{transition:none;transform:scaleX(1)}
  .saleover.in .salepill::after,.saleover.in .salesave b{animation:none}
  .saleover-bg,.saleover.in .saleover-bg{backdrop-filter:none}
}

@media(max-width:760px){
  .saleover{padding:16px}
  .saleover-card{padding:26px 20px 20px}
  .saleover h2{font-size:23px}
  .saleprice .num:first-child{font-size:38px}

  .hero{padding:18px 0 2px}
  .trustnums{gap:0 18px;margin-top:14px}
  .trustnums li+li::before{left:-9px}
  /* a phone gets the three that matter most; the community pair lives further down the page */
  .trustnums li:nth-child(n+4){display:none}
  .trustnums b{font-size:15px}
  .trustnums span{margin-left:5px;font-size:12.5px}

  .trustnums{grid-template-columns:1fr 1fr}

  .dcband{flex-direction:column;align-items:stretch;gap:18px;padding:20px}
  .dc-say{gap:13px}
  .dc-mark{width:40px;height:40px;border-radius:11px}
  .dc-mark svg{width:23px}
  .dcband h3{font-size:18px}
  .dc-go{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
  .dc-go .btn{flex:1}

  .note-act{flex-direction:column;align-items:stretch}
  .note-act .btn{width:100%}

  .shopbar .wrap{padding:9px 16px}
  .star{width:44px;height:44px}
  .saysgrid{grid-template-columns:1fr}

  /* iOS zooms the page when a focused field is under 16px */
  .field input,.field textarea,.field select,.asearch,.chat-f input,.promo-in input,.custom input{font-size:16px}

  /* the banner keeps its own proportions instead of being sliced into a strip */
  .banner{aspect-ratio:3/1}

  /* delivery cards: name and rate on one line, the note under them, nothing overlapping */
  .methods .opt{padding-right:48px}
  .methods .opt-name{padding-right:0}
  .methods .opt-rate{font-size:20px}

  /* wide tables read as one card per row */
  .tbl-wrap{overflow:visible;border:0;background:transparent}
  .tbl{min-width:0;border-collapse:collapse}
  .tbl,.tbl tbody,.tbl tr,.tbl td,.tbl th{display:block;width:auto}
  .tbl thead{display:none}
  .tbl tbody tr{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:4px 0}
  .tbl tbody th{border:0;padding:12px 16px 6px;color:var(--text);font-size:15px;font-weight:700;width:auto}
  .tbl td{border:0;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right}
  .tbl td::before{content:attr(data-label);color:var(--muted);font-size:13px;font-weight:500;text-align:left}
  .tbl td:not(:last-child){border-bottom:1px solid var(--line)}
  .tbl .col-on{background:transparent}
  .tbl-prices td small{display:inline;margin-left:8px;color:var(--dim)}

  /* on checkout the summary comes first, so the total is seen before the form */
  .co aside{order:-1}
  .co .summary .card{margin-bottom:0}

  /* the launcher moves left so it never covers a card's selection tick */
  .chat-btn{left:16px;right:auto}
  .chat-panel{left:12px;right:12px;height:min(70dvh,520px)}

  /* room for the home indicator on notched phones */
  .mbar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.has-bar{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  body.has-bar .chat-btn{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.has-bar .chat-panel{bottom:calc(84px + env(safe-area-inset-bottom))}

  .chat-panel{right:12px;left:12px;width:auto;bottom:16px;height:min(70vh,520px)}
  .chat-btn{right:16px;bottom:16px;width:50px;height:50px}
}

.formmsg{display:none;margin:0 0 14px;padding:10px 12px;border-radius:var(--r-sm);font-size:13px;
  background:rgba(255,91,107,.1);border:1px solid rgba(255,91,107,.3);color:var(--bad-ink)}
.formmsg.on{display:block}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.seg button{height:38px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--d1) var(--e-out),color var(--d1) var(--e-out)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--card-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.seg button:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.field input:disabled{opacity:.6;cursor:not-allowed}

/* ---------- motion ---------- */
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes fade-in{from{opacity:0}}
.pop{animation:pop var(--d3) var(--e-pop)}
.js [data-rev]{opacity:0;transform:translateY(14px)}
.js [data-rev].in{opacity:1;transform:none;
  transition:opacity 520ms var(--e-out),transform 520ms var(--e-out);
  transition-delay:calc(var(--i,0)*70ms)}
.flash{animation:flash 620ms var(--e-out)}
@keyframes flash{0%{background:rgba(255,45,142,.16)}100%{background:transparent}}
.tickdraw{width:22px;height:22px}
.tickdraw circle{transform-origin:center;animation:pop 420ms var(--e-pop) both}
.tickdraw path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw 420ms var(--e-out) 140ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.skel{background:linear-gradient(90deg,var(--card-2) 25%,var(--skel-hi) 37%,var(--card-2) 63%);
  background-size:400% 100%;animation:skel 1.2s ease-in-out infinite;border-radius:6px;color:transparent}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}

/* cross-page transitions where the browser supports them */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 160ms var(--e-out) both}
::view-transition-new(root){animation:vt-in 260ms var(--e-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
.topbar{view-transition-name:topbar}
.hdr{view-transition-name:sitehdr}

/* ---------- toast ---------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm);background:var(--card-2);
  border:1px solid var(--line-2);font-size:14px;font-weight:600;animation:tin .2s ease-out}
.toast svg{width:16px;height:16px;color:var(--ok)}
.toast.bad svg{color:var(--bad)}
.toast.out{opacity:0;transform:translateY(6px);transition:.25s}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .buy,.co{grid-template-columns:1fr}
  .summary{position:static}
  .split{grid-template-columns:1fr;gap:10px}
  .ftr-top{grid-template-columns:1fr 1fr 1fr}
  .ftr-about{grid-column:1/-1}
  .rates,.games{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav,.hdr-dc{display:none}
  .menu-btn{display:grid}
  .mnav.on{display:flex;flex-direction:column;padding:6px 20px 16px;border-top:1px solid var(--line)}
  .mnav a{padding:13px 0;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
  .mnav a:last-child{border-bottom:0}
  .topbar-sep,.topbar span:last-child{display:none}
  .methods{grid-template-columns:1fr}
  .opt .tick{top:50%;transform:translateY(-50%)}
  .paysteps{grid-template-columns:1fr}
  .paysteps li+li{border-left:0;border-top:1px solid var(--line)}
  .rates,.games,.row2{grid-template-columns:1fr}
  .wallets{grid-template-columns:1fr 1fr}
  .oitem{grid-template-columns:1fr auto}
  .oitem .oact{grid-column:1/-1}
  .buy-side .summary{display:none}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:14px;padding:12px 16px;
    background:var(--hdr);border-top:1px solid var(--line-2)}
  .mbar div{flex:1;min-width:0}
  .mbar small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar b{font-size:20px;font-weight:800;font-stretch:110%}
  body.has-bar{padding-bottom:74px}
  .toasts{left:16px;right:16px;bottom:86px}
  .sec{padding:48px 0}
}
@media(max-width:420px){
  .amts{grid-template-columns:1fr 1fr}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rev]{opacity:1;transform:none}
  .mbar{transform:none}
  @view-transition{navigation:none}
}


/* The Discord band. Discord's own blue so it is recognised at a glance, and the counts it
   carries are the live ones the bot reads from the server, not numbers typed into a file. */
.dcband{--dc:#5865f2;display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:24px;flex-wrap:wrap;
  background:linear-gradient(105deg,color-mix(in srgb,var(--dc) 13%,var(--card)),var(--card) 62%);
  border-color:color-mix(in srgb,var(--dc) 34%,transparent)}
.dc-say{display:flex;align-items:flex-start;gap:16px;min-width:0}
.dc-mark{flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  color:#fff;background:var(--dc)}
.dc-mark svg{width:26px;height:auto}
.dcband h3{font-size:20px;margin-bottom:6px}
.dcband p{color:var(--muted);font-size:14px;max-width:560px}

.dc-nums{list-style:none;display:flex;flex-wrap:wrap;gap:0 26px;margin:12px 0 0;padding:0}
.dc-nums li{position:relative;display:flex;align-items:baseline;gap:6px;padding:2px 0;font-size:13px;color:var(--muted)}
.dc-nums li+li::before{content:'';position:absolute;left:-13px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.dc-nums b{font-size:15px;font-weight:800;font-stretch:110%;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.dc-nums .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);align-self:center;
  animation:livepulse 2.4s var(--e-out) infinite}

.dc-go{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.dc-faces{display:flex}
.dc-faces img{width:32px;height:32px;border-radius:50%;background:var(--card-2);
  border:2px solid var(--card);object-fit:cover}
.dc-faces img+img{margin-left:-10px}
.dc-faces span{display:grid;place-items:center;height:32px;margin-left:-10px;padding:0 9px 0 13px;
  border-radius:16px;border:2px solid var(--card);background:var(--card-2);
  font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.btn-dc{background:var(--dc);border-color:var(--dc);color:#fff}
.btn-dc:hover{background:color-mix(in srgb,var(--dc) 84%,#fff);border-color:color-mix(in srgb,var(--dc) 84%,#fff)}

@media(prefers-reduced-motion:reduce){.dc-nums .dot{animation:none}}


/* ---------- the counters and the running list ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat{position:relative;overflow:hidden;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
/* a soft warm disc, not an icon — it stops the card reading as an empty box */
.stat::after{content:'';position:absolute;right:-26px;bottom:-34px;width:104px;height:104px;
  border-radius:50%;background:var(--warm-soft)}
.stat h4{margin:0 0 6px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.stat .big{display:flex;align-items:baseline;gap:7px}
.stat b{font-size:29px;font-weight:800;font-stretch:112%;letter-spacing:-.035em;line-height:1;
  color:var(--warm);font-variant-numeric:tabular-nums}
.stat .unit{font-size:13px;color:var(--muted)}
.stat .sub{position:relative;margin-top:9px;font-size:12.5px;color:var(--dim)}
.stat .sub em{font-style:normal;font-weight:700;color:var(--ok)}

.statwhen{margin:-4px 0 14px;font-size:12px;color:var(--dim)}
.feed{padding:18px 20px 8px}
.feed-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.feed-h h3{font-size:17px;margin-bottom:4px}
.feed-h p{font-size:13px;color:var(--muted)}
.feed-l{margin:0;padding:0;list-style:none}
.feed-l li{display:flex;align-items:center;gap:12px;padding:12px 2px;font-size:14px;
  border-bottom:1px solid var(--line)}
.feed-l li:last-child{border-bottom:0}
.feed-l .pip{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--warm);
  box-shadow:0 0 0 4px var(--warm-soft)}
.feed-l .what{flex:1;min-width:0}
.feed-l .what b{font-weight:700;font-variant-numeric:tabular-nums}
.feed-l .when{flex-shrink:0;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.feed-l .new{flex-shrink:0;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;
  background:var(--warm-soft);color:var(--warm);border:1px solid var(--warm-line)}

@media(max-width:880px){
  .statrow{grid-template-columns:1fr 1fr}
}
/* two to a row on a phone leaves each card about 150px wide, which a 29px number and the word
   beside it do not fit inside — the number comes down and the word is allowed to drop under it */
@media(max-width:560px){
  .statrow{gap:10px}
  .stat{padding:14px 15px}
  .stat h4{font-size:11.5px}
  .stat .big{flex-wrap:wrap}
  .stat b{font-size:23px}
  .stat .unit{font-size:12px}
  .stat .sub{font-size:11.5px}
  .stat::after{right:-30px;bottom:-40px;width:88px;height:88px}
  .feed{padding:16px 16px 6px}
  .feed-l li{gap:9px;font-size:13.5px;padding:11px 0}
  .feed-l .when{font-size:11.5px}
}


/* ---------- the sheet the bubble opens ---------- */
.chat-ways{position:absolute;left:0;bottom:64px;width:320px;max-width:calc(100vw - 32px);
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-2);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);
  transform-origin:0 100%;transition:opacity var(--d2) var(--e-out),transform var(--d2) var(--e-out),visibility 0s var(--d2)}
.chat.ways-on .chat-ways{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ways-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 14px 12px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.ways-h b{display:block;font-size:15px;font-weight:800;font-stretch:106%}
.ways-h span{font-size:12.5px;color:var(--muted)}
.ways-l{padding:8px}
.way{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:0;border-radius:var(--r);
  background:transparent;text-align:left;cursor:pointer;transition:background var(--d1) var(--e-out)}
.way:hover{background:var(--card-2)}
.way-m{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#fff}
.way-m svg{width:21px;height:auto}
.way-chat .way-m{background:var(--pink);color:var(--pink-ink)}
.way-chat .way-m svg{stroke:currentColor;fill:none}
.way-discord .way-m{background:#5865f2}
.discord-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.discord-link svg{width:21px;height:18px;flex-shrink:0}
.discord-link:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.admin-discord{padding:8px 12px;background:#4752c4;color:#fff}
.admin-discord:hover{background:#3640a2;color:#fff}
.way-whatsapp .way-m{background:#25d366}
.way-t{min-width:0}
.way-t b{display:block;font-size:14.5px;font-weight:700}
.way-t span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- the three ways in ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:138px;
  padding:42px 16px 16px;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(150deg,var(--card-2),var(--card) 70%);
  transition:border-color var(--d2) var(--e-out),transform var(--d2) var(--e-out)}
.cat:hover{border-color:var(--pink-line);transform:translateY(-2px)}
.cat-art{position:absolute;inset:0;z-index:0}
.cat-art img{width:100%;height:100%;object-fit:cover;opacity:.22}
.cat-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--card) 4%,color-mix(in srgb,var(--card) 72%,transparent) 55%,color-mix(in srgb,var(--card) 34%,transparent))}
.cat-in{position:relative;z-index:1}
.cat-in b{display:block;font-size:17px;font-weight:800;font-stretch:108%;letter-spacing:-.02em}
.cat-rate{display:block;margin-top:5px;font-size:20px;font-weight:800;color:var(--pink);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cat-rate small{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
.cat-meta{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.cat-flag{position:absolute;top:12px;right:12px;z-index:1;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700;background:var(--pink-soft);color:var(--pink);
  border:1px solid var(--pink-line)}
.cat.off{opacity:.62}
.cat.off:hover{transform:none;border-color:var(--line)}
.cat-dc{border-color:rgba(88,101,242,.4)}
.cat-dc:hover{border-color:rgba(88,101,242,.75)}
.cat-dc .cat-rate{color:#8b95ff}

@media(max-width:880px){
  .cats{grid-template-columns:1fr;gap:10px}
  .cat{min-height:0}
  .chat-ways{width:288px}
}