/* Comparison and best-of page styles.
   Shared by /dealcheck-alternative, /best/*, and the persona pages.
   Depends on propera_landing.css for the color tokens and section classes. */

.cmp-main {
  padding: 0 0 40px;
}

/* The shared hero is sized for the homepage, where a CTA button follows the
   subheadline. Nothing follows it here, so its 120px bottom padding plus the
   paragraph's own 40px left a large dead gap. Tighten both. */
.cmp-main .hero-section {
  padding: 80px 0 64px;
}

.cmp-main .hero-section p {
  margin-bottom: 0;
}

/* Constrain the whole content block rather than each element inside it, so
   headings, prose and tables share one left edge and one width. Without this the
   tables ran to the 1200px container while the prose stopped at 760px, which read
   as a mistake on a wide screen. */
.cmp-body {
  max-width: 900px;
  margin: 0 auto;
}

.cmp-section {
  padding: 56px 0;
}

.cmp-section-alt {
  background: var(--bg-light);
}

.cmp-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 12px;
}

.cmp-section h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--secondary);
  margin: 28px 0 8px;
}

.cmp-lede {
  font-size: 18px;
  color: var(--text-gray);
  max-width: 760px;
  margin-bottom: 28px;
}

.cmp-body p {
  max-width: 760px;
  margin-bottom: 16px;
}

/* Answer-first summary box. The passage AI assistants should quote. */
.cmp-answer {
  border-left: 4px solid var(--primary);
  background: var(--bg-light);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 32px;
  max-width: 820px;
}

.cmp-answer p {
  font-size: 17px;
  color: var(--secondary);
  margin: 0;
}

/* Comparison table. Scrolls inside its own container on narrow screens so the
   page body never scrolls horizontally. */
.cmp-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.cmp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.cmp-table th,
.cmp-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
}

.cmp-table thead th {
  background: var(--secondary);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: none;
}

.cmp-table tbody th {
  font-weight: 600;
  color: var(--secondary);
  background: var(--bg-light);
  width: 34%;
}

.cmp-table .cmp-col-us {
  color: var(--secondary);
  font-weight: 600;
}

.cmp-yes {
  color: #0e8d7f;
  font-weight: 700;
}

.cmp-no {
  color: var(--text-gray);
}

/* A wide table (6+ columns) is cramped at the 900px reading width, so let it break
   out symmetrically to the full 1160px container on large screens only. 900 + 260
   = 1160, which is the 1200px container less its 20px side padding. Below that it
   stays at block width and scrolls inside its wrapper. */
@media (min-width: 1200px) {
  .cmp-table-wide {
    margin-left: -130px;
    margin-right: -130px;
  }
}

.cmp-scroll-hint {
  display: none;
}

@media (max-width: 720px) {
  .cmp-scroll-hint {
    display: block;
    font-size: 13px;
    color: var(--text-gray);
    margin: -8px 0 16px;
  }
}

/* Source note under any table making claims about another product. */
.cmp-source {
  font-size: 13px;
  color: var(--text-gray);
  max-width: 760px;
  margin-bottom: 28px;
}

/* Head-to-head disclosure. Previously rendered as a section h2 over a .cmp-source
   footnote, which put a 32px heading on top of 13px grey text and left the block
   stranded in whitespace. Contained and size-matched instead. */
.cmp-disclosure {
  max-width: 820px;
  padding: 22px 26px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: var(--white);
}

.cmp-disclosure h2 {
  font-size: 18px;
  margin: 0 0 10px;
}

.cmp-disclosure p {
  margin: 0;
  font-size: 15px;
  color: var(--text-gray);
}

/* Two-column "who should pick which" */
/* 240px, not 280px: inside the 900px reading column three cards need 273px each,
   so a 280px minimum silently dropped the persona pages to a 2 + 1 layout with a
   dead gap beside the third card. Two-card uses are unaffected. */
.cmp-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.cmp-split-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 24px;
  background: var(--white);
}

.cmp-split-card h3 {
  margin-top: 0;
  font-size: 19px;
}

/* Card titles on the hub are links. Without this they render as default browser
   blue with an underline, which is the same thing that made the footer social icons
   look wrong. */
.cmp-split-card h3 a {
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.cmp-split-card h3 a:hover {
  color: var(--primary);
}

.cmp-split-card ul {
  margin: 12px 0 0 18px;
  color: var(--text-gray);
}

.cmp-split-card li {
  margin-bottom: 8px;
}

/* Three problem cards where one is much longer than its siblings. Equal-height grid
   cells mean the short cards inherit the tall one's height and sit half empty. This
   puts the long card across the full bottom row, where the wider measure roughly halves
   its height and the two short cards pair off above it.
   OPT-IN, set per page: on a page whose three cards are already even, a full-width
   bottom card looks arbitrary. Only for-wholesalers uses it today.
   Note the visual order becomes 1, 3, 2 while the DOM stays 1, 2, 3. Acceptable here
   because the cards are independent and a screen reader still gets the logical order. */
@media (min-width: 760px) {
  .cmp-split-featured {
    grid-template-columns: repeat(2, 1fr);
  }

  .cmp-split-featured > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .cmp-split-featured > :nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
  .cmp-split-featured > :nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
}

/* Offer waterfall: CSS-drawn, no chart library (CSP blocks external scripts
   beyond the allowlist, and a bar chart does not need one). */
.cmp-waterfall {
  max-width: 640px;
  margin: 24px 0 8px;
}

.cmp-wf-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.cmp-wf-label {
  font-size: 14px;
  color: var(--secondary);
  font-weight: 600;
}

.cmp-wf-track {
  position: relative;
  height: 30px;
  background: #eef1f4;
  border-radius: 6px;
  overflow: hidden;
}

.cmp-wf-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
}

