/* ============================================================================
   reviews.com.im — the verdict desk.
   One stylesheet. One script, and it does nothing but count heads: Google
   Analytics 4, property G-802M08519F, this desk's own id and never labs.llc's.
   The rule it is the single exception to still stands, and the exception is
   held to it: a page that reports a number ought to be able to show you that
   number with the network switched off after the first byte. So this desk was
   put to its own test on 2026-09-23 and served with the counter refused —
   every scorecard, every criteria row and every verdict drew, 15 links, 4,789
   characters, this sheet applied, no tag on the page. It passes its own row.
   Every class on this site is prefixed vd- so that no
   selector here can collide with anything else on any other host.
   Type is a condensed editorial stack over a compact text sans; both are
   system faces — no font service, and apart from that one counter nothing at
   all is fetched from off this host.
   ========================================================================== */

:root {
  --vd-paper:     #f3f2ee;
  --vd-paper-sunk:#e8e7e0;
  --vd-ink:       #16181c;
  --vd-ink-soft:  #4a4f57;
  --vd-rule:      #cdccc4;
  --vd-rule-firm: #9d9c93;
  --vd-pencil:    #9e2b25;
  --vd-pencil-hi: #7d211c;
  --vd-slate:     #2f3a44;
  --vd-focus:     #1a4fb4;

  --vd-display: "Avenir Next Condensed", "Roboto Condensed", "Liberation Sans Narrow",
                "Noto Sans Display", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --vd-text:    "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
  --vd-figure:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --vd-step--1: 0.8125rem;
  --vd-step-0:  1.0rem;
  --vd-step-1:  1.1875rem;
  --vd-step-2:  clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --vd-step-3:  clamp(1.75rem, 1.3rem + 2.2vw, 2.6rem);
  --vd-step-4:  clamp(2.4rem, 1.5rem + 4.4vw, 4.25rem);

  --vd-measure: 34rem;
  --vd-gutter:  clamp(1rem, 4vw, 2.75rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vd-paper:     #14161a;
    --vd-paper-sunk:#1d2027;
    --vd-ink:       #eceae4;
    --vd-ink-soft:  #a8aeb6;
    --vd-rule:      #343941;
    --vd-rule-firm: #59616c;
    --vd-pencil:    #e8756b;
    --vd-pencil-hi: #f39c93;
    --vd-slate:     #c3cdd6;
    --vd-focus:     #79b0ff;
  }
}

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

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

body {
  margin: 0;
  background: var(--vd-paper);
  color: var(--vd-ink);
  font-family: var(--vd-text);
  font-size: var(--vd-step-0);
  line-height: 1.62;
  letter-spacing: 0.002em;
}

a { color: var(--vd-pencil); text-decoration-thickness: 1px; text-underline-offset: 0.17em; }
a:hover { color: var(--vd-pencil-hi); }

:focus-visible {
  outline: 3px solid var(--vd-focus);
  outline-offset: 2px;
  border-radius: 1px;
}

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

/* --- masthead ------------------------------------------------------------ */

.vd-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--vd-ink); color: var(--vd-paper);
  padding: 0.6rem 1rem; z-index: 50; font-family: var(--vd-display);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.vd-skip:focus { left: 0.5rem; top: 0.5rem; }

.vd-masthead {
  border-bottom: 2px solid var(--vd-ink);
  padding: 1.1rem var(--vd-gutter) 0.85rem;
}
.vd-masthead-bar {
  max-width: 78rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  align-items: baseline; justify-content: space-between;
}
.vd-flag {
  font-family: var(--vd-display);
  font-stretch: condensed;
  font-size: var(--vd-step-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vd-ink);
  text-decoration: none;
  line-height: 1;
}
.vd-flag em { font-style: normal; color: var(--vd-pencil); }
.vd-flag:hover { color: var(--vd-ink); }
.vd-standfirst {
  font-family: var(--vd-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--vd-step--1);
  color: var(--vd-ink-soft);
  margin: 0;
}
.vd-ways { display: flex; gap: 1.1rem; font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.09em; font-size: var(--vd-step--1); }
.vd-ways a { color: var(--vd-ink-soft); text-decoration: none; border-bottom: 1px solid var(--vd-rule); padding-bottom: 2px; }
.vd-ways a:hover, .vd-ways a[aria-current="page"] { color: var(--vd-pencil); border-bottom-color: currentColor; }

