/* ==========================================================================
   Action Camera Auditor — Direction B · Field Instrument
   Implements "ACA - Design Spec.md". Token values, type scale, breakpoints
   and component behaviour are taken from that document; do not drift from it
   without updating the spec too.
   ========================================================================== */

/* --- 1 · Tokens ---------------------------------------------------------- */

:root {
  --ground: #0E100F;
  --panel: #171A18;
  --panel-2: #1E221F;
  --rule: #2A2E2B;
  --rule-strong: #3A403B;

  --ink: #F1F3EE;
  --ink-2: #DCE0DA;
  --ink-muted: #9AA09A;
  --ink-faint: #7E857D;

  --accent: #D9F24B;
  --accent-hover: #E7FF6B;
  --accent-active: #C2DB33;
  --accent-visited: #B9CE3F;

  --pass: #5CD9A0;
  --warn: #FFC24B;
  --fail: #FF8A66;

  --tint-accent: #1A1D14;
  --tint-warn: #1C1B14;
  --tint-pass: #131A16;
  --tint-fail: #1C1512;

  --track: #242824;

  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* space scale: 4 8 12 16 20 24 32 40 48 56 72 96 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 48px; --s10: 56px; --s11: 72px; --s12: 96px;

  --gutter: 20px;
  --container: 1200px;
  --measure: 68ch;
}

@media (min-width: 768px)  { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

/* --- 2 · Reset ----------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.7;
  /* The single most important line in this file. The old site let a wide
     table widen the layout viewport, rendering body text at 52% of intended
     size on a phone. Nothing may exceed the viewport. */
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

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

/* Focus is never removed. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--ground); }

/* --- 3 · Type ------------------------------------------------------------ */

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

.h1, h1 {
  font-family: var(--cond);
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--ink);
}

.prose h2 {
  font-family: var(--cond);
  font-size: clamp(26px, 4.2vw, 34px);
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--s9) 0 var(--s5);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  scroll-margin-top: 84px;
}
.prose > h2:first-child { margin-top: 0; }

.prose h2 .h2-num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-faint);
  flex: none;
}

/* H3 is a mono accent label, never a large serif. The difference between
   levels is register, not just size. */
.prose h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: var(--s7) 0 var(--s3);
  scroll-margin-top: 84px;
}

.prose h4 {
  font-family: var(--cond);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  margin: var(--s6) 0 var(--s2);
}

.prose p { margin: 0 0 var(--s4); max-width: var(--measure); }
.prose > ul, .prose > ol { margin: 0 0 var(--s4); padding-left: var(--s5); max-width: var(--measure); }
.prose li { margin-bottom: var(--s2); }
.prose li > ul, .prose li > ol { margin-top: var(--s2); }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { border-bottom: 1px solid rgba(217, 242, 75, .35); }
.prose a:hover { border-bottom-color: var(--accent); text-decoration: none; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s8) 0; }

.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 1px 5px;
}

.prose blockquote {
  margin: 0 0 var(--s4);
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--rule-strong);
  background: var(--panel);
  color: var(--ink-2);
  max-width: var(--measure);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(17px, 2.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.data { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.small { font-size: 13px; line-height: 1.5; }

/* --- 4 · Layout ---------------------------------------------------------- */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1440px; }

.band { border-bottom: 1px solid var(--rule); }
.band--panel { background: var(--panel); }
.band__inner { padding-block: var(--s9); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--ground);
  font-family: var(--mono);
  font-size: 12px;
  padding: 12px 16px;
}
.skip-link:focus { left: 0; }

/* --- 5 · Disclosure bar -------------------------------------------------- */
/* On EVERY page, above the fold, including /how-we-test. */

.disclosure-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: #B6BDB4;
}
.disclosure-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding-block: 10px;
  flex-wrap: wrap;
}
.disclosure-bar .tag { color: var(--accent); }

@media (max-width: 639px) {
  .disclosure-bar { font-size: 10px; }
  .disclosure-bar__inner { padding-block: 8px; gap: var(--s2); }
}

/* --- 6 · Nav ------------------------------------------------------------- */
/* One nav sitewide. The bar never wraps to a second line. */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
  padding-block: 14px;
}

