/* Main Revenue marketing site — v4 design system (owner brief 2026-10-03: purple/black, product-led).
   Loaded by every marketing page (fingerprinted by scripts/build-revenue-site.mjs as site.<hash>.css).
   The /app and /ops shells keep mr.css. Homepage-only styles live in assets/home.css (h- prefix, worker A).

   TOKENS — stable names; home.css, assistant.css and demo.js read them. Do not rename.
     surfaces   --bg #07060B · --surface #0E0C16 · --elevated #15121F
     hairlines  --line (white 8%) · --line-2 (white 14%) · --line-strong (violet 24%)
     brand      --violet #7C5CFF · --violet-2 #A78BFA · --lav #C4B5FD · --violet-bg (violet 12%)
     text       --text #F4F2FA · --text-2 #A8A3B8 · --text-3 #8A84A0 (small text, 5.4:1) · --text-4 #6E6880 (decoration / large only, 3.8:1)
     status     --green · --amber · --red (+ -bg tints) — status only, never decoration
     type       --font (Geist + metric-matched fallback) · --mono (Geist Mono) · --fs-display · --fs-h1 · --fs-h2
     motion     --ease (ease-out-expo) · --ease-io · --d-1 .2s · --d-2 .45s · --d-3 .9s
     shape      --r-card 12px · --r-sm 8px · --r-pill 999px
     layout     --gutter (20/40px) · --header 64px · --maxw 1240px
     legacy     --accent --accent-soft --accent-ink --ink --ink-2 --ink-3 --surface-2 --focus --radius
                (aliases for assistant.css and demo.js inline styles)
   Rules: red/amber/green are status only. Nothing under 12px. Content is visible without JS: CSS hides
   nothing unless the selector starts with .mr-motion, which motion.js sets only outside prefers-reduced-motion. Reduced motion: every animation and transition off. */

@font-face { font-family: "Geist"; src: url("/fonts/geist/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* metric-matched fallbacks so the swap to Geist moves nothing (CLS) */
/* measured in Chromium against Geist: regular runs 2.0% wider than Arial, semibold matches Arial Bold; Geist ascent 1.005, descent .295 */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); font-weight: 100 549; size-adjust: 102%; ascent-override: 98.5%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); font-weight: 550 900; size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Menlo"); size-adjust: 100%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --bg: #07060B; --surface: #0E0C16; --elevated: #15121F;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14); --line-strong: rgba(167, 139, 250, .24);
  --violet: #7C5CFF; --violet-btn: #7452FF; --violet-btn-hover: #6E4BFF; /* filled buttons: white text ≥ 4.5:1 (AA); #7C5CFF is 4.35 */ --violet-2: #A78BFA; --lav: #C4B5FD; --violet-bg: rgba(124, 92, 255, .12);
  --text: #F4F2FA; --text-2: #A8A3B8; --text-3: #8A84A0; --text-4: #6E6880;
  --green: #3DD68C; --amber: #F5B547; --red: #F2555A;
  --green-bg: rgba(61, 214, 140, .10); --amber-bg: rgba(245, 181, 71, .10); --red-bg: rgba(242, 85, 90, .10);
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --d-1: .2s; --d-2: .45s; --d-3: .9s;
  --r-card: 12px; --r-sm: 8px; --r-pill: 999px;
  --font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-display: clamp(44px, 6.2vw, 88px); --fs-h1: clamp(40px, 5.2vw, 72px); --fs-h2: clamp(28px, 3.2vw, 44px);
  --gutter: 20px; --header: 64px; --maxw: 1240px;
  --accent: var(--violet-2); --accent-soft: var(--violet-bg); --accent-ink: #fff; --ink: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-3);
  --surface-2: var(--elevated); --focus: var(--violet-2); --radius: var(--r-sm);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

/* reduced motion: every animation and transition off; every element in its final state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .rv-pre, .rv-pre > * { clip-path: none !important; opacity: 1 !important; transform: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: calc(var(--header) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
/* film grain (~3.5%) over everything; never intercepts input */
body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .02; mix-blend-mode: normal;   /* normal blend: overlay forced full-viewport recomposition under every animation (halved frame rate) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg { max-width: 100%; height: auto; }
::selection { background: rgba(124, 92, 255, .45); color: #fff; }
a { color: var(--lav); text-decoration: none; transition: color var(--d-1) var(--ease); }
/* in-copy links: hairline underline that thickens and brightens on hover */
main a:not(.btn):not(.card):not(.link-arrow):not(.toc a) { background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(196, 181, 253, .35), rgba(196, 181, 253, .35)); background-size: 0% 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; padding-bottom: 1px; transition: color var(--d-1) var(--ease), background-size var(--d-2) var(--ease); }
main a:not(.btn):not(.card):not(.link-arrow):not(.toc a):hover { color: #fff; background-size: 100% 1px, 100% 1px; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--text); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.028em; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; }
p { margin: 0 0 1em; color: var(--text-2); max-width: 65ch; text-wrap: pretty; }
strong { color: var(--text); font-weight: 550; }
em { font-style: normal; color: var(--lav); }
small, .small { font-size: 14px; }
.muted { color: var(--text-3); }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 52ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--violet-2); margin: 0 0 20px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.mono, .num-i { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip, .mai-skip-link { position: absolute; left: -999px; top: 8px; background: var(--elevated); color: var(--text); padding: 8px 12px; z-index: 200; border-radius: var(--r-sm); }
.skip:focus, .mai-skip-link:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 880px; }

/* ── header ─────────────────────────────────────────────── */
.mr-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 6, 11, .74); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); view-transition-name: mr-header; }
.mr-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header); }
.mr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.mr-brand span { color: var(--text-3); font-weight: 500; transition: color var(--d-1) var(--ease); }
.mr-brand:hover span { color: var(--text-2); }
.mr-mark { width: 22px; height: 22px; fill: none; stroke: var(--violet-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-2) var(--ease); }
.mr-brand:hover .mr-mark { transform: translateY(-1px) scale(1.06); }
.mr-nav { display: flex; gap: 2px; align-items: center; }
.mr-nav > a:not(.btn) { position: relative; color: var(--text-2); padding: 8px 12px; border-radius: var(--r-pill); font-size: 15px; white-space: nowrap; transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease); }
.mr-nav > a:not(.btn):hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.mr-nav > a[aria-current="page"] { color: var(--text); }
.mr-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--violet-2); }
.mr-nav .btn { margin-left: 10px; }
.mr-menu { display: none; position: static; }
@media (max-width: 1040px) { .mr-nav > a:not(.btn) { display: none; } .mr-nav .mr-menu { display: block; } }
@media (max-width: 480px) { .mr-nav > .btn { display: none; } }
.mr-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; margin-left: 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font: 500 15px/1 var(--font); color: var(--text); transition: border-color var(--d-1) var(--ease), background-color var(--d-1) var(--ease); }
.mr-menu summary:hover { border-color: var(--line-strong); background: rgba(124, 92, 255, .08); }
.mr-menu summary::-webkit-details-marker { display: none; }
.mr-menu summary::after { content: ""; width: 14px; height: 8px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; transition: transform var(--d-2) var(--ease); }
.mr-menu[open] summary { border-color: var(--line-strong); background: rgba(124, 92, 255, .12); }
.mr-menu[open] summary::after { transform: scaleX(.7); }
/* a closed <details> still lays out its content in current Chromium: the panel must never take space (rule-0 5.12) */
.mr-menu:not([open]) .mr-menu-panel { display: none; }
.mr-menu-panel { position: absolute; left: 0; right: 0; top: var(--header); z-index: 60; display: grid; padding: 8px var(--gutter) 24px; max-height: calc(100svh - var(--header)); overflow-y: auto; background: #0A0910; border-bottom: 1px solid var(--line); box-shadow: 0 32px 64px rgba(0, 0, 0, .55); }
.mr-menu[open] .mr-menu-panel { animation: menuIn .5s var(--ease) both; }
@keyframes menuIn { from { translate: 0 -6px; } to { translate: 0 0; } }
.mr-menu-panel a { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; color: var(--text); font-size: 20px; letter-spacing: -0.015em; border-bottom: 1px solid var(--line); transition: color var(--d-1) var(--ease), padding var(--d-2) var(--ease); }
.mr-menu-panel a::after { content: "→"; color: var(--text-4); font-size: 16px; transition: transform var(--d-2) var(--ease), color var(--d-1) var(--ease); }
.mr-menu-panel a:hover { padding-left: 6px; }
.mr-menu-panel a:hover::after { color: var(--violet-2); transform: translateX(3px); }
.mr-menu-panel a[aria-current="page"] { color: var(--lav); }
.mr-menu-panel a.btn { margin-top: 20px; font-size: 16px; justify-content: center; border-bottom: 0; padding: 12px 22px; }
.mr-menu-panel a.btn::after { content: none; }

/* ── buttons ────────────────────────────────────────────── */
.btn { --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); color: var(--text);
  font: 500 16px/1 var(--font); letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; text-decoration: none; transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease), color .2s var(--ease); }
