/* Main Revenue design-v2 — the design system for every public page (owner-approved 2026-10-13, Phase 2).
   Loaded LAST on every marketing page, so its tokens win over site.css / tokens.css / mr.css and every page shares one
   grid, one type scale, one section rhythm and one chrome. Dark only (no light theme anywhere).
   Grid: 12 columns, max 1280px content, 24px gutters, 32px sides (20px ≤ 640px). Spacing 4 8 12 16 24 32 48 64 96 128.
   One section spacing (--section): 88px desktop, 64px phone — two adjacent sections are exactly one --section apart.
   Motion: 120 / 200 / 320 ms, one easing, transform + opacity only (assets/motion.js). Native scrolling only.
   Component classes are prefixed d- so they never collide with the older page vocabulary (.card, .grid, .steps …). */

:root, :root[data-theme], :root[data-theme="light"], :root[data-theme="dark"] {
  --d-bg: #09090d; --d-bg-2: #0e0e14; --d-surface: #121219; --d-raised: #181822;
  --d-line: rgba(255,255,255,.08); --d-line-2: rgba(255,255,255,.14);
  --d-text: #ededf2; --d-muted: #a3a3b2; --d-faint: #8a8a9a;
  --d-accent: #8b5cf6; --d-accent-btn: #7452ff; --d-accent-2: #a78bfa; --d-accent-soft: rgba(139,92,246,.14);
  --d-ok: #34d399; --d-ok-soft: rgba(52,211,153,.12); --d-warn: #fbbf24; --d-warn-soft: rgba(251,191,36,.12); --d-bad: #f87171; --d-bad-soft: rgba(248,113,113,.12);
  --d-section: 88px; --d-gutter: 24px; --d-side: 32px; --d-max: 1280px;
  --d-r-sm: 6px; --d-r: 10px; --d-r-lg: 16px;
  --d-t-fast: 120ms; --d-t: 200ms; --d-t-slow: 320ms; --d-ease: cubic-bezier(.2,.8,.2,1);
  /* the older token names every existing page stylesheet reads, mapped onto the system */
  --bg: var(--d-bg); --surface: var(--d-surface); --elevated: var(--d-raised); --raised: var(--d-raised); --sunken: #060609;
  --surface-1: var(--d-surface); --surface-2: var(--d-raised); --surface-3: #20202c;
  --line: var(--d-line); --line-2: var(--d-line-2); --border: #26263a; --border-strong: #34344c;
  --text: var(--d-text); --text-1: var(--d-text); --text-2: var(--d-muted); --text-3: var(--d-faint); --ink: var(--d-text); --ink-2: var(--d-muted); --ink-3: var(--d-faint);
  --violet: var(--d-accent); --violet-btn: var(--d-accent-btn); --violet-2: var(--d-accent-2); --violet-bg: var(--d-accent-soft);
  --accent-text: #c4b5fd; --accent-subtle: var(--d-accent-soft);
  --green: var(--d-ok); --green-bg: var(--d-ok-soft); --amber: var(--d-warn); --amber-bg: var(--d-warn-soft); --red: var(--d-bad); --red-bg: var(--d-bad-soft);
  --fs-display: 64px; --fs-h1: 64px; --fs-h2: 40px;
  --maxw: var(--d-max); --gutter: var(--d-side); --header: 64px;
  color-scheme: dark;
}
@media (max-width: 640px) {
  :root, :root[data-theme] { --d-section: 64px; --d-side: 20px; --d-gutter: 16px; --fs-display: 40px; --fs-h1: 40px; --fs-h2: 30px; }
}

html { background: var(--d-bg); scroll-behavior: auto; }
body { background: var(--d-bg); color: var(--d-text); font: 400 17px/28px var(--font); -webkit-font-smoothing: antialiased; }
@media (max-width: 640px) { body { font-size: 16px; line-height: 26px; } }

/* ── grid + rhythm ───────────────────────────────────────────────── */
.wrap { max-width: calc(var(--d-max) + 2 * var(--d-side)); margin-inline: auto; padding-inline: var(--d-side); }
.d-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--d-gutter); row-gap: 48px; align-items: center; }
.d-grid.top { align-items: start; }
.d-c12 { grid-column: span 12; } .d-c8 { grid-column: span 8; } .d-c7 { grid-column: span 7; } .d-c6 { grid-column: span 6; } .d-c5 { grid-column: span 5; } .d-c4 { grid-column: span 4; } .d-c3 { grid-column: span 3; }
@media (max-width: 960px) { .d-c8, .d-c7, .d-c6, .d-c5, .d-c4, .d-c3 { grid-column: span 12; } }
main > section, main > .d-sec { padding-block: calc(var(--d-section) / 2); }
main > section.d-band, .d-band { background: var(--d-bg-2); border-block: 1px solid var(--d-line); }
main > section:first-child { padding-top: 72px; }
@media (max-width: 960px) { main > section:first-child { padding-top: 48px; } }

/* ── type ────────────────────────────────────────────────────────── */
.d-display, main h1 { font: 600 var(--fs-display)/1.06 var(--font); letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.d-h2, main h2 { font: 600 var(--fs-h2)/1.1 var(--font); letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.d-h3, main h3 { font: 600 20px/28px var(--font); letter-spacing: -0.01em; margin: 0; }
.lede, .d-lede { font-size: 19px; line-height: 30px; color: var(--d-muted); max-width: 34em; margin: 24px 0 0; }
@media (max-width: 640px) { .lede, .d-lede { font-size: 17px; line-height: 27px; } }
.d-body { color: var(--d-muted); margin: 12px 0 0; }
.small { font-size: 14px; line-height: 22px; } .muted { color: var(--d-muted); }
.eyebrow, .d-label { font: 500 12px/16px var(--ui-sans);   color: var(--d-accent-2); display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.eyebrow::before, .d-label::before { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .6; }
.d-head { display: grid; gap: 16px; max-width: 720px; }
.d-head .lede, .d-head .d-lede { margin-top: 0; }
.d-head.center { margin-inline: auto; justify-items: center; text-align: center; }
.d-head.center .lede { margin-inline: auto; }
.num, .d-num { font-variant-numeric: tabular-nums; }
.d-mono { font-family: var(--ui-sans); font-variant-numeric: tabular-nums; }

/* older page heads, on the same scale */
.page-hero { padding: 72px 0 calc(var(--d-section) / 2) !important; }
@media (max-width: 960px) { .page-hero { padding-top: 48px !important; } }
.page-hero h1 { margin-top: 20px; }
.page-hero .lede { max-width: 38em; }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.sec-head .lede { margin-top: 0; }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: 999px; font: 500 15px/1 var(--font);
  text-decoration: none; border: 1px solid var(--d-line-2); color: var(--d-text); background: transparent; cursor: pointer;
  transition: background-color var(--d-t) var(--d-ease), border-color var(--d-t) var(--d-ease), transform var(--d-t-fast) var(--d-ease); }
.btn:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.24); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--d-accent-btn); border-color: transparent; color: #fff; }
.btn-primary:hover { background: #6a45ff; border-color: transparent; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
.d-btns, .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
:focus-visible { outline: 2px solid var(--d-accent-2); outline-offset: 2px; }

/* ── chips + small parts ─────────────────────────────────────────── */
.d-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; border-radius: 999px; font: 500 12px/1 var(--font); border: 1px solid var(--d-line-2); color: var(--d-muted); white-space: nowrap; }
.d-chip.ok { color: var(--d-ok); background: var(--d-ok-soft); border-color: transparent; }
.d-chip.warn { color: var(--d-warn); background: var(--d-warn-soft); border-color: transparent; }
.d-chip.bad { color: var(--d-bad); background: var(--d-bad-soft); border-color: transparent; }
.d-chip.accent { color: var(--d-accent-2); background: var(--d-accent-soft); border-color: transparent; }
.d-sample { font: 500 12px/1 var(--ui-sans);  color: var(--d-warn); border: 1px solid rgba(251,191,36,.35); border-radius: 4px; padding: 3px 6px; }
.d-card { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r-lg); padding: 32px; min-width: 0; }
.d-card.pad-s { padding: 20px 24px; }
.d-cards { display: grid; gap: var(--d-gutter); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.d-list { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.d-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--d-muted); }
.d-list li::before { content: ''; width: 8px; height: 8px; margin-top: 10px; border-radius: 2px; background: var(--d-accent-2); }
.d-anno { font: 400 12px/16px var(--ui-sans); color: var(--d-faint); margin: 12px 0 0; }

