/* 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: var(--ink);
}

@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: 500px;
  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.12fr 92px 1fr;
  gap: 14px;
  height: 368px;
  align-items: stretch;
}

/* --- LEFT: voices column (5 grouped WhatsApp bubbles, all readable) --- */
.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;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.tef-voice-list li {
  position: relative;
  background: #e7f7d9;                  /* WhatsApp received-bubble tint */
  border: 1px solid #cce6d0;
  border-radius: 10px 10px 10px 3px;
  padding: 7px 22px 7px 10px;
  font-size: 11.5px;
  line-height: 1.32;
  color: var(--ink);
  box-shadow: 0 3px 8px -6px rgba(26, 23, 21, 0.25);
  opacity: 0.62;
  white-space: normal;
  animation: tef-voice-focus 9s ease-in-out infinite;
}
.tef-voice-list li.g1 { animation-delay: 0s; }
.tef-voice-list li.g2 { animation-delay: 3s; }
.tef-voice-list li.g3 { animation-delay: 6s; }

@keyframes tef-voice-focus {
  0%, 1% {
    opacity: 0.52;
    transform: translateX(0);
    border-color: #cce6d0;
    box-shadow: 0 3px 8px -6px rgba(26, 23, 21, 0.2);
  }
  4%, 30% {
    opacity: 1;
    transform: translateX(3px);
    border-color: #2f6fed;
    background: #eefbe3;
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.18), 0 8px 18px -10px rgba(47, 111, 237, 0.38);
  }
  33.33%, 100% {
    opacity: 0.52;
    transform: translateX(0);
    border-color: #cce6d0;
    box-shadow: 0 3px 8px -6px rgba(26, 23, 21, 0.2);
  }
}

/* Right-edge connector node showing the signal leaving the bubble */
.tef-voice-list li::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9db7ea;
  border: 1.5px solid #ffffff;
  animation: tef-node-pulse 9s ease-in-out infinite;
}
.tef-voice-list li.g1::before { animation-delay: 0s; }
.tef-voice-list li.g2::before { animation-delay: 3s; }
.tef-voice-list li.g3::before { animation-delay: 6s; }

@keyframes tef-node-pulse {
  0%, 1%, 33.33%, 100% { background: #b7c6de; transform: translateY(-50%) scale(0.85); box-shadow: none; }
  4%, 30% { background: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.24); transform: translateY(-50%) scale(1.2); }
}

.tef-voice-list li .tef-voice-who {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #1f7a4d;                       /* WhatsApp-style sender-name green */
  margin-bottom: 1px;
  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: 7px;
  bottom: 4px;
  font-size: 8.5px;
  color: #34a3df;                       /* WhatsApp blue ticks */
  letter-spacing: -2px;
  font-family: ui-monospace, monospace;
}

/* --- MIDDLE: synthesis engine + converging/diverging SVG flow --- */
.tef-engine {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 22px;                    /* align with column body below labels */
}
.tef-flow-svg {
  position: absolute;
  top: 22px;
  bottom: 0;
  left: -14px;
  right: -14px;
  width: calc(100% + 28px);
  height: calc(100% - 22px);
  pointer-events: none;
  overflow: visible;
}
.tef-track {
  fill: none;
  stroke: rgba(47, 111, 237, 0.2);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.tef-signal {
  fill: none;
  stroke: #2f6fed;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 5;
  stroke-dashoffset: 0;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
.tef-signal.in {
  animation: tef-signal-in 9s linear infinite;
}
.tef-signal.out {
  animation: tef-signal-out 9s linear infinite;
}
.tef-signal.g1 { animation-delay: 0s; }
.tef-signal.g2 { animation-delay: 3s; }
.tef-signal.g3 { animation-delay: 6s; }

@keyframes tef-signal-in {
  0%, 1%     { opacity: 0; stroke-dashoffset: 39; }
  4%, 30%    { opacity: 1; stroke-dashoffset: 0; }
  33.33%, 100% { opacity: 0; stroke-dashoffset: -13; }
}
@keyframes tef-signal-out {
  0%, 3%     { opacity: 0; stroke-dashoffset: 39; }
  6%, 31%    { opacity: 1; stroke-dashoffset: 0; }
  33.33%, 100% { opacity: 0; stroke-dashoffset: -13; }
}

.tef-engine-orb {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tef-engine-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(47, 111, 237, 0.3);
}
.tef-engine-ring.r1 {
  width: 68px;
  height: 68px;
  margin-top: -34px;
  margin-left: -34px;
  border: 1px dashed rgba(47, 111, 237, 0.45);
  animation: tef-spin 16s linear infinite;
}
.tef-engine-ring.r2 {
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border: 1px solid rgba(47, 111, 237, 0.6);
  animation: tef-spin 10s linear infinite reverse;
}
@keyframes tef-spin {
  to { transform: rotate(360deg); }
}
.tef-engine-core {
  position: relative;
  width: 34px;
  height: 34px;
  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.16),
    0 0 22px rgba(47, 111, 237, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tef-core-pulse 3s ease-in-out infinite;
}
@keyframes tef-core-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(47,111,237,0.14), 0 0 16px rgba(47,111,237,0.32); transform: scale(1); }
  45%      { box-shadow: 0 0 0 8px rgba(47,111,237,0.12), 0 0 28px rgba(47,111,237,0.62); transform: scale(1.07); }
}
.tef-engine-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
}
.tef-engine-label {
  position: absolute;
  top: calc(50% + 49px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(238, 242, 249, 0.92);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* --- RIGHT: insights column (all 3 stacked visibly, active card illuminates in sync) --- */
.tef-insights {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tef-insights-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.tef-insight-card {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-left: 3px solid rgba(47, 111, 237, 0.45);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.36;
  color: var(--ink-soft);
  box-shadow: 0 6px 14px -12px rgba(26, 23, 21, 0.22);
  opacity: 0.56;
  animation: tef-insight-focus 9s ease-in-out infinite;
}
.tef-insight-card::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b7c6de;
  border: 1.5px solid #ffffff;
  animation: tef-node-pulse 9s ease-in-out infinite;
}
.tef-insight-card.i1::before { animation-delay: 0s; }
.tef-insight-card.i2::before { animation-delay: 3s; }
.tef-insight-card.i3::before { animation-delay: 6s; }
.tef-insight-card .tef-insight-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 3px;
}
.tef-insight-card strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 12.5px;
  margin-bottom: 2px;
}
.tef-insight-card span {
  font-size: 11px;
  color: var(--ink-faint);
}
.tef-insight-card.i1 { animation-delay: 0s; }
.tef-insight-card.i2 { animation-delay: 3s; }
.tef-insight-card.i3 { animation-delay: 6s; }

@keyframes tef-insight-focus {
  0%, 3% {
    opacity: 0.54;
    transform: translateX(0);
    border-color: rgba(47, 111, 237, 0.18);
    border-left-color: rgba(47, 111, 237, 0.42);
    box-shadow: 0 6px 14px -12px rgba(26, 23, 21, 0.22);
  }
  6%, 31% {
    opacity: 1;
    transform: translateX(-2px);
    background: #ffffff;
    border-color: #2f6fed;
    border-left-color: #2f6fed;
    box-shadow:
      0 0 0 2px rgba(47, 111, 237, 0.18),
      0 14px 26px -14px rgba(47, 111, 237, 0.45);
  }
  33.33%, 100% {
    opacity: 0.54;
    transform: translateX(0);
    border-color: rgba(47, 111, 237, 0.18);
    border-left-color: rgba(47, 111, 237, 0.42);
    box-shadow: 0 6px 14px -12px rgba(26, 23, 21, 0.22);
  }
}

