/* ==========================================================================
 * WattWisely — driver app page
 * ========================================================================== */

@layer pages {

  /* Hero, steps, showcase, cards, and checklist are shared components — see
     components.css. Only the page-specific rhythm lives here. */

  /* -- Rhythm --------------------------------------------------------------- */
  /* The hero hands straight to the driver journey. A full section bottom plus
     a full section top read as one tall gap, so both sides give up some, the
     way / and /software do. */

  .hero { padding-block-end: calc(var(--ww-section-y) * 0.5); }

  .hero + .section { padding-block-start: calc(var(--ww-section-y) * 0.6); }

  /* -- Store badges --------------------------------------------------------- */
  /* Hidden entirely until both store URLs resolve; see the gate in app.php.
     Sized by the official artwork, which must not be redrawn or recoloured. */

  .app-stores__list {
    list-style: none;
    padding: 0;
    justify-content: center;
  }

  .app-stores__list a {
    display: inline-flex;
    align-items: center;
    /* Apple and Google both mandate clear space around the badge. */
    padding: var(--ww-space-2);
  }

  .app-stores__list img,
  .app-stores__list .ww-placeholder { height: 2.5rem; width: auto; }

  /* The phone captures are portrait at 800×1600 and are capped by `media_max`
     in the template; the centring that goes with that is in components.css,
     since /software and / need it too. Nothing page-specific is left here. */
}