/* Onni.ai · Two speeds. Page styles. Tokens in tokens.css, motion primitives in base.css. */

h1, h2, h3 { font-weight: 800; letter-spacing: -0.045em; line-height: 1.0; }
em { font-style: normal; color: var(--accent-deep); }
.night em, html[data-tema="dark"] .site-header em { color: var(--accent); }
.eyebrow { font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-4); }
.night .eyebrow { color: var(--on-night-2); }
.lede { font-size: var(--t-m); color: var(--ink-2); margin-top: var(--s-6); }
.night .lede, .lede.on-night { color: var(--on-night-2); }
.h2 { font-size: var(--t-xl); margin-bottom: var(--s-6); }
.h3 { font-size: var(--t-l); letter-spacing: -0.03em; }
.big { font-size: var(--t-xl); }

/* ---------- header ---------- */
.site-header { background: var(--paper); gap: var(--s-5); padding-block: var(--s-3); }
html[data-tema="dark"] .site-header { background: var(--night); }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 30px; width: auto; }
.logo-light { display: none !important; }
html[data-tema="dark"] .logo-ink { display: none !important; }
html[data-tema="dark"] .logo-light { display: block !important; }
.site-header nav { margin-left: auto; gap: var(--s-6); font-weight: 500; }
.site-header nav a { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 78% / 0 1px; transition: background-size var(--spring-snappy-dur) var(--spring-snappy); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { background-size: 100% 1px; text-decoration: none; }
@media (max-width: 819px) { .site-header nav { display: none; } .site-header .btn-s { margin-left: auto; } }

/* ---------- buttons ---------- */
.btn { background: var(--accent-deep); color: #fff; font-weight: 600; }
.btn:hover { background-color: #355d92; }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { background: transparent; }
.btn-s { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-s); }
.btn-l { min-height: 56px; font-size: var(--t-m); padding: 0 var(--s-6); }
.link-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-7); font-weight: 600; color: var(--accent-deep); text-decoration-thickness: 1px; }

/* ---------- chapters ---------- */
.chapter { position: relative; padding-block: var(--s-10); }
.paper { background: var(--paper); color: var(--ink); }
.night { background: var(--night); color: var(--on-night); }
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: var(--s-8); } }
.pull { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: var(--s-8); max-width: none; }

/* the thread: PEOPLE runs down the left of the people chapters, BUSINESS down the right of the business ones */
.rail { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.rail.l { left: calc(var(--gutter) / 2 - 1px); }
.rail.r { right: calc(var(--gutter) / 2 - 1px); }
html.js:not(.reduced) .rail { clip-path: inset(0 0 100% 0); }

/* ---------- diagram atoms ---------- */
.node { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: var(--t-s); white-space: nowrap; }
.night .node { background: var(--night-2); border-color: var(--night-line); color: var(--on-night); }
.node-accent, .night .node-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.node-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.node-soft { background: transparent; }
.node-human, .night .node-human { border-style: dashed; border-color: var(--on-night-2); }
.node-brand { letter-spacing: 0.24em; font-weight: 800; padding-inline: 1.4rem; }
.tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); padding-block: 0.2rem; }
.night .tag { color: var(--accent); }
.ln { display: block; background: var(--accent); flex: none; }
.ln.v { width: 2px; height: var(--lh, 28px); }
.ln.h { height: 2px; }
.tree { display: flex; flex-direction: column; align-items: center; width: 100%; --lh: 28px; }
.hbar { display: flex; height: 2px; }
.hbar .ln { flex: 1; }
.w50 { width: 50%; } .w66 { width: 66.667%; }
.cols { display: grid; width: 100%; }
.n2 { grid-template-columns: 1fr 1fr; } .n3 { grid-template-columns: repeat(3, 1fr); }
.col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.chain { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--s-3); }
.chain > .b { display: inline-flex; align-items: center; min-height: 40px; padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; font-size: var(--t-s); }
.chain > .b.node-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.chain > .ln.h { width: clamp(14px, 2.4vw, 36px); }
.vchain, .graph-chain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.vchain > .b, .graph-chain > .b { display: inline-flex; align-items: center; min-height: 40px; padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; font-size: var(--t-s); }
.vchain > .b.node-accent, .graph-chain > .b.node-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.vchain > .ln.v { height: 18px; margin-left: 24px; }

/* hidden initial states (JS only, never under reduced motion) */
html.js:not(.reduced) :is([data-build], .tree, .chainA, .graph-chain) .b { clip-path: inset(0 100% 0 0); }
html.js:not(.reduced) :is([data-build], .tree, .chainA, .graph-chain) .ln { clip-path: inset(0 0 100% 0); }
html.js:not(.reduced) #hero .hid .line > span { transform: translateY(140%); }
html.js:not(.reduced) .sw:not(:first-child) { transform: translateY(105%); }
html.js:not(.reduced) .bn-tag, html.js:not(.reduced) .r2c-h .line > span { transform: translateY(140%); }

/* ---------- screens ---------- */
.screen { margin: 0; border-radius: var(--radius); overflow: clip; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgb(27 32 45 / 0.35); background: #fff; }
.night .screen { border-color: var(--night-line); box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55); }
.screen img { width: 100%; height: auto; }

/* ---------- 01 hero ---------- */
#hero { height: 300vh; }
#hero .stage { display: flex; flex-direction: column; padding-top: 72px; }
.hero-in { flex: 1; display: grid; align-items: center; width: 100%; }
.layer { grid-area: 1 / 1; min-width: 0; }
#hero h1 { font-size: var(--t-xxl); line-height: 0.98; max-width: 14ch; }
.hero-sub { margin-top: var(--s-6); font-size: var(--t-l); color: var(--on-night-2); font-weight: 500; letter-spacing: -0.01em; max-width: 34ch; }
.qs { display: grid; gap: var(--s-6); }
.q-tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); }
.q-text { font-size: clamp(1.5rem, 0.9rem + 2.4vw, 3.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; margin: 0; max-width: none; }
.solves { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; margin-top: var(--s-7); }
.engines { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; max-width: none; margin-bottom: var(--s-6); }
.hero-tree { max-width: 760px; margin-inline: auto; }
.hero-doors { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-5) var(--s-7); width: 100%; }
@media (min-width: 900px) {
  .qs { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .layer-c { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: center; }
  .engines { margin: 0; }
}
@media (max-width: 599px) {
  .hero-tree { --lh: 16px; }
  .hero-tree .node { font-size: 0.875rem; padding-inline: 0.7rem; }
  .hero-doors .btn { flex: 1 1 100%; justify-content: center; }
  .hero-sub { font-size: var(--t-m); }
}

/* ---------- 02 first question ---------- */
.answers { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: grid; gap: var(--s-6); }
.ans { position: relative; width: fit-content; font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; color: var(--ink-2); }
.ans::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; top: 52%; height: 0.07em; background: var(--ink); clip-path: inset(0 calc((1 - var(--s, 0)) * 100%) 0 0); }
.ans-yes { color: var(--ink); }
.ans-yes::after { display: none; }
html.reduced .ans:not(.ans-yes)::after { clip-path: none; }

/* ---------- 03 fabric ---------- */
.fab-demo { position: relative; }
.work-card { position: relative; margin: -2.5rem var(--s-4) 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); box-shadow: 0 24px 50px -20px rgb(27 32 45 / 0.3); font-size: var(--t-s); }
.work-card .b { display: block; }
.who { margin: 0 0 var(--s-3); display: grid; } .who span { color: var(--ink-2); }
.wc-h { margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.work-card ul { list-style: none; padding: 0; margin: 0; }
.work-card li { display: flex; gap: var(--s-3); padding-block: 0.3rem; }
.work-card li b { min-width: 2ch; text-align: right; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .work-card { position: absolute; left: -8%; bottom: -14%; width: 320px; margin: 0; } }
.prompt-row { margin-top: var(--s-10); }
.prompt { display: inline-block; max-width: none; font-size: var(--t-l); font-weight: 600; letter-spacing: -0.02em; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.caret-wrap { display: inline-grid; }
.caret-wrap > * { grid-area: 1 / 1; }
.caret-wrap .ghost { visibility: hidden; }
.typed::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--accent-deep); }

