/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Background */
  --dark: #231f20;

  /* Cream with opacity variants */
  --cream: #fffaec;
  --cream-dd: rgba(255, 250, 236, 0.867);
  --cream-cc: rgba(255, 250, 236, 0.800);
  --cream-bb: rgba(255, 250, 236, 0.733);
  --cream-aa: rgba(255, 250, 236, 0.667);
  --cream-a6: rgba(255, 250, 236, 0.651);
  --cream-80: rgba(255, 250, 236, 0.502);
  --cream-60: rgba(255, 250, 236, 0.376);
  --cream-50: rgba(255, 250, 236, 0.314);
  --cream-40: rgba(255, 250, 236, 0.251);
  --cream-35: rgba(255, 250, 236, 0.212);
  --cream-30: rgba(255, 250, 236, 0.188);
  --cream-25: rgba(255, 250, 236, 0.153);
  --cream-20: rgba(255, 250, 236, 0.125);
  --cream-15: rgba(255, 250, 236, 0.094);
  --cream-12: rgba(255, 250, 236, 0.071);
  --cream-10: rgba(255, 250, 236, 0.063);
  --cream-08: rgba(255, 250, 236, 0.047);
  --cream-06: rgba(255, 250, 236, 0.024);
  --cream-05: rgba(255, 250, 236, 0.020);
  --cream-03: rgba(255, 250, 236, 0.012);

  /* Accent colors */
  --amber: #d4883a;
  --blue: #4a9eda;
  --green-online: #4a9e6b;
  --crimson: #c41828;
  --dusty-rose: #e8a0a5;
  --sage: #8fb898;

  /* Semantic tokens */
  --amended-bg: rgba(190, 84, 39, 0.125);
  --accepted-bg: rgba(122, 158, 126, 0.094);
  --lawyer-cursor-bg: rgba(196, 24, 40, 0.188);
  --alef-tag-bg: rgba(196, 24, 40, 0.145);
  --terminal-bg: #141112;
  --terminal-chrome: #1c1819;
  --slack-bg: #2d292a;
  --slack-sidebar-bg: rgba(40, 36, 37, 0.565);
  --avatar-sarah: #5b7da8;
  --avatar-david: #8a6e4e;
  --reaction-bg: rgba(212, 136, 58, 0.082);

  /* Layout */
  --max-width: 1440px;

  /* Typography */
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--dark);
  color: var(--cream);
  overflow-x: hidden;
}

img { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. FIXED NAV
   ═══════════════════════════════════════════════════════════════════════════ */

.top-logo {
  position: fixed;
  top: 24px;
  left: 60px;
  z-index: 1000;
  height: 28px;
  width: auto;
  opacity: 0.85;
}

.manifesto-btn {
  position: fixed;
  top: 24px;
  right: 40px;
  z-index: 1000;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
  opacity: 0.65;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: opacity 0.25s ease;
}

.manifesto-btn:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: -10%;
  will-change: transform;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--dark);
  opacity: 0.4;
  will-change: opacity;
  z-index: 1;
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 40px 70px 60px;
  z-index: 2;
  will-change: opacity, transform;
}

.hero-title {
  font-size: clamp(80px, 11.1vw, 160px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--cream);
  margin-bottom: 16px;
}

.hero-tagline {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--cream);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. BREATHER
   ═══════════════════════════════════════════════════════════════════════════ */

.breather {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
}

.breather-inner {
  padding-left: 120px;
  max-width: 900px;
}

.breather-heading {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.breather-sub {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream-60);
  max-width: 560px;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.breather-label-row {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.breather-line {
  width: 60px;
  height: 1px;
  background: var(--cream-25);
  flex-shrink: 0;
}

.breather-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--cream-25);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. STEP SECTIONS (SHARED)
   ═══════════════════════════════════════════════════════════════════════════ */

.step {
  height: 100vh;
  height: 100dvh;
  position: relative;
  display: flex;
  align-items: center;
}

.step-content {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  height: 100%;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.step-text {
  flex-shrink: 0;
  width: 480px;
  opacity: 0;
  transform: translateX(-30px);
  will-change: opacity, transform;
}

.step-text p {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--cream-60);
}

.step-text--top {
  position: absolute;
  top: 100px;
  left: 60px;
  width: 600px;
}

.step-text--top p {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--cream-60);
}

