/* 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, 4.2vw, 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 10px 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; }
/* the small Sign in and Demo pair by the wordmark (owner 2026-10-05): always there, one click each */
.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, .top-actions #open-demo { background: transparent; color: var(--tx-1); border-color: rgb(255 255 255 / 28%); }
.top-actions #open-signin:hover, .top-actions #open-demo: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); }
/* 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 9, docs/design/landing-rev9-engines.md). Four group tabs across the top, each
   with its promise and, while the groups move on by themselves, a bar filling over the group's time; under them the selected
   group's four engines play side by side in a 2x2 grid of tiles (landing.js runs the loops and the cycle). On desktop a tile's body
   is one fixed 880 x 540 stage zoomed to the tile (--z), so every engine frames the same; on phones the tabs are a row of chips
   and the tiles stack. */
.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; background: var(--line); border: 1px solid var(--line); display: grid; gap: 1px; }
.groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.groups button { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 6px; height: auto; min-height: 128px; padding: 22px 24px 26px;
  border: 0; border-radius: 0; background: var(--g1); color: var(--tx-3); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background .3s, color .3s; }
.groups button:hover { background: #20262d; color: var(--tx-2); }
.grp-n { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--tx-4); }
.groups b { font: 500 24px/1.1 var(--sans); letter-spacing: -0.025em; color: var(--tx-2); transition: color .3s; }
.groups small { font-size: 13.5px; line-height: 1.45; color: var(--tx-3); }
.groups [aria-selected="true"], .groups [aria-selected="true"]:hover { background: var(--card); color: var(--tx-1); box-shadow: inset 0 2px 0 var(--warm); }
.groups [aria-selected="true"] b { color: var(--tx-1); }
.groups [aria-selected="true"] .grp-n { color: var(--warm); }
.grp-bar { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--warm); opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
#main-landing .groups button:focus-visible, #main-landing .console > .group:focus-visible { outline: 2px solid var(--tx-1); outline-offset: -2px; }
/* the console: the four groups in one cell, the selected one shown; an idle one is out of sight, the tab order and the
   accessibility tree */
.console { display: grid; min-width: 0; background: var(--g1); }
.console > .group { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); min-width: 0; }
.console > .group.idle { visibility: hidden; opacity: 0; }
.console > .group, .console .eng { scroll-margin-top: 230px; }
/* owner 2026-10-05: a group's four tiles in one row; a tile's Enlarge (landing.js) gives it the row and the other three share the next */
.console > .group:has(.eng.focus) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.console .eng.focus { grid-column: 1 / -1; }
.console .eng.focus .eng-body { margin: 0 auto; }
.eng-zoom { flex: none; margin-left: 10px; width: 26px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--tx-2);
  font: 400 15px/1 var(--sans); text-transform: none; cursor: pointer; }
.eng-zoom:hover { color: var(--tx-1); border-color: var(--line-3); }  /* a link to a group or an engine shows the group tabs above it */
.eng { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--g1); }
.eng-head { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 500 12px var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.eng-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tx-1); }
.eng-n { font-family: var(--mono); color: var(--tx-4); }
.eng-live { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--tx-3); }
.eng-live::before { content: ""; width: 6px; height: 6px; background: var(--warm); opacity: .9; }
.eng-body { position: relative; box-sizing: border-box; width: 880px; height: 540px; overflow: hidden; padding: 16px; zoom: var(--z, 1); }  /* the stage */
.eng-body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36px; background: linear-gradient(0deg, var(--g1), transparent); pointer-events: none; }
.eng-cap { flex: 1; padding: 12px 14px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--tx-2); }

