/*
 * ShopDPA — Pattern stylesheet
 * --------------------------------------------------------------
 * Wave 1 chrome + Wave 2 universal atoms.
 * All values reference tokens. No hardcoded literals.
 */

/* ============================================================ */
/* MOBILE-FIRST RESPONSIVE TIGHTENING                           */
/* Specific tweaks for screens ≤ 480px to keep the page         */
/* readable and tap-friendly on real phones.                    */
/* ============================================================ */
@media (max-width: 480px) {
  /* Tighter zone padding on small phones — avoid wasted space */
  .zone, .zone--alt, .zone--dark { padding-block: var(--sp-5); }

  /* Container padding */
  .container { padding-inline: var(--sp-2); }

  /* Hero H1 doesn't dominate the viewport */
  .hero-fullbleed h1 { font-size: var(--fs-2xl); max-width: 14ch; }
  .hero-fullbleed { padding-block: var(--sp-4) var(--sp-5); }
  .hero-fullbleed__lede { font-size: var(--fs-base); }

  /* Hero form fits screen with breathing room */
  .hero-form { padding: var(--sp-2); max-width: 100%; }
  .hero-form h2 { font-size: var(--fs-md); }

  /* Stats numbers don't blow out the viewport */
  .stat__value { font-size: var(--fs-3xl); }

  /* Section H2s scale down */
  h2 { font-size: var(--fs-xl); }

  /* Calculator: inputs panel padding tighter */
  .calc__inputs, .calc__results { padding: var(--sp-3); }
  .calc__big-number { font-size: var(--fs-3xl); }
  .calc__compare { grid-template-columns: 1fr; }
  .calc__compare-value { font-size: var(--fs-lg); }

  /* Process steps less padding */
  .process-steps__step { padding: var(--sp-2); }

  /* City + Heroes cards: tighter aspect ratio so they're not too tall */
  .occupation-grid__item { aspect-ratio: 1 / 1; }
  .city-card { aspect-ratio: 16 / 10; }

  /* Final CTA tighter */
  .final-cta { padding-block: var(--sp-5); }
  .final-cta h2 { font-size: var(--fs-xl); }
  .final-cta__body { font-size: var(--fs-base); }

  /* Footer: stack tighter */
  .site-footer { padding-block: var(--sp-3); } /* v1.33.0 — was sp-5 */

  /* Banner: even smaller text */
  .site-announcement__text { font-size: 11px; line-height: 1.4; }
  .site-announcement__cta { font-size: 11px; }

  /* Sticky bottom mobile CTA visible */
  body.show-mobile-cta { padding-bottom: 64px; }

  /* Myth cards tighter */
  .myth-card { padding: var(--sp-2); }
  .myth-card__text { font-size: var(--fs-sm); }

  /* Layered stack tighter */
  .layered-stack__layer { padding: var(--sp-2); }
  .layered-stack__title { font-size: var(--fs-base); }
  .layered-stack__detail { font-size: var(--fs-xs); }
  .layered-stack__amount { font-size: var(--fs-base); }
}

/* Touch target audit — all interactive elements meet 44×44 minimum */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px; }
  .site-nav__link { min-height: 44px; }
  .site-drawer__link { min-height: 44px; padding-block: var(--sp-2); }
  .occupation-grid__item, .city-card { min-height: 120px; }
  .faq-accordion__summary { padding-block: var(--sp-3); }
  .calc__select, .calc__input { min-height: 52px; font-size: var(--fs-md); }
  .hero-form__select { min-height: 52px; }
}

/* ============================================================ */
/* INTERACTIVE MYTH CARDS — click/hover to flip, reveal TRUTH   */
/* ============================================================ */
.myth-card-flip {
  perspective: 1200px;
  min-height: 320px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.myth-card-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}

/* Flip on hover (desktop) AND on .is-flipped class (tap toggle for mobile/keyboard) */
.myth-card-flip:hover .myth-card-flip__inner,
.myth-card-flip:focus-within .myth-card-flip__inner,
.myth-card-flip.is-flipped .myth-card-flip__inner {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .myth-card-flip__inner { transition: none; }
}

.myth-card-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--c-border);
  background-color: var(--c-surface);
}

/* Front face — MYTH */
.myth-card-flip__front {
  background-color: var(--c-surface);
}

.myth-card-flip__front-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: var(--sp-half) var(--sp-1);
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
  border-radius: var(--r-sm);
}

.myth-card-flip__quote {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin-block: var(--sp-2);
  flex: 1;
  display: flex;
  align-items: center;
}

.myth-card-flip__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  align-self: flex-end;
}

.myth-card-flip__hint-arrow {
  width: 14px; height: 14px;
  transition: transform var(--t-base) var(--ease);
}

.myth-card-flip:hover .myth-card-flip__hint-arrow {
  transform: translateX(3px);
}

/* Back face — TRUTH */
.myth-card-flip__back {
  background-color: var(--c-success-soft);
  border-color: rgba(46, 125, 91, 0.25);
  transform: rotateY(180deg);
}

.myth-card-flip__back-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: var(--sp-half) var(--sp-1);
  background-color: var(--c-success);
  color: var(--c-ink-inverse);
  border-radius: var(--r-sm);
}

.myth-card-flip__truth {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  margin-block: var(--sp-2);
  flex: 1;
}

.myth-card-flip__truth strong {
  color: var(--c-success);
  font-weight: var(--fw-semibold);
}

.myth-card-flip__truth a {
  color: var(--c-success);
  text-decoration: underline;
}

/* Subtle pulse on first card to hint it's interactive */
.myth-card-flip:first-child::after {
  content: "";
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  width: 8px; height: 8px;
  background-color: var(--c-accent);
  border-radius: var(--r-pill);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: myth-hint-pulse 3s ease-out 1s 2;
}

@keyframes myth-hint-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  20%, 80% { opacity: 1; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .myth-card-flip:first-child::after { animation: none; }
}

/* ============================================================ */
/* MYTH CAROUSEL (v1.23.8) — sliding marquee replacement for    */
/* the .myth-grid + .myth-card-flip pattern. Container-bound    */
/* (within section .container), uniform 320x280 vertical cards, */
/* edge-fade mask, pause on hover, hover/click to flip and      */
/* reveal the Fact side. Old .myth-card-flip* rules above       */
/* remain as orphans for any legacy markup but the homepage     */
/* now renders this carousel instead.                           */
/* ============================================================ */
.myth-zone .zone-header,
.myth-zone .zone-header__lede {
  max-width: 56rem;
}

.myth-carousel {
  position: relative;
  overflow: hidden;
  margin-block: var(--sp-4) var(--sp-3);
  padding-inline: var(--sp-3);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.myth-carousel__track {
  display: flex;
  gap: var(--sp-3);
  width: max-content;
  padding-block: var(--sp-2);
  /* (v1.23.11) — auto-scroll moved from CSS animation to a JS RAF loop  */
  /* so we can support pointer drag + viewport-responsive speed (mobile  */
  /* gets a faster scroll because the cards are visually smaller and the */
  /* old 80s linear marquee read as nearly stationary on phones). The    */
  /* engine lives in the inline <script> at the bottom of the section.   */
  cursor: grab;
  will-change: transform;
  touch-action: pan-y; /* allow vertical page scroll, intercept horizontal */
}

.myth-carousel__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.myth-carousel__card {
  flex: 0 0 320px;
  height: 280px;
  perspective: 1200px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.myth-carousel__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}

.myth-carousel__card:hover .myth-carousel__flip,
.myth-carousel__card:focus-within .myth-carousel__flip,
.myth-carousel__card.is-flipped .myth-carousel__flip {
  transform: rotateY(180deg);
}

.myth-carousel__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-align: left;
}

.myth-carousel__face--front {
  background-color: var(--c-surface);
  justify-content: space-between;
  gap: var(--sp-2);
}

.myth-carousel__face--back {
  transform: rotateY(180deg);
  background-color: var(--c-success-soft);
  border-color: rgba(46, 125, 91, 0.25);
  justify-content: flex-start;
  gap: var(--sp-3);
}

.myth-carousel__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: var(--sp-half) var(--sp-1);
  border-radius: var(--r-sm);
  flex: 0 0 auto;
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
}

.myth-carousel__badge--fact {
  background-color: var(--c-success);
  color: var(--c-ink-inverse);
}

.myth-carousel__quote {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  font-style: normal;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin: 0;
}

.myth-carousel__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  align-self: flex-end;
  flex: 0 0 auto;
}

.myth-carousel__hint-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--t-base) var(--ease);
}

.myth-carousel__card:hover .myth-carousel__hint-arrow,
.myth-carousel__card:focus-within .myth-carousel__hint-arrow {
  transform: translateX(3px);
}

.myth-carousel__fact {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  margin: 0;
}

.myth-carousel__fact strong {
  color: var(--c-success);
  font-weight: var(--fw-semibold);
}

.myth-carousel__fact a {
  color: var(--c-success);
  text-decoration: underline;
}

.myth-carousel__instruction {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-block: 0 var(--sp-4);
  max-width: 60ch;
  margin-inline: auto;
}

@media (max-width: 600px) {
  .myth-carousel__card { flex: 0 0 280px; height: 280px; }
}

/* ============================================================ */
/* SPLIT ZONE — 2-col asymmetric layout for visual variation    */
/* (image+text or text+visual diagram side by side)             */
/* ============================================================ */
.split-zone {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

@media (min-width: 1024px) {
  .split-zone { grid-template-columns: 1.05fr 1fr; gap: var(--sp-6); }
  .split-zone--reverse { grid-template-columns: 1fr 1.05fr; }
  .split-zone--reverse .split-zone__media { order: -1; }
}

.split-zone__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--c-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, rgba(2, 33, 78, 0.10) 0%, rgba(2, 33, 78, 0.45) 100%),
    var(--split-image, none);
  box-shadow: var(--elev-3);
}

@media (min-width: 1024px) {
  .split-zone__media { aspect-ratio: 5 / 6; }
}

.split-zone__content > * {
  max-width: 56ch;
}

.split-zone__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-1);
}

.split-zone__title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-2);
  line-height: var(--lh-snug);
}

@media (min-width: 1024px) {
  .split-zone__title { font-size: var(--fs-3xl); }
}

.split-zone__body {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-3);
}

/* Quick fact list inside split zone */
.split-zone__facts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3) 0;
}

.split-zone__facts li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-2);
  align-items: start;
  padding-block: var(--sp-1);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-base);
  color: var(--c-ink);
}

.split-zone__facts li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background-color: var(--c-success-soft);
  color: var(--c-success);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-top: 2px;
}

.split-zone__facts li:last-child { border-bottom: none; }

/* ============================================================ */
/* WAVE 1 — CHROME                                              */
/* ============================================================ */

/* -------------------------------------------------- */
/* Site announcement bar (above header)               */
/* Optional info banner. Dismissable with localStorage. */
/* -------------------------------------------------- */
.site-announcement {
  position: relative;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
  color: var(--c-ink-inverse);
  font-size: var(--fs-sm);
  z-index: calc(var(--z-header) + 1);
  border-bottom: 1px solid rgba(232, 155, 60, 0.25);
  overflow: hidden;
}

.site-announcement[hidden] { display: none !important; }

.site-announcement::before {
  /* Subtle amber accent line on top */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--c-accent) 30%,
    var(--c-accent) 70%,
    transparent 100%
  );
}

.site-announcement__inner {
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding: var(--sp-1) var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
}

@media (min-width: 1024px) {
  .site-announcement__inner { padding-inline: var(--sp-4); }
}

.site-announcement__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--fs-base);
  color: var(--c-accent);
  line-height: 1;
}

.site-announcement__text {
  flex: 1;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  margin: 0;
  line-height: var(--lh-normal);
}

.site-announcement__text strong {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
}

.site-announcement__cta {
  color: var(--c-ink-inverse);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 0.2em;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: color var(--t-base) var(--ease);
}

.site-announcement__cta:hover {
  color: var(--c-accent);
}

.site-announcement__close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--c-ink-inverse);
  opacity: 0.6;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.site-announcement__close:hover {
  opacity: 1;
  background-color: rgba(250, 247, 242, 0.1);
}

.site-announcement__close:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: var(--ring-focus);
}

/* Mobile — stack tighter, hide CTA label, keep dismiss visible */
@media (max-width: 639px) {
  .site-announcement__inner {
    flex-wrap: nowrap;
    text-align: left;
    justify-content: flex-start;
  }
  .site-announcement__text {
    font-size: var(--fs-xs);
  }
}


/* -------------------------------------------------- */
/* Header                                             */
/* -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* v1.18.5 — solid navy by default (every page except homepage).
   * Homepage gets a transparent override below + fades to navy on scroll. */
  background-color: var(--c-primary);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  /* v1.28.2 — `padding` removed from the transition list. The header is
   * one consistent height across all scroll states (see comment block on
   * .site-header__inner below); only background-color, border-color, and
   * box-shadow animate when .is-stuck is added by the scroll listener. */
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  /* Padding-block history:
   *   pre-v1.24.4: sp-3 (24px)        — read as heavy/dated
   *   v1.24.4:     sp-1 (8px)         — matched on-scroll; felt too tight
   *   v1.28.1:     sp-2 at-rest,      — kept sp-1 on-scroll, which jittered
   *                sp-1 on .is-stuck    the header back to skinny once the
   *                                     user scrolled past the hero
   *   v1.28.2:     sp-2 at all states — header height locked. .is-stuck
   *                                     still fires for the visual change
   *                                     (navy fade-in + backdrop-blur +
   *                                     box-shadow) but no longer changes
   *                                     padding/height. No more jitter. */
  padding-block: var(--sp-2);
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

@media (min-width: 1024px) {
  .site-header__inner { padding-inline: var(--sp-4); }
}

/* On-scroll visual state — applied via JS scroll listener (site.js) once
 * the user scrolls past the hero (or past 80px on hero-less pages). Adds
 * the navy fade-in + backdrop blur + box-shadow. v1.28.2: this rule no
 * longer changes padding/height — the header stays sp-2 (~66px) at every
 * scroll position; only background, border, and shadow change. */
.site-header.is-stuck {
  background-color: rgba(2, 33, 78, 0.95); /* navy with slight transparency */
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: var(--elev-1);
}

.site-header__logo {
  /* v1.21.0 — was text-only; now hosts the brand wordmark <img>.
   * Text styles below are kept as a graceful-fallback if the <img> ever
   * fails to load (browsers will render any fallback text content). */
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-tight);
  color: var(--c-primary);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__logo img {
  display: block;
  height: 32px;
  width: auto;
  /* No filter — the SVG carries its own amber fill (#FFC100/#FFC427)
   * which reads cleanly on both the navy (default + stuck) header bg
   * and the dark hero overlay (homepage transparent state).         */
}

@media (max-width: 767px) {
  .site-header__logo img { height: 28px; }
}

/* Primary nav (desktop) */
.site-nav { display: none; }

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    /* v1.23.15 — was gap: var(--sp-3) for spread-out centered nav. Pills carry
     * their own padding now, so a tighter gap reads cleaner. */
    gap: 0.25rem;
    flex: 1;
    /* v1.23.15 — was justify-content: center. Now left-aligned next to the logo,
     * Veterans-United style. CTA stays on the right via .site-header__right. */
    justify-content: flex-start;
    padding-inline-start: var(--sp-3);
  }
}

/* v1.49.0 — Mobile primary nav (Veterans-United pattern). Replaces the
 * hamburger drawer: the nav links render as a horizontal bar on a second
 * row beneath the header, spread evenly across the width. The top row
 * keeps the logo + Get Started CTA; the hamburger is removed. Links scroll
 * horizontally on very narrow screens so the bar never wraps to two lines. */
@media (max-width: 1023px) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .site-nav {
    display: flex;
    order: 3;                       /* drop below logo (1) + right/CTA (2) */
    flex-basis: 100%;               /* force onto its own full-width row */
    width: 100%;
    gap: var(--sp-1);
    justify-content: space-between; /* spread links edge-to-edge, VU-style */
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox: hide scrollbar */
    margin-block-start: var(--sp-1);   /* v1.49.5 — raise the nav row slightly closer to the logo */
  }
  .site-nav::-webkit-scrollbar { display: none; }  /* WebKit: hide scrollbar */
  .site-nav__item { flex: 0 0 auto; }
  .site-nav__link {
    padding: 0.4rem 0;          /* flush text — first link aligns with the logo, last with the CTA */
    white-space: nowrap;
  }
  .site-header__hamburger { display: none !important; }
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  /* Button reset — strips browser default <button> chrome */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  /* Nav link styling */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  /* v1.23.15 — bumped padding for pill proportions */
  padding: 0.625rem 1.125rem;
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-base);
  /* v1.24.1 — was --fw-medium (500). Bumped to --fw-bold (700) for stronger
   * top-strip presence and clearer separation from body text below. */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  /* v1.23.15 — was --r-sm. Pill shape so hover bg reads as a fill, not a chip. */
  border-radius: var(--r-pill);
  position: relative;
  transition:
    color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

/* v1.23.15 — underline-on-hover animation removed in favor of pill-fill hover.
 * Pseudo-element kept declared but hidden so any orphan rule referencing
 * .site-nav__link::after stays a no-op. */
.site-nav__link::after {
  display: none;
}

/* v1.23.15 — Pill hover: amber bg + navy ink, matches the "Get Started" CTA so
 * the entire top strip reads as one design language. */
.site-nav__link:hover,
.site-nav__link:focus-visible {
  background-color: var(--c-accent);
  color: var(--c-primary);
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.site-nav__caret {
  width: 0.7em; height: 0.7em;
  transition: transform var(--t-base) var(--ease);
}

.site-nav__item:hover .site-nav__caret,
.site-nav__link[aria-expanded="true"] .site-nav__caret {
  transform: rotate(180deg);
}

/* Mega menu */
.site-megamenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 540px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.site-nav__item:hover .site-megamenu,
.site-nav__item:focus-within .site-megamenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.site-megamenu__col h4 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-1);
}

.site-megamenu__col a {
  display: block;
  padding: var(--sp-half) 0;
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-base);
  border-radius: var(--r-sm);
  transition: color var(--t-base) var(--ease);
}

.site-megamenu__col a:hover { color: var(--c-primary); }

/* Header right cluster */
.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-header__phone {
  display: none;
  align-items: center;
  gap: var(--sp-half);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

@media (min-width: 1024px) { .site-header__phone { display: inline-flex; } }

.site-header__phone:hover { color: var(--c-primary); }

/* Mobile hamburger */
.site-header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--c-ink);
}

@media (min-width: 1024px) { .site-header__hamburger { display: none; } }

.site-header__hamburger:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Mobile drawer */
.site-drawer {
  position: fixed;
  inset: 0;
  background-color: var(--c-bg);
  z-index: var(--z-modal);
  padding: var(--sp-3);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
}

.site-drawer.is-open { transform: translateX(0); }

.site-drawer__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 44px; height: 44px;
  border: 1px solid var(--c-border);
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.site-drawer__nav { margin-top: var(--sp-6); }

.site-drawer__group { margin-block-end: var(--sp-3); }

.site-drawer__group-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-1);
}

.site-drawer__link {
  display: block;
  padding: var(--sp-1) 0;
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--c-border);
}

/* -------------------------------------------------- */
/* Footer                                             */
/* -------------------------------------------------- */
.site-footer {
  background-color: var(--c-primary);
  color: var(--c-ink-inverse);
  padding-block: var(--sp-4); /* v1.33.0 — was sp-6 (64px); tightened to sp-4 (32px) for compact sub-footer */
  margin-top: 0; /* v1.17.4 — was var(--sp-7); page bg was bleeding through */
}

.site-footer__inner {
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

@media (min-width: 1024px) {
  .site-footer__inner { padding-inline: var(--sp-4); }
}

.site-footer__logo {
  /* v1.21.0 — hosts the brand wordmark <img>. Text styles preserved
   * as graceful fallback (see header note). */
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-inverse);
  margin-block-end: var(--sp-4);
  text-decoration: none;
}

.site-footer__logo img {
  display: block;
  height: 36px;
  width: auto;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);                  /* v1.33.0 — was sp-4 */
  margin-block-end: var(--sp-3);     /* v1.33.0 — was sp-5 */
}

@media (min-width: 640px) {
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__columns { grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
}

.site-footer__col h4 {
  color: var(--c-ink-inverse);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  opacity: 0.7;
  margin-block-end: var(--sp-2);
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__col li { margin-block-end: var(--sp-1); }

.site-footer__col a {
  color: var(--c-ink-inverse);
  text-decoration: none;
  font-size: var(--fs-sm);
  opacity: 0.85;
  transition: opacity var(--t-base) var(--ease);
}

.site-footer__col a:hover { opacity: 1; }

.site-footer__divider {
  border: 0;
  border-top: 1px solid rgba(250, 247, 242, 0.15);
  margin-block: var(--sp-2);         /* v1.33.0 — was sp-4 */
}

.site-footer__legal {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-inverse);
  opacity: 0.75;
  text-align: center;
  /* No max-width — span full footer__inner width (1440px) with the parent's padding */
  width: 100%;
}

.site-footer__legal > * {
  margin-inline: auto;
}

.site-footer__nmls {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-2);
}

.site-footer__nmls a {
  color: var(--c-accent);
  text-decoration: underline;
}

.site-footer__eho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin-block: var(--sp-1) var(--sp-2);  /* v1.33.0 — was sp-2 / sp-3 */
  font-size: var(--fs-sm);
}

.site-footer__eho-icon {
  width: 28px; height: 28px;
  /* SVG inlined or referenced from /assets/eho.svg */
}

.site-footer__disclosure {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  opacity: 0.7;
  max-width: 1100px;             /* Wider than 80ch — uses more of the footer width on desktop */
  margin-inline: auto;
  text-align: center;
  padding-inline: var(--sp-2);    /* Small breathing room on tablet */
}

.site-footer__copyright {
  margin-top: var(--sp-2);            /* v1.33.0 — was sp-3 */
  font-size: var(--fs-xs);
  opacity: 0.65;
}

/* v1.33.0 — "Read full disclosures →" link inline at end of compressed
 * footer disclosure. Subtle amber underline + brighter on hover; sized
 * to match the surrounding disclosure text so it sits in flow. */
.site-footer__full-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: rgba(232, 155, 60, 0.4);
  text-underline-offset: 0.2em;
  margin-inline-start: 0.25em;
  white-space: nowrap;
}
.site-footer__full-link:hover {
  text-decoration-color: var(--c-accent);
}

.site-footer__copyright a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: rgba(232, 155, 60, 0.4);
  text-underline-offset: 0.2em;
}

.site-footer__copyright a:hover {
  text-decoration-color: var(--c-accent);
}

/* -------------------------------------------------- */
/* Mobile sticky bottom CTA                           */
/* Navy bg + amber accent line for stronger presence  */
/* and better visual contrast against page content.   */
/* -------------------------------------------------- */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  background-color: var(--c-primary);
  border-top: 2px solid var(--c-accent);
  box-shadow: 0 -6px 20px rgba(2, 33, 78, 0.25);
  padding: var(--sp-2) var(--sp-2);
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-out);
}

.mobile-sticky-cta.is-visible { transform: translateY(0); }

.mobile-sticky-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* primary CTA gets more weight */
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  max-width: 480px;
  margin-inline: auto;
}

.mobile-sticky-cta .btn {
  width: 100%;
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  min-height: 50px;
  white-space: nowrap;
}

/* Override .btn--ghost for navy-bg context (default ghost is dark text — invisible on navy) */
.mobile-sticky-cta .btn--ghost {
  color: var(--c-ink-inverse);
  border-color: rgba(250, 247, 242, 0.30);
  background-color: rgba(250, 247, 242, 0.04);
}
.mobile-sticky-cta .btn--ghost:hover {
  color: var(--c-ink-inverse);
  background-color: rgba(250, 247, 242, 0.10);
  border-color: rgba(250, 247, 242, 0.55);
}

/* Primary CTA on the navy bar uses the regular amber/white contrast — already correct */
.mobile-sticky-cta .btn--primary {
  box-shadow: 0 2px 8px rgba(244, 161, 26, 0.30);
}

@media (max-width: 1023px) {
  /* Show on mobile only, and only on body classes that opt in */
  body.show-mobile-cta .mobile-sticky-cta { display: block; }
}

@media (max-width: 360px) {
  .mobile-sticky-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .mobile-sticky-cta .btn--ghost {
    /* On very small screens, hide the call button — primary CTA only */
    display: none;
  }
}

/* ============================================================ */
/* WAVE 2 — UNIVERSAL ATOMS                                     */
/* ============================================================ */

/* -------------------------------------------------- */
/* pattern--hero-compact                              */
/* -------------------------------------------------- */
.hero-compact {
  padding-block: var(--sp-5) var(--sp-4);
  background-color: var(--c-bg);
}

.hero-compact__inner {
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.hero-compact__breadcrumb {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-2);
}

.hero-compact__breadcrumb a {
  color: var(--c-ink-muted);
  text-decoration: none;
}

.hero-compact__breadcrumb a:hover { color: var(--c-primary); }

.hero-compact__breadcrumb-sep { margin-inline: var(--sp-half); opacity: 0.5; }

.hero-compact h1 {
  max-width: 22ch;
  margin-block-end: var(--sp-3);
}

.hero-compact__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
  max-width: 60ch;
  margin-block-end: var(--sp-3);
}

.hero-compact__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-block-end: var(--sp-3);
}

.hero-compact__trust-line {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.hero-compact__verified-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  background-color: var(--c-success-soft);
  color: var(--c-success);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  padding: var(--sp-half) var(--sp-1);
  border-radius: var(--r-pill);
  margin-block-end: var(--sp-2);
}

/* -------------------------------------------------- */
/* pattern--byron-review-card                         */
/* -------------------------------------------------- */
.byron-review-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  align-items: center;
  max-width: 480px;
}

.byron-review-card__photo img {
  width: 80px; height: 80px;
  border-radius: var(--r-pill);
  object-fit: cover;
  display: block;
}

.byron-review-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.byron-review-card__name a {
  color: var(--c-ink);
  text-decoration: none;
}

.byron-review-card__title,
.byron-review-card__verified {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.byron-review-card__title a {
  color: var(--c-ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
}

/* Inline review variant */
.byron-review-inline {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.byron-review-inline .eyebrow {
  margin-inline-end: var(--sp-half);
}

/* -------------------------------------------------- */
/* pattern--faq-accordion                             */
/* -------------------------------------------------- */
.faq-accordion {
  /* v1.40.1 — left-align within parent + cap at prose-block 720px lock so the
   * accordion never spills into the right-rail sticky TOC. Prior rule used
   * margin-inline: auto which centered the 780px accordion inside the 1100px
   * page wrapper and pushed left=366 (160px shift) on city Pages with sidebars. */
  max-width: 720px;
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.faq-accordion__item {
  border-bottom: 1px solid var(--c-border);
}

.faq-accordion__item:first-child {
  border-top: 1px solid var(--c-border);
}

.faq-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}

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

.faq-accordion__summary:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

.faq-accordion__summary::after {
  content: "";
  width: 14px; height: 14px;
  background-color: var(--c-primary);
  /* Mask-image carries shape only — color comes from background-color above,
     which is a token. This keeps the chevron color brand-portable. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease);
}

.faq-accordion__item[open] > .faq-accordion__summary::after {
  transform: rotate(180deg);
}

.faq-accordion__answer {
  padding-block-end: var(--sp-3);
  padding-inline-end: var(--sp-4);
  color: var(--c-ink-muted);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------- */
/* pattern--final-cta (inverted: navy bg + amber CTA) */
/* Now supports optional --final-cta-image bg photo.  */
/* -------------------------------------------------- */
.final-cta {
  background-color: var(--c-primary);
  background-image:
    linear-gradient(
      180deg,
      rgba(2, 33, 78, 0.88) 0%,
      rgba(10, 31, 53, 0.96) 100%
    ),
    var(--final-cta-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-ink-inverse);
  padding-block: var(--sp-7);
  text-align: center;
  position: relative;
}

.final-cta__inner {
  max-width: var(--max-w-content);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.final-cta h2 {
  color: var(--c-ink-inverse);
  margin-block-end: var(--sp-2);
}

.final-cta__body {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  opacity: 0.85;
  margin-block-end: var(--sp-4);
  max-width: 60ch;
  margin-inline: auto;
}

.final-cta__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.final-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  color: var(--c-ink-inverse);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid rgba(250, 247, 242, 0.3);
  padding-block-end: 2px;
}

.final-cta__phone:hover { border-bottom-color: var(--c-accent); color: var(--c-ink-inverse); }

/* -------------------------------------------------- */
/* pattern--related-pages-grid                        */
/* -------------------------------------------------- */
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

@media (min-width: 768px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

.related-grid__card {
  display: block;
  padding: var(--sp-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
  transition:
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.related-grid__card:hover {
  border-color: var(--c-primary-tint);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.related-grid__card-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-half);
  display: block;
}

.related-grid__card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-1);
  line-height: var(--lh-snug);
}

.related-grid__card-excerpt {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
  margin: 0;
}

/* -------------------------------------------------- */
/* pattern--author-byline-card                        */
/* (footer-of-article variant; review-card is hero)   */
/* -------------------------------------------------- */
.author-byline {
  background-color: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-3);
  align-items: start;
  max-width: var(--max-w-content);
  margin-inline: auto;
  margin-block: var(--sp-5);
}

.author-byline__photo img {
  width: 80px; height: 80px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

.author-byline__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--sp-half) 0;
}

.author-byline__credentials {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-1) 0;
}

.author-byline__sources {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  line-height: var(--lh-relaxed);
}

.author-byline__sources strong {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin-block-end: var(--sp-half);
}

/* -------------------------------------------------- */
/* pattern--midarticle-cta                            */
/* -------------------------------------------------- */
.midarticle-cta {
  background-color: var(--c-accent-soft);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: var(--max-w-content);
  margin-inline: auto;
  margin-block: var(--sp-4);
}

.midarticle-cta__text {
  flex: 1;
  min-width: 240px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin: 0;
}

/* ============================================================ */
/* CITY GRID — 5-card responsive layout                         */
/* ============================================================ */
.city-grid {
  display: grid;                       /* CRITICAL — without this, cards stack at full width */
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  margin-block-start: var(--sp-3);
}

@media (min-width: 480px) {
  .city-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .city-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  /* Even 5-across at desktop — Houston, Dallas, SA, Austin, FW each get equal width */
  .city-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================ */
/* CITY CARDS WITH SKYLINE                                      */
/* ============================================================ */
.city-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink-inverse);
  background-color: var(--c-primary);
  /* Layered bg: vignette dark-edges + linear top→bottom gradient + photo + amber accent.
     Vignette ensures sides ALWAYS get coverage (was the "exposure on sides" issue). */
  background-image:
    radial-gradient(ellipse at center, transparent 35%, rgba(2, 33, 78, 0.55) 100%),
    linear-gradient(180deg, rgba(2, 33, 78, 0.45) 0%, rgba(2, 33, 78, 0.92) 100%),
    var(--city-bg, none),
    radial-gradient(circle at 50% 70%, rgba(232, 155, 60, 0.15) 0%, transparent 55%);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  padding: var(--sp-2);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  border: 1px solid var(--c-border);
  isolation: isolate;
}

