/* ===================================================================
   Astro Rust — design system
   Industrial / utilitarian. Matte surfaces, hairlines, one accent.
   No glass, no blur, no gradient text, corners never exceed 3px.
   Loaded by index.html, store.html and login.html.
   =================================================================== */

:root{
  /* surfaces — warm near-black, deliberately not slate-blue */
  --bg:#0b0b0c;
  --bg-2:#0f0f11;
  --panel:#141416;
  --panel-2:#1a1a1d;
  --raise:#202025;

  /* hairlines */
  --line:#26262a;
  --line-2:#33333a;
  --line-3:#45454e;

  /* ink — warm off-white, never #fff */
  --ink:#eae7e2;
  --ink-2:#a3a09a;
  --ink-3:#6f6c67;

  /* one accent, used sparingly */
  --rust:#e0532a;
  --rust-2:#ff6a3d;
  --rust-dim:#8c3317;
  --caution:#d9a32e;
  --live:#6a9d58;
  --off:#8a5b52;

  --r:2px;
  --gutter:clamp(16px,4vw,40px);
  --max:1180px;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Saira Condensed","Archivo Narrow",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.6 var(--body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* drafting-paper grid, fades out down the page */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.021) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.021) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 92%);
}

/* matte film — stops large flat areas reading as flat vector */
body::after{
  content:'';
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--rust); color:#120704; }

:focus-visible{ outline:2px solid var(--rust-2); outline-offset:2px; }

.sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto; padding-inline:var(--gutter);
  position:relative; z-index:1;
}

/* --- type ---------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--disp);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.045em;
  line-height:1.04;
  margin:0;
}

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* every number on this site is tabular — columns line up */
b,strong,.num{ font-variant-numeric:tabular-nums; }

/* small all-caps label, the workhorse of this design */
.lbl{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* --- technical corner ticks ---------------------------------------- */
.plate{ position:relative; }
.plate::before,.plate::after{
  content:''; position:absolute; width:9px; height:9px;
  pointer-events:none; border-style:solid; border-color:var(--rust);
}
.plate::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.plate::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

/* --- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:var(--panel-2);
  color:var(--ink);
  font-family:var(--disp);
  font-size:15px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  cursor:pointer;
  transition:border-color .14s,background .14s,color .14s;
}
.btn:hover{ border-color:var(--line-3); background:var(--raise); }
.btn svg{ width:11px; height:11px; fill:currentColor; flex:none; }

.btn.solid{
  background:var(--rust);
  border-color:var(--rust);
  color:#140703;
}
.btn.solid:hover{ background:var(--rust-2); border-color:var(--rust-2); }

.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background:var(--panel-2); }

.btn[aria-disabled="true"],.btn:disabled{
  opacity:.45; pointer-events:none;
}

.btn-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- state pip ------------------------------------------------------ */
.led{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--live);
  box-shadow:0 0 0 3px rgba(106,157,88,.14);
}
.led.is-off{ background:var(--off); box-shadow:0 0 0 3px rgba(138,91,82,.14); }

.state{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--live);
}
.state.is-off{ color:var(--off); }
.state.is-warn{ color:var(--caution); }

/* ===================================================================
   TOPBAR — wordmark · tab rail · discord · account
   =================================================================== */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(11,11,12,.92);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; gap:18px;
  height:58px;
}
.topbar .scan{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--rust); transform-origin:0 50%; transform:scaleX(0);
}

