/* Exclsv Hosts website. Brand rules: design/SPEC.md and design/project/Brand.dc.html.
   One stylesheet, no inline styles (the CSP is style-src 'self'). */

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/host-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/host-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

:root {
  --ink: #0E0F11;
  --graphite: #1A1B1E;
  --raised: #232428;
  --paper: #F4F4F2;
  --white: #FFFFFF;
  --text: #F4F4F2;
  --text-2: #A1A1A6;
  --text-3: #C7C7CC;
  --line: #2A2B2F;
  --line-2: #3A3B40;
  --line-3: #5A5B60;
  --l-text: #1C1C1E;
  --l-text-2: #636368; /* 4.9:1 on the #E8E8E5 segment fill (was #6B6B70, 4.3:1) */
  --l-line: #E5E5E5;
  --l-line-2: #EEEEEC;
  --l-control: #8A8A8F;
  --orange: #FF6A2B;
  --orange-l: #C2410C;
  --green: #6FA07F;
  --red: #C95A50;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.33, 1, .68, 1);
  --sec: clamp(80px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
p, h1, h2, h3, h4, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.paper :focus-visible { outline-color: var(--l-text); }

.wrap { max-width: 1068px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap.narrow { max-width: 824px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack.s8 { gap: 8px; } .stack.s12 { gap: 12px; } .stack.s16 { gap: 16px; } .stack.s24 { gap: 24px; } .stack.s32 { gap: 32px; } .stack.s40 { gap: 40px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row.s20 { gap: 12px 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0; overflow-wrap: anywhere; }
.muted { color: var(--text-2); }
.small { font-size: 14px; }
.xsmall { font-size: 13px; }
.mw560 { max-width: 560px; } .mw640 { max-width: 640px; } .mw720 { max-width: 720px; } .mw860 { max-width: 860px; }

/* Skip link */
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600; }
.skip:focus { top: 8px; }

/* Type */
.h1 { margin: 0; font-size: clamp(40px, 6vw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; }
.h1.xl { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.03; }
.h1.sm { font-size: clamp(36px, 5vw, 56px); }
.h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.h2.xl { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; }
.h2.close { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.025em; }
.h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.24; letter-spacing: -0.01em; }
.h3.lg { font-size: 28px; letter-spacing: -0.02em; }
.lead { margin: 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.42; color: var(--text-2); }
.strong { font-weight: 600; }

/* Links and buttons */
.lnk { color: var(--orange); text-decoration: none; }
.lnk:hover { text-decoration: underline; }
/* A link on its own line is a target of at least 24 px (WCAG 2.2 target size); links inside text are exempt. */
.stack > .lnk, .row > .lnk, .headrow > .lnk, .rfoot > .lnk, .notes > span > .lnk, .card > .lnk { display: inline-flex; align-items: center; gap: .3em; min-height: 24px; }
.stack > .lnk, .card > .lnk { align-self: flex-start; }
/* Links inside sentences are underlined: orange next to white text is only 2.6:1, so colour alone can't mark them (WCAG 1.4.1). */
:is(p, li, span) .lnk { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.paper .lnk { color: var(--orange-l); }
.lnk.white { color: var(--text); }
.chev { display: inline-block; transition: transform .2s; }
.lnk:hover .chev { transform: translateX(3px); }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; font-weight: 600; padding: 0 26px; border-radius: 980px; background: var(--orange); color: var(--ink); border: 0; cursor: pointer; }
.pill:hover { background: #FF7D45; }
.paper .pill { background: var(--orange-l); color: var(--white); }
.paper .pill:hover { background: #A8380A; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: 15px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--line-3); background: transparent; color: var(--text); cursor: pointer; transition: border-color .2s; }
.btn2:hover { border-color: var(--text-2); }
.paper .btn2 { border-color: var(--l-control); color: var(--l-text); background: var(--white); }
.btn2[aria-disabled="true"], .btn2:disabled { color: var(--text-2); cursor: not-allowed; }

/* Surfaces */
.card { background: var(--graphite); border: 1px solid var(--line); border-radius: 12px; }
.paper { background: var(--paper); color: var(--l-text); }
.paper .muted, .paper .lead { color: var(--l-text-2); }
.paper .card { background: var(--white); border-color: var(--l-line); }
.pad { padding: clamp(24px, 4vw, 40px); }
.pad-s { padding: 20px 24px; }
.pad-l { padding: clamp(28px, 5vw, 56px); }
.lift { transition: transform .3s var(--ease); }
.lift:hover { transform: translateY(-2px); }
.sec { padding-top: var(--sec); }
.sec-b { padding-bottom: var(--sec); }
.band { padding: clamp(64px, 8vw, 104px) 0; }
.hero-pad { padding: clamp(64px, 9vw, 112px) 0 clamp(48px, 6vw, 72px); }
.split2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text); }
.dot.ok { background: var(--green); }
.dot.bad { background: var(--red); }
.dot.warn { background: var(--orange-l); }
.dot.ring { background: transparent; border: 1.5px solid var(--text); }
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }

/* Forms */
.lbl { font-size: 14px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.inp { font: inherit; font-size: 16px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid #6B6B70; background: var(--ink); color: var(--text); }
textarea.inp { padding: 10px 12px; min-height: 120px; resize: vertical; line-height: 1.47; }
.paper .inp { border-color: var(--l-control); background: var(--white); color: var(--l-text); }
.inp:focus { border-color: var(--orange); outline: none; }
.inp:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.paper .inp:focus { border-color: var(--orange-l); }
.paper .inp:focus-visible { outline-color: var(--l-text); }
.inp[aria-invalid="true"] { border-color: var(--red); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange); flex: none; }
.paper .chk input { accent-color: var(--orange-l); }
.err { color: #F08A80; font-size: 14px; }
.paper .err { color: #A3352B; }
.err:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
select.inp { appearance: auto; }

/* Global nav */
.gnav { position: sticky; top: 0; z-index: 20; background: rgba(14, 15, 17, .92); border-bottom: 1px solid var(--line); }
.gnav .bar { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { text-decoration: none; color: inherit; font-weight: 600; font-size: 20px; letter-spacing: -0.03em; display: inline-flex; align-items: baseline; line-height: 44px; }
.logo .light { display: inline-block; width: .3em; height: .3em; background: var(--orange); margin-left: .09em; }
.paper .logo .light, .logo.on-light .light { background: var(--orange-l); }
.navlinks { display: flex; gap: 32px; font-size: 14px; }
.navlinks a { color: var(--text-2); text-decoration: none; padding: 12px 0; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--text); }
.navright { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.signin { color: var(--text-2); text-decoration: none; }
.signin:hover { color: var(--text); }
.navdeploy { min-height: 36px; padding: 0 16px; font-size: 14px; }
.navdeploy.outline { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line-3); color: var(--text); text-decoration: none; font-weight: 400; background: transparent; }
.menu { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.mnav { border-top: 1px solid var(--line); padding: 8px 0 20px; }
.mnav a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-size: 19px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mnav a:last-child { border-bottom: 0; color: var(--text-2); font-weight: 400; font-size: 17px; }

/* Local bar on game pages */
.lbar { position: sticky; top: 56px; z-index: 15; background: rgba(14, 15, 17, .92); border-bottom: 1px solid var(--line); }
.lbar .bar { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lbar .name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbar .links { display: flex; gap: 22px; align-items: center; font-size: 13px; color: var(--text-2); flex: none; }
.lbar .ll { color: var(--text-2); text-decoration: none; }
.lbar .ll:hover { color: var(--text); }
.lbar .pill { min-height: 30px; padding: 0 14px; font-size: 14px; }

/* Breadcrumbs */
.crumbs { font-size: 14px; color: var(--text-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--text-2); }
/* 24 px tall at 14 px text, so each crumb meets WCAG 2.5.8 target size without the spacing exception. */
.crumbs a { display: inline-block; padding: 3px 0; text-decoration: none; color: var(--text-2); }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.paper .crumbs, .paper .crumbs a, .paper .crumbs li + li::before { color: var(--l-text-2); }
.paper .crumbs a:hover { color: var(--l-text); }
.crumbs [aria-current] { color: var(--text); }
.paper .crumbs [aria-current] { color: var(--l-text); }

/* Home */
.hero-home { padding: clamp(64px, 9vw, 112px) 0 0; }
.hero-home .in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.hero-home .h1 { max-width: 900px; }
.hero-home .lead { max-width: 640px; }
.hero-home .ctas { justify-content: center; margin-top: 8px; }
.herofacts { margin: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 14px; color: var(--text-2); }
.herofacts span { display: inline-flex; align-items: center; gap: 8px; }
.herofacts span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--line-3); margin-left: -12px; }
@media (max-width: 560px) { .herofacts { flex-direction: column; align-items: center; } .herofacts span + span::before { display: none; } }
.shot { margin: clamp(40px, 6vw, 72px) 0 0; width: 100%; }
.shot img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); margin: 0 auto; }
.shot figcaption { margin-top: 14px; font-size: 14px; color: var(--text-2); }
@media (max-width: 760px) { .shot img { max-width: 300px; } }
.headrow { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 42vw), 1fr)); gap: 20px 12px; }
.gcard { text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease); }
.gcard:hover { transform: translateY(-2px); }
.gcard img, .gcard .noimg { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--graphite); transition: filter .3s; }
.gcard:hover img { filter: brightness(1.08); }
.gcard .noimg { border: 1px solid var(--line); }
.gcard .meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; }
.gcard .nm { font-weight: 600; }
.gcard .pr { font-size: 14px; color: var(--text-2); white-space: nowrap; }
/* Two cards a row on a phone: the price always goes under the name, so short names ("Rust from £16.99") and long ones ("Minecraft Java" / "from £4.99") line up the same way. */
@media (max-width: 560px) { .gcard .meta { flex-direction: column; align-items: flex-start; } }
.gcard.soon img { filter: saturate(.4) brightness(.7); }
.tour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tour .item { display: flex; flex-direction: column; gap: 6px; }
.tour .item .t { font-weight: 600; margin-top: 10px; }
.tour .item .d { color: var(--text-2); font-size: 15px; }
.panel { background: var(--graphite); border: 1px solid var(--line); border-radius: 12px; padding: 18px; height: 230px; overflow: hidden; }
.panel.console { font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.75; color: var(--text-2); letter-spacing: 0; }
.panel.console div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.console .cmd { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--text); }
.panel.checks { padding: 8px 18px; font-size: 14px; }
.panel.checks div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.panel.checks div:last-child { border-bottom: 0; }
.panel.checks .t { flex: 1; }
.panel.checks .v { color: var(--text-2); font-size: 13px; }
.panel.wipe { display: flex; flex-direction: column; gap: 14px; }
.panel.wipe .big { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.panel.wipe .days { margin-top: auto; display: flex; gap: 6px; }
.panel.wipe .days span { flex: 1; text-align: center; padding: 8px 0; border-radius: 6px; font-size: 12px; background: var(--raised); color: var(--text-2); }
.panel.wipe .days .on { background: var(--orange); color: var(--ink); font-weight: 600; }
.loadsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 12px; overflow: hidden; }
.loadsplit figure { margin: 0; position: relative; }
.loadsplit img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.loadsplit .dim { filter: saturate(.6) brightness(.55); }
.loadsplit figcaption { position: absolute; left: 20px; bottom: 18px; font-size: 14px; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.spec { padding: 4px 24px; }
.spec .kv { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--l-line-2); font-size: 15px; }
.spec .kv dt { color: var(--l-text-2); }
.spec .kv dd { margin: 0; text-align: right; }
.spec .specfoot { padding: 14px 0; font-size: 13px; color: var(--l-text-2); }
.spec dl { margin: 0; }
.close { text-align: center; align-items: center; }
@media (max-width: 760px) {
  .tour { grid-template-columns: minmax(0, 1fr); } /* minmax: the nowrap console lines must not widen the page at 320 px (400% zoom) */
  .loadsplit { grid-template-columns: 1fr; }
  .spec .kv { flex-direction: column; gap: 2px; }
  .spec .kv dd { text-align: left; }
}

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq .end { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { font-weight: 400; font-size: 24px; color: var(--text-2); transition: transform .2s; flex: none; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--text-2); max-width: 760px; }
.paper .faq details, .paper .faq .end { border-color: var(--l-line); }