.btn:hover { border-color: var(--line-strong); background: rgba(124, 92, 255, .08); color: #fff; }
.btn:active { transform: translate(var(--mx), var(--my)) scale(.98); transition-duration: .08s; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-primary { background: var(--violet-btn); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px -10px rgba(124, 92, 255, .7); }
.btn-primary:hover { background: var(--violet-btn-hover); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 18px rgba(196, 181, 253, .35), 0 14px 40px -10px rgba(124, 92, 255, .85); }
.btn-primary::after { content: "→"; display: inline-block; margin-left: 2px; transition: transform .35s var(--ease); }
.btn-primary:hover::after { transform: translateX(3px); }
.btn[download]::after { content: "↓"; }
.btn[download]:hover::after { transform: translateY(2px); }
.mr-nav .btn-primary::after, button.btn-primary::after { content: none; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; max-width: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--lav); font-weight: 500; }
.link-arrow::after { content: "→"; transition: transform .35s var(--ease); }
.link-arrow:hover { color: #fff; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ── sections ──────────────────────────────────────────── */
main > section { position: relative; padding: 72px 0; }
@media (min-width: 1024px) { main > section { padding: 112px 0; } }
/* sections are divided by a hairline that draws in from the left when it scrolls into view */
main > section + section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; transition: transform 1.1s var(--ease); }
.tight { padding-top: 0 !important; }
.tight::before { content: none !important; }
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head p:last-child { margin-bottom: 0; }

/* page hero: each inner page opens with one. Hairline grid + one violet glow; headline rises out of its own mask */
.page-hero { padding: 80px 0 72px !important; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .page-hero { padding: 136px 0 104px !important; } }
.page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(167, 139, 250, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .07) 1px, transparent 1px); background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 78% 0%, #000 0%, transparent 70%); }
.page-hero::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 640px; right: -260px; top: -320px; pointer-events: none; background: radial-gradient(closest-side, rgba(124, 92, 255, .24), rgba(124, 92, 255, 0)); }
.page-hero h1 { max-width: 17ch; }
.page-hero .lede { margin-top: 8px; }
.page-hero > .wrap > * { animation: heroRise var(--d-3) var(--ease) both; }
.page-hero > .wrap > :nth-child(2) { animation-delay: .06s; }
.page-hero > .wrap > :nth-child(3) { animation-delay: .14s; }
.page-hero > .wrap > :nth-child(n+4) { animation-delay: .22s; }
@keyframes heroRise { from { transform: translateY(14px); } }   /* transform only: text and CTAs are fully visible from first paint (no-JS, 600 ms CTA rule) */
@keyframes heroMask { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(-10% -5% -20% -5%); } }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); max-width: 860px; list-style: none; }
.hero-meta li { font: 500 13px/1.5 var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.hero-meta li b { color: var(--text); font-weight: 500; margin-right: 6px; }

/* two-column editorial: sticky label column + content column */
.split { display: grid; gap: 8px; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; } .split > .split-label { position: sticky; top: calc(var(--header) + 40px); align-self: start; } }
.split-label h2 { margin-bottom: 16px; }
@media (max-width: 959px) { .split-label .founder { margin-bottom: 32px; } }
.split-body > h2, .split-body > h3 { margin-top: 1.6em; }
.split-body > :first-child { margin-top: 0; }
.split-body > h3 { font-size: 22px; letter-spacing: -0.02em; }

.grid-2 { display: grid; gap: 40px; }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 64px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* cards */
.card { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; color: var(--text);
  transition: border-color .3s var(--ease), transform .45s var(--ease), background-color .3s var(--ease), box-shadow .45s var(--ease); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card:hover { border-color: rgba(255, 255, 255, .13); }
a.card { background-image: none !important; }
a.card:hover { border-color: var(--line-strong); background: var(--elevated); transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(124, 92, 255, .35); }
a.card h3::after { content: "→"; color: var(--violet-2); display: inline-block; margin-left: .35em; transition: transform .35s var(--ease); }
a.card:hover h3::after { transform: translateX(4px); }
.card .btn { margin-top: 12px; }
.card-quiet { background: transparent; }
.card-k { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 14px; }

/* lists */
.list { padding: 0; margin: 0 0 1em; list-style: none; color: var(--text-2); }
.list li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); transition: color var(--d-1) var(--ease); }
.list li:last-child { border-bottom: 0; }
.list li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 10px; height: 1px; background: var(--violet-2); transition: width var(--d-2) var(--ease); }
.list li:hover { color: var(--text); }
.list li:hover::before { width: 16px; }
.list.small li { padding: 7px 0 7px 22px; }
.list.small li::before { top: 18px; width: 8px; }
blockquote { margin: 0 0 1em; padding: 16px 20px; border-left: 2px solid var(--violet-2); background: rgba(124, 92, 255, .06); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text); font-size: 16px; max-width: 65ch; }

.notice { border: 1px solid var(--line-strong); background: var(--violet-bg); padding: 14px 16px; border-radius: var(--r-sm); color: var(--text); font-size: 15px; max-width: 75ch; }
.notice.warn { border-color: rgba(245, 181, 71, .35); background: var(--amber-bg); }
.notice.warn strong { color: var(--amber); }
.error-text { color: var(--red); font-size: 15px; }
.field-err { margin: 6px 0 0; font-size: 14px; }   /* the message under a field that needs fixing (mr.js, QA item 9) */

/* numbered steps (how it works): node + rail on the left, mono index in the heading */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { position: relative; display: grid; gap: 12px 48px; padding: 40px 0 40px 44px; border-top: 1px solid var(--line); }
.steps > li:first-child { border-top: 0; padding-top: 0; }
.steps > li:first-child::before { top: 12px !important; }
.steps > li:first-child:not(:last-child)::after { top: 24px !important; }
.steps > li:last-child { padding-bottom: 0; }
@media (min-width: 960px) { .steps > li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); padding: 56px 0 56px 64px; } }
.steps > li::before { content: ""; position: absolute; left: 4px; top: 52px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--violet-2); background: var(--bg); box-shadow: 0 0 0 4px var(--bg); z-index: 1; transition: background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
@media (min-width: 960px) { .steps > li::before { top: 70px; } }
.steps > li:hover::before { background: var(--violet-2); box-shadow: 0 0 0 4px var(--bg), 0 0 0 9px rgba(167, 139, 250, .16); }
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 64px; bottom: -52px; width: 1px; background: linear-gradient(var(--line-strong), rgba(167, 139, 250, .06)); }
@media (min-width: 960px) { .steps > li:not(:last-child)::after { top: 82px; bottom: -70px; } }
.steps h2, .steps h3 { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.03em; margin: 0; }
.step-i { font: 500 .5em/1 var(--mono); color: var(--violet-2); vertical-align: .55em; margin-right: .3em; letter-spacing: 0; }
.steps p:last-child, .steps ul:last-child { margin-bottom: 0; }
.steps .list { margin-bottom: 1em; }

/* spec sheet (security, help): key column + value column with hairlines */
.spec { margin: 0; display: grid; border-top: 1px solid var(--line); }
.spec > div { display: grid; gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: background-color var(--d-1) var(--ease); }
@media (min-width: 760px) { .spec > div { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); } }
.spec dt { font: 500 13px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--violet-2); }
.spec dd { margin: 0; color: var(--text-2); }

/* FAQ grid */
.faq { display: grid; gap: 0 64px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; } }
.faq > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 18px; margin-bottom: 8px; }
.faq p { margin: 0; font-size: 16px; }

/* ── money, chips, tables ──────────────────────────────── */
.money, td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.money-xl { font: 500 clamp(28px, 3vw, 36px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--text); }
.money-xl .per { font: 400 15px/1 var(--font); letter-spacing: 0; color: var(--text-3); margin-left: 4px; }
.money-xl .from { font: 400 15px/1 var(--font); letter-spacing: 0; color: var(--text-3); margin-right: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font); padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid; white-space: nowrap; vertical-align: middle; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.strong { color: var(--amber); background: var(--amber-bg); border-color: rgba(245, 181, 71, .35); }
.chip.probable { color: var(--lav); background: var(--violet-bg); border-color: var(--line-strong); }
.chip.ambiguous { color: var(--text-2); background: rgba(255, 255, 255, .04); border-color: var(--line-2); }
.chip.ok { color: var(--green); background: var(--green-bg); border-color: rgba(61, 214, 140, .35); }
.chip.neutral { color: var(--text-2); background: rgba(255, 255, 255, .03); border-color: var(--line-2); }
.chip.neutral::before { background: var(--text-4); }
.sample-badge { display: inline-block; font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 6px 9px; border-radius: 6px; background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(245, 181, 71, .35); text-transform: uppercase; vertical-align: middle; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--text-2); }
td strong, td b { color: var(--text); font-weight: 500; }
td.num { color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--d-1) var(--ease); }
tbody tr:hover td { background: rgba(255, 255, 255, .02); }
th { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); background: rgba(255, 255, 255, .02); white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
td.cell-flag { background: var(--red-bg); outline: 1px solid var(--red); outline-offset: -1px; }

