/* =========================================================================
   ATCL AI — Constellation boot loader + constellation hub
   ========================================================================= */

/* ===================== BOOT LOADER ===================== */
#intro { background: radial-gradient(120% 90% at 50% 42%, #06100E 0%, #04080A 70%, #02060A 100%); }
.boot-canvas { position: absolute; inset: 0; z-index: 1; }

.boot-perimeter { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bp { position: absolute; font-size: clamp(9px, 1.05vw, 13px); letter-spacing: 0.22em; font-weight: 500; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6); opacity: 0;
  animation: bpIn 0.8s var(--ease) forwards; animation-delay: calc(0.5s + var(--bpi) * 0.06s); }
.bp-teal { color: rgba(94,234,212,0.46); }
.bp-amber { color: rgba(212,168,67,0.46); }
@keyframes bpIn { to { opacity: 1; } }

.boot-stage { position: relative; z-index: 3; width: min(680px, 92vw); text-align: center; transform: translateY(-3vh);
  opacity: 0; transition: opacity 0.9s var(--ease); }
#intro.s-in .boot-stage { opacity: 1; }
.boot-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-xs); letter-spacing: 0.34em; color: var(--acc); margin-bottom: 16px; }
.be-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: blink 1.5s steps(2) infinite; }
/* Block-level + centered so the logo sits on its own line, centred under the eyebrow.
   Sized for the current 145x59 wordmark to stay crisp; bump the clamp once a vector/hi-res logo is in place. */
.boot-mark { display: flex; justify-content: center; align-items: center; }
.boot-logo { height: clamp(40px, 8vw, 62px); width: auto; display: block; }
.boot-sub { margin-top: 16px; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: 0.34em; color: var(--fg2); }

.boot-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 30px auto 0; width: min(620px, 94vw); }
.agent-pill { display: flex; align-items: center; gap: 10px; justify-content: center; white-space: nowrap; font-size: 11px; letter-spacing: 0.13em;
  padding: 13px 18px; border-radius: 999px; color: var(--fg); position: relative; cursor: pointer;
  background: rgba(94,234,212,0.05);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
  opacity: 0; transform: translateY(8px); animation: pillIn 0.6s var(--ease) forwards; animation-delay: calc(0.6s + var(--i) * 0.12s); }
@keyframes pillIn { to { opacity: 1; transform: none; } }
.agent-teal { border: 1px solid rgba(94,234,212,0.60); box-shadow: inset 0 0 22px rgba(94,234,212,0.12), 0 0 20px rgba(94,234,212,0.10); }
.agent-amber { border: 1px solid rgba(212,168,67,0.60); box-shadow: inset 0 0 22px rgba(212,168,67,0.12), 0 0 20px rgba(212,168,67,0.10); }
.agent-teal .ap-dot { background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.agent-amber .ap-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.agent-amber { color: #F0E2BE; }
.ap-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ap-go { font-size: 12px; opacity: 0; transform: translateX(-6px); transition: all 0.3s var(--ease); margin-left: -4px; }
.agent-pill:hover .ap-go { opacity: 1; transform: none; }
.agent-teal:hover { transform: translateY(-2px); background: rgba(94,234,212,0.12); border-color: var(--acc); box-shadow: inset 0 0 22px rgba(94,234,212,0.18), 0 8px 26px -8px rgba(94,234,212,0.5); }
.agent-amber:hover { transform: translateY(-2px); background: rgba(212,168,67,0.12); border-color: var(--amber); box-shadow: inset 0 0 22px rgba(212,168,67,0.18), 0 8px 26px -8px rgba(212,168,67,0.5); }

/* Boot system-log: a compact bottom-left console so the radar/particle field
   behind it stays fully visible. Older lines fade; latest few read strongly. */
.boot-console { position: fixed; left: clamp(16px, 4vw, 40px); bottom: 96px; z-index: 6;
  width: min(360px, 42vw); padding: 12px 14px;
  border: 1px solid rgba(94,234,212,0.16); border-radius: 10px;
  background: rgba(6,10,18,0.50); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease); }
#intro.s-in .boot-console { opacity: 1; }
.bc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg3); }
.bc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 10px var(--acc); animation: blink 1.5s steps(2) infinite; }
.boot-log { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.blog { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 10px; letter-spacing: 0.06em; color: var(--fg2);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.bl-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog.in { opacity: 0.42; transform: none; }
.blog.in:nth-last-child(-n+3) { opacity: 0.85; }
.bl-arrow { color: var(--acc); margin-right: 8px; }
.bl-ts { color: var(--fg3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* phones: drop the side telemetry log so the brand + radar read cleanly */
@media (max-width: 700px) { .boot-console { display: none; } }

.boot-footer { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 60px); }
.boot-progress { width: min(520px, 60vw); }
.bpr-label { font-size: var(--t-2xs); letter-spacing: 0.18em; color: var(--fg3); }
.bpr-pct { color: var(--acc); }
.bpr-track { margin-top: 10px; height: 2px; background: rgba(94,234,212,0.14); overflow: hidden; }
.bpr-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(94,234,212,0.4), var(--acc)); box-shadow: 0 0 10px var(--acc); }
.boot-dest { font-size: var(--t-2xs); letter-spacing: 0.18em; color: var(--fg3); }

.boot-skip { position: absolute; top: 22px; right: clamp(20px, 5vw, 60px); z-index: 4; font-size: var(--t-2xs); letter-spacing: 0.18em; color: var(--fg3); display: inline-flex; align-items: center; gap: 8px; }
.boot-skip:hover { color: var(--fg); }
.bs-key { border: 1px solid var(--hud); border-radius: 4px; padding: 2px 6px; font-size: 9px; color: var(--fg3); }
.boot-pause { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 4; font-size: var(--t-2xs); letter-spacing: 0.18em; color: var(--fg3); display: inline-flex; align-items: center; gap: 8px; }
.boot-pause:hover { color: var(--acc); }
.bpa-ico { color: var(--acc); font-size: 9px; }

@media (max-width: 760px) {
  .bp { font-size: 8px; letter-spacing: 0.12em; }
  .boot-footer { flex-direction: column; gap: 14px; align-items: flex-start; }
  .boot-progress { width: 100%; }
  .boot-sub { letter-spacing: 0.2em; }
}

/* Phones: a clean, centred brand + radar + progress. Hide the desktop chrome
   (edge labels, pause) and keep the entry pills as a compact 2-column grid so
   nothing overlaps or clips on a small viewport. */
@media (max-width: 640px) {
  .boot-perimeter { display: none; }
  .boot-pause { display: none; }
  .boot-stage { width: 92vw; transform: translateY(-1.5vh); }
  .boot-eyebrow { font-size: 10px; letter-spacing: 0.22em; margin-bottom: 14px; }
  .boot-sub { font-size: 11px; letter-spacing: 0.16em; margin-top: 14px; }
  .boot-agents { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; width: 94vw; }
  .agent-pill { font-size: 10px; letter-spacing: 0.05em; padding: 11px 9px; gap: 7px; }
  .ap-go { display: none; }
  .boot-footer { bottom: 22px; padding: 0 20px; }
  .boot-skip { top: 16px; right: 16px; }
}

/* ===================== CONSTELLATION HUB ===================== */
#hub { display: block;
  --panel-r: clamp(14px, 2.1vw, 28px);     /* right margin of the right panel  */
  --panel-w: clamp(312px, 27.5vw, 420px);  /* OUR DIVISIONS + detail column    */
  --info-w:  clamp(162px, 14vw, 204px);    /* middle "at a glance" column       */
  --col-gap: 14px; }
