/* Falcra design system (design/tokens.json v1). Falcra accent; one accent per page. */
:root {
  --surface: #f8faf9; --surface-raised: #ffffff; --tint: #e8f4f0;
  --ink: #22343a; --ink-muted: #4f6266; --line: #d5dfdc;
  --falcra: #a3d9cc; --on-falcra: #173b37; --falcra-text: #2e6d66; --danger: #b0402d;
  --display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;
  --gutter: 16px; --section: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #141c1e; --surface-raised: #1c2628; --tint: #1f3230;
    --ink: #e6efed; --ink-muted: #a6b8b9; --line: #2d3b3d; --falcra-text: #a3d9cc; --danger: #ef8b76;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #141c1e; --surface-raised: #1c2628; --tint: #1f3230;
  --ink: #e6efed; --ink-muted: #a6b8b9; --line: #2d3b3d; --falcra-text: #a3d9cc; --danger: #ef8b76;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gutter: 40px; --section: 104px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 28px; overflow-x: hidden; }
a { color: var(--falcra-text); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--falcra-text); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: 660px; }
section { padding-block: var(--section); border-top: 1px solid var(--line); }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; font-weight: 600; letter-spacing: -.3px; }
h3 { font-size: 19px; line-height: 27px; font-weight: 600; }
p { margin: 16px 0 0; }
.lede { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.label { font-family: var(--mono); font-weight: 500; font-size: 13.5px; line-height: 20px; letter-spacing: .4px; text-transform: uppercase; color: var(--falcra-text); margin: 0 0 16px; display: block; }
.split { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 2fr; gap: 56px; } }
.split > div > p:first-child { margin-top: 0; }

/* header */
header.top { padding: 16px 0; }
header.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.3px; color: var(--falcra-text); text-decoration: none; }
nav { display: flex; align-items: center; gap: 24px; }
nav a.link { display: none; color: var(--ink-muted); text-decoration: none; font-size: 15px; }
nav a.link:hover { color: var(--ink); }
@media (min-width: 900px) { nav a.link { display: inline; } }

/* buttons */
.btn { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 24px; padding: 12px 22px; border-radius: 8px; background: var(--falcra); color: var(--on-falcra); border: 1px solid var(--falcra-text); text-decoration: none; }
.btn:hover { filter: brightness(.96); }
.btn.quiet { background: transparent; color: var(--falcra-text); padding: 8px 16px; font-size: 15px; }
.btn.secondary { background: transparent; color: var(--falcra-text); }
.actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 40px; }

/* hero */
.hero { padding-block: 56px var(--section); border-top: 0; }
@media (min-width: 760px) { .hero { padding-top: 96px; } }
.hero h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; font-weight: 600; letter-spacing: -1px; max-width: 860px; }
.hero .lede { max-width: 660px; margin-top: 24px; color: var(--ink-muted); }
.hero .crosslink { margin-top: 24px; font-size: 15px; color: var(--ink-muted); }

/* key facts */
.facts { display: grid; grid-template-columns: 1fr; margin: 48px 0 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.facts div { padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .facts div { border-bottom: 0; padding: 16px 24px; } .facts div:first-child { padding-left: 0; } .facts div + div { border-left: 1px solid var(--line); } .facts { gap: 0; } }
.facts dt { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 34px; }
.facts dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* compare */
.compare { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: 24px; } }
.compare > div { border-radius: 16px; padding: 24px; border: 1px solid var(--line); background: var(--surface-raised); }
@media (min-width: 760px) { .compare > div { padding: 40px; } }
.compare > div.driven { border-color: var(--falcra); box-shadow: 0 0 0 1px var(--falcra); }
.compare ul { margin: 16px 0 0; padding-left: 1.2em; color: var(--ink-muted); }
.compare li { margin-top: 8px; }
.compare .k { display: block; font-family: var(--mono); font-size: 13.5px; line-height: 20px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--falcra-text); }
.compare h3 { margin-top: 8px; }

/* steps */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 0; } }
.steps li { padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .steps li { padding: 24px 0 0; border-bottom: 0; border-top: 2px solid var(--falcra); } }
.steps .n { font-family: var(--mono); font-size: 13px; color: var(--falcra-text); display: block; margin-bottom: 8px; }
.steps p { margin-top: 8px; color: var(--ink-muted); }

/* tint band */
.band { background: var(--tint); }
.pillars { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pillars li { background: var(--surface-raised); border-radius: 16px; padding: 24px; }
.pillars p { margin-top: 8px; color: var(--ink-muted); font-size: 16px; line-height: 26px; }

/* case */
.case { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 40px; }
@media (min-width: 760px) { .case { padding: 40px; } }
.case h3 { font-size: 22px; line-height: 30px; }
.case .body p { color: var(--ink-muted); }

/* cards */
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 760px) { .cards.two { grid-template-columns: 1fr 1fr; gap: 24px; } .cards.three { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.card .k { display: block; font-family: var(--mono); font-size: 13.5px; line-height: 20px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--falcra-text); }
.card h3 { margin-top: 8px; }
.card p { color: var(--ink-muted); font-size: 16px; line-height: 26px; margin-top: 8px; }
.card .go { margin-top: auto; padding-top: 16px; font-family: var(--display); font-weight: 600; font-size: 15px; }

/* principles list */
.principles { display: grid; gap: 0; margin-top: 40px; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .principles { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.principles div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.principles p { margin-top: 8px; color: var(--ink-muted); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline .when { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--ink-muted); }
.timeline .role { font-family: var(--display); font-weight: 600; }
@media (min-width: 640px) { .timeline li { grid-template-columns: 140px 1fr; gap: 24px; } }

/* contact */
.contact { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
@media (min-width: 760px) { .contact { padding: 40px; } }
form { display: grid; gap: 24px; }
label { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 22px; }
label .opt { font-family: var(--body); font-weight: 400; color: var(--ink-muted); }
input, textarea { display: block; width: 100%; margin-top: 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--ink-muted); border-radius: 4px; padding: 12px; }
textarea { min-height: 120px; resize: vertical; }
button.btn { cursor: pointer; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--danger); color: var(--danger); font-size: 15px; line-height: 22px; }
.form-error[hidden] { display: none; }

footer { padding: 40px 0; border-top: 1px solid var(--line); }
footer p { margin: 0 0 8px; }
.case .facts { border-top: 0; margin-top: 0; }
.case .facts div { padding-top: 0; }
.case .body { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }