/* ==========================================================================
   Prestige Rides — page styles
   Layout glue for the marketing page. Everything here is built from the
   design-system custom properties; no colours or sizes are invented.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: #181918;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes prRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

[hidden] { display: none !important; }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link ---------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--pr-space-md);
  top: -4rem;
  z-index: 100;
  padding: var(--pr-space-sm) var(--pr-space-md);
  background: var(--pr-color-gold-base);
  color: var(--pr-color-text-on-gold);
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  border-radius: var(--pr-radius-sm);
  text-decoration: none;
  transition: top var(--pr-duration-base) var(--pr-ease-standard);
}
.skip-link:focus { top: var(--pr-space-md); }

/* Fixed masthead ----------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(24, 25, 24, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background var(--pr-duration-slow) var(--pr-ease-standard),
              border-color var(--pr-duration-slow) var(--pr-ease-standard);
  /* Tighten the header's own rhythm without touching the page scale. */
  --pr-color-surface-base: transparent;
  --pr-space-lg: .9rem;
  --pr-space-xl: 1.1rem;
}

.site-header.is-scrolled {
  background: rgba(18, 19, 18, .96);
  border-bottom-color: rgba(255, 255, 255, .09);
}

.site-header .pr-header__drawer { background: rgba(18, 19, 18, .98); }

/* Hero band ---------------------------------------------------------------- */

.hero-band {
  position: relative;
  overflow: hidden;
  background: #121312;
  /* The photo carries the depth here; the Hero's own scrim would double it. */
  --pr-color-surface-sunken: transparent;
}

.hero-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-band__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(18, 19, 18, .96) 0%,
    rgba(18, 19, 18, .88) 38%,
    rgba(18, 19, 18, .45) 72%,
    rgba(18, 19, 18, .25) 100%
  );
}

@media (max-width: 48em) {
  /* On narrow screens the copy sits over the middle of the frame, not the edge. */
  .hero-band__wash {
    background: linear-gradient(
      180deg,
      rgba(18, 19, 18, .9) 0%,
      rgba(18, 19, 18, .82) 55%,
      rgba(18, 19, 18, .94) 100%
    );
  }
}

.hero-band__content { position: relative; z-index: 2; }

/* The masthead is fixed and overlays the band, so the hero owes it clearance
   on top of its own vertical rhythm. */
.hero-band .pr-hero { padding-top: calc(var(--pr-space-4xl) + 4.75rem); }

.hero-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--pr-space-lg);
  margin-top: var(--pr-space-2xl);
  padding-top: var(--pr-space-lg);
  border-top: 1px solid var(--pr-color-border-subtle);
  max-width: 760px;
}

.hero-point {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-point__title {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  letter-spacing: .02em;
  color: var(--pr-color-text-gold);
}

.hero-point__note {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-muted);
}

/* Interior page header ------------------------------------------------------
   Interior pages have no hero band, so this owes the fixed masthead the same
   clearance the hero gives it. */

.page-head {
  padding-top: calc(var(--pr-space-3xl) + 4.75rem);
  padding-bottom: var(--pr-space-3xl);
  background: var(--pr-color-surface-sunken);
  border-bottom: 1px solid var(--pr-color-border-subtle);
}

.page-head .pr-heading__title { max-width: 24ch; }

.page-head__crumb {
  display: block;
  margin-bottom: var(--pr-space-md);
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pr-color-text-muted);
}

.page-head__crumb a { color: var(--pr-color-text-muted); text-decoration: none; }
.page-head__crumb a:hover { color: var(--pr-color-text-gold); }

/* Contact details ----------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pr-space-lg);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2xs);
}

.contact-card__label {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  text-transform: uppercase;
  letter-spacing: var(--pr-text-eyebrow-tracking);
  color: var(--pr-color-text-gold);
}

.contact-card__value {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  color: var(--pr-color-text-primary);
  text-decoration: none;
}

a.contact-card__value:hover { color: var(--pr-color-text-gold); }

.contact-card__note {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-muted);
}

/* Shared layout helpers ---------------------------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pr-space-md);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pr-space-lg);
  margin-top: var(--pr-space-2xl);
}

.card-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--pr-space-3xl);
  align-items: center;
}

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  background: var(--pr-color-surface-sunken);
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame--portrait { aspect-ratio: 4 / 5; min-height: 380px; }
.media-frame--landscape { aspect-ratio: 5 / 4; min-height: 320px; }

.u-mt-xl { margin-top: var(--pr-space-xl); }
.u-mt-2xl { margin-top: var(--pr-space-2xl); }

/* Fleet -------------------------------------------------------------------- */

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--pr-space-lg);
  margin-top: var(--pr-space-2xl);
}

