/* ============================================================================
   Audience value cards — the homepage "why you'll love this" grid.
   Two panels (student / instructor), six tiles each: 5 value props + What's New.
   Pairs with shared/js/homepage-audience.js.

   Every tile carries its own animated visual. Animations are transform/opacity
   only, and the inactive panel is display:none so its keyframes stop costing
   anything. Reduced-motion users get the final frame of each visual, not a
   blank box — see the media query at the foot of this file.
   ========================================================================= */

.audience-section {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
}

.audience-section[hidden] { display: none; }

/* ── heading + segmented toggle ─────────────────────────────────────────── */

.audience-head {
  text-align: center;
  margin-bottom: 1.5rem;
}

.audience-head h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.4rem;
  letter-spacing: -0.02em;
}

.audience-head p {
  margin: 0;
  color: #64748b;
  font-size: 1rem;
}

.audience-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 1.15rem;
  padding: 0.3rem;
  background: #eef2f8;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
}

.audience-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: #64748b;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background-color 0.22s, color 0.22s, box-shadow 0.22s;
}

.audience-toggle button:hover {
  color: #1e293b;
}

.audience-toggle button[aria-selected="true"] {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.audience-toggle button[aria-selected="true"][data-audience="student"] {
  color: #6d28d9;
}

.audience-toggle button[aria-selected="true"][data-audience="instructor"] {
  color: #1d4ed8;
}

.audience-toggle button:focus-visible {
  outline: 3px solid #2a7de1;
  outline-offset: 2px;
}

/* ── the carousel ───────────────────────────────────────────────────────── */

.audience-panel[hidden] {
  display: none;
}

.aud-carousel {
  position: relative;
  min-height: 320px;
}

.aud-slide {
  display: none;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: linear-gradient(155deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 6px 26px rgba(15, 23, 42, 0.18);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.aud-slide.is-active {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  animation: audFade 0.5s ease-out;
}

@keyframes audFade {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

a.aud-slide:hover {
  border-color: var(--aud-glow, rgba(148, 163, 184, 0.55));
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.3);
}

.aud-slide:focus-visible {
  outline: 3px solid #2a7de1;
  outline-offset: 3px;
}

.audience-panel[data-audience="student"] .aud-slide {
  --aud-accent: #a78bfa;
  --aud-accent-strong: #7c3aed;
  --aud-glow: rgba(167, 139, 250, 0.65);
  background: linear-gradient(155deg, #150a2c 0%, #241145 100%);
}

.audience-panel[data-audience="instructor"] .aud-slide {
  --aud-accent: #60a5fa;
  --aud-accent-strong: #2563eb;
  --aud-glow: rgba(96, 165, 250, 0.65);
  background: linear-gradient(155deg, #071427 0%, #0f2547 100%);
}

.aud-body {
  padding: 2.1rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aud-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--aud-accent);
  background: color-mix(in srgb, var(--aud-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--aud-accent) 34%, transparent);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.aud-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

.aud-desc {
  margin: 0 0 1.3rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 46ch;
}

.aud-cta {
  align-self: flex-start;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--aud-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.aud-cta::after {
  content: '→';
  transition: transform 0.22s ease;
}

.aud-slide:hover .aud-cta::after {
  transform: translateX(5px);
}

/* ── slide navigation ───────────────────────────────────────────────────── */

.aud-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.1rem;
}

.aud-arrow {
  appearance: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #d6dfea;
  background: #ffffff;
  color: #475569;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.aud-arrow:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: scale(1.06);
}

.aud-arrow:focus-visible {
  outline: 3px solid #2a7de1;
  outline-offset: 2px;
}

.aud-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.aud-dot {
  appearance: none;
  cursor: pointer;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background-color 0.25s, transform 0.25s, width 0.25s;
}

.aud-dot:hover { background: #94a3b8; }

.aud-dot[aria-current="true"] {
  width: 26px;
  border-radius: 999px;
  background: var(--aud-dot, #3b82f6);
}

.audience-panel[data-audience="student"] .aud-dots { --aud-dot: #7c3aed; }
.audience-panel[data-audience="instructor"] .aud-dots { --aud-dot: #2563eb; }

.aud-dot:focus-visible {
  outline: 3px solid #2a7de1;
  outline-offset: 3px;
}

/* ── visual frame shared by every slide ─────────────────────────────────── */

.aud-viz {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--aud-accent) 20%, transparent) 0%, transparent 64%),
    rgba(255, 255, 255, 0.03);
  border-left: 1px solid rgba(148, 163, 184, 0.16);
}

/* The visuals were drawn for a small tile. Pinning them to their design box and
   scaling once keeps every tuned keyframe intact while filling the taller slide.
   Safe because the animations all live on descendants, never on these containers.
   Matches only the viz-* child, so the What's New slide (where viz-news IS the
   frame) is left alone. */
.aud-viz > [class*="viz-"] {
  width: 292px;
  height: 190px;
  transform: scale(1.45);
  transform-origin: center;
}

/* Faint grid so an empty corner never looks broken. */
.aud-viz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.aud-viz::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 48px rgba(255, 255, 255, 0.03);
  opacity: 0;
  pointer-events: none;
}

.aud-slide.is-active .aud-viz::after {
  animation: audVizCharge 7s ease-in-out infinite;
}

@keyframes audVizCharge {
  0%, 12%, 100% { opacity: 0; }
  42%, 72% { opacity: 1; }
  56% { box-shadow: inset 0 0 76px rgba(255, 255, 255, 0.12); }
}

.aud-viz svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* ========================================================================
   S1 — decision tree lighting a path to the right test
   ===================================================================== */

.viz-tree .vt-kicker {
  fill: #c4b5fd;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.viz-tree .vt-question {
  fill: rgba(15, 23, 42, 0.78);
  stroke: rgba(196, 181, 253, 0.5);
  stroke-width: 1;
}

.viz-tree .vt-question-text {
  fill: #f5f3ff;
  font-size: 8px;
  font-weight: 700;
}

.viz-tree .vt-option {
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: vtOption 7s ease-out infinite;
}

.viz-tree .vt-option.no {
  fill: rgba(71, 85, 105, 0.34);
  stroke: rgba(148, 163, 184, 0.45);
}

.viz-tree .vt-option.yes {
  fill: rgba(109, 40, 217, 0.38);
  stroke: #c4b5fd;
}

.viz-tree .vt-option-text {
  fill: #e2e8f0;
  font-size: 7px;
  font-weight: 800;
  text-anchor: middle;
  opacity: 0;
  animation: vtOptionText 7s ease-out infinite;
}

.viz-tree .vt-branch {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: vtBranch 7s ease-out infinite;
}

.viz-tree .vt-branch.muted { stroke: rgba(148, 163, 184, 0.45); animation-name: vtBranchMuted; }
.viz-tree .vt-branch.lit { stroke: #c4b5fd; filter: drop-shadow(0 0 4px rgba(196, 181, 253, 0.95)); animation-name: vtBranchLit; }

.viz-tree .vt-result {
  fill: #7c3aed;
  stroke: #ddd6fe;
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: vtResult 7s cubic-bezier(.2, .8, .2, 1) infinite;
}

.viz-tree .vt-result-text {
  fill: #ffffff;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-anchor: middle;
  opacity: 0;
  animation: vtResultText 7s ease-out infinite;
}

@keyframes vtOption {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  16%, 68% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(5px); }
}

@keyframes vtOptionText {
  0%, 12% { opacity: 0; }
  17%, 68% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes vtBranch {
  0%, 100% { stroke-dashoffset: 20; opacity: 0; }
}

@keyframes vtBranchMuted {
  0%, 24% { stroke-dashoffset: 20; opacity: 0; }
  34%, 70% { stroke-dashoffset: 0; opacity: 0.65; }
  82%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes vtBranchLit {
  0%, 33% { stroke-dashoffset: 20; opacity: 0; }
  43%, 70% { stroke-dashoffset: 0; opacity: 1; }
  82%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes vtResult {
  0%, 38% { opacity: 0; transform: translateY(6px) scale(0.88); }
  47%, 68% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(6px) scale(0.88); }
}

@keyframes vtResultText {
  0%, 46% { opacity: 0; }
  50%, 68% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ========================================================================
   S2 — Praxis Pal reading your uploaded file, then streaming an answer
   ===================================================================== */

.viz-chat {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  position: relative;
}

.viz-chat .praxis-pal-head--audience {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 13px;
  width: 38px;
  height: 40px;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.35));
  animation: vcPalCycle 6s steps(1) infinite, vcPalBob 2.4s ease-in-out infinite;
}

.viz-chat .vc-file {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #ddd6fe;
  animation: vcFile 6s ease-in-out infinite;
}

.viz-chat .vc-context {
  display: flex;
  gap: 5px;
  align-self: flex-start;
  opacity: 0;
  transform: translateY(-4px);
  animation: vcContext 6s ease-out infinite;
}

.viz-chat .vc-context span {
  border: 1px solid rgba(196, 181, 253, 0.26);
  border-radius: 999px;
  color: #c4b5fd;
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 5px;
}

.viz-chat .vc-prompt {
  align-self: flex-start;
  max-width: 84%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 9px 9px 9px 3px;
  background: rgba(15, 23, 42, 0.54);
  color: #e2e8f0;
  font-size: 0.57rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 5px 7px;
  opacity: 0;
  transform: translateX(-7px);
  animation: vcPrompt 6s ease-out infinite;
}

.viz-chat .vc-scan {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 108px;
  height: 22px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.55), transparent);
  animation: vcScan 6s ease-in-out infinite;
  pointer-events: none;
}

.viz-chat .vc-bubble {
  align-self: flex-end;
  max-width: 78%;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid rgba(251, 191, 36, 0.72);
  border-radius: 11px 11px 3px 11px;
  padding: 7px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  animation: vcBubble 6s ease-out infinite;
}

.viz-chat .vc-bubble strong {
  color: #92400e;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.viz-chat .vc-bubble span {
  color: #422006;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.35;
}

.viz-chat .vc-line {
  height: 5px;
  border-radius: 3px;
  background: rgba(237, 233, 254, 0.85);
  width: 0;
  animation: vcType 6s ease-out infinite;
}

.viz-chat .vc-line:nth-child(1) { --vc-w: 100%; animation-name: vcType1; }
.viz-chat .vc-line:nth-child(2) { --vc-w: 82%;  animation-name: vcType2; }
.viz-chat .vc-line:nth-child(3) { --vc-w: 58%;  animation-name: vcType3; }

.viz-chat .vc-caret {
  align-self: flex-end;
  width: 2px;
  height: 11px;
  background: #ede9fe;
  animation: vcCaret 6s step-end infinite;
}

@keyframes vcFile {
  0%, 4% { opacity: 0; transform: translateY(-8px); }
  12%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes vcScan {
  0%, 14% { opacity: 0; transform: translateX(-20px); }
  22% { opacity: 1; }
  40% { opacity: 0.9; transform: translateX(20px); }
  48%, 100% { opacity: 0; transform: translateX(20px); }
}

@keyframes vcContext {
  0%, 22% { opacity: 0; transform: translateY(-4px); }
  32%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes vcPrompt {
  0%, 32% { opacity: 0; transform: translateX(-7px); }
  42%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-7px); }
}

@keyframes vcBubble {
  0%, 34% { opacity: 0; transform: translateY(6px); }
  42%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px); }
}

@keyframes vcType {
  0%, 100% { width: 0; }
}

@keyframes vcType1 {
  0%, 46% { width: 0; }
  53%, 92% { width: var(--vc-w); }
  100% { width: 0; }
}

@keyframes vcType2 {
  0%, 53% { width: 0; }
  60%, 92% { width: var(--vc-w); }
  100% { width: 0; }
}

@keyframes vcType3 {
  0%, 60% { width: 0; }
  67%, 92% { width: var(--vc-w); }
  100% { width: 0; }
}

@keyframes vcCaret {
  0%, 45% { opacity: 0; }
  46%, 50%, 58%, 62%, 70%, 74%, 82%, 86%, 92% { opacity: 1; }
  54%, 66%, 78%, 90%, 100% { opacity: 0; }
}

@keyframes vcPalCycle {
  0%, 30% { background-position: 0% 0%; }
  38% { background-position: 33.333% 100%; }
  46% { background-position: 66.667% 100%; }
  54% { background-position: 100% 100%; }
  68% { background-position: 33.333% 100%; }
  80%, 100% { background-position: 0% 0%; }
}

@keyframes vcPalBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

/* ========================================================================
   S3 — badges unlocking, then a certificate
   ===================================================================== */

.viz-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  position: relative;
}

.viz-proof .vp-row {
  display: flex;
  gap: 9px;
}

.viz-proof .vp-artifact {
  width: 135px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 6px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(196, 181, 253, 0.46);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.55);
  color: #c4b5fd;
  opacity: 0;
  transform: translateY(7px) scale(0.94);
  animation: vpArtifact 6s ease-out infinite;
}

.viz-proof .vp-artifact span {
  grid-row: span 2;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.viz-proof .vp-artifact i {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: rgba(221, 214, 254, 0.75);
}

.viz-proof .vp-artifact i:nth-of-type(2) {
  width: 67%;
}

.viz-proof .vp-artifact b {
  grid-column: 2;
  font-size: 0.48rem;
  color: #a7f3d0;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.viz-proof .vp-badge {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  background: rgba(148, 163, 184, 0.14);
  border: 1.5px solid rgba(148, 163, 184, 0.3);
  filter: grayscale(1);
  opacity: 0.4;
  transform: scale(0.85);
  animation: vpUnlock 6s ease-out infinite;
}

.viz-proof .vp-badge:nth-child(1) { animation-name: vpUnlock1; }
.viz-proof .vp-badge:nth-child(2) { animation-name: vpUnlock2; }
.viz-proof .vp-badge:nth-child(3) { animation-name: vpUnlock3; }
.viz-proof .vp-badge:nth-child(4) { animation-name: vpUnlock4; }

.viz-proof .vp-cert {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border: 1px solid #fde68a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #451a03;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.36);
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  animation: vpCert 6s ease-out infinite;
}

.viz-proof .vp-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.22) 50%, transparent 58%);
  animation: vpShine 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vpUnlock {
  0%, 100% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
}

