/* ============================================================================
   SITE — components. Composed only from tokens.css; no raw colour, size or
   duration appears below this line. If a value is missing, it belongs in the
   token layer, not here.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
	/* Anchors land below the fixed bar instead of underneath it. */
	scroll-padding-top: calc(var(--bar-h) + var(--s-4));
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-ground);
	color: var(--c-ink);
	font-family: var(--f-text);
	font-size: var(--step-0);
	font-weight: var(--w-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	font-family: var(--f-display);
	font-weight: var(--w-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-tight);
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); }

a { color: var(--c-gold-soft); text-decoration: none; }
a:hover { color: var(--c-gold-hi); }

:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

img { max-width: 100%; display: block; }

.wrap {
	width: 100%;
	max-width: var(--w-page);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Visible to a screen reader, not to the eye. Used for the skip link and for
   labels that the layout communicates visually but the markup must still say. */
.sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
	position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
	width: auto; height: auto; clip-path: none; z-index: 100;
	background: var(--c-gold); color: var(--c-gold-ink);
	padding: var(--s-3) var(--s-4); border-radius: var(--r);
}

/* ---- BAR ---------------------------------------------------------------- */

.bar {
	position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
	height: var(--bar-h);
	display: flex; align-items: center;
	background: color-mix(in srgb, var(--c-ground-2) 88%, transparent);
	backdrop-filter: blur(10px);
	border-block-end: var(--bw) solid var(--c-hair);
}
.bar > .wrap { display: flex; align-items: center; gap: var(--s-5); }

.brand {
	font-family: var(--f-display);
	font-size: var(--step-2);
	font-weight: var(--w-semibold);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin-inline-end: auto;
}
.brand:hover { color: var(--c-gold-hi); }

.bar nav { display: flex; align-items: center; gap: var(--s-5); }
.bar nav a {
	font-size: var(--step--1);
	color: var(--c-ink-dim);
	letter-spacing: var(--ls-tight);
	transition: color var(--t-fast) var(--ease);
}
.bar nav a:hover { color: var(--c-ink); }

/* Exactly one filled gold control per screen. The launcher does the same with
   its single action button; two golds on one page means neither is the action. */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--s-2);
	font-family: var(--f-text);
	font-size: var(--step-0);
	font-weight: var(--w-semibold);
	letter-spacing: var(--ls-tight);
	padding: var(--s-3) var(--s-5);
	border: var(--bw) solid transparent;
	border-radius: var(--r);
	cursor: pointer;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
	            border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-gold {
	background: var(--c-gold); color: var(--c-gold-ink);
	box-shadow: var(--sh-gold);
}
.btn-gold:hover { background: var(--c-gold-hi); color: var(--c-gold-ink); transform: translateY(-1px); }
.btn-ghost {
	background: transparent; color: var(--c-ink);
	border-color: var(--c-line);
}
.btn-ghost:hover { border-color: var(--c-gold-dim); color: var(--c-gold-soft); }
.btn-lg { font-size: var(--step-1); padding: var(--s-4) var(--s-6); }

/* ---- HERO --------------------------------------------------------------
   Fills the first screen exactly once. svh, not vh: on mobile the browser's
   collapsing toolbar makes vh taller than what is actually visible, which
   pushes the buttons under the fold on the one device class where the fold
   matters most. */

.hero {
	min-height: 100svh;
	display: grid;
	align-content: center;
	padding-block: calc(var(--bar-h) + var(--s-6)) var(--s-7);
	position: relative;
	overflow: hidden;
}
.hero::before {
	/* A single warm pool behind the headline, not a texture. Anything busier
	   competes with the display face. */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(70ch 46ch at 22% 28%, var(--c-gold-tint), transparent 68%),
		linear-gradient(to bottom, transparent 55%, var(--c-ground) 100%);
}
.hero > .wrap { position: relative; }

.eyebrow {
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-gold-soft);
	margin-block-end: var(--s-4);
}

