/* ==========================================================================
   CLAIM PILOT — DESIGN SYSTEM v2
   --------------------------------------------------------------------------
   Single source of truth for the public website AND the future Client Portal.
   Everything below is expressed as tokens + primitives so the portal can adopt
   this file unchanged.

   Legacy token names (--navy, --grey, --space-*, --radius-*, --shadow-*) are
   intentionally preserved: the Claim Pilot Assistant chat widget stylesheet at
   the bottom of this file depends on them and has NOT been modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand core (unchanged) --- */
  --navy:        #0D1B3D;
  --navy-light:  #16295C;
  --white:       #FFFFFF;

  /* --- Extended navy ramp --- */
  --navy-900:    #060F26;
  --navy-800:    #0D1B3D;
  --navy-700:    #16295C;
  --navy-600:    #22397A;

  /* --- Surfaces --- */
  --grey:        #F2F5F9;   /* legacy alias */
  --pale-blue:   #E8F1FC;   /* legacy alias */
  --surface:     #FFFFFF;
  --surface-2:   #F6F8FC;
  --surface-3:   #EDF2F9;
  --surface-ink: #0D1B3D;

  /* --- Accent: single bright action/emphasis colour --- */
  --accent:      #0A6C7A;
  --accent-700:  #085761;
  --accent-300:  #7FC4CD;
  --accent-soft: #E4F2F4;

  /* --- Text --- */
  --text-body:      #2B3245;
  --text-muted:     #55607A;
  --text-secondary: #3F4759;
  --text-on-dark:   #E9EEF8;
  --text-on-dark-muted: #A9B6D1;

  /* --- Lines & states --- */
  --border:      #DDE3EE;
  --border-2:    #C9D3E4;
  --border-dark: rgba(255,255,255,0.14);
  --success:     #1F8A5F;
  --warning:     #8A5316;
  --focus:       #0A6C7A;   /* brand teal — accessible, not the browser blue */
  --focus-dark:  #7FC4CD;   /* same role on navy surfaces */
  --info:        #1F5FA8;
  --danger:      #A3231B;

  /* --- Type --- */
  /* System stack only — no third-party font host, no external request, no CSP
     entry, nothing leaves the visitor's device to render type. Ordered so each
     platform lands on its own high-quality UI face. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.08rem);
  --step-1:  clamp(1.13rem, 1.06rem + 0.32vw, 1.31rem);
  --step-2:  clamp(1.27rem, 1.14rem + 0.62vw, 1.62rem);
  --step-3:  clamp(1.42rem, 1.21rem + 1.05vw, 2.00rem);
  --step-4:  clamp(1.60rem, 1.26rem + 1.68vw, 2.48rem);
  --step-5:  clamp(1.80rem, 1.28rem + 2.60vw, 3.06rem);
  --step-6:  clamp(1.95rem, 1.42rem + 2.36vw, 3.20rem);

  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-body:  1.62;

  /* --- Space --- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  40px;
  --space-5:  64px;
  --space-6:  96px;
  --space-7:  128px;

  /* --- Radii --- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Elevation (soft, navy-tinted — no drop-shadow "glow") --- */
  --shadow-sm: 0 1px 2px rgba(13,27,61,0.06);
  --shadow-md: 0 8px 24px rgba(13,27,61,0.08);
  --shadow-lg: 0 18px 48px rgba(13,27,61,0.12);

  /* --- Layout --- */
  --container-width: 1160px;
  --container-narrow: 760px;
  --header-h: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; }

h1, h2, h3, h4, h5 {
  color: var(--navy);
  margin: 0 0 var(--space-2);
  font-weight: 700;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h1 { font-size: var(--step-6); line-height: var(--lh-tight); letter-spacing: -0.031em; }
h2 { font-size: var(--step-4); line-height: var(--lh-snug); letter-spacing: -0.026em; }
h3 { font-size: var(--step-1); line-height: 1.34; letter-spacing: -0.014em; }
h4 { font-size: var(--step-0); line-height: 1.4; }

p  { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-2); padding-left: 1.15em; }
li { margin-bottom: 6px; }