.cst-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cst-map { position: absolute; inset: 0; z-index: 2; }

/* A zero-size anchor sitting exactly on the orbit centre. Nothing about the
   caption can move it, which is the whole point: when the dome and the text
   shared one centred block, the text's height pushed the dome 37px above the
   rings it is supposed to sit inside. */
.cst-center { position: absolute; left: 26.5%; top: 50%; width: 0; height: 0;
  text-align: center; z-index: 3; pointer-events: none; }
.cc-seat { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: var(--core-d, 150px); height: var(--core-d, 150px); }
.cc-meta { pointer-events: none; position: absolute; left: 0; top: calc(var(--core-d, 150px) / 2 + 18px);
  transform: translateX(-50%); width: max-content; }

/* ── The core: a machined instrument, not an app button ───────────────────
   Six layers at different depths inside one preserve-3d stage, so tilting
   parallaxes them against each other instead of rotating a flat picture.
   --lx/--ly (light position), --hot (hover 0..1) and --rim-a (rim angle) are
   written by constellation.js from the pointer; every layer reads the same
   three, which is what makes the lighting read as one light source.        */
.cc-core {
  /* --core-d is set on .cst-center by constellation.js from the live orbit
     radius; declaring it here would shadow that and pin the dome to one size. */
  --lx: 50%; --ly: 50%; --hot: 0; --rim-a: 0deg;
  position: absolute; inset: 0; display: block; margin: 0;
  width: 100%; height: 100%; appearance: none; -webkit-appearance: none;
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: 50%; transform-style: preserve-3d; will-change: transform;
  pointer-events: auto;          /* the ONLY interactive part of .cst-center */
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cc-core > * { position: absolute; inset: 0; border-radius: 50%; }

/* seated into the diagram rather than floating on it */
.cc-socket {
  transform: translateZ(-8px) scale(1.14);
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 56%, rgba(3,6,12,0.92) 72%, rgba(3,6,12,0) 100%);
  box-shadow: inset 0 0 0 1px rgba(94,234,212,0.10);
}
/* the body */
.cc-dome {
  background:
    radial-gradient(circle at var(--lx) var(--ly), #1b2734 0%, #0d1622 38%, #05070d 76%),
    radial-gradient(circle at 50% 118%, rgba(94,234,212,0.15), rgba(0,0,0,0) 60%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.075),
    inset 0 -14px 28px rgba(0,0,0,0.78),
    inset 0 8px 20px rgba(94,234,212,0.05),
    0 26px 52px -18px rgba(0,0,0,0.95);
}
/* machined grooves echoing the concentric rings the canvas draws */
/* finer, and faded toward the centre so they never crowd the mark */
.cc-grooves {
  transform: translateZ(2px);
  background: repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.022) 0 0.5px, rgba(0,0,0,0) 0.5px 7px);
  -webkit-mask-image: radial-gradient(circle, transparent 32%, #000 52%, #000 68%, transparent 80%);
          mask-image: radial-gradient(circle, transparent 32%, #000 52%, #000 68%, transparent 80%);
  opacity: 0.9;
}
/* hairline machined edge, sitting just inside the rim — reads as a bezel */
.cc-dome::after {
  content: ''; position: absolute; inset: 5%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05),
              inset 0 1px 0 rgba(255,255,255,0.09);
}
/* Fresnel rim — the bright arc follows the pointer. This is what sells depth. */
.cc-rim {
  transform: translateZ(6px);
  background: conic-gradient(from var(--rim-a),
      rgba(94,234,212,0.72), rgba(94,234,212,0.10) 26%, rgba(0,0,0,0) 46%,
      rgba(0,0,0,0) 60%, rgba(212,168,67,0.22) 82%, rgba(94,234,212,0.72));
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 1.5px), #000 calc(50% - 1.5px) 50%, transparent 50%);
  opacity: calc(0.55 + var(--hot) * 0.45);
  animation: coreBreathe 9s ease-in-out infinite;
}
/* Was 0.88-1.16 over 6s, which read as restless. The clock's amber dot is
   the site's 'alive' signal; the core does not need to compete with it. */
@keyframes coreBreathe { 0%,100% { filter: brightness(0.96); } 50% { filter: brightness(1.06); } }

/* A hairline standing off the body with a gap between. Real instruments have
   that gap; a rim flush against the housing reads as printed, not machined. */