.hero h1 {
	font-size: var(--step-5);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	max-width: 20ch;
	margin-block-end: var(--s-5);
}

.lede {
	font-size: var(--step-1);
	color: var(--c-ink-dim);
	max-width: 54ch;
	margin-block-end: var(--s-6);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-end: var(--s-7); }

/* The fold's proof line: five short facts, no icons. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.chip {
	display: inline-flex; align-items: baseline; gap: var(--s-2);
	font-size: var(--step--1);
	color: var(--c-ink-dim);
}
.chip b {
	font-family: var(--f-display);
	font-size: var(--step-1);
	font-weight: var(--w-semibold);
	color: var(--c-gold);
	letter-spacing: var(--ls-tight);
}

/* ---- SECTION ------------------------------------------------------------ */

.section { padding-block: var(--s-section); border-block-start: var(--bw) solid var(--c-hair); }
.section-alt { background: var(--c-ground-2); }

.section-head { max-width: var(--w-narrow); margin-block-end: var(--s-7); }
.kicker {
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
	margin-block-end: var(--s-3);
}
.section h2 { font-size: var(--step-3); margin-block-end: var(--s-4); }
.section-head p { color: var(--c-ink-dim); font-size: var(--step-1); }

/* ---- GRID / CARD -------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.card {
	background: var(--c-panel);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	padding: var(--s-5);
	transition: border-color var(--t) var(--ease), transform var(--t) var(--ease),
	            box-shadow var(--t) var(--ease);
}
.card:hover {
	border-color: var(--c-gold-dim);
	transform: translateY(-2px);
	box-shadow: var(--sh-1);
}
.card .glyph {
	font-size: var(--step-2);
	color: var(--c-gold);
	line-height: 1;
	margin-block-end: var(--s-4);
}
.card h3 { font-size: var(--step-2); margin-block-end: var(--s-2); }
.card p { color: var(--c-ink-dim); font-size: var(--step--1); }

/* ---- RATES -------------------------------------------------------------- */

.rates { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.rate-group h3 {
	font-family: var(--f-text);
	font-size: var(--step--2);
	font-weight: var(--w-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
	margin-block-end: var(--s-4);
}
.rate-list { list-style: none; margin: 0; padding: 0; }
.rate {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-block-end: var(--bw) solid var(--c-hair);
}
.rate:last-child { border-block-end: 0; }
.rate dt { color: var(--c-ink-dim); font-size: var(--step-0); }
.rate dd {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--step-2);
	font-weight: var(--w-semibold);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}
.rate-hero dd { color: var(--c-gold); font-size: var(--step-3); }

/* ---- FACTS -------------------------------------------------------------- */

.facts {
	display: grid; gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--c-panel);
}
.fact {
	padding: var(--s-5);
	border-inline-end: var(--bw) solid var(--c-hair);
	border-block-end: var(--bw) solid var(--c-hair);
}
.fact dt {
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
	margin-block-end: var(--s-2);
}
.fact dd {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--step-2);
	color: var(--c-ink);
	letter-spacing: var(--ls-tight);
}

/* ---- DOWNLOAD ----------------------------------------------------------- */

.steps { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.step {
	background: var(--c-well);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	padding: var(--s-5);
}
.step .n {
	font-family: var(--f-display);
	font-size: var(--step-4);
	line-height: 1;
	color: var(--c-gold-deep);
	display: block;
	margin-block-end: var(--s-3);
}
.step h3 { font-size: var(--step-1); margin-block-end: var(--s-1); }
.step p { color: var(--c-ink-dim); font-size: var(--step--1); }

/* ---- FAQ ---------------------------------------------------------------- */

.faq { max-width: var(--w-narrow); }
.faq details {
	border-block-end: var(--bw) solid var(--c-hair);
}
.faq summary {
	cursor: pointer; list-style: none;
	padding-block: var(--s-5);
	font-family: var(--f-display);
	font-size: var(--step-2);
	letter-spacing: var(--ls-tight);
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	font-family: var(--f-text);
	color: var(--c-gold);
	font-size: var(--step-2);
	transition: transform var(--t) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--c-ink-dim); padding-block-end: var(--s-5); }