/* buckets (report, demo): separate kinds of money, never summed */
.buckets { display: grid; gap: 12px; }
@media (min-width: 640px) { .buckets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .buckets { grid-template-columns: repeat(4, 1fr); } }
.bucket { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-card); padding: 22px 20px 20px; overflow: hidden; transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .45s var(--ease); }
.bucket::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--text-4); transform-origin: left; transition: transform .6s var(--ease); }
.bucket:hover::before { transform: scaleX(1.04); }
.bucket.verified::before { background: var(--amber); } .bucket.conflict::before { background: var(--violet-2); }
.bucket.exposure::before { background: var(--lav); opacity: .6; } .bucket.delayed::before { background: var(--text-3); }
.bucket h3 { font-size: 15px; font-weight: 500; color: var(--text-2); margin-bottom: 12px; letter-spacing: 0; }
.bucket .count { font: 13px/1.4 var(--mono); color: var(--text-3); margin-top: 8px; }
.bucket p { font-size: 14px; margin: 12px 0 0; }
.bucket:hover { border-color: rgba(255, 255, 255, .13); }
button.bucket { width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.bucket:hover { border-color: var(--line-strong); background: var(--elevated); transform: translateY(-2px); }
.bucket-btn[aria-pressed="true"], button.bucket[aria-pressed="true"] { border-color: var(--violet-2); background: var(--elevated); }
.bucket-note { font-size: 14px; color: var(--text-3); margin: 14px 0 0; }

/* finding card */
.finding { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; transition: border-color .3s var(--ease); }
.finding + .finding { margin-top: 12px; }
.finding-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.finding-head strong { color: var(--text); font-weight: 500; }
.finding-head .meta { font-size: 14px; color: var(--text-3); margin-top: 4px; }
.finding-head .amt { display: inline-flex; align-items: center; gap: 10px; }
.finding-head .money { color: var(--text); font-size: 16px; }
.finding-body { padding: 22px; }
.finding-body h3, .finding-body .kicker { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 18px 0 8px; }
.finding-body > :first-child { margin-top: 0; }
details.finding > summary { list-style: none; cursor: pointer; transition: background-color var(--d-1) var(--ease); }
details.finding > summary::-webkit-details-marker { display: none; }
details.finding > summary:hover { background: rgba(255, 255, 255, .025); }
details.finding:not([open]) > summary { border-bottom-color: transparent; }
details.finding > summary .amt::after { content: ""; width: 9px; height: 9px; margin-left: 4px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-3px) rotate(45deg); transition: transform var(--d-2) var(--ease), border-color var(--d-1) var(--ease); }
details.finding[open] > summary .amt::after { transform: translateY(2px) rotate(-135deg); }
details.finding > summary:hover .amt::after { border-color: var(--violet-2); }
details.finding[open] { border-color: var(--line-strong); }
details.finding[open] > .finding-body { animation: panelIn .55s var(--ease) both; }
@keyframes panelIn { from { clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { clip-path: inset(0 0 0 0); } }
.ku { display: grid; gap: 4px 24px; }
@media (min-width: 760px) { .ku { grid-template-columns: 1fr 1fr; } }
.action-line { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: rgba(124, 92, 255, .06); color: var(--text-2); font-size: 15px; max-width: none; }
.action-line strong { color: var(--lav); font-weight: 500; }
.lineage { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; padding: 0; margin: 14px 0; }
.lineage li { position: relative; font: 13px/1.3 var(--mono); padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--text-2); }
.lineage li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: var(--line-strong); transform-origin: left; }
.lineage li.missing { background: var(--amber-bg); border-color: rgba(245, 181, 71, .4); color: var(--amber); }
.lineage li.missing::after { content: "missing"; margin-left: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.evidence-row { font: 13px/1.55 var(--mono); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); padding: 10px 12px; border-radius: 6px; overflow-wrap: anywhere; color: var(--text-2); transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease); }
.evidence-row + .evidence-row { margin-top: 6px; }
.evidence-row:hover { border-color: var(--line-strong); color: var(--text); }
.lifecycle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; padding: 0; margin: 12px 0 0; }
.lifecycle li { font: 500 12px/1 var(--font); padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-3); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.lifecycle li.on { color: var(--text); background: rgba(255, 255, 255, .05); border-color: var(--line-strong); }
.lifecycle li.on.done { color: var(--green); background: var(--green-bg); border-color: rgba(61, 214, 140, .35); }
.lifecycle .arrow { border: 0; padding: 0; color: var(--text-4); }

/* report: a SAMPLE document sheet; pillars, section heads */
.report-head { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) { .report-head { grid-template-columns: minmax(0, 1fr) auto; } }
.report-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); margin: 0 0 32px; }
.report-stats > div { padding: 20px 22px; }
.report-stats > div + div { border-left: 1px solid var(--line); }
.report-stats dt { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 10px; }
.report-stats dd { margin: 0; font: 500 clamp(24px, 2.6vw, 32px)/1.1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pillar-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; }
.pillar-head h2 { margin: 0; }
.pillar-status { font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--violet-2); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.pillar-desc { margin-bottom: 32px; }
.sub-h { font-size: 20px; letter-spacing: -0.015em; margin: 40px 0 14px; }
.sub-h:first-child { margin-top: 0; }

/* pricing */
.price-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .price-grid { grid-template-columns: 1.25fr 1fr 1fr; } }
.price-card { display: flex; flex-direction: column; gap: 4px; padding: 28px; }
.price-card .money-xl { margin: 6px 0 14px; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card p { font-size: 15px; }
.price-card .card-foot { margin-top: auto; padding-top: 20px; }
.price-card.featured { border-color: var(--line-strong); background: radial-gradient(600px 240px at 0% 0%, rgba(124, 92, 255, .16), transparent 65%), var(--surface); }
.price-card.featured::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--violet-2), transparent); }
.refund { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; max-width: 90ch; }

/* founder card (about) */
.founder { display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 28px; overflow: hidden; isolation: isolate; }
.founder::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 100% 0%, rgba(124, 92, 255, .2), transparent 70%); }
.founder::after { content: "M"; position: absolute; right: -10px; top: -40px; z-index: -1; font: 700 240px/1 var(--font); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(167, 139, 250, .22); }
.founder h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0; }

/* forms */
label { display: block; font-weight: 500; font-size: 14px; margin: 18px 0 8px; color: var(--text); }
input, select, textarea { width: 100%; font: 16px/1.4 var(--font); padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--text); min-height: 48px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 255, 255, .24); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px rgba(124, 92, 255, .28); background: #0A0912; }
input[type="checkbox"] { appearance: none; width: 18px !important; height: 18px; min-height: 0 !important; padding: 0; margin: 0 10px 0 0; vertical-align: -3px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; display: inline-grid; place-content: center; }
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: #fff; transform: scale(0); transition: transform .25s var(--ease); }
input[type="checkbox"]:checked { background: var(--violet); border-color: var(--violet); }
input[type="checkbox"]:checked::before { transform: scale(1); }
label:has(> input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 0; font-weight: 400; color: var(--text-2); cursor: pointer; margin: 12px 0 0; }
label:has(> input[type="checkbox"]) > input { margin-top: 3px; flex: none; }
label:has(> input[type="checkbox"]:checked) { color: var(--text); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; cursor: pointer; }
option { background: var(--surface); color: var(--text); }
textarea { min-height: 128px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; }
legend { font-weight: 500; font-size: 14px; color: var(--text); padding: 0; }
.hint { font-size: 14px; color: var(--text-3); margin-top: 6px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 24px 24px; margin-top: 28px; }
@media (min-width: 760px) { .form-card { padding: 12px 32px 32px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 0; max-width: none; }
form .btn-primary { min-width: 180px; }
[data-mr-result]:not(:empty) { margin-top: 16px; }
.hp { position: absolute; left: -9999px; }
.stack > h2 { font-size: 22px; letter-spacing: -0.02em; }
.step-card { padding: 24px; }
@media (min-width: 760px) { .step-card { padding: 32px; } }
.step-card + .step-card { margin-top: 16px; }
.step-card h2 { display: flex; align-items: center; gap: 12px; }
.step-card h2 .step-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); font: 500 13px/1 var(--mono); color: var(--lav); flex: none; }

/* contact */
.contact-grid { display: grid; gap: 64px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; } .contact-grid > aside { position: sticky; top: calc(var(--header) + 32px); align-self: start; } }

/* legal documents: reading column + table of contents */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }   /* minmax(0): a wide table scrolls inside .table-wrap instead of widening the page (legal pages @390) */
@media (min-width: 1024px) { .doc-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 80px; } .doc-layout .toc { position: sticky; top: calc(var(--header) + 32px); align-self: start; } }
.toc { font-size: 14px; }
.toc p { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-3); transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease); }
.toc a:hover { color: var(--text); border-left-color: var(--violet-2); }
@media (max-width: 1023px) { .toc { display: none; } }
.doc { max-width: 72ch; counter-reset: dh; }
.doc h1 { font-size: clamp(36px, 4.4vw, 56px); margin: 28px 0 8px; }
.doc h2 { counter-increment: dh; font-size: 22px; letter-spacing: -0.015em; margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc p { color: var(--text-2); }

/* 404 */
.big-code { font: 500 clamp(120px, 24vw, 280px)/.8 var(--mono); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(167, 139, 250, .5); margin: 0 0 24px; user-select: none; }

/* ── footer ─────────────────────────────────────────────── */
.mr-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: var(--bg); padding: 72px 0 0; font-size: 15px; }
.mr-footer .cols { display: grid; gap: 40px 32px; position: relative; z-index: 1; }
@media (min-width: 640px) { .mr-footer .cols { grid-template-columns: 1fr 1fr; } .mr-footer .cols > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .mr-footer .cols { grid-template-columns: 2fr 1fr 1fr 1.3fr; } .mr-footer .cols > :first-child { grid-column: auto; } }
.mr-footer strong { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 17px; }
.mr-footer p { font-size: 14px; max-width: 44ch; margin-top: 12px; }
.mr-footer a { color: var(--text-2); display: block; width: fit-content; padding: 6px 0; background: none !important; transition: color var(--d-1) var(--ease), transform var(--d-2) var(--ease); }
.mr-footer a:hover { color: var(--text); transform: translateX(3px); }
.mr-footer h4 { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 14px; }
.mr-footer .legal-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font: 13px/1.5 var(--mono); color: var(--text-3); position: relative; z-index: 1; }
/* the wordmark: huge, cropped by the page bottom, faint violet outline; fills from the bottom on hover */
.mr-wordmark { position: relative; font-weight: 700; font-size: clamp(132px, 30vw, 440px); line-height: .76; letter-spacing: -0.055em; text-align: center; color: transparent;
  -webkit-text-stroke: 1px rgba(167, 139, 250, .3); margin: 40px 0 -0.16em; user-select: none;
  background: linear-gradient(0deg, rgba(124, 92, 255, .16), rgba(124, 92, 255, 0) 60%) 0 100% / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: -webkit-text-stroke-color .8s var(--ease), background-size 1.2s var(--ease); }
.mr-footer:hover .mr-wordmark { -webkit-text-stroke-color: rgba(167, 139, 250, .45); background-size: 100% 160%; }

/* Main assistant launcher (fixed, so it never shifts layout; a plain link to /contact without JS) */
.mr-assist { position: fixed; right: 20px; bottom: 20px; z-index: 59; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 14px;
  border-radius: var(--r-pill); background: rgba(21, 18, 31, .88); border: 1px solid var(--line-strong); color: var(--text); font: 500 15px/1 var(--font);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4); transition: transform .35s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
.mr-assist:hover { transform: translateY(-2px); border-color: var(--violet-2); background: rgba(30, 25, 46, .92); color: #fff; }
.mr-assist-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--violet-2); box-shadow: 0 0 0 4px rgba(167, 139, 250, .18); }
.mr-assist-icon { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.mr-assist { transition: transform .35s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), opacity .3s var(--ease); }
/* phones: a compact round button (48px target) above the safe area; mr.js steps it aside while it would cover a control */
@media (max-width: 760px) {
  .mr-assist { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; gap: 0; }
  .mr-assist-icon { display: block; }
  .mr-assist-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mr-assist-dot { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(21, 18, 31, .95); }
}
.mr-assist.is-clear { pointer-events: none; transform: translateY(calc(100% + 40px)); }

