/* styles/sections/proof-cards.css
 * /bens-bites/ middle: two centred bands under the video hero, each an h2, a lede and a card
 * grid: four pain cards two across in a 900px block (one column at 768px and below) and three
 * stat cards (one column at 900px and below; both are the page's pre-swap queries). The first
 * band keeps its top and bottom rules on the white page field. Also the hero's tail: the
 * credibility line under the action, and no bottom padding (the video closes the hero). */
@layer sections {
  .sre .hero {
    padding-bottom: 0;
  }

  .hero .credibility-line {
    margin: var(--space-16) 0 var(--space-24);
    color: var(--ink-muted);
  }

  .sre-section {
    padding-block: var(--space-64);
  }

  .sre-alt {
    border-block: 1px solid var(--line-2);
  }

  .sre-section h2 {
    margin-bottom: var(--space-32);
  }

  .sre-lede {
    max-width: 720px;
    margin: calc(-1 * var(--space-16)) auto var(--space-48);
    color: var(--ink-muted);
    text-align: center;
  }

  .sre-taxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
    max-width: 900px;
    margin: 0 auto;
  }

  .sre-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
  }

  .sre-card,
  .sre-stat {
    padding: var(--space-32) var(--space-24);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--white);
  }

  .sre-card h3 {
    margin-bottom: var(--space-8);
  }

  .sre-card p,
  .sre-stat p:not(.sre-stat-title) {
    color: var(--ink-muted);
  }

  .sre-stat-num {
    color: var(--fern);
    font-variant-numeric: tabular-nums;
  }

  .sre-stat-title {
    margin: var(--space-8) 0 var(--space-4);
  }

  @media (width <= 900px) {
    .sre-stats {
      grid-template-columns: 1fr;
    }
  }

  @media (width <= 768px) {
    .sre-taxes {
      grid-template-columns: 1fr;
    }
  }
}