/* Support / contact page (Figma 281:568) — shares tokens, bands, nav, FAQ and footer with the other pages */

/* ---- hero + form ---------------------------------------------------- */
.contact .band__stage { overflow: hidden; }
.contact__map {                                   /* dotted world map behind the form (Figma "Pattern" 282:3252) */
  position: absolute; left: calc(50% + 4.5px); top: 478px; width: 1016px; height: 478px; transform: translateX(-50%);
  background: url("../assets/contact/map.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.contact__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--section-y) var(--gx);
}
.contact__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.contact__title { font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }   /* page H1 = display size on every page */
.contact__title .t-h2--regular { font-weight: 500; }
.contact__q { color: var(--color-primary); }
.contact__sub { max-width: 466px; margin: 0; letter-spacing: -.011em; color: #5c5c5c; }

.contact__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 720px; margin-top: 30px; }
.contact-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
  border-radius: 96px; background: #fff;
  font: 500 14px/20px var(--font-ui); letter-spacing: -.084px; color: #171717;
  transition: transform .3s cubic-bezier(.19, 1, .22, 1), box-shadow .3s ease;
}
.contact-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(23, 23, 23, .25); }
.contact-badge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.contact-badge__icon {
  display: grid; place-items: center; padding: 8px; border-radius: 96px; background: var(--color-bg);
  box-shadow: 0 3px 3px -1.5px rgba(23,23,23,.06), 0 1px 1px -.5px rgba(23,23,23,.06), 0 0 0 1px rgba(23,23,23,.02);
}
.contact-badge__icon img { display: block; }

.contact-form {
  display: flex; flex-direction: column; gap: 24px;
  width: min(440px, 100%); margin-top: 40px; padding: 32px;
  border-radius: 24px; background: #fff;
  box-shadow: 0 20px 20px -10px rgba(23,23,23,.04), 0 10px 10px -5px rgba(23,23,23,.04), 0 6px 6px -3px rgba(23,23,23,.04),
              0 3px 3px -1.5px rgba(23,23,23,.04), 0 1px 1px -.5px rgba(23,23,23,.04), 0 0 0 1px rgba(23,23,23,.08),
              inset 0 -1px 1px -.5px rgba(23,23,23,.06);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: -8px; }              /* 16px between fields, 24px before the consent row */
.field__label { font: 400 14px/20px var(--font-ui); letter-spacing: -.084px; color: #5c5c5c; }
.field__box {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: #fff;
  box-shadow: 0 3px 3px -1.5px rgba(23,23,23,.04), 0 1px 1px -.5px rgba(23,23,23,.04), 0 0 0 1px rgba(23,23,23,.08);
  transition: box-shadow .2s ease;
}
.field__box:focus-within { box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px rgba(35, 92, 251, .15); }
.field__box > img { flex: none; display: block; }
.field__box input, .field__box select, .field__box textarea {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: 400 14px/20px var(--font-ui); letter-spacing: -.084px; color: #171717;
}
.field__box input::placeholder, .field__box textarea::placeholder { color: #a3a3a3; opacity: 1; }
.field__box--select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 24px; }
.field__box--select select:invalid { color: #a3a3a3; }
.field__box--select option { color: #171717; }
.field__chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field__box--area { align-items: flex-start; height: 104px; padding: 12px 16px; border-radius: 14px; }
.field__box--area textarea { align-self: stretch; resize: none; }
.contact-form.was-validated .field__box:has(:invalid) { box-shadow: 0 0 0 1px #d6336c, 0 0 0 4px rgba(214, 51, 108, .12); }

.contact-form__consent { display: flex; align-items: center; gap: 12px; font: 400 14px/20px var(--font-ui); letter-spacing: -.084px; color: #5c5c5c; cursor: pointer; }
.contact-form__consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3' width='14' height='14' rx='4' fill='%23ebebeb'/%3E%3Crect x='4.5' y='4.5' width='11' height='11' rx='2.6' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.contact-form__consent input:checked { background-image: url("../assets/contact/check.svg"); }
.contact-form__consent input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.contact-form__consent a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.contact-form__consent a:hover { color: var(--color-primary); }
.contact-form__submit { width: 100%; justify-content: center; }
.contact-form__status { margin: -8px 0 0; font: 400 14px/20px var(--font-ui); text-align: center; color: #5c5c5c; }
.contact-form__status.is-error { color: #d6336c; }

/* ---- FAQ closing line ------------------------------------------------ */
.faq__stuck { width: min(808px, 100%); margin: 32px 0 0; text-align: center; font: 400 16px/24px var(--font-ui); color: var(--color-text); }
.faq__stuck a { font-weight: 500; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.faq__stuck a:hover { color: var(--color-primary); }

@media (max-width: 1023px) {
  .contact__map { top: auto; bottom: 40px; width: min(1016px, 150%); height: auto; aspect-ratio: 1016 / 478; }
}
@media (max-width: 599px) {
  .contact-form { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .contact-badge { transition: none; } }