@media (min-width: 1024px) {
  .city-card { aspect-ratio: 4 / 5; padding: var(--sp-3); }
}

.city-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}

.city-card__eyebrow,
.city-card__title,
.city-card__excerpt {
  position: relative;
  z-index: 1;
}

.city-card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-half);
}

.city-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-half);
  letter-spacing: var(--tr-snug);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 1024px) {
  .city-card__title { font-size: var(--fs-xl); }
}

.city-card__excerpt {
  font-size: var(--fs-xs);
  color: var(--c-ink-inverse);
  opacity: 0.92;
  line-height: var(--lh-snug);
  margin: 0;
  font-weight: var(--fw-medium);
}

@media (min-width: 1024px) {
  .city-card__excerpt { font-size: var(--fs-sm); }
}

/* ============================================================ */
/* SECTION BREAK IMAGE STRIP (parallax-style horizontal photo)  */
/* Use between zones to break up text fatigue.                  */
/* ============================================================ */
/* (v1.23.9) Editorial banner rework — was a 240px parallax  */
/* strip with a navy linear-gradient overlay (no-gradients    */
/* violation), 32ch clamped quote, and inline attribution.    */
/* Now: 380px section, solid navy overlay, eyebrow tag,       */
/* 72rem-wide editorial quote with amber-highlighted span,    */
/* and absolute-positioned linked source attribution at the   */
/* bottom of the section that mirrors the .micro-citation     */
/* pattern from the homepage stats zone.                       */
.section-break {
  position: relative;
  height: auto;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--sp-7);
  /* v1.49.12 — Vertically center the "$4 billion" content. Previously the
   * inner `.section-break__content` had `height: 100%` which doesn't resolve
   * against a `min-height` parent that isn't itself a flex/grid container, so
   * the content sat at the top. Making `.section-break` flex with
   * `justify-content: center` aligns the (position: relative) content child to
   * the vertical center; the absolute `.section-break__overlay` is removed
   * from flow and unaffected. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1023px) {
  .section-break {
    background-attachment: scroll;
    min-height: 300px;
    padding-block: var(--sp-5);
  }
}

.section-break__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(2, 33, 78, 0.78);
  z-index: 0;
}

.section-break__content {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--sp-3);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--c-ink-inverse);
}

.section-break__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-primary);
  background: var(--c-accent);
  padding: 8px 16px;
  border-radius: 999px;
  margin: 0 0 var(--sp-3) 0;
  max-width: none;
}

.section-break__quote {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
  max-width: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  .section-break__quote { font-size: var(--fs-3xl); }
}

.section-break__quote strong {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
}

.section-break__attr {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--sp-3);
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--sp-3);
  text-align: center;
  font-size: 11px;
  letter-spacing: var(--tr-wide);
  color: rgba(250, 247, 242, 0.55);
  font-weight: var(--fw-medium);
}

.section-break__attr a {
  color: rgba(250, 247, 242, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.section-break__attr a:hover {
  color: var(--c-accent);
}

/* ============================================================ */
/* SECTION DECORATIVE BACKGROUNDS                               */
/* ============================================================ */

/* Topographic / dotted accent for dark zones */
.zone--dark.zone--topo {
  position: relative;
  isolation: isolate;
}

.zone--dark.zone--topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(232, 155, 60, 0.05) 0%, transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(232, 155, 60, 0.04) 0%, transparent 32%);
  pointer-events: none;
  z-index: -1;
}

/* Stats zone subtle texture */
.stats-zone-decor {
  position: relative;
  overflow: hidden;
}

.stats-zone-decor::before {
  /* Faint dot pattern bottom corners */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    rgba(2, 33, 78, 0.04) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.6;
}

.stats-zone-decor > * {
  position: relative;
  z-index: 1;
}

/* Stat number underline accent */
.stat__value {
  position: relative;
  display: inline-block;
}

/* v1.22.0 — old absolute-positioned 32px stub rule deleted. Its           */
/* `position: absolute; left: 50%; bottom: -8px; transform: translateX(   */
/* -50%);` declarations were leaking into the v1.22.0 ::after rule        */
/* (line ~3355) because that rule only overrides display/width/background */
/* — leaving position+left+transform from this older block still applied. */
/* That made the underline appear shifted right under each stat number.   */
/* The active ::after rule below at line ~3355 handles all styling.       */

/* ============================================================ */
/* WAVE 4 — HOMEPAGE-ONLY                                       */
/* ============================================================ */

/* -------------------------------------------------- */
/* pattern--myth-buster (objection-removal grid)      */
/* Grid of MYTH / TRUTH cards. Removes the top 6      */
/* DPA misconceptions that cause prospects to bounce. */
/* -------------------------------------------------- */
.myth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  margin-block-start: var(--sp-4);
}

@media (min-width: 768px) {
  .myth-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}

@media (min-width: 1100px) {
  .myth-grid { grid-template-columns: repeat(3, 1fr); }
}

.myth-card {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.myth-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.myth-card__myth,
.myth-card__truth {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.myth-card__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: 2px var(--sp-1);
  border-radius: var(--r-sm);
  min-width: 64px;
  height: 24px;
}

.myth-card__myth .myth-card__badge {
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
}

.myth-card__truth .myth-card__badge {
  background-color: var(--c-success-soft);
  color: var(--c-success);
}

.myth-card__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  flex: 1;
}

.myth-card__myth .myth-card__text {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--c-ink);
}

.myth-card__truth .myth-card__text {
  color: var(--c-ink);
}

.myth-card__source {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin-top: auto;
  padding-top: var(--sp-1);
  border-top: 1px solid var(--c-border);
}

.myth-card__source a {
  color: var(--c-ink-muted);
  text-decoration: underline;
}

/* -------------------------------------------------- */
/* pattern--hero-fullbleed (lead-gen form-first hero) */
/* Full-width bg image, dark gradient overlay,        */
/* headline + lede left, lead form card right.        */
/* This is the industry-standard mortgage/DPA hero.   */
/* -------------------------------------------------- */
.hero-fullbleed {
  position: relative;
  background-color: var(--c-primary);
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-ink-inverse);
  padding-block: var(--sp-6) var(--sp-7);
  isolation: isolate;
  overflow: hidden;
}

.hero-fullbleed::before {
  /* Dark gradient overlay for text legibility */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(2, 33, 78, 0.85) 0%,
    rgba(2, 33, 78, 0.65) 45%,
    rgba(2, 33, 78, 0.40) 100%
  );
  z-index: -1;
}

@media (max-width: 1023px) {
  .hero-fullbleed::before {
    background: linear-gradient(
      to bottom,
      rgba(2, 33, 78, 0.55) 0%,
      rgba(2, 33, 78, 0.85) 100%
    );
  }
}

.hero-fullbleed__inner {
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-2); /* tighter side padding so headline isn't squeezed */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
}

@media (min-width: 768px) {
  .hero-fullbleed__inner { padding-inline: var(--sp-3); }
}

@media (min-width: 1024px) {
  .hero-fullbleed { padding-block: var(--sp-7) var(--sp-8); }
  .hero-fullbleed__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-6);
    padding-inline: var(--sp-4);
  }
}

.hero-fullbleed__content { color: var(--c-ink-inverse); }

.hero-fullbleed__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-2);
}

.hero-fullbleed h1 {
  color: var(--c-ink-inverse);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin-block-end: var(--sp-3);
  max-width: 22ch; /* widened so headline has room to breathe */
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
  .hero-fullbleed h1 { font-size: var(--fs-4xl); }
}

@media (min-width: 1280px) {
  .hero-fullbleed h1 { font-size: var(--fs-5xl); }
}

.hero-fullbleed__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-ink-inverse);
  opacity: 0.92;
  margin-block-end: var(--sp-3);
  max-width: 50ch;
}

.hero-fullbleed__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-inverse);
  opacity: 0.85;
  margin-block-start: var(--sp-3);
}

.hero-fullbleed__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
}

/* Lead form card */
.hero-form {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--elev-3);
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hero-form {
    padding: var(--sp-4);
    margin-inline: 0;
    margin-left: auto;
  }
}

.hero-form__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-half);
}

.hero-form h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin-block-end: var(--sp-1);
}

.hero-form__sub {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-3);
}

.hero-form__field {
  display: block;
  margin-block-end: var(--sp-2);
}

.hero-form__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-half);
}

.hero-form__select,
.hero-form__input {
  width: 100%;
  padding: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
}

.hero-form__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  background-size: 14px;
  padding-right: var(--sp-5);
}

.hero-form__select:focus,
.hero-form__input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--ring-focus);
}

.hero-form__submit {
  width: 100%;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-md);
  padding-block: var(--sp-2);
  min-height: 52px;
}

.hero-form__legal {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  line-height: var(--lh-relaxed);
  margin-block-start: var(--sp-2);
}

.hero-form__legal a {
  color: var(--c-ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
}

/* -------------------------------------------------- */
/* pattern--hero-full (homepage two-column hero)      */
/* -------------------------------------------------- */
.hero-full {
  background-color: var(--c-bg);
  padding-block: var(--sp-5) var(--sp-6);
  position: relative;
  overflow: hidden;
}

.hero-full__inner {
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-full {
    padding-block: var(--sp-6) var(--sp-7);
  }
  .hero-full__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-6);
  }
}

.hero-full__content h1 {
  font-size: var(--fs-3xl);
  margin-block-end: var(--sp-3);
  max-width: 14ch;
}

@media (min-width: 1024px) {
  .hero-full__content h1 { font-size: var(--fs-4xl); }
}

@media (min-width: 1280px) {
  .hero-full__content h1 { font-size: var(--fs-5xl); }
}

.hero-full__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-3);
  max-width: 56ch;
}

.hero-full__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-block-end: var(--sp-2);
}

.hero-full__trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-3);
}

.hero-full__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
}

.hero-full__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--elev-2);
}

.hero-full__media img,
.hero-full__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .hero-full__media { aspect-ratio: 16 / 10; }
}

/* ============================================================ */
/* WAVE 5 — SPECIALIZED CONTENT PATTERNS                        */
/* ============================================================ */

/* -------------------------------------------------- */
/* pattern--worked-example / worked-math-block       */
/* -------------------------------------------------- */
.worked-example {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  max-width: var(--max-w-content);
  margin-inline: auto;
  margin-block: var(--sp-4);
}

.worked-example__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-1);
}

.worked-example__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-2);
  color: var(--c-ink);
}

.worked-example__profile {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-3);
  line-height: var(--lh-relaxed);
}

.worked-math {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  margin-block: var(--sp-2);
}

.worked-math__row { display: contents; }

.worked-math__label { color: var(--c-ink-muted); }
.worked-math__value { color: var(--c-ink); font-weight: var(--fw-medium); text-align: right; }

.worked-math__row--total .worked-math__label,
.worked-math__row--total .worked-math__value {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  padding-block-start: var(--sp-1);
  border-top: 1px solid var(--c-border);
}

.worked-example__caveat {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  line-height: var(--lh-relaxed);
  margin-block-start: var(--sp-2);
  font-style: italic;
}

/* -------------------------------------------------- */
/* pattern--stacking-matrix-table                     */
/* -------------------------------------------------- */
.stacking-matrix {
  max-width: var(--max-w-page);
  margin-inline: auto;
  margin-block: var(--sp-4);
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
}

.stacking-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 720px;
}

.stacking-matrix th,
.stacking-matrix td {
  padding: var(--sp-2);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}

.stacking-matrix thead th {
  background-color: var(--c-bg-alt);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.stacking-matrix tbody th {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  background-color: var(--c-surface);
  position: sticky;
  left: 0;
  border-right: 1px solid var(--c-border);
  min-width: 180px;
}

.stacking-matrix .check-yes { color: var(--c-success); font-weight: var(--fw-semibold); }
.stacking-matrix .check-no  { color: var(--c-danger); font-weight: var(--fw-semibold); }
.stacking-matrix .check-partial { color: var(--c-warning); font-weight: var(--fw-semibold); }

/* -------------------------------------------------- */
/* pattern--ami-county-table                          */
/* -------------------------------------------------- */
.ami-table {
  max-width: var(--max-w-page);
  margin-inline: auto;
  margin-block: var(--sp-4);
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
}

.ami-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 640px;
}

.ami-table th,
.ami-table td {
  padding: var(--sp-1) var(--sp-2);
  text-align: right;
  border-bottom: 1px solid var(--c-border);
}

.ami-table thead th {
  background-color: var(--c-bg-alt);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  text-align: right;
}

.ami-table thead th:first-child,
.ami-table tbody td:first-child,
.ami-table tbody th:first-child {
  text-align: left;
}

.ami-table tbody th {
  font-weight: var(--fw-medium);
  background-color: var(--c-surface);
  position: sticky;
  left: 0;
  border-right: 1px solid var(--c-border);
  font-family: var(--font-body);
  color: var(--c-ink);
}

.ami-table__caption {
  padding: var(--sp-2);
  background-color: var(--c-bg-alt);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  border-bottom: 1px solid var(--c-border);
}

.ami-table__verified {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin-top: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  font-style: italic;
}

/* -------------------------------------------------- */
/* pattern--sticky-toc-rail (desktop) +               */
/* pattern--toc-mobile-accordion                      */
/* -------------------------------------------------- */
.toc-rail {
  display: none;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  font-size: var(--fs-sm);
  padding: var(--sp-2);
  border-left: 2px solid var(--c-border);
  align-self: start;
}

@media (min-width: 1100px) {
  .toc-rail { display: block; }
}

.toc-rail__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-2);
}

.toc-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-rail__list li { margin-block-end: var(--sp-1); }

.toc-rail__list a {
  display: block;
  color: var(--c-ink-muted);
  text-decoration: none;
  padding: var(--sp-half) 0;
  border-left: 2px solid transparent;
  margin-left: -2px;
  padding-left: var(--sp-1);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.toc-rail__list a:hover { color: var(--c-primary); }

.toc-rail__list a.is-active {
  color: var(--c-primary);
  border-left-color: var(--c-accent);
  font-weight: var(--fw-medium);
}

/* Mobile accordion variant */
.toc-mobile {
  display: block;
  max-width: var(--max-w-content);
  margin-inline: auto;
  margin-block: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
}

@media (min-width: 1100px) {
  .toc-mobile { display: none; }
}

.toc-mobile summary {
  padding: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  cursor: pointer;
  list-style: none;
}

.toc-mobile[open] summary { border-bottom: 1px solid var(--c-border); }

.toc-mobile ol {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
}

.toc-mobile a {
  color: var(--c-ink);
  text-decoration: none;
}

/* ============================================================ */
/* WAVE 6 — CITY/HEROES-SPECIFIC PATTERNS                       */
/* ============================================================ */

/* -------------------------------------------------- */
/* pattern--layered-stack-card (city 4-layer visual)  */
/* Solid light cards on dark zone — high contrast.    */
/* Each layer differentiated by colored left accent bar.*/
/* -------------------------------------------------- */
.layered-stack {
  max-width: var(--max-w-content);
  margin-inline: auto;
  margin-block: var(--sp-4);
  position: relative;
}

.layered-stack__layer {
  background-color: var(--c-bg);                /* solid cream — pops against dark zone */
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);       /* default accent — overridden per variant */
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-block-end: var(--sp-1);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-left-color var(--t-base) var(--ease);
}

.layered-stack__layer:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}

/* All 4 layers use consistent amber accent — number badges differentiate.
   Earlier per-layer color caused #4 to blend into dark parent zone. */
.layered-stack__layer--1,
.layered-stack__layer--2,
.layered-stack__layer--3,
.layered-stack__layer--4 { border-left-color: var(--c-accent); }

.layered-stack__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background-color: var(--c-primary);
  color: var(--c-ink-inverse);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

.layered-stack__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  margin-block-end: var(--sp-half);
  line-height: var(--lh-snug);
}

.layered-stack__detail {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0;
  line-height: var(--lh-normal);
}

.layered-stack__amount {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  white-space: nowrap;
  line-height: 1.1;
}

/* Stack on mobile — keep amount under detail, not crammed right */
@media (max-width: 639px) {
  .layered-stack__layer {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .layered-stack__amount {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-md);
    text-align: left;
  }
}

/* -------------------------------------------------- */
/* pattern--decision-tree-numbered                    */
/* -------------------------------------------------- */
.decision-tree {
  max-width: var(--max-w-content);
  margin-inline: auto;
  margin-block: var(--sp-4);
}

.decision-tree__branch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: start;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-block-end: var(--sp-2);
}

.decision-tree__branch-num {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
}

.decision-tree__condition {
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  margin-block-end: var(--sp-half);
}

.decision-tree__outcome {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------- */
/* pattern--occupation-grid (Heroes hub) — PHOTO bg   */
/* Each card now uses a real occupation photo with    */
/* dark navy gradient overlay for text legibility.    */
/* -------------------------------------------------- */
.occupation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  max-width: var(--max-w-page);
  margin-inline: auto;
  margin-block: var(--sp-4);
  padding-inline: var(--sp-3);
}

@media (min-width: 768px) {
  .occupation-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
}

.occupation-grid__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink-inverse);
  background-color: var(--c-primary);
  /* Same vignette + gradient stack as city cards for consistent edge coverage */
  background-image:
    radial-gradient(ellipse at center, transparent 35%, rgba(2, 33, 78, 0.50) 100%),
    linear-gradient(180deg, rgba(2, 33, 78, 0.40) 0%, rgba(2, 33, 78, 0.92) 100%),
    var(--occupation-image, none),
    radial-gradient(circle at 50% 30%, rgba(232, 155, 60, 0.18) 0%, transparent 60%);
  background-size: cover, cover, cover, cover;
  background-position: center, center top, center top, center;
  background-repeat: no-repeat;
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  isolation: isolate;
}

.occupation-grid__item::before {
  /* Amber accent bar — appears on hover from bottom */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}

.occupation-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}

.occupation-grid__item:hover::before { transform: scaleX(1); }

.occupation-grid__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: var(--lh-snug);
  color: var(--c-ink-inverse);
  letter-spacing: var(--tr-snug);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .occupation-grid__title { font-size: var(--fs-lg); }
}

/* Last card ("All Heroes") has a special variant — solid amber with arrow */
.occupation-grid__item--all {
  background-image: none;
  background-color: var(--c-accent);
  color: var(--c-primary);
  align-items: flex-start;
}

.occupation-grid__item--all .occupation-grid__title {
  color: var(--c-primary);
  text-shadow: none;
}

.occupation-grid__item--all .occupation-grid__arrow {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background-color: var(--c-primary);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.occupation-grid__item--all .occupation-grid__arrow svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================ */
/* HEROES GRID v1.23.12 — icon-forward editorial cards          */
/* Replaces .occupation-grid (which depended on per-occupation  */
/* Unsplash photo URLs that rotted). Each card now has an inline*/
/* SVG icon, role title, eligibility-accurate description, and  */
/* an amber "View program" cue. The 8th card is a slightly      */
/* amber-tinted "All eligible roles" entry that links to the    */
/* full Texas Hero occupations index.                            */
/* The .occupation-grid* rules above are retained as orphans    */
/* for any legacy markup; the homepage [shopdpa_heroes_grid]    */
/* shortcode no longer renders them.                            */
/* ============================================================ */
.heroes-zone .zone-header,
.heroes-zone .zone-header__lede {
  max-width: 56rem;
}

/* v1.49.25 — Body links inside dark zones (.zone--dark.heroes-zone, etc.)
   were inheriting the default `a { color: var(--c-primary) }` (navy) and
   rendering navy-on-navy = invisible. Specifically the Heroes lede's
   inline link "Homes for Texas Heroes program" disappeared. This scopes
   ONLY to unclassed anchors (real prose links), so .btn, .hero-card,
   .site-nav__link, .cta-button — all class-styled — keep their own color. */
.zone--dark a:not([class]),
.zone--dark p a:not([class]) {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-thickness 120ms ease;
}
.zone--dark a:not([class]):hover,
.zone--dark a:not([class]):focus-visible,
.zone--dark p a:not([class]):hover,
.zone--dark p a:not([class]):focus-visible {
  color: #FFD466;
  text-decoration-thickness: 2px;
}

.heroes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  max-width: var(--max-w-page);
  margin-inline: auto;
  margin-block-start: var(--sp-5);
  padding-inline: var(--sp-3);
}

@media (min-width: 768px) {
  .heroes-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
  }
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background-color: var(--c-primary-mid);
  border: none;
  border-radius: var(--r-md);
  color: var(--c-ink-inverse);
  text-decoration: none;
  transition:
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
  overflow: hidden;
}

.hero-card:hover,
.hero-card:focus-visible {
  /* v1.42.1 — hover flips the card to brand amber with navy-inverted content
     (the brand amber-pill pattern). Cards are solid navy at rest, no outline. */
  background-color: var(--c-accent);
  border-color: transparent;
  transform: translateY(-2px);
}
.hero-card:hover .hero-card__title,
.hero-card:focus-visible .hero-card__title,
.hero-card:hover .hero-card__cue,
.hero-card:focus-visible .hero-card__cue {
  color: var(--c-primary);
}
.hero-card:hover .hero-card__desc,
.hero-card:focus-visible .hero-card__desc {
  color: rgba(2, 33, 78, 0.85);
}
.hero-card:hover .hero-card__icon,
.hero-card:focus-visible .hero-card__icon {
  background-color: rgba(2, 33, 78, 0.12);
  color: var(--c-primary);
}

/* Amber underscore that wipes in left-to-right on hover */
.hero-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}

.hero-card:hover::after,
.hero-card:focus-visible::after {
  transform: scaleX(1);
}

.hero-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background-color: var(--c-accent-soft);
  color: var(--c-accent);
  flex: 0 0 auto;
}

.hero-card__icon svg {
  width: 28px;
  height: 28px;
}

.hero-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin: 0;
  color: var(--c-ink-inverse);
  line-height: var(--lh-snug);
}

.hero-card__desc {
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.72);
  margin: 0;
  line-height: var(--lh-relaxed);
  flex: 1;
}

.hero-card__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.hero-card__cue svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-base) var(--ease);
}

.hero-card:hover .hero-card__cue svg {
  transform: translateX(3px);
}

/* "All eligible roles" card — slightly amber-tinted to differentiate */
.hero-card--all {
  background-color: var(--c-primary-mid);
  border: none;
}

.hero-card--all .hero-card__icon {
  background-color: var(--c-accent-soft);
}

/* On dark zones, occupation grid items get inset glow + drop shadow.
   Border removed — was creating slim 1px exposure of underlying bg between
   border and card content. Inset box-shadow gives definition without the gap. */
.zone--dark .occupation-grid__item {
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(244, 161, 26, 0.18),    /* amber inner ring */
    0 8px 24px rgba(0, 0, 0, 0.30);
}

/* On dark zones, city cards floating with elevation */
.zone--dark .city-card {
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(244, 161, 26, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------- */
/* pattern--process-steps-4                           */
/* -------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  margin-block: var(--sp-4);
}

@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}

.process-steps__step {
  position: relative;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}

.process-steps__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  background-color: var(--c-surface);
  color: var(--c-primary);
  border: 2px solid var(--c-primary-tint);
  border-radius: var(--r-pill);
  margin-block-end: var(--sp-2);
  transition:
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.process-steps__step:hover .process-steps__icon-wrap {
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

.process-steps__icon-wrap svg {
  width: 28px; height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-steps__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-bg-alt);
}

.process-steps__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-1);
  color: var(--c-ink);
  line-height: var(--lh-snug);
}

.process-steps__body {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 28ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .process-steps__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    right: -16px;
    width: 32px; height: 1px;
    background: linear-gradient(90deg, var(--c-border-strong), transparent);
    z-index: 0;
  }
}

/* ============================================================ */
/* WAVE 7 — PAGE-LEVEL LAYOUTS                                  */
/* ============================================================ */

/* -------------------------------------------------- */
/* Pillar layout (sticky TOC + body grid)             */
/* -------------------------------------------------- */
.pillar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  padding-block: var(--sp-4);
}

@media (min-width: 1100px) {
  .pillar-layout { grid-template-columns: 220px 1fr; gap: var(--sp-5); }
}

.pillar-layout__body {
  max-width: var(--max-w-content);
}

.pillar-layout__body h2 {
  margin-block-start: var(--sp-5);
  margin-block-end: var(--sp-2);
  scroll-margin-top: 100px;
}

.pillar-layout__body h3 {
  margin-block-start: var(--sp-3);
  margin-block-end: var(--sp-1);
}

.pillar-layout__body p { line-height: var(--lh-relaxed); }

/* Cluster post body — same content max width, no rail */
.cluster-layout {
  max-width: var(--max-w-content);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  padding-block: var(--sp-4);
}

.cluster-layout h2 {
  margin-block-start: var(--sp-5);
  margin-block-end: var(--sp-2);
  scroll-margin-top: 100px;
}

/* -------------------------------------------------- */
/* Three-column trust block (Why ShopDPA)             */
/* -------------------------------------------------- */
.trust-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  margin-block: var(--sp-4);
}

@media (min-width: 768px) {
  .trust-trio { grid-template-columns: repeat(3, 1fr); }
}

/* v1.22.0 — Stats zone uses 4-column trust-trio (TSAHC count, TDHCA   */
/* count, TSAHC mortgage $, TDHCA SF Homeownership $). Mobile = 1col,   */
/* tablet = 2x2, desktop = 4-across.                                     */
.trust-trio--four { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .trust-trio--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-trio--four { grid-template-columns: repeat(4, 1fr); }
}

/* v1.22.0 — Reusable source-citation utility for YMYL content. Use on   */
/* any source-citation block: stats zone, program-page footers, AMI      */
/* tables, recapture-window disclosures, anywhere a verifiable citation  */
/* needs to exist without competing with body copy for visual weight.    */
/* 10px fine-print (--fs-3xs), bottom-anchored within the parent section */
/* via large top margin so it visually anchors to the section foot rather */
/* than crowding the body copy. This is the canonical pattern for all    */
/* source citations going forward. (User direction: 2026-05-05.)         */
.micro-citation {
  font-size: var(--fs-3xs);
  line-height: 1.5;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
  /* Push toward the bottom of the parent section. Body copy above gets  */
  /* a clear visual break so the eye doesn't read past the body into the  */
  /* citation as a continuation. (sp-7 = 96px — was sp-6 / 64px in the   */
  /* first cut; bumped 2026-05-05 per user direction to sit closer to     */
  /* the section foot.)                                                    */
  margin-block-start: var(--sp-7);
}

.micro-citation a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.micro-citation a:hover {
  color: var(--c-ink-muted);
}