.mark{ display:flex; align-items:center; gap:10px; flex:none; }
/* the mark is taller than it is wide (100 x 109) — size by height */
.mark svg{ height:24px; width:auto; flex:none; }
.mark span{
  font-family:var(--disp); font-weight:800; font-size:18px;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
.mark em{ font-style:normal; color:var(--rust); }

/* tab rail — reads as a machined selector, not a pill group */
.rail{
  display:flex; align-items:stretch; margin-inline:auto;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
  overflow-x:auto; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

.rail a{
  position:relative;
  display:flex; align-items:center; gap:7px;
  padding:0 15px; height:34px;
  border-right:1px solid var(--line);
  font-family:var(--disp); font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); white-space:nowrap;
  transition:color .14s,background .14s;
}
.rail a:last-child{ border-right:0; }
.rail a:hover{ color:var(--ink-2); background:var(--panel-2); }

.rail a[aria-selected="true"]{
  color:var(--ink);
  background:var(--raise);
}
.rail a[aria-selected="true"]::before{
  content:''; position:absolute; inset:-1px -1px auto -1px; height:2px;
  background:var(--rust);
}

.rail .n{
  font-family:var(--mono); font-style:normal;
  font-size:9px; font-weight:500; letter-spacing:.1em;
  padding:2px 5px; border-radius:var(--r);
  background:var(--line); color:var(--ink-2);
}
.rail a[aria-selected="true"] .n{ background:var(--rust-dim); color:#f5dcd3; }

/* right-hand controls */
.topbar-end{ display:flex; align-items:center; gap:9px; flex:none; margin-left:auto; }

.dc{
  display:flex; align-items:center; gap:8px;
  height:34px; padding:0 13px;
  border:1px solid var(--line-2); border-radius:var(--r);
  font-family:var(--disp); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2);
  transition:color .14s,border-color .14s;
}
.dc:hover{ color:var(--ink); border-color:var(--line-3); }
.dc svg{ width:15px; height:15px; fill:currentColor; }

.acct{
  display:flex; align-items:center; gap:8px;
  height:34px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel);
  font-family:var(--disp); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2); max-width:180px;
  transition:color .14s,border-color .14s;
}
.acct:hover{ color:var(--ink); border-color:var(--line-3); }
.acct .pip{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); flex:none; }
.acct .pfp{ width:19px; height:19px; border-radius:var(--r); object-fit:cover; flex:none; }
.acct .who{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct.is-part{ border-color:var(--caution); color:var(--caution); }
.acct.is-part .pip{ background:var(--caution); }
.acct.is-linked{ border-color:var(--live); color:var(--ink); }
.acct.is-linked .pip{ background:var(--live); }
/* a signed-in name is a person's name — not a UI label, so not uppercase */
.acct .who.is-name{ text-transform:none; letter-spacing:.01em; font-family:var(--body); font-weight:500; font-size:13px; }

.only-wide{ display:inline; }
.only-narrow{ display:none; }

/* ===================================================================
   HERO — asymmetric: identity left, spec plate right
   =================================================================== */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 8% 0%,rgba(224,83,42,.10) 0%,transparent 58%),
    linear-gradient(to bottom,var(--bg-2),var(--bg));
}
/* oversized outlined wordmark, set low so it reads as surface marking */
.hero .wordmark{
  position:absolute; right:-2%; bottom:-14%;
  font-family:var(--disp); font-weight:800; font-size:clamp(130px,21vw,310px);
  line-height:.8; letter-spacing:.02em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.035);
  pointer-events:none; user-select:none; white-space:nowrap;
}
.hero .wrap{ padding-block:clamp(44px,7vw,78px); }

.hero-grid{
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  align-items:center;
}


.hero h1{
  font-size:clamp(50px,9.5vw,104px);
  font-weight:800; letter-spacing:.02em; line-height:.92;
  margin:0 0 18px;
}
.hero h1 .rust{ color:var(--rust); }

.hero .lede{
  margin:0 0 26px; max-width:46ch;
  font-size:clamp(15px,1.6vw,17px); line-height:1.65; color:var(--ink-2);
}
.hero .lede b{ color:var(--ink); font-weight:600; }