/* --- shell --------------------------------------------------------------- */

.vd-shell { max-width: 78rem; margin: 0 auto; padding: 0 var(--vd-gutter) 4rem; }

.vd-split { display: grid; gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start; }
/* The card leads at every width. Visual order matches source order matches focus
   order, so nothing here reorders itself under a keyboard or a screen reader —
   on a verdict desk the scorecard IS the lede, and a phone reader gets it first.
   The skip link at the top of every page jumps straight past it to the prose. */
@media (min-width: 62rem) {
  .vd-split { grid-template-columns: 17.5rem minmax(0, 1fr); }
}

/* --- the sticky criteria rail -------------------------------------------- */

.vd-rail {
  border-top: 2px solid var(--vd-ink);
  padding-top: 0.9rem;
}
@media (min-width: 62rem) {
  .vd-rail { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow: auto; }
}
.vd-rail-head {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.11em;
  font-size: var(--vd-step--1); margin: 0 0 0.15rem; color: var(--vd-ink);
}
.vd-rail-sub { margin: 0 0 1rem; font-size: var(--vd-step--1); color: var(--vd-ink-soft); }

.vd-rail-list { list-style: none; margin: 0; padding: 0; }
.vd-rail-item { border-top: 1px solid var(--vd-rule); padding: 0.62rem 0 0.68rem; }
.vd-rail-item:first-child { border-top: 0; }
.vd-rail-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.vd-rail-name {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.07em; font-size: var(--vd-step-0);
}
.vd-rail-mark {
  font-family: var(--vd-figure); font-variant-numeric: tabular-nums;
  font-size: var(--vd-step--1); color: var(--vd-ink-soft); white-space: nowrap;
}
.vd-rail-mark b { color: var(--vd-pencil); font-size: var(--vd-step-1); }
.vd-rail-why { margin: 0.15rem 0 0; font-size: var(--vd-step--1); color: var(--vd-ink-soft); line-height: 1.45; }

.vd-meter {
  display: block; height: 7px; margin-top: 0.45rem;
  background: var(--vd-paper-sunk);
  border: 1px solid var(--vd-rule);
}
.vd-meter > i {
  display: block; height: 100%;
  width: calc(var(--vd-score, 0) / 5 * 100%);
  background: var(--vd-pencil);
  animation: vd-fill 700ms ease-out both;
}
@keyframes vd-fill { from { width: 0; } }

.vd-tally {
  margin-top: 1rem; border-top: 2px solid var(--vd-ink); padding-top: 0.6rem;
  display: flex; align-items: baseline; justify-content: space-between;
}
.vd-tally-label { font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--vd-step--1); }
.vd-tally-n { font-family: var(--vd-figure); font-variant-numeric: tabular-nums;
  font-size: var(--vd-step-2); color: var(--vd-pencil); }

/* --- the verdict article ------------------------------------------------- */

.vd-verdict { min-width: 0; }

.vd-kicker {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.15em;
  font-size: var(--vd-step--1); color: var(--vd-pencil); margin: 1.6rem 0 0.35rem;
}
.vd-title {
  font-family: var(--vd-display); font-stretch: condensed;
  font-size: var(--vd-step-3); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.005em; margin: 0 0 0.55rem; max-width: 22ch;
}
.vd-title span { color: var(--vd-pencil); }
.vd-deck {
  font-size: var(--vd-step-1); color: var(--vd-ink-soft);
  max-width: var(--vd-measure); margin: 0 0 1.1rem; line-height: 1.5;
}
.vd-byline {
  font-family: var(--vd-figure); font-size: var(--vd-step--1); color: var(--vd-ink-soft);
  border-top: 1px solid var(--vd-rule); border-bottom: 1px solid var(--vd-rule);
  padding: 0.5rem 0; margin: 0 0 1.6rem;
}

