/* ══════════════════════════════════════════════
   Tips Battle World Championship — tipsbattle.com
   Dark theme. Brand red and gold from the deck,
   inverted onto a warm black ground.
   ══════════════════════════════════════════════ */

:root{
  --paper:#120E06;        /* page ground */
  --sand:#1B1509;         /* alternating band */
  --white:#241C0C;        /* card */
  --line:rgba(255,199,44,.20);
  --line-soft:rgba(255,199,44,.11);
  --ink:#FFF8E7;          /* primary text */
  --ink-2:#EADFC4;        /* secondary text */
  --muted:#B5A78C;        /* tertiary text */
  --red:#F2565D;          /* red for text — lifted for contrast on black */
  --red-fill:#C81D25;     /* red for fills, from the deck */
  --red-dk:#8C0F16;
  --gold:#FFC72C;
  --gold-dk:#E8A600;
  --green:#2FBF6B;       /* confirm / copy */
  --green-lt:#3FD97D;

  /* Top 6 podium — one colour per place */
  --silver:#CBD2DA;       /* place 2 */
  --bronze:#CD8032;       /* place 3 */
  --pl4:#3CC7B4;          /* place 4 — teal   */
  --pl5:#A98BF0;          /* place 5 — violet */
  --pl6:#F27E5A;          /* place 6 — coral  */

  --sans:"Carlito",Calibri,"Segoe UI",system-ui,sans-serif;
  --serif:"Caladea",Cambria,Georgia,serif;

  --gut:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

/* ── shared type ─────────────────────────── */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red);margin:0 0 12px
}
.eyebrow--gold{color:var(--gold)}

