/* =================================================================
   Crash2Claim — /apply Recruitment Page Styles
   -----------------------------------------------------------------
   Deliberately a SEPARATE stylesheet from css/styles.css so the
   recruitment page can never accidentally affect the production
   case-evaluation site. Shares the same design tokens (colors,
   font stack, radii) so it still looks like the same brand, but
   every rule here is scoped to recruitment-page classes only.

   This revision restructures the LANDING sections (header, hero,
   how-it-works, eligibility/payment, the new stories section, the
   new final CTA, and the footer) into full-bleed
   ".apply-section" blocks with alternating backgrounds, each
   holding a centered ".apply-container" of content — so the page
   uses the full viewport width on large screens instead of a single
   narrow column floating in empty space. The entire "Application
   mode" block below (the focused Q&A flow rendered into #applyRoot
   once "Start Your Application" is clicked) is UNCHANGED from the
   prior revision: same selectors, same values, same behavior.
   ================================================================= */

:root {
  --navy: #0f2540;
  --navy-2: #16324f;
  --coral: #ff5a36;
  --coral-dark: #e04321;
  --teal: #0ea5a4;
  --teal-tint: #eafbfa;
  --gray-50: #f7f9fc;
  --gray-100: #eef1f6;
  --gray-200: #dfe4ec;
  --gray-400: #98a2b3;
  --gray-600: #5b6472;
  --white: #ffffff;
  --lblue: #eaf4fb;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 12px 32px rgba(15, 37, 64, 0.1);
  --max-width: 560px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Landing-page section container widths. Kept distinct from
     --max-width (560px, used only by the application Q&A card so
     that flow stays untouched) and from --max-width-desktop (below,
     retained for the info-grid).

     --container bumped from 1200px to 1260px (desktop-refinement
     round) so the page uses more of the viewport at 1280px+ instead
     of reading like a narrow mobile column centered in a lot of
     empty space. Still within the requested 1200-1320px range; the
     1440px+ tier below caps at 1320px for the same reason. This only
     affects widths at the 1024px+ media queries further down this
     file — nothing here changes mobile/tablet layout. */
  --container: 1260px;
  --container-narrow: 720px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.apply-page {
  font-family: var(--font);
  background: var(--white);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.apply-page img,
.apply-page svg {
  display: block;
  max-width: 100%;
}

.apply-page button {
  font-family: inherit;
}

/* ---------------------------------------------------------------
   Test-mode banner
   --------------------------------------------------------------- */
.apply-test-banner {
  background: var(--coral);
  color: var(--white);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ---------------------------------------------------------------
   Shell + section/container layout utilities
   -----------------------------------------------------------------
   .apply-shell is now a plain full-width block (the flex/centering
   that used to live here has moved into .apply-container). Each
   landing section is a full-bleed .apply-section with its own
   background, alternating white / light-blue / navy so the page
   reads as distinct chapters rather than one long undifferentiated
   column, per the requested visual hierarchy.
   --------------------------------------------------------------- */
.apply-shell {
  width: 100%;
  display: block;
}

.apply-section {
  width: 100%;
  padding: 40px 0;
}

.apply-header-section {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding: 18px 0;
}

.apply-hero-section {
  background: var(--lblue);
  padding: 36px 0 44px;
}

.apply-steps-section {
  background: var(--white);
}

.apply-info-section {
  background: var(--gray-50);
}

.apply-stories-section {
  background: var(--white);
}

.apply-final-cta-section {
  background: var(--navy);
  color: var(--white);
}

.apply-footer-section {
  background: var(--navy-2);
  color: var(--white);
  padding: 32px 0 28px;
}

.apply-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Shared section heading treatment — used above How It Works and
   Real Crash2Claim Stories. */
.apply-section-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  text-align: center;
  margin: 0 0 8px;
}

.apply-section-heading {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  margin: 0 0 8px;
}

.apply-section-subheading {
  font-size: 15px;
  color: var(--gray-600);
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.apply-header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.apply-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-decoration: none;
}

.apply-wordmark .apply-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  margin: 0 1px;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.apply-hero {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
  padding: 8px 0 0;
}

.apply-hero-eyebrow {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0 0 4px;
}

/* Simple, clean, straight underline accent under "PAID" only (the
   "Get" word is unaffected) — a plain native text-decoration, no
   curve/wave/SVG/pseudo-element. Thickness and vertical offset are
   set in em units relative to the span's own font-size (inherited
   from .apply-hero-eyebrow, including the desktop bumps below), so
   the line scales and repositions automatically with the headline
   at every breakpoint. Does not affect PAID's own font, weight,
   size, or color in any way. */
.apply-hero-paid {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

/* Not rendered anywhere in the current markup (the $50 figure lives
   only in the fine-print disclaimer below) — kept defined, unused,
   so a stray future reference to it doesn't fall back to browser
   defaults, and so its historical mobile/desktop sizing (33px/36px)
   stays intact for regression tracking. */
.apply-hero-dollar {
  font-size: 33px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 10px;
}

.apply-hero-headline {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
}

.apply-hero-sub {
  font-size: 15px;
  color: var(--gray-600);
  margin: 0 0 12px;
}

.apply-hero-disclaimer {
  /* gray-600 (not gray-400) against the hero's light-blue background —
     gray-400 reads at roughly 2:1 contrast here, below the ~4.5:1
     needed for 12px text, which made this hard to read on the hero. */
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-600);
  margin: 10px auto 0;
  max-width: 440px;
}

.apply-hero-cta {
  margin: 18px auto 0;
  max-width: 340px;
}

/* ---------------------------------------------------------------
   How it works strip
   --------------------------------------------------------------- */
.apply-steps-track {
  width: 100%;
  max-width: var(--container);
  margin: 24px auto 0;
  position: relative;
}

.apply-steps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.apply-step-chip {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.apply-step-chip .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.apply-step-chip .label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy-2);
  line-height: 1.3;
}

/* ---------------------------------------------------------------
   Info sections (eligibility / payment)
   --------------------------------------------------------------- */
.apply-info-grid {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.apply-info-card {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 24px 24px;
}

.apply-info-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 8px;
}

.apply-info-card h2 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 14px;
}

