/* ==========================================================================
   Home Page Specific Styles
   ========================================================================== */

/* --- Hero Animation Frames --- */
.hero-brands-rail .hero-anim-0 { animation: fade-up 0.8s ease-out forwards; animation-delay: 0.1s; opacity: 0; }
.hero-brands-rail .hero-anim-1 { animation: fade-up 0.8s ease-out forwards; animation-delay: 0.2s; opacity: 0; }
.hero-brands-rail .hero-anim-2 { animation: fade-up 0.8s ease-out forwards; animation-delay: 0.3s; opacity: 0; }
.hero-brands-rail .hero-anim-3 { animation: fade-up 0.8s ease-out forwards; animation-delay: 0.4s; opacity: 0; }
.hero-brands-rail .hero-anim-4 { animation: fade-up 0.8s ease-out forwards; animation-delay: 0.5s; opacity: 0; }
.hero-brands-rail .hero-anim-5 { animation: fade-in 1.2s ease-out forwards; animation-delay: 0.6s; opacity: 0; }

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Hero Visual Elements --- */
@media (max-width: 900px) {
  .hero-rail-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-brands-headline-refined {
    font-size: 2.5rem !important;
  }
  .hero-scene-slab {
    height: auto !important;
    min-height: 400px;
    flex-direction: column;
  }
  .scene-chaos-zone, .scene-infra-zone {
    width: 100% !important;
  }
  .scene-absorption-core {
    width: 100% !important;
    height: 60px;
  }
  .absorption-beam {
    width: 100% !important;
    height: 2px !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
  }
}

.scene-fragment {
  position: absolute;
  font-size: 0.65rem;
  padding: 4px 8px;
  background: rgba(255, 107, 107, 0.013);
  border: 1px solid rgba(255, 107, 107, 0.037);
  color: rgba(255, 107, 107, 0.15);
  border-radius: 4px;
  white-space: nowrap;
  animation: float-drift 8s infinite alternate ease-in-out;
}
.frag-1 { animation-delay: 0s; }
.frag-2 { animation-delay: 1s; }
.frag-3 { animation-delay: 2s; }
.frag-4 { animation-delay: 0.5s; }
.frag-5 { animation-delay: 1.5s; }
.frag-6 { animation-delay: 2.5s; }
.frag-7 { animation-delay: 0.8s; }
.frag-8 { animation-delay: 1.2s; }
.frag-9 { animation-delay: 2.2s; }
.frag-10 { animation-delay: 0.3s; }

@keyframes float-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(5px, -5px) rotate(2deg); }
  100% { transform: translate(-5px, 5px) rotate(-2deg); }
}

@keyframes pulse-glow {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.infra-output {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: rgba(255,255,255,0.02);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.05);
}
.status-pulse-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  animation: pulse-op 2s infinite;
}

@keyframes pulse-op {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* --- Growth Pressure SVG Path Drawing --- */
.js-draw-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2s ease-out;
}
.visible .js-draw-path {
  stroke-dashoffset: 0;
}

/* --- Activate Infra Layouts --- */
@media (max-width: 900px) {
  .infra-map-wrapper {
    flex-direction: column;
  }
  .connectivity-layer {
    flex-direction: row !important;
  }
  .bento-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-card {
    grid-column: span 1 !important;
  }
  .matrix-wrapper {
    grid-template-columns: 1fr !important;
  }
  .stack-integration-wrapper > div {
    flex-direction: column;
  }
}

/* --- Orbit Animations --- */
@keyframes spin-slow {
  100% { transform: rotate(360deg); }
}
@keyframes spin-slow-reverse {
  100% { transform: rotate(-360deg); }
}

/* --- Responsive fixes for other visual wrappers --- */
.capacity-rail-wrapper > div:first-child {
  flex-wrap: wrap;
  gap: var(--space-8);
}
@media (max-width: 768px) {
  .capacity-rail-wrapper > div:first-child > div {
    min-width: 120px;
  }
}

/* ==========================================================================
   ShiftRoster — a escala de personas (Mecanismo 3 do VOICE_DOCTRINE)
   ========================================================================== */

.roster-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.roster-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--content);
  margin: 0 auto;
}

.roster-shift {
  position: relative;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
}

/* a faixa de acento no topo — o "turno" como uma barra de tempo */
.roster-shift::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--shift-accent), transparent);
  opacity: 0.5;
}

.roster-shift-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.roster-shift-slot {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.roster-shift-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--shift-accent);
}

.roster-seats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.roster-seat {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.roster-seat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--shift-accent);
  box-shadow: 0 0 8px var(--shift-accent);
  animation: pulse-op 2.4s infinite;
}

.roster-seat-count {
  margin-left: var(--space-2);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.roster-shift-line {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.roster-weekend {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: var(--content);
  margin: var(--space-4) auto 0;
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.roster-weekend-mark {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-color);
}

.roster-weekend p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.roster-weekend strong {
  color: var(--text-primary);
  font-weight: 600;
}

.roster-traits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: var(--content);
  margin: var(--stack-sm) auto 0;
}

.roster-trait {
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.roster-trait-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.roster-trait-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.roster-footnote {
  max-width: var(--content);
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .roster-band { grid-template-columns: 1fr; }
  .roster-traits { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .shift-roster-section h2 { font-size: 2.25rem !important; }
  .roster-shift { padding: var(--space-5); }
  .roster-weekend { padding: var(--space-4) var(--space-5); }
}

/* ==========================================================================
   KeepYourStack — profundidade da integracao (3 APIs vivas + 18 superficies)
   ========================================================================== */

.stack-live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--content);
  margin: 0 auto;
}

.stack-live-card {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.stack-live-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stack-live-name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.stack-live-tag {
  margin-left: auto;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--conn-accent);
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 2px 8px;
}

.stack-live-reads {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.stack-surfaces {
  max-width: var(--content);
  margin: var(--space-4) auto 0;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.stack-surfaces-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.stack-surfaces-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stack-surface-chip {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.stack-surfaces-note {
  margin: var(--space-5) 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--measure-read);
}

.stack-distinction {
  max-width: var(--content);
  margin: var(--space-8) auto 0;
}

.stack-distinction-intro {
  max-width: var(--measure-block);
  margin-bottom: var(--space-6);
}

.stack-distinction-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.stack-distinction-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.stack-distinction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.stack-distinction-card {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.stack-distinction-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.stack-distinction-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .stack-live-grid { grid-template-columns: 1fr; }
  .stack-distinction-grid { grid-template-columns: 1fr; }
  .progressive-routing { flex-direction: column; gap: var(--space-5) !important; }
}

@media (max-width: 768px) {
  .keep-stack-section h2 { font-size: 2.25rem !important; }
  .stack-surfaces { padding: var(--space-5); }
  .stack-distinction-title { font-size: 1.375rem; }
}

/* ==========================================================================
   CaseCoverage — o ciclo de vida do suporte (a escada de casos)
   ========================================================================== */

.coverage-ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--content);
  margin: 0 auto;
}

.coverage-rung {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
}

.coverage-rung::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rung-accent), transparent);
  opacity: 0.5;
}

.coverage-rung-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.coverage-rung-step {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rung-accent);
  font-variant-numeric: tabular-nums;
}

.coverage-rung-tier {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.coverage-rung-body {
  margin: 0 0 var(--space-5);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.coverage-rung-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.coverage-case-chip {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.coverage-remainder {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: var(--content);
  margin: var(--space-4) auto 0;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.coverage-remainder-mark {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

.coverage-remainder-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.coverage-remainder-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--measure-block);
}

@media (max-width: 900px) {
  .coverage-ladder { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .case-coverage-section h2 { font-size: 2.25rem !important; }
  .coverage-remainder { padding: var(--space-5); gap: var(--space-4); }
}

/* ==========================================================================
   IdealFit — o ICP explicito (faixa, volume, plataforma, verticais)
   ========================================================================== */

.fit-criteria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--content);
  margin: 0 auto;
}

.fit-criterion {
  padding: var(--space-8) var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  text-align: center;
}

.fit-metric {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.fit-metric-label {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.fit-criterion-body {
  margin: var(--space-5) 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.fit-verticals {
  max-width: var(--content);
  margin: var(--space-4) auto 0;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  text-align: center;
}

.fit-verticals-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.fit-verticals-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.fit-vertical-chip {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.fit-verticals-note {
  margin: var(--space-5) auto 0;
  max-width: var(--measure-read);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .fit-criteria { grid-template-columns: 1fr; }
}


@media (max-width: 768px) {
  .ideal-fit-section h2 { font-size: 2.25rem !important; }
  .fit-criterion { padding: var(--space-6) var(--space-5); }
  .fit-verticals { padding: var(--space-5); }
}

/* ==========================================================================
   ExecutiveIntel — a tese fonte-de-verdade absorvida (PRODUCT_INTENT §1A)
   ========================================================================== */

.truth-lanes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: var(--content);
  margin: 0 auto;
}

.truth-lane {
  position: relative;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
}

.truth-lane::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lane-accent), transparent);
  opacity: 0.5;
}

.truth-lane-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.truth-lane-label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.truth-lane-scope {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lane-accent);
}

.truth-lane-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.truth-note {
  max-width: var(--content);
  margin: var(--space-4) auto 0;
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.truth-crossing {
  max-width: var(--content);
  margin: var(--space-8) auto 0;
}

.truth-crossing-intro {
  max-width: var(--measure-block);
  margin-bottom: var(--space-6);
}

.truth-crossing-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.truth-crossing-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.truth-crossing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.truth-crossing-card {
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.truth-crossing-term {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.truth-crossing-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.truth-crossing-scope {
  margin: var(--space-5) 0 0;
  max-width: var(--measure-read);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.dashboard-visual-caption {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.truth-stickiness {
  max-width: var(--measure-read);
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .truth-lanes { grid-template-columns: 1fr; }
  .truth-crossing-grid { grid-template-columns: 1fr; }
  .exec-dash-grid { grid-template-columns: 1fr !important; }
  .exec-dash-action { grid-column: span 1 !important; flex-direction: column; align-items: flex-start !important; }
}

@media (max-width: 768px) {
  .executive-intel-section h2 { font-size: 2.25rem !important; }
  .truth-crossing-title { font-size: 1.375rem; }
  .truth-note { padding: var(--space-4) var(--space-5); }
}

/* ==========================================================================
   RetentionThesis — a tese nomeada (o momento de virada de categoria)
   ========================================================================== */

.thesis-bets {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.thesis-bets-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.thesis-bets-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* a espinha: cada aposta pendurada numa linha vertical unica */
.thesis-bet {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.thesis-bet:last-child { border-bottom: 0; padding-bottom: 0; }
.thesis-bet:first-child { padding-top: 0; }

.thesis-bet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-color);
  opacity: 0.6;
}

.thesis-bet-surface {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.thesis-bet-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.thesis-converge {
  max-width: var(--content);
  margin: var(--space-4) auto 0;
  padding: var(--space-8);
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.thesis-converge-text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: var(--measure-block);
}

.thesis-converge-answer {
  flex: none;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--accent-color);
}

.thesis-gap {
  max-width: var(--content);
  margin: var(--space-8) auto 0;
}

.thesis-gap-intro {
  max-width: var(--measure-block);
  margin-bottom: var(--space-6);
}

.thesis-gap-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.thesis-gap-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.thesis-gap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.thesis-gap-col {
  padding: var(--space-6);
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.thesis-gap-col--old {
  background: rgba(255, 255, 255, 0.015);
}

.thesis-gap-col--new {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.16);
}

.thesis-gap-col-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
}

.thesis-gap-col--new .thesis-gap-col-label { color: var(--success-color); }

.thesis-gap-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.thesis-gap-items li {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: var(--space-5);
  position: relative;
}

.thesis-gap-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--text-muted);
}

.thesis-gap-col--new .thesis-gap-items li { color: var(--text-primary); }
.thesis-gap-col--new .thesis-gap-items li::before { background: var(--success-color); }

.thesis-close {
  max-width: var(--measure-block);
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.thesis-close strong {
  color: var(--text-primary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .thesis-bet { grid-template-columns: 1fr; gap: var(--space-1); }
  .thesis-converge { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .thesis-gap-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .retention-thesis-section h2 { font-size: 2.25rem !important; }
  .thesis-bets { padding: var(--space-5); }
  .thesis-converge { padding: var(--space-5); }
  .thesis-gap-title { font-size: 1.375rem; }
  .thesis-close { font-size: 1rem; }
}

/* --- RetentionThesis: densidade no mobile ---------------------------------
   Em 375px as 6 apostas ocupavam 864px (116px cada) porque (a) o recuo do
   marcador comia 32px de largura util, forcando quebra extra, e (b) o padding
   vertical era o de desktop. Nada de argumento sai; o que muda e a densidade.  */
@media (max-width: 768px) {
  .thesis-bet {
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
  }
  .thesis-bet-surface {
    font-size: 0.875rem;
  }
  .thesis-bet-text {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .thesis-bets-label {
    margin-bottom: var(--space-4);
  }
  /* as duas colunas viram uma lista continua: sem o respiro de card duplo */
  .thesis-gap-col {
    padding: var(--space-5);
  }
  .thesis-gap-col-label {
    margin-bottom: var(--space-4);
  }
  .thesis-gap-items {
    gap: var(--space-2);
  }
  .thesis-converge-text {
    font-size: 1rem;
  }
}

/* ==========================================================================
   ShiftRoster v2 — mostrador de 24h
   ========================================================================== */

.dial-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
}

.dial-figure { margin: 0; }

.dial-svg { width: 100%; height: auto; display: block; }

.dial-arc--wknd { opacity: 0.35; }

/* o anel da semana "desenha-se" quando a secao entra — engenharia, nao enfeite */
.js-observe-fade .dial-arc { opacity: 0; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.js-observe-fade.visible .dial-arc { opacity: 0.85; }
.js-observe-fade.visible .dial-arc--wknd { opacity: 0.35; }
.js-observe-fade.visible .dial-arc:nth-of-type(2) { transition-delay: 120ms; }
.js-observe-fade.visible .dial-arc:nth-of-type(3) { transition-delay: 240ms; }

.dial-hour {
  fill: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.dial-center-num {
  fill: var(--text-primary);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.dial-center-cap {
  fill: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.dial-key {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dial-key-row {
  display: grid;
  grid-template-columns: 14px 78px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.dial-key-row:last-child { border-bottom: 0; }

.dial-key-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--k, var(--accent-color));
}

.dial-key-swatch--dashed {
  background: repeating-linear-gradient(90deg, var(--text-secondary) 0 3px, transparent 3px 6px);
}

.dial-key-hours {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.dial-key-name { font-size: 0.9375rem; color: var(--text-secondary); }

.dial-key-seats {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.dial-key-row--wknd .dial-key-hours { color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .js-observe-fade .dial-arc,
  .js-observe-fade.visible .dial-arc { transition: none; opacity: 0.85; }
  .js-observe-fade .dial-arc--wknd,
  .js-observe-fade.visible .dial-arc--wknd { opacity: 0.35; }
}

@media (max-width: 900px) {
  .dial-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .dial-figure { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .dial-key-row { grid-template-columns: 14px 70px 1fr; row-gap: 2px; padding: var(--space-3) 0; }
  .dial-key-seats { grid-column: 2 / -1; }
}

/* ==========================================================================
   RetentionThesis v2 — convergencia + tensao assimetrica
   ========================================================================== */

/* --- tensao assimetrica --- */
.tension { max-width: var(--content); margin: var(--space-8) auto 0; }

.tension-head { max-width: var(--measure-block); margin-bottom: var(--space-6); }

.tension-title {
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em;
  color: var(--text-primary); margin-bottom: var(--space-3);
}

.tension-sub { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); }

/* a desproporcao E o argumento: 1fr contra 2.2fr */
.tension-scale {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: var(--space-5);
  align-items: stretch;
}

.tension-side { padding: var(--space-6); border-radius: 16px; }

.tension-side--narrow {
  background: rgba(255, 255, 255, 0.012);
  border: 1px solid var(--border-subtle);
}

.tension-side--wide {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.tension-side-label {
  display: block;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
}

.tension-side--wide .tension-side-label { color: var(--success-color); }

.tension-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

.tension-list li {
  position: relative; padding-left: var(--space-5);
  line-height: 1.5;
}

.tension-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 10px; height: 1px; background: currentColor; opacity: 0.5;
}

/* o lado estreito recua: menor e menos contrastado. o largo avanca. */
.tension-side--narrow .tension-list li { font-size: 0.8125rem; color: var(--text-secondary); }
.tension-side--wide  .tension-list li { font-size: 1rem; color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .conv-curve { transition: none; stroke-dashoffset: 0; }
}

@media (max-width: 900px) {
  .conv { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
  .conv-wires { display: none; }
  /* sem as curvas, a convergencia vira uma chave vertical */
  .conv-nodes { border-left: 2px solid rgba(99, 102, 241, 0.25); padding-left: var(--space-5); }
  .conv-target { align-items: center; text-align: center; }
  .tension-scale { grid-template-columns: 1fr; }
  .tension-side--narrow .tension-list li { font-size: 0.875rem; }
}

@media (max-width: 768px) {
  .tension-title { font-size: 1.375rem; }
  .tension-side { padding: var(--space-5); }
}

/* ==========================================================================
   KeepYourStack v2 — diagrama anotado (uma frase, tres destinos)
   ========================================================================== */

.branch {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  text-align: center;
}

.branch-msg {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
}

.branch-msg-meta {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.branch-msg-text {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* o tronco que desce da mensagem para o leque */
.branch-stem {
  width: 1px;
  height: var(--space-8);
  margin: 0 auto;
  background: linear-gradient(180deg, var(--border-strong), rgba(255, 255, 255, 0.06));
}

.branch-fan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
}

.branch-leg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-top: 2px solid var(--leg);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 0 14px 14px;
}

/* o pino que liga a perna ao tronco */
.branch-leg-tick {
  position: absolute;
  top: -6px;
  left: var(--space-5);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--leg);
  box-shadow: 0 0 12px var(--leg);
}

.branch-when {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--leg);
}

.branch-surface {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.branch-reads {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.branch-caption {
  max-width: var(--measure-read);
  margin: var(--space-8) auto 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .branch { padding: var(--space-6) var(--space-5); }
  .branch-fan { grid-template-columns: 1fr; gap: var(--space-3); }
  .branch-leg { border-top: 0; border-left: 2px solid var(--leg); border-radius: 0 14px 14px 0; padding: var(--space-4) var(--space-5); }
  .branch-leg-tick { top: var(--space-4); left: -6px; }
  .branch-stem { height: var(--space-6); }
  .branch-msg { padding: var(--space-4) var(--space-5); width: 100%; }
  .branch-msg-text { font-size: 1.0625rem; }
}

/* ==========================================================================
   CaseCoverage v2 — escada de escalacao
   ========================================================================== */

.stair {
  list-style: none;
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stair-step {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: var(--space-5);
  /* cada degrau recua: a distancia horizontal e a distancia ate a marca */
  margin-left: calc(var(--depth) * 56px);
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.stair-rail {
  background: var(--step);
  border-radius: 2px;
  opacity: 0.8;
}

/* r47: o degrau era duas linhas empilhadas — a cabeca (numero + tier) em cima
   e a frase embaixo — vezes quatro degraus, a 197px cada. A cabeca passa pra
   uma COLUNA A ESQUERDA e a frase ocupa a linha ao lado: o degrau vira uma
   linha so. O recuo crescente, que e a metafora da escalada, fica intacto — e
   ele que conta a historia, nao o empilhamento dentro do cartao. */
.stair-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-areas:
    "cabeca frase"
    "tags   tags";
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  align-items: baseline;
}

.stair-head { grid-area: cabeca; }
.stair-line { grid-area: frase; }
.stair-cases { grid-area: tags; }

.stair-head {
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.stair-n {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--step);
  font-variant-numeric: tabular-nums;
}

.stair-tier {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.stair-line {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.stair-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-4);
}

.stair-chip {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* o ultimo degrau e o da marca: recuado ao maximo e sem chips */
.stair-step:last-child {
  background: rgba(255, 255, 255, 0.012);
}

@media (max-width: 1100px) {
  .stair-step { margin-left: calc(var(--depth) * 32px); }
}

@media (max-width: 768px) {
  .stair-step { margin-left: calc(var(--depth) * 12px); padding: var(--space-5); gap: var(--space-4); }
  .stair-tier { font-size: 1.0625rem; }
  .stair-line { font-size: 0.875rem; }
}

/* ==========================================================================
   IdealFit v2 — numero gigante como ancora, com ar
   ========================================================================== */

.fit-anchor {
  text-align: center;
  margin: var(--stack-md) auto var(--space-10);
}

.fit-anchor-num {
  font-size: clamp(3.25rem, 11vw, 8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fit-anchor-dash {
  color: var(--text-secondary);
  margin: 0 0.12em;
  font-weight: 400;
}

.fit-anchor-cap {
  margin-top: var(--space-5);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-secondary);
}

.fit-satellites {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.fit-sat { text-align: center; }

.fit-sat-val {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.fit-sat-lab {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.fit-verticals-line {
  margin: var(--stack-md) auto 0;
  max-width: var(--measure-title);
  text-align: center;
  line-height: 2.1;
}

.fit-vert {
  font-size: 1.0625rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.fit-vert-sep {
  color: var(--text-secondary);
  margin: 0 var(--space-4);
  opacity: 0.5;
}

.fit-tail {
  max-width: 560px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .ideal-fit-section h2 { font-size: 2.25rem !important; }
  .fit-anchor { margin: var(--space-10) auto var(--space-8); }
  .fit-satellites { gap: var(--space-10); }
  .fit-sat-val { font-size: 1.375rem; }
  .fit-verticals-line { margin-top: var(--space-10); line-height: 2.4; }
  .fit-vert { font-size: 0.9375rem; }
  .fit-vert-sep { margin: 0 var(--space-2); }
}

/* ==========================================================================
   ActivateInfra v2 — pilha com profundidade, camada do meio acesa
   ========================================================================== */

.planes {
  max-width: var(--measure-title);
  margin: 0 auto;
  perspective: 1400px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.plane {
  transform: rotateX(16deg);
  transform-style: preserve-3d;
  border-radius: 16px;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.plane--in { opacity: 0.55; }
.plane--out { opacity: 0.9; }

.plane-tag {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.plane-tag--out { color: var(--success-color); }

.plane-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.plane-chip {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.plane-chip--out { color: var(--text-primary); border-color: rgba(16, 185, 129, 0.18); }

/* a camada que ACENDE — o estado visual que a palavra "activate" nomeia */
.plane--core {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-8);
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1s cubic-bezier(0.16, 1, 0.3, 1), border-color 1s, background-color 1s;
  transition-delay: 350ms;
}

.js-observe-fade.visible .plane--core {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(99, 102, 241, 0.18);
}

.plane-core-name {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.plane-core-role {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-color);
}

.plane-core-pulse {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 14px var(--accent-color);
  opacity: 0;
  transition: opacity 0.8s ease-out;
  transition-delay: 900ms;
  align-self: center;
}

.js-observe-fade.visible .plane-core-pulse { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .plane--core,
  .js-observe-fade.visible .plane--core {
    transition: none;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(99, 102, 241, 0.18);
  }
  .plane-core-pulse, .js-observe-fade.visible .plane-core-pulse { transition: none; opacity: 1; }
}

@media (max-width: 768px) {
  .activate-infra-section h2 { font-size: 2.25rem !important; }
  /* a perspectiva some no celular: em tela estreita ela so rouba altura */
  .planes { perspective: none; gap: var(--space-4); }
  .plane { transform: none; padding: var(--space-5); box-shadow: 0 12px 24px rgba(0,0,0,0.4); }
  .plane--core { padding: var(--space-5); flex-wrap: wrap; gap: var(--space-2); }
  .plane-core-name { font-size: 1.375rem; }
}

/* ==========================================================================
   SelfImprovingAI v2 — trace de uma decisao
   ========================================================================== */

.trace {
  /* r47: com os passos em 3 colunas, 1000px apertava cada frase em 3 linhas.
     Na coluna cheia cada celula ganha ~90px e a frase cai pra 2 linhas. */
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.trace-case {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  margin-bottom: var(--space-6);
}

.trace-case-meta {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.trace-case-text {
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* r47: os seis passos eram uma coluna de 6 linhas de 72px — 429px de altura
   pra seis frases de uma linha cada, com meia largura sobrando a direita.
   Agora sao 3 x 2: a leitura continua 01 02 03 / 04 05 06, cada passo mantem o
   proprio marcador e o proprio trilho a esquerda (a linguagem de pipeline fica
   na CELULA, nao mais na coluna), e o numero e o nome sobem pra mesma linha
   com a frase embaixo. Mesma sequencia, metade da altura. */
.trace-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}

.trace-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "n nome" ". frase";
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-3) 0 var(--space-4) var(--space-5);
  /* a linha do pipeline */
  border-left: 1px solid var(--border-light);
  margin-left: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 130ms);
}

.js-observe-fade.visible .trace-step { opacity: 1; transform: translateY(0); }

.trace-step::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 1.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid var(--accent-color);
}

/* o ultimo passo e o titulo da secao: e ele que acende */
/* em coluna o ultimo passo apagava o trilho porque nao havia proximo; em grade
   cada celula tem o seu, entao o trilho fica — o que muda e so o marcador. */
.trace-step--last { border-left-color: var(--success-color); }
.trace-step--last::before {
  background: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 0 0 12px var(--success-color);
}
.trace-step--last .trace-name { color: var(--success-color); }
.trace-step--last .trace-what { color: var(--text-primary); }

.trace-n { grid-area: n; }
.trace-name { grid-area: nome; }
.trace-what { grid-area: frase; }

.trace-n {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.trace-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.trace-what { font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); }

.trace-sources {
  max-width: var(--measure-title);
  margin: var(--space-5) auto 0;
  padding: var(--space-6) var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.trace-sources-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.trace-sources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.trace-source { display: flex; flex-direction: column; gap: 4px; }

.trace-source-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.trace-source-desc { font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); }

.trace-close {
  max-width: var(--measure-read);
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .trace-step, .js-observe-fade.visible .trace-step { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .trace-step { grid-template-columns: 30px 1fr; row-gap: 2px; }
  .trace-what { grid-column: 2 / -1; }
  .trace-sources-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 768px) {
  .compounding-intelligence-section h2 { font-size: 2.25rem !important; }
  .trace-steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .trace { padding: var(--space-5); }
  .trace-sources { padding: var(--space-5); }
  .trace-case-text { font-size: 1rem; }
}

/* ==========================================================================
   RetentionThesis v3 — declaracao com ar; a tese no proprio no de chegada
   ========================================================================== */

.conv-target-claim {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-color);
}

.thesis-pivot {
  max-width: var(--measure-block);
  margin: var(--stack-md) auto var(--space-8);
  text-align: center;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text-primary);
}

/* a tensao virou faixa: duas linhas, nao dois cards. a assimetria continua sendo o argumento */
.tension-strip {
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tension-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) var(--space-6);
  border-radius: 14px;
}

.tension-row--narrow {
  width: 62%;
  background: rgba(255, 255, 255, 0.012);
  border: 1px solid var(--border-subtle);
}

.tension-row--wide {
  width: 100%;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.tension-row-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.tension-row--wide .tension-row-label { color: var(--success-color); }

/* r41: nao tinha limite nenhum — com a coluna em 1296 a linha ia a 99ch. */
.tension-row-items { line-height: 1.6; max-width: var(--measure-read); }
.tension-row--narrow .tension-row-items { font-size: 0.8125rem; color: var(--text-secondary); }
.tension-row--wide .tension-row-items { font-size: 1rem; color: var(--text-primary); }

.retention-thesis-section .thesis-close {
  max-width: var(--measure-block);
  margin: var(--space-10) auto 0;
  text-align: center;
  font-size: 1.25rem;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .thesis-pivot { font-size: 1.375rem; margin: var(--space-10) auto var(--space-6); }
  .tension-row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5); }
  .tension-row--narrow { width: 100%; }
  .retention-thesis-section .thesis-close { font-size: 1.0625rem; }
}

/* ==========================================================================
   ExecutiveIntel v2 — diagrama de conjuntos (o universo, o subconjunto, a faixa)
   ========================================================================== */

.sets { max-width: var(--content); margin: 0 auto; }

.sets-outer {
  position: relative;
  padding: var(--space-12) var(--space-8) var(--space-10);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 20px;
  background: rgba(99, 102, 241, 0.04);
}

.sets-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.sets-label--outer {
  position: absolute;
  top: var(--space-5);
  left: var(--space-8);
  right: var(--space-8);
  color: var(--accent-color);
}

.sets-label--band {
  margin-top: var(--space-6);
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
}

/* o subconjunto: fronteira TRACEJADA porque ela se move */
.sets-inner {
  width: 58%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px dashed var(--success-color);
  border-radius: 16px;
  background: rgba(16, 185, 129, 0.06);
}

.sets-inner-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.sets-inner-note {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--success-color);
}

@media (max-width: 900px) {
  .sets-outer { padding: var(--space-12) var(--space-5) var(--space-6); }
  .sets-label--outer { left: var(--space-5); right: var(--space-5); font-size: 0.6875rem; }
  .sets-inner { width: 100%; padding: var(--space-6) var(--space-5); }
  .sets-inner-title { font-size: 1.25rem; }
  .sets-label--band { font-size: 0.875rem; }
}

/* ==========================================================================
   RITMO (rodada 6) — respiro deliberado onde a pagina ficou densa demais
   --------------------------------------------------------------------------
   Medido em palavras por 100px de altura, do topo ao rodape. Dois pontos de
   fadiga: (a) keep-stack -> case-coverage subiam 10.2 -> 11.5 coladas, e
   (b) retention-thesis, que deveria ser o respiro entre o trace e o diagrama
   de conjuntos, estava em 8.5 — pouco alivio para o papel que tem.
   O remedio e AR, nao corte: mesmo argumento, mais silencio em volta.
   ========================================================================== */

/* (a) a escada ganha folga entre degraus e no rodape da secao */
.case-coverage-section { padding-bottom: var(--space-16) !important; }
.stair { gap: var(--space-5); }
.stair-step { padding: var(--space-5) var(--space-6); }

/* (b) a tese respira: mais distancia entre o diagrama, a pergunta e a faixa */
.retention-thesis-section .conv { margin-bottom: var(--space-10); }
.thesis-pivot { margin-top: var(--stack-md); margin-bottom: var(--stack-sm); }
.tension-strip { gap: var(--space-4); }
.retention-thesis-section .thesis-close { margin-top: var(--stack-md); }

@media (max-width: 900px) {
  .stair-body { display: block; }
  .stair-head { margin-bottom: var(--space-2); }
}

@media (max-width: 768px) {
  .stair-step { padding: var(--space-5); }
  .stair { gap: var(--space-3); }
  .thesis-pivot { margin-top: var(--space-10); margin-bottom: var(--space-6); }
  .retention-thesis-section .thesis-close { margin-top: var(--space-10); }
}

/* ==========================================================================
   ActivateInfra v3 (rodada 7) — antes/depois dos canais + matriz de roteamento
   ========================================================================== */

/* --- a matriz de roteamento --- */
.routing {
  max-width: var(--content);
  margin: var(--space-10) auto 0;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.routing-head { max-width: var(--measure-block); margin-bottom: var(--space-8); }

.routing-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.routing-sub { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); max-width: var(--measure-read); }

.routing-matrix { list-style: none; display: flex; flex-direction: column; }

.routing-row {
  display: grid;
  grid-template-columns: 130px 1fr 88px 84px;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.routing-row:last-child { border-bottom: 0; }

.routing-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }

.routing-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

/* o preenchimento varre de 0 a 100 uma vez: mostra a AMPLITUDE do controle,
   nao um valor de cliente */
.routing-fill {
  position: absolute;
  inset: 0 100% 0 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-color), var(--success-color));
  transition: right 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--n) * 90ms);
}
.js-observe-fade.visible .routing-fill { right: 0; }

.routing-scale {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.routing-state {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: right;
}
.routing-state--live { color: var(--success-color); }

.routing-foot {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--measure-read);
}

@media (prefers-reduced-motion: reduce) {
  .routing-fill { transition: none; right: 0; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-4); }
  .split-arrow { transform: rotate(90deg); height: 28px; }
  .split-side { padding: var(--space-5); }
  .split-scatter, .split-unified { min-height: 0; }
  .routing { padding: var(--space-5); }
  .routing-row { grid-template-columns: 1fr auto; row-gap: var(--space-2); gap: var(--space-4); }
  .routing-track { grid-column: 1 / -1; order: 3; }
  .routing-scale { display: none; }
}

@media (max-width: 768px) {
  .activate-infra-section h2 { font-size: 2.25rem !important; }
  .routing-title { font-size: 1.375rem; }
}

/* ==========================================================================
   GrowthPressure v3 (rodada 7) — a jornada $5M -> $100M e o que acumula
   ========================================================================== */

.journey {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.journey-rail { margin-bottom: var(--space-6); }

.journey-rail-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* o trilho da receita: uma linha so, leve, do inicio ao fim */
.journey-rail-line {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), var(--accent-color));
}

.journey-stops {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.journey-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--n) * 120ms);
}

.js-observe-fade.visible .journey-stop { opacity: 1; transform: translateY(0); }

.journey-tick {
  position: absolute;
  top: -22px;
  left: 0;
  width: 1px;
  height: 22px;
  background: var(--border-strong);
}

.journey-at {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* a pilha do imposto: engorda a cada marco */
.journey-load { list-style: none; display: flex; flex-direction: column; gap: 5px; }

.journey-item {
  padding: 5px 10px;
  font-size: 0.75rem;
  line-height: 1.35;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.14);
  color: var(--text-secondary);
}

.journey-rail-foot {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--danger-color);
}

.journey-question {
  max-width: var(--measure-title);
  margin: var(--stack-md) auto 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}

.journey-question em { font-style: normal; color: var(--danger-color); }

@media (prefers-reduced-motion: reduce) {
  .journey-stop, .js-observe-fade.visible .journey-stop { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .journey-stops { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

@media (max-width: 768px) {
  .growth-pressure-section h2 { font-size: 2.25rem !important; }
  .journey { padding: var(--space-5); }
  .journey-stops { grid-template-columns: 1fr; gap: var(--space-5); }
  .journey-stop { padding-top: var(--space-4); }
  .journey-tick { display: none; }
  .journey-at { font-size: 1.125rem; }
  .journey-question { font-size: 1.375rem; margin-top: var(--space-10); }
}

/* ==========================================================================
   ExecutiveIntel v3 (rodada 7) — o REGISTRO no lugar do dashboard mockado
   ========================================================================== */

.record {
  max-width: var(--content);
  margin: var(--space-10) auto 0;
  padding: var(--space-10) var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.record-head { max-width: var(--measure-block); margin-bottom: var(--space-8); }

.record-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.record-sub { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); max-width: var(--measure-read); }

.record-fields {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-field {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.025);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--n) * 45ms);
}

.js-observe-fade.visible .record-field { opacity: 1; transform: translateY(0); }

/* os sempre-presentes tem borda viva; os condicionais ficam tracejados —
   a diferenca e informacao, nao decoracao */
.record-field--always {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}

.record-field:not(.record-field--always) { border-style: dashed; }

.record-field-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

.record-field--always .record-field-name { color: var(--text-primary); }

.record-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.record-key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.record-key-item::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px dashed var(--border-strong);
  flex: none;
}

.record-key-item--always::before {
  border-style: solid;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .record-field, .js-observe-fade.visible .record-field { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .executive-intel-section h2 { font-size: 2.25rem !important; }
  .record { padding: var(--space-6) var(--space-5); }
  .record-title { font-size: 1.375rem; }
  .record-fields { gap: 6px; }
  .record-field { padding: 6px 10px; }
  .record-key { gap: var(--space-4); }
}

/* ==========================================================================
   RetentionThesis v4 (rodada 7) — ESCALA. A secao que define a categoria
   precisa ocupar a tela; o resto cala.
   --------------------------------------------------------------------------
   O diagrama estava dentro de um card do mesmo tamanho de todo o resto da
   pagina. Aqui ele sai do card, fica mais largo que o container, cresce de
   tipo e ganha um centro gravitacional de verdade.
   ========================================================================== */

.retention-thesis-section .conv {
  /* rompe o container: o desenho e maior que a coluna de texto */
  max-width: none;
  width: calc(100% + var(--space-16));
  margin-left: calc(var(--space-8) * -1);
  margin-right: calc(var(--space-8) * -1);
  /* sem card: o diagrama flutua no escuro */
  background: transparent;
  border: 0;
  padding: var(--space-10) 0;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) minmax(0, 320px);
  position: relative;
}

/* o centro gravitacional */
.retention-thesis-section .conv::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.11), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.retention-thesis-section .conv-node { padding: var(--space-3) 0; }

.retention-thesis-section .conv-node-name {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.retention-thesis-section .conv-node-bet { font-size: 0.875rem; }

.retention-thesis-section .conv-wires { height: 420px; }
.retention-thesis-section .conv-curve { stroke-width: 1.75; }

.retention-thesis-section .conv-target {
  padding: var(--space-10) var(--space-8);
  border-radius: 22px;
  background: rgba(99, 102, 241, 0.09);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 80px rgba(99, 102, 241, 0.15);
  gap: var(--space-3);
}

.retention-thesis-section .conv-target-dot { width: 12px; height: 12px; box-shadow: 0 0 20px var(--accent-color); }

.retention-thesis-section .conv-target-label {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.retention-thesis-section .conv-target-claim { font-size: 0.8125rem; letter-spacing: 0.16em; }

/* a pergunta ganha porte de manchete secundaria */
.retention-thesis-section .thesis-pivot {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  max-width: var(--measure-title);
  letter-spacing: -0.035em;
}

@media (max-width: 900px) {
  .retention-thesis-section .conv {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-6) 0;
    grid-template-columns: 1fr;
  }
  .retention-thesis-section .conv::after { display: none; }
  .retention-thesis-section .conv-node-name { font-size: 1rem; }
  .retention-thesis-section .conv-target { padding: var(--space-8) var(--space-6); }
  .retention-thesis-section .conv-target-label { font-size: 2.25rem; }
}

/* ==========================================================================
   RITMO (rodada 7) — a corrida 3-7 ficou uniformemente media-densa
   --------------------------------------------------------------------------
   Medido: 9.3 · 8.4 · 9.5 · 11.0 · 9.8. Sem batida leve em cinco secoes
   seguidas, e o pico em keep-stack (que subiu de 10.2 para 11.0 quando o
   slider de roteamento migrou para ActivateInfra e a secao perdeu altura sem
   perder texto). Remedio: ar.
   ========================================================================== */

/* keep-stack: recupera a altura que o slider levava, agora como silencio */
.keep-stack-section { padding-bottom: var(--space-16) !important; }
.keep-stack-section .branch { padding: var(--space-12) var(--space-8) var(--space-10); }
.keep-stack-section .stack-surfaces { margin-top: var(--space-8); padding: var(--space-10) var(--space-8); }

/* shift-roster vira a batida leve da corrida: o mostrador ja fala sozinho */
.shift-roster-section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.dial-layout { gap: var(--space-16); }
.shift-roster-section .roster-traits { margin-top: var(--stack-md); }

@media (max-width: 900px) {
  .keep-stack-section .branch { padding: var(--space-6) var(--space-5); }
  .keep-stack-section .stack-surfaces { margin-top: var(--space-5); padding: var(--space-6) var(--space-5); }
  .dial-layout { gap: var(--space-8); }
  .shift-roster-section .roster-traits { margin-top: var(--space-10); }
}

/* ==========================================================================
   KeepYourStack v3 (rodada 8) — os DOIS NIVEIS de cobertura, explicitos
   ========================================================================== */

.level { max-width: var(--content); margin: 0 auto; }
.level--mapped { margin-top: var(--space-10); }

.level-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin-bottom: var(--space-6);
}

.level-n {
  grid-row: 1 / span 2;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-color);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}

.level-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.level-sub {
  margin: 0;
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--measure-read);
}

.level--mapped .stack-surfaces { margin-top: 0; }

.level-bridge {
  max-width: var(--measure-read);
  margin: var(--stack-md) auto var(--space-6);
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .level-head { grid-template-columns: 30px 1fr; }
  .level-title { font-size: 1.25rem; }
  .level-bridge { font-size: 1.0625rem; margin-top: var(--space-10); }
}

/* ==========================================================================
   ActivateInfra v4 (rodada 8) — MAPA DE COBERTURA (nao convergencia)
   --------------------------------------------------------------------------
   Sem seta, sem funil, sem antes/depois: convergencia e a metafora da
   UNIFICACAO, e unificar nao e merito nosso — a marca ja fez isso no helpdesk
   dela. Aqui a leitura tem que ser PRESENCA: sete pontos, sete atendidos,
   nenhum descoberto, todos assentados na mesma base.
   ========================================================================== */

.coverage {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.coverage-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-3);
}

.coverage-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-3);
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--n) * 70ms);
}

