/* NoSpike.gg: the website's one stylesheet (start page, guides, partner pages, email-link and legal pages).

   It is the app's design system (client/src/GearLink.App/WebFrontend/style.css) on the web: the same surfaces stepping
   up in lightness, teal for "on, in use, NoSpike", red for the brand, the main action, your own connection (ISP) and
   trouble. The pictures of the app are the app's own page (client/tools/site_shots.py), so site and app look the same.
   No web fonts, no inline styles (the CSP forbids them), text from 12px up. */
:root {
  color-scheme: dark;
  --bg: #0B0D10;
  --surface-1: #101317;
  --surface-2: #15191E;
  --surface-3: #1C2127;
  --surface-4: #252B32;
  --line: #22272E;
  --line-strong: #323841;
  --text: #F3F4F6;
  --text-2: #B7BCC4;
  --text-3: #8E949D;
  --accent: #2DD4BF;
  --accent-strong: #5EEAD4;
  --accent-soft: #0F2A26;
  --accent-line: #1E5149;
  --brand: #D8322A;
  --brand-hover: #E53D33;
  --direct: #FF5A4E;
  --danger-soft: #261413;
  --danger-line: #6A2F2A;
  --warn: #E5A93B;
  --warn-soft: #2A2214;
  --warn-line: #5C4520;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 14px;
  --gutter: 16px;
  /* names the partner, guide and account pages use */
  --bg-2: var(--surface-1); --card: var(--surface-2); --card-2: var(--surface-3); --line-2: var(--line-strong);
  --dim: var(--text-2); --faint: var(--text-3); --red: var(--direct); --red-strong: var(--brand); --red-hover: var(--brand-hover);
  --red-soft: #FF5A4E22; --teal: var(--accent); --teal-soft: var(--accent-soft);
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; color: var(--direct); }
b, strong { font-weight: 600; color: var(--text); }
.red { color: var(--direct); }
.teal { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.86em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; background: var(--brand); color: #fff; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
#main:focus { outline: none; }
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap.narrow { width: min(860px, 100% - 2 * var(--gutter)); }

/* ---------------------------------------------------------------- buttons */
.i { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px;
  font: 600 15px/1 var(--body); color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn.xs { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.lg { min-height: 52px; padding: 0 22px; font-size: 16px; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-hover); }
.btn.ghost { background: var(--surface-2); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-3); border-color: #414852; }
.btn.wide { width: 100%; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- type helpers */
.eyebrow { font: 600 12px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--direct); margin-bottom: 14px; }
.kicker { display: flex; align-items: center; gap: 10px; font: 600 13px/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.sub { color: var(--text-2); font-size: 17px; max-width: 66ch; }
.lede { color: var(--text-2); font-size: 19px; line-height: 1.6; max-width: 54ch; }
.fine { color: var(--text-3); font-size: 13px; line-height: 1.6; }
.fine a { color: var(--text-2); }
.center { text-align: center; }
.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* ---------------------------------------------------------------- header */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 12px 28px; min-height: 64px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 34px; }
.word { font: 800 23px/1 var(--display); letter-spacing: -0.03em; }
.word .gg { color: var(--text-3); font-weight: 700; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--direct); text-underline-offset: 8px; }
.bar .btn { margin-left: auto; }
@media (min-width: 1040px) { .nav { margin-left: auto; } .bar .btn { margin-left: 0; } }
@media (max-width: 1039px) {
  .nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  .nav ul { flex-wrap: nowrap; gap: 0 18px; }
  .nav li { flex: none; }
  html { scroll-padding-top: 120px; }
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: 96px; }
.section.band { background: var(--surface-1); border-block: 1px solid var(--line); }
.section-head { max-width: 780px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 16px; }
.shot { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: 0 30px 60px -30px #000; }
.shot img { width: 100%; }

/* ---------------------------------------------------------------- hero */
.home .hero { padding-block: 88px 64px; background: radial-gradient(900px 520px at 88% 0%, #20141499, transparent 70%); }
.hero-copy { display: grid; gap: 0 64px; align-items: end; }
@media (min-width: 1000px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-copy .eyebrow, .hero-copy h1 { grid-column: 1; }
  .hero-copy .lede, .hero-copy .cta, .hero-copy .hero-meta { grid-column: 2; }
  .hero-copy .lede { grid-row: 2; } .hero-copy .cta { grid-row: 3; } .hero-copy .hero-meta { grid-row: 4; }
  .hero-copy h1 { grid-row: 2 / span 3; align-self: end; margin-bottom: 0; }
}
.hero h1 { font-size: clamp(56px, 8vw, 112px); font-weight: 800; letter-spacing: -0.045em; line-height: .98; margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { margin-top: 18px; color: var(--text-3); font-size: 14px; }
.hero-meta a { color: var(--text-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 64px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-1); }
.facts li { display: grid; gap: 4px; padding: 22px 26px; }
.facts li + li { border-left: 1px solid var(--line); }
.facts b { font: 700 34px/1.1 var(--display); letter-spacing: -0.02em; color: var(--text); }
.facts span { color: var(--text-2); font-size: 14px; }
@media (max-width: 879px) { .facts li + li { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------------------------------------------------------------- the app, row by row */
.show { display: grid; gap: 32px; }
.show + .show { margin-top: 104px; padding-top: 56px; border-top: 1px solid var(--line); }
.show-copy { display: grid; gap: 16px 64px; }
@media (min-width: 1000px) { .show-copy { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.show-head h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.025em; }
.show-text > p { color: var(--text-2); font-size: 17px; }
.show-text > p + p, .show-text > p + .ticks { margin-top: 16px; }
.show-text .ticks { margin-top: 20px; }
@media (min-width: 760px) { .show-text .ticks { grid-template-columns: 1fr 1fr; gap: 12px 28px; } }
.show .shot { width: fit-content; max-width: 100%; margin-inline: auto; }
.note-line { border-left: 2px solid var(--accent); padding-left: 16px; }

/* ---------------------------------------------------------------- match-aware */
.timeline { display: grid; gap: 16px; counter-reset: stop; margin-bottom: 56px; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline li { position: relative; padding: 22px 22px 24px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); border-top: 3px solid var(--accent); }
.timeline li.hold { border-top-color: var(--warn); }
.timeline .when { display: block; color: var(--text-3); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.timeline h3 { font-size: 19px; margin-bottom: 10px; }
.timeline p { color: var(--text-2); font-size: 15px; }

/* ---------------------------------------------------------------- how it routes */
.flow { margin-bottom: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-1); padding: 24px; }
.flow-row { display: flex; align-items: stretch; }
.node { flex: 1 1 0; min-width: 0; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); display: grid; align-content: start; gap: 4px; }
.node b { font-size: 15px; }
.node span { color: var(--text-3); font-size: 13px; line-height: 1.45; }
.node.relay { border-color: var(--accent-line); background: var(--accent-soft); }
.node.relay b { color: var(--accent-strong); }
.link { flex: 0 0 auto; width: clamp(64px, 8vw, 120px); display: grid; place-items: center; position: relative; }
.link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--accent); }
.link .tag { position: relative; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px; }
.link .tag.teal { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }
.flow-rest { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--text-2); font-size: 14px; }
.rest-line { width: 40px; flex: none; border-top: 2px dashed var(--direct); }
@media (max-width: 999px) {
  .flow { padding: 16px; }
  .flow-row { flex-direction: column; }
  .link { width: auto; height: 52px; }
  .link::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid var(--accent); }
}
.cards { display: grid; gap: 16px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cards .card { padding: 24px; }
.cards h3 { font-size: 19px; margin-bottom: 10px; }
.cards p { color: var(--text-2); font-size: 15px; }
.cards.minor { margin-top: 16px; }

/* ---------------------------------------------------------------- network (live) */
.network { display: grid; gap: 32px 56px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
@media (min-width: 900px) { .network { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.map { position: relative; max-width: 480px; margin-inline: auto; width: 100%; }
.map img { width: 100%; opacity: .9; }
.map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-overlay .hub { fill: #59606B; }
.map-overlay .halo { fill: #FF5A4E2E; }
.map-overlay .pin { fill: var(--direct); stroke: #fff; stroke-width: 3; }
.map-overlay .pin.off { fill: #59606B; stroke: #8E949D; }
.map-overlay .tag { fill: #0E1013; stroke: var(--line-strong); }
.map-overlay .tag-text { fill: var(--text); font: 600 16px var(--body); }
.map-overlay .tag-text.off { fill: var(--text-3); }
.relay-summary { color: var(--accent); font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.relay-list li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.relay-list .cc { width: 32px; flex: none; font: 600 11px/22px var(--mono); text-align: center; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 6px; }
.relay-list .where { display: grid; }
.relay-list .where strong { font-size: 15px; }
.relay-list .where span { color: var(--text-3); font-size: 13px; }
.relay-list .state-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #59606B; }
.relay-list li.on .state-dot { background: var(--accent); box-shadow: 0 0 0 4px #2DD4BF22; }
.relay-list li.empty { color: var(--text-3); }
.relays .fine { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.relay { background: var(--direct); }
.dot.hub { background: #59606B; }
.load-error { color: var(--text-2); display: grid; gap: 12px; justify-items: start; padding: 18px 0; }

/* ---------------------------------------------------------------- features */
/* A list of the features beside one of them at a time, its picture as large as it is in the app. Without the page's
   script every feature is shown, one under the other. */
.viewer { display: grid; gap: 24px; }
@media (min-width: 1000px) { .viewer { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.viewer-tabs { display: grid; gap: 6px; }
@media (min-width: 1000px) { .viewer-tabs { position: sticky; top: 88px; } }
.viewer-tabs [role=tab] { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-1); color: var(--text); font: inherit; cursor: pointer; }
.viewer-tabs [role=tab] b { font-size: 16px; }
.viewer-tabs [role=tab] small { color: var(--text-3); font-size: 13px; }
.viewer-tabs [role=tab]:hover { background: var(--surface-2); }
.viewer-tabs [role=tab][aria-selected=true] { background: var(--surface-2); border-color: var(--accent-line); box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 999px) {
  .viewer-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .viewer-tabs [role=tab] { flex: none; }
  .viewer-tabs [role=tab] small { display: none; }
}
.viewer-panels { display: grid; gap: 48px; }
.viewer.ready .viewer-panels { gap: 0; }
.viewer.ready .viewer-panel:not(.on) { display: none; }
.viewer-panel { display: grid; gap: 24px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 32px); }
.viewer-copy h3 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; margin-bottom: 12px; }
.viewer-copy p:not(.kicker) { color: var(--text-2); font-size: 16px; max-width: 70ch; }
.viewer-copy p + p { margin-top: 12px; }
.viewer-shots { display: grid; gap: 12px; justify-items: center; }
.viewer-shots .shot { width: fit-content; max-width: 100%; box-shadow: none; }

/* ---------------------------------------------------------------- games (live) */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 16px; margin-bottom: 28px; }
.gtile { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; }
.gtile img { width: 100%; height: 100%; object-fit: cover; }
.gtile img.logo { width: 70%; height: auto; object-fit: contain; }
.art-unavailable { color: var(--text-3); padding: 12px; text-align: center; font-size: 12px; }
.gname { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; margin-top: 10px; }
.gname .beta, .gname .verified { display: table; margin-top: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid; }
.gname .beta { color: var(--text-2); border-color: var(--line-strong); background: var(--surface-2); }
.gname .verified { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; gap: 16px; max-width: 880px; margin: 0 auto 16px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan-card { display: grid; align-content: start; gap: 12px; padding: 30px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; }
.plan-card.best { border-color: var(--accent-line); background: linear-gradient(180deg, #102421, var(--surface-2) 55%); }
.plan-name { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.plan-card.best .plan-name { color: var(--accent-strong); }
.save { font: 700 12px/1 var(--body); letter-spacing: .02em; text-transform: none; color: #052620; background: var(--accent); border-radius: 999px; padding: 5px 9px; }
.price { font: 750 46px/1.05 var(--display); letter-spacing: -0.03em; }
.price small { font: 500 17px var(--body); letter-spacing: 0; color: var(--text-2); margin-left: 4px; }
.plan-for { color: var(--text-2); font-size: 15px; min-height: 3em; margin-bottom: 8px; }
.included { max-width: 880px; margin: 0 auto 24px; padding: 26px 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-1); }
.included .plan-name { margin-bottom: 16px; }
.included .ticks { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 28px; font-size: 15px; }

/* ---------------------------------------------------------------- faq */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.faq details[open] { border-color: var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 22px; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > div { padding: 0 22px 20px; color: var(--text-2); display: grid; gap: 12px; }
.hash code { display: block; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); }

/* ---------------------------------------------------------------- download (live) */
.download { display: grid; gap: 32px 56px; align-items: center; background: var(--surface-1); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 48px); }
@media (min-width: 960px) { .download { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.download h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 22px; }
.steps { display: grid; gap: 14px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; color: var(--text-2); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--body); color: var(--text); background: var(--surface-3); border: 1px solid var(--line-strong); }
.download-card { display: grid; gap: 16px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 16px; padding: 24px; }
.dl-facts { display: grid; gap: 8px; margin: 0; }
.dl-facts div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.dl-facts dt { color: var(--text-3); font-size: 13px; }
.dl-facts dd { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-facts code { overflow-wrap: anywhere; color: var(--text-2); }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); background: var(--surface-1); padding: 56px 0 32px; color: var(--text-3); font-size: 14px; }
.foot-top { display: grid; gap: 36px; margin-bottom: 36px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); } }
.foot-brand { display: grid; gap: 14px; align-content: start; max-width: 380px; }
.foot .brand img { width: 28px; }
.foot .word { font-size: 19px; }
.foot-links { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.foot-head { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
/* the Guides heading is a link: not the 30px row the column's links get */
.foot .foot-head a { color: inherit; text-decoration: none; display: inline; min-height: 0; }
.foot .foot-head a:hover { color: var(--text); }
.foot nav ul { display: grid; gap: 2px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 30px; color: var(--text-2); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; }

/* ---------------------------------------------------------------- the payment pages (/billing/done) */
.billing-card { width: min(520px, 100%); display: grid; gap: 14px; }
.billing-card h1 { margin-bottom: 0; }
.billing-card .sub { margin-bottom: 4px; }
.billing-mark { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-3); position: relative; }
.billing-mark.ok { border-color: var(--accent-line); background: var(--accent-soft); }
.billing-mark.ok::after { content: ""; position: absolute; left: 15px; top: 13px; width: 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.billing-mark.off::after { content: ""; position: absolute; left: 13px; top: 21px; width: 16px; border-top: 2px solid var(--text-3); }
.billing-plan { justify-self: start; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.billing-card .steps { margin: 6px 0 8px; }
.billing-card .steps li { font-size: 15px; }
.billing-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------------------------------------------------------------- email-link pages (/verify, /reset), legal */
.auth { min-height: calc(100vh - 65px); display: grid; place-items: center; padding: 48px 0; }
.auth-card { width: min(440px, 100%); padding: 32px 26px; }
.auth-card h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.auth-card .sub { margin-bottom: 22px; font-size: 16px; }
.auth-card form { display: grid; gap: 8px; }
.auth-card label { font-size: 14px; font-weight: 600; margin-top: 6px; }
.auth-card input { font: 16px var(--body); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; width: 100%; }
.auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #2DD4BF33; }
.auth-card .btn { margin-top: 14px; }
.form-error { color: #FF8A80; background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.legal { padding: 56px 0 80px; max-width: 760px; }
.legal h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 8px; }
.legal h2 { font-size: 21px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--text-2); margin-bottom: 10px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--accent); }
.legal .updated { color: var(--text-3); font-size: 14px; margin-bottom: 28px; }

/* ---------------------------------------------------------------- partner pages (/affiliates, /creators) */
.hero-tag { display: inline-block; padding: 8px 12px; border: 1px solid var(--danger-line); border-radius: 100px; color: #FFAAA2; background: var(--danger-soft); letter-spacing: .1em; }
.partner-hero { padding-block: 82px 64px; }
.partner-hero-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.partner-hero h1 { font-size: clamp(42px, 4.8vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; margin-bottom: 26px; }
.partner-hero .lede { max-width: 48ch; margin-bottom: 28px; }
.creator-page .partner-hero h1 em { color: var(--accent); }
.creator-page .hero-tag { background: var(--accent-soft); border-color: var(--accent-line); color: #79E6D3; }
.partner-kind { color: #FFAAA2; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 24px; }
.partner-feature { padding: 32px; border-color: var(--danger-line); background: linear-gradient(145deg, #231818, var(--surface-2) 65%); }
.creator-page .partner-feature { background: linear-gradient(145deg, #152A24, var(--surface-2) 65%); border-color: var(--accent-line); }
.creator-page .partner-kind { color: var(--accent); }
.partner-feature h2 { font-size: 32px; line-height: 1.12; margin-bottom: 28px; }
.partner-fit { display: grid; gap: 20px; }
.partner-fit li { border-top: 1px solid var(--line-strong); padding-top: 18px; }
.partner-fit strong { display: block; font-size: 16px; margin-bottom: 5px; }
.partner-fit span, .partner-feature > p:last-child { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.partner-feature > p:last-child { margin-top: 26px; }
.partner-process { border-block: 1px solid var(--line); background: var(--surface-1); }
.section-head.partner-head, .partner-process .section-head { margin-bottom: 40px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.process-grid li { padding-top: 18px; border-top: 2px solid #63312B; }
.creator-page .process-grid li { border-top-color: #28594E; }
.process-grid .step-no { display: block; color: var(--text-2); margin-bottom: 20px; line-height: 1.6; }
.process-grid h3 { font-size: 21px; line-height: 1.3; margin-bottom: 14px; }
.process-grid p { color: var(--text-2); font-size: 15px; }
.application-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.application-intro h2 { font-size: clamp(34px, 4vw, 48px); }
.review-note { margin-block: 30px; border-left: 2px solid var(--direct); padding-left: 20px; }
.creator-page .review-note { border-color: var(--accent); }
.review-note h3 { font-size: 18px; margin-bottom: 12px; line-height: 1.3; }
.review-note p { color: var(--text-2); font-size: 14px; }
.text-link { color: var(--text); text-underline-offset: 5px; font-size: 14px; }
.application-card { padding: 32px; border-color: var(--line-strong); }
#partner-form { display: grid; gap: 22px; }
.application-fields { display: grid; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.application-fields:disabled input, .application-fields:disabled textarea, .application-fields:disabled button { cursor: not-allowed; }
.application-fields:disabled button { background: #262A30; color: #A1A3A9; }
#applications-notice { margin: 0; }
.form-help { font-size: 14px; color: var(--text-2); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { color: var(--text); font-size: 14px; font-weight: 600; }
.field label span { color: var(--text-2); font-weight: 400; }
.field input, .field textarea { width: 100%; min-width: 0; padding: 12px 14px; background: var(--bg); border: 1px solid #414550; border-radius: 9px; font: 400 16px/1.5 var(--body); color: var(--text); }
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: #9096A4; opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #FF8A80; }
.field-help { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.consent-field { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; }
.consent-field input { flex: none; width: 20px; height: 20px; accent-color: var(--brand); margin: 2px 0 0; cursor: pointer; }
.consent-field label { color: #C8CBD3; cursor: pointer; }
.form-status { color: var(--accent); font-size: 14px; min-height: 1.5em; }
.form-status.is-error { color: #FFB2A9; border: 1px solid #65322C; background: #281817; border-radius: 10px; padding: 14px; }
.application-success { padding-block: 20px; display: grid; gap: 22px; }
.application-success h2 { font-size: 36px; }
.application-success p:not(.eyebrow) { color: var(--text-2); }
.application-success .btn { justify-self: start; }
.success-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #15322C; color: var(--accent); border: 1px solid #286557; font-size: 26px; }
.partner-disclaimer { color: var(--text-2); font-size: 13px; max-width: 85ch; margin-top: 22px; line-height: 1.6; }
@media (max-width: 1039px) {
  .partner-hero-in { gap: 32px; }
  .partner-hero h1 { font-size: 46px; }
  .application-layout { gap: 32px; }
  .application-card { padding: 26px; }
}
@media (max-width: 719px) {
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 36px; }
  .home .hero { padding-top: 40px; }
  .show + .show { margin-top: 64px; }
  .partner-hero-in, .application-layout, .process-grid { grid-template-columns: 1fr; }
  .partner-hero { padding-block: 42px; }
  .partner-hero h1 { font-size: clamp(39px, 10vw, 58px); }
  .partner-hero-in { gap: 36px; }
  .partner-feature { padding: 26px; }
  .process-grid { gap: 28px; }
  .application-card { padding: 24px 18px; }
  .form-row { grid-template-columns: 1fr; gap: 22px; }
  .network { padding: 18px; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 20px 12px; }
}
@media (forced-colors: active) {
  .field input, .field textarea, .consent-field input, .btn { border: 1px solid ButtonText; }
  .form-status { color: CanvasText; }
}

/* ---------------------------------------------------------------- guides */
/* A guide, and the list of them: one readable column. */
.guide { max-width: 800px; padding-block: 44px 88px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--text-3); margin-bottom: 30px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.guide-head { margin-bottom: 34px; }
.guide-head h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin: 12px 0 14px; }
.guide-head .updated { color: var(--text-3); font-size: 14px; }
.guide-head .sub { margin-top: 6px; }
.prose { color: #C9CAD1; font-size: 17px; line-height: 1.7; }
.prose > * + * { margin-top: 16px; }
.prose .lead { color: var(--text); font-size: 19px; line-height: 1.6; }
.prose h2 { color: var(--text); font-size: 25px; line-height: 1.25; margin-top: 44px; }
.prose h3 { color: var(--text); font-size: 19px; line-height: 1.3; margin-top: 30px; }
.prose ul, .prose ol { padding-left: 24px; display: grid; gap: 10px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--text); }
.prose code, .prose kbd { font-family: var(--mono); font-size: 0.86em; background: var(--surface-3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--text); white-space: nowrap; }
.prose .note { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 16px; color: var(--text-2); font-size: 15px; }
/* What the team's articles (the editor at /admin/articles) may hold beyond the guides' own elements. */
.prose h4 { color: var(--text); font-size: 17px; line-height: 1.35; margin-top: 26px; }
.prose em { font-style: italic; color: inherit; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.prose figure { margin: 28px 0; }
.prose figcaption { color: var(--text-3); font-size: 14px; margin-top: 10px; text-align: center; }
.prose blockquote { border-left: 3px solid var(--accent); padding: 6px 0 6px 20px; color: var(--text); font-size: 18px; }
.prose blockquote > * + * { margin-top: 12px; }
.prose pre { font-family: var(--mono); font-size: 14px; line-height: 1.6; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; white-space: pre; color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; border-bottom-color: var(--line-strong); }
.prose li > ul, .prose li > ol { margin-top: 10px; }
.cover { margin: 0 0 34px; }
.cover img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.draft-banner { background: var(--surface-3); border: 1px solid var(--accent); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 26px; }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; margin-top: 52px; }
.guide-cta h2 { font-size: 22px; margin-bottom: 8px; }
.guide-cta p { color: var(--text-2); max-width: 46ch; font-size: 15px; }
.related { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 28px; }
.related h2 { font-size: 18px; margin-bottom: 14px; }
.related ul { display: grid; gap: 10px; }
.related a { color: var(--text-2); text-decoration: none; }
.related a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.guide-list { display: grid; gap: 16px; }
.guide-card { display: block; padding: 24px 26px; text-decoration: none; }
.guide-card:hover { border-color: var(--line-strong); background: var(--surface-3); }
.guide-card h2 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.guide-card p { color: var(--text-2); font-size: 15px; }
.guide-card .meta { display: block; margin-top: 12px; color: var(--text-3); font-size: 13px; }