.wordmark { display: flex; align-items: center; gap: 14px; flex: none; }
.wordmark:hover { text-decoration: none; }
.monogram {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ground);
  background: var(--accent);
  padding: 6px 7px;
  flex: none;
}
.wordmark__text {
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__text span { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s6);
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 0;
}
.nav__links a { color: var(--ink); white-space: nowrap; }
.nav__links a:hover { color: var(--accent); text-decoration: none; }
.nav__links a[aria-current] {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.nav__search {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
  border: 1px solid var(--rule-strong);
  padding: 6px 10px;
  color: var(--ink-2) !important;
}
.nav__search:hover { border-color: var(--ink); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
}
.nav__icon-search {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 15px;
}
.nav__mobile { display: none; gap: var(--s2); }

@media (max-width: 1023px) {
  .nav__inner { padding-block: 12px; }
  .wordmark__text { font-size: 17px; letter-spacing: .05em; }
  .nav__mobile { display: flex; }
  .nav__toggle, .nav__icon-search { display: flex; }

  /* Full-height drawer. The bar itself never gains a second line. */
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--ground);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 76px var(--gutter) var(--s8);
    font-size: 26px;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 160ms ease, visibility 160ms;
  }
  .nav__links[data-open="true"] { transform: none; visibility: visible; }
  .nav__links a {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__links a[aria-current] { border-bottom-width: 1px; padding-bottom: var(--s4); }
  .nav__search { align-self: flex-start; font-size: 14px; margin-top: var(--s6); border-bottom: 1px solid var(--rule-strong); }
  .nav__close {
    position: absolute;
    top: 12px; right: var(--gutter);
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--rule-strong);
    color: var(--accent); font-family: var(--mono); font-size: 18px; cursor: pointer;
  }
}
@media (min-width: 1024px) { .nav__close { display: none; } }

/* Reading progress — pages over 1,500 words only. */
.progress { height: 3px; background: var(--rule); }
.progress__fill { display: block; height: 3px; width: 0; background: var(--accent); }

/* --- 7 · Breadcrumbs ----------------------------------------------------- */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.breadcrumbs__sep { color: #4A504B; }
.breadcrumbs__current {
  color: var(--accent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 639px) { .breadcrumbs { font-size: 10px; gap: 6px; } }

/* --- 8 · Page header ----------------------------------------------------- */

.page-header {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.page-header__inner { padding-block: var(--s7) var(--s8); }
.page-header h1 { margin: var(--s6) 0 var(--s5); max-width: 24ch; }
.page-header .lede { margin-bottom: var(--s5); }

.page-header__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s7);
  align-items: end;
}
@media (min-width: 1024px) {
  .page-header--figure .page-header__grid { grid-template-columns: 1fr 400px; gap: var(--s10); }
  .page-header--figure h1 { margin-top: 0; }
}

/* Meta chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.chip { border: 1px solid var(--rule-strong); padding: 6px 10px; color: var(--ink-2); }
.chip--accent { border-color: var(--accent); color: var(--accent); }
.chip a { color: inherit; }
@media (max-width: 639px) { .chips { font-size: 10px; gap: 6px; } .chip { padding: 5px 8px; } }

/* --- 9 · Article grid ---------------------------------------------------- */

.article { display: grid; grid-template-columns: 1fr; gap: var(--s9); align-items: start; padding-block: var(--s8) var(--s10); }
.article__body { min-width: 0; max-width: 820px; }
.article__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }

@media (min-width: 1024px) {
  .article { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s10); }
  .article__rail { position: sticky; top: 84px; order: -1; }
  /* Pages with no rail — category indexes, trust, legal, search — are one
     column. Without this they inherit the two-column grid above and their
     only child lands in the 300px rail slot. */
  .article--norail { grid-template-columns: minmax(0, 1fr); }
}

