/* Base reset (the prototype was built on this) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* The design */

/* Layout: light-first, Heidi-style calm. 1160px column, full-bleed alternating bands
   (white / soft lilac-grey), one product plate per band. Violet is the only brand cue. */
:root {
  --bg: #ffffff; --bg-2: #f6f4fa; --surface: #ffffff; --surface-2: #fbfafe; --well: rgba(40,25,90,0.03);
  --line: rgba(30,20,70,0.09); --line-strong: rgba(30,20,70,0.16);
  --fg: #16141f; --muted: #545163; --faint: #827e90;
  --accent: #6d3fe0; --accent-ink: #5b30c9; --accent-soft: rgba(109,63,224,0.08);
  --blue: #2761ea; --teal: #0b7fa0;
  --pos: #15803d; --pos-soft: rgba(21,128,61,0.09);
  --warn: #b45309; --warn-soft: rgba(180,83,9,0.09);
  --neg: #be185d; --neg-soft: rgba(190,24,93,0.08);
  --bloom: rgba(124,58,237,0.10); --bloom-2: rgba(39,97,234,0.07);
  --shadow: 0 24px 60px -28px rgba(40,25,90,0.22);
  --glow: 0 10px 28px -12px rgba(109,63,224,0.4);
  --menu-shadow: 0 18px 50px -12px rgba(40,25,90,0.22);
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c16; --bg-2: #0e1120; --surface: #12152a; --surface-2: #181c34; --well: rgba(255,255,255,0.025);
    --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.15);
    --fg: #f1f2f8; --muted: #a3a9bf; --faint: #6e748b;
    --accent: #8b5cf6; --accent-ink: #c4b5fd; --accent-soft: rgba(139,92,246,0.14);
    --blue: #3b6ff0; --teal: #19a3c9;
    --pos: #34d399; --pos-soft: rgba(52,211,153,0.12);
    --warn: #fbbf24; --warn-soft: rgba(251,191,36,0.12);
    --neg: #f472b6; --neg-soft: rgba(244,114,182,0.12);
    --bloom: rgba(139,92,246,0.18); --bloom-2: rgba(39,97,234,0.12);
    --shadow: 0 40px 90px -30px rgba(0,0,0,0.75);
    --glow: 0 10px 40px -12px rgba(139,92,246,0.45);
    --menu-shadow: 0 24px 60px -10px rgba(0,0,0,0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0c16; --bg-2: #0e1120; --surface: #12152a; --surface-2: #181c34; --well: rgba(255,255,255,0.025);
  --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.15);
  --fg: #f1f2f8; --muted: #a3a9bf; --faint: #6e748b;
  --accent: #8b5cf6; --accent-ink: #c4b5fd; --accent-soft: rgba(139,92,246,0.14);
  --blue: #3b6ff0; --teal: #19a3c9;
  --pos: #34d399; --pos-soft: rgba(52,211,153,0.12);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,0.12);
  --neg: #f472b6; --neg-soft: rgba(244,114,182,0.12);
  --bloom: rgba(139,92,246,0.18); --bloom-2: rgba(39,97,234,0.12);
  --shadow: 0 40px 90px -30px rgba(0,0,0,0.75);
  --glow: 0 10px 40px -12px rgba(139,92,246,0.45);
  --menu-shadow: 0 24px 60px -10px rgba(0,0,0,0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.container { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 720px) { .container { padding-inline: 32px; } }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
.mono { font-family: var(--font-mono); }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.grad { background: linear-gradient(92deg, var(--teal), var(--blue) 38%, var(--accent) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 14px/1 var(--font-body); padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--fg); background: var(--surface); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s, background-position .7s; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.pri { color: #fff; border-color: transparent; background: linear-gradient(110deg, #7c3aed, #9333ea 45%, #c026d3 60%, #9333ea, #7c3aed); background-size: 220% 100%; box-shadow: var(--glow); }
.btn.pri:hover { background-position: 100% 0; }
.btn.sm { padding: 9px 13px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; }
.logo svg { width: 28px; height: 28px; }
.nav-links { display: none; gap: 26px; font-size: 14px; color: var(--muted); margin-left: 16px; }
.nav-links a { text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--fg); }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.login { display: none; font-size: 14px; color: var(--muted); text-decoration: none; padding: 8px 6px; transition: color .2s; }
.login:hover { color: var(--fg); }
@media (min-width: 600px) { .login { display: inline; } }
.theme { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--well); }
.theme button { display: grid; place-items: center; width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; transition: color .2s, background-color .2s; }
.theme button:hover { color: var(--fg); }
.theme button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.theme svg { width: 15px; height: 15px; }
.hide-sm { display: none; }
@media (min-width: 480px) { .hide-sm { display: inline-flex; } }

/* hero */
.hero { position: relative; padding-top: 64px; padding-bottom: 32px; }
.hero::before { content: ""; position: absolute; inset: -64px 0 auto; height: 720px; background: radial-gradient(ellipse 60% 55% at 22% 0%, var(--bloom), transparent 70%), radial-gradient(ellipse 50% 45% at 85% 10%, var(--bloom-2), transparent 70%); pointer-events: none; z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.02fr 1fr; gap: 56px; } }
.hero h1 { font-size: clamp(42px, 6.6vw, 76px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; margin: 18px 0 22px; }
.hero .sub { font-size: 19px; color: var(--muted); max-width: 34em; line-height: 1.55; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.asks { margin-top: 34px; }
.asks .lbl { font-size: 12px; color: var(--faint); margin-bottom: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.asks div { display: flex; flex-wrap: wrap; gap: 8px; }
.q { font-size: 13px; color: var(--muted); border: 1px solid var(--line); background: var(--well); border-radius: 999px; padding: 6px 12px; }

/* card language shared by all product plates */
.card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--teal) 55%, transparent); opacity: .8; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.card-b { padding: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line); background: var(--well); color: var(--muted); white-space: nowrap; }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.pill.pos { color: var(--pos); background: var(--pos-soft); border-color: transparent; }
.pill.neg { color: var(--neg); background: var(--neg-soft); border-color: transparent; }
.pill.vi { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }
.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.who { display: flex; align-items: center; gap: 8px; }
.who svg { width: 18px; height: 18px; }
.tnum { font-variant-numeric: tabular-nums; }

/* hero judgement card */
.stack { position: relative; }
.stack .ghost { position: absolute; left: 22px; right: 22px; top: -14px; height: 40px; border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; background: var(--surface); opacity: .6; }
.stack .ghost.two { left: 44px; right: 44px; top: -26px; opacity: .3; }
.j-title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; margin-bottom: 10px; }
.j-body { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.fig { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--well); min-width: 0; }
.fig b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.fig span { font-size: 11.5px; color: var(--faint); }
.fig.hot b { color: var(--warn); }
.cover { margin-bottom: 18px; }
.cover-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-bottom: 6px; }
.track { position: relative; height: 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.track .stock { width: 42%; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.track .gap { left: 42%; width: 58%; background: repeating-linear-gradient(135deg, var(--warn-soft) 0 6px, transparent 6px 12px); border-left: 2px solid var(--warn); border-radius: 0; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.act { font-size: 12.5px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--well); color: var(--muted); }
.act.go { color: #fff; border-color: transparent; background: linear-gradient(110deg, #7c3aed, #9333ea); }
.note { font-size: 11.5px; color: var(--faint); margin-top: 12px; }

.since { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--well); font-size: 14px; color: var(--muted); }
.since b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.02em; margin-right: 4px; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--pos); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 60%, transparent); } 70%,100% { box-shadow: 0 0 0 8px transparent; } }

/* logos */
.sources { padding-block: 56px 8px; }
.sources p { text-align: center; font-size: 13px; color: var(--faint); margin-bottom: 22px; }
.marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 38px; }
.marks span { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--faint); transition: color .2s; }
.marks span:hover { color: var(--fg); }

/* generic sections */
section.block { padding-block: 112px 0; }
.head { max-width: 760px; margin-bottom: 48px; }
.head h2 { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.035em; line-height: 1.04; font-weight: 600; margin: 14px 0 16px; }
.head p { font-size: 18px; color: var(--muted); max-width: 40em; }
.head.center { margin-inline: auto; text-align: center; }
.head.center p { margin-inline: auto; }

/* problem: before / after */
.ba { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba-col { min-width: 0; }
.ba-lbl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ba-lbl h3 { margin: 0; }
.ba-lbl h3.vs { font-size: 16px; }
.ba-lbl span { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.tabs { display: grid; gap: 8px; }
.tabrow { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--well); font-size: 14px; }
.tabrow i { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--faint); font-family: var(--font-mono); }
.tabrow .t { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabrow .m { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.tabrow.sum { background: transparent; border-style: dashed; }
.tabrow.sum .t { color: var(--fg); font-weight: 500; }
.tabrow.sum .m { color: var(--neg); }
.brief-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.brief-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.brief-item:first-child { padding-top: 2px; }
.brief-item h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.brief-item p { font-size: 13px; color: var(--muted); }

/* brain */
.brain-wrap { position: relative; }
.brain-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 960px) { .brain-grid { grid-template-columns: 0.8fr 1.2fr 1.2fr 0.9fr; gap: 14px; } }
.bcol { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--surface); min-width: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.bcol .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.bcol h3 { font-size: 22px; letter-spacing: -0.025em; font-weight: 600; line-height: 1.15; }
.bcol p { font-size: 14px; color: var(--muted); }
.bcol.compute { background: linear-gradient(170deg, color-mix(in srgb, var(--teal) 10%, var(--surface)), var(--surface) 55%); }
.bcol.compute .k { color: var(--teal); }
.bcol.judge { background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 55%); }
.bcol.judge .k { color: var(--accent-ink); }
.bcol.you { border-style: dashed; background: transparent; }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.srcs span { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--well); }
.calc { font-family: var(--font-mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--well); line-height: 1.8; margin-top: auto; }
.calc b { color: var(--fg); font-weight: 500; }
.rules { display: grid; gap: 6px; margin-top: auto; }
.rules div { font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--well); }
.rules div::before { content: "if "; color: var(--accent-ink); font-family: var(--font-mono); }
.arrow { display: none; }
@media (min-width: 960px) {
  .bcol:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 10px; height: 10px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); background: var(--bg); z-index: 2; }
}
.promise { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 16px 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); font-size: 15px; }
.promise strong { font-weight: 600; }
.stats { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 20px; }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat { border-top: 1px solid var(--line-strong); padding-top: 16px; min-width: 0; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(40px, 5vw, 58px); letter-spacing: -0.05em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 20em; }

/* finance: cash chart, ladder, reconciliation, comparison */
.cash svg { display: block; width: 100%; height: auto; }
.cash text { fill: var(--faint); font-family: var(--font-body); font-size: 10.5px; }
.cash .zero { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.cash .ln { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.cash .ar { fill: color-mix(in srgb, var(--teal) 14%, transparent); }
.cash .below { fill: var(--neg-soft); stroke: var(--neg); stroke-width: 1.4; }
.cash .pt { fill: var(--neg); }
.cash .lbl { fill: var(--neg); font-weight: 600; }
.cash-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--well); padding: 10px 10px 4px; margin: 16px 0; }

