/* =============================================================
   Portable Bidet Guide
   Plain white, flat, no shadows, no rounded cards, no decoration.
   The data is the design. System fonts only — no webfont requests.
   ============================================================= */

:root {
  --bg:        #ffffff;
  --bg-alt:    #f2f7f8;
  --ink:       #16272c;
  --ink-soft:  #4a6067;
  --ink-faint: #7b9199;
  --line:      #dde8ea;
  --line-dark: #b6cad0;
  --link:      #0d6e7a;
  --link-hover:#0a545e;
  --band:      #0d6e7a;
  --band-ink:  #ffffff;
  --hero-col:  #eaf4f5;

  /* Provenance. Kept muted: these mark data, they are not decoration. */
  --measured:  #1a7f37;
  --maker:     #8a6d1f;
  --derived:   #767676;
  --absent:    #bdbdbd;
  --flag:      #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1416; --bg-alt: #142126;
    --ink: #e4eef0; --ink-soft: #a7bcc2; --ink-faint: #7b9199;
    --line: #22383e; --line-dark: #365158;
    --link: #5ec5d2; --link-hover: #8adae4;
    --band: #17555e; --band-ink: #e4eef0; --hero-col: #12262b;
    --measured: #5fc97e; --maker: #d6b45c; --derived: #909090;
    --absent: #5a5a5a; --flag: #f2938c;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1416; --bg-alt: #142126;
  --ink: #e4eef0; --ink-soft: #a7bcc2; --ink-faint: #7b9199;
  --line: #22383e; --line-dark: #365158;
  --link: #5ec5d2; --link-hover: #8adae4;
  --band: #17555e; --band-ink: #e4eef0; --hero-col: #12262b;
  --measured: #5fc97e; --maker: #d6b45c; --derived: #909090;
  --absent: #5a5a5a; --flag: #f2938c;
}

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

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* The UA rule for [hidden] loses to any display: declaration on a class.
   This is what made every quiz step render at once. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; text-wrap: balance; }
h1 { font-size: 1.85rem; margin-bottom: .5rem; }
h2 { font-size: 1.2rem; margin-bottom: .6rem; }
h3 { font-size: 1.02rem; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

main { max-width: 1060px; margin: 0 auto; padding: 28px 20px 80px; }
section { margin-bottom: 40px; }

.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.eyebrow {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .35rem;
}

/* Answer-first block leading every page. */
.answer { font-size: 1.02rem; color: var(--ink-soft); max-width: 72ch; margin: .8rem 0 0; }
.answer strong { color: var(--ink); }

/* ---------- Header / footer ---------- */
.site-head {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: space-between;
  max-width: 1060px; margin: 0 auto; padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  min-width: 0;
}
.wordmark-logo { width: 34px; height: 34px; flex: none; display: block; }
.wordmark-text { display: flex; flex-direction: column; min-width: 0; }
.wordmark-main { font-weight: 700; font-size: 1.05rem; }
.wordmark-sub { font-size: .72rem; color: var(--ink-faint); }
.site-nav { display: flex; gap: 18px; font-size: .9rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--link); text-decoration: underline; }

.site-foot {
  max-width: 1060px; margin: 0 auto; padding: 24px 20px 56px;
  border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft);
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-bottom: 18px; }
.foot-title { font-weight: 600; margin: 0 0 .35rem; color: var(--ink); }
.key-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Provenance marks ---------- */
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-left: 5px; vertical-align: middle; flex: none;
}
.dot-measured     { background: var(--measured); }
.dot-manufacturer { background: var(--maker); }
.dot-derived      { background: var(--derived); }
.dot-default      { background: transparent; border: 1px solid var(--derived); }
.dot-none         { background: transparent; border: 1px solid var(--absent); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); }
.spec-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9rem; }
.spec-table th, .spec-table td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.spec-table thead th {
  font-size: .92rem; font-weight: 600;
  border-bottom: 2px solid var(--line-dark);
  background: var(--bg-alt); white-space: nowrap;
}
.spec-table thead th a { text-decoration: none; }
.spec-table thead th a:hover { text-decoration: underline; }
.th-brand { display: block; font-size: .72rem; color: var(--ink-faint); font-weight: 400; }
.row-label { font-weight: 400; color: var(--ink-soft); width: 26%; }
.group-row th {
  background: var(--band); color: var(--band-ink);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 12px; font-weight: 600; border-bottom: none;
}
/* First product column gets a tint, so the eye keeps its place across 48 rows. */
.spec-table tbody td:first-of-type, .spec-table thead th:nth-child(2) { background: var(--hero-col); }
.spec-table td { font-variant-numeric: tabular-nums; }
td.is-best .cell-value { font-weight: 700; }
td.is-absent .cell-value { color: var(--absent); }
.cell-note { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: 2px; max-width: 36ch; }
.row-note {
  display: inline-block; width: 13px; height: 13px; line-height: 12px; text-align: center;
  border: 1px solid var(--line-dark); border-radius: 50%;
  font-size: .6rem; color: var(--ink-faint); margin-left: 4px; cursor: help;
}
.aspirational-row th, .aspirational-row td { background: var(--bg-alt); }