.trust-trio__card {
  padding: var(--sp-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  position: relative;
}

/* On dark zones, cards float with stronger shadow for Veterans United depth */
.zone--dark .trust-trio__card {
  background-color: var(--c-bg);
  border-color: rgba(250, 247, 242, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.zone--dark .trust-trio__card-title {
  color: var(--c-primary);
}

.zone--dark .trust-trio__card-body {
  color: var(--c-ink-muted);
}

.trust-trio__card-icon {
  width: 48px; height: 48px;
  background-color: var(--c-accent-soft);
  color: var(--c-accent);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--sp-2);
}

.trust-trio__card-icon svg {
  width: 24px; height: 24px;
  fill: currentColor;
  stroke: none;
}

.trust-trio__card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-1);
  color: var(--c-primary);
}

.trust-trio__card-body {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* -------------------------------------------------- */
/* Byron bio page (page-byron-bio.php)                */
/* -------------------------------------------------- */
.byron-bio__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: center;
  margin-block-start: var(--sp-3);
}

@media (min-width: 768px) {
  .byron-bio__hero {
    grid-template-columns: 240px 1fr;
    gap: var(--sp-5);
  }
}

.byron-bio__hero-photo img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  object-fit: cover;
  display: block;
  box-shadow: var(--elev-2);
  background-color: var(--c-primary); /* Falls behind transparent SVG placeholder */
}

.byron-bio__hero-meta h1 {
  margin-block-end: var(--sp-1);
  max-width: 18ch;
}

.byron-bio__credentials {
  font-size: var(--fs-md);
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-2);
}

.byron-bio__credentials a {
  color: var(--c-primary);
  text-decoration: underline;
}

.byron-bio__credentials-list,
.byron-bio__expertise {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0;
}

.byron-bio__credentials-list li,
.byron-bio__expertise li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.byron-bio__expertise li a {
  color: var(--c-primary);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 0.2em;
}

/* ============================================================ */
/* FLUENT FORMS PRO — brand-token overrides                     */
/* Lead capture forms (Fluent Forms Pro) live  */
/* in Fluent Forms Pro. The form is built in FF Pro's wp-admin  */
/* UI; this file paints it with our brand tokens so it inherits */
/* the Fraunces/Inter type, navy/amber palette, and 8px grid.   */
/*                                                              */
/* Drop a form into Bricks via [fluentform id="X"] shortcode    */
/* OR Bricks' "Form Fluent" element. Wrap it in a Bricks Block  */
/* with class .ff-card to get the elevated card look that       */
/* matched the old hero quiz.                                   */
/* ============================================================ */

/* Card wrapper — apply this class to a Bricks Section/Block to */
/* make any FF form sit on the elevated white card we use in    */
/* the hero. Class assignable in Bricks Builder element panel.  */
.ff-card {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--elev-3);
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .ff-card { padding: var(--sp-4); }
}

/* The Fluent Forms wrapper itself */
.fluentform,
.ff-default {
  font-family: var(--font-body);
  color: var(--c-ink);
}

/* Form labels */
.fluentform .ff-el-input--label label,
.ff-default .ff-el-input--label label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-half);
}

/* Inputs / selects / textareas */
.fluentform .ff-el-form-control,
.ff-default .ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform textarea.ff-el-form-control {
  width: 100%;
  padding: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  min-height: 50px;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.fluentform .ff-el-form-control:focus,
.ff-default .ff-el-form-control:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--ring-focus);
}

/* Checkbox + radio */
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
  accent-color: var(--c-accent);
  width: 18px;
  height: 18px;
}

/* Submit button — picks up our amber/white .btn--primary look */
.fluentform .ff-btn-submit,
.fluentform button.ff-btn,
.fluentform .ff_btn_style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tr-snug);
  text-decoration: none;
  background-color: var(--c-accent);
  color: var(--c-ink-inverse);
  border: 1px solid transparent;
  /* v1.5.5 — pill radius for design consistency */
  border-radius: var(--r-pill);
  min-height: 44px;
  width: 100%;
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease);
}

.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn:hover {
  background-color: var(--c-accent-hover);
  color: var(--c-ink-inverse);
  transform: translateY(-1px);
}

/* FF multi-step — make step nav buttons look right */
.fluentform .ff-step-header-progress-bar,
.fluentform .ff_step_progress_bar {
  background-color: var(--c-bg-alt) !important;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.fluentform .ff-step-header-progress-bar > div,
.fluentform .ff_step_progress_bar > div {
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover)) !important;
  border-radius: var(--r-pill);
}

.fluentform .ff_btn_back {
  background-color: transparent;
  color: var(--c-ink-muted);
  border: none;
  font-weight: var(--fw-medium);
}
.fluentform .ff_btn_back:hover { color: var(--c-primary); }

/* Help text + descriptions */
.fluentform .ff-el-help-message,
.fluentform .ff_t_c label {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
}

/* Validation error styling */
.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--c-danger);
}
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
  color: var(--c-danger);
  font-size: var(--fs-sm);
  margin-block-start: var(--sp-half);
}

/* Success message after submit */
.fluentform .ff-message-success,
.ff-message-success {
  background-color: var(--c-success-soft);
  color: var(--c-success);
  border: 1px solid var(--c-success);
  border-radius: var(--r-md);
  padding: var(--sp-2);
}

/* Hide FF Pro powered-by branding (we own the visual identity) */
.fluentform .ff-powered { display: none !important; }


/* ============================================================ */
/* FLUENT FORMS PRO — PILL-BUTTON RADIO STYLING                 */
/* Veterans United / Better.com-inspired large pill UX.         */
/* Each radio option becomes a tappable pill button card.       */
/* Tap-to-advance is handled by FF Pro's auto-step (set in form */
/* settings) or via custom JS hook below.                       */
/* ============================================================ */

/* Hide native radio circles inside .ff-pill-options */
.fluentform .ff-pill-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Stack radio options as pill buttons */
.fluentform .ff-pill-options .ff-el-form-check {
  display: block;
  margin-block-end: var(--sp-1);
}

/* v1.5.8 — pill styles SCOPED to .ff-el-form-check (option wrapper) only.
 * Earlier ".ff-pill-options .ff-el-form-check label" matched the field's question title <label>
 * too → user reported hover glow on the question. Now the question title is
 * untouched. */
.fluentform .ff-pill-options .ff-el-form-check label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 2px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 56px;
  transition:
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.fluentform .ff-pill-options .ff-el-form-check label:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  transform: translateY(-2px);
  box-shadow: var(--elev-2), 0 0 24px var(--c-accent-glow);
}

/* Selected state — amber filled (still scoped to option wrapper) */
.fluentform .ff-pill-options .ff-el-form-check input[type="radio"]:checked + label,
.fluentform .ff-pill-options .ff-el-form-check input[type="radio"]:checked ~ label,
.fluentform .ff-pill-options .ff-el-form-check.is-selected label {
  background: var(--c-accent);
  border-color: transparent;
  color: var(--c-ink-inverse);
  box-shadow: 0 4px 16px var(--c-accent-glow);
}

/* Hard reset for the question TITLE label so it never inherits pill styling */
.fluentform .ff-el-input--label > label {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
  text-align: left;
}
.fluentform .ff-el-input--label > label:hover {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Bigger inputs for "ff-big-input" containers */
.fluentform .ff-big-input .ff-el-form-control {
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-md);
  border-width: 2px;
  border-radius: var(--r-md);
}

.fluentform .ff-big-input .ff-el-input--label label {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: var(--tr-snug);
  color: var(--c-ink);
}

.fluentform .ff-big-input .ff-el-help-message {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-block-start: var(--sp-half);
}

/* Brand-styled progress bar */
.fluentform .ff_step_progress_bar,
.fluentform .ff-step-header-progress-bar {
  height: 6px !important;
  background-color: var(--c-bg-alt) !important;
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-block-end: var(--sp-3);
}

.fluentform .ff_step_progress_bar > div,
.fluentform .ff-step-header-progress-bar > div {
  background: var(--c-accent) !important;
  box-shadow: 0 0 12px var(--c-accent-glow);
  transition: width 400ms var(--ease-out) !important;
}

/* Step counter "Step 1 of 5" — restyled */
.fluentform .ff-step-header-counter,
.fluentform .ff_step_text {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-1);
}

/* Question heading (label) inside multi-step — bigger, brand */
.fluentform .ff_step_container .ff-el-input--label label {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-transform: none;
  letter-spacing: var(--tr-snug);
  color: var(--c-ink);
  margin-block-end: var(--sp-half);
}

/* Step nav (Back / Next buttons) */
.fluentform .ff-btn-prev,
.fluentform .ff_btn_back {
  background: transparent !important;
  color: var(--c-ink-muted) !important;
  border: none !important;
  padding: var(--sp-1) var(--sp-2) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--r-pill) !important;
  min-height: 44px;
  width: auto !important;
}

.fluentform .ff-btn-prev:hover,
.fluentform .ff_btn_back:hover {
  background: var(--c-bg-alt) !important;
  color: var(--c-primary) !important;
}

.fluentform .ff-btn-next,
.fluentform .ff_btn_next {
  background: var(--c-accent) !important;
  color: var(--c-ink-inverse) !important;
  border: none !important;
  padding: var(--sp-2) var(--sp-4) !important;
  font-weight: var(--fw-semibold) !important;
  border-radius: var(--r-pill) !important;
  min-height: 50px;
  box-shadow: 0 4px 16px var(--c-accent-glow);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.fluentform .ff-btn-next:hover,
.fluentform .ff_btn_next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--c-accent-glow);
}

/* TCPA consent — quieter styling */
.fluentform .ff-tcpa label {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
}


/* ============================================================ */
/* VISUAL POP PASS — animations + layout variations             */
/* Make it feel less generic without changing copy/structure.   */
/* ============================================================ */

/* === Hero — parallax-feel + gradient overlay tint === */
.hero-fullbleed::before {
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 197, 40, 0.18) 0%, transparent 50%),
    linear-gradient(135deg, rgba(2, 33, 78, 0.92) 0%, rgba(8, 24, 46, 0.78) 60%, rgba(2, 33, 78, 0.55) 100%);
}

.hero-fullbleed {
  background-attachment: fixed; /* parallax on scroll (desktop) */
}

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .hero-fullbleed { background-attachment: scroll; }
}

/* Hero h1 — subtle amber underline pulse */
.hero-fullbleed h1 .h1-tail {
  position: relative;
  background: var(--c-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

/* === Stats — emphasis + amber underline pulse === */
.stat__value {
  background: var(--c-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
}

.stat__value::after {
  content: '';
  display: block;
  /* v1.22.0 — was 48px fixed bar; now spans full width of the stat       */
  /* value text. .stat__value is display:inline-block so width:100%       */
  /* sizes to the text. Pulse keyframe range tightened so the underline   */
  /* never overflows the text edge.                                       */
  width: 100%;
  height: 3px;
  /* Symmetric gradient — peaks at center, fades at the edges. The earlier */
  /* `var(--grad-amber)` ran light-yellow → amber → deep-amber left-to-    */
  /* right, which made the underline look visually weighted to the right  */
  /* even though it was geometrically centered. Symmetric stops fix the   */
  /* optical-center issue.                                                 */
  background: var(--c-accent);
  margin: var(--sp-1) auto 0;
  border-radius: var(--r-pill);
  box-shadow: 0 0 12px var(--c-accent-glow);
  animation: shopdpaPulseUnderline 2.4s ease-in-out infinite;
}

@keyframes shopdpaPulseUnderline {
  0%, 100% { opacity: 0.7; transform: scaleX(0.94); }
  50%      { opacity: 1;   transform: scaleX(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .stat__value::after { animation: none; }
}

/* === Layered stack — cascade-in from left with stagger === */
.layered-stack__layer {
  position: relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.layered-stack__layer:hover {
  transform: translateX(8px);
  box-shadow: -8px 0 24px var(--c-accent-glow);
}

.layered-stack__layer::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-accent);
  border-radius: var(--r-pill);
  opacity: 0.6;
  transition: opacity var(--t-base) var(--ease), width var(--t-base) var(--ease);
}

.layered-stack__layer:hover::before {
  opacity: 1;
  width: 6px;
  box-shadow: 0 0 16px var(--c-accent-glow);
}

/* Stagger reveal (data-reveal-stagger already set on parent) */
.layered-stack[data-reveal-stagger] .layered-stack__layer {
  animation: shopdpaSlideInLeft 600ms var(--ease-out) backwards;
}
.layered-stack[data-reveal-stagger] .layered-stack__layer:nth-child(1) { animation-delay: 100ms; }
.layered-stack[data-reveal-stagger] .layered-stack__layer:nth-child(2) { animation-delay: 220ms; }
.layered-stack[data-reveal-stagger] .layered-stack__layer:nth-child(3) { animation-delay: 340ms; }
.layered-stack[data-reveal-stagger] .layered-stack__layer:nth-child(4) { animation-delay: 460ms; }

@keyframes shopdpaSlideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .layered-stack[data-reveal-stagger] .layered-stack__layer { animation: none; }
}

/* === City + Heroes cards — kenburns image bg + lift on hover === */
.city-card,
.occupation-grid__item {
  overflow: hidden;
  isolation: isolate;
}

.city-card::before,
.occupation-grid__item::before {
  background-size: cover !important;
  transition: transform 6s var(--ease-out);
}

.city-card:hover::before,
.occupation-grid__item:hover::before {
  transform: scale(1.08);
}

/* Floating amber accent badge on hover (city cards) */
.city-card::after {
  content: '';
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  opacity: 0;
  transform: scale(0.6) rotate(-30deg);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
  box-shadow: 0 4px 16px var(--c-accent-glow);
  pointer-events: none;
  z-index: 2;
}

.city-card:hover::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* === Section dividers — angled diagonal cut between zones === */
.zone--dark + .zone,
.zone--dark + .zone--alt,
.zone + .zone--dark,
.zone--alt + .zone--dark {
  position: relative;
}

.zone--dark + .zone::before,
.zone--dark + .zone--alt::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--c-primary);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .zone--dark + .zone::before,
  .zone--dark + .zone--alt::before { height: 32px; }
}

/* === Process steps — connecting line between numbers === */
.process-steps {
  position: relative;
}

@media (min-width: 1024px) {
  .process-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 12.5%; right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg,
      var(--c-accent) 0%,
      var(--c-accent-soft) 25%,
      var(--c-accent-soft) 75%,
      var(--c-accent) 100%);
    z-index: 0;
    opacity: 0.5;
  }
}

/* v1.17.1 — resize the circle to fit the larger gradient-text numbers.
 * The v1.8.0 override bumped font-size to --fs-2xl but left the 24x24
 * container, so the numerals overflowed. Now the circle is 44x44 with
 * a more prominent border, and the numerals sit centered inside. */
.process-steps__num {
  width: 44px !important;
  height: 44px !important;
  top: -10px !important;
  right: -10px !important;
  border-width: 3px !important;
  background: var(--c-accent) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg) !important;
  line-height: 1 !important;
  /* Make sure the gradient text doesn't get clipped by the circle */
  padding: 0 !important;
}
@media (max-width: 640px) {
  .process-steps__num {
    width: 36px !important;
    height: 36px !important;
    font-size: var(--fs-md) !important;
    top: -8px !important;
    right: -8px !important;
    border-width: 2px !important;
  }
}

/* === Trust trio cards — floating gradient border on hover === */
.trust-trio__card {
  position: relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.trust-trio__card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--c-accent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}

.trust-trio__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2, 33, 78, 0.18);
}

.trust-trio__card:hover::before {
  opacity: 1;
}

/* === Eyebrow text — amber underline accent === */
.eyebrow {
  /* v1.23.9 — removed `padding-inline-end` and the `::after` amber */
  /* dash that previously trailed every eyebrow. The dash used      */
  /* `var(--grad-amber)` (a gradient — quiet violation of the       */
  /* no-gradients site rule) and read as decorative noise next to   */
  /* clean editorial section headers. Eyebrow now sits alone.       */
  position: relative;
}

/* === Final CTA — extra glow === */
.final-cta {
  position: relative;
}

.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-amber-glow);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.final-cta__inner {
  position: relative;
  z-index: 1;
}


/* ============================================================ */
/* HERO FORM BLEND — no harsh white card, blends into hero       */
/* VU/Better-style integrated lead form treatment                */
/* ============================================================ */
.hero-form-blend {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  box-shadow:
    0 0 60px rgba(2, 33, 78, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 1024px) {
  .hero-form-blend { padding: var(--sp-4); }
}

/* Force FF Pro form fields onto dark/glassy bg */
.hero-form-blend .fluentform .ff-el-input--label label,
.hero-form-blend .fluentform .ff_step_container .ff-el-input--label label {
  color: var(--c-ink-inverse) !important;
}

.hero-form-blend .fluentform .ff-el-form-control {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--c-ink);
}

.hero-form-blend .fluentform .ff-el-form-control:focus {
  background-color: #fff;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-glow);
}

.hero-form-blend .fluentform .ff-el-help-message {
  color: rgba(255, 255, 255, 0.70) !important;
}

.hero-form-blend .fluentform .ff_step_text,
.hero-form-blend .fluentform .ff-step-header-counter {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Pill options on dark hero — translucent white */
.hero-form-blend .fluentform .ff-pill-options .ff-el-form-check label {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  color: var(--c-ink-inverse);
}

.hero-form-blend .fluentform .ff-pill-options .ff-el-form-check label:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--c-accent);
}

.hero-form-blend .fluentform .ff-pill-options input[type="radio"]:checked + label {
  background: var(--c-accent);
  border-color: transparent;
  color: var(--c-ink-inverse);
}

/* Back button on hero — visible against dark bg */
.hero-form-blend .fluentform .ff-btn-prev,
.hero-form-blend .fluentform .ff_btn_back {
  color: rgba(255, 255, 255, 0.70) !important;
}

.hero-form-blend .fluentform .ff-btn-prev:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--c-ink-inverse) !important;
}

/* TCPA consent text on dark bg */
.hero-form-blend .fluentform .ff-tcpa label {
  color: rgba(255, 255, 255, 0.65) !important;
}

.hero-form-blend .fluentform .ff-tcpa label a {
  color: var(--c-accent);
}

/* ============================================================ */
/* ZONE HEADER — centered with consistent spacing                */
/* Standardized zone intro pattern (eyebrow + h2 + lede)         */
/* ============================================================ */
.zone-header {
  margin-block-end: var(--sp-4);
}

.zone-header--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.zone-header--center .eyebrow {
  display: inline-block;
}

.zone-header--center h2 {
  margin-block-end: var(--sp-2);
}

.zone-header__lede {
  font-size: var(--fs-md);
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
  max-width: 60ch;
  margin-inline: auto;
  margin-block: var(--sp-1) 0;
}

.zone--dark .zone-header__lede {
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================================ */
/* PROSE ZONE — long-form SEO body copy block                    */
/* Used for AEO direct-answer sections (e.g., "What is Texas    */
/* down payment assistance?"). Narrow reading width, normal     */
/* prose treatment with comfortable line-height.                 */
/*                                                                */
/* v1.8.9: Force white bg with !important so the homepage's     */
/* navy `body.home { #020812 !important }` doesn't bleed through.*/
/* This is the only "light card" on a navy homepage page —      */
/* readable body copy needs to read on white, not navy.          */
/* ============================================================ */
.prose-zone {
  padding-block: var(--sp-6);
  background-color: var(--c-surface) !important;
  color: var(--c-ink) !important;
}

.home .prose-zone {
  background-color: var(--c-surface) !important;
}

/* ============================================================ */
/* v1.8.10 — Stats section ("Texas DPA at a glance") same       */
/* white-bg treatment so navy body.home bleed doesn't show.     */
/* ============================================================ */
.home .stats-zone-decor {
  background-color: var(--c-surface) !important;
  color: var(--c-ink) !important;
}

.home .stats-zone-decor h2,
.home .stats-zone-decor .stat__value,
.home .stats-zone-decor .stat__label {
  color: var(--c-ink) !important;
}

.home .stats-zone-decor p {
  color: var(--c-ink-muted) !important;
}

.home .stats-zone-decor .eyebrow {
  color: var(--c-primary) !important;
}

/* v1.49.11 — Homepage section eyebrows hidden (per Tyler 2026-05-26).
 * H2 alone is enough on most homepage sections. The calculator section
 * eyebrow ("Affordability check") and the Texas-map section eyebrow
 * ("Explore by Region") are kept.
 *
 * v1.49.12 — Exception below uses `display: inline-block` (the .eyebrow pill
 * default) instead of `display: revert`, which was reverting a <p> back to UA
 * `display: block` and making the pill 720px wide instead of hugging its text.
 *
 * v1.49.13 — (a) `.hero-takeover__eyebrow` added back to the hide list — Tyler
 * doesn't want an eyebrow above the homepage H1. (b) `.shopdpa-tx-map .eyebrow`
 * added to the exception list — the "Explore by Region" eyebrow above the
 * Texas regions map is wanted back. Memory rule: feedback_no_section_eyebrows.md. */
body.home .eyebrow,
body.home .hero-takeover__eyebrow,
body.home .section-break__eyebrow {
  display: none;
}

body.home #calculator .eyebrow,
body.home .shopdpa-tx-map .eyebrow {
  display: inline-block;
}

/* ============================================================ */
/* PILLAR D1 — /texas-down-payment-assistance/                  */
/* Content-first pillar layout: hero, TOC, body sections,       */
/* byline. Optimized for long-form readability + SEO. v1.9.0    */
/* ============================================================ */

/* Hero — content-first */
.pillar-hero {
  background-color: var(--c-surface) !important;
  padding-block: var(--sp-7) var(--sp-5);
}

.pillar-hero__inner {
  max-width: 64rem;
  margin-inline: auto;
  text-align: center;
}

.pillar-hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-2);
}

.pillar-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: var(--lh-tight);
  color: var(--c-primary);
  margin-block-end: var(--sp-3);
  letter-spacing: -0.02em;
}

.pillar-hero__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  max-width: 56rem;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
}

.pillar-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
}

.pillar-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
}

.pillar-hero__meta-item svg {
  flex-shrink: 0;
}

/* v1.49.8 — Byline avatar inside the hero meta line.
 * The standalone .pillar-byline-top card was retired; the avatar + name + NMLS
 * now live here so the byline only appears once. Avatar sits between "Reviewed
 * by" and the linked name, hugging the name tighter than the lead-in text. */
.pillar-hero__meta-item--byline {
  gap: 0; /* override the .pillar-hero__meta-item default — we control spacing via margins on the avatar so the comma doesn't get a flex-gap before it */
}

.pillar-hero__byline-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
  margin-inline: 0.45rem 0.3rem; /* slight room after "Reviewed by", tighter to the linked name so the avatar reads as paired with the person */
}

.pillar-hero__byline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 140ms ease;
}

.pillar-hero__byline-link:hover,
.pillar-hero__byline-link:focus-visible {
  text-decoration-color: currentColor;
}

/* Defensive: if any cached HTML still contains a rendered .pillar-byline-top
 * before the cache purges, hide it. The shortcode now returns nothing, so this
 * only matters for the cache-purge window. */
.pillar-byline-top { display: none; }

/* Table of contents */
.pillar-toc {
  background-color: var(--c-bg-alt) !important;
  padding-block: var(--sp-4);
  border-block: 1px solid var(--c-border);
}

.pillar-toc__inner {
  max-width: 72rem;
  margin-inline: auto;
}

.pillar-toc__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-2);
}

.pillar-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-1) var(--sp-3);
  counter-reset: toc;
}

.pillar-toc__list li {
  counter-increment: toc;
  position: relative;
  padding-inline-start: 2rem;
}

.pillar-toc__list li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

.pillar-toc__list a {
  color: var(--c-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: color var(--t-base) var(--ease);
}

.pillar-toc__list a:hover { color: var(--c-accent); }

/* Pillar body sections — share .prose-zone + .prose-block */
.pillar-body {
  scroll-margin-top: 80px;
}

.prose-block h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--c-primary);
  margin-block: var(--sp-3) var(--sp-1);
  line-height: var(--lh-tight);
}

.prose-block ul,
.prose-block ol {
  margin-block: var(--sp-2);
  padding-inline-start: var(--sp-3);
}

.prose-block ul li,
.prose-block ol li {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  margin-block-end: var(--sp-half);
}

.prose-block__callout {
  background-color: var(--c-bg-alt);
  border-left: 3px solid var(--c-primary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: var(--sp-3);
  font-size: var(--fs-md);
}

/* DPA types grid (3 cards) */
.dpa-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-3);
}

.dpa-type-card {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  position: relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.dpa-type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.dpa-type-card__num {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--c-accent);
  opacity: 0.4;
  line-height: 1;
}

.dpa-type-card h3 {
  margin-block: 0 var(--sp-1);
  font-size: var(--fs-lg);
}

.dpa-type-card p {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0;
}

/* Loan combos grid (4 cards) */
.loan-combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-3);
}

.loan-combo {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  border-top: 3px solid var(--c-accent);
}

.loan-combo h3 {
  margin-block: 0 var(--sp-1);
  font-size: var(--fs-lg);
}

.loan-combo p {
  font-size: var(--fs-sm);
  color: var(--c-ink);
  margin: 0;
}

/* State admin grid (TSAHC + TDHCA) */
.state-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-3);
}

.state-admin-card {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.state-admin-card header {
  border-bottom: 1px solid var(--c-border);
  padding-block-end: var(--sp-2);
  margin-block-end: var(--sp-2);
}

.state-admin-card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0;
}

.state-admin-card h3 {
  font-size: var(--fs-2xl);
  color: var(--c-primary);
  margin-block: var(--sp-half) 0;
}

.state-admin-card__sub {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0;
}

.state-admin-card ul {
  margin-block: var(--sp-1) var(--sp-2);
}

/* Docs checklist */
.docs-checklist {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0;
}

.docs-checklist li {
  position: relative;
  padding-inline-start: var(--sp-3);
  padding-block: var(--sp-half);
  border-bottom: 1px solid var(--c-border);
}

.docs-checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  top: var(--sp-half);
  color: var(--c-accent);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

/* Pillar byline card */
.pillar-byline {
  background-color: var(--c-bg) !important;
  padding-block: var(--sp-5);
}

.pillar-byline__card {
  max-width: 56rem;
  margin-inline: auto;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.pillar-byline__avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--c-bg-alt);
  display: block;
}

.pillar-byline__body { flex: 1; }

.pillar-byline__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-half);
}

.pillar-byline__name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--c-primary);
  margin: 0 0 var(--sp-half);
}

.pillar-byline__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border);
}

.pillar-byline__credentials {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-1);
}

.pillar-byline__bio {
  font-size: var(--fs-sm);
  color: var(--c-ink);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-1);
}

.pillar-byline__updated {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  margin: 0;
}

@media (max-width: 640px) {
  .pillar-byline__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================ */
/* v1.11.0 — Pillar enhancements: summary + breadcrumbs        */
/* (VU-inspired UX patterns)                                    */
/* ============================================================ */

/* Breadcrumb nav — slim line above the hero */
.pillar-breadcrumbs {
  background-color: var(--c-bg-alt);
  padding-block: var(--sp-1);
  border-block-end: 1px solid var(--c-border);
  font-size: var(--fs-xs);
}

.pillar-breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-half);
  align-items: center;
}

.pillar-breadcrumbs__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  color: var(--c-ink-muted);
}

.pillar-breadcrumbs__list li:not(:last-child)::after {
  content: "›";
  color: var(--c-ink-soft);
  margin-inline-start: var(--sp-half);
}

.pillar-breadcrumbs__list a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.pillar-breadcrumbs__list a:hover {
  color: var(--c-accent);
}

.pillar-breadcrumbs__list li[aria-current="page"] {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

/* Key takeaways summary box — bold, scannable, AEO-friendly */
.pillar-summary-zone {
  padding-block: var(--sp-3) 0;
  background-color: var(--c-surface);
}

.pillar-summary {
  max-width: 56rem;
  margin-inline: auto;
  background: linear-gradient(135deg, var(--c-bg-alt) 0%, var(--c-bg) 100%);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  box-shadow: var(--elev-1);
}

.pillar-summary__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--sp-2);
}

.pillar-summary__list {
  margin: 0;
  padding-inline-start: var(--sp-3);
  list-style: none;
}

.pillar-summary__list li {
  position: relative;
  padding-inline-start: var(--sp-2);
  margin-block-end: var(--sp-1);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
}

.pillar-summary__list li::before {
  content: "✓";
  position: absolute;
  left: -1rem;
  top: 0;
  color: var(--c-accent);
  font-weight: var(--fw-bold);
}

.pillar-summary__list li:last-child {
  margin-block-end: 0;
}

@media (max-width: 640px) {
  .pillar-summary {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    margin-inline: var(--sp-1);
  }
}

/* ============================================================ */
/* v1.12.0 — VU-pattern pillar UX upgrades                      */
/* ============================================================ */

/* 1. Pillar pages get a WHITE body bg so sides match content
 *    (no bone/cream rails alongside white sections). */