.js-observe-fade.visible .coverage-cell { opacity: 1; transform: translateY(0); }

.coverage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-color);
  box-shadow: 0 0 12px var(--success-color);
}

.coverage-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.25;
}

.coverage-state {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--success-color);
}

/* a base compartilhada: o mesmo padrao sob todos os sete */
.coverage-base { margin-top: var(--space-6); }

.coverage-base-line {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--success-color), transparent);
  opacity: 0.5;
}

.coverage-base-label {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--success-color);
}

.coverage-note {
  max-width: var(--measure-read);
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .coverage-cell, .js-observe-fade.visible .coverage-cell { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .coverage-grid { grid-template-columns: repeat(4, 1fr); }
  .coverage { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 560px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .coverage-cell { padding: var(--space-4) var(--space-2); }
}

/* ==========================================================================
   RetentionThesis v5 (rodada 8) — PONTO DE ESTRANGULAMENTO
   --------------------------------------------------------------------------
   Seis correntes descem, atravessam UMA faixa, e saem em dois destinos. A faixa
   e o objeto mais largo e mais pesado da tela e liga fisicamente o topo ao
   rodape — e o que impede qualquer elemento de ficar solto.
   ========================================================================== */

.choke {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* --- as seis apostas, em colunas --- */
.choke-bets {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.choke-bet {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-2);
  /* r47: o rabicho que desce ate a faixa encurta com ela */
  padding: var(--space-5) var(--space-4) calc(var(--space-8) + var(--space-3));
  text-align: center;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--n) * 80ms);
}

.js-observe-fade.visible .choke-bet { opacity: 1; transform: translateY(0); }

.choke-bet-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.25;
}

.choke-bet-note { font-size: 0.75rem; line-height: 1.45; color: var(--text-secondary); }

/* a corrente que desce da aposta ate a faixa */
.choke-drop {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: var(--space-10);
  background: linear-gradient(180deg, transparent, var(--accent-color));
  opacity: 0.5;
}

/* --- A FAIXA: o objeto principal --- */
.choke-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* r47: eram 64 de respiro em cima e embaixo de uma palavra de 72px. A faixa
     e a ancora visual do funil e continua sendo — o que sai e o excesso. */
  padding: var(--space-6) var(--space-8);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(99,102,241,0.16), rgba(99,102,241,0.07));
  border: 1px solid rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 90px rgba(99, 102, 241, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}

.choke-band-name {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--text-primary);
}

.choke-band-claim {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-color);
}

/* --- os dois destinos --- */
.choke-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
  position: relative;
}

/* as correntes que saem da faixa para cada destino */
.choke-outcomes::before,
.choke-outcomes::after {
  content: "";
  position: absolute;
  top: calc(var(--space-10) * -1);
  width: 1px;
  height: var(--space-10);
}
.choke-outcomes::before { left: 25%; background: linear-gradient(180deg, var(--success-color), transparent); opacity: 0.55; }
.choke-outcomes::after  { left: 75%; background: linear-gradient(180deg, var(--danger-color), transparent); opacity: 0.4; }

.choke-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: 14px;
}

.choke-out--won {
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.choke-out--lost {
  background: rgba(255, 255, 255, 0.012);
  border: 1px dashed rgba(239, 68, 68, 0.28);
}

.choke-out-mark { width: 8px; height: 8px; border-radius: 50%; }
.choke-out--won .choke-out-mark { background: var(--success-color); box-shadow: 0 0 12px var(--success-color); }
.choke-out--lost .choke-out-mark { background: var(--danger-color); opacity: 0.6; }

.choke-out-label {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.choke-out--won .choke-out-label { color: var(--text-primary); }
.choke-out--lost .choke-out-label { color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .choke-bet, .js-observe-fade.visible .choke-bet { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .choke-bets { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .choke-bet { padding: var(--space-4) var(--space-2) calc(var(--space-8) + var(--space-2)); }
  .choke-drop { height: var(--space-8); }
  .choke-band { padding: var(--space-8) var(--space-5); }
  .choke-outcomes { margin-top: var(--space-8); }
  .choke-outcomes::before, .choke-outcomes::after { top: calc(var(--space-8) * -1); height: var(--space-8); }
}

@media (max-width: 560px) {
  .choke-bets { grid-template-columns: repeat(2, 1fr); }
  .choke-bet-note { display: none; }
  .choke-out { flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-3); text-align: center; }
  .choke-out-label { font-size: 0.9375rem; }
}

/* ==========================================================================
   ElasticCapacity v2 (rodada 9) — demanda oscila, custo e reta
   --------------------------------------------------------------------------
   Par visual com a GrowthPressure: la, embaixo de cada marco, a pilha engorda.
   Aqui, embaixo de cada pico, a marca e sempre a mesma. Mesma gramatica de
   "o que acontece debaixo da linha", argumento invertido.
   ========================================================================== */

.elastic {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.elastic-lane + .elastic-lane { margin-top: var(--space-10); }

.elastic-lane-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.elastic-lane-label--cost { color: var(--success-color); }

/* --- a demanda: barras que sobem e descem --- */
.elastic-bars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  align-items: end;
  height: 190px;
}

.elastic-bar-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: var(--space-3);
  text-align: center;
}

.elastic-bar {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--warning-color), rgba(245, 158, 11, 0.25));
  transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--n) * 90ms);
}

.js-observe-fade.visible .elastic-bar { height: var(--h); }

.elastic-at {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* --- o custo: uma reta, e a mesma marca em todos os pontos --- */
.elastic-flat { position: relative; height: 44px; }

.elastic-flat-line {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--success-color);
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 500ms;
}

.js-observe-fade.visible .elastic-flat-line { transform: scaleX(1); }

.elastic-marks {
  list-style: none;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.elastic-mark {
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--success-color);
  opacity: 0;
  transition: opacity 0.5s ease-out;
  transition-delay: calc(900ms + var(--n) * 70ms);
}

.js-observe-fade.visible .elastic-mark { opacity: 1; }

.elastic-flat-note {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.elastic-swap {
  max-width: var(--measure-read);
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* --- rodada 10: a MECANICA (os 4 tiers ficticios sairam daqui) ---
   Piso + rastro de incrementos. Forma tipografica de proposito: o trilho+fill
   ja e dos canais (.routing-matrix), e degrau contaria a historia errada. */
.dims {
  max-width: var(--content);
  margin: var(--stack-md) auto 0;
}

.dims-head {
  max-width: var(--measure-read);
  margin: 0 auto var(--space-10);
  text-align: center;
}

.dims-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.dims-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.dims-list { list-style: none; margin: 0; padding: 0; }

.dim {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
}

.dim:last-child { border-bottom: 1px solid var(--border-subtle); }

.dim-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.dim-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  min-width: 0;
}

.dim-floor {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-width: 210px; /* alinha o inicio dos dois rastros: 4,000 e 1 comecam no mesmo x */
}

.dim-floor-tag {
  font-size: 0.75rem;
  /* --text-secondary (7.9:1), nao --text-muted (4.2:1): AA em texto de 12px */
  color: var(--text-secondary);
}

.dim-floor-val {
  font-size: 3.25rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* o rastro: a granularidade e a ausencia de teto ditas pela forma.
   some na borda em vez de terminar — nao ha ultima caixinha. */
.dim-trail {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 96%);
}

.dim-step {
  flex: 0 0 auto;
  padding: 5px var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--t) * 55ms + 120ms);
}

/* Um unico mecanismo de esmaecimento: o mask do .dim-trail. Os passos continuam
   depois da borda e o mask corta o excedente — o desenho nunca tem um ultimo
   degrau. (Uma rampa de opacidade por chip alem do mask so embaralharia.) */
.js-observe-fade.visible .dim-step { opacity: 1; transform: none; }