h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.4vw,48px)}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.2}
p{margin:0 0 16px}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:66ch}
.small{font-size:14.5px;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 28px;border-radius:3px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease
}
.btn--red{background:var(--red-fill);color:#FFF8E7}
.btn--red:hover{background:#E23640;transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:#1A1408}
.btn--green{background:var(--green);color:#08160C}
.btn--green:hover{background:var(--green-lt);transform:translateY(-1px)}
.btn--gold:hover{background:var(--gold-dk);transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
/* Ghost buttons carry no background of their own. On an <a> that is fine,
   but a <button> gets the browser default (near-white), which put cream
   text on a white box in the cookie banner. Make it explicit. */
.btn--ghost-l{background:transparent;border-color:rgba(255,248,231,.35);color:var(--ink)}
.btn--ghost-l:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:10px 18px;font-size:12.5px}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}

/* ── top bar ─────────────────────────────── */
.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:rgba(11,8,3,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:3px solid var(--red-fill)}
.topbar__in{display:flex;align-items:center;gap:16px;height:74px}
.mark{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.mark img{height:50px;width:auto;display:block}
.topbar__by{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.topbar__by img{height:27px;width:auto;display:block}
.topbar__links{display:flex;gap:24px;align-items:center}
.topbar__links a{font-size:14px;text-decoration:none;color:var(--ink-2);font-weight:700}
.topbar__links a:hover{color:var(--gold)}
@media(max-width:980px){.topbar__links{display:none}}
@media(max-width:600px){
  .topbar__in{gap:12px}
  .topbar__by{font-size:0;gap:0}
  .topbar__by img{height:24px}
  .mark img{height:44px}
}
/* ══════════════════════════════════════════════
   LANGUAGE DROPDOWN
   Built on <details> so it opens without any
   JavaScript — four flags in a row ate the top bar
   on phones, and a tap target beats four tiny ones.
   ══════════════════════════════════════════════ */
.langsw{position:relative;flex:none}
.langsw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:4px;padding:7px 9px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);
  -webkit-tap-highlight-color:rgba(255,199,44,.18);transition:.14s}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary::marker{content:""}
.langsw summary:hover{color:var(--gold);border-color:var(--gold-dk)}
.langsw[open] summary{color:var(--gold);border-color:var(--gold-dk);background:rgba(255,199,44,.06)}
.langsw summary svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.langsw__c{width:11px!important;height:11px!important;opacity:.8;transition:transform .16s ease}
.langsw[open] .langsw__c{transform:rotate(180deg)}

.langsw__m{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:172px;
  background:#1B1509;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.55)}
.langsw__m a{display:flex;align-items:center;gap:9px;padding:10px 13px;text-decoration:none;
  font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.langsw__m a:last-child{border-bottom:0}
.langsw__m a b{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);
  min-width:22px;flex:none}
.langsw__m a span{font-weight:400}
.langsw__m a:hover{background:rgba(255,199,44,.09);color:var(--ink)}
.langsw__m a:hover b{color:var(--gold)}
.langsw__m a[aria-current="true"]{background:rgba(255,199,44,.13);color:var(--gold)}
.langsw__m a[aria-current="true"] b{color:var(--gold)}

/* ── hero ────────────────────────────────── */
.hero{color:var(--ink);padding:clamp(44px,6vw,72px) 0 0;position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 18% 10%,rgba(200,29,37,.20),transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 30%,rgba(255,199,44,.10),transparent 66%),
    var(--paper)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr}}
.hero__pres{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px}
.hero__logo{width:clamp(196px,26vw,278px);height:auto;display:block;margin:0 0 22px}
.hero h1{font-size:clamp(38px,5.6vw,64px);text-transform:uppercase;letter-spacing:-.015em;margin:0}
.hero h1 em{font-style:normal;color:var(--red);display:block}
.hero__sub{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);color:var(--ink-2);
  margin:16px 0 26px;max-width:52ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__powered{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.hero__powered span{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.hero__powered img{display:block;width:auto}
.lg-cb{height:28px}
.lg-gts{height:35px}

/* ── live meter ──────────────────────────── */
.meter{background:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:20px;position:relative;overflow:hidden}
.meter__head{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.meter__live{display:inline-flex;align-items:center;gap:8px;color:var(--red)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.meter__scores{display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;margin-bottom:11px}
.side{display:flex;align-items:flex-end;gap:12px;min-width:0}
.side--b{flex-direction:row-reverse;text-align:right}
.side__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.side--b .side__txt{align-items:flex-end}

/* competitor avatar — drop an <img> inside when you have
   a photo the model has agreed to publish */
.side__av{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;
  background:#171107;border:2px solid var(--line);display:grid;place-items:center;
  position:relative}
.side__av img{width:100%;height:100%;object-fit:cover;display:block}
.side--a .side__av{border-color:var(--red)}
.side--b .side__av{border-color:var(--gold)}
/* silhouette shown until a photo is added */
.side__av--ph::before{content:"";position:absolute;top:12px;width:17px;height:17px;
  border-radius:50%;background:var(--line)}
.side__av--ph::after{content:"";position:absolute;bottom:-9px;width:33px;height:26px;
  border-radius:50% 50% 0 0;background:var(--line)}
@media(max-width:420px){.side__av{width:42px;height:42px}}
.side__tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.side--a .side__tag{color:var(--red)}
.side--b .side__tag{color:var(--gold)}
.side__n{font-size:clamp(26px,3.6vw,34px);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.side__u{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.bar{height:18px;display:flex;background:#0A0703;border-radius:3px;overflow:hidden}
.bar__a{background:var(--red-fill);transition:width .55s cubic-bezier(.22,1,.36,1)}
.bar__b{background:var(--gold);flex:1}
.meter__foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;gap:12px;flex-wrap:wrap}
.tipbtns{display:flex;gap:9px}
.tipbtn{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:10px 14px;border-radius:3px;background:none;cursor:pointer;border:1px solid;
  transition:background .15s ease,transform .1s ease}
.tipbtn--a{color:var(--red);border-color:rgba(242,86,93,.5)}
.tipbtn--a:hover{background:rgba(242,86,93,.14)}
.tipbtn--b{color:var(--gold);border-color:rgba(255,199,44,.45)}
.tipbtn--b:hover{background:rgba(255,199,44,.13)}
.tipbtn:active{transform:scale(.96)}
.clock{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.burst{position:absolute;font-size:14px;font-weight:700;pointer-events:none;animation:rise 1.1s ease-out forwards}
@keyframes rise{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-48px)}}
.meter__note{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 0}

/* ── hero stat band ──────────────────────── */
.statband{background:var(--sand);padding:clamp(28px,4vw,40px) 0 clamp(34px,4.5vw,48px);
  border-top:1px solid var(--line)}
.statband__in{display:grid;grid-template-columns:repeat(3,1fr) auto;
  gap:clamp(16px,3vw,30px);align-items:center}
@media(max-width:1000px){.statband__in{grid-template-columns:repeat(3,1fr)}
  .statband__bonus{grid-column:1/-1}}
@media(max-width:760px){.statband__in{grid-template-columns:1fr;gap:20px}}

/* the extra Xmas Cup pot, called out the way the deck cover does */
.statband__bonus{background:var(--gold);border-radius:5px;padding:16px 22px;
  align-self:center;min-width:min(100%,232px)}
.statband__bk{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#3A2A00}
.statband__bn{font-size:clamp(30px,3.6vw,40px);font-weight:700;line-height:1;
  color:#1A1408;margin-top:6px;letter-spacing:-.02em}
.statband__bl{font-size:12.5px;font-weight:700;color:#3A2A00;margin-top:6px;line-height:1.3}
a.statband__bonus{display:block;text-decoration:none;transition:transform .12s ease,background .18s ease}
a.statband__bonus:hover{background:#FFD25A;transform:translateY(-1px)}
.stat{border-left:4px solid var(--gold);padding-left:18px}
.stat:nth-child(2){border-left-color:var(--red-fill)}
.stat__n{font-size:clamp(38px,5.5vw,58px);font-weight:700;line-height:1;color:var(--gold)}
.stat:nth-child(2) .stat__n{color:var(--ink)}
.stat__l{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-top:9px}

/* ── section shell ───────────────────────── */
.block{padding:clamp(52px,7vw,86px) 0}
.block--sand{background:var(--sand)}
.block--tight{padding-top:0}
.block__head{max-width:70ch;margin-bottom:clamp(28px,4vw,44px)}
.block__head h2{margin-bottom:12px}

/* ── card grids ──────────────────────────── */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* three-card rows: 1 or 3 columns only. Two columns would always leave the
   third card alone, and auto-fit was reaching 4 and 5 columns on wide screens. */
.grid--3{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* grids with an even number of cards may also use two columns on tablets */
@media(min-width:560px) and (max-width:759px){.grid--pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:5px;
  padding:clamp(20px,2.4vw,28px)}
.block--sand .card{background:#241C0C}
.card__k{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.card h3{margin-bottom:9px}
.card p{margin:0;font-size:15.5px;color:var(--muted)}
.card__v{font-size:clamp(22px,2.6vw,28px);font-weight:700;color:var(--gold);
  margin:0 0 8px;line-height:1.1}
.card__logo{height:38px;width:auto;display:block;margin-bottom:14px}

/* ── requirement card (StreamGTS live) ───── */
.req{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,38px);align-items:center;
  background:linear-gradient(135deg,rgba(255,199,44,.13),transparent 56%),#241C0C;
  border:1px solid var(--gold);border-radius:6px;
  padding:clamp(20px,3vw,32px);margin-bottom:clamp(16px,2.2vw,24px)}
@media(max-width:720px){.req{grid-template-columns:1fr}}
.req__badge{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;
  border-right:1px solid var(--line);padding-right:clamp(20px,3.4vw,38px)}
@media(max-width:720px){.req__badge{border-right:0;border-bottom:1px solid var(--line);
  padding:0 0 18px;flex-direction:row;justify-content:flex-start}}
.req__badge img{height:44px;width:auto;display:block}
.req__live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.req__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:pulse 1.6s ease-in-out infinite}
.req__k{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.req h3{font-size:clamp(20px,2.6vw,28px);margin-bottom:10px}
.req p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:66ch}
.req p b{color:var(--gold)}
.req__steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.req__s{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:99px;padding:6px 13px 6px 9px;font-size:12.5px;font-weight:700;color:var(--muted)}
.req__s b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--gold);color:#1A1408;font-size:11px;flex:none}

/* highlighted line inside the requirement card */
.req__on{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(255,199,44,.09);border:1px solid var(--gold-dk);border-radius:5px;
  padding:13px 16px;margin:0 0 14px}
.req__on img{height:22px;width:auto;display:block;flex:none}
.req__on span{font-size:15.5px;font-weight:700;color:var(--gold);line-height:1.35}

/* ── numbered flow ───────────────────────── */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,2vw,20px)}
.flow__i{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:24px 22px 26px}
.flow__n{width:38px;height:38px;border-radius:50%;background:var(--red-fill);color:#FFF8E7;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;margin-bottom:16px}
.flow__i h3{margin-bottom:8px;font-size:20px}
.flow__i p{margin:0;font-size:15px;color:var(--muted)}

/* ── conversion banner ───────────────────── */
.conv{background:var(--gold);border:2px solid var(--gold-dk);border-radius:5px;
  padding:clamp(26px,4vw,42px);text-align:center}
.conv__n{font-size:clamp(26px,4.6vw,52px);font-weight:700;line-height:1.06;
  color:#1A1408;letter-spacing:-.015em}
.conv__s{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#3A2A00;margin:14px 0 0}

/* ── win / tie / loss ────────────────────── */
.wtl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2vw,20px);margin-top:clamp(16px,2.4vw,22px)}
.wtl__c{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--line);
  border-radius:5px;padding:24px 22px}
.wtl--w{border-top-color:var(--red-fill)}
.wtl--t{border-top-color:var(--gold)}
.wtl--l{border-top-color:var(--muted)}
.wtl__k{font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wtl--w .wtl__k{color:var(--red)}
.wtl--t .wtl__k{color:var(--gold)}
.wtl__v{font-size:clamp(21px,2.6vw,27px);font-weight:700;margin:7px 0 9px;line-height:1.1}
.wtl__d{margin:0;font-size:15px;color:var(--muted)}

/* ── bonus rows ──────────────────────────── */
.bonus{background:var(--white);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.bonus__r{display:grid;grid-template-columns:132px 1fr auto;gap:18px;align-items:center;
  padding:17px 22px;border-bottom:1px solid var(--line-soft)}
.bonus__r:last-child{border-bottom:0}
.bonus__bp{font-size:15px;font-weight:700;color:var(--red);white-space:nowrap}
.bonus__t{font-weight:700;font-size:16.5px}
.bonus__d{display:block;font-weight:400;font-size:14.5px;color:var(--muted);margin-top:2px}
.bonus__c{font-size:19px;font-weight:700;color:var(--gold);white-space:nowrap}
@media(max-width:640px){
  .bonus__r{grid-template-columns:1fr auto;gap:6px 14px}
  .bonus__bp{grid-column:1/-1;order:-1}
}

/* ── MVP explainer ───────────────────────── */
.mvp{background:linear-gradient(140deg,rgba(200,29,37,.18),transparent 56%),#241C0C;
  border:1px solid var(--gold-dk);border-radius:6px;
  padding:clamp(20px,3vw,32px);margin-top:clamp(14px,1.8vw,18px)}
.mvp__top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.mvp__t{font-size:clamp(20px,2.6vw,27px);font-weight:700;line-height:1.1}
.mvp__tags{display:flex;gap:8px;flex-wrap:wrap}
.mvp__tag{font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:5px 11px;
  border-radius:99px;white-space:nowrap}
.mvp__tag--bp{background:rgba(255,199,44,.12);border:1px solid var(--gold-dk);color:var(--gold)}
.mvp__tag--usd{background:var(--gold);color:#1A1408}
.mvp__d{margin:0 0 18px;font-size:15.5px;color:var(--ink-2);max-width:74ch}
.mvp__d b{color:var(--gold)}

.mvp__split{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
@media(max-width:680px){.mvp__split{grid-template-columns:1fr}}
.mvp__col{background:#1B1509;padding:18px 20px}
.mvp__ck{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.mvp__col--in .mvp__ck{color:var(--gold)}
.mvp__col--out .mvp__ck{color:var(--muted)}
.mvp__col--in .mvp__ck::before{content:"\2713";font-size:14px}
.mvp__col--out .mvp__ck::before{content:"\2715";font-size:13px}
.mvp__l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.mvp__l li{font-size:14.5px;line-height:1.4}
.mvp__col--in li{color:var(--ink-2)}
.mvp__col--out li{color:var(--muted)}
.mvp__note{margin:16px 0 0;font-size:15px;color:var(--ink-2);max-width:74ch}
.mvp__note b{color:var(--gold)}

/* ── community vote callout ──────────────── */
.vote{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);flex-wrap:wrap;
  background:linear-gradient(130deg,rgba(255,199,44,.11),transparent 58%),#241C0C;
  border:1px solid var(--gold-dk);border-radius:6px;
  padding:clamp(18px,2.6vw,26px);margin-top:clamp(14px,1.8vw,18px)}
.vote__b{display:flex;align-items:baseline;gap:9px;flex:none}
.vote__n{font-size:clamp(26px,3.4vw,36px);font-weight:700;color:var(--gold);line-height:1}
.vote__u{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.vote__d{margin:0;font-size:15.5px;color:var(--ink-2);flex:1;min-width:min(100%,260px)}
.vote__d b{color:var(--gold)}
.vote .btn{flex:none}

/* ── prize fund ──────────────────────────── */
.fund{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5vw,60px);align-items:center}
@media(max-width:820px){.fund{grid-template-columns:1fr}}
.donut{width:clamp(190px,26vw,250px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--red-fill) 0 75%,var(--gold) 75% 100%);
  display:grid;place-items:center;position:relative;flex:none}
.donut::after{content:"";position:absolute;top:22%;right:22%;bottom:22%;left:22%;background:var(--sand);border-radius:50%}
.donut__in{position:relative;z-index:1;text-align:center}
.donut__n{font-size:clamp(28px,3.6vw,38px);font-weight:700;line-height:1;color:var(--ink)}
.donut__l{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.legend{display:flex;flex-direction:column;gap:12px;margin:22px 0 0}
.legend__i{display:flex;align-items:center;gap:11px;font-size:15.5px}
.legend__s{width:15px;height:15px;border-radius:3px;flex:none}
.legend__s--r{background:var(--red-fill)}
.legend__s--g{background:var(--gold)}
.legend__v{margin-left:auto;font-weight:700}
.scale{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-top:clamp(22px,3vw,30px)}
.scale__i{background:#241C0C;border:1px solid var(--line);border-radius:5px;padding:16px 18px}
.scale__k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.scale__v{font-size:clamp(21px,2.6vw,27px);font-weight:700;color:var(--gold);margin-top:5px;line-height:1}
.scale__i--max{border-color:var(--gold)}
.scale__i{transition:border-color .15s,background .15s}
.scale__i--on{border-color:var(--gold);background:rgba(255,199,44,.07);box-shadow:0 0 0 1px rgba(255,199,44,.25)}

/* ── prize fund selector ─────────────────── */
.fundsel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:0 0 clamp(24px,3.4vw,36px)}
@media(max-width:470px){.fundsel{grid-template-columns:minmax(0,1fr)}}
.fundsel__b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:#241C0C;border:1px solid var(--line);border-radius:6px;padding:12px 16px;cursor:pointer;
  color:var(--muted);font-family:inherit;text-align:left;
  transition:border-color .15s,background .15s,color .15s}
.fundsel__b:hover{border-color:var(--gold-dk);color:var(--ink)}
.fundsel__b.is-on{background:var(--gold);border-color:var(--gold-dk);color:#1A1408}
.fundsel__k{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.fundsel__v{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.05}
.fundsel__b.is-on .fundsel__k{color:#3A2A00}

/* ── special prize distribution ──────────── */
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-top:clamp(22px,3vw,30px)}
@media(max-width:900px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.spec{grid-template-columns:minmax(0,1fr)}}
.spec__i{background:#241C0C;border:1px solid var(--line);border-radius:5px;
  padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.spec__b{min-width:0}
.spec__l{font-size:15px;font-weight:700;line-height:1.3;display:block}
.spec__who{display:flex;align-items:center;gap:7px;margin-top:5px;
  font-size:13px;font-weight:700;color:var(--gold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spec__who::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold);flex:none;box-shadow:0 0 0 3px rgba(255,199,44,.18)}
.spec__who--open{color:var(--muted);font-weight:400;font-style:italic}

/* the holder name, when she has a room to link to */
.who__l{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,199,44,.4);
  transition:border-color .15s ease,color .15s ease}
.who__l:hover{color:var(--ink);border-bottom-color:var(--gold)}
.who__l::after{content:"\2197";font-size:.82em;margin-left:3px;opacity:.7}
.who__sep{opacity:.55;margin:0 1px}
.pl--1 .who__l{border-bottom-color:rgba(26,20,8,.35)}
.pl--1 .who__l:hover{color:#000;border-bottom-color:#1A1408}
.spec__who--open::before{background:var(--line);box-shadow:none}
.spec__v{font-size:20px;font-weight:700;color:var(--gold);white-space:nowrap}
.spec__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:2px solid var(--gold);margin-top:12px;padding-top:12px;
  font-size:15px;font-weight:700}
.spec__t span:last-child{font-size:20px;color:var(--gold)}

/* ── top 6 ───────────────────────────────── */
.top6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.8vw,18px)}
@media(max-width:1080px){.top6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.top6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.top6{grid-template-columns:minmax(0,1fr)}}
.pl{background:#241C0C;border:1px solid var(--line);border-radius:5px;padding:22px 20px;text-align:center}
.pl--1{background:var(--gold);border-color:var(--gold-dk)}
/* places 2–6: dark card, one medal/accent colour per place on the frame + number */
.pl--2{border-color:var(--silver);box-shadow:0 0 0 1px rgba(203,210,218,.28)}
.pl--3{border-color:var(--bronze);box-shadow:0 0 0 1px rgba(205,128,50,.28)}
.pl--4{border-color:var(--pl4);box-shadow:0 0 0 1px rgba(60,199,180,.28)}
.pl--5{border-color:var(--pl5);box-shadow:0 0 0 1px rgba(169,139,240,.28)}
.pl--6{border-color:var(--pl6);box-shadow:0 0 0 1px rgba(242,126,90,.28)}
.pl__n{font-size:clamp(36px,4.6vw,50px);font-weight:700;line-height:1;color:var(--red)}
.pl--1 .pl__n{color:#1A1408}
.pl--2 .pl__n{color:var(--silver)}
.pl--3 .pl__n{color:var(--bronze)}
.pl--4 .pl__n{color:var(--pl4)}
.pl--5 .pl__n{color:var(--pl5)}
.pl--6 .pl__n{color:var(--pl6)}
.pl__l{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:4px 0 12px}
.pl--1 .pl__l{color:#3A2A00}
.pl__v{font-size:clamp(21px,2.4vw,26px);font-weight:700;line-height:1}
.pl--1 .pl__v{color:#1A1408}
.pl__u{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--muted);margin-top:3px}
.pl--1 .pl__u{color:#3A2A00}
.pl__who{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--gold);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl--1 .pl__who{border-top-color:rgba(26,20,8,.28);color:#1A1408}
.pl__who--open{color:var(--muted);font-weight:400;font-style:italic}
.pl--1 .pl__who--open{color:#5A4A22}

/* live marker above both prize grids */
.livetag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.livetag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:pulse 1.6s ease-in-out infinite}

/* ── ROI badge ───────────────────────────── */
.roi{display:inline-flex;align-items:baseline;gap:9px;background:var(--red-fill);color:#FFF8E7;
  border-radius:4px;padding:9px 16px;font-weight:700;margin-bottom:18px}
.roi b{font-size:23px;line-height:1}
.roi span{font-size:12px;letter-spacing:.15em;text-transform:uppercase}

/* ── partner studios ─────────────────────── */
.thr{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,44px);align-items:center;
  background:linear-gradient(140deg,rgba(200,29,37,.22),transparent 60%),#241C0C;
  border:1px solid var(--red-fill);border-radius:6px;
  padding:clamp(22px,3.4vw,38px)}
@media(max-width:760px){.thr{grid-template-columns:1fr}}
.thr__n{font-size:clamp(58px,9vw,104px);font-weight:700;line-height:.88;color:var(--red);
  letter-spacing:-.03em}
.thr__u{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}
.thr__d{margin:0;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2)}
.thr__d b{color:var(--ink)}

.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;margin-top:clamp(20px,2.6vw,26px)}
.perks__i{background:#241C0C;border:1px solid var(--line);border-radius:5px;padding:17px 19px}
.perks__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.perks__i p{margin:0;font-size:14.5px;color:var(--muted)}

/* 8 cards — same rule as the roster: 1, 2 or 4, never 3 */
.studios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,16px);margin-top:clamp(24px,3vw,32px)}
@media(max-width:899px){.studios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:559px){.studios{grid-template-columns:minmax(0,1fr)}}
.sc{background:#241C0C;border:1px solid var(--line);border-radius:6px;padding:20px;
  display:flex;align-items:center;gap:15px;text-decoration:none;color:inherit;
  transition:border-color .16s ease}
a.sc:hover{border-color:var(--gold)}
.sc__lg{width:52px;height:52px;border-radius:5px;flex:none;background:#171107;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;
  font-size:16px;font-weight:700;color:var(--gold)}
.sc__lg img{width:100%;height:100%;object-fit:contain;display:block;padding:5px}
.sc__b{min-width:0}
.sc__n{font-size:17px;font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc__c{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}
.sc__m{font-size:12.5px;font-weight:700;color:var(--gold);margin-top:6px}
.sc__u{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .16s ease}
.sc__u::after{content:"\2197";font-size:.86em;margin-left:4px;color:var(--gold);opacity:.75}
a.sc--link:hover .sc__u{color:var(--gold)}
.sc--cta{border-style:dashed;border-color:rgba(255,199,44,.42);background:none;
  flex-direction:column;align-items:flex-start;gap:9px}
.sc--cta h3{font-size:17px;margin:0}
.sc--cta p{margin:0;font-size:14px;color:var(--muted)}

.studios__none{border:1px dashed var(--line);border-radius:6px;padding:30px 24px;
  text-align:center;color:var(--muted);font-size:15.5px;margin-top:clamp(24px,3vw,32px)}

/* ── roster ──────────────────────────────── */
.roster__bar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,28px)}
.roster__count{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.roster__count b{color:var(--gold);font-size:19px;letter-spacing:0;margin-right:5px}
.roster__search{position:relative;min-width:min(100%,268px)}
.roster__search input{font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#0E0B04;border:1px solid var(--line);border-radius:3px;
  padding:11px 14px;width:100%;transition:border-color .16s ease}
.roster__search input:hover{border-color:rgba(255,199,44,.45)}
.roster__search input:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,199,44,.2)}
.roster__search ::placeholder{color:#7C7059}

.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:clamp(14px,1.8vw,18px)}
.mc{background:#241C0C;border:1px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.mc--top6{border-color:var(--gold-dk)}
.mc--1,.mc--2,.mc--3{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,199,44,.22)}

/* photo slot */
.mc__photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#171107;
  border-bottom:1px solid var(--line)}
.mc--top6 .mc__photo{border-bottom-color:var(--gold-dk)}
.mc__photo img{width:100%;height:100%;object-fit:cover;display:block}
.mc__slot{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:11px;color:var(--muted);
  background:repeating-linear-gradient(45deg,rgba(255,199,44,.045) 0 10px,transparent 10px 20px),#1B1509}
.mc__slot svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.mc__slot span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.85}

/* rank badge overlays the photo */
.mc__rank{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px;
  background:rgba(18,14,6,.82);color:var(--ink);font-size:12px;font-weight:700;
  padding:6px 12px;border-bottom-left-radius:8px;letter-spacing:.04em}
.mc--top6 .mc__rank{background:var(--gold);color:#1A1408}
.mc__prize{font-size:13px;font-weight:700;padding-left:8px;border-left:1px solid rgba(255,255,255,.18)}
.mc--top6 .mc__prize{border-left-color:rgba(26,20,8,.32)}

/* body */
.mc__body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.mc__id{margin-bottom:12px}
.mc__n{font-size:18px;font-weight:700;line-height:1.2;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.mc__n--l{color:inherit;text-decoration:none;transition:color .15s ease}
a.mc__n--l:hover{color:var(--gold)}
a.mc__n--l::after{content:"\2197";font-size:.72em;margin-left:5px;
  color:var(--gold);vertical-align:top}
.mc__c{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}

/* social links */
.mc__soc{display:flex;gap:8px;margin:0 0 14px}
.mc__soclink{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  transition:border-color .15s,color .15s,background .15s}
.mc__soclink:hover{border-color:var(--gold-dk);color:var(--ink);background:rgba(255,199,44,.07)}
.mc__soclink svg{width:16px;height:16px;fill:currentColor;display:block}

/* special prize chips */
.mc__aw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.mc__awi{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--gold-dk);border-radius:99px;
  padding:4px 10px 4px 8px;font-size:11.5px;font-weight:700;
  color:var(--gold);background:rgba(255,199,44,.08);line-height:1.35}
.mc__awi::before{content:"\2605";font-size:11px;line-height:1}
.mc__awp{color:var(--ink);padding-left:6px;border-left:1px solid rgba(255,199,44,.35)}

/* legend above the grid */
.rlg{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:clamp(16px,2vw,20px)}
.rlg__i{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.rlg__s{width:14px;height:14px;border-radius:3px;flex:none;border:1px solid}
.rlg__s--t6{background:var(--gold);border-color:var(--gold)}
.rlg__s--aw{background:rgba(255,199,44,.08);border-color:var(--gold-dk);border-radius:99px}
.mc__bio{font-size:14.5px;color:var(--muted);margin:0 0 16px;flex:1}
.mc__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.mc__s{background:#171107;padding:10px 8px;text-align:center}
.mc__sv{font-size:16px;font-weight:700;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.mc__sk{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.mc__link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);text-decoration:none}
.mc__link:hover{color:var(--ink)}
.mc__link::after{content:"\2192"}

.mc--cta{border-style:dashed;border-color:rgba(255,199,44,.42);
  background:none;padding:26px 22px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;text-align:left}
.mc--cta h3{font-size:19px;margin-bottom:8px}
.mc--cta p{font-size:14.5px;color:var(--muted);margin:0 0 16px}

.roster__empty{border:1px dashed var(--line);border-radius:6px;padding:34px 26px;
  text-align:center;color:var(--muted);font-size:15.5px;display:none}
.roster__empty.show{display:block}

/* ── cross-promotion feature card ────────── */
.xp{background:linear-gradient(135deg,rgba(200,29,37,.16),transparent 52%,rgba(255,199,44,.12)),#241C0C;
  border:1px solid var(--gold);border-radius:6px;
  padding:clamp(22px,3.2vw,38px);margin-bottom:clamp(16px,2.2vw,24px)}
.xp__grid{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:900px){.xp__grid{grid-template-columns:1fr}}
.xp__k{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.xp h3{font-size:clamp(22px,2.9vw,32px);margin-bottom:11px}
.xp p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:62ch}
.xp p b{color:var(--gold)}

/* the swap diagram */
.swap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  min-width:min(100%,330px)}
@media(max-width:900px){.swap{margin-top:6px}}
.swap__r{background:#171107;border:1px solid var(--line);border-radius:5px;
  padding:14px 12px;text-align:center}
.swap__r--a{border-color:rgba(242,86,93,.55)}
.swap__r--b{border-color:rgba(255,199,44,.5)}
.swap__t{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.swap__r--a .swap__t{color:var(--red)}
.swap__r--b .swap__t{color:var(--gold)}
.swap__m{font-size:13px;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.25}
.swap__x{position:relative;width:44px;height:46px;flex:none}
.swap__x span{position:absolute;left:0;right:0;height:2px;background:var(--muted)}
.swap__x span:first-child{top:13px;transform:rotate(9deg)}
.swap__x span:last-child{bottom:13px;transform:rotate(-9deg)}
.swap__x span::after{content:"";position:absolute;top:-3px;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.swap__x span:first-child::after{right:0;border-left:6px solid var(--muted)}
.swap__x span:last-child::after{left:0;border-right:6px solid var(--muted)}
.swap__f{grid-column:1/-1;text-align:center;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);font-size:11.5px;font-weight:700;
  letter-spacing:.05em;color:var(--muted)}
.swap__f b{color:var(--gold)}

/* ── first edition / exposure ────────────── */
.first{position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%,rgba(200,29,37,.34),transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 90%,rgba(255,199,44,.16),transparent 62%),
    #0D0904;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.first::before{content:"";position:absolute;top:-14%;right:-4%;width:min(46vw,560px);height:128%;
  background:var(--gold);opacity:.05;pointer-events:none;
  -webkit-clip-path:polygon(58% 0,100% 0,54% 44%,86% 42%,20% 100%,40% 54%,10% 56%);
  clip-path:polygon(58% 0,100% 0,54% 44%,86% 42%,20% 100%,40% 54%,10% 56%)}
.first__grid{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(26px,5vw,64px);align-items:center}
@media(max-width:840px){.first__grid{grid-template-columns:1fr}}

.seal{width:clamp(150px,19vw,196px);aspect-ratio:1;border-radius:50%;flex:none;
  border:2px solid var(--gold);display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 34%,rgba(255,199,44,.16),transparent 66%);
  box-shadow:0 0 0 8px rgba(255,199,44,.05)}
.seal__k{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.seal__n{font-size:clamp(46px,6vw,64px);font-weight:700;line-height:.95;color:var(--ink);
  letter-spacing:-.02em;margin:4px 0 2px}
.seal__d{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.first h2{font-size:clamp(32px,5vw,58px);margin-bottom:16px}
.first h2 em{font-style:normal;color:var(--gold);display:block}
.first__lede{font-size:clamp(17px,1.7vw,21px);color:var(--ink-2);max-width:60ch;margin:0}
.first__lede b{color:var(--ink)}

.expo{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;margin-top:clamp(30px,4vw,46px);position:relative}
.expo__i{background:#171107;padding:22px 20px 24px;position:relative}
.expo__n{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--gold);margin-bottom:12px}
.expo__i h3{font-size:17px;margin-bottom:6px}
.expo__i p{margin:0;font-size:14px;color:var(--muted)}

.first__quote{position:relative;margin-top:clamp(28px,3.6vw,40px);
  border-left:4px solid var(--red-fill);padding:6px 0 6px 22px;
  font-size:clamp(18px,2.3vw,27px);font-weight:700;line-height:1.28;max-width:52ch}
.first__quote span{color:var(--gold)}

/* ── Xmas Cup ────────────────────────────── */
.xmas{position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 88% 0%,rgba(255,199,44,.20),transparent 62%),
    radial-gradient(ellipse 70% 60% at 8% 100%,rgba(200,29,37,.26),transparent 64%),
    #14100A;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* a restrained festive mark, not a snow globe */
.xmas::before{content:"";position:absolute;top:-90px;right:-60px;width:340px;height:340px;
  border:1px solid rgba(255,199,44,.16);border-radius:50%;pointer-events:none}
.xmas::after{content:"";position:absolute;top:-30px;right:10px;width:220px;height:220px;
  border:1px solid rgba(255,199,44,.10);border-radius:50%;pointer-events:none}

.xmas__grid{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(26px,5vw,64px);align-items:center}
@media(max-width:860px){.xmas__grid{grid-template-columns:1fr}}
.xmas__pot{flex:none;text-align:center}
.xmas__n{font-size:clamp(64px,10vw,118px);font-weight:700;line-height:.88;color:var(--gold);
  letter-spacing:-.03em}
.xmas__u{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-top:10px}
.xmas h2{font-size:clamp(30px,4.6vw,52px);margin-bottom:14px}
.xmas h2 em{font-style:normal;color:var(--gold)}
.xmas__d{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);margin:0;max-width:60ch}
.xmas__d b{color:var(--gold)}

/* Sept → Oct → Nov feeding into December */
.qual{display:grid;grid-template-columns:repeat(3,1fr) auto 1.15fr;gap:10px;align-items:stretch;
  margin-top:clamp(26px,3.6vw,38px)}
.qual__m{background:#241C0C;border:1px solid var(--line);border-radius:5px;
  padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.qual__mk{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.qual__mv{font-size:17px;font-weight:700;color:var(--ink);margin-top:4px}
.qual__arrow{display:grid;place-items:center;color:var(--gold);font-size:22px;padding:0 4px}
.qual__dec{background:linear-gradient(140deg,rgba(255,199,44,.16),transparent 62%),#241C0C;
  border:1px solid var(--gold);border-radius:5px;padding:16px 20px;
  display:flex;flex-direction:column;justify-content:center}
.qual__dk{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold)}
.qual__dv{font-size:17px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.35}

/* the single qualifying rule, called out as one */
.onerule{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,24px);align-items:center;
  background:rgba(255,199,44,.07);border:1px solid var(--gold-dk);border-radius:6px;
  padding:clamp(18px,2.6vw,24px);margin-top:clamp(20px,2.6vw,26px)}
@media(max-width:640px){.onerule{grid-template-columns:1fr}}
.onerule__k{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#1A1408;background:var(--gold);border-radius:99px;padding:7px 15px;white-space:nowrap;
  justify-self:start}
.onerule p{margin:0;font-size:15.5px;color:var(--ink-2)}
.onerule p b{color:var(--gold)}

@media(max-width:1000px){
  .qual{grid-template-columns:repeat(3,1fr)}
  .qual__arrow{display:none}
  .qual__dec{grid-column:1/-1}
}
@media(max-width:560px){
  .qual{grid-template-columns:1fr}
}

/* ── ROI section ─────────────────────────── */
.roi-hero{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4.5vw,52px);align-items:center;
  background:linear-gradient(150deg,rgba(255,199,44,.13),transparent 62%),#241C0C;
  border:1px solid var(--line);border-left:6px solid var(--gold);
  border-radius:6px;padding:clamp(24px,3.6vw,42px)}
@media(max-width:780px){.roi-hero{grid-template-columns:1fr}}
.roi-hero__n{font-size:clamp(62px,10vw,116px);font-weight:700;line-height:.9;
  color:var(--gold);letter-spacing:-.03em}
.roi-hero__u{font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}
.roi-hero__d{margin:0;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2)}
.roi-hero__d b{color:var(--gold)}

.roi-math{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:clamp(20px,2.6vw,26px)}
.roi-math__i{background:#241C0C;border:1px solid var(--line);border-radius:5px;padding:16px 18px}
.roi-math__k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.roi-math__v{font-size:clamp(20px,2.4vw,25px);font-weight:700;color:var(--ink);margin-top:5px;line-height:1.1}
.roi-math__i--hi{border-color:var(--gold)}
.roi-math__i--hi .roi-math__v{color:var(--gold)}

/* calculator */
.calc{background:#241C0C;border:1px solid var(--line);border-radius:6px;
  padding:clamp(22px,3.2vw,34px);margin-top:clamp(22px,3vw,30px)}
.calc__top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.calc__lab{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.calc__val{font-size:clamp(28px,3.6vw,38px);font-weight:700;color:var(--gold);line-height:1;
  font-variant-numeric:tabular-nums}
.calc__val span{font-size:14px;color:var(--muted);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-left:8px}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:#0E0B04;border-radius:3px;margin:22px 0 4px;cursor:pointer}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--gold);border:3px solid #241C0C;cursor:grab;
  box-shadow:0 0 0 1px var(--gold-dk)}
.calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:var(--gold);border:3px solid #241C0C;cursor:grab}
.calc__ticks{display:flex;justify-content:space-between;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.calc__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;
  overflow:hidden;margin-top:26px}
.calc__c{background:#1B1509;padding:18px 20px}
.calc__ck{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.calc__cv{font-size:clamp(21px,2.6vw,27px);font-weight:700;margin-top:6px;line-height:1;
  font-variant-numeric:tabular-nums}
.calc__c--now .calc__cv{color:var(--ink-2)}
.calc__c--x3 .calc__cv{color:var(--gold)}
.calc__c--net .calc__cv{color:var(--red)}
.calc__note{font-size:13.5px;color:var(--muted);margin:16px 0 0}

/* how it works */
.roi-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2vw,20px);margin-top:clamp(22px,3vw,30px)}
.roi-how__i{background:#241C0C;border:1px solid var(--line);border-radius:5px;padding:22px 20px}
.roi-how__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.roi-how__i h3{font-size:18px;margin-bottom:7px}
.roi-how__i p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── registration ────────────────────────── */
.entry{background:linear-gradient(160deg,rgba(200,29,37,.16),transparent 58%),#241C0C;
  color:var(--ink);border-radius:6px;
  padding:clamp(26px,4vw,50px);border:1px solid var(--line);border-top:6px solid var(--red-fill)}
.entry__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,4.5vw,54px);align-items:start}
@media(max-width:920px){.entry__grid{grid-template-columns:1fr}}
.entry h2{margin-bottom:14px}
.entry .lede{color:var(--ink-2)}
.fee{display:flex;align-items:baseline;gap:12px;margin:0 0 20px}
.fee__n{font-size:clamp(46px,6.5vw,66px);font-weight:700;color:var(--gold);line-height:1}
.fee__l{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fee__vat{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:none;
  color:var(--gold);margin-top:4px;font-weight:700}
.roi-math__vat{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--gold);margin-top:5px}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:12px;padding:8px 0;font-size:15.5px;color:var(--ink-2)}
.checks li::before{content:"";width:8px;height:8px;flex:none;margin-top:9px;
  background:var(--gold);transform:rotate(45deg)}
.dates{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line)}
.dates__i{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dates__v{display:block;font-size:17px;letter-spacing:0;text-transform:none;
  color:var(--gold);margin-top:4px}

/* ── form ────────────────────────────────── */
.entryform{display:flex;flex-direction:column;gap:15px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:520px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.field input[type=text],
.field input[type=email],
.field input[type=number],
.field input[type=url],
.field input[type=tel],
.field input[type=search],
.field select,
.field textarea{
  -webkit-appearance:none;appearance:none;          /* iOS adds an inner shadow otherwise */
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#0E0B04;border:1px solid var(--line);border-radius:3px;
  padding:12px 14px;width:100%;transition:border-color .16s ease,box-shadow .16s ease
}
.field textarea{resize:vertical;min-height:80px}
.field ::placeholder{color:#7C7059}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,199,44,.45)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,199,44,.22)}
.field select{-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--ink);
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:#1B1509;color:var(--ink)}
.field--err input,.field--err select{border-color:var(--red);background:#2A0C0E}
.err{font-size:12px;font-weight:700;color:var(--red);display:none}
.field--err .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;
  color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent input{margin:3px 0 0;accent-color:var(--gold);width:17px;height:17px;flex:none;cursor:pointer}
.consent--err{color:var(--red)}
.formnote{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0}
.formmsg{border:2px solid var(--gold);border-radius:5px;padding:26px;text-align:center;display:none}
.formmsg h3{color:var(--gold);margin-bottom:10px}
.formmsg p{margin:0;font-size:15px;color:var(--ink-2)}
.formmsg.show{display:block}
.formfail{font-size:14.5px;font-weight:700;color:var(--red);margin:0;display:none}
.formfail.show{display:block}
.hide{display:none !important}

/* ── faq ─────────────────────────────────── */
.faq{border-top:2px solid var(--gold)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;
  justify-content:space-between;gap:20px;align-items:center;
  font-size:clamp(17px,2vw,21px);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--gold);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{max-width:76ch;color:var(--muted);font-size:16px;padding-bottom:8px}

/* ── social links ────────────────────────── */
.social{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social__a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--line);border-radius:4px;padding:9px 14px 9px 12px;
  color:var(--ink-2);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.social__a:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,199,44,.07)}
.social__a svg{width:17px;height:17px;flex:none;fill:currentColor;display:block}
.social__lab{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-right:4px}
@media(max-width:520px){.social__lab{width:100%;margin:0 0 4px}}

/* ── footer ──────────────────────────────── */
.foot{background:#0A0703;color:var(--muted);padding:clamp(34px,4.5vw,50px) 0 28px;
  border-top:6px solid var(--red-fill)}
.foot__in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot__brand{display:flex;flex-direction:column;gap:15px}
.foot .mark img{height:74px}
.foot__partners{display:flex;align-items:center;gap:22px}
.foot__partners img{display:block;width:auto}
.foot__partners .lg-cb{height:25px}
.foot__partners .lg-gts{height:32px}
.foot__links{display:flex;gap:22px;flex-wrap:wrap}
.foot__links a{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.foot__links a:hover{color:var(--gold)}
.badge18{display:inline-flex;align-items:center;border:1px solid var(--line);
  padding:8px 14px;border-radius:3px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.foot__legal{font-size:12.5px;color:#8E8067;margin:28px 0 0;line-height:1.75;max-width:110ch}

/* ── motion ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ── newsletter ──────────────────────────── */
.news{background:linear-gradient(150deg,rgba(255,199,44,.10),transparent 58%),#1B1509;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.news__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);
  align-items:center;padding:clamp(38px,5.5vw,64px) 0}
/* Below 880px the two columns become one. Centre the whole block and cap the
   measure, so on a phone the text does not run from edge to edge and the
   form does not stretch across the full width. */
@media(max-width:880px){
  .news .news__in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
    max-width:560px;margin-inline:auto;gap:26px}
  .news__d{margin-inline:auto}
  .news__what{width:100%;max-width:460px;text-align:left}
  .news__form{width:100%}
}
@media(max-width:520px){
  .news .news__in{max-width:100%}
  .news__i{grid-template-columns:minmax(0,1fr);gap:4px}
  .news__i p{padding-top:0}
}
.news h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:12px}
.news__d{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2);margin:0 0 22px;max-width:52ch}

.news__what{display:grid;gap:12px}
.news__i{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.news__k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#1A1408;background:var(--gold);border-radius:99px;padding:5px 11px;white-space:nowrap}
.news__i p{margin:0;font-size:15px;color:var(--muted);padding-top:3px}

.news__form{background:#241C0C;border:1px solid var(--line);border-radius:6px;
  padding:clamp(22px,3vw,30px)}
.news__row{display:flex;gap:10px;flex-wrap:wrap}
.news__row input{flex:1 1 200px;min-width:0;font-family:var(--sans);font-size:16px;
  color:var(--ink);background:#0E0B04;border:1px solid var(--line);border-radius:3px;
  padding:13px 15px;transition:border-color .16s ease,box-shadow .16s ease}
.news__row input::placeholder{color:#7C7059}
.news__row input:hover{border-color:rgba(255,199,44,.45)}
.news__row input:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,199,44,.22)}
.news__row .btn{flex:none}
.news--err .news__row input{border-color:var(--red);background:#2A0C0E}
.news__err{font-size:13px;font-weight:700;color:var(--red);margin:10px 0 0;display:none}
.news--err .news__err{display:block}
.news__fine{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.55}
.news__fine a{color:var(--gold)}
.news__ok{display:none;text-align:center;padding:8px 0}
.news__ok h3{color:var(--gold);font-size:20px;margin-bottom:8px}
.news__ok p{margin:0;font-size:15px;color:var(--ink-2)}
.news__ok.show{display:block}

/* ── links to streamgts.com ──────────────── */
/* the header credit */
a.topbar__by{text-decoration:none;transition:color .16s ease}
a.topbar__by:hover{color:var(--gold)}

/* the two badges under the hero buttons */
a.pw{display:flex;align-items:center;gap:10px;text-decoration:none;
  transition:color .16s ease}
a.pw:hover{color:var(--gold)}

/* the platform cards in the concept section */
a.card--l{text-decoration:none;color:inherit;transition:border-color .16s ease}
a.card--l:hover{border-color:var(--gold)}
a.card--l h3::after{content:"\2197";font-size:.66em;margin-left:7px;
  color:var(--gold);vertical-align:top}

/* the StreamGTS mark beside the requirement card */
a.req__badge{text-decoration:none;color:inherit;transition:opacity .16s ease}
a.req__badge:hover{opacity:.82}

/* the first step chip */
a.req__s{text-decoration:none;transition:border-color .16s ease,color .16s ease}
a.req__s:hover{border-color:var(--gold);color:var(--gold)}

/* the footer partner marks */
.foot__partners a{display:inline-flex;transition:opacity .16s ease}
.foot__partners a:hover{opacity:.7}

/* ── scroll to top ───────────────────────── */
.totop{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:60;
  width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;
  /* the ring is a conic gradient driven by --p, set from JS */
  background:conic-gradient(var(--gold) calc(var(--p,0) * 1%), rgba(255,199,44,.18) 0);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop::before{
  content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;
  background:#241C0C;border:1px solid var(--line);
}
.totop svg{position:relative;width:19px;height:19px;fill:none;
  stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease}
.totop:hover::before{background:#2E2410}
.totop:hover svg{transform:translateY(-2px)}
.totop:active{transform:scale(.94)}
@media(max-width:520px){.totop{width:48px;height:48px}.totop svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){
  .totop{transition:opacity .01ms}
  .totop svg,.totop:active{transition:none;transform:none}
}

/* ══════════════════════════════════════════════
   LEGAL PAGES (terms, privacy)
   ══════════════════════════════════════════════ */
.legal{padding:clamp(40px,6vw,72px) 0 clamp(52px,7vw,86px)}
.legal__wrap{max-width:820px;margin:0 auto;padding-inline:var(--gut)}
.legal__head{margin-bottom:clamp(28px,4vw,44px);padding-bottom:clamp(22px,3vw,30px);
  border-bottom:2px solid var(--gold)}
.legal__head h1{font-size:clamp(32px,5vw,50px);margin-bottom:12px}
.legal__meta{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.legal__intro{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2);margin:18px 0 0}

.legal__toc{background:#241C0C;border:1px solid var(--line);border-radius:6px;
  padding:22px 24px;margin-bottom:clamp(30px,4vw,44px)}
.legal__toc h2{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.legal__toc ol{margin:0;padding-left:20px;columns:2;column-gap:30px}
@media(max-width:640px){.legal__toc ol{columns:1}}
.legal__toc li{margin-bottom:7px;font-size:14.5px;break-inside:avoid}
.legal__toc a{color:var(--ink-2);text-decoration:none}
.legal__toc a:hover{color:var(--gold)}

.legal h2.sec{font-size:clamp(20px,2.6vw,26px);margin:clamp(34px,4.4vw,48px) 0 14px;
  scroll-margin-top:90px}
.legal h2.sec span{color:var(--gold);margin-right:10px}
.legal h3{font-size:17px;margin:24px 0 8px;color:var(--ink)}
.legal p{font-size:15.5px;color:var(--ink-2);margin:0 0 14px;line-height:1.7}
.legal ul,.legal ol.list{margin:0 0 16px;padding-left:22px}
.legal li{font-size:15.5px;color:var(--ink-2);margin-bottom:8px;line-height:1.65}
.legal strong{color:var(--ink)}
.legal a{color:var(--gold)}

.legal__box{background:#241C0C;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:5px;padding:20px 22px;margin:20px 0}
.legal__box--warn{border-left-color:var(--red-fill)}
.legal__box p:last-child{margin-bottom:0}
.legal__box b{color:var(--gold)}
.legal__box--warn b{color:var(--red)}

.legal__tbl{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:15px}
.legal__tbl th,.legal__tbl td{text-align:left;padding:11px 14px;border:1px solid var(--line)}
.legal__tbl th{background:#241C0C;color:var(--gold);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.legal__tbl td{color:var(--ink-2)}
.legal__tbl td:last-child{white-space:nowrap;font-weight:700;color:var(--ink)}

.legal__fill{background:rgba(200,29,37,.14);border:1px dashed var(--red);border-radius:3px;
  padding:1px 7px;color:var(--red);font-weight:700;font-size:.94em}

/* ══════════════════════════════════════════════
   LIVE LEADERBOARD PAGE
   ══════════════════════════════════════════════ */
.lbpage{padding-top:clamp(30px,5vw,60px)}
.lb__bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:clamp(18px,3vw,26px) 0 clamp(14px,2vw,20px)}
.lb__livewrap{display:inline-flex;align-items:center;gap:9px;font-size:13px;
  font-weight:700;letter-spacing:.06em;color:var(--muted)}
.lb__dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;position:relative}
.lb__dot.is-live{background:#37d67a;box-shadow:0 0 0 0 rgba(55,214,122,.55);animation:lbpulse 1.8s infinite}
@keyframes lbpulse{0%{box-shadow:0 0 0 0 rgba(55,214,122,.5)}70%{box-shadow:0 0 0 8px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
.lb__stamp{font-weight:400;letter-spacing:0}
.lb__search{margin-left:auto;min-width:210px;flex:0 1 300px;
  background:#241C0C;border:1px solid var(--line);border-radius:6px;
  color:var(--ink);font-family:inherit;font-size:15px;padding:10px 14px}
.lb__search::placeholder{color:var(--muted)}
.lb__search:focus{outline:none;border-color:var(--gold-dk)}

.lb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#1B1509}
.lb__head,.lb__row{display:grid;
  grid-template-columns:58px minmax(0,1fr) 118px 92px 92px 108px;
  align-items:center;gap:12px;padding:14px 18px}
.lb__more{display:contents}
.lb__head{background:#241C0C;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.lb__head>div:nth-child(n+3){text-align:right}
.lb__body .lb__row{border-bottom:1px solid var(--line-soft)}
.lb__body .lb__row:last-child{border-bottom:0}
.lb__row{transition:background .12s}
.lb__row:hover{background:rgba(255,199,44,.045)}

.lb__rank{font-size:19px;font-weight:700;color:var(--muted);text-align:center}
.lb__model{display:flex;flex-direction:column;gap:1px;min-width:0}
.lb__name{font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.lb__name:hover{color:var(--gold);text-decoration:underline}
.lb__country{font-size:12px;color:var(--muted);letter-spacing:.04em}
.lb__bp{text-align:right;font-size:16px}
.lb__bp b{color:var(--gold)}
.lb__stat{text-align:right;font-size:15px;color:var(--ink-2)}
.lb__stat b{font-weight:700}
.lb__prize{text-align:right;font-weight:700}
.lb__prizev{color:var(--ink)}
.lb__dash{color:var(--muted)}
.lbl{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em}
.lb__head+.lb__body .lbl,.lb__row .lbl{display:none}      /* headers carry the labels on desktop */

/* Top 6 accents — same medal palette as the podium */
.lb__row--r1{background:rgba(255,199,44,.10)}
.lb__row--r1 .lb__rank{color:var(--gold)}
.lb__row--r2 .lb__rank{color:var(--silver)}
.lb__row--r3 .lb__rank{color:var(--bronze)}
.lb__row--r4 .lb__rank{color:var(--pl4)}
.lb__row--r5 .lb__rank{color:var(--pl5)}
.lb__row--r6 .lb__rank{color:var(--pl6)}
.lb__row--r1 .lb__rank,.lb__row--r2 .lb__rank,.lb__row--r3 .lb__rank,
.lb__row--r4 .lb__rank,.lb__row--r5 .lb__rank,.lb__row--r6 .lb__rank{font-size:22px}

.lb__empty{padding:34px 18px;text-align:center;color:var(--muted)}

@media(max-width:820px){
  .lb__head{display:none}
  .lb__row{grid-template-columns:40px minmax(0,1fr) auto;gap:5px 12px;padding:15px 15px}
  .lb__rank{grid-row:1 / span 2;align-self:center;font-size:20px}
  .lb__model{grid-column:2;grid-row:1}
  .lb__bp{grid-column:3;grid-row:1;align-self:center}
  .lb__more{display:flex;grid-column:2 / -1;grid-row:2;gap:16px;flex-wrap:wrap;align-items:baseline}
  .lb__stat,.lb__prize{text-align:left;font-size:13.5px}
  .lb__prize{margin-left:auto}
  .lb__row .lbl{display:inline}          /* show inline labels on mobile */
  .lb__row--r1 .lb__rank,.lb__row--r2 .lb__rank,.lb__row--r3 .lb__rank,
  .lb__row--r4 .lb__rank,.lb__row--r5 .lb__rank,.lb__row--r6 .lb__rank{font-size:20px}
}

/* ── Home "The Models" section: more compact cards ── */
/* 8 cards — only 1, 2 and 4 columns divide evenly, so 3 is skipped */
#models .roster{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:899px){#models .roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:559px){#models .roster{grid-template-columns:minmax(0,1fr)}}
#models .mc__photo{aspect-ratio:1/1}
#models .mc__body{padding:13px 14px 15px}
#models .mc__n{font-size:16px}
#models .mc__c{font-size:11px}
#models .mc__bio{font-size:13.5px;margin:0 0 12px}
#models .mc__rank{font-size:11px;padding:5px 10px}
#models .mc__soc{margin-bottom:12px}
#models .mc__soclink{width:31px;height:31px}
#models .mc__slot svg{width:34px;height:34px}

/* ── Partner Studios: perks on a single row ── */
#studios-section .perks{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#studios-section .perks__i{padding:14px 13px}
#studios-section .perks__k{font-size:10px;letter-spacing:.09em;margin-bottom:7px}
#studios-section .perks__i p{font-size:12.5px;line-height:1.45}
@media(max-width:1180px){#studios-section .perks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#studios-section .perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){#studios-section .perks{grid-template-columns:minmax(0,1fr)}}

/* ── Referral program: perks on a single row ── */
#referral .perks{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#referral .perks__i{padding:14px 13px}
#referral .perks__k{font-size:10px;letter-spacing:.09em;margin-bottom:7px}
#referral .perks__i p{font-size:12.5px;line-height:1.45}
@media(max-width:1180px){#referral .perks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#referral .perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){#referral .perks{grid-template-columns:minmax(0,1fr)}}

/* ══════════════════════════════════════════════
   MOBILE MENU  (built by assets/nav.js)
   Below 980px the bar shows a hamburger that opens
   a drop-down with the nav links and the language
   switch. Above 980px none of this is visible.
   ══════════════════════════════════════════════ */
.navtoggle{display:none}
.navdrop{display:none}

@media(max-width:980px){
  /* the button */
  .navtoggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;flex:none;padding:0 9px;cursor:pointer;
    background:none;border:1px solid var(--line);border-radius:6px;
    transition:border-color .15s,background .15s}
  .navtoggle:hover{border-color:var(--gold-dk);background:rgba(255,199,44,.06)}
  .navtoggle span{display:block;height:2px;width:100%;border-radius:2px;background:var(--ink);
    transition:transform .22s ease,opacity .18s ease}
  .navtoggle[aria-expanded="true"]{border-color:var(--gold)}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* the language switch stays in the bar at every width — it just gets
     tighter so the logo, the switch and the Register button all fit */
  .topbar__in > .langsw{display:block;order:3}
  .topbar__in > .langsw summary{padding:6px 8px;font-size:10.5px;letter-spacing:.05em}

  /* the panel */
  .navdrop{display:block;position:absolute;left:0;right:0;top:100%;
    background:rgba(11,8,3,.985);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:3px solid var(--red-fill);
    max-height:0;overflow:hidden;
    transition:max-height .28s cubic-bezier(.4,0,.2,1)}
  .navdrop[hidden]{display:none}
  .navdrop.on{max-height:min(76vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .navdrop__in{padding:6px 0 16px}
  .navdrop__links{display:flex;flex-direction:column}
  .navdrop__links a{display:block;padding:14px 2px;font-size:16px;font-weight:700;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-soft)}
  .navdrop__links a:last-child{border-bottom:0}
  .navdrop__links a:active{color:var(--gold)}
  .navdrop__lang{display:flex;align-items:center;gap:12px;padding:16px 2px 0}
  .navdrop__lk{font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
}

@media(prefers-reduced-motion:reduce){
  .navdrop{transition:none}
  .navtoggle span{transition:none}
}

/* ── referral link builder ─────────────────── */
.reflink{border:1px solid var(--line);border-radius:8px;background:#241C0C;
  padding:clamp(18px,2.4vw,24px);margin-top:clamp(20px,2.6vw,26px)}
.reflink__hd{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.reflink__d{margin:0 0 15px;font-size:15px;color:var(--ink-2)}
.reflink__row{display:flex;gap:10px;flex-wrap:wrap}
.reflink__row input{flex:1 1 220px;min-width:0;background:#171107;
  border:1px solid var(--line);border-radius:6px;color:var(--ink);
  font-family:inherit;font-size:16px;padding:11px 14px}
.reflink__row input::placeholder{color:var(--muted)}
.reflink__row input:focus{outline:none;border-color:var(--gold-dk)}
.reflink__out{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:14px 16px;border:1px dashed rgba(255,199,44,.42);border-radius:6px;
  text-align:center}
.reflink__url{flex:1 1 auto;min-width:0;font-size:14.5px;color:var(--gold);
  word-break:break-all;font-weight:700;text-align:center}
.reflink__out .btn{flex:0 0 auto;align-self:center}
@media(max-width:560px){
  .reflink__out{flex-direction:column;gap:12px}
  .reflink__out .btn{width:100%;max-width:220px}
}
.reflink__fine{margin:13px 0 0}


/* ══════════════════════════════════════════════
   RESPONSIVE SAFETY NET
   Grid and flex children default to min-width:auto,
   which stops them shrinking below their content and
   pushes the page sideways. These rules make every
   track shrinkable and keep media inside its box.
   ══════════════════════════════════════════════ */
img,svg,video,iframe{max-width:100%}
/* NOTE: .wrap must keep its 1180px ceiling. An earlier "max-width:100%"
   here silently overrode it and let every section run to the window edge
   on wide screens. Clamp instead of override. */
.wrap{max-width:min(1180px,100%)}
.grid>*,.perks>*,.studios>*,.roster>*,.top6>*,.spec>*,.flow>*,.wtl>*,
.expo>*,.scale>*,.roi-how>*,.roi-math>*,.calc__out>*,.qual>*{min-width:0}
.bonus__r>*,.lb__row>*,.lb__head>*,.mc__stats>*{min-width:0}
.mc__n,.sc__n,.lb__name{word-break:break-word;overflow-wrap:anywhere}

/* spam trap — off-screen, never seen by a person */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ══════════════════════════════════════════════
   LIGHTNING SECTIONS  ·  .bolt
   A reusable version of the Edition 001 treatment:
   a dark ground, two soft colour washes and a bolt
   drawn in CSS at very low opacity.

   Use:   <section class="block bolt bolt--red"> … </section>
   Variants: --red (default) · --gold · --dual · --deep
   Add .bolt--mirror to flip the bolt to the left.

   The bolt is decorative only: it is drawn with a
   pseudo-element, never overlaps text, scales with the
   viewport and disappears on small phones where it
   would only add noise.
   ══════════════════════════════════════════════ */
.bolt{position:relative;overflow:hidden;isolation:isolate;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%,rgba(200,29,37,.34),transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 90%,rgba(255,199,44,.16),transparent 62%),
    #0D0904}

/* the bolt itself */
.bolt::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-14%;right:-4%;width:min(46vw,560px);height:128%;
  background:var(--gold);opacity:.05;
  -webkit-clip-path:polygon(58% 0,100% 0,54% 44%,86% 42%,20% 100%,40% 54%,10% 56%);
  clip-path:polygon(58% 0,100% 0,54% 44%,86% 42%,20% 100%,40% 54%,10% 56%)}
.bolt--mirror::before{right:auto;left:-4%;transform:scaleX(-1)}

/* keep content above the artwork */
.bolt>.wrap{position:relative;z-index:1}

/* ── colour variants ── */
.bolt--gold{background:
  radial-gradient(ellipse 90% 70% at 12% 0%,rgba(255,199,44,.22),transparent 60%),
  radial-gradient(ellipse 70% 60% at 92% 90%,rgba(200,29,37,.14),transparent 62%),
  #0D0904}
.bolt--gold::before{opacity:.07}

.bolt--dual{background:
  radial-gradient(ellipse 80% 62% at 8% 6%,rgba(200,29,37,.30),transparent 58%),
  radial-gradient(ellipse 80% 62% at 96% 94%,rgba(255,199,44,.20),transparent 58%),
  #0C0803}

.bolt--deep{background:
  radial-gradient(ellipse 100% 80% at 50% -10%,rgba(255,199,44,.13),transparent 62%),
  #0A0703}
.bolt--deep::before{opacity:.045}

/* ── a second, smaller bolt for depth (opt-in) ── */
.bolt--twin::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  bottom:-18%;left:6%;width:min(26vw,300px);height:92%;
  background:var(--red-fill);opacity:.05;
  -webkit-clip-path:polygon(58% 0,100% 0,54% 44%,86% 42%,20% 100%,40% 54%,10% 56%);
  clip-path:polygon(58% 0,100% 0,54% 44%,86% 42%,20% 100%,40% 54%,10% 56%)}

/* ── responsive behaviour ────────────────────
   Below 900px the bolt moves out of the way of the
   text; below 600px it is dropped entirely, because at
   phone width a full-height bolt sits behind the copy
   and hurts legibility more than it helps.          */
@media(max-width:900px){
  .bolt::before{width:min(60vw,340px);right:-14%;opacity:.045}
  .bolt--mirror::before{left:-14%;right:auto}
  .bolt--twin::after{width:min(38vw,200px);left:-8%;opacity:.04}
}
@media(max-width:600px){
  .bolt::before,.bolt--twin::after{display:none}
  .bolt{background:
    radial-gradient(ellipse 120% 50% at 20% 0%,rgba(200,29,37,.26),transparent 62%),
    radial-gradient(ellipse 110% 45% at 90% 100%,rgba(255,199,44,.13),transparent 62%),
    #0D0904}
  .bolt--gold{background:
    radial-gradient(ellipse 120% 50% at 20% 0%,rgba(255,199,44,.18),transparent 62%),
    #0D0904}
  .bolt--dual{background:
    radial-gradient(ellipse 130% 46% at 6% 2%,rgba(200,29,37,.24),transparent 60%),
    radial-gradient(ellipse 130% 46% at 96% 98%,rgba(255,199,44,.16),transparent 60%),
    #0C0803}
  .bolt--deep{background:
    radial-gradient(ellipse 130% 55% at 50% -6%,rgba(255,199,44,.11),transparent 64%),
    #0A0703}
}

/* very wide screens: stop the bolt stretching thin */
@media(min-width:1800px){
  .bolt::before{width:640px;right:2%}
  .bolt--twin::after{width:340px;left:10%}
}

/* ── content pieces that pair with a bolt section ── */
.bolt__seal{width:clamp(150px,19vw,196px);aspect-ratio:1;border-radius:50%;flex:none;
  border:2px solid var(--gold);display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 34%,rgba(255,199,44,.16),transparent 66%);
  box-shadow:0 0 0 8px rgba(255,199,44,.05)}
.bolt__k{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.bolt__n{font-size:clamp(46px,6vw,64px);font-weight:700;line-height:.95;color:var(--ink);
  letter-spacing:-.02em;margin:4px 0 2px}
.bolt__d{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.bolt__grid{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,5vw,64px);align-items:center}
@media(max-width:840px){.bolt__grid{grid-template-columns:minmax(0,1fr)}}

.bolt__quote{position:relative;margin-top:clamp(28px,3.6vw,40px);
  border-left:4px solid var(--red-fill);padding:6px 0 6px 22px;
  font-size:clamp(18px,2.3vw,27px);font-weight:700;line-height:1.28;max-width:52ch}
.bolt__quote span{color:var(--gold)}

@media(prefers-reduced-motion:reduce){.bolt::before,.bolt--twin::after{transition:none}}

/* Terms tables: Russian words are long — let them wrap and scroll
   rather than pushing the page sideways on small phones. */
.legal__tbl{table-layout:auto;width:100%}
.legal__tbl th,.legal__tbl td{word-break:break-word;overflow-wrap:anywhere;word-break:normal}
@media(max-width:520px){
  .legal__tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .legal__tbl th,.legal__tbl td{font-size:14px;padding:9px 10px}
}

/* Long button labels (RO/ES wrap longer than EN) must never push the page
   sideways — let them break inside the button instead. */
.btn{max-width:100%;white-space:normal;text-align:center;word-break:break-word;overflow-wrap:anywhere}
.reflink__row .btn,.fundsel__b{white-space:normal}

/* Registration form: the "registering as" choice comes first, because it
   changes the labels of every field below it. Give it a little weight so
   people answer it before they start typing. */
.frow--first{padding:14px 16px;margin-bottom:16px;border-radius:7px;
  background:rgba(255,199,44,.05);border:1px solid var(--line)}
.frow--first label{color:var(--gold)}
/* a field left alone in a row takes the full width instead of half */
.frow > .field:only-child{grid-column:1 / -1}

/* The top bar gained another nav link, and some languages have longer words.
   Between 980px and ~1180px the row can run out of room, so let the links
   shrink before the Register button is pushed off the edge. */
@media(min-width:981px) and (max-width:1180px){
  .topbar__in{gap:11px}
  .topbar__links{gap:14px}
  .topbar__links a{font-size:13px}
  .topbar__by{font-size:0;gap:0}
  .topbar__by img{height:24px}
  .langsw summary{padding:6px 8px;font-size:11px}
  .topbar .btn--sm{padding:9px 13px;font-size:11.5px}
}


/* ── top bar on phones: logo · language · register · menu ──
   Four languages need room, so below 560px the bar drops the
   "by StreamGTS" wordmark and tightens everything else. */
@media(max-width:560px){
  .topbar__in{gap:7px;height:64px}
  .topbar__by{display:none}
  .mark img{height:34px}
  .topbar__in > .langsw summary{padding:6px 7px;font-size:10px;letter-spacing:.02em;gap:4px}
  .topbar .btn--sm{padding:8px 10px;font-size:10.5px;letter-spacing:.05em}
  .navtoggle{width:38px;height:38px;padding:0 8px;gap:4px}
}
@media(max-width:380px){
  .topbar__in > .langsw summary{padding:5px 6px;font-size:9.5px;gap:3px}
  .langsw summary svg:first-child{display:none}
  .topbar .btn--sm{padding:7px 8px;font-size:10px}
}

/* ══════════════════════════════════════════════
   SAFARI / iOS COMPATIBILITY
   Everything here exists because WebKit needs it,
   not because the modern CSS above is wrong.
   ══════════════════════════════════════════════ */

/* iOS inflates text when you rotate the phone unless this is set */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* stops the grey flash on every tap in iOS Safari */
a,button,summary,.btn,.seg button{-webkit-tap-highlight-color:rgba(255,199,44,.18)}

/* momentum scrolling inside anything that scrolls on its own */
.lb,.legal__tbl,.navdrop{-webkit-overflow-scrolling:touch}

/* aspect-ratio landed in Safari 15. On iOS 14 and older the padding-top
   trick keeps every square and 4:5 box the right shape instead of
   collapsing to zero height. */
@supports not (aspect-ratio: 1 / 1){
  .mc__photo{height:0;padding-top:125%}            /* 4:5 */
  #models .mc__photo{padding-top:100%}             /* 1:1 on the home roster */
  .mc__photo img,.mc__photo .mc__slot{position:absolute;top:0;left:0;width:100%;height:100%}
  .donut,.seal,.bolt__seal{height:0;padding-top:min(26vw,250px)}
  .donut{width:clamp(190px,26vw,250px)}
}

/* Safari renders a select with its own arrow unless appearance is reset;
   the reset is above, this keeps the text from sitting under our arrow */
.field select{padding-right:38px}

/* iOS Safari refuses to shrink flex items below their content without this */
.frow > .field,.lb__row > *,.mc,.sc{min-width:0}

/* Older WebKit needs the prefixed sticky value in the language switch row */



/* the dropdown menu on small screens: wider tap rows, kept inside the viewport */
@media(max-width:560px){
  .langsw__m{min-width:184px;right:0}
  .langsw__m a{padding:12px 14px;font-size:14px}
}

/* ── GDPR notice under the entry form ─────────
   Deliberately quiet: it has to be present and
   readable, without competing with the button
   right above it. */
.gdpr{margin-top:18px;padding:15px 17px;border:1px solid var(--line-soft);border-radius:6px;
  background:rgba(255,199,44,.03)}
.gdpr p{margin:0 0 9px;font-size:12.5px;line-height:19px;color:var(--muted)}
.gdpr p:last-child{margin-bottom:0}
.gdpr b{color:var(--ink-2)}
.gdpr a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,199,44,.3)}
.gdpr a:hover{border-bottom-color:var(--gold)}
@media(max-width:560px){
  .gdpr{padding:13px 14px}
  .gdpr p{font-size:12px;line-height:18px}
}

/* links inside a consent line: visible, but the click must still toggle
   the box unless the link itself is hit */
.consent a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,199,44,.35)}
.consent a:hover{border-bottom-color:var(--gold)}

/* ══════════════════════════════════════════════
   STICKY FOLLOW RAIL
   Fixed to the left edge, vertically centred, stays
   in place while the page scrolls. No JavaScript.

   It only appears from 1180px up: below that the
   page uses the full width and a floating column
   would cover the text. The same three links live
   in the footer on every page, so nothing is lost.
   ══════════════════════════════════════════════ */
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;
  display:none;flex-direction:column;align-items:center;gap:10px;
  padding:14px 10px;border:1px solid var(--line);border-left:0;
  border-radius:0 10px 10px 0;background:rgba(23,17,7,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* The rail shows from laptop width up. Between 1100 and 1279 the page
   margin is thin, so the rail goes compact (no label, smaller icons) and
   the page gutter widens on both sides — content stays centred, the rail
   stops touching it. */
@media(min-width:1100px){.rail{display:flex}}
@media(min-width:1100px) and (max-width:1279px){
  :root{--gut:78px}
  .rail{padding:10px 8px;gap:8px;border-radius:0 8px 8px 0}
  .rail__lab{display:none}
  .rail__a{width:32px;height:32px;border-radius:6px}
  .rail__a svg{width:15px;height:15px}
}

.rail__lab{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);
  margin-bottom:4px;white-space:nowrap}

.rail__a{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;
  color:var(--ink-2);border:1px solid transparent;transition:.15s;
  -webkit-tap-highlight-color:rgba(255,199,44,.18)}
.rail__a svg{width:17px;height:17px;fill:currentColor;display:block}
.rail__a:hover{color:#1A1408;background:var(--gold);border-color:var(--gold);transform:translateX(2px)}
.rail__a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the rail sits still for anyone who asked for less motion */
@media(prefers-reduced-motion:reduce){.rail__a{transition:none}.rail__a:hover{transform:none}}

/* very short windows: drop the label so the icons always fit */
@media(max-height:560px){.rail__lab{display:none}.rail{padding:10px 8px;gap:8px}}

/* ── social links inside the mobile menu ──────
   The rail is desktop-only, so the phone menu carries
   the same three channels. Icons are cloned from the
   rail, which keeps one source of truth for the URLs. */
.navdrop__soc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.navdrop__sk{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-right:2px}
.navdrop__sa{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;
  color:var(--ink-2);border:1px solid var(--line);text-decoration:none;
  -webkit-tap-highlight-color:rgba(255,199,44,.18)}
.navdrop__sa svg{width:19px;height:19px;fill:currentColor;display:block}
.navdrop__sa:hover,.navdrop__sa:active{color:#1A1408;background:var(--gold);border-color:var(--gold)}
.navdrop__sa span{display:none}          /* the handle text would crowd the row */

/* the footer row of social buttons on small screens */
@media(max-width:560px){
  .social{gap:8px}
  .social__a{gap:7px;padding:8px 11px;font-size:12.5px}
  .social__lab{width:100%;margin-bottom:2px}
}
@media(max-width:400px){
  .social__a span{display:none}          /* icons only, so all three fit one row */
  .social__a{padding:9px 12px}
}


/* ══════════════════════════════════════════════
   SOCIAL ICONS IN THE TOP BAR
   Phones and tablets do not get the side rail, so the
   three channels sit in the bar itself, next to the
   language dropdown and the menu button — icons only,
   because that row has no space for words.
   ══════════════════════════════════════════════ */
.topsoc{display:none;align-items:center;gap:4px;flex:none;order:4}
.topsoc a{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;
  color:var(--ink-2);border:1px solid var(--line);
  -webkit-tap-highlight-color:rgba(255,199,44,.18);transition:.14s}
.topsoc a svg{width:15px;height:15px;fill:currentColor;display:block}
.topsoc a:hover,.topsoc a:active{color:#1A1408;background:var(--gold);border-color:var(--gold)}

/* visible exactly where the rail is not */
@media(max-width:1099px){.topsoc{display:flex}}

/* Phones keep the icons in the bar too. They were previously pushed into
   the dropdown, but the panel scrolls and the social row landed below its
   visible edge — present in the DOM, invisible in practice. Everything in
   the bar shrinks a step instead. */
@media(max-width:479px){
  .topbar__in{gap:5px}
  .topsoc{gap:3px}
  .topsoc a{width:30px;height:30px;border-radius:6px}
  .topsoc a svg{width:15px;height:15px}
  .topbar .btn--sm{padding:7px 8px;font-size:9.5px;letter-spacing:.02em}
  .langsw summary{padding:5px 5px;gap:3px}
  .navtoggle{width:34px;height:34px;padding:0 6px}
}
/* only the very narrowest phones need the icons smaller — at 320px the bar
   is genuinely full: logo, Register, menu, language and three icons */
@media(max-width:359px){
  .topsoc{gap:2px}
  .topsoc a{width:26px;height:26px;border-radius:5px}
  .topsoc a svg{width:13px;height:13px}
  .langsw__c{display:none}          /* the chevron is the least useful pixel here */
}
/* The dropdown copy is no longer needed: the icons now fit in the bar at
   every width, down to 320px. Kept in the DOM (nav.js still builds it) but
   hidden, so nothing appears twice. */
.navdrop__soc{display:none}

/* One scale for the bar icons, largest first. Kept in a single block so a
   later rule cannot silently undo an earlier one — which is exactly what
   happened when these were spread across three media queries.
     ≥1100px  the side rail takes over, the bar icons hide
     480–1099 30px
     360–479  30px, tighter gaps
     <360     26px, the bar is genuinely full at that width */
@media(max-width:1099px){
  .topbar__in{gap:8px}
}

/* ── the Chaturbate logo links to the championship room ──
   The wrapper must not change how the logo sits in any of the four
   places it appears: the hero strip, a concept card, the requirements
   line and the footer. inline-flex with zero line-height keeps the
   image exactly where it was. */
.cblink{display:inline-flex;align-items:center;line-height:0;
  -webkit-tap-highlight-color:rgba(255,199,44,.18)}
.cblink img{transition:opacity .15s ease}
.cblink:hover img{opacity:.82}
.cblink:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ══════════════════════════════════════════════
   COOKIE CONSENT BANNER
   Sits at the bottom, above the sticky rail and the
   back-to-top button. Deliberately not a full-screen
   blocker: the choice is real, but the page behind it
   stays readable while it is made.
   ══════════════════════════════════════════════ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(23,17,7,.97);border-top:1px solid var(--gold-dk);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(101%);transition:transform .24s ease;
  box-shadow:0 -14px 40px rgba(0,0,0,.5)}
.cc--in{transform:none}
.cc__in{max-width:1180px;margin:0 auto;padding:16px clamp(20px,5vw,64px);
  display:flex;align-items:center;gap:clamp(14px,2.5vw,32px);flex-wrap:wrap}
.cc__txt{flex:1 1 420px;min-width:0}
.cc__t{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink)}
.cc__b{margin:0;font-size:13px;line-height:19px;color:var(--muted)}
.cc__b a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,199,44,.35)}
.cc__b a:hover{border-bottom-color:var(--gold)}
.cc__btns{display:flex;gap:10px;flex:none;margin-left:auto}
.cc__btns .btn{white-space:nowrap}

@media(max-width:720px){
  .cc__in{padding:14px 20px;gap:12px}
  .cc__txt{flex:1 1 100%}
  .cc__btns{margin-left:0;width:100%}
  .cc__btns .btn{flex:1 1 0;justify-content:center}
  .cc__b{font-size:12.5px;line-height:18px}
}
/* the rail and the back-to-top button step aside while the banner is up */
.cc--in ~ .totop{bottom:calc(16px + 96px)}
@media(prefers-reduced-motion:reduce){.cc{transition:none}}