/* Hosting page. Extends styles.css — tokens and layout primitives come from there. */

.hero-compact{padding:78px 0 62px}
.hero-compact .hero-copy{position:relative;z-index:2;max-width:1000px}
.hero-compact h1{max-width:none;font-size:clamp(42px,4.6vw,68px);line-height:1.08;letter-spacing:-.06em;margin:0 0 25px;font-weight:750}
.hero-compact h1 em{font-style:normal;color:var(--accent)}
.hero-compact .hero-lede{max-width:620px;margin-bottom:30px}

.hero-actions-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.status-tag-loud{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--stroke-bright);padding:10px 15px;color:var(--accent2);background:#10201c66}

/* 01 — games */
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.game-card{border:1px solid var(--stroke);background:#111c1b;padding:22px 22px 26px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,background .2s}
.game-card:hover{border-color:#a3d49e5c;transform:translateY(-3px);background:#16241f}
.game-card h3{font-size:20px;letter-spacing:-.03em;margin:34px 0 11px}
.game-card p{font-size:12px;line-height:1.75;color:var(--muted);margin:0}
.game-note{margin-top:26px;max-width:640px}
.game-status{color:var(--accent)}
.game-status-test{color:var(--accent2)}
.game-status-soon{color:var(--dim)}
.detail-muted{font-size:12px;line-height:1.8;color:#7e9489}
.inline-link{color:var(--ink);border-bottom:1px solid var(--stroke-bright)}
.inline-link:hover{color:var(--accent);border-color:var(--accent)}

/* 02 — what you get (spec lists are also used in 05) */
.alloc-section{background:#0e1718;border-block:1px solid var(--stroke)}
.alloc-section strong{color:var(--ink)}
.spec-list{list-style:none;padding:0;margin:27px 0 22px;border-top:1px solid var(--stroke)}
.spec-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--stroke)}
.spec-list li>span{font-size:10px;letter-spacing:.13em;font-weight:750;color:var(--dim);white-space:nowrap}
.spec-list strong{font-size:13px;font-weight:600;text-align:right}

/* 03 — price */
.rate-banner{display:flex;align-items:center;gap:30px;flex-wrap:wrap;border:1px solid var(--stroke-bright);background:linear-gradient(140deg,#16261f,#101b1a);padding:30px 34px;margin-bottom:16px}
.rate-figure{display:flex;align-items:baseline;gap:8px;color:var(--accent)}
.rate-figure strong{font-size:clamp(46px,5.6vw,68px);letter-spacing:-.06em;line-height:1;font-weight:750}
.rate-figure span{font-size:17px;font-weight:700}
.rate-unit{font-size:11px;letter-spacing:.13em;font-weight:750;color:var(--muted);line-height:1.7;border-left:1px solid var(--stroke-bright);padding-left:30px}
.rate-note{margin:0;font-size:12px;line-height:1.8;color:var(--dim);max-width:370px;flex:1;min-width:250px}

.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.price-card{border:1px solid var(--stroke);background:#111c1b;padding:22px 24px 26px}
.price-card-mid{border-color:#a3d49e4d;background:#14211d}
.price-main{margin:26px 0 9px;font-size:15px;color:var(--muted)}
.price-main strong{font-size:37px;letter-spacing:-.05em;color:var(--ink);font-weight:750;margin-right:5px}
.price-main span{padding-left:7px;font-size:12px;color:var(--dim)}
.price-sub{margin:0;font-size:12px;color:var(--dim)}

/* 04 — paying */
.paying-section{background:#0e1718;border-block:1px solid var(--stroke)}
.pay-steps{list-style:none;padding:0;margin:26px 0}
.pay-steps li{display:flex;gap:17px;padding:15px 0;border-top:1px solid var(--stroke)}
.pay-steps li:last-child{border-bottom:1px solid var(--stroke)}
.pay-steps div{font-size:13px;line-height:1.8;color:var(--muted)}
.pay-steps strong{color:var(--ink);font-weight:650}
.pay-n{font-size:10px;letter-spacing:.13em;font-weight:750;color:var(--accent);padding-top:4px}

/* 05 — support */
.spec-list strong{color:var(--ink)}
.spec-list em{font-style:normal;color:var(--dim)}

@media(max-width:1050px){
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rate-unit{border-left:0;padding-left:0}
}
@media(max-width:760px){
  .hero-compact{padding:54px 0 46px}
  .price-grid{grid-template-columns:1fr}
  .rate-banner{padding:24px;gap:20px}
  .spec-list li{flex-direction:column;gap:5px}
  .spec-list strong{text-align:left}
}
@media(max-width:430px){
  .game-grid{grid-template-columns:1fr}
  .rate-figure strong{font-size:44px}
}
/* Public servers (2026-10-16): the address and its copy button */
.public-address{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 12px}.public-address code{font-size:13px;color:var(--ink);background:#ffffff0d;padding:6px 9px;border-radius:5px;word-break:normal}.copy-btn{font:inherit;font-size:11px;font-weight:750;color:var(--accent);background:none;border:1px solid var(--stroke);border-radius:5px;padding:6px 10px;cursor:pointer}.copy-btn:hover{border-color:var(--accent)}