/* mc.grindgg.com — The Grind, Minecraft.
   Tokens are the parent brand's, from grind-brand/tokens/tokens.css. */
:root{
  --green:#5BF486; --green-ui:#1DC94D; --gold:#FFDE52;
  --bg:#070708; --card:#0E0E11; --border:#1C1C22;
  --fg:#FAFAFA; --muted:#94A3B8; --danger:#D02F2F;
  --radius:.5rem; --wrap:1060px;
  --display:"Archivo Black",system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  line-height:1.65;overflow-wrap:break-word;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- hero ---- */
.hero{
  position:relative;text-align:center;padding:72px 0 56px;
  border-bottom:1px solid var(--border);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(91,244,134,.09), transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 100%, rgba(255,222,82,.05), transparent 70%);
  pointer-events:none;
}
.hero>*{position:relative}
.emblem{width:132px;height:132px;display:block;margin:0 auto 18px}
h1{
  font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,9vw,4.2rem);
  margin:0;letter-spacing:-.01em;line-height:1;
}
.sub{
  color:var(--muted);font-weight:600;letter-spacing:.42em;text-indent:.42em;
  font-size:clamp(.66rem,2.4vw,.8rem);margin:14px 0 0;text-transform:uppercase;
}
.rule{height:4px;width:min(360px,70%);margin:16px auto;background:var(--gold);border-radius:2px}
.tagline{font-size:clamp(1rem,3.4vw,1.2rem);margin:0 auto;max-width:36ch;color:#D7DBE2}

/* ---- live status ---- */
.status{
  display:inline-flex;align-items:center;gap:10px;margin:26px 0 8px;
  background:var(--card);border:1px solid var(--border);border-radius:999px;
  padding:9px 18px;font-size:.92rem;font-variant-numeric:tabular-nums;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.dot.up{background:var(--green);box-shadow:0 0 0 4px rgba(91,244,134,.16)}
.dot.down{background:var(--danger);box-shadow:0 0 0 4px rgba(208,47,47,.16)}

/* ---- address ---- */
.addrs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.addr{
  display:flex;align-items:stretch;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.addr .lbl{
  padding:11px 13px;color:var(--muted);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border-right:1px solid var(--border);
  display:flex;align-items:center;
}
.addr code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;
  padding:11px 14px;color:var(--fg);display:flex;align-items:center;
}
.copy{
  border:0;border-left:1px solid var(--border);background:transparent;
  color:var(--muted);padding:0 15px;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;transition:.15s;
}
.copy:hover{background:var(--green-ui);color:#06240F}
.copy.done{background:var(--green);color:#06240F}

/* ---- sections ---- */
section{padding:62px 0;border-bottom:1px solid var(--border)}
h2{
  font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,5vw,2rem);
  margin:0 0 10px;
}
.lede{color:var(--muted);margin:0 0 30px;max-width:62ch}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;
}
.card h3{
  margin:0 0 10px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.card p{margin:0;color:#C9CFD8}
.card code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--green);
  background:rgba(91,244,134,.08);padding:2px 7px;border-radius:4px;font-size:.95rem;
}
ol.steps{margin:0;padding-left:1.25rem;color:#C9CFD8}
ol.steps li{margin:.45rem 0}

ul.facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
ul.facts li{
  padding-left:30px;position:relative;color:#C9CFD8;
}
ul.facts li::before{
  content:"";position:absolute;left:8px;top:.62em;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg);
}
ul.facts b{color:var(--fg)}

.warn{border-left:3px solid var(--gold);padding-left:18px;margin:26px 0 0;color:#C9CFD8}

.cta{text-align:center;border-bottom:0}
.btn{
  display:inline-block;background:var(--green-ui);color:#06240F;font-weight:700;
  padding:14px 30px;border-radius:var(--radius);letter-spacing:.02em;
}
.btn:hover{background:var(--green);text-decoration:none}

footer{padding:34px 0 52px;text-align:center;color:var(--muted);font-size:.88rem}
footer a{color:var(--muted);text-decoration:underline}

@media (max-width:560px){
  .hero{padding:52px 0 44px}
  .emblem{width:104px;height:104px}
  section{padding:48px 0}
  .addr{width:100%}
  .addr code{flex:1}
}