/* =========================================================================
   MINDSET HQ — shared design system (scaffold-shell stage)
   Token contract: later stages MUST reuse these custom properties.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* brand constants (theme-independent) */
  --grad: linear-gradient(90deg, #81F47B, #0097CF, #2575FC);
  --grad-head: linear-gradient(90deg, #a5f7a2, #4ec7ef, #82b4ff); /* fallback; themed below */
  --grad-soft: linear-gradient(90deg, rgba(129,244,123,.9), rgba(0,151,207,.9), rgba(37,117,252,.9));
  --green: #81F47B; --cyan: #0097CF; --blue: #2575FC;
  --r: 16px;               /* default corner radius */
  --r-sm: 10px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-crisp: cubic-bezier(.22,.61,.36,1); /* snappy ease-out for reveals */
  --fly-dur: 600ms;        /* camera transition duration (crisper) */
  --compass-w: 292px;      /* desktop compass rail width (holds the tour transport) */
  --panel-w: 400px;        /* detail panel width (desktop) */
}

/* ---- DARK (default) ---- */
html[data-theme='dark'] {
  --bg: #07080A; --bg2: #0d0f13; --panel: #0b0d11;
  --fg: #f3f6fb; --muted: #9aa3b2; --faint: #727c8d;
  --ink-green: #81F47B; --ink-cyan: #29b3e0; --ink-blue: #6fa6ff;
  /* heading gradient: brighter stops so cyan/blue read on dark + on teal-ish panels */
  --grad-head: linear-gradient(90deg, #a5f7a2, #4ec7ef, #82b4ff);
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --node-bg: rgba(16,20,28,.72); --chip-bg: rgba(18,22,30,.82);
  --glow: rgba(0,151,207,.20);
  --scrim: rgba(4,5,7,.72);
}
/* ---- LIGHT (designed, not inverted) ---- */
html[data-theme='light'] {
  --bg: #eef1f7; --bg2: #ffffff; --panel: #ffffff;
  --fg: #0A0A0A; --muted: #515b6b; --faint: #626b7c;
  --ink-green: #0e7a3e; --ink-cyan: #0a7099; --ink-blue: #1d5fd6;
  /* heading gradient: darker stops for real contrast on the light lavender surface */
  --grad-head: linear-gradient(90deg, #0c6b37, #076088, #1a54c4);
  --line: rgba(10,12,18,.12); --line2: rgba(10,12,18,.20);
  --node-bg: rgba(255,255,255,.86); --chip-bg: rgba(255,255,255,.92);
  --glow: rgba(37,117,252,.12);
  --scrim: rgba(240,243,248,.78);
}

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Mona Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow: hidden;               /* the world pans/zooms; the page never scrolls */
  overscroll-behavior: none;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 200; letter-spacing: -.02em; line-height: 1.05; }
button { font-family: inherit; cursor: pointer; }
.eyebrow { font-weight: 700; font-size: clamp(11px,1.1vw,13px); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.grad-text { background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent; }
:focus-visible { outline: 2px solid var(--ink-cyan); outline-offset: 2px; border-radius: 4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===================== CARD ICON SYSTEM =====================
   One shared, on-brand icon set replacing plain dot markers on cards.
   Glyphs inherit the card's accent via currentColor -> var(--acc),
   so they render crisp + theme-correct in both dark and light mode. */
.ci {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  color: var(--acc, var(--ink-cyan));
  background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, var(--ink-cyan)) 32%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, var(--ink-cyan)) 8%, transparent);
  transition: color .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.ci svg { width: 25px; height: 25px; display: block; }
/* department nodes layer a glow behind content; keep the icon above it */
.ag-dept .ci { position: relative; z-index: 1; margin-bottom: 2px; }
.ci-inline {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--acc, var(--ink-cyan));
}
.ci-inline svg { width: 18px; height: 18px; display: block; }
/* nudge the icon on hover/focus of its parent interactive card */
.ws-node:hover .ci, .ws-node:focus-visible .ci,
.pl-col:hover .ci, .pl-col:focus-visible .ci,
.oc-card:hover .ci, .oc-card:focus-visible .ci,
.sec-card:hover .ci, .sec-card:focus-visible .ci,
.pt-card:hover .ci, .pt-card:focus-visible .ci,
.ag-dept:hover .ci, .ag-dept:focus-visible .ci {
  background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 20%, transparent);
  border-color: color-mix(in srgb, var(--acc, var(--ink-cyan)) 52%, transparent);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .ci { transition: none; }
  .ws-node:hover .ci, .pl-col:hover .ci, .oc-card:hover .ci,
  .sec-card:hover .ci, .pt-card:hover .ci, .ag-dept:hover .ci { transform: none; }
}
html.reduced-motion .ci { transition: none; }
.skip-link:focus { position:fixed; left:12px; top:12px; width:auto; height:auto; clip:auto; z-index:200; background:var(--panel); color:var(--fg); padding:8px 14px; border-radius:8px; }

/* ===================== VIEWPORT + WORLD ===================== */
.viewport {
  position: fixed; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--glow), transparent 60%),
    var(--bg);
  touch-action: none;             /* JS handles drag/zoom on desktop */
}
.ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.world {
  position: absolute; top: 0; left: 0;
  width: 7800px; height: 7600px;  /* logical canvas size (region coords below) */
  transform-origin: 0 0;
  transform: translate(0px,0px) scale(1);
  transition: transform var(--fly-dur) var(--ease);
  will-change: transform;
  z-index: 1;
}
.world.dragging { transition: none; cursor: grabbing; }

/* ===================== REGION CONTAINER PATTERN =====================
   Reusable: absolutely positioned within #world.
   data-cx / data-cy (JS) are the world-space CENTER coords used by the camera.
   Later stages replace .region-inner contents but keep the wrapper + data-region. */
.region {
  position: absolute;
  display: grid; place-items: center;
  border-radius: calc(var(--r) * 1.5);
}
.region-inner {
  width: min(90%, 720px);
  min-height: 220px;
  display: grid; place-items: center; gap: 10px;
  text-align: center;
  padding: 40px;
  border-radius: calc(var(--r) * 1.5);
  /* NO DEFAULT CHROME. Inactive / empty region panels must render NOTHING
     visible so neighbor panels can't bleed translucent grey boxes over the
     focused section (the Outcomes bug). Any panel/card look is drawn
     per-region by that region's own styled content (e.g. .region-inner.bk). */
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.region-tag {
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  font-size: clamp(13px,1.4vw,16px);
  background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.region-ph { color: var(--muted); margin: 0; max-width: 46ch; }
/* No generic active chrome either: every region owns its own look, so the
   active region never re-draws a hard ring/box. Prevents active-neighbor
   bleed entirely. */
.region.is-active .region-inner { }

/* Region footprints on a spacious 3-col x 4-row constellation grid inside the
   7800x7600 world. Column centers x = 1500 / 4100 / 6700 (2600px pitch); row
   centers y = 1150 / 3050 / 4950 / 6850 (1900px pitch). The empty canvas
   between cells is far larger than the fit-to-region camera window, so a
   focused region NEVER frames a neighbor unless you zoom out. Hub sits dead
   center (col1,row1) as the home the others radiate from.
   (JS reads each region's CENTER from these boxes for flyTo framing.) */
.region-enter     { left: 800px;  top: 840px;  width: 1400px; height: 620px; }  /* col0,row0 c(1500,1150) */
.region-overview  { left: 3530px; top: 850px;  width: 1140px; height: 600px; }  /* col1,row0 c(4100,1150) */
.region-gap       { left: 6100px; top: 870px;  width: 1200px; height: 560px; }  /* col2,row0 c(6700,1150) */
.region-workspace { left: 850px;  top: 2690px; width: 1300px; height: 720px; }  /* col0,row1 c(1500,3050) */
.region-pillars   { left: 6050px; top: 2660px; width: 1300px; height: 780px; }  /* col2,row1 c(6700,3050) */
.region-agents    { left: 800px;  top: 4545px; width: 1400px; height: 810px; }  /* col0,row2 c(1500,4950) */
.region-outcomes  { left: 3475px; top: 4630px; width: 1250px; height: 640px; }  /* col1,row2 c(4100,4950) */
.region-security  { left: 6140px; top: 4650px; width: 1120px; height: 600px; }  /* col2,row2 c(6700,4950) */
.region-timeline  { left: 6060px; top: 6600px; width: 1300px; height: 600px; }  /* col2,row3 c(6710,6900) */
.region-partners  { left: 1000px; top: 6500px; width: 1000px; height: 700px; }  /* col0,row3 c(1500,6850) */
.region-book      { left: 3480px; top: 6635px; width: 1240px; height: 430px; }  /* col1,row3 c(4100,6850) */

/* ===================== ENTER / HERO REGION ===================== */
/* The hero borrows the region-container pattern but drops the boxed card look
   for a cinematic, borderless composition. */
.region-enter .region-inner.hero {
  width: min(94%, 900px);
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 20px;
  gap: 20px;
  position: relative;
  z-index: 2;
}

/* glowing bulb-brain core */
.hero-core {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.hero-core-glow {
  position: absolute; inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--glow), transparent 68%);
  filter: blur(6px);
  opacity: .9;
  animation: heroPulse 5.2s var(--ease) infinite;
}
.hero-mark {
  position: relative;
  width: 132px; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 26px var(--glow)) drop-shadow(0 14px 40px rgba(0,0,0,.45));
  animation: heroFloat 7s ease-in-out infinite;
}
html[data-theme='light'] .hero-mark {
  filter: drop-shadow(0 0 20px rgba(37,117,252,.28)) drop-shadow(0 12px 34px rgba(20,30,60,.18));
}
@keyframes heroPulse { 0%,100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hero-eyebrow { color: var(--muted); }
.hero-title {
  font-weight: 200;
  font-size: clamp(34px, 6.4vw, 76px);
  letter-spacing: -.025em;
  line-height: 1.02;
  max-width: 18ch;
}
.hero-sub {
  color: var(--muted);
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 300;
  line-height: 1.5;
  max-width: 54ch;
  margin: 0;
}

.hero-doors {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 8px;
}
.door {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-size: clamp(15px, 1.5vw, 17px); font-weight: 700;
  border: 1px solid transparent;
  transition: transform .22s var(--ease), filter .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.door-primary {
  color: #04121f;
  background: var(--grad);
  box-shadow: 0 18px 44px -16px rgba(37,117,252,.62);
}
.door-primary .door-arrow { transition: transform .22s var(--ease); }
.door-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.door-primary:hover .door-arrow { transform: translateX(4px); }
.door-ghost {
  color: var(--fg);
  background: var(--node-bg);
  border-color: var(--line2);
  backdrop-filter: blur(6px);
}
.door-ghost:hover { transform: translateY(-2px); border-color: var(--cyan); }

.hero-hint {
  color: var(--faint);
  font-size: 13px; font-weight: 400; letter-spacing: .02em;
  margin: 10px 0 0;
}

/* entrance animation — hooked to ttm:region (id==='enter') via hero.js */
.hero .hero-core,
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-sub,
.hero .hero-doors,
.hero .hero-hint {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp);
}
.hero.hero-in .hero-core { opacity: 1; transform: none; transition-delay: 0ms; }
.hero.hero-in .hero-eyebrow { opacity: 1; transform: none; transition-delay: 120ms; }
.hero.hero-in .hero-title { opacity: 1; transform: none; transition-delay: 220ms; }
.hero.hero-in .hero-sub { opacity: 1; transform: none; transition-delay: 360ms; }
.hero.hero-in .hero-doors { opacity: 1; transform: none; transition-delay: 500ms; }
.hero.hero-in .hero-hint { opacity: 1; transform: none; transition-delay: 640ms; }

/* ===================== THE GAP REGION ===================== */
/* Bespoke composition for this section's argument: a horizontal BRIDGE, not a
   core-with-spokes. Two banks (MSP left / tech vendor right) each solve half;
   a single thin deck line runs the span and its middle segment DRAWS ONCE on
   enter (the gap closing). The Mindset HQ keystone straddles the middle,
   carrying both halves. No fat animated strands anywhere. */
.region-gap .region-inner.gap {
  width: min(94%, 1040px);
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 16px;
  gap: clamp(18px, 3vw, 34px);
}
.gap-head { display: grid; gap: 12px; place-items: center; max-width: 760px; }
.gap-title { font-weight: 200; font-size: clamp(28px, 4.4vw, 52px); letter-spacing: -.025em; line-height: 1.03; }
.gap-lede { color: var(--muted); font-size: clamp(15px, 1.7vw, 19px); font-weight: 300; line-height: 1.5; max-width: 58ch; margin: 0; }

/* the bridge: banks + keystone laid out horizontally, deck line behind */
.gap-bridge {
  position: relative;
  width: 100%;
  max-width: 880px;      /* keep the left bank clear of the fixed compass rail */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(6px, 2vw, 26px);
  padding: clamp(20px, 4vw, 40px) 0 clamp(10px, 2vw, 20px);
}
/* the deck line: full-span, thin, calm. y=5 of a 0..10 box => vertical centre */
.gap-deck {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%; height: 2px;
  z-index: 0; pointer-events: none; overflow: visible;
}
.gap-deck-bank { stroke-width: 1.5; opacity: .5; }
.gap-deck-span {
  stroke-width: 1.5; opacity: .85; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.gap.gap-in .gap-deck-span { stroke-dashoffset: 0; }
html[data-theme='light'] .gap-deck-bank { opacity: .75; }

/* the two banks: each is a shortfall. Full borders, no side-stripes. */
.gap-bank {
  position: relative; z-index: 1;
  display: grid; gap: 10px; justify-items: start; text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--node-bg);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 70px -44px rgba(0,0,0,.55);
}
.gap-bank-tech { justify-items: end; text-align: right; }
.gap-bank-kicker { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: var(--muted); }
.gap-bank-name { margin: 0; font-weight: 500; font-size: clamp(17px, 1.9vw, 21px); color: var(--fg); letter-spacing: -.01em; }

/* ledger rows: one thing each side HAS, one thing it LACKS */
.gap-ledger { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; width: 100%; }
.gap-row { display: flex; align-items: center; gap: 10px; font-size: clamp(13px, 1.4vw, 15px); font-weight: 400; line-height: 1.3; }
.gap-bank-tech .gap-row { flex-direction: row-reverse; }
.gap-ico { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 999px; padding: 2px; }
.gap-row.is-has { color: var(--fg); }
.gap-row.is-has .gap-ico { color: var(--ink-green); background: color-mix(in srgb, var(--ink-green) 15%, transparent); }
.gap-row.is-lack { color: var(--faint); }
.gap-row.is-lack .gap-ico { color: var(--faint); background: color-mix(in srgb, var(--faint) 14%, transparent); }
.gap-row.is-lack span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 60%, transparent); text-decoration-thickness: 1px; }