strong { font-weight: 700; color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On navy the teal ring would sink into the background, so the light tint of the
   same hue takes over. The indicator is restyled, never removed. */
.hero :focus-visible,
.section--navy :focus-visible,
.sticky-cta :focus-visible,
.site-footer :focus-visible,
.showcase :focus-visible,
.legal-hero :focus-visible { outline-color: var(--focus-dark); }

::selection { background: var(--accent-soft); color: var(--navy); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.container--narrow { max-width: var(--container-narrow); }

.section          { padding: var(--space-6) 0; }
.section--tight   { padding: var(--space-5) 0; }
.section--grey    { background: var(--surface-2); }
.section--pale-blue { background: var(--pale-blue); }
.section--navy    { background: var(--navy); color: var(--text-on-dark); }
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy p  { color: var(--text-on-dark-muted); }

.section__head { max-width: 62ch; margin-bottom: var(--space-4); }
/* For a section whose head IS its entire content (no grid/cards follow), the
   head's trailing margin becomes dead space and the section renders visibly
   bottom-heavy — e.g. 96px above vs 136px below inside an otherwise centred
   band. This zeroes it so the section's own padding alone sets the rhythm. */
.section__head--only { margin-bottom: 0; }
.section__head--center { max-width: 78ch; margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center p { max-width: 56ch; margin-inline: auto; }
.section__head p {
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

.stack > * + * { margin-top: var(--space-2); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.section--navy .eyebrow { color: var(--accent-300); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.975rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
              transform 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Primary — solid navy. The single most important action on the site. */
.btn--primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }

/* On navy backgrounds the primary inverts to white-on-navy. */
.on-dark .btn--primary,
.section--navy .btn--primary,
.final-cta .btn--primary,
.sticky-cta .btn--primary,
.hero .btn--primary {
  background: var(--white);
  color: var(--navy);
}
.on-dark .btn--primary:hover,
.section--navy .btn--primary:hover,
.final-cta .btn--primary:hover,
.sticky-cta .btn--primary:hover,
.hero .btn--primary:hover { background: #F2F6FF; box-shadow: var(--shadow-lg); }

.btn--solid-navy { background: var(--navy); color: var(--white); }
.btn--solid-navy:hover { background: var(--navy-700); }

.btn--outline {
  background: transparent;
  border-color: var(--border-2);
  color: var(--navy);
}
.btn--outline:hover { border-color: var(--navy); background: var(--surface-2); }

.on-dark .btn--outline,
.section--navy .btn--outline,
.final-cta .btn--outline,
.hero .btn--outline {
  border-color: rgba(255,255,255,0.34);
  color: var(--white);
}
.on-dark .btn--outline:hover,
.section--navy .btn--outline:hover,
.final-cta .btn--outline:hover,
.hero .btn--outline:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.6); }

.btn--ghost { background: transparent; color: var(--navy); padding-left: 4px; padding-right: 4px; }
.btn--ghost:hover { color: var(--accent-700); }

.btn--lg { min-height: 56px; padding: 16px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--accent-700);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. SKIP LINK
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.028em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: none;
  flex: none;
}

.main-nav { display: flex; align-items: center; }
.main-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav__links li { margin: 0; }
.main-nav__links a {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.main-nav__links a:hover { color: var(--navy); background: var(--surface-2); }
.main-nav__links a.btn { margin-left: var(--space-1); color: var(--white); }
.main-nav__links a.btn:hover { color: var(--white); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Photographic ground sits UNDER the existing navy + gradient system.
     --navy remains the base colour, so the hero degrades to the approved
     look exactly as before if the image fails to load. */
  background-color: var(--navy);
  background-image: url("/assets/images/hero-bg.jpg");
  background-size: cover;
  background-position: 50% 62%;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  padding: var(--space-6) 0 var(--space-6);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* readability scrim, densest behind the headline column */
    linear-gradient(100deg, rgba(13,27,61,0.93) 0%, rgba(13,27,61,0.80) 40%, rgba(13,27,61,0.46) 70%, rgba(13,27,61,0.34) 100%),
    radial-gradient(58rem 34rem at 88% -12%, rgba(10,108,122,0.42), transparent 62%),
    radial-gradient(44rem 30rem at 6% 104%, rgba(34,57,122,0.55), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }
/* Narrow viewports show the left (darkest) part of the frame, where the photo
   reads as flat navy. Shift toward the vehicle so the image still registers,
   without touching the scrim that keeps the headline crisp. */
@media (max-width: 720px) {
  .hero { background-position: 78% 62%; }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  grid-template-areas:
    "copy    checker"
    "points  checker"
    "actions checker";
  grid-template-rows: auto auto auto;
  column-gap: var(--space-5);
  align-content: center;
}
.hero__copy    { grid-area: copy; }
.hero__points  { grid-area: points; }
.hero__actions { grid-area: actions; }
.checker       { grid-area: checker; align-self: center; }

.hero h1 { color: var(--white); margin-bottom: var(--space-3); max-width: 19ch; }
.hero h1 .hero__accent { color: var(--accent-300); display: block; }

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-on-dark);
  max-width: 46ch;
  margin-bottom: var(--space-3);
}

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-on-dark);
}
.hero__points svg { width: 18px; height: 18px; flex: none; color: var(--accent-300); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* --- Hero claim-check card (the first step happens on the page) --- */
.checker {
  background: var(--white);
  color: var(--text-body);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  max-width: 470px;
  margin-left: auto;
  width: 100%;
}
.checker__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.checker__title { font-size: var(--step-2); margin: 0; color: var(--navy); }
.checker__step {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.checker__hint { font-size: 0.92rem; color: var(--text-muted); margin-bottom: var(--space-3); }

.checker__panel { display: none; }
.checker__panel.is-active { display: block; animation: cp-fade 0.28s var(--ease); }
@keyframes cp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.opt-list { display: grid; gap: 10px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.opt-list li { margin: 0; }

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.opt:hover { border-color: var(--accent-300); background: var(--accent-soft); }
.opt[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.opt__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--accent-700);
}
.opt[aria-pressed="true"] .opt__icon { background: var(--accent); color: var(--white); }
.opt__icon svg { width: 19px; height: 19px; }

.checker__result {
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1.5px solid var(--accent-300);
  background: var(--accent-soft);
}
.checker__result--caution { border-color: #E6CDA6; background: #FBF4E9; }
.checker__result h4 { margin-bottom: 6px; font-size: var(--step-1); }
.checker__result p { font-size: 0.94rem; color: var(--text-secondary); }

.checker__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.checker__back:hover { color: var(--navy); }

.checker__foot {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. TRUST STRIP
   -------------------------------------------------------------------------- */

.trust-strip {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--accent-700);
}
.trust-item__icon svg { width: 20px; height: 20px; }
.trust-item h3 { font-size: 0.98rem; margin: 0 0 2px; }
.trust-item p  { font-size: 0.87rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

/* --------------------------------------------------------------------------
   9. CARDS / GRIDS / TILES
   -------------------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.card h3 { margin-bottom: 6px; }
.card p  { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-700);
  margin-bottom: var(--space-2);
}
.card__icon svg { width: 22px; height: 22px; }

.tile { padding: 0; height: 100%; }
.tile__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--accent-700);
  margin-bottom: var(--space-2);
}
.tile__icon svg { width: 22px; height: 22px; }
.tile h3 { font-size: 1.04rem; margin-bottom: 4px; }
.tile p  { color: var(--text-muted); font-size: 0.91rem; margin: 0; }

/* Claim type — compact, icon-led */
.claim-type {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.claim-type:hover,
a.claim-type:focus-visible { border-color: var(--accent-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
a.claim-type { text-decoration: none; color: inherit; }
.claim-type__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-700);
}
.claim-type__icon svg { width: 22px; height: 22px; }
.claim-type h3 { font-size: 1.02rem; margin-bottom: 3px; }
.claim-type p  { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. STEPS (how it works)
   -------------------------------------------------------------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--space-4) var(--space-3);
}
.step { position: relative; padding-top: var(--space-3); }
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--border);
}
.step--done::before { background: var(--accent); }
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 0.94rem;
  margin-bottom: var(--space-2);
}
.step h3 { margin-bottom: 6px; }
.step p  { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   11. WHAT CLAIM PILOT HANDLES — service functions
   -------------------------------------------------------------------------- */

.handles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-3);
}
.handles {
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.handles__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-3);
  background: var(--white);
}
.handles__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-700);
}
.handles__icon svg { width: 22px; height: 22px; }
.handles__item h3 { font-size: 1.02rem; margin-bottom: 3px; }
.handles__item p  { color: var(--text-muted); font-size: 0.92rem; margin: 0; }
.handles__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.handles__closer {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--navy);
}


/* --------------------------------------------------------------------------
   11b. VISUAL SHOWCASE — claim-type imagery
   --------------------------------------------------------------------------
   Three brand-illustrated tiles that break up the card grid and are already
   image-ready: dropping an <img> into .showcase__media replaces the drawn motif
   automatically (see the :has rule below). Nothing here is a placeholder — the
   illustrated state is a finished design in its own right.
   -------------------------------------------------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.showcase__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.showcase__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* faint dot field for depth — one gradient, no asset */
.showcase__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(127, 196, 205, 0.30) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.4;
}
/* teal wash from the corner the motif sits in */
.showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(22rem 16rem at 78% 12%, rgba(10, 108, 122, 0.55), transparent 66%);
}

.showcase__motif {
  position: relative;
  z-index: 1;
  width: 68%;
  max-width: 280px;
  height: auto;
  color: var(--accent-300);
  filter: drop-shadow(0 6px 18px rgba(6, 15, 38, 0.45));
}
.showcase__impact { color: #FFFFFF; }

.showcase__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* A real photograph supersedes the drawn motif and its decoration. */
.showcase__media:has(img) .showcase__motif,
.showcase__media:has(img)::before,
.showcase__media:has(img)::after { display: none; }
.showcase__media:has(img) { background: var(--navy-900); }

/* A real caption band, not an overlay: the text can wrap to any number of lines
   at any breakpoint without ever running into the artwork or a photograph. */
.showcase__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: rgba(6, 15, 38, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.showcase__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--white);
}
.showcase__line { font-size: 0.85rem; color: var(--text-on-dark-muted); }

/* --------------------------------------------------------------------------
   11c. CHAT LAUNCHER PLACEMENT (style-only override)
   --------------------------------------------------------------------------
   The Claim Pilot Assistant launcher is a fixed overlay owned by the widget.
   Its own stylesheet (bottom of this file) is UNMODIFIED. On phones and small
   tablets it would otherwise float over the claim checker, FAQ rows and the
   sticky CTA, so here it is parked while the hero is on screen and docked into
   the sticky CTA bar once that bar appears. Desktop behaviour is unchanged.
   Both rules require .cp-launcher-managed, which main.js only sets when the
   observer that drives the sticky bar is actually running — so if JS fails the
   launcher keeps its original position.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  body.cp-launcher-managed .cp-chat__launcher {
    width: 46px;
    height: 46px;
    right: auto;
    left: calc(var(--space-2) + env(safe-area-inset-left, 0px));
    bottom: calc(11px + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  body.cp-launcher-managed.is-sticky-visible .cp-chat__launcher {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    /* Wait for the opaque bar to finish sliding up, so the launcher is never
       briefly visible over page content mid-transition. */
    transition-delay: 0.3s;
  }
  body.cp-launcher-managed .cp-chat__launcher svg { width: 20px; height: 20px; }

  /* Reserve the docked launcher's column inside the bar. */
  body.cp-launcher-managed .sticky-cta {
    padding-left: calc(var(--space-2) * 2 + 46px + env(safe-area-inset-left, 0px));
  }
}

/* --------------------------------------------------------------------------
   12. CLAIM JOURNEY RAIL
   -------------------------------------------------------------------------- */

.rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-2); }
.rail::before {
  content: "";
  position: absolute;
  top: 17px; left: 8%; right: 8%;
  height: 2px;
  background: rgba(255,255,255,0.18);
}
.rail__node { position: relative; text-align: center; }
.rail__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 2px solid var(--accent-300);
  color: var(--white);
  margin-bottom: var(--space-2);
}
.rail__dot svg { width: 17px; height: 17px; }
.rail__node h3 { font-size: 0.97rem; color: var(--white); margin-bottom: 4px; }
.rail__node p  { font-size: 0.85rem; color: var(--text-on-dark-muted); margin: 0; line-height: 1.45; }

.rail__note {
  margin: var(--space-5) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: 0.98rem;
  color: var(--text-on-dark-muted);
}
.rail__note strong { color: var(--white); display: block; margin-bottom: 2px; }
.rail__cta { display: flex; justify-content: center; margin-top: var(--space-3); }

/* Reserved for genuine proof only — see the comment in index.html. */
.proof-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  text-align: center;
}

.portal-note {
  margin-top: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-3);
  border: 1px dashed rgba(255,255,255,0.28);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
}
.portal-note svg { width: 22px; height: 22px; flex: none; color: var(--accent-300); margin-top: 2px; }
.portal-note p { margin: 0; font-size: 0.92rem; color: var(--text-on-dark-muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--planned { background: rgba(127,196,205,0.16); color: var(--accent-300); border: 1px solid rgba(127,196,205,0.34); }
.badge--exploring { background: #FBF4E9; color: var(--warning); border: 1px solid #E6CDA6; }

/* --------------------------------------------------------------------------
   13. EDUCATION / NOTICE / SUITABILITY
   -------------------------------------------------------------------------- */

.insight {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-5);
  align-items: center;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-4);
}
.feature { display: flex; align-items: flex-start; gap: 14px; }
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-700);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature h3 { font-size: 1.01rem; margin-bottom: 3px; }
.feature p  { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

.insight__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.insight__quote {
  font-size: var(--step-3);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}
.insight__quote em { font-style: normal; color: var(--accent-700); }
.insight > div > .text-muted { max-width: 54ch; }

.suitability-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.suitability-box ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; columns: 2; column-gap: var(--space-4); }
.suitability-box li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  break-inside: avoid;
  font-size: 0.94rem;
  color: var(--text-secondary);
}
.suitability-box li::before {
  content: "";
  position: absolute;
  left: 6px; top: 0.62em;
  width: 8px; height: 2px;
  background: var(--border-2);
  border-radius: 2px;
}

.notice {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.notice p { color: var(--text-secondary); font-size: 0.95rem; }
.notice p + p { margin-top: var(--space-2); }

.coming-soon {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: var(--space-3);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.coming-soon__eyebrow { grid-column: 1 / -1; justify-self: start; }
.coming-soon h3 { margin-bottom: 6px; }
.coming-soon p  { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-5);
  align-items: start;
}
.faq-layout__intro { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.faq-item__question:hover { color: var(--accent-700); }
.faq-item__icon {
  width: 20px; height: 20px;
  flex: none;
  color: var(--text-muted);
  transition: transform 0.22s var(--ease);
}
.faq-item[data-open="true"] .faq-item__icon { transform: rotate(180deg); color: var(--accent); }
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s var(--ease);
}
.faq-item__answer p {
  padding: 0 4px 20px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.96rem;
  max-width: 68ch;
}

/* "Still have questions? -> View all FAQs" (2026-08-26 alignment fix): this
   previously sat outside .faq-layout as a full-container-width, centred
   paragraph, so it appeared to float left of the accordion column (whose
   question text starts well right of centre, inside the narrower right-hand
   grid track). Moving it inside .faq (the accordion column itself, as the
   last child — see index.html) and left-aligning it with the same 4px
   inline padding used by .faq-item__question puts its left edge on the
   exact same vertical axis as every question above it, with no floated or
   guessed margin values. */
.faq__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 4px 0;
}

