/* Comparlys (issue #219): one stylesheet for every page of the site - the
   index, each comparison article, the suggestion form and the 404. The
   comparisons left apposters.com to look like a product of their own, so
   nothing here is borrowed from the apex's Material look (Google colours,
   Roboto, blue footer): the brief was the "mobile innovation" theme of
   designmd.app - a device-launch page. Dark hero panels with a glow, display
   type set tight, pill buttons, big rounded cards on a pale grey canvas, a
   frosted bar on top.

   Every colour, radius, shadow and font is a token in the :root block below
   and nowhere else, so the palette can be retuned in one place without
   touching a component. The type is the device's own (San Francisco on Apple,
   Segoe on Windows, Roboto on Android): no web font to download, which is
   what a page meant to be read on a phone should cost.

   The structure this styles (section ids, the score table, the feedback
   block) is pinned by src/test/comparison-page.test.js and
   comparison-index.test.js; the classes kept their names from the apex pages
   so those tests read both the same way. */

:root {
  --ink: #0B0B12;
  --ink-soft: #2C2C38;
  --muted: #5E5E6E;
  --canvas: #F5F5F7;
  --surface: #FFFFFF;
  --night: #0B0B12;
  --night-2: #17172A;
  --on-night: #F5F5F7;
  --on-night-muted: rgba(245, 245, 247, .74);
  --line: rgba(11, 11, 18, .10);
  --line-night: rgba(255, 255, 255, .16);
  --field: rgba(11, 11, 18, .28);
  --accent: #5B4BFF;
  --accent-deep: #4335E6;
  --accent-soft: rgba(91, 75, 255, .10);
  --cyan: #00B2FF;
  --good: #0E9F6E;
  --bad: #D93036;
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 32px;
  --shadow-card: 0 1px 2px rgba(11, 11, 18, .04), 0 8px 24px rgba(11, 11, 18, .06);
  --shadow-lift: 0 16px 40px rgba(91, 75, 255, .24);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1200px;
  --prose: 780px;
  --gutter: 24px;
  --inset: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; }
/* --container is the content width; the gutters come on top of it, so the
   fourteen-column score table gets its full 1200px on a desktop. */
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Bar ──────────────────────────────────────────────── */
/* Frosted and pinned, the way a phone's own status bar sits over content.
   Two links only - the index and the form - so it never has to collapse into
   a menu: on the narrowest phone the brand alone stands for the index. */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 247, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); }
.brand img { width: 28px; height: 28px; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav .link { padding: 8px 14px; border-radius: 999px; font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-soft); transition: background .2s ease-out, color .2s ease-out; }
.nav .link:hover { background: rgba(11, 11, 18, .06); color: var(--ink); }
.nav .link[aria-current="page"] { color: var(--accent); }

/* Pills: the one button shape on the site. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line);
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--surface); color: var(--ink);
  transition: background .2s ease-out, color .2s ease-out, box-shadow .2s ease-out, transform .15s ease-out, border-color .2s ease-out;
}
.btn:hover { border-color: rgba(11, 11, 18, .24); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
/* No gap: the label's tail (" a comparison", gone on a phone) carries its
   own no-break space, and the flex gap on top of it read as two spaces. */
.bar .btn { padding: 8px 16px; font-size: .9rem; gap: 0; }
.btn:focus-visible, .nav .link:focus-visible, .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Hero ─────────────────────────────────────────────── */
/* A dark panel inset from the edges with large corners: a device screen
   lit from behind. The glow is two blurred gradients, not an image. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: var(--inset) var(--inset) 0; border-radius: var(--radius-l);
  background: var(--night); color: var(--on-night);
  padding: 72px var(--gutter) 64px; text-align: center;
}
.hero::before {
  content: ''; position: absolute; z-index: -1; inset: -40% -20% auto; height: 140%;
  background:
    radial-gradient(closest-side, rgba(91, 75, 255, .55), transparent 72%) 22% 40% / 52% 70% no-repeat,
    radial-gradient(closest-side, rgba(0, 178, 255, .38), transparent 72%) 80% 20% / 46% 60% no-repeat;
  filter: blur(30px);
}
.hero::after {
  /* A fine grid fading out at the bottom: the "spec sheet" under the glow. */
  content: ''; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero-in { max-width: 980px; margin: 0 auto; }
