/* ==========================================================================
   compare-podium.css — /podium-alternative only.
   Load order: feature-v2 (tokens, .card, .shot, .faq-*, .tq), feature-v3
   (.matrix), show (.moment, .m-card, .m-chip, .m-from), home (.closing panel),
   compare (matrix cell states, sentiment, stamp), then this.

   Everything shared already exists. What is here is only what this page's own
   blocks need: the hero moment's two cards, the two "who each is for" columns,
   the three tour shots, the three switching rows, the proof column and the FAQ
   column width.

   Contrast floor is #6b7088 on white. Nothing renders under 13px: the shared
   .shot-h runs at 11.5px and .m-from at 12.5px, so both are lifted here.
   ========================================================================== */

/* ---------- hero moment ---------- */
.pd-page .hero-moment .moment { max-width: 430px; gap: 14px; }
.pd-page .m-from { font-size: 13px; }

/* the pricing summary: three label/value rows, the label quiet, the value ink */
.pd-terms { display: grid; gap: 0; margin-top: 2px; }
.pd-terms > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--v2-line);
}
.pd-terms > div:first-child { border-top: 0; padding-top: 2px; }
.pd-terms span { font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.pd-terms em { font: 600 14px/1.4 var(--font-display); color: var(--ink); font-style: normal; text-align: right; }

/* the review that arrived */
.pd-rev blockquote { margin: 0; font: 400 14.5px/1.5 var(--font-body); color: var(--ink); text-wrap: pretty; }
.pd-who { display: block; margin-top: 10px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.pd-stars { display: inline-flex; gap: 1px; vertical-align: -1px; }
.pd-stars i { font-style: normal; font-size: 13px; line-height: 1; color: #f5a623; }
.pd-stars i.is-off { color: #d7dae5; }

/* Simplify pass 2026-09-05: each column is now one two-sentence paragraph, so the flex-to-foot machinery that lined
   the two "Bottom line." closers up (and the .pd-bl rules with it) is gone. */

/* ---------- section heads: left aligned, so the page is not six centred blocks ---------- */
.pd-head { max-width: 740px; margin-bottom: clamp(26px, 3.2vw, 40px); }
.pd-page .sec-tight { padding-top: 0; }

/* ---------- who each product is for: two columns, theirs first ---------- */
.pd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.pd-two > div { padding: clamp(24px, 2.4vw, 32px); border-radius: 18px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.pd-two > div.is-us { background: var(--ghost); box-shadow: inset 0 0 0 1px rgba(0, 61, 255, .12); }
.pd-two h3 { font: 600 20px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.pd-two p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.pd-two p b { font-weight: 600; color: var(--ink); }

/* ---------- sourced sentiment: the component's own list, given room ---------- */
.pd-page .cmp-sent { margin-top: 0; }

/* ---------- the tour: two cards, then one across both ---------- */
.pd-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pd-cards .is-wide { grid-column: 1 / -1; }
.pd-cards .card { padding-bottom: 0; }
.pd-more { margin-top: 14px; }
.pd-more a { display: inline-flex; align-items: center; gap: 7px; font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none; }
.pd-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-more .icon { width: 14px; height: 14px; }

/* shot header: 11.5px in feature-v2, lifted to clear 13px here. The <i> that carries the screen name is an <i>
   only so the shared header can bold the business inside it, so undo the italic. */
.pd-page .shot { font-size: 13px; }
.pd-page .shot-h { font-size: 13px; }
.pd-page .shot-ht { font-style: normal; }

/* card 1 · Ask, ported from InsightsRedesign/components/AnswerView.js and askData.js. The product's order is caption
   (.ansMeta), then the three-up stat grid (.ansGrid > .ansStat: .v at 23px/800 over .l at 11.5px muted), then the
   evidence card headed "The reviews behind the number" with an initials avatar (.avv, 28px) and the phrase
   highlighted by a bottom-half gradient rather than a block fill (index.module.scss .blk .t mark). Two site rules
   override the product here: nothing under 13px (its .l and .m run 11.5px and 11px) and muted text is #5b6076. */
.pd-q { padding: 10px 12px; border-radius: 10px; background: var(--ghost); font: 500 13.5px/1.45 var(--font-display); color: var(--ink); }
.pd-cap { display: block; margin-top: 10px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.pd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pd-stats > div { padding: 12px 13px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.pd-stats b { display: block; font: 700 22px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-stats b.is-good { color: #0c7a52; }
.pd-stats small { display: block; margin-top: 3px; font: 600 13px/1.35 var(--font-body); color: #6b7088; }
.pd-ev { margin-top: 12px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.pd-ev-h { display: block; margin-bottom: 8px; font: 700 13px/1.4 var(--font-display); color: var(--ink); }
.pd-snip { display: flex; gap: 11px; align-items: flex-start; }
.pd-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; }
.pd-ev blockquote { margin: 0; font: 400 13.5px/1.5 var(--font-body); color: var(--v2-body); }
.pd-ev 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; }
.pd-ev-who { display: block; margin-top: 3px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }

/* card 2 · AI search, ported from DashboardListings/AiSearchView.js. This is the VenueDetail pane: a row of labelled
   scores (.dsLbl over .dsBig) reading "Share of voice", "Assistants" and "Facts", the last of them carrying the
   product's own crit chip "Wrong phone (Perplexity)". The pips under Assistants are named chips instead, so the
   state is not fill and hue alone. */
.pd-ai-q { font: 500 13.5px/1.45 var(--font-display); color: var(--ink); }
.pd-ai-q i { font-style: normal; color: #6b7088; }
.pd-lbl { display: block; margin-bottom: 4px; font: 700 13px/1.2 var(--font-display); font-style: normal;
  letter-spacing: .04em; text-transform: uppercase; color: #6b7088; }
.pd-scores { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; padding: 12px 13px; border-radius: 10px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.pd-scores > span > b { display: block; font: 700 22px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.pd-assist { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-assist i { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: #f1f2f7; font: 500 13px/1.4 var(--font-display); font-style: normal; color: #5b6076; }
.pd-assist i b { flex: none; font: 700 13px/1.4 var(--font-display); color: #5b6076; }
.pd-assist i.is-hit { background: #e6f6ee; color: #0c7a52; }
.pd-assist i.is-hit b { color: #0c7a52; }
.pd-ai-key { display: block; margin-top: 9px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }

/* the fact-check arm: it checks the phone number and nothing else (claims.md §B10). The product's chip is
   .chip.chipCrit inside the Facts slot, so the label sits above the chip here too. */
.pd-flag { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; padding: 10px 11px; border-radius: 10px; background: #fdeaef; }
.pd-flag .icon { flex: none; width: 17px; height: 17px; margin-top: 15px; color: #c9184a; }
.pd-flag span { font: 400 13px/1.45 var(--font-body); color: #5b6076; }
.pd-flag span b { display: block; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.pd-flag .pd-lbl { color: #5b6076; }
.pd-ai-key { display: block; margin-top: 9px; font: 400 13px/1.45 var(--font-body); color: #6b7088; }

/* ---------- the tour's foot: the third gap, folded into one sentence and its link ---------- */
.pd-tour-foot { margin-top: clamp(22px, 2.4vw, 30px); max-width: 720px; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.pd-tour-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }
.pd-tour-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- switching: three markers across, the worry in Beth's words and one answer beside it. Simplify pass
   2026-09-05: this was three stacked rows of two paragraphs each. ---------- */
.pd-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: clamp(18px, 2.2vw, 32px);
  border-top: 1px solid var(--v2-line); padding-top: clamp(24px, 2.6vw, 34px); }
/* subgrid so the three answers sit on one line whatever the marker above them wraps to */
.pd-sw > div { position: relative; padding-left: 18px; display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
.pd-sw > div::before { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.pd-sw h3 { font: 500 clamp(18px, 1.6vw, 21px)/1.35 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.pd-sw p { margin-top: 0; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.pd-sw h3 { margin-bottom: 10px; }

/* ---------- proof: the sentence, then the one quote, in one 780px column ---------- */
.pd-page .pd-proof { padding: clamp(40px, 4vw, 56px) 0 0; }
.pd-page .pd-proof .col > .h { max-width: 780px; margin: 0 auto; }
/* one sentence saying why this customer is the reader, on the same left edge as the h2 and the quote */
.pd-proof-lead { max-width: 780px; margin: 14px auto 0; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.pd-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(88px, 9vw, 128px); } /* the quote needs air before the FAQ (Lachlan, 2026-09-05) */
.pd-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.pd-page .tq figcaption { margin-top: 26px; }

/* ---------- FAQ, stamp ---------- */
.pd-faq-col { max-width: 800px; }
.pd-page .cmp-stamp { margin-top: 34px; }

/* ---------- 991: the wide card and the switching rows stop being two columns ---------- */
@media (max-width: 991px) {
  .pd-cards { grid-template-columns: minmax(0, 1fr); }
  .pd-two { grid-template-columns: minmax(0, 1fr); }
  .pd-sw { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 22px; }
  .pd-sw > div { display: block; }
}

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .pd-page .hero-moment .moment { max-width: none; }
  .pd-stats { grid-template-columns: minmax(0, 1fr); }
  .pd-terms > div { gap: 10px; }
}