/* ==========================================================================
   contact.css - the Contact page: blue hero band, intro column and form card.
   Loaded after components.css. Uses only design tokens from variables.css.
   ========================================================================== */

/* ---------- Hero band ----------------------------------------------------- */
.contact-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 90px);
  padding-bottom: var(--sp-13);
  background: var(--g-hero-diag);
  color: var(--c-white);
  text-align: center;
}

.contact-hero__ring {
  position: absolute;
  border: var(--bw-base) solid var(--c-white-a22);
  border-radius: var(--r-circle);
  z-index: var(--z-below);
}

.contact-hero__ring--1 {
  width: 320px;
  height: 320px;
  top: -120px;
  left: -80px;
}

.contact-hero__ring--2 {
  width: 220px;
  height: 220px;
  right: -60px;
  bottom: -90px;
}

.contact-hero__eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-white-a77);
  margin-bottom: var(--sp-4);
}

.contact-hero__title {
  color: var(--c-white);
  font-size: var(--fs-display-md);
  margin-bottom: var(--sp-5);
}

.contact-hero__lede {
  font-family: var(--ff-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--c-white-a77);
  max-width: 720px;
  margin-inline: auto;
}

/* ---------- Two-column body ----------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-12);
  align-items: start;
}

.contact__intro-title {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-5);
}

.contact__intro-text {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--c-ink-600);
  margin-bottom: var(--sp-8);
}

.contact__points {
  display: grid;
  gap: var(--sp-6);
}

.contact__point {
  display: grid;
  gap: var(--sp-1);
  padding-left: var(--sp-5);
  border-left: var(--bw-heavy) solid var(--c-blue-600);
}

.contact__point-title {
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.contact__point-desc {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--c-ink-500);
}

/* ---------- Form card ----------------------------------------------------- */
.contact__panel {
  padding: var(--sp-9);
  background-color: var(--c-white);
  border: var(--bw-hairline) solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.contact-form {
  display: grid;
  gap: var(--sp-6);
}

.contact-form__summary:not(:empty) {
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw-hairline) solid var(--c-pink);
  border-radius: var(--r-xs);
  background-color: var(--c-pink-a11);
  color: var(--c-ink);
  font-size: var(--fs-sm);
}

.contact-form__summary ul {
  margin: 0;
  padding-left: var(--sp-5);
}

/* Form field styles (.field, .field__input, .field__error, ...) live in
   components.css now - they are shared with the Book a demo modal. */

/* Team size + interested plan sit two-up on a row, stacking on small screens. */
.contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 560px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

/* Honeypot: off-screen, not display:none, so it still posts. */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__consent {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--c-ink-500);
}

.contact-form__consent a {
  color: var(--c-blue-700);
  text-decoration: underline;
}

.contact-form__submit {
  justify-self: start;
}

/* ---------- Success state ------------------------------------------------- */
.contact__success {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
  padding-block: var(--sp-6);
}

.contact__success-mark {
  width: 72px;
  height: 72px;
  border-radius: var(--r-circle);
  background-color: var(--c-green-tint);
  position: relative;
}

.contact__success-mark::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 14px;
  height: 26px;
  border: solid var(--c-green-400);
  border-width: 0 var(--bw-heavy) var(--bw-heavy) 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.contact__success-title {
  font-size: var(--fs-h4);
}

.contact__success-text {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  color: var(--c-ink-600);
  max-width: 420px;
}

.contact__success .btn {
  margin-top: var(--sp-3);
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-9);
  }
}

@media (max-width: 480px) {
  .contact__panel {
    padding: var(--sp-6);
  }
}