body.is-pillar-page {
  background-color: var(--c-surface) !important;
}

body.is-pillar-page .prose-zone,
body.is-pillar-page .pillar-hero,
body.is-pillar-page .pillar-summary-zone,
body.is-pillar-page .pillar-byline-top,
body.is-pillar-page .pillar-byline {
  background-color: var(--c-surface) !important;
}

/* The pillar TOC + breadcrumbs stay on a slightly tinted bg for separation. */
body.is-pillar-page .pillar-toc {
  background-color: var(--c-bg-alt) !important;
}

body.is-pillar-page .pillar-breadcrumbs {
  background-color: var(--c-surface) !important;
  border-block-end-color: var(--c-border);
}

/* Section dividers on pillar pages — v1.15.5: DISABLED entirely.
 * They were running full-viewport-width across the TOC (looked bad)
 * and visual separation between H2 sections is already strong from
 * heading typography + spacing. */
body.is-pillar-page .pillar-body + .pillar-body,
body.is-pillar-page .pillar-summary-zone + .pillar-body,
body.is-pillar-page .pillar-body + .pillar-byline,
body.is-pillar-page .pillar-body + .pillar-body > .container,
body.is-pillar-page .pillar-summary-zone + .pillar-body > .container,
body.is-pillar-page .pillar-body + .pillar-byline > .container {
  border-block-start: none !important;
}

/* 2. Top byline strip — compact, horizontal, right under the hero */
.pillar-byline-top {
  background-color: var(--c-surface);
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--c-border);
}

.pillar-byline-top__inner {
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.pillar-byline-top__person {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.pillar-byline-top__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--c-bg-alt);
  display: block;
}

.pillar-byline-top__meta {
  text-align: left;
}

.pillar-byline-top__role {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--c-ink-muted);
  margin: 0;
  line-height: 1;
}

.pillar-byline-top__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--c-primary);
  margin: 2px 0 0;
  line-height: 1.2;
}

.pillar-byline-top__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border);
}

.pillar-byline-top__name a:hover {
  border-bottom-color: var(--c-accent);
}

.pillar-byline-top__credentials {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  margin: 2px 0 0;
  line-height: 1.3;
}

.pillar-byline-top__divider {
  width: 1px;
  height: 32px;
  background-color: var(--c-border);
}

.pillar-byline-top__updated {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-half);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

.pillar-byline-top__updated strong {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

@media (max-width: 640px) {
  .pillar-byline-top__divider {
    display: none;
  }
  .pillar-byline-top__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-1);
  }
}

/* 3. v1.15.0 — Inline TOC, NO container.
 * VU pattern: TOC sits parallel to article content, no card/box.
 * Just a bold label + indented links with chevron markers. Floats
 * to the right at ≥1100px so body sections wrap around it. Falls
 * back to inline above content on smaller screens. */
.pillar-sticky-toc {
  /* Mobile/tablet default — inline above content, slim styling */
  margin: 0 auto var(--sp-4);
  max-width: 64rem;
  padding-inline: var(--sp-3);
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: var(--fs-sm);
}

.pillar-sticky-toc__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  border: none;
  display: block;
  line-height: 1.3;
}

.pillar-sticky-toc__label::before {
  content: none; /* drop the orange accent bar */
}

.pillar-sticky-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pillar-sticky-toc__list li {
  position: relative;
  margin: 0;
  border: none;
}

.pillar-sticky-toc__list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  color: var(--c-link, #1a4a7c);
  text-decoration: none;
  font-size: var(--fs-md);
  line-height: 1.45;
  border: none;
  border-radius: 0;
  transition: color var(--t-base) var(--ease);
}

/* VU-style chevron marker as a pseudo-element ::before.
 * v1.49.30 — `color: inherit` (was `var(--c-accent)`) so the chevron tracks
 * the link's own color through every state: muted on inactive items
 * (matches the greyed-out link text), amber on hover, amber on .is-active.
 * Previously chevrons rendered amber across all states which read
 * disconnected from the link colors per Tyler 2026-05-29. The .is-active
 * override below explicitly keeps the active chevron amber. */
.pillar-sticky-toc__list a::before {
  content: "›";
  position: static;
  transform: none;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.3;
  color: inherit;
  font-weight: var(--fw-bold);
  margin-top: 0;
}

.pillar-sticky-toc__list a:hover {
  color: var(--c-accent);
  background: transparent;
  text-decoration: underline;
}

.pillar-sticky-toc__list a.is-active {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
  background: transparent;
}

.pillar-sticky-toc__list a.is-active::before {
  color: var(--c-accent);
}

/* Float beside content on wide screens — TRUE VU layout.
 * Two key concerns:
 *   1. The TOC floats right at fixed width.
 *   2. Body section CONTAINERS must leave 320px of right-side room
 *      so their content (tables, prose, cards) doesn't overlap the
 *      floated TOC. Block-level boxes ignore floats; only their
 *      inline CONTENT wraps. We constrain the .container width
 *      explicitly so the section's INNER box never reaches the TOC.
 */
@media (min-width: 1100px) {
  .pillar-sticky-toc {
    float: right;
    width: 270px;
    margin: 0 0 var(--sp-3) var(--sp-5);
    /* v1.49.32 — Restore the 48px top padding that the v1.49.31 base rule
     * sets. The old `padding: 0` shorthand here was zeroing all four sides
     * inside the desktop sticky breakpoint, killing the breathing room.
     * Explicit per-side values now: 48px top (matches .pillar-body), 0 on
     * the rest. */
    padding: 48px 0 0 0;
    max-width: none;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    z-index: 5;
    /* v1.49.31 — Constrain TOC height to the visible viewport so the bottom
     * items are reachable even on long lists. Without this, sticky TOCs
     * taller than viewport hide their last entries below the fold with no
     * way to scroll to them. `calc(100vh - 120px)` reserves the 100px sticky
     * top offset + ~20px bottom buffer. Internal scroll is `overflow-y: auto`
     * so a thin scrollbar appears only when content overflows; thin scrollbar
     * styling keeps the visual quiet. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(2, 33, 78, 0.25) transparent;
  }
  /* Slim WebKit scrollbar styling (matches the Firefox `scrollbar-width: thin`
   * above) — visible only when the TOC is actually scrollable. */
  .pillar-sticky-toc::-webkit-scrollbar {
    width: 6px;
  }
  .pillar-sticky-toc::-webkit-scrollbar-thumb {
    background-color: rgba(2, 33, 78, 0.25);
    border-radius: 3px;
  }
  .pillar-sticky-toc::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Constrain only the OUTERMOST container, not nested .prose-block.
   * v1.15.4: TOC = 270px wide + 40px gap, total reservation = 350px so body
   * content has comfortable breathing room before the TOC. */
  body.is-pillar-page .pillar-summary-zone > .container,
  body.is-pillar-page .pillar-body > .container {
    max-width: calc(100% - 350px) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    padding-inline-end: 0 !important;
  }
  /* Inner prose-block fills its (now-constrained) parent container */
  body.is-pillar-page .pillar-body .prose-block,
  body.is-pillar-page .pillar-summary-zone .pillar-summary {
    max-width: none;
    margin-inline: 0;
    width: 100%;
  }
  /* The first body section after TOC needs a touch of top padding so it lines up with TOC label */
  body.is-pillar-page .pillar-sticky-toc + .pillar-summary-zone,
  body.is-pillar-page .pillar-sticky-toc + .pillar-body {
    padding-block-start: 0;
  }
  /* FAQ + final-cta + final byline must clear the float so they go full-width */
  body.is-pillar-page .zone--alt[aria-label*="frequently asked"],
  body.is-pillar-page .final-cta,
  body.is-pillar-page .pillar-byline:not(.pillar-byline-top) {
    clear: both;
  }
  /* When body sections clear the float, restore their default container width */
  body.is-pillar-page .zone--alt[aria-label*="frequently asked"] > .container,
  body.is-pillar-page .final-cta > .container,
  body.is-pillar-page .pillar-byline:not(.pillar-byline-top) > .container {
    max-width: 72rem;
    margin-inline: auto;
  }
}

/* ============================================================ */
/* v1.15.0 — Slim VU-style header band (drop card unification)  */
/* v1.15.2 — Full-viewport-width header (escape Bricks parent). */
/* Header zone: tight padding, breadcrumbs + slim H1 + tight    */
/* author byline. NOT a contained card. Edge-to-edge bg.        */
/* ============================================================ */

/* Break header zones OUT of any parent container so the tinted
 * background runs edge-to-edge of the viewport (VU pattern). */
body.is-pillar-page .pillar-breadcrumbs,
body.is-pillar-page .pillar-hero,
body.is-pillar-page .pillar-hero + .pillar-byline-top {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  left: 0;
}

body.is-pillar-page .pillar-hero {
  background-color: var(--c-bg-alt) !important;
  /* v1.49.9 — Bottom padding bumped sp-3 → sp-5 + border + margin pulled in
   * from the retired .pillar-byline-top sibling (v1.49.8) which used to carry
   * the visual separation between the hero and the body content. Without this,
   * the body + TOC flush against the hero with no breathing room.
   * v1.49.31 — `margin-block-end` zeroed. The 32px (var(--sp-4)) outside
   * margin was exposing the page's cream `--c-bg-alt` body bg in the gap
   * between hero bottom and body top (most visible on pillar Posts where
   * the centered <article> exposes side rails of cream). Replacement
   * spacing now lives as `padding-block-start: 48px` on .pillar-body
   * and .pillar-sticky-toc — same visual separation, no bleed-through. */
  padding-block: var(--sp-4) var(--sp-5);
  border-block-start: none;
  border-block-end: 1px solid var(--c-border);
  margin-block-end: 0;
}

/* v1.49.31 — Hero-bottom-margin replacement: push body + sticky TOC down
 * 48px from the hero so the visual rhythm matches the old margin-based
 * separation, but as INSIDE padding instead of OUTSIDE margin (no cream
 * bg bleed-through). Mirrors Tyler's live edit. */
body.is-pillar-page .pillar-body.prose-zone {
  padding-block-start: 48px;
}
body.is-pillar-page .pillar-sticky-toc {
  padding-block-start: 48px;
}

/* v1.49.8 retained: .pillar-byline-top is hidden via the defensive
 * `.pillar-byline-top { display: none; }` rule near the top of this file. */

/* Drop the v1.13.0 inner card wrapping — header is just text on tinted bg.
 * v1.15.3: align ALL header elements (breadcrumbs, hero, byline-top) to the
 * SAME max-width + padding so the H1 left edge sits exactly under the
 * "Home" breadcrumb. Single source of truth via shared rule below. */
body.is-pillar-page .pillar-hero .pillar-hero__inner {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

body.is-pillar-page .pillar-hero + .pillar-byline-top .pillar-byline-top__inner {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border-block-start: none;
  justify-content: flex-start;
}

/* SHARED rule: identical container width + padding for all three header rows.
 * This guarantees breadcrumbs "Home" link, hero H1, and byline avatar all
 * left-align at the same X position. */
body.is-pillar-page .pillar-breadcrumbs .pillar-breadcrumbs__list,
body.is-pillar-page .pillar-hero .pillar-hero__inner,
body.is-pillar-page .pillar-hero + .pillar-byline-top .pillar-byline-top__inner {
  max-width: 84rem !important;
  margin-inline: auto !important;
  padding-inline: var(--sp-3) !important;
  box-sizing: border-box;
}

/* Tighten the H1 — VU-slim sizing */
body.is-pillar-page .pillar-hero__h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-block-end: var(--sp-2);
  text-align: left;
}

body.is-pillar-page .pillar-hero__eyebrow {
  text-align: left;
}

body.is-pillar-page .pillar-hero__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  text-align: left;
  margin-inline: 0;
  max-width: none;        /* fill parent (84rem) like the H1 does */
  margin-block-end: var(--sp-2);
}

body.is-pillar-page .pillar-hero__meta {
  justify-content: flex-start;
  margin-block-start: var(--sp-2);
}

/* Breadcrumbs sit ABOVE the hero, on same tinted bg, slim */
body.is-pillar-page .pillar-breadcrumbs {
  background-color: var(--c-bg-alt) !important;
  border-block-end: none !important;
  padding-block: var(--sp-3) 0;
}

/* (max-width + margin-inline + padding-inline now set in the SHARED rule above so
 *  breadcrumbs, hero, and byline-top all align identically.) */

/* ============================================================ */
/* v1.13.0 — Body section containers (clearer separation)      */
/* Each prose-zone section gets a subtle bottom-border + ample */
/* padding so they read as distinct cards/blocks instead of one */
/* long scroll. */
/* ============================================================ */
/* v1.15.6: removed border-block-end on .prose-zone — it was running
 * full-viewport-width under the TOC. Kept the padding tweak only. */
body.is-pillar-page .prose-zone {
  border-block-end: none !important;
  padding-block: var(--sp-5);
}

body.is-pillar-page .prose-zone:last-of-type {
  border-block-end: none !important;
}

/* Reduce top margin on first prose-zone (under summary) */
body.is-pillar-page .pillar-summary-zone + .prose-zone {
  padding-block-start: var(--sp-4);
}

/* ============================================================ */
/* v1.13.0 — D4 comparison-table + decision-card styling       */
/* ============================================================ */

.vs-table-wrap {
  overflow-x: auto;
  margin-block: var(--sp-3);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(2, 33, 78, 0.05);
}

.vs-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--c-surface);
  font-size: var(--fs-sm);
}

.vs-table thead th {
  background-color: var(--c-bg-alt);
  padding: var(--sp-2);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  border-block-end: 2px solid var(--c-accent);
}

.vs-table th[scope="col"].vs-table__col {
  text-align: center;
  font-size: var(--fs-md);
}

.vs-table th[scope="row"] {
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  background-color: var(--c-bg);
  text-align: left;
  width: 26%;
  vertical-align: top;
}

.vs-table td,
.vs-table th {
  padding: var(--sp-1) var(--sp-2);
  border-block-end: 1px solid var(--c-border);
  vertical-align: top;
  line-height: 1.5;
}

.vs-table tbody tr:hover {
  background-color: var(--c-bg);
}

.vs-table__col--tsahc { color: var(--c-primary); }
.vs-table__col--tdhca { color: var(--c-primary); }

.vs-table tbody tr:last-child td,
.vs-table tbody tr:last-child th {
  border-block-end: none;
}

@media (max-width: 640px) {
  .vs-table {
    font-size: var(--fs-xs);
  }
  .vs-table th[scope="row"] {
    width: 30%;
  }
}

/* Decision-tree card grid (D4) */
.vs-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-3);
}

.vs-decision-card {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  border-top: 3px solid var(--c-accent);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.vs-decision-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.vs-decision-card header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-block-end: var(--sp-1);
}

.vs-decision-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--c-primary);
  color: var(--c-surface);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.vs-decision-card h3 {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.3;
}

.vs-decision-card p {
  font-size: var(--fs-sm);
  margin: 0;
  color: var(--c-ink);
}

.prose-block {
  max-width: 72ch;
  margin-inline: auto;
  text-align: left;
}

.prose-block .eyebrow {
  text-align: center;
  margin-block-end: var(--sp-1);
}

.prose-block h2 {
  text-align: center;
  margin-block-end: var(--sp-3);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: var(--lh-tight);
}

/* v1.49.0 — About page (page-id-31): left-align the prose headings so they
   share the left edge with the left-aligned body copy. The global centered
   heading over left-aligned body read as inconsistent on this editorial page.
   Scoped to the About page so the homepage + other prose pages are untouched. */
body.page-id-31 .prose-block h2,
body.page-id-31 .prose-block h3 {
  text-align: left;
}

.prose-block p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  margin-block-end: var(--sp-2);
}

.prose-block__lede {
  font-size: var(--fs-lg) !important;
  color: var(--c-ink) !important;
  line-height: var(--lh-relaxed);
  border-left: 3px solid var(--c-accent);
  padding-inline-start: var(--sp-3);
  margin-block-end: var(--sp-3) !important;
}

.prose-block a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--t-base) var(--ease);
}

.prose-block a:hover {
  color: var(--c-accent);
  text-decoration-thickness: 2px;
}

.prose-block .cta-open-hero {
  display: inline-block;
  margin-block-start: var(--sp-1);
}

@media (max-width: 640px) {
  .prose-block__lede {
    padding-inline-start: var(--sp-2);
  }
}

/* ============================================================ */
/* FINAL CTA — better proportions, fintech feel                  */
/* ============================================================ */
.final-cta {
  padding-block: var(--sp-7);
}

.final-cta__inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.final-cta h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-inverse);
  margin-block-end: var(--sp-2);
  line-height: var(--lh-tight);
}

@media (min-width: 1024px) {
  .final-cta h2 { font-size: var(--fs-3xl); }
}

.final-cta__body {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.85);
  margin-block-end: var(--sp-4);
  max-width: 56ch;
  margin-inline: auto;
}

.final-cta__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
}

@media (min-width: 768px) {
  .final-cta__cta-row {
    flex-direction: row;
    gap: var(--sp-3);
  }
}

.final-cta__phone {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  font-size: var(--fs-md);
}

.final-cta__phone:hover {
  color: var(--c-accent);
}

/* ============================================================ */
/* MODERN FINTECH FEEL — heading weight bump + tighter tracking */
/* ============================================================ */
h1, h2, h3 {
  font-weight: var(--fw-bold);
  letter-spacing: -0.022em;
}

h1 { letter-spacing: -0.028em; }

.hero-fullbleed h1 {
  font-weight: 700;
  letter-spacing: -0.032em;
}

/* Make eyebrows feel more modern — smaller, tighter */
.eyebrow,
.hero-fullbleed__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: var(--fw-semibold);
}


/* ============================================================ */
/* HERO TAKEOVER — VU/Better.com-style                           */
/* Default state: big text + single CTA. Click CTA → form        */
/* slides in and replaces the text block.                        */
/* ============================================================ */
.hero-takeover {
  position: relative;
  background-color: var(--c-primary);
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-ink-inverse);
  padding-block: var(--sp-7) var(--sp-7);
  isolation: isolate;
  overflow: hidden;
  /* v1.17.8 — fill the user's viewport dynamically.
   * 100svh = small viewport height (avoids the iOS Safari address-bar jank
   * that 100vh can cause). Fallback to 100vh for older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-takeover { padding-block: var(--sp-8) var(--sp-8); }
}

.hero-takeover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 197, 40, 0.20) 0%, transparent 55%),
    linear-gradient(135deg, rgba(2, 33, 78, 0.86) 0%, rgba(8, 24, 46, 0.74) 60%, rgba(2, 33, 78, 0.50) 100%);
  z-index: 0;
}

/* TEXT MODE container */
.hero-takeover__text,
.hero-takeover__form {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w-page);
  padding-inline: var(--sp-3);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .hero-takeover__text,
  .hero-takeover__form { padding-inline: var(--sp-4); }
}

.hero-takeover__inner {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
}

.hero-takeover__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-3);
  padding: 6px 14px;
  background: rgba(255, 197, 40, 0.12);
  border: 1px solid rgba(255, 197, 40, 0.35);
  border-radius: var(--r-pill);
}

.hero-takeover__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.034em;
  margin: 0 0 var(--sp-3);
  color: var(--c-ink-inverse);
  /* Padding-bottom prevents italic descender clipping */
  padding-block-end: 0.12em;
}

.hero-takeover__h1 .h1-tail {
  font-style: italic;
  font-weight: 600;
  background: var(--c-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Italic glyphs need slight extra space on the right */
  padding-inline-end: 0.04em;
}

.hero-takeover__lede {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 56ch;
  margin: 0 auto var(--sp-4);
}

/* HUGE CTA button — VU-style pill, centered (v1.5.7) */
.hero-takeover__cta {
  display: flex;                /* was inline-flex — block-level + auto-margin centers */
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-5);
  margin: 0 auto;               /* center horizontally in hero column */
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  /* v1.20.0 — text color flipped from --c-ink-inverse (cream) to
   * --c-primary-deep (deep navy). Cream-on-amber rendered too bright;
   * deep navy on amber gives stronger contrast and a calmer CTA pop. */
  color: var(--c-primary-deep);
  background: var(--c-accent);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 60px;
  min-width: 280px;
  max-width: 360px;             /* don't grow past readable width */
  box-shadow: 0 8px 28px var(--c-accent-glow), inset 0 1px 0 rgba(255,255,255,0.30);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.hero-takeover__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px var(--c-accent-glow), inset 0 1px 0 rgba(255,255,255,0.40);
}

.hero-takeover__cta:active { transform: translateY(0); }

.hero-takeover__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 197, 40, 0.55), 0 14px 40px var(--c-accent-glow);
}

/* Arrow icon hidden in v1.5.7 — clean centered button instead */
.hero-takeover__cta-arrow {
  display: none !important;
}

/* v1.28.4 — Action group: wraps CTA + micro-copy as a single unit pushed
 * down vertically to sit centered between the bottom of the lede and the
 * top of the trust row at section bottom. clamp() scales the gap with
 * viewport height: ~40px on mobile (svh ~600), ~112px on desktop (svh ~900).
 * The trust row is absolute-positioned so it doesn't participate in flow;
 * this margin-only approach keeps the existing block layout intact. */
.hero-takeover__action {
  margin-block-start: clamp(2.5rem, 10vh, 7rem);
}

/* Micro-copy under the hero CTA. Matches the stats-zone "Many buyers
 * don't realize they qualify until they check." pattern under the See If
 * I Qualify CTA. Hero context: cream at reduced opacity instead of
 * --c-ink-muted (which would disappear on the dark photo overlay). */
.hero-takeover__cta-micro {
  margin-block: var(--sp-2) 0;
  margin-inline: auto;
  max-width: 60ch;
  font-size: var(--fs-xs);
  font-style: italic;
  color: rgba(250, 247, 242, 0.7);
  text-align: center;
  letter-spacing: 0.01em;
}

.hero-takeover__trust {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
  text-align: center;          /* trust line centered too */
}

/* === FORM MODE === */
.hero-takeover__form {
  display: none;
  position: relative;
  max-width: 720px;
  animation: shopdpaHeroFormIn 520ms var(--ease-out) backwards;
}

@keyframes shopdpaHeroFormIn {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-takeover.is-form-active .hero-takeover__text {
  display: none;
}

.hero-takeover.is-form-active .hero-takeover__form {
  display: block;
}

.hero-takeover.is-form-active .hero-takeover__text {
  animation: shopdpaHeroTextOut 240ms var(--ease) forwards;
}

@keyframes shopdpaHeroTextOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-takeover__form,
  .hero-takeover.is-form-active .hero-takeover__text { animation: none; }
}

.hero-takeover__close {
  position: absolute;
  top: -8px; right: var(--sp-2);
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  color: var(--c-ink-inverse);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 2;
}

.hero-takeover__close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}

.hero-takeover__close svg { width: 20px; height: 20px; }

.hero-takeover__form-inner {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow:
    0 0 80px rgba(2, 33, 78, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 1024px) {
  .hero-takeover__form-inner { padding: var(--sp-5); }
}

/* Inherit form blend styling on takeover form */
.hero-takeover__form-inner .fluentform .ff-el-input--label label,
.hero-takeover__form-inner .fluentform .ff_step_container .ff-el-input--label label {
  color: var(--c-ink-inverse) !important;
  font-size: var(--fs-2xl) !important;
  text-align: center;
  display: block;
  margin-block-end: var(--sp-3) !important;
}

@media (min-width: 1024px) {
  .hero-takeover__form-inner .fluentform .ff_step_container .ff-el-input--label label { font-size: 2.4rem !important; }
}

.hero-takeover__form-inner .fluentform .ff-el-form-control {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  font-size: var(--fs-md) !important;
  padding: var(--sp-3) !important;
  text-align: center;
}

.hero-takeover__form-inner .fluentform .ff-el-help-message,
.hero-takeover__form-inner .fluentform .ff_step_text,
.hero-takeover__form-inner .fluentform .ff-step-header-counter {
  color: rgba(255, 255, 255, 0.65) !important;
  text-align: center;
}

.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check label {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--c-ink-inverse);
  font-size: var(--fs-md);
  min-height: 64px;
}

.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check label:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--c-accent);
}

.hero-takeover__form-inner .fluentform .ff-pill-options input[type="radio"]:checked + label {
  background: var(--c-accent);
  border-color: transparent;
  color: var(--c-ink-inverse);
}

/* ============================================================ */
/* HIDE BACK BUTTON ON FIRST FORM STEP                           */
/* FF Pro shows the prev_btn on every step including step 1      */
/* — we hide it via CSS when the active step is index 0          */
/* ============================================================ */
.fluentform .ff_step_container .ff-step-body[data-name*="step_1"] .ff-btn-prev,
.fluentform .ff_step_container[data-step-current="0"] .ff-btn-prev,
.fluentform .ff_step_container[data-step-current="1"] .ff-btn-prev,
.fluentform .ff-step-body:first-of-type .ff-btn-prev {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Backup: hide prev when there's no value to go back to */
.fluentform[data-step-current="0"] .ff-btn-prev,
.fluentform[data-step-current="1"] .ff-btn-prev {
  display: none !important;
}


/* ============================================================ */
/* HERO EYEBROW — solid filled badge (not outlined)              */
/* ============================================================ */
.hero-takeover__eyebrow {
  background: var(--c-accent);
  border: none;
  color: var(--c-primary-deep);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 8px 16px;
  box-shadow: 0 4px 16px rgba(255, 197, 40, 0.35);
}

/* ============================================================ */
/* HIDE FF PRO REQUIRED ASTERISK + FLOATING INFO ICON           */
/* (User feedback: looks "off" / unnecessary visual noise)       */
/* ============================================================ */
.fluentform .ff-el-is-required.asterisk-right label::after,
.fluentform label .text-danger,
.fluentform label .ff-el-is-required-mark,
.fluentform .ff-el-is-required label::after,
.fluentform [class*="required"] label::after {
  display: none !important;
}

/* Hide the floating "i" info-icon tooltip indicator that FF Pro renders
   above the input when help_message is set. We show help text inline
   instead via .ff-el-help-message styling. */
.fluentform .ff-el-tooltip,
.fluentform .ff-el-input--label .text-danger + i,
.fluentform [data-toggle="tooltip"],
.fluentform .ff-el-input--label > .ff-icon,
.fluentform .ff_help_text_icon {
  display: none !important;
}

/* ============================================================ */
/* AUTO-ADVANCE radio pills (.ff-auto-advance container)         */
/* JS adds .is-advancing on click; this scales/fades the pill    */
/* before the Next button programmatically clicks                */
/* ============================================================ */
.fluentform .ff-auto-advance .ff-el-form-check {
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.fluentform .ff-auto-advance .ff-el-form-check.is-advancing {
  transform: scale(1.04);
}

.fluentform .ff-auto-advance .ff-el-form-check:not(.is-advancing).is-fading {
  opacity: 0.4;
}

/* ============================================================ */
/* FINAL CTA — kill the white gap below banner                   */
/* The gap was caused by margin-bottom on the section + extra    */
/* padding from parent containers. Force flush-to-footer.        */
/* ============================================================ */
.final-cta {
  margin-block-end: 0 !important;
  padding-block-end: var(--sp-7);
}

body.home article > .final-cta:last-child,
body.home article .final-cta:last-of-type {
  margin-block-end: 0;
}

/* Eliminate any default WP block bottom-spacing that creates the white gap */
body.home .wp-block-shortcode:last-of-type,
body.home .entry-content > *:last-child {
  margin-block-end: 0 !important;
  padding-block-end: 0 !important;
}

/* ============================================================ */
/* HERO TAKEOVER — make eyebrow look filled (not outlined)       */
/* (Also covers any leftover .hero-fullbleed__eyebrow uses.)     */
/* ============================================================ */
.hero-fullbleed__eyebrow {
  background: var(--c-accent) !important;
  border: none !important;
  color: var(--c-primary-deep) !important;
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  letter-spacing: 0.16em;
  font-weight: 700;
}


/* ============================================================ */
/* HERO TAKEOVER FORM — v2 (no blur, scoped pills)               */
/* Replaces blur with darker solid panel; pill styling now ONLY  */
/* targets option labels (not the question field label).         */
/* ============================================================ */

/* Replace blurred glassy panel with solid dark navy panel */
.hero-takeover__form-inner {
  background: rgba(6, 21, 40, 0.78) !important; /* deep navy semi-opaque */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 197, 40, 0.18);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* The question title (FIELD label) — NOT a pill, just clean heading */
.hero-takeover__form-inner .fluentform .ff-el-input--label > label,
.hero-takeover__form-inner .fluentform .ff_step_container .ff-el-input--label > label {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: center;
  display: block;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  text-transform: none !important;
  color: var(--c-ink-inverse) !important;
  margin-block-end: var(--sp-3) !important;
  line-height: 1.2 !important;
}

/* Help message under question — quiet inline text */
.hero-takeover__form-inner .fluentform .ff-el-help-message {
  text-align: center;
  font-size: var(--fs-sm) !important;
  color: rgba(255, 255, 255, 0.62) !important;
  margin-block-end: var(--sp-3) !important;
}

/* ----- PILL OPTIONS (scoped strictly to .ff-el-form-check) ----- */

/* Hide native radio circles */
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* Pill = full-width white solid card by default (not grey) */
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check {
  display: block;
  margin-block-end: var(--sp-1);
}

.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  background: #FFFFFF !important;
  color: var(--c-primary) !important;
  border: 2px solid #FFFFFF !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  min-height: 60px !important;
  margin: 0 !important;

  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease) !important;
}

