/* Generated by website/datastar/build.py. Layout from omz-website (N3Mw4oIG6qKU70DHkYoi9a): «Site components» 43:2 and the
   «Subpages» frames, read with use_figma 2026-10-16 (session de029e82). Colours and type: tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surface-app); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }  /* hidden at rest (data-attr:hidden; no style=): above any class's display (obs. 0217) */
:focus-visible { outline: 1px solid var(--accent-default); outline-offset: 2px; }
.c-primary { color: var(--text-primary); } .c-secondary { color: var(--text-secondary); } .c-tertiary { color: var(--text-tertiary); }
.c-accent { color: var(--accent-default); } .c-passed { color: var(--state-passed); } .c-your-turn { color: var(--state-your-turn); }

/* Page grain: the study's .noise (220 px turbulence tile), as omz-website's site-grain 82:1583 (overlay .09). */
.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-page); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root:not([data-theme="dark"]) .noise { opacity: .16; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .noise { opacity: var(--grain-page); mix-blend-mode: overlay; } }
.page > header, .page > main, .page > footer { position: relative; z-index: 2; }
.page > header { z-index: 3; }  /* the open Menu lies over the page */

/* Card grain: factory-base depth/card (NOISE .10), drawn as the Flow pages do (calibrated, a different random pattern). */
.grain-card { position: relative; isolation: isolate; }
.grain-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  opacity: calc(var(--grain-card) * 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* site-bar 45:27 — 56 + 1 hairline; container 1120 with 32 sides */
.bar { border-bottom: 1px solid var(--border-subtle); }
.bar-in, .footer-in { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 32px; }
.bar-in { height: 56px; }
/* brand/lockup 240:8670 with the decided mark (2026-10-17) as outlined SVG: bar at 100 %, footer at 14/18 */
.lockup { position: relative; display: block; flex: none; }
.lockup--bar { width: 107px; height: 25px; } .lockup--footer { width: 83.2px; height: 19.4px; }
.lockup-svg { display: block; width: 100%; height: 100%; }
.lockup-svg .lockup-mark { fill: var(--green-mark); } .lockup-svg .lockup-line { stroke: var(--green-mark); }
.lockup-svg .lockup-word { fill: var(--text-primary); }
.bar-nav { display: flex; gap: 24px; }
.nav-link { display: inline-flex; align-items: center; font: 400 13px/18px 'Albert Sans', system-ui, sans-serif; }
.nav-link--bar { position: relative; height: 16px; padding-left: 17px; color: var(--text-secondary); }
.nav-sq { position: absolute; left: 0; top: 5px; width: 9px; height: 8px; background: var(--line-drawing); }
.nav-link--footer { color: var(--text-tertiary); }
.nav-link:hover { color: var(--text-primary); }
.bar-end { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.bar-menu { display: none; color: var(--text-secondary); }

.action { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 4px; color: var(--text-primary); white-space: nowrap; }
.action--bar { height: 32px; font: 400 13px/18px 'Albert Sans', system-ui, sans-serif; }
.action--section { height: 40px; font: 400 14px/20px 'Albert Sans', system-ui, sans-serif; letter-spacing: -.005em; }
.action--secondary { border: 1px solid var(--border-default); }
.action--secondary:hover { background: var(--surface-raised); }
.action-dot { width: 5px; height: 5px; border-radius: 2.5px; background: var(--accent-default); }

/* site-page 56:1446 — blocks: 96 top, 120 bottom, 64 between, centred */
.blocks { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 96px 16px 120px; }
.blocks > * { width: 100%; max-width: 1056px; }
.blocks > .contact { max-width: 560px; } .blocks > .legal { max-width: 720px; }

/* site-section-head 59:1508 */
.head { display: flex; flex-direction: column; gap: 12px; }
.head-p { max-width: 640px; }
.title-dot { color: var(--state-passed); }

/* site-call-to-action 45:88 — 192 above the card */
.cta { padding-top: 192px; }
.cta-card { height: 265px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-panel); overflow: hidden; }
.cta-canvas { position: absolute; left: 0; top: 0; width: 1054px; height: 263px; max-width: none; pointer-events: none; }
.cta-text { position: relative; padding: 64px 48px; display: flex; flex-direction: column; }
.cta-text h2 { margin-top: 2px; } .cta-text p { margin-top: 12px; }
.cta-actions { display: flex; gap: 8px; margin-top: 15px; }

/* site-contact-form 56:1313 */
.contact { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 6px; background: var(--surface-panel); }
.choices { display: flex; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 8px 14px; border: 1px solid var(--border-default);
  border-radius: 4px; color: var(--text-secondary); }
.choice-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-drawing); }
.choice.on { background: var(--surface-raised); border-color: var(--accent-default); color: var(--text-primary); }
.choice.on .choice-dot { background: var(--accent-default); border-color: var(--accent-default); }
.field { display: flex; flex-direction: column; gap: 8px; }
.input { height: 38px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--surface-app);
  color: var(--text-primary); resize: none; width: 100%; }
.send { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 8px 16px; border-radius: 4px;
  background: var(--look-accent-fill); border: 1px solid var(--look-accent-line); color: var(--text-primary); }
.send:hover { background: var(--look-accent-fill-hover); }
.send-hex { width: 9px; height: 8px; fill: var(--state-confirmed-soft); stroke: var(--state-confirmed); stroke-width: 1; }

/* site-footer 45:63 — hairline, 32 above, 64 below */
.footer { border-top: 1px solid var(--border-subtle); padding: 32px 0 64px; }
.footer-in { min-height: 22px; }
.footer-nav { display: flex; gap: 16px; }
.theme { margin-left: auto; display: flex; gap: 12px; }
.theme-btn { color: var(--text-tertiary); } .theme-btn.on { color: var(--text-primary); }

/* site-legal-text 56:1259 */
.legal { display: flex; flex-direction: column; gap: 12px; }
.legal-sections { display: flex; flex-direction: column; gap: 28px; padding-top: 20px; }
.legal-section { display: flex; flex-direction: column; gap: 8px; }
.legal-section p + p { margin-top: 12px; }  /* Figma joins a section's paragraphs with a blank line: 20 px apart */