/* ---------- 04 loop ---------- */
.kel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
.kel .b { display: grid; gap: var(--s-2); }
.kel strong { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; }
.kel li:last-child strong { color: var(--accent-deep); }
.kel span { color: var(--ink-2); }
.kel-loop { display: none; }
@media (min-width: 900px) {
  .kel { grid-template-columns: repeat(4, 1fr); }
  .kel-loop { display: block; position: relative; height: 48px; margin: var(--s-4) 12.5% 0 1%; }
  .kel-loop .ln.v { position: absolute; top: 0; right: 0; height: 100%; }
  .kel-loop .ln.v.up { left: 0; right: auto; }
  .kel-loop .ln.h { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* ---------- 05 sources ---------- */
.wi { display: grid; gap: var(--s-5); margin-top: var(--s-7); align-items: center; }
.wi-src { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.wi-src .b { display: grid; padding: 0.6rem 0.9rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-size: var(--t-s); }
.wi-src small { font-weight: 400; color: var(--ink-2); font-size: var(--t-xs); }
.wi-flow { display: none; }
.wi-core { justify-self: start; font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; padding: var(--s-4) var(--s-5); border-radius: 10px; background: var(--accent-deep); color: #fff; }
.chain-wi { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .wi { grid-template-columns: minmax(0, 1.4fr) minmax(48px, 0.5fr) auto; }
  .wi-flow { display: block; } .wi-flow .ln { width: 100%; }
}

/* ---------- 06 measure ---------- */
.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-7); }
.clock .num { font-size: clamp(2.6rem, 1.4rem + 6vw, 8rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock:last-child .num { color: var(--accent-deep); }
.clock .cap { color: var(--ink-2); font-size: var(--t-s); }
.baseline { position: relative; height: 16px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-top: var(--s-6); }
.bl-run { position: absolute; left: 0; top: 0; bottom: 0; width: 4.83%; background: var(--ink); }
.bl-back { position: absolute; left: 4.83%; right: 0; top: 0; bottom: 0; background: var(--accent-deep); }
html.js:not(.reduced) .bl-back { clip-path: inset(0 100% 0 0); }
.returned { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; margin-top: var(--s-6); max-width: none; }
#measure .btn { margin-top: var(--s-4); }

/* ---------- 07 shift ---------- */
#shift { min-height: 120vh; display: flex; align-items: center; }
.shift-1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--on-night-2); max-width: none; }
.shift-2 { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: var(--s-8); max-width: none; }

/* ---------- 08 exec ---------- */
.qgrid { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.qgrid .b { padding: var(--s-4); background: var(--night-2); border: 1px solid var(--night-line); border-radius: 8px; font-weight: 600; font-size: var(--t-s); }
@media (min-width: 900px) { .qgrid { grid-template-columns: repeat(4, 1fr); } }
.verdict { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: var(--s-8); max-width: none; }

/* ---------- 09 10-20-70 ---------- */
.bcg { display: grid; grid-template-rows: 1fr 2fr 7fr; height: min(76vh, 740px); gap: 6px; margin-top: var(--s-7); }
.seg { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 var(--s-5); border-radius: 8px; min-height: 0; overflow: hidden; }
.seg strong { font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.seg span { font-weight: 600; font-size: var(--t-m); text-align: right; }
.s10 { background: var(--paper-2); } .s10 strong { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
.s20 { background: #dde4ee; } .s20 strong { font-size: clamp(2rem, 1.2rem + 3vw, 4.4rem); }
.s70 { background: var(--accent-deep); color: #fff; align-items: flex-end; padding-block: var(--s-5); }
.s70 strong { font-size: clamp(5rem, 2rem + 14vw, 17rem); }
.credit { font-size: var(--t-xs); color: var(--ink-2); margin-top: var(--s-3); }

/* ---------- 10 builder ---------- */
.rail-steps { list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.rail-steps .b { display: block; padding: var(--s-3) 0; border-top: 1px solid var(--night-line); font-weight: 600; }
.rail-steps .b b { color: var(--accent); margin-right: var(--s-3); font-variant-numeric: tabular-nums; }
.rail-steps .intent { border: 0; font-size: var(--t-l); letter-spacing: -0.02em; padding-bottom: var(--s-4); }

/* ---------- 11 revenue-to-cash ---------- */
#r2c { height: 400vh; }
#r2c .stage { padding-top: 76px; }
.r2c-in { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--s-6); }
.r2c-phase { display: inline-grid; overflow: clip; vertical-align: bottom; color: var(--accent); }
.r2c-phase .ph { grid-area: 1 / 1; }
html.js:not(.reduced) .r2c-phase .ph:not(:first-child) { transform: translateY(110%); }
.r2c-titles { display: grid; }
.r2c-titles > * { grid-area: 1 / 1; }
.r2c-intent { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.02em; margin: 0; max-width: none; }
.r2c-h { font-size: var(--t-xl); }
.canvas { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.canvas > * { grid-area: 1 / 1; }
.chainA { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; --bn: 0; }
.chainA .b { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem; border: 1.5px solid var(--night-line); border-radius: 8px; background: var(--night-2); font-weight: 600; font-size: var(--t-s); }
.chainA .b.bn { border-color: color-mix(in srgb, var(--status) calc(var(--bn) * 100%), var(--night-line)); }
.chainA .ln.h { width: clamp(14px, 2.6vw, 44px); }
.chainA .ln.bn { background: color-mix(in srgb, var(--status) calc(var(--bn) * 100%), var(--accent)); }
.bn-tag { align-self: end; margin: 0 0 12%; font-size: var(--t-s); color: var(--on-night); display: inline-flex; gap: var(--s-2); align-items: center; }
.bn-tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--status); }
.treeB .node { min-height: 38px; }
@media (max-width: 899px) {
  .chainA { flex-direction: column; }
  .chainA .ln.h { width: 2px; height: 12px; }
  .treeB { --lh: 14px; }
  .treeB .node { font-size: 0.875rem; padding: 0.35rem 0.6rem; min-height: 34px; }
  .bn-tag { margin-bottom: 0; }
}

/* ---------- 12 capabilities ---------- */
#caps .vchain { justify-self: start; }

/* ---------- 13 manifesto ---------- */
#manifesto { padding-block: var(--s-10) calc(var(--s-10) * 1.5); }
.mani { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.mani li { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; color: var(--on-night); }
.mani li.last { color: var(--accent); }

/* ---------- 14 atlas ---------- */
.atlas-name { margin-top: var(--s-6); font-size: var(--t-m); color: var(--on-night); }
.atlas-name strong { display: block; font-size: var(--t-l); letter-spacing: 0.2em; color: var(--accent); }
#atlas .btn { margin-top: var(--s-3); }
.graph { position: relative; height: min(78vh, 680px); border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--night-line); overflow: clip; }
.graph-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-net line { stroke: var(--on-night-2); stroke-opacity: 0.45; stroke-width: 1.5; }
.graph-net circle { fill: var(--accent); }
.graph-net circle.hub { fill: var(--on-night); }
.graph-chain { position: absolute; left: 50%; top: 50%; align-items: center; transform: translate(-50%, -50%); }
.graph-chain > .b { background: var(--night); border-color: var(--night-line); color: var(--on-night); }
.graph-chain > .ln.v { height: 14px; }

/* ---------- 15 convergence ---------- */
#converge { height: 300vh; }
#converge .stage { padding-top: 76px; }
.conv-in { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--s-5); }
.conv-h { font-size: var(--t-xl); margin-bottom: var(--s-5); }
.conv-tree { --lh: 18px; flex: 1; justify-content: center; }
.mini { margin: var(--s-2) 0; width: min(260px, 80%); border-radius: 8px; overflow: clip; border: 1px solid var(--line); box-shadow: 0 16px 30px -16px rgb(27 32 45 / 0.4); }
.mini img { width: 100%; }
@media (max-width: 699px) { .mini { display: none; } .conv-tree { --lh: 14px; } .conv-tree .node { font-size: 0.875rem; padding-inline: 0.6rem; } }
@media (max-height: 760px) and (min-width: 700px) { .mini { width: 200px; } }

/* ---------- 16 speeds ---------- */
.charts { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 900px) { .charts { grid-template-columns: repeat(3, 1fr); } }
.chart { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); }
.chart figcaption { font-weight: 700; margin-bottom: var(--s-3); }
.chart svg { width: 100%; height: auto; }
.chart .ax { fill: none; stroke: var(--line); stroke-width: 1.5; }
.chart .pl { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.chart .up { stroke: var(--accent-deep); }
.chart .up2 { stroke: var(--accent); }
.chart .flat { stroke: var(--ink-2); stroke-dasharray: none; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-xs); color: var(--ink-2); margin: var(--s-3) 0 0; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--ink-2); }
.legend .k-up::before { background: var(--accent-deep); } .legend .k-up2::before { background: var(--accent); }
.chart-win { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent-deep); }

/* ---------- 17 architecture ---------- */
.stack { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: 6px; }
.stack .b { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); background: var(--night-2); border: 1px solid var(--night-line); border-radius: 8px; }
.stack strong { font-weight: 700; }
.stack span { color: var(--on-night-2); font-size: var(--t-s); }
.stack .layer-hl { border-color: var(--accent); }
.stack .band { background: transparent; border: 1.5px dashed var(--accent); color: var(--on-night); text-align: center; font-weight: 600; font-size: var(--t-s); margin-top: var(--s-2); }
@media (min-width: 900px) { .stack .b:not(.band) { grid-template-columns: 2fr 3fr; align-items: center; } }
.legacy { margin-top: var(--s-10); }
.leg { margin-top: var(--s-6); }
.onni-layer { display: block; padding: var(--s-4); margin-bottom: 8px; border-radius: 8px; background: var(--accent-deep); color: #fff; text-align: center; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; }
.leg-sys { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.leg-sys li { padding: var(--s-4); border-radius: 8px; background: var(--night-2); border: 1px solid var(--night-line); font-weight: 600; font-size: var(--t-s); color: var(--on-night-2); }
.pull-night { color: var(--on-night); }

/* ---------- 18 industries ---------- */
.ind { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.ind-index { display: none; list-style: none; padding: 0; margin: 0; }
.ind-index li { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--line); color: var(--ink-2); font-weight: 600; }
.ind-index li.on { color: var(--ink); border-left-color: var(--accent-deep); }
.ind-frame { position: relative; height: 300px; overflow: clip; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.sw { position: absolute; inset: 0; padding: var(--s-6); display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); }
.sw h3 { font-size: var(--t-xl); }
.flow { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.flow li { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--t-s); }
.flow li > span, .flow li { }
.flow li:not(:last-child)::after { content: "→"; color: var(--accent-deep); font-weight: 700; }
@media (min-width: 900px) { .ind { grid-template-columns: 240px 1fr; } .ind-index { display: block; } .ind-frame { height: 340px; } .sw { padding: var(--s-8); } }

/* ---------- 19 proof ---------- */
.counters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); margin: var(--s-5) 0 0; }
@media (min-width: 900px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counters div { display: flex; flex-direction: column-reverse; gap: var(--s-2); border-top: 1px solid var(--night-line); padding-top: var(--s-4); }
.counters dd { margin: 0; font-size: clamp(2.4rem, 1.4rem + 4vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.counters dt { color: var(--on-night-2); font-weight: 600; font-size: var(--t-s); }

/* ---------- 20 method ---------- */
.loop8 { position: relative; margin-top: var(--s-7); }
.loop8 ol { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.loop8 .b { display: grid; gap: var(--s-1); padding: var(--s-5); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.loop8 b { color: var(--accent-deep); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.loop8 strong { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; }
.loop8 span { color: var(--ink-2); font-size: var(--t-s); }
.loop-path { display: none; }
@media (min-width: 900px) {
  .loop8 ol { grid-template-columns: repeat(4, 1fr); gap: var(--s-8) var(--s-6); }
  .loop8 li:nth-child(5) { grid-area: 2 / 4; } .loop8 li:nth-child(6) { grid-area: 2 / 3; }
  .loop8 li:nth-child(7) { grid-area: 2 / 2; } .loop8 li:nth-child(8) { grid-area: 2 / 1; }
  .loop-path { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .loop-path .pl { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
}

/* ---------- 21 final ---------- */
.final { min-height: 100vh; display: flex; align-items: center; }
.final-logo { width: 150px; height: auto; margin-bottom: var(--s-7); }
.final-h { font-size: var(--t-xxl); line-height: 0.98; }
.ul { padding-bottom: 0.06em; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / calc(var(--u, 1) * 100%) 0.07em; }
.doors { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
@media (max-width: 599px) { .doors .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- footer ---------- */
.site-footer { display: block; background: var(--night); color: var(--on-night); border-top: 1px solid var(--night-line); padding: var(--s-9) 0 var(--s-6); font-size: var(--t-s); }
.foot-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot-logo { width: 120px; height: auto; margin-bottom: var(--s-4); }
.foot-line { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.site-footer .eyebrow { color: var(--on-night-2); }
.door { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 600; font-size: var(--t-m); color: var(--on-night); text-decoration-color: var(--accent); }
.foot-note { color: var(--on-night-2); margin-top: var(--s-3); }
.foot-nav { display: grid; align-content: start; }
.foot-nav a { color: var(--on-night); text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-copy { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--night-line); color: var(--on-night-2); max-width: none; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- inner pages ---------- */
.page-hero { padding-top: calc(76px + var(--s-9)); padding-bottom: var(--s-9); }
.page-hero h1 { font-size: var(--t-xxl); line-height: 0.98; max-width: 16ch; margin-bottom: var(--s-6); }
.page-hero .screen { margin-top: var(--s-8); }
.checks { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .checks { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-7); } }
.checks .b { display: flex; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: var(--t-m); font-weight: 600; }
.checks .b::before { content: "✓"; color: var(--accent-deep); font-weight: 800; }
.screens { height: 400vh; }
.screens .stage { padding-top: 76px; }
.screens-in { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: var(--s-5); padding-bottom: var(--s-6); }
.cap-frame { position: relative; overflow: clip; height: calc(var(--t-l) * 2.6); }
.cap-frame .cap-sw { position: absolute; inset: 0; font-size: var(--t-l); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; max-width: 40ch; }
html.js:not(.reduced) .cap-frame .cap-sw:not(:first-child), html.js:not(.reduced) .scr-frame .scr:not(:first-child) { transform: translateY(105%); }
.scr-frame { position: relative; overflow: clip; min-height: 0; border-radius: var(--radius); }
.scr-frame .scr { position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-start; justify-content: center; }
.scr-frame .scr img { width: auto; max-width: 100%; max-height: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.night .scr-frame .scr img { border-color: var(--night-line); }
.scr-count { font-variant-numeric: tabular-nums; color: var(--accent-deep); }
.night .scr-count { color: var(--accent); }
.src-list { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: 0; }
.src-list li { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .src-list li { grid-template-columns: 1fr 2fr; } }
.src-list strong { font-weight: 700; }
.src-list span { color: var(--ink-2); }
.metrics { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(5, 1fr); } }
.metrics .b { padding: var(--s-5); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); display: grid; gap: var(--s-1); }
.metrics strong { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; }
.metrics span { color: var(--ink-2); font-size: var(--t-s); }
.stories .sw h3 { font-size: var(--t-l); color: var(--accent-deep); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; }
.stories .sw p { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; margin: 0; max-width: 22ch; }
.stories .ind-frame { height: 420px; }
.buyers .sw strong { display: block; font-size: var(--t-s); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.buyers .sw p { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; margin: 0; max-width: 20ch; }
.buyers .ind-frame { background: var(--night-2); border-color: var(--night-line); height: 360px; }
.buyers .ind-index li { border-left-color: var(--night-line); color: var(--on-night-2); }
.buyers .ind-index li.on { color: var(--on-night); border-left-color: var(--accent); }
.synth { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-3); }
.synth .b { display: grid; gap: var(--s-2); padding: var(--s-6); border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--night-line); }
@media (min-width: 900px) { .synth .b { grid-template-columns: 1fr 2fr; align-items: baseline; } }
.synth strong { font-size: var(--t-l); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.synth span { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.02em; }
.synth .onni { background: var(--accent-deep); border-color: var(--accent-deep); }
.synth .onni strong, .synth .onni span { color: #fff; }
.mloop { height: 400vh; }
.mloop .stage { padding-top: 76px; }
.mloop-in { height: 100%; display: grid; grid-template-rows: auto 1fr; padding-bottom: var(--s-6); }
.mloop .loop8 { align-self: center; }
.mloop .loop8 .b { padding: var(--s-4); }
@media (max-width: 899px) { .mloop .loop8 ol { gap: 6px; } .mloop .loop8 .b { grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-4); } .mloop .loop8 strong { font-size: var(--t-m); } }

/* ---------- reduced motion: pins unpin, stacked layers become a flowing page ---------- */
html.reduced .pin { height: auto !important; }
html.reduced .pin > .stage { position: relative; height: auto; overflow: visible; padding-block: calc(76px + var(--s-6)) var(--s-8); }
html.reduced .hero-in, html.reduced .r2c-titles, html.reduced .canvas, html.reduced .scr-frame, html.reduced .cap-frame { display: block; height: auto; }
html.reduced .layer { margin-bottom: var(--s-9); }
html.reduced .canvas > * { margin-top: var(--s-7); }
html.reduced .r2c-h { margin-top: var(--s-5); }
html.reduced .r2c-phase { display: inline; }
html.reduced .r2c-phase .ph + .ph::before { content: " → "; }
html.reduced .ind-frame { height: auto; }
html.reduced .sw, html.reduced .cap-sw, html.reduced .scr { position: static; margin-bottom: var(--s-6); }
html.reduced .scr-frame .scr img { max-height: none; }

.pl { stroke-dasharray: 1; }
html.js:not(.reduced) .pl { stroke-dashoffset: 1; }
.r2c-titles { overflow: clip; }
html.js:not(.reduced) .bn-tag { transform: none; clip-path: inset(0 100% 0 0); }
@media (min-width: 900px) {
  .hero-tree { --lh: 40px; }
  .hero-tree .node { font-size: var(--t-m); min-height: 48px; padding-inline: 1.3rem; }
  .chainA .b { font-size: var(--t-m); min-height: 54px; padding-inline: 1.2rem; }
  .treeB { --lh: 30px; }
  .treeB .node { font-size: var(--t-m); min-height: 48px; padding-inline: 1.2rem; }
  .graph-chain > .b { font-size: var(--t-m); min-height: 48px; }
}
.night .chain > .b { background: var(--night-2); border-color: var(--night-line); color: var(--on-night); }
.night .chain > .b.node-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.scr-frame .scr img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center top; border: 0; border-radius: 0; }
html.reduced .scr-frame .scr img { height: auto; }
.buyers .sw strong { color: var(--accent-soft); } /* tonal step of the accent for small text on night-2 (6.1:1) */
.logo img { height: 30px; width: 82px; }
.foot-logo { width: 121px; height: 44px; }
.final-logo { width: 151px; height: 55px; }

/* ---------- round 1 fixes ---------- */
.line { padding-block: 0.06em 0.14em; overflow-clip-margin: 0; }
html.js:not(.reduced) .line > span { transform: translateY(160%); }
.seg span { white-space: nowrap; }
/* phones: screens are cropped to fill the frame and the camera pans across them */
@media (max-width: 767px) {
  .scr-frame { height: 62vh; align-self: start; border: 1px solid var(--line); }
  .night .scr-frame { border-color: var(--night-line); }
  .scr-frame .scr img { object-fit: cover; }
}
/* method: arrows close the loop, Learn returns to Discover */
.loop8 .b { position: relative; }
.loop8 .b::after { position: absolute; color: var(--accent-deep); font-weight: 800; font-size: 1.2rem; line-height: 1; }
@media (max-width: 899px) {
  .loop8 ol { gap: var(--s-5); }
  .loop8 .b::after { content: "↓"; left: 50%; bottom: calc(-1 * var(--s-5)); transform: translate(-50%, 15%); }
  .loop8 li:last-child::after { content: "↺ back to Discover"; font-size: var(--t-xs); white-space: nowrap; bottom: -1.6rem; }
  .loop8 { margin-bottom: var(--s-6); }
}
@media (min-width: 900px) {
  .loop8 li:nth-child(-n+3)::after { content: "→"; right: calc(-1 * var(--s-6) + 2px); top: 50%; transform: translate(50%, -50%); }
  .loop8 li:nth-child(4)::after { content: "↓"; left: 50%; bottom: calc(-1 * var(--s-8) / 2); transform: translate(-50%, 50%); }
  .loop8 li:nth-child(n+5):nth-child(-n+7)::after { content: "←"; left: calc(-1 * var(--s-6) + 2px); top: 50%; transform: translate(-50%, -50%); }
  .loop8 li:nth-child(8)::after { content: "↑ back to Discover"; font-size: var(--t-xs); white-space: nowrap; left: 0; top: calc(-1 * var(--s-8) / 2); transform: translateY(-50%); }
}
/* revenue-to-cash at desktop scale: big nodes, visible bottlenecks with a reason under each */
.chainA .ln.bn { height: 3px; }
.chainA .b.bn { position: relative; }
.chainA .b.bn::after { content: attr(data-why); position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--status); color: #fff; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; clip-path: inset(0 calc((1 - var(--bn)) * 100%) 0 0); }
.bn-tag { font-size: var(--t-m); }
@media (min-width: 900px) {
  .chainA .b { font-size: 1.2rem; min-height: 64px; padding-inline: 1.4rem; }
  .chainA .ln.h { width: clamp(20px, 2.4vw, 48px); }
  .treeB { --lh: 30px; }
  .treeB .node { font-size: 1.15rem; min-height: 54px; padding-inline: 1.4rem; }
  .mini { width: min(340px, 80%); }
  .conv-tree { --lh: 16px; }
}
@media (max-width: 899px) { .chainA .b.bn::after { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); } }
.stories .flow { margin-top: var(--s-2); }
/* reduced motion: no scroll-track heights left behind */
html.reduced #shift, html.reduced .final { min-height: auto; }
.threads { display: none; }
@media (min-width: 900px) {
  .layer-a { display: grid; grid-template-columns: 7fr 4fr; column-gap: var(--s-8); align-items: center; }
  .layer-a > :not(.threads) { grid-column: 1; }
  .threads { display: grid; grid-template-columns: 1fr 1fr; grid-column: 2; grid-row: 1 / span 3; height: min(56vh, 520px); }
  .thr { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
  .thr .ln.v { flex: 1; height: auto; }
  .thr-n { font-weight: 700; font-size: var(--t-m); color: var(--on-night); }
}
@media (min-width: 900px) {
  .layer-c > * { grid-column: 2; }
  .layer-c { grid-template-columns: 5fr 7fr; align-content: center; row-gap: var(--s-5); }
  .layer-b { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--s-7); }
  .layer-b .qs { grid-column: 1 / -1; }
  .layer-b .solves { grid-column: 1; }
}

/* ---------- round 2 fixes ---------- */
.site-header .btn-s { padding: 0 var(--s-4); }
/* 10-20-70: the fill grows, the type is never cropped */
.seg { position: relative; background: none !important; }
.seg::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: var(--seg-bg); clip-path: inset(0 calc((1 - var(--k, 1)) * 100%) 0 0 round 8px); }
.seg > * { position: relative; }
.s10 { --seg-bg: var(--paper-2); } .s20 { --seg-bg: #dde4ee; } .s70 { --seg-bg: var(--accent-deep); }
.seg strong, .seg span { display: inline-block; }
.seg { overflow: clip; }
html.js:not(.reduced) .seg { --k: 0; }
html.js:not(.reduced) .seg strong, html.js:not(.reduced) .seg span { transform: translateY(120%); }
@media (max-width: 599px) {
  .s70 { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .s70 span { text-align: left; }
  .seg span { white-space: normal; font-size: var(--t-s); }
}
/* bottleneck reasons sit under each node on phones too */
@media (max-width: 899px) {
  .chainA .b.bn::after { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
  .bn-tag { white-space: normal; text-align: center; max-width: 30ch; justify-self: center; }
}
.bn-tag::before { flex: none; }
/* atlas chain starts at reading size */
.graph-chain > .b { font-size: 1.05rem; }
/* phones: screens at full UI size, the camera pans across them */
@media (max-width: 767px) { .scr-frame .scr img { object-fit: none; } }
@media (min-width: 768px) { .scr-frame .scr img { object-fit: cover; } }
@media (max-width: 899px) { .bn-tag { display: block; } .bn-tag::before { display: inline-block; margin-right: 8px; vertical-align: 1px; } }
@media (min-width: 768px) { .scr-frame .scr { align-items: flex-start; } .scr-frame .scr img { height: calc(100% + 64px); object-position: 50% 0%; } }
/* 10-20-70: the colour is real (contrast tools see it); a paper cover slides off it as the bar grows */
.s10 { background: var(--paper-2) !important; } .s20 { background: #dde4ee !important; } .s70 { background: var(--accent-deep) !important; }
.seg::before { background: var(--paper); border-radius: 0; clip-path: inset(0 0 0 calc(var(--k, 1) * 100%)); z-index: 1; inset: -1px; }
.seg > * { z-index: 0; }

/* ---------- round 3 fixes ---------- */
.scr picture { display: contents; }
@media (max-width: 767px) {
  .scr-frame { height: min(58vh, 470px); background: #fff; }
  .scr.crop img { object-fit: contain; object-position: 50% 0%; }
}
html.reduced .scr-frame .scr img { object-fit: contain; height: auto; transform: none; }
html.reduced .scr-frame { height: auto; background: none; border: 0; }
@media (min-width: 900px) {
  .mloop .loop8 .b { min-height: 170px; padding: var(--s-5); align-content: start; }
  .mloop .loop8 strong { font-size: var(--t-xl); }
  .mloop .loop8 span { font-size: var(--t-m); }
}
@media (max-width: 767px) { .scr.crop img { object-position: 50% 40%; } }
.mloop .loop8 { align-self: start; margin-top: var(--s-7); } /* centring gave fractional offsets that snap differently by history */
@media (min-width: 900px) { .mloop-in { grid-template-rows: 6rem auto; } .mloop-in h2 { margin: 0; } } /* whole-pixel rows inside the sticky stage */

/* ---------- round 4 fixes ---------- */
/* revenue-to-cash: today's chain on top, the redesign in the lower region */
.canvas { --drop: 26vh; align-items: stretch; }
.chainA { align-self: start; justify-self: center; margin-top: var(--s-4); }
.treeB { align-self: end; }
.bn-tag { align-self: start; justify-self: center; margin: 120px 0 0; }
html.js:not(.reduced) .bn-tag { transform: none; }
@media (max-width: 899px) {
  .canvas { --drop: 0px; }
  .chainA .b { min-height: 30px; padding: 0.2rem 0.6rem; font-size: 0.875rem; }
  .chainA .ln.h { height: 8px; }
  .bn-tag { display: none; }
}
html.reduced .chainA, html.reduced .bn-tag { margin-top: var(--s-5); }
/* ONNI band: real colour under a cover that slides off; the word rises after */
.onni-layer { position: relative; overflow: clip; }
.onni-layer::before { content: ""; position: absolute; inset: -1px; background: var(--night); clip-path: inset(0 0 0 calc(var(--k, 1) * 100%)); z-index: 1; }
.onni-layer > span { display: inline-block; position: relative; z-index: 0; }
html.js:not(.reduced) .onni-layer { clip-path: none !important; --k: 0; }
html.js:not(.reduced) .onni-layer > span { transform: translateY(130%); }
/* screens: tablets show the whole screenshot (fabric uses its crops), desktop drifts a taller cover crop */
@media (min-width: 768px) and (max-width: 1023px) {
  .scr-frame { height: auto; }
  .scr-frame .scr img { object-fit: contain; height: 100%; }
  .scr.crop img { height: calc(100% + 70px); object-position: 50% 0%; }
}
@media (max-width: 767px) { .scr.crop img { height: calc(100% + 70px); object-position: 50% 0%; } }
@media (min-width: 1024px) { .scr-frame .scr img { height: calc(100% + 140px); } }
/* bigger chains on wide screens */
@media (min-width: 1024px) {
  .chain > .b { font-size: var(--t-m); min-height: 48px; padding-inline: 1.2rem; }
  .chain > .ln.h { width: clamp(20px, 2.6vw, 44px); }
}
.canvas { overflow: clip; }
@media (min-width: 900px) {
  .treeB { --lh: 18px; }
  .treeB .node { min-height: 44px; font-size: 1.05rem; padding-inline: 1.1rem; }
  .chainA .b { min-height: 52px; font-size: 1.1rem; }
  .canvas { --drop: 22vh; }
}

/* ---------- round 5 fixes ---------- */
@media (min-width: 900px) { .mini { width: min(300px, 80%); } }
@media (min-width: 900px) and (max-height: 800px) { .mini { width: 240px; } }

/* ---------- round 6 fixes ---------- */
/* bar labels: each in its own mask, so a tall row can't leave them showing */
.seg .m { display: inline-block; overflow: clip; font-weight: inherit; padding-block: 0.04em 0.1em; }
html.js:not(.reduced) .seg strong, html.js:not(.reduced) .seg span { transform: translateY(130%); }
/* phone and tablet crops share one aspect (3:4); the card is that shape */
@media (max-width: 1023px) {
  .scr-frame:has(.crop) { height: auto; aspect-ratio: 3 / 4; max-height: 60vh; justify-self: center; width: min(100%, calc(60vh * 0.75)); }
  .scr.crop img { height: calc(100% + 40px); object-fit: cover; object-position: 50% 0%; }
}
/* revenue-to-cash: tablets use the horizontal chain like desktop */
@media (min-width: 768px) and (max-width: 899px) {
  .canvas { --drop: 18vh; }
  .chainA { flex-direction: row; }
  .chainA .ln.h { width: 14px; height: 2px; }
  .chainA .b { min-height: 40px; }
  .chainA .b.bn::after { left: 50%; top: calc(100% + 8px); transform: translateX(-50%); }
  .bn-tag { display: inline-flex; margin-top: 96px; }
}
/* wide screens: readable chips in the vertical chain and the atlas cluster after pull-back */
@media (min-width: 1024px) {
  .vchain > .b { font-size: var(--t-m); min-height: 48px; padding-inline: 1.2rem; }
  .vchain > .ln.v { height: 16px; }
  .graph-chain > .b { font-size: 1.25rem; min-height: 52px; }
  .graph-chain > .ln.v { height: 12px; }
}

/* ---------- round 7 fixes ---------- */
/* reduced motion / rest: every step is its own card, stacked in order */
html.reduced .scr-frame, html.reduced .scr-frame:has(.crop) { aspect-ratio: auto; max-height: none; width: 100%; height: auto; overflow: visible; border: 0; background: none; }
html.reduced .scr-frame .scr { position: static; display: block; margin-bottom: var(--s-5); }
html.reduced .scr-frame .scr img, html.reduced .scr.crop img { height: auto; width: 100%; transform: none; border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 1023px) { html.reduced .scr.crop img { width: min(100%, 420px); } }
html.js:not(.reduced) .seg { visibility: hidden; }
/* tablets: method loop as a 2-column grid, bigger r2c chips */
@media (min-width: 600px) and (max-width: 899px) {
  .loop8 ol { grid-template-columns: 1fr 1fr; }
  .loop8 .b::after { content: none; }
  .loop8 li:last-child::after { content: "↺ back to Discover"; }
  .mloop .loop8 .b { min-height: 120px; grid-template-columns: none; align-content: start; }
  .mloop .loop8 strong { font-size: var(--t-l); }
}
@media (min-width: 768px) and (max-width: 899px) {
  .chainA .b { font-size: 1rem; min-height: 46px; padding-inline: 0.8rem; }
  .chainA .ln.h { width: 16px; }
}
@media (max-width: 767px) { .treeB { align-self: center; } }
/* footer doors: always one per line */
.site-footer .foot-doors .door { display: flex; width: fit-content; }
@media (max-width: 767px) { .treeB { align-self: end; } .canvas { --lift: 14vh; } }
.grow picture { display: block; }
@media (max-width: 767px) { .page-hero .screen { max-width: 420px; } }

/* ---------- language switch ---------- */
.site-header .lang { margin-left: var(--s-5); margin-right: var(--s-3); font-weight: 700; font-size: var(--t-s); letter-spacing: 0.06em; text-decoration: none; min-width: 44px; justify-content: center; }
.site-header .lang:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 819px) { .site-header .lang { margin-left: auto; } .site-header .lang + .btn-s { margin-left: 0; } }
/* "back to Discover" comes from the markup, so it follows the page language */
@media (max-width: 899px) { .loop8 li:last-child::after { content: "↺ " attr(data-back); } }
@media (min-width: 600px) and (max-width: 899px) { .loop8 li:last-child::after { content: "↺ " attr(data-back); } }
@media (min-width: 900px) { .loop8 li:nth-child(8)::after { content: "↑ " attr(data-back); } }
/* PT headlines run ~20 % longer than EN: one step down on the display sizes so lines keep their shape */
html[lang="pt-BR"] #hero h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 7.25rem); max-width: 15ch; }
html[lang="pt-BR"] .final-h, html[lang="pt-BR"] .page-hero h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 7.25rem); }
html[lang="pt-BR"] .shift-2 { font-size: clamp(2.5rem, 1.4rem + 5vw, 7.25rem); }
/* PT: tablet r2c chain fits its longest labels; manifesto lines stay whole on phones */
@media (min-width: 768px) and (max-width: 899px) { html[lang="pt-BR"] .chainA .b { font-size: 0.875rem; padding-inline: 0.55rem; } html[lang="pt-BR"] .chainA .ln.h { width: 10px; } }
@media (max-width: 599px) { html[lang="pt-BR"] .mani li { font-size: clamp(1.6rem, 0.9rem + 3.6vw, 2.1rem); } }
/* PT phones: the shift lead-in keeps two lines (no one-word line) */
@media (max-width: 599px) { html[lang="pt-BR"] .shift-1 { font-size: 1.45rem; } }
/* tablets: the redesign tree sits right under today's chain, no empty band between */
@media (min-width: 768px) and (max-width: 899px) { .treeB { align-self: start; margin-top: 190px; } }
/* PT phones: struck answers stay on one line so the strike crosses the words */
@media (max-width: 599px) { html[lang="pt-BR"] .ans { font-size: 1.6rem; } }
@media (max-width: 599px) { html[lang="pt-BR"] .shift-2 { font-size: 2.35rem; } }
@media (max-width: 420px) { html[lang="pt-BR"] .shift-2 { font-size: 1.95rem; } }

/* ---------- the Onni wave ---------- */
.wave { position: absolute; pointer-events: none; overflow: visible; z-index: 0; }
.wave path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.wave circle { fill: var(--on-night); }
#hero .hero-in, #hero .hero-doors, #shift .wrap, #final .wrap { position: relative; z-index: 1; }
.wave-hero { right: 0; bottom: 14%; width: 64%; height: 46%; }
.wave-shift { left: 0; bottom: 4%; width: 100%; height: 42%; }
.wave-final { left: 0; bottom: 2%; width: 100%; height: 34%; }
.final { position: relative; overflow: clip; }
#shift { overflow: clip; }
@media (max-width: 899px) {
  .wave-hero { left: 0; right: 0; width: 100%; bottom: 150px; height: 24vh; }
  .wave-shift { height: 30%; }
  .wave-final { height: 26%; }
}
html.js:not(.reduced) .wave-shift, html.js:not(.reduced) .wave-final { clip-path: inset(-2% 100% -2% -2%); }
@media (min-width: 900px) {
  .wave-hero { width: 54%; bottom: 10%; height: 50%; }
  .wave-final { bottom: -6%; height: 26%; }
  .final .doors { margin-bottom: var(--s-9); }
}
/* the wave stays inside its own box; anchored left so the logo dot is always in frame */
.wave { overflow: hidden; }
.wave circle { r: 11px; }
@media (min-width: 900px) { .wave-hero { width: 46%; } .wave-final { bottom: 0; } }
@media (max-width: 599px) {
  .wave path { stroke-width: 2.2; }
  .wave circle { r: 17px; }
  .wave-hero { bottom: 170px; height: 20vh; }
}
/* reduced motion: the flowing page keeps the wave clear of every line of text */
html.reduced .wave-hero { display: none; }
html.reduced #shift, html.reduced .final { padding-bottom: 200px; }
html.reduced .wave-shift, html.reduced .wave-final { bottom: 24px; height: 150px; }
/* round 11: the hero ribbon lives in the lower right, under the thread labels; section waves start on the text gutter */
@media (min-width: 900px) {
  .threads { height: min(42vh, 380px); }
  .wave-hero { width: 44%; bottom: 0; height: 30%; }
  .wave-final { bottom: 24px; height: 24%; }
}
.wave-shift, .wave-final { left: var(--gutter); width: calc(100% - var(--gutter)); }
@media (max-width: 599px) {
  .final { padding-bottom: 32vh; }
  .wave-final { bottom: 3vh; height: 24vh; }
}
html.reduced .wave-shift, html.reduced .wave-final { height: 150px; bottom: 24px; }
/* round 12: hero dot on the gutter below 900 px; reduced bands tall enough to show the mark at size */
@media (max-width: 899px) { .wave-hero { left: var(--gutter); width: calc(100% - var(--gutter)); } }
html.reduced .wave-shift, html.reduced .wave-final { height: 280px; }
html.reduced #shift, html.reduced .final { padding-bottom: 330px; }
/* round 13: section ribbons flow under their text, aligned to the text edge, always clear of it */
.wave-shift, .wave-final, html.reduced .wave-shift, html.reduced .wave-final { position: relative; left: auto; right: auto; bottom: auto; display: block; width: 100%; }
.wave-shift { height: clamp(150px, 30vh, 300px); margin-top: var(--s-7); }
.wave-final { height: clamp(130px, 24vh, 240px); margin-top: var(--s-7); }
html.reduced #shift, html.reduced .final { padding-bottom: var(--s-9); }
@media (max-width: 599px) { .final { padding-bottom: var(--s-9); } .wave-final { height: 22vh; } }
/* round 14: a wrap inside a mask and a step between masks get the same leading (the masks' padding overlaps instead of adding up) */
.q-text .line + .line { margin-top: -0.2em; }
.solves { line-height: 1.04; }

/* =================== enterprise architecture page =================== */
:root { --mani-past: var(--on-night-2); }
.paper .mani li { color: var(--ink); } .paper { --mani-past: var(--ink-2); } .paper .mani li.last { color: var(--accent-deep); }

/* 01 hero */
#ea-hero { height: 300vh; }
#ea-hero .stage { display: flex; flex-direction: column; padding-top: 72px; }
#ea-hero .hero-in { flex: 1; display: grid; align-items: center; position: relative; z-index: 1; }
#ea-hero h1 { font-size: var(--t-xxl); line-height: 0.98; max-width: 13ch; }
.ea-sub { font-size: var(--t-l); color: var(--on-night-2); font-weight: 600; margin-top: var(--s-5); }
.ea-move { font-size: var(--t-m); color: var(--on-night); margin-top: var(--s-3); max-width: 40ch; }
.ea-down { margin-top: var(--s-6); }
.ea-chain { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-8); z-index: 0; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--s-2); }
.ea-chain .b { padding: 0.35rem 0.8rem; border: 1px solid var(--night-line); border-radius: 999px; color: var(--on-night-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; }
.ea-chain .ln.h { width: clamp(12px, 3vw, 56px); }
.ea-b { display: grid; gap: var(--s-6); align-content: center; }
.ea-tree { max-width: 680px; }
.ea-tree .node { font-size: var(--t-m); min-height: 46px; }
.ea-root { padding-inline: 1.4rem; }
.ea-two { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; max-width: none; margin: 0; }
.ea-axis { color: var(--on-night-2); font-size: var(--t-m); max-width: 46ch; margin: 0; }
@media (min-width: 900px) { .ea-b { grid-template-columns: 6fr 5fr; align-items: center; } .ea-b .ea-tree { grid-row: 1 / span 2; } }
html.js:not(.reduced) #ea-hero .hid .line > span { transform: translateY(160%); }
html.js:not(.reduced) .ea-axis { clip-path: inset(0 100% 0 0); }
html.reduced #ea-hero .hero-in { display: block; }
html.reduced #ea-hero .layer { margin-bottom: var(--s-9); }
html.reduced .ea-chain { position: static; margin: 0 var(--gutter) var(--s-6); }

/* 02 two speeds */
.ts { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 900px) { .ts { grid-template-columns: 1fr 1fr; } }
.ts-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.25rem, 1rem + 2vw, 3rem); display: grid; gap: var(--s-4); align-content: start; }
.ts-name { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; margin: 0; }
.ts-role { font-size: var(--t-l); font-weight: 600; color: var(--accent-deep); letter-spacing: -0.02em; margin: 0; }
.ts-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.ts-list .b { font-size: var(--t-m); padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.ts-flow { margin: 0; } .ts-flow > .b { font-size: var(--t-xs); min-height: 34px; padding: 0.3rem 0.65rem; }
.ts-under { display: flex; flex-direction: column; align-items: center; margin-top: var(--s-4); }
.ts-under .ln.v { height: 40px; }
@media (max-width: 899px) { .ts-under { display: none; } }
.ts-one { text-align: center; font-size: var(--t-xl); margin-top: var(--s-4); }
@media (max-width: 899px) { .ts-one { text-align: left; } }

/* 03 own the architecture */
.own { display: grid; gap: var(--s-3); margin-top: var(--s-7); grid-template-columns: repeat(3, 1fr); }
.own-col { display: grid; gap: var(--s-2); justify-items: center; text-align: center; }
.cyc { position: relative; display: grid; overflow: clip; height: 1.3em; font-size: clamp(1.25rem, 0.9rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; min-width: 6ch; }
.cyc .cy { grid-area: 1 / 1; white-space: nowrap; text-align: center; }
html.js:not(.reduced) .cyc .cy:not(:first-child) { transform: translateY(110%); }
html.reduced .cyc { height: auto; display: flex; flex-wrap: wrap; gap: 0.2em 0.6em; justify-content: center; font-size: var(--t-m); }
.own-core { grid-column: 1 / -1; margin-top: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: 14px; background: var(--accent-deep); color: #fff; text-align: center; font-weight: 800; font-size: clamp(1.2rem, 0.9rem + 1.6vw, 2.2rem); letter-spacing: 0.06em; text-transform: uppercase; }
.own-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-2); }
@media (min-width: 900px) { .own-list { grid-template-columns: repeat(5, 1fr); } }
.own-list .b { padding: var(--s-4); border-top: 2px solid var(--accent); font-weight: 600; }

/* 04 legacy */
.lg { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--s-7); }
.lg > .ln.v { align-self: center; height: 22px; }
.lg-row { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); border-radius: 10px; text-align: center; }
.lg-row strong { font-size: var(--t-m); letter-spacing: 0.06em; text-transform: uppercase; }
.lg-row span { font-size: var(--t-s); }
.lg-new { background: #fff; border: 1px dashed var(--accent-deep); }
.lg-new span { color: var(--ink-2); }
.lg-onni { background: var(--accent-deep); color: #fff; }
.lg-bus { background: var(--ink); color: var(--paper); }
.lg-real { padding: var(--s-4); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.lg-real .tag { text-align: center; margin: 0 0 var(--s-3); }
.lg-sys { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.lg-sys li { padding: 0.5rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); text-align: center; font-weight: 600; font-size: var(--t-s); }
.acl { margin-top: var(--s-8); }

/* 05-06 layers */
#layers { height: 400vh; }
#layers .stage, [data-layers] .stage, #os-flow .stage { padding-top: 76px; }
.ly-in { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--s-5); }
.ly-h { font-size: var(--t-l); letter-spacing: -0.03em; margin-bottom: var(--s-5); }
.ly-grid { flex: 1; display: grid; gap: var(--s-6); min-height: 0; }
@media (min-width: 900px) { .ly-grid { grid-template-columns: 5fr 6fr; align-items: center; } }
.ly-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ly { display: grid; gap: 1px; padding: 0.55rem 0.9rem; border-radius: 8px; background: var(--night-2); border: 1px solid var(--night-line); }
.ly strong { font-size: var(--t-s); } .ly span { font-size: var(--t-xs); color: var(--on-night-2); }
.ly.on { border-color: var(--accent); background: #22314d; }
.ly.dim strong { color: var(--on-night-2); }
.ly-band { text-align: center; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px dashed var(--accent); background: transparent; color: var(--on-night); }
.ly-detail { position: relative; overflow: clip; min-height: 260px; height: 100%; max-height: 420px; }
.ly-detail .sw { padding: 0; justify-content: center; }
.ly-detail h3 { font-size: var(--t-xl); line-height: 1.02; }
.ly-items { color: var(--on-night-2); font-size: var(--t-m); margin: 0; }
.ly-key { font-weight: 700; color: var(--accent); font-size: var(--t-m); margin: 0; }
@media (max-width: 899px) {
  .ly { padding: 0.3rem 0.6rem; } .ly span { display: none; }
  .ly-detail { min-height: 220px; max-height: none; }
}
html.reduced .ly-detail { height: auto; max-height: none; }

/* 07 bus */
.bus { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4); align-items: center; margin-top: var(--s-7); }
.bus-side { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bus-side .b { padding: 0.5rem 0.8rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: var(--t-s); text-align: center; }
.bus-core { align-self: stretch; display: grid; place-items: center; width: clamp(64px, 10vw, 140px); border-radius: 12px; background: var(--ink); color: var(--paper); }
.bus-core span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--t-s); }
.msgs { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.msg { display: grid; gap: var(--s-2); }
@media (min-width: 700px) { .msg { grid-template-columns: 260px 1fr; align-items: center; } }
.msg-k { margin: 0; display: grid; } .msg-k strong { text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-deep); } .msg-k span { color: var(--ink-2); }
.msg-track { position: relative; height: 14px; border-radius: 999px; background: var(--paper-2); }
.msg-dot { position: absolute; top: 1px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent-deep); }

/* 08 resilience */
.rs { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 900px) { .rs { grid-template-columns: 4fr 7fr; } }
.night .vchain > .b { background: var(--night-2); border-color: var(--night-line); color: var(--on-night); }
.night .vchain > .b.node-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.rs-runs { display: grid; gap: var(--s-6); align-content: start; }
.rs-run { margin: 0; }
.chain > .b.st-fail { border-color: var(--status); color: #ffb4a8; background: rgb(192 57 43 / 0.12); }
.paper .chain > .b.st-fail { color: var(--status); background: #fff; }
.rs-pat { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rs-pat .b { padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--night-line); color: var(--on-night-2); font-size: var(--t-xs); font-weight: 600; }

/* 09 knowledge */
.kn { margin-top: var(--s-7); }
.kn .wi-src .b { font-weight: 700; }
.kn-scope { display: grid; gap: var(--s-6); margin-top: var(--s-8); align-items: center; }
@media (min-width: 900px) { .kn-scope { grid-template-columns: 1fr 2fr; } }
.kn-tech { font-size: var(--t-s); color: var(--ink-2); }

/* 10 agnostic */
.ag { display: grid; gap: 6px; margin-top: var(--s-7); }
.ag-row { display: grid; grid-template-columns: 1fr 1.4fr auto 1.3fr; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); }
.ag-k { color: var(--on-night-2); font-weight: 600; font-size: var(--t-s); text-transform: uppercase; letter-spacing: 0.08em; }
.ag .cyc { font-size: var(--t-l); justify-self: start; } .ag .cyc .cy { text-align: left; }
.ag-x { font-style: normal; color: var(--accent); font-weight: 700; }
.ag-o { font-weight: 700; color: var(--on-night); }
@media (max-width: 699px) { .ag-row { grid-template-columns: 1fr auto; } .ag-k { grid-column: 1 / -1; } .ag-x { display: none; } .ag .cyc { font-size: var(--t-m); } }
.ag-claims { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.ag-claims .b { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; }

/* 11 governance */
#gov { height: 300vh; }
#gov .stage { padding-top: 76px; }
.gov-in { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--s-5); }
.gov-h { font-size: var(--t-l); letter-spacing: -0.03em; margin-bottom: var(--s-5); max-width: 30ch; }
.gov-grid { flex: 1; display: grid; gap: var(--s-6); min-height: 0; align-items: center; }
@media (min-width: 900px) { .gov-grid { grid-template-columns: 5fr 6fr; } }
.gov-arch { position: relative; }
.gov-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.gov-stack li { padding: 0.5rem 0.9rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: var(--t-s); }
.gov-stack li.on { border-color: var(--accent-deep); }
.gov-band { position: absolute; top: -8px; bottom: -8px; right: 12%; width: 56px; border-radius: 10px; background: var(--accent-deep); display: grid; place-items: center; }
.gov-band span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; font-size: var(--t-xs); }
html.js:not(.reduced) .gov-band { clip-path: inset(0 0 100% 0); }
.gov-side { display: grid; gap: var(--s-5); align-content: center; }
.gov-ctl { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gov-ctl .b { padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--accent-deep); color: var(--accent-deep); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.06em; }
.dlp { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dlp .b { display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; padding: 0.6rem 0.9rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: var(--t-s); }
.dlp code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-xs); color: var(--accent-deep); white-space: nowrap; }
.dlp .b:first-child code { color: var(--status); }
@media (max-width: 899px) { .gov-stack li { padding: 0.25rem 0.6rem; font-size: var(--t-xs); } .gov-ctl { display: none; } .dlp .b { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* 12 sovereignty */
.sv-list { margin-top: var(--s-7); }
.sv-list li { font-size: clamp(1.8rem, 1rem + 3.4vw, 4.6rem); }

/* 13 complete */
.cp-path { margin-top: var(--s-7); }
.cp-word { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: var(--s-7); color: var(--accent-deep); max-width: none; }
.cp-dims { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 900px) { .cp-dims { grid-template-columns: repeat(4, 1fr); } }
.cp-dims .b { padding: var(--s-5); border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: var(--t-l); letter-spacing: 0.04em; text-transform: uppercase; }

/* 14 frameworks */
.fw-tree { margin-top: var(--s-7); max-width: 900px; margin-inline: auto; }
.fw-tree .node { font-size: var(--t-m); min-height: 48px; }
.fw-list { list-style: none; padding: var(--s-3) 0 0; margin: 0; display: grid; gap: 4px; text-align: center; color: var(--on-night-2); font-size: var(--t-s); }
.fw-links { display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: center; }
.night .link-more { color: var(--accent); }

/* 15 gain */
.gain { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: 0; }
.gain .b { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .gain .b { grid-template-columns: 1fr 1.2fr; align-items: baseline; } }
.gain strong { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; }
.gain li:last-child strong { color: var(--accent-deep); }
.gain span { font-size: var(--t-m); color: var(--ink-2); }

/* 16 choice */
.ch { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
@media (min-width: 900px) { .ch { grid-template-columns: 1fr 1fr; } }
.ch-col { padding: var(--s-6); border-radius: 14px; border: 1px solid var(--night-line); }
.ch-arch { border-color: var(--accent); }
.ch-pilots { list-style: none; padding: 0; margin: var(--s-4) 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ch-pilots .b { padding: 0.4rem 0.8rem; border-radius: 8px; border: 1px dashed var(--on-night-2); color: var(--on-night-2); font-weight: 600; }
.ch-pilots .b:nth-child(2) { margin-top: 18px; } .ch-pilots .b:nth-child(4) { margin-top: 10px; }
.ch-diff { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; color: var(--on-night-2); }
.ch-tree { --lh: 18px; margin-top: var(--s-4); }

/* 17 final */
.ea-final { padding-block: var(--s-10); }
.ea-will { margin-bottom: var(--s-8); }
.ea-will li { font-size: clamp(1.7rem, 1rem + 3vw, 4rem); }
.ea-final-h { font-size: var(--t-xl); line-height: 1.02; }
.ea-trio { margin-top: var(--s-5); color: var(--on-night-2); }
@media (min-width: 820px) and (max-width: 1099px) { .site-header nav { gap: var(--s-4); font-size: var(--t-xs); } }
@media (max-width: 699px) {
  .own { grid-template-columns: 1fr; }
  .own-col { grid-template-columns: 90px 1fr; justify-items: start; text-align: left; align-items: center; }
  .own .cyc { font-size: var(--t-l); min-width: 0; width: 100%; }
  .own .cyc .cy { text-align: left; }
}
@media (max-width: 699px) { .own .cyc { font-size: var(--t-m); } }
.ea-chain { bottom: var(--s-5); }
#ea-hero .hero-in { padding-bottom: 96px; }
@media (max-width: 599px) { .cp-dims .b { font-size: var(--t-m); padding: var(--s-4); min-width: 0; overflow-wrap: anywhere; } .ch-col { min-width: 0; padding: var(--s-4); } .ch-tree .node { white-space: normal; text-align: center; } }
.ly-detail .tag { color: var(--accent-soft); } /* tonal step of the accent: passes on the lit layer colour too */
/* architecture round a1 */
.ly-detail .sw { overflow: clip; }
@media (max-width: 899px) { .ly-detail h3 { font-size: var(--t-l); } .ly-detail { min-height: 300px; } }
.gain strong, .cp-dims .b, .own-core { text-transform: none; letter-spacing: -0.02em; }
@media (min-width: 900px) { .gov-h { font-size: var(--t-xl); max-width: 24ch; } }
@media (max-width: 599px) {
  .acl .chain { flex-direction: column; align-items: flex-start; }
  .acl .chain .ln.h { width: 2px; height: 14px; margin-left: 24px; }
}

/* =================== business cases =================== */
#cs-hero { height: 320vh; }
#cs-hero .stage { padding-top: 72px; display: flex; align-items: center; }
.cs-bgs { position: absolute; inset: 0; z-index: 0; background: var(--night); }
.cs-bg { position: absolute; inset: 0; margin: 0; }
.cs-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cs-bgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(27 32 45 / 0.94) 0%, rgb(27 32 45 / 0.82) 38%, rgb(27 32 45 / 0.25) 75%, rgb(27 32 45 / 0.1) 100%); }
html.js:not(.reduced) .cs-bg:not(:first-child) { clip-path: inset(0 0 0 100%); }
.cs-hero-in { position: relative; z-index: 1; width: 100%; }
#cs-hero h1 { font-size: var(--t-xxl); line-height: 0.98; max-width: 14ch; }
html.js:not(.reduced) #cs-hero .line > span { transform: none; }
.cs-sub { color: var(--on-night); font-size: var(--t-m); max-width: 46ch; margin-top: var(--s-5); }
.cs-now { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-6); }
.cs-cyc { font-size: var(--t-xl); height: 1.25em; min-width: 12ch; color: var(--accent); }
.cs-cyc .cy { text-align: left; }
.cs-index { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-index a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--night-line); background: rgb(27 32 45 / 0.85); color: var(--on-night); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.cs-index b { color: var(--on-night-2); font-variant-numeric: tabular-nums; }
.cs-index li.on a { border-color: var(--accent); }
@media (max-width: 599px) { .cs-bgs::after { background: rgb(27 32 45 / 0.82); } .cs-now { flex-direction: column; gap: var(--s-2); } }
html.reduced .cs-bg:not(:first-child) { display: none; }
.cs-ind { position: relative; padding-bottom: var(--s-9); }
.cs-band { margin: 0; height: min(58vh, 560px); border-radius: 0; overflow: clip; }
.cs-band img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.cs-ind-in { position: relative; z-index: 1; }
.cs-ind-head { margin-top: -6.5rem; display: inline-block; background: var(--night); padding: var(--s-5) var(--s-6) var(--s-4) 0; padding-left: var(--s-5); margin-left: calc(-1 * var(--s-5)); border-radius: 0 12px 0 0; }
.cs-ind-head .h2 { margin: 0; font-size: var(--t-xxl); }
.cs-ind-head .eyebrow { color: var(--accent); margin-bottom: var(--s-2); }
.cs-grid { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 900px) { .cs-grid.cs-n2 { grid-template-columns: repeat(2, 1fr); } .cs-grid.cs-n3 { grid-template-columns: repeat(3, 1fr); } .cs-grid.cs-n1 .cs-card { max-width: 760px; } }
.cs-card { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6); border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); }
.cs-card h3 { font-size: var(--t-l); letter-spacing: -0.03em; }
.cs-card-sub { color: var(--on-night-2); margin: 0; }
.cs-steps { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.cs-steps .b { padding: 0.4rem 0.8rem; border-radius: 8px; border: 1px solid var(--night-line); background: var(--night); font-weight: 600; font-size: var(--t-s); }
.cs-steps .b:last-child { border-color: var(--accent); }
.cs-steps .ln.v { height: 14px; margin-left: 20px; }
.cs-end-h { font-size: var(--t-xl); }
.cs-cyc { max-width: 100%; min-width: 0; }
@media (max-width: 599px) { .cs-cyc { font-size: var(--t-l); width: 100%; } }

/* =================== film player =================== */
.film { position: relative; margin: var(--s-6) 0 0; border-radius: 14px; overflow: clip; background: #10141d; border: 1px solid var(--night-line); aspect-ratio: 16 / 9; }
.film-v { display: block; width: 100%; height: 100%; object-fit: cover; background: #10141d; }
.film-play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--accent-deep); cursor: pointer; display: grid; place-items: center; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.film-play:hover { transform: scale(1.06); }
.film-play span { width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; }
.film.playing .film-play { display: none; }
@media (max-width: 767px) { .film { aspect-ratio: 9 / 16; max-height: 82vh; margin-inline: auto; width: min(100%, calc(82vh * 9 / 16)); } }
#builder .film { margin-top: 0; }

/* =================== contact dialog =================== */
.cf { width: min(680px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.5); }
.cf::backdrop { background: rgb(27 32 45 / 0.72); }
.cf[open] { animation: cf-in var(--spring-default-dur) var(--spring-default); }
@keyframes cf-in { from { transform: translateY(24px); clip-path: inset(0 0 100% 0 round 16px); } to { transform: none; clip-path: inset(0 0 0 0 round 16px); } }
.cf-form { position: relative; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--s-4); }
.cf-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-2); cursor: pointer; border-radius: 8px; }
.cf-topic { color: var(--accent-deep); margin: 0; }
.cf-h { font-size: var(--t-l); letter-spacing: -0.03em; }
.cf-lede { color: var(--ink-2); margin: 0; font-size: var(--t-s); }
.cf-grid { display: grid; gap: var(--s-3); }
@media (min-width: 600px) { .cf-grid { grid-template-columns: 1fr 1fr; } .cf-wide { grid-column: 1 / -1; } }
.cf-f { display: grid; gap: 6px; font-size: var(--t-s); font-weight: 600; }
.cf-f span { color: var(--status); }
.cf-f input, .cf-f select, .cf-f textarea { font: inherit; font-weight: 400; font-size: 1rem; min-height: 48px; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.cf-f textarea { min-height: 88px; resize: vertical; }
.cf-f input:focus-visible, .cf-f select:focus-visible, .cf-f textarea:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.cf [aria-invalid="true"] { border-color: var(--status); }
.cf-consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-s); color: var(--ink-2); }
.cf-consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent-deep); flex: none; }
.cf-consent:has([aria-invalid="true"]) span { color: var(--status); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-msg { margin: 0; min-height: 1.4em; font-size: var(--t-s); font-weight: 600; }
.cf-msg.ok { color: #23734f; } .cf-msg.err { color: var(--status); }
.cf-send { justify-self: start; }
.cf-send:disabled { opacity: 0.6; cursor: progress; }
.cf-l i { font-style: normal; color: var(--status); }
.cf-f > span.cf-l { color: var(--ink); }

/* cases c1 fixes */
.cs-cyc { height: 1.35em; line-height: 1.35; }
@media (max-width: 599px) {
  #cs-hero .stage { align-items: flex-start; padding-top: 96px; }
  .cs-bgs::after { background: linear-gradient(180deg, rgb(27 32 45 / 0.94) 0%, rgb(27 32 45 / 0.86) 52%, rgb(27 32 45 / 0.15) 82%, rgb(27 32 45 / 0.05) 100%); }
  .cs-bg img { object-position: 60% 100%; height: 60%; top: 40%; position: absolute; }
  .cs-cyc { font-size: 1.75rem; }
  .cs-index { display: none; }
}
html.reduced .cs-now { display: none; }
@media (min-width: 600px) and (max-width: 899px) { .cs-grid.cs-n2, .cs-grid.cs-n3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .cs-grid.cs-n1 .cs-card { max-width: none; grid-template-columns: 1fr 2fr; align-items: center; gap: var(--s-6); }
  .cs-grid.cs-n1 .cs-steps { flex-direction: row; align-items: center; margin: 0; }
  .cs-grid.cs-n1 .cs-steps .ln.v { width: 28px; height: 2px; margin: 0; }
}
.cs-final { min-height: auto; padding-block: var(--s-9); }
/* architecture a2 fixes: on wide screens the tree sits on the right while the title leaves the left */
@media (min-width: 900px) {
  .ea-b { grid-template-columns: 5fr 6fr; }
  .ea-b .ea-tree { grid-column: 2; grid-row: 1 / span 2; }
  .ea-b .ea-two, .ea-b .ea-axis { grid-column: 1; }
  .gov-grid { align-items: start; margin-top: var(--s-4); }
}
/* round c2 / a3 */
@media (max-width: 767px) { html.reduced .cs-bgs::after { background: rgb(27 32 45 / 0.9); } }
html.reduced .cs-bg { display: none; }
#health .cs-band img { object-position: 85% 50%; }
@media (max-width: 599px) { .ea-two { font-size: var(--t-l); } }
.film-play { inset: auto; left: 50%; top: 58%; transform: translate(-50%, -50%); }
.film-play:hover { transform: translate(-50%, -50%) scale(1.06); }
@media (max-width: 599px) { .ea-two { font-size: 1.65rem; } }
.fab-film { margin-top: var(--s-9); }
.paper .film { border-color: var(--line); box-shadow: 0 30px 60px -24px rgb(27 32 45 / 0.35); }
@media (min-width: 768px) { .film-play { top: 80%; left: 50%; } }

/* =====================================================================================
   V2 · AI Strategy layer (content guide V2): nav + mega-menu, strategy pages, CIO explorer
   ===================================================================================== */

/* ---------- nav: AI Strategy mega-menu; a menu sheet below 1180px ---------- */
.nav-tg, .site-header .nav-cta { display: none; }
.mm { position: relative; display: flex; align-items: center; }
.site-header .mm-top { padding-right: 0; }
.mm-tg { width: 30px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.mm-tg span { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.mm.open .mm-tg span { transform: translateY(2px) rotate(225deg); }
.mm-p { position: absolute; top: 100%; right: -9rem; width: min(760px, 92vw); padding: var(--s-5); border-radius: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -24px rgb(27 32 45 / 0.45);
  visibility: hidden; clip-path: inset(0 0 100% 0 round 14px); transition: clip-path var(--spring-default-dur) var(--spring-default), visibility 0s linear var(--spring-default-dur); }
.mm.open .mm-p, .mm:focus-within .mm-p { visibility: visible; clip-path: inset(-40px -40px -80px -40px round 14px); transition: clip-path var(--spring-default-dur) var(--spring-default), visibility 0s; }
@media (hover: hover) { .mm:hover .mm-p { visibility: visible; clip-path: inset(-40px -40px -80px -40px round 14px); transition: clip-path var(--spring-default-dur) var(--spring-default), visibility 0s; } .mm:hover .mm-tg span { transform: translateY(2px) rotate(225deg); } }
html[data-tema="dark"] .mm-p { background: var(--night-2); color: var(--on-night); border-color: var(--night-line); }
.mm-h { margin: 0 0 var(--s-3) var(--s-3); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
html[data-tema="dark"] .mm-h { color: var(--on-night-2); }
.mm-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s-2); }
.site-header .mm-p a { display: grid; gap: 0.15rem; align-content: center; min-height: 44px; padding: 0.6rem var(--s-3); border-radius: 8px; background: none; transition: background-color var(--spring-snappy-dur) var(--spring-snappy); }
.site-header .mm-p a:hover, .site-header .mm-p a:focus-visible { background-color: var(--paper-2); }
html[data-tema="dark"] .site-header .mm-p a:hover, html[data-tema="dark"] .site-header .mm-p a:focus-visible { background-color: rgb(245 247 250 / 0.07); }
.mm-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
html[data-tema="dark"] .mm-k { color: var(--accent); }
.mm-q { font-size: var(--t-s); font-weight: 600; line-height: 1.25; }
.site-header .mm-p .mm-all { display: flex; margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; font-weight: 700; color: var(--accent-deep); }
html[data-tema="dark"] .site-header .mm-p .mm-all { border-color: var(--night-line); color: var(--accent); }
@media (min-width: 1180px) and (max-width: 1359px) { .site-header nav { gap: var(--s-4); font-size: var(--t-xs); } .site-header .lang { margin-left: var(--s-4); } }
@media (min-width: 1180px) { .site-header nav { display: flex; } }
@media (max-width: 1179px) {
  .site-header nav { display: none; }
  .site-header .lang { margin-left: auto; }
  .nav-tg { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; margin-left: var(--s-3); padding: 0 0.25rem 0 0.5rem; background: none; border: 0; color: inherit; font: inherit; font-size: var(--t-s); font-weight: 600; cursor: pointer; }
  .nav-tg-i { position: relative; width: 18px; height: 12px; border-block: 1.5px solid currentColor; }
  .nav-tg-i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; }
  html.nav-open .nav-tg-i { border-color: transparent; }
  html.nav-open .nav-tg-i::after { transform: rotate(45deg); }
  html.nav-open .nav-tg-i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transform: rotate(-45deg); }
  html.nav-open { overflow: hidden; }
  html.nav-open .site-header nav { display: flex; position: fixed; inset: 68px 0 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--s-4) var(--gutter) var(--s-8); overflow-y: auto; background: var(--paper); color: var(--ink); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em; }
  html.nav-open[data-tema="dark"] .site-header nav { background: var(--night); color: var(--on-night); }
  html.nav-open .site-header nav > a, html.nav-open .site-header .mm-top { min-height: 56px; background: none; border-bottom: 1px solid var(--line); }
  html.nav-open[data-tema="dark"] .site-header nav > a, html.nav-open[data-tema="dark"] .site-header .mm-top { border-color: var(--night-line); }
  .mm { flex-direction: column; align-items: stretch; }
  .mm-tg { display: none; }
  .mm-p, .mm.open .mm-p, .mm:focus-within .mm-p { position: static; width: auto; padding: var(--s-2) 0 var(--s-4); visibility: visible; clip-path: none; box-shadow: none; border: 0; background: transparent !important; color: inherit; font-size: var(--t-m); letter-spacing: 0; }
  .mm-h { display: none; }
  .mm-l { grid-template-columns: 1fr; }
  .site-header .mm-p a { padding-inline: 0; }
  .site-header .nav-cta { display: inline-flex; justify-content: center; margin-top: var(--s-6); min-height: 56px; }
  html.nav-open .site-header nav > a.nav-cta { border: 0; background: var(--accent-deep); color: #fff; }
}
@media (max-width: 559px) { .site-header .btn-s { display: none; } }

/* ---------- strategy page atoms ---------- */
.st-k b { color: var(--accent-deep); margin-right: 0.5em; font-variant-numeric: tabular-nums; }
.night .st-k b { color: var(--accent); }
.st-hero { position: relative; overflow: clip; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(76px + var(--s-9)) 0 var(--s-9); }
.st-hero-in { position: relative; z-index: 1; width: 100%; }
.st-h1 { font-size: clamp(2.5rem, 1.3rem + 4.8vw, 6.6rem); line-height: 0.98; }
.st-sub { margin-top: var(--s-6); font-size: var(--t-l); font-weight: 500; letter-spacing: -0.01em; color: var(--on-night-2); max-width: 40ch; }
.st-crumb { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.wave-st { right: 0; top: 10%; width: 46%; height: 44%; }
@media (max-width: 899px) { .wave-st { left: 0; width: 100%; top: 9%; height: 22vh; } }
html.reduced .wave-st { display: none; }
.st-logic { margin-top: var(--s-7); }
.st-logic > .b { font-size: var(--t-xs); min-height: 36px; }
.answers-all .ans { color: var(--ink-2); }
.st-after { margin-top: var(--s-7); }
.st-sum { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.st-sum > .b { display: inline-flex; align-items: center; min-height: 48px; padding: 0.5rem 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 700; font-size: var(--t-m); }
.st-sum > .op { font-size: var(--t-l); font-weight: 800; color: var(--accent-deep); }
.st-shift { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-4); font-size: clamp(2.2rem, 1.1rem + 4.6vw, 6.2rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.st-from { color: var(--on-night-2); }
.st-to { color: var(--accent); }
.st-shift > .ln.h { width: clamp(48px, 9vw, 160px); height: 3px; }
.st-tight { padding-top: var(--s-8); }

/* numbered paths with a line of explanation per step */
.st-steps { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; }
.st-steps > .b { display: grid; grid-template-columns: 3.5rem minmax(10rem, 16rem) 1fr; gap: var(--s-2) var(--s-5); align-items: baseline; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.st-steps > .b > b { color: var(--accent-deep); font-weight: 700; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.st-steps > .b > strong { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.st-steps > .b > span { color: var(--ink-2); max-width: 56ch; }
.st-steps > .st-last > strong { color: var(--accent-deep); }
.night .st-steps > .b { border-color: var(--night-line); }
.night .st-steps > .b > span { color: var(--on-night-2); }
@media (max-width: 699px) { .st-steps > .b { grid-template-columns: 2.5rem 1fr; } .st-steps > .b > span { grid-column: 2; } }

/* cards */
.st-cards { display: grid; gap: var(--s-4); margin-top: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.st-card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.st-card h3 { font-size: var(--t-l); letter-spacing: -0.03em; line-height: 1.1; }
.st-card .tag { margin-bottom: var(--s-3); }
.st-card p:not(.tag) { margin-top: var(--s-3); color: var(--ink-2); }
.night .st-card { background: var(--night-2); border-color: var(--night-line); }
.night .st-card p:not(.tag) { color: var(--on-night-2); }
.st-duo { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.st-duo .st-card h3 { font-size: var(--t-xl); letter-spacing: -0.045em; line-height: 1.02; }
.st-duo .st-card + .st-card { border-style: dashed; border-color: var(--ink-2); }
.st-grid5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.night .st-verbs h3 { color: var(--accent); }

/* giant statements */
.st-big { font-size: clamp(2.6rem, 1.3rem + 5.2vw, 7.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; }
.st-big-lede { font-size: var(--t-l); max-width: 44ch; margin-top: var(--s-7); }
.st-no .st-big { font-size: clamp(7rem, 3rem + 20vw, 22rem); line-height: 0.9; letter-spacing: -0.06em; }
.st-no .st-big .line { padding-bottom: 0.12em; }
.st-break .st-big { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 6.2rem); }

/* framework cards: the consequence of the answer */
.st-fws { display: grid; gap: var(--s-4); margin-top: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.st-fw { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.st-fw-n { font-size: var(--t-l); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); }
.st-fw-t { font-size: var(--t-m); font-weight: 700; line-height: 1.3; }
.st-fw-d { color: var(--ink-2); }
.st-fw-a { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.st-fw-a:hover { text-decoration: underline; }
.night .st-fw { background: var(--night-2); border-color: var(--night-line); }
.night .st-fw-n, .night .st-fw-a { color: var(--accent); }
.night .st-fw-d { color: var(--on-night-2); }
.st-three { margin-top: var(--s-8); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.st-shot { margin-top: var(--s-8); }

/* the documented flow vs the real one */
.st-neq { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.st-neq-col .tag { margin: 0; }
.st-neq .chain { margin-top: var(--s-3); }
.st-doc > .b { background: var(--paper-2); }

/* knowledge tree */
.st-ktree { max-width: 980px; margin: var(--s-7) auto 0; --lh: 30px; }
.st-plus { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.st-plus > .b { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem; border: 1.5px dashed var(--accent-deep); border-radius: 999px; background: #fff; color: var(--accent-deep); font-weight: 700; font-size: var(--t-s); }
.st-di { font-size: var(--t-l); min-height: 56px; padding: 0.7rem 1.6rem; }
@media (max-width: 599px) { .st-ktree .cols .node { white-space: normal; text-align: center; font-size: var(--t-xs); padding-inline: 0.5rem; min-height: 52px; } }

/* legacy stack */
.st-stack { display: flex; flex-direction: column; align-items: center; margin-top: var(--s-7); --lh: 32px; }
.st-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.st-sys > .b { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: var(--t-s); }
.st-stack > .ln.v { height: 32px; }
.st-bar { width: 100%; max-width: 900px; padding: 1rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); text-align: center; font-weight: 800; letter-spacing: 0.02em; font-size: var(--t-m); }
.st-ai { font-size: var(--t-l); min-height: 60px; padding-inline: 2.4rem; }
.st-tags { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-tags > .b { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border: 1.5px solid var(--accent-deep); border-radius: 999px; background: #fff; color: var(--accent-deep); font-weight: 700; }

/* what changes vs what stays yours */
.st-cr { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 900px) { .st-cr { grid-template-columns: 7fr 5fr; align-items: start; } }
.st-cr-row { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--night-line); }
.st-cr-k { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
.st-cr .cyc { font-size: var(--t-l); min-width: 0; width: 100%; }
.st-cr .cyc .cy { text-align: left; }
.st-cr-tag { padding: 0.2rem 0.6rem; border: 1px solid var(--night-line); border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
.st-remain .tag { margin: 0 0 var(--s-3); }
.st-rm { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.st-rm > .b { padding: 0.75rem 1.2rem; border-radius: 8px; background: var(--accent-deep); color: #fff; font-weight: 800; font-size: var(--t-m); letter-spacing: 0.02em; }
@media (max-width: 599px) { .st-cr-row { grid-template-columns: 1fr auto; } .st-cr-k { grid-column: 1 / -1; } .st-cr .cyc { font-size: var(--t-m); } }
html.reduced .st-cr .cyc { justify-content: flex-start; }

/* hub */
.st-pillars { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.st-pillars > .b > a { display: flex; flex-direction: column; height: 100%; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; transition: border-color var(--spring-snappy-dur) var(--spring-snappy); }
.st-pillars > .b > a:hover { border-color: var(--accent-deep); }
.st-pn { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-pillars .tag { margin-top: var(--s-3); }
.st-pq { display: block; margin-top: var(--s-2); font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.st-ph { display: block; margin-top: var(--s-3); color: var(--ink-2); }
.st-pgo { margin-top: auto; padding-top: var(--s-5); font-weight: 700; color: var(--accent-deep); }
.st-doors { max-width: 900px; margin: var(--s-7) auto 0; }
.st-door-l { list-style: none; margin: 0; padding: var(--s-3) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.st-door-l > .b > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem; border: 1px solid var(--night-line); border-radius: 8px; background: var(--night-2); color: var(--on-night); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.st-door-l > .b > a:hover { border-color: var(--accent); }
.st-doors a.node { text-decoration: none; }
.st-doors a.node-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 599px) { .st-door-l > .b > a { font-size: var(--t-xs); padding-inline: 0.6rem; } }

/* point of view */
.st-pov-list { list-style: none; padding: 0; margin: var(--s-7) 0 0; }
.st-pov-list > li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-4); align-items: baseline; padding-block: var(--s-6); border-top: 1px solid var(--line); }
.st-pov-list b { font-size: var(--t-l); font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.st-pov-list p { margin: 0; max-width: none; font-size: clamp(1.6rem, 0.95rem + 2.7vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; }
@media (max-width: 599px) { .st-pov-list > li { grid-template-columns: 2.6rem 1fr; } }
.st-close { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-close > .b { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; }
.st-close > .b:last-child { background: var(--accent-deep); }

/* Your AI: the darkest screen of the site */
.st-yours { background: #10141d; }
.st-ya-h { font-size: clamp(2.6rem, 1.3rem + 5.2vw, 7.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; }
.st-ya-list { margin-top: var(--s-8); }
.st-ya-list li { font-size: clamp(1.9rem, 1rem + 3.6vw, 4.6rem); }
.st-sig { margin-top: var(--s-9); }
.st-sig .rise { display: inline-flex; align-items: center; gap: 0.7rem; }
.st-sig img { width: 121px; height: 44px; }
.st-sig-t { font-size: var(--t-m); font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-night); }

/* next decision */
.st-next { padding-block: var(--s-8); }
.st-nx { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.st-nx > .b > a { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; transition: border-color var(--spring-snappy-dur) var(--spring-snappy); }
.st-nx > .b > a:hover { border-color: var(--accent-deep); }
.st-nx-q { font-size: var(--t-m); font-weight: 700; line-height: 1.25; }
.st-nx-go { margin-top: auto; font-weight: 700; color: var(--accent-deep); }
.st-nx > .st-nx-cio > a { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.st-nx > .st-nx-cio .tag, .st-nx > .st-nx-cio .st-nx-go { color: var(--accent); }
.st-nx-all { margin-top: var(--s-5); }
.st-nx-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent-deep); }

/* questions moving sideways with the scroll (home + hub) */
.qm-sec { overflow: clip; }
.qm { display: grid; gap: var(--s-3); margin-block: var(--s-7); }
.qm-row { display: flex; gap: var(--s-3); width: max-content; padding-inline: var(--gutter); }
.qm-q { white-space: nowrap; padding: 0.5rem 1.25rem; border: 1.5px solid var(--night-line); border-radius: 999px; font-size: clamp(1.3rem, 0.9rem + 1.8vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--on-night); }
.qm-q:nth-child(4n + 2) { border-color: var(--accent); color: var(--accent); }
.qm-lede { margin-top: 0; }
html.reduced .qm-row { width: auto; flex-wrap: wrap; }
html.reduced .qm-q.dup { display: none; }

/* ---------- CIO Question Explorer ---------- */
.qx-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.qx-chip { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; padding: 0 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--spring-snappy-dur) var(--spring-snappy), border-color var(--spring-snappy-dur) var(--spring-snappy); }
.qx-chip b { font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.qx-chip:hover { border-color: var(--accent-deep); }
.qx-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.qx-chip[aria-pressed="true"] b { color: var(--on-night-2); }
.qx-count { margin-top: var(--s-4); font-size: var(--t-s); color: var(--ink-2); }
.qx-g { margin-top: var(--s-8); }
.qx-gh { padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); font-size: var(--t-l); letter-spacing: -0.03em; }
.qx-gh b { color: var(--accent-deep); margin-right: 0.35em; }
.qx-q { border-bottom: 1px solid var(--line); }
.qx-h { margin: 0; font-size: inherit; letter-spacing: normal; line-height: inherit; font-weight: inherit; }
.qx-btn { display: grid; grid-template-columns: 3rem 1fr 2rem; align-items: center; gap: var(--s-4); width: 100%; min-height: 44px; padding: var(--s-5) 0; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.qx-n { font-size: var(--t-s); font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.qx-t { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.qx-btn:hover .qx-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.qx-i { position: relative; justify-self: end; width: 18px; height: 18px; }
.qx-i::before, .qx-i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.qx-i::after { transform: rotate(90deg); }
.qx-q.open .qx-i::after { transform: rotate(0deg); }
.qx-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--spring-default-dur) var(--spring-default), visibility 0s linear var(--spring-default-dur); }
.qx-q.open .qx-a, html:not(.js) .qx-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--spring-default-dur) var(--spring-default), visibility 0s; }
.qx-in { overflow: hidden; min-height: 0; }
.qx-path { list-style: none; margin: 0 0 var(--s-7) calc(3rem + var(--s-4)); padding: 0; border-left: 2px solid var(--accent); }
.qx-s { position: relative; display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-2) var(--s-5); padding: 0 0 var(--s-5) var(--s-5); }
.qx-s::before { content: ""; position: absolute; left: -6px; top: 0.35em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-deep); }
.qx-s:last-child { padding-bottom: 0; }
.qx-k { margin: 0; padding-top: 0.1em; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.qx-s > p:not(.qx-k), .qx-short p { margin: 0; max-width: 68ch; color: var(--ink-2); }
.qx-short { grid-template-columns: 12rem 1fr; }
.qx-short p + p { grid-column: 2; margin-top: var(--s-3); }
.qx-short p:nth-child(2) { color: var(--ink); }
.qx-fw ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.qx-fw li { position: relative; padding-left: 1.1rem; font-weight: 600; }
.qx-fw li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--accent-deep); }
.qx-s > .qx-pv { color: var(--ink); font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; max-width: 32ch; }
.qx-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.qx-chain > li { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 600; font-size: var(--t-s); }
.qx-chain > li:last-child { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.qx-chain > .qx-ln { width: 16px; min-height: 0; height: 2px; padding: 0; border: 0; border-radius: 0; background: var(--accent); }
.qx-go::before { display: none; }
.qx-go .link-more { grid-column: 2; margin-top: 0; }
.qx-behind { margin-top: var(--s-9); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
@media (max-width: 699px) {
  .qx-btn { grid-template-columns: 2.2rem 1fr 1.5rem; gap: var(--s-3); }
  .qx-path { margin-left: 0.4rem; }
  .qx-s, .qx-short { grid-template-columns: 1fr; }
  .qx-short p + p, .qx-go .link-more { grid-column: 1; }
}

/* the shared taxonomy line: Fabric · Builder · Atlas say the same thing on every page */
.tax { margin-top: var(--s-5); font-size: var(--t-s); font-weight: 600; color: var(--ink); max-width: 52ch; }
.tax strong { margin-right: 0.6em; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); }
.night .tax { color: var(--on-night); }
.night .tax strong { color: var(--accent); }
.graph-chain > .b.node-brand { letter-spacing: 0.24em; }
#atlas .h2 { font-size: clamp(2rem, 1.3rem + 2.1vw, 3.3rem); }
.night .st-fw-a { color: var(--accent-soft); } /* tonal step of the accent: AA on the night-2 cards */
.st-door-l > .b > a, .st-doors a.node { min-height: 44px; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); }
.hero-act .tax { margin: 0; flex: 1 1 22rem; }

@media (max-width: 599px) {
  .st-yours { padding-block: var(--s-8); }
  .st-ya-list { margin-top: var(--s-6); }
  .st-sig { margin-top: var(--s-7); }
  .st-final .doors { margin-bottom: var(--s-8); }
}
@media (max-width: 599px) {
  .st-grid5 { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .st-grid5 .st-card { padding: var(--s-4); }
  .st-grid5 .st-card h3 { font-size: var(--t-m); }
  .st-grid5 .st-card p:not(.tag) { margin-top: var(--s-2); font-size: var(--t-xs); }
}
.night .st-verbs h3 { color: var(--accent-soft); }

/* cases v3 (content by industry): text atoms inside the existing chapter and card layout */
#cs-intro { padding-top: var(--s-9); }
.cs-note { margin-top: var(--s-6); max-width: 70ch; font-size: var(--t-s); color: var(--on-night-2); }
.cs-tagline { margin-top: var(--s-5); max-width: 40ch; font-size: var(--t-l); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--on-night); }
.cs-card .tag { margin: 0; }
.cs-k { margin: var(--s-3) 0 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
.cs-q { margin: 0; font-size: var(--t-m); font-weight: 700; color: var(--on-night); }
.cs-strong { color: var(--on-night); }
.cs-caps, .cs-list { list-style: none; margin: 0; padding: 0; }
.cs-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-caps li { padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--on-night); font-weight: 600; font-size: var(--t-s); }
.cs-list { display: grid; gap: 0.4rem; }
.cs-list li { position: relative; padding-left: 1.1rem; color: var(--on-night); }
.cs-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--accent); }
.cs-cio li { color: var(--on-night-2); }
.cs-built { margin-top: var(--s-5); max-width: 90ch; color: var(--on-night-2); font-size: var(--t-s); }
.cs-built .cs-k { display: block; margin: 0 0 var(--s-2); color: var(--accent); }
.cs-go { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.cs-go .link-more { margin-top: var(--s-5); color: var(--accent); }
.cs-card .tag { color: var(--accent-soft); }
@media (max-width: 599px) { .cs-ind-head { display: block; max-width: 100%; } .cs-ind-head .h2 { font-size: clamp(2rem, 1rem + 6.6vw, 2.75rem); overflow-wrap: anywhere; } }

/* AI Transformation Blueprint: the Builder agent embedded in a frame with the chat guide's navy bar */
.st-diag-go { margin-top: var(--s-6); }
.st-diag-go .btn { display: inline-flex; align-items: center; gap: 0.4em; }
.st-app .st-frame { margin: var(--s-7) 0 0; border: 1px solid var(--line); border-radius: 14px; overflow: clip; background: #fff; box-shadow: 0 30px 60px -24px rgb(27 32 45 / 0.35); }
.st-frame-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; background: var(--night); color: var(--on-night); font-size: var(--t-s); }
.st-frame-bar b { font-weight: 700; }
.st-frame-bar span:not(.st-frame-dot) { color: var(--on-night-2); }
.st-frame-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.st-frame-bar a { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-soft); font-weight: 600; text-decoration: none; }
.st-frame-bar a:hover { text-decoration: underline; }
.st-frame iframe { display: block; width: 100%; height: min(78vh, 760px); min-height: 560px; border: 0; background: var(--paper); }
.st-frame-note { margin-top: var(--s-4); font-size: var(--t-s); color: var(--ink-2); }
.st-diag .st-diag-go { margin-top: var(--s-6); }
.mm-l .mm-sub a { padding-left: calc(var(--s-3) + 14px); }
.mm-l .mm-sub .mm-q { font-weight: 700; color: var(--accent-deep); }
html[data-tema="dark"] .mm-l .mm-sub .mm-q { color: var(--accent-soft); }
.mm-l .mm-sub .mm-k::before { content: "↳ "; }
@media (min-width: 1180px) { .mm-l { grid-auto-flow: column; grid-template-rows: repeat(4, auto); } }
.qm-doors { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-act .hero-diag { margin-top: 0; }
.night .hero-diag { color: var(--accent-soft); }

/* ---------- partners (/partners/, /partners/cisco/, /partners/outsystems/ and PT) ---------- */
.mm-s .mm-p { right: -3rem; width: min(440px, 92vw); }
.mm-s .mm-l { grid-template-columns: 1fr; }
@media (min-width: 1180px) { .mm-s .mm-l { grid-auto-flow: row; grid-template-rows: none; } }

.pt-hero h1 { max-width: 18ch; }
.pt-doors { margin-top: var(--s-6); }
.pt-logos { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.pt-logos img { display: block; height: 30px; width: auto; }
.pt-logos li:first-child img { height: 40px; }

.lockup { display: flex; align-items: center; gap: var(--s-5); margin: 0 0 var(--s-7); }
.lockup img { height: 44px; width: auto; }
.lockup img + .lockup-x + img[alt="Cisco"] { height: 52px; }
.lockup-x { font-size: var(--t-l); font-weight: 300; color: var(--on-night-2); }
@media (max-width: 599px) { .lockup img { height: 34px; } .lockup img + .lockup-x + img[alt="Cisco"] { height: 40px; } .lockup { gap: var(--s-4); } }

/* hub: three tiers */
.tiers { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--s-7); }
.tiers > .ln.v { height: 36px; margin-inline: auto; }
.tier { display: grid; gap: var(--s-3) var(--s-6); padding: var(--s-6); border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); align-items: center; }
.tier-onni { background: var(--accent-deep); border-color: var(--accent-deep); }
.tier-k { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); }
.tier-onni .tier-k, .tier-onni .tier-say { color: #fff; }
.tier-who { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.tier-who img { height: 34px; width: auto; }
.tier-who-3 img[alt="Cisco"] { height: 40px; } .tier-who-3 img[alt="NVIDIA"] { height: 20px; } .tier-who-3 img[alt="Splunk"] { height: 26px; }
.tier-do { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tier-do li, .tier-do a { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--night-line); font-weight: 600; font-size: var(--t-s); color: var(--on-night); }
.tier-do li:has(a) { padding: 0; border: 0; }
.tier-do a { min-height: 44px; border-color: rgb(255 255 255 / 0.5); color: #fff; text-decoration: none; transition: background-color var(--spring-snappy-dur) var(--spring-snappy); }
.tier-do a:hover { background-color: rgb(255 255 255 / 0.12); }
.tier-say { margin: 0; color: var(--on-night-2); font-size: var(--t-m); max-width: 52ch; }
@media (min-width: 900px) {
  .tier { grid-template-columns: 220px 1fr; grid-template-areas: "k do" "who say"; }
  .tier-k { grid-area: k; } .tier-who { grid-area: who; } .tier-do { grid-area: do; } .tier-say { grid-area: say; }
}

/* hub: partner cards */
.pcards { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 900px) { .pcards { grid-template-columns: 1fr 1fr; } }
.pcard { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.pcard-logo { height: 44px; width: auto; align-self: flex-start; margin-bottom: var(--s-3); }
.pcard h3 { font-size: var(--t-l); letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.pcard-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; color: var(--ink-2); }
.pcard-l li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.pcard-go { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--accent-deep); font-size: var(--t-m); }

/* cisco: four questions */
.sq { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .sq { grid-template-columns: 1fr 1fr; } }
.sq .b { display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sq strong { font-size: var(--t-l); letter-spacing: -0.03em; line-height: 1.1; }
.sq .sq-a { display: block; padding-top: var(--s-3); border-top: 2px solid var(--accent); color: var(--ink-2); font-size: var(--t-m); }

/* cisco: architecture stack, the Onni layer carries the accent */
.ly-onni { border-color: var(--accent); }
.ly-onni strong { color: var(--accent-soft); }
.ly-onni.on { background: var(--accent-deep); border-color: var(--accent-deep); }
.ly-onni.on strong, .ly-onni.on span { color: #fff; }

/* cisco: planning → service */
.steps5 > .b { gap: var(--s-3); min-height: 52px; padding: 0.6rem 1.1rem; font-size: var(--t-m); }
.steps5 > .b b { font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--accent-deep); }
.steps5 > .b.node-accent b { color: #fff; }
.steps5 > .ln.v { height: 22px; }

/* cisco: one platform, many services */
.ind-night .ind-frame { background: var(--night-2); border-color: var(--night-line); height: 360px; }
.ind-night .ind-index li { border-left-color: var(--night-line); color: var(--on-night-2); }
.ind-night .ind-index li.on { color: var(--on-night); border-left-color: var(--accent); }
.ind-night .sw { gap: var(--s-4); }
.ind-night .sw .tag { color: var(--accent-soft); }
.ind-night .sw h3 { font-size: var(--t-xl); line-height: 1.02; margin: 0; max-width: 18ch; }
.sv-l { margin: 0; color: var(--on-night-2); font-size: var(--t-m); max-width: 60ch; }
@media (max-width: 899px) { .ind-night .ind-frame { height: 400px; } .ind-night .sw h3 { font-size: var(--t-l); } }
.shared { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.shared .b { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--accent); font-weight: 600; font-size: var(--t-s); }

/* cisco: service catalog + management band */
.cat { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .cat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cat { grid-template-columns: repeat(5, 1fr); } }
.cat .b { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.cat strong { font-size: var(--t-m); line-height: 1.2; }
.cat span { font-size: var(--t-s); color: var(--ink-2); }
.cat .cat-onni { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.cat .cat-onni span { color: #fff; }
.cat-band-w { margin-top: var(--s-4); }
.cat-band { display: block; padding: var(--s-5); border-radius: 12px; border: 1.5px dashed var(--accent-deep); }
.cat-band-k { margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.cat-band ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cat-band li { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border-radius: 8px; background: var(--paper-2); font-weight: 600; font-size: var(--t-s); }

/* cisco: results */
.gains { list-style: none; padding: 0; margin: 0 0 var(--s-9); display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .gains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gains { grid-template-columns: repeat(4, 1fr); } }
.gains .b { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) var(--s-5); border-top: 2px solid var(--accent); background: var(--night-2); border-radius: 0 0 12px 12px; }
.gains strong { font-size: var(--t-l); letter-spacing: -0.03em; line-height: 1.1; }
.gains span { color: var(--on-night-2); }
.pt-end { font-size: var(--t-xxl); line-height: 0.98; }

/* outsystems: logos inside the two-halves panels */
.ts-name .ts-logo { display: block; height: clamp(40px, 30px + 2vw, 55px); width: auto; }

/* outsystems: the flow pin */
.fl-in { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--s-5); }
.fl-grid { flex: 1; display: grid; gap: var(--s-6); min-height: 0; }
@media (min-width: 900px) { .fl-grid { grid-template-columns: 5fr 6fr; align-items: center; } }
.fl { position: relative; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
html.js:not(.reduced) .fl .b { clip-path: inset(0 100% 0 0); }
html.js:not(.reduced) .fl .ln { clip-path: inset(0 0 100% 0); }
.fl > .b { display: grid; gap: 2px; min-width: min(420px, 100%); padding: 0.6rem 1.1rem; border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); font-weight: 700; font-size: var(--t-m); letter-spacing: -0.01em; }
.fl-who { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); }
.fl > .fl-os { border-color: var(--on-night-2); border-style: dashed; }
.fl > .fl-os .fl-who { color: var(--on-night); }
.fl > .b.node-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.fl > .b.node-accent .fl-who { color: #fff; }
.fl > .ln.v { height: 18px; margin-left: 28px; }
@media (max-width: 899px) { .fl > .b { padding: 0.3rem 0.7rem; min-width: 0; font-size: var(--t-s); } .fl > .ln.v { height: 8px; margin-left: 20px; } .fl-who { display: none; } .fl-detail { min-height: 250px; } }

/* outsystems: component map */
.cmap { margin-top: var(--s-7); }
.cmap-h { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-bottom: var(--s-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.cmap-rows { display: grid; gap: var(--s-3); }
.cmap-r { display: grid; grid-template-columns: 1fr var(--s-8) 1fr; align-items: center; }
.cmap-r .b { display: grid; gap: 0.2rem; height: 100%; padding: var(--s-4) var(--s-5); border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-s); }
.cmap-r .b strong { color: var(--ink); font-size: var(--t-m); }
.cmap-r .b:last-child { background: var(--paper-2); }
@media (max-width: 699px) {
  .cmap-h { display: none; }
  .cmap-r { grid-template-columns: 1fr; }
  .cmap-r .ln.h { width: 2px; height: 16px; margin-left: 24px; }
  .cmap-r .b:first-child::before { content: "Onni"; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
  .cmap-r .b:last-child::before { content: "OutSystems"; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
}
.th-k { color: var(--on-night-2); margin-bottom: var(--s-6); }
@media (max-width: 899px) { .fl-grid { align-content: start; gap: var(--s-5); } .fl-in .ly-h { margin-bottom: var(--s-4); } }
/* partner pins: whole-pixel metrics, so every row of the pinned stack sits on a whole pixel (same raster from any scroll history) */
:is([data-layers], #os-flow) .ly-h { line-height: 36px; margin-bottom: 24px; }
@media (max-width: 899px) { :is([data-layers], #os-flow) .ly-h { line-height: 26px; margin-bottom: 16px; } }
:is([data-layers], #os-flow) :is(.ly-grid, .fl-grid) { align-items: start; align-content: start; padding-top: 16px; }
[data-layers] .ly { padding: 9px 14px; gap: 2px; }
[data-layers] .ly strong { line-height: 20px; } [data-layers] .ly span { line-height: 18px; }
#os-flow .fl > .b { padding: 9px 16px; line-height: 24px; } #os-flow .fl-who { line-height: 14px; }
@media (max-width: 899px) { #os-flow .fl > .b { padding: 5px 10px; line-height: 20px; } }

/* round p2: sectors pin, cards whose text rises after the box, the closing loop of the OutSystems flow */
#many .stage { padding-top: 76px; }
.many-in { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--s-5); }
.many-in .h2 { margin-bottom: 0; }
.many-in .ind { margin-top: var(--s-6); }
@media (max-width: 899px) {
  .ind-night { gap: var(--s-3); margin-top: var(--s-4); }
  .ind-night .ind-index { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .ind-night .ind-index li { padding: 0.3rem 0.7rem; border: 1px solid var(--night-line); border-radius: 999px; font-size: var(--t-xs); }
  .ind-night .ind-index li.on { border-color: var(--accent); background: #22314d; }
  .ind-night .ind-frame { height: 330px; }
}
@media (max-width: 767px) { .many-in { justify-content: flex-start; padding-top: var(--s-4); } }
html.reduced .many-in { height: auto; }
.cmap-r .b > span { display: block; }
.fl-w { min-width: 0; }
.fl-back { position: absolute; left: calc(min(420px, 100%) + 14px); top: 30px; bottom: 30px; width: 22px; border: 2px solid var(--accent); border-left: 0; border-radius: 0 12px 12px 0; }
.fl-back::before { content: ""; position: absolute; left: -7px; top: -6px; border: 5px solid transparent; border-right: 7px solid var(--accent); }
html.js:not(.reduced) .fl-back { clip-path: inset(100% -4px -4px -4px); }
.fl-back-l { margin: var(--s-4) 0 0; font-weight: 700; color: var(--accent-soft); font-size: var(--t-m); }
@media (max-width: 899px) { #os-flow .fl > .b { min-width: 240px; } .fl-back { left: 252px; top: 18px; bottom: 18px; width: 16px; } .fl-back-l { margin-top: var(--s-2); font-size: var(--t-s); } }
@media (min-width: 768px) { :is([data-layers], #os-flow) :is(.ly-grid, .fl-grid) { padding-top: max(16px, round(down, calc((100svh - 720px) / 2), 1px)); } .fl-grid { grid-template-columns: 5fr 6fr; align-items: start; } }
@media (min-width: 768px) and (max-width: 899px) { [data-layers] .ly-grid { grid-template-columns: 5fr 6fr; } }
@media (max-width: 1099px) { .gains { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .gains .b { padding: var(--s-5) var(--s-4); } .gains strong { font-size: var(--t-m); } .gains span { font-size: var(--t-s); } }

/* reduced motion: the partner pins become one column; their captions sit in a grid under the stack or flow */
html.reduced :is([data-layers], #os-flow) :is(.ly-grid, .fl-grid) { grid-template-columns: 1fr; padding-top: 16px; }
html.reduced :is([data-layers], #os-flow) .ly-detail { display: grid; gap: var(--s-6); overflow: visible; }
@media (min-width: 768px) { html.reduced :is([data-layers], #os-flow) .ly-detail { grid-template-columns: repeat(2, 1fr); } }
html.reduced :is([data-layers], #os-flow) .ly-detail .sw { margin: 0; }
html.reduced .fl-back { clip-path: none; }

/* hub: the tiers build inside a pin */
#plug .stage { padding-top: 76px; }
.plug-in { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--s-5); }
.plug-in .h2 { margin-bottom: 0; }
.plug-in .lede { margin-top: var(--s-3); }
.plug-in .tiers { margin-top: var(--s-5); }
.plug-in .tiers > .ln.v { height: 20px; }
.plug-in .tier { padding: var(--s-4) var(--s-5); }
.plug-in .pull { margin-top: var(--s-5); }
html.js:not(.reduced) #plug .tiers .b { clip-path: inset(0 100% 0 0); }
html.js:not(.reduced) #plug .tiers .ln { clip-path: inset(0 0 100% 0); }
@media (max-width: 767px) { .plug-in { justify-content: flex-start; padding-top: var(--s-4); } }
@media (max-width: 899px) {
  .plug-in .h2 { font-size: var(--t-l); }
  .plug-in .lede { font-size: var(--t-s); }
  .plug-in .tier { padding: var(--s-3) var(--s-4); gap: var(--s-2); }
  .plug-in .tier-say { display: none; }
  .plug-in .tier-who img { height: 24px; } .plug-in .tier-who-3 img[alt="Cisco"] { height: 30px; } .plug-in .tier-who-3 img[alt="NVIDIA"] { height: 15px; } .plug-in .tier-who-3 img[alt="Splunk"] { height: 20px; }
  .plug-in .tier-do li, .plug-in .tier-do a { min-height: 30px; padding: 0.15rem 0.6rem; font-size: var(--t-xs); }
  .plug-in .tier-do li:has(a) { padding: 0; } .plug-in .tier-do a { min-height: 44px; }
  .plug-in .tiers > .ln.v { height: 12px; }
  .plug-in .pull { font-size: var(--t-m); }
}
html.reduced .plug-in { height: auto; }
@media (min-width: 900px) {
  .plug-in .h2 { font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem); }
  .plug-in .tier { grid-template-columns: 220px minmax(0, 0.9fr) minmax(0, 1fr); grid-template-areas: "k do say" "who do say"; gap: var(--s-1) var(--s-6); }
  .plug-in .tier-say { font-size: var(--t-s); }
}

/* round p4: phones keep every line; 768 pins centred; the flow caption leads on phones */
@media (max-width: 767px) {
  .fl-grid > .fl-detail { order: -1; min-height: 300px; }
  .fl-grid { gap: var(--s-3); }
  .ind-night .ind-frame { height: 290px; }
  .ind-night .sw { padding: var(--s-5); }
  .many-in .ind { margin-top: var(--s-4); }
  .shared { margin-top: var(--s-3); gap: 6px; }
  .shared .b { min-height: 30px; padding: 0.2rem 0.6rem; font-size: var(--t-xs); }
}
@media (min-width: 768px) and (max-width: 1023px) { #os-flow .fl > .b { font-size: var(--t-s); } }
.pt-ts-left { text-align: left; }

/* round p5: hero ribbon on the partner heroes */
.pt-hero { position: relative; overflow: clip; }
.pt-hero > .wrap { position: relative; z-index: 1; }
.wave-pt { right: 0; top: 16%; width: 40%; height: 50%; }
.paper .wave-pt circle { fill: var(--ink); }
@media (max-width: 899px) { .pt-hero { padding-bottom: calc(var(--s-9) + 22vh); } .wave-pt { left: 0; right: 0; width: 100%; top: auto; bottom: 4vh; height: 20vh; } }
html.reduced .wave-pt { display: none; }

/* cisco: observability of managed services (Splunk) */
#obs .stage { padding-top: 76px; }
.obs-in { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--s-5); }
.obs-k { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.obs-k img { height: 22px; width: auto; }
.obs-h { font-size: clamp(1.6rem, 1rem + 2.2vw, 3.25rem); line-height: 1.05; margin: 0 0 var(--s-6); }
.obs-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .obs-grid { grid-template-columns: 7fr 5fr; align-items: center; } }
.obs-map { display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "rows core" "inc inc" "outs outs"; gap: var(--s-4) var(--s-3); align-items: center; }
.obs-rows { grid-area: rows; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.obs-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: var(--s-3); }
.obs-src { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--night-line); background: var(--night-2); font-weight: 600; font-size: var(--t-s); }
.obs-row.on .obs-src { border-color: var(--accent); color: var(--accent-soft); }
.obs-track { position: relative; height: 2px; background: var(--night-line); }
.obs-row.on .obs-track { background: var(--accent); }
.obs-dot { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.obs-core { grid-area: core; display: grid; gap: 6px; justify-items: center; padding: var(--s-5) var(--s-3); border-radius: 14px; border: 1.5px solid var(--night-line); background: var(--night-2); text-align: center; }
.obs-core img { height: 28px; width: auto; }
.obs-core span { font-size: var(--t-xs); color: var(--on-night-2); font-weight: 600; }
.obs-core.on { border-color: var(--accent); }
.obs-inc { grid-area: inc; position: relative; margin: 0; height: 40px; overflow: clip; border-radius: 999px; border: 1.5px dashed var(--accent); font-weight: 700; font-size: var(--t-s); }
.obs-inc.ok { border-style: solid; background: #22314d; }
.obs-inc span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--s-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-inc-b { color: var(--accent-soft); }
.obs-outs { grid-area: outs; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.obs-out { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 6px 10px; border-radius: 10px; background: var(--accent-deep); color: #fff; font-weight: 700; font-size: var(--t-s); }
.obs-detail { min-height: 240px; }
html.js:not(.reduced) .obs-inc, html.js:not(.reduced) .obs-out { clip-path: inset(0 100% 0 0); }
html.reduced .obs-in { height: auto; } html.reduced .obs-dot, html.reduced .obs-inc-a { display: none; } html.reduced .obs-inc span { position: static; }
@media (max-width: 899px) {
  .obs-in { justify-content: flex-start; padding-top: var(--s-3); }
  .obs-h { margin-bottom: var(--s-4); }
  .obs-map { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s-3) var(--s-2); }
  .obs-row { grid-template-columns: 128px 1fr; gap: var(--s-2); }
  .obs-src { min-height: 30px; padding: 0 8px; font-size: var(--t-xs); }
  .obs-core { padding: var(--s-3) 6px; } .obs-core img { height: 20px; }
  .obs-inc { height: 36px; font-size: var(--t-xs); }
  .obs-outs { grid-template-columns: repeat(2, 1fr); } .obs-out { min-height: 40px; font-size: var(--t-xs); }
  .obs-detail { min-height: 210px; }
  .obs-detail h3 { font-size: var(--t-l); }
}
/* outsystems: the signal that walks the flow */
.fl-sig { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--accent); z-index: 3; }
html.reduced .fl-sig { display: none; }

/* proof: bigger numbers need a tighter scale; the roles Fabric maps push through one slot */
.counters dd { font-size: clamp(1.7rem, 0.9rem + 3.2vw, 4.5rem); }
.roles { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-6); }
.roles-k { margin: 0; color: var(--on-night-2); font-weight: 600; font-size: var(--t-m); }
.roles-cyc { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); min-width: 10ch; color: var(--accent); }
.roles-cyc .cy { text-align: left; }
@media (max-width: 599px) { .roles { flex-direction: column; align-items: flex-start; } .roles-cyc { min-width: 0; width: 100%; } }
html.reduced .roles-cyc { justify-content: flex-start; font-size: var(--t-l); }

/* consent banner (analytics.js) and footer links */
.consent { position: fixed; z-index: 80; left: var(--gutter); bottom: var(--gutter); width: min(440px, calc(100vw - 2 * var(--gutter))); padding: var(--s-5); border-radius: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -24px rgb(27 32 45 / 0.45); }
.consent[hidden] { display: none; }
.consent-t { margin: 0 0 var(--s-2); font-weight: 800; font-size: var(--t-m); }
.consent-p { margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--t-s); }
.consent-p a { color: var(--accent-deep); }
.consent-b { display: flex; gap: var(--s-2); }
.consent-b .btn { flex: 1; justify-content: center; }
.foot-link { padding: 0; min-height: 44px; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-copy a { color: inherit; }
html:not(.tracking) [data-consent-open] { display: none; }
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--t-l); margin: var(--s-7) 0 var(--s-3); letter-spacing: -0.03em; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.legal .legal-note { padding: var(--s-4); border-left: 3px solid var(--accent-deep); background: var(--paper-2); color: var(--ink); }

/* ---------- content architecture (make_seo.py): questions, industries, insights, articles, authors ---------- */
.art { max-width: 820px; }
.art-hero .art-h { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.25rem); line-height: 1.02; max-width: 22ch; margin-bottom: var(--s-5); }
.art-hero .art-h em { color: var(--accent-deep); }
.art-hero .eyebrow a { color: inherit; }
.art-sec { padding-block: var(--s-9); }
.art-h2 { font-size: var(--t-l); letter-spacing: -0.03em; line-height: 1.15; margin: var(--s-7) 0 var(--s-4); }
.art-sec .wrap > .art-h2:first-child, .art-sec .art > .art-h2:first-child { margin-top: 0; }
.art-h2-n { color: var(--on-night); }
.art-k { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 var(--s-3); }
.art-body p, .art-lede { font-size: var(--t-m); line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.art-short { margin-top: var(--s-6); padding: var(--s-6); border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.art-short p { color: var(--ink); }
.night .art-lede, .art-lede.on-night { color: var(--on-night-2); }
.art-big { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; max-width: 34ch; margin: 0; }
.art-pr { margin-top: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
.art-fw, .art-caps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.art-fw .b { padding: var(--s-4) var(--s-5); border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: var(--t-m); }
.art-caps { display: flex; flex-wrap: wrap; margin-top: var(--s-4); }
.art-caps .b { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--accent); font-weight: 600; font-size: var(--t-s); }
.art-note { margin-top: var(--s-3); font-size: var(--t-s); color: var(--ink-2); }
.art-qs, .art-built { padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-m); }
.art-fig { margin: var(--s-7) 0 0; border-radius: var(--radius); overflow: clip; }
.art-fig img { display: block; width: 100%; height: auto; }
.art-links { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-2); }
.art-links-3 { margin-top: var(--s-6); }
@media (min-width: 900px) { .art-links-3 { grid-template-columns: repeat(3, 1fr); } }
.art-links a { display: grid; gap: 0.2rem; height: 100%; padding: var(--s-4) var(--s-5); border-radius: 10px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--spring-snappy-dur) var(--spring-snappy); }
.art-links a:hover { border-color: var(--accent-deep); }
.art-lk-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.art-lk-t { font-weight: 700; font-size: var(--t-m); line-height: 1.3; }
.art-by { margin: 0; color: var(--ink-2); font-size: var(--t-s); }
.art-by a, .art-part a { color: var(--accent-deep); font-weight: 600; }
.art-src { padding-left: 1.4em; display: grid; gap: var(--s-2); font-size: var(--t-s); color: var(--ink-2); }
.art-src a { color: var(--accent-deep); word-break: break-word; }
.art-part { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); font-weight: 600; }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-l); letter-spacing: -0.03em; margin: var(--s-7) 0 var(--s-3); }
.prose h3 { font-size: var(--t-m); margin: var(--s-6) 0 var(--s-2); }
.prose p, .prose li { font-size: var(--t-m); line-height: 1.65; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose a { color: var(--accent-deep); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 3px solid var(--accent-deep); }
.prose blockquote p { font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }
.prose img { width: 100%; height: auto; border-radius: var(--radius); }
.prose code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 4px; background: var(--paper-2); }
/* industries hub */
.ind-grid { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .ind-grid { grid-template-columns: 1fr 1fr; } }
.art-sec .wrap.art:has(.ind-grid), .art-sec .wrap.art:has(.flt) { max-width: none; }
.ind-card { display: grid; gap: var(--s-2); height: 100%; padding-bottom: var(--s-5); border-radius: 14px; overflow: clip; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--spring-snappy-dur) var(--spring-snappy); }
.ind-card:hover { border-color: var(--accent-deep); }
.ind-card img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
.ind-card-k, .ind-card-t, .ind-card-d { padding-inline: var(--s-5); }
.ind-card-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); margin-top: var(--s-2); }
.ind-card-t { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; }
.ind-card-d { color: var(--ink-2); }
/* insights hub: filter by type */
.flt-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.flt-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--spring-snappy-dur) var(--spring-snappy); }
.flt-chip b { font-weight: 700; color: var(--ink-2); }
.flt-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.flt-chip[aria-pressed="true"] b { color: var(--accent-soft); }
.ins-list { list-style: none; padding: 0; margin: 0 0 var(--s-7); display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .ins-list { grid-template-columns: repeat(3, 1fr); } }
.ins-item[hidden] { display: none; }
.ins-item a { display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-5); border-radius: 12px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--spring-snappy-dur) var(--spring-snappy); }
.ins-item a:hover { border-color: var(--accent-deep); }
.ins-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.ins-t { font-size: var(--t-m); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.ins-d { font-size: var(--t-s); color: var(--ink-2); }
.site-header .mm-p .mm-all-2 { margin-top: 0; padding-top: var(--s-2); border-top: 0; }
.art-lk-k, .ind-card-k, .ins-k { font-size: var(--t-xs); letter-spacing: 0.08em; }
.prose .tbl { margin: var(--s-6) 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.prose th, .prose td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); text-align: left; }
.prose thead th { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
.prose td { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.prose tbody th { font-weight: 600; color: var(--ink-2); }

/* =====================================================================================
   Onni + OutSystems page (scripts/make_outsystems.py): method (blue) and architecture (OutSystems red) meet at the diagnostic
   ===================================================================================== */
:root { --os: #ff2400; --os-ink: #c81e00; --os-soft: #ff7a5c; }
.ox-page .rail.r { background: var(--os); }
.ox-hero h1 { max-width: 16ch; }
.ox-k b { margin-right: 0.5em; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.night .ox-k b { color: var(--accent); }
.ox-k-a b, .night .ox-k-a b { color: var(--os-soft); }
.paper .ox-k-a b { color: var(--os-ink); }
.ox-a h2 b, .ox-a .ox-wheel-h b { color: var(--os-soft); font-weight: inherit; }
.paper.ox-a h2 b { color: var(--os-ink); }
.ox-who { display: inline-flex; align-items: center; gap: 6px; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; }
.ox-o { color: var(--accent-deep); } .night .ox-o { color: var(--accent-soft); }
.ox-s { color: var(--os-ink); } .night .ox-s { color: var(--os-soft); }
.ox-b { color: var(--ink); background: linear-gradient(90deg, rgb(96 139 193 / 0.18), rgb(255 36 0 / 0.14)); border-color: transparent; }
.night .ox-b { color: var(--on-night); }
.ox-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--t-s); }

/* hero: the three paths */
.ox-paths { display: grid; gap: var(--s-3); margin-top: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ox-path { position: relative; display: grid; gap: 4px; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); border: 1px solid var(--night-line); border-radius: 12px; background: var(--night-2); color: var(--on-night); text-decoration: none; transition: border-color var(--spring-snappy-dur) var(--spring-snappy), transform var(--spring-snappy-dur) var(--spring-snappy); }
.ox-path:hover { transform: translateY(-2px); }
.ox-path-m:hover { border-color: var(--accent); } .ox-path-a:hover { border-color: var(--os); } .ox-path-d:hover { border-color: var(--on-night); }
.ox-path-n { font-size: var(--t-xs); font-weight: 700; color: var(--on-night-2); }
.ox-path strong { font-size: var(--t-l); letter-spacing: -0.03em; }
.ox-path span:not(.ox-path-n) { color: var(--on-night-2); font-size: var(--t-s); }
.ox-path i { position: absolute; right: var(--s-5); top: var(--s-5); font-style: normal; color: var(--on-night-2); }
.ox-path-m::before, .ox-path-a::before, .ox-path-d::before { content: ""; height: 3px; width: 36px; border-radius: 3px; margin-bottom: var(--s-2); }
.ox-path-m::before { background: var(--accent); } .ox-path-a::before { background: var(--os); } .ox-path-d::before { background: linear-gradient(90deg, var(--accent), var(--os)); }

/* sticky chapter navigation: the indicator slides between chapters, the bar fills with the scroll */
.ox-nav { position: sticky; top: 68px; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
html[data-tema="dark"] .ox-nav { background: var(--night); border-color: var(--night-line); }
.ox-nav-in { position: relative; display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.ox-nav a { flex: none; display: inline-flex; align-items: center; gap: 0.45em; min-height: 48px; padding: 0 var(--s-3); font-size: var(--t-s); font-weight: 600; color: var(--ink-2); text-decoration: none; }
html[data-tema="dark"] .ox-nav a { color: var(--on-night-2); }
.ox-nav a b { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.ox-nav a[aria-current="true"] { color: var(--ink); } html[data-tema="dark"] .ox-nav a[aria-current="true"] { color: var(--on-night); }
.ox-ind { position: absolute; left: 0; bottom: 0; height: 3px; width: 100px; border-radius: 3px; background: var(--accent); }
.ox-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--accent) 0 42%, var(--os) 42% 84%, var(--accent) 84%); clip-path: inset(0 100% 0 0); opacity: 0.55; }
html.reduced .ox-prog { display: none; }

/* method */
.ox-answers .ans-yes { color: var(--accent-deep); }
.ox-bars { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.ox-bar { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-5); border-radius: 10px; background: var(--night-2); border: 1px solid var(--night-line); }
.ox-bar b { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ox-bar span { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
.ox-bar-20 { border-color: var(--os); }
.ox-bar-70 { min-height: 190px; align-content: end; background: var(--accent); border-color: var(--accent); color: var(--night); }
.ox-bar-70 b { font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: 0.9; letter-spacing: -0.05em; }
.ox-bar-70 > span:not(.ox-bar-tag) { color: var(--night); }
.ox-bar-tag { margin-left: auto; padding: 0.2rem 0.6rem; border-radius: 999px; letter-spacing: 0.08em !important; }
.ox-tag-s { color: #fff !important; background: var(--os-ink); }
.ox-tag-o { color: #fff !important; background: var(--night); }
.ox-src { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--on-night-2); }
.ox-eq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; }
.ox-eq .ox-x { color: var(--accent-deep); font-weight: 400; }
.ox-eqr { flex-basis: 100%; color: var(--os-ink); }
.ox-eqr i { font-style: normal; margin-right: 0.3em; }
.ox-fails .st-card h3 { font-size: var(--t-m); }
.ox-forces { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 900px) { .ox-forces { grid-template-columns: 1fr 1fr; } }
.ox-force { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); }
.ox-force-o { border-top: 3px solid var(--accent); } .ox-force-s { border-top: 3px solid var(--os); }
.ox-force-logo img { height: 36px; width: auto; display: block; }
.ox-force-role { font-weight: 700; font-size: var(--t-m); }
.ox-force-o .ox-force-role { color: var(--accent-soft); } .ox-force-s .ox-force-role { color: var(--os-soft); }
.ox-force ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ox-force li { padding: var(--s-3) var(--s-4); border-radius: 8px; background: var(--night); border: 1px solid var(--night-line); font-weight: 600; font-size: var(--t-s); }
.ox-split { margin-top: var(--s-7); font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.ox-split b { color: var(--os-soft); font-weight: inherit; }
.ox-pipe { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ox-st { display: grid; gap: 4px; align-content: start; padding: var(--s-4); border-radius: 12px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent); min-height: 170px; }
.ox-st-s { border-top-color: var(--os); }
.ox-st-b { border-image: linear-gradient(90deg, var(--accent), var(--os)) 4 0 0 0 / 4px 0 0 0; border-image-slice: 1; }
.ox-st-n { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.ox-st strong { font-size: var(--t-m); letter-spacing: -0.02em; }
.ox-st > span:not(.ox-st-n):not(.ox-who) { font-size: var(--t-s); color: var(--ink-2); }
.ox-st .ox-who { margin-top: auto; justify-self: start; }
.ox-gov { grid-column: 1 / -1; padding: var(--s-3); border-radius: 10px; background: var(--ink); color: var(--paper); text-align: center; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ox-tight { padding-top: var(--s-6); }
.ox-lab { margin: var(--s-3) 0 2px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.night .ox-lab { color: var(--on-night-2); }
.ox-lab-ind { color: var(--os-ink); } .ox-lab-s { color: var(--os-soft); }
.ox-ind-v { font-weight: 700; color: var(--ink) !important; }
.ox-tl { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ox-tl li { display: grid; gap: 6px; align-content: start; padding: var(--s-5); border-radius: 12px; background: var(--night-2); border: 1px solid var(--night-line); }
.ox-tl-dot { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--on-night-2); font-style: normal; font-weight: 800; font-size: var(--t-s); }
.ox-tl li:nth-child(2) .ox-tl-dot { border-color: var(--os); color: var(--os-soft); }
.ox-tl-hot { border-color: var(--accent) !important; }
.ox-tl-hot .ox-tl-dot { background: var(--accent); border-color: var(--accent); color: var(--night); }
.ox-tl strong { font-size: var(--t-m); }
.ox-tl li > span { color: var(--on-night-2); font-size: var(--t-s); }
.ox-tl-go { margin-top: var(--s-2); font-weight: 700; color: var(--accent-soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ox-roles { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ox-roles li { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: 10px; border: 1px solid var(--night-line); color: var(--on-night-2); font-size: var(--t-s); }
.ox-roles b { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.ox-role-o b { color: var(--accent-soft); } .ox-role-s b { color: var(--os-soft); } .ox-role-c b { color: var(--on-night); }
.ox-cta { margin-top: var(--s-8); padding: var(--s-6); border-radius: 16px; background: var(--paper); color: var(--ink); display: grid; gap: var(--s-3); }
.ox-cta-a { border-top: 4px solid var(--os); } .ox-cta-m { border-top: 4px solid var(--accent); }
.ox-cta-h { font-size: var(--t-l); letter-spacing: -0.03em; }
.ox-cta p { color: var(--ink-2); max-width: 60ch; }
.ox-doors { margin-top: var(--s-3); }
.ox-cta .btn-ghost { color: var(--ink); }
.ox-pdf { margin-left: 0.35em; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; background: var(--os-ink); color: #fff; }

/* architecture · A1 map of today */
.ox-map { position: relative; margin-top: var(--s-6); height: clamp(420px, 46vw, 560px); }
.ox-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ox-map-lines line { stroke: var(--os); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; opacity: 0.75; }
.ox-ini { position: absolute; width: 22%; display: grid; gap: 2px; padding: var(--s-3); border-radius: 10px; background: var(--night-2); border: 1px dashed var(--os); }
.ox-ini strong { font-size: var(--t-s); } .ox-ini > span:last-child { font-size: var(--t-xs); color: var(--on-night-2); }
.ox-q { position: absolute; top: -1.6em; left: 0; font-size: var(--t-xs); font-weight: 700; color: var(--os-soft); white-space: nowrap; }
.ox-legacy { position: absolute; left: 0; right: 0; top: 84%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3%; padding: 0 1.5%; }
.ox-legacy span { padding: var(--s-3) var(--s-2); border-radius: 8px; border: 1px solid var(--night-line); background: var(--night); text-align: center; font-size: var(--t-s); font-weight: 700; }
.ox-legacy .ox-legacy-k { position: absolute; top: -1.9em; left: 1.5%; padding: 0; border: 0; background: none; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-2); }
@media (max-width: 760px) {
  .ox-map { height: auto; display: grid; gap: var(--s-5); padding-top: var(--s-3); }
  .ox-map-lines { display: none; }
  .ox-ini { position: relative; left: auto !important; top: auto !important; width: auto; margin-top: 1.2em; }
  .ox-legacy { position: relative; top: auto; grid-template-columns: repeat(2, 1fr); margin-top: var(--s-5); padding: 0; }
}

/* architecture · A2 wheel (pin) */
#ox-wheel .stage { padding-top: calc(68px + 48px + var(--s-4)); }
.ox-wheel-in { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--s-5); }
.ox-wheel-h { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); letter-spacing: -0.04em; max-width: 30ch; }
.ox-wheel-h em { color: var(--accent); }
.ox-wheel { position: relative; flex: 1; min-height: 0; margin-top: var(--s-4); }
.ox-spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.ox-spokes line { stroke: color-mix(in srgb, var(--accent) calc(var(--g, 0) * 100%), var(--os)); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; opacity: 0.6; }
.ox-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, 38%); aspect-ratio: 2 / 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: var(--s-4); overflow: clip; border: 1.5px dashed var(--os); background: var(--night-2); }
.ox-core > span { grid-area: 1 / 1; font-weight: 700; font-size: var(--t-s); line-height: 1.3; }
.ox-core-good { color: var(--night); }
html.js:not(.reduced) .ox-core-good { visibility: hidden; }
.ox-core.on { border-style: solid; border-color: var(--accent); background: var(--accent); }
.ox-dim { position: absolute; transform: translate(-50%, -50%); width: min(210px, 22%); padding: var(--s-2) var(--s-3); border-radius: 10px; background: var(--night-2); border: 1px solid color-mix(in srgb, var(--accent) calc(var(--k, 0) * 100%), var(--os)); }
.ox-dim strong { display: block; font-size: var(--t-xs); line-height: 1.25; }
.ox-dim-s { position: relative; display: grid; overflow: clip; margin-top: 2px; }
.ox-dim-s > span { grid-area: 1 / 1; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; }
.ox-dim-bad { color: var(--os-soft); text-transform: uppercase; letter-spacing: 0.1em !important; }
.ox-dim-good { color: var(--accent-soft); }
html.js:not(.reduced) .ox-dim-good, html.js:not(.reduced) .ox-core-good { transform: translateY(110%); }
html.reduced .ox-dim-bad, html.reduced .ox-core-bad { display: none; }
html.reduced .ox-dim { border-color: var(--accent); }
html.reduced .ox-core { border: 1.5px solid var(--accent); background: var(--accent); }
@media (max-width: 899px) {
  .ox-wheel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
  .ox-spokes { display: none; }
  .ox-core { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; width: 100%; aspect-ratio: auto; border-radius: 12px; min-height: 56px; }
  .ox-dim { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; }
}

/* architecture · A3 lanes */
.ox-lanes-w { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.ox-lanes { min-width: 980px; display: grid; gap: 6px; }
.ox-lr { display: grid; grid-template-columns: 170px repeat(7, 1fr); gap: 6px; align-items: stretch; }
.ox-lh span { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 0 4px; }
.ox-ln { display: grid; gap: 6px; align-content: center; justify-items: start; padding: var(--s-2) var(--s-3); border-radius: 8px; background: var(--paper-2); font-size: var(--t-xs); font-weight: 700; }
.ox-cell { padding: var(--s-2) var(--s-3); border-radius: 8px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: var(--t-xs); font-weight: 600; line-height: 1.35; }
.ox-lane-s .ox-cell { border-left-color: var(--os); }
.ox-lane-l .ox-cell { border-left-color: var(--ink-2); }
.ox-cell-e { border-radius: 8px; border: 1px dashed var(--line); }
.ox-lgov { padding: var(--s-3); border-radius: 8px; background: var(--ink); color: var(--paper); text-align: center; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* architecture · A4 execution */
.ox-ex { display: grid; gap: var(--s-4); margin-top: var(--s-6); align-items: stretch; }
@media (min-width: 900px) { .ox-ex { grid-template-columns: 1fr 48px 1fr; } }
.ox-ex-side { padding: var(--s-5); border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); }
.ox-ex-o { border-top: 3px solid var(--accent); } .ox-ex-s { border-top: 3px solid var(--os); }
.ox-ex-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); color: var(--on-night-2); font-weight: 600; font-size: var(--t-s); }
.ox-ex-col { display: grid; gap: var(--s-2); }
.ox-ex-it { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--night); border: 1px solid var(--night-line); }
.ox-ex-it strong { font-size: var(--t-s); } .ox-ex-it span { font-size: var(--t-xs); color: var(--on-night-2); }
.ox-ex-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--on-night); font-size: var(--t-l); }
.ox-ex-mid i { width: 2px; flex: 1; background: linear-gradient(var(--accent), var(--os)); }
@media (max-width: 899px) { .ox-ex-mid { flex-direction: row; } .ox-ex-mid i { height: 2px; width: auto; } }
.ox-exgov { margin-top: var(--s-6); font-size: var(--t-m); color: var(--on-night-2); max-width: 70ch; }
.ox-exgov em { color: var(--accent-soft); } .ox-exgov b { color: var(--os-soft); }

/* architecture · A5 dimension cards */
.ox-dims { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.ox-dim-c { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.ox-dim-k { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--os-ink); }
.ox-dim-c h3 { font-size: var(--t-m); letter-spacing: -0.02em; line-height: 1.25; }
.ox-today { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: 10px; background: rgb(255 36 0 / 0.06); border: 1px solid rgb(200 30 0 / 0.35); font-size: var(--t-s); color: var(--ink); }
.ox-today .ox-lab { margin: 0; color: var(--os-ink); }
.ox-lab-w { color: var(--accent-deep); }
.ox-chain { margin-top: 0; }
.ox-chain > .b { font-size: var(--t-xs); min-height: 34px; padding: 0.3rem 0.7rem; }
.ox-chain > .ln.h { width: 14px; }
.ox-gov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ox-chip { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; border: 1px solid currentColor; }
.ox-chip-o { color: var(--accent-deep); } .ox-chip-s { color: var(--os-ink); }

/* architecture · A6 limits and pilot */
.ox-pilot { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) { .ox-pilot { grid-template-columns: 1fr 1fr; align-items: start; } }
.ox-lims ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s-2); color: var(--on-night-2); font-size: var(--t-s); }
.ox-ask { padding: var(--s-6); border-radius: 14px; background: var(--night-2); border: 1.5px solid var(--os); }
.ox-ask h3 { font-size: var(--t-l); letter-spacing: -0.03em; margin-bottom: var(--s-4); }
.ox-ask ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ox-ask li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); align-items: start; }
.ox-ask li > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--os-ink); color: #fff; font-style: normal; font-weight: 800; }
.ox-ask li > span { display: grid; gap: 4px; color: var(--on-night-2); font-size: var(--t-s); }
.ox-ask li b { color: var(--on-night); font-size: var(--t-m); }
.ox-ask .ox-who { justify-self: start; }

/* convergence */
.ox-meet { position: relative; height: 340px; margin-top: var(--s-6); }
.ox-meet-svg { position: absolute; inset: 0 0 auto; width: 100%; height: 300px; }
.ox-meet-svg path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ox-mp-m { stroke: var(--accent); } .ox-mp-a { stroke: var(--os); } .ox-mp-d { stroke: var(--on-night); }
.ox-meet-l { position: absolute; top: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ox-meet-m { left: 0; color: var(--accent-soft); } .ox-meet-a { right: 0; color: var(--os-soft); }
.ox-meet-node { position: absolute; left: 50%; top: 150px; transform: translate(-50%, -50%); display: grid; gap: 4px; text-align: center; width: min(360px, 90%); padding: var(--s-5); border-radius: 16px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.ox-meet-node:hover { transform: translate(-50%, -52%); }
.ox-meet-k { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.ox-meet-node strong { font-size: var(--t-xl); letter-spacing: -0.04em; line-height: 1; }
.ox-meet-node > span:last-child { color: var(--ink-2); font-size: var(--t-s); font-weight: 600; }
.ox-meet-p { margin-top: 0; }
html.reduced .ox-meet-svg path { stroke-dashoffset: 0; }

/* materials */
.ox-docs { display: grid; gap: var(--s-4); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ox-doc { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ox-doc h3 { font-size: var(--t-l); letter-spacing: -0.03em; }
.ox-doc > p { color: var(--ink-2); font-size: var(--t-s); margin: 0; }
.ox-doc .ox-lab { margin: var(--s-3) 0 0; color: var(--accent-deep); }
.ox-doc-meta { font-size: var(--t-xs) !important; font-variant-numeric: tabular-nums; }
.ox-doc .btn { justify-self: start; margin-top: var(--s-3); }
.ox-doc-cover { aspect-ratio: 16 / 9; border-radius: 10px; background: var(--night); padding: var(--s-5); display: flex; flex-direction: column; justify-content: space-between; color: var(--on-night); overflow: clip; position: relative; }
.ox-doc-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }
.ox-doc-m .ox-doc-cover::after { background: var(--accent); } .ox-doc-a .ox-doc-cover::after { background: var(--os); }
.ox-doc-cover span { display: flex; align-items: center; gap: 10px; }
.ox-doc-cover img { height: 24px; width: auto; } .ox-doc-cover i { font-style: normal; color: var(--on-night-2); }
.ox-doc-cover b { font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); letter-spacing: -0.04em; }
.ox-final .final-h { font-size: var(--t-xl); }

/* download dialog */
.ox-dl-docs { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.ox-dl-docs label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--s-3); border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; cursor: pointer; }
.ox-dl-docs label:has(input:checked) { border-color: var(--accent-deep); }
.ox-dl .cf-send { justify-self: start; }
.ox-page button.btn { font-family: inherit; font-size: var(--t-s); font-weight: 600; cursor: pointer; border: 0; } .ox-page button.btn-l { font-size: var(--t-m); } .ox-page button.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }