/* css/pages/leasing.css : Lease & Invest, round 8 (2026-09-30). Page layout only.
   Ashton, 2026-09-30: "this is the page I think needs the most overhaul... make sure the info is easy to understand and
   read", "I do not like the Watch the year at all", "no need to have the vid clip of me and the plumber", "white
   background". So: a white page (html[data-tone="white"], site.css tokens), three lanes with plain headings, short lines
   and one next step each, and the realistic 3D houses walking a rental from For Lease to leased (leaseflight.js).
   Ink moments (2 to 3): the out-of-town walk-through band, the journey's night, the text-me ending.
   Every color here is a token or a neutral (no bone, no warm tan, no gold). Dark mode follows the tokens. */

/* ------------------------------------------------------------------ hero: who you're working with */
.lx-hero { padding: calc(var(--header-h) + clamp(28px, 6vh, 72px)) 0 clamp(44px, 7vh, 88px); }
.lx-hero__grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 1000px) { .lx-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: calc(100svh - var(--header-h) - clamp(80px, 13vh, 150px)); } }
.lx-hero__copy { display: grid; gap: clamp(20px, 2.6vw, 30px); justify-items: start; }
.lx-hero h1 { font-weight: 300; font-size: clamp(2.75rem, 5.6vw, 6rem); line-height: .94; letter-spacing: -.05em; color: var(--ink); max-width: 9.6em; text-wrap: balance; }
.lx-hero h1 .kicker { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); margin-bottom: clamp(16px, 2.2vw, 26px); max-width: 34ch; }
.lx-hero h1 .h1-main { display: inline; }
.lx-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.lx-hero__lede { max-width: 34ch; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.lx-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lx-hero__ctas .btn--primary { min-height: 50px; padding: 0 26px; }
.lx-hero__photo { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 120px); justify-self: end; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 60px 110px -70px rgba(17, 17, 19, .55); }
.lx-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 46%; transform-origin: 72% 40%; transform: scale(calc(1 + var(--ph, 0) * .07)); will-change: transform; }
/* arrival (leasing.js arms it; never at T0): the photo opens from the bottom, the title rises */
.lx-hero.is-armed .lx-hero__photo { clip-path: inset(100% 0 0 0); }
.lx-hero.is-armed .lx-hero__photo img { transform: scale(1.14); }
.lx-hero.is-armed.is-in .lx-hero__photo { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-cine) .15s; }
.lx-hero.is-armed.is-in .lx-hero__photo img { transform: scale(calc(1 + var(--ph, 0) * .07)); transition: transform 2.2s var(--ease-out) .15s; }
.lx-hero.is-armed .lx-hero__copy > * { opacity: 0; transform: translateY(18px); }
.lx-hero.is-armed.is-in .lx-hero__copy > * { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.lx-hero.is-armed.is-in .lx-hero__copy > :nth-child(2) { transition-delay: .12s; }
.lx-hero.is-armed.is-in .lx-hero__copy > :nth-child(3) { transition-delay: .22s; }
.lx-hero.is-armed.is-in .lx-hero__copy > :nth-child(4) { transition-delay: .32s; }
.lx-hero.is-settled .lx-hero__photo img { transition: none; }
.is-failsafe .lx-hero .lx-hero__photo { clip-path: none !important; }
.is-failsafe .lx-hero .lx-hero__copy > * { opacity: 1 !important; transform: none !important; }

/* the proof, counting up as it arrives (cinema.js data-count) */
.lx-proof { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 16px clamp(20px, 3vw, 40px); margin: 6px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--rule); }
.lx-proof li { display: grid; gap: 6px; align-content: start; }
.lx-proof b { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1; letter-spacing: -.04em; color: var(--fg); white-space: nowrap; }
.lx-proof li:nth-child(n+3) b { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
.lx-proof li > span { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); line-height: 1.4; }
@media (max-width: 767px) { .lx-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } }

/* ------------------------------------------------------------------ the lane rail: pick your side (sticky on wide screens) */
.lx-rail { position: relative; z-index: 6; background: color-mix(in srgb, var(--paper) 92%, transparent); border-block: 1px solid var(--line);
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), transform .5s var(--ease-out), opacity .35s var(--ease-out); }
.lx-rail__inner { position: relative; display: grid; gap: 12px; padding-block: clamp(18px, 3vw, 30px); }
.lx-rail__q { font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.04em; }
.lx-rail__q em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.lx-rail__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(14px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.lx-rail__tabs a { position: relative; display: grid; gap: 4px; min-height: 44px; padding: 12px 0; color: var(--fg-2); text-decoration: none; transition: color var(--dur-2); }
.lx-rail__tabs a span { font-weight: 400; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); transition: color var(--dur-2); }
.lx-rail__tabs a small { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); transition: opacity var(--dur-3), max-height var(--dur-3); max-height: 3em; overflow: hidden; }
.lx-rail__tabs a:hover span, .lx-rail__tabs a.is-on span { color: var(--accent); }
.lx-rail__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; pointer-events: none; }
.lx-rail__bar i { position: absolute; left: 0; top: 0; height: 2px; width: var(--w, 0); background: var(--blue-fill); transform: translateX(var(--x, 0)); transition: transform .6s var(--ease-out), width .6s var(--ease-out), opacity .3s; opacity: var(--o, 0); }
@media (min-width: 1000px) {
  .lx-rail { position: sticky; top: var(--header-h); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .lx-rail__inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 5vw, 80px); padding-block: 22px; transition: padding var(--dur-3) var(--ease-out); }
  .lx-rail.is-stuck .lx-rail__inner { padding-block: 4px; }
  .lx-rail.is-stuck .lx-rail__q { font-size: 1.25rem; }
  .lx-rail.is-stuck .lx-rail__tabs a { padding: 10px 0; }
  .lx-rail.is-stuck .lx-rail__tabs a small { opacity: 0; max-height: 0; }
  .lx-rail.is-stuck .lx-rail__tabs a span { font-size: 1rem; }
}
/* phones: the active cell carries its own underline (no sliding bar) */
.lx-rail.is-grid .lx-rail__tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--blue-fill); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.lx-rail.is-grid .lx-rail__tabs a.is-on::after { transform: scaleX(1); }
/* over an ink moment the rail turns to ink; while the journey is pinned it steps aside (wide screens) */
.lx-rail.on-ink { --ink: var(--on-night); --fg: var(--on-night); --fg-2: var(--on-night-2); --line: rgba(241, 240, 237, .14); --accent: var(--blue-on-night); --paper: #121110; background: color-mix(in srgb, #121110 90%, transparent); border-color: rgba(241, 240, 237, .12); color: var(--on-night); }
.lx-rail.is-away { transform: translateY(calc(-100% - 2px)); opacity: 0; pointer-events: none; }
/* a lane change runs a horizontal paper wipe (leasing.js; never at T0) */
.lx-wipe { position: fixed; inset: 0; z-index: 900; pointer-events: none; background: var(--paper-2); transform: translateX(-101%); }
.lx-wipe::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--blue-fill); box-shadow: 0 0 24px rgba(40, 82, 229, .45); }
.lx-wipe.is-in { transform: translateX(0); transition: transform .42s var(--ease-cine); }
.lx-wipe.is-out { transform: translateX(101%); transition: transform .5s var(--ease-cine); }

/* ------------------------------------------------------------------ lanes */
.lane { position: relative; scroll-margin-top: calc(var(--header-h) + 64px); }
.lane__card { min-height: min(32vh, 300px); padding-block: clamp(48px, 7vh, 88px) clamp(28px, 4vh, 48px); }
.lane__card .title-card__title { font-size: clamp(2.75rem, 6.4vw, 6.5rem); }
.lane__card > .caps { color: var(--fg-2); }
.lane__sub { max-width: 34ch; margin-top: 4px; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.4; letter-spacing: -.01em; color: var(--fg-2); text-wrap: balance; }
/* "Homes for lease only. I don't currently help with apartments." (Ashton, 2026-10-05) */
.lane__sub--note { margin-top: 10px; font-size: clamp(.95rem, 1.1vw, 1.0625rem); font-weight: 500; color: var(--fg-1, var(--ink)); }
.lane__body { padding-block: clamp(16px, 3vw, 40px) clamp(64px, 7vw, 104px); }
.lane__block { margin-top: clamp(64px, 7vw, 112px); scroll-margin-top: calc(var(--header-h) + 72px); }
.lane__h3 { font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.lane__h3--sm { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.lane__h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.lane__lead { max-width: 52ch; font-size: var(--fs-body-guide); line-height: 1.6; color: var(--fg-2); }
.lane__lead a { color: var(--accent); }
.lane__ask { display: grid; gap: 18px; align-content: start; }
.lane__ctas { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.fact__src { font-size: var(--fs-label); line-height: 1.5; color: var(--fg-muted); max-width: 70ch; }

/* two columns on wide screens, stacked on phones */
.lx-split { display: grid; gap: clamp(56px, 6vw, 96px); align-items: start; }
.lx-split > * { min-width: 0; display: grid; gap: clamp(20px, 2.4vw, 28px); align-content: start; }
@media (min-width: 1000px) { .lx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 7vw, 120px); } }

/* ------------------------------------------------------------------ the steps: a path that lights as you read */
.lx-steps { counter-reset: s; position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lx-steps li { counter-increment: s; position: relative; display: grid; gap: 4px; padding: 0 0 clamp(22px, 2.6vw, 30px) 52px; }
.lx-steps li:last-child { padding-bottom: 0; }
/* the dot and the line down to the next one */
.lx-steps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--line-strong); background: var(--paper); transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out), transform .6s var(--ease-cine); }
.lx-steps li::after { content: ""; position: absolute; left: 12.25px; top: 34px; bottom: 6px; width: 1.5px; background: linear-gradient(var(--blue-fill), var(--blue-fill)) 0 0 / 100% calc(var(--k, 1) * 100%) no-repeat, var(--rule); }
.lx-steps li:last-child::after { display: none; }
.lx-steps strong { font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.25; letter-spacing: -.015em; color: var(--fg); }
.lx-steps span { max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); }
.lx-steps li.is-on::before, .lx-steps:not(.is-scroll) li::before { background: var(--blue-fill); border-color: var(--blue-fill); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue-fill) 14%, transparent); }
/* scroll-lit (leasing.js): each step lights as it crosses two thirds of the screen; reversible. T0: all lit. */
.lx-steps.is-scroll li { transition: opacity .5s var(--ease-out); }
.lx-steps.is-scroll li:not(.is-on) { opacity: .42; }
.lx-steps.is-scroll li:not(.is-on)::before { transform: scale(.82); }
.is-failsafe .lx-steps li { opacity: 1 !important; }