/* the keystone: Mindset HQ, straddling the gap, carrying BOTH halves */
.gap-keystone {
  position: relative; z-index: 2;
  display: grid; place-items: center; gap: 4px;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px) clamp(14px, 2vw, 18px);
  border-radius: 20px;
  background: radial-gradient(120% 90% at 50% 0%, var(--glow), transparent 70%), var(--panel);
  border: 1px solid var(--line2);
  box-shadow: 0 0 0 1px var(--line), 0 34px 90px -40px rgba(0,151,207,.7);
}
.gap-key-mark { width: clamp(88px, 11vw, 120px); height: auto; object-fit: contain; filter: drop-shadow(0 6px 18px var(--glow)); }
.gap-key-name { font-weight: 800; letter-spacing: .06em; font-size: clamp(15px, 1.7vw, 18px); color: var(--fg); }
.gap-key-org { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.gap-key-has { list-style: none; margin: 8px 0 4px; padding: 0; display: inline-flex; align-items: center; gap: 8px; }
.gap-key-has li { font-size: clamp(12px, 1.3vw, 14px); font-weight: 700; color: var(--fg); }
.gap-key-has li:not([aria-hidden]) { padding: 4px 11px; border-radius: 999px; color: #04121f; background: var(--grad); }
.gap-key-has li[aria-hidden] { color: var(--muted); font-weight: 400; }
.gap-key-tag { font-size: 11px; color: var(--ink-cyan); letter-spacing: .04em; font-weight: 700; }

.gap-foot { color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); font-weight: 300; line-height: 1.5; max-width: 62ch; margin: 0; }
.gap-foot strong { color: var(--fg); font-weight: 700; }

/* lean-copy pass: banks + keystone open supporting detail in-view */
.gap-bank[role="button"], .gap-keystone[role="button"] { cursor: pointer; }
.gap-bank[role="button"]:hover, .gap-bank[role="button"]:focus-visible { border-color: var(--line2); box-shadow: 0 28px 78px -44px rgba(0,151,207,.5); }
.gap-keystone[role="button"]:hover, .gap-keystone[role="button"]:focus-visible { box-shadow: 0 0 0 1px var(--line2), 0 40px 100px -40px rgba(0,151,207,.85); }
.gap-bank[role="button"]:focus-visible, .gap-keystone[role="button"]:focus-visible { outline: 2px solid var(--ink-cyan); outline-offset: 3px; }
.gap-hint { color: var(--faint); font-size: 13px; font-weight: 400; margin: 2px 0 0; text-align: center; }

/* entrance choreography (hooked via gap.js when id==='gap') */
.gap .gap-head, .gap .gap-bank, .gap .gap-keystone, .gap .gap-foot {
  opacity: 0; transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp);
}
.gap .gap-head { transform: translateY(14px); }
.gap .gap-bank-msp { transform: translateX(-40px); }
.gap .gap-bank-tech { transform: translateX(40px); }
.gap .gap-keystone { transform: translateY(16px) scale(.9); }
.gap .gap-foot { transform: translateY(14px); }
.gap.gap-in .gap-head { opacity: 1; transform: none; }
.gap.gap-in .gap-bank { opacity: 1; transform: none; transition-delay: .16s; }
.gap.gap-in .gap-keystone { opacity: 1; transform: none; transition-delay: .4s; }
.gap.gap-in .gap-foot { opacity: 1; transform: none; transition-delay: .56s; }

/* mobile: bridge becomes a vertical stack; deck turns into a calm vertical seam */
@media (max-width: 720px) {
  .gap-bridge {
    grid-template-columns: 1fr;
    justify-items: stretch;
    row-gap: 14px;
    padding: 8px 0;
  }
  .gap-deck { display: none; }
  .gap-bridge::before {
    content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px;
    width: 1.5px; transform: translateX(-50%);
    background: var(--grad); opacity: .35; z-index: 0;
  }
  .gap-bank, .gap-bank-tech { justify-items: center; text-align: center; }
  .gap-bank-tech .gap-row { flex-direction: row; }
  .gap-keystone { justify-self: center; width: min(100%, 320px); }
  .gap .gap-bank-msp, .gap .gap-bank-tech { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .gap-deck-span { stroke-dashoffset: 0; transition: none; }
  .gap .gap-head, .gap .gap-bank, .gap .gap-keystone, .gap .gap-foot {
    opacity: 1; transform: none; transition: none;
  }
}

/* ===================== OVERVIEW REGION (first content section) =====================
   Borderless composition (matches gap/workspace): a defining statement about
   Mindset HQ plus a set of waypoint chips that fly the camera to each section.
   Suggestive navigation without duplicating the depth of those sections. */
.region-overview .region-inner.ov {
  /* Shift the whole block into the CLEAR area to the RIGHT of the fixed compass
     rail (var(--compass-w)). The camera frames this region on viewport-center,
     so without the left offset the leftmost "what it does" card slides under the
     compass and its heading gets clipped. Matches Gap/Workspace/Pillars/Agents. */
  width: min(94%, 1240px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 16px 16px 16px calc(var(--compass-w) + 26px);
  gap: clamp(18px, 3vw, 32px);
}
.ov-head { display: grid; gap: 12px; place-items: center; max-width: 820px; }
.ov-title { font-weight: 200; font-size: clamp(28px, 4.4vw, 52px); letter-spacing: -.025em; line-height: 1.03; }
.ov-lede { color: var(--muted); font-size: clamp(15px, 1.7vw, 19px); font-weight: 300; line-height: 1.5; max-width: 56ch; margin: 0; }

/* the defining statement: brand mark + what/why */
.ov-what {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px);
  text-align: left; width: 100%; max-width: 880px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-cyan);
  border-radius: var(--r);
  background: var(--node-bg);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 70px -44px rgba(0,0,0,.6);
}
.ov-what-core {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center;
  width: clamp(88px, 11vw, 116px); height: clamp(88px, 11vw, 116px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--glow), transparent 70%), var(--panel);
  border: 1px solid var(--line2);
}
.ov-what-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--green), var(--cyan), var(--blue), var(--green));
  opacity: .5; filter: blur(8px); z-index: -1;
  animation: ovSpin 9s linear infinite;
}
@keyframes ovSpin { to { transform: rotate(360deg); } }
.ov-what-mark { width: clamp(68px, 8vw, 92px); height: auto; object-fit: contain; filter: drop-shadow(0 4px 14px var(--glow)); }
.ov-what-copy { margin: 0; color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); font-weight: 300; line-height: 1.55; }
.ov-what-copy strong { color: var(--fg); font-weight: 700; }

/* WHAT IT DOES: high-level explanation, not a navigation index */
.ov-does { display: grid; gap: clamp(12px, 1.8vw, 18px); place-items: center; width: 100%; }
.ov-does-kicker { margin: 0; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--muted); }
.ov-points {
  display: grid; width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 14px);
}
.ov-point {
  display: grid; gap: 8px; align-content: start;
  text-align: left;
  padding: clamp(16px, 2vw, 20px);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-cyan);
  border-radius: var(--r);
  background: var(--node-bg);
  backdrop-filter: blur(6px);
}
.ov-point[data-accent="green"] { border-top-color: var(--ink-green); }
.ov-point[data-accent="blue"]  { border-top-color: var(--ink-blue); }
.ov-point-name { font-weight: 600; font-size: clamp(16px, 1.7vw, 19px); color: var(--fg); letter-spacing: -.01em; }
.ov-point-copy { color: var(--muted); font-size: clamp(13px, 1.35vw, 15px); font-weight: 300; line-height: 1.5; }
.ov-why {
  margin: 4px 0 0; max-width: 62ch; text-align: center;
  color: var(--fg); font-weight: 300; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.5;
}
/* entrance choreography (hooked via overview.js when id==='overview') */
.ov .ov-head, .ov .ov-what, .ov .ov-does-kicker, .ov .ov-point, .ov .ov-why {
  opacity: 0; transform: translateY(14px);
  transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp);
}
.ov.ov-in .ov-head { opacity: 1; transform: none; }
.ov.ov-in .ov-what { opacity: 1; transform: none; transition-delay: .16s; }
.ov.ov-in .ov-does-kicker { opacity: 1; transform: none; transition-delay: .3s; }
.ov.ov-in .ov-point { opacity: 1; transform: none; transition-delay: .38s; }
.ov.ov-in .ov-point:nth-child(2) { transition-delay: .46s; }
.ov.ov-in .ov-point:nth-child(3) { transition-delay: .54s; }
.ov.ov-in .ov-why { opacity: 1; transform: none; transition-delay: .62s; }

