/* ============================================================
   Doksa.io homepage, outcome-communication redesign (June 2026)
   Ported from the design handoff brand.css + HeroAnim.jsx.
   Dark navy base, gold (literature) + purple (qualitative).
   Loaded only on home_vue.html.
   ============================================================ */

:root {
  --dk-bg: #0d1322;
  --dk-bg-2: #111a2e;
  --dk-surface: rgba(255, 255, 255, 0.04);
  --dk-surface-2: rgba(255, 255, 255, 0.07);
  --dk-border: rgba(255, 255, 255, 0.10);
  --dk-border-soft: rgba(255, 255, 255, 0.06);
  --dk-text: #f3f5f9;
  --dk-text-2: #c4ccda;
  --dk-text-3: #8b94a7;
  --dk-gold: #ffd700;            /* = tailwind brand-gold */
  --dk-gold-dark: #b8860b;       /* = tailwind brand-dark-gold */
  --dk-gold-soft: rgba(255, 215, 0, 0.12);
  --dk-purple: #9333ea;
  --dk-purple-light: #b06ef5;
  --dk-purple-soft: rgba(147, 51, 234, 0.14);
  --dk-emerald: #10b981;
  --dk-blue: #3b82f6;
  --dk-red: #ef4444;
  --dk-font: "Poppins", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dk-mono: "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

.dk-page {
  /* No painted surface of its own: the homepage sits directly on the
     site's shared body gradient and background art, exactly like every
     other page. A page-level background would fill the inset <main>
     container and read as one giant card floating on the base design.
     Cards, teasers and panels carry their own translucent surfaces. */
  color: var(--dk-text);
  font-family: var(--dk-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- buttons ---------- */
.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--dk-font); font-size: 15px; font-weight: 600;
  border-radius: 10px; padding: 12px 24px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.dk-btn-gold {
  background: linear-gradient(135deg, var(--dk-gold-dark), var(--dk-gold));
  color: #14110a;
}
.dk-btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dk-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--dk-text);
}
.dk-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); transform: translateY(-1px); }
.dk-btn-sm { font-size: 13.5px; padding: 9px 16px; border-radius: 8px; }
.dk-btn-purple {
  background: linear-gradient(135deg, #7c2bd9, var(--dk-purple));
  color: #fff;
}
.dk-btn-purple:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ---------- hero ---------- */
.dk-hero { padding: 64px 48px 0 48px; max-width: 1180px; margin: 0 auto; }
.dk-hero-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: 44px; align-items: center;
}
.dk-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.dk-h1 {
  font-size: 52px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.06;
  color: var(--dk-gold-dark); margin: 0;
}
.dk-hero-sub { font-size: 18px; color: var(--dk-text-2); line-height: 1.65; margin: 0; }
.dk-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.dk-hero-foot { color: var(--dk-text-3); font-size: 15px; margin: 0; }
.dk-hero-foot a { color: var(--dk-gold-dark); text-decoration: none; }
.dk-hero-foot a:hover { text-decoration: underline; }

/* ---------- service card ---------- */
.dk-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid var(--dk-border);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
  min-width: 0; /* let the grid track shrink below the teaser's min-content width */
}
.dk-card.theme-gold { border-top: 3px solid var(--dk-gold-dark); }
.dk-card.theme-purple { border-top: 3px solid var(--dk-purple); }
.dk-card-copy { display: flex; flex-direction: column; gap: 10px; }
.dk-card-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.theme-gold .dk-card-eyebrow { color: var(--dk-gold); }
.theme-purple .dk-card-eyebrow { color: var(--dk-purple-light); }
.dk-card-title { font-size: 26px; font-weight: 800; color: var(--dk-text); margin: 0; }
.dk-card-mech { font-size: 14.5px; line-height: 1.6; color: var(--dk-text-3); margin: 0; }
.dk-card-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dk-card-feats li { display: flex; gap: 10px; font-size: 14px; color: var(--dk-text-2); line-height: 1.45; }
.dk-card-feats .tick { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.dk-card-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.dk-card-credits { font-size: 12.5px; color: var(--dk-text-3); }
.dk-cards-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 26px; align-items: start;
}

/* document-type chips on the Literature card */
.dk-doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-doc-chips span {
  font-size: 11.5px; font-weight: 600; color: var(--dk-text-2);
  border: 1px solid rgba(184, 134, 11, 0.50);
  background: rgba(184, 134, 11, 0.12);
  border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}

/* ---------- teaser (X) ---------- */
.dk-teaser {
  background: rgba(8, 12, 22, 0.42);
  border: 1px solid var(--dk-border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.dk-teaser-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 0 14px;
}
.dk-teaser-tabs { display: flex; gap: 4px; }
.dk-tab {
  font-family: var(--dk-font); font-size: 12.5px; font-weight: 600;
  color: var(--dk-text-3); background: none; border: none; cursor: pointer;
  padding: 7px 11px 9px 11px; border-radius: 7px 7px 0 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.dk-tab:hover { color: var(--dk-text-2); }
.dk-tab.active { color: var(--dk-text); }
.theme-gold .dk-tab.active, .accent-gold .dk-tab.active { border-bottom-color: var(--dk-gold-dark); }
.theme-purple .dk-tab.active, .accent-purple .dk-tab.active { border-bottom-color: var(--dk-purple); }
.dk-sample-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--dk-text-3);
  border: 1px solid var(--dk-border);
  border-radius: 999px; padding: 3px 9px;
  white-space: nowrap;
}
.dk-teaser-body { padding: 12px 14px 14px 14px; border-top: 1px solid var(--dk-border-soft); }
.dk-teaser-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--dk-border-soft);
  background: rgba(255, 255, 255, 0.02);
}
.dk-teaser-link {
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.theme-gold .dk-teaser-link, .accent-gold .dk-teaser-link { color: var(--dk-gold); }
.theme-purple .dk-teaser-link, .accent-purple .dk-teaser-link { color: var(--dk-purple-light); }
.dk-teaser-link:hover { text-decoration: underline; }
.dk-teaser-foot-note { font-size: 12px; color: var(--dk-text-3); }
.dk-teaser-caption { margin: 8px 0 0 0; font-size: 11.5px; color: var(--dk-text-3); }
.dk-teaser-caption--lead { margin: 2px 0 12px 0; font-size: 12px; }
.dk-teaser-caption--lead em { color: var(--dk-text-2); }

/* ranked papers table */
.dk-ptable { width: 100%; border-collapse: collapse; }
.dk-ptable th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--dk-text-3); text-align: left; padding: 4px 8px 8px 8px;
}
.dk-ptable td {
  font-size: 13px; color: var(--dk-text-2); padding: 7px 8px;
  border-top: 1px solid var(--dk-border-soft); line-height: 1.35;
}
.dk-ptable td.title { color: var(--dk-text); font-weight: 500; }
.dk-ptable tr:hover td { background: rgba(255, 255, 255, 0.025); }
.dk-ptable .dk-th-right, .dk-ptable .dk-td-right { text-align: right; }
.dk-ptable-meta { font-size: 11px; color: var(--dk-text-3); font-weight: 400; }
.dk-rel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 7px; border-radius: 6px;
  font-size: 12px; font-weight: 700; font-family: var(--dk-mono);
}
.dk-rel.hi { background: rgba(16, 185, 129, 0.16); color: #4ade80; }
.dk-rel.mid { background: rgba(184, 134, 11, 0.22); color: var(--dk-gold); }
.dk-rel.lo { background: rgba(139, 148, 167, 0.14); color: #9aa3b5; }
.dk-pill {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(59, 130, 246, 0.14); color: #7eb3ff;
  white-space: nowrap;
}
.dk-pill--gold { background: rgba(184, 134, 11, 0.18); color: var(--dk-gold); }

/* TCCM framework rows */
.dk-tccm { display: flex; flex-direction: column; gap: 8px; }
.dk-tccm-row { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: center; }
.dk-tccm-dim {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--dk-gold);
}
.dk-tccm-items { display: flex; flex-wrap: wrap; gap: 6px; }

/* codebook list */
.dk-codebook { display: flex; flex-direction: column; gap: 7px; }
.dk-code-row {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--dk-border-soft);
}
.dk-code-dot { width: 9px; height: 9px; border-radius: 3px; }
.dk-code-name { font-size: 13px; font-weight: 600; color: var(--dk-text); }
.dk-code-count { font-size: 11.5px; color: var(--dk-text-3); font-family: var(--dk-mono); }
.dk-code-quote {
  grid-column: 2 / 4; font-size: 12px; color: var(--dk-text-3);
  font-style: italic; line-height: 1.45; margin-top: 1px;
}
.dk-code-quote::before { content: "\201C"; }
.dk-code-quote::after { content: "\201D"; }

/* co-occurrence heatmap */
.dk-heatgrid {
  display: grid; grid-template-columns: 76px repeat(5, 1fr);
  gap: 3px; align-items: center;
}
.dk-heatlabel { font-size: 11px; color: var(--dk-text-3); }
.dk-heatlabel--col { text-align: center; }
.dk-heatlabel--row { text-align: right; padding-right: 5px; }
.dk-heatcell {
  height: 26px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-family: var(--dk-mono); color: #e7d9fb;
}
.dk-heatcell.is-zero { color: #3c455a; }

/* mini charts shared */
.dk-mini-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dk-mini-chart {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dk-border-soft);
  border-radius: 9px; padding: 10px;
}
.dk-mini-chart h5 {
  margin: 0 0 8px 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--dk-text-3);
}

/* ---------- audience section ---------- */
.svc { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.svc.gold { color: var(--dk-gold); }
.svc.purple { color: var(--dk-purple-light); }
.svc.both { color: var(--dk-emerald); }

.dk-aud {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid var(--dk-border);
  border-radius: 16px;
  overflow: hidden;
}
.dk-aud-tabs {
  display: flex; gap: 4px;
  padding: 12px 16px 0 16px;
  border-bottom: 1px solid var(--dk-border-soft);
}
.dk-aud-tab {
  font-family: var(--dk-font); font-size: 14px; font-weight: 600;
  color: var(--dk-text-3); background: none; border: none; cursor: pointer;
  padding: 10px 16px 13px 16px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}
.dk-aud-tab:hover { color: var(--dk-text-2); }
.dk-aud-tab.active { color: var(--dk-text); border-bottom-color: var(--dk-gold-dark); }
.dk-aud-panel {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 28px;
  padding: 24px 28px 26px 28px;
}
.dk-aud-main h3 { margin: 0 0 10px 0; font-size: 19px; font-weight: 700; color: var(--dk-text); }
.dk-aud-main p { margin: 0 0 14px 0; font-size: 14.5px; line-height: 1.65; color: var(--dk-text-2); }
.dk-aud-chips { display: flex; gap: 18px; flex-wrap: wrap; }
.dk-aud-steps {
  list-style: none; margin: 0; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(8, 12, 22, 0.35);
  border: 1px solid var(--dk-border-soft);
  border-radius: 11px;
  align-self: start;
}
.dk-aud-steps li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--dk-text-2); line-height: 1.4; }
.dk-aud-steps .num {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dk-gold-soft); color: var(--dk-gold);
  font-size: 11px; font-weight: 700; font-family: var(--dk-mono);
  margin-top: -1px;
}

/* "How Credits Work" step cards: same surface tokens as .dk-card so the
   section matches the rest of the page (replaces the old opaque
   bg-gray-800/60 slabs, which were the only solid-gray surface left). */
.dk-step-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid var(--dk-border);
  border-radius: 18px;
}

/* ---------- section scaffolding ---------- */
.dk-section { padding: 64px 48px; max-width: 1180px; margin: 0 auto; }
.dk-section--cards { padding-top: 44px; padding-bottom: 0; }
.dk-section--aud { max-width: 1020px; padding-bottom: 8px; }
.dk-section--viz { padding-top: 24px; }
.dk-section-head { text-align: center; margin-bottom: 36px; }
.dk-section-head h2 { font-size: 30px; font-weight: 800; color: var(--dk-text); margin: 0 0 10px 0; }
.dk-section-head p { font-size: 15.5px; color: var(--dk-text-2); margin: 0 auto; max-width: 620px; line-height: 1.6; }
.dk-section-head--aud { text-align: center; margin-bottom: 24px; }
.dk-section-head--aud h2 { font-size: 24px; font-weight: 800; color: var(--dk-text); margin: 0; }
.dk-section-head--viz { margin-bottom: 22px; }
.dk-section-head--viz h2 { font-size: 22px; }
.dk-section-head--viz p { font-size: 14px; }

/* ---------- slim viz row ---------- */
.dk-vizrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dk-vizchip {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 10px 13px 10px; border-radius: 11px;
  background: var(--dk-surface);
  border: 1px solid var(--dk-border-soft);
}
.dk-vizchip svg { display: block; }
.dk-vizchip span { font-size: 11.5px; font-weight: 600; color: var(--dk-text-2); text-align: center; line-height: 1.3; }

/* ============================================================
   Hero "watch it build" animation (Y).
   Base styles are the FINAL visible state; the animation only
   runs under prefers-reduced-motion: no-preference.
   Shared timeline: var(--ha-dur), default 8s, infinite loop.
   ============================================================ */
.ha-anim { --ha-dur: 8s; } /* single source for the shared timeline */
.ha-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  background: rgba(8, 12, 22, 0.45);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px 18px 14px 18px;
  font-family: var(--dk-font);
}
.ha-pane {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  padding: 13px 14px;
  min-width: 0;
}
.ha-pane-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: #8b94a7;
  margin-bottom: 10px;
}
.ha-pane-head i {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: #b06ef5;
}
.ha-line {
  font-size: 12.5px; line-height: 1.75; color: #aab3c5; margin: 0 0 7px 0;
}
.ha-line--last { margin-bottom: 0; }
.ha-speaker { color: var(--dk-text-3); font-weight: 700; font-size: 11px; }
.ha-mark {
  border-radius: 4px; padding: 1px 4px; margin: 0 -1px;
  color: #f3f5f9; font-weight: 500;
  position: relative; white-space: normal;
  background: var(--ha-mark-bg, transparent);
  box-shadow: var(--ha-mark-ring, none);
}
/* Per-class highlight colors live in custom properties so the haMarkIn
   keyframes can restore them mid-cycle; a shared keyframe block cannot
   otherwise reference per-class background/ring values. */
.ha-mark.c1 { --ha-mark-bg: rgba(147, 51, 234, 0.38); --ha-mark-ring: 0 0 0 1px rgba(176,110,245,0.35); }
.ha-mark.c2 { --ha-mark-bg: rgba(59, 130, 246, 0.34); --ha-mark-ring: 0 0 0 1px rgba(126,179,255,0.32); }
.ha-mark.c3 { --ha-mark-bg: rgba(16, 185, 129, 0.30); --ha-mark-ring: 0 0 0 1px rgba(74,222,128,0.30); }
.ha-mark.c4 { --ha-mark-bg: rgba(184, 134, 11, 0.40); --ha-mark-ring: 0 0 0 1px rgba(255,215,0,0.32); }
.ha-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; border-radius: 4px; padding: 1px 5px;
  margin-left: 6px; vertical-align: 1px;
}
.ha-tag.c1 { background: #9333ea; color: #fff; }
.ha-tag.c2 { background: #3b82f6; color: #fff; }
.ha-tag.c3 { background: #10b981; color: #06281c; }
.ha-tag.c4 { background: #b8860b; color: #14110a; }
.ha-right { display: flex; flex-direction: column; gap: 10px; }
.ha-group {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px; padding: 9px 11px;
  background: rgba(255,255,255,0.02);
}
.ha-group h6 {
  margin: 0 0 7px 0; font-size: 11px; font-weight: 700;
  color: #e7d9fb; letter-spacing: 0.3px;
}
.ha-group h6 small { color: var(--dk-text-3); font-weight: 600; margin-left: 6px; letter-spacing: 0.6px; }
.ha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ha-chip {
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 3px 9px;
  color: #f3f5f9; border: 1px solid transparent;
}
.ha-chip.c1 { background: rgba(147,51,234,0.22); border-color: rgba(176,110,245,0.45); }
.ha-chip.c2 { background: rgba(59,130,246,0.20); border-color: rgba(126,179,255,0.42); }
.ha-chip.c3 { background: rgba(16,185,129,0.18); border-color: rgba(74,222,128,0.40); }
.ha-chip.c4 { background: rgba(184,134,11,0.28); border-color: rgba(255,215,0,0.42); }
.ha-sankey-wrap { flex: 1; display: flex; flex-direction: column; }
.ha-badge {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: #4ade80;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: 999px; padding: 4px 12px;
  margin-top: 8px;
}
.ha-steps {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* Wrap so the row's single-line min-content width (~300px) can never
     prop the hero grid track open past the viewport on narrow phones. */
  flex-wrap: wrap; row-gap: 4px;
  padding-top: 12px; margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; font-weight: 600; color: #8b94a7;
}
.ha-step { display: inline-flex; align-items: center; gap: 6px; }
.ha-step i {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  background: #b06ef5;
}
.ha-step-sep { color: #3c455a; }

@media (prefers-reduced-motion: no-preference) {
  .ha-anim .ha-mark { animation: haMarkIn var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-tag { animation: haFadeIn var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-chip { animation: haChipIn var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-group { animation: haFadeIn var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-badge { animation: haPopIn var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-sankey path.flow { stroke-dasharray: 220; animation: haDraw var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-sankey text, .ha-anim .ha-sankey rect { animation: haFadeIn var(--ha-dur, 8s) infinite both; }
  .ha-anim .ha-step i { animation: haStepPulse var(--ha-dur, 8s) infinite both; }
}

/* Paint-only properties: animating font-weight or color here would
   reflow the transcript pane and pop line wraps every cycle. */
@keyframes haMarkIn {
  0%, 8% { background-color: transparent; box-shadow: none; }
  12%, 94% { background-color: var(--ha-mark-bg, transparent); box-shadow: var(--ha-mark-ring, none); }
  96%, 100% { background-color: transparent; box-shadow: none; }
}
@keyframes haFadeIn {
  0%, 5% { opacity: 0; transform: translateY(4px); }
  11%, 94% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes haChipIn {
  0%, 8% { opacity: 0; transform: translateX(-14px); }
  14%, 94% { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; }
}
@keyframes haPopIn {
  0%, 8% { opacity: 0; transform: scale(0.85); }
  13%, 94% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; }
}
@keyframes haDraw {
  0%, 6% { stroke-dashoffset: 220; opacity: 0; }
  9% { opacity: 1; }
  20%, 94% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { opacity: 0; }
}
/* Dots start dim (0% state fills backwards before each delay), light up
   in sequence at their delay, hold, then dim for the loop restart. */
@keyframes haStepPulse {
  0% { opacity: 0.35; }
  4%, 92% { opacity: 1; }
  96%, 100% { opacity: 0.35; }
}

/* ============================================================
   Scroll reveal ("soft rise"). JS adds .rv-pending on load and
   .rv-in on first viewport entry; without JS or with reduced
   motion nothing is ever hidden.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rv-pending { opacity: 0; transform: translateY(28px); }
  .rv-pending.rv-in {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 0.6, 0.25, 1),
                transform 0.7s cubic-bezier(0.22, 0.6, 0.25, 1);
  }
}

/* ============================================================
   Responsive (the prototype is desktop-only; these collapses
   are an addition, keeping the existing page's mobile support)
   ============================================================ */
@media (max-width: 1023px) {
  .dk-hero { padding: 44px 24px 0 24px; }
  .dk-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .dk-h1 { font-size: 40px; }
  .dk-cards-grid { grid-template-columns: 1fr; }
  .dk-section { padding: 48px 24px; }
  .dk-aud-panel { grid-template-columns: 1fr; }
  .dk-vizrow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .dk-h1 { font-size: 32px; }
  .dk-hero-sub { font-size: 16px; }
  .dk-vizrow { grid-template-columns: repeat(2, 1fr); }
  .dk-mini-charts { grid-template-columns: 1fr; }
  .ha-stage { grid-template-columns: 1fr; }
  /* Narrow phones: the teaser head (tabs + sample chip) and the ranked
     papers table exceed the viewport's min-content width; wrap the head
     and let the body scroll horizontally instead of stretching the card. */
  .dk-card { padding: 20px 16px; }
  .dk-teaser-head { flex-wrap: wrap; row-gap: 4px; }
  .dk-teaser-body { overflow-x: auto; }
  /* Drop the Method column so the Relevance score (the point of the
     ranked-papers demo) stays on screen without sideways scrolling. */
  .dk-ptable th:nth-child(2), .dk-ptable td:nth-child(2) { display: none; }
  .dk-tccm-row { grid-template-columns: 96px 1fr; }
  .dk-aud-tabs { flex-wrap: wrap; }
}