/* Starter home landing page. One accent (--accent), two radii (--r for controls and blocks inside a
   panel, --r-lg for panels; chips and badges are pills, legend swatches square data marks), one
   surface language (a --line ring on every panel, plus --shadow on the raised ones), spacing on a
   4px scale (4, 8, 12, 16, 20, 24, 32 and up), every icon Phosphor fill, light and dark themes. Amber is reserved for unpublished markers, --bad for form
   errors. z-index scale: map tip 10, place list 15, banner 20, skip link 40. */
:root {
  --bg: #f5f8f7; --surface: #fcfefd; --tint: #e1f0ee;
  --ink: #16262a; --ink-2: #34474b; --muted: #56696d; --line: #d5e2e0;
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --accent: #0f6f73; --accent-hover: #0b5a5d; --on-accent: #f2fbfb;
  --b0: #dcf0ee; --b1: #a9dbd6; --b2: #6cbdb7; --b3: #2f9793; --b4: #0b6a6d;
  /* The stoplight mark: a dark body in both modes, slate lamps, a bright green lit lamp. */
  --sl-body: #16262a; --sl-off: #3b4b4f; --sl-lit: #43d17f; --sl-go: var(--sl-lit); --sl-stop: #ff5a4e; --sl-slow: #ffb020;
  --sl-btn-body: #073234; /* the stoplight body on a filled button: the accent at 45% toward black */
  --amber: #b45309; --amber-ink: #7c3a06; --amber-soft: #fff1dc;
  --bad: #b42318;
  --alarm: #c0394b; /* map class b0: too few starter homes. Never amber, never --bad. */
  --then: #4f6f8f; /* step 3's earlier years: slate blue, next to the recent years' --alarm */
  --shadow: 0 1px 2px rgb(22 38 42 / 0.06), 0 8px 24px rgb(22 38 42 / 0.07);
  --r: 6px; --r-lg: 12px;
  --ring: 0 0 0 1px var(--line);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1718; --surface: #131f21; --tint: #112a2c;
    --ink: #e5f2f1; --ink-2: #c3d8d6; --muted: #97b0ad; --line: #223335;
    --accent: #6fd1cb; --accent-hover: #9be0dc; --on-accent: #0a1a1b;
    --b0: #15302f; --b1: #1b4b4a; --b2: #2e8683; --b3: #4fb0ab; --b4: #8fd8d3;
    --sl-body: #2b3d40; --sl-off: #4a5d61; --sl-btn-body: #325e5b;
    --amber: #f0a13a; --amber-ink: #fbd29a; --amber-soft: #33230d;
    --bad: #ff8a80;
    --alarm: #e0677a; --then: #8fb0d0;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1718; --surface: #131f21; --tint: #112a2c;
  --ink: #e5f2f1; --ink-2: #c3d8d6; --muted: #97b0ad; --line: #223335;
  --accent: #6fd1cb; --accent-hover: #9be0dc; --on-accent: #0a1a1b;
  --b0: #15302f; --b1: #1b4b4a; --b2: #2e8683; --b3: #4fb0ab; --b4: #8fd8d3;
  --sl-body: #2b3d40; --sl-off: #4a5d61; --sl-btn-body: #325e5b;
  --amber: #f0a13a; --amber-ink: #fbd29a; --amber-soft: #33230d;
  --bad: #ff8a80;
  --alarm: #e0677a; --then: #8fb0d0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
  color-scheme: dark;
}

/* The redesign's tokens (exploration/2026-10-20_virtuous_landing_page, v2 mock): --vc-* for the
   wheel's three themes and the stoplight, --lp-* for the band, the maps and the footer. A mock token
   equal to a page token in both modes is an alias of it (--vc-ink is --ink), so one name holds the
   value. The text tokens --vc-go-ink and --vc-homes-ink (below) are the green and the teal for
   small text, darker in light mode so it keeps WCAG AA contrast. */
:root {
  --vc-homes: #0a7d80; --vc-families: #6c3fc9; --vc-places: #2d6fd2;
  --vc-go: #1f8f4a; --vc-go-lit: #3fd97f; --vc-sl-body: var(--sl-body); --vc-sl-off: var(--sl-off);
  --vc-on: #fcfefd; --vc-ground: var(--bg); --vc-disc: var(--surface); --vc-ink: var(--ink); --vc-ink-2: var(--ink-2);
  --vc-muted: var(--muted); --vc-line: var(--line);
  /* The green and the teal as text, or under white text, on the light cards: darker than the mock's,
     so small text passes WCAG AA, as Play's green does (wheel.css --vc-play). Dark mode keeps them. */
  --vc-go-ink: #17703a; --vc-homes-ink: #086a6d;
  --lp-lost: #c0394b; --lp-tint: #eaf3f1; --lp-card: #fcfefd; --lp-house-off: #d3e0de; --lp-grass: #e3f1e6;
  --lp-band: #13262a; --lp-band-2: #1b3338; --lp-on-band: #eef7f5; --lp-band-muted: #9fbab6; --lp-band-line: #2c474c;
  --lp-coral: #ff8a7a; --lp-mint: #5fe0a0; --lp-sky: #7fb0ff;
  --lp-foot: #0f2c22; --lp-on-foot: #e9f5ee; --lp-foot-muted: #a9c8b8;
  --lp-m0: var(--alarm); --lp-m1: #bfe3df; --lp-m2: #7cc4bd; --lp-m3: var(--b3); --lp-m4: #0b5f62; --lp-none: #dfe8e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vc-homes: #5fdcd5; --vc-families: #b99bff; --vc-places: #7cb0ff;
    --vc-go: #4cc27a; --vc-go-lit: #5fe08f; --vc-on: #0a1a1b; --vc-go-ink: var(--vc-go); --vc-homes-ink: var(--vc-homes);
    --lp-lost: #ef7f90; --lp-tint: #102325; --lp-card: #142426; --lp-house-off: #2a3d40; --lp-grass: #15301f;
    --lp-band: #16302f; --lp-band-2: #1d3a3a; --lp-band-line: #2c4b4a;
    --lp-foot: #0a2018; --lp-m1: #1d4644; --lp-m2: #2e7d79; --lp-m4: #8fd8d3; --lp-none: #22343a;
  }
}
:root[data-theme="dark"] {
  --vc-homes: #5fdcd5; --vc-families: #b99bff; --vc-places: #7cb0ff;
  --vc-go: #4cc27a; --vc-go-lit: #5fe08f; --vc-on: #0a1a1b; --vc-go-ink: var(--vc-go); --vc-homes-ink: var(--vc-homes);
  --lp-lost: #ef7f90; --lp-tint: #102325; --lp-card: #142426; --lp-house-off: #2a3d40; --lp-grass: #15301f;
  --lp-band: #16302f; --lp-band-2: #1d3a3a; --lp-band-line: #2c4b4a;
  --lp-foot: #0a2018; --lp-m1: #1d4644; --lp-m2: #2e7d79; --lp-m4: #8fd8d3; --lp-none: #22343a;
}

/* Shared by the band and the sections (v2 mock): the page column, a kicker with its cycle step
   tags (helpers.mjs stepTags; wheel.js picks the step), and the big Fraunces figures. */
