/* /veterans and /representatives (docs/website/landing/landing.mjs). Loads
   after /resources/site.css and uses its .az-prose; every value is a token
   from tokens.css (--az-res-*) or the mirrored site (--hx-*). */

/* Netiva's field and error classes set display, which would beat [hidden]. */
.az-lp-section[hidden], .az-lp-notify [hidden] { display: none !important; }

/* Hero and closing CTAs: stacked full width on phones, one row from 640px. */
.az-lp-ctas { display: flex; flex-direction: column; gap: var(--az-res-gap-m); margin-top: var(--az-res-gap-xl); }
.az-lp-ctas > a { justify-content: center; }
@media (min-width: 640px) {
  .az-lp-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

.az-lp-h2 { margin: 0; max-width: var(--az-res-measure); font-family: var(--az-res-font-display); font-size: var(--az-res-h2-size);
  font-weight: var(--az-res-heading-weight); line-height: var(--az-res-heading-lh); letter-spacing: var(--hx-h2-tracking);
  color: var(--az-res-ink); text-wrap: balance; }
/* Back-to-back light sections read as one canvas: no doubled padding between them. */
.az-lp-section:not([hidden]) + .az-lp-section { padding-top: 0; }
.az-lp-section .az-prose { margin-top: var(--az-res-gap-l); }
.az-lp-section .az-prose:first-child { margin-top: 0; }

/* Numbered steps and the three representative types: one column on phones,
   two from 768px, one row from 1024px. */
.az-lp-steps, .az-lp-types { display: grid; gap: var(--az-res-gap-m); margin: var(--az-res-gap-xl) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .az-lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .az-lp-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .az-lp-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.az-lp-step, .az-lp-type { margin: 0; padding: var(--az-res-gap-l); border: var(--az-res-hairline) solid var(--az-res-border);
  border-radius: var(--az-res-radius); background: var(--az-res-surface); color: var(--az-res-ink-body);
  font-size: var(--az-res-size-body); line-height: var(--az-res-prose-lh); }
.az-lp-step-n { display: inline-flex; align-items: center; justify-content: center; width: var(--az-res-tap-min); height: var(--az-res-tap-min);
  border-radius: var(--az-res-radius-pill); background: var(--az-res-brand-tint-strong); color: var(--az-res-ink);
  font-family: var(--az-res-font-display); font-weight: var(--az-res-heading-weight); }
.az-lp-step-title { margin: var(--az-res-gap) 0 0; font-family: var(--az-res-font-display); font-size: var(--az-res-card-title-size);
  font-weight: var(--az-res-heading-weight); line-height: var(--az-res-heading-lh); color: var(--az-res-ink); }
.az-lp-type .az-lp-step-title { margin-top: 0; }
.az-lp-step p, .az-lp-type p { margin: var(--az-res-gap-s) 0 0; }

/* Notify me: the contact page's card, one column at every width. */
.az-lp-notify { max-width: var(--az-res-measure); }
.az-lp-notify-form { margin-top: var(--az-res-gap-l); }
.az-lp-notify-form > * + * { margin-top: var(--az-res-gap-l); }
/* The live region stays in the tree (so its sentence is announced) but takes no space while empty. */
.az-lp-notify-result:not(:has(> :not([hidden]))) { margin-top: 0; }
.az-lp-notify-fields { display: grid; gap: var(--az-res-gap-l); }
.az-lp-notify-fields > p { margin: 0; }
.az-lp-notify-note { margin: 0; padding: var(--az-res-gap-m) var(--az-res-gap); border: var(--az-res-hairline) solid var(--az-res-reps-border);
  border-radius: var(--az-res-radius-sm); background: var(--az-res-reps-tint); color: var(--az-res-ink);
  font-size: var(--az-res-size-small); line-height: var(--az-res-prose-lh); }
.az-lp-notify-note--covered { border-color: var(--az-res-veterans-border); background: var(--az-res-veterans-tint); }
/* Never the primary: the site's ghost button, outlined so it reads as a button. */
.az-lp-notify-btn { justify-self: start; border: var(--az-res-hairline) solid var(--hx-blue-on-light); }
.az-lp-notify-done { margin: var(--az-res-gap-l) 0 0; font-weight: var(--az-res-strong-weight); color: var(--az-res-ink); }

/* The closing band: the homepage's "Two ways in" canvas, centred. */
.az-lp-closing .hx-shell { text-align: center; }
.az-lp-closing .az-lp-ctas { justify-content: center; }