/* mandates.cc, the public site.
   One visual system with the app (docs/design/DESIGN-LANGUAGE.md): paper, ink
   and burgundy; Source Serif 4 for headings and names, IBM Plex Mono for
   labels; square surfaces; the 2px brand rule. The site adds IBM Plex Sans for
   running text, because the app's Helvetica stack falls back to Arial on the
   Windows machines most readers use. Light-only on purpose, like the product. */

@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-variable-latin-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-variable-latin-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #FBF9F6;
  --paper-raised: #FDFBF8;
  --card: #FFFFFF;
  --sand: #F5F0E8;
  --fill-quiet: #F7F2E8;
  --fill-active: #F3EBDE;
  --fill-notice: #F6ECE6;
  --ink: #201A16;
  --ink-2: #3F3831;
  --ink-quote: #4A423A;
  --ink-muted: #6E655B;
  --ink-faint: #766C62;
  --hairline-soft: #EEE7DB;
  --hairline: #E7E0D5;
  --stroke: #DDD4C6;
  --stroke-mark: #C6BCAE;
  --brand: #7E1F2E;
  --brand-dark: #571320;
  --brand-soft: #F6ECEA;
  --brand-hairline: #E8D3C9;
  --band-med: #8A6A2F;
  --band-soft: #FBF4E6;
  --band-hairline: #EBDDC2;
  --night: #1B1613;
  --night-raised: #251E1A;
  --night-line: #3A322C;
  --night-text: #EFE8DD;
  --night-muted: #B9AE9F;
  --rose: #E6A3AE;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(18px, 4vw, 48px);
  --measure: 1200px;
  --lift: 0 1px 0 #ffffffcc inset, 0 2px 4px #2018140a, 0 24px 48px -24px #2018142e, 0 80px 120px -64px #3c1e1447;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s var(--ease), text-decoration-color .15s var(--ease); }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand); color: var(--paper); }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.label { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.label.accent { color: var(--brand); }
.label.faint { color: var(--ink-faint); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* ---- Masthead ------------------------------------------------------------ */
.masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.masthead::after { content: ""; display: block; height: 2px; background: var(--brand); transform-origin: left center; }
.masthead .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); text-decoration: none; }
.logo svg { width: 24px; height: 24px; }
.logo span { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--ink); }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: var(--brand); }
.nav a[aria-current="page"] { color: var(--brand); }
.nav .signin { color: var(--ink-muted); font-weight: 400; }
.nav a.button, .nav a.button:hover { color: #fff; }

/* ---- Buttons ------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font: 600 15px/1.2 var(--sans); letter-spacing: -.003em; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 #ffffff26 inset, 0 10px 24px -12px #7e1f2e8c; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.button:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 1px 0 #ffffff26 inset, 0 14px 28px -12px #7e1f2e99; }
.button:active { transform: none; }
.button.secondary { background: var(--card); color: var(--ink); border-color: var(--stroke); box-shadow: 0 1px 2px #2018140f; }
.button.secondary:hover { border-color: var(--ink); color: var(--ink); box-shadow: 0 8px 20px -14px #20181466; }
.button .arrow { transition: transform .2s var(--ease); }
.button:hover .arrow { transform: translateX(3px); }
.button.small { min-height: 38px; padding: 0 15px; font-size: 14px; box-shadow: none; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 4.8vw, 64px) clamp(64px, 8vw, 112px); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(to right, #2018140b 1px, transparent 1px), linear-gradient(to bottom, #2018140b 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 26%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 72% 58% at 50% 26%, #000 25%, transparent 78%); }
.hero::after { content: ""; position: absolute; left: 50%; bottom: -8%; z-index: -1; width: min(1400px, 140%); height: 70%; transform: translateX(-50%); background: radial-gradient(closest-side, #7e1f2e1a, transparent); }
.hero-copy { max-width: 920px; margin: 0 auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border: 1px solid var(--brand-hairline); background: var(--card); font: 400 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand); box-shadow: 0 1px 2px #2018140a; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px #7e1f2e1f; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -.034em; margin: 22px auto 0; max-width: 21ch; }
.hero h1 em { display: block; font-style: italic; font-weight: 500; color: var(--brand); }
.lede { font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.62; color: var(--ink-2); max-width: 66ch; margin: 22px auto 0; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }
.proof { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 24px 0 0; padding: 0; font-size: 13.5px; color: var(--ink-muted); }
.proof li { display: inline-flex; align-items: center; gap: 8px; }
.proof svg { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Product window (hero desk, how-it-works stage) ---------------------- */
.window { position: relative; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--lift); }
.window-bar { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--hairline); background: var(--paper-raised); }
.window-brand { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--serif); color: var(--ink); }
.window-brand svg { width: 15px; height: 15px; color: var(--brand); }
.window-crumb { font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.window-crumb i { font-style: normal; margin: 0 8px; color: var(--stroke-mark); }
.window-crumb b { font-weight: 400; color: var(--ink); }
.window-tag { margin-left: auto; padding: 4px 8px; border: 1px solid var(--band-hairline); background: var(--band-soft); font: 400 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--band-med); white-space: nowrap; }
.window-foot { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--hairline); background: var(--paper-raised); font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.hero-window { max-width: 1180px; margin: clamp(40px, 4.4vw, 60px) auto 0; text-align: left; }
.run-status { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--hairline-soft); font-size: 12.5px; color: var(--ink-2); }
.run-dot { width: 7px; height: 7px; border-radius: 50%; background: #3E7C4F; box-shadow: 0 0 0 3px #3e7c4f24; }
.run-label { font-weight: 500; font-variant-numeric: tabular-nums; }
.run-time { margin-left: auto; font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.run-meter { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.run-meter i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left center; transform: scaleX(0); transition: transform .35s var(--ease), opacity .6s var(--ease); opacity: 0; }
.run-status.running .run-meter i { opacity: 1; }
.run-status.running .run-dot { background: var(--brand); box-shadow: 0 0 0 3px #7e1f2e26; }
.window-body { display: grid; grid-template-columns: 224px minmax(0, .95fr) minmax(0, 1.3fr); min-height: 452px; }
.pane { min-width: 0; }
.pane + .pane { border-left: 1px solid var(--hairline); }
.pane-label { margin: 0; padding: 14px 16px 10px; font: 400 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.firms-pane { background: var(--paper-raised); }
.firm-list { list-style: none; margin: 0; padding: 0 8px 12px; }
.firm { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px; font-size: 13px; line-height: 1.35; color: var(--ink-2); transition: background-color .25s var(--ease), color .25s var(--ease); }
.firm .tick { position: relative; width: 14px; height: 14px; border: 1px solid var(--stroke); background: var(--card); transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.firm.read .tick { background: var(--brand); border-color: var(--brand); }
.firm.read .tick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.firm .f-count { font: 400 11px/1 var(--mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.firm.current { background: var(--fill-active); color: var(--ink); }
.firm.current .f-name { font-weight: 600; }
.people-list { display: flex; flex-direction: column; }
.person { position: relative; display: grid; gap: 3px; width: 100%; padding: 13px 16px 14px; border: 0; border-top: 1px solid var(--hairline-soft); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .15s var(--ease); }
.person:hover { background: var(--fill-quiet); }
.person[aria-selected="true"] { background: var(--fill-active); box-shadow: inset 3px 0 0 var(--brand); }
.p-name { font: 600 15.5px/1.25 var(--serif); }
.p-role { font-size: 12.5px; line-height: 1.4; color: var(--ink-muted); }
.chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 3px 8px; border: 1px solid var(--brand-hairline); background: var(--brand-soft); font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip.guess { border-color: var(--band-hairline); background: var(--band-soft); color: var(--band-med); }
.person .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; opacity: 0; }
.person[aria-selected="true"] .progress.running { opacity: .5; animation: fill var(--cycle, 5200ms) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.more { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--hairline-soft); font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.detail-pane { padding: 0 24px 24px; }
.detail-pane .pane-label { padding-left: 0; color: var(--brand); }
.detail-pane h3 { margin: 4px 0 0; font: 600 clamp(24px, 2.2vw, 30px)/1.1 var(--serif); letter-spacing: -.015em; }
.d-role { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.d-why { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.d-why b, .d-ask b, .r-label { display: block; margin: 0 0 5px; font: 400 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.route { margin-top: 16px; padding: 14px 16px 12px; border: 1px solid var(--hairline); background: var(--paper-raised); }
.route .chip { margin-top: 0; }
.route-email { margin: 10px 0 0; font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.route[data-route="guess"] .route-email { font-weight: 500; color: var(--ink-muted); }
.route-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.route[data-route="guess"] .route-note { color: var(--band-med); }
.route-meta { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 10px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline-soft); font-size: 12.5px; }
.route-meta dt { font: 400 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.route-meta dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.d-ask { margin-top: 14px; padding: 14px 16px; background: var(--fill-quiet); box-shadow: inset 2px 0 0 var(--brand); }
.d-ask b { color: var(--brand); }
.d-ask p { margin: 0; font: 400 15px/1.55 var(--serif); }
.detail-pane[data-swap] > * { transition: opacity .28s var(--ease), transform .28s var(--ease); }
.detail-pane.swapping > * { opacity: .12; transform: translateY(4px); }

/* ---- Section scaffolding ------------------------------------------------- */
.section-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--stroke); }
.section-head h2, .share-copy h2, .faq-head h2, .principles-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.026em; margin: 14px 0 0; }
.section-head > p:not(.label) { font-size: 17.5px; line-height: 1.65; color: var(--ink-muted); margin: 0; max-width: 46ch; justify-self: end; }
.section-head.center { display: block; max-width: 820px; margin: 0 auto; padding: 0; border: 0; text-align: center; }

/* ---- Numbers: the benchmark, stated plainly ------------------------------ */
.numbers { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--hairline); }
.numbers-head h2 { margin: 12px 0 0; max-width: 30ch; font: 600 clamp(26px, 2.6vw, 34px)/1.12 var(--serif); letter-spacing: -.016em; text-wrap: balance; }
.metrics { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; padding: 0; border-block: 1px solid var(--stroke); }
.metric { display: flex; flex-direction: column; gap: 16px; padding: 30px 26px 32px; border-left: 1px solid var(--hairline); }
.metric:first-child { padding-left: 0; border-left: 0; }
.metric:last-child { padding-right: 0; }
.metric-value { font: 600 clamp(52px, 5.6vw, 76px)/.9 var(--serif); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.metric-value small { margin-left: 3px; font: 500 .34em/1 var(--sans); letter-spacing: 0; color: var(--brand); }
.metric-label { max-width: 26ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.metrics-note { margin: 16px 0 0; max-width: 96ch; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }

/* ---- Demo: three short loops of the real app -------------------------------
   One action each, in a fixed frame. Tabs on the left name the steps, and
   the open tab's bar fills as its loop plays; the next tab follows on its
   own. Without script the first loop is a plain video with controls. */
.demo { padding-block: clamp(64px, 8vw, 112px); background: linear-gradient(var(--paper), var(--sand)); border-top: 1px solid var(--hairline); }
.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: clamp(28px, 3.4vw, 44px); }
.tour-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--stroke); background: var(--card); }
.tour-tabs[hidden] { display: none; }
.tour-tabs [role="tab"] { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px 19px; border: 0; border-left: 1px solid var(--hairline); background: transparent; color: var(--ink-muted); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.tour-tabs [role="tab"]:first-child { border-left: 0; }
.tour-tabs [role="tab"]:hover { background: var(--fill-quiet); color: var(--ink); }
.tour-tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.tour-tabs [role="tab"][aria-selected="true"] { background: var(--fill-active); color: var(--ink); }
.tour-n { font: 400 10.5px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tour-tabs [aria-selected="true"] .tour-n { color: var(--brand); }
.tour-name { font: 600 19px/1.2 var(--serif); letter-spacing: -.01em; }
.tour-note { font-size: 14px; line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.tour-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hairline); }
.tour-bar::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.tour-window { margin: 0; min-width: 0; }
.tour-screen { position: relative; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--paper); }
.tour.phone .tour-screen { aspect-ratio: 4 / 5; }
.tour-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--paper); opacity: 0; transition: opacity .45s var(--ease); }
.tour-video.on { opacity: 1; }
.tour-video[hidden] { display: none; }
.tour-pause { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--stroke); background: #fbf9f6e6; color: var(--ink); cursor: pointer; box-shadow: 0 8px 20px -10px #2018144d; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.tour-pause:hover { background: var(--card); transform: translateY(-1px); }
.tour-pause[hidden] { display: none; }
/* Two bars for pause, a triangle for play. */
.tour-pause-icon { position: relative; width: 12px; height: 14px; }
.tour-pause-icon::before, .tour-pause-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: currentColor; }
.tour-pause-icon::before { left: 0; }
.tour-pause-icon::after { right: 0; }
.tour-pause.paused .tour-pause-icon::before { left: 1px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.tour-pause.paused .tour-pause-icon::after { display: none; }
@media (min-width: 1000px) {
  .tour { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .tour-tabs { grid-template-columns: minmax(0, 1fr); border: 0; background: transparent; }
  .tour-tabs [role="tab"] { padding: 20px 4px 22px 18px; border-left: 0; border-top: 1px solid var(--stroke); }
  .tour-tabs [role="tab"]:first-child { border-top: 0; }
  .tour-tabs [role="tab"][aria-selected="true"] { background: transparent; }
  .tour-tabs [role="tab"]:hover { background: transparent; }
  .tour-bar { left: 0; right: auto; top: 20px; bottom: 22px; width: 2px; height: auto; }
  .tour-bar::after { transform: scaleY(var(--p, 0)); transform-origin: center top; }
  .tour-name { font-size: 22px; }
}
@media (max-width: 700px) {
  .tour-tabs [role="tab"] { padding: 12px 10px 14px; }
  .tour-note { display: none; }
  .tour-name { font-size: 15px; }
  .tour-pause { right: 10px; bottom: 10px; width: 36px; height: 36px; }
}

/* ---- Results: what a run leaves you with --------------------------------- */
.results { padding-block: clamp(72px, 9vw, 128px); }
.results .section-head { padding-bottom: 0; border-bottom: 0; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: clamp(40px, 4.6vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--stroke); }
.moment { position: relative; padding-top: 30px; }
.moment::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; background: var(--brand); }
.moment .when { margin: 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.moment h3 { margin: 12px 0 0; font: 600 clamp(24px, 2.2vw, 30px)/1.12 var(--serif); letter-spacing: -.016em; }
.moment p:not(.when) { margin: 12px 0 0; max-width: 40ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }

/* ---- How it works -------------------------------------------------------- */
.how { padding-block: clamp(72px, 9vw, 128px); }
.steps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); margin-top: 12px; }
.step-list { position: relative; list-style: none; margin: 0; padding: 0; }
.step-list::before { content: ""; position: absolute; left: 19.5px; top: 54px; bottom: 60px; width: 1px; background: var(--hairline); }
.step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 20px; padding: 34px 0 36px; transition: opacity .35s var(--ease); }
.step .no { position: relative; z-index: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--stroke); background: var(--paper); font: 400 11px/1 var(--mono); letter-spacing: .06em; color: var(--ink-faint); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.step h3 { margin: 7px 0 0; font: 600 26px/1.15 var(--serif); letter-spacing: -.014em; }
.step p { margin: 10px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 46ch; }
.step > :not(.no) { grid-column: 2; }
.step .step-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 16px 0 0; font: 400 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.step-meta b { font-weight: 400; color: var(--brand); }
.step-meta span { display: contents; }
.step .shot { margin-top: 22px; }
.step.active .no { background: var(--brand); border-color: var(--brand); color: #fff; }
.shot.window img { width: 100%; }
.stage { position: sticky; top: 108px; align-self: start; display: none; }
.stage-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-raised); }
.stage-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.015); transition: opacity .5s var(--ease), transform .8s var(--ease-out); }
.stage-screen img.on { opacity: 1; transform: none; }
.stage-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.stage-dots i { width: 22px; height: 2px; background: var(--stroke); transition: background-color .3s var(--ease), width .3s var(--ease); }
.stage-dots i.on { width: 38px; background: var(--brand); }
.js .stage { display: block; }
.js .step .shot { display: none; }
.js .step:not(.active) { opacity: .5; }

/* ---- Person record type (the proof sequence) ------------------------------ */
.r-name { margin: 0; font: 600 clamp(24px, 2.4vw, 30px)/1.1 var(--serif); letter-spacing: -.016em; }
.r-role { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-muted); }

/* ---- Share: the sample brief --------------------------------------------- */
/* ---- Features: everything in it ------------------------------------------ */
.features { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--hairline); }
.feature-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(30px, 3.6vw, 48px); }
.feature-col { padding: 0 clamp(16px, 1.8vw, 26px); border-left: 1px solid var(--hairline); }
.feature-col:first-child { padding-left: 0; border-left: 0; }
.feature-col:last-child { padding-right: 0; }
.feature-col h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--stroke); font: 400 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.feature-col ul { list-style: none; margin: 0; padding: 0; }
.feature-col li { padding: 18px 0 20px; border-bottom: 1px solid var(--hairline-soft); }
.feature-col li:last-child { border-bottom: 0; }
.feature-col b { display: block; font: 600 18.5px/1.3 var(--serif); letter-spacing: -.006em; color: var(--ink); text-wrap: balance; }
.feature-col span { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.share { padding-block: clamp(72px, 9vw, 128px); overflow-x: clip; border-top: 1px solid var(--hairline); }
.share-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.share-copy > p:not(.label) { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 18px 0 0; max-width: 48ch; }
.spec { list-style: none; margin: 26px 0 30px; padding: 0; border-top: 1px solid var(--hairline); }
.spec li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14.5px; color: var(--ink-2); }
.spec b { font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); padding-top: 2px; }
.paper-stack { position: relative; display: block; text-decoration: none; perspective: 1600px; }
.paper-stack .sheet { border: 1px solid var(--hairline); background: #fff; box-shadow: 0 40px 90px -50px #2018145c; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.paper-stack .sheet.front { transform: rotateY(-7deg) rotateX(3deg); transform-origin: 60% 50%; }
.paper-stack .sheet.back { position: absolute; inset: 0; z-index: -1; opacity: .8; transform: translate(22px, 22px) rotate(1.4deg); }
.paper-stack:hover .sheet.front { transform: none; box-shadow: 0 50px 100px -48px #20181466; }
.paper-stack:hover .sheet.back { transform: translate(28px, 26px) rotate(2deg); }

/* ---- Principles (night) -------------------------------------------------- */
.night { background: var(--night); color: var(--night-text); }
.night .label { color: var(--night-muted); }
.night .label.accent { color: var(--rose); }
.principles { position: relative; padding-block: clamp(72px, 9vw, 128px); overflow: hidden; }
.principles::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, #ffffff08 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); pointer-events: none; }
.principles .wrap { position: relative; }
.principles-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px 32px; align-items: end; }
.principles-head h2 { grid-column: 1; }
.principles-head p:not(.label) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; max-width: 34ch; margin: 0; font: italic 400 20px/1.5 var(--serif); color: var(--night-muted); }
.wont-list { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); border-top: 1px solid var(--night-line); }
.wont-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 18px; padding: 26px 0 28px; border-bottom: 1px solid var(--night-line); }
.wont-list .x { position: relative; width: 30px; height: 30px; margin-top: 2px; border: 1px solid var(--night-line); }
.wont-list .x::before, .wont-list .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--rose); }
.wont-list .x::before { transform: translate(-50%, -50%) rotate(45deg); }
.wont-list .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.wont-list.promise-list .x::before { width: 11px; height: 6px; background: none; border: solid var(--rose); border-width: 0 0 1.8px 1.8px; transform: translate(-50%, -70%) rotate(-45deg); }
.wont-list.promise-list .x::after { display: none; }
.wont-list strong { display: block; font: 600 21px/1.3 var(--serif); }
.promise-note { margin: 22px 0 0; max-width: 78ch; font-size: 13.5px; line-height: 1.6; color: var(--night-muted); }
.wont-list span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--night-muted); max-width: 44ch; }

/* ---- Pricing ------------------------------------------------------------- */
.pricing { padding-block: clamp(72px, 9vw, 128px); background: var(--card); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(32px, 4vw, 52px); }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border: 1px solid var(--stroke); background: var(--paper); }
.plan.feature { background: var(--card); border-color: var(--brand); box-shadow: 0 34px 70px -40px #7e1f2e61; }
.plan.feature::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--brand); }
.plan-step { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 22px; margin: 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pill { padding: 3px 8px; background: var(--brand); color: #fff; font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; }
.pill.quiet { padding: 2px 7px; border: 1px solid var(--stroke); background: transparent; color: var(--ink-muted); }
.plan h3 { margin: 14px 0 0; font: 600 23px/1.2 var(--serif); letter-spacing: -.01em; }
.plan-price { margin: 18px 0 0; font: 600 46px/1 var(--serif); letter-spacing: -.025em; font-variant-numeric: lining-nums tabular-nums; }
.plan-price small { font: 400 15px/1 var(--sans); letter-spacing: 0; color: var(--ink-muted); }
.plan-copy { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ticks { flex: 1; list-style: none; display: grid; align-content: start; gap: 10px; margin: 20px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--hairline); }
.ticks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ticks li::before { content: ""; width: 10px; height: 5px; margin-top: 7px; border: solid var(--brand); border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); }
.plans-note { margin: 24px auto 0; max-width: 70ch; font-size: 14px; color: var(--ink-muted); text-align: center; }

/* ---- Questions ----------------------------------------------------------- */
.faq { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--hairline); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-head { position: sticky; top: 112px; }
.faq-head p:not(.label) { margin: 18px 0 0; font-size: 16px; color: var(--ink-muted); }
.faq-list details { border-top: 1px solid var(--hairline); }
.faq-list details:last-child { border-bottom: 1px solid var(--hairline); }
.faq-list summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font: 600 19px/1.35 var(--serif); letter-spacing: -.005em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 13px; height: 13px; margin-top: 7px; background: linear-gradient(var(--brand), var(--brand)) center / 13px 1.5px no-repeat, linear-gradient(var(--brand), var(--brand)) center / 1.5px 13px no-repeat; transition: transform .3s var(--ease); }
.faq-list summary:hover { color: var(--brand); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0 0 24px; max-width: 62ch; font-size: 15.5px; line-height: 1.72; color: var(--ink-2); }

/* ---- Founder ------------------------------------------------------------- */
.founder { padding-block: clamp(72px, 9vw, 120px); background: var(--sand); border-top: 1px solid var(--hairline); }
.founder-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); }
.founder-title { margin: 14px 0 0; font: 600 clamp(28px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; }
.letter p { margin: 0 0 18px; max-width: 58ch; font: 400 clamp(18px, 1.6vw, 21px)/1.68 var(--serif); text-wrap: pretty; }
.letter p:first-child::first-letter { float: left; padding: 6px 10px 0 0; font-weight: 700; font-size: 4.1em; line-height: .82; color: var(--brand); }
.signature { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 26px; }
.signature strong { font: italic 500 24px/1.2 var(--serif); }

/* ---- Closing ------------------------------------------------------------- */
.closing { position: relative; overflow: hidden; padding-block: clamp(80px, 10vw, 150px); background: var(--night); color: var(--night-text); }
.closing::before { content: ""; position: absolute; right: -10%; top: -30%; width: 70%; height: 160%; background: radial-gradient(closest-side, #7e1f2e40, transparent); pointer-events: none; }
.closing .wrap { position: relative; }
.closing .label.accent { color: var(--rose); }
.closing h2 { margin: 16px 0 0; font: 600 clamp(48px, 8vw, 112px)/.96 var(--serif); letter-spacing: -.036em; }
.closing .closing-copy { margin: 24px 0 0; max-width: 50ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--night-muted); }
.closing .cta-row { justify-content: flex-start; }
.button.light { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: 0 16px 34px -18px #000000b3; }
.button.light:hover { background: #fff; border-color: #fff; color: var(--brand); }
.button.ghost { background: transparent; border-color: var(--night-line); color: var(--night-text); box-shadow: none; }
.button.ghost:hover { background: transparent; border-color: var(--night-muted); color: #fff; }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--night-muted); }
.email-line code { font: 400 13px/1.4 var(--mono); color: var(--night-text); user-select: all; }
.copy { padding: 6px 10px; border: 1px solid var(--night-line); background: transparent; color: var(--night-muted); font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.copy:hover { border-color: var(--night-muted); color: #fff; }

/* ---- Footer -------------------------------------------------------------- */
.footer { background: var(--night); color: var(--night-muted); border-top: 1px solid var(--night-line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, .75fr)); gap: 32px; padding-block: 52px 60px; }
.footer .logo { color: var(--rose); }
.footer .logo span { color: var(--night-text); }
.footer-brand p { margin: 14px 0 0; max-width: 44ch; font-size: 14px; line-height: 1.6; }
.footer-grid nav, .footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-label { margin: 0 0 4px; font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); }
.footer a { color: var(--night-text); text-decoration: none; font-size: 14px; }
.footer a:hover { color: #fff; text-decoration: underline; }

/* ---- Inner pages (trust, privacy) ---------------------------------------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 104px) clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--stroke); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, #2018140a 1px, transparent 1px), linear-gradient(to bottom, #2018140a 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 20% 0%, #000 20%, transparent 75%); }
.page-hero h1 { margin: 16px 0 0; max-width: 18ch; font: 600 clamp(40px, 5.6vw, 72px)/1.02 var(--serif); letter-spacing: -.03em; }
.page-hero p:not(.label) { margin: 22px 0 0; max-width: 62ch; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; color: var(--ink-2); }
.doc { padding-block: 24px clamp(64px, 8vw, 112px); }
.doc-section { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(20px, 4vw, 64px); padding: 42px 0 44px; border-bottom: 1px solid var(--hairline); }
.doc-section h2 { margin: 10px 0 0; font: 600 26px/1.2 var(--serif); letter-spacing: -.012em; }
.doc-section .body p, .doc-section .body li { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.doc-section .body p { margin: 0 0 14px; max-width: 66ch; }
.doc-section .body ul { margin: 0 0 14px; padding-left: 20px; max-width: 66ch; }
.doc-section .body li { margin-bottom: 6px; }
.table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14.5px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.table th { font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.table td:first-child { width: 32%; font-weight: 600; color: var(--ink); }
.table-wrap { overflow-x: auto; }
.status { display: inline-block; margin-right: 8px; font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.status.done { color: var(--brand); }
.status.open { color: var(--band-med); }
.status.part { color: var(--ink-muted); }
.updated { margin-top: 14px; }

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .masthead::after { animation: draw 1s var(--ease-out) both; }
  .rise { animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 70ms); }
  .hero-window.rise { animation-name: tilt-in; animation-duration: 1.2s; }
  .js .person { animation: row-in .6s var(--ease-out) both; animation-delay: calc(650ms + var(--i, 0) * 110ms); }
  .js .reveal.armed:not(.in) { opacity: 0; transform: translateY(26px); transition: none; }
  .js .reveal.armed.in { transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--ri, 0) * 90ms); }
  .faq-list details[open] p { animation: open-in .35s var(--ease-out); }
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tilt-in { from { opacity: .35; transform: perspective(1600px) rotateX(9deg) translateY(30px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: .3; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes open-in { from { opacity: .2; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .paper-stack .sheet.front { transform: none; }
}

/* ---- Narrow -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .window-body { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); }
  .firms-pane { display: none; }
  .firms-pane + .pane { border-left: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .8fr)); }
  .feature-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .feature-col:nth-child(2) { padding-right: 0; }
  .feature-col:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .nav a:not(.button):not(.signin) { display: none; }
  .section-head, .share-grid, .faq-grid, .founder-grid, .principles-head, .doc-section { grid-template-columns: minmax(0, 1fr); }
  .section-head > p:not(.label) { justify-self: start; }
  .principles-head p:not(.label) { grid-column: 1; grid-row: auto; justify-self: start; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .js .stage { display: none; }
  .js .step .shot { display: block; }
  .js .step:not(.active) { opacity: 1; }
  .step-list::before { display: none; }
  .wont-list { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .paper-stack .sheet.front { transform: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { padding-right: 0; }
  .metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .metric:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; border-left: 1px solid var(--stroke); }
  .moment { padding: 4px 0 34px 28px; }
  .moment:last-child { padding-bottom: 4px; }
  .moment::before { left: -6px; top: 6px; }
}
@media (max-width: 680px) {
  .window-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .people-pane { border-bottom: 1px solid var(--hairline); }
  .detail-pane { border-left: 0; }
  .people-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person { padding: 12px 12px 12px; }
  .person:nth-child(odd) { border-right: 1px solid var(--hairline-soft); }
  .person .p-role { display: none; }
  .window-crumb { display: none; }
  .run-time { display: none; }
  .person .chip { white-space: normal; max-width: 100%; }
  .window-foot span + span { display: none; }
  .detail-pane { padding: 0 16px 18px; }
}
@media (max-width: 620px) {
  .masthead .wrap { height: 60px; gap: 14px; }
  .nav { gap: 14px; }
  .nav .signin { display: none; }
  .hero-copy { text-align: left; }
  .eyebrow { padding: 6px 11px; font-size: 9.5px; letter-spacing: .12em; }
  .hero h1 { margin-left: 0; }
  .lede { margin-left: 0; }
  .hero .cta-row, .proof { justify-content: flex-start; }
  .proof { flex-direction: column; gap: 8px; }
  .spec li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .letter p:first-child::first-letter { font-size: 3.4em; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-cols { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .feature-col { padding: 0; border-left: 0; }
  .metric { gap: 12px; padding: 22px 14px 24px; }
  .metric:nth-child(odd) { padding-left: 0; }
  .metric:nth-child(even) { padding-right: 0; }
  .metric-label { font-size: 14px; }
}

/* ---- The motion layer (motion.js) ------------------------------------------
   Each piece has a finished state that shows without script; the script only
   primes a piece just before it scrolls into view. */

/* Reading progress, drawn in ink along the masthead's brand rule. */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; overflow: hidden; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }

/* A soft light in the hero that follows the pointer. */
.hero-glow { position: absolute; left: 0; top: 0; z-index: -1; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; background: radial-gradient(closest-side, #7e1f2e1f, #7e1f2e0a 52%, transparent); opacity: 0; pointer-events: none; transition: opacity .8s var(--ease); will-change: transform; }
.hero.glowing .hero-glow { opacity: 1; }

/* Buttons: a sheen on hover, a press on click. */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button:not(.secondary):not(.ghost):not(.light)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, #ffffff33 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
.button:active { transform: scale(.985); transition-duration: .08s; }

/* Numbers: counters with meters. */
.num { display: inline-block; text-align: right; }
.metric { position: relative; }
.meter { position: relative; display: block; height: 4px; margin-top: 2px; background: var(--hairline-soft); overflow: hidden; }
.meter i { position: absolute; top: 0; bottom: 0; left: calc(var(--o, 0) * 100%); width: calc(var(--v, 0) * 100%); background: var(--brand); transform-origin: left center; }
.meter i.guess { background: var(--band-med); opacity: .75; }
.metric-scale { margin-top: -6px; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.metric-scale b { font-weight: 400; color: var(--brand); }
.metrics.primed:not(.counted) .meter i { transform: scaleX(0); transition: none; }
.metrics.primed.counted .meter i { transition: transform 1.4s var(--ease-out); transition-delay: calc(var(--mi, 0) * 140ms + 200ms + var(--mo, 0s)); }

/* Headings that rise word by word. */
.split .w { display: inline-block; }
.split-armed:not(.split-in) .w { opacity: 0; transform: translateY(.45em); transition: none; }
.split-armed.split-in .w { transition: opacity .7s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--wi, 0) * 45ms + 80ms); }

/* A light under the pointer; bordered cards also light their edge. */
.feature-col li, .wont-list li { position: relative; }
.has-glare { isolation: isolate; }
.glare { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), #7e1f2e14, transparent 65%); transition: opacity .45s var(--ease); }
.has-glare.lit .glare { opacity: 1; }
.feature-col li .glare, .wont-list li .glare { inset: 0 -16px; }
.night .glare { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), #e6a3ae17, transparent 65%); }
.plan .glare, .roi .glare { inset: -1px; }
.plan .glare::after, .roi .glare::after { content: ""; position: absolute; inset: 0; padding: 1px; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), #7e1f2eb3, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

/* Results: the timeline draws as you scroll, and each moment lights. */
.timeline { position: relative; }
.timeline.drawn::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brand); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.timeline.drawn .moment::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--stroke-mark); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.timeline.drawn .moment.lit::before { background: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); animation: ping-marker 1s var(--ease-out); }
.timeline.drawn .moment .when { transition: color .35s var(--ease); }
.timeline.drawn .moment:not(.lit) .when { color: var(--ink-faint); }
@keyframes ping-marker { from { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 0 #7e1f2e66; } to { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 14px #7e1f2e00; } }

/* How it works: the rail fills to the step being read. */
.step-list.drawn::after { content: ""; position: absolute; left: 19px; top: 54px; bottom: 60px; width: 2px; background: var(--brand); transform: scaleY(var(--p, 0)); transform-origin: center top; }

/* Promises: the check marks draw themselves. */
.wont-list.promise-list .x { display: grid; place-items: center; }
.wont-list.promise-list .x::before, .wont-list.promise-list .x::after { content: none; }
.promise-list .x svg { width: 18px; height: 18px; fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promise-list .x path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .promise-list li.armed:not(.in) .x path { stroke-dashoffset: 1; transition: none; }
.js .promise-list li.armed.in .x path { transition: stroke-dashoffset .55s var(--ease-out); transition-delay: calc(var(--ri, 0) * 90ms + 280ms); }

/* Features: one mark per column. */
.feature-col h3 { display: flex; align-items: center; gap: 10px; }
.feature-col h3 svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Pricing: do the sum. */
.roi { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 72px); margin-top: clamp(14px, 1.6vw, 22px); padding: clamp(24px, 3vw, 44px); border: 1px solid var(--stroke); background: var(--paper); }
.roi-copy h3 { margin: 12px 0 0; font: 600 clamp(28px, 2.8vw, 38px)/1.08 var(--serif); letter-spacing: -.02em; }
.roi-copy > p:not(.label) { margin: 14px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.roi-price { display: inline-flex; flex-wrap: wrap; min-width: 0; margin: 24px 0 0; padding: 0; border: 1px solid var(--stroke); background: var(--card); }
.roi-price legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roi-price label { position: relative; display: block; flex: 1 1 auto; cursor: pointer; }
.roi-price input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.roi-price span { display: block; padding: 10px 14px; text-align: center; font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); transition: background-color .2s var(--ease), color .2s var(--ease); }
.roi-price label:hover span { color: var(--ink); }
.roi-price input:checked + span { background: var(--ink); color: var(--paper); }
.roi-price input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.roi-work { min-width: 0; }
.roi-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; }
.roi-field + .roi-field { margin-top: 16px; }
.roi-field label { font-size: 14.5px; color: var(--ink-2); }
.roi-v { font: 600 24px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.roi input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 6px 0 0; background: transparent; cursor: pointer; }
.roi input[type="range"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.roi input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--brand) var(--fill, 50%), var(--stroke) var(--fill, 50%)); }
.roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 2px solid var(--brand); background: var(--card); box-shadow: 0 4px 10px -4px #20181466; transition: transform .15s var(--ease), background-color .15s var(--ease); }
.roi input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.roi input[type="range"]:active::-webkit-slider-thumb { background: var(--brand); transform: scale(1.15); }
.roi input[type="range"]::-moz-range-track { height: 4px; border: 0; background: var(--stroke); }
.roi input[type="range"]::-moz-range-progress { height: 4px; background: var(--brand); }
.roi input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--brand); border-radius: 0; background: var(--card); }
.roi-bars { display: grid; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.roi-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 16px; font-size: 13.5px; color: var(--ink-muted); }
.roi-bar b { font: 600 15px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.roi-bar .bar { grid-column: 1 / -1; display: block; height: 8px; transform-origin: left center; transition: transform .6s var(--ease-out); }
.roi-bar .bar.value { background: var(--brand); transform: scaleX(var(--vw, 1)); }
.roi-bar .bar.cost { background: var(--ink); transform: scaleX(var(--cw, .12)); }
.roi-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline); }
.roi-result b { font: 600 clamp(56px, 6vw, 84px)/.9 var(--serif); letter-spacing: -.04em; color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.roi-result > span { max-width: 24ch; font: 400 19px/1.4 var(--serif); color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .button:not(.secondary):not(.ghost):not(.light):hover::after { transform: translateX(110%); transition: transform .9s var(--ease-out); }
}
@media (max-width: 900px) {
  .timeline.drawn::before { left: -1px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(var(--p, 0)); transform-origin: center top; }
  .step-list.drawn::after { display: none; }
  .roi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .roi-v { font-size: 21px; }
}

/* ---- What do you sell: the switch above the desk -------------------------
   Only with script, since only script can act on it. The desk relabels its
   people as the app does for that seat. */
.sell-switch { display: none; }
.js .sell-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: clamp(34px, 3.6vw, 48px) auto 0; }
.js .sell-switch + .hero-window { margin-top: 20px; }
.sell-label { font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.sell-options { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--stroke); background: var(--card); box-shadow: 0 1px 2px #2018140f, 0 12px 28px -20px #2018144d; }
.sell-options button { position: relative; z-index: 1; min-height: 38px; padding: 0 17px; border: 0; background: transparent; font: 500 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: color .3s var(--ease); }
.sell-options button:hover { color: var(--ink); }
.sell-options button[aria-checked="true"] { color: #fff; }
.sell-options button:focus-visible { outline-offset: 2px; }
.sell-thumb { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; background: var(--brand); box-shadow: 0 8px 18px -10px #7e1f2eb3; transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.sell-switch:not(.ready) .sell-thumb { transition: none; }
.p-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 5px; }
.p-tags .chip { margin-top: 0; }
.fit { font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); transition: opacity .3s var(--ease); }
.fit:empty { display: none; }
.person:has(.fit.out) .p-name, .person:has(.fit.out) .p-role { color: var(--ink-faint); }
.person:has(.fit.out) .chip { opacity: .7; }
@media (max-width: 680px) {
  .person:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .sell-options button { padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 620px) {
  .js .sell-switch { justify-content: flex-start; }
}

/* ---- The proof sequence ---------------------------------------------------
   One person from a fictional firm's own page to a Mandate record, then one
   Mandate has to guess. At rest (no script, reduced motion, a short screen) it
   is a still: the page with its marks, the finished record, and the five steps
   in a row. With script it becomes a sticky scene that scroll plays: the page
   is read, marked, and a line is drawn from the address the firm published to
   the record that keeps it. */
.trace { position: relative; padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--hairline); background: linear-gradient(var(--sand), var(--paper) 22%); }
.trace-stage { margin-top: clamp(32px, 4vw, 56px); }
.trace-sticky { display: grid; gap: clamp(28px, 3vw, 40px); }
.trace-steps { order: 2; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; }
.trace-step { display: grid; align-content: start; gap: 10px; }
.trace-no { font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; color: var(--brand); }
.trace-step h3 { margin: 0; font: 600 19px/1.25 var(--serif); letter-spacing: -.008em; text-wrap: balance; }
.trace-step p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.trace-rail { display: none; }
.trace-scene { order: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 9vw, 132px); align-items: start; }
.trace-scene::before { content: ""; position: absolute; inset: -28px -8px; z-index: -1; background-image: linear-gradient(to right, #2018140a 1px, transparent 1px), linear-gradient(to bottom, #2018140a 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%); pointer-events: none; }

/* Two windows: their website, and the record Mandate keeps. */
.win { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #fff; border: 1px solid var(--stroke); box-shadow: var(--lift); }
.win-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-bottom: 1px solid #E6E4E0; background: #F3F2EF; }
.win-dots { display: inline-flex; gap: 6px; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D6D2CB; }
.win-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid #E2DFD9; border-radius: 6px; background: #fff; font: 400 11.5px/1.2 var(--sans); color: #5B5E66; }
.win-url svg { flex: none; width: 12px; height: 12px; fill: none; stroke: #7C8089; stroke-width: 1.5; }
.win-url span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-tag { flex: none; padding: 3px 7px; border: 1px solid var(--band-hairline); background: var(--band-soft); font: 400 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--band-med); white-space: nowrap; }
.win-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.trace.scrolly .win-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 28px; background: linear-gradient(#fff, #ffffff00); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.trace.scrolly .win-body.shifted::before { opacity: 1; }
.trace.scrolly .web .win-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 56px; background: linear-gradient(#ffffff00, #fff); pointer-events: none; }

/* Their website: two fictional firms, each in its own house style. */
.web-page { background: #fff; }
.web-page[data-page="b"] { display: none; }
.hr { --hr-navy: #1E2B45; color: #2A303B; }
.hr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--hr-navy); color: #fff; }
.hr-logo { font: 600 12px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; }
.hr-nav { display: flex; gap: 14px; font-size: 10.5px; color: #C3CAD8; }
.hr-crumbs { margin: 14px 20px 0; font-size: 10.5px; color: #8A909B; }
.hr-crumbs i { font-style: normal; margin: 0 5px; color: #B7BCC6; }
.hr-profile { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; align-items: center; margin: 26px 20px 0; }
.hr-portrait { display: grid; place-items: center; width: 70px; height: 86px; background: linear-gradient(160deg, #33456B, #1E2B45); color: #E6D6B8; font: 600 20px/1 var(--serif); letter-spacing: .06em; }
.hr-name { margin: 0; font: 600 21px/1.15 var(--serif); letter-spacing: -.01em; color: var(--hr-navy); }
.hr-title { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: #3D4452; }
.hr-office { margin: 4px 0 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8A909B; }
.hr-contact { display: grid; gap: 9px; margin: 32px 20px 0; }
.hr-contact > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.hr-contact dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8A909B; }
.hr-contact dd { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--hr-navy); overflow-wrap: anywhere; }
.hr-bio { margin: 32px 20px 0; }
.hr-bio p { margin: 0; font-size: 12px; line-height: 1.65; color: #3D4452; }
.hr-expertise { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 20px 22px; }
.hr-expertise span { padding: 3px 8px; border: 1px solid #D8DCE4; font-size: 10.5px; color: #3D4452; }
.hr-work { margin: 0 20px 24px; padding-top: 16px; border-top: 1px solid #E4E7ED; }
.hr-work-title { margin: 0 0 8px; font: 600 13px/1.3 var(--serif); color: var(--hr-navy); }
.hr-work ul { margin: 0; padding-left: 16px; display: grid; gap: 6px; }
.hr-work li { font-size: 11.5px; line-height: 1.5; color: #3D4452; }
.wc { --wc: #1F5C57; color: #23302F; }
.wc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 3px solid var(--wc); }
.wc-logo { font: 700 15px/1 var(--sans); letter-spacing: -.01em; color: var(--wc); }
.wc-logo b { margin-left: 3px; font-weight: 300; }
.wc-nav { display: flex; gap: 14px; font-size: 10.5px; color: #5A6B69; }
.wc-title { margin: 18px 20px 4px; font: 600 18px/1.2 var(--sans); color: #1C2A29; }
.wc-team { list-style: none; display: grid; margin: 0 20px 22px; padding: 0; }
.wc-team li { display: grid; gap: 2px; padding: 24px 0 12px; border-bottom: 1px solid #E3E8E7; }
.wc-name { font-size: 13px; font-weight: 600; }
.wc-role { justify-self: start; font-size: 11.5px; color: #5A6B69; }
.wc-mail { font-size: 11.5px; color: var(--wc); overflow-wrap: anywhere; }

/* Marks: what Mandate read off the page, and where it had nothing to read. */
.mark { position: relative; }
.mark::before { content: ""; position: absolute; inset: -6px -8px; z-index: 0; border: 1.5px solid var(--brand); background: #7e1f2e0d; opacity: 0; transform: scale(.975); transition: opacity .35s var(--ease), transform .5s var(--ease-out); pointer-events: none; }
.mark > .tag { position: absolute; left: -8px; top: -6px; z-index: 2; padding: 2px 6px; background: var(--brand); color: #fff; font: 400 8.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: translateY(-100%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.mark.guess::before { border-color: var(--band-med); border-style: dashed; background: #8a6a2f10; }
.mark.guess > .tag { background: var(--band-med); }
.mark.lit::before { opacity: 1; transform: none; }
.mark.lit > .tag { opacity: 1; }
.wc-team li.mark::before { inset: 0 -8px; }
.wc-team li.mark > .tag { top: 5px; transform: none; }
.wc-role.mark::before { inset: -4px -6px; }
.wc-role.mark > .tag { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); }

/* The record Mandate keeps. */
.rec-bar { background: var(--paper-raised); border-bottom-color: var(--hairline); }
.rec-brand { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--serif); color: var(--ink); }
.rec-brand svg { width: 14px; height: 14px; color: var(--brand); }
.rec-crumb { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.rec-bar .win-tag { margin-left: auto; }
.rec-body { padding: 6px 10px 10px; background: var(--card); }
.rec-person[data-person="b"] { display: none; }
.z { position: relative; margin-top: 4px; padding: 11px 12px; border: 1px solid transparent; transition: background-color .45s var(--ease), border-color .45s var(--ease); }
.z .sk { display: none; }
.z-label { margin: 0 0 4px; font: 400 9px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.rec .r-name { font-size: clamp(19px, 1.7vw, 23px); }
.rec .r-role { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
.z-likely { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.z-likely b { margin-left: 4px; font: 400 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.z-text { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.z-route { margin: 0; }
.z-route .chip { margin-top: 0; }
.z-email { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.z-email.guess { font-weight: 500; color: var(--ink-muted); }
.z-note { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); }
.z-note.guess { color: var(--band-med); }
.z-source { margin: 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.z-date { margin: 3px 0 0; font: 400 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.z[data-z="ask"] .real { padding-left: 10px; box-shadow: inset 2px 0 0 var(--brand); }
.z-label + .z-ask { margin-top: 0; }
.z-ask { display: grid; margin: 0; font: 400 14px/1.55 var(--serif); color: var(--ink); }
.z-ask > span { grid-area: 1 / 1; }

/* The line from the page to the record. */
.beam { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.beam.ready { opacity: 1; }
.beam path { fill: none; stroke-linecap: round; }
.beam-under { stroke: #7e1f2e1c; stroke-width: 8; }
.beam-line { stroke: var(--brand); stroke-width: 2; }
.beam-line.guess { stroke: var(--band-med); stroke-dasharray: 5 5; }
.beam-dot { fill: var(--brand); }
.beam-dot.guess { fill: var(--band-med); }
.beam-label { position: absolute; left: 0; top: 0; z-index: 4; padding: 3px 7px; background: var(--band-med); color: #fff; font: 400 10px/1.3 var(--mono); letter-spacing: .06em; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); transition: opacity .3s var(--ease); pointer-events: none; }
.beam-label.on { opacity: 1; }
.scan { display: none; }

/* At rest: the finished first person. */
.trace:not(.scrolly) [data-mark="id"]::before, .trace:not(.scrolly) [data-mark="email"]::before { opacity: 1; transform: none; }
.trace:not(.scrolly) [data-mark="id"] > .tag, .trace:not(.scrolly) [data-mark="email"] > .tag { opacity: 1; }

/* ---- Played by scroll ----------------------------------------------------- */
/* Five steps over two screens of scrolling: long enough to read each, short
   enough that the page keeps moving. */
.trace.scrolly .trace-stage { height: calc(5 * var(--trace-step, 40vh) + 100vh); }
.trace.scrolly .trace-sticky { position: sticky; top: 80px; height: calc(100vh - 96px); grid-template-rows: auto auto minmax(0, 1fr); gap: 16px; }
.trace.scrolly .trace-steps { order: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.trace.scrolly .trace-step { grid-area: 1 / 1; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 18px; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .6s var(--ease-out); pointer-events: none; }
.trace.scrolly .trace-step.on { opacity: 1; transform: none; pointer-events: auto; }
.trace.scrolly .trace-no { font-size: 12px; }
.trace.scrolly .trace-step h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.016em; }
.trace.scrolly .trace-step p { max-width: 70ch; font-size: 15.5px; }
.trace.scrolly .trace-rail { order: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.trace-rail button { position: relative; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.trace-rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--stroke); }
.trace-rail i { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--brand); transform: scaleX(var(--f, 0)); transform-origin: left center; }
.trace-rail button:focus-visible { outline-offset: 2px; }
.trace.scrolly .trace-scene { order: 2; min-height: 0; height: 100%; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.trace.scrolly .win { height: 100%; }
.trace.scrolly .web-page { position: absolute; left: 0; right: 0; top: 0; display: block; opacity: 0; transform: translateY(calc(var(--shift, 0) * -1px)); transition: opacity .5s var(--ease), transform .8s var(--ease-out); }
.trace.scrolly .web-page.on { opacity: 1; }
.trace.scrolly .rec-person { position: absolute; left: 10px; right: 10px; top: 6px; display: block; opacity: 0; transform: translateY(calc(var(--shift, 0) * -1px + 10px)); transition: opacity .45s var(--ease), transform .7s var(--ease-out); }
.trace.scrolly .rec-person.on { opacity: 1; transform: translateY(calc(var(--shift, 0) * -1px)); }
.trace.scrolly .rec-body { padding: 0; }
.trace.scrolly .z .sk { display: block; height: 9px; width: 58%; margin: 6px 0 16px; background: linear-gradient(90deg, var(--hairline-soft) 20%, var(--hairline) 50%, var(--hairline-soft) 80%); background-size: 220% 100%; animation: shimmer 1.8s linear infinite; }
.trace.scrolly .z .sk::after { content: ""; display: block; width: 70%; height: 9px; margin-top: 16px; background: inherit; background-size: inherit; animation: inherit; }
.trace.scrolly .z .real { display: none; }
.trace.scrolly .z.filled .sk { display: none; }
.trace.scrolly .z.filled .real { display: block; animation: fill-in .55s var(--ease-out) both; }
.trace.scrolly .z.fresh { background: var(--brand-soft); border-color: var(--brand-hairline); }
.trace.scrolly .rec-person[data-person="b"] .z.fresh[data-z="reach"] { background: var(--band-soft); border-color: var(--band-hairline); }
.trace.scrolly .scan { display: block; position: absolute; left: 0; right: 0; top: calc(var(--scan, 0) * 100%); z-index: 2; height: 72px; margin-top: -72px; background: linear-gradient(to bottom, transparent, #7e1f2e0f 70%, #7e1f2e40); border-bottom: 2px solid var(--brand); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.trace.scrolly .scan.on { opacity: 1; }
@keyframes shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes fill-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .trace-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .trace-step { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .trace-scene { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .trace.scrolly .trace-sticky { top: 70px; height: calc(100svh - 82px); gap: 12px; }
  .trace.scrolly .trace-step { gap: 12px; }
  .trace.scrolly .trace-step h3 { font-size: 20px; }
  .trace.scrolly .trace-step p { margin-top: 4px; font-size: 14px; line-height: 1.5; }
  .trace.scrolly .trace-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .82fr) minmax(0, 1.18fr); gap: 30px; }
  .hr-head, .wc-head { padding: 11px 14px; }
  .hr-nav, .wc-nav { display: none; }
  .hr-crumbs, .hr-profile, .hr-contact, .hr-bio, .hr-expertise, .wc-title, .wc-team { margin-left: 14px; margin-right: 14px; }
}
@media (max-width: 620px) {
  .trace.scrolly .trace-sticky { top: 64px; height: calc(100svh - 74px); }
  .trace.scrolly .trace-step p { font-size: 13.5px; }
  .win-bar { min-height: 36px; gap: 8px; padding: 0 8px; }
  .win-dots { display: none; }
  .win-url { font-size: 10.5px; padding: 4px 8px; }
  .hr-profile { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .hr-portrait { width: 52px; height: 64px; font-size: 16px; }
  .hr-name { font-size: 18px; }
  .rec .r-name { font-size: 18px; }
  .z { padding: 9px 10px; }
}

/* ---- Booking: the closing band holds the form ------------------------------
   Every "book" button on the page leads here. The form posts to /api/book (a
   Pages Function) and works without script: the post answers with a thanks
   page. With script it checks itself, tidies pasted addresses and shows the
   result in place. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.closing-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5.5vw, 88px); align-items: start; }
.closing .closing-lead h2 { font-size: clamp(46px, 5.8vw, 86px); }
.closing-lead { position: sticky; top: 110px; }
.closing-next { list-style: none; display: grid; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--night-line); }
.closing-next li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--night-line); font-size: 15px; line-height: 1.5; color: var(--night-muted); }
.closing-next b { font: 400 10.5px/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.book-card { position: relative; padding: clamp(22px, 2.8vw, 36px); background: var(--paper); color: var(--ink); box-shadow: 0 60px 120px -50px #000000cc, 0 0 0 1px #ffffff14; }
.book-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.book-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.book-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: #3E7C4F; box-shadow: 0 0 0 3px #3e7c4f24; }
.book-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.book-form legend { margin: 0 0 10px; padding: 0; font: 600 18px/1.3 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.bf-firms ol { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.bf-firms li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: stretch; border: 1px solid var(--stroke); background: var(--card); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bf-firms li:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px #7e1f2e1f; }
.bf-n { display: grid; place-items: center; border-right: 1px solid var(--hairline); background: var(--paper-raised); font: 400 11px/1 var(--mono); color: var(--ink-faint); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.bf-firms li.filled .bf-n { background: var(--brand); border-right-color: var(--brand); color: #fff; }
.bf-firms input { width: 100%; min-width: 0; min-height: 44px; padding: 0 116px 0 12px; border: 0; border-radius: 0; background: transparent; font: 400 15px/1.2 var(--sans); color: var(--ink); outline: none; }
.bf-firms input::placeholder, .bf-field input::placeholder { color: #A39A90; }
.bf-tidy { position: absolute; right: 10px; top: 50%; max-width: 104px; overflow: hidden; font: 400 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-faint); opacity: 0; transform: translateY(-50%); transition: opacity .2s var(--ease); pointer-events: none; }
.bf-tidy.site { color: #3E7C4F; }
.bf-firms li:not(:focus-within) .bf-tidy.on { opacity: 1; }
.bf-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.bf-sell { margin-top: 22px !important; }
.bf-sell-options { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-sell-options label { position: relative; cursor: pointer; }
.bf-sell-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bf-sell-options span { display: block; padding: 9px 13px; border: 1px solid var(--stroke); background: var(--card); font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.bf-sell-options label:hover span { border-color: var(--ink-faint); }
.bf-sell-options input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bf-sell-options input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 22px; }
.bf-field { display: grid; align-content: start; gap: 6px; }
.bf-field > span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.bf-field em { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.bf-field input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--stroke); border-radius: 0; background: var(--card); font: 400 15px/1.2 var(--sans); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bf-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #7e1f2e1f; }
.bf-field input[aria-invalid="true"], .bf-firms li.invalid { border-color: #B3261E; }
.bf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf-error { margin: 16px 0 0; padding: 10px 12px; border-left: 3px solid #B3261E; background: #FBEDEC; font-size: 13.5px; line-height: 1.5; color: #7A1C16; }
.bf-error a { color: #7A1C16; font-weight: 600; }
.bf-submit { width: 100%; min-height: 54px; margin-top: 20px; font-size: 16px; }
.bf-submit[aria-busy="true"] { pointer-events: none; }
.bf-submit[aria-busy="true"] .arrow { animation: nudge .8s var(--ease) infinite alternate; }
.bf-small { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-muted); }
.book-done:focus { outline: none; }
.book-check { display: block; width: 52px; height: 52px; margin-bottom: 18px; }
.book-check rect { fill: var(--brand-soft); stroke: var(--brand-hairline); stroke-width: 2; }
.book-check path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick-draw .7s .15s var(--ease-out) forwards; }
.book-done h3 { margin: 0; font: 600 clamp(30px, 3.2vw, 42px)/1.05 var(--serif); letter-spacing: -.02em; }
.book-done-copy { margin: 14px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.book-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 26px; padding: 0; }
.book-chips li { padding: 6px 10px; border: 1px solid var(--brand-hairline); background: var(--brand-soft); font: 400 11px/1.3 var(--mono); letter-spacing: .03em; color: var(--brand); animation: chip-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 350ms); }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(4px); } }
@media (max-width: 900px) {
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
  .closing-lead { position: static; }
}
@media (max-width: 620px) {
  .closing-next li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bf-grid { grid-template-columns: minmax(0, 1fr); }
  .bf-firms input { padding-right: 96px; }
  .bf-tidy { max-width: 84px; }
}

/* ---- Why not a database: the comparison under the feature grid ------------- */
.compare { margin-top: clamp(56px, 7vw, 96px); }
.compare-head h3 { margin: 12px 0 0; max-width: 26ch; font: 600 clamp(26px, 2.8vw, 36px)/1.1 var(--serif); letter-spacing: -.018em; }
.compare-wrap { margin-top: 26px; overflow-x: auto; }
.compare-table { width: 100%; min-width: 660px; border-collapse: collapse; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 16px 18px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.compare-table thead th { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--stroke); font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.compare-table tbody th { width: 20%; font: 600 15px/1.35 var(--serif); color: var(--ink); }
.compare-table thead th:first-child { width: 20%; }
.compare-table .us { background: var(--brand-soft); color: var(--ink); }
.compare-table thead .us { position: relative; background: var(--brand); color: #fff; }
.compare-table tbody td.us { font-weight: 500; box-shadow: inset 1px 0 0 var(--brand-hairline), inset -1px 0 0 var(--brand-hairline); }
.compare-table tbody tr:last-child td.us { box-shadow: inset 1px 0 0 var(--brand-hairline), inset -1px 0 0 var(--brand-hairline), inset 0 -2px 0 var(--brand); }

/* ---- On a phone: a book button that stays in reach ------------------------- */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--stroke); background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); box-shadow: 0 -12px 30px -18px #2018144d; transform: translateY(110%); transition: transform .4s var(--ease-out); }
  .mobile-cta.on { transform: none; }
  .mobile-cta .button { flex: 1; min-height: 48px; }
  .mobile-cta-note { font: 400 9.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
}

/* ---- The masthead marks the section being read ----------------------------- */
.nav a:not(.button):not(.signin) { position: relative; }
.nav a:not(.button):not(.signin)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-out); }
.nav a[aria-current="true"] { color: var(--brand); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }

/* ---- Moving between pages -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .masthead { view-transition-name: masthead; }
}

/* The privacy page's switch for visit summaries. */
.optout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.optout [data-visit-status] { font-size: 14px; color: var(--ink-muted); }