:root {
  --page: #FFFFFF;
  --paper: #F6F8FA;
  --slate: #EDF1F5;
  --cool: #E4EBF1;
  --clay: #FFF2E9;
  --clay-2: #FFE5D5;

  --deep: #0E161C;
  --deep-2: #18242D;
  --deep-3: #223039;
  --on-deep: #F2F5F7;
  --on-deep-2: #9DAEBA;
  --deep-rule: rgba(255,255,255,0.15);

  --ink: #131A20;
  --ink-2: #3C4851;
  --ink-3: #58656F;
  --line: #E2E7EC;
  --line-2: #C8D1D9;

  --o: #FF6A00;
  --on-o: #170C00;
  --accent: #D1480A;
  --accent-ink: #B23906;
  --accent-line: #F4CAAC;
  --pos: #0F6B4F;
  --pos-soft: #EAF2ED;

  --font: "Segoe UI Variable Text", "Segoe UI", Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-num: Bahnschrift, "DIN Alternate", "Segoe UI Variable Small", "Segoe UI", Arial, sans-serif;

  --r: 4px;
  --r-sm: 3px;
  --r-lg: 5px;

  --gutter: 1.125rem;
  --headh: 56px;
  --navh: 46px;
  --block: 2.25rem;
  --bandpad: 1.75rem;
  --measure: 68ch;

  --fs-micro: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-sub: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.375rem;
  --fs-h2: 1.5rem;
  --fs-h1: 2rem;
}

@media (min-width: 767px) {
  :root {
    --gutter: 2rem;
    --headh: 62px;
    --navh: 48px;
    --block: 3rem;
    --bandpad: 2.25rem;
    --fs-body: 1.09375rem;
    --fs-lead: 1.25rem;
    --fs-h3: 1.5rem;
    --fs-h2: 1.75rem;
    --fs-h1: 2.625rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2.5rem;
    --block: 3.25rem;
    --bandpad: 2.5rem;
    --fs-lead: 1.3125rem;
    --fs-h2: 1.875rem;
    --fs-h1: 3rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
b, strong { font-weight: 650; }

a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: var(--r-sm); }
.foot :focus-visible, .answer :focus-visible, .deck :focus-visible, .jump :focus-visible { outline-color: #FFFFFF; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 0.75rem; top: -6rem; z-index: 90;
  background: var(--page); color: var(--accent-ink);
  border: 1px solid var(--accent-ink); border-radius: var(--r-sm);
  padding: 0.75rem 1.125rem; font-size: var(--fs-small); font-weight: 600;
}
.skip:focus { top: 0.75rem; }

.ph {
  display: inline-block;
  padding: 0 0.3125rem;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  background: var(--slate);
  color: var(--ink-2);
  font-size: 0.9em;
  font-weight: 600;
}
.answer .ph, .deck .ph { border-color: var(--deep-rule); background: rgba(255,255,255,0.08); color: var(--on-deep); }

.wrap {
  width: 100%;
  max-width: calc(1280px + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.tag {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}
.tag--accent { background: var(--o); color: var(--on-o); }
.tag--light { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-2); }

.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker--on { color: var(--o); }

.head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--headh);
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo i { font-style: normal; color: var(--accent-ink); }

.mainnav { display: none; }
.mainnav ul { display: flex; align-items: center; gap: 0.125rem; }
.mainnav a {
  display: block;
  padding: 0.5rem 0.6875rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sub);
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
}
.mainnav a:hover { background: var(--slate); color: var(--ink); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); font-weight: 650; }

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 650;
  cursor: pointer;
}
.burger:hover { background: var(--slate); }
.burger i {
  display: block; width: 16px; height: 10px; flex: none; font-style: normal;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 16px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center left / 16px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 16px 1.5px no-repeat;
}

.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: var(--page);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 3rem;
}
.sheet__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--headh);
  border-bottom: 1px solid var(--line);
}
.sheet__close {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; margin: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--page); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-small); font-weight: 650; cursor: pointer;
}
.sheet__close i {
  display: block; width: 12px; height: 12px; flex: none; font-style: normal;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat;
  transform: rotate(45deg);
}
.sheet nav { padding-top: 1.5rem; }
.sheet li + li { border-top: 1px solid var(--line); }
.sheet li a {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sheet li a:hover { text-decoration: none; color: var(--accent-ink); }
.sheet li a[aria-current="page"] { color: var(--accent-ink); }

.crumbs { border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
  padding: 0.6875rem 0;
}
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--ink-3); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

