/* ============================================================================
 * Aging In The Comfort Of Home® — Broker Resource Portal
 * Page-specific styles. Loaded AFTER ../../../brand/styles/theme.css so brand
 * primitives are available. All .broker-* classes live here.
 *
 * Sections:
 *   1.  Local variables and palette tokens
 *   2.  Navigation — responsive behavior
 *   3.  Hero — broker-portal layout
 *   4.  Section intros — common widths and rhythm
 *   5.  Broker workflow (4-step horizontal)
 *   6.  Asset categories + manifest tables + status pills
 *   7.  Compliance blocks (FTC + broker conduct)
 *   8.  Support CTA panel + buttons
 *   9.  Footer refinements
 *   10. Accessibility — focus states + reduced motion
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * 1. Local variables
 * ---------------------------------------------------------------------------- */
:root {
  --broker-content-width: 60ch;       /* lead paragraphs and intro copy */
  --broker-body-width: 62ch;          /* longer body / asset descriptions */
  --broker-rules-width: 64ch;         /* the compliance rules ul */
  --broker-script-line-height: 1.6;   /* opening-script body */
  --broker-pitch-line-height: 1.7;    /* elevator-pitch body */
  --broker-rules-line-height: 1.8;    /* compliance rules list */
}

/* Project-level override of the brand's section-soft tints so the broker
 * portal's section rhythm reads more clearly. The brand default has
 * dealerships-division section-soft = Light Linen (cream), which is the
 * same color as the page body, so sections with bg-section-soft visually
 * disappear into the body. Here we promote those sections to clean white
 * panels lifted off the cream body for clearer readability and a calmer
 * vertical rhythm. */
body.division-dealerships {
  --section-soft-bg: #ffffff;
  --section-soft-gradient-top: #ffffff;
  --section-soft-gradient-bottom: rgb(255 252 229 / 0.65);
}


/* ----------------------------------------------------------------------------
 * 2. Navigation — responsive behavior
 *    Pattern follows the audit's recommendation. Desktop = floating pill;
 *    tablet = wrapped layout; mobile = full-width with grid links.
 * ---------------------------------------------------------------------------- */

/* Tablet — links wrap below logo + CTA */
/* Tablet — links sit between logo and CTA on a single row. The pill
 * may grow taller but everything stays on one line. */
@media (max-width: 960px) {
  .nav-floating {
    border-radius: var(--radius-2xl, 1.5rem);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
}

/* Hamburger toggle — hidden on desktop (links are visible inline) and
 * shown only on mobile (where links collapse into a dropdown). */
.nav-floating-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.nav-floating-toggle:hover,
.nav-floating-toggle:focus-visible {
  background-color: rgb(var(--glass-rgb-charcoal) / 0.06);
}

.nav-floating-toggle-bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin: 5px auto;
  background-color: var(--color-charcoal, #333333);
  border-radius: 1px;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease-out;
}

/* When the toggle is open (aria-expanded=true), the three bars fold
 * into an X via translate + rotate. The middle bar fades out. */
.nav-floating-toggle[aria-expanded="true"] .nav-floating-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-floating-toggle[aria-expanded="true"] .nav-floating-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-floating-toggle[aria-expanded="true"] .nav-floating-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile — full-width sticky band; logo + hamburger + Submit a Lead
 * stay on a single line. Nav links collapse into a dropdown panel
 * that opens beneath the bar when the hamburger is toggled. */
@media (max-width: 640px) {
  .nav-floating {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
    align-items: center;
    flex-wrap: nowrap;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  /* Logo shrinks on mobile to leave room for the toggle + CTA on one
   * line. The 64px brand minimum is the desktop standard; mobile drops
   * to 44px to keep the nav compact and tap targets clear. */
  .nav-floating-logo img {
    height: 2.75rem;
  }

  .nav-floating-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* The links dropdown — hidden by default on mobile, revealed by
   * adding .is-open. Positioned as a fixed band below the sticky nav,
   * spanning full width, slides down with a gentle ease. */
  .nav-floating-links {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-2);
    gap: 0;
    background-color: rgb(255 255 255 / 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.10);
    border-top: 1px solid rgb(var(--glass-rgb-charcoal) / 0.06);
    /* Closed state: collapsed + invisible. JS toggles .is-open which
     * reveals the panel via max-height + opacity. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 260ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 200ms ease-out,
      visibility 0s 200ms;
  }
  .nav-floating-links.is-open {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 200ms ease-out,
      visibility 0s 0s;
  }
  .nav-floating-links a {
    display: block;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
    color: var(--color-charcoal, #333333);
    border-bottom: 1px solid rgb(var(--glass-rgb-charcoal) / 0.06);
  }
  .nav-floating-links a:last-child {
    border-bottom: none;
  }
}


/* The brand default for .nav-floating-logo img height is now var(--space-16)
 * (64px), set in ../../../brand/styles/components.css. No page-specific
 * override needed here — the broker portal inherits the brand-wide default. */


/* ----------------------------------------------------------------------------
 * 3. Hero — broker-portal layout
 * Hero card max-width now comes from the brand default in components.css
 * (56rem). No page-specific override needed; the broker portal and the
 * Home Safety Evaluation page now share the same hero card width.
 * ---------------------------------------------------------------------------- */
.broker-hero-bg {
  background-image: linear-gradient(
    135deg,
    rgb(var(--glass-rgb-dealer-green) / 0.94) 0%,
    rgb(var(--glass-rgb-dealer-green) / 0.62) 60%,
    rgb(var(--glass-rgb-charcoal) / 0.32) 100%
  );
  padding-top: 8rem;
}

/* On mobile the nav switches from fixed (no flow space) to sticky (takes
 * its own height in document flow), so the hero no longer needs 8rem of
 * top padding to clear an overlapping fixed nav. Reduce to 3rem so the
 * hero card sits comfortably below the sticky nav without a tall empty
 * gap above it. */
@media (max-width: 640px) {
  .broker-hero-bg {
    padding-top: 3rem;
  }
}

/* Two-column hero layout for the broker portal.
 *
 * Card left, illustrated portrait right. The whole row fits within the
 * .hero-overlay's existing min-height (600px desktop) so the addition of
 * the image does NOT push any hero content below the fold. Card width
 * shrinks from the brand-default 56rem (single-column hero) to ~32rem
 * here so the portrait gets adequate horizontal room without crowding
 * the title or subtitle.
 *
 * Below 900px the image hides and the card returns to a single-column,
 * centered, full-width layout. This keeps the hero compact on tablets
 * and phones, where the additional vertical space the image would
 * consume in a stacked layout would push CTAs below the fold. */
.broker-hero-row {
  position: relative;
  z-index: var(--z-raised, 10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.broker-hero-card {
  /* Override the brand-wide 56rem hero-card max-width so the card and
   * the portrait can sit side-by-side within the row. */
  max-width: 36rem;
  flex: 1 1 auto;
}

.broker-hero-image {
  flex: 0 0 auto;
  width: 22rem;
  max-width: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.broker-hero-photo {
  width: 100%;
  height: auto;
  max-height: 30rem;
  display: block;
  object-fit: contain;
  /* Soft radial mask dissolves the image's white background into the
   * Dealer Green hero gradient. Without this the square white frame
   * around the illustration would visually fight the green hero. */
  -webkit-mask-image:
    radial-gradient(circle at 50% 45%, #000 55%, transparent 88%);
  mask-image:
    radial-gradient(circle at 50% 45%, #000 55%, transparent 88%);
}

@media (max-width: 900px) {
  .broker-hero-row {
    flex-direction: column;
    gap: var(--space-6);
  }
  .broker-hero-card {
    /* Restore full width on narrow viewports where the image is hidden. */
    max-width: 56rem;
  }
  .broker-hero-image {
    /* Hide the image entirely below 900px so hero CTAs stay above the
     * fold on tablets and phones. The card carries the hero on its own
     * at these sizes (same as the single-column hero pattern used
     * elsewhere on the brand). */
    display: none;
  }
}

/* Reusable two-column section + image layout for mid-page sections.
 * Used by the Elevator Pitch and Broker Compliance Rules sections to
 * pair a stand-alone illustration alongside the section's main content
 * block. Image hides on viewports below 900px to keep mid-page content
 * readable on tablets and phones. */
.broker-feature-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}

.broker-feature-row-reverse {
  /* Same layout as .broker-feature-row but flips visual order so the
   * image sits on the LEFT in normal reading direction while the
   * content stays on the right in source order. */
  flex-direction: row-reverse;
}

.broker-feature-content {
  flex: 1 1 auto;
  min-width: 0;
}

.broker-feature-image {
  flex: 0 0 auto;
  width: 18rem;
  max-width: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.broker-feature-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Side-profile portrait: subject's face sits around 40% from the left
 * of the frame. Anchor the radial mask there so the face stays fully
 * opaque while the surrounding white background dissolves. Soft because
 * the surrounding body background is already Light Linen (almost the
 * same value as the image's white background) so we only need to
 * smooth the boundary, not erase it. */
.broker-feature-image-side img {
  max-height: 22rem;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 75% at 45% 50%,
    #000 60%,
    transparent 95%
  );
  mask-image: radial-gradient(
    ellipse 70% 75% at 45% 50%,
    #000 60%,
    transparent 95%
  );
}

/* Standing full-body portrait: taller frame, figure centered. Use a
 * tall vertical ellipse so the subject's silhouette from head to feet
 * stays opaque while the white margins fade. */
.broker-feature-image-standing {
  width: 20rem;
  max-width: 20rem;
}
.broker-feature-image-standing img {
  max-height: 30rem;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 90% at 50% 50%,
    #000 65%,
    transparent 95%
  );
  mask-image: radial-gradient(
    ellipse 55% 90% at 50% 50%,
    #000 65%,
    transparent 95%
  );
}

@media (max-width: 900px) {
  .broker-feature-row,
  .broker-feature-row-reverse {
    flex-direction: column;
    gap: var(--space-6);
  }
  .broker-feature-image,
  .broker-feature-image-standing {
    display: none;
  }
}

/* Top-of-section centered illustration used by the Broker Compliance Rules
 * section. Image sits ABOVE the eyebrow/title/lead, vertically centered as
 * a section header decoration. Stays visible on mobile (unlike the side-by-
 * side .broker-feature-image variants, which hide below 900px) so the
 * Compliance Rules section never looks header-less on phones. */
.broker-rules-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.broker-rules-icon img {
  width: 100%;
  max-width: 24rem;
  height: auto;
  display: block;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 90% at 50% 50%,
    #000 65%,
    transparent 95%
  );
  mask-image: radial-gradient(
    ellipse 55% 90% at 50% 50%,
    #000 65%,
    transparent 95%
  );
}

@media (max-width: 560px) {
  .broker-rules-icon img {
    max-width: 18rem;
  }
}


/* ----------------------------------------------------------------------------
 * 4. Section intros — common widths and rhythm
 * ---------------------------------------------------------------------------- */
.broker-lead {
  max-width: var(--broker-content-width);
}

.broker-body {
  max-width: var(--broker-body-width);
}

.broker-rules-list-width {
  max-width: var(--broker-rules-width);
  line-height: var(--broker-rules-line-height);
}


/* ----------------------------------------------------------------------------
 * 4b. Key Message card icons
 *     Stroke-style SVG inside a soft Dealer-Green rounded-square badge.
 *     Replaces the legacy .placeholder-icon green dot on the Key Messages grid.
 * ---------------------------------------------------------------------------- */
.key-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-lg);
  background-color: rgb(var(--glass-rgb-dealer-green) / 0.16);
  color: var(--color-dealer-green-dark, #154440);
  margin-block-end: var(--space-2);
}

.key-message-icon svg {
  width: 60%;
  height: 60%;
  display: block;
}


/* ----------------------------------------------------------------------------
 * 5. Broker workflow (4-step horizontal)
 * ---------------------------------------------------------------------------- */
.broker-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.broker-steps article {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-2);
}

.broker-steps .step-number {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-radiant-gold, #fdd841);
  color: var(--color-charcoal, #333333);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  margin-bottom: var(--space-3);
}

.broker-steps h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2) 0;
  letter-spacing: var(--tracking-snug);
}

.broker-steps p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgb(var(--glass-rgb-charcoal) / 0.78);
  margin: 0;
}

@media (max-width: 960px) {
  .broker-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .broker-steps {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------------------
 * 6. Asset categories + manifest tables + status pills
 *    (extracted from inline <style> block)
 * ---------------------------------------------------------------------------- */
.asset-manifest {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-block: var(--space-4) var(--space-3);
}

.asset-manifest th,
.asset-manifest td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid rgb(var(--glass-rgb-charcoal) / 0.10);
  vertical-align: middle;
}

.asset-manifest th {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-caption);
  color: rgb(var(--glass-rgb-charcoal) / 0.62);
  border-bottom-width: 2px;
}

.asset-manifest tbody tr:last-child td { border-bottom: none; }
.asset-manifest td.muted { color: rgb(var(--glass-rgb-charcoal) / 0.62); }

/* Asset title cells render the filename as a Dealer-Green download link.
 * Removes default browser blue and matches the brand's body-link treatment. */
.asset-manifest td a {
  color: var(--color-dealer-green, #20605c);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  border-bottom: 1px solid rgb(var(--glass-rgb-dealer-green) / 0.30);
  transition: color var(--motion-fast, 150ms) var(--ease-out, ease-out),
              border-color var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.asset-manifest td a:hover,
.asset-manifest td a:focus-visible {
  color: var(--color-dealer-green-dark, #154440);
  border-color: var(--color-dealer-green-dark, #154440);
}

.asset-category-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
}
.asset-category-head .icon { font-size: 1.75rem; }
.asset-category-head h3 { margin: 0; }

/* Stack the 5 asset category sections vertically with consistent spacing */
.broker-asset-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Make asset-manifest table scrollable on narrow screens */
@media (max-width: 720px) {
  .asset-manifest-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ----------------------------------------------------------------------------
 * 8. Opening script + line-height refinements
 * ---------------------------------------------------------------------------- */
.broker-script-eyebrow {
  color: var(--color-dealer-green-dark, #154440);
}

.broker-script-body {
  line-height: var(--broker-script-line-height);
}

.broker-pitch-body {
  line-height: var(--broker-pitch-line-height);
}

/* Copyable-snippet callout — light Radiant Gold tint applied to the two
 * "copy verbatim" panels in the Lead Registration section (the handoff
 * script and the email signature disclaimer). The double-class selector
 * outranks the brand-default .glass-solid background so the gold tint
 * wins without !important. */
.glass.glass-solid.broker-callout-gold {
  background-color: rgb(var(--glass-rgb-radiant-gold) / 0.14);
  border: 1px solid rgb(var(--glass-rgb-radiant-gold) / 0.38);
}


/* ----------------------------------------------------------------------------
 * 9. Support CTA panel
 *    Solid Dealer Green Dark background with light text and two CTA buttons.
 * ---------------------------------------------------------------------------- */
.broker-support-panel {
  background: var(--color-dealer-green-dark, #154440);
  color: var(--color-light-linen, #fffce5);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-4);
}

.broker-support-panel .eyebrow {
  color: var(--color-light-linen, #fffce5);
}

.broker-support-panel .cta-block-title {
  color: var(--color-light-linen, #fffce5);
}

.broker-support-panel .cta-block-subtitle {
  color: rgb(255 255 255 / 0.86);
  max-width: 56ch;
}

.broker-support-cta-primary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background-color: var(--color-radiant-gold, #fdd841);
  color: var(--color-charcoal, #333333);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  text-decoration: none;
  transition: filter var(--motion-fast) var(--ease-out);
}
.broker-support-cta-primary:hover,
.broker-support-cta-primary:focus-visible {
  filter: brightness(1.06);
}

.broker-support-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.12);
  color: var(--color-light-linen, #fffce5);
  border: 1px solid rgb(255 255 255 / 0.32);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.broker-support-cta-secondary:hover,
.broker-support-cta-secondary:focus-visible {
  background-color: rgb(255 255 255 / 0.20);
}


/* ----------------------------------------------------------------------------
 * 10. Footer refinements
 * ---------------------------------------------------------------------------- */
.broker-footer-logo {
  height: auto;
  max-width: 240px;
}

.broker-footer-disclaimer-margin {
  margin-bottom: 0.5rem;
}

.broker-footer-note {
  color: rgb(255 255 255 / 0.62);
  margin-top: 0.5rem;
}

/* Gold phone link in the footer.
 * Default: Radiant Gold (#fdd841).
 * Hover/focus: a brighter, more luminous gold accent (#ffe87a) with a subtle
 * gold glow text-shadow so the highlight reads clearly against the dark
 * footer background. */
.broker-footer-phone {
  color: var(--color-radiant-gold, #fdd841);
  transition: color var(--motion-fast, 150ms) var(--ease-out, ease-out),
              text-shadow var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.broker-footer-phone:hover,
.broker-footer-phone:focus-visible {
  color: #ffe87a;
  text-shadow: 0 0 8px rgb(253 216 65 / 0.55);
}

/* Nav-floating "Submit a Lead" CTA — project-level override.
 *
 * Brand default (.nav-floating-cta in brand/styles/components.css) is
 * charcoal background + cream text. The broker portal flips that to
 * Radiant Gold background + Charcoal text — gold reads as the brand's
 * top-priority CTA color, and on a Dealer-Green page the gold pill
 * pops more than the dark charcoal default. Hover lifts to a brighter
 * gold while keeping charcoal text for legibility. */
.nav-floating-cta {
  background-color: var(--color-radiant-gold, #fdd841);
  color: #333333;
  /* Subtle attention-pulse so the Submit-a-Lead CTA gently draws the eye
   * without becoming distracting. A soft outward gold halo expands and
   * fades every 2.4 seconds. Pauses on hover (the hover state takes over)
   * and disables entirely for users who prefer reduced motion. */
  animation: submit-lead-pulse 2.4s var(--ease-out, ease-out) infinite;
}
.nav-floating-cta:hover,
.nav-floating-cta:focus-visible {
  background-color: #ffe87a;
  color: #333333;
  box-shadow: 0 0 0 3px rgb(253 216 65 / 0.25);
  animation-play-state: paused;
}

@keyframes submit-lead-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(253 216 65 / 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgb(253 216 65 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-floating-cta { animation: none; }
}


/* ----------------------------------------------------------------------------
 * 10b. Submit-a-Lead modal + form
 *
 *     Full-viewport modal triggered by the nav "Submit a Lead" CTA. Built
 *     to match the broker portal's glass-solid + Dealer Green + Radiant Gold
 *     palette. Submits to a Zapier webhook (configured inline in the page
 *     script), which forwards to Airtable.
 *
 *     Show/hide controlled by aria-hidden attribute toggled in JS.
 * ---------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal[aria-hidden="false"] {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
}

.modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  color: var(--color-charcoal, #333333);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background-color var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.modal-close:hover,
.modal-close:focus-visible {
  background-color: rgb(var(--glass-rgb-charcoal) / 0.08);
}

.modal-title {
  margin: var(--space-2) 0 var(--space-2) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-snug);
}

.modal-subtitle {
  margin: 0 0 var(--space-2) 0;
  color: rgb(var(--glass-rgb-charcoal) / 0.75);
  line-height: var(--leading-relaxed);
}

/* Form layout */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.lead-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lead-form-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-dealer-green-dark, #154440);
}

.lead-form-required {
  color: rgb(var(--glass-rgb-charcoal) / 0.55);
  font-weight: var(--weight-regular, 400);
  text-transform: none;
  letter-spacing: normal;
}

.lead-form-input,
.lead-form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgb(var(--glass-rgb-charcoal) / 0.18);
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.92);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-charcoal, #333333);
  transition:
    border-color var(--motion-fast, 150ms) var(--ease-out, ease-out),
    box-shadow var(--motion-fast, 150ms) var(--ease-out, ease-out);
}

.lead-form-input:focus,
.lead-form-textarea:focus {
  outline: none;
  border-color: var(--color-dealer-green, #20605c);
  box-shadow: 0 0 0 3px rgb(var(--glass-rgb-dealer-green) / 0.20);
}

.lead-form-textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Submit button — matches nav "Submit a Lead" CTA: gold bg + charcoal text */
.lead-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-radiant-gold, #fdd841);
  color: #333333;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  cursor: pointer;
  transition:
    background-color var(--motion-fast, 150ms) var(--ease-out, ease-out),
    box-shadow var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.lead-form-submit:hover,
.lead-form-submit:focus-visible {
  background-color: #ffe87a;
  color: #333333;
  box-shadow: 0 0 0 3px rgb(253 216 65 / 0.25);
}
.lead-form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Inline status (success / error) after submit */
.lead-form-status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.lead-form-status-success {
  background-color: rgb(var(--glass-rgb-dealer-green) / 0.14);
  color: var(--color-dealer-green-dark, #154440);
}
.lead-form-status-error {
  background-color: rgb(220 38 38 / 0.10);
  color: #991b1b;
}

/* Thank-you panel shown in place of the form after a successful submit.
 * Holds a confirmation icon, a warm thank-you heading, a one-paragraph
 * message, and a "Submit Another Lead" button that resets the form. */
.lead-form-thanks {
  text-align: center;
  padding: var(--space-6) 0 var(--space-2) 0;
  animation: lead-form-thanks-rise var(--motion-base, 250ms) var(--ease-out, ease-out);
}

@keyframes lead-form-thanks-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lead-form-thanks-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-4) auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--glass-rgb-dealer-green) / 0.18);
  color: var(--color-dealer-green-dark, #154440);
}
.lead-form-thanks-icon svg {
  width: 55%;
  height: 55%;
  display: block;
}

.lead-form-thanks-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-snug);
  color: var(--color-dealer-green-dark, #154440);
  margin: 0 0 var(--space-3) 0;
}

.lead-form-thanks-message {
  margin: 0 auto var(--space-6) auto;
  max-width: 38ch;
  color: rgb(var(--glass-rgb-charcoal) / 0.82);
  line-height: var(--leading-relaxed);
}

@media (max-width: 560px) {
  .modal-panel {
    padding: var(--space-6);
  }
  .modal-title {
    font-size: var(--text-2xl);
  }
  /* Bump the close-X to a 44px tap target on phones (Apple HIG minimum)
   * so the broker can reliably dismiss the modal with a thumb. */
  .modal-close {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.625rem;
  }
}


/* ----------------------------------------------------------------------------
 * 10c. Mobile polish pass
 *      Consolidated tweaks for narrow viewports across nav-adjacent areas,
 *      hero card density, support-panel CTA orientation, and asset-table
 *      horizontal scroll. Each block carries a comment explaining intent
 *      so future audits know why a rule exists.
 * ---------------------------------------------------------------------------- */

/* Hero card density on small phones. The default hero-overlay-card padding
 * is var(--space-10) var(--space-8) = ~40px x 32px which crowds a 360px
 * viewport once the glass-solid card's border + the section's outer padding
 * are subtracted. Tighten to var(--space-8) x var(--space-5) (~32px x 20px)
 * on phones so the title and subtitle have more readable line lengths. */
@media (max-width: 560px) {
  .hero-overlay-card {
    padding: var(--space-8) var(--space-5);
  }
  .hero-overlay-title {
    font-size: var(--text-3xl);
  }
}

/* Request-an-Asset panel CTAs. The brand default uses inline-flex + wrap,
 * which on a 360px viewport produces two narrow buttons on one row and an
 * uneven third-row state if labels grow. Stack vertically, full-width,
 * so each CTA is a clear thumb-friendly tap target on phones. */
@media (max-width: 560px) {
  .broker-support-panel .cta-block-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }
  .broker-support-cta-primary,
  .broker-support-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Asset-manifest tables: enable horizontal scroll inside the wrapper div
 * (added to the HTML in this audit pass) and keep cell content on a
 * single line so the scroll is meaningful instead of cells stacking
 * vertically. The existing @media (max-width: 720px) rule above sets
 * overflow-x: auto on .asset-manifest-wrap; this complements it. */
@media (max-width: 720px) {
  .asset-manifest-wrap {
    margin-block: var(--space-3);
  }
  .asset-manifest {
    min-width: 32rem;
  }
  .asset-manifest th,
  .asset-manifest td {
    white-space: nowrap;
  }
  /* Asset filename cells (which carry the only long content in each row)
   * are allowed to wrap so the column doesn't blow the table out wider
   * than necessary. */
  .asset-manifest td:first-child {
    white-space: normal;
    min-width: 11rem;
  }
}


/* ----------------------------------------------------------------------------
 * 11. Accessibility — focus states
 *     Audit-recommended visible focus styling.
 * ---------------------------------------------------------------------------- */
:where(a, button, summary, details):focus-visible {
  outline: 3px solid var(--color-radiant-gold, #fdd841);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 0.5rem);
}

/* The skip-link should override outline placement for clarity */
.skip-link:focus-visible {
  outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
 * 11b. Portal access gate
 *
 * Full-viewport client-side password lock shown until the broker enters
 * the unlock password. Once unlocked, the flag persists in localStorage
 * so the gate stays dismissed on subsequent visits from the same device.
 *
 * Pre-render check in <head> sets html.portal-unlocked when the flag is
 * already present, so authorized returning visitors never see the gate
 * flash. Default state (no class) shows the gate.
 *
 * NOT real security — the password is embedded in the JS source and any
 * sufficiently motivated visitor can bypass via DevTools. Intended for
 * casual gatekeeping of a private broker resource only.
 * ---------------------------------------------------------------------------- */
.portal-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* Page scroll lock while the gate is up */
html:not(.portal-unlocked) body {
  overflow: hidden;
}

/* Once unlocked (flag in localStorage), the gate is removed from view
 * before paint. The body scroll is restored. */
html.portal-unlocked .portal-gate {
  display: none;
}

.portal-gate-backdrop {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    rgb(var(--glass-rgb-dealer-green) / 0.95) 0%,
    rgb(var(--glass-rgb-dealer-green) / 0.70) 55%,
    rgb(var(--glass-rgb-charcoal) / 0.40) 100%
  );
}

.portal-gate-panel {
  position: relative;
  width: 100%;
  max-width: 28rem;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-2xl);
  text-align: center;
}

.portal-gate-logo {
  display: block;
  width: auto;
  height: 3.5rem;
  max-width: 80%;
  margin: 0 auto var(--space-6) auto;
}

.portal-gate-eyebrow {
  margin: 0 0 var(--space-2) 0;
}

.portal-gate-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-3) 0;
  color: var(--color-charcoal, #333333);
}

.portal-gate-subtitle {
  margin: 0 auto var(--space-6) auto;
  max-width: 36ch;
  color: rgb(var(--glass-rgb-charcoal) / 0.75);
  line-height: var(--leading-relaxed);
  font-size: var(--text-md);
}

.portal-gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.portal-gate-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-dealer-green-dark, #154440);
}

.portal-gate-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgb(var(--glass-rgb-charcoal) / 0.18);
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.95);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-charcoal, #333333);
  transition:
    border-color var(--motion-fast, 150ms) var(--ease-out, ease-out),
    box-shadow var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.portal-gate-input:focus {
  outline: none;
  border-color: var(--color-dealer-green, #20605c);
  box-shadow:
    0 0 0 1px var(--color-dealer-green, #20605c),
    0 0 0 5px rgb(var(--glass-rgb-dealer-green) / 0.16);
}

.portal-gate-submit {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-radiant-gold, #fdd841);
  color: #333333;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  cursor: pointer;
  transition:
    background-color var(--motion-fast, 150ms) var(--ease-out, ease-out),
    box-shadow var(--motion-fast, 150ms) var(--ease-out, ease-out),
    transform 80ms ease-out;
}
.portal-gate-submit:hover,
.portal-gate-submit:focus-visible {
  background-color: #ffe87a;
  box-shadow: 0 0 0 3px rgb(253 216 65 / 0.25);
}
.portal-gate-submit:active {
  transform: scale(0.97);
}

.portal-gate-error {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: rgb(220 38 38 / 0.10);
  color: #991b1b;
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 560px) {
  .portal-gate-panel {
    padding: var(--space-8) var(--space-6);
  }
  .portal-gate-title {
    font-size: var(--text-2xl);
  }
}


/* ----------------------------------------------------------------------------
 * 12. Aesthetic polish pass
 *
 * Subtle flourishes that lift the page from "functional and on-brand" to
 * "world-class." Each rule is intentionally restrained so the page reads
 * as serious and credible rather than over-designed. All motion respects
 * prefers-reduced-motion (see block at the end of this section).
 *
 * What's in here:
 *   - Hover lifts on truly clickable cards (feature cards, FAQ items,
 *     asset-library cards). Static content panels (hero card, modal,
 *     nav) intentionally left alone.
 *   - Smoother cubic-bezier easing for transform/shadow transitions.
 *     Brand default motion is fine; this gives the key interactive
 *     surfaces a slightly more premium glide.
 *   - Multi-layered form input focus ring for a soft, polished feel.
 *   - Modal entrance animation (backdrop fade + panel rise-and-scale).
 *   - Tactile press-down on primary action buttons.
 *   - Drop shadow on the standing-broker portrait for depth against the
 *     cream body.
 *   - Animated underline on asset-manifest download links for a
 *     refined hover state.
 * ---------------------------------------------------------------------------- */

/* Common premium easing curve. Brand var(--ease-out) maps to ease-out;
 * this one is slightly more sophisticated (decelerates toward the end). */
.feature-card,
.broker-asset-stack > article,
.faq-item {
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease-out;
}

/* Feature cards (Broker Rules, Lead Registration, Key Messages) and
 * asset-library category cards: lift on hover with a softer shadow that
 * blends a neutral charcoal layer with a hint of Dealer Green so the
 * shadow feels brand-tinted rather than generic gray. */
.feature-card:hover,
.broker-asset-stack > article:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgb(var(--glass-rgb-charcoal) / 0.08),
    0 4px 12px rgb(var(--glass-rgb-dealer-green) / 0.06);
}

/* FAQ + Opening Script accordion items: subtle lift only when closed,
 * so the hover signals "click to expand." Open items get a calmer
 * resting shadow so they feel anchored. */
.faq-item:not([open]):hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgb(var(--glass-rgb-charcoal) / 0.06);
}
.faq-item[open] {
  box-shadow:
    0 8px 24px rgb(var(--glass-rgb-charcoal) / 0.06);
}

/* Form input focus ring: replace the single-color outline with a
 * two-layer ring (sharp inner border + soft outer glow) for a more
 * polished, depth-aware focus state. Inherits from the existing brand
 * Dealer Green focus color so it stays on-palette. */
.lead-form-input:focus,
.lead-form-textarea:focus {
  outline: none;
  border-color: var(--color-dealer-green, #20605c);
  box-shadow:
    0 0 0 1px var(--color-dealer-green, #20605c),
    0 0 0 5px rgb(var(--glass-rgb-dealer-green) / 0.16);
}

/* Modal entrance: backdrop fades in while the panel rises 8px and
 * scales up from 98% to 100%. Reads as the panel arriving in space,
 * not snapping into place. Uses the same cubic-bezier as card lifts
 * for visual continuity. */
.modal[aria-hidden="false"] .modal-backdrop {
  animation: modal-backdrop-enter 260ms ease-out;
}

.modal[aria-hidden="false"] .modal-panel {
  animation: modal-panel-enter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-backdrop-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Tactile press-down on primary action buttons. Adds a subtle 3% scale
 * compression on :active so the click feels acknowledged. Short
 * duration (80ms) so the spring-back is snappy. */
.nav-floating-cta:active,
.lead-form-submit:active,
.broker-support-cta-primary:active,
.broker-support-cta-secondary:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Standing-broker portrait depth: subtle drop shadow grounds the
 * masked silhouette against the cream body so the figure feels like
 * it's standing in front of the section rather than on top of it. */
.broker-rules-icon img {
  filter: drop-shadow(0 14px 28px rgb(var(--glass-rgb-charcoal) / 0.10));
}

/* Asset-manifest download links: animated underline grow on hover.
 * Replaces the static border-bottom with a left-anchored scale-x grow
 * so the underline animates into existence rather than just changing
 * color. More refined than a binary state change. */
.asset-manifest td a {
  position: relative;
  border-bottom: none;
}
.asset-manifest td a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0.55);
  transform-origin: left center;
  opacity: 0.45;
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease-out;
}
.asset-manifest td a:hover::after,
.asset-manifest td a:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .broker-asset-stack > article,
  .faq-item,
  .faq-item:not([open]):hover,
  .feature-card:hover,
  .broker-asset-stack > article:hover {
    transform: none;
    transition: none;
  }
  .modal[aria-hidden="false"] .modal-backdrop,
  .modal[aria-hidden="false"] .modal-panel {
    animation: none;
  }
  .nav-floating-cta:active,
  .lead-form-submit:active,
  .broker-support-cta-primary:active,
  .broker-support-cta-secondary:active {
    transform: none;
  }
  .asset-manifest td a::after {
    transition: none;
    transform: scaleX(1);
  }
}