.vd-verdict p, .vd-verdict ul, .vd-verdict ol { max-width: var(--vd-measure); }
.vd-verdict h2 {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--vd-step-1); margin: 2.3rem 0 0.5rem;
  padding-bottom: 0.3rem; border-bottom: 2px solid var(--vd-ink);
  max-width: var(--vd-measure);
}
.vd-verdict h3 {
  font-family: var(--vd-display); font-stretch: condensed;
  font-size: var(--vd-step-1); margin: 1.5rem 0 0.3rem;
}
.vd-verdict blockquote {
  margin: 1.3rem 0; padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--vd-pencil);
  max-width: var(--vd-measure);
  font-size: var(--vd-step-1); line-height: 1.5; color: var(--vd-ink);
}
.vd-verdict blockquote cite {
  display: block; margin-top: 0.4rem; font-style: normal;
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.09em;
  font-size: var(--vd-step--1); color: var(--vd-ink-soft);
}

/* --- the comparison / before-after rows ---------------------------------- */

.vd-rows { margin: 1.5rem 0 1.8rem; border-top: 2px solid var(--vd-ink); }
.vd-row {
  display: grid; gap: 0.15rem 1.2rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--vd-rule);
}
@media (min-width: 40rem) {
  .vd-row { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
.vd-row-key {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--vd-step--1); color: var(--vd-ink-soft);
}
.vd-row-a, .vd-row-b { font-family: var(--vd-figure); font-variant-numeric: tabular-nums; font-size: var(--vd-step--1); }
.vd-row-a { color: var(--vd-ink-soft); }
.vd-row-b { color: var(--vd-ink); }
.vd-row-b strong { color: var(--vd-pencil); font-weight: 700; }
.vd-rows-head .vd-row-a, .vd-rows-head .vd-row-b {
  font-family: var(--vd-display); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--vd-ink);
}

/* --- the scoreboard table ------------------------------------------------ */

.vd-board-wrap { overflow-x: auto; margin: 1.6rem 0 0.6rem; }
.vd-board { border-collapse: collapse; width: 100%; min-width: 40rem; }
.vd-board caption {
  text-align: left; font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--vd-step--1);
  color: var(--vd-ink-soft); padding-bottom: 0.5rem;
}
.vd-board th, .vd-board td {
  border-bottom: 1px solid var(--vd-rule); padding: 0.55rem 0.7rem 0.55rem 0;
  text-align: left; vertical-align: baseline;
}
.vd-board thead th {
  border-bottom: 2px solid var(--vd-ink);
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--vd-step--1);
}
.vd-board tbody th {
  font-family: var(--vd-display); font-stretch: condensed;
  font-weight: 700; font-size: var(--vd-step-0); letter-spacing: 0.02em;
}
.vd-board td {
  font-family: var(--vd-figure); font-variant-numeric: tabular-nums; font-size: var(--vd-step--1);
}
.vd-board .vd-n { font-size: var(--vd-step-1); }
.vd-board .vd-lost { color: var(--vd-pencil); font-weight: 700; }
.vd-board tfoot td, .vd-board tfoot th { border-top: 2px solid var(--vd-ink); border-bottom: 0; padding-top: 0.6rem; }
.vd-board tfoot td { font-size: var(--vd-step-1); color: var(--vd-pencil); }

/* --- figures ------------------------------------------------------------- */

.vd-figure { margin: 1.8rem 0; max-width: 46rem; }
.vd-figure img { border: 1px solid var(--vd-rule-firm); background: var(--vd-paper-sunk); }
.vd-figure figcaption {
  font-size: var(--vd-step--1); color: var(--vd-ink-soft); line-height: 1.45;
  padding-top: 0.5rem; border-top: 1px solid var(--vd-rule); margin-top: 0.5rem;
}
.vd-figure figcaption b {
  font-family: var(--vd-display); font-stretch: condensed; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--vd-ink); font-weight: 700;
}
.vd-pair { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .vd-pair { grid-template-columns: 1fr 1fr; } }
.vd-pair figcaption { border-top: 1px solid var(--vd-rule); }

