:root {
  --bg: oklch(97.28% 0.0054 95.10);
  --surface: oklch(100% 0 89.88);
  --fg: oklch(25.99% 0.0085 137.82);
  --muted: oklch(51.42% 0.0162 124.80);
  --border: oklch(90.04% 0.0121 111.78);
  --accent: oklch(58.42% 0.2008 28.08);
  --success: oklch(53% 0.118 153);
  --warn: oklch(63% 0.133 68);
  --danger: oklch(50% 0.19 27);
  --soft-green: oklch(94% 0.025 145);
  --soft-red: oklch(95% 0.024 28);
  --soft-amber: oklch(95% 0.035 78);
  --font-display: "Segoe UI Variable Display", "Arial Narrow", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-sm: 0 1px 2px oklch(26% 0.0085 138 / 0.05), 0 8px 24px oklch(26% 0.0085 138 / 0.05);
  --shadow-md: 0 2px 4px oklch(26% 0.0085 138 / 0.07), 0 16px 48px oklch(26% 0.0085 138 / 0.09);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.page { min-height: 100vh; }
.section { padding: 72px 0; }
.section-tight { padding: 44px 0; }
.section-rule { border-top: 1px solid var(--border); }
.surface { background: var(--surface); }
.stack { display: grid; gap: 20px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mono, .metric-value, .score-number, .count-value, .data-value, time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--fg); font-family: var(--font-display); font-weight: 600; }
h1 { margin-bottom: 22px; font-size: clamp(2.35rem, 5.1vw, 4.75rem); line-height: 0.98; letter-spacing: -0.03em; }
h2 { margin-bottom: 18px; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; }
h3 { margin-bottom: 10px; font-size: clamp(1.12rem, 1.6vw, 1.42rem); line-height: 1.18; letter-spacing: -0.01em; }
p { margin-bottom: 16px; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 65ch; }
.fine { color: var(--muted); font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; }
.eyebrow { margin-bottom: 16px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.kicker { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.header-row { min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.035em; }
.brand-dot { color: var(--accent); }
.brand-caption { margin-left: 10px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.nav { display: flex; justify-content: center; align-items: center; gap: 4px; }
.nav a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; font-weight: 550; letter-spacing: 0.01em; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--surface); color: var(--fg); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; }
.icon-button img { width: 18px; height: 18px; }
.menu-button { display: none; }
.menu-lines, .menu-lines::before, .menu-lines::after { width: 18px; height: 1.5px; display: block; background: currentColor; content: ""; }
.menu-lines { position: relative; }
.menu-lines::before { position: absolute; top: -6px; }
.menu-lines::after { position: absolute; top: 6px; }

.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid var(--fg); border-radius: var(--radius-sm); background: transparent; color: var(--fg); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn-dark { background: var(--fg); color: var(--surface); }
.btn-primary { border-color: var(--accent); background: var(--accent); color: var(--surface); box-shadow: 0 7px 18px oklch(58.42% 0.2008 28.08 / 0.2); }
.btn-quiet { border-color: var(--border); background: var(--surface); }
.text-link { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.text-link:hover { text-decoration-color: var(--fg); }

.ticker { border-bottom: 1px solid var(--border); background: var(--surface); }
.ticker-row { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; letter-spacing: 0.01em; }
.ticker-data { display: flex; gap: 22px; }
.ticker strong { color: var(--fg); font-family: var(--font-mono); font-weight: 500; }

.hero { padding: 78px 0 64px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); align-items: end; gap: 72px; }
.hero-copy { max-width: 820px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { padding: 24px; border-top: 2px solid var(--fg); border-bottom: 1px solid var(--border); }
.hero-note .data-value { margin-bottom: 6px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.hero-note-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini-stat { padding-top: 14px; border-top: 1px solid var(--border); }
.mini-stat span { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; }
.mini-stat strong { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; }

.section-heading { margin-bottom: 30px; display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.section-heading h2 { margin-bottom: 0; max-width: 720px; }
.section-heading p { margin: 0; max-width: 50ch; color: var(--muted); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { position: relative; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 1px 0 oklch(26% 0.0085 138 / 0.02); }
.card:hover { border-color: color-mix(in oklch, var(--border), var(--fg) 28%); }
.card-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); }
.card-icon img { width: 20px; height: 20px; }
.card p { color: var(--muted); }
.category-card { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; }
.category-card .count { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.category-card.is-featured { background: var(--fg); color: var(--surface); }
.category-card.is-featured h3, .category-card.is-featured p, .category-card.is-featured .count { color: var(--surface); }
.category-card.is-featured .card-icon { border-color: oklch(100% 0 0 / .18); background: oklch(100% 0 0 / .08); }
.category-card.is-featured .card-icon img { filter: invert(1); }

.logo-box { width: 72px; height: 72px; display: grid; place-items: center; flex: 0 0 72px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.logo-box img { max-width: 100%; max-height: 48px; object-fit: contain; }
.logo-box.wide { width: 118px; }
.service-preview { display: flex; align-items: center; gap: 18px; }
.service-preview h3 { margin-bottom: 4px; }
.service-preview p { margin: 0; }
.service-preview .preview-score { margin-left: auto; font-family: var(--font-mono); font-size: 19px; }

.editorial-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.editorial-lead { min-height: 400px; display: flex; flex-direction: column; justify-content: end; padding: clamp(28px, 5vw, 56px); background: var(--fg); color: var(--surface); }
.editorial-lead h2, .editorial-lead p { color: var(--surface); }
.editorial-list { display: grid; }
.story-row { padding: 22px 0; border-top: 1px solid var(--border); }
.story-row:last-child { border-bottom: 1px solid var(--border); }
.story-row h3 { margin-bottom: 8px; }

.breadcrumb { padding: 22px 0 0; color: var(--muted); font-size: 13px; letter-spacing: 0.01em; }
.breadcrumb a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.page-hero { padding: 52px 0 42px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr); align-items: end; gap: 64px; }
.page-hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.page-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: 13px; }

.filter-panel { position: sticky; top: 94px; align-self: start; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.form-field { display: grid; gap: 7px; }
.form-field label, .field-label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.input, .select { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); }
.input:focus, .select:focus { border-color: var(--fg); outline: none; box-shadow: 0 0 0 3px oklch(26% 0.0085 138 / .08); }
.filter-actions { display: flex; gap: 8px; }
.rating-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 28px; }
.rating-main { min-width: 0; }
.rating-toolbar { margin-bottom: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rating-toolbar, .view-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-toggle { justify-content: flex-end; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.segmented button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font-size: 12px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }

.rating-list { display: grid; gap: 14px; }
.rating-card { display: grid; grid-template-columns: 60px minmax(0, 1fr) 124px; gap: 22px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.rating-card[hidden] { display: none; }
.rank { font-family: var(--font-mono); font-size: 36px; line-height: 1; letter-spacing: -0.04em; }
.rank small { display: block; margin-top: 7px; color: var(--muted); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.rating-content { min-width: 0; }
.service-title-row { display: flex; align-items: center; gap: 16px; }
.service-title-row .logo-box { width: 64px; height: 58px; flex-basis: 64px; border-radius: 10px; }
.service-title-row h2 { margin: 0; font-size: 25px; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--success); content: ""; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.tag { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 12px; }
.subscores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.subscore { padding-top: 10px; border-top: 1px solid var(--border); }
.subscore span { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.01em; }
.subscore strong { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.rating-score { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; }
.score-disc { --score-color: var(--success); width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--score-color) calc(var(--value) * 1%), var(--border) 0); }
.score-disc::before { grid-area: 1/1; width: 76px; height: 76px; border-radius: 50%; background: var(--surface); content: ""; }
.score-disc .score-number { z-index: 1; grid-area: 1/1; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.score-disc .score-number small { font-size: 11px; font-weight: 500; color: var(--muted); }
.score-disc.warn { --score-color: var(--warn); }
.rating-actions { width: 100%; display: grid; gap: 8px; }
.rating-actions .btn { width: 100%; }
.compare-check { display: flex; align-items: center; gap: 8px; min-height: 40px; justify-content: center; color: var(--muted); font-size: 12px; cursor: pointer; }
.compare-check input { width: 17px; height: 17px; accent-color: var(--fg); }
.rating-list.compact .rating-card { grid-template-columns: 44px minmax(0, 1fr) 88px; padding: 17px 20px; }
.rating-list.compact .rank { font-size: 25px; }
.rating-list.compact .service-title-row .logo-box { width: 50px; height: 44px; flex-basis: 50px; }
.rating-list.compact .feature-tags, .rating-list.compact .subscores, .rating-list.compact .rating-content > p, .rating-list.compact .rating-actions .btn-quiet { display: none; }
.rating-list.compact .score-disc { width: 70px; height: 70px; }
.rating-list.compact .score-disc::before { width: 55px; height: 55px; }
.rating-list.compact .score-number { font-size: 18px; }
.compare-bar { position: fixed; z-index: 40; right: 24px; bottom: 24px; min-width: 280px; display: none; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 12px 12px 18px; border-radius: 12px; background: var(--fg); color: var(--surface); box-shadow: var(--shadow-md); }
.compare-bar.is-visible { display: flex; }

.service-hero-card { display: grid; grid-template-columns: 1fr 360px; gap: 52px; padding: clamp(26px, 5vw, 56px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.service-identity { display: flex; align-items: center; gap: 22px; margin-bottom: 34px; }
.service-identity .logo-box { width: 150px; height: 86px; flex-basis: 150px; }
.service-identity h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.8rem); }
.service-summary { max-width: 66ch; font-size: 18px; }
.score-panel { padding-left: 34px; border-left: 1px solid var(--border); }
.score-panel .score-number-large { margin-bottom: 8px; font-family: var(--font-mono); font-size: clamp(4rem, 8vw, 6.6rem); line-height: .9; letter-spacing: -0.06em; }
.score-panel .score-number-large small { font-size: 16px; letter-spacing: 0; color: var(--muted); }
.score-bars { display: grid; gap: 13px; margin-top: 26px; }
.score-bar-row { display: grid; grid-template-columns: 1fr 40px; gap: 10px; align-items: center; }
.score-bar-row label { grid-column: 1/-1; color: var(--muted); font-size: 12px; }
.bar { height: 7px; overflow: hidden; border-radius: 999px; background: var(--border); }
.bar span { height: 100%; display: block; border-radius: inherit; background: var(--fg); }
.score-bar-row strong { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; }
.prose { max-width: 72ch; font-size: 17px; line-height: 1.7; }
.prose h2 { margin-top: 48px; }
.prose h3 { margin-top: 32px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.fact-table { width: 100%; border-collapse: collapse; }
.fact-table th, .fact-table td { padding: 15px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.fact-table th { width: 45%; color: var(--muted); font-size: 13px; font-weight: 500; }
.sidebar-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.sidebar-card + .sidebar-card { margin-top: 14px; }
.sidebar-card h3 { font-size: 18px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-box { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.price-box span { color: var(--muted); font-size: 11px; }
.price-box strong { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 18px; }

.compare-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.switch { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 24px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; }
.switch input::before { width: 16px; height: 16px; display: block; border-radius: 50%; background: var(--muted); content: ""; transition: transform .2s ease; }
.switch input:checked { background: var(--fg); }
.switch input:checked::before { background: var(--surface); transform: translateX(16px); }
.compare-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 17px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table th:last-child, .compare-table td:last-child { border-right: 0; }
.compare-table thead th { padding-top: 24px; padding-bottom: 24px; }
.compare-table thead th:first-child { width: 190px; background: var(--bg); }
.compare-table tbody th { background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 500; }
.compare-service { display: grid; gap: 12px; }
.compare-service .logo-box { width: 100%; height: 70px; }
.compare-score { font-family: var(--font-mono); font-size: 25px; }
.compare-score small { color: var(--muted); font-size: 11px; }
.cell-best { background: var(--soft-green); }
.compare-table tr.is-hidden { display: none; }
.compare-mobile { display: none; }

.article-shell { display: grid; grid-template-columns: 220px minmax(0, 760px) 1fr; gap: 48px; align-items: start; }
.article-toc { position: sticky; top: 102px; }
.article-toc a { display: block; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.article-toc a:hover { color: var(--fg); }
.article-body { min-width: 0; font-size: 18px; line-height: 1.72; }
.article-body > p:first-of-type { font-size: 22px; line-height: 1.5; letter-spacing: -0.01em; }
.article-body h2 { margin-top: 58px; font-size: 30px; }
.article-body blockquote { margin: 34px 0; padding: 24px 0; border-top: 2px solid var(--fg); border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 23px; line-height: 1.45; }
.article-aside { position: sticky; top: 102px; }
.article-progress { position: fixed; z-index: 60; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); }
.checklist { display: grid; gap: 0; margin: 32px 0; border-top: 1px solid var(--border); }
.checklist-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.checkmark { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--fg); border-radius: 50%; font-family: var(--font-mono); font-size: 12px; }

.tools-feature { display: grid; grid-template-columns: 1fr .85fr; gap: 16px; }
.tools-feature-main { min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 54px); border-radius: var(--radius-lg); background: var(--fg); color: var(--surface); }
.tools-feature-main h2, .tools-feature-main p { color: var(--surface); }
.tools-feature-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tools-feature-data div { padding-top: 12px; border-top: 1px solid oklch(100% 0 0 / .2); }
.tools-feature-data span { display: block; color: oklch(100% 0 0 / .62); font-size: 11px; }
.tools-feature-data strong { font-family: var(--font-mono); font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 500; }
.tools-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool-card { min-height: 188px; display: flex; flex-direction: column; justify-content: space-between; }
.tool-card[hidden] { display: none; }
.tool-card h3 { font-size: 20px; }
.tool-card .card-icon { margin-bottom: 18px; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tool-tabs button { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; cursor: pointer; }
.tool-tabs button[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--surface); }

.tool-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 24px; align-items: start; }
.calculator { position: sticky; top: 100px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.calculator .form-field + .form-field { margin-top: 15px; }
.calculator-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 20px; }
.analytics-panel { display: grid; gap: 16px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.count-box { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.count-value { display: block; margin-bottom: 5px; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; }
.count-label { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric-card { min-height: 132px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.metric-label { display: block; min-height: 38px; color: var(--muted); font-size: 12px; }
.metric-value { display: block; margin-top: 10px; font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.05; letter-spacing: -0.03em; }
.chart-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.chart-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.chart-header h2 { margin: 0; font-size: 24px; }
.chart-header p { margin: 0; color: var(--muted); font-size: 12px; }
.emission-chart { width: 100%; height: auto; overflow: visible; }
.chart-grid-line { stroke: var(--border); stroke-width: 1; }
.chart-area { fill: color-mix(in oklch, var(--accent) 14%, var(--surface)); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-point { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart-label { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.explain-card { padding: 20px; border-top: 2px solid var(--fg); background: var(--surface); }
.explain-card p { margin: 0; color: var(--muted); font-size: 14px; }

.launcher { min-height: 100vh; padding: 64px 0; }
.launcher-head { display: grid; grid-template-columns: 1fr .6fr; gap: 60px; align-items: end; margin-bottom: 46px; }
.launcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.launcher-card { min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.launcher-card .screen-tag { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.launcher-card h2 { font-size: 26px; }
.launcher-card p { color: var(--muted); }

.search-dialog { width: min(680px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); }
.search-dialog::backdrop { background: oklch(26% 0.0085 138 / .52); backdrop-filter: blur(4px); }
.search-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.search-head input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; outline: 0; }
.search-results { padding: 10px; }
.search-result { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px; border-radius: 8px; }
.search-result:hover { background: var(--bg); }
.search-result small { color: var(--muted); }

.site-footer { margin-top: 72px; border-top: 1px solid var(--border); }
.footer-grid { min-height: 190px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: center; }
.footer-links { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.footer-note { color: var(--muted); font-size: 12px; }

@media (max-width: 1080px) {
  .header-row { gap: 18px; }
  .brand-caption { display: none; }
  .nav a { padding-inline: 9px; }
  .hero-grid, .page-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-note { max-width: 600px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .service-hero-card { grid-template-columns: 1fr 300px; gap: 32px; }
  .article-shell { grid-template-columns: 180px minmax(0, 1fr); }
  .article-aside { display: none; }
  .tool-layout { grid-template-columns: 330px minmax(0, 1fr); }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .header-row { grid-template-columns: 1fr auto auto; min-height: 64px; }
  .menu-button { display: inline-grid; }
  .nav { position: fixed; inset: 64px 0 auto; display: none; align-items: stretch; padding: 14px; border-bottom: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow-md); }
  .nav.is-open { display: grid; }
  .nav a { min-height: 48px; padding-inline: 14px; }
  .ticker-row { overflow: hidden; }
  .ticker-data span:nth-child(n+3) { display: none; }
  .hero { padding: 54px 0 44px; }
  .section { padding: 54px 0; }
  .grid-3, .editorial-grid, .tools-feature, .service-hero-card, .detail-grid, .article-shell, .tool-layout, .launcher-head { grid-template-columns: 1fr; }
  .rating-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .rating-card { grid-template-columns: 46px minmax(0, 1fr) 104px; gap: 14px; padding: 18px; }
  .subscores { grid-template-columns: 1fr 1fr; }
  .service-hero-card { padding: 28px; }
  .score-panel { padding: 28px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .calculator { position: static; }
  .article-toc { display: none; }
  .launcher-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 0; }
}

@media (max-width: 600px) {
  h1 { font-size: clamp(2.25rem, 12vw, 3.25rem); }
  h2 { font-size: 1.75rem; }
  .brand { font-size: 21px; }
  .header-tools .btn { display: none; }
  .hero-actions, .filter-actions, .compare-controls, .section-heading, .chart-header { align-items: stretch; flex-direction: column; }
  .hero-actions .btn, .filter-actions .btn { width: 100%; }
  .hero-note-grid, .grid-3, .grid-4, .tools-side, .tools-feature-data, .price-grid, .explain-grid, .launcher-grid, .footer-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 190px; }
  .service-preview { align-items: flex-start; }
  .service-preview .preview-score { margin-left: 0; }
  .rating-toolbar { align-items: stretch; flex-direction: column; }
  .rating-card, .rating-list.compact .rating-card { grid-template-columns: 38px 1fr; }
  .rating-score { grid-column: 1/-1; display: grid; grid-template-columns: 76px 1fr; }
  .rating-actions { grid-template-columns: 1fr 1fr; }
  .service-title-row { align-items: flex-start; }
  .service-title-row h2 { font-size: 21px; }
  .service-identity { align-items: flex-start; flex-direction: column; }
  .service-identity .logo-box { width: 130px; height: 74px; flex-basis: 74px; }
  .compare-desktop { display: none; }
  .compare-mobile { display: grid; gap: 12px; }
  .compare-mobile-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .compare-mobile-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .compare-mobile-row:last-child { border-bottom: 0; }
  .compare-mobile-row span:first-child { color: var(--muted); font-size: 12px; }
  .article-body { font-size: 17px; }
  .article-body > p:first-of-type { font-size: 20px; }
  .countdown { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: 1fr; }
  .calculator-actions { grid-template-columns: 1fr; }
  .compare-bar { right: 14px; bottom: 14px; left: 14px; min-width: 0; }
}

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