/* polish.css — focused, non-mobile fixes layered on top of styles.css.
 * Loaded after styles.css so plain selectors win.
 * Keep edits surgical — do not duplicate her base styles. */

/* Hero sizing for inner sections — landing hero uses premium block at file end. */
.product-flow .hero h1,
.section .hero h1 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-wrap: balance;
}

/* --- Product-flow section: keep the LEFT column anchored.
 *     Persona switches change the right column's content height — without
 *     these overrides, .flow-grid is align-items:center, so the left
 *     framing copy slides up and down on every click. */
.flow-grid {
  align-items: start;
}
.flow-demo {
  align-items: start;
}
/* Lock the swappable side so different persona scenarios don't reflow. */
.phone-frame,
.brief-frame {
  min-height: 320px;
}

/* --- Pain section: before/after compare --- */
.compare-before-after > div {
  padding: 28px 32px;
}
.compare-phase-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.compare-phase-label--after {
  color: #0f9f8f;
}
.compare-before-after .compare-context {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.25;
}
.compare-before-after > div:last-child .compare-context {
  color: #0e2a3a;
}
.compare-before-after .compare-points {
  margin-top: 2px;
}

/* --- Compare grid: chaos visual (left) vs clear stream (right) --- */
.chaos-visual {
  position: relative;
  height: 140px;
  margin: -8px -8px 16px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(26,23,21,0.025) 10px, rgba(26,23,21,0.025) 11px);
  overflow: hidden;
}
.chaos-chip {
  position: absolute;
  background: var(--paper);
  border: 1px solid #c8cfdb;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--ink-soft);
  white-space: nowrap;
  box-shadow: 0 3px 6px -2px rgba(26,23,21,0.18);
}
.chaos-chip .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f6fed;
  margin-right: 6px;
  vertical-align: middle;
}
.chaos-chip.faint {
  opacity: 0.55;
  background: rgba(249, 251, 253, 0.6);
  color: var(--ink-faint);
}
/* Scattered placements + rotations — the visual point is "too much".
 * Tuned for a 140px-tall container. */
.chaos-chip.c1  { top: 6px;   left: 14px;  transform: rotate(-4deg);  }
.chaos-chip.c2  { top: 4px;   right: 16px; transform: rotate(3deg);   }
.chaos-chip.c3  { top: 34px;  left: 50%;   transform: translateX(-60%) rotate(-2deg); }
.chaos-chip.c4  { top: 46px;  left: 8px;   transform: rotate(2deg);   }
.chaos-chip.c5  { top: 44px;  right: 28px; transform: rotate(-6deg);  }
.chaos-chip.c6  { top: 72px;  left: 38%;   transform: rotate(4deg);   }
.chaos-chip.c7  { top: 84px;  left: 16px;  transform: rotate(-3deg);  }
.chaos-chip.c8  { top: 80px;  right: 14px; transform: rotate(5deg);   }
.chaos-chip.c9  { top: 110px; left: 30%;   transform: rotate(-2deg);  }
.chaos-chip.c10 { top: 114px; left: 8px;   transform: rotate(3deg);   }
.chaos-chip.c11 { top: 114px; right: 24px; transform: rotate(-5deg);  }

.clear-visual {
  margin: -8px -8px 16px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid rgba(47, 111, 237, 0.18);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.clear-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.clear-stage-label {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: center;
}
.clear-arrow {
  font-size: 14px;
  line-height: 1;
  color: rgba(47, 111, 237, 0.55);
  margin: 0;
}

/* Chat dots cloud: many small WhatsApp-green dots conveying volume */
.clear-stage-dots {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 200px;
  padding: 4px 2px;
}
.clear-stage-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25d366; /* WhatsApp green */
  opacity: 0.75;
  animation: clear-dot-blink 2.6s ease-in-out infinite;
}
.clear-stage-dots span:nth-child(2n)  { animation-delay: 0.2s; opacity: 0.55; }
.clear-stage-dots span:nth-child(3n)  { animation-delay: 0.5s; opacity: 0.85; }
.clear-stage-dots span:nth-child(5n)  { animation-delay: 0.9s; opacity: 0.45; }
.clear-stage-dots span:nth-child(7n)  { animation-delay: 1.2s; }
.clear-stage-dots span:nth-child(11n) { animation-delay: 1.6s; opacity: 0.65; }
@keyframes clear-dot-blink {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(1.3); opacity: 1;    }
}

