html, body { margin:0; padding:0; background:#FBFBFD; }
  body { font-family:'Schibsted Grotesk', Helvetica, Arial, sans-serif; color:#0B1220; -webkit-font-smoothing:antialiased; }
  * { box-sizing:border-box; }
  a { color:#0644CC; text-decoration:none; }
  a:hover { color:#0533A0; }
  p { text-wrap:pretty; }
  img, svg, iframe { max-width:100%; }
  @media (max-width: 1100px) and (min-width: 901px) {
    #claim-steps { grid-template-columns:1fr 1fr !important; }
  }
  @media (max-width: 1100px) and (min-width: 901px) {
    main h1:not(.hero-h1):not(.lede-h1) { font-size:42px !important; }
    main .hero-h1 { font-size:35px !important; }
  }
  @media (max-width: 900px) {
    #claim-steps { grid-template-columns:1fr !important; gap:14px !important; }
    #rc-box { height:180px !important; }
    #rc-metrics { grid-template-columns:1fr 1fr 1fr !important; gap:6px !important; }
    #rc-metrics > div { padding:11px 9px !important; min-width:0; }
    #rc-metrics > div > div:last-child { font-size:16px !important; }
    #rc-time-row { flex-wrap:wrap; gap:8px; }
    #rc-time-row label { width:100%; }
    body { overflow-x:hidden; }
    main [style*="grid-template-columns"], footer [style*="grid-template-columns"] { grid-template-columns:1fr !important; gap:26px !important; }
    /* let collapsed-grid children shrink below their content min-width so a wide
       child (e.g. the hero chart card) can't push the track past the viewport */
    main [style*="grid-template-columns"] > *, footer [style*="grid-template-columns"] > * { min-width:0; }
    main section[style*="margin:0 auto"], main section > div[style*="margin:0 auto"], footer > div > div { padding-left:20px !important; padding-right:20px !important; }
    main div[style*="position:sticky"] { position:static !important; }
    main h1 { font-size:34px !important; }
    main .hero-h1 { font-size:30px !important; }
    main .lede-h1 { font-size:24px !important; line-height:1.4 !important; }
    main h2 { font-size:25px !important; }
    header > div { height:auto !important; flex-wrap:wrap; padding:12px 20px !important; gap:12px; }
    header nav { order:3; width:100%; gap:20px !important; font-size:14px !important; overflow-x:auto; padding-bottom:2px; }
    header > div > div:last-child > a[href^="tel"] { display:none; }
    body > div > div:first-child > div { flex-direction:column !important; align-items:flex-start !important; gap:10px !important; padding-left:20px !important; padding-right:20px !important; }
    body > div > div:first-child > div > div { flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
    body > div > div:first-child a[href*="portal.carmaxx"] { display:none !important; }
    .cta-band { flex-direction:column !important; align-items:flex-start !important; gap:20px !important; }
  }

  @media (max-width: 360px) {
    /* very small phones: keep the 3 hero metric figures from clipping */
    #rc-metrics { gap:5px !important; }
    #rc-metrics > div { padding:9px 7px !important; }
    #rc-metrics > div > div:first-child { font-size:11px !important; }
    #rc-metrics > div > div:last-child { font-size:13px !important; }
  }

/* ------------------------------------------------------------------
   Exceptions to the blanket mobile grid collapse.

   The rule up in the max-width:900px block flattens ANY element whose
   inline style contains grid-template-columns to a single 1fr column
   with a 26px gap. That's right for page-level layout grids and wrong
   for small component grids — it was stacking the opening hours onto
   three lines, pushing the about-page bullet dots above their text,
   and turning 1px hairline dividers into 26px slabs.

   These rules undo it per component. They must stay AFTER that block:
   specificity is equal, so source order decides.
   ------------------------------------------------------------------ */

/* 4-up stat strip: two across on phones rather than one long column */
@media (max-width: 900px) {
  main .grid-4 { grid-template-columns:1fr 1fr !important; gap:1px !important; }
}
@media (max-width: 420px) {
  main .grid-4 { grid-template-columns:1fr !important; }
}

@media (max-width: 900px) {
  /* Opening hours: day / open / dash / close must stay on one line */
  main .hours-grid {
    grid-template-columns:1fr auto 12px auto !important;
    row-gap:7px !important; column-gap:2px !important;
  }

  /* "What we believe" bullets: dot stays beside its text */
  main .dot-row { grid-template-columns:16px 1fr !important; gap:14px !important; }

  /* 3-up cards: the 1px gap is the divider, so keep it hairline */
  main .grid-3 { grid-template-columns:1fr !important; gap:1px !important; }

  /* Paired form fields: 26px between stacked inputs reads as unrelated */
  main .form-2 { grid-template-columns:1fr !important; gap:12px !important; }

  /* About stat strip: two across, with a rule between the rows */
  main .stat-strip { grid-template-columns:1fr 1fr !important; gap:0 !important; }
  main .stat-strip > div { border-bottom:1px solid #E9EEF8; }
}

@media (max-width: 380px) {
  /* Narrowest phones: shrink the hours type rather than let it wrap */
  main .hours-grid { font-size:13px !important; }
}

/* ---- FAQ / terminology accordions (coverage.html, claims.html) ---- */
.faq details { background:#FFFFFF; }
.faq summary {
  list-style:none; cursor:pointer; padding:19px 46px 19px 22px; position:relative;
  font-size:16.5px; font-weight:600; line-height:1.5; color:#0B1220; text-wrap:pretty;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:#0644CC; }
.faq summary::after {
  content:""; position:absolute; right:22px; top:26px; width:9px; height:9px;
  border-right:2px solid #8A93A6; border-bottom:2px solid #8A93A6;
  transform:rotate(45deg); transition:transform 0.18s ease; transform-origin:70% 70%;
}
.faq details[open] summary { color:#0644CC; }
.faq details[open] summary::after { transform:rotate(-135deg); border-color:#0644CC; }
.faq summary:focus-visible { outline:2px solid #0644CC; outline-offset:-2px; }
.faq .faq-a { padding:0 46px 22px 22px; }
.faq .faq-a p { margin:0; font-size:15.5px; line-height:1.7; color:#4A5468; }
.faq .faq-a p + p { margin-top:10px; }

/* ---- File drop zone (claims.html) ---- */
.drop {
  margin-top:8px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; text-align:center; padding:22px 18px; cursor:pointer;
  border:1.5px dashed #C7D3EC; border-radius:9px; background:#FCFDFF;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.drop:hover, .drop.over { border-color:#0644CC; background:#F4F7FE; }
.drop input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.drop .drop-main { font-size:14.5px; font-weight:600; color:#0644CC; }
.drop .drop-sub { font-size:12.5px; color:#8A93A6; }
.drop:focus-within { border-color:#0644CC; box-shadow:0 0 0 3px rgba(6,68,204,0.12); }
@media (hover: none) { .drop .drop-alt { display:none; } }

.filechip {
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:1px solid #E1E6F0; border-radius:7px; background:#FFFFFF; font-size:13.5px;
}
.filechip + .filechip { margin-top:6px; }
.filechip .fc-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0B1220; }
.filechip .fc-size { color:#8A93A6; font-variant-numeric:tabular-nums; flex:none; }
.filechip .fc-x {
  flex:none; border:none; background:none; cursor:pointer; font-family:inherit;
  color:#8A93A6; font-size:16px; line-height:1; padding:2px 4px;
}
.filechip .fc-x:hover { color:#D23B2B; }
.filechip.bad { border-color:#F0C6C0; background:#FDF5F4; }
.filechip.bad .fc-name { color:#D23B2B; }

/* ---- Ghost button on dark CTA bands ---- */
.cta-ghost:hover { background:#0F2A55 !important; border-color:#3A5A93 !important; color:#FFFFFF !important; }

/* ---- Asset placeholders (temporary, see IMPROVEMENTS.md) ---- */
.ph {
  border:1.5px dashed #B9C6E4; border-radius:14px; background:
    repeating-linear-gradient(135deg,#F4F7FE 0 12px,#EDF2FC 12px 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px 30px; gap:9px; color:#4A5468;
}
.ph-tag {
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:#0644CC; background:#FFFFFF;
  border:1px solid #D6E2FF; border-radius:100px; padding:5px 11px;
}
.ph-title { font-size:17px; font-weight:700; letter-spacing:-0.01em; color:#0B1220; }
.ph-desc { margin:0; font-size:14.5px; line-height:1.6; max-width:620px; color:#5A6478; }
.ph-meta {
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:#8A93A6;
}
/* Shared illustration spec — identical text in all three placeholders. */
.ph-spec {
  margin:6px 0 0; max-width:620px; font-size:13px; line-height:1.6; color:#6E7788;
  background:#FFFFFF; border:1px solid #E1E8F7; border-radius:8px; padding:11px 14px;
}

/* ---- Hero Video (index.html) ---- */
.hero-video-section {
  position: relative;
  width: 100%;
  border-top: 1px solid #e4e8f0;
  border-bottom: 1px solid #e4e8f0;
  background-color: #f4f6fa;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(238, 242, 250, 0.95) 100%),
    radial-gradient(rgba(11, 18, 32, 0.08) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 24px 24px;
}

.hero-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 3840px;
  margin: 0 auto;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 16px 40px -12px rgba(11, 18, 32, 0.12);
}

.hero-video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.05);
  transform-origin: center center;
}

/* ---- Testimonial scroller (index.html) ---- */
.tscroll {
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px; margin:0 -4px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#C9D2E4 transparent;
}
.tscroll::-webkit-scrollbar { height:6px; }
.tscroll::-webkit-scrollbar-thumb { background:#C9D2E4; border-radius:100px; }
.tscroll::-webkit-scrollbar-track { background:transparent; }
.tcard {
  flex:1 0 340px; scroll-snap-align:start; background:#FFFFFF;
  border:1px solid #E4E8F0; border-radius:14px; padding:26px 26px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.tnav {
  width:36px; height:36px; border-radius:50%; border:1px solid #D3D9E6; background:#FFFFFF;
  color:#0B1220; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:15px; line-height:1; flex:none;
}
.tnav:hover { border-color:#0644CC; color:#0644CC; }
.tnav[disabled] { opacity:0.35; cursor:default; }
.tnav[disabled]:hover { border-color:#D3D9E6; color:#0B1220; }
@media (max-width: 560px) { .tcard { flex-basis:82vw; } .tnav { display: none !important; } }

.topbar-promo:hover { color:#8FB4FF !important }
.topbar-link:hover { color:#FFFFFF !important }
.topbar-login:hover { color:#8FB4FF !important }
.nav-link:hover { color:#0644CC !important }
.nav-link.is-active { position: relative; }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #0644cc;
}
.nav-cta-btn:hover { background:#0533A0 !important; color:#FFFFFF !important }
.footer-link:hover { color:#FFFFFF !important }

.x11:hover { background:#0533A0 !important; color:#FFFFFF !important }
.x12:hover { border-color:#0644CC !important; color:#0644CC !important }
.x13:hover { background:#0533A0 !important; color:#FFFFFF !important }
.x14:hover { border-color:#0644CC !important; color:#0644CC !important }
.x57:hover { background:#DDE7FB !important; color:#071A3D !important }
.x100:focus { border-color:#0644CC !important }
.x101:focus { border-color:#0644CC !important }
.x102:focus { border-color:#0644CC !important }
.x103:focus { border-color:#0644CC !important }
.x104:focus { border-color:#0644CC !important }
.x105:hover { color:#0B1220 !important }
.x106:hover { color:#0B1220 !important }
.x107:hover { color:#0B1220 !important }
.x108:hover { background:#0533A0 !important }
.x130:focus { border-color:#0644CC !important }
.x131:focus { border-color:#0644CC !important }
.x132:focus { border-color:#0644CC !important }
.x133:focus { border-color:#0644CC !important }
.x134:focus { border-color:#0644CC !important }
.x135:hover { background:#0533A0 !important }
.qcta:hover { background:#0533A0 !important; color:#FFFFFF !important; }
.cta-phone:hover { background:#EBF1FF !important; color:#0644CC !important; }
.vt { background: transparent; color:#5A6478; font-weight:500; }
.vt.on { background:#FFFFFF; color:#0644CC; font-weight:600; box-shadow:0 1px 3px rgba(11,18,32,0.14); }

/* ---- Subtle pulse animation for hero shield illustration ---- */
@keyframes subtlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.975);
  }
}

.hero-illustration-pulse {
  animation: subtlePulse 5s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-illustration-pulse {
    animation: none;
  }
}

/* ---- Illustration entrance (claims, about, coverage) ----
   The default here is the *finished* state, so the illustrations are visible
   with JS off. The `js-anim` class is set on <html> by an inline script in each
   page head — before first paint — which switches on the hidden/offset start so
   there is never a flash of the settled illustration. forms.js then adds
   .is-visible once the image has loaded AND the element has reached the
   viewport. One transition per element, no keyframes: nothing else may animate
   opacity or transform on these, or the entrance stops being a clean slide. */
.animate-on-scroll {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js-anim .animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-duration: 850ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js-anim .scroll-entrance-claims {
    transform: translate3d(0, 28px, 0);
  }

  html.js-anim .scroll-entrance-about {
    transform: translate3d(30px, 0, 0);
  }

  /* Reads as the car rolling forward into place. */
  html.js-anim .scroll-entrance-coverage {
    transform: translate3d(-34px, 0, 0);
    transition-duration: 900ms;
  }

  html.js-anim .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Parked for good — release the compositor layer. */
  html.js-anim .animate-on-scroll.is-settled {
    will-change: auto;
  }
}

/* Page shell for sticky footer */
.page-shell { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.page-shell > main { flex:1 0 auto; }