/* --- 10 · btn ------------------------------------------------------------ */
/* Primary is the affiliate click-out and nothing else. No other element
   uses accent as a background. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--ground);
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: background 120ms linear, border-color 120ms linear, color 120ms linear;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn:active { background: var(--accent-active); border-color: var(--accent-active); }
.btn:visited { background: var(--accent-visited); border-color: var(--accent-visited); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--rule); border-color: var(--rule); color: #6E756E; cursor: not-allowed; pointer-events: none;
}
.btn--block { display: flex; width: 100%; }

.btn--secondary {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 13px 20px;
}
.btn--secondary:hover { background: none; border-color: var(--ink); color: var(--ink); }
.btn--secondary:visited { background: none; border-color: var(--rule-strong); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }

/* --- 11 · badge · pills · price ------------------------------------------ */

.badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 9px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge--primary { background: var(--accent); border-color: var(--accent); color: var(--ground); font-weight: 700; }
.badge--pass { border-color: var(--pass); color: var(--pass); }
.badge--warn { border-color: var(--warn); color: var(--warn); }

.pills { display: flex; flex-wrap: wrap; gap: var(--s2); font-family: var(--mono); font-size: 11.5px; margin: var(--s5) 0; }
.pills a { border: 1px solid var(--rule-strong); color: var(--ink-2); padding: 7px 12px; }
.pills a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* A price older than 30 days renders stale rather than lying. */
.price { display: flex; flex-direction: column; }
.price__value { font-family: var(--cond); font-size: 38px; font-weight: 700; line-height: 1; color: var(--ink); }
.price__was { font-size: 20px; color: var(--ink-muted); text-decoration: line-through; }
.price__checked { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.price--dropped .price__checked { color: var(--pass); }
.price--stale .price__value { color: var(--ink-muted); }
.price--stale .price__checked { color: var(--warn); }

/* --- 12 · product-card --------------------------------------------------- */

.product-card { background: var(--panel); border: 1px solid var(--rule); margin: var(--s6) 0; }

.product-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: 12px var(--s5);
  border-bottom: 1px solid var(--rule);
}
.product-card__rank { display: flex; align-items: center; gap: var(--s3); }
.rank-chip {
  font-family: var(--cond);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.rank-chip--first { background: var(--accent); border-color: var(--accent); color: var(--ground); }

.product-card__main { display: grid; grid-template-columns: 1fr; gap: var(--s5); padding: var(--s6) var(--s5); }
@media (min-width: 640px) { .product-card__main { grid-template-columns: 170px minmax(0, 1fr); gap: var(--s6); } }

.product-card__title, .prose .product-card__title {
  display: block;
  border: 0;
  padding: 0;
  font-family: var(--cond);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s3);
  letter-spacing: 0;
}
.prose .product-card__title { color: var(--ink); }

.spec-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px var(--s4);
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s4);
}
.spec-grid dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.spec-grid dd { margin: 0; color: var(--ink-2); }

.product-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.score-inline { display: flex; flex-direction: column; align-items: flex-end; }
.score-inline__value { font-family: var(--cond); font-size: 38px; font-weight: 700; line-height: 1; color: var(--accent); }
.score-inline__label { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }

.product-card__cta { padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); }

/* --- 13 · pros-cons ------------------------------------------------------ */
/* Stacks below 640 with the PASS panel first. Never colour alone: ＋ / −. */

.pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: var(--s6) 0;
}
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }

.pros-cons__panel { background: var(--panel); padding: var(--s4) var(--s5); }
.pros-cons__head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2); }
.pros-cons__panel--pass .pros-cons__head { color: var(--pass); }
.pros-cons__panel--fail .pros-cons__head { color: var(--fail); }
.pros-cons ul { margin: 0; padding-left: var(--s4); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: none; }
.pros-cons li { margin-bottom: 6px; }