/* Third Eye in the middle */
.clear-eye {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-eye-ring {
  position: absolute;
  border-radius: 50%;
}
.clear-eye-ring.r1 {
  width: 46px; height: 46px;
  border: 1px dashed rgba(47, 111, 237, 0.45);
  animation: tef-spin 14s linear infinite;
}
.clear-eye-ring.r2 {
  width: 32px; height: 32px;
  border: 1px solid rgba(47, 111, 237, 0.6);
  animation: tef-spin 9s linear infinite reverse;
}
.clear-eye-core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3b82f6, var(--accent) 60%, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15), 0 0 16px rgba(47, 111, 237, 0.45);
  animation: tef-core-pulse 2.4s ease-in-out infinite;
}

/* Manager brief card */
.clear-brief {
  width: 100%;
  max-width: 220px;
  border: 1px solid rgba(47, 111, 237, 0.28);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef1f7 100%);
  padding: 8px 12px;
  text-align: left;
  box-shadow: 0 10px 22px -16px rgba(47, 111, 237, 0.4);
}
.clear-brief strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 12.5px;
  margin-bottom: 2px;
}
.clear-brief span {
  font-size: 11px;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .chaos-visual { height: 160px; }
  .chaos-chip { font-size: 10px; padding: 5px 8px; }
  .clear-row { font-size: 12px; }
}

/* --- Insights proof grid: three fixed example cards --- */
.insights-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.insight-proof-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  min-height: 100%;
}
.insight-proof-fields {
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}
.insight-proof-field {
  display: grid;
  gap: 4px;
}
.insight-proof-field dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.insight-proof-field dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.insight-proof-field-action {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #d5deea;
}
.insight-proof-field-action dd {
  font-weight: 600;
  color: #1d5ad6;
}

@media (max-width: 960px) {
  .insights-proof-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Insights carousel (legacy; unused on landing) --- */
.insights-carousel {
  position: relative;
  margin-top: 8px;
  padding: 0 56px;
}
.insights-carousel .insight-list {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.insights-carousel .insight-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  padding: 28px 32px;
  margin: 0;
}
.insights-carousel .insight-item p {
  font-size: 18px;
  line-height: 1.45;
  margin-top: 14px;
}
.insights-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #c8cfdb;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(26,23,21,0.2);
  transition: transform 0.15s ease, background 0.15s ease;
}
.insights-nav:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-50%) scale(1.05);
}
.insights-nav.prev { left: 6px; }
.insights-nav.next { right: 6px; }
.insights-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.insights-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8cfdb;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.insights-dot:hover { transform: scale(1.2); }
.insights-dot.active {
  background: var(--accent);
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .insights-carousel { padding: 0 38px 8px; }
  .insights-nav { width: 34px; height: 34px; font-size: 16px; }
  .insights-nav.prev { left: 2px; }
  .insights-nav.next { right: 2px; }
  .insights-carousel .insight-item { padding: 20px; }
  .insights-carousel .insight-item p { font-size: 16px; }
}

/* ============================================================
 * Hero animation stage: voices (left) → engine (mid) → insights (right)
 * The point of the visual: many individuals, one synthesis, structured output.
 * Pure CSS animation; no JS.
 * ============================================================ */

.tef-stage {
  position: relative;
  display: block;                       /* override her .hero-showcase grid */
  grid-template-columns: none;
  background: linear-gradient(180deg, #fffefb 0%, #e9edf5 100%);
  border: 1px solid #c8cfdb;
  border-radius: 14px;
  padding: 18px 22px 22px;
  box-shadow: 0 30px 60px -40px rgba(26, 23, 21, 0.45);
  overflow: hidden;
  max-height: 480px;
  max-width: none;
}

.tef-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(26, 23, 21, 0.12);
  margin-bottom: 16px;
}
.tef-stage-head-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a9b4f;
  box-shadow: 0 0 0 0 rgba(42, 155, 79, 0.5);
  animation: tef-pulse-live 1.6s ease-out infinite;
}
@keyframes tef-pulse-live {
  0%   { box-shadow: 0 0 0 0 rgba(42,155,79,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(42,155,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,155,79,0); }
}

.tef-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 80px 1fr;
  gap: 16px;
  height: 360px;
  align-items: stretch;
}