/* ---------- Blocks ---------- */
.panel { border: 1px solid var(--line); padding: 14px 16px; }
.panel-warn { border-left: 3px solid var(--flag); }
.panel-note { border-left: 3px solid var(--line-dark); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge {
  font-size: .74rem; padding: 2px 7px;
  border: 1px solid var(--line-dark); color: var(--ink-soft); background: var(--bg);
}
.badge-flag { border-color: var(--flag); color: var(--flag); }

/* ---------- Score meters ---------- */
.score-parts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.score-parts li { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr auto; gap: 10px; align-items: center; font-size: .87rem; }
.part-label { color: var(--ink-soft); }
.meter { height: 5px; background: var(--bg-alt); border: 1px solid var(--line); }
.meter-fill { display: block; height: 100%; background: var(--ink-soft); }
.part-value { font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.score-parts li.is-unpublished .part-label,
.score-parts li.is-unpublished .part-value { color: var(--absent); }
.score-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-top: 10px; }
.big-score { font-size: 2rem; font-weight: 600; margin: .15rem 0; font-variant-numeric: tabular-nums; }
.big-score .of { font-size: .85rem; font-weight: 400; color: var(--ink-faint); }

/* ---------- Cards / finder ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 20px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--ink-faint); }
.filters select {
  font: inherit; font-size: .88rem; padding: 6px 8px;
  border: 1px solid var(--line-dark); background: var(--bg); color: var(--ink);
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.card { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 14px 16px; }
.card h2 { font-size: 1rem; margin-bottom: .5rem; }
.card h2 a { text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card-specs { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: .84rem; }
.card-specs > div { display: flex; justify-content: space-between; gap: 8px; }
.card-specs dt { color: var(--ink-faint); }
.card-specs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.card-foot { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 0; }

/* ---------- Ranking ---------- */
.weights { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .87rem; }
.weights li { display: flex; align-items: center; gap: 6px; }

.ranking { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ranking > li { border-bottom: 1px solid var(--line); padding: 16px 0; }
.rank-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.rank-num { font-size: .85rem; color: var(--ink-faint); width: 20px; font-variant-numeric: tabular-nums; }
.ranking > li:first-child .rank-num { font-weight: 700; color: var(--ink); }
.rank-head h3 a { text-decoration: none; color: var(--ink); }
.rank-head h3 a:hover { color: var(--link); text-decoration: underline; }
.rank-head .eyebrow { margin: 1px 0 0; }
.rank-score { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-score .of { font-size: .75rem; font-weight: 400; color: var(--ink-faint); }

/* ---------- Misc ---------- */
.proscons, .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.proscons ul, .two-col ul { padding-left: 17px; margin: 0; }
.proscons li, .two-col li { margin-bottom: 5px; }
.merchants, .compare-links { list-style: none; padding: 0; margin: 0; }
.merchants li, .compare-links li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.compare-links li { justify-content: flex-start; gap: 8px; }
.sources { font-size: .82rem; color: var(--ink-soft); padding-left: 18px; }
.sources a { word-break: break-all; }
.sources li { margin-bottom: 4px; }
.btn {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--line-dark);
  background: var(--bg); color: var(--ink); text-decoration: none;
  font-size: .87rem; cursor: pointer;
}
.btn:hover { background: var(--bg-alt); color: var(--ink); }
.hero { margin-bottom: 32px; }
.product-head { margin-bottom: 28px; }

/* ---------- The four cell states ---------- */
td.cell-absent         .cell-value { color: var(--ink-soft); }
td.cell-not_published  .cell-value { color: var(--absent); }
td.cell-not_applicable .cell-value { color: var(--absent); }
td.cell-not_applicable { background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--bg-alt) 5px, var(--bg-alt) 10px); }
.na-note { font-size: .68rem; color: var(--absent); margin-left: 5px; cursor: help; }
.dot-observed { background: var(--measured); opacity: .55; }
.dot-inferred { background: transparent; border: 1px dashed var(--maker); }