/* site-link-list 56:1276 */
.link-list { display: flex; flex-direction: column; }
.link-item { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-default); }
.link-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.link-arrow { color: var(--text-tertiary); transition: transform .15s; }
.link-item:hover .link-arrow, .link-item:focus-visible .link-arrow { color: var(--text-primary); transform: translateX(3px); }

/* use-case run 56:1355 and its six previews 59:1573, 60:1556 … 60:1687 */
.uc-run, .cap-detail { display: flex; flex-direction: column; gap: 20px; }
.preview, .flow { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 6px; background: var(--surface-panel); }
.pv-top { display: flex; justify-content: space-between; align-items: flex-start; }
.run { color: var(--text-tertiary); } .run:hover { color: var(--text-primary); }
.later { opacity: .2; } .later, .flow-step, .recon-row { transition: opacity .3s, border-color .3s; }
.recon-cols { display: flex; gap: 16px; } .recon-cols .grow { flex: 1; }
.recon-row { display: flex; align-items: center; gap: 16px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.recon-proc { width: 140px; flex: none; line-height: 20px; }
.recon-run { flex: 1; height: 2px; background: var(--state-passed); } .recon-run.wait { background: var(--state-your-turn); }
.flow-steps { display: flex; gap: 10px; align-items: flex-start; } .flow-steps--journey { gap: 8px; }
.flow-arrow { color: var(--text-tertiary); }
.flow-step { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 6px;
  background: var(--surface-panel); }
.flow-step.now { border-color: var(--accent-default); }
.flow-gate { width: 140px; color: var(--state-your-turn); }
.nodes { display: flex; gap: 10px; align-items: center; }
.node { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 4px; }
.node.own, .node.lit { border-color: var(--accent-default); }
.requests { display: flex; flex-direction: column; }
.request { display: flex; gap: 16px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.request > :nth-child(1) { width: 320px; flex: none; } .request > :nth-child(2) { width: 220px; flex: none; } .request > :nth-child(3) { flex: 1; }
.request.on { background: var(--surface-raised); }
.events { display: flex; flex-direction: column; gap: 4px; }
.stream-event { display: flex; gap: 16px; }
.rebuild:not(.mo *) { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.doc:not(.mo *) { align-self: flex-start; }
.doc-step, .doc-search { display: flex; align-items: center; gap: 12px; }
.doc-name { width: 90px; flex: none; line-height: 20px; }
.chips { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: 9999px;
  color: var(--text-secondary); white-space: nowrap; }
.within, .say:not(.mo *) { display: flex; flex-direction: column; gap: 6px; }
.step-list { display: flex; flex-direction: column; gap: 12px; }
.step-list-row { display: flex; gap: 24px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.step-list-row > :first-child { width: 160px; flex: none; }
.cap-head, .part-of { display: flex; gap: 12px; align-items: center; } .part-of { gap: 8px; }

/* site-steps 45:144 (how we work) */
.steps { display: flex; flex-direction: column; gap: 48px; }
/* the /how-we-work frame keeps the captured home section's 160 above the steps: 64 + 160 + 48 under the page's h1 */
.steps > .head--h1 { margin-bottom: 224px; }
.step-row { display: grid; grid-template-columns: repeat(4, 264px); border-top: 1px solid var(--border-subtle); }
.step { position: relative; display: grid; grid-template-rows: 20px 30px auto; padding: 24px 24px 0 0; }
.step > .t-title-md { white-space: nowrap; }
.step-line { position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--accent-default); }
.model { display: flex; gap: 24px; }

/* /platform page versions 86:1583, 86:1658, 86:1788 (not in the catalogue: named for the OMZ-3088 review) */
.platform { display: flex; flex-direction: column; gap: 64px; }
.col--page { display: flex; flex-direction: column; gap: 24px; }
.col-head { display: flex; flex-direction: column; gap: 8px; }
.layers, .layer-list { display: flex; flex-direction: column; gap: 12px; }
.layer { display: flex; gap: 24px; padding: 20px; border: 1px solid var(--border-default); border-radius: 6px; }
.layer-key { width: 176px; flex: none; }
.tags:not(.mo *) { flex: 1; display: flex; gap: 12px; }
.tag { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 4px; }
.tag-name { display: flex; gap: 8px; }
.tag-spacer { flex: .87 1 0; }
.layer-base { padding: 14px 20px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-panel); }
.comb-body { display: flex; gap: 56px; align-items: center; }
.comb { width: 458px; height: 344px; flex: none; }
.tools { flex: 1; display: flex; flex-direction: column; }
.tool-line { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.tool-line.on .tool-name { color: var(--accent-default); }
.tool-name { width: 112px; flex: none; }
.constraint-cols { display: flex; gap: 48px; align-items: flex-start; }
.constraint-col { flex: 1; display: flex; flex-direction: column; }
.constraint { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 16px; border-top: 1px solid var(--border-subtle); }
.constraint-title { display: flex; gap: 12px; } .constraint-title > :first-child { width: 20px; flex: none; }

/* below 820 px: the bar's Menu (the study's breakpoint); the phone rules are at the end of this sheet */
@media (max-width: 820px) {
  .bar-nav { display: none; position: absolute; top: 57px; left: 0; right: 0; flex-direction: column; gap: 16px; padding: 16px 32px;
    background: var(--surface-app); border-bottom: 1px solid var(--border-subtle); }
  .bar-nav.open { display: flex; }
  .bar-menu { display: inline-block; }
  .bar { position: relative; }
}
/* ---------------- the home (omz-website 1:2): sections 160 apart (the statement 120), heads captured from the study */
.blocks--home { gap: 0; padding-top: 0; padding-bottom: 160px; }
.blocks--home > .contact { margin-top: 64px; }
.lower { text-transform: lowercase; }
.pv-says:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-sec { padding-top: 160px; }
.head--captured { display: grid; grid-template-rows: 18px 28px auto; row-gap: 2px; }
.head--captured .head-p { margin-top: 10px; max-width: 585px; }
.home-sec > .head + * { margin-top: 48px; }
.steps.home-sec { gap: 0; } .steps.home-sec > .step-row { margin-top: 48px; } .steps.home-sec > .model { margin-top: 48px; }

/* site-hero 51:1458 — full bleed 1440 × 738, Dark in both modes */
.hero { position: relative; height: 738px; width: 100vw; max-width: none !important; margin-left: 0;  /* the flex parent centres it; calc(50% - 50vw) moved it 8 px left (measured 2026-10-17) */
  background: var(--surface-app);
  overflow: hidden; }
.hero-bg img { position: absolute; left: 50%; top: 0; width: 1440px; height: 738px; margin-left: -720px; max-width: none; pointer-events: none; }
.hero-bg .hero-canvas { opacity: .8; mix-blend-mode: overlay; left: calc(50% + 3px); top: -3px; }
.hero-in { position: relative; max-width: 1056px; margin: 0 auto; padding-top: 223px; display: flex; flex-direction: column; }
.hero-title { margin-top: 2px; max-width: 520px; }
.hero-lede { margin-top: 8px; max-width: 435px; }
.hero-actions { display: flex; gap: 8px; margin-top: 32px; }
.hero-facts { margin-top: 24px; max-width: 520px; }
.hero-caption { position: absolute; left: calc(50% + 169px); top: 490px; }
.hero-caption li { padding: 4px 10px; border-radius: 12px; }

/* site-statement 45:74 */
.statement { padding-top: 120px; } .statement p { max-width: 521px; }

/* site-use-cases 51:598 with site-use-case-panel 51:195 */
.uc-box { border: 1px solid var(--border-subtle); border-radius: 6px; overflow: hidden; }
.uc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-subtle); }
.uc-tab { position: relative; height: 99px; padding: 24px; text-align: left; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.uc-tab:nth-child(3n) { border-right: 0; } .uc-tab:nth-child(n+4) { border-bottom: 0; }
.uc-tab-title { color: var(--text-secondary); } .uc-tab.on .uc-tab-title { color: var(--text-primary); }
.uc-sig { width: 120px; height: 18px; fill: none; stroke: var(--line-drawing); stroke-width: 1; }
.uc-tab.on .uc-sig { stroke: var(--text-tertiary); }
.uc-tab-line { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; }
.uc-tab.on .uc-tab-line { background: var(--accent-default); }
.uc-tab:hover .uc-tab-title { color: var(--text-primary); }
.uc-panel { min-height: 600px; padding: 30px 32px; display: flex; flex-direction: column; gap: 0; }
.uc-body { margin-top: 12px; max-width: 531px; }
.uc-panel > .preview { margin-top: 30px; }
.uc-chips { display: flex; gap: 16px; align-items: center; margin-top: 33px; }
.uc-chip { border-bottom: 1px solid var(--border-default); }

/* site-area-grid 51:1439 */
.areas { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border-subtle); border-radius: 6px; }
.area { display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 161px; border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle); }
.area:nth-child(5n) { border-right: 0; } .area:nth-child(n+6) { border-bottom: 0; }
.area-tool { margin-top: auto; }

