/* Design tokens — "Terminal" design (Variant A): Archivo + JetBrains Mono, square corners,
   amber accent, dot grid. Dark is the default; light follows the system unless the visitor
   picked a theme. Fonts are self-hosted (latin subset, variable). */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-display: swap;
  font-weight: 400 900; font-stretch: 62% 125%;
  src: url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-display: swap;
  font-weight: 400 700;
  src: url('/assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --accent: #FFB23F;
  --on-accent: #0A0B0A;
  --bg: #0A0B0A;
  --panel: #101210;
  --glass: rgba(16, 18, 16, 0.72);
  --text: #E8EDE6;
  --body: #B4BCB2;
  --muted: #838C82;
  --line: rgba(232, 237, 230, 0.12);
  --strong: rgba(232, 237, 230, 0.28);
  --ink: #FFB23F;
  --up: #5BE38C;
  --down: #FF7A6B;
  --warn: #FFC870;
  --dot: rgba(232, 237, 230, 0.08);
  --shadow: #FFB23F;
  --row: rgba(232, 237, 230, 0.03);
  --callout: rgba(255, 178, 63, 0.08);

  /* Aliases used by templates and page scripts */
  --link: var(--ink);
  --good: var(--up);
  --bad: var(--down);
  --heading: var(--text);
  --group: var(--ink);
  --sel: var(--accent);

  --text-h1: clamp(36px, 5.4vw, 76px);
  --text-h2: 26px;
  --space-section: clamp(40px, 5vw, 64px);
  --space-gap: 28px;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --bg: #F1EFE8; --panel: #F9F8F3; --glass: rgba(249, 248, 243, 0.75);
    --text: #121310; --body: #3C4038; --muted: #62675E;
    --line: rgba(18, 19, 16, 0.14); --strong: rgba(18, 19, 16, 0.4);
    --ink: #8A4F00; --up: #17803D; --down: #B42318; --warn: #8A4F00;
    --dot: rgba(18, 19, 16, 0.10); --shadow: #121310; --row: rgba(18, 19, 16, 0.03); --callout: rgba(138, 79, 0, 0.07);
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #F1EFE8; --panel: #F9F8F3; --glass: rgba(249, 248, 243, 0.75);
  --text: #121310; --body: #3C4038; --muted: #62675E;
  --line: rgba(18, 19, 16, 0.14); --strong: rgba(18, 19, 16, 0.4);
  --ink: #8A4F00; --up: #17803D; --down: #B42318; --warn: #8A4F00;
  --dot: rgba(18, 19, 16, 0.10); --shadow: #121310; --row: rgba(18, 19, 16, 0.03); --callout: rgba(138, 79, 0, 0.07);
}