/* --- 14 · callout -------------------------------------------------------- */

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin: var(--s6) 0;
}
.callout__head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; color: var(--ink-muted); }
.callout p { margin: 0 0 var(--s2); font-size: 15px; line-height: 1.65; max-width: 64ch; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout ul { margin: 0 0 var(--s2); padding-left: var(--s4); font-size: 15px; line-height: 1.65; }

.callout--key { border-left-color: var(--accent); background: var(--tint-accent); }
.callout--key .callout__head { color: var(--accent); }
.callout--warn { border-left-color: var(--warn); background: var(--tint-warn); }
.callout--warn .callout__head { color: var(--warn); }
.callout--note { border-left-color: var(--ink-muted); }

/* --- 15 · Tables --------------------------------------------------------- */
/* The wrapper scrolls. The page viewport never widens. */

.table-wrap {
  position: relative;
  margin: var(--s6) 0;
}
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: max-content;
}
table.t th, table.t td { padding: 12px 14px; text-align: left; vertical-align: top; }
table.t thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
table.t tbody { color: var(--ink-2); font-variant-numeric: tabular-nums; }
table.t tbody tr { border-bottom: 1px solid var(--rule); }
table.t tbody tr:nth-child(odd) { background: var(--panel); }
table.t tbody tr:last-child { border-bottom: 0; }
table.t tbody td:first-child { color: var(--ink); }
table.t tbody strong { color: var(--ink); font-weight: 600; }

/* compare-table gets the accent header; data-table a plain rule-strong one. */
.t--compare thead tr { background: var(--accent); color: var(--ground); }
.t--data thead tr { border-bottom: 1px solid var(--rule-strong); }
.t--data thead th { color: var(--ink-muted); }

.table-swipe {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--accent);
}
.table-swipe::before { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Sticky first column while a table is horizontally scrolling: a value is
   never orphaned from its row. The accent right edge is the seam marker.
   Everything below is plain CSS keyed on the build-time data-resp attribute,
   so the constraint holds with scripting off.

   The decision rule, from the responsive-table artboard:
   cols   ≥1024   640–1023                        <640
   2–3    full    full                            full
   4–5    full    full                            h-scroll + sticky first col
   6–7    full    h-scroll + sticky first col     stacked key/value cards      */

/* 4–5 columns, phone. */
@media (max-width: 639px) {
  .table-wrap[data-resp="scroll"] table.t th:first-child,
  .table-wrap[data-resp="scroll"] table.t td:first-child {
    position: sticky; left: 0; z-index: 1; border-right: 2px solid var(--accent);
  }
  .table-wrap[data-resp="scroll"] table.t tbody td:first-child { background: var(--tint-accent); }
  .table-wrap[data-resp="scroll"] .t--compare thead th:first-child { background: var(--accent); }
  .table-wrap[data-resp="scroll"] .t--data thead th:first-child { background: var(--ground); }
  .table-wrap[data-resp="scroll"] .table-swipe { display: flex; }
}

/* 6–7 columns, tablet. */
@media (min-width: 640px) and (max-width: 1023px) {
  .table-wrap[data-resp="stack"] table.t th:first-child,
  .table-wrap[data-resp="stack"] table.t td:first-child {
    position: sticky; left: 0; z-index: 1; border-right: 2px solid var(--accent);
  }
  .table-wrap[data-resp="stack"] table.t tbody td:first-child { background: var(--tint-accent); }
  .table-wrap[data-resp="stack"] .t--compare thead th:first-child { background: var(--accent); }
  .table-wrap[data-resp="stack"] .t--data thead th:first-child { background: var(--ground); }
  .table-wrap[data-resp="stack"] .table-swipe { display: flex; }
}

/* Stacked key/value cards — 6+ column tables below 640. Built by site.js
   from the same source table, so nothing is inferred from column position. */
.table-cards { display: none; flex-direction: column; gap: 14px; margin: var(--s6) 0; }
.table-card { border: 1px solid var(--rule); background: var(--panel); }
.table-card--winner { border-color: var(--accent); }
.table-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--cond); font-size: 19px; font-weight: 700; line-height: 1.05;
  text-transform: uppercase; color: var(--ink);
}
.table-card--winner .table-card__head { background: var(--accent); color: var(--ground); border-bottom-color: var(--accent); }
.table-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px; background: var(--rule); margin: 0; }
.table-card dt {
  background: var(--panel); padding: 9px 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.table-card dd {
  background: var(--panel); padding: 9px 14px; margin: 0;
  font-size: 13.5px; text-align: right; color: var(--ink-2);
}
.table-card dd .data, .table-card dd.is-num { font-family: var(--mono); }

@media (max-width: 639px) {
  .table-wrap[data-resp="stack"] { display: none; }
  .table-wrap[data-resp="stack"] + .table-cards { display: flex; }
  table.t { font-size: 13.5px; }
  table.t th, table.t td { padding: 11px 12px; }
}

/* Semantic value colouring inside tables. */
.v-pass { color: var(--pass); }
.v-warn { color: var(--warn); }
.v-fail { color: var(--fail); }

/* --- 16 · winner --------------------------------------------------------- */

.winner-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 5px;
  background: var(--accent);
  color: var(--ground);
  white-space: nowrap;
  vertical-align: middle;
}
.winner-chip--tied { background: none; border: 1px solid var(--rule-strong); color: var(--ink-2); font-weight: 500; }