/* site-capabilities 51:835 with site-capability-cell 51:240 */
.cap-grid { display: grid; grid-template-columns: 400px 624px; gap: 32px; align-items: start; }
.cap-comb-art { position: relative; width: 400px; height: 388px; overflow: hidden; }
.cap-comb-art img { display: block; }
.comb-hit { position: absolute; width: 96px; height: 84px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
/* the still already draws flow (omnizel flow) as the selected cell; the hit areas only take the pointer */
.cap-hint { text-align: center; margin-top: 8px; }
.cap-cell { position: relative; min-height: 681px; border: 1px solid var(--border-subtle); border-radius: 6px; }
.cap-cell-canvas { position: absolute; left: 0; top: 0; width: 622px; height: 680px; max-width: none; pointer-events: none; }
.cap-cell-in { position: relative; padding: 32px; display: flex; flex-direction: column; gap: 0; }
.cap-cell-in h3 { margin-top: 2px; } .cap-sentence { margin-top: 8px; max-width: 416px; }
.cap-cell .flow { margin-top: 24px; } .cap-cell .within { margin-top: 20px; }
.flow-steps--cell { gap: 8px; } .flow-steps--cell .flow-arrow { display: none; }
.flow-steps--cell .flow-gate { width: 110px; }
.cap-cell { height: 681px; } .cap-cell .flow { min-height: 220px; border: 1px solid var(--border-subtle); background: transparent; }
.cap-foot { display: flex; gap: 12px; align-items: baseline; margin-top: 20px; }

/* site-platform 51:1114: three columns in one frame */
.plat-cols { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-subtle); border-radius: 6px; }
.pcol { padding: 32px; display: flex; flex-direction: column; gap: 0; min-height: 675px; border-right: 1px solid var(--border-subtle); }
.pcol:last-child { border-right: 0; }
.pcol .col-head { gap: 2px; margin-bottom: 13px; }
.tool-art { position: relative; width: 287px; height: 215px; }
.tool-picks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.tool-one { margin-top: 24px; text-align: center; }
.hlayers { display: flex; flex-direction: column; gap: 8px; }
.hlayer { padding: 16px; border: 1px solid var(--border-default); border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.pcol > .hlayer { margin-top: 8px; padding: 12px 16px; white-space: nowrap; }
.ltags { display: flex; flex-wrap: wrap; gap: 8px; }
.ltag { position: relative; padding: 2px 8px; border: 1px solid var(--border-default); border-radius: 4px; }
.ltag:hover, .ltag:focus-visible { color: var(--text-primary); }
.ltag-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 4; width: 220px; padding: 8px 10px; text-align: left;
  background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 4px; color: var(--text-secondary); }
.needs { display: flex; flex-direction: column; }
.need { border-bottom: 1px solid var(--border-subtle); }
.need summary { list-style: none; display: flex; gap: 16px; padding: 11px 0; cursor: pointer; }
.need summary::-webkit-details-marker { display: none; }
.need p { padding: 0 0 8px 32px; }

/* ---------------- phones and tablets (HANDOVER 10a, 2026-10-17): the study's breakpoints 1100 / 960 / 860 / 560,
   mapped onto the reference's classes (study lines 44, 120, 157, 162, 311–312, 468, 518–522, 561) */
