/* =============================================================================
   Zilla 0.5 — prototype layer
   Loaded AFTER src/styles.css. Adds: the blog feed, the interactive
   "graph as index" states, a scroll cue, and the three layout variants.
   ========================================================================== */

/* ----------------------------------------------------- prototype switcher -- */
.proto-switch {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.01em;
  max-width: calc(100vw - 24px);
  overflow: visible;
  scrollbar-width: none;
}
.proto-switch::-webkit-scrollbar {
  display: none;
}
.proto-switch a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.proto-switch a:hover {
  color: #fff;
}
.proto-switch a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
}
.proto-archive {
  position: relative;
}
.proto-archive summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--color-text-subtle);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.proto-archive summary::-webkit-details-marker {
  display: none;
}
.proto-archive summary::after {
  content: "⌄";
  font-size: 10px;
  line-height: 1;
  color: var(--color-text-muted);
}
.proto-archive[open] summary,
.proto-archive summary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.proto-archive-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 8, 0.88);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.proto-archive-menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
}
.proto-archive-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
}
.proto-switch .proto-switch-home {
  opacity: 0.6;
  padding-left: 10px;
  padding-right: 10px;
}

/* ----------------------------------------------------------- primary CTA -- */
/* Hierarchy approach: keep the waitlist CTA frosted glass, but read it as the
   FILLED primary (brighter fill) while the secondary button is quieted to a
   near-ghost below — so the conversion action clearly wins without going solid.
   (This proto.css rule is the single source of truth for .button-primary; it
   fully overrides the base solid-white definition in src/styles.css.) */
.button-primary,
.nav-cta.button-primary {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 0;
  color: #ffffff;
  font-variation-settings: "wght" 520;
  font-weight: 520;
  transition: background 160ms ease;
}
.button-primary:hover,
.nav-cta.button-primary:hover {
  background: rgba(255, 255, 255, 0.24);
  opacity: 1;
}

/* Secondary hero button ("Read the latest") quieted to a near-ghost so the
   glass waitlist CTA beside it reads as primary. Scoped to the hybrid hero. */
body[data-variant="hybrid"] .hero-actions .button-glass-subtle {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
body[data-variant="hybrid"] .hero-actions .button-glass-subtle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.nav-glyph {
  display: none;
}

/* Embedded orbit diagram (hybrid hero) — the built diagram-experiment app in
   view mode, transparent so it floats over the hero video. */
.hero-diagram {
  width: 100%;
  height: clamp(440px, 46vw, 540px);
  border: 0;
  background: transparent;
  display: block;
}

/* Orbit diagram in the sticky-aside persistent panel. */
.aside-diagram {
  width: 100%;
  height: 480px;
  border: 0;
  background: transparent;
  display: block;
}

/* --------------------------------------------------- graph as blog index -- */
/* Make the topic nodes real, focusable controls and give them meaning. */
.topic-node {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}
/* Enlarge the hit/focus area without changing the visible dot size. */
.topic-node::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
}
.topic-node:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}
.topic-node.is-active {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16), 0 0 26px rgba(255, 255, 255, 0.6);
  transform: scale(1.45);
}
.node-founder.is-active {
  box-shadow: 0 0 0 5px rgba(255, 122, 47, 0.22), 0 0 26px rgba(255, 122, 47, 0.7);
}
.node-revenue.is-active {
  box-shadow: 0 0 0 5px rgba(131, 240, 197, 0.22), 0 0 26px rgba(131, 240, 197, 0.7);
}
.topic-node.is-cued {
  transform: scale(1.55);
}
.topic-node:not(.is-active) {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Topic labels double as click targets and read like an index legend. */
.topic-label {
  cursor: pointer;
  display: grid;
  gap: 1px;
  font-size: 8.5px;
  line-height: 1.35;
  color: var(--color-text-subtle);
  transition: color 160ms ease;
  z-index: 3;
}
.topic-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--dot, #fff);
  margin-bottom: 3px;
}
.topic-label:hover,
.topic-label.is-active {
  color: #fff;
}
.label-founder {
  left: 44px;
  top: 116px;
  --dot: var(--color-accent-1);
}
.label-customer {
  left: 388px;
  top: 70px;
  --dot: #fff;
}
.label-revenue {
  left: 350px;
  top: 348px;
  --dot: var(--color-accent-2);
}

.graph-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--color-text-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------------------------------------------------------------- scroll cue -- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--color-text-subtle);
  transition: color 160ms ease, opacity 320ms ease;
}
.scroll-cue:hover {
  color: #fff;
}
.scroll-cue-arrow {
  animation: cue-bob 1.8s ease-in-out infinite;
}
.is-docked .scroll-cue {
  opacity: 0;
  pointer-events: none;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ------------------------------------------------------------- blog feed -- */
.blog-section {
  background: linear-gradient(180deg, #020202, #060706 60%, #040504);
  padding: clamp(64px, 9vw, 132px) clamp(var(--space-3), 5vw, 72px) clamp(72px, 9vw, 128px);
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
.feed-head {
  display: grid;
  gap: 16px;
  max-width: 1040px;
}
.feed-head h2 {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 0.94;
}
.feed-filter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}
.feed-filter strong {
  color: #fff;
  font-weight: 500;
}
.feed-filter-clear {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.feed-filter-clear:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.blog-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.post {
  position: relative;
  background: #050605;
  padding: clamp(22px, 2.4vw, 32px);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: background 200ms ease, opacity 320ms ease, filter 320ms ease;
}
.post::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.05), transparent 60%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.post:hover {
  background: #0a0c0a;
}
.post:hover::before {
  opacity: 1;
}
.post.is-dim {
  opacity: 0.24;
  filter: saturate(0.4);
}
.post-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.post-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dot, #fff);
  box-shadow: 0 0 10px var(--dot, #fff);
  flex: 0 0 auto;
}
.post-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.post-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}
.post-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #fff;
  opacity: 0.7;
  transition: opacity 160ms ease;
}
.post:hover .post-link {
  opacity: 1;
}
.post-featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #0a0c0a, #050605);
}
.post-featured .post-title {
  font-size: clamp(26px, 2.6vw, 38px);
}
.post-featured .post-excerpt {
  max-width: 560px;
  font-size: 15px;
}

/* reveal stagger for posts */
.post.reveal-on-scroll {
  transition:
    opacity 700ms ease var(--post-delay, 0ms),
    transform 700ms ease var(--post-delay, 0ms),
    filter 700ms ease var(--post-delay, 0ms),
    background 200ms ease;
}

/* Bottom-of-page scroll transition into the blog: hybrid uses the shared base
   .reveal-on-scroll (blur 14px → sharp, rise 28px, 820ms ease) — the same
   "paint in" as the landing tab. No hybrid-specific override. */

/* =============================================================================
   VARIANT A — hybrid
   Hero peeks the next section, graph collapses to a small nav glyph on scroll.
   ========================================================================== */
body[data-variant="hybrid"] .hero {
  height: 100svh;
  min-height: 760px;
}
/* Hybrid hero: two balanced halves — copy left, chart centered in the right
   half (bigger). Tighter vertical padding so the larger chart fits the viewport. */
body[data-variant="hybrid"] .hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(100px, 13vh, 124px);
  padding-bottom: clamp(72px, 10vh, 96px);
  /* depth for the cursor-driven tilt on the chart (see hybrid.html) */
  perspective: 1400px;
}
body[data-variant="hybrid"] .hero-copy {
  max-width: 560px;
}
body[data-variant="hybrid"] .hero-diagram {
  width: 100%;
  max-width: 620px;
  height: clamp(580px, 64vh, 640px);
  justify-self: center;
  /* Glass lives on the IFRAME element (parent doc) — backdrop-filter set inside
     the transparent iframe can't blur the parent hero, but on the iframe element
     it can. Matches .auton-panel on landing/landing-v2: white 0.07 + blur(2px).
     The chart card inside is transparent so the fill/blur shows through. */
  background: var(--color-layer-1, rgba(255, 255, 255, 0.07));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid var(--color-layer-1-stroke, rgba(255, 255, 255, 0.22));
  border-radius: var(--radius-panel, 16px);
  overflow: hidden;
  /* cursor tilt: JS writes the transform; smooth the idle return + GPU hint */
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
/* nav glyph: a tiny 3-dot echo of the graph that appears once docked */
body[data-variant="hybrid"] .nav-glyph {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
body[data-variant="hybrid"].is-docked .nav-glyph {
  opacity: 1;
  transform: translateY(0) scale(1);
}
body[data-variant="hybrid"] .nav-glyph i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--g, #fff);
  box-shadow: 0 0 8px var(--g, #fff);
}
/* .hero has isolation:isolate, which would trap the fixed nav inside the
   hero's stacking context and paint it under the blog. Lift the whole hero
   layer when docked so the fixed nav rides above later sections. */
body[data-variant="hybrid"].is-docked .hero {
  z-index: 30;
}
/* keep the docked nav readable over content */
body[data-variant="hybrid"].is-docked .nav {
  position: fixed;
  background: rgba(2, 3, 2, 0.78);
  backdrop-filter: blur(16px);
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  animation: nav-drop 320ms ease both;
}
@keyframes nav-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* =============================================================================
   VARIANT B — one-page
   Simplest: hero, then the feed right below. Graph lives only in the hero,
   clicking a node scrolls down + filters. Strong scroll cue fights false-bottom.
   ========================================================================== */
body[data-variant="one-page"] .hero {
  height: 92svh;
  min-height: 660px;
}
body[data-variant="one-page"] .blog-feed {
  grid-template-columns: repeat(2, 1fr);
}
body[data-variant="one-page"] .post {
  min-height: 200px;
}

/* =============================================================================
   VARIANT C — scroll-docking
   Hero graph, then a corner mini-graph pins on scroll and keeps driving the
   feed. The mini-graph reuses .auton-panel scaled down and fixed.
   ========================================================================== */
.dock-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  transform: scale(0.46) !important;
  transform-origin: bottom right;
  animation: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease, filter 360ms ease;
  filter: blur(6px);
  /* Opaque fill + shadow so it reads over blog text, not just video. */
  background: rgba(6, 8, 6, 0.94);
  backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
/* Reserve the bottom-right corner so the docked widget doesn't sit on a post. */
body[data-variant="scroll-docking"] .blog-section {
  padding-bottom: clamp(140px, 16vw, 240px);
}
body[data-variant="scroll-docking"].is-docked .dock-widget {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
}
/* tuck it away again as the footer arrives */
body[data-variant="scroll-docking"].is-docked.is-footer-near .dock-widget {
  opacity: 0;
  pointer-events: none;
}
.dock-widget .graph-hint {
  display: none;
}
.dock-widget-tag {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
/* a small caption that rides with the docked widget */
.dock-caption {
  position: fixed;
  right: 24px;
  bottom: 14px;
  z-index: 41;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
body[data-variant="scroll-docking"].is-docked:not(.is-footer-near) .dock-caption {
  opacity: 1;
}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 900px) {
  .blog-feed,
  body[data-variant="one-page"] .blog-feed {
    grid-template-columns: 1fr;
  }
  .post-featured {
    grid-column: span 1;
  }
  .dock-widget {
    display: none; /* corner widget is desktop-only; mobile keeps graph in hero */
  }
  .dock-caption {
    display: none;
  }
}
/* Hybrid hero collapses to ONE column on tablet/phone. The base collapse
   (.hero-grid → 1fr at <=1080px) is out-specified by the hybrid 1fr/1fr rule,
   so restate it here: copy on top, chart below at a comfortable height, and
   drop the 3D perspective/tilt (which only makes sense with a pointer). */
@media (max-width: 1080px) {
  body[data-variant="hybrid"] .hero {
    height: auto;
    min-height: 0;
  }
  body[data-variant="hybrid"] .hero-grid {
    grid-template-columns: 1fr;
    perspective: none;
    gap: clamp(28px, 6vw, 48px);
    padding-top: clamp(104px, 16vh, 132px);
    padding-bottom: clamp(56px, 9vh, 88px);
  }
  body[data-variant="hybrid"] .hero-copy {
    max-width: 620px;
  }
  /* Centered + capped so the panel never runs to (or past) the viewport edge;
     generous height so the source grid wrapping to 2 rows on phones doesn't clip. */
  body[data-variant="hybrid"] .hero-diagram {
    width: 100%;
    max-width: 600px;
    height: clamp(540px, 145vw, 620px);
    justify-self: center;
    margin-inline: auto;
    transform: none;
  }
  /* let the scroll cue sit below the (now taller) hero content, centered.
     base is display:inline-flex, so make it a block fit-content box for margin:auto */
  body[data-variant="hybrid"] .scroll-cue {
    position: static;
    transform: none;
    display: flex;
    width: fit-content;
    margin: 4px auto 8px;
  }
}
@media (max-width: 760px) {
  .proto-switch {
    font-size: 10px;
    top: 10px;
  }
  .proto-switch a {
    padding: 6px 9px;
  }
  .proto-archive summary {
    padding: 6px 9px;
  }
  body[data-variant="hybrid"] .hero,
  body[data-variant="one-page"] .hero {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-arrow {
    animation: none;
  }
  .dock-widget,
  body[data-variant="hybrid"].is-docked .nav {
    transition: none;
    animation: none !important;
  }
}

/* =============================================================================
   V2 — landing + sticky-aside (single blog post)
   New direction: wide landscape graph in hero, new nav, single post below.
   The graph is decorative here (no filtering — there's nothing to filter).
   ========================================================================== */

/* ----------------------------------------------------------- v2 hero grid -- */
/* .page-shell has overflow:hidden in the base stylesheet, which establishes a
   scroll context and breaks position:sticky for the aside-rail. overflow:clip
   keeps the clipping behavior without creating a scroll container. */
body[data-variant^="v2-"] .page-shell {
  overflow: clip;
}
body[data-variant^="v2-"] .hero {
  height: auto;
  min-height: 100svh;
}
/* Seamless hero → article transition. The base grade only darkens to 96% black,
   so a faint band of video shows just above the solid #020302 section below,
   reading as a hard cutoff. Fade the hero's bottom fully to that exact color. */
body[data-variant^="v2-"] .hero-grade {
  background:
    radial-gradient(circle at 74% 47%, rgba(255, 122, 47, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 40%, #020302 95%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.78));
}
.hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "copy   copy"
    "graph  graph"
    "peek   aside";
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(112px, 14vh, 140px) clamp(24px, 4vw, 60px) clamp(40px, 6vh, 64px);
  position: relative;
  z-index: 2;
}
.hero-v2-grid .hero-copy {
  grid-area: copy;
  max-width: 820px;
}
.hero-v2-grid .hero-copy h1 {
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.94;
}
.hero-v2-grid .hero-lede {
  font-size: clamp(16px, 1.18vw, 18px);
  max-width: 540px;
  margin-top: 20px;
}
.hero-v2-grid .hero-lede strong {
  font-weight: 520;
  color: #fff;
}
.hero-v2-grid .hero-actions {
  margin-top: 26px;
  gap: 12px;
}

.hero-v2-grid .auton-panel {
  grid-area: graph;
  justify-self: stretch;
}
.hero-v2-grid .hero-post-peek {
  grid-area: peek;
  align-self: end;
}
.hero-v2-grid .hero-aside-copy {
  grid-area: aside;
  align-self: end;
  justify-self: end;
  text-align: right;
  max-width: 460px;
  color: var(--color-text-subtle);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.45;
}
.hero-v2-grid .hero-aside-copy p {
  margin: 0;
}
.hero-post-peek .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.hero-post-peek .peek-lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
}
.hero-post-peek .peek-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}
.hero-post-peek .peek-cue:hover {
  color: #fff;
}

/* ------------------------------------------------ wide landscape graph -- */
.auton-panel--wide {
  width: 100%;
  max-width: none;
  height: clamp(280px, 36vw, 380px);
  border-radius: 18px;
  transform: none;
  transform-origin: center;
}
.is-ready .auton-panel--wide {
  animation: panel-wake-wide 720ms cubic-bezier(0.45, 0, 0.15, 1) 330ms both;
}
.auton-panel--wide .panel-grid {
  mask-image: radial-gradient(ellipse 50% 70% at 32% 56%, black, transparent 80%);
  background-size: 56px 56px;
}
.auton-panel--wide .orbit {
  left: 32%;
  top: 56%;
}
.auton-panel--wide .orbit-large {
  width: 460px;
  height: 460px;
}
.auton-panel--wide .orbit-mid {
  width: 270px;
  height: 270px;
}
.auton-panel--wide .orbit-small {
  width: 108px;
  height: 108px;
}
.auton-panel--wide .signal-line {
  left: 32%;
  top: 56%;
}
.auton-panel--wide .signal-line-a {
  width: clamp(320px, 38vw, 520px);
  transform: rotate(-22deg);
}
.auton-panel--wide .signal-line-b {
  display: none;
}
.auton-panel--wide .node-core {
  left: calc(32% - 6px);
  top: calc(56% - 6px);
}
.auton-panel--wide .node-customer {
  left: 78%;
  top: 18%;
}
.auton-panel--wide .node-founder,
.auton-panel--wide .node-revenue {
  display: none;
}
.auton-panel--wide .label-customer {
  left: calc(78% + 18px);
  top: 18%;
}
.auton-panel--wide .label-runway {
  display: none;
}
.auton-panel--wide .packet {
  left: 32%;
  top: 56%;
}
.auton-panel--wide .telemetry {
  left: 28px;
  bottom: 24px;
}
@keyframes panel-wake-wide {
  0% {
    filter: blur(4px);
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  62% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -------------------------------------------------- v2 nav + primary CTA -- */
/* The new IA: Decks · News · Fund a startup. */
body[data-variant^="v2-"] .nav-links a:not(.nav-cta) {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--color-text-subtle);
  transition: color 160ms ease;
}
body[data-variant^="v2-"] .nav-links a:not(.nav-cta):hover {
  color: #fff;
}
/* No docked/floating nav on v2 — the nav scrolls away with the hero. Lifting
   the hero to z-index:30 while docked made it paint over the article top, which
   snapped back when is-docked flipped on scroll-up (the "cutoff"). */

/* ------------------------------------------------------- article (post) -- */
.post-article {
  --measure: 680px;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.86);
}
.post-article > * {
  max-width: var(--measure);
}
.post-article .post-meta {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}
.post-article .post-meta strong {
  color: #fff;
  font-weight: 500;
}
.post-article h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 450;
  line-height: 0.96;
  letter-spacing: -0.012em;
  margin: 0 0 28px;
  color: #fff;
  max-width: 780px;
}
.post-article .post-lead {
  font-family: var(--font-display);
  /* deck sits clearly above the section h2s (was 32px, ~flush with h2 30px) */
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* deck: slightly off-white, a step below the pure-white title */
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 44px;
  max-width: 760px;
}
.post-article p {
  font-size: 18px;
  line-height: 1.66;
  margin: 0 0 22px;
  /* body: calmer gray so headings carry the hierarchy */
  color: rgba(255, 255, 255, 0.66);
}
.post-article h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 520;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: #fff;
  /* stronger section break + clear size/weight/color step above body */
  margin: 68px 0 16px;
}
.post-article a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: border-color 160ms ease, color 160ms ease;
}
.post-article a:hover {
  border-bottom-color: rgba(255, 255, 255, 1);
}
.post-article .pull {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 42px);
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 48px 0;
  max-width: 760px;
}
.post-article .post-close {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 48px 0 0;
}
.post-article .post-close::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  margin-bottom: 18px;
}

/* ------------------------------------------------------------ post section -- */
/* Single blog post in a centered reading column below the hero. Used by the
   landing and hybrid pages. */
.post-section {
  background: #020302;
  padding: clamp(72px, 9vw, 140px) clamp(24px, 6vw, 96px);
  display: grid;
  justify-items: center;
}
.post-section .post-article {
  width: 100%;
  /* container width = reading measure so the text block is truly centered
     (not a 600px text block sitting left inside a wider 720px container) */
  max-width: var(--measure);
}

/* ------------------------------------------ v2-aside sticky-aside section -- */
/* tempo.xyz pattern: graph stays on the right while the post scrolls past on
   the left. Implemented as ONE panel that's position:fixed from the start of
   the page — so there's no hero-panel-to-sticky-panel handoff (no gap, no
   crossfade). The hero and post sections both leave the right column empty;
   the global panel overlays that visual space. */
body[data-variant="v2-aside"] .sticky-stage {
  background: #020302;
  display: grid;
  grid-template-columns: minmax(0, 638px) minmax(360px, 482px);
  justify-content: space-between;
  gap: 50px;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 4.2vw, 60px) clamp(72px, 8vw, 120px);
  align-items: start;
}
body[data-variant="v2-aside"] .sticky-stage .post-article {
  max-width: none;
}

.global-panel {
  position: fixed;
  top: clamp(80px, 12vh, 132px);
  right: clamp(20px, 4.2vw, 60px);
  z-index: 4;
  width: 482px;
  display: grid;
  gap: 16px;
  transition: opacity 360ms ease, transform 360ms ease;
}
.global-panel .auton-panel {
  width: 482px;
  height: 475px;
}
.global-panel .aside-meta {
  margin: 0;
  padding-left: 4px;
  display: grid;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.global-panel .aside-meta strong {
  color: #fff;
  font-weight: 500;
}
/* Fade the panel out as the footer arrives so it doesn't sit over it. */
body[data-variant="v2-aside"].is-footer-near .global-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* Mobile: hide the fixed panel and let the article go full-width. */
@media (max-width: 1100px) {
  body[data-variant="v2-aside"] .global-panel {
    display: none;
  }
  body[data-variant="v2-aside"] .sticky-stage {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Curve panel — the non-saturating Autonomous GDP graphic.
   Lives in the same global-panel as the signal map (v2-aside machinery), but
   renders a chart that draws itself as the article scrolls (see curve.js).
   ========================================================================== */
.curve-panel {
  transform: none !important; /* flat chart — no pointer tilt */
}
.curve-head {
  position: absolute;
  top: 24px;
  left: 26px;
  right: 26px;
  z-index: 2;
  display: grid;
  gap: 2px;
}
.curve-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.curve-counter {
  font-family: var(--font-display);
  font-size: 32px;
  font-variation-settings: "wght" 520;
  font-weight: 520;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.curve-svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 78px;
  bottom: 0;
  width: 100%;
  height: calc(100% - 78px);
  padding: 0 18px 20px;
  overflow: visible;
}
.curve-ms text,
.curve-ms-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.82);
  letter-spacing: 0;
}
.curve-cap {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: rgba(255, 122, 47, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.curve-note-svg {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: rgba(131, 240, 197, 0.92);
  letter-spacing: 0.02em;
}
.milestone {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.milestone.is-on {
  opacity: 1;
}
.milestone circle {
  fill: #fff;
}
.curve-head-dot {
  fill: #fff;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.85));
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Stepped draw + head-dot ease — milestones advance when their paragraph is
   read, with a smooth transition between steps. */
#agdpPath {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0, 0.15, 1);
}
.curve-head-dot {
  transition: cx 0.7s cubic-bezier(0.45, 0, 0.15, 1),
    cy 0.7s cubic-bezier(0.45, 0, 0.15, 1), opacity 0.3s ease;
}

/* Scene system — the panel morphs map → ladder → curve as the article scrolls. */
.curve-panel .scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.curve-panel .scene.is-active {
  opacity: 1;
}
.scene-cap {
  position: absolute;
  top: 26px;
  left: 26px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Benchmark ladder scene */
.ladder-svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  bottom: 0;
  width: 100%;
  height: calc(100% - 54px);
  padding: 0 18px 20px;
  overflow: visible;
}
.ladder-axis {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.ladder-connector {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}
.ladder-rung {
  opacity: 0.22;
  transition: opacity 0.5s ease;
}
.ladder-rung.is-on {
  opacity: 1;
}
.ladder-rung circle {
  fill: #fff;
}
.ladder-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.85);
  letter-spacing: 0;
}
.ladder-top text {
  fill: var(--color-accent-2);
}
.ladder-arrow {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .milestone,
  .curve-head-dot,
  #agdpPath,
  .curve-panel .scene,
  .ladder-rung {
    transition: none;
  }
}
body[data-variant="v2-aside"] .aside-rail .aside-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: grid;
  gap: 6px;
}
body[data-variant="v2-aside"] .aside-rail .aside-meta strong {
  color: #fff;
  font-weight: 500;
}
body[data-variant="v2-aside"] .post-article {
  --measure: 640px;
  max-width: var(--measure);
}

/* =============================================================================
   V2 — landing variant B (centered graph, bottom-pinned text)
   Composition: graph centered in viewport, headline bottom-left, body paragraph
   bottom-right, scroll cue floating between. Post (single article) follows below.
   ========================================================================== */

body[data-variant="v2-landing-b"] .hero {
  height: 100svh;
  min-height: 720px;
}

.hero-v2b-graph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  /* generous bottom padding reserves space for chip + bottom text */
  padding: clamp(110px, 14vh, 170px) clamp(20px, 4.2vw, 60px) clamp(260px, 34vh, 340px);
  pointer-events: none;
}
.hero-v2b-graph .auton-panel {
  pointer-events: auto;
}

.hero-v2b-bottom {
  position: absolute;
  left: clamp(20px, 4.2vw, 60px);
  right: clamp(20px, 4.2vw, 60px);
  bottom: clamp(36px, 6vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
  z-index: 3;
}
.hero-v2b-bottom h1 {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.94;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 600px;
  color: #fff;
}
.hero-v2b-bottom p {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text-default);
  margin: 0;
  max-width: 460px;
  justify-self: end;
  text-align: right;
}

.hero-v2b-cue {
  position: absolute;
  bottom: clamp(180px, 22vh, 230px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* Centered, more-square graph form for v2-landing-b.
   Reuses .auton-panel scaffolding (orbits, signal lines, nodes, label) with
   re-tuned positions and a hub anchored at the panel's interior center-left. */
.auton-panel--center {
  width: clamp(420px, 50vw, 620px);
  max-width: none;
  height: clamp(280px, 30vw, 420px);
  border-radius: 18px;
  transform: none;
  transform-origin: center;
}
.is-ready .auton-panel--center {
  animation: panel-wake-wide 720ms cubic-bezier(0.45, 0, 0.15, 1) 330ms both;
}
.auton-panel--center .panel-grid {
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 70% at 40% 62%, black, transparent 80%);
}
.auton-panel--center .orbit {
  left: 40%;
  top: 62%;
}
.auton-panel--center .orbit-large {
  width: 460px;
  height: 460px;
}
.auton-panel--center .orbit-mid {
  width: 280px;
  height: 280px;
}
.auton-panel--center .orbit-small {
  width: 112px;
  height: 112px;
}
.auton-panel--center .signal-line {
  left: 40%;
  top: 62%;
}
.auton-panel--center .signal-line-a {
  width: clamp(240px, 28vw, 360px);
  transform: rotate(-36deg);
}
.auton-panel--center .signal-line-b {
  display: none;
}
.auton-panel--center .node-core {
  left: calc(40% - 6px);
  top: calc(62% - 6px);
}
.auton-panel--center .node-customer {
  left: 78%;
  top: 25%;
}
.auton-panel--center .node-founder,
.auton-panel--center .node-revenue {
  display: none;
}
.auton-panel--center .label-customer {
  left: calc(78% + 16px);
  top: 25%;
}
.auton-panel--center .label-runway,
.auton-panel--center .telemetry {
  display: none;
}
.auton-panel--center .packet {
  left: 40%;
  top: 62%;
}

/* v2-landing-b mobile + smaller screens */
@media (max-width: 900px) {
  .hero-v2b-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-v2b-bottom p {
    justify-self: start;
    text-align: left;
  }
  .hero-v2b-cue {
    bottom: clamp(220px, 28vh, 300px);
  }
}
@media (max-width: 640px) {
  .hero-v2b-bottom h1 {
    font-size: clamp(32px, 8vw, 44px);
  }
  .auton-panel--center {
    width: min(94vw, 480px);
    height: clamp(280px, 60vw, 380px);
  }
}

/* ----------------------------------------------- v2 responsive overrides -- */
@media (max-width: 1100px) {
  .hero-v2-grid {
    grid-template-areas:
      "copy   copy"
      "graph  graph"
      "peek   peek"
      "aside  aside";
  }
  .hero-v2-grid .hero-aside-copy {
    text-align: left;
    justify-self: start;
    max-width: 540px;
  }
}
@media (max-width: 900px) {
  body[data-variant="v2-aside"] .sticky-stage {
    grid-template-columns: 1fr;
  }
  body[data-variant="v2-aside"] .aside-rail {
    position: static;
    top: auto;
  }
  body[data-variant="v2-aside"] .aside-rail .auton-panel {
    max-width: 100%;
    height: clamp(280px, 40vw, 380px);
  }
  .auton-panel--wide .signal-line-a {
    width: clamp(220px, 44vw, 360px);
  }
}
@media (max-width: 640px) {
  .hero-v2-grid {
    padding-top: 96px;
  }
  .hero-v2-grid .hero-copy h1 {
    font-size: clamp(38px, 11vw, 48px);
  }
  .post-article p {
    font-size: 16.5px;
  }
}

/* =============================================================================
   Investor waitlist modal (hybrid) — dim + blur the page, glass dialog.
   ========================================================================== */
.wl-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 48px);
  background: rgba(3, 4, 3, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  opacity: 0;
  transition: opacity 240ms ease;
}
.wl-overlay.is-open {
  opacity: 1;
}
.wl-overlay[hidden] {
  display: none;
}

.wl-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--radius-panel, 16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 14, 12, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
  /* paint-in: rise + sharpen, matching the site's reveal language */
  transform: translateY(14px) scale(0.985);
  filter: blur(6px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 300ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wl-overlay.is-open .wl-dialog {
  transform: none;
  filter: blur(0);
  opacity: 1;
}

.wl-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.wl-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.wl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 16px;
}
.wl-eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--g, #fff);
  display: inline-block;
}
.wl-eyebrow i + i {
  margin-left: -4px;
}

.wl-dialog h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 520;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #fff;
}
.wl-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  margin: 0 0 24px;
}

.wl-field {
  display: block;
  margin-bottom: 14px;
}
.wl-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.wl-field input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.wl-field input::placeholder {
  color: rgba(255, 255, 255, 0.34);
}
.wl-field input:focus {
  border-color: var(--color-accent-1, #ff7a2f);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 122, 47, 0.18);
}
.wl-error {
  color: #ff9b6b;
  font-size: 13px;
  margin: -4px 0 12px;
}

.wl-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.wl-fine {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
  margin: 16px 0 0;
}

/* success state */
.wl-success {
  text-align: center;
  padding: 8px 0 4px;
}
.wl-success[hidden] {
  display: none;
}
.wl-check {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.14);
  border: 1px solid rgba(131, 240, 197, 0.4);
  color: var(--color-accent-2, #83f0c5);
  font-size: 22px;
}
.wl-success .wl-sub {
  margin-bottom: 24px;
}
.wl-success strong {
  color: #fff;
  font-weight: 500;
}
.wl-done {
  width: 100%;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .wl-overlay,
  .wl-dialog {
    transition: none;
  }
  .wl-dialog {
    filter: none;
    transform: none;
  }
}

/* =============================================================================
   VARIANT — company-dashboard (autonomous-company operating dashboard)
   3 columns over a quiet textured backdrop so the glass panels read.
   ========================================================================== */
body[data-variant="company-dashboard"] {
  /* Fixed app shell: the page itself never scrolls; columns scroll within. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-layer-0);
}
/* No scroll-reveal paint-in here: the translateY offset fights the fixed shell,
   and panels inside the scrolling rails should be visible immediately. */
body[data-variant="company-dashboard"] .reveal-on-scroll {
  filter: none;
  opacity: 1;
  transform: none;
  transition: none;
}

/* Backdrop: ink + faint ember/mint glow + subtle grid, so glass frosts over something. */
.cd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 16% -5%, rgba(255, 122, 47, 0.1), transparent 70%),
    radial-gradient(55% 45% at 102% 102%, rgba(131, 240, 197, 0.08), transparent 70%),
    var(--color-layer-0);
}
.cd-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 28%, black, transparent 85%);
}

/* Top bar */
.cd-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 clamp(16px, 3vw, 28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cd-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.01em;
  color: #fff;
}
.cd-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-menu {
  position: relative;
}

/* Small mono buttons (top bar + in-panel actions) */
.cd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--color-text-subtle);
  padding: 7px 12px;
  min-height: 0;
  border-radius: var(--radius-control);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.cd-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.cd-btn-primary {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: transparent;
}
.cd-btn-primary:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Menu popover */
.cd-menu-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 14, 12, 0.82);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.7);
}
.cd-menu-pop[hidden] {
  display: none;
}
.cd-menu-pop button {
  text-align: left;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
.cd-menu-pop button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Shell + 3-column grid */
.cd-shell {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(16px, 2.2vw, 28px);
}
.cd-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 360px;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.cd-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 18px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
/* keep each panel at its natural height (don't let flex shrink the iframe card) */
.cd-rail > * {
  flex: 0 0 auto;
}

/* Glass panels */
.cd-panel,
.cd-chat {
  position: relative;
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-layer-1-stroke);
  background: var(--color-layer-1);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  padding: clamp(16px, 1.4vw, 20px);
  color: var(--color-text-subtle);
}
.cd-panel-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 520;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
}
.cd-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

/* About block */
.cd-about-tagline {
  font-size: 14px;
  color: #fff;
  margin: 0 0 10px;
}
.cd-about-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.cd-about-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent-1);
  text-decoration: none;
}
.cd-about-url:hover {
  text-decoration: underline;
}

/* Runway (left rail, de-emphasized flat section) — days-left + health bar.
   The chart was removed in the zero-state: runway-as-time is the lead signal. */
.cd-runway-days {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: #fff;
}
.cd-runway-days .num {
  font-size: 38px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cd-runway-days .unit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.cd-runway-days.is-low .num {
  color: var(--color-accent-1);
}
.cd-runway-meter {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 0 0 10px;
}
.cd-runway-fill {
  display: block;
  height: 100%;
  width: 40%; /* ~12 of a nominal 30-day runway (illustrative) */
  border-radius: 999px;
  background: var(--color-accent-2); /* mint when healthy */
}
.cd-runway-fill.is-low {
  background: var(--color-accent-1); /* ember when low */
}
.cd-runway-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
/* Revenue demoted to a quiet single line under runway */
.cd-runway-revenue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cd-runway-revenue strong {
  color: var(--color-text-subtle);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cd-runway-cta {
  width: 100%;
  justify-content: center;
}

/* Business stats */
.cd-stat-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cd-stat-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
}
.cd-stat-list span {
  color: var(--color-text-muted);
}
.cd-stat-list strong {
  color: #fff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cd-stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

/* Email */
.cd-email-addr {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-subtle);
  margin: 0 0 14px;
}
.cd-msg-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cd-msg {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 150ms ease;
}
.cd-msg:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cd-msg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cd-msg-subject {
  font-size: 13px;
  color: #fff;
}
.cd-msg-sub {
  font-size: 11px;
  color: var(--color-text-muted);
}
.cd-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.cd-tag-sent {
  color: var(--color-accent-2);
  background: rgba(131, 240, 197, 0.12);
}
.cd-tag-draft {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.06);
}
.cd-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-subtle);
  text-decoration: none;
}
.cd-link:hover {
  color: #fff;
}

/* Documents */
.cd-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.cd-doc-list a {
  font-size: 13px;
  color: var(--color-text-subtle);
  text-decoration: none;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.cd-doc-list a::before {
  content: "▤";
  color: var(--color-text-muted);
  font-size: 12px;
}
.cd-doc-list a:hover {
  color: #fff;
}

/* Center column — fits the viewport height, does not scroll (chat thread does) */
.cd-center {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 18px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Live operating log (ambient proof, read-only) */
.cd-log {
  flex: 1 1 44%;
  min-height: 0;
  overflow: hidden;
}
.cd-log-title {
  color: #fff;
}
.cd-log-feed {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-accent-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.cd-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--color-accent-2);
  animation: cd-blink 1.1s steps(1) infinite;
}
@keyframes cd-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* Chat (the control surface) — fills the rest of the center, thread scrolls */
.cd-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 56%;
  min-height: 0;
  overflow: hidden;
}
.cd-thread {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* anchor the conversation to the bottom (chat convention): the latest message
     sits just above the composer; empty space collects at the top, not mid-panel */
  align-content: end;
  align-items: start;
}
.cd-msg-bubble {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.cd-msg-bubble p {
  margin: 0 0 6px;
}
.cd-msg-bubble p:last-child {
  margin: 0;
}
.cd-msg-assistant {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-subtle);
  justify-self: start;
}
.cd-msg-owner {
  background: rgba(255, 122, 47, 0.14);
  border: 1px solid rgba(255, 122, 47, 0.26);
  color: #fff;
  justify-self: end;
}
.cd-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* fade the right edge to hint there's more to scroll */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
}
.cd-chips::-webkit-scrollbar {
  display: none;
}
.cd-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-subtle);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  transition: background 150ms ease, color 150ms ease;
}
.cd-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.cd-composer {
  display: flex;
  gap: 10px;
}
.cd-composer-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cd-composer-input::placeholder {
  color: var(--color-text-muted);
}
.cd-composer-input:focus {
  border-color: var(--color-accent-1);
  box-shadow: 0 0 0 3px rgba(255, 122, 47, 0.16);
}
.cd-send {
  min-height: 44px;
}

/* Operating plan + task cards */
.cd-plan-eyebrow {
  margin-top: 2px;
}
.cd-plan-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}
.cd-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 10px;
}
.cd-task {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 14px;
  margin: 0 0 12px;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.cd-task-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 520;
  color: #fff;
  margin: 0 0 6px;
}
.cd-task-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-1);
  margin: 0 0 8px;
}
.cd-task-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-subtle);
  margin: 0 0 8px;
}
.cd-task-status {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0;
}
.cd-task-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.cd-task.is-focus-flash {
  animation: cd-flash 1.6s ease;
}
@keyframes cd-flash {
  0% {
    border-color: var(--color-accent-1);
    background: rgba(255, 122, 47, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 122, 47, 0.18);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }
}

/* Responsive: collapse to one column (center first, then company, then plan) */
@media (max-width: 1080px) {
  /* Narrow: drop the fixed app shell, go back to a normal scrolling page. */
  body[data-variant="company-dashboard"] {
    height: auto;
    overflow: visible;
    display: block;
  }
  .cd-shell {
    flex: none;
    display: block;
    overflow: visible;
  }
  .cd-grid {
    grid-template-columns: 1fr;
    flex: none;
    min-height: 0;
  }
  .cd-center {
    order: 1;
    overflow: visible;
  }
  .cd-rail {
    overflow: visible;
  }
  .cd-rail-left {
    order: 2;
  }
  .cd-rail-right {
    order: 3;
  }
  .cd-log,
  .cd-chat {
    flex: none;
  }
  .cd-thread {
    max-height: 60vh;
    flex: none;
  }
}
@media (max-width: 640px) {
  .cd-topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 14px;
    gap: 10px;
  }
  .cd-topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* =============================================================================
   company-dashboard — visual hierarchy pass
   Primary: the center console (proof + control). Secondary: money (revenue /
   runway) + the active task. Tertiary (email / ads / docs / queued): flattened.
   ========================================================================== */

/* Chat is the primary surface: a touch more fill + a top catch-light */
.cd-center .cd-chat {
  background: rgba(255, 255, 255, 0.085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  flex: 1 1 auto;
}
.cd-center {
  gap: clamp(16px, 1.7vw, 24px);
}
.cd-msg-bubble {
  font-size: 15px;
}

/* Live Operating Log demoted to an ambient status strip — proof the company is
   doing things, glanceable not readable. Compact, recessed, dim; chat owns the
   column. The pulse stays (it's the "alive" signal). */
.cd-log {
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  padding: 13px 16px 14px;
}
.cd-log .cd-panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  padding-bottom: 0;
  border-bottom: 0;
}
.cd-log-feed {
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(131, 240, 197, 0.42);
}
.cd-log-feed[data-live-log] {
  display: block;
  max-height: 128px;
  overflow: hidden;
  scroll-behavior: smooth;
}
.cd-log-line {
  display: block;
}
.cd-log-line.is-new {
  animation: cd-log-in 520ms ease both;
}
.cd-log-line.is-new::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 1px 0;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.76);
  box-shadow: 0 0 10px rgba(131, 240, 197, 0.26);
}
.cd-cursor {
  color: rgba(131, 240, 197, 0.42);
}
@keyframes cd-log-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Plan summary strip — a slim header above the chat. Carries the cycle intent +
   current priorities so the chat stays the primary surface (kept low-profile, no
   glass card, so it reads as a caption over the dominant chat panel below). */
.cd-plan-strip {
  flex: 0 0 auto;
  padding: 2px 2px 0;
}
.cd-plan-strip-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0 0 11px;
}
.cd-plan-strip-cycle {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cd-plan-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cd-plan-strip-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* The priority being worked right now gets a small ember tick (money in motion). */
.cd-plan-strip-list li.is-active {
  color: var(--color-text-subtle);
  border-color: rgba(255, 122, 47, 0.32);
}
.cd-plan-strip-list li.is-active::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--color-accent-1);
}

/* Completed today — collapsed by default (native <details>), expands to a quiet
   checked-off list. Clears after 24h (illustrative copy in this static proto). */
.cd-completed {
  margin-top: 4px;
}
.cd-completed-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cd-completed-summary::-webkit-details-marker {
  display: none;
}
.cd-completed-summary::after {
  content: "›";
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform 160ms ease;
}
.cd-completed[open] .cd-completed-summary::after {
  transform: rotate(90deg);
}
.cd-completed-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.cd-done-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cd-task--done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 150ms ease;
}
.cd-task--done:hover {
  background: rgba(255, 255, 255, 0.05);
}
.cd-done-check {
  flex: 0 0 auto;
  color: var(--color-accent-2);
  font-size: 12px;
}
.cd-done-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
.cd-done-time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
.cd-done-note {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 10px 0 0;
}

/* Ongoing (active) work shares the primary weight with the chat, and shows an
   indeterminate "working" bar at the bottom — signals it's being worked on now,
   not how far along. */
.cd-task:not(.cd-task--queued) {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.cd-task:not(.cd-task--queued)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.cd-task:not(.cd-task--queued)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-1), transparent);
  animation: cd-working 2.4s ease-in-out infinite;
}
@keyframes cd-working {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(360%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-task:not(.cd-task--queued)::after {
    animation: none;
    width: 30%;
  }
}

/* Live "● active" indicator on the log header (the proof is live) */
.cd-log-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cd-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-1);
  animation: cd-pulse 1.9s ease-out infinite;
}
@keyframes cd-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 122, 47, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 122, 47, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 122, 47, 0);
  }
}

/* Money hero: Revenue + Runway as large figures (Runway ember when low) */
.cd-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 2px 0 14px;
}
.cd-hero-stat {
  display: grid;
  gap: 5px;
}
.cd-hero-stat .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cd-hero-stat .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cd-hero-stat .value.is-low {
  color: var(--color-accent-1);
}
.cd-hero-stat .unit {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin-left: 5px;
}
.cd-substat {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.cd-substat strong {
  color: var(--color-text-subtle);
  font-weight: 500;
}

/* Tertiary sections — flat (no card), labeled, separated by a hairline */
.cd-about {
  padding: 4px 2px 0;
}
.cd-section {
  padding: 16px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cd-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

/* Work-type labels: muted, not ember (reserve ember for live + runway + chart) */
.cd-task-kind {
  color: var(--color-text-muted);
}

/* Queued task: a card too, just a touch quieter than active work-in-progress */
.cd-task--queued {
  background: rgba(255, 255, 255, 0.025);
}

/* =============================================================================
   company-dashboard — next evolution
   Runway is the left-side constraint, plan/log/tasks sit above chat, and
   completed work lives in a compact right rail with drawer details.
   ========================================================================== */
.cd-runway {
  color: var(--color-text-subtle);
}
.cd-runway-days {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}
.cd-runway-days .num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 520;
  line-height: 0.95;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cd-runway-days .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cd-runway-days.is-low .num {
  color: var(--color-accent-1);
}
.cd-runway-meter {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.cd-runway-fill {
  display: block;
  width: 24%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.52);
}
.cd-runway-fill.is-low {
  background: linear-gradient(90deg, rgba(255, 122, 47, 0.52), rgba(255, 122, 47, 0.92));
}
.cd-runway-detail,
.cd-runway-revenue {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.cd-runway-revenue {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cd-runway-add {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  background: rgba(255, 122, 47, 0.1);
  border-color: rgba(255, 122, 47, 0.22);
  color: #fff;
}
.cd-runway-add:hover {
  background: rgba(255, 122, 47, 0.16);
  border-color: rgba(255, 122, 47, 0.3);
}

.cd-operating-plan {
  flex: 0 0 auto;
  padding: 14px 16px 15px;
}
.cd-center {
  gap: 12px;
}
.cd-operating-plan .cd-panel-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.cd-plan-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.cd-plan-checklist li {
  position: relative;
  min-width: 0;
  padding: 9px 10px 9px 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-plan-checklist li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.05);
}
.cd-plan-checklist li.is-active::before {
  background: rgba(255, 122, 47, 0.32);
}

.cd-center .cd-chat {
  flex: 1 1 auto;
  min-height: 0;
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(255, 255, 255, 0.26);
}
.cd-center .cd-chat .cd-panel-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.cd-center .cd-chat .cd-msg-bubble {
  padding: 10px 13px;
  font-size: 14px;
}

.cd-rail-right .cd-panel {
  padding: 12px 14px 13px;
}
.cd-rail-right {
  gap: 10px;
}
.cd-rail-right .cd-panel-title {
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.cd-rail-right .cd-log {
  background: rgba(0, 0, 0, 0.16);
}
.cd-rail-right .cd-log-feed {
  font-size: 10.5px;
  line-height: 1.28;
}
.cd-work-card .cd-group-label {
  margin: 0 0 7px;
}
.cd-work-card .cd-task {
  padding: 9px 11px 10px;
  margin-bottom: 7px;
}
.cd-work-card .cd-task:last-child {
  margin-bottom: 0;
}
.cd-work-card .cd-task-title {
  font-size: 13.5px;
}
.cd-work-card .cd-task-status {
  font-size: 11px;
  line-height: 1.35;
}

.cd-completed-card {
  background: rgba(255, 255, 255, 0.05);
}
.cd-completed-card .cd-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cd-completed-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.12);
  color: var(--color-accent-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
}
.cd-done-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.cd-done-list {
  list-style: none;
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0;
}
.cd-task--done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
.cd-done-check {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.12);
  color: var(--color-accent-2);
  font-size: 11px;
}
.cd-done-title {
  min-width: 0;
  color: var(--color-text-subtle);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-done-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cd-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.cd-drawer-overlay[hidden] {
  display: none;
}
.cd-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cd-drawer {
  width: min(430px, calc(100vw - 28px));
  height: 100%;
  overflow-y: auto;
  padding: 28px;
  border-left: 1px solid var(--color-layer-1-stroke);
  background: rgba(8, 10, 8, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  transform: translateX(24px);
  transition: transform 220ms ease;
}
.cd-drawer-overlay.is-open .cd-drawer {
  transform: translateX(0);
}
.cd-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  cursor: pointer;
}
.cd-drawer h2 {
  margin: 0 42px 22px 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 520;
  letter-spacing: -0.01em;
  color: #fff;
}
.cd-drawer-task {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cd-drawer-task h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 520;
  color: #fff;
}
.cd-drawer-task p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.cd-drawer-meta {
  margin-bottom: 8px !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cd-drawer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 1080px) {
  .cd-operating-plan .cd-task {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-operating-plan .cd-task-kind {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-drawer-overlay,
  .cd-drawer {
    transition: none;
  }
}

/* =============================================================================
   command-center variant (company-dashboard-cc.html)
   Middle column = a daily briefing the company prepared for the owner. The chat
   docks as a composer at the bottom and expands to a full
   conversation on demand. Goal: glance-and-leave 90%, jump-in-and-steer 10%.
   ========================================================================== */
.cd-center.cc {
  position: relative;
  display: block;
  gap: 0;
  padding: 18px;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(23, 23, 28, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 58px -40px rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
}
.cc-briefing {
  height: calc(100% - 236px);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 2px 2px 14px;
  position: relative;
  transition: height 560ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms ease,
    padding 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Open: the plan tucks up into a peek that still shows the greeting + status,
   fading out toward the bottom. Clicking it (or the seam chevron) re-expands. */
.cd-center.cc.is-chat-open .cc-briefing {
  height: 112px;
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

/* Seam chevron between the collapsed plan and the chat (open state only) */
.cc-peek-toggle {
  display: none;
}
.cd-center.cc.is-chat-open .cc-peek-toggle {
  display: flex;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 96px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.cc-peek-toggle:hover {
  color: #fff;
}
.cc-peek-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cc-briefing {
    transition: none;
  }
}
.cc-greeting {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 520;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 12px;
}
.cc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.cc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-2); /* mint = on track */
}
.cc-status.is-attention .cc-status-dot {
  background: var(--color-accent-1);
}
.cc-summary {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-subtle);
  margin: 0 0 22px;
}
.cc-group {
  margin: 0 0 20px;
}
.cc-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 11px;
}
.cc-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent-1);
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 122, 47, 0.14);
}
.cc-refresh {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}
.cc-refresh:hover {
  color: #fff;
}

/* Needs you — the one urgent thing; ember-tinted so it pulls the eye. Ideally
   empty most mornings (decisions get converted into standing rules). */
.cc-needs .cc-group-label {
  color: var(--color-accent-1);
}
.cc-recap {
  padding: 12px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cc-recap-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-recap-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-subtle);
  font-size: 13px;
  line-height: 1.3;
}
.cc-recap-list span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.1);
  color: var(--color-accent-2);
  font-size: 11px;
}
.cc-needs-stack {
  display: grid;
  gap: 10px;
}
.cc-decision {
  border: 1px solid rgba(255, 122, 47, 0.28);
  background: rgba(255, 122, 47, 0.06);
  border-radius: 12px;
  padding: 14px;
}
.cc-decision-q {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
}
.cc-decision-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.cc-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Briefing rows (in progress / done / suggested next) — vertical, scannable */
.cc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.cc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 150ms ease;
}
.cc-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.cc-glyph {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.cc-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--color-text-subtle);
}
.cc-item-meta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
/* working = ember ring that spins; done = mint check; next = hollow ring */
.cc-item.is-working .cc-glyph {
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(255, 122, 47, 0.3);
  border-top-color: var(--color-accent-1);
  border-radius: 999px;
  animation: cc-spin 1.1s linear infinite;
}
@keyframes cc-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-item.is-working .cc-glyph {
    animation: none;
  }
}
.cc-item.is-done .cc-glyph {
  color: var(--color-accent-2);
}
.cc-item.is-done .cc-item-title {
  color: var(--color-text-muted);
}
.cc-item.is-next .cc-glyph {
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}
.cc-item.is-next .cc-item-title {
  color: #fff;
}
.cc-plan-block {
  margin-bottom: 0;
}
.cc-plan-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc-plan-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}
.cc-plan-mark {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
}
.cc-plan-item.is-active .cc-plan-mark {
  border-color: rgba(255, 122, 47, 0.4);
  border-top-color: var(--color-accent-1);
  animation: cc-spin 1.1s linear infinite;
}
.cc-plan-item.is-waiting .cc-plan-mark {
  border-color: rgba(255, 122, 47, 0.46);
  background: rgba(255, 122, 47, 0.16);
}
.cc-plan-copy {
  min-width: 0;
  color: var(--color-text-subtle);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-plan-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cc-plan-item.is-waiting .cc-plan-meta {
  color: var(--color-accent-1);
}
@media (prefers-reduced-motion: reduce) {
  .cc-plan-item.is-active .cc-plan-mark {
    animation: none;
  }
}

/* Operator chat: at rest it's its own card (label + composer) with real presence;
   tapping it expands to the full conversation taking over the column.
   (min-height overrides the .cd-center .cd-chat 320px floor used elsewhere.) */
.cd-center.cc .cc-chat {
  height: 236px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: rgba(43, 43, 49, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 42px -30px rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  backdrop-filter: blur(8px) saturate(105%);
  padding: 18px;
  cursor: text;
  overflow: hidden;
  transition: height 560ms cubic-bezier(0.4, 0, 0.2, 1), background 260ms ease,
    border-color 260ms ease, box-shadow 260ms ease,
    padding 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cc-chat .cc-chat-head,
.cc-chat .cd-thread,
.cc-chat .cd-chips {
  display: none;
  flex: 0 0 auto;
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
    max-height 420ms cubic-bezier(0.4, 0, 0.2, 1), margin 300ms ease;
}
.cd-center.cc.is-chat-open .cc-chat {
  height: calc(100% - 112px);
  justify-content: flex-start;
  gap: 0;
  background: rgba(43, 43, 49, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 52px -30px rgba(0, 0, 0, 0.88);
  padding: clamp(20px, 1.6vw, 24px);
  cursor: auto;
}

/* Resting chat card: calm Coco prompts above an anchored composer */
.cc-dock-intro {
  display: grid;
  gap: 12px;
  min-height: 0;
  max-height: 96px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
    max-height 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cd-center.cc.is-chat-open .cc-dock-intro {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}
.cc-dock-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cc-chat-title h2 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 520;
  letter-spacing: 0;
  color: #fff;
}
.cc-chat-title p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
}
.cc-dock-prompts button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-subtle);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 7px 11px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.cc-dock-prompts button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.cc-plus {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.cc-plus:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
.cd-center.cc.is-chat-open .cc-plus {
  display: none;
}
/* Send as a square arrow button */
.cc-chat .cd-send {
  flex: 0 0 auto;
  width: 50px;
  min-height: 50px;
  padding: 0;
  justify-content: center;
  font-size: 16px;
  border-radius: 10px;
}
.cc-chat .cd-composer {
  gap: 10px;
  min-height: 72px;
  align-items: stretch;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(17, 17, 20, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cc-chat .cd-composer-input {
  height: 50px;
  border-color: transparent;
  background: rgba(17, 17, 20, 0.38);
  color: #fff;
  font-size: 15px;
}
.cc-chat .cd-composer-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}
.cd-center.cc.is-chat-open .cc-chat .cc-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  max-height: 48px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.cd-center.cc.is-chat-open .cc-chat .cd-thread {
  display: grid;
  flex: 1 1 auto;
  max-height: none;
  opacity: 1;
  overflow-y: auto;
  pointer-events: auto;
  transform: translateY(0);
}
.cd-center.cc.is-chat-open .cc-chat .cd-chips {
  display: flex;
  max-height: 44px;
  opacity: 1;
  overflow-x: auto;
  overflow-y: hidden;
  pointer-events: auto;
  transform: translateY(0);
  margin-bottom: 14px;
}
.cd-center.cc.is-chat-open .cc-chat .cd-composer {
  min-height: 50px;
}
.cd-center.cc.is-chat-open .cc-chat .cd-composer-input {
  height: 50px;
}
.cc-chat-head .cd-panel-title {
  margin: 0;
  padding: 0;
  border: 0;
}
.cc-back {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 2px 6px 2px 0;
}
.cc-back:hover {
  color: #fff;
}
/* expand caret on the docked composer; hidden once chat is open */
.cc-expand {
  flex: 0 0 auto;
  width: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: 13px;
}
.cc-expand:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
.cd-center.cc.is-chat-open .cc-expand {
  display: none;
}
.cc-progress-block {
  margin-top: 0;
}
.cc-progress-inline {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cc-progress-inline .cd-group-label {
  margin-bottom: 8px;
}
.cc-progress-inline .cc-work-card {
  background: rgba(255, 255, 255, 0.04);
}
.cc-live-outcome {
  margin-top: 2px;
}
.cc-live-outcome .cd-group-label,
.cc-log-block .cd-group-label {
  margin-bottom: 8px;
}
.cc-log-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cc-work-stack {
  display: grid;
  gap: 9px;
}
.cc-work-card {
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 11px 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.cc-work-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.16);
}
.cc-work-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cc-work-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255, 122, 47, 0.32);
  border-top-color: var(--color-accent-1);
  border-radius: 999px;
  animation: cc-spin 1.1s linear infinite;
}
.cc-work-title {
  min-width: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
}
.cc-work-plan {
  padding-left: 22px;
  padding-right: 38px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-work-status {
  padding-left: 22px;
  padding-right: 38px;
  color: var(--color-text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.cc-work-meta {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .cc-work-dot {
    animation: none;
  }
}
/* Done today, relocated to the right rail (proof column) */
.cc-done-block,
.cc-queued-block {
  margin-top: 18px;
}
.cc-done-block {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}
.cc-done-block summary {
  list-style: none;
  cursor: pointer;
  margin-bottom: 0;
}
.cc-done-block summary::-webkit-details-marker {
  display: none;
}
.cc-done-block summary::after {
  content: "⌄";
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 12px;
  transition: transform 150ms ease, color 150ms ease;
}
.cc-done-block[open] summary {
  margin-bottom: 10px;
}
.cc-done-block[open] summary::after {
  color: var(--color-text-subtle);
  transform: rotate(180deg);
}
.cc-count-done {
  color: var(--color-accent-2);
  background: rgba(131, 240, 197, 0.12);
}
.cc-count-queued {
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.08);
}
.cc-queued-block .cc-item {
  cursor: pointer;
}
.cc-queued-block .cc-item-title {
  color: var(--color-text-subtle);
}

/* Dashboard v3 daily landing: fit recap + two decisions + plan above the docked
   chat without turning the center into a scroll chore. */
body.cd-v3 .cc-briefing {
  height: calc(100% - 210px);
  padding-bottom: 10px;
}
body.cd-v3 .cd-center.cc .cc-chat {
  height: 210px;
}
body.cd-v3 .cd-center.cc.is-chat-open .cc-chat {
  height: calc(100% - 112px);
}
body.cd-v3 .cc-recap {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(131, 240, 197, 0.16);
  border-radius: 14px;
  background: rgba(43, 43, 49, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px -34px rgba(0, 0, 0, 0.78);
}
body.cd-v3 .cc-recap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
body.cd-v3 .cc-recap-head .cc-group-label {
  margin-bottom: 3px;
  color: var(--color-text-subtle);
}
body.cd-v3 .cc-recap-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
body.cd-v3 .cc-recap-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
body.cd-v3 .cc-recap-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
body.cd-v3 .cc-recap-panels {
  min-height: 53px;
}
body.cd-v3 .cc-recap-panel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
body.cd-v3 .cc-recap-panel[hidden] {
  display: none;
}
body.cd-v3 .cc-recap-check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.1);
  color: var(--color-accent-2);
  font-size: 11px;
}
body.cd-v3 .cc-recap-title {
  margin: 0 0 3px;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.25;
}
body.cd-v3 .cc-recap-copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}
body.cd-v3 .cc-recap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
body.cd-v3 .cc-recap-tabs button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 5px 9px;
}
body.cd-v3 .cc-recap-tabs button:hover,
body.cd-v3 .cc-recap-tabs button.is-active {
  border-color: rgba(131, 240, 197, 0.3);
  background: rgba(131, 240, 197, 0.08);
  color: var(--color-text-subtle);
}
body.cd-v3 .cc-needs-stack {
  gap: 8px;
}
body.cd-v3 .cc-decision {
  padding: 10px 11px;
}
body.cd-v3 .cc-decision-sub {
  margin-bottom: 8px;
}
body.cd-v3 .cc-group {
  margin-bottom: 14px;
}
body.cd-v3 .cc-plan-list {
  gap: 5px;
}
body.cd-v3 .cc-plan-item {
  min-height: 29px;
  padding-top: 6px;
  padding-bottom: 6px;
}
body.cd-v3 .cd-rail-left {
  gap: 0;
}
body.cd-v3 .cd-rail-left .cd-about {
  padding-bottom: 16px;
}
body.cd-v3 .cd-rail-left .cd-about-tagline {
  margin-bottom: 8px;
  color: var(--color-text-subtle);
  font-size: 13px;
  line-height: 1.35;
}
body.cd-v3 .cd-rail-left .cd-about-url {
  color: rgba(255, 122, 47, 0.88);
}
body.cd-v3 .cd-rail-left .cd-runway {
  margin-top: 16px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.cd-v3 .cd-workspace {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
}
body.cd-v3 .cd-workspace .cd-section-title {
  margin-bottom: 12px;
  color: var(--color-text-muted);
}
body.cd-v3 .cd-workspace-group + .cd-workspace-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.cd-v3 .cd-workspace-label {
  margin: 0 0 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
body.cd-v3 .cd-workspace .cd-email-addr {
  margin-bottom: 8px;
  color: var(--color-text-subtle);
  font-size: 12.5px;
}
body.cd-v3 .cd-workspace .cd-msg-list {
  gap: 6px;
  margin-bottom: 9px;
}
body.cd-v3 .cd-workspace .cd-msg {
  padding: 8px 9px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}
body.cd-v3 .cd-workspace .cd-msg-subject {
  font-size: 12.5px;
}
body.cd-v3 .cd-workspace .cd-msg-sub {
  font-size: 10.5px;
}
body.cd-v3 .cd-workspace .cd-doc-list {
  gap: 7px;
}
body.cd-v3 .cd-workspace .cd-doc-list a {
  color: var(--color-text-subtle);
  font-size: 12.5px;
}
body.cd-v3 .cd-workspace .cd-link {
  font-size: 12px;
  color: var(--color-text-muted);
}
body.cd-v3 .cd-workspace-action {
  width: 100%;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-subtle);
  font-size: 12px;
}
body.cd-v3 .cd-workspace-action:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* Dashboard v2 can borrow Dashboard v3's quiet company-vitals rail without
   inheriting the v3 briefing layout. */
body.cd-v2 .cd-rail-left {
  gap: 0;
}
body.cd-v2 .cd-rail-left .cd-about {
  padding-bottom: 16px;
}
body.cd-v2 .cd-rail-left .cd-about-tagline {
  margin-bottom: 6px;
  color: var(--color-text-subtle);
  font-size: 13px;
  line-height: 1.35;
}
body.cd-v2 .cd-rail-left .cd-about-desc {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
}
body.cd-v2 .cd-rail-left .cd-about-url {
  color: rgba(255, 122, 47, 0.88);
}
body.cd-v2 .cd-about-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.cd-v2 .cd-about-link-row .cd-about-url {
  flex: 1 1 auto;
  min-width: 0;
}
body.cd-v2 .cd-about-share {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 9px;
}
body.cd-v2 .cd-about-share:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
}
body.cd-v2 .cd-rail-left .cd-runway {
  margin-top: 16px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.cd-v2 .cd-workspace {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
}
body.cd-v2 .cd-workspace .cd-section-title {
  margin-bottom: 12px;
  color: var(--color-text-muted);
}
body.cd-v2 .cd-workspace-group + .cd-workspace-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.cd-v2 .cd-workspace-label {
  margin: 0 0 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
body.cd-v2 .cd-workspace .cd-email-addr {
  margin-bottom: 8px;
  color: var(--color-text-subtle);
  font-size: 12.5px;
}
body.cd-v2 .cd-workspace .cd-msg-list {
  gap: 6px;
  margin-bottom: 9px;
}
body.cd-v2 .cd-workspace .cd-msg {
  padding: 8px 9px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}
body.cd-v2 .cd-workspace .cd-msg-subject {
  font-size: 12.5px;
}
body.cd-v2 .cd-workspace .cd-msg-sub {
  font-size: 10.5px;
}
body.cd-v2 .cd-workspace .cd-doc-list {
  gap: 7px;
}
body.cd-v2 .cd-workspace .cd-doc-list a {
  color: var(--color-text-subtle);
  font-size: 12.5px;
}
body.cd-v2 .cd-workspace .cd-link {
  font-size: 12px;
  color: var(--color-text-muted);
}
body.cd-v2 .cd-workspace-action {
  width: 100%;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-subtle);
  font-size: 12px;
}
body.cd-v2 .cd-workspace-action:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
body.cd-v2 .cc-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
body.cd-v2 .cc-section-row .cc-group-label {
  margin-bottom: 0;
}
body.cd-v2 .cc-recap {
  position: relative;
  padding: 12px 12px 10px;
  border: 1px solid rgba(131, 240, 197, 0.16);
  border-radius: 14px;
  background: rgba(43, 43, 49, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px -34px rgba(0, 0, 0, 0.78);
}
body.cd-v2 .cc-recap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
body.cd-v2 .cc-status.is-attention {
  color: rgba(255, 174, 128, 0.82);
}
body.cd-v2 .cc-brief-card,
body.cd-v2 .cc-decision {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(43, 43, 49, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px -34px rgba(0, 0, 0, 0.76);
  padding: 12px;
}
body.cd-v2 .cc-recap-head .cc-group-label {
  margin-bottom: 3px;
  color: var(--color-text-subtle);
}
body.cd-v2 .cc-recap-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
body.cd-v2 .cc-recap-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
body.cd-v2 .cc-recap-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
body.cd-v2 .cc-recap-panels {
  min-height: 53px;
}
body.cd-v2 .cc-recap-carousel {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
body.cd-v2 .cc-recap-frame {
  min-width: 0;
}
body.cd-v2 .cc-recap-panel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
body.cd-v2 .cc-recap-panel[hidden] {
  display: none;
}
body.cd-v2 .cc-recap-check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.1);
  color: var(--color-accent-2);
  font-size: 11px;
}
body.cd-v2 .cc-recap-title {
  margin: 0 0 3px;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.25;
}
body.cd-v2 .cc-recap-copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}
body.cd-v2 .cc-recap-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
body.cd-v2 .cc-recap-arrow:hover {
  border-color: rgba(131, 240, 197, 0.24);
  background: rgba(131, 240, 197, 0.07);
  color: #fff;
}
body.cd-v2 .cc-recap-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
body.cd-v2 .cc-recap-tabs button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  min-width: 24px;
  min-height: 24px;
  padding: 3px 8px;
}
body.cd-v2 .cc-recap-tabs button:hover,
body.cd-v2 .cc-recap-tabs button.is-active {
  border-color: rgba(131, 240, 197, 0.3);
  background: rgba(131, 240, 197, 0.08);
  color: var(--color-text-subtle);
}
body.cd-v2 .cc-recap-list-stacked {
  gap: 9px;
}
body.cd-v2 .cc-recap-list-stacked li {
  align-items: flex-start;
  padding: 8px 0;
}
body.cd-v2 .cc-recap-list-stacked li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.cd-v2 .cc-decisions .cc-group-label {
  color: var(--color-accent-1);
}
body.cd-v2 .cc-decision-stack {
  display: grid;
  gap: 10px;
}
body.cd-v2 .cc-decision-stack > .cc-decision:not(.is-current) {
  display: none;
}
body.cd-v2 .cc-decision {
  display: grid;
  gap: 10px;
  border-color: rgba(255, 122, 47, 0.24);
  background: rgba(255, 122, 47, 0.06);
}
body.cd-v2 .cc-decision.is-resolved {
  border-color: rgba(131, 240, 197, 0.2);
  background: rgba(131, 240, 197, 0.05);
}
body.cd-v2 .cc-decision.is-collapsed {
  display: none;
}
body.cd-v2 .cc-decision-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 122, 47, 0.86);
}
body.cd-v2 .cc-decision-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body.cd-v2 .cc-decision-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
body.cd-v2 .cc-option {
  width: auto;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-subtle);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}
body.cd-v2 .cc-option:hover {
  border-color: rgba(255, 122, 47, 0.32);
  background: rgba(255, 122, 47, 0.08);
  color: #fff;
}
body.cd-v2 .cc-option:disabled,
body.cd-v2 .cc-adjust:disabled,
body.cd-v2 .cc-later:disabled {
  cursor: default;
  opacity: 0.58;
}
body.cd-v2 .cc-adjust,
body.cd-v2 .cc-later {
  justify-self: start;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
}
body.cd-v2 .cc-adjust:hover,
body.cd-v2 .cc-later:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
}
body.cd-v2 .cc-decision-result {
  margin: 0;
  color: var(--color-accent-2);
  font-family: var(--font-mono);
  font-size: 11px;
}
body.cd-v2 .cc-empty-state {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
body.cd-v2 .cc-chat-decision-bubble {
  max-width: min(100%, 460px);
}
body.cd-v2 .cc-chat-decision-bubble .cc-decision {
  padding: 12px;
}
body.cd-v2 .cd-rail-right > .cc-progress-block {
  padding: 0 0 18px;
}
body.cd-v2 .cd-rail-right > .cc-progress-block .cd-group-label {
  margin-bottom: 10px;
}
body.cd-v2 .cc-planned-list {
  gap: 6px;
}
body.cd-v2 .cc-planned-list .cc-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  cursor: default;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
body.cd-v2 .cc-schedule-chip,
body.cd-v2 .cc-run-now {
  min-height: 28px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}
body.cd-v2 .cc-schedule-chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-muted);
  padding: 5px 9px;
}
body.cd-v2 .cc-run-now {
  border: 1px solid rgba(255, 122, 47, 0.26);
  background: rgba(255, 122, 47, 0.1);
  color: #fff;
  padding: 5px 10px;
}
body.cd-v2 .cc-run-now:hover {
  background: rgba(255, 122, 47, 0.16);
}
body.cd-v2 .cc-item.is-focus-flash,
body.cd-v2 .cc-work-card.is-focus-flash {
  animation: cd-flash 1.6s ease;
}
body.cd-v2 .cc-briefing {
  height: calc(100% - 220px);
}
body.cd-v2 .cd-center.cc .cc-chat {
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px;
}
body.cd-v2 .cd-center.cc.is-chat-open .cc-chat {
  height: calc(100% - 112px);
  padding: clamp(20px, 1.6vw, 24px);
}
body.cd-v2 .cc-dock-intro {
  gap: 10px;
  max-height: none;
  overflow: visible;
}
body.cd-v2 .cc-dock-prompts {
  gap: 8px;
  padding-bottom: 0;
}
body.cd-v2 .cc-dock-prompts button {
  padding: 5px 9px;
}
body.cd-v2 .cc-chat .cd-composer {
  min-height: 56px;
  padding: 8px;
}
body.cd-v2 .cc-chat .cd-composer-input {
  height: 40px;
}
body.cd-v2 .cc-chat .cd-send {
  width: 42px;
  min-height: 40px;
}
body.cd-v2 .cd-center.cc.is-chat-open .cc-chat .cd-composer {
  min-height: 50px;
}
body.cd-v2 .cd-center.cc.is-chat-open .cc-chat .cd-composer-input {
  height: 50px;
}
body.cd-v2 .cd-center.cc.is-chat-open .cc-chat .cd-send {
  width: 50px;
  min-height: 50px;
}

@media (max-width: 1080px) {
  .cd-center.cc .cc-briefing,
  .cd-center.cc.is-chat-open .cc-briefing {
    height: auto;
  }
  .cd-center.cc .cc-chat {
    height: auto;
    min-height: 236px;
  }
  .cd-center.cc.is-chat-open .cc-chat {
    height: auto;
    min-height: 520px;
  }
}

/* =============================================================================
   hybrid hero — "Economic Intelligence" copy update
   ========================================================================== */
body[data-variant="hybrid"] .nav-brand-group {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
body[data-variant="hybrid"] .brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  white-space: nowrap;
}
body[data-variant="hybrid"] .hero-sub {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-subtle);
}
@media (max-width: 760px) {
  body[data-variant="hybrid"] .brand-tag {
    display: none;
  }
}

/* =============================================================================
   dashboard v2 — briefing refinement pass
   The outer center card stays (it is the instrument); the sections INSIDE it
   stop being cards. Recap is one narrative line, Decisions separate with
   hairlines, chat pins to the bottom of the card with real prominence.
   Ember strips back to signal on the center card; In-progress keeps its ember.
   All rules scoped to body.cd-v2 so v1/v3 are untouched.
   ========================================================================== */

/* ---- layout: briefing flexes, chat pins to the card bottom (kills the gap) */
body.cd-v2 .cd-center.cc {
  display: flex;
  flex-direction: column;
}
body.cd-v2 .cc-briefing {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}
body.cd-v2 .cd-center.cc .cc-chat {
  margin-top: auto;
  flex: 0 0 auto;
  height: auto;
}
body.cd-v2 .cd-center.cc.is-chat-open .cc-briefing {
  flex: 0 0 auto;
  height: 112px;
}
body.cd-v2 .cd-center.cc.is-chat-open .cc-chat {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
/* the chat is the steering wheel: give the docked card real presence */
body.cd-v2 .cd-center.cc .cc-chat {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- recap as the briefing's lede: no label, structure comes from scale.
   The greeting is the headline, the status line the byline, and this sentence
   the standfirst: larger and brighter than the body below it. ---- */
body.cd-v2 .cc-recap-lede {
  padding: 13px 16px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(43, 43, 49, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 18px;
}
body.cd-v2 .cc-recap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
body.cd-v2 .cc-recap-top .cc-group-label {
  margin: 0;
  color: var(--color-text-muted);
}
body.cd-v2 .cc-recap-note {
  margin: 0 0 11px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
/* completed artifacts: compact proof strip, one row that wraps if needed */
body.cd-v2 .cc-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.cd-v2 .cc-artifact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
body.cd-v2 .cc-artifact:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.085);
  color: #fff;
}
body.cd-v2 .cc-artifact-check {
  color: var(--color-accent-2);
  font-size: 11px;
}
/* spacing rhythm: more air between sections than within them */
body.cd-v2 .cc-status {
  margin-bottom: 22px;
}
body.cd-v2 .cc-decisions .cc-group-label {
  margin-bottom: 14px;
}

/* ---- font pass: mono is for readouts and wayfinding, sans for sentences ---- */
body.cd-v2 .cc-status {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
}
body.cd-v2 .cc-decision-q {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 520;
  letter-spacing: -0.01em;
}
body.cd-v2 .cc-option {
  font-family: var(--font-body);
  font-size: 12.5px;
}
body.cd-v2 .cc-adjust,
body.cd-v2 .cc-later {
  font-family: var(--font-body);
  font-size: 12px;
}
body.cd-v2 .cc-work-plan {
  font-family: var(--font-body);
  font-size: 11.5px;
}
body.cd-v2 .cc-decision-result {
  font-family: var(--font-body);
  font-size: 12px;
}
body.cd-v2 .cd-chip,
body.cd-v2 .cc-dock-prompts button {
  font-family: var(--font-body);
  font-size: 12px;
}

/* ---- decisions: a true card again. The section label stays OUTSIDE the
   container; the card carries the briefing's only ember border (it is the one
   surface asking for the owner's call). ---- */
body.cd-v2 .cc-decision {
  border: 1px solid rgba(255, 122, 47, 0.22);
  border-radius: 12px;
  background: rgba(43, 43, 49, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 14px 16px;
}
body.cd-v2 .cc-decision.is-resolved {
  border-color: rgba(131, 240, 197, 0.18);
  background: rgba(43, 49, 45, 0.5);
}
body.cd-v2 .cc-empty-state {
  border: 0;
  background: transparent;
  padding: 4px 0;
}
body.cd-v2 .cc-chat-decision-bubble .cc-decision {
  padding: 12px;
}

/* ---- ember stripped from center-card chrome (status dot keeps its signal) */
body.cd-v2 .cc-briefing .cc-count {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}
body.cd-v2 .cc-decisions .cc-group-label {
  color: var(--color-text-muted);
}
body.cd-v2 .cc-decision-kicker {
  color: var(--color-text-muted);
}
body.cd-v2 .cc-option:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

/* ---- planned work: Run now toned down (quiet ember, not a flare) ---- */
body.cd-v2 .cc-run-now {
  border-color: rgba(255, 122, 47, 0.16);
  background: rgba(255, 122, 47, 0.05);
  color: var(--color-text-subtle);
}
body.cd-v2 .cc-run-now:hover {
  background: rgba(255, 122, 47, 0.12);
  color: #fff;
}

/* =============================================================================
   dashboard v2 - subtle Cofounder-inspired polish
   Center-column only: proof strip, attached decision stepper, docked chat tray.
   Scoped to v2 so the sibling prototypes keep their existing treatment.
   ========================================================================== */

body.cd-v2 .cc-recap-lede {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-color: rgba(131, 240, 197, 0.11);
  background: rgba(43, 43, 49, 0.5);
}

body.cd-v2 .cc-recap-top {
  padding-right: 32px;
  margin-bottom: 2px;
}

body.cd-v2 .cc-recap-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  font-size: 14px;
}

body.cd-v2 .cc-recap-note {
  margin-bottom: 7px;
  font-size: 12px;
}

body.cd-v2 .cc-artifacts {
  gap: 7px 14px;
}

body.cd-v2 .cc-artifact {
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-subtle);
  cursor: default;
  font-size: 12.5px;
  transition: none;
}

body.cd-v2 .cc-artifact:hover {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-subtle);
}

body.cd-v2 .cc-artifact-check {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgba(131, 240, 197, 0.1);
  color: var(--color-accent-2);
  font-size: 10px;
}

body.cd-v2 .cc-decision-label-row {
  margin-bottom: 5px;
}

body.cd-v2 .cc-decisions .cc-section-row .cc-group-label,
body.cd-v2 .cc-decisions .cc-group-label {
  margin-bottom: 0;
}

body.cd-v2 .cc-decision-stack {
  gap: 0;
}

body.cd-v2 .cc-decision {
  gap: 5px;
  padding: 8px 12px;
}

body.cd-v2 .cc-decision-sub {
  margin-bottom: 0;
}

body.cd-v2 .cc-decision-options {
  gap: 6px;
}

body.cd-v2 .cc-decision-footer {
  padding-top: 1px;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat {
  gap: 8px;
  padding: 12px;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(43, 43, 49, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 38px -32px rgba(0, 0, 0, 0.84);
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 64px;
  overflow: hidden;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro .cc-chat-title {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro .cc-chat-title h2 {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 560;
  line-height: 1;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro .cc-chat-title p {
  display: none;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-prompts {
  flex: 1 1 260px;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-prompts button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11.5px;
  white-space: nowrap;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat .cd-composer {
  min-height: 56px;
  padding: 8px;
  gap: 8px;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat .cd-composer-input {
  height: 40px;
  font-size: 14px;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat .cd-send {
  width: 42px;
  min-height: 40px;
  border-radius: 9px;
}

@media (min-height: 820px) {
  body.cd-v2 .cc-briefing .cc-recap-lede {
    margin-bottom: 16px;
  }
}

body.cd-v2 .cc-planned-list .cc-run-now {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-subtle);
}

body.cd-v2 .cc-planned-list .cc-run-now:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

body.cd-v2 .cc-greeting {
  margin-bottom: 10px;
  font-size: 22px;
  letter-spacing: 0;
}

body.cd-v2 .cc-recap-top .cc-group-label {
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.48);
}

body.cd-v2 .cc-recap-note {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.25;
}

body.cd-v2 .cc-artifact {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
}

@media (min-width: 1081px) {
  body.cd-v2 .cd-grid {
    grid-template-columns: 300px minmax(0, 1fr) 340px;
  }
}

body.cd-v2 .cc-briefing .cc-recap-lede {
  padding: 14px 16px 15px;
  border-color: rgba(131, 240, 197, 0.15);
}

body.cd-v2 .cc-recap-top {
  margin-bottom: 5px;
}

body.cd-v2 .cc-recap-top .cc-group-label {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

body.cd-v2 .cc-recap-note {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11.5px;
  line-height: 1.35;
}

body.cd-v2 .cc-artifacts {
  gap: 8px 16px;
  padding-top: 1px;
}

body.cd-v2 .cc-artifact {
  gap: 7px;
  color: rgba(255, 255, 255, 0.86);
}

@media (max-height: 820px) {
  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat {
    gap: 6px;
    padding: 10px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro {
    gap: 6px;
    max-height: 58px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-prompts button {
    min-height: 26px;
    padding: 4px 8px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat .cd-composer {
    min-height: 52px;
    padding: 6px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat .cd-composer-input {
    height: 38px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat .cd-send {
    min-height: 38px;
    width: 40px;
  }
}

body.cd-v2 .cc-decision-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

body.cd-v2 .cc-option {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 9px;
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

body.cd-v2 .cc-option::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 0 3px rgba(17, 17, 20, 0.84);
}

body.cd-v2 .cc-option:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
}

body.cd-v2 .cc-option:hover::before {
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.2);
}

body.cd-v2 .cc-option:focus-visible {
  outline: 2px solid rgba(131, 240, 197, 0.36);
  outline-offset: 2px;
}

body.cd-v2 .cc-option:disabled::before {
  opacity: 0.5;
}

@media (max-height: 820px) {
  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-chat {
    gap: 7px;
    padding: 10px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro {
    display: none;
    max-height: 30px;
  }

  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-prompts {
    display: none;
  }
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro {
  display: block;
  max-height: 24px;
}

body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro .cc-chat-title h2 {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.2;
}

@media (max-height: 820px) {
  body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro {
    display: none;
  }
}

body.cd-v2 .cc-decision {
  gap: 8px;
  padding: 12px 14px 13px;
}

body.cd-v2 .cc-decision-q {
  margin: 0;
  line-height: 1.3;
}

body.cd-v2 .cc-decision-sub {
  margin: 0 0 3px;
  line-height: 1.4;
}

body.cd-v2 .cc-decision-options {
  gap: 8px;
}

body.cd-v2 .cc-decision-footer {
  gap: 9px;
  padding-top: 3px;
}

body.cd-v2 .cc-greeting,
body.cd-v2 .cc-recap-top .cc-group-label,
body.cd-v2 .cc-decision-q,
body.cd-v2 .cc-artifact,
body.cd-v2 .cc-chat-title h2,
body.cd-v2 .cd-center.cc:not(.is-chat-open) .cc-dock-intro .cc-chat-title h2 {
  font-weight: 500;
}

body.cd-v2 .cc-decision-q {
  color: rgba(255, 255, 255, 0.9);
}

body.cd-v2 .cc-decision-label-row {
  margin-bottom: 12px;
}

/* EICO text wordmark — interim lockup until final brand assets land *//* EICO text wordmark — interim lockup until final brand assets land
   (the old zilla-mark/wordmark SVGs spell the previous name). */
.brand-wordmark-text {
  color: #fff;
  font-family: "Geist", "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* Stay-updated modal: first/last name on one row */
.wl-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) {
  .wl-row {
    grid-template-columns: 1fr;
  }
}

/* Blog: closing questions list */
.post-article .question-list {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
  margin: 28px 0 8px;
  padding: 0;
}
.post-article .question-list li {
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  font-family: "Geist", "DM Sans", system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 450;
  gap: 18px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding: 16px 0;
}
.post-article .question-index {
  color: #ff7a2f;
  flex: 0 0 auto;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.post-article .question-ultimate {
  font-weight: 520;
}
.post-article .question-ultimate .question-index {
  color: #83f0c5;
}

/* Careers: requirements list */
.post-article .req-list {
  list-style: none;
  margin: 18px 0 28px;
  padding: 0;
}
.post-article .req-list li {
  color: rgba(255, 255, 255, 0.76);
  margin: 12px 0;
  padding-left: 24px;
  position: relative;
}
.post-article .req-list li::before {
  color: #ff7a2f;
  content: "—";
  left: 0;
  position: absolute;
}

/* Align the chart's top edge with the hero title */
body[data-variant="hybrid"] .hero-grid {
  align-items: start;
}

/* Footer: tagline sits under the EICO wordmark instead of bottom-right */
.footer-top {
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  min-height: 0;
}
.footer-top p {
  text-align: left;
}