/* Courage MFG. An engineering document more than a landing page: IBM Plex, large light headlines, hairline structure,
   ink and steel, with colour used only for meaning (teal for Courage objects, blue for Business Central's). The one
   bold thing is the ontology itself. */
/* IBM Plex, self-hosted (SIL Open Font License, public/fonts/OFL.txt). */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/fonts/plex-cond-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/fonts/plex-cond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --paper: #FFFFFF; --fog: #F4F5F7; --hair: #E2E5E9; --hair-2: #CDD2D8;
  --ink: #0B1015; --graphite: #2C333C; --steel: #5A636E; --steel-2: #8A929C;
  --teal: #0A7C8C; --teal-2: #12A0B3; --teal-t: #E3F2F4;
  --bc: #0F6CBD; --bc-2: #4C9BF0; --bc-t: #E7F0FA;
  --night: #0B0F14; --night-2: #141A21; --night-hair: #252D36; --night-ink: #E6EAEE; --night-steel: #96A0AB;
  --red: #B4403A;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1240px;
}
* { 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(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font-family: var(--mono); font-size: .86em; }
em { font-style: italic; }
.muted { color: var(--steel); }

h1, h2, h3 { margin: 0; font-weight: 300; color: var(--ink); }
h1 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -0.005em; }
p { margin: 0 0 16px; max-width: 64ch; }
.lede { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; color: var(--graphite); max-width: 56ch; font-weight: 300; }
.kicker { font-size: 15px; font-weight: 500; color: var(--steel); margin: 0 0 22px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 2px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: inherit; font-size: 15.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn:hover { background: var(--graphite); color: #fff; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn.line:hover { border-color: var(--ink); background: transparent; }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light:hover { background: var(--fog); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }
.link { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px; cursor: pointer; }

/* ---------- header and footer ---------- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.top-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.brand .mark { color: var(--ink); }
.top nav { display: flex; gap: 30px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--steel); padding: 4px 0; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.top nav a[aria-current="page"] { box-shadow: 0 1px 0 var(--ink); }
.top-act { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.top-act .signin { text-decoration: none; color: var(--steel); }
.top-act .signin:hover { color: var(--ink); }
.foot { border-top: 1px solid var(--hair); padding: 64px 0 36px; font-size: 14.5px; color: var(--steel); }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { margin-top: 14px; max-width: 38ch; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h2 { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: 0; margin-bottom: 4px; }
.foot-col a { color: var(--steel); text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot-legal { display: flex; justify-content: space-between; gap: 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 13px; }
.foot-legal span:last-child { max-width: 72ch; text-align: right; }

/* ---------- hero: the ontology ---------- */
.hero { padding: 80px 0 0; border-bottom: 1px solid var(--hair); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.hero h1 { font-size: clamp(46px, 6vw, 86px); line-height: 1.02; letter-spacing: -0.035em; max-width: 12ch; }
.hero .lede { margin: 0 0 16px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.og { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: center; margin: 48px 0 0; padding: 24px 0 56px; border-top: 1px solid var(--hair); }
.og-g { margin: -10px -20px -10px -40px; }
.og-svg { display: block; width: 100%; height: auto; overflow: visible; }
.og .ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.og .ring-l { font-family: var(--sans); font-size: 19px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.og .ring-l.sub { font-size: 16px; font-weight: 400; fill: var(--steel); }
.ge { fill: none; stroke: #C3CAD2; stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1.6s cubic-bezier(.3, .6, .3, 1) forwards; animation-delay: calc(.15s + var(--i) * .02s); transition: stroke .2s, opacity .2s, stroke-width .2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.gn { cursor: pointer; outline: none; }
.gn circle { stroke: #fff; stroke-width: 2.5; transition: r .15s; }
.gn.bc rect { fill: var(--bc); stroke: #fff; stroke-width: 2.5; }
.gn.courage circle { fill: var(--teal); }
.gn text { font-family: var(--sans); font-size: 19px; fill: var(--graphite); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; transition: fill .2s, opacity .2s; }
.gn.bc text { font-weight: 500; fill: var(--ink); }
.gn:hover text, .gn:focus-visible text { fill: var(--ink); }
.gn:focus-visible circle { stroke: var(--teal-2); stroke-width: 4; }
.og-svg.focus .ge { opacity: .18; }
.og-svg.focus .ge.on { opacity: 1; stroke: var(--ink); stroke-width: 1.6; }
.og-svg.focus .gn:not(.on) text { opacity: .42; }
.og-svg.focus .gn:not(.on) circle { opacity: .5; }
.og-svg.focus .gn.sel text { font-weight: 600; fill: var(--ink); }
.og-svg.focus .gn.sel circle { r: 10; }
.og-svg.focus .gn:not(.on) rect { opacity: .5; }
.og-svg.focus .gn.sel rect { stroke: var(--ink); stroke-width: 3; }
.og-panel { font-size: 15px; line-height: 1.5; border-top: 1px solid var(--ink); padding-top: 18px; min-height: 420px; }
.og-panel h3 { font-size: 34px; font-weight: 300; margin: 6px 0 10px; letter-spacing: -0.02em; }
.og-side { font-size: 12.5px; margin: 0; display: flex; align-items: center; gap: 6px; color: var(--steel); }
.og-side::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.og-side.bc::before { background: var(--bc); border-radius: 1px; }
.og-what { color: var(--graphite); margin-bottom: 10px; }
.og-k { font-size: 12.5px; color: var(--steel); margin: 8px 0 4px; }
.og-panel ul { list-style: none; margin: 0; padding: 0; }
.og-panel li { padding: 3px 0; border-top: 1px solid var(--hair); color: var(--graphite); }
.og-panel li b { font-weight: 500; color: var(--ink); }
.og-panel li.more { color: var(--steel); }
.og-acts { margin: 0; color: var(--graphite); }
.og-pick { display: block; margin-bottom: 18px; }
.og-pick select { width: 100%; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--hair-2); border-radius: 2px; background: #fff; color: var(--ink); }
.og figcaption { font-size: 13.5px; color: var(--steel); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); }
@media (prefers-reduced-motion: reduce) { .ge { animation: none; stroke-dashoffset: 0; } }

/* ---------- sections ---------- */
.sec { padding: 112px 0; border-bottom: 1px solid var(--hair); }
.sec.fog { background: var(--fog); }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.col-text h2 { margin-bottom: 26px; }
.col-text p { color: var(--graphite); }
.head-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: end; margin-bottom: 56px; }
.head-row p { color: var(--graphite); margin: 0; }

/* fragmentation matrix */
.frag { border-top: 1px solid var(--ink); font-size: 15px; }
.frag-r { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(5, minmax(0, 1fr)); align-items: center; border-bottom: 1px solid var(--hair); min-height: 46px; }
.frag-r > span { padding: 10px 8px; }
.frag-r > span:first-child { padding-left: 0; }
.frag-r > span:not(:first-child) { text-align: center; }
.frag-h { min-height: 40px; font-size: 13px; color: var(--steel); }
.frag-r .dup i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--steel-2); }
.frag-r.one { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--teal-t); }
.frag-r.one > span:first-child { font-weight: 600; padding-left: 12px; }
.frag-r .span { grid-column: 2 / -1; text-align: left !important; color: var(--graphite); }

/* the two layers */
.layers { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.layer-c { padding: 32px 48px 8px 0; }
.layer-c + .layer-c { padding-left: 48px; border-left: 1px solid var(--hair-2); }
.layer-c h3 { font-size: 22px; font-weight: 400; margin-bottom: 14px; }
.layer-c p { color: var(--graphite); }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 0; }
.nums div { display: flex; flex-direction: column; border-top: 1px solid var(--hair-2); padding-top: 12px; }
.nums dt { font-size: 13.5px; color: var(--steel); order: 1; }
.nums dd { margin: 0; font-size: 52px; line-height: 1.05; font-weight: 300; letter-spacing: -0.03em; order: 0; }
.nums span { font-size: 13.5px; color: var(--steel); order: 2; }
.shots-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 72px; }
figure { margin: 0; }
figure figcaption { font-size: 14px; color: var(--steel); margin-top: 14px; max-width: 60ch; }
.shot { display: block; width: 100%; height: auto; border: 1px solid var(--hair-2); background: #fff; box-shadow: 0 1px 2px rgba(11, 16, 21, .04), 0 24px 48px -28px rgba(11, 16, 21, .28); }

/* object chips and paths */
.pc { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1; padding: 6px 10px; border: 1px solid var(--hair-2); background: #fff; white-space: nowrap; color: var(--ink); }
.pc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.pc.bc::before { background: var(--bc); border-radius: 1px; }
.pa { display: inline-block; width: 18px; height: 1px; background: var(--steel-2); vertical-align: middle; position: relative; margin: 0 2px; }
.pa::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--steel-2); border-right: 0; }
.questions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.questions li { padding: 20px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; }
.questions p { margin: 0; font-size: 18px; font-weight: 400; }
.path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; justify-content: flex-end; }

/* applications */
.tabs { border-top: 1px solid var(--ink); }
.tablist { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--hair-2); scrollbar-width: none; }
.tablist button { flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 16px 0 14px; margin-right: 32px; font: inherit; font-size: 15.5px; color: var(--steel); cursor: pointer; }
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.pane[hidden] { display: none !important; }
.pane { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding-top: 40px; align-items: start; }
.pane-text h3 { font-size: 26px; font-weight: 300; margin-bottom: 14px; letter-spacing: -0.015em; }
.pane-text p { color: var(--graphite); }
.pane-text .on { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 24px; }
.pane-text .on > span:first-child { font-size: 13.5px; color: var(--steel); margin-right: 6px; }
.phones { display: flex; gap: 32px; justify-content: center; background: #fff; border: 1px solid var(--hair-2); padding: 40px 24px; }
.phones .shot { width: min(270px, 44%); border-radius: 18px; box-shadow: 0 24px 48px -24px rgba(11, 16, 21, .35); }

/* AI */
.sec.dark { background: var(--night); color: var(--night-ink); border-bottom: 0; }
.sec.dark h2 { color: #fff; }
.sec.dark .col-text p { color: var(--night-steel); }
.sec.dark a { color: #fff; }
.tools { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tools code { display: inline-block; padding: 6px 10px; border: 1px solid var(--night-hair); color: var(--night-ink); font-size: 13.5px; }
.transcript { border: 1px solid var(--night-hair); background: var(--night-2); padding: 28px 32px; font-size: 15.5px; }
.t-cap { font-size: 13px; color: var(--night-steel); margin: 0 0 20px; }
.t-q { color: #fff; font-size: 19px; font-weight: 300; line-height: 1.45; margin-bottom: 20px; }
.t-call { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--night-hair); color: var(--night-steel); font-size: 14.5px; }
.t-call code { color: var(--teal-2); min-width: 128px; }
.t-a { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--night-hair); color: var(--night-ink); line-height: 1.6; }
.t-act { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 20px; padding: 12px 14px; border: 1px dashed #3B4652; font-size: 14px; color: var(--night-steel); }
.t-act > span:first-child { color: #F2C36B; width: 100%; font-size: 13px; }
.t-act code { color: var(--teal-2); }

/* ownership stack */
.stack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.stack li { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.stack b { font-weight: 500; }
.stack span { color: var(--graphite); }
.stack li.core { background: var(--teal-t); margin: 0 -20px; padding: 22px 20px; border-bottom-color: var(--teal-2); border-top: 1px solid var(--teal-2); }

/* rollout */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; border-top: 1px solid var(--ink); }
.steps li { counter-increment: step; padding: 24px 28px 0 0; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--hair-2); }
.steps li::before { content: counter(step); display: block; font-size: 52px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; color: var(--steel-2); margin-bottom: 20px; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--graphite); font-size: 15.5px; }

/* economics */
.econ { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
.econ h2 { margin-bottom: 20px; }
.econ p { color: var(--graphite); margin: 0; }
.econ-act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- inner pages ---------- */
.page-head { padding: 88px 0 56px; border-bottom: 1px solid var(--hair); }
.page-head h1 { max-width: 17ch; }
.page-head .lede { margin-top: 26px; }
.jump { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 36px; font-size: 15px; }
.jump a { color: var(--steel); text-decoration: none; }
.jump a:hover { color: var(--ink); }
.doc { padding-bottom: 40px; }
.doc-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding: 56px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.doc-k { align-self: start; position: sticky; top: 96px; }
.doc-k h2 { font-size: 30px; margin-bottom: 14px; }
.doc-k p { color: var(--steel); font-size: 15.5px; }
.doc-b .big { font-size: 19px; font-weight: 300; color: var(--graphite); line-height: 1.65; }
.tbl-h { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.tbl-h + .tbl { margin-bottom: 40px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; border-top: 1px solid var(--ink); }
.tbl th { text-align: left; font-weight: 400; font-size: 13px; color: var(--steel); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair-2); }
.tbl td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--graphite); }
.tbl td b { font-weight: 500; color: var(--ink); }
.tbl code { color: var(--teal); font-size: 12.5px; }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl.links .lk { font-style: italic; color: var(--steel); }
.tbl-note { font-size: 13.5px; color: var(--steel); margin-top: 14px; }
.via { margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.via dt { font-weight: 500; color: var(--ink); }
.via dd { margin: 0; color: var(--steel); }
.area { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding: 56px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.area-h { position: sticky; top: 96px; align-self: start; }
.area-h h2 { font-size: 30px; margin-bottom: 12px; }
.area-h p { color: var(--steel); font-size: 15.5px; }
.mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.mod { padding: 18px 0 16px; border-bottom: 1px solid var(--hair); }
.mod-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mod-h h3 { font-size: 17px; font-weight: 500; }
.st { font-size: 12.5px; white-space: nowrap; color: var(--steel); display: inline-flex; align-items: center; gap: 6px; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--steel-2); }
.st.live { color: var(--teal); } .st.live::before { background: var(--teal); border-color: var(--teal); }
.st.next::before { background: var(--steel-2); }
.st.bc { color: var(--bc); } .st.bc::before { background: var(--bc); border-color: var(--bc); }
.mod p { font-size: 14.5px; color: var(--graphite); margin: 6px 0 0; }
.mod .rep { font-size: 13.5px; color: var(--steel); }
.mod.s-later h3, .mod.s-later p { color: var(--steel); }

/* ---------- pricing ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding-top: 48px; padding-bottom: 96px; }
.users { padding-bottom: 28px; }
.users label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.users-in { display: flex; gap: 24px; align-items: center; }
.users-in input[type="number"] { width: 140px; font: inherit; font-size: 40px; font-weight: 300; letter-spacing: -0.02em; padding: 4px 12px; border: 1px solid var(--hair-2); border-radius: 2px; color: var(--ink); background: #fff; }
.users-in input[type="range"] { flex: 1; accent-color: var(--ink); }
.users .hint { font-size: 14px; color: var(--steel); margin: 10px 0 0; }
.sheet { border-top: 1px solid var(--ink); overflow-x: auto; }
.lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.lines caption { text-align: left; padding: 14px 0; font-size: 13.5px; color: var(--steel); border-bottom: 1px solid var(--hair-2); }
.lines th { text-align: left; font-size: 13px; font-weight: 400; color: var(--steel); padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
.lines td { padding: 14px 10px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.lines .n { text-align: right; white-space: nowrap; }
.lines .inc { width: 32px; }
.lines input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ink); margin-top: 2px; }
.lines input[type="number"], .lines input.nm { width: 84px; padding: 6px 8px; border: 1px solid var(--hair-2); border-radius: 2px; background: #fff; text-align: right; font: inherit; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.lines input.nm { width: 100%; max-width: 260px; text-align: left; }
.lines input:focus { outline: 2px solid var(--teal-2); outline-offset: -1px; border-color: transparent; }
.lines b { font-weight: 500; }
.lines .ex { display: block; font-size: 13.5px; color: var(--steel); }
.lines .est { font-style: normal; font-size: 12px; color: var(--steel); border: 1px solid var(--hair-2); padding: 1px 6px; margin-left: 4px; }
.lines .cg { display: block; font-size: 13px; color: var(--teal); margin-top: 3px; }
.lines .cg.roadmap { color: var(--steel-2); }
.lines .na { font-size: 13px; color: var(--steel-2); }
.lines .y { font-weight: 500; padding-top: 18px; }
.lines tr.off td:not(.inc) { opacity: .4; }
.lines tbody:not(#rows) tr.int td { background: var(--fog); }
.lines tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); font-size: 18px; font-weight: 500; padding-top: 16px; padding-bottom: 16px; }
.lines tfoot .link { font-size: 15px; font-weight: 400; }
.lines .rm { font-size: 13px; margin-top: 4px; display: block; }
.notes { margin-top: 20px; font-size: 14.5px; color: var(--steel); }
.notes summary { cursor: pointer; color: var(--ink); }
.notes p { margin-top: 10px; }
.notes ul { margin: 0; padding-left: 18px; }
.notes a { color: var(--steel); }
.result { position: sticky; top: 88px; background: var(--night); color: var(--night-steel); padding: 26px 28px 28px; font-variant-numeric: tabular-nums; }
.res-line { padding: 14px 0; border-bottom: 1px solid var(--night-hair); display: flex; flex-direction: column; }
.res-line:first-child { padding-top: 0; }
.res-line span { font-size: 13.5px; }
.res-line b { font-size: 30px; line-height: 1.25; font-weight: 300; letter-spacing: -0.02em; color: #fff; }
.res-line em { font-style: normal; font-size: 13.5px; }
.res-line.gone b { text-decoration: line-through; text-decoration-color: #D26A62; text-decoration-thickness: 1.5px; }
.res-diff { margin: 18px 0 14px; padding: 14px 16px; border: 1px solid #2D5960; background: rgba(18, 160, 179, .1); display: flex; flex-direction: column; }
.res-diff span, .res-diff em { font-size: 13.5px; font-style: normal; color: var(--night-ink); }
.res-diff b { font-size: 24px; font-weight: 400; color: #fff; letter-spacing: -0.01em; }
.res-note { font-size: 13px; }
.quote { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.quote h2 { margin-bottom: 18px; }
.quote > div p { color: var(--graphite); }
.quote form { background: #fff; border: 1px solid var(--hair-2); padding: 32px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.f label { font-size: 14.5px; font-weight: 500; }
.f .opt { font-weight: 400; color: var(--steel-2); }
.f input, .f select, .f textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 2px; background: #fff; color: var(--ink); min-height: 46px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--teal-2); outline-offset: -1px; border-color: transparent; }
.hp { position: absolute; left: -9999px; }
.f-note { font-size: 13.5px; color: var(--steel); }
.f-err { color: var(--red); font-size: 14.5px; margin-bottom: 12px; }
.f-err:empty { display: none; }
.sent { background: #fff; border: 1px solid var(--hair-2); border-top: 2px solid var(--teal); padding: 32px; }
.sent h3 { font-size: 26px; font-weight: 300; margin-bottom: 10px; }

/* ---------- small screens ---------- */
@media (max-width: 1080px) {
  .hero-in, .two-col, .head-row, .pane, .econ, .quote, .doc-sec, .area { grid-template-columns: 1fr; gap: 40px; }
  .og { grid-template-columns: 1fr; gap: 8px; }
  .og-g { margin: 0 -10px; }
  .og-panel { min-height: 0; }
  .doc-k, .area-h { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .calc { grid-template-columns: 1fr; }
  .result { position: static; }
  .econ-act { justify-content: flex-start; }
  .foot-in { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .top-in { grid-template-columns: auto auto; gap: 16px; }
  .top nav { display: none; }
  .top-act { justify-content: flex-end; }
  .top-act .signin { display: none; }
  .hero { padding: 48px 0 40px; }
  .sec { padding: 72px 0; }
  .og-svg .gn text, .og-svg.focus .gn:not(.on) text { opacity: 0; }
  .og-svg.focus .gn.on text { opacity: 1; font-size: 30px; }
  .og-svg .gn circle { r: 9; } .og-svg .gn.bc rect { transform-box: fill-box; transform-origin: center; transform: scale(1.4); }
  .og-svg .ring-l { font-size: 30px; } .og-svg .ring-l.sub { display: none; }
  .layers, .shots-2, .steps { grid-template-columns: 1fr; }
  .layer-c, .layer-c + .layer-c { padding: 28px 0 8px; border-left: 0; }
  .layer-c + .layer-c { border-top: 1px solid var(--hair-2); }
  .steps li, .steps li + li { padding: 24px 0 0; border-left: 0; }
  .frag-r { grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); font-size: 13.5px; }
  .frag-h { font-size: 11.5px; }
  .frag-h > span { padding: 10px 2px; }
  .questions li { grid-template-columns: 1fr; }
  .path { justify-content: flex-start; }
  .stack li { grid-template-columns: 1fr; gap: 4px; }
  .phones { padding: 24px 12px; gap: 16px; }
  .two { grid-template-columns: 1fr; }
  .mods { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-legal { flex-direction: column; }
  .foot-legal span:last-child { text-align: left; }
  .tbl { font-size: 13.5px; }
  .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none; }
  /* the calculator's stack becomes a list of lines */
  .lines thead { display: none; }
  .lines tr { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px 10px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .lines td { border: 0; padding: 0 !important; }
  .lines td:nth-child(2) { grid-column: 2 / -1; }
  .lines td.n { text-align: left; }
  .lines #rows td.n:nth-child(3)::before { content: "Seats"; display: block; font-size: 12px; color: var(--steel); }
  .lines #rows td.n:nth-child(4)::before { content: "Per seat / month"; display: block; font-size: 12px; color: var(--steel); }
  .lines #rows td.n:nth-child(5)::before { content: "Fee / year"; display: block; font-size: 12px; color: var(--steel); }
  .lines #rows td.n:nth-child(3) { grid-column: 2; }
  .lines #rows td.n:nth-child(4) { grid-column: 3; }
  .lines #rows td.n:nth-child(5) { grid-column: 2; }
  .lines td.y { grid-column: 3; align-self: end; text-align: right !important; }
  .lines input[type="number"] { width: 100%; text-align: left; }
  .lines tfoot tr { grid-template-columns: 28px 1fr auto; }
  .lines tfoot td[colspan] { grid-column: 2; }
  .lines tbody:not(#rows) tr { grid-template-columns: 28px 1fr 1fr; }
  .lines tbody:not(#rows) td:nth-child(3), .lines tbody:not(#rows) td:nth-child(4) { display: none; }
  .lines tbody:not(#rows) td:nth-child(5) { grid-column: 2; }
}

/* =====================================================================================================================
   Home: the story, drawn twice from the same pieces: disconnected (spreadsheets, point solutions, no app), then one hub on one
   ontology, connected to the systems of record, with an improvement loop. site.ts sets --p (0 to 1) from the scroll.
   ===================================================================================================================== */
.h2-hero { padding: 64px 0 72px; border-bottom: 1px solid var(--hair); }
.h2-hero h1 { font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: -0.04em; font-weight: 300; }
.h2-hero .lede { margin-top: 24px; max-width: 58ch; }
.h2-hero h1 { margin-top: 40px; }
.pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pains li { padding: 18px 28px 18px 0; display: flex; flex-direction: column; gap: 6px; }
.pains li + li { padding-left: 28px; border-left: 1px solid var(--hair-2); }
.pains b { font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -0.01em; color: var(--red); }
.pains span { color: var(--graphite); font-size: 16px; }
@media (max-width: 860px) { .pains { grid-template-columns: 1fr; } .pains li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); } }

.story { padding: 96px 0 72px; border-bottom: 1px solid var(--hair); }
.story.fog { background: var(--fog); }
.story h2 { max-width: 22ch; }
.story .c-s { margin: 14px 0 48px; }
.c-s { color: var(--graphite); max-width: 64ch; }
.stage { --m: var(--p); --gone: calc(1 - var(--p)); --fb: calc(1 - var(--p)); --fa: var(--p); --late: var(--p); --later: var(--p); }
.story.fog .stage .st-item.xls, .story.fog .pt .f-b { background: #fff; }
.stage { position: relative; height: 580px; font-size: 13px; line-height: 1.25; }
.stage::before { content: ""; position: absolute; left: 1%; top: 1%; width: 73.5%; height: 36%; background: var(--teal-t); border: 1px solid #B9DDE2; opacity: var(--late); }
.st-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-lines line { vector-effect: non-scaling-stroke; }
.st-lines.before { opacity: var(--gone); }
.st-lines.before line { stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 5; opacity: .55; }
.st-lines.before .brk circle { fill: #fff; stroke: var(--red); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.st-lines.after { opacity: var(--late); }
.st-lines.after line { stroke: var(--teal); stroke-width: 1.25; }

.st-hub-h { position: absolute; left: 2%; top: 2.5%; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; opacity: var(--late); }
.st-hub-h em { font-style: normal; font-weight: 400; color: var(--steel); }

.st-item { position: absolute; width: 13%; height: 9.5%;
  left: calc((var(--x0) + (var(--x1) - var(--x0)) * var(--m)) * 1%);
  top: calc((var(--y0) + (var(--y1) - var(--y0)) * var(--m)) * 1%);
  transform: rotate(calc(var(--r) * (1 - var(--m)) * 1deg)); }
.st-item.xls { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border: 1px solid var(--hair-2); box-shadow: 0 6px 14px -10px rgba(11,16,21,.35); font-size: 12px; color: var(--graphite); white-space: nowrap; overflow: hidden;
  opacity: calc(1 - var(--m)); transform: rotate(calc(var(--r) * (1 - var(--m)) * 1deg)) scale(calc(1 - var(--m) * .7)); }
.st-item .nm { overflow: hidden; text-overflow: ellipsis; }
.st-item .ext { font-family: var(--mono); font-size: 10px; padding: 1px 4px; background: #1D6F42; color: #fff; flex: 0 0 auto; }
.st-item.app > div { position: absolute; inset: 0; display: flex; padding: 0 10px; }
.f-b { flex-direction: column; justify-content: center; opacity: var(--fb); }
.f-b b { font-weight: 500; font-size: 13px; color: var(--ink); }
.f-b span { font-size: 11.5px; color: var(--steel); }
.pt .f-b { background: var(--fog); border: 1px solid var(--hair-2); }
.pt .f-b span::before { content: "$ "; font-family: var(--mono); }
.miss .f-b { background: transparent; border: 1.5px dashed var(--steel-2); }
.miss .f-b span { color: var(--red); }
.f-a { align-items: center; gap: 8px; background: #fff; border: 1px solid var(--teal); font-weight: 500; font-size: 13.5px; color: var(--ink); opacity: var(--fa); }
.f-a i { width: 8px; height: 8px; background: var(--teal); flex: 0 0 auto; }
.st-item.new .f-a { border-style: dashed; color: var(--teal); background: transparent; opacity: var(--later); }

.st-erp { position: absolute; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; background: var(--ink); color: #fff;
  left: calc((var(--x0) + (var(--x1) - var(--x0)) * var(--m)) * 1%); top: calc((var(--y0) + (var(--y1) - var(--y0)) * var(--m)) * 1%);
  width: calc((20 - 4 * var(--m)) * 1%); height: calc((11 - 1.5 * var(--m)) * 1%); }
.st-erp b { font-weight: 500; font-size: 14px; }
.st-erp span { font-size: 11.5px; color: #B7C0CA; }
.st-erp .f-b { opacity: var(--fb); }
.st-erp .f-a { position: absolute; left: 14px; bottom: 8px; opacity: var(--fa); background: none; border: 0; font-weight: 400; padding: 0; display: block; }
.st-erp .f-b { display: block; }
.is-after .st-erp .f-b { display: none; }
.is-after .st-erp .f-a { position: static; }
.st-item.xls { width: 15%; }
.st-sor { position: absolute; left: calc(var(--x) * 1%); top: 76%; width: 16%; height: 9.5%; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--ink); background: #fff; font-size: 13px; opacity: var(--late); }
.st-ont { position: absolute; left: 1%; top: 50%; width: 73.5%; height: 14%; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: var(--ink); color: #fff; opacity: var(--late); }
.st-ont b { font-weight: 500; font-size: 15px; white-space: nowrap; }
.st-ont span { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ont i { font-style: normal; font-size: 12px; padding: 3px 8px; border: 1px solid #3A434E; color: #DDE3E9; white-space: nowrap; }
.st-loop { position: absolute; left: 77%; top: 4%; width: 22%; height: 82%; opacity: var(--later); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.st-loop svg { position: absolute; width: 100%; max-width: 250px; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.st-loop path { fill: none; stroke: var(--teal); stroke-width: 2; }
.lp-t { position: relative; font-weight: 600; font-size: 13.5px; margin: 0 0 6px; max-width: 12ch; }
.st-loop ol { position: relative; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--graphite); counter-reset: lp; }
.st-loop li { counter-increment: lp; text-align: left; }
.st-loop li::before { content: counter(lp) " "; font-family: var(--mono); color: var(--teal); }

/* The same story without motion */
.plain { display: none; }
.pl-fig { border-top: 1px solid var(--ink); padding: 18px 0 40px; }
.pl-k { font-size: 14px; font-weight: 500; color: var(--steel); margin: 0 0 14px; }
.pl-fig.after .pl-k { color: var(--teal); }
.pl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pl-cols h3 { font-size: 16px; margin-bottom: 8px; }
.pl-cols ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.pl-cols li { padding: 6px 0; border-bottom: 1px solid var(--hair); color: var(--graphite); }
.pl-cols li.xls::before { content: "XLSX "; font-family: var(--mono); font-size: 10.5px; color: #1D6F42; }
.pl-cols li.miss { color: var(--red); }
.pl-note { margin-top: 16px; color: var(--steel); font-size: 14.5px; }
.pl-layer { padding: 14px 16px; border: 1px solid var(--hair-2); margin-bottom: 8px; }
.pl-layer h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pl-layer p { margin: 0; font-size: 14.5px; color: var(--graphite); }
.pl-layer.ont { background: var(--ink); border-color: var(--ink); }
.pl-layer.ont h3, .pl-layer.ont p { color: #fff; }
.pl-layer.loop { border-color: var(--teal); background: var(--teal-t); }
@media (max-width: 980px) {
  .stage { display: none; }
  .plain { display: block; }
}
@media (max-width: 720px) { .pl-cols { grid-template-columns: 1fr; } }

.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.three p { color: var(--graphite); }
h3.big { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 18px; }
@media (max-width: 860px) { .three { grid-template-columns: 1fr; gap: 40px; } }
.close-band { background: var(--night); color: var(--night-ink); padding: 120px 0; }
.close-band h2 { color: #fff; font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: -0.04em; }
.close-brand { display: flex; align-items: center; gap: 12px; margin: 28px 0 36px; font-size: 22px; font-weight: 500; color: #fff; }
.close-brand .mark { color: #fff; }
.btn.line-light { background: transparent; color: #fff; border-color: #4A5561; }
.btn.line-light:hover { border-color: #fff; background: transparent; }

/* Home: what it really costs */
.cost { padding: 96px 0; border-bottom: 1px solid var(--hair); }
.cost h2 { max-width: 24ch; }
.cost-bar { display: flex; height: 72px; margin: 48px 0 8px; }
.cb { display: flex; align-items: flex-end; padding: 10px 14px; font-size: 15px; font-weight: 500; }
.cb.sw { flex: 0 0 28%; background: #F1DCDA; color: var(--ink); }
.cb.sv { flex: 1 1 auto; background: var(--red); color: #fff; }
.cost-note { font-size: 12.5px; color: var(--steel-2); margin: 0 0 28px; }
.cost-cols { display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 0; }
.cost-cols > div { padding-right: 32px; }
.cost-cols > div + div { padding-left: 14px; }
.cost-cols h3 { margin-bottom: 8px; }
.cost-cols p { color: var(--graphite); font-size: 16px; }
.after-all { margin-top: 56px; border-top: 1px solid var(--ink); padding-top: 18px; }
.after-all ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.after-all li { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; font-weight: 300; letter-spacing: -0.01em; color: var(--ink); }
.era { margin: 72px 0 0; font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: -0.04em; font-weight: 300; color: var(--ink); max-width: none; }
@media (max-width: 860px) {
  .cost-cols { grid-template-columns: 1fr; }
  .cost-cols > div + div { padding-left: 0; margin-top: 16px; }
  .after-all ul { grid-template-columns: 1fr; gap: 14px; }
}

/* Home: what you get */

/* =====================================================================================================================
   v2: the product-led site. Condensed Plex for headlines (a spec sheet, not a template), slate for the bands where the
   product sits, and the real screenshots in a quiet window frame. One bold thing: the product itself.
   ===================================================================================================================== */
:root {
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", sans-serif;
  --slate: #13212A; --slate-2: #1A2C36; --slate-hair: #2B3F4A; --slate-ink: #E4EAED; --slate-steel: #93A3AC;
  --night: var(--slate); --night-2: var(--slate-2); --night-hair: var(--slate-hair); --night-ink: var(--slate-ink); --night-steel: var(--slate-steel);
  --fog: #F1F4F5; --hair: #E0E5E8; --hair-2: #CBD3D7;
  --amber: #B7791F;
}
h1, h2, h3.big, .huge, .facts dd, .close-band h2, .pane-text h3, .feat-t h3 { font-family: var(--cond); }
h1 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; }
h2 { font-weight: 500; letter-spacing: -0.01em; }
h3.big { font-weight: 500; letter-spacing: -0.01em; }
.more { color: var(--teal); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.more:hover { color: var(--ink); }
.muted.small, .small { font-size: 14.5px; }
body.menu-open { overflow: hidden; }

/* ---------- header and product menu ---------- */
.top { background: rgba(255, 255, 255, .96); }
.top-in { grid-template-columns: auto 1fr auto; }
.mainnav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.mainnav a { text-decoration: none; color: var(--steel); padding: 4px 0; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--ink); }
.mainnav a[aria-current="page"], .nav-p[data-current] { box-shadow: 0 1px 0 var(--ink); }
.nav-p { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 15px; color: var(--steel); cursor: pointer; }
.nav-p:hover, .nav-p[aria-expanded="true"], .nav-p[data-current] { color: var(--ink); }
.nav-p svg { transition: transform .15s; }
.nav-p[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-m { display: none; background: none; border: 0; padding: 6px; margin-right: -6px; color: var(--ink); cursor: pointer; }
.mm { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--hair-2); box-shadow: 0 30px 50px -30px rgba(19, 33, 42, .35); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility 0s .14s; }
.mm.open { visibility: visible; opacity: 1; transform: none; transition: opacity .14s, transform .14s; }
.mm-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 40px; padding-top: 32px; padding-bottom: 36px; }
.mm-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.mm-plat { padding-left: 36px; border-left: 1px solid var(--hair); }
.mm-h { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.mm-h span { font-weight: 400; color: var(--steel); font-size: 13px; }
.mm-col a { display: block; padding: 8px 0; text-decoration: none; }
.mm-col a b { display: block; font-weight: 500; font-size: 14.5px; color: var(--ink); }
.mm-col a span { display: block; font-size: 13px; line-height: 1.4; color: var(--steel); }
.mm-col a:hover b { color: var(--teal); }
.mnav { border-top: 1px solid var(--hair); background: #fff; max-height: calc(100vh - 64px); overflow-y: auto; padding: 8px 0 32px; }
.mnav a { display: block; padding: 10px 0; text-decoration: none; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--hair); }
.mnav .mm-h { margin-top: 24px; border-bottom-color: var(--ink); }

/* ---------- window-framed screenshots ---------- */
.win { margin: 0; border: 1px solid var(--hair-2); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(19, 33, 42, .06), 0 32px 64px -32px rgba(19, 33, 42, .38); }
.win-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F6F8F9; border-bottom: 1px solid var(--hair); }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DCE0; }
.win-bar span { flex: 1; text-align: center; margin-right: 39px; font-size: 11.5px; color: var(--steel-2); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win img { display: block; width: 100%; height: auto; }
.win-cap { font-size: 14px; color: var(--steel); margin-top: 14px; }
.phone { margin: 0 auto; width: min(300px, 78%); border: 9px solid var(--slate); border-radius: 34px; overflow: hidden; background: var(--slate); box-shadow: 0 32px 64px -28px rgba(19, 33, 42, .5); }
.phone img { display: block; width: 100%; height: auto; border-radius: 25px; }

/* ---------- home hero ---------- */
.hero-d { background: var(--slate); color: var(--slate-ink); padding: 104px 0 88px; }
.hero-d:has(.hero-shot) { background: linear-gradient(var(--slate) 0, var(--slate) calc(100% - 22vw), #fff calc(100% - 22vw)); padding-bottom: 0; }
.hero-d:not(:has(.hero-shot)) .hero-t { margin-bottom: 0; }
.hero-t { max-width: 900px; margin-bottom: 64px; }
.hero-d h1 { color: #fff; font-size: clamp(46px, 6.4vw, 92px); max-width: 15ch; }
.hero-d .lede { color: var(--slate-steel); margin-top: 26px; max-width: 60ch; font-size: clamp(18px, 1.5vw, 21px); }
.hero-shot { border-color: var(--slate-hair); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .55); }
.facts-band { padding: 64px 0 72px; border-bottom: 1px solid var(--hair); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.facts div { display: flex; flex-direction: column; padding: 18px 24px 0 0; }
.facts div + div { padding-left: 24px; border-left: 1px solid var(--hair-2); }
.facts dd { order: 0; margin: 0; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; font-weight: 500; color: var(--ink); }
.facts dt { order: 1; margin-top: 8px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.facts span { order: 2; font-size: 14px; color: var(--steel); margin-top: 2px; }
.h2-hero { padding: 96px 0 96px; }
.h2-hero .huge { margin-top: 48px; font-size: clamp(44px, 6vw, 88px); line-height: 1; font-weight: 500; }

/* ---------- tour ---------- */
.tour-sec .pane { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.pane-text h3 { font-size: 30px; font-weight: 500; line-height: 1.1; }
.pane-for { font-size: 14.5px; color: var(--steel) !important; }
.tablist button { font-size: 15px; margin-right: 26px; }

/* ---------- write-back table, dark sections ---------- */
.tbl caption { text-align: left; font-size: 13.5px; color: var(--steel); padding-bottom: 12px; }
.tbl.wb td:first-child { width: 36%; }
.sec.dark .tbl, .dark-tbl { border-top-color: var(--slate-ink); }
.dark-tbl th { color: var(--slate-steel); border-bottom-color: var(--slate-hair); }
.dark-tbl td { color: var(--slate-ink); border-bottom-color: var(--slate-hair); }
.dark-tbl code { color: #7FD3DE; }
.sec.dark .more { color: #7FD3DE; }
.sec.dark .ticks li { color: var(--slate-ink); }
.transcript { margin: 0; }
.sec:not(.dark) .transcript { background: var(--slate); border-color: var(--slate); color: var(--slate-ink); }
.sec:not(.dark) .transcript .t-q { color: #fff; }
.sec:not(.dark) .t-call, .sec:not(.dark) .t-a { border-color: var(--slate-hair); color: var(--slate-steel); }
.sec:not(.dark) .t-a { color: var(--slate-ink); }
.sec:not(.dark) .t-act { border-color: #3B4E59; color: var(--slate-steel); }

/* ---------- closing band ---------- */
.close-band { padding: 104px 0; }
.close-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.close-band h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; font-weight: 500; margin-bottom: 22px; }
.close-band p { color: var(--slate-steel); margin: 0; }
.close-band .ctas { justify-content: flex-end; margin: 0; }

/* ---------- product pages ---------- */
.p-head { padding: 80px 0 0; background: linear-gradient(#fff 0, #fff calc(100% - 160px), var(--fog) calc(100% - 160px)); }
.p-head:not(:has(.win)) { padding-bottom: 64px; background: #fff; border-bottom: 1px solid var(--hair); }
.p-head h1 { font-size: clamp(42px, 5.4vw, 76px); max-width: 18ch; }
.p-head .lede { margin-top: 24px; max-width: 64ch; }
.p-shot { margin-top: 64px; }
.crumb { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--steel); margin: 0 0 22px; }
.crumb a { color: var(--steel); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.dark-head { background: var(--slate); border-bottom: 0; padding-bottom: 88px !important; }
.dark-head h1 { color: #fff; }
.dark-head .lede { color: var(--slate-steel); }
.dark-head .crumb, .dark-head .crumb a { color: var(--slate-steel); }
.rep-band { background: var(--fog); padding: 48px 0 56px; border-bottom: 1px solid var(--hair); }
.rep-band .wrap { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: baseline; }
.rep-k { margin: 0; font-size: 14px; font-weight: 600; }
.rep-band ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.rep-band li { font-size: 14.5px; color: var(--graphite); padding: 5px 12px; border: 1px solid var(--hair-2); background: #fff; text-decoration: line-through; text-decoration-color: rgba(180, 64, 58, .55); }
.feats { padding-bottom: 16px; }
.feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; padding: 88px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.feat:last-child { border-bottom: 0; }
.feat.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.feat.flip .feat-t { order: 2; }
.feat.nomedia { grid-template-columns: minmax(0, 1fr); }
.feat.nomedia .feat-t { max-width: 720px; }
.feat-t h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; line-height: 1.08; margin-bottom: 16px; letter-spacing: -0.01em; }
.feat-t p { color: var(--graphite); }
.feat:has(.phone-m) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.phone-m { background: var(--fog); padding: 48px 24px; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; font-size: 15.5px; }
.ticks li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--hair); color: var(--graphite); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--teal); }
.ticks.bc li::before { background: var(--bc); }
.soon { display: inline-block; margin: 0 0 12px; font-size: 12.5px; font-weight: 500; color: var(--amber); border: 1px solid rgba(183, 121, 31, .45); padding: 2px 8px; }
.who { font-size: 14px; font-weight: 600; color: var(--teal); margin: 0 0 10px; }
.also { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.sec.tight { padding: 72px 0; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.card { border-top: 1px solid var(--ink); padding-top: 20px; }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--graphite); font-size: 15.5px; }
.bc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bc-cols h3 { font-size: 16px; margin-bottom: 4px; }
.next-band { border-top: 1px solid var(--hair); }
.next-band a { display: grid; grid-template-columns: 120px 1fr; gap: 4px 24px; padding: 48px 0; text-decoration: none; }
.next-band span { grid-row: span 2; font-size: 14px; color: var(--steel); padding-top: 10px; }
.next-band b { font-family: var(--cond); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; color: var(--ink); }
.next-band em { font-style: normal; color: var(--steel); }
.next-band a:hover b { color: var(--teal); }
.og-sec { padding: 24px 0 8px; border-bottom: 1px solid var(--hair); }
.og-sec .og { border-top: 0; margin-top: 0; }
.contact-sec { padding-top: 88px; }
.contact-h { font-size: clamp(44px, 5vw, 72px); margin-bottom: 20px; }
.contact-sec .ticks { margin-bottom: 24px; }

/* ---------- small screens ---------- */
@media (max-width: 1080px) {
  .mainnav { gap: 22px; }
  .mm-in { grid-template-columns: 1fr; }
  .mm-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-plat { padding-left: 0; border-left: 0; }
  .feat, .feat.flip, .feat:has(.phone-m) { grid-template-columns: 1fr; gap: 36px; padding: 64px 0; }
  .feat.flip .feat-t { order: 0; }
  .close-in { grid-template-columns: 1fr; gap: 28px; }
  .close-band .ctas { justify-content: flex-start; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3) { margin-top: 20px; border-top: 1px solid var(--hair-2); }
  .tour-sec .pane { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .mainnav, .top-act .signin { display: none; }
  .nav-m { display: inline-flex; }
  .mm { display: none; }
  .top-in { grid-template-columns: auto auto; }
  .top-act { gap: 14px; }
  .cards3, .bc-cols { grid-template-columns: 1fr; gap: 28px; }
  .rep-band .wrap { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .hero-d { padding-top: 56px; }
  .hero-d:has(.hero-shot) { background: linear-gradient(var(--slate) 0, var(--slate) calc(100% - 90px), #fff calc(100% - 90px)); }
  .hero-t { margin-bottom: 40px; }
  .facts div { padding-right: 12px; }
  .facts div + div { padding-left: 14px; }
  .facts div:nth-child(3) { padding-left: 0; }
  .h2-hero { padding: 64px 0; }
  .p-head { padding-top: 48px; background: linear-gradient(#fff 0, #fff calc(100% - 70px), var(--fog) calc(100% - 70px)); }
  .p-shot { margin-top: 40px; }
  .win-bar { height: 22px; }
  .win-bar span { display: none; }
  .next-band a { grid-template-columns: 1fr; }
  .next-band span { grid-row: auto; padding: 0; }
  .top-act .btn.small { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .mm, .nav-p svg { transition: none; } }

/* footer with every area */
.foot-in { grid-template-columns: minmax(0, 1.7fr) repeat(6, minmax(0, 1fr)); gap: 32px; }
.foot-col a { font-size: 14px; line-height: 1.35; }
.foot-cta { margin-top: 20px; }
@media (max-width: 1080px) { .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 720px) { .foot-in { grid-template-columns: 1fr 1fr; } }
.mm-areas .mm-h { min-height: 64px; justify-content: flex-start; }

.era { font-family: var(--cond); font-weight: 500; letter-spacing: -0.015em; }
.cost h2 { font-weight: 500; }
.p-head.dark-head { background: var(--slate); border-bottom: 0; }
.sec.dark .econ p, .sec.dark .head-row p { color: var(--slate-steel); }
.sec.dark .btn.light, .close-band .btn.light { color: var(--ink); }
.sec.dark .btn.light:hover { color: var(--ink); }
.st.simple { color: var(--graphite); } .st.simple::before { border-radius: 1px; border-color: var(--teal); background: var(--teal-t); }
.mod.s-simple .rep { color: var(--steel-2); }
.questions p .st { margin-left: 8px; vertical-align: 2px; }

/* the hero, compact enough that the figure starts on the first screen */
.hero-d:has(.hx) { padding-top: 72px; }
.hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; max-width: none !important; margin-bottom: 44px !important; }
.hero-split h1 { font-size: clamp(36px, 4.1vw, 60px); max-width: 18ch; line-height: 1.03; text-wrap: balance; }
.hero-split h1 span { display: block; color: var(--slate-steel); }
/* The home hero: the name big, the reason under it as a strong second line. */
.hero-split h1 span.h1-sub { margin-top: .32em; font-size: .56em; line-height: 1.12; max-width: 24ch; }
.hero-split .lede { margin-top: 0; font-size: 17.5px; }
.hero-split .ctas { margin-top: 22px; }
.hero-k { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #7FD3DE; }
.hero-proof { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 13.5px; line-height: 1.4; color: var(--slate-steel); }
.hero-proof span { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--slate-hair); white-space: nowrap; }
.hero-proof span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-proof b { color: #fff; font-weight: 500; }
@media (max-width: 980px) { .hero-split { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- the rest of the home page: one job per section ---------- */
.hp-h { max-width: 21ch; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; }
.hp-h + .lede { margin-top: 22px; }
.hp-more { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hp-note { margin: 36px 0 0; max-width: 62ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); font-weight: 500; }
.hp-shot { margin-top: 48px; }
/* design, build, analyze, improve: four steps on one rule */
/* the module list: every department and its live applications */
.hp-depts { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.hp-depts li { padding: 16px 20px 18px; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.hp-depts li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.hp-depts b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hp-depts b svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hp-depts b em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--steel); }
.hp-depts li > span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--steel); }
/* one record across departments */
.hp-thread { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; align-items: start; }
.hp-thread h3 { font-family: var(--cond); font-size: 24px; font-weight: 500; line-height: 1.15; }
.hp-thread ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: th; border-top: 2px solid var(--teal); }
.hp-thread li { counter-increment: th; position: relative; padding: 22px 16px 0 0; }
.hp-thread li::before { content: counter(th); position: absolute; left: 0; top: -12px; width: 22px; height: 22px; display: grid; place-items: center; background: #fff; border: 2px solid var(--teal); font-family: var(--mono); font-size: 11px; color: var(--teal); }
.hp-thread em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.hp-thread span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--graphite); }
/* three columns under a rule */
.hp-cols, .hp-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.hp-cols li, .hp-steps li { padding: 22px 32px 0 0; }
.hp-cols li + li, .hp-steps li + li { padding-left: 32px; border-left: 1px solid var(--hair-2); }
.hp-cols b, .hp-steps b { display: block; font-family: var(--cond); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.15; color: var(--ink); }
.hp-cols p, .hp-steps p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 36ch; }
.hp-steps em { display: block; margin-bottom: 8px; font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.sec.dark .kicker { color: #7FD3DE; }
.sec.dark .lede { color: var(--slate-steel); }
.sec.dark .hp-h { color: #fff; }
.sec.dark .hp-cols { border-top-color: var(--slate-ink); }
.sec.dark .hp-cols li + li { border-left-color: var(--slate-hair); }
.sec.dark .hp-cols b { color: #fff; }
.sec.dark .hp-cols p { color: var(--slate-steel); }
@media (max-width: 980px) {
  .hp-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-depts li:nth-child(4n+1) { padding-left: 20px; border-left: 1px solid var(--hair); }
  .hp-depts li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .hp-thread { grid-template-columns: 1fr; gap: 8px; }
  .hp-thread ol { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--teal); margin: 20px 0 0 11px; }
  .hp-thread li { padding: 0 0 18px 26px; }
  .hp-thread li::before { left: -12px; top: -2px; }
  .hp-cols, .hp-steps { grid-template-columns: 1fr; }
  .hp-cols li + li, .hp-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair-2); margin-top: 22px; }
  .sec.dark .hp-cols li + li { border-top-color: var(--slate-hair); }
}
@media (max-width: 560px) {
  .hero-proof { display: grid; gap: 4px; }
  .hero-proof span { border-right: 0; margin-right: 0; padding-right: 0; }
  .hp-depts { grid-template-columns: 1fr; }
  .hp-depts li, .hp-depts li:nth-child(4n+1) { padding: 14px 0; border-left: 0; }
  .hero-proof { font-size: 13px; }
}

/* ---------- the rest of the home page on phones ---------- */
@media (max-width: 560px) {
  .facts dd { font-size: 40px; }
  .facts dt { font-size: 14px; }
  .facts span { display: none; }
  .facts div { padding-top: 14px; padding-bottom: 6px; }
  .tablist { flex-wrap: wrap; gap: 6px; border-bottom: 0; padding: 14px 0 4px; overflow: visible; }
  .tablist button { margin: 0; padding: 7px 12px; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 13.5px; }
  .tablist button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .tour-sec .pane { padding-top: 24px; }
  .head-row { gap: 16px; margin-bottom: 28px; }
}

/* =====================================================================================================================
   Implementation Factory (factory.ts): the seven steps as a loop on one company database, the AI and people split, the
   rules, and the home page band. Same rules, hairlines and condensed headings as the rest of the site.
   ===================================================================================================================== */
.fx-status { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 15px; color: var(--graphite); }
.fx-status li { display: flex; align-items: center; gap: 10px; }
.fx-status .st { min-width: 64px; }
/* the seven steps */
.fx-fig { margin: 0; }
.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.fx-steps li { position: relative; padding: 20px 16px 24px 0; display: flex; flex-direction: column; }
.fx-steps li + li { padding-left: 16px; border-left: 1px solid var(--hair-2); }
.fx-steps li + li::before { content: ""; position: absolute; left: -4px; top: -6px; border: 5.5px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.fx-n { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--teal); }
.fx-steps h3 { font-family: var(--cond); font-size: clamp(21px, 1.8vw, 25px); font-weight: 500; line-height: 1.1; margin: 8px 0 10px; }
.fx-steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--graphite); }
.fx-steps .fx-gate { margin-top: auto; padding: 8px 10px; font-size: 13px; line-height: 1.4; color: var(--ink); background: #fff; border-left: 2px solid var(--teal); }
.fx-steps p + .fx-gate { margin-top: 14px; }
.fx-back { position: relative; height: 32px; max-width: none; margin: 0 calc(100% / 14) 0 6px; border: 1.5px solid var(--teal); border-top: 0; }
.fx-back::before { content: ""; position: absolute; left: -6.5px; top: -9px; border: 5.5px solid transparent; border-bottom: 9px solid var(--teal); border-top: 0; }
.fx-back span { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 0 14px; background: var(--fog); font-size: 14px; font-weight: 500; color: var(--teal); white-space: nowrap; }
.fx-db { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 20px; background: var(--slate); }
.fx-db p { margin: 0; font-size: 15px; color: var(--slate-steel); }
.fx-db p b { font-weight: 500; color: #fff; }
.fx-db ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-db li { font-size: 13px; line-height: 1.4; padding: 3px 10px; border: 1px solid #3A4E59; color: var(--slate-ink); }
/* AI prepares, people decide */
.fx-roles { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair-2); border-radius: 6px; overflow: hidden; }
.fx-roles > div { padding: 28px 32px 32px; }
.fx-roles .ai { background: var(--fog); }
.fx-roles .people { background: var(--slate); }
.fx-roles .t { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); }
.fx-roles .people .t { color: #3FC1D2; }
.fx-roles h3 { margin: 8px 0 0; font-family: var(--cond); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 500; }
.fx-roles .people h3 { color: #fff; }
.fx-roles ul { list-style: none; margin: 18px 0 0; padding: 0; }
.fx-roles li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--hair-2); font-size: 15.5px; color: var(--graphite); }
.fx-roles .people li { border-top-color: var(--slate-hair); color: #C3D0D7; }
.fx-roles li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--teal); }
.fx-roles .people li::before { background: #3FC1D2; }
.fx-rules { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fx-rules li { padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair-2); font-family: var(--cond); font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; line-height: 1.25; color: var(--ink); }
/* project types */
.card .mod-h { margin-bottom: 10px; }
.card .mod-h h3 { margin: 0; }
.fx-chain { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
.fx-chain h3 { font-family: var(--cond); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.15; }
.fx-chain ul { list-style: none; margin: 0; padding: 0; }
.fx-chain li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--hair-2); font-size: 15.5px; color: var(--graphite); }
.fx-chain li:first-child { padding-top: 4px; }
/* safe by design */
.fx-safe li { grid-template-columns: 260px minmax(0, 1fr); }
.fx-safe > li > b { font-family: var(--cond); font-size: 21px; line-height: 1.2; }
.fx-safe p { margin: 0; color: var(--graphite); }
.fx-appr { margin-top: 16px; }
.fx-appr td:first-child { width: 42%; }
/* the example */
.fx-nums { margin: 0 0 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.fx-nums div { display: flex; flex-direction: column; padding: 14px 20px 0 0; }
.fx-nums div + div { padding-left: 20px; border-left: 1px solid var(--hair-2); }
.fx-nums dt { order: 1; margin-top: 6px; font-size: 14px; color: var(--steel); }
.fx-nums dd { order: 0; margin: 0; font-family: var(--cond); font-size: clamp(34px, 3.6vw, 48px); line-height: 1; font-weight: 500; color: var(--ink); }
.fx-ex td:first-child { width: 150px; white-space: nowrap; }
.fx-ex .fx-n { margin-right: 4px; }
.fx-ex td b { font-weight: 500; }
/* the home page band */
.fx-home-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: end; }
.fx-home h2 { max-width: 20ch; }
.fx-home-in p { color: var(--graphite); }
.fx-home-in .fx-home-a { margin: 0; }
@media (max-width: 1100px) {
  .fx-steps { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--ink); margin-left: 5px; }
  .fx-steps li, .fx-steps li + li { padding: 0 0 26px 24px; border-left: 0; }
  .fx-steps li + li::before { left: -6px; top: -11px; border: 5.5px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0; }
  .fx-steps h3 { margin: 2px 0 6px; }
  .fx-steps p { max-width: 56ch; }
  .fx-steps .fx-gate { align-self: flex-start; }
  .fx-back { height: auto; margin: 0 0 0 5px; padding: 4px 0 4px 22px; border: 0; border-left: 1.5px dashed var(--teal); }
  .fx-back::before { content: none; }
  .fx-back span { position: static; transform: none; padding: 0; background: none; white-space: normal; }
  .fx-back span::before { content: "\2191\00a0"; }
  .fx-db { margin-top: 28px; }
  .fx-chain { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 1080px) { .fx-home-in { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 860px) {
  .fx-roles, .fx-rules { grid-template-columns: 1fr; }
  .fx-roles > div { padding: 24px 22px 26px; }
  .fx-rules li + li { border-top: 0; }
  .fx-safe li { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .fx-nums { grid-template-columns: 1fr 1fr; }
  .fx-nums div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
  .fx-ex td:first-child { width: auto; padding-right: 14px; }
  .fx-chain li { flex-direction: column; gap: 4px; }
  .fx-status { flex-direction: column; gap: 8px; }
}

/* Process maps: the working demo in a window frame (the app's editor, built from src/demo). */
#demo { scroll-margin-top: 88px; }
.pm-demo iframe { display: block; width: 100%; height: min(820px, 86vh); border: 0; background: #F5F5F5; }
@media (max-width: 720px) { .pm-demo iframe { height: 80vh; height: 80svh; } }

/* =====================================================================================================================
   Home hero (hero.ts, hero-client.ts): one canvas pinned while you scroll its track. --p is the scroll progress, 0 to
   1. The canvas draws the story; the page draws the words around it: the beat on screen, the count, the timeline and
   a key to what the marks mean.
   ===================================================================================================================== */
.hero-d:has(.hx) { background: #091217; padding-bottom: 0; overflow-x: clip; }
.hx-track { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.hx { --p: 0; --top: 65px; position: sticky; top: var(--top); margin: 0; height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); overflow: hidden; background: #091217; color: var(--slate-ink); }
.hx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 4% 100%, rgba(9, 18, 23, .97) 42%, rgba(9, 18, 23, .78) 64%, rgba(9, 18, 23, 0) 100%); }
.hx-bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: 16px 0 22px; background: linear-gradient(#091217 58%, rgba(9, 18, 23, 0)); }
.hx-bar-in { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hx-nav { display: flex; align-items: center; gap: 12px; }
.hx-nav button { font: inherit; font-size: 14px; font-weight: 500; color: var(--slate-steel); background: none; border: 0; padding: 6px 0; cursor: pointer; white-space: nowrap; transition: color .2s; }
.hx-nav button:hover, .hx-nav button[aria-pressed="true"] { color: #fff; }
.hx-prog { position: relative; width: 72px; height: 1px; background: #24343D; }
.hx-prog i { position: absolute; left: 0; top: -.5px; height: 2px; width: calc(clamp(0, var(--p) / .47, 1) * 100%); background: #A092FF; }
.hx-prog + button + .hx-prog i { width: calc(clamp(0, (var(--p) - .47) / .53, 1) * 100%); background: #3FC1D2; }
.hx-count { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--slate-steel); white-space: nowrap; }
.hx-count b { font-family: var(--cond); font-size: 30px; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; transition: color .3s; }
.hx.one .hx-count b { color: #3FC1D2; }
.hx-copy { position: absolute; z-index: 2; left: max(32px, calc((100vw - var(--wrap)) / 2 + 32px)); bottom: clamp(32px, 6vh, 64px); width: min(460px, 38vw); height: 0; pointer-events: none; }
.hx-s { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; will-change: opacity, transform; }
.hx-s[data-i="0"] { opacity: 1; }
.hx-h { margin: 0; max-width: 10ch; font-family: var(--cond); font-weight: 600; font-size: clamp(40px, 4.7vw, 78px); line-height: .98; letter-spacing: -0.022em; color: #fff; text-wrap: balance; }
.hx-sub { margin: 20px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.55; font-weight: 300; color: #A9B6BE; }
.hx-key { position: absolute; z-index: 3; right: max(32px, calc((100vw - var(--wrap)) / 2 + 32px)); top: 64px; width: 470px; height: 22px; margin: 0; font-size: 12.5px; color: var(--slate-steel); pointer-events: none; }
.hx-key p { position: absolute; right: 0; top: 0; padding: 3px 0 3px 10px; background: rgba(9, 18, 23, .85); margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.hx[data-k="0"] .k0, .hx[data-k="1"] .k1, .hx[data-k="2"] .k2 { opacity: 1; }
.hx-key i { display: inline-block; flex: 0 0 auto; margin-left: 12px; }
.hx-key i:first-child { margin-left: 0; }
.hx-key .sq { width: 7px; height: 7px; background: #E6EBEE; }
.hx-key .sq.o { background: none; border: 1px solid #E6EBEE; }
.hx-key .sq.o.v { border-color: #A092FF; }
.hx-key .sq.b { background: #5CA3F5; } .hx-key .sq.t { background: #3FC1D2; }
.hx-key .ci { width: 7px; height: 7px; border: 1px solid #E6EBEE; border-radius: 50%; }
.hx-key .ln { width: 16px; height: 0; border-top: 1.5px solid #E85C50; }
.hx-key .ln.d { border-top: 1px dashed #A092FF; }
.hx-key .dm { width: 7px; height: 7px; background: #A092FF; transform: rotate(45deg); }
@media (max-width: 980px) {
  .hx-copy { width: min(460px, 52vw); }
  .hx-key { display: none; }
}
@media (max-width: 720px) {
  .hx-bar { padding: 10px 0 18px; }
  .hx-bar-in { padding: 0 16px; gap: 12px; }
  .hx-nav { gap: 6px; }
  .hx-nav button { font-size: 12.5px; }
  .hx-prog { width: 16px; }
  .hx-count { font-size: 11.5px; gap: 5px; }
  .hx-count b { font-size: 22px; }
  .hx-copy { left: 20px; right: 20px; width: auto; bottom: 28px; }
  .hx-h { font-size: clamp(32px, 9vw, 40px); max-width: 14ch; }
  .hx-sub { margin-top: 12px; font-size: 15px; line-height: 1.5; max-width: 40ch; }
  .hx-scrim { background: linear-gradient(to top, rgba(9, 18, 23, .97) 0, rgba(9, 18, 23, .88) 26%, rgba(9, 18, 23, 0) 46%); }
}