/* ==========================================================================
 * WattWisely — white-label page
 * ========================================================================== */

@layer pages {

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

  /* -- Rhythm --------------------------------------------------------------- */
  /* Nine sections on one page: at the site-wide section padding they read as
     nine islands. The token is shortened for this page only, so every ratio
     that hangs off it (tight sections, the last-section rule) follows. The
     hero hands to the first band the way / and /app do. */

  main { --ww-section-y: clamp(2.25rem, 6vw, 5rem); }

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

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

  /* -- Yours vs ours -------------------------------------------------------- */

  .wl-split__diagram {
    max-width: 60rem;
    margin-inline: auto;
  }

  .wl-split__lists { margin-top: var(--ww-space-9); }

  .wl-side {
    padding: var(--ww-space-6);
    background: var(--ww-white);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
  }

  /* The two columns are a contrast, so they are marked as one. Amber for the
     partner's side and teal for ours — the same cool/warm split the brand uses
     everywhere else, doing actual work here rather than decoration. */
  .wl-side--yours { border-top: 3px solid var(--ww-accent); }
  .wl-side--ours  { border-top: 3px solid var(--ww-primary); }

  .wl-side__title {
    margin-bottom: var(--ww-space-5);
    font-size: var(--ww-step-2);
  }

  .wl-side .checklist { display: grid; gap: var(--ww-space-3); }

  /* The tick is our affirmative mark and reads as "included". On the partner's
     column that is right; on ours it would imply we are listing their
     benefits, so that side gets a neutral bullet instead. */
  .wl-side--yours .checklist li::after { border-color: var(--ww-accent-deep); }
  .wl-side--yours .checklist li::before {
    background: var(--ww-green-50);
    box-shadow: inset 0 0 0 1px var(--ww-green-200);
  }

  /* -- Pricing pointer ------------------------------------------------------ */

  .wl-price__card {
    padding: var(--ww-space-8) var(--ww-space-7);
    text-align: center;
    background: var(--ww-teal-50);
    border: 1px solid var(--ww-teal-100);
    border-radius: var(--ww-radius-xl);
  }


  .wl-price__title {
    font-size: var(--ww-step-2);
  }

  .wl-price__body {
    max-width: 34rem;
    margin: var(--ww-space-4) auto var(--ww-space-6);
    color: var(--ww-body);
  }
}