/* ── page transitions (View Transitions API, cross-document; same-origin navigations) ── */
/* cross-document view transitions OFF (2026-10-03): a skipped transition after a click left the next page not rendering in Chromium (entrance animations frozen, screenshots hang) — page loads are plain. */
@view-transition { navigation: none; }
::view-transition-old(root) { animation: vtOut .24s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .55s var(--ease) both; }
::view-transition-group(mr-header) { animation-duration: 0s; }
@keyframes vtOut { to { opacity: .001; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: .001; clip-path: inset(0 0 12% 0); transform: translateY(14px); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── scroll reveals (inner pages). mr.js assigns the hooks, motion.js adds .rv-pre only to elements fully below the
   fold (never under reduced motion) and removes it on entry. From-states exist only under .mr-motion. Varied per role:
   i-mask (headings rise out of a clip), i-clip (panels open from an inset), i-wipe (tables and chains draw left to right),
   stagger groups (list items rise in sequence), line (section hairline draws in), wordmark (footer MAIN rises out of the
   page edge). Transforms, opacity and clip-path only: no layout shift. Home variants (mask/clip/lines) live in home.css. ── */
.mr-motion [data-reveal="i-mask"].rv-pre { transform: translateY(.45em); }   /* batch 4: reveals move, never hide */
.mr-motion [data-reveal="i-clip"].rv-pre { transform: scale(.985); }
.mr-motion [data-reveal="i-wipe"].rv-pre { transform: translateX(-12px); }
.mr-motion [data-reveal-group="stagger"] > .rv-pre { transform: translateY(14px); }
.mr-motion [data-reveal="i-mask"], .mr-motion [data-reveal="i-clip"] { transition: clip-path 1s var(--ease), transform 1s var(--ease), opacity .7s var(--ease); }
.mr-motion [data-reveal="i-wipe"] { transition: transform 1.2s var(--ease-io); }
.mr-motion [data-reveal-group="stagger"] > * { transition: opacity .7s var(--ease), transform .9s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); transition-delay: calc(var(--d, 0) * .9ms); }
.mr-motion [data-reveal-group="stagger"] > .is-in:hover { transition-delay: 0s; }
.mr-motion main > section[data-reveal="line"].rv-pre::before { transform: scaleX(0); }
.mr-motion .mr-footer[data-reveal="wordmark"].rv-pre .mr-wordmark { clip-path: inset(100% 0 0 0); transform: translateY(14%); }
.mr-footer[data-reveal="wordmark"] .mr-wordmark { transition: clip-path 1.5s var(--ease) .25s, transform 1.5s var(--ease) .25s, -webkit-text-stroke-color .8s var(--ease), background-size 1.2s var(--ease); }

/* /demo */
.demo-head { display: grid; gap: 24px; }
.demo-shell { margin-top: 40px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(180deg, #110E1A, #0C0A13); overflow: hidden; box-shadow: 0 40px 100px -40px rgba(124, 92, 255, .4), 0 0 0 1px rgba(0, 0, 0, .5); }
.demo-bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.demo-bar i + i { margin-left: -8px; }
.demo-bar span { font: 12px/1 var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#demo { padding: 4px 20px 20px; }
@media (min-width: 760px) { #demo { padding: 8px 28px 28px; } }
.demo-panel { padding: 12px 0; display: grid; gap: 12px; }
.demo-panel > p:first-child { color: var(--text); margin: 0; }
.demo-ku { gap: 16px; margin: 0; }
.demo-ku strong.small { display: block; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 4px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0; }
.toolbar label { margin: 0; }
.toolbar select { width: auto; min-height: 40px; }
tr.row-link { cursor: pointer; }
#demo tr[data-o] td { transition: background-color .2s var(--ease), color .2s var(--ease); }
#demo tr[data-o]:hover td { background: rgba(124, 92, 255, .06); color: var(--text); }
#demo tr[data-o] td:first-child { position: relative; color: var(--text); }
#demo tr[data-o] td:first-child::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--violet-2); transform: scaleY(0); transition: transform .35s var(--ease); }
#demo tr[data-o]:hover td:first-child::before, #demo tr[aria-expanded="true"] td:first-child::before { transform: scaleY(1); }
#demo tr[aria-expanded="true"] td { background: rgba(124, 92, 255, .08); color: var(--text); border-bottom-color: transparent; }
#demo tr.demo-detail > td { background: rgba(124, 92, 255, .035); padding-top: 4px; }
#demo.demo-live .demo-view { animation: viewIn .35s var(--ease) both; }
#demo.demo-live .demo-detail > td > div { animation: panelIn .5s var(--ease) both; }
@keyframes viewIn { from { transform: translateY(4px); } }
.exports-line { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }

/* phone tables: rows become stacked cards with their labels (demo, sample report, security) */
@media (max-width: 640px) {
  .stack-sm { border: 0; background: none; overflow: visible; }
  .stack-sm table, .stack-sm tbody, .stack-sm tr, .stack-sm td { display: block; width: 100%; }
  .stack-sm thead { position: absolute; left: -9999px; }
  .stack-sm tr { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); margin-bottom: 10px; padding: 10px 0; }
  .stack-sm tbody tr:hover td { background: none; }
  .stack-sm td { border: 0; padding: 6px 16px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .stack-sm td[data-label]::before { content: attr(data-label); display: block; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 4px; }
  .stack-sm td.num { text-align: left; font-size: 16px; }
  .stack-sm td:first-child { color: var(--text); }
  #demo .stack-sm tr[data-o] { position: relative; padding-right: 28px; }
  #demo .stack-sm tr[data-o]::after { content: ""; position: absolute; right: 16px; top: 22px; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform var(--d-2) var(--ease); }
  #demo .stack-sm tr[aria-expanded="true"] { border-color: var(--violet-2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
  #demo .stack-sm tr[aria-expanded="true"]::after { transform: rotate(-135deg); top: 26px; }
  #demo .stack-sm tr[data-o] td { background: none !important; }
  #demo .stack-sm tr[data-o] td:first-child::before { content: none; }
  .stack-sm tr.demo-detail { border-color: var(--violet-2); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 10px; padding: 0; }
  .stack-sm tr.demo-detail td { padding: 0 16px 8px; }
  .stack-sm tr.demo-detail td::before { content: none; }
  #demo { padding: 4px 12px 14px; }
  /* demo rows on a phone: title, project, then evidence and amount on one line, decision below */
  #demo .stack-sm tr[data-o] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  #demo .stack-sm tr[data-o] td:nth-child(1), #demo .stack-sm tr[data-o] td:nth-child(2) { grid-column: 1 / -1; }
  #demo .stack-sm tr[data-o] td:nth-child(3) { grid-column: 1; grid-row: 3; }
  #demo .stack-sm tr[data-o] td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; }
  #demo .stack-sm tr[data-o] td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
  #demo .stack-sm tr[data-o] td:nth-child(1)::before { content: none; }
  #demo .stack-sm tr[data-o] td:nth-child(1) { font-weight: 500; padding-right: 8px; }
  .demo-shell { margin-left: calc(var(--gutter) * -1 + 8px); margin-right: calc(var(--gutter) * -1 + 8px); }
  .toolbar select { flex: 1 1 140px; }
}

/* ── page-level details (v4 inner pages) ── */
.page-hero h1, .page-hero > .wrap > h1 { animation: heroMask var(--d-3) var(--ease) .04s both; }
.demo-hero > .wrap > .demo-shell { animation: shellIn 1.1s var(--ease) .18s both; }
@keyframes shellIn { from { clip-path: inset(0 0 100% 0 round 16px); transform: translateY(18px); } to { clip-path: inset(0 0 0 0 round 16px); } }
.split-rows > .split { padding: 48px 0; border-top: 1px solid var(--line); }
.split-rows > .split:first-child { padding-top: 0; border-top: 0; }
.split-rows > .split:last-child { padding-bottom: 0; }
.split-rows .split-label h2 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.022em; }
.finding-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; max-width: none; }
.price-contact { font: 500 clamp(26px, 2.4vw, 30px)/1.1 var(--font); letter-spacing: -0.025em; }
.aside-note { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.aside-note h2, .contact-grid aside > h2 { font-size: 24px; letter-spacing: -0.02em; }
.contact-grid h1 { font-size: clamp(40px, 4.6vw, 64px); }
.fine-print { margin-top: 28px; max-width: 80ch; }
.table-note { margin-top: 16px; max-width: 90ch; }
.table-h { font-size: 16px; letter-spacing: -0.01em; margin: 32px 0 12px; }
.open-hint { margin: -16px 0 20px; }
.wip-statement { margin-bottom: 28px; max-width: 80ch; }
.sub-h.spaced, h2.sub-h.spaced { margin-top: 48px; }
h2.sub-h { font-size: 22px; letter-spacing: -0.02em; }
.hero-cards { margin-top: 40px; }
.demo-buckets { margin: 20px 0 12px; }
.lifecycle-note { margin: 18px 0 0; }
.doc .notice { margin-bottom: 8px; }
.readout { padding-bottom: 128px !important; }
.readout-q { font-size: clamp(26px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.025em; color: var(--text); max-width: 26ch; margin: 0; text-wrap: balance; }
.hero-price { margin-top: 18px; font-weight: 500; color: var(--text); }
.report-stats + .buckets { margin-top: 0; }

@media print {
  body::after, .mr-header nav, .mr-footer, .no-print, .mr-assist { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main > section { padding: 16px 0; border: 0; }
  .page-hero::before, .page-hero::after { content: none; }
  .card, .bucket, .finding { break-inside: avoid; }
  .rv-pre, .rv-pre > * { clip-path: none !important; opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ELEVATION LAYER (2026-10-03) — shared tokens, components and motion states. Contract: docs/DESIGN_SYSTEM.md.
   Page styles live in home.css and assets/pages/<name>.css and build on these names.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --raised: #1B1727; --sunken: #050409; --slate: #8F8AA3; --slate-bg: rgba(143, 138, 163, .12);
  --silver: #D9D6E3; --silver-2: #9C98AA;
  --grad-mark: linear-gradient(100deg, #FFFFFF 0%, #D9D6E3 46%, #8F6BFF 54%, #6A2BFF 100%);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sec-y: clamp(72px, 9vw, 136px); --measure: 66ch;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 17px; --fs-md: 19px; --fs-lg: 22px; --fs-xl: 28px; --fs-money: clamp(32px, 4vw, 52px);
  --fs-display: clamp(40px, 5.6vw, 76px); --fs-h1: clamp(36px, 4.8vw, 64px); --fs-h2: clamp(28px, 3.4vw, 46px);
  --r-xs: 6px; --r-lg: 16px; --r-xl: 22px;
  --e-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .7);
  --e-3: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .35), 0 30px 80px -30px rgba(0, 0, 0, .9), 0 40px 120px -60px rgba(124, 92, 255, .45);
  --t-micro: 160ms; --t-comp: 280ms; --t-panel: 380ms; --t-enter: 620ms; --t-ambient: 14s;
  --ease-std: cubic-bezier(.2, 0, 0, 1);
}
@media (max-width: 430px) { body { font-size: 16px; } }

/* brand lockup: the Main AI mark */
.mr-mark { width: 26px; height: 24px; fill: initial; stroke: none; flex: none; transition: transform var(--t-comp) var(--ease); }
.mr-brand { gap: 10px; }
.mr-brand:hover .mr-mark { transform: translateY(-1px); }
.mr-foot-brand .mr-mark { width: 30px; height: 28px; }
.mr-foot-brand span { color: var(--text-3); font-weight: 500; }

/* header reacts to scroll (scroll-driven, no JS): denser glass + hairline after the first 40px */


/* mobile menu: full sheet, obvious close, stagger */
.mr-menu[open] summary { font-size: 0; gap: 0; }
.mr-menu[open] summary::before { content: "Close"; font: 500 15px/1 var(--font); margin-right: 10px; }
.mr-menu[open] summary::after { width: 12px; height: 12px; background: linear-gradient(45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(-45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)); transform: none; }
.mr-menu-panel { height: calc(100svh - var(--header)); background: var(--bg); align-content: start; }
.mr-menu-panel a { min-height: 56px; }
.mr-menu[open] .mr-menu-panel > * { animation: menuItem var(--t-panel) var(--ease) both; }
.mr-menu[open] .mr-menu-panel > :nth-child(2) { animation-delay: 30ms; } .mr-menu[open] .mr-menu-panel > :nth-child(3) { animation-delay: 60ms; }
.mr-menu[open] .mr-menu-panel > :nth-child(4) { animation-delay: 90ms; } .mr-menu[open] .mr-menu-panel > :nth-child(5) { animation-delay: 120ms; }
.mr-menu[open] .mr-menu-panel > :nth-child(n+6) { animation-delay: 150ms; }
@keyframes menuItem { from { transform: translateY(6px); } }
body:has(.mr-menu[open]) { overflow: hidden; }

/* footer: grouped, quiet, the mark as signature */
.mr-footer { padding-top: clamp(56px, 7vw, 96px); background: radial-gradient(120% 80% at 50% 120%, rgba(124, 92, 255, .10), transparent 60%), var(--bg); }
.mr-footer .foot-note { font-size: 13px; color: var(--text-3); max-width: 46ch; }
.mr-footer .foot-quiet { color: var(--text-3); }

/* surfaces */
.surface-1 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.surface-2 { background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--elevated); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-2); }
.surface-3 { background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 30%), var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--e-3); }

/* product window: the one frame for real Main UI on marketing pages */
.pw { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--e-3); overflow: hidden; }
.pw-bar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015); font: 12px/1 var(--mono); color: var(--text-3); }
.pw-dots { display: inline-flex; gap: 6px; } .pw-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.pw-crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* money & numbers */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero" 0; letter-spacing: -0.01em; white-space: nowrap; }
.money-l { font: 500 clamp(22px, 2.4vw, 30px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--text); }
td.num, th.num { text-align: right; }