/* lean-copy pass: brand statement + 'what it does' cards open detail in-view */
.ov-what, .ov-point { cursor: pointer; }
.ov-what:hover, .ov-what:focus-visible { border-color: var(--line2); box-shadow: 0 28px 80px -40px rgba(0,151,207,.5); }
.ov-point { position: relative; }
.ov-point:hover, .ov-point:focus-visible { border-color: var(--line2); box-shadow: 0 24px 60px -40px rgba(0,151,207,.5); }
.ov-what:focus-visible, .ov-point:focus-visible { outline: 2px solid var(--ink-cyan); outline-offset: 3px; }
.ov-point-open { margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-cyan); opacity: .85; }
.ov-hint { color: var(--faint); font-size: 13px; font-weight: 400; margin: 2px 0 0; text-align: center; }

/* ===================== THE WORKSPACE REGION (map core) =====================
   Living knowledge graph: a central hub + capability nodes as accessible DOM
   buttons, with animated brand-gradient spokes, hover/focus reveal of related
   nodes, and depth (overview -> cluster -> node). Extends the region pattern;
   node detail opens IN-VIEW via TTMMap.openPanel (never below the fold). */
.region-workspace .region-inner.ws {
  width: min(90%, 820px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px; gap: clamp(14px, 2.2vw, 22px);
}
.ws-head { display: grid; gap: 10px; place-items: center; max-width: 780px; }
.ws-title { font-weight: 200; font-size: clamp(26px, 4.2vw, 50px); letter-spacing: -.025em; line-height: 1.04; }
.ws-lede { color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); font-weight: 300; line-height: 1.5; max-width: 60ch; margin: 0; }

/* =====================================================================
   THE WORKSPACE SURFACE
   An abstract product WINDOW you look INTO: a chrome bar plus a bento of
   capability panels. Deliberately NOT a center-core-with-spokes graph and
   NOT identical cards: panel sizes and inner visuals differ per subject.
   No flowing connector lines anywhere.
   ===================================================================== */
.ws-surface {
  width: 100%;
  border: 1px solid var(--line2);
  border-radius: calc(var(--r) * 1.15);
  background:
    radial-gradient(130% 80% at 50% -12%, var(--glow), transparent 60%),
    var(--panel);
  box-shadow: 0 44px 130px -54px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  text-align: left;
}

/* --- window chrome bar --- */
.ws-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.ws-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.ws-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.ws-brand { display: inline-flex; align-items: center; gap: 10px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line2); background: var(--chip-bg); color: var(--fg); transition: border-color .24s var(--ease), box-shadow .24s var(--ease); }
.ws-brand-mark { width: 30px; height: auto; object-fit: contain; filter: drop-shadow(0 2px 9px var(--glow)); }
.ws-brand-txt { display: grid; gap: 0; line-height: 1.12; }
.ws-brand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.ws-brand-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.ws-brand:hover, .ws-brand:focus-visible { border-color: var(--ink-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-cyan) 16%, transparent); }
.ws-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; }
.ws-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-green) 22%, transparent); animation: wsPulse 2.6s var(--ease) infinite; }
@keyframes wsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* --- bento of capability panels --- */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 14px;
}
.ws-t-integ  { grid-column: 1 / 7; }
.ws-t-agents { grid-column: 1 / 4; }
.ws-t-apps   { grid-column: 4 / 7; }
.ws-t-vis    { grid-column: 1 / 4; }
.ws-t-know   { grid-column: 4 / 7; }

.ws-tile {
  display: flex; flex-direction: column; gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--node-bg); color: var(--fg);
  text-align: left;
  transition: transform .26s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease), opacity .4s var(--ease-crisp);
}
.ws-tile[data-accent='green'] { --acc: var(--ink-green); }
.ws-tile[data-accent='cyan']  { --acc: var(--ink-cyan); }
.ws-tile[data-accent='blue']  { --acc: var(--ink-blue); }
.ws-tile:hover, .ws-tile:focus-visible { transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 26px 64px -42px color-mix(in srgb, var(--acc) 78%, transparent); }
.ws-tile:hover .ws-open, .ws-tile:focus-visible .ws-open { opacity: 1; color: var(--acc); }

.ws-tile-head { display: flex; align-items: center; gap: 11px; }
.ws-tile-txt { display: grid; gap: 1px; min-width: 0; }
.ws-tile-title { font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); letter-spacing: -.01em; }
.ws-tile-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.ws-open { margin-left: auto; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); opacity: .6; transition: opacity .24s var(--ease), color .24s var(--ease); flex: 0 0 auto; }

/* viz: integrations connector chips */
.ws-conn { display: flex; flex-wrap: wrap; gap: 7px; }
.ws-conn-chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line2); background: var(--chip-bg); color: var(--muted); }

/* viz: agent run rows */
.ws-runs { display: grid; gap: 7px; }
.ws-run { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 8px 11px; border-radius: 9px; background: var(--chip-bg); border: 1px solid var(--line); }
.ws-run-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.ws-run-dot.on { background: var(--ink-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-cyan) 24%, transparent); }
.ws-run-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); flex: 0 0 auto; }
.ws-run.is-run .ws-run-tag { color: var(--ink-cyan); }

/* viz: custom-apps mini dashboard bars */
.ws-bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; padding-top: 4px; }
.ws-bars i { flex: 1; border-radius: 5px 5px 2px 2px; height: var(--h, 40%); background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 26%, transparent)); }
.ws-cap { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.4; }

/* viz: shared-visibility overlapping avatars */
.ws-vis { display: grid; gap: 10px; }
.ws-avs { display: flex; }
.ws-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .01em; color: var(--fg); border: 2px solid var(--panel); box-shadow: inset 0 0 0 1px var(--line2); margin-left: -12px; }
.ws-av:first-child { margin-left: 0; }
.ws-av-1 { background: color-mix(in srgb, var(--ink-green) 24%, var(--panel)); }
.ws-av-2 { background: color-mix(in srgb, var(--ink-cyan) 24%, var(--panel)); }
.ws-av-3 { background: color-mix(in srgb, var(--ink-blue) 24%, var(--panel)); }
.ws-av-4 { background: color-mix(in srgb, var(--ink-cyan) 14%, var(--panel)); }

/* viz: knowledge library shelves */
.ws-spines { display: grid; gap: 6px; }
.ws-spine { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg); padding: 8px 11px; border-radius: 8px; background: var(--chip-bg); border: 1px solid var(--line); }
.ws-spine i { width: 5px; height: 17px; border-radius: 2px; background: var(--acc); flex: 0 0 auto; }
.ws-spine em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--faint); }

/* entrance: surface + panels settle in when the camera lands (workspace.js adds .ws-in) */
.ws .ws-head { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.ws.ws-in .ws-head { opacity: 1; transform: none; }
.ws-surface { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-crisp), transform .5s var(--ease-crisp); }
.ws.ws-in .ws-surface { opacity: 1; transform: none; }
.ws-tile { opacity: 0; transform: translateY(10px); }
.ws-in .ws-tile { opacity: 1; transform: none; }
.ws-in .ws-t-integ  { transition-delay: .08s, .08s, 0s, .08s; }
.ws-in .ws-t-agents { transition-delay: .16s, .16s, 0s, .16s; }
.ws-in .ws-t-apps   { transition-delay: .24s, .24s, 0s, .24s; }
.ws-in .ws-t-vis    { transition-delay: .32s, .32s, 0s, .32s; }
.ws-in .ws-t-know   { transition-delay: .40s, .40s, 0s, .40s; }

/* ===================== FOUR PILLARS REGION =====================
   Training · Functional Support · Build · Maintenance as four stations arranged
   around an animated MONTHLY CADENCE RING (explore → build → deploy → maintain)
   that visibly cycles. Extends the region pattern; each pillar opens IN-VIEW via
   TTMMap.openPanel. Positions single-sourced in pillars.js. */
.region-pillars .region-inner.pl {
  /* Shift the whole colonnade + cadence rail into the CLEAR area to the right
     of the fixed compass sidebar (var(--compass-w), ~292px). The camera frames
     this region on viewport-center, so without the left offset the leftmost
     (Training) column slides under the compass and its subtitle gets clipped.
     Left pad clears the rail; width caps so the right edge stays on-screen.
     Matches the Gap/Workspace convention of sitting clear of the compass. */
  width: min(94%, 1200px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px 12px 12px calc(var(--compass-w) + 26px);
  gap: clamp(14px, 2.4vw, 26px);
}
.pl-head { display: grid; gap: 10px; place-items: center; max-width: 780px; }
.pl-title { font-weight: 200; font-size: clamp(26px, 4.2vw, 50px); letter-spacing: -.025em; line-height: 1.04; }
.pl-lede { color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); font-weight: 300; line-height: 1.5; max-width: 62ch; margin: 0; }

/* stage: vertical colonnade of four pillars standing over a horizontal cadence rail */
.pl-stage { position: relative; width: 100%; display: grid; gap: clamp(14px, 2.4vw, 26px); }

/* ---- the colonnade: four pillars standing side by side ---- */
.pl-colonnade {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.8vw, 22px); align-items: end;
}
.pl-col {
  --acc: var(--ink-cyan);
  position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  height: clamp(288px, 33vw, 384px);
  padding: 0; border: 0; background: none; color: var(--fg);
  cursor: pointer; text-align: center;
  transition: transform .26s var(--ease-crisp);
}
.pl-col[data-accent='green'] { --acc: var(--ink-green); }
.pl-col[data-accent='cyan']  { --acc: var(--ink-cyan); }
.pl-col[data-accent='blue']  { --acc: var(--ink-blue); }

/* capital (top slab) and base (plinth) overhang the shaft, like a classical column */
.pl-cap, .pl-base {
  justify-self: center; width: 100%; height: 13px; border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 78%, var(--fg)), var(--acc));
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--acc) 60%, transparent);
}
.pl-cap { margin-bottom: -1px; }
.pl-base { margin-top: -1px; height: 15px; border-radius: 4px 4px 3px 3px; }

/* the shaft: the tall fluted column body carrying the label */
.pl-shaft {
  justify-self: center; width: 86%; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: clamp(16px, 2vw, 24px) 12px 18px;
  border-radius: 5px;
  border: 1px solid var(--line2);
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--acc) 9%, transparent) 13px 14px),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 15%, var(--panel)) 0%, var(--panel) 46%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent), 0 24px 60px -44px rgba(0,0,0,.75);
  transition: border-color .26s var(--ease), box-shadow .26s var(--ease), background .26s var(--ease);
}
.pl-num { font-weight: 800; font-size: 11.5px; letter-spacing: .18em; color: var(--acc); }
.pl-col .ci { color: var(--acc); }
.pl-name { font-weight: 700; font-size: clamp(14px, 1.5vw, 18px); letter-spacing: -.01em; line-height: 1.15; }
.pl-sub { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.4; }
.pl-col:hover, .pl-col:focus-visible { transform: translateY(-4px); outline: none; }
.pl-col:hover .pl-shaft, .pl-col:focus-visible .pl-shaft {
  border-color: color-mix(in srgb, var(--acc) 60%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent), 0 30px 70px -40px color-mix(in srgb, var(--acc) 55%, transparent);
}
.pl-col:hover .pl-cap, .pl-col:hover .pl-base,
.pl-col:focus-visible .pl-cap, .pl-col:focus-visible .pl-base {
  box-shadow: 0 0 26px -3px color-mix(in srgb, var(--acc) 75%, transparent);
}