/* Hover state — DISTINCT from selected (v1.6.3).
 * Earlier this used full --c-accent matching the selected state, causing
 * the first pill of each new step to look "selected" purely from cursor
 * stickiness across step transitions → user thought clicks weren't
 * advancing. Now hover is a subtle white-bg with amber border + light
 * shadow, clearly different from the amber-filled selected state. */
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check label:hover {
  background: #ffffff !important;
  border-color: var(--c-accent) !important;
  color: var(--c-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 197, 40, 0.18);
}

/* SELECTED state — only the actually-checked radio's label gets amber */
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check input[type="radio"]:checked + label,
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check input[type="radio"]:checked ~ label {
  background: var(--c-accent) !important;
  border-color: transparent !important;
  color: var(--c-ink-inverse) !important;
  box-shadow: 0 8px 24px var(--c-accent-glow);
  transform: translateY(-2px);
}

/* Reset siblings — kill any "is-selected" leakage from old JS */
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check input[type="radio"]:not(:checked) + label {
  background: #FFFFFF !important;
  color: var(--c-primary) !important;
  border-color: #FFFFFF !important;
}

/* Remove all the .is-selected, .is-fading, .is-advancing visual hacks
   that were creating the multi-highlight bug — let radios drive. */
.hero-takeover__form-inner .fluentform .ff-el-form-check.is-selected label,
.hero-takeover__form-inner .fluentform .ff-el-form-check.is-fading label,
.hero-takeover__form-inner .fluentform .ff-el-form-check.is-advancing label {
  /* NO override — let :checked selector handle it */
}

/* Step nav: hide the inline Next button when auto-advance is enabled
   — the user just clicks an option and it moves forward */
.hero-takeover__form-inner .fluentform .ff-auto-advance ~ .ff_step_btns_wrap .ff-btn-next,
.hero-takeover__form-inner .fluentform [data-name*="step_end"] .ff-btn-next {
  /* Keep next visible as fallback — but auto-advance JS will click it */
}


/* ============================================================ */
/* FORM MODE — strip container, solid dark navy section          */
/* (User feedback: form should sit directly on section bg, no    */
/* inner panel/border/shadow. VU pattern.)                       */
/* ============================================================ */

/* When form is active, deepen the entire section bg to solid navy
   and DROP the photo image — VU has clean dark navy in form mode */
.hero-takeover.is-form-active {
  background-image: none !important;
  background-color: var(--c-primary-deep, #000C24) !important;
}

.hero-takeover.is-form-active::before {
  /* Drop the gradient overlay — pure flat dark in form mode */
  background: transparent !important;
}

/* Strip ALL inner panel decoration — form floats on the section bg */
.hero-takeover__form-inner {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 720px;
  margin-inline: auto;
}

/* The form itself should also be transparent */
.hero-takeover__form-inner .fluentform,
.hero-takeover__form-inner .ff-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Step container — flat */
.hero-takeover__form-inner .fluentform .ff_step_container,
.hero-takeover__form-inner .fluentform .ff-step-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Re-style close button to fit the bare-bones layout */
.hero-takeover__close {
  top: var(--sp-2);
  right: var(--sp-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* ============================================================ */
/* HIDE Next button only on PILL STEPS (auto-advance)            */
/* v1.5.6 — FF Pro 6.x puts ALL steps in ONE .ff-step-body and  */
/* uses .fluentform-step as the per-step wrapper. Earlier rules  */
/* matched .ff-step-body:has(.ff-auto-advance) which was true    */
/* for every step → hid Next on county/income/timeline too →     */
/* user got stuck on first non-pill step.                        */
/* ============================================================ */
.fluentform-step:has(.ff-auto-advance) .ff-btn-next,
.fluentform-step:has(.ff-auto-advance) .ff_btn_next {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================ */
/* HERO TRUST LINE                                                */
/* v1.21.1 — middot separators replaced with amber check-circle  */
/*   icons next to each statement; flex/wrap for mobile.          */
/* v1.21.2 — anchored to bottom of section (markup moved out of   */
/*   .hero-takeover__text). Was directly under CTA — now sits at  */
/*   the foot of the hero. Hidden when form takes over.           */
/* ============================================================ */
.hero-takeover__trust {
  /* Anchor to bottom of the hero section (which is already        */
  /* position: relative — see line ~4951). max-content + 50%/     */
  /* translateX keeps it horizontally centered without stretching. */
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);                 /* 32px above section bottom */
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - var(--sp-4));
  margin: 0;
  z-index: 2;

  /* Layout for the three trust beats — flex wrap, centered */
  text-align: center !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1) var(--sp-2);        /* 8px row, 16px column */
  padding: 0;
}

/* Hide the trust line when the form mode is active — the trust */
/* used to live inside .hero-takeover__text (which gets         */
/* display:none on .is-form-active) but now lives outside it.   */
.hero-takeover.is-form-active .hero-takeover__trust {
  display: none !important;
}

.hero-takeover__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.hero-takeover__trust-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  color: var(--c-accent);  /* circle fills via currentColor */
}

.hero-takeover__trust-check {
  stroke: var(--c-primary-deep);
}

.hero-takeover__trust-label {
  display: inline-block;
}


/* ============================================================
   FF Pro multi-step progress bar — branded amber pill
   (v1.5.5 — overrides earlier mis-targeted selectors that used
   .ff-step-header-progress-bar; actual DOM uses .ff-el-progress)
   ============================================================ */

/* Container header */
.fluentform .ff-step-header {
  margin-bottom: var(--sp-4);
  padding: 0;
}

/* Hide the "Step 1 of 7 -" status line — the visual bar communicates it */
.fluentform .ff-step-header .ff-el-progress-status {
  display: none !important;
}

/* Hide the bullet list under the bar */
.fluentform .ff-step-header .ff-el-progress-title {
  display: none !important;
}

/* Outer rail — pill, dark navy, subtle */
.fluentform .ff-step-header .ff-el-progress {
  height: 8px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inner fill — amber gradient with glow */
.fluentform .ff-step-header .ff-el-progress-bar {
  height: 100% !important;
  background: var(--c-accent) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(255, 197, 40, 0.55) !important;
  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Hide the "14%" label inside the fill */
.fluentform .ff-step-header .ff-el-progress-bar > * {
  display: none !important;
}
.fluentform .ff-step-header .ff-el-progress-bar {
  font-size: 0 !important;
  color: transparent !important;
}

/* On dark hero takeover backdrop, lighten the rail slightly */
.hero-takeover__form-inner .fluentform .ff-step-header .ff-el-progress {
  background: rgba(255, 255, 255, 0.14) !important;
}


/* ============================================================
   FF Pro INPUT STYLING — branded, large, focus-glowing
   v1.5.6 — earlier .ff-big-input rules lost to FF Pro specificity.
   This block uses higher specificity + !important to override.
   Targets text, email, tel, number inputs + select (choices.js).
   ============================================================ */

/* Base input — large, pill-rounded, soft white, branded border */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform .ff-el-form-control:not(textarea):not(select) {
  width: 100% !important;
  min-height: 56px !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  line-height: 1.4 !important;
  color: var(--c-ink) !important;
  background-color: #ffffff !important;
  border: 1.5px solid rgba(2, 33, 78, 0.18) !important;
  border-radius: var(--r-pill) !important;
  box-shadow:
    0 1px 0 rgba(2, 33, 78, 0.04),
    0 4px 16px rgba(2, 33, 78, 0.06) !important;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease) !important;
}

/* Hover — brighten border */
.fluentform input[type="text"]:hover,
.fluentform input[type="email"]:hover,
.fluentform input[type="tel"]:hover,
.fluentform input[type="number"]:hover {
  border-color: rgba(2, 33, 78, 0.40) !important;
}

/* Focus — amber glow + bright border */
.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform input[type="number"]:focus,
.fluentform .ff-el-form-control:focus {
  outline: none !important;
  border-color: var(--c-accent) !important;
  box-shadow:
    0 0 0 4px rgba(255, 197, 40, 0.18),
    0 4px 20px rgba(255, 197, 40, 0.20) !important;
}

/* Placeholder — muted but readable */
.fluentform input::placeholder,
.fluentform .ff-el-form-control::placeholder {
  color: rgba(2, 33, 78, 0.42) !important;
  font-weight: var(--fw-normal);
}

/* Select / Choices.js — match input style */
.fluentform select,
.fluentform .choices,
.fluentform .choices__inner {
  width: 100% !important;
  min-height: 56px !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--c-ink) !important;
  background-color: #ffffff !important;
  border: 1.5px solid rgba(2, 33, 78, 0.18) !important;
  border-radius: var(--r-pill) !important;
  box-shadow:
    0 1px 0 rgba(2, 33, 78, 0.04),
    0 4px 16px rgba(2, 33, 78, 0.06) !important;
  transition: all var(--t-fast) var(--ease) !important;
}

.fluentform .choices__inner {
  display: flex !important;
  align-items: center !important;
}

.fluentform .choices.is-focused .choices__inner,
.fluentform .choices.is-open .choices__inner,
.fluentform select:focus {
  border-color: var(--c-accent) !important;
  box-shadow:
    0 0 0 4px rgba(255, 197, 40, 0.18),
    0 4px 20px rgba(255, 197, 40, 0.20) !important;
}

/* Choices dropdown panel */
.fluentform .choices__list--dropdown,
.fluentform .choices__list[aria-expanded] {
  border-radius: var(--r-md) !important;
  border: 1.5px solid rgba(2, 33, 78, 0.12) !important;
  box-shadow: 0 12px 32px rgba(2, 33, 78, 0.18) !important;
  margin-top: 6px !important;
}

.fluentform .choices__list--dropdown .choices__item,
.fluentform .choices__list[aria-expanded] .choices__item {
  padding: var(--sp-1) var(--sp-2) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
}

.fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: rgba(255, 197, 40, 0.10) !important;
  color: var(--c-accent-hover) !important;
}

/* Phone field with country code — keep aligned */
.fluentform .ff-el-phone {
  padding-left: var(--sp-5) !important;
}

.fluentform .iti__flag-container {
  border-radius: var(--r-pill) 0 0 var(--r-pill);
}

/* Field labels — clearer hierarchy */
.fluentform .ff-el-input--label label {
  font-family: var(--font-heading) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  color: inherit !important;
  margin-bottom: var(--sp-1) !important;
  display: block;
}

/* TCPA checkbox group — tidy up */
.fluentform .ff-tcpa label {
  font-size: var(--fs-xs) !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.72);
}

.fluentform .ff-tcpa input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  accent-color: var(--c-accent);
  margin-right: var(--sp-half);
}

/* Help text under inputs */
.fluentform .ff-el-help-message {
  font-size: var(--fs-xs) !important;
  color: rgba(2, 33, 78, 0.55) !important;
  margin-top: 6px !important;
  padding-left: var(--sp-2);
}

/* Error state */
.fluentform .ff-el-form-control.error,
.fluentform .ff-el-form-control.ff_has_error,
.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: #E53935 !important;
  box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.14) !important;
}

.fluentform .error_message,
.fluentform .ff-el-is-error .error {
  color: #E53935 !important;
  font-size: var(--fs-xs) !important;
  margin-top: 6px !important;
  padding-left: var(--sp-2);
}


/* ============================================================
   v1.5.8 — GLOW SAFE-AREA + question-title hygiene
   ============================================================ */

/* Pill button glows on hover/select were clipped by overflow:hidden on
 * .fluentform-step and .ff-step-container. Adding inline padding gives
 * the box-shadow room to render. We CANNOT remove overflow:hidden
 * because FF Pro's slide animation depends on it. */
.fluentform .ff-step-container {
  padding: 12px 18px !important;   /* horizontal safe-area for glow */
}
.fluentform .fluentform-step {
  padding: 6px 6px !important;     /* additional inner buffer */
}

/* On dark hero takeover, generous safe-area + room for glow on Next button */
.hero-takeover__form-inner .fluentform .ff-step-container {
  padding: 16px 24px !important;
}

/* The question label/title should never look interactive — kill any
 * residual cursor/transition leftovers from FF Pro defaults. */
.fluentform .ff-el-input--label,
.fluentform .ff-el-input--label > label {
  cursor: default !important;
  user-select: text;
}
.fluentform .ff-el-input--label > label:hover,
.fluentform .ff-el-input--label > label:focus {
  outline: none !important;
  text-decoration: none !important;
}

/* ============================================================
   v1.5.8 — HERO 100vh + darker house background for contrast
   ============================================================ */

.hero-takeover {
  /* Fill viewport so the form takes over the entire first screen */
  min-height: 100vh !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-takeover__inner {
  width: 100%;
}

/* Darker overlay over the house image — was too washed out before.
 * Keep the amber radial accent (subtle warmth from upper left) but stack
 * a deeper navy on top so the CTA + headline have stronger contrast. */
.hero-takeover::before {
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 197, 40, 0.16) 0%, transparent 55%),
    linear-gradient(
      135deg,
      rgba(4, 14, 28, 0.94) 0%,
      rgba(6, 21, 40, 0.88) 55%,
      rgba(4, 14, 28, 0.78) 100%
    ) !important;
}

/* Fallback solid bg in case the photo fails to load */
.hero-takeover {
  background-color: #04101e;
}


/* ============================================================
   v1.6.0 — TRANSPARENT HEADER OVER HERO + SOLID ON SCROLL
   ============================================================ */

/* Homepage (.home body class added by WP) — start with TRANSPARENT header
 * floating over the dark hero. Once .is-stuck is added by site.js (scroll
 * > 80px), the existing solid-cream rules above kick back in. */
/* v1.6.1 — back to sticky positioning. position:absolute caused the header
 * to sit at top:0 of body (behind WP admin bar / announcement strip) so
 * the user's nav was hidden. Sticky preserves natural document position
 * AND sticks to viewport top when scrolling — natural behavior. */