.lp-in { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.lp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.lp-kicker > span:first-child { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-muted); }
.lp-tags { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--vc-line); background: var(--lp-card); font-size: 0.74rem; font-weight: 500; line-height: 1.2; color: var(--vc-muted); }
.lp-tags em { margin-right: 4px; font-style: normal; }
.lp-tag { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: var(--vc-on); font-family: inherit; font-size: 0.7rem; font-weight: 600; line-height: 1; cursor: pointer; transition: transform 0.15s; }
.lp-tag:hover { transform: scale(1.15); }
.lp-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; font-variant-numeric: lining-nums tabular-nums; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Fraunces for headlines and big numbers; Plex for everything else. The footer h2 is a label. */
h1, h2, .stat-num, .bar-value, .step-n b { font-family: var(--font-display); }
.lp-foot h2 { font-family: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.stat-num, .bar-value, .top5 b, .home td { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }

/* The center: its logo (AEI blue, as drawn) in place of the letters, then "Housing Center". The page
   has no header bar (owner, 2026-10-22: the wheel is the hero): the mark sits at the left of the
   wheel's eyebrow line (wheel.css .vc-top), and the report's title is on the band. */
.org { flex: none; display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 700; line-height: 1; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
a.org:hover span:not(.sr-only) { text-decoration: underline; text-underline-offset: 3px; }
.aei-logo { width: auto; height: 1.3em; }
.sec { max-width: var(--max); margin-inline: auto; padding: clamp(48px, 6vw, 88px) var(--gutter); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-ghost:hover { background: var(--tint); color: var(--accent-hover); }
.btn-go { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 12px; border-radius: 50%; background: color-mix(in srgb, var(--on-accent) 16%, transparent); transition: transform 0.25s var(--ease); }
.btn:hover .btn-go { transform: translateX(3px); }
/* Phosphor fill glyphs (units.mjs symbols) take the text color. */
.ic { flex: none; width: 1em; height: 1em; fill: currentColor; }
.btn-go .ic { width: 14px; height: 14px; }
.more .ic { margin-left: 4px; vertical-align: -0.125em; }

/* Definition buttons: the Phosphor info glyph beside a term; its definition shows on hover and focus. */
.bar-label, .chart-title { position: relative; }
.tip { display: inline-block; margin-left: 4px; vertical-align: -0.15em; }
.tip-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted); cursor: help; }
.tip-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tip-btn:hover, .tip-btn:focus-visible { color: var(--accent); }
/* Anchored to the label's own line (not the button), so it never runs past the chart's edge. */
.tip-text { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; width: max-content; max-width: min(320px, 100%); padding: 12px 12px; border-radius: var(--r); background: var(--ink); color: var(--bg); font-size: 0.875rem; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: var(--shadow); }
.tip:hover .tip-text, .tip-btn:focus + .tip-text { display: block; }
/* A long definition as bullets, spaced to read. */
/* (Spans, not a list: a definition sits inside a paragraph.) */
.tip-list { display: grid; gap: 8px; }
.tip-list > span { position: relative; padding-left: 1.1em; }
.tip-list > span::before { content: ""; position: absolute; left: 0.2em; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* With script, a definition is placed beside its button and kept inside the window (landing.js). */
.tips-js .tip-text { position: fixed; left: var(--tx, 0px); top: var(--ty, 0px); bottom: auto; max-width: min(320px, calc(100vw - 32px)); }
.tip.tip-closed .tip-text { display: none; }
/* Small controls keep their look but get a tap area of at least 44px, an invisible box centered on
   them. Standalone text links get the same height from padding that takes no layout space. */
.tip-btn, .fn-link, .hlink, .place-copy, .place-back, .cite-copy { position: relative; z-index: 1; }
.tip-btn::after, .fn-link::after, .hlink::after, .place-copy::after, .place-back::after, .cite-copy::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* A footnote right after a definition button or another footnote (a footnote is a .tip too, so
   .tip + .fn matches both) takes its tap area to the right only, so it never covers the control
   before it. */
.tip + .fn .fn-link::after { left: 0; transform: translateY(-50%); }
.more { padding-block: 12px; margin-block: -12px; }
/* Footnotes: a small number after the claim, linking to its numbered source in the footer. Its
   hover text is anchored to the claim's own block, so it stays inside the column. */
.fn { margin-left: 2px; vertical-align: super; font-size: 0.72em; line-height: 0; }
.fn-link { padding: 0 2px; font-weight: 700; text-decoration: none; }
.fn-link:hover { text-decoration: underline; }
.fn-link:focus + .tip-text { display: block; }
.pcard, .lede, .fix-scope, .cell-home figcaption p { position: relative; }
.sources li:target { background: var(--tint); }

figcaption, .src, .stat-base { font-size: 0.875rem; color: var(--muted); }
figcaption p + p { margin-top: 8px; }

/* The link mark after a section title: faint until the title is hovered or the mark is focused;
   a check for a moment once the address is copied. The title stops clear of a sticky banner. */
h2[id] { scroll-margin-top: 64px; }
.hlink { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-left: 0.3em; vertical-align: middle; border-radius: var(--r); color: var(--muted); opacity: 0.3; transition: opacity 0.2s var(--ease), color 0.2s var(--ease); }
.hlink .ic { grid-area: 1 / 1; width: 1rem; height: 1rem; }
.hlink .ic-ok, .hlink.is-copied .ic:not(.ic-ok) { visibility: hidden; }
.hlink.is-copied .ic-ok { visibility: visible; }
h2:hover .hlink, .hlink:focus-visible, .hlink.is-copied { opacity: 1; }
.hlink:hover, .hlink.is-copied { color: var(--accent); }
/* The copy buttons (landing.js): the place link under Find a place, the citation in the footer.
   Small text buttons, quiet until hovered; a copy shows the button's own "copied" label. */
:is(.place-copy, .place-back, .cite-copy) { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 0; border-radius: var(--r); background: none; color: var(--accent); font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; cursor: pointer; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
:is(.place-copy, .place-back, .cite-copy):hover { background: var(--tint); color: var(--accent-hover); }
:is(.place-copy, .place-back, .cite-copy).is-copied { color: var(--ink); }
:is(.place-copy, .place-back, .cite-copy)[hidden] { display: none; }
.place-copy { justify-self: center; margin-top: -4px; }
.place-copy .ic { width: 1rem; height: 1rem; }
.cite-copy { margin-left: 4px; vertical-align: baseline; }

/* The stoplight mark (Green Light Starter Homes). Its colors are custom properties so they reach
   into the <use> copy; --sl-go is registered so the lit lamp can fade in. */
@property --sl-go { syntax: '<color>'; inherits: true; initial-value: #43d17f; }
/* The symbol is a 1:2 box the light fills, so its height is its visible size. */
.sl { flex: none; width: 1em; height: 2em; }
.btn .sl { width: 1.1em; height: 2.2em; margin: -8px 10px -8px -6px; --sl-body: var(--sl-btn-body); --sl-off: color-mix(in srgb, var(--on-accent) 25%, var(--sl-body)); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The footer (v2 mock): the brand and edition, the definitions, the tools and the data, then the
   numbered sources across the row and the fine print, on the dark green --lp-foot. */
.lp-foot { background: var(--lp-foot); color: var(--lp-on-foot); }
.lp-foot .lp-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px clamp(24px, 4vw, 56px); padding-block: 48px 28px; }
.lp-foot h2 { margin: 0 0 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-foot-muted); }
.lp-foot * + h2 { margin-top: 22px; }
.lp-foot p, .lp-foot li { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--lp-on-foot); }
.lp-foot p + p { margin-top: 10px; }
.lp-foot ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lp-foot a { color: var(--lp-on-foot); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--lp-on-foot) 35%, transparent); }
.lp-foot a:hover { color: var(--lp-on-foot); border-bottom-color: currentColor; }
.lp-foot :focus-visible { outline-color: var(--lp-mint); }
.lp-foot .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
.lp-foot .brand + p, .lp-foot .press { color: var(--lp-foot-muted); }
.lp-foot .press { margin-top: 14px; }
.lp-foot .download a { display: inline-flex; align-items: center; gap: 6px; }
.lp-foot .download span { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--lp-foot-muted); }
.foot-sources { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--lp-on-foot) 15%, transparent); }
.sources { margin: 0; padding-left: 1.4em; columns: 2 380px; column-gap: clamp(24px, 4vw, 56px); }
.lp-foot .sources li { break-inside: avoid; padding-bottom: 8px; font-size: 0.8rem; color: var(--lp-foot-muted); }
.lp-foot .sources li::marker { color: var(--lp-foot-muted); }
.lp-foot .sources a { color: var(--lp-foot-muted); }
.sources li:target { background: color-mix(in srgb, var(--lp-mint) 18%, transparent); }
.lp-foot .fine { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--lp-on-foot) 15%, transparent); }
.lp-foot .fine p { font-size: 0.78rem; color: var(--lp-foot-muted); }
.lp-foot .cite-copy { color: var(--lp-mint); }
.lp-foot .cite-copy:hover { background: color-mix(in srgb, var(--lp-mint) 14%, transparent); color: var(--lp-mint); }
.lp-foot .cite-copy.is-copied { color: var(--lp-on-foot); }
.lp-foot .unpub-label { color: var(--amber-ink); }
/* A source that is not published: its amber label at the start of its line, with no box around the
   entry, so its number stays beside it and the list keeps one spacing. */
.lp-foot .sources .unpub { margin-block: 0; outline: 0; border-radius: 0; }
.lp-foot .sources .unpub-label { margin: 0 6px 0 0; padding: 0 6px; font-size: 0.74rem; vertical-align: 0.05em; }
@media (max-width: 860px) { .lp-foot .lp-in { grid-template-columns: minmax(0, 1fr); } }