/* ---- FOOTER ------------------------------------------------------------- */

.foot {
	background: var(--c-ground-2);
	border-block-start: var(--bw) solid var(--c-hair);
	padding-block: var(--s-7) var(--s-5);
	font-size: var(--step--1);
	color: var(--c-ink-faint);
}
.foot-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.foot h4 {
	font-family: var(--f-text);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-dim);
	margin: 0 0 var(--s-3);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.foot a { color: var(--c-ink-faint); }
.foot a:hover { color: var(--c-gold-soft); }
.foot-base {
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-block-start: var(--bw) solid var(--c-hair);
	display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
	justify-content: space-between;
}

/* ---- HERO LAYOUT (two columns) ------------------------------------------ */

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--s-8);
	align-items: center;
}
.hero-copy { min-width: 0; }

/* ---- ACCOUNT PANEL ------------------------------------------------------ */

.panel {
	background: var(--c-panel);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
	padding: var(--s-5);
	max-width: 26rem;
	justify-self: end;
	width: 100%;
}

/* Tabs without script: a radio per panel, hidden, and sibling selectors do
   the switching. The inputs stay focusable so the keyboard still drives it. */
.tab-in { position: absolute; opacity: 0; pointer-events: none; }
.tabs { display: flex; gap: var(--s-1); margin-block-end: var(--s-5); }
.tabs-pill { flex-wrap: wrap; margin-block-end: var(--s-6); }
.tab {
	flex: 1 1 auto;
	text-align: center;
	cursor: pointer;
	font-size: var(--step--1);
	font-weight: var(--w-medium);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink-dim);
	padding: var(--s-3) var(--s-4);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
	            border-color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--c-ink); border-color: var(--c-gold-dim); }
.tabs-pill .tab { flex: 0 0 auto; }

.tab-body { display: none; }

#panel-login:checked ~ .tabs [for="panel-login"],
#panel-reg:checked   ~ .tabs [for="panel-reg"],
#rank-players:checked ~ .tabs [for="rank-players"],
#rank-guilds:checked  ~ .tabs [for="rank-guilds"] {
	background: var(--c-gold-deep);
	border-color: var(--c-gold-dim);
	color: var(--c-gold-soft);
}
#panel-login:checked ~ .tab-body[data-for="login"],
#panel-reg:checked   ~ .tab-body[data-for="reg"],
#rank-players:checked ~ .tab-body[data-for="players"],
#rank-guilds:checked  ~ .tab-body[data-for="guilds"] { display: block; }

/* Keyboard focus has to be visible even though the input itself is not. */
.tab-in:focus-visible ~ .tabs .tab { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* ---- FORM --------------------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field > span {
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
}
.field input {
	font: inherit;
	font-size: var(--step-0);
	color: var(--c-ink);
	background: var(--c-well);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	padding: var(--s-3) var(--s-4);
	width: 100%;
}
.field input::placeholder { color: var(--c-ink-faint); }
.field input:focus-visible { border-color: var(--c-gold-dim); }
/* The browser's own validity state carries the error; no script needed. The
   :not(:placeholder-shown) guard stops an empty untouched field going red. */
.field input:invalid:not(:placeholder-shown) { border-color: var(--c-danger); }
.field small { font-size: var(--step--2); color: var(--c-ink-faint); }

.check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--step--1); color: var(--c-ink-dim); }
.check input { margin-block-start: 0.25em; accent-color: var(--c-gold); }

.field-note { font-size: var(--step--2); color: var(--c-ink-faint); }
.linky { color: var(--c-gold-soft); cursor: pointer; text-decoration: underline; }
.proto-note {
	margin-block-start: var(--s-5);
	padding-block-start: var(--s-4);
	border-block-start: var(--bw) solid var(--c-hair);
	font-size: var(--step--2);
	color: var(--c-ink-faint);
	text-align: center;
}

/* ---- LIVE BAND ---------------------------------------------------------- */

.band {
	background: var(--c-ground-2);
	border-block: var(--bw) solid var(--c-hair);
}
.band > .wrap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-4);
	padding-block: var(--s-5);
}
.band-cell { display: grid; gap: var(--s-1); }
.band-k {
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
}
.band-v {
	font-family: var(--f-display);
	font-size: var(--step-2);
	color: var(--c-ink);
	letter-spacing: var(--ls-tight);
	font-variant-numeric: tabular-nums;
	display: inline-flex; align-items: center; gap: var(--s-2);
}
.band-v.ok { color: var(--c-ok); }
.pulse {
	width: 0.55em; height: 0.55em; border-radius: 50%;
	background: var(--c-ok);
	animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(94,155,110,.55); }
	70%      { box-shadow: 0 0 0 0.5em rgba(94,155,110,0); }
}

/* ---- NEWS --------------------------------------------------------------- */

.filter-in { position: absolute; opacity: 0; pointer-events: none; }
#news-all:checked        ~ .tabs [for="news-all"],
#news-duyuru:checked     ~ .tabs [for="news-duyuru"],
#news-guncelleme:checked ~ .tabs [for="news-guncelleme"],
#news-etkinlik:checked   ~ .tabs [for="news-etkinlik"] {
	background: var(--c-gold-deep);
	border-color: var(--c-gold-dim);
	color: var(--c-gold-soft);
}
#news-duyuru:checked     ~ .news .news-item:not([data-tag="duyuru"]),
#news-guncelleme:checked ~ .news .news-item:not([data-tag="guncelleme"]),
#news-etkinlik:checked   ~ .news .news-item:not([data-tag="etkinlik"]) { display: none; }

.news { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.news-item {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--s-5);
	padding: var(--s-5);
	background: var(--c-panel);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	transition: border-color var(--t) var(--ease);
}
.news-item:hover { border-color: var(--c-gold-dim); }
.news-date {
	display: grid; justify-items: center; align-content: start;
	padding-block: var(--s-2);
	border-inline-end: var(--bw) solid var(--c-hair);
}
.news-date b {
	font-family: var(--f-display);
	font-size: var(--step-3);
	line-height: 1;
	color: var(--c-gold);
}
.news-date span { font-size: var(--step--2); color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.tagx {
	display: inline-block;
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--r-sm);
	margin-block-end: var(--s-3);
}
.tag-duyuru     { background: var(--c-gold-tint); color: var(--c-gold-soft); }
.tag-guncelleme { background: rgba(94,155,110,.12); color: var(--c-ok); }
.tag-etkinlik   { background: rgba(178,86,79,.14); color: var(--c-danger-ink); }
.news-item h3 { font-size: var(--step-2); margin-block-end: var(--s-2); }
.news-item p { color: var(--c-ink-dim); font-size: var(--step--1); }

/* ---- RANK TABLE --------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
table.rank {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step-0);
	min-width: 40rem;
}
table.rank th {
	text-align: start;
	font-family: var(--f-text);
	font-size: var(--step--2);
	font-weight: var(--w-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
	padding: var(--s-3) var(--s-4);
	border-block-end: var(--bw) solid var(--c-line);
	white-space: nowrap;
}
table.rank td {
	padding: var(--s-3) var(--s-4);
	border-block-end: var(--bw) solid var(--c-hair);
	color: var(--c-ink-dim);
}
table.rank td:nth-child(2) { color: var(--c-ink); }
table.rank .num { font-variant-numeric: tabular-nums; }
table.rank tbody tr { transition: background var(--t-fast) var(--ease); }
table.rank tbody tr:hover { background: var(--c-gold-tint); }
/* The podium is information, not decoration: the first three rows are what a
   ranking exists to show. */
