/* ORBINTU-AI homepage layer — sits on top of the existing pixel/CRT shell.
   Motion language: line activation · pixel-step reveals · terminal state updates · signal movement · cube states.
   All "start" (hidden) states are gated by html.ob-anim, so no-JS / reduced-motion always shows the final state. */

:root { --ob-c: #fa680c; --ob-d: #d26b27; --ob-dd: #733612; --ob-ink: #050200; --ob-ok: var(--orbi-i); --ob-cy: #48e0f1; --ob-red: #ff5a4f; --ob-amber: #f0b46a;
  --ob-font: var(--font-caption, "Pixelify Sans", monospace); }
html { scroll-behavior: smooth; }
/* anchor offset: layout.css (--anchor-offset) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ═════════ ORBI cube state system ═════════
   One vocabulary, applied to every [data-state] host. The cube stays recognisable; only glow, pulse rhythm and tiny offsets change. */
[data-state] { --gc: 250, 104, 12; --ga: .3; --bp: 5s; --tx: 0px; --ty: 0px; --ts: 1; }
[data-state="LISTENING"] { --ga: .5; --bp: 1.8s; --ts: 1.02; }
[data-state="UNDERSTANDING"] { --ga: .6; --bp: 2.4s; --ty: -2px; }
[data-state="WAITING"] { --gc: 255, 176, 64; --ga: .75; --bp: 1.1s; }
[data-state="MOVING"] { --ga: .55; --bp: 1.6s; --tx: -3px; }
[data-state="READY"] { --ga: .4; --bp: 4s; }
/* Crisp cube: no glow filter, no breathing opacity, no resting 3D transform (a resting perspective/will-change layer resamples the pixels).
   Orientation only applies while the pointer tilts it, and it returns to `none`. State is carried by the dock/labels, never by fading the faces. */
.ob-cube { display: block; overflow: visible; opacity: 1; filter: none; transform: none; }
.ob-cube.ob-tilting { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear; }

/* ═════════ navigation ═════════ */
.ob-short { display: none; }
@media (max-width: 1023px) { .ob-long { display: none; } .ob-short { display: inline; } .ob-nav-mid { display: none !important; } }
@media (max-width: 1279px) { .ob-nav-wide, .ob-nav-dev { display: none !important; } }
@media (min-width: 1280px) { .ob-nav-alt { display: none !important; } }
.ob-menu { position: fixed; inset: 66px 0 0 0; z-index: 48; background: var(--stone-900, #16120f); padding: 16px 20px 40px; display: grid; align-content: start; overflow: auto; }
.ob-menu a { font-family: var(--ob-font); text-transform: uppercase; font-size: 26px; padding: 16px 0; border-bottom: 1px solid var(--stone-700, #292623); color: #fff; }
.ob-menu a:hover, .ob-menu a:focus-visible { color: var(--ob-c); }

/* ═════════ hero: CTA row, monitor scroll response, mobile screen ═════════ */
.ob-herocta { row-gap: 12px; }
.ob-monitor { will-change: auto; }
.ob-mobwrap { display: none; padding-bottom: 8px; }
@media (max-width: 767px) { .ob-mobwrap { display: block; } }

/* ORBI OS screen (desktop CRT). All sizes in cqw so it scales with the monitor. */
.orbs { --c: #fa680c; --d: #d9722a; --dd: #c0692a; }
.orbs *, .orbs-ui * { box-sizing: border-box; margin: 0; }
.orbs-glow { position: absolute; inset: 0; background: radial-gradient(48% 44% at 50% 40%, rgba(250,104,12,.07), rgba(250,104,12,.02) 55%, transparent 78%); }
.orbs-root { position: relative; height: 100%; display: flex; flex-direction: column; padding: 2.6cqw 3.25cqw 2.2cqw; gap: 1.6cqw; }
.orbs-hd { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--d); padding-bottom: .75cqw; gap: 1.2cqw; }
.orbs-ttl { display: flex; align-items: baseline; gap: 1.1cqw; white-space: nowrap; }
.orbs-ttl b { font-weight: 400; color: var(--c); font-size: max(12px, 2.5cqw); line-height: 1; } .orbs-ttl span { color: var(--d); font-size: max(12px, 1.6cqw); }
.orbs-chips { display: flex; gap: .9cqw; }
.orbs-chip { display: flex; gap: .6cqw; border-style: solid; border-width: .375cqw 1px 1px; border-color: var(--d) var(--dd) var(--dd); padding: .375cqw .9cqw; font-size: max(12px, 1.45cqw); white-space: nowrap; }
.orbs-chip em { font-style: normal; color: var(--d); } .orbs-chip strong { font-weight: 400; color: var(--c); }
.orbs-main { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1.5fr 1fr; column-gap: 2.6cqw; }
.orbs-col { display: grid; grid-template-rows: 1fr 1fr; row-gap: 1.9cqw; min-height: 0; }
.orbs-box { position: relative; border: 1px solid var(--d); padding: 1.9cqw 1.3cqw 1.1cqw; display: flex; flex-direction: column; justify-content: center; min-height: 0; background: linear-gradient(rgba(250,104,12,.05), transparent 70%); }
.orbs-box::after { content: ""; position: absolute; top: 50%; width: 2.6cqw; height: 1px; background: var(--dd); }
.orbs-l::after { left: 100%; } .orbs-r::after { right: 100%; }
.orbs-leg { position: absolute; top: -1cqw; left: 1.1cqw; background: #050200; padding: 0 .6cqw; font-weight: 400; font-size: max(12px, 1.5cqw); line-height: 2cqw; color: var(--c); white-space: nowrap; }
.orbs-idx { position: absolute; top: .5cqw; right: .9cqw; font-size: max(12px, 1.25cqw); color: var(--dd); }
.orbs-bd { display: flex; align-items: center; gap: 1.5cqw; } .orbs-ico { width: 4.6cqw; height: 4.6cqw; flex: none; }
.orbs-sub { text-transform: none; font-size: max(12px, 1.55cqw); line-height: 1.35; color: var(--c); opacity: .78; letter-spacing: .03em; }
.orbs-sub span { display: block; }
.orbs-led { position: absolute; right: 1cqw; bottom: 1cqw; width: .7cqw; height: .7cqw; background: var(--c); animation: ob-pulse 2.4s steps(2) infinite; }
.orbs-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1cqw; min-height: 0; }
.orbs-logo.ob-mark-o { height: 11cqw; height: round(down, 11cqw, 16px); width: 11cqw; width: round(down, 11cqw, 16px); }   /* sealed core: present, not a hero — multiples of the 16-cell grid keep every cell whole */
.orbs-prompt { display: grid; gap: .75cqw; justify-items: center; width: 100%; }
.orbs-q { font-size: max(12px, 1.3cqw); color: var(--c); letter-spacing: .08em; }
.orbs-in { display: flex; align-items: center; gap: .7cqw; width: 94%; border: 1px solid var(--d); background: rgba(250,104,12,.07); padding: .55cqw .9cqw; pointer-events: auto; text-transform: none; }
.orbs-in:focus-within { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.orbs-in b { color: var(--c); font-weight: 400; font-size: max(12px, 1.7cqw); }
.orbs-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--c); font: inherit; font-size: max(12px, 1.6cqw); letter-spacing: .03em; text-shadow: inherit; user-select: text; -webkit-user-select: text; pointer-events: auto; }
.orbs-in input::placeholder { color: #8a4a1a; opacity: 1; }
.orbs-acts { display: flex; gap: .8cqw; }
.orbs-acts button { pointer-events: auto; cursor: var(--cursor-hover); font: inherit; font-size: max(12px, 1.3cqw); letter-spacing: .06em; text-transform: uppercase; color: #050200; background: var(--c); border: 1px solid var(--c); padding: .5cqw 1.1cqw; }
.orbs-acts button:hover { background: #ff8a3c; } .orbs-acts button:active { transform: translateY(1px); }
.orbs-acts .rst { background: transparent; color: var(--d); border-color: var(--dd); } .orbs-acts .rst:hover { color: var(--c); border-color: var(--d); background: transparent; }
.orbs-acts button:focus-visible, .orbs-in input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.orbs-stat { text-transform: none; font-size: max(12px, 1.2cqw); color: var(--dd); letter-spacing: .03em; min-height: 1.5cqw; }
.orbs-tel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.6cqw; height: 20.5cqw; flex: none; }
.orbs-pan { position: relative; border: 1px solid var(--d); padding: 2cqw 1.4cqw 1cqw; display: flex; flex-direction: column; min-height: 0; }
.orbs-chart { display: flex; align-items: flex-end; gap: .35cqw; height: 4.6cqw; margin-bottom: .9cqw; border-bottom: 1px solid var(--dd); }
.orbs-chart i { flex: 1; background: var(--d); min-width: 0; } .orbs-chart i:nth-last-child(-n+3) { background: var(--c); }
.orbs-row { display: flex; justify-content: space-between; align-items: baseline; text-transform: none; font-size: max(12px, 1.55cqw); line-height: 1; padding: .72cqw 0; border-bottom: 1px dashed var(--dd); color: var(--d); letter-spacing: .03em; }
.orbs-row:last-child { border-bottom: 0; } .orbs-row b { font-weight: 400; color: var(--c); font-variant-numeric: tabular-nums; }
.orbs-pl { display: grid; gap: .85cqw; align-content: space-between; height: 100%; }
.orbs-pl .orbs-row { display: grid; grid-template-columns: 1fr auto; row-gap: .55cqw; border: 0; padding: 0; }
.orbs-seg { grid-column: 1/-1; display: flex; gap: .25cqw; height: .9cqw; } .orbs-seg i { flex: 1; background: #2a1305; } .orbs-seg i.on { background: var(--d); }
.orbs-seg i.lead { background: var(--c); animation: ob-pulse 1.2s steps(2) infinite; }
.orbs-flow { flex: none; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--dd); padding-top: .9cqw; font-size: max(12px, 1.5cqw); line-height: 1; white-space: nowrap; }
.orbs-n { color: var(--dd); padding: .4cqw .7cqw; animation: ob-flow 7s steps(1) infinite; } .orbs-n.core { border: 1px solid var(--d); } .orbs-arr { color: var(--dd); }
.orbs:not([data-step="0"]) .orbs-n { animation: none; } .orbs .orbs-n.lit { color: var(--c); text-shadow: 0 0 .8cqw rgba(250,104,12,.7); }

/* idle ↔ live content variants (state machine flips data-live) */
.v-live { display: none; } [data-live="1"] .v-idle { display: none; } [data-live="1"] .v-live { display: revert; }
[data-live="1"] .orbs-leg .v-live { display: inline; }
.orbs [data-min] { opacity: 0; transition: opacity .35s steps(4); } .orbs [data-min].on { opacity: 1; }
.orbs-lv { display: grid; gap: .5cqw; align-content: space-evenly; height: 100%; }
.orbs-row.lv { display: grid; grid-template-columns: 13.5cqw 1fr; gap: 1cqw; align-items: baseline; font-size: max(12px, 1.5cqw); line-height: 1.25; border: 0; padding: .3cqw 0; }
.orbs-row.lv span { text-transform: uppercase; color: var(--d); } .orbs-row.lv b { text-align: left; color: var(--c); }
.k { display: inline-block; width: 1.9cqw; text-align: center; margin-right: .7cqw; color: #050200; background: var(--kc); font-style: normal; }
.ko { --kc: var(--orbi-o); } .kr { --kc: var(--orbi-r); } .kb { --kc: var(--orbi-b); } .ki { --kc: var(--orbi-i); }
.orbs-row .nu { color: #050200; background: var(--c); padding: 0 .5cqw; animation: ob-blink 1.2s steps(2) infinite; } .orbs-row .wk { color: #48e0f1; } .orbs-row .wt { color: var(--d); }
.orbs[data-state="UNDERSTANDING"] .orbs-box::after, .orbs[data-state="MOVING"] .orbs-box::after { background: linear-gradient(90deg, var(--dd), var(--c), var(--dd)) 0 0/300% 100%; animation: ob-sig 1.1s linear infinite; }
.orbs[data-state="UNDERSTANDING"] .orbs-r::after, .orbs[data-state="MOVING"] .orbs-l::after { animation-direction: reverse; }
.orbs[data-state="UNDERSTANDING"] .orbs-core::before { content: ""; position: absolute; width: 24cqw; height: 15cqw; top: 3.5cqw; border: 1px solid var(--c); border-radius: 50%; opacity: 0; animation: ob-ring 1.8s linear infinite; }
@keyframes ob-ring { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes ob-sig { to { background-position: 300% 0; } }
@keyframes ob-pulse { 50% { opacity: .25; } } @keyframes ob-blink { 50% { opacity: .35; } }
@keyframes ob-flow { 0% { color: var(--c); text-shadow: 0 0 .8cqw rgba(250,104,12,.7); } 14.28%, 100% { color: var(--dd); } }

/* mobile ORBI / PUBLIC (compact instrument) */
.ob-mob { --c: #fa680c; --d: #d9722a; --dd: #c0692a; font-family: var(--ob-font); text-transform: uppercase; letter-spacing: .04em; background: var(--ob-ink); border: 1px solid var(--d); padding: 16px; display: grid; gap: 12px; color: var(--c); text-shadow: 0 0 8px rgba(250,104,12,.35); text-align: left; box-shadow: 0 0 0 4px var(--stone-900, #16120f), 0 0 0 6px var(--stone-700, #292623); }
.ob-mob__hd { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--d); padding-bottom: 8px; } .ob-mob__hd b { font-weight: 400; font-size: 18px; } .ob-mob__hd span { font-size: var(--type-body-s); color: var(--d); }
.ob-mob__cube .ob-mark-o { height: 64px; width: 64px; margin: 4px auto 0; }
.ob-mob .orbs-q { font-size: var(--type-body-s); } .ob-mob .orbs-in { width: 100%; padding: 10px 12px; } .ob-mob .orbs-in b { font-size: 18px; } .ob-mob .orbs-in input { font-size: 16px; }
.ob-mob .orbs-acts button { font-size: var(--type-body-s); padding: 9px 14px; } .ob-mob .orbs-stat { font-size: var(--type-label); }
.ob-mob__lv { display: grid; gap: 0; } .ob-mob__r { display: none; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--dd); font-size: var(--type-label); align-items: baseline; }
.ob-mob__r.on { display: grid; animation: ob-fade .4s steps(4) both; } .ob-mob__r em { font-style: normal; color: var(--d); } .ob-mob__r b { font-weight: 400; text-transform: none; font-size: var(--type-body-s); }
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }

/* ═════════ "Why" — human statement becomes dominant ═════════ */
.ob-why h2.type-heading-lg { font-size: clamp(40px, 6.6vw, 104px); line-height: 1; letter-spacing: -.02em; }
.ob-why .ob-headcol { max-width: 1080px; }
.ob-head--quiet h2 { opacity: .96; }

/* ═════════ shared ORBI screen component ═════════ */
.ob-scr { position: relative; background: var(--ob-ink); border: 1px solid var(--ob-d); font-family: var(--ob-font); text-transform: uppercase; letter-spacing: .04em; color: var(--ob-c);
  text-shadow: 0 0 8px rgba(250,104,12,.3); container-type: inline-size; }   /* one functional frame (the old 4px + 6px outer rings made every panel a box in a box) */
.ob-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.ob-scr__hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ob-d); }
.ob-scr__hd b { font-weight: 400; font-size: 16px; } .ob-scr__hd span { display: inline-flex; align-items: center; gap: 8px; color: var(--ob-d); font-size: var(--type-body-s); white-space: nowrap; }
.ob-scr .led { width: 8px; height: 8px; background: var(--ob-c); animation: ob-pulse 1.6s steps(2) infinite; }
.ob-sec { position: relative; }

/* ═════════ 03 YOUR WORLD ═════════ */
.ob-world__map { position: relative; aspect-ratio: 1000 / 500; margin: 24px; container-type: inline-size; }
@media (max-width: 1100px) { .ob-world__map { aspect-ratio: 1000 / 600; } } @media (max-width: 900px) { .ob-world__map { aspect-ratio: 1000 / 680; } }
.ob-world__ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ob-world__ln .ln { fill: none; stroke: var(--ob-c); stroke-width: 2; }
.ob-node { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--ob-d); background: #0a0400; }
.ob-node b { font-weight: 400; font-size: clamp(12px, 1.3cqw, 15px); color: var(--ob-c); } .ob-node span { text-transform: none; font-size: clamp(12px, 1.1cqw, 13px); color: #d99a6c; }
/* centre card: a real flex column (cube · label · message) sized in map-relative units so all three always fit with even padding */
.ob-node--core { align-items: center; justify-content: center; text-align: center; border-color: var(--ob-c); background: linear-gradient(rgba(250,104,12,.14), rgba(250,104,12,.03)); gap: clamp(4px, .7cqw, 9px); padding: clamp(10px, 1.5cqw, 20px) clamp(12px, 2cqw, 26px); overflow: visible; }
.ob-node--core .ob-node__k { font-size: clamp(12px, 1.05cqw, 13px); letter-spacing: .12em; line-height: 1.2; white-space: nowrap; color: var(--ob-d); margin-top: 3px; }
.ob-node--core b { margin-top: -5px; font-size: clamp(12px, 1.55cqw, 19px); line-height: 1.25; text-transform: none; color: #fff; text-wrap: balance; max-width: 24ch; }
.ob-node__cube svg { height: clamp(53px, 6.4cqw, 84px); width: auto; }
.ob-anim .ob-world__ln .ln { stroke: var(--ob-dd); }
.ob-anim .run .ob-world__ln .ln { stroke-dasharray: 7 9; animation: ob-linecol .3s steps(3) forwards, ob-dash .3s steps(3) 1 forwards; animation-delay: calc(min(var(--i) * .04s, .4s) + .3s), calc(min(var(--i) * .04s, .4s) + .3s); }
.ob-anim .ob-node:not(.ob-node--core) { opacity: .3; } .ob-anim .run .ob-node:not(.ob-node--core) { animation: ob-on .3s steps(3) forwards; animation-delay: calc(var(--i) * .07s + .1s); }
@keyframes ob-linecol { to { stroke: var(--ob-c); } } @keyframes ob-dash { to { stroke-dashoffset: 16; } } /* dashes step once toward the Need: context flows inward */
@keyframes ob-on { to { opacity: 1; } }
@media (max-width: 767px) {
  .ob-world__map { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px; }
  .ob-world__ln { display: none; } .ob-node { position: static; width: auto !important; height: auto !important; } .ob-node--core { grid-column: 1 / -1; order: -1; padding: 14px; }
  .ob-node b { font-size: var(--type-body-s); } .ob-node span { font-size: var(--type-label); } .ob-node__cube svg { height: 64px; }
}

/* ═════════ 04 ORBI — O governs R · B · I ═════════ */
.ob-orbi { --g: 28px; position: relative; display: grid; grid-template-columns: 1fr 1.05fr 1fr; grid-template-areas: ". o ." "r c i" ". b ."; gap: var(--g); padding: 28px; }
.ob-oc--r, .ob-oc--i { align-self: center; }
.ob-oc--o { grid-area: o; } .ob-oc--r { grid-area: r; } .ob-oc--b { grid-area: b; } .ob-oc--i { grid-area: i; }
.ob-orbi__cube { grid-area: c; display: grid; place-items: center; position: relative; min-height: 190px; } .ob-orbi__cube .ob-mark-o { width: 112px; height: 112px; }   /* ORBI's own chapter: present, not dominant */
.ob-oc { --lc: var(--orbi-o); position: relative; display: flex; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--ob-dd); background: #0a0400; }
.ob-oc--o { --lc: var(--orbi-o); border: 2px solid var(--lc); background: linear-gradient(rgba(var(--orbi-o-rgb), .18), rgba(var(--orbi-o-rgb), .02)); padding: 22px; }
.ob-oc--r { --lc: var(--orbi-r); } .ob-oc--b { --lc: var(--orbi-b); } .ob-oc--i { --lc: var(--orbi-i); }
.ob-oc .l { font-style: normal; font-size: 58px; line-height: 1; color: var(--lc); text-shadow: 0 0 14px color-mix(in srgb, var(--lc) 55%, transparent); } .ob-oc--o .l { font-size: 92px; }
.ob-oc b { display: block; font-weight: 400; font-size: 16px; color: var(--lc); margin-bottom: 6px; } .ob-oc p { text-transform: none; font-size: 15px; line-height: 1.35; color: #f0d2b8; letter-spacing: .02em; }
.ob-oc--o p { font-size: 20px; color: #fff; } .ob-oc em { display: inline-block; margin-top: 10px; font-style: normal; font-size: var(--type-label); letter-spacing: .12em; color: #050200; background: var(--lc); padding: 2px 8px; }
.ob-oc::after { content: ""; position: absolute; background: var(--ob-dd); z-index: 1; }
.ob-oc--o::after { left: 50%; width: 2px; top: 100%; height: var(--g); } .ob-oc--b::after { left: 50%; width: 2px; bottom: 100%; height: var(--g); }
.ob-oc--r::after { top: 50%; height: 2px; left: 100%; width: var(--g); } .ob-oc--i::after { top: 50%; height: 2px; right: 100%; width: var(--g); }
.ob-anim .ob-oc { opacity: .3; } .ob-anim .run .ob-oc { animation: ob-on .3s steps(3) forwards; animation-delay: calc(var(--i) * .15s); }
.ob-anim .run .ob-oc::after { animation: ob-line .3s linear forwards; animation-delay: calc(var(--i) * .15s + .15s); }
@keyframes ob-line { to { background: var(--lc); } }
@media (max-width: 899px) {
  .ob-orbi { --g: 16px; grid-template-columns: 1fr; grid-template-areas: "o" "c" "r" "b" "i"; padding: 16px; } .ob-oc::after { display: none; }
  .ob-oc .l { font-size: 44px; } .ob-oc--o .l { font-size: 64px; } .ob-oc--o p { font-size: 17px; } .ob-orbi__cube { min-height: 110px; } .ob-orbi__cube .ob-mark-o { width: 80px; height: 80px; }
}

/* ═════════ 05 FORM THE WORK — dense requirement table ═════════ */
.ob-form__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 16px; border-bottom: 1px solid var(--ob-dd); font-size: var(--type-body-s); color: var(--ob-d); }
.ob-form__meta em { font-style: normal; color: var(--ob-c); margin-right: 8px; } .ob-form__meta b { font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.ob-form__cols, .ob-row { display: grid; grid-template-columns: 2.2fr 1fr 1.4fr 1.2fr; gap: 16px; padding: 14px 16px; align-items: center; }
.ob-form__cols { font-size: var(--type-label); color: var(--ob-d); border-bottom: 1px solid var(--ob-dd); }
.ob-row { border-bottom: 1px solid #2a1305; font-size: var(--type-body-s); transition: background .15s linear; } .ob-row:hover { background: rgba(250,104,12,.06); }
.ob-row .rq { text-transform: none; font-size: 17px; color: #f4d7bf; letter-spacing: .02em; } .ob-row .ev { text-transform: none; font-size: var(--type-body-s); color: var(--ob-d); }
.ow { justify-self: start; font-size: var(--type-body-s); padding: 1px 9px; } .ow--you { color: #050200; background: var(--orbi-o); } .ow--ntu, .ow--machine { color: var(--ob-cy); border: 1px solid #24505a; }
.ow--gate { color: var(--ob-red); border: 1px solid #7a2a24; } .ow--mach { color: var(--ob-cy); border: 1px solid #24505a; } .ow--orbintu { color: var(--ob-c); border: 1px solid var(--ob-d); }
.st { display: inline-flex; align-items: center; gap: 8px; font-size: var(--type-body-s); justify-self: start; } .st i { width: 8px; height: 8px; background: currentColor; } .st em { font-style: normal; }
.st--verified { color: var(--ob-ok); } .st--partial { color: var(--ob-amber); } .st--needsyou { color: #050200; background: var(--ob-c); padding: 2px 9px; animation: ob-blink 1.2s steps(2) infinite; }
.st--verifying { color: var(--ob-cy); } .st--verifying i { animation: ob-blink .8s steps(2) infinite; } .st--blocked { color: var(--ob-red); } .st--working { color: var(--ob-c); } .st--forming { color: var(--ob-dd); }
.ob-anim .ob-row { opacity: 0; } .ob-anim .run .ob-row { animation: ob-on .3s steps(3) forwards; animation-delay: calc(var(--i) * .1s + .1s); }
@media (max-width: 767px) {
  .ob-form__cols { display: none; } .ob-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 14px; } .ob-row .rq { grid-column: 1 / -1; font-size: 16px; }
  .ob-row .ev { grid-column: 1 / -1; font-size: var(--type-label); } .ob-row .ev::before { content: "EVIDENCE · "; color: var(--ob-dd); }
}

/* control */
.ob-alloc__ax { display: flex; justify-content: space-between; padding: 12px 16px; font-size: var(--type-body-s); color: var(--ob-d); border-bottom: 1px solid var(--ob-dd); } .ob-alloc__ax .gate { color: var(--ob-c); }
.ob-alloc__rows { padding: 8px 16px 16px; }
.ob-al { display: grid; grid-template-columns: minmax(150px, 1.3fr) 3fr minmax(150px, 1.4fr); gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid #2a1305; }
.ob-al .lb { font-size: var(--type-body-s); color: #f4d7bf; } .ob-al .ow { font-size: var(--type-label); }
.tk { position: relative; height: 14px; background: linear-gradient(90deg, rgba(var(--orbi-o-rgb), .28), rgba(72,224,241,.22)); border: 1px solid var(--ob-dd); }
.tk::before { content: ""; position: absolute; left: 46%; top: -18px; bottom: -18px; border-left: 1px dashed var(--ob-d); }
.mk { position: absolute; top: -5px; left: var(--p); width: 22px; height: 22px; transform: translateX(-50%); background: var(--ob-c); box-shadow: 0 0 0 3px var(--ob-ink); }
.mk--you { background: var(--orbi-o); } .mk--mach { background: var(--ob-cy); } .mk--gate { background: var(--ob-red); animation: ob-blink 1.4s steps(2) infinite; }
.ob-anim .ob-al { opacity: 0; } .ob-anim .run .ob-al { animation: ob-on .3s steps(3) forwards; animation-delay: calc(var(--i) * .09s + .1s); }
.ob-anim .mk { left: 50%; } .ob-anim .run .mk { left: var(--p); transition: left .45s var(--ease-orbi); transition-delay: calc(min(var(--i) * .06s, .3s) + .2s); }
@media (max-width: 767px) { .ob-al { grid-template-columns: 1fr; gap: 10px; padding: 14px 0 22px; } .ob-al .ow { justify-self: start; } .tk::before { top: -6px; bottom: -6px; } }

/* ═════════ 07 NTU — capsule + execution timeline ═════════ */
.ob-ntu { display: grid; gap: 20px; grid-template-columns: 5fr 7fr; align-items: stretch; }
@media (max-width: 899px) { .ob-ntu { grid-template-columns: 1fr; } }
.ob-cap__row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #2a1305; font-size: var(--type-body-s); align-items: baseline; }
.ob-cap__row em { font-style: normal; color: var(--ob-d); } .ob-cap__row b { font-weight: 400; color: #f4d7bf; text-transform: none; font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; } .tags span { border: 1px solid var(--ob-dd); padding: 4px 9px; line-height: 1.3; font-size: var(--type-label); text-transform: uppercase; color: var(--ob-c); }
.tags.ok span { color: var(--ob-ok); border-color: #1c5c36; } .tags.pf span { text-transform: none; font-size: var(--type-body-s); letter-spacing: .02em; border-color: var(--ob-dd); color: var(--ob-d); } .tags.pf span.ok { color: var(--ob-ok); border-color: #1c5c36; } .tags.lock span { color: var(--ob-amber); border-color: #7a4a17; } .tags.lock span::before { content: "▪ "; }
@media (max-width: 480px) { .ob-cap__row { grid-template-columns: 1fr; gap: 4px; } }
.ob-tl { position: relative; list-style: none; margin: 0; padding: 22px 20px 22px 48px; }
.ob-tl__rail { position: absolute; left: 27px; top: 36px; bottom: 36px; width: 2px; background: var(--ob-dd); }
.ob-tl__pkt { position: absolute; left: 23px; top: 30px; width: 10px; height: 10px; background: #fff; opacity: 0; box-shadow: 0 0 8px #fff; }
.ob-tl__s { position: relative; display: block; padding: 14px 0; } .ob-tl__s .dot { position: absolute; left: -29px; top: 19px; width: 14px; height: 14px; border: 2px solid var(--ob-c); background: var(--ob-ink); }
.ob-tl__s b { display: block; font-weight: 400; font-size: 15px; color: var(--ob-c); } .ob-tl__s span { display: block; text-transform: none; font-size: var(--type-body-s); color: #d99a6c; margin-top: 4px; letter-spacing: .02em; }
.ob-tl__s:last-child b { color: var(--ob-ok); } .ob-tl__s:last-child .dot { border-color: var(--ob-ok); background: var(--ob-ok); }
.ob-anim .ob-tl__s { opacity: .3; } .ob-anim .run .ob-tl__s { animation: ob-on .3s steps(3) forwards; animation-delay: calc(var(--i) * .13s + .1s); }
.ob-anim .run .ob-tl__pkt { animation: ob-pkt .9s steps(12, end) .15s 1 forwards; } @keyframes ob-pkt { 0% { opacity: 1; top: 30px; } 90% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 44px); } }

/* ═════════ 08 VERIFY — the dramatic break ═════════ */
.ob-sec--verify { background: #000 !important; border-block: 4px solid var(--stone-700, #292623); padding-block: clamp(56px, 9vw, 130px) !important; }
.ob-verify__big { font-family: var(--ob-font); text-transform: uppercase; font-size: clamp(30px, 7.6vw, 118px); line-height: .96; color: var(--copper-500, #fa680c); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .35em; margin: 28px 0 36px;
  text-shadow: 0 0 28px rgba(250,104,12,.4); letter-spacing: -.01em; } .ob-verify__big .ne { color: #fff; }
.ob-vf { display: grid; gap: 10px; max-width: 760px; justify-items: stretch; }
.ob-vf__blk { border: 1px solid var(--ob-d); padding: 16px 20px; background: #0a0400; font-family: var(--ob-font); text-transform: uppercase; } .ob-vf__blk em { font-style: normal; font-size: var(--type-label); color: var(--ob-d); display: block; margin-bottom: 6px; }
.ob-vf__blk b { font-weight: 400; font-size: 22px; color: #f4d7bf; } .ob-vf__ntu b { text-transform: none; } .ob-vf__orbi { border-color: var(--ob-amber); } .ob-vf__orbi b { color: var(--ob-amber); animation: ob-blink 1.4s steps(2) infinite; }
.ob-vf__orbi.done { border-color: var(--ob-ok); } .ob-vf__orbi.done b { color: var(--ob-ok); animation: none; }
.ob-vf__arr { font-style: normal; text-align: center; font-family: var(--ob-font); color: var(--ob-d); font-size: 22px; line-height: 1; }
.ob-vf__ck { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ob-dd); background: #0a0400; font-family: var(--ob-font); text-transform: uppercase; }
.ob-vf__ck li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 13px 18px; border-bottom: 1px solid #2a1305; font-size: 15px; color: #f4d7bf; } .ob-vf__ck li:last-child { border-bottom: 0; }
.ob-vf__ck .tick { font-style: normal; color: var(--ob-ok); } .ob-vf__ck b { font-weight: 400; color: var(--ob-ok); font-variant-numeric: tabular-nums; }
.ob-vf__stamp { border: 3px solid var(--ob-ok); padding: 18px 24px; text-align: center; font-family: var(--ob-font); color: var(--ob-ok); font-size: clamp(22px, 3vw, 36px); text-shadow: 0 0 18px rgba(var(--orbi-i-rgb), .5); letter-spacing: .08em; }
.ob-vf__stamp b { font-weight: 400; }
.ob-anim .ob-vf > * { opacity: 0; } .ob-anim .ob-vf.run > * { animation: ob-on .3s steps(3) forwards; } .ob-anim .ob-vf.run > *:nth-child(1) { animation-delay: .05s; } .ob-anim .ob-vf.run > *:nth-child(2) { animation-delay: .15s; }
.ob-anim .ob-vf.run > *:nth-child(3) { animation-delay: .25s; } .ob-anim .ob-vf.run > *:nth-child(4) { animation-delay: .35s; } .ob-anim .ob-vf.run > *:nth-child(5) { animation-delay: .45s; }
.ob-anim .ob-vf__ck li { opacity: 0; } .ob-anim .ob-vf.run .ob-vf__ck li { animation: ob-on .2s steps(3) forwards; animation-delay: calc(min(var(--i) * .05s, .25s) + .25s); }
.ob-anim .ob-vf.run > *:nth-child(6), .ob-anim .ob-vf.run > *:nth-child(7) { animation-delay: .6s; }
.ob-anim .ob-vf.run > *:nth-child(7) { animation: ob-stamp .4s steps(5) .6s forwards; } @keyframes ob-stamp { 0% { opacity: 0; transform: scale(1.06); } 40% { opacity: 1; background: rgba(var(--orbi-i-rgb), .25); } 100% { opacity: 1; transform: none; background: transparent; } }

/* ═════════ 09 LEARNING — calm ═════════ */
.ob-sec--quiet { background: linear-gradient(var(--stone-900, #16120f), #110e0b 50%, var(--stone-900, #16120f)); }
.ob-learn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 28px; align-items: stretch; max-width: 1040px; }
.ob-learn__c { display: grid; gap: 14px; grid-template-rows: auto 1fr auto auto; border-left: 2px solid var(--ob-dd); padding: 6px 0 6px 22px; font-family: var(--ob-font); text-transform: uppercase; }
.ob-learn__c em { font-style: normal; font-size: var(--type-body-s); color: var(--ob-c); letter-spacing: .1em; } .ob-learn__c ul { list-style: none; margin: 0; padding: 0; } .ob-learn__c li { text-transform: none; font-size: 19px; color: #e6c8ae; padding: 6px 0; letter-spacing: .02em; }
.ob-learn__c--a { opacity: .72; } .ob-learn__c--b { border-left-color: var(--ob-c); }
.ob-learn .bar { height: 6px; background: #2a1305; } .ob-learn .bar i { display: block; height: 100%; width: var(--w); background: var(--ob-c); } .ob-learn .bar i { transform-origin: left center; } .ob-anim .ob-learn .bar i { transform: scaleX(0); } .ob-anim .ob-learn.run .bar i { transform: none; transition: transform .6s var(--ease-orbi) .2s; }
.ob-learn small { font-size: var(--type-label); color: var(--ob-d); } .ob-learn small b { font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.ob-learn__arr { align-self: center; font-family: var(--ob-font); font-size: 34px; color: var(--ob-d); } .ob-note { font-family: var(--ob-font); text-transform: uppercase; font-size: var(--type-label); letter-spacing: .12em; color: var(--ob-d); }
@media (max-width: 767px) { .ob-learn { grid-template-columns: 1fr; gap: 18px; } .ob-learn__arr { transform: rotate(90deg); justify-self: start; margin-left: 22px; } }

/* ═════════ 10 ONE PERSON → TEAM — scroll-driven expansion ═════════ */
.ob-tm { position: relative; }
.ob-tm__pin { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 28px; align-items: center; }
.ob-tm--scroll { height: 330vh; } .ob-tm--scroll .ob-tm__pin { position: sticky; top: calc(var(--header-h) + 24px); height: calc(100svh - var(--header-h) - 48px); min-height: 480px; }
.ob-tm__txt { display: grid; gap: 18px; align-content: center; font-family: var(--ob-font); text-transform: uppercase; }
.ob-tm__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ob-tm__rail li { font-size: var(--type-label); color: var(--ob-dd); display: flex; gap: 10px; align-items: center; letter-spacing: .1em; } .ob-tm__rail li b { font-weight: 400; color: inherit; }
.ob-tm__rail li.on { color: var(--ob-c); } .ob-tm__rail li.on::before { content: ""; width: 8px; height: 8px; background: var(--ob-c); }
.ob-tm__ttl h3, .ob-tm__nt p { display: none; margin: 0; } .ob-tm__ttl h3.on, .ob-tm__nt p.on { display: block; }
.ob-tm__ttl h3 { font-family: var(--ob-font); font-weight: 400; font-size: clamp(36px, 5vw, 68px); line-height: 1; color: #fff; text-shadow: 0 0 20px rgba(250,104,12,.3); }
.ob-tm__nt p { text-transform: none; font-size: 16px; color: #d99a6c; max-width: 26ch; letter-spacing: .02em; }
.ob-tm:not(.ob-tm--scroll) .ob-tm__ttl h3, .ob-tm:not(.ob-tm--scroll) .ob-tm__nt p { display: none; } .ob-tm:not(.ob-tm--scroll) .ob-tm__ttl h3[data-s="3"], .ob-tm:not(.ob-tm--scroll) .ob-tm__nt p[data-s="3"] { display: block; }
.ob-tm__stage { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--ob-d); background: var(--ob-ink) radial-gradient(rgba(250,104,12,.18) 1px, transparent 1px) 0 0 / 22px 22px; font-family: var(--ob-font); text-transform: uppercase; color: var(--ob-c); box-shadow: 0 0 0 4px var(--stone-900, #16120f), 0 0 0 6px var(--stone-700, #292623); overflow: hidden; }
.ob-tm__u { position: absolute; top: 22%; width: 24%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; transition: opacity .5s steps(5), left .6s var(--ease, ease); } .ob-tm__u span { font-size: clamp(12px, 1.2vw, 13px); letter-spacing: .1em; text-align: center; text-wrap: balance; max-width: 100%; }
.ob-tm__u .priv { position: relative; width: 100%; border: 1px dashed var(--ob-d); padding: 26px 8px 10px; display: grid; place-items: center; } .ob-tm__u .priv em { position: absolute; top: 6px; left: 8px; font-style: normal; font-size: clamp(8px, .9vw, 10px); color: var(--ob-dd); letter-spacing: .12em; }
.ob-tm__u .ob-mark-o { width: 48px; height: 48px; } .ob-tm__u.u0 { left: 50%; }
.ob-tm__ring { position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1.5; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .5s steps(5); } .ob-tm__ring i { position: absolute; font-style: normal; border: 1px solid var(--ob-d); background: #0a0400; padding: 1px 8px; font-size: clamp(8px, .95vw, 11px); letter-spacing: .08em; } .ob-tm__ring i:nth-child(1) { left: -14%; top: 6%; } .ob-tm__ring i:nth-child(2) { right: -14%; top: 6%; } .ob-tm__ring i:nth-child(3) { left: -14%; bottom: 10%; } .ob-tm__ring i:nth-child(4) { right: -14%; bottom: 10%; }
.ob-tm__res { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); display: flex; gap: 10px; opacity: 0; transition: opacity .5s steps(5); } .ob-tm__res span { border: 1px solid var(--ob-d); padding: 3px 10px; font-size: clamp(8px, 1vw, 11px); background: #0a0400; }
.ob-tm__shared { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; opacity: 0; transition: opacity .5s steps(5); width: 34%; } .ob-tm__shared b { font-weight: 400; font-size: clamp(12px, 1.2vw, 13px); border: 1px solid var(--ob-c); padding: 2px 10px; background: rgba(250,104,12,.1); } .ob-tm__shared i { font-style: normal; color: var(--ob-d); line-height: 1; } .ob-tm__shared .ntus { display: flex; gap: 6px; } .ob-tm__shared .ntus span { border: 1px solid var(--ob-cy); color: var(--ob-cy); font-size: clamp(8px, 1vw, 11px); padding: 1px 8px; }
.ob-tm__u.u1, .ob-tm__u.u2 { opacity: 0; }
.ob-tm[data-step="1"] .ob-tm__ring, .ob-tm[data-step="2"] .ob-tm__ring { opacity: 1; }
.ob-tm[data-step="2"] .ob-tm__res, .ob-tm[data-step="3"] .ob-tm__res { opacity: 1; }
.ob-tm[data-step="3"] .ob-tm__u.u1, .ob-tm[data-step="3"] .ob-tm__u.u2 { opacity: 1; } .ob-tm[data-step="3"] .ob-tm__shared { opacity: 1; }
.ob-tm[data-step="3"] .ob-tm__u.u0 { left: 50%; } .ob-tm[data-step="3"] .ob-tm__u { width: 20%; } .ob-tm[data-step="3"] .ob-tm__ring { top: 20%; width: 28%; } .ob-tm[data-step="3"] .ob-tm__res { top: 60%; }
@media (max-width: 899px) { .ob-tm__pin { grid-template-columns: 1fr; gap: 16px; align-content: start; } .ob-tm--scroll { height: 300vh; } .ob-tm--scroll .ob-tm__pin { top: calc(var(--header-h) + 8px); height: calc(100svh - var(--header-h) - 24px); } .ob-tm__nt p { max-width: none; font-size: var(--type-body-s); } .ob-tm__ttl h3 { font-size: 34px; } .ob-tm__rail { display: none; } .ob-tm__txt { gap: 8px; } }

/* ═════════ 11 CAPABILITIES ═════════ */
.ob-cap2 { padding: 24px; display: grid; justify-items: center; }
.ob-cap2__core { position: relative; display: flex; align-items: center; gap: 16px; border: 1px solid var(--ob-c); background: linear-gradient(rgba(250,104,12,.14), rgba(250,104,12,.02)); padding: 12px 26px; }
.ob-cap2__core b { display: block; font-weight: 400; font-size: 22px; } .ob-cap2__core span { display: block; text-transform: none; font-size: var(--type-body-s); color: #d99a6c; margin-top: 2px; }
.ob-cap2__bus { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 34px; margin-top: 0; }
.ob-cap2__bus::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 16px; height: 2px; background: var(--ob-dd); } .ob-cap2__bus::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 16px; background: var(--ob-dd); }
.ob-cap2__bus i { justify-self: center; width: 2px; height: 100%; margin-top: 16px; background: var(--ob-dd); }
.ob-cap2__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }
.ob-cg { border: 1px solid var(--ob-dd); padding: 16px; background: #0a0400; } .ob-cg b { display: block; font-weight: 400; font-size: 15px; color: var(--ob-c); margin-bottom: 12px; letter-spacing: .1em; }
.ob-cg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .ob-cg li { border: 1px solid var(--ob-dd); padding: 3px 9px; font-size: var(--type-label); color: #e6c8ae; text-transform: none; transition: color .15s linear, border-color .15s linear, background .15s linear; }
.ob-cg li:hover { color: var(--ob-c); border-color: var(--ob-c); background: rgba(250,104,12,.08); }
.ob-anim .ob-cap2 .ob-cg { opacity: .3; } .ob-anim .ob-cap2.run .ob-cg { animation: ob-on .3s steps(3) forwards; animation-delay: calc(var(--i) * .08s + .15s); }
.ob-anim .ob-cap2__bus i, .ob-anim .ob-cap2__bus::before, .ob-anim .ob-cap2__bus::after { background: var(--ob-dd); } .ob-anim .ob-cap2.run .ob-cap2__bus i { animation: ob-bus .45s linear forwards; animation-delay: .1s; }
@keyframes ob-bus { to { background: var(--ob-c); } }
@media (max-width: 899px) { .ob-cap2__grid { grid-template-columns: 1fr 1fr; } .ob-cap2__bus { display: none; } .ob-cap2__core { margin-bottom: 16px; } }
@media (max-width: 560px) { .ob-cap2__grid { grid-template-columns: 1fr; } .ob-cap2 { padding: 14px; } .ob-cap2__core { padding: 10px 14px; } }

/* ═════════ 12 final CTA — cube returns to the neutral state ═════════ */
.ob-final__cube { display: grid; place-items: center; margin: 0 auto 8px; } .ob-final__cube svg { height: clamp(96px, 12vw, 150px); width: auto; }

/* ═════════ ORBI dock — persistent state readout ═════════ */
.ob-dock { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; background: rgba(5,2,0,.94); border: 1px solid var(--ob-d);
  font-family: var(--ob-font); text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .3s steps(4), transform .3s steps(4); pointer-events: none; box-shadow: 0 0 0 3px var(--stone-900, #16120f); }
.ob-dock.show { opacity: 1; transform: none; } .ob-dock .ob-mark-o { height: 32px; width: 32px; } .ob-dock b { display: block; font-weight: 400; font-size: var(--type-label); letter-spacing: .12em; color: var(--ob-d); } .ob-dock span { font-size: var(--type-body-s); color: var(--ob-c); letter-spacing: .06em; }
@media (max-width: 767px) { .ob-dock { right: 12px; bottom: 12px; padding: 6px 10px 6px 8px; } .ob-dock .ob-mark-o { height: 16px; width: 16px; } .ob-dock b { display: none; } .ob-dock span { font-size: var(--type-label); } }

/* ═════════ reduced motion: keep the story, drop the movement ═════════ */
@media (prefers-reduced-motion: reduce) {
  .ob-cube, .orbs-n, .orbs-led, .ob-scr .led, .st--needsyou, .mk--gate, .ob-vf__orbi b { animation: none !important; }
  .ob-monitor { transform: none !important; } .ob-tl__pkt { display: none; }
}

/* ═════════ round-2 fixes ═════════ */
/* hero headline: keep "What do you want / to make happen?" on two lines on phones */
@media (max-width: 480px) { #product h1.type-display-lg { font-size: 38px !important; line-height: 1.02 !important; } }
@media (min-width: 481px) and (max-width: 767px) { #product h1.type-display-lg { font-size: 52px !important; line-height: 1.02 !important; } }
/* team stage: intentional small-screen composition (taller stage, cubes across the top, shared layer below) */
@media (max-width: 899px) {
  .ob-tm__stage { aspect-ratio: auto; height: min(58svh, 470px); min-height: 360px; }
  .ob-tm__u { top: 8%; width: 40%; } .ob-tm[data-step="3"] .ob-tm__u { width: 29%; }
  .ob-tm__ring { top: 8%; width: 54%; } .ob-tm__ring i { font-size: var(--type-label); padding: 1px 6px; }
  .ob-tm__res { top: 50%; } .ob-tm[data-step="3"] .ob-tm__res { opacity: 0; }
  .ob-tm__shared { width: 78%; bottom: 7%; } .ob-tm__shared b { font-size: var(--type-label); } .ob-tm__u .ob-mark-o { width: 32px; height: 32px; } .ob-tm__u span { font-size: var(--type-label); letter-spacing: .05em; }
}
/* dock: slim pill on phones so it never covers content */
@media (max-width: 767px) { .ob-dock { right: auto; left: 50%; bottom: 10px; transform: translate(-50%, 10px); padding: 4px 10px 4px 6px; gap: 8px; } .ob-dock.show { transform: translate(-50%, 0); } .ob-dock .ob-mark-o { height: 16px; width: 16px; } .ob-dock span { font-size: var(--type-label); } }
/* asymmetric split: narrow sticky statement + wide instrument (breaks the heading-over-screen pattern) */
.ob-split { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .ob-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } .ob-split__t { position: sticky; top: 112px; } }
.ob-split .ob-orbi { --g: 20px; padding: 22px; } .ob-split .ob-oc { padding: 14px; gap: 12px; } .ob-split .ob-oc .l { font-size: 46px; } .ob-split .ob-oc--o .l { font-size: 72px; } .ob-split .ob-oc p { font-size: var(--type-body-s); } .ob-split .ob-oc--o p { font-size: 18px; }

/* performance: anything not on screen stops animating (toggled by IntersectionObserver in orbintu.js) */
.ob-off, .ob-off * { animation-play-state: paused !important; }
.ob-off .run, .ob-off .run *, .ob-off.run, .ob-off.run * { animation-play-state: running !important; }   /* one-time sequences finish even if scrolled past */

.ob-menu a:focus-visible, .ob-cg li:focus-visible { outline: 2px solid var(--ob-c); outline-offset: 2px; }

/* verify: on wide screens the chain reads left → right (NTU · ORBI) → (evidence) with the stamp closing full-width */
@media (min-width: 1000px) {
  .ob-vf { max-width: none; grid-template-columns: 1fr 72px 1fr; column-gap: 0; row-gap: 12px; align-items: start; }
  .ob-vf > *:nth-child(1) { grid-column: 1; grid-row: 1; } .ob-vf > *:nth-child(2) { grid-column: 1; grid-row: 2; } .ob-vf > *:nth-child(3) { grid-column: 1; grid-row: 3; }
  .ob-vf > *:nth-child(4) { grid-column: 2; grid-row: 1 / 4; align-self: center; transform: rotate(-90deg); font-size: 28px; }
  .ob-vf > *:nth-child(5) { grid-column: 3; grid-row: 1 / 4; align-self: stretch; } .ob-vf > *:nth-child(5) li { padding-block: 16px; }
  .ob-vf > *:nth-child(6) { grid-column: 1 / -1; grid-row: 4; } .ob-vf > *:nth-child(7) { grid-column: 1 / -1; grid-row: 5; }
  .ob-vf__ntu, .ob-vf__orbi { padding: 20px 24px; }
}

/* face opacity is never dimmed by state: all four faces stay at full strength */
/* pointer / drag orientation (JS sets --rx/--ry, always returns to the neutral pose; no autonomous spin) */
.ob-cube--mini { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .ob-cube { --rx: 0deg !important; --ry: 0deg !important; } [data-tilt] { cursor: var(--cursor-default); } }

/* owner + status vocabulary for the shared scenario */
.ow--human { color: #050200; background: var(--orbi-o); } .ow--shared { color: var(--ob-amber); border: 1px solid #7a4a17; } .ow--orbintu { color: var(--ob-c); border: 1px solid var(--ob-d); } .ow--orbi { color: var(--ob-c); border: 1px solid var(--ob-d); }
.st--waiting { color: var(--ob-d); } .st--pending { color: var(--ob-dd); }

/* OrbiOrbitDots: the three dots are an overlay layer inside every cube svg (same viewBox, so they scale with the cube and stay inside the orange opening) */
.ob-dots { pointer-events: none; }

/* The scraped CRT scanline overlay sat above the whole page (z 9998) and striped every cube. Removed site-wide: the cube must stay crisp. */

/* panel scanlines stay, but the cube always sits above them */
.ob-scr .ob-cube, .ob-scr [data-orbi-follow] { position: relative; z-index: 3; }

/* ── WHY ORBINTU: four steps joined by one pixel trail ─────────────────────────────────────────────────────────────
   The same visual on every screen: voxel icon tiles (tools_orbintu/pixel_icons.py) joined by a dotted pixel trail that
   draws in the direction of the work — down the icon column on narrow screens, across one row on wide screens.
   The trail turns orange and denser between "Keep judgment yours" and "Form the right work": the human-authority
   boundary. On reveal the four steps run as ONE process (below); reduced motion / no JS: the final state. */
.ob-sys { --sys-ic: 56px; --sys-gap: 20px; --sys-pad: 20px; --sys-org: var(--copper-500, #ed670f); --sys-dot: var(--stone-500, #645e54);
  display: grid; gap: 14px; margin-top: clamp(8px, 1.5vw, 16px); }
.ob-sys__lab { font-family: var(--font-caption); font-size: var(--text-caption-lg); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--text-tertiary); margin: 0; }
.ob-sys__grid { position: relative; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.ob-sys__grid::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--sys-org); }   /* active line */
.ob-sys__i { position: relative; display: grid; grid-template-columns: var(--sys-ic) minmax(0, 1fr); column-gap: var(--sys-gap); align-items: start; align-content: start; padding: var(--sys-pad) 0; min-width: 0; }
.ob-sys__ic { width: var(--sys-ic); height: var(--sys-ic); display: grid; place-items: center; background: var(--stone-800, #201c19); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ob-sys__ic svg { width: 48px; height: 48px; }   /* 24-px voxel drawing at 2 screen px per pixel */
.ob-sys__i--judgment .ob-sys__ic { box-shadow: inset 0 0 0 1px rgba(237, 103, 15, .55); }                               /* the person's cell */
.ob-sys__tx { display: grid; gap: 8px; padding-top: 2px; min-width: 0; }
.ob-sys__no { font-family: var(--font-caption); font-size: var(--type-label); line-height: 1; letter-spacing: .08em; color: var(--sys-org); }
.ob-sys__t { margin: 0; font-family: var(--font-caption); font-size: var(--text-caption-lg); line-height: 1.15; letter-spacing: 0; text-transform: uppercase; color: var(--text-primary); font-weight: 500; }
.ob-sys__d { margin: 0; font-family: var(--font-body-alt); font-size: var(--text-body-sm-alt); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty; }

/* the trail (narrow screens: down the icon column, from the bottom of one tile to the top of the next) */
.ob-sys__i:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--sys-ic) / 2 - 1px); top: calc(var(--sys-pad) + var(--sys-ic) + 6px);
  bottom: calc(var(--sys-pad) * -1 + 6px); width: 2px;
  background: repeating-linear-gradient(to bottom, var(--sys-dot) 0 2px, transparent 2px 6px); }
.ob-sys__i--judgment:not(:last-child)::before { background: repeating-linear-gradient(to bottom, var(--sys-org) 0 2px, transparent 2px 4px); }

/* the process, once (html.ob-motion only — motion.js tags .ob-sys data-reveal="why" and sets --i per step):
   label fades in → step i: icon resolves, its words follow, then its trail draws toward step i+1.
   03 gets one orange pulse on its cell: the human-authority boundary. Step gap 170 ms → the last words settle by ~1 s. */
.ob-sys__ic { position: relative; }
.ob-sys { --why-t0: 150ms; --why-step: 170ms; }
.ob-motion .ob-sys[data-reveal]:not(.is-in) .ob-sys__lab, .ob-motion .ob-sys[data-reveal]:not(.is-in) .ob-sys__grid::before { opacity: 0; }
.ob-motion .ob-sys[data-reveal] .ob-sys__lab, .ob-motion .ob-sys[data-reveal] .ob-sys__grid::before { transition: opacity 260ms var(--ease-orbi); }   /* label + its static accent fade in: no wipe */
.ob-motion .ob-sys[data-reveal]:not(.is-in) .ob-sys__ic { opacity: 0; transform: translateY(3px); }
.ob-motion .ob-sys[data-reveal] .ob-sys__ic { transition: opacity 220ms var(--ease-orbi), transform 220ms var(--ease-orbi); transition-delay: calc(var(--why-t0) + var(--i) * var(--why-step)); }
.ob-motion .ob-sys[data-reveal]:not(.is-in) .ob-sys__tx { opacity: 0; transform: translateY(6px); }
.ob-motion .ob-sys[data-reveal] .ob-sys__tx { transition: opacity 260ms var(--ease-orbi), transform 260ms var(--ease-orbi); transition-delay: calc(var(--why-t0) + var(--i) * var(--why-step) + 70ms); }
.ob-motion .ob-sys[data-reveal] .ob-sys__i:not(:last-child)::before { transform-origin: top center; transition: transform 200ms steps(5, end); transition-delay: calc(var(--why-t0) + var(--i) * var(--why-step) + 110ms); }
.ob-motion .ob-sys[data-reveal]:not(.is-in) .ob-sys__i:not(:last-child)::before { transform: scaleY(0); }
.ob-sys__i--judgment .ob-sys__ic::after { content: ""; position: absolute; inset: -4px; box-shadow: inset 0 0 0 2px var(--sys-org); opacity: 0; pointer-events: none; }
.ob-motion .ob-sys.is-in:not(.is-now) .ob-sys__i--judgment .ob-sys__ic::after { animation: ob-authority 520ms steps(4, end) calc(var(--why-t0) + 2 * var(--why-step)) 1 both; }
@keyframes ob-authority { 0% { opacity: 1; } 60% { opacity: .8; } 100% { opacity: 0; } }

/* wide screens: one row of four steps, the same trail running across at the tiles' centre line */
@media (min-width: 1024px) {
  .ob-sys { --sys-ic: 64px; --sys-col: clamp(28px, 3vw, 48px); --sys-pad: 28px; }
  .ob-sys__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sys-col); }
  .ob-sys__i { grid-template-columns: 1fr; row-gap: 22px; padding: var(--sys-pad) 0 0; }
  .ob-sys__d { max-width: 34ch; }
  .ob-sys__i:not(:last-child)::before { top: calc(var(--sys-pad) + var(--sys-ic) / 2 - 1px); bottom: auto; left: calc(var(--sys-ic) + 10px);
    right: calc(var(--sys-col) * -1 + 10px); width: auto; height: 2px;
    background: repeating-linear-gradient(to right, var(--sys-dot) 0 2px, transparent 2px 6px); }
  .ob-motion .ob-sys[data-reveal] .ob-sys__i:not(:last-child)::before { transform-origin: left center; }
  .ob-motion .ob-sys[data-reveal]:not(.is-in) .ob-sys__i:not(:last-child)::before { transform: scaleX(0); }
  .ob-sys__i--judgment:not(:last-child)::before { background: repeating-linear-gradient(to right, var(--sys-org) 0 2px, transparent 2px 4px); }
}

/* Learning: the footnote belongs to the comparison, not 60px below it */
.ob-learn + .ob-note { margin-top: calc(-1 * clamp(20px, 2.4vw, 28px)); }
/* NTU: the two panels enter as one system — equal height, the capsule's last row absorbs the height (no empty band) */
.ob-ntu > .ob-scr { display: flex; flex-direction: column; } .ob-ntu .ob-cap .ob-cap__row { flex: 1 1 auto; align-content: center; }

/* FINAL: statement → line → CTAs as one group, arriving together; no framed box, no dead band before the footer */
.ob-final { padding-block: var(--closing-cta-pad) !important; }
.ob-final .page-container > .ob-final__head { margin-bottom: clamp(20px, 2.4vw, 30px); }
.ob-final__cta { display: flex; gap: 12px; justify-content: center; width: 100%; max-width: 560px; margin-inline: auto; }
.ob-final__cta > * { flex: 1 1 0; }
@media (max-width: 639px) { .ob-final__cta { flex-direction: column; } }
 }
 }
 }
 }
 }
 }