/* Public site (docs/design/website-motion.md, revision 7): the night-film look of the hero carried through the page. Blue-grey
   charcoals (never black), cool white light, a warm white for what is being screened, a muted red for distress; flat panels,
   hairlines, 2 px corners, large regular-weight sans headlines. Loaded after login.css (the modals keep its light palette),
   site.css (palette, footer) and site-flood.css (the map's generated light styles, re-skinned below). Hidden start states only
   apply under body.motion (landing.js sets it unless reduced motion is asked for), so the markup's finished state is what
   reduced motion and no-JS visitors see. */
:root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --g0: #1c2127; --g1: #20252c; --card: #262b32; --card-2: #2d333b; --line: #333a43; --line-2: #3e4651; --line-3: #5f6b7c;
  --tx-1: #f3f5f8; --tx-2: #aab3bf; --tx-3: #8a95a4; --tx-4: #6f7b8b;
  --cool: #ccd9e8; --warm: #f4e9d6; --red: #cd4246; --red-t: #fa999c; --orange: #c87619; --orange-t: #fbb360; --green: #32a467; --green-t: #72ca9b; --blue: #2d72d2; --blue-t: #8abbff; }
#main-landing { --bg: var(--g0); --paper: var(--card); --ink: var(--tx-1); --ink-2: var(--tx-2); --muted: var(--tx-3);
  --app-ink: var(--tx-1); --app-ink-2: #c5cbd3; --app-muted: var(--tx-3); --app-line: var(--line);
  --t-debt: var(--orange-t); --t-owner: var(--green-t); --t-zoning: var(--orange-t); --t-env: var(--blue-t); --t-risk: var(--red-t); }
html, body { height: auto; overflow: visible; }
html { scroll-padding-top: 72px; background: var(--g0); }
body { background: var(--g0); color: var(--tx-1); overflow-x: clip; }
/* the sign-in and sales modals in the page's dark UI: the same charcoals, hairlines, 2 px corners and sans titles; login.css keeps
   their structure and every state, so its tokens are re-pointed here and its few literal colours overridden */