@keyframes vpUnlock1 {
  0%, 8% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
  14% { transform: scale(1.22); }
  20%, 90% { filter: grayscale(0); opacity: 1; transform: scale(1); }
  100% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
}

@keyframes vpUnlock2 {
  0%, 17% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
  23% { transform: scale(1.22); }
  29%, 90% { filter: grayscale(0); opacity: 1; transform: scale(1); }
  100% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
}

@keyframes vpUnlock3 {
  0%, 26% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
  32% { transform: scale(1.22); }
  38%, 90% { filter: grayscale(0); opacity: 1; transform: scale(1); }
  100% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
}

@keyframes vpUnlock4 {
  0%, 35% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
  41% { transform: scale(1.22); }
  47%, 90% { filter: grayscale(0); opacity: 1; transform: scale(1); }
  100% { filter: grayscale(1); opacity: 0.4; transform: scale(0.85); }
}

@keyframes vpCert {
  0%, 56% { opacity: 0; transform: translateY(8px) scale(0.94); }
  66%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px) scale(0.94); }
}

@keyframes vpArtifact {
  0%, 43% { opacity: 0; transform: translateY(7px) scale(0.94); }
  53%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(7px) scale(0.94); }
}

@keyframes vpShine {
  0%, 54% { transform: translateX(-100%); opacity: 0; }
  62% { opacity: 1; }
  74%, 100% { transform: translateX(100%); opacity: 0; }
}

/* ========================================================================
   S4 — a CSV dropping into the browser and becoming a chart
   ===================================================================== */

.viz-drop {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.viz-drop .vd-window {
  width: 158px;
  height: 92px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.35);
  overflow: hidden;
  position: relative;
}