/* --- the standing box (shortcoming / note) ------------------------------- */

.vd-note {
  border: 2px solid var(--vd-ink); padding: 0.9rem 1.05rem; margin: 1.8rem 0;
  max-width: var(--vd-measure); background: var(--vd-paper-sunk);
}
.vd-note-head {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.11em; font-size: var(--vd-step--1);
  color: var(--vd-pencil); margin: 0 0 0.3rem;
}
.vd-note p { margin: 0.4rem 0 0; }
.vd-note p:first-of-type { margin-top: 0; }

/* --- front page ---------------------------------------------------------- */

.vd-lede {
  border-bottom: 2px solid var(--vd-ink);
  padding: clamp(1.6rem, 5vw, 3rem) 0 clamp(1.4rem, 4vw, 2.4rem);
}
.vd-lede h1 {
  font-family: var(--vd-display); font-stretch: condensed;
  font-size: var(--vd-step-4); font-weight: 700; line-height: 0.96;
  letter-spacing: -0.01em; margin: 0 0 0.7rem; max-width: 16ch;
}
.vd-lede h1 span { color: var(--vd-pencil); }
.vd-lede p { max-width: 40rem; font-size: var(--vd-step-1); color: var(--vd-ink-soft); margin: 0 0 0.8rem; }

.vd-slate { margin-top: 2.4rem; }
.vd-slate-head {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.11em; font-size: var(--vd-step-0);
  border-bottom: 2px solid var(--vd-ink); padding-bottom: 0.35rem; margin: 0 0 1.2rem;
}

.vd-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 52rem) { .vd-cards { grid-template-columns: repeat(3, 1fr); } }
.vd-card { border-top: 2px solid var(--vd-ink); padding-top: 0.75rem; }
.vd-card-stamp {
  font-family: var(--vd-figure); font-variant-numeric: tabular-nums;
  font-size: var(--vd-step-3); color: var(--vd-pencil); line-height: 1; display: block;
}
.vd-card-stamp small { font-size: var(--vd-step--1); color: var(--vd-ink-soft); }
.vd-card h3 {
  font-family: var(--vd-display); font-stretch: condensed;
  font-size: var(--vd-step-2); line-height: 1.06; margin: 0.4rem 0 0.35rem;
}
.vd-card h3 a { color: var(--vd-ink); text-decoration: none; }
.vd-card h3 a:hover { color: var(--vd-pencil); text-decoration: underline; }
.vd-card h3 em { font-style: normal; color: var(--vd-pencil); }
.vd-card p { margin: 0 0 0.5rem; font-size: var(--vd-step--1); color: var(--vd-ink-soft); }
.vd-card-meta { font-family: var(--vd-figure); font-size: var(--vd-step--1); color: var(--vd-ink-soft); }

.vd-prose { max-width: var(--vd-measure); }
.vd-prose h2 {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--vd-step-1);
  border-bottom: 2px solid var(--vd-ink); padding-bottom: 0.3rem; margin: 2.3rem 0 0.6rem;
}
.vd-prose dl { margin: 1rem 0; }
.vd-prose dt {
  font-family: var(--vd-display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--vd-step-0);
  margin-top: 0.9rem;
}
.vd-prose dd { margin: 0.1rem 0 0; color: var(--vd-ink-soft); }

/* --- colophon ------------------------------------------------------------ */

.vd-colophon {
  border-top: 2px solid var(--vd-ink);
  padding: 1.3rem var(--vd-gutter) 2.6rem;
  font-size: var(--vd-step--1); color: var(--vd-ink-soft);
}
.vd-colophon-in { max-width: 78rem; margin: 0 auto; display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .vd-colophon-in { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.vd-colophon p { margin: 0 0 0.5rem; max-width: 46rem; }
.vd-colophon-ways { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-family: var(--vd-display); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.09em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .vd-meter > i { animation: none; }
}