.masthead { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.masthead h1 {
  margin-top: 0.75rem;
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 20ch;
}
.masthead .kicker { color: var(--accent-ink); }
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.125rem;
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.meta span { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }

.answer {
  background: var(--deep);
  color: var(--on-deep);
  border-top: 4px solid var(--o);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.answer h2 {
  margin-top: 0.75rem;
  color: var(--on-deep);
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.014em;
  font-weight: 600;
  max-width: 58ch;
}
.answer h2 strong { font-weight: 700; box-shadow: inset 0 -0.14em 0 var(--o); }
.answer__n {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1.75rem;
  margin-top: 1.125rem; padding-top: 1rem;
  border-top: 1px solid var(--deep-rule);
  font-size: var(--fs-small);
  color: var(--on-deep-2);
}
.answer__n b {
  font-family: var(--font-num); font-size: 1.5rem; font-weight: 700;
  line-height: 1; color: var(--on-deep); font-variant-numeric: tabular-nums;
}

.deck {
  background: var(--deep);
  color: var(--on-deep);
  padding-top: 2rem;
  padding-bottom: 2.25rem;
  border-top: 1px solid var(--deep-rule);
  scroll-margin-top: calc(var(--headh) + var(--navh));
}
.deck__head { max-width: 62ch; }
.deck__head h2 {
  margin-top: 0.6875rem;
  color: var(--on-deep);
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.028em;
}
.deck__head p { margin-top: 0.75rem; color: var(--on-deep-2); font-size: var(--fs-sub); line-height: 1.62; }

.deck__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 130ms ease;
}
.pcard:hover, .pcard:focus-within { border-color: var(--o); }

.pcard__shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-num);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 0.9375rem 1rem 1.0625rem; }
.pcard__label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
}
.pcard__label a { color: var(--ink); }
.pcard__label a:hover { color: var(--accent-ink); }
.pcard__name {
  margin-top: 0.3125rem;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.pcard__score { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8125rem; }
.pcard__score b {
  font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pcard__score i {
  position: relative; display: block; flex: 1 1 auto; height: 6px;
  background: var(--slate); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.pcard__score i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 10%); background: var(--o);
}
.pcard__score span { font-size: var(--fs-micro); color: var(--ink-3); white-space: nowrap; }

.pcard__m {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9375rem; padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.pcard__m > div + div { border-left: 1px solid var(--line); padding-left: 0.625rem; }
.pcard__m dt { font-size: var(--fs-micro); color: var(--ink-3); }
.pcard__m dd {
  margin-top: 0.125rem;
  font-family: var(--font-num); font-size: var(--fs-sub); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pcard__why { margin-top: 1rem; font-size: var(--fs-sub); line-height: 1.58; color: var(--ink-2); max-width: 48ch; }
.pcard__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;
  margin-top: auto; padding-top: 1.0625rem;
}
.pcard__foot .btn { padding: 0.5625rem 1.125rem; font-size: var(--fs-small); }
.tolink { font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.tolink:hover { color: var(--accent-ink); border-bottom-color: var(--accent); text-decoration: none; }

.deck__note {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--on-deep-2);
  max-width: 76ch;
}

.jump {
  position: sticky;
  top: var(--headh);
  z-index: 55;
  background: var(--deep-2);
  color: var(--on-deep);
  border-top: 1px solid var(--deep-rule);
  border-bottom: 1px solid var(--deep-rule);
}
.jump__bar { position: relative; }
.jump__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: var(--navh);
  padding: 0; margin: 0; border: 0; background: transparent;
  color: var(--on-deep);
  font-family: var(--font-display);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer;
}
.jump__btn i {
  display: block; width: 9px; height: 9px; flex: none; font-style: normal;
  border-right: 1.5px solid var(--o); border-bottom: 1.5px solid var(--o);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 150ms ease;
}
.jump__btn[aria-expanded="true"] i { transform: rotate(225deg) translate(-2px, -2px); }
.jump__list { display: none; }
.jump__list.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--deep-2);
  border-top: 1px solid var(--deep-rule);
  border-bottom: 3px solid var(--o);
  padding: 0.5rem 0 0.75rem;
}
.jump__list.is-open ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
.jump__list a {
  display: block;
  padding: 0.4375rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--on-deep-2);
  border-bottom: 2px solid transparent;
}
.jump__list a:hover { color: var(--on-deep); text-decoration: none; }
.jump__list a[aria-current="true"] { color: var(--o); }
.jump__sep { grid-column: 1 / -1; margin-top: 0.375rem; padding-top: 0.4375rem; border-top: 1px solid var(--deep-rule); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: var(--fs-sub);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #FFFFFF; text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--page); color: var(--ink); border-color: var(--ink-3); }

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-top: 0;
  align-items: start;
}
.rail { display: contents; }
.toc { order: 1; margin-top: 1.5rem; }
.scale { order: 2; }
.method { order: 3; margin-bottom: 3rem; }
.body { order: 4; min-width: 0; }

.toc details { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--page); }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.875rem 1.0625rem;
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 140ms ease;
}
.toc details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.toc__list { padding: 0 0.5rem 0.625rem; }
.toc__list li a {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-2);
}
.toc__list li a:hover { background: var(--slate); color: var(--ink); text-decoration: none; }
.toc__list li a[aria-current="true"] { background: var(--clay); color: var(--accent-ink); font-weight: 650; }