/* --------------------------------------------------------------------------
   15. FINAL CTA
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy);
  color: var(--text-on-dark);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38rem 22rem at 78% 0%, rgba(10,108,122,0.45), transparent 62%),
    radial-gradient(34rem 22rem at 12% 100%, rgba(34,57,122,0.6), transparent 60%);
  pointer-events: none;
}
.final-cta > * { position: relative; }
.final-cta h2 { color: var(--white); max-width: 20ch; margin-inline: auto; }
.final-cta p  { color: var(--text-on-dark-muted); max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-4); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--text-on-dark-muted);
  padding: var(--space-6) 0 var(--space-4);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-4);
}
.footer-brand__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.028em;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.footer-brand__mark .brand__mark { background: var(--white); border-radius: 8px; padding: 3px; }
.footer-brand__logo {
  display: block;
  box-sizing: content-box;      /* padding forms the light plate; artwork stays 32px, same as the header */
  height: 32px;
  width: auto;
  max-width: none;              /* global img{max-width:100%} would otherwise squeeze the lockup */
  flex: none;
  padding: 3px 7px;
  background: var(--white);
  border-radius: 8px;
}
.footer-tagline { font-size: 0.9rem; color: var(--text-on-dark-muted); max-width: 34ch; }
.footer-col h3,
.footer-col h4 {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 2px; }
.footer-col a {
  display: inline-block;
  padding: 5px 0;               /* keeps the tap target ≥ 24px high (WCAG 2.5.8) */
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: 0.93rem;
  line-height: 1.5;
  border-bottom: 1px solid transparent;
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--white); border-bottom-color: rgba(255,255,255,0.4); }
.footer-note { font-size: 0.85rem; color: var(--text-on-dark-muted); margin-top: var(--space-2); max-width: 30ch; }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-dark);
  font-size: 0.85rem;
  color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   17. STICKY MOBILE CTA
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 10px var(--space-3) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(13,27,61,0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.12);
  transform: translateY(110%);
  transition: transform 0.28s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__text { min-width: 0; font-size: 0.84rem; line-height: 1.35; color: var(--text-on-dark-muted); }
.sticky-cta__text strong { display: block; color: var(--white); font-size: 0.95rem; }
.sticky-cta .btn { min-height: 44px; padding: 10px 22px; font-size: 0.9rem; flex: none; }

/* Keep the last of the page clear of the bar. */
body.has-sticky-cta { padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); }
/* Anchor jumps must not land underneath the docked bar. */
html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* --------------------------------------------------------------------------
   DESKTOP (>= 1024px): no full-width sticky sales bar.
   The bar is removed outright rather than hidden behind a spacer, the body
   padding it reserved is released, and the chat launcher returns to its own
   independent resting position in the bottom-right.

   So that the launcher cannot sit on top of copy, buttons, FAQ rows or footer
   content at these widths, the content column is capped to leave a gutter wide
   enough for it. At >=1024px that is at least 88px each side, and the 56px
   launcher with its 24px inset sits entirely inside that gutter.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --container-width: min(1160px, calc(100vw - 176px)); }
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
  html { scroll-padding-bottom: var(--space-4); }
}
.sticky-cta { padding-left: calc(var(--space-3) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--space-3) + env(safe-area-inset-right, 0px)); }

@media (max-width: 720px) {
  .sticky-cta { justify-content: flex-start; gap: var(--space-2); }
  .sticky-cta__text { flex: 1; }
}

/* --------------------------------------------------------------------------
   18. LEGAL PAGES + 404  (class names unchanged — legal HTML is untouched)
   -------------------------------------------------------------------------- */

.legal-hero {
  background: var(--navy);
  color: var(--text-on-dark);
  padding: var(--space-6) 0 var(--space-5);
}
.legal-hero h1 { color: var(--white); font-size: var(--step-5); margin-bottom: 8px; }
.legal-hero p  { color: var(--text-on-dark-muted); margin: 0; font-size: 0.95rem; }

.legal-content {
  width: 100%;
  max-width: 74ch;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}