table.rank .top1 td:first-child { color: var(--c-gold);      font-weight: var(--w-semibold); }
table.rank .top2 td:first-child { color: var(--c-gold-soft); font-weight: var(--w-semibold); }
table.rank .top3 td:first-child { color: var(--c-gold-dim);  font-weight: var(--w-semibold); }
.dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-inline-end: var(--s-2); }

/* ---- SHOP --------------------------------------------------------------- */

.card-shop { position: relative; }
.price {
	margin-block-start: var(--s-4);
	font-family: var(--f-display);
	font-size: var(--step-2);
	color: var(--c-gold);
	letter-spacing: var(--ls-tight);
	font-variant-numeric: tabular-nums;
}
.price span { font-family: var(--f-text); font-size: var(--step--2); color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.note {
	margin-block-start: var(--s-6);
	padding: var(--s-4) var(--s-5);
	background: var(--c-gold-tint);
	border-inline-start: 3px solid var(--c-gold-dim);
	border-radius: var(--r);
	color: var(--c-ink-dim);
	font-size: var(--step--1);
	max-width: none;
}

/* ---- REQUIREMENTS ------------------------------------------------------- */

.reqs {
	margin-block-start: var(--s-6);
	display: grid; gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.req {
	background: var(--c-panel);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	padding: var(--s-5);
}
.req h3 {
	font-family: var(--f-text);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
	margin-block-end: var(--s-4);
}
.req dl { margin: 0; display: grid; gap: var(--s-3); }
.req dl > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.req dt { color: var(--c-ink-faint); font-size: var(--step--1); }
.req dd { margin: 0; color: var(--c-ink); font-size: var(--step--1); }

/* ---- REGISTER ----------------------------------------------------------- */

.reg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); align-items: start; }
.reg-steps {
	list-style: none; counter-reset: s; margin: 0 0 var(--s-6); padding: 0;
	display: grid; gap: var(--s-4);
}
.reg-steps li {
	counter-increment: s;
	display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4);
	align-items: baseline;
	color: var(--c-ink-dim);
}
.reg-steps li::before {
	content: counter(s);
	font-family: var(--f-display);
	font-size: var(--step-2);
	color: var(--c-gold-deep);
	line-height: 1;
}
.reg-steps b { color: var(--c-ink); font-weight: var(--w-semibold); }

.facts-card {
	background: var(--c-panel);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--r);
	padding: var(--s-5);
}
.facts-card h3 {
	font-family: var(--f-text);
	font-size: var(--step--2);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-faint);
	margin-block-end: var(--s-4);
}
.facts-card .facts { border: 0; border-radius: 0; background: none; grid-template-columns: 1fr; }
.facts-card .fact { padding: var(--s-3) 0; border-inline-end: 0; }

/* ---- DISCORD ------------------------------------------------------------ */

.disc {
	margin-block-start: var(--s-7);
	padding: var(--s-6);
	border: var(--bw) solid var(--c-gold-dim);
	border-radius: var(--r-lg);
	background: linear-gradient(135deg, var(--c-gold-tint), transparent 60%), var(--c-panel);
	display: grid; gap: var(--s-4); justify-items: start;
}
.disc h3 { font-size: var(--step-2); }
.disc p { color: var(--c-ink-dim); }

/* ---- MENU (disclosure, no script) --------------------------------------
   Wide: the panel is always open and the toggle is gone, so <details> costs
   nothing on desktop. Narrow: it becomes a drop panel under the bar.

   <details> rather than a hidden checkbox: the browser already gives it a
   toggle role, keyboard operation and an open/closed state a screen reader can
   announce, all of which the checkbox trick has to fake. And the launch page
   ships no JavaScript -- a menu that needs a script is a menu that fails while
   the script is still in flight, on exactly the connections where it matters.*/