.banner { position: sticky; top: 0; z-index: 20; padding: 8px var(--gutter); border-bottom: 2px solid var(--amber); background: var(--amber-soft); color: var(--amber-ink); font-size: 0.9375rem; font-weight: 600; text-align: center; }
/* The Virtuous Cycle wheel, the page's opening section: the v2 mock's cycle_section_v2.html, its
   base rules then its polish passes in the mock's order (the tokens --vc-* are in base.css). One
   wheel, the step titles around it on wide screens and listed under it below 1200px; the hub shows
   the picked step. On phones the picked step's title sits in the circle and its detail under it. */
.vc { --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; position: relative; overflow-x: clip;
  font-size: 1rem; line-height: 1.55; font-variant-numeric: lining-nums; }
.vc { background: var(--vc-ground); color: var(--vc-ink); }
.vc button { font: inherit; color: inherit; }
.vc-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.vc-head { text-align: center; padding-block: 16px 0; }
/* The eyebrow line: the center's mark at the content's left edge, the eyebrow centered (owner,
   2026-10-22: no header bar). The two side columns are equal, so the eyebrow stays on the center
   line; the row is no taller than the eyebrow. On phones the mark takes its own line above. */
.vc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.vc-top .org { grid-column: 1; justify-self: start; margin: 0; }
.vc-top .vc-eyebrow { grid-column: 2; }
@media (max-width: 639px) {
  .vc-top { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .vc-top .vc-eyebrow { grid-column: 1; justify-self: center; }
}
.vc-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vc-muted); }
.vc-g { color: var(--vc-go); }
.vc .vc-h1 { margin: 2px auto 0; max-width: none; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; color: var(--vc-ink); }
/* The legend sits under the title at every width (the mock's v2 polish). */
.vc-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--vc-ink-2); }
.vc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.vc-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

.vc-stage { position: relative; padding-block: 58px 40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--vc-go-lit) 13%, transparent), transparent) center 52% / min(1100px, 100%) 100% no-repeat; }
.vc-wheel { position: relative; width: clamp(300px, calc(100svh - 290px), 720px); max-width: 100%; container-type: inline-size; aspect-ratio: 1; margin: 0 auto; }
.vc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vc-arc { fill: none; stroke-width: 16; opacity: 1; transition: opacity .3s; }
.vc-node { cursor: pointer; }
.vc-node:focus { outline: none; }
.vc-disc { fill: color-mix(in srgb, var(--c) 13%, var(--vc-disc)); stroke-width: 2.5; transition: fill .25s; }
.vc-icon { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.vc-halo { fill: none; stroke-width: 2; opacity: 0; transition: opacity .25s; }
.vc-node:hover .vc-halo, .vc-node:focus-visible .vc-halo { opacity: .5; }
.vc-node.on .vc-disc { fill: var(--c); }
.vc-node.on .vc-icon { stroke: var(--vc-on) !important; }
.vc-node.on .vc-halo { opacity: .55; }
.vc-node.lit .vc-halo { opacity: 1; stroke: var(--vc-go-lit) !important; }
.vc-hubline { fill: none; stroke: var(--vc-line); }
.vc-hubfill { fill: var(--vc-disc); filter: drop-shadow(0 12px 28px rgb(22 38 42 / 0.12)); }
.vc-pulse { fill: var(--vc-go-lit); filter: drop-shadow(0 0 6px var(--vc-go-lit)); opacity: 0; transition: opacity .3s; }
.vc-pulse.show { opacity: 1; }

.vc-hub { position: absolute; inset: 22%; display: grid; place-items: center; text-align: center; }
.vc-face, .vc-detail { grid-area: 1 / 1; width: 100%; transition: opacity .3s, transform .3s; }
.vc-hub.picked .vc-face { opacity: 0; transform: scale(.97); pointer-events: none; }
.vc-hub .vc-detail { opacity: 0; transform: translateY(6px); pointer-events: none; }
.vc-hub.picked .vc-detail { opacity: 1; transform: none; pointer-events: auto; }
.vc .vc-face h2 { margin: 10px 0 0; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: clamp(1.3rem, 7.6cqw, 3.7rem); line-height: 1; letter-spacing: -0.02em; color: var(--vc-ink); }
.vc-face h2 span { display: block; color: var(--vc-go); }
.vc .vc-face p { margin: 8px 0 0; font-family: var(--font-display, Georgia, serif); font-style: italic; color: var(--vc-muted); font-size: clamp(0.85rem, 2.7cqw, 1.3rem); }
.vc-start { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.vc-play { display: inline-flex; align-items: center; gap: 8px; padding: 0.6em 1.2em 0.6em 0.95em; border: 0; border-radius: 999px; background: var(--vc-go); color: var(--vc-on) !important; font-weight: 600; font-size: clamp(0.85rem, 2.6cqw, 1.15rem); box-shadow: 0 6px 18px color-mix(in srgb, var(--vc-go) 35%, transparent); cursor: pointer; transition: filter .2s, transform .2s; }
.vc-play:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vc-play svg { width: 13px; height: 13px; fill: currentColor; }
.vc-or { font-size: 0.82rem; color: var(--vc-muted); }

.vc-detail { padding: 0 4%; }
.vc-stat { margin-top: 6px; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; color: var(--c); font-variant-numeric: lining-nums tabular-nums; }
.vc-unit { margin-top: 2px; font-size: 0.8rem; color: var(--vc-muted); }
.vc .vc-title { margin: 8px 0 0; font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 1.15rem; line-height: 1.18; text-wrap: balance; color: var(--vc-ink); }
.vc .vc-body { margin: 6px auto 0; font-size: 0.86rem; line-height: 1.45; color: var(--vc-ink-2); max-width: 34ch; }
.vc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px; font-size: 0.84rem; font-weight: 600; }
.vc-links a { color: var(--c); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.vc-links a:hover { border-bottom-color: currentColor; }
.vc-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 0.78rem; color: var(--vc-muted); font-variant-numeric: lining-nums tabular-nums; }
.vc-nav button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--vc-line); background: var(--vc-disc); cursor: pointer; }
.vc-nav button:hover { border-color: var(--vc-ink-2); }
.vc-nav button.vc-nav-play { width: 34px; height: 34px; border: 0; background: var(--vc-go); color: var(--vc-on); }
.vc-nav svg { width: 13px; height: 13px; }
.vc-nav .st { stroke: currentColor; fill: none; stroke-width: 2; }
.vc-nav .fl { fill: currentColor; }
.vc-nav span { min-width: 6.5em; }

/* Step titles around the wheel */
.vc .vc-label { position: absolute; width: 250px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.06rem; line-height: 1.22; color: var(--vc-ink); text-wrap: balance; transition: background .2s, color .2s; }
.vc-label b { font-family: var(--font-body, system-ui, sans-serif); font-weight: 600; font-size: 0.78rem; color: var(--c); margin-right: 6px; font-variant-numeric: lining-nums tabular-nums; }

.vc-label:hover, .vc-label.on { color: var(--vc-ink); background: color-mix(in srgb, var(--c) 9%, transparent); }
.vc-label.r, .vc-label.l { transform: translateY(-50%); }
.vc-label.up { transform: translateY(-88%); }
.vc-label.down { transform: translateY(-12%); }
.vc-label.l { text-align: right; }
.vc-label.t, .vc-label.b { text-align: center; width: 440px; transform: translateX(-50%); }
.vc-label.t { transform: translate(-50%, -100%); }

.vc-list, .vc-mdetail { display: none; }
@media (max-width: 1199px) {
  .vc-stage { padding-block: 28px 32px; }
  .vc-label { display: none; }
  .vc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 2px 16px; margin: 24px 0 0; padding: 0; list-style: none; }
  .vc-list button { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font-family: var(--font-display, Georgia, serif); font-weight: 600; line-height: 1.25; color: var(--vc-ink-2); }
  .vc-list button b { flex: none; font-family: var(--font-body, system-ui, sans-serif); font-size: 0.78rem; color: var(--c); font-variant-numeric: lining-nums tabular-nums; }
  .vc-list button:hover, .vc-list button.on { color: var(--vc-ink); background: color-mix(in srgb, var(--c) 10%, transparent); }
}
@media (max-width: 639px) {
  .vc-hub { inset: 20%; }
  .vc .vc-face h2 { font-size: 1.35rem; }
  .vc .vc-face p { font-size: 0.85rem; margin-top: 4px; }
  .vc-start { margin-top: 10px; }
  .vc-or { display: none; }
  .vc-play { padding: 7px 14px 7px 11px; font-size: 0.85rem; }
  .vc-hub.picked .vc-face { opacity: 1; transform: none; pointer-events: auto; }
  .vc-hub .vc-detail { display: none; }
  .vc-mdetail { display: block; }
  .vc-mdetail:not(:empty) { margin-top: 16px; padding: 18px; border-radius: 14px; background: var(--vc-disc); border: 1px solid var(--vc-line); text-align: center; }
  .vc-mdetail .vc-body { max-width: none; }
}

/* The fence stands on the dark band, in both modes (the mock). */
.vc-fence { height: 30px; background: var(--lp-band); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30'%3E%3Cpath d='M5 30V8l5-5 5 5v22zM0 14h24v3H0zM0 23h24v3H0z'/%3E%3C/svg%3E") repeat-x bottom left / 24px 30px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30'%3E%3Cpath d='M5 30V8l5-5 5 5v22zM0 14h24v3H0zM0 23h24v3H0z'/%3E%3C/svg%3E") repeat-x bottom left / 24px 30px; }

@media (prefers-reduced-motion: reduce) {
  .vc *, .vc *::before, .vc *::after { transition: none !important; animation: none !important; }
}
@media (max-height: 860px) and (min-width: 640px) {
  .vc-start { margin-top: 10px; gap: 4px; }
  .vc-play { padding: 7px 14px 7px 11px; font-size: 0.86rem; }
  .vc .vc-face p { font-size: 0.9rem; margin-top: 4px; }
}
.vc .vc-h1 { display: flex; align-items: center; justify-content: center; gap: 0.4em; }
.vc .vc-h1 > span { white-space: nowrap; }
@media (max-width: 1100px) { .vc .vc-h1 > span { white-space: normal; } }
.vc-tl { flex: none; height: 0.95em; width: auto; }
.vc-tl .box { fill: var(--vc-sl-body); }
.vc-tl .ear { fill: var(--vc-sl-body); opacity: .85; }
.vc-tl .off { fill: var(--vc-sl-off); }
.vc-tl .go { fill: var(--vc-go-lit); filter: drop-shadow(0 0 3px var(--vc-go-lit)); }

.vc-house { display: block; width: clamp(64px, 22cqw, 150px); height: auto; margin: 0 auto; }
.vc-house .ground { fill: color-mix(in srgb, var(--vc-go) 35%, var(--vc-disc)); }
.vc-house .roof, .vc-house .chimney { fill: var(--vc-ink); }
.vc-house .walls { fill: #f3e4c2; }
.vc-house .door { fill: var(--vc-go); }
.vc-house .win { fill: #fdf7e6; stroke: var(--vc-ink); stroke-width: 2; }
.vc-house .mull { fill: none; stroke: var(--vc-ink); stroke-width: 1.5; }
@media (max-width: 760px) { .vc-tl { display: none; } }
/* One size drives the hero on wide screens: the wheel, its labels, the legend and the space above
   and below all scale with --vc-w, the smaller of what the height and the width allow. The title's
   size is --vc-h1f, so the height term below can subtract it. */
.vc { --vc-h1f: clamp(1.9rem, min(5.4svh, 3.3vw), 4.6rem); }
.vc .vc-h1 { font-size: var(--vc-h1f); }
@media (min-width: 1200px) {
  /* The height term keeps step 1's title clear of the legend, and step 7's title and tag clear of the
     fence and of the scroll cue, on the first screen at every size (tests/e2e/views.spec.mjs). It
     adds up the column from the top of the window:
       the preview banner (--vc-top); there is no header bar (owner, 2026-10-22);
       the head: 68px of padding, the eyebrow line (with the center's mark), gaps and legend, plus
       the title's one line (1.05 --vc-h1f);
       step 1's title and tag (--vc-lh), 10px over it;
       the wheel to step 7's title (1.0094 --vc-w: that title starts 0.94% of the wheel under it);
       step 7's title and tag (--vc-lh), then 16px, then the cue (49px above the window's foot).
     --vc-lh is 2.8 times the titles' size (--vc-lf: 2.5% of the wheel, but never under 0.82rem), so
     the term is the smaller of two: one where the titles scale with the wheel, one where they sit at
     their floor. The stage's bottom padding holds step 7's title and 16px, so the fence clears it
     too. (Before 2026-10-22 the term was a fit, (100svh - 212px) / 1.22, and the bottom padding,
     0.055 --vc-w + 12px, was shorter than step 7's title, so from a 480px wheel up the title ran
     into the fence and, at 1650x768, under the cue.) Where the width is the limit, the wheel is the
     mock's size. */
  .vc {
    --vc-avail: calc(100svh - var(--vc-top) - 68px - 1.05 * var(--vc-h1f) - 10px - 16px - 49px);
    --vc-w: clamp(360px, min(calc(var(--vc-avail) / 1.1494), calc((var(--vc-avail) - 5.6 * 0.82rem) / 1.0094), calc((100vw - 96px) / 2.05)), 1000px);
    --vc-lf: clamp(0.82rem, calc(var(--vc-w) * 0.025), 1.55rem);
    --vc-lh: calc(2.8 * var(--vc-lf));
  }
  .vc-wrap.vc-stage { max-width: none; padding-block: calc(var(--vc-lh) + 10px) calc(var(--vc-w) * 0.0094 + var(--vc-lh) + 16px); }
  .vc-wheel { width: var(--vc-w); }
  .vc .vc-label { width: 44cqw; padding: 0.3em 0.5em; font-size: var(--vc-lf); }
  /* Steps 1 and 7 keep their title on one line, as --vc-lh assumes (at an 80cqw width step 7's
     wrapped under a 390px wheel). */
  .vc .vc-label.t, .vc .vc-label.b { width: max-content; min-width: 80cqw; white-space: nowrap; }
  .vc .vc-label b { font-size: 0.72em; }
}
/* The hub grows with the wheel. */
.vc .vc-face h2 { font-size: clamp(1.3rem, 7.6cqw, 6rem); }
.vc .vc-face p { font-size: clamp(0.85rem, 2.7cqw, 2rem); }
.vc .vc-play { font-size: clamp(0.85rem, 2.6cqw, 1.7rem); }
.vc .vc-or { font-size: clamp(0.78rem, 1.9cqw, 1.25rem); }
.vc .vc-house { width: clamp(64px, 22cqw, 240px); }
.vc .vc-start { margin-top: clamp(10px, 2.6cqw, 34px); }
/* The picked step's detail scales with the wheel too, so every step fits inside the hub's disc with
   a clear margin at every desktop size (tests/e2e/wheel.spec.mjs): its type and its controls are in
   cqw, with floors that stay legible on the smallest laptop wheel (about 420px at 1366x768). The
   grid centers the detail on the disc even when it is taller than the hub's box. */
@media (min-width: 640px) {
  .vc .vc-hub { place-content: center; }
  /* The group's chip left the detail (owner, 2026-10-22); its line is spent on the gaps between the
     figure, the title, the body, the links and the controls, at the same type sizes. */
  .vc .vc-stat { margin-top: 0; font-size: clamp(1.3rem, 5.4cqw, 4.2rem); }
  .vc .vc-unit { margin-top: 0.1em; font-size: clamp(0.66rem, 1.6cqw, 1.1rem); line-height: 1.35; }
  .vc .vc-title { margin: 0.5em auto 0; max-width: 16em; font-size: clamp(0.84rem, 2.5cqw, 1.9rem); line-height: 1.12; }
  .vc .vc-body { margin-top: 0.45em; font-size: clamp(0.66rem, 1.72cqw, 1.25rem); line-height: 1.34; max-width: 35ch; }
  .vc .vc-links { margin-top: 0.65em; gap: 0 1em; font-size: clamp(0.66rem, 1.62cqw, 1.15rem); line-height: 1.35; }
  .vc .vc-nav { margin-top: clamp(6px, 1.8cqw, 16px); gap: clamp(5px, 1.3cqw, 8px); font-size: clamp(0.64rem, 1.55cqw, 0.9rem); line-height: 1.3; }
  .vc .vc-nav button { width: clamp(22px, 5.4cqw, 34px); height: clamp(22px, 5.4cqw, 34px); }
  .vc .vc-nav button.vc-nav-play { width: clamp(26px, 6.2cqw, 40px); height: clamp(26px, 6.2cqw, 40px); }
}
/* v2: the four anchors (1, 4, 7, 10) stand out quietly: a larger node, a thin second ring,
   a heavier title and the tool's name under it. */
.vc-node.anchor .vc-disc { stroke-width: 3; }
.vc-ring2 { fill: none; stroke-width: 1.2; opacity: .5; }
.vc .vc-label.anchor { font-weight: 800; color: var(--vc-ink); }
.vc-label .vc-tag { display: block; margin-top: 0.3em; font: 600 0.6em/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); font-style: normal; }
/* On a hovered or picked title's tint, its number and tag move a fifth toward the ink, so the small
   text keeps WCAG AA on the tint in either mode (the teal and the blue fall under it in light mode). */
.vc-label:is(:hover, .on) :is(b, .vc-tag), .vc-list button:is(:hover, .on) b { color: color-mix(in srgb, var(--c) 80%, var(--vc-ink)); }
/* The screen reader line and the list shown without JavaScript. */
.vc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vc-nojs { max-width: 900px; margin: 24px auto 40px; columns: 2 280px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.5; color: var(--vc-ink); }
/* v2 polish: the compact picked step in the circle on phones; a quiet scroll cue, fixed at the
   bottom of the window until the reader scrolls. */
.vc-mini { display: none; }
@media (max-width: 639px) {
  .vc-hub.picked .vc-face { opacity: 0; pointer-events: none; }
  .vc-hub.picked .vc-mini { display: grid; gap: 4px; padding: 0 8%; text-align: center; }
  .vc-mini span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-muted); }
  .vc-mini b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.15; color: var(--vc-ink); text-wrap: balance; }
  .vc-hub .vc-mini { grid-area: 1 / 1; }
}
.vc-more { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 14px; border-radius: 999px; background: var(--vc-cue-bg); border: 1px solid var(--vc-line); color: var(--vc-muted); font-size: 0.78rem; font-weight: 500; text-decoration: none; transform: translateX(-50%); transition: opacity .4s, color .2s; backdrop-filter: blur(4px); }
.vc-more:hover { color: var(--vc-ink); }
.vc-more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; animation: vc-nudge 2.4s ease-in-out infinite; }
@keyframes vc-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
.vc-more.gone { opacity: 0; pointer-events: none; }
/* Between 640 and 1199px the wheel takes the window's height less the head and the cue's room
   (196px; there is no header bar), and the titles are a list under it. It is never under 400px, the smallest
   wheel whose hub holds every step's detail at the type's floors (a 1024x576 window, 1536x864 at
   150% zoom, would give 344px). Where that floor holds, under a 640px window, the wheel runs past
   the first screen, so the cue would sit on step 7's node: it does not show there. */
@media (max-width: 1199px) and (min-width: 640px) { .vc-wheel { width: min(max(400px, calc(100svh - 196px - var(--vc-top))), 100%); } }
@media (max-width: 1199px) and (min-width: 640px) and (max-height: 639px) { .vc-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .vc-more svg { animation: none; } }
/* The hub's last line ("Step 4 of 12") sits close under the controls. A figure not yet published
   keeps mark()'s amber marker (sections.css), sized down for the hub. */
.vc .vc-of { margin-top: 6px; }
@media (min-width: 640px) { .vc .vc-of { margin-top: 2px; } }
/* In the hub the marker hugs its figure, and its label sits on the outline's top edge, as a legend. */
.vc .vc-statbox.unpub { position: relative; width: fit-content; margin: 0.8em auto 0; padding: 0.55em 0.9em 0.25em; outline-offset: 0; }
.vc .vc-statbox.unpub .vc-stat { margin-top: 0; font-size: clamp(1.1rem, 4.2cqw, 3.2rem); }
.vc .vc-statbox .unpub-label { position: absolute; top: 0; left: 50%; margin: 0; padding: 0 0.6em; transform: translate(-50%, -50%); white-space: nowrap; font-size: clamp(0.58rem, 1.35cqw, 0.85rem); line-height: 1.3; }
/* The wheel gives up the preview's sticky banner (--banner-h, which wheel.js keeps equal to the
   banner's height; this first guess holds until it runs), and the window scrolls clear of the
   banner. Production has no banner, so --banner-h is 0 there. The page has no header bar (owner,
   2026-10-22): the center's mark is on the eyebrow line, inside the --vc-w head term above. */
:root { --banner-h: 0px; scroll-padding-top: var(--banner-h); }
:root:has(body > .banner) { --banner-h: 42px; }
@media (max-width: 639px) { :root:has(body > .banner) { --banner-h: 65px; } }
.vc { --vc-top: var(--banner-h); }
/* Three colors as plain values, where the mock mixes them: the eyebrow (the go green 60% toward the
   ink), the scroll cue's glass (the disc at 85%), and Play, a shade darker than the go green in
   light mode so its label passes 4.5:1 (the mock's #1f8f4a gives 4.1). */
.vc { --vc-eyebrow: #1b653d; --vc-cue-bg: rgb(252 254 253 / 0.85); --vc-play: #1a7f41; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vc { --vc-eyebrow: #89d5aa; --vc-cue-bg: rgb(19 31 33 / 0.85); --vc-play: var(--vc-go); }
}
:root[data-theme="dark"] .vc { --vc-eyebrow: #89d5aa; --vc-cue-bg: rgb(19 31 33 / 0.85); --vc-play: var(--vc-go); }
.vc-eyebrow { color: var(--vc-eyebrow); }
.vc .vc-play, .vc-nav button.vc-nav-play { background: var(--vc-play); }
/* The smallest wheels (1280x800, 1366x768): the detail uses the hub's full width and sits a little
   low, where the disc is wider, and the amber marker puts the figure and its unit on one line. */
@media (min-width: 640px) {
  @container (max-width: 480px) {
    .vc .vc-hub.picked { padding-top: 3.5cqw; }
    .vc .vc-detail { padding: 0; }
    .vc .vc-body { line-height: 1.3; max-width: 38ch; }
    .vc .vc-links { line-height: 1.28; }
    .vc .vc-statbox.unpub { display: flex; justify-content: center; align-items: baseline; column-gap: 0.35em; padding: 0.5em 0.45em 0.1em; }
    .vc .vc-of { margin-top: 0; }
  }
}
/* The problem and the solution: the dark band under the wheel, with Find a place (spec 2026-10-21,
   the v2 mock's section A). Two cards side by side, stacked under 900px; each card's panel stretches,
   so the two bottom rows (the Atlas button, the doors) end on one line. Every rule is scoped to
   .lp-ps, so the sections' own .lp-* rules (sections.css, later in the cascade) never reach in. */
.lp-ps { background: var(--lp-band); color: var(--lp-on-band); padding-block: clamp(44px, 6vw, 80px) clamp(48px, 6vw, 84px); }
.lp-ps .lp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 56px); max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.lp-ps .side { display: flex; flex-direction: column; min-width: 0; }
/* The report's title line over both cards (owner, 2026-10-22: it left the header bar), with a
   hairline under it, so the two cards read as its parts. */
.lp-ps .lp-ps-title { grid-column: 1 / -1; margin: 0; padding-bottom: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--lp-band-line); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; color: var(--lp-on-band); }

/* The kicker: the card's name and its cycle step tags (h.stepTags; wheel.js picks the step). */
.lp-ps .lp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.lp-ps .lp-kicker > span:first-child { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-band-muted); }
.lp-ps .lp-tags { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--lp-band-line); background: var(--lp-band-2); font-size: 0.74rem; font-weight: 500; line-height: 1.2; color: var(--lp-band-muted); }
.lp-ps .lp-tags em { font-style: normal; margin-right: 4px; }
.lp-ps .lp-tag { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: var(--vc-on); font: 600 0.7rem/1 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; transition: transform 0.15s; }
.lp-ps .lp-tag:hover { transform: scale(1.15); }

.lp-ps h2 { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; color: var(--lp-on-band); }
.lp-ps .verdict-way { font-style: normal; color: var(--lp-coral); }
.lp-ps .verdict-way[data-way="gaining"] { color: var(--lp-mint); }
.lp-ps .verdict-way[data-way="keeping"] { color: inherit; }
.lp-ps h2 .go { color: var(--lp-mint); }

/* A card's panel fills the rest of its side, so both panels end on one line. */
.lp-ps .lp-panel { flex: 1; display: flex; flex-direction: column; margin-top: 26px; padding: clamp(22px, 3vw, 32px); border-radius: 18px; background: var(--lp-band-2); border: 1px solid var(--lp-band-line); }
.lp-ps .lp-panel.unpub { outline-offset: 4px; }
.lp-ps .ph { margin: 0 0 18px; font-size: 0.78rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; color: var(--lp-band-muted); }
.lp-ps .ph .tip { text-transform: none; letter-spacing: 0; }

/* Definition buttons and tags on the band. */
.lp-ps .tip[hidden] { display: none; }
.lp-ps .tip-btn { width: 22px; height: 22px; color: var(--lp-band-muted); }
.lp-ps .tip-btn svg { width: 16px; height: 16px; }
.lp-ps .tip-btn:hover, .lp-ps .tip-btn:focus-visible { color: var(--lp-mint); }
.lp-ps .tip-text { background: var(--lp-on-band); color: var(--lp-band); letter-spacing: 0; text-transform: none; }
.lp-ps .us-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--lp-band-line); color: var(--lp-on-band); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5; vertical-align: 1px; cursor: help; }
.lp-ps .us-tag[hidden] { display: none; }
.lp-ps .ph-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-size: 0.6875rem; font-weight: 700; line-height: 1.5; }
.lp-ps .is-approx { padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--lp-mint) 24%, transparent); color: var(--lp-on-band); }

/* The lost box: Lost and Built as two bars from one edge. The longer bar carries its figure inside;
   the shorter one, just past its end. --gap-c is the net's color: red when Lost is longer, the built
   blue when Built is. */
.lp-ps .lost-box { --gap-c: var(--lp-coral); }
.lp-ps .lost-box[data-mode="built"] { --gap-c: var(--lp-sky); }
.lp-ps .lost-box[hidden] { display: none; }
.lp-ps .lp-lb { display: grid; gap: 10px; }
.lp-ps .gap-row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; font-size: 0.88rem; color: var(--lp-band-muted); }
.lp-ps .gap-lost { --c: var(--lp-coral); }
.lp-ps .gap-built { --c: var(--lp-sky); }
.lp-ps .gap-track { display: flex; align-items: center; min-width: 0; }
.lp-ps .gap-bar { flex: none; display: flex; align-items: center; justify-content: flex-end; width: max(var(--w), 6px); height: 30px; border-radius: 5px; background: var(--c); }
.lp-ps .is-long .gap-bar { padding-inline: 10px; }
.lp-ps .gap-v { font-weight: 700; font-size: 0.86rem; white-space: nowrap; font-variant-numeric: lining-nums; color: var(--c); }
.lp-ps .gap-track > .gap-v { margin-left: 10px; }
.lp-ps .gap-bar .gap-v { color: var(--lp-band); }
.lp-ps .lp-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; font-variant-numeric: lining-nums tabular-nums; }
.lp-ps .lp-big { margin: 26px 0 0; }
.lp-ps .lp-big .lp-num { display: block; font-size: clamp(3rem, 2rem + 3.4vw, 4.8rem); color: var(--gap-c); }
.lp-ps .lp-big .lp-num[hidden] { display: none; }
.lp-ps .lp-big small { display: block; margin-top: 8px; font-size: 0.94rem; line-height: 1.45; color: var(--lp-band-muted); }
.lp-ps .lp-why { position: relative; margin: 18px 0 0; max-width: 44ch; font-size: 0.98rem; line-height: 1.55; color: color-mix(in srgb, var(--lp-on-band) 85%, var(--lp-band-2)); }
.lp-ps .card-lost-note { margin: 12px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--lp-band-muted); }
.lp-ps .card-lost-note[hidden] { display: none; }

/* A card's bottom row, at the panel's foot: the ratio and the Atlas button on the left, the doors on
   the right. */
.lp-ps .lp-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 18px; }
/* Above the bottom row: the panel's spare height when it stretches, and never less than 22px. */
.lp-ps .lp-push { flex: 1 0 22px; }
/* The Atlas button stays at the bottom right, with or without the ratio beside it. */
.lp-ps .lp-foot-row .door-where { margin-left: auto; }
.lp-ps .lp-foot-line { border-top: 1px solid var(--lp-band-line); }
.lp-ps .lost-ratio { margin: 0; font-size: 0.95rem; color: var(--lp-on-band); }
.lp-ps .lost-ratio:empty { display: none; }
.lp-ps .lost-x { font-family: var(--font-display); font-size: 1.15rem; color: var(--gap-c); }

/* The four steps, out of every 10 single-family homes: ten houses each, two rows of five. */
.lp-ps .lp-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lp-ps .lp-s4 { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 14px 12px 12px; border-radius: 12px; background: color-mix(in srgb, var(--lp-band) 55%, transparent); }
.lp-ps .lp-s4 .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1; color: var(--c); font-variant-numeric: lining-nums; }
.lp-ps .lp-s4 .n small { font: 500 0.78rem 'IBM Plex Sans', system-ui, sans-serif; color: var(--lp-band-muted); }
.lp-ps .lp-s4 .hs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.lp-ps .lp-s4 .hs svg { display: block; width: 100%; height: auto; aspect-ratio: 1; fill: var(--lp-band-line); }
.lp-ps .lp-s4 .hs svg.on { fill: var(--c); }
.lp-ps .lp-s4 .l { font-size: 0.8rem; line-height: 1.3; color: var(--lp-band-muted); }
.lp-ps .lp-s4 .l .tip { margin-left: 2px; vertical-align: -0.3em; }
.lp-ps .lp-s4.now { outline: 1px solid color-mix(in srgb, var(--lp-coral) 50%, transparent); }
.lp-ps .lp-s4.fix { outline: 1.5px solid var(--lp-mint); background: color-mix(in srgb, var(--lp-mint) 10%, var(--lp-band)); }

/* The payoff: the tool's starter homes added, then what it means, beside it. */
.lp-ps .lp-payoff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 0; }
.lp-ps .lp-payoff .lp-num { flex: none; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3rem); color: var(--lp-mint); }
/* The figure's own element keeps the number's weight (a b inside 800 goes to 900). */
.lp-ps .lp-payoff .lp-num b { font-weight: inherit; }
/* The sentence never gets narrower than its measure: a figure too wide to leave it that much (a
   state's +886,000) puts the sentence under the figure. Below 1280px the measure, 15em, holds it to
   three lines, as the mock at 960. */
.lp-ps .lp-payoff > span:last-child { flex: 1 1 0; min-width: min(15em, 100%); font-size: 0.9rem; line-height: 1.45; color: var(--lp-on-band); }
/* From 1280px, the cards wide, the sentence takes two lines, as in the mock, whatever the figure:
   21.6em holds its two lines with 8px to spare (fix round 2, measured). +2.4M leaves it about 11px
   more than that. */
@media (min-width: 1280px) { .lp-ps .lp-payoff > span:last-child { min-width: 21.6em; } }

/* The doors: pills, the Green Light one filled in mint with the stoplight mark. */
.lp-ps .lp-doors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 22px; }
.lp-ps .lp-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; line-height: 1.2; text-decoration: none; transition: filter 0.2s var(--ease), border-color 0.2s var(--ease); }
.lp-ps .lp-btn.solid { background: var(--lp-mint); color: var(--lp-band); }
.lp-ps .lp-btn.ghost { border: 1px solid var(--lp-band-line); color: var(--lp-on-band); }
.lp-ps .lp-btn.ghost:hover { border-color: var(--lp-band-muted); color: var(--lp-on-band); }
.lp-ps .lp-btn:hover { filter: brightness(1.08); }
.lp-ps .lp-btn.solid:hover { color: var(--lp-band); }
.lp-ps .lp-btn:focus-visible { outline-color: var(--lp-mint); }
.lp-ps .lp-btn .sl { width: 0.75rem; height: 1.5rem; margin: -4px -1px -4px -5px; --sl-body: var(--lp-band); --sl-off: color-mix(in srgb, var(--lp-mint) 30%, var(--lp-band)); --sl-go: var(--lp-mint); }
.lp-ps .lp-arrow { font-weight: 500; }