.winner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 14px 18px;
  margin: var(--s5) 0;
  font-size: 15.5px;
  color: var(--ink-2);
}
.winner--tied { border-left-color: var(--ink-muted); }
.winner__chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  background: var(--accent); color: var(--ground); padding: 4px 7px; white-space: nowrap; flex: none;
}
.winner--tied .winner__chip { background: none; border: 1px solid var(--rule-strong); color: var(--ink-2); font-weight: 500; }

/* --- 17 · score-box ------------------------------------------------------ */
/* Required on every review. The footer's Σ must equal the headline number. */

.score-box { background: var(--panel); border: 1px solid var(--accent); margin: var(--s6) 0; }
.score-box__head { display: flex; align-items: flex-end; gap: var(--s5); padding: 22px var(--s5); border-bottom: 1px solid var(--rule); }
.score-box__value { font-family: var(--cond); font-size: 86px; font-weight: 700; line-height: .8; color: var(--accent); font-variant-numeric: tabular-nums; }
.score-box__meta { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.score-box__subject { font-family: var(--cond); font-size: 21px; font-weight: 700; text-transform: uppercase; line-height: 1; color: var(--ink); }
.score-box__verdict { padding: 14px var(--s5); border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 40px;
  gap: 10px;
  align-items: center;
  padding: 10px var(--s5);
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-2);
}
.score-row__track { height: 6px; background: var(--track); }
.score-row__bar { display: block; height: 6px; background: var(--accent); }
.score-row__bar--warn { background: var(--warn); }
.score-row__bar--fail { background: var(--fail); }
.score-row__value { font-family: var(--mono); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.score-box__sum {
  padding: 12px var(--s5);
  background: var(--tint-accent);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.score-box__price { padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 639px) {
  .score-box__value { font-size: 66px; }
  .score-box__head { padding: 18px var(--s4); gap: var(--s4); }
}

/* --- 18 · toc ------------------------------------------------------------ */

.toc { border: 1px solid var(--rule); background: var(--panel); }
.toc__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 12px var(--s4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* The source TOC labels carry the author's own section numbering ("1. Insta360
   Ace Pro 2 …"), which is the numbering the H2s use too. So the list markers
   are suppressed rather than adding a second, conflicting set. */
.toc ol, .toc-collapse ol { list-style: none; }
.toc ol { margin: 0; padding: 12px var(--s4) 14px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.toc li { margin: 0; }
.toc a { color: var(--ink-2); border-bottom: 0; }
.toc a:hover { color: var(--accent); text-decoration: none; }
.toc a[aria-current] { color: var(--accent); }
.toc__count { color: var(--accent); }

/* Below 1024 the rail TOC collapses to a closed <details> above the first H2. */
.toc-collapse { border: 1px solid var(--rule); background: var(--panel); margin: 0 0 var(--s6); }
.toc-collapse > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 14px var(--s4);
  min-height: 48px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
}
.toc-collapse > summary::-webkit-details-marker { display: none; }
.toc-collapse > summary::after { content: "＋"; color: var(--accent); font-size: 14px; }
.toc-collapse[open] > summary::after { content: "−"; }
.toc-collapse ol { margin: 0; padding: 0 var(--s4) 14px; font-size: 14px; line-height: 1.9; }
.toc-collapse a { color: var(--ink-2); }

/* Exactly one table of contents is visible at a time: the sticky rail from
   1024 up, the collapsed <details> below it. */
@media (min-width: 1024px) { .toc-collapse { display: none; } }
@media (max-width: 1023px) {
  .article__rail .toc { display: none; }
  /* With the rail TOC hidden, a rail carrying nothing else would leave a gap. */
  .article__rail:not(:has(.score-box)) { display: none; }
}

/* --- 19 · faq-item ------------------------------------------------------- */
/* Native <details>/<summary>. First item open on load. */

.faq { border: 1px solid var(--rule); background: var(--panel); margin: var(--s5) 0; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: 16px var(--s5);
  min-height: 48px;
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "＋";
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-muted);
  flex: none;
  line-height: 1.2;
}
.faq-item[open] > summary::after { content: "−"; color: var(--accent); }
.faq-item > summary:hover { color: var(--accent); }
.faq-item__body { padding: 0 var(--s5) 18px; }
.faq-item__body p { margin: 0 0 var(--s3); font-size: 15.5px; line-height: 1.7; max-width: 66ch; }
.faq-item__body p:last-child, .faq-item__body ul:last-child { margin-bottom: 0; }
.faq-item__body ul, .faq-item__body ol { margin: 0 0 var(--s3); padding-left: var(--s5); font-size: 15.5px; line-height: 1.7; }

@media (max-width: 639px) {
  .faq-item > summary { font-size: 19px; padding: 14px var(--s4); }
  .faq-item__body { padding: 0 var(--s4) 14px; }
}

/* --- 20 · img-wrap + no-image fallback ----------------------------------- */

.figure { margin: var(--s6) 0; display: flex; flex-direction: column; gap: var(--s2); }
.figure__slot {
  background: repeating-linear-gradient(135deg, var(--panel-2) 0 8px, var(--panel) 8px 16px);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  padding: var(--s4);
}
.figure__slot--hero { aspect-ratio: 4 / 3; }
.figure__slot--section { aspect-ratio: 16 / 9; }
.figure__slot--product { aspect-ratio: 1 / 1; }
.figure figcaption { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: .04em; }

/* No-image fallback: a measured figure, not an empty box, so the pages with
   no photography still read as evidence. */
.measured-figure {
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.measured-figure__value { font-family: var(--cond); font-size: 52px; font-weight: 700; line-height: 1; color: var(--accent); }
.measured-figure__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

.stat-pair { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: var(--s6) 0; }
@media (min-width: 640px) { .stat-pair { grid-template-columns: 1fr 1fr; } }
.stat-pair > div { background: var(--panel); padding: var(--s5); display: flex; flex-direction: column; gap: 6px; }

/* --- 21 · verdict + cta-box ---------------------------------------------- */

.verdict { border: 1px solid var(--accent); background: var(--panel); margin: var(--s8) 0; }
.verdict__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
  padding: 12px var(--s5);
  background: var(--accent); color: var(--ground);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.verdict__head strong { font-weight: 700; }
.verdict__body { padding: var(--s6) var(--s5); }
.verdict__body > h2 {
  font-family: var(--cond); font-size: clamp(24px, 4vw, 34px); font-weight: 700;
  text-transform: uppercase; line-height: 1.05; color: var(--ink);
  margin: 0 0 var(--s4); padding: 0; border: 0; display: block;
}
.verdict__body p { font-size: 16.5px; line-height: 1.7; max-width: 66ch; }
.verdict__body p:last-child { margin-bottom: 0; }

.cta-box { border: 1px solid var(--rule); background: var(--panel); padding: var(--s6) var(--s5); margin: var(--s8) 0; }
.cta-box > h2, .cta-box > h3 {
  font-family: var(--cond); font-size: 28px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink); margin: 0 0 var(--s3); padding: 0; border: 0; display: block;
}
.cta-box p:last-of-type { margin-bottom: var(--s4); }

.split { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: var(--s5) 0; }
@media (min-width: 640px) { .split { grid-template-columns: 1fr 1fr; } }
.split > div { background: var(--ground); padding: var(--s4) var(--s5); }
.split__head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.split > div:nth-child(2) .split__head { color: var(--ink-muted); }
.split ul { margin: 0; padding-left: var(--s4); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* --- 22 · related-grid --------------------------------------------------- */

.related { margin: var(--s8) 0 0; }
.related__head, .prose .related__head {
  display: block; padding-bottom: 10px;
  font-family: var(--cond); font-size: 28px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink);
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 10px; margin: 0 0 var(--s4);
}
.related-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .related-grid { grid-template-columns: 1fr 1fr; } }

.related-card {
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: border-color 120ms linear;
}
.related-card:hover { border-color: var(--accent); text-decoration: none; }
.related-card__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.related-card__title { font-family: var(--cond); font-size: 21px; font-weight: 700; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.related-card__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }

/* --- 23 · disclosure (inline) -------------------------------------------- */

.disclosure-inline {
  border: 1px dashed var(--rule-strong);
  padding: 14px 18px;
  margin: var(--s6) 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.disclosure-inline strong { color: var(--ink-2); font-weight: 600; }

/* --- 24 · Homepage-specific ---------------------------------------------- */

.hero { display: grid; grid-template-columns: 1fr; gap: var(--s8); align-items: end; padding-block: var(--s10) var(--s9); }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s11); padding-block: var(--s11) var(--s10); } }
.hero__kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(40px, 8.5vw, 88px); line-height: .92; letter-spacing: .005em; max-width: 19ch; margin: var(--s5) 0; }
.hero__lede { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; margin: 0 0 var(--s6); }