/* --- spec plate: ONLY facts true of every server -------------------- */
.spec{
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.spec-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 15px; border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.spec-body{ padding:16px 15px 6px; }

.spec-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px dashed var(--line);
}
.spec-row:last-child{ border-bottom:0; }
.spec-row dt{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.spec-row dd{
  margin:0; text-align:right;
  font-family:var(--disp); font-size:17px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.spec-row dd.varies{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.1em; color:var(--ink-3); text-transform:none;
}
.spec-row dd.varies a{ color:var(--ink-2); border-bottom:1px solid var(--line-3); }
.spec-row dd.varies a:hover{ color:var(--rust); border-color:var(--rust); }

/* --- countdown ------------------------------------------------------ */
.clock{ display:flex; align-items:flex-end; gap:5px; font-variant-numeric:tabular-nums; }
.clock .seg{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:44px; padding:7px 4px 5px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2);
}
.clock .seg b{
  font-family:var(--mono); font-size:19px; font-weight:600; line-height:1;
}
.clock .seg i{
  font-style:normal; font-family:var(--mono); font-size:8px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.clock .wiping{
  display:none; font-family:var(--disp); font-size:19px; font-weight:700;
  color:var(--rust); letter-spacing:.06em; text-transform:uppercase;
}
.clock.now .seg{ display:none; }
.clock.now .wiping{ display:block; }
.clock.sm .seg{ min-width:38px; padding:5px 3px 4px; }
.clock.sm .seg b{ font-size:15px; }

.when{
  margin:9px 0 0;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.when .forced{ color:var(--caution); }

/* ===================================================================
   SECTION HEADERS + PANELS
   =================================================================== */
.panels{ padding-block:clamp(30px,5vw,52px); }
.panel:focus{ outline:none; }

.h-sec{
  display:flex; align-items:center; gap:14px;
  margin:0 0 24px;
  font-size:clamp(23px,3.4vw,31px);
}
.h-sec .idx{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.1em; color:var(--rust);
  padding:4px 7px; border:1px solid var(--rust-dim); border-radius:var(--r);
  background:rgba(224,83,42,.07);
}
.h-sec .rule{ flex:1; height:1px; background:var(--line); }
.h-sec .note{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}

/* ===================================================================
   SERVER ROWS — per-server facts live here
   =================================================================== */
.svr-list{ display:flex; flex-direction:column; gap:12px; }

.svr{
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
  overflow:hidden;
}
.svr.is-soon{ background:var(--bg-2); border-style:dashed; }

.svr-top{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding:17px 18px;
}
/* grid items default to min-width:auto, which lets a long connect string
   push the whole row past the viewport on a phone */
.svr-top > *{ min-width:0; }

.svr-name{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:11px; }
.svr-name h3{ font-size:23px; letter-spacing:.045em; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 8px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.chip.is-mode{ border-color:var(--rust-dim); background:rgba(224,83,42,.08); color:var(--rust-2); }

.svr-cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.connect{
  display:flex; align-items:stretch;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--bg-2); overflow:hidden;
}
.connect code{
  display:flex; align-items:center; gap:8px;
  padding:0 12px; min-height:38px;
  min-width:0;          /* lets the string scroll instead of shoving Copy off */
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
.connect code::-webkit-scrollbar{ display:none; }
.connect code i{ font-style:normal; color:var(--rust); flex:none; }
.connect code b{ color:var(--ink); font-weight:500; }

.copy{
  flex:none; padding:0 14px;
  border:0; border-left:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink-2);
  font-family:var(--disp); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  cursor:pointer; transition:background .14s,color .14s;
}
.copy:hover{ background:var(--raise); color:var(--ink); }
.copy[data-done]{ background:var(--rust); color:#140703; border-left-color:var(--rust); }

.svr-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 18px;
  border:0; border-top:1px solid var(--line);
  background:var(--panel-2);
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  cursor:pointer; transition:color .14s,background .14s;
}
.svr-toggle:hover{ color:var(--ink-2); background:var(--raise); }
.svr-toggle .chev{
  width:7px; height:7px; margin-left:auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s;
}
.svr.is-open .svr-toggle .chev{ transform:rotate(-135deg) translate(-2px,-2px); }

.svr-detail{ display:none; border-top:1px solid var(--line); padding:18px; }
.svr.is-open .svr-detail{ display:block; }
.svr-detail-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}

.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:10px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
}
.stats div{ padding:9px 11px; background:var(--panel); }
.stats b{
  display:block; font-family:var(--disp); font-size:19px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.1;
}
.stats b.hot{ color:var(--rust); }
.stats i{
  font-style:normal; font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}

.pop{ display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.pop b{ font-family:var(--mono); font-size:19px; font-weight:600; }
.pop span{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.bar{ height:3px; margin-top:9px; background:var(--line); border-radius:var(--r); overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--rust); width:0; transition:width .5s; }

.svr-soon-note{ margin:0; font-size:13px; color:var(--ink-3); max-width:40ch; }

.svr-add{
  display:flex; align-items:center; gap:13px;
  padding:17px 18px;
  border:1px dashed var(--line-2); border-radius:var(--r);
  color:var(--ink-3);
}
.svr-add b{
  flex:none; white-space:nowrap;
  font-family:var(--disp); font-size:16px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);
}
.svr-add span{ font-size:13px; }

/* ===================================================================
   WIPES
   =================================================================== */
.wipe-list{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.wipe{
  position:relative; overflow:hidden;
  padding:17px 18px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel);
}
.wipe .cadence{
  font-family:var(--disp); font-size:20px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.wipe .at{
  display:block; margin:5px 0 11px;
  font-family:var(--mono); font-size:11px; color:var(--rust);
  font-variant-numeric:tabular-nums;
}
.wipe p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.wipe p b{ color:var(--ink); font-weight:600; }

/* the one place hazard striping is used */
.wipe.is-force::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:repeating-linear-gradient(45deg,var(--caution) 0 7px,#171510 7px 14px);
}
.wipe.is-force .at{ color:var(--caution); }
.wipe.is-never{ border-style:dashed; }
.wipe.is-never .at{ color:var(--ink-3); }

/* ===================================================================
   RULES — numbered like a rulebook, mono gutter
   =================================================================== */
.rules{ list-style:none; counter-reset:r; margin:0; padding:0; border-top:1px solid var(--line); }
.rules li{
  counter-increment:r;
  display:grid; grid-template-columns:46px minmax(0,1fr); gap:16px;
  padding:15px 2px; border-bottom:1px solid var(--line);
}
.rules li::before{
  content:counter(r,decimal-leading-zero);
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--rust); padding-top:2px;
}
/* both sit in column 2 — the number owns column 1 on its own */
.rules b{
  grid-column:2; display:block; margin-bottom:4px;
  font-family:var(--disp); font-size:18px; font-weight:700;
  text-transform:uppercase; letter-spacing:.045em;
}
.rules .d{ grid-column:2; font-size:13.5px; line-height:1.6; color:var(--ink-2); }

.appeal{
  margin:18px 0 0; padding:13px 15px;
  border:1px solid var(--line); border-left:2px solid var(--rust); border-radius:var(--r);
  background:var(--panel); font-size:13.5px; color:var(--ink-2);
}
.appeal a{ color:var(--rust); border-bottom:1px solid var(--rust-dim); }

/* ===================================================================
   STORE / SUPPORT / FAQ
   =================================================================== */
.lead{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding:17px 18px; margin-bottom:14px;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel);
}
.lead p{ margin:5px 0 0; font-size:13.5px; color:var(--ink-2); max-width:54ch; }
.lead .t{ font-family:var(--disp); font-size:21px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

.tiles{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); }
.tile{
  padding:16px 17px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
}
.tile .tag{
  display:inline-block; margin-bottom:9px;
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
  padding:3px 7px; border:1px solid var(--line); border-radius:var(--r);
}
.tile h3{ font-size:17px; margin-bottom:6px; }
.tile p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }

.fine{ margin:14px 0 0; font-family:var(--mono); font-size:11px; color:var(--ink-3); }

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; gap:13px;
  padding:14px 2px; cursor:pointer; list-style:none;
  font-family:var(--disp); font-size:17px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; margin-left:auto;
  font-family:var(--mono); font-size:15px; color:var(--rust);
}
.faq details[open] summary::after{ content:'\2212'; }
.faq details[open] summary{ color:var(--rust); }
.faq p{ margin:0 0 15px; padding-right:30px; font-size:13.5px; line-height:1.65; color:var(--ink-2); }
.faq p a{ color:var(--rust); border-bottom:1px solid var(--rust-dim); }
.faq code{ font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel-2); padding:1px 5px; border-radius:var(--r); }

/* ===================================================================
   FOOTER
   =================================================================== */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding-block:28px; }
.foot-grid{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot nav{ display:flex; flex-wrap:wrap; gap:7px 18px; }
.foot nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.foot nav a:hover{ color:var(--rust); }
.foot .legal{
  width:100%; margin:16px 0 0; padding-top:15px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.6; color:var(--ink-3);
}

/* ===================================================================
   LOGIN — two stacked rows, Steam then Discord
   =================================================================== */
.narrow{ max-width:620px; }
.page-head{ padding-block:clamp(32px,5vw,54px) 22px; }
.page-head h1{ font-size:clamp(36px,6vw,54px); margin-bottom:12px; }
.page-head h1 em{ font-style:normal; color:var(--rust); }
.page-head p{ margin:0; color:var(--ink-2); font-size:14.5px; max-width:52ch; }

.back{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.back:hover{ color:var(--rust); }

.rows{ display:flex; flex-direction:column; gap:11px; }

.row{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:15px 16px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel);
  transition:border-color .14s,background .14s;
}
a.row:hover{ border-color:var(--line-3); background:var(--panel-2); }

.row .glyph{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
}
.row .glyph svg{ width:19px; height:19px; fill:var(--ink-2); }

.row .txt{ min-width:0; }
.row b{
  display:block; font-size:15px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row small{
  display:block; margin-top:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--ink-3);
}

.row .status{ display:flex; align-items:center; justify-content:flex-end; min-width:38px; }
.row .status img{ width:34px; height:34px; border-radius:var(--r); object-fit:cover; }
.row .status .initial{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2);
  font-family:var(--disp); font-size:16px; font-weight:700;
}
.row .status{ position:relative; }
.row .status .tick{
  position:absolute; right:-4px; bottom:-4px;
  width:15px; height:15px; border-radius:50%;
  background:var(--live); border:2px solid var(--panel);
}
.row .status .tick::after{
  content:''; position:absolute; left:4px; top:1.5px;
  width:3px; height:7px; border:solid #0b0b0c;
  border-width:0 1.6px 1.6px 0; transform:rotate(45deg);
}
.row .status .chev{
  width:8px; height:8px;
  border-top:1.5px solid var(--ink-3); border-right:1.5px solid var(--ink-3);
  transform:rotate(45deg);
}
.row .ext{ width:12px; height:12px; color:var(--ink-3); }