/* Base, layout, panels ("windows" in the markup), buttons */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 24px 24px;
}
img, svg { max-width: 100%; }
a { color: var(--ink); }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
button, input, select { font: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Page shell */
.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.page > .shell { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.page > .shell > * { min-width: 0; width: 100%; }
.orb { display: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } }
main.wrap { display: flex; flex-direction: column; gap: var(--space-section); padding-top: 8px; padding-bottom: 24px; counter-reset: sec; }
main.wrap > * { min-width: 0; }
.section { padding: 0; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-bottom: 16px;
}
.section-head p { margin-top: 4px; color: var(--muted); max-width: 720px; font-size: 15px; }
.row-wins { display: flex; flex-wrap: wrap; gap: var(--space-gap); align-items: stretch; }
.row-wins > * { min-width: 0; }

/* Typography */
.disp {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.01em; color: var(--text);
}
.h1 {
  font-size: var(--text-h1); line-height: 0.95; letter-spacing: -0.02em; color: var(--text);
  overflow-wrap: break-word; hyphens: auto;
}
.h2 { font-size: var(--text-h2); line-height: 1.05; }
.h3 { font-size: 19px; line-height: 1.15; }
.lead { margin-top: 22px; max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--body); }
.eyebrow, .label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink);
}
.eyebrow--muted { color: var(--muted); font-weight: 500; }
.muted { color: var(--muted); }
.body-color { color: var(--body); }
.small { font-size: 14px; line-height: 1.55; color: var(--muted); }
.meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 22px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.meta > span + span::before { content: '·'; margin-right: 12px; }
.link, .text-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover, .text-link:hover { text-decoration-thickness: 2px; }
.meta .link, .stack .link, .status-bar a, .toc a {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.meta .link:hover, .stack .link:hover, .toc a:hover { text-decoration: underline; }

/* Windows → numbered sections: the title bar becomes a "[01] TITLE ———" head, the body the panel */
.win { min-width: 0; display: flex; flex-direction: column; }
.win-title {
  display: flex; align-items: center; gap: 12px 18px; margin-bottom: 18px; min-width: 0;
}
.win-title::after { content: ''; flex: 1 1 40px; height: 1px; background: var(--strong); }
.win-title .t {
  display: inline-flex; align-items: baseline; gap: 14px; min-width: 0;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
.win-title .t::before {
  counter-increment: sec; content: '[' counter(sec, decimal-leading-zero) ']';
  flex-shrink: 0; font-family: var(--font-mono); font-stretch: 100%; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--ink);
}
.win-title .ico { display: none; }
.win-ctl { display: none; }
.win-body, .win-white { flex: 1; padding: 24px; color: var(--text); background: var(--panel); border: 1px solid var(--strong); }
.win-white.pad-lg { padding: 32px; }
@media (max-width: 560px) { .win-body, .win-white, .win-white.pad-lg { padding: 18px; } .win-title .t { font-size: 20px; } }
/* Hero windows: no frame, no head — big type straight on the grid */
.win--bare > .win-title { display: none; }
.win--bare > .win-body, .win--bare > .win-white { padding: 40px 0 8px; background: none; border: 0; }
.ico { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; background: var(--accent); }

/* Legacy panels: a heading as first child becomes a numbered head inside the panel */
.glass { background: var(--glass); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--strong); }
.panel { padding: 24px; background: var(--panel); border: 1px solid var(--strong); }
.panel--xl { padding: 28px; }
.panel > h2.disp:first-child, .panel > .eyebrow:first-child, .panel > .win-head:first-child {
  display: flex; align-items: baseline; gap: 14px; margin: -24px -24px 20px; padding: 16px 24px;
  border-bottom: 1px solid var(--line); font-family: var(--font-display); font-stretch: 125%; font-size: 20px; font-weight: 800;
  line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text);
}
.panel > h2.disp:first-child::before, .panel > .eyebrow:first-child::before, .panel > .win-head:first-child::before {
  counter-increment: sec; content: '[' counter(sec, decimal-leading-zero) ']';
  flex-shrink: 0; font-family: var(--font-mono); font-stretch: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--ink);
}
.panel > .eyebrow:first-child { font-size: 15px; }
.panel > h2.disp:first-child .src { font-family: var(--font-mono); font-stretch: 100%; text-transform: none; }
.chip, .tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--body); border: 1px solid var(--line);
}
.chip--lg { min-height: 30px; padding: 4px 10px; font-size: 12px; flex-wrap: wrap; }
.badge-ad { display: inline-flex; padding: 1px 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--accent); color: var(--on-accent); }