.legal-content h2 {
  font-size: var(--step-2);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.legal-content h2:first-of-type { margin-top: var(--space-4); }
.legal-content p { color: var(--text-secondary); line-height: 1.72; margin-bottom: var(--space-2); }
.legal-content a { color: var(--accent-700); font-weight: 600; }
.legal-content .back-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}
.legal-content .back-home:hover { color: var(--navy); }

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 68vh;
  padding: var(--space-6) var(--space-3);
}
.error-page__code {
  font-size: clamp(3.4rem, 12vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--accent-300);
  margin: 0 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   18b. PORTAL-READY PRIMITIVES
   --------------------------------------------------------------------------
   Not used by the public site today. They exist so the Client Portal can adopt
   this stylesheet and inherit the same colour, spacing, radius, typography and
   focus behaviour rather than growing a second, divergent design language.
   Nothing here renders unless the markup is present.
   -------------------------------------------------------------------------- */

/* Status pills — claim stage, document state, payment state */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--success { background: #E7F4EE; color: #14664A; border-color: #BFE3D3; }
.status--info    { background: #E9F0FA; color: var(--info); border-color: #C6D8F0; }
.status--warning { background: #FBF4E9; color: var(--warning); border-color: #E6CDA6; }
.status--danger  { background: #FBEBEA; color: var(--danger); border-color: #F0C9C6; }
.status--neutral { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border-2); }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.label { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--text-body);
  background: var(--white);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--accent-300); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.help  { font-size: 0.85rem; color: var(--text-muted); }
.error { font-size: 0.85rem; font-weight: 600; color: var(--danger); }

/* Inline messages */
.note {
  display: flex;
  gap: 12px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border-2);
  background: var(--surface-2);
  font-size: 0.93rem;
}
.note--success { border-left-color: var(--success); background: #F2FAF6; }
.note--info    { border-left-color: var(--info);    background: #F2F6FC; }
.note--warning { border-left-color: var(--warning); background: #FDF8F1; }
.note--danger  { border-left-color: var(--danger);  background: #FDF4F3; }

/* --------------------------------------------------------------------------
   19. UTILITIES
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-muted { color: var(--text-muted); }
.measure { max-width: 62ch; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__grid { gap: var(--space-4); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .insight { gap: var(--space-4); }
}

@media (max-width: 960px) {
  :root { --space-6: 76px; }
  .hero { padding: var(--space-5) 0; }
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "actions" "checker" "points";
    row-gap: var(--space-3);
  }
  .hero h1 { max-width: 20ch; }
  .hero__lede { margin-bottom: 0; }
  .hero__points { margin-bottom: 0; }
  .checker { margin-left: 0; max-width: 100%; }
  .faq-layout__intro { position: static; }
  .trust-strip__grid { grid-template-columns: 1fr 1fr; }
  .steps-grid, .grid-3, .trust-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .handles { grid-template-columns: 1fr 1fr; }
  .feature-grid { gap: var(--space-3); }
  .insight { grid-template-columns: 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-3); }
  .rail { grid-template-columns: 1fr 1fr; gap: var(--space-3); text-align: left; }
  .rail::before { display: none; }
  .rail__node { text-align: left; }
}

/* Page lock + backdrop while the mobile menu is open.
   While <body> is position:fixed the sticky header loses its scroll context and
   would render at its document position (i.e. off-screen if the visitor had
   scrolled), taking the open menu with it. Pinning the header for the duration
   keeps both on screen. */
body.nav-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body.nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.nav-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 80;
  background: rgba(6, 15, 38, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease);
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .nav-backdrop { display: none; } }

/* Compact nav now triggers at <1024px. Activating the reserved "Log in"
   control gives the desktop nav a 6th item, which wrapped the header at
   768px (116.5px tall). Raising this one breakpoint to the site's existing
   1023.98px step keeps the nav on a single line at every width. */
@media (max-width: 1023.98px) {
  .main-nav__links { display: none; }
  .main-nav.is-open .main-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    z-index: 90;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding-left: calc(var(--space-2) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--space-2) + env(safe-area-inset-right, 0px));
    padding: var(--space-1) var(--space-2) var(--space-2);
    gap: 0;
  }
  /* 13px + 13px padding around an 18px line keeps every row at 44px. */
  .main-nav.is-open .main-nav__links a {
    padding: 13px 12px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }
  .main-nav.is-open .main-nav__links li + li { border-top: 1px solid var(--border); }
  .main-nav.is-open .main-nav__links li:has(.btn) { border-top: 0; }
  .main-nav.is-open .main-nav__links a.btn {
    margin-left: 0;
    margin-top: var(--space-2);
    padding: 13px 22px;
    border-radius: var(--radius-pill);
  }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  :root { --space-5: 48px; --space-6: 64px; }
  .section { padding: var(--space-6) 0; }
  .trust-strip__grid { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3) 0; }
  .steps-grid, .grid-3, .grid-4, .trust-grid, .rail, .handles, .feature-grid { grid-template-columns: 1fr; }

  /* Three full-width visuals would dominate a phone screen. Native CSS
     scroll-snapping turns them into a compact swipeable strip that bleeds to
     the screen edge. No JavaScript, no library. */
  .showcase {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--space-3);
    padding: 0 var(--space-3) var(--space-2);
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .showcase__tile { flex: 0 0 76%; scroll-snap-align: start; }
  .showcase__tile:first-child { grid-column: auto; }
  .showcase__tile .showcase__media,
  .showcase__tile:first-child .showcase__media { aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .suitability-box { columns: auto; padding: var(--space-3); }
  .suitability-box ul { columns: auto; }
  .checker { padding: var(--space-3); border-radius: var(--radius-lg); }
  .hero h1 { font-size: 1.82rem; letter-spacing: -0.028em; margin-bottom: var(--space-2); }
  .hero__lede { font-size: 1rem; line-height: 1.48; }
  .hero__points { gap: 6px var(--space-2); font-size: 0.9rem; }
  .hero__points li { font-size: 0.9rem; }
  .hero__actions .btn { width: 100%; }
  .insight__actions .btn { width: 100%; }
  .handles__cta .btn { width: 100%; }
  .final-cta { padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg); }
  .final-cta .btn { width: 100%; }
  .coming-soon { grid-template-columns: 1fr; padding: var(--space-3); }
  .legal-content { padding-left: var(--space-3); padding-right: var(--space-3); }
}

@media (max-width: 430px) {
  body.cp-launcher-managed .sticky-cta__text { display: none; }
  body.cp-launcher-managed .sticky-cta .btn { flex: 1; }
}

@media (max-width: 380px) {
  .brand { font-size: 1.02rem; }
  .sticky-cta__text { display: none; }
  .sticky-cta .btn { flex: 1; }
}

/* ==========================================================================
   Claim Pilot Assistant — chat widget

   Mobile layout (real-phone retest, round 2): the round-1 mobile fix was
   rejected because the launcher showed literal "chat" text, the intro and
   suggested questions stayed frozen above the conversation, and the panel
   floated as a small card with the page visible around it. This rewrite
   restructures the panel around a single scrollable .cp-chat__transcript
   region (intro, disclaimer, suggestions, messages, footer links) between
   a fixed header and a fixed composer, and turns the mobile panel into a
   near-full-screen app sheet. Desktop panel geometry (floating card,
   bottom-right) is unchanged.
   ========================================================================== */

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

html, body { overflow-x: hidden; }

html.cp-chat-lock {
     overflow: hidden;
     overscroll-behavior: none;
}
body.cp-chat-lock {
     overflow: hidden;
     overscroll-behavior: none;
     width: 100%;
}

.cp-chat__launcher {
     position: fixed;
     right: var(--space-3);
     bottom: var(--space-3);
     width: 56px;
     height: 56px;
     min-width: 44px;
     min-height: 44px;
     border-radius: 999px;
     background: var(--navy);
     color: var(--white);
     border: none;
     box-shadow: var(--shadow-md);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 1000;
}
.cp-chat__launcher:hover { background: var(--navy-light); }
.cp-chat__launcher:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }
.cp-chat__launcher-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
}
.cp-chat__launcher-icon svg { width: 26px; height: 26px; }

.cp-chat__panel {
     position: fixed;
     right: var(--space-3);
     bottom: calc(var(--space-3) + 68px);
     width: 360px;
     max-width: calc(100vw - 32px);
     max-height: min(600px, 75vh);
     background: var(--white);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-md);
     border: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     z-index: 1001;
     min-width: 0;
     box-sizing: border-box;
}
.cp-chat__panel[hidden] {
     display: none;
}

.cp-chat__header {
     background: var(--navy);
     color: var(--white);
     padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex: 0 0 auto;
}
.cp-chat__title { color: var(--white); margin: 0; font-size: 1rem; }
.cp-chat__header-btns { display: flex; gap: var(--space-1); }
.cp-chat__icon-btn {
     min-width: 44px;
     min-height: 44px;
     width: 36px;
     height: 36px;
     border-radius: var(--radius-sm);
     border: none;
     background: transparent;
     color: var(--white);
     font-size: 20px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
}
.cp-chat__icon-btn:hover { background: rgba(255,255,255,0.15); }
.cp-chat__icon-btn:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }

.cp-chat__transcript {
     flex: 1 1 auto;
     min-height: 0;
     min-width: 0;
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     display: flex;
     flex-direction: column;
}

.cp-chat__intro {
     padding: var(--space-2) var(--space-3) 0;
     flex: 0 0 auto;
}
.cp-chat__intro-text { margin: 0 0 var(--space-1); font-size: 0.9rem; }
.cp-chat__disclaimer {
     margin: 0 0 var(--space-2);
     font-size: 0.78rem;
     color: var(--text-muted);
     border-left: 3px solid var(--border);
     padding-left: var(--space-1);
}

.cp-chat__suggestions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-1);
     padding: 0 var(--space-3) var(--space-2);
     flex: 0 0 auto;
}
.cp-chat__suggestions[hidden] {
     display: none;
}
.cp-chat__chip {
     border: 1px solid var(--border);
     background: var(--grey);
     border-radius: 999px;
     padding: 6px 12px;
     font-size: 0.78rem;
     cursor: pointer;
     color: var(--text-body);
     min-height: 44px;
}
.cp-chat__chip:hover { background: var(--pale-blue); }
.cp-chat__chip:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }

.cp-chat__messages {
     flex: 0 0 auto;
     padding: var(--space-2) var(--space-3);
     display: flex;
     flex-direction: column;
     gap: var(--space-1);
}
.cp-chat__msg {
     max-width: 90%;
     padding: 8px 12px;
     border-radius: var(--radius-md);
     font-size: 0.88rem;
     line-height: 1.4;
     word-wrap: break-word;
     overflow-wrap: anywhere;
     min-width: 0;
}
.cp-chat__msg--assistant {
     background: var(--grey);
     color: var(--text-body);
     align-self: flex-start;
}
.cp-chat__msg--user {
     background: var(--navy);
     color: var(--white);
     align-self: flex-end;
}
.cp-chat__msg--notice {
     background: var(--pale-blue);
     color: var(--text-body);
     align-self: center;
     font-size: 0.8rem;
     text-align: center;
}
.cp-chat__msg a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

.cp-chat__footer {
     display: flex;
     justify-content: space-between;
     gap: var(--space-2);
     padding: var(--space-2) var(--space-3);
     border-top: 1px solid var(--border);
     margin-top: var(--space-1);
     flex: 0 0 auto;
}
.cp-chat__footer-link {
     font-size: 0.78rem;
     color: var(--navy);
     text-decoration: underline;
     min-height: 44px;
     display: flex;
     align-items: center;
     overflow-wrap: anywhere;
     min-width: 0;
     max-width: 100%;
}

.cp-chat__turnstile {
     padding: 0 var(--space-3) var(--space-2);
     flex: 0 0 auto;
     width: 100%;
     overflow: hidden;
     box-sizing: border-box;
}

.cp-chat__form {
     display: flex;
     gap: var(--space-1);
     padding: var(--space-2) var(--space-3);
     border-top: 1px solid var(--border);
     flex: 0 0 auto;
     flex-wrap: nowrap;
     min-width: 0;
}
.cp-chat__input {
     flex: 1 1 auto;
     min-width: 0;
     min-height: 44px;
     padding: 8px 12px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: var(--font-sans);
     font-size: 0.9rem;
}
.cp-chat__input:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }
.cp-chat__send {
     flex: 0 0 auto;
     min-width: 64px;
     min-height: 44px;
     border: none;
     border-radius: var(--radius-sm);
     background: var(--navy);
     color: var(--white);
     font-weight: 600;
     cursor: pointer;
}
.cp-chat__send:hover { background: var(--navy-light); }
.cp-chat__send:disabled { opacity: 0.6; cursor: default; }
.cp-chat__send:focus-visible { outline: 3px solid #7fb2ff; outline-offset: 2px; }

@media (max-width: 640px) {
     .cp-chat__panel {
            left: 0;
            right: 0;
            top: var(--chat-viewport-offset, 0px);
            bottom: auto;
            width: auto;
            max-width: 100%;
            max-height: none;
            height: 100vh;
            height: 100dvh;
            height: var(--chat-visible-height, 100dvh);
            border-radius: 16px 16px 0 0;
            border-left: none;
            border-right: none;
            border-bottom: none;
            padding-top: env(safe-area-inset-top, 0px);
     }
     .cp-chat__launcher {
            right: calc(var(--space-2) + env(safe-area-inset-right, 0px));
            bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
     }
     .cp-chat__form {
            padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
            padding-left: calc(var(--space-3) + env(safe-area-inset-left, 0px));
            padding-right: calc(var(--space-3) + env(safe-area-inset-right, 0px));
     }
     .cp-chat__footer {
            padding-left: calc(var(--space-3) + env(safe-area-inset-left, 0px));
            padding-right: calc(var(--space-3) + env(safe-area-inset-right, 0px));
     }
     .cp-chat__header,
     .cp-chat__intro,
     .cp-chat__suggestions,
     .cp-chat__messages,
     .cp-chat__turnstile,
     .cp-chat__form {
            max-width: 100%;
            box-sizing: border-box;
     }
}

/* --------------------------------------------------------------------------
   20. CLAIM ADVANCE — feature-specific (coming-soon validation page)
   Scoped under .ca-* / .nav-claim-advance. Built entirely from the generic
   tokens and primitives above (.badge, .section--navy, .field, .label,
   .input, .select, .notice, .note, .opt/.opt-list, .btn). Nothing here is a
   marketing-homepage-only selector, so this block is itself safe to reuse
   elsewhere if a future page needs the same "coming soon" form pattern —
   but it is still feature-specific, not a generic design-system primitive,
   so it stays in its own labelled section rather than folding into the
   primitives above.
   -------------------------------------------------------------------------- */

.nav-claim-advance { display: inline-flex; align-items: center; gap: 8px; }

/* Hero spacing rhythm (2026-08-25 refinement): the hero previously carried
   no section-level padding at all (unlike every other .section on the site)
   and its internal margins were all on the tight --space-2/--space-3 steps.
   This block gives it the same breathing room as the rest of the design
   system — reusing existing --space-* tokens throughout, no new scale.

   Note: the box-model/typography overrides below are written as the compound
   selector ".ca-hero .ca-hero__lede" / ".ca-hero .ca-hero__note" rather than
   the single class alone. This isn't stylistic — the generic
   ".section__head p" rule elsewhere in this file (see "2. LAYOUT PRIMITIVES")
   sets margin-bottom:0, line-height:1.5 and color:var(--text-muted) at equal-
   or-higher specificity than a single ".ca-hero__lede" class, so those three
   properties were silently being overridden by it even in the original
   ddc912e version of this file (color was already authored there as
   var(--text-on-dark-muted) — correct for a navy background — but never
   actually rendered, because the generic rule was winning the cascade). The
   compound selector is the minimal fix that lets this hero's own spacing
   AND its already-intended text colour apply as written. No colour value
   was changed here — only its ability to take effect was restored. */
/* Hero background (2026-08-26 visual-polish pass): the homepage hero's
   background is not a flat navy fill — it is var(--navy) plus a two-radial-
   gradient decorative overlay (see ".hero" / ".hero::before" / ".hero > *"
   in "7. HERO" above). .ca-hero previously inherited only the flat colour
   from the shared .section--navy class, so the exact token matched but the
   richer, decorative treatment did not. The rule below reuses the identical
   gradient values, positions and opacities from .hero::before verbatim — no
   approximation — so the two heroes are visually identical, not merely the
   same base colour. Scoped to .ca-hero specifically (not .section--navy
   generally), so the homepage's own unrelated .section--navy "journey"
   section is completely unaffected. */
.ca-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-6) 0;
}
.ca-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58rem 34rem at 88% -12%, rgba(10,108,122,0.42), transparent 62%),
    radial-gradient(44rem 30rem at 6% 104%, rgba(34,57,122,0.55), transparent 60%);
  pointer-events: none;
}
.ca-hero > * { position: relative; }
.ca-hero__badge { margin-bottom: var(--space-3); }
.ca-hero__title { color: var(--white); margin-bottom: var(--space-3); }
.ca-hero .ca-hero__lede {
  font-size: var(--step-1);
  /* 1.5 matches .hero__lede on the homepage exactly. The two elements do the
     same job at the same size, so they must lead the same; the previous 1.65
     was loose enough to read as a different page's type system. */
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  max-width: 680px; /* comfortable reading measure, replacing the inherited 56ch */
  margin: 0 auto var(--space-4);
}
.ca-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-4); }
.ca-hero .ca-hero__note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .ca-hero__actions .btn { width: 100%; }
}

