/* RideClaim global navigation, theme system and form polish */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #171514;
  --color-surface: #24211f;
  --color-text: #f5f1ed;
  --color-divider: color-mix(in srgb, #f5f1ed 28%, transparent);
  --color-neutral-100: #262321;
  --color-neutral-200: #312d2b;
  --color-neutral-300: #443f3b;
  --color-neutral-400: #5f5954;
  --color-neutral-500: #827a74;
  --color-neutral-600: #a39b95;
  --color-neutral-700: #c0b9b3;
  --color-neutral-800: #ded8d4;
  --color-neutral-900: #f3efec;
  --color-accent-100: #381b16;
  --color-accent-200: #542219;
  --color-accent-300: #7b2b1c;
  --color-accent-400: #ff9b86;
  --color-accent-500: #ff6a4b;
  --color-accent-600: #ff4c2c;
  --color-accent-700: #ff8d76;
  --color-accent-800: #ffb4a3;
  --color-accent-900: #ffd9d0;
  --color-accent-2-100: #3b211c;
  --color-accent-2-200: #582a22;
  --color-accent-2-300: #7a392d;
  --color-accent-2-400: #ff9f8e;
  --color-accent-2-500: #f47b66;
  --color-accent-2-600: #e7654e;
  --color-accent-2-700: #ff9f8e;
  --color-accent-2-800: #ffc0b4;
  --color-accent-2-900: #ffe0da;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 5px 18px rgba(0,0,0,.34);
  --shadow-lg: 0 18px 46px rgba(0,0,0,.42);

}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

  --color-bg: #171514;
  --color-surface: #24211f;
  --color-text: #f5f1ed;
  --color-divider: color-mix(in srgb, #f5f1ed 28%, transparent);
  --color-neutral-100: #262321;
  --color-neutral-200: #312d2b;
  --color-neutral-300: #443f3b;
  --color-neutral-400: #5f5954;
  --color-neutral-500: #827a74;
  --color-neutral-600: #a39b95;
  --color-neutral-700: #c0b9b3;
  --color-neutral-800: #ded8d4;
  --color-neutral-900: #f3efec;
  --color-accent-100: #381b16;
  --color-accent-200: #542219;
  --color-accent-300: #7b2b1c;
  --color-accent-400: #ff9b86;
  --color-accent-500: #ff6a4b;
  --color-accent-600: #ff4c2c;
  --color-accent-700: #ff8d76;
  --color-accent-800: #ffb4a3;
  --color-accent-900: #ffd9d0;
  --color-accent-2-100: #3b211c;
  --color-accent-2-200: #582a22;
  --color-accent-2-300: #7a392d;
  --color-accent-2-400: #ff9f8e;
  --color-accent-2-500: #f47b66;
  --color-accent-2-600: #e7654e;
  --color-accent-2-700: #ff9f8e;
  --color-accent-2-800: #ffc0b4;
  --color-accent-2-900: #ffe0da;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 5px 18px rgba(0,0,0,.34);
  --shadow-lg: 0 18px 46px rgba(0,0,0,.42);

  }
}

html { background: var(--color-bg); }
body {
  background: var(--color-bg) !important;
  color: var(--color-text);
  transition: background-color .22s ease, color .22s ease;
}

/* Some early page variants carried the light canvas as an inline literal. */
[style*="background:#f3f2f2"], [style*="background: #f3f2f2"] { background: var(--color-bg) !important; }

.nav.site-nav {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: clamp(10px, 1.6vw, 22px) !important;
  padding: 11px clamp(14px, 4vw, 48px) !important;
  min-height: 56px;
  border-bottom: 1px solid var(--color-divider) !important;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.nav.site-nav .nav-brand {
  margin-right: auto;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-text) !important;
  font-size: 18px !important;
  white-space: nowrap;
  text-decoration: none;
}
.nav.site-nav > a:not(.nav-brand) {
  flex: 0 0 auto;
  color: var(--color-text) !important;
  font-size: 13px;
  white-space: nowrap;
}
.nav.site-nav > a:not(.nav-brand):hover,
.nav.site-nav > a:not(.nav-brand)[aria-current="page"] { color: var(--color-accent) !important; }