/* Find a place: one strip under the two cards, across the band. */
.lp-ps .lp-find { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 18px clamp(18px, 3vw, 32px); border-radius: 18px; background: var(--lp-band-2); border: 1px solid var(--lp-band-line); }
.lp-ps .lp-find-t { flex: 0 1 auto; font-size: 0.95rem; color: var(--lp-on-band); }
.lp-ps .place { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lp-ps .combo { position: relative; flex: 1 1 320px; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--lp-band-line); }
.lp-ps .combo:focus-within { box-shadow: 0 0 0 3px var(--lp-mint); }
.lp-ps .combo:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 3px var(--bad); }
.lp-ps .combo label { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.lp-ps .combo label .ic { width: 20px; height: 20px; color: var(--accent); }
.lp-ps .combo input { flex: 1; width: 0; min-width: 0; min-height: 50px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; }
.lp-ps .combo input::placeholder { color: var(--muted); opacity: 1; }
.lp-ps .combo input:focus-visible { outline: none; }
.lp-ps .combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; margin: 0; padding: 8px; list-style: none; border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.lp-ps .combo-list[hidden] { display: none; }
.lp-ps .combo-list [role="option"] { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: calc(var(--r) - 4px); cursor: pointer; }
.lp-ps .combo-list [role="option"]:hover, .lp-ps .combo-list [aria-selected="true"] { background: var(--tint); }
.lp-ps .combo-level { flex: none; font-size: 0.8125rem; color: var(--muted); }
.lp-ps .place-copy, .lp-ps .place-back { margin: 0; color: var(--lp-mint); font-size: 0.875rem; }
.lp-ps .place-copy:hover, .lp-ps .place-back:hover { background: var(--lp-band); color: var(--lp-mint); }
.lp-ps .place-copy.is-copied { color: var(--lp-on-band); }
.lp-ps .place-msg { flex: 1 0 100%; font-size: 0.9375rem; color: var(--lp-on-band); }
.lp-ps .place-msg:empty { display: none; }
.lp-ps .place-msg[data-kind="error"] { color: var(--lp-coral); }
.lp-ps .place-msg a { color: var(--lp-mint); }

@media (prefers-reduced-motion: no-preference) {
  /* A pick shows: the two panels ring once in mint. */
  .lp-ps.picked .lp-panel { animation: lp-picked 1.2s var(--ease); }
  @keyframes lp-picked { 0%, 100% { outline: 2px solid transparent; outline-offset: 6px; } 25% { outline: 2px solid var(--lp-mint); outline-offset: 2px; } }
}

/* Half a screen: the four steps stay one row, the figure on top, as the mock; the solution card then
   is no taller than the problem card needs. The space comes out of the gutters and the padding, so
   the houses keep about the size they have at full width and each label takes at most two lines. */
@media (min-width: 901px) and (max-width: 1220px) {
  .lp-ps .lp-in { column-gap: 24px; }
  .lp-ps .lp-panel { padding-inline: 18px; }
  /* The ratio shares the Atlas button's row, on two lines, wherever it has 7.5em; the bottom row then
     takes no more height than the button (its two lines at 1.3). Narrower, it goes over the button. */
  .lp-ps .lp-foot-row .lost-ratio { flex: 1 1 0; min-width: 7.5em; line-height: 1.3; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .lp-ps .lp-steps4 { gap: 6px; }
  .lp-ps .lp-s4 { gap: 8px; padding: 12px 8px 10px; }
  .lp-ps .lp-s4 .n small { font-size: 0.72rem; }
  .lp-ps .lp-s4 .hs { gap: 2px; }
  .lp-ps .lp-s4 .l { font-size: 0.76rem; }
}
@media (max-width: 900px) {
  .lp-ps .lp-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lp-ps .lp-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-ps .lp-find { padding: 16px; }
  .lp-ps .combo { flex-basis: 100%; }
}
@media (max-width: 420px) {
  /* The search icon stands for the label, which screen readers still hear, so the placeholder fits. */
  .lp-ps .combo label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The sections under the band (v2 mock, landing_sections_v2.html): where, the fix, bills, people
   and Go deeper. Each is a full-width .lp band (.lp-alt tinted) around one .lp-in column; the
   shared pieces (.lp-in, the kicker, the step tags, .lp-num) are in base.css. */
.lp { padding-block: clamp(56px, 7vw, 100px); }
.lp-alt { background: var(--lp-tint); }
.lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp h2 { margin: 0; max-width: 20ch; font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--vc-ink); }
.lp-lede { margin: 16px 0 0; max-width: 46ch; font-size: 1.06rem; line-height: 1.6; color: var(--vc-ink-2); }
.lp-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding-bottom: 1px; font-weight: 600; color: var(--vc-homes); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--vc-homes) 35%, transparent); }
.lp-link:hover { color: var(--vc-homes); border-bottom-color: currentColor; }
.lp-link .ic { width: 0.9em; height: 0.9em; }
.lp-link .sl { flex: none; width: 0.7em; height: 1.4em; margin-right: 2px; }
/* Beside the stoplight, the words and the arrow wrap as one run of text: the arrow stays after the
   last word, the icon sits by the first line, and the underline follows each line, not the box. */
.lp-link:has(> .lp-link-t) { align-items: flex-start; border-bottom: 0; }
.lp-link-t { text-wrap: balance; text-decoration: underline 1.5px color-mix(in srgb, var(--vc-homes) 35%, transparent); text-underline-offset: 5px; }
.lp-link:hover .lp-link-t { text-decoration-color: currentColor; }
.lp-link-t .lp-arrow { display: inline-block; margin-left: 0.3em; }
.lp-fig { min-width: 0; margin: 0; padding: clamp(22px, 3vw, 36px); border-radius: 18px; background: var(--lp-card); border: 1px solid var(--vc-line); box-shadow: 0 1px 2px rgb(22 38 42 / 0.04), 0 12px 32px rgb(22 38 42 / 0.06); }
.lp-fig-h { position: relative; margin: 0 0 20px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-muted); }
.lp-fig-h .tip:not(.fn), .lp-total .tip:not(.fn) { margin-left: 6px; letter-spacing: 0; text-transform: none; vertical-align: -0.2em; }
/* A definition button inside a line of small text keeps the line's height. */
:is(.lp-fig-h, .lp-total) .tip-btn { width: 18px; height: 18px; }
:is(.lp-fig-h, .lp-total) .tip-btn svg { width: 16px; height: 16px; }
.lp-cap { position: relative; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--vc-line); font-size: 0.8rem; line-height: 1.5; color: var(--vc-muted); }
.lp-lede, .lp-total, .lp-trio .src { position: relative; }

/* Where: the text column beside the map card. */
.lp-where .lp-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.lp-top { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--vc-line); }
.lp-top li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vc-line); font-size: 0.95rem; color: var(--vc-ink-2); }
.lp-top .rk { font-size: 0.78rem; color: var(--vc-muted); }
.lp-top b { font-variant-numeric: lining-nums tabular-nums; color: var(--vc-ink); }
.lp-top li:first-child { font-weight: 600; color: var(--vc-ink); }
.lp-top li:first-child b { font-family: var(--font-display); font-size: 1.2rem; color: var(--vc-places); }

/* The maps (map.mjs): five classes of starter homes built per 1,000 households, red the fewest;
   the bills map's four statuses. landing.js places .map-tip. */
.lp-mapwrap { position: relative; }
.lp-mapwrap svg.map { display: block; width: 100%; height: auto; }
.lp-mapwrap .st path { stroke: var(--lp-card); stroke-width: 0.8; transition: opacity 0.15s; }
.lp-mapwrap .st:hover path, .lp-mapwrap .st:focus-visible path { opacity: 0.8; stroke: var(--vc-ink); stroke-width: 1.4; }
.lp-mapwrap .st:focus-visible { outline: none; }
.lp-mapwrap .b0 path { fill: var(--lp-m0); } .lp-mapwrap .b1 path { fill: var(--lp-m1); } .lp-mapwrap .b2 path { fill: var(--lp-m2); }
.lp-mapwrap .b3 path { fill: var(--lp-m3); } .lp-mapwrap .b4 path { fill: var(--lp-m4); }
.lp-mapwrap .c-enacted path { fill: var(--vc-go); } .lp-mapwrap .c-pending path { fill: var(--vc-places); }
.lp-mapwrap .c-failed path { fill: color-mix(in srgb, var(--vc-places) 28%, var(--lp-card)); } .lp-mapwrap .c-none path { fill: var(--lp-none); }
.map-tip { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--vc-ink); color: var(--lp-card); font-size: 0.8rem; line-height: 1.35; }
.lp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--vc-ink-2); }
.lp-key li { display: inline-flex; align-items: center; gap: 6px; }
.lp-key i { width: 14px; height: 14px; border-radius: 3px; background: var(--c); }