.dim-note {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.dims-control {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin: var(--space-10) 0 0;
  padding: 0;
}

.dims-control-item {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.dims-control-term {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .elastic-bar { transition: none; height: var(--h); }
  .elastic-flat-line { transition: none; transform: scaleX(1); }
  .elastic-mark { transition: none; opacity: 1; }
  .dim-step { transition: none; transform: none; opacity: 1; }
}

@media (max-width: 768px) {
  .elastic-capacity-section h2 { font-size: 2.25rem !important; }
  .elastic { padding: var(--space-6) var(--space-5); }
  .elastic-bars { height: 140px; gap: 6px; }
  .elastic-marks { gap: 6px; }
  .elastic-at { font-size: 0.5625rem; }
  .dims { margin-top: var(--space-12); }
  .dims-head { margin-bottom: var(--space-8); }
  .dim { padding: var(--space-6) 0; }
  .dim-line { gap: var(--space-4); }
  .dim-floor { min-width: 130px; }
  .dim-floor-val { font-size: 2.5rem; }
  .dims-control { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ==========================================================================
   HumanNodeCapsule v2 (rodada 9) — A SINTESE: o dia em tres pistas
   --------------------------------------------------------------------------
   A terceira pista e o argumento. Ela esta vazia de proposito.
   ========================================================================== */

.sr-only-desc {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.day {
  max-width: var(--content);
  margin: 0 auto;
  /* r47: o topo tinha 64 de respiro pra regua de 24h; com os rotulos na coluna
     da esquerda a regua ganhou ar lateral e 32 bastam. */
  padding: var(--space-6) var(--space-8) var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.day-scale {
  position: relative;
  height: 18px;
  margin-bottom: var(--space-4);
}

.day-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.day-tick:first-child { transform: none; }
.day-tick:last-child { transform: translateX(-100%); }

/* r47: a faixa era TRES linhas empilhadas — nome, trilho, nota — vezes tres
   faixas. O rotulo desce pra uma coluna a esquerda, alinhado ao trilho, e a
   faixa passa a ocupar a altura do proprio trilho. Mesma informacao, mesma
   ordem de leitura, um terco a menos de altura. */
.day-lane {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
}

.day-lane + .day-lane { margin-top: var(--stack-sm); }

.day-lane-name {
  display: block;
  grid-column: 1;
  align-self: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.day-lane > .day-track { grid-column: 2; grid-row: 1; }
.day-lane > .day-lane-note { grid-column: 2; grid-row: 2; }

/* a regua de 24h alinha com os trilhos, nao com a coluna de rotulos */
.day-scale { margin-left: calc(132px + var(--space-5)); }

.day-lane-name--empty { color: var(--text-secondary); }
.day-lane > .day-lane-name { grid-row: 1 / span 2; }

.day-track {
  position: relative;
  height: 62px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.day-block {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--space-4);
  border-radius: 8px;
  opacity: 0;
  transform: scaleX(0.94);
  transform-origin: left;
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
  transition-delay: calc(var(--n) * 110ms);
}

.js-observe-fade.visible .day-block { opacity: 1; transform: scaleX(1); }

.day-block--ai {
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.day-block--human {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.42);
  transition-delay: calc(400ms + var(--n) * 110ms);
}

.day-block-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.day-block-sub {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* a pista vazia: hachura discreta e uma palavra */
.day-track--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 8px, transparent 8px 16px);
}

.day-empty-label {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.day-lane-note {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.synth-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: var(--content);
  margin: var(--space-8) auto 0;
}

.synth-card {
  padding: var(--space-6);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
}

.synth-card-tag {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-color);
  margin-bottom: var(--space-3);
}

.synth-card-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .day-block, .js-observe-fade.visible .day-block { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .day { padding: var(--space-6) var(--space-5); }
  .day-track { height: 54px; }
  .day-block { padding: 0 var(--space-2); }
  .day-block-sub { display: none; }
  .day-block-label { font-size: 0.6875rem; }
  .synth-pair { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .human-node-section h2 { font-size: 2.25rem !important; }
  .day-track { height: 46px; }
  .day-block-label { font-size: 0.5625rem; }
}

/* ==========================================================================
   RITMO (rodada 9)
   --------------------------------------------------------------------------
   A sintese nasceu como a secao MAIS DENSA da pagina (14.3) — o oposto exato do
   que ela precisa transmitir. Alivio de responsabilidade nao se le apertado.
   E keep-stack voltou a 11.0 depois do conteudo devolvido na rodada 8.
   Remedio: ar, nos dois casos.
   ========================================================================== */

.human-node-section .day { padding: var(--space-12) var(--space-10) var(--space-10); }
.human-node-section .day-lane + .day-lane { margin-top: var(--stack-sm); }
.human-node-section .day-track { height: 68px; }
.human-node-section .synth-pair { margin-top: var(--stack-sm); gap: var(--space-5); }
.human-node-section .synth-card { padding: var(--space-6); }

.keep-stack-section .level--mapped { margin-top: var(--stack-md); }
/* r47: 96 de respiro vertical em volta de um desenho de 338px de conteudo. */
.keep-stack-section .branch { padding: var(--space-8) var(--space-8); }

@media (max-width: 900px) {
  /* abaixo de 900 a coluna de rotulo comeria o trilho: volta a empilhar */
  .day-lane { display: block; }
  .day-lane-name { margin-bottom: var(--space-3); }
  .day-scale { margin-left: 0; }

  .human-node-section .day { padding: var(--space-6) var(--space-5); }
  .human-node-section .day-lane + .day-lane { margin-top: var(--space-6); }
  .human-node-section .day-track { height: 54px; }
  .human-node-section .synth-card { padding: var(--space-5); }
  .human-node-section .synth-pair { margin-top: var(--space-6); }
  .keep-stack-section .level--mapped { margin-top: var(--space-10); }
  .keep-stack-section .branch { padding: var(--space-6) var(--space-5); }
}

/* o trace segue a sintese: dois picos colados. Ar no trace desfaz o par. */
.compounding-intelligence-section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.compounding-intelligence-section .trace { padding: var(--space-10); }
.compounding-intelligence-section .trace-step { padding: var(--space-5) 0 var(--space-5) var(--space-6); }
.compounding-intelligence-section .trace-sources { margin-top: var(--space-8); padding: var(--space-8); }

@media (max-width: 768px) {
  .compounding-intelligence-section .trace { padding: var(--space-5); }
  .compounding-intelligence-section .trace-step { padding: var(--space-4) 0 var(--space-4) var(--space-5); }
  .compounding-intelligence-section .trace-sources { padding: var(--space-5); margin-top: var(--space-5); }
}

/* ════════════════════════════════════════════════════════════════════════════
   RODADA 13 — HERO: A TELA DO CUSTOMER-DASHBOARD, nao um desenho dela.

   Todo valor abaixo foi COPIADO do dashboard rodando (localhost:3001) — do
   computed style e do CSS-fonte. Os seletores levam prefixo `rz-` so pra nao
   colidir com as classes da home; a geometria, as cores, os raios, as sombras,
   os pesos e os espacamentos sao os de la, sem estimativa. Fontes por bloco:
     sidebar ....... css/dashboard-v2.css:112-166,213-270
     palco ......... .main-content + .ov-stage-wrapper
     hero card ..... css/overview-2030.css:476-489 + overview-executive.css
     ilha/orbita ... css/overview-executive.css:816-864,924-933
     bento/card .... css/overview-executive.css:406-520,535-555
   ════════════════════════════════════════════════════════════════════════════ */

/* — o palco da home: profundidade atras da janela — */
.hero-stage { position: relative; overflow: hidden; }

.hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-aurora-a,
.hero-aurora-b {
  position: absolute;
  width: 80vw;
  height: 80vh;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.5;
}
/* ⚠️ O MAIOR ROXO DE TODOS, e nao vinha do mock: um campo indigo de 80vw por
   80vh a .20, com `blur(150px)`, por tras da cena inteira do heroi. E ele o
   "arroxeado em volta do dash". Passa a ardosia fria: o campo continua la —
   e ele que da profundidade ao heroi e o par com o verde do `-b` — mas deixa
   de ter a cor que a marca abandonou. */
.hero-aurora-a {
  top: -22%; left: -12%;
  background: radial-gradient(circle, rgba(150, 162, 186, 0.16) 0%, transparent 70%);
  animation: heroMeshA 22s infinite alternate ease-in-out;
}
.hero-aurora-b {
  bottom: -26%; right: -12%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.13) 0%, transparent 70%);
  animation: heroMeshB 27s infinite alternate-reverse ease-in-out;
}
@keyframes heroMeshA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(12vw, 8vh) scale(1.18); }
}
@keyframes heroMeshB {
  0%   { transform: translate(0, 0) scale(1.15); }
  100% { transform: translate(-12vw, -8vh) scale(1); }
}

/* ── A CENA, ANCORADA NO CONTAINER (r49) ───────────────────────────────────
   Antes: `width: 95%` da VIEWPORT com teto de 1520. Como a coluna de texto e
   fixa em 1296 e a cena seguia a tela, a folga entre as duas nao era uma
   decisao — era um residuo aritmetico, e mudava de sinal pelo caminho:

     viewport 1904 → coluna 1296, cena 1520 → folga +112 por lado
     viewport 1424 → coluna 1296, cena 1353 → folga  +28
     viewport 1264 → coluna 1216, cena 1201 → folga   −8  (mais ESTREITA)

   Por isso lia descentralizado: o titulo obedecia o container e o aparelho
   obedecia a tela. Sao dois eixos diferentes na mesma dobra.

   Agora a cena e a COLUNA + `--hero-bleed` de cada lado — a relacao da Linear
   (1282 de coluna, 1320 de moldura, ~19 de folga). A folga vira constante em
   qualquer largura, e o segundo termo do `min()` mantem isso valido quando a
   viewport e menor que o container e quem manda passa a ser a goteira.

   A moldura estreita 1520 → 1336, mas o CONTEUDO nao encolhe um pixel: o
   .rz-stage ja era travado em 1200, entao o que sai sao os 105px de folga
   morta que sobravam de cada lado dentro do aparelho. O palco passa a ocupar
   90% da moldura, contra 79% antes — o dashboard fica mais CHEIO, nao menor.
   O que ele perde em envergadura recupera em densidade e em profundidade
   (a sombra abaixo).                                                        */
.hero-scene {
  position: relative;
  z-index: 1;
  width: min(
    calc(var(--content) + 2 * var(--hero-bleed)),
    calc(100% - 2 * var(--gutter) + 2 * var(--hero-bleed))
  );
  margin: 0 auto;
}



/* ── O PAINEL ─────────────────────────────────────────────────────────────
   r50 — antes isto era uma MOLDURA: `background: #000` com `padding: 16px`,
   e dentro dela a interface (.rz-sidebar e .rz-main, ambas em #0A0A0C, cada
   uma com raio, borda e sombra propria) flutuava. Dois fundos, duas bordas
   arredondadas, e entre os dois uma faixa preta de 16px em volta de tudo.

   A Linear nao tem essa camada: o painel arredondado E a interface. Medido
   em `.JgFxua_frame` — raio 12, padding 8, fundo rgb(9,10,11), sem borda e
   sem box-shadow proprio; a borda de 1px rgba(255,255,255,0.08) vive na
   camada `.frameBackground` que preenche o painel; a sidebar (`.M1bpsa_sidebar`)
   e TRANSPARENTE, raio 0, sem borda, encostada no padding; so a area de
   conteudo (`.JgFxua_view`) e um cartao embutido, raio 7.

   Aqui: o padding morre, sobra UM fundo (o do painel), e o raio + a borda +
   a sombra ficam neste elemento. A sidebar e o palco encostam nas bordas e
   quem os recorta e o `overflow: hidden` daqui, contra o raio de 28.       */
.rz-app {
  position: relative;
  /* ⚠️ SEM AURORA AQUI, E FOI ERRO MEU TE-LA POSTO. O founder: *"esse dash
     na homepage ta absurdamente verde, nao procede com o dashboard real."*
     E procedia mesmo — eu tinha copiado o `.ov-spatial-aurora-bg` do produto
     para o fundo deste painel, mas LA ELA ESTA ATRAS DE UM PAINEL OPACO
     (`.app-main`, #0A0A0C) e nao contribui NADA. Trazida para ca ficava
     visivel, e empilhava mais uma camada de verde por cima do banho, dos
     halos e do plasma — quatro verdes onde o produto tem tres.

     A licao: copiar uma camada que existe no produto nao e o mesmo que copiar
     o que se VE no produto. Uma camada ocluida faz parte do codigo dele, nao
     da imagem dele. */
  /* ⚠️ PRETO A SERIO (#050507), e nao o #0A0A0C. O founder: *"perdeu o WOW,
     ta mt cinzento, sera que nao dava para deixar black mesmo?"* — e a causa
     nao era o painel, era a LUZ: ver a nota no `.rz-main`. O chao mais fundo
     e a metade da correccao. */
  background: #050507;
  border-radius: 28px 28px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  overflow: hidden;
  /* r49 — a moldura estreitou 184px; a presenca volta pela profundidade, nao
     pela largura. Quatro camadas, do vidro pra fora: fio de luz na aresta de
     cima (a mesma linguagem do .rz-sidebar), halo indigo mais aberto, contato
     curto logo abaixo, e a sombra de chao que ja existia. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    /* ⚠️ este halo era INDIGO (`rgba(99,102,241,.16)`) e e ele que fazia o ar
       a volta do painel ler arroxeado. Mesma razao do resto: cor antiga. Fica
       o mesmo halo, em luz neutra — o painel continua a levitar, sem tingir
       o que esta em volta. */
    0 -10px 80px rgba(190, 200, 220, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.60),
    0 40px 120px rgba(0, 0, 0, 0.85);
  text-align: left;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  /* o tom herdado do produto e `--text-primary` (#EDEDEF); a home passava o
     #F4F4F5 dela, e a peca inteira ficava meio grau mais clara que o dash. */
  color: #EDEDEF;
}

/* ── SIDEBAR (dashboard-v2.css:112-135) ───────────────────────────────────
   76px colapsada, 260px no hover — o "PURE APPLE IOS THICK GLASS".
   r50 — encosta na aresta esquerda e no topo (era `top/left: 16`, o recuo da
   moldura). O VIDRO fica: e o material da barra, nao a moldura. O que sai e
   o que a fazia ler como cartao solto — raio proprio, borda e sombra de
   queda. Os brilhos internos continuam (sao o vidro), e o canto superior
   esquerdo passa a ser recortado pelo raio do painel, como na Linear.      */
.rz-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 76px;
  background: rgba(45, 45, 52, 0.25);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  z-index: 100;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    inset -1px -1px 2px rgba(0, 0, 0, 0.4);
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1),
              background 0.4s ease;
  overflow-x: hidden;
  white-space: nowrap;
}
/* ⚠️ R14 — O GATILHO E A PROPRIA SIDEBAR, nao a cena.
   Antes era `.rz-app:hover .rz-sidebar`: passar o mouse em QUALQUER canto da
   janela abria a barra. No dashboard o seletor e `.app-sidebar:hover`
   (dashboard-v2.css:137) — a barra reage a si mesma. Corrigido pra isso. */
.rz-sidebar:hover {
  width: 260px;
  background: rgba(45, 45, 52, 0.35);
  /* r50 — no aberto ela ganha peso pelo tom, nao por sombra de queda: a
     barra nao flutua mais sobre uma moldura, ela e a propria borda. */
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    inset -1px -1px 2px rgba(0, 0, 0, 0.4);
}

/* r112: o eixo da marca tem de ser o dos icones de navegacao -- estava 5px a
   esquerda. Os dois contentores comecam no mesmo x (12px), medido:
     icone: padding 16 + caixa 24 -> mas o glifo desenha 25,2 e o centro
            optico cai em 41 da borda da barra;
     marca: 12 (contentor) + 14 (este padding) + 15 (metade de 30) = 41.
   O padding-left deixou de ser um espacamento e passou a ser o resultado
   dessa conta: se o tamanho da marca ou do icone mudar, recalcula-se. */
.rz-brand {
  padding: 0 10px 32px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 236px;
  flex-shrink: 0;
}
/* r111: era um quadrado de gradiente violeta a fazer de logotipo. Passou a
   ser A MARCA -- as sete camaras, o mesmo desenho das outras oito
   superficies (docs/00-product/RAZVIEL_MARCA.md). Sem placa, sem raio,
   sem sombra: a marca aparece sozinha, na cor do texto. */
.rz-brand-logo {
  /* 30 e nao 28: os icones deste mock desenham a 25,2 (o glifo transborda a
     caixa de 24). 28 x (25,2/24) = 29,4. Mesma relacao optica que no dash. */
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
  color: var(--text-primary, #fff);
}
.rz-brand-name,
.rz-nav-text,
.rz-user-name {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rz-sidebar:hover .rz-brand-name,
.rz-sidebar:hover .rz-nav-text,
.rz-sidebar:hover .rz-user-name {
  opacity: 1;
  transition-delay: 0.1s;
}
.rz-brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 1rem; color: #EDEDEF; }

.rz-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.rz-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  color: #A1A1AA;
  font-size: 1rem;
  font-weight: 400;
  border: 1px solid transparent;
  margin-bottom: 4px;
  width: 240px;
  gap: 12px;
}
.rz-nav-item.is-active { color: #fff; font-weight: 700; }

.rz-nav-icon { width: 24px; height: 24px; flex-shrink: 0; color: #A1A1AA; display: inline-flex; }
.rz-nav-icon svg { width: 22px; height: 22px; }
/* a r113 do dash tirou o salto: com icone de linha ele engrossa o traco e
   denuncia o truque. E o tom e `--text-primary` (#EDEDEF), nao #fff. */
.rz-nav-item.is-active .rz-nav-icon { color: #EDEDEF; }

.rz-user { display: flex; align-items: center; gap: 12px; padding: 0 6px; width: 236px; flex-shrink: 0; }
.rz-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #EDEDEF;
}
.rz-user-name { font-size: 0.8125rem; color: #A1A1AA; }

/* ── PALCO (.main-content + .ov-stage-wrapper) ──────────────────────────────
   r50 — era o segundo nivel de fundo, com raio e borda propria: e ele, junto
   com a sidebar, que a faixa preta de 16px contornava. Agora o fundo e um so
   (o do .rz-app, mesmo #0A0A0C), e o palco corre ate o topo, a direita e a
   base. O recuo que sobra e o padding natural da interface — o do .rz-stage,
   24/40, que ja era do dashboard real. */
/* ⚠️ O ENQUADRAMENTO FICA RENTE, decisao do founder: *"coloca ele sem bordas
   igual tava, porque combina melhor com a pagina."* Ou seja: NAO se copia do
   produto a estrutura de dois cartoes a flutuar sobre preto (recuo 16, raio
   20, borda) — a moldura da homepage e um painel unico e a barra encosta
   nele, que e a linguagem da pagina. O que se copia do produto e a MATERIA:
   o banho ambiente, o vidro do heroi e a marca do item activo.

   O banho vai no registo `ios-suave` — o verde a um terco (.05 em vez de .15)
   e o indigo a .06 — porque *"e mais dark e combina com a pagina"*. A FORMA
   e a mesma do produto (os dois focos e a lambida de luz); so a intensidade
   desce. Sem ele os cartoes de vidro nao tem o que filtrar e o palco le
   chapado — foi o defeito que o founder apanhou tres vezes. */
.rz-main {
  margin-left: 76px;
  min-height: 620px;
  overflow: hidden;
  /* ⚠️ AOS VALORES DO PRODUTO, e nao a um terco deles. Eu tinha aplicado aqui
     o registo `ios-suave` — uma VARIANTE QUE NAO EXISTE: o dashboard ficou no
     `actual`. Copiar uma variante descartada nunca ia dar identico, e o
     founder viu-o logo: *"e um envidracado fraco; identico nao e vou colocar
     um vidrin aqui mais ou menos."* */
  /* ⚠️ O ROXO SAI DO FUNDO — e residuo da identidade ANTIGA. O founder:
     *"essa era a cor meio que antiga, de quando o icone era roxo e se assumiu
     que a cor da Razviel era pique roxo. Depois do icone branco esse roxo nao
     entra mais FORA DOS ELEMENTOS."* Ele fica onde e elemento (o token
     `--accent-color: #6366F1` continua a servir badges, pontos e cartoes por
     todo o site); o que sai e o CAMPO — a mancha violeta grande por tras do
     heroi, que pintava a peca inteira de uma cor que a marca ja nao tem.
     No lugar dele, um cinzento frio: mantem os dois focos e a profundidade
     que eles dao, sem cast nenhum. E o registo da Linear — superficie quase
     neutra, cor so onde ela significa. */
  /* ⚠️ A PRIORIDADE INVERTEU-SE AQUI, e e uma decisao e nao um descuido.
     Durante varias levas o alvo foi "identico ao dashboard", e a cor foi
     copiada ao valor do produto. O founder mudou o criterio: *"o dash da
     homepage continua muito esverdeado, deixa ele para casar com a
     homepage."* Ou seja: onde a fidelidade ao produto e a coerencia com a
     pagina se contradizem, **ganha a pagina** — este objecto vive num heroi
     quase preto e neutro, e um campo verde a .15 fazia dele uma ilha.

     O que NAO muda: a FORMA. Os dois focos, a lambida de luz de cima, a
     ardosia a 25%/-10%. Baixar o verde nao pode virar apagar o campo — foi
     esse o erro da variante `ios` que ele reprovou, e um palco chapado nao e
     "mais dark", e mais pobre. O vidro dos cartoes continua a ter o que
     filtrar; so deixa de ter uma cor a gritar. */
  /* ⚠️ FUNDO NEUTRO — o registo `ios` dos testes do dashboard. O founder:
     *"deixa a parada mais dark para combinar com a pagina, igual aquela
     versao que tu tinha feito, o ios leve."* Baixar o verde ja nao chegava:
     ele sai do FUNDO por completo, e o campo passa a ser so luz.

     ⚠️ O CAMPO CONTINUA A EXISTIR, e e essa a diferenca entre isto e apagar.
     Os dois focos e a lambida de luz ficam, em branco: sem eles o palco fica
     chapado, o vidro dos cartoes nao tem o que filtrar e volta o "envidracado
     fraco" que ele apanhou tres vezes. Neutro nao e ausencia — e cor sem
     matiz.

     O verde continua onde e SINAL: os icones, os "Value Generated", os
     "Handled". Retirado do ambiente, ele volta a querer dizer alguma coisa —
     e o mesmo argumento que o founder fez sobre a pastilha do menu. */
  /* ⚠️ O CINZENTO NAO VINHA DE HAVER LUZ — VINHA DE ELA SER LARGA E FRACA.
     Branco a 3% espalhado por 70% do palco nao le como brilho: le como um veu
     leitoso por cima de tudo, e e exactamente isso que mata o impacto. A
     mesma quantidade de luz, CONCENTRADA, le como um realce.

     Entao: o raio cai (70%/60% -> 42%/38%), a intensidade sobe (.030 -> .07)
     e o veu de cima sai. O resultado tem MENOS luz total e MAIS presenca —
     preto quase todo, com dois pontos onde ele acende. E a diferenca entre
     iluminar uma sala e apontar um foco. */
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.07), transparent 42%),
    radial-gradient(circle at 22% -6%, rgba(255, 255, 255, 0.05), transparent 38%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.02);
}
.rz-stage { max-width: 1200px; margin: 0 auto; padding: 24px 40px 0; }

/* ── HERO CARD (overview-2030.css:476-489) ────────────────────────────────── */
.rz-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* o vidro do produto (`.ov-pulse-hero`), medido: estava tudo meio grau
     abaixo e o cartao lia mate — metade do desfoque, sem saturacao, e a
     borda a 3% quando no produto e 15%, que e a aresta viva que lhe da
     espessura. A sombra faltava por inteiro, e e ela que o faz assentar. */
  background: rgba(15, 15, 20, 0.6);
  backdrop-filter: blur(80px) saturate(2);
  -webkit-backdrop-filter: blur(80px) saturate(2);
  border-radius: 40px;
  /* ⚠️ A BORDA DO PRODUTO NAO E UNIFORME — e um degrade de brilho: forte em
     cima, media a esquerda, quase nada a direita e em baixo. E o que simula
     luz a bater de cima na aresta do vidro. Uniforme a 15% le como contorno
     desenhado; assim le como material. Medido no `.ov-pulse-hero`, e sao
     exactamente os mesmos quatro valores do `.exec-glass-card`. */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.01);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.8);
  padding: 40px 32px 40px 40px;
  min-height: 320px;
  overflow: hidden;
}

/* time filter: absoluto em top/right 40px (overview-executive.css:2425) */
.rz-time {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 400;
  /* ⚠️ DESVIO DECLARADO da copia fiel: no produto e rgba(255,255,255,0.4),
     que composto sobre o hero da 3.75:1 — abaixo de AA. Subido para 0.5
     (5.32:1). Unico jeito de manter a regra de contraste da pagina sem
     redesenhar o controle; a diferenca visual e imperceptivel. */
  color: rgba(255, 255, 255, 0.5);
}
.rz-time svg { width: 13px; height: 13px; }

