/* CRAXAS flagship sites — shared layout. Typography and tokens unchanged from V0 (styles/tokens.css). */
*, *::before, *::after { box-sizing: border-box; }
:root { --fg: #edebe6; --bg: #08090b; --col: min(440px, 34vw); }
html { background: var(--bg); scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.track--com { height: 760vh; }
.track--ai { height: 900vh; }
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 2; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dip { position: fixed; inset: 0; background: #050608; z-index: 25; opacity: 0; pointer-events: none; }

/* header */
.site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
.wordmark { font: 600 14px/1 var(--font-sans); letter-spacing: 0.34em; }
.wordmark span { opacity: 0.55; letter-spacing: 0.18em; font-weight: 500; margin-left: 10px; font-size: 11px; }
.site-nav { display: flex; gap: 32px; font: 400 13px/1 var(--font-sans); opacity: 0.72; }
.site-nav a:hover { opacity: 1; }

/* type */
.ch { position: fixed; z-index: 20; will-change: opacity, transform; visibility: hidden; opacity: 0; }
.kicker { font: var(--t-kicker); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; margin: 0 0 20px; display: flex; align-items: center; gap: 14px; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.kicker--center { justify-content: center; }
.kicker--center::before { display: none; }
.display { font: var(--t-display); letter-spacing: -0.025em; margin: 0 0 22px; text-wrap: balance; }
.h2 { font: var(--t-h2); letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
.h2--xl { font-size: clamp(36px, 4.2vw, 64px); }
.lede { font: var(--t-lede); opacity: 0.68; margin: 0 0 30px; max-width: 540px; text-wrap: pretty; }
.lede--sm { font-size: 15.5px; margin-bottom: 26px; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; font: 500 13.5px/1 var(--font-sans); border-radius: 2px; transition: opacity 200ms var(--ease-out); }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover { opacity: 0.88; }
.btn--ghost { padding: 0 4px; opacity: 0.7; }
.btn--ghost:hover { opacity: 1; }
.btn .arrow { transition: transform 200ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* chapter 01 */
.ch-hero { left: var(--gutter); bottom: clamp(56px, 12vh, 128px); max-width: 780px; }
.ch-hero .lede { max-width: 560px; }
.scroll-cue { position: fixed; z-index: 20; right: var(--gutter); bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; font: var(--t-anno); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(currentColor, transparent); animation: cue 2.4s var(--ease-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.ch-four { left: 50%; bottom: clamp(48px, 10vh, 110px); width: min(640px, 88vw); margin-left: calc(min(640px, 88vw) / -2); text-align: center; }
.ch-four::before, .ch-close::before { content: ""; position: absolute; inset: -70px -120px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 9, 11, 0.86), rgba(8, 9, 11, 0.55) 55%, transparent); }
.four-line { font: 400 clamp(18px, 1.6vw, 23px)/1.45 var(--font-sans); letter-spacing: -0.005em; margin: 0 0 22px; text-wrap: balance; }
.chips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.chip, .tag { font: 500 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 12px; border: 1px solid currentColor; border-radius: 2px; white-space: nowrap; }
.chip--0, .tag--allow { color: var(--signal); } .chip--1, .tag--qualify { color: var(--qualify); }
.chip--2, .tag--escalate { color: var(--escalate); } .chip--3, .tag--block { color: var(--block); }

/* column chapters (02, 03): a reserved text-safe column; the 3D is framed to its right */
.ch--column { left: var(--gutter); top: calc(var(--header-h) + 5vh); width: var(--col); }
.ch--column::before { content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: calc(var(--col) + var(--gutter) * 2.4); z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(8, 9, 12, 0.92) 0%, rgba(8, 9, 12, 0.78) 62%, transparent 100%); }
.desks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.desks li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid rgba(237, 235, 230, 0.1); opacity: 0.42; transition: opacity 400ms var(--ease-out); }
.desks li.is-active { opacity: 1; }
.desk__n { grid-row: span 3; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--font-mono); }
.desk__where { font: var(--t-anno); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 6px; }
.desks b { font: 500 17px/23px var(--font-sans); letter-spacing: -0.01em; margin-bottom: 4px; }
.desk__body { font: 400 13.5px/1.5 var(--font-sans); opacity: 0.68; }
.markers { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.marker { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--font-mono); color: #0b0c0e; background: var(--fg); box-shadow: 0 0 0 6px rgba(237, 235, 230, 0.12), 0 0 24px rgba(237, 235, 230, 0.35); opacity: 0; transition: opacity 300ms var(--ease-out); }

/* chapter 03: journeys */
.jlist { list-style: none; margin: 4px 0 0; padding: 0; }
.jlist li { border-top: 1px solid rgba(237, 235, 230, 0.1); }
.jlist button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; opacity: 0.5; transition: opacity 300ms var(--ease-out); }
.jlist li.is-active button { opacity: 1; }
.jl__ask { font: 400 14.5px/1.4 var(--font-sans); }
.tag { padding: 6px 8px; font-size: 10px; }
.jl__note { margin: 0; max-height: 0; overflow: hidden; font: 400 13px/1.5 var(--font-sans); opacity: 0; transition: max-height 500ms var(--ease-out), opacity 500ms var(--ease-out), margin 500ms var(--ease-out); }
.jlist li.is-active .jl__note { max-height: 90px; opacity: 0.7; margin: -2px 0 14px; }

.phone {
  position: fixed; z-index: 21; right: calc(var(--gutter) + 4vw); top: 50%; margin-top: -310px; width: 300px; height: 620px;
  border-radius: 44px; background: #f4f3ef; color: #121418; padding: 14px 16px 18px; overflow: hidden;
  box-shadow: 0 0 0 9px #0d0e10, 0 0 0 10px rgba(255, 255, 255, 0.08), 0 40px 120px rgba(0, 0, 0, 0.65);
  display: flex; flex-direction: column; opacity: 0; visibility: hidden; font-family: var(--font-sans);
}
.phone__notch { position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #0d0e10; }
.phone__status { display: flex; justify-content: space-between; font: 600 12px/1 var(--font-sans); padding: 4px 10px 0; height: 28px; }
.phone__icons { letter-spacing: 1px; font-size: 7px; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 12px 2px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.phone__head b { display: block; font: 600 14px/1.2 var(--font-sans); }
.phone__head small { display: block; font: 400 11px/1.3 var(--font-sans); color: #6a6f75; }
.phone__logo { width: 32px; height: 32px; border-radius: 10px; background: #15171b; color: #f4f3ef; display: grid; place-items: center; font: 600 11px/1 var(--font-sans); letter-spacing: 0.06em; }
.phone__who { font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #7b8086; text-align: center; padding: 12px 0 6px; }
.phone__thread { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 4px 0; }
.phone__thread > * { opacity: 0; transform: translateY(8px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); }
.phone__thread > .is-on { opacity: 1; transform: none; }
.bubble { max-width: 84%; padding: 10px 13px; border-radius: 18px; font: 400 13.5px/1.42 var(--font-sans); }
.bubble--me { align-self: flex-end; background: #15171b; color: #f4f3ef; border-bottom-right-radius: 6px; }
.bubble--bank { align-self: flex-start; background: #fff; color: #15171b; border: 1px solid rgba(0, 0, 0, 0.06); border-bottom-left-radius: 6px; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa0a6; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.check { --k: 0; --c: #7fd3a3; align-self: stretch; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 9px 11px; background: rgba(255, 255, 255, 0.55); font: 400 11px/1.4 var(--font-sans); }
.check--allow { --c: #3e9a69; } .check--qualify { --c: #b07a12; } .check--escalate { --c: #3f7f98; } .check--block { --c: #b6452f; }
.check__row { display: flex; justify-content: space-between; align-items: center; }
.check__brand { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #4d5258; }
.check__disp { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); opacity: 0; transition: opacity 300ms; }
.check.is-done .check__disp { opacity: 1; }
.check__bar { height: 2px; background: rgba(0, 0, 0, 0.06); margin: 8px 0; border-radius: 2px; overflow: hidden; }
.check__bar i { display: block; height: 100%; width: calc(var(--k) * 100%); background: var(--c); }
.check__draft { display: flex; gap: 8px; color: #6a6f75; }
.check__draft span { font: 500 9px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.check__draft s { text-decoration-color: var(--c); text-decoration-thickness: 1.5px; }
.check__draft em { font-style: normal; }
.pill { align-self: flex-start; font: 600 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 10px; border-radius: 20px; color: #fff; }
.pill--allow { background: #3e9a69; } .pill--qualify { background: #b07a12; } .pill--escalate { background: #3f7f98; } .pill--block { background: #b6452f; }
.phone__compose { display: flex; justify-content: space-between; align-items: center; height: 40px; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); padding: 0 6px 0 14px; color: #9aa0a6; font-size: 13px; }
.phone__compose i { width: 28px; height: 28px; border-radius: 50%; background: #15171b; }
.phone__foot { text-align: center; font: 500 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9aa0a6; padding-top: 10px; }

/* chapter 04 */
.ch-close { left: var(--gutter); bottom: 48px; max-width: 760px; }
.close-items { list-style: none; margin: 10px 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.close-items li { font: 400 15.5px/1.45 var(--font-sans); padding: 12px 0; border-top: 1px solid rgba(237, 235, 230, 0.14); }
.close-note { font: var(--t-anno); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; margin: 0 0 24px; }
.site-foot { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 40px; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.06em; opacity: 0.5; }

@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  :root { --col: auto; }
  .site-nav { display: none; }
  .ch-hero { right: var(--gutter); bottom: 32px; }
  .ch--column { top: auto; bottom: 24px; right: var(--gutter); width: auto; }
  .ch--column::before { width: 100%; top: auto; height: 62vh; background: linear-gradient(0deg, rgba(8, 9, 12, 0.95) 40%, transparent); }
  .desks li:not(.is-active), .jlist li:not(.is-active) { display: none; }
  .phone { right: 50%; margin-right: -132px; top: 90px; margin-top: 0; width: 264px; height: 470px; border-radius: 36px; }
  .ch-jour .lede { display: none; }
  .close-items { grid-template-columns: 1fr; }
  .chip { padding: 8px 9px; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue i, .typing i { animation: none; } }
.no-webgl #stage { display: none; }
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .ch-jour .h2, .ch-jour .kicker { display: none; }
  .phone { top: 70px; height: 440px; }
  .ch-close { right: var(--gutter); }
}

/* ---------------- craxas.ai ---------------- */
.site--ai .ch-hero { max-width: 720px; }
.ch-life { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 6vh); }
.ch-life .h2 { max-width: 640px; }
.stages { list-style: none; margin: 46px 0 0; padding: 34px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; position: relative; }
.stages__rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(237, 235, 230, 0.16); }
.stages__fill { position: absolute; left: 0; top: 0; height: 1px; background: var(--fg); }
.stages__token { position: absolute; top: -4px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 6px rgba(237, 235, 230, 0.12), 0 0 22px rgba(237, 235, 230, 0.6); }
.stages li { opacity: 0.38; transition: opacity 400ms var(--ease-out); padding-right: 6px; }
.stages li.is-past { opacity: 0.66; }
.stages li.is-active { opacity: 1; }
.stages b { display: block; font: 500 16px/1.3 var(--font-sans); letter-spacing: -0.01em; margin: 8px 0 8px; }
.stages li > span:last-child { font: 400 13px/1.5 var(--font-sans); opacity: 0.68; }
.st__n { font: var(--t-anno); letter-spacing: 0.14em; opacity: 0.6; }
.stages li[data-i="3"] b { color: #fff; }
.stages li[data-i="4"] b { background: linear-gradient(90deg, var(--signal), var(--qualify) 38%, var(--escalate) 64%, var(--block)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.classes { margin-top: 54px; max-width: 760px; }
.classes__tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.classes__tabs span { font: 500 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 12px; border: 1px solid rgba(237, 235, 230, 0.18); border-radius: 2px; opacity: 0.55; }
.classes__tabs span.is-active { opacity: 1; border-color: var(--fg); }
.classes__d { font: 400 clamp(18px, 1.6vw, 23px)/1.45 var(--font-sans); margin: 0; min-height: 3em; }

.ch-wb { inset: calc(var(--header-h) + 3vh) var(--gutter) 6vh var(--gutter); display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.25fr) minmax(320px, 0.95fr); grid-template-rows: auto 1fr auto; gap: 18px 22px; }
.wb-head { grid-row: 1 / 3; align-self: start; }
.wb-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.wb-steps li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(237, 235, 230, 0.1); font: 500 15px/1.3 var(--font-sans); opacity: 0.42; transition: opacity 300ms var(--ease-out); }
.wb-steps li span { font: var(--t-anno); letter-spacing: 0.14em; opacity: 0.7; padding-top: 2px; }
.wb-steps li.is-active { opacity: 1; }
.glass { background: rgba(14, 16, 20, 0.72); border: 1px solid rgba(237, 235, 230, 0.1); border-radius: 4px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; }
.glass__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid rgba(237, 235, 230, 0.07); font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237, 235, 230, 0.5); }
.glass__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(237, 235, 230, 0.18); }
.glass__bar span { margin-left: 6px; }
.wb-term { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.term { margin: 0; padding: 16px 18px; font: 400 12.5px/1.75 var(--font-mono); color: var(--fg); white-space: pre-wrap; min-height: 320px; }
.term .c-cmd { color: #fff; } .term .c-dim { color: rgba(162, 167, 173, 0.85); } .term .c-ok { color: var(--signal); } .term .c-warn { color: var(--qualify); }
.term .cursor { display: inline-block; width: 8px; height: 14px; background: var(--signal); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wb-arch { grid-column: 3; grid-row: 1; }
.wb-rec { grid-column: 3; grid-row: 2; align-self: start; }
.arch { display: block; width: 100%; height: auto; padding: 8px; color: rgba(237, 235, 230, 0.4); }
.arch .node rect { fill: rgba(237, 235, 230, 0.03); stroke: rgba(237, 235, 230, 0.2); transition: stroke 300ms, fill 300ms; }
.arch .node text { fill: rgba(237, 235, 230, 0.9); font: 500 12.5px var(--font-sans); }
.arch .node text.sub { fill: rgba(162, 167, 173, 0.85); font: 400 10.5px var(--font-mono); }
.arch .node.is-hot rect { stroke: var(--fg); fill: rgba(237, 235, 230, 0.07); }
.arch .node--craxas rect { stroke: rgba(127, 211, 163, 0.5); }
.arch .node--craxas.is-hot rect { stroke: var(--signal); fill: rgba(127, 211, 163, 0.08); }
.arch .edge { fill: none; stroke: rgba(237, 235, 230, 0.22); stroke-width: 1.2; transition: stroke 300ms; }
.arch .edge.is-hot { stroke: var(--fg); stroke-dasharray: 5 5; animation: flow 1s linear infinite; color: var(--fg); }
.arch .edge--replay.is-hot { stroke: var(--qualify); color: var(--qualify); }
@keyframes flow { to { stroke-dashoffset: -10; } }
.record { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 0; padding: 14px 16px; font: 400 12px/1.4 var(--font-mono); }
.record dt { color: rgba(162, 167, 173, 0.8); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; }
.record dd { margin: 0; color: var(--fg); }
.record .v-q { color: var(--qualify); }
.wb-note { grid-column: 2 / 4; grid-row: 3; margin: 0; font: var(--t-anno); letter-spacing: 0.08em; opacity: 0.5; }

.ch-beyond { inset: 0; display: grid; grid-template-columns: minmax(320px, 0.9fr) 1.1fr; align-items: center; padding: var(--header-h) var(--gutter) 0; gap: 24px; }
.by-copy { max-width: 520px; }
.rings { width: min(620px, 52vw); height: auto; justify-self: center; overflow: visible; }
.ring { fill: none; stroke-width: 1; }
.ring--0 { stroke: rgba(237, 235, 230, 0.35); opacity: var(--r0, 0); }
.ring--1 { stroke: var(--signal); opacity: var(--r1, 0); }
.ring--2 { stroke: rgba(237, 235, 230, 0.35); stroke-dasharray: 2 7; opacity: var(--r2, 0); }
.ring__k { font: 500 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(237, 235, 230, 0.6); }
.ring__k--0 { opacity: var(--r0, 0); } .ring__k--1 { opacity: var(--r1, 0); fill: var(--signal); } .ring__k--2 { opacity: var(--r2, 0); }
.ring__item text { font: 400 13px var(--font-sans); fill: rgba(237, 235, 230, 0.85); }
.ring__item circle { fill: var(--fg); }
.ring__item--0 { opacity: calc(var(--r0, 0) * 0.7); } .ring__item--1 { opacity: var(--r1, 0); }
.ring__item--1 circle { fill: var(--signal); }
.ring__seal { opacity: var(--r2, 0); }
.ring__seal rect, .ring__seal path { fill: none; stroke: rgba(237, 235, 230, 0.6); stroke-width: 1.3; }

@media (max-width: 1100px) {
  .ch-wb { grid-template-columns: 1fr 1fr; }
  .wb-head { grid-column: 1 / 3; grid-row: 1; }
  .wb-head .lede { display: none; }
  .wb-term { grid-column: 1; grid-row: 2; }
  .wb-arch { grid-column: 2; grid-row: 2; }
  .wb-rec { display: none; }
  .wb-note { grid-column: 1 / 3; }
}
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .stages { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
  .stages__rail { display: none; }
  .classes { margin-top: 26px; }
  .ch-wb { display: block; inset: calc(var(--header-h) + 8px) var(--gutter) 20px; }
  .wb-head .h2 { font-size: 30px; }
  .wb-steps, .wb-arch, .wb-rec { display: none; }
  .term { min-height: 0; font-size: 10px; line-height: 1.65; padding: 12px; }
  .ch-beyond { grid-template-columns: 1fr; align-content: end; padding-bottom: 28px; }
  .rings { position: absolute; top: 80px; left: 50%; width: 340px; margin-left: -170px; opacity: 0.9; }
}
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .phone { height: 470px; padding: 12px 12px 12px; }
  .phone__compose { display: none; }
  .phone__who { padding: 8px 0 4px; }
  .phone__thread { gap: 7px; }
  .bubble { font-size: 12.5px; padding: 8px 11px; }
  .check { padding: 7px 9px; }
}

/* ================= Final finishing pass (12 Oct 2026) ================= */
/* header */
.site-header { gap: 28px; }
.site-nav { margin-left: auto; align-items: center; }
.nav-link--ext span { font-size: 11px; margin-left: 2px; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.btn--line { border: 1px solid currentColor; opacity: 0.88; }
.btn--line:hover { opacity: 1; }
button.btn { font: 500 13.5px/1 var(--font-sans); }
button.btn--sm { font-size: 12.5px; }
.site--ai .header-actions .btn--line { color: var(--fg); }
.modal-open, .modal-open body { overflow: hidden; }

/* 01b — four outcomes: self-playing schematic */
.ch-outcomes { left: 50%; bottom: 4vh; width: min(1040px, 94vw); margin-left: calc(min(1040px, 94vw) / -2); text-align: center; }
.ch-outcomes::before { content: ""; position: absolute; inset: -40px -80px -30px; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 60%, rgba(8, 9, 11, 0.92), rgba(8, 9, 11, 0.6) 60%, transparent); }
.ch-outcomes .four-line { margin-bottom: 6px; }
.schem { display: block; width: 100%; height: auto; overflow: visible; --c: #edebe6; --appear: 1; }
.schem text { font: 500 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; fill: rgba(237, 235, 230, 0.75); }
.schem .trk { fill: none; stroke: rgba(237, 235, 230, 0.16); stroke-width: 1.2; }
.schem .trk--branch { stroke-dasharray: 3 5; }
.schem .lit { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: url(#glow); }
.schem .lit--a { stroke: rgba(237, 235, 230, 0.85); }
.schem .node circle, .schem .node rect { fill: rgba(14, 16, 20, 0.85); stroke: rgba(237, 235, 230, 0.4); stroke-width: 1.2; }
.schem .node--ai .core { fill: rgba(237, 235, 230, 0.85); stroke: none; }
.schem .node--out rect { stroke: color-mix(in srgb, var(--c) calc(var(--out, 0) * 100%), rgba(237, 235, 230, 0.4)); opacity: calc(1 - 0.6 * var(--muted, 0)); }
.schem .node--out .sub { font-size: 9.5px; fill: rgba(162, 167, 173, 0.8); }
.schem .node--out .mark { fill: var(--c); opacity: var(--mark, 0); font-size: 10px; }
.schem[data-step="baseline"] .node--out .mark { fill: rgba(217, 164, 65, 0.9); }
.schem .node--spec { opacity: calc(0.35 + 0.65 * var(--spec, 0)); }
.schem .node--spec circle:first-child { stroke: color-mix(in srgb, #86b9cc calc(var(--spec, 0) * 100%), rgba(237, 235, 230, 0.35)); }
.schem .node--spec .glyph { fill: none; stroke: rgba(237, 235, 230, 0.7); stroke-width: 1.4; }
.schem .gate__box { fill: none; stroke: rgba(237, 235, 230, 0.4); stroke-dasharray: 4 4; opacity: var(--gate-box, 0); }
.schem .gate__q { opacity: var(--gate-box, 0); font-size: 9.5px; fill: rgba(162, 167, 173, 0.9); }
.schem .gate__cx { opacity: var(--gate-cx, 1); }
.schem .gate__cx circle { fill: rgba(14, 16, 20, 0.9); stroke: color-mix(in srgb, var(--c) calc(var(--eval, 0) * 100%), rgba(237, 235, 230, 0.55)); stroke-width: 1.4; }
.schem .gate__mark { color: #edebe6; } /* brand symbol on the dark gate */
.schem .gate__label { opacity: var(--gate-cx, 1); fill: #fff; }
.schem .port line { stroke: rgba(237, 235, 230, calc(0.12 + 0.6 * var(--on, 0))); stroke-width: 1.2; }
.schem .port circle { fill: rgba(237, 235, 230, calc(0.2 + 0.8 * var(--on, 0))); }
.schem .port text { fill: rgba(237, 235, 230, calc(0.35 + 0.6 * var(--on, 0))); font-size: 9.5px; }
.schem[data-step="baseline"] .port { opacity: 0.35; }
.schem .barrier line, .schem .barrier path { stroke: #d0654f; stroke-width: 3; stroke-linecap: round; opacity: var(--bar, 0); filter: url(#glow); }
.schem .card rect:first-child { fill: rgba(237, 235, 230, 0.95); stroke: none; }
.schem .card .card__tag { fill: #0b0c0e; font-size: 8.5px; letter-spacing: 0.12em; }
.schem .card .bar { fill: rgba(11, 12, 14, 0.55); }
.schem .card .bar--1 { fill: color-mix(in srgb, #b07a12 calc(var(--fix, 0) * 100%), rgba(11, 12, 14, 0.55)); }
.ox-caption { display: grid; gap: 6px; justify-items: center; min-height: 92px; margin: 4px auto 14px; max-width: 720px; }
.ox-title { font: 500 15px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c, #edebe6); }
.ox-body { font: 400 clamp(15px, 1.25vw, 18px)/1.5 var(--font-sans); opacity: 0.86; text-wrap: balance; }
.ox-value { font: 400 13px/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.04em; opacity: 0.6; }
.ox-controls, .inst-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ox-steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ox-step { position: relative; overflow: hidden; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 12px; border: 1px solid rgba(237, 235, 230, 0.2); border-radius: 2px; opacity: 0.6; }
.ox-step i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--k, 0) * 100%); background: currentColor; }
.ox-step[aria-selected="true"] { opacity: 1; border-color: currentColor; }
.ox-step.is-past { opacity: 0.85; }
.ox-step--allow { color: var(--signal); } .ox-step--qualify { color: var(--qualify); } .ox-step--escalate { color: var(--escalate); } .ox-step--block { color: var(--block); }
.ox-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(237, 235, 230, 0.2); border-radius: 2px; font-size: 12px; text-align: center; opacity: 0.8; }
.ox-btn:hover { opacity: 1; border-color: rgba(237, 235, 230, 0.6); }
.ch-outcomes:has(.schem[data-step="allow"]) .ox-title { color: var(--signal); }
.ch-outcomes:has(.schem[data-step="qualify"]) .ox-title { color: var(--qualify); }
.ch-outcomes:has(.schem[data-step="escalate"]) .ox-title { color: var(--escalate); }
.ch-outcomes:has(.schem[data-step="block"]) .ox-title { color: var(--block); }

/* 02 — institution walkthrough */
.desks li { padding: 0; }
.desks li button { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 13px 0; width: 100%; }
.desks li button > span:not(.desk__n), .desks li button > b { grid-column: 2; }
.desk__where { font: 500 11px/1 var(--font-mono) !important; letter-spacing: 0.16em; opacity: 0.9 !important; }
.desk__roles { font: 400 11px/1.5 var(--font-mono); letter-spacing: 0.04em; opacity: 0.55; margin: 2px 0 6px; }
.desks li.is-active .desk__n { background: var(--fg); color: var(--bg); box-shadow: 0 0 18px rgba(237, 235, 230, 0.45); }
.inst-controls { justify-content: flex-start; margin-top: 14px; font: var(--t-anno); letter-spacing: 0.08em; opacity: 0.7; }
.inst-controls span { margin-left: 6px; }
.labels { position: fixed; inset: 0; z-index: 16; pointer-events: none; transition: opacity 300ms; }
.scene-desk, .scene-role { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity 350ms var(--ease-out); }
.scene-desk { font: 500 11px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #fff; padding: 6px 9px; border: 1px solid rgba(237, 235, 230, 0.35); background: rgba(8, 9, 11, 0.6); border-radius: 2px; translate: -50% -50%; }
.scene-role { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237, 235, 230, 0.92); padding: 4px 6px; background: rgba(8, 9, 11, 0.55); border-radius: 2px; translate: -50% -100%; }
.scene-role::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: rgba(237, 235, 230, 0.5); }
.zoom { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 17; pointer-events: none; overflow: visible; }
#zoom-line { stroke: rgba(237, 235, 230, 0.8); stroke-width: 1.3; stroke-dasharray: 4 4; transition: opacity 300ms; }
#zoom-dot { fill: none; stroke: rgba(237, 235, 230, 0.85); stroke-width: 1.2; transition: opacity 300ms; }
.site--com .phone { right: var(--gutter); width: 286px; height: 590px; margin-top: -295px; }

/* dialogs */
.dlg-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(4, 5, 7, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 220ms var(--ease-out); }
.dlg-backdrop.is-open { opacity: 1; }
.dlg { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #101216; color: #edebe6; border: 1px solid rgba(237, 235, 230, 0.12); border-radius: 6px; padding: 30px 30px 26px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); transform: translateY(10px); transition: transform 260ms var(--ease-out); }
.dlg-backdrop.is-open .dlg { transform: none; }
.dlg--onb { width: min(860px, 100%); padding: 38px 40px 30px; background: radial-gradient(120% 80% at 100% 0%, #191c22 0%, #0d0f12 55%); }
.dlg__geo { position: absolute; right: -60px; top: -70px; width: 300px; height: 300px; pointer-events: none; opacity: 0.16; }
.dlg__geo * { fill: none; stroke: #edebe6; stroke-width: 0.6; }
.dlg__close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; color: rgba(237, 235, 230, 0.8); text-align: center; z-index: 2; }
.dlg__close:hover { background: rgba(237, 235, 230, 0.08); color: #fff; }
.dlg__eyebrow { font: 500 11px/1 var(--font-mono); letter-spacing: 0.22em; color: rgba(237, 235, 230, 0.6); margin: 0 0 12px; }
.dlg__title { font: 500 26px/1.15 var(--font-sans); letter-spacing: -0.015em; margin: 0 0 10px; }
.dlg__title--xl { font-size: clamp(30px, 3.4vw, 42px); }
.dlg__lede { font: 400 14.5px/1.55 var(--font-sans); color: rgba(237, 235, 230, 0.68); margin: 0 0 22px; max-width: 560px; }
.dlg fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.dlg legend { display: flex; gap: 12px; align-items: baseline; font: 500 12px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; padding: 0; }
.dlg legend span { color: rgba(237, 235, 230, 0.45); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.fld { display: grid; gap: 6px; }
.fld--wide { grid-column: 1 / -1; }
.fld > span { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(237, 235, 230, 0.7); }
.fld > span i { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: rgba(237, 235, 230, 0.4); margin-left: 6px; }
.fld input, .fld select, .fld textarea { width: 100%; background: rgba(237, 235, 230, 0.04); color: #edebe6; border: 1px solid rgba(237, 235, 230, 0.14); border-radius: 3px; padding: 11px 12px; font: 400 14px/1.4 var(--font-sans); outline: none; transition: border-color 160ms; }
.fld textarea { resize: vertical; min-height: 96px; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(237, 235, 230, 0.6) 50%), linear-gradient(135deg, rgba(237, 235, 230, 0.6) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.fld select option { background: #101216; color: #edebe6; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(237, 235, 230, 0.32); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: rgba(237, 235, 230, 0.6); }
.fld [aria-invalid="true"] { border-color: rgba(208, 101, 79, 0.85); }
.fld em, .consent em { font: 400 11.5px/1.3 var(--font-sans); font-style: normal; color: #e08a77; min-height: 0; }
.fld em:empty, .consent em:empty { display: none; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font: 400 13px/1.45 var(--font-sans); color: rgba(237, 235, 230, 0.75); margin: 2px 0 20px; }
.consent input { margin-top: 2px; accent-color: #edebe6; }
.consent em { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn--build { width: 100%; height: 56px; justify-content: center; border-radius: 3px; font: 500 15.5px/1 var(--font-sans); letter-spacing: 0.01em; color: #0b0c0e; background: linear-gradient(100deg, #edebe6 0%, #ffffff 40%, #e4efe9 70%, #edebe6 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 12px 40px rgba(127, 211, 163, 0.14); }
.btn--build:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.btn--light { background: #edebe6; color: #0b0c0e; }
.dlg__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dlg__actions .btn--line { color: #edebe6; }
.dlg--mail .fld { margin-bottom: 12px; }
.dlg__note, .dlg__status { font: 400 12.5px/1.5 var(--font-sans); color: rgba(237, 235, 230, 0.7); margin: 14px 0 0; min-height: 1em; }
.dlg__status.is-ok { color: var(--signal); }
.dlg__status.is-err { color: #e08a77; }
@media (max-width: 700px) {
  .dlg-backdrop { padding: 0; align-items: stretch; }
  .dlg, .dlg--onb { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; padding: 56px 20px 28px; }
  .grid { grid-template-columns: 1fr; }
}

/* shared footer — light band below dark endings, on both domains */
.site-footer { position: relative; z-index: 40; background: #ecebe6; color: #121418; padding: 72px var(--gutter) 34px; }
.foot-top { display: grid; grid-template-columns: minmax(240px, 1fr) 2.2fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(18, 20, 24, 0.14); }
.foot-brand { display: flex; gap: 16px; align-items: flex-start; }
.foot-mark { width: 40px; height: 40px; flex: none; }
.foot-mark { color: #0b0c0e; } /* brand symbol on the light footer */
.foot-brand b { display: block; font: 600 15px/1 var(--font-sans); letter-spacing: 0.34em; margin: 4px 0 8px; }
.foot-brand span { display: block; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.18em; color: rgba(18, 20, 24, 0.55); }
.foot-brand p { font: 400 14px/1.5 var(--font-sans); color: rgba(18, 20, 24, 0.7); margin: 16px 0 0; max-width: 260px; }
.foot-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.foot-k { display: block; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(18, 20, 24, 0.55); margin-bottom: 10px; }
.foot-contacts a { font: 500 15px/1.3 var(--font-sans); border-bottom: 1px solid rgba(18, 20, 24, 0.25); padding-bottom: 2px; }
.foot-contacts a:hover { border-color: #121418; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding-top: 22px; font: 400 11.5px/1.5 var(--font-mono); letter-spacing: 0.03em; color: rgba(18, 20, 24, 0.6); }
.foot-links { margin-left: auto; display: flex; gap: 22px; }
.foot-links a:hover { color: #121418; }
.site-footer :focus-visible { outline-color: #121418; }

@media (max-width: 1100px) { .site-nav .nav-link:not(.nav-link--ext) { display: none; } }
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .site-nav { display: none; }
  .header-actions .btn--sm { height: 30px; padding: 0 10px; font-size: 11.5px; }
  .ch-outcomes { bottom: 2vh; }
  .ox-caption { min-height: 120px; }
  .schem text { font-size: 13px; }
  .site--com .phone { right: 50%; margin-right: -132px; top: 80px; margin-top: 0; width: 264px; height: 470px; }
  .inst-controls span { display: none; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-contacts { grid-template-columns: 1fr; gap: 20px; }
  .foot-links { margin-left: 0; }
}
.site-header::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, transparent 100%); }
.desks li { display: block; }
.desks li:not(.is-active) .desk__body, .desks li:not(.is-active) .desk__roles { display: none; }
.desks li button { text-align: left; }
.dlg { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(237, 235, 230, 0.25) transparent; }
.header-actions .btn { white-space: nowrap; }
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .header-actions { gap: 6px; }
  .header-actions .btn--sm { font-size: 11px; padding: 0 9px; }
  .wordmark { letter-spacing: 0.26em; }
  .ch-inst .h2 { display: none; }
}

/* ================= v3 refinement pass (12 Oct 2026) ================= */
/* Root cause of "nothing is clickable": the closed dialog backdrops kept display:grid (overriding [hidden])
   and sat invisibly over the whole page at z-index 100, swallowing every click. */
.dlg-backdrop[hidden] { display: none !important; }
.dlg-backdrop:not(.is-open) { pointer-events: none; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* brand placeholder beside the wordmark (single source: src/site/brand.js) */
.wordmark { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 24px; height: 24px; flex: none; overflow: visible; }
.brand-mark { color: var(--mark, currentColor); } /* #0b0c0e on light grounds, #edebe6 on dark (set per frame) */

/* 01 — outcomes legend: the disposition names, selectable, not a media toolbar */
.ox-legend { display: flex; justify-content: center; gap: 4px 22px; flex-wrap: wrap; }
.ox-legend .ox-step { border: 0; padding: 8px 2px 9px; opacity: 0.5; border-radius: 0; }
.ox-legend .ox-step i { height: 1px; opacity: 0.9; }
.ox-legend .ox-step[aria-pressed="true"] { opacity: 1; }
.ox-legend .ox-step.is-past { opacity: 0.7; }
.ox-legend .ox-step:hover { opacity: 1; }

/* 02 — institution column */
.desks li button { cursor: pointer; }
.desk__q { display: block; font: 500 17px/1.3 var(--font-sans); letter-spacing: -0.01em; margin: 2px 0 2px; }
.desks li:not(.is-active) .desk__q { opacity: 0.8; }
.desks li button:hover .desk__n { box-shadow: 0 0 0 4px rgba(237, 235, 230, 0.1); }
.inst-coda { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(237, 235, 230, 0.14); font: 400 15px/1.5 var(--font-sans); color: rgba(237, 235, 230, 0.86); }
.coda-cta { display: inline; font: 500 14px/1.5 var(--font-sans); color: #fff; border-bottom: 1px solid rgba(237, 235, 230, 0.5); margin-left: 4px; padding: 0; }
.coda-cta:hover { border-color: #fff; }
.scene-role.is-hot { color: #0b0c0e; background: #edebe6; }
.scene-role.is-hot::after { background: #edebe6; }

/* the extracted screen panel */
.beam { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 17; pointer-events: none; opacity: 0; overflow: visible; }
.beam__fill { fill: rgba(237, 235, 230, 0.075); }
.beam__e1, .beam__e2 { stroke: rgba(237, 235, 230, 0.6); stroke-width: 1; stroke-dasharray: 3 4; }
.beam__dot { fill: none; stroke: rgba(237, 235, 230, 0.9); stroke-width: 1.3; }
.vpanel {
  position: fixed; left: 0; top: 0; z-index: 21; transform-origin: 0 0; visibility: hidden; opacity: 0; pointer-events: none;
  border-radius: 8px; overflow: hidden; font-family: var(--font-sans);
  box-shadow: 0 0 0 1px rgba(237, 235, 230, 0.1), 0 40px 120px rgba(0, 0, 0, 0.6);
  --pbg: #111317; --pfg: #edebe6; --pmut: rgba(237, 235, 230, 0.55); --pline: rgba(237, 235, 230, 0.1); --pwarn: #d9a441; --pok: #7fd3a3;
  background: var(--pbg); color: var(--pfg);
}
.vp__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--pline); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pmut); }
.vp__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--pline); }
.vp__app { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp__bar em { margin-left: auto; font-style: normal; letter-spacing: 0.1em; opacity: 0.8; white-space: nowrap; }
.vp__body { padding: 16px 18px 6px; }
.vp__role { margin: 0 0 12px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pmut); }
.vp__row { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--pline); align-items: baseline; }
.vp__k { font: 500 10.5px/1.35 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pmut); }
.vp__v { font: 400 14.5px/1.4 var(--font-sans); }
.vp__row.is-warn .vp__v { color: var(--pwarn); }
.vp__ghost { visibility: hidden; }
.vp__checks { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--pline); align-items: center; }
.vp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vp__chip { font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; padding: 6px 8px; border-radius: 3px; background: color-mix(in srgb, var(--pok) 12%, transparent); color: var(--pfg); white-space: nowrap; }
.vp__chip b { color: var(--pok); margin-right: 6px; font-weight: 600; }
.vp__gap { display: grid; grid-template-columns: 118px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 11px 0 12px; border-top: 1px solid var(--pline); align-items: center; }
.vp__gap .vp__k { grid-column: 1; grid-row: 1 / 3; color: var(--pwarn); }
.vp__motif { grid-column: 2; grid-row: 1; width: 44px; height: 12px; margin-bottom: 4px; overflow: visible; }
.vp__motif line { stroke: var(--pwarn); stroke-width: 1.4; stroke-linecap: round; }
.vp__motif circle { fill: var(--pwarn); }
.vp__gq { grid-column: 2; grid-row: 2; font: 500 15px/1.35 var(--font-sans); color: var(--pfg); }
.vp__q { margin: 0; padding: 16px 18px 18px; border-top: 1px solid var(--pline); font: 500 21px/1.28 var(--font-sans); letter-spacing: -0.012em; text-wrap: balance; color: var(--pfg); background: color-mix(in srgb, var(--pfg) 4%, transparent); }
/* front office: warm, people-first — a light workstation */
.vp--front { --pbg: #f3f1ec; --pfg: #15171b; --pmut: rgba(21, 23, 27, 0.55); --pline: rgba(21, 23, 27, 0.1); --pwarn: #a8680a; --pok: #2f8a5c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 40px 120px rgba(0, 0, 0, 0.6); }
/* operations: focused graphite */
.vp--middle { --pbg: #14161a; --pwarn: #e0ac4a; }
/* engineering: a black terminal */
.vp--term { --pbg: #07080a; --pfg: #d9e2ec; --pmut: rgba(160, 178, 196, 0.62); --pline: rgba(160, 190, 220, 0.12); --pok: #7fd3a3; --pwarn: #e0ac4a; }
.vp--term .vp__v, .vp--term .vp__gq { font-family: var(--font-mono); font-size: 13px; }
.vp--term .vp__k { text-transform: none; letter-spacing: 0.02em; font-size: 12px; color: #8fb3d1; }
.vp--term .vp__gap .vp__k { color: var(--pwarn); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; }
.vp--term .vp__checks .vp__k { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; color: var(--pmut); }

/* 03 finale actions */
.ch-close .actions { gap: 14px 18px; }
.ch-close .btn--line { color: var(--fg); }

/* footer v3 */
.foot-k { margin-bottom: 4px; color: #121418; font-weight: 600; letter-spacing: 0.14em; }
.foot-d { display: block; font: 400 12.5px/1.45 var(--font-sans); color: rgba(18, 20, 24, 0.62); margin-bottom: 10px; }
.foot-links { align-items: center; }
.foot-links a { border-bottom: 1px solid transparent; }
.foot-links a:hover { border-color: currentColor; }
.foot-motion { font: 400 11.5px/1.5 var(--font-mono); color: rgba(18, 20, 24, 0.6); padding: 2px 8px; border: 1px solid rgba(18, 20, 24, 0.2); border-radius: 20px; }
.foot-motion:hover { color: #121418; border-color: #121418; }

/* motion off (OS setting or the footer control) */
.motion-off .scroll-cue i, .motion-off .term .cursor { animation: none; }

@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .brand-mark { width: 20px; height: 20px; }
  .wordmark { gap: 9px; }
  .wordmark span { display: none; }
  /* desks become three compact, always-reachable tabs; the screen panel carries the story above */
  .ch-inst .kicker { margin-bottom: 10px; }
  .desks { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .desks li, .desks li:not(.is-active) { display: block; opacity: 1; border-top: 0; }
  .desks li button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 10px 11px; border: 1px solid rgba(237, 235, 230, 0.16); border-radius: 3px; opacity: 0.55; }
  .desks li.is-active button { opacity: 1; border-color: rgba(237, 235, 230, 0.7); }
  .desk__roles, .desk__q { display: none !important; }
  .desk__where { font-size: 10px !important; letter-spacing: 0.1em; margin: 0; }
  .desk__n { width: 20px; height: 20px; }
  .inst-coda { margin-top: 12px; padding-top: 10px; font-size: 13.5px; }
  .vp__row, .vp__checks, .vp__gap { grid-template-columns: 96px 1fr; gap: 10px; }
  .vp__body { padding: 12px 14px 4px; }
  .vp__q { font-size: 18px; padding: 12px 14px 14px; }
  .vp__v { font-size: 13.5px; }
  .ch-close .actions { gap: 10px 14px; }
}
.vp__appm { display: none; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  /* one compact, readable panel at a time; the role moves into the title bar */
  .vp__app, .vp__role, .vp__motif { display: none; }
  .vp__appm { display: inline; color: var(--pfg); }
  .vp__bar { height: 30px; padding: 0 12px; }
  .vp__body { padding: 6px 14px 2px; }
  .vp__row, .vp__checks, .vp__gap { grid-template-columns: 84px 1fr; padding: 7px 0; column-gap: 10px; }
  .vp__k { font-size: 9.5px; letter-spacing: 0.08em; }
  .vp__v { font-size: 13px; line-height: 1.35; }
  .vp__chip { font-size: 10px; padding: 4px 6px; }
  .vp__chips { gap: 4px; }
  .vp__gq { font-size: 13.5px; }
  .vp__gap .vp__k { grid-row: 1 / 2; }
  .vp__gq { grid-row: 1; }
  .vp__q { font-size: 17px; line-height: 1.25; padding: 10px 14px 12px; }
  .vp--term .vp__v, .vp--term .vp__gq { font-size: 11.5px; }
  .vp--term .vp__k { font-size: 10.5px; }
}
.ch-close .h2--xl { font-size: clamp(32px, 3.5vw, 52px); max-width: 15.5em; }
/* The column's legibility gradient: .ch has will-change:transform, so its "fixed" ::before is positioned
   against the column box. Extend it to the viewport edges so it never shows a hard-edged box. */
.ch--column::before { top: -60vh; bottom: -60vh; left: calc(-1 * var(--gutter)); }
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  .ch--column::before { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); width: auto; top: auto; bottom: -24px; height: 66vh; }
}