/* control states — icon glyph + label + colour (never colour alone) */
.st { --c: var(--text-2); --b: rgba(255, 255, 255, .05); display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: var(--b); color: var(--c); font: 500 13px/1.2 var(--font); white-space: nowrap;
  transition: color var(--t-comp) var(--ease-std), background-color var(--t-comp) var(--ease-std), border-color var(--t-comp) var(--ease-std); }
.st::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.st-sm { min-height: 22px; padding: 2px 8px 2px 6px; font-size: 12px; }
.st[data-st="pass"] { --c: var(--green); --b: var(--green-bg); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.st[data-st="resolved"] { --c: var(--green); --b: var(--green-bg); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M3.6 6.2 5.3 7.8l3.1-3.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.st[data-st="exception"] { --c: var(--amber); --b: var(--amber-bg); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2 11 10.4H1z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M6 4.6v2.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.7' r='.8'/%3E%3C/svg%3E"); }
.st[data-st="confirm"] { --c: var(--lav); --b: var(--violet-bg); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M4.6 4.7a1.5 1.5 0 1 1 2 1.4c-.4.2-.6.5-.6.9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.8' r='.75'/%3E%3C/svg%3E"); }
.st[data-st="cannot"] { --c: var(--slate); --b: var(--slate-bg); border-style: dashed; --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M3.6 6h4.8' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.st[data-st="open"] { --c: var(--text-2); --b: rgba(255, 255, 255, .04); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.st[data-st="live"] { --c: var(--green); --b: var(--green-bg); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.2'/%3E%3C/svg%3E"); }
.st[data-st="built"] { --c: var(--lav); --b: var(--violet-bg); --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 1.6v8.8' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.st[data-st="draft"] { --c: var(--amber); --b: var(--amber-bg); border-style: dashed; --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10l.6-2.4L8 2.2 9.8 4 4.4 9.4z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* disclosure: smooth height where supported, instant elsewhere */
.disclose { border-top: 1px solid var(--line); }
.disclose > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--text); font-weight: 500; }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-3px) rotate(45deg); transition: transform var(--t-comp) var(--ease-std); }
.disclose[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.disclose > summary:hover::after { border-color: var(--violet-2); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .disclose::details-content { height: 0; overflow: clip; transition: height var(--t-panel) var(--ease-io), content-visibility var(--t-panel) allow-discrete; }
  .disclose[open]::details-content { height: auto; }
}

/* responsive record table: a real table ≥ 768px, stacked records below */
.rec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rec-table th { text-align: left; font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px; border-bottom: 1px solid var(--line-2); white-space: normal; overflow-wrap: break-word; }
/* record tables wrap: the global th nowrap cut /security's last header off at desktop width (owner Part A, 2026-10-04) */
.rec-table td { overflow-wrap: break-word; }
.rec-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.rec-table tbody tr { transition: background-color var(--t-micro) var(--ease-std); }
.rec-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
@media (max-width: 767px) {
  .rec-table, .rec-table tbody, .rec-table tr, .rec-table td { display: block; width: 100%; }
  .rec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rec-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
  .rec-table td { padding: 0; border: 0; }
  .rec-table td[data-label]::before { content: attr(data-label); display: block; font: 500 11.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
  .rec-table td.rec-wide { grid-column: 1 / -1; }
  .rec-table td.num { text-align: right; }
}

/* financial lineage — paths and nodes (drawn without JS; motion stages them) */
.ln { overflow: visible; }
.ln-path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ln-path.is-hot { stroke: var(--violet-2); }
.ln-node { fill: var(--bg); stroke: var(--violet-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lineage-rail { position: relative; padding-left: 28px; }
.lineage-rail::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: linear-gradient(var(--violet-2), rgba(167, 139, 250, .15)); transform-origin: top; }
.lineage-rail > * { position: relative; }
.lineage-rail > *::before { content: ""; position: absolute; left: -26px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--violet-2); }

/* relationship highlight (data-link-scope) */
[data-link-scope] [data-link], [data-link-scope] [data-link-src] { transition: opacity var(--t-comp) var(--ease-std), background-color var(--t-comp) var(--ease-std), box-shadow var(--t-comp) var(--ease-std), color var(--t-comp) var(--ease-std); }
[data-link-scope] [data-link-src] { cursor: pointer; }
[data-link-scope].is-linking [data-link]:not(.is-linked) { opacity: .42; }
[data-link-scope] .is-linked { background-color: rgba(124, 92, 255, .12); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .55); border-radius: var(--r-xs); }
[data-link-scope] [data-link-src].is-active { box-shadow: inset 0 0 0 1px var(--violet-2); }

/* owner batch 4: nothing is ever blank while it animates in — sequenced pieces only move (and a draw draws); text stays readable */
.mr-motion [data-seq]:not(.is-run) [data-at] { opacity: 1; }
.mr-motion [data-seq]:not(.is-run) [data-at][data-fx="rise"] { transform: translateY(10px); }
.mr-motion [data-seq] [data-at]:not(.is-on) { opacity: 1; }
.mr-motion [data-seq] [data-at][data-fx="rise"]:not(.is-on) { transform: translateY(10px); }
.mr-motion [data-seq] [data-at][data-fx="grow"]:not(.is-on) { transform: scaleX(.6); transform-origin: left center; }
.mr-motion [data-seq] [data-at][data-fx="draw"] { opacity: 1; }
.mr-motion [data-seq] [data-at][data-fx="draw"] .ln-path, .mr-motion [data-seq] .ln-path[data-at] { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.mr-motion [data-seq] .is-on[data-fx="draw"] .ln-path, .mr-motion [data-seq] .ln-path.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease-io); }
.mr-motion [data-seq] [data-at] { transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.mr-motion [data-seq] [data-at][data-fx="draw"] { transition: none; }
.mr-motion [data-pulse]:not(.is-done) [data-state] .st { --c: var(--text-3); --b: rgba(255, 255, 255, .03); }
.mr-motion [data-pulse] [data-state] { position: relative; }
.mr-motion [data-pulse] [data-state].is-checking::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .10), transparent); animation: pulseSweep 520ms var(--ease-io) both; }
@keyframes pulseSweep { from { transform: translateX(-60%); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(60%); opacity: 0; } }
.mr-motion [data-pulse] [data-state]:not(.is-checked) .st { --c: var(--text-3); --b: rgba(255, 255, 255, .03); }

