/* Dedendum - locked brand system · April 2026 */

:root {
  --bg: #F5F5F0;
  --bg-warm: #ECE4D1;
  --bg-cool: #E2ECE9;
  --surface-card: #E5E3DA;

  --ink: #1E2235;
  --ink-soft: #5F5E5A;
  --ink-warm: #5F4F2C;
  --ink-cool: #2E4A42;
  --ink-muted: #888780;

  --product-bg: #1E2235;
  --product-bg-elevated: #242840;
  --product-bg-raised: #2D3154;
  --on-product: #F5F5F0;
  --on-product-muted: #B4B2A9;

  --teal: #3DBDA1;
  --teal-ink: #1B8D78;
  --yellow: #F9C21A;
  --red: #FF5757;

  --border: rgba(30, 34, 53, 0.08);
  --border-strong: rgba(30, 34, 53, 0.16);
  --border-on-navy: rgba(245, 245, 240, 0.1);

  --max-width: 1160px;
  --max-text: 720px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01", "kern";
  font-variant-numeric: tabular-nums;
}

/* Typography - Poppins display only, DM Sans everything else */
h1, h2, h3 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 {
  font-size: clamp(40px, 5.6vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}
h2 {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h3 {
  font-size: clamp(22px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
h4 {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  margin: 0 0 0.5em;
  line-height: 1.4;
}

p { margin: 0 0 1em; max-width: var(--max-text); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; }

a {
  color: var(--teal-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 189, 161, 0.35);
  transition: border-color 120ms ease;
}
a:hover { border-color: var(--teal-ink); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin: 0.35em 0; }

/* Number emphasis */
.stat-number, .data {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-number { font-size: clamp(36px, 4.6vw, 56px); line-height: 1; }

/* Layout primitives */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 88px 0;
}
section.compact { padding: 64px 0; }

/* Section tiers - three only */
.tier-default { background: var(--bg); color: var(--ink); }
.tier-warm    { background: var(--bg-warm); color: var(--ink); }
.tier-cool    { background: var(--bg-cool); color: var(--ink); }

.tier-warm p.secondary { color: var(--ink-warm); }
.tier-cool p.secondary { color: var(--ink-cool); }
.tier-default p.secondary { color: var(--ink-soft); }

.eyebrow {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 640px;
}
.lede.secondary { color: var(--ink-soft); }

/* Header */
.site-header {
  background: #1E2235;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(1.2);
}
.site-header .brand { color: #F5F5F0; }
.site-header .nav a { color: rgba(245,245,240,0.85); }
.site-header .nav a:hover,
.site-header .nav a.active { color: #5CDFE9; }
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  border-bottom: none;
}
.brand img { height: 28px; width: auto; display: block; }
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  border-bottom: none;
}
.nav a:hover { color: var(--teal-ink); }
.nav a.active { color: var(--teal-ink); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--teal);
  color: #0C2A22;
  border-color: var(--teal);
}
.btn-primary:hover { background: var(--teal-ink); color: #fff; border-color: var(--teal-ink); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-on-dark {
  background: var(--teal);
  color: #0C2A22;
  border-color: var(--teal);
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }

/* Hero */
.hero { padding: 96px 0 80px; }
.hero h1 { max-width: 12ch; }
.hero .subhead {
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 16px 0 0;
}

/* Two-column grid utility */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}
@media (max-width: 800px) {
  .cols-3 { grid-template-columns: 1fr; }
}

/* Cards on light surfaces */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px;
}
.tier-warm .card { background: #F3ECDE; border-color: rgba(95, 79, 44, 0.12); }
.tier-cool .card { background: #EDF2EF; border-color: rgba(46, 74, 66, 0.12); }

/* Stat blocks */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .stat-number { display: block; }
.stat .stat-label { color: var(--ink-soft); font-size: 14px; max-width: 30ch; }
.tier-cool .stat .stat-label { color: var(--ink-cool); }
.tier-warm .stat .stat-label { color: var(--ink-warm); }

/* Step list (Capture → Validate → Deliver) */
.steps { counter-reset: step; display: grid; gap: 24px; margin-top: 28px; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.step:first-child { border-top: none; padding-top: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Product-UI mockup cards - navy, only place navy is allowed */
.product-ui {
  background: var(--product-bg);
  color: var(--on-product);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid var(--border-on-navy);
  max-width: 520px;
  font-family: "DM Sans", sans-serif;
}
.product-ui .ui-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-product-muted);
  margin-bottom: 12px;
}
.product-ui .ui-body {
  font-size: 17px;
  line-height: 1.5;
  color: var(--on-product);
  margin: 0;
  max-width: none;
}
.product-ui .ui-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-on-navy);
  font-size: 13px;
  color: var(--on-product-muted);
}
.product-ui .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(61, 189, 161, 0.18);
  color: var(--teal);
  border: 1px solid rgba(61, 189, 161, 0.3);
}
.product-ui .badge.medium { background: rgba(249, 194, 26, 0.15); color: var(--yellow); border-color: rgba(249, 194, 26, 0.3); }

/* Quote */
.quote {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-size: 19px;
  line-height: 1.5;
  max-width: 620px;
  color: var(--ink);
}
.quote-attribution {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Inline note */
.note {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 18px 20px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: var(--max-text);
}

/* Footer */
.site-footer {
  background: #1E2235;
  border-top: 1px solid rgba(245,245,240,0.08);
  padding: 56px 0 40px;
  color: rgba(245,245,240,0.62);
  font-size: 14px;
}
.site-footer .footer-brand,
.site-footer .footer-col h4 { color: #F5F5F0 !important; }
.site-footer .footer-col a  { color: rgba(245,245,240,0.65); }
.site-footer .footer-col a:hover { color: #F5F5F0; }
.site-footer .footer-bottom { border-top-color: rgba(245,245,240,0.08); }
.site-footer .footer-canada {
  border-color: rgba(245,245,240,0.18);
  background: rgba(245,245,240,0.04);
  color: #F5F5F0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-brand { color: var(--ink); }
.footer-brand img { height: 24px; }
.footer-canada {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(30,34,53,0.14);
  background: rgba(30,34,53,0.03);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-canada img { width: 16px; height: 16px; display: block; }
.footer-col h4 {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 6px 0; }
.footer-col a { color: var(--ink-soft); border-bottom: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

/* Hero dot grid - atmospheric only */
.hero-grid {
  background-image: radial-gradient(circle, rgba(30, 34, 53, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Mobile nav - simplified */
@media (max-width: 640px) {
  .nav { gap: 16px; }
  .nav a.hide-mobile { display: none; }
}

/* Utility */
.grid-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.divider { height: 1px; background: var(--border); margin: 0; border: 0; }

.kicker-line {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

/* Governing line - the trust architecture sentence */
.governing-line {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 640px;
  margin: 24px 0 0;
}

/* ---------------------------------------------------------------------------
   Hero - Knowledge Visor (variation A)
   Composition: copy left, animated SVG right. Reduced-motion shows lock-in.
   --------------------------------------------------------------------------- */

.hero-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero-copy { max-width: 560px; }

.hero-caption {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 440px;
}

.hero-scene {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 520 / 620;
  margin: 0 auto;
}
.hero-scene svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

@media (max-width: 900px) {
  .hero-grid-layout { grid-template-columns: 1fr; gap: 32px; }
  .hero-scene { max-width: 440px; }
}

/* ---- Knowledge Visor animation -----------------------------------------
   Total cycle: ~7.2s · holds after lock-in, data fragments cycle in place.
   All SVG children use CSS transforms on fill-box origins.
------------------------------------------------------------------------- */

.hero-scene .worker {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: worker-breathe 6.4s ease-in-out 0s infinite;
}
@keyframes worker-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.6px); }
}

.hero-scene .trail-lines .trail {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  opacity: 0;
}
.hero-scene .trail-1 { animation: trail-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards; }
.hero-scene .trail-2 { animation: trail-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards; }
@keyframes trail-draw {
  0%   { stroke-dashoffset: 180; opacity: 0; }
  40%  { opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.hero-scene .visor {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: translate(170px, -135px) rotate(-4deg) scale(0.92);
  opacity: 0;
  animation: visor-arrive 2.3s cubic-bezier(0.16, 0.84, 0.24, 1) 0.4s forwards;
}
@keyframes visor-arrive {
  0%   { transform: translate(170px, -135px) rotate(-4deg) scale(0.92); opacity: 0; }
  18%  { opacity: 0.35; }
  55%  { transform: translate(60px, -44px) rotate(-1.8deg) scale(0.96); opacity: 0.65; }
  82%  { transform: translate(8px, -6px) rotate(-0.4deg) scale(0.99); opacity: 0.85; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.96; }
}

/* subtle internal parallax - back plane drifts a touch slower than front */
.hero-scene .plane-back  { transform-box: fill-box; transform-origin: 50% 50%; animation: plane-drift-back  8s ease-in-out 3s infinite; }
.hero-scene .plane-mid   { transform-box: fill-box; transform-origin: 50% 50%; animation: plane-drift-mid   8s ease-in-out 3s infinite; }
.hero-scene .plane-front { transform-box: fill-box; transform-origin: 50% 50%; animation: plane-drift-front 8s ease-in-out 3s infinite; }
@keyframes plane-drift-back  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-1.5px, 0.6px); } }
@keyframes plane-drift-mid   { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-0.7px, 0.3px); } }
@keyframes plane-drift-front { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0.8px, -0.4px); } }

.hero-scene .visor-lock-line {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  opacity: 0;
  animation: lock-line 0.85s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards, lock-hold 4s ease-in-out 3.35s infinite;
}
@keyframes lock-line {
  0%   { stroke-dashoffset: 180; opacity: 0; }
  100% { stroke-dashoffset: 0;   opacity: 0.95; }
}
@keyframes lock-hold {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1;    }
}

.hero-scene .eye-arcs {
  opacity: 0;
  animation: eye-arcs-in 0.5s ease-out 2.75s forwards;
}
.hero-scene .eye-arcs path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: arc-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 2.75s forwards;
}
@keyframes eye-arcs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes arc-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }

.hero-scene .validation-stamp {
  opacity: 0;
  animation: stamp-in 0.6s ease-out 2.95s forwards;
}
@keyframes stamp-in { from { opacity: 0; } to { opacity: 1; } }

.hero-scene .frag { opacity: 0; }
.hero-scene .frag-1 { animation: frag-in 0.4s ease-out 2.15s forwards, frag-cycle-1 5.2s ease-in-out 3.8s infinite; }
.hero-scene .frag-2 { animation: frag-in 0.4s ease-out 2.25s forwards, frag-cycle-2 5.2s ease-in-out 4.1s infinite; }
.hero-scene .frag-3 { animation: frag-in 0.4s ease-out 2.35s forwards, frag-cycle-3 5.2s ease-in-out 4.4s infinite; }
@keyframes frag-in {
  from { opacity: 0; transform: translateX(-2px); }
  to   { opacity: 0.75; transform: translateX(0); }
}
@keyframes frag-cycle-1 { 0%,100% { opacity: 0.75; } 50% { opacity: 0.4; } }
@keyframes frag-cycle-2 { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes frag-cycle-3 { 0%,100% { opacity: 0.85; } 50% { opacity: 0.55; } }

.hero-scene .overlay {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 0 0;
}
.hero-scene .overlay line,
.hero-scene .overlay circle,
.hero-scene .overlay text { transform-box: fill-box; }

.hero-scene .overlay-1 { animation: overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 3.15s forwards; }
.hero-scene .overlay-2 { animation: overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 3.40s forwards; }
.hero-scene .overlay-3 { animation: overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 3.65s forwards; }
.hero-scene .overlay-4 { animation: overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 3.90s forwards; }
@keyframes overlay-in {
  from { opacity: 0; transform: translate(-3px, 0); }
  to   { opacity: 1; transform: translate(0, 0); }
}

.hero-scene .overlay-3 circle {
  animation: attention-pulse 2.4s ease-in-out 4.2s infinite;
  transform-origin: center;
}
@keyframes attention-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---------------------------------------------------------------------------
   Agents block - ClickUp Super Agents section recreation
   Two stacked sections share a scroll-driven --p custom property:
   - title section: headline, CTAs, pinned mask that scales + translates down
   - layered section: agent portrait fades in with text overlays and pointer lines
   The mask from the title section lands on the agent's face in the layered one.
   --------------------------------------------------------------------------- */

.agents-block {
  --p: 0;          /* 0..1 overall scroll progress through block */
  --m: 0;          /* 0..1 mask flight progress (first phase) */
  --a: 0;          /* 0..1 agent reveal progress (second phase) */
  --t: 0;          /* 0..1 text overlay reveal (third phase) */
  position: relative;
  background: #1E2235;
  color: #F5F5F0;
  font-family: "Inter", "DM Sans", system-ui, sans-serif;
  overflow: hidden;
}

/* Title section ---------------------------------------------------------- */

.agents-title-section {
  position: relative;
  width: 100%;
  padding: 0;
  z-index: 10;
  background: #1E2235;
}

.agents-title-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 24px;
}

.agents-title {
  font-family: "Poppins", "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-align: center;
  max-width: 900px;
  margin: 0 0 24px;
  padding: 80px 20px 8px;
  background: linear-gradient(90deg, #F5F5F0 0%, #8F8F8F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.agents-trademark {
  display: inline-block;
  vertical-align: super;
  margin-left: 4px;
  -webkit-text-fill-color: initial;
}
.agents-trademark svg { display: inline-block; vertical-align: baseline; }

.agents-button-rail {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 0 0 56px;
}

.agents-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: "Inter", "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.25px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  text-align: center;
}
.agents-btn strong { font-weight: 500; color: inherit; }
.agents-btn strong span { color: inherit; }

.agents-btn-primary {
  background: #202020;
  color: #FFFFFF;
}
.agents-btn-primary:hover { background: #000000; }

.agents-btn-secondary {
  background: #F0F0F0;
  color: #202020;
}
.agents-btn-secondary:hover { background: #E6E6E6; }

/* Mask pin spacer - holds vertical space for the mask at its natural size.
   The mask itself is transformed via --m.  */
.agents-mask-pin {
  position: relative;
  width: 620px;
  max-width: 100%;
  height: 316px;
  margin: 10px 0 0 -15px;
  z-index: 20;
  overflow: visible;
}

.agents-mask {
  position: relative;
  display: block;
  width: 620px;
  max-width: 100%;
  height: auto;
  z-index: 20;
  transform-origin: 50% 50%;
  /* Mask flies straight down from its natural spot in the title section and
     lands on the agent's face (agent is centered at the bottom of the
     layered section). Final scale (~0.65) matches the baked-on mask width. */
  transform:
    translate(0, calc(var(--m, 0) * 510px))
    scale(calc(1 - var(--m, 0) * 0.70));
  will-change: transform;
}

/* Layered section -------------------------------------------------------- */

.agents-layered-section {
  position: relative;
  width: 100%;
  z-index: 9;
  padding: 0 0 96px;
  background: #1E2235;
}

.agents-layered-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.agents-layered-content {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 800px;
  margin: 0 auto;
  background: #1E2235;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}

.agents-gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 233, 232, 0) 0%, rgba(255, 91, 54, 0.23) 100%);
  pointer-events: none;
}

.agents-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

.agents-ellipse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.agents-agent-main,
.agents-agent-shadow {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  width: 560px;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}

.agents-agent-shadow {
  filter: blur(18px);
  opacity: 0.35;
  transform: translate(-50%, 10px);
}

.agents-agent-main {
  opacity: 1;
}

/* Text overlays - absolute-positioned, fade and rise in as --t grows ---- */

.agents-overlay {
  position: absolute;
  font-family: "Sometype Mono", "JetBrains Mono", "Courier New", monospace;
  color: #646464;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: calc(min(max((var(--t, 0) - 0.1) / 0.3, 0), 1));
  transform: translateY(calc((1 - min(max((var(--t, 0) - 0.1) / 0.3, 0), 1)) * 10px));
  transition: opacity 120ms linear;
  pointer-events: none;
}

.agents-overlay-1 {
  top: 536px;
  left: 420px;
  width: 270px;
  font-size: 40px;
  line-height: 50px;
}
.agents-overlay-2 {
  top: 320px;
  left: 980px;
  max-width: 159px;
  font-size: 40px;
  line-height: 50px;
}
.agents-overlay-3 {
  top: 320px;
  left: 280px;
  width: 187px;
  font-size: 16px;
  line-height: 22px;
}
.agents-overlay-4 {
  top: 592px;
  left: 960px;
  width: 230px;
  font-size: 16px;
  line-height: 22px;
}
.agents-overlay-5 {
  top: 200px;
  left: 830px;
  width: 150px;
  font-size: 14px;
  line-height: 17.5px;
}

.agents-pointer {
  display: block;
  position: absolute;
  overflow: visible;
}
.agents-pointer-1 {
  top: 12px;
  left: 180px;
}
.agents-pointer-2 {
  top: 12px;
  left: -240px;
}
.agents-pointer path {
  stroke-width: 1;
  stroke-dasharray: 300;
  stroke-dashoffset: calc((1 - min(max((var(--t, 0) - 0.25) / 0.35, 0), 1)) * 300);
  transition: stroke-dashoffset 80ms linear;
}

