/* ==========================================================================
 * WattWisely — software page
 * ========================================================================== */

@layer pages {

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

  /* -- Hero → Connect --------------------------------------------------------- */

  /* The fan already carries a lot of air around it, so the hero gives up half
     its bottom padding and the connect section half its top, which brings the
     hardware-agnostic story up to meet the hero. */
  .hero { padding-block-end: calc(var(--ww-section-y) * 0.5); }

  .sw-connect { padding-block: calc(var(--ww-section-y) * 0.5) calc(var(--ww-section-y) * 0.6); }

  /* The capabilities band follows directly; it takes less than a full top. */
  .sw-connect + .section { padding-block-start: calc(var(--ww-section-y) * 0.7); }

  /* -- Connect -------------------------------------------------------------- */

  .sw-connect h2 { font-size: var(--ww-step-3); }

  .sw-connect__lead { font-size: var(--ww-step-1); }

  /* The diagram is line art on a light ground, so it gets no shadow frame —
     `.media--shadow` would draw a card edge around what is already a flat
     drawing and make it read as a screenshot. */
  .sw-connect .media { align-self: center; }

  /* The migration note spans the container as a gradient panel, like the
     closing band on the home page: title on the left, the answer on the
     right. It stacks on narrow screens. */
  .sw-connect__callout {
    margin-top: var(--ww-space-8);
    max-width: none;
  }

  @media (min-width: 900px) {
    .sw-connect__callout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: var(--ww-space-7);
      align-items: start;
      padding: var(--ww-space-7);
    }

    .sw-connect__callout .callout__title {
      margin: 0;
      text-align: left;
      font-size: var(--ww-step-2);
      line-height: var(--ww-leading-tight, 1.2);
    }

    .sw-connect__callout p { margin: 0; text-align: justify; hyphens: auto; }
  }

}