.login, .sales { --ink: #f3f5f8; --ink-2: #c5cbd3; --muted: #8a95a4; --strong: #4a5260; --bad: #fa999c; --ok: #72ca9b; --blue: #f4e9d6;
  --ring: 0 0 0 2px #262b32, 0 0 0 4px rgb(243 245 248 / 70%);
  color: var(--ink); background: #262b32; border: 1px solid #3e4651; border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / 40%), 0 40px 100px -24px rgb(0 0 0 / 75%); }
body.auth-open::after, body.sales-open::after { background: rgb(16 19 23 / 66%); backdrop-filter: blur(6px); }
.login input, .sales input { background: #1c2127; border-color: #3e4651; border-radius: 2px; color: #f3f5f8; }
.login input::placeholder, .sales input::placeholder { color: #6f7b8b; }
.login input:hover, .sales input:hover { border-color: #5f6b7c; }
.login input:focus, .sales input:focus { border-color: #aab3bf; }
.login button, .sales button { background: transparent; border-color: #3e4651; border-radius: 2px; color: #f3f5f8; }
.login button:hover, .sales button:hover { background: rgb(255 255 255 / 6%); border-color: #5f6b7c; }
.login button.primary, .sales button.primary { background: #f3f5f8; border-color: #f3f5f8; color: #1c2127; }
.login button.primary:hover, .sales button.primary:hover { background: #fff; border-color: #fff; }
.login button.link { background: none; }
.login a.link { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-decoration-color: var(--strong); text-underline-offset: 3px; }
.login a.link:hover { color: var(--ink); text-decoration-color: currentColor; }
.login .modal-close, .sales .modal-close { border: 0; color: var(--muted); }
.login .modal-close:hover, .sales .modal-close:hover { color: var(--ink); background: rgb(255 255 255 / 6%); }
#auth-modal h1 { font: 400 30px/1.12 var(--sans); letter-spacing: -0.035em; color: var(--ink); }
#auth-modal label { color: var(--ink-2); font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#auth-modal .status[data-tone="error"] { border-radius: 2px; background: rgb(205 66 70 / 12%); border-color: rgb(205 66 70 / 40%); color: #fa999c; }
#auth-modal .status[data-tone="ok"] { border-radius: 2px; background: rgb(50 164 103 / 12%); border-color: rgb(50 164 103 / 40%); color: #72ca9b; }
#auth-modal[aria-busy="true"] button.primary:not([hidden])::after { border-color: rgb(28 33 39 / 25%); border-top-color: #1c2127; }
.login .who { background: #1c2127; border-color: #3e4651; border-radius: 2px; color: var(--ink-2); }
.login .who .back:hover { background: rgb(255 255 255 / 6%); }
.login .or { color: var(--muted); }
.sales-head h2 { font: 400 18px var(--sans); letter-spacing: -0.02em; }
.sales-mark { background: #f3f5f8; color: #1c2127; border-radius: 2px; }
.sales-turn.you { background: #2f343c; border: 1px solid #3e4651; border-radius: 2px; color: #f3f5f8; }
.sales-chips .chip { border-radius: 2px; border-color: #3e4651; color: var(--ink-2); }
.sales-chips .chip:hover { border-color: #5f6b7c; color: var(--ink); }
.sales-chips .chip[aria-pressed=true] { border-color: #f4e9d6; background: rgb(244 233 214 / 10%); color: #f4e9d6; }
.sales-composer button.primary { border-radius: 2px; }
.sales-states input { border-radius: 2px; }
.sales-done-mark { background: rgb(50 164 103 / 16%); }
.login-shell { display: contents; }  /* the modals are fixed; the shell takes no space */
#main-landing { font: 16px/1.6 var(--sans); overflow-x: clip; color: var(--tx-1); color-scheme: dark; }
#main-landing h2 { font: 400 clamp(34px, min(4.2vw, 6.4svh), 60px)/1.03 var(--sans); letter-spacing: -0.042em; margin: 0 0 20px; text-wrap: balance; color: var(--tx-1); }
#main-landing h2 em { font-style: normal; color: var(--tx-3); }
#main-landing h3 { margin: 0; }
#main-landing p { margin: 0; }
#main-landing .eyebrow { margin: 0 0 18px !important; font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.tag { display: block; font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 3px; }
.landing-skip { position: fixed; top: -100px; left: 20px; z-index: 60; background: var(--tx-1); color: var(--g0); padding: 12px; border-radius: 2px; }
.landing-skip:focus { top: 12px; }
#main-landing a:focus-visible, .topbar a:focus-visible, #main-landing button:focus-visible, .topbar button:focus-visible {
  outline: 2px solid var(--tx-1); outline-offset: 3px; box-shadow: none; }
.sec-head { max-width: 1240px; margin: 0 auto 48px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 6%; align-items: end; }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head > p:last-child { color: var(--tx-2); font-size: 18px; line-height: 1.55; max-width: 520px; }

/* ---------- buttons and the top bar */
#main-landing button.primary, .topbar button.primary { background: var(--tx-1); border-color: var(--tx-1); color: var(--g0); border-radius: 2px; padding: 0 22px; }
#main-landing button.primary:hover, .topbar button.primary:hover { background: #fff; border-color: #fff; }
button.ghost { background: rgb(28 33 39 / 35%); border-radius: 2px; padding: 0 22px; border-color: rgb(255 255 255 / 28%); color: var(--tx-1); backdrop-filter: blur(6px); }
button.ghost:hover { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 55%); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-actions button { height: 48px; font-size: 15px; }
.topbar { background: transparent; color: var(--tx-1); padding: 0 5%; height: 68px; gap: 28px; transition: background .25s, box-shadow .25s; }
.topbar .wordmark { font-size: 24px; align-self: center; color: var(--tx-1); }
.topbar .wordmark span { color: var(--copper); }
.topbar nav { display: flex; gap: 28px; margin-left: auto; }
.topbar nav a { font-size: 13.5px; text-decoration: none; color: var(--tx-2); }
.topbar nav a:hover { color: var(--tx-1); }
.top-actions { align-items: center; }
.top-actions button { border-radius: 2px; font-size: 13.5px; padding: 0 14px; }
.top-actions #open-signin { background: transparent; color: var(--tx-1); border-color: rgb(255 255 255 / 28%); }
.top-actions #open-signin:hover { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 55%); }
body.scrolled .topbar { background: rgb(28 33 39 / 86%); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }

/* ---------- films: the country (hero) and Florida (proof), full bleed, under a shade that keeps the type readable */
.film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; background: var(--g0); }
/* a film that is loading, seeking or dropped its decoded frames off screen paints its element background, not its poster:
   the still sits there too (same crop as object-position), so the film never blinks to an empty panel */
.hero .film { background: var(--g0) url(/acquisition/site-nation.webp) 50% 50% / cover no-repeat; }
.proof .film { background: var(--g0) url(/acquisition/site-florida.webp) 50% 50% / cover no-repeat; }
/* revision 9: the intro (the country easing down onto Florida) over the loop; its still loads only once landing.js unhides it */
.proof .film-intro { background-image: url(/acquisition/site-florida-intro.webp); }
.film-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- hero */
.hero { position: relative; isolation: isolate; min-height: max(100svh, 720px); box-sizing: border-box; padding: 140px 5% 0; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; align-items: end; }
.hero .film-shade { background: linear-gradient(90deg, rgb(24 28 34 / 78%), rgb(24 28 34 / 35%) 38%, transparent 62%), linear-gradient(0deg, var(--g0), rgb(28 33 39 / 0) 34%),
  linear-gradient(180deg, rgb(24 28 34 / 55%), transparent 22%); }
.hero-copy { position: relative; max-width: 640px; padding-bottom: 56px; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px !important; padding: 7px 12px 7px 10px; border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 2px; background: rgb(28 33 39 / 55%); backdrop-filter: blur(8px); font: 500 11px/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }
.hero-pill i { flex: none; width: 6px; height: 6px; background: var(--red); }
.hero-pill b { color: var(--tx-1); font-weight: 600; }
.hero h1 { font: 400 clamp(48px, 5.8vw, 96px)/.98 var(--sans); letter-spacing: -0.05em; margin: 0 0 26px; color: var(--tx-1); }
.hero h1 span, .hero h1 em { display: block; white-space: nowrap; }
.hero h1 em { font-style: normal; color: var(--tx-3); }
.hero-lede { max-width: 500px; margin: 0 0 34px !important; font-size: 18px; line-height: 1.55; color: var(--tx-2); }
.hero-hud { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 54px; border-top: 1px solid rgb(255 255 255 / 14%); max-width: 1240px; }
.hero-hud div { padding: 18px 24px 0 0; }
.hero-hud dt { font: 500 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.hero-hud dd { margin: 6px 0 2px; font: 400 40px/1 var(--sans); letter-spacing: -0.04em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.hero-hud small { font-size: 12.5px; color: var(--tx-3); }
/* ---------- seller prediction, right under the hero (docs/design/site-seller-lift-strip.md): the HUD's dt / dd / small, one band,
   the method always in view; columns capped so the band lines up with the hero's 1240 px HUD */
.lift { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 840px); padding: 64px 5% 56px; border-top: 1px solid var(--line); }
.lift-head { padding-right: 48px; align-self: end; }
#main-landing .lift h2 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; margin: 0 0 12px; }
.lift-head > p:last-child { font-size: 15px; line-height: 1.55; color: var(--tx-2); }
.lift-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; margin: 0; }
.lift-stats div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; padding: 16px 24px 0 0; border-top: 1px solid rgb(255 255 255 / 14%); }
.lift-stats dt { font: 500 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); text-wrap: balance; }
.lift-stats dd { margin: 4px 0 0; font: 400 clamp(44px, 4.6vw, 64px)/1 var(--sans); letter-spacing: -0.045em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.lift-stats dd span { margin-left: .03em; color: var(--tx-3); }
/* the film's page text (landing.js places it from site-nation-film.json): metro names on the debt columns during the sweep, then the
   locked building's cards, one per ripple, joined to its roof by a leader */
.film-tags { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.metro { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s; white-space: nowrap;
  font: 500 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-1);
  text-shadow: 0 1px 3px rgb(16 19 23 / 90%); }
.metro::after { content: ""; position: absolute; left: 50%; top: calc(100% + 3px); width: 1px; height: 9px; background: rgb(250 153 156 / 55%); }
.metro.side::after { left: calc(-1 * var(--tick)); top: 50%; width: calc(var(--tick) - 3px); height: 1px; }  /* beside the column when the spot over it is taken */
.lock-tag { position: absolute; inset: 0; opacity: 0; }
.lock-lead { position: absolute; left: 0; top: 0; border: 0 solid rgb(244 233 214 / 55%); border-left-width: 1px; }
.lock-lead.up { border-top-width: 1px; } .lock-lead.down { border-bottom-width: 1px; }
.lock-cards { position: absolute; left: 0; top: 0; width: 272px; display: grid; gap: 5px; }
.lc { margin: 0; padding: 8px 11px 9px; background: rgb(28 33 39 / 86%); border: 1px solid var(--line-2); border-radius: 2px;
  opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--out), transform .5s var(--out); }
.lc.on { opacity: 1; transform: none; }
.lc span { display: flex; align-items: center; gap: 8px; font: 500 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.lc span::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--sw); }
.lc em { margin-left: auto; font: 500 10px var(--mono); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--tx-4); }
.lc.debt, .lc.taxes { --sw: var(--red); } .lc.owner, .lc.score { --sw: var(--warm); } .lc.zone, .lc.liens { --sw: var(--orange); }
.lc.value { --sw: var(--green); } .lc.flood { --sw: var(--blue); }
.lc b { display: block; margin-top: 4px; overflow: hidden; font: 500 13.5px/1.3 var(--sans); color: var(--tx-1); white-space: nowrap; text-overflow: ellipsis; }

/* ---------- the public record, a slow rail of record types */
.records { padding: 24px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--g1); text-align: center; overflow: hidden; }
.records > p { margin-bottom: 14px !important; font: 500 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-4); }
.records-rail { display: flex; width: max-content; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.records-rail ul { display: flex; gap: 44px; margin: 0; padding: 0 22px; list-style: none; }
.records-rail li { font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); white-space: nowrap; }
.records-rail li::before { content: "/"; margin-right: 14px; color: var(--line-3); }

/* ---------- the platform: the engine room (revision 10, docs/design/site-rev10-engines.md). On the page background, no outer box:
   the record (the hero's eight fields) over the stage, lighting the fields the engine on stage reads, each lit field wired into the
   stage; the rail of all sixteen down the left, by name, each with its live state and its own trace; the stage, one product window
   with the selected engine at its own size. landing.js runs the cycle, the loops and the feed. Phones: the record a 2 x 4 grid, the
   rail a row of chips, each engine at its phone layout. */
.platform { padding: 130px 5% 140px; background: radial-gradient(60% 50% at 50% 0%, #252b33, transparent 70%), var(--g0); }
.room { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "rail record" "rail stage" "rail cta"; column-gap: 52px; }
/* the record: one property, its eight fields; the lit ones carry a wire down into the stage */
.record { grid-area: record; min-width: 0; padding-bottom: 34px; }
.rec-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px !important; }
.rec-k { font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.rec-id > b { font: 500 16px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--tx-1); }
.rec-at { font-size: 13px; color: var(--tx-3); }
.rec-hint { margin-left: auto; font-size: 12.5px; color: var(--tx-3); }
.rec-by { font-weight: 500; color: var(--warm); }
.rec-fields { margin: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 14px; border-top: 1px solid var(--line); }
.rec-fields > div { position: relative; min-width: 0; padding-top: 11px; }
.rec-fields > div::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 2px; background: var(--warm); transform: scaleX(0); transform-origin: left; }
.rec-fields dt { font: 500 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.rec-fields dd { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tx-3); }  /* unlit still reads at AA: 5.3:1 on --g0 */
.rec-fields .fed::before { transform: none; }
.rec-fields .fed dt { color: var(--warm); }
.rec-fields .fed dd { color: var(--tx-1); }
/* the wire: from the lit field's foot down to a port on the stage's top edge */
.rec-fields > div::after { content: ""; position: absolute; left: -2px; top: 100%; width: 5px; height: 34px; opacity: 0;
  background: linear-gradient(var(--warm), var(--warm)) 2px 0 / 1px 100% no-repeat, linear-gradient(var(--warm), var(--warm)) 0 100% / 5px 5px no-repeat; }
.rec-fields .fed::after { opacity: .7; }
/* the rail: the sixteen by number and name in the four groups, each with its live state and trace; type, not cells */
.rail[role="tablist"] { grid-area: rail; display: flex; flex-direction: column; min-width: 0; }
.rail-g { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 18px 0 7px; border-bottom: 1px solid var(--line);
  font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.rail-g:first-child { padding-top: 2px; }
.rail-g span { font: 500 11px var(--mono); letter-spacing: .02em; color: var(--tx-4); }
.rail [role="tab"] { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n name beat" ". state state";
  align-items: center; column-gap: 10px; row-gap: 0; height: auto; padding: 6px 4px 6px 12px; border: 0; border-radius: 0; background: none;
  font: inherit; text-align: left; color: var(--tx-2); cursor: pointer; transition: background .25s, color .25s; }
.rail [role="tab"]:hover { background: rgb(255 255 255 / 3%); color: var(--tx-1); }
.rail [role="tab"] .eng-n { grid-area: n; font: 500 11px var(--mono); color: var(--tx-4); }
.rail [role="tab"] b { grid-area: name; font: 500 14.5px/1.35 var(--sans); letter-spacing: -0.01em; color: inherit; }
.eng-state { grid-area: state; min-width: 0; font: 500 11.5px/1.4 var(--mono); color: var(--tx-3); font-variant-numeric: tabular-nums; }
.eng-beat { grid-area: beat; display: block; width: 46px; height: 18px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 30%); }
.eng-beat path { fill: none; stroke: var(--tx-4); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rail [aria-selected="true"], .rail [aria-selected="true"]:hover { background: linear-gradient(90deg, rgb(244 233 214 / 7%), transparent 85%); color: var(--tx-1); box-shadow: inset 2px 0 0 var(--warm); }
.rail [aria-selected="true"] .eng-n, .rail [aria-selected="true"] .eng-state { color: var(--warm); }
.rail [aria-selected="true"] .eng-beat path { stroke: var(--warm); }
.rail [role="tab"]::after { content: ""; position: absolute; inset: auto 0 0 12px; height: 1px; background: var(--warm); opacity: 0; transform: scaleX(0); transform-origin: left; }
#main-landing .rail [role="tab"]:focus-visible, #main-landing .stage .eng:focus-visible { outline: 2px solid var(--tx-1); outline-offset: -2px; }
/* the stage: one product window, the selected engine at its own size */
.stage { grid-area: stage; position: relative; min-width: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--g1); overflow: hidden;
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / 70%); }
.stage .eng { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 140px; }
.stage .eng[hidden] { display: none; }
.eng-head { order: 0; display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 0; }
.eng-head b { font: 500 19px/1.25 var(--sans); letter-spacing: -0.02em; color: var(--tx-1); }
.eng-n { font: 500 12px var(--mono); color: var(--tx-4); }
.eng-also { font-size: 12.5px; color: var(--tx-3); }  /* the screen shows a parcel other than the record */
.eng-live { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.eng-live::before { content: ""; width: 6px; height: 6px; background: var(--warm); opacity: .9; }
.eng-cap { order: 1; padding: 4px 20px 14px 44px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--tx-2); }
.eng-body { order: 2; position: relative; box-sizing: border-box; height: 600px; overflow: hidden; padding: 16px; }
/* one window: the engine's screen fills the stage under its title bar, edge to edge; no frame inside the frame */
@media (min-width: 861px) {  /* phones keep the inset screen their layouts are cut to */
  .stage .eng-body { padding: 0; background: var(--card); }
  .stage .eng-body > figure, .stage .eng-body > .ui { border: 0; border-radius: 0; }
  #ownership .eng-body { padding: 16px; }
}
/* the way on from the engines: a walkthrough with the team, never a self-serve demo */
.room-cta { grid-area: cta; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 28px; }
.room-cta button { height: 46px; font-size: 15px; }
.room-cta p { max-width: 460px; font-size: 14px; line-height: 1.5; color: var(--tx-3); }

/* product fragments: the app's own dark UI, at the app's density */
.ui { background: var(--card); color: var(--app-ink); border: 1px solid var(--line-2); border-radius: 2px; font: 13.5px/1.45 var(--sans); }
.ui-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; }
.ui-head b { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.ui-muted { color: var(--app-muted); }
.ui-count { margin-left: auto; color: var(--app-muted); white-space: nowrap; font-size: 12.5px; }
.ui-count b { font: 500 16px var(--mono); color: var(--tx-1); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ui-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--app-line); color: var(--app-muted); white-space: nowrap; overflow: hidden; font-size: 13px; }
.ui-tabs span { padding: 12px 0 10px; }
.ui-tabs .on { color: var(--app-ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--tx-1); }
.kv { margin: 0; padding: 0 16px; }
.kv > div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--app-muted); font-size: 13px; }
.kv dd { margin: 0; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--app-ink); }

/* 01 origination: the Parcels table narrowing on its own clock */
#origination .parcels-ui { margin: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; }  /* the card fills the console */
#origination .ui-foot { margin-top: auto; }
.ui-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid var(--app-line); min-height: 42px; }
.flt, .flt-add { padding: 3px 8px; border-radius: 2px; font-size: 12.5px; white-space: nowrap; }
.flt { display: none; background: var(--card-2); border: 1px solid var(--line-2); color: #e5e8eb; }
.flt.on { display: inline-block; }
.flt-add { color: var(--app-muted); border: 1px dashed var(--line-2); }
.ui-table { font-size: 13px; }
.tr { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) .8fr .45fr .45fr 1.15fr .95fr .75fr; gap: 12px; align-items: center; padding: 0 16px;
  max-height: 44px; height: 44px; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap;
  transition: max-height .45s var(--out) .25s, opacity .35s, background .3s, padding .45s .25s; }
.tr > span { overflow: hidden; text-overflow: ellipsis; }
.tr b { display: block; font-weight: 500; color: var(--tx-1); }
.tr small { color: var(--app-muted); font-size: 12.5px; }
.th { height: 32px; color: var(--app-muted); font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--card-2); }
.sc { display: flex; align-items: center; gap: 6px; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.sc i { width: 32px; height: 3px; background: var(--line-2); position: relative; }
.sc i::before { content: ""; position: absolute; inset: 0 auto 0 0; background: var(--tx-1); }
.s5::before { width: 100%; } .s4::before { width: 79%; } .s3::before { width: 58%; } .s2::before { width: 43%; } .s1::before { width: 22%; }
.s3::before, .s2::before, .s1::before { background: var(--tx-4) !important; }
.tr[data-cut]::after { content: attr(data-why); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 2px 7px; border-radius: 2px;
  background: #3b2629; border: 1px solid rgb(205 66 70 / 50%); color: var(--red-t); font-size: 11px; opacity: 0; transition: opacity .2s; }
.tr.out { max-height: 0; opacity: 0; border-bottom-color: transparent; }
.tr.striking { text-decoration: line-through; text-decoration-color: rgb(231 106 110 / 70%); color: var(--tx-4); }
.tr.striking b { color: var(--tx-4); }
.tr.striking::after { opacity: 1; }
.tr.striking > :nth-child(n+6) { visibility: hidden; }  /* the reason chip stands where the owner and score were */
/* the rest of the survivors: they rise into the ranked list once the last filter has struck the others (landing.js staggers --i) */
#origination .tr.late { max-height: 0; opacity: 0; border-bottom-color: transparent; }
#origination[data-stage="4"] .tr.late { max-height: 64px; opacity: 1; border-bottom-color: var(--line); transition-delay: calc(1.25s + var(--i, 0) * 90ms); }
#origination[data-stage="4"] .tr.keep { background: rgb(244 233 214 / 6%); box-shadow: inset 2px 0 0 var(--warm); }
#origination[data-stage="4"] .tr.keep small::after { content: " · Monday"; color: var(--warm); font-weight: 500; }
.ui-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; color: var(--app-muted); font-size: 12.5px; }
.mon { opacity: .4; transition: opacity .4s; font: 500 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#origination[data-stage="4"] .mon { opacity: 1; color: var(--warm); }
@keyframes chip-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }

/* 02 ownership: the chain to the person who signs */
#ownership .chain { margin: 0 auto; padding: 4px 6px; max-width: 700px; }
.chain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.node { position: relative; width: min(500px, 100% - var(--i, 0) * 6%); line-height: 1.45; margin-left: calc(var(--i, 0) * 6%); padding: 10px 14px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: 2px; transition: opacity .5s var(--out), transform .5s var(--out); }
.node b { display: block; font-size: 14px; font-weight: 500; color: var(--tx-1); }
.node small { color: var(--tx-3); font-size: 12.5px; }
.doc-src { position: absolute; top: 10px; right: 12px; font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }
.node + .node::before { content: ""; position: absolute; left: 18px; top: -17px; width: 1px; height: 17px; background: var(--line-3); transform-origin: top; transition: transform .3s; }
.node.person { width: calc(100% - var(--i, 0) * 6%); display: flex; gap: 12px; align-items: flex-start; background: var(--card-2); border-color: var(--warm); }
.node.person small { color: var(--tx-2); }
.avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--line); color: var(--tx-1);
  font: 500 12.5px var(--sans); border: 1px solid var(--line-3); }