.home .site-header {
  position: sticky !important;
  top: 0;
  /* v1.18.5 — homepage ONLY: transparent at rest, fades to navy on scroll
   * (handled by .is-stuck class added via site.js scroll listener). */
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Logo + nav links + hamburger + phone — light on transparent state */
.home .site-header:not(.is-stuck) .site-header__logo {
  color: #ffffff !important;
}

.home .site-header:not(.is-stuck) .site-nav__link,
.home .site-header:not(.is-stuck) .site-nav a,
.home .site-header:not(.is-stuck) .site-header__phone {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* v1.23.15 — pill hover: amber bg + navy ink (matches Get Started CTA).
 * Selector specificity must beat .home .site-header:not(.is-stuck) .site-nav__link
 * which forces white text on the transparent-over-hero header state. */
.home .site-header:not(.is-stuck) .site-nav__link:hover,
.home .site-header:not(.is-stuck) .site-nav__link:focus-visible,
.home .site-header:not(.is-stuck) .site-nav a:hover {
  background-color: var(--c-accent) !important;
  color: var(--c-primary) !important;
}

.home .site-header.is-stuck .site-nav__link:hover,
.home .site-header.is-stuck .site-nav__link:focus-visible {
  background-color: var(--c-accent) !important;
  color: var(--c-primary) !important;
}

/* Hamburger icon — white bars on dark hero */
.home .site-header:not(.is-stuck) .site-header__hamburger,
.home .site-header:not(.is-stuck) .site-header__hamburger svg,
.home .site-header:not(.is-stuck) .site-header__hamburger path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* On scroll past 80px, .is-stuck is added — restore solid cream + dark text.
 * The base .site-header.is-stuck rule (line ~511) already does this; the
 * !important here just overrides our transparent rule above. */
.home .site-header.is-stuck {
  position: sticky !important;
  background-color: rgba(2, 33, 78, 0.95) !important; /* v1.18.6 — navy not cream */
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: var(--elev-1) !important;
  border-bottom-color: var(--c-border) !important;
}

/* v1.18.6 — keep text WHITE when stuck (navy bg) */
.home .site-header.is-stuck .site-header__logo,
.home .site-header.is-stuck .site-nav__link,
.home .site-header.is-stuck .site-nav a,
.home .site-header.is-stuck .site-header__phone {
  color: rgba(255,255,255,0.92) !important;
}

.home .site-header.is-stuck .site-header__hamburger,
.home .site-header.is-stuck .site-header__hamburger svg,
.home .site-header.is-stuck .site-header__hamburger path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Megamenu DROPDOWN content uses the regular dark-on-white treatment
 * regardless of nav transparency state. The .home .site-nav a rule above
 * was bleeding into .site-megamenu__col a (white text on white card =
 * invisible). Restore dark ink on the dropdown — both transparent + stuck
 * states. v1.8.8 */
.home .site-header .site-megamenu__col a,
.home .site-header:not(.is-stuck) .site-megamenu__col a,
.home .site-header.is-stuck .site-megamenu__col a {
  color: var(--c-ink) !important;
}
.home .site-header .site-megamenu__col a:hover,
.home .site-header:not(.is-stuck) .site-megamenu__col a:hover,
.home .site-header.is-stuck .site-megamenu__col a:hover {
  color: var(--c-primary) !important;
}
.home .site-header .site-megamenu__col h4,
.home .site-header:not(.is-stuck) .site-megamenu__col h4,
.home .site-header.is-stuck .site-megamenu__col h4 {
  color: var(--c-ink-muted) !important;
}

/* Smooth all the color/bg swaps */
.home .site-header,
.home .site-header__logo,
.home .site-nav__link,
.home .site-nav a,
.home .site-header__phone,
.home .site-header__hamburger,
.home .site-header__hamburger svg,
.home .site-header__hamburger path {
  transition:
    background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Non-homepage pages: header stays solid by default (no hero to overlap).
 * Existing .site-header base rule already handles this. */

/* Mega-menu dropdowns — when hovering on transparent header, dropdown
 * panels still need their solid background so menu items are readable. */
.home .site-header:not(.is-stuck) .site-nav__dropdown,
.home .site-header:not(.is-stuck) .site-nav__panel,
.home .site-header:not(.is-stuck) .mega-menu {
  background-color: rgba(250, 247, 242, 0.98) !important;
  color: var(--c-primary) !important;
}

.home .site-header:not(.is-stuck) .site-nav__dropdown a,
.home .site-header:not(.is-stuck) .site-nav__panel a,
.home .site-header:not(.is-stuck) .mega-menu a {
  color: var(--c-primary) !important;
}


/* ============================================================
   v1.6.0 FORM POLISH — fixes shipped alongside transparent header
   ============================================================ */

/* SELECT DOUBLE-PILL FIX — earlier .fluentform .choices outer wrapper
 * AND .choices__inner BOTH had identical pill styling, stacking 2 layers.
 * Strip the outer; keep only the inner as the visible pill. */
.fluentform .choices {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

/* SELECT DROPDOWN — escape parent overflow:hidden via vertical visibility.
 * .ff-step-container needs X-overflow hidden (FF Pro slide), but Y can be
 * visible so the choices.js dropdown panel renders fully. */
.fluentform .ff-step-container {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
.fluentform .fluentform-step {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Dropdown panel — strong z-index so it floats above any overlap */
.fluentform .choices__list--dropdown,
.fluentform .choices__list[aria-expanded="true"] {
  z-index: 100 !important;
  max-height: 280px;
  overflow-y: auto;
}

/* BACK BUTTON — was floating awkwardly. Anchor to bottom-left of step,
 * smaller, less prominent than Next; keep glow contained. */
.fluentform .ff-btn-prev,
.fluentform .ff_btn_back {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 10px 18px !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--r-pill) !important;
  min-height: 40px !important;
  width: auto !important;
  margin-right: var(--sp-2);
  /* Smaller hover glow so it never clips */
  box-shadow: none !important;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fluentform .ff-btn-prev:hover,
.fluentform .ff_btn_back:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}

/* Back/Next button row — flex with Next on the right, prev on the left */
.fluentform .ff_step_btns_wrap,
.fluentform .step-nav,
.fluentform .ff_step_nav_last {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  margin-top: var(--sp-3) !important;
  padding: 4px !important;  /* glow safe-area */
}

/* Push Next button to the right when Prev is also visible */
.fluentform .ff_step_btns_wrap .ff-btn-next,
.fluentform .step-nav .ff-btn-next {
  margin-left: auto;
}


/* ============================================================
   v1.6.1 — Chevron back button + hide bottom Back
   ============================================================ */

/* Hide the bottom Back/Prev button entirely — replaced with chevron above
 * the progress bar (Better.com pattern). Users can revisit a previous
 * question via the chevron without a heavy "Back" button cluttering the
 * step nav row. */
.fluentform .ff-btn-prev,
.fluentform .ff_btn_back {
  display: none !important;
  visibility: hidden !important;
}

/* Chevron back — small, top-left of step header, ghost outline */
.fluentform .shopdpa-chevron-back {
  position: absolute;
  top: -8px;
  left: -4px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  z-index: 5;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fluentform .shopdpa-chevron-back:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  transform: translateX(-2px);
}

.fluentform .shopdpa-chevron-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 197, 40, 0.45);
}

.fluentform .shopdpa-chevron-back.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.fluentform .shopdpa-chevron-back svg {
  display: block;
}

/* Step header needs to be a positioned context so chevron can absolute */
.fluentform .ff-step-header {
  position: relative;
  padding-top: 28px; /* space for chevron above progress bar */
}


/* ============================================================
   v1.6.2 — Navbar transparency: hero shows through
   ============================================================ */

/* Pull hero UP under the navbar so the dark hero bg shows through the
 * transparent navbar. Compensate with padding so hero content isn't
 * clipped behind the header. v1.17.7 — bumped from -83 to -93 to match
 * the taller v1.17.4 navbar (padding-block sp-2 → sp-3). */
.home .hero-takeover {
  margin-top: -93px;
  padding-top: calc(93px + var(--sp-6, 4rem));
  position: relative;
  z-index: 1;
}

/* Header sits above hero in stacking context */
.home .site-header {
  z-index: 100;
}

/* Mobile — header is shorter, adjust. v1.17.7 — bumped 64→72 for taller nav. */
@media (max-width: 768px) {
  .home .hero-takeover {
    margin-top: -72px;
    padding-top: calc(72px + var(--sp-5, 3rem));
  }
}

/* Improved chevron position — center it ABOVE the progress bar instead of
 * absolute-positioned top-left. Also lift from inside step header. */
.fluentform .shopdpa-chevron-back {
  position: relative;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: 0 auto var(--sp-1) auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step header — chevron centered above bar, no padding hack needed */
.fluentform .ff-step-header {
  padding-top: 0;
  text-align: center;
}


/* ============================================================
   v1.6.3 — Cursor-stickiness mitigation
   ============================================================ */

/* When a step JUST became active (within first ~350ms), suppress hover
 * styling on its pills. Without this, the cursor that was over a pill on
 * the prior step lands on the same screen position on the new step and
 * triggers an immediate hover, making pill 1 of every new step look
 * "selected" the moment it appears. */
.fluentform-step.shopdpa-just-active .ff-pill-options .ff-el-form-check label:hover,
.fluentform-step.shopdpa-just-active .ff-pill-options .ff-el-form-check label {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--c-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ============================================================
   v1.8.0 — Full visual polish port (FlyingPress exclusions
   fixed jQuery race, so all of this should now stick).
   ============================================================ */

/* ─────────────────────────────────────────────
   1. CHEVRON: replace icon with "Back" text
   ───────────────────────────────────────────── */
.fluentform .shopdpa-chevron-back {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: var(--sp-3) auto 0 auto !important;
  padding: 6px 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: var(--font-body) !important;
  font-size: 0 !important;
  cursor: pointer !important;
  align-self: center !important;
  transform: none !important;
  z-index: auto !important;
}
.fluentform .shopdpa-chevron-back::before {
  content: "Back";
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.fluentform .shopdpa-chevron-back:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}
.fluentform .shopdpa-chevron-back.is-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.fluentform .shopdpa-chevron-back svg {
  display: none !important;
}

/* ─────────────────────────────────────────────
   2. PROGRESS BAR: branded amber pill, no %
   ───────────────────────────────────────────── */
.fluentform .ff-step-header .ff-el-progress-status {
  display: none !important;
}
.fluentform .ff-step-header .ff-el-progress-title {
  display: none !important;
}
.fluentform .ff-step-header .ff-el-progress {
  height: 8px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fluentform .ff-step-header .ff-el-progress-bar {
  height: 100% !important;
  background: var(--c-accent) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(255, 197, 40, 0.55) !important;
  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.fluentform .ff-step-header .ff-el-progress-bar > * {
  display: none !important;
}
.fluentform .ff-step-header .ff-el-progress-bar {
  font-size: 0 !important;
  color: transparent !important;
}
.hero-takeover__form-inner .fluentform .ff-step-header .ff-el-progress {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ─────────────────────────────────────────────
   3. FORM BLOCK ISOLATION: stable layout across steps
   ───────────────────────────────────────────── */
.fluentform .ff-step-container {
  min-height: 540px;
}
.fluentform .ff-step-header {
  min-height: 64px;
  margin-bottom: var(--sp-3);
}
.fluentform .ff-el-input--label {
  min-height: 80px;
  margin-bottom: var(--sp-3) !important;
}

/* ─────────────────────────────────────────────
   4. NEXT BUTTON GLOW SAFE-AREA
   ───────────────────────────────────────────── */
.fluentform .ff_step_btns_wrap,
.fluentform .step-nav,
.fluentform .ff_step_nav_last {
  min-height: 88px;
  padding: 20px 24px;
  margin-top: var(--sp-2);
}

/* ─────────────────────────────────────────────
   5. WIDER DESKTOP FORM
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hero-takeover__form-inner {
    max-width: 720px !important;
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────
   6. MOBILE NAVBAR POLISH + hero offset
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .home .site-header {
    padding-block: 0 !important;
  }
  .home .site-header__inner {
    padding-block: var(--sp-1) !important;
    gap: var(--sp-1) !important;
  }
  .site-header__logo {
    font-size: var(--fs-md) !important;
  }
  .site-header__right .btn,
  .site-header .btn--primary {
    font-size: var(--fs-xs) !important;
    padding: 8px 14px !important;
    min-height: 38px !important;
    white-space: nowrap;
  }
  .home .hero-takeover {
    margin-top: -56px !important;
    padding-top: calc(56px + 1.5rem) !important;
  }
  .hero-takeover__eyebrow {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }
}

/* ─────────────────────────────────────────────
   7. COUNTY DROPDOWN: only fires when open
   ───────────────────────────────────────────── */
.fluentform .fluentform-step:has(.choices.is-open),
.fluentform .ff-step-container:has(.choices.is-open) {
  overflow: visible !important;
  z-index: 50 !important;
}
.fluentform .choices.is-open .choices__list--dropdown,
.fluentform .choices__list[aria-expanded="true"] {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(2, 33, 78, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(2, 33, 78, 0.25) !important;
}


/* ============================================================
   v1.8.1 — three polish items
   1. Disable Back button entirely (hide our injected chevron)
   2. More padding for Next button glow safe-area
   3. Smooth fade-in animation on each new step (replace
      FF Pro's hard slide-from-right)
   ============================================================ */

/* 1. DISABLE Back button (chevron / "Back" text) entirely */
.fluentform .shopdpa-chevron-back {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. More padding on Next button area + step container for glow.
 *    Hover state has bigger shadow that needs extra room. */
.fluentform .ff-step-container {
  padding-bottom: 16px !important;
}
.fluentform .ff_step_btns_wrap,
.fluentform .step-nav,
.fluentform .ff_step_nav_last {
  min-height: 100px !important;
  padding: 28px 28px !important;
}

/* 3. SMOOTH FADE-IN ANIMATION on each new step.
 *    FF Pro's default slide-from-right shows a hard edge —
 *    override with a fade + tiny lift via @keyframes on .active. */
.fluentform .fluentform-step {
  transform: none !important;
}
.fluentform .fluentform-step.active {
  animation: shopdpaStepIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes shopdpaStepIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   v1.8.2 — Remove arrow from Next btn + fade-in for everything
   ============================================================ */

/* 1. NUKE the "→" from Next button. Replace text via pseudo. */
.fluentform .ff-btn-next,
.fluentform .ff_btn_next {
  font-size: 0 !important;
}
.fluentform .ff-btn-next::before,
.fluentform .ff_btn_next::before {
  content: "Next";
  font-size: var(--fs-base);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
/* Same treatment for "Almost done →" on later steps */
.fluentform .ff-btn-next[data-text*="Almost"],
.fluentform .ff_btn_next[data-text*="Almost"] {
  /* If FF Pro stores label in data attr, we're good. Otherwise rely on selector below */
}
/* Submit button — keep its original text but no arrow */
.fluentform .ff-btn-submit {
  /* leave default — Submit text usually no arrow */
}

/* 2. FADE-IN button row alongside the question.
 *    Animate .ff_step_btns_wrap with same keyframes so it
 *    appears smoothly with the question, not popping in. */
.fluentform .ff_step_btns_wrap,
.fluentform .step-nav,
.fluentform .ff_step_nav_last {
  animation: shopdpaStepIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 60ms;       /* slight stagger so question leads, button follows */
}

/* Re-trigger button animation on each step change by tying to a CSS
 * sibling of the active step. When .active flips between fluentform-steps,
 * the btns-wrap doesn't reset its animation natively. Use a small hack:
 * any direct child of step-container that changes state restarts via
 * --shopdpa-step CSS var. */
.fluentform .ff-step-container {
  --shopdpa-step: 0;
}


/* ============================================================
   v1.8.3 — Reduce excessive glow + nav alignment + smaller btn
   + mobile gap fix
   ============================================================ */

/* 1. REDUCE EXCESSIVE GLOW — only Continue/Next CTAs keep big glow.
 *    Pill options get subtle shadow only. Eyebrow chip loses glow. */
.fluentform .ff-pill-options .ff-el-form-check label,
.fluentform .ff-pill-options .ff-el-form-check label:hover {
  box-shadow: 0 1px 3px rgba(2, 33, 78, 0.10) !important;
}
.fluentform .ff-pill-options .ff-el-form-check input[type="radio"]:checked + label {
  box-shadow: 0 4px 12px rgba(255, 197, 40, 0.30) !important;  /* gentler than before */
}
.hero-takeover__form-inner .fluentform .ff-pill-options .ff-el-form-check label:hover {
  box-shadow: 0 2px 8px rgba(255, 197, 40, 0.12) !important;
}
/* Eyebrow chip — kill the big amber glow */
.hero-takeover__eyebrow {
  box-shadow: none !important;
}

/* 2. NAV ALIGNMENT — chevron buttons vs text-only links to vertically center */
.site-nav__list,
.site-header__nav {
  display: flex;
  align-items: center;
}
.site-nav__item,
.site-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  height: 100%;
  line-height: 1 !important;
}
.site-nav__link svg,
.site-nav__link .chevron {
  vertical-align: middle;
  display: inline-block;
}

/* 3. GET STARTED BUTTON — smaller desktop + mobile */
.site-header__right .btn--primary,
.site-header .btn--primary {
  font-size: var(--fs-sm) !important;
  padding: 8px 16px !important;
  min-height: 36px !important;
  min-width: auto !important;
}
@media (max-width: 768px) {
  .site-header__right .btn--primary,
  .site-header .btn--primary {
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
  }
}

/* 4. MOBILE: kill white gap above navbar by extending hero higher
 *    AND making body bg navy so any seam disappears. */
@media (max-width: 768px) {
  .home {
    background-color: #04101e !important;  /* match hero bg so no white seam */
  }
  .home .hero-takeover {
    margin-top: -80px !important;            /* extend further up under navbar */
    padding-top: calc(80px + 1.25rem) !important;
  }
  /* Header on mobile — slimmer */
  .home .site-header__inner {
    padding-block: 6px !important;
    min-height: 48px !important;
  }
}


/* ============================================================
   v1.8.4 — darker hero (no amber radial), wider zone text,
   myth cards rectangular, footer wider + smaller text
   ============================================================ */

/* v1.24.1 — Hero overlay rewritten to use the locked --c-primary-deep token
 * (#000C24, hsl(218, 100%, 7%)) instead of the off-palette near-black it was
 * using before. Alpha gradient 0.84 → 0.74 → 0.60 lands the photo at ~38%
 * visibility — dramatic mood, strong text contrast, but the home/sunset/window
 * glows still read through. The amber radial that v1.8.4 removed stays
 * removed — keeps the hero feeling cinematic, not "marketing landing page." */
.hero-takeover::before {
  background:
    linear-gradient(
      135deg,
      rgba(0, 12, 36, 0.84) 0%,
      rgba(0, 12, 36, 0.74) 55%,
      rgba(0, 12, 36, 0.60) 100%
    ) !important;
}
.hero-takeover {
  background-color: #000C24 !important;
}

/* 2. WIDER zone bottom paragraphs (Texas DPA at a glance + others)
 *    Override the inline style="max-width: 60ch" by being more specific. */
.zone p[style*="max-width: 60ch"],
.zone .stats__caption,
.zone .stats__disclaimer {
  max-width: 88ch !important;
  font-size: var(--fs-base) !important;
}
.stats-zone-decor p[style*="max-width: 60ch"]:first-of-type {
  max-width: 88ch !important;
  font-size: var(--fs-base) !important;
}
.stats-zone-decor p[style*="max-width: 60ch"]:last-of-type {
  max-width: 88ch !important;
}

/* 3. MYTH CARDS — rectangular + centered + bigger quote text */
.myth-card-flip {
  perspective: 1200px;
  min-height: 220px !important;       /* shorter (was 320) — rectangular not square */
  height: auto !important;
}
.myth-card-flip__inner {
  min-height: 220px !important;
}
.myth-card-flip__face {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: var(--sp-4) var(--sp-5) !important;
}
.myth-card-flip__quote {
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.myth-card-flip__truth {
  font-size: var(--fs-base) !important;
  line-height: 1.55 !important;
  text-align: center !important;
}
.myth-card-flip__front-badge,
.myth-card-flip__back-badge {
  margin-bottom: var(--sp-2) !important;
}
.myth-card-flip__hint {
  margin-top: var(--sp-2) !important;
  font-size: var(--fs-xs) !important;
}

/* Myth grid wider on desktop */
@media (min-width: 1024px) {
  .myth-grid,
  .myths-grid {
    max-width: var(--max-w-page) !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 4. CTA banner button — kill arrow if present (uses ::before-replacement
 *    pattern same as Next button) */
.midarticle-cta .btn--primary,
.midarticle-cta__cta,
.cta-open-hero {
  /* Just neutralize any visible arrows in the existing text via a
   * span replacement is not needed since we already updated copy.
   * This block is a placeholder for future arrow-strip rules. */
}

/* 5. FOOTER — wider container + smaller text */
.site-footer__inner {
  max-width: var(--max-w-wide, 1480px) !important;
  padding-inline: var(--sp-4) !important;
}
.site-footer__columns {
  gap: var(--sp-3) var(--sp-4) !important;
}
.site-footer__col h4 {
  font-size: var(--fs-sm) !important;
  margin-bottom: var(--sp-2) !important;
}
.site-footer__col ul li,
.site-footer__col ul li a {
  font-size: var(--fs-xs) !important;
  line-height: 1.7 !important;
}
.site-footer__legal,
.site-footer__disclosure,
.site-footer__copyright {
  font-size: var(--fs-xs) !important;
  line-height: 1.5 !important;
}
.site-footer__disclosure {
  max-width: 100% !important;
  padding-inline: 0 !important;
}


/* ============================================================
   v1.8.5 — Hero fills viewport (kept) — but body navy bg REVERTED
   in v1.9.2 because it bled into light sections with dark text.
   ============================================================ */

/* Ensure hero fills viewport on desktop — explicit 100vh, no margin.       */
/* v1.21.4: padding-bottom:0 lock removed so the action stack vertically    */
/* centers in the section. With the trust line now position:absolute at the */
/* foot, the inner stack (eyebrow → H1 → lede → CTA) needs symmetric        */
/* padding to flex-center cleanly. The base .hero-takeover rule supplies    */
/* padding-block: var(--sp-7) var(--sp-7) at default (96/96) and var(--sp-8)*/
/* var(--sp-8) at >=1024px (128/128) — that's what we want.                  */
.home .hero-takeover {
  min-height: 100vh !important;
  height: 100vh !important;          /* hard equal to viewport on desktop */
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  /* On mobile keep min-height 100vh but allow content to grow if needed */
  .home .hero-takeover {
    height: auto !important;
    min-height: 100vh !important;
  }
}

/* Kill margin-top on the FIRST section after the hero so no white seam
 * appears between hero and next zone. This is the legitimate piece of
 * the v1.8.5 fix that's worth keeping. */
.home .hero-takeover + .section-break,
.home .hero-takeover + section,
.home .section-break:first-of-type {
  margin-top: 0 !important;
  border-top: 0 !important;
}


/* ============================================================
   v1.9.2 — REVERTED v1.8.6's body-navy override
   ============================================================
   The v1.8.6 rules below forced `body.home`, `main`, etc. to navy
   (#020812) so no white seam could appear between sections. But that
   bled navy into every section that didn't paint its own bg — including
   light-content sections with DARK text (like Texas DPA at a glance,
   What is Texas DPA). Result: dark text on navy = unreadable.

   Reverted in v1.9.2: body uses default cream (`--c-bg`), each section
   paints its own bg. The hero's own bg stays dark. The first-of-type
   margin-fix above prevents the white seam without painting the body.

html.home,
html:has(body.home),
.home,
.home body,
.home #page,
.home main,
.home .site-content,
.home .brx-content {
  background-color: #020812 !important;
}
*/

/* The final-cta section explicitly: no margin-bottom, no white
 * padding around it. */
.home .final-cta {
  margin-bottom: 0 !important;
  padding-bottom: var(--sp-6) !important;
}

/* Footer transition — ensure footer top-border isn't a white line */
.site-footer {
  border-top: 0 !important;
}

/* Any zone with default background that might be cream — force navy on home */
.home .zone:not(.zone--alt):not([style*="background"]) {
  /* Don't override zones that opt-in to a non-default bg — only
   * affect plain dark-context zones that should match body. */
}


/* ============================================================ */
/* v1.16.1 — Navy pillar header + myth overflow + nav hover     */
/* ============================================================ */

/* 1. NAVY PILLAR HEADER ----------------------------------- */
/* Override v1.15.x cream tinted header with navy + white text.
 * v1.49.9.1 — The third selector (`.pillar-hero + .pillar-byline-top`) was
 * dropped here because v1.49.8 retired the byline-top section, but in v1.49.9
 * I accidentally orphaned the breadcrumbs + hero selectors above by replacing
 * only the third one — which killed the navy bg on the whole header zone.
 * Restored as a 2-selector multi-rule below. */
body.is-pillar-page .pillar-breadcrumbs,
body.is-pillar-page .pillar-hero {
  background-color: var(--c-primary) !important;
  color: var(--c-ink-inverse);
}

/* Hero bottom border tinted for the navy context (overrides the cream-context
 * `var(--c-border)` color set on .pillar-hero earlier in this file). */
body.is-pillar-page .pillar-hero {
  border-block-end-color: rgba(255,255,255,0.08) !important;
}

/* Breadcrumbs — light text on navy */
body.is-pillar-page .pillar-breadcrumbs__list a {
  color: rgba(255,255,255,0.78);
}
body.is-pillar-page .pillar-breadcrumbs__list a:hover {
  color: var(--c-accent);
}
body.is-pillar-page .pillar-breadcrumbs__list li[aria-current="page"] {
  color: rgba(255,255,255,0.95);
}
body.is-pillar-page .pillar-breadcrumbs__list li:not(:last-child)::after {
  color: rgba(255,255,255,0.4);
}

/* Hero — white H1, light lede, amber eyebrow stays */
body.is-pillar-page .pillar-hero__h1 { color: #ffffff !important; }
body.is-pillar-page .pillar-hero__eyebrow { color: var(--c-accent); }
body.is-pillar-page .pillar-hero__lede { color: rgba(255,255,255,0.88) !important; }
body.is-pillar-page .pillar-hero__meta {
  color: rgba(255,255,255,0.68);
}
body.is-pillar-page .pillar-hero__meta-item { color: rgba(255,255,255,0.7); }

/* Byline-top strip — light text, white name, white avatar bg */
body.is-pillar-page .pillar-byline-top__role { color: rgba(255,255,255,0.6); }
body.is-pillar-page .pillar-byline-top__name { color: #ffffff !important; }
body.is-pillar-page .pillar-byline-top__name a {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,0.25);
}
body.is-pillar-page .pillar-byline-top__name a:hover {
  border-bottom-color: var(--c-accent);
}
body.is-pillar-page .pillar-byline-top__credentials { color: rgba(255,255,255,0.68); }
body.is-pillar-page .pillar-byline-top__updated { color: rgba(255,255,255,0.7); }
body.is-pillar-page .pillar-byline-top__updated strong { color: #ffffff; }
body.is-pillar-page .pillar-byline-top__divider {
  background-color: rgba(255,255,255,0.18);
}
body.is-pillar-page .pillar-byline-top__avatar img {
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

/* 2. MYTH-FLIP CARD OVERFLOW + ITALIC FIX ----------------- */
.myth-card-flip {
  min-height: 380px;
}
.myth-card-flip__inner {
  min-height: 380px;
}
.myth-card-flip__face {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.myth-card-flip__quote {
  font-style: normal !important;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (min-width: 768px) {
  .myth-card-flip,
  .myth-card-flip__inner { min-height: 340px; }
}
@media (max-width: 480px) {
  .myth-card-flip,
  .myth-card-flip__inner { min-height: 420px; }
  .myth-card-flip__quote { font-size: var(--fs-sm); }
  .myth-card-flip__truth { font-size: var(--fs-sm); }
}

/* 3. NAV HOVER-INTENT + SPACING -------------------------- */
@media (min-width: 1024px) {
  .site-nav { gap: var(--sp-4); }
  .site-nav__link { padding-inline: var(--sp-2-half, var(--sp-2)); }

  /* v1.17.3 — Fix nav cross-flashing bug:
   * The previous bridge approach used pointer-events:auto on a ::before
   * pseudo-element that stayed live even when the menu was invisible.
   * That intercepted hovers from NEIGHBORING nav items and caused other
   * megamenus to flash open. Fix: remove the bridge entirely. Instead,
   * close the gap between trigger and megamenu so hover stays continuous,
   * and keep the close-delay so users have time to reach the dropdown. */
  .site-megamenu {
    top: 100% !important; /* no gap to bridge */
    transition:
      opacity 80ms var(--ease) 150ms,
      transform var(--t-base) var(--ease);
  }
  /* Kill the v1.16.1 bridge entirely so it can't intercept neighbor hovers */
  .site-megamenu::before { content: none !important; }

  /* When parent IS hovered, transition normally (no close-delay applies) */
  .site-nav__item:hover .site-megamenu,
  .site-nav__item:focus-within .site-megamenu {
    transition:
      opacity var(--t-base) var(--ease),
      transform var(--t-base) var(--ease);
  }
}

/* ============================================================ */
/* v1.16.2 — Mobile padding (text was running to edge)         */
/* On mobile, body content and header content need side padding */
/* so text doesn't touch the viewport edge. ~16-20px safe zone.*/
/* ============================================================ */
@media (max-width: 1099px) {
  /* Pillar pages — header zones */
  body.is-pillar-page .pillar-breadcrumbs .pillar-breadcrumbs__list,
  body.is-pillar-page .pillar-hero .pillar-hero__inner,
  body.is-pillar-page .pillar-hero + .pillar-byline-top .pillar-byline-top__inner {
    padding-inline: var(--sp-3) !important;
  }
  /* Pillar pages — body sections */
  body.is-pillar-page .pillar-body > .container,
  body.is-pillar-page .pillar-summary-zone > .container,
  body.is-pillar-page .zone--alt[aria-label*="frequently asked"] > .container,
  body.is-pillar-page .final-cta > .container,
  body.is-pillar-page .pillar-byline > .container {
    padding-inline: var(--sp-3);
    box-sizing: border-box;
  }
  /* Inline TOC (when stacked above body content on mobile) */
  body.is-pillar-page .pillar-sticky-toc {
    padding-inline: var(--sp-3);
  }
}

/* Tighter mobile-specific bump for narrow phones */
@media (max-width: 480px) {
  body.is-pillar-page .pillar-breadcrumbs .pillar-breadcrumbs__list,
  body.is-pillar-page .pillar-hero .pillar-hero__inner,
  body.is-pillar-page .pillar-hero + .pillar-byline-top .pillar-byline-top__inner,
  body.is-pillar-page .pillar-body > .container,
  body.is-pillar-page .pillar-summary-zone > .container {
    padding-inline: 16px !important;
  }
  /* Reduce hero H1 overflow on tiny screens */
  body.is-pillar-page .pillar-hero__h1 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* Generic non-pillar pages (blog posts, archives, plain templates).
 * Bricks parent theme's .container should already have its own padding,
 * but some templates render full-bleed without a container wrapper.
 * Add a baseline .entry-content / .post-content / .page-content guard. */
@media (max-width: 1099px) {
  .entry-content,
  .post-content,
  .page-content,
  .single .post-content,
  body:not(.is-pillar-page):not(.home) main > article:not(.cpt-pillar),
  body:not(.is-pillar-page):not(.home) main > .entry-content {
    /* v1.49.6 — :not(.cpt-pillar) excludes our CPT/archive article wrappers
       (Cities, Loans, Heroes, county/ISD/base). They already pad their content
       via inner .container/.cpt-body, so the article-level 24px here was
       stacking into a ~40px double-inset that read as "squeezed" on mobile.
       This guard still applies to plain full-bleed templates without a
       container wrapper. */
    padding-inline: max(16px, var(--sp-3));
    box-sizing: border-box;
  }
  /* Direct children that might escape — h1/h2/p/ul/ol on non-pillar pages */
  body:not(.is-pillar-page):not(.home) main > h1,
  body:not(.is-pillar-page):not(.home) main > h2,
  body:not(.is-pillar-page):not(.home) main > h3,
  body:not(.is-pillar-page):not(.home) main > p,
  body:not(.is-pillar-page):not(.home) main > ul,
  body:not(.is-pillar-page):not(.home) main > ol,
  body:not(.is-pillar-page):not(.home) main > blockquote {
    padding-inline: max(16px, var(--sp-3));
    box-sizing: border-box;
  }
}

/* ============================================================ */
/* v1.16.3 — Pad ALL pillar-page text tags on mobile           */
/* The Gutenberg-injected prose blocks render as DIRECT <p>,    */
/* <h2>, <ul> children of the_content() — NOT inside any        */
/* .container. v1.16.2 only padded the shortcode containers, so */
/* those raw blocks were touching the screen edge. Pad EVERY-   */
/* THING on mobile, then reset for elements already inside a    */
/* known padded wrapper. */
/* ============================================================ */
@media (max-width: 1099px) {
  /* Step 1: pad every text tag on a pillar page */
  body.is-pillar-page p,
  body.is-pillar-page h2,
  body.is-pillar-page h3,
  body.is-pillar-page h4,
  body.is-pillar-page ul,
  body.is-pillar-page ol,
  body.is-pillar-page blockquote,
  body.is-pillar-page table,
  body.is-pillar-page .vs-table-wrap,
  body.is-pillar-page .vs-decision-grid {
    padding-inline: max(16px, var(--sp-3));
    box-sizing: border-box;
  }

  /* Step 2: reset to 0 inline-padding when already inside a wrapper
   * that has its own horizontal padding. Otherwise we get DOUBLE pad. */
  body.is-pillar-page .container p,
  body.is-pillar-page .container h2,
  body.is-pillar-page .container h3,
  body.is-pillar-page .container h4,
  body.is-pillar-page .container ul,
  body.is-pillar-page .container ol,
  body.is-pillar-page .container blockquote,
  body.is-pillar-page .container table,
  body.is-pillar-page .container .vs-table-wrap,
  body.is-pillar-page .container .vs-decision-grid,
  body.is-pillar-page .prose-block p,
  body.is-pillar-page .prose-block h2,
  body.is-pillar-page .prose-block h3,
  body.is-pillar-page .prose-block ul,
  body.is-pillar-page .prose-block ol,
  body.is-pillar-page .pillar-summary p,
  body.is-pillar-page .pillar-summary ul,
  body.is-pillar-page .pillar-summary li,
  body.is-pillar-page .pillar-hero p,
  body.is-pillar-page .pillar-hero h1,
  body.is-pillar-page .pillar-hero h2,
  body.is-pillar-page .pillar-byline-top p,
  body.is-pillar-page .pillar-byline p,
  body.is-pillar-page .faq-accordion p,
  body.is-pillar-page .faq-accordion ul,
  body.is-pillar-page .faq-accordion__a p,
  body.is-pillar-page .faq-accordion__a ul,
  body.is-pillar-page .pillar-sticky-toc p,
  body.is-pillar-page .pillar-sticky-toc ol,
  body.is-pillar-page .pillar-sticky-toc ul {
    padding-inline: 0 !important;
  }

  /* Tables inside a container should never have inline padding either */
  body.is-pillar-page .container table { padding-inline: 0 !important; }
}

/* ============================================================ */
/* v1.17.0 — Marketing hero (About / Resources)                */
/* Brand-forward hero for non-pillar marketing pages. Cream     */
/* gradient background, large H1, prominent CTA. Distinct from  */
/* pillar pages (which use navy header band).                   */
/* ============================================================ */
.marketing-hero {
  /* v1.18.5 — navy gradient hero (matches the navy navbar above it for a
   * unified dark band). On non-homepage pages the navbar is solid navy
   * so the hero starts flush below it (no negative margin needed).
   *
   * v1.34.2 — When the [shopdpa_marketing_hero image=""] shortcode supplies
   * a photo, it sets --hero-image inline. We render the photo as background-image
   * and stack a navy overlay via ::before so the H1 + lede stay readable.
   * If no image is supplied, the navy gradient falls through as the visible bg. */
  background-color: var(--c-primary);
  background-image: var(--hero-image, radial-gradient(circle at 25% 35%, rgba(245, 158, 11, 0.18) 0%, transparent 55%)), linear-gradient(135deg, var(--c-primary) 0%, #08182e 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-ink-inverse);
  padding-block: var(--sp-7) var(--sp-6);
  position: relative;
  overflow: hidden;
}
/* v1.34.2 — navy overlay matching .hero-takeover::before pattern so photo-backed
 * marketing heroes (About page) hit WCAG AA contrast on H1 + lede. When no photo
 * is supplied (--hero-image: none), the overlay still renders but it's stacked
 * over the navy gradient which already meets contrast — visible cost is negligible
 * (~5% darker tint on the gradient). Tradeoff favored over a conditional rule
 * keyed on inline style. */
.marketing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 197, 40, 0.20) 0%, transparent 55%),
    linear-gradient(135deg, rgba(2, 33, 78, 0.86) 0%, rgba(8, 24, 46, 0.74) 60%, rgba(2, 33, 78, 0.50) 100%);
  z-index: 0;
  pointer-events: none;
}
.marketing-hero .container { position: relative; z-index: 1; }
.marketing-hero__inner {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.marketing-hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--sp-2);
}
.marketing-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: var(--lh-tight);
  color: #ffffff; /* v1.18.4 — white on navy */
  margin-block-end: var(--sp-3);
  letter-spacing: -0.02em;
}
.marketing-hero__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.88); /* v1.18.4 — light on navy */
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
}
.marketing-hero__meta { color: rgba(255,255,255,0.7); }
.marketing-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.marketing-hero__meta {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
@media (max-width: 640px) {
  .marketing-hero { padding-block: var(--sp-5) var(--sp-4); }
  .marketing-hero__inner { padding-inline: 16px; }
  .marketing-hero__h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .marketing-hero__lede { font-size: var(--fs-md); }
}

/* ============================================================ */
/* v1.17.2 — Mobile bullet/list padding + lede block fix       */
/* (1) UL/OL: bullet markers were getting clipped at screen     */
/*     edge because padding-inline:16px overrode default 40px   */
/*     padding-left that browsers use for bullet space.         */
/* (2) .prose-block__lede was ignored by v1.16.3 reset list.    */
/* (3) Marketing pages content area too narrow on desktop.      */
/* ============================================================ */

@media (max-width: 1099px) {
  /* Lists need MORE left padding than other text so bullets fit */
  body.is-pillar-page ul,
  body.is-pillar-page ol {
    padding-left: max(32px, var(--sp-4)) !important;
    padding-right: max(16px, var(--sp-3)) !important;
    padding-inline: unset !important; /* override the symmetric rule above */
  }

  /* Lede inside prose blocks — pad on mobile (was ignored) */
  body.is-pillar-page .prose-block__lede,
  body.is-pillar-page .prose-block .prose-block__lede {
    padding-inline: max(16px, var(--sp-3)) !important;
    box-sizing: border-box;
  }

  /* Same for non-pillar marketing pages (About / Resources) */
  body:not(.is-pillar-page):not(.home) .prose-block ul,
  body:not(.is-pillar-page):not(.home) .prose-block ol,
  body:not(.is-pillar-page):not(.home) .prose-zone ul,
  body:not(.is-pillar-page):not(.home) .prose-zone ol {
    padding-left: max(32px, var(--sp-4)) !important;
    padding-right: max(16px, var(--sp-3)) !important;
  }
}

/* Marketing pages (About / Resources): widen the content area so it
 * doesn't feel like a narrow column with huge gutters on desktop. */
.marketing-hero__inner {
  max-width: 64rem !important;
}
@media (min-width: 768px) {
  .marketing-hero__inner {
    max-width: 72rem !important;
    text-align: left !important;
  }
  .marketing-hero__lede {
    margin-inline: 0 !important;
    max-width: 56rem !important;
  }
  .marketing-hero__cta-row {
    justify-content: flex-start !important;
  }
}
/* Prose sections on About / Resources — use wider container */
body:not(.is-pillar-page):not(.home) .prose-zone .container,
body:not(.is-pillar-page):not(.home) .prose-zone > .container {
  max-width: 72rem;
}
body:not(.is-pillar-page):not(.home) .prose-zone .prose-block {
  max-width: 56rem;
  margin-inline: auto;
}

/* ============================================================ */
/* v1.18.1 — Marketing page sections break out of Bricks parent */
/* ============================================================ */
/* Bricks parent theme wraps page content in <article id="brx-content">
 * with auto margins (206px on a 1512 viewport), squeezing all our
 * full-bleed zones into a centered ~1100px column.
 * Marketing pages (About, Resources) need every zone to span the full
 * viewport width like they do on the homepage. */
body.page:not(.is-pillar-page):not(.home) #brx-content > section,
body.page:not(.is-pillar-page):not(.home) #brx-content > .marketing-hero,
body.page:not(.is-pillar-page):not(.home) #brx-content > .stats-zone,
body.page:not(.is-pillar-page):not(.home) #brx-content > .trust-trio,
body.page:not(.is-pillar-page):not(.home) #brx-content > .why-trio,
body.page:not(.is-pillar-page):not(.home) #brx-content > .process-zone,
body.page:not(.is-pillar-page):not(.home) #brx-content > .final-cta,
body.page:not(.is-pillar-page):not(.home) #brx-content > .wp-block-group,
body.page:not(.is-pillar-page):not(.home) #brx-content > .calc-zone,
body.page:not(.is-pillar-page):not(.home) #brx-content > .pillar-byline {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* Bricks parent constraint override — let the article container be wide. */
body.page:not(.is-pillar-page):not(.home) #brx-content {
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* v1.23.3 — Take confirmation sections OUT of the full-bleed treatment    */
/* above. The full-bleed rule uses width: 100vw + margin-left:calc(50%-50vw) */
/* which assumes the body has no scrollbar. On scrollbar-displaying viewports*/
/* (15px Mac scrollbar + similar Win) this calculation overshoots the         */
/* viewport by the scrollbar width and creates an unwanted horizontal scroll. */
/* Confirmation page sections are designed to fit within the article container*/
/* via their internal .container — they don't need full-bleed. Override them. */
/* IMPORTANT: must match the prefix of the rule above (body.page:not(...))   */
/* to beat its specificity (1,3,2). With .confirmation-hero class instead of */
/* `section` type selector, this becomes (1,4,1) which wins on classes count. */
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-hero,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-byron,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-wait,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-next,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-deadline,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-faq,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-keep,
body.page:not(.is-pillar-page):not(.home) #brx-content > .confirmation-disclose {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* INNER container of each zone is what holds the centered constrained
 * content (max-width 72rem etc). The outer section is full-bleed. */
body.page:not(.is-pillar-page):not(.home) #brx-content > section .container,
body.page:not(.is-pillar-page):not(.home) #brx-content > .wp-block-group .container {
  margin-inline: auto;
  padding-inline: var(--sp-3);
  box-sizing: border-box;
}

/* ============================================================ */
/* v1.18.2 — Navy nav text + center marketing hero            */
/* ============================================================ */

/* All nav text/links go light on the navy bg */
/* (v1.18.15 fix: was targeting .site-header__brand which doesn't exist; */
/*  actual logo class is .site-header__logo. Logo was rendering navy on  */
/*  navy navbar = invisible on every non-homepage page.)                  */
.site-header .site-header__logo,
.site-header .site-header__brand,
.site-header .site-nav__link,
.site-header .site-header__phone,
.site-header .site-header__hamburger {
  color: rgba(255,255,255,0.92) !important;
}
/* v1.23.20 — was color: #ffffff !important; which forced inner-page hover text
 * to pure WHITE on the amber pill bg (low contrast, mismatched the homepage
 * which got navy ink via the .home-prefixed override). Switched to navy
 * (var(--c-primary)) so every page renders the same hover semantics as the
 * Get Started CTA. */
.site-header .site-nav__link:hover,
.site-header .site-nav__link[aria-expanded="true"] {
  color: var(--c-primary) !important;
}
.site-header .site-nav__link::after { background-color: var(--c-accent) !important; }
.site-header .site-header__logo:hover,
.site-header .site-header__brand:hover { color: #ffffff !important; }
/* Megamenu still on cream/white card — keep its inner text dark */
.site-header .site-megamenu { color: var(--c-ink); }
.site-header .site-megamenu a { color: var(--c-ink) !important; }
.site-header .site-megamenu a:hover { color: var(--c-primary) !important; }
.site-header .site-megamenu h4 { color: var(--c-ink-muted) !important; }

/* Homepage transparent-over-hero override stays — but when stuck, navy. */
/* (If there are any .home-specific overrides making nav transparent over
 *  the hero, keep them; the resting state is now navy across all pages.) */

/* CENTER the marketing-hero content (was left-aligned at desktop in v1.17.2,
 * which left a ton of empty space on the right). Match the homepage hero
 * style — centered eyebrow + H1 + lede + CTA. */
@media (min-width: 768px) {
  .marketing-hero__inner {
    text-align: center !important;
  }
  .marketing-hero__lede {
    margin-inline: auto !important;
  }
  .marketing-hero__cta-row {
    justify-content: center !important;
  }
}

/* ============================================================ */
/* v1.18.8 — GLOBAL pillar prose spacing system (VU pattern)    */
/*                                                              */
/* Problems this fixes:                                          */
/*   1. Pillar headings (centered, huge) ran into the floated   */
/*      TOC at right because container reservation was too thin.*/
/*   2. Pillar sections fragmented visually — cream summary box,*/
/*      cream TOC bg, white prose zones — alternating colors.   */
/*   3. Headings had no top margin so each H2 felt jammed       */
/*      against the previous section. No vertical rhythm.       */
/*   4. Long headings could break wrap and overflow.            */
/*                                                              */
/* The fix is global — applies to ALL pillar pages (D1-D5 plus  */
/* any future pillar) by selector body.is-pillar-page. Pure    */
/* token-based — no raw px values for color/spacing.            */
/* ============================================================ */

/* (A) Unified background — single white surface across all     */
/*     pillar zones. Kills any stale alternating bg colors.     */
body.is-pillar-page,
body.is-pillar-page section,
body.is-pillar-page .prose-zone,
body.is-pillar-page .pillar-summary-zone,
body.is-pillar-page .pillar-byline-top,
body.is-pillar-page .pillar-byline,
body.is-pillar-page .pillar-body {
  background-color: var(--c-surface) !important;
}

/* (B) Pillar prose H2 — left-aligned (VU pattern), generous     */
/*     top margin for clear section separation, hard wrap.       */
body.is-pillar-page .prose-block h2 {
  text-align: left !important;
  margin-block-start: var(--sp-6) !important;
  margin-block-end: var(--sp-3) !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  line-height: 1.3 !important;
}

/* First H2 in any prose-block doesn't need the big top margin.  */
body.is-pillar-page .prose-block > h2:first-child {
  margin-block-start: 0 !important;
}

/* (C) Pillar prose H3 — same wrap defenses, smaller margins.   */
body.is-pillar-page .prose-block h3 {
  margin-block-start: var(--sp-4) !important;
  margin-block-end: var(--sp-2) !important;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important;
  line-height: 1.35 !important;
}

/* (D) Pillar paragraph + list spacing — explicit vertical       */
/*     rhythm so headings are clearly separated from body copy.  */
body.is-pillar-page .prose-block p {
  margin-block-end: var(--sp-2) !important;
}

body.is-pillar-page .prose-block ul,
body.is-pillar-page .prose-block ol {
  margin-block-start: var(--sp-2) !important;
  margin-block-end: var(--sp-3) !important;
}

body.is-pillar-page .prose-block ul li,
body.is-pillar-page .prose-block ol li {
  margin-block-end: var(--sp-1) !important;
}

/* (E) Tighten TOC reservation so headings have more breathing   */
/*     room before the floated TOC. Was 350px → 400px.           */
@media (min-width: 1100px) {
  body.is-pillar-page .pillar-summary-zone > .container,
  body.is-pillar-page .pillar-body > .container {
    max-width: calc(100% - 400px) !important;
  }
}

/* (F) Flatten the Key Takeaways box — kill the gradient bg,    */
/*     just the accent left rule. Matches VU's flat aesthetic.  */
body.is-pillar-page .pillar-summary {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3) !important;
}

/* (G) Flatten legacy pillar-toc inline component (not the      */
/*     sticky TOC, the older grid-style one).                   */
body.is-pillar-page .pillar-toc {
  background-color: var(--c-surface) !important;
  border-block-color: var(--c-border) !important;
}

/* ============================================================ */
/* v1.18.8 — Homepage hero polish (less squished, no cutoff)    */
/*   Fixes:                                                      */
/*   (1) Italic h1-tail glyphs were clipping right edge          */
/*   (2) Letter-spacing was too tight — felt cramped             */
/*   (3) Margin between h1, lede, CTA was too small              */
/* ============================================================ */
.home .hero-takeover__inner {
  /* v1.20.0 — was 920px; widened to 1100px so the eyebrow / H1 /
   * H2 / CTA stack gets more breathing room without going full
   * page-width (1340px felt too edge-to-edge in QA). Internal
   * prose caps (60–64ch on .hero-takeover__h2 / __lede) keep the
   * reading measure tight even though the outer container is wider. */
  max-width: 1100px;
  padding-inline: var(--sp-2);
}

.home .hero-takeover__h1 {
  letter-spacing: -0.022em;
  /* v1.49.12 — Tightened from var(--sp-4) (32px) → 10px per Tyler. Lede now
   * sits closer to the H1, eyebrow + H1 + lede read as one tight headline
   * block instead of three loosely-spaced lines. */
  margin-block-end: 10px;
  overflow-wrap: break-word;
  word-break: normal;
}

.home .hero-takeover__h1 .h1-tail {
  /* Italic ascenders/descenders need extra room on right edge.  */
  padding-inline-end: 0.12em;
  padding-block-end: 0.16em;
}

.home .hero-takeover__lede {
  margin-block-end: var(--sp-5);
  max-width: 60ch;
}

.home .hero-takeover__cta {
  margin-block-start: var(--sp-1);
}

.home .hero-takeover__trust {
  margin-block-start: var(--sp-3);
}

/* ============================================================ */
/* v1.18.9 — Marketing-hero polish (About + Resources + future) */
/*                                                              */
/* (1) Eyebrow → amber pill badge (matches homepage hero)       */
/*     Was: plain orange text. Now: pill with amber bg/border.  */
/*                                                              */
/* (2) Trust meta line → renders BELOW the CTA button, not       */
/*     beside it. The PHP outputs .marketing-hero__meta inside   */
/*     .marketing-hero__cta-row (a flex row). Forcing meta to    */
/*     `flex-basis: 100%` makes it wrap to a new full-width line */
/*     under the button — same visual stack as homepage hero.    */
/*                                                              */
/* Token-based, applies to every page that uses [shopdpa_       */
/* marketing_hero] (About, Resources, future marketing pages).  */
/* ============================================================ */
.marketing-hero__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 197, 40, 0.12);
  border: 1px solid rgba(255, 197, 40, 0.35);
  border-radius: var(--r-pill);
  margin-block-end: var(--sp-3);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.marketing-hero__cta-row {
  flex-wrap: wrap;
}

.marketing-hero__cta-row .marketing-hero__meta {
  flex-basis: 100%;
  width: 100%;
  text-align: center;
  margin-block-start: var(--sp-1);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
}

/* ============================================================ */
/* v1.18.10 — CANONICAL ZONE CONTAINER SYSTEM                   */
/* (Single source of truth for horizontal alignment)            */
/*                                                              */
/* Problem this fixes:                                           */
/*   - Different zones used different .container max-widths      */
/*     (prose-zone 72rem, others 1340px). Visual zones didn't    */
/*     line up. Some content rendered with no .container at all  */
/*     and bled to the viewport edge (e.g., raw Gutenberg p tags)*/
/*     on /learn/ (renamed from /texas-dpa-resources/ in v1.23.17). */
/*   - Pillar TOC reservation only applied to .pillar-body       */
/*     containers, NOT to FAQ sections (.prose-zone), summary    */
/*     boxes, byline, or final-CTA. So the FAQ heading on D4     */
/*     overflowed under the floated TOC. The colored final-CTA   */
/*     content also bled under the TOC.                          */
/*                                                              */
/* The fix is architectural, not patches:                       */
/*   1. ALL zone .container use the same max-width + padding     */
/*      (--max-w-page + --container-pad tokens).                 */
/*   2. Loose Gutenberg paragraphs/headings auto-wrap with the   */
/*      same container constraints.                              */
/*   3. Pillar pages reserve --toc-reservation horizontal space  */
/*      on EVERY content section's inner container (FAQ, body,   */
/*      summary, prose-zone, AND .final-cta__inner).             */
/*   4. The Bricks parent #brx-content max-width override is     */
/*      preserved (full viewport) so colored zone backgrounds    */
/*      still span edge-to-edge.                                 */
/* ============================================================ */

/* (1) UNIFIED .container — every zone's inner container snaps   */
/*     to the same max-width and horizontal padding.             */
/* v1.40.2 — extended to CPT sections so county/city/isd/base    */
/*           pages get the same container-pad treatment (clamp   */
/*           16px → 4vw → 32px) instead of falling back to the   */
/*           base .container rule which used a smaller value.    */
.zone > .container,
.zone--alt > .container,
.zone--dark > .container,
.zone--topo > .container,
.prose-zone > .container,
.marketing-hero > .container,
.section-break > .container,
.pillar-byline-top > .container,
.pillar-summary-zone > .container,
.pillar-breadcrumbs > .container,
.pillar-body > .container,
.pillar-toc > .container,
.pillar-byline > .container,
.stats-zone-decor > .container,
.cpt-hero > .container,
.cpt-body > .container,
.cross-grid > .container,
.quick-facts > .container,
.ami-snapshot > .container,
.loan-limits > .container,
.high-schools > .container,
.bah-table > .container,
.neighborhoods > .container {
  max-width: var(--max-w-page) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  box-sizing: border-box;
}

/* v1.40.2 — mobile padding floor (CPT sections).
 * Defensive rule for CPT content sections — guarantees at least 16px of
 * inline padding from the viewport edge across all primary content surfaces
 * at narrow widths, even on selectors that bypass the unified .container
 * pattern (e.g. .cpt-body__inner, .faq-accordion). */
@media (max-width: 640px) {
  .cpt-hero > .container,
  .cpt-body,
  .cpt-body__inner,
  .cross-grid > .container,
  .quick-facts > .container,
  .ami-snapshot > .container,
  .loan-limits > .container,
  .faq-accordion {
    padding-inline: clamp(16px, 4vw, 24px) !important;   /* v1.49.6 — reverted the v1.49.5 reduction; the real squeeze was the .cpt-pillar article double-padding (now excluded above) */
    box-sizing: border-box;
  }
}

/* v1.40.4 + v1.40.5 — mobile padding sweep for pillar Pages.
 *
 * Pillar Pages like /cities/san-antonio/ (regular Pages with the
 * `body.is-pillar-page` class) use Bricks' direct-block-render pattern:
 * WordPress block content becomes #brx-content > * children, with parent
 * positioning providing the inline inset on desktop (to leave room for the
 * right-rail sticky TOC). On mobile the sidebar disappears and those
 * parent insets vanish, so content hits the viewport edge unless we add
 * explicit spacing.
 *
 * Two patterns are needed:
 *   - TEXT blocks (p, headings): inner `padding-inline` works fine because
 *     there's no negative-positioned content to worry about.
 *   - BOXES (callouts, tables) and LIST blocks (ul/ol with bullet markers
 *     in padding-left): need outer `margin-inline` so the box edge sits
 *     inset from the viewport and bullets don't render at viewport edge.
 *
 * Both patterns also override the 720px prose-block max-width so content
 * uses the full available viewport (minus the inline spacing) on mobile.
 */
@media (max-width: 768px) {

  /* TEXT blocks — inner padding pushes text inward */
  body.is-pillar-page #brx-content > p,
  body.is-pillar-page #brx-content > h1,
  body.is-pillar-page #brx-content > h2,
  body.is-pillar-page #brx-content > h3,
  body.is-pillar-page #brx-content > h4,
  body.is-pillar-page #brx-content > h5,
  body.is-pillar-page #brx-content > nav,
  body.is-pillar-page #brx-content > section,
  body.is-pillar-page #brx-content > figure,
  body.is-pillar-page .pillar-breadcrumb,
  body.is-pillar-page .faq-accordion,
  body.is-pillar-page .pillar-hero,
  body.is-pillar-page .pillar-byline-top,
  body.is-pillar-page .pillar-hero > .container,
  body.is-pillar-page .pillar-byline-top > .container {
    padding-inline: clamp(16px, 4vw, 20px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* v1.40.5 — BOX blocks need OUTER margin so the box edge sits inset
   * from the viewport. Internal padding stays for inner content spacing. */
  body.is-pillar-page .pillar-ai-summary,
  body.is-pillar-page .pillar-bottom-line,
  body.is-pillar-page .pillar-compare-wrap,
  body.is-pillar-page .pillar-quick-facts,
  body.is-pillar-page #brx-content > aside,
  body.is-pillar-page #brx-content > div:not(.pillar-sticky-toc):not(.mobile-sticky-cta):not(.faq-accordion),
  body.is-pillar-page #brx-content > table {
    margin-inline: clamp(16px, 4vw, 20px) !important;
    max-width: calc(100% - clamp(32px, 8vw, 40px)) !important;
    box-sizing: border-box;
  }

  /* v1.40.5 — LIST blocks need OUTER margin so the bullet markers (which
   * render inside the padding-inline-start zone) don't appear at the
   * viewport edge. Internal padding-inline-start stays at 24px to keep
   * the bullet space. */
  body.is-pillar-page #brx-content > ul,
  body.is-pillar-page #brx-content > ol,
  body.is-pillar-page #brx-content ul.wp-block-list,
  body.is-pillar-page #brx-content ol.wp-block-list {
    margin-inline-start: clamp(16px, 4vw, 20px) !important;
    margin-inline-end: clamp(16px, 4vw, 20px) !important;
    padding-inline-start: 24px !important;
    padding-inline-end: 0 !important;
    max-width: calc(100% - clamp(32px, 8vw, 40px)) !important;
    box-sizing: border-box;
  }

  /* Lists nested inside callouts (the Quick Summary 3 bullets, Bottom
   * Line ordered list, etc.) inherit the callout's box margin — but they
   * may still have their own padding-left for bullet markers. Reset any
   * extra inset they were applying so bullets sit cleanly inside the
   * callout padding zone. */
  body.is-pillar-page .pillar-ai-summary ul,
  body.is-pillar-page .pillar-ai-summary ol,
  body.is-pillar-page .pillar-bottom-line ul,
  body.is-pillar-page .pillar-bottom-line ol {
    margin-inline: 0 !important;
    padding-inline-start: 20px !important;
    max-width: 100% !important;
  }

  /* The mobile sticky CTA bar floats at the viewport bottom — inner
   * padding so the button/text don't kiss the viewport edge. */
  body.is-pillar-page .mobile-sticky-cta,
  body.is-pillar-page .mobile-sticky-cta__inner {
    padding-inline: clamp(16px, 4vw, 20px) !important;
    box-sizing: border-box;
  }

  /* Sticky TOC + CTA card (right rail on desktop, inline on mobile): */
  body.is-pillar-page .pillar-sticky-toc,
  body.is-pillar-page .pillar-sticky-toc__cta-card {
    padding-inline: clamp(16px, 4vw, 20px);
    box-sizing: border-box;
  }
}

/* Override the legacy v1.17.2 prose-zone narrower-container rule */
body:not(.is-pillar-page):not(.home) .prose-zone > .container,
body:not(.is-pillar-page):not(.home) .prose-zone .container {
  max-width: var(--max-w-page) !important;
}

/* (2) AUTO-WRAP loose Gutenberg paragraphs/headings/lists that  */
/*     render directly inside #brx-content without a .container  */
/*     wrapper. Without this they bleed to viewport left=0.      */
body.page:not(.is-pillar-page):not(.home) #brx-content > p,
body.page:not(.is-pillar-page):not(.home) #brx-content > h1,
body.page:not(.is-pillar-page):not(.home) #brx-content > h2,
body.page:not(.is-pillar-page):not(.home) #brx-content > h3,
body.page:not(.is-pillar-page):not(.home) #brx-content > h4,
body.page:not(.is-pillar-page):not(.home) #brx-content > h5,
body.page:not(.is-pillar-page):not(.home) #brx-content > h6,
body.page:not(.is-pillar-page):not(.home) #brx-content > ul,
body.page:not(.is-pillar-page):not(.home) #brx-content > ol,
body.page:not(.is-pillar-page):not(.home) #brx-content > blockquote,
body.page:not(.is-pillar-page):not(.home) #brx-content > figure {
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* (3) PILLAR TOC RESERVATION — applies to ALL pillar content    */
/*     sections, not just .pillar-body. Catches FAQ, summary,    */
/*     and any colored zone (final-CTA inner). Hero band,        */
/*     breadcrumbs, and byline-top header strip stay full width. */
@media (min-width: 1100px) {
  body.is-pillar-page .pillar-body > .container,
  body.is-pillar-page .pillar-summary-zone > .container,
  body.is-pillar-page .prose-zone > .container,
  body.is-pillar-page section.zone > .container,
  body.is-pillar-page section.zone--alt > .container,
  body.is-pillar-page section.zone--dark > .container,
  body.is-pillar-page .pillar-byline > .container {
    max-width: calc(100% - var(--toc-reservation)) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    padding-inline-end: 0 !important;
  }

  /* Final-CTA — constrain BOTH the section bg AND the inner so   */
  /* the colored navy block ends before the TOC starts. TOC items */
  /* must never visually overlap a colored section bg.            */
  body.is-pillar-page .final-cta {
    max-width: calc(100% - var(--toc-reservation)) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden;
  }
  body.is-pillar-page .final-cta__inner {
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* HEADER BANDS — byline-top + breadcrumbs sit ABOVE the TOC,   */
  /* but their INNER text must visually align with the body       */
  /* content below (which is left-aligned with TOC reservation).  */
  /* The section bg still spans full viewport — only the inner    */
  /* .container constrains to match body alignment.               */
  body.is-pillar-page .pillar-byline-top > .container,
  body.is-pillar-page .pillar-breadcrumbs > .container {
    max-width: calc(100% - var(--toc-reservation)) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    padding-inline-end: 0 !important;
  }
  /* Inner flex row left-aligns instead of centering — so "Reviewed */
  /* by Byron" lines up with the H2s in the body below.             */
  body.is-pillar-page .pillar-byline-top__inner {
    max-width: none !important;
    margin-inline: 0 !important;
    justify-content: flex-start !important;
  }

  /* Hero band — full width (it's the navy header that spans top) */
  body.is-pillar-page .marketing-hero > .container,
  body.is-pillar-page .hero-takeover__inner {
    max-width: var(--max-w-page) !important;
    margin-inline: auto !important;
    padding-inline: var(--container-pad) !important;
  }
}

/* ============================================================ */
/* v1.18.14 — ROLLED BACK v1.18.12 + v1.18.13 breakouts          */
/*                                                              */
/* User feedback: "these look worse than before. you had        */
/* spacing pretty nailed down before for the content inside."    */
/*                                                              */
/* What v1.18.12 + v1.18.13 attempted: break ALL pillar sections */
/* out of Bricks parent #brx-content so headers + body would     */
/* share one viewport-anchored origin. Side effect: body content */
/* lost its natural ~206px Bricks parent inset → body H2s + p    */
/* were flush left (l=32) and content was 1080px wide (too wide  */
/* to read comfortably). Final-CTA + FAQ widened too far.        */
/*                                                              */
/* Reverted to v1.18.11 state where:                            */
/*   - Body sections stay inside Bricks parent → natural inset   */
/*     and readable width (l=206, content area ~636px)          */
/*   - Headers (byline-top, breadcrumbs) keep v1.18.11 left-     */
/*     align with TOC reservation                                */
/*   - Slight header/body misalignment is accepted in exchange   */
/*     for the comfortable spacing the user had locked in        */
/* ============================================================ */

/* ============================================================ */
/* CONFIRMATION PAGE — /confirmation/                            */
/* Brand-native, light-bone hero with amber stamp.               */
/* Horizontal status timeline · Byron strip · editorial 3-up     */
/* "while you wait" · vertical-rail "what happens next" ·        */
/* deadline band · borderless FAQ · keep-digging cards.          */
/* Added 2026-05-05.                                             */
/* ============================================================ */
.confirmation-hero,
.confirmation-byron,
.confirmation-wait,
.confirmation-next,
.confirmation-deadline,
.confirmation-faq,
.confirmation-keep {
  width: 100%;
  /* v1.23.3 — Override Bricks-parent's default section margin-inline:    */
  /* -7.5px (full-bleed bleed). On viewports with a scrollbar, the        */
  /* negative margin pushed each section 15px past the viewport, creating */
  /* horizontal scroll. Lock to 0 so sections respect the article width.  */
  margin-inline: 0;
  max-width: 100%;
  padding: clamp(48px, 7vw, 88px) 0;
}
.confirmation-hero { padding-bottom: clamp(56px, 6vw, 72px); }
.confirmation-byron { padding-top: 0; }
.confirmation-disclose {
  width: 100%;
  padding: 28px 0 36px;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

/* --- Hero ----------------------------------------------------- */
.confirmation-hero {
  position: relative;
  background: var(--c-bg);
  overflow: hidden;
}
/* v1.23.3 — Removed `.confirmation-hero::before` radial-gradient glow and  */
/* converted `::after` divider from a fading linear-gradient to a solid     */
/* hairline. Per design rule (no gradients unless specifically requested);  */
/* see voice/visual-direction docs and feedback_no_gradients memory.        */
.confirmation-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--c-border);
}
.confirmation-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.confirmation-hero__stamp {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  filter: drop-shadow(0 8px 22px var(--c-accent-glow));
  animation: confirmation-stamp-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.confirmation-hero__stamp svg { width: 100%; height: 100%; display: block; }
@keyframes confirmation-stamp-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* v1.23.1 — Stamp + H1 in a horizontal row instead of stacked. The stamp */
/* now sits immediately to the left of the "Got it…" headline so the eye */
/* lands on a single visual unit instead of reading checkmark → title as */
/* two separate beats.                                                    */
.confirmation-hero__title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.confirmation-hero__title-row .confirmation-hero__stamp {
  width: 56px;
  height: 56px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.confirmation-hero__title-row .confirmation-hero__h1 {
  margin: 0;
}
@media (max-width: 640px) {
  .confirmation-hero__title-row {
    gap: 12px;
  }
  .confirmation-hero__title-row .confirmation-hero__stamp {
    width: 44px;
    height: 44px;
  }
}

/* v1.23.1 — Hide the bare WP page title H1 that Bricks parent's index.php */
/* emits as the first child of #brx-content. On the /confirmation/ page    */
/* (and any other page that renders [shopdpa_confirmation]) this duplicates */
/* the .confirmation-hero__h1 below it. Scoped via :has() so it only fires */
/* when .confirmation-hero is present on the page — no per-post-ID coupling.*/
/* :has() supported in Chrome 105+, Safari 15.4+, Firefox 121+.            */
#brx-content:has(.confirmation-hero) > h1:first-child {
  display: none !important;
}
.confirmation-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary-mid);
}
.confirmation-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.confirmation-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--c-primary);
  margin: 0 0 18px;
  text-wrap: balance;
}
.confirmation-hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin: 0 0 36px;
  max-width: 720px;
}

/* --- Hero status timeline (horizontal) ------------------------ */
.confirmation-track {
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
}
.confirmation-track::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--c-border-strong);
  z-index: 0;
}
.confirmation-track__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
.confirmation-track__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-border-strong);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s ease;
}
.confirmation-track__dot svg { width: 16px; height: 16px; }
.confirmation-track__step.is-done .confirmation-track__dot {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(26, 164, 164, 0.14);
}
.confirmation-track__step.is-active .confirmation-track__dot {
  background: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 6px var(--c-accent-soft);
  animation: confirmation-pulse 1.8s ease-in-out infinite;
}
@keyframes confirmation-pulse {
  0%, 100% { box-shadow: 0 0 0 6px var(--c-accent-soft); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 197, 40, 0.10); }
}
.confirmation-track__label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  letter-spacing: -0.005em;
}
.confirmation-track__sub {
  font-size: 12.5px;
  color: var(--c-ink-muted);
  margin-top: 2px;
}

/* v1.23.6 — Track disclosure note. Sits below the timeline as a centered
 * fine-print line ("Response times tend to be fastest during Texas business
 * hours…"). Bridges the timeline above to the wait section below. */
.confirmation-track__note {
  margin: 24px auto 0;
  max-width: 880px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-ink-muted);
}

/* --- Byron strip (orphaned in v1.23.6 — markup removed; CSS kept    */
/*     for now to avoid breakage if any cached page references it) -- */
.confirmation-byron__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 8px 28px rgba(2, 33, 78, 0.06);
}
.confirmation-byron__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-alt);
  flex: none;
  border: 2px solid var(--c-accent);
  padding: 4px;
}
.confirmation-byron__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.confirmation-byron__kicker {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary-mid);
}
.confirmation-byron__h {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.confirmation-byron__credentials {
  display: inline-block;
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
  letter-spacing: 0.04em;
}
.confirmation-byron__quote {
  font-size: 15.5px;
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin: 0 0 12px;
  font-style: italic;
}
.confirmation-byron__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-action);
  text-decoration: none;
}
.confirmation-byron__link:hover { color: var(--c-action-hover); }
.confirmation-byron__link span { transition: transform 0.2s ease; }
.confirmation-byron__link:hover span { transform: translateX(3px); }

/* --- Section heads (shared) ---------------------------------- */
.confirmation-section__head {
  max-width: 720px;
  margin: 0 0 36px;
}
.confirmation-section__kicker {
  display: inline-block;
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary-mid);
}
.confirmation-section__h {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  color: var(--c-primary);
  margin: 0 0 12px;
}
.confirmation-section__sub {
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin: 0;
  max-width: 640px;
}

/* --- While you wait — editorial 3-up ------------------------- */
.confirmation-wait { background: var(--c-bg-alt); }

/* v1.23.5 — Layout switched from 3-up grid to 2-col with portrait media. */
/* v1.23.6 — Added .confirmation-wait__main wrapper so the section header */
/* (kicker/H2/sub) lives inside the layout grid alongside the list, and   */
/* the portrait figure stretches to the full height of header+list rather */
/* than just the list (was sitting awkwardly low on screen).              */
.confirmation-wait__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}
.confirmation-wait__main {
  display: flex;
  flex-direction: column;
}
.confirmation-wait__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.confirmation-wait__item {
  position: relative;
  padding-top: 18px;
  border-top: 2px solid var(--c-primary);
}
.confirmation-wait__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-bg);
  min-height: 100%;
  aspect-ratio: 2 / 3;
}
.confirmation-wait__media picture,
.confirmation-wait__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.confirmation-wait__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  color: var(--c-accent-hover);
  margin-bottom: 10px;
}
.confirmation-wait__h {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.32;
}
.confirmation-wait__item p {
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin: 0;
}
.confirmation-wait__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-action);
  text-decoration: none;
}
.confirmation-wait__link:hover { color: var(--c-action-hover); }
.confirmation-wait__link span { transition: transform 0.2s ease; }
.confirmation-wait__link:hover span { transform: translateX(3px); }

/* --- What happens next — vertical-rail timeline -------------- */
.confirmation-next { background: var(--c-surface); }

/* v1.23.6 — Same 2-col layout as the wait section, with the rail       */
/* content on the LEFT and the portrait figure on the RIGHT. Mirroring  */
/* the wait section's structure (text-image, text-image) reads as       */
/* visual rhythm down the page. The figure stretches to the full        */
/* content height of header + rail steps.                                */
.confirmation-next__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}
.confirmation-next__main {
  display: flex;
  flex-direction: column;
}
.confirmation-next__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-bg);
  min-height: 100%;
  aspect-ratio: 2 / 3;
}
.confirmation-next__media picture,
.confirmation-next__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.confirmation-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  position: relative;
  max-width: 760px;
}
.confirmation-rail::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 2px;
  /* v1.23.3 — was `linear-gradient(to bottom, var(--c-accent), var(--c-border-strong))`. */
  /* Solid border-strong per no-gradients rule. The amber accent at the    */
  /* top-of-rail signal moved to the numbered step circles which are       */
  /* already amber-on-navy.                                                 */
  background: var(--c-border-strong);
  border-radius: 2px;
}
.confirmation-rail__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  padding: 14px 0 28px;
  align-items: flex-start;
}
.confirmation-rail__step:last-child { padding-bottom: 0; }
.confirmation-rail__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  margin-left: -22px;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--c-surface);
}
.confirmation-rail__body h3 {
  font-family: var(--font-heading);
  font-size: 1.14rem;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  padding-top: 6px;
}
.confirmation-rail__body p {
  font-size: 15.5px;
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin: 0;
}

/* --- Deadline band ------------------------------------------- */
.confirmation-deadline {
  background: var(--c-bg);
  padding: clamp(40px, 5vw, 64px) 0;
}
.confirmation-deadline__band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  /* v1.23.3 — was `linear-gradient(135deg, #FFF7DA 0%, #FBF5E3 100%)`.    */
  /* Solid soft-cream per no-gradients rule. Amber border + shadow         */
  /* preserve the warm "callout" feel without the gradient tint.            */
  background: #FBF5E3;
  border: 1px solid var(--c-accent-soft);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 10px 32px rgba(255, 197, 40, 0.10);
}
.confirmation-deadline__copy h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
}
.confirmation-deadline__copy p {
  font-size: 15.5px;
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
  margin: 0;
  max-width: 560px;
}
.confirmation-deadline__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- FAQ — borderless line-divided -------------------------- */
.confirmation-faq { background: var(--c-bg-alt); }
/* v1.23.6 — center the section header and the list inline so they
 * stack symmetrically on the page (was left-aligned with default
 * margin-inline: 0). The kicker uses inline-block so text-align
 * centers it; the H2 + sub paragraph inherit the centering. */
.confirmation-faq .confirmation-section__head {
  margin-inline: auto;
  text-align: center;
}
.confirmation-faq .confirmation-section__sub { margin-inline: auto; }
.confirmation-faq__list {
  max-width: 880px;
  margin-inline: auto;
}
.confirmation-faq__item {
  border-top: 1px solid var(--c-border);
  background: transparent;
}
.confirmation-faq__item:last-child { border-bottom: 1px solid var(--c-border); }
.confirmation-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  letter-spacing: -0.01em;
}
.confirmation-faq__item summary::-webkit-details-marker { display: none; }
.confirmation-faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 300;
  color: var(--c-accent-hover);
  transition: transform 0.2s ease;
  line-height: 1;
}
.confirmation-faq__item[open] summary::after { content: "−"; }
.confirmation-faq__ans {
  padding: 0 4px 22px;
  max-width: 760px;
}
.confirmation-faq__ans p {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--lh-relaxed);
  color: var(--c-ink-muted);
}
.confirmation-faq__ans a {
  color: var(--c-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- Keep digging cards -------------------------------------- */
.confirmation-keep { background: var(--c-surface); }
.confirmation-keep__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.confirmation-keep__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--border-radius-lg, 14px);
  padding: 24px 22px;
  text-decoration: none;
  color: var(--c-primary);
  transition: all 0.22s ease;
  height: 100%;
}
.confirmation-keep__card:hover {
  border-color: var(--c-accent);
  background: var(--c-surface);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(2, 33, 78, 0.07);
}
.confirmation-keep__lbl {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary-mid);
}
.confirmation-keep__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.confirmation-keep__arrow {
  margin-top: auto;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--c-accent-hover);
}

/* --- Disclosure footer --------------------------------------- */
.confirmation-disclose p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-ink-muted);
  margin: 0;
  max-width: 1000px;
}
.confirmation-disclose p + p { margin-top: 8px; }
.confirmation-disclose strong { color: var(--c-ink); font-weight: var(--fw-semibold); }

/* --- Responsive ---------------------------------------------- */
@media (max-width: 900px) {
  .confirmation-byron__card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
    padding: 26px 24px;
  }
  .confirmation-byron__photo { margin: 0 auto; }
  .confirmation-wait__layout { grid-template-columns: 1fr; gap: 32px; }
  .confirmation-wait__list { gap: 28px; }
  .confirmation-wait__media { position: static; max-width: 480px; margin: 0 auto; }
  .confirmation-next__layout { grid-template-columns: 1fr; gap: 32px; }
  .confirmation-next__media { position: static; max-width: 480px; margin: 0 auto; order: -1; }
  .confirmation-keep__list { grid-template-columns: 1fr; }
  .confirmation-deadline__band { grid-template-columns: 1fr; padding: 28px 26px; }
  .confirmation-deadline__actions { width: 100%; }
  .confirmation-deadline__actions .btn { width: 100%; }
}
@media (max-width: 640px) {
  .confirmation-track::before { left: 16%; right: 16%; }
  .confirmation-track__label { font-size: 12.5px; }
  .confirmation-track__sub { font-size: 11.5px; }
  .confirmation-rail__num {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-left: -18px;
  }
  .confirmation-rail::before { left: 17px; }
  .confirmation-rail { padding-left: 14px; }
  .confirmation-rail__step { gap: 16px; }
}

/* ============================================================ */
/* v1.23.6 — Secure-field lock icons on Form 3 contact step      */
/*                                                                */
/* Subtle lock SVG inset into the right side of name/email/phone  */
/* inputs on the final contact step. Communicates encryption /    */
/* privacy without consuming layout. Scoped via .ff-on-last-step  */
/* (class JS-toggled when the last step becomes active per the    */
/* 2026-05-04 form rebuild).                                       */
/* SVG: rounded padlock at 16px, stroke #64748b (slate-500) — sits */
/* above the input's white surface as a muted gray icon. Encoded   */
/* as inline data URI so no extra HTTP request, and so the rule    */
/* survives any caching / CDN layer.                               */
/* ============================================================ */
/* NOTE: .ff-on-last-step is added directly to the .fluentform element       */
/* itself (not a descendant), so the selector must chain class names without */
/* a space between them. (Earlier descendant-form selector failed silently.)  */
.fluentform.ff-on-last-step input[type="text"],
.fluentform.ff-on-last-step input[type="email"],
.fluentform.ff-on-last-step input[type="tel"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 16px 16px !important;
  padding-right: 46px !important;
}

/* Slightly more visible (deeper navy) on focus — confirms the lock */
/* signal even more clearly when the user is actively typing.        */
.fluentform.ff-on-last-step input[type="text"]:focus,
.fluentform.ff-on-last-step input[type="email"]:focus,
.fluentform.ff-on-last-step input[type="tel"]:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302214E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
}

/* ============================================================ */
/* v1.23.13 — Site-wide eyebrow color rule                      */
/* Light-bg sections (.zone, .zone--alt, .stats-zone-decor) use */
/* navy var(--c-primary). Dark-bg sections (.zone--dark) keep   */
/* amber var(--c-accent). User flagged 2026-05-06 that amber    */
/* eyebrows on cream backgrounds were low-contrast. The rule    */
/* already lived implicitly in the stats section override; now  */
/* it's site-wide. Memory: feedback_eyebrow_color_by_zone.md.   */
/* ============================================================ */
.zone .eyebrow,
.zone--alt .eyebrow,
.stats-zone-decor .eyebrow,
.calc__title-eyebrow {
  color: var(--c-primary);
}

.zone--dark .calc__title-eyebrow {
  color: var(--c-accent);
}

/* v1.42.0 — eyebrow pills carry navy ink on every zone (uniform-pill rule, */
/* base.css). The stale dark-zone amber-text override rendered the amber     */
/* pill amber-on-amber (invisible) on the .zone--dark Heroes + Cities zones. */
.zone--dark .eyebrow {
  color: var(--c-primary);
}

/* ============================================================ */
/* v1.23.13 — Process zone overrides                            */
/* Fills the icon circles + numbered badges with brand navy,    */
/* removes the amber connector line between steps, widens the   */
/* lede, fine-prints the disclosure, and tightens section       */
/* bottom padding so the disclosure pins to the section edge.   */
/* ============================================================ */
.process-zone .zone-header,
.process-zone .zone-header__lede {
  max-width: 72rem;
}

.process-zone {
  padding-block-end: var(--sp-3);
}

.process-zone .process-steps {
  margin-block-end: var(--sp-4);
}

/* Filled-navy icon circles (replaces cream-outline) */
.process-zone .process-steps__icon-wrap {
  background-color: var(--c-primary);
  border: 0;
  color: var(--c-ink-inverse);
}

.process-zone .process-steps__step:hover .process-steps__icon-wrap {
  background-color: var(--c-primary-hover);
  transform: translateY(-2px);
}

/* Kill the connector line — both sources */
.process-zone .process-steps__step:not(:last-child)::after,
.process-zone .process-steps::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Numbered badge: filled navy, amber number, smaller, further offset */
.process-zone .process-steps__num {
  width: 36px;
  height: 36px;
  top: -14px;
  right: -16px;
  font-size: var(--fs-md);
  background: var(--c-primary);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: var(--c-accent);
  border: 0;
}

/* Disclosure: fine-print, wide (72rem), centered, sits at section foot */
.process-zone .process-disclosure {
  text-align: center;
  font-size: 12px;
  color: var(--c-ink-soft);
  max-width: 72rem;
  margin-inline: auto;
  margin-block: 0;
  line-height: 1.5;
  padding-inline: var(--sp-3);
}

/* ============================================================ */
/* v1.23.13 — Why-trio zone overrides                           */
/* Lede widening to 72rem default per the breathe rule.         */
/* Card 2 icon (dollar sign) is leftover from "Free to use" and */
/* visually mismatches the new "Vetted Texas Partner Network"   */
/* title — flagged for icon swap in a future ship.              */
/* ============================================================ */
.why-trio-zone .zone-header,
.why-trio-zone .zone-header__lede {
  max-width: 72rem;
}

/* ============================================================ */
/* v1.23.14 — FAQ accordion fade-in animation                   */
/* Replaces native <details> snap-open with smooth max-height + */
/* opacity + translateY transition. The [open] attribute is the */
/* CSS state hook; JS (in shopdpa_render_faq inline script)     */
/* delays [open] removal on close so the close also animates.   */
/* display: block !important overrides browser UA stylesheet's  */
/* display:none on closed <details> children — without this the */
/* very first open snaps because no transition can run from     */
/* display:none.                                                  */
/* ============================================================ */
.faq-accordion__item > .faq-accordion__answer {
  display: block !important;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  padding-block-end: 0;
  transition:
    max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.32s ease-out 0.06s,
    transform 0.32s ease-out 0.06s,
    padding-block-end 0.4s ease;
}

.faq-accordion__item[open] > .faq-accordion__answer {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  padding-block-end: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion__item > .faq-accordion__answer {
    transition: none;
  }
}

/* ============================================================ */
/* v1.23.14 — Final CTA: solid overlay + wider inner            */
/* Replaces the prior linear-gradient overlay (which violated   */
/* the no-gradients rule) with a solid navy `rgba(2,33,78,0.88)`*/
/* via a pseudo-element. Inner bumped 720px → 72rem so the H2   */
/* and body don't get clamped tight on desktop.                 */
/* ============================================================ */
.final-cta {
  background-color: var(--c-primary);
  background-image: var(--final-cta-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 33, 78, 0.88);
  background-image: none;
  z-index: 0;
}

.final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin-inline: auto;
}

.final-cta h2 {
  max-width: none;
}

.final-cta__body {
  max-width: 72rem;
  margin-inline: auto;
}

/* ========================================================================
 * v1.23.18 — /learn/ educational hub
 * ------------------------------------------------------------------------
 * Hero, filter pills, featured cards, tools, latest grid, CTA.
 * Mirrors the editorial layout pattern of Better.com / Bankrate / VU
 * education hubs. No gradients (per locked design rule). Pill hover
 * matches the navbar pattern: amber bg + navy ink.
 * ====================================================================== */

/* Hero — left-aligned to container edge (matches card grid edge) ------ */
.learn-hero {
  padding-block: clamp(var(--sp-5), 8vw, 6rem) var(--sp-4);
  text-align: left;
}

.learn-hero__inner {
  max-width: none;
  margin-inline: 0;
}

.learn-hero h1 {
  margin-block: var(--sp-1) var(--sp-2);
}

.learn-hero .lede {
  max-width: 56rem;
  margin-inline: 0;
}

/* Filter pills bar ----------------------------------------------------- */
.learn-filters-zone {
  padding-block: var(--sp-2) var(--sp-2);
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid rgba(2, 33, 78, 0.06);
}

.learn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-half);
  /* v1.23.18 — left-aligned to container edge (matches card grid edge) */
  justify-content: flex-start;
  padding-block: var(--sp-1);
}

@media (max-width: 768px) {
  .learn-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--sp-3));
    padding-inline: var(--sp-3);
  }
  .learn-filter { scroll-snap-align: start; flex: 0 0 auto; }
}

.learn-filter {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(2, 33, 78, 0.18);
  color: var(--c-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-snug);
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}

.learn-filter:hover {
  background-color: rgba(255, 197, 40, 0.12);
  border-color: var(--c-accent);
}

.learn-filter.is-active {
  background-color: var(--c-accent);
  color: var(--c-primary);
  border-color: var(--c-accent);
}

.learn-filter:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Section heading bar — left-aligned to container edge (v1.23.18) ------ */
.learn-section__head {
  text-align: left;
  margin-block-end: var(--sp-4);
  max-width: none;
  margin-inline: 0;
}

.learn-section__head h2 {
  margin-block-end: var(--sp-1);
}

.learn-section__head .lede {
  max-width: 56rem;
  margin-inline: 0;
}

.learn-section.is-empty {
  display: none;
}

/* Cards — common ------------------------------------------------------- */
.learn-cards {
  display: grid;
  gap: var(--sp-3);
}

.learn-cards.is-filtered-out,
.learn-card.is-filtered-out {
  display: none;
}

.learn-cards--featured {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .learn-cards--featured { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .learn-cards--featured { grid-template-columns: repeat(3, 1fr); }
}

.learn-cards--grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .learn-cards--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .learn-cards--grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card ----------------------------------------------------------------- */
.learn-card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-surface);
  border: 1px solid rgba(2, 33, 78, 0.08);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.learn-card:hover,
.learn-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: rgba(2, 33, 78, 0.18);
}

.learn-card:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Card media (header strip with category color) ----------------------- */
.learn-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-2);
  background-color: var(--c-primary);
}

.learn-card--large .learn-card__media {
  aspect-ratio: 4 / 3;
}

/* Per-category media color (solid, no gradient — locked design rule) */
.learn-card__media--dpa         { background-color: #02214E; }   /* navy */
.learn-card__media--loans       { background-color: var(--c-accent); }   /* amber */
.learn-card__media--heroes      { background-color: #8B1A1A; }   /* deep texan red */
.learn-card__media--cities      { background-color: #033078; }   /* primary-mid blue */
.learn-card__media--tax-credits { background-color: #C2410C; }   /* warm orange */
.learn-card__media--first-time  { background-color: #2F5233; }   /* deep green */

.learn-card__cat {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
}

/* Loan-types tag sits on amber media — needs darker bg so it stays legible */
.learn-card__media--loans .learn-card__cat {
  background-color: var(--c-primary);
  color: var(--c-bg);
}

.learn-card__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background-color: var(--c-bg);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}

/* Card body */
.learn-card__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
}

.learn-card__title {
  font-size: var(--fs-h4, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-primary);
  margin: 0;
}

.learn-card--large .learn-card__title {
  font-size: var(--fs-h3, 1.5rem);
}

.learn-card__lede {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.learn-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-block-start: var(--sp-1);
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid rgba(2, 33, 78, 0.08);
}

.learn-card__author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  font-weight: var(--fw-medium);
}

.learn-card__author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--c-primary);
  padding: 4px;
}

.learn-card__time {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
}

/* Tools section ------------------------------------------------------- */
.learn-tools {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .learn-tools { grid-template-columns: repeat(2, 1fr); }
}

.learn-tool {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  background-color: var(--c-surface);
  border: 1px solid rgba(2, 33, 78, 0.08);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.learn-tool:hover,
.learn-tool:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--c-accent);
}

.learn-tool:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.learn-tool__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 197, 40, 0.18);
  color: var(--c-primary);
  border-radius: var(--r-md);
}

.learn-tool__icon svg {
  width: 28px;
  height: 28px;
}

.learn-tool__title {
  margin: 0 0 0.25rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
}

.learn-tool__lede {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: 1.5;
}

.learn-tool__arrow {
  font-size: 1.25rem;
  color: var(--c-primary);
  transition: transform 0.18s var(--ease);
}

.learn-tool:hover .learn-tool__arrow {
  transform: translateX(4px);
}

/* CTA at bottom ------------------------------------------------------- */
.learn-cta {
  text-align: center;
  padding-block: clamp(var(--sp-5), 8vw, 6rem);
}

.learn-cta__inner {
  max-width: 56rem;
  margin-inline: auto;
}

.learn-cta h2 {
  color: var(--c-bg);
  margin-block: var(--sp-1) var(--sp-2);
}

.learn-cta .lede {
  color: rgba(250, 247, 242, 0.85);
  max-width: 48rem;
  margin-inline: auto;
  margin-block-end: var(--sp-3);
}

/* Eyebrow color override on dark CTA — amber per locked rule */
.learn-cta .eyebrow {
  color: var(--c-accent);
}

/* ============================================================ */
/* v1.24.3 — Marketing hero rebuilt to match homepage hero      */
/* About / Resources / brand pages now use the same full-       */
/* viewport pattern as .hero-takeover: photo + deep-navy        */
/* overlay + amber pill eyebrow + 3-item trust row pinned       */
/* to section bottom. The shortcode [shopdpa_marketing_hero]    */
/* accepts an `image=""` attribute that sets --hero-image.      */
/*                                                              */
/* Pre-v1.24.3 .marketing-hero was a static navy gradient with  */
/* an off-spec amber-tinted eyebrow + meta line wedged into     */
/* the cta-row. Header sat directly on solid-navy hero with no  */
/* photo break, making the navbar feel taller than homepage.    */
/* This block restores brand-consistent hierarchy.              */
/* ============================================================ */
.marketing-hero {
  position: relative;
  background-color: var(--c-primary-deep) !important;
  background-image: var(--hero-image, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  color: var(--c-ink-inverse);
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--sp-7) var(--sp-7) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 12, 36, 0.84) 0%,
    rgba(0, 12, 36, 0.74) 55%,
    rgba(0, 12, 36, 0.60) 100%
  );
  z-index: 0;
}

.marketing-hero > .container,
.marketing-hero .container {
  position: relative;
  z-index: 1;
}

/* Center-align inner content (overrides earlier desktop left-align rule) */
.marketing-hero__inner {
  text-align: center !important;
  max-width: 56rem !important;
  margin-inline: auto !important;
}
@media (min-width: 768px) {
  .marketing-hero__inner {
    text-align: center !important;
  }
  .marketing-hero__lede {
    margin-inline: auto !important;
  }
  .marketing-hero__cta-row {
    justify-content: center !important;
  }
}

/* Eyebrow pill — match .hero-takeover__eyebrow exactly */
.marketing-hero__eyebrow {
  display: inline-block !important;
  background: var(--c-accent) !important;
  background-color: var(--c-accent) !important;
  border: 0 !important;
  color: var(--c-primary-deep) !important;
  font-size: 11px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 1.98px !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: var(--r-pill) !important;
  margin-block-end: var(--sp-3) !important;
}

/* Trust row pinned to section bottom (3rem inset). Identical visual
 * treatment to .hero-takeover__trust on homepage; this rule applies
 * the absolute-bottom positioning correctly when the trust row is a
 * direct child of .marketing-hero (not .marketing-hero__inner). */
.marketing-hero > .hero-takeover__trust,
.marketing-hero > .marketing-hero__trust,
.marketing-hero .marketing-hero__trust {
  position: absolute !important;
  left: 50% !important;
  bottom: 3rem !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100% - var(--sp-4)) !important;
  margin: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-1) var(--sp-2) !important;
  padding: 0 !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: var(--fs-sm) !important;
}

@media (max-width: 640px) {
  .marketing-hero {
    padding-block: var(--sp-6) var(--sp-6) !important;
    min-height: auto;
  }
  .marketing-hero > .marketing-hero__trust,
  .marketing-hero .marketing-hero__trust {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    margin-block-start: var(--sp-3) !important;
  }
}

/* ============================================================ */
/* v1.33.0 — Legal page typography                              */
/* ------------------------------------------------------------ */
/* Container rendered by [shopdpa_privacy_policy],              */
/* [shopdpa_terms_of_service], [shopdpa_accessibility_statement],*/
/* [shopdpa_disclosures], [shopdpa_tcpa_consent]. Long-form     */
/* legal prose — readable line-length, comfortable rhythm,      */
/* visible anchor scroll-padding for in-page TOC links.         */
/* ============================================================ */

/* v1.33.2 — Hide Bricks' fallback page-title H1 on the 5 legal pages.
 * Bricks' default WordPress page-rendering prepends <h1>{post_title}</h1>
 * as a direct child of #brx-content even when our shortcode already includes
 * a header. The legal-page article's H1 is a grandchild of #brx-content
 * (nested inside <article class="legal-page">), so the > h1 direct-child
 * selector targets only the Bricks-injected fallback H1, not the article H1.
 * Body class added by the shopdpa_legal_page body_class filter in functions.php. */
body.shopdpa-legal-page #brx-content > h1 {
  display: none !important;
}

.legal-page {
  /* v1.33.1 — Defensive layout. !important on max-width / margin / padding
   * because legal pages drop into Bricks pages where parent container CSS
   * varies and we cannot rely on cascade winning. clamp() scales padding
   * fluidly: 24px floor on narrow phones, ~5vw mid-range, 64px ceiling on
   * huge desktop. The 760px max-width caps readable line-length. */
  max-width: 760px !important;
  margin-inline: auto !important;
  padding-block: var(--sp-5) !important;
  padding-inline: clamp(var(--sp-3), 5vw, var(--sp-6)) !important;
  width: auto !important;
  box-sizing: border-box !important;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.legal-page__header {
  margin-block-end: var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--c-border);
}

.legal-page__header h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--sp-1);
  color: var(--c-primary);
}

.legal-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin: 0;
}

.legal-page__intro {
  font-size: var(--fs-md);
  color: var(--c-ink);
  margin-block-end: var(--sp-3);
}

/* All-caps arbitration / read-carefully warning callout */
.legal-page__warning {
  background-color: var(--c-bg-alt);
  border-inline-start: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-block: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.legal-page__warning strong {
  display: block;
  margin-block-end: var(--sp-1);
  color: var(--c-primary);
}

/* Quoted-consent / blockquote callout */
.legal-page__blockquote {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
}

.legal-page__blockquote p {
  margin-block: var(--sp-1);
}

/* Section headings — vertical rhythm + scroll-margin so anchor
 * jumps land below the sticky header. */
.legal-page h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--c-primary);
  margin: var(--sp-5) 0 var(--sp-2);
  scroll-margin-top: 96px;
}

.legal-page h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  margin: var(--sp-3) 0 var(--sp-1);
  scroll-margin-top: 96px;
}

.legal-page p {
  margin: 0 0 var(--sp-2);
  color: var(--c-ink);
}

.legal-page ul,
.legal-page ol {
  margin: 0 0 var(--sp-2) var(--sp-3);
  padding: 0;
}

.legal-page li {
  margin-block-end: var(--sp-1);
  line-height: var(--lh-relaxed);
}

.legal-page strong {
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
}

.legal-page a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: rgba(2, 33, 78, 0.35);
  text-underline-offset: 0.2em;
}

.legal-page a:hover {
  text-decoration-color: var(--c-primary);
}

/* External links open-in-new-tab visual hint not required —
 * keep markup clean. */

/* Mobile tightening */
@media (max-width: 640px) {
  .legal-page {
    padding-block: var(--sp-3);
    font-size: var(--fs-sm);
  }
  .legal-page__header h1 { font-size: var(--fs-xl); }
  .legal-page h2 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
  .legal-page h3 { font-size: var(--fs-md); }
  .legal-page__meta { flex-direction: column; gap: var(--sp-1); }
}

/* ============================================================ */
/* v1.42.0 — Process accordion (process steps as collapsible    */
/* rows; mirrors faq-accordion). Replaces the 4-up grid that     */
/* squished on mobile and is reused on other pages. Icon + title */
/* in the summary, full step copy in the collapsible panel.      */
/* Step-number badges removed per Tyler.                         */
/* ============================================================ */
.process-accordion {
  margin-inline: auto;
  margin-block: var(--sp-4);
}
.process-step__head {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.process-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-primary);
  color: var(--c-ink-inverse);
}
.process-step__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}
.process-step__summary .process-step__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  line-height: var(--lh-snug);
}
.process-accordion .process-step__answer {
  padding-inline-start: calc(44px + var(--sp-3));
  padding-inline-end: var(--sp-3);
  max-width: none;
}

/* v1.49.23 — Tagline / micro-text line at the bottom of each process step.
 * Small italic muted line that sums up the step's promise — visual analogue
 * to the "No SSN · No credit pull / Under 60 seconds" trust microcopy
 * elsewhere on the site. Sits below the supporting paragraphs with a touch
 * of breathing room. */
.process-step__micro {
  margin-block: var(--sp-2) 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  line-height: var(--lh-snug);
}

@media (max-width: 600px) {
  .process-step__icon { width: 38px; height: 38px; }
  .process-step__icon svg { width: 19px; height: 19px; }
  .process-accordion .process-step__answer { padding-inline-start: 0; }
}

/* ============================================================ */
/* v1.42.0 — Amber color unification. Everything amber resolves  */
/* to the single flat --c-accent (#FFC528). Flattened all        */
/* var(--grad-amber) fills + the hardcoded 90deg amber gradients,*/
/* and fixed the trust-card icon stroke (was the deeper hover     */
/* amber #F5A700). This pins the Fluent Forms price range-slider  */
/* fill (plugin-rendered, not theme markup) to the same flat      */
/* amber. Upholds the no-gradients rule + brand color consistency.*/
/* ============================================================ */
.fluentform .rangeslider__fill,
.rangeslider__fill {
  background: var(--c-accent) !important;
  background-image: none !important;
}

/* v1.42.1 — Center the homepage FAQ accordion. City pillars with a right-rail
   sidebar keep the left-aligned .faq-accordion (margin-inline-start:0); this
   only centers it on the front page (.home) where there's no sidebar. */
.home .faq-accordion { margin-inline: auto; }

/* v1.49.1 — Mobile homepage hero must clear the taller 2-row nav header.
   The legacy -93/-72/-56px pull-ups assumed a short 1-row mobile header; the
   Veterans-United 2-row nav makes the header ~120px, so the hero didn't reach
   the top and the page background showed through. --header-h is measured live
   by site.js (exact for any width/header height); the 130px fallback covers
   the 2-row height if JS hasn't run yet. Placed last so it wins the cascade
   over the earlier !important mobile overrides. */
@media (max-width: 1023px) {
  .home .hero-takeover {
    margin-top: calc(-1 * var(--header-h, 130px)) !important;
    padding-top: calc(var(--header-h, 130px) + var(--sp-5, 3rem)) !important;
  }
}

/* v1.49.2 — breathing room above the logo/CTA row on mobile. The compact
   6-8px homepage padding read as "rubbing" the top edge. This top padding
   shows the hero image (transparent header + --header-h auto-pull keeps the
   hero covering the now-taller header), NOT a background gap. Placed last so
   it beats the earlier !important compact-padding overrides. */
@media (max-width: 1023px) {
  .site-header__inner,
  .home .site-header__inner {
    padding-block-start: var(--sp-4) !important;
  }
}

/* v1.49.3 — Mobile nav tap/active state: no amber pill, just recolor the text
   to the CTA amber. The desktop amber-pill hover reads heavy on the two-row
   mobile bar. #site-header ID specificity beats the class-based hover rules. */
@media (max-width: 1023px) {
  #site-header .site-nav__link:hover,
  #site-header .site-nav__link:focus,
  #site-header .site-nav__link:focus-visible,
  #site-header .site-nav__link:active {
    background-color: transparent !important;
    color: var(--c-accent) !important;
  }
}

/* v1.49.4 — Hard flush-alignment for the mobile nav: the second-row links must
   reach the header content edges — first link in line with the logo's left
   edge, last link in line with the Get Started CTA's right edge. Belt-and-
   suspenders against any residual padding/margin on the nav or its links. */
@media (max-width: 1023px) {
  #site-header .site-nav {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    justify-content: space-between !important;
  }
  #site-header .site-nav__item:first-child {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
  }
  #site-header .site-nav__item:last-child {
    margin-inline-end: 0 !important;
    padding-inline-end: 0 !important;
  }
  #site-header .site-nav__link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}