/* footer layout (elevation pass): lead column + four groups */
.mr-footer .foot-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mr-footer .foot-cta a { transform: none; }
.mr-footer .foot-cta a:hover { transform: none; }
.mr-footer .foot-cta .btn { display: inline-flex; padding: 8px 16px; }
.mr-footer .foot-cta .btn-primary { background: var(--violet-btn) !important; color: #fff; }
.mr-footer .foot-cta .btn-primary:hover { background: var(--violet-btn-hover) !important; }
@media (min-width: 640px) { .mr-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mr-footer .cols { grid-template-columns: 1.8fr 1fr 1fr 1.2fr 1.1fr; } .mr-footer .cols > :first-child { grid-column: auto; } }
.mr-menu-panel a.btn { margin-left: 0; }
/* the sweep pseudo-element must never sit on a table row (Chromium lays it out as an extra cell) — sweep the cells */
.mr-motion [data-pulse] tr[data-state].is-checking::after { content: none; }
.mr-motion [data-pulse] tr[data-state].is-checking > td { background-image: linear-gradient(90deg, transparent, rgba(167, 139, 250, .08), transparent); }

/* the Main AI lockup (owner 2026-10-03: the original logo): main-ai-logo.png on its own rounded near-black plate + "Main AI"
   in Familjen Grotesk 700, exactly as the Main AI site set it */
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
.mr-brand { gap: 11px; }
.mr-logo { width: 38px; height: 38px; aspect-ratio: 1; border-radius: 8px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px -8px rgba(124, 92, 255, .55); transition: transform var(--t-comp) var(--ease), box-shadow var(--t-comp) var(--ease); }
.mr-brand:hover .mr-logo { transform: translateY(-1px) rotate(-2deg); box-shadow: 0 0 0 1px rgba(167, 139, 250, .35), 0 10px 26px -8px rgba(124, 92, 255, .8); }
.mr-word { font-family: "Familjen Grotesk", var(--font); font-weight: 700; font-size: clamp(20px, 1.35vw, 23px); letter-spacing: -0.035em; color: var(--text); }
.mr-brand .mr-word { color: var(--text); }
.mr-foot-brand .mr-logo { width: 40px; height: 40px; border-radius: 10px; }
.mr-foot-brand .mr-word { font-size: 24px; }
@media (max-width: 430px) { .mr-logo { width: 30px; height: 30px; } .mr-word { font-size: 19px; } }

/* ══ SITE FX (site agent) ══
   Inner-page motion craft (2026-10-03, owner: "still bland — elevate it"). Living hero atmosphere (drifting masked grid,
   moving light, lineage pulses drawn by motion.js on a 2D canvas, tinted per page), travelling signals on every lineage
   rail and flow, cursor spotlight + border light, tactile buttons, header progress + hairline, premium menu sheet,
   footer wordmark verification sweep, enter animations (heading masks, staggers, chip landings), sliding section index.
   CONTRACT: decorative layers are injected by motion.js (never without JS, never under reduced motion). Every
   from-state lives under .mr-motion and is cleared by an IntersectionObserver entry; nothing is hidden for good.
   Loops run only on .fx-live (in view); the canvas stops off-screen and in hidden tabs. Money never animates. */
:root { --fx-a: 124, 92, 255; --fx-b: 196, 181, 253; }
body.info-sec { --fx-a: 104, 128, 255; --fx-b: 214, 220, 240; }
body.info-pt { --fx-a: 146, 112, 255; --fx-b: 222, 218, 236; }
body.info-ab { --fx-a: 170, 110, 255; --fx-b: 238, 214, 255; }
body.info-ct { --fx-a: 124, 92, 255; --fx-b: 217, 214, 227; }
body[data-mr-page="sample_report_view"] { --fx-a: 132, 116, 238; --fx-b: 232, 228, 242; }
body[data-mr-page="demo_open"] { --fx-a: 98, 72, 255; --fx-b: 160, 176, 255; }

/* 1 · hero atmosphere: static grid + glow without JS; with motion.js a living layer replaces both */
.page-hero.fx-has::before, .page-hero.fx-has::after { content: none; }
.fx-atmo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-light { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.fx-light.l1 { width: 980px; height: 700px; right: -300px; top: -360px; background: radial-gradient(closest-side, rgba(var(--fx-a), .30), rgba(var(--fx-a), .10) 55%, rgba(var(--fx-a), 0)); animation: fxDriftA 19s var(--ease-io) infinite alternate; }
.fx-light.l2 { width: 640px; height: 440px; right: 16%; top: -220px; background: radial-gradient(closest-side, rgba(var(--fx-b), .13), rgba(var(--fx-b), 0)); animation: fxDriftB 24s var(--ease-io) infinite alternate; }
.fx-light.l3 { width: 720px; height: 420px; right: -120px; bottom: -300px; background: radial-gradient(closest-side, rgba(var(--fx-a), .12), rgba(var(--fx-a), 0)); animation: fxDriftC 29s var(--ease-io) infinite alternate; }
@keyframes fxDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-160px, 70px, 0) scale(1.14); } }
@keyframes fxDriftB { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(220px, 50px, 0) scale(1.1); } }
@keyframes fxDriftC { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-260px, -60px, 0) scale(1.2); } }
.fx-mesh { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 72% 92% at 80% 8%, #000 0%, rgba(0, 0, 0, .62) 42%, transparent 76%); mask-image: radial-gradient(ellipse 72% 92% at 80% 8%, #000 0%, rgba(0, 0, 0, .62) 42%, transparent 76%); }
.fx-grid { position: absolute; inset: -72px; display: block; will-change: transform; background-image: linear-gradient(rgba(var(--fx-b), .075) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fx-b), .075) 1px, transparent 1px); background-size: 72px 72px; background-position: center top; animation: fxGrid 46s var(--ease-io) infinite alternate; }
.fx-atmo.fx-js .fx-grid { animation: none; }
@keyframes fxGrid { to { transform: translate3d(72px, 36px, 0); } }
.fx-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; animation: fxFadeIn 1.8s var(--ease) .2s both; }
@keyframes fxFadeIn { from { opacity: 0; } }

.page-hero:not(.fx-live) .fx-light, .page-hero:not(.fx-live) .fx-grid { animation-play-state: paused; }
@media (max-width: 767px) {
  .fx-light.l1 { width: 620px; height: 480px; right: -260px; top: -260px; }
  .fx-light.l2 { width: 420px; height: 320px; right: -60px; top: -160px; }
  .fx-light.l3 { display: none; }
  .fx-mesh { -webkit-mask-image: radial-gradient(ellipse 90% 60% at 90% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 90% 60% at 90% 0%, #000 0%, transparent 75%); }
}
/* hero type: the headline clears out of a mask and comes into focus; eyebrow rule draws; lede settles (transform/filter
   only — text is readable from first paint, CTAs never fade) */
.page-hero h1, .page-hero > .wrap > h1 { animation: fxH1 1.15s var(--ease) .05s both; }
@keyframes fxH1 { from { clip-path: inset(0 0 100% 0); transform: translateY(.34em); filter: blur(14px); } 55% { filter: blur(1px); } to { clip-path: inset(-10% -5% -20% -5%); transform: none; filter: none; } }
.page-hero .eyebrow::before { transform-origin: left center; animation: fxGrowX 1s var(--ease) .1s both; }
@keyframes fxGrowX { from { transform: scaleX(0); } }
.page-hero > .wrap > .lede, .page-hero .ct-main > .lede { animation: fxSoft 1.1s var(--ease) .18s both; }
@keyframes fxSoft { from { transform: translateY(12px); filter: blur(6px); } }

/* 2 · header: hairline that gathers light as you scroll, reading progress on long pages, logo sheen */
.mr-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: .3; transform: scaleX(.35);
  background: linear-gradient(90deg, transparent, rgba(var(--fx-b), .5) 28%, rgba(var(--fx-a), .95) 50%, rgba(var(--fx-b), .5) 72%, transparent); }

.fx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; overflow: hidden; z-index: 1; }
.fx-progress i { position: absolute; inset: 0; display: block; transform-origin: left center; transform: scaleX(var(--fx-p, 0));
  background: linear-gradient(90deg, rgba(var(--fx-a), .15), rgba(var(--fx-a), .95) 55%, rgba(var(--fx-b), 1)); box-shadow: 0 0 12px rgba(var(--fx-a), .7); }

.mr-brand { position: relative; }
.mr-brand::before { content: ""; position: absolute; left: 0; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 8px; pointer-events: none; z-index: 1; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, rgba(196, 181, 253, .25) 56%, transparent 66%) 140% 0 / 260% 100% no-repeat; }
.fx-first .mr-header .mr-brand::before { animation: fxSheen 1.5s var(--ease-io) .35s both; }
.mr-brand:hover::before { animation: fxSheen 1s var(--ease-io) both; }
@keyframes fxSheen { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.mr-foot-brand { position: relative; }
@media (max-width: 430px) { .mr-header .mr-brand::before { width: 30px; height: 30px; margin-top: -15px; } }
.mr-brand .mr-word { transition: letter-spacing var(--t-panel) var(--ease), color var(--t-comp) var(--ease); }
.mr-brand:hover .mr-word { color: #fff; }

/* mobile sheet: glass panel, a light line along its top, items rise out of their own masks; closing reverses */
/* Part A 2026-10-04: the sheet and every link are readable and clickable on the first frame after the tap; the old
   clip + fade + blur stagger took ~1.1 s (6x CPU) before the last link showed. Motion is a short transform only. */
.mr-menu[open] .mr-menu-panel { animation: fxSheet .24s var(--ease) both; background: linear-gradient(180deg, rgba(14, 12, 22, .98), rgba(7, 6, 11, .99) 40%); }
.mr-menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--fx-a), .9), transparent); transform-origin: center; }
.mr-menu[open] .mr-menu-panel::before { animation: fxGrowX .8s var(--ease) .08s both; transform-origin: center; }
@keyframes fxSheet { from { translate: 0 -6px; } to { translate: 0 0; } }
.mr-menu[open] .mr-menu-panel > * { animation: fxItem .3s var(--ease) both; }
.mr-menu[open] .mr-menu-panel > :nth-child(1) { animation-delay: 0ms; } .mr-menu[open] .mr-menu-panel > :nth-child(2) { animation-delay: 15ms; }
.mr-menu[open] .mr-menu-panel > :nth-child(3) { animation-delay: 30ms; } .mr-menu[open] .mr-menu-panel > :nth-child(4) { animation-delay: 45ms; }
.mr-menu[open] .mr-menu-panel > :nth-child(5) { animation-delay: 60ms; } .mr-menu[open] .mr-menu-panel > :nth-child(6) { animation-delay: 75ms; }
.mr-menu[open] .mr-menu-panel > :nth-child(7) { animation-delay: 90ms; } .mr-menu[open] .mr-menu-panel > :nth-child(8) { animation-delay: 105ms; }
.mr-menu[open] .mr-menu-panel > :nth-child(n+9) { animation-delay: 120ms; }
@keyframes fxItem { from { transform: translateY(6px); } to { transform: none; } }
.mr-menu .mr-menu-panel.is-closing { animation: fxSheetOut .26s var(--ease-std) both; }
.mr-menu .mr-menu-panel.is-closing > * { animation: fxItemOut .2s var(--ease-std) both; }
@keyframes fxSheetOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes fxItemOut { to { opacity: 0; transform: translateY(-6px); } }
.mr-menu-panel a:not(.btn) { position: relative; }
.mr-menu-panel a:not(.btn):active { transform: scale(.99); }

/* 3 · footer: the MAIN wordmark takes a verification sweep when it comes into view (a light band crosses the outline) */
.mr-wordmark::after { content: "MAIN"; position: absolute; inset: 0; pointer-events: none; color: transparent; -webkit-text-stroke: 1.2px rgba(236, 232, 255, .95);
  background: linear-gradient(180deg, rgba(196, 181, 253, .55), rgba(124, 92, 255, .18) 75%); -webkit-background-clip: text; background-clip: text;
  clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 22px rgba(var(--fx-a), .55)); }
.mr-motion .mr-footer.fx-in .mr-wordmark::after { animation: fxWord 2.8s var(--ease-io) .7s both; }
@keyframes fxWord { 0% { clip-path: inset(0 100% 0 0); } 16% { clip-path: inset(0 80% 0 0); } 84% { clip-path: inset(0 0 0 80%); } 100% { clip-path: inset(0 0 0 100%); } }
.mr-footer .cols a:not(.btn) { position: relative; }
.mr-footer .cols a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: rgba(var(--fx-b), .6); transform: scaleX(0); transform-origin: left; transition: transform var(--t-panel) var(--ease); }
.mr-footer .cols a:not(.btn):hover::after { transform: scaleX(1); }

/* 4 · tactile buttons: a light sweep crosses the primary on hover (once on the hero CTA), a pressed state you can feel */
.btn-primary { overflow: hidden; isolation: isolate; }
.btn-primary::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; transform: translateX(-115%);
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .30) 47%, rgba(255, 255, 255, .08) 55%, transparent 70%); }
.btn-primary:hover::before { transform: translateX(115%); transition: transform .85s var(--ease); }
.page-hero .btn-primary::before { animation: fxGlint 1.25s var(--ease-io) 1.15s; }
@keyframes fxGlint { from { transform: translateX(-115%); } to { transform: translateX(115%); } }
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 3px 10px rgba(20, 8, 60, .45), 0 6px 18px -8px rgba(124, 92, 255, .75); }
.btn:not(.btn-primary):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px -16px rgba(var(--fx-a), .6); }

/* 5 · cursor spotlight + border light: one fixed overlay that follows the hovered surface (fine pointers, inner pages) */
.fx-glow { position: fixed; left: 0; top: 0; z-index: 45; width: 0; height: 0; pointer-events: none; border-radius: 16px; contain: layout style; transition: opacity .4s var(--ease-std); }
.mr-motion .fx-glow { opacity: 0; }
.mr-motion .fx-glow.is-on { opacity: 1; }
.fx-glow.is-glide { transition: opacity .4s var(--ease-std), transform .32s var(--ease), width .32s var(--ease), height .32s var(--ease), border-radius .32s var(--ease); }
.fx-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), #fff, rgba(var(--fx-b), .9) 38%, rgba(var(--fx-a), .45) 62%, rgba(var(--fx-a), 0) 85%);
  -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 exclude, linear-gradient(#000 0 0); }
.fx-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: screen; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(var(--fx-a), .17), rgba(var(--fx-a), .05) 40%, rgba(var(--fx-a), 0) 70%); }
.fx-glow.is-big::after { background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(var(--fx-a), .07), rgba(var(--fx-a), 0) 60%); }
/* interactive cards answer the pointer with depth; static surfaces only catch the light */
@media (hover: hover) and (pointer: fine) {
  .sr-pillar a:hover { box-shadow: 0 22px 44px -26px rgba(var(--fx-a), .55), inset 0 1px 0 rgba(255, 255, 255, .05); transform: translateY(-3px); }
  .hw-map li:not(.hw-map-rail) a:hover .hw-map-i { box-shadow: 0 0 0 5px rgba(var(--fx-a), .16), 0 0 22px rgba(var(--fx-a), .55); }
  .dm-bucket:hover { box-shadow: 0 16px 34px -22px rgba(var(--fx-a), .6); }
}

/* 6 · enter animations (motion.js marks only elements fully below the fold; .fx-in on entry, .fx-done after) */
.mr-motion .fx-head.fx-e:not(.fx-in) { clip-path: inset(0 0 100% 0); }
.mr-motion .fx-head.fx-in:not(.fx-done) { animation: fxHead 1s var(--ease) backwards; }
@keyframes fxHead { from { transform: translateY(.4em); opacity: .55; } to { transform: none; opacity: 1; } }
.mr-motion .fx-st.fx-e:not(.fx-in) > * { transform: translateY(10px); }
.mr-motion .fx-st.fx-in:not(.fx-done) > * { animation: fxRise .75s var(--ease) backwards; animation-delay: calc(var(--fx-i, 0) * 65ms); }
@keyframes fxRise { from { opacity: .6; transform: translateY(14px); } }
.mr-motion .fx-pop.fx-e:not(.fx-in) { clip-path: inset(6% 4% 10% 4% round 16px); }
.mr-motion .fx-pop.fx-in:not(.fx-done) { animation: fxPop 1.05s var(--ease) backwards; }
@keyframes fxPop { from { clip-path: inset(6% 4% 10% 4% round 16px); transform: translateY(28px) scale(.985); } to { clip-path: inset(0 0 0 0 round 16px); } }
.mr-motion .fx-land.fx-e:not(.fx-in) { opacity: 0; }
.mr-motion .fx-land.fx-in:not(.fx-done) { animation: fxLand .55s var(--ease) backwards; animation-delay: calc(var(--fx-i, 0) * 90ms + 150ms); }
@keyframes fxLand { from { opacity: 0; transform: translateY(5px) scale(.9); filter: blur(3px); } 60% { filter: none; } }
.mr-motion .fx-ping.fx-in:not(.fx-done) { animation: fxPing 1.4s var(--ease) .2s backwards; }
@keyframes fxPing { 0% { box-shadow: 0 0 0 0 rgba(var(--fx-a), .55); } 100% { box-shadow: 0 0 0 12px rgba(var(--fx-a), 0); } }