/* Key-value rows on dark */
.kvs .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.kvs .kv:first-child { border-top: 0; }
.kvs .kv .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kvs .kv .big { font-size: 21px; font-weight: 600; white-space: nowrap; }
.kvs .kv > .muted { flex-shrink: 0; } /* the label keeps its width; a long value wraps instead of pushing the page sideways */
.rows .r { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.rows .r:first-child { border-top: 0; }
.rows .r .t { font-weight: 600; }
.rows.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 40px; }
.rows.cols .r { border-top: 1px solid var(--line); padding: 20px 0; }
.paper .rows .r { border-color: var(--l-line); }

/* Pricing */
.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: #E8E8E5; padding: 4px; border-radius: 6px; }
.seg { font: inherit; font-size: 15px; color: var(--l-text); border: 0; border-radius: 4px; min-height: 52px; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; line-height: 1.25; background: transparent; }
.seg .n { font-size: 12px; color: #5C5C61; } /* 5.1:1 on the #E8E8E5 track (--l-text-2 is 4.3:1) */
.seg[aria-checked="true"] { background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); font-weight: 600; }
.seg[aria-disabled="true"] { cursor: not-allowed; color: var(--l-text-2); }
.tscroll { overflow: hidden; }
.pt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pt th, .pt td { padding: 14px 20px; border-top: 1px solid var(--l-line-2); text-align: center; vertical-align: middle; font-weight: 400; }
.pt thead th { border-top: 0; font-size: 14px; color: var(--l-text-2); padding-top: 18px; padding-bottom: 14px; font-weight: 600; }
.pt tbody th { text-align: left; }
.pt .left { text-align: left; }
.gname { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.gname a { text-decoration: none; }
.gname a:hover { text-decoration: underline; }
.gname img, .gname .noimg { display: block; width: 56px; height: 35px; object-fit: cover; border-radius: 6px; background: var(--l-line); flex: none; }
.pr { display: block; font-weight: 600; font-size: 17px; }
.spec-s { display: block; font-size: 13px; color: var(--l-text-2); }
.perf-s { display: block; font-size: 13px; color: var(--l-text); font-weight: 600; margin-top: 2px; }
.mcgrid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 48px); }
.mt th, .mt td { padding: 12px; }
.mt tbody th { font-weight: 600; }
.suits { text-align: left !important; font-size: 14px; color: var(--l-text-2); }
.notes { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; color: var(--l-text-2); }
.week { margin-top: 20px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 12px; text-align: center; color: var(--text-2); }
.week span { padding: 10px 0; border-radius: 4px; background: var(--raised); }
.week .on { background: var(--line-2); color: var(--text); }
.week .fri { background: linear-gradient(to right, var(--raised) 66%, var(--line-2) 66%); color: var(--text); }
.week .mon { background: linear-gradient(to right, var(--line-2) 17%, var(--raised) 17%); }
@media (max-width: 760px) {
  .pt th, .pt td { padding: 12px 8px; }
  .gname img, .gname .noimg { display: none; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcgrid { grid-template-columns: 1fr; }
  .suits { display: none; }
  .tscroll { overflow-x: auto; }
  .tscroll.fits { overflow-x: hidden; }
  /* Phones: each game becomes a block with its plans as rows (plan, price, specs), so no price is cut off. */
  .gt, .gt tbody, .gt tr, .gt th, .gt td { display: block; }
  .gt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gt tr { padding: 16px 16px 8px; border-top: 1px solid var(--l-line); }
  .gt tbody tr:first-child { border-top: 0; }
  .gt tbody th { border: 0; padding: 0 0 6px; font-size: 19px; }
  .gt td { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; text-align: left; padding: 10px 0; border-top: 1px solid var(--l-line-2); }
  .gt td::before { content: attr(data-plan); grid-row: 1 / span 5; font-size: 15px; color: var(--l-text-2); padding-top: 1px; }
  .gt td > * { grid-column: 2; }
  .gt td.none, .gt .dsk { display: none; }
}

/* Game pages */
.ghero { position: relative; overflow: hidden; background: #141518; height: clamp(500px, 66vh, 660px); }
.ghero.noart { height: auto; padding-top: clamp(96px, 12vw, 160px); }
.ghero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ghero .shade { position: absolute; inset: 0; background: linear-gradient(to top, #0E0F11 0%, rgba(14, 15, 17, .9) 34%, rgba(14, 15, 17, .66) 62%, rgba(14, 15, 17, .4) 100%), linear-gradient(to right, rgba(14, 15, 17, .55) 0%, rgba(14, 15, 17, 0) 65%); }
.ghero .wrap { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding-bottom: clamp(40px, 6vw, 72px); }
.ghero .lead { color: var(--text-3); max-width: 680px; }
.ghero .h1 { max-width: 900px; }
.ghero .lnk { font-size: 17px; display: inline-flex; align-items: center; gap: .3em; min-height: 44px; align-self: flex-start; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 6px; background: rgba(14, 15, 17, .72); border: 1px solid var(--line-2); color: var(--text); align-self: flex-start; }
.badge.plain { background: transparent; }
.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.js-picker > .selcard { grid-column: 2; grid-row: 1 / span 2; }
.js-picker > .addons { grid-column: 1; grid-row: 2; }
.sizes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sizes.mem { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.szb { font: inherit; text-align: left; cursor: pointer; border-radius: 12px; background: var(--white); color: var(--l-text); border: 1px solid #D1D1D6; padding: 14px 16px; min-height: 44px; display: flex; flex-direction: column; gap: 2px; }
.szb[aria-checked="true"] { border: 2px solid var(--orange-l); padding: 13px 15px; }
.szb .a { font-weight: 600; font-size: 17px; }
.szb .b { font-size: 14px; color: var(--l-text-2); }
.seg2 { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #E8E8E5; padding: 4px; border-radius: 6px; }
.seg2 button { font: inherit; font-size: 14px; border: 0; border-radius: 4px; padding: 0 12px; min-height: 36px; cursor: pointer; color: var(--l-text); background: transparent; }
.seg2 button[aria-checked="true"] { background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); font-weight: 600; }
.seg2 button[aria-disabled="true"] { color: var(--l-text-2); cursor: not-allowed; }
/* On a phone four periods wrapped raggedly ("Yearly" alone on a second line): two even columns instead. */
@media (max-width: 560px) { .seg2:not(.tabs) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.selcard { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.selhead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.pbox { text-align: right; }
.pbox .price { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.kv2 .kv { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--l-line); font-size: 15px; }
.kv2 .kv span:first-child { color: var(--l-text-2); }
.kv2 .kv span:last-child { text-align: right; }
.ct { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.ct th, .ct td { text-align: left; padding: 12px; border-top: 1px solid var(--l-line); font-weight: 400; vertical-align: top; }
.ct thead th { border-top: 0; font-size: 14px; color: var(--l-text-2); font-weight: 600; }
.ct tbody th { font-weight: 600; white-space: nowrap; }
.ct .num { text-align: right; white-space: nowrap; }
.ct .perf-s { font-weight: 400; color: var(--l-text-2); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.fcard { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.fcard .tag { font-size: 13px; color: var(--text-2); }
.fcard .t { font-weight: 600; font-size: 17px; }
.fcard .d { color: var(--text-2); font-size: 15px; }
.shared { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; }
.shared div { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.shared .t { font-weight: 600; }
.shared .d { color: var(--text-2); font-size: 15px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--graphite); border: 1px solid var(--line); padding: 4px; border-radius: 6px; align-self: flex-start; max-width: 100%; }
.tabs button { font: inherit; font-size: 14px; border: 0; border-radius: 4px; padding: 0 14px; min-height: 40px; cursor: pointer; color: var(--text-2); background: transparent; }
.tabs button[aria-selected="true"] { background: var(--line); color: var(--text); font-weight: 600; }
.tabpanel { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.ol, .steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.modsgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 14px; }
.hqfig { margin: 0; padding: 0; overflow: hidden; }
.hqfig .top { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.hqfig .top .t { color: var(--text); font-weight: 600; }
.hqfig .body { padding: 4px 20px 18px; }
.hqfig .srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.hqfig .srow:first-child { border-top: 0; }
.hqfig .srow .v { font-size: 15px; text-align: right; }
.hqfig .srow .n { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); }
.hqfig p { margin-top: 12px; font-size: 13px; color: var(--text-2); }
.lim { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lim li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.lim li::before { content: "–"; color: var(--text-2); }
.notify { display: flex; flex-direction: column; gap: 10px; }
.notify .frow { display: flex; gap: 8px; flex-wrap: wrap; }
.notify .frow .inp { flex: 1 1 220px; width: auto; }
/* A field and its button in a row (Support › Search the help centre) share the line. */
.row > .inp { flex: 1 1 220px; width: auto; min-width: 0; }
.notify .done { font-size: 17px; }
/* The launch email form under a centred call to action (before launch, partials/launch.html). */
.launchbox { width: 100%; max-width: 560px; text-align: left; }
.paper .notify .chk { color: var(--l-text); }
@media (max-width: 860px) { .pick, .modsgrid { grid-template-columns: 1fr; } .js-picker > .selcard, .js-picker > .addons { grid-column: auto; grid-row: auto; } }
@media (max-width: 640px) {
  .pbox { text-align: left; }
  .selhead { flex-direction: column; }
  .lbar .ll { display: none; }
  .ghero { height: 540px; }
  .ct .hide-s { display: none; }
}
@media (max-width: 400px) { .lbar .from { display: none; } }
/* Game pages on phones: the game bar's Deploy is the one call to action, so the header's goes. */
@media (max-width: 640px) { .haslbar .navdeploy { display: none; } }

/* Games index */
.gtools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.search { position: relative; }
.gtools .search { flex: 1 1 260px; max-width: 420px; }
.search svg { position: absolute; left: 12px; bottom: 14px; color: var(--text-2); }
.search .inp { padding-left: 38px; }
.empty { padding: 32px 0; color: var(--text-2); }

/* Hardware */
.machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.mcard { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.dl { margin: 0; }
.dl .srow { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--l-line-2); }
.dl .srow:first-child { border-top: 0; }
.dl dt { color: var(--l-text-2); font-size: 15px; flex: none; }
.dl dd { margin: 0; text-align: right; }
.membar { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 16px; margin: 0; }
.membar .blocks { display: flex; gap: 4px; height: 96px; font-size: 12px; }
.membar .b { min-width: 0; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.membar .b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membar .you { background: var(--orange); color: var(--ink); font-weight: 600; }
.membar .other { background: var(--line-2); color: var(--text); }
.membar .sys { background: var(--raised); border: 1px solid var(--line-3); color: var(--text-2); }
.membar .free { border: 1px dashed #6B6B70; color: var(--text-2); }
.g4 { flex: 4 1 0; } .g6 { flex: 6 1 0; } .g12 { flex: 12 1 0; } .g14 { flex: 14 1 0; } .g16 { flex: 16 1 0; } .g23 { flex: 23 1 0; } .g24 { flex: 24 1 0; } .g30 { flex: 30 1 0; } .g31 { flex: 31 1 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legend .you { background: var(--orange); } .legend .other { background: var(--line-2); } .legend .sys { background: var(--raised); border: 1px solid var(--line-3); } .legend .free { border: 1px dashed #6B6B70; }
.minilist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.minilist li a, .minilist li > span { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.minilist img, .minilist .noimg { width: 56px; height: 35px; object-fit: cover; border-radius: 6px; background: var(--graphite); flex: none; }
.ping { padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.ping .val { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
@media (max-width: 640px) { .dl .srow { flex-direction: column; gap: 2px; } .dl dd { text-align: left; } .membar .blocks { height: 72px; } .membar .b { padding: 6px; } }

/* Support */
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.route { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.route .t { font-weight: 600; font-size: 21px; }
.route .rfoot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.ticket { margin: 0; padding: 0; overflow: hidden; }
.ticket .top { display: flex; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ticket .msgs { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.ticket .msg { display: flex; flex-direction: column; gap: 4px; }
.ticket .who { font-size: 14px; }
.ticket .asst { border-left: 2px solid var(--line-2); padding-left: 14px; }
.ticket .tagname { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ticket .tagname .pillt { border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 8px; }
.linkcard { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.linkcard .t { font-weight: 600; font-size: 21px; display: inline-flex; gap: 10px; align-items: center; }

/* Help centre */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.cat { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.cat .h .strong { font-size: 19px; }
.cat .h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cat li a { display: block; padding: 6px 0; text-decoration: none; color: var(--text-2); }
.cat li a:hover { color: var(--text); text-decoration: underline; }
.results { padding: 8px 20px; }
.results a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.results a:first-of-type { border-top: 0; }
.artgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.rail { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.rail ol, .rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rail ol a { display: block; text-decoration: none; padding: 7px 0 7px 12px; border-left: 2px solid var(--line); color: var(--text-2); }
.rail ol a:hover { color: var(--text); border-left-color: var(--text-2); }
.prose { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.prose, .prose > * { min-width: 0; } /* a wide table scrolls inside its box (.tscroll) instead of widening the page on phones */
.prose h1 { margin: 0; font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.prose h2 { margin: 16px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose .box { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.prose .box .t { font-weight: 600; }
.prose .addr { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.prose strong { font-weight: 600; }
.related { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 860px) { .artgrid { grid-template-columns: 1fr; } .rail { position: static; } }

/* Legal */
.lgrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.paper .rail ol a { border-left-color: var(--l-line); color: var(--l-text-2); }
.paper .rail ol a:hover { color: var(--l-text); border-left-color: var(--l-control); }
.rail .pols { gap: 2px; }
.rail .pols a { display: inline-block; padding: 3px 0; }
.rail .pols a[aria-current="page"] { color: var(--l-text); font-weight: 600; }
.legal { display: flex; flex-direction: column; gap: 32px; max-width: 760px; }
.legal .short { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.legal .short ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal .ls { display: flex; flex-direction: column; gap: 12px; }
.legal .ls h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.legal .ls p { color: var(--l-text); }
.co { padding: 4px 24px; margin: 0; }
.co .crow { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid var(--l-line-2); }
.co .crow:first-child { border-top: 0; }
.co dt { color: var(--l-text-2); }
.co dd { margin: 0; text-align: right; }
.warnbox { padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--red); }
@media (max-width: 860px) { .lgrid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .co .crow { flex-direction: column; gap: 2px; } .co dd { text-align: left; } }

/* Creators */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.tier { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.tier .big { font-size: 48px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-top: 8px; }
.tier ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.tier .ask { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.payol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.payol li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.payol .n { font-size: 14px; color: var(--text-2); }
.payol .t { font-weight: 600; }
.payol h3.t { margin: 0; font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; }
.payol .d { color: var(--text-2); font-size: 15px; }
.rl { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* Status */
.comps { padding: 4px 24px; }
.crow2 { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--l-line-2); }
.crow2:first-child { border-top: 0; }
.crow2 .top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crow2 .name { font-weight: 600; }
.crow2 .st { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.legend2 { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--l-text-2); }
.hdot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--green); margin-right: 14px; vertical-align: .12em; }
.hdot.warn { background: var(--orange); }
.hdot.bad { background: var(--red); }

/* Share page */
.sharehead { position: relative; border-radius: 12px; overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; background: #141518; }
.sharehead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sharehead .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 15, 17, .95) 10%, rgba(14, 15, 17, .2) 90%); }
.sharehead .in { position: relative; padding: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.sharehead h1 { margin: 0; font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--text-3); }
.addrbox { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 16px 20px; background: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.addrbox .k { display: flex; flex-direction: column; gap: 2px; }
.addrbox .mono { font-size: 19px; }

/* Errors, notify */
.statepage { padding: clamp(80px, 12vw, 160px) 0; }
.notifyhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.notifyhead img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
@media (max-width: 760px) { .notifyhead { grid-template-columns: 1fr; } }

/* AI info */
.factlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 14px; color: var(--text-2); background: var(--ink); margin-top: var(--sec); }
.foot.flush { margin-top: 0; }
.foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }
.foot .col { display: flex; flex-direction: column; gap: 2px; }
.foot .col .h { color: var(--text); font-weight: 600; margin-bottom: 6px; }
.foot .col a { text-decoration: none; padding: 5px 0; }
.foot .col a:hover { color: var(--text); text-decoration: underline; }
.foot .legalline { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; }

/* Motion: content rises 12px over 300ms as it scrolls in; never when reduced motion is asked for. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-home .in > * { animation: rise .3s var(--ease) both; }
  .hero-home .in > :nth-child(2) { animation-delay: .06s; }
  .hero-home .in > :nth-child(3) { animation-delay: .12s; }
  .hero-home .in > :nth-child(4) { animation-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 760px) {
  .gnav .navlinks, .gnav .signin { display: none; }
  .menu { display: inline-flex; }
}
@media print {
  .gnav, .lbar, .foot, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* Small helpers added with the page templates */
.sec-gap { margin-top: var(--sec); }
.roundimg { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.tabs button[aria-checked="true"] { background: var(--line); color: var(--text); font-weight: 600; }
.tabs button .muted { font-weight: 400; margin-left: 4px; }
.pill:disabled, .pill[aria-disabled="true"] { background: var(--line-2); color: var(--text-2); cursor: not-allowed; }
.paper .pill:disabled { background: var(--l-line); color: var(--l-text-2); }
.pad-l > .btn2, .pad-l > .pill { align-self: flex-start; }
.paper .badge { background: transparent; color: var(--l-text); border-color: var(--l-control); }
.paper .dot.ring { border-color: var(--l-text); }
.paper .dot { background: var(--l-text); }
.paper .dot.ok { background: var(--green); } .paper .dot.bad { background: var(--red); } .paper .dot.warn { background: var(--orange-l); } .paper .dot.ring { background: transparent; }
.paper .chk input, .paper .inp { color-scheme: light; }
.kv2 .kv:first-child { border-top: 0; }
@media (max-width: 860px) { .artgrid .rail { display: none; } .lgrid > .rail { order: 2; } }
.ghero .crumbs { text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.ghero .crumbs a, .ghero .crumbs li + li::before { color: var(--text-3); }
/* Tools (/tools/) */
.wipebig { font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }

/* Preview site (config.json "preview"): the line under the header and the Join the Discord box. */
.pvbar { background: var(--graphite); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.pvbar .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.pvbar .lnk { white-space: nowrap; }
.discordcta { max-width: 560px; }
.discordcta .row { align-items: center; flex-wrap: wrap; }

/* Website review (2 Nov 2026): no orphaned words in headings, readable lists on paper, prices that don't wrap, a centred closing call to action */
.h1, .h2, .h3 { text-wrap: balance; }
.lead, .muted, .shared .d { text-wrap: pretty; }
.paper .shared div { border-color: var(--l-line); }
.paper .shared .d { color: var(--l-text-2); }
.kvs .kv .v:has(.big) { flex: none; white-space: nowrap; }
.close .discordcta { margin: 0 auto; text-align: center; }
.close .discordcta .row { justify-content: center; }
.jump { gap: 8px; }
@media (min-width: 761px) { .pt .spec-s, .spec .kv dt { white-space: nowrap; } }
@media (max-width: 560px) { .hero-home .herofacts { flex-direction: row; justify-content: center; gap: 4px 16px; } }
@media (max-width: 760px) {
  .loadsplit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .loadsplit figcaption { left: 12px; bottom: 10px; font-size: 12px; }
}