/* Buttons: amber block + outlined, square, mono caps; hover lifts onto a hard shadow */
.btn, .btn-glass, .btn-inv {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--strong);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
.btn { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
:root[data-theme='light'] .btn { border-color: var(--text); }
.btn:hover, .btn-glass:hover, .btn-inv:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.btn-inv:hover, .btn-glass:hover { border-color: var(--text); }
.btn:active, .btn-glass:active, .btn-inv:active { transform: none; box-shadow: none; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-inv { min-height: 40px; padding: 0 14px; font-size: 12px; letter-spacing: 0.06em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Breadcrumbs */
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.crumbs li + li::before { content: '/'; margin-right: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }
.page-hero { padding: 0; }
.page-hero--center { text-align: left; }

/* Grids */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.two-col { display: flex; flex-wrap: wrap; gap: var(--space-gap); align-items: flex-start; }
.two-col > .main-col { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-gap); }
.two-col > aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-gap); }
@media (min-width: 1000px) { .two-col > aside { position: sticky; top: 16px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Header: terms ticker + glass bar with numbered nav. Footer: column grid, outlined wordmark, status line. */
.site-header { position: relative; z-index: 20; }
.ticker {
  border-bottom: 1px solid var(--line); padding: 9px 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.ticker-in { display: flex; align-items: center; gap: 28px; white-space: nowrap; overflow: hidden; }
.ticker .live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--up); }
.ticker .live::before { content: ''; width: 7px; height: 7px; background: var(--up); }
.ticker .k { color: var(--muted); margin-right: 8px; }
.ticker b { font-weight: 700; color: var(--text); }
@media (max-width: 720px) { .ticker .opt { display: none; } }

.bar-wrap { padding-top: 16px; }
.bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 18px; background: var(--glass); border: 1px solid var(--strong);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.logo {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 20px; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--text);
}
.logo .cursor { display: inline-block; width: 10px; height: 18px; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.main-nav { display: flex; flex-wrap: wrap; gap: 0; }
.nav-link, .mobile-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.nav-link .n, .mobile-nav a .n { font-size: 10px; color: var(--muted); }
.nav-link:hover { box-shadow: inset 0 -2px 0 var(--strong); }
.nav-link[aria-current] { box-shadow: inset 0 -2px 0 var(--ink); }
.nav-link[aria-current] .n, .mobile-nav a[aria-current] .n { color: var(--ink); }
.mobile-nav a[aria-current] { box-shadow: inset 2px 0 0 var(--ink); }
.bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px;
  cursor: pointer; text-decoration: none; list-style: none; border-radius: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--strong);
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { border-color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }
.bar .cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
.bar .cta:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.theme-toggle .to-dark { display: none; }
:root[data-theme='light'] .theme-toggle .to-light { display: none; }
:root[data-theme='light'] .theme-toggle .to-dark { display: inline; }

.mobile-menu { display: none; }
.mobile-menu summary .icon-close { display: none; }
.mobile-menu[open] summary .icon-close { display: inline; }
.mobile-menu[open] summary .icon-open { display: none; }
.mobile-nav {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 40;
  display: flex; flex-direction: column; padding: 8px; background: var(--panel); border: 1px solid var(--strong);
  box-shadow: 8px 8px 0 var(--shadow);
}
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .mobile-menu { display: block; }
}
@media (max-width: 560px) {
  .bar { padding-left: 12px; }
  .bar .cta, .bar-actions .search span { display: none; }
  .logo { font-size: 17px; }
}

/* Footer */
.site-footer {
  margin-top: auto; padding-top: 0; border-top: 1px solid var(--line); background: var(--bg);
}
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-left: 1px solid var(--line); }
.footer-cols nav { padding: 32px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-cols h2 {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.footer-cols ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-cols a { font-size: 15px; color: var(--body); text-decoration: none; }
.footer-cols a:hover { color: var(--text); text-decoration: underline; }
.wordmark {
  padding: 28px 0 8px; overflow: hidden; white-space: nowrap; user-select: none;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(48px, 12.5vw, 176px);
  line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--strong);
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 20px 0 32px; border-top: 1px solid var(--line); }
.footer-note { max-width: 760px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.footer-note a { color: var(--body); }
.sys { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Components: card art, score, rank rows, filters, tables, FAQ, forms — Terminal design */

/* Card art — the only rounded, colourful object on the page; tint from --c1/--c2 inline */
.card-art {
  flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;
  width: 96px; height: 60px; padding: 8px; border-radius: 6px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--c1), var(--c2)); border: 1px solid rgba(255, 255, 255, 0.22);
}
.card-art .row { display: flex; justify-content: space-between; align-items: center; }
.card-art .chipset { width: 20px; height: 15px; border-radius: 3px; background: rgba(255, 230, 160, 0.9); }
.card-art .net, .card-art .nm { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.06em; }
.card-art .net { font-size: 8px; color: rgba(255, 255, 255, 0.9); }
.card-art .nm { font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; }
.card-art--md { width: 120px; height: 76px; padding: 10px; }
.card-art--lg { width: 200px; height: 126px; padding: 14px; border-radius: 10px; }
.card-art--lg .chipset { width: 30px; height: 22px; }
.card-art--lg .net, .card-art--lg .nm { font-size: 11px; }
.card-art--xl { width: 220px; height: 138px; padding: 16px 18px; border-radius: 10px; box-shadow: 8px 8px 0 var(--shadow); transform: rotate(-3deg); }
.card-art--xl .chipset { width: 34px; height: 26px; }
.card-art--xl .net, .card-art--xl .nm { font-size: 12px; letter-spacing: 0.08em; }
.dot { display: inline-block; flex-shrink: 0; width: 28px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, var(--c1), var(--c2)); border: 1px solid var(--strong); }

