/* The Property Journey · Meridian (the house direction).
   Ink, heavy paper and brushed brass. Restraint first: generous space, very few colours, numbers set like a
   dial. Tokens on :root; the evening theme redefines them (system setting, or the toggle's data-theme).
   Directions on /directions are token sets too (.dir-provenance, .dir-keystone). No inline styles anywhere. */

@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-italic-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
/* Figures: Bodoni's digits with Inter's percent sign (Bodoni's is an ornamental ⁰/o that misreads in data). */
@font-face { font-family: "Bodoni Figures"; src: url("/fonts/bodoni-moda-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-0024, U+0026-FFFF; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-normal-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-normal-500-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #f6f3ed; --bg2: #ece6da; --card: #fffdf9; --fg: #0f1012; --fg2: #24252a; --muted: #4a4741; --hair: rgba(17, 18, 20, .18); --hair2: rgba(17, 18, 20, .09);
  --accent: #6f5224; --accent-soft: rgba(156, 122, 68, .14); --on-accent: #f8f5ef; --gain: #2f6b4f; --loss: #9a3b32; --focus: #8a6a36;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 48px -28px rgba(30, 24, 14, .28), 0 2px 6px -2px rgba(30, 24, 14, .08);
  --s0: #9c7a44; --s1: #111214; --s2: #3f6f64; --s3: #8a857b;
  --sky0: #b9a483; --sky1: #dccdb2; --sky2: #ece3d2; --sun: rgba(255, 236, 196, .55); --mass: #24211e; --mass2: #34302b; --pline: rgba(243, 239, 231, .30); --pfine: rgba(243, 239, 231, .16);
  --window: #3d3832; --glow: #e3b56b; --ground: #2b2824; --grain: rgba(0, 0, 0, .10);
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --figures: "Bodoni Figures", "Inter", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 76rem; --r: 2px; --r2: 14px; --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111214; --bg2: #18191c; --card: #1c1e22; --fg: #f4efe6; --fg2: #e2dccf; --muted: #bdb6a9; --hair: rgba(236, 230, 218, .22); --hair2: rgba(236, 230, 218, .11);
    --accent: #d9b77c; --accent-soft: rgba(217, 183, 124, .15); --on-accent: #0c0d0f; --gain: #86b79d; --loss: #d98a7e; --focus: #c9a66b;
    --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.8), 0 2px 8px -2px rgba(0,0,0,.5);
    --s0: #c9a66b; --s1: #ece6da; --s2: #7fae9f; --s3: #77736c;
    --sky0: #0b0f19; --sky1: #1a1f2b; --sky2: #3b2f25; --sun: rgba(227, 168, 92, .22); --mass: #070809; --mass2: #0f1013; --pline: rgba(236, 230, 218, .20); --pfine: rgba(236, 230, 218, .10);
    --window: #181a1e; --glow: #e8b768; --ground: #08090a; --grain: rgba(255, 255, 255, .035);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .dark-band, .dir-keystone {
  --bg: #111214; --bg2: #18191c; --card: #1c1e22; --fg: #f4efe6; --fg2: #e2dccf; --muted: #bdb6a9; --hair: rgba(236, 230, 218, .22); --hair2: rgba(236, 230, 218, .11);
  --accent: #d9b77c; --accent-soft: rgba(217, 183, 124, .15); --on-accent: #0c0d0f; --gain: #86b79d; --loss: #d98a7e; --focus: #c9a66b;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.8), 0 2px 8px -2px rgba(0,0,0,.5);
  --s0: #c9a66b; --s1: #ece6da; --s2: #7fae9f; --s3: #77736c;
  --sky0: #0b0f19; --sky1: #1a1f2b; --sky2: #3b2f25; --sun: rgba(227, 168, 92, .22); --mass: #070809; --mass2: #0f1013; --pline: rgba(236, 230, 218, .20); --pfine: rgba(236, 230, 218, .10);
  --window: #181a1e; --glow: #e8b768; --ground: #08090a; --grain: rgba(255, 255, 255, .035);
  color-scheme: dark;
}
:root[data-theme="dark"] .dark-band { --bg: #15171a; --card: #1b1d21; }
.dark-band { background: var(--bg); color: var(--fg); }

/* ---- Base ----------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.65 var(--sans); font-feature-settings: "ss01", "cv11"; transition: background-color .5s var(--ease), color .5s var(--ease); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-soft); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.narrow-wide { max-width: 50rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 8px; background: var(--bg); padding: 8px 12px; z-index: 200; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab, .fig-value, .metrics dd, table { font-variant-numeric: tabular-nums lining-nums; }
.serif { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; font-weight: 500; font-variation-settings: "opsz" 14; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.01em; }
.display { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 24px; font-variation-settings: "opsz" 96; }
.display.small { font-size: clamp(2.2rem, 4.8vw, 4rem); }
.display em, .h1 em, .h2 em { font-style: italic; color: var(--accent); }
.h1 { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 18px; font-weight: 500; font-variation-settings: "opsz" 40; }
.h2 { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.12; margin: 0 0 14px; font-weight: 500; font-variation-settings: "opsz" 28; }
.h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; display: block; font-weight: 500; font-variation-settings: "opsz" 18; }
.h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; display: block; }
.lede { font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--fg2); max-width: 40em; margin: 0 0 18px; }
.muted { color: var(--muted); } .small { font-size: .9rem; } .fine { font-size: .88rem; color: var(--muted); line-height: 1.55; }
.eyebrow, .kicker { font: 500 .76rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: block; }
.kicker { color: var(--muted); margin-bottom: 8px; }
.gain { color: var(--gain); } .loss { color: var(--loss); }
.row { display: flex; gap: 12px; align-items: flex-start; } .between { justify-content: space-between; } .wrap-row { flex-wrap: wrap; align-items: center; }
p { margin: 0 0 14px; }

/* ---- Buttons and controls ------------------------------------------------------------------- */
.button, button.button, .lead button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font: 500 .92rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.button:hover, .lead button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button:active { transform: translateY(1px); }
.button.ghost { background: transparent; color: var(--fg); border-color: var(--hair); }
.button.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.button.small { min-height: 38px; padding: 0 16px; font-size: .84rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; margin-top: 8px; color: var(--fg); }
.link-arrow::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.link-arrow:hover::after { width: 44px; }
.chip { min-height: 34px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--fg); font: 500 .8rem var(--sans); cursor: pointer; transition: border-color .3s, color .3s, background-color .3s; }
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.badge { font: 500 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 6px 9px; white-space: nowrap; }
.tag { display: inline-block; font: 400 .76rem/1 var(--mono); color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 8px; margin: 0 6px 6px 0; }
.tags { display: block; margin-top: 8px; }

.slider { display: grid; gap: 8px; font-size: .9rem; color: var(--fg2); }
.slider > span { display: flex; justify-content: space-between; gap: 12px; }
.slider output { font: 500 .86rem var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(var(--fg), var(--fg)) 0 / var(--fill, 50%) 100% no-repeat, var(--hair); }
input[type=range]::-moz-range-track { height: 1px; background: var(--hair); }
input[type=range]::-moz-range-progress { height: 1px; background: var(--fg); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg); box-shadow: 0 0 0 4px var(--bg), 0 2px 8px rgba(0,0,0,.18); transition: transform .25s var(--ease); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); border-color: var(--accent); }
.sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 18px 32px; margin: 18px 0; }
.sliders.one { grid-template-columns: 1fr; }
.switch { display: flex; gap: 12px; align-items: center; font-size: .88rem; cursor: pointer; color: var(--fg2); }
.switch input { -webkit-appearance: none; appearance: none; width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--hair); background: var(--bg2); position: relative; flex: none; cursor: pointer; transition: background-color .3s var(--ease); margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease); }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(16px); background: var(--on-accent); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0 0 16px; }
.seg legend { font-size: .84rem; color: var(--fg2); margin-bottom: 8px; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; font-size: .84rem; cursor: pointer; transition: all .3s var(--ease); }
.seg label:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.field { display: grid; gap: 6px; font-size: .84rem; color: var(--fg2); margin-bottom: 16px; }
.field select, .field input, .capture input, .lead input[type=email], .lead input[type=text], .lead textarea { font: 400 1rem var(--sans); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 10px 0; width: 100%; transition: border-color .3s; }
.field select { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.field select option { background: var(--card); color: var(--fg); }
.field input:focus, .capture input:focus, .lead input:focus, .lead textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--accent); }
.money-in { display: flex; align-items: baseline; gap: 6px; font: 400 1.6rem var(--serif); }
.money-in input { font: 400 1.6rem var(--serif); font-variant-numeric: tabular-nums; }

/* ---- Header and footer ---------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-bottom: 1px solid var(--hair2); }
.bar { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); }
.brand-name { font: 500 1.12rem/1 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.brand-name em { color: var(--accent); }
.mono { color: var(--fg); flex: none; } .mono-path { stroke: var(--accent); } .mono-dot { fill: var(--accent); }
.primary { display: flex; gap: 26px; margin-left: auto; }
.primary a { font-size: .92rem; text-decoration: none; color: var(--fg2); position: relative; padding: 6px 0; }
.primary a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.primary a:hover::after, .primary a[aria-current="page"]::after { transform: scaleX(1); }
.primary a[aria-current="page"] { color: var(--fg); }
.bar-end { display: flex; align-items: center; gap: 12px; }
.theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: transform .6s var(--ease), border-color .3s; }
.theme-toggle:hover { border-color: var(--accent); transform: rotate(180deg); }
@media (max-width: 1020px) { .primary { display: none; } .bar-end { margin-left: auto; } }
@media (max-width: 420px) { .brand-name { display: none; } }

.site-footer { border-top: 1px solid var(--hair); margin-top: 0; padding: 64px 0 28px; background: var(--bg2); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { color: var(--muted); font-size: .86rem; max-width: 30em; margin-top: 18px; }
.foot-nav { display: grid; gap: 8px; align-content: start; font-size: .86rem; }
.foot-nav a { text-decoration: none; color: var(--fg2); }
.foot-h { font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.foot-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair2); color: var(--muted); font-size: .78rem; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---- Journey line ---------------------------------------------------------------------------- */
.journey { margin: 56px 0 0; overflow-x: auto; scrollbar-width: none; }
.journey::-webkit-scrollbar { display: none; }
.journey ol { list-style: none; display: grid; grid-template-columns: repeat(10, minmax(72px, 1fr)); margin: 0; padding: 0 0 4px; position: relative; min-width: 720px; }
.journey ol::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--hair); }
.journey li { position: relative; padding-top: 22px; font: 500 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.journey .node { position: absolute; top: 1px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--hair); transition: all .6s var(--ease); }
.journey li.done .node { background: var(--fg); border-color: var(--fg); }
.journey li.done::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--fg); }
.journey li.here { color: var(--fg); }
.journey li.here .node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.journey.compact { margin: 22px 0 0; }

/* ---- Sections -------------------------------------------------------------------------------- */
.hero { padding: clamp(48px, 8vw, 104px) 0 48px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }
.band { padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--hair2); }
.band.tight { padding: clamp(36px, 5vw, 64px) 0; border-top: 0; }
.paper-band { background: var(--bg2); }
.section-head { max-width: 46rem; margin-bottom: 44px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.page-head { padding: clamp(44px, 7vw, 88px) 0 24px; }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.ticks li { padding-left: 26px; position: relative; color: var(--fg2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1px; background: var(--accent); }

.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r2); padding: clamp(20px, 2.4vw, 30px); position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.card.raised { box-shadow: var(--shadow); }
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--hair)); color: inherit; }
.cards { display: grid; gap: 20px; }
.cards.three { grid-template-columns: repeat(3, 1fr); } .cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .cards.three { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cards.two { grid-template-columns: 1fr; } }