/* ---- monthly cadence rail: the clean horizontal foundation ---- */
.pl-rail {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: start; padding: 12px 2px 0;
}
.pl-track {
  position: absolute; left: 6%; right: 6%; top: 18px; height: 2px;
  background: var(--line2); border-radius: 2px;
}
.pl-stop { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; }
.pl-stop-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--ink-cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-cyan) 12%, transparent);
}
.pl-stop[data-phase='explore']  .pl-stop-dot { border-color: var(--ink-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-green) 14%, transparent); }
.pl-stop[data-phase='maintain'] .pl-stop-dot { border-color: var(--ink-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-blue) 14%, transparent); }
.pl-stop-label { font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: clamp(10px, 1.15vw, 12px); color: var(--fg); }
.pl-rail-cap { color: var(--muted); font-size: 13px; font-weight: 300; margin: 6px 0 0; text-align: center; }
.pl-rail-kicker { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--ink-cyan); margin-right: 8px; }

.pl-hint { color: var(--faint); font-size: 13px; font-weight: 400; margin: 2px 0 0; }

/* entrance: head + pillars + rail settle in when the camera lands (pillars.js adds .pl-in) */
.pl .pl-head { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.pl.pl-in .pl-head { opacity: 1; transform: none; }
.pl-col, .pl-rail, .pl-rail-cap { opacity: 0; }
.pl-in .pl-col { opacity: 1; animation: plRise .5s var(--ease-crisp) backwards; }
.pl-in .pl-col:nth-of-type(1) { animation-delay: .10s; }
.pl-in .pl-col:nth-of-type(2) { animation-delay: .18s; }
.pl-in .pl-col:nth-of-type(3) { animation-delay: .26s; }
.pl-in .pl-col:nth-of-type(4) { animation-delay: .34s; }
.pl-in .pl-rail { opacity: 1; transition: opacity .5s var(--ease) .4s; }
.pl-in .pl-rail-cap { opacity: 1; transition: opacity .5s var(--ease) .5s; }
@keyframes plRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ===================== DETAIL PANEL (reusable, in-view) ===================== */
.detail-panel {
  position: absolute; z-index: 40;
  top: 50%; right: 24px; transform: translateY(-50%);
  width: min(var(--panel-w), calc(100% - 48px));
  max-height: calc(100% - 48px);
  overflow: auto;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.7);
  padding: 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.detail-panel[data-open] { opacity: 1; pointer-events: auto; }
.detail-panel[hidden] { display: none; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.detail-title { font-size: clamp(20px,3vw,28px); }
.detail-close {
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  width: 40px; height: 40px; min-width: 40px; border-radius: 999px; font-size: 22px; line-height: 1;
}
.detail-close:hover { border-color: var(--line2); }
.detail-body { color: var(--muted); }

/* ===================== COMPASS / DOCK ===================== */
@media (prefers-reduced-motion: reduce) {
  /* overview: no spin; force the finished, visible state */
  .ov-what-ring { animation: none; }
  .ov .ov-head, .ov .ov-what, .ov .ov-does-kicker, .ov .ov-point, .ov .ov-why {
    opacity: 1; transform: none; transition: none;
  }
}

.compass {
  position: fixed; z-index: 60;
  left: 16px; top: 50%; transform: translateY(-50%);
  width: var(--compass-w);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  background: var(--scrim);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px -50px rgba(0,0,0,.7);
}
.compass-brand { display: flex; align-items: center; gap: 10px; }
.compass-mark { width: 44px; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 3px 10px var(--glow)); }
.compass-name { font-weight: 700; letter-spacing: .04em; font-size: 14px; }
.compass-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.compass-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--muted);
  padding: 9px 10px; border-radius: 10px; text-align: left;
  font-size: 14px; min-height: 40px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.compass-item .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line2); flex: 0 0 auto; transition: background .18s var(--ease), box-shadow .18s var(--ease); }
.compass-item:hover { background: var(--node-bg); color: var(--fg); }
.compass-item.is-active { color: var(--fg); background: var(--node-bg); }
.compass-item.is-active .dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(0,151,207,.22); }
.compass-item.compass-home .dot { background: var(--grad); }
.compass-item.compass-home.is-active .dot { box-shadow: 0 0 0 4px rgba(0,151,207,.22); }
.compass-actions { display: flex; flex-direction: column; gap: 10px; }
/* one-off secondary link (partners is intentionally NOT a tour/compass stop) */
.compass-aside {
  background: transparent; border: 0; color: var(--faint);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 2px 0; text-align: left; min-height: 28px;
  transition: color .18s var(--ease);
}
.compass-aside:hover, .compass-aside:focus-visible { color: var(--fg); }
.compass-book {
  width: 100%; border: 0; border-radius: 999px; min-height: 44px;
  font-weight: 700; color: #04121f;
  background: var(--grad);
  box-shadow: 0 12px 30px -12px rgba(37,117,252,.6);
}
.compass-book:hover { filter: brightness(1.06); }
.compass-controls { display: flex; gap: 8px; }
.ctl {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  border-radius: 10px; min-height: 40px; font-size: 13px;
}
.ctl:hover { border-color: var(--line2); }
.ctl[aria-pressed="true"] { border-color: var(--cyan); color: var(--fg); background: var(--node-bg); }
.ctl-ico { font-size: 12px; }

/* ===================== GUIDED-TOUR TRANSPORT (docked in the left control cluster) ===================== */
.tour-dock {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--node-bg);
}
/* visible advance timer: horizontal bar that FILLS toward auto-advance + numeric seconds */
.td-timer { display: flex; align-items: center; gap: 9px; }
.td-track {
  position: relative; flex: 1 1 auto; height: 9px; min-width: 0;
  border-radius: 999px; background: var(--line); overflow: hidden;
}
.td-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: 999px; background: var(--grad);
  box-shadow: 0 0 10px -2px var(--glow);
  transition: width .2s linear;
}
.tour-dock[data-playing="false"] .td-bar { opacity: .5; }
.td-count {
  font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 800;
  color: var(--fg); min-width: 30px; text-align: right; letter-spacing: .01em;
}
.td-nav { display: flex; align-items: center; gap: 5px; }
.td-name {
  flex: 1 1 0; min-width: 0; font-size: 11px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-prev { text-align: right; }
.td-next { text-align: left; }
.td-btn {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; font-size: 12px; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.td-btn:hover:not(:disabled) { border-color: var(--line2); background: var(--chip-bg); }
.td-btn:disabled { opacity: .32; cursor: default; }
.td-play {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--grad); color: #04121f; font-size: 12px;
}
.td-play-ico { line-height: 1; }
.td-btn:focus-visible, .td-play:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.td-step {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
html.reduced-motion .td-bar { transition: none; }

/* Mobile (<=720px): compass is the bottom rail; keep the transport compact + inline */
@media (max-width: 720px) {
  .tour-dock {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 10px; flex: 0 0 auto;
  }
  .td-timer { flex: 0 0 auto; }
  .td-track { width: 54px; flex: 0 0 54px; }
  .td-count { min-width: 24px; }
  .td-name { max-width: 60px; flex: 0 0 auto; }
  .td-step { display: none; }
}
@media (max-width: 380px) {
  .td-track { width: 40px; flex: 0 0 40px; }
  .td-name { max-width: 46px; }
}

/* ===================== MOBILE (<=720px): swipeable scene stack ===================== */
@media (max-width: 720px) {
  body { overflow: hidden; }
  .viewport { touch-action: pan-y; }
  /* keep mobile calm + cheap: field stays (background.js halves node count,
     slows drift, skips pointer-attract) but dialed back visually */
  .ambient { opacity: 0.5; }

  /* world becomes a vertical scroll-snap stack of full-viewport scenes */
  .world {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transform: none !important;            /* no camera transform on mobile */
    transition: none;
    overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  .region {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important; height: 100vh !important; height: 100dvh !important;
    scroll-snap-align: start; scroll-snap-stop: always;
    padding: 76px 16px 108px;              /* clear the bottom dock */
  }
  .region-inner { width: 100%; min-height: 0; }

  /* compass docks to the bottom as a horizontal rail */
  .compass {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: auto; flex-direction: row; align-items: center; gap: 10px;
    border-radius: var(--r) var(--r) 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    overflow-x: auto;
  }
  .compass-brand { display: none; }
  .compass-list { flex-direction: row; gap: 4px; flex: 1; overflow-x: auto; }
  .compass-item { flex: 0 0 auto; padding: 8px 12px; }
  .compass-item .dot { display: none; }
  .compass-actions { flex-direction: row; align-items: center; gap: 8px; }
  .compass-book { width: auto; padding: 0 16px; white-space: nowrap; font-size: 13px; }
  .compass-controls { flex-direction: row; }
  .ctl-lbl { display: none; }
  .ctl { min-width: 40px; padding: 0 10px; }

  /* hero stays calm + compact on mobile (ambient canvas is hidden here) */
  .region-enter .region-inner.hero { padding: 8px 4px; gap: 16px; }
  .hero-core { width: 96px; height: 96px; }
  .hero-mark { width: 96px; height: auto; }
  .hero-doors { flex-direction: column; width: 100%; }
  .door { width: 100%; justify-content: center; }

  /* gap: banks + keystone stack vertically (handled in the gap block's own
     720px rule); just tighten the shell + typographic scale here */
  .region-gap .region-inner.gap { padding: 6px 2px; gap: 18px; }
  .gap-title { font-size: clamp(24px, 8vw, 34px); }
  .gap-foot { font-size: 15px; }

  /* overview: statement stacks, waypoints become a single tappable column */
  .region-overview .region-inner.ov { padding: 6px 2px; gap: 18px; }
  .ov-title { font-size: clamp(24px, 7.5vw, 34px); }
  .ov-what { flex-direction: column; text-align: center; gap: 14px; padding: 18px 16px; }
  .ov-what-copy { text-align: left; }
  .ov-points { grid-template-columns: 1fr; }

  /* workspace: bento reflows to a single tappable column of panels */
  .region-workspace .region-inner.ws { padding: 6px 2px; gap: 16px; }
  .ws-title { font-size: clamp(23px, 7.5vw, 34px); }
  .ws-chrome { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .ws-brand { padding: 5px 11px; gap: 8px; }
  .ws-grid { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .ws-t-integ, .ws-t-agents, .ws-t-apps, .ws-t-vis, .ws-t-know { grid-column: 1 / -1; }
  .ws-tile:hover, .ws-tile:focus-visible { transform: none; }
  .ws-bars { height: 64px; }

  /* pillars: colonnade stacks to full-width columns; rail becomes a vertical cadence list */
  .region-pillars .region-inner.pl { padding: 6px 2px; gap: 16px; }
  .pl-title { font-size: clamp(23px, 7.5vw, 34px); }
  .pl-stage { gap: 14px; }
  .pl-colonnade { grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
  .pl-col { height: auto; grid-template-rows: auto auto auto; }
  .pl-cap, .pl-base { width: 60%; }
  .pl-shaft { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; padding: 14px 16px; text-align: left; }
  .pl-shaft .ci { order: -1; }
  .pl-num { width: 100%; order: -2; }
  .pl-name { font-size: 16px; }
  .pl-sub { flex-basis: 100%; }
  .pl-col:hover, .pl-col:focus-visible { transform: none; }
  .pl-in .pl-col { animation: none; }
  .pl-rail { grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 2px 0; }
  .pl-track { display: none; }
  .pl-stop { justify-items: start; grid-auto-flow: column; align-items: center; gap: 8px; }

  /* detail panel becomes a bottom sheet */
  .detail-panel {
    top: auto; bottom: 0; right: 0; left: 0; transform: translateY(12px);
    width: 100%; max-height: 82vh; border-radius: var(--r) var(--r) 0 0;
  }
  .detail-panel[data-open] { transform: translateY(0); }
}

/* ===================== DETAIL PANEL CONTENT (shared) ===================== */
.detail-body p { margin: 0 0 12px; line-height: 1.55; }
.detail-body .dp-lede { color: var(--fg); font-weight: 300; font-size: clamp(15px,1.7vw,17px); }
.detail-body .dp-list { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.detail-body .dp-list li { position: relative; padding-left: 20px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.detail-body .dp-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--grad); }
.detail-body .dp-rel-label { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 6px 0 8px; }
.detail-body .dp-rels { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-body .dp-rel {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line2); background: var(--node-bg); color: var(--fg);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.detail-body .dp-rel:hover { border-color: var(--cyan); transform: translateY(-1px); }
.detail-body .dp-rel .ws-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--acc, var(--cyan)); }
.detail-body .dp-rel[data-accent='green'] { --acc: var(--ink-green); }
.detail-body .dp-rel[data-accent='cyan'] { --acc: var(--ink-cyan); }
.detail-body .dp-rel[data-accent='blue'] { --acc: var(--ink-blue); }

/* ===================== WORKSPACE — REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .ws-live-dot { animation: none; }
  .ws .ws-head, .ws-surface, .ws-tile { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.reduced-motion .ws-live-dot { animation: none; }
html.reduced-motion .ws .ws-head,
html.reduced-motion .ws-surface,
html.reduced-motion .ws-tile { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .world { transition: none; }
  .detail-panel { transition: opacity .001ms; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
html.reduced-motion .world { transition: none; }

/* Reduced motion: no float/pulse, and never leave hero content invisible. */
@media (prefers-reduced-motion: reduce) {
  .hero-core-glow, .hero-mark { animation: none; }
  .hero .hero-core, .hero .hero-eyebrow, .hero .hero-title,
  .hero .hero-sub, .hero .hero-doors, .hero .hero-hint {
    opacity: 1; transform: none; transition: none;
  }
}
html.reduced-motion .hero-core-glow,
html.reduced-motion .hero-mark { animation: none; }
html.reduced-motion .hero .hero-core,
html.reduced-motion .hero .hero-eyebrow,
html.reduced-motion .hero .hero-title,
html.reduced-motion .hero .hero-sub,
html.reduced-motion .hero .hero-doors,
html.reduced-motion .hero .hero-hint { opacity: 1; transform: none; transition: none; }

/* Gap: calm static state — deck span fully drawn, content forced visible. */
html.reduced-motion .gap-deck-span { stroke-dashoffset: 0; transition: none; }
html.reduced-motion .gap .gap-head,
html.reduced-motion .gap .gap-bank,
html.reduced-motion .gap .gap-keystone,
html.reduced-motion .gap .gap-foot { opacity: 1; transform: none; transition: none; }

/* Pillars: calm static state — ring drawn, no spin/orbit, content forced visible. */
@media (prefers-reduced-motion: reduce) {
  .pl-col, .pl-rail, .pl-rail-cap { opacity: 1 !important; animation: none !important; transition: none !important; }
  .pl .pl-head { opacity: 1; transform: none; transition: none; }
}
html.reduced-motion .pl-col,
html.reduced-motion .pl-rail,
html.reduced-motion .pl-rail-cap { opacity: 1 !important; animation: none !important; transition: none !important; }
html.reduced-motion .pl .pl-head { opacity: 1; transform: none; transition: none; }

/* =========================================================================
   AGENT ORG region — "The Operating System": an orbital map.
   Mindy is a luminous core; five specialist departments orbit her on a single
   elegant ring; selecting a department reveals its agents as satellites on a
   mini-orbit while the rest of the system recedes. Hierarchy (core -> dept ->
   agent) is instant. LIVE agents glow crisp; ROADMAP agents are ghosted, dashed
   and tagged but legible. Lines are LIGHT; motion is crisp; names use solid
   high-contrast ink (no gradient text lost on the dark field).
   Extends the shared shell: same tokens, TTMMap.openPanel in-view detail. */
/* =========================================================================
   AGENT ORG region - departmental ROSTER / SWIMLANE org (top-down).
   Mindy leads in a full-width apex bar; five department lanes stack beneath,
   each a labelled rail + a row of agent cards. No orbit, ring, spoke, or
   satellite. Hierarchy reads by layout alone; no connecting lines.
   ========================================================================= */
.region-agents .region-inner.ag {
  /* Sit fully in the CLEAR area to the RIGHT of the fixed compass rail
     (var(--compass-w)). The camera frames this region on viewport-center, so
     without the left offset the leftmost lane rail slides under the compass and
     gets clipped. Matches the Gap/Workspace/Pillars convention. */
  width: min(94%, 1200px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px 12px 12px calc(var(--compass-w) + 26px);
  gap: clamp(12px, 1.8vw, 18px);
  justify-items: stretch; text-align: left;
}
.ag-head { display: grid; gap: 9px; justify-items: start; text-align: left; max-width: 760px; width: 100%; }
.ag-title { font-weight: 200; font-size: clamp(24px, 3.6vw, 44px); letter-spacing: -.025em; line-height: 1.05; }
.ag-lede { color: var(--muted); font-size: clamp(13px, 1.5vw, 16px); font-weight: 300; line-height: 1.5; max-width: 68ch; margin: 0; }

/* ---- the board ---- */
.ag-board { width: 100%; display: grid; gap: clamp(8px, 1.1vw, 11px); }

/* ---- apex: Mindy the orchestrator, leading across the full width ---- */
.ag-lead {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 13px 18px; border-radius: 15px; color: var(--fg);
  background: linear-gradient(100deg, color-mix(in srgb, var(--cyan) 17%, var(--panel)), var(--panel) 68%);
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--line2));
  box-shadow: 0 22px 60px -38px rgba(0,151,207,.7);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.ag-lead:hover, .ag-lead:focus-visible { transform: translateY(-2px); border-color: var(--ink-cyan); box-shadow: 0 26px 70px -34px rgba(0,151,207,.8); outline: none; }
.ag-lead-mark { width: clamp(48px, 5vw, 60px); height: auto; object-fit: contain; filter: drop-shadow(0 3px 12px var(--glow)); }
.ag-lead-text { display: grid; gap: 2px; }
.ag-lead-role { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-cyan); }
.ag-lead-name { font-weight: 800; font-size: clamp(17px, 1.9vw, 20px); letter-spacing: -.01em; }
.ag-lead-sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ag-lead-flag {
  justify-self: end; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-cyan); padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink-cyan) 42%, transparent);
  background: color-mix(in srgb, var(--ink-cyan) 10%, transparent); white-space: nowrap;
}

/* ---- department lanes ---- */
.ag-lane {
  display: grid; grid-template-columns: minmax(196px, 224px) 1fr; gap: 12px; align-items: stretch;
  padding: 9px; border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  transition: opacity .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ag-lane[data-accent='green'] { --acc: var(--ink-green); }
.ag-lane[data-accent='cyan']  { --acc: var(--ink-cyan); }
.ag-lane[data-accent='blue']  { --acc: var(--ink-blue); }

.ag-lane-rail {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px;
  text-align: left; cursor: pointer; color: var(--fg);
  padding: 11px 13px; border-radius: 11px;
  background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 11%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--acc, var(--ink-cyan)) 32%, var(--line2));
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ag-lane-rail:hover, .ag-lane-rail:focus-visible { transform: translateY(-1px); border-color: var(--acc, var(--ink-cyan)); box-shadow: 0 16px 40px -26px rgba(0,151,207,.7); outline: none; }
.ag-lane-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--acc, var(--ink-cyan));
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--acc, var(--ink-cyan)) 22%, var(--panel)), var(--panel) 80%);
  border: 1px solid color-mix(in srgb, var(--acc, var(--ink-cyan)) 45%, var(--line2));
}
.ag-lane-icon svg { width: 21px; height: 21px; display: block; }
.ag-lane-h { display: grid; gap: 1px; min-width: 0; }
.ag-lane-name { font-weight: 700; font-size: 13.5px; line-height: 1.15; letter-spacing: -.01em; color: var(--fg); }
.ag-lane-role { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.ag-lane-meta { margin-top: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acc, var(--ink-cyan)); }

.ag-lane-body { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; align-items: stretch; }

/* ---- agent cards ---- */
.ag-agent {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  flex: 1 1 158px; min-width: 158px; max-width: 232px;
  text-align: left; cursor: pointer; color: var(--fg);
  padding: 8px 11px; border-radius: 11px;
  background: var(--node-bg); border: 1px solid var(--line2);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ag-agent[data-accent='green'] { --acc: var(--ink-green); }
.ag-agent[data-accent='cyan']  { --acc: var(--ink-cyan); }
.ag-agent[data-accent='blue']  { --acc: var(--ink-blue); }
.ag-agent:hover, .ag-agent:focus-visible { transform: translateY(-2px); border-color: var(--acc, var(--ink-cyan)); background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 7%, var(--node-bg)); outline: none; }
.ag-agent-badge {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--panel);
  background: var(--acc, var(--ink-cyan));
  box-shadow: 0 6px 16px -8px var(--acc, var(--ink-cyan));
}
html[data-theme='light'] .ag-agent-badge { color: #fff; }
.ag-agent-text { display: grid; gap: 1px; min-width: 0; }
.ag-agent-name { font-weight: 700; font-size: 13px; line-height: 1.12; color: var(--fg); }
.ag-agent-fn { font-size: 11px; color: var(--muted); line-height: 1.25; }
.ag-agent-tag {
  display: none; justify-self: end; align-self: start;
  font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc, var(--ink-cyan));
  padding: 2px 6px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc, var(--ink-cyan)) 48%, transparent);
}

/* roadmap agents: ghosted, dashed, tagged, still legible */
.ag-agent.is-roadmap { background: transparent; border-style: dashed; opacity: .74; }
.ag-agent.is-roadmap .ag-agent-badge {
  color: var(--acc, var(--ink-cyan));
  background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 12%, var(--panel));
  border: 1.5px dashed color-mix(in srgb, var(--acc, var(--ink-cyan)) 58%, transparent);
  box-shadow: none;
}
.ag-agent.is-roadmap .ag-agent-name { color: var(--muted); }
.ag-agent.is-roadmap .ag-agent-tag { display: inline-block; }
.ag-agent.is-roadmap:hover, .ag-agent.is-roadmap:focus-visible { opacity: 1; }

/* ---- lane focus: selecting a department highlights its lane, dims the rest ---- */
.ag-board.is-focused .ag-lane:not(.is-active) { opacity: .42; }
.ag-lane.is-active { border-color: color-mix(in srgb, var(--acc, var(--ink-cyan)) 55%, var(--line)); background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 8%, var(--panel)); }
.ag-lane.is-active .ag-lane-rail { border-color: var(--acc, var(--ink-cyan)); box-shadow: 0 0 0 1px var(--acc, var(--ink-cyan)); }

/* controls under the board */
.ag-controls { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; min-height: 30px; width: 100%; max-width: 760px; }
.ag-back {
  border: 1px solid var(--line2); background: var(--chip-bg); color: var(--fg);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ag-back:hover { border-color: var(--ink-cyan); transform: translateY(-1px); }
.ag-legend { display: flex; gap: 16px; margin: 0; font-size: 12px; color: var(--muted); }
.ag-key { display: inline-flex; align-items: center; gap: 7px; }
.ag-key::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.ag-key-live::before { background: var(--ink-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-cyan) 18%, transparent); }
.ag-key-road::before { background: color-mix(in srgb, var(--ink-cyan) 12%, var(--panel)); border: 1.5px dashed color-mix(in srgb, var(--ink-cyan) 60%, transparent); }