.theme-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  color: var(--color-text);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* State pages deliberately keep the sticky header in the brand accent once
   the state zoom hands off to the article. This prevents a white-on-white
   header and makes the header read as the persistent site chrome. */
body.state-page .nav.site-nav {
  background: var(--color-accent) !important;
  color: #fff;
  border-bottom-color: rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.state-page .nav.site-nav .nav-brand,
body.state-page .nav.site-nav > a:not(.nav-brand) { color: #fff !important; }
body.state-page .nav.site-nav .nav-brand span { color: #fff !important; opacity: .76; }
body.state-page .nav.site-nav > a:not(.nav-brand):hover { color: #fff !important; opacity: .78; }
body.state-page .theme-toggle { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.10); }
body.state-page .theme-toggle:hover { background: rgba(255,255,255,.18); }
body.state-page .state-form { top: 76px; }

/* Forms inherit the active theme cleanly. */
.input { background: color-mix(in srgb, var(--color-bg) 92%, var(--color-text) 8%) !important; }
select.input, input.input, textarea.input { color: var(--color-text); }
input.input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 620px) {
  .nav.site-nav {
    min-height: 50px;
    gap: 7px !important;
    padding: 8px 10px !important;
  }
  .nav.site-nav .nav-brand { font-size: 14px !important; }
  .nav.site-nav > a:not(.nav-brand) { font-size: 11px; letter-spacing: -.01em; }
  .theme-toggle { width: 32px; height: 32px; }
  .theme-toggle svg { width: 15px; height: 15px; }
  body.state-page .state-form { top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle { transition: none !important; }
}

/* Branded orange bands keep white copy in either site theme. */
#cta-band,
[style*="background:var(--color-accent)"][style*="color:var(--color-bg)"] { color:#fff !important; }
#cta-band [style*="color:var(--color-bg)"],
#cta-band .btn-ghost { color:#fff !important; border-color:#fff !important; }

/* ========================================================================== 
   Conversion chrome: global case-review drawer + desktop trust rail
   ========================================================================== */
:root {
  --rc-z-nav: 4000;
  --rc-z-trust: 5000;
  --rc-z-cta: 7000;
  --rc-z-backdrop: 8000;
  --rc-z-drawer: 8001;
}

.nav.site-nav { z-index: var(--rc-z-nav) !important; }

/* The UI is injected by site-ui.js on normal content pages. Transactional
   verification/thank-you screens opt out in JS so a second intake does not
   compete with the confirmation flow. */
.global-case-cta,
.global-lead-backdrop,
.global-lead-drawer,
.desktop-trust-bar { font-family: var(--font-body); }

.global-case-cta {
  display: none;
  position: fixed;
  z-index: var(--rc-z-cta);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: calc(72px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  padding: 16px max(20px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color: #fff;
  background: linear-gradient(110deg, #d9250d, #ec3013 48%, #ff6532 100%);
  box-shadow: 0 -14px 38px rgba(72,14,5,.24);
  font: 800 16px/1.2 var(--font-heading);
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .48s cubic-bezier(.16,1,.3,1), opacity .24s ease;
}

.global-lead-backdrop {
  position: fixed;
  z-index: var(--rc-z-backdrop);
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(22,18,17,.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
.global-lead-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.global-lead-drawer {
  position: fixed;
  z-index: var(--rc-z-drawer);
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(86svh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border-top: 3px solid var(--color-accent);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 -28px 80px rgba(32,30,29,.30);
  padding: 28px clamp(20px,5vw,64px) calc(30px + env(safe-area-inset-bottom));
  transform: translateY(102%);
  visibility: hidden;
  transition: transform .58s cubic-bezier(.16,1,.3,1), visibility 0s linear .58s;
}
.global-lead-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.global-lead-drawer__inner { max-width: 1120px; margin: 0 auto; }
.global-lead-drawer__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.global-lead-drawer__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--color-accent-700);
  font: 800 11px/1.2 var(--font-heading);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.global-lead-drawer h2 {
  margin: 0;
  font: 800 clamp(26px,3vw,38px)/1.02 var(--font-heading);
  letter-spacing: -.035em;
}
.global-lead-drawer__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font: 600 24px/1 var(--font-body);
  cursor: pointer;
}
.global-lead-form {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px 16px;
  align-items: end;
}
.global-lead-form .lead-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
}
.global-lead-form .lead-consent input { margin-top: 3px; }
.global-lead-form .global-lead-submit { min-height: 48px; }
.global-lead-drawer__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb,var(--color-text) 62%,transparent);
}
body.rc-drawer-open { overflow: hidden; }
body.rc-drawer-open .global-case-cta { transform: translateY(110%); opacity: 0; }

.desktop-trust-bar {
  position: fixed;
  z-index: var(--rc-z-trust);
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px,3vw,40px);
  padding: 11px clamp(20px,4vw,56px);
  color: #fff;
  background: linear-gradient(100deg,#c91f09 0%,#ec3013 58%,#ff6334 100%);
  border-top: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 -10px 32px rgba(72,14,5,.18);
}
.desktop-trust-bar__copy {
  margin: 0;
  max-width: 900px;
  font-size: clamp(12.5px,1.15vw,14.5px);
  line-height: 1.35;
}
.desktop-trust-bar__copy strong { font-family: var(--font-heading); font-weight: 800; }
.desktop-trust-bar__button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
  color: #fff;
  font: 800 12.5px/1 var(--font-heading);
  cursor: pointer;
}
.desktop-trust-bar__button:hover { background: #fff; color: #b91c07; }

@media (min-width:768px) {
  body.rc-has-trust-bar { padding-bottom: 68px; }
}

@media (max-width:767px) {
  body.rc-global-case-ui:not(.state-page) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.rc-global-case-ui:not(.state-page) .global-case-cta { display: block; }
  .desktop-trust-bar { display: none; }
  .global-lead-drawer {
    max-height: calc(100svh - 24px);
    padding: 22px max(20px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  }
  .global-lead-form { grid-template-columns: 1fr; gap: 12px; }
  .global-lead-drawer__head { margin-bottom: 16px; }
  .global-lead-form .global-lead-submit { width: 100%; }
}

@media (min-width:768px) and (max-width:900px) {
  /* Tablet uses the trust rail rather than a second competing bottom CTA. The
     state form remains a drawer at this width and the rail button opens it. */
  body.state-page { padding-bottom: 68px; }
  body.state-page .mobile-case-cta { display: none !important; }
}

/* Responsive repairs found during the six-homepage mobile-browser QA pass. */
@media (max-width:620px) {
  .home-page iframe { max-width: 100%; }

  /* Dossier's desktop form is absolutely pinned into the hero. On phones that
     made the form physically overlap the headline/copy. The global CTA/drawer
     is the mobile intake, so the desktop hero form yields on small screens. */
  .home-dossier header > #form { display: none !important; }
  .home-dossier header > div[style*="max-width:720px"] { padding-bottom: 44px !important; }
  .home-dossier header { min-height: 0 !important; }

  /* Poster used minmax(440px,1fr), which forces a viewport wider than a phone.
     Collapse that grid instead of allowing horizontal overflow/layout zoom. */
  .home-poster [style*="grid-template-columns:repeat(auto-fit,minmax(440px,1fr))"] {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .home-poster [style*="border-left:2px solid rgba(243,242,242,.5)"] {
    border-left: 0 !important;
    border-top: 2px solid rgba(243,242,242,.5) !important;
  }

  /* A few variants intentionally use two-column desktop callouts. Ensure the
     browser can shrink their children rather than widening the layout. */
  .home-page [style*="minmax(340px,1fr)"],
  .home-page [style*="minmax(320px,1fr)"] { min-width: 0; }
}

@media (max-width:380px) {
  .nav.site-nav { gap: 5px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .nav.site-nav .nav-brand { font-size: 13px !important; }
  .nav.site-nav > a:not(.nav-brand) { font-size: 10.25px; }
  .theme-toggle { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion:reduce) {
  .global-case-cta,
  .global-lead-backdrop,
  .global-lead-drawer { transition-duration: .01ms !important; }
}

/* Article state pages keep their desktop sidebar, but on mobile the shared
   bottom CTA/drawer is the intake surface so the article starts with content. */
@media (max-width:900px) {
  body.state-article-page .state-page-layout { display: block !important; padding: 0 !important; }
  body.state-article-page .state-form { display: none !important; }
}