/* --- LEFT: voices column (vertical ticker) --- */
.tef-voices {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tef-voices-label,
.tef-insights-label {
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.tef-voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1;
  overflow: hidden;
  /* Cards fade in and out at the edges instead of being cut mid-message. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.tef-voice-list li {
  position: absolute;
  left: 0;
  right: 14px;
  background: #e7f7d9;                  /* WhatsApp received-bubble tint */
  border: 1px solid #d2ead6;
  border-radius: 10px 10px 10px 2px;    /* bubble corner, tail bottom-left */
  padding: 7px 10px 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: 0 4px 10px -8px rgba(26,23,21,0.3);
  opacity: 0;
  animation: tef-voice-scroll 21s linear infinite;
  white-space: normal;
}
/* Little tail to make it read as a chat bubble */
.tef-voice-list li::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: #e7f7d9;
  border-left: 1px solid #d2ead6;
  border-bottom: 1px solid #d2ead6;
  border-radius: 0 0 0 8px;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.tef-voice-list li .tef-voice-who {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #1f7a4d;                       /* WhatsApp-style sender-name green */
  margin-bottom: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.tef-voice-list li .tef-voice-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Faux read-receipts: two tiny ticks in the corner */
.tef-voice-list li::after {
  content: "✓✓";
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 9px;
  color: #34a3df;                       /* WhatsApp blue ticks */
  letter-spacing: -2px;
  font-family: ui-monospace, monospace;
}
/* Negative delays: the list is already full of messages on first paint
 * instead of starting empty and filling one card every 3 seconds. */
.tef-voice-list li:nth-child(1) { animation-delay: -18s; }
.tef-voice-list li:nth-child(2) { animation-delay: -15s; }
.tef-voice-list li:nth-child(3) { animation-delay: -12s; }
.tef-voice-list li:nth-child(4) { animation-delay: -9s;  }
.tef-voice-list li:nth-child(5) { animation-delay: -6s;  }
.tef-voice-list li:nth-child(6) { animation-delay: -3s;  }
.tef-voice-list li:nth-child(7) { animation-delay: 0s;   }

/* Pure linear scroll — no "pause" near the middle that causes cards to bunch up.
 * Each card travels from bottom to top continuously; 3s spacing × 21s cycle means
 * ~5-6 cards in flight at any time with even spacing. */
@keyframes tef-voice-scroll {
  0%   { top: 105%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: -30%; opacity: 0; }
}

/* --- MIDDLE: synthesis engine --- */
.tef-engine {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tef-engine-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(47, 111, 237, 0.3);
}
.tef-engine-ring.r1 {
  width: 88px; height: 88px;
  border: 1px dashed rgba(47, 111, 237, 0.4);
  animation: tef-spin 16s linear infinite;
}
.tef-engine-ring.r2 {
  width: 64px; height: 64px;
  border: 1px solid rgba(47, 111, 237, 0.55);
  animation: tef-spin 10s linear infinite reverse;
}
@keyframes tef-spin {
  to { transform: rotate(360deg); }
}
.tef-engine-core {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3b82f6, var(--accent) 60%, #1e3a8a);
  box-shadow:
    0 0 0 4px rgba(47, 111, 237, 0.15),
    0 0 24px rgba(47, 111, 237, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tef-core-pulse 2.4s ease-in-out infinite;
}
@keyframes tef-core-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(47,111,237,0.15), 0 0 18px rgba(47,111,237,0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(47,111,237,0.05), 0 0 32px rgba(47,111,237,0.55); }
}
.tef-engine-mark {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper);
}
.tef-engine-label {
  margin-top: 78px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

/* --- RIGHT: insights column (one card at a time, stacked in fixed slot) --- */
.tef-insights {
  position: relative;
  z-index: 2;
}
.tef-insight-card {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  background: var(--paper);
  border: 1px solid rgba(47, 111, 237, 0.22);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
  box-shadow: 0 10px 20px -16px rgba(26, 23, 21, 0.35);
  opacity: 0;
  transform: translateY(8px);
  animation: tef-insight-in 9s ease-in-out infinite;
}
.tef-insight-card .tef-insight-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 4px;
}
.tef-insight-card strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 2px;
}
.tef-insight-card span {
  font-size: 11px;
  color: var(--ink-faint);
}
.tef-insight-card.i1 { animation-delay: 0.8s; }
.tef-insight-card.i2 { animation-delay: 3.8s; }
.tef-insight-card.i3 { animation-delay: 6.8s; }

@keyframes tef-insight-in {
  0%   { opacity: 0; transform: translateY(10px); }
  6%   { opacity: 1; transform: translateY(0); }
  33%  { opacity: 1; transform: translateY(0); }
  40%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* --- Particles flowing through the engine.
 *     Inbound (left→engine) and outbound (engine→right) run on three fixed
 *     "lanes" at top: 30% / 50% / 70%. Pure horizontal motion — no random
 *     drift — so the eye reads "WhatsApp messages → engine → manager-ready".
 * --- */
.tef-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(47,111,237,0.5);
}