.viz-drop .vd-chrome {
  height: 15px;
  background: rgba(148, 163, 184, 0.16);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
}

.viz-drop .vd-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(203, 213, 225, 0.5);
}

.viz-drop .vd-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  height: calc(100% - 15px);
  padding: 8px 10px;
}

.viz-drop .vd-bar {
  width: 15px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #a78bfa, #6d28d9);
  height: 0;
  animation: vdGrow 5.5s ease-out infinite;
}

.viz-drop .vd-bar:nth-child(1) { --vd-h: 46%; animation-name: vdGrow1; }
.viz-drop .vd-bar:nth-child(2) { --vd-h: 74%; animation-name: vdGrow2; }
.viz-drop .vd-bar:nth-child(3) { --vd-h: 34%; animation-name: vdGrow3; }
.viz-drop .vd-bar:nth-child(4) { --vd-h: 88%; animation-name: vdGrow4; }

.viz-drop .vd-file {
  position: absolute;
  top: 4px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.5);
  font-size: 0.62rem;
  font-weight: 800;
  color: #ede9fe;
  white-space: nowrap;
  animation: vdFall 5.5s ease-in-out infinite;
}

.viz-drop .vd-result {
  position: absolute;
  right: 9px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(110, 231, 183, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #052e16;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  padding: 3px 6px;
  opacity: 0;
  transform: translateY(5px) scale(0.9);
  box-shadow: 0 7px 18px rgba(16, 185, 129, 0.42);
  animation: vdResult 5.5s ease-out infinite;
}

.viz-drop .vd-result b {
  color: #4ade80;
  font-size: 0.68rem;
}

@keyframes vdFall {
  0% { opacity: 0; transform: translate(-50%, -14px) scale(0.9); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  30% { opacity: 1; transform: translate(-50%, 30px) scale(0.96); }
  38%, 100% { opacity: 0; transform: translate(-50%, 34px) scale(0.9); }
}

@keyframes vdGrow {
  0%, 100% { height: 0; }
}

@keyframes vdGrow1 {
  0%, 40% { height: 0; }
  52%, 90% { height: var(--vd-h); }
  100% { height: 0; }
}

@keyframes vdGrow2 {
  0%, 45% { height: 0; }
  57%, 90% { height: var(--vd-h); }
  100% { height: 0; }
}

@keyframes vdGrow3 {
  0%, 50% { height: 0; }
  62%, 90% { height: var(--vd-h); }
  100% { height: 0; }
}

@keyframes vdGrow4 {
  0%, 55% { height: 0; }
  67%, 90% { height: var(--vd-h); }
  100% { height: 0; }
}

@keyframes vdResult {
  0%, 56% { opacity: 0; transform: translateY(5px) scale(0.9); }
  66%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(5px) scale(0.9); }
}

/* ========================================================================
   S5 / I5 — live leaderboard racing (shared by both engagement cards)
   ===================================================================== */

.viz-race {
  height: 100%;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.viz-race .vr-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  color: #bfdbfe;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.audience-panel[data-audience="student"] .viz-race .vr-heading { color: #ddd6fe; }

.viz-race .vr-heading span {
  color: #4ade80;
  animation: vrLive 1.25s steps(2) infinite;
}

.viz-race .vr-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.viz-race .vr-name {
  font-size: 0.62rem;
  font-weight: 800;
  color: #e2e8f0;
  width: 34px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.viz-race .vr-score {
  width: 17px;
  color: #f8fafc;
  font-size: 0.58rem;
  font-weight: 900;
  text-align: right;
  animation: vrScore 6s ease-in-out infinite;
}

.viz-race .vr-track {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.viz-race .vr-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #fb7185, #fbbf24);
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.72);
  width: 12%;
  animation: vrRace 6s ease-in-out infinite;
}

.viz-race .vr-row:nth-child(1) .vr-fill { --vr-a: 54%; --vr-b: 92%; }
.viz-race .vr-row:nth-child(2) .vr-fill { --vr-a: 71%; --vr-b: 63%; }
.viz-race .vr-row:nth-child(3) .vr-fill { --vr-a: 38%; --vr-b: 77%; }
.viz-race .vr-row:nth-child(4) .vr-fill { --vr-a: 60%; --vr-b: 44%; }

.viz-race .vr-pill {
  align-self: center;
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--aud-accent);
  background: color-mix(in srgb, var(--aud-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--aud-accent) 34%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  animation: vrPulse 2.2s ease-in-out infinite;
}

@keyframes vrRace {
  0%, 10% { width: 12%; }
  34%, 52% { width: var(--vr-a); }
  70%, 88% { width: var(--vr-b); }
  100% { width: 12%; }
}

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

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

@keyframes vrScore {
  0%, 25% { opacity: 0.4; transform: translateY(2px); }
  34%, 76% { opacity: 1; transform: none; }
  100% { opacity: 0.4; transform: translateY(2px); }
}

/* ========================================================================
   I1 — a course assembling itself while the clock barely moves
   ===================================================================== */

.viz-build {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 16px;
}

.viz-build .vb-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 108px;
}

.viz-build .vb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.28);
  opacity: 0;
  transform: translateX(-14px);
  animation: vbSlide 6s ease-out infinite;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.2);
}