/* Bottom button rail */
.agents-button-rail-bottom {
  margin: 40px 0 0;
}

/* Reduced motion - show the final resolved state immediately ------------- */
@media (prefers-reduced-motion: reduce) {
  .agents-block { --m: 1; --a: 1; --t: 1; }
  .agents-mask { transform: translate(0, 640px) scale(0.58); }
  .agents-agent-main { opacity: 1; transform: none; }
  .agents-agent-shadow { opacity: 0.35; transform: translate(0, 8px); }
  .agents-overlay { opacity: 1; transform: none; }
  .agents-pointer path { stroke-dashoffset: 0; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1000px) {
  .agents-layered-content { height: 640px; }
  .agents-overlay-1 { top: 430px; left: 60px; font-size: 28px; line-height: 34px; width: 210px; }
  .agents-overlay-2 { top: 40px; left: 40px; font-size: 28px; line-height: 34px; }
  .agents-overlay-3 { top: 80px; left: 40px; font-size: 14px; }
  .agents-overlay-4 { top: 500px; left: auto; right: 30px; font-size: 14px; }
  .agents-overlay-5 { top: 30px; right: 30px; left: auto; font-size: 12px; }
  .agents-pointer { display: none; }
}

@media (max-width: 720px) {
  .agents-title { padding: 56px 16px 8px; font-size: clamp(34px, 8vw, 44px); }
  .agents-button-rail { flex-direction: column; margin-bottom: 32px; }
  .agents-mask-pin { width: 90vw; height: auto; margin: 0 auto; }
  .agents-mask { width: 90vw; }
  .agents-layered-content { height: 520px; border-radius: 0 0 24px 24px; }
  .agents-agent-main, .agents-agent-shadow { width: 560px; right: -60px; }
}

/* Reduced motion - skip the choreography, show the locked-in final state */
@media (prefers-reduced-motion: reduce) {
  .hero-scene .worker,
  .hero-scene .visor,
  .hero-scene .plane-back,
  .hero-scene .plane-mid,
  .hero-scene .plane-front,
  .hero-scene .visor-lock-line,
  .hero-scene .eye-arcs,
  .hero-scene .eye-arcs path,
  .hero-scene .validation-stamp,
  .hero-scene .frag,
  .hero-scene .overlay,
  .hero-scene .overlay-3 circle,
  .hero-scene .trail-lines .trail {
    animation: none !important;
  }
  .hero-scene .visor { transform: translate(0,0) rotate(0) scale(1); opacity: 0.96; }
  .hero-scene .visor-lock-line { stroke-dashoffset: 0; opacity: 0.9; }
  .hero-scene .eye-arcs { opacity: 1; }
  .hero-scene .eye-arcs path { stroke-dashoffset: 0; }
  .hero-scene .validation-stamp { opacity: 1; }
  .hero-scene .frag-1 { opacity: 0.75; }
  .hero-scene .frag-2 { opacity: 0.55; }
  .hero-scene .frag-3 { opacity: 0.85; }
  .hero-scene .overlay { opacity: 1; transform: translate(0,0); }
  .hero-scene .trail-lines .trail { opacity: 0; }
}

/* ===========================================================================
   Story pipeline - 4-section scroll-driven product narrative
   01 Capture · 02 Structure · 03 Embed · 04 Deliver (existing agents-block)
   Each section is a sticky 100vh stage. Per-section progress vars --s1/--s2/--s3
   are written by JS (see index.html script). All animated values flow from
   those. Waveform / record-dot use autonomous CSS keyframes so the capture
   card always reads "alive" regardless of scroll position.
   =========================================================================== */

.story-pipeline {
  --s1: 0; --s2: 0; --s3: 0;
  position: relative;
  background: var(--bg);
}

.story-section {
  position: relative;
  height: 160vh; /* scroll distance per section */
}
.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 64px;
  padding: 80px 32px;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.story-copy {
  max-width: 460px;
}
.story-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
}
.story-headline {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 14ch;
}
.story-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 460px;
}
.story-governing {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 0;
  max-width: 420px;
}

.story-visual {
  position: relative;
  width: 100%;
  height: 620px;
  max-height: calc(100vh - 160px);
}

/* ---------- Shared card look ---------- */
.story-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(30, 34, 53, 0.04), 0 12px 32px -12px rgba(30, 34, 53, 0.12);
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
}

/* =========================================================================
   SECTION 01 - CAPTURE
   ========================================================================= */

/* Section 01 uses the full 2-col grid for visual (expert + satellites),
   so we let this span both columns and position children absolutely. */
.story-capture .story-sticky {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  padding-top: 14px;
  padding-bottom: 14px;
}
.story-capture .story-visual {
  display: block;
  height: min(900px, calc(100vh - 28px));
  max-height: calc(100vh - 28px);
}

/* Claude Design React mount - the new Section 01 is a self-contained
   flat layout (~100vh), not a sticky-scroll section, so reset height
   and drop the sticky/grid rules so the React component lays itself out. */
.story-capture.story-capture-react {
  height: auto;
  min-height: 100vh;
  background: #1E2235;
  padding: 0;
}
.story-capture-mount {
  width: 100%;
  min-height: 100vh;
}
.story-expert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: auto;
  max-height: 82%;
  filter: drop-shadow(0 18px 36px rgba(30, 34, 53, 0.14));
  z-index: 2;
}
.story-expert .expert-mouth {
  transform-origin: 210px 284px;
  animation: expert-talk 0.85s ease-in-out infinite;
}
@keyframes expert-talk {
  0%, 100% { d: path("M 196 280 Q 210 286 224 280"); }
  50%      { d: path("M 196 280 Q 210 294 224 280"); }
}
.story-expert .expert-voicewaves .wave {
  opacity: 0;
  transform-origin: 252px 280px;
  animation: expert-wave 1.8s ease-out infinite;
}
.story-expert .wave-1 { animation-delay: 0s; }
.story-expert .wave-2 { animation-delay: 0.22s; }
.story-expert .wave-3 { animation-delay: 0.44s; }
@keyframes expert-wave {
  0%   { opacity: 0; transform: translateX(-6px) scaleX(0.6); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(14px) scaleX(1.1); }
}

.story-tether {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: calc(0.6 * min(var(--s1, 0) * 1.5, 1));
}
.story-tether path {
  stroke-dasharray: 600;
  stroke-dashoffset: calc(600 * (1 - min(var(--s1, 0) * 1.6, 1)));
}

/* Satellite cards - each is one moment of Dedendum's Expert Studio interview
   application, orbiting the centered expert figure. Navy product-UI surfaces
   (brand rule 19), DM Sans only (rule 18). */

.studio-card {
  position: absolute;
  width: 260px;
  padding: 20px 22px;
  border-radius: 10px;
  background: var(--product-bg);
  color: var(--on-product);
  border: 1px solid var(--border-on-navy);
  box-shadow: 0 1px 2px rgba(30, 34, 53, 0.08), 0 18px 36px -14px rgba(30, 34, 53, 0.22);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  z-index: 3;
  /* Each card reveals on --s1 progress, staggered below per variant */
  opacity: 0;
  transform: translateY(12px);
}

/* Positioning: corners around the centered expert figure */
.card-session    { top: 2%;   left: 0;   width: 240px; }
.card-question   { top: 2%;   right: 0;  width: 300px; }
.card-transcript { bottom: 2%; right: 0; width: 300px; }
.card-extract    { bottom: 2%; left: 0;  width: 260px; }

/* Reveal timing - staggered as --s1 grows */
.card-session    { opacity: calc(min(max((var(--s1, 0) - 0.02) / 0.22, 0), 1));
                   transform: translateY(calc((1 - min(max((var(--s1, 0) - 0.02) / 0.22, 0), 1)) * 12px)); }
.card-question   { opacity: calc(min(max((var(--s1, 0) - 0.10) / 0.22, 0), 1));
                   transform: translateY(calc((1 - min(max((var(--s1, 0) - 0.10) / 0.22, 0), 1)) * 12px)); }
.card-transcript { opacity: calc(min(max((var(--s1, 0) - 0.20) / 0.25, 0), 1));
                   transform: translateY(calc((1 - min(max((var(--s1, 0) - 0.20) / 0.25, 0), 1)) * 12px)); }
.card-extract    { opacity: calc(min(max((var(--s1, 0) - 0.32) / 0.28, 0), 1));
                   transform: translateY(calc((1 - min(max((var(--s1, 0) - 0.32) / 0.28, 0), 1)) * 12px)); }

/* Shared labels / helpers */
.studio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-product-muted);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.studio-label-mini {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-product-muted);
  font-weight: 500;
  min-width: 64px;
  display: inline-block;
}
.rec-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.18);
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 87, 87, 0.04); }
}

/* Session card - widened to fit the interview trail */
.card-session { width: 290px; }

/* Interview trail - shows Dedendum has been conducting a guided interview,
   not just transcribing. Past questions marked done; the one flagged as
   "deviation" is where the current follow-up is probing. */
.studio-trail {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 6px;
}
.studio-trail li {
  display: grid;
  grid-template-columns: 14px 38px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.32;
  color: var(--on-product-muted);
  font-variant-numeric: tabular-nums;
}
.studio-trail .trail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 245, 240, 0.12);
  align-self: center;
  margin-top: 2px;
}
.studio-trail li.done  .trail-dot { background: var(--teal); }
.studio-trail li.flagged .trail-dot { background: var(--yellow); box-shadow: 0 0 0 3px rgba(249, 194, 26, 0.15); }
.studio-trail li.active .trail-dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.22);
  animation: hud-dot-pulse 1.6s ease-in-out infinite;
}
.studio-trail .trail-n {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-product-muted);
}
.studio-trail li.done  .trail-q,
.studio-trail li.active .trail-q { color: var(--on-product); }
.studio-trail li.done  .trail-q { color: var(--on-product-muted); }
.studio-trail li.active .trail-q { color: var(--on-product); font-weight: 500; }
.studio-trail .trail-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(249, 194, 26, 0.14);
  color: var(--yellow);
  border: 1px solid rgba(249, 194, 26, 0.32);
  vertical-align: 1px;
}
.studio-trail-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-on-navy);
  font-size: 10.5px;
  color: var(--on-product-muted);
  font-variant-numeric: tabular-nums;
}

/* Question card */
.studio-question {
  font-size: 15px;
  line-height: 1.45;
  color: var(--on-product);
  margin: 0 0 12px;
  max-width: none;
}
.studio-question em {
  font-style: normal;
  color: var(--teal);
  font-weight: 500;
}
/* Shows Dedendum's own reasoning for why it's asking the follow-up -
   the incident-based prompting engine, visible to the expert. */
.studio-question-why {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(61, 189, 161, 0.07);
  border: 1px solid rgba(61, 189, 161, 0.18);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--on-product-muted);
}
.studio-why-label {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
}
.studio-question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-on-navy);
  font-size: 11px;
  color: var(--on-product-muted);
  font-variant-numeric: tabular-nums;
}
.studio-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(61, 189, 161, 0.12);
  color: var(--teal);
  border: 1px solid rgba(61, 189, 161, 0.28);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.studio-progress-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.studio-progress-inline > span {
  display: inline-block;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 245, 240, 0.1);
  overflow: hidden;
  position: relative;
}
.studio-progress-inline > span > span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--teal);
  border-radius: 999px;
}

/* Transcript card */
.studio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.studio-card-head .studio-label { margin-bottom: 0; }
.studio-timer {
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.studio-wave {
  height: 30px;
  margin-bottom: 10px;
}
.studio-transcript {
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-product);
  margin: 0;
  max-width: none;
}
.studio-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  vertical-align: -2px;
  background: var(--teal);
  margin-left: 2px;
  animation: studio-cursor-blink 1s steps(2) infinite;
}
@keyframes studio-cursor-blink {
  50% { opacity: 0; }
}

/* Extraction card */
.studio-extract-list {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
}
.studio-extract-list > div {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: baseline;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.studio-extract-list dt {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-product-muted);
  font-weight: 500;
}
.studio-extract-list dd {
  margin: 0;
  color: var(--on-product);
}
.studio-conf {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(61, 189, 161, 0.14);
  color: var(--teal);
  border: 1px solid rgba(61, 189, 161, 0.32);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.studio-extract-list dd em {
  font-style: normal;
  color: var(--teal);
  font-weight: 500;
}
.studio-extract-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-on-navy);
  font-size: 11px;
  color: var(--on-product-muted);
  letter-spacing: 0.02em;
}
.studio-ping {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.18);
  animation: hud-dot-pulse 1.8s ease-in-out infinite;
}
.card-extract { width: 280px; }

/* Tacit knowledge chat thread - AI Assistant App pattern. Dedendum
   surfaces each captured item as an assistant chat bubble with an avatar,
   a typed pill, the statement, and inline Verify / Reject actions. A
   typing indicator closes the thread so the session reads as live. */
.card-extract .studio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tacit-count {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  background: rgba(61, 189, 161, 0.14);
  border: 1px solid rgba(61, 189, 161, 0.28);
  padding: 3px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.tacit-chat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tacit-msg {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  align-items: flex-end;
}
.tacit-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3DBDA1 0%, #1B8D78 100%);
  color: #0E1E1A;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(61, 189, 161, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tacit-bubble {
  position: relative;
  padding: 7px 10px;
  border-radius: 12px 12px 12px 3px;
  background: rgba(245, 245, 240, 0.055);
  border: 1px solid var(--border-on-navy);
  display: grid;
  gap: 5px;
  min-width: 0;
}
.tacit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.tacit-pill {
  display: inline-flex;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0;
}
.tacit-pill-judgment {
  color: var(--teal);
  background: rgba(61, 189, 161, 0.14);
  border: 1px solid rgba(61, 189, 161, 0.3);
}
.tacit-pill-deviation {
  color: var(--yellow);
  background: rgba(249, 194, 26, 0.12);
  border: 1px solid rgba(249, 194, 26, 0.3);
}
.tacit-pill-reasoning {
  color: #9FC5F8;
  background: rgba(100, 149, 237, 0.12);
  border: 1px solid rgba(100, 149, 237, 0.3);
}
.tacit-pill-edge {
  color: #E8A2FF;
  background: rgba(201, 132, 234, 0.12);
  border: 1px solid rgba(201, 132, 234, 0.3);
}
.tacit-time {
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  color: var(--on-product-muted);
  font-variant-numeric: tabular-nums;
}
.tacit-text {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--on-product);
}
.tacit-text em {
  font-style: normal;
  color: var(--teal);
  font-weight: 500;
}
.tacit-actions {
  display: inline-flex;
  gap: 4px;
  margin-top: 0;
}
.tacit-input { margin-top: 10px; }

.tacit-bubble-verified {
  background: rgba(61, 189, 161, 0.10);
  border-color: rgba(61, 189, 161, 0.32);
}
.tacit-bubble-rejected {
  background: rgba(255, 87, 87, 0.07);
  border-color: rgba(255, 87, 87, 0.28);
}
.tacit-text-strike {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 87, 87, 0.55);
  color: rgba(245, 245, 240, 0.6);
}
.tacit-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 3px 8px;
  border-radius: 999px;
  width: fit-content;
}
.tacit-stamp-verified {
  color: var(--teal);
  background: rgba(61, 189, 161, 0.16);
  border: 1px solid rgba(61, 189, 161, 0.4);
}
.tacit-stamp-rejected {
  color: #FF8A8A;
  background: rgba(255, 87, 87, 0.12);
  border: 1px solid rgba(255, 87, 87, 0.35);
}
.tacit-ask {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--on-product);
}
.tacit-ask em {
  font-style: normal;
  color: var(--teal);
  font-weight: 500;
}

