/* Injured Worker Line. Tokens from design.md. Light theme only, system fonts, single 480px column. */
:root {
  --ink: #13263F; --ink-soft: #4A5B70; --brand: #1B4F8A; --brand-tint: #E8F0FA;
  --cta: #C2410C; --cta-press: #9A3412; --surface: #FFFFFF; --page: #F4F6F9;
  --line: #CBD3DD; --error: #B42318; --success: #1E7A4C;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 12px; --tap: 60px; --gap: 12px; --gutter: 16px; --maxw: 480px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font: 18px/1.5 var(--font); }
img, svg { max-width: 100%; }
a { color: var(--brand); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 760px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 36px; width: auto; }
.call-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 2px solid var(--brand); border-radius: 999px; color: var(--brand); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.call-num { display: none; }
@media (min-width: 440px) { .call-num { display: inline; } .call-label { display: none; } }

/* Homepage top banner (replaces the logo bar, like Settlement Route) */
.banner { background: var(--brand); color: #fff; }
.banner .hl { color: #F5B942; font-style: italic; font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.banner p { padding-block: 14px; text-align: center; font-weight: 800; font-size: 19px; line-height: 1.3; text-wrap: balance; }
@media (min-width: 760px) { .banner p { font-size: 24px; padding-block: 18px; } }

/* Hero */
.hero { padding-block: 20px 4px; display: flex; flex-direction: column; gap: 6px; }
.hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.hero .sub { color: var(--ink-soft); font-size: 17px; }
body.quiz-started .hero, body.quiz-started .after-quiz, body.quiz-started .banner { display: none; }
/* Home: banner + headline + quiz fill at least one screen, so the footer always starts below the fold.
   Spare height goes above the headline (scaled to the screen, not the step), so the card never jumps between questions. */
.fold { min-height: 100svh; display: flex; flex-direction: column; }
.home { flex: 1 0 auto; padding-bottom: 16px; }
.home .landing { padding-top: clamp(0px, calc((100svh - 700px) * .4), 120px); }

/* Quiz card */
.quiz-section { padding-block: 14px 8px; }
.quiz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 2px 10px rgba(19, 38, 63, .06); }
.quiz-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-bottom: 8px; }
.back { background: none; border: 0; padding: 6px 8px 6px 0; color: var(--ink-soft); font: 500 15px var(--font); cursor: pointer; }
.back:hover { color: var(--ink); }
.restoring #stage { visibility: hidden; }
.step-label { color: var(--ink-soft); font-size: 15px; margin-left: auto; font-variant-numeric: tabular-nums; }
.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress .bar { height: 100%; background: var(--brand); border-radius: 999px; width: 10%; transition: width .2s ease; }
.question { font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.hint { color: var(--ink-soft); font-size: 16px; margin: -8px 0 16px; }
.opts { display: flex; flex-direction: column; gap: var(--gap); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--tap); padding: 14px 16px; text-align: left; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); font: 600 19px/1.3 var(--font); cursor: pointer; transition: border-color .12s, background-color .12s; -webkit-tap-highlight-color: transparent; }
.opts.compact .opt { min-height: 52px; padding-block: 11px; font-size: 18px; }
.opt svg { flex: none; color: var(--brand); visibility: hidden; }
@media (hover: hover) { #stage:not(.no-hover) .opt:hover { border-color: #8A9AAE; background: #FAFBFD; } }
.opt.selected { border-color: var(--brand); background: var(--brand-tint); }
.opt.selected svg { visibility: visible; }
.step { animation: step-in .18s ease-out; }
.step.reverse { animation-name: step-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes step-back { from { opacity: 0; transform: translateX(-14px); } }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 600; font-size: 16px; }
.field input { width: 100%; min-height: 56px; padding: 12px 14px; font: 18px var(--font); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); }
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.err { color: var(--error); font-size: 15px; min-height: 0; }
.err:empty { display: none; }
.suggest { font-size: 16px; color: var(--ink-soft); }
.suggest button { background: none; border: 0; padding: 0; color: var(--brand); font: 700 16px var(--font); text-decoration: underline; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 14px 18px; border: 0; border-radius: var(--radius); background: var(--cta); color: #fff; font: 700 19px var(--font); text-decoration: none; cursor: pointer; }
.btn:active { background: var(--cta-press); }
.btn[disabled] { opacity: .7; cursor: progress; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.consent input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--brand); }
.reassure { color: var(--ink-soft); font-size: 15px; margin-top: 12px; text-align: center; text-wrap: balance; }
.reassure svg { color: var(--ink-soft); display: inline-block; vertical-align: -2px; margin-right: 4px; }
.form-msg { margin-top: 12px; font-size: 16px; color: var(--error); }
.form-msg:empty { display: none; }
.assure { margin-top: 14px; text-align: center; }
.assure ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 4px 14px; flex-wrap: wrap; }
.assure li { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.assure svg { flex: none; width: 22px; height: 22px; }
.assure p { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.disclosure { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.disclosure a { color: var(--ink-soft); }
.btn-secondary { background: var(--surface); color: var(--brand); border: 2px solid var(--brand); }
.btn-secondary:active { background: var(--brand-tint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Content sections */
section.block { padding-block: 28px; }
section.block h2 { font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.steps svg, .tile svg, .contact-item svg, .faq-item > svg { display: block; }
.steps li, .tile { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.steps h3, .tile h3 { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.steps p, .tile p { color: var(--ink-soft); font-size: 16px; }
.tiles { display: grid; gap: 16px; }
.cta-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; }

/* Content pages */
.page { padding-block: 28px 40px; }
.page h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.page .lede { color: var(--ink-soft); font-size: 18px; margin-bottom: 24px; }
.page h2 { font-size: 21px; font-weight: 800; margin: 28px 0 8px; }
.page p, .page li { font-size: 17px; }
.page p + p { margin-top: 10px; }
.page ul { padding-left: 1.2em; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.page .meta { color: var(--ink-soft); font-size: 15px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.contact-list { display: grid; gap: 14px; margin-top: 8px; }
.contact-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.contact-item strong { display: block; font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.contact-item a, .contact-item span { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }

/* FAQ list: filter + sort */
.faq-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 16px var(--font); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.sort { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-soft); }
.sort select { min-height: 40px; padding: 4px 10px; font: 16px var(--font); border: 2px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.faq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.faq-item h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.faq-item p { font-size: 16px; color: var(--ink-soft); }
.faq-item .tag { font-size: 13px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.faq-count { font-size: 15px; color: var(--ink-soft); }

/* Thank you */
.thanks { text-align: center; align-items: center; }
.thanks .big-check { width: 72px; height: 72px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; }
.caller { font-size: 28px; font-weight: 800; letter-spacing: .01em; user-select: all; font-variant-numeric: tabular-nums; }

/* Footer: compact and muted, like competitor funnels. Nothing here should compete with the form. */
.site-footer { border-top: 1px solid var(--line); padding-block: 20px 28px; margin-top: 32px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.footer-min { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 14px; }
.footer-links a, .footer-contact a { color: var(--ink-soft); }
.footer-contact { font-style: normal; }
.social { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 6px; }
.social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-soft); }
.legal { display: flex; flex-direction: column; gap: 8px; font-size: 12px; text-align: left; }
.legal a { color: var(--ink-soft); }
.legal-tag { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 12px; color: var(--ink); background: var(--surface); }

/* Tablet and desktop: still ONE centered column (like every competitor), just wider and larger,
   so the quiz stays the main element above the fold. */
@media (min-width: 760px) {
  :root { --maxw: 640px; --gutter: 24px; }
  .hero { padding-block: 36px 8px; gap: 8px; }
  .hero h1 { font-size: 34px; letter-spacing: -.015em; }
  .hero .sub { font-size: 19px; }
  .quiz-section { padding-block: 18px 8px; }
  .quiz { padding: 28px 32px 32px; }
  .question { font-size: 26px; }
  .opt { min-height: 64px; font-size: 20px; }
  .opts.compact .opt { min-height: 54px; }
  .page.wrap { max-width: 720px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .thanks { max-width: 560px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Tall phones (e.g. iPhone Pro Max): a bigger, roomier form instead of empty space */
@media (max-width: 759px) and (min-height: 780px) {
  .hero h1 { font-size: 30px; }
  .hero { padding-bottom: 8px; }
  .question { font-size: 26px; margin-bottom: 20px; }
  .opts { gap: 12px; }
  .opt { min-height: 68px; font-size: 21px; }
  .opts.compact .opt { min-height: 56px; }
  .quiz { padding: 20px; }
}