.row.done{ border-color:rgba(106,157,88,.45); }
.row.needs{ border-color:rgba(217,163,46,.5); }
.row.needs .glyph{ border-color:rgba(217,163,46,.4); }
.row.locked{ opacity:.46; }
.row.checking .glyph{ border-color:var(--rust); }

.msg{ margin:16px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2); min-height:1.2em; }
.msg.bad{ color:var(--caution); }
.msg.good{ color:var(--live); }

.spin{
  display:inline-block; width:11px; height:11px; margin-right:8px;
  vertical-align:-1px; border:1.5px solid var(--line-3);
  border-top-color:var(--rust); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.acts{ display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:16px; }
.text-btn{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--line-2);
}
.text-btn:hover{ color:var(--ink); border-color:var(--line-3); }
.text-btn.go{ color:var(--rust); border-color:var(--rust-dim); }
.text-btn:disabled{ opacity:.45; cursor:default; }

.note-box{
  margin-top:24px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  font-size:13px; line-height:1.65; color:var(--ink-2);
}
.note-box b{ color:var(--ink); }

/* ===================================================================
   STORE PAGE
   =================================================================== */
.pkgs{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
.pkg{
  display:flex; flex-direction:column;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel);
  padding:18px;
}
.pkg.featured{ border-color:var(--rust-dim); }
.pkg.featured::before{
  content:'Most popular'; display:block; margin:-18px -18px 15px;
  padding:6px 18px; background:var(--rust); color:#140703;
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
}
.pkg .pkg-tag{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.pkg h3{ font-size:22px; margin:7px 0 7px; }
.pkg .blurb{ margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.pkg .price{
  font-family:var(--disp); font-size:31px; font-weight:800; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.pkg .price small{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink-3); letter-spacing:.1em; }
.pkg .price.unset{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--caution);
  padding:5px 9px; border:1px solid rgba(217,163,46,.4); border-radius:var(--r);
  background:rgba(217,163,46,.07);
}
.pkg ul{ list-style:none; margin:15px 0 18px; padding:0; border-top:1px solid var(--line); }
.pkg li{
  display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink-2);
}
.pkg li::before{ content:'\2014'; color:var(--rust); flex:none; }
.pkg .buy{ margin-top:auto; justify-content:center; width:100%; }