.hero h1 { font-family: var(--font-display); font-size: 3.4rem; line-height: 1.06; font-weight: 700; letter-spacing: -.035em; margin: 0 auto 20px; color: #fff; }
.hero h1 .accent { color: #A99FFF; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 .accent {
    background: linear-gradient(90deg, #A99FFF, var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.hero .sub { font-size: 1.2rem; line-height: 1.55; color: var(--on-night-muted); max-width: 720px; margin: 0 auto; }
.hero .sub a { color: #fff; }
.hero .updated { margin: 18px 0 0; font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-night-muted); }
/* The way back to the index: the bar's brand does the same, but a reader
   deep in an article looks here, above the title. */
.crumbs { margin: 0 0 18px; font-size: .95rem; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--on-night-muted); text-decoration: none; font-weight: 500; }
.crumbs a::before { content: ''; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.crumbs a:hover { color: #fff; }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 32px auto 0; padding: 0; max-width: 900px; }
.topics a {
  display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: .9rem; font-weight: 500; text-decoration: none;
  color: var(--on-night); background: rgba(255, 255, 255, .08); border: 1px solid var(--line-night);
  transition: background .2s ease-out, border-color .2s ease-out;
}
.topics a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); }

/* ── Sections ─────────────────────────────────────────── */
/* Prose in one readable column; the verdict cards and the score table in a
   wider band whose heading stays in the prose column, so the left edge of
   the text does not jump between sections. */
.doc, .wide .col { max-width: var(--prose); margin: 0 auto; }
.wide { max-width: var(--container); margin: 0 auto; }
.doc h2, .wide h2 { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; margin: 88px 0 14px; scroll-margin-top: 80px; }
.doc h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; margin: 32px 0 8px; scroll-margin-top: 80px; }
.doc p, .doc li, .wide .col p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }
.doc p, .wide .col p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 0 0 8px; }
.doc li::marker { color: var(--accent); }
.doc strong, .wide strong { color: var(--ink); font-weight: 650; }
.doc a, .wide .col a { color: var(--accent); text-decoration: none; }
.doc a:hover, .wide .col a:hover { text-decoration: underline; }
.lead-in { padding-top: 56px; }
.lead-in p { font-size: 1.22rem; line-height: 1.6; color: var(--ink); letter-spacing: -.005em; }

/* Quick verdict: one card per job. Column counts that divide ten, so no
   card is left alone on the last row; an article with another number of
   picks sets its own count in a <style> of its own. */
.picks { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .picks { grid-template-columns: repeat(5, 1fr); } }
.pick {
  display: flex; flex-direction: column; padding: 20px; border-radius: var(--radius-m);
  background: var(--surface); box-shadow: var(--shadow-card); border: 1px solid transparent;
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
.pick:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(91, 75, 255, .28); }
.pick .for { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pick h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.pick h3 a { color: var(--ink); text-decoration: none; }
.pick h3 a:hover { color: var(--accent); }
.pick p { margin: 0 0 12px; color: var(--muted); font-size: .96rem; line-height: 1.5; }
.pick .budget { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink); }

/* The score table. Rows are products, ranked by average; columns are the
   criteria, then the two totals. The tint is one hue getting stronger with
   the score and only repeats the number in the cell, so nothing depends on
   telling colours apart. The first column sticks on a phone: scrolled to the
   last criterion, a row of bare numbers would no longer say whose it is. */