.status-panel { border: 1px solid var(--rule); background: var(--panel); }
.status-panel__head, .status-panel__foot {
  padding: 12px 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.status-panel__head { border-bottom: 1px solid var(--rule); }
.status-panel__foot { border-top: 1px solid var(--rule); color: var(--ink-faint); letter-spacing: .06em; }
.status-panel__live { color: var(--pass); }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); }
.status-grid > div { background: var(--panel); padding: 18px; }
.status-grid__value { font-family: var(--cond); font-size: 42px; font-weight: 700; line-height: 1; color: var(--ink); }
.status-grid > div:first-child .status-grid__value { color: var(--accent); }
.status-grid__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

.trust-band { display: grid; grid-template-columns: 1fr; gap: var(--s8); align-items: start; padding-block: var(--s10); }
@media (min-width: 1024px) { .trust-band { grid-template-columns: minmax(0, 1fr) 520px; gap: var(--s10); } }

.editors-note { border-left: 3px solid var(--accent); padding-left: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.editors-note__kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.editors-note__pull {
  font-family: var(--cond); font-size: clamp(26px, 4.5vw, 34px); font-weight: 600;
  line-height: 1.2; color: var(--ink); max-width: 34ch; margin: 0;
}
.editors-note p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; margin: 0; }
.editors-note__by { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); padding-top: var(--s2); }
.avatar {
  width: 56px; height: 56px; flex: none;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, var(--panel) 6px 12px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}