/* ------------------------------------------------------------------ equations: the math, counted up as it arrives */
.lx-eq { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px clamp(18px, 2.6vw, 34px); margin: 4px 0 0; padding: 22px 0 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lx-eq__term { display: grid; gap: 8px; margin: 0; }
.lx-eq__term b { font-weight: 300; font-size: clamp(2.6rem, 4.8vw, 4.4rem); line-height: .9; letter-spacing: -.055em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lx-eq__term span { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.lx-eq__term--sum b { color: var(--accent); }
.lx-eq__op { margin: 0 0 1.9rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; color: var(--fg-2); }
.lx-eq--1031 { gap: 14px clamp(28px, 5vw, 64px); }
.lx-eq__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .9375rem; color: var(--fg-2); }
.lx-qualify, .lx-1031, .lx-sell { display: grid; gap: clamp(16px, 2vw, 22px); align-content: start; }
.lx-1031 { margin-top: clamp(36px, 4vw, 56px); }
.lx-qualify .deeper, .lx-1031 .deeper, #price-why .deeper { margin-top: 6px; }

/* ------------------------------------------------------------------ red flags: five short warnings that land in turn */
.lx-flags { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.lx-flags__head { display: grid; gap: 12px; }
.lx-flags__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.lx-flags__list li { position: relative; display: grid; align-content: start; min-height: 7.2em; padding: 20px 0 0; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); line-height: 1.4; letter-spacing: -.01em; color: var(--fg); }
.lx-flags__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.lx-flags__list li::after { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-fill); }
.lx-flags__list.is-armed li { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.lx-flags__list.is-armed li::before { transform: scaleX(0); transition: transform 1s var(--ease-cine); transition-delay: calc(var(--i, 0) * 110ms); }
.lx-flags__list.is-armed.is-in li { opacity: 1; transform: none; }
.lx-flags__list.is-armed.is-in li::before { transform: none; }
.is-failsafe .lx-flags__list li { opacity: 1 !important; transform: none !important; }
.is-failsafe .lx-flags__list li::before { transform: none !important; }
@media (max-width: 999px) { .lx-flags__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-flags__list li { min-height: 0; padding-bottom: 6px; } }
@media (max-width: 520px) { .lx-flags__list { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ------------------------------------------------------------------ the ink moment: his walk-through for out-of-town renters
   theme-dark (site.css) re-points the tokens; data-plate rounds the band in and out (leasing.js scrubs --plate). */
.lx-tour { position: relative; padding-block: clamp(80px, 12vh, 150px) clamp(64px, 9vh, 112px); background: #111113; }
[data-plate] { clip-path: inset(0 calc(var(--plate, 0) * clamp(14px, 3.6vw, 60px)) round calc(var(--plate, 0) * 34px)); }
.lx-tour__grid { display: grid; gap: clamp(36px, 5vw, 88px); align-items: center; }
@media (min-width: 1000px) { .lx-tour__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.lx-tour__copy { display: grid; gap: clamp(18px, 2.2vw, 26px); justify-items: start; align-content: center; }
.lx-tour__h { font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 4.25rem); line-height: .98; letter-spacing: -.05em; color: var(--fg); max-width: 14ch; text-wrap: balance; }
.lx-tour__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-on-night); letter-spacing: -.015em; }
.lx-tour .lane__lead { color: var(--fg-2); }
.lx-tour .link-caps { color: var(--fg); }
/* the captions follow the film: the walk on screen is lit, its line fills as it plays */
.lx-tour__caps { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.lx-tour__caps li { position: relative; padding: 8px 0 10px; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.2; color: var(--fg); opacity: .34; transition: opacity .5s var(--ease-out); }
.lx-tour__caps li::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 15rem); height: 1px; background: linear-gradient(var(--blue-on-night), var(--blue-on-night)) 0 0 / calc(var(--k, 0) * 100%) 100% no-repeat, rgba(241, 240, 237, .14); }
.lx-tour__caps li.is-on { opacity: 1; }
.lx-tour__caps.is-still li { opacity: 1; }
.lx-tour__frame { position: relative; margin: 0; justify-self: center; width: min(100%, 400px); aspect-ratio: 9 / 16; max-height: min(76svh, 720px); overflow: hidden; background: #1C1C1F; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(241, 240, 237, .12), 0 60px 110px -50px rgba(0, 0, 0, .95), 0 0 90px -30px rgba(91, 123, 255, .22); }
.lx-tour__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity .6s var(--ease-out); }
.lx-tour__frame.is-ready video { opacity: 1; }
.lx-tour__still { position: absolute; left: 0; top: 0; display: none; max-width: none; transform-origin: 0 0; }
.lx-tour__still.is-sprite { display: block; }
.lx-tour__frame.is-ready:not(.has-still) .lx-tour__still { visibility: hidden; }
.lx-tour__frame.has-still video { display: none; }
.lx-tour__frame.is-armed { clip-path: inset(10% 0 10% 0); transform: scale(.94); }
.lx-tour__frame.is-armed.is-in { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.2s var(--ease-cine), transform 1.4s var(--ease-out); }
.is-failsafe .lx-tour__frame { clip-path: none !important; transform: none !important; }
.lx-tour__more { display: grid; margin-top: clamp(40px, 5vw, 64px); }
.lx-tour__more > .deeper { max-width: none; }
.lx-tour__more > .deeper > :not(summary) { max-width: 72ch; }
.lx-tour__more > .deeper > .cine-tool { max-width: none; }
@media (max-width: 999px) { .lx-tour__frame { width: min(78vw, 360px); } }

/* the lease dates count back from move-in as you scroll */
.lx-dates { display: grid; gap: 10px; align-content: start; width: 100%; max-width: 34rem; margin-top: 6px; }
.lx-dates__line { --t: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 0; padding: 26px 0 0; list-style: none; }
.lx-dates__line::before, .lx-dates__line::after { content: ""; position: absolute; left: 6px; right: calc(25% - 6px); top: 5px; height: 2px; background: var(--rule); transform-origin: 0 50%; }
.lx-dates__line::after { background: var(--blue-fill); transform: scaleX(var(--t)); }
.lx-dates__line li { position: relative; display: grid; gap: 4px; align-content: start; opacity: .38; transition: opacity .5s var(--ease-out); }
.lx-dates__line li::before { content: ""; position: absolute; left: 0; top: -26px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--rule); transition: background-color .4s, box-shadow .4s; }
.lx-dates__line li.is-on { opacity: 1; }
.lx-dates__line li.is-on::before { background: var(--blue-fill); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
.lx-dates__line b { font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.045em; color: var(--fg); }
.lx-dates__line span { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.lx-dates__line em { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--blue-on-night); }
.lx-dates__fine { color: var(--fg-2); }

/* ------------------------------------------------------------------ cost, his renter's review, the next step */
.lx-close { display: grid; gap: clamp(36px, 4vw, 64px); align-items: start; padding-top: clamp(48px, 6vw, 88px); }
@media (min-width: 1100px) { .lx-close { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); } }
.lx-close > * { min-width: 0; }
.lx-close__cost { display: grid; gap: 14px; align-content: start; }
.lx-quote { margin: 0; display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--ink); }
.lx-quote blockquote p { max-width: 26ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.lx-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lx-quote__full > summary { display: inline-flex; min-height: 44px; align-items: center; cursor: pointer; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .3em; }
.lx-quote__full p { margin-top: 8px; max-width: 60ch; line-height: 1.6; color: var(--fg-2); }

/* ------------------------------------------------------------------ THE JOURNEY: From For Lease to leased (leaseflight.js)
   A sticky stage (the page canvas draws the model in it) under normal-flow step cards. The section's background is the
   stage's own grade (--lj-bg, written by leasing.js from the same ramp as the scene's fog), so the canvas edge never
   shows: the studio grey of the white page through a blue hour to ink. Type flips light once the grade is dark. */
.lj { --lj-bg: var(--stage-paper); --lj-fg: var(--ink); --lj-fg2: var(--ink-2); --lj-line: color-mix(in srgb, var(--ink) 16%, transparent); --lj-card: color-mix(in srgb, var(--lj-bg) 84%, transparent); --lj-accent: var(--blue-text);
  position: relative; background: var(--lj-bg); color: var(--lj-fg); }
.lj.is-night { --lj-fg: var(--on-night); --lj-fg2: var(--on-night-2); --lj-line: rgba(241, 240, 237, .2); --lj-accent: var(--blue-on-night); }
.lj__pin { position: relative; height: var(--lj-h, calc(100svh - var(--header-h))); overflow: hidden; }
.lj.is-scrub .lj__pin { position: sticky; top: var(--lj-top, var(--header-h)); z-index: 2; }
.lj__stage { position: absolute; inset: 0; background: transparent; touch-action: pan-y; }
/* the stills (T1, T0, or a stage that could not go live): one sprite, each frame fitted "cover" by leasing.js */
.lj__posters { position: absolute; inset: 0; overflow: hidden; }
.lj__poster { position: absolute; left: 0; top: 0; display: none; max-width: none; transform-origin: 0 0; }
.lj__poster.is-sprite { display: block; will-change: transform, opacity; }
.lj__stage[data-stage-state="live"] .lj__posters { visibility: hidden; }
/* a soft pool of light under the model (CSS, under the canvas): it reads as the studio's floor bounce by day */
.lj__pin::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 52% at 66% 58%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); opacity: calc(var(--lj-k, 1) * .8); }
.lj.is-night .lj__pin::before { background: radial-gradient(56% 50% at 66% 52%, rgba(91, 110, 170, .28), rgba(91, 110, 170, 0) 72%); opacity: 1; }
/* phones: a scrim in the stage's own color along the foot of the stage, where the cards pass (desktop: the glass cards
   carry their own backdrop) */