@media (max-width: 1100px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area { border-right: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; }
  .area:nth-child(2n) { border-right: 0 !important; } .area:nth-last-child(-n + 2) { border-bottom: 0 !important; }
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .cap-grid > :first-child { justify-self: center; }
}
@media (max-width: 960px) {
  .plat-cols { grid-template-columns: minmax(0, 1fr); }
  .pcol { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .pcol:last-child { border-bottom: 0; }
}
@media (max-width: 860px) {
  .hero { height: 680px; }
  .hero-in { position: absolute; left: 0; right: 0; bottom: 64px; padding: 0 16px; }
  .hero-caption { display: none; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;  /* the study's .shade at 860 */
    background: linear-gradient(0deg, color-mix(in srgb, var(--surface-app) 94%, transparent) 0%, color-mix(in srgb, var(--surface-app) 80%, transparent) 40%, transparent 72%); }
  .hero-in { z-index: 2; }
  .uc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-tab { border-right: 1px solid var(--border-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; }
  .uc-tab:nth-child(2n) { border-right: 0 !important; }
  .step-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-cell, .cap-cell .flow { height: auto; min-height: 0; }
  .cap-cell-canvas { width: 100%; height: 100%; object-fit: cover; }
  .cta-card { height: auto; }
}
@media (max-width: 560px) {
  .bar-in, .footer-in { padding: 0 16px; }
  .footer-in { flex-wrap: wrap; row-gap: 16px; }
  .home-sec { padding-top: 96px; }
  .statement { padding-top: 96px; } .cta { padding-top: 96px; }
  .hero-title { font-size: 28px; line-height: 34px; }
  .uc-tab { height: auto; padding: 16px; }
  .uc-panel { padding: 16px; min-height: 0; }
  .uc-chips, .choices, .hero-actions, .cta-actions { flex-wrap: wrap; }
  .area { padding: 16px; min-height: 0; }
  .cap-comb-art { zoom: .895; }  /* 400 px drawing in a 358 px column; zoom keeps the hit areas on their cells */
  .cap-cell-in, .pcol { padding: 24px 16px; }
  .step-row { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 16px 0 0; }
  .cta-text { padding: 32px 16px; }
  .constraint-cols { flex-direction: column; gap: 0; }
  .contact { padding: 16px; }
  .flow-steps { flex-wrap: wrap; }
  .layer { flex-direction: column; gap: 12px; padding: 16px; } .layer-key { width: auto; }
  .tags:not(.mo *) { flex-direction: column; } .tag-spacer { display: none; }
  .comb-body { flex-direction: column; gap: 24px; } .comb { width: 100%; max-width: 358px; height: auto; aspect-ratio: 458 / 344; }
  .tool-line { flex-direction: column; gap: 4px; } .tool-name { width: auto; }
  .chips, .nodes { flex-wrap: wrap; }
  .comb img { width: 100%; height: auto; }
  .request { flex-direction: column; gap: 2px; } .request > :nth-child(n) { width: auto; }
  .head--captured { grid-template-rows: auto; }
  .statement p { font-size: 18px; line-height: 28px; }  /* the study's .story p at 560 */
  .model { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.comb-hit[data-key="processes"] { left: 152px; top: 86px; }
.comb-hit[data-key="build"] { left: 230px; top: 132px; }
.comb-hit[data-key="language"] { left: 75px; top: 132px; }
.comb-hit[data-key="one"] { left: 152px; top: 176px; }
.comb-hit[data-key="data"] { left: 230px; top: 222px; }
.comb-hit[data-key="agents"] { left: 75px; top: 222px; }
.comb-hit[data-key="governance"] { left: 152px; top: 268px; }

/* ---------------------------------------------------------------- motion (generated from website/datastar/motion.py)
   The study v34's moving parts. A host gets .mo-on only when its script runs; without JS or with reduced motion the
   stills and the step lists stay as they were. */
@keyframes mo-flow { to { stroke-dashoffset: -7; } }
@keyframes mo-breathe { 50% { opacity: .55; } }
@keyframes mo-in { from { opacity: 0; transform: translateY(-4px); } }

/* hero: WebGL scene and the moving grain over it (study .hero > canvas#gl, canvas.hfx) */
.hero-bg .mo-gl, .hero-bg .mo-hfx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--surface-app) 68%, transparent); mask-image: linear-gradient(var(--surface-app) 68%, transparent); }
.hero-bg .mo-hfx { mix-blend-mode: screen; }
.hero.mo-on .hero-bg img { display: none; }
/* the grainy noise gradient: the tint drifts slowly behind the outlined cloth, the grain shimmers in small steps */
@keyframes mo-tintdrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -3%) scale(1.06); } 100% { transform: translate(-3%, 2%) scale(1.02); } }
@keyframes mo-grainstep { 25% { transform: translate(-6px, 4px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, -5px); } }
.hero-bg .mo-tint { position: absolute; inset: -12%; pointer-events: none; mix-blend-mode: screen; animation: mo-tintdrift 38s ease-in-out infinite alternate;
  background: radial-gradient(45% 60% at 8% 100%, color-mix(in srgb, var(--state-passed) 20%, transparent), transparent 70%), radial-gradient(35% 50% at 95% 5%, color-mix(in srgb, var(--state-your-turn) 9%, transparent), transparent 70%), radial-gradient(40% 50% at 70% 60%, color-mix(in srgb, var(--state-running) 7%, transparent), transparent 70%); }
.hero-bg .mo-hgrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; opacity: .8; animation: mo-grainstep 1.2s steps(4) infinite; }
.hero-bg .mo-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--surface-app) 88%, transparent) 0%, color-mix(in srgb, var(--surface-app) 55%, transparent) 40%, transparent 62%); }
.hero-bg .mo-tint, .hero-bg .mo-hgrain, .hero-bg .mo-shade { -webkit-mask-image: linear-gradient(var(--surface-app) 68%, transparent); mask-image: linear-gradient(var(--surface-app) 68%, transparent); }
/* Light (the hero follows the page's theme while it moves; the script drops dark-scope) */
.hero.mo-on:not(.dark-scope) .mo-hfx { mix-blend-mode: multiply; }
.hero.mo-on:not(.dark-scope) .mo-tint { mix-blend-mode: multiply; opacity: .6; }

/* the grain canvas on cards and runs (the study's canvas.grain, grain()) */
.mo-grain-on { position: relative; isolation: isolate; }
.mo-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; border-radius: inherit; }
.cta-card.mo-grain-on > .cta-canvas, .cap-cell.mo-grain-on > .cap-cell-canvas { display: none; }
/* the closing call to action's colour field (the study's .close::before) */
.cta-card.mo-grain-on::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: radial-gradient(60% 140% at 100% 100%, color-mix(in srgb, var(--state-passed) 22%, transparent), transparent 60%), radial-gradient(40% 80% at 0% 0%, color-mix(in srgb, var(--state-your-turn) 8%, transparent), transparent 60%), var(--surface-panel); }
/* proposal after agentfield.ai (Tobias 2026-10-16 «more gradients (noise grainy)»): a tinted field on the home's cards, over the
   study's panel ground (82 %), which also keeps the cloth back inside the cards */
.mo-fields .uc-box::before, .mo-fields .cap-cell::before, .mo-fields .plat-cols::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; }
.mo-fields .uc-box::before { background: radial-gradient(75% 60% at 0% 0%, color-mix(in srgb, var(--state-running) 16%, transparent), transparent 70%), radial-gradient(65% 50% at 100% 100%, color-mix(in srgb, var(--state-your-turn) 11%, transparent), transparent 70%), color-mix(in srgb, var(--surface-panel) 82%, transparent); }
.mo-fields .cap-cell::before { background: radial-gradient(100% 60% at 50% 108%, color-mix(in srgb, var(--state-passed) 20%, transparent), transparent 70%), color-mix(in srgb, var(--surface-panel) 82%, transparent); }
.mo-fields .plat-cols::before { background: linear-gradient(180deg, color-mix(in srgb, var(--state-your-turn) 11%, transparent), transparent 60%), color-mix(in srgb, var(--surface-panel) 82%, transparent); }

/* layer 2: panels tilt toward the pointer, their parts at their own depth (the study's .tilt, [data-z]) */
.uc-box, .cap-grid { perspective: 1400px; }
.tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.3,1); will-change: transform; }
.tilt [data-z] { transform: translateZ(calc(var(--z, 0) * 1px)); }
.hero.mo-on .hero-caption { transition: transform .45s cubic-bezier(.2,.7,.3,1); }

/* page cloth (study #cloth): behind everything on the home */
.mo-cloth { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

/* a run surface (study .run) filling a preview or a capability cell's flow */
.preview.mo-on, .flow.mo-on { padding: 0; background: transparent; border: 0; gap: 0; }
.preview.mo-on > :not(.mo):not([hidden]), .flow.mo-on > :not(.mo):not([hidden]) { display: none; }
.cap-cell.mo-on .pv-says, .cap-cell.mo-on > .cap-cell-canvas { display: none; }
.mo { position: relative; isolation: isolate; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 16px; display: grid;
  gap: 16px; overflow: hidden; background: var(--surface-raised); transition: border-color .4s; outline: none; }
.mo:focus-visible { outline: 1px solid var(--state-your-turn); outline-offset: 3px; }
.mo::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .6s; opacity: 0; }
.mo[data-state="running"]::before { opacity: 1; background: radial-gradient(50% 80% at 30% 100%, color-mix(in srgb, var(--state-running) 12%, transparent), transparent 70%); }
.mo[data-state="waiting"]::before { opacity: 1; background: radial-gradient(60% 90% at 85% 100%, color-mix(in srgb, var(--state-your-turn) 18%, transparent), transparent 70%); animation: mo-breathe 2.4s ease-in-out infinite; }
.mo[data-state="paused"]::before { opacity: 1; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-quiet) 12%, transparent) 0 1px, transparent 1px 8px); }
.mo[data-state="finished"] { border-color: color-mix(in srgb, var(--state-passed) 40%, var(--border-subtle)); }
.mo[data-state="finished"]::before { opacity: 1; background: radial-gradient(70% 100% at 50% 110%, color-mix(in srgb, var(--state-passed) 20%, transparent), transparent 70%); }
.mo > canvas.mo-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.mo > canvas.run-grain { z-index: -1; }
.mo .lbl { font: 400 11px/16px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-tertiary); text-transform: lowercase; letter-spacing: .01em; }
.mo .say { display: block; font: 400 13px/20px 'Albert Sans', system-ui, sans-serif; color: var(--text-tertiary); min-height: 1.6em; }
.mo .say.wait { color: var(--state-your-turn); } .mo .say.ok { color: var(--state-passed); }
.cap-cell .flow.mo-on { min-height: 0; margin-top: 24px; }
.cap-cell .flow.mo-on .mo { min-height: 440px; align-content: start; }

/* journey: the rising line with its hexagon markers (study .jr) */
.mo .jr { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--border-subtle); margin-inline: -16px; margin-bottom: -16px; }
.mo .jr .rows { display: grid; align-content: stretch; border-right: 1px solid var(--border-subtle); }
.mo .jr .rw { display: grid; gap: 1px; align-content: center; padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); transition: background .3s; }
.mo .jr .rw:last-child { border-bottom: 0; }
.mo .jr .rw b { font: 700 13px/16px 'BDO Grotesk', system-ui, sans-serif; color: var(--text-quiet); letter-spacing: -.01em; transition: color .3s; }
.mo .jr .rw span { font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); }
.mo .jr .rw.done b { color: var(--text-secondary); } .mo .jr .rw.now b, .mo .jr .rw.wait b { color: var(--text-primary); }
.mo .jr .rw.wait span { color: var(--state-your-turn); }
.mo .jr .rw.now { background: linear-gradient(90deg, color-mix(in srgb, var(--state-running) 8%, transparent), transparent); }
.mo .jr .rw.wait { background: linear-gradient(90deg, color-mix(in srgb, var(--state-your-turn) 10%, transparent), transparent); }
.mo .jr .chart { position: relative; min-height: 220px; }
.mo .jr .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mo .jr .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; border-top: 1px solid var(--border-subtle); font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); }
.mo .jr .foot .say { font: inherit; }
.mo .jr svg.v text.vt { font: 400 13px 'Albert Sans', system-ui, sans-serif; } .mo .jr .v .gate text { fill: var(--text-tertiary); } .mo .jr svg.v tspan.w { font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; fill: var(--text-quiet); }
.mo .jr text { font: 400 calc(11px * var(--k, 1)) 'Geist Mono', ui-monospace, Menlo, monospace; fill: var(--text-quiet); }
.mo .jr .sg { fill: none; stroke: color-mix(in srgb, var(--state-running) 60%, var(--text-tertiary)); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1); }
.mo .jr .sg.on { stroke-dashoffset: 0; }
.mo[data-state="waiting"] .jr .sg.on { stroke: color-mix(in srgb, var(--state-your-turn) 35%, var(--text-tertiary)); }
.mo[data-state="finished"] .jr .sg { stroke: color-mix(in srgb, var(--state-passed) 70%, var(--text-tertiary)); }
.mo .jr .ghost { fill: none; stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 2 4; }
.mo .jr .mk path { fill: var(--surface-raised); stroke: var(--line-drawing); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
.mo .jr .mk text { transition: fill .3s; }
.mo .jr .mk.done path { stroke: var(--state-passed); } .mo .jr .mk.done text { fill: var(--text-tertiary); }
.mo .jr .mk.now path { stroke: var(--state-running); fill: color-mix(in srgb, var(--state-running) 25%, var(--surface-raised)); } .mo .jr .mk.now text { fill: var(--text-primary); }
.mo .jr .gate { cursor: pointer; }
.mo .jr .gate circle.r { fill: none; stroke: var(--line-drawing); stroke-width: 1.4; }
.mo .jr .gate circle.dw, .mo .jr .land circle.dw { fill: none; stroke: var(--state-passed); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mo .jr .gate.dwell circle.dw { stroke-dashoffset: 0; transition: stroke-dashoffset .75s linear; }
.mo .jr .gate.wait circle.r { stroke: var(--state-your-turn); animation: mo-breathe 1.4s ease-in-out infinite; }
.mo .jr .gate.wait text { fill: var(--state-your-turn); }
.mo .jr .gate.done circle.r { stroke: var(--state-passed); }
.mo .jr .land path.f { fill: var(--surface-raised); stroke: var(--border-default); stroke-width: 1.4; transition: fill .3s, stroke .3s; }
.mo .jr .land.ready { cursor: pointer; } .mo .jr .land.ready path.f { stroke: var(--state-passed); }
.mo .jr .land.dwell circle.dw { stroke-dashoffset: 0; transition: stroke-dashoffset .6s linear; }
.mo .jr .land.landed path.f { fill: var(--state-passed); stroke: var(--state-passed); }

/* router: the route drawing (study .route) */
.mo-route { width: 100%; max-width: 380px; height: auto; display: block; }
.mo-route .n rect, .mo-route .n path { fill: var(--surface-panel); stroke: var(--border-default); stroke-width: 1; transition: stroke .3s; }
.mo-route .n text { fill: var(--text-tertiary); font: 400 13px 'Albert Sans', system-ui, sans-serif; }
.mo-route .n .s { font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; fill: var(--text-quiet); }
.mo-route .ln { stroke: var(--border-default); stroke-width: 1; fill: none; }
.mo-route .ln.on { stroke-dasharray: 3 5; animation: mo-flow .7s linear infinite; stroke-width: 1.6; stroke: var(--text-primary); }
.mo-route .ln.on.local { stroke: var(--state-passed); } .mo-route .ln.on.cloud { stroke: var(--state-running); } .mo-route .ln.on.block { stroke: var(--state-failed); }
.mo-route .n.lit rect, .mo-route .n.lit path { stroke: var(--text-primary); } .mo-route .n.lit text { fill: var(--text-primary); }
.preview.mo-route-on > .nodes { display: none; }

/* live graph (study .live, .gbox, .feed) */
.mo.live { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.mo .gbox { height: 320px; position: relative; }
.mo .gbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo .feed { font: 400 11px/20px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); display: grid; align-content: start; max-height: 260px; overflow: hidden; }
.mo .feed div { animation: mo-in .5s ease; }
.mo .feed div b { color: var(--text-secondary); font-weight: 400; }

/* event stream (study .evx, .evlog, .evmap, .rebuild) */
.mo .evx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
.mo .evcol { display: grid; gap: 8px; }
.mo .evlog { list-style: none; display: grid; gap: 4px; font: 400 11px/20px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); min-height: 104px; align-content: start; }
.mo .evlog li { display: flex; gap: 8px; padding-inline: 8px; border-left: 1px solid var(--border-default); animation: mo-in .4s ease; transition: background .3s, border-color .3s, color .3s; }
.mo .evlog li b { color: var(--text-secondary); font-weight: 400; }
.mo .evlog li.scan { background: linear-gradient(90deg, color-mix(in srgb, var(--state-passed) 14%, transparent), transparent); border-color: var(--state-passed); color: var(--text-secondary); }
.mo .evmap { width: 100%; max-width: 300px; height: auto; display: block; overflow: visible; justify-self: end; }
.mo .evmap .ln { fill: none; stroke: var(--border-default); stroke-width: 1; transition: stroke .3s; }
.mo .evmap .ln.on { stroke: var(--state-running); stroke-width: 1.4; stroke-dasharray: 3 5; animation: mo-flow .7s linear infinite; }
.mo .evmap .ln.ok { stroke: color-mix(in srgb, var(--state-passed) 80%, transparent); }
.mo .evmap .ln.fail { stroke: var(--state-failed); stroke-dasharray: 2 3; }
.mo .evmap .hub path, .mo .evmap .sb rect { fill: var(--surface-panel); stroke: var(--border-default); stroke-width: 1; transition: stroke .3s, fill .3s; }
.mo .evmap .hub.on path { stroke: var(--text-primary); }
.mo .evmap text { fill: var(--text-tertiary); font: 400 13px 'Albert Sans', system-ui, sans-serif; }
.mo .evmap text.s { font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; fill: var(--text-quiet); }
.mo .evmap .sb.hit rect { stroke: var(--state-running); }
.mo .evmap .sb.ok rect { stroke: color-mix(in srgb, var(--state-passed) 80%, transparent); } .mo .evmap .sb.ok text { fill: var(--text-primary); }
.mo .evmap .sb.fail rect { stroke: var(--state-failed); fill: color-mix(in srgb, var(--state-failed) 8%, var(--surface-panel)); }
.mo .evmap .sb text.n { fill: var(--state-passed); }
.mo .evfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.mo .rebuild { text-decoration: none; height: 28px; padding-inline: 16px; border-radius: 4px; border: 1px solid var(--border-default); background: none; color: var(--text-quiet); font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; cursor: default; position: relative; overflow: hidden; transition: color .3s, border-color .3s; }
.mo .rebuild.armed { color: var(--state-your-turn); border-color: var(--state-your-turn); cursor: pointer; animation: mo-breathe 1.4s ease-in-out infinite; }
.mo .rebuild::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--state-passed); }
.mo .rebuild.dwell::after { width: 100%; transition: width .75s linear; }

/* documents (study .ecmx, .docs, .doc, .esteps, .find) */
.mo .ecmx { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 32px; align-items: start; }
.mo .docs { position: relative; height: 230px; }
.mo .doc { position: absolute; inset: 14px 14px 0 0; border: 1px solid var(--border-default); border-radius: 4px; background: var(--surface-panel); padding: 16px; display: grid; align-content: start; gap: 8px; transition: transform .6s cubic-bezier(.2,.7,.3,1), border-color .4s, box-shadow .4s, opacity .4s; }
.mo .doc i { display: block; height: 3px; border-radius: 2px; background: var(--border-default); }
.mo .doc i:nth-of-type(2n) { width: 70%; } .mo .doc i:nth-of-type(3n) { width: 85%; }
.mo .doc.back { transform: translate(0, 0); opacity: 0; }
.mo .doc.back.show { transform: translate(14px, -14px); opacity: .55; }
.mo .doc.front { inset: 14px 0 0 14px; z-index: 1; }
.mo .doc .dh { font: 700 15px/24px 'BDO Grotesk', system-ui, sans-serif; color: var(--text-primary); }
.mo .doc .ds { font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); margin-bottom: 4px; }
.mo .doc.read { border-color: color-mix(in srgb, var(--state-running) 60%, var(--border-default)); }
.mo .doc.filed { border-color: color-mix(in srgb, var(--state-passed) 70%, var(--border-default)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--state-passed) 10%, transparent); }
.mo .tags { flex: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mo .tags span { font: 400 11px/16px 'Geist Mono', ui-monospace, Menlo, monospace; padding-inline: 8px; border-radius: 4px; border: 1px solid var(--border-default); color: var(--text-secondary); animation: mo-in .4s ease; }
.mo .esteps { list-style: none; display: grid; margin: 0; padding: 0; }
.mo .esteps li { display: grid; grid-template-columns: minmax(0, 76px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 8px 8px; border-left: 1px solid var(--border-default); transition: background .3s, border-color .3s; }
.mo .esteps b { font: 700 13px/16px 'BDO Grotesk', system-ui, sans-serif; color: var(--text-quiet); transition: color .3s; }
.mo .esteps span { font: 400 11px/16px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); transition: color .3s; }
.mo .esteps li.now { border-color: var(--state-running); background: linear-gradient(90deg, color-mix(in srgb, var(--state-running) 8%, transparent), transparent); }
.mo .esteps li.now b, .mo .esteps li.done b { color: var(--text-primary); }
.mo .esteps li.done { border-color: color-mix(in srgb, var(--state-passed) 70%, transparent); } .mo .esteps li.done span { color: var(--text-tertiary); }
.mo .esteps li.gate.armed { border-color: var(--state-your-turn); background: linear-gradient(90deg, color-mix(in srgb, var(--state-your-turn) 10%, transparent), transparent); cursor: pointer; }
.mo .esteps li.gate.armed span { color: var(--state-your-turn); }
.mo .esteps li.gate.dwell { background: linear-gradient(90deg, color-mix(in srgb, var(--state-passed) 14%, transparent), transparent); transition: background .75s linear; }
.mo .find { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--border-subtle); font: 400 13px/20px 'Albert Sans', system-ui, sans-serif; }
.mo .find .q { color: var(--text-primary); min-height: 1.4em; }
.mo .find .q:not(:empty)::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--text-primary); animation: mo-breathe 1s steps(2) infinite; }
.mo .find .hit { color: var(--state-passed); font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; }

/* capability visuals (study .cv) */
.mo .cv { display: grid; gap: 16px; }
.mo .cv svg { width: 100%; max-width: 520px; margin-inline: auto; height: auto; display: block; overflow: visible; }
.mo .cv text { fill: var(--text-tertiary); font: 400 13px 'Albert Sans', system-ui, sans-serif; }
.mo .cv text.s { font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; fill: var(--text-quiet); }
.mo .cv text.c { text-anchor: middle; }
.mo .cv .ln { fill: none; stroke: var(--border-default); stroke-width: 1.2; transition: stroke .35s, opacity .35s; }
.mo .cv .ln.on { stroke: var(--state-running); stroke-dasharray: 3 5; animation: mo-flow .7s linear infinite; }
.mo .cv .ln.ok { stroke: color-mix(in srgb, var(--state-passed) 80%, transparent); }
.mo .cv .ln.wait { stroke: var(--state-your-turn); }
.mo .cv .ln.bad { stroke: var(--state-failed); stroke-dasharray: 2 3; }
.mo .cv .nd path, .mo .cv .nd rect, .mo .cv .nd circle.r { fill: var(--surface-panel); stroke: var(--border-default); stroke-width: 1.2; transition: stroke .35s, fill .35s; }
.mo .cv .nd.on path, .mo .cv .nd.on rect, .mo .cv .nd.on circle.r { stroke: var(--state-running); }
.mo .cv .nd.ok path, .mo .cv .nd.ok rect, .mo .cv .nd.ok circle.r { stroke: color-mix(in srgb, var(--state-passed) 85%, transparent); }
.mo .cv .nd.ok text { fill: var(--text-primary); }
.mo .cv .nd.wait path, .mo .cv .nd.wait rect, .mo .cv .nd.wait circle.r { stroke: var(--state-your-turn); fill: color-mix(in srgb, var(--state-your-turn) 8%, var(--surface-panel)); }
.mo .cv .nd.bad path, .mo .cv .nd.bad rect, .mo .cv .nd.bad circle.r { stroke: var(--state-failed); fill: color-mix(in srgb, var(--state-failed) 8%, var(--surface-panel)); }
.mo .cv .nd circle.k { fill: var(--line-drawing); transition: fill .35s; }
.mo .cv .nd.on circle.k { fill: var(--state-running); } .mo .cv .nd.ok circle.k { fill: var(--state-passed); } .mo .cv .nd.wait circle.k { fill: var(--state-your-turn); } .mo .cv .nd.bad circle.k { fill: var(--state-failed); }
.mo .cv .armed { cursor: pointer; }
.mo .cv .armed path, .mo .cv .armed rect { animation: mo-breathe 1.4s ease-in-out infinite; }
.mo .cv .mv { transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .5s; }
.mo .cv .tok { fill: var(--text-primary); transition: transform .7s cubic-bezier(.4,0,.2,1); }
.mo .cv .tok.wait { fill: var(--state-your-turn); } .mo .cv .tok.ok { fill: var(--state-passed); }
.mo .cv .rows { display: grid; gap: 4px; font: 400 11px/16px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); min-height: 58px; }
.mo .cv .rows div { animation: mo-in .4s ease; display: flex; gap: 8px; min-width: 0; }
.mo .cv .rows div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo .cv .rows b { color: var(--text-secondary); font-weight: 400; flex: none; }
.mo .cv .rows .ok b { color: var(--state-passed); } .mo .cv .rows .wait b { color: var(--state-your-turn); } .mo .cv .rows .bad b { color: var(--state-failed); }
.mo .cv .q { font: 400 13px/20px 'Albert Sans', system-ui, sans-serif; color: var(--text-primary); min-height: 20px; }
.mo .cv .q::before { content: "search  "; font: 400 11px 'Geist Mono', ui-monospace, Menlo, monospace; color: var(--text-quiet); white-space: pre; }

/* the capability comb (study #comb, #combfx, .cell) */
.cap-comb-art.mo-on > img { visibility: hidden; }
.cap-comb-art .mo-comb { position: absolute; left: 0; top: 0; width: 400px; height: 388px; display: block; overflow: visible; pointer-events: none; z-index: 1; }
.cap-comb-art .mo-combfx { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
:root[data-theme="light"] .cap-comb-art .mo-combfx { mix-blend-mode: multiply; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cap-comb-art .mo-combfx { mix-blend-mode: multiply; } }
.cap-comb-art.mo-on .comb-hit { z-index: 3; }
.mo-comb .cell.next path.f { fill: none; stroke: var(--border-default); stroke-dasharray: 3 4; }
.mo-comb .cell.next text { fill: var(--text-quiet); font: 400 13px 'Geist Mono', ui-monospace, Menlo, monospace; }
.mo-comb .cell { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.mo-comb .cell path.f { fill: color-mix(in srgb, var(--surface-panel) 80%, transparent); stroke: var(--border-default); stroke-width: 1; transition: fill .3s, stroke .3s; }
.mo-comb .cell path.sh { fill: color-mix(in srgb, var(--surface-app) 60%, transparent); opacity: 0; transition: opacity .35s; filter: blur(6px); }
.mo-comb .cell path.st { opacity: .55; transition: opacity .3s; }
.mo-comb .cell.sel path.st { opacity: .5; }
.mo-comb .cell .ln { fill: none; stroke: var(--text-tertiary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.mo-comb .cell.hover .ln, .mo-comb .cell.sel .ln, .mo-comb .cell.named .ln { stroke: var(--text-primary); }
.mo-comb .cell .lt { stroke-width: 1.5; }
.mo-comb .cell .dot { fill: var(--text-primary); }
.mo-comb .cell.sel { transform: translateY(-7px); }
.mo-comb .cell.sel path.sh { opacity: 1; }
.mo-comb .cell.sel path.f { stroke: var(--state-passed); fill: color-mix(in srgb, var(--state-passed) 10%, var(--surface-panel)); }
.mo-comb .stripe { stroke: var(--border-default); } .mo-comb .stripe-on { stroke: color-mix(in srgb, var(--state-passed) 45%, transparent); }

/* the home's tool comb (study .iso, #toolcomb, .tc) */
.tool-art.mo-on > img { visibility: hidden; }
.tool-art .mo-iso { position: absolute; inset: 0; pointer-events: none; overflow: clip;  /* the mask hides the rest; clip keeps the rotated comb from widening a phone page */
  -webkit-mask-image: radial-gradient(closest-side, var(--surface-app) 62%, transparent); mask-image: radial-gradient(closest-side, var(--surface-app) 62%, transparent); }
.tool-art .mo-toolcomb { position: absolute; left: -16%; top: 50%; width: 132%; height: auto; display: block; overflow: visible; transform: translateY(-50%) rotateX(56deg) rotateZ(30deg); }
.mo-toolcomb .more path { stroke: var(--line-drawing); stroke-width: 1; stroke-dasharray: 3 4; }
.mo-toolcomb .tc path.f { fill: color-mix(in srgb, var(--surface-raised) 90%, transparent); stroke: var(--border-default); stroke-width: 1; transition: stroke .25s, fill .25s; }
.mo-toolcomb .tc.on path.f { fill: color-mix(in srgb, var(--state-passed) 12%, var(--surface-raised)); stroke: var(--state-passed); }
.mo-toolcomb .ln { fill: none; stroke: var(--text-tertiary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.mo-toolcomb .lt { stroke-width: 1.5; }
.mo-toolcomb .tc.on .ln { stroke: var(--text-primary); }
.mo-toolcomb .dot { fill: var(--text-primary); }
.mo-toolcomb .stripe { stroke: var(--border-default); }
.tool-art.mo-on .tool-picks { z-index: 2; }
.mo, .mo-comb, .mo-toolcomb, .mo-route, .hero, .cta-card, .uc-box, .cap-cell, .plat-cols { --page: var(--surface-app); --ground: var(--surface-panel); --well: var(--surface-raised); --hair: var(--border-subtle); --hair-2: var(--border-default); --ink: var(--text-primary); --body: var(--text-secondary); --dim: var(--text-tertiary); --faint: var(--text-quiet); --faint-line: var(--line-drawing); --ok: var(--state-passed); --wait: var(--state-your-turn); --stop: var(--state-failed); --blue: var(--state-running); --green-edge: var(--state-passed); --mono: 'Geist Mono', ui-monospace, Menlo, monospace; --text: 'Albert Sans', system-ui, sans-serif; --display: 'BDO Grotesk', system-ui, sans-serif; }