.scale {
  margin-top: 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--page);
  padding: 0.9375rem 1.0625rem 1.0625rem;
}
.scale h2 { margin-top: 0.5rem; font-size: 1rem; letter-spacing: -0.018em; }
.scale dl { margin-top: 0.75rem; }
.scale div {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.375rem 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.scale div + div { border-top: 1px solid var(--line); }
.scale dt {
  flex: none; min-width: 4.25rem;
  font-family: var(--font-num); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.method {
  margin-top: 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--slate);
  padding: 0.9375rem 1.0625rem 1.0625rem;
}
.method h2 { margin-top: 0.5rem; font-size: 1rem; letter-spacing: -0.018em; }
.method p { margin-top: 0.5rem; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.method a { display: inline-block; margin-top: 0.75rem; font-size: var(--fs-small); font-weight: 650; }

.band {
  margin-top: var(--block);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: var(--bandpad) var(--gutter);
  scroll-margin-top: calc(var(--headh) + var(--navh) + 0.5rem);
}
.band--slate { background: var(--slate); }
.band--clay { background: var(--clay); }
.band--cool { background: var(--cool); }
.band--plain { background: var(--page); }

.band > h2 {
  margin-top: 0.75rem;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.028em;
}
.band__sub { margin-top: 0.6875rem; color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.62; max-width: 64ch; }

.tbl {
  margin-top: 1.25rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.cmp th, table.cmp td { text-align: left; padding: 0.6875rem 0.75rem; vertical-align: middle; }
table.cmp thead th {
  background: var(--page);
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0.9375rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-2);
}
table.cmp tbody tr.row td, table.cmp tbody tr.row th { border-bottom: 1px solid var(--line); }
table.cmp tbody tr.row:last-child td, table.cmp tbody tr.row:last-child th { border-bottom: 0; }
.row { cursor: pointer; transition: background-color 130ms ease; }
.row:hover { background: var(--paper); }
.row--lead .cmp__name { box-shadow: inset 3px 0 0 var(--o); }
.row.is-open { background: var(--clay); }
.row.is-open td, .row.is-open th { border-bottom-color: transparent; }

.cmp__name a { color: var(--ink); font-weight: 650; letter-spacing: -0.012em; }
.cmp__name a:hover { color: var(--accent-ink); }
.cmp__badge { display: block; margin-top: 0.1875rem; font-size: var(--fs-micro); color: var(--ink-3); }
.cmp__rank {
  display: inline-block; min-width: 1.375rem; margin-right: 0.4375rem;
  padding: 0.0625rem 0.25rem;
  background: var(--slate); color: var(--ink-2);
  border-radius: var(--r-sm);
  font-family: var(--font-num); font-size: var(--fs-micro); font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.row--lead .cmp__rank { background: var(--o); color: var(--on-o); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.same { color: var(--ink-3); font-weight: 400; }
.diff { color: var(--ink); font-weight: 650; }
.flag {
  display: inline-block;
  background: var(--clay-2);
  border-radius: var(--r-sm);
  padding: 0.0625rem 0.4375rem;
  color: var(--accent-ink);
  font-weight: 700;
}
.cmp__score { display: flex; align-items: center; gap: 0.5rem; }
.cmp__score b { font-family: var(--font-num); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp__score i {
  display: block; position: relative; width: 44px; height: 6px; flex: none;
  background: var(--slate); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.cmp__score i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 10%); background: var(--o);
}
.cmp__cov { min-width: 84px; }
.cmp__cov b { display: block; font-family: var(--font-num); font-weight: 650; font-variant-numeric: tabular-nums; }
.cmp__cov i {
  display: block; position: relative; margin-top: 0.25rem; height: 4px; width: 100%;
  background: var(--slate); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.cmp__cov i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 100% / var(--covmax, 35)); background: var(--line-2);
}
.cell-act { text-align: right; width: 1%; }
.col-diff { display: none; }
.cell-diff { color: var(--ink-2); line-height: 1.4; }

.tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--page);
  color: var(--accent-ink);
  font-family: var(--font);
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease;
}
.tog:hover { background: var(--clay-2); border-color: var(--accent-line); }
.tog__c {
  display: block; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.tog[aria-expanded="true"] { background: var(--o); border-color: var(--o); }
.tog[aria-expanded="true"] .tog__c { transform: translateY(1px) rotate(225deg); border-color: var(--on-o); }
.tog__t {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.panelrow > td {
  padding: 0 0.75rem 1.25rem;
  background: var(--clay);
  border-bottom: 1px solid var(--accent-line);
}
.panel { display: grid; gap: 1rem; }
.panel__lead { font-size: var(--fs-sub); line-height: 1.65; color: var(--ink); max-width: 68ch; }
.panel__wl { display: grid; gap: 0.5rem; }
.panel__wl div {
  display: flex; gap: 0.625rem; align-items: baseline;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2);
}
.panel__wl b {
  flex: none; width: 6.5rem;
  font-family: var(--font-display); font-size: var(--fs-micro);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.panel__wl div:first-child b { color: var(--pos); }
.panel__wl div:last-child b { color: var(--accent-ink); }
.panel__specs { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.panel__specs span {
  background: #FFFFFF; border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  padding: 0.1875rem 0.5rem;
  font-family: var(--font-num); font-size: var(--fs-micro); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.panel__cta { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.panel__cta .btn { padding: 0.5625rem 1.125rem; font-size: var(--fs-small); }

.tablenote {
  margin-top: 0.875rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 76ch;
}
.tablenote b { color: var(--ink); }

.note__head h2 {
  margin-top: 0.75rem;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.028em;
}
.note__lead {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 650;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 46ch;
}
.note__body { margin-top: 1.5rem; max-width: var(--measure); }
.note__body p { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2); }
.note__body p + p { margin-top: 1rem; }
.note__body p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 0.82;
  color: var(--accent-ink);
}
.m { font-weight: 650; color: var(--ink); box-shadow: inset 0 -0.42em 0 var(--clay-2); }
.note__sign {
  margin-top: 1.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--accent-line);
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: var(--measure);
}

.revs { margin-top: 0; }
.prod {
  padding-top: var(--block);
  padding-bottom: var(--block);
  scroll-margin-top: calc(var(--headh) + var(--navh) + 0.5rem);
}
.prod--alt {
  background: var(--slate);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--slate);
  color: var(--ink-3);
  font-family: var(--font-num);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.prod--alt .grid > div { background: var(--page); }
.prod--alt .shot { background: var(--page); }
.prod--alt .pc--con { background: var(--page); }
.prod--alt .cov__track { background: var(--page); }
.prod__top { display: grid; gap: 1.125rem; }
.prod__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; }
.prod h3 {
  margin-top: 0.625rem;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.026em;
}
.prod__tag { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.55; max-width: 58ch; }

.rate { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.125rem; }
.rate b {
  font-family: var(--font-num);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rate span { font-size: var(--fs-small); color: var(--ink-3); white-space: nowrap; }
.rate i {
  display: block; position: relative; flex: 1 1 auto; min-width: 60px; max-width: 220px; height: 6px;
  background: var(--line-2); border-radius: var(--r-sm); font-style: normal; overflow: hidden;
}
.rate i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 10%); background: var(--o);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 1px;
  margin-top: 1.375rem;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.grid > div { background: var(--slate); padding: 0.6875rem 0.875rem; }
.grid dt { font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: 0.02em; }
.grid dd {
  margin-top: 0.1875rem;
  font-family: var(--font-num);
  font-size: var(--fs-sub);
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cov { margin-top: 1.375rem; }
.cov__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 460px;
}
.cov__top b { font-family: var(--font-num); font-size: var(--fs-sub); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.cov__track {
  position: relative;
  margin-top: 0.4375rem;
  height: 10px;
  background: var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  max-width: 460px;
}
.cov__track::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 100% / var(--covmax, 35));
  background: var(--accent);
}
.cov__scale {
  position: relative;
  height: 1.25rem;
  margin-top: 0.375rem;
  max-width: 460px;
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cov__scale span { position: absolute; top: 0.375rem; transform: translateX(-50%); white-space: nowrap; }
.cov__scale span::before {
  content: ""; position: absolute; left: 50%; top: -0.375rem; width: 1px; height: 4px; background: var(--line-2);
}
.cov__scale span:first-child { transform: none; }
.cov__scale span:first-child::before { left: 0; }
.cov__scale .cov__max { left: auto; right: 0; transform: none; }
.cov__scale .cov__max::before { left: auto; right: 0; }

.verdict {
  margin-top: 1.5rem;
  background: var(--clay);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  padding: 0.9375rem 1.125rem 1rem;
  max-width: 72ch;
}
.verdict b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.3125rem;
}
.verdict p { font-size: var(--fs-sub); line-height: 1.6; color: var(--ink); }

.prose { margin-top: 1.5rem; max-width: var(--measure); }
.prose p + p { margin-top: 1rem; }
.prose strong { font-weight: 650; color: var(--ink); }
.prose em { font-style: italic; }

.pc { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin-top: 1.5rem; }
.pc > div {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 0.9375rem 1.0625rem 1.0625rem;
}
.pc--pro { background: var(--pos-soft); border-color: #C9DED4; }
.pc--con { background: var(--slate); }
.pc h4 {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.pc--pro h4 { color: var(--pos); }
.pc ul { margin-top: 0.625rem; }
.pc li { position: relative; padding-left: 1.375rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.pc li + li { margin-top: 0.5rem; }
.pc li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; }
.pc--pro li::before {
  background:
    linear-gradient(var(--pos), var(--pos)) center / 10px 2px no-repeat,
    linear-gradient(var(--pos), var(--pos)) center / 2px 10px no-repeat;
}
.pc--con li::before { background: linear-gradient(var(--ink-3), var(--ink-3)) center / 10px 2px no-repeat; }

.prod__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}
.prod__cta span { font-size: var(--fs-small); color: var(--ink-3); max-width: 44ch; }

.guide { margin-top: 1.25rem; display: grid; gap: 0.875rem; }
.guide article {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 1.125rem 1.25rem 1.25rem;
  background: var(--page);
}
.guide__n {
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.guide h3 { margin-top: 0.375rem; font-size: 1.125rem; line-height: 1.24; letter-spacing: -0.022em; }
.guide p { margin-top: 0.6875rem; font-size: var(--fs-sub); line-height: 1.62; color: var(--ink-2); }

.faq { margin-top: 1.25rem; border-top: 1px solid var(--accent-line); }
.faq details { border-bottom: 1px solid var(--accent-line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 0.9375rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 650;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::after {
  content: ""; flex: none; margin-top: 0.4375rem; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 140ms ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 0.6875rem; }
.faq__a { padding: 0 0 1.125rem; max-width: var(--measure); font-size: var(--fs-sub); line-height: 1.66; color: var(--ink-2); }

.srcs { margin-top: 1.25rem; }
.srcs li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 76ch;
}
.srcs li:first-child { border-top: 1px solid var(--line-2); }
.srcs b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.byline {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  margin-top: 1.375rem;
  padding: 1.0625rem 1.125rem;
  background: #FFFFFF;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: var(--fs-small);
}
.byline dt { color: var(--ink-3); }
.byline dd { margin-top: 0.1875rem; color: var(--ink); font-weight: 600; }

.foot {
  background: var(--deep);
  color: var(--on-deep-2);
  padding-top: 3.25rem;
  padding-bottom: 2.25rem;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.foot a { color: var(--on-deep-2); }
.foot a:hover { color: var(--on-deep); text-decoration: none; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.foot__cols h2 {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-deep);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--deep-rule);
}
.foot__cols ul { margin-top: 0.875rem; }
.foot__cols li + li { margin-top: 0.5rem; }
.foot__brand {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--deep-rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.foot__logo { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--on-deep); }
.foot__logo i { font-style: normal; color: var(--o); }
.foot__brand p { margin-top: 0.75rem; max-width: 46ch; }
.foot__disc b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-deep);
  margin-bottom: 0.5rem;
}
.foot__disc p { max-width: 56ch; }
.foot__bottom {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--deep-rule);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  font-size: var(--fs-micro);
}

@media (max-width: 766px) {
  .pcard:not(.pcard--lead) .pcard__shot { aspect-ratio: 2 / 1; }
  .tbl { border: 0; background: transparent; border-radius: 0; }
  table.cmp, table.cmp tbody, table.cmp tr, table.cmp td, table.cmp th { display: block; }
  table.cmp tr[hidden] { display: none; }
  table.cmp tbody tr.row td.col-diff { display: flex; }
  table.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .row {
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0.8125rem 0.9375rem 0.9375rem;
    margin-bottom: 0.625rem;
  }
  .row .cmp__name { box-shadow: none !important; }
  .row--lead { border-color: var(--accent-line); }
  .row.is-open {
    background: var(--clay);
    border-color: var(--accent-line);
    border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin-bottom: 0;
  }
  table.cmp tbody tr.row td, table.cmp tbody tr.row th {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
  }
  table.cmp tbody tr.row td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-micro);
    color: var(--ink-3);
  }
  .cmp__name {
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0.6875rem !important;
    font-size: 1.0625rem;
  }
  .cmp__cov { min-width: 0; }
  .cmp__cov i { display: none; }
  .cell-act {
    display: block !important; width: auto;
    padding: 0.8125rem 0 0 !important;
    border-bottom: 0 !important;
  }
  .cell-act::before { display: none; }
  .tog {
    width: 100%; height: auto;
    padding: 0.6875rem 1rem;
    background: var(--page);
    border-color: var(--line-2);
    color: var(--accent-ink);
    font-size: var(--fs-small);
    font-weight: 700;
  }
  .tog[aria-expanded="true"] { background: var(--o); border-color: var(--o); color: var(--on-o); }
  .tog__t { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
  .panelrow > td {
    background: var(--clay);
    border: 1px solid var(--accent-line);
    border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 0.875rem 0.9375rem 1.125rem;
    margin-bottom: 0.625rem;
  }
  .panelrow > td::before { display: none; }
}