/* ---- Figures, verdicts, metrics ------------------------------------------------------------- */
.figs { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r2); overflow: hidden; margin: 18px 0; }
.figs.three { grid-template-columns: repeat(3, 1fr); } .figs.six { grid-template-columns: repeat(3, 1fr); } .figs.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .figs.three, .figs.six { grid-template-columns: repeat(2, 1fr); } }
.figure { display: grid; gap: 4px; background: var(--card); padding: 16px 18px; align-content: start; }
.fig-label { font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fig-value { font: 500 clamp(1.45rem, 2.4vw, 1.95rem)/1.1 var(--figures); letter-spacing: -.01em; font-variation-settings: "opsz" 14; }
.fig-value.muted-v { color: var(--muted); }
.fig-note { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.verdict { display: grid; gap: 4px; padding: 16px 0 6px; border-top: 1px solid var(--hair); margin-top: 16px; }
.verdict-h { font: 500 1.55rem/1.15 var(--serif); font-style: italic; color: var(--accent); font-variation-settings: "opsz" 24; }
.verdict-c { font-size: .8rem; color: var(--muted); } .verdict-c b { color: var(--fg); font-weight: 500; }
.verdict.big { border: 0; padding: 0; margin: 24px 0 8px; }
.verdict.big .verdict-h { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.verdict-t { font-size: 1.08rem; color: var(--fg2); max-width: 38em; margin: 8px 0 4px; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; margin: 18px 0; }
.metrics div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair2); }
.metrics dt { color: var(--muted); font-size: .84rem; } .metrics dd { margin: 0; font-weight: 500; }
.metrics.compact { grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 12px 0; } .metrics.compact div { padding: 6px 0; font-size: .84rem; }
.facts { display: grid; gap: 0; margin: 14px 0; } .facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair2); font-size: .86rem; } .facts dt { color: var(--muted); } .facts dd { margin: 0; }
.src { display: inline-flex; align-items: center; gap: 7px; font: 400 .76rem/1.3 var(--mono); color: var(--muted); text-decoration: none; margin-right: 16px; }
.src-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gain) 18%, transparent); flex: none; }
.src-fresh { opacity: .8; }
a.src:hover { color: var(--accent); }
.srcs { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 16px; } .srcs.col { flex-direction: column; }

/* ---- Hero card ------------------------------------------------------------------------------ */
.hero-card { padding: 0; overflow: hidden; }
.hero-plate { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--hair); }
.hero-plate svg { width: 100%; height: 100%; }
.hero-card-body { padding: 22px 24px 20px; }
.hero-card .figs { margin: 14px 0 18px; } .hero-card .figure { padding: 12px 14px; } .hero-card .fig-value { font-size: 1.4rem; }

/* ---- Plates (architectural drawings) ------------------------------------------------------- */
.plate { width: 100%; height: 100%; }
.plate .sky0 { stop-color: var(--sky0); } .plate .sky1 { stop-color: var(--sky1); } .plate .sky2 { stop-color: var(--sky2); }
.plate .sun0 { stop-color: var(--sun); } .plate .sun1 { stop-color: var(--sun); stop-opacity: 0; }
.pl-mass { fill: var(--mass); } .pl-mass2 { fill: var(--mass2); } .pl-ground { fill: var(--ground); } .pl-water { fill: var(--mass2); }
.pl-col { fill: var(--mass2); stroke: var(--pline); stroke-width: .6; } .pl-ink { fill: var(--pfine); }
.pl-line { fill: none; stroke: var(--pline); stroke-width: 1; } .pl-fine { fill: none; stroke: var(--pfine); stroke-width: .8; }
.pl-window { fill: var(--window); stroke: var(--pfine); stroke-width: .6; }
.pl-glow { fill: var(--glow); } .pl-glow.g1 { opacity: .45; } .pl-glow.g2 { opacity: .7; } .pl-glow.g3 { opacity: .92; }
.pl-glowline { stroke: var(--glow); stroke-width: 1.2; opacity: .55; }
.pl-roof { fill: var(--mass2); stroke: var(--pline); }
.pl-tex { stroke: none; opacity: 1; }
.pl-hedge { fill: var(--mass2); stroke: var(--pfine); }
.pl-canopy { fill: var(--mass2); opacity: .85; stroke: var(--pfine); }
.pl-lamp { fill: var(--glow); opacity: .9; }
.pl-grain { fill: var(--grain); }

/* ---- Charts ---------------------------------------------------------------------------------- */
.chart { margin: 20px 0 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--hair2); stroke-width: 1; }
.chart .grid text, .chart .wf-lbl { font: 400 11.5px var(--mono); fill: var(--muted); letter-spacing: .04em; }
.chart .zero { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .s { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 2.2s var(--ease) both; }
.chart .s:nth-child(2) { animation-delay: .12s; } .chart .s:nth-child(3) { animation-delay: .24s; } .chart .s:nth-child(4) { animation-delay: .36s; }
.chart .e { animation: fade 1s 1.6s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.s0 { stroke: var(--s0); } .s1 { stroke: var(--s1); } .s2 { stroke: var(--s2); } .s3 { stroke: var(--s3); stroke-dasharray: none; }
.e0 { fill: var(--s0); } .e1 { fill: var(--s1); } .e2 { fill: var(--s2); } .e3 { fill: var(--s3); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: .9rem; color: var(--fg2); }
.key { display: inline-flex; align-items: center; gap: 8px; } .key i { width: 18px; height: 2px; border-radius: 2px; }
.k0 i { background: var(--s0); } .k1 i { background: var(--s1); } .k2 i { background: var(--s2); } .k3 i { background: var(--s3); }

/* ---- Home -------------------------------------------------------------------------------------- */
.stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hair); }
.stages li { display: grid; gap: 6px; padding: 22px 20px 26px 0; border-bottom: 1px solid var(--hair); font-size: .94rem; color: var(--muted); }
.stages b { font: 500 1.35rem var(--serif); color: var(--fg); font-variation-settings: "opsz" 18; }
.stages .num { font: 500 .64rem var(--mono); letter-spacing: .14em; color: var(--accent); }
@media (max-width: 900px) { .stages { grid-template-columns: repeat(2, 1fr); } }
.ledger { box-shadow: var(--shadow); }
.mini-num, .money-in, .money-in input { font-family: var(--figures) !important; }
.memo-verdict { font: italic 400 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--serif); color: var(--accent); margin: 6px 0 12px; }
.rank-strip { list-style: none; padding: 0; margin: 28px 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r2); overflow: hidden; }
.rank-strip li { background: var(--card); padding: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; }
.rank-strip li > span:nth-child(2) { display: grid; }
.rank-strip .num, .rank-num { font: 400 1.6rem var(--figures); color: var(--accent); }
@media (max-width: 900px) { .rank-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rank-strip { grid-template-columns: 1fr; } }
.brief article { padding: 16px 0; border-top: 1px solid var(--hair2); }
.brief .h3 { font-size: 1.2rem; margin-bottom: 6px; }
.program { min-height: 240px; } .program > span:not(.kicker):not(.link-arrow) { color: var(--fg2); font-size: .94rem; }
.program .link-arrow { margin-top: auto; }
.tier p { color: var(--fg2); font-size: .94rem; margin-top: 10px; }
.tier.private { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tier.private p, .tier.private .kicker { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.tier.private .h3 { color: var(--accent); }
:root[data-theme="dark"] .tier.private { background: linear-gradient(160deg, #1d1a14, #0f0e0b); color: var(--fg); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.join { background: var(--bg2); }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .join-grid { grid-template-columns: 1fr; } }

/* ---- Lead form ------------------------------------------------------------------------------- */
.lead { display: grid; gap: 18px; }
.lead label { display: grid; gap: 2px; font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.lead .check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--fg2); }
.lead .check input { accent-color: var(--accent); margin-top: 3px; }
.lead textarea { resize: vertical; min-height: 84px; }
.lead button { justify-self: start; }
.opt { color: var(--muted); }
.error { color: var(--loss); font-weight: 500; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Studio and dossier -------------------------------------------------------------------- */
.capture { display: flex; gap: 12px; align-items: end; max-width: 44rem; margin: 18px 0 8px; }
.capture input { font-size: 1.1rem; }
@media (max-width: 560px) { .capture { flex-direction: column; align-items: stretch; } }
.dossier-card { padding: 0; overflow: hidden; }
.dossier-card .plate { aspect-ratio: 16 / 8; height: auto; border-bottom: 1px solid var(--hair); }
.dc-body { padding: 20px 22px 24px; display: grid; gap: 6px; }
.dc-verdict { font: italic 400 1.1rem var(--serif); color: var(--accent); margin-top: 6px; }
.spread { position: relative; height: clamp(360px, 62vh, 640px); overflow: hidden; background: var(--mass); }
.spread-plate { position: absolute; inset: 0; }
.spread::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(8, 8, 9, .78)); }
.spread-copy { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 2; color: #f3efe7; }
.spread-copy .kicker { color: rgba(243, 239, 231, .75); }
.spread-copy .display { color: #f6f2ea; margin-bottom: 10px; }
.spread-meta { font: 400 .8rem var(--mono); letter-spacing: .08em; color: rgba(243, 239, 231, .82); display: flex; flex-wrap: wrap; gap: 10px; }
.dossier-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .dossier-grid { grid-template-columns: 1fr; } }
.dossier-side { display: grid; gap: 18px; position: sticky; top: 92px; }
@media (max-width: 960px) { .dossier-side { position: static; } }
.side-actions { display: grid; gap: 10px; } .side-actions .button { justify-content: center; }
.lens { display: inline-flex; padding: 4px; border: 1px solid var(--hair); border-radius: 999px; gap: 2px; }
.lens a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: .86rem; color: var(--fg2); transition: all .4s var(--ease); }
.lens a.on { background: var(--fg); color: var(--bg); }
[data-lens="investor"] .lens-owner, [data-lens="owner"] .lens-investor { display: none; }
.explained { background: var(--card); }
.explained summary { list-style: none; cursor: pointer; }
.explained summary::-webkit-details-marker { display: none; }
.explained summary .figure { position: relative; }
.explained summary .figure::after { content: "+"; position: absolute; right: 14px; top: 12px; font: 400 .9rem var(--mono); color: var(--muted); transition: transform .4s var(--ease); }
.explained[open] summary .figure::after { transform: rotate(45deg); color: var(--accent); }
.explained > p { padding: 0 18px 16px; margin: 0; }
.scenario { margin: 24px 0; }
.stress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hair2); }
.ledger-table { margin-top: 24px; border-top: 1px solid var(--hair); }
.ledger-table summary { cursor: pointer; padding: 16px 0; font-weight: 500; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair2); vertical-align: top; }
thead th { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom-color: var(--hair); }
tbody th { font-weight: 500; }
td .muted, th .muted { display: block; }
.meter { display: grid; grid-template-columns: 5rem 1fr 3rem; gap: 12px; align-items: center; font-size: .84rem; margin: 6px 0; }
.meter svg { height: 8px; width: 100%; overflow: visible; }
.m-track { fill: var(--hair); } .m-fill { fill: var(--fg); } .m-dot { fill: var(--accent); }
.heritage { background: transparent; border-style: dashed; }

/* ---- Compare --------------------------------------------------------------------------------- */
.compare-controls { margin-top: 18px; }
.goals { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.goals legend { float: left; margin-right: 12px; padding: 0; }
.goal { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 999px; font-size: .86rem; cursor: pointer; transition: all .35s var(--ease); }
.goal input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.goal:has(input:checked), .goal.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.goal:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lead-line { font: 500 clamp(1.2rem, 2vw, 1.5rem)/1.4 var(--figures); font-variation-settings: "opsz" 18; margin: 0 0 24px; max-width: 46em; }
.lead-line b { font-weight: 500; }
.compare-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .compare-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .compare-cards { grid-template-columns: 1fr; } }
.ccard { padding: 0; overflow: hidden; will-change: transform; }
.ccard .rank-num { position: absolute; top: 12px; left: 16px; z-index: 2; color: #f3efe7; font-size: 1.8rem; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.ccard-plate { aspect-ratio: 16 / 9; height: auto; display: block; }
.ccard-body { padding: 16px 18px 18px; display: grid; gap: 4px; }
.ccard .metrics.compact { grid-template-columns: 1fr; }
.ccard:first-child { border-color: color-mix(in srgb, var(--accent) 55%, var(--hair)); box-shadow: var(--shadow); }
.mix { display: grid; gap: 12px; margin-top: 18px; }
.mix-row { display: grid; grid-template-columns: 8rem 1fr 6rem; gap: 14px; align-items: center; font-size: .86rem; }
.mix-row svg { width: 100%; height: 12px; }
.mix-before { fill: var(--hair); } .mix-after { fill: var(--accent); }
.mix-row b { font-weight: 500; text-align: right; font-size: .8rem; }

/* ---- Closing --------------------------------------------------------------------------------- */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 960px) { .closing-grid { grid-template-columns: 1fr; } }
.closing-form .slider { margin-bottom: 18px; }
.waterfall svg { overflow: visible; }
.wf-bar { fill: var(--hair); transition: all .7s var(--ease); }
.wf-start .wf-bar { fill: var(--fg2); } .wf-minus .wf-bar { fill: none; stroke: var(--fg2); stroke-dasharray: 3 3; } .wf-plus .wf-bar { fill: var(--accent); } .wf-total .wf-bar { fill: var(--fg); }
.wf-link { stroke: var(--hair); stroke-dasharray: 2 3; }
.wf-val { font: 500 11px var(--mono); fill: var(--fg); }
.wf { animation: rise .9s var(--ease) both; transform-box: fill-box; }
.wf:nth-child(2) { animation-delay: .08s; } .wf:nth-child(3) { animation-delay: .16s; } .wf:nth-child(4) { animation-delay: .24s; } .wf:nth-child(5) { animation-delay: .32s; } .wf:nth-child(6) { animation-delay: .4s; } .wf:nth-child(7) { animation-delay: .48s; } .wf:nth-child(8) { animation-delay: .56s; } .wf:nth-child(9) { animation-delay: .64s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.costs .group th, .cmp .group th { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 22px; border-bottom-color: var(--hair); }
.costs tr.seller { color: var(--muted); }
.costs td.note, td.note { color: var(--muted); font-size: .8rem; max-width: 30rem; }

/* ---- Financing ------------------------------------------------------------------------------- */
.fin-controls { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px 32px; margin-top: 18px; align-items: end; }
.fin-controls .profile { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.fin-controls .profile legend { font-size: .84rem; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 860px) { .fin-controls { grid-template-columns: 1fr; } }
.offers th[scope=row] b { display: block; font-weight: 500; }
.offers tr { transition: opacity .4s; }
.offers tr.ineligible { opacity: .45; }
.offers input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; }
.pro .h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin: 4px 0; }

/* ---- Programmes ------------------------------------------------------------------------------ */
.facts-table th { width: 40%; font-weight: 400; color: var(--fg2); }
.facts-table td b { display: block; font-weight: 500; margin-bottom: 4px; }
.briefing-body { margin: 40px 0; display: grid; gap: 28px; }
.briefing-body h2 { margin-bottom: 8px; }
.caution { border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; margin: 32px 0; color: var(--fg2); }

/* ---- World ----------------------------------------------------------------------------------- */
.globe { width: min(100%, 440px); justify-self: center; }
.globe-disc { fill: var(--bg2); } .globe-rim { fill: none; stroke: var(--hair); }
.globe-grid path { fill: none; stroke: var(--hair); stroke-width: .7; }
.globe-cities .dot { fill: var(--accent); } .globe-cities .pulse { fill: var(--accent); opacity: .18; animation: pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.globe-cities text { font: 400 9px var(--mono); fill: var(--fg2); letter-spacing: .06em; }
@keyframes pulse { 0%, 100% { transform: scale(.6); opacity: .25; } 50% { transform: scale(1.4); opacity: .05; } }
.markets th[scope=row] b { display: block; font-weight: 500; }

/* ---- App (iPhone) ---------------------------------------------------------------------------- */
.phones { display: flex; justify-content: center; }
.phone { width: 300px; aspect-ratio: 9 / 19.5; border-radius: 48px; padding: 11px; background: linear-gradient(145deg, #3a3a3d, #121214 40%, #2a2a2d); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; flex: none; }
.phone-screen { height: 100%; border-radius: 38px; overflow: hidden; background: #0c0d0f; color: #ece6da; position: relative; font-size: 12px; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 6px; font: 600 12px var(--sans); }
.phone-status .island { width: 90px; height: 26px; border-radius: 20px; background: #000; }
.app { padding: 6px 16px 16px; display: grid; gap: 10px; }
.app-top { display: flex; justify-content: space-between; font-size: 11px; color: #c9a66b; }
.app-live { color: #86b79d; font-size: 10px; }
.app-kicker { font: 500 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9a958b; margin: 4px 0 0; }
.app-title { font: 400 26px/1 var(--serif); margin: 0; }
.app-plan { border: 1px solid rgba(236,230,218,.14); border-radius: 14px; padding: 8px; background: #121316; }
.ap-wall { fill: none; stroke: rgba(236,230,218,.4); stroke-width: 1.2; }
.ap-here { fill: rgba(201,166,107,.14); stroke: #c9a66b; stroke-width: 1; }
.ap-pin { fill: #86b79d; } .ap-pin.warn { fill: #d9a35e; }
.app-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.app-readings span { border: 1px solid rgba(236,230,218,.12); border-radius: 10px; padding: 6px 8px; font-size: 10px; color: #9a958b; }
.app-readings b { color: #ece6da; font: 500 12px var(--mono); margin-right: 3px; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.app-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(236,230,218,.08); font-size: 11.5px; }
.app-list li span { color: #9a958b; font-size: 10px; }
.app-list li.ok span { color: #86b79d; } .app-list li.warn span { color: #d9a35e; }
.app-voice { display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: #cfc8bb; background: #15171a; border-radius: 12px; padding: 8px 10px; }
.app-voice i { color: #c9a66b; font-style: normal; font-size: 9px; }
.wave { letter-spacing: -1px; color: #c9a66b; }
.app-actions { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; }
.app-btn { text-align: center; padding: 10px 0; border-radius: 999px; border: 1px solid rgba(236,230,218,.16); font-size: 11px; }
.app-btn.primary { background: #c9a66b; color: #0c0d0f; border-color: #c9a66b; font-weight: 600; }
.phone.small { width: 230px; } .phone.small .app-title { font-size: 20px; } .phone.small .phone-screen { font-size: 10px; } .phone.small .app-voice { display: none; }

/* ---- Members' home and memo ---------------------------------------------------------------- */
.prefs { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 22px; align-items: end; }
.prefs > span { display: grid; font-size: .94rem; } .prefs .fine { flex-basis: 100%; }
.member-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .member-grid { grid-template-columns: 1fr; } }
.member .figure { padding: 0; background: transparent; } .member .figure .fig-value { font-size: 2.6rem; }
.stack { display: grid; gap: 16px; }
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .9rem; }
.todo li { padding-left: 16px; position: relative; } .todo li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.memo { position: relative; padding-bottom: 64px; }
.memo-mark { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; font: italic 400 clamp(1.4rem, 4vw, 3rem) var(--serif); color: var(--fg); opacity: .045; transform: rotate(-24deg); z-index: 1; white-space: nowrap; }
.memo-head { padding-top: 48px; padding-bottom: 24px; max-width: 54rem; }
.memo-head .row { margin-bottom: 40px; }
.memo-plate { height: clamp(260px, 44vh, 460px); overflow: hidden; }
.memo-body { max-width: 54rem; padding-top: 40px; }
.memo-body h2 { margin: 36px 0 10px; }
.memo-verdict-box { border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hair); padding: 24px 0; }
.memo-metrics { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .memo-metrics { grid-template-columns: 1fr 1fr; } }
.memo-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.memo-cta p { margin: 0; max-width: 32em; }

/* ---- Directions ------------------------------------------------------------------------------ */
.dir-jump { display: flex; gap: 10px; flex-wrap: wrap; }
.dir-jump a { border: 1px solid var(--hair); border-radius: 999px; padding: 8px 16px; text-decoration: none; font-size: .86rem; }
.direction { padding: clamp(56px, 8vw, 104px) 0; background: var(--bg); color: var(--fg); border-top: 1px solid var(--hair); }
.dir-meridian {
  --bg: #f3efe7; --bg2: #ebe5d9; --card: #f8f5ef; --fg: #111214; --fg2: #2c2d31; --muted: #5e5b55; --hair: rgba(17, 18, 20, .13); --hair2: rgba(17, 18, 20, .07);
  --accent: #8a6a36; --accent-soft: rgba(156, 122, 68, .14); --on-accent: #f8f5ef; --gain: #2f6b4f; --loss: #9a3b32;
  --s0: #9c7a44; --s1: #111214; --s2: #3f6f64; --s3: #8a857b;
  --sky0: #b9a483; --sky1: #dccdb2; --sky2: #ece3d2; --sun: rgba(255, 236, 196, .55); --mass: #24211e; --mass2: #34302b; --pline: rgba(243, 239, 231, .30); --pfine: rgba(243, 239, 231, .16);
  --window: #3d3832; --glow: #e3b56b; --ground: #2b2824; --shadow: 0 24px 48px -28px rgba(30, 24, 14, .28), 0 2px 6px -2px rgba(30, 24, 14, .08);
  --dserif: var(--serif); color-scheme: light;
}
.dir-provenance {
  --bg: #f1ece0; --bg2: #e3dccb; --card: #f7f3ea; --fg: #123c38; --fg2: #2a4f4a; --muted: #5d6f68; --hair: rgba(18, 60, 56, .16); --hair2: rgba(18, 60, 56, .08);
  --accent: #3e6e64; --accent-soft: rgba(62, 110, 100, .12); --on-accent: #f7f3ea; --s0: #123c38; --s1: #a4875a; --s2: #5c8a7f; --s3: #8a8a7c;
  --sky0: #9fb3a6; --sky1: #d4dacb; --sky2: #ece8da; --sun: rgba(255, 246, 214, .5); --mass: #173f3a; --mass2: #22504a; --window: #2d5a53; --glow: #e7cf96; --ground: #183c37;
  --dserif: "Cormorant Garamond", Garamond, Georgia, serif;
}
.dir-keystone { --dserif: "Instrument Serif", Georgia, serif; --accent: #cdb891; --s0: #cdb891; }
.direction .dir-name, .direction .dir-specimen, .direction .mini-display, .direction .mini-num { font-family: var(--dserif); }
.dir-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; margin-bottom: 48px; }
.dir-mark { color: var(--fg); }
.dir-name { font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; }
.dir-idea { font-size: 1.08rem; color: var(--fg2); max-width: 44em; }
.dir-system { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 28px; margin-bottom: 48px; }
@media (max-width: 1000px) { .dir-system { grid-template-columns: 1fr; } }
.dir-specimen .tab { font-family: var(--figures); }
.dir-specimen { font-size: 4.4rem; line-height: 1; margin: 0 0 6px; }
.dir-specimen .tab { color: var(--accent); }
.dir-specimen-num { font: 500 1rem var(--mono); color: var(--fg2); }
.dir-type ul { padding: 0; list-style: none; font-size: .84rem; color: var(--muted); display: grid; gap: 6px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sw { display: grid; gap: 2px; font-size: .74rem; } .sw i { height: 44px; border-radius: 8px; border: 1px solid var(--hair); } .sw code { font: 400 .68rem var(--mono); color: var(--muted); }
.dir-meridian .sw0 i { background: #111214; } .dir-meridian .sw1 i { background: #f3efe7; } .dir-meridian .sw2 i { background: #e9e2d4; } .dir-meridian .sw3 i { background: #9c7a44; } .dir-meridian .sw4 i { background: #2f6b4f; } .dir-meridian .sw5 i { background: #9a3b32; }
.dir-provenance .sw0 i { background: #123c38; } .dir-provenance .sw1 i { background: #f1ece0; } .dir-provenance .sw2 i { background: #e3dccb; } .dir-provenance .sw3 i { background: #5c8a7f; } .dir-provenance .sw4 i { background: #2f6b4f; } .dir-provenance .sw5 i { background: #8f3f36; }
.dir-keystone .sw0 i { background: #17181b; } .dir-keystone .sw1 i { background: #24262a; } .dir-keystone .sw2 i { background: #cdb891; } .dir-keystone .sw3 i { background: #ece6da; } .dir-keystone .sw4 i { background: #86b79d; } .dir-keystone .sw5 i { background: #d48d80; }
.dir-marks { display: flex; gap: 20px; align-items: center; margin-top: 18px; }
.emboss { padding: 14px; border-radius: 10px; background: var(--bg2); }
.emboss .dir-mark { color: var(--bg2); filter: drop-shadow(1px 1px 0 rgba(255,255,255,.55)) drop-shadow(-1px -1px 0 rgba(0,0,0,.22)); }
.emboss .dir-mark .mono-path { stroke: currentColor; } .emboss .dir-mark .mono-dot { fill: currentColor; }
.mood { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mood figure { margin: 0; } .mood figcaption { font: 400 .68rem var(--mono); color: var(--muted); margin-top: 6px; }
.mood .plate { aspect-ratio: 4 / 3; height: auto; border-radius: 8px; }
.mood-chart { grid-column: 1 / -1; } .mood-chart .chart { margin: 0; } .mood-chart .legend { display: none; }
.screens-k { margin-bottom: 18px; }
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .screens { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .screens { grid-template-columns: 1fr; } }
.mini { margin: 0; } .mini figcaption { font: 400 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.mini-screen { border: 1px solid var(--hair); border-radius: 12px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3.1; }
.mini-bar { display: flex; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--hair2); } .mini-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); }
.mini-body { padding: 14px 16px; position: relative; height: calc(100% - 26px); overflow: hidden; }
.mini-eyebrow { font: 500 .55rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.mini-display { font-size: 1.5rem; line-height: 1.05; margin: 0 0 10px; } .mini-display em { color: var(--accent); }
.mini-display.sm { font-size: 1.15rem; margin: 8px 0 4px; }
.mini-btn { display: inline-block; font-size: .62rem; background: var(--fg); color: var(--bg); padding: 5px 10px; border-radius: 999px; }
.mini-hero { position: relative; z-index: 1; max-width: 62%; }
.mini-plate { position: absolute; right: 0; bottom: 0; width: 46%; height: 78%; border-top-left-radius: 10px; }
.mini-plate.short { position: static; width: 100%; height: 70px; border-radius: 6px; }
.mini-num { font-size: 2.1rem; line-height: 1; margin: 6px 0 2px; }
.mini-cap { font-size: .66rem; color: var(--muted); margin: 0 0 10px; }
.mini-rows { display: grid; gap: 0; } .mini-rows span { display: flex; justify-content: space-between; font-size: .66rem; padding: 5px 0; border-bottom: 1px solid var(--hair2); color: var(--fg2); } .mini-rows b { font-weight: 500; font-variant-numeric: tabular-nums; }
.mini-verdict { font-size: .74rem; color: var(--accent); font-style: italic; margin: 0 0 8px; } .mini-verdict span { color: var(--muted); font-style: normal; }
.mini-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mini-figs span { display: grid; font-size: .86rem; font-variant-numeric: tabular-nums; } .mini-figs i { font: normal 400 .5rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mini .chart { margin: 0; } .mini .legend { display: none; } .mini .chart .grid text { font-size: 9px; }
.mini-rank { list-style: decimal inside; padding: 0; margin: 4px 0 0; font-size: .64rem; } .mini-rank li { display: flex; justify-content: space-between; padding: 2px 0; } .mini-rank li::marker { color: var(--accent); }
.mini-phone { display: flex; justify-content: center; }

/* ---- Motion preferences --------------------------------------------------------------------- */
.reorder { transition: transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .scenario, .side-actions, .memo-cta, body::before { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---- Small screens ----------------------------------------------------------------------------- */
.split > *, .join-grid > *, .hero-grid > *, .dossier-grid > *, .closing-grid > *, .member-grid > * { min-width: 0; }
@media (max-width: 560px) {
  .metrics { grid-template-columns: 1fr; }
  .figs.three > :last-child:nth-child(odd), .figs.six > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .facts div { grid-template-columns: 7rem 1fr; }
  .mix-row { grid-template-columns: 6.5rem 1fr 5.2rem; }
}
@media (max-width: 760px) { .costs, .offers, .markets, .vs, .ledger-table table { min-width: 720px; } }

/* ---- Accounts and the rental tracker -------------------------------------------------------- */
.bar-link { font-size: .92rem; text-decoration: none; color: var(--fg2); white-space: nowrap; }
@media (max-width: 520px) { .bar-link { display: none; } }
.soon { display: inline-block; margin-left: 10px; padding: 3px 8px; border: 1px solid var(--hair); border-radius: 999px; font: 500 .66rem/1.2 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: none; vertical-align: middle; }
.banner { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: var(--r2); background: var(--card); margin: 20px 0; }
.banner p { margin: 0; flex: 1 1 18rem; } .banner.ok { border-left-color: var(--gain); }
.banner form { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.crumbs { font-size: .92rem; margin: 0 0 8px; } .crumbs a { color: var(--muted); }
.auth-grid { display: grid; grid-template-columns: 1fr minmax(0, 28rem); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .auth-grid { grid-template-columns: 1fr; } }
.narrow-form { max-width: 30rem; }
.auth-form { display: grid; gap: 4px; } .auth-form .button { justify-self: start; margin: 10px 0; } .auth-form .check { display: flex; gap: 10px; font-size: .9rem; color: var(--fg2); margin: 8px 0; }
.field input[type=email], .field input[type=password], .field input[type=text], .field input[type=number], .field input[type=url], .field input[type=date], .field input[type=datetime-local], .field input:not([type]), .field textarea { font: 400 1rem var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--hair); border-radius: 10px; padding: 11px 12px; width: 100%; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.field select { border: 1px solid var(--hair); border-radius: 10px; padding: 11px 12px; background: var(--bg); }
.money-small { display: flex; align-items: center; gap: 6px; } .money-small > span { color: var(--muted); }
.danger { margin-top: 32px; } .danger summary { cursor: pointer; font-weight: 600; color: var(--loss); }
.empty { text-align: left; padding: 24px 0; }

.tracker-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1000px) { .tracker-grid { grid-template-columns: 1fr; } }
.tracker-side { display: grid; gap: 16px; position: sticky; top: 88px; }
@media (max-width: 1000px) { .tracker-side { position: static; } }
.priorities .slider { margin: 6px 0; }
.pipeline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pipeline a { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--fg2); }
.pipeline a.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pipeline b { font-weight: 600; }
.rentals { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rental { padding: 18px 20px; }
.rental.off { opacity: .62; }
.rental-head { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; }
.rental-title { display: grid; gap: 2px; min-width: 0; }
.rental-title .h4 { text-decoration: none; font-size: 1.08rem; }
.rental .rank-num { font-size: 1.7rem; min-width: 1.2em; text-align: center; }
.pick input { width: 20px; height: 20px; accent-color: var(--accent); }
.status-pick select { font: 500 .86rem var(--sans); padding: 8px 10px; border: 1px solid var(--hair); border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer; }
.status { font: 500 .8rem var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); white-space: nowrap; }
.s-signed, .s-approved { border-color: var(--gain); color: var(--gain); } .s-declined, .s-withdrawn { color: var(--muted); }
.rental-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; margin: 14px 0 10px; }
.rental-figs div { display: grid; padding: 8px 0; border-bottom: 1px solid var(--hair2); }
.rental-figs dt { font-size: .8rem; color: var(--muted); } .rental-figs dd { margin: 0; font-size: 1rem; font-variant-numeric: tabular-nums; } .rental-figs b { font-weight: 650; }
@media (max-width: 640px) { .rental-figs { grid-template-columns: repeat(2, 1fr); } .rental-head { grid-template-columns: auto auto 1fr; } .status-pick, .rental-head .status { grid-column: 1 / -1; } }
.score-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.score { font: 500 1.8rem/1 var(--figures); color: var(--accent); min-width: 2.2ch; }
.parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 14px; }
@media (max-width: 640px) { .parts { grid-template-columns: repeat(2, 1fr); } }
.part { display: grid; gap: 3px; font-size: .74rem; color: var(--muted); }
.part .bar { display: block; } .part .bar svg { width: 100%; height: 4px; } .part .m-fill { fill: var(--accent); }
.dates { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.dates li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 2px 10px; font-size: .9rem; }
.dates time { font: 500 .86rem var(--mono); color: var(--accent); grid-row: span 2; }
.dates span { color: var(--muted); font-size: .8rem; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1000px) { .editor-grid { grid-template-columns: 1fr; } }
.editor { display: grid; gap: 18px; } .editor fieldset.card { border: 1px solid var(--hair); margin: 0; }
.editor legend { padding: 0 6px; }
.cols { display: grid; gap: 0 16px; } .cols.two { grid-template-columns: 1fr 1fr; } .cols.three { grid-template-columns: repeat(3, 1fr); } .cols.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .cols.two, .cols.three, .cols.four { grid-template-columns: 1fr 1fr; } }
.amen { border: 0; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 8px; }
.amen legend { font-size: .9rem; color: var(--fg2); margin-bottom: 8px; }
.amen .check, .choose-list .check { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.amen input, .choose-list input { accent-color: var(--accent); width: 18px; height: 18px; }
.editor-side { display: grid; gap: 14px; } .sticky { position: sticky; top: 88px; }
.delete-form { margin: 0; }
.choose { margin-top: 18px; } .choose-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 10px; margin: 12px 0 16px; }
.cmp th[scope=col] { font: 600 .95rem var(--sans); text-transform: none; letter-spacing: 0; color: var(--fg); min-width: 11rem; }
.cmp th[scope=col] .rank-num { font-size: 1.2rem; margin-right: 4px; }
.cmp td.best { color: var(--gain); font-weight: 650; }
.cmp td.best::after { content: " ●"; font-size: .6em; vertical-align: middle; }
.cmp .yes { color: var(--gain); font-weight: 600; }
@media (max-width: 760px) { .cmp { min-width: 640px; } }
.spaced { margin-top: 40px; }
@media (max-width: 640px) { .score-row { grid-template-columns: 1fr; gap: 8px; } .part { font-size: .78rem; } }