/* ============================================================
   Why Reviews — page-only warm/premium theme
   Mirrors the pattern already established for pricing.html
   (see .pricing-main in styles.css): shared design tokens are
   re-declared inside a page-only wrapper class, so every existing
   component that already consumes var(--ink), var(--line) etc.
   re-themes automatically — no shared rule in styles.css is edited.
   .why-main only exists on this page, so nothing here can reach
   any other page.
   ============================================================ */

.why-main {
  --ink:     #171717;
  --body:    #686866;
  --muted:   #686866;
  --muted-2: #8C8A83;
  --line:    #D8D6CF;
  --accent:  #203D68;

  /* tones with no existing token slot */
  --wr-bone: #F5F2EA;
  --wr-grey: #ECEBE7;
  --wr-card: #FCFBF7;

  /* spacing rhythm — desktop ~80-96px between bands (each band
     contributes half via padding-block, so adjacent bands sum
     correctly), ~28-40px between grouped content within a band */
  --wr-gap:   clamp(40px, 5.5vw, 48px);
  --wr-edge:  clamp(56px, 8vw, 88px);
  --wr-group: clamp(28px, 4vw, 40px);
}
@media (max-width: 620px) {
  .why-main { --wr-gap: 28px; --wr-edge: 52px; --wr-group: 20px; }
}

/* ---------- Bands ---------- */
.why-band { padding-block: var(--wr-gap); }
.why-band--bone  { background: var(--wr-bone); }
.why-band--grey  { background: var(--wr-grey); }
.why-band--first { padding-top: var(--wr-edge); }

.why-main .eyebrow { color: var(--accent); }
.why-main .section-head { margin-bottom: 0; }
.why-main .section-sub { color: var(--body); }

/* ---------- Supporting visual: "Where the ask happens" ---------- */
.ask-visual {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.ask-visual__text { min-width: 0; }
.ask-visual__title { font-size: clamp(1.35rem, 2.2vw, 1.65rem); margin-bottom: .85rem; }
.ask-visual__body { color: var(--body); font-size: 1rem; line-height: 1.65; max-width: 44ch; }
.ask-visual__media { min-width: 0; display: flex; justify-content: center; }
.ask-visual__media img { width: min(360px, 100%); filter: drop-shadow(0 16px 28px rgba(23,23,23,.14)); }

/* ---------- Statistics — de-boxed, sits directly on the bone band.
   .stat-grid--divided is an optional modifier (add the class to try
   faint hairline dividers between the four stats). ---------- */
.why-main .stat-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3rem); position: relative; }
.why-main .stat-grid--divided::before,
.why-main .stat-grid--divided::after { content: ""; position: absolute; background: var(--line); }
.why-main .stat-grid--divided::before { top: 0; bottom: 0; left: 50%; width: .5px; }
.why-main .stat-grid--divided::after { left: 0; right: 0; top: 50%; height: .5px; }
.why-main .stat__num u { box-shadow: inset 0 -0.11em 0 var(--ul); }
.why-main .stat__sub { font-size: .89rem; line-height: 1.5; }
.why-main .stat__src { font-size: .76rem; }

/* ---------- Insight panels ---------- */
.why-main .proof-cols { margin-top: var(--wr-group); gap: clamp(1.5rem, 3vw, 2.5rem); }
.why-main .proof-col {
  background: var(--wr-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
}
.why-main .proof-col h3 { font-size: 1.2rem; margin-bottom: 1.5rem; }
.why-main .proof-col h3 svg { width: 20px; height: 20px; color: var(--accent); }
.why-main .proof-list { gap: 1.3rem; }
.why-main .proof-list .pt-mark { width: 7px; height: 7px; margin-top: 10px; background: var(--accent); opacity: .6; }
.why-main .proof-list .k { font-size: .98rem; }
.why-main .proof-list p { font-size: .93rem; line-height: 1.6; }

/* ---------- Sources ---------- */
.why-main .proof-source {
  margin-top: var(--wr-group);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  font-size: .76rem;
  line-height: 1.6;
}

/* ---------- Tablet / narrow desktop ---------- */
@media (max-width: 880px) {
  .ask-visual { grid-template-columns: 1fr; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .why-main .stat-grid { grid-template-columns: 1fr; gap: 2rem; }
  .why-main .stat-grid--divided::before,
  .why-main .stat-grid--divided::after { display: none; }
  .ask-visual { gap: 1.6rem; }
  .ask-visual__media img { width: min(300px, 78%); }
  .why-main .proof-col { padding: 1.5rem 1.35rem; }
  .why-main .proof-source { margin-top: var(--wr-group); }
}

@media (prefers-reduced-motion: reduce) {
  .why-main .stat { transition: none; }
}