.rz-hero-content { position: relative; z-index: 6; max-width: 600px; flex: 1; }

/* .exec-hero-pretitle — "Space Mono" nao e carregada nem no dashboard, entao o
   fallback monospace e o que renderiza LA tambem: mesmo resultado. */
.rz-pretitle {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.2px;
  font-weight: 600;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.rz-hero-title {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -1.68px;
  line-height: 61.6px;
  color: #fff;
  margin: 12px 0 0;
  max-width: 12ch;
}
.rz-hero-sub {
  font-size: 17.6px;
  font-weight: 400;
  line-height: 26.4px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
  max-width: 46ch;
}
.rz-pills { display: inline-flex; gap: 0; margin-top: 24px; }
.rz-pill {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 6px 16px;
  border-radius: 18px;
  /* ⚠️ DESVIO DECLARADO: no produto e rgba(255,255,255,0.4) COM opacity .6,
     que da ~1.96:1 composto. Aqui o alfa efetivo sobe para 0.5 (5.32:1) e a
     opacity sai. A hierarquia com o pill ativo (#fff, 20:1) continua obvia. */
  color: rgba(255, 255, 255, 0.5);
}
.rz-pill.is-active { color: #fff; opacity: 1; }

/* ── A ORBITA + A ILHA (overview-executive.css:816-864,924-933) ───────────── */
.rz-island-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.rz-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  border-radius: 50%;
  /* ⚠️ O CONICO DO PRODUTO, AO VALOR. O founder: *"deixa a orbita igual e no
     dash do cliente, mais viva — acho que e por isso que ainda ta parecendo
     um pouco preto e branco."* E estava certo, e a causa era minha: quando
     tirei o roxo do fundo, troquei tambem a ponta deste conico (`#312E81`)
     por um ardosia escuro. So que **num conico o que da vida e o ALCANCE
     entre os extremos** — tirei-lhe o extremo e ficaram quatro tons quase
     iguais a rodar, ou seja cinzento a girar.

     ⚠️ E COERENTE COM A REGRA DO ROXO, nao e uma excepcao a ela: a regra que
     o founder deu foi *"o roxo nao entra mais FORA DOS ELEMENTOS"*. Este orbe
     E o elemento — e a ilha da AI Core. O que saiu, e continua fora, e o
     roxo do AMBIENTE: o banho, a aurora da pagina, o halo do painel e o halo
     de dentro dos cartoes. Aqui ele e um acento contido, e agora que tudo em
     volta e neutro le-se como acento e nao como mancha.

     Os 210px tambem sao do produto (eu tinha posto 261 por ter medido a
     caixa de um elemento em ROTACAO: um quadrado a rodar 45 graus da um
     rectangulo envolvente de 210x1,41 = 297, e eu li isso como largura). */
  background: conic-gradient(from 0deg at 50% 50%, #312E81, #0F172A, #0EA5E9, #1E293B, #312E81);
  filter: blur(22px);
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
  animation: rzOrbSpin 8s linear infinite;
}
@keyframes rzOrbSpin { to { transform: rotate(360deg); } }

/* ⚠️ O PLASMA — o heroi do produto tem DUAS camadas por tras, e o mock so
   tinha o blob conico. Sem esta, o vidro do heroi nao tem o que filtrar.
   No registo `ios-suave`: esmeralda a .18 e nao a .4, opacidade .40. */
.rz-plasma {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 655px;
  height: 454px;
  margin: -276px 0 0 -168px;
  border-radius: 50%;
  /* neutro. Continua a existir porque e ele que o vidro do heroi filtra —
     sem plasma o cartao do heroi volta a ler como placa. */
  /* o plasma e o ponto ALTO da cena — a seguir ao orbe azul e o que mais
     acende. Sobe, e nao desce: e ele que faz o heroi ter um centro. */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0) 66%);
  filter: blur(120px);
  opacity: 0.42;
  z-index: 1;
  pointer-events: none;
  animation: rzPlasmaBreathe 9s ease-in-out infinite;
}
@keyframes rzPlasmaBreathe {
  0%, 100% { opacity: 0.34; transform: scale(1); }
  50%      { opacity: 0.50; transform: scale(1.06); }
}

/* o soul blob do produto mede 210 */
.rz-orb { width: 210px; height: 210px; margin: -105px 0 0 -105px; }

.rz-island {
  position: relative;
  z-index: 10;
  width: 280px;
  height: 56px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.rz-island-spark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #10B981;
  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2));
}
.rz-island-spark svg { width: 100%; height: 100%; }
.rz-island-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
/* O cursor: unico elemento que pisca, e nao carrega informacao. */
.rz-caret {
  width: 1.5px;
  height: 17px;
  background: rgba(255, 255, 255, 0.6);
  margin-left: -8px;
  animation: rzCaret 1.15s steps(1, end) infinite;
}
@keyframes rzCaret { 0%, 45% { opacity: 0.9; } 46%, 100% { opacity: 0; } }

/* ── BENTO (.exec-bento-grid) ─────────────────────────────────────────────── */
.rz-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-bottom: 0;
}
.rz-card--2x2 { grid-column: span 2; grid-row: span 2; }
.rz-card--2x1 { grid-column: span 2; grid-row: span 1; }
.rz-card--1x1 { grid-column: span 1; grid-row: span 1; }


/* ── CARD (.exec-glass-card:406-475) — o vidro, valor por valor ───────────── */
.rz-card {
  position: relative;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  background: rgba(15, 15, 18, 0.2);
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border-radius: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.01);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--n) * 70ms + 700ms);
}

/* ⚠️ O HALO DE DENTRO — faltava POR INTEIRO, e e a peca que mais pesa no
   "envidracado fraco". No produto cada `.exec-glass-card` carrega um
   `.ov-bento-glow-*`: um radial ENORME (200% x 200%, ancorado a -50%/-50%)
   a 4% de verde ou de roxo, por baixo do conteudo. E ele que poe luz colorida
   DENTRO do cartao — sem ele o vidro tem o que filtrar por tras, mas nao tem
   nada dentro, e le-se como uma placa translucida em vez de um volume.

   Medido no produto: quatro halos, verde na maioria e roxo num. Aqui sai por
   `::before` (o `::after` esta livre e o `.rz-card-sheen` e um elemento a
   parte), com a mesma geometria e a mesma opacidade. */
.rz-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  /* neutro, e NAO removido: o halo e o que da volume ao cartao — tira-lo
     deixa-o uma placa lisa. Perde a cor, mantem a materia. */
  /* mesmo raciocinio a escala do cartao: mais apertado e mais forte. */
  background: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.055) 0%, transparent 42%);
}
/* o quarto cartao levava o halo roxo do produto; passa ao verde dos irmaos
   pela mesma razao — dentro do cartao tambem e fundo, nao elemento. */

/* o especular diagonal do .exec-glass-card::after — aqui ele varre devagar */
.rz-card-sheen {
  position: absolute;
  inset: -40% -120%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.03) 46%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 60%);
  animation: rzSheen 14s ease-in-out infinite;
  animation-delay: calc(var(--n) * 900ms);
}
@keyframes rzSheen {
  0%, 62%   { transform: translateX(-38%); }
  88%, 100% { transform: translateX(38%); }
}

/* .ov-bento-title — 15.2px / 500 / ls .304px / rgba(255,255,255,.7) / UPPER */
.rz-card-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.2px;
  font-weight: 500;
  letter-spacing: 0.304px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}

/* .exec-icon-badge — 28x28, circulo solido, glow da propria cor */
.rz-badge {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.rz-badge svg { width: 14px; height: 14px; }
.rz-badge--green  { background: #10B981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }
.rz-badge--accent { background: #6366F1; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }

/* R14 — O SLOT DO VALOR E UM SKELETON, nao um rotulo gigante.
   Antes eu punha o primaryLabel ("Value Generated") nos 44px do numero: quebrava
   a proporcao e nao parecia o dashboard. Agora o slot mantem a ALTURA do valor
   real e recebe o skeleton do proprio produto — css/ui-states.css:13-32,
   copiado stop a stop: gradiente 90deg rgba(255,255,255,.04)/.09/.04, background
   -size 400px 100%, ui-shimmer 1.6s infinite linear, radius 6px. E um estado
   REAL da interface (carregando), entao nao afirma dado nenhum. */
.rz-card-value {
  position: relative;
  z-index: 1;
  height: 34px;              /* a caixa que o numero de 44px/lh 1 ocupa */
  width: 52%;
  max-width: 220px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 400px 100%;
  animation: rzShimmer 1.6s infinite linear;
}
@keyframes rzShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* .ov-bento-trend — 13.6px / 500 / #2E9B68. E AQUI que o primaryLabel mora no
   card real ("Value Generated • 13.4x Platform ROI"); entra so o rotulo. */
.rz-card-trend {
  position: relative;
  z-index: 1;
  font-size: 13.6px;
  font-weight: 500;
  line-height: 16px;
  color: #2E9B68;
  margin-bottom: 8px;
}

/* .ov-bento-desc — 13.6px / rgba(255,255,255,.5) / lh 20.4px.
   margin-top:auto reproduz o card real: titulo+valor no topo, indicadores
   ancorados na base (e o que abre o respiro no card 2x2). */
.rz-card-desc {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13.6px;
  line-height: 20.4px;
  color: rgba(255, 255, 255, 0.5);
}

/* O card gigante: no dashboard ele mantem o valor grande e brilhante enquanto
   os menores ficam esmaecidos (super-card.render.js exec-dimmed). */
.rz-card--1x1 .rz-card-value { height: 24px; width: 62%; }
.rz-card--1x1 .rz-card-title { font-size: 13.6px; margin-bottom: 16px; }
.rz-card--1x1 .rz-card-trend { font-size: 12px; line-height: 15px; }
.rz-card--1x1 .rz-card-desc { font-size: 12px; line-height: 18px; }

@media (max-width: 1200px) {
  .rz-stage { padding: 20px 24px 0; }
  .rz-hero { padding: 32px; border-radius: 32px; min-height: 280px; }
  .rz-time { top: 24px; right: 24px; }
  .rz-hero-title { font-size: 44px; line-height: 48px; letter-spacing: -1.3px; }
  .rz-hero-sub { font-size: 16px; line-height: 24px; }
  .rz-card { padding: 22px; border-radius: 28px; }
  .rz-card-value { height: 28px; }
  .rz-card--1x1 .rz-card-value { height: 20px; }
}

@media (max-width: 900px) {
  /* A sidebar sai: em tela estreita o produto E a Pulse. */
  .rz-sidebar { display: none; }
  .rz-main { margin-left: 0; }
  .rz-hero { flex-direction: column; align-items: flex-start; gap: 24px; }
  .rz-island-wrap { justify-content: flex-start; width: 100%; flex: 0 0 56px; }
  .rz-hero-content { max-width: none; }
  .rz-hero-title { font-size: 36px; line-height: 40px; letter-spacing: -1px; max-width: none; }
}

@media (max-width: 640px) {
  .rz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rz-card--2x2 { grid-column: span 2; grid-row: span 1; }
  .rz-card--2x1 { grid-column: span 1; }
  .rz-card { padding: 18px; border-radius: 22px; }
  .rz-card-title { font-size: 12px; margin-bottom: 14px; gap: 8px; }
  .rz-badge { width: 22px; height: 22px; flex: 0 0 22px; }
  .rz-badge svg { width: 11px; height: 11px; }
  .rz-card-value, .rz-card--1x1 .rz-card-value { height: 18px; width: 58%; }
  .rz-card-trend, .rz-card--1x1 .rz-card-trend { font-size: 11px; line-height: 14px; }
  .rz-card-desc, .rz-card--1x1 .rz-card-desc { font-size: 11px; line-height: 16px; }
  .rz-hero { padding: 24px; border-radius: 24px; min-height: 0; }
  .rz-time { position: static; padding: 0; margin-bottom: 4px; }
  .rz-hero-title { font-size: 28px; line-height: 32px; }
  .rz-hero-sub { font-size: 14px; line-height: 21px; }
  .rz-island { width: 100%; }
  .rz-app { border-radius: 20px 20px 0 0; }
}

/* Com movimento desligado a cena PARA numa pose composta — e como nada do que
   se move carrega informacao, nada se perde. */
@media (prefers-reduced-motion: reduce) {
  .rz-card { opacity: 1; transform: none; animation: none; }
  .hero-aurora-a, .hero-aurora-b, .rz-orb, .rz-plasma, .rz-card-sheen, .rz-caret { animation: none; }
  /* o skeleton para de varrer, mas o bloco continua la: o estado se le igual */
  .rz-card-value { animation: none; background-position: 0 0; }
  .hero-aurora-a { transform: translate(6vw, 4vh) scale(1.09); }
  .hero-aurora-b { transform: translate(-6vw, -4vh) scale(1.07); }
  .rz-card-sheen { transform: translateX(-10%); }
  .rz-caret { opacity: 0.9; }
  .rz-sidebar, .rz-brand-name, .rz-nav-text, .rz-user-name { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RODADA 11 — DEPLOYMENT: a implantacao sem atrito.
   Contraste TIPOGRAFICO, nao de caixa: massa monoespacada e densa a esquerda,
   ar e corpo grande a direita, e o vazio abaixo dos quatro movimentos e o
   argumento. Nenhum trilho, nenhum chip, nenhuma lista numerada — as vizinhas
   ja usam essas formas.
   ════════════════════════════════════════════════════════════════════════════ */

.deployment-section .dep {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.35fr);
  gap: var(--space-16);
  align-items: stretch;
  max-width: var(--content);
  margin: var(--space-12) auto 0;
}

.dep-col-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* --text-secondary (7.9:1) e nao --text-muted (4.2:1): AA em texto de 11px */
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
}
.dep-col-label--here { color: var(--text-primary); }

/* — a massa — */
.dep-usual-list { list-style: none; margin: 0; padding: 0; }

.dep-usual-item {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  /* r47: a entrelinha larga E o argumento (a lista tem que PARECER longa), mas
     2,55 em dezesseis itens custava 530px. Em 2,1 ela continua sendo a coluna
     comprida ao lado dos quatro movimentos, que e o contraste que importa. */
  line-height: 2.1;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: calc(var(--n) * 26ms);
}
.js-observe-fade.visible .dep-usual-item { opacity: 1; transform: none; }

/* — o ar — */
.dep-here { display: flex; flex-direction: column; }

.dep-moves { list-style: none; margin: 0; padding: 0; }

.dep-move {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--n) * 110ms + 160ms);
}
.dep-move + .dep-move { margin-top: var(--space-6); }
.js-observe-fade.visible .dep-move { opacity: 1; transform: none; }

.dep-move-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.dep-move-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 62ch;
}

/* A frase de fecho desce ate a base: quando ela aparece, a coluna da esquerda
   ainda esta correndo. O espaco entre o ultimo movimento e ela E o argumento. */
.dep-close {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.deployment-section .dep-close { margin-top: auto; }

@media (max-width: 1024px) {
  .deployment-section .dep { gap: var(--space-10); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); }
  .dep-move-title { font-size: 1.375rem; }
}

@media (max-width: 860px) {
  /* Empilha: primeiro a massa (que incomoda), depois o ar. */
  .deployment-section .dep { grid-template-columns: 1fr; gap: var(--space-10); margin-top: var(--space-10); }
  .deployment-section .dep-close { margin-top: var(--space-8); }
  .dep-usual-item { line-height: 1.95; }
  .dep-move + .dep-move { margin-top: var(--space-6); }
  .dep-move-title { font-size: 1.25rem; }
  .dep-move-body { font-size: 0.9375rem; }
  .dep-close { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dep-usual-item,
  .js-observe-fade.visible .dep-usual-item,
  .dep-move,
  .js-observe-fade.visible .dep-move {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RODADA 15 — THE AI: quatro tempos.
   A progressao e de DENSIDADE, e por isso se segue so pelo desenho:
     01 solto     chips tracejados, desalinhados, sem nada segurando
     02 ancorado  o livro-razao: uma coluna vazia contra uma coluna cheia
     03 SOLIDO    a unica massa chapada da secao — o climax — e as tres saidas
     04 preciso   tres faixas quase identicas, distintas so na letra miuda
   Vizinhas: CaseCoverage e uma escada que recua, TenValueLayers e um bento —
   nenhuma tem massa solida nem descida por transformacao.
   ════════════════════════════════════════════════════════════════════════════ */

.theai-section .tempo { max-width: var(--content); margin: 0 auto; }
/* r48: o vao entre tempos volta pra 64. Na r47 eu mantive 128 argumentando que
   "um tempo e quase uma secao". Errado, e e essa decisao que quebra a regua do
   print: com 128px de ar antes de cada tempo, o cabecalho do tempo cai no fim
   da moldura e o desenho dele fica pra proxima rolagem — voce ve o titulo e o
   comeco do grafico, e mais nada. Com 64 o par cabecalho+desenho compoe dentro
   do mesmo enquadramento. */
.theai-section .tempo + .tempo { margin-top: var(--stack-md); }

.tempo-mark {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* --text-secondary (7.9:1) e nao --text-muted (4.2:1): AA em texto de 11px */
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.tempo-title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 var(--space-8);
  max-width: 30ch;
}

.tempo-line {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-6) 0 0;
}
.tempo-line--center { text-align: center; max-width: var(--measure-read); margin-left: auto; margin-right: auto; }

/* ── 01 · O RISCO — solto ─────────────────────────────────────────────────── */
.loose {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding: var(--space-8) 0;
}

.loose-chip {
  padding: 9px 18px;
  border-radius: 999px;
  /* tracejado = nada fechado em volta; o deslocamento vertical tira o apoio */
  border: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: 0.9375rem;
  color: var(--text-primary);
  white-space: nowrap;
  transform: translateY(var(--drift));
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--n) * 70ms + 100ms);
}
.js-observe-fade.visible .loose-chip { opacity: 1; }

/* ── 02 · O CONTEXTO — o livro-razao ──────────────────────────────────────── */
.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 210px;
  align-items: center;
  gap: var(--space-6);
}

.ledger-head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.ledger-head-q,
.ledger-head-col {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}
.ledger-head-col { text-align: center; }
/* a coluna cheia alinha a esquerda: as fichas ganham uma borda vertical firme,
   e o par vazio-contra-cheio le como duas faixas, nao como dois amontoados. */