/* Score badge: mono read-out */
.score { min-width: 76px; padding: 6px 10px; text-align: left; background: transparent; border: 1px solid var(--strong); }
.score .val { font-family: var(--font-mono); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--ink); }
.score .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.score--lg { padding: 0; border: 0; }
.score--lg .val { font-size: 54px; line-height: 1; color: var(--text); }
.score--lg .lbl { margin-top: 6px; font-size: 12px; }
.score--none .val { font-size: 11px; font-family: var(--font-mono); color: var(--muted); white-space: nowrap; text-transform: uppercase; }

/* “Not verified” and sources */
.nv { color: var(--muted); font-style: italic; }
.src { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 1px dotted currentColor; }
.src:hover { border-bottom-style: solid; }
sup.src { margin-left: 4px; }

/* Rank rows */
.rank-list { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--strong); }
.win-body > .rank-list, .win-white > .rank-list { margin: -24px -24px 0; border: 0; background: transparent; }
.rank-row { padding: 16px 20px; border-bottom: 1px solid var(--line); transition: background-color var(--duration-fast); }
.rank-row:hover { background: var(--row); }
.rank-row:last-child { border-bottom: 0; }
.rank-row[hidden] { display: none; }
.rank-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rank-id { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
.rank-n { width: 30px; flex-shrink: 0; font-family: var(--font-mono); font-size: 14px; color: var(--muted); }
.rank-id h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.rank-id h3 a { color: var(--text); text-decoration: none; }
.rank-id h3 a:hover { color: var(--ink); }
.rank-id .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rank-id .best-for { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; margin: 0; flex: 1 1 340px; min-width: 0; }
.stats dt { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: 3px 0 0; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text); }
.rank-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank-details { margin-top: 12px; }
.rank-details summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body);
}
.rank-details summary::-webkit-details-marker { display: none; }
.rank-details summary::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  font-size: 16px; color: var(--text); border: 1px solid var(--strong);
}
.rank-details[open] summary::before { content: '−'; color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.rank-details .cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; margin-top: 12px; padding: 18px 0 4px 44px;
  font-size: 15px; color: var(--body); border-top: 1px dashed var(--strong);
}
.rank-details .cols .eyebrow { color: var(--up); }
.rank-details .cols > div:nth-child(2) .eyebrow { color: var(--down); }
.rank-details .cols > div:nth-child(3) .eyebrow { color: var(--muted); }
.rank-details ul { margin: 0; padding-left: 18px; }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-row { padding: 14px; }
  .rank-details .cols { padding-left: 0; }
  .rank-id .card-art { width: 70px; height: 44px; padding: 6px; }
  .rank-id .card-art .chipset { width: 14px; height: 10px; }
  .rank-id .card-art .net, .rank-id .card-art .nm { font-size: 7px; }
}

/* Filter groups: joined square toggles */
.seg, .pills { display: flex; flex-wrap: wrap; }
.pills { margin-bottom: 16px; }
.seg button, .seg a, .pills button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; margin-left: -1px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--body); background: transparent; border: 1px solid var(--strong); border-radius: 0;
}
.seg button:hover, .seg a:hover, .pills button:hover { color: var(--text); }
.seg [aria-pressed='true'], .seg [aria-current], .pills [aria-pressed='true'] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); position: relative; }
.seg.glass, .pills .glass { background: transparent; border: 0; backdrop-filter: none; }