.viz-build .vb-row:nth-child(1) { animation-name: vbSlide1; }
.viz-build .vb-row:nth-child(2) { animation-name: vbSlide2; }
.viz-build .vb-row:nth-child(3) { animation-name: vbSlide3; }
.viz-build .vb-row:nth-child(4) { animation-name: vbSlide4; }

.viz-build .vb-tick {
  font-size: 0.6rem;
  color: #fbbf24;
  font-weight: 900;
}

.viz-build .vb-label {
  width: 39px;
  color: #dbeafe;
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.viz-build .vb-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(191, 219, 254, 0.55);
}

.viz-build .vb-clock {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.45);
  position: relative;
  flex-shrink: 0;
}

.viz-build .vb-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 15px;
  background: #60a5fa;
  border-radius: 1px;
  transform-origin: bottom center;
  animation: vbSweep 6s linear infinite;
}

@keyframes vbSlide {
  0%, 100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes vbSlide1 {
  0%, 5% { opacity: 0; transform: translateX(-14px); }
  14%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes vbSlide2 {
  0%, 14% { opacity: 0; transform: translateX(-14px); }
  23%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes vbSlide3 {
  0%, 23% { opacity: 0; transform: translateX(-14px); }
  32%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes vbSlide4 {
  0%, 32% { opacity: 0; transform: translateX(-14px); }
  41%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(-14px); }
}

@keyframes vbSweep {
  0%, 5% { transform: translateX(-50%) rotate(-30deg); }
  41%, 88% { transform: translateX(-50%) rotate(128deg); }
  100% { transform: translateX(-50%) rotate(-30deg); }
}

/* ========================================================================
   I2 — a roster row slipping from green to amber to flagged
   ===================================================================== */

.viz-risk {
  height: 100%;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.viz-risk .vk-heading {
  margin-bottom: 2px;
  color: #93c5fd;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.viz-risk .vk-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.09);
  border: 1px solid transparent;
}

.viz-risk .vk-avatar {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  flex-shrink: 0;
}

.viz-risk .vk-name {
  width: 34px;
  color: #cbd5e1;
  font-size: 0.53rem;
  font-weight: 800;
  flex-shrink: 0;
}

.viz-risk .vk-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}

.viz-risk .vk-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #4ade80;
  width: 78%;
}

.viz-risk .vk-row:nth-child(2) .vk-bar span { width: 66%; }

.viz-risk .vk-row.at-risk {
  animation: vkFlag 6s ease-in-out infinite;
}

.viz-risk .vk-row.at-risk .vk-bar span {
  width: 74%;
  animation: vkDrop 6s ease-in-out infinite;
}

.viz-risk .vk-flag {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff1f2;
  background: #e11d48;
  border: 1px solid #fda4af;
  border-radius: 999px;
  padding: 1px 7px;
  opacity: 0;
  animation: vkBadge 6s ease-out infinite;
  box-shadow: 0 6px 15px rgba(225, 29, 72, 0.48);
}

@keyframes vkFlag {
  0%, 34% { background: rgba(148, 163, 184, 0.09); border-color: transparent; }
  52%, 90% { background: rgba(220, 38, 38, 0.14); border-color: rgba(248, 113, 113, 0.4); }
  100% { background: rgba(148, 163, 184, 0.09); border-color: transparent; }
}

@keyframes vkDrop {
  0%, 22% { width: 74%; background: #4ade80; }
  40% { width: 41%; background: #fbbf24; }
  56%, 90% { width: 17%; background: #f87171; }
  100% { width: 74%; background: #4ade80; }
}

@keyframes vkBadge {
  0%, 50% { opacity: 0; transform: scale(0.7); }
  60%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.7); }
}

/* ========================================================================
   I3 — a guided walkthrough spotlighting one control at a time
   ===================================================================== */

.viz-guide {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.viz-guide .vgd-panel {
  width: 168px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(96, 165, 250, 0.32);
  overflow: hidden;
  animation: vgdRecede 6s ease-in-out infinite;
}

.viz-guide .vgd-complete {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(110, 231, 183, 0.6);
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #052e16;
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(11px) scale(0.88);
  animation: vgdComplete 6s ease-out infinite;
  box-shadow: 0 9px 22px rgba(16, 185, 129, 0.48);
}

.viz-guide .vgd-complete b {
  color: #4ade80;
  font-size: 0.78rem;
}

.viz-guide .vgd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(96, 165, 250, 0.14);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #bfdbfe;
}

.viz-guide .vgd-step {
  color: var(--aud-accent);
}

.viz-guide .vgd-body {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.viz-guide .vgd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  animation: vgdSpot 6s ease-in-out infinite;
}

.viz-guide .vgd-row:nth-child(1) { animation-name: vgdSpot1; }
.viz-guide .vgd-row:nth-child(2) { animation-name: vgdSpot2; }
.viz-guide .vgd-row:nth-child(3) { animation-name: vgdSpot3; }

.viz-guide .vgd-ctrl {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.3);
}

.viz-guide .vgd-tick {
  font-size: 0.55rem;
  font-weight: 900;
  color: #4ade80;
  opacity: 0;
  transform: scale(0.4);
  animation: vgdTick 6s ease-out infinite;
}

.viz-guide .vgd-row:nth-child(1) .vgd-tick { animation-name: vgdTick1; }
.viz-guide .vgd-row:nth-child(2) .vgd-tick { animation-name: vgdTick2; }
.viz-guide .vgd-row:nth-child(3) .vgd-tick { animation-name: vgdTick3; }

.viz-guide .vgd-track {
  margin: 2px 7px 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}

.viz-guide .vgd-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aud-accent-strong), var(--aud-accent));
  width: 8%;
  animation: vgdFill 6s ease-in-out infinite;
}

@keyframes vgdSpot {
  0%, 100% { background: transparent; box-shadow: none; }
}

@keyframes vgdSpot1 {
  0%, 5% { background: transparent; box-shadow: none; }
  10%, 19% {
    background: color-mix(in srgb, var(--aud-accent) 20%, transparent);
    box-shadow: 0 0 0 1.5px var(--aud-accent);
  }
  24%, 100% { background: transparent; box-shadow: none; }
}

@keyframes vgdSpot2 {
  0%, 27% { background: transparent; box-shadow: none; }
  32%, 41% {
    background: color-mix(in srgb, var(--aud-accent) 20%, transparent);
    box-shadow: 0 0 0 1.5px var(--aud-accent);
  }
  46%, 100% { background: transparent; box-shadow: none; }
}

@keyframes vgdSpot3 {
  0%, 49% { background: transparent; box-shadow: none; }
  54%, 63% {
    background: color-mix(in srgb, var(--aud-accent) 20%, transparent);
    box-shadow: 0 0 0 1.5px var(--aud-accent);
  }
  68%, 100% { background: transparent; box-shadow: none; }
}

@keyframes vgdTick {
  0%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes vgdTick1 {
  0%, 18% { opacity: 0; transform: scale(0.4); }
  23% { transform: scale(1.25); }
  28%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}

@keyframes vgdTick2 {
  0%, 40% { opacity: 0; transform: scale(0.4); }
  45% { transform: scale(1.25); }
  50%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}

@keyframes vgdTick3 {
  0%, 62% { opacity: 0; transform: scale(0.4); }
  67% { transform: scale(1.25); }
  72%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}

@keyframes vgdFill {
  0%, 10% { width: 8%; }
  24%, 32% { width: 38%; }
  46%, 54% { width: 69%; }
  68%, 90% { width: 100%; }
  100% { width: 8%; }
}

@keyframes vgdRecede {
  0%, 68% { opacity: 1; transform: none; }
  80%, 92% { opacity: 0.38; transform: translateY(8px) scale(0.93); }
  100% { opacity: 1; transform: none; }
}

@keyframes vgdComplete {
  0%, 70% { opacity: 0; transform: translateY(11px) scale(0.88); }
  80%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(11px) scale(0.88); }
}

/* ========================================================================
   I4 — the install queue evaporating, leaving one browser tab
   ===================================================================== */

.viz-nofuss {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.viz-nofuss .vn-queue {
  display: flex;
  gap: 7px;
}

.viz-nofuss .vn-chip {
  font-size: 0.58rem;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 6px;
  padding: 3px 7px;
  animation: vnPoof 6s ease-in-out infinite;
}

.viz-nofuss .vn-chip:nth-child(1) { animation-name: vnPoof1; }
.viz-nofuss .vn-chip:nth-child(2) { animation-name: vnPoof2; }
.viz-nofuss .vn-chip:nth-child(3) { animation-name: vnPoof3; }

.viz-nofuss .vn-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 9px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border: 1px solid #fde68a;
  font-size: 0.68rem;
  font-weight: 800;
  color: #431407;
  box-shadow: 0 9px 20px rgba(249, 115, 22, 0.34);
  opacity: 0;
  transform: scale(0.9);
  animation: vnTab 6s ease-out infinite;
}

.viz-nofuss .vn-tab::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 7px #4ade80;
}

.viz-nofuss .vn-devices {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 23px;
  color: #bfdbfe;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  animation: vnDevices 6s ease-out infinite;
}

.viz-nofuss .vn-devices span:nth-child(2) { font-size: 1.75rem; }
.viz-nofuss .vn-devices span:nth-child(3) { font-size: 1.1rem; }

@keyframes vnPoof {
  0%, 100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes vnPoof1 {
  0%, 12% { opacity: 1; transform: none; filter: blur(0); }
  22%, 88% { opacity: 0; transform: translateY(-10px) scale(0.8); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes vnPoof2 {
  0%, 21% { opacity: 1; transform: none; filter: blur(0); }
  31%, 88% { opacity: 0; transform: translateY(-10px) scale(0.8); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes vnPoof3 {
  0%, 30% { opacity: 1; transform: none; filter: blur(0); }
  40%, 88% { opacity: 0; transform: translateY(-10px) scale(0.8); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes vnTab {
  0%, 42% { opacity: 0; transform: scale(0.9); }
  52%, 88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes vnDevices {
  0%, 52% { opacity: 0; transform: translateY(6px); }
  62%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px); }
}

/* ========================================================================
   S6 — the living textbook: read, make a decision, then explain it
   ===================================================================== */

.viz-textbook {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.viz-textbook .vtb-reader {
  width: 215px;
  padding: 9px;
  border: 1px solid rgba(196, 181, 253, 0.5);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.76);
  box-shadow: 0 12px 28px rgba(5, 2, 15, 0.34);
  animation: vtbReader 7s ease-in-out infinite;
}

.viz-textbook .vtb-reader-head {
  display: flex;
  justify-content: space-between;
  color: #c4b5fd;
  font-size: 0.45rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.viz-textbook .vtb-reader-head b { color: #94a3b8; font-size: 0.42rem; }

.viz-textbook .vtb-reader-title {
  margin: 7px 0 6px;
  color: #f5f3ff;
  font-size: 0.66rem;
  font-weight: 800;
}

.viz-textbook .vtb-line {
  width: 100%;
  height: 3px;
  margin: 3px 0;
  border-radius: 3px;
  background: rgba(221, 214, 254, 0.32);
}

.viz-textbook .vtb-line.short { width: 62%; }

.viz-textbook .vtb-split {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 6px;
  margin-top: 8px;
}

.viz-textbook .vtb-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 4px;
}

.viz-textbook .vtb-copy i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(196, 181, 253, 0.38);
}

.viz-textbook .vtb-copy i:nth-child(2) { width: 78%; }
.viz-textbook .vtb-copy i:nth-child(3) { width: 58%; }

.viz-textbook .vtb-interactive {
  padding: 5px 6px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 5px;
  background: rgba(109, 40, 217, 0.14);
}

.viz-textbook .vtb-interactive strong,
.viz-textbook .vtb-interactive span,
.viz-textbook .vtb-interactive em { display: block; }
.viz-textbook .vtb-interactive strong { color: #c4b5fd; font-size: 0.42rem; letter-spacing: 0.09em; }
.viz-textbook .vtb-interactive span { margin-top: 2px; color: #f5f3ff; font-size: 0.51rem; font-weight: 800; }

.viz-textbook .vtb-options {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}

.viz-textbook .vtb-options b {
  flex: 1;
  padding: 3px 1px;
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: 3px;
  color: #cbd5e1;
  font-size: 0.39rem;
  font-weight: 800;
  text-align: center;
  animation: vtbChoose 7s ease-in-out infinite;
}

.viz-textbook .vtb-options b:nth-child(2) { animation-delay: -0.18s; }
.viz-textbook .vtb-options b:nth-child(3) { animation-delay: -0.36s; }

.viz-textbook .vtb-interactive em {
  margin-top: 5px;
  color: #86efac;
  font-size: 0.44rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.03em;
  opacity: 0;
  animation: vtbUnlock 7s ease-in-out infinite;
}

.viz-textbook .vtb-current {
  position: absolute;
  bottom: 10px;
  padding: 4px 7px;
  border: 1px solid rgba(134, 239, 172, 0.42);
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.7);
  color: #bbf7d0;
  font-size: 0.43rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  opacity: 0;
  transform: translateY(6px);
  animation: vtbCurrent 7s ease-in-out infinite;
}

@keyframes vtbReader {
  0%, 7% { opacity: 0; transform: translateY(9px) scale(0.94); }
  17%, 84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(9px) scale(0.94); }
}

@keyframes vtbChoose {
  0%, 32% { border-color: rgba(196, 181, 253, 0.28); background: transparent; color: #cbd5e1; }
  42%, 70% { border-color: #c4b5fd; background: rgba(124, 58, 237, 0.6); color: #ffffff; }
  84%, 100% { border-color: rgba(196, 181, 253, 0.28); background: transparent; color: #cbd5e1; }
}

@keyframes vtbUnlock {
  0%, 52% { opacity: 0; transform: translateY(3px); }
  62%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(3px); }
}

@keyframes vtbCurrent {
  0%, 64% { opacity: 0; transform: translateY(6px); }
  74%, 84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px); }
}

/* ========================================================================
   What's New slide — lighter, list-shaped, no dark gradient
   ===================================================================== */

.audience-panel .aud-slide--news {
  background: linear-gradient(155deg, #ffffff 0%, #f4f7fc 100%);
  border-color: #d8e2f0;
}

.aud-slide--news .aud-title { color: #0f172a; }

.aud-slide--news .aud-eyebrow {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.aud-slide--news .aud-cta { color: #1d4ed8; }

.aud-slide--news .aud-viz { border-left-color: #dbe4f0; }

.news-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.news-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(6px);
  animation: newsIn 0.45s ease-out forwards;
}

.news-item:nth-child(1) { animation-delay: 0.05s; }
.news-item:nth-child(2) { animation-delay: 0.15s; }
.news-item:nth-child(3) { animation-delay: 0.25s; }

.news-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  margin-top: 0.4rem;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

.news-item:not(:first-child) .news-dot {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

.news-copy strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.news-copy span {
  display: block;
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.5;
  margin-top: 0.15rem;
}

.news-date {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

@keyframes newsIn {
  to { opacity: 1; transform: none; }
}

/* News slide visual: a soft ticker sweep. */
.viz-news {
  min-height: 320px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e0f2fe 0%, #fef3c7 50%, #fce7f3 100%);
  position: relative;
}

.viz-news::before { opacity: 0.5; }

.viz-news .vw-release-stack {
  position: relative;
  width: 210px;
  height: 135px;
}

.viz-news .vw-release {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
  font-size: 0.55rem;
  transform-origin: center;
}

.viz-news .vw-release span {
  color: #64748b;
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.viz-news .vw-release b { color: #0f172a; font-size: 0.61rem; }
.viz-news .vw-release i { color: #047857; font-size: 0.43rem; font-style: normal; font-weight: 900; }
.viz-news .vw-release--back { top: 9px; border-left: 4px solid #8b5cf6; animation: vwBack 6.8s ease-in-out infinite; }
.viz-news .vw-release--middle { top: 42px; border-left: 4px solid #f59e0b; animation: vwMiddle 6.8s ease-in-out infinite; }
.viz-news .vw-release--front { top: 75px; border-left: 4px solid #10b981; animation: vwFront 6.8s ease-in-out infinite; }

@keyframes vwBack {
  0%, 8% { opacity: 0; transform: translateY(20px) rotate(-4deg); }
  18%, 78% { opacity: 0.58; transform: translateY(0) rotate(-2deg); }
  90%, 100% { opacity: 0; transform: translateY(20px) rotate(-4deg); }
}

@keyframes vwMiddle {
  0%, 16% { opacity: 0; transform: translateY(20px) rotate(3deg); }
  26%, 78% { opacity: 0.78; transform: translateY(0) rotate(1deg); }
  90%, 100% { opacity: 0; transform: translateY(20px) rotate(3deg); }
}

@keyframes vwFront {
  0%, 24% { opacity: 0; transform: translateY(20px) scale(0.94); }
  36%, 75% { opacity: 1; transform: translateY(0) scale(1); }
  48% { box-shadow: 0 15px 28px rgba(16, 185, 129, 0.3); }
  90%, 100% { opacity: 0; transform: translateY(20px) scale(0.94); }
}

/* ── layout order + responsive ──────────────────────────────────────────── */

/* Copy reads first on desktop; the visual sits to its right. */
.aud-body { order: 1; }
.aud-viz { order: 2; }

/* Narrow desktops: two columns still fit, but the scaled visual would clip. */
@media (min-width: 861px) and (max-width: 1040px) {
  .aud-viz > [class*="viz-"] {
    transform: scale(1.2);
  }

  .aud-body {
    padding: 1.75rem 1.9rem;
  }
}

@media (max-width: 860px) {
  .aud-slide.is-active {
    grid-template-columns: 1fr;
  }

  .aud-body {
    order: 2;
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .aud-viz {
    order: 1;
    min-height: 200px;
    border-left: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  }

  .aud-viz > [class*="viz-"] {
    height: 150px;
    transform: scale(1.1);
  }

  .viz-news { min-height: 200px; }
  .viz-news .vw-release-stack { transform: scale(0.86); }

  .aud-carousel { min-height: 0; }
  .news-list { gap: 0.7rem; }
}

/* ========================================================================
   Collapsed strip — what a signed-in user sees instead of the full grid
   ===================================================================== */

.audience-collapsed {
  max-width: 1200px;
  margin: 1.75rem auto 0;
  padding: 0 1.25rem;
}

.audience-collapsed[hidden] { display: none; }

.audience-collapsed button {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.audience-collapsed button:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

.audience-collapsed button:focus-visible {
  outline: 3px solid #2a7de1;
  outline-offset: 2px;
}

.audience-collapsed .ac-caret {
  transition: transform 0.22s ease;
}

.audience-collapsed button[aria-expanded="true"] .ac-caret {
  transform: rotate(180deg);
}

/* Reserved for the Phase 2 personalized panel; empty until then. */
#home-personal-panel:empty {
  display: none;
}

/* ── reduced motion: hold the finished frame ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .audience-section *,
  .audience-section *::before,
  .audience-section *::after {
    animation: none !important;
    transition: none !important;
  }

  .viz-tree .vt-option,
  .viz-tree .vt-option-text,
  .viz-tree .vt-branch,
  .viz-tree .vt-result,
  .viz-tree .vt-result-text { opacity: 1; transform: none; stroke-dashoffset: 0; }
  .viz-tree .vt-node.target,
  .viz-chat .vc-file,
  .viz-chat .vc-context,
  .viz-chat .vc-prompt,
  .viz-chat .praxis-pal-head--audience,
  .viz-chat .vc-bubble,
  .viz-proof .vp-artifact,
  .viz-proof .vp-cert,
  .viz-guide .vgd-tick,
  .viz-guide .vgd-complete,
  .viz-nofuss .vn-tab,
  .news-item { opacity: 1; transform: none; }
  .viz-chat .vc-scan,
  .viz-chat .vc-caret,
  .viz-proof .vp-shine,
  .viz-drop .vd-file,
  .viz-news .vw-release--back,
  .viz-news .vw-release--middle { display: none; }
  .viz-proof .vp-badge { filter: none; opacity: 1; transform: none; }
  .viz-drop .vd-bar { height: var(--vd-h); }
  .viz-drop .vd-result { opacity: 1; transform: none; }
  .viz-race .vr-fill { width: var(--vr-a); }
  .viz-build .vb-row { opacity: 1; transform: none; }
  .viz-risk .vk-row.at-risk .vk-bar span { width: 17%; background: #f87171; }
  .viz-risk .vk-flag { opacity: 1; transform: none; }
  .viz-guide .vgd-fill { width: 100%; }
  .viz-guide .vgd-panel { opacity: 0.38; transform: translateY(8px) scale(0.93); }
  .viz-nofuss .vn-chip { opacity: 0.25; }
  .viz-nofuss .vn-devices { opacity: 1; transform: none; }
  .viz-textbook .vtb-reader,
  .viz-textbook .vtb-current,
  .viz-textbook .vtb-interactive em { opacity: 1; transform: none; }
  .viz-textbook .vtb-options b { border-color: #c4b5fd; background: rgba(124, 58, 237, 0.6); color: #ffffff; }
  .viz-news .vw-release--front { opacity: 1; transform: none; }
}