/* =============================================================
   vunai — Creative presentation device kit (Cohere theme)
   Code/terminal surfaces use the dark "Acadia" green for contrast on
   the warm canvas; cockpits, diagrams, tabs and steppers stay light.
   Tokens inherited from style.css (:root).
   ============================================================= */

/* ---------- Syntax tokens (on dark Acadia code surface) ---------- */
.tok-kw   { color: #b3bcff; }      /* periwinkle keywords */
.tok-fn   { color: #f7f8f8; font-weight: 600; }
.tok-str  { color: #8fd6b6; }      /* green strings */
.tok-num  { color: #e6a06b; }
.tok-com  { color: #6b7280; font-style: italic; }
.tok-punc { color: #8a8f98; }
.tok-prop { color: #c3a6ff; }      /* purple props */

/* =============================================================
   1. CODE / TERMINAL  (dark Acadia surfaces)
   ============================================================= */
.code-card { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--c-green-dk); overflow: hidden; box-shadow: var(--shadow-md); }
.code-card__bar { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.code-card__file { font-family: var(--font-mono); font-size: .74rem; color: #cde0d6; display: inline-flex; align-items: center; gap: .55rem; }
.code-card__file::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c-coral); }
.code-card__copy { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: #9bb0a6; background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm); padding: .3rem .65rem; transition: color var(--t-fast), border-color var(--t-fast); }
.code-card__copy:hover { color: #fff; border-color: var(--c-coral); }
.code-card__body { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; }
.code-card__body code { font-family: var(--font-mono); font-size: .82rem; line-height: 1.75; white-space: pre; color: #cde0d6; }

.terminal { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--c-green-dk); overflow: hidden; box-shadow: var(--shadow-lg); }
.terminal__bar { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.terminal__bar i:nth-child(1){ background: var(--c-coral); }
.terminal__bar i:nth-child(2){ background: #f0b27a; }
.terminal__bar i:nth-child(3){ background: #8fd6b6; }
.terminal__bar span { margin-left: .5rem; font-family: var(--font-mono); font-size: .72rem; color: #8fa89c; }
.terminal__body { padding: 1.2rem 1.3rem; font-family: var(--font-mono); font-size: .85rem; line-height: 1.8; min-height: 60px; color: #cde0d6; }
.terminal__line .prompt { color: #8fd6b6; }
.terminal__line .cmd { color: #fff; }
.terminal__line .cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--c-coral); translate: 0 2px; animation: blink 1s steps(1) infinite; }
.terminal__out { color: #b6c8bf; margin-top: .4rem; }
.terminal__out p { margin: 0; opacity: 0; transform: translateY(4px); }
.terminal__out p.show { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.terminal__out .ok { color: #8fd6b6; }
.terminal__out .accent { color: #b3bcff; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- DiffBlock (light) ---- */
.diff { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; font-family: var(--font-mono); font-size: .84rem; line-height: 1.85; background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.diff__line { padding: .18rem 1rem .18rem 2.2rem; position: relative; white-space: pre-wrap; }
.diff__line::before { position: absolute; left: 1rem; font-weight: 700; }
.diff--rm  { background: rgba(94,106,210,.08); color: #b9b0ff; }
.diff--rm::before  { content: "−"; color: var(--c-purple); }
.diff--add { background: rgba(76,183,130,.10); color: #8fd6b6; }
.diff--add::before { content: "+"; color: var(--c-green); }
.diff__hunk { padding: .18rem 1rem; color: var(--text-muted); background: var(--surface-2); border-block: 1px solid var(--hairline); }

/* ---- ShortestPath route diagram (builds in on scroll via .reveal -> .in) ---- */
.sp { position:relative; background:transparent; border:0; box-shadow:none; padding:clamp(.5rem,1.5vw,1rem) 0; }
.sp svg { position:relative; display:block; width:100%; height:auto; }
.sp__node { fill:var(--surface-2); stroke:var(--hairline-strong); stroke-width:1; }
/* LEFT box — soft, very-rounded, FILLED (grey) */
.sp__node--start { fill:url(#sp-node-grad); stroke:var(--hairline-strong); }
/* RIGHT box — sharp-cornered, OUTLINED in white, double border + white glow */
.sp__node--end   { fill:#0b0c0e; stroke:#f1f2f5; stroke-width:1.4; filter:url(#sp-node-glow); }
.sp__node-inner  { fill:none; stroke:rgba(255,255,255,.20); stroke-width:1; }
.sp__node-hi { stroke:rgba(255,255,255,.10); stroke-width:1; }   /* top highlight (left box) */
.sp__node-div { stroke:var(--hairline); stroke-width:1; }        /* header rule (left card) */
.sp__ico { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sp__ico--in  { stroke:var(--text-secondary); }
.sp__ico--out { stroke:#f1f2f5; filter:url(#sp-glow); }
/* dotted-ring nodes — dots slowly march around each icon */
.sp__ring { fill:none; stroke-dasharray:0 8.3333; stroke-linecap:round; stroke-width:2; transform-box:fill-box; transform-origin:center; }
.sp__ring--in  { stroke:var(--text-muted); animation:sp-spin 22s linear infinite; }
.sp__ring--out { stroke:#f3f4f7; filter:url(#sp-node-glow); animation:sp-spin 16s linear infinite reverse; }
@keyframes sp-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .sp__ring--in,.sp__ring--out { animation:none; } }
.sp__node-t { fill:var(--text); font-family:var(--font-body); font-size:11px; font-weight:700; }
.sp__node-tag { font-family:var(--font-mono); font-size:7px; letter-spacing:.14em; text-transform:uppercase; }
.sp__node-tag--start { fill:var(--text-muted); }
.sp__node-tag--end   { fill:#d0d6e0; }
.sp__led--start { fill:var(--text-muted); }
.sp__led--end   { fill:#ffffff; filter:url(#sp-glow); animation:sp-led 2.2s ease-in-out infinite; }
@keyframes sp-led { 0%,100% { opacity:.45; } 50% { opacity:1; } }
.sp__node-bar--start { fill:var(--hairline-strong); }
.sp__node-bar--end   { fill:#f1f2f5; }
.sp__pin--start { fill:var(--hairline-strong); }
.sp__pin--end   { fill:#f1f2f5; }
@media (prefers-reduced-motion: reduce){ .sp__led--end { animation:none; } }
.sp__route { fill:none; stroke-dasharray:1.6 7; stroke-linecap:round; }
.sp__route--vendor { stroke:var(--hairline-strong); stroke-width:1.3; opacity:.8; }
.sp__route--vunai  { stroke:#f3f4f7; stroke-width:2.3; }   /* B&W: the chosen path is bright + bolder */
.sp__dot { fill:#0c0d0f; stroke-width:1.2; }
.sp__dot--vendor { stroke:var(--hairline-strong); }
.sp__dot--vunai  { stroke:#e6e8ed; }
.sp__wl { font-family:var(--font-mono); font-size:9px; letter-spacing:.02em; text-anchor:middle; }
.sp__wl--vendor { fill:var(--text-muted); }
.sp__wl--vunai  { fill:#c6cad2; }
.sp__cap { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; text-anchor:middle; }
.sp__cap--vendor { fill:var(--text-muted); }
.sp__cap--vunai  { fill:#c6cad2; }
.sp__pulse { filter:url(#sp-glow); }
.sp__pulse--vendor { offset-path:path("M150 140 C 205 140 205 52 262 52 L 452 52 C 512 52 512 140 568 140"); }
.sp__pulse--vunai  { offset-path:path("M150 150 C 222 150 222 196 292 196 L 426 196 C 496 196 496 150 568 150"); }
@keyframes sp-move { from { offset-distance:0%; } to { offset-distance:100%; } }
/* build-in: groups stay hidden until the block scrolls into view (.in) */
.sp [class^="g-"] { opacity:0; }
.sp.in [class^="g-"] { animation:sp-in .65s var(--ease) forwards; }
.sp.in .g-nodes  { animation-delay:.10s; }
.sp.in .g-vendor { animation-delay:.55s; }
.sp.in .g-vunai  { animation-delay:1.05s; }
.sp.in .g-caps   { animation-delay:1.35s; }
.sp.in .g-pulse  { animation-delay:1.55s; }
.sp.in .sp__pulse--vendor { animation:sp-move 6.5s linear infinite 1.55s; }
.sp.in .sp__pulse--vunai  { animation:sp-move 2.4s linear infinite 1.55s; }
@keyframes sp-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .sp [class^="g-"] { opacity:1; }
  .sp.in [class^="g-"] { animation:none; }
  .sp.in .sp__pulse--vendor, .sp.in .sp__pulse--vunai { animation:none; }
  .sp__pulse { opacity:0; }
}

/* ---- ApiCall (light, with dark accents) ---- */
.api { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; font-family: var(--font-mono); font-size: .82rem; box-shadow: var(--shadow-sm); }
.api__seg { background: var(--bg-elevated); padding: 1rem 1.1rem; }
.api__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; color: var(--text-muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.api__method { font-weight: 700; color: var(--on-coral); background: var(--accent); padding: .2rem .5rem; border-radius: var(--r-sm); }
.api__path { color: var(--text-secondary); }
.api__seg pre { margin: 0; white-space: pre-wrap; color: var(--text-secondary); line-height: 1.7; }
.api__status { color: var(--c-green); font-weight: 700; }

/* =============================================================
   2. MOCK DASHBOARDS / COCKPITS (light)
   ============================================================= */
.cockpit { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-elevated); overflow: hidden; box-shadow: var(--shadow-md); }
.cockpit__bar { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem 1rem; border-bottom: 1px solid var(--hairline); background: var(--surface-2); }
.cockpit__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-coral); flex: none; }
.cockpit__title { font-size: .85rem; letter-spacing: .01em; font-weight: var(--w-semi); color: var(--text-secondary); margin-right: auto; }

/* mac-window variant: clean window header (spark + title) with the role
   segmented control on the right; deeper rounding to match the site's app windows */
.cockpit--mac { border-radius: 14px; }
/* the macbar uses backdrop-filter, which makes browsers ignore the cockpit's
   rounded overflow clip — so round the bar's own top corners and drop the
   blur here (it sits on a solid card, no blur needed) to keep corners crisp */
.cockpit--mac .cockpit__macbar { gap: 12px; padding-left: 18px; border-top-left-radius: 13px; border-top-right-radius: 13px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cockpit--mac .macbar__title { position: static; left: auto; right: auto; margin: 0; justify-content: flex-start; color: var(--text-secondary); pointer-events: none; }
.cockpit--mac .macbar .roles { flex: 0 0 auto; z-index: 1; }
@media (max-width: 560px) {
  .cockpit--mac .macbar__title span, .cockpit--mac .macbar__title { font-size: .72rem; }
  .cockpit--mac .macbar .roles button { padding: .3rem .55rem; }
}

.roles { display: inline-flex; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 3px; }
.roles button { font-family: var(--font-body); font-size: .76rem; font-weight: var(--w-semi); color: var(--text-muted); background: transparent; border: 0; padding: .35rem .8rem; border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast); }
.roles button.active { color: var(--bg); background: var(--text); }
.roles button:hover:not(.active) { color: var(--text); }

.cockpit__body { padding: 1.1rem; display: grid; gap: 1px; background: var(--hairline); }
.cockpit__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hairline); }
@media (max-width:560px){ .cockpit__tiles { grid-template-columns: repeat(2,1fr); } }
.tile { background: var(--bg-elevated); padding: 1rem 1.1rem; }
.tile .tk { font-size: .7rem; letter-spacing: .02em; font-weight: var(--w-semi); color: var(--text-muted); }
.tile .tv { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.6rem; letter-spacing: -.02em; margin-top: .25rem; color: var(--text); }
.tile .tv em { font-style: normal; background: var(--m-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile .td { font-size: .76rem; color: var(--text-muted); margin-top: .25rem; }
.tile .td.up { color: var(--text-secondary); } .tile .td.down { color: var(--text-muted); }

.cockpit__chart { background: var(--bg-elevated); padding: 1rem 1.1rem; }
.chart-bars { display: flex; align-items: flex-end; gap: 7px; height: 110px; }
.chart-bars i { flex: 1; border-radius: 6px 6px 0 0; background: var(--surface-2); transition: height .6s var(--ease); }
.chart-bars i.hot { background: var(--m-gradient); }

/* DrillDown (light) */
.drill { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.drill__row { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--hairline); cursor: pointer; font-family: var(--font-body); font-size: .95rem; color: var(--text-secondary); transition: background var(--t-fast); background: var(--bg-elevated); }
.drill__row:last-child { border-bottom: 0; }
.drill__row:hover { background: var(--surface-2); color: var(--text); }
.drill__row .lvl { color: var(--text-muted); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: var(--w-semi); }
.drill__row .chev { margin-left: auto; transition: transform var(--t-fast); color: var(--c-coral); }
.drill__row.open .chev { transform: rotate(90deg); }
.drill__row[data-depth="1"] { padding-left: 1.8rem; } .drill__row[data-depth="2"] { padding-left: 2.8rem; } .drill__row[data-depth="3"] { padding-left: 3.8rem; }
.drill__row.hidden { display: none; }
.drill__row .tick { width: 14px; height: 14px; border-radius: 50%; background: var(--c-coral); flex:none; }

/* =============================================================
   3. TECHNICAL DIAGRAMS (SVG, light)
   ============================================================= */
.diagram { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-elevated); padding: 1.2rem; position: relative; box-shadow: var(--shadow-sm); }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .d-node { fill: var(--surface-2); stroke: var(--hairline-strong); stroke-width: 1.5; }
.diagram .d-node.hot { fill: #1b1d2b; stroke: var(--c-coral); }
.diagram .d-node.synth { fill: #16171b; stroke: var(--text-secondary); }
.diagram .d-label { fill: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 500; }
.diagram .d-cap { fill: var(--text-muted); font-family: var(--font-body); font-size: 10px; letter-spacing: .04em; }
.diagram .d-edge { fill: none; stroke: var(--hairline-strong); stroke-width: 1.5; }
.diagram .d-edge.draw { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
.diagram.in .d-edge.draw { transition: stroke-dashoffset 1s var(--ease); stroke-dashoffset: 0; }
.diagram .d-edge.flow { stroke: var(--c-coral); }
.diagram .d-edge.dis { stroke: var(--text-muted); stroke-dasharray: 4 4; }
.diagram .d-pulse { transform-box: fill-box; transform-origin: center; }
.diagram.in .d-pulse { animation: nodepulse 2.6s var(--ease) infinite; }
@keyframes nodepulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }

/* RAG enrichment — confidence meter + abstain state under the retrieval pipeline.
   Meter hue inherits the card's --cg1/--cg2 wash; fills on scroll-in (.diagram.in). */
.rag__foot { margin-top: clamp(.9rem, 2.5vw, 1.3rem); padding-top: clamp(.9rem, 2.5vw, 1.2rem); border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: .7rem; }
.rag__conf { display: flex; align-items: center; gap: .7rem; }
.rag__lbl { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); flex: none; }
.rag__track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rag__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--cg1, 245 158 11)), rgb(var(--cg2, 217 119 6))); transition: width 1.1s var(--ease); }
.diagram.in .rag__fill { width: 82%; }
.rag__pct { font-family: var(--font-display); font-weight: var(--w-bold); font-size: .95rem; letter-spacing: -.02em; color: var(--text); flex: none; }
.rag__states { display: flex; flex-wrap: wrap; gap: .5rem; }
.rag__chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: .2rem .6rem; }
.rag__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: none; }
.rag__chip.on { color: var(--text-secondary); border-color: rgb(var(--cg1, 245 158 11) / .5); }
.rag__chip.on::before { background: rgb(var(--cg1, 245 158 11)); }
@media (prefers-reduced-motion: reduce) { .rag__fill { transition: none; width: 82%; } }

/* Reasoning council — a static agent transcript: three lenses reach conflicting
   verdicts (build / buy / defer) and the synthesis preserves the dissent.
   Echoes the appwin chat aesthetic; framed as a mac window like the cockpit. */
.council { border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-elevated); overflow: hidden; box-shadow: var(--shadow-md); }
.council__log { padding: 1rem 1.1rem .35rem; display: flex; flex-direction: column; gap: .7rem; }
.council__msg { display: flex; gap: .6rem; align-items: flex-start; }
.council__av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--w-bold); font-size: .72rem; color: #fff; margin-top: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.council__msg:nth-child(1) .council__av { background: linear-gradient(135deg,#5e6ad2,#8b5cf6); }
.council__msg:nth-child(2) .council__av { background: linear-gradient(135deg,#10b981,#059669); }
.council__msg:nth-child(3) .council__av { background: linear-gradient(135deg,#f59e0b,#d97706); }
.council__b { min-width: 0; background: rgba(255,255,255,.045); border: 1px solid var(--hairline); border-radius: 4px 12px 12px 12px; padding: .55rem .7rem .6rem; }
.council__who { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .28rem; }
.council__b p { font-size: .82rem; line-height: 1.45; color: var(--text-secondary); margin: 0; }
.council__stance { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: .12rem .5rem; }
.council__stance::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.council__stance.s-build::before { background: #28c840; }
.council__stance.s-buy::before  { background: #febc2e; }
.council__stance.s-defer::before{ background: #ff5f57; }
.council__synth { display: flex; gap: .6rem; align-items: flex-start; margin: .25rem .8rem .9rem; padding: .7rem .8rem; border: 1px solid rgb(var(--cg1, 94 106 210) / .38); border-radius: var(--r-sm); background: linear-gradient(180deg, rgb(var(--cg1, 94 106 210) / .12), transparent); }
.council__spark { flex: none; margin-top: 1px; color: rgb(var(--cg2, 139 92 246)); }
.council__spark svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.council__synth-b b { display: block; font-size: .8rem; color: var(--text); letter-spacing: -.005em; }
.council__synth-b p { margin: .25rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--text-secondary); }

/* Timeline */
.timeline { position: relative; padding: 2.2rem 0 1rem; }
.timeline__axis { height: 3px; background: var(--m-gradient); border-radius: 2px; position: relative; }
.timeline__pts { display: flex; justify-content: space-between; margin-top: -2px; }
.timeline__pt { position: relative; flex: 1; }
.timeline__pt::before { content: ""; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-elevated); border: 3px solid var(--c-coral); }
.timeline__pt:last-child::before { border-color: var(--c-blue); }
.timeline__pt .yr { font-size: .76rem; letter-spacing: .04em; font-weight: var(--w-bold); color: var(--c-coral); margin-top: 1.2rem; display: block; }
.timeline__pt:last-child .yr { color: var(--c-blue); }
.timeline__pt .lab { font-size: .92rem; color: var(--text-secondary); margin-top: .3rem; display: block; max-width: 18ch; }

/* =============================================================
   4. TABS / STEPPERS / ACCORDION / HOVER-REVEAL (light)
   ============================================================= */
.tabs__nav { display: flex; flex-wrap: wrap; gap: 3px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md) var(--r-md) 0 0; padding: 4px; border-bottom: 0; }
.tabs__nav button { flex: 1; min-width: max-content; font-family: var(--font-body); font-size: .92rem; font-weight: var(--w-semi); color: var(--text-muted); background: transparent; border: 0; padding: .65rem .9rem; border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast); position: relative; }
.tabs__nav button .n { color: var(--c-coral); margin-right: .4rem; }
.tabs__nav button.active { color: var(--text); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.tabs__nav button:hover:not(.active) { color: var(--text); }
.tabs__panels { border: 1px solid var(--hairline); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.tabs__panel { display: none; padding: clamp(1.4rem,3vw,2.2rem); }
.tabs__panel.active { display: block; animation: fadeUp .5s var(--ease); }
.tabs__panel .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width:760px){ .tabs__panel .grid2 { grid-template-columns: 1fr; } }

/* Stepper */
.stepper { border-top: 1px solid var(--hairline); }
.stepper__item { border-bottom: 1px solid var(--hairline); }
.stepper__head { display: grid; grid-template-columns: 64px 1fr auto; gap: 1.2rem; align-items: center; padding: 1.3rem 0; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; color: inherit; }
.stepper__n { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.6rem; letter-spacing: -.03em; background: var(--m-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stepper__t { font-family: var(--font-display); font-weight: var(--w-semi); letter-spacing: -.01em; font-size: clamp(1.1rem,2vw,1.45rem); color: var(--text); }
.stepper__plus { color: var(--c-coral); font-family: var(--font-mono); font-size: 1.3rem; transition: transform var(--t-fast); }
.stepper__item.open .stepper__plus { transform: rotate(45deg); }
.stepper__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.stepper__item.open .stepper__body { grid-template-rows: 1fr; }
.stepper__inner { overflow: hidden; }
.stepper__pad { padding: 0 0 1.6rem 64px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start; }
@media (max-width:680px){ .stepper__pad { grid-template-columns: 1fr; padding-left: 0; } }
.stepper__pad p { color: var(--text-secondary); }

/* Accordion */
.acc { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.acc details { border-bottom: 1px solid var(--hairline); background: var(--bg-elevated); }
.acc details:last-child { border-bottom: 0; }
.acc summary { list-style: none; cursor: pointer; padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: 1rem; font-family: var(--font-display); font-weight: var(--w-semi); letter-spacing: -.01em; font-size: 1.05rem; transition: background var(--t-fast); color: var(--text); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c-coral); flex: none; }
.acc summary::after { content: "+"; margin-left: auto; color: var(--c-coral); font-family: var(--font-mono); font-size: 1.2rem; }
.acc details[open] summary::after { content: "−"; }
.acc summary:hover { background: var(--surface-2); }
.acc details > p { padding: 0 1.2rem 1.2rem 3rem; color: var(--text-secondary); }

/* HoverReveal */
.hr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
@media (max-width:760px){ .hr-grid { grid-template-columns: 1fr; } }
.hr { background: var(--bg-elevated); padding: 1.6rem; position: relative; overflow: hidden; }
.hr__face { transition: opacity var(--t-fast); }
.hr__detail { position: absolute; inset: 0; padding: 1.6rem; background: var(--c-green-dk); color: #cde0d6; opacity: 0; transform: translateY(12px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.hr:hover .hr__detail, .hr:focus-within .hr__detail { opacity: 1; transform: none; }
.hr:hover .hr__face, .hr:focus-within .hr__face { opacity: 0; }
.hr__detail code { font-family: var(--font-mono); font-size: .8rem; color: #ff9d8f; }
.hr__detail .linkarrow { color: #fff; border-color: var(--c-coral); }

/* =============================================================
   Use-case switcher (home services) — Cohere-style pill tabs +
   description + product UI mockup that bleeds off the right edge.
   Reuses the .tabs JS; .usecases modifier restyles it.
   ============================================================= */
/* Distinct from the nav pill: no capsule. Centered underline tabs with a
   mono leading index (01–05) — a technical / lab feel. */
.usecases .tabs__nav {
  counter-reset: uc;
  display: flex; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: 100%; margin: 0 auto;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  background: none; border: 0; border-radius: 0; padding: 0; overflow: visible;
}
.usecases .tabs__nav button {
  counter-increment: uc;
  position: relative; flex: none;
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .35rem .1rem .7rem;
  border: 0; border-radius: 0; background: transparent;
  font-family: var(--font-display); font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: var(--w-semi); letter-spacing: -.01em;
  color: var(--text-muted); transition: color var(--t-fast);
}
.usecases .tabs__nav button::before {
  content: counter(uc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .68em; font-weight: var(--w-med);
  color: var(--text-muted); opacity: .55; transition: color var(--t-fast), opacity var(--t-fast);
}
.usecases .tabs__nav button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-coral); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.usecases .tabs__nav button:hover:not(.active) { color: var(--text-secondary); }
.usecases .tabs__nav button.active { color: var(--text); }
.usecases .tabs__nav button.active::before { color: var(--c-coral); opacity: 1; }
.usecases .tabs__nav button.active::after { transform: scaleX(1); }

.usecases { position: relative; display: flex; flex-direction: column; }
.usecases .tabs__nav, .usecases .tabs__panels { position: relative; z-index: 1; }
/* Tab bar lives at the BOTTOM of the section (below the panels, above the
   "All services" link) — panels render first, nav last. */
.usecases .tabs__panels { order: 1; }
.usecases .tabs__nav { order: 2; margin-top: clamp(2.5rem,5vw,4rem); }
/* Decorative dotted motif — one per tab, lives in the copy column below the
   link. Each panel ships its own SVG so the pattern changes with the tab. */
/* Copy column stretches to the (tall) media column's height so the deco can be
   pinned to the bottom of the compartment via margin-top:auto. */
.usecases__copy { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.usecases__deco { margin-top: auto; padding-top: clamp(2rem, 4vw, 3.4rem); width: 320px; max-width: 86%; color: var(--hairline-strong); opacity: .75; pointer-events: none; }
.usecases__deco svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px){ .usecases__copy { display: block; } .usecases__deco { display: none; } }

.usecases .tabs__panels { border: 0; background: transparent; box-shadow: none; border-radius: 0; margin-top: 0; }
.usecases .tabs__panel { padding: 0; }
/* Left column holds the copy; right column holds the device, which is wider
   than its track (minmax(0,1fr) lets it overflow) and gets clipped at the
   viewport's right edge by #services' overflow:hidden — so the "screen" is
   cut in half on the right, like the reference. */
/* Top-aligned so the device anchors by its top edge; the media column has a
   fixed visible height while the device inside is much larger, so it spills
   past the right AND the bottom — #services' overflow:hidden crops both,
   leaving only the device's top-left corner on screen (like the reference). */
.usecases__panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem,6vw,5.5rem); align-items: start; }
@media (max-width: 900px){ .usecases__panel { grid-template-columns: 1fr; gap: 2rem; align-items: stretch; } }
.usecases__lead { font-family: var(--font-display); font-weight: var(--w-semi); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.28; letter-spacing: -.02em; color: var(--text); margin-bottom: 1.6rem; max-width: 22ch; }
.usecases__media { overflow: visible; justify-self: start; align-self: start; min-width: 0; height: clamp(360px, 33vw, 470px); clip-path: inset(0 -100vw 0 0); }   /* crop just below the device cards; clip-path cuts the device's BOTTOM at the panel edge (above the tab bar) while letting it bleed off to the right */
@media (max-width: 900px){ .usecases__media { overflow: hidden; border-radius: var(--r-lg); width: 100%; height: auto; clip-path: none; } }

/* product UI mockup — oversized device; only its top-left corner is visible.
   Styled to match the app-window aesthetic: dark surface + a clear dark/light
   text hierarchy (bright titles · medium body · dim metadata), real line icons. */
.appmock {
  /* Graphite-Mono palette — matches the hero app window */
  --af: #f4f4f6;   /* foreground (brightest) */
  --a2: #aeaeb6;   /* secondary body text */
  --am: #6f6f78;   /* muted / metadata */
  --aline: rgba(255,255,255,.06);
  /* macOS-framed grid: title bar on top, sidebar + main below */
  display: grid; grid-template-columns: 66px 1fr; grid-template-rows: auto 1fr;
  width: 80vw; min-width: 1240px; height: clamp(660px, 64vw, 900px);
  background: #0a0a0b; border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden;
}
@media (max-width: 900px){ .appmock { width: 100%; min-width: 0; height: auto; min-height: 0; } }
/* macOS title bar spans the full width above the sidebar + main */
.appmock .macbar { grid-column: 1 / -1; --lx-line: var(--aline); --lx-mut: var(--am); }
.appmock__side { width: 66px; flex: none; border-right: 1px solid var(--aline); padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; background: #060607; }
.appmock__side i { width: 36px; height: 36px; border-radius: 9px; background: transparent; border: 1px solid transparent; display: grid; place-items: center; }
.appmock__side i svg { width: 18px; height: 18px; display: block; stroke: var(--am); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.appmock__side i.on { background: rgba(255,255,255,.08); border-color: var(--aline); }
.appmock__side i.on svg { stroke: var(--af); }
.appmock__main { padding: 34px 40px; flex: 1; min-width: 0; }
.appmock__title { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: -.025em; line-height: 1.1; display: flex; align-items: center; gap: .7rem; color: var(--af); }
.appmock__badge { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .03em; border: 1px solid var(--aline); border-radius: 7px; padding: .28rem .55rem; color: var(--am); background: rgba(255,255,255,.03); }
.appmock__sub { color: var(--a2); font-size: .96rem; margin-top: .85rem; line-height: 1.55; max-width: 52ch; }
.appmock__tabs { display: flex; gap: 1.9rem; margin-top: 1.9rem; border-bottom: 1px solid var(--aline); }
.appmock__tabs span { padding-bottom: .85rem; font-size: .95rem; color: var(--am); position: relative; }
.appmock__tabs span.on { color: var(--af); font-weight: var(--w-med); }
.appmock__tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--af); border-radius: 2px; }
.appmock__search { margin-top: 1.7rem; height: 46px; border: 1px solid var(--aline); border-radius: 11px; display: flex; align-items: center; padding: 0 1rem; color: var(--am); font-size: .92rem; background: rgba(255,255,255,.02); }
.appmock__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1.7rem; }
@media (max-width: 520px){ .appmock__cards { grid-template-columns: 1fr; } }
.appmock__card { border: 1px solid var(--aline); border-radius: 14px; padding: 22px; background: rgba(255,255,255,.012); transition: border-color var(--t-fast), background var(--t-fast); }
.appmock__card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.025); }
.appmock__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--aline); margin-bottom: 16px; }
.appmock__ic svg { width: 22px; height: 22px; display: block; stroke: var(--a2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.appmock__card h5 { font-size: 1.05rem; font-weight: var(--w-semi); letter-spacing: -.01em; margin-bottom: .45rem; color: var(--af); }
.appmock__card p { font-size: .9rem; color: var(--am); line-height: 1.5; }

/* =============================================================
   Founders Spotlight — faithful port of the founders/ app
   Dark Linear-lineage theme: near-black surface, indigo accent
   (#5e6ad2), Inter, gradient monogram avatars, ambient glow + grid.
   Rendered as a dark island inside the light Cohere About page.
   ============================================================= */
.spotlight {
  --sp-fg: var(--text);
  --sp-muted: var(--text-muted);
  --sp-accent: var(--accent);
  --sp-border: var(--hairline);
  position: relative; max-width: none; width: 100%; margin-inline: auto;
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(1.5rem,3vw,2.5rem);
  cursor: none; user-select: none; caret-color: transparent; color: var(--sp-fg);
  font-family: var(--font-body);
}
@media (hover: none) { .spotlight { cursor: pointer; } }
.spotlight:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; }

/* magnetic Next cursor — coral, matches the site */
.spotlight__cursor {
  position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none;
  width: 80px; height: 80px; border-radius: 50%; background: var(--text);
  display: grid; place-items: center;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.spotlight__cursor span { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); }
.spotlight.hover .spotlight__cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .spotlight__cursor { display: none; } }

/* stacked monogram previews (top-left) */
.spotlight__stack { position: absolute; top: clamp(.8rem,2vw,1.4rem); left: 0; display: flex; opacity: .6; }
.spotlight__stack .pv { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; overflow: hidden; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: #fff; transition: transform var(--t-fast), filter var(--t-fast), opacity var(--t-fast); }
.spotlight__stack .pv:first-child { margin-left: 0; }
.spotlight__stack .pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spotlight__stack .pv.off { filter: grayscale(1); opacity: .5; }
.spotlight__stack .pv.on { box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--sp-accent); z-index: 2; }
.spotlight__stack .pv:hover { transform: scale(1.1); opacity: 1; filter: none; }

/* index (top-right) */
.spotlight__idx { position: absolute; top: clamp(.6rem,1.6vw,1.1rem); right: 0; font-family: var(--font-mono); font-size: .8rem; display: flex; align-items: baseline; gap: 3px; }
.spotlight__idx .cur { font-size: 1.5rem; font-weight: 300; color: var(--sp-fg); }
.spotlight__idx .sep, .spotlight__idx .tot { color: var(--sp-muted); }

/* quote */
.spotlight__quote { margin: clamp(1.4rem,3vw,2rem) 0 0; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.55; letter-spacing: -.01em; color: var(--sp-fg); max-width: 46ch; }
.spotlight__quote .w { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(8px); margin-right: .25em; }
.spotlight__quote .w.in { opacity: 1; transform: none; filter: none; transition: opacity .4s var(--ease), transform .4s var(--ease), filter .4s var(--ease); }

/* author */
.spotlight__author { display: flex; align-items: center; gap: 1rem; margin-top: clamp(2rem,4vw,3rem); }
.spotlight__avatar { position: relative; width: 48px; height: 48px; flex: none; }
.spotlight__avatar .ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(94,106,210,.5); z-index: 3; }
.spotlight__avatar .mono { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-family: 'Inter', var(--font-body); font-weight: 600; font-size: 1rem; color: #fff; z-index: 1; }
.spotlight__avatar .ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 2; filter: grayscale(1); transition: filter .5s var(--ease); }
.spotlight:hover .spotlight__avatar .ph { filter: grayscale(0); }
.spotlight__avatar .ph[hidden] { display: none; }
.spotlight__meta { position: relative; padding-left: 1rem; }
.spotlight__meta .bar { position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--sp-accent); }
.spotlight__meta .nm { display: block; font-size: .9rem; font-weight: 500; letter-spacing: .01em; color: var(--sp-fg); }
.spotlight__meta .rl { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); }
.spotlight__author.swap .spotlight__meta { animation: spotIn .35s var(--ease); }
@keyframes spotIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* progress */
.spotlight__progress { position: relative; height: 1px; background: var(--sp-border); margin-top: clamp(2.5rem,5vw,4rem); overflow: hidden; }
.spotlight__progress i { position: absolute; inset: 0 100% 0 0; background: var(--sp-accent); transition: right .5s var(--ease); }

.spotlight__hint { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); opacity: .5; }

/* -------------------------------------------------------------
   Founders section — the ambient backdrop (soft white glow +
   faint masked grid) spans the WHOLE part: heading + spotlight.
   The spotlight itself is the founders/ reference, tuned to the
   site: black & white, WIDE + compact. Markup + JS are original.
   ------------------------------------------------------------- */
.founders-section { position: relative; overflow: hidden; }
.founders-section::after {         /* soft white glow behind the whole part */
  content:""; position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  width:min(1280px,98%); height:780px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.085), rgba(255,255,255,.02) 46%, transparent 72%);
  filter: blur(30px);
}
.founders-section > .wrap { position: relative; z-index: 1; }

/* spotlight container — centred, no backdrop of its own now */
.founders-stage { position: relative; margin-top: clamp(1rem,2.5vw,2rem); }
/* the spotlight itself: WIDE + compact, centred, with comfortable padding */
.founders-stage .spotlight { position: relative; z-index:1; max-width: 52rem; margin-inline: auto; padding: clamp(2.6rem,4.5vw,3.4rem) clamp(1.6rem,3vw,2.6rem) clamp(1.3rem,2.6vw,1.9rem); }
.founders-stage .spotlight__stack { left: clamp(1.6rem,3vw,2.6rem); top: 1.6rem; }
.founders-stage .spotlight__idx { right: clamp(1.6rem,3vw,2.6rem); top: 1.3rem; }
/* reserve a fixed 3-line height so the compartment never resizes when the
   founder (and thus the quote length) changes */
.founders-stage .spotlight__quote { max-width: none; margin-top: clamp(1.5rem,3vw,2.1rem); font-size: clamp(1.2rem, 1.85vw, 1.5rem); min-height: 4.7em; }
@media (max-width: 700px) { .founders-stage .spotlight__quote { min-height: 7em; } }
.founders-stage .spotlight__author { margin-top: clamp(1.3rem,2.6vw,1.9rem); }
.founders-stage .spotlight__progress { margin-top: clamp(1.3rem,2.6vw,2rem); }
.founders-stage .spotlight__hint { margin-top: .9rem; }
/* black & white — to match the site's mono-chrome theme (indigo stays buttons-only):
   neutral silver monograms with dark initials, white accent line / progress / ring */
.founders-stage .spotlight { --sp-accent: #f1f2f4; }
.founders-stage .spotlight__avatar .mono,
.founders-stage .spotlight__stack .pv { color: #0b0c0e; }
.founders-stage .spotlight__avatar .ring { border-color: rgba(255,255,255,.45); }
.founders-stage .spotlight__stack .pv.on { box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px #fff; }

@media (prefers-reduced-motion: reduce) {
  .terminal__out p { opacity: 1; transform: none; }
  .terminal__line .cursor { animation: none; }
  .diagram.in .d-pulse { animation: none; opacity: 1; }
  .tabs__panel.active { animation: none; }
  .spotlight__quote .w { opacity: 1; transform: none; filter: none; }
  .spotlight__author.swap .spotlight__meta { animation: none; }
}

/* =============================================================
   Hero with "vunai" app window (Linear-style) + bottom light
   ============================================================= */
.hero--app { padding-bottom: clamp(60px,8vw,120px); overflow: hidden; }
.hero__top { max-width: 1100px; margin-inline: auto; }
/* minimal top — heading centered; cybernetic arms flank the hero */
.hero--app .hero__top { display: block; text-align: center; position: relative; z-index: 2; }
.hero__copy { min-width: 0; }
.hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; max-width: 22ch; margin-inline: auto; color: var(--text); }
.hero__meta { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.3rem; }
.hero__meta p { color: var(--text-secondary); font-size: 1rem; max-width: 50ch; margin-inline: auto; }

.hero--app { position: relative; }
.hero__arch { min-width: 0; width: 100%; display: flex; justify-content: center; }
.hero__arch .cpu-arch { display: block; width: 100%; height: auto; color: var(--hairline-strong); overflow: visible; }
/* very-transparent robot prototype — a faint, ghostly hero motif.
   The source render sits on a light backdrop, so we drop its opacity
   low and feather the rectangular edges so only the silhouette reads. */
.hero__robot {
  display: block; height: clamp(260px, 40vh, 470px); width: auto; max-width: 100%;
  opacity: .18; filter: grayscale(.25) brightness(1.05) contrast(1.02);
  -webkit-mask-image: radial-gradient(120% 92% at 50% 44%, #000 30%, rgba(0,0,0,.5) 60%, transparent 82%);
          mask-image: radial-gradient(120% 92% at 50% 44%, #000 30%, rgba(0,0,0,.5) 60%, transparent 82%);
  pointer-events: none; user-select: none;
}
@media (max-width: 880px){
  .hero--app .hero__top { grid-template-columns: 1fr; }
  .hero__arch { max-width: 480px; margin-top: .2rem; }
  .hero__robot { height: clamp(220px, 38vh, 360px); }
}

/* ---- CPU architecture: moving lights along the traces (ported from React/globals.css) ---- */
.cpu-architecture {
  offset-anchor: 10px 0px;
  animation: animation-path;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}
.cpu-line-1 { offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30"); animation-duration: 5s; animation-delay: 1s; }
.cpu-line-2 { offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 40"); animation-delay: 6s; animation-duration: 2s; }
.cpu-line-3 { offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -25"); animation-delay: 4s; animation-duration: 6s; }
.cpu-line-4 { offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65"); animation-delay: 3s; animation-duration: 3s; }
.cpu-line-5 { offset-path: path("M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35"); animation-delay: 9s; animation-duration: 4s; }
.cpu-line-6 { offset-path: path("M 94.8 95 v -46"); animation-delay: 3s; animation-duration: 7s; }
.cpu-line-7 { offset-path: path("M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28"); animation-delay: 4s; animation-duration: 4s; }
.cpu-line-8 { offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35"); animation-delay: 3s; animation-duration: 3s; }
@keyframes animation-path { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce){ .cpu-architecture { animation: none; opacity: 0; } }
.hero__teaser { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-secondary); white-space: nowrap; }
.hero__teaser .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.hero__teaser .muted { color: var(--text-muted); }
.hero__teaser:hover { color: var(--text); }

.hero__lightbottom { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 68% at 50% 116%, rgba(255,255,255,.24), rgba(255,255,255,.07) 38%, transparent 68%); }

/* app window */
.appwin { position: relative; z-index: 1; width: 100%; max-width: 1060px; margin: clamp(36px,5vw,64px) auto 0; display: grid; grid-template-columns: 208px 1fr 256px; background: #0c0d0f; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; box-shadow: 0 50px 130px -50px rgba(0,0,0,.9); min-height: 470px; text-align: left; font-size: .82rem; }
@media (max-width: 980px){ .appwin { grid-template-columns: 1fr; max-width: 620px; } .appwin__side, .appwin__right { display: none; } }

.appwin__side { border-right: 1px solid var(--hairline); padding: 14px 12px; background: #0a0b0c; }
.appwin__brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); padding: .2rem .4rem .9rem; }
.appwin__brand .mk { width: 18px; height: 18px; border-radius: 5px; background: var(--m-gradient); flex: none; }
.appwin__brand .cv { color: var(--text-muted); margin-left: auto; }
.appwin__nav a { display: flex; align-items: center; gap: .55rem; padding: .4rem .45rem; border-radius: 6px; color: var(--text-secondary); cursor: default; }
.appwin__nav a.on { background: var(--surface-2); color: var(--text); }
.appwin__nav a i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); flex: none; }
.appwin__nav a.on i { background: var(--text-muted); }
.appwin__grp { color: var(--text-muted); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: .9rem .45rem .35rem; }

.appwin__main { padding: 16px 22px; min-width: 0; }
.appwin__bar { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.appwin__bar b { color: var(--text); }
.appwin__bar-r { font-family: var(--font-mono); font-size: .72rem; }
.appwin__doc h4 { font-size: 1.3rem; margin: 16px 0 8px; }
.appwin__doc p { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; max-width: 60ch; }
.appwin__doc code { font-family: var(--font-mono); background: var(--surface-2); padding: .05rem .35rem; border-radius: 4px; font-size: .82em; color: var(--text); }
.appwin__act { margin-top: 20px; }
.appwin__act h5 { font-size: .9rem; margin-bottom: 10px; color: var(--text); }
.appwin__row { color: var(--text-muted); padding: .3rem 0; }
.appwin__row .who { color: var(--text-secondary); font-weight: 500; }
.appwin__row b { color: var(--text-secondary); font-weight: 600; }
.appwin__comment { border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 12px; margin-top: 10px; color: var(--text-secondary); line-height: 1.5; }
.appwin__comment .who { color: var(--text); font-weight: 600; }

.appwin__right { border-left: 1px solid var(--hairline); padding: 14px; }
.appwin__prop { display: flex; align-items: center; gap: .4rem; color: var(--text-secondary); padding: .45rem 0; }
.appwin__prop .st { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text-muted); flex: none; }
.appwin__prop .muted { color: var(--text-muted); }
.appwin__agent { margin-top: 14px; border: 1px solid var(--hairline); border-radius: 10px; background: #0a0b0c; padding: 12px; }
.appwin__agent .hd { display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.appwin__agent p { color: var(--text-secondary); font-size: .78rem; line-height: 1.5; margin-bottom: 7px; }
.appwin__agent .muted { color: var(--text-muted); }
.appwin__input { margin-top: 6px; border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 10px; color: var(--text-muted); font-size: .78rem; }

/* =============================================================
   Hero animated shader background (CSS recreation of the
   monochrome MeshGradient + pulsing light blobs)
   ============================================================= */
.hero__shader {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(55% 60% at 24% 18%, #6a6c77 0%, transparent 62%),
    radial-gradient(50% 55% at 84% 12%, #4c4e58 0%, transparent 60%),
    radial-gradient(60% 60% at 76% 88%, #565862 0%, transparent 64%),
    radial-gradient(45% 45% at 32% 26%, rgba(255,255,255,.30) 0%, transparent 58%),
    #0c0d10;
  background-size: 200% 200%, 185% 185%, 220% 220%, 165% 165%, 100% 100%;
  animation: meshmove 22s ease-in-out infinite alternate;
}
@keyframes meshmove {
  0%   { background-position:   0% 0%, 100% 0%, 100% 100%,  0% 100%, 0 0; }
  50%  { background-position:  45% 35%, 55% 45%, 45% 55%, 55% 45%, 0 0; }
  100% { background-position: 100% 100%, 0% 100%,  0% 0%, 100% 0%, 0 0; }
}
/* pulsing light blobs (the component's "lighting overlay") */
.hero__shader span { position: absolute; border-radius: 50%; filter: blur(70px); display: block; animation: heroblob 7s ease-in-out infinite; }
.hero__shader .b1 { width: 460px; height: 460px; top: 8%; left: 22%; background: rgba(255,255,255,.20); }
.hero__shader .b2 { width: 380px; height: 380px; bottom: 10%; right: 18%; background: rgba(255,255,255,.15); animation-delay: 1.4s; }
.hero__shader .b3 { width: 320px; height: 320px; top: 40%; right: 36%; background: rgba(210,215,240,.14); animation-delay: .7s; }
@keyframes heroblob { 0%,100% { opacity:.45; transform: scale(1); } 50% { opacity:.9; transform: scale(1.18); } }

/* very light scrim only behind the headline text for legibility */
.hero--app .hero__top { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .hero__shader { animation: none; }
  .hero__shader span { animation: none; }
}

/* ===== appwin polish: emojis, avatars, chips, search ===== */
.appwin__search { margin: 2px 2px 12px; padding: .5rem .6rem; border: 1px solid var(--hairline); border-radius: 8px; color: var(--text-muted); font-size: .78rem; background: rgba(255,255,255,.02); }
.appwin__nav a { gap: .5rem; }
.appwin__nav a .em { width: 18px; text-align: center; font-size: .92em; flex: none; filter: saturate(1.05); }
.appwin__row { display: flex; align-items: baseline; gap: .45rem; }
.appwin__row .em { width: 18px; text-align: center; flex: none; }

.appwin__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.chip { font-size: .72rem; line-height: 1; padding: .34rem .6rem; border: 1px solid var(--hairline); border-radius: 999px; color: var(--text-secondary); background: var(--surface-2); white-space: nowrap; }

.av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .6rem; font-weight: 700; color: #fff; flex: none; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.av--a { background: linear-gradient(135deg,#5e6ad2,#9aa2f0); }
.av--h { background: linear-gradient(135deg,#3a8ed8,#4cb782); }
.av.sm { width: 18px; height: 18px; font-size: .5rem; }

.appwin__comment { display: flex; align-items: flex-start; gap: .6rem; }
.appwin__comment .bd { min-width: 0; }

.appwin__agent { background: linear-gradient(180deg, rgba(94,106,210,.10), transparent 60%), #0a0b0c; border-color: rgba(94,106,210,.25); }
.appwin__agent .hd { gap: .4rem; }
.appwin__input { background: rgba(255,255,255,.02); }

/* ===== appwin: monochrome line icons (lucide-style) ===== */
.appwin svg.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--text-muted); vertical-align: -3px; }
.appwin__nav a .em { display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.appwin__nav a .em svg.ic { color: var(--text-secondary); vertical-align: middle; }
.appwin__nav a.on .em svg.ic { color: var(--text); }
.appwin__row .em { display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.appwin__row .em svg.ic { vertical-align: middle; }
.appwin__doc h4 { display: flex; align-items: center; gap: .5rem; }
.appwin__doc h4 svg.ic { width: 18px; height: 18px; color: var(--text-secondary); vertical-align: middle; }
.appwin__act h5 { display: flex; align-items: center; gap: .45rem; }
.appwin__act h5 svg.ic { width: 15px; height: 15px; vertical-align: middle; }
.chip svg.ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; color: var(--text-secondary); }
.appwin__search { display: flex; align-items: center; gap: .5rem; }
.appwin__search svg.ic { width: 14px; height: 14px; }
.appwin__bar svg.ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--text-muted); }
.appwin__prop svg.ic { width: 15px; height: 15px; vertical-align: -3px; color: var(--text-secondary); }
.appwin__agent .hd { display: flex; align-items: center; justify-content: space-between; }
.appwin__agent .hd-l { display: inline-flex; align-items: center; gap: .45rem; }
.appwin__agent .hd-l svg.ic { color: var(--text); }
.appwin__agent p svg.ic { width: 14px; height: 14px; margin-right: .25rem; vertical-align: -2px; }
.appwin__input { display: flex; align-items: center; gap: .45rem; }
.appwin__input svg.ic { width: 14px; height: 14px; }

/* ===== appwin: icon alignment + clickable sidebar ===== */
.appwin svg.ic { vertical-align: middle; }
.appwin__row { align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip svg.ic { margin-right: 0; }
/* sidebar items are real links now */
.appwin__nav a { cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.appwin__nav a:hover { background: var(--surface-2); color: var(--text); }
.appwin__nav a:hover .em svg.ic { color: var(--text); }
.appwin__nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* =============================================================
   appwin — multi-screen switcher (premium in-window screens)
   ============================================================= */
.appwin { grid-template-columns: 208px 1fr; }
.appwin__body { min-width: 0; position: relative; }
.appwin__screen { display: none; }
.appwin__screen.active { display: block; animation: fadeUp .4s var(--ease); }

.appwin__tabs2 { display: inline-flex; gap: 1.2rem; }
.appwin__tabs2 i { font-style: normal; color: var(--text-muted); font-size: .82rem; position: relative; }
.appwin__tabs2 i.on { color: var(--text); }
.appwin__tabs2 i.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--text); }

.pill { font-size: .72rem; font-weight: 600; font-style: normal; padding: .2rem .55rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill--ok   { color: #5bbf8a; background: rgba(91,191,138,.12); }
.pill--warn { color: #d9a441; background: rgba(217,164,65,.12); }
.pill--bad  { color: #d96a5b; background: rgba(217,106,91,.12); }

.ov { display: grid; grid-template-columns: 1fr 256px; }
@media (max-width: 820px){ .ov { grid-template-columns: 1fr; } }
.ov__doc { padding: 18px 24px; min-width: 0; }
.ov__rail { border-left: 1px solid var(--hairline); padding: 16px; }

.feed { padding: 16px 22px; display: grid; gap: 12px; }
.feed__item { border: 1px solid var(--hairline); border-radius: 12px; padding: 15px 17px; background: var(--bg-elevated); transition: border-color var(--t-fast); }
.feed__item:hover { border-color: var(--hairline-strong); }
.feed__h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.feed__h h4 { font-size: 1.05rem; }
.feed__s { margin: .45rem 0 .55rem; }
.feed__item p, .feed__item ul { color: var(--text-secondary); font-size: .88rem; line-height: 1.55; margin: 0; }
.feed__item ul { padding-left: 1.1rem; list-style: disc; display: grid; gap: .2rem; }
.feed__r { margin-top: .8rem; color: var(--text-muted); font-size: .78rem; display: flex; align-items: center; gap: .35rem; }
.feed__r svg.ic { width: 13px; height: 13px; }

.itable { padding: 6px 14px 16px; font-size: .84rem; }
.itable__head, .itable__row { display: grid; grid-template-columns: 2.2fr .9fr 1fr .8fr .7fr; align-items: center; gap: .6rem; padding: .6rem .6rem; }
.itable__head { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--hairline); }
.itable__row { border-bottom: 1px solid var(--hairline); transition: background .2s; }
.itable__row:hover { background: var(--surface-2); }
.itable__row .nm { display: flex; align-items: center; gap: .55rem; color: var(--text); min-width: 0; }
.itable__row.sub .nm { padding-left: 1.8rem; color: var(--text-secondary); font-weight: 400; }
.itable .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dot--a{ background:#8a8f98 } .dot--b{ background:#6ea8fe } .dot--c{ background:#5bbf8a } .dot--d{ background:#d9a441 }
.spark { width: 54px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kan { padding: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: start; }
@media (max-width: 820px){ .kan { grid-template-columns: 1fr; } }
.kan__h { display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); font-size: .82rem; margin-bottom: 9px; }
.kan__h span { display: inline-flex; align-items: center; gap: .4rem; }
.kan__h svg.ic { width: 13px; height: 13px; }
.kan__h b { color: var(--text-muted); font-weight: 600; }
.kan__col { background: rgba(255,255,255,.02); border: 1px solid var(--hairline); border-radius: 11px; padding: 11px; display: grid; gap: 9px; align-content: start; }
.kcard { background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: 10px; padding: 11px 12px; transition: border-color .2s, transform .2s; }
.kcard:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.kcard .kid { font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); }
.kcard h6 { font-size: .9rem; font-weight: 600; margin: .3rem 0 .55rem; color: var(--text); line-height: 1.3; }

.ins { padding: 16px 20px; display: grid; gap: 14px; }
.ins__metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.metric { border: 1px solid var(--hairline); border-radius: 12px; padding: 15px 17px; background: var(--bg-elevated); }
.metric .mk { color: var(--text-muted); font-size: .76rem; }
.metric b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; margin-top: .25rem; }
.ins__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
@media (max-width: 820px){ .ins__metrics, .ins__grid { grid-template-columns: 1fr; } }
.panel2 { border: 1px solid var(--hairline); border-radius: 12px; padding: 15px 17px; background: var(--bg-elevated); }
.panel2__h { color: var(--text-secondary); font-size: .82rem; margin-bottom: 14px; }
.bars2 { display: flex; align-items: flex-end; gap: 7px; height: 150px; }
.bars2 i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #e2e4ea, #4a4a52); }
.itable--mini .itable__row2 { display: flex; align-items: center; justify-content: space-between; padding: .5rem .1rem; border-bottom: 1px solid var(--hairline); font-size: .84rem; color: var(--text-secondary); }
.itable--mini .itable__row2:last-child { border-bottom: 0; }
.itable--mini .itable__row2 b { color: var(--text); font-family: var(--font-mono); font-size: .8rem; }


/* =============================================================
   LINEAR-FIDELITY PASS — scoped to .appwin only.
   Matches the reference app screens: dark shell, status colours,
   type sizes, sidebar styling. (Rest of the site stays monochrome.)
   ============================================================= */
.appwin {
  background: #0f0f12;
  border-color: rgba(255,255,255,.08);
  font-size: 13px; line-height: 1.45;
  --lx-fg: #e9e9ec; --lx-2: #b6b6bd; --lx-mut: #7c7c85; --lx-faint: #62626b;
  --lx-line: rgba(255,255,255,.07);
  --lx-ok: #4cb782; --lx-warn: #e2a33c; --lx-bad: #eb5e57; --lx-blue: #5b7cfa;
}
/* sidebar */
.appwin__side { background: #0b0b0d; border-right: 1px solid var(--lx-line); padding: 12px 10px; }
.appwin__brand { font-size: .95rem; color: var(--lx-fg); padding: .25rem .4rem .8rem; }
.appwin__brand .cv { color: var(--lx-faint); }
.appwin__search { background: rgba(255,255,255,.035); border: 1px solid var(--lx-line); border-radius: 7px; color: var(--lx-faint); font-size: .8rem; padding: .42rem .55rem; margin: 0 0 12px; }
.appwin__search svg.ic { color: var(--lx-faint); }
.appwin__nav { display: grid; gap: 1px; }
.appwin__nav a { font-size: .82rem; color: var(--lx-2); padding: .34rem .5rem; border-radius: 6px; gap: .55rem; }
.appwin__nav a .em { width: 16px; }
.appwin__nav a .em svg.ic { width: 15px; height: 15px; color: var(--lx-mut); }
.appwin__nav a:hover { background: rgba(255,255,255,.05); color: var(--lx-fg); }
.appwin__nav a.on { background: rgba(255,255,255,.08); color: #fff; }
.appwin__nav a.on .em svg.ic { color: var(--lx-fg); }
.appwin__grp { color: var(--lx-faint); font-size: .66rem; letter-spacing: .04em; padding: .85rem .5rem .3rem; }
/* body + top bar */
.appwin__body { background: #0f0f12; }
.appwin__bar { padding: 12px 18px; color: var(--lx-mut); font-size: .8rem; border-bottom: 1px solid var(--lx-line); }
.appwin__bar b { color: var(--lx-fg); font-weight: 600; }
.appwin__bar svg.ic { color: var(--lx-faint); }
/* left side of the bar: star · title · ⋯ — all on one row, properly aligned */
.appwin__bar-l { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.appwin__bar-l svg.ic { display: inline-block; flex: 0 0 auto; }
.appwin__bar-more { color: var(--lx-mut); letter-spacing: .08em; font-size: .9rem; line-height: 1; }
.appwin__tabs2 i { font-size: .82rem; color: var(--lx-mut); }
.appwin__tabs2 i.on { color: var(--lx-fg); }
.appwin__tabs2 i.on::after { background: var(--lx-fg); }

/* status — inline colored dot + text (no filled pill), like Linear */
.pill { background: transparent; padding: 0; gap: .4rem; font-weight: 500; font-size: .8rem; }
.pill::before { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.pill--ok { color: var(--lx-ok); } .pill--warn { color: var(--lx-warn); } .pill--bad { color: var(--lx-bad); }

/* OVERVIEW */
.ov__doc h4 { font-size: 1.35rem; color: var(--lx-fg); }
.ov__doc p, .appwin__doc p { color: var(--lx-2); }
.appwin__doc code { background: rgba(255,255,255,.06); color: var(--lx-fg); }
.appwin__act h5 { color: var(--lx-fg); }
.appwin__row { color: var(--lx-mut); }
.appwin__row .who { color: var(--lx-2); }
.appwin__comment { border-color: var(--lx-line); }
.ov__rail { border-left: 1px solid var(--lx-line); }
.appwin__prop { color: var(--lx-2); }
.appwin__prop .muted { color: var(--lx-mut); }
.chip { background: rgba(255,255,255,.05); border-color: var(--lx-line); color: var(--lx-2); }

/* ===== OVERVIEW polish: alignment · spacing · type scale · text hierarchy ===== */
/* roomier content padding so it breathes like a real app view */
.appwin--fixed .appwin__screen[data-screenid="overview"].active .ov__doc { padding: 22px 28px 26px; }
.ov__rail { padding: 20px 18px; }

/* title — brightest text, tight tracking, clear space below */
.ov__doc h4 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; gap: .55rem; margin: 0; }
.ov__doc h4 svg.ic { width: 19px; height: 19px; color: var(--lx-mut); }

/* chips row sits just under the title with even rhythm */
.ov__doc .appwin__chips { margin: 13px 0 16px; gap: 7px; }

/* body copy — medium gray, comfortable measure + leading */
.ov__doc p { font-size: .875rem; line-height: 1.7; color: var(--lx-2); max-width: 64ch; margin: 0; }
.ov__doc p b { color: var(--lx-fg); font-weight: 600; }
.ov__doc code { font-size: .8em; padding: .08rem .4rem; }

/* Activity — section heading with generous space above, dimmer than the title */
.appwin__act { margin-top: 28px; }
.appwin__act h5 { font-size: .82rem; font-weight: 600; color: var(--lx-fg); margin-bottom: 14px; gap: .5rem; }
.appwin__act h5 svg.ic { color: var(--lx-mut); }

/* activity rows — consistent vertical rhythm, dim metadata */
.appwin__row { padding: .42rem 0; font-size: .82rem; color: var(--lx-mut); gap: .5rem; }
.appwin__row .who { color: var(--lx-fg); font-weight: 500; }
.appwin__row b { color: var(--lx-2); font-weight: 600; }
.appwin__row > span:last-child { color: var(--lx-faint); }
.appwin__row .em svg.ic { color: var(--lx-mut); }

/* comments — card with steadier padding + internal spacing */
.appwin__comment { padding: 12px 14px; margin-top: 12px; border-radius: 9px; gap: .7rem; background: rgba(255,255,255,.015); }
.appwin__comment .bd { font-size: .82rem; line-height: 1.55; color: var(--lx-2); }
.appwin__comment .who { color: var(--lx-fg); font-weight: 600; }
.appwin__comment .muted { color: var(--lx-faint); font-weight: 400; }
.appwin__comment .accent-text { color: #8a93ff; font-weight: 500; }

/* right rail — evenly spaced property rows, dim label / brighter value */
.ov__rail .appwin__prop { padding: .5rem 0; font-size: .82rem; color: var(--lx-2); gap: .5rem; }
.ov__rail .appwin__prop .muted { color: var(--lx-mut); min-width: 58px; display: inline-block; }
.ov__rail .appwin__prop .st { width: 10px; height: 10px; border-width: 2px; }
.ov__rail .appwin__chips { gap: 7px; }

/* PULSE feed */
.feed__item { background: transparent; border: 0; border-bottom: 1px solid var(--lx-line); border-radius: 0; padding: 18px 4px; }
.feed__item:hover { border-color: var(--lx-line); }
.feed__h h4 { font-size: 1.05rem; color: var(--lx-fg); font-weight: 600; }
.feed__h .muted { color: var(--lx-mut); font-size: .82rem; }
.feed__item p, .feed__item ul { color: var(--lx-2); font-size: .88rem; }
.feed__r { color: var(--lx-mut); }

/* INITIATIVES table */
.itable__head { color: var(--lx-faint); border-color: var(--lx-line); }
.itable__row { border-color: var(--lx-line); }
.itable__row:hover { background: rgba(255,255,255,.03); }
.itable__row .nm { color: var(--lx-fg); }
.itable__row.sub .nm { color: var(--lx-2); }
.itable__row .muted { color: var(--lx-mut); }
.spark { stroke: var(--lx-mut); }

/* KANBAN */
.kan__h { color: var(--lx-2); }
.kan__h b { color: var(--lx-mut); }
.kan__col { background: rgba(255,255,255,.018); border-color: var(--lx-line); }
.kcard { background: #15151a; border-color: var(--lx-line); }
.kcard:hover { border-color: rgba(255,255,255,.14); }
.kcard .kid { color: var(--lx-mut); }
.kcard h6 { color: var(--lx-fg); }
.kan__col:nth-child(1) .kan__h svg.ic { color: var(--lx-mut); }
.kan__col:nth-child(2) .kan__h svg.ic { color: var(--lx-warn); }
.kan__col:nth-child(3) .kan__h svg.ic { color: var(--lx-ok); }

/* INSIGHTS */
.metric { background: transparent; border-color: var(--lx-line); }
.metric .mk { color: var(--lx-mut); }
.metric b { color: var(--lx-fg); }
.panel2 { background: transparent; border-color: var(--lx-line); }
.panel2__h { color: var(--lx-2); }
.bars2 i { background: linear-gradient(180deg, #5b7cfa 0%, #5b7cfa 80%, #e8c14a 80%, #e8c14a 100%); border-radius: 3px 3px 0 0; }
.itable--mini .itable__row2 { color: var(--lx-2); border-color: var(--lx-line); }
.itable--mini .itable__row2 b { color: var(--lx-fg); }

/* agent panel — Linear's subtle dark card (less indigo glow for fidelity) */
.appwin__agent { background: #15151a; border-color: var(--lx-line); }
.appwin__agent .hd { color: var(--lx-fg); }
.appwin__agent p { color: var(--lx-2); }
.appwin__input { border-color: var(--lx-line); color: var(--lx-mut); }


/* ===== HARDEN: icons never balloon or stack above their label ===== */
svg.ic { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: middle; }
.appwin__nav a, .appwin__row, .appwin__prop, .appwin__doc h4, .ov__doc h4,
.appwin__act h5, .feed__r, .appwin__search, .appwin__input, .kan__h span,
.pill, .chip {
  display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
}
.pill, .chip, .kan__h span { display: inline-flex; }
.appwin__nav a > span.em { flex: 0 0 auto; }


/* ===== Fixed app-window size: 1346 x 734, centered on the viewport ===== */
.appwin--fixed {
  width: min(1346px, 94vw);
  height: 734px;
  min-height: 0;
  max-width: none;
  margin: clamp(36px,5vw,64px) 0 0;
  position: relative; left: 50%; transform: translateX(-50%);  /* center on viewport, escape the wrap */
  opacity: 1;
}
.appwin--fixed .appwin__body { overflow: hidden; }
.appwin--fixed .appwin__screen.active { height: 100%; overflow-y: auto; }
.appwin--fixed .appwin__side { overflow-y: auto; }
@media (max-width: 980px){
  .appwin--fixed { width: 100%; height: auto; left: auto; transform: none; }
  .appwin--fixed .appwin__screen.active { height: auto; overflow: visible; }
}

/* ===== macOS window chrome — frame the app like a native Mac app on a display ===== */
/* the title bar spans the full width above the sidebar + body */
.appwin { grid-template-rows: auto 1fr; }
.macbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-bottom: 1px solid var(--lx-line, rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.macbar__lights { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; z-index: 1; }
/* triangle "lights": up · down · up (red · yellow · green) */
.macbar__lights i { width: 13px; height: 12px; display: block; border-radius: 0; box-shadow: none; }
.macbar__lights .r { background: #ff5f57; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }   /* normal (points up) */
.macbar__lights .y { background: #febc2e; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }      /* upside down */
.macbar__lights .g { background: #28c840; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }    /* normal (points up) */
/* centred window title with the vunai spark */
.macbar__title {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .01em;
  color: var(--lx-mut, #7c7c85); pointer-events: none;
}
.macbar__fav { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #9aa2f0; display: inline-block; }
.macbar__pad { flex: 1 1 auto; }
/* macOS-y outer frame: deeper rounding + a soft top highlight */
.appwin--fixed { border-radius: 16px; box-shadow: 0 50px 130px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
@media (max-width: 980px){ .macbar { height: 40px; } }

/* =============================================================
   Overview agent → CHATBOX, faithful to the reference video
   (GitHub-Copilot style): reasoning lines stream in with a
   gray→white→gray TEXT SHIMMER while "working", then commit to a
   clean log → divider → "Worked for 2min" → completed → result
   link → draft branch chip → message input with attach + send.
   ============================================================= */
/* the rail holds only the properties now (the chatbox floats over the content) */
.ov { grid-template-columns: 1fr 248px; }
@media (max-width: 820px){ .ov { grid-template-columns: 1fr; } }
.ov__rail { display: flex; flex-direction: column; min-height: 0; }

/* let the overview screen fill the window so the floating panel has a tall body
   to anchor against. Scope to .active so the overview (and the chatbox inside it)
   is hidden on the other screens — the panel belongs to Overview only. */
.appwin--fixed .appwin__screen[data-screenid="overview"].active { display: flex; flex-direction: column; }
.appwin--fixed .appwin__screen[data-screenid="overview"].active .ov { flex: 1 1 auto; min-height: 0; }
.ov { min-height: 560px; }
@media (max-width: 820px){ .ov { min-height: 0; } }

/* FLOATING panel — anchored to the bottom-right of the window, sitting on
   top of the content (like the GitHub Copilot panel in the reference). It is
   positioned against .appwin__body (position:relative) so it overlaps both
   the properties rail and the doc, and does not scroll with the content. */
.agentbox {
  position: absolute; right: 18px; bottom: 18px; z-index: 30;
  width: 342px; height: 64%; min-height: 300px;
  display: flex; flex-direction: column;
  border: 1px solid var(--lx-line); border-radius: 12px;
  background: #1c1c1f;
  box-shadow: 0 26px 70px -14px rgba(0,0,0,.9);
  overflow: hidden;
}
.agentbox__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--lx-line);
  font-weight: 600; color: var(--lx-fg); font-size: .8rem; flex: 0 0 auto;
}
.agentbox__hd .hd-l { display: inline-flex; align-items: center; gap: .5rem; }
.agentbox__logo { width: 22px; height: 22px; border-radius: 50%; background: #2b2b30; display: inline-grid; place-items: center; flex: 0 0 auto; }
.agentbox__logo svg.ic { width: 14px; height: 14px; color: #fff; }
.agentbox__x { color: var(--lx-mut); font-size: 1.05rem; line-height: 1; cursor: default; }

.agentbox__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 13px; scroll-behavior: smooth; }
.agentbox__log::-webkit-scrollbar { width: 9px; }
.agentbox__log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 9px; border: 2px solid #1c1c1f; }

/* THINKING state — shown first on load: a dotted square whose cells
   fill one-by-one with white, beside a "Thinking…" label */
.agentbox__thinking { display: flex; align-items: center; gap: .6rem; color: #c9c9cf; font-size: .82rem; padding: 2px 0; }
.agentbox__thinking.hide { display: none; }
.agentbox__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 22px; height: 22px; flex: 0 0 auto; }
/* each cell stays dim until JS turns it .on — they fill one by one,
   cumulatively (1st, then 2nd, then 3rd …) and stay white */
.agentbox__grid i { width: 100%; aspect-ratio: 1; border-radius: 1px; background: rgba(255,255,255,.16); transition: background .18s ease; }
.agentbox__grid i.on { background: #ffffff; }
.agentbox__tk { letter-spacing: .01em; }
/* the greeting waits fully collapsed (no reserved space) while "Thinking…"
   shows; devices.js drops .is-pending and then fades it in via .chatmsg.in */
.agentbox .chatmsg.is-pending { display: none; }

/* the completed log: every node is collapsed until the reveal, then all
   appear together (once) and stay — no looping */
.agentbox [data-step] { display: none; }
.agentbox [data-step].in { display: block; animation: stepin .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes stepin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* reasoning line — light gray text, like the video */
.agentbox__step { font-size: .8rem; line-height: 1.55; color: #c9c9cf; }
.agentbox__step.agentbox__muted { color: var(--lx-mut); }

/* thin divider before the result block */
.agentbox__hr { height: 1px; background: var(--lx-line); margin: 3px 0; }

/* result link (blue), like the PR url */
.agentbox__link { font-size: .8rem; line-height: 1.5; color: #6c9bff; text-decoration: none; word-break: break-all; }
.agentbox__link:hover { text-decoration: underline; }

/* draft branch chip card */
.agentbox__pr { border: 1px solid var(--lx-line); border-radius: 9px; padding: 11px 13px; background: rgba(255,255,255,.015); }
.agentbox__pr .pr-t { display: flex; align-items: center; gap: .45rem; font-size: .77rem; color: var(--lx-fg); line-height: 1.45; }
.agentbox__pr .pr-t svg.ic { width: 15px; height: 15px; color: var(--lx-mut); flex: 0 0 auto; }
.agentbox__pr .pr-draft { color: var(--lx-mut); font-weight: 500; }
.agentbox__pr .pr-id { color: var(--lx-mut); }
.agentbox__pr .pr-b { margin-top: 7px; font-family: var(--font-mono); font-size: .71rem; color: var(--lx-mut); }

/* message input — placeholder left, attach + circular send on the right */
.agentbox__input { display: flex; align-items: center; gap: .6rem; margin: 8px 12px 12px; padding: 11px 12px; border: 1px solid var(--lx-line); border-radius: 12px; color: var(--lx-mut); flex: 0 0 auto; background: #161618; }
.agentbox__input .ph { flex: 1 1 auto; font-size: .78rem; }
.agentbox__tools { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.agentbox__tools > svg.ic { width: 17px; height: 17px; color: var(--lx-mut); }
.agentbox__send { width: 26px; height: 26px; border-radius: 50%; background: #2b2b30; display: inline-grid; place-items: center; }
.agentbox__send svg.ic { width: 14px; height: 14px; color: var(--lx-2); }

/* on small screens the window stacks and grows; drop the float so the panel
   flows in-line under the rail instead of overlapping a tiny layout */
@media (max-width: 980px) {
  .agentbox {
    position: static; right: auto; bottom: auto;
    width: auto; height: auto; min-height: 360px; margin-top: 14px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agentbox__grid i { transition: none; background: rgba(255,255,255,.55); }
  .agentbox [data-step].in { display: block; animation: none; opacity: 1; transform: none; }
}


/* Positioning section: heading + explanation on the left, diagram on the right */
.posrow { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(.8rem,2vw,1.6rem); align-items:center; }
.posrow__text { min-width:0; }
.posrow__text .h2 { font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.12; letter-spacing:-.025em; }
.posrow__text .lead { font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.55; }
.posrow__media { min-width:0; }
.posrow__lead { max-width:none; margin-top:clamp(1.8rem,3.4vw,2.8rem); font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.6; }
.posrow__media .sp { padding:0; }
@media (max-width:900px){ .posrow { grid-template-columns:1fr; gap:2rem; } .posrow__text .h2 { font-size:clamp(1.5rem,5vw,2.2rem); } }

/* =============================================================
   "GRAPHITE MONO" — re-theme the app window so it reads as vunai's
   own product, NOT a Linear clone. Cleaner near-black surfaces,
   brighter whites, crisper borders, a white left-bar active state,
   and fully monochrome accents + status (no indigo, no colour).
   ============================================================= */
.appwin {
  background: #0a0a0b;
  border-color: rgba(255,255,255,.1);
  --lx-fg: #f4f4f6; --lx-2: #aeaeb6; --lx-mut: #6f6f78; --lx-faint: #54545c;
  --lx-line: rgba(255,255,255,.06);
}
.appwin__side { background: #060607; }
.appwin__body { background: #0a0a0b; }

/* distinctive active nav — a crisp white left accent bar (not Linear's filled pill) */
.appwin__nav a.on { background: rgba(255,255,255,.055); box-shadow: inset 2px 0 0 #f4f4f6; color: #fff; }
.appwin__nav a.on .em svg.ic { color: #fff; }

/* monochrome avatars — neutral graphite, white initials */
.appwin .av--a { background: linear-gradient(135deg,#43434b,#71717b); }
.appwin .av--h { background: linear-gradient(135deg,#2f2f35,#5a5a63); }

/* kill every indigo / blue Linear tell → white / mono */
.appwin .accent-text { color: #f4f4f6; font-weight: 600; }
.macbar__fav { color: #f4f4f6; }
.agentbox__logo { background: #2a2a2e; }
.agentbox__logo svg.ic { color: #fff; }
.agentbox__send { background: #f4f4f6; }
.agentbox__send svg.ic { color: #0a0a0b; }
.agentbox__link { color: #f4f4f6; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.35); }
.agentbox__link:hover { text-decoration-color: #fff; }

/* monochrome status — differentiate by brightness + fill, not colour */
.appwin .pill--ok   { color: #f0f0f2; }
.appwin .pill--warn { color: #9a9aa2; }
.appwin .pill--bad  { color: #6a6a72; }
.appwin .pill--ok::before   { background: #f0f0f2; box-shadow: none; }
.appwin .pill--warn::before { background: transparent; box-shadow: inset 0 0 0 2px #9a9aa2; }
.appwin .pill--bad::before  { background: transparent; box-shadow: inset 0 0 0 1.5px #6a6a72; }
.appwin .kan__col:nth-child(2) .kan__h svg.ic,
.appwin .kan__col:nth-child(3) .kan__h svg.ic { color: var(--lx-mut); }
.appwin .bars2 i { background: linear-gradient(180deg,#d4d4d9 0%,#d4d4d9 80%,#5a5a63 80%,#5a5a63 100%); }
.appwin .dot--a, .appwin .dot--b, .appwin .dot--c, .appwin .dot--d { background: #8a8a92; }

/* =============================================================
   LIVE CHAT — the agent box is an interactive agent↔user chat:
   closable via ×, a real input, user bubbles + agent replies.
   ============================================================= */
/* header: online status + working close button */
.agentbox__status { display: inline-flex; align-items: center; gap: .32rem; margin-left: .5rem; font-size: .66rem; font-weight: 500; color: var(--lx-mut); letter-spacing: .02em; }
.agentbox__status i { width: 6px; height: 6px; border-radius: 50%; background: #46d07f; box-shadow: 0 0 0 0 rgba(70,208,127,.5); animation: livepulse 1.9s ease-out infinite; }
@keyframes livepulse { 0%{ box-shadow:0 0 0 0 rgba(70,208,127,.5) } 70%{ box-shadow:0 0 0 5px rgba(70,208,127,0) } 100%{ box-shadow:0 0 0 0 rgba(70,208,127,0) } }
.agentbox__x { appearance: none; border: 0; background: transparent; color: var(--lx-mut); font-size: 1.15rem; line-height: 1; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.agentbox__x:hover { background: rgba(255,255,255,.08); color: #f4f4f6; }
.agentbox.closed { display: none; }

/* the input is a real form now */
.agentbox__field { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: #f4f4f6; font-family: inherit; font-size: .82rem; padding: 0; }
.agentbox__field::placeholder { color: var(--lx-mut); }
.agentbox__send { appearance: none; border: 0; cursor: pointer; }

/* chatbot messages — agent (avatar + bubble, left) vs user (bubble, right) */
.chatmsg { display: flex; opacity: 0; transform: translateY(6px); transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1); }
.chatmsg.in { opacity: 1; transform: none; }
/* agent: small spark avatar + speech bubble */
.chatmsg--agent { flex-direction: row; align-items: flex-start; gap: .5rem; }
.chatmsg__av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #26262b; display: grid; place-items: center; margin-top: 1px; }
.chatmsg__av svg { width: 15px; height: 15px; stroke: #f4f4f6; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.chatmsg--agent .chatmsg__t { max-width: 84%; background: rgba(255,255,255,.045); border: 1px solid var(--lx-line); color: #d4d4d9; padding: 9px 12px; border-radius: 4px 13px 13px 13px; font-size: .8rem; line-height: 1.55; }
.chatmsg--agent .chatmsg__t b { color: #f4f4f6; font-weight: 600; }
.chatmsg--agent .chatmsg__t a { color: #f4f4f6; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* user: right-aligned bubble */
.chatmsg--user { flex-direction: row; justify-content: flex-end; }
.chatmsg--user .chatmsg__b { max-width: 84%; background: #f4f4f6; color: #0c0c0e; padding: 8px 12px; border-radius: 13px 13px 4px 13px; font-size: .8rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; font-weight: 500; }

/* starter suggestion chips (offset to align under the agent bubble) */
.chatsugs { display: flex; flex-wrap: wrap; gap: 7px; margin-left: 34px; }
.chatsugs.gone { display: none; }
.chatsug { appearance: none; cursor: pointer; font: inherit; font-size: .76rem; color: var(--lx-2); background: rgba(255,255,255,.03); border: 1px solid var(--lx-line); border-radius: 999px; padding: .42rem .8rem; transition: background .15s, color .15s, border-color .15s; }
.chatsug:hover { background: rgba(255,255,255,.08); color: #f4f4f6; border-color: rgba(255,255,255,.18); }

/* a roadmap "artifact" the agent can drop into a bubble */
.chatcard { margin-top: 9px; border: 1px solid var(--lx-line); border-radius: 9px; padding: 9px 11px; background: rgba(255,255,255,.02); }
.chatcard .pr-t { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: #f4f4f6; line-height: 1.4; }
.chatcard .pr-t svg { width: 14px; height: 14px; stroke: var(--lx-mut); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.chatcard .pr-b { margin-top: 6px; font-family: var(--font-mono); font-size: .69rem; color: var(--lx-mut); }

/* agent "typing" indicator (three pulsing dots), inside an agent bubble */
.chattyping { display: inline-flex; gap: 5px; padding: 3px 2px; }
.chattyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--lx-mut); animation: typed 1.2s ease-in-out infinite; }
.chattyping i:nth-child(2){ animation-delay: .16s; } .chattyping i:nth-child(3){ animation-delay: .32s; }
@keyframes typed { 0%,100%{ opacity:.3; transform: translateY(0) } 50%{ opacity:1; transform: translateY(-3px) } }

/* reopen launcher — appears bottom-right when the chat is closed */
.agentlaunch { position: absolute; right: 18px; bottom: 18px; z-index: 30; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: #f4f4f6; color: #0a0a0b; display: grid; place-items: center; box-shadow: 0 16px 40px -12px rgba(0,0,0,.7); transition: transform .18s ease; }
.agentlaunch:hover { transform: translateY(-2px) scale(1.04); }
.agentlaunch svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.agentlaunch[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .chatmsg { opacity: 1; transform: none; transition: none; }
  .agentbox__status i, .chattyping i { animation: none; }
}

/* =============================================================
   CAPABILITIES — draggable stacked-card swiper. Cards are stacked
   into a receding deck; the front card drags left/right to advance,
   with pagination dots + the labelled nav as alternate controls.
   (Replaces the older scroll-pinned crossfade stack.)
   ============================================================= */
.capswiper__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.5rem; }
.capswiper__h { font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.025em; margin-top: .9rem; max-width: 16ch; }
.capswiper__sub { color: var(--text-muted); margin-top: .9rem; font-size: 1rem; }
.capswiper__sub .linkarrow { margin-left: .35rem; }
/* labelled nav (right) — doubles as a tablist */
.capswiper__nav { display: flex; flex-direction: column; gap: .35rem; flex: 0 0 auto; min-width: 230px; }
.capnav { display: flex; align-items: baseline; gap: .6rem; text-align: left; cursor: pointer; font: inherit; color: var(--text-muted); background: transparent; border: 0; border-left: 2px solid transparent; padding: .5rem .7rem; border-radius: 0 8px 8px 0; transition: color .2s, background .2s, border-color .2s; }
.capnav b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-muted); transition: color .2s; }
.capnav:hover { color: var(--text-secondary); background: rgba(255,255,255,.03); }
.capnav.on { color: var(--text); background: rgba(255,255,255,.05); border-left-color: var(--text); }
.capnav.on b { color: var(--text); }
.capnav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the deck: cards absolutely stacked; JS sets per-card transforms */
.capswiper__deck {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.6rem);   /* headroom for the receding cards peeking above */
  height: clamp(480px, 58vh, 600px);
  -webkit-user-select: none; user-select: none;
  perspective: 1600px;
}

/* one glass card */
.capcard {
  position: absolute; left: 0; right: 0;
  top: clamp(1.6rem, 3vw, 2.6rem); bottom: 0;
  opacity: 0;                                  /* JS fans the cards in (matches the no-JS-hidden pattern of the old stack) */
  background: linear-gradient(180deg, rgba(22,23,28,.74), rgba(12,13,16,.84));
  -webkit-backdrop-filter: blur(16px) saturate(118%);
          backdrop-filter: blur(16px) saturate(118%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 110px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  transform-origin: 50% 0%;
  transition: transform .6s var(--ease), opacity .6s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform, opacity;
  cursor: grab;
  touch-action: pan-y;                          /* let the page scroll vertically; we read the horizontal drag */
}
.capcard.is-front { border-color: rgba(255,255,255,.16); box-shadow: 0 54px 130px -48px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.capcard.is-dragging { transition: opacity .6s var(--ease); cursor: grabbing; }

/* distinct per-card gradient wash — hues set inline per card via --cg1 / --cg2 (R G B triplets).
   Subtle corner glows so each capability reads as its own surface without fighting the dark theme. */
.capcard__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(78% 62% at 8% 0%, rgb(var(--cg1, 94 106 210) / .18), transparent 60%),
    radial-gradient(70% 64% at 100% 100%, rgb(var(--cg2, 139 92 246) / .14), transparent 62%);
}
.capcard.is-front .capcard__glow { background:
    radial-gradient(78% 62% at 8% 0%, rgb(var(--cg1, 94 106 210) / .26), transparent 60%),
    radial-gradient(70% 64% at 100% 100%, rgb(var(--cg2, 139 92 246) / .2), transparent 62%);
}

.capcard__inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.6rem); }
.capcard__media { min-width: 0; display: flex; justify-content: center; }
.capcard__media .cockpit, .capcard__media .diagram { width: 100%; }
.capcard__text { min-width: 0; }
.capcard__text .idx { color: var(--text-muted); }
.capcard__text .h2 { margin: .8rem 0 1rem; }

/* footer: drag hint + pagination dots */
.capswiper__foot { display: flex; align-items: center; justify-content: center; gap: 1.3rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.capswiper__hint { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); opacity: .55; display: inline-flex; align-items: center; gap: .55rem; }
.capswiper__hint::before { content: ""; width: 22px; height: 1px; background: var(--hairline-strong); }
.capswiper__dots { display: flex; align-items: center; gap: .55rem; }
.capdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--hairline-strong); cursor: pointer; transition: width .35s var(--ease), background .35s var(--ease); }
.capdot:hover:not(.active) { background: var(--text-muted); }
.capdot.active { width: 26px; background: var(--text); }
.capdot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* static mode: mobile + reduced-motion — drop the deck, stack cards in flow.
   JS strips inline styles and adds .is-static so these rules win cleanly. */
.capswiper.is-static .capswiper__deck { position: static; height: auto; padding-top: 0; perspective: none; user-select: auto; }
.capswiper.is-static .capcard { position: relative; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; transform: none; cursor: default; margin-bottom: 1.4rem; }
.capswiper.is-static .capcard:last-child { margin-bottom: 0; }
.capswiper.is-static .capswiper__foot { display: none; }

@media (max-width: 860px) {
  .capswiper__top { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .capswiper__nav { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .capnav { border-left: 0; padding: .4rem .7rem; border: 1px solid var(--hairline); border-radius: 999px; }
  .capnav.on { border-color: var(--text); background: rgba(255,255,255,.05); }
  .capcard__inner { grid-template-columns: 1fr; gap: 1.6rem; }
}


/* Venn diagram — two simple overlapping circles, fancy center word */
.sp__circle { fill:none; stroke:#cfd3da; stroke-width:1.3; stroke-dasharray:100; stroke-dashoffset:100; }
.sp.in .sp__circle    { animation:sp-draw 1.5s var(--ease) forwards; }
.sp.in .sp__circle.c2 { animation-delay:.35s; }
@keyframes sp-draw { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .sp__circle { stroke-dashoffset:0; animation:none; } }
.sp__vlabel { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; fill:var(--text-muted); text-anchor:middle; }
.sp__center { font-family:var(--font-heading); font-weight:600; font-size:18px; letter-spacing:.005em; fill:url(#sp-fancy); text-anchor:middle; }
.sp.in .g-circles { animation-delay:.1s; }
.sp.in .g-text { animation-delay:1.25s; }


/* traveling dots — orbit each circle and cross through the overlap */
.sp__orb { fill:#fff; }
.sp__orb--l { offset-path:path("M 210 10 a 115 115 0 1 0 0 230 a 115 115 0 1 0 0 -230"); fill:#777c84; }
.sp__orb--r { offset-path:path("M 330 10 a 115 115 0 1 0 0 230 a 115 115 0 1 0 0 -230"); fill:#fff; }
.sp.in .sp__orb--l { animation:sp-orbit 7s linear 1.4s infinite; }          /* others: slow */
.sp.in .sp__orb--r { animation:sp-orbit 2.6s linear 1.4s infinite reverse; } /* vunai: fast */
.sp__vlabel--v { fill:#e9ebef; }
.sp.in .g-orbit { animation-delay:1.3s; }
@keyframes sp-orbit { from { offset-distance:0%; } to { offset-distance:100%; } }
@media (prefers-reduced-motion: reduce){ .sp__orb { display:none; } }


/* center card — cuts through the overlap (reference-style) */
.sp__cut { fill:#08090a; }   /* matches page bg -> just cuts the lines, no card */
.sp__card-t { font-family:var(--font-heading); font-weight:600; font-size:15px; letter-spacing:.01em; fill:url(#sp-fancy); }
.sp.in .g-card { animation-delay:1.05s; }

/* =============================================================
   Capability cards — GSAP-animated live panels (cv*). Namespaced
   to avoid clashing with global .chip/.tile/etc.
   ============================================================= */
.cvwin { position:relative; width:100%; border:1px solid var(--hairline); border-radius:14px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 0%, #14151b 0%, #0b0c10 58%);
  box-shadow:0 30px 70px -38px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.cvwin__bar { display:flex; align-items:center; gap:.55rem; padding:11px 14px; border-bottom:1px solid var(--hairline); }
.cvlt { display:inline-flex; gap:7px; flex:0 0 auto; }
.cvlt i { width:11px; height:12px; display:block; }
.cvlt i:nth-child(1){ background:#ff5f57; clip-path:polygon(50% 0,0 100%,100% 100%); }
.cvlt i:nth-child(2){ background:#febc2e; clip-path:polygon(0 0,100% 0,50% 100%); }
.cvlt i:nth-child(3){ background:#28c840; clip-path:polygon(50% 0,0 100%,100% 100%); }
.cvtt { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text-muted); font-weight:600; }
.cvfav { stroke:#9aa2f0; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; }
.cvlive { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.cvlive i { width:6px; height:6px; border-radius:50%; background:#4cd08a; }
.cvwin__body { padding:16px; }

/* cockpit */
.cvseg { margin-left:auto; display:inline-flex; position:relative; background:rgba(255,255,255,.04); border:1px solid var(--hairline); border-radius:999px; padding:3px; }
.cvseg__ind { position:absolute; top:3px; left:3px; height:calc(100% - 6px); background:#f4f4f6; border-radius:999px; z-index:0; }
.cvseg button { position:relative; z-index:1; font:600 .66rem/1 var(--font-mono); letter-spacing:.04em; color:var(--text-muted); background:none; border:0; padding:.32rem .56rem; cursor:default; transition:color .3s; }
.cvseg button.on { color:#0a0a0b; }
.cvtiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cvtile { border:1px solid var(--hairline); border-radius:11px; padding:12px 13px; background:rgba(255,255,255,.015); }
.cvtile .cvk { font-size:.68rem; color:var(--text-muted); }
.cvtile .cvv { font-family:var(--font-heading,Inter); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; margin-top:6px; color:var(--text); }
.cvtile .cvd { font-size:.64rem; color:var(--text-muted); margin-top:3px; font-family:var(--font-mono); }
.cvtile .cvd.up { color:#4cd08a; }
.cvchart { display:flex; align-items:flex-end; gap:8px; height:104px; margin-top:14px; padding:0 2px; }
.cvchart i { flex:1; height:30%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05)); }
.cvchart i.hot { background:linear-gradient(180deg,#9fb4ff,rgba(94,106,210,.25)); }

/* agents */
.cvag { display:flex; flex-direction:column; gap:10px; }
.cvrow { display:grid; grid-template-columns:64px 64px 1fr; align-items:center; gap:.6rem; }
.cvrow .cvnm { font-family:var(--font-mono); font-size:.74rem; color:var(--text-secondary); }
.cvverdict { justify-self:start; font-size:.64rem; font-weight:700; letter-spacing:.03em; padding:.2rem .5rem; border-radius:999px; border:1px solid; }
.cvverdict.b { color:var(--text); border-color:var(--hairline-strong); }
.cvverdict.y { color:var(--text-muted); border-color:var(--hairline); }
.cvbar { height:6px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; }
.cvbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#dfe2ea,#8a8b94); }
.cvsynth { margin-top:8px; border-top:1px solid var(--hairline); padding-top:12px; }
.cvsynth__lab { display:flex; justify-content:space-between; gap:.5rem; font-size:.74rem; color:var(--text-muted); }
.cvsynth__lab b { color:var(--text); }
.cvsynbar { height:8px; border-radius:8px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:8px; }
.cvsynbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#5e6ad2,#9fb4ff); }
.cvtline { position:absolute; height:1.5px; background:#eb5e57; transform-origin:left center; opacity:0; pointer-events:none; }

/* retrieval */
.cvq { font-size:.86rem; color:var(--text-secondary); line-height:1.4; display:flex; gap:.5rem; }
.cvq .cvqtag { font:700 .62rem/1 var(--font-mono); background:rgba(255,255,255,.08); color:var(--text-muted); width:18px; height:18px; display:grid; place-items:center; border-radius:5px; flex:none; margin-top:1px; }
.cvcorpus { position:relative; margin:14px 0; min-height:82px; border:1px solid var(--hairline); border-radius:11px; background:rgba(255,255,255,.012); overflow:hidden; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px; align-content:center; }
.cvchip { font-family:var(--font-mono); font-size:.66rem; color:var(--text-muted); border:1px solid var(--hairline); border-radius:7px; padding:.3rem .5rem; background:rgba(255,255,255,.02); }
.cvchip.src { color:#9fb4ff; border-color:rgba(159,180,255,.4); background:rgba(159,180,255,.08); }
.cvscan { position:absolute; top:0; bottom:0; width:38px; background:linear-gradient(90deg,transparent,rgba(159,180,255,.16),transparent); box-shadow:0 0 22px rgba(159,180,255,.25); }
.cvans { font-size:.85rem; color:var(--text-secondary); line-height:1.45; }
.cvans b { color:var(--text); } .cvans sup { color:#9fb4ff; font-size:.6rem; }
.cvconf { display:flex; align-items:center; gap:.6rem; margin-top:12px; font-size:.72rem; color:var(--text-muted); }
.cvconf .cvcbar { flex:1; height:7px; border-radius:7px; background:rgba(255,255,255,.06); overflow:hidden; }
.cvconf .cvcbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#4cd08a,#a7e8c6); }
.cvconf b { color:var(--text); font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
@media (max-width:560px){ .cvtile .cvv { font-size:1.4rem; } }