.step-2 .step-content {
  align-items: flex-start;
  padding-top: 220px;
}

.step-visual {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-visual--split {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Window chrome (shared) ── */

.window-chrome {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  border-bottom: 1px solid var(--cream-06);
  flex-shrink: 0;
}

.chrome-dots {
  display: flex;
  gap: 6px;
}

.chrome-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream-08);
}

.chrome-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--cream-40);
}


/* ── Slack Window ── */

.slack-window {
  width: 680px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--slack-bg);
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.slack-window--thread {
  width: 720px;
}

.slack-body {
  display: flex;
  height: 404px;
}

.slack-window--thread .slack-body {
  height: 624px;
}

.slack-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--slack-sidebar-bg);
  padding: 20px 0 0;
  border-right: 1px solid var(--cream-06);
  position: relative;
}

.sidebar-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--cream-20);
  padding: 0 16px;
  margin-bottom: 12px;
}

.sidebar-channel {
  position: relative;
  padding: 4px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--cream-25);
  cursor: default;
}

.sidebar-channel--active {
  color: var(--cream);
  font-weight: 500;
}

.active-bar {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--cream-30);
}

.slack-messages {
  flex: 1;
  padding: 20px 24px;
  overflow: hidden;
}


/* ── Message ── */

.slack-msg {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.slack-msg--faded { opacity: 0.35; }

.msg-avatar {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.msg-avatar--lg {
  width: 34px;
  height: 34px;
}

.avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--cream);
}

.avatar-circle--sarah { background: var(--avatar-sarah); }
.avatar-circle--david { background: var(--avatar-david); }

.online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-online);
  border: 2px solid var(--slack-bg);
}

.msg-body { flex: 1; min-width: 0; }

.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.msg-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-dd);
}

.msg-name--sm {
  font-size: 13px;
  color: var(--cream-25);
}

.msg-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}

.msg-tag--alef {
  background: var(--alef-tag-bg);
  color: var(--dusty-rose);
}

.msg-time {
  font-size: 11px;
  color: var(--cream-25);
}

.msg-time--dim { color: var(--cream-15); }

.msg-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-aa);
}

.msg-text--sm {
  font-size: 13px;
  color: var(--cream-25);
  line-height: 1.5;
}

.msg-summary {
  margin: 8px 0;
  padding-left: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream-aa);
}

.msg-summary li::before {
  content: '  \2022  ';
  color: var(--cream-30);
}

.msg-text--dim { color: var(--cream-50); }


/* ── File Attachment ── */

.file-attachment {
  display: flex;
  align-items: stretch;
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream-06);
  max-width: 240px;
}

.file-attachment--lg { max-width: 280px; }

.file-bar {
  width: 3px;
  flex-shrink: 0;
  background: var(--blue);
}

.file-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.file-icon {
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-30);
}

.file-name {
  font-size: 12px;
  color: var(--cream-60);
}

.file-name--bright { color: var(--cream-50); }


/* ── Reactions ── */

.msg-reactions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.reaction-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 13px;
  background: var(--reaction-bg);
  color: var(--cream-50);
  cursor: default;
}

.reaction-pill--blue {
  background: rgba(90, 125, 168, 0.082);
}


/* ── Thread separator ── */

.thread-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
}

.thread-sep-line {
  flex: 1;
  height: 1px;
  background: var(--cream-08);
}

.thread-count {
  font-size: 11px;
  color: var(--cream-40);
  white-space: nowrap;
}

.thread-count--blue { color: var(--blue); }
.thread-count--dim { color: rgba(74, 158, 218, 0.376); }


/* ── Terminal ── */

.terminal {
  width: 560px;
  height: 560px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--terminal-bg);
  opacity: 0;
  transform: translateX(-20px);
  will-change: opacity, transform;
}

.terminal-chrome {
  height: 38px;
  background: var(--terminal-chrome);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  border-bottom: 1px solid var(--cream-05);
}

.terminal-chrome .chrome-dots span {
  background: var(--cream-10);
}

.terminal-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-25);
}

.terminal-body {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  position: relative;
  height: calc(100% - 38px);
  overflow: hidden;
}

.terminal-scroll {
  padding: 18px 20px;
  will-change: transform;
}