.cc-bezel {
  transform: translateZ(1px) scale(1.085);
  box-shadow: inset 0 0 0 1px rgba(94,234,212,0.14),
              0 0 22px -6px rgba(94,234,212,0.18);
}
.cc-core:hover .cc-bezel { box-shadow: inset 0 0 0 1px rgba(94,234,212,0.34),
                                       0 0 30px -6px rgba(94,234,212,0.34); }

/* the mark, furthest forward so it parallaxes most */
.cc-plate { transform: translateZ(18px); display: grid; place-items: center; }
.cc-mic-mark { display: none; }
.cc-plate img {
  width: 62%; height: auto; user-select: none;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.75))
          drop-shadow(0 0 calc(9px + var(--hot) * 13px) rgba(94,234,212, calc(0.24 + var(--hot) * 0.4)));
}
/* specular highlight, sliding opposite the tilt */
.cc-spec {
  transform: translateZ(26px);
  background: radial-gradient(ellipse 42% 30% at var(--lx) calc(var(--ly) - 12%),
      rgba(255,255,255,0.16), rgba(255,255,255,0) 70%);
  opacity: calc(0.7 + var(--hot) * 0.3);
}
/* click sends one ring outward to the orbit, handing off to the panel */
.cc-pulse { transform: translateZ(4px); opacity: 0; box-shadow: 0 0 0 1px rgba(94,234,212,0.55); }
.cc-core.is-pulsing .cc-pulse { animation: corePulse 720ms cubic-bezier(0.22,0.61,0.36,1) forwards; }
@keyframes corePulse {
  0%   { opacity: 0.85; transform: translateZ(4px) scale(1); }
  100% { opacity: 0;    transform: translateZ(4px) scale(2.9); }
}
/* ── Listening · thinking · speaking ──────────────────────────────────────
   --lvl is the live amplitude (0..1) published by the voice module: the real
   microphone signal while listening, a synthesised one while speaking, because
   output deliberately bypasses the AudioContext to stay audible on iOS.      */

/* LISTENING — the core opens up and breathes with your voice */
.cc-core.v-listening .cc-rim {
  opacity: 1;
  animation: none;
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2.5px), #000 calc(50% - 2.5px) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 2.5px), #000 calc(50% - 2.5px) 50%, transparent 50%);
  filter: brightness(calc(1 + var(--lvl, 0) * 0.85));
}
.cc-core.v-listening .cc-plate img {
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.75))
          drop-shadow(0 0 calc(10px + var(--lvl, 0) * 30px) rgba(94,234,212, calc(0.3 + var(--lvl, 0) * 0.55)));
}
/* a halo that swells on your voice — outside the dome, so it never hides the mark */
.cc-core.v-listening .cc-pulse,
.cc-core.v-speaking .cc-pulse {
  opacity: calc(0.16 + var(--lvl, 0) * 0.5);
  transform: translateZ(4px) scale(calc(1.02 + var(--lvl, 0) * 0.3));
  box-shadow: 0 0 0 1px rgba(94,234,212,0.5), 0 0 26px rgba(94,234,212,0.28);
  transition: transform 90ms linear, opacity 90ms linear;
  animation: none;
}

/* THINKING — a single arc sweeps the rim. One moving element, not a spinner. */
.cc-core.v-thinking .cc-rim {
  opacity: 1;
  background: conic-gradient(from 0deg,
      rgba(212,168,67,1), rgba(212,168,67,0.5) 10%, rgba(212,168,67,0.12) 22%,
      rgba(0,0,0,0) 34%, rgba(0,0,0,0) 100%);
  /* the hairline rim is too thin to carry a moving arc — thicken it for this
     state only, so the sweep reads as one deliberate element */
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3.5px), #000 calc(50% - 3.5px) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 3.5px), #000 calc(50% - 3.5px) 50%, transparent 50%);
  filter: drop-shadow(0 0 7px rgba(212,168,67,0.65));
  animation: coreThink 1.05s linear infinite;
}
@keyframes coreThink { to { transform: translateZ(6px) rotate(360deg); } }
.cc-core.v-thinking .cc-plate img {
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.8)) opacity(0.88);
}

/* SPEAKING — amber, and the rim rides the reply */
.cc-core.v-speaking .cc-rim {
  opacity: 1; animation: none;
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2.5px), #000 calc(50% - 2.5px) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 2.5px), #000 calc(50% - 2.5px) 50%, transparent 50%);
  background: conic-gradient(from var(--rim-a),
      rgba(212,168,67,0.85), rgba(212,168,67,0.14) 30%, rgba(0,0,0,0) 50%,
      rgba(0,0,0,0) 62%, rgba(94,234,212,0.3) 84%, rgba(212,168,67,0.85));
  filter: brightness(calc(1 + var(--lvl, 0) * 0.7));
}
.cc-core.v-speaking .cc-plate img {
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.75))
          drop-shadow(0 0 calc(10px + var(--lvl, 0) * 26px) rgba(212,168,67, calc(0.28 + var(--lvl, 0) * 0.5)));
}
/* while a conversation is live the standing hint would only be noise */
.cst-center.v-listening .cc-hint,
.cst-center.v-thinking .cc-hint,
.cst-center.v-speaking .cc-hint { opacity: 0; }

.cc-core:focus-visible { outline: none; }
.cc-core:focus-visible .cc-rim { opacity: 1; box-shadow: 0 0 0 3px rgba(94,234,212,0.55); }

/* the affordance: a logo in a circle does not say "chat with our AI" */
.cc-hint {
  margin-top: 10px; font-size: 8.5px; letter-spacing: 0.3em; color: var(--acc);
  opacity: var(--hint-o, 0.42); transition: opacity 0.28s ease; pointer-events: none;
}
.cst-center:hover .cc-hint, .cst-center:focus-within .cc-hint { --hint-o: 0.95; }

/* On phones the microphone is recognizable at a glance; the small company
   wordmark cannot communicate the action at this size. */
@media (max-width: 640px) {
  .cc-plate img { display: none; }
  .cc-mic-mark { display: block; width: 34%; height: 34%; color: #b6fff0; filter: drop-shadow(0 2px 5px #0005); }
  .cc-dome { background: radial-gradient(ellipse at 35% 20%, #28554d, #112c29 60%, #0a201e); }
  .cc-grooves { opacity: 0.2; }
  .cst-center .cc-clock { display: none; }
  .cst-center .cc-hint { font-family: var(--font-sans, sans-serif); font-size: 11px; letter-spacing: .02em; opacity: .85; margin-top: 0; }
  .cc-core:focus-visible { outline: 2px solid var(--acc, #5eead4); outline-offset: 7px; }
}

/* A recorded overview never puts the diagram into a call. Its quiet amber
   rim and standing invitation remain separate from microphone states. */
.cc-core.is-announcing .cc-rim {
  opacity: 1; animation: none;
  filter: drop-shadow(0 0 8px rgba(212,168,67,0.55));
}
.cst-center.is-inviting .cc-hint { --hint-o: 1; }

@media (prefers-reduced-motion: reduce) {
  .cc-rim { animation: none; }
  .cc-core.v-thinking .cc-rim { animation: none; opacity: 1; }
  .cc-core { transition: transform 0.2s ease; }
  .cc-core:hover { transform: scale(1.03); }
  .cc-core.is-pulsing .cc-pulse { animation: none; }
}
.cc-clock { display: inline-flex; align-items: center; gap: 7px; margin-top: 0; font-size: 11px; letter-spacing: 0.18em;
  color: var(--fg2); font-variant-numeric: tabular-nums; }
.cc-cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink 1.5s steps(2) infinite; }

.cst-axis { display: none; }

.cst-node { position: absolute; width: 0; height: 0; z-index: 4; }
.cn-dot { position: absolute; left: 0; top: 0; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.cn-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); border-radius: 50%; }
.cst-node:hover .cn-dot { background: radial-gradient(circle, color-mix(in srgb, var(--nc) 22%, transparent), transparent 70%); }
/* capability labels are rendered as curved text on the canvas (see draw()) */
/* larger invisible hit target around each capability node */
.cn-dot { z-index: 1; }
.cn-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 40px; transform: translate(-50%,-50%); }
.cst-node.dim { opacity: 0.3; pointer-events: none; }

/* Division names are now rendered as curved text on the canvas (see draw()) */

/* MIDDLE COLUMN — "at a glance" info tiles, between the orbit and the panel */
.cst-info { position: absolute; top: 78px; bottom: 76px; right: calc(var(--panel-r) + var(--panel-w) + var(--col-gap)); width: var(--info-w);
  z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.ci-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.18em; color: var(--fg3); }
.ci-live { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); }
.ci-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: blink 1.6s steps(2) infinite; }
.ci-list { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ci-list::-webkit-scrollbar { width: 4px; }
.ci-list::-webkit-scrollbar-thumb { background: rgba(94,234,212,0.2); border-radius: 99px; }
.ci-tile { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 11px 14px; border-radius: 5px;
  flex: 1 1 0; min-height: 0; border: 1px solid var(--hud); background: linear-gradient(180deg, rgba(10,22,20,0.72), rgba(6,14,12,0.86)); overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.ci-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--acc), var(--amber)); opacity: 0.7; }
.ci-tile::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease);
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--acc-rgb),0.12), transparent 60%); }
.ci-tile:hover { border-color: rgba(94,234,212,0.5); transform: translateX(2px); }
.ci-tile:hover::after { opacity: 1; }
.ci-v { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); line-height: 1.05; }
.ci-k { font-size: calc(13px * var(--read)); line-height: 1.4; color: var(--fg2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* "23+ partners" — full vendor roster as a continuous scrolling marquee */
.ci-tile--partners { gap: 6px; }
.ci-marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ci-mtrack { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; width: max-content; animation: ciMarquee 26s linear infinite; }
.ci-tile--partners:hover .ci-mtrack { animation-play-state: paused; }
.ci-mchip { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg2);
  border: 1px solid var(--hud); border-radius: 99px; padding: 3px 9px; background: rgba(94,234,212,0.04); }
@keyframes ciMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ci-mtrack { animation: none; } }
/* last tile reads as the hook */
.ci-tile:last-child { border-color: rgba(212,168,67,0.4); background: linear-gradient(180deg, rgba(28,22,8,0.6), rgba(14,11,5,0.85)); }
.ci-tile:last-child::before { background: var(--amber); opacity: 0.9; }
.ci-tile:last-child .ci-v { color: var(--amber); }
.ci-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.14em; color: var(--fg); border: 1px solid rgba(212,168,67,0.45); padding: 11px 12px; border-radius: 5px;
  background: linear-gradient(180deg, rgba(212,168,67,0.14), rgba(212,168,67,0.04)); transition: all var(--dur) var(--ease); cursor: pointer; }
.ci-cta:hover { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(212,168,67,0.4), 0 8px 26px -10px rgba(212,168,67,0.5); }
.ci-cta .arrow { transition: transform var(--dur) var(--ease); }
.ci-cta:hover .arrow { transform: translateX(3px); }
.ci-fdot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 7px var(--amber); }