@media (min-width: 767px) {
  .answer { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .deck { padding-top: 2.75rem; padding-bottom: 3rem; }
  .deck__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
  .pcard--lead { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .pcard--lead .pcard__shot { aspect-ratio: auto; height: 100%; min-height: 19rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .pcard--lead .pcard__body { padding: 1.5rem 1.5rem 1.625rem; }
  .pcard--lead .pcard__label { font-size: 1.5rem; }
  .pcard--lead .pcard__name { font-size: var(--fs-sub); }
  .pcard--lead .pcard__score b { font-size: 2rem; }
  .pc { grid-template-columns: 1fr 1fr; gap: 1.125rem; }
  .foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__brand { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .foot { padding-top: 4rem; padding-bottom: 2.75rem; }
  .guide { grid-template-columns: 1fr 1fr; }
  .guide article { padding: 1.375rem 1.5rem 1.5rem; }
  table.cmp th, table.cmp td { padding: 0.9375rem 0.875rem; }
  .panelrow > td { padding: 0.25rem 0.875rem 1.375rem; }
  .panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .panel__lead { grid-column: 1; grid-row: 1 / 3; }
  .panel__wl { grid-column: 2; grid-row: 1; }
  .panel__specs { grid-column: 2; grid-row: 2; }
  .panel__cta { grid-column: 1 / 3; }
  .prod__top { grid-template-columns: 240px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .prod__id { padding-top: 0.25rem; }
  .note__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 2.75rem;
    align-items: end;
  }
  .note__lead { margin-top: 0; font-size: 1.375rem; max-width: 36ch; }
}

@media (min-width: 1024px) {
  .jump__btn { display: none; }
  .jump__list, .jump__list.is-open {
    display: block;
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .jump__list ul, .jump__list.is-open ul { display: flex; flex-wrap: wrap; align-items: stretch; }
  .jump__list li { display: flex; }
  .jump__sep { grid-column: auto; margin: 0 0 0 0.75rem; padding: 0 0 0 0.75rem; border-top: 0; border-left: 1px solid var(--deep-rule); }
  .jump__list a {
    display: flex; align-items: center;
    min-height: var(--navh);
    padding: 0 0.6875rem;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .jump__list a[aria-current="true"] { color: var(--o); border-bottom-color: var(--o); }

  .shell {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 2.75rem;
    padding-top: 2.25rem;
  }
  .body { grid-column: 1; grid-row: 1; padding-bottom: 4.5rem; }
  .rail {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--headh) + var(--navh) + 1.25rem);
    align-self: start;
  }
  .toc { margin-top: 0; }
  .method { margin-bottom: 0; }
  .toc summary { pointer-events: none; }
  .toc summary::after { display: none; }
  .burger { display: none; }
  .sheet, .sheet:not([hidden]) { display: none; }
  .mainnav { display: block; }
  .band { margin-left: 0; margin-right: 0; padding-left: 1.75rem; padding-right: 1.75rem; border-radius: var(--r-lg); }
  .band--plain { padding-left: 0; padding-right: 0; border-radius: 0; }
  .cmp__name { width: 24%; min-width: 190px; }
  .prod--alt { margin-left: -1.75rem; margin-right: -1.75rem; padding-left: 1.75rem; padding-right: 1.75rem; border-radius: var(--r); }
  .rate i { max-width: 260px; }
  .prod__top { grid-template-columns: 280px minmax(0, 1fr); gap: 2.25rem; }
  .guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .pcard--lead .pcard__shot { min-height: 0; }
  .pcard--lead .pcard__body { padding: 1.5rem 1.5rem 1.625rem; }
  .pcard--lead .pcard__label { font-size: 1.625rem; }
  .note__body { max-width: none; columns: 2; column-gap: 2.75rem; }
  .note__sign { max-width: none; }
  .note__lead { font-size: 1.5rem; }
}

@media (min-width: 1280px) {
  .shell { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 3.25rem; }
  .col-diff { display: table-cell; width: 18%; }
}

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

.searchform { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; max-width: 34rem; }
.searchform input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-sub);
}
.searchform input[type="search"]:focus-visible { border-color: var(--accent-ink); }
.searchform button { flex: none; cursor: pointer; }

.cards { margin-top: 1.5rem; }
.cards .pcard { border-color: var(--line); }
.cards .pcard__body { padding: 1rem 1.0625rem 1.125rem; }

.entry + .entry { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.entry h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.024em; }
.entry h2 a { color: var(--ink); }
.entry h2 a:hover { color: var(--accent-ink); }
.entry__meta { margin-top: 0.375rem; font-size: var(--fs-small); color: var(--ink-3); }
.entry__sum { margin-top: 0.625rem; font-size: var(--fs-sub); line-height: 1.62; color: var(--ink-2); max-width: var(--measure); }

.empty { margin-top: 1.25rem; font-size: var(--fs-sub); line-height: 1.62; color: var(--ink-2); max-width: var(--measure); }

.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; padding: 0.4375rem 0.6875rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--page); color: var(--ink-2);
  font-size: var(--fs-small); font-weight: 650;
}
.pager .page-numbers:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