.tl {
  opacity: 0;
  will-change: opacity;
  white-space: pre-wrap;
  color: var(--cream-30);
}

.tl--cmd { color: var(--cream-60); }
.tl--dim { color: var(--cream-20); }
.tl--sub { color: var(--cream-30); }
.tl--ok { color: var(--cream-30); }
.tl--warn { color: var(--amber); }
.tl--action { color: var(--cream-40); }
.tl--result { color: var(--cream-50); }
.tl--ref { color: var(--cream-50); }
.tl--section { color: var(--cream-30); }
.tl--spacer { height: 8px; }

.t-ok { color: var(--cream-30); }
.t-warn { color: var(--amber); }
.t-ref { color: var(--cream-50); }

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--cream-50);
  margin-top: 6px;
  animation: blink 1.1s step-end infinite;
  opacity: 0;
  will-change: opacity;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* ── Vertical Divider (Step 2 split) ── */

.divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--cream-06);
  margin: 0 30px;
  flex-shrink: 0;
}

.doc-label {
  position: absolute;
  top: 98px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--cream-20);
}

.doc-label--right {
  right: 60px;
}

.doc-rule {
  position: absolute;
  top: 120px;
  right: 60px;
  width: 200px;
  height: 1px;
  background: var(--cream-06);
}


/* ── Document States ── */

.doc-states {
  position: relative;
  flex: 1;
  min-height: 560px;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.step-3 .doc-states {
  min-height: 580px;
}

.doc-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  z-index: 1;
}

.doc-state.is-active {
  opacity: 1;
  z-index: 2;
}

.doc-inner {
  background: var(--cream-05);
  border-radius: 4px;
  padding: 28px;
  height: 100%;
  overflow: hidden;
}


/* ── Document content ── */

.doc-section {
  position: relative;
  margin-bottom: 24px;
}

.doc-scan-glow {
  position: absolute;
  inset: -8px -14px;
  border-radius: 8px;
  background: rgba(255, 250, 236, 0.06);
  border: 1px solid rgba(255, 250, 236, 0.08);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.doc-section-hd {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cream-50);
  margin-bottom: 8px;
}

.doc-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--cream-40);
}

.doc-strike {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cream-15);
  text-decoration: line-through;
  text-decoration-color: var(--cream-15);
  margin-top: 4px;
}


/* ── Animated document (Step 2) ── */

.doc-animated {
  flex: 1;
  height: 560px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* Text that will get struck through — starts normal, dims via GSAP */
.doc-body--strikeable {
  position: relative;
  width: fit-content;
}

/* The strikethrough line that draws across the text — child of .doc-body--strikeable */
.doc-strike-overlay {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: var(--cream-40);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  pointer-events: none;
}

/* Elements that reveal left-to-right (insert text, cursor) */
.doc-reveal {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/* When revealed, insert bar also fades in */
.doc-reveal .doc-insert-bar {
  opacity: 0;
  will-change: opacity;
}

.doc-insert-wrap {
  position: relative;
  margin-top: 4px;
  padding-left: 12px;
}

.doc-insert-wrap--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Step 2 animated typing: use inline flow (not flex) so cursor follows text naturally */
.doc-animated .doc-insert-wrap {
  display: block;
}

.doc-insert-bar {
  position: absolute;
  left: 0;
  top: 2px;
  width: 3px;
  height: calc(100% - 4px);
  border-radius: 2px;
  background: var(--cream-50);
}

.doc-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.doc-inline-row .doc-strike {
  margin-top: 0;
  display: inline;
}

.doc-insert-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-insert-bar-inline {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--cream-50);
  flex-shrink: 0;
}

.doc-inline-row .doc-insert {
  margin: 0;
}

.doc-inline-row .cursor-lawyer,
.doc-insert-wrap--inline .cursor-lawyer {
  margin-top: 0;
}

.doc-insert {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cream-cc);
}

.doc-insert--lawyer { color: var(--cream-bb); }

.doc-gap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.doc-gap-line {
  height: 5px;
  border-radius: 3px;
  background: var(--cream-06);
  max-width: 100%;
}


/* ── Cursors ── */

.cursor-agent,
.cursor-lawyer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.cursor-line {
  width: 2px;
  height: 18px;
  border-radius: 1px;
  animation: blink 0.9s step-end infinite;
}

.cursor-line--agent { background: var(--cream-80); }
.cursor-line--lawyer { background: var(--crimson); }

.cursor-pill {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}

.cursor-pill--agent {
  background: var(--cream-15);
  color: var(--cream-cc);
}

.cursor-pill--lawyer {
  background: var(--lawyer-cursor-bg);
  color: var(--dusty-rose);
}


/* ── Badges ── */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge--amended {
  background: var(--amended-bg);
  color: var(--amber);
}

.badge--accepted {
  background: var(--accepted-bg);
  color: var(--sage);
}


/* ── Slack States (Step 4) ── */

.slack-states {
  position: relative;
  width: 720px;
  height: 660px;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.slack-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  z-index: 1;
}

.slack-state.is-active {
  opacity: 1;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7b. STEP 2B — THREE-PANEL LAYOUT + FINDINGS SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.step-2b .step-content {
  align-items: flex-start;
  padding-top: 220px;
}

.step-text--2b {
  width: 600px;
}

.step-visual--triple {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

/* Narrower terminal for 3-panel */
.terminal--sm {
  width: 420px;
  height: 560px;
}

/* Narrower document for 3-panel */
.doc-animated--sm {
  width: 420px;
  height: 560px;
  flex: none;
}


/* ── Findings Panel ── */

.findings-panel {
  width: 370px;
  height: 560px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--cream-08);
  padding: 24px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.findings-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.findings-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--cream-40);
}

.findings-count {
  font-size: 10px;
  color: var(--cream-25);
  opacity: 0;
  will-change: opacity;
}

.findings-divider {
  height: 1px;
  background: var(--cream-12);
  margin-bottom: 12px;
}

.findings-divider--bottom {
  margin-top: 16px;
  margin-bottom: 8px;
}


/* ── Finding Card ── */

.finding-card {
  position: relative;
  padding: 14px;
  border-radius: 6px;
  background: rgba(255, 250, 236, 0.039);
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.finding-dot {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.finding-dot--conflict { background: var(--amber); }
.finding-dot--missing { background: rgba(212, 136, 58, 0.502); }

.finding-section {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--cream-aa);
  padding-left: 14px;
  margin-bottom: 6px;
}

.finding-severity {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
}

.finding-severity--conflict { color: var(--amber); }
.finding-severity--missing { color: rgba(212, 136, 58, 0.502); }

.finding-desc {
  font-size: 11px;
  line-height: 1.6;
  color: var(--cream-50);
  margin-bottom: 10px;
}

.finding-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finding-source-tag {
  font-size: 9px;
  font-weight: 500;
  color: var(--cream-60);
  background: var(--cream-15);
  padding: 3px 10px;
  border-radius: 3px;
}

.finding-action {
  font-size: 10px;
  color: var(--cream-40);
}


/* ── Sources Footer ── */

.findings-sources-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cream-25);
  margin-bottom: 8px;
  opacity: 0;
  will-change: opacity;
}

.findings-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  opacity: 0;
  will-change: opacity;
}

.findings-source-ref {
  font-size: 9px;
  color: var(--cream-40);
  background: rgba(255, 250, 236, 0.039);
  padding: 4px 8px;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.cta {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 0 120px;
}

.cta-heading {
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -2.5px;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.cta-sub {
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cream-35);
  max-width: 500px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.cta-form {
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.cta-input {
  width: 420px;
  height: 52px;
  background: var(--cream-08);
  border: 1px solid var(--cream-10);
  border-radius: 6px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--cream);
  outline: none;
  transition: border-color 0.2s ease;
}

.cta-input::placeholder { color: var(--cream-20); }
.cta-input:focus { border-color: var(--cream-30); }

.cta-btn {
  width: 140px;
  height: 52px;
  background: var(--cream);
  color: var(--dark);
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.cta-btn:hover { opacity: 0.85; }


/* ═══════════════════════════════════════════════════════════════════════════
   9. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  position: absolute;
  bottom: 40px;
  left: 120px;
  font-size: 12px;
  color: var(--cream-15);
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .step-content {
    flex-direction: column;
    padding: 80px 40px 40px;
    gap: 32px;
    align-items: flex-start;
  }

  .step-text { width: 100%; max-width: 600px; }
  .step-text--top { position: relative; top: auto; left: auto; width: 100%; }

  .slack-window { width: 100%; max-width: 640px; }
  .terminal { width: 100%; max-width: 520px; }

  .step-visual--split,
  .step-visual--triple {
    flex-direction: column;
    gap: 24px;
  }

  .terminal--sm { width: 100%; max-width: 520px; height: auto; min-height: 400px; }
  .doc-animated--sm { width: 100%; max-width: 520px; height: auto; min-height: 400px; }
  .findings-panel { width: 100%; max-width: 520px; height: auto; }

  .divider-v { display: none; }
}

@media (max-width: 768px) {

  /* ── Nav ── */
  .top-logo { left: 20px; top: 20px; }
  .manifesto-btn { right: 20px; top: 20px; font-size: 12px; }

  /* ── Hero ── */
  .hero-content { padding: 0 20px 32px; }
  .hero-title { font-size: clamp(56px, 16vw, 80px); }
  .hero-tagline { font-size: 18px; }

  /* ── Breather ── */
  .breather-inner { padding: 0 20px; }
  .breather-heading {
    font-size: clamp(28px, 7.5vw, 36px);
    letter-spacing: -1px;
    margin-bottom: 24px;
  }
  .breather-sub { font-size: clamp(16px, 4.3vw, 20px); }
  .breather-line { width: 40px; }

  /* ── Step Sections ── */
  .step {
    height: auto;
    min-height: 100svh;
    overflow: hidden;
    align-items: flex-start;
  }
  .step-content {
    flex-direction: column;
    padding: 60px 20px 40px;
    gap: 24px;
    align-items: stretch;
    height: auto;
  }
  .step-text {
    width: 100% !important;
    max-width: 100%;
  }
  .step-text p { font-size: clamp(18px, 4.8vw, 22px); }
  .step-text--top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
  }
  .step-text--2b { width: 100% !important; }
  .step-2 .step-content,
  .step-2b .step-content { padding-top: 60px; }

  /* ── Slack Windows ── */
  .slack-window,
  .slack-window--thread {
    width: 100% !important;
    max-width: 100%;
  }
  .slack-sidebar { display: none; }
  .slack-body {
    height: auto;
    min-height: 280px;
    max-height: 400px;
  }
  .slack-window--thread .slack-body {
    height: auto;
    min-height: 320px;
    max-height: 500px;
  }
  .slack-messages { padding: 16px; }
  .msg-text { font-size: 13px; }
  .msg-name { font-size: 13px; }

  /* ── Terminal ── */
  .terminal,
  .terminal--sm {
    width: 100% !important;
    max-width: 100%;
    height: 360px !important;
  }
  .terminal-body { font-size: 10px; line-height: 1.55; }
  .terminal-scroll { padding: 12px 14px; }

  /* ── Document ── */
  .doc-animated,
  .doc-animated--sm {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 320px;
    flex: none;
  }
  .doc-inner { padding: 16px; }
  .doc-section-hd { font-size: 10px; }
  .doc-body { font-size: 12px; line-height: 1.6; }
  .doc-insert { font-size: 12px; }
  .doc-strike { font-size: 12px; }
  .doc-gap-line { width: 100% !important; }

  /* ── Doc States & Slack States ── */
  .doc-states {
    width: 100%;
    min-height: 520px !important;
    max-width: 100%;
  }
  .slack-states {
    width: 100% !important;
    max-width: 100%;
    min-height: 400px;
  }

  /* ── Split / Triple Layouts ── */
  .step-visual--split,
  .step-visual--triple {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  .divider-v { display: none; }

  /* ── Findings Panel ── */
  .findings-panel {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
  }

  /* ── CTA ── */
  .cta {
    height: auto;
    min-height: 100svh;
    padding: 80px 20px 60px;
  }
  .cta-heading { font-size: clamp(32px, 8.5vw, 44px); letter-spacing: -1.5px; }
  .cta-sub { font-size: 15px; }
  .cta-form { flex-direction: column; gap: 12px; }
  .cta-input { width: 100%; max-width: 100%; height: 48px; font-size: 14px; }
  .cta-btn { width: 100%; max-width: 100%; height: 48px; font-size: 14px; }

  /* ── Footer ── */
  .site-footer {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 40px;
  }
}