/* S9 · Final CTA (SITE-27): Jurni's banner (spec §5 "CTA banner": radius 12, 40px padding, a white serif headline with
   an italic second line, a white 200×41 button with radius 4). Ours: SITE-20's .banner (radius 14, the system's), the
   Bolton headline with the serif-italic accent, the system's white button. The pre-dithered field is cta.js's canvas. */
[data-section="cta"] { padding-block: clamp(var(--s-12), 24px + 4vw, var(--s-20)) clamp(var(--s-10), 16px + 3vw, var(--s-16)); }
.cta__banner {
  display: grid; place-items: center; text-align: center;
  min-height: 340px; /* Jurni: 295 at 1248 wide; ours carries one more line */
  padding: clamp(40px, 28px + 2.4vw, 56px) var(--inset);
}
/* The field: 2 CSS px a cell, stretched without smoothing so each cell is a crisp 2×2 (4×4 at DPR 2) block. */
.cta__banner > .cta__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity 400ms var(--ease-out); }
.cta__banner > .cta__field.is-drawn { opacity: 1; }
.cta__banner > .sky { z-index: 0; }
/* Without WebGL the system's tiled card still would show its tile edge here; the pre-dithered canvas carries the look. */
.cta__banner > .sky.sky--fallback { display: none; }
.cta__copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-4); max-width: 40rem; }
.cta__title { color: var(--on-dark); letter-spacing: var(--track-display); line-height: 1.04; }
.cta__title:not(.cta__title--display) .accent { display: block; line-height: 1.04; margin-top: .02em; }
/* The home line, as the lab's specimen: display size, centred, three lines ("Marketing / at the speed / of shipping."),
   the orange accent running across the break. On the banner the accent is the orange lifted toward its soft step
   (both tokens: 34% orange), so it still reads as the orange italic while keeping ≥ 3:1 (display size) on the rust behind it. */
.cta__title--display { max-width: none; line-height: var(--lh-display); letter-spacing: var(--track-display); text-wrap: wrap; }
.cta__title--display .accent { color: color-mix(in oklab, var(--orange) 34%, var(--orange-soft)); }
.cta__sub { font-size: var(--t-lead); line-height: 1.45; color: var(--on-dark); letter-spacing: -.015em; max-width: 30em; text-wrap: balance; }
.cta__btn { margin-top: var(--s-4); min-width: 200px; height: 48px; font-size: 16px; }
.cta__note { margin: var(--s-4) auto 0; max-width: 46em; text-align: center; font-size: var(--t-small); line-height: 1.5; color: var(--ink-58); text-wrap: balance; }

@media (max-width: 600px) {
  .cta__banner { min-height: 0; padding-block: 48px 44px; }
  .cta__btn { width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { .cta__field { transition: none; } }