/* ============================================================
   hero-panel.css   —   APPEND-ONLY
   ------------------------------------------------------------
   Drop these rules at the END of CSS/index.css. They introduce
   new class names (.hp-*, .blindspot-*) and do not alter any
   existing selectors.
   ============================================================ */

/* ─── Hero headline override for the solution-oriented framing ── */
.hero h1.hero-headline-solution {
  font-size: 60px;
  letter-spacing: -0.035em;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.hero h1.hero-headline-solution .gradient-text {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero h1.hero-headline-solution { font-size: 40px; }
  .hero h1.hero-headline-solution .gradient-text { white-space: normal; }
}

.hero-lead {
  font-size: 19px; line-height: 1.65;
  color: var(--text-70); max-width: 680px;
  margin: 0 auto 28px;
  font-weight: 400; letter-spacing: -0.01em;
  animation: fadeUp 0.7s ease-out 0.2s both;
}

/* ─── The hero panel (filter + map + tier chart + hospitals) ─── */
.hero-panel {
  position: relative;
  max-width: 1080px;
  margin: 36px auto 0;
  padding: 0 16px;
  z-index: 1;
  animation: fadeUp 0.8s ease-out 0.35s both;
}

.hp-screen {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.02),
    0 24px 80px rgba(124,58,237,0.10),
    0 0 0 1px rgba(124,58,237,0.04);
  padding: 18px;
  position: relative;
}

/* brief fade pulse when case swaps, so the swap is noticeable but not jarring */
.hp-screen.is-rotating {
  animation: hpPulse 0.55s ease-out;
}
@keyframes hpPulse {
  0%   { box-shadow: 0 4px 8px rgba(0,0,0,0.02), 0 24px 80px rgba(124,58,237,0.10), 0 0 0 1px rgba(124,58,237,0.04); }
  50%  { box-shadow: 0 4px 8px rgba(0,0,0,0.02), 0 24px 80px rgba(124,58,237,0.22), 0 0 0 1px rgba(124,58,237,0.18); }
  100% { box-shadow: 0 4px 8px rgba(0,0,0,0.02), 0 24px 80px rgba(124,58,237,0.10), 0 0 0 1px rgba(124,58,237,0.04); }
}

.hp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 14px;
  gap: 16px;
}
.hp-dots-window { display: flex; gap: 7px; }
.hp-dots-window span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--purple-300);
  opacity: 0.55;
}
.hp-case-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-45);
  letter-spacing: 0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* two-column grid: filters left, viz right */
.hp-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}
@media (max-width: 820px) {
  .hp-grid { grid-template-columns: 1fr; }
}

/* filter panel */
.hp-panel {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px;
}
.hp-filter + .hp-filter { margin-top: 12px; }
.hp-filter-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}
.hp-filter-value {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  transition: background 0.4s ease;
}

/* right-hand stack: map on top, two cards below */
.hp-viz-stack { display: flex; flex-direction: column; gap: 14px; }

.hp-map {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
#heroPanelMap {
  width: 100%;
  height: 280px;
  background: var(--bg-subtle);
}
/* Leaflet tooltip override to match the brand */
.hp-map-tooltip.leaflet-tooltip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(43,24,79,0.12);
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 500;
}
.hp-map-tooltip.leaflet-tooltip::before { display: none; }

.hp-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .hp-bottom-grid { grid-template-columns: 1fr; }
}

.hp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.hp-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.hp-card-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-45);
  letter-spacing: 0;
  margin-top: 2px;
  text-transform: none;
}

/* tier bars */
.hp-tier-row {
  display: grid;
  grid-template-columns: 54px 1fr 52px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.hp-tier-row:first-of-type { margin-top: 0; }
.hp-tier-label {
  font-size: 12px;
  color: var(--text-70);
  font-weight: 500;
}
.hp-tier-track {
  height: 10px;
  background: #F3F0F7;
  border-radius: 5px;
  overflow: hidden;
}
.hp-tier-fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  /* Tier 1 — magenta, matches the hot-pink map markers */
  background: linear-gradient(90deg, #E5308A, #F06FB2);
  transition: width 0.9s cubic-bezier(.3,.8,.3,1);
}
.hp-tier-fill.alt-2 {
  /* Tier 2 — brand purple */
  background: linear-gradient(90deg, var(--purple-600), var(--purple-400));
}
.hp-tier-fill.alt-3 {
  /* Tier 3 — slate grey, quiet */
  background: linear-gradient(90deg, #94A3B8, #CBD5E1);
  opacity: 0.85;
}
.hp-tier-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* hospital list */
.hp-top-list {
  list-style: none; padding: 0; margin: 0;
}
.hp-top-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.hp-top-list li:last-child { border-bottom: none; }
.hp-hosp-name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-hosp-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--purple-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* rotation dots */
.hp-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.hp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: all 0.25s;
}
.hp-dot:hover { background: var(--purple-300); }
.hp-dot.is-active {
  background: var(--purple-600);
  width: 22px;
  border-radius: 4px;
}

.hp-caption {
  text-align: center;
  font-size: 13px;
  color: var(--text-70);
  margin-top: 12px;
  line-height: 1.5;
}
.hp-caption strong { color: var(--purple-600); font-weight: 600; }


/* ═══════════ BLIND SPOT SECTION ═══════════ */
.blindspot {
  position: relative;
  background: linear-gradient(135deg, #1F1435 0%, #2D1650 55%, #3C1E6B 100%);
  color: var(--white);
  padding: 96px 48px;
  overflow: hidden;
}
.blindspot::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(124,58,237,0.25), transparent 45%),
                    radial-gradient(circle at 80% 70%, rgba(167,139,250,0.18), transparent 45%);
  pointer-events: none;
}
.blindspot-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .blindspot { padding: 72px 24px; }
  .blindspot-inner { grid-template-columns: 1fr; gap: 40px; }
}

.blindspot-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-300);
  margin-bottom: 18px;
}
.blindspot-tag::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--purple-400);
  border-radius: 2px;
}
.blindspot h2 {
  font-family: var(--font-headline);
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .blindspot h2 { font-size: 32px; }
}
.blindspot-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--white-60);
  margin-bottom: 22px;
  max-width: 560px;
}
.blindspot-punch {
  font-size: 17px;
  line-height: 1.6;
  color: var(--white);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 560px;
}
.blindspot-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.blindspot-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 24px;
  backdrop-filter: blur(8px);
  transition: border-color 0.25s, transform 0.25s;
}
.blindspot-stat:hover {
  border-color: rgba(196,181,253,0.35);
  transform: translateY(-1px);
}
.blindspot-stat-num {
  font-family: var(--font-headline);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #C4B5FD, #E9D5FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
  display: block;
}
.blindspot-stat-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.5;
}

/* ═══════════ HERO PANEL — v2 additions ═══════════ */

/* Overline sitting above the panel, anchoring the story */
.hp-overline {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-45);
  max-width: 1080px;
  margin: 28px auto 0;
  padding: 0 16px;
  animation: fadeUp 0.7s ease-out 0.3s both;
}
.hp-overline::before,
.hp-overline::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--border);
  vertical-align: middle;
  margin: 0 10px 2px;
}

/* Insight overlay — lands with Tier 1, disappears as 2 and 3 reveal */
.hp-map { position: relative; }
.hp-insight {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: 260px;
  padding: 12px 14px 11px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(229, 48, 138, 0.35);
  border-left: 3px solid #E5308A;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(43, 24, 79, 0.14);
  backdrop-filter: blur(6px);
  z-index: 500;            /* above Leaflet tiles */
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
}
.hp-insight.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hp-insight.is-fading {
  opacity: 0.35;
}
.hp-insight-num {
  display: block;
  font-family: var(--font-headline, inherit);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #E5308A;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.hp-insight-text {
  display: block;
  color: var(--text-70);
  font-weight: 500;
}
.hp-insight-text strong {
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 520px) {
  .hp-insight { left: 8px; bottom: 8px; max-width: 200px; padding: 10px 12px; }
  .hp-insight-num { font-size: 22px; }
  .hp-insight-text { font-size: 11.5px; }
}

/* Navigation: arrows + pills (replaces dots) */
.hp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: nowrap;
}
.hp-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 50%;
  color: var(--text-70);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
.hp-arrow:hover {
  border-color: var(--purple-400);
  color: var(--purple-600);
  background: var(--bg-subtle);
}
.hp-arrow:focus-visible {
  outline: 2px solid var(--purple-400);
  outline-offset: 2px;
}
.hp-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
  padding: 2px 0;
  scroll-behavior: smooth;
}
.hp-pills::-webkit-scrollbar { display: none; }
.hp-pill {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-70);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}
.hp-pill:hover {
  border-color: var(--purple-300);
  color: var(--purple-600);
  background: var(--bg-subtle);
}
.hp-pill.is-active {
  background: var(--purple-600);
  border-color: var(--purple-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.hp-pill.is-active:hover {
  background: var(--purple-600);
  color: #fff;
}
@media (max-width: 640px) {
  .hp-pill { font-size: 11px; padding: 6px 11px; }
  .hp-arrow { width: 28px; height: 28px; }
}

/* ═══════════ PROOF STRIP — v2 tweak ═══════════ */

/* Small trailing "+8" next to the 15 European countries, so the combined
   Europe+Japan footprint reads as one fact rather than two competing stats. */
.proof-num-sup {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--purple-400, #a78bfa);
  letter-spacing: -0.02em;
  margin-left: 2px;
  vertical-align: 0.35em;
}

/* ═══════════ BLIND SPOT — single-stat treatment ═══════════ */

/* When there's only one stat card (promoted from a trio), give it room
   to breathe and scale the number up so it can carry the section on its own. */
.blindspot-stat-hero {
  padding: 36px 36px 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
}
.blindspot-stat-hero .blindspot-stat-num {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -0.04em;
}
.blindspot-stat-hero .blindspot-stat-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--white-60);
}
@media (max-width: 900px) {
  .blindspot-stat-hero { padding: 28px 24px 24px; }
  .blindspot-stat-hero .blindspot-stat-num { font-size: 72px; }
  .blindspot-stat-hero .blindspot-stat-desc { font-size: 15px; }
}
@media (max-width: 480px) {
  .blindspot-stat-hero .blindspot-stat-num { font-size: 60px; }
}


/* ═══════════ ASK PX MODE ═══════════
   When .hp-screen carries .is-askpx, the map stack hides and the
   conversation stack shows. Left panel swaps too. */

/* Default: hide Ask PX pieces, show map pieces */
.hp-panel-askpx,
.hp-viz-askpx { display: none; }

/* When in Ask PX mode, invert */
.hp-screen.is-askpx .hp-panel-map,
.hp-screen.is-askpx .hp-viz-map { display: none; }
.hp-screen.is-askpx .hp-panel-askpx { display: block; }
.hp-screen.is-askpx .hp-viz-askpx { display: flex; }

/* Ask PX branding on left panel */
.hp-askpx-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.hp-askpx-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-400));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.hp-askpx-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Conversation container — fills the whole right column for Ask PX cases.
   Uses the same rounded card shell as the map card so the swap feels like
   "different content, same product" rather than "different product". */
.hp-viz-askpx {
  flex-direction: column;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  min-height: 380px;
}
.hp-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Shared message row layout */
.hp-chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hp-chat-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hp-chat-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hp-chat-avatar-user {
  background: #E8EAF0;
  color: var(--text-70);
}
.hp-chat-avatar-ai {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-400));
  color: #fff;
}
.hp-chat-avatar-ai .hp-chat-avatar-mark {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.hp-chat-bubble {
  flex: 1;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 10px;
  letter-spacing: -0.005em;
}
.hp-chat-bubble-user {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
}
.hp-chat-bubble-ai {
  background: linear-gradient(180deg, #FAF7FF, #F3EDFC);
  border: 1px solid rgba(124, 58, 237, 0.15);
  color: var(--text);
}

/* Typing indicator — three bouncing dots */
.hp-chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 2px;
}
.hp-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-400);
  opacity: 0.5;
  animation: hpTypingBounce 1.2s infinite ease-in-out both;
}
.hp-chat-typing span:nth-child(1) { animation-delay: -0.24s; }
.hp-chat-typing span:nth-child(2) { animation-delay: -0.12s; }
@keyframes hpTypingBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* Answer reveal — hidden until Act 2, then fades the block in */
.hp-chat-answer {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hp-chat-answer.is-visible {
  display: block;
  opacity: 1;
}
.hp-chat-answer-lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

/* Big-stat callout inside the AI answer — lands with Act 3 */
.hp-chat-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0 8px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-left: 3px solid var(--purple-600);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hp-chat-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hp-chat-stat-num {
  font-family: var(--font-headline, inherit);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--purple-600);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hp-chat-stat-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-70);
  font-weight: 500;
}
.hp-chat-sources {
  margin: 0;
  font-size: 11px;
  color: var(--text-45);
  font-style: italic;
  letter-spacing: 0;
}

/* Mobile: tighten Ask PX spacing */
@media (max-width: 640px) {
  .hp-viz-askpx { padding: 14px; min-height: 320px; }
  .hp-chat-stat-num { font-size: 22px; }
  .hp-chat-bubble { font-size: 12.5px; }
}