.prose h2 { margin-top: 1.75rem; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.024em; }
.prose h3 { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.24; letter-spacing: -0.02em; }
.prose ul, .prose ol { margin-top: 1rem; padding-left: 1.125rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li + li { margin-top: 0.375rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: var(--fs-small); }
.prose th, .prose td { padding: 0.625rem 0.75rem; border: 1px solid var(--line); text-align: left; }
.prose blockquote { margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--accent-line); color: var(--ink-2); }
.prose details { border-top: 1px solid var(--line); }
.prose details:first-of-type { margin-top: 1.25rem; }
.prose details:last-of-type { border-bottom: 1px solid var(--line); }
.prose summary { padding: 0.8125rem 0; font-weight: 650; color: var(--ink); line-height: 1.42; cursor: pointer; }
.prose summary:hover { color: var(--accent-ink); }
.prose details[open] summary { color: var(--accent-ink); }
.prose details > p { margin-top: 0; padding-bottom: 1rem; font-size: var(--fs-sub); line-height: 1.66; color: var(--ink-2); }

.prose .wpcf7 { margin-top: 1.5rem; }
.prose .wpcf7-form p { margin-top: 1.125rem; }
.prose .wpcf7-form label { display: block; font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.prose .wpcf7-form label br { display: none; }
.prose .wpcf7-form-control-wrap { display: block; margin-top: 0.375rem; }
.prose .wpcf7-form input[type="text"],
.prose .wpcf7-form input[type="email"],
.prose .wpcf7-form textarea {
  display: block; width: 100%; max-width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--page); color: var(--ink);
  font: inherit; font-size: var(--fs-sub); line-height: 1.5;
}
.prose .wpcf7-form input[type="text"]:focus-visible,
.prose .wpcf7-form input[type="email"]:focus-visible,
.prose .wpcf7-form textarea:focus-visible { outline: 2px solid var(--o); outline-offset: 1px; border-color: var(--ink-3); }
.prose .wpcf7-form textarea { min-height: 9rem; resize: vertical; }
.prose .wpcf7-form input[type="submit"] {
  padding: 0.6875rem 1.375rem;
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: #FFFFFF;
  font: inherit; font-size: var(--fs-sub); font-weight: 650;
  cursor: pointer;
}
.prose .wpcf7-form input[type="submit"]:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.prose .wpcf7-not-valid-tip { margin-top: 0.375rem; font-size: var(--fs-small); color: var(--accent-ink); }
.prose .wpcf7-response-output { margin: 1rem 0 0; padding: 0.75rem 0.875rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--ink-2); }

