/* Curbside NEMT — shared styles for the marketing site and the legal pages.
   Extracted from the original single-file landing when the site grew past one
   page: the landing, terms, privacy and HIPAA pages all share these tokens, so
   a colour change here does not have to be repeated four times. */

:root {
  --ground: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --ink: #141a21;
  --ink-soft: #48535f;
  --ink-faint: #7c8794;
  --line: #dce1e7;
  --line-soft: #e7ebef;
  --teal: #0b6e75;
  --teal-br: #12909a;
  --teal-wash: #dcedef;
  --pool: #7a5cc4;
  --pool-wash: #ece6f8;
  --amber: #b26608;
  --ok: #2f7a4f;
  --shadow: 0 1px 2px rgba(20,26,33,.05), 0 12px 30px -14px rgba(20,26,33,.22);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d1117; --surface: #161c24; --surface-2: #1c232d;
    --ink: #e8edf3; --ink-soft: #a7b2be; --ink-faint: #6d7883;
    --line: #29313c; --line-soft: #212832;
    --teal: #34b3bd; --teal-br: #4fc9d3; --teal-wash: #16323540;
    --pool: #a48ae0; --pool-wash: #2a234066;
    --amber: #d6942f; --ok: #4bb37a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -16px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"] {
  --ground: #0d1117; --surface: #161c24; --surface-2: #1c232d;
  --ink: #e8edf3; --ink-soft: #a7b2be; --ink-faint: #6d7883;
  --line: #29313c; --line-soft: #212832;
  --teal: #34b3bd; --teal-br: #4fc9d3; --teal-wash: #16323540;
  --pool: #a48ae0; --pool-wash: #2a234066;
  --amber: #d6942f; --ok: #4bb37a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -16px rgba(0,0,0,.65);
}
:root[data-theme="light"] {
  --ground: #eef1f4; --surface: #ffffff; --surface-2: #f5f7f9;
  --ink: #141a21; --ink-soft: #48535f; --ink-faint: #7c8794;
  --line: #dce1e7; --line-soft: #e7ebef;
  --teal: #0b6e75; --teal-br: #12909a; --teal-wash: #dcedef;
  --pool: #7a5cc4; --pool-wash: #ece6f8;
  --amber: #b26608; --ok: #2f7a4f;
  --shadow: 0 1px 2px rgba(20,26,33,.05), 0 12px 30px -14px rgba(20,26,33,.22);
}

/* ── bilingual ────────────────────────────────────────────────────────────
   Both languages ship in the markup and CSS hides one. Chosen over swapping
   textContent from a dictionary because the copy is full of inline markup
   (<b>, the accent <span> in the headline) that a text swap would flatten,
   and because with JS blocked the page still renders — in one language
   instead of two, which is the failure mode you want.

   Only the hide rule exists: an element that is not hidden keeps its natural
   display, so an inline <span> stays inline and a <p> stays a block. */
html[data-lang="es"] [data-lang="en"] { display: none; }
html[data-lang="en"] [data-lang="es"] { display: none; }
/* Before the toggle runs, show English only — otherwise the page paints both
   languages stacked for a frame. */
html:not([data-lang]) [data-lang="es"] { display: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-br);
}

/* ── nav ── */
nav {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 24px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--teal);
  display: grid; place-items: center; color: #fff; flex: none;
}
.mark svg { display: block; }
:root[data-theme="dark"] .mark, .mark { color: #05252a; }
@media (prefers-color-scheme: dark) { .mark { color: #05252a; } }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
/* On phones, drop the section links — keep brand, language and the CTA. The
   language switch stays: a Spanish-speaking dispatcher on a phone is exactly
   who needs it. */
@media (max-width: 720px) {
  .nav-in { gap: 10px; }
  .nav-links { gap: 8px; }
  .nav-links > a:not(.btn) { display: none; }
  .brand { font-size: 15px; gap: 8px; white-space: nowrap; }
  .brand .mark { width: 26px; height: 26px; }
  /* Without this the switch is the flex item that gives, and the second
     button ends up sliced in half by the CTA. */
  .lang { flex: none; }
  .lang button { padding: 5px 7px; font-size: 11px; letter-spacing: .06em; }
  .nav-links .btn-sm { padding: 8px 11px; font-size: 13px; white-space: nowrap; }
}
/* Narrower than this, the wordmark, a two-language switch and a call to
   action cannot all fit on one line — and in Spanish the CTA is the longest
   of the three. The CTA is what earns money and the switch is what makes the
   page readable, so the wordmark drops to just its icon. */
@media (max-width: 430px) {
  .brand .wordmark { display: none; }
}

/* ── language switch ── */
.lang {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.lang button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  font-weight: 700; padding: 5px 9px; border: 0; background: transparent;
  color: var(--ink-faint); cursor: pointer; line-height: 1.4;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--teal); color: #fff; }
:root[data-theme="dark"] .lang button[aria-pressed="true"] { color: #05252a; }
@media (prefers-color-scheme: dark) { .lang button[aria-pressed="true"] { color: #05252a; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 650; font-family: inherit;
  border-radius: 10px; padding: 11px 18px; font-size: 15px; cursor: pointer;
  border: 1px solid transparent; transition: transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #05252a; }
@media (prefers-color-scheme: dark) { .btn-primary { color: #05252a; } }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--teal-br); outline-offset: 2px; border-radius: 8px; }

/* ── hero ── */
/* Longhand only: .hero shares its element with .wrap (id="top"), so a padding
   shorthand here would wipe out .wrap's horizontal 24px. */
.hero { padding-top: 72px; padding-bottom: 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 860px){ .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
h1 {
  font-size: clamp(34px, 5.4vw, 56px); line-height: 1.03; letter-spacing: -.03em;
  margin: 16px 0 18px; font-weight: 850; text-wrap: balance;
}
h1 .u { color: var(--teal-br); }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-soft); max-width: 40ch; margin: 0 0 28px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.micro { font-size: 13px; color: var(--ink-faint); margin-top: 16px; }

/* ── route card (product motif, reused from the app) ── */
.demo {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 18px 20px;
}
.demo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.carno { width: 36px; height: 36px; border-radius: 9px; background: var(--teal); color: #fff; font-weight: 800; display: grid; place-items: center; font-family: var(--mono); }
:root[data-theme="dark"] .carno { color: #05252a; }
@media (prefers-color-scheme: dark){ .carno { color: #05252a; } }
.demo-head .meta { font-size: 12.5px; color: var(--ink-faint); }
.pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.pill.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); margin-left: auto; }
.stop { display: grid; grid-template-columns: 48px 20px 1fr; gap: 10px; }
.stop .t { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rail { display: flex; flex-direction: column; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--teal); background: var(--surface); margin-top: 4px; flex: none; }
.dot.fill { background: var(--teal); }
.dot.pool { border-color: var(--pool); }
.dot.pool.fill { background: var(--pool); }
.line { width: 2px; flex: 1; background: var(--line); min-height: 12px; }
.stop:last-child .line { display: none; }
.who { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.where { font-size: 12.5px; color: var(--ink-faint); padding-bottom: 12px; }
.tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.tag.pool { background: var(--pool-wash); color: var(--pool); }
.tag.ida { background: var(--teal-wash); color: var(--teal); }
.tag.vta { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }

/* ── strip ── */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 26px 0; }
@media (max-width: 680px){ .strip-in { grid-template-columns: repeat(2,1fr); gap: 20px; } }
.stat .v { font-size: 30px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .v.teal { color: var(--teal-br); }
.stat .l { font-size: 13px; color: var(--ink-faint); }
.strip-cap { text-align: center; font-size: 12.5px; color: var(--ink-faint); padding-bottom: 22px; }

/* ── sections ── */
section { padding: 76px 0; }
.sec-head { max-width: 60ch; margin-bottom: 40px; }
h2 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.025em; line-height: 1.1; margin: 12px 0 12px; font-weight: 820; text-wrap: balance; }
.sec-head p { font-size: 17px; color: var(--ink-soft); margin: 0; }

.before { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 820px){ .before { grid-template-columns: 1fr; gap: 28px; } }
ul.pain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
ul.pain li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink-soft); }
ul.pain li::before { content: "\2715"; color: var(--amber); font-weight: 700; flex: none; }
.quote {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 12px; padding: 24px; box-shadow: var(--shadow);
}
.quote p { font-size: 19px; line-height: 1.4; margin: 0 0 14px; font-weight: 500; text-wrap: balance; }
.quote .by { font-size: 13.5px; color: var(--ink-faint); font-family: var(--mono); }

/* ── steps ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 820px){ .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.step .n { font-family: var(--mono); font-size: 12px; color: var(--teal-br); font-weight: 700; }
.step h3 { font-size: 16px; margin: 10px 0 6px; letter-spacing: -.01em; }
.step p { font-size: 13.5px; color: var(--ink-faint); margin: 0; line-height: 1.5; }

/* ── why cards ── */
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px){ .why { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); }
.card .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--teal-wash); color: var(--teal); display: grid; place-items: center; margin-bottom: 16px; font-size: 20px; }
.card h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.card p b { color: var(--ink); }

/* ── pricing ── */
.price-wrap { display: flex; justify-content: center; }
.price {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 34px; max-width: 460px; width: 100%; text-align: center;
}
.price .amt { font-size: 30px; font-weight: 850; letter-spacing: -.025em; line-height: 1.2; }
.price .per { color: var(--ink-faint); font-size: 14px; margin-top: 6px; }
.price ul { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.price li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.price li::before { content: "\2713"; color: var(--ok); font-weight: 800; flex: none; }
.price .note { font-size: 12.5px; color: var(--ink-faint); margin-top: 16px; }

/* ── demo form ── */
.final { text-align: center; }
.final .box { background: var(--teal); color: #fff; border-radius: 20px; padding: 56px 32px; }
:root[data-theme="dark"] .final .box { background: color-mix(in srgb, var(--teal) 30%, var(--surface)); }
@media (prefers-color-scheme: dark){ .final .box { background: color-mix(in srgb, var(--teal) 30%, var(--surface)); } }
.final h2 { color: #fff; margin-top: 0; }
:root[data-theme="dark"] .final h2 { color: var(--ink); }
@media (prefers-color-scheme: dark){ .final h2 { color: var(--ink); } }
.final .box > p { color: rgba(255,255,255,.85); max-width: 46ch; margin: 0 auto 28px; font-size: 17px; }
:root[data-theme="dark"] .final .box > p { color: var(--ink-soft); }
@media (prefers-color-scheme: dark){ .final .box > p { color: var(--ink-soft); } }

.demo-form {
  max-width: 520px; margin: 0 auto; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 560px){ .demo-form { grid-template-columns: 1fr; } }
.demo-form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 650; color: rgba(255,255,255,.9); }
:root[data-theme="dark"] .field label { color: var(--ink-soft); }
@media (prefers-color-scheme: dark){ .field label { color: var(--ink-soft); } }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.field textarea { resize: vertical; min-height: 84px; }
.field .hint { font-size: 11.5px; color: rgba(255,255,255,.75); }
:root[data-theme="dark"] .field .hint { color: var(--ink-faint); }
@media (prefers-color-scheme: dark){ .field .hint { color: var(--ink-faint); } }
/* Bot trap: a real person never fills a field they cannot see. Kept out of the
   tab order and hidden from screen readers so it only ever catches scripts. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 14.5px; margin: 16px 0 0; min-height: 1.5em; }
.form-msg.err { color: #ffd7c2; font-weight: 600; }
:root[data-theme="dark"] .form-msg.err { color: var(--amber); }
@media (prefers-color-scheme: dark){ .form-msg.err { color: var(--amber); } }
.form-done { font-size: 17px; font-weight: 600; }

/* ── footer ── */
footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--ink-faint); font-size: 13.5px; }
.foot-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-faint); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-note { max-width: 42ch; }

/* ── legal documents ── */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.doc .eyebrow { display: block; margin-bottom: 10px; }
.doc h1 { font-size: clamp(28px, 4.4vw, 40px); margin: 0 0 8px; }
.doc .updated { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin: 0 0 32px; }
.doc h2 { font-size: 21px; margin: 40px 0 12px; letter-spacing: -.015em; scroll-margin-top: 78px; }
.doc h3 { font-size: 16.5px; margin: 26px 0 8px; }
.doc p, .doc li { font-size: 15.5px; color: var(--ink-soft); }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc strong { color: var(--ink); font-weight: 650; }
.doc a:not(.btn) { color: var(--teal-br); text-decoration: underline; text-underline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 650; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.doc td { color: var(--ink-soft); }
.doc-scroll { overflow-x: auto; }

/* The unfilled-details banner. Deliberately loud: it must be impossible to
   publish these pages by accident with the placeholders still in them. */
.todo {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border: 1px solid var(--amber); border-left-width: 4px;
  border-radius: 12px; padding: 18px 20px; margin: 0 0 32px;
}
.todo h2 { margin: 0 0 8px; font-size: 16px; color: var(--amber); }
.todo p, .todo li { font-size: 14px; }
.todo p:last-child, .todo ul:last-child { margin-bottom: 0; }

.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 12px;
  padding: 18px 20px; margin: 0 0 24px;
}
.callout p:last-child { margin-bottom: 0; }

/* Table of contents for the legal pages. */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0 0 36px; }
.toc h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 0 0 12px; }
.toc ol { margin: 0; padding-left: 20px; gap: 6px; }
.toc a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.toc a:hover { color: var(--teal-br); text-decoration: underline; }