.truths { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .truths { grid-template-columns: 1fr 1fr; } }
.truth { border: 1px solid var(--line); border-radius: 14px; background: var(--well); padding: 16px; min-width: 0; }
.truth .src { font-size: 12px; color: var(--faint); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.truth b { display: block; font-family: var(--font-display); font-size: 30px; letter-spacing: -0.04em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.truth .up { color: var(--pos); } .truth .dn { color: var(--neg); }
.truth p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.clash { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); font-size: 14px; color: var(--muted); }
.recon { display: grid; gap: 0; }
.recon-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.recon-row:first-child { padding-top: 0; }
.recon-row span { color: var(--muted); }
.recon-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.recon-row.sub span { padding-left: 16px; font-size: 13px; }
.recon-row.sub b { font-weight: 500; color: var(--muted); font-size: 13px; }
.recon-row.tot { border-bottom: 0; padding-bottom: 0; }
.recon-row.tot span { color: var(--fg); font-weight: 500; }
.sub-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.sub-h.gap { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pace svg { display: block; width: 100%; height: auto; }
.pace text { fill: var(--faint); font-family: var(--font-body); font-size: 10.5px; }
.pace .zero { stroke: var(--line-strong); }
.pace .bud { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-dasharray: 4 4; }
.pace .act { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linejoin: round; }
.pace .area { fill: color-mix(in srgb, var(--teal) 12%, transparent); }
.pace .miss { fill: none; stroke: var(--neg); stroke-width: 1.4; stroke-dasharray: 2 4; }
.pace .m1 { fill: var(--warn); } .pace .m2 { fill: var(--accent); }
.pace .lt { fill: var(--teal); font-weight: 600; } .pace .ln { fill: var(--neg); }
.pace .mk { font-weight: 600; }
.pace .mk.m1t { fill: var(--warn); } .pace .mk.m2t { fill: var(--accent-ink); }
.evts { display: grid; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.evts div { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 10px; }
.evts b { white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--faint); padding-top: 1px; }
.recon-ok { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pos); }

.ladder-card { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ladder-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--teal) 55%, transparent); }
.ladder-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--faint); }
.ladder-scroll { overflow-x: auto; }
.ladder-scroll svg { display: block; width: 100%; min-width: 660px; height: auto; }
.ladder-scroll text { fill: var(--faint); font-family: var(--font-body); font-size: 11px; }
.ladder-scroll .v { fill: var(--fg); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.ladder-scroll .vd { fill: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ladder-scroll .tot { fill: var(--accent); }
.ladder-scroll .tot.rev { fill: var(--line-strong); }
.ladder-scroll .tot.end { fill: var(--pos); }
.ladder-scroll .del { fill: var(--neg-soft); stroke: var(--neg); stroke-width: 1; }
.ladder-scroll .cn { stroke: var(--line-strong); stroke-dasharray: 2 3; }
.ladder-scroll .br { fill: none; stroke: var(--faint); stroke-width: 1.2; }
.ladder-scroll .br.em { stroke: var(--accent); }
.ladder-scroll .bt { fill: var(--faint); font-size: 11.5px; }
.ladder-scroll .bt.em { fill: var(--accent-ink); font-weight: 600; }
.fin-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 720px) { .fin-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .fin-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.fin { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--surface); min-width: 0; display: grid; gap: 6px; align-content: start; }
.fin svg { width: 20px; height: 20px; color: var(--accent-ink); margin-bottom: 8px; }
.fin h3 { font-size: 16.5px; letter-spacing: -0.015em; font-weight: 600; }
.fin p { font-size: 14px; color: var(--muted); }

.cmp { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.cmp-scroll { overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 14.5px; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cmp thead th { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 500; background: var(--surface-2); }
.cmp thead th.em { color: var(--accent-ink); background: var(--accent-soft); }
.cmp td.c { text-align: center; width: 150px; }
.cmp th.c { text-align: center; }
.cmp td.em { background: var(--accent-soft); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .grp td { font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 18px; padding-bottom: 8px; }
.yes, .no, .part { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; }
.yes { color: var(--pos); } .no { color: var(--faint); } .part { color: var(--warn); }
.yes svg, .no svg, .part svg { width: 16px; height: 16px; }

/* scale: every slice, read so you don't have to */
.scale-stage { display: grid; grid-template-columns: 1fr; gap: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); padding: 16px; position: relative; overflow: hidden; }
@media (min-width: 980px) { .scale-stage { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 20px; padding: 20px; } }
.field { position: relative; min-width: 0; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.field-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.field-h b { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.03em; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.field canvas { display: block; width: 100%; height: 300px; }
@media (min-width: 980px) { .field canvas { height: 100%; min-height: 340px; flex: 1; } }
.phases-cap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); }
.phases-cap div { padding: 12px 16px; font-size: 13px; color: var(--faint); border-right: 1px solid var(--line); transition: color .4s, background-color .4s; min-width: 0; }
.phases-cap div:last-child { border-right: 0; }
.phases-cap span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; margin-bottom: 2px; }
.phases-cap div.on { color: var(--fg); background: var(--accent-soft); }
.phases-cap div.on span { color: var(--accent-ink); }
@media (max-width: 560px) { .phases-cap { grid-template-columns: 1fr; } .phases-cap div { border-right: 0; border-bottom: 1px solid var(--line); } .phases-cap div:last-child { border-bottom: 0; } }
.three { display: grid; gap: 12px; align-content: center; min-width: 0; }
.three-h { font-size: 12px; color: var(--faint); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding-inline: 4px; }
.tcard { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; transition: border-color .4s, box-shadow .4s, transform .4s; }
.tcard h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.tcard p { font-size: 13px; color: var(--muted); }
.tcard.lit { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateX(-3px); }
.tcard.lit.w { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.tcard.lit.n { border-color: color-mix(in srgb, var(--neg) 50%, transparent); }
.tcard.lit.p { border-color: color-mix(in srgb, var(--pos) 50%, transparent); }
.scale-foot { margin-top: 14px; font-size: 13px; color: var(--faint); max-width: 60em; }

/* pillars */
.pillars { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 980px) { .pillars { grid-template-columns: 330px minmax(0,1fr); gap: 56px; } }
.verbs { display: none; }
@media (min-width: 980px) {
  .verbs { display: block; position: sticky; top: 120px; align-self: start; }
  .verbs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .verbs a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; padding: 14px 16px; border-radius: 14px; text-decoration: none; border: 1px solid transparent; transition: background-color .25s, border-color .25s; }
  .verbs a .n { font-family: var(--font-mono); font-size: 12px; color: var(--faint); padding-top: 9px; grid-row: span 2; }
  .verbs a .v { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.035em; color: var(--faint); transition: color .25s; line-height: 1.2; }
  .verbs a .d { font-size: 13.5px; color: var(--faint); line-height: 1.4; max-height: 0; overflow: hidden; transition: max-height .3s ease, color .25s; }
  .verbs a.on { background: var(--surface); border-color: var(--line); }
  .verbs a.on .v { color: var(--fg); }
  .verbs a.on .n { color: var(--accent-ink); }
  .verbs a.on .d { max-height: 60px; color: var(--muted); }
  .verbs a:hover .v { color: var(--fg); }
}
.panes { display: grid; gap: 40px; min-width: 0; }
@media (min-width: 980px) { .panes { gap: 96px; } }
.pane { scroll-margin-top: 100px; min-width: 0; }
.pane-t { margin-bottom: 18px; }
.pane-t .eyebrow { margin-bottom: 8px; display: block; }
.pane-t h3 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.03em; font-weight: 600; line-height: 1.15; margin-bottom: 8px; }
.pane-t p { color: var(--muted); max-width: 36em; }
.pane .card { box-shadow: var(--shadow); }

/* ask pane */
.msg-u { margin-left: auto; max-width: 80%; width: fit-content; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: 14.5px; }
.msg-e { margin-top: 16px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; }
.msg-e svg.m { width: 26px; height: 26px; }
.msg-e p { font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.msg-e p b { font-weight: 600; }
.chart { border: 1px solid var(--line); border-radius: 14px; background: var(--well); padding: 14px 14px 8px; }
.chart-h { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--faint); margin-bottom: 8px; flex-wrap: wrap; }
.legend { display: flex; gap: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--faint); font-family: var(--font-body); font-size: 11px; }
.chart .gl { stroke: var(--line); }
.chart .prev { fill: var(--line-strong); }
.chart .curr { fill: var(--accent); }
.chart .curr.bad { fill: var(--neg); }
.chart .val { fill: var(--muted); font-variant-numeric: tabular-nums; }
.msg-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* pin pane */
.board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 560px) { .board { grid-template-columns: 1fr; } }
.tile { border: 1px solid var(--line); border-radius: 14px; background: var(--well); padding: 14px; min-width: 0; position: relative; }
.tile .tl { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.tile b { display: block; font-family: var(--font-display); font-size: 26px; letter-spacing: -0.035em; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile .dl { font-size: 12px; font-variant-numeric: tabular-nums; }
.tile .dl.up { color: var(--pos); } .tile .dl.dn { color: var(--neg); }
.tile svg { width: 100%; height: 38px; display: block; margin-top: 8px; }
.tile.new { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.pin { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font-size: 11.5px; }
.pin svg { width: 13px; height: 13px; margin: 0; }
.spark-a { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.spark-l { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.spark-t { fill: none; stroke: var(--teal); stroke-width: 1.8; }
.spark-ta { fill: color-mix(in srgb, var(--teal) 16%, transparent); }
.refresh { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--faint); }

/* watch pane */
.wl { display: grid; }
.wrow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: center; }
.wrow:first-child { padding-top: 0; }
.wrow:last-child { border-bottom: 0; padding-bottom: 0; }
.wrow .wt { font-size: 14px; font-weight: 500; }
.wrow .wr { font-size: 12.5px; color: var(--faint); grid-column: 1; }
.wrow .pill { grid-row: span 2; grid-column: 2; }
.toast { margin-top: 16px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.toast .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); display: grid; place-items: center; color: var(--warn); border: 1px solid var(--line); }
.toast .ic svg { width: 16px; height: 16px; }
.toast h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.toast p { font-size: 13px; color: var(--muted); }
.channels { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* act pane */
.draft { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; overflow: hidden; }
.draft-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--accent-soft); font-size: 12px; color: var(--accent-ink); font-weight: 500; }
.draft-b { padding: 16px; display: grid; gap: 14px; }
.draft-b h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr 1fr; } }
.kv div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--well); min-width: 0; }
.kv span { display: block; font-size: 11px; color: var(--faint); }
.kv b { display: block; font-size: 13.5px; font-weight: 500; margin-top: 2px; }
.why { font-size: 13px; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 12px; }
.draft-f { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.draft-f .fine { margin-left: auto; font-size: 12px; color: var(--faint); }
.ledger { margin-top: 14px; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.ledger div { display: flex; align-items: center; gap: 10px; }
.ledger i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--pos-soft); color: var(--pos); flex: none; }
.ledger .t { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }

/* loop */
.loop { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .loop { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .loop { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.step { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; background: var(--surface); min-width: 0; }
.step .n { font-family: var(--font-mono); font-size: 12px; color: var(--faint); letter-spacing: 0.1em; }
.step h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 600; margin: 34px 0 8px; }
.step p { font-size: 14px; color: var(--muted); }
.step .who-tag { position: absolute; top: 18px; right: 18px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.step.you { border-color: transparent; background: linear-gradient(160deg, #7c3aed, #9333ea 60%, #a21caf); color: #fff; box-shadow: var(--glow); }
.step.you .n, .step.you .who-tag { color: rgba(255,255,255,0.75); }
.step.you p { color: rgba(255,255,255,0.86); }
@media (min-width: 1040px) { .step.you { transform: translateY(-12px); } }

/* examples */
.ex { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .ex { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .ex { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.exc { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.exc .area { display: flex; gap: 6px; flex-wrap: wrap; }
.exc h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.25; }
.exc p { font-size: 14.5px; color: var(--muted); }
.exc .res { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.exc .res b { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.exc .res span { font-size: 13px; color: var(--faint); }
.ex-note { margin-top: 16px; font-size: 13px; color: var(--faint); text-align: center; }

/* trust */
.trust { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .trust { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.trust div { background: var(--surface); padding: 26px 24px; min-width: 0; }
.trust svg { width: 22px; height: 22px; color: var(--accent-ink); margin-bottom: 18px; }
.trust h3 { font-size: 17px; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 6px; }
.trust p { font-size: 14px; color: var(--muted); }

/* final cta */
.final { margin-top: 128px; position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(ellipse 70% 90% at 50% 110%, var(--bloom), transparent 70%), var(--bg-2); padding: 72px 24px; text-align: center; }
.final svg.mk { width: 88px; height: 88px; margin: 0 auto 26px; display: block; }
.final h2 { font-size: clamp(38px, 6vw, 68px); letter-spacing: -0.045em; line-height: 1; font-weight: 600; margin: 14px 0 18px; }
.final p { font-size: 18px; color: var(--muted); max-width: 32em; margin: 0 auto; }
.final .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

footer { margin-top: 96px; border-top: 1px solid var(--line); padding-block: 48px 64px; }
.foot { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 820px) { .foot { grid-template-columns: 1.4fr repeat(4, minmax(0,1fr)); } }
.foot h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.foot .tag { font-size: 14px; color: var(--muted); max-width: 22em; margin-top: 14px; }
.legal { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--faint); }

/* problem: the blind window */
.blind { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px; margin-bottom: 20px; display: grid; gap: 22px; }
@media (min-width: 980px) { .blind { grid-template-columns: 250px minmax(0,1fr); align-items: center; padding: 26px; gap: 36px; } }
.blind-big b { display: block; font-family: var(--font-display); font-size: clamp(56px, 7vw, 80px); letter-spacing: -0.055em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.blind-big span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 20em; }
.tl-lbl { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.vs { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 4px 11px 4px 9px; border-radius: 999px; }
.vs { white-space: nowrap; }
.vs::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vs.without { color: var(--neg); background: var(--neg-soft); }
.vs.with { color: var(--accent-ink); background: var(--accent-soft); }
.tl-row { display: grid; grid-template-columns: 30fr 14fr; gap: 4px; }
.tl-row div { border-radius: 8px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row .tm { background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); }
.tl-row .cw { background: var(--neg-soft); color: var(--neg); }
.tl-row.em { grid-template-columns: 30fr 5fr 9fr; }
.tl-row.em .lv { background: var(--accent-soft); color: var(--accent-ink); }
.tl-row.em .ok { background: var(--pos-soft); color: var(--pos); text-align: center; }
@media (max-width: 600px) { .tl-row div { white-space: normal; letter-spacing: 0.04em; } }
.tl-row.em .nx { border: 1px dashed var(--line-strong); color: var(--faint); }
.tl-ticks { position: relative; height: 18px; margin: 6px 0 16px; font-size: 11.5px; color: var(--faint); font-family: var(--font-mono); }
.tl-ticks span { position: absolute; top: 0; }
.tl-ticks span:nth-child(2) { left: 68.2%; transform: translateX(-50%); }
.tl-ticks span:nth-child(3) { right: 0; }
.roles { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
@media (min-width: 640px) { .roles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.role { border-left: 2px solid var(--teal); padding: 2px 0 2px 12px; min-width: 0; }
.role h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.role p { font-size: 13px; color: var(--muted); }

/* positioning chart */
.pos-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
@media (min-width: 980px) { .pos-grid { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); } }
.pos-chart { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 14px; min-width: 0; }
.pos-scroll { overflow-x: auto; }
.pos-chart svg { display: block; width: 100%; min-width: 580px; height: auto; }
.pos-chart text { fill: var(--faint); font-family: var(--font-body); font-size: 11px; }
.pos-chart .gl { stroke: var(--line); }
.pos-chart .ax { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; }
.pos-chart .nm { fill: var(--fg); font-weight: 600; font-size: 13px; }
.pos-chart .sb { fill: var(--muted); font-size: 11px; }
.pos-chart .zone { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-dasharray: 4 4; }
.pos-chart .d1 { fill: var(--neg); } .pos-chart .d2 { fill: var(--blue); } .pos-chart .d3 { fill: var(--warn); } .pos-chart .d4 { fill: var(--teal); } .pos-chart .d5 { fill: var(--accent); }
.pos-chart .halo { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.pos-cards { display: grid; gap: 12px; align-content: center; }
.pc { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 14px; padding: 16px 18px; background: var(--surface); min-width: 0; }
.pc .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.pc p { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* operations */
.flow { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.fstep { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; min-width: 0; }
.fstep .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.fstep h4 { margin: 6px 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.fstep b { display: block; font-family: var(--font-display); font-size: 21px; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fstep span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fstep b.w { color: var(--warn); } .fstep b.n { color: var(--neg); }
.fstep.end { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.fstep.end .k { color: var(--accent-ink); }
@media (min-width: 760px) {
  .fstep:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); background: var(--bg); z-index: 2; }
}
.ops-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 980px) { .ops-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } }
.tbl-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 470px; }
.tbl th { text-align: right; font-weight: 500; font-size: 11px; color: var(--faint); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 0 10px 10px; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl td { text-align: right; padding: 11px 0 11px 10px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl td:first-child { font-weight: 500; }
.tbl td:first-child span { display: block; font-size: 12px; color: var(--faint); font-weight: 400; }
.tbl .bad { color: var(--neg); } .tbl .ok { color: var(--pos); } .tbl .mid { color: var(--warn); }
.insight { margin-top: 14px; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: 13.5px; line-height: 1.5; }
.insight svg { width: 22px; height: 22px; }
.insight b { font-weight: 600; }
.porow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.porow:first-child { padding-top: 0; }
.porow .pt { font-size: 14px; font-weight: 500; }
.porow .ps { font-size: 12.5px; color: var(--faint); grid-column: 1; }
.porow .pill { grid-row: span 2; grid-column: 2; }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.mini div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--well); min-width: 0; }
.mini b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mini span { display: block; font-size: 11px; color: var(--faint); line-height: 1.35; }

/* business models */
.mtabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--well); width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 24px; }
.mtabs button { font: 500 14px/1 var(--font-body); color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 10px 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, background-color .2s; }
.mtabs button:hover { color: var(--fg); }
.mtabs button svg { width: 16px; height: 16px; }
.mtabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }
.mpanel { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 980px) { .mpanel { grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 48px; } }
.mpanel[hidden] { display: none; }
.mpanel h3 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.03em; font-weight: 600; line-height: 1.15; margin-bottom: 10px; }
.mpanel .lead { color: var(--muted); }
.mlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.mlist li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 10px; font-size: 14.5px; }
.mlist li::before { content: ""; width: 7px; height: 7px; margin: 9px 0 0 3px; border-radius: 2px; background: var(--accent); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--well); min-width: 0; }
.kpi span { display: block; font-size: 12px; color: var(--faint); }
.kpi b { display: block; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.035em; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.2; }
.kpi i { font-style: normal; font-size: 12px; color: var(--faint); }
.kpi i.up { color: var(--pos); } .kpi i.dn { color: var(--neg); }
.rollup { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 14px; font-size: 14px; color: var(--muted); }
.rollup strong { color: var(--fg); font-weight: 600; }

/* trusted by */
.trusted { padding-block: 56px 0; }
.trusted p { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; }
.brands { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 14px 36px; }
.brands span { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--muted); white-space: nowrap; }
.brands .more { font-weight: 500; font-size: 15px; color: var(--faint); }

/* meetings */
.meet-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 980px) { .meet-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } }
.rec { display: inline-flex; align-items: center; gap: 7px; color: var(--neg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.tx { display: grid; gap: 16px; }
.tline { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.tline svg.mark { width: 28px; height: 28px; }
.tline .nm { display: block; font-size: 12px; color: var(--faint); margin-bottom: 2px; }
.tline p { font-size: 14.5px; line-height: 1.55; }
.tline.em .bub { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); border-radius: 4px 14px 14px 14px; padding: 10px 12px; }
.tline.em .nm { color: var(--accent-ink); }
.tline .mini { margin-top: 10px; }
.mnote { font-size: 12px; color: var(--faint); margin-top: 14px; }


/* roles: work handled by team, horizontal workflow cards */
.roles-sec { padding-block: 96px 80px; overflow: hidden; background:
  radial-gradient(55% 70% at 12% 18%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 70%),
  radial-gradient(50% 70% at 88% 25%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  radial-gradient(70% 60% at 50% 105%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 70%),
  var(--bg-2); }
.roles-sec .head { margin-bottom: 28px; }
.rtabs-wrap { display: flex; justify-content: center; margin-bottom: 36px; }
.rtabs { margin: 0; background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; padding: 5px; }
.rtabs button { border-radius: 999px; padding: 10px 18px; font-size: 15px; }
.rpanel[hidden] { display: none; }
.wtrack { display: flex; align-items: center; gap: 20px; overflow-x: auto; padding: 24px calc(50% - 230px); scrollbar-width: none; min-height: 420px; }
.wtrack::-webkit-scrollbar { display: none; }
.wtrack:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 20px; }
.wf { flex: 0 0 320px; border: 1px solid color-mix(in srgb, var(--surface) 70%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--surface) 52%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; transition: flex-basis .35s cubic-bezier(.22,1,.36,1), background-color .3s, box-shadow .3s; cursor: pointer; }
.wf.on { flex-basis: 460px; background: var(--surface); box-shadow: var(--shadow); cursor: default; }
.wf-h { width: 100%; display: grid; grid-template-columns: 30px minmax(0,1fr) 20px; align-items: center; gap: 12px; padding: 18px 20px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); font: 500 18px/1.25 var(--font-display); letter-spacing: -0.015em; text-align: left; cursor: inherit; }
.wf-ic svg { width: 28px; height: 28px; display: block; }
.pm { position: relative; width: 16px; height: 16px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .25s; }
.pm::after { transform: rotate(90deg); }
.wf.on .pm::after { transform: rotate(0deg); }
.wf-o { padding: 18px 20px 22px; font-family: var(--font-display); font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg); }
.wf.on .wf-o { display: none; }
.wf-b { display: none; padding: 20px 22px 22px; }
.wf.on .wf-b { display: grid; gap: 18px; }
.wf-b ol { margin: 0; padding: 0; list-style: none; counter-reset: w; display: grid; gap: 12px; }
.wf-b li { counter-increment: w; display: grid; grid-template-columns: 22px minmax(0,1fr); column-gap: 6px; font-size: 14px; }
.wf-b li::before { content: counter(w) "."; font-weight: 600; grid-row: span 2; }
.wf-b li b { font-weight: 600; }
.wf-b li span { color: var(--muted); }
.wf-b .see { justify-self: end; }
.rnav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.arr { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.arr:hover { border-color: var(--accent); }
.arr svg { width: 16px; height: 16px; }
.dots { display: flex; gap: 6px; align-items: center; }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 25%, transparent); cursor: pointer; transition: width .3s, background-color .3s; }
.dots button[aria-current="true"] { width: 26px; background: var(--accent); }
@media (max-width: 640px) {
  .wtrack { padding-inline: 8vw; min-height: 460px; gap: 14px; }
  .wf { flex-basis: 74vw; } .wf.on { flex-basis: 84vw; }
  .rtabs-wrap { justify-content: flex-start; }
  .rtabs button { padding: 9px 13px; font-size: 14px; }
}

/* problem tabs */
.ptabs { margin-bottom: 24px; gap: 8px; padding: 0; border: 0; background: none; }
.ptabs button { background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--muted); padding: 11px 16px; }
.ptabs button:hover { color: var(--fg); border-color: var(--accent); }
.ptabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--glow); }
.ppanel[hidden] { display: none; }
#p-gap .blind { margin-bottom: 0; }
.roles-big { margin-top: 0; gap: 16px; }
.roles-big .role { border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 14px; background: var(--surface); padding: 18px 20px; }
.roles-big .role h4 { font-size: 16px; margin-bottom: 4px; }
.roles-big .role p { font-size: 14.5px; }

/* motion */
.rise { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.petal { transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- simplified shell ---------- */
.sec { padding-block: 96px; }
.sec.alt { background: var(--bg-2); }
@media (max-width: 720px) { .sec { padding-block: 72px; } }
.head { margin-bottom: 40px; }
.head h2 { font-size: clamp(30px, 4vw, 46px); }
.head.split { display: grid; gap: 16px; max-width: none; }
@media (min-width: 980px) { .head.split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: 56px; } .head.split p { justify-self: end; } }
.card { background: var(--surface); }
.sec.alt .card, .sec.alt .fin, .sec.alt .blind, .sec.alt .pos-chart, .sec.alt .pc, .sec.alt .cmp, .sec.alt .fstep, .sec.alt .ladder-card { background: var(--surface); }

/* nav with menus */
.nav { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.menus { display: none; align-items: center; gap: 4px; margin-left: 12px; }
@media (min-width: 1000px) { .menus { display: flex; } }
.dd { position: relative; }
.dd > button, .menus > a { font: 500 14.5px/1 var(--font-body); color: var(--muted); background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: color .2s, background-color .2s; }
.dd > button:hover, .dd.open > button, .menus > a:hover { color: var(--fg); background: var(--well); }
.dd > button svg { width: 12px; height: 12px; transition: transform .2s; }
.dd.open > button svg { transform: rotate(180deg); }
.panel { position: absolute; top: calc(100% + 8px); left: -8px; min-width: 330px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--menu-shadow); display: grid; gap: 2px; }
.panel.wide { min-width: 560px; grid-template-columns: 1fr 1fr; }
.panel a { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 2px 12px; padding: 10px; border-radius: 10px; text-decoration: none; transition: background-color .15s; }
.panel a:hover, .panel a:focus-visible { background: var(--bg-2); }
.panel a i { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.panel a i svg { width: 17px; height: 17px; }
.panel a b { font-size: 14px; font-weight: 600; color: var(--fg); }
.panel a span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.burger { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); cursor: pointer; }
.burger svg { width: 18px; height: 18px; }
@media (min-width: 1000px) { .burger { display: none; } }
.mnav { border-top: 1px solid var(--line); background: var(--bg); max-height: calc(100vh - 64px); overflow-y: auto; }
.mnav .container { padding-block: 12px 24px; display: grid; gap: 4px; }
.mnav details { border-bottom: 1px solid var(--line); }
.mnav summary { list-style: none; cursor: pointer; padding: 14px 4px; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: "+"; color: var(--faint); font-weight: 400; font-size: 20px; }
.mnav details[open] summary::after { content: "−"; }
.mnav details a { display: block; padding: 9px 4px 9px 12px; color: var(--muted); text-decoration: none; font-size: 15px; }
.mnav .mcta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* hero */
.hero { padding-top: 72px; padding-bottom: 72px; }
.hero h1 { font-size: clamp(38px, 4.8vw, 58px); line-height: 1.04; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }
.hero::before { opacity: .9; }
.hstats { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .hstats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.hstats div { padding: 22px 24px 0 0; min-width: 0; }
@media (min-width: 720px) { .hstats div + div { padding-left: 24px; border-left: 1px solid var(--line); } }
.hstats b { display: block; font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -0.045em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.hstats span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); max-width: 24em; }
.trusted { padding-block: 40px 56px; border-bottom: 1px solid var(--line); }

/* feature tabs */
.ftabs { margin-bottom: 32px; }
.fpanel { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 980px) { .fpanel { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 56px; } }
.fpanel[hidden] { display: none; }
.fpanel h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; font-weight: 600; line-height: 1.12; margin-bottom: 12px; }
.fpanel .lead { color: var(--muted); font-size: 16.5px; }
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; font-size: 15px; counter-increment: st; }
.steps li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px/1 var(--font-mono); color: var(--accent-ink); background: var(--accent-soft); }
.steps b { font-weight: 600; }
.steps span { color: var(--muted); }
.ft-link { display: inline-flex; margin-top: 22px; font-size: 14.5px; font-weight: 500; color: var(--accent-ink); text-decoration: none; gap: 6px; align-items: center; }
.ft-link:hover { text-decoration: underline; }

/* meetings strip */
.msteps { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
@media (min-width: 860px) { .msteps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; } }
.msteps div { min-width: 0; border-top: 1px solid var(--line-strong); padding-top: 18px; }
.msteps h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.msteps p { font-size: 14.5px; color: var(--muted); }
.invite { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; color: var(--muted); }
.invite img { border-radius: 6px; flex: none; }
.invite b { color: var(--fg); font-weight: 600; }
.invite .inv-ok { font: 500 12.5px/1 var(--font-body); padding: 7px 10px; border-radius: 8px; background: var(--pos-soft); color: var(--pos); }
.final { margin-top: 0; }
footer { margin-top: 0; }

/* ── Added 6 Oct 2026: Log in as a button at every width; the demo form ── */
.nav-right .login { display: inline-flex; align-items: center; font: 500 13px/1 var(--font-body); color: var(--fg); padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); text-decoration: none; transition: border-color .2s, color .2s; }
.nav-right .login:hover { border-color: var(--accent); color: var(--fg); }

.demo-form { width: min(560px, 100%); margin: 28px auto 0; display: grid; gap: 14px; text-align: left; }
.demo-form label { display: grid; gap: 6px; font: 500 12.5px/1.3 var(--font-body); color: var(--muted); min-width: 0; }
.demo-form label { grid-template-columns: 1fr auto; align-items: end; }
.demo-form label > input, .demo-form label > select, .demo-form label > textarea { grid-column: 1 / -1; }
.demo-form .opt { font-weight: 400; color: var(--faint); }
.demo-form input, .demo-form select, .demo-form textarea { width: 100%; min-width: 0; font: 500 14.5px/1.4 var(--font-body); color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color .2s, box-shadow .2s; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.demo-form.touched :is(input, select, textarea):invalid { border-color: #e11d48; }
.demo-form textarea { resize: vertical; }
.df-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .df-row { grid-template-columns: 1fr 1fr; } }
.df-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.df-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.df-fine { margin: 0; text-align: center; font: 400 12.5px/1.5 var(--font-body); color: var(--faint); }
.df-done { margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--accent-soft); color: var(--fg); font: 500 14.5px/1.5 var(--font-body); text-align: center; }
.df-error { margin: 0; text-align: center; color: #e11d48; font: 500 13px/1.5 var(--font-body); }
.demo-form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }

/* ── Added 7 Oct 2026: the real Emery logo (light-background lockup by default, dark lockup in dark scheme) ── */
.logo picture, .logo img { display: block; }
.logo img { height: 32px; width: auto; }
.logo.logo-foot img { height: 26px; }

.foot ul a { color: inherit; text-decoration: none; }
.foot ul a:hover { color: var(--fg); text-decoration: underline; }

/* ── Added 7 Oct 2026: the Emery loader (the brand animation the app uses) as the mark above the final call
   to action; the static icon for people who prefer reduced motion ── */
.final picture.mk { width: 88px; height: 88px; margin: 0 auto 26px; display: block; }
.final picture.mk img { width: 100%; height: 100%; display: block; }

/* ── site v2 pass 1 (7 Oct 2026): one idea per section; the mock-ups are the heroes ── */
/* Section heads: one line of support copy, not a paragraph. */
.head p, .lead { max-width: 36em; }
.head h2 { max-width: 20ch; }
.head.center h2 { margin-inline: auto; }
.hero .sub { font-size: 18px; max-width: 30em; }

/* The plate: every mock-up card shares one frame — soft depth, a hairline highlight, a lift on hover. */
.card { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -32px rgba(0,0,0,.55), 0 0 0 1px var(--line); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 34px 70px -30px rgba(0,0,0,.6), 0 0 0 1px var(--line-strong); }
@media (prefers-color-scheme: light) { .card { box-shadow: 0 24px 60px -36px rgba(30,20,70,.35), 0 0 0 1px var(--line); } .card:hover { box-shadow: 0 34px 70px -34px rgba(30,20,70,.4), 0 0 0 1px var(--line-strong); } }

/* The hero plate draws its cash line when the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .hero .cash .ln { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw-line 1.8s .5s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes draw-line { to { stroke-dashoffset: 0; } }
}

/* Workflow cards are a title and a line now: let them sit in a row where there is room. */
.wf .wf-o { margin-bottom: 0; }

/* The comparison table is a desktop object; the three cards carry the point on a phone. */
@media (max-width: 859px) { .cmp-scroll { display: none; } }

/* The customers strip: one quiet line. */
.trusted p { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.trusted .brands span { font-weight: 500; color: var(--muted); }

/* ── site v2 pass 2 (7 Oct 2026): the phone pass ── */
@media (max-width: 640px) {
  .sec { padding-block: 64px; }
  .head { margin-bottom: 32px; }
  /* Stacked cards become one-card-at-a-time swipe strips. */
  .meet-grid, .flow, .pos-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .meet-grid::-webkit-scrollbar, .flow::-webkit-scrollbar, .pos-cards::-webkit-scrollbar { display: none; }
  .meet-grid > *, .flow > .fstep, .pos-cards > .pc { flex: 0 0 86%; scroll-snap-align: center; }
  /* Small supporting cards go two-up. */
  .fin-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fin { padding: 14px; gap: 4px; }
  .fin svg { width: 16px; height: 16px; margin-bottom: 4px; }
  .fin h3 { font-size: 14px; }
  .fin p { font-size: 12.5px; line-height: 1.45; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust div { padding: 18px 16px; }
  .trust svg { width: 18px; height: 18px; margin-bottom: 10px; }
  .trust h3 { font-size: 14.5px; }
  .trust p { font-size: 12.5px; line-height: 1.45; }
  /* The three proof numbers sit in one row. */
  .hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hstats > div { min-width: 0; }
  .hstats b { font-size: 26px; }
  .hstats span { font-size: 12px; line-height: 1.4; }
  .msteps p { font-size: 13.5px; }
}

/* ── site v2 pass 3a (7 Oct 2026): the By-team cards — one plate, the mark, numbered points, a quiet link ── */
.wf { position: relative; border-radius: 20px; }
.wf.on { box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -36px rgba(0,0,0,.6), 0 0 0 1px var(--line-strong); }
.wf.on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--teal) 55%, transparent); opacity: .85; pointer-events: none; }
@media (prefers-color-scheme: light) { .wf.on { box-shadow: 0 30px 70px -40px rgba(30,20,70,.35), 0 0 0 1px var(--line-strong); } }
.wf:not(.on):hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 68%, transparent); }
.wf-h { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 20px 22px 16px; font-size: 19px; }
.wf-ic svg { width: 26px; height: 26px; }
.wf:not(.on) .wf-ic svg { opacity: .55; }
.wf-o { padding: 16px 22px 22px; font-size: 18px; color: var(--muted); }
.wf-b { padding: 18px 22px 22px; }
.wf.on .wf-b { gap: 16px; }
.wf-b ol { gap: 14px; }
.wf-b li { grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; font-size: 14.5px; line-height: 1.45; }
.wf-b li::before { content: counter(w, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; font-weight: 500; color: var(--accent-ink); padding-top: 4px; }
.wf-b li b { font-weight: 600; letter-spacing: -0.01em; }
.wf-b li span { color: var(--muted); }
.wf-b .see { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--accent-ink); font-weight: 500; }
.wf-b .see::after { content: " →"; }
.wf-b .see:hover { color: var(--fg); border-color: transparent; }

/* ── site v2 pass 3b (7 Oct 2026): the real Emery icon as the mark on every card ── */
img.mark { display: inline-block; width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.who img.mark { width: 18px; height: 18px; }
.wf-ic img.mark { width: 26px; height: 26px; display: block; }
.tline img.mark { width: 28px; height: 28px; }
.insight img.mark { width: 22px; height: 22px; }
.rollup img.mark { width: 20px; height: 20px; }
.wf:not(.on) .wf-ic img.mark { opacity: .55; }
.msg-e img.mark { width: 26px; height: 26px; }

/* ── site v2 pass 3d (7 Oct 2026): sections restored to the prototype's words — phone grids go back to one column, meeting figures (.mini) wrap ── */
@media (max-width: 640px) {
  .fin-grid, .trust { grid-template-columns: 1fr; }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .kpis > .kpi { min-width: 0; }
}
@media (max-width: 640px) {
  .tx .tline .bub .mini { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
  .tx .tline .bub .mini b { white-space: nowrap; }
}

/* ── site v2 pass 4a (7 Oct 2026): Ask / Pin / Watch / Act as product shots ── */
/* the frame: a lit plate with a bloom behind it, a glass title bar, deeper shadow */
.shot { position: relative; isolation: isolate; }
.shot::before { content: ""; position: absolute; inset: 12% -8% -10%; z-index: -1; pointer-events: none; border-radius: 40px;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
              radial-gradient(ellipse 40% 40% at 20% 30%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%);
  filter: blur(28px); opacity: .9; }
@media (prefers-color-scheme: light) { .shot::before { opacity: .5; } }
.shot .card { border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -40px rgba(0,0,0,.65), 0 0 0 1px var(--line-strong); }
.shot .card-h { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 13px 18px; }
.shot .card-h > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.shot .card-h > span:first-child::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: url(/icon.svg) center/contain no-repeat; opacity: .9; }
/* product-level chart finish */
.shot .chart { padding: 14px 14px 10px; border-color: color-mix(in srgb, var(--line) 80%, transparent); }
.shot .chart text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; }
.shot .chart .val { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; fill: var(--fg); }
.shot .chart .gl { stroke-dasharray: 2 4; }
.shot .tile b { font-size: 28px; }
.shot .wrow .pill { font-variant-numeric: tabular-nums; }
.shot .ledger i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 14%, transparent); }

/* choreography — only for visitors who allow motion; everything is visible by default and
   .play (set by site.js) runs each panel's story from the start */
/* (motion for this pass moved to "site v2 pass 5") */
/* the bloom behind a product shot paints past the card; it must never widen the page */
#features { overflow-x: clip; }
@media (max-width: 640px) { .shot::before { inset: 10% 0 -8%; } }
/* phone: the chart scales to ~60%, so its labels are set larger in chart units to land at ~9px on screen */
@media (max-width: 640px) {
  .shot .chart text { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
  .shot .chart .val { font-size: 16px; }
}

/* ── site v2 pass 4b (7 Oct 2026): every mock-up a product shot — light, reveal, tilt, breakouts, cursor ── */
@property --shot-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero, #meetings, #problem, #ladder, #ops, #models { overflow-x: clip; }
.shot { position: relative; isolation: isolate; transition: transform .5s cubic-bezier(.22,1,.36,1); }
/* the glow under every shot: big enough to see */
.shot::before { inset: 2% -12% -14%; opacity: 1; filter: blur(36px);
  background: radial-gradient(ellipse 55% 50% at 50% 62%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 70%),
              radial-gradient(ellipse 34% 34% at 16% 24%, color-mix(in srgb, var(--teal) 32%, transparent), transparent 70%); }
@media (prefers-color-scheme: light) { .shot::before { opacity: .55; } }
/* the frame: a lit edge whose highlight travels round the card */
.shot .card, .shot .ladder-card { border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--shot-a), var(--line-strong) 0deg 200deg, color-mix(in srgb, var(--accent) 85%, white) 255deg, var(--teal) 300deg, var(--line-strong) 345deg) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 50px 100px -44px rgba(0,0,0,.75), 0 18px 40px -24px color-mix(in srgb, var(--accent) 40%, transparent); }
@media (prefers-color-scheme: light) { .shot .card, .shot .ladder-card { box-shadow: 0 40px 90px -46px rgba(30,20,80,.45), 0 16px 36px -24px color-mix(in srgb, var(--accent) 35%, transparent); } }
.shot .card-h > span.who::before { content: none; }
/* desktop spotlight that follows the mouse */
.shot .card::after, .shot .ladder-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,.07), transparent 45%); }
.shot:hover .card::after, .shot:hover .ladder-card::after { opacity: 1; }
@media (prefers-color-scheme: light) { .shot .card::after, .shot .ladder-card::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -30%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 45%); } }

/* breakouts: glass cards that sit over the frame's edge */
.float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; white-space: nowrap; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line-strong); box-shadow: 0 26px 50px -22px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.06) inset; font-size: 12.5px; line-height: 1.3; }
@media (prefers-color-scheme: light) { .float { box-shadow: 0 24px 48px -22px rgba(30,20,80,.35); } }
.float b { display: block; font-weight: 600; font-size: 13px; color: var(--fg); letter-spacing: -0.005em; }
.float b small { font-weight: 400; font-size: 11.5px; color: var(--faint); margin-left: 6px; }
.float em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.fl-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); }
.fl-ic.ok { background: var(--pos-soft); color: var(--pos); }
.fl-ic.img { background: none; }
.fl-ic svg { width: 16px; height: 16px; }
.fl-ic img { width: 30px; height: 30px; display: block; }
.fl-tr { top: -22px; right: -28px; }
.fl-tl { top: 66px; left: -34px; }
.fl-in { top: 18%; right: 4%; }
.fl-hero { right: -36px; top: 41%; }
.float.notif { width: 300px; white-space: normal; border-radius: 18px; padding: 12px 14px 12px 12px; }
@media (max-width: 760px) { .float { display: none; } }

/* the cursor that does the clicking (desktop only) */
.cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 22px; height: 22px; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.cursor svg { display: block; }
.cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
@media (hover: none), (max-width: 760px) { .cursor { display: none; } }
.msg-u.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: currentColor; animation: blink 1s steps(1) infinite; }

/* (motion for this pass moved to "site v2 pass 5") */
/* a shot is a grid/flex item: without this, a wide table inside (the carrier table) widens the column past the screen */
.shot { min-width: 0; }

/* ── site v2 pass 5 (7 Oct 2026): the motion system — armed from first paint, played on entry ──
   html.motion (set in <head>, only when the visitor allows motion) attaches every animation below from
   the first frame; a stage (.st) that has not reached the viewport is held on its first frame; site.js
   adds .play as it enters. Without .motion — reduced motion, no JavaScript, or site.js late — nothing here
   applies and the page is simply static and complete. */
.motion .st:not(.play), .motion .st:not(.play) *, .motion .st:not(.play) *::before, .motion .st:not(.play) *::after { animation-play-state: paused !important; }
.shot { --glow-o: 1; }
@media (prefers-color-scheme: light) { .shot { --glow-o: .55; } }

@keyframes shot-in { from { opacity: 0; transform: perspective(1600px) rotateX(10deg) translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shot-swap { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes shot-glow-in { from { opacity: 0; transform: scale(.85); } to { opacity: var(--glow-o, 1); transform: none; } }
@keyframes shot-head { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shot-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shot-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shot-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes shot-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes shot-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shot-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent); } }
@keyframes shot-press { 0%, 100% { transform: none; filter: none; } 35% { transform: scale(.95); filter: brightness(1.15); } }
@keyframes shot-toast { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes shot-spin { to { --shot-a: 360deg; } }
@keyframes shot-float-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes shot-cursor {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)); }
  14% { opacity: 1; }
  66% { transform: translate(var(--cx), var(--cy)) scale(1); }
  73% { transform: translate(var(--cx), var(--cy)) scale(.8); }
  82% { transform: translate(var(--cx), var(--cy)) scale(1); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)); opacity: 0; } }
@keyframes shot-ripple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(2.2); } }
@keyframes shot-reveal-x { from { clip-path: inset(0 100% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
@keyframes shot-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes shot-flash { 0%, 100% { background: transparent; } 35% { background: var(--neg-soft); } }

/* section headings ease up as they arrive */
.motion .head.st { animation: shot-head .9s cubic-bezier(.16,1,.3,1) both; }

/* the frame: rises into place on the way in; a quick swap when its tab is picked; the glow blooms with it */
.motion .st .shot, .motion .shot.st:not(.stack) { animation: shot-in .95s cubic-bezier(.16,1,.3,1) backwards; transform-origin: 50% 100%; }
.motion .st .shot::before, .motion .shot.st:not(.stack)::before { animation: shot-glow-in 1.5s ease-out .1s both; }
.motion .st.tabbed .shot { animation: shot-swap .5s cubic-bezier(.16,1,.3,1) backwards; }
.motion .st.tabbed .shot::before { animation: none; }
.motion .fpanel.st.tabbed > div:first-child, .motion .mpanel.st.tabbed > div:first-child, .motion .ppanel.st.tabbed > div:first-child { animation: shot-fade .45s ease-out both; }
.motion .meet-grid.st .shot:nth-child(2), .motion .ops-grid.st .shot:nth-child(2), .motion .ppanel.st .shot { animation-delay: .1s; }
/* the edge light travels only while the shot is on screen */
.motion .inview .shot .card, .motion .inview .shot .ladder-card, .motion .shot.inview .card, .motion .shot.inview .ladder-card { animation: shot-spin 12s linear infinite; }
/* breakouts arrive and stay still; the cursor glides in, clicks, leaves */
.motion .st .float, .motion .shot.st .float { animation: shot-float-in .6s cubic-bezier(.16,1,.3,1) var(--fd, 2s) both; }
.motion .st .cursor, .motion .shot.st .cursor { animation: shot-cursor var(--cd, 1.3s) cubic-bezier(.45,0,.2,1) var(--cs, 2s) both; }
.motion .st .cursor::after, .motion .shot.st .cursor::after { animation: shot-ripple .6s ease-out calc(var(--cs, 2s) + var(--cd, 1.3s) * .72) both; }

/* hero: the forecast draws over its real length; the dip lands as the line reaches it; the cursor moves
   the deposit and the result floats in — all done by ~3.5s */
.hero .shot { --cs: 1.95s; --cd: 1.25s; --fd: 3.05s; }
.motion .hero .cash .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: shot-draw 1.4s cubic-bezier(.65,0,.35,1) .45s both; }
.motion .hero .cash .ar { animation: shot-fade .9s ease-out .95s both; }
.motion .hero .cash .below { animation: shot-fade .4s ease-out 1.15s both; }
.motion .hero .cash .pt { transform-box: fill-box; transform-origin: center; animation: shot-pop .45s cubic-bezier(.16,1,.3,1) 1.12s both; }
.motion .hero .cash .lbl { animation: shot-fade .4s ease-out 1.22s both; }
.motion .hero .acts .act { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .hero .acts .act:nth-child(1) { animation-delay: 1.5s; }
.motion .hero .acts .act:nth-child(2) { animation-delay: 1.57s; }
.motion .hero .acts .act:nth-child(3) { animation-delay: 1.64s; }
.motion .hero .acts .act:nth-child(4) { animation-delay: 1.71s; }
.motion .hero .acts .act.go { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) 1.5s both, shot-press .5s ease-in-out 2.85s 1; }

/* Ask — the question types (~0.7s), Emery answers, the chart builds, the next steps appear, the cursor pins it */
#f-ask { --cs: 2.2s; --cd: 1.3s; --fd: 2.0s; }
.motion .fpanel.st .msg-u { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .msg-e > img { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) .8s both; }
.motion .fpanel.st .msg-e p { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) .9s both; }
.motion .fpanel.st .chart { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) 1.1s both; }
.motion .fpanel.st .chart rect { transform-box: fill-box; transform-origin: 50% 100%; animation: shot-grow .7s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .chart rect:nth-of-type(1), .motion .fpanel.st .chart rect:nth-of-type(2) { animation-delay: 1.25s; }
.motion .fpanel.st .chart rect:nth-of-type(3), .motion .fpanel.st .chart rect:nth-of-type(4) { animation-delay: 1.35s; }
.motion .fpanel.st .chart rect:nth-of-type(5), .motion .fpanel.st .chart rect:nth-of-type(6) { animation-delay: 1.45s; }
.motion .fpanel.st .chart rect:nth-of-type(7), .motion .fpanel.st .chart rect:nth-of-type(8) { animation-delay: 1.55s; }
.motion .fpanel.st .chart .val { animation: shot-fade .4s ease-out 1.8s both; }
.motion .fpanel.st .msg-foot .act { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .msg-foot .act:nth-child(1) { animation-delay: 1.95s; }
.motion .fpanel.st .msg-foot .act:nth-child(2) { animation-delay: 2.03s; }
.motion .fpanel.st .msg-foot .act:nth-child(3) { animation-delay: 2.11s; }
.motion .fpanel.st .msg-foot .act.go { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) 2.11s both, shot-glow 1.2s ease-out 3.14s 1; }

/* Pin — tiles land, the new one glows, the sparklines draw */
#f-pin { --fd: 1.0s; }
.motion .fpanel.st .tile { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .tile:nth-child(1) { animation-delay: 0.05s; }
.motion .fpanel.st .tile:nth-child(2) { animation-delay: 0.13s; }
.motion .fpanel.st .tile:nth-child(3) { animation-delay: 0.21s; }
.motion .fpanel.st .tile:nth-child(4) { animation-delay: 0.29s; }
.motion .fpanel.st .tile.new { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) .05s both, shot-glow 1.4s ease-out .7s 1; }
.motion .fpanel.st .tile .spark-l, .motion .fpanel.st .tile .spark-t { stroke-dasharray: 1; animation: shot-draw .9s cubic-bezier(.65,0,.35,1) both; }
.motion .fpanel.st .tile .spark-a, .motion .fpanel.st .tile .spark-ta { animation: shot-fade .7s ease-out both; }
.motion .fpanel.st .tile:nth-child(1) path { animation-delay: 0.35s; }
.motion .fpanel.st .tile:nth-child(2) path { animation-delay: 0.43s; }
.motion .fpanel.st .tile:nth-child(3) path { animation-delay: 0.51s; }
.motion .fpanel.st .tile:nth-child(4) path { animation-delay: 0.59s; }
.motion .fpanel.st .refresh { animation: shot-fade .5s ease-out 1.1s both; }

/* Watch — the rules list in, the cash rule fires, the alert arrives, then the phone notification */
#f-watch { --fd: 1.7s; }
.motion .fpanel.st .wrow { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .wrow:nth-child(1) { animation-delay: 0.05s; }
.motion .fpanel.st .wrow:nth-child(2) { animation-delay: 0.11s; }
.motion .fpanel.st .wrow:nth-child(3) { animation-delay: 0.17s; }
.motion .fpanel.st .wrow:nth-child(4) { animation-delay: 0.23s; }
.motion .fpanel.st .wrow:nth-child(5) { animation-delay: 0.29s; }
.motion .fpanel.st .wrow:nth-child(1) .pill { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) .7s both; }
.motion .fpanel.st .toast { animation: shot-toast .6s cubic-bezier(.16,1,.3,1) 1.05s both; }
.motion .fpanel.st .channels .pill { animation: shot-rise .45s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .channels .pill:nth-child(1) { animation-delay: 1.4s; }
.motion .fpanel.st .channels .pill:nth-child(2) { animation-delay: 1.46s; }
.motion .fpanel.st .channels .pill:nth-child(3) { animation-delay: 1.52s; }
.motion .fpanel.st .channels .pill:nth-child(4) { animation-delay: 1.58s; }

/* Act — the proposal, its figures, the cursor presses Confirm, the ledger ticks through */
#f-act { --cs: .3s; --cd: 1.2s; --fd: 2.3s; }
.motion .fpanel.st .draft { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .kv div { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .kv div:nth-child(1) { animation-delay: 0.3s; }
.motion .fpanel.st .kv div:nth-child(2) { animation-delay: 0.38s; }
.motion .fpanel.st .kv div:nth-child(3) { animation-delay: 0.46s; }
.motion .fpanel.st .why { animation: shot-fade .5s ease-out .6s both; }
.motion .fpanel.st .draft-f .btn.pri { animation: shot-press .5s ease-in-out 1.16s 1; }
.motion .fpanel.st .ledger div { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .ledger div:nth-child(1) { animation-delay: 1.45s; }
.motion .fpanel.st .ledger div:nth-child(2) { animation-delay: 1.7s; }
.motion .fpanel.st .ledger div:nth-child(3) { animation-delay: 1.95s; }
.motion .fpanel.st .ledger i { transform-box: fill-box; animation: shot-pop .45s cubic-bezier(.16,1,.3,1) both; }
.motion .fpanel.st .ledger div:nth-child(1) i { animation-delay: 1.57s; }
.motion .fpanel.st .ledger div:nth-child(2) i { animation-delay: 1.82s; }
.motion .fpanel.st .ledger div:nth-child(3) i { animation-delay: 2.07s; }

/* Meetings — the call plays out; the notes assemble */
.motion .meet-grid.st .tline { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .meet-grid.st .tline:nth-child(1) { animation-delay: .25s; } .motion .meet-grid.st .tline:nth-child(2) { animation-delay: .8s; }
.motion .meet-grid.st .tline:nth-child(3) { animation-delay: 1.5s; } .motion .meet-grid.st .tline:nth-child(4) { animation-delay: 1.95s; }
.motion .meet-grid.st .tline.em > img { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) both; }
.motion .meet-grid.st .tline:nth-child(2) > img { animation-delay: .8s; } .motion .meet-grid.st .tline:nth-child(4) > img { animation-delay: 1.95s; }
.motion .meet-grid.st .shot:nth-child(2) .card-h .pill { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) .9s both; }
.motion .meet-grid.st .shot:nth-child(2) .evts div { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .meet-grid.st .shot:nth-child(2) .evts div:nth-child(1) { animation-delay: 1.05s; }
.motion .meet-grid.st .shot:nth-child(2) .evts div:nth-child(2) { animation-delay: 1.17s; }
.motion .meet-grid.st .shot:nth-child(2) .porow { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .meet-grid.st .shot:nth-child(2) .porow .pill { animation: shot-slide .45s cubic-bezier(.16,1,.3,1) both; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(4) { animation-delay: 1.35s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(5) { animation-delay: 1.47s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(6) { animation-delay: 1.59s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(7) { animation-delay: 1.71s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(4) .pill { animation-delay: 1.5s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(5) .pill { animation-delay: 1.62s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(6) .pill { animation-delay: 1.74s; }
.motion .meet-grid.st .shot:nth-child(2) .porow:nth-of-type(7) .pill { animation-delay: 1.86s; }
.motion .meet-grid.st .mnote { animation: shot-fade .5s ease-out 2.0s both; }

/* The 44-day gap — the number counts, the two timelines draw left to right */
.motion .ppanel.st .blind-big { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) .05s both; }
.motion .ppanel.st .blind > div:nth-child(2) > :nth-child(1) { animation: shot-fade .45s ease-out .15s both; }
.motion .ppanel.st .blind > div:nth-child(2) > :nth-child(3) { animation: shot-fade .45s ease-out .95s both; }
.motion .ppanel.st .blind > div:nth-child(2) > :nth-child(4) { animation: shot-fade .45s ease-out 1.1s both; }
.motion .ppanel.st .tl-row > div { animation: shot-reveal-x .75s cubic-bezier(.65,0,.35,1) both; }
.motion .ppanel.st .tl-row:not(.em) .tm { animation-delay: .3s; } .motion .ppanel.st .tl-row:not(.em) .cw { animation-delay: .8s; }
.motion .ppanel.st .tl-row.em .lv { animation-delay: 1.25s; }
.motion .ppanel.st .tl-row.em .ok { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) 1.75s both; }
.motion .ppanel.st .tl-row.em .nx { animation: shot-fade .5s ease-out 1.9s both; }

/* A month with Emery — two truths; the live line draws, the fixes land, the close reconciles */
.motion .ppanel.st .truth { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) both; }
.motion .ppanel.st .truth:nth-child(1) { animation-delay: .05s; } .motion .ppanel.st .truth:nth-child(2) { animation-delay: .15s; }
.motion .ppanel.st .clash { animation: shot-fade .5s ease-out .45s both; }
.motion .ppanel.st .pace .bud { animation: shot-fade .6s ease-out .4s both; }
.motion .ppanel.st .pace .act { stroke-dasharray: 1; animation: shot-draw 1.4s cubic-bezier(.65,0,.35,1) .55s both; }
.motion .ppanel.st .pace .area { animation: shot-fade .8s ease-out 1.8s both; }
.motion .ppanel.st .pace .miss, .motion .ppanel.st .pace .ln { animation: shot-fade .6s ease-out 1.25s both; }
.motion .ppanel.st .pace circle { transform-box: fill-box; transform-origin: center; animation: shot-pop .45s cubic-bezier(.16,1,.3,1) both; }
.motion .ppanel.st .pace circle:nth-of-type(1), .motion .ppanel.st .pace .m1t { animation-delay: 1.0s; }
.motion .ppanel.st .pace circle:nth-of-type(2), .motion .ppanel.st .pace .m2t { animation-delay: 1.18s; }
.motion .ppanel.st .pace .mk { animation: shot-fade .4s ease-out both; }
.motion .ppanel.st .pace text:not(.mk):not(.ln) { animation: shot-fade .5s ease-out 1.85s both; }
.motion .ppanel.st .shot .evts div { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .ppanel.st .shot .evts div:nth-child(1) { animation-delay: 1.95s; }
.motion .ppanel.st .shot .evts div:nth-child(2) { animation-delay: 2.05s; }
.motion .ppanel.st .shot .evts div:nth-child(3) { animation-delay: 2.15s; }
.motion .ppanel.st .recon-row { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .ppanel.st .recon-row:nth-child(1) { animation-delay: 2.3s; }
.motion .ppanel.st .recon-row:nth-child(2) { animation-delay: 2.38s; }
.motion .ppanel.st .recon-row:nth-child(3) { animation-delay: 2.46s; }
.motion .ppanel.st .recon-row:nth-child(4) { animation-delay: 2.54s; }
.motion .ppanel.st .recon-row:nth-child(5) { animation-delay: 2.62s; }
.motion .ppanel.st .recon-ok { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) 2.9s both; }

/* The waterfall builds left to right, then the brackets say where other tools stop */
#ladder .shot { --fd: 2.0s; }
.motion .shot.st .ladder-scroll rect { transform-box: fill-box; animation: shot-grow .6s cubic-bezier(.16,1,.3,1) both; }
.motion .shot.st .ladder-scroll rect.tot { transform-origin: 50% 100%; }
.motion .shot.st .ladder-scroll rect.del { transform-origin: 50% 0%; }
.motion .shot.st .ladder-scroll rect:nth-of-type(1) { animation-delay: 0.3s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(2) { animation-delay: 0.39s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(3) { animation-delay: 0.48s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(4) { animation-delay: 0.57s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(5) { animation-delay: 0.66s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(6) { animation-delay: 0.75s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(7) { animation-delay: 0.84s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(8) { animation-delay: 0.93s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(9) { animation-delay: 1.02s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(10) { animation-delay: 1.11s; }
.motion .shot.st .ladder-scroll rect:nth-of-type(11) { animation-delay: 1.2s; }
.motion .shot.st .ladder-scroll text.v, .motion .shot.st .ladder-scroll text.vd { animation: shot-fade .4s ease-out both; }
.motion .shot.st .ladder-scroll text:nth-of-type(1) { animation-delay: 0.55s; }
.motion .shot.st .ladder-scroll text:nth-of-type(2) { animation-delay: 0.64s; }
.motion .shot.st .ladder-scroll text:nth-of-type(3) { animation-delay: 0.73s; }
.motion .shot.st .ladder-scroll text:nth-of-type(4) { animation-delay: 0.82s; }
.motion .shot.st .ladder-scroll text:nth-of-type(5) { animation-delay: 0.91s; }
.motion .shot.st .ladder-scroll text:nth-of-type(6) { animation-delay: 1s; }
.motion .shot.st .ladder-scroll text:nth-of-type(7) { animation-delay: 1.09s; }
.motion .shot.st .ladder-scroll text:nth-of-type(8) { animation-delay: 1.18s; }
.motion .shot.st .ladder-scroll text:nth-of-type(9) { animation-delay: 1.27s; }
.motion .shot.st .ladder-scroll text:nth-of-type(10) { animation-delay: 1.36s; }
.motion .shot.st .ladder-scroll text:nth-of-type(11) { animation-delay: 1.45s; }
.motion .shot.st .ladder-scroll .cn { animation: shot-fade .5s ease-out 1.4s both; }
.motion .shot.st .ladder-scroll .br:not(.em), .motion .shot.st .ladder-scroll .bt:not(.em) { animation: shot-fade .5s ease-out 1.5s both; }
.motion .shot.st .ladder-scroll .br.em, .motion .shot.st .ladder-scroll .bt.em { animation: shot-fade .6s ease-out 1.7s both; }

/* Operations — the chain lights up; the carrier problem flags itself; the POs land */
.motion .flow.st .fstep { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .flow.st .fstep:nth-child(1) { animation-delay: 0.05s; }
.motion .flow.st .fstep:nth-child(2) { animation-delay: 0.13s; }
.motion .flow.st .fstep:nth-child(3) { animation-delay: 0.21s; }
.motion .flow.st .fstep:nth-child(4) { animation-delay: 0.29s; }
.motion .flow.st .fstep:nth-child(5) { animation-delay: 0.37s; }
.motion .flow.st .fstep.end { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) .37s both, shot-glow 1.3s ease-out .9s 1; }
.motion .ops-grid.st .tbl tbody tr { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .ops-grid.st .tbl tbody tr:nth-child(1) { animation-delay: 0.35s; }
.motion .ops-grid.st .tbl tbody tr:nth-child(2) { animation-delay: 0.45s; }
.motion .ops-grid.st .tbl tbody tr:nth-child(3) { animation-delay: 0.55s; }
.motion .ops-grid.st .tbl td.bad { animation: shot-flash 1.1s ease-out .9s both; }
.motion .ops-grid.st .insight { animation: shot-toast .6s cubic-bezier(.16,1,.3,1) 1.2s both; }
.motion .ops-grid.st .insight > img, .motion .mpanel.st .insight > img { animation: shot-pop .5s cubic-bezier(.16,1,.3,1) both; }
.motion .ops-grid.st .insight > img { animation-delay: 1.3s; }
.motion .ops-grid.st .shot:nth-child(2) .porow { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .ops-grid.st .shot:nth-child(2) .porow .pill { animation: shot-pop .45s cubic-bezier(.16,1,.3,1) both; }
.motion .ops-grid.st .shot:nth-child(2) .porow:nth-of-type(1) { animation-delay: 0.4s; }
.motion .ops-grid.st .shot:nth-child(2) .porow:nth-of-type(2) { animation-delay: 0.5s; }
.motion .ops-grid.st .shot:nth-child(2) .porow:nth-of-type(3) { animation-delay: 0.6s; }
.motion .ops-grid.st .shot:nth-child(2) .porow:nth-of-type(1) .pill { animation-delay: 0.75s; }
.motion .ops-grid.st .shot:nth-child(2) .porow:nth-of-type(2) .pill { animation-delay: 0.83s; }
.motion .ops-grid.st .shot:nth-child(2) .porow:nth-of-type(3) .pill { animation-delay: 0.91s; }
.motion .ops-grid.st .shot:nth-child(2) .mini > div { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .ops-grid.st .shot:nth-child(2) .mini > div:nth-child(1) { animation-delay: 1s; }
.motion .ops-grid.st .shot:nth-child(2) .mini > div:nth-child(2) { animation-delay: 1.07s; }
.motion .ops-grid.st .shot:nth-child(2) .mini > div:nth-child(3) { animation-delay: 1.14s; }

/* Business models — the figures land and count, then the insight */
.motion .mpanel.st .kpi { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .mpanel.st .kpi:nth-child(1) { animation-delay: 0.2s; }
.motion .mpanel.st .kpi:nth-child(2) { animation-delay: 0.27s; }
.motion .mpanel.st .kpi:nth-child(3) { animation-delay: 0.34s; }
.motion .mpanel.st .kpi:nth-child(4) { animation-delay: 0.41s; }
.motion .mpanel.st .insight { animation: shot-toast .6s cubic-bezier(.16,1,.3,1) .75s both; }
.motion .mpanel.st .insight > img { animation-delay: .85s; }

/* ── pass 5, smoothness: nothing repaints once a shot has landed ──
   the glow is a soft gradient, not a live blur (a blurred layer is re-filtered every frame it moves);
   the edge light sweeps round once as the shot lands, then rests — no per-frame repaint while on screen */
.shot::before { filter: none; inset: -2% -14% -16%;
  background: radial-gradient(ellipse 58% 52% at 50% 62%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 74%),
              radial-gradient(ellipse 38% 38% at 16% 26%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 74%); }
@keyframes shot-glow-in { from { opacity: 0; } to { opacity: var(--glow-o, 1); } }
.motion .inview .shot .card, .motion .inview .shot .ladder-card, .motion .shot.inview .card, .motion .shot.inview .ladder-card { animation: none; }
.motion .st .shot .card, .motion .shot.st .card, .motion .st .shot .ladder-card, .motion .shot.st .ladder-card { animation: shot-spin 2.6s cubic-bezier(.4,0,.2,1) .35s both; }

/* the glow behind a shot must fade out on every side: a gradient that reaches its box's edge leaves a
   straight cut (the vertical line beside the hero chart). The mask feathers the whole layer to nothing
   at its edges; the teal accent sits further in so it is never near one. */
.shot::before {
  background: radial-gradient(ellipse 58% 52% at 50% 60%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 74%),
              radial-gradient(ellipse 34% 34% at 28% 32%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 74%);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }

/* ── site v2 pass 6 (9 Oct 2026): the boss's six pages — his new design rules, scoped ──
   From his artifact (version 1791462030-fed6): the Security band, the Cash page (KPIs, charts, the weekly
   table, the five steps, the four "together" cards, features), the comparison cards and carousel, the
   sub-page intro. His .mk is scoped to .cmp2; his security label .st is .sst here (.st = a motion stage). */
/* comparison: coverage bars + scrolling area cards */
.cmp2 { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.cmp2 > * { min-width: 0; }
.cov { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px 22px; display: grid; gap: 12px; }
.cov-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: var(--faint); margin-bottom: 4px; }
.lg { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lg .mk { margin-left: 8px; }
.cov-row { display: grid; grid-template-columns: 150px minmax(0,1fr) 64px; align-items: center; gap: 14px; font-size: 14px; }
.cov-l { color: var(--muted); }
.cov-t { height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.cov-t i { display: block; height: 100%; border-radius: 999px; background: var(--line-strong); }
.cov-row.em .cov-l { color: var(--fg); font-weight: 600; }
.cov-row.em .cov-t i { background: linear-gradient(90deg, var(--teal), var(--blue), var(--accent)); }
.cov-row b { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.cov-row b small { color: var(--faint); font-weight: 400; }
@media (max-width: 520px) { .cov-row { grid-template-columns: 1fr 52px; } }
@media (max-width: 520px) { .cov-l { grid-column: 1 / -1; } }
.cscroll { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; scrollbar-width: none; }
.cscroll::-webkit-scrollbar { display: none; }
.cscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 18px; }
.ccard { flex: 0 0 min(380px, 86vw); scroll-snap-align: start; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 20px; display: flex; flex-direction: column; }
.ccard header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ccard h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.ccard header span { font-size: 12px; color: var(--faint); }
.ccols, .ccard li { display: grid; grid-template-columns: minmax(0,1fr) 62px 66px 48px; align-items: center; gap: 4px; }
.ccols { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ccols span { text-align: center; }
.ccols .e { color: var(--accent-ink); }
.ccard ul { list-style: none; margin: 0; padding: 0; }
.ccard li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ccard li:last-child { border-bottom: 0; }
.cap small { display: block; font-size: 11.5px; color: var(--warn); margin-top: 2px; }
.cmp2 .mk { display: grid; place-items: center; }
.cmp2 .mk svg { width: 22px; height: 22px; }
.cmp2 .mk circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.cmp2 .mk.y { color: var(--pos); }
.cmp2 .mk.y circle { fill: var(--pos-soft); }
.cmp2 .mk.p { color: var(--warn); }
.cmp2 .mk.n { color: var(--line-strong); }
.lg .mk svg { width: 16px; height: 16px; }
.ccard li .mk:last-child { background: var(--accent-soft); border-radius: 8px; height: 30px; }
.cpos { font-size: 13px; color: var(--faint); }
/* security band: one dark look in both themes */
:root { --ink-bg: #17121f; --ink-fg: #f4ece4; --ink-muted: #b9aebc; --ink-line: rgba(244,236,228,0.14); }
.secure { background: var(--ink-bg); color: var(--ink-fg); }
.secure-head { max-width: 640px; margin-bottom: 64px; }
.secure-head h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.035em; line-height: 1.05; font-weight: 600; margin-bottom: 16px; color: var(--ink-fg); }
.secure-head p { font-size: 17.5px; color: var(--ink-muted); margin-bottom: 24px; }
.secure-btn { background: var(--ink-fg); color: var(--ink-bg); border-color: transparent; }
.secure-btn:hover { border-color: var(--ink-fg); }
.sgrid { display: grid; grid-template-columns: 1fr; gap: 36px 32px; }
@media (min-width: 640px) { .sgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .sgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sbadge { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 16px; align-items: start; min-width: 0; }
.sic { width: 64px; height: 64px; display: grid; place-items: center; color: var(--ink-fg); }
.sic svg { width: 52px; height: 52px; }
.seal { width: 62px; height: 62px; border-radius: 50%; background: var(--ink-fg); color: var(--ink-bg); display: grid; place-content: center; text-align: center; line-height: 1; }
.seal b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 4px; border-bottom: 1.5px solid var(--ink-bg); }
.seal small { font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; padding-top: 4px; }
.sbadge b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink-fg); }
.sbadge .sst { display: block; font-size: 15px; font-weight: 600; color: var(--ink-fg); opacity: .85; }
.sbadge .seal b { color: var(--ink-bg); font-size: 15px; line-height: 1; }
.sbadge p { font-size: 13.5px; color: var(--ink-muted); margin-top: 8px; max-width: 26em; }
/* comparison carousel: centred cards, dots, like the team carousel */
.cmp2 .cscroll { align-items: flex-start; scroll-snap-type: x mandatory; padding: 12px 2px 16px; scroll-padding-left: 2px; gap: 20px; }
.cmp2 .ccard { scroll-snap-align: start; transition: box-shadow .3s, border-color .3s; cursor: pointer; }
.cmp2 .ccard.on { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); cursor: default; }
.clegend { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--faint); margin-bottom: 4px; }
.clegend .mk { margin-left: 10px; }
.clegend .mk svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .cmp2 .ccard { transition: none; } }
/* cash page */
:root { --src-act: #b7791f; --src-com: #2761ea; --src-pro: #7c3aed; --src-bud: #0f8a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --src-act: #fbbf24; --src-com: #60a5fa; --src-pro: #c4b5fd; --src-bud: #34d399; } }
:root[data-theme="dark"] { --src-act: #fbbf24; --src-com: #60a5fa; --src-pro: #c4b5fd; --src-bud: #34d399; }
.cashcard .card-b { display: grid; gap: 22px; }
.ckpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (min-width: 760px) { .ckpis { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .ckpis { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.ck { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--well); min-width: 0; }
.ck span { display: block; font-size: 12px; color: var(--faint); }
.ck b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.ck i { font-style: normal; font-size: 12px; color: var(--muted); }
.ck i.up { color: var(--pos); }
.ccharts { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .ccharts { grid-template-columns: 1fr 1fr; } }
.cchart { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--well); padding: 14px 14px 6px; min-width: 0; }
.cchart figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.cchart figcaption b { color: var(--fg); font-size: 14px; font-weight: 600; }
.cchart svg { display: block; width: 100%; height: auto; }
.cchart text { fill: var(--faint); font-family: var(--font-body); font-size: 10.5px; }
.cchart .gl { stroke: var(--line); }
.cchart .ln { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.cchart .ar { fill: color-mix(in srgb, var(--teal) 14%, transparent); }
.cchart .endpt { fill: var(--teal); stroke: var(--surface); stroke-width: 2; }
.cchart .vl { fill: var(--fg); font-weight: 600; font-size: 11.5px; }
.cchart .today { stroke: var(--accent); stroke-dasharray: 3 3; }
.cchart .todayt { fill: var(--accent-ink); font-size: 10px; }
.cchart .hit { fill: transparent; }
.cchart .hit:hover { fill: color-mix(in srgb, var(--teal) 30%, transparent); }
.cchart .in { fill: var(--teal); }
.cchart .out { fill: var(--neg); }
.cchart path.in:hover, .cchart path.out:hover { opacity: .75; }
.lg2 { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.lg2 i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg2 i.in { background: var(--teal); }
.lg2 i.out { background: var(--neg); }
.cf-h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--faint); margin-bottom: -10px; }
.cf-h b { color: var(--fg); font-size: 15px; }
.lgds { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lgd { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.lgd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.s-act { --c: var(--src-act); }
.s-com { --c: var(--src-com); }
.s-pro { --c: var(--src-pro); }
.s-bud { --c: var(--src-bud); }
.cf-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cf-scroll:focus-visible { outline: 2px solid var(--accent); }
.cf { border-collapse: collapse; font-size: 13px; min-width: 1180px; width: 100%; font-variant-numeric: tabular-nums; }
.cf th, .cf td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cf thead th { font-weight: 600; font-size: 12px; color: var(--fg); background: var(--surface-2); border-top: 3px solid var(--c, transparent); }
.cf thead th small { display: block; font-size: 10px; font-weight: 500; color: var(--src-act); letter-spacing: .04em; text-transform: uppercase; }
.cf thead th:first-child, .cf tbody th { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 600; color: var(--fg); min-width: 150px; }
.cf thead th:first-child { background: var(--surface-2); color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.cf td { color: var(--muted); }
.cf tr.inc td { color: var(--pos); }
.cf tr.cost td { color: var(--neg); }
.cf tr.net td.n { color: var(--neg); }
.cf tr.end td, .cf tr.end th { color: var(--fg); font-weight: 600; border-bottom: 0; }
.cf td.s-act { background: color-mix(in srgb, var(--src-act) 7%, transparent); }
.cnote { margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.csteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .csteps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .csteps { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.cstep { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 16px; background: var(--surface); padding: 20px 18px; min-width: 0; }
.c-pl { --c: var(--teal); }
.c-bud { --c: var(--src-bud); }
.c-com { --c: var(--src-com); }
.c-act { --c: var(--src-act); }
.c-scn { --c: var(--accent); }
.cs-n { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.cs-tag { float: right; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.cstep h3 { clear: both; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 18px 0 8px; }
.cstep p { font-size: 14px; color: var(--muted); }
@media (min-width: 1100px) { .cstep:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); background: var(--bg); z-index: 2; } }
.cconf { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .cconf { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cconf > div { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.cconf .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cconf b { display: block; font-size: 16px; font-weight: 600; margin: 6px 0 4px; letter-spacing: -0.01em; }
.cconf p { font-size: 13.5px; color: var(--muted); }
.cconf .together { border: 0; background: linear-gradient(160deg, #7c3aed, #9333ea 60%, #a21caf); color: #fff; box-shadow: var(--glow); }
.cconf .together .k, .cconf .together p { color: rgba(255,255,255,.85); }
.stepcar .cstep { flex-basis: min(320px, 82vw); border-top: 3px solid var(--c); }
.stepcar .cstep::after { display: none !important; }
.stepcar .cstep h3 { font-size: 18px; }
.stepcar .cs-tag { float: none; align-self: flex-start; margin-top: 10px; }
.stepcar .cstep h3 { margin-top: 14px; }
.stepcar .cscroll { padding-bottom: 32px; }
.stepcar .cstep.on { border-top-color: var(--c); }
.cfeats { display: grid; grid-template-columns: 1fr; gap: 28px 32px; }
@media (min-width: 720px) { .cfeats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cfeat { border-top: 1px solid var(--line-strong); padding-top: 16px; min-width: 0; }
.cfeat h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.cfeat p { font-size: 14.5px; color: var(--muted); }
/* meetings strip */
.fin-hero { padding-bottom: 24px; }
.fin-hero h1 { max-width: 15em; }
.crumb { display: inline-block; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 22px; }
.crumb:hover { color: var(--fg); }

/* ── site v2 pass 6: our layout + motion for that content ── */
/* Meetings: the three steps now sit above the call, so they space below, not above */
.msteps { margin-top: 0; margin-bottom: 40px; }
/* sub-page intro: the same rhythm as the home hero, a little shorter */
.fin-hero { padding-top: 56px; }
.fin-hero .sub { max-width: 40em; }
/* Security: arrives like a section heading, then the six cards */
.motion .secure-head.st { animation: shot-head .9s cubic-bezier(.16,1,.3,1) both; }
.motion .sgrid.st .sbadge { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) both; }
.motion .sgrid.st .sbadge:nth-child(1) { animation-delay: 0.05s; }
.motion .sgrid.st .sbadge:nth-child(2) { animation-delay: 0.12s; }
.motion .sgrid.st .sbadge:nth-child(3) { animation-delay: 0.19s; }
.motion .sgrid.st .sbadge:nth-child(4) { animation-delay: 0.26s; }
.motion .sgrid.st .sbadge:nth-child(5) { animation-delay: 0.33s; }
.motion .sgrid.st .sbadge:nth-child(6) { animation-delay: 0.40s; }
.motion .sgrid.st .sic { animation: shot-pop .55s cubic-bezier(.16,1,.3,1) both; }
.motion .sgrid.st .sbadge:nth-child(1) .sic { animation-delay: 0.15s; }
.motion .sgrid.st .sbadge:nth-child(2) .sic { animation-delay: 0.22s; }
.motion .sgrid.st .sbadge:nth-child(3) .sic { animation-delay: 0.29s; }
.motion .sgrid.st .sbadge:nth-child(4) .sic { animation-delay: 0.36s; }
.motion .sgrid.st .sbadge:nth-child(5) .sic { animation-delay: 0.43s; }
.motion .sgrid.st .sbadge:nth-child(6) .sic { animation-delay: 0.50s; }
/* Cash: the forecast card rises, the figures land and count, the balance line draws, the bars grow,
   the weekly table fills row by row */
.motion .cash-stage.st .ck { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .cash-stage.st .ck:nth-child(1) { animation-delay: 0.35s; }
.motion .cash-stage.st .ck:nth-child(2) { animation-delay: 0.41s; }
.motion .cash-stage.st .ck:nth-child(3) { animation-delay: 0.47s; }
.motion .cash-stage.st .ck:nth-child(4) { animation-delay: 0.53s; }
.motion .cash-stage.st .ck:nth-child(5) { animation-delay: 0.59s; }
.motion .cash-stage.st .ck:nth-child(6) { animation-delay: 0.65s; }
.motion .cash-stage.st .cchart { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) both; }
.motion .cash-stage.st .cchart:nth-child(1) { animation-delay: .75s; } .motion .cash-stage.st .cchart:nth-child(2) { animation-delay: .85s; }
.motion .cash-stage.st .cchart .ln { stroke-dasharray: 1; animation: shot-draw 1.4s cubic-bezier(.65,0,.35,1) 1.05s both; }
.motion .cash-stage.st .cchart .ar { animation: shot-fade .8s ease-out 1.7s both; }
.motion .cash-stage.st .cchart .endpt, .motion .cash-stage.st .cchart .vl { animation: shot-fade .4s ease-out 2.3s both; }
.motion .cash-stage.st .cchart path.in, .motion .cash-stage.st .cchart path.out { transform-box: fill-box; transform-origin: 50% 100%; animation: shot-grow .55s cubic-bezier(.16,1,.3,1) both; }
.motion .cash-stage.st .cchart path:nth-of-type(1) { animation-delay: 1.00s; }
.motion .cash-stage.st .cchart path:nth-of-type(2) { animation-delay: 1.03s; }
.motion .cash-stage.st .cchart path:nth-of-type(3) { animation-delay: 1.07s; }
.motion .cash-stage.st .cchart path:nth-of-type(4) { animation-delay: 1.10s; }
.motion .cash-stage.st .cchart path:nth-of-type(5) { animation-delay: 1.14s; }
.motion .cash-stage.st .cchart path:nth-of-type(6) { animation-delay: 1.18s; }
.motion .cash-stage.st .cchart path:nth-of-type(7) { animation-delay: 1.21s; }
.motion .cash-stage.st .cchart path:nth-of-type(8) { animation-delay: 1.25s; }
.motion .cash-stage.st .cchart path:nth-of-type(9) { animation-delay: 1.28s; }
.motion .cash-stage.st .cchart path:nth-of-type(10) { animation-delay: 1.31s; }
.motion .cash-stage.st .cchart path:nth-of-type(11) { animation-delay: 1.35s; }
.motion .cash-stage.st .cchart path:nth-of-type(12) { animation-delay: 1.39s; }
.motion .cash-stage.st .cchart path:nth-of-type(13) { animation-delay: 1.42s; }
.motion .cash-stage.st .cchart path:nth-of-type(14) { animation-delay: 1.46s; }
.motion .cash-stage.st .cchart path:nth-of-type(15) { animation-delay: 1.49s; }
.motion .cash-stage.st .cchart path:nth-of-type(16) { animation-delay: 1.52s; }
.motion .cash-stage.st .cchart path:nth-of-type(17) { animation-delay: 1.56s; }
.motion .cash-stage.st .cchart path:nth-of-type(18) { animation-delay: 1.60s; }
.motion .cash-stage.st .cchart path:nth-of-type(19) { animation-delay: 1.63s; }
.motion .cash-stage.st .cchart path:nth-of-type(20) { animation-delay: 1.67s; }
.motion .cash-stage.st .cchart path:nth-of-type(21) { animation-delay: 1.70s; }
.motion .cash-stage.st .cchart path:nth-of-type(22) { animation-delay: 1.74s; }
.motion .cash-stage.st .cchart path:nth-of-type(23) { animation-delay: 1.77s; }
.motion .cash-stage.st .cchart path:nth-of-type(24) { animation-delay: 1.81s; }
.motion .cash-stage.st .cchart path:nth-of-type(25) { animation-delay: 1.84s; }
.motion .cash-stage.st .cchart path:nth-of-type(26) { animation-delay: 1.88s; }
.motion .cash-stage.st .cf-h { animation: shot-fade .5s ease-out 1.9s both; }
.motion .cash-stage.st .cf tr { animation: shot-rise .5s cubic-bezier(.16,1,.3,1) both; }
.motion .cash-stage.st .cf tr:nth-child(1) { animation-delay: 2.00s; }
.motion .cash-stage.st .cf tr:nth-child(2) { animation-delay: 2.07s; }
.motion .cash-stage.st .cf tr:nth-child(3) { animation-delay: 2.14s; }
.motion .cash-stage.st .cf tr:nth-child(4) { animation-delay: 2.21s; }
.motion .cash-stage.st .cf tr:nth-child(5) { animation-delay: 2.28s; }
.motion .cash-stage.st .cf tr:nth-child(6) { animation-delay: 2.35s; }
.motion .cash-stage.st .cnote { animation: shot-fade .5s ease-out 2.5s both; }
/* the five steps and the comparison: cards rise in turn; the four "together" cards; the features */
.motion .cmp2.st .clegend { animation: shot-fade .5s ease-out .05s both; }
.motion .cmp2.st .ccard { animation: shot-rise .6s cubic-bezier(.16,1,.3,1) both; }
.motion .cmp2.st .ccard:nth-child(1) { animation-delay: 0.10s; }
.motion .cmp2.st .ccard:nth-child(2) { animation-delay: 0.18s; }
.motion .cmp2.st .ccard:nth-child(3) { animation-delay: 0.26s; }
.motion .cmp2.st .ccard:nth-child(4) { animation-delay: 0.34s; }
.motion .cmp2.st .ccard:nth-child(5) { animation-delay: 0.42s; }
.motion .cmp2.st .ccard:nth-child(6) { animation-delay: 0.50s; }
.motion .cmp2.st .rnav { animation: shot-fade .5s ease-out .6s both; }
.motion .cconf.st > div { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .cconf.st > div:nth-child(1) { animation-delay: 0.05s; }
.motion .cconf.st > div:nth-child(2) { animation-delay: 0.13s; }
.motion .cconf.st > div:nth-child(3) { animation-delay: 0.21s; }
.motion .cconf.st > div:nth-child(4) { animation-delay: 0.29s; }
.motion .cfeats.st .cfeat { animation: shot-rise .55s cubic-bezier(.16,1,.3,1) both; }
.motion .cfeats.st .cfeat:nth-child(1) { animation-delay: 0.05s; }
.motion .cfeats.st .cfeat:nth-child(2) { animation-delay: 0.11s; }
.motion .cfeats.st .cfeat:nth-child(3) { animation-delay: 0.17s; }
.motion .cfeats.st .cfeat:nth-child(4) { animation-delay: 0.23s; }
.motion .cfeats.st .cfeat:nth-child(5) { animation-delay: 0.29s; }
.motion .cfeats.st .cfeat:nth-child(6) { animation-delay: 0.35s; }
/* card carousels: the track is as tall as the cards in view (site.js), easing as you swipe, so a short card never sits above a hole */
.cmp2 .cscroll { overflow-y: hidden; transition: height .45s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) { .cmp2 .cscroll { transition: none; } }
/* the cash card title wraps under its badge on a phone instead of squeezing to three words a line */
@media (max-width: 640px) { .cashcard .card-h { flex-wrap: wrap; row-gap: 8px; } }

/* ── site v2 pass 7 (9 Oct 2026): page-to-page navigation ──
   Cross-document View Transitions: the menu bar is its own layer and holds still; the old page eases out
   and lifts away while the new one rises in. Short (old .22s, new .5s), expo-out, nothing bounces.
   Reduced motion: no transition. A prerendered page holds its animations (.held) until it is shown. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px) scale(.992); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.16,1,.3,1) .06s both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
.held *, .held *::before, .held *::after { animation-play-state: paused !important; }

/* ── site v2 pass 8 (9 Oct 2026): By team — the glide ──
   Everything here applies only once site.js has built the strip (.glide); without it the cards stay the plain
   scrolling row above. The strip runs the full width of the section (which clips it) and moves by transform,
   1.5s on a curve fitted to Heidi Health's (50% at 217ms, 90% at ~570ms, 99% at ~1070ms, as theirs measured). The
   card blur is dropped: over this smooth gradient it changes no pixel (max 2/255), and it costs frames. Each fold is its own one-row grid running 0fr <-> 1fr in the same move (minmax(0, …): the fold's padding
   must not hold the row open),
   and its text is laid out at its final width so nothing re-wraps mid-glide. .jump turns every transition off
   for the invisible loop swap. */
.wtrack.glide { overflow: hidden; margin-inline: calc(50% - 50vw); padding: 24px 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.wtrack.glide.dragging { cursor: grabbing; }
.wrail { display: flex; align-items: center; gap: 20px; width: max-content; will-change: transform; transition: transform 1.5s cubic-bezier(.25,.85,.2,1); }
.glide .wf { --won: 458px; --woff: 318px; backdrop-filter: none; -webkit-backdrop-filter: none; transition: flex-basis 1.5s cubic-bezier(.25,.85,.2,1), background-color .7s ease, box-shadow .7s ease, border-color .7s ease; }
.glide .wf-o, .glide .wf.on .wf-o, .glide .wf-b, .glide .wf.on .wf-b { display: grid; padding: 0; gap: 0; overflow: hidden; transition: grid-template-rows 1.5s cubic-bezier(.25,.85,.2,1); }
.glide .wf-o { grid-template-rows: minmax(0, 1fr); }
.glide .wf.on .wf-o { grid-template-rows: minmax(0, 0fr); }
.glide .wf-b { grid-template-rows: minmax(0, 0fr); }
.glide .wf.on .wf-b { grid-template-rows: minmax(0, 1fr); }
.glide .wf-in { display: block; min-height: 0; overflow: hidden; }
.glide .wf-o .wf-in { width: var(--woff); padding: 16px 22px 22px; transition: opacity .35s ease .1s; }
.glide .wf.on .wf-o .wf-in { opacity: 0; transition: opacity .2s ease; }
.glide .wf-b .wf-in { display: grid; gap: 16px; width: var(--won); padding: 18px 22px 22px; opacity: 0; transition: opacity .2s ease; }
.glide .wf.on .wf-b .wf-in { opacity: 1; transition: opacity .7s ease .2s; }
.wrail.jump, .wrail.jump * { transition: none !important; }
@media (max-width: 640px) { .wrail { gap: 14px; } .glide .wf { --won: calc(84vw - 2px); --woff: calc(74vw - 2px); } }
/* the active dot fills over the 5s it waits, like a progress bar; solid when paused or stopped */
.rpanel .dots button { position: relative; overflow: hidden; }
.rpanel .dots button[aria-current="true"] { width: 40px; }
.rpanel.auto .dots button[aria-current="true"] { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.rpanel.auto .dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left center; animation: dot-fill var(--auto, 5s) linear both; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wrail, .wrail * { transition: none !important; } }

/* ── site v2 pass 9 (9 Oct 2026): the customers strip scrolls, like Heidi Health's logo row ──
   Three identical rows, each sliding one row-width left, forever (seamless; three so a ~1,600px row never
   runs out on a wide screen). Full width, soft faded edges,
   ~31px a second (Heidi's measured speed), no hover pause. Each logo is a one-colour mask in the theme's
   muted colour. Reduced motion: one still, centred, wrapped row. */
.trusted .marquee { display: flex; overflow: hidden; margin-inline: calc(50% - 50vw); padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq-track { flex: none; display: flex; align-items: center; gap: 76px; margin: 0; padding: 0 38px; list-style: none; animation: mq-run 53s linear infinite; }
.mq-track li { flex: none; display: flex; }
.blogo { display: block; width: var(--w); height: var(--h); background: var(--muted); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
@keyframes mq-run { to { transform: translateX(-100%); } }
@media (max-width: 640px) {
  .mq-track { gap: 48px; padding: 0 24px; animation-duration: 39s; }
  .blogo { width: calc(var(--w) * .8); height: calc(var(--h) * .8); }
}
@media (prefers-reduced-motion: reduce) {
  .trusted .marquee { margin-inline: 0; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .mq-track { animation: none; flex: 1; flex-wrap: wrap; justify-content: center; gap: 22px 48px; }
  .mq-track[aria-hidden] { display: none; }
}

/* ── site v2 pass 10 (9 Oct 2026): the Integrations page ──
   Hero: copy beside a hub of logos orbiting the Emery mark; each logo has a spoke and a pulse that travels in
   (paused until seen, like every stage). Directory: chips + search (site.js), tiles with the company's own icon
   on a white chip, in colour on purpose (a directory you scan for your own tools). */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ig-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.ig-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 560px; }
.ig-stats b { display: block; font: 600 28px/1.1 var(--font-display); letter-spacing: -0.03em; }
.ig-stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ig-hub { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; }
.ig-ring { position: absolute; border-radius: 50%; border: 1px dashed var(--line-strong); }
.ig-ring.r1 { inset: 4%; }
.ig-ring.r2 { inset: 22%; border-color: var(--line); }
.ig-glow { position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%); }
.ig-spoke { position: absolute; left: 50%; top: 50%; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.ig-spoke i { position: absolute; top: -2px; left: 100%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 10px var(--accent); opacity: 0; }
.motion .ig-spoke i { animation: ig-flow 3.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--p); }
@keyframes ig-flow { 0% { left: 100%; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: 8%; opacity: 0; } }
.ig-core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 28%; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 60px -6px color-mix(in srgb, var(--accent) 70%, transparent); display: grid; place-items: center; }
.ig-core img { width: 58%; height: auto; }
.ig-node { position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 24%; background: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55), 0 0 0 1px var(--line-strong); display: grid; place-items: center; }
.ig-node img { width: 66%; height: 66%; object-fit: contain; border-radius: 18%; }
/* the hub fades in (rings, glow, spokes, core: opacity only, their transforms place them), then the logos pop */
.motion .ig-hub > :not(.ig-node) { animation: ig-fade 1s ease both; }
@keyframes ig-fade { from { opacity: 0; } }
.motion .ig-node { animation: ig-pop .8s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d); }
@keyframes ig-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.ig-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-block: 1px solid var(--line); margin-bottom: 40px; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 500 13px/1 var(--font-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.ig-chip:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.ig-chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ig-search { flex: 0 1 280px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); transition: border-color .2s; }
.ig-search:focus-within { border-color: var(--accent); }
.ig-search svg { width: 15px; height: 15px; flex: none; }
.ig-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: 400 14px var(--font-body); }
.ig-group + .ig-group { margin-top: 44px; }
.ig-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.ig-gh h2 { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
.ig-gh span { font-size: 14px; color: var(--faint); }
.ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.ig-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s, box-shadow .2s; }
.ig-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--accent) 60%, transparent); }
.ig-logo { flex: none; width: 46px; height: 46px; border-radius: 13px; background: #fff; display: grid; place-items: center; color: #1b1d2e; box-shadow: 0 6px 18px -10px rgba(0,0,0,.5), 0 0 0 1px var(--line); }
.ig-logo img { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; }
.ig-logo svg { width: 24px; height: 24px; }
.ig-t { min-width: 0; }
.ig-t b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ig-t span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* the last row of the directory: there are more than the tiles shown (80+ in all) */
.ig-more { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding: 18px 20px; border-radius: 16px; border: 1px dashed var(--line-strong); color: var(--fg); text-decoration: none; transition: border-color .2s, background-color .2s; }
.ig-more:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ig-more-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font: 500 26px/1 var(--font-body); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ig-more-go { margin-left: auto; padding-left: 8px; color: var(--accent-ink); font-size: 18px; transition: transform .2s; }
.ig-more:hover .ig-more-go { transform: translateX(3px); }
.ig-empty { margin: 8px 0 0; padding: 36px; border-radius: 16px; border: 1px dashed var(--line-strong); text-align: center; color: var(--muted); }
.ig-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ig-step { padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.motion .ig-steps .ig-step { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
.motion .ig-steps .ig-step:nth-child(2) { animation-delay: .08s; } .motion .ig-steps .ig-step:nth-child(3) { animation-delay: .16s; } .motion .ig-steps .ig-step:nth-child(4) { animation-delay: .24s; }
.ig-step em { font: normal 500 12px var(--font-mono); color: var(--accent-ink); }
.ig-step b { display: block; font-size: 17px; margin: 10px 0 8px; }
.ig-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ig-req { padding-bottom: 24px; }
.ig-req-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(60% 140% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), var(--surface); }
.ig-req-card h2 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; }
.ig-req-card p { margin: 10px 0 0; color: var(--muted); max-width: 36em; line-height: 1.6; }
.ig-req-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .ig-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ig-hub { max-width: 420px; }
  .ig-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ig-stats { gap: 10px; } .ig-stats b { font-size: 22px; }
  .ig-search { flex: 1 1 100%; }
  .ig-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .ig-chips::-webkit-scrollbar { display: none; }
  .ig-chip { flex: none; }
  .ig-hub { max-width: 350px; }
  .ig-steps { grid-template-columns: 1fr; }
  .ig-req-card { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) { .ig-spoke i { display: none; } }

/* ── site v2 pass 11 (10 Oct 2026): Meetings on a phone ──
   The two cards were a sideways swipe box that was also taller than the screen, so it scrolled inside the page
   and caught the thumb (Matt). On a phone they now stack, the call then the notes, and nothing inside scrolls;
   the call shows its first exchange only (the second is the margin question the Ask section already shows). */
@media (max-width: 640px) {
  .meet-grid { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none; padding-bottom: 0; gap: 16px; }
  .meet-grid .tx .tline:nth-child(n+3) { display: none; }
  .meet-grid .card-h { flex-wrap: wrap; row-gap: 6px; }
  .meet-grid .card-h > * { white-space: nowrap; }
}