.figure { margin: 1.5rem 0 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.figure figcaption {
  margin-top: 0.625rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: var(--measure);
}

.hero { padding-top: 1.5rem; padding-bottom: 1.75rem; }
.hero .kicker { color: var(--accent-ink); }
.hero h1 {
  margin-top: 0.75rem;
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: 20ch;
}
.hero__sub {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: var(--fs-sub);
  line-height: 1.62;
  color: var(--ink-2);
}
.hero__fig { margin-top: 1.375rem; }
.hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--paper);
}

.pcard__shot--img { display: block; padding: 0; }
.pcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.steps { display: grid; gap: 1rem; margin-top: 1.5rem; }
.steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
}
.steps__i {
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--accent-ink);
}
.steps__i .ico { width: 24px; height: 24px; }
.steps b {
  align-self: center;
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.steps li > span:last-child {
  margin-top: 0.3125rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}

.dia { margin: 1.375rem 0 0; }
.dia__svg { display: block; width: 100%; height: auto; }
.dia__svg--wide { display: none; }
.dia__node { fill: var(--page); stroke: var(--line-2); stroke-width: 1.4; }
.dia__link { stroke: var(--line-2); stroke-width: 1.4; }
.dia__tip { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.dia__num {
  fill: var(--accent-ink);
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
}
.dia__lab {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.dia__sub { fill: var(--ink-3); font-size: 12.5px; }
.dia figcaption {
  margin-top: 1rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: var(--measure);
}

.gscale { margin: 1.375rem 0 0; }
.gscale__track {
  display: flex;
  align-items: stretch;
  height: 2.25rem;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.gscale__seg { flex: 0 0 calc(var(--w) * 1%); align-self: stretch; }
.gscale__seg--ok { background: var(--cool); }
.gscale__seg--good { background: var(--clay-2); }
.gscale__seg--vgood { background: #F7A45F; }
.gscale__seg--top { background: var(--o); }
.gscale__axis {
  position: relative;
  display: flex;
  margin-top: 0.375rem;
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.gscale__axis span { flex: 0 0 70%; }
.gscale__axis span + span { flex-basis: 10%; }
.gscale__axis span:last-child { flex-basis: 0; margin-left: -1.25em; text-align: right; }
.gscale__key { display: grid; gap: 0.875rem; margin-top: 1.25rem; }
.gscale__key dt {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.gscale__chip {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.4375rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(19, 26, 32, 0.24);
}
.gscale__key dd {
  margin-top: 0.25rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.gscale__key dd span {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--ink);
}
.gscale figcaption {
  margin-top: 1rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: var(--measure);
}

@media (min-width: 767px) {
  .dia__svg--wide { display: block; }
  .dia__svg--tall { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
  .gscale__key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 2rem; }
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    column-gap: 3rem;
    align-items: center;
    padding-top: 2.25rem;
    padding-bottom: 2.5rem;
  }
  .hero--bare { display: block; }
  .hero__fig { margin-top: 0; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
.head{background:var(--deep);border-bottom:0;box-shadow:inset 0 -3px 0 var(--o);backdrop-filter:none}
.head__bar{min-height:64px}
.logo{color:var(--on-deep);font-size:1.25rem;letter-spacing:-0.025em}
.logo i{color:var(--o)}
.mainnav a{color:var(--on-deep-2);font-weight:600;letter-spacing:0.005em}
.mainnav a:hover{background:var(--deep-3);color:#fff}
.mainnav a[aria-current="page"]{color:#fff;background:transparent;box-shadow:inset 0 -3px 0 var(--o)}
.burger{background:transparent;border-color:var(--deep-rule);color:var(--on-deep)}
.burger:hover{background:var(--deep-3)}
.burger i{background:linear-gradient(#fff,#fff) top left/16px 1.5px no-repeat,linear-gradient(#fff,#fff) center left/16px 1.5px no-repeat,linear-gradient(#fff,#fff) bottom left/16px 1.5px no-repeat}
.skip{background:var(--o);color:var(--on-o);border-color:var(--on-o)}

.meta__v { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

.shot--img { border-style: solid; border-color: var(--line); padding: 0.625rem; overflow: hidden; }
.shot--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pcard__shot--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pcard__shot--img { padding: 0.5rem; }
.lead{background:var(--deep);color:var(--on-deep);padding:3rem 0 3.25rem}
.lead__grid{display:grid;gap:2rem}
.lead .kicker--on{color:var(--o);margin:0 0 .75rem}
.lead h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.07;letter-spacing:-.028em;margin:0 0 1.5rem;color:#fff}
.lead h1 a{color:inherit}
.lead h1 a:hover{color:var(--o);text-decoration:none}
.lead__win{border-top:1px solid var(--deep-rule);border-bottom:1px solid var(--deep-rule);padding:1.125rem 0;margin:0 0 1.25rem}
.lead__badge{display:inline-block;background:var(--o);color:var(--on-o);font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .6rem;border-radius:3px}
.lead__name{font-size:1.3rem;font-weight:700;color:#fff;margin:.6rem 0 .35rem}
.lead__score{display:flex;align-items:baseline;gap:.45rem;margin:0}
.lead__score b{font-family:var(--font-num);font-size:2.25rem;line-height:1;color:var(--o)}
.lead__score span{font-size:.8125rem;color:var(--on-deep-2)}
.lead__why{color:var(--on-deep-2);margin:0 0 1.5rem;max-width:52ch}
.lead__cta{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin:0}
.lead__cta .tolink{color:var(--on-deep-2)}
.lead__cta .tolink:hover{color:#fff}
.lead__fig{margin:0}
.lead__img{display:block;width:100%;height:auto;border-radius:4px}
.cat__count{margin:.35rem 0 .75rem;font-size:.8125rem;color:var(--ink-3)}
.cat__count b{font-family:var(--font-num);font-size:1rem;color:var(--accent-ink)}
.cat__count--soon{color:var(--ink-3);font-style:italic}
@media (min-width:1024px){
.lead{padding:4rem 0 4.25rem}
.lead__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3.5rem}
}
.cats{padding:2.75rem 0 3rem;background:var(--paper)}
.cats__head{max-width:62ch;margin:0 0 1.75rem}
.cats__head .kicker{margin:0 0 .5rem}
.cats__head h2{margin:0 0 .5rem}
.cats__head p{margin:0;color:var(--ink-2)}
.cats__grid{display:grid;grid-template-columns:1fr;gap:1rem}
.cat{display:flex;flex-direction:column;background:var(--page);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cat__shot{aspect-ratio:16/9;background:var(--slate);display:flex;align-items:center;justify-content:center;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cat__shot--img{display:block;aspect-ratio:16/9}
.cat__shot--img img{display:block;width:100%;height:100%;object-fit:cover}
.cat__body{display:flex;flex-direction:column;flex:1;padding:1rem 1.125rem 1.125rem}
.cat__name{margin:0;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.cat__name a{color:var(--ink)}
.cat__name a:hover{color:var(--accent-ink);text-decoration:none}
.cat__why{margin:.5rem 0 0;font-size:.875rem;color:var(--ink-2);flex:1}
.cat__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.875rem;font-size:.8125rem;font-weight:650;color:var(--accent-ink)}
.cat__go i{width:14px;height:1px;background:currentColor;display:block}
.cat:hover{border-color:var(--line-2)}
.cat:hover .cat__go i{width:22px}
.band--paper{background:var(--paper)}
.hero__text{min-width:0}
.lead__text{min-width:0}
.lede{font-size:1.0625rem;color:var(--ink-2);max-width:66ch}
.linklist{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.linklist a{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none}
.shell--wide{max-width:none}
.pcard__shot--cover img{width:100%;height:100%;object-fit:cover}
.shot__img{display:block;width:100%;height:auto}
.dwrap{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse}
.rail--page,.rail--guide{display:none}
@media (min-width:767px){
.cats__grid{grid-template-columns:repeat(2,1fr);gap:1.125rem}
}
@media (min-width:1024px){
.cats{padding:3.5rem 0 3.75rem}
.cats__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
.cats__grid>.cat:first-child{grid-column:span 2;flex-direction:row}
.cats__grid>.cat:first-child .cat__shot{flex:0 0 46%;aspect-ratio:auto}
.cats__grid>.cat:first-child .cat__body{padding:1.5rem 1.75rem}
.cats__grid>.cat:first-child .cat__name{font-size:1.375rem}
.rail--page,.rail--guide{display:block}
}
@media (min-width:1024px){
.jump__list ul,.jump__list.is-open ul{flex-wrap:nowrap;justify-content:flex-start}
.jump__list li{min-width:0}
.jump__list a{padding:0 .5rem;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump__sep{margin:0 0 0 .4rem;padding:0 0 0 .4rem}
}
@media (min-width:1280px){
.jump__list a{padding:0 .625rem;letter-spacing:.05em}
.jump__sep{margin:0 0 0 .6rem;padding:0 0 0 .6rem}
}
.cat,.pcard{position:relative}
.cat__hit{position:absolute;inset:0;z-index:2;border-radius:inherit}
.cat__hit:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.cat:hover,.pcard:hover{border-color:var(--line-2)}
.cat:hover .cat__name,.pcard:hover .pcard__label{color:var(--accent-ink)}
.cat:hover .tolink,.pcard:hover .tolink{color:var(--accent-ink)}
.cat a:not(.cat__hit),.pcard a:not(.cat__hit){position:relative;z-index:3}