.ag-hint { color: var(--faint); font-size: 13px; font-weight: 400; margin: 2px 0 0; text-align: left; width: 100%; max-width: 760px; }

/* entrance: head, lead bar, then lanes settle in (agents.js adds .ag-in) */
.ag .ag-head, .ag .ag-lead, .ag .ag-lane { opacity: 0; transform: translateY(12px); transition: opacity .44s var(--ease-crisp), transform .44s var(--ease-crisp); }
.ag.ag-in .ag-head { opacity: 1; transform: none; }
.ag.ag-in .ag-lead { opacity: 1; transform: none; transition-delay: .06s; }
.ag.ag-in .ag-lane { opacity: 1; transform: none; }
.ag.ag-in .ag-lane:nth-of-type(2) { transition-delay: .12s; }
.ag.ag-in .ag-lane:nth-of-type(3) { transition-delay: .18s; }
.ag.ag-in .ag-lane:nth-of-type(4) { transition-delay: .24s; }
.ag.ag-in .ag-lane:nth-of-type(5) { transition-delay: .30s; }
.ag.ag-in .ag-lane:nth-of-type(6) { transition-delay: .36s; }

/* ===================== AGENT ORG - MOBILE (<=720px) =====================
   The lanes collapse to a clean single-column stack: each department rail sits
   above its agents, agents go full width. No horizontal scroll. */
@media (max-width: 720px) {
  .region-agents .region-inner.ag { padding: 6px 2px; gap: 14px; width: 100%; max-width: 100%; min-width: 0; }
  .ag-title { font-size: clamp(23px, 7.5vw, 34px); }
  .ag-lead { grid-template-columns: auto 1fr; gap: 12px; padding: 12px 14px; }
  .ag-lead-flag { display: none; }
  .ag-lane { grid-template-columns: 1fr; gap: 9px; }
  .ag-lane-body { gap: 7px; }
  .ag-agent { flex: 1 1 100%; min-width: 0; max-width: none; }
  .ag-board.is-focused .ag-lane:not(.is-active) { opacity: 1; }
  .ag-controls, .ag-hint, .ag-head { max-width: 100%; }
}

/* ===================== AGENT ORG - REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .ag .ag-head, .ag .ag-lead, .ag .ag-lane { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ag-lead, .ag-lane-rail, .ag-agent { transition: none; }
}
html.reduced-motion .ag .ag-head, html.reduced-motion .ag .ag-lead, html.reduced-motion .ag .ag-lane { opacity: 1 !important; transform: none !important; transition: none !important; }

/* =========================================================================
   OUTCOMES & LIFECYCLE region — two woven parts on one grid:
   (1) ROI OUTCOMES as interactive cards (efficiency/quality, cost savings,
       strategy adhesion, risk reduction) that expand IN-VIEW via
       TTMMap.openPanel; (2) the CUSTOMER LIFECYCLE as an interactive timeline
       (provisioned fast -> ~2 weeks live -> monthly explore/build/deploy/
       maintain cadence). The upskilling-not-elimination split runs beneath as
       the thread tying them together. Extends the region pattern; panel content
       single-sourced in outcomes.js. Full dark + light, mobile + reduced-motion.
   ========================================================================= */
.region-outcomes .region-inner.oc {
  /* Sit fully clear of the fixed compass rail (var(--compass-w)). The camera
     frames the region on viewport-center, so a centered/left-flush inner would
     slide its left edge under the compass and clip it. Left-pad past the rail
     and cap width so the right edge stays on-screen. Matches Gap/Workspace/
     Pillars/Agents convention. */
  width: min(94%, 1180px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px 16px 12px calc(var(--compass-w) + 26px);
  gap: clamp(12px, 2vw, 22px);
}
.oc-head { display: grid; gap: 8px; justify-items: start; text-align: left; max-width: 760px; }
.oc-title { font-weight: 200; font-size: clamp(26px, 4.2vw, 48px); letter-spacing: -.025em; line-height: 1.04; }
.oc-lede { color: var(--muted); font-size: clamp(14px, 1.55vw, 17px); font-weight: 300; line-height: 1.5; max-width: 62ch; margin: 0; }
.oc-lede strong { color: var(--fg); font-weight: 700; }

/* stage: a single stacked dashboard column — returns board, then a horizontal
   lifecycle rail, then the who-does-what allocation bar */
.oc-stage {
  width: 100%;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(12px, 1.8vw, 18px);
  text-align: left;
}
.oc-kicker { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(11px, 1.2vw, 13px); color: var(--ink-cyan); }

/* ---- RETURNS BOARD: KPI meter rows (dashboard idiom, not a card grid) ---- */
.oc-board {
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-cyan) 6%, transparent), transparent 42%), var(--node-bg);
  backdrop-filter: blur(6px);
  padding: clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px) 6px;
  box-shadow: 0 26px 70px -46px rgba(0,0,0,.7);
}
.oc-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.oc-board-note { font-size: 12px; color: var(--faint); font-weight: 400; }
.oc-kpis { list-style: none; margin: 0; padding: 0; display: grid; }
.oc-kpis > li { margin: 0; }
.oc-kpis > li:not(:last-child) { border-bottom: 1px solid var(--line); }
.oc-return {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(150px, 1.05fr) minmax(80px, 1.5fr) auto;
  align-items: center; column-gap: clamp(10px, 1.4vw, 16px);
  padding: 10px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--fg);
  text-align: left;
  transition: background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.oc-return[data-accent='green'] { --acc: var(--ink-green); }
.oc-return[data-accent='cyan']  { --acc: var(--ink-cyan); }
.oc-return[data-accent='blue']  { --acc: var(--ink-blue); }
.oc-return .ci { width: 38px; height: 38px; }
.oc-return-txt { display: grid; gap: 1px; min-width: 0; }
.oc-return-name { font-weight: 700; font-size: clamp(13.5px, 1.4vw, 15.5px); letter-spacing: -.01em; line-height: 1.15; }
.oc-return-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.3; }
.oc-gauge { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 16%, transparent); overflow: hidden; min-width: 56px; }
.oc-gauge-fill { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 55%, transparent), var(--acc)); transform: scaleX(0); transform-origin: left; transition: transform .95s var(--ease) .25s; }
.oc-in .oc-gauge-fill { transform: scaleX(var(--filln, .8)); }
.oc-delta { display: inline-flex; align-items: center; gap: 5px; justify-self: end; white-space: nowrap; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 36%, transparent); color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); }
.oc-delta-arw { font-size: 9px; line-height: 1; }
.oc-return:hover, .oc-return:focus-visible { background: color-mix(in srgb, var(--acc) 9%, transparent); border-color: color-mix(in srgb, var(--acc) 32%, transparent); transform: translateX(2px); }

/* ---- LIFECYCLE: horizontal rail (day one -> ~2 weeks -> monthly loop) ---- */
.oc-timeline { display: grid; gap: 12px; }
.oc-rail {
  list-style: none; margin: 0; padding: 6px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 18px);
  position: relative;
}
.oc-rail::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 13px; height: 2px;
  background: var(--grad); opacity: .45; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease) .2s;
}
.oc-in .oc-rail::before { transform: scaleX(1); }
.oc-rail > li { margin: 0; }
.oc-stop {
  width: 100%; display: grid; gap: 3px; justify-items: start; text-align: left;
  padding: 0 2px; background: none; border: 0; color: var(--fg); position: relative;
}
.oc-stop[data-accent='green'] { --acc: var(--ink-green); }
.oc-stop[data-accent='cyan']  { --acc: var(--ink-cyan); }
.oc-stop[data-accent='blue']  { --acc: var(--ink-blue); }
.oc-stop-node { width: 16px; height: 16px; border-radius: 999px; background: var(--acc); border: 3px solid var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 42%, transparent); margin-bottom: 6px; transition: transform .24s var(--ease); }
.oc-stop-when { font-weight: 800; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--acc); }
.oc-stop-name { font-weight: 700; font-size: clamp(13.5px, 1.4vw, 15.5px); letter-spacing: -.01em; line-height: 1.15; }
.oc-stop-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.3; }
.oc-stop:hover .oc-stop-node, .oc-stop:focus-visible .oc-stop-node { transform: scale(1.18); }
.oc-beats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.oc-beat { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, transparent); }

/* ---- ALLOCATION BAR: who does what (upskilling, not elimination) ---- */
.oc-split { display: grid; gap: 8px; justify-items: start; text-align: left; border: 0; background: none; padding: 0; color: var(--fg); width: 100%; }
.oc-split-kick { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.oc-alloc {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 62px;
  border-radius: 999px; overflow: hidden; border: 1px solid var(--line);
  transition: box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.oc-alloc-seg { display: grid; gap: 2px; align-content: center; padding: 12px 22px; min-width: 0; }
.oc-alloc-human { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 26%, transparent), color-mix(in srgb, var(--green) 6%, transparent)); }
.oc-alloc-system { background: linear-gradient(270deg, color-mix(in srgb, var(--blue) 26%, transparent), color-mix(in srgb, var(--blue) 6%, transparent)); text-align: right; justify-items: end; border-left: 1px solid var(--line); }
.oc-alloc-role { font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.oc-alloc-txt { font-weight: 700; font-size: clamp(13px, 1.4vw, 15.5px); letter-spacing: -.01em; line-height: 1.2; }
.oc-split:hover .oc-alloc, .oc-split:focus-visible .oc-alloc { border-color: var(--ink-cyan); box-shadow: 0 20px 50px -34px rgba(0,151,207,.55); }

.oc-hint { color: var(--faint); font-size: 12.5px; font-weight: 400; margin: 0; text-align: left; }

/* ---- entrance choreography (outcomes.js adds .oc-in) ---- */
.oc .oc-head { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.oc.oc-in .oc-head { opacity: 1; transform: none; }
.oc-board, .oc-timeline, .oc-split { opacity: 0; }
.oc-in .oc-board { opacity: 1; animation: ocIn .55s var(--ease) .1s backwards; }
.oc-in .oc-timeline { opacity: 1; animation: ocIn .55s var(--ease) .28s backwards; }
.oc-in .oc-split { opacity: 1; animation: ocIn .6s var(--ease) .44s backwards; }
@keyframes ocIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ===================== OUTCOMES — MOBILE (<=720px) ===================== */
@media (max-width: 720px) {
  .region-outcomes .region-inner.oc { padding: 8px 12px; gap: 14px; }
  .oc-title { font-size: clamp(23px, 7.5vw, 34px); }
  .oc-return {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "ci txt delta" "ci gauge gauge";
    column-gap: 10px; row-gap: 7px; padding: 10px 6px;
  }
  .oc-return .ci { grid-area: ci; }
  .oc-return-txt { grid-area: txt; }
  .oc-delta { grid-area: delta; }
  .oc-gauge { grid-area: gauge; }
  .oc-return:hover, .oc-return:focus-visible { transform: none; }
  .oc-rail { grid-template-columns: 1fr; gap: 14px; }
  .oc-rail::before { display: none; }
  .oc-alloc { grid-template-columns: 1fr; border-radius: var(--r); }
  .oc-alloc-system { text-align: left; justify-items: start; border-left: 0; border-top: 1px solid var(--line); }
  .oc-in .oc-board, .oc-in .oc-timeline, .oc-in .oc-split { animation: none; }
}

/* ===================== OUTCOMES — REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .oc-rail::before, .oc-gauge-fill { transition: none; }
  .oc-in .oc-gauge-fill { transform: scaleX(var(--filln, .8)); }
  .oc-board, .oc-timeline, .oc-split { opacity: 1 !important; animation: none !important; }
  .oc .oc-head { opacity: 1; transform: none; transition: none; }
}
html.reduced-motion .oc-rail::before, html.reduced-motion .oc-gauge-fill { transition: none; }
html.reduced-motion .oc-board,
html.reduced-motion .oc-timeline,
html.reduced-motion .oc-split { opacity: 1 !important; animation: none !important; }
html.reduced-motion .oc .oc-head { opacity: 1; transform: none; transition: none; }

/* =========================================================================
   DEPLOYMENT TIMELINE region (timeline.js). Its own bespoke horizontal
   deployment timeline (day one -> ~2 weeks -> every month). Lean labels;
   detail opens in-view. Left-inset past the fixed compass rail so nothing
   clips; the one connecting line is thin + still (draws once on entrance).
   Extends the shared region-inner + panel patterns, does not fork.
   ========================================================================= */
.region-timeline .region-inner.tl {
  width: min(94%, 1180px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px 16px 12px calc(var(--compass-w) + 26px);
  gap: clamp(16px, 2.4vw, 28px);
  justify-items: start; align-content: center;
}
.tl-head { display: grid; gap: 8px; justify-items: start; text-align: left; max-width: 720px; }
.tl-title { font-weight: 200; font-size: clamp(26px, 4.2vw, 48px); letter-spacing: -.025em; line-height: 1.04; }
.tl-lede { color: var(--muted); font-size: clamp(14px, 1.55vw, 17px); font-weight: 300; line-height: 1.5; max-width: 58ch; margin: 0; }

.tl-stage { width: 100%; }
.tl-track {
  list-style: none; margin: 0; padding: 14px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 30px);
  position: relative;
}
/* the single connecting line: thin, still, draws once on entrance */
.tl-track::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 46px; height: 2px;
  background: var(--grad); opacity: .5; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease) .2s;
}
.tl-in .tl-track::before { transform: scaleX(1); }
.tl-track > li { margin: 0; }
.tl-stop {
  width: 100%; display: grid; gap: 5px; justify-items: start; text-align: left;
  padding: 0; background: none; border: 0; color: var(--fg); position: relative; cursor: pointer;
}
.tl-stop[data-accent='green'] { --acc: var(--ink-green); }
.tl-stop[data-accent='cyan']  { --acc: var(--ink-cyan); }
.tl-stop[data-accent='blue']  { --acc: var(--ink-blue); }
.tl-stop-when { font-weight: 800; font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.tl-stop-node { width: 20px; height: 20px; border-radius: 999px; background: var(--acc); border: 3px solid var(--bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 40%, transparent); margin: 4px 0 8px; transition: transform .24s var(--ease); }
.tl-stop-name { font-weight: 700; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: -.015em; line-height: 1.15; }
.tl-stop-sub { font-size: clamp(12px, 1.3vw, 14px); color: var(--muted); font-weight: 400; line-height: 1.35; }
.tl-stop:hover .tl-stop-node, .tl-stop:focus-visible .tl-stop-node { transform: scale(1.18); }
.tl-stop:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }
.tl-beats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tl-beat { font-size: clamp(10.5px, 1.1vw, 12px); font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent); color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, transparent); }