/* The fix: the title beside the lede, then the bar card and the lots card. */
.lp-wide-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.lp-wide-head .lp-lede { margin-top: 0; max-width: 56ch; }
.lp-fixfig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 32px); margin-top: 36px; }
.lp-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 16px; }
.lp-total .lp-num { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.8rem); color: var(--vc-go); }
.lp-total > span:last-child { font-size: 0.92rem; color: var(--vc-muted); }
.lp-stack { display: flex; gap: 3px; height: 64px; }
.lp-stack div { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-inline: 14px; border-radius: 8px; color: var(--vc-on); overflow: hidden; }
.lp-stack b { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.05; font-variant-numeric: lining-nums; white-space: nowrap; }
.lp-stack small { font-size: 0.74rem; opacity: 0.9; white-space: nowrap; }
.lp-ticks { position: relative; height: 18px; margin-top: 8px; font-size: 0.76rem; color: var(--vc-muted); font-variant-numeric: lining-nums; }
.lp-ticks span { position: absolute; transform: translateX(-50%); }
.lp-ticks span:first-child { transform: none; }
.lp-ticks span:last-child { transform: translateX(-100%); }
.fix-all { margin: 18px 0 0; font-size: 0.92rem; color: var(--vc-ink-2); }
.lp-lots { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 4vw, 44px); padding: 22px 16px 0; border-radius: 12px; background: linear-gradient(to top, var(--lp-grass) 0 30px, transparent 30px); }
.lp-lot { display: grid; justify-items: center; gap: 10px; padding-bottom: 12px; text-align: center; }
.lp-lot .plot { display: grid; place-items: center; border: 2px dashed var(--c); border-radius: 4px; background: color-mix(in srgb, var(--c) 9%, var(--lp-card)); }
.lp-lot .plot .ic { width: 34px; height: 34px; fill: var(--c); }
.lp-lot b { display: block; white-space: nowrap; font-family: var(--font-display); font-size: 1.2rem; color: var(--vc-ink); font-variant-numeric: lining-nums; }
.lp-lot .what { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--vc-muted); }
.lp-lot .price { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, var(--lp-card)); color: var(--vc-ink); font-weight: 600; font-size: 0.84rem; font-variant-numeric: lining-nums; }

/* States are acting: three counts, the Texas chip, the map card. */
.lp-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.lp-counts div { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, var(--lp-card)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); font-size: 0.82rem; line-height: 1.3; color: var(--vc-ink-2); }
.lp-counts b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--c); font-variant-numeric: lining-nums; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--vc-ink); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.lp-chip .ic { width: 0.9em; height: 0.9em; }
.lp-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lp-chip.star, .lp-chip.star:hover { background: var(--vc-ink); color: var(--lp-card); }
.lp-chip.star i { background: var(--vc-go-lit); }

/* What people want: the title beside the lede, the trio, the ladder, then why it matters. */
.lp-people-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.lp-people-head h2 { max-width: 24ch; }
.lp-people-head .lp-lede { margin: 0; }
.lp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-radius: 18px; border: 1px solid var(--vc-line); background: var(--lp-card); }
.lp-trio > div { padding: clamp(22px, 3vw, 34px); }
.lp-trio > div + div { border-left: 1px solid var(--vc-line); }
.lp-trio .lp-num { display: block; font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem); color: var(--vc-families); }
.lp-trio p { margin: 12px 0 0; max-width: 30ch; font-size: 0.95rem; line-height: 1.45; color: var(--vc-ink-2); }
.lp-trio .src { display: block; margin-top: 10px; font-size: 0.76rem; line-height: 1.45; color: var(--vc-muted); }
.lp-ladder, .why { margin-top: 20px; }
.lp-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-bar { display: grid; grid-template-columns: 13em minmax(0, 1fr) 3.4em; align-items: center; gap: 14px; font-size: 0.94rem; color: var(--vc-ink-2); }
.lp-bar .track { position: relative; height: 30px; border-radius: 6px; background: color-mix(in srgb, var(--vc-line) 50%, transparent); }
.lp-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--c); }
.lp-bar .v { text-align: right; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--vc-ink); }
.lp-bar > span:first-child { line-height: 1.4; }
.lp-bar > span:first-child b { display: block; font-weight: 600; color: var(--vc-ink); }
.lp-bar > span:first-child small { font-size: 0.78rem; color: var(--vc-muted); }
/* Card 2's question, set apart under the bars, with the arguments people read. */
.lp-also { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t n" "more more"; align-items: center; gap: 4px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--vc-line); font-size: 0.94rem; color: var(--vc-ink-2); }
.lp-also > p:first-child { grid-area: t; max-width: 70ch; }
.lp-also b { color: var(--vc-families); }
.lp-also-n { grid-area: n; margin: 0; font-size: 2.2rem; color: var(--vc-families); }
.lp-also .mv-args { grid-area: more; }
.mv-args summary { width: fit-content; padding-block: 4px; cursor: pointer; font-size: 0.8125rem; color: var(--vc-muted); }
.mv-args table { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 0.875rem; }
.mv-args th, .mv-args td { width: 50%; padding: 8px 16px 8px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--vc-line); }
.mv-args th { border-top: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-muted); }
.mv-args th:last-child { color: var(--vc-go-ink); }
.mv-args td:last-child { color: var(--vc-ink); }
/* Why it matters: the note beside its title, then the two figures on the need, each over a meter. */
.why-text { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 8px 14px; }
.why-text h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--vc-ink); }
.why-text p { max-width: 75ch; font-size: 0.95rem; line-height: 1.6; color: var(--vc-ink-2); }
.need-h { margin: 24px 0 14px; padding-top: 18px; border-top: 1px solid var(--vc-line); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-muted); }
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
/* The two cards are one height; the figure row takes the spare, its figure centered in it, so the
   figures and the meters sit level even when one sentence wraps to more lines than the other. */
.need { --c: var(--vc-families); display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; padding: 18px 20px; border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, var(--lp-card)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.need.is-add { --c: var(--vc-go-ink); }
.need-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.need-top .ic { width: 22px; height: 22px; }
.need-main { align-self: center; display: flex; align-items: center; gap: 16px; font-size: 0.95rem; line-height: 1.45; color: var(--vc-ink-2); }
.need-n { flex: none; font-size: 2.6rem; color: var(--c); }
.need-main strong { color: var(--vc-ink); }
.need-meter { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--vc-line) 70%, transparent); overflow: hidden; }
/* The whole bar is at least somewhat (--w); its first part, the strong share (--v), keeps the full
   color and the rest is washed toward the card. */
.need-meter span { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--c) calc(var(--v) / var(--w) * 100%), color-mix(in srgb, var(--c) 40%, var(--lp-card)) 0); }
.need-split { font-size: 0.84rem; color: var(--vc-ink-2); }

/* Go deeper: two cards, each one link. */
.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; margin-top: 28px; }
.lp-card { position: relative; display: grid; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: color-mix(in srgb, var(--c) 9%, var(--lp-card)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); color: inherit; text-decoration: none; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.lp-card:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 14px 34px color-mix(in srgb, var(--c) 22%, transparent); }
.lp-card .q { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.lp-card .lp-num { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); color: var(--c); }
.lp-card .lp-num small { display: block; margin-top: 6px; font: 500 0.9rem/1.4 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0; color: var(--vc-muted); }
.lp-card h3 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--vc-ink); }
.lp-card p { font-size: 0.96rem; color: var(--vc-ink-2); }
.lp-card .go { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: var(--c); color: var(--vc-on); font-weight: 600; font-size: 0.92rem; }
.lp-card .go .ic { width: 0.95em; height: 0.95em; }
.lp-card .go .sl { width: 0.75em; height: 1.5em; margin: -4px 0; --sl-body: color-mix(in srgb, var(--vc-ink) 80%, var(--c)); }
.lp-card .mark { position: absolute; right: -18px; bottom: -22px; width: 150px; height: 150px; fill: color-mix(in srgb, var(--c) 12%, transparent); pointer-events: none; }

@media (max-width: 900px) {
  .lp-split, .lp-where .lp-split, .lp-wide-head, .lp-fixfig, .lp-people-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lp-trio { grid-template-columns: minmax(0, 1fr); }
  .lp-trio > div + div { border-left: 0; border-top: 1px solid var(--vc-line); }
  .why-text, .needs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .lp-bar { grid-template-columns: minmax(0, 1fr) 3.4em; }
  .lp-bar .track { grid-column: 1 / -1; grid-row: 2; }
  .lp-also { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "t" "more"; }
  .lp-counts { gap: 8px; }
  .lp-counts div { padding: 12px 10px; }
}

/* Kept last, as it was before the split: the marker's outline and radius win over each card's own. */
/* Unpublished, placeholder and pending markers: amber, used for nothing else. */
.unpub { outline: 2px solid var(--amber); outline-offset: 8px; border-radius: var(--r); }
.unpub-label { display: inline-block; justify-self: start; margin-bottom: 12px; padding: 4px 12px; border-radius: var(--r); background: var(--amber-soft); color: var(--amber-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }