@font-face { font-family: Inter; src: url('/assets/fonts/inter-latin-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Fraunces; src: url('/assets/fonts/fraunces-latin-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; --green: #174c47; --deep: #0e3b37; --cream: #f5f1e8; --paper: #fffdf8; --lime: #d5ed39; --ink: #172322; --muted: #4f5e5a; --line: #d9ded7; --warn: #963720; font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--cream); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 70% 0%, #fffdf8 0, transparent 30rem), var(--cream); }
button, input, textarea { font: inherit; }
button, label, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: inherit; }
.preview-banner { position: fixed; inset: 0 0 auto; z-index: 10; min-height: 28px; padding: 7px 16px; color: #dce8e5; background: var(--deep); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.logo { display: block; width: 145px; height: auto; }
.eyebrow { margin: 0 0 14px; color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 14px; font: 580 clamp(38px, 5vw, 68px)/.98 Fraunces, serif; letter-spacing: -.035em; color: var(--deep); }
h1:focus { outline: none; }
.display-subtitle { margin-bottom: 10px; font: 500 24px/1.25 Fraunces, serif; color: var(--green); }
.attribution { margin-bottom: 26px; color: var(--green); font-weight: 700; }
.lede { max-width: 700px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.welcome-shell { width: min(100% - 48px, 820px); margin: 0 auto; padding: 92px 0 72px; }
.welcome-shell header .logo { margin-bottom: 54px; }
.timeline { display: grid; margin: 50px 0 36px; padding: 0; list-style: none; counter-reset: phase; }
.timeline li { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 18px; min-height: 88px; }
.timeline li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 39px; bottom: 0; width: 1px; background: #cbd3cb; }
.timeline li > span { z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #b9c4bb; border-radius: 50%; background: var(--cream); color: var(--green); font-weight: 800; }
.timeline li.done > span { border-color: var(--deep); color: white; background: var(--deep); }
.timeline li.current > span { border-color: var(--lime); box-shadow: 0 0 0 4px #d5ed3945; }
.timeline small { display: block; margin: 1px 0 3px; color: #4d5c58; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.timeline strong { display: block; margin-bottom: 4px; color: var(--deep); font-size: 15px; }
.timeline p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.trust, .ready-card, .app-card, .next-card { border-radius: 14px; }
.trust { display: grid; grid-template-columns: 28px 1fr; gap: 14px; margin: 26px 0 16px; padding: 20px 22px; color: #eef5ef; background: var(--green); }
.trust > span { color: var(--lime); }
.trust strong { font-size: 14px; }
.trust p { margin: 5px 0 0; color: #dce8e3; font-size: 13px; line-height: 1.5; }
.ready-card { padding: 18px 22px; border: 1px solid #d9ded5; background: #ffffff88; }
.ready-card strong { color: var(--deep); }
.ready-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.welcome-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; }
.primary, .secondary { min-height: 48px; padding: 0 26px; border-radius: 6px; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.primary { border: 1px solid var(--lime); color: #152521; background: var(--lime); box-shadow: 0 8px 24px #174c4718; }
.primary:hover { background: #c9e12d; }
.secondary { border: 1px solid #b8c2ba; color: var(--green); background: transparent; }
.primary:focus-visible, .secondary:focus-visible, .rail button:focus-visible, input:focus-visible, textarea:focus-visible, .dropzone:focus-within { outline: 3px solid #174c4755; outline-offset: 3px; }
.save-status { color: #52615d; font-size: 12px; }
.save-status.failed { color: var(--warn); }
.intake-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; padding-top: 28px; }
.connected .intake-shell { padding-top: 0; }
.rail { position: sticky; top: 28px; height: calc(100vh - 28px); overflow: auto; padding: 36px 26px 28px; color: #e9f0ec; background: var(--deep); }
.connected .rail { top: 0; height: 100vh; }
.rail .logo { width: 120px; height: 24px; margin-bottom: 30px; }
.rail-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-bottom: 30px; color: #d0dcd8; font-size: 12px; font-weight: 750; }
.rail-progress > div { height: 3px; overflow: hidden; border-radius: 3px; background: #2e5a55; }
.rail-progress i { display: block; height: 100%; background: var(--lime); }
.rail-progress-step-1 { width: 7.692%; }
.rail-progress-step-2 { width: 15.385%; }
.rail-progress-step-3 { width: 23.077%; }
.rail-progress-step-4 { width: 30.769%; }
.rail-progress-step-5 { width: 38.462%; }
.rail-progress-step-6 { width: 46.154%; }
.rail-progress-step-7 { width: 53.846%; }
.rail-progress-step-8 { width: 61.538%; }
.rail-progress-step-9 { width: 69.231%; }
.rail-progress-step-10 { width: 76.923%; }
.rail-progress-step-11 { width: 84.615%; }
.rail-progress-step-12 { width: 92.308%; }
.rail-progress-step-13 { width: 100%; }
.rail section { margin-bottom: 24px; }
.rail h2 { margin: 0 0 8px; color: #aac0ba; font-size: 11px; letter-spacing: .13em; }
.rail button { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 5px; border: 0; border-radius: 5px; color: #d0ddd8; background: transparent; text-align: left; font-size: 12px; }
.rail button > .step-number { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #6f8c85; border-radius: 50%; font-size: 11px; }
.rail button[aria-current='step'] { color: white; background: #24534d; }
.rail button[aria-current='step'] > .step-number { border-color: var(--lime); color: var(--deep); background: var(--lime); }
.rail-help { margin: 32px 5px 0; color: #b7c9c4; font-size: 12px; line-height: 1.6; }
.step-shell { width: min(100% - 70px, 780px); margin: 0 auto; padding: 68px 0 72px; }
.step-top { display: flex; justify-content: space-between; margin-bottom: 72px; color: #53615d; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.step-shell h1 { font-size: clamp(42px, 5vw, 64px); }
.app-card { display: grid; grid-template-columns: 25px 1fr; gap: 12px; margin: 24px 0; padding: 15px 18px; border: 1px solid #d5ddd6; color: #40534f; background: #fffdf9; }
.app-card span { color: var(--green); font-size: 23px; }
.app-card p { margin: 0; font-size: 12px; line-height: 1.5; }
.hero { display: block; width: 100%; max-height: 260px; margin: 26px 0; border-radius: 16px; object-fit: cover; object-position: center; }
.trust-line { color: var(--green); font-size: 12px; font-weight: 700; }
form { margin-top: 38px; }
.field { display: block; margin: 0 0 28px; padding: 0; border: 0; }
.field > span, .field > strong, .field legend { display: block; margin-bottom: 9px; color: var(--deep); font-size: 13px; font-weight: 750; }
input:not([type='checkbox']):not([type='radio']), textarea { width: 100%; border: 1px solid #cdd6ce; border-radius: 7px; color: var(--ink); background: var(--paper); }
input:not([type='checkbox']):not([type='radio']) { height: 50px; padding: 0 14px; }
textarea { min-height: 118px; padding: 14px; resize: vertical; line-height: 1.5; }
input[readonly] { color: #5f6c68; background: #e9ece7 !important; }
.help { margin: 7px 0 0; color: #53615d; font-size: 12px; }
.field-counter { display: block; margin-top: 6px; color: #4c5b57; font-size: 12px; text-align: right; }
.date-parts { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; }
.date-parts label > span { display: block; margin-bottom: 5px; color: #52615d; font-size: 12px; }
.field-error { min-height: 18px; margin: 7px 0 0; color: var(--warn); font-size: 12px; font-weight: 700; }
.field-error:empty { display: none; }
.chips, .choice-row, .scale { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input, .choice-row input, .scale input { position: absolute; opacity: 0; pointer-events: none; }
.chips span, .choice-row span, .scale span { display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid #c7d1c9; border-radius: 999px; color: #374a45; background: #fffdf9; font-size: 12px; }
.chips input:focus-visible + span, .choice-row input:focus-visible + span, .scale input:focus-visible + span { outline: 3px solid #174c4755; outline-offset: 3px; }
.chips input:checked + span, .choice-row input:checked + span, .scale input:checked + span { border-color: var(--green); color: white; background: var(--green); }
.ranked span { min-width: 120px; }
.other { display: block; margin-top: 12px; }
.other > span { display: block; margin-bottom: 6px; color: #52615d; font-size: 12px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); }
.scale span { border-radius: 7px; text-align: center; }
.scale-labels { display: flex; justify-content: space-between; margin-top: 7px; color: #52615d; font-size: 12px; }
.check { display: grid; grid-template-columns: 24px 1fr; min-height: 44px; align-items: center; gap: 11px; margin: 12px 0; color: #3d504c; font-size: 13px; line-height: 1.5; }
.check input { width: 22px; height: 22px; accent-color: var(--green); }
.consent { padding: 18px; border: 1px solid #c9d3ca; border-radius: 9px; background: #fffdf9; }
.upload { padding: 18px; border: 1px solid #d0d8d1; border-radius: 12px; background: #fffdf9; }
.upload-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.upload-heading > span { color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .06em; }
.dropzone { position: relative; display: grid; place-items: center; min-height: 118px; padding: 20px; border: 1px dashed #9eafa3; border-radius: 8px; color: #53635f; text-align: center; }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone b { color: var(--green); }
.dropzone span { margin-top: 5px; font-size: 12px; }
.file-list { margin: 14px 0 0; padding: 0; list-style: none; }
.file-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #e1e5df; font-size: 12px; }
.file-list strong, .file-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list small { margin-top: 3px; color: #53615d; }
.file-list button { min-width: 44px; min-height: 44px; border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 750; }
.file-list progress { display: block; width: 100%; height: 5px; margin-top: 5px; accent-color: var(--lime); }
.file-list .failed { color: var(--warn); }
.fine-print { margin-top: 20px; color: #53615d; font-size: 12px; line-height: 1.55; }
.error { min-height: 22px; margin-top: 18px; color: var(--warn); font-size: 12px; font-weight: 700; }
.error button { margin-left: 10px; border: 1px solid currentColor; border-radius: 4px; color: inherit; background: transparent; font-weight: 750; }
.error:empty { display: none; }
.step-shell footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 42px; padding-top: 24px; border-top: 1px solid #d8ddd7; }
.compact-progress { display: none; }
.steps-dialog { width: min(92vw, 430px); max-height: min(82vh, 760px); padding: 0; border: 0; border-radius: 16px; color: white; background: var(--deep); box-shadow: 0 24px 80px #061c1980; }
.steps-dialog::backdrop { background: #061c19b3; }
.steps-dialog > div { padding: 22px; }
.steps-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.steps-dialog h2 { margin: 0; font: 560 27px/1.2 Fraunces, serif; }
.steps-dialog header button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #76918a; border-radius: 50%; color: white; background: transparent; font-size: 25px; }
.steps-dialog nav { display: grid; gap: 4px; }
.steps-dialog nav button { display: grid; grid-template-columns: 30px 1fr; min-height: 44px; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px; color: #d6e1dd; background: transparent; text-align: left; }
.steps-dialog nav button span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #76918a; border-radius: 50%; }
.steps-dialog nav button[aria-current='step'] { color: var(--deep); background: var(--lime); font-weight: 750; }
.conflict-recovery { max-width: 780px; text-align: left; }
.conflict-recovery .logo { margin-inline: 0; }
.recovery-answers { display: grid; gap: 12px; margin: 30px 0; }
.recovery-answers article { padding: 18px; border: 1px solid #c9d3ca; border-radius: 10px; background: #fffdf9; }
.recovery-answers strong { color: var(--deep); }
.recovery-answers pre { overflow-wrap: anywhere; white-space: pre-wrap; font: 400 13px/1.55 Inter, sans-serif; }
.recovery-answers button { min-height: 44px; }
.reload-confirm { margin-top: 24px; padding: 20px; border-left: 4px solid var(--warn); background: #fff8ef; }
.reload-confirm div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.next-card { margin: 34px 0; padding: 28px; border-left: 5px solid var(--lime); color: white; background: var(--deep); }
.next-card .eyebrow { color: var(--lime); }
.next-card h2 { margin-bottom: 8px; font: 550 28px/1.2 Fraunces, serif; }
.next-card p:last-child { margin: 0; color: #d9e5e0; line-height: 1.55; }
.fatal { width: min(100% - 48px, 660px); margin: 0 auto; padding: 120px 0; text-align: center; }
.fatal .logo { margin: 0 auto 50px; }
#phone-gate { display: none; }
.phone-gated #intake-root { display: none; }
.phone-gated #phone-gate { display: flex; min-height: 100vh; padding: 52px 28px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#phone-gate img { width: 150px; margin: 0 auto 52px; }
#phone-gate h1 { max-width: 680px; font-size: clamp(38px, 8vw, 54px); }
#phone-gate p { max-width: 640px; color: var(--muted); line-height: 1.6; }
#phone-gate .secondary { margin-top: 18px; }
#phone-copy-status { min-height: 20px; margin-top: 14px; }
@media (max-width: 1023px) {
  .intake-shell { display: block; }
  .rail { display: none; }
  .step-shell { width: min(100% - 40px, 760px); padding-top: 28px; }
  .compact-progress { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; margin: -28px -20px 52px; padding: 14px 20px; border-bottom: 1px solid #d3d9d2; background: #f5f1e8f2; backdrop-filter: blur(12px); }
  .preview-banner + .intake-shell .compact-progress { top: 28px; }
  .connected .compact-progress { top: 0; }
  .compact-progress button { min-height: 44px; padding: 0 14px; border: 1px solid #9aaba0; border-radius: 6px; color: var(--green); background: var(--paper); font-weight: 750; }
  .compact-progress span { color: #4c5b57; font-size: 12px; font-weight: 750; white-space: nowrap; }
  .compact-progress progress { width: 100%; height: 7px; accent-color: var(--green); }
  .step-top { margin-bottom: 42px; }
}
@media (max-width: 540px) {
  .step-shell { width: min(100% - 28px, 760px); }
  .compact-progress { grid-template-columns: auto 1fr; margin-inline: -14px; }
  .compact-progress progress { grid-column: 1 / -1; }
  .step-shell footer { position: sticky; bottom: 0; margin-inline: -14px; padding: 14px; background: #f5f1e8f2; backdrop-filter: blur(12px); }
  .step-shell footer button { flex: 1; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .primary, .secondary, .rail button, input, textarea, .dropzone, .consent { border: 1px solid ButtonText; } .rail button[aria-current='step'], .chips input:checked + span, .choice-row input:checked + span, .scale input:checked + span { forced-color-adjust: none; color: HighlightText; background: Highlight; } }