@layer components {
  .coverage-hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xxl);
    align-items: center;

    @media (min-width: 100ch) {
      grid-template-columns: 1fr 1fr;
      gap: 80px; /* wide-split gutter */
    }

    .hero-sub {
      font-size: var(--text-md);
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 42ch;
    }
  }

  .coverage-pills {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .coverage-pill {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: translateX(30px);
    animation: slideIn 0.5s ease forwards;
  }
  .coverage-pill:nth-child(1) { animation-delay: 0.3s; }
  .coverage-pill:nth-child(2) { animation-delay: 0.45s; }
  .coverage-pill:nth-child(3) { animation-delay: 0.6s; }
  .coverage-pill:nth-child(4) { animation-delay: 0.75s; }
  .coverage-pill:nth-child(5) { animation-delay: 0.9s; }

  .pill-text {
    flex: 1;

    strong {
      display: block;
      font-size: var(--text-sm);
      font-weight: 600;
      margin-bottom: 2px;
    }
    span {
      font-size: var(--text-xs);
      color: var(--text-tertiary);
    }
  }

  .pill-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--semantic-success-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .section-divider {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);

    hr {
      border: none;
      height: 1px;
      background: var(--border-subtle);
    }
  }

  .why-section {
    .section-head {
      color: var(--accent-hover);
    }

    h2 {
      font-family: var(--font-serif);
      font-size: var(--text-xxl);
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: var(--spacing-sm);
    }

    .why-copy p {
      font-size: var(--text-md);
      line-height: 1.7;
      color: var(--text-tertiary);
    }
  }

  .why-inner {
    max-width: var(--max-width);
    margin: 0 auto;
  }

  .why-points {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .why-point {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;

    .step-num {
      --step-num-size: var(--text-xxl);
      --step-num-color: var(--accent-hover);
      flex-shrink: 0;
      width: 40px; /* number gutter */
    }

    h4 {
      font-size: var(--text-sm);
      font-weight: 600;
      margin-bottom: var(--spacing-xxs);
      color: var(--text-on-dark);
    }

    p {
      font-size: var(--text-xs);
      line-height: 1.6;
      color: var(--text-tertiary);
    }
  }
}