/* /parteneriat/retail/ — B2B vertical body.
   Reuses site.css components (.subpage-section, .section-head, .cards-3-grid,
   .cta-row, .faq__*). This file carries only page-scoped extras:
   hero-padding trim, benefit cards, the green product band, proof stats,
   and a green-deep-scoped primary CTA (white-on --green fails AA). */

@layer pages {
  /* Trim the tall stub-hero bottom padding now that real body follows */
  .retail .page-hero--compact {
    padding-bottom: 56px;
  }

  /* Benefit cards (cream, cards-3-grid) */
  .retail-card {
    padding: 32px 28px 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    height: 100%;
  }

  .retail-card__num {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--green-deep);
  }

  .retail-card h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.2;
    color: var(--green-deep);
  }

  .retail-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.62;
  }

  /* Green product band (honors 80/20; cream text on --green-deep) */
  .retail-band {
    background: var(--green-deep);
  }

  .retail-band .section-head h2,
  .retail-band .section-head h2 em,
  .retail-band .section-head p {
    color: var(--warm-cream);
  }

  .retail-band .section-head h2 em {
    font-style: italic;
    font-weight: 400;
  }

  .retail-offer {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
  }

  .retail-offer li {
    padding: 20px 22px;
    background: rgba(249, 240, 201, 0.08);
    border: 1px solid rgba(249, 240, 201, 0.22);
    border-radius: 18px;
  }

  .retail-offer strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--warm-cream);
  }

  .retail-offer span {
    font-size: 14px;
    line-height: 1.55;
    color: var(--warm-cream);
  }

  /* Proof stats */
  .retail-stats {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    list-style: none;
    text-align: center;
  }

  .retail-stats dt {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1;
    color: var(--green-deep);
  }

  .retail-stats dd {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-soft);
  }

  .retail-networks {
    max-width: 760px;
    margin: 40px auto 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
  }

  /* Primary CTA scoped to --green-deep (white-on --green fails AA) */
  .retail-cta.cta-row {
    justify-content: center;
    margin-top: 36px;
  }

  .retail-cta.cta-row .cta--primary {
    background: var(--green-deep);
  }

  .retail-cta.cta-row .cta--primary:hover,
  .retail-cta.cta-row .cta--primary:focus-visible {
    background: var(--green);
  }

  .retail-close {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }

  .retail-close p {
    margin: 0;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.65;
  }

  @media (max-width: 768px) {
    .retail .page-hero--compact {
      padding-bottom: 48px;
    }

    .retail-offer {
      grid-template-columns: 1fr;
    }

    .retail-stats {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }
}