.editors-note__name { font-family: var(--cond); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.editors-note__role { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }

.rubric { border: 1px solid var(--rule); background: var(--panel); }
.rubric__head {
  padding: 14px var(--s5); border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}
.rubric__title { font-family: var(--cond); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.rubric-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 190px) 52px;
  gap: 14px; align-items: center;
  padding: 14px var(--s5); border-bottom: 1px solid var(--rule);
}
.rubric-row__name { font-size: 15px; color: var(--ink); }
.rubric-row__track { height: 12px; background: var(--track); }
.rubric-row__bar { display: block; height: 12px; background: var(--accent); }
.rubric-row__pct { font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rubric__foot {
  padding: 14px var(--s5); background: var(--tint-accent);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.rubric__foot p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.rubric__foot a { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; border-bottom: 1px solid var(--accent); }

/* Below 640 the three-column row leaves the criterion name about 80px, which
   breaks "Image & video quality" onto four lines. Name takes its own row and
   the bar sits under it, full width. */
@media (max-width: 639px) {
  .rubric-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px var(--s3); padding: var(--s3) var(--s4); }
  .rubric-row__name { grid-column: 1 / -1; }
  .rubric-row__track { grid-column: 1; }
  .rubric-row__pct { grid-column: 2; }
  .rubric__head, .rubric__foot { padding-inline: var(--s4); }
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: var(--s6);
}
.section-head h2 {
  font-family: var(--cond); font-size: clamp(26px, 4vw, 34px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin: 0;
}

/* Choose by activity — a measured index, not 12 identical emoji tiles. */
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px)  { .activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .activity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.activity-tile {
  background: var(--panel);
  padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 112px;
  transition: background 120ms linear;
}
.activity-tile:hover { background: var(--tint-accent); text-decoration: none; }
.activity-tile:hover .activity-tile__name { color: var(--accent); }
.activity-tile__idx { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); }
.activity-tile__name { font-family: var(--cond); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.05; color: var(--ink); }
.activity-tile__note { font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--ink-muted); margin-top: auto; }