.notice{
  margin-bottom:18px; padding:15px 17px;
  border:1px solid rgba(217,163,46,.4); border-left:2px solid var(--caution);
  border-radius:var(--r); background:rgba(217,163,46,.06);
}
.notice b{
  display:block; margin-bottom:6px;
  font-family:var(--disp); font-size:16px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--caution);
}
.notice p{ margin:0; font-size:13px; line-height:1.65; color:var(--ink-2); }
.notice code{ font-family:var(--mono); font-size:12px; color:var(--ink); }

/* ===================================================================
   REVEAL — small, once, and off entirely for reduced motion
   =================================================================== */
.js [data-rv]{ opacity:0; transform:translateY(7px); }
.js [data-rv].in{ opacity:1; transform:none; transition:opacity .4s ease,transform .4s ease; }

@media (prefers-reduced-motion:reduce){
  .js [data-rv]{ opacity:1; transform:none; }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1040px){
  .hero-grid{ grid-template-columns:1fr; }
  .spec{ max-width:460px; }
}

@media (max-width:900px){
  .topbar .wrap{ height:auto; flex-wrap:wrap; padding-block:10px; gap:11px; }
  .rail{ order:3; width:100%; margin-inline:0; }
  .topbar-end{ margin-left:auto; }
  .only-wide{ display:none; }
  .only-narrow{ display:inline; }
  .dc span{ display:none; }
  .dc{ padding:0 10px; }
}

@media (max-width:720px){
  .svr-top{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .svr-cta{ justify-content:flex-start; }
  .svr-cta .connect{ width:100%; }
  .svr-cta .btn{ width:100%; justify-content:center; }
  .stats{ grid-template-columns:1fr 1fr; }
  .lead{ flex-direction:column; align-items:flex-start; }
  .lead .btn{ width:100%; justify-content:center; }
  .foot-grid{ flex-direction:column; align-items:flex-start; }
  .hero .wordmark{ display:none; }
}

@media (max-width:520px){
  .rules li{ grid-template-columns:32px minmax(0,1fr); gap:11px; }
  .clock .seg{ min-width:0; flex:1; }
  .row{ grid-template-columns:34px minmax(0,1fr) auto; gap:11px; padding:13px; }
  .acct .who{ display:none; }
  .acct{ padding:0 10px; }
}

@media print{
  body::before,body::after,.topbar,.hero .wordmark{ display:none!important; }
  body{ background:#fff; color:#000; }
}