.apply-info-card ol,
.apply-info-card ul {
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy-2);
  list-style: none;
}

.apply-check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.apply-check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.apply-info-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------
   Real Crash2Claim Stories — editorial story cards, not
   testimonials: no fabricated quote attribution beyond the generic,
   non-specific blurb text supplied via APPLY_CONFIG.REAL_STORIES.
   The "Paid Participant" badge and "Watch Story" link only render
   when apply.html's population script finds that data present.
   --------------------------------------------------------------- */
.apply-stories-grid {
  /* Single-testimonial layout: one centered card rather than a
     multi-column grid, so it doesn't sit alone in an empty 3-column
     row. If more stories are added to REAL_STORIES later, widen this
     back out to a multi-column grid at the tablet/desktop
     breakpoints below. */
  width: 100%;
  max-width: 460px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.apply-story-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.apply-story-media {
  width: 100%;
  /* 16:9 reads as a video-thumbnail rather than a profile photo, which
     is the editorial feel requested for this section (Taylor and
     Auriel's images are video stills; Max's is a photo, but all three
     share this same frame so the three cards look intentionally
     consistent regardless of source). */
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
}

.apply-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Max's photo is already cropped to this exact 16:9 frame
     (images/interviews/max-story.jpg is 800x450), so object-fit:cover
     doesn't need to crop it further — this object-position is just a
     safe default in case a future story image isn't pre-cropped to
     16:9. */
  object-position: center 25%;
}

.apply-story-body {
  padding: 18px 18px 20px;
}

.apply-story-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--coral-dark);
  margin: 0 0 8px;
}

.apply-story-blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--navy-2);
  margin: 0 0 12px;
  font-style: italic;
}

.apply-story-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  margin: 0 0 8px;
}