/* Inbound: travel from left:45% to left:50% (right edge of voices → engine core) */
.tef-particle.p1 { top: 30%; animation: tef-flow-in 2.4s linear infinite; animation-delay: 0s;   }
.tef-particle.p2 { top: 30%; animation: tef-flow-in 2.4s linear infinite; animation-delay: 0.8s; }
.tef-particle.p3 { top: 50%; animation: tef-flow-in 2.4s linear infinite; animation-delay: 0.3s; }
.tef-particle.p4 { top: 50%; animation: tef-flow-in 2.4s linear infinite; animation-delay: 1.1s; }
.tef-particle.p5 { top: 70%; animation: tef-flow-in 2.4s linear infinite; animation-delay: 0.5s; }
.tef-particle.p6 { top: 70%; animation: tef-flow-in 2.4s linear infinite; animation-delay: 1.5s; }

@keyframes tef-flow-in {
  0%   { opacity: 0; left: 45%; transform: scale(0.6); }
  20%  { opacity: 1;             transform: scale(1);   }
  85%  { opacity: 1; left: 50%;  transform: scale(1);   }
  100% { opacity: 0; left: 50%;  transform: scale(0.6); }
}

/* Outbound: travel from left:50% to left:55% (engine core → left edge of insights) */
.tef-particle.out { background: #3b82f6; }
.tef-particle.out.o1 { top: 30%; animation: tef-flow-out 2.4s linear infinite; animation-delay: 1.0s; }
.tef-particle.out.o2 { top: 50%; animation: tef-flow-out 2.4s linear infinite; animation-delay: 0.4s; }
.tef-particle.out.o3 { top: 70%; animation: tef-flow-out 2.4s linear infinite; animation-delay: 1.6s; }

@keyframes tef-flow-out {
  0%   { opacity: 0; left: 50%; transform: scale(0.6); }
  20%  { opacity: 1;             transform: scale(1);   }
  85%  { opacity: 1; left: 55%;  transform: scale(1);   }
  100% { opacity: 0; left: 55%;  transform: scale(0.6); }
}

@media (max-width: 768px) {
  .tef-stage { padding: 14px 16px 16px; max-height: none; }
  .tef-stage-head {
    padding-bottom: 12px;
    margin-bottom: 12px;
    font-size: 10px;
    align-items: flex-start;
    gap: 8px;
  }
  .tef-stage-head-dot {
    flex: 0 0 8px;
    margin-top: 3px;
  }
  .tef-stage-head-label {
    min-width: 0;
    display: block;
    line-height: 1.35;
    word-break: break-word;
  }
  .tef-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
  }
  .tef-voices,
  .tef-insights {
    width: 100%;
  }
  .tef-voice-list {
    height: 200px;
    flex: none;
  }
  .tef-voice-list li {
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .tef-insights {
    height: 110px;
  }
  .tef-insight-card {
    top: 0;
    padding: 11px 13px;
  }
  /* Compact horizontal engine on mobile: just the core, label inline */
  .tef-engine {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    min-height: 0;
    padding: 8px 0;
  }
  .tef-engine-ring {
    display: none;
  }
  .tef-engine-ring.r1 { width: 44px; height: 44px; }
  .tef-engine-ring.r2 { width: 30px; height: 30px; }
  .tef-engine-core { width: 22px; height: 22px; }
  .tef-engine-label {
    margin-top: 0;
    align-self: center;
    margin-left: 0;
    position: static;
    z-index: auto;
  }
  .tef-particle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tef-voice-list li,
  .tef-insight-card,
  .tef-engine-core,
  .tef-engine-ring,
  .tef-stage-head-dot,
  .tef-particle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Without motion the absolutely placed cards all sat on one spot; stack them. */
  .tef-voice-list li,
  .tef-insight-card {
    position: static;
    margin-bottom: 8px;
  }
  .tef-particle { display: none; }
}

/* --- Institutional memory: compact three-column cards --- */
#institutional-knowledge .section-lead {
  max-width: 52ch;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.memory-card {
  background: var(--paper);
  border: 1px solid #d2d9e6;
  border-radius: 10px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.memory-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.memory-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.memory-card p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.memory-card-foot {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: #535a67;
}

@media (max-width: 960px) {
  .memory-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* --- Use cases section: compact industry cards above Pilot --- */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.use-case {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid #c8cfdb;
  border-radius: 10px;
  padding: 18px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  box-shadow: 0 12px 24px -24px rgba(26, 23, 21, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 190px;
}
.use-case:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 28px -24px rgba(26, 23, 21, 0.55);
  border-color: rgba(47, 111, 237, 0.4);
}
.use-case-visual {
  width: 132px;
  height: 104px;
  border: 1px solid rgba(200, 207, 219, 0.85);
  border-radius: 8px;
  background: #f1f3f8;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.use-case img {
  display: block;
  width: 112px;
  height: auto;
  max-height: 86px;
  object-fit: contain;
}
.use-case-body {
  padding: 0;
}
.use-case-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.use-case h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.use-case p {
  margin: 10px 0 0;
  max-width: 31rem;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.use-case span {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 207, 219, 0.72);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.42;
  font-weight: 600;
}
.use-cases-footnote {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #c8cfdb;
  border-radius: 12px;
  color: var(--ink-soft);
  background: rgba(249, 251, 253, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .use-case {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 180px;
  }
  .use-case-visual {
    width: 112px;
    height: 94px;
  }
  .use-case img {
    width: 96px;
    max-height: 78px;
  }
}
@media (max-width: 820px) {
  .use-cases-grid { grid-template-columns: 1fr; }
  .use-case { min-height: 0; }
}
@media (max-width: 540px) {
  .use-cases-grid { grid-template-columns: 1fr; gap: 12px; }
  .use-case {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    align-items: start;
  }
  .use-case-visual {
    width: 74px;
    height: 64px;
  }
  .use-case img {
    width: 64px;
    max-height: 52px;
  }
  .use-case h3 { font-size: 20px; }
  .use-case p { font-size: 14px; }
  .use-case span { font-size: 12px; }
}

/* ============================================================
 * Demo workspace polish
 * Scoped to .demo-workspace-body so the landing page isn't touched.
 * ============================================================ */

/* --- Third Eye insight card: make it the visual lead of the Brief --- */
.demo-workspace-body .third-eye-insight-card {
  padding: 20px 22px;
  border: 1px solid rgba(47, 111, 237, 0.55);
  border-left: 5px solid var(--accent);
  background: linear-gradient(180deg, #f9fafc 0%, #eaeef5 100%);
  margin-bottom: 18px;
  box-shadow: 0 18px 36px -28px rgba(47, 111, 237, 0.45);
}
.demo-workspace-body .third-eye-insight-head {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.demo-workspace-body .third-eye-insight-card p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}
.demo-workspace-body .third-eye-insight-item {
  padding: 10px 12px;
}
.demo-workspace-body .third-eye-insight-item p {
  font-size: 14.5px;
  color: var(--ink);
}
.demo-workspace-body .third-eye-focus-block {
  padding: 11px 13px;
}
.demo-workspace-body .third-eye-focus-block,
.demo-workspace-body .third-eye-focus-block * {
  font-size: 14px;
}

/* --- Executive Brief: bolder headings, higher-contrast bullets --- */
.demo-workspace-body .daily-brief-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.demo-workspace-body .daily-brief-card .section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}
.demo-workspace-body .brief-bullet {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  padding: 12px 14px;
  border-left-width: 4px;
}
.demo-workspace-body .action-item {
  padding: 12px 14px;
}
.demo-workspace-body .action-item p {
  font-size: 14px;
}

/* KPI cards: a touch larger so they read at a glance */
.demo-workspace-body .kpi-card {
  padding: 16px 16px 14px;
}
.demo-workspace-body .kpi-value {
  font-size: 38px;
  font-weight: 800;
}
.demo-workspace-body .kpi-label {
  font-size: 11px;
  font-weight: 800;
}

/* --- Locations: make Needs attention clearly a WORKSPACE-LEVEL summary
 *     so the user understands it doesn't track their row-click selection. --- */
.demo-workspace-body .locations-focus-title {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-workspace-body .locations-focus-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18);
}
.demo-workspace-body .locations-focus-strip {
  position: relative;
}
.demo-workspace-body .locations-focus-strip::after {
  content: "Workspace-wide — click any branch in the table below for its detail.";
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(35, 89, 176, 0.32);
  font-size: 11.5px;
  color: #224a8a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.demo-workspace-body .locations-focus-btn span { font-size: 13px; }
.demo-workspace-body .locations-focus-btn strong { font-size: 15px; }

/* --- Demo workspace: sidebar overflow + main panel scroll --- */
.demo-workspace-body .workspace-sidebar {
  overflow: hidden !important;
}
.demo-workspace-body .sidebar-block {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.demo-workspace-body .sidebar-pilot-card {
  flex: 0 0 auto;
}
.workspace-shell.sidebar-collapsed .workspace-sidebar {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
.workspace-shell.sidebar-collapsed .sidebar-block {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.workspace-shell.sidebar-collapsed .nav-tab-soon-badge {
  display: none !important;
  visibility: hidden !important;
}
.workspace-shell.sidebar-collapsed .nav-tab {
  overflow: hidden !important;
}
.workspace-shell.sidebar-collapsed .nav-tab-icon .nav-tab-soon-badge {
  display: none !important;
}
@media (max-width: 1100px) {
  .demo-workspace-body .workspace-shell {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .demo-workspace-body .workspace-shell.sidebar-collapsed .workspace-content,
  .demo-workspace-body .workspace-shell:not(.sidebar-collapsed) .workspace-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--workspace-mobile-nav-top, 120px) - 20px) !important;
  }
}

/* --- Landing premium (Honen-inspired): nav, hero, showcase --- */
body:not(.demo-workspace-body) {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(249, 251, 253, 0.9) 0%, transparent 55%),
    #f0f1f4;
}

.nav-premium {
  padding: 16px 32px 12px;
  max-width: 1180px;
}

.nav-premium .brand {
  align-items: flex-start;
}

.nav-premium .brand-mark {
  margin-top: 1px;
}

.brand-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-premium .brand-tagline {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.nav-links-premium {
  gap: 18px;
}

.nav-text-link {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-faint);
  padding: 4px 0;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.nav-text-link:hover {
  color: var(--ink);
}

.marketing-lang-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

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

.marketing-lang-select-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint, #5b6370);
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.marketing-lang-select-chevron {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  transition: transform 0.15s ease;
}

.marketing-lang-select.is-open .marketing-lang-select-chevron {
  transform: rotate(180deg);
}

.marketing-lang-select-trigger:hover,
.marketing-lang-select.is-open .marketing-lang-select-trigger {
  color: var(--ink, #171713);
  background: rgba(23, 23, 19, 0.04);
}

.marketing-lang-select-trigger:focus-visible {
  outline: 2px solid rgba(23, 23, 19, 0.22);
  outline-offset: 2px;
}

.marketing-lang-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 148px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(23, 23, 19, 0.08);
  border-radius: 12px;
  background: #f9fbfd;
  box-shadow:
    0 1px 2px rgba(23, 23, 19, 0.04),
    0 12px 28px rgba(23, 23, 19, 0.1);
}

.marketing-lang-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #171713);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.marketing-lang-select-option:hover {
  background: rgba(23, 23, 19, 0.045);
}

.marketing-lang-select-option.is-selected {
  background: rgba(47, 111, 237, 0.08);
  color: var(--ink, #171713);
}

.marketing-lang-select-check {
  color: #1d5ad6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.marketing-lang-select-option:focus-visible {
  outline: 2px solid rgba(47, 111, 237, 0.28);
  outline-offset: 1px;
}

.marketing-lang-select--footer .marketing-lang-select-trigger {
  padding-left: 0;
}

.marketing-lang-select--footer .marketing-lang-select-menu {
  right: auto;
  left: 0;
}

.nav-premium .nav-cta {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: none;
  line-height: 1.2;
}

.nav-premium .nav-cta:hover {
  box-shadow: none;
  transform: none;
  opacity: 0.88;
}

.hero-copy-premium {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 36rem;
  padding-top: 4px;
}

.hero-copy-premium .hero-eyebrow {
  margin-bottom: 20px;
  color: var(--ink-faint);
}

.hero-copy-premium .hero-kicker,
.hero-copy-premium .hero-bridge,
.hero-copy-premium .hero-action-bar,
.hero-copy-premium .hero-positioning {
  display: none;
}

.hero-copy-premium h1 {
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 15ch;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--ink);
}

.hero-copy-premium h1 em {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

.hero-copy-premium .hero-sub {
  font-family: inherit;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 0 28px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-copy-premium .btn-hero-primary,
.hero-copy-premium .btn-hero-secondary {
  min-height: 48px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-copy-premium .btn-hero-primary {
  border: none;
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.hero-copy-premium .btn-hero-primary:hover {
  background: #1a222f;
  transform: none;
}

.hero-copy-premium .btn-hero-secondary {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  backdrop-filter: none;
}

.hero-copy-premium .btn-hero-secondary:hover {
  border-color: #acb7c9;
  background: #f7f8fb;
}

.hero-copy-premium .hero-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-faint);
}

.hero-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 28px;
}

.hero-clients-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #52627a);
}

.hero-clients ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-clients li {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink, #0e1420);
}

.hero-copy-premium .hero-try-demo {
  color: var(--ink, #10151e);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-copy-premium .hero-try-demo:hover {
  color: #2f6fed;
}

.hero-copy-premium .hero-note-sep {
  margin: 0 0.45em;
  opacity: 0.55;
}

.hero {
  padding: 48px 0 64px;
}

/* `.hero` above resets the horizontal padding `.wrap` gives the landing
   container, so between 769px and ~1184px the headline and the demo card sat
   flush against the window edges. mobile.css sets its own below 768px. */
.hero.wrap {
  padding-left: 32px;
  padding-right: 32px;
}

.hero-layout {
  gap: 40px;
  align-items: center;
}

.hero-showcase.tef-stage,
.hero-layout .hero-showcase {
  border: 1px solid rgba(212, 217, 225, 0.9);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 48px -32px rgba(26, 23, 21, 0.28);
  background: linear-gradient(165deg, #fbfcfd 0%, #edf1f7 100%);
}

/* Book a demo — premium simple */
.section-book-demo {
  padding-top: 72px;
  padding-bottom: 88px;
  border-top: 1px solid var(--line);
}

.book-demo-wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
  max-width: 960px;
}

.book-demo-copy h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 18ch;
}

.book-demo-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 42ch;
}

.book-demo-points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.book-demo-points li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.book-demo-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.book-demo-alt {
  margin: 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.book-demo-alt a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.book-demo-alt a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

#book-demo .book-demo-form {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 24px;
  box-shadow: none;
  gap: 6px;
}

#book-demo .book-demo-form label {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-top: 4px;
  white-space: nowrap;
}

#book-demo .waitlist-form-fields {
  display: flex;
  flex-direction: column;
}

#book-demo .book-demo-form input,
#book-demo .book-demo-form select:not(.demo-select-native) {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 15px;
  background: var(--paper);
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}

.demo-select {
  position: relative;
  margin-bottom: 8px;
}

#book-demo .book-demo-form .demo-select-native,
.demo-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

.demo-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.demo-select-trigger:hover {
  border-color: #acb7c9;
}

.demo-select-trigger:focus {
  outline: none;
  border-color: #acb7c9;
}

.demo-select.is-open .demo-select-trigger {
  border-color: #acb7c9;
  box-shadow: 0 0 0 3px rgba(172, 183, 201, 0.22);
}

.demo-select-value.is-placeholder {
  color: #5e6674; /* #858d9b was 3.1:1 */
}

.demo-select-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #717b8b;
  border-bottom: 1.5px solid #717b8b;
  transform: rotate(45deg) translateY(-2px);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.demo-select.is-open .demo-select-chevron {
  transform: rotate(-135deg) translateY(2px);
}

.demo-select-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 14px 32px -14px rgba(26, 23, 21, 0.28);
  max-height: 220px;
  overflow-y: auto;
}

.demo-select-option {
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
}

.demo-select-option:hover {
  background: #ebeef4;
}

.demo-select-option[aria-selected="true"] {
  background: #e4e8ef;
  font-weight: 600;
}

.demo-select-option.is-placeholder {
  color: #5e6674;
  cursor: default;
}

.demo-select-option.is-placeholder:hover {
  background: transparent;
}

#book-demo .book-demo-form input:focus,
#book-demo .book-demo-form select:focus {
  outline: none;
  border-color: #acb7c9;
}

#book-demo .book-demo-form .btn-primary {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  background: var(--ink);
  box-shadow: none;
  transition: opacity 0.15s ease;
}

#book-demo .book-demo-form .btn-primary:hover:not(:disabled) {
  transform: none;
  filter: none;
  opacity: 0.88;
  box-shadow: none;
}

#book-demo .book-demo-form .btn-primary:disabled {
  background: #c4c9d2;
  border: none;
  opacity: 1;
}

#book-demo .book-demo-form .form-note {
  font-size: 12px;
  margin-top: 4px;
}

#book-demo .book-demo-form.submitted {
  gap: 0;
  padding: 28px;
}

#book-demo .book-demo-form input:read-only {
  background: #ebeef4;
  color: var(--ink);
  cursor: default;
}

.demo-select.is-locked .demo-select-trigger {
  background: #ebeef4;
  cursor: default;
  pointer-events: none;
}

.demo-select.is-locked .demo-select-chevron {
  opacity: 0.35;
}

#book-demo .waitlist-confirmation {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#book-demo .waitlist-confirmation-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

#book-demo .waitlist-confirmation-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--te-success-soft);
  border: 1px solid color-mix(in srgb, var(--te-success) 24%, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--te-success);
}

#book-demo .waitlist-confirmation-head-copy {
  min-width: 0;
  padding-top: 2px;
}

#book-demo .waitlist-confirmation-eyebrow {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--te-success);
}

#book-demo .waitlist-confirmation-title {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
}

#book-demo .waitlist-confirmation-panel {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--te-bg);
  margin-bottom: 16px;
}

#book-demo .waitlist-confirmation-row-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}

#book-demo .waitlist-confirmation-email {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
  line-height: 1.35;
}

#book-demo .waitlist-confirmation-note {
  margin: 13px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

#book-demo .waitlist-confirmation-facts {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

#book-demo .waitlist-confirmation-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}

#book-demo .waitlist-confirmation-fact-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--te-bg);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  flex-shrink: 0;
}

#book-demo .waitlist-confirmation-foot {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

#book-demo .waitlist-secondary-action {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

#book-demo .waitlist-secondary-action a {
  display: inline-block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

#book-demo .waitlist-secondary-action a:hover {
  color: var(--accent);
}

#book-demo .waitlist-next-step {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
}

.foot-premium {
  padding: 28px 0 32px;
  background: #edf0f6;
}

.foot-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.foot-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.foot-brand-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.foot-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.foot-brand-link:hover {
  opacity: 0.72;
}

.foot-brand-link .brand-mark {
  width: 22px;
  height: 22px;
}

.nav-premium .brand-word {
  font-size: 15px;
}

.foot-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-faint);
}

.foot-desc::before {
  content: "·";
  margin-right: 10px;
  color: #b8c0cc;
}

/* Narrow screens wrap the tagline under the brand, where the separator dot
   led the line on its own. The wrap point moves with the language, so the
   tagline gets its own line below 640px instead. */
@media (max-width: 640px) {
  .foot-desc {
    flex-basis: 100%;
  }

  .foot-desc::before {
    content: none;
  }
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-shrink: 0;
}

.foot-nav a {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.foot-nav a:hover {
  color: var(--ink);
}

.foot-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(184, 192, 204, 0.55);
  font-size: 12px;
  color: var(--ink-faint);
}

.foot-dot {
  color: #b8c0cc;
}

.foot-by a {
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.foot-by a:hover {
  color: var(--accent);
}

/* Auth modal — Honen-style sign up / log in */
body.auth-modal-open {
  overflow: hidden;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(13, 17, 25, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-overlay.hidden {
  display: none;
}

.auth-modal {
  position: relative;
  width: min(420px, 100%);
  padding: 32px 32px 28px;
  border-radius: 20px;
  border: 1px solid rgba(212, 217, 225, 0.95);
  background: #fffefb;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 28px 64px -36px rgba(12, 16, 22, 0.42);
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-close:hover {
  background: #e6eaf2;
  color: var(--ink);
}

.auth-step h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.auth-sub {
  margin: 0 0 22px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.auth-social {
  display: grid;
  gap: 10px;
}

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #d4d9e2;
  border-radius: 12px;
  background: #fffefb;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-social-btn:hover {
  border-color: #b8c0cc;
  background: #f2f5f9;
}

.auth-social-btn[data-configured="false"] {
  border-color: #d1d9e7;
  color: #575e6b;
}

.auth-social-btn svg {
  flex-shrink: 0;
}

.auth-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(45, 97, 181, 0.22);
  border-radius: 10px;
  background: rgba(45, 97, 181, 0.07);
  color: #234b8b;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d6dce6;
}

.auth-email-link {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #d4d9e2;
  border-radius: 12px;
  background: #fffefb;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-email-link:hover {
  border-color: #b8c0cc;
  background: #f2f5f9;
}

.auth-back {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.auth-back:hover {
  color: var(--ink);
}

.auth-email-form {
  display: grid;
  gap: 10px;
}

.auth-email-form label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.auth-email-form input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #dadee6;
  border-radius: 10px;
  background: #f5f6f9;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-email-form input:focus {
  outline: none;
  border-color: #b2bac7;
  background: #fffefb;
  box-shadow: 0 0 0 3px rgba(26, 23, 21, 0.06);
}

.auth-continue-btn {
  margin-top: 4px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: #f8f9fc;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.auth-continue-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.auth-continue-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.auth-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.auth-notice.is-info {
  background: rgba(53, 111, 205, 0.08);
  border: 1px solid rgba(53, 111, 205, 0.22);
  color: var(--ink);
}

.auth-notice.is-error {
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.2);
  color: #8f1d13;
}

.auth-notice.hidden {
  display: none;
}

.auth-switch {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.auth-switch-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

.auth-forgot-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

.auth-forgot-hint.hidden {
  display: none;
}

/* styles.css hides `.nav-links` below 880px for the old landing. The premium
   nav has its own small-screen styles in mobile.css and is the only way to sign
   in without scrolling to the footer, so it stays visible. */
@media (max-width: 880px) {
  .nav-links-premium {
    display: flex;
  }
}

/* Homepage insights: says the cards are examples and who sets the owner. */
.insights-proof-note {
  margin: 14px 0 0;
  max-width: 70ch;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.5;
}