@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: auto;
    flex: none;
    gap: 8px;
  }
  .tef-voice-list li {
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .tef-voice-list li::before,
  .tef-insight-card::before {
    display: none;
  }
  .tef-insights {
    height: auto;
  }
  .tef-insights-list {
    gap: 8px;
  }
  .tef-insight-card {
    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: 6px 0;
  }
  .tef-flow-svg,
  .tef-engine-ring {
    display: none;
  }
  .tef-engine-orb {
    width: 24px;
    height: 24px;
  }
  .tef-engine-core { width: 22px; height: 22px; }
  .tef-engine-label {
    margin-top: 0;
    align-self: center;
    margin-left: 0;
    position: static;
    z-index: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tef-voice-list li,
  .tef-voice-list li::before,
  .tef-insight-card,
  .tef-engine-core,
  .tef-engine-ring,
  .tef-stage-head-dot,
  .tef-signal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tef-signal { 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,
.demo-select-option.is-active {
  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);
}

.foot-legal-link {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.foot-legal-link: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;
}

/* Homepage 2026-10-12: the no-app answer sits under the hero text. */
.hero-copy-premium .hero-assurance {
  display: flex;
  align-items: center;
  gap: 8px;
  /* .hero-sub keeps its 28px bottom margin for pages without this line. */
  margin: -12px 0 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #10151e);
}
.hero-copy-premium .hero-assurance::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d55;
}

/* How it works: three steps beside the demo. */
.flow-steps {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  max-width: 44ch;
}
.flow-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.flow-step-index {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 24px;
  color: #2f6fed;
}
.flow-step-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted, #52627a);
}
.flow-step-text strong {
  display: block;
  color: var(--ink, #10151e);
}

/* Insight cards: an Example badge on each, the note above the grid. */
.insight-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.insight-proof-head .insight-tag {
  flex: 1 1 auto;
  min-width: 0;
}
.insight-example-badge {
  flex: none;
  padding: 3px 8px;
  border: 1px solid #c9d3e2;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #52627a);
}
.insights-showcase .insights-proof-note {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--ink-muted, #52627a);
}

/* Trust and control. */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.trust-card {
  padding: 22px;
  border: 1px solid #d5deea;
  border-radius: 14px;
  background: #fff;
}
.trust-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
}
.trust-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted, #52627a);
}
.trust-link {
  margin: 18px 0 0;
  font-size: 14px;
}
.trust-link a {
  color: var(--ink, #10151e);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1100px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}
/* The header button now carries the hero's wording; keep it on one line on phones. */
@media (max-width: 640px) {
  .nav-premium .nav-cta {
    white-space: nowrap;
  }
  .nav-links-premium {
    gap: 10px;
  }
}

/* Pilot section: its one action leads to the demo form. */
.pilot-copy .pilot-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 12px 20px;
  border: 1px solid #ffffff;
  border-radius: 12px;
  background: #ffffff;
  color: #0e1420;
  font-weight: 600;
  text-decoration: none;
}
.pilot-copy .pilot-cta:hover {
  background: #e6ecf7;
  border-color: #e6ecf7;
  color: #0e1420;
}

/* Customer row under the hero (2026-10-13): reads as a logo strip, not a line
   of text. The label sits above; each customer is a wordmark, or its logo file
   once we have one, separated by hairlines. */
.hero-copy-premium .hero-clients {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 21, 30, 0.1);
}
.hero-copy-premium .hero-clients ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
}
.hero-copy-premium .hero-clients li {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 22px;
  border-left: 1px solid rgba(16, 21, 30, 0.14);
}
.hero-copy-premium .hero-clients li:first-child {
  padding-left: 0;
  border-left: 0;
}
.hero-client-wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2a3345;
}
.hero-client-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 140px;
  filter: grayscale(1);
  opacity: 0.8;
}
@media (max-width: 640px) {
  .hero-copy-premium .hero-clients li {
    padding: 0 14px;
  }
  .hero-client-wordmark {
    font-size: 16px;
  }
}

/* Customer logos (2026-10-13): each file is shown as supplied, in a tile of
   one height with rounded corners, so a logo that comes inside a coloured box
   and one on white sit together without altering either. */
.hero-copy-premium .hero-clients li {
  padding: 0 10px 0 0;
  border-left: 0;
}
.hero-copy-premium .hero-clients ul {
  gap: 10px 4px;
}
.hero-client-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 160px;
  border: 1px solid rgba(16, 21, 30, 0.12);
  border-radius: 8px;
  background: #fff;
  filter: none;
  opacity: 1;
  object-fit: contain;
}
@media (max-width: 640px) {
  .hero-client-logo {
    height: 38px;
  }
}

/* Homepage pricing (AUD-30, 2026-10-16): a price line under the hero buttons
   and four plan cards before the pilot. Cards follow .trust-card. */
.hero-copy-premium .hero-price-line {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.hero-copy-premium .hero-price-line a {
  color: var(--ink-muted, #52627a);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(82, 98, 122, 0.4);
  text-underline-offset: 3px;
}
.hero-copy-premium .hero-price-line a:hover {
  color: var(--ink, #10151e);
}
#pricing .section-lead {
  margin-bottom: 32px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid #d5deea;
  border-radius: 14px;
  background: #fff;
}
.pricing-card--featured {
  border-color: var(--ink, #10151e);
  box-shadow: 0 0 0 1px var(--ink, #10151e);
}
.pricing-eyebrow {
  min-height: 16px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #52627a);
}
.pricing-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}
.pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 10px 0;
}
.pricing-price strong {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #10151e);
}
.pricing-price span {
  font-size: 13px;
  color: var(--ink-muted, #52627a);
}
.pricing-body {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted, #52627a);
}
.pricing-bullets {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #10151e);
}
.pricing-bullets li {
  position: relative;
  padding-left: 18px;
}
.pricing-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f9d55;
}
.pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: auto;
  padding: 0 16px;
  border: 1px solid var(--ink, #10151e);
  border-radius: 12px;
  background: var(--ink, #10151e);
  color: var(--paper, #fff);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.pricing-cta:hover {
  background: #1a222f;
  color: var(--paper, #fff);
}
.pricing-cta--demo {
  background: #fff;
  color: var(--ink, #10151e);
}
.pricing-cta--demo:hover {
  background: #f7f8fb;
  color: var(--ink, #10151e);
}
@media (max-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The header button never breaks over lines. Up to 1024px the tagline goes
   (mobile.css already drops it at 768px): the French one is 260px wide and
   squeezed the button onto two or three lines between 770 and 1000px. */
.nav-premium .nav-cta {
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .nav-premium .brand-tagline {
    display: none;
  }
}
@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  /* Stacked cards have nothing to line up with. */
  .pricing-eyebrow--empty {
    display: none;
  }
  /* mobile.css keeps one header row only up to 430px; between 431 and 640px
     language + Pricing + Book a demo + Sign in + the CTA overflowed (the French
     CTA was cut off at 480px). Same rule, wider range: these stay reachable in
     the page and the footer. */
  .nav-links-premium .marketing-lang-select,
  .nav-links-premium a.nav-text-link[href^="#"] {
    display: none;
  }
}


/* Customer row, tidied (2026-10-16): the three logos arrived as a black box, a blue
   box and a logo on white, each a different size, so the row looked uneven. Each
   now sits in an identical white card. Files stay as supplied (never recoloured,
   cropped or redrawn): boxed logos keep a margin inside the card; a logo on white
   fills its card so its white margin disappears into the card. */
.hero-copy-premium .hero-clients-label {
  font-size: 11px;
  letter-spacing: 0.12em;
}
.hero-copy-premium .hero-clients ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 148px));
  gap: 12px;
}
.hero-copy-premium .hero-clients li.hero-client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(16, 21, 30, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 21, 30, 0.04), 0 6px 16px rgba(16, 21, 30, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-copy-premium .hero-clients li.hero-client-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 21, 30, 0.06), 0 10px 22px rgba(16, 21, 30, 0.08);
}
.hero-client-card .hero-client-logo {
  height: auto;
  max-height: 40px;
  max-width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.hero-client-card--onWhite {
  padding: 0;
  overflow: hidden;
}
.hero-client-card--onWhite .hero-client-logo {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  /* The file's own white margin is about a third of its width; enlarging it inside
     the card hides only that margin (the card is white too). The logo stays whole. */
  transform: scale(1.4);
}
@media (max-width: 640px) {
  .hero-copy-premium .hero-clients ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .hero-copy-premium .hero-clients li.hero-client-card {
    height: 54px;
    padding: 8px;
  }
  .hero-client-card .hero-client-logo {
    max-height: 32px;
  }
}