/* ==========================================================================
   compare-reviewtrackers.css — page CSS for /reviewtrackers-alternative.
   Load order: feature-v2, feature-v3, show, home, compare, then this.

   Everything shared already exists: .col, .h, .sub, .card, .shot, .matrix,
   .cmp-* (compare.css), .moment / .m-card / .m-chip (show.css), .tq
   (feature-v2.css) and .closing (home.css). What is here is only this page's
   own devices:
     1. the hero moment's Listings ledger card
     2. section heads, left aligned, so the page is not eight centred blocks
     3. "who each is for": two columns on hairlines
     4. the ownership chain: four dated rows
     5. the two product cards' shot internals (Ask answer, AI Search sweep)
     6. the wide band: copy plus the Locations table
     7. switching: three stacked rows on hairlines
     8. proof column, FAQ column
   Contrast floor is #6b7088 on white. Nothing here is smaller than 13px.
   ========================================================================== */

.rt-page .sec-tight { padding-top: 0; }

/* ---------- 1. hero moment: the Listings ledger ---------- */
/* show.css sets .m-from at 12.5px, under this site's 13px floor; lifted page-locally, not in the shared file. */
.rt-page .m-from { font-size: 13px; }
.rt-mcard { padding: 18px 20px 16px; }
.rt-pills { display: flex; gap: 6px; margin-bottom: 14px; }
.rt-pills b,
.rt-pills span { padding: 5px 11px; border-radius: 999px; font: 600 13px/1.3 var(--font-display); }
.rt-pills b { background: var(--ink); color: #fff; }
.rt-pills span { background: var(--v2-card); color: #6b7088; box-shadow: inset 0 0 0 1px var(--v2-line); }
.rt-mfind { padding: 12px 14px; border-radius: 12px; background: #fff6e5; }
.rt-mfind-h { font: 600 13px/1.3 var(--font-display); color: #8a5a00; }
.rt-mfind-w { margin-top: 4px; font: 400 14px/1.45 var(--font-body); color: var(--ink); }
.rt-mrows { margin-top: 10px; display: grid; gap: 6px; }
.rt-mrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--v2-card); }
.rt-mrow span { font: 500 14px/1.4 var(--font-display); color: var(--ink); }
.rt-mrow em { font: 500 13px/1.4 var(--font-body); font-style: normal; color: #0c7a52; }
.rt-mfoot { margin-top: 12px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }

/* ---------- 2. section heads ---------- */
.rt-head { max-width: 760px; margin: 0 0 clamp(28px, 3.5vw, 44px); text-align: left; }
.rt-head .sub { margin-inline: 0; }

/* ---------- 3. who each product is for ---------- */
.rt-who { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.rt-who > div { padding: 30px 30px 34px; }
.rt-who > div + div { border-left: 1px solid var(--v2-line); }
.rt-who h3 { font: 500 23px/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.rt-who p { margin-top: 14px; max-width: 46ch; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
/* Simplify pass 2026-09-05: each column is one two-sentence paragraph, so the flex-to-foot machinery that levelled
   the two "Bottom line." closers (and the .rt-bl rules) is gone. */

/* ---------- 4. the ownership chain ---------- */
.rt-chain { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.rt-chain::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #e1e4ee; }
.rt-chain li { position: relative; padding: 16px 0; border-bottom: 1px solid var(--v2-line); }
.rt-chain li:first-child { border-top: 1px solid var(--v2-line); }
.rt-chain li::before { content: ""; position: absolute; left: -26px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #c6cbda; }
.rt-chain li:last-child::before { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.rt-when { display: block; font: 600 13px/1.4 var(--font-display); color: var(--blue); }
.rt-chain li p { margin-top: 6px; max-width: 60ch; font: 400 17px/1.5 var(--font-body); color: var(--ink); }
.rt-chain-src { display: block; margin-top: 8px; }
.rt-chain-src span { display: inline-block; margin-right: 16px; font: 400 13.5px/1.5 var(--font-body); color: #6b7088; }
.rt-chain-note { margin-top: 26px; max-width: 68ch; }

/* ---------- 5. the two product cards ---------- */
.rt-link-p { margin-top: 18px; }
.rt-link { display: inline-flex; align-items: center; gap: 8px; font: 600 14.5px/1.3 var(--font-display); color: var(--ink); text-decoration: none; }
.rt-link .icon { width: 15px; height: 15px; color: var(--blue); transition: transform .3s var(--ease-out); }
.rt-link:hover { color: var(--blue); }
.rt-link:hover .icon { transform: translateX(3px); }

/* Ask, re-ported 2026-09-05 from InsightsRedesign/components/AnswerView.js + askData.js. The product does not write
   an answer as a sentence: it prints the caption (.ansMeta), then a grid of stat tiles (.ansStat, a 23px/800 value
   over an 11.5px label), then the evidence card headed "The reviews behind the number" with a 28px initials avatar
   (.avv) and the phrase in a bottom-anchored highlight (index.module.scss .blk .t mark), then "People also ask".
   Two site rules override it: nothing under 13px, and muted text on a tint is #5b6076. */
.rt-pair { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.4vw, 52px);
  align-items: center; margin-bottom: clamp(34px, 4vw, 56px); }
.rt-pair-copy h3 { font: 500 clamp(22px, 2.2vw, 28px)/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.rt-pair-copy p { margin-top: 14px; max-width: 46ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.rt-pair-copy p b { font-weight: 600; color: var(--ink); }
.rt-q { padding: 10px 12px; border-radius: 10px; background: var(--ghost); font: 500 13.5px/1.45 var(--font-display); color: var(--ink); }
.rt-cap { margin-top: 10px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.rt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.rt-stats > div { padding: 12px 13px; border-radius: 12px; background: var(--v2-card); }
.rt-stats b { display: block; font: 700 22px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-stats small { display: block; margin-top: 3px; font: 600 13px/1.35 var(--font-body); color: #5b6076; }
.rt-behind { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.rt-behind-h { font: 700 13px/1.3 var(--font-display); color: var(--ink); }
.rt-snip { display: flex; align-items: flex-start; gap: 11px; margin-top: 8px; }
.rt-avv { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #6a5ae0, #9087e5); color: #fff; font: 700 13px/1 var(--font-display); font-style: normal; }
.rt-behind-q { font: 400 13.5px/1.5 var(--font-body); color: var(--v2-body); }
.rt-behind-q mark { background-color: transparent; background-image: linear-gradient(rgba(0, 61, 255, .22), rgba(0, 61, 255, .22));
  background-size: 100% .34em; background-position: 0 100%; background-repeat: no-repeat; color: inherit; font-weight: 700; padding: 0 1px; }

/* The AI search sweep mock was cut on 2026-09-05: the screen is drawn on /podium-alternative and owned by
   /ai-search-visibility, and this page cannot carry three screens inside 1,100 words. Its one true sentence is the
   line under the tour. The .rt-band / .rt-sweep / .rt-pips rules went with it. */

.rt-incl { margin-top: 26px; max-width: 66ch; }
.rt-incl a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 6. the wide band: copy above, the Locations table at full column width ----------
   The table carries seven real columns and the Status pill is the whole point of it, so it gets the 1080px column
   rather than a 620px half of one, where the status scrolled out of sight at 1440. */
.rt-wide { display: block; }
/* the copy above the table reads across the column: the heading on the left, the sentence and its link on the
   right, so the band is not a narrow paragraph beside 600px of empty ground. */
.rt-wide-copy { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px);
  align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.rt-wide-copy h3 { max-width: 22ch; font: 500 clamp(22px, 2.2vw, 28px)/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.rt-wide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 18px; }
.rt-wide-copy p { max-width: 52ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.rt-shot { padding: 18px 18px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), 0 24px 50px -34px rgba(15, 13, 25, .4); }
.rt-shot-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 13px/1.3 var(--font-display); color: var(--v2-body); }
.rt-shot-h span { padding: 3px 8px; border-radius: 6px; background: var(--ghost); color: var(--blue); }
.rt-tbl-sub { margin-top: 10px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.rt-scroll { margin-top: 12px; overflow-x: auto; }
.rt-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13.5px/1.4 var(--font-body); }
.rt-tbl th, .rt-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--v2-line); text-align: left; vertical-align: middle; white-space: nowrap; }
.rt-tbl thead th { font: 600 13px/1.3 var(--font-display); color: #6b7088; }
.rt-tbl tbody tr:last-child th, .rt-tbl tbody tr:last-child td { border-bottom: 0; }
.rt-tbl .c-rank { color: #6b7088; font-variant-numeric: tabular-nums; }
.rt-tbl th.c-name { font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.rt-tbl tbody td { color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-tbl .c-abbr { display: none; }
.rt-pill { display: inline-block; padding: 4px 9px; border-radius: 999px; font: 600 13px/1.3 var(--font-display); }
.rt-pill.is-crit { background: #ffe0e6; color: #9b1234; }
.rt-pill.is-warn { background: #fff0cc; color: #7a4f00; }
.rt-pill.is-good { background: #ddf7ea; color: #0c7a52; }
.rt-reason { font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.rt-tbl-more { margin-top: 12px; font: 600 13px/1.4 var(--font-display); color: var(--blue); }

/* ---------- 7. switching: three rows on hairlines ---------- */
.rt-switch { border-top: 1px solid var(--v2-line); }
.rt-switch > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); padding: 26px 0 28px; border-bottom: 1px solid var(--v2-line); }
.rt-switch h3 { font: 500 23px/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.rt-switch p { max-width: 56ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.rt-switch a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 8. proof and FAQ columns ---------- */
/* The headline and the quote share one 780px column and one left edge, so the h2 leads and the quote steps down. */
.rt-page .rt-proof { padding-bottom: 0; }
.rt-page .rt-proof .col > .h { max-width: 780px; margin: 0 auto; }
/* The one sentence that says why this customer is the reader's kind of business, on the same left edge as the h2. */
.rt-page .rt-proof .col > .sub { max-width: 780px; margin: 16px auto 0; }
.rt-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(88px, 9vw, 128px); } /* the quote needs air before the FAQ (Lachlan, 2026-09-05) */
.rt-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.rt-page .tq figcaption { margin-top: 26px; }
.rt-page .col.rt-faq-col { max-width: 820px; }
/* feature-v2.css styles .faq-a p but not the links inside it, and half of these answers carry one. */
.rt-page .faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.rt-page .faq-a a:hover { color: var(--ink); }

/* ---------- breakpoints ---------- */
/* The two-column blocks all still fit at 991, so they collapse at 900 rather than there: at 991 a single column
   left half the band empty. The scroll hint appears at the same point, which is where the Locations table (about
   850px of real columns) stops fitting inside its card. */
@media (max-width: 1100px) {
  .rt-wide-copy { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
  .rt-pair { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rt-pair-copy p { max-width: 62ch; }
}
@media (max-width: 900px) {
  .rt-who { grid-template-columns: 1fr; }
  .rt-who > div + div { border-left: 0; border-top: 1px solid var(--v2-line); }
  .rt-who p { max-width: 62ch; }
  .rt-wide-cols { grid-template-columns: 1fr; gap: 18px; }
  .rt-wide-copy p { max-width: 62ch; }
  .rt-switch > div { grid-template-columns: 1fr; gap: 12px; }
  .rt-tbl .c-full { display: none; }
  .rt-tbl .c-abbr { display: inline; }
}
@media (max-width: 700px) {
  .rt-stats { grid-template-columns: minmax(0, 1fr); }
  .rt-tbl .c-rank, .rt-tbl .c-new, .rt-tbl .c-resp, .rt-tbl .c-quiet { display: none; }
  .rt-tbl th, .rt-tbl td { padding: 9px 8px; white-space: normal; }
}
@media (max-width: 560px) {
  .rt-who > div { padding: 26px 0 30px; }
  .rt-who > div + div { padding-top: 26px; }
  .rt-chain li p { font-size: 16px; }
  .rt-shot { padding: 16px 14px 14px; }
}