/* Picks: joined cells with an amber label */
.pick {
  display: flex; flex-direction: column; padding: 20px 22px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--strong); transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
a.pick:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.pick-stage { display: flex; align-items: center; gap: 12px; }
.pick-stage .glow { display: none; }
.pick-badge { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.pick-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; flex-grow: 1; }
.pick-body h3 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1.1; }
.pick-body h3 a { color: var(--text); text-decoration: none; }
.pick-body p { font-size: 15px; line-height: 1.5; color: var(--body); }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.pick-foot strong { color: var(--ink); }
.go-arrow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.go-arrow::after { content: ' →'; }

/* Tables */
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th {
  padding: 12px 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.dtable td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
.dtable tbody tr:hover td { background: var(--row); }
.dtable th[scope='row'] { font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: normal; border-bottom: 1px solid var(--line); }
.dtable td strong, .dtable .v { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--strong); }
.win-body > .table-scroll:first-child:last-child, .win-white > .table-scroll:first-child:last-child { margin: -24px; border: 0; }
.table-scroll > table { min-width: 560px; }
.wide-table table { min-width: 960px; }
.name-cell { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--text); }
.name-cell a { color: var(--text); text-decoration: none; }
.name-cell a:hover { color: var(--ink); text-decoration: underline; }
.dtable th.th-card { font-size: 12px; }
.winner { display: inline-flex; padding: 1px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); }
.winner--tie { color: var(--muted); background: transparent; border: 1px solid var(--line); }
.status-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-top: 1px dashed var(--line);
}

/* Key/value lists: dashed spec-sheet rows */
.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.kv dt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kv dd { margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700; text-align: right; color: var(--text); }
.kv--sm > div { padding: 8px 0; }
.kv--sm dd { font-size: 13px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 28px; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--strong); }
.win-body > .faq:first-child, .win-white > .faq:first-child { margin: -24px -24px 0; border-top: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details.glass { border: 0; border-bottom: 1px solid var(--line); background: none; backdrop-filter: none; }
.faq summary {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; color: var(--text);
}
.faq summary:hover { background: var(--row); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px;
  font-family: var(--font-mono); font-size: 16px; color: var(--text); border: 1px solid var(--strong);
}
.faq details[open] summary::before { content: '−'; color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.faq .plus { display: none; }
.faq .answer { margin: 0 20px 20px 62px; font-size: 16px; line-height: 1.65; color: var(--body); }
.faq h3 { font: inherit; }
@media (max-width: 560px) { .faq summary { padding: 0 14px; } .faq .answer { margin-left: 56px; margin-right: 14px; } }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.input, select.input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text); background-color: var(--panel); border: 1px solid var(--strong);
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.input[aria-invalid='true'] { border-color: var(--bad); }
select.input {
  cursor: pointer; appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-size: 6px 6px, 6px 6px; background-position: right 20px center, right 14px center; background-repeat: no-repeat;
}
select.input + .sel-arrow { display: none; }
@supports (appearance: base-select) {
  select.input, select.input::picker(select) { appearance: base-select; }
  select.input { display: flex; align-items: center; padding-block: 0; padding-right: 14px; background-image: none; }
  select.input::picker(select) { border: 1px solid var(--strong); background: var(--panel); padding: 0; border-radius: 0; }
  select.input::picker-icon { color: var(--ink); }
}
select.input option { background-color: var(--panel); color: var(--text); padding: 8px 12px; }
select.input option:checked { background-color: var(--accent); color: var(--on-accent); }
.field-error { font-size: 12px; font-weight: 700; color: var(--bad); }
.form-note { font-size: 14px; color: var(--muted); }

/* Checkbox with a real SVG tick */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--text); min-height: 44px; }
.check input {
  appearance: none; width: 18px; height: 18px; margin: 0; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--strong); background-color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.check input:hover { border-color: var(--text); }
.check input:checked {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0B0A' stroke-width='3.6' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Newsletter / closed form */
.cta-band { display: flex; flex-direction: column; gap: 12px; }
.cta-band form { display: flex; flex-direction: column; gap: 12px; }

/* Link lists */
.link-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color var(--duration-fast);
}
.link-tile:hover { border-color: var(--ink); }
.link-tile .ico { width: 8px; height: 8px; }
.link-tile .t { display: block; font-weight: 700; color: var(--text); text-decoration: none; }
a.link-tile:hover .t, .link-tile a.t:hover { color: var(--ink); }
.link-tile .m { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.link-tile .grow { flex: 1; min-width: 0; }
.link-tile .num, .tip-num {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); border: 1px solid var(--strong);
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.toc a { display: block; padding: 6px 0; color: var(--body); border-bottom: 1px dashed var(--line); }
.toc a:hover { color: var(--ink); }
.post-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.post-row:hover .ttl { color: var(--ink); }
.post-row .cat {
  flex-shrink: 0; min-width: 84px; padding: 2px 6px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line);
}
.post-row .ttl { font-weight: 700; color: var(--text); }
.tip { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); color: var(--body); }
.tip strong { color: var(--text); }
.fact { padding: 18px 20px; background: var(--panel); border: 1px solid var(--strong); }
.fact .lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fact .val { margin: 6px 0; font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.fact .note { font-size: 14px; line-height: 1.45; color: var(--body); }

/* Page-specific layouts — Terminal design */

/* Home: comparison list view with selectable rows + details pane */
.lv { overflow-x: auto; background: var(--panel); border: 1px solid var(--strong); }
.win-body > .lv:first-child { margin: -24px -24px 0; border: 0; }
.lv-inner { min-width: 1080px; }
.lv-grid { display: grid; grid-template-columns: minmax(190px, 1.5fr) 1fr 1fr 1.2fr 0.8fr 0.8fr 0.9fr 1.1fr 0.7fr; }
.lv-head > span {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.lv-row {
  align-items: center; width: 100%; min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.35; color: var(--text); background: transparent;
}
.lv-row:hover { background: var(--row); }
.lv-row > span { padding: 0 14px; }
.lv-row .nm { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 16px; font-weight: 700; }
.lv-row .nm small { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lv-row[aria-pressed='true'] { box-shadow: inset 3px 0 0 var(--accent); background: var(--row); }
.lv-row[hidden] { display: none; }
.score-mini { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.details-pane { margin-top: 20px; padding: 24px; background: var(--glass); border: 1px solid var(--strong); box-shadow: 10px 10px 0 var(--shadow); }
.details-pane[hidden] { display: none; }
.details-pane .head { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.details-pane h3 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
.details-pane .sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.details-pane .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--strong); }
.details-pane .cols p, .details-pane .cols ul { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.details-pane .cols ul { padding-left: 18px; }
.group-lbl { margin-bottom: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--up); }
.group-lbl--warn { color: var(--down); }

/* Card finder */
.finder { display: flex; flex-direction: column; gap: 16px; }
.finder .result { padding: 16px; font-size: 15px; color: var(--body); background: var(--bg); border: 1px dashed var(--strong); }
.finder .result .item { padding: 4px 0; line-height: 1.5; }
.finder .result .item a { font-weight: 700; }

/* Review: spec-sheet hero */
.review-hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.review-hero > .main-col { flex: 999 1 480px; min-width: 0; }
.review-card {
  flex: 1 1 340px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding: 28px 24px;
  background: var(--glass); border: 1px solid var(--strong); box-shadow: 10px 10px 0 var(--shadow);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.review-card .rank-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.review-card .btn { width: 100%; }
.score-bars { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.score-bar { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) 64px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; text-transform: uppercase; }
.score-bar .track { display: block; height: 16px; background: repeating-linear-gradient(to right, var(--line) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); }
.score-bar .fill {
  display: block; height: 100%; transform-origin: left; transform: scaleX(var(--v));
  background: repeating-linear-gradient(to right, var(--accent) 0 calc(10% / var(--v, 1) - 3px), transparent calc(10% / var(--v, 1) - 3px) calc(10% / var(--v, 1)));
}
.score-bar .v { font-family: var(--font-mono); font-weight: 700; color: var(--ink); text-align: right; }
.score-bar .why { grid-column: 1 / -1; margin-top: -8px; font-size: 13px; font-weight: 400; text-transform: none; color: var(--muted); }
@media (max-width: 520px) { .score-bar { grid-template-columns: 1fr 64px; } .score-bar .track { grid-column: 1 / -1; grid-row: 2; } }
.pc h2 { margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--down); }
.pros h2 { color: var(--up); }
.pc ul, .bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; color: var(--body); }
.pc li, .bullets li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pc li::before, .bullets li::before { content: '−'; font-family: var(--font-mono); color: var(--down); }
.pros li::before, .bullets li::before { content: '+'; color: var(--up); }
ol.bullets li::before { content: '›'; color: var(--ink); }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--strong); }
.steps li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.steps .n {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 40px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--text);
}
.steps strong { display: block; font-size: 17px; text-transform: uppercase; }
.steps span span { color: var(--body); font-size: 15px; }
.panel > p { color: var(--body); font-size: 17px; line-height: 1.7; }
.panel > p + p { margin-top: 14px; }
.disclaimer { font-size: 13px; color: var(--muted); }
.verdict { box-shadow: 10px 10px 0 var(--shadow); }
.verdict.panel > .eyebrow:first-child { border-bottom: 0; padding-bottom: 0; color: var(--ink); }
.verdict p { font-size: 20px; line-height: 1.5; color: var(--text); }