.table-wrap { overflow-x: auto; margin: 28px 0 14px; background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.compare { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .95rem; }
.compare th, .compare td { padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
/* Sentence case, not the eyebrow capitals used elsewhere: "CROWDSOURCING" in
   capitals is a column too wide for fourteen to fit 1200px. */
.compare thead th { font-size: .78rem; font-weight: 650; line-height: 1.25; color: var(--muted); background: var(--surface); vertical-align: bottom; min-width: 70px; }
.compare th[scope="row"], .compare thead th:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; min-width: 136px;
  background: var(--surface); border-right: 1px solid var(--line); font-weight: 650; white-space: nowrap; padding-left: 16px;
}
.compare th[scope="row"] a { color: var(--ink); text-decoration: none; }
.compare th[scope="row"] a:hover { color: var(--accent); }
.compare .rank {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; margin-right: 4px;
  border-radius: 999px; background: var(--canvas); color: var(--muted); font-size: .78rem; font-weight: 700;
}
.compare tbody tr:first-child .rank { background: var(--accent); color: #fff; }
.compare td { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.b1 { background: rgba(91, 75, 255, .04); }
.b2 { background: rgba(91, 75, 255, .13); }
.b3 { background: rgba(91, 75, 255, .25); }
.b4 { background: rgba(91, 75, 255, .40); }
.compare .avg, .compare .med, .compare thead .total { font-weight: 800; background: var(--surface); color: var(--ink); }
.compare .avg, .compare thead .total.first { border-left: 2px solid var(--line); }
.compare tbody tr:hover th[scope="row"] { background: var(--canvas); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: .86rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 14px; border-radius: 5px; border: 1px solid var(--line); display: inline-block; }

/* Reviews: each one a card of its own, numbered like the table. */
.review { margin: 18px 0 0; padding: 26px 28px 24px; background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.review h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.02em; }
.review h3 .num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.1em; height: 2.1em; padding: 0 6px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 800;
}
.review .best { margin: 0 0 14px; font-size: .98rem; color: var(--ink); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.pros-cons h4 { margin: 6px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.pros-cons .pros h4 { color: var(--good); }
.pros-cons .cons h4 { color: var(--bad); }
.review .fit { background: var(--canvas); border-radius: var(--radius-s); padding: 14px 18px; margin-top: 6px; }
.review .fit p { margin: 0 0 4px; font-size: .98rem; }
.review .fit p:last-child { margin: 0; }

/* FAQ: native <details>, so answers work without a script and Ctrl+F still
   finds them; one card holding the list. */
.faqs { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 4px 24px; }
.faq + .faq { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 0; font-size: 1.06rem; font-weight: 650; line-height: 1.4; transition: color .2s ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font: inherit; letter-spacing: -.005em; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.faq summary::after {
  content: '+'; flex: none; margin-left: auto; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--canvas); color: var(--ink); font-size: 1.2rem; font-weight: 500; line-height: 1;
  transition: transform .2s ease-out, background .2s ease-out, color .2s ease-out;
}
.faq[open] summary::after { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq[open] summary { color: var(--accent); }
.faq .answer { padding: 0 46px 20px 0; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ── Index ────────────────────────────────────────────── */
.entries { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.entry {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px;
  padding: 28px 32px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card);
}
.entry h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.entry h3 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover { color: var(--accent); }
.entry .summary { margin: 0 0 16px; color: var(--muted); font-size: 1.05rem; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.facts li { padding: 5px 12px; border-radius: 999px; background: var(--canvas); font-size: .88rem; color: var(--ink); }
.facts strong { font-weight: 800; color: var(--accent); }
.entry .label { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* The names and criteria as one running line each: a list for the parser
   and a screen reader, a sentence for the eye. */
.inline { list-style: none; margin: 0 0 14px; padding: 0; color: var(--ink-soft); font-size: .95rem; }
.inline li { display: inline; }
.inline li + li::before { content: ' · '; color: var(--muted); }
.entry-side { display: flex; flex-direction: column; padding: 20px 22px; border-radius: var(--radius-m); background: var(--night); color: var(--on-night); }
.entry-side .label { color: var(--on-night-muted); }
.leaders { list-style: none; margin: 4px 0 20px; padding: 0; counter-reset: rank; }
.leaders li { counter-increment: rank; display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-night); }
.leaders li::before { content: counter(rank); color: #A99FFF; font-weight: 800; min-width: 1.2em; }
.leaders .name { font-weight: 600; flex: 1; }
.leaders .score { font-variant-numeric: tabular-nums; font-weight: 800; font-family: var(--font-display); font-size: 1.15rem; }
.entry-side .btn { margin-top: auto; align-self: stretch; }

/* The front page has no prose column to line up with, so its section
   headings start where its cards do. */
.front .wide .col { max-width: none; }

/* How a comparison works: three tiles, not a bullet list. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 24px 0 0; padding: 0; }
.tiles li { margin: 0; padding: 24px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-card); color: var(--muted); font-size: 1rem; }
.tiles strong { display: block; margin: 0 0 6px; color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.015em; }

/* The way to suggest the next comparison: the brand gradient, once per page. */
.suggest-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  margin: 88px 0 0; padding: 40px 44px; border-radius: var(--radius-l); color: #fff;
  background: linear-gradient(120deg, var(--accent) 0%, #7A4BFF 45%, var(--cyan) 100%);
  box-shadow: var(--shadow-lift);
}
.suggest-panel h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 2rem; letter-spacing: -.03em; color: #fff; }
.suggest-panel p { margin: 0 0 12px; color: rgba(255, 255, 255, .92); max-width: 64ch; }
.suggest-panel ul { margin: 0; padding-left: 20px; color: rgba(255, 255, 255, .92); }
.suggest-panel li { margin: 0 0 6px; }
.suggest-panel strong { color: #fff; }
.suggest-panel .btn { background: #fff; color: var(--ink); border-color: #fff; white-space: nowrap; }
.suggest-panel .btn:hover { box-shadow: 0 16px 40px rgba(11, 11, 18, .25); transform: translateY(-1px); }

/* ── Forms ────────────────────────────────────────────── */
/* Shared by the suggestion form and the feedback block, so the two ways to
   tell us something look like one product. */
label.top { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 6px; }
.opt { color: var(--muted); font-weight: 400; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; min-width: 0; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius-s);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
textarea { min-height: 104px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91, 75, 255, .18); }
select:invalid { color: var(--muted); }
input::placeholder, textarea::placeholder { color: #9A9AA8; }
/* Out of sight and out of the tab order, not display:none: some bots skip
   fields they can tell are hidden. A person never reaches it. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 0; }
.send .note { color: var(--muted); font-size: .92rem; margin: 0; }
.form-error { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-s); background: #FFECEC; color: #A3171C; border: 1px solid rgba(217, 48, 54, .32); }
.form-error[hidden] { display: none; }

/* The suggestion form: one card per step, the rows inside lined up under
   their column names; on a phone every field takes the full width under its
   number instead (the page must never scroll sideways at 320px). */
.form { max-width: 880px; margin: 32px auto 0; }
.step { padding: 26px 28px; margin: 0 0 16px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-card); }
.step h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.step h2 .need { margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font); font-size: .78rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.step .hint { margin: 0 0 16px; color: var(--muted); font-size: .98rem; }
.field { margin: 0 0 14px; }
.field:last-child { margin-bottom: 0; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row { display: grid; gap: 10px; align-items: center; }
.row > * { min-width: 0; }
.products .row, .products .cols { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 84px; }
.criteria .row, .criteria .cols { grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.6fr) 84px; }
.cols { display: grid; gap: 10px; margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.num { color: var(--accent); font-weight: 800; text-align: right; }
.remove { background: none; border: 0; padding: 6px 4px; font: inherit; font-size: .88rem; color: var(--muted); cursor: pointer; border-radius: 8px; }
.remove:hover { color: var(--bad); background: rgba(217, 48, 54, .08); }
.add { margin-top: 14px; }
/* What a usable criterion looks like, next to the rows that ask for one. */
.examples { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 20px 0 0; padding: 18px 20px; background: var(--canvas); border-radius: var(--radius-s); }
.examples h3 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.examples .good h3 { color: var(--good); }
.examples .bad h3 { color: var(--bad); }
.examples ul { margin: 0 0 4px; padding-left: 18px; }
.examples li { margin: 0 0 6px; color: var(--muted); font-size: .95rem; }
.examples strong { color: var(--ink); font-weight: 650; }
.done-card { max-width: 880px; margin: 32px auto 0; text-align: center; padding: 44px 28px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); }
.done-card[hidden] { display: none; }
.done-card h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -.025em; }
.done-card p { color: var(--muted); margin: 0 0 22px; }
.done-card .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Feedback ─────────────────────────────────────────── */
/* The end of every article (issue #204): a reader who just went through the
   table is the person most likely to know what it misses or got wrong. A
   dark panel like the hero, so the article closes the way it opened; the
   three kinds are pills over one form, and only the chosen kind's fields
   are shown (assets/feedback.js). */
.feedback { padding: 96px 0 0; }
.feedback .panel {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 920px; margin: 0 auto; padding: 40px 44px; border-radius: var(--radius-l);
  background: var(--night); color: var(--on-night);
}
.feedback .panel::before {
  content: ''; position: absolute; z-index: -1; inset: -30% -30% auto auto; width: 70%; height: 90%;
  background: radial-gradient(closest-side, rgba(91, 75, 255, .45), transparent 72%);
  filter: blur(20px);
}
.feedback h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 2rem; line-height: 1.15; letter-spacing: -.03em; color: #fff; }
.feedback .lead { color: var(--on-night-muted); margin: 0 0 26px; max-width: 64ch; }
.feedback fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.feedback legend { padding: 0; font-weight: 600; margin: 0 0 10px; color: var(--on-night); }
.feedback label.top { color: var(--on-night); }
.feedback .opt { color: var(--on-night-muted); }
.feedback input[type="text"], .feedback input[type="email"], .feedback select, .feedback textarea { border-color: transparent; }
/* The radio buttons stay in the page, transparent over their pill, so the
   keyboard, a screen reader and a click all work the native way. */
.feedback .kinds { margin: 0 0 24px; }
.kinds .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kinds label { position: relative; display: inline-flex; }
.kinds input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kinds span {
  display: inline-block; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  color: var(--on-night); background: rgba(255, 255, 255, .08); border: 1px solid var(--line-night);
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.kinds input:hover + span { background: rgba(255, 255, 255, .16); }
.kinds input:checked + span { background: #fff; border-color: #fff; color: var(--ink); }
.kinds input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Two columns of short fields; a note, a "what is wrong" and a "how to check
   it" take the whole row. `[hidden]` has to be restated: the grid's display
   wins over the attribute's. */
.feedback .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.feedback .fields[hidden] { display: none; }
.feedback .fields .field { margin: 0; }
.feedback .field.full { grid-column: 1 / -1; }
.feedback .send .note { color: var(--on-night-muted); }
.feedback .btn.primary:hover { box-shadow: 0 16px 40px rgba(91, 75, 255, .45); }
.feedback .done { text-align: center; padding: 8px 0; }
.feedback .done[hidden] { display: none; }
.feedback .done h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; color: #fff; }
.feedback .done p { color: var(--on-night-muted); margin: 0 0 22px; }

/* ── Footer ───────────────────────────────────────────── */
footer { margin: 112px var(--inset) var(--inset); border-radius: var(--radius-l); background: var(--night); color: var(--on-night); }
footer .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding-top: 30px; padding-bottom: 30px; }
footer .brand { color: #fff; }
footer .copy { font-size: .85rem; color: var(--on-night-muted); }
footer .spacer { margin-left: auto; }
footer a.flink, footer .cookie-link { color: var(--on-night-muted); text-decoration: none; font-size: .92rem; transition: color .2s ease-out; }
footer a.flink:hover, footer .cookie-link:hover { color: #fff; }
.cookie-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── Cookie strip ─────────────────────────────────────── */
/* Non-blocking (assets/cookies.js says why): a card floating at the bottom,
   nothing waits for it. */
.cookie-notice {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--radius-m); font-size: .92rem; line-height: 1.5;
  background: rgba(11, 11, 18, .92); color: var(--on-night);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(11, 11, 18, .3);
}
.cookie-notice p { margin: 0; flex: 1 1 280px; }
.cookie-actions { display: flex; gap: 8px; margin-left: auto; }
.cookie-notice .btn { padding: 8px 16px; font-size: .9rem; }
.cookie-notice .btn:not(.primary) { background: transparent; color: var(--on-night); border-color: var(--line-night); }

/* ── 404 ──────────────────────────────────────────────── */
.missing .hero { padding: 96px var(--gutter); }
.missing .hero .btn { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pick, .btn, .faq summary::after { transition: none; }
}
@media (max-width: 900px) {
  .entry { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .suggest-panel { grid-template-columns: 1fr; padding: 32px 26px; }
  .tiles { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --gutter: 18px; --inset: 8px; --radius-l: 24px; }
  .hero { padding: 52px var(--gutter) 44px; }
  .hero h1 { font-size: 2.3rem; }
  .hero .sub { font-size: 1.05rem; }
  .doc h2, .wide h2 { font-size: 1.6rem; margin-top: 64px; }
  .lead-in { padding-top: 40px; }
  .lead-in p { font-size: 1.1rem; }
  .review { padding: 22px 18px; }
  .pros-cons { grid-template-columns: 1fr; }
  .faqs { padding: 2px 16px; }
  .faq .answer { padding: 0 0 18px; }
  .feedback { padding-top: 64px; }
  .feedback .panel { padding: 28px 18px; }
  .feedback h2, .suggest-panel h2 { font-size: 1.6rem; }
  .feedback .fields { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 22px 16px; }
  .cols { display: none; }
  /* Number on the left, the row's fields stacked beside it; Remove under
     them. The column names go, so every field carries its placeholder and
     its aria-label instead. */
  .products .row, .criteria .row { grid-template-columns: 24px minmax(0, 1fr); }
  .row > :not(.num) { grid-column: 2; }
  .row .num { grid-row: 1 / span 4; align-self: start; padding-top: 12px; }
  .row > span:not(.num):empty { display: none; }
  .remove { justify-self: start; }
  .examples { grid-template-columns: 1fr; }
  footer { margin-top: 80px; }
  footer .spacer { display: none; }
}
@media (max-width: 479px) {
  .bar-in { gap: 8px; }
  /* The brand is the way to the index on a phone; the bar keeps the one
     action, in one word, so brand and button fit side by side at 320px. */
  .nav .link { display: none; }
  .bar .long { display: none; }
  .hero h1 { font-size: 1.9rem; }
  .compare th[scope="row"], .compare thead th:first-child { min-width: 0; font-size: .88rem; padding-left: 10px; }
  .suggest-panel .btn { white-space: normal; }
}