.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* aidnn by Isotopes AI · site design system
   Layout: an instrument catalog. Wide plates hold working machines; copy sits in a 64ch column
   beside or under them; mono labels carry the machine facts. One accent, brand blue, marks the
   part to watch and the action to take. */

@font-face { font-family: "FK Grotesk Neue"; src: url("../assets/fonts/FKGroteskNeue-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "FK Grotesk Neue"; src: url("../assets/fonts/FKGroteskNeue-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "FK Grotesk Neue"; src: url("../assets/fonts/FKGroteskNeue-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FK Grotesk Neue"; src: url("../assets/fonts/FKGroteskNeue-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Apfel Grotezk"; src: url("../assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---- tokens: light (default) ---- */
.iso, .iso[data-theme="light"] {
  --ink: #000000; --text: rgba(0, 0, 0, .8); --muted: #666666; --rule: #e2e5ef; --rule-soft: #e2e5ef;
  --page: #ffffff; --card: #f7f8fc; --wash: #f7f8fc; --grid: rgba(5, 38, 153, .055);
  --blue: #052699; --blue-hover: #126af9; --blue-500: #126af9; --blue-100: #dce6ff; --blue-50: #f1f5ff;
  --on-blue: #ffffff; --ok: #12805c; --warn: #b54708;
  --navy: #061334; --navy-card: #0a1a45;
  --sans: Inter, "FK Grotesk Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Apfel Grotezk", "FK Grotesk Neue", Arial, sans-serif;
  --brand-gradient: linear-gradient(105deg, #052699, #126af9);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --anatomy-page: var(--page); --anatomy-card: var(--card); --anatomy-text: var(--text); --anatomy-strong: var(--ink); --anatomy-muted: var(--muted);
  --anatomy-paper: var(--card); --anatomy-face: #ffffff; --anatomy-top: #ffffff;
  --anatomy-shade-0: #d8dee8; --anatomy-shade-1: #e2e7ef; --anatomy-shade-2: #ebeff5; --anatomy-shade-3: #f3f5f9;
  --anatomy-lit-top: #eef6ff; --anatomy-lit-shade: #daeaff;
  --anatomy-hi: #1b2333; --anatomy-mid: #8790a3; --anatomy-lo: #b4bccb; --anatomy-faint: #d4dae4; --anatomy-lit: #0a3fbc;
  --anatomy-halo: #7c89a6; --anatomy-halo-opacity: .3; --anatomy-dot: #364153;
  --anatomy-mono: var(--mono);
  color-scheme: light;
}
/* ---- tokens: dark, and every navy band ---- */
.iso[data-theme="dark"], .iso .band-navy {
  --ink: #ffffff; --text: rgba(255, 255, 255, .82); --muted: #aab5d0; --rule: #27345c; --rule-soft: #202d55;
  --page: #061334; --card: #0a1a45; --wash: #0d1c45; --grid: rgba(120, 160, 255, .07);
  --blue: #5b95ff; --blue-hover: #82adff; --blue-500: #5b95ff; --blue-100: #16295c; --blue-50: #0d1c45; --on-blue: #04102e;
  --anatomy-page: var(--page); --anatomy-card: var(--card); --anatomy-text: var(--text); --anatomy-strong: var(--ink); --anatomy-muted: var(--muted);
  --anatomy-paper: var(--card); --anatomy-face: #0f1d40; --anatomy-top: #12224a;
  --anatomy-shade-0: #08112a; --anatomy-shade-1: #0b1532; --anatomy-shade-2: #0d1838; --anatomy-shade-3: #101c40;
  --anatomy-lit-top: #183066; --anatomy-lit-shade: #122653;
  --anatomy-hi: #d5def0; --anatomy-mid: #5d6d93; --anatomy-lo: #34436d; --anatomy-faint: #1f2c52; --anatomy-lit: #6ea8ff;
  --anatomy-halo: #01030a; --anatomy-halo-opacity: .85; --anatomy-dot: #d5def0;
  color-scheme: dark;
}
.iso .band-navy { --page: var(--navy); --card: var(--navy-card); --anatomy-paper: var(--navy-card); --anatomy-card: var(--navy-card); }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 14px; max-width: 64ch; }
code, .mono { font-family: var(--mono); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.eyebrow { font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; display: flex; gap: 10px; align-items: center; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--blue); flex: none; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text); max-width: 60ch; }
.muted { color: var(--muted); }
section { padding-block: 88px; }
section + section { border-top: 1px solid var(--rule-soft); }
.band-navy { background: var(--page); color: var(--text); }
.band-navy + section, section + .band-navy { border-top: 0; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); padding: 14px 20px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn-primary { background: var(--blue); color: var(--on-blue); }
.btn-primary:hover { background: var(--blue-hover); color: var(--on-blue); }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn .arr { font-family: var(--mono); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- header ---- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--rule-soft); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 19px; letter-spacing: -0.02em; }
.brand svg { width: 26px; height: 26px; }
.brand small { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav details { position: relative; }
.nav summary, .nav > a { list-style: none; cursor: pointer; padding: 8px 12px; color: var(--text); font-size: 15px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.nav summary:hover, .nav > a:hover, .nav details[open] summary { color: var(--ink); }
.menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; background: var(--card); border: 1px solid var(--rule); padding: 8px; display: grid; gap: 2px; box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .25); }
.menu.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 420px; }
.menu a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; font-size: 15px; }
.menu a small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.menu a:hover { background: var(--wash); }
.header-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.header-cta .btn { padding: 10px 14px; font-size: 14px; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule); color: var(--ink); font: 500 13px var(--mono); padding: 8px 10px; letter-spacing: .08em; }
@media (max-width: 1040px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .menu-toggle { display: inline-block; }
  .header-cta { margin-left: 0; }
  .site-header.open .nav { display: grid; position: absolute; top: 64px; left: 0; right: 0; background: var(--page); border-bottom: 1px solid var(--rule); padding: 8px 16px 18px; margin: 0; max-height: calc(100vh - 64px); overflow: auto; }
  .site-header.open .menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .header-cta .btn-primary { display: none; } }

/* ---- hero ---- */
.hero { padding-block: 72px 40px; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: 44px; align-items: center; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row span::before { content: ""; width: 6px; height: 6px; border: 1.5px solid var(--blue); }

/* ---- layouts ---- */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.split.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split > * { min-width: 0; }
@media (max-width: 1040px) { .split, .split.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.sticky { position: sticky; top: 96px; }
@media (max-width: 1040px) { .sticky { position: static; } }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.section-head > * { min-width: 0; }
@media (max-width: 900px) { .section-head { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* specification sheet: label / value rows, like an instrument data plate */
.spec { border-top: 1px solid var(--ink); margin: 22px 0 0; }
.spec div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.spec dt { font: 500 11.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.spec dd { margin: 0; color: var(--text); }
.spec dd strong { color: var(--ink); font-weight: 500; }
@media (max-width: 520px) { .spec div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* numbered parts: a real sequence or a parts list keyed to the figure */
.parts { counter-reset: part; display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.parts li { counter-increment: part; position: relative; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--rule); }
.parts li::before { content: counter(part, decimal-leading-zero); position: absolute; left: 0; top: 18px; font: 500 12px/1.6 var(--mono); color: var(--blue); }
.parts b { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; }

/* cards in a ruled grid, no shadows */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid > * { background: var(--card); padding: 26px; min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.card-label { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
.grid h3 { margin-bottom: 10px; }
.grid p { font-size: 15px; margin-bottom: 0; }
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: background .15s; }
a.card:hover { background: var(--wash); }
a.card .go { margin-top: auto; padding-top: 16px; font: 500 13px var(--mono); color: var(--blue); }

/* stats: only figures the company has published */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--ink); }
.stats > div { padding: 22px 20px 6px 0; min-width: 0; }
.stats b { display: block; font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 10px; font-size: 14px; color: var(--text); max-width: 26ch; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* comparison */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.vs > div { background: var(--card); padding: 26px; min-width: 0; }
.vs ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vs li { padding-left: 22px; position: relative; font-size: 15px; }
.vs li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1.5px; background: var(--muted); }
.vs .ours li::before { background: var(--blue); height: 2px; }
.vs .ours { background: var(--wash); }
@media (max-width: 760px) { .vs { grid-template-columns: minmax(0, 1fr); } }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.quotes figure { margin: 0; background: var(--card); padding: 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.quotes blockquote { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; }
.quotes figcaption { margin-top: auto; font-size: 14px; color: var(--muted); }
.quotes figcaption b { color: var(--ink); font-weight: 500; display: block; }
@media (max-width: 960px) { .quotes { grid-template-columns: minmax(0, 1fr); } }

/* logos as set type: the data systems aidnn reads */
.systems { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.systems span { flex: 1 1 160px; padding: 18px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-weight: 500; color: var(--ink); font-size: 17px; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.systems span small { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* faq */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; color: var(--ink); font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 24px var(--mono); color: var(--blue); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 18px; }

/* forms */
.form { display: grid; gap: 16px; max-width: 560px; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .form .row { grid-template-columns: minmax(0, 1fr); } }
.form label { display: grid; gap: 6px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea, .form select { font: 400 16px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); padding: 12px 14px; width: 100%; border-radius: 0; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; border-color: transparent; }
.form textarea { min-height: 140px; resize: vertical; }
.form .note { font-size: 13px; color: var(--muted); }
.form-done { display: none; border: 1px solid var(--rule); background: var(--wash); padding: 18px; color: var(--ink); }
.form.sent > :not(.form-done) { display: none; }
.form.sent .form-done { display: block; }

/* posts list */
.posts { border-top: 1px solid var(--ink); }
.posts a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; align-items: baseline; }
.posts a:hover h3 { color: var(--blue); }
.posts time { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .04em; }
.posts p { margin: 6px 0 0; font-size: 15px; }
.posts .tag { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .posts a { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* cta band */
.cta-band { padding-block: 96px; }
.cta-band h2 { max-width: 18ch; }

/* footer */
.site-footer { border-top: 1px solid var(--rule); padding-block: 56px 40px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-grid h4 { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--text); text-decoration: none; }
.foot-grid a:hover { color: var(--blue); }
.foot-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--muted); font-size: 13px; }
.foot-base nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-base a { color: var(--muted); }
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.badges a { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--rule); padding: 7px 10px; text-decoration: none; }
.badges a:hover { border-color: var(--blue); color: var(--blue); }
.theme-switch { display: inline-flex; border: 1px solid var(--rule); }
.theme-switch button { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 6px 9px; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { color: var(--ink); background: var(--card); }

/* figures from the anatomy kit */
.iso-figure { margin: 0; }
.iso-plate { box-shadow: 0 0 0 1px var(--rule); }
.iso-legend { font-size: 14px; }
.iso-stage { outline: none; cursor: pointer; }
.iso-stage:focus-visible { box-shadow: 0 0 0 2px var(--blue-500); }
.fig-note { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
@media (max-width: 640px) {
  .iso-plate { overflow: hidden; }
  .iso-stage svg { width: 124%; margin-left: -12%; }
  section { padding-block: 64px; }
}

/* ---- machine and stack figures: header bar, gridded plate with crosshair corners, callouts on
   leader lines, zone floors and a zone ruler that say where aidnn sits, and a step strip ---- */
.mach { margin: 0; position: relative; }
.mach-head { display: flex; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; align-items: center; padding: 11px 14px; border: 1px solid var(--rule); border-bottom: 0; background: var(--card); font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mach-title { color: var(--ink); }
.mach-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.mach-legend span { display: inline-flex; gap: 7px; align-items: center; }
.mach-legend i { width: 11px; height: 11px; border: 1px dashed var(--muted); }
.mach-legend [data-k="ai"] { color: var(--blue); }
.mach-legend [data-k="ai"] i { border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 22%, transparent); }
.mach-legend [data-k="out"] i { border: 1px solid var(--ink); }
.iso .mach-plate { position: relative; padding: 22px 18px 12px; border-radius: 0; box-shadow: 0 0 0 1px var(--rule);
  background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
.mach-plate::before, .mach-plate::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none;
  background: linear-gradient(var(--muted), var(--muted)) center / 100% 1px no-repeat, linear-gradient(var(--muted), var(--muted)) center / 1px 100% no-repeat; }
.mach-plate::before { left: -7px; top: -7px; }
.mach-plate::after { right: -7px; bottom: -7px; }
.iso-stage { position: relative; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leader path { fill: none; stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s; }
.leader circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.leader[data-kind="ai"] path, .leader[data-kind="ai"] circle { stroke: var(--blue); }
.leader[data-kind="ai"] circle { fill: var(--blue); }
.leader[data-on] path { stroke-width: 2; }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; display: flex; gap: 8px; align-items: flex-start; white-space: nowrap; font-size: 13px; line-height: 1.25; transition: transform .3s; }
.callout[data-side="top"] { transform: translate(-9.5px, -100%); padding-bottom: 6px; text-align: left; }
.callout b:empty { border-style: dashed; }
.callout[data-side="right"] { transform: translate(6px, -50%); }
.callout b { flex: none; min-width: 19px; height: 19px; display: grid; place-items: center; font: 600 10.5px/1 var(--mono); color: var(--ink); background: var(--card); border: 1px solid var(--rule); transition: background .3s, color .3s; }
.callout[data-kind="ai"] b { color: var(--blue); border-color: var(--blue); }
.callout strong { display: block; color: var(--ink); font-weight: 500; transition: color .3s; }
.callout small { display: block; margin-top: 2px; font: 500 10.5px/1.3 var(--mono); color: var(--muted); letter-spacing: .02em; }
.callout[data-kind="ai"] small { color: color-mix(in srgb, var(--blue) 70%, var(--muted)); }
.callout[data-on] b { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.callout[data-on] strong { color: var(--blue); }
.zone-floor { stroke-width: 1; vector-effect: non-scaling-stroke; }
.zone-floor[data-zone="ai"] { fill: color-mix(in srgb, var(--blue) 11%, transparent); stroke: var(--blue); stroke-dasharray: 5 4; animation: march 1.8s linear infinite; }
.zone-floor[data-zone="you"] { fill: color-mix(in srgb, var(--muted) 8%, var(--card)); stroke: var(--muted); stroke-dasharray: 3 4; }
.zone-floor[data-zone="out"] { fill: none; stroke: var(--ink); stroke-dasharray: 3 4; opacity: .55; }
@keyframes march { to { stroke-dashoffset: -18; } }
.zone-ruler { position: relative; height: 40px; margin-top: 4px; }
.zone { position: absolute; top: 6px; border-top: 1px solid var(--muted); padding-top: 9px; display: flex; justify-content: center; align-items: center; gap: 6px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.zone::before, .zone::after { content: ""; position: absolute; top: -5px; width: 1px; height: 9px; background: currentColor; }
.zone::before { left: 0; } .zone::after { right: 0; }
.zone[data-zone="ai"] { border-top: 2px solid var(--blue); color: var(--blue); top: 5px; font-weight: 600; }
.zone[data-zone="out"] { color: var(--ink); border-top-color: var(--ink); }
.zone .mark, .bracket-label .mark { width: 13px; height: 13px; flex: none; }
.mach-foot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--rule); border-top: 0; background: var(--card); font: 500 11px/1.4 var(--mono); color: var(--muted); }
.mach-foot .hint { text-transform: uppercase; letter-spacing: .1em; }
.mach-foot .readout { color: var(--ink); font-variant-numeric: tabular-nums; }
.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 18px; }
.steps li { border-top: 2px solid var(--rule); padding: 14px 0 0; transition: border-color .4s; min-width: 0; }
.steps li b { display: block; font: 600 11px var(--mono); color: var(--muted); letter-spacing: .08em; transition: color .4s; }
.steps li strong { display: block; color: var(--ink); font-weight: 500; font-size: 16px; margin: 6px 0 4px; }
.steps li span { display: block; font-size: 14px; line-height: 1.45; color: var(--text); }
.steps li[data-on] { border-top-color: var(--blue); }
.steps li[data-on] b { color: var(--blue); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 1180px) { .mach:not(.stack) .callout small { display: none; } }
@media (max-width: 760px) {
  .callout span { display: none; }
  .callout[data-side="top"] { padding-bottom: 3px; }
  .zone span { font-size: 9px; letter-spacing: .04em; }
  .zone[data-zone="you"] span, .zone[data-zone="out"] span { display: none; }
}
/* exploded stack */
.stack .layer { transition: transform 1.2s var(--anatomy-ease); transition-delay: calc(var(--i) * 70ms); }
.js .stack:not(.open) .layer { transform: translateY(calc(var(--i) * var(--c) * 1px)); }
.stack .guides, .stack .leaders, .stack .callouts { transition: opacity .7s .8s; }
.js .stack:not(.open) .guides, .js .stack:not(.open) .leaders, .js .stack:not(.open) .callouts { opacity: 0; transition-delay: 0s; }
.guide { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: .8; }
.beam { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; animation: beam 1s linear infinite; }
@keyframes beam { to { stroke-dashoffset: -16; } }
.layer[data-kind="ai"] > .iso-solid > .iso-edge { stroke: var(--blue); }
.bracket { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bracket-label { position: absolute; transform: translateY(-50%); display: grid; justify-items: end; text-align: right; gap: 3px; max-width: 150px; white-space: normal; }
.bracket-label .mark { width: 20px; height: 20px; margin-bottom: 4px; }
.bracket-label strong { color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.2; }
.bracket-label small { font: 600 10px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.stack .steps { display: none; }
.stack .callout { font-size: 12.5px; }
.stack .callout small { font-size: 10px; }
@media (max-width: 760px) {
  .stack .callouts .callout { display: none; }
  .stack .leaders .leader { display: none; }
  .stack .steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; border: 1px solid var(--rule); border-top: 0; background: var(--card); padding: 4px 14px 12px; }
  .stack .steps li { border-top: 1px solid var(--rule-soft); padding: 10px 0 0; }
  .stack .steps li:first-child { border-top: 0; }
  .stack .steps li[data-kind="ai"] strong { color: var(--blue); }
}
@media (prefers-reduced-motion: reduce) {
  .stack .layer, .stack .guides, .stack .leaders, .stack .callouts { transition: none; }
  .beam, .zone-floor[data-zone="ai"] { animation: none; }
}

/* ---- page tones: the ground colour cross-fades as sections pass the middle of the viewport ---- */
@property --page { syntax: "<color>"; inherits: true; initial-value: #f3f5f9; }
@property --card { syntax: "<color>"; inherits: true; initial-value: #fbfcfe; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #101828; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #364153; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #697386; }
@property --rule { syntax: "<color>"; inherits: true; initial-value: #d3d9e3; }
@property --rule-soft { syntax: "<color>"; inherits: true; initial-value: #e4e8ef; }
@property --wash { syntax: "<color>"; inherits: true; initial-value: #eef6ff; }
@property --blue { syntax: "<color>"; inherits: true; initial-value: #0a3fbc; }
@property --on-blue { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --grid { syntax: "<color>"; inherits: true; initial-value: rgba(16, 40, 90, .055); }
body.iso { transition: --page .9s ease, --card .9s ease, --ink .9s ease, --text .9s ease, --muted .9s ease, --rule .9s ease, --rule-soft .9s ease, --wash .9s ease, --blue .9s ease, --on-blue .9s ease, --grid .9s ease; }
@media (prefers-reduced-motion: reduce) { body.iso { transition: none; } }
.iso[data-theme="light"][data-tone="mist"], .iso[data-theme="light"][data-tone="sky"] { --page: #edf3ff; --card: #ffffff; --ink: #142b55; --text: #142b55; --muted: #52698f; --rule: #d6e2f7; --rule-soft: #d6e2f7; }
.iso[data-theme="dark"][data-tone="mist"] { --page: #07112b; --card: #0b1734; }
.iso[data-theme="dark"][data-tone="sky"] { --page: #0a1839; --card: #0e1d42; }
/* Navy is a contained band, never a page tone: the page around it stays in the light tones, so
   light mode never reads as dark mode while scrolling. */
.iso section[data-tone="navy"] { --ink: #edf2fc; --text: #b7c2d8; --muted: #8592b2; --rule: #22305a; --rule-soft: #1a264a; --page: #061334; --card: #0a1a45; --wash: #0d1c45; --blue: #6ea0ff; --on-blue: #04102e; --grid: rgba(120, 160, 255, .07); background: var(--page); color: var(--text); }
.iso[data-theme="dark"] section[data-tone="navy"] { --page: #030a1f; --card: #08132f; }
.iso[data-theme="light"] section[data-tone="navy"] { --ink: #ffffff; --text: rgba(255, 255, 255, .9); --muted: rgba(255, 255, 255, .72); --rule: rgba(255, 255, 255, .24); --rule-soft: rgba(255, 255, 255, .18); --page: #153b8a; --card: #214b9d; --wash: #214b9d; --blue: #ffffff; --on-blue: #153b8a; background: #153b8a; color: #ffffff; }
.iso[data-theme="light"] section[data-tone="sky"], .iso[data-theme="light"] section[data-tone="mist"] { background: #edf3ff; color: #142b55; }
.iso[data-theme="light"] section.cta-band[data-tone="navy"] { --page: #052699; --card: #0b36ad; --wash: #0b36ad; --blue: #ffffff; --on-blue: #052699; background: #052699; }
.iso section[data-tone="navy"] + section[data-tone="navy"] { border-top: 1px solid var(--rule-soft); }
section[data-tone] + section[data-tone] { border-top: 0; }

/* ---- type accents ---- */
/* Emphasis: the phrase is set upright in a blue gradient. As the heading comes into view the colour
   wipes in from left to right over the ink, so nothing crosses the letters. */
h1 em, h2 em, .pull-quote em { font-style: normal; --g1: #0a3fbc; --g2: #3583fc;
  background-image: linear-gradient(90deg, var(--g1) 0%, var(--g2) 50%, var(--ink) 50%, var(--ink) 100%);
  background-size: 200% 100%; background-position: 0% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-position 1.2s var(--anatomy-ease) .2s; }
.js h1 em:not(.in), .js h2 em:not(.in), .js .pull-quote em:not(.in) { background-position: 100% 0; }
.iso section[data-tone="navy"] em, .iso[data-theme="dark"] h1 em, .iso[data-theme="dark"] h2 em, .iso[data-theme="dark"] .pull-quote em { --g1: #6ea0ff; --g2: #b3cdff; }
@media (prefers-reduced-motion: reduce) { h1 em, h2 em, .pull-quote em { transition: none; } .js h1 em:not(.in), .js h2 em:not(.in), .js .pull-quote em:not(.in) { background-position: 0% 0; } }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.brand .logo { height: 21px; width: auto; color: var(--ink); display: block; }
.site-footer .brand .logo { height: 19px; }
.site-header { transition: box-shadow .3s; }
.site-header.scrolled { box-shadow: 0 10px 30px -24px rgba(6, 19, 52, .55); }

/* ---- hero: graph paper fading out from the figure, and a slow blue glow ---- */
.hero { position: relative; overflow: hidden; padding-block: 56px 72px; }
.hero > .wrap { position: relative; z-index: 1; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 30%, transparent 75%); }
.hero::after { content: ""; position: absolute; width: 900px; height: 700px; right: -220px; top: -260px; pointer-events: none; opacity: .55;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 24%, transparent), transparent 70%), radial-gradient(closest-side at 30% 70%, color-mix(in srgb, #3583fc 18%, transparent), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-120px, 60px) scale(1.08); } 100% { transform: translate(-40px, 140px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }
.hero-grid { grid-template-columns: minmax(0, 9fr) minmax(0, 14fr); gap: 48px; align-items: center; }
.hero h1 { max-width: 14ch; }
.hero-grid h1 { max-width: none; font-size: clamp(38px, 4.5vw, 62px); }
.hero-figure .mach-head { background: color-mix(in srgb, var(--card) 85%, transparent); }
.spec-strip { display: inline-grid; grid-auto-flow: column; margin: 0 0 30px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--card) 80%, transparent); }
.spec-strip div { padding: 9px 14px 10px; border-left: 1px solid var(--rule); min-width: 0; }
.spec-strip div:first-child { border-left: 0; }
.spec-strip dt { font: 500 9.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.spec-strip dd { margin: 5px 0 0; font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) { .spec-strip { display: grid; grid-auto-flow: row; width: 100%; } .spec-strip div { border-left: 0; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .spec-strip div:first-child { border-top: 0; } .spec-strip dd { margin: 0; white-space: normal; text-align: right; } }
.numline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 30px 0 0; font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: none; }
.numline { border-top: 1px solid var(--rule); padding-top: 16px; letter-spacing: .08em; }
.numline b { color: var(--ink); font-weight: 600; }
.numline span { white-space: nowrap; }
.numline i { font-style: normal; opacity: .6; }

/* ---- sections ---- */
section.tight { padding-block: 56px; }
.pull { padding-block: 128px; }
.pull-quote { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -0.035em; color: var(--ink); font-weight: 500; max-width: 21ch; margin: 0 0 26px; text-wrap: balance; }
.pull .lede b { color: var(--ink); font-weight: 500; }
.stats b { font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.04em; }
.stats > div { border-right: 1px solid var(--rule-soft); padding-left: 0; }
.stats > div:last-child { border-right: 0; }
.stats > div + div { padding-left: 22px; }
@media (max-width: 860px) { .stats > div:nth-child(2n+1) { padding-left: 0; } .stats > div:nth-child(2n) { border-right: 0; } }
.products .card { padding: 30px; min-height: 250px; }
.products h3 { font-size: 28px; letter-spacing: -0.03em; }
.products .card-label { color: var(--blue); }
.inds > .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 22px 24px; align-items: center; }
.inds h3 { margin: 0; grid-column: 1; }
.inds p { grid-column: 1; color: var(--muted); font-size: 14px; }
.inds .go { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 18px; transition: transform .3s var(--anatomy-ease); }
.inds .card:hover .go, .products .card:hover .go { transform: translateX(4px); }
.grid.quiet h3 { font-size: 19px; margin: 0; }
.quotes.one { grid-template-columns: minmax(0, 1fr); }
.quotes.one blockquote { font-size: clamp(22px, 2.6vw, 32px); }
a.card .go { transition: transform .3s var(--anatomy-ease); }

/* ---- systems marquee ---- */
.systems-marquee { overflow: hidden; border-block: 1px solid var(--rule); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.systems-marquee .track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.systems-marquee:hover .track { animation-play-state: paused; }
.systems-marquee span { display: inline-flex; gap: 10px; align-items: baseline; padding: 22px 30px; font-size: 21px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); border-right: 1px solid var(--rule-soft); white-space: nowrap; }
.systems-marquee span.gap { padding: 0; border: 0; }
.systems-marquee small { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .systems-marquee .track { animation: none; flex-wrap: wrap; width: auto; } .systems-marquee [aria-hidden="true"] { display: none; } }

/* ---- reveal on scroll ---- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--anatomy-ease) var(--d, 0ms), transform .9s var(--anatomy-ease) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero-grid h1 { font-size: clamp(38px, 9vw, 60px); } }
.iso[data-theme="dark"] .layer[data-kind="ai"] > .iso-solid > .iso-top { fill: #1b3a86; }
.iso[data-theme="dark"] .zone-floor[data-zone="ai"] { fill: color-mix(in srgb, var(--blue) 16%, transparent); }
@media (max-width: 760px) {
  .stack .iso-stage { overflow: hidden; }
  .stack .iso-stage > svg.iso-svg { width: 170%; max-width: none; margin-left: -22.4%; }
  .stack .leaders, .stack .callouts { display: none; }
}
@media (max-width: 560px) { .mach:not(.stack) .leaders, .mach:not(.stack) .callouts { display: none; } .mach-plate { padding: 12px 8px 8px; } }
.systems span small { white-space: nowrap; }

/* ---- logo wall: monochrome lockups on soft tiles, three columns drifting up and down ---- */
.logos-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.logo-wall { --logo: #222d53; --knock: var(--card); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 500px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.iso[data-theme="dark"] .logo-wall { --logo: #c3cde6; }
.logo-col { min-width: 0; }
.logo-col:nth-of-type(2) { margin-top: -72px; }
.logo-run { animation: logos-up var(--dur, 36s) linear infinite; will-change: transform; }
.logo-col:nth-of-type(2) .logo-run { animation-direction: reverse; }
.logo-wall:hover .logo-run { animation-play-state: paused; }
@keyframes logos-up { to { transform: translateY(-50%); } }
.logo-tile { height: 132px; margin-bottom: 16px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-soft); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--logo); padding: 0 14px; }
.logo-tile svg { display: block; flex: none; max-width: 100%; }
.logo-tile span { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--logo); white-space: nowrap; }
.logo-tile.type span { font: 500 11.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) { .logo-run { animation: none; } }
@media (max-width: 1040px) { .logos-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .logo-wall { height: 400px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .logo-col:nth-of-type(3) { display: none; }
  .logo-tile { height: 108px; margin-bottom: 12px; border-radius: 16px; }
  .logo-tile svg { transform: scale(.82); }
  .logo-tile span { font-size: 17px; }
}

/* ---- comparison: aidnn against one BI tool at a time ---- */
.vs-table { border-top: 1px solid var(--ink); }
.vs-switch { display: inline-flex; margin: 0 0 18px; border: 1px solid var(--rule); background: var(--card); transform: translateY(-1px); }
.vs-switch button { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 11px 16px; cursor: pointer; transition: color .2s, background .2s; }
.vs-switch button + button { border-left: 1px solid var(--rule); }
.vs-switch button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.vs-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--rule); }
.vs-row > * { padding: 20px 18px; min-width: 0; }
.vs-row > :first-child { padding-left: 0; }
.vs-head { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vs-head > * { padding-block: 14px; }
.vs-head .vs-us { color: var(--blue); display: flex; align-items: center; gap: 8px; }
.vs-head .vs-us .mark { width: 14px; height: 14px; }
.vs-job b { display: block; color: var(--ink); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.vs-job small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.vs-row .vs-us { background: color-mix(in srgb, var(--blue) 7%, transparent); color: var(--ink); font-weight: 500; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.vs-row:not(.vs-head) .vs-us::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.vs-row .vs-them { color: var(--muted); font-size: 16px; display: flex; align-items: center; }
.vs-them i { font-style: normal; display: none; }
.vs-table[data-show="tableau"] [data-t="tableau"], .vs-table[data-show="powerbi"] [data-t="powerbi"], .vs-table[data-show="looker"] [data-t="looker"] { display: inline; }
@media (max-width: 760px) {
  .vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs-row .vs-job { grid-column: 1 / -1; padding: 18px 0 8px; }
  .vs-row .vs-us, .vs-row .vs-them { padding: 12px 14px; font-size: 15px; }
  .vs-head > :first-child { display: none; }
  .vs-switch { display: flex; width: 100%; } .vs-switch button { flex: 1; padding: 11px 8px; }
}

/* ---- knowledge growth figure ---- */
.growth .g-svg { display: block; width: 100%; height: auto; }
.g-ring { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.g-ring-tag { fill: var(--card); }
.g-ring-name { font: 600 8.5px var(--mono); letter-spacing: .14em; fill: var(--muted); }
.g-node { transition: fill .4s; }
.g-node[data-s="obs"] { fill: var(--card); stroke: var(--muted); stroke-width: 1; }
.g-node[data-s="learn"] { fill: var(--ink); opacity: .85; }
.g-node[data-s="rule"] { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.g-node[data-s="ver"] { fill: var(--blue); }
.g-link { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.g-label { font-size: 12px; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.g-label-t { fill: var(--ink); font-weight: 600; }
.g-label-s { fill: var(--blue); font-family: var(--mono); font-size: 10.5px; }
.g-legend .g-k { width: 10px; height: 10px; border: 0; border-radius: 50%; }
.g-legend .g-k.obs { border: 1px solid var(--muted); }
.g-legend .g-k.learn { background: var(--ink); }
.g-legend .g-k.rule { border: 1.4px solid var(--ink); border-radius: 0; }
.g-legend .g-k.ver { background: var(--blue); }
.growth .mach-plate { padding: 10px 18px; }
@media (max-width: 560px) { .g-label-s { display: none; } }

/* ---- testimonials: one consistent-height slide with dot navigation ---- */
.q-carousel { min-width: 0; max-width: 100%; }
.q-carousel:focus-visible { outline-offset: 5px; }
.q-viewport { display: grid; min-width: 0; }
.q-viewport > .q-card { grid-area: 1 / 1; width: 100%; min-width: 0; min-height: 300px; margin: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.q-viewport > .q-card.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.q-dots { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 24px; }
.q-dot { width: 12px; height: 12px; padding: 0; border: 1px solid #153b8a; border-radius: 50%; background: transparent; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.q-dot:hover { transform: scale(1.12); }
.q-dot.is-active { background: #153b8a; box-shadow: 0 0 0 3px rgba(21, 59, 138, .18); }
.q-dot:focus-visible { outline: 2px solid #126af9; outline-offset: 4px; }
.q-card { flex: none; width: 400px; margin: 0 20px 0 0; background: var(--card); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--rule-soft), 0 18px 40px -30px rgba(10, 63, 188, .45); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; transition: transform .35s var(--anatomy-ease), box-shadow .35s; }
.q-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, var(--rule-soft)), 0 24px 48px -28px rgba(10, 63, 188, .55); }
.q-mark { font: 500 54px/0.6 var(--sans); color: var(--blue); height: 22px; }
.q-card blockquote { margin: 0; color: var(--ink); font-size: 16.5px; line-height: 1.55; letter-spacing: -0.005em; }
.q-card figcaption { margin-top: auto; font-size: 14px; color: var(--muted); }
.q-card figcaption b { display: block; color: var(--ink); font-weight: 500; }
.quotes.one { background: none; border: 0; display: block; }
.quotes.one .q-card { width: auto; max-width: 860px; margin: 0; }
.quotes.one .q-card blockquote { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; }
@media (max-width: 640px) { .q-viewport > .q-card { min-height: 360px; padding: 24px; } .q-dots { gap: 10px; padding-top: 20px; } .q-dot { width: 11px; height: 11px; } }

/* ---- compliance badges: grayscale until hovered ---- */
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 30px; }
.badge-row { display: inline-flex; gap: 18px; align-items: center; text-decoration: none; }
.badge-row img { width: 84px; height: 84px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .8; transition: filter .4s, opacity .4s, transform .4s var(--anatomy-ease); }
.badge-row:hover img { filter: none; opacity: 1; }
.badge-row img:hover { transform: translateY(-3px) scale(1.04); }
.badge-row.small { gap: 10px; margin-top: 18px; }
.badge-row.small img { width: 44px; height: 44px; }
.iso[data-theme="dark"] .badge-row img { filter: grayscale(1) brightness(1.15); opacity: .75; }
.iso[data-theme="dark"] .badge-row:hover img { filter: none; opacity: 1; }

/* ---- buttons: a lift, a light sweep and a nudged arrow on hover ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background .2s, color .2s, border-color .2s, transform .3s var(--anatomy-ease), box-shadow .3s var(--anatomy-ease); }
.btn .arr { display: inline-block; transition: transform .35s var(--anatomy-ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .26) 50%, transparent 75%); transform: translateX(-120%); transition: transform .8s var(--anatomy-ease); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--blue) 80%, transparent); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost:hover { background: var(--card); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { .btn, .btn .arr, .btn-primary::after { transition: background .2s, color .2s, border-color .2s; } .btn:hover, .btn:hover .arr { transform: none; } .btn-primary::after { display: none; } }
main { overflow-x: clip; }
.q-card { box-shadow: inset 0 0 0 1px var(--rule-soft), 0 22px 44px -32px rgba(10, 63, 188, .35); }
.q-card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, var(--rule-soft)), 0 26px 50px -30px rgba(10, 63, 188, .45); }

/* ---- ambient light: soft blue glows drifting slowly behind the whole page ---- */
.hero::after { display: none; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; opacity: var(--amb, .55);
  background: radial-gradient(closest-side, var(--c1), transparent 72%); }
.ambient i:nth-child(1) { --c1: color-mix(in srgb, #2f6bff 30%, transparent); left: -20vmax; top: -30vmax; animation: amb-a 46s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { --c1: color-mix(in srgb, #7aa7ff 34%, transparent); right: -25vmax; top: 10vh; animation: amb-b 58s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { --c1: color-mix(in srgb, #3b4fd8 24%, transparent); left: 20vw; bottom: -40vmax; animation: amb-c 52s ease-in-out infinite alternate; }
@keyframes amb-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(55vw, 35vh) scale(1.15); } 100% { transform: translate(85vw, 5vh) scale(.95); } }
@keyframes amb-b { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-60vw, 40vh) scale(.9); } 100% { transform: translate(-30vw, -25vh) scale(1.1); } }
@keyframes amb-c { 0% { transform: translate(0, 0) scale(.95); } 50% { transform: translate(-25vw, -55vh) scale(1.1); } 100% { transform: translate(35vw, -30vh) scale(1); } }
.iso[data-theme="dark"] .ambient { --amb: .9; }
.iso[data-theme="dark"] .ambient i:nth-child(1) { --c1: color-mix(in srgb, #2f6bff 34%, transparent); }
.iso[data-theme="dark"] .ambient i:nth-child(2) { --c1: color-mix(in srgb, #4f86ff 26%, transparent); }
@media (prefers-reduced-motion: reduce) { .ambient i { animation: none; } }
@media print { .ambient { display: none; } }
.ambient { --amb: .9; }
.ambient i:nth-child(1) { --c1: color-mix(in srgb, #2f6bff 36%, transparent); }
.ambient i:nth-child(2) { --c1: color-mix(in srgb, #6f9dff 40%, transparent); }
.ambient i:nth-child(3) { --c1: color-mix(in srgb, #3b4fd8 28%, transparent); }
.iso[data-theme="dark"] .ambient i:nth-child(1) { --c1: color-mix(in srgb, #2f6bff 34%, transparent); }
.iso[data-theme="dark"] .ambient i:nth-child(2) { --c1: color-mix(in srgb, #4f86ff 26%, transparent); }
.iso[data-theme="dark"] .ambient i:nth-child(3) { --c1: color-mix(in srgb, #3b4fd8 24%, transparent); }

/* ---- problem-led demo journey ---- */
.hero-with-journey { padding-bottom: 24px; }
.hero-with-journey + .journey-section { border-top: 0; padding-top: 12px; }
.hero-problem { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.hero-problem > .eyebrow { margin-bottom: 10px; }
.hero-problem-row { display: grid; gap: 10px; }
.hero-problem-row > span { color: var(--muted); font-size: 13px; }
.hero-problem-row [role="group"] { display: flex; flex-wrap: wrap; gap: 7px; }
.hero-problem-choice { border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--text); padding: 8px 11px; font: 500 12px/1.25 var(--sans); cursor: pointer; text-align: left; }
.hero-problem-choice:hover, .hero-problem-choice.is-selected { border-color: var(--blue); color: var(--ink); background: var(--blue-50); }
.journey-section { padding-block: 16px 30px; scroll-margin-top: 84px; }
.journey-section > .wrap { max-width: 1200px; }
.journey-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.problem-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.problem-choice { border: 1px solid var(--rule); background: var(--card); color: var(--text); border-radius: 999px; padding: 10px 15px; font: 500 14px/1.25 var(--sans); cursor: pointer; }
.problem-choice:hover, .problem-choice.is-selected { border-color: var(--blue); color: var(--ink); background: var(--blue-50); }
.journey-meta { display: flex; align-items: center; gap: 20px; flex: none; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }
.journey-meta a { color: var(--blue); text-decoration: none; letter-spacing: 0; }
.journey-panel { padding: 32px 0 18px; min-height: 340px; }
.journey-panel h2 { max-width: 24ch; margin-bottom: 18px; }
.journey-panel .lede { max-width: 66ch; }
.symptom-card, .outcome-card, .effect-card { margin-top: 28px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); padding: 24px 28px; }
.symptom-card .mono, .illustrative { display: inline-block; color: var(--blue); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; }
.symptom-card p, .outcome-card p { color: var(--ink); font-size: 19px; line-height: 1.5; margin: 10px 0 0; max-width: 70ch; }
.journey-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.journey-controls [disabled] { opacity: .45; cursor: not-allowed; }
.action-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.action-option { text-align: left; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--text); padding: 20px; cursor: pointer; min-width: 0; font: inherit; }
.action-option:hover, .action-option.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.action-option b, .action-option span { display: block; }
.action-option b { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.35; }
.action-option span { color: var(--blue); font-size: 13px; margin-top: 20px; }
.effect-card { border-color: color-mix(in srgb, var(--blue) 38%, var(--rule)); }
.effect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.effect-grid p { margin: 0; font-size: 14px; line-height: 1.5; }
.effect-grid b { display: block; color: var(--ink); font-size: 14px; font-weight: 500; margin-bottom: 5px; }
.journey-framework { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink); font-size: 16px; }
.journey-framework i { color: var(--blue); font-style: normal; font-family: var(--mono); }
.journey-framework span b, .journey-framework span small { display: block; }
.journey-framework span b { color: var(--ink); font-size: 16px; font-weight: 500; }
.journey-framework span small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.all-demos { padding-bottom: 40px; }
.all-demos h2 { max-width: 22ch; margin-bottom: 14px; }
.demo-group { padding-block: 30px 48px; }
@media (max-width: 760px) {
  .hero-problem { display: none; }
  .journey-top { display: block; }
  .problem-choices { display: grid; grid-template-columns: 1fr; }
  .problem-choice { border-radius: 10px; text-align: left; }
  .journey-meta { justify-content: space-between; margin-top: 20px; }
  .journey-panel { padding-top: 34px; min-height: 0; }
  .journey-section { padding-block: 12px 24px; }
  .hero-problem { margin-top: 22px; }
  .hero-problem-choice { border-radius: 9px; }
  .action-options, .effect-grid { grid-template-columns: 1fr; }
  .symptom-card, .outcome-card, .effect-card { padding: 20px; }
  .journey-framework { align-items: flex-start; flex-direction: column; }
  .journey-framework i { transform: rotate(90deg); }
  .journey-controls > * { flex: 1 1 100%; justify-content: center; }
}
/* ambient: quieter, slower, and kept clear of the header strip */
.ambient { --amb: .6;
  -webkit-mask-image: linear-gradient(transparent 0, transparent 96px, #000 300px); mask-image: linear-gradient(transparent 0, transparent 96px, #000 300px); }
.iso[data-theme="dark"] .ambient { --amb: .7; }
.ambient i:nth-child(1) { animation-duration: 96s; }
.ambient i:nth-child(2) { animation-duration: 120s; }
.ambient i:nth-child(3) { animation-duration: 108s; }
.site-header { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- articles ---- */
.art-hero { padding-bottom: 40px; }
.art-hero .eyebrow a { color: inherit; text-decoration: none; }
.art-hero .eyebrow a:hover { color: var(--blue); }
.art-hero .eyebrow span { opacity: .5; }
.art-title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; max-width: 22ch; }
.art-hero .lede { margin-top: 22px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 26px 0 0; }
.art-meta span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--rule); margin-right: 22px; vertical-align: middle; transform: translateY(-1px); }
.art-meta span:first-of-type::before { margin-left: 0; }
.art-cover { margin: 44px 0 0; border: 1px solid var(--rule-soft); background: var(--card); padding: 10px; max-width: 1040px; }
.art-cover img { display: block; width: 100%; height: auto; }
.art-sec { padding-top: 56px; }
.art { display: grid; grid-template-columns: 210px minmax(0, 720px); gap: 72px; justify-content: start; align-items: start; }
.art.no-toc { grid-template-columns: minmax(0, 720px); }
.art.art-wide { grid-template-columns: 210px minmax(0, 880px); }
.art.art-wide.no-toc { grid-template-columns: minmax(0, 880px); }
.toc { position: sticky; top: 96px; font-size: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc li a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; }
.toc li a:hover { color: var(--ink); }
.toc li a[aria-current="true"] { color: var(--ink); border-left-color: var(--blue); }
.prose { font-size: 18px; line-height: 1.72; color: var(--text); min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose p { max-width: none; margin: 0 0 1.15em; }
.prose h2 { font-size: clamp(25px, 2.6vw, 32px); line-height: 1.15; margin: 2.1em 0 .7em; scroll-margin-top: 96px; }
.prose h3 { font-size: 21px; margin: 1.8em 0 .55em; scroll-margin-top: 96px; }
.prose h4 { font-size: 17px; margin: 1.6em 0 .5em; }
.prose h2 + h3 { margin-top: .8em; }
.prose strong, .prose b { color: var(--ink); font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.3em; }
.prose li { margin: 0 0 .5em; padding-left: .2em; }
.prose li::marker { color: var(--blue); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--blue); color: var(--ink); font-size: 1.06em; }
.prose code { font-size: .86em; background: var(--wash); border: 1px solid var(--rule-soft); padding: .08em .38em; }
.prose figure { margin: 2.2em 0; }
.prose figure img, .prose figure video { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); background: var(--card); }
.prose figcaption { font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.read-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 30; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 1040px) {
  .art, .art.art-wide { grid-template-columns: minmax(0, 720px); gap: 0; }
  .art.art-wide { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 640px) {
  .prose { font-size: 17px; }
  .art-cover { padding: 6px; margin-top: 32px; }
  .art-meta span::before { margin-right: 12px; }
}

/* ---- interactive reports (ported posts keep their own components, on the site's type) ---- */
.rpt { min-width: 0; font-size: 17px; }
.rpt .cbx { font-size: 17px; line-height: 1.65; }
.rpt .cbx .wrap, .rpt .cbx .cbx-wrap { max-width: none; padding-inline: 0; }
.rpt .cbx .cbx-col { max-width: 720px; margin-inline: 0; }
.rpt .cbx p, .rpt .cbx li { font-size: 17px; line-height: 1.68; color: var(--text); }
.rpt .cbx .lead, .rpt .cbx .cbx-lead { font-size: 19px; line-height: 1.55; color: var(--ink); }
.rpt .cbx h2 { font: 500 clamp(25px, 2.6vw, 32px)/1.15 var(--sans); letter-spacing: -0.028em; color: var(--ink); scroll-margin-top: 96px; }
.rpt .cbx h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.rpt .cbx section { border-color: var(--rule-soft); }
.rpt .cbx b, .rpt .cbx strong { font-weight: 500; color: var(--ink); }
.rpt .cbx table { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.rpt .cbx th { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }
.rpt .cbx .cap, .rpt .cbx .cbx-cap, .rpt .cbx figcaption { font-size: 13.5px; line-height: 1.55; }
.rpt .cbx code { background: var(--wash); color: var(--ink); border: 1px solid var(--rule-soft); }
.rpt .cbx .card, .rpt .cbx .cbx-card, .rpt .cbx .flowcard { background: var(--card); border-color: var(--rule-soft); }
.rpt .cbx svg text { font-family: var(--sans); }
.rpt .cbx summary { color: var(--ink); }
.rpt .cbx select, .rpt .cbx button, .rpt .cbx input { font-family: var(--sans); }
@media (max-width: 640px) { .rpt .cbx p, .rpt .cbx li { font-size: 16px; } .rpt .cbx .lead, .rpt .cbx .cbx-lead { font-size: 17px; } }
/* filter bars ride under the site header, inside the article column */
.rpt .cbx { --cbx-nav-h: 65px; }
.rpt .cbx #ctlbar, .rpt .vbar { position: sticky; top: 65px; left: auto; right: auto; width: auto; z-index: 15; margin: 0 0 28px; background: var(--page); border: 1px solid var(--rule-soft); box-shadow: none; }
.rpt .cbx #ctlbar .cbx-ctlbar-inner, .rpt .vbar-in { padding: 9px 14px; }
.rpt .rpt-dek { margin-bottom: 26px; }
@media (max-width: 640px) {
  .rpt .vbar-in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rpt .vbar-in > * { flex: none; }
}