/* ---------- Criterion list on ranking pages ---------- */
.criteria { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 24px; }
.criteria li { border-top: 1px solid var(--line); padding-top: 8px; }
.crit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.crit-label { font-weight: 600; font-size: .92rem; }
.crit-why { margin: 4px 0 0; font-size: .84rem; color: var(--ink-soft); }

.ranking.is-h2h > li:first-child { border-color: var(--line); }
.ranking.is-h2h .rank-num { color: var(--ink-faint); font-weight: 400; }
.raw { color: var(--ink-faint); font-size: .82em; font-variant-numeric: tabular-nums; }

/* ---------- Warmer front door ---------- */
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; margin: .6rem 0 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 10px; }
.btn-primary { background: var(--link); color: #fff; border-color: var(--link); font-weight: 500; }
.btn-primary:hover { background: var(--link-hover); border-color: var(--link-hover); color: #fff; }
.quick-answer { background: var(--bg-alt); border: none; border-left: 3px solid var(--link); }
.quick-answer h2 { font-size: 1rem; }
.quick-answer p { max-width: 70ch; }

.situations { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.situation { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 15px 18px 15px 0; padding-right: 18px; }
.situation h3 { font-size: 1rem; margin-bottom: .3rem; }
.situation h3 a { text-decoration: none; }
.situation h3 a:hover { text-decoration: underline; }
.situation p { margin: 0; font-size: .88rem; color: var(--ink-soft); }

.crit-muted { margin: 5px 0 0; font-size: .8rem; color: var(--flag); }

/* ---------- Quiz ---------- */
.quiz { max-width: 42rem; margin: 22px 0; }
.quiz-progress { font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; min-height: 1em; }
.quiz-step { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.quiz-step legend { font-size: 1.15rem; font-weight: 600; padding: 0 0 12px; }
.quiz-step button {
  font: inherit; text-align: left; padding: 12px 15px; cursor: pointer;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-dark);
}
.quiz-step button:hover { background: var(--bg-alt); border-color: var(--link); }
.quiz-note {
  font-size: .85rem; color: var(--ink-faint); margin: -4px 0 6px; max-width: 46ch;
}
.opt-main { display: block; font-weight: 600; }
.opt-sub {
  display: block; font-size: .84rem; line-height: 1.45; color: var(--ink-soft);
  margin-top: 3px; font-weight: 400;
}
.quiz-result { margin-top: 8px; }
.quiz-pick { border-top: 1px solid var(--line); padding: 14px 0; }
.quiz-pick h3 { font-size: 1.15rem; }
.quiz-pick ul { margin: 8px 0; padding-left: 18px; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Value profile ---------- */
.profile { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.profile li { display: grid; grid-template-columns: minmax(150px,1fr) 2fr auto; gap: 12px; align-items: center; }
.profile .ax-label { font-weight: 500; font-size: .92rem; }
.profile .ax-q { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-faint); }
.profile .ax-ev { font-size: .76rem; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.profile li.is-thin .meter-fill { background: repeating-linear-gradient(45deg, var(--absent), var(--absent) 3px, transparent 3px, transparent 6px); }
.profile li.is-thin .ax-label { color: var(--ink-faint); }

/* ---------- Quiz feedback ---------- */
.quiz-step button { position: relative; padding-right: 40px; }
.quiz-step button.is-picked {
  border-color: var(--link); background: var(--hero-col);
  box-shadow: inset 3px 0 0 var(--link);
}
.quiz-step button.is-picked::after {
  content: "✓"; position: absolute; right: 15px; top: 12px;
  color: var(--link); font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .quiz-step button { transition: background .12s, border-color .12s; }
}

/* ---------- Directory: titles are the content. No card, no blurb. ---------- */
.dir-head { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600; margin: 22px 0 8px; }
.directory { list-style: none; padding: 0; margin: 0;
  columns: 3; column-gap: 28px; }
.directory li { break-inside: avoid; margin: 0 0 7px; font-size: .95rem; }
.method-box { margin: 26px 0; }
.method-list { margin: 12px 0 10px; padding-left: 20px; font-size: .92rem; color: var(--ink-soft); }
.method-list li { margin-bottom: 7px; }
.method-list strong { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .directory { columns: 2; } }
@media (max-width: 520px) { .directory { columns: 1; } }
.ax-note { color: var(--ink-faint); font-size: .7rem; font-style: italic; }

/* ---------- Head-to-head picker ---------- */
.vs-picker { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin: 20px 0 8px; padding: 16px; border: 1px solid var(--line-dark); background: var(--bg-alt); }
.vs-picker label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem;
  color: var(--ink-faint); flex: 1 1 220px; }
.vs-picker select { font: inherit; padding: 8px; border: 1px solid var(--line-dark); background: var(--bg); color: var(--ink); }
.vs-word { padding-bottom: 10px; font-weight: 600; color: var(--ink-faint); }
.vs-picker [data-vs-warn] { flex-basis: 100%; margin: 0; color: var(--flag); }
/* On a pair page the picker is navigation, not the main event: quieter, tighter. */
.vs-compact { margin: 0 0 18px; padding: 10px 12px; gap: 8px; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); }
.vs-compact label { font-size: .72rem; flex-basis: 200px; }
.vs-compact select { padding: 5px 6px; font-size: .88rem; }
.vs-compact .vs-word { padding-bottom: 7px; font-size: .85rem; }
.vs-compact .btn { padding: 5px 12px; font-size: .85rem; }


/* =============================================================
   RESPONSIVE — phones and tablets

   Nothing here changes what the site says or how anything scores.
   It changes only how the same markup lays out below 1060 px.
   Rules are additive and scoped to media queries so the desktop
   layout is untouched.
   ============================================================= */

/* --- Universal safety: nothing may push the page sideways ---------------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Raw URLs are printed as link text in the sources list. On a 360 px screen
   an unbroken URL is wider than the viewport. */
.sources a, .compare-links a, .answer, p, li { overflow-wrap: anywhere; }
.spec-table td, .spec-table th { overflow-wrap: normal; }

/* Anchored sections (/about/#disclosure) must not land under the header. */
:target { scroll-margin-top: 18px; }

/* Wide tables already scroll. Make that discoverable and smooth on touch. */
.table-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Desktop has the whole table in view, so the hint would be a lie. */
.scroll-hint { display: none; }

/* The nav scrolls below 620 px. A hard cut at the edge looks like a bug;
   a fade looks like more content, which is what it is. */
.site-head { position: relative; }

/* --- Tablet: 900 px and below ------------------------------------------- */
@media (max-width: 900px) {
  main { padding: 22px 18px 64px; }
  .site-head { padding: 14px 18px; }
  .site-foot { padding: 20px 18px 44px; }
  h1 { font-size: 1.6rem; }
  .situations { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}

/* --- Phone: 620 px and below -------------------------------------------- */
@media (max-width: 620px) {
  main { padding: 18px 14px 56px; }
  .site-head { padding: 12px 14px; gap: 8px 14px; }
  .site-foot { padding: 18px 14px 40px; }
  section { margin-bottom: 30px; }

  h1 { font-size: 1.42rem; }
  h2 { font-size: 1.1rem; }
  .answer { font-size: .98rem; }

  .wordmark-logo { width: 30px; height: 30px; }
  .wordmark-main { font-size: 1rem; }
  .wordmark-sub { font-size: .68rem; }

  /* The nav has seven items. Wrapping them into three ragged lines reads as
     a mistake; a single row that scrolls reads as a row that scrolls. The
     links themselves are unchanged, so nothing can become unreachable. */
  .site-nav {
    flex: 1 1 100%;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 2px -14px -12px;
    padding: 0 14px;
    border-top: 1px solid var(--line);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    white-space: nowrap;
    padding: 11px 12px;          /* 44 px tall: a real touch target */
    border-bottom: 2px solid transparent;
  }
  .site-nav a:first-child { padding-left: 0; }
  .site-head::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 32px; height: 44px; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--bg) 70%);
  }

  .scroll-hint {
    display: block; margin: 0 0 6px; font-size: .78rem;
    color: var(--ink-faint); font-style: italic;
  }

  /* The evidence column carries three short lines; give it room to breathe
     instead of pressing them against the edge. */
  .profile .ax-ev, .score-parts .part-value { font-size: .72rem; line-height: 1.4; }
  .profile .ax-note { font-size: .68rem; }

  /* Label / meter / value stacks instead of squeezing into three columns. */
  .score-parts li,
  .profile li {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "meter meter";
    gap: 4px 10px;
  }
  .score-parts .part-label, .profile .ax-label { grid-area: label; }
  .score-parts .part-value, .profile .ax-ev     { grid-area: value; text-align: right; }
  .score-parts .meter, .profile .meter          { grid-area: meter; }

  .rank-head { grid-template-columns: auto 1fr; row-gap: 6px; }
  .rank-score { grid-column: 2; justify-self: start; }

  /* Form controls: 16 px minimum, or iOS zooms the whole page on focus. */
  .filters select,
  .vs-picker select,
  .vs-compact select { font-size: 16px; padding: 10px 8px; }
  .filters label, .vs-picker label { flex: 1 1 100%; }
  .filters select, .vs-picker select { width: 100%; }
  .vs-picker { flex-direction: column; align-items: stretch; }
  .vs-word { padding: 0; text-align: center; }
  .vs-picker .btn { width: 100%; }

  /* Quiz answers are the main interaction on a phone. */
  .quiz-step button { padding: 14px 40px 14px 14px; }
  .quiz-step button.is-picked::after { top: 14px; }

  .btn { padding: 11px 16px; }
  .foot-grid { gap: 18px; }
  .card-specs > div { font-size: .86rem; }
}

/* --- Small phones: 380 px and below ------------------------------------- */
@media (max-width: 380px) {
  main { padding: 16px 12px 48px; }
  h1 { font-size: 1.3rem; }
  .wordmark-sub { display: none; }
  .card-specs > div { flex-direction: column; gap: 0; }
  .card-specs dd { text-align: left; }
}

/* --- Coarse pointers: give every control a real target ------------------- */
@media (pointer: coarse) {
  /* NOT .site-nav a — the phone rule above already gives it 44 px, and a
     padding-block here would override it and shrink the target back to 32. */
  .compare-links a, .directory a { padding-block: 4px; }
  .quiz-step button, .btn, select { min-height: 44px; }
}


/* =============================================================
   MOBILE TAB BAR
   Five fixed destinations below 620 px, replacing the scrolling
   header nav. Above 620 px it does not exist at all.
   ============================================================= */
.tabbar { display: none; }

@media (max-width: 620px) {
  /* The header nav and the tab bar are the same links; showing both would
     be clutter, which is the opposite of the point. */
  .site-nav { display: none; }
  .site-head::after { content: none; }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; min-height: 52px;
    color: var(--ink-faint); text-decoration: none;
    font-size: .66rem; line-height: 1.1; text-align: center;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  .tabbar svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
  .tabbar a[aria-current="page"] { color: var(--link); border-top-color: var(--link); }

  /* The bar floats over the page, so the page needs a floor to end on. */
  main { padding-bottom: 84px; }
  .site-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Header keeps only the wordmark now, so it can be tighter. */
  .site-head { padding: 11px 14px; }

  /* Headings carry margin: 0, so a heading landing straight after a paragraph
     touches it. Barely noticeable on a wide column, cramped on a phone.
     Scoped here so desktop spacing is untouched. */
  h2:not(:first-child), h3:not(:first-child) { margin-top: 1.5rem; }
  .answer + h2, .lede + h2 { margin-top: 1.7rem; }
}

@media (max-width: 380px) {
  .tabbar a { font-size: .6rem; }
  .tabbar svg { width: 19px; height: 19px; }
}

/* ---------- "What makes this one hard": the frictions behind the weighting ---------- */
.frictions { margin: 26px 0 34px; }
.frictions ul { list-style: none; padding: 0; margin: 10px 0 0; max-width: 72ch; }
.frictions li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 9px;
  color: var(--ink-soft); font-size: .95rem;
}
.frictions li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--line-dark);
}