/* Uses the site's existing --container-narrow token (also 760px) rather than
   a hardcoded value, so the form width is provably drawn from the same
   design-system scale as the rest of the site, not a page-specific guess.

   The section head and the market-research notice above the form are pinned to
   the SAME token (2026-08-26 review). Previously both sat at 78ch, which
   computes to 749px against the form's 760px — a 6px-per-side mismatch, just
   large enough to read as three stacked blocks that almost line up rather than
   one column. One width for the whole block removes it. */
.ca-form { max-width: var(--container-narrow); margin: 0 auto; }
#register-interest .section__head--center,
.notice--form { max-width: var(--container-narrow); margin-inline: auto; }
/* Bottom padding is one --space-3 short of the top on purpose: every card's
   last child is a .field carrying margin-bottom:var(--space-3), so 16px + 24px
   lands the visible gap at exactly var(--space-4), matching the top. Without
   this the cards read bottom-heavy (40px top vs 64px bottom). */
.ca-form__section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) - var(--space-3));
  margin: 0 0 var(--space-4);
}
/* A <legend> is rendered by the browser straddling the fieldset's top border,
   which on a bordered card reads as an unstyled browser default rather than a
   designed section title. Floating it (the standard technique) takes it out of
   that special rendering and makes it a normal full-width heading INSIDE the
   card, while keeping the <fieldset>/<legend> semantics that name the group for
   assistive technology. The adjacent-sibling clear puts the first field below
   the float. */
.ca-form__section legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: 0.78rem;
  font-weight: 800;
  /* letter-spacing matches .eyebrow (0.10em) exactly, for the same
     uppercase-label typographic treatment used everywhere else on the site */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.ca-form__section legend + * { clear: both; }
.ca-form__section[data-ca-conditional] { border: none; background: none; padding: 0; margin: 0; }

/* Two-column field pairing (2026-08-26 density refinement): on a wide-enough
   viewport, logically-paired fields (name/email, claim-type/value, and so on)
   sit side by side instead of every field taking its own full-width row. The
   breakpoint below which this collapses back to one column (~780px) was
   chosen so the two tablet/mobile QA widths already used across this site
   (834px and 768px) land cleanly either side of it. Full-width fields
   (conditionally-shown claim reference, the applicant-type question) are
   left outside .field-grid on purpose and are unaffected. */
.field-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-3); }
@media (min-width: 781px) {
  .field-grid { grid-template-columns: 1fr 1fr; }
}

/* Claim Advance two-column rows: align the paired controls without reserving
   space that short labels do not need. Each .field takes two rows of the parent
   grid, so a label that wraps sizes its whole row and its neighbour's control
   lands on the same baseline; where both labels are one line nothing is added.
   Scoped to the Claim Advance form (.ca-form is on claim-advance.html alone),
   only above the two-column breakpoint, and only where subgrid is supported —
   elsewhere the fields simply keep their existing stacked flex layout. */
@media (min-width: 781px) {
  @supports (grid-template-rows: subgrid) {
    .ca-form .field-grid > .field {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      row-gap: 6px;
      align-content: start;
    }
  }
}

.field--checkbox { flex-direction: row; }
.ca-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.ca-checkbox input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.ca-form__submit { text-align: center; }
.ca-form__submit .note { text-align: left; margin-bottom: var(--space-3); }
.ca-form__submit .btn { width: 100%; max-width: 340px; }

/* Compact willingness radio list: the shared .opt/.opt-list primitives (also
   used by the homepage's two-question checker) are left untouched; this
   modifier only reduces the vertical padding so a five-point scale stays
   compact.
   Deliberately a single column (2026-08-26 review): laying five options across
   two columns produced a 2 + 2 + 1 block in which the fifth option — the most
   negative answer on the scale — was rendered at double width and so carried
   the most visual weight of the five. A ranked scale has to present every
   point at equal weight to be read as a scale and to avoid biasing the answer,
   and a single column is also what the homepage claim checker uses for the
   same control, so this now matches the homepage rather than diverging. */
.opt-list--compact .opt { padding: 12px 18px; font-size: 0.94rem; }

/* Five-step process grid: the shared .steps-grid primitive (also used by the
   homepage's four-step "How it works") is left untouched at 4 columns; this
   modifier only applies above the existing 960px tablet breakpoint. Below
   960px the existing .steps-grid 2-column/1-column rules already apply
   correctly and are not touched.

   Layout: 3 across, then 2 across, on a 6-column track — steps 1/2/3 span 2
   tracks each, steps 4/5 span 3 each.

   Why not centre the second row (2026-08-26 review): spanning 2 tracks and
   offsetting by one, which centres steps 4/5 under steps 1-3, measured as
   correctly centred but rendered badly — the second row's cards began and
   ended at horizontal positions that matched no edge in the row above, so the
   block read as an indented staircase rather than a process diagram. Spanning
   3 tracks each instead makes the second row exactly as wide as the first, so
   both rows share the same outer edges and the whole block resolves to a
   clean rectangle. The step's own ::before rule length differs between rows
   either way; the outer alignment is what the eye actually reads. */
@media (min-width: 961px) {
  .steps-grid--5 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .steps-grid--5 .step:nth-child(1) { grid-column: 1 / span 2; }
  .steps-grid--5 .step:nth-child(2) { grid-column: 3 / span 2; }
  .steps-grid--5 .step:nth-child(3) { grid-column: 5 / span 2; }
  .steps-grid--5 .step:nth-child(4) { grid-column: 1 / span 3; }
  .steps-grid--5 .step:nth-child(5) { grid-column: 4 / span 3; }
}
/* Tablet range (2026-08-26 review): between 641px and 960px the shared
   .steps-grid rule is 2 columns, which for five items lays out as 2 + 2 + 1 —
   the same orphaned fifth step that was corrected on desktop, just one column
   narrower. Spanning the last step across both columns closes the empty cell;
   as the closing step of the sequence, a full-width final row reads as a
   conclusion rather than a leftover. Below 641px the grid is already a single
   column and nothing is orphaned. */
@media (min-width: 641px) and (max-width: 960px) {
  .steps-grid--5 .step:nth-child(5) { grid-column: 1 / -1; }
}

[data-ca-conditional] { display: none; }
[data-ca-conditional].is-visible { display: block; }


/* ======================================================================
   CONSUMER UX REFRESH - card / tile layer (1 October 2026)

   Additive. Colours come from the existing tokens, radii from --radius-*,
   shadows from --shadow-*. The hover motion below is already neutralised by
   the prefers-reduced-motion block earlier in this file, which flattens every
   transition on the site, so no separate guard is needed here.
   ====================================================================== */

/* Trust strip: three items rather than four, so it reads as one glance. */
.trust-strip__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards: the shared surface. .feature was a bare flex row; as a card it can
   carry the Good to know grid without a wall of text. Scoped to the --cards
   modifier so the feature rows inside .insight keep their lighter treatment. */
.feature-grid--cards { gap: var(--space-3); }
.feature-grid--cards .feature {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature-grid--cards .feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}
.feature-grid--cards .feature__icon {
  background: var(--accent-soft);
  color: var(--accent-700);
  border-radius: var(--radius-md);
  flex: 0 0 auto;
}

/* One lead card in Good to know carries the message that matters most. Same
   card, a tint and a larger icon from the same tokens - not a different style. */
.feature-grid--cards .feature--lead {
  background: var(--accent-soft);
  border-color: var(--accent-300);
  grid-column: 1 / -1;
}
.feature-grid--cards .feature--lead .feature__icon {
  width: 48px; height: 48px;
  background: var(--white);
  color: var(--accent-700);
}
.feature-grid--cards .feature--lead .feature__icon svg { width: 25px; height: 25px; }
.feature-grid--cards .feature--lead h3 { font-size: 1.1rem; }
.feature-grid--cards .feature--lead p { color: var(--text-secondary); }
/* Good to know runs three across under its full-width lead card, so the six
   facts land as 1 + 3 + 2 rather than leaving one stranded on its own row. */
/* Six cards over a six-column track: the lead spans the row, the next three
   take two columns each, and the final two take three each so they divide the
   last row evenly instead of leaving an empty slot. */
#good-to-know .feature-grid--cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#good-to-know .feature-grid--cards .feature { grid-column: span 2; }
#good-to-know .feature-grid--cards .feature--lead { grid-column: 1 / -1; }
#good-to-know .feature-grid--cards .feature--lead > div { max-width: 68ch; }
#good-to-know .feature-grid--cards .feature:nth-child(5),
#good-to-know .feature-grid--cards .feature:nth-child(6) { grid-column: span 3; }
@media (max-width: 1024px) {
  #good-to-know .feature-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #good-to-know .feature-grid--cards .feature,
  #good-to-know .feature-grid--cards .feature:nth-child(5),
  #good-to-know .feature-grid--cards .feature:nth-child(6) { grid-column: auto; }
}
@media (max-width: 860px) {
  .feature-grid--cards .feature--lead { grid-column: auto; }
  #good-to-know .feature-grid--cards { grid-template-columns: 1fr; }
}

/* Claim-type tiles already had the card surface; they gain the same lift so
   the two grids feel like one system. */
.claim-type {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.claim-type:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}

/* Steps: a soft tinted tile instead of a bare column, with the number sitting
   on the tint rather than floating. */
.steps-grid--tiles .step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  padding-top: var(--space-3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.steps-grid--tiles .step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.steps-grid--tiles .step::before { display: none; }
.steps-grid--tiles .step__number { margin-bottom: 10px; }

/* Claim Advance teaser: deliberately a single compact row, never a product
   section. Subordinate by size, not by wording. */
#claim-advance-teaser .coming-soon {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
/* .badge--planned is coloured for the navy Claim Advance hero; on this light
   surface it needs the readable accent, not the on-dark tint. */
#claim-advance-teaser .badge--planned {
  background: var(--accent-soft);
  color: var(--accent-700);
  border-color: var(--accent-300);
}
#claim-advance-teaser .coming-soon h3 { font-size: 1.02rem; }
#claim-advance-teaser .coming-soon p { max-width: 70ch; }
@media (max-width: 640px) {
  #claim-advance-teaser .coming-soon { grid-template-columns: 1fr; }
}

/* Legal pages: readability only. No markup, no text, no navigation - the
   canonical content and its hash gates are untouched by design. */
.legal-content { max-width: 74ch; }
.legal-content h2 {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.legal-content h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-content h3 { margin-top: var(--space-4); }
.legal-content p, .legal-content li { line-height: var(--lh-body); }
.legal-content li + li { margin-top: 6px; }

@media (max-width: 860px) {
  .trust-strip__grid--3 { grid-template-columns: 1fr; }
}

/* Two-across steps, for the narrower measure of the Referral Partner page,
   where four across wrapped to three or four words a line. */
.steps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .steps-grid--2 { grid-template-columns: 1fr; } }

/* Referral module: two benefits side by side, the third across the full width,
   so three items do not leave an orphan half-row on desktop. */
#referral-partners .feature-grid .feature:nth-child(3) { grid-column: 1 / -1; }
/* Below 640px the grid is already one column, so the span is only released
   there - at 768 it would otherwise leave the same orphan it was added to fix. */
@media (max-width: 640px) {
  #referral-partners .feature-grid .feature:nth-child(3) { grid-column: auto; }
}

/* FAQ category row: pills that jump to the group headings. */
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-3) 0 var(--space-4); }
.faq-nav__pill {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.faq-nav__pill:hover { background: var(--accent-soft); border-color: var(--accent-300); color: var(--accent-700); }
.faq-nav__pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .faq-nav { gap: 10px; }
  .faq-nav__pill { padding: 10px 15px; font-size: 0.9rem; min-height: 44px; }
}