.cmp-wf-value {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
  padding-left: 10px;
  color: var(--white);
}

.cmp-wf-value-dark {
  color: var(--secondary);
}

.cmp-wf-arv .cmp-wf-bar { left: 0; width: 100%; background: var(--secondary); }
.cmp-wf-repairs .cmp-wf-bar { left: 62%; width: 38%; background: #d97757; }
.cmp-wf-fee .cmp-wf-bar { left: 52%; width: 10%; background: #b0762f; }
.cmp-wf-offer .cmp-wf-bar { left: 0; width: 52%; background: var(--primary); }

.cmp-wf-note {
  font-size: 13px;
  color: var(--text-gray);
  max-width: 640px;
  margin-bottom: 8px;
}

/* Single-figure proof bar, e.g. share of comp prices that fail verification. */
.cmp-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 28px 0 8px;
}

.cmp-proof-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 22px;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.cmp-proof-figure {
  font-size: 34px;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.1;
}

.cmp-proof-label {
  font-size: 14px;
  color: var(--text-gray);
  margin-top: 4px;
}

/* No progress bar here. It existed to visualise a single percentage stat; once that
   stat was cut, every bar rendered at 100% and a bar chart where every bar is full
   implies data it does not carry. */


/* Condition tiers, mirroring the chips the app itself renders on every comp. */
.cmp-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0 8px;
}

.cmp-tier {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--white);
}

.cmp-tier-name {
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 4px;
}

.cmp-tier-desc {
  font-size: 14px;
  color: var(--text-gray);
}

.cmp-tier-bar {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 12px;
}

.cmp-tier-renovated .cmp-tier-bar { background: #0e8d7f; }
.cmp-tier-updated .cmp-tier-bar { background: var(--primary); }
.cmp-tier-dated .cmp-tier-bar { background: #b0762f; }
.cmp-tier-rough .cmp-tier-bar { background: #d97757; }

/* FAQ block reused across comparison and best-of pages. */
.cmp-faq {
  max-width: 820px;
}

.cmp-faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 0;
}

.cmp-faq-item:last-child {
  border-bottom: none;
}

.cmp-faq-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.cmp-faq-item p {
  color: var(--text-gray);
  margin: 0;
}

/* Ranked list for the best-of pages. */
.cmp-rank {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  background: var(--white);
}

.cmp-rank-top {
  border-color: var(--primary);
  border-width: 2px;
}

.cmp-rank-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cmp-rank-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}

.cmp-rank-head h3 {
  margin: 0;
  font-size: 21px;
}

.cmp-rank-kind {
  font-size: 14px;
  color: var(--text-gray);
}

.cmp-rank-best {
  font-size: 15px;
  color: var(--secondary);
  margin-bottom: 10px;
}

.cmp-rank ul {
  margin: 0 0 0 18px;
  color: var(--text-gray);
}

.cmp-rank li {
  margin-bottom: 6px;
}

/* Worked example: a real deal with real numbers. Deliberately styled apart from the
   quote block, because a case with figures in it is a different kind of evidence from
   someone saying they liked the product, and collapsing the two makes both weaker. */
.cmp-case {
  max-width: 760px;
  margin: 28px 0 8px;
  padding: 24px 28px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: var(--white);
}

.cmp-case h3 {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--secondary);
}

.cmp-case-rows {
  margin: 0 0 14px;
}

/* flex-wrap so a long label drops its value to the next line instead of overflowing
   the card. At 390px "Another investor's maximum offer" plus its figure fills almost
   the whole 298px of usable width, so there is no headroom for a longer label. */
.cmp-case-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f4;
  font-size: 15px;
}

.cmp-case-row span {
  min-width: 0;
}

.cmp-case-row:last-child {
  border-bottom: none;
}

.cmp-case-row span:first-child {
  color: var(--text-gray);
}

.cmp-case-row span:last-child {
  color: var(--secondary);
  font-weight: 600;
  text-align: right;
}

.cmp-case-note {
  font-size: 14px;
  color: var(--text-gray);
  margin: 0;
}

.cmp-case-attrib {
  font-size: 13px;
  color: var(--text-gray);
  margin: 10px 0 0;
}

/* Beta tester quote. Attribution is first name plus role only, by Richard's
   instruction: no other personal information on a public page. */
.cmp-quote {
  max-width: 760px;
  margin: 28px 0 8px;
  padding: 24px 28px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: var(--white);
}

/* Context line above a quote whose opening word has no antecedent ("That's about the
   price point..."). Preferred over bracketing inside the quotation: it supplies the
   missing referent without editing the person's sentence or putting our product name
   in their mouth. */
.cmp-quote-lead {
  font-size: 14px;
  color: var(--text-gray);
  margin: 0 0 12px;
}

.cmp-quote blockquote {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--secondary);
}

.cmp-quote figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-gray);
}

.cmp-quote-name {
  font-weight: 600;
  color: var(--secondary);
}

.cmp-cta {
  text-align: center;
  padding: 56px 0;
}

.cmp-cta h2 {
  margin-bottom: 10px;
}

.cmp-cta p {
  color: var(--text-gray);
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .cmp-section { padding: 40px 0; }
  .cmp-section h2 { font-size: 26px; }
  .cmp-wf-row { grid-template-columns: 120px 1fr; }
  .cmp-wf-label { font-size: 13px; }
}