/* detail panel + grid */
.cst-panel { position: absolute; right: var(--panel-r); top: 78px; bottom: 76px; width: var(--panel-w); z-index: 6; display: flex; flex-direction: column; gap: 12px; }
.cst-detail { flex: 0 0 auto; padding: 22px 26px 24px; border-radius: 3px; background: linear-gradient(180deg, rgba(9,20,18,0.94), rgba(6,14,12,0.97)); }
.cd-head { display: flex; justify-content: space-between; gap: 14px; font-size: 10px; letter-spacing: 0.18em; color: var(--fg3); white-space: nowrap; }
.cd-head span:last-child { color: var(--amber); }
.cd-title { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.01em; color: var(--fg); margin: 12px 0 0; line-height: 1.06; }
.cd-tags { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.cd-tagchip { font-size: calc(11px * var(--read)); letter-spacing: 0.14em; color: var(--dc, var(--acc)); border: 1px solid color-mix(in srgb, var(--dc,var(--acc)) 45%, transparent);
  border-radius: 99px; padding: 3px 9px; background: color-mix(in srgb, var(--dc,var(--acc)) 10%, transparent); }
.cd-forline { font-size: calc(13px * var(--read)); letter-spacing: 0.04em; color: var(--fg3); }
.cd-rule { height: 1px; background: var(--hud); margin: 13px 0; }
.cd-lead { font-size: 14.5px; line-height: 1.55; color: var(--fg); margin: 12px 0 4px; font-weight: 400; }
.cd-summary { font-size: calc(14px * var(--read)); line-height: 1.6; color: var(--fg2); margin: 8px 0 2px; opacity: 0.9; }
.cd-ctx { display: block; font-size: 8.5px; letter-spacing: 0.18em; color: var(--dc, var(--acc)); margin-bottom: 3px; opacity: 0.8; }
.cd-related { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-rchip { font-size: calc(11px * var(--read)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); border: 1px solid var(--hud); border-radius: 99px; padding: 4px 9px; transition: all var(--dur) var(--ease); }
.cd-rchip:hover { color: var(--fg); border-color: var(--dc, var(--acc)); }
.cd-rchip.is-on { color: var(--dc, var(--acc)); border-color: var(--dc, var(--acc)); background: color-mix(in srgb, var(--dc,var(--acc)) 10%, transparent); }
/* The division view. Same grid, same type scale and the same accent variable
   as the capability view it sits beside, so opening a division reads as the
   panel changing subject rather than as a different component. */
.cd-row--services { align-items: start; }
.cd-services { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cd-services li { display: grid; gap: 2px; }
.cd-services b { font-size: calc(14px * var(--read)); font-weight: 600; color: var(--fg); }
.cd-services span { font-size: calc(13.5px * var(--read)); color: var(--fg3); line-height: 1.5; }
.cd-services li::before {
  content: ''; grid-row: 1 / span 2; grid-column: 1;
  width: 2px; border-radius: 2px; margin-inline-end: 10px;
  background: color-mix(in srgb, var(--dc, var(--acc)) 55%, transparent);
}
.cd-services li { grid-template-columns: 2px 1fr; align-items: start; }
.cd-services b, .cd-services span { grid-column: 2; }

/* Returning to the division a capability was opened from. */
.cd-back {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg3); background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.cd-back:hover, .cd-back:focus-visible { color: var(--dc, var(--acc)); }

.cd-row { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 7px 0; border-top: 1px solid var(--line); }
.cd-row:first-of-type { border-top: 0; }
.cd-row--deliver { align-items: start; }
.cd-deliver { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11.5px * var(--read)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); border: 1px solid var(--hud); border-radius: 3px; padding: 5px 8px; }
.cd-chip i { width: 4px; height: 4px; border-radius: 50%; background: var(--dc, var(--acc)); box-shadow: 0 0 6px var(--dc, var(--acc)); flex: 0 0 auto; }
.cd-life { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cl-step { display: inline-flex; align-items: center; gap: 5px; font-size: calc(11px * var(--read)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
.cl-step::after { content: '·'; margin-left: 4px; color: var(--hud-strong); }
.cl-step:last-child::after { display: none; }
.cl-step i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--dc,var(--acc)) 60%, var(--hud)); animation: clPulse 3.4s var(--ease-io) infinite; animation-delay: calc(var(--si) * 0.55s); }
@keyframes clPulse { 0%,100% { opacity: 0.4; transform: scale(1); } 14% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 8px var(--dc,var(--acc)); } }
.cd-vendors { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-vchip { font-size: calc(11px * var(--read)); letter-spacing: 0.06em; color: var(--fg2); border: 1px solid var(--hud); border-radius: 99px; padding: 4px 9px; }
.cd-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cm-k { grid-column: 1 / -1; font-size: 9px; letter-spacing: 0.16em; color: var(--fg3); }
.cm-track { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--dc,var(--acc)) 14%, transparent); overflow: hidden; }
.cm-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb,var(--dc,var(--acc)) 50%,transparent), var(--dc,var(--acc))); box-shadow: 0 0 10px var(--dc,var(--acc)); animation: cmGrow 1.1s var(--ease) ; }
@keyframes cmGrow { from { width: 0 !important; } }
.cm-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.cm-bars b { width: 2px; border-radius: 1px; background: var(--dc,var(--acc)); opacity: 0.7; height: 100%; transform-origin: bottom; animation: cmBar 1.3s var(--ease-io) infinite alternate; animation-delay: calc(var(--k) * 0.07s); }
@keyframes cmBar { to { transform: scaleY(0.25); opacity: 0.3; } }
.cd-k { font-size: 10px; letter-spacing: 0.16em; color: var(--fg3); padding-top: 3px; }
.cd-v { font-size: calc(14px * var(--read)); color: var(--fg2); line-height: 1.45; }
.cd-cta { margin-top: 0; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 11px; letter-spacing: 0.14em;
  border: 1px solid var(--hud-strong); border-radius: 3px; padding: 13px 18px; color: var(--fg); transition: all var(--dur) var(--ease); }
.cd-cta:hover { border-color: var(--dc, var(--acc)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dc, var(--acc)) 40%, transparent); }
.cd-cta--ghost { color: var(--fg3); }
.cd-cta--ghost:hover { color: var(--fg); }
.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cd-seg { color: var(--dc, var(--acc)) !important; }
.cb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dc, var(--acc)); box-shadow: 0 0 8px var(--dc, var(--acc)); }

.cst-filter, .cst-grid, .cst-gitem { display: none !important; }

