/* =====================================================================
   SunnyAid — page alignment normalisation (9 Sep 2026)
   Six sections were built in parallel, so each settled on its own content axis. Measured at 1440 the
   homepage was using three: 80, 96 and 112. The majority axis (hero stats, why-now plates, the AI panel,
   the pricing header and grid, the closing panel) is 112..1328, i.e. a 76rem column centred in the page.
   This file puts every remaining block on that one column, and equalises the baselines inside each row.
   Loaded after the six area files, so it wins on source order at the same specificity.
   ===================================================================== */

html.sunnyaid { --sa-axis: 76rem; }  /* 1216px: the column every block shares */

/* ---------- 1. one content column ----------
   Each of these sat on its parent's edge (96 or 80). A max-width plus auto margins re-centres them
   inside whatever parent they have, which lands all of them on 112..1328 at 1440 without touching the
   parents themselves. */
/* One page container, resolved the same way at every width:
     - at >= ~1280 it is the 76rem column, so every block lands on 112..1328 at 1440
     - below that it is the viewport less a 32px gutter each side
   Centring happens inside each block's own parent, and because the formula is viewport-relative the
   result is the same left edge regardless of how much padding that parent happens to carry. Applied
   from 640 up; below that the page is one column and the shipped gutters are already consistent. */
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid #main .sa-gaps-head,
  html.luxe.sunlit.sunnyaid #main .sa-gaps-fig,
  html.luxe.sunlit.sunnyaid #main .sa-gaps-grid,
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-head,
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid,
  html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqgrid,
  html.luxe.sunlit.sunnyaid footer.footer-deep .sa-cf-top,
  html.luxe.sunlit.sunnyaid footer.footer-deep .sa-cf-cols {
    max-width: min(var(--sa-axis), calc(100vw - 4rem)) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  /* the stages grid is the hscroll track, which sizes to its content, so auto margins would centre it
     at 816px inside a 960px column instead of filling it */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { width: 100% !important; }
}

/* the FAQ heading column sat 16px inside the axis its own grid now uses */
html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead { padding-inline: 0; }

/* ---------- 2. baselines inside a row ----------
   Cards in a row are equal height (grid stretch), but a title that wraps to two lines pushed its own
   body down while its neighbours' stayed put. Reserving two lines on the title puts every body in the
   row on one baseline. `lh` is not safe here (Chromium 133+), so the reserve is computed from the
   element's own line-height. */
html.luxe.sunlit.sunnyaid #main .sa-gaps-card .sa-gaps-card__title {
  min-height: calc(2 * 1.25em);
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title {
  min-height: calc(2 * 1.3em);
}
@media (min-width: 1200px) {
  /* four across: "Getting found by people already looking." takes three lines where the others take two */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title { min-height: calc(3 * 1.3em); }
}
@media (max-width: 639px) {
  /* stacked: nothing to align to, so let short titles be short */
  html.luxe.sunlit.sunnyaid #main .sa-gaps-card .sa-gaps-card__title,
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title { min-height: 0; }
}

/* ---------- 3. the four stages read as one row ----------
   The build staggered whole stages by 2rem, which zig-zagged the photographs but also dropped every
   second title and body out of line. The owner asked for alignment, so the row is level: tiles, number
   discs, titles and bodies all share their line, and the dashed connector runs straight between them. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid > .sa-stages-aeo-stage:nth-of-type(2n) {
  margin-top: 0 !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { align-items: start; }

/* ---------- 4. why-now plates share a title block at every width ---------- */
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid #main .sa-whynow-plate > :is(h3, .sa-whynow-plate__title) {
    min-height: calc(2 * 1.25em);
  }
}

/* ---------- 5. footer column heads speak one colour ----------
   SERVICES / COMPANY / SUPPORT had drifted to the body tone while the brand column stayed yellow. */
html.luxe.sunlit.sunnyaid footer.footer-deep .sa-cf-coltitle {
  color: var(--sa-yellow-soft) !important;
}