.p-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font: 500 13px var(--mono); color: var(--tx-1); }
.p-line em { padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line-2); font: 600 10.5px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--tx-2); }
.p-line .ok { color: var(--green-t); border-color: rgb(50 164 103 / 45%); background: rgb(50 164 103 / 14%); }
.p-pill { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 2px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--tx-2); }

/* 03 debt: the maturity wall */
#debt .wall { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.wall-chart, .wall-key { flex: none; }
.wall-chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; height: 190px; padding: 6px 16px 0; }
.wall-y { display: flex; flex-direction: column; justify-content: space-between; color: var(--app-muted); font: 500 11px var(--mono); text-align: right; padding-bottom: 22px; }
.wall-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; padding-bottom: 22px; position: relative;
  background: repeating-linear-gradient(transparent 0 calc(33.33% - 1px), var(--line) calc(33.33% - 1px) 33.33%); background-size: 100% calc(100% - 22px); background-repeat: no-repeat; }
.wb { position: relative; height: 100%; display: flex; flex-direction: column-reverse; }
.wb i { display: block; width: 100%; height: var(--h); transform-origin: bottom; transition: transform .8s var(--out); transition-delay: calc(var(--i, 0) * .22s + .2s); }
.wb .prj { transition-delay: calc(var(--i, 0) * .22s + .55s); }
.wb .rec { background: var(--red); }
.wb .prj { background: repeating-linear-gradient(135deg, #4a5260 0 3px, var(--card-2) 3px 6px); }
.wb b { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font: 500 12.5px var(--mono); color: var(--app-muted); }
.wb.sel { outline: 1px solid var(--tx-1); outline-offset: 3px; transition: outline-color .4s 1.7s; }
.wb.sel b { color: var(--tx-1); }
.wb-tip { position: absolute; z-index: 1; left: calc(100% + 8px); top: -8px; white-space: nowrap; padding: 4px 8px; border-radius: 2px; background: var(--g0);
  border: 1px solid var(--line-3); color: var(--tx-1); font: 500 12.5px var(--mono); transition: opacity .35s 1.9s, transform .45s var(--out) 1.9s; }
.h41 { --h: 27.3%; } .h62 { --h: 41.3%; } .h52 { --h: 34.7%; } .h78 { --h: 52%; } .h38 { --h: 25.3%; } .h64 { --h: 42.7%; }
.h30 { --h: 20%; } .h51 { --h: 34%; } .h26 { --h: 17.3%; } .h43 { --h: 28.7%; } .h22 { --h: 14.7%; } .h35 { --h: 23.3%; }
.wall-key { display: flex; gap: 16px; padding: 10px 16px 12px; color: var(--app-muted); font: 500 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--app-line); }
.wall-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.k-rec::before { background: var(--red); } .k-prj::before { background: repeating-linear-gradient(135deg, #4a5260 0 3px, var(--card-2) 3px 6px); }
.loans { font-size: 13px; }
.ln { display: grid; grid-template-columns: minmax(0, 1.3fr) .8fr .6fr 1.1fr; gap: 10px; align-items: center; padding: 6px 16px; line-height: 1.4; border-bottom: 1px solid var(--line);
  transition: opacity .45s var(--out), transform .45s var(--out), background .4s; transition-delay: calc(var(--i, 0) * .16s + 1.6s); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips em { padding: 1px 6px; border-radius: 2px; border: 1px solid var(--line-2); font: 500 11px/1.5 var(--sans); font-style: normal; color: var(--tx-2); white-space: nowrap; }
.chips .c-red { color: var(--red-t); border-color: rgb(205 66 70 / 50%); background: rgb(205 66 70 / 12%); }
.chips .c-amber { color: var(--orange-t); border-color: rgb(200 118 25 / 50%); background: rgb(200 118 25 / 12%); }
.chips .c-grey { color: var(--tx-3); }
.ln > span:nth-child(2), .ln > span:nth-child(3) { font-family: var(--mono); font-size: 12.5px; }
.ln b { display: block; font-weight: 500; color: var(--tx-1); } .ln small { color: var(--app-muted); font-size: 12.5px; }
.ln-h { color: var(--app-muted); font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--card-2); padding-top: 7px; padding-bottom: 7px; }
.ln.ln-h > span { font: inherit; }
.ln.sel { background: rgb(255 255 255 / 4%); box-shadow: inset 2px 0 0 var(--red); }
.ln.off { color: var(--tx-4); } .ln.off b { color: var(--tx-3); }

/* 04 zoning: the massing on a drafting grid, the Live Local floors in orange */
#zoning .zone-fig { position: relative; margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px) 0 0 / 24px 24px, var(--g0); }
.mass { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; padding: 8px 12px 0; }  /* a definite row: the svg fits it */
.mass svg { width: 100%; height: 100%; max-height: 380px; overflow: visible; }
.zk { padding: 0 14px 6px; background: rgb(28 33 39 / 80%); border-top: 1px solid var(--line); }
.zk > div:last-child { border-bottom: 0; }
.zk .ll { background: rgb(200 118 25 / 8%); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.zk .net dd b { font: 400 22px/1 var(--sans); letter-spacing: -0.03em; color: var(--orange-t); }
.lot { fill: rgb(255 255 255 / 4%); stroke: var(--tx-3); stroke-width: 1.2; stroke-dasharray: 6 5; }
.setback { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 4; }
.lot-k { font: 500 13px var(--sans); fill: var(--tx-2); }
.mass polygon:not(.lot):not(.setback) { stroke: #fff; stroke-opacity: .16; stroke-width: .6; stroke-linejoin: round; }
.pd-f { fill: #3a4049; } .pd-s { fill: #454c57; } .pd-t { fill: #31363e; } .pilaster { stroke: #6b7480; stroke-width: 1.1; opacity: .8; }
.shop { fill: #3b4f63; stroke: #8fa3b8 !important; stroke-opacity: .5 !important; } .awning { fill: var(--orange); } .awning-s { fill: #9c5c14; }
.planter { fill: #2f3a32; } .tree { fill: #44604b; }
.win { fill: #4d6680; } .win.ws { fill: #5a7590; }
.base .tw-f { fill: #2e3b4a; } .base .tw-s { fill: #384859; } .tw-t { fill: #435468; }
.glass.gf { fill: #3e5873; fill-opacity: .9; } .glass.gs { fill: #4a6886; fill-opacity: .9; } .fin { stroke: #9fb1c4; stroke-width: 1.2; opacity: .35; }
.bonus .tw-f { fill: #a0601c; } .bonus .tw-s { fill: #b97128; } .bonus .tw-t { fill: #cf8a3d; } .bonus .win { fill: #f0c489; } .bonus .win.ws { fill: #f6d5a8; }
.bonus .glass.gf { fill: #b5702a; } .bonus .glass.gs { fill: #c98238; }
.slab { fill: #fff; opacity: .2; }
.balc { fill: #e8c08a; } .rail { fill: #f6d5a8; fill-opacity: .35; }
.pool { fill: #6a8fb0; fill-opacity: .85; } .deck { fill: #4a4540; } .pergola { stroke: #b49a74; stroke-width: 1; fill: none; } .umb { fill: var(--orange); stroke: #7a4a10; stroke-width: .6; }
.rail-l { fill: none; stroke: #f0c489; stroke-opacity: .6; stroke-width: 1.4; }
.pp-f { fill: #3a414c; } .pp-s { fill: #454d59; } .pp-t { fill: #4f5866; } .pr-f { fill: #353b45; } .pr-s { fill: #3f4650; } .pr-t { fill: #4a515c; } .louver { fill: #6b7686; }
.floor { transition: opacity .6s, transform .8s var(--out); transition-delay: calc(var(--i, 0) * .28s + .4s); }
.floor.bonus { transition-delay: calc(var(--i, 0) * .28s + 1.4s); }
.dim path { fill: none; stroke: var(--tx-3); stroke-width: 1; }
.dim text { font: 500 15px var(--sans); fill: var(--tx-1); }
.dim-b path { stroke: var(--orange-t); } .dim-b text { fill: var(--orange-t); }
.dim { transition: opacity .4s; }
.dim-a { transition-delay: 2.6s; } .dim-b { transition-delay: 5.8s; }

/* 05 flood and hazard: the real map on a dark base, stats along its foot */
#risk .map-wrap { position: relative; margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: #1e2329; }
.map-strip { position: relative; min-height: 0; overflow: hidden; background: #1e2329; }
.map-strip svg { display: block; width: 100%; height: 100%; }
.map-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: rgb(28 33 39 / 92%); }
.map-stats div { padding: 10px 12px; border-right: 1px solid var(--line); } .map-stats div:last-child { border-right: 0; }
.map-stats dt { font: 500 10.5px/1.35 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.map-stats dd { margin: 4px 0 0; font: 400 22px/1.05 var(--sans); letter-spacing: -0.03em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.map-stats .z { color: var(--blue-t); }
.map-stats div:last-child dd { color: var(--red-t); }
.map-stats small { display: none; }
#flood-map #fm-ground { fill: #1e2329; }
#flood-map #fm-water path { fill: #1d2c3d; }
#flood-map #fm-parcels path { stroke: #2b3139; }
#flood-map #fm-roads .rd-local-case, #flood-map #fm-roads .rd-major-case { stroke: #1a1e23; }
#flood-map #fm-roads .rd-local { stroke: #343a43; } #flood-map #fm-roads .rd-major { stroke: #48505b; }
#flood-map .z-x { fill: #21262d; stroke: #2e343c; }
#flood-map .z-sfha { fill: var(--blue); fill-opacity: .26; stroke: #4c90f0; stroke-opacity: .6; }
#flood-map .z-ae { fill: var(--blue); fill-opacity: .48; stroke: var(--blue-t); stroke-opacity: .7; }
#flood-map .z-a { stroke: #4c90f0; }
#flood-map .z-ah, #flood-map .z-ao { fill: #2d72d2; fill-opacity: .38; stroke: var(--blue-t); }
#flood-map .z-ve, #flood-map .z-v { fill: #7961db; fill-opacity: .35; stroke: #9881f3; }
#flood-map .z-floodway { stroke: var(--blue-t); }
#flood-map .z-x500 { fill: var(--orange); fill-opacity: .14; stroke: #9c5c14; }
#flood-map #fm-hatch-a rect { fill: var(--blue); fill-opacity: .22; } #flood-map #fm-hatch-a path { stroke: #4c90f0; }
#flood-map #fm-hatch-fw rect { fill: #184a90; fill-opacity: .75; } #flood-map #fm-hatch-fw path { stroke: var(--blue-t); stroke-opacity: .6; }
#flood-map .fm-zone { fill: #e5ecf6; stroke: #1e2329; }
#flood-map .fm-zone.zl-x { fill: var(--tx-3); } #flood-map .fm-zone.zl-x500 { fill: var(--orange-t); }
#flood-map #fm-target, #flood-map .sw-target { fill: #fff; fill-opacity: .12; stroke: #fff; stroke-width: 2.2; }
#flood-map #fm-target-ae { fill: var(--blue-t); fill-opacity: .5; }
#flood-map .site circle, #flood-map .sw-site { fill: #e76a6e; stroke: #1e2329; stroke-width: 1.2; }
#flood-map #fm-legend { display: none; }
#flood-map #fm-rings .ring { stroke: #fff; stroke-opacity: .35; }
#flood-map #fm-rings text, #flood-map #fm-scale text { fill: var(--tx-2); }
#flood-map #fm-scale path { stroke: var(--tx-2); }
#flood-map .fm-label { fill: var(--tx-4); stroke: #1e2329; }
#flood-map .fm-label.water { fill: #6f9ccf; }
#flood-map .site:not(.in1mi) { display: none; }  /* 622 sites in the frame: only the 79 within a mile are drawn */
#fm-flood { transition: clip-path 5.5s var(--out) .4s; clip-path: inset(0 0 0 0); }
#fm-target { transition: fill-opacity .9s 4.6s, stroke-opacity .9s 4.6s; }
#fm-target-ae { transition: fill-opacity .9s 5.6s; }
#fm-sites { transition: opacity 1.2s 8.4s; }
#fm-rings .ring { transform-box: view-box; transform-origin: 600px 320px; transition: transform 1.8s var(--out), opacity 1s; }
#fm-rings .r1 { transition-delay: 6.4s; } #fm-rings .r3 { transition-delay: 7.2s; }
.fm-pulse { fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0; transform-box: view-box; transform-origin: 600px 320px; }

/* 06 Copilot: one conversation replaying, the stream following each new turn */
#desk .copilot { height: 100%; margin: 0; display: flex; flex-direction: column; overflow: hidden; font-size: 13.5px; }
.cp-head { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--app-line); background: var(--card-2); white-space: nowrap; overflow: hidden; }
.cp-head b { font-weight: 500; }
.cp-stream { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; align-content: start; gap: 14px; padding: 14px; }
.cp-q { justify-self: end; max-width: 86%; padding: 8px 11px; border-radius: 2px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--tx-1); }
.cp-k { color: var(--app-muted); font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px !important; }
.cp-bar { height: 2px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.cp-bar i { display: block; height: 100%; background: var(--warm); transform-origin: left; transition: transform 2.2s var(--out); }
.cp-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 500 12.5px var(--mono); color: var(--app-ink-2); }
.cp-docs li { display: flex; align-items: center; gap: 8px; transition: opacity .3s; transition-delay: calc(var(--i, 0) * .38s + .2s); }
.cp-docs li::before { content: ""; width: 10px; height: 12px; border: 1px solid var(--line-3); background: repeating-linear-gradient(var(--card) 0 3px, var(--line-2) 3px 4px); }
.cp-docs li::after { content: "✓"; margin-left: auto; color: var(--tx-2); font-weight: 700; transition: opacity .2s; transition-delay: calc(var(--i, 0) * .38s + .5s); }
.cp-a p b { font-weight: 600; color: #fff; }
.cp-a sup, .cp-t sup { color: var(--tx-2); font-weight: 600; font-size: 11.5px; }
.cp-t { width: 100%; border-collapse: collapse; margin: 8px 0 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cp-t th { text-align: left; color: var(--app-muted); padding: 6px 7px; background: var(--card-2); border-bottom: 1px solid var(--app-line); font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cp-t td { padding: 6px 7px; border-bottom: 1px solid var(--line); transition: opacity .3s, background .6s; }
.cp-score td:last-child, .cp-cmp td:not(:first-child) { font-family: var(--mono); font-size: 12.5px; }
.cp-src { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-src span { padding: 2px 7px; border-radius: 2px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--tx-2); font-size: 11px; }

/* ---------- Florida: the real parcels, full bleed */
.proof { position: relative; isolation: isolate; min-height: min(100svh, 980px); box-sizing: border-box; padding: 140px 5% 60px; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto; grid-template-areas: "copy copy ." "stats stats stats";
  row-gap: 48px; align-items: start; border-top: 1px solid var(--line); }
.proof .film-shade { background: linear-gradient(90deg, rgb(24 28 34 / 82%), rgb(24 28 34 / 35%) 42%, transparent 65%), linear-gradient(0deg, var(--g0), transparent 30%),
  linear-gradient(180deg, var(--g0), transparent 18%); }
.proof-copy { grid-area: copy; max-width: 560px; }
.proof-copy > p:last-child { color: var(--tx-2); font-size: 18px; line-height: 1.55; }
/* three stats on the section's three columns */
.proof-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgb(255 255 255 / 14%); }
.proof-stats div { display: flex; flex-direction: column; gap: 8px; padding: 18px 24px 0 0; }  /* a label that wraps keeps the figures level */
.proof-stats dt { font: 500 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); text-wrap: balance; }
.proof-stats dd { margin: auto 0 0; font: 400 clamp(30px, 3.2vw, 46px)/1 var(--sans); letter-spacing: -0.045em; color: var(--tx-1); font-variant-numeric: tabular-nums; }

/* ---------- the call to action: the country again, closer, under the headline */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: 180px 5% 170px; text-align: center; border-top: 1px solid var(--line); }
.cta-bg { position: absolute; inset: -6%; z-index: -2; background: url(/acquisition/site-nation.webp) 62% 55% / cover no-repeat; opacity: .75; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgb(28 33 39 / 55%), rgb(28 33 39 / 92%) 75%), linear-gradient(0deg, var(--g0), transparent 25%, transparent 75%, var(--g0)); }
.cta-copy { max-width: 900px; margin: 0 auto; }
.cta .eyebrow { justify-content: center; }
#main-landing .cta h2 { font-size: clamp(44px, 6.2vw, 104px); line-height: .98; letter-spacing: -0.05em; margin-bottom: 28px; }
#main-landing .cta h2 em { display: block; }
.cta-clock { display: inline-flex; gap: 12px; align-items: baseline; margin: 0 0 36px !important; padding: 9px 14px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 2px;
  background: rgb(28 33 39 / 60%); backdrop-filter: blur(8px); font: 500 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.cta-clock b { font: 500 15px var(--mono); letter-spacing: 0; text-transform: none; color: var(--tx-1); }
.cta .hero-actions { justify-content: center; }

/* ---------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8%; max-width: 1240px; margin: 0 auto; padding: 120px 5% 130px; }
.faq-side p:not(.eyebrow) { color: var(--tx-2); margin-bottom: 24px !important; }
.faq-side button { height: 44px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17px;
  font-weight: 400; letter-spacing: -0.01em; color: var(--tx-1); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; flex: none; width: 14px; height: 14px; }
.faq-list summary span::before, .faq-list summary span::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--tx-2); transition: transform .25s; }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0deg); }
.faq-list summary:focus-visible { outline: 2px solid var(--tx-1); outline-offset: 4px; border-radius: 2px; }
.faq-list details p { padding: 0 0 22px; color: var(--tx-2); max-width: 640px; }

/* the footer in the page's charcoal, one step darker, its etched city in matching greys (site.css keeps the umber on the document pages) */
.site-foot { background: #171b21; border-top: 1px solid var(--line); }
.site-foot .foot-pitch h2 { font: 400 clamp(30px, 3.2vw, 44px)/1.08 var(--sans); letter-spacing: -0.035em; color: var(--tx-1); }
.site-foot .foot-links h3, .site-foot .foot-copy { color: var(--tx-3); }
.site-foot .foot-links a { color: var(--tx-2); } .site-foot .foot-links a:hover { color: var(--tx-1); }
.site-foot .btn-light { background: var(--tx-1); color: var(--g0); border-radius: 2px; }
.foot-sky .far { fill: #1d2228; } .foot-sky .mid { fill: #1b2026; } .foot-sky .fr, .foot-sky .br-t { fill: #171b21; } .foot-sky .sd { fill: #222830; }
.foot-sky .tp { fill: #2a3039; } .foot-sky .br-sd { fill: #20252c; }

/* a replay: the loop puts an engine back to its start without animating the way back */
.rs, .rs *, .rs *::before, .rs *::after { transition: none !important; animation: none !important; }

/* ---------- motion: start states (only with body.motion) and loops, all behind the motion preference */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
.motion .hero-copy > *, .motion .hero-hud { transition: opacity 1s var(--out), transform 1s var(--out); }
.motion .hero-copy > :nth-child(2) { transition-delay: .12s; } .motion .hero-copy > :nth-child(3) { transition-delay: .24s; } .motion .hero-copy > :nth-child(4) { transition-delay: .36s; }
.motion .hero-hud { transition-delay: .6s; }
.motion .hero:not(.in) .hero-copy > *, .motion .hero:not(.in) .hero-hud { opacity: 0; transform: translateY(18px); }
.records-rail { animation: rail 60s linear infinite; }
@keyframes rail { to { transform: translateX(-50%); } }
/* the engine room runs only on screen: off screen no transition starts and no animation plays (landing.js stops its timers) */
.motion .room { transition: opacity .8s var(--out), transform .8s var(--out); }
.motion .platform:not(.in) .room { opacity: 0; transform: translateY(24px); transition: none; }
.motion .platform:not(.in) .room *, .motion .platform:not(.in) .room *::before, .motion .platform:not(.in) .room *::after { transition: none !important; animation: none !important; }
.platform.in .eng-live::before { animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }
.platform.in .eng-beat g { animation: beat var(--beat, 3s) linear infinite; }  /* each row's trace on its own clock */
@keyframes beat { to { transform: translateX(-48px); } }
.platform.in .room:not(.held):not(.paused) .rail [aria-selected="true"]::after { opacity: .9; animation: dwell var(--dwell, 8s) linear both; }  /* the cycle's clock */
@keyframes dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rec-fields > div::before { transition: transform .45s var(--out) calc(var(--i, 0) * 50ms); }  /* the lit fields come on left to right */
.rec-fields dt, .rec-fields dd { transition: color .45s; }
.platform.in .rec-fields .fed::after { animation: feed 1.8s linear infinite; }  /* a light running down each lit wire */
@keyframes feed { from { background-position: 2px 0, 0 100%; } to { background-position: 2px 34px, 0 100%; } }
.platform.in .stage .eng:not([hidden]) { animation: eng-in .55s var(--out) both; }
@keyframes eng-in { from { opacity: 0; transform: translateY(10px); } }
/* each engine that takes the stage reads the record: one warm line passes down the window, once */
.stage::after { content: ""; position: absolute; left: 0; right: 0; top: -90px; height: 90px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(244 233 214 / 4%) 70%, rgb(244 233 214 / 35%) calc(100% - 1px), var(--warm)); }
.platform.in .stage.read::after { animation: stage-read 1.2s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes stage-read { from { top: -90px; opacity: .9; } 80% { opacity: .9; } to { top: 100%; opacity: 0; } }
.motion #desk .cp-stream > [data-at] { transition: opacity .45s var(--out), transform .45s var(--out); }
.motion #desk .cp-stream > [data-at]:not(.on) { opacity: 0; transform: translateY(12px); }
.motion #desk .cp-read:not(.on) .cp-docs li, .motion #desk .cp-read:not(.on) .cp-docs li::after { opacity: 0; }
.motion #desk .cp-a > p, .motion #desk .cp-a tr, .motion #desk .cp-src span { transition: opacity .4s var(--out), transform .4s var(--out); transition-delay: calc(var(--k, 0) * .32s); }
.motion #desk .cp-a:not(.on) > p, .motion #desk .cp-a:not(.on) tr { opacity: 0; transform: translateY(6px); }
.motion #desk .cp-a:not(.on) .cp-src span { opacity: 0; transform: scale(.6); }
.motion #desk .cp-a.on sup { animation: cite-pop .45s var(--out) both; animation-delay: calc(var(--k, 0) * .32s + .25s); }
@keyframes cite-pop { from { opacity: 0; transform: scale(0); } }
.motion #desk .cp-q[data-type].on::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.motion #desk .cp-read:not(.on) .cp-bar i { transform: scaleX(0); }
.motion .tr { will-change: max-height; }
.motion #ownership .node:not(.shown) { opacity: 0; transform: translateX(-14px); }
.motion #ownership .node:not(.shown) + .node::before, .motion #ownership .node:not(.shown)::before { transform: scaleY(0); }
.motion #debt:not(.in) .wb i { transform: scaleY(0); }
.motion #debt:not(.in) .wb-tip { opacity: 0; transform: translateY(6px) scale(.9); }
.motion #debt:not(.in) .ln:not(.ln-h) { opacity: 0; transform: translateX(-10px); }  /* inside the row padding: no text slides in from under the edge */
.motion #debt:not(.in) .wb.sel { outline-color: transparent; }
.motion #zoning:not(.in) .floor { opacity: 0; transform: translateY(-40px); }
.motion #zoning:not(.in) .dim { opacity: 0; }
.motion #risk:not(.in) #fm-flood { clip-path: inset(0 100% 0 0); }
.motion #risk:not(.in) #fm-rings .ring { transform: scale(.2); opacity: 0; }
.motion #risk:not(.in) #fm-target { fill-opacity: 0; stroke-opacity: 0; }
.motion #risk:not(.in) #fm-target-ae, .motion #risk:not(.in) #fm-sites { opacity: 0; fill-opacity: 0; }
.motion #risk:not(.in) #fm-rings text { opacity: 0; }
.motion .flt.on { animation: chip-in .35s var(--out); }
.motion .proof-copy, .motion .proof-stats { transition: opacity 1s var(--out), transform 1s var(--out); }
.motion .proof-stats { transition-delay: .25s; }
.motion .proof:not(.in) .proof-copy, .motion .proof:not(.in) .proof-stats { opacity: 0; transform: translateY(22px); }
.motion .cta.in .cta-bg { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -1.5%); } }
.motion .cta-copy { transition: opacity 1s var(--out), transform 1s var(--out); }
.motion .cta:not(.in) .cta-copy { opacity: 0; transform: translateY(24px); }
}

/* ---------- widths */
@media (max-width: 1180px) {
  .room { grid-template-columns: 252px minmax(0, 1fr); column-gap: 32px; }
  .record { padding-bottom: 22px; }
  .rec-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .rec-fields > div::after { display: none; }  /* two rows of fields: the lit ones say it without wires */
  .proof { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "copy" "stats"; row-gap: 32px; }
}
/* ---------- one screen (owner 2026-10-06, twice: "condense it so it's fully on the screen"; "I can't read the top and can't see
   the bottom at the same time"). On a laptop or a desktop the platform section, from its heading to the last rail row, the stage
   and the call to action, is one screen under the 68 px bar from a 640 px window up: the section's content is the window less the
   bar and a 12 px margin each side (at most 1000 px). The heading is one line with its line under it; the call to action sits
   under the rail, so the stage runs the room's height; the stage's screen takes what the record and its title bar leave, and each
   engine drops its tertiary parts on a short stage (landing-engines.css). Spacing steps down with the window's height; nothing
   here sets type under 11 px. The Dossier does the same (landing-dossier.css). */
@media (min-width: 861px) {
  .platform { box-sizing: content-box; display: flex; flex-direction: column; height: min(1000px, calc(100svh - 92px)); padding-top: 110px; padding-bottom: 120px; }
  .platform > .sec-head, .platform > .room { width: 100%; }
  .platform > .sec-head { flex: none; grid-template-columns: minmax(0, 1fr); row-gap: 6px; margin-bottom: clamp(14px, 2.8svh, 40px); }
  #main-landing .platform > .sec-head h2 { margin-bottom: 0; font-size: clamp(30px, min(4.6vw, 6.4svh), 60px); }
  .platform > .sec-head .eyebrow { margin-bottom: clamp(4px, 1svh, 12px) !important; }
  .platform > .sec-head > p:last-child { max-width: none; font-size: clamp(15px, 2.2svh, 18px); }
  .room { flex: 1 1 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "rail record" "rail stage" "cta stage"; }
  .rail[role="tablist"] { min-height: 0; }
  /* owner 2026-10-06 "spread it down a little ... so they're not all jumbled up": the rows share the rail's height, never taller than 60px */
  .rail [role="tab"] { flex: 1 1 auto; max-height: 60px; }
  .record { padding-bottom: clamp(12px, 2.4svh, 22px); }
  .rec-id { margin-bottom: clamp(4px, 1svh, 8px) !important; }
  .rec-fields > div { padding-top: clamp(5px, 1svh, 8px); }
  .rec-fields > div::after { height: clamp(12px, 2.4svh, 22px); }  /* the wire still reaches the stage */
  .stage { display: flex; flex-direction: column; min-height: 0; container: stage / inline-size; }
  /* the engine's title and its line share one bar over its screen; the screen is a size container (eng), so each engine can drop
     its tertiary parts on a short stage as it does on a narrow one */
  .stage .eng:not([hidden]) { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .eng-head { padding-top: clamp(8px, 1.4svh, 12px); padding-bottom: clamp(8px, 1.4svh, 12px); border-bottom: 1px solid var(--line); }
  .eng-cap { align-self: stretch; display: flex; align-items: center; padding: clamp(8px, 1.4svh, 12px) 20px clamp(8px, 1.4svh, 12px) 4px; font-size: 13.5px; line-height: 1.35; }
  .eng-body { grid-column: 1 / -1; min-height: 0; height: auto; container: eng / size; }
  #ownership .eng-body { padding-top: 12px; padding-bottom: 12px; }
  #ownership .chain-list { gap: 8px; }
  /* the call to action under the rail: the button, its line under it */
  .room-cta { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; padding-top: clamp(12px, 2svh, 20px); }
  .room-cta button { height: clamp(36px, 5svh, 42px); }
  .room-cta p { font-size: 13px; line-height: 1.45; }
  .rail [role="tab"] { padding-top: 2px; padding-bottom: 2px; }
  .rail [role="tab"] b { font-size: 14px; line-height: 1.3; }
  .rail-g { padding-top: clamp(6px, 1.3svh, 12px); padding-bottom: 4px; }
}
@container stage (max-width: 620px) {  /* a narrow stage: the engine's line under its title */
  .stage .eng:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .eng-head { padding-bottom: 2px; border-bottom: 0; }
  .eng-cap { padding: 0 20px 8px 44px; border-bottom: 1px solid var(--line); }
}
@media (min-width: 861px) and (max-height: 990px) {  /* the rail shows the selected engine's live state only */
  .rail [role="tab"]:not([aria-selected="true"]) .eng-state { display: none; }
}
@media (min-width: 861px) and (max-height: 860px) {  /* a laptop window: a tighter rail */
  .rail [role="tab"] { padding-top: 1px; padding-bottom: 1px; }
  .rail [role="tab"] b { font-size: 13.5px; line-height: 1.25; }
  .rail-g { padding-top: 6px; padding-bottom: 3px; }
}
@media (min-width: 861px) and (max-height: 720px) {  /* a short window: the call to action back under the stage, a narrower rail and record */
  .room { grid-template-columns: 232px minmax(0, 1fr); column-gap: 28px; grid-template-areas: "rail record" "rail stage" "rail cta"; }
  .eng-beat, .eng-head .eng-live { display: none; }  /* the traces and the Live mark go: the record and the title bar get the width */
  .eng-state { font-size: 11px; }  /* the selected engine's state on one line */
  .platform > .sec-head .eyebrow { display: none; }  /* the top bar's Platform names the section */
  .room-cta { flex-direction: row; align-items: center; gap: 14px 18px; padding-top: 10px; }
  .room-cta button { flex: none; }
  .room-cta p { flex: 0 1 460px; min-width: 0; line-height: 1.4; }
  .rail [role="tab"] b { font-size: 13px; }
  .rail-g { padding-top: 5px; }
  .rec-id { column-gap: 10px; }
  .rec-fields { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 10px; row-gap: 0; }
  .rec-fields dd { margin-top: 2px; font-size: 11.5px; line-height: 1.3; }
}
@media (max-width: 960px) { .topbar nav { display: none; } }
@media (max-width: 860px) {
  .hero { padding-top: 110px; }
  .hero h1 span, .hero h1 em { white-space: normal; }
  .hero .film { object-position: 70% 50%; background-position: 70% 50%; }
  .film-tags { display: none; }  /* the copy fills a phone's hero; landing.js skips the layer below 861px */
  .hero .film-shade { background: linear-gradient(0deg, var(--g0) 8%, rgb(28 33 39 / 75%) 45%, rgb(28 33 39 / 35%) 75%, rgb(28 33 39 / 55%)); }
  .hero-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .hero-hud dd { font-size: 28px; }
  .lift { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-top: 48px; padding-bottom: 44px; }
  .lift-head { padding-right: 0; max-width: 560px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* the room in one column: the record as a 2 x 4 grid, the rail a row of chips that scrolls inside itself, the stage full width */
  .room { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "record" "rail" "stage" "cta"; }
  .record { padding-bottom: 18px; }
  .rec-hint { margin-left: 0; flex-basis: 100%; }
  .rec-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; border-top: 0; }
  .rec-fields > div { padding: 9px 0 10px; border-top: 1px solid var(--line); }
  .rail[role="tablist"] { flex-direction: row; align-items: stretch; gap: 8px; margin-bottom: 14px; padding-bottom: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 85%, transparent); }  /* right fade only: the first group label is never masked */
  .rail[role="tablist"]::-webkit-scrollbar { display: none; }
  .rail-g { flex: none; align-self: center; padding: 0 0 0 8px; border: 0; }
  .rail-g:first-child { padding: 0; }
  .rail [role="tab"] { flex: none; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n name" "state state"; column-gap: 8px; padding: 9px 12px 10px;
    border: 1px solid var(--line-2); border-radius: 2px; }
  .rail [aria-selected="true"], .rail [aria-selected="true"]:hover { border-color: var(--warm); box-shadow: none; background: rgb(244 233 214 / 6%); }
  .rail [role="tab"] b { font-size: 14px; white-space: nowrap; }
  .eng-state { white-space: nowrap; }
  .rail [role="tab"]::after { inset: auto 12px 0 12px; }
  .eng-beat { display: none; }
  .eng-head { padding: 13px 14px 0; gap: 10px; }
  .eng-head b { font-size: 16.5px; }
  .eng-head { flex-wrap: wrap; row-gap: 2px; }
  .eng-also { order: 3; flex-basis: 100%; padding-left: 28px; }
  .eng-cap { box-sizing: border-box; min-height: 56px; padding: 3px 14px 12px; font-size: 13px; }  /* two lines' room: the stage holds still */
  .eng-body { height: 540px; padding: 10px; }
  .room-cta { padding-top: 22px; }
  /* the engines at phone width: real sizes, fewer columns, nothing cut */
  #origination .ui-head .ui-muted { display: none; }
  #origination .ui-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 78%, transparent); }
  .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; height: auto; max-height: 64px; padding: 7px 12px; white-space: normal; }
  .tr > :nth-child(1) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .tr > :nth-child(5) { grid-row: 2; grid-column: 1; }
  .tr > :nth-child(7) { grid-row: 2; grid-column: 2; }
  .tr > :nth-child(2), .tr > :nth-child(3), .tr > :nth-child(4), .tr > :nth-child(6), .tr.th { display: none; }  /* property, loan and score */
  .tr[data-cut]::after { top: 8px; transform: none; right: 12px; }
  .tr.striking > :first-child small { visibility: hidden; }  /* the reason chip takes the city's place on the first line */
  .tr.out, #origination:not([data-stage="4"]) .tr.late { padding-block: 0; border-bottom-width: 0; }  /* a folded row folds whole: no padding left as a gap */
  .chain-list { gap: 10px; }
  .node, .node.person { width: 100%; margin-left: 0; padding: 8px 12px; }
  .node + .node::before { top: -11px; height: 11px; }
  .node:not(.person) small { display: none; }  /* the filings stay on each step; the person keeps every line */
  .wall-chart { height: 150px; padding: 4px 12px 0; }
  .wall-key { padding: 8px 12px 10px; }
  .ln { grid-template-columns: minmax(0, 1fr) 92px 72px; padding: 6px 12px; }
  .ln > :nth-child(4), .ln small { display: none; }
  .wb-tip { display: none; }  /* the selected loan is the first row under the chart */
  .mass svg { max-height: 260px; }
  .mass .dim, .mass .lot-k { display: none; }  /* the floors' story is in the table under the building */
  #flood-map .fm-zone, #flood-map .fm-label { font-size: 19px; }
  #flood-map #fm-rings text, #flood-map #fm-scale text { font-size: 18px; }
  #desk .copilot { font-size: 13px; }
  .proof .film { object-position: 65% 50%; background-position: 65% 50%; }
  .proof .film-shade { background: linear-gradient(0deg, var(--g0) 10%, rgb(28 33 39 / 70%) 50%, rgb(28 33 39 / 55%)); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar .wordmark { font-size: 21px; }
  .top-actions { gap: 6px; }
  .top-actions button { padding: 0 10px; font-size: 12.5px; height: 34px; }
  .top-actions #open-signin { display: none; }  /* the hero's Sign in covers it on a phone */
  .top-actions button { white-space: nowrap; }
  .top-actions #open-signup { padding: 0 9px; font-size: 12px; }  /* one line beside the pair on a 375px phone */
  .hero, .platform, .proof, .cta, .faq { padding-left: 16px; padding-right: 16px; }
  .eng-body { height: 460px; }  /* a phone: each engine at its phone layout */
  .hero h1 { font-size: 46px; }
  .hero-pill { font-size: 10px; letter-spacing: .05em; }
  .hero-hud { grid-template-columns: minmax(0, 1fr); }
  .hero-hud div { padding: 14px 0 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
  .hero-hud small { grid-column: 1 / -1; }
  .lift { padding-left: 16px; padding-right: 16px; }
  /* one figure per row: the number on the left, its scope beside it */
  .lift-stats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lift-stats div { grid-row: auto; grid-template-rows: auto; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "n dt";
    column-gap: 16px; row-gap: 4px; align-items: center; padding: 14px 0; }
  .lift-stats dt { grid-area: dt; align-self: center; }
  .lift-stats dd { grid-area: n; margin: 0; font-size: 44px; }
  .hero-lede { font-size: 16px; }
  .proof-stats { grid-template-columns: minmax(0, 1fr); }
  .records-rail li { font-size: 12px; }
}