.fleet-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fleet-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--pr-color-surface-sunken);
  overflow: hidden;
  flex: none;
}

/* Absolute, so a photo's intrinsic size can never win over the aspect ratio
   and leave one card in the row taller than its neighbours. */
.fleet-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Stock preview shots are daylight snapshots; a light grade keeps them from
     fighting the dark palette until the real photography lands. */
  filter: saturate(.82) contrast(1.06) brightness(.9);
}

.fleet-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-md);
  padding: var(--pr-space-xl);
  flex: 1;
}

.fleet-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fleet-card__eyebrow {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  text-transform: uppercase;
  letter-spacing: var(--pr-text-eyebrow-tracking);
  color: var(--pr-color-text-gold);
}

.fleet-card__name {
  margin: 0;
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h3-size);
  line-height: var(--pr-text-h3-line);
  font-weight: var(--pr-weight-regular);
  color: var(--pr-color-text-primary);
}

.fleet-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pr-space-md);
  padding-block: var(--pr-space-md);
  border-block: 1px solid var(--pr-color-border-subtle);
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec__label {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--pr-color-text-muted);
}

.spec__value {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  color: var(--pr-color-text-secondary);
}

.spec__note {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  color: var(--pr-color-text-muted);
}

.fleet-card__amenities {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-xs);
  flex: 1;
}

.fleet-card__amenities .spec__value { font-weight: var(--pr-weight-light); }

/* Airport detail list ------------------------------------------------------ */

.detail-list {
  display: grid;
  gap: var(--pr-space-md);
  margin-top: var(--pr-space-xl);
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail__title {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  color: var(--pr-color-text-primary);
}

.detail__note {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-secondary);
}

.detail--pending { opacity: .72; }
.detail--pending .detail__title { color: var(--pr-color-text-muted); }

/* How it works ------------------------------------------------------------- */

.step-card__num {
  display: block;
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h2-size);
  line-height: 1;
  color: var(--pr-color-text-gold);
}

.step-card__title {
  margin: var(--pr-space-sm) 0 var(--pr-space-xs);
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h3-size);
  font-weight: var(--pr-weight-regular);
  color: var(--pr-color-text-primary);
}

.step-card__text {
  margin: 0;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  line-height: var(--pr-text-body-line);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-secondary);
}

/* Reviews ------------------------------------------------------------------ */

.review-card__quote {
  margin: 0 0 var(--pr-space-md);
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  line-height: var(--pr-text-body-line);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-muted);
}

.review-card__source {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  color: var(--pr-color-text-muted);
}

/* FAQ ---------------------------------------------------------------------- */

.faq-list {
  display: grid;
  gap: var(--pr-space-sm);
  margin-top: var(--pr-space-2xl);
}

.faq-item {
  border: 1px solid var(--pr-color-border-subtle);
  border-radius: var(--pr-radius-md);
  background: var(--pr-color-surface-raised);
  padding: var(--pr-space-lg);
}

.faq-item[open] { border-color: var(--pr-color-border-gold); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pr-space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h3-size);
  line-height: var(--pr-text-h3-line);
  color: var(--pr-color-text-primary);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--pr-font-body);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--pr-color-gold-base);
}

.faq-item[open] summary::after { content: "\2013"; }

.faq-item p {
  margin: var(--pr-space-sm) 0 0;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  line-height: var(--pr-text-body-line);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-secondary);
}

/* Closing CTA -------------------------------------------------------------- */

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pr-space-md);
}

.cta-block__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h1-size);
  line-height: var(--pr-text-h1-line);
  font-weight: var(--pr-weight-regular);
  color: var(--pr-color-text-on-gold);
}

.cta-block__lead {
  margin: 0;
  max-width: 52ch;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-lg-size);
  line-height: var(--pr-text-body-lg-line);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-on-gold);
  opacity: .82;
}

/* ==========================================================================
   Quote request form
   ========================================================================== */

