/* Final CTA — ink band, form split, the hero pair returns to close the page. */

.cta {
  position: relative;
  padding-block: var(--section-gap);
  background: var(--surface-ink);
  color: var(--text-on-ink);
  overflow: hidden;
}

.cta__inner {
  display: grid;
  gap: var(--section-gap-tight);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.cta__title { max-width: var(--measure-h2); }

.cta__lead {
  margin-top: var(--space-md);
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  color: var(--text-on-ink-secondary);
}

.form { margin-top: var(--space-2xl); display: grid; gap: var(--space-md); }

.form__row { display: grid; gap: var(--space-md); }

.field { display: grid; gap: var(--space-2xs); }

.field__label {
  font-family: var(--font-data);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-ink-secondary);
}

.field__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-ink-raised);
  color: var(--text-on-ink);
  border: var(--border-on-ink);
  border-radius: var(--radius-control);
  font-family: var(--font-data);
  font-size: var(--text-data);
  /* Safari and Firefox draw their own control for <select> otherwise: a light native
     pill and a native arrow, sitting in a column of dark fields. */
  -webkit-appearance: none;
  appearance: none;
}

/* The arrow the reset removed, redrawn in the accent. Inline SVG in a data URI is the one
   place a literal colour is unavoidable — a custom property cannot be interpolated into
   a url() — so it is the accent value and it is named here. */
select.field__input {
  padding-right: var(--space-2xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F25E92' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 12px 8px;
}

textarea.field__input { resize: vertical; }

/* iOS Safari zooms the page when a field below 16px takes focus. */
@media (pointer: coarse) {
  .field__input { font-size: var(--text-body); }
}

.field__input:focus-visible { box-shadow: var(--shadow-focus-on-ink); }

/* Invalid marks itself with the accent edge, not a new shadow: there is no token for
   an inset error shadow and fe-builder does not invent values. */
.form.is-validated .field__input:invalid {
  border-color: var(--accent-on-ink);
  border-left: var(--border-datum-on-ink);
}

.field__input:disabled { background: var(--surface-ink); color: var(--text-on-ink-secondary); cursor: not-allowed; }

.form__done {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  border: var(--border-on-ink);
  border-left: var(--border-datum-on-ink);
  border-radius: var(--radius-card);
  color: var(--text-on-ink-secondary);
}

.form__done-lead {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-size: var(--text-h4);
  color: var(--text-on-ink);
  margin-bottom: var(--space-sm);
}

.form__done-note {
  margin-top: var(--space-md);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-on-ink-secondary);
}

.form__fine {
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-on-ink-secondary);
}

.cta__stage { position: relative; }

.cta__stage .plate--before {
  width: var(--plate-before-w-card);
  margin-top: calc(-1 * var(--space-4xl));
  margin-left: var(--space-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-plate-on-ink);
}

@media (min-width: 640px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cta__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  /* The stage bleeds off the right edge on purpose. The band already clips it with
     overflow: hidden at the top of this file, which is why the document does not have to
     — and the document must stay unclipped, for sticky and for paint cost. */
  .cta__stage { margin-right: calc(-1 * var(--container-pad) - 4vw); }

  .cta__stage .plate--before {
    position: absolute;
    left: calc(-1 * var(--space-2xl));
    bottom: calc(-1 * var(--space-2xl));
    margin: 0;
  }
}