/* Versus face-off */
.faceoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.faceoff .side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.faceoff .nm2 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 22px; text-transform: uppercase; }
.faceoff .vs { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--ink); }
.faceoff .row { display: flex; gap: 10px; align-items: center; }
.vs-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; color: var(--on-accent); background: var(--accent);
}
.picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.picker .field { flex: 1 1 260px; }

/* Blog cards */
.post-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--strong);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
.post-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.cover { position: relative; overflow: hidden; height: 120px; background: linear-gradient(135deg, var(--c1), var(--c2)); border-bottom: 1px solid var(--strong); }
.cover::before, .cover::after {
  content: ''; position: absolute; width: 40%; aspect-ratio: 1.6; border-radius: 8px;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.55);
}
.cover::before { left: 12%; top: 24%; transform: rotate(-8deg); }
.cover::after { left: 36%; top: 40%; transform: rotate(6deg); }
.post-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.post-card .cat { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.post-card .ttl { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text); }
.post-card .exc { font-size: 15px; color: var(--body); }
.post-card .mt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.featured { display: flex; flex-wrap: wrap; text-decoration: none; color: var(--text); }
.featured .cover { flex: 1 1 320px; min-height: 220px; height: auto; border: 1px solid var(--strong); }
.featured .copy { flex: 1 1 360px; min-width: 0; padding: 8px 8px 8px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.featured h2 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 28px; line-height: 1.05; text-transform: uppercase; color: var(--text); }
.featured:hover h2 { color: var(--ink); }
.featured p { color: var(--body); }

