/* ============================================================
   90 — Closing CTA. Dark full-bleed band with a diagonal TOP edge
   cut at the same angle as the hero's bottom edge (same expression,
   opposite direction), so the page reads as bookended.
   ============================================================ */

.cta {
  /* Literally the hero's --hero-slant expression (10-hero.css). Both edges
     drop by the same number of px across the same viewport width, so the two
     diagonals mirror each other exactly at every breakpoint — the hero's
     bottom edge rises L→R, this top edge falls L→R. Do not fork this value. */
  --cta-cut: min(10.5vw, 150px);

  /* Slightly under the site's --section-y: this band is a conclusion, not a
     second hero, so it sits tighter than every other section by design. */
  --cta-pad: calc(var(--section-y) * .8);

  /* Local surface tokens, derived from --c-white so nothing is a literal. */
  --cta-rule:  color-mix(in srgb, var(--c-white) 12%, transparent);
  --cta-muted: color-mix(in srgb, var(--c-white) 68%, transparent);

  --cta-blob: clamp(300px, 40vw, 620px);

  position: relative;
  isolation: isolate;
  padding-block: calc(var(--cta-cut) + var(--cta-pad)) var(--cta-pad);
  /* Only ever seen as the 1px lit edge along the cut, so it is tinted rather
     than white — a white hairline vanishes into the white section above. */
  background: linear-gradient(102deg,
              color-mix(in srgb, var(--c-brand) 52%, transparent) 0%,
              color-mix(in srgb, var(--c-cyan)  58%, transparent) 54%,
              color-mix(in srgb, var(--c-teal)  42%, transparent) 100%);
  clip-path: polygon(0 0, 100% var(--cta-cut), 100% 100%, 0 100%);
  color: var(--text-invert-body);
}

/* Dark canvas clipped 1px down the same slope, revealing the tint above it. */
.cta__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden; /* clip-path clips paint, not layout — this stops the blobs widening the page */
  background: var(--grad-dark);
  clip-path: polygon(0 1px, 100% calc(var(--cta-cut) + 1px), 100% 100%, 0 100%);
}

/* ------------- Ambient wash — the hero's blobs, dialled down ------------- */
/* Same rendering model as .hero__blob: circles, screen blend, blur(72px),
   same-hue ramps. Three instead of five, and lower opacity. */

.cta__blob {
  position: absolute;
  width: var(--cta-blob);
  height: var(--cta-blob);
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(72px);
}

/* The end stop is 1% rather than 0% alpha: color-mix at 0% drops the hue and
   ramps toward black, which reads as grey haze under a screen blend. */
.cta__blob--brand {
  top: -22%; left: -10%;
  background: radial-gradient(circle at 50% 50%,
              var(--c-brand) 0%,
              color-mix(in srgb, var(--c-brand) 1%, transparent) 68%);
  opacity: .42;
  animation: cta-drift-a 34s var(--ease-inout) infinite alternate;
}

.cta__blob--cyan {
  top: -8%; right: -12%;
  width: calc(var(--cta-blob) * .86); height: calc(var(--cta-blob) * .86);
  background: radial-gradient(circle at 50% 50%,
              var(--c-cyan) 0%,
              color-mix(in srgb, var(--c-cyan) 1%, transparent) 66%);
  opacity: .22;
  animation: cta-drift-b 41s var(--ease-inout) infinite alternate;
}

.cta__blob--magenta {
  bottom: -34%; left: 18%;
  width: calc(var(--cta-blob) * .78); height: calc(var(--cta-blob) * .78);
  background: radial-gradient(circle at 50% 50%,
              var(--c-magenta) 0%,
              color-mix(in srgb, var(--c-magenta) 1%, transparent) 66%);
  opacity: .16;
  animation: cta-drift-a 47s var(--ease-inout) infinite alternate-reverse;
}

@keyframes cta-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -5%, 0) scale(1.09); }
}
@keyframes cta-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-5%, 4%, 0) scale(1); }
}

/* fine grain — identical to .hero__grain so the two bands match in texture */
.cta__grain {
  position: absolute;
  inset: 0;
  opacity: .04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Content ---------------- */

.cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta__title {
  color: var(--text-invert);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.cta__lead {
  /* width comes from the base `.measure-sm` primitive */
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-invert-body);
  text-wrap: pretty;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* Modifiers only — never restyle .btn itself. */
.btn--cta { padding-inline: var(--s-8); }
.btn--cta.btn--white { box-shadow: var(--sh-lg); }
.btn--cta.btn--white:hover { box-shadow: var(--sh-xl); }
/* the brand focus ring from base.css is only 3.3:1 on navy — go white here */
.btn--cta:focus-visible { outline-color: var(--c-white); }

.cta__chev {
  margin-right: calc(var(--s-1) * -1);
  transition: transform var(--t-fast) var(--ease-out);
}
.btn--cta:hover .cta__chev { transform: translateX(3px); }

/* ---------------- Reassurance row ---------------- */

.cta__assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 38rem ≈ the lead's 48ch measure at the desktop --fs-lead, so the rule
     ends where the copy above it ends rather than cutting the page in half */
  width: min(100%, 38rem);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--cta-rule);
}

.cta__assure-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--cta-muted);
  white-space: nowrap;
}

/* hairline dividers between items, never at the row's edges */
.cta__assure-item + .cta__assure-item {
  border-left: 1px solid var(--cta-rule);
}

.cta__assure-icon {
  flex: none;
  color: var(--c-teal);
}

/* ---------------- Small screens ---------------- */

@media (max-width: 900px) {
  /* smaller canvas → tighter blur so the colour still reads, as in the hero */
  .cta { --cta-blob: clamp(260px, 56vw, 460px); }
  .cta__blob { filter: blur(54px); }
}

@media (max-width: 640px) {
  .cta__actions { width: 100%; margin-top: var(--s-7); }
  .btn--cta { flex: 1 1 100%; }
  /* stack the reassurances; the vertical hairlines make no sense stacked */
  .cta__assure {
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-7);
  }
  .cta__assure-item { padding-inline: 0; }
  .cta__assure-item + .cta__assure-item { border-left: 0; }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .cta__blob { animation: none; }
  .cta__chev { transition: none; }
}