.apply-story-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-tint);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  margin: 0 8px 0 0;
}

.apply-story-watch {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--coral-dark);
  text-decoration: none;
}

.apply-story-watch:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Final full-width CTA — closes the page before the footer with a
   navy band, echoing the hero's CTA so the funnel has one clear
   last invitation to apply.
   --------------------------------------------------------------- */
.apply-final-cta {
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
}

.apply-final-cta h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.apply-final-cta p {
  font-size: 15px;
  line-height: 1.6;
  color: #cdd9e6;
  margin: 0 auto 24px;
  max-width: 480px;
}

.apply-btn-lg {
  max-width: 340px;
  margin: 0 auto;
}

.apply-final-cta-disclaimer {
  font-size: 12px;
  color: #93a4b8;
  margin: 14px 0 0;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.apply-footer {
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
}

.apply-footer-wordmark {
  color: var(--white);
  margin-bottom: 16px;
  justify-content: center;
  display: inline-flex;
}

.apply-footer-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}

.apply-footer-links a {
  font-size: 12px;
  color: #cdd9e6;
  text-decoration: none;
}

.apply-footer-links a:hover {
  text-decoration: underline;
}

.apply-footer-disclaimer {
  font-size: 11px;
  line-height: 1.6;
  color: #8ea0b6;
  padding: 0 8px;
}

/* ---------------------------------------------------------------
   Tablet (≥640px) — landing-page type/spacing bump.
   --------------------------------------------------------------- */
@media (min-width: 640px) {
  .apply-hero-eyebrow {
    font-size: 46px;
  }
  .apply-hero-headline {
    font-size: 30px;
  }
  .apply-hero-sub {
    font-size: 16px;
  }
  .apply-hero-dollar {
    font-size: 36px;
  }
  .apply-card,
  .apply-info-card {
    padding: 34px 34px 28px;
  }
  .apply-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------
   Tablet (≥700px) — single story card, sized up slightly from the
   mobile width now that there's room, still centered rather than
   stretched full-width.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .apply-stories-grid {
    max-width: 520px;
  }
  .apply-story-body {
    padding: 16px 16px 18px;
  }
  .apply-story-blurb {
    font-size: 13.5px;
  }
}

/* ---------------------------------------------------------------
   Tablet (≥768px) — eligibility/payment go two-up at a narrower,
   tablet-appropriate width so 768px doesn't feel like an in-between
   size stuck on the mobile single-column stack until 1024px.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  .apply-info-grid {
    max-width: 700px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }
  .apply-info-grid .apply-info-card {
    display: flex;
    flex-direction: column;
  }
}

/* =================================================================
   APPLICATION MODE — the focused Q&A flow shown once "Start Your
   Application" is clicked. UNCHANGED from the prior revision:
   selectors, values, and behavior are byte-for-byte the same as
   before this landing-page redesign. Nothing in this block was
   touched so the application flow, its styling, and its logic are
   fully preserved.
   ================================================================= */
body.app-mode .apply-landing-only {
  display: none !important;
}

body.app-mode #applyRoot {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-top: 4px;
}

#applyRoot .apply-card {
  max-width: 480px;
  margin: 4px auto 0;
}

.apply-card {
  width: 100%;
  max-width: var(--max-width);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 20px 24px;
  margin-top: 4px;
}

.apply-progress {
  width: 100%;
  max-width: var(--max-width);
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  display: flex;
  justify-content: space-between;
}

.apply-app-header {
  width: 100%;
  max-width: 480px;
  margin: 14px auto 12px;
}

.apply-app-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-align: center;
  margin: 0 0 14px;
}

.apply-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.apply-progress-track {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: 999px;
  overflow: hidden;
}

.apply-progress-fill {
  height: 8px;
  background: var(--coral);
  border-radius: 999px;
  transition: width 0.3s ease;
}

@media (min-width: 640px) {
  #applyRoot .apply-card {
    padding: 40px 40px 32px;
  }
}

