/* ===========================================================================
   "EDGE" VARIANT - PREVIEW ONLY, loaded by preview-edge.html.
   Nothing here touches the shipped page.

   Option D from the accent board: the cards stay near-white and the accent
   appears as a BORDER and shadow, never as a fill. Jamie asked to see it beside
   the current filled-aqua treatment.

   ‼ `!important` is used deliberately and ONLY here. The sticky panels are
   painted by an INLINE `background:linear-gradient(...)` that the bake wrote
   into the markup, and an inline style cannot be beaten from a stylesheet any
   other way. That is acceptable in a throwaway preview whose whole job is to be
   compared and then thrown away; it must NOT be how the real change is made -
   the real change goes through the generator's `tint` map, exactly like the
   filled version did.

   Edge colour #01A8CC: the same aqua family as the current fill (hue ~190) but
   dropped in luminance so it reads as a line rather than a wash. Measured on the
   board at 4.31:1 against the near-white card it borders, which is the surface
   that matters for a border under WCAG 1.4.11.
   =========================================================================== */

:root {
  --edge: #01A8CC;
  --edge-card: #F4F7FC;
}

/* the four sticky "more reasons" panels: fill -> paper + edge */
.sticky [style*="linear-gradient"] {
  background: var(--edge-card) !important;
  box-shadow: inset 0 0 0 3px var(--edge) !important;
}

/* the content cards already sit near-white; give them the same edge so the
   treatment reads as one system rather than one section */
.bg-gradient-green-white {
  box-shadow: inset 0 0 0 2px var(--edge) !important;
}

/* the newsletter panel is the other large accent surface */
form.bg-primary,
.bg-primary:not(a):not(button) {
  box-shadow: inset 0 0 0 3px var(--edge) !important;
}