.menu { margin-inline-start: auto; }
.menu > summary { display: none; }        /* wide: no toggle */
.menu > .main { display: flex; align-items: center; gap: var(--s-5); }
.menu > .main a:not(.btn) {
	font-size: var(--step--1);
	color: var(--c-ink-dim);
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
	transition: color var(--t-fast) var(--ease);
}
.menu > .main a:not(.btn):hover { color: var(--c-ink); }

.who { font-size: var(--step--1); color: var(--c-ink-dim); }
.inline { display: inline; margin: 0; }

/* ---- RESPONSIVE ---------------------------------------------------------
   Three breakpoints mirroring the prototype's 1040 / 820 / 520 px, written in
   rem so they scale with a reader who has enlarged their default font size.
   A px breakpoint ignores that reader completely. */

/* 1040px -- the hero stops being a two-column composition. */
@media (max-width: 65rem) {
	.hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
	.panel { justify-self: start; max-width: 25rem; }
	.reg { grid-template-columns: 1fr; gap: var(--s-7); }
	.band > .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero h1 { max-width: min(100%, 30ch); }
	.lede    { max-width: min(100%, 58ch); }
	.facts   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}

/* 820px -- the bar's links collapse into the disclosure. */
@media (max-width: 51.25rem) {
	.menu > summary {
		display: block;
		list-style: none;
		cursor: pointer;
		border: var(--bw) solid var(--c-line);
		border-radius: var(--r);
		padding: var(--s-3);
		color: var(--c-ink);
		line-height: 0;
	}
	.menu > summary::-webkit-details-marker { display: none; }
	/* Three rules drawn with borders instead of an icon font or an SVG: fewer
	   bytes, and it inherits the text colour including on focus. */
	.menu > summary > span {
		display: block; width: 1.25rem; height: 2px;
		background: currentColor;
		box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
	}
	.menu[open] > summary > span { box-shadow: none; transform: rotate(45deg); }
	.menu[open] > summary > span::after {
		content: ""; display: block; width: 1.25rem; height: 2px;
		background: currentColor; transform: rotate(-90deg);
	}

	.menu > .main { display: none; }
	.menu[open] > .main {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-4);
		position: absolute;
		inset-inline: 0;
		inset-block-start: var(--bar-h);
		background: var(--c-ground-2);
		border-block-end: var(--bw) solid var(--c-line);
		padding: var(--s-5) var(--gutter);
		box-shadow: var(--sh-2);
	}
	.menu[open] > .main a:not(.btn) { font-size: var(--step-0); }

	.rates, .steps, .reqs { grid-template-columns: 1fr; }
	.section { padding-block: var(--s-7); }
	.news-item { grid-template-columns: 4rem 1fr; gap: var(--s-4); }
	.news-date { border-inline-end: 0; justify-items: start; }
}

/* 520px -- one column throughout; the two hero actions become full-width so
   neither is a thumb-stretch on a phone. */
@media (max-width: 32.5rem) {
	.facts { grid-template-columns: 1fr; }
	.fact  { border-inline-end: 0; }
	.hero h1 { max-width: none; }
	.actions { flex-direction: column; align-items: stretch; }
	.actions .btn { width: 100%; }
	.chips { gap: var(--s-2) var(--s-4); }
	.band > .wrap { grid-template-columns: 1fr; }
	.panel { max-width: none; padding: var(--s-4); }
	.news-item { grid-template-columns: 1fr; }
	.news-date { flex-direction: row; display: flex; gap: var(--s-2); align-items: baseline; }
	.news-date b { font-size: var(--step-2); }
	.tabs { flex-wrap: wrap; }
}

/* A coarse pointer gets a real target regardless of viewport width: a 24px
   link is a miss on a phone even when the layout around it is wide. */
@media (pointer: coarse) {
	.menu > .main a, .foot a { padding-block: var(--s-2); }
}