/* ── header (classes kept: tests select .mr-nav, .mr-signin, .mr-brand, .mr-word) ── */
.mr-header { position: sticky; top: 0; z-index: 50; height: 64px; background: rgba(9,9,13,.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--d-line); }
.mr-header::before, .mr-header::after { content: none !important; display: none !important; }
.mr-header .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.mr-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--d-text); flex: none; }
.mr-brand::before { content: none !important; }
.mr-brand .mr-logo { width: 28px; height: 28px; border-radius: 7px; background: #000; }
.mr-word { font: 700 17px/1 "Familjen Grotesk", var(--font); letter-spacing: -0.02em; color: var(--d-text); }
.mr-nav { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.mr-nav > .ds-links { display: flex; gap: 24px; font-size: 14px; }
.mr-nav > .ds-links a { color: var(--d-muted); text-decoration: none; transition: color var(--d-t) var(--d-ease); }
.mr-nav > .ds-links a:hover, .mr-nav > .ds-links a[aria-current="page"] { color: var(--d-text); }
.mr-nav > .ds-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mr-signin { color: var(--d-muted); text-decoration: none; font-size: 14px; padding: 0 4px; }
.mr-signin:hover { color: var(--d-text); }
.mr-menu { display: none; margin-left: auto; position: relative; }
.mr-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--d-line-2); border-radius: 999px; font-size: 14px; color: var(--d-text); }
.mr-menu > summary::-webkit-details-marker { display: none; }
.mr-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 40px)); display: grid; gap: 4px; padding: 12px; background: var(--d-surface); border: 1px solid var(--d-line-2); border-radius: var(--d-r-lg); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.mr-menu-panel a:not(.btn) { color: var(--d-text); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: 15px; }
.mr-menu-panel a:not(.btn):hover { background: rgba(255,255,255,.04); }
.mr-menu-panel .btn { margin-top: 8px; }
@media (max-width: 1100px) { .mr-nav > .ds-links { display: none; } }
@media (max-width: 760px) { .mr-nav > .ds-cta { display: none; } .mr-menu { display: block; } }

/* ── footer ──────────────────────────────────────────────────────── */
.mr-footer { border-top: 1px solid var(--d-line); padding: calc(var(--d-section) / 2) 0 64px; color: var(--d-muted); font-size: 14px; background: var(--d-bg); position: relative; overflow: hidden; }
.mr-footer .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--d-gutter); row-gap: 32px; align-items: start; }
.mr-footer .cols > .foot-lead { grid-column: span 4; } .mr-footer .cols > div:not(.foot-lead) { grid-column: span 2; display: grid; gap: 8px; align-content: start; }
.mr-footer .cols > div:last-child { grid-column: span 4; }
@media (max-width: 960px) { .mr-footer .cols > .foot-lead, .mr-footer .cols > div:last-child { grid-column: span 12; } .mr-footer .cols > div:not(.foot-lead) { grid-column: span 6; } .mr-footer .cols > div:last-child { grid-column: span 12; } }
.mr-footer h4 { color: var(--d-text); font: 500 13px/20px var(--font); margin: 0 0 4px; }
.mr-footer a { color: var(--d-muted); text-decoration: none; } .mr-footer a:hover { color: var(--d-text); }
.mr-footer .foot-lead p { margin: 12px 0 0; max-width: 32em; }
.mr-footer .foot-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.mr-footer .foot-cta .btn-primary { color: #fff; }
.mr-footer .foot-note { color: var(--d-faint); font-size: 13px; line-height: 20px; margin: 8px 0 0; }
.mr-footer .legal-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--d-line); font-size: 13px; color: var(--d-faint); }
.mr-wordmark { display: none !important; }

/* ── product UI frame (SAMPLE data) ──────────────────────────────── */
.d-app { background: var(--d-surface); border: 1px solid var(--d-line-2); border-radius: var(--d-r-lg); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02); min-width: 0; }
.d-app-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--d-line); font-size: 13px; color: var(--d-muted); }
.d-dots { display: flex; gap: 6px; } .d-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a35; display: block; }
.d-crumb { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-crumb b { color: var(--d-text); font-weight: 500; }
.d-app-body { padding: 24px; display: grid; gap: 16px; }
@media (max-width: 640px) { .d-app-body { padding: 16px; } }
.d-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .d-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-tot { background: var(--d-raised); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 12px 16px; min-width: 0; }
.d-tot p { margin: 0; } .d-tot .k { font-size: 12px; line-height: 16px; color: var(--d-muted); } .d-tot .v { font: 600 20px/28px var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 2px; } .d-tot .n { font-size: 12px; color: var(--d-faint); }
.d-coverage { font: 400 12px/18px var(--ui-sans); color: var(--d-faint); margin: 0; }
.d-rows { border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.d-row { display: grid; grid-template-columns: 1.1fr 2.6fr .9fr 1fr; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--d-line); font-size: 13px; line-height: 20px; }
.d-row:first-child { border-top: 0; }
.d-row.head { font: 500 12px/16px var(--ui-sans);   color: var(--d-faint); background: var(--d-raised); }
.d-row .amt { text-align: right; font: 500 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.d-row .t { color: var(--d-text); } .d-row .p { color: var(--d-muted); }
.d-row.hot { background: linear-gradient(90deg, var(--d-accent-soft), transparent 70%); }
@media (max-width: 640px) { .d-row { grid-template-columns: 1fr auto; } .d-row .p, .d-row .hide-s { display: none; } .d-row.head { display: none; } }
.d-src { border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-raised); padding: 16px; min-width: 0; }
.d-src .say { font-size: 12px; line-height: 16px; color: var(--d-muted); margin: 0 0 6px; }
.d-src .file { font: 400 12px/18px var(--cite); color: var(--d-faint); margin: 8px 0 0; overflow-wrap: anywhere; }
.d-srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .d-srcs { grid-template-columns: 1fr; } }
.d-sheet { font: 400 12px/18px var(--ui-sans); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.d-sheet .r { display: grid; grid-template-columns: 40px 70px 70px minmax(0, 1fr) 110px; border-top: 1px solid var(--d-line); }
.d-sheet .r > span { padding: 6px 10px; border-left: 1px solid var(--d-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-sheet .r > span:first-child { border-left: 0; color: var(--d-faint); text-align: right; }
.d-sheet .r > span:last-child { text-align: right; }
.d-sheet .r.h { background: var(--d-raised); color: var(--d-faint); border-top: 0; }
.d-sheet .r.on { background: rgba(251,191,36,.10); box-shadow: inset 2px 0 0 var(--d-warn); }
.d-sheet .r.on > span { color: #fde68a; }
@media (max-width: 640px) { .d-sheet .r { grid-template-columns: 34px 64px minmax(0, 1fr) 96px; } .d-sheet .r > span:nth-child(2) { display: none; } }
.d-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.d-stage { border-radius: var(--d-r-sm); padding: 8px 10px; font-size: 12px; line-height: 16px; border: 1px solid var(--d-line); background: var(--d-raised); color: var(--d-muted); min-width: 0; }
.d-stage b { display: block; color: var(--d-text); font-weight: 500; }
.d-stage.v { border-color: rgba(52,211,153,.35); } .d-stage.v b::after { content: ' ✓'; color: var(--d-ok); }
.d-stage.miss { border-style: dashed; border-color: rgba(248,113,113,.5); color: var(--d-bad); }
.d-stage.now { box-shadow: 0 0 0 1px var(--d-accent) inset; }
@media (max-width: 640px) { .d-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d-stage { padding: 6px 8px; } }
.d-wip { width: 100%; border-collapse: collapse; font-size: 12px; }
.d-wip th, .d-wip td { padding: 8px 10px; border-top: 1px solid var(--d-line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-wip th { font: 500 12px/16px var(--ui-sans);   color: var(--d-faint); background: var(--d-raised); border-top: 0; }
.d-wip td:first-child, .d-wip th:first-child { text-align: left; }
.d-scroll-x { overflow-x: auto; }
.d-tr { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--d-line); }
.d-tr:first-child { border-top: 0; padding-top: 0; }
.d-tr-h { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }

/* ── page sections ───────────────────────────────────────────────── */
.d-hero { padding-block: 48px 24px !important; }   /* the hero sits one tight step above the first section (owner: tighten the gap) */
@media (max-width: 960px) { .d-hero { padding-top: 48px !important; } }
.d-hero + section { padding-top: 24px; }
.d-hero-art { width: 100%; height: auto; display: block; justify-self: stretch; }
.d-hero .d-grid { align-items: center; }
.d-shot { margin-top: 48px; }
.d-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--d-gutter); align-items: start; }
@media (max-width: 960px) { .d-compare { grid-template-columns: 1fr; } }
.d-compare .side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.d-tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--d-line); border-radius: 999px; background: var(--d-surface); width: max-content; max-width: 100%; overflow-x: auto; }
.d-tabs button { appearance: none; border: 0; background: transparent; font: inherit; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--d-muted); white-space: nowrap; cursor: pointer; transition: background-color var(--d-t) var(--d-ease), color var(--d-t) var(--d-ease); }
.d-tabs button[aria-selected="true"] { background: var(--d-raised); color: var(--d-text); box-shadow: 0 0 0 1px var(--d-line-2) inset; }
.d-panel[hidden] { display: none; }
.d-steps { display: grid; gap: var(--d-gutter); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .d-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .d-steps { grid-template-columns: 1fr; } }
.d-step { border-top: 1px solid var(--d-line-2); padding-top: 16px; }
.d-step .n { font: 500 12px/16px var(--ui-sans); color: var(--d-accent-2); margin: 0; }
.d-step h3 { margin-top: 8px; }
.d-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-gutter); margin-top: 48px; }
@media (max-width: 960px) { .d-trust { grid-template-columns: 1fr; } }
.d-trust .d-card { padding: 24px; } .d-trust .d-card h3 { font-size: 17px; } .d-trust .d-card p { margin: 8px 0 0; color: var(--d-muted); font-size: 15px; line-height: 24px; }
.d-cta { border: 1px solid var(--d-line-2); border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,.22), transparent 60%), var(--d-surface); padding: 64px; }
@media (max-width: 640px) { .d-cta { padding: 32px 24px; } }
.d-cta .d-btns { margin: 0; justify-content: flex-end; }
@media (max-width: 960px) { .d-cta .d-btns { justify-content: flex-start; } }
.d-faq { display: grid; gap: 12px; }
.d-faq .d-card h3 { font-size: 17px; }

.ds-motion [data-d-in] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--d-t-slow) var(--d-ease), transform var(--d-t-slow) var(--d-ease); }
.ds-motion [data-d-in].is-in { opacity: 1; transform: none; }
/* The from-state above exists only under .ds-motion, which motion.js sets after its reduced-motion exit and only for
   elements below the fold, so without JS or with reduced motion everything is in its final state. The older .mr-motion
   hooks are never set any more (those pages render final). */
.d-panel.is-enter { animation: d-fade var(--d-t) var(--d-ease) both; }
@keyframes d-fade { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ds-motion [data-d-in] { opacity: 1; transform: none; }
}

@media print { .mr-header, .mr-footer, .mr-assist { display: none !important; } body { background: #fff; color: #000; } }

/* ── older page layers brought onto the system ──────────────────── */
/* no decorative atmosphere: the system has none (glows, grids, cursor light) */
.page-hero::before, .page-hero::after { content: none !important; }
.fx-atmo, .fx-glow, .fx-progress { display: none !important; }
/* side-by-side text + product card: the text column starts at the TOP of the card (owner change 3, every page) */
.hw-step, .split, .grid-2 { align-items: start !important; }

/* ── pricing (owner pricing 2026-10-13): founding banner, lines under the cards, partner price ── */
.pc-founding { margin: 24px 0 0; padding: 14px 18px; border: 1px solid rgba(139,92,246,.45); border-radius: var(--d-r); background: var(--d-accent-soft); color: var(--d-text); font-size: 15px; line-height: 24px; }
.pc-founding[data-founding-state="full"] { border-color: var(--d-line-2); background: var(--d-surface); color: var(--d-muted); }
.pc-lines { display: grid; gap: 8px; margin: 20px 0 0; font-size: 15px; line-height: 24px; color: var(--d-muted); }
.pc-lines p { margin: 0; } .pc-lines strong { color: var(--d-text); font-weight: 500; }
.pt-price { margin-top: 24px; padding: 24px; border-radius: var(--d-r-lg); border: 1px solid var(--d-line); display: grid; gap: 8px; }
.pt-price p { margin: 0; } .pt-price-v { font: 600 28px/1.2 var(--font); letter-spacing: -0.02em; }
.pt-price-v .num { font-size: 36px; }

/* ══ homepage v3 visual system (owner brief 2026-10-13, Phase 2) — extends the tokens above for every page ══
   Base near-black with a slight blue; two surface steps; 1px white-8% borders; money green = recovered/positive only,
   amber = at risk, brand violet = actions. One restrained glow behind the hero mock and the final CTA. */
:root, :root[data-theme], :root[data-theme="light"], :root[data-theme="dark"] {
  --d-bg: #0a0d12; --d-bg-2: #0e1219; --d-surface: #121722; --d-raised: #182030;
  --d-line: rgba(255,255,255,.08); --d-line-2: rgba(255,255,255,.14);
  --d-text: #eef0f5; --d-muted: #a5acbb; --d-faint: #8b93a5;
  --d-money: #3ddc97; --d-money-soft: rgba(61,220,151,.12); --d-risk: #f5b547; --d-risk-soft: rgba(245,181,71,.12);
  --d-max: 1200px; --d-side: 24px; --d-gutter: 24px;
  --d-pad: clamp(64px, 8vw, 120px);
  --d-r-card: 16px; --d-r-btn: 10px;
  --d-ease-out: cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 480px) { :root, :root[data-theme] { --d-side: 16px; } }
html, body { background: var(--d-bg); }
p { text-wrap: pretty; }
h1, h2, h3, .d-display, .d-h2, .d-h3 { text-wrap: balance; }

/* buttons: 48px desktop / 52px phone, radius 10, primary with a slight gradient + 1px top highlight, hover lift */
.btn { min-height: 48px; border-radius: var(--d-r-btn); padding: 0 22px; font-size: 15px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 640px) { .btn { min-height: 52px; } .btn-sm { min-height: 44px; } }
.btn-primary { background: linear-gradient(180deg, #8467ff 0%, #6a45ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.4); }
.btn-primary:hover { background: linear-gradient(180deg, #8f74ff 0%, #7150ff 100%); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 24px -8px rgba(116,82,255,.6); } }
.btn:active { transform: translateY(0) scale(.98); }

/* sticky glass nav */
.mr-header { background: rgba(10,13,18,.72); }
.mr-header.is-scrolled { background: rgba(10,13,18,.86); border-bottom-color: var(--d-line-2); }
.mr-burger { display: inline-grid; gap: 4px; width: 16px; } .mr-burger i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--d-t) var(--d-ease), opacity var(--d-t) var(--d-ease); }
.mr-menu[open] .mr-burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .mr-menu[open] .mr-burger i:nth-child(2) { transform: scaleX(0); } .mr-menu[open] .mr-burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 900px) {
  .mr-nav > .ds-links, .mr-nav > .ds-cta { display: none; }
  .mr-menu { display: block; margin-left: auto; }
  .mr-menu > summary { min-height: 44px; min-width: 44px; padding: 0 14px; }
  /* full-height sheet under the header; 48px tap targets */
  .mr-menu-panel { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--d-line); padding: 12px var(--d-side) calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--d-bg); overflow-y: auto; align-content: start; gap: 2px; animation: d-sheet var(--d-t-slow) var(--d-ease-out) both; }
  .mr-menu-panel a:not(.btn) { min-height: 48px; display: flex; align-items: center; font-size: 17px; padding: 0 4px; border-bottom: 1px solid var(--d-line); border-radius: 0; }
  .mr-menu-ctas { display: grid; gap: 10px; margin-top: 20px; } .mr-menu-ctas .btn { width: 100%; margin: 0; }
}
@keyframes d-sheet { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }

/* ══ homepage v3 sections (d3-) ══ */
main > section { padding-block: calc(var(--d-pad) / 2); }
main > section.d3-hero { padding-block: 48px 32px !important; }
.d3-ico { width: 28px; height: 28px; fill: none; stroke: var(--d-accent-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* hero */
.d3-hero { position: relative; overflow: hidden; }
.d3-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent); }
.d3-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 960px) { .d3-hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.d3-h1 { font: 600 clamp(48px, 7.2vw, 92px)/.98 var(--font); letter-spacing: -0.03em; margin: 20px 0 0; display: grid; }
.d3-l { display: block; animation: d3-in 700ms var(--d-ease-out) both; animation-delay: calc(80ms * var(--i)); }
.d3-l-accent { background: linear-gradient(90deg, #fff 0%, #c4b5fd 55%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes d3-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.d3-sub { font-size: 19px; line-height: 30px; color: var(--d-muted); max-width: 33em; margin: 24px 0 0; }
@media (max-width: 640px) { .d3-sub { font-size: 17px; line-height: 27px; } }
.d3-micro { margin: 16px 0 0; font-size: 14px; line-height: 22px; color: var(--d-faint); }

.d3-mock { position: relative; margin: 0; min-width: 0; }
.d3-glow { position: absolute; inset: -18% -12%; z-index: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(116,82,255,.26), transparent 70%); }
.d3-panel { position: relative; z-index: 1; box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
.d3-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.d3-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-raised); min-height: 64px; }
.d3-row-k { display: grid; gap: 2px; font-size: 14px; line-height: 20px; color: var(--d-text); min-width: 0; }
.d3-row-k .small { font-size: 12px; line-height: 16px; }
.d3-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--d-risk); }
.d3-dot.ok { background: var(--d-risk); box-shadow: 0 0 0 3px var(--d-risk-soft); } .d3-dot.warn { background: var(--d-muted); }
.d3-amt { font: 600 18px/1 var(--font); color: var(--d-risk); white-space: nowrap; min-width: 9.5ch; text-align: right; }
.d3-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; font-size: 12px; line-height: 16px; color: var(--d-faint); }
.d3-toast { position: absolute; z-index: 2; right: -12px; top: -22px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(24,32,48,.92); border: 1px solid var(--d-line-2); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); font-size: 13px; line-height: 18px; }
.d3-toast-i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--d-money-soft); }
.d3-toast-i svg { width: 14px; height: 14px; fill: none; stroke: var(--d-money); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .d3-toast { right: 8px; top: -18px; } }
/* the loop: rows slide in one by one, the toast pops, hold, fade; ~8 s. Final frame = everything visible (static under reduced motion / paused) */
/* the loop runs only once motion.js marks the mock live (no JS → the static final state), and rows dim, never vanish */
.d3-mock.is-live .d3-row { animation: d3-row 8s var(--d-ease-out) infinite both; animation-delay: calc(var(--r) * 450ms); }
.d3-mock.is-live .d3-toast { animation: d3-toast 8s var(--d-ease-out) infinite both; }
@keyframes d3-row { 0% { opacity: .25; transform: translate3d(0, 12px, 0); } 7%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: .25; transform: none; } }
@keyframes d3-toast { 0%, 22% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.98); } 30%, 86% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.d3-mock.is-paused .d3-row, .d3-mock.is-paused .d3-toast { animation-play-state: paused; }

/* stat strip */
.d3-stats { padding-block: 8px 24px !important; }
.d3-stat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-surface); }
.d3-stat { padding: 24px; border-left: 1px solid var(--d-line); min-width: 0; } .d3-stat:first-child { border-left: 0; }
.d3-stat-k { margin: 0; font: 600 26px/1.15 var(--font); letter-spacing: -0.02em; color: var(--d-text); }
.d3-stat-k .num { display: inline-block; min-width: 1ch; }
.d3-stat-v { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--d-muted); }
@media (max-width: 960px) { .d3-stat-row { grid-template-columns: 1fr 1fr; } .d3-stat:nth-child(3) { border-left: 0; } .d3-stat:nth-child(n+3) { border-top: 1px solid var(--d-line); } }
@media (max-width: 480px) { .d3-stat-row { grid-template-columns: 1fr; } .d3-stat { border-left: 0; } .d3-stat + .d3-stat { border-top: 1px solid var(--d-line); } }

/* the leak: flow */
.d3-flow { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.d3-flow li { position: relative; display: grid; gap: 10px; padding: 18px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-surface); font-size: 15px; line-height: 22px; color: var(--d-text); }
.d3-flow li.is-risk { border-color: rgba(245,181,71,.35); background: linear-gradient(180deg, rgba(245,181,71,.06), transparent), var(--d-surface); }
.d3-flow-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--d-line-2); font-size: 13px; color: var(--d-muted); }
.d3-flow li.is-risk .d3-flow-n { border-color: rgba(245,181,71,.5); color: var(--d-risk); }
@media (max-width: 960px) { .d3-flow { grid-template-columns: 1fr; } .d3-flow li { grid-template-columns: 28px 1fr; align-items: center; } }

/* what it finds: sticky story on desktop */
.d3-finds-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.d3-sticky { position: sticky; top: 104px; }
.d3-finds-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; }
.d3-finds-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; color: var(--d-muted); transition: background-color var(--d-t) var(--d-ease), border-color var(--d-t) var(--d-ease), color var(--d-t) var(--d-ease); }
.d3-finds-list li.is-active { background: var(--d-surface); border-color: var(--d-line-2); color: var(--d-text); }
.d3-finds-list b { display: block; font-weight: 600; color: var(--d-text); }
.d3-finds-p { display: block; font-size: 14px; line-height: 21px; margin-top: 4px; }
.d3-n { font: 500 13px/24px var(--ui-sans); color: var(--d-accent-2); }
.d3-finds-vis { display: grid; gap: 24px; }
.d3-find { min-height: 62vh; display: grid; align-content: center; }
.d3-find-mob { display: none; margin: 0 0 12px; color: var(--d-muted); font-size: 15px; line-height: 23px; } .d3-find-mob b { color: var(--d-text); }
.d3-q { margin: 0; font: 600 17px/26px var(--font); color: var(--d-text); }
.d3-pm-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-width: 1025px) { .js-story .d3-find { opacity: .28; transform: scale(.985); transition: opacity var(--d-t-slow) var(--d-ease), transform var(--d-t-slow) var(--d-ease); } .js-story .d3-find[data-active] { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .d3-finds-grid { grid-template-columns: 1fr; gap: 24px; } .d3-sticky { position: static; } .d3-finds-list { display: none; } .d3-find { min-height: 0; } .d3-find-mob { display: block; } }

/* sample before → after */
.d3-case-track { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.d3-case-s { position: relative; display: grid; gap: 6px; padding: 20px 18px; border-radius: var(--d-r-card); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 15px; line-height: 22px; }
.d3-case-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--d-muted); }
.d3-case-s.is-v .d3-case-dot { background: var(--d-text); } .d3-case-s.is-m { border-color: rgba(245,181,71,.4); } .d3-case-s.is-m .d3-case-dot { background: var(--d-risk); }
.d3-case-s.is-f { border-color: rgba(167,139,250,.45); } .d3-case-s.is-f .d3-case-dot { background: var(--d-accent-2); }
.d3-case-s.is-i { border-style: dashed; } .d3-case-s.is-i .d3-case-dot { background: var(--d-money); }
.d3-case-cta { margin: 24px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 960px) { .d3-case-track { grid-template-columns: 1fr; } }

/* old way vs Main Revenue */
.d3-cmp { margin-top: 40px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); overflow: hidden; background: var(--d-surface); }
.d3-cmp-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr); gap: 16px; padding: 16px 24px; border-top: 1px solid var(--d-line); font-size: 15px; line-height: 23px; align-items: start; }
.d3-cmp-r:first-child { border-top: 0; }
.d3-cmp-h { background: var(--d-raised); font: 500 12px/16px var(--ui-sans);   color: var(--d-faint); }
.d3-cmp-k { color: var(--d-text); font-weight: 600; }
.d3-cmp-o { color: var(--d-faint); display: grid; grid-template-columns: 18px 1fr; gap: 8px; } .d3-cmp-m { color: var(--d-text); display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.d3-x svg, .d3-v svg { width: 16px; height: 16px; margin-top: 4px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d3-x svg { stroke: var(--d-faint); } .d3-v svg { stroke: var(--d-money); }
@media (max-width: 760px) { .d3-cmp { border: 0; background: none; display: grid; gap: 12px; } .d3-cmp-h { display: none; }
  .d3-cmp-r { grid-template-columns: 1fr; gap: 8px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-surface); padding: 18px; } }

/* how it works: horizontal track, the line draws in (scaleX on a pseudo-element) */
.d3-steps { position: relative; list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.d3-steps::before { content: ''; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: linear-gradient(90deg, var(--d-accent-2), rgba(167,139,250,.15)); transform-origin: 0 50%; }
.ds-motion .d3-steps[data-d-in]::before { transform: scaleX(0); transition: transform calc(var(--m-slow) * 1.05) var(--m-ease) var(--m-fast); } .ds-motion .d3-steps[data-d-in].is-in::before { transform: scaleX(1); }
.d3-steps li { position: relative; min-width: 0; }
.d3-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--d-bg); border: 1px solid var(--d-accent-2); color: var(--d-text); font-size: 14px; }
.d3-step-d { margin: 16px 0 0; font: 500 12px/16px var(--ui-sans);   color: var(--d-accent-2); }
.d3-steps h3 { margin-top: 8px; }
@media (max-width: 960px) { .d3-steps { grid-template-columns: 1fr; gap: 28px; padding-left: 0; } .d3-steps::before { left: 18px; right: auto; top: 18px; bottom: 18px; width: 1px; height: auto; transform-origin: 50% 0; background: linear-gradient(180deg, var(--d-accent-2), rgba(167,139,250,.15)); }
  .ds-motion .d3-steps[data-d-in]::before { transform: scaleY(0); } .ds-motion .d3-steps[data-d-in].is-in::before { transform: scaleY(1); }
  .d3-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; } .d3-steps li > :not(.d3-step-n) { grid-column: 2; } .d3-step-d { margin-top: 8px; } }

/* trades */
.d3-trade-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-gutter); }
.d3-trade { padding: 24px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-surface); min-width: 0; transition: transform var(--d-t) var(--d-ease), border-color var(--d-t) var(--d-ease); }
.d3-trade h3 { margin-top: 16px; font-size: 18px; }
@media (hover: hover) { .d3-trade:hover, .d3-price:hover { transform: translateY(-2px); border-color: var(--d-line-2); } }
@media (max-width: 960px) { .d3-trade-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .d3-trade-grid { gap: 12px; } .d3-trade { padding: 18px; } .d3-trade .d-body { font-size: 15px; line-height: 23px; } }

/* pricing teaser + refund callout */
.d3-promise { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; margin: 40px auto 0; max-width: 880px; padding: 20px 24px; border: 1px solid rgba(61,220,151,.4); border-radius: var(--d-r-card); background: linear-gradient(180deg, var(--d-money-soft), transparent), var(--d-surface); }
.d3-promise p { margin: 0; font-size: 15px; line-height: 24px; } .d3-promise strong { color: var(--d-text); font-size: 17px; }
.d3-promise-i svg { width: 32px; height: 32px; fill: none; stroke: var(--d-money); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d3-price-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-gutter); }
.d3-price { padding: 28px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-surface); transition: transform var(--d-t) var(--d-ease), border-color var(--d-t) var(--d-ease); }
.d3-price.is-hot { border-color: rgba(139,92,246,.55); box-shadow: 0 30px 80px -40px rgba(116,82,255,.55); }
.d3-price-n { margin: 0; font-weight: 600; color: var(--d-text); } .d3-price-v { margin: 10px 0 0; display: flex; align-items: baseline; gap: 6px; }
.d3-price-v .num { font: 600 40px/1 var(--font); letter-spacing: -0.03em; } .d3-price-u { color: var(--d-muted); font-size: 15px; }
.d3-price-more { margin: 24px 0 0; text-align: center; color: var(--d-muted); font-size: 15px; line-height: 24px; }
@media (max-width: 960px) { .d3-price-grid { grid-template-columns: 1fr; } }

/* exports strip */
.d3-exports { padding-block: 24px !important; }
.d3-ex { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 32px; align-items: center; padding: 20px 28px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-surface); }
.d3-ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font: 600 17px/24px var(--font); color: var(--d-text); }
.d3-ex-note { margin: 0; color: var(--d-money); font-size: 14px; font-weight: 500; white-space: nowrap; }
@media (max-width: 960px) { .d3-ex { grid-template-columns: 1fr; } .d3-ex-note { white-space: normal; } }

/* FAQ: grid-template-rows 0fr → 1fr */
.d3-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .d3-faq-grid { grid-template-columns: 1fr; gap: 24px; } }
.d3-faq-list { display: grid; gap: 10px; }
.d3-qa { border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-surface); }
.d3-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 14px 20px; font-weight: 600; color: var(--d-text); }
.d3-qa summary::-webkit-details-marker { display: none; }
.d3-qa-i { position: relative; width: 14px; height: 14px; flex: none; } .d3-qa-i::before, .d3-qa-i::after { content: ''; position: absolute; left: 0; right: 0; top: 6.5px; height: 1.5px; background: var(--d-muted); transition: transform var(--d-t) var(--d-ease); }
.d3-qa-i::after { transform: rotate(90deg); } .d3-qa[open] .d3-qa-i::after { transform: rotate(0deg); }
.d3-qa-a { display: grid; grid-template-rows: 1fr; } .d3-qa-a > div { overflow: hidden; } .d3-qa-a p { margin: 0; padding: 0 20px 18px; color: var(--d-muted); }
@supports (interpolate-size: allow-keywords) { .d3-qa { interpolate-size: allow-keywords; } .d3-qa::details-content { transition: opacity var(--d-t-slow) var(--d-ease-out), translate var(--d-t-slow) var(--d-ease-out), content-visibility var(--d-t-slow) allow-discrete; } .ds-motion .d3-qa:not([open])::details-content { opacity: 0; translate: 0 -4px; } }

/* final CTA band */
.d3-close-band { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px); border: 1px solid var(--d-line-2); border-radius: 24px; background: var(--d-surface); }
.d3-close-band > :not(.d3-glow) { position: relative; z-index: 1; }
.d3-close-band .d3-glow { inset: -40% -10% auto; height: 120%; }
.d3-close-h { margin: 0 auto; max-width: 18ch; font: 600 clamp(32px, 4.6vw, 56px)/1.06 var(--font); letter-spacing: -0.03em; }
.d3-close-band .d-lede { margin-inline: auto; } .d3-close-band .d-btns { justify-content: center; }

/* counters + reveals reuse .ds-motion [data-d-in] (fade up 16px, 600 ms, stagger via --i) */
.ds-motion [data-d-in] { transition-duration: 600ms; transition-timing-function: var(--d-ease-out); transition-delay: calc(60ms * var(--i, 0)); }
@media (prefers-reduced-motion: reduce) {
  .d3-l, .d3-row, .d3-toast { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ds-motion .d3-steps[data-d-in]::before { transform: none !important; }
}
.d3-price-more { max-width: none; } .d3-price-v .num { color: var(--d-text); }
/* layout gate fixes: one section rhythm everywhere; ≥ 44 px targets; ≥ 16 px body text on phones */
main > section.calc-sec { padding-block: calc(var(--d-pad) / 2); }
.btn-sm { min-height: 44px; }
@media (max-width: 480px) {
  .d3-find-mob, .d3-trade .d-body, .d3-promise p, .d3-price-more, .d3-ex-note, .d3-flow li, .d3-case-s, .d3-cmp-r, .d3-finds-p { font-size: 16px; line-height: 25px; }
}
/* "What it finds": dense — visuals stack with one gap while the left column stays sticky; inactive visuals stay readable */
.d3-finds-vis { gap: 32px; }
.d3-find { min-height: 0; }
@media (min-width: 1025px) { .js-story .d3-find { opacity: .55; transform: scale(.99); } .js-story .d3-find[data-active] { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-story .d3-find { opacity: 1 !important; transform: none !important; } }
/* nav: the four links fit down to 901 px; the menu only at ≤ 900 (overrides the older 1100/1240 px rules) */
@media (min-width: 901px) { .mr-nav > .ds-links { display: flex !important; } .mr-nav > .ds-cta { display: flex !important; } .mr-nav .mr-menu { display: none !important; } }
.mr-menu > summary { min-height: 44px; }
@media (min-width: 901px) and (max-width: 1100px) { .mr-nav > .ds-links { gap: 16px; } .mr-signin { display: none; } }
@media (max-width: 640px) { .d-row[style] { grid-template-columns: minmax(0, 1fr) auto !important; } .d-row[style] .p { display: none; } }
/* review fixes 2026-10-13: the toast sits above the window bar so it never covers the SAMPLE badge; the inactive
   "What it finds" panels keep full text contrast (opacity dimming took muted text to 3.1:1) and the active one is marked
   by its border instead; the legacy site.css summary::after drew a second burger beside "Menu" */
.d3-mock { padding-top: 56px; }
.d3-toast, .d3-mock .d3-toast { top: 0; right: -12px; }
@media (max-width: 640px) { .d3-toast, .d3-mock .d3-toast { top: 0; right: 8px; } }
@media (min-width: 1025px) { .js-story .d3-find { opacity: 1; transform: none; } .js-story .d3-find .d-app { transition: border-color var(--d-t-slow) var(--d-ease), box-shadow var(--d-t-slow) var(--d-ease); } .js-story .d3-find[data-active] .d-app { border-color: rgba(139,92,246,.5); box-shadow: 0 0 0 1px rgba(139,92,246,.5); } }
.mr-menu > summary::after { content: none; display: none; }
/* Ask Main launcher (2026-10-13): white on #6e4bff→#5b3df5 ≥ 5.1:1; mr.js drives the pulse ring. */
a.mr-assist { right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: auto; height: 56px; min-height: 56px; padding: 0 22px 0 8px; gap: 10px; justify-content: flex-start;
  border: 0; border-radius: 999px; color: #fff; font: 600 15px/1 var(--d-sans, inherit); letter-spacing: -.005em;
  background: linear-gradient(135deg, #6e4bff, #5b3df5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(110,75,255,.35), 0 2px 6px rgba(10,8,30,.28);
  transition: transform .2s cubic-bezier(.16,1,.3,1), filter .2s, opacity .3s; }
a.mr-assist:hover, a.mr-assist:focus-visible { transform: translateY(-2px); filter: brightness(1.1); color: #fff; background: linear-gradient(135deg, #6e4bff, #5b3df5); }
a.mr-assist:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mr-assist-ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #6e4bff; transform: scale(0); pointer-events: none; }
.mr-assist-mark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f4f2fb; box-shadow: 0 1px 2px rgba(10,8,30,.25); }
.mr-assist-mark .mr-mark { width: 23px; height: 23px; }
a.mr-assist .mr-assist-dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #f4f2fb; }
a.mr-assist .mr-assist-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
@media (max-width: 640px) { a.mr-assist { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; height: 56px; min-height: 56px; padding: 0 20px 0 8px; } }
.mr-teaser { position: fixed; z-index: 59; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; align-items: flex-start; max-width: min(300px, calc(100vw - 40px));
  padding: 12px 8px 12px 16px; border-radius: 16px 16px 4px 16px; background: #fff; color: #16181d; font: 500 14px/1.45 var(--d-sans, inherit);
  box-shadow: 0 12px 32px rgba(10,8,30,.22), 0 2px 6px rgba(10,8,30,.12); animation: mr-teaser .4s cubic-bezier(.16,1,.3,1); }
.mr-teaser button { appearance: none; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-align: left; }
.mr-teaser .mr-teaser-x { flex: 0 0 auto; width: 32px; height: 32px; margin: -6px 0 -6px; border-radius: 50%; font-size: 18px; line-height: 32px; text-align: center; color: #4a4f59; }
.mr-teaser .mr-teaser-x:hover { background: #f0eff4; }
.mr-teaser :focus-visible { outline: 2px solid #5b3df5; outline-offset: 2px; }
@keyframes mr-teaser { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .mr-teaser { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .mr-teaser { animation: none; } a.mr-assist { transition: none; } }
@media print { .mr-teaser { display: none !important; } }

/* ══ MOTION REDESIGN (owner brief 2026-10-15; reference studied: motionloved.com techniques, none of its art or copy) ══
   ONE timing source: these tokens. motion.js reads them at boot, so GSAP and CSS share every duration and ease.
   Transform and opacity only. Static backdrop-filter / blur / mask are allowed (never animated). Every loop pauses
   off screen (.mo-off on its section). Without JS or under prefers-reduced-motion everything is in its final,
   complete state: from-states live under .ds-motion, which motion.js sets only when motion is allowed. */
:root {
  --m-fast: .22s;
  --m-mid: .36s;
  --m-slow: .95s;
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-spring: cubic-bezier(.34, 1.26, .64, 1);   /* a slight overshoot (≈3 %) — buttons only */
}

/* ── 1 · hero orb (homepage). One box, --orb-v wide, holds everything that must stay clear of other hero elements: the core
   (inset 15%) and both rings with their beads (r2 = the box edge). Only the outer glow reaches past it, fading to transparent.
   ≥ 1101 px: top right of the hero container, beside the 96 px headline, sized to the space the headline leaves.
   ≤ 1100 px (one column): a block of its own between the copy and the product mock. ── */
.v4 .v4-hero { position: relative; }
/* clip + isolation keep the orb's animated layers from overlapping the page below (scroll: 26 -> 4 dropped frames on a 4x
   phone), but at first paint they cost ~50 ms of LCP. They switch on with .mo-paint, one frame after first paint, which is
   also when the orb becomes visible: before that nothing in the hero moves or overlaps. */
.mo-paint .v4-hero { overflow: clip; isolation: isolate; }
.v4 .v4-hero > .wrap { position: relative; z-index: 2; }
.mo-orb { visibility: hidden; }   /* painted one frame after first paint (motion.js, reduced motion included): its raster stays out of FCP; visibility keeps its box, so nothing moves */
.mo-orb { --orb-v: clamp(200px, calc(100vw - 898px), 270px); position: absolute; z-index: 1; right: 24px; top: -36px; width: var(--orb-v);   /* right: the content edge (.wrap pads 24 px) */ aspect-ratio: 1;
  pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
@media (max-width: 1100px) {
  .mo-orb { --orb-v: min(240px, 56vw); position: relative; right: auto; top: auto; margin: 4px auto 0; }
}
/* the hero mock's screen: the SAMPLE findings list (HTML, not a recording) */
.v4 .v4-screen.mo-list { aspect-ratio: auto; display: grid; gap: 10px; padding: 18px 18px 20px; background: #0f1216; }
.mo-list-h { display: flex; justify-content: space-between; margin: 0; padding: 0 14px; font: 500 11px/1 var(--ui-sans));   color: #8f93a0; }
.mo-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mo-list .d3-row { min-height: 0; padding: 12px 14px; border-radius: 12px; background: #161a20; border: 1px solid rgba(255, 255, 255, .07); }
.mo-list .d3-row[data-flag] { background: rgba(110, 75, 255, .14); border-color: rgba(169, 155, 255, .5); }
.mo-li-k { display: grid; gap: 3px; min-width: 0; }
.mo-li-t { font: 600 15px/1.3 var(--v4-display, var(--font)); color: #f3f3f1; }
.mo-li-s { font: 400 12px/1.35 var(--v4-display, var(--font)); color: #9a9eaa; }
.mo-li-a { flex: none; font: 600 15px/1.3 var(--v4-display, var(--font)); color: #f3f3f1; font-variant-numeric: tabular-nums; }
.mo-list .d3-row[data-flag] .mo-li-a { color: #c4b5fd; }
@media (max-width: 640px) { .v4 .v4-screen.mo-list { padding: 12px; } .mo-li-s { display: none; } .mo-list .d3-row { padding: 10px 12px; } }
/* two floating SAMPLE cards (decorative, aria-hidden): their own row under the mock, so they never cover it or each other.
   They breathe and drift with the pointer by less than the space around them. Neither repeats a finding from the list. */
.mo-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.mo-fcard { position: relative; min-width: 0; pointer-events: none; }
.mo-fcard > .mo-breathe { display: block; height: 100%; animation: mo-float-a calc(var(--m-slow) * 4.1) var(--m-ease) infinite; }
.mo-fcard.b > .mo-breathe { animation-name: mo-float-b; animation-duration: calc(var(--m-slow) * 4.6); animation-delay: calc(var(--m-slow) * -1.7); }
.mo-fc { display: grid; align-content: start; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: #13161b;
  border: 1px solid rgba(196, 181, 253, .22); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07); font: 400 13px/1.35 var(--v4-display, var(--font)); color: #a3a7b0; }
.mo-fc b { font: 600 15px/1.3 var(--v4-display, var(--font)); color: #f3f3f1; }
.mo-fc .mo-fc-k { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 11px/1 var(--ui-sans));   color: #a99bff; }
.mo-fc .sample-badge { font-size: 10px; }
.mo-type-t { white-space: pre-wrap; display: block; height: 2.6em; overflow: hidden; contain: strict; }   /* fixed box: typing re-lays out this box only, never the page */   /* two lines reserved: typing never changes the card's height (no layout shift) */
.mo-typing { width: 7px; height: 7px; border-radius: 50%; background: #a99bff; box-shadow: 0 0 8px rgba(167, 139, 250, .8); }
@media (max-width: 560px) { .mo-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; } }
/* the nav dock: the logo dot the orb becomes, and the light that runs along the nav edge */
.mr-brand { position: relative; }
.mr-dot { position: absolute; left: 22px; top: -3px; width: 9px; height: 9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff, #a78bfa 55%, #6e4bff); box-shadow: 0 0 12px rgba(167, 139, 250, .75); }
/* ── 3 · giant wordmark, gutter to gutter, letters rise from a clipped mask (every page, above the footer) ── */
.mo-mark { overflow: hidden; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); max-width: none; line-height: .8; user-select: none; }
/* phones (QA 2026-10-20, 390): gutter to gutter left the last letter on the screen edge; a wider margin there (fitMark() reads it) */
@media (max-width: 640px) { .mo-mark { padding-inline: max(28px, env(safe-area-inset-left, 0px)); } }
.mo-mark-in { display: block; white-space: nowrap; text-align: center; font: 700 var(--wm-f, calc((100vw - 48px) * .158))/.8 var(--font); letter-spacing: -0.055em; padding-bottom: .06em; }
.mo-mark i { display: inline-block; font-style: normal; background: linear-gradient(180deg, rgba(244, 243, 250, .95) 10%, rgba(124, 92, 255, .55) 70%, rgba(124, 92, 255, .15)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mo-mark i.sp { width: .24em; }
.mo-mark i { transition: transform calc(var(--m-slow) * 1.5) var(--m-ease); transition-delay: calc(var(--i) * var(--m-fast) / 5.5); }
/* ── 4 · headings rise word by word through masks (motion.js splits them; once) ── */
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mo-w > span { display: inline-block; transition: transform calc(var(--m-slow) * 1.45) var(--m-ease), opacity var(--m-slow) var(--m-ease); transition-delay: calc(var(--wi) * var(--m-fast) / 3); }
/* the hero headline rises from first paint with CSS keyframes: no script has to hide it first (the paragraph beside it is the LCP) */
/* the hero headline paints in place at first paint (no rise): it is the LCP area, and animating its six masked words delayed the first frame ~50 ms on a 4x phone */
.v4 [data-v4-i] { transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease); transition-delay: calc(var(--vi, 0) * var(--m-fast) / 3); }
/* ── 5 · marquee of the systems we read (homepage) ── */
.mo-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); margin-top: 20px; }
.mo-marq-track { display: flex; width: max-content; }
.mo-marq ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.mo-marq li { display: inline-flex; align-items: center; gap: 14px; padding: 0 28px; font: 600 clamp(22px, 2.6vw, 34px)/1.2 var(--font); letter-spacing: -0.02em; color: var(--d-text, #f4f3fa); white-space: nowrap; }
.mo-marq li::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #7c5cff); box-shadow: 0 0 10px rgba(124, 92, 255, .7); margin-left: 28px; }
.mo-marq-dup { display: none; }
.mo-marq:hover .mo-marq-track, .mo-off .mo-marq-track { animation-play-state: paused; }
.mo-marq:not(.is-ready) ul { flex-wrap: wrap; justify-content: center; }
/* ── 6 · how it works: three self-running mini interfaces (decorative; the final frame is the static state) ── */
.d3-steps { --mini-h: 224px; }
.mo-mini { position: relative; margin: 0 0 18px; padding: 14px; height: var(--mini-h); box-sizing: border-box; border-radius: 14px; border: 1px solid var(--d-line, rgba(255,255,255,.1)); background: var(--d-raised, #181822);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); font: 400 12px/1.4 var(--ui-sans); color: var(--d-muted, #b9b6c9); overflow: hidden; }
.mo-mini-bar { display: flex; gap: 5px; margin-bottom: 10px; }
.mo-mini-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.mo-up { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mo-up .ok .tick { display: inline-block; vertical-align: -1px; }   /* drawn, not the ✓ glyph: no self-hosted face carries U+2713 */
.mo-up li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.mo-up .f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d-text, #f4f3fa); }
.mo-up .ok { color: var(--positive, #3dd68c); font-weight: 600; }
.mo-up .b { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mo-up .b i { display: block; height: 100%; background: linear-gradient(90deg, #6e4bff, #a78bfa); transform-origin: 0 50%; }
.mo-tr { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.mo-tr li { position: relative; z-index: 1; display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 8px; height: 26px; align-items: center; padding: 0 6px; }
.mo-tr li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-tr .hit { color: var(--d-text, #f4f3fa); }
.mo-tr .mo-scan { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 26px; border-radius: 6px; background: rgba(124, 92, 255, .22); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .5); }
.mo-scan.h1 { transform: translate3d(0, 26px, 0); }
.mo-scan.h2 { transform: translate3d(0, 52px, 0); }
.mo-scan.h3 { transform: translate3d(0, 78px, 0); }
.mo-scan.h4 { transform: translate3d(0, 104px, 0); }
.mo-chip { display: inline-flex; margin-top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(245, 181, 71, .12); border: 1px solid rgba(245, 181, 71, .4); color: #f5b547; font: 500 11px/1.2 var(--ui-sans); }
.mo-dr { display: grid; gap: 6px; }
.mo-dr .s { color: var(--d-text, #f4f3fa); font-weight: 600; }
.mo-dr .t { position: relative; display: block; white-space: pre-wrap; height: 8.4em; overflow: hidden; }
.mo-dr-cover { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--d-raised, #181822); transform: translate3d(0, 100%, 0); }   /* at rest: below the text, clipped */
.mo-mini-bar .mo-typing { margin-left: auto; width: 6px; height: 6px; }   /* the "writing" light sits in the window bar */
/* the loops: one cycle = --mini-t; every duration and ease from the tokens; transform / opacity only, on the compositor.
   The static HTML above is the last frame, so no JS / reduced motion shows the finished state. */
.d3-steps { --mini-t: calc(var(--m-slow) * 8); }
/* ── 7 · stats on a dark panel with a purple glow ── */
.mo-stats { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: #0a0a12; border: 1px solid rgba(196, 181, 253, .14); padding: 56px 48px; }
.mo-stats-glow { position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .45), rgba(110, 75, 255, .12) 55%, transparent 72%); animation: mo-drift calc(var(--m-slow) * 7.5) var(--m-ease) infinite; }
.mo-stat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.mo-stat-k { margin: 0; font: 700 clamp(52px, 6.4vw, 96px)/1 var(--font); letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  color: #f4f3fa; }   /* solid: gradient-clipped text has a transparent colour (contrast checks read it as invisible); no blurred text-shadow to repaint while it counts */
.mo-stat { contain: layout paint; }   /* the count-up re-lays out this box only */
.mo-stat-u { display: block; margin-top: 10px; font: 600 15px/1.3 var(--font); color: var(--d-text, #f4f3fa); }
.mo-stat-v { margin: 6px 0 0; font-size: 16px; line-height: 24px; color: var(--d-muted, #b9b6c9); }
@media (max-width: 960px) { .mo-stat-row { grid-template-columns: 1fr 1fr; } .mo-stats { padding: 40px 28px; } }
@media (max-width: 480px) { .mo-stat-row { grid-template-columns: 1fr 1fr; gap: 28px 18px; } .mo-stats { padding: 32px 22px; border-radius: 22px; } }
/* ── 8 · buttons: magnetic + press/spring (motion.js, GSAP), secondary fills from below, primary sheen ── */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::before { inset: -2px auto -2px 0; width: 42%; transform: translate3d(-140%, 0, 0) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transition-duration: var(--m-slow); }
@media (hover: hover) { .btn:not(.btn-primary):hover::before { transform: none; } .btn-primary:hover::before { transform: translate3d(300%, 0, 0) skewX(-18deg); } }
.btn-primary:not(:hover)::before { transition-duration: 0s; }   /* the sheen sweeps forward only */
.btn:not(.btn-primary):focus-visible::before { transform: none; }
@media (hover: hover) and (pointer: fine) { .mo-card:hover > .mo-edge { opacity: 1; } }
/* Lenis (fine pointers only): its documented base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* how it works with the mini interfaces: the track line runs through the step numbers under them; step 4 keeps the rhythm */
@media (min-width: 961px) {
  .d3-steps:has(.mo-mini)::before { top: calc(var(--mini-h) + 18px + 18px); }
  .d3-steps:has(.mo-mini) > li:not(:has(.mo-mini))::before { content: ''; display: block; height: calc(var(--mini-h) + 18px); }
}
.mo-fc-l { display: inline-flex; align-items: center; gap: 7px; }

/* ── Site-wide system nav (owner 2026-10-19, "Apple × Linear"; Apple pattern after review): the global bar (links, Sign in,
   hairline, real blur) scrolls away with the page; once the page's first section has passed, the local-nav pill docks at the
   top (mr.js sets html.sys-pill-on) and is the only bar on screen. The pill is faux glass (it only ever shows after the hero);
   pinned scenes keep its band clear. */
:root .mr-header.mr-header { position: relative; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; }
:root .mr-header .mr-nav > .ds-links { gap: 28px; font-size: 13px; letter-spacing: .01em; }
:root .mr-header .ds-links a, :root .mr-header .mr-signin { color: #c7c7cc; } :root .mr-header .ds-links a:hover, :root .mr-header .ds-links a[aria-current="page"], :root .mr-header .mr-signin:hover { color: #fff; }
:root .mr-header .mr-signin { font-size: 13px; }
/* no JS: the pill is not rendered (the global bar and the page's own CTAs remain); with JS (mr.js sets html.sys-js) it waits
   hidden by visibility, never by an opacity the script must undo, and fades in through a keyframe when it docks */
.sys-pill { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; z-index: 60; display: none; align-items: center; gap: 8px; height: 52px; padding: 0 4px 0 6px; max-width: calc(100vw - 24px); box-sizing: border-box;
  border-radius: 999px; background: linear-gradient(180deg, rgba(40,38,52,.96), rgba(20,19,28,.96)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(167,139,250,.22), 0 12px 40px -12px rgba(0,0,0,.8);
  transform: translate(-50%, -14px) scale(.97); visibility: hidden; pointer-events: none;
  transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s; }
html.sys-js .sys-pill { display: flex; }
html.sys-pill-on .sys-pill { transform: translate(-50%, 0) scale(1); visibility: visible; pointer-events: auto; transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s; animation: sysPillIn .25s ease both; }
@keyframes sysPillIn { from { opacity: 0; } to { opacity: 1; } }
.sys-pill-home { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.sys-pill-home img { width: 24px; height: 24px; border-radius: 6px; }
.sys-pill-t { font: 600 14px/1 var(--pp-font, inherit); color: #fff; letter-spacing: -.01em; white-space: nowrap; margin-right: 12px; }
.sys-pill .btn { min-height: 40px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.sys-pill .btn:not(.btn-primary) { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.sys-pill .btn-primary { background: linear-gradient(180deg, #9a7bff 0%, #8b5cf6 55%, #7c4dff 100%); color: #fff; border: 0; }
.sys-pill-short { display: none; }
@media (max-width: 640px) { .sys-pill { top: max(8px, env(safe-area-inset-top, 0px)); height: 52px; gap: 4px; } .sys-pill-t, .sys-pill-s { display: none; }
  .sys-pill .btn { min-height: 44px; height: 44px; padding: 0 20px; font-size: 15px; } .sys-pill-long { display: none; } .sys-pill-short { display: inline; } }
/* phones (QA 2026-10-20, 390): the pill floated straight over body text, cutting a line in half while reading; once it is on,
   a band in the page colour sits under it (fixed, out of flow, never clickable) so text passes beneath the band, not the pill */
@media (max-width: 640px) {
  html.sys-js::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(max(8px, env(safe-area-inset-top, 0px)) + 64px); z-index: 59; pointer-events: none;
    background: linear-gradient(180deg, var(--d-bg, var(--bg, #000)) 0%, var(--d-bg, var(--bg, #000)) 72%, transparent 100%); visibility: hidden; }
  html.sys-pill-on::before { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .sys-pill, html.sys-pill-on .sys-pill { transition: none; animation: none; } }
@media print { .sys-pill, html::before { display: none !important; } }