/* Terry's reply - user message, right-aligned, avatar on the right. */
.tacit-msg-user {
  grid-template-columns: 1fr 26px;
  justify-content: end;
}
.tacit-bubble-user {
  justify-self: end;
  background: rgba(245, 245, 240, 0.12);
  border-color: rgba(245, 245, 240, 0.18);
  border-radius: 14px 14px 4px 14px;
  color: var(--on-product);
  max-width: 88%;
}
.tacit-bubble-user .tacit-text { color: var(--on-product); }
.tacit-avatar-user {
  background: linear-gradient(135deg, #F5F5F0 0%, #C9C8BE 100%);
  color: #1E2235;
  box-shadow: 0 0 0 1px rgba(245, 245, 240, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tacit-typing .tacit-bubble-typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 12px;
  align-items: center;
  width: fit-content;
}
.tacit-typing .tacit-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--on-product-muted);
  opacity: 0.5;
  animation: tacit-typing-bounce 1.2s ease-in-out infinite;
}
.tacit-typing .tacit-dot:nth-child(2) { animation-delay: 0.15s; }
.tacit-typing .tacit-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tacit-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tacit-typing .tacit-dot { animation: none; }
}
.tacit-btn {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease;
}
.tacit-btn:active { transform: scale(0.97); }
.tacit-btn-verify {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #0E1E1A;
}
.tacit-btn-verify:hover {
  background: #54CFB3;
  border-color: #54CFB3;
}
.tacit-btn-reject {
  background: transparent;
  border: 1px solid var(--border-on-navy);
  color: var(--on-product-muted);
}
.tacit-btn-reject:hover {
  background: rgba(255, 87, 87, 0.1);
  border-color: rgba(255, 87, 87, 0.4);
  color: #FF8A8A;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 87, 87, 0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 87, 87, 0.04); }
}
.voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 48px;
  padding: 0 2px;
  margin-bottom: 16px;
}
.voice-wave span {
  display: block;
  flex: 1;
  min-width: 3px;
  height: 100%;
  align-self: stretch;
  background: var(--teal);
  border-radius: 2px;
  transform-origin: 50% 50%;
  animation: wave-bar 1.1s ease-in-out infinite;
}
.voice-wave span:nth-child(odd)  { animation-duration: 1.3s; }
.voice-wave span:nth-child(3n)   { animation-duration: 0.9s; background: var(--teal-ink); }
.voice-wave span:nth-child(5n)   { animation-duration: 1.5s; }
.voice-wave span:nth-child(7n)   { animation-duration: 0.8s; }
.voice-wave span:nth-child(1)  { animation-delay: -0.0s; }
.voice-wave span:nth-child(2)  { animation-delay: -0.1s; }
.voice-wave span:nth-child(3)  { animation-delay: -0.2s; }
.voice-wave span:nth-child(4)  { animation-delay: -0.3s; }
.voice-wave span:nth-child(5)  { animation-delay: -0.4s; }
.voice-wave span:nth-child(6)  { animation-delay: -0.5s; }
.voice-wave span:nth-child(7)  { animation-delay: -0.6s; }
.voice-wave span:nth-child(8)  { animation-delay: -0.7s; }
.voice-wave span:nth-child(9)  { animation-delay: -0.8s; }
.voice-wave span:nth-child(10) { animation-delay: -0.9s; }
.voice-wave span:nth-child(11) { animation-delay: -1.0s; }
.voice-wave span:nth-child(12) { animation-delay: -1.1s; }
.voice-wave span:nth-child(13) { animation-delay: -0.05s; }
.voice-wave span:nth-child(14) { animation-delay: -0.15s; }
.voice-wave span:nth-child(15) { animation-delay: -0.25s; }
.voice-wave span:nth-child(16) { animation-delay: -0.35s; }
.voice-wave span:nth-child(17) { animation-delay: -0.45s; }
.voice-wave span:nth-child(18) { animation-delay: -0.55s; }
.voice-wave span:nth-child(19) { animation-delay: -0.65s; }
.voice-wave span:nth-child(20) { animation-delay: -0.75s; }
.voice-wave span:nth-child(21) { animation-delay: -0.85s; }
.voice-wave span:nth-child(22) { animation-delay: -0.95s; }
.voice-wave span:nth-child(23) { animation-delay: -1.05s; }
.voice-wave span:nth-child(24) { animation-delay: -1.15s; }
.voice-wave span:nth-child(25) { animation-delay: -0.12s; }
.voice-wave span:nth-child(26) { animation-delay: -0.22s; }
.voice-wave span:nth-child(27) { animation-delay: -0.32s; }
.voice-wave span:nth-child(28) { animation-delay: -0.42s; }
.voice-wave span:nth-child(29) { animation-delay: -0.52s; }
.voice-wave span:nth-child(30) { animation-delay: -0.62s; }
@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.25); opacity: 0.55; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
.voice-transcript {
  position: relative;
  min-height: 88px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.transcript-frag {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: frag-cycle 12s ease-in-out infinite;
}
.transcript-frag.frag-a { animation-delay: 0s; }
.transcript-frag.frag-b { animation-delay: 4s; }
.transcript-frag.frag-c { animation-delay: 8s; }
@keyframes frag-cycle {
  0%, 3%   { opacity: 0; transform: translateY(4px); }
  6%, 30%  { opacity: 1; transform: translateY(0); }
  33%, 100%{ opacity: 0; transform: translateY(-4px); }
}
.voice-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted);
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SECTION 02 - STRUCTURE
   ========================================================================= */

.story-visual-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  padding: 40px 0;
}
.struct-card {
  opacity: 0;
  transform: translateY(28px);
}
.struct-equipment { animation-delay: 0s; }
.struct-procedure { animation-delay: 0s; }
.struct-note      { animation-delay: 0s; }

.struct-equipment {
  opacity: calc(min(max((var(--s2, 0) - 0.04) / 0.25, 0), 1));
  transform: translateY(calc((1 - min(max((var(--s2, 0) - 0.04) / 0.25, 0), 1)) * 28px));
}
.struct-procedure {
  opacity: calc(min(max((var(--s2, 0) - 0.18) / 0.25, 0), 1));
  transform: translateY(calc((1 - min(max((var(--s2, 0) - 0.18) / 0.25, 0), 1)) * 28px));
}
.struct-note {
  opacity: calc(min(max((var(--s2, 0) - 0.32) / 0.25, 0), 1));
  transform: translateY(calc((1 - min(max((var(--s2, 0) - 0.32) / 0.25, 0), 1)) * 28px));
}

.struct-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.struct-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.struct-meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.struct-spec {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--ink);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.struct-spec em {
  font-style: normal;
  color: var(--ink-soft);
  margin-right: 6px;
}

.struct-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.struct-steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.struct-steps li:first-child { border-top: none; padding-top: 4px; }
.struct-steps .step-num {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--teal-ink);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.struct-quote {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--teal);
}
.struct-validation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.val-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(61, 189, 161, 0.14);
  color: var(--teal-ink);
  border: 1px solid rgba(61, 189, 161, 0.28);
}
.val-conf {
  margin-left: auto;
  color: var(--teal-ink);
  font-weight: 500;
}
.struct-note-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.struct-note-line em {
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}
.struct-source {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SECTION 03 - EMBED
   ========================================================================= */

.story-visual-embed {
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1.78 / 1;
}
.embed-glasses {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(30, 34, 53, 0.12));
}

/* HUD overlays sit over each lens and fade in as --s3 progresses */
.hud {
  position: absolute;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  opacity: calc(min(max((var(--s3, 0) - 0.1) / 0.35, 0), 1));
  transform: translateY(calc((1 - min(max((var(--s3, 0) - 0.1) / 0.35, 0), 1)) * 8px));
  pointer-events: none;
}
.hud-left  { left: 14%; top: 34%; width: 24%; }
.hud-right { right: 13%; top: 34%; width: 24%; text-align: right; }

.hud-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.hud-main {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.hud-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: inherit;
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.hud-right .hud-meta { justify-content: flex-end; }
.hud-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.18);
  align-self: center;
  animation: hud-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes hud-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(61, 189, 161, 0.04); }
}

/* =========================================================================
   SECTION 04 - eyebrow tie-in
   ========================================================================= */