/* Article prose */
.article-head { padding: 0; }
.article-head h1 { margin-top: 12px; font-size: clamp(34px, 4.6vw, 64px); }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.byline .who { font-weight: 700; color: var(--text); }
.avatar { display: inline-flex; flex-shrink: 0; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--on-accent); background: var(--accent); }
.avatar svg { width: 18px; height: 18px; }
.article-cover { height: clamp(140px, 22vw, 260px); margin-top: 24px; border: 1px solid var(--strong); }
.prose { max-width: 760px; font-size: 18px; line-height: 1.7; color: var(--body); }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--ink); }
.prose h2 { margin: 40px 0 14px; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--text); }
.prose h3 { margin: 26px 0 10px; font-size: 19px; color: var(--text); }
.prose strong { color: var(--text); }
.prose a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.prose .table, .prose table {
  display: block; overflow-x: auto; width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 15px; line-height: 1.5;
  background: var(--panel); border: 1px solid var(--strong);
}
.prose th { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--strong); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 130px; }
.prose td:first-child { font-weight: 700; color: var(--text); }
.prose .callout, .callout {
  margin: 0 0 18px; padding: 18px 20px; font-size: 16px; line-height: 1.6; color: var(--body);
  background: var(--callout); border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.prose .callout strong, .callout strong { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.prose code, .formula { font-family: var(--font-mono); font-size: 0.88em; color: var(--text); background: var(--row); padding: 1px 6px; border: 1px solid var(--line); }
.takeaways { padding: 20px 22px; margin-bottom: 28px; background: var(--glass); border: 1px solid var(--strong); box-shadow: 6px 6px 0 var(--shadow); }
.takeaways ul { margin: 10px 0 0; padding-left: 20px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.author-box { margin-top: 36px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.6; background: var(--row); border: 1px solid var(--line); }
.author-box .who { font-weight: 700; color: var(--text); }

/* Academy */
.track { display: flex; flex-direction: column; gap: 14px; }
.track .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.level { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--lv, var(--accent)); }
.track ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--strong); }
.track li { border-bottom: 1px solid var(--line); }
.track li a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; text-decoration: none; color: var(--text); font-size: 15px; font-weight: 700; }
.track li a:hover { color: var(--ink); }
.track li a span:last-child { flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.terms { margin: 0; }
.term { padding: 16px 18px; scroll-margin-top: 16px; background: var(--panel); border: 1px solid var(--line); }
.term:target { outline: 2px solid var(--accent); }
.term dt { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 17px; text-transform: uppercase; color: var(--text); }
.term dd { margin: 6px 0 0; font-size: 15px; color: var(--body); }
.term[hidden] { display: none; }

/* Criteria */
.criterion { padding: 20px; background: var(--panel); border: 1px solid var(--strong); }
.criterion .w { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--ink); }
.criterion h3 { margin: 8px 0 6px; font-family: var(--font-display); font-stretch: 125%; font-size: 16px; font-weight: 800; text-transform: uppercase; }
.criterion p { font-size: 14px; color: var(--body); }

/* Calculator */
.calc { display: flex; flex-wrap: wrap; gap: var(--space-gap); align-items: stretch; }
.calc > .win { flex: 3 1 520px; }
.calc > .win.result-win { flex: 2 1 320px; }
.calc > .win.result-win > .win-white, .calc > .win.result-win > .win-body { box-shadow: 10px 10px 0 var(--shadow); }
.calc form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.calc form .hint { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.result { display: flex; flex-direction: column; gap: 14px; }
.net-value { margin: 2px 0; font-family: var(--font-mono); font-weight: 700; font-size: 48px; line-height: 1; color: var(--up); }
.net-value.is-negative { color: var(--down); }
.soon { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); }

/* Availability */
.status {
  display: inline-flex; align-items: center; gap: 7px; min-height: 22px; padding: 0 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line);
}
.status::before { content: ''; width: 7px; height: 7px; background: currentColor; }
.status--available { color: var(--up); }
.status--restricted { color: var(--warn); }
.status--unavailable { color: var(--down); }
.status--unknown { color: var(--muted); }
.quote { font-size: 15px; color: var(--body); font-style: italic; }
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }

/* Reviews index tiles */
.reviews-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.review-tile {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--strong);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
.review-tile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.review-tile .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-tile h2 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase; color: var(--text); }
.review-tile .best-for { font-size: 14px; color: var(--body); }
.review-tile .status { align-self: flex-start; }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.mini-stats dt { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mini-stats dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.review-tile .checked { margin-top: auto; padding-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.review-tile .score--none .val { white-space: nowrap; }

/* Search, 404 */
.search-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; max-width: 720px; }
.search-form .field { flex: 1 1 320px; }
.results { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--strong); }
.results li { border-bottom: 1px solid var(--line); }
.results a { display: block; padding: 14px 4px; text-decoration: none; }
.results a:hover { background: var(--row); }
.results .t { font-weight: 700; color: var(--text); }
.results a:hover .t { color: var(--ink); }
.results .d { display: block; margin-top: 4px; font-size: 14px; color: var(--body); }
.error-box { display: flex; gap: 18px; align-items: flex-start; }
.error-box .x {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px;
  font-family: var(--font-mono); font-weight: 700; color: var(--on-accent); background: var(--down);
}