/* ============================================================
   site-consistency.css — cross-page baseline (Phase 1)
   Loaded AFTER polish.css on every page so it overrides the legacy
   per-section rules. Ensures footer + newsletter sit at the same
   gutter on every page (home + inner) at every breakpoint.
   ============================================================ */

/* Zero the default body margin/padding everywhere. Some pages (e.g.
   product.html) reset this via product.css; the homepage didn't, so
   .footer sat 8px inset from the viewport on index but flush on inner
   pages → 8px brand-position drift. */
html body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer: 24px inner gutter on every page, max 1180 wide centred,
   no top border. */
body footer.footer {
  width: min(1220px, 100%) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  border-top: 0 !important;
  box-sizing: border-box;
}

/* Site header: keep the 1px border-bottom but drop polish.css's soft
   double-shadow so the divider reads as a clean single 1px line. */
body .site-header {
  box-shadow: none !important;
}

/* Bento card body text used polish.css's --uic-muted (rgb 107,107,117)
   which is lighter than the design's body color rgba(0,0,0,0.65).
   Match the design body so the feature copy reads the same as the
   hero subtitle and other body paragraphs. */
body .uic-bento-tile p {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* Newsletter: rounded purple card with 32px outer gutter at every
   width and responsive inner padding so the heading + form breathe. */
body section.newsletter {
  width: min(1220px, calc(100% - 64px)) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
  box-sizing: border-box !important;
}