/* pages/contact.css — /contact, /selection, dealer login/portal (P6).
   Tokens only, mobile-first; components come from components.css. */

.contact-hero__text {
  margin-top: var(--sp-12);
  max-width: 44rem;
  color: var(--text-muted);
}

.contact-layout {
  align-items: start;
}
.contact-aside .contact-list {
  margin: 0;
}
.contact-aside .notice p {
  margin: 0;
}

.link-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list .link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tap);
}

.alert__list {
  margin: var(--sp-8) 0 0;
  padding-left: var(--sp-20);
}
.alert__list li + li {
  margin-top: var(--sp-4);
}

.contact-main .form-success,
.contact-main .form-card {
  scroll-margin-top: calc(var(--header-h) + var(--sp-16));
}
.contact-main .form-actions .note {
  max-width: 28rem;
}
.contact-required-note {
  display: block;
  margin-top: var(--sp-4);
}

/* Selection page */
.selection-clear {
  margin: 0;
}
.selection-item form {
  margin: 0 0 0 auto;
}
.selection-item__text a.mono {
  color: inherit;
}

/* Dealer area */
.auth-card__intro {
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}
.auth-card .form {
  gap: var(--sp-16);
}
.dealer-bar-wrap {
  padding-top: var(--sp-24);
}
.dealer-grid .contact-list {
  margin: 0;
}
.dealer-grid .btn-group,
.dealer-grid .link--arrow {
  margin-top: auto;
}
.dealer-stat {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text-brand);
}

/* Phones and small tablets: the form comes first, contact details after. */
@media (max-width: 819.98px) {
  .contact-main {
    order: -1;
  }
}