/* SECTION 11: closing CTA (agent D, v14, 2026-10-01). Every selector starts with .cta.
   A calm evergreen finale in the hero's palette (base #081511, teal rgb(13,77,69) and gold light from the hero
   shader, the same grain), without the WebGL. Geometry = the footer card's (8 px inset, 16 px radius), and the
   footer is pulled up to an 8 px seam, so the CTA and the footer read as one dark block, like Sola's CTA+footer.

   Footer seam: .foot's margin-top is the token --foot-gap (sections.css: 96 px, 64 px under 810). It collapses
   through .foot-wrap and main, so a negative bottom margin here sets the gap: 8 px = gap + (8 - gap).
   Integrator (v14): this file reads the same token, so changing the footer gap needs no edit here. */

.cta {
  --cta-seam: 8px;           /* = .foot-wrap padding, the footer's own inset */
  --focus-ring: var(--brand-accent);
  padding: 0 8px;
  margin-bottom: calc(var(--cta-seam) - var(--foot-gap, 96px));
}

.cta .cta-panel {
  position: relative; isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background: var(--brand-deep);
  color: var(--token-white);
}

/* ---- ground: warm light from above, evergreen-teal from the lower corners, grain ---- */
.cta .cta-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta .cta-light {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(8, 21, 17, 0) 62%, rgba(8, 21, 17, .55)),
    radial-gradient(56% 72% at 50% -12%, rgba(242, 201, 121, .17), rgba(242, 201, 121, 0) 72%),
    radial-gradient(48% 78% at -4% 104%, rgba(13, 77, 69, .55), rgba(13, 77, 69, 0) 70%),
    radial-gradient(48% 78% at 104% 104%, rgba(13, 77, 69, .42), rgba(13, 77, 69, 0) 70%);
}
.cta .cta-grain {
  position: absolute; inset: 0;
  opacity: .16; mix-blend-mode: overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the gold accent: one hairline of light along the top edge */
.cta .cta-panel::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: 1;
  background: linear-gradient(90deg, rgba(242, 201, 121, 0), rgba(242, 201, 121, .6) 50%, rgba(242, 201, 121, 0));
  pointer-events: none;
}

/* ---- content ---- */
.cta .cta-inside {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 136px 32px 144px;
  text-align: center;
}
.cta .cta-mark { width: 28px; height: 28px; margin-bottom: 28px; }
.cta .cta-mark path { fill: var(--brand-accent); }
.cta .cta-title {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-serif);
  font-size: 48px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--token-white);
  text-wrap: balance;
}
.cta .cta-form { margin-top: 40px; }
.cta .lookup-msg { text-align: center; }
.cta .cta-mail {
  margin-top: 20px;
  font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -0.03em;
  color: var(--token-grey-d1);
}

/* ---------------- Tablet (810-1199) ---------------- */
@media (max-width: 1199px) {
  .cta .cta-inside { padding: 112px 32px 120px; }
  .cta .cta-title { font-size: 42px; max-width: 600px; }
}

/* ---------------- Phone (<810) ---------------- */
@media (max-width: 809px) {
  .cta .cta-inside { padding: 80px 20px 88px; }
  .cta .cta-mark { width: 24px; height: 24px; margin-bottom: 22px; }
  .cta .cta-title { font-size: 32px; }
  .cta .cta-form { margin-top: 28px; max-width: 420px; }
  /* the field and the gold button stack (same as the hero form on phones) */
  .cta .lookup-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta .lookup .btn-pill, .cta .lookup .btn-mint:hover, .cta .lookup .btn-mint:focus-visible { width: 100%; padding: 0 20px; }
  .cta .lookup-input { text-align: center; padding: 0 16px; }
  .cta .cta-panel::before { left: 6%; right: 6%; }
}