/* ===== Division selector (prominent, always visible) ===== */
.cst-divsel { flex: 0 0 auto; }
.cds-head { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: 0.2em; color: var(--fg3); margin-bottom: 9px; }
.cds-count { color: var(--acc); }
.cds-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cds-item { position: relative; min-width: 0; }
.cds-item > .cds-card { width: 100%; height: 100%; }
.cds-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; overflow: hidden;
  text-align: left; padding: 12px 13px; border-radius: 4px; border: 1px solid var(--hud); background: rgba(8,16,14,0.7);
  transition: all var(--dur) var(--ease); cursor: pointer; }
.cds-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nc); opacity: 0.55; transition: all var(--dur) var(--ease); }
.cds-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease);
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--nc) 18%, transparent), transparent 60%); }
.cds-card:hover { border-color: color-mix(in srgb, var(--nc) 50%, var(--hud)); transform: translateY(-2px); }
.cds-card:hover::after { opacity: 1; }
.cds-card:hover .cds-bar { opacity: 1; width: 4px; box-shadow: 0 0 12px var(--nc); }
.cds-card.is-active { border-color: var(--nc); background: color-mix(in srgb, var(--nc) 10%, rgba(8,16,14,0.7)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--nc) 35%,transparent), 0 6px 22px -10px color-mix(in srgb,var(--nc) 60%,transparent); }
.cds-card.is-active .cds-bar { opacity: 1; width: 4px; box-shadow: 0 0 14px var(--nc); }
.cds-code { font-size: 9px; letter-spacing: 0.14em; color: var(--nc); opacity: 0.85; }
.cds-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The tag already truncated; the name did not, so it ran under the listen
   control at the panel's real width. */
.cds-name { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-card.is-active .cds-name { color: var(--nc); text-shadow: 0 0 14px color-mix(in srgb,var(--nc) 40%,transparent); }
.cds-tag { font-size: 9px; letter-spacing: 0.1em; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Hear this division", on each card and in the panel header.
   Always present rather than offered after a delay, and in the division's own
   accent so it belongs to what it describes. The square replaces the waves
   while it is speaking, and a hairline fills along the control for as long as
   the clip lasts, so nobody presses it twice wondering whether it worked. */
.cds-listen-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--nc) 34%, var(--hud));
  border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, var(--nc) 7%, transparent);
  color: var(--nc); opacity: 0.62;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.cds-listen-btn:hover, .cds-listen-btn:focus-visible {
  opacity: 1; border-color: var(--nc);
  background: color-mix(in srgb, var(--nc) 16%, transparent);
}
.cds-listen-btn:focus-visible { outline: 2px solid var(--nc); outline-offset: 2px; }
.cds-listen-btn.is-speaking { opacity: 1; border-color: var(--nc); background: color-mix(in srgb, var(--nc) 18%, transparent); }
/* Muted, or mid-call: the assistant will not speak, so the control says so
   rather than looking pressable and doing nothing. */
.cds-listen-btn:disabled { opacity: 0.22; cursor: default; }
.cl-stop { opacity: 0; }
.is-speaking .cl-stop { opacity: 1; }
.is-speaking .cl-wave { opacity: 0; }
.cl-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--nc); }
.is-speaking .cl-bar { animation: clListen var(--clip, 18s) linear forwards; }
@keyframes clListen { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .is-speaking .cl-bar { animation: none; width: 100%; } }

/* On the card it sits at the inline end, where the chevron used to be: the card
   opens the division and this reads it, so one mark at that end is enough. */
.cds-listen {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); z-index: 2;
}
.cds-item > .cds-card { padding-inline-end: 38px; }
/* Between the 1080px breakpoint and 1440px the two-column grid squeezes the
   cards, and "الذكاء الاصطناعي" is the longest name either language has. Give
   it the gutter back rather than let it end in an ellipsis. */
@media (min-width: 1081px) and (max-width: 1440px) {
  .cds-name { font-size: 13px; }
  .cds-listen.cds-listen-btn { width: 26px; height: 26px; }
  .cds-item > .cds-card { padding-inline-end: 34px; }
}

/* In the panel header it sits with the service count. */
.cd-headright { display: inline-flex; align-items: center; gap: 10px; }
.cd-listen { width: 26px; height: 26px; }

.cst-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 24px 24px; border-radius: 3px; background: linear-gradient(180deg, rgba(9,20,18,0.94), rgba(6,14,12,0.97)); }
.cst-detail::-webkit-scrollbar { width: 5px; }
.cst-detail::-webkit-scrollbar-thumb { background: rgba(94,234,212,0.2); border-radius: 99px; }

/* HUD chrome */
.cst-hud { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
/* The corner readouts are sized in em against .ch, so one font-size moves the
   whole family — the stack's offsets, its gaps and its meter bars together. At
   10px every value below computes to exactly the pixel it was written as; the
   large-screen rules further down are then the only place a size is chosen. */
.ch { position: absolute; font-size: 10px; letter-spacing: 0.16em; color: var(--fg2); display: flex; align-items: center; gap: 0.8em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.ch-bars { display: inline-flex; align-items: flex-end; gap: 0.2em; height: 1.1em; }
.ch-bars i { width: 0.2em; background: var(--acc); border-radius: 1px; animation: rack 1.2s var(--ease-io) infinite alternate; }
.ch-bars i:nth-child(1){height:0.5em} .ch-bars i:nth-child(2){height:0.9em;animation-delay:.15s} .ch-bars i:nth-child(3){height:0.6em;animation-delay:.3s} .ch-bars i:nth-child(4){height:1.1em;animation-delay:.45s}
.ch-bars.sm i:nth-child(1){height:0.4em}.ch-bars.sm i:nth-child(2){height:0.8em}.ch-bars.sm i:nth-child(3){height:0.5em}
.ch-tl { top: 2em; left: 2.4em; color: var(--fg); }
/* Large and extra-large screens: the dial is sized from the viewport, so it
   keeps growing while a 10px readout does not — at 2560 the corner had shrunk
   to a whisper beside a 1060px-wide orbit. Bordered controls (.ch-tr) read
   fine at their size because the box carries them; these are bare text. */
@media (min-width: 1600px) { .ch { font-size: 11.5px; } }
@media (min-width: 2000px) { .ch { font-size: 13px; } }

/* top-right cluster spans the width of the panel below it (space-between) */
.ch-topright { position: absolute; top: 18px; right: var(--panel-r); width: var(--panel-w); display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; z-index: 8; }
.ch-topright > * { pointer-events: auto; }
.ch-tr { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--hud); padding: 9px 13px; border-radius: 6px;
  color: var(--fg2); font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; transition: all var(--dur) var(--ease); cursor: pointer; }
.ch-tr:hover { color: #fff; border-color: var(--acc); box-shadow: 0 0 16px -6px var(--acc); }
.ch-leaders .chl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
/* OVERVIEW — focal button with a rotating conic light border */
.ch-deck { pointer-events: auto; position: relative; border: 0; padding: 0; border-radius: 6px;
  isolation: isolate; transition: transform var(--dur) var(--ease); }
.ch-deck-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--fg);
  background: linear-gradient(180deg, rgba(10,22,20,0.92), rgba(6,14,12,0.96)); }