.apply-question {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--navy);
  margin: 4px 0 16px;
  text-align: center;
}

.apply-field-group {
  margin-bottom: 16px;
}

.apply-field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-2);
  margin-bottom: 6px;
}

.apply-page input[type="text"],
.apply-page input[type="tel"],
.apply-page input[type="email"],
.apply-page input[type="date"],
.apply-page textarea,
.apply-page select {
  width: 100%;
  font-size: 16px;
  padding: 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  min-height: 52px;
  font-family: var(--font);
}

.apply-page textarea {
  min-height: 110px;
  resize: vertical;
}

.apply-page input:focus,
.apply-page select:focus,
.apply-page textarea:focus {
  outline: none;
  border-color: var(--teal);
}

/* DOB question — a single custom MM/DD/YYYY text field (id q2Input)
   replacing the browser's native <input type="date"> (no calendar
   icon/picker). It's still type="text", so it already inherits the
   shared border/background/color/min-height/font-family from the
   .apply-page input[type="text"] rule above (same 52px tap target as
   every other field in the funnel) — the rules below just give it a
   reasonable, centered width instead of stretching full-width like a
   name or address field, and center/space the digits so the format
   reads clearly at a glance. Scoped to this one input only — no other
   question is affected. */
.apply-dob-input {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.apply-dob-input::placeholder {
  color: var(--gray-400);
  font-weight: 600;
  letter-spacing: 1px;
}

.apply-char-count {
  font-size: 12px;
  color: var(--gray-400);
  text-align: right;
  margin-top: 4px;
}

.apply-error-text {
  color: #d92d20;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  min-height: 16px;
}

.apply-answer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 4px;
}

.apply-answer-btn {
  width: 100%;
  text-align: center;
  background: var(--teal-tint);
  border: 2px solid #b9e8e6;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  min-height: 56px;
}

.apply-answer-btn.selected {
  border-color: var(--coral-dark);
  background: var(--coral);
  color: #fff;
}

/* ---------------------------------------------------------------
   Opening "$50 use" question (icon card grid) and HOT LEAD
   injuries multi-select (checkbox cards). Reuses the same
   pale-aqua/coral design tokens as .apply-answer-btn above so it
   stays visually consistent with the existing design system.
   --------------------------------------------------------------- */
.apply-subtext {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  text-align: center;
  margin: -10px 0 16px;
}

.apply-icon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 4px 0 4px;
}

@media (min-width: 420px) {
  .apply-icon-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.apply-icon-answer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: var(--teal-tint);
  border: 2px solid #b9e8e6;
  border-radius: var(--radius-md);
  padding: 20px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  min-height: 104px;
}

.apply-icon-answer-btn svg {
  width: 28px;
  height: 28px;
  color: var(--navy);
}

.apply-icon-answer-btn.selected {
  border-color: var(--coral-dark);
  background: var(--coral);
  color: #fff;
}

.apply-icon-answer-btn.selected svg {
  color: #fff;
}

.apply-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 4px;
}

.apply-checkbox-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--teal-tint);
  border: 2px solid #b9e8e6;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  min-height: 56px;
}

.apply-checkbox-card.selected {
  border-color: var(--coral-dark);
  background: #fff0ec;
}

.apply-checkbox-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: var(--coral);
  cursor: pointer;
}

.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 700;
  padding: 16px 20px;
  cursor: pointer;
  min-height: 56px;
}

.apply-btn-primary {
  background: var(--coral);
  color: var(--white);
}

.apply-btn-primary:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
}

.apply-btn-back {
  background: transparent;
  color: var(--gray-600);
  width: auto;
  min-height: auto;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
}

.apply-step-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Attorney-interest question only — plain footer-style fine print,
   pushed well below the Back button toward the bottom of the card. */
.apply-attorney-disclosure {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-400);
  text-align: left;
  margin: 56px 0 0;
}

.apply-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 18px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}

.apply-consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
}

.apply-consent-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-600);
}

