/* cta — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* On the primary-coloured band the button is the band's INK, not the page
   background: with a dark palette --bg and --primary are both near black,
   and the call to action would read as plain text. */
.cta--band .btn { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--primary); }
.cta--band .btn:hover { background: color-mix(in srgb, var(--primary-ink) 88%, var(--primary)); }

/* ---------- CTA section (sections/cta) ---------- */
.cta--band {
  background: var(--primary);
  color: var(--primary-ink);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.cta--plain { padding: clamp(3rem, 6vw, 5rem) 0; }