.tl-hint { color: var(--faint); font-size: 12.5px; font-weight: 400; margin: 0; text-align: left; }

/* entrance choreography (timeline.js adds .tl-in) */
.tl .tl-head { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.tl.tl-in .tl-head { opacity: 1; transform: none; }
.tl-track > li { opacity: 0; }
.tl-in .tl-track > li { opacity: 1; animation: tlIn .55s var(--ease) backwards; }
.tl-in .tl-track > li:nth-child(1) { animation-delay: .18s; }
.tl-in .tl-track > li:nth-child(2) { animation-delay: .34s; }
.tl-in .tl-track > li:nth-child(3) { animation-delay: .5s; }
@keyframes tlIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .region-timeline .region-inner.tl { padding: 8px 12px; gap: 16px; }
  .tl-title { font-size: clamp(23px, 7.5vw, 34px); }
  .tl-track { grid-template-columns: 1fr; gap: 18px; }
  .tl-track::before { display: none; }
  .tl-in .tl-track > li { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-track::before { transition: none; }
  .tl-track > li { opacity: 1 !important; animation: none !important; }
  .tl .tl-head { opacity: 1; transform: none; transition: none; }
}
html.reduced-motion .tl-track::before { transition: none; }
html.reduced-motion .tl-track > li { opacity: 1 !important; animation: none !important; }
html.reduced-motion .tl .tl-head { opacity: 1; transform: none; transition: none; }

/* =========================================================================
   SECURITY region — the safety / trust case, sits after Agents, before
   Outcomes. Reuses the shared region-inner + card + in-view panel patterns
   (extends, does not fork): head cluster + a row of interactive cards that
   expand via TTMMap.openPanel. Full dark + light, mobile-safe, reduced-motion
   safe.
   ========================================================================= */
/* SECURITY: bespoke "defense in depth" treatment. A concentric protective
   shield (5 rings wrapping the protected workspace core) paired with a
   defense-in-depth stack (outer perimeter -> core), each layer openable in
   the in-view panel. NOT a card grid; the composition itself says "layered
   safety". Rings are the only lines and they are thin + still. The whole
   inner is left-inset past the fixed compass rail so nothing clips. */
.region-inner.sec {
  width: min(94%, 1180px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px 16px 12px calc(var(--compass-w) + 26px);
  gap: clamp(14px, 2vw, 22px);
  justify-items: start; align-content: center;
}
.sec-head { display: grid; gap: 8px; justify-items: start; text-align: left; max-width: 720px; }
.sec-title { font-weight: 200; font-size: clamp(26px, 4.2vw, 48px); letter-spacing: -.025em; line-height: 1.04; }
.sec-lede { color: var(--muted); font-size: clamp(14px, 1.55vw, 17px); font-weight: 300; line-height: 1.5; max-width: 60ch; margin: 0; }
.sec-lede strong { color: var(--fg); font-weight: 700; }

.sec-stage {
  width: 100%;
  display: flex; justify-content: flex-start;
  text-align: left;
}

/* ---- hero SHIELD: one protective form that holds the five safeguards ---- */
.sec-shield {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 240 / 288;
  flex: 0 0 auto;
}
.sec-shield-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sec-shield-fill {
  fill: color-mix(in srgb, var(--ink-cyan) 8%, var(--panel));
  transition: fill .35s var(--ease);
}
.sec-shield-edge {
  fill: none; stroke: url(#secShieldGrad); stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ink-cyan) 34%, transparent));
}
.sec-shield.is-armed .sec-shield-fill { fill: color-mix(in srgb, var(--ink-cyan) 14%, var(--panel)); }

.sec-shield-in {
  position: absolute; inset: 8.5% 13.5% 25% 13.5%;
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(8px, 1.4vh, 14px);
}

/* crest at the head of the shield */
.sec-crest { display: grid; justify-items: center; gap: 2px; text-align: center; }
.sec-crest-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-green);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--ink-green) 34%, transparent), transparent 72%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--ink-green) 55%, var(--line2));
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--ink-green) 55%, transparent);
}
.sec-crest-ico svg { width: 24px; height: 24px; }
.sec-crest-name { font-weight: 800; font-size: clamp(14px, 1.5vw, 17px); letter-spacing: -.01em; color: var(--fg); line-height: 1.1; }
.sec-crest-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* five safeguard badges, LEAN labels, seated inside the shield */
.sec-badges { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1vh, 9px); }
.sec-badge {
  width: 100%;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--line2); background: var(--chip-bg); color: var(--fg);
  text-align: left; cursor: pointer;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), opacity .3s var(--ease);
}
.sec-badge[data-accent='green'] { --acc: var(--ink-green); }
.sec-badge[data-accent='cyan']  { --acc: var(--ink-cyan); }
.sec-badge[data-accent='blue']  { --acc: var(--ink-blue); }
.sec-badge-ico {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--acc, var(--ink-cyan)); flex: 0 0 auto;
  background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--acc, var(--ink-cyan)) 40%, var(--line2));
}
.sec-badge-ico svg { width: 17px; height: 17px; }
.sec-badge-name { font-weight: 700; font-size: clamp(12.5px, 1.25vw, 14px); letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.sec-badge:hover, .sec-badge:focus-visible, .sec-badge.is-hot {
  transform: translateY(-2px); border-color: var(--acc, var(--ink-cyan));
  background: color-mix(in srgb, var(--acc, var(--ink-cyan)) 10%, var(--chip-bg));
  box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--acc, var(--ink-cyan)) 85%, transparent);
}
.sec-hint { margin: 2px 0 0; font-size: 12px; color: var(--faint); letter-spacing: .02em; text-align: left; }

/* entrance choreography (mirror overview / outcomes) */
.sec .sec-head { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.sec.sec-in .sec-head { opacity: 1; transform: none; }
.sec-shield, .sec-badge, .sec-hint { opacity: 0; }
.sec-in .sec-shield { opacity: 1; animation: ocIn .6s var(--ease) .12s backwards; }
.sec-in .sec-badge { opacity: 1; animation: ocIn .5s var(--ease) backwards; }
.sec-in .sec-badges li:nth-of-type(1) .sec-badge { animation-delay: .20s; }
.sec-in .sec-badges li:nth-of-type(2) .sec-badge { animation-delay: .28s; }
.sec-in .sec-badges li:nth-of-type(3) .sec-badge { animation-delay: .36s; }
.sec-in .sec-badges li:nth-of-type(4) .sec-badge { animation-delay: .44s; }
.sec-in .sec-badges li:nth-of-type(5) .sec-badge { animation-delay: .52s; }
.sec-in .sec-hint { opacity: 1; transition: opacity .6s var(--ease) .6s; }

@media (max-width: 900px) {
  .region-inner.sec { padding-left: calc(var(--compass-w) + 20px); }
  .sec-stage { justify-content: center; }
  .sec-shield { width: min(100%, 400px); }
}
@media (max-width: 720px) {
  .region-inner.sec { padding: 8px 14px; width: 100%; justify-items: stretch; }
  .sec-head { justify-items: start; }
  .sec-title { font-size: clamp(24px, 7.5vw, 34px); }
  .sec-shield { width: min(100%, 340px); }
  .sec-badge:hover, .sec-badge:focus-visible, .sec-badge.is-hot { transform: none; }
}
@media (max-width: 420px) {
  .sec-shield { width: 100%; aspect-ratio: 240 / 300; }
  .sec-shield-in { inset: 7% 11% 24% 11%; }
  .sec-crest-ico { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-shield, .sec-badge, .sec-hint { opacity: 1 !important; animation: none !important; }
  .sec .sec-head { opacity: 1; transform: none; transition: none; }
}
html.reduced-motion .sec-shield,
html.reduced-motion .sec-badge,
html.reduced-motion .sec-hint { opacity: 1 !important; animation: none !important; }
html.reduced-motion .sec .sec-head { opacity: 1; transform: none; transition: none; }

/* =========================================================================
   PARTNERS region — consultant / white-label lane. Distinct treatment from
   the other regions: an early-partner opportunity with a white-label "lane"
   (front = partner brand, back = TTM engine) + three "what you get" cards
   that open IN-VIEW via TTMMap.openPanel, and a primary CTA that links out to
   the pitch page. Full dark + light, mobile-safe at 360px, reduced-motion safe.
   Panel content single-sourced in partners.js.
   ========================================================================= */
.region-partners .region-inner.pt {
  width: min(95%, 900px);
  min-height: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none;
  padding: 12px; gap: clamp(14px, 2.2vw, 24px);
}
.pt-head { display: grid; gap: 10px; place-items: center; max-width: 760px; }
.pt-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px; min-height: 34px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(10px, 1.1vw, 12px);
  color: var(--fg); border: 1px solid var(--line2);
  background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--green) 20%, transparent), transparent 60%), var(--chip-bg);
}
.pt-badge-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--grad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 24%, transparent); animation: ptPulse 2.6s var(--ease) infinite; }
@keyframes ptPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
.pt-title { font-weight: 200; font-size: clamp(26px, 4.2vw, 50px); letter-spacing: -.025em; line-height: 1.04; }
.pt-lede { color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); font-weight: 300; line-height: 1.5; max-width: 60ch; margin: 0; }

