:root{
  --yellow:#E2AC2B;
  --yellow-hi:#F2C04A;
  --ink:#1A1A1A;
  --bg:#0C0C0D;
  --bg-2:#131315;
  --bg-3:#1A1A1D;
  --line:#2A2A2E;
  --text:#E8E8EA;
  --muted:#9A9AA2;
  --blue:#2A6DE0;
  --red:#D4222F;
  --green:#00833F;
  --discord:#5865F2;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.mono{font-family:"Arial Black","Archivo Black",Impact,system-ui,sans-serif;letter-spacing:.02em;line-height:1.05}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* tricolour rule */
.tri{height:4px;width:100%;display:flex}
.tri i{flex:1}
.tri i:nth-child(1){background:var(--blue)}
.tri i:nth-child(2){background:var(--red)}
.tri i:nth-child(3){background:var(--green)}

/* ---------- NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.solid{background:rgba(10,10,11,.92);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.12em;font-size:15px;white-space:nowrap;flex:none}
.brand img{height:38px;width:auto;max-width:44px}
.brand span i{color:var(--yellow);font-style:normal}
.nav-links{display:flex;gap:24px;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--yellow)}
.nav-off{
  color:#55555e;cursor:not-allowed;user-select:none;
  display:inline-flex;align-items:center;gap:7px;
}
.nav-off em{
  font-style:normal;font-size:9.5px;letter-spacing:.14em;
  border:1px solid #303036;padding:2px 6px;color:#6c6c76;
}
.nav .btn{padding:11px 18px;font-size:12px;white-space:nowrap}
/* server status light */
.status{
  display:flex;align-items:center;gap:9px;margin-left:auto;margin-right:18px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);
  border:1px solid var(--line);padding:7px 14px;background:rgba(15,15,17,.5);white-space:nowrap;
}
.sdot{width:9px;height:9px;border-radius:50%;background:#6A6A72;flex:none;transition:background .3s,box-shadow .3s}
.status.up .sdot{background:#3BD671;box-shadow:0 0 0 0 rgba(59,214,113,.55);animation:pulse 2.2s ease-in-out infinite}
.status.up{color:#D6D6DC}
.status.down .sdot{background:var(--red);box-shadow:0 0 8px rgba(212,34,47,.6)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,214,113,.55)}50%{box-shadow:0 0 0 7px rgba(59,214,113,0)}}
.burger{display:none;background:none;border:0;color:var(--text);font-size:26px;cursor:pointer;line-height:1}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--yellow);color:var(--ink);
  font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:14px;
  padding:17px 34px;border:0;cursor:pointer;
  transition:transform .18s,background .18s,box-shadow .18s;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn:hover{background:var(--yellow-hi);transform:translateY(-2px);box-shadow:0 10px 30px rgba(226,172,43,.28)}
.btn.discord{background:var(--discord);color:#fff}
.btn.discord:hover{background:#6d78f5;box-shadow:0 10px 30px rgba(88,101,242,.35)}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--yellow);color:var(--yellow);background:transparent;box-shadow:none}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:130px 0 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url("bg.jpg");background-size:cover;background-position:center;}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 45%,rgba(12,12,13,.35) 0%,rgba(12,12,13,.86) 62%,var(--bg) 100%),
  linear-gradient(to bottom,rgba(12,12,13,.85) 0%,transparent 25%,transparent 55%,var(--bg) 100%);}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-inner{--logo-w:min(760px,88vw)}
.hero-copy{max-width:640px;margin:0 auto}
.hero-logo{width:var(--logo-w);height:auto;filter:drop-shadow(0 18px 50px rgba(0,0,0,.85));animation:rise .9s cubic-bezier(.2,.7,.3,1) both}
.kicker{margin-top:34px;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--yellow);font-weight:800;animation:rise .9s .12s cubic-bezier(.2,.7,.3,1) both}
.hero p.lede{margin:20px auto 0;color:#C8C8CE;font-size:18px;animation:rise .9s .2s cubic-bezier(.2,.7,.3,1) both}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px;animation:rise .9s .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- STATS ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding:0;max-width:var(--maxw)}
.stat{background:var(--bg-2);padding:38px 22px;text-align:center}
.stat b{display:block;font-family:"Arial Black",Impact,sans-serif;font-size:38px;color:var(--yellow);line-height:1}
.stat span{display:block;margin-top:9px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- SECTIONS ---------- */
section{padding:104px 0}
.sec-head{margin-bottom:52px}
.sec-head .tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--yellow);font-weight:800;margin-bottom:14px}
.sec-head .tag::before{content:"";width:26px;height:3px;background:var(--yellow)}
.sec-head h2{font-size:clamp(30px,4.6vw,50px);text-transform:uppercase}
.sec-head p{margin-top:16px;color:var(--muted);max-width:620px;font-size:17px}
.center{text-align:center}
/* A centred section head has to work whether "center" sits on the block itself
   (<div class="sec-head center">) or on an ancestor (<section class="center">).
   This was written only as ".center .sec-head p", which needs .sec-head to be
   INSIDE something centred - so on every page where both classes were on the
   same element it matched nothing. text-align did centre the words, but the
   paragraph kept its 620px box hard against the left edge, which put the text
   256px left of where it belonged. Centred text in an off-centre box reads as
   "not centred", and that is exactly what it was. */
.center .sec-head p,
.sec-head.center p{margin-left:auto;margin-right:auto}
.center .tag{justify-content:center}

/* ---------- ABOUT / CARDS ---------- */
.alt{background:var(--bg-2)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--bg-3);border:1px solid var(--line);padding:34px 30px;transition:transform .22s,border-color .22s}
.card:hover{transform:translateY(-5px);border-color:#3a3a40}
.card .ico{width:50px;height:50px;display:grid;place-items:center;background:rgba(226,172,43,.12);border:1px solid rgba(226,172,43,.3);margin-bottom:20px}
.card .ico svg{width:24px;height:24px;fill:var(--yellow)}
.card h3{font-size:18px;text-transform:uppercase;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}

/* ---------- SERVERS ---------- */
.servers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.srv{
  display:flex;align-items:center;gap:22px;
  background:var(--bg-3);border:1px solid var(--line);border-left:4px solid var(--yellow);
  padding:26px 28px;transition:border-color .22s,transform .22s,background .22s;
}
.srv:hover{transform:translateX(5px);background:#1E1E22}
.srv-badge{
  width:58px;height:58px;flex:none;display:grid;place-items:center;
  background:#0E0E10;border:1px solid var(--line);
  font-family:"Arial Black",Impact,sans-serif;font-size:17px;color:var(--yellow);
}
.srv-body{flex:1;min-width:0}
.srv h3{font-size:16px;text-transform:uppercase;margin-bottom:5px}
.srv p{color:var(--muted);font-size:14px}
.srv .meta{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7C7C85;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:#3BD671;box-shadow:0 0 0 4px rgba(59,214,113,.16);flex:none}
.dot.warm{background:var(--yellow);box-shadow:0 0 0 4px rgba(226,172,43,.16)}
.dot.down{background:var(--red);box-shadow:0 0 0 4px rgba(212,34,47,.18)}

/* A badge drawn by the stats site, sitting under the server list. It is a
   frame from somewhere else, so nothing in here can style what is inside it -
   only the space it sits in, and the room it has to shrink into on a phone. */
.srv-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.srv-embed-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7C7C85;font-weight:700}
.srv-embed iframe{border:0;display:block;max-width:100%;color-scheme:normal}

/* ---------- APPLICATIONS PAGE ---------- */
.applypage{padding:150px 0 90px;min-height:70vh}
.applypage .sec-head{margin-bottom:40px}
.here{color:var(--yellow)!important}

.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}
.tab{
  background:var(--bg-3);border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 26px;cursor:pointer;transition:.18s;
}
.tab:hover{border-color:#45454f;color:var(--text)}
.tab.on{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

.applyform{display:none;max-width:760px;margin:0 auto;background:var(--bg-2);border:1px solid var(--line);padding:34px 32px 30px}
.applyform.on{display:block}
.applyform .blurb{color:var(--muted);font-size:15px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.applyform label{display:block;margin-bottom:20px}
.applyform label > span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:7px}
.applyform label > span b{color:var(--yellow)}
.applyform label > span .opt{color:#63636d;font-style:normal;text-transform:none;letter-spacing:0;font-weight:400}
.applyform select{
  width:100%;background:#0E0E10;border:1px solid var(--line);color:var(--text);
  padding:12px 13px;font:inherit;font-size:14.5px;border-radius:0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#70707a 50%),linear-gradient(135deg,#70707a 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px;background-repeat:no-repeat;
}
.applyform select:focus{outline:0;border-color:var(--yellow)}
/* tick box: the input has to stay its natural size, so it opts out of the
   full-width rule the text inputs use */
.applyform .tick{display:flex;align-items:center;gap:10px}
.applyform .tick input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--yellow);padding:0}
.applyform .tick em{font-style:normal;font-size:14px;color:#C9C9D1}
.applyform input,.applyform textarea{
  width:100%;background:#0E0E10;border:1px solid var(--line);color:var(--text);
  padding:12px 14px;font-family:inherit;font-size:14.5px;line-height:1.55;
}
.applyform input:focus,.applyform textarea:focus{outline:0;border-color:var(--yellow)}
.applyform textarea{resize:vertical;min-height:90px}
.applyform .hint{display:block;font-size:11.5px;color:#70707a;margin-top:5px;font-style:normal}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.applyform .privacy{font-size:12.5px;color:#70707a;margin:4px 0 22px;line-height:1.6}
.applyform button[type=submit]{width:100%;justify-content:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.result{max-width:760px;margin:0 auto 26px;border:1px solid var(--line);padding:28px 30px;background:var(--bg-2)}
.result h3{font-size:17px;text-transform:uppercase;margin-bottom:10px}
.result p,.result li{color:var(--muted);font-size:15px}
.result ul{margin:8px 0 0 18px}
.result li{margin-bottom:5px}
.result .btn{margin-top:18px}
.result.ok{border-left:4px solid #3BD671}
.result.ok h3{color:#7BE3A4}
.result.bad{border-left:4px solid var(--red)}
.result.bad h3{color:#FF9AA2}
.result.closed{border-left:4px solid var(--yellow)}
/* sign-in gate + verified badge on the applications page */
.gate{max-width:620px;margin:0 auto;text-align:center;background:var(--bg-2);border:1px solid var(--line);padding:44px 34px 40px}
.gate-ico{width:56px;height:56px;fill:var(--discord);margin-bottom:18px}
.gate h3{font-size:19px;text-transform:uppercase;margin-bottom:12px}
.gate p{color:var(--muted);font-size:15px;margin-bottom:26px}
/* the reassurance about what Discord shares sits under the button, so the
   button itself stays above the fold on a phone */
.gate .gate-fine{font-size:12.5px;color:#70707a;margin:20px 0 0;line-height:1.6}
/* with the gate showing there is no intro paragraph, so the heading closes up */
.sec-head.tight{margin-bottom:26px}
@media (max-width:640px){
  .gate{padding:30px 22px 26px}
  .gate-ico{width:44px;height:44px;margin-bottom:12px}
  .sec-head.tight h2{font-size:29px}
}
.signedin{
  max-width:760px;margin:0 auto 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid #3BD671;
  padding:13px 18px;font-size:13.5px;color:var(--muted);
}
.signedin b{color:var(--text)}
.signedin .dot{width:8px;height:8px;border-radius:50%;background:#3BD671;flex:none}
.signedin .verified{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#7BE3A4;border:1px solid rgba(59,214,113,.4);padding:2px 8px;
}
.signedin a{margin-left:auto;color:#70707a;text-decoration:underline;font-size:12.5px}
.signedin a:hover{color:var(--yellow)}
.result code{background:#000;padding:2px 6px;font-size:12.5px;color:var(--yellow)}

@media(max-width:700px){
  .applypage{padding:104px 0 60px}
  .applyform{padding:26px 20px 24px}
  .frow{grid-template-columns:1fr}
  .tab{flex:1;padding:13px 14px;font-size:12px}
}

/* ---------- COUNTRIES ---------- */
.countries{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:860px;margin:8px auto 0}
.country{background:var(--bg-3);border:1px solid var(--line);padding:22px 14px;text-align:center;display:flex;flex-direction:column;justify-content:flex-start;transition:border-color .22s,transform .22s}
.country:hover{border-color:var(--yellow);transform:translateY(-4px)}
.country img{width:56px;height:auto;display:block;margin:0 auto 13px;box-shadow:0 3px 12px rgba(0,0,0,.5)}
.country b{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.country span{display:block;margin-top:3px;font-size:11px;color:var(--muted);letter-spacing:.1em}

/* ---------- RULES ---------- */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 34px;max-width:900px;margin:0 auto}
.rule{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.rule b{font-family:"Arial Black",Impact,sans-serif;color:var(--yellow);font-size:15px;flex:none;width:30px}
.rule div{font-size:15px}
.rule strong{display:block;text-transform:uppercase;font-size:13px;letter-spacing:.1em;margin-bottom:3px}
.rule p{color:var(--muted);font-size:14px}

/* ---------- CTA ---------- */
.cta{position:relative;text-align:center;padding:118px 0;background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.cta::before{content:"";position:absolute;inset:0;background-image:url("bg.jpg");background-size:cover;background-position:center 30%;opacity:.13;filter:grayscale(.4)}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(32px,5.4vw,60px);text-transform:uppercase;margin-bottom:18px}
.cta h2 em{color:var(--yellow);font-style:normal}
.cta p{color:#C0C0C8;max-width:560px;margin:0 auto 36px;font-size:17px}
.cta .btn{font-size:16px;padding:20px 44px}
.cta small{display:block;margin-top:22px;color:#77777F;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- FOOTER ---------- */
footer{background:#08080A;border-top:1px solid var(--line);padding:56px 0 30px}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.f-brand img{height:78px;width:auto;margin-bottom:16px}
.f-brand p{color:var(--muted);font-size:14px;max-width:330px}
.f-cols{display:flex;gap:70px;flex-wrap:wrap}
.f-col h4{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px}
.f-col a{display:block;color:var(--muted);font-size:14px;margin-bottom:10px;transition:color .2s}
.f-col a:hover{color:var(--text)}
.f-bot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#66666E;font-size:12px;letter-spacing:.08em}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .grid3,.servers,.rules{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .countries{grid-template-columns:repeat(2,1fr);max-width:420px}
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:rgba(10,10,11,.98);backdrop-filter:blur(12px);
    flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:1px solid transparent;
  }
  .nav-links.open{max-height:400px;border-bottom-color:var(--line)}
  .nav-links a{padding:18px 24px;width:100%;border-bottom:1px solid var(--line)}
  .nav-links .btn{margin:18px 24px;justify-content:center}
  .burger{display:block}
  .status{margin-right:14px;padding:6px 11px;font-size:10px;letter-spacing:.1em}
  section{padding:74px 0}
  .cta{padding:88px 0}
  .f-cols{gap:44px}
}
@media(max-width:620px){
  .brand span{display:none}   /* shield only - makes room for the status pill */
}
@media(max-width:520px){
  .stats .wrap{grid-template-columns:1fr}
  .stat{padding:28px 18px}
  .hero-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- support / transparency page ---------- */
.ledger{max-width:900px;margin:0 auto 22px;background:var(--bg-2);border:1px solid var(--line);padding:28px 30px}
.led-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.led-head h3{font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.led-sum{margin-left:auto;font-size:14px;color:var(--muted)}
.led-sum b{color:var(--yellow);font-size:17px}
/* the bar is the one number everyone reads, so it gets real weight */
.bar{height:12px;background:#0A0A0C;border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--yellow);transition:width .4s}
.led-note{font-size:14px;color:var(--muted);margin:12px 0 22px;line-height:1.6}
.led-note b{color:var(--text)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cols h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:800}
.lt{width:100%;border-collapse:collapse;font-size:14px}
.lt th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 8px;font-weight:800}
.lt td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lt td em{display:block;font-style:normal;font-size:12px;color:#70707a;margin-top:2px}
.lt .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.lt .tot td{border-bottom:0;border-top:2px solid var(--line);font-weight:800;color:var(--text);padding-top:11px}
.lt .empty{color:#70707a;font-size:13px}
.lt .good{color:#7BE3A4}.lt .bad{color:#FF8A93}
.lt .per{font-size:11px;color:#70707a;margin-left:5px;text-transform:uppercase;letter-spacing:.08em}
/* The last column of the member's payment list. A right-aligned number sitting
   directly beside a left-aligned word ran the two together - "$4.00Monthly" -
   so this column gets a width and some air of its own. */
.lt .kind{width:110px;padding-left:20px;text-align:left;white-space:nowrap}
@media(max-width:560px){.lt .kind{width:auto;padding-left:12px}}
/* A heading inside a ledger section, for the member's own payment list. */
.subh{margin:26px 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.ledger > .empty{color:#70707a;font-size:13.5px;margin-bottom:4px}
.lt .anon{color:#70707a;font-style:italic}
.perks{list-style:none;font-size:14.5px;color:var(--muted);line-height:2}
.perks b{color:var(--text)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0}
.statgrid div{background:#0A0A0C;border:1px solid var(--line);padding:12px 14px}
.statgrid span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.statgrid b{font-size:15px}
.lead{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.ledger code{background:#0A0A0C;border:1px solid var(--line);padding:2px 7px;color:var(--yellow);font-size:13px}
@media (max-width:760px){
  .cols{grid-template-columns:1fr;gap:22px}
  .ledger{padding:22px 18px}
  .led-sum{margin-left:0;width:100%}
}
/* Donate: the one action we most want people to take, so it gets its own
   colour and a lift the other buttons do not have. Dark text on this green is
   12.2:1 - white on it would be 3.0:1 and fail. */
:root{--donate:#00E676;--donate-hi:#5CFFA6}
.btn.donate{
  background:var(--donate);color:#07130C;font-weight:900;letter-spacing:.12em;
  box-shadow:0 0 0 1px rgba(0,230,118,.5), 0 8px 24px rgba(0,230,118,.28);
}
.btn.donate:hover{
  background:var(--donate-hi);color:#07130C;
  box-shadow:0 0 0 1px rgba(92,255,166,.7), 0 12px 34px rgba(0,230,118,.45);
  transform:translateY(-1px);
}
.btn.donate.here{color:#07130C!important}

/* A slow breathing glow on the nav button only. It is the one thing on the page
   we want noticed; anything faster would be a distraction rather than a hint. */
@keyframes donatePulse{
  0%,100%{box-shadow:0 0 0 1px rgba(0,230,118,.5), 0 8px 24px rgba(0,230,118,.22)}
  50%    {box-shadow:0 0 0 1px rgba(0,230,118,.9), 0 10px 32px rgba(0,230,118,.5)}
}
.nav-links .btn.donate{animation:donatePulse 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .nav-links .btn.donate{animation:none}
  .btn.donate:hover{transform:none}
}

/* the two ways to give, on the donate page itself */
.paybtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn.donate.big{font-size:15px;padding:16px 30px}
.btn.donate.ghost{
  background:transparent;color:var(--donate);
  box-shadow:inset 0 0 0 2px rgba(0,230,118,.55);font-weight:800;
}
.btn.donate.ghost:hover{
  background:rgba(0,230,118,.12);color:var(--donate-hi);
  box-shadow:inset 0 0 0 2px var(--donate-hi);
}

/* shown in place of the buttons until someone has signed in */
.paygate{border:1px dashed rgba(0,230,118,.4);background:rgba(0,230,118,.05);padding:20px 22px}
.paygate p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-bottom:16px}

@media (max-width:900px){
  .nav-links .btn.donate{width:100%;justify-content:center;margin:6px 0}
}

/* Present to a screen reader and to a search engine, invisible on screen.
   Used for the page's <h1>: the name is drawn by the logo image, and printing
   it again underneath would say the same thing twice to anyone who can see. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* An applicant's own applications, on the apply page. Deliberately quiet:
   this is a status line, not a second thing competing with the form. */
.mine{max-width:760px;margin:0 auto 26px;border:1px solid var(--line);
  padding:20px 22px;background:var(--bg-2)}
.mine h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.mine ul{list-style:none;margin:0;padding:0}
.mine li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:9px 0;border-top:1px solid var(--line)}
.mine li:first-child{border-top:0}
.mine li b{font-size:15px}
.mine .when{color:var(--muted);font-size:13px;margin-right:auto}
.mine .state{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);padding:3px 9px;color:var(--muted)}
.mine .st-accepted .state{color:#7BE3A4;border-color:#2F6B47}
.mine .st-rejected .state{color:#9A9AA2}
.mine .st-new .state{color:var(--yellow);border-color:#6B5A1F}
.mine .hint{color:var(--muted);font-size:13px;margin-top:12px}

/* The staff roster, read from Discord roles. Faces and names only - a team
   page is there to show that real people run this, not to be a directory. */
#team{padding:88px 0}
.team-grp{margin-top:34px}
.team-grp h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:18px}
.team-grp h3::after{content:"";display:block;width:34px;height:2px;
  background:var(--yellow);margin:10px auto 0}
ul.team{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:14px}
ul.team li{display:flex;align-items:center;gap:10px;background:var(--bg-2);
  border:1px solid var(--line);padding:8px 16px 8px 8px}
ul.team img{width:40px;height:40px;border-radius:50%;flex:none;background:#17171A}
ul.team span{font-size:14px;font-weight:600}
@media(max-width:640px){
  #team{padding:64px 0}
  ul.team li{padding:7px 12px 7px 7px}
  ul.team img{width:34px;height:34px}
  ul.team span{font-size:13px}
}

/* Events. A calendar has one job: the date has to be readable before the words. */
#events{padding:88px 0}
ul.evlist{list-style:none;margin:34px auto 0;padding:0;max-width:820px}
ul.evlist li{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:start;
  padding:20px 0;border-top:1px solid var(--line)}
ul.evlist li:first-child{border-top:0}
ul.evlist time{display:block;text-align:center;background:var(--bg-2);
  border:1px solid var(--line);padding:10px 6px}
ul.evlist time b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
ul.evlist time span{display:block;font-family:"Arial Black",Impact,sans-serif;
  font-size:20px;color:var(--yellow);margin-top:3px}
ul.evlist h3{font-size:18px;margin-bottom:4px}
ul.evlist p{color:var(--muted);font-size:14px;margin:0}
ul.evlist p.meta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.ev-none{text-align:center;color:var(--muted);max-width:620px;margin:30px auto 0}
.ev-tz{text-align:center;color:var(--muted);font-size:12px;margin-top:22px}
@media(max-width:640px){
  #events{padding:64px 0}
  ul.evlist li{grid-template-columns:84px 1fr;gap:14px}
  ul.evlist time span{font-size:17px}
  ul.evlist h3{font-size:16px}
}

/* Donor list: sort control and the "show the rest" button. Small and quiet -
   the list is the point, these are just handles on it. */
.donors-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.donors-head h4{margin-bottom:0}
.sorter{margin-left:auto;display:flex;gap:2px}
.sorter a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:4px 9px;border:1px solid var(--line)}
.sorter a:hover{color:var(--text)}
.sorter a.on{color:#0B0B0C;background:var(--yellow);border-color:var(--yellow);font-weight:700}
.showall{margin-top:10px;width:100%;background:none;border:1px dashed var(--line);
  color:var(--muted);font:inherit;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:9px;cursor:pointer}
.showall:hover{color:var(--text);border-color:var(--muted)}

/* A form that is not recruiting: its tab stays, so a role people know about
   does not simply vanish, and the message sits where the questions would be. */
.tab.shut{opacity:.62}
.tab .shutmark{font-style:normal;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-left:6px}
.shutbox{border:1px dashed var(--line);padding:26px 24px;text-align:center}
.shutbox h3{font-size:16px;text-transform:uppercase;margin-bottom:8px}
.shutbox p{color:var(--muted);font-size:14px;margin:0}

/* ---------- the landing page: our servers live, under the hero ---------- */
.landing .hero{padding:118px 0 64px}
.landing .hero-inner{--logo-w:min(620px,84vw)}
.landing .kicker{margin-top:26px}
.landing .hero-cta{margin-top:30px}
.lservers{max-width:980px;margin:46px auto 0;text-align:left;animation:rise .9s .4s cubic-bezier(.2,.7,.3,1) both;scroll-margin-top:96px}
.lservers-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.lservers-head h2{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--yellow)}
.lservers-head h2::before{content:"";width:26px;height:3px;background:var(--yellow)}
.lservers-live{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:#3BD16F}
.lservers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.lsrv{display:grid;gap:10px;padding:18px 20px 16px;background:rgba(14,14,16,.84);border:1px solid var(--line);border-left:3px solid #4A4A52;backdrop-filter:blur(6px)}
.lsrv.on{border-left-color:#3BD16F}
.lsrv.off{border-left-color:var(--red)}
.lsrv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.lsrv-state{display:inline-flex;align-items:center;gap:8px}
.lsrv-state i{width:9px;height:9px;border-radius:50%;background:#6A6A72;flex:none}
.lsrv.on .lsrv-state{color:#3BD16F}
.lsrv.on .lsrv-state i{background:#3BD16F;box-shadow:0 0 0 4px rgba(59,209,111,.18)}
.lsrv.off .lsrv-state{color:#E05A5A}
.lsrv.off .lsrv-state i{background:#E05A5A}
.lsrv-count{font-size:13px;letter-spacing:.06em;text-transform:none;font-weight:600;color:var(--muted);white-space:nowrap}
.lsrv-count b{font-family:"Arial Black","Archivo Black",Impact,system-ui,sans-serif;font-size:22px;color:var(--text);letter-spacing:.02em}
.lsrv-name{font-size:18px;line-height:1.2;text-transform:uppercase;overflow-wrap:anywhere}
.lsrv-meta{display:flex;flex-wrap:wrap;gap:6px}
.lsrv-meta span{padding:3px 8px;border:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#C8C8CE}
.lsrv-meta span:empty{display:none}
.lsrv-bar{height:4px;background:#232327;overflow:hidden}
.lsrv-bar i{display:block;height:100%;background:var(--yellow);transition:width .6s}
.lsrv-copy{justify-self:start;padding:9px 12px;background:transparent;border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lsrv-copy:hover{border-color:var(--yellow);color:var(--yellow)}
.lsrv-copy.copied{border-color:#3BD16F;color:#3BD16F}
.lservers-note{margin-top:16px;color:var(--muted);font-size:14px;text-align:center}
.lservers-note a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.landing footer{padding:30px 0 0}
.f-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.f-mini a{color:var(--muted);transition:color .2s}
.f-mini a:hover{color:var(--yellow)}
.landing .f-bot{margin-top:22px}
.landing footer .tri{margin-top:22px}
@media(max-width:620px){
  .landing .hero{padding:104px 0 48px}
  .lservers{margin-top:34px}
  .lsrv-name{font-size:16px}
}