/* ==========================================================================
   compare-category.css — /review-led-vs-survey-led only.
   Load order: feature-v2, feature-v3, show, home, compare, this.

   Everything shared already exists and is not repeated here: tokens, .col, .h,
   .sub, .card, .shot and .faq-* in feature-v2; .matrix in feature-v3; .moment /
   .m-card / .m-chip in show; .closing in home; the date stamp in compare.css.

   What is here is only this page's own shapes:
     1. the hero contrast card (a response rate beside a month of reviews);
     2. the six row ledger, Asked against Unasked, a real table that becomes
        three stacked blocks per row on a phone;
     3. the three mocks restated from the Intelligence Layer in the light
        register (that page is dark; every colour here is the white ground's);
     4. the three survey cases;
     5. the panel before the close, which is where colour arrives.

   Contrast floor is #6b7088 on white (var(--v2-body) is #4a5065 and passes).
   Nothing here is smaller than 13px, which is why the mocks do not reuse .shot:
   the site's own .shot is 12px and every mock on this page reads at 13px.
   ========================================================================== */

/* ---------- 0. section rhythm ---------- */
.cat-page .cat-head { max-width: 780px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.cat-page .cat-head .sub { margin-inline: 0; }
.cat-page .cat-sec--tight { padding-top: 0; }

.cat-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none; }
.cat-link:hover { text-decoration: underline; }
.cat-link .icon { width: 16px; height: 16px; }

/* ---------- 1. hero: the contrast card ---------- */
/* Two halves of one card rather than two cards: the point is that these are the
   same locations in the same month, and a divider says that better than a gap. */