.agents-eyebrow {
  margin-bottom: 24px;
  color: #8F8F8F;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 960px) {
  .story-section { height: auto; }
  .story-sticky {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 20px;
  }
  .story-visual { height: 520px; }
  .story-expert { width: 200px; }
  .story-voice-card { position: relative; margin-top: 24px; }
  .story-visual-stack { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-pipeline { --s1: 1; --s2: 1; --s3: 1; }
  .voice-wave span,
  .rec-dot,
  .story-expert .expert-mouth,
  .story-expert .expert-voicewaves .wave,
  .transcript-frag,
  .hud-dot {
    animation: none !important;
  }
  .transcript-frag.frag-a { opacity: 1; }
  .transcript-frag.frag-b, .transcript-frag.frag-c { opacity: 0; }
  .voice-wave span { transform: scaleY(0.7); }
}

/* =========================================================================
   SECTION 01 - CAPTURE · enhancements
   Knowledge ring around the senior expert · filling capture meters on each
   satellite card · traveling tether particles · hover micro-interactions ·
   active-card accent. Visual metaphor: tacit knowledge captured from the
   senior, ring fills as the section scrolls.
   ========================================================================= */

/* Knowledge ring - sits behind the expert, fills clockwise as --s1 grows.
   Circumference of r=158 ≈ 992.7. We expose dashoffset as a function of --s1
   so it draws in lockstep with scroll. */
.story-knowledge-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, 78%);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 20px rgba(61, 189, 161, 0.12));
  opacity: calc(min(var(--s1, 0) * 1.2 + 0.35, 1));
}
.story-knowledge-ring .ring-fill {
  stroke-dasharray: 993;
  stroke-dashoffset: calc(993 * (1 - min(var(--s1, 0) * 1.05, 1)));
  transition: stroke-dashoffset 120ms linear;
}
.story-knowledge-ring .ring-ticks .tick {
  opacity: 0;
  transform-origin: 180px 180px;
  transition: opacity 220ms ease;
}
.story-knowledge-ring .ring-ticks .t1 { opacity: calc(min(max((var(--s1, 0) - 0.04) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t2 { opacity: calc(min(max((var(--s1, 0) - 0.13) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t3 { opacity: calc(min(max((var(--s1, 0) - 0.22) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t4 { opacity: calc(min(max((var(--s1, 0) - 0.34) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t5 { opacity: calc(min(max((var(--s1, 0) - 0.46) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t6 { opacity: calc(min(max((var(--s1, 0) - 0.58) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t7 { opacity: calc(min(max((var(--s1, 0) - 0.70) / 0.05, 0), 1)); }
.story-knowledge-ring .ring-ticks .t8 { opacity: calc(min(max((var(--s1, 0) - 0.82) / 0.05, 0), 1)); }

/* Tether particles - small teal dots traveling the tether paths from the
   expert outward to each card. SVG handles the motion; we just visually
   ground them. */
.story-tether .tether-particles circle {
  filter: drop-shadow(0 0 6px rgba(61, 189, 161, 0.55));
  opacity: calc(min(var(--s1, 0) * 1.6, 1));
}

/* Modernised card surface - gradient hairline edge over navy, refined
   layered shadow. Brand rule 18 holds: DM Sans only inside studio cards. */
.studio-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%),
    var(--product-bg);
  border: 1px solid var(--border-on-navy);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 2px rgba(30, 34, 53, 0.10),
    0 22px 44px -18px rgba(30, 34, 53, 0.28);
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms ease,
    border-color 240ms ease;
}
.studio-card::before {
  /* Soft 1px gradient edge - modern card pattern, no extra DOM */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(61, 189, 161, 0.35) 0%,
    rgba(245, 245, 240, 0.06) 40%,
    rgba(245, 245, 240, 0) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 240ms ease;
}
.studio-card:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 189, 161, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(61, 189, 161, 0.18),
    0 28px 56px -16px rgba(30, 34, 53, 0.36),
    0 0 28px -8px rgba(61, 189, 161, 0.35);
}
.studio-card:hover::before { opacity: 1; }

/* Active question card - subtle teal corner accent + breathing glow.
   Signals "this is the live moment of the interview". */
.card-question {
  outline: 1px solid rgba(61, 189, 161, 0.22);
  outline-offset: -1px;
}
.card-question::after {
  content: "";
  position: absolute;
  top: -6px; right: -6px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
  border-top-right-radius: 6px;
  opacity: calc(min(var(--s1, 0) * 1.6, 1));
  animation: question-corner-pulse 2.4s ease-in-out infinite;
}
@keyframes question-corner-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(61, 189, 161, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(61, 189, 161, 0.65)); }
}

/* Live pill on the question card - small Relief-register status chip */
.card-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(61, 189, 161, 0.10);
  border: 1px solid rgba(61, 189, 161, 0.28);
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.card-active-pill .active-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.22);
  animation: hud-dot-pulse 1.6s ease-in-out infinite;
}

/* Capture meter - filling progress bar on the session card. The fill
   target is read from data-fill so each instance can vary. Width is
   driven by --s1 so it fills as the section comes into view. */
.capture-meter {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-on-navy);
  display: grid;
  gap: 6px;
}
.capture-meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-product-muted);
  font-variant-numeric: tabular-nums;
}
.capture-meter-pct {
  color: var(--teal);
  font-weight: 500;
}
.capture-meter-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 245, 240, 0.08);
  overflow: hidden;
}
.capture-meter-bar > span {
  position: absolute;
  inset: 0;
  width: calc(62% * min(var(--s1, 0) * 1.4, 1));
  background: linear-gradient(90deg, var(--teal-ink), var(--teal));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(61, 189, 161, 0.45);
  transition: width 160ms linear;
}
/* Inline variant - tucked next to the trail-foot percentage */
.capture-meter-bar.inline {
  display: inline-block;
  position: relative;
  width: 56px;
  height: 3px;
  vertical-align: 1px;
  margin-right: 8px;
}
.trail-foot-pct {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--teal);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Per-field filling bars on the tacit-knowledge card. Each row gets a
   thin teal bar that fills to its own data-fill target as the section
   progresses. Targets: 100/100/84/72/100. */
.studio-extract-fill > div {
  position: relative;
  grid-template-columns: 78px 1fr;
  padding-bottom: 6px;
}
.studio-extract-fill > div + div { padding-top: 2px; }
.extract-bar {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 245, 240, 0.07);
  overflow: hidden;
  margin-top: 4px;
}
.extract-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal-ink), var(--teal));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(61, 189, 161, 0.4);
  transition: width 160ms linear;
}
/* Per-row fill - staggered so the rows visibly fill in sequence */
.studio-extract-fill > div:nth-child(1) .extract-bar > span { width: calc(100% * min(max((var(--s1, 0) - 0.32) / 0.18, 0), 1)); }
.studio-extract-fill > div:nth-child(2) .extract-bar > span { width: calc(100% * min(max((var(--s1, 0) - 0.38) / 0.18, 0), 1)); }
.studio-extract-fill > div:nth-child(3) .extract-bar > span { width: calc(84%  * min(max((var(--s1, 0) - 0.44) / 0.20, 0), 1)); }
.studio-extract-fill > div:nth-child(4) .extract-bar > span { width: calc(72%  * min(max((var(--s1, 0) - 0.50) / 0.22, 0), 1)); }
.studio-extract-fill > div:nth-child(5) .extract-bar > span { width: calc(100% * min(max((var(--s1, 0) - 0.56) / 0.16, 0), 1)); }

/* =========================================================================
   Terry Answers - AI orb interface (Dribbble "AI Assistant App" reference).
   Replaces the previous waveform card with a centered teal orb whose internal
   waves animate, a "Dedendum is listening" caption, the live transcript, and
   a glowing mic button. Lives inside the navy product-UI surface, DM Sans
   throughout (brand rule 18).
   ========================================================================= */

.card-orb {
  width: 320px;
  padding: 24px 24px 22px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(61, 189, 161, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%),
    var(--product-bg);
}
.card-orb .studio-card-head { margin-bottom: 14px; }
.card-orb .studio-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.timer-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.22);
  animation: hud-dot-pulse 1.6s ease-in-out infinite;
}

/* Question header. Sits at the top middle of the card so the viewer has
   context for the answer Terry is giving. Subtle teal label + soft italic
   question text, kept compact so the orb stays the focal point. */
.orb-question {
  text-align: center;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(61, 189, 161, 0.06);
  border: 1px solid rgba(61, 189, 161, 0.18);
}
.orb-q-label {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--on-product);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.orb-q-text {
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  font-style: normal;
  color: var(--on-product-muted);
  margin: 0;
}

/* Stage centers the orb and gives it room to breathe under a soft glow */
.orb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 138px;
  margin-bottom: 12px;
}
.orb { width: 130px; height: 130px; }
.orb-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 50%,
    rgba(61, 189, 161, 0.45),
    rgba(61, 189, 161, 0.12) 45%,
    transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.orb {
  position: relative;
  width: 156px;
  height: 156px;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 18px rgba(61, 189, 161, 0.35));
}

/* The three internal wave layers translate vertically at different rates,
   reading like a calm, breathing audio surface inside the orb. */
.orb-wave {
  transform-origin: 100px 130px;
  will-change: transform;
}
.wave-light { animation: orb-wave-a 3.2s ease-in-out infinite; }
.wave-mid   { animation: orb-wave-b 4.1s ease-in-out infinite; }
.wave-deep  { animation: orb-wave-c 5.0s ease-in-out infinite; }
@keyframes orb-wave-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
@keyframes orb-wave-b {
  0%, 100% { transform: translate3d(0, 2px, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
@keyframes orb-wave-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -3px, 0); }
}

/* Caption directly below the orb - "Dedendum is listening" */
.orb-caption {
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-product);
  margin: 0 0 8px;
}
.orb-caption em {
  font-style: normal;
  color: var(--on-product-muted);
  font-weight: 400;
}
/* Animated typing dots that follow "Dedendum is listening". Three teal
   dots that bounce/fade in sequence, conveying active processing. */
.orb-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  margin-left: 4px;
  vertical-align: 1px;
  height: 1em;
}
.orb-dots > span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.35;
  animation: orb-dots-bounce 1.2s ease-in-out infinite;
}
.orb-dots > span:nth-child(1) { animation-delay: 0s; }
.orb-dots > span:nth-child(2) { animation-delay: 0.18s; }
.orb-dots > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes orb-dots-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.35; }
  40%           { transform: translateY(-3px); opacity: 1; }
}

/* Transcript paragraph. Terry's words, centered under the orb. Always
   fully readable in regular gray; an emphasis wave sweeps across the
   sentence turning each word bold + white in sequence, then the word
   eases back to gray. Inspired by the AI streaming pattern in the
   Dribbble reference, adapted so the line is always legible. */
.orb-transcript {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--on-product-muted);
  margin: 0 0 14px;
  padding: 0 8px;
  letter-spacing: -0.005em;
}
.orb-transcript .studio-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  vertical-align: -2px;
  background: var(--teal);
  margin-left: 2px;
  animation: studio-cursor-blink 1s steps(2) infinite;
}

.orb-transcript-stream {
  --stream-step: 0.28s;     /* per-word stagger inside the cycle */
  --stream-cycle: 7.6s;     /* total loop length per word */
}
.orb-transcript-stream .w {
  display: inline-block;
  font-weight: 400;
  color: var(--on-product-muted);
  font-variation-settings: "wght" 400;
}
/* When the card is in view, each word loops: appears gray, flashes to bold
   white with a teal halo, holds white for most of the cycle, briefly
   returns to gray, then the wave starts again. */
.orb-transcript-stream.is-revealing .w {
  animation: orb-word-cycle var(--stream-cycle) ease-in-out infinite;
}
.orb-transcript-stream.is-revealing .w:nth-child(1)  { animation-delay: calc(var(--stream-step) * 0); }
.orb-transcript-stream.is-revealing .w:nth-child(2)  { animation-delay: calc(var(--stream-step) * 1); }
.orb-transcript-stream.is-revealing .w:nth-child(3)  { animation-delay: calc(var(--stream-step) * 2); }
.orb-transcript-stream.is-revealing .w:nth-child(4)  { animation-delay: calc(var(--stream-step) * 3); }
.orb-transcript-stream.is-revealing .w:nth-child(5)  { animation-delay: calc(var(--stream-step) * 4); }
.orb-transcript-stream.is-revealing .w:nth-child(6)  { animation-delay: calc(var(--stream-step) * 5); }
.orb-transcript-stream.is-revealing .w:nth-child(7)  { animation-delay: calc(var(--stream-step) * 6); }
.orb-transcript-stream.is-revealing .w:nth-child(8)  { animation-delay: calc(var(--stream-step) * 7); }
.orb-transcript-stream.is-revealing .w:nth-child(9)  { animation-delay: calc(var(--stream-step) * 8); }
.orb-transcript-stream.is-revealing .w:nth-child(10) { animation-delay: calc(var(--stream-step) * 9); }
.orb-transcript-stream.is-revealing .w:nth-child(11) { animation-delay: calc(var(--stream-step) * 10); }
.orb-transcript-stream.is-revealing .w:nth-child(12) { animation-delay: calc(var(--stream-step) * 11); }

@keyframes orb-word-cycle {
  0%, 100% { color: var(--on-product-muted); font-weight: 400; text-shadow: 0 0 0 rgba(61, 189, 161, 0);   font-variation-settings: "wght" 400; }
  8%       { color: #FFFFFF;                 font-weight: 700; text-shadow: 0 0 14px rgba(61, 189, 161, 0.65); font-variation-settings: "wght" 700; }
  18%      { color: #FFFFFF;                 font-weight: 700; text-shadow: 0 0 0 rgba(61, 189, 161, 0);   font-variation-settings: "wght" 700; }
  80%      { color: #FFFFFF;                 font-weight: 700; text-shadow: 0 0 0 rgba(61, 189, 161, 0);   font-variation-settings: "wght" 700; }
  92%      { color: var(--on-product-muted); font-weight: 400; text-shadow: 0 0 0 rgba(61, 189, 161, 0);   font-variation-settings: "wght" 400; }
}

/* Bottom action bar: small icon buttons flanking a glowing mic */
.orb-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: 8px;
}
.orb-icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(245, 245, 240, 0.06);
  border: 1px solid var(--border-on-navy);
  color: var(--on-product-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.orb-icon-btn:hover {
  background: rgba(61, 189, 161, 0.12);
  border-color: rgba(61, 189, 161, 0.3);
  color: var(--on-product);
}
.orb-mic {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(160deg, #4FCFB1, #1B8D78);
  border: 1px solid rgba(245, 245, 240, 0.18);
  color: #0E3A35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 0 0 4px rgba(61, 189, 161, 0.18),
    0 12px 24px -6px rgba(61, 189, 161, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.orb-mic:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 5px rgba(61, 189, 161, 0.22),
    0 16px 32px -6px rgba(61, 189, 161, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.orb-mic-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(61, 189, 161, 0.5);
  animation: orb-mic-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.orb-mic-ring-2 {
  inset: -6px;
  animation-delay: 1.2s;
  border-color: rgba(61, 189, 161, 0.35);
}
@keyframes orb-mic-pulse {
  0%   { transform: scale(0.9); opacity: 0.85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Recording equalizer - five bars inside the mic button bouncing in
   different rhythms. Reads as "Dedendum is listening" / actively
   recording, replacing the static mic icon. */
.orb-rec-eq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  width: 26px;
  position: relative;
  z-index: 1;
}
.orb-rec-eq > span {
  display: block;
  width: 3px;
  height: 60%;
  border-radius: 2px;
  background: #FFFFFF;
  transform-origin: 50% 50%;
  animation: orb-rec-bar 1s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}
.orb-rec-eq > span:nth-child(1) { animation-delay: -0.20s; animation-duration: 0.9s; }
.orb-rec-eq > span:nth-child(2) { animation-delay: -0.55s; animation-duration: 1.1s; }
.orb-rec-eq > span:nth-child(3) { animation-delay: -0.05s; animation-duration: 0.8s; }
.orb-rec-eq > span:nth-child(4) { animation-delay: -0.40s; animation-duration: 1.2s; }
.orb-rec-eq > span:nth-child(5) { animation-delay: -0.75s; animation-duration: 1.0s; }
@keyframes orb-rec-bar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.85; }
  50%      { transform: scaleY(1.0);  opacity: 1; }
}

/* =========================================================================
   Expert Studio session card. Restyled after the Dribbble "AI Assistant App"
   first screen: greeting at top, pill chips for surfaced topics, stacked
   recent items, chat-style input bar at the bottom. Sits inside the navy
   product-UI surface, DM Sans throughout.
   ========================================================================= */

.card-session-v2 {
  width: 300px;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Top status row */
.session-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-product-muted);
  font-variant-numeric: tabular-nums;
}
.session-status-text { color: var(--on-product-muted); }
.session-status-time { margin-left: auto; color: var(--teal); }

/* Greeting block. Three-line hierarchy that mirrors the Dribbble reference:
   bold name greeting, large medium-weight question on the next line, and a
   small muted tagline at the bottom. */
.session-greeting {
  display: grid;
  gap: 2px;
  margin-bottom: 18px;
  text-align: center;
  justify-items: center;
}
.session-hi {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--on-product);
  margin: 0;
}
.session-question {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: rgba(245, 245, 240, 0.6);
  margin: 0;
}
.session-tag {
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(245, 245, 240, 0.42);
  margin: 8px 0 0;
  letter-spacing: 0.02em;
}

/* Topic chips */
.session-chips {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.session-chips-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: max-content;
  animation: session-chips-scroll 14s linear infinite;
}
.session-chips:hover .session-chips-track { animation-play-state: paused; }
.session-chip { flex: 0 0 auto; }
@keyframes session-chips-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .session-chips-track { animation: none; }
}
.session-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(245, 245, 240, 0.05);
  border: 1px solid var(--border-on-navy);
  color: var(--on-product-muted);
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.session-chip:hover {
  background: rgba(61, 189, 161, 0.10);
  border-color: rgba(61, 189, 161, 0.32);
  color: var(--on-product);
}
.session-chip .chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(245, 245, 240, 0.4);
}
.session-chip-on {
  background: rgba(61, 189, 161, 0.14);
  border-color: rgba(61, 189, 161, 0.45);
  color: var(--on-product);
}
.session-chip-on .chip-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 189, 161, 0.22);
  animation: hud-dot-pulse 1.6s ease-in-out infinite;
}

/* Section header. Sits visually separated from the chips above to mirror
   the reference's clear gap between quick actions and "Popular topics". */
.session-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-product-muted);
  margin-top: 18px;
  padding-top: 18px;
}
.session-count {
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.session-see-all {
  color: var(--teal);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 200ms ease;
}
.session-see-all:hover {
  color: var(--on-product);
}

/* Recent items list */
.session-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.session-recent-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(245, 245, 240, 0.04);
  border: 1px solid var(--border-on-navy);
  transition: background 200ms ease, border-color 200ms ease;
}
.session-recent-item:hover {
  background: rgba(61, 189, 161, 0.07);
  border-color: rgba(61, 189, 161, 0.22);
}
.recent-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recent-icon-ok {
  background: rgba(61, 189, 161, 0.16);
  color: var(--teal);
  border: 1px solid rgba(61, 189, 161, 0.32);
}
.recent-icon-warn {
  background: rgba(249, 194, 26, 0.14);
  color: var(--yellow);
  border: 1px solid rgba(249, 194, 26, 0.32);
}
.recent-body { min-width: 0; }
.recent-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--on-product);
  line-height: 1.3;
}
.recent-meta {
  font-size: 11px;
  color: var(--on-product-muted);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Chat-style input bar */
.session-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: rgba(245, 245, 240, 0.05);
  border: 1px solid var(--border-on-navy);
  margin-top: 2px;
}
.session-input-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--on-product-muted);
}
.session-input-text {
  flex: 1;
  font-size: 12px;
  color: var(--on-product-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-input-send {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, #4FCFB1, #1B8D78);
  border: 1px solid rgba(245, 245, 240, 0.18);
  color: #0E3A35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 0 0 3px rgba(61, 189, 161, 0.15),
    0 6px 14px -4px rgba(61, 189, 161, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 180ms ease;
}
.session-input-send:hover { transform: translateY(-1px); }

/* Reduced-motion: snap rings, particles, and meters to their final state */
@media (prefers-reduced-motion: reduce) {
  .story-tether .tether-particles { display: none; }
  .card-question::after { animation: none; }
  .card-active-pill .active-dot { animation: none; }
  .capture-meter-bar > span,
  .extract-bar > span,
  .story-knowledge-ring .ring-fill {
    transition: none !important;
  }
  .orb-wave,
  .orb-mic-ring,
  .orb-rec-eq > span,
  .orb-dots > span,
  .timer-dot,
  .session-chip-on .chip-pulse {
    animation: none !important;
  }
  .orb-dots > span { opacity: 0.6; }
  .orb-rec-eq > span { transform: scaleY(0.7); }
  .orb-transcript-stream .w {
    animation: none !important;
    color: var(--on-product-muted) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
  }
}

/* Keyframes for the Section 02 · Structure React component. */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes hub-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.68); }
}
@keyframes card-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-3px); }
}

/* Voice soundwave bars used in the field data icon set. */
@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.0); }
}

/* ── Section 03 sticky override ──
   Section 03's sticky wrapper changes from the default 2-col grid to a
   flex column so the RAG bridge card stacks above the original copy +
   visual row. */
.story-embed .story-sticky-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding-top: 24px;
}
.story-embed .story-embed-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 64px;
  flex: 1 1 auto;
}

/* ── Section 03 RAG bridge card ──
   Sits at the top of Section 03, picks up the animated tether that
   Section 02 ends at the bottom of its canvas. The card itself uses
   a teal-bordered surface; an animated dashed line extends upward
   from the card so the eye reads a continuous line from hub to card. */
.rag-bridge-card {
  position: relative;
  width: 280px;
  margin: 0 auto;
  padding-top: 140px;
  flex-shrink: 0;
  z-index: 5;
}
.rag-bridge-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 140px;
  background: repeating-linear-gradient(
    to bottom,
    #3DBDA1 0,
    #3DBDA1 4px,
    transparent 4px,
    transparent 9px
  );
  opacity: 0.55;
  overflow: visible;
}
.rag-bridge-line::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #3DBDA1;
  box-shadow: 0 0 10px rgba(61, 189, 161, 0.8);
  animation: rag-bridge-travel 2.4s linear infinite;
}
@keyframes rag-bridge-travel {
  0%   { top: -6px;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 140px; opacity: 0; }
}
.rag-bridge-empty {
  min-height: 130px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px dashed #3DBDA1;
  border-radius: 14px;
  padding: 0;
  box-shadow:
    0 0 0 6px rgba(61, 189, 161, 0.05),
    0 14px 36px rgba(26, 34, 50, 0.10);
}
.rag-bridge-inner {
  background: #FFFFFF;
  border: 1.5px solid #3DBDA1;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow:
    0 0 0 6px rgba(61, 189, 161, 0.06),
    0 14px 36px rgba(26, 34, 50, 0.12);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #1A2232;
}
.rag-bridge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rag-bridge-label {
  font-weight: 700;
  font-size: 9px;
  color: #1B8A72;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rag-bridge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3DBDA1;
  animation: pulse-dot 1.5s infinite;
}
.rag-bridge-statement {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.32;
  color: #1A2232;
}
.rag-bridge-equip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 10px;
  color: rgba(26, 34, 50, 0.62);
}
.rag-bridge-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 7px;
  border-top: 1px solid rgba(26, 34, 50, 0.08);
}
.rag-bridge-validated {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(61, 189, 161, 0.18);
  border: 1px solid rgba(61, 189, 161, 0.4);
  color: #1B8A72;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rag-bridge-attr {
  font-weight: 400;
  font-size: 9.5px;
  color: rgba(26, 34, 50, 0.62);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .rag-bridge-line::after { animation: none; }
}

/* ────────────────────────────────────────────────────────────────
   AR Visor hero - first section of the main page.
   The operator photo is the base; the "Dedendum Assistant" visor is
   built entirely in SVG and overlaid on the eye area.
   ──────────────────────────────────────────────────────────────── */
.visor-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 40%, rgba(61,189,161,0.12) 0%, transparent 55%),
    radial-gradient(circle at 50% 110%, rgba(249,194,26,0.08) 0%, transparent 60%),
    #050810;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 48px;
  padding: 80px 64px 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.visor-hero-copy {
  color: #F5F5F0;
  max-width: 480px;
  z-index: 2;
}
.visor-eyebrow {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5CDFE9;
  margin-bottom: 22px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(92,223,233,0.1);
  border: 1px solid rgba(92,223,233,0.3);
}
.visor-headline {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: #F5F5F0;
}
.visor-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 32px;
  color: rgba(245,245,240,0.7);
}
.visor-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 10px;
  background: #3DBDA1;
  color: #0E1E1A;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 220ms ease, transform 220ms ease;
  box-shadow: 0 12px 30px -10px rgba(61,189,161,0.6);
}
.visor-cta:hover { background: #54CFB3; transform: translateY(-1px); }

.visor-hero-stage {
  position: relative;
  width: 100%;
  height: min(86vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visor-hero-photo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}
.visor-overlay {
  position: absolute;
  /* sit precisely across the operator's face - narrower so the visor
     reaches roughly from temple to temple, not past the ears */
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  max-width: 360px;
  height: auto;
  pointer-events: none;
  z-index: 3;
  animation: visor-float 5s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(92,223,233,0.18));
}

/* waveform pulse - staggered bars, like a live mic */
@keyframes visor-bar {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.0); }
}
.visor-bar { transform-origin: center; }
.visor-bar-1 { animation: visor-bar 0.9s 0.00s ease-in-out infinite; }
.visor-bar-2 { animation: visor-bar 0.9s 0.10s ease-in-out infinite; }
.visor-bar-3 { animation: visor-bar 0.9s 0.20s ease-in-out infinite; }
.visor-bar-4 { animation: visor-bar 0.9s 0.30s ease-in-out infinite; }
.visor-bar-5 { animation: visor-bar 0.9s 0.40s ease-in-out infinite; }

/* right-stack icons fade in sequentially */
@keyframes visor-icon-pop {
  0%   { opacity: 0; transform: translateX(6px); }
  100% { opacity: 1; transform: translateX(0); }
}
.visor-icon { opacity: 0; animation: visor-icon-pop 420ms cubic-bezier(.2,.7,.2,1) forwards; }
.visor-icon-1 { animation-delay: 0.4s;  }
.visor-icon-2 { animation-delay: 0.7s;  }
.visor-icon-3 { animation-delay: 1.0s;  }

/* gentle visor float so the overlay feels live, not pasted on */
@keyframes visor-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-3px); }
}

/* responsive: stack copy above stage on narrow screens */
@media (max-width: 960px) {
  .visor-hero {
    grid-template-columns: 1fr;
    padding: 64px 28px 24px;
    gap: 24px;
  }
  .visor-hero-stage { height: 60vh; }
  .visor-overlay { width: 56%; max-width: 320px; top: 28%; }
}

@media (prefers-reduced-motion: reduce) {
  .visor-bar,
  .visor-icon {
    animation: none;
    opacity: 1;
  }
}

/* In-visor 3D compressor animations */
.visor-compressor {
  transform-origin: 360px 180px;
  transform-box: fill-box;
  animation: visor-compressor-wobble 5.5s ease-in-out infinite;
}
@keyframes visor-compressor-wobble {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-2px) rotate(0.6deg); }
}
.visor-fan {
  animation: visor-fan-spin 2.4s linear infinite;
  transform-box: fill-box;
}
@keyframes visor-fan-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .visor-compressor, .visor-fan { animation: none; }
}