.quote-shell {
  margin-top: var(--pr-space-2xl);
  max-width: 820px;
  margin-inline: auto;
}

.quote-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pr-space-md);
  padding-block: var(--pr-space-xl);
  animation: prRise 400ms var(--pr-ease-standard) both;
}

.quote-success__eyebrow {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  text-transform: uppercase;
  letter-spacing: var(--pr-text-eyebrow-tracking);
  color: var(--pr-color-text-gold);
}

.quote-success__title {
  margin: 0;
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h2-size);
  line-height: var(--pr-text-h2-line);
  font-weight: var(--pr-weight-regular);
  color: var(--pr-color-text-primary);
}

.quote-success__text {
  margin: 0;
  max-width: 52ch;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-lg-size);
  line-height: var(--pr-text-body-lg-line);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-secondary);
}

/* Honeypot — off-screen, never focusable by tab order. */
.quote-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Step rail ---------------------------------------------------------------- */

.quote-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pr-space-xs);
  margin: 0 0 var(--pr-space-2xl);
  padding: 0;
  list-style: none;
}

.quote-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pr-space-2xs);
  text-align: center;
}

.quote-step__rail {
  display: flex;
  align-items: center;
  gap: var(--pr-space-2xs);
  width: 100%;
}

.quote-step__rule {
  height: 1px;
  flex: 1;
  background: var(--pr-color-border-subtle);
}

.quote-step__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pr-radius-pill);
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  border: 1px solid var(--pr-color-border-default);
  background: transparent;
  color: var(--pr-color-text-muted);
  transition: background var(--pr-duration-base) var(--pr-ease-standard),
              border-color var(--pr-duration-base) var(--pr-ease-standard),
              color var(--pr-duration-base) var(--pr-ease-standard);
}

.quote-step.is-done .quote-step__dot {
  border-color: var(--pr-color-gold-base);
  color: var(--pr-color-text-gold);
}

.quote-step.is-active .quote-step__dot {
  border-color: var(--pr-color-gold-base);
  background: var(--pr-color-gold-base);
  color: var(--pr-color-text-on-gold);
}

.quote-step__label {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pr-color-text-muted);
}

.quote-step.is-active .quote-step__label { color: var(--pr-color-text-gold); }

/* Panels ------------------------------------------------------------------- */

.quote-panel { display: grid; gap: var(--pr-space-xl); }
.quote-panel--tight { gap: var(--pr-space-lg); }
.quote-panel:not([hidden]) { animation: prRise 300ms var(--pr-ease-standard) both; }

.quote-fieldset { border: 0; margin: 0; padding: 0; }

.quote-legend {
  padding: 0 0 var(--pr-space-sm);
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  color: var(--pr-color-text-primary);
}

.quote-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-xs);
}

.quote-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pr-space-lg);
}

.quote-row--wide { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.quote-group {
  display: grid;
  gap: var(--pr-space-md);
  padding: var(--pr-space-lg);
  border: 1px solid var(--pr-color-border-subtle);
  border-radius: var(--pr-radius-md);
  background: var(--pr-color-surface-sunken);
}

.quote-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-sm);
}

.quote-group__title {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  color: var(--pr-color-text-primary);
}

.quote-group__toggles { display: flex; gap: var(--pr-space-2xs); }

.quote-subgrid { display: grid; gap: var(--pr-space-md); }

.quote-checkbox {
  display: flex;
  align-items: center;
  gap: var(--pr-space-sm);
  cursor: pointer;
}

.quote-checkbox input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--pr-color-gold-base);
}

.quote-checkbox span {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-text-secondary);
}

.quote-hint-auto {
  margin: var(--pr-space-2xs) 0 0;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  line-height: 1.5;
  color: var(--pr-color-text-gold);
}

.quote-stop-toggle { display: flex; justify-content: center; }

/* Address combobox --------------------------------------------------------- */

.combo { position: relative; }

.combo__list {
  position: absolute;
  top: calc(100% - var(--pr-space-2xs));
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: var(--pr-space-2xs);
  list-style: none;
  background: var(--pr-color-surface-overlay);
  border: 1px solid var(--pr-color-border-gold);
  border-radius: var(--pr-radius-sm);
  box-shadow: var(--pr-shadow-lg);
  max-height: 260px;
  overflow: auto;
}

.combo__status {
  padding: var(--pr-space-sm);
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-text-muted);
}

.combo__option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--pr-space-sm);
  background: transparent;
  border: 0;
  border-radius: var(--pr-radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--pr-font-body);
}

.combo__option:hover,
.combo__option.is-highlighted { background: var(--pr-color-gold-ghost); }

.combo__label {
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-text-primary);
}

.combo__sub {
  font-size: var(--pr-text-caption-size);
  color: var(--pr-color-text-muted);
}

/* Counters ----------------------------------------------------------------- */

.counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-md);
}

.counter-row__label {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-size);
  color: var(--pr-color-text-primary);
}

.counter {
  display: flex;
  align-items: center;
  gap: var(--pr-space-sm);
}

.counter__btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  font-family: var(--pr-font-body);
  color: var(--pr-color-text-gold);
  background: transparent;
  border: 1px solid var(--pr-color-border-default);
  border-radius: var(--pr-radius-sm);
  cursor: pointer;
  transition: border-color var(--pr-duration-base) var(--pr-ease-standard);
}

.counter__btn:hover { border-color: var(--pr-color-gold-base); }

.counter__value {
  min-width: 56px;
  text-align: center;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-lg-size);
  color: var(--pr-color-text-primary);
  padding: var(--pr-space-2xs) var(--pr-space-sm);
  border: 1px solid var(--pr-color-border-default);
  border-radius: var(--pr-radius-sm);
}

/* Vehicle picker ----------------------------------------------------------- */

.vehicle-list { display: grid; gap: var(--pr-space-md); }

.vehicle-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-md);
  width: 100%;
  padding: var(--pr-space-lg);
  cursor: pointer;
  border-radius: var(--pr-radius-md);
  background: var(--pr-color-surface-sunken);
  border: 1px solid var(--pr-color-border-subtle);
  transition: border-color var(--pr-duration-base) var(--pr-ease-standard);
}

.vehicle-option:hover { border-color: var(--pr-color-border-gold); }
.vehicle-option[aria-pressed="true"] { border-color: var(--pr-color-gold-base); }

.vehicle-option__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.vehicle-option__eyebrow {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  text-transform: uppercase;
  letter-spacing: var(--pr-text-eyebrow-tracking);
  color: var(--pr-color-text-gold);
}

.vehicle-option__name {
  font-family: var(--pr-font-display);
  font-size: var(--pr-text-h3-size);
  color: var(--pr-color-text-primary);
}

.vehicle-option__detail {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  font-weight: var(--pr-weight-light);
  color: var(--pr-color-text-secondary);
}

.vehicle-option__state {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-text-gold);
}

.quote-lead,
.quote-footnote {
  margin: 0;
  font-family: var(--pr-font-body);
  color: var(--pr-color-text-secondary);
}

.quote-lead {
  font-size: var(--pr-text-body-size);
  line-height: var(--pr-text-body-line);
  font-weight: var(--pr-weight-light);
}

.quote-footnote {
  font-size: var(--pr-text-caption-size);
  color: var(--pr-color-text-muted);
}

/* Summary ------------------------------------------------------------------ */

.summary {
  display: grid;
  gap: var(--pr-space-xs);
  padding: var(--pr-space-lg);
  border: 1px solid var(--pr-color-border-gold);
  border-radius: var(--pr-radius-md);
  background: var(--pr-color-surface-sunken);
}

.summary__title {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  text-transform: uppercase;
  letter-spacing: var(--pr-text-eyebrow-tracking);
  color: var(--pr-color-text-gold);
}

.summary__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pr-space-sm);
  padding-block: 2px;
}

.summary__key {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-text-muted);
}

.summary__val {
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-text-primary);
  text-align: right;
}

/* Form footer -------------------------------------------------------------- */

.quote-alert {
  margin: var(--pr-space-lg) 0 0;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-body-sm-size);
  color: var(--pr-color-danger);
}

.quote-foot {
  margin-top: var(--pr-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-sm);
}

.quote-foot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-sm);
  justify-content: space-between;
}

.quote-foot__primary { flex: 1; min-width: 200px; }

.quote-note {
  margin: 0;
  font-family: var(--pr-font-body);
  font-size: var(--pr-text-caption-size);
  line-height: 1.6;
  color: var(--pr-color-text-muted);
  text-align: center;
}

.quote-note--faint { opacity: .7; }