.cat-hm { padding: 18px 20px 16px; }
.cat-hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cat-hm-grid > div + div { padding-left: 18px; border-left: 1px solid var(--v2-line); }
.cat-hm-tag { display: block; font: 600 13px/1.3 var(--font-display); color: #6b7088; }
.cat-hm-v { display: block; margin-top: 8px; font: 500 clamp(28px, 3.4vw, 34px)/1 var(--font-serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cat-hm-d { display: block; margin-top: 8px; font: 400 13px/1.45 var(--font-body); color: var(--v2-body); }
.cat-hm-w { display: block; margin-top: 6px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.cat-hm-grid > div + div .cat-hm-v { color: var(--blue); }
/* The left half of the contrast card carries words, not a figure: a survey programme's response rate is not ours to
   state as fact (truth audit, Must fix 4), so the number lives on the right and the left says what a sample is. The
   words sit at the display face rather than the serif figure size so the two halves still balance. */
.cat-hm-v--w { font: 600 clamp(19px, 2vw, 23px)/1.2 var(--font-display); letter-spacing: 0; }

/* ---------- 2. the ledger ---------- */
.cat-led-wrap { border-top: 1px solid var(--v2-line); }
.cat-led { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.cat-led thead th { padding: 18px 20px 14px; border-bottom: 1px solid var(--v2-line); vertical-align: bottom; font: 600 clamp(17px, 1.7vw, 20px)/1.25 var(--font-display); color: var(--ink); }
.cat-led thead th span { display: block; margin-top: 4px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.cat-led thead th:first-child { width: 20%; padding-left: 0; }
.cat-led thead th:not(:first-child) { width: 40%; }
.cat-led thead th:last-child { color: var(--blue); }
.cat-led tbody th { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--v2-line); vertical-align: middle; font: 600 14.5px/1.4 var(--font-display); color: var(--ink); }
.cat-led tbody td { padding: 16px 20px; border-bottom: 1px solid var(--v2-line); vertical-align: middle; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.cat-led tbody td:last-child { background: rgba(0, 61, 255, .035); }
.cat-led tbody td b { color: var(--ink); font-weight: 600; }
.cat-led tbody tr:last-child th, .cat-led tbody tr:last-child td { border-bottom: 0; }
/* Simplify pass 2026-09-05: the verdict IS the cell now, so the prose line under it and its rule are gone. */
.cat-led tbody td .cat-v { display: block; font: 600 clamp(16px, 1.5vw, 18px)/1.3 var(--font-display); color: var(--ink); letter-spacing: -.005em; }
.cat-led-note { margin-top: 16px; max-width: 74ch; font: 400 13.5px/1.6 var(--font-body); color: #6b7088; }
/* The ledger's verdict line and the counsel block's closer both carry a bold label, matching the compare kit's
   "Bottom line." device; the label takes ink so it reads as a label rather than as more muted prose. */
.cat-led-note b { color: var(--ink); font-weight: 600; }

/* the Asked / Unasked toggle: the page's one interactive moment. At rest (data-emph="both") the table reads balanced,
   which is the state the still captures take under ?ix=off. Pressing a button lifts that column and mutes the other;
   pressing it again returns to balanced. Nothing here is decorative: both buttons act, at every width. */
.cat-led-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.cat-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--v2-card); }
.cat-tab { padding: 7px 16px; border-radius: 999px; font: 600 14px/1.3 var(--font-display); color: var(--v2-body); background: transparent; transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.cat-tab:hover { color: var(--ink); }
.cat-tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cat-tabs-hint { font: 400 13.5px/1.5 var(--font-body); color: #6b7088; }

/* The muted column is muted by colour, never by opacity: #6b7088 is the site's contrast floor and a de-emphasised
   cell still has to be readable. The emphasised column keeps the ink verdict and takes the tint. */
.cat-led-dev .cat-led tbody td, .cat-led-dev .cat-led tbody td .cat-v { transition: background .25s var(--ease-out), color .25s var(--ease-out); }
.cat-led-dev[data-emph="asked"] .cat-led tbody td:last-child .cat-v,
.cat-led-dev[data-emph="unasked"] .cat-led tbody td:first-of-type .cat-v { color: #6b7088; font-weight: 500; }
.cat-led-dev[data-emph="asked"] .cat-led tbody td:last-child { background: transparent; }
.cat-led-dev[data-emph="asked"] .cat-led tbody td:first-of-type { background: rgba(15, 13, 25, .04); }
.cat-led-dev[data-emph="unasked"] .cat-led tbody td:last-child { background: rgba(0, 61, 255, .07); }

/* ---------- 3. the three mocks, light register ---------- */
.cat-wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 30px); }
.cat-wide > * { min-width: 0; }
.cat-wide-copy { max-width: 62ch; }
.cat-wide h3 { font: 500 clamp(25px, 2.6vw, 33px)/1.16 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.cat-wide p { margin-top: 14px; max-width: 58ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.cat-wide p b { color: var(--ink); font-weight: 600; }

.cat-shot { padding: 16px 18px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); font-family: var(--font-body); font-size: 13px; }
.cat-shot-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.cat-shot-h span { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ghost); font: 600 13px/1.3 var(--font-display); color: var(--blue); }
/* A blue pill means a filter or a count. A timestamp is neither, so it reads as plain muted text (critique P2-3). */
.cat-shot-h span.is-stamp { padding: 0; background: none; font-weight: 400; font-family: var(--font-body); color: #6b7088; }
.cat-foot { margin-top: 12px; display: grid; gap: 5px; }
.cat-foot p { font: 400 13px/1.5 var(--font-body); color: #6b7088; }

/* the locations grid: locations down the side, themes across, a count in every
   cell and the number of reviews behind the row at the end. It scrolls inside
   its own box; the min-width: 0 above keeps its min-content off the page width. */
.cat-scroll { overflow-x: auto; }
/* The grid fits the 1032px column on a laptop, so the hint only appears at the widths where it does not. */
.cat-scroll-hint { display: none; margin-top: 12px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.cat-vg { display: grid; grid-template-columns: 132px repeat(5, minmax(58px, 1fr)) 76px; min-width: 630px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.cat-vg > * { padding: 8px 5px; }
.cat-vg .vg-h { font: 600 13px/1.3 var(--font-display); color: #6b7088; text-align: center; border-bottom: 1px solid var(--v2-line); align-self: end; }
.cat-vg .vg-h.vg-first { text-align: left; padding-left: 0; }
.cat-vg .vg-h.vg-last { text-align: right; padding-right: 0; }
.cat-vg .vg-n { font: 600 13px/1.35 var(--font-display); color: var(--ink); padding-left: 0; padding-right: 10px; }
.cat-vg .vg-c { display: grid; place-items: center; font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.cat-vg .vg-c i { display: grid; place-items: center; width: 100%; padding: 5px 0; border-radius: 6px; font-style: normal; background: rgba(255, 65, 106, calc(var(--t) * .55)); }
.cat-vg .vg-r { text-align: right; padding-right: 0; font: 400 13px/1.3 var(--font-body); color: #6b7088; }
.cat-vg .vg-line { grid-column: 1 / -1; height: 1px; padding: 0; background: var(--v2-line); }

/* the Decide card, cropped to the headline, the denominator, the twelve month
   line and the one button */
.cat-dcard { padding: 14px 0 4px; }
.cat-dcard h4 { max-width: 30ch; font: 500 clamp(18px, 1.6vw, 21px)/1.3 var(--font-serif); color: var(--ink); text-wrap: pretty; }
.cat-dmeta { margin-top: 10px; font: 400 13px/1.5 var(--font-body); color: #6b7088; font-variant-numeric: tabular-nums; }
.cat-spark { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cat-spark svg { flex: none; }
.cat-spark span { font: 400 13px/1.3 var(--font-body); color: #6b7088; }
.cat-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
/* A control inside a mock is not the page's CTA, so it does not wear the CTA's ink pill (critique P2-3). */
.cat-btns i { padding: 6px 12px; border-radius: 999px; font: 600 13px/1.4 var(--font-display); font-style: normal; color: var(--ink); background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }

/* the AI search line */
.cat-q { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--v2-card); font: 400 13.5px/1.4 var(--font-body); color: var(--ink); }
.cat-ai { margin-top: 10px; display: grid; gap: 6px; }
.cat-arow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--v2-line); font-family: var(--font-body); }
.cat-arow b { font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }
.cat-arow em { flex: none; font-style: normal; font: 600 13px/1.3 var(--font-display); padding: 3px 9px; border-radius: 999px; }
.cat-arow.is-hit em { background: #ddf7ea; color: #0c7a52; }
.cat-arow.is-miss em { background: #f1f2f7; color: #6b7088; }
.cat-afoot { margin-top: 11px; font: 400 13px/1.5 var(--font-body); color: #6b7088; }

/* ---------- 4. the three survey cases ---------- */
.cat-cases { border-top: 1px solid var(--v2-line); }
.cat-cases > div { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--v2-line); }
.cat-cases h3 { font: 500 clamp(20px, 1.9vw, 24px)/1.22 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.cat-cases p { max-width: 56ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.cat-cases p + p { margin-top: 12px; }
.cat-cases p b { color: var(--ink); font-weight: 600; }
.cat-cases-foot { margin-top: 22px; max-width: 62ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); }
.cat-cases-foot b { color: var(--ink); font-weight: 600; }
.cat-cases-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }
.cat-cases-foot a:hover { text-decoration: underline; }

/* ---------- 4b. the cost of waiting, and the proof beat ---------- */
/* One card, the hero card's treatment, carrying the shortest paragraph on the page. */
.cat-page .cat-sec--cost { padding-top: 0; padding-bottom: clamp(36px, 4vw, 62px); }
.cat-cost { max-width: 700px; padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px); border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); border-left: 3px solid var(--pink); }
.cat-cost h2 { max-width: 30ch; font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.cat-cost p { margin-top: 12px; max-width: 54ch; font: 400 16.5px/1.6 var(--font-body); color: var(--v2-body); }

.cat-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; max-width: 880px; margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--v2-line); }
.cat-proof img { flex: none; width: 116px; height: auto; }
.cat-proof p { flex: 1 1 340px; min-width: 0; max-width: 60ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.cat-proof p b { color: var(--ink); font-weight: 600; }

/* ---------- 5. the one tinted panel ---------- */
/* Colour arrives here on purpose, one screen before the close. Capped in width so the gradient is not carrying 40% of
   an empty panel at 1440 (critique P2-2). */
.cat-both { max-width: 880px; padding: clamp(30px, 3.4vw, 46px) clamp(24px, 3vw, 46px); border-radius: 20px; background: radial-gradient(120% 140% at 8% 0%, #e4eaff, #f4f6ff 62%); }
.cat-both h2 { max-width: 26ch; }
.cat-both p { margin-top: 18px; max-width: 62ch; font: 400 17px/1.65 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.cat-both p b { color: var(--ink); font-weight: 600; }

/* ---------- 6. faq column ---------- */
.cat-faq-col { max-width: 820px; }

/* ---------- laptop ---------- */
@media (max-width: 991px) {
  .cat-cases > div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cat-led thead th:first-child { width: 24%; }
  .cat-led thead th:not(:first-child) { width: 38%; }
  .cat-led tbody td { font-size: 15px; padding: 18px 16px; }
}

/* ---------- phones ---------- */
@media (max-width: 700px) {
  /* The ledger stops being a table and becomes six stacked rows, each with the
     dimension as its heading and the two readings labelled underneath. A
     sideways scroll would hide the Unasked column, which is the argument. */
  .cat-led, .cat-led tbody, .cat-led tr, .cat-led tbody th, .cat-led tbody td { display: block; }
  .cat-led thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cat-led tbody tr { padding: 18px 0; border-bottom: 1px solid var(--v2-line); }
  .cat-led tbody tr:last-child { border-bottom: 0; }
  .cat-led tbody th { padding: 0 0 12px; border-bottom: 0; font-size: 15px; }
  .cat-led tbody td { padding: 13px 14px; border-bottom: 0; border-radius: 12px; }
  .cat-led tbody td + td { margin-top: 8px; }
  .cat-led tbody td::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 600 13px/1.3 var(--font-display); color: #6b7088; }
  .cat-led tbody td:first-of-type { background: var(--v2-card); }
  .cat-led tbody td:last-child::before { color: var(--blue); }
  .cat-hm-grid { grid-template-columns: 1fr; gap: 14px; }
  .cat-hm-grid > div + div { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--v2-line); }
  /* The shot header is a title and a pill. Below 700px the title alone fills the line, so let the pill drop under it
     rather than squeezing the title into four wrapped words. */
  .cat-shot { padding: 14px 14px 12px; }
  .cat-shot-h { flex-wrap: wrap; gap: 8px; }
  .cat-shot-h b { min-width: 0; }
  /* Only here: measured at 1440 and 991 the grid fits its box and never scrolls, so the hint would be describing
     something that does not happen. Below 700px it always scrolls. */
  .cat-scroll-hint { display: block; }
  .cat-both { padding: 26px 20px; }
  .cat-led tbody td .cat-v { font-size: 16px; }
  .cat-led-tabs { gap: 10px; }
  .cat-tabs-hint { flex: 1 1 100%; }
  .cat-cost { padding: 20px 18px; }
  .cat-proof { gap: 14px; }
  .cat-proof img { width: 100px; }
}