/* ==========================================================================
 * WattWisely — home page
 * ========================================================================== */

@layer pages {

  /* Hero, steps, and FAQ are shared components — see components.css. */

  /* The proof strip sits directly under the hero on a tinted band, so the
     hero's full section padding below the CTAs read as a gap. Halved here. */
  .hero { padding-block-end: calc(var(--ww-section-y) * 0.5); }

  /* -- Proof strip --------------------------------------------------------- */

  .proof-strip .stat__value {
    font-size: var(--ww-step-2);
    letter-spacing: -0.02em;
  }

  .proof-strip .stat__label { max-width: 24rem; }

  /* Showcase styles moved to components.css — /software and /app use the same
     component, and while these lived here those pages rendered the rows with no
     separation at all. */

  /* -- Pricing teaser ------------------------------------------------------ */

  /* It follows the how-it-works band, whose own bottom padding already makes
     the gap, so the teaser takes half the usual top padding. */
  .pricing-teaser { padding-block-start: calc(var(--ww-section-y) * 0.5); }

  /* Two tiers: two columns, centred and capped, like the pricing page. */
  @media (min-width: 768px) {
    .pricing-teaser__tiers {
      max-width: 56rem;
      margin-inline: auto;
    }
  }

  .tier-teaser__audience {
    margin: 0;
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  /* The recommended tier gets weight without a second button colour. */
  .card--featured {
    border-color: var(--ww-primary);
    box-shadow: var(--ww-shadow-md);
  }
}