/* 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: 13px/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: 12px; }
.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: 12.5px; }
.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: 12.5px; }
.kv dd { margin: 0; font: 500 12.5px 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: 12px; 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: 12.5px; }
.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: 11.5px; }
.th { height: 32px; color: var(--app-muted); font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--card-2); }
.sc { display: flex; align-items: center; gap: 6px; font: 500 12.5px 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; }
#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: 12px; }
.mon { opacity: .4; transition: opacity .4s; font: 500 10.5px 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 { zoom: .84; margin: 0 auto; padding: 4px 6px; max-width: 640px; }
.chain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.node { position: relative; width: min(390px, 100% - var(--i, 0) * 6%); 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: 11.5px; }
.doc-src { position: absolute; top: 10px; right: 12px; font: 500 9.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 12px 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 12.5px var(--mono); color: var(--tx-1); }
.p-line em { padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line-2); font: 600 9.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: 11px; color: var(--tx-2); }

/* 03 debt: the maturity wall */
#debt .wall { zoom: .88; overflow: hidden; }
.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 10.5px 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 11px 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 11px 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 10.5px 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: 12.5px; }
.ln { display: grid; grid-template-columns: minmax(0, 1.3fr) .8fr .6fr 1.1fr; gap: 10px; align-items: center; padding: 8px 16px; 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 10.5px/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: 12px; }
.ln b { display: block; font-weight: 500; color: var(--tx-1); } .ln small { color: var(--app-muted); font-size: 11.5px; }
.ln-h { color: var(--app-muted); font: 500 10px 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 9.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 10px 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 11.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: 9.5px; }
.cp-t { width: 100%; border-collapse: collapse; margin: 8px 0 6px; font-size: 12px; 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 9.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: 11.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: 10.5px; }

/* ---------- 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%); } }
.eng-live::before { animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }
.motion .room { transition: opacity .8s var(--out), transform .8s var(--out); }
.motion .platform:not(.in) .room { opacity: 0; transform: translateY(24px); }
.platform.in .room:not(.held):not(.paused) [aria-selected="true"] .grp-bar { opacity: .9; animation: grp-fill var(--dwell, 16s) linear both; }  /* the cycle's clock */
@keyframes grp-fill { to { transform: scaleX(1); } }
.console > .group { transition: opacity .6s var(--out), visibility 0s; }
.console > .group.idle { transition: opacity .6s var(--out), visibility 0s .6s; }  /* a cross-fade: out of sight once faded */
.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(-18px); }
.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) {
  .groups button { padding: 18px 18px 22px; min-height: 118px; }
  .groups b { font-size: 20px; }
  .groups small { font-size: 12.5px; }
  .proof { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "copy" "stats"; row-gap: 32px; }
}
@media (max-width: 1199px) { .console > .group, .console > .group:has(.eng.focus) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* 2 x 2 */
@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; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* the group tabs become a row of chips that scrolls sideways; the tiles stack in one column at the phone sizes */
  .groups { display: flex; gap: 8px; padding: 10px; background: var(--g1); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .groups::-webkit-scrollbar { display: none; }
  .groups button { flex: none; width: min(260px, 72vw); min-height: 0; gap: 4px; padding: 12px 14px 14px; border: 1px solid var(--line-2); border-radius: 2px; scroll-snap-align: center; }
  .groups [aria-selected="true"], .groups [aria-selected="true"]:hover { border-color: var(--warm); box-shadow: none; }
  .groups b { font-size: 17px; }
  .groups small { font-size: 12.5px; }
  #origination .parcels-ui { zoom: .82; }
  .tr { grid-template-columns: minmax(0, 1.7fr) .5fr 1.3fr .8fr; gap: 10px; }
  .tr > :nth-child(2), .tr > :nth-child(4), .tr > :nth-child(6) { display: none; }  /* property, units, loan and score */
  #ownership .chain { zoom: .56; }
  #debt .wall { zoom: .84; }
  .ln { grid-template-columns: minmax(0, 1.4fr) .9fr .7fr; }
  .ln > :nth-child(4) { display: none; }
  .mass svg { max-height: 220px; }
  #desk .copilot { font-size: 12.5px; }
  .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: 767px) {  /* one column of tiles at the phone sizes */
  .console > .group, .console > .group:has(.eng.focus) { grid-template-columns: minmax(0, 1fr); }
  .eng-body { width: auto; height: 400px; zoom: 1; }
  #om .eng-body, #rents .eng-body { height: auto; max-height: 400px; }  /* their phone screens are shorter: no empty band */
  .console > .group.idle { display: none; }  /* a taller hidden group would stretch the shown one's tiles */
  .eng-zoom { display: none; }
}
@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, .top-actions #open-demo { display: none; }  /* the pair by the wordmark covers them 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; }
  .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; }
  .hero-lede { font-size: 16px; }
  .proof-stats { grid-template-columns: minmax(0, 1fr); }
  .records-rail li { font-size: 12px; }
}