/* 7 · the control pulse, refined: a scan line with a bright leading edge; each chip lands as its row is checked */
.mr-motion body:is(.info, [data-mr-page="sample_report_view"], [data-mr-page="demo_open"]) [data-pulse] [data-state].is-checking::after { background: linear-gradient(90deg, transparent 0%, rgba(var(--fx-a), .06) 55%, rgba(var(--fx-b), .38) 97%, transparent 100%); animation: fxScan 620ms var(--ease-io) both; }
@keyframes fxScan { from { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.mr-motion body:is(.info, [data-mr-page="sample_report_view"], [data-mr-page="demo_open"]) [data-pulse] [data-state]:not(tr).is-checking { clip-path: inset(0); }
.mr-motion body:is(.info, [data-mr-page="sample_report_view"], [data-mr-page="demo_open"]) [data-pulse] [data-state].is-checked .st { animation: fxLand .5s var(--ease) backwards; }
.mr-motion .hw-life.is-done li:last-child .st { animation: fxResolve 1.3s var(--ease) .15s backwards; }
@keyframes fxResolve { 0% { box-shadow: 0 0 0 0 rgba(61, 214, 140, .5); } 100% { box-shadow: 0 0 0 10px rgba(61, 214, 140, 0); } }

/* 8 · signals: light travels along every lineage rail and flow while it is in view (.fx-live) */
.lineage-rail::after, .hw-map-rail::after, .pt-consent-steps::after, .sr-path::after, .dm-path::after { content: none; position: absolute; pointer-events: none; border-radius: 2px; }
.mr-motion .lineage-rail.fx-live::after { content: ""; left: 6.25px; width: 3px; top: 10px; height: calc((100% - 20px) * .28); background: linear-gradient(rgba(var(--fx-b), 0), rgba(var(--fx-b), .95) 70%, #fff); filter: drop-shadow(0 0 5px rgba(var(--fx-a), .9)); animation: fxDown 4.2s linear infinite; }
@keyframes fxDown { 0% { transform: translateY(-40%); opacity: 0; } 8% { opacity: 1; } 62% { transform: translateY(257%); opacity: 1; } 70%, 100% { transform: translateY(257%); opacity: 0; } }
.mr-motion .lineage-rail.fx-live > *::before { animation: fxNode 4.2s var(--ease-std) infinite; animation-delay: calc((var(--fx-i, 0) + .5) * 3.131s / var(--fx-n, 1) - .65s); }
@keyframes fxNode { 0%, 12%, 100% { box-shadow: 0 0 0 0 rgba(var(--fx-a), 0); background-color: var(--bg); } 3% { box-shadow: 0 0 0 4px rgba(var(--fx-a), .22), 0 0 14px rgba(var(--fx-b), .7); background-color: rgb(var(--fx-b)); } }
.mr-motion .hw-map ol.fx-live .hw-map-rail::after { content: ""; left: -1px; width: 3px; top: 0; height: 22%; background: linear-gradient(rgba(var(--fx-b), 0), rgba(var(--fx-b), .95) 70%, #fff); filter: drop-shadow(0 0 5px rgba(var(--fx-a), .9)); animation: fxDownMap 7s linear infinite; }
@keyframes fxDownMap { 0% { transform: translateY(-50%); opacity: 0; } 6% { opacity: 1; } 70% { transform: translateY(354%); opacity: 1; } 76%, 100% { transform: translateY(354%); opacity: 0; } }
.mr-motion .hw-map ol.fx-live > li:not(.hw-map-rail) .hw-map-i { animation: fxMapNode 7s var(--ease-std) infinite; animation-delay: calc(var(--fx-i, 0) * .848s - .78s); }
@keyframes fxMapNode { 0%, 10%, 100% { box-shadow: 0 0 0 0 rgba(var(--fx-a), 0); border-color: var(--line-strong); color: var(--lav); } 2.5% { box-shadow: 0 0 0 5px rgba(var(--fx-a), .18), 0 0 20px rgba(var(--fx-b), .55); border-color: rgba(var(--fx-b), .95); color: #fff; } }
@media (min-width: 1100px) {
  .mr-motion .hw-map ol.fx-live .hw-map-rail::after { left: 0; top: -1px; width: 16%; height: 3px; background: linear-gradient(90deg, rgba(var(--fx-b), 0), rgba(var(--fx-b), .95) 70%, #fff); animation-name: fxAcrossMap; }
  .mr-motion .hw-map ol.fx-live > li:not(.hw-map-rail) .hw-map-i { animation-delay: calc(var(--fx-i, 0) * .78s - .51s); }
  @keyframes fxAcrossMap { 0% { transform: translateX(-60%); opacity: 0; } 6% { opacity: 1; } 70% { transform: translateX(525%); opacity: 1; } 76%, 100% { transform: translateX(525%); opacity: 0; } }
}
.mr-motion .pt-consent-steps.fx-live::after { content: ""; left: 6px; width: 3px; top: 22px; height: calc((100% - 44px) * .3); background: linear-gradient(rgba(var(--fx-b), 0), rgba(var(--fx-b), .95) 70%, #fff); filter: drop-shadow(0 0 5px rgba(var(--fx-a), .9)); animation: fxDown 5s linear infinite; }
.mr-motion .pt-consent-steps.fx-live > li::before { animation: fxNode 5s var(--ease-std) infinite; animation-delay: calc((var(--fx-i, 0) + .3) * 3.728s / 3 - .78s); }
.mr-motion .dm-drawer[open] .dm-path::after { content: ""; left: 6.25px; width: 3px; top: 14px; height: calc((100% - 28px) * .3); background: linear-gradient(rgba(var(--fx-b), 0), rgba(var(--fx-b), .95) 70%, #fff); filter: drop-shadow(0 0 5px rgba(var(--fx-a), .9)); animation: fxDown 3.8s linear .7s infinite; }
@media (max-width: 767px) {
  .mr-motion .sr-path.fx-live::after { content: ""; left: 5.25px; width: 3px; top: 14px; height: calc((100% - 28px) * .3); background: linear-gradient(rgba(var(--fx-b), 0), rgba(var(--fx-b), .95) 70%, #fff); filter: drop-shadow(0 0 5px rgba(var(--fx-a), .9)); animation: fxDown 4.2s linear infinite; }
}
/* flows: the stage cards light in turn and the connector between them carries the signal */
.mr-motion .sec-flow.fx-live > li, .mr-motion .pt-flow.fx-live > li, .mr-motion .ab-places.fx-live > li { animation: fxStage 6s var(--ease-std) infinite; animation-delay: calc(var(--fx-i, 0) * 900ms + 400ms); }
@keyframes fxStage { 0%, 16%, 100% { box-shadow: var(--fx-bs, 0 0 0 0 transparent); } 4% { box-shadow: var(--fx-bs, 0 0 0 0 transparent), inset 0 0 0 1px rgba(var(--fx-b), .55), 0 0 32px -6px rgba(var(--fx-a), .55); } }
.pt-flow li.is-you { --fx-bs: var(--e-2); }
.mr-motion .sec-flow.fx-live > li + li::before, .mr-motion .pt-flow.fx-live > li + li::before, .mr-motion .ab-places.fx-live > li + li::after { animation: fxConn 6s var(--ease-std) infinite; animation-delay: calc(var(--fx-i, 0) * 900ms - 120ms + 400ms); }
@keyframes fxConn { 0%, 10%, 100% { filter: none; } 3% { filter: brightness(2.2) drop-shadow(0 0 4px rgba(var(--fx-b), .95)); } }
@media (min-width: 768px) {
  .mr-motion .sr-path.fx-live > .sr-step + .sr-step::before { animation: fxConn 5s var(--ease-std) infinite; animation-delay: calc(var(--fx-i, 0) * 420ms); }
}

/* 9 · section index: an active marker slides to the section you are reading (sample report, security) */
.fx-toc-mark { display: none; }
@media (min-width: 1100px) {
  .fx-toc .fx-toc-mark { display: block; position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 2px; pointer-events: none; background: linear-gradient(rgb(var(--fx-b)), rgb(var(--fx-a)));
    box-shadow: 0 0 12px rgba(var(--fx-a), .8); transform: translateY(var(--fx-y, 0)); transition: transform .55s var(--ease), height .55s var(--ease), opacity .3s var(--ease-std); }
  .mr-motion .fx-toc:not(.fx-has-cur) .fx-toc-mark { opacity: 0; }
}
.fx-toc a[aria-current="location"] { color: var(--text); }
.sec-toc a[aria-current="location"] { border-color: var(--line-strong); }

/* 10 · disclosures open with real height where supported (findings, WIP tables) */
@supports (interpolate-size: allow-keywords) {
  .sr-rec::details-content, .sr-wipp::details-content { height: 0; overflow: clip; transition: height var(--t-panel) var(--ease-io), content-visibility var(--t-panel) allow-discrete; }
  .sr-rec[open]::details-content, .sr-wipp[open]::details-content { height: auto; }
}

/* inner pages: the film grain composites without a blend mode, so ambient motion beneath it never forces a full-viewport
   re-blend every frame (measured: 33 → 16.7 ms/frame on /how-it-works at 1440 in software compositing) */
.fx-inner body::after { mix-blend-mode: normal; opacity: .02; }
@media print { .fx-atmo, .fx-glow, .fx-progress, .mr-brand::before, .mr-wordmark::after { display: none !important; } .mr-header::after { content: none !important; } }
/* ══ /SITE FX ══ */

/* Ask Main bubble on phones never covers content (owner audit 2026-10-03): smaller, the page ends clear of it, and it
   slides out while you scroll down (mr.js toggles .is-tucked), back on scroll up / at rest */
@media (max-width: 767px) {
  .mr-assist { width: 44px; height: 44px; min-height: 44px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mr-motion .mr-assist.is-tucked { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .mr-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* scroll-linked header, hairline and hero drift — driven by mr.js (--sk-hdr 0→1 over 120px, --sk-hair over 220px,
   --sk-vh over one viewport), not CSS scroll timelines: progress-based animations broke tooling that sets
   Animation.currentTime, and this works in every browser */
.mr-header { background: rgba(7, 6, 11, calc(.35 + .47 * var(--sk-hdr, 0))); border-bottom-color: rgba(255, 255, 255, calc(.08 * var(--sk-hdr, 0))); }
.mr-header::after { opacity: calc(.3 + .55 * var(--sk-hair, 0)); transform: scaleX(calc(.35 + .65 * var(--sk-hair, 0))); }
.mr-motion .fx-atmo { transform: translate3d(0, calc(22vh * var(--sk-vh, 0)), 0); }

/* header: Pricing in the nav, a quiet Sign in text link, Start online as the primary CTA (owner 2026-10-03) */
.mr-signin { color: var(--text-2); font-size: 15px; padding: 8px 10px; margin-left: 6px; border-radius: var(--r-pill); white-space: nowrap; transition: color var(--t-micro) var(--ease-std), background-color var(--t-micro) var(--ease-std); }
.mr-signin:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.mr-signin:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
@media (max-width: 1240px) { .mr-nav > a:not(.btn) { display: none; } .mr-nav .mr-menu { display: block; } }
.mr-menu-panel a.mr-menu-alt { margin-top: 10px; }

/* footer legal line: full width, inline links (the footer's own `p` max-width and `a {display:block}` collapsed it) */
.mr-footer .legal-line { max-width: none; margin-top: 48px; }
.mr-footer .legal-line span { min-width: 0; }
.mr-footer .legal-line a { display: inline; padding: 0; transform: none; }

/* phones: the product-window crumb wraps instead of clipping — clipped text still runs under the SAMPLE badge
   (rule 0 5.12 measures text ranges, not boxes) */
@media (max-width: 480px) {
  .pw-bar { flex-wrap: nowrap; align-items: center; }
  .pw-crumb { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; padding-block: 6px; overflow-wrap: anywhere; }
}

/* item 15: the /start fit result scrolls into view below the sticky header */
.sf-result { scroll-margin-top: 96px; }
.sf-result h3:focus { outline: none; }