.pt-stage { width: 100%; display: grid; gap: clamp(12px, 1.8vw, 18px); text-align: left; }

/* ---- white-label lane: partner brand out front, TTM engine behind ---- */
.pt-lane {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden;
  background: var(--node-bg); min-height: 96px;
}
.pt-lane-half { display: grid; gap: 3px; align-content: center; padding: 16px 20px; min-width: 0; }
.pt-lane-front { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 16%, transparent), transparent); }
.pt-lane-back { background: linear-gradient(270deg, color-mix(in srgb, var(--blue) 16%, transparent), transparent); text-align: right; justify-items: end; }
.pt-lane-role { font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pt-lane-txt { font-weight: 600; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: -.01em; line-height: 1.2; }
.pt-lane-mid { position: relative; display: grid; place-items: center; gap: 4px; padding: 8px 14px; }
.pt-lane-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 9%, transparent), transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pt-lane-mark { position: relative; width: 62px; height: auto; object-fit: contain; filter: drop-shadow(0 4px 16px var(--glow)); }
.pt-lane-cap { position: relative; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

/* ---- what you get: three cards (open in-view) ---- */
.pt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pt-card {
  min-width: 0; display: grid; gap: 5px; justify-items: start; text-align: left;
  padding: 16px; min-height: 104px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--chip-bg); color: var(--fg);
  transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease), opacity .3s var(--ease);
}
.pt-card[data-accent='green'] { --acc: var(--ink-green); }
.pt-card[data-accent='cyan']  { --acc: var(--ink-cyan); }
.pt-card[data-accent='blue']  { --acc: var(--ink-blue); }
.pt-card-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--acc, var(--cyan)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc, var(--cyan)) 22%, transparent); }
.pt-card-name { font-weight: 700; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: -.01em; line-height: 1.15; }
.pt-card-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.4; }
.pt-card:hover, .pt-card:focus-visible { transform: translateY(-3px); border-color: var(--acc, var(--cyan)); box-shadow: 0 26px 60px -36px rgba(0,151,207,.6); z-index: 2; }

/* ---- CTA: primary link out to the pitch page ---- */
.pt-cta { display: grid; gap: 8px; place-items: center; text-align: center; }
.pt-get {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  min-height: 54px; padding: 0 30px; border-radius: 999px;
  font-size: clamp(15px, 1.6vw, 18px); font-weight: 800; letter-spacing: -.01em;
  color: #04121f; background: var(--grad);
  box-shadow: 0 18px 44px -16px rgba(37,117,252,.62);
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.pt-get:hover, .pt-get:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.pt-get-arrow { transition: transform .22s var(--ease); }
.pt-get:hover .pt-get-arrow { transform: translateX(4px); }
.pt-cta-note { color: var(--faint); font-size: 13px; font-weight: 400; margin: 0; }
.pt-hint { color: var(--faint); font-size: 13px; font-weight: 400; margin: 2px 0 0; text-align: center; }

/* ---- entrance choreography (partners.js adds .pt-in) ---- */
.pt .pt-head { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.pt.pt-in .pt-head { opacity: 1; transform: none; }
.pt-lane, .pt-card, .pt-cta { opacity: 0; }
.pt-in .pt-lane { opacity: 1; animation: ptIn .6s var(--ease) .08s backwards; }
.pt-in .pt-card { opacity: 1; animation: ptIn .55s var(--ease) backwards; }
.pt-in .pt-card:nth-of-type(1) { animation-delay: .18s; }
.pt-in .pt-card:nth-of-type(2) { animation-delay: .28s; }
.pt-in .pt-card:nth-of-type(3) { animation-delay: .38s; }
.pt-in .pt-cta { opacity: 1; animation: ptIn .6s var(--ease) .48s backwards; }
@keyframes ptIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ===================== PARTNERS — MOBILE (<=720px) ===================== */
@media (max-width: 720px) {
  .region-partners .region-inner.pt { padding: 6px 2px; gap: 16px; }
  .pt-title { font-size: clamp(23px, 7.5vw, 34px); }
  .pt-cards { grid-template-columns: 1fr; }
  .pt-card { min-height: 0; padding: 14px 16px; }
  .pt-card:hover, .pt-card:focus-visible { transform: none; }
  .pt-lane { grid-template-columns: 1fr; }
  .pt-lane-front, .pt-lane-back { text-align: left; justify-items: start; background: none; padding: 14px 16px; }
  .pt-lane-front { border-bottom: 1px solid var(--line); }
  .pt-lane-mid { display: none; }
  .pt-get { width: 100%; justify-content: center; }
  .pt-in .pt-lane, .pt-in .pt-card, .pt-in .pt-cta { animation: none; }
}

/* ===================== PARTNERS — REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .pt-badge-dot { animation: none; }
  .pt-lane, .pt-card, .pt-cta { opacity: 1 !important; animation: none !important; }
  .pt .pt-head { opacity: 1; transform: none; transition: none; }
}
html.reduced-motion .pt-badge-dot { animation: none; }
html.reduced-motion .pt-lane,
html.reduced-motion .pt-card,
html.reduced-motion .pt-cta { opacity: 1 !important; animation: none !important; }
html.reduced-motion .pt .pt-head { opacity: 1; transform: none; transition: none; }

/* =========================================================================
   BOOK REGION — the confident close. Reuses the prod booking flow (slot
   picker -> POST /api/book), restyled into the immersive shell with existing
   tokens. Two-column on desktop: value-forward copy + the working booker.
   All selectors scoped under .region-book so the reused markup can keep its
   original ids/classes without colliding with the shell.
   ========================================================================= */
.region-book .region-inner.bk {
  width: min(96%, 1080px);
  min-height: 0;
  padding: clamp(18px, 2.4vw, 30px);
  gap: 0;
  text-align: left;
  place-items: stretch;
  /* Book is a real card, so it opts back INTO panel chrome explicitly. */
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--glow), transparent 55%),
    var(--node-bg);
  box-shadow: 0 30px 90px -40px rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}
.region-book .bk-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  width: 100%;
}

/* ---- left: value-forward copy ---- */
.region-book .bk-intro { display: grid; gap: 14px; align-content: start; min-width: 0; }
.region-book .bk-title { font-weight: 200; font-size: clamp(24px, 3.4vw, 42px); letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.region-book .bk-lede { color: var(--muted); font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; line-height: 1.5; max-width: 42ch; margin: 0; }
.region-book .bk-assure { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.region-book .bk-assure li { display: flex; align-items: flex-start; gap: 10px; color: var(--fg); font-size: clamp(13px, 1.3vw, 15px); font-weight: 400; line-height: 1.4; }
.region-book .bk-assure-dot { flex: 0 0 auto; margin-top: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--grad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent); }

/* ---- right: the booker panel ---- */
.region-book .bk-panel {
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--chip-bg);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 30px 80px -46px rgba(0,151,207,.55);
  min-width: 0;
}
.region-book .booker { display: grid; gap: 4px; }
.region-book .bk-step { margin: 0 0 2px; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.region-book .bk-step-tz { font-weight: 500; letter-spacing: .04em; color: var(--faint); text-transform: none; }
.region-book .bk-step + .bk-days { margin-bottom: 12px; }

.region-book .bk-days { display: flex; flex-wrap: wrap; gap: 6px; }
.region-book .bk-day { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--node-bg); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; min-height: 40px; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.region-book .bk-day:hover { border-color: var(--cyan); }
.region-book .bk-day.active { background: var(--green); color: #051207; border-color: transparent; }
.region-book .bk-day:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.region-book .bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; margin-top: 4px; }
.region-book .bk-slot { padding: 11px 8px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--node-bg); color: var(--fg); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: center; min-height: 40px; transition: border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease); }
.region-book .bk-slot:hover { border-color: var(--cyan); transform: translateY(-1px); }
.region-book .bk-slot.active { background: color-mix(in srgb, var(--green) 22%, var(--node-bg)); border-color: var(--green); }
.region-book .bk-slot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.region-book .bk-none { color: var(--faint); font-size: 13.5px; padding: 8px 0; margin: 0; }

.region-book .bk-form { margin-top: 12px; display: grid; gap: 10px; }
.region-book .bk-chosen { font-size: 13px; font-weight: 700; color: var(--ink-green); margin: 0; }
.region-book .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.region-book .field { display: grid; gap: 5px; min-width: 0; }
.region-book .field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.region-book .field input, .region-book .field textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--node-bg); color: var(--fg);
  font: inherit; font-size: 14px; min-height: 40px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.region-book .field textarea { resize: vertical; min-height: 54px; line-height: 1.4; }
.region-book .field input:focus, .region-book .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }

.region-book .bk-submit {
  width: 100%; justify-content: center; text-align: center;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: #04121f; background: var(--grad);
  box-shadow: 0 16px 40px -18px rgba(37,117,252,.62);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.region-book .bk-submit:hover { transform: translateY(-2px); filter: brightness(1.06); }
.region-book .bk-submit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.region-book .bk-submit:disabled { opacity: .6; cursor: default; transform: none; filter: none; }
.region-book .form-note { font-size: 12px; color: var(--faint); margin: 0; text-align: center; }

.region-book .form-ok { display: none; border: 1px solid color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); border-radius: var(--r-sm); padding: 16px; margin-top: 12px; }
.region-book .form-ok.show { display: grid; gap: 12px; }
.region-book .bk-ok-msg { margin: 0; font-size: 14px; color: var(--fg); line-height: 1.5; }
.region-book .bk-done { justify-self: start; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--fg); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: border-color .2s var(--ease); }
.region-book .bk-done:hover { border-color: var(--cyan); }
.region-book .bk-empty { font-size: 13px; color: var(--faint); margin-top: 12px; }
.region-book .bk-empty a { color: var(--ink-cyan); }

/* ---- entrance choreography (booking.js adds .bk-in) ---- */
.region-book .bk-intro, .region-book .bk-panel { opacity: 0; transform: translateY(14px); transition: opacity .46s var(--ease-crisp), transform .46s var(--ease-crisp); }
.region-book .region-inner.bk.bk-in .bk-intro { opacity: 1; transform: none; }
.region-book .region-inner.bk.bk-in .bk-panel { opacity: 1; transform: none; transition-delay: .12s; }

/* ===================== BOOK — MOBILE (<=720px) ===================== */
@media (max-width: 720px) {
  .region-book .region-inner.bk { padding: 8px 2px; }
  .region-book .bk-grid { grid-template-columns: 1fr; gap: 18px; }
  .region-book .bk-title { font-size: clamp(22px, 7vw, 32px); }
  .region-book .bk-slots { grid-template-columns: repeat(2, 1fr); }
  .region-book .bk-day, .region-book .bk-slot { transform: none; }
}
@media (max-width: 380px) {
  .region-book .frow { grid-template-columns: 1fr; }
}

/* ===================== BOOK — REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .region-book .bk-intro, .region-book .bk-panel { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.reduced-motion .region-book .bk-intro,
html.reduced-motion .region-book .bk-panel { opacity: 1 !important; transform: none !important; transition: none !important; }