.apply-thankyou-title {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin: 4px 0 12px;
}

.apply-thankyou-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
  text-align: center;
  margin: 0 0 14px;
}

.apply-thankyou-note {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  line-height: 1.6;
}

/* =================================================================
   END application-mode block.
   ================================================================= */

/* ---------------------------------------------------------------
   Desktop responsive optimization (~1024px+).
   --------------------------------------------------------------- */
:root {
  --max-width-desktop: 1150px;
}

@media (min-width: 1024px) {
  .apply-section {
    padding: 64px 0;
  }
  .apply-header-section {
    padding: 22px 0;
  }
  /* Logo reads a little small once the header bar spans a full wide
     desktop viewport with lots of side whitespace — same wordmark,
     just scaled up slightly to match the rest of the page's new
     proportions. */
  .apply-wordmark {
    font-size: 28px;
  }
  .apply-wordmark .apply-badge {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }
  /* Desktop-refinement round: hero padding cut ~28% top / ~29% bottom
     (was 72px/84px) so the hero no longer eats most of the first
     viewport on large screens. Font sizes below (eyebrow/headline/
     sub/disclaimer) are UNCHANGED on purpose — only padding and the
     gaps between elements were tightened, so the headline is never
     shrunk and the existing visual hierarchy is preserved. This block
     only applies at 1024px+, so mobile/tablet spacing is untouched. */
  .apply-hero-section {
    padding: 52px 0 60px;
  }

  .apply-hero {
    /* 860px -> 850px: brings this in line with the requested
       700-850px "narrow reading content" range (negligible visual
       change at this size). */
    max-width: 850px;
  }
  .apply-hero-eyebrow {
    font-size: 60px;
  }
  .apply-hero-headline {
    font-size: 42px;
    margin: 0 0 10px;
  }
  .apply-hero-sub {
    font-size: 19px;
    margin: 0 0 12px;
  }
  .apply-hero-disclaimer {
    max-width: 560px;
    font-size: 13px;
  }
  .apply-hero-cta {
    max-width: 360px;
    margin-top: 16px;
  }

  .apply-section-heading {
    font-size: 32px;
  }
  .apply-section-subheading {
    font-size: 16px;
  }

  /* How It Works — connecting flow line behind the four chips. */
  .apply-steps-track::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
  }

  .apply-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
  }

  .apply-step-chip {
    padding: 28px 22px;
  }

  .apply-step-chip .num {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin-bottom: 12px;
  }

  .apply-step-chip .label {
    font-size: 14px;
  }

  /* Eligibility + Payment — equal-height, two-column, more balanced
     padding than the narrow mobile stack. */
  .apply-info-grid {
    max-width: var(--max-width-desktop);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
  }

  .apply-info-grid .apply-info-card {
    width: 100%;
    padding: 44px 40px 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .apply-info-grid .apply-info-card h2 {
    font-size: 20px;
  }

  /* Real Crash2Claim Stories — single card, sized up a bit more for
     desktop, still centered (not stretched full-width). */
  .apply-stories-grid {
    max-width: 620px;
  }

  .apply-story-body {
    padding: 22px 22px 24px;
  }

  /* Final CTA — widened from --container-narrow (720px) so the
     uppercase 36px heading has room to sit on one line at desktop
     instead of wrapping awkwardly after 2-3 words. */
  .apply-final-cta {
    max-width: 880px;
  }
  .apply-final-cta h2 {
    font-size: 36px;
  }
  .apply-final-cta p {
    font-size: 17px;
    max-width: 560px;
  }
  .apply-btn-lg {
    max-width: 380px;
  }

  .apply-footer {
    max-width: var(--max-width-desktop);
  }
}

@media (min-width: 1440px) {
  .apply-container {
    /* Capped at 1320px (was 1360px) to stay within the requested
       1200-1320px desktop container range. */
    max-width: 1320px;
  }
  .apply-hero-eyebrow {
    font-size: 66px;
  }
  .apply-hero-headline {
    font-size: 46px;
  }
}