.ch-deck-glow { position: absolute; inset: -1.5px; z-index: 0; border-radius: 7px; overflow: hidden; }
.ch-deck-glow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220%; height: 320%; transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent 0deg, var(--acc) 55deg, var(--amber) 120deg, transparent 200deg, transparent 360deg);
  animation: deckSpin 3.6s linear infinite; }
@keyframes deckSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.ch-deck::after { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 12px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 22%, transparent), transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease); }
.ch-deck:hover { transform: translateY(-1px); }
.ch-deck:hover::after { opacity: 1; }
.ch-deck:hover .ch-deck-label { color: #FFFFFF; }
.ch-deck .arrow { transition: transform var(--dur) var(--ease); }
.ch-deck:hover .arrow { transform: translateX(3px); }
/* Language toggle: same HUD chrome as its neighbours. The label is always the
   OTHER language's own name, so it is readable to the person who needs it. */
.ch-lang { min-width: 44px; text-decoration: none; letter-spacing: 0.06em; }
.ch-lang:hover { color: #fff; }
.ch-profile { border-color: rgba(212,168,67,0.5); color: var(--amber); }
.ch-profile:hover { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 18px -4px rgba(212,168,67,0.5); }
.ch-live { top: 5em; left: 2.4em; color: var(--acc); }
.ch-cap { top: 6.8em; left: 2.4em; color: var(--acc); }
.ch-cap::before { content: ''; width: 1.8em; height: 1px; background: var(--acc); margin-right: 0.2em; }
/* Its distance from the bottom is set by the reading dock — 20px of inset and
   54px of pill — not by the type size. At 64px the dock was cutting straight
   through this line at every width the line is shown. The dock takes the
   inline-start corner, so it only overlapped in English; the clearance is kept
   in both so the readout sits in the same place in either language. */
.ch-inner { bottom: 88px; left: 2.4em; color: var(--fg2); }

/* CAPABILITY stepper — replaces the orphan "← NEXT" and top-center counter */
.cst-stepper { bottom: 22px; left: 50%; transform: translateX(-50%); position: absolute; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 4px; padding: 6px; border-radius: 8px;
  border: 1px solid var(--hud); background: rgba(8,16,14,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cst-step-info { font-size: 10px; letter-spacing: 0.16em; color: var(--fg2); padding: 0 10px; white-space: nowrap; }
.cst-step-info #cst-node { color: var(--acc); font-weight: 600; }
.cst-step-info .css-sep { color: var(--fg3); margin: 0 2px; }
.cst-step-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; color: var(--fg2); padding: 7px 11px; border-radius: 5px;
  border: 1px solid transparent; transition: all var(--dur) var(--ease); }
.cst-step-btn:hover { color: #FFFFFF; border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.cst-step-next { color: var(--acc); }
.cst-step-toggle { color: var(--amber); padding: 7px 10px; }
.cst-step-toggle:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.cst-step-toggle.is-paused { color: var(--amber); border-color: rgba(212,168,67,0.55); background: rgba(212,168,67,0.1); }
.csp-ico { font-size: 9px; line-height: 1; letter-spacing: 0; }

/* Hidden for now: the hub runs on Obsidian (THEME_PICKER in app.js). Delete
   the `display: none` line to bring the picker back. */
.cst-theme { display: none; }
.cst-theme { position: absolute; bottom: 22px; left: 24px; z-index: 8; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: 0.16em; color: var(--fg2); border: 1px solid var(--hud); padding: 9px 13px; border-radius: 3px; cursor: pointer; transition: all var(--dur); }
.cst-theme:hover { border-color: var(--acc); }
.ct-sw { display: inline-flex; gap: 3px; }
.ct-sw i { width: 12px; height: 12px; border-radius: 2px; }
.ct-sw i:first-child { background: var(--acc); } .ct-sw i:last-child { background: var(--amber); }
.ct-car { color: var(--fg3); }
.cst-book { position: absolute; bottom: 22px; right: 24px; z-index: 8; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.14em; color: var(--fg); border: 1px solid rgba(212,168,67,0.4); padding: 12px 18px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(212,168,67,0.12), rgba(212,168,67,0.03)); transition: all var(--dur); }
.cst-book:hover { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(212,168,67,0.4), 0 8px 30px -8px rgba(212,168,67,0.4); }
.cb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

@media (max-width: 1080px) {
  .cst-info, .cst-panel { position: relative; right: auto; top: auto; bottom: auto; width: min(560px, 92vw); margin: 14px auto 0; }
  .cst-info { flex-direction: column; }
  /* stacked layout has no fixed column height — let tiles size to their content
     so the captions (and partners marquee) are never clamped to zero. */
  .ci-list { overflow: visible; flex: 0 0 auto; }
  .ci-tile { flex: 0 0 auto; min-height: 56px; }
  .cst-grid { overflow-y: visible; }
  .cst-map { position: relative; height: 64vh; }
  #hub { overflow-y: auto; padding: 70px 0 90px; }
  .cst-center { left: 50%; }
  .ch-topright { position: relative; top: auto; right: auto; width: min(560px, 92vw); margin: 0 auto 10px; }
  /* Past this width the hub stops being a dial with columns beside it and
     becomes one scrolling column — #hub is fixed, so everything below the map
     slides underneath it. Furniture pinned to the hub's own edges then prints
     on top of whatever happens to be scrolled beneath: at 820x1180 the
     capability stepper sat on "200+ clients", this hint sat across "14+ years"
     and the discovery pill sat on both. The phone rules below already dropped
     them for exactly this reason — stacking is where the reason starts, not
     640px. Everything they do is reachable in the stacked content: the
     division cards and the detail panel carry the capabilities, and the
     WHY ATCL column ends in the same discovery-call CTA. */
  .ch-inner, .cst-stepper, .cst-theme, .cst-book { display: none; }
}
/* The top-right cluster is a centred 560px row by now, and it reaches far
   enough left to run into the corner readout: at 820 "ATCL ECOSYSTEM" sat
   under COMPANY PROFILE. It only clears that readout's ~152px past ~880. */
@media (max-width: 880px) {
  .ch-live, .ch-cap, .ch-clock, .ch-tl { display: none; }
}
@media (max-width: 760px) {
  .ch-tr { font-size: 8px; padding: 8px 9px; }
}

/* Phones: tighten the radar. The floating controls that used to be dropped
   here are dropped at 1080 now, where they first start printing on content. */
@media (max-width: 640px) {
  .cst-map { height: 52vh; }
  .cst-detail { padding: 18px 16px 20px; }
}

/* very small phones: stack the detail rows so vendor/deliverable chips get room */
@media (max-width: 520px) {
  .cd-row { grid-template-columns: 1fr; gap: 5px; }
}


/* ── In-place conversation ────────────────────────────────────────────────
   The assistant speaks on the ecosystem itself rather than behind a panel.
   Desktop only: at 84px the core has nowhere to put a caption, so narrow
   screens keep the full overlay.                                          */

/* the ecosystem recedes so the core is unmistakably the thing listening */
#hub.is-conversing .cst-node,
#hub.is-conversing .cst-axis { opacity: 0.22; transition: opacity 0.5s ease; }
#hub.is-conversing .cst-info,
#hub.is-conversing .cst-book,
#hub.is-conversing #cst-stepper { opacity: 0.34; transition: opacity 0.5s ease; }
.cst-node, .cst-info, .cst-book, #cst-stepper { transition: opacity 0.5s ease; }

/* the state line takes the clock's place while a call is live */
.cc-live {
  font-size: 9px; letter-spacing: 0.3em; color: var(--acc);
  height: 0; opacity: 0; overflow: hidden; transition: opacity 0.3s ease;
}
.cst-center.v-connecting .cc-live,
.cst-center.v-listening .cc-live,
.cst-center.v-thinking .cc-live,
.cst-center.v-speaking .cc-live,
.cst-center.v-blocked .cc-live { height: auto; opacity: 0.95; }
.cst-center.v-blocked .cc-live { color: var(--amber); }
.cst-center.v-thinking .cc-live { color: var(--amber); }
.cst-center.v-speaking .cc-live { color: var(--amber); }
.cst-center.v-connecting .cc-clock,
.cst-center.v-listening .cc-clock,
.cst-center.v-thinking .cc-clock,
.cst-center.v-speaking .cc-clock,
.cst-center.v-blocked .cc-clock { display: none; }

/* what was said, on a scrim so it stays readable over the moving rings */
.cc-say {
  max-width: min(420px, 34vw); margin: 9px auto 0;
  font-size: 13px; line-height: 1.5; color: var(--fg);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.3s ease;
  text-wrap: balance;
}
.cst-center.v-connecting .cc-say,
.cst-center.v-listening .cc-say,
.cst-center.v-thinking .cc-say,
.cst-center.v-speaking .cc-say {
  opacity: 1; max-height: 9em; padding: 10px 14px; border-radius: 10px;
  background: rgba(5, 7, 13, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.10);
}
.cc-say:empty { padding: 0 !important; background: none !important; box-shadow: none !important; }

/* The overlay keeps running everything — recorder, VAD, playback — it just
   stops painting. Its two interactive pieces are moved under the core by
   ai.js, so nothing is left behind for this rule to position. */
.av-overlay.is-inplace { background: none; -webkit-backdrop-filter: none;
  backdrop-filter: none; pointer-events: none; }
.av-overlay.is-inplace .av-stage { display: none; }

/* they land in .cc-meta and inherit its centring */
.cc-meta #av-num { margin: 12px auto 0; max-width: 320px; pointer-events: auto; }
.cc-meta #av-docs { margin: 10px auto 0; max-width: 360px; pointer-events: auto; }
.cc-meta #av-num[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #hub.is-conversing .cst-node, #hub.is-conversing .cst-arc { transition: none; }
}

/* When the loader finishes it stops leaving on its own and offers a way in.
   That click is what unlocks audio for the assistant's spoken introduction —
   landing straight on the ecosystem view removed the gesture it used to get
   from the Divisions button. So this has to read as the primary action, not
   as the small "skip" it was while loading. */
.boot-skip.is-enter {
  position: absolute; top: auto; bottom: clamp(64px, 14vh, 140px);
  left: 50%; right: auto; transform: translateX(-50%);
  padding: 15px 42px; border-radius: 999px;
  font-size: var(--t-xs); letter-spacing: 0.32em; color: var(--bg);
  background: var(--acc); border: 1px solid var(--acc);
  box-shadow: 0 18px 42px -16px rgba(94, 234, 212, 0.75);
  animation: bootEnterIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.boot-skip.is-enter:hover { color: var(--bg); filter: brightness(1.08); }
.boot-skip.is-enter:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.4); }
@keyframes bootEnterIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#intro.is-ready .boot-pause { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .boot-skip.is-enter { animation: none; } }