.card-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.feature-card {
  border: 1px solid var(--rule); background: var(--panel); padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: border-color 120ms linear;
}
.feature-card:hover { border-color: var(--accent); text-decoration: none; }
.feature-card--lead { border-color: var(--rule-strong); }
@media (min-width: 1024px) { .feature-card--lead { grid-row: span 2; } }
.feature-card__title {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; line-height: 1.05; color: var(--ink);
  font-size: 26px;
}
.feature-card--lead .feature-card__title { font-size: clamp(30px, 3.4vw, 40px); }
.feature-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.feature-card__more { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: auto; }

.intro-essay { padding-block: var(--s10); }
.intro-essay .prose { max-width: 800px; }

/* --- 25 · Footer --------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); background: var(--panel); }
.footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--s8); padding-block: var(--s8) var(--s9); }
@media (min-width: 1024px) { .footer__inner { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s9); } }

.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); font-size: 14px; line-height: 2; margin-top: var(--s5); }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__col { display: flex; flex-direction: column; }
.footer__col-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.footer__col a { color: var(--accent); }

.footer__legal { font-size: 13px; line-height: 1.6; color: var(--ink-muted); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .footer__legal { border-left: 1px solid var(--rule); padding-left: var(--s7); } }
.footer__legal p { margin: 0; }
.footer__legal strong { color: var(--ink-2); font-weight: 600; }
.footer__copy { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* --- 26 · Search --------------------------------------------------------- */

.search-form { display: flex; gap: var(--s3); margin: var(--s6) 0 var(--s5); flex-wrap: wrap; }
.search-input {
  flex: 1 1 260px;
  min-height: 48px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  padding: 12px var(--s4);
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus { border-color: var(--accent); }

.search-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4); }

.result-list { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.result {
  background: var(--panel);
  padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: 6px;
}
.result:hover { background: var(--tint-accent); text-decoration: none; }
.result__title { font-family: var(--cond); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.result:hover .result__title { color: var(--accent); }
.result__desc { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

.state-block {
  border: 1px dashed var(--rule-strong);
  padding: var(--s8) var(--s5);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--s3); align-items: center;
}
.state-block__title { font-family: var(--cond); font-size: 26px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.state-block p { margin: 0; font-size: 15px; color: var(--ink-muted); max-width: 46ch; }

/* --- 27 · Trust pages ---------------------------------------------------- */

.criteria-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: var(--s6) 0; }
@media (min-width: 640px) { .criteria-grid { grid-template-columns: 1fr 1fr; } }
.criteria-grid > div { background: var(--panel); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.criteria-grid__weight { font-family: var(--cond); font-size: 40px; font-weight: 700; line-height: 1; color: var(--accent); }

.contact-panel { border: 1px solid var(--rule); background: var(--panel); padding: var(--s6) var(--s5); margin: var(--s6) 0; }
.contact-panel__email { font-family: var(--cond); font-size: clamp(24px, 4vw, 34px); font-weight: 700; text-transform: none; color: var(--accent); word-break: break-word; }

/* --- 28 · Print ---------------------------------------------------------- */

@media print {
  .nav, .progress, .disclosure-bar, .footer, .toc, .toc-collapse, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .article { display: block; }
  .table-scroll { overflow: visible; }
  .faq-item > summary::after { content: ""; }
}

/* --- 29 · Pending links -------------------------------------------------- */
/* An article the copy references that has not been published yet. It keeps
   its words and loses its link, so no reader ever hits a 404. */
.link-pending {
  color: var(--ink);
  border-bottom: 1px dotted var(--rule-strong);
}