.lj__scrim { display: none; position: absolute; z-index: 1; pointer-events: none; }
.lj.is-static .lj__scrim, .lj--poster .lj__scrim { display: none; }
/* tags over the homes (placed by the scene): frosted chips with a hairline down to the roof */
.lj__tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.lj-tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 13px 9px; white-space: nowrap;
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lj-fg);
  background: color-mix(in srgb, var(--lj-bg) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--lj-line), 0 18px 36px -24px rgba(17, 17, 19, .45);
  transform: translate(calc(var(--tx, -999px) - 50%), calc(var(--ty, -999px) - 100% - 24px)); opacity: var(--o, 1); transition: opacity .45s var(--ease-out); }
.lj-tag::before { content: ""; width: 7px; height: 7px; box-shadow: inset 0 0 0 1.5px var(--lj-fg2); }
.lj-tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: linear-gradient(var(--lj-fg2), transparent); }
.lj-tag.is-off { opacity: 0; }
.lj-tag.is-leased::before { background: var(--blue-fill); box-shadow: 0 0 10px color-mix(in srgb, var(--blue-fill) 70%, transparent); }
.lj-tag.is-leased { color: var(--lj-fg); box-shadow: inset 0 0 0 1px var(--lj-line), inset 0 2px 0 var(--blue-fill), 0 18px 36px -24px rgba(17, 17, 19, .45); }
/* the long pin's skip link (S12): bottom right of the stage, out of the cards' way */
.lj__skip { position: absolute; z-index: 4; right: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); bottom: 22px; display: none; align-items: center; min-height: 40px; padding: 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--lj-fg); text-decoration: none; border-radius: 999px; background: color-mix(in srgb, var(--lj-bg) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--lj-line); transition: opacity .4s var(--ease-out); }
.lj__skip:hover, .lj__skip:focus-visible { box-shadow: inset 0 0 0 1px var(--lj-fg); }
.lj.is-scrub .lj__skip { display: inline-flex; }
.lj.is-end .lj__skip, .lj--poster .lj__skip { opacity: 0; pointer-events: none; }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .lj__skip { top: 14px; bottom: auto; right: var(--gutter); min-height: 36px; font-size: 11px; } }
.lj__prog { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lj-line); display: none; }
.lj__prog i { position: absolute; inset: 0; background: var(--lj-accent); transform-origin: 0 50%; transform: scaleX(var(--lj-p, 0)); }
.lj.is-scrub .lj__prog { display: block; }
/* the steps: normal flow over the stage (z 3, above the canvas); the camera keeps the model in the free area */
.lj__steps { position: relative; z-index: 3; pointer-events: none; }
.lj.is-scrub .lj__steps { margin-top: calc(-1 * var(--lj-h, 100svh)); }
.lj__steps a, .lj__steps button, .lj-step__card { pointer-events: auto; }
.lj__head, .lj__list { width: min(34vw, 470px); margin-left: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); }
.lj__head { display: grid; gap: 14px; align-content: center; min-height: 52svh; padding-top: 6svh; }
.lj__head .caps { color: var(--lj-fg2); }
.lj__h { font-weight: 300; font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: .96; letter-spacing: -.05em; color: var(--lj-fg); text-wrap: balance; }
.lj__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lj-accent); letter-spacing: -.015em; }
.lj__list { display: grid; margin-block: 0; padding: 0 0 34svh; list-style: none; counter-reset: lj; }
.lj-step { counter-increment: lj; display: grid; align-items: center; min-height: 66svh; }
/* pacing 2026-10-01: a little more scroll per step while the journey runs (phones: below) */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .lj.is-scrub .lj-step { min-height: 72svh; } }
.lj-step__card { position: relative; display: grid; gap: 10px; padding: clamp(22px, 2vw, 30px) clamp(24px, 2.2vw, 32px) clamp(24px, 2.2vw, 32px) clamp(30px, 2.6vw, 38px); border-radius: 20px;
  background: color-mix(in srgb, var(--lj-bg) 66%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 0 0 1px var(--lj-line), 0 30px 60px -44px rgba(17, 17, 19, .55);
  opacity: calc(.18 + .82 * var(--a, 1)); transform: translateY(calc((1 - var(--a, 1)) * 12px)); }
.lj-step__card::before { content: ""; position: absolute; left: clamp(14px, 1.2vw, 18px); top: clamp(26px, 2.4vw, 34px); bottom: clamp(26px, 2.4vw, 34px); width: 2px; background: linear-gradient(var(--lj-accent), var(--lj-accent)) 0 0 / 100% calc(var(--a, 1) * 100%) no-repeat, var(--lj-line); }
.lj-step__card strong { font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1.08; letter-spacing: -.03em; color: var(--lj-fg); text-wrap: balance; }
.lj-step__card span { max-width: 34ch; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); line-height: 1.5; color: var(--lj-fg2); }
/* phones and portrait: the stage fills the screen, the model rides in its top half, the cards pass over its foot */
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .lj__head, .lj__list { width: auto; margin-inline: var(--gutter); }
  .lj__head { min-height: 0; padding-top: clamp(22px, 4svh, 36px); align-content: start; }
  .lj__h { font-size: clamp(2.1rem, 9vw, 3rem); }
  .lj__list { padding-bottom: 26svh; }
  .lj-step { min-height: 74svh; align-items: end; padding-bottom: 7svh; }
  .lj.is-scrub .lj-step:not(:first-child) { min-height: 80svh; }
  /* the second and third steps come sooner (fix pass 2026-10-02): one 2500 px/s flick now carries the story two beats
     in, to the porch, and the last step keeps its long run (the payoff holds) */
  .lj.is-scrub .lj-step:nth-child(2), .lj.is-scrub .lj-step:nth-child(3) { min-height: 64svh; }
  .lj.is-scrub .lj-step:nth-child(4) { min-height: 96svh; }
  .lj-step:first-child { min-height: 92svh; }
  .lj-step__card { padding: 16px 18px 17px 26px; border-radius: 16px; background: var(--lj-card); opacity: calc(.5 + .5 * var(--a, 1)); }
  .lj-step__card::before { left: 12px; top: 19px; bottom: 19px; }
  .lj-step__card strong { font-size: 1.3rem; }
  .lj-step__card span { font-size: 1rem; }
  .lj-tag { padding: 6px 10px 7px; font-size: 10px; letter-spacing: .12em; }
  .lj__scrim { display: block; inset: auto 0 0 0; width: auto; height: 44%; background: linear-gradient(0deg, color-mix(in srgb, var(--lj-bg) 88%, transparent) 0%, color-mix(in srgb, var(--lj-bg) 55%, transparent) 50%, transparent 100%); }
}
/* T0 (reduced motion, paused): no pin; the leased still, then the four steps as a list */
.lj.is-static .lj__pin { height: min(62svh, 620px); }
.lj.is-static .lj__poster:not([data-still="3"]) { display: none; }
.lj.is-static .lj__head { min-height: 0; padding-top: clamp(32px, 5vw, 56px); }
.lj.is-static .lj__list { padding-bottom: clamp(56px, 7vw, 96px); gap: 22px; }
.lj.is-static .lj-step, .lj.is-static .lj-step:first-child { min-height: 0; padding: 0; align-items: start; }
.lj.is-static .lj-step__card { opacity: 1; transform: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 2px 0 2px 26px; }
.lj.is-static .lj-step__card::before { left: 0; top: 6px; bottom: 6px; }
.lj.is-static .lj-tag { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .lj.is-static { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .lj.is-static .lj__pin { order: 2; height: min(78svh, 760px); }
  .lj.is-static .lj__steps { order: 1; }
  .lj.is-static .lj__head, .lj.is-static .lj__list { width: auto; margin-right: 0; }
}
/* QA only (?poster=<0..1>): the stills are rendered from the live scene with every overlay hidden */
.lj--poster .lj__steps, .lj--poster .lj__tags, .lj--poster .lj__prog, .lj--poster .lj__pin::before { visibility: hidden; }
.lj--poster .lj__pin::before { display: none; }

/* a white sheet rises over the night: the lane goes on in daylight (no hard cut from ink to white) */
.lx-sheet { position: relative; z-index: 4; margin-top: calc(-1 * clamp(28px, 4vw, 48px)); padding-top: clamp(64px, 8vw, 112px); background: var(--paper); border-radius: clamp(24px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px) 0 0; box-shadow: 0 -40px 70px -50px rgba(0, 0, 0, .7); }
.lx-drawers { display: grid; }
.lx-drawers > .deeper { max-width: none; }
.lx-sell .link-caps { justify-self: start; }

/* ------------------------------------------------------------------ the investors' six bad days: a ledger that runs as you scroll */
.lx-ledger { display: grid; gap: clamp(16px, 2vw, 22px); align-content: start; }
.lx-ledger__plate { display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); background: var(--paper-2); border-top: 1px solid var(--ink); box-shadow: 0 40px 80px -64px rgba(17, 17, 19, .5); }
.lx-ledger__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lx-ledger__deal { font-size: 1rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.lx-ledger__cf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 4px; }
.lx-ledger__cf b { font-weight: 300; font-size: clamp(3.2rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.06em; color: var(--accent); font-variant-numeric: tabular-nums; transition: color .5s var(--ease-out); }
.lx-ledger__cf.is-neg b { color: var(--fg); }
.lx-ledger__cf span { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.lx-ledger__rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.lx-ledger__rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; color: var(--fg); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.lx-ledger__rows li::before { content: ""; position: absolute; left: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: background-color .4s, transform .5s var(--ease-cine); }
.lx-ledger__rows li b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* pacing (2026-10-01): while the ledger runs with the scroll, the plate holds on screen (sticky) for a stretch of
   scroll, so its six bad days land one at a time where they can be read (js/pages/leasing.js paces them). Static,
   reduced motion and no-JS: no pin, the plate in the flow as before. */
.lx-ledger.is-scroll .lx-ledger__pin { position: relative; }
.lx-ledger.is-scroll .lx-ledger__pin::after { content: ""; display: block; height: 190vh; height: 190svh; }
@media (min-width: 900px) { .lx-ledger.is-scroll .lx-ledger__pin::after { height: 190vh; } }
/* its Skip link (leasing.js), on the plate while it holds; motion off: no pin, no link */
.lx-ledger__skip { display: none; }
.lx-ledger.is-scroll .lx-ledger__skip { position: absolute; top: calc(100% + 10px); right: 0; z-index: 2; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); background: color-mix(in srgb, var(--paper-2) 82%, transparent); border: 1px solid var(--rule); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lx-ledger.is-scroll .lx-ledger__skip:hover, .lx-ledger.is-scroll .lx-ledger__skip:focus-visible { border-color: var(--fg); }
.lx-ledger.is-scroll .lx-ledger__plate { position: sticky; top: calc(var(--header-h) + 16px); z-index: 1; }
.lx-ledger.is-scroll .lx-ledger__rows li:not(.is-on) { opacity: .3; transform: translateX(-4px); }
.lx-ledger.is-scroll .lx-ledger__rows li:not(.is-on)::before { background: var(--line-strong); transform: scale(.7); }
.lx-ledger__year { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); transition: opacity .5s var(--ease-out); }
.lx-ledger__year b { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: -.03em; text-transform: none; color: var(--fg); font-variant-numeric: tabular-nums; }
.lx-ledger.is-scroll:not(.is-done) .lx-ledger__year { opacity: .3; }
.lx-ledger__verdict { max-width: 44ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.3; color: var(--fg); text-wrap: balance; }
.lx-ledger__verdict b { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: .86em; font-variant-numeric: tabular-nums; }
.is-failsafe .lx-ledger__rows li, .is-failsafe .lx-ledger__year { opacity: 1 !important; transform: none !important; }
.lx-inv-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
/* the Deal Stress Test in its drawer opens on the page's representative deal: the tool's own example button (a different
   deal) steps aside, and the drawer says what it opens on */
.st-drawer .st__head-r { display: none; }
.st-drawer .cine-tool .tool__grid { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------ his texts (.lx-note): a face and a line, a thread through the page */
.lx-note { position: relative; display: flex; align-items: flex-end; gap: 12px; margin: 0; max-width: 34rem; }
.lx-note__face { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -14px rgba(17, 17, 19, .7); }
.lx-note__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-note__bubble { position: relative; display: block; padding: 13px 18px 14px; border-radius: 22px 22px 22px 6px; background: #EFEFF1; color: #151311; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.005em; box-shadow: 0 18px 36px -28px rgba(17, 17, 19, .45); }
.lx-note--lead { max-width: 38rem; }
.lx-note--lead .lx-note__face { width: 44px; height: 44px; }
.lx-note--lead .lx-note__bubble { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.32; letter-spacing: -.018em; padding: 16px 22px 17px; border-radius: 26px 26px 26px 6px; }
.lx-note__dots { position: absolute; left: 52px; bottom: 0; display: none; gap: 5px; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px 20px 20px 6px; background: #EFEFF1; }
.lx-note--lead .lx-note__dots { left: 56px; height: 46px; }
.lx-note__dots i { width: 7px; height: 7px; border-radius: 50%; background: #9A9A9F; animation: lx-dot 1s var(--ease-out) infinite; }
.lx-note__dots i:nth-child(2) { animation-delay: .16s; } .lx-note__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes lx-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.lx-note.is-armed .lx-note__face { opacity: 0; transform: scale(.8); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.lx-note.is-armed .lx-note__bubble { opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .45s var(--ease-out), transform .7s var(--ease-cine); }
.lx-note.is-armed.is-typing .lx-note__face, .lx-note.is-armed.is-in .lx-note__face { opacity: 1; transform: none; }
.lx-note.is-armed.is-typing .lx-note__dots { display: inline-flex; animation: lx-pop .35s var(--ease-out) both; }
.lx-note.is-armed.is-in .lx-note__bubble { opacity: 1; transform: none; }
@keyframes lx-pop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.is-failsafe .lx-note .lx-note__face, .is-failsafe .lx-note .lx-note__bubble { opacity: 1 !important; transform: none !important; }
.is-failsafe .lx-note .lx-note__dots { display: none !important; }
.lx-split__a > .lx-note--lead { margin-bottom: 6px; }

/* ------------------------------------------------------------------ straight answers */
.lx-faq { padding-block: clamp(64px, 8vw, 120px) clamp(24px, 3vw, 40px); }
.lx-faq__grid { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 1000px) { .lx-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); } }
.lx-faq__h { font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: .96; letter-spacing: -.05em; }
.lx-faq__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.faq .drawer__body p { max-width: 64ch; line-height: 1.6; color: var(--fg-2); }
.faq .drawer__body a { color: var(--accent); }
.rules-list { display: grid; margin: 0; border-top: 1px solid var(--line); }
.rules-list > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rules-list dt { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); padding-top: 3px; }
.rules-list dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--fg); }
.rules-list a { color: var(--accent); white-space: nowrap; }
.terms-list > div { grid-template-columns: 11rem minmax(0, 1fr); }
.deeper .rules-list { margin-top: 4px; }
@media (max-width: 520px) { .rules-list > div, .terms-list > div { grid-template-columns: 1fr; gap: 4px; } }
.opinion .form { max-width: 40rem; }

/* ------------------------------------------------------------------ Fair Housing: a plate on white, right before the ink ending */
.lx-fh { padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.lx-fh__plate { display: grid; gap: 22px; padding: clamp(28px, 4.4vw, 64px); background: var(--paper-2); border-top: 1px solid var(--ink); }
@media (min-width: 1000px) { .lx-fh__plate { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; } }
.lx-fh__head { display: grid; gap: clamp(20px, 3vw, 36px); align-content: start; justify-items: start; }
.lx-fh__title { font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: .95; letter-spacing: -.05em; }
.lx-fh__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.015em; }
.lx-fh__mark { width: clamp(72px, 8vw, 112px); height: auto; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lx-fh__body { display: grid; gap: 16px; max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; }
.lx-fh__lit { font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.lx-fh__lit .wi { transition: opacity .2s linear; }
.lx-fh__fine { font-size: 14px; color: var(--fg-2); }
.lx-fh__body a { color: var(--accent); }

/* ------------------------------------------------------------------ tools on white: results on the paper plate */
.cine-tool { min-width: 0; }
.cine-tool .tool { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); padding: 0; border: 0; background: transparent; }
.cine-tool .tool__title { font-weight: 300; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -.04em; }
.cine-tool .tool__inputs { grid-template-columns: minmax(0, 1fr); }
.cine-tool .tool__foot { border-top-color: var(--rule); }
.cine-tool .tool-mount__summary.credits { padding: clamp(24px, 3.4vw, 40px); border: 0; border-top: 1px solid var(--ink); background: var(--paper-2); justify-items: stretch; }
.cine-tool .tool-mount__summary.credits .btn { justify-self: center; }
.cine-tool :is(.ap__out, .vm__out, .st__out, .mp__out, .ck__dial) { position: relative; padding: clamp(22px, 3vw, 36px); background: var(--paper-2); border-top: 1px solid var(--ink); --bg: var(--paper-2); }
.cine-tool .output__label { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-2); }
.cine-tool .output__value { font-weight: 300; letter-spacing: -.055em; }
.cine-tool .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; }
.cine-tool .kv > * { padding: 0; border: 0; }
.cine-tool .kv > dt { text-align: right; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); align-self: baseline; }
.cine-tool .kv > dd { text-align: left; font-size: 1.125rem; font-weight: 400; align-self: baseline; }
.cine-tool .kv .muted { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--fg-2); }
.cine-tool .comp-note { background: var(--paper); border-left-color: var(--blue-fill); }
.cine-tool .st__out { top: 0; } /* stress.js makes it sticky at 88px; here it's a relative plate */
.cine-tool .st__out .st__summary { font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.02em; }
.cine-tool .ck__dial { max-width: none; display: grid; place-items: center; }
.cine-tool .ck__dial svg { max-width: 320px; }
.cine-tool .ap__gauge [class*="needle"] { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1) !important; transition-duration: .9s !important; }
@media (min-width: 900px) { .cine-tool .tool__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
@media (max-width: 520px) { .cine-tool .kv { gap: 10px 14px; } .cine-tool .kv > dt { font-size: 10.5px; letter-spacing: .12em; } }
/* drawers inside a split column open to the column's width */
.lx-split .deeper { max-width: none; }

/* ------------------------------------------------------------------ dark mode: the ink moments go one step deeper so they still read */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx-tour { background: #070708; } }
:root[data-theme="dark"] .lx-tour { background: #070708; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx-note__bubble { background: #26262A; color: var(--ink); } :root:not([data-theme="light"]) .lx-note__dots { background: #26262A; } }
:root[data-theme="dark"] .lx-note__bubble { background: #26262A; color: var(--ink); }
:root[data-theme="dark"] .lx-note__dots { background: #26262A; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 999px) {
  .lx-hero { padding-top: calc(var(--header-h) + 22px); }
  .lx-hero__photo { aspect-ratio: 4 / 4.2; max-height: 62svh; justify-self: stretch; }
  .lane__card { min-height: 0; }
}
@media (max-width: 767px) {
  .lx-hero h1 { font-size: clamp(2.5rem, 11.4vw, 3.5rem); max-width: 12ch; }
  .lx-hero h1 .kicker { letter-spacing: .2em; font-size: 11px; }
  .lx-hero__lede { font-size: 1.0625rem; }
  .lx-rail__inner { padding-block: 16px 6px; }
  .lx-rail__tabs a { padding: 10px 0; }
  .lx-rail__tabs a small { font-size: 9.5px; letter-spacing: .1em; }
  .lane__card { padding-block: 56px 28px; }
  .lane__card .title-card__title { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .lane__body { padding-block: 8px 72px; }
  .lx-steps li { padding-left: 46px; }
  .lx-eq__term b { font-size: clamp(2.3rem, 11vw, 3rem); }
  .lx-eq__op { margin-bottom: 1.7rem; }
  .lx-tour { padding-block: clamp(84px, 13svh, 130px) clamp(56px, 9svh, 88px); }
  .lx-dates__line b { font-size: 1.75rem; }
}

/* ------------------------------------------------------------------ reduced motion and the global pause: designed end states */
@media (prefers-reduced-motion: reduce) {
  .lx-hero .lx-hero__photo img { transform: none !important; }
  .lx-note__dots i { animation: none; }
  .lj-tag, .lx-ledger__rows li, .lx-steps li { transition: none; }
}
:root[data-motion="paused"] .lx-note__dots i { animation: none; }

/* Ready to rent (Ashton, 2026-10-05): the renters' intake, same questions for everyone */
.lx-ready { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(22px, 3vw, 32px); border-top: 2px solid var(--blue-fill, var(--accent)); scroll-margin-top: 96px; }
.lx-ready__lede { max-width: 62ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.lx-ready__form .fieldset legend { font-weight: 500; }
.lx-ready__form .field__hint { margin-top: 6px; }
.lx-ready__form .form__row { align-items: start; }
.lx-ready__form .form__row .select { height: auto; }