.ledger-head-col--ours { color: var(--text-primary); text-align: left; padding-left: 2px; }

.ledger-row {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--n) * 80ms + 120ms);
}
.js-observe-fade.visible .ledger-row { opacity: 1; transform: none; }

.ledger-q { font-size: 1rem; line-height: 1.5; color: var(--text-primary); min-width: 0; }

.ledger-gen { display: flex; justify-content: center; }
.ledger-blank { display: block; width: 26px; height: 1px; background: var(--text-secondary); opacity: 0.55; }

.ledger-ours { display: flex; justify-content: flex-start; min-width: 0; }
.ledger-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O ponto e reforco, nunca o portador da informacao: o nome esta escrito na
   ficha, e a coluna vazia se distingue pela FORMA (traco vs ficha). */
.ledger-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--success-color); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── 03 · AS TRAVAS — a massa ─────────────────────────────────────────────── */
/* A UNICA superficie chapada da secao. Depois de dois tempos sem fundo, o bloco
   chega como peso: e o clima visual do argumento. */
.slab {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: 20px;
  background: linear-gradient(180deg, #14161D 0%, #0C0E14 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 70px rgba(0, 0, 0, 0.6);
}

.slab-item {
  min-width: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--n) * 90ms + 200ms);
}
.js-observe-fade.visible .slab-item { opacity: 1; transform: none; }

.slab-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.slab-line { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); }

/* as tres saidas, penduradas na massa por um pé curto */
.outs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: 0;
}

.out {
  position: relative;
  padding-top: var(--space-10);
  min-width: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--n) * 110ms + 460ms);
}
.js-observe-fade.visible .out { opacity: 1; }

.out-stem {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--space-8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
}

.out-key {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.out-val { display: block; font-size: 1rem; line-height: 1.5; color: var(--text-primary); }

/* ── 04 · O PAGAMENTO — a precisao ────────────────────────────────────────── */
.seam-quote {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 var(--space-8);
}

/* R16 — A ESCADA DE TRES DEGRAUS. Substitui as tres faixas do seam, que
   duplicavam o diagrama de ramificacao da KeepYourStack ("My order arrived
   damaged." -> Shipping Protection / Product Warranty / Returns). Aqui a mesma
   frase volta como CALLBACK, e o que se desenha e outra coisa: os tres niveis
   de resposta, e onde cada um quebra.
   O VERBO e o leitor de 3 segundos — Stops. / Guesses. / Reads. — e a
   progressao e de PESO: cada degrau chega mais claro e mais forte que o
   anterior, sem recuo horizontal (a CaseCoverage ja e uma escada que recua). */
.ladder { list-style: none; margin: 0; padding: 0; }

.rung {
  position: relative;
  display: grid;
  grid-template-columns: 200px 170px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--n) * 110ms + 160ms);
}
.rung:last-child { border-bottom: 1px solid var(--border-subtle); }
.js-observe-fade.visible .rung { opacity: 1; transform: none; }

/* a barra a esquerda ganha corpo degrau a degrau: o peso E a progressao */
.rung-bar {
  position: absolute;
  left: 0;
  top: var(--space-6);
  bottom: var(--space-6);
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, calc(0.08 + var(--n) * 0.10));
}
.rung--ours .rung-bar { background: var(--success-color); }

.rung-level {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* --text-secondary (7.9:1) e nao --text-muted (4.2:1): AA em texto de 11px */
  color: var(--text-secondary);
}
.rung--ours .rung-level { color: var(--text-primary); }

/* O verbo e o unico elemento grande: e ele que se le de longe. */
.rung-verb {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text-secondary);
}
.rung--ours .rung-verb { color: var(--text-primary); }

.rung-line {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  min-width: 0;
}
.rung--ours .rung-line { color: var(--text-primary); }

/* ── responsivo ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .slab { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-6); }
  .outs { gap: var(--space-6); }
  .ledger-head, .ledger-row { grid-template-columns: minmax(0, 1fr) 120px 150px; gap: var(--space-4); }
  .ledger-q { font-size: 0.9375rem; }
  .ledger-chip { font-size: 0.75rem; padding: 6px 11px; gap: 6px; }
  .tempo-title { font-size: 1.75rem; }
  .rung { grid-template-columns: 160px 140px minmax(0, 1fr); gap: var(--space-4); }
  .rung-verb { font-size: 1.625rem; }
}

@media (max-width: 760px) {
  .theai-section .tempo + .tempo { margin-top: var(--space-12); }
  .loose { gap: var(--space-3) var(--space-4); padding: var(--space-6) 0; }
  .loose-chip { font-size: 0.8125rem; padding: 7px 14px; transform: translateY(calc(var(--drift) * 0.45)); }

  /* o livro-razao empilha: pergunta em cima, as duas respostas lado a lado */
  .ledger-head { display: none; }
  .ledger-row { display: block; padding: var(--space-4) 0; }
  .ledger-q { display: block; margin-bottom: var(--space-3); }
  .ledger-gen, .ledger-ours { display: inline-flex; justify-content: flex-start; vertical-align: middle; }
  .ledger-gen { min-width: 96px; }
  .ledger-gen::after {
    content: 'generic';
    margin-left: 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .ledger-blank { margin-top: 9px; }

  .slab { grid-template-columns: 1fr; gap: var(--space-5); }
  .outs { grid-template-columns: 1fr; gap: var(--space-5); }
  .out { padding-top: var(--space-6); }
  .out-stem { height: var(--space-4); }
  /* empilha: nivel, verbo, linha — a barra a esquerda segura a progressao */
  .rung { grid-template-columns: 1fr; gap: var(--space-2); padding-left: var(--space-5); }
  .rung-verb { font-size: 1.5rem; }
  .tempo-title { font-size: 1.5rem; }
  .tempo-line--center { text-align: left; }
  .seam-quote { text-align: left; font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loose-chip, .js-observe-fade.visible .loose-chip,
  .ledger-row, .js-observe-fade.visible .ledger-row,
  .slab-item, .js-observe-fade.visible .slab-item,
  .out, .js-observe-fade.visible .out,
  .rung, .js-observe-fade.visible .rung {
    transition: none;
    opacity: 1;
  }
  .ledger-row, .slab-item, .rung { transform: none; }
  /* o deslocamento dos chips e FORMA (o "solto"), nao animacao: fica. */
}

/* ════════════════════════════════════════════════════════════════════════════
   RODADA 12 — THREE SHAPES: a mesma unidade, tres arranjos.
   Um quadradinho = uma loja. Uma sozinha; tres juntas; muitas em contorno
   (operadas para outros). Os tres arranjos dividem UMA linha de base, entao o
   olho le uma progressao de propriedade — nao tres cards. Sem caixa nenhuma.
   ════════════════════════════════════════════════════════════════════════════ */

.shapes-section .shapes {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(0, 1.18fr);
  gap: var(--space-10);
  max-width: var(--content);
  margin: var(--space-12) auto 0;
  align-items: start;
}

.shape {
  min-width: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--n) * 130ms + 100ms);
}
.js-observe-fade.visible .shape { opacity: 1; transform: none; }

/* A LINHA DE BASE compartilhada: as tres figuras assentam nela. */
.shape-figure {
  display: flex;
  align-items: flex-end;
  height: 92px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-5);
}

.shape-units {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
}

.shape-unit {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  /* solido e claro = loja sua; contorno e apagado = loja de outro. A distincao
     e de FORMA (preenchimento), nao so de cor — e o texto diz qual e qual. */
  background: var(--text-primary);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(var(--u) * 45ms + 260ms);
}
/* Contorno = operada para outra pessoa, nao propria. A distincao nao e so cor:
   e preenchimento (forma), e o texto diz qual e qual. */
.shape-unit--outline {
  background: none;
  box-shadow: inset 0 0 0 1px var(--text-secondary);
}
.js-observe-fade.visible .shape-unit { opacity: 1; transform: none; }

/* a loja unica e a maior — uma so, e ela ocupa a posicao inteira */
.shape--brand .shape-unit { width: 44px; height: 44px; border-radius: 10px; }

.shape-kind {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* --text-secondary (7.9:1) e nao --text-muted (4.2:1): AA em texto de 11px */
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.shape-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

/* R14 — o rotulo endereca o leitor, o titulo E a resposta, e o corpo e uma
   linha do que ela significa. A linha do problema saiu (era o que fazia o
   bloco ler como diagnostico). */
.shape-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 1024px) {
  .shapes-section .shapes { gap: var(--space-8); }
  .shape-title { font-size: 1.25rem; }
  .shape-unit { width: 18px; height: 18px; border-radius: 4px; }
  .shape--brand .shape-unit { width: 36px; height: 36px; border-radius: 8px; }
}

@media (max-width: 820px) {
  /* Empilha, e a linha de base vira a divisoria entre os tres — a progressao
     de propriedade continua legivel de cima pra baixo. */
  .shapes-section .shapes { grid-template-columns: 1fr; gap: var(--space-10); margin-top: var(--space-10); }
  .shape-figure { height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .shape, .js-observe-fade.visible .shape,
  .shape-unit, .js-observe-fade.visible .shape-unit {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RODADA 18 — AS SEIS TELAS: altura travada + fidelidade.

   ALTURA. O dashboard real trava a moldura e rola por dentro:
     .app-main    { height: <fixa>; overflow-y: hidden }
     .main-content{ height: <fixa>; overflow-y: auto  }
   Aqui e a mesma coisa: `.rz-main` tem altura FIXA por breakpoint (o valor da
   tela do Pulse) e `.rz-stage` rola por dentro. Nenhuma aba altera a moldura,
   entao nada abaixo do hero se move um pixel na troca.

   FIDELIDADE. Todo valor abaixo foi COPIADO do CSS do customer-dashboard:
     tickets-pipeline.css · features/agents-2035.css · model-2030.css ·
     dashboard-v2.css (.rpt-* e .god-*) · overview-2030.css · overview-executive.css
   Onde ha desvio, ele esta comentado na linha.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A MOLDURA TRAVADA ──────────────────────────────────────────────────────
   Quem define a altura da janela e A TELA DO PULSE, e so ela: o Pulse fica no
   fluxo normal e NUNCA sai dele (quando outra aba esta ativa ele vira
   `visibility: hidden`, que apaga sem tirar do layout). As outras cinco telas
   sao camadas ABSOLUTAS sobre esse mesmo retangulo, com rolagem propria —
   exatamente o que o dashboard real faz (`.app-main` overflow hidden +
   `.main-content` overflow-y auto). Consequencia: a moldura nao muda de
   altura em NENHUMA largura, nao so nos quatro breakpoints testados, e nada
   abaixo do hero se move um pixel na troca de aba.                          */
.rz-main { min-height: 0; overflow: hidden; }
.rz-stage { position: relative; }

.rz-screen[hidden] { display: none; }

/* o Pulse: some de vista, permanece no layout — e a regua da altura */
.rz-screen[data-screen="pulse"][hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

/* as outras cinco: camada sobre o mesmo retangulo do Pulse, com a MESMA
   caixa que o .rz-stage da ao Pulse (posicao absoluta ignora o padding do
   pai, entao ele e repetido aqui — mesmos valores, nao outros). */
.rz-screen:not([data-screen="pulse"]) {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 24px 40px 0;
}

/* ── ROLAGEM: NENHUMA. AS SEIS PELO CAMINHO DO PULSE (RODADA 21) ───────────
   Aqui morreram tres rodadas de remendo. O diff contra o Pulse mostrou que a
   unica diferenca estrutural que importava era esta: o Pulse tem altura AUTO
   (a caixa e do tamanho do proprio conteudo, entao ele nunca vira um
   conteiner de rolagem), enquanto os outros cinco tem a altura da moldura
   (`inset: 0`) — e os dois cujo conteudo passa da moldura, Cortex e
   Intelligence, viravam conteiner de rolagem so por causa disso.

   Dali saiu tudo: barra de rolagem visivel (r19), cursor preso no fim (r20),
   e o salto de 120px por clique da roda quando tentei devolver o scroll a mao
   com um ouvinte de `wheel` (r21). Cada correcao criava o defeito seguinte.

   A resposta nao e mais uma excecao: e NAO ter conteiner de rolagem nenhum.
   Nenhum painel declara overflow, overscroll-behavior, scrollbar-width ou
   scroll-behavior — exatamente como o Pulse, que nunca declarou. O que passa
   da moldura e recortado pela propria moldura (`.rz-main { overflow: hidden }`),
   que ja e o que acontece com a ultima fileira de cards do Pulse. A roda do
   mouse vai sempre para a pagina, nas seis, com a fluidez nativa do navegador.

   Consequencia assumida: em Cortex e Intelligence o rodape da tela fica
   abaixo do corte da janela. E o mesmo corte que a janela ja tem por
   desenho — ela sobe do fim da secao, sem borda de baixo.                    */

/* ── o skeleton do produto (css/ui-states.css) ────────────────────────────── */
.rz-skel {
  display: block;
  width: var(--sw, 100%);
  height: var(--sh, 14px);
  border-radius: 6px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 400px 100%;
  animation: rzShimmer 1.6s infinite linear;
}
.rz-skel--chart { border-radius: 12px; }
.rz-skel--bar { border-radius: 100px; }

/* ── nav como abas ───────────────────────────────────────────────────────── */
.rz-nav-item { appearance: none; background: none; text-align: left; font-family: inherit; cursor: pointer; }
.rz-nav-item:hover { color: #EDEDEF; background: rgba(255, 255, 255, 0.05); }
.rz-nav-item:hover .rz-nav-icon { color: #EDEDEF; }
.rz-nav-item:focus-visible,
.rz-tab:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.rz-nav-item.is-active { position: relative; }
/* ⚠️ IDENTICA A DO PRODUTO, e nao a linha indigo de altura quase inteira que
   estava aqui: 3x18 centrada, BRANCA, com o brilho e o raio so do lado de
   fora. A cor mudou no dash a 04-set-2026 — o cromo cala-se para o vidro
   poder falar — e esta copia acompanha, senao o mock anuncia um produto que
   ja nao existe. */
.rz-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: #ffffff;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.rz-tabs { display: none; }
.rz-tab {
  appearance: none;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.rz-tab.is-active { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); color: var(--text-primary); }

/* ── hero interno ─────────────────────────────────────────────────────────
   As cinco telas usam o MESMO componente do Pulse (.ov-pulse-hero
   .exec-hero-layout) — os render.js provam isso. So a Cortex encolhe o
   min-height para 260px (inline no model.render.js) e a Intelligence troca o
   fundo por rgba(10,10,15,0.4) com borda 0.03.                              */
.rz-hero--inner { min-height: 320px; }
.rz-hero-title--inner { max-width: none; }
.rz-hero--violet { min-height: 260px; }
.rz-hero--intel { background: rgba(10, 10, 15, 0.4); border-color: rgba(255, 255, 255, 0.03); }
.rz-time--inner { top: 24px; right: 24px; }
.rz-pills--inner { margin-top: 16px; }

.pl-icon { display: inline-flex; width: 1.05em; height: 1.05em; flex-shrink: 0; }
.pl-icon svg { width: 100%; height: 100%; }
.pl-icon--accent { color: var(--accent-color); }
.pl-icon--red { color: #ef4444; }
.pl-icon--green { color: #10b981; }
.pl-icon--gold { color: #eab308; }

/* ══ SIGNAL — tickets-pipeline.css ═══════════════════════════════════════ */
.pl-pipeline { display: flex; flex-direction: column; gap: 48px; padding: 16px 0; }

.pl-track-wrapper { position: relative; display: flex; flex-direction: column; gap: 16px; }

/* .pl-aura — 800x400, blur(140px), opacity .6, atras do track */
.pl-aura {
  position: absolute;
  width: 800px; height: 400px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}
.pl-aura--razviel { background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(0, 0, 0, 0) 70%); }
.pl-aura--brand   { background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, rgba(0, 0, 0, 0) 70%); }

/* .pl-track — O CARD: e AQUI que moram fundo, borda e raio 32px */
.pl-track {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 32px;
  padding: 48px 40px 32px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* .pl-etched-stamp — absoluto, top 1rem / left 1.5rem, letter-spacing .4em */
.pl-stamp {
  position: absolute;
  top: 16px; left: 24px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.15);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* .pl-track-node — card de vidro, raio 32, min-width 110, bisel especular */
.pl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  min-width: 110px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(80px) saturate(180%);
  -webkit-backdrop-filter: blur(80px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.pl-node--escalated {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(249, 115, 22, 0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 40px rgba(249, 115, 22, 0.03),
    0 20px 40px rgba(0, 0, 0, 0.5);
}
.pl-node--escalated .pl-icon { color: #f97316; filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.8)); }

/* .pl-label-elegant — 0.7rem/600, letter-spacing .15em.
   ⚠️ DESVIO DECLARADO: o produto usa rgba(255,255,255,0.35), que composto
   sobre o track da ~3.1:1 — abaixo de AA. Subido para 0.62. Mesma decisao ja
   tomada no .rz-time do Pulse. */
.pl-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

/* .pl-bifurcated-zone / .pl-bifurcated-node */
.pl-bif { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 5; }
.pl-bif-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 150px;
  padding: 9.6px 20px;
  border-radius: 100px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(80px) saturate(180%);
  -webkit-backdrop-filter: blur(80px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 12px 24px rgba(0, 0, 0, 0.4);
}
.pl-bif-node--ai {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(16, 185, 129, 0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 40px rgba(16, 185, 129, 0.03),
    0 15px 30px rgba(0, 0, 0, 0.4);
}
.pl-bif-node--ai .pl-icon { color: var(--success-color); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8)); }
.pl-bif-node--human {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(96, 165, 250, 0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 40px rgba(96, 165, 250, 0.03),
    0 15px 30px rgba(0, 0, 0, 0.4);
}
.pl-bif-node--human .pl-icon { color: #60a5fa; filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.8)); }

/* .pl-flow-connector — tubo de vidro com o pulso de luz correndo dentro */
.pl-conn {
  position: relative;
  flex: 1;
  min-width: 32px;
  height: 4px;
  margin: 0 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.02);
  overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 8px rgba(0, 0, 0, 0.3);
}
.pl-conn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 25%; height: 100%;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.6);
  animation: plFlowPulse 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.pl-track-wrapper--brand .pl-conn::after { animation-delay: 1s; }
@keyframes plFlowPulse {
  0%   { transform: translateX(-200%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(500%); opacity: 0; }
}

/* .pl-fork-in / .pl-fork-out — o gancho de 2rem com a linha de 1px */
.pl-fork { position: relative; width: 32px; flex: 0 0 32px; align-self: stretch; }
.pl-fork::before {
  content: '';
  position: absolute;
  left: 50%; top: 25%; bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.05);
}

/* .pl-vault-zone — borda tracejada em cima, coluna centrada */
.pl-vault {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.pl-vault-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* ⚠️ produto: rgba(255,255,255,0.25) (~2.4:1). Subido para 0.55. */
  color: rgba(255, 255, 255, 0.55);
}
.pl-vault-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pl-vault-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5.6px 12.8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.02);
}
.pl-vault-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.pl-vault-node.is-escalated .pl-vault-label { color: #f97316; }
.pl-vault-value {
  display: inline-flex;
  align-items: center;
  padding: 2.4px 6.4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
}
.pl-vault-node.is-escalated .pl-vault-value { background: rgba(249, 115, 22, 0.15); }

/* ══ FLEET — features/agents-2035.css ════════════════════════════════════ */
.hn-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 24px; }

.hn-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

/* .hn-owner-telemetry — chip ABSOLUTO no topo direito */
.hn-telemetry {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hn-telemetry--brand { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); }
.hn-telemetry-owner { color: rgba(255, 255, 255, 0.95); }
.hn-telemetry--brand .hn-telemetry-owner { color: #BFDBFE; }
.hn-telemetry-dot { font-size: 8px; color: rgba(255, 255, 255, 0.8); }
.hn-telemetry-status { color: rgba(255, 255, 255, 0.75); }

.hn-identity { display: flex; gap: 16px; margin-bottom: 24px; min-width: 0; }
.hn-avatar {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.hn-avatar-dot {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid #0f0f11;
}
.hn-card--brand .hn-avatar-dot { background: rgba(59, 130, 246, 0.5); }
.hn-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.hn-role { font-size: 13px; color: #A1A1AA; }

/* .hn-card--ai — o material violeta sussurrado + o glifo no lugar das iniciais */
.hn-card--ai {
  border-color: rgba(139, 92, 246, 0.22);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.06), rgba(255, 255, 255, 0.02));
}
.hn-card--ai .hn-avatar {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(94, 106, 210, 0.25));
  border-color: rgba(139, 92, 246, 0.5);
}
.hn-card--ai .hn-avatar-dot { background: #8B5CF6; box-shadow: 0 0 12px rgba(139, 92, 246, 0.6); }
.hn-avatar-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hn-avatar-glyph svg { width: 22px; height: 22px; }

/* .hn-card--wide — o card de IA ocupa duas colunas, identidade | stats */
.hn-card--wide { grid-column: span 2; flex-direction: row; align-items: center; }
.hn-card--wide .hn-identity { margin-bottom: 0; margin-right: 24px; flex: 1; }
.hn-card--wide .hn-stats { flex: 1; }

/* .hn-card-stat — TILE: fundo preto .2, borda, raio 12, padding 12 */
.hn-stats { display: flex; gap: 12px; }
.hn-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
}
/* ⚠️ produto: var(--text-tertiary) #52525B (~3.1:1). Subido para #A1A1AA. */
.hn-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #A1A1AA; }

/* .hn-pagination-wrapper + o ponto ativo esticado em pilula de 24px */
.hn-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 32px 0 8px; }
.hn-dot { width: 6px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); }
.hn-dot.is-active { width: 24px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }

/* ══ AS BANDEJAS (.mod-plate / .rpt-plate / .intel-hub) ══════════════════ */
.mod-plate,
.rpt-plate,
.intel-hub {
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: rgba(20, 22, 28, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.intel-hub { gap: 24px; padding: 32px 40px 40px; }

/* ══ CORTEX — model-2030.css ═════════════════════════════════════════════ */
/* .ov-pulse-metrics — dois blocos, gap 40, alinhados a direita */
.mod-metrics { display: flex; gap: 40px; text-align: right; flex-shrink: 0; }
.mod-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* .ov-cine-label — 0.8rem, Space Mono, ls .1em.
   ⚠️ produto: var(--text-tertiary) #52525B. Subido para #A1A1AA. */
.mod-metric-label {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #A1A1AA;
  white-space: nowrap;
}
.mod-metric-val { display: inline-flex; align-items: flex-end; gap: 4px; }
.mod-metric-denom { font-size: 1.2rem; color: rgba(255, 255, 255, 0.55); line-height: 1.7; }
.mod-metric-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.mod-metric-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--accent-color); white-space: nowrap; }

/* .mod-chart-card */
.mod-chart {
  padding: 32px;
  border-radius: 20px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.mod-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.mod-chart-head-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mod-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.mod-chart-title .pl-icon { color: #10b981; }
.mod-chart-scrub { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mod-chart-date { font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.mod-chart-delta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.75rem; font-weight: 500; color: #fff; }
.mod-chart-delta .pl-icon { color: #10b981; }
.mod-chart-delta-dot { color: rgba(255, 255, 255, 0.4); }

/* .mod-filters — trilho com bisel interno; o ativo em branco .15 */
.mod-ranges {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mod-range {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.mod-range.is-active { color: #fff; background: rgba(255, 255, 255, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* .mod-aria-chart-wrap — 220px de altura */
.mod-chart-wrap { height: 220px; }

/* .mod-lower-row — 1fr 1fr, gap 20 */
.mod-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mod-panel {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.5);
  min-width: 0;
}
.mod-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.mod-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px;
}
.mod-panel-head .mod-panel-title { margin-bottom: 0; }
.mod-panel-status { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mod-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success-color); box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); }

.mod-insights { display: flex; flex-direction: column; gap: 16px; }
.mod-insight {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.mod-insight-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.mod-insight-icon svg { width: 18px; height: 18px; }
.mod-insight-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.mod-insight-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mod-insight-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.mod-insight-badge .pl-icon { width: 10px; height: 10px; }

/* .mod-hitl-diagram */
.mod-hitl { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mod-hitl-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.mod-hitl-step .pl-icon { width: 17px; height: 17px; }
.mod-hitl-step--ai .pl-icon { color: #10b981; }
.mod-hitl-step--human .pl-icon { color: #f59e0b; }
.mod-hitl-arrow { display: flex; justify-content: center; padding: 4px 0; color: rgba(255, 255, 255, 0.35); }
.mod-hitl-arrow .pl-icon { width: 19px; height: 19px; }
.mod-hitl-arrow--up { align-items: center; gap: 8px; color: #fff; font-size: 0.85rem; }
.mod-hitl-learning { color: #fff; }

/* ══ LEDGER — dashboard-v2.css (.rpt-*) ══════════════════════════════════ */
.rpt-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }

.rpt-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, #131820 0%, #0c1016 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.35);
}
.rpt-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(94, 106, 210, 0.14) 0%, transparent 45%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.rpt-hero-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.rpt-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #10b981;
}
.rpt-icon svg { width: 24px; height: 24px; }
.rpt-card-head .rpt-icon { width: 40px; height: 40px; border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.rpt-card-head .rpt-icon svg { width: 19px; height: 19px; }
.rpt-icon--purple { background: rgba(94, 106, 210, 0.1); border-color: rgba(94, 106, 210, 0.2); color: #818cf8; }
.rpt-icon--yellow { background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.2); color: #EAB308; }
.rpt-icon--bank {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.rpt-icon--bank svg { width: 21px; height: 21px; }

.rpt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rpt-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0; }
.rpt-badge--unread { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.rpt-badge--purple { background: rgba(94, 106, 210, 0.15); color: #818cf8; border: 1px solid rgba(94, 106, 210, 0.3); }
.rpt-badge--yellow { background: rgba(234, 179, 8, 0.1); color: #EAB308; border: 1px solid rgba(234, 179, 8, 0.25); }

.rpt-hero-body { position: relative; z-index: 1; flex: 1; }
.rpt-micro {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* ⚠️ produto: rgba(255,255,255,0.4) (~3.5:1). Subido para 0.55. */
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.rpt-hero-title { font-size: 1.55rem; font-weight: 500; color: #fff; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 10px; }
.rpt-hero-desc { font-size: 0.88rem; line-height: 1.55; color: rgba(255, 255, 255, 0.6); margin: 0 0 24px; }

/* .rpt-hero__stats — UM bloco dividido por reguas, nao tres cards */
.rpt-hero-stats {
  display: flex;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.rpt-hero-stat { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.rpt-hero-stat:last-child { border-right: none; }
.rpt-stat-label { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }

.rpt-cta-primary {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08);
}
.rpt-cta-primary .pl-icon { width: 16px; height: 16px; }

.rpt-stack { display: flex; flex-direction: column; gap: 20px; }
.rpt-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.rpt-ambient {
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 180px;
  border-radius: 50%;
  transform: translate(40%, -40%);
  pointer-events: none;
}
.rpt-ambient--purple { background: radial-gradient(circle, rgba(94, 106, 210, 0.12) 0%, transparent 70%); }
.rpt-ambient--yellow { background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, transparent 70%); }
.rpt-card-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.rpt-card-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.rpt-card-title { font-size: 1.1rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; margin: 0 0 8px; }
.rpt-card-title--yellow { color: #EAB308; }
.rpt-card-desc { font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.55); margin: 0 0 20px; flex: 1; }

.rpt-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rpt-cta .pl-icon { width: 15px; height: 15px; }
.rpt-cta--purple { background: rgba(94, 106, 210, 0.12); color: #818cf8; border-color: rgba(94, 106, 210, 0.25); }
.rpt-cta--yellow { background: rgba(234, 179, 8, 0.08); color: #EAB308; border-color: rgba(234, 179, 8, 0.2); }
.rpt-cta--white { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.15); }

/* .rpt-wide — grade 1fr / 1.8fr / 1fr */
.rpt-wide {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  align-items: center;
  padding: 28px 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.rpt-wide-ambient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 55%);
  pointer-events: none;
}
.rpt-wide-left { position: relative; display: flex; align-items: center; gap: 16px; padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, 0.05); min-width: 0; }
.rpt-wide-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rpt-wide-title { font-size: 1.05rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; }
.rpt-wide-sub { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.rpt-wide-stats { position: relative; display: flex; justify-content: center; }
.rpt-wide-stat { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 24px; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.rpt-wide-stat:last-child { border-right: none; }
.rpt-wide-right { position: relative; display: flex; justify-content: flex-end; align-items: center; }

/* ══ INTELLIGENCE — dashboard-v2.css (.god-*) ════════════════════════════ */
.god-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; }
.god-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 20px;
  min-width: 0;
}
.god-panel--glass {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.god-panel--hero {
  background: linear-gradient(135deg, #1A1F2C 0%, #0F131C 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.3);
}
.god-mesh {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.03), transparent 40%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.god-orb {
  position: absolute;
  top: -50px; right: -50px;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.god-head {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.god-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}
.god-badge { padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.god-hint { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.god-summary { position: relative; z-index: 10; margin-bottom: 32px; }
.god-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin: 10px 0 0; }
/* .god-panel__subtitle — 1.1rem/600/#fff */
.god-sub { position: relative; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 20px; }
.god-bleed-label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); letter-spacing: -0.01em; }

.god-bleed { position: relative; z-index: 10; }
.god-bleed-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.god-bleed-head { display: flex; justify-content: space-between; gap: 16px; }
.god-bar { width: 100%; height: 12px; border-radius: 100px; background: rgba(0, 0, 0, 0.3); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }

/* .causal-tree */
.god-tree { display: flex; flex-direction: column; }
.god-tree-root,
.god-tree-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
}
.god-tree-root { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); margin-bottom: 12px; }
.god-tree-alt { background: rgba(249, 115, 22, 0.05); border: 1px solid rgba(249, 115, 22, 0.1); margin-top: 8px; }
.god-tree-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: #fff; }
.god-flow { padding-left: 20px; margin-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.god-flow-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.god-flow-node::before {
  content: '';
  position: absolute;
  left: -20px; top: 50%;
  width: 20px; height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.god-flow-node:first-child::before { display: none; }
.god-flow-label { font-size: 0.9rem; font-weight: 500; color: #fff; }

/* .kill-item */
.god-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.god-item:last-child { margin-bottom: 0; }
.god-rank {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.god-rank svg { width: 16px; height: 16px; }
.god-rank--2 { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); }
.god-rank--3 { background: rgba(255, 255, 255, 0.02); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.05); }
.god-item-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.god-item-name { font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.god-item-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }

/* ── responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  /* acompanha o padding do .rz-stage neste breakpoint */
  .rz-screen:not([data-screen="pulse"]) { padding: 20px 24px 0; }
  .pl-track { padding: 40px 24px 24px; }
  .mod-metrics { gap: 24px; }
  .mod-plate, .rpt-plate, .intel-hub { padding: 24px; }
}

@media (max-width: 1024px) {
  .rz-hero--inner { min-height: 260px; }
  .rpt-top { grid-template-columns: 1fr; }
  .mod-lower { grid-template-columns: 1fr; }
  .god-grid { grid-template-columns: 1fr; }
  .rpt-wide { grid-template-columns: 1fr; gap: 20px; }
  .rpt-wide-left { padding-right: 0; border-right: none; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
  .rpt-wide-right { justify-content: flex-start; }
}

/* ── r42: MOBILE ──────────────────────────────────────────────────────────
   Abaixo de 900 a faixa de abas entra ACIMA do aparelho e a sidebar sai, entao
   a moldura deixa de ser um recorte de razao fixa: ela volta a ter altura
   livre e o aparelho volta pro fluxo. Numa tela de 375 uma razao de 1.53 daria
   245px de altura — o painel principal nao caberia de jeito nenhum. */

@media (max-width: 900px) {
  .rz-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 12px;
    margin: 0 auto 4px;
    width: 100%;
    scrollbar-width: none;
  }
  .rz-tabs::-webkit-scrollbar { display: none; }
  .mod-metrics { justify-content: flex-start; text-align: left; }
  .mod-metric { align-items: flex-start; }
  .pl-fork { display: none; }
}

@media (max-width: 640px) {
  .rz-hero--inner,
  .rz-hero--violet { min-height: 0; }
  .rz-time--inner { position: static; }
  .pl-track { flex-wrap: wrap; gap: 16px; padding: 36px 18px 20px; }
  .pl-conn { display: none; }
  .pl-bif { flex: 1 1 100%; }
  .pl-node { flex: 1 1 auto; }
  .mod-plate, .rpt-plate, .intel-hub { padding: 18px; border-radius: 18px; }
  .mod-chart, .mod-panel, .rpt-hero, .rpt-card, .rpt-wide, .god-panel { padding: 20px; }
  .rpt-hero { min-height: 0; }
  .hn-roster { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rz-skel { animation: none; background-position: 0 0; }
  .pl-conn::after { animation: none; opacity: 0.35; }
}

/* ==========================================================================
   EnterpriseCX — A TESE EM CINCO TEMPOS (r24 objeto, r25 sequencia).

   O tempo 03 e a fundacao: as marcas em cima, a organizacao de suporte embaixo,
   numa base unica que acende PARA CIMA. Sao as MESMAS celulas do tempo 02,
   agora dentro de um corpo e com luz — o objeto nao e novo, ele trocou de dono.

   A REGRA DA TINTA EM PIXELS: a alternativa (tempo 02) nao tem fundo, borda
   acesa nem glow, e suas celulas sao as menores da secao. O unico objeto grande
   e aceso da sequencia e a nossa base.

   CONTRASTE (fundo #05070C): .thx-title / .thx-act-title / .thx-law-term /
   .thx-base-name / .thx-brand-you / .thx-lead strong em --text-primary
   (18.33:1); .thx-lead / .thx-part / .thx-base-note / .thx-giant-cell em
   --text-secondary (7.86:1, e >=5.8:1 sobre o ponto mais claro da base);
   .thx-giant-label em --text-muted (4.54:1); o "=" em --accent-color (4.51:1).

   MOVIMENTO: nenhum proprio. So o reveal ja existente, que o kill switch global
   de prefers-reduced-motion em animations.css cobre.
   ========================================================================== */

/* ── A SEQUENCIA (r25) ─────────────────────────────────────────────────────
   A tese em cinco tempos. Cada ato tem o mesmo esqueleto (numeral + titulo,
   objeto, texto) para que a SEQUENCIA seja legivel, e um objeto diferente para
   que os tempos nao se confundam. A regra da tinta atravessa a sequencia: 01 e
   02 sao os menores e os unicos sem luz.
   -------------------------------------------------------------------------- */

.thx-title {
  max-width: var(--measure-title);
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

/* a costura de entrada (r28): a primeira linha da tese herda a secao anterior.
   Nao e subtitulo — e o fio que liga o dia inteiro que o leitor acabou de ver
   a pergunta que a tese vai responder. */
.thx-seam {
  max-width: var(--measure-read);
  margin: var(--space-5) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.thx-acts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.thx-act {
  margin-top: var(--stack-md);
}

/* ── r48: OS CINCO ATOS DEIXAM DE SER PILHA ─────────────────────────────────
   Eram cinco blocos empilhados, cada um com cabecalho CENTRADO em cima, o
   diagrama no meio e a frase embaixo: 3.300px, quatro rolagens, e a cada
   parada voce pegava um cabecalho sem o desenho dele ou um desenho sem a
   frase.

   Os cinco diagramas ja compartilham a mesma gramatica — uma faixa horizontal
   larga com anotacoes. Entao o ato vira UMA LINHA: numero, titulo e frase numa
   coluna a esquerda; a faixa ocupa a direita, alinhada com as outras quatro.
   Cinco faixas com o mesmo eixo horizontal leem como um grafico unico, que e o
   que a sequencia sempre foi. Mesmo visual, mesma ordem, mesma mensagem. */
.thx-act {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: center;
}

.thx-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-4);
  grid-column: 1;
  grid-row: 1;
  align-self: end;      /* encosta na frase, que vem na linha de baixo */
}

/* a frase desce logo abaixo do titulo, na mesma coluna */
.thx-act > .thx-lead {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: none;
  margin: var(--space-3) 0 0;
  text-align: left;
}

/* tudo que nao e cabecalho nem frase e o desenho: ocupa a coluna da direita
   inteira, atravessando as duas linhas */
/* os desenhos vao pra coluna da direita SEM linha fixa: assim se empilham em
   linhas sucessivas em vez de cair todos na mesma celula (era isso que fazia a
   legenda do ato 02 imprimir por cima da laje) */
.thx-act > *:not(.thx-head):not(.thx-lead) {
  grid-column: 2;
  /* o desenho preenche a coluna: os cinco tinham max-width de 1000 e
     margin auto, herdados de quando ocupavam a largura toda — dentro da
     coluna isso os deixava estreitos e deslocados */
  max-width: none;
  margin: 0;
}

/* o titulo do ato encolhe: na coluna de 300px o tamanho antigo quebrava
   "What enterprise scale buys" em tres linhas */
.thx-act .thx-act-title { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.thx-act .thx-num { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* abaixo de 900 a coluna de rotulo de 260px comeria a faixa: o ato volta a
   empilhar exatamente como era antes da r48. */
@media (max-width: 900px) {
  .thx-act { display: block; }
  .thx-head { justify-content: center; }
  .thx-act > .thx-lead {
    text-align: center;
    margin: var(--space-6) auto 0;
    max-width: var(--measure-block);
  }
  .thx-act > *:not(.thx-head):not(.thx-lead) {
    max-width: var(--measure-title);
    margin-left: auto;
    margin-right: auto;
  }
}

/* o numeral: grande e apagado, e o unico marcador de progressao da sequencia
   (nada de trilho — a SelfImprovingAI e a CaseCoverage ja sao trilho e escada) */
.thx-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.10);
}

.thx-act-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
}

.thx-lead {
  max-width: var(--measure-block);
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* 01 — a lei como inscricao: dois fios e a equacao entre eles */
/* a frase do dashboard: linha propria, nao enterrada no paragrafo — e a prova
   de "voce nao opera nada", e o leitor ja viu o objeto na primeira dobra */
.thx-note {
  max-width: var(--measure-read);
  margin: var(--space-5) auto 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}


/* 02 — o que a gigante tem. Campo denso de celulas APAGADAS: sem fundo, sem
   borda acesa, sem glow. A densidade e o argumento (e muita coisa), mas a
   ausencia de luz mantem a regra da tinta — este bloco nao disputa com 03/04/05.
   Silhueta: um campo solto de celulas, sem caixa em volta; a fundacao do 03 e o
   oposto (as mesmas coisas DENTRO de um corpo aceso). */
/* ── VOCABULARIO DE DESENHO (r26) ──────────────────────────────────────────
   Registro Palantir: precisao de blueprint, anotacao em monoespacada, hachura
   tecnica, cor contida, alto contraste. Tres primitivas compartilhadas pelos
   tempos, para que os cinco leiam como UM sistema e nao como cinco ilustracoes:

     .thx-mass   a materia — uma hachura de quadradinhos. E a MESMA materia nos
                 tempos 01, 02 e 03: pequena no chao (01), carga larga demais
                 para o apoio (02), e chao aceso (03). E CSS puro, nao DOM:
                 dois gradientes repetidos, zero elemento por quadradinho.
     .thx-plate  a placa rigida — um objeto com espessura, nunca uma linha de
                 meta. E o que separa "fisico" de "grafico".
     .thx-anno   a anotacao em mono, do design system (nenhuma fonte nova).
   ------------------------------------------------------------------------- */

.thx-mass {
  display: block;
  background-color: rgba(255, 255, 255, 0.012);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 9px 9px;
  border: 1px solid var(--border-strong);
}

.thx-plate {
  display: block;
  height: 7px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.13));
}

.thx-floor {
  display: block;
  height: 1px;
  background: var(--border-strong);
}

.thx-anno {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* 01 — o alcance e a placa. O VAO e o objeto: dois tercos da figura sao ar. */
.thx-reach {
  max-width: var(--measure-title);
  margin: var(--space-8) auto 0;
}

.thx-anno--top { margin-bottom: var(--space-2); }
.thx-anno--bottom { margin-top: var(--space-2); color: var(--text-muted); }

.thx-reach-field {
  position: relative;
  height: clamp(180px, 24vw, 250px);
}

.thx-reach-col {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(112px, 15vw, 168px);
  height: 38%;
}

.thx-reach-col .thx-mass {
  height: 100%;
  border-top-color: rgba(255, 255, 255, 0.42);
  border-top-width: 2px;
}

.thx-anno--reach {
  position: absolute;
  left: 50%;
  bottom: 38%;
  margin-left: clamp(56px, 7.5vw, 84px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--text-muted);
}

/* a linha de chamada: cota de blueprint saindo do topo da massa */
.thx-anno--reach::before {
  content: '';
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}


.thx-lead strong { font-weight: 600; color: var(--text-primary); }



/* 04 — sedimento. A mesma base do tempo 03 vista de perfil, engrossando: nao ha
   eixo, escala nem numero. A banda de cima e a de hoje e e a unica em accent. */
/* 03 — o chao compartilhado. A MESMA materia do 02, virada: la ela era carga
   sobre um apoio, aqui e chao sob muitas tomadas. Espelho vertical de proposito
   — a inversao E o destravamento. E o unico corpo ACESO da sequencia ate aqui. */
.thx-ground {
  max-width: var(--measure-title);
  margin: var(--space-8) auto 0;
  position: relative;
}

.thx-taps {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: clamp(30px, 4vw, 44px);
  padding: 0 clamp(6px, 2vw, 24px);
}

.thx-tap {
  flex: 0 0 auto;
  width: 3px;
  height: 62%;
  border-radius: 1px 1px 0 0;
  background: rgba(255, 255, 255, 0.22);
}

.thx-tap--you {
  width: 9px;
  height: 100%;
  background: var(--accent-color);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.75);
}

.thx-anno--you {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: var(--space-4);
  transform: translateY(-2px);
  white-space: nowrap;
  color: var(--text-primary);
}

.thx-ground-plate {
  background: linear-gradient(180deg, rgba(160, 162, 245, 0.75), rgba(99, 102, 241, 0.30));
  box-shadow: 0 -10px 34px rgba(99, 102, 241, 0.30);
}

.thx-ground-mass {
  height: clamp(88px, 12vw, 128px);
  border-top: none;
  border-color: rgba(99, 102, 241, 0.30);
  background-color: rgba(99, 102, 241, 0.05);
  background-image:
    linear-gradient(to right, rgba(140, 143, 255, 0.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 143, 255, 0.20) 1px, transparent 1px);
}

.thx-strata {
  max-width: var(--measure-title);
  margin: var(--space-8) auto 0;
}

.thx-strata-cap {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.thx-strata-cap--then {
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}

.thx-strata-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(99, 102, 241, 0.32);
  border-bottom: 1px solid var(--border-light);
}

.thx-band {
  display: block;
  height: 8px;
  border-radius: 2px;
}

.thx-adds {
  list-style: none;
  margin: var(--space-5) auto 0;
  padding: 0;
  max-width: var(--measure-title);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.thx-add {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* 05 — o fecho. Um objeto so, muito ar, e a luz vindo de baixo e de fora do
   quadro: a fundacao do tempo 03 continua la, voce so nao a ve. */




/* 05 — o fio e o leque. O UNICO objeto vertical da secao (01 a 04 sao todos
   composicoes horizontais) e o unico em SVG. A assimetria entre o que entra e o
   que sai E o argumento: pouquissimo de um lado, a largura inteira do outro. */
.thx-out {
  max-width: var(--measure-title);
  margin: var(--space-8) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thx-out-in {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: clamp(52px, 7vw, 76px);
}

.thx-out-wire {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(140, 143, 255, 0.65));
}

.thx-anno--in {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: var(--space-4);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--text-muted);
}

.thx-anno--in::before {
  content: '';
  width: clamp(14px, 2.5vw, 28px);
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
}

.thx-out-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 20vw, 210px);
  height: clamp(52px, 6.5vw, 68px);
  border: 1px solid rgba(99, 102, 241, 0.5);
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 34px rgba(99, 102, 241, 0.24);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.thx-out-fan {
  display: block;
  width: 100%;
  height: clamp(118px, 16vw, 176px);
}

.thx-anno--out {
  margin-top: var(--space-3);
  color: var(--text-secondary);
}

.thx-statement {
  max-width: var(--measure-title);
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: clamp(1.625rem, 3.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}

/* 02 — a carga e o pilar. A laje e LARGA (e muita coisa) e BAIXA (nao disputa
   area com 03/04/05), e nao emite luz. O balanco e o argumento. */
.thx-load {
  max-width: var(--measure-title);
  margin: var(--space-8) auto 0;
}

.thx-load-mass {
  height: clamp(38px, 5vw, 52px);
  border-bottom: none;
}

.thx-load-plate {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
}

.thx-load-under {
  position: relative;
  height: clamp(76px, 10vw, 104px);
}

.thx-load-pillar {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: clamp(34px, 4vw, 46px);
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}

.thx-anno--pillar {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: clamp(30px, 3.5vw, 42px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--text-muted);
}

.thx-anno--pillar::before {
  content: '';
  width: clamp(14px, 2.5vw, 30px);
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

/* a legenda: o que a materia E. Anota a figura, nao substitui a figura. */
.thx-legend {
  max-width: var(--measure-read);
  margin: var(--space-5) auto 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* as marcas: pequenas, vazias, anonimas — e uma delas e voce */


/* a haste que pluga a marca na fundacao */

/* a marca anonima: uma barra tarjada, nunca um logo inventado */


/* a fundacao: o maior e o unico objeto aceso do quadro */

/* ── MOBILE (r26) ─────────────────────────────────────────────────────────
   No fim do bloco de proposito: as regras base dos tempos 02, 03 e 05 sao
   declaradas depois desta media query no arquivo, e a ordem, nao a media
   query, decide quem ganha quando a especificidade empata. Estava aqui em
   cima e duas anotacoes escapavam do quadro em 375.
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
  .thx-legend { font-size: 0.625rem; line-height: 1.9; }
  .thx-out-node { font-size: 0.8125rem; }
  /* as anotacoes laterais ancoram na BORDA ESQUERDA da figura em telas
     estreitas: a 50% + margin elas escapavam do quadro em 375. Sem linha de
     chamada, porque a esta largura ela viraria um risco atravessando o desenho. */
  .thx-anno--reach,
  .thx-anno--pillar,
  .thx-anno--in {
    left: 0;
    margin-left: 0;
  }
  .thx-anno--reach::before,
  .thx-anno--pillar::before,
  .thx-anno--in::before { display: none; }
  .thx-anno--you { margin-left: var(--space-2); }
  .thx-tap { width: 2px; }
  .thx-tap--you { width: 7px; }
  .thx-band { height: 6px; }
  .thx-adds { gap: var(--space-2); }
  .thx-add { padding: var(--space-2) var(--space-3); font-size: 0.75rem; }
  /* r48: abaixo de 900 a coluna de rotulo comeria a faixa: volta a empilhar
     exatamente como era, com o cabecalho centrado em cima. */
  .thx-act { margin-top: var(--space-12); display: block; }
  .thx-head { justify-content: center; }
  .thx-act > .thx-lead { text-align: center; margin: var(--space-6) auto 0; max-width: var(--measure-block); }
  .thx-act > *:not(.thx-head):not(.thx-lead) { max-width: var(--measure-title); margin-left: auto; margin-right: auto; }
  .thx-head { gap: var(--space-3); }
  .thx-lead { font-size: 0.9375rem; margin-top: var(--space-5); }
  .thx-note { font-size: 1rem; }
}

/* ==========================================================================
   RevenueLine (r34) — a linha que nao existia, em cinco tempos.

   SEQUENCIA "A TELA QUE APARECE": os tempos 01, 02 e 03 sao desenho de linha
   sobre preto; o 04 e a UNICA superficie de produto da secao, renderizada com
   fidelidade a partir do customer-dashboard; o 05 volta ao desenho do 01 com o
   outro lado preenchido. O contraste desenho/produto E o argumento.

   CONTRASTE (fundo #05070C): titulos e valores em --text-primary (18.33:1);
   corpo e rotulos em --text-secondary (7.86:1); anotacoes em --text-muted
   (4.54:1). Nada abaixo disso.
   ========================================================================== */

.roi-acts { list-style: none; margin: 0; padding: 0; }
.roi-act { margin-top: var(--stack-md); }
.roi-act:first-child { margin-top: 0; }

.roi-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-4);
}

.roi-num {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.10);
}

.roi-act-title {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
}

.roi-lead {
  max-width: var(--measure-read);
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── 01 — a regua e o lado vazio ──────────────────────────────────────────── */
.roi-ledger {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--space-8);
  align-items: start;
  max-width: var(--measure-block);
  margin: var(--space-8) auto 0;
}

.roi-rule { background: var(--border-strong); align-self: stretch; }

.roi-ledger-head {
  display: block;
  padding-bottom: var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.roi-ledger-head--empty { color: var(--text-muted); }

.roi-metrics { list-style: none; margin: 0; padding: 0; }

.roi-metric {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* o vazio e o objeto: ocupa a mesma altura da lista e nao tem nada dentro */
.roi-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 196px;
  border-top: 1px dashed var(--border-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── 02 — a conversa: silhueta assimetrica, o oposto da regua simetrica do 01 ─ */
.roi-talk {
  max-width: var(--measure-block);
  margin: var(--space-8) auto 0;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;
}

.roi-talk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roi-talk-case { color: var(--accent-color); }
.roi-talk-ch { color: var(--text-muted); }

.roi-talk-body { padding: var(--space-5); }

.roi-turn {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.roi-turn + .roi-turn { margin-top: var(--space-3); }

/* o cliente fala menos e pesa menos; a AI carrega a tinta */
.roi-turn--cust {
  max-width: 74%;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary);
}

.roi-turn--ai {
  max-width: 88%;
  margin-left: auto;
  border: 1px solid var(--border-light);
  border-left: 2px solid var(--accent-color);
  color: var(--text-primary);
}

.roi-talk-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.roi-talk-lbl {
  align-self: center;
  margin-right: var(--space-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.roi-talk-src {
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── 03 — o colapso: banda horizontal, terceira silhueta ───────────────────── */
.roi-collapse {
  display: grid;
  grid-template-columns: max-content 56px max-content;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: var(--space-8) auto 0;
}

.roi-collapse-from {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* o braco: a linha que leva a conversa ate o registro */
.roi-collapse-arm {
  position: relative;
  height: 1px;
  background: var(--border-strong);
}

.roi-collapse-arm::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}

.roi-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

/* cada campo e um endereco: o rotulo em cima, o valor embaixo */
.roi-rec-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) var(--space-5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

.roi-rec-f + .roi-rec-f { border-left: 1px solid var(--border-subtle); }

.roi-rec-k {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.roi-rec-v { font-size: 0.8125rem; color: var(--text-secondary); }
.roi-rec-f--id .roi-rec-v { color: var(--text-primary); }
.roi-rec-v--cat { color: var(--success-color); }
.roi-rec-v--dim { color: var(--text-muted); }

/* ── 04 — a tela: a unica superficie de produto da secao ───────────────────── */
.roi-act--screen { margin-top: var(--stack-md); }

.roi-screen {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-5);
  max-width: var(--content);
  margin: var(--space-8) auto 0;
  align-items: stretch;
}

.roi-panel {
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

.roi-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.roi-panel-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.roi-panel-of {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* a metrica primaria: e ela que abre a evidencia ao lado */
.roi-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-left: 2px solid var(--accent-color);
}

.roi-primary-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.roi-primary-v {
  font-size: clamp(2.25rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.roi-primary-roi { font-size: 0.875rem; color: var(--success-color); }

.roi-inds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.roi-ind {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-primary);
}

.roi-ind-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.roi-ind-v { font-size: 1rem; font-weight: 500; color: var(--text-primary); }

.roi-break { padding: var(--space-5); }

.roi-break-h {
  display: block;
  padding-bottom: var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.roi-break-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

.roi-break-k { color: var(--text-secondary); }

.roi-break-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-primary);
}

/* o drill-down: a mesma cifra, aberta nos tickets que a compoem */
.roi-ev { padding: var(--space-2) 0; }

.roi-ev-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}

.roi-ev-row + .roi-ev-row { border-top: 1px solid var(--border-subtle); }

.roi-ev-id { color: var(--text-primary); }
.roi-ev-who { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.roi-ev-grp { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.roi-ev-cat { color: var(--success-color); overflow: hidden; text-overflow: ellipsis; }
.roi-ev-ch { color: var(--text-muted); text-align: right; }

/* a marcacao de ilustrativo: uma vez, pequena, embaixo da tela */
.roi-illus {
  display: block;
  max-width: var(--content);
  margin: var(--space-3) auto 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── 05 — a virada: o desenho do 01 com o outro lado preenchido ────────────── */
.roi-pre {
  max-width: var(--measure-read);
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* nada de esticar: a assimetria entre um item e cinco E o argumento */
.roi-ledger--filled .roi-rule { align-self: stretch; }

.roi-metric--one { color: var(--text-primary); }
.roi-metric--val { color: var(--text-secondary); }

/* a esquerda fecha; a direita nao */
.roi-cap,
.roi-uncap {
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roi-cap {
  border-top: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.roi-uncap {
  border-top: 1px dashed var(--border-light);
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .roi-screen { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .roi-section h2 { font-size: 2.25rem !important; }
}

@media (max-width: 640px) {
  .roi-act { margin-top: var(--space-12); }
  .roi-head { gap: var(--space-3); }
  .roi-ledger { grid-template-columns: 1fr; gap: var(--space-6); }
  .roi-rule { display: none; }
  .roi-empty { min-height: 96px; }
  .roi-lead { font-size: 0.9375rem; }
  .roi-talk-body { padding: var(--space-4); }
  .roi-turn--cust, .roi-turn--ai { max-width: 100%; }
  .roi-collapse { grid-template-columns: 1fr; gap: var(--space-3); justify-items: start; }
  .roi-collapse-arm { width: 1px; height: 28px; margin-left: var(--space-4); }
  .roi-collapse-arm::after { right: auto; top: auto; bottom: 0; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .roi-record { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-subtle); }
  .roi-record .roi-rec-f { background: var(--bg-primary); }
  .roi-record .roi-rec-f + .roi-rec-f { border-left: none; }
  .roi-record .roi-rec-f:last-child { grid-column: span 2; }
  .roi-rec-f { padding: var(--space-2) var(--space-3); }
  .roi-rec-v { font-size: 0.75rem; }
  .roi-primary { padding: var(--space-5) var(--space-4) var(--space-4); }
  .roi-inds { grid-template-columns: 1fr; }
  .roi-break { padding: var(--space-4); }
  .roi-ev-row { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); white-space: normal; }
  .roi-ev-id { grid-column: 1; }
  .roi-ev-ch { text-align: right; }
  .roi-ev-cat { grid-column: 1 / -1; }
  .roi-illus { text-align: left; }
}