/* ═══════════════════════════════════════════════════
   Homepage V5: Marketing Command Center (Canonical)
   Output of 2026-05-11 Ivo×Daniel 1:1
   Fireflies transcript: 01KRBWK9Y0BAB84CQXZ7VXMMX3
   ═══════════════════════════════════════════════════ */

:root {
  /* Surfaces: dirty-white cream base, white cards, faint lavender for depth.
     Palette derived from improvado_redesign_v15.html (Mikhail Molchanov, Friday call w/ Nick Snopov).
     Variable names preserved from dark-mode V3 so every `var(--*)` ref cascades. */
  --bg-void: #fbfaf8;            /* cream: THE dirty white */
  --bg-primary: #fbfaf8;
  --bg-elevated: #ffffff;         /* white card on cream */
  --bg-card: #ffffff;
  --bg-card-hover: #f8f5f0;       /* barely-warmer hover */
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-lavender: #f3f0fa;         /* v15's secondary surface: used in body gradient */

  /* Accents: v15 restraint: one violet, one emerald, one blue, one amber.
     Pinks intentionally dropped (v15 has none); --accent-pink rebased to violet so
     legacy refs collapse into the primary brand color rather than break. */
  --accent-purple: #6D28D9;       /* v15 violet-main */
  --accent-purple-hover: #6D28D9; /* v15 violet-hover */
  --accent-purple-light: #A78BFA; /* lighter violet for gradient highlights */
  --accent-purple-glow: transparent;  /* glow disabled globally 2026-05-12: Ivo ask: no purple glow in background anywhere */
  --accent-lavender: rgba(109, 40, 217, 0.25);     /* v15 lavender: used for tinted bg blocks */
  --accent-mint: #0F172A;         /* v15 emerald: positive signals */
  --accent-blue: #0F172A;         /* keep: works on light */
  --accent-pink: #6D28D9;         /* folded into violet (no pink in v15) */
  --accent-amber: #64748B;        /* slate-500: replaced amber 2026-05-13 (allowed-palette enforcement) */

  /* Improvado canonical brand pink: added 2026-05-12 for V3 navbar/logo theming.
     Distinct from --accent-pink (which was rebased to violet for v15 compatibility).
     --brand-pink     = saturated logo pink, used for letters, logo rect on hover, CTA solid.
     --brand-pink-soft = same hue, 40% alpha: dim variant used for hover bg pills.
     Alpha makes it surface-agnostic: muted plum-pink over the dark navbar bg, soft
     pink wash over a cream rest surface. Tweak the 0.4 alpha to taste: single point of control. */
  --brand-pink:        #6D28D9;                    /* canonical Improvado pink: logo, lit-state CTA */
  --brand-pink-soft:   rgba(109, 40, 217, 0.25);   /* dim variant for hover-pill bg fills */
  --brand-pink-light:  #A78BFA;                    /* solid lighter pink: Book a demo direct-hover; mirrors Sierra's bright→brighter green hover (2026-05-12) */
  /* Dim navbar pink (per-link hover, established 2026-05-12 in .hp-header).
     Used in selector progress rail for COMPLETED nodes: "I picked, but I'm
     not the current step anymore". One step softer than --brand-pink. */
  --brand-pink-dim:    #A78BFA;
  --brand-pink-glow:   rgba(109, 40, 217, 0.10);
  --brand-pink-shadow: rgba(109, 40, 217, 0.24);

  /* Navbar/dark-hover surface: Ivo ask 2026-05-12: "#222222, across the board".
     Replaces the previous rgba(15, 23, 42, 0.92) navy alpha. Solid (no transparency)
     so the previous backdrop-filter blur is no longer needed. Use this token any
     time a UI surface goes dark on hover (header bar, future dark-mode toggles, etc). */
  --surface-dark:    #222222;

  /* Text: navy primary, slate alphas for hierarchy. */
  --text-primary: #0f172a;        /* v15 navy */
  --text-secondary: rgba(15, 23, 42, 0.72);
  --text-tertiary: rgba(15, 23, 42, 0.55);
  --text-quaternary: rgba(15, 23, 42, 0.4);
  --text-ghost: rgba(15, 23, 42, 0.1);

  /* Borders: dark-on-light, intentionally faint on cream. */
  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-card: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --border-active: rgba(15, 23, 42, 0.55);

  /* Live improvado.io uses two tokens: 1280 for content, 1440 for header.
     V3 carries both so the header can be wider than sections (mirrors live). */
  --container-max: 1440px;          /* sections: 1440 outer, 1392 inner @ 24px pad */
  --container-wide: 1440px;         /* header: kept as a separate token for future divergence */
  --section-py: clamp(36px, 4vw, 64px);
  /* Canonical title→content gap. Applied uniformly to every section header so
     the rhythm reads the same in every section. */
  --title-mb: clamp(24px, 2.4vw, 36px);

  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-large: 22px;

  --t-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-void);
  min-height: 100vh;
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }

.hp-skip-link {
  position: absolute; left: -9999px;
  background: var(--brand-pink); color: white;
  padding: 8px 16px; z-index: 9999;
}
.hp-skip-link:focus { left: 16px; top: 16px; }

/* .hp-scroll-progress: top-of-viewport scroll bar removed 2026-05-12 (Ivo ask). */

.hp-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════
   HEADER: verbatim port from homepage-v2 (production)
   ═══════════════════════════════════════════ */
.hp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 0;
  transition: all 0.3s ease;
  background: transparent;
}
.hp-header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  padding: 12px 0;
  /* border-bottom removed 2026-05-12: was flashing as a thin dark line on hover/scroll-in */
}
/* Hide-on-scroll-down / show-on-scroll-up (Ivo ask 2026-05-12).
   Toggled by attachScrollProgress() in scripts.js when scroll direction flips.
   The .hp-header `transition: all 0.3s ease` already covers the transform animation. */
.hp-header.hp-header--hidden { transform: translateY(-100%); }
.hp-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 24px;
}
.hp-logo { display: flex; align-items: center; text-decoration: none; color: var(--text-primary); flex-shrink: 0; overflow: visible; }
.hp-logo svg { display: block; overflow: visible; }
/* Logo badge stays canonical Improvado pink in every state (2026-05-14: Ivo ask).
   Earlier Sierra-style "navy at rest → brand on hover" toggle removed — Ivo's
   directive is that the Improvado logo is THE one exception to the all-violet
   palette swap and must read as pink whether the navbar is hovered, scrolled,
   or idle. The inline `fill="#FF3186"` on the <rect> is the sole source of
   truth; no CSS override touches it. */

/* ─── Sierra-style navbar mouseover (2026-05-12: Ivo ask) ───
   Rest: cream bg, navy text, monochrome black logo badge.
   Hover anywhere in .hp-header: bg lights up to near-black, text inverts to white,
   the wordmark turns white via .hp-logo { color: white }, the badge transitions to
   #6D28D9 brand pink, and the "p" badge-overlap path transitions from explicit white
   to currentColor (= white on hover) so the p reads seamlessly across the pink badge.
   Per-item hover: the hovered nav link goes light Improvado pink (#A78BFA: lighter
   than the #6D28D9 logo per spec). Dropdowns open as usual on hp-nav-item:hover. */
/* Navbar lit-up state (2026-05-12: Ivo ask). Was solid #222222 dark; now mirrors
   .hp-header.scrolled style: glass white + blur + faint navy border. Since the bg
   is light, the base navy text stays readable on hover; no text/logo color inversion
   needed (the previous white-text-on-dark rules are removed). */
.hp-header:hover {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  /* border-bottom removed 2026-05-12: was flashing as a thin dark line on hover/scroll-in */
}
/* Per-item hover (all nav buttons EXCEPT Book a demo): pink pill in the same
   shape as the Book a demo button: bg = #A78BFA (the lighter pink we previously
   used on letters), text = #6D28D9 (canonical Improvado pink, matches the logo).
   2026-05-12: Ivo ask: color swap, lighter pink to bg, full pink to letters,
   border-radius 999px so the hover fill is a pill same as Book a demo. */
.hp-header:hover .hp-header-link:hover,
.hp-header:hover .hp-header-login:hover,
.hp-header:hover .hp-nav-item:hover .hp-nav-trigger {
  color: var(--brand-pink);
  background: var(--brand-pink-soft);
  border-radius: 999px;
}

/* 2026-05-14: the white-clipped "p" overlay produced a visible seam where
   the white-on-badge portion met the dark wordmark outside the badge. Per
   Ivo: "p" in "provado" must always be fully black. Overlay now matches
   currentColor at rest and on hover — the second SVG path becomes a no-op
   (same fill as the path beneath it) and the seam disappears. */
.hp-logo-p-overlap {
  fill: currentColor;
  transition: fill 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-header:hover .hp-logo-p-overlap,
.hp-header.scrolled .hp-logo-p-overlap {
  fill: currentColor;
}

/* <nav.hp-header-cta> is layout-invisible: its children (.hp-header-cta-group + .hp-header-cta-actions)
   participate directly in .hp-header-inner's 3-column grid for Sierra-style centered middle nav. */
.hp-header-cta { display: contents; }
.hp-header-cta-group   { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hp-header-cta-actions { display: flex; align-items: center; gap: 12px; }
.hp-header-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.hp-header-link:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.05);
}
.hp-header-login {
  color: rgba(15, 23, 42, 0.4);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.hp-header-login:hover {
  color: rgba(15, 23, 42, 0.7);
  background: rgba(15, 23, 42, 0.03);
}
.hp-nav-item { position: relative; }
.hp-nav-trigger {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
}
.hp-nav-chevron { display: none; }  /* Ivo ask 2026-05-12: no dropdown chevrons in V3 */
.hp-nav-item--open .hp-nav-chevron { transform: rotate(180deg); }
@media (hover: hover) {
  .hp-nav-item:hover .hp-nav-chevron { transform: rotate(180deg); }
}
.hp-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: top center;
  min-width: 320px; max-width: calc(100vw - 32px);
  padding: 8px;
  /* iter 11 Ivo: dropdowns OPAQUE, no see-through. */
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s;
  z-index: 110;
}
.hp-nav-dropdown::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.hp-nav-item--open .hp-nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
@media (hover: hover) {
  .hp-nav-item:hover .hp-nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.hp-nav-dropdown--wide {
  min-width: 420px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 12px;
}
.hp-nav-dropdown--solutions {
  min-width: 680px;
  grid-template-columns: 1fr 1fr 1fr;
}
.hp-nav-dropdown-col { display: flex; flex-direction: column; }
.hp-nav-dropdown--wide .hp-nav-dropdown-col + .hp-nav-dropdown-col {
  padding-left: 8px;   /* keep spacing; gray divider line removed 2026-05-12 per Ivo */
}
.hp-nav-dropdown-heading {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.35);
  padding: 8px 14px 4px;
}
/* .hp-nav-dropdown-heading::before: purple dot removed 2026-05-12 (Ivo ask: no dots before "By Role" / "Platform" / etc.) */
.hp-nav-dropdown-heading--spaced { margin-top: 12px; }
.hp-nav-dropdown-col--continuation { padding-top: 25px; }
.hp-nav-dropdown-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.hp-nav-dropdown-link:hover { background: rgba(15, 23, 42, 0.05); }
.hp-nav-dropdown-title {
  font-size: 14px; font-weight: 500;
  color: rgba(15, 23, 42, 0.85);
  white-space: nowrap;
}
/* .hp-nav-dropdown-link:hover .hp-nav-dropdown-title: purple title-color shift removed 2026-05-12 (Ivo ask: only the dim-gray bg, no other hover effect) */
.hp-nav-dropdown-desc {
  font-size: 12px; color: rgba(15, 23, 42, 0.4);
  line-height: 1.4; white-space: nowrap;
}
/* .hp-btn: header CTA button.
   Sierra-style pill (2026-05-12: Ivo ask): glassy translucent at rest on the cream
   surface so it shows but stays dimmed; on .hp-header:hover it lights up to solid
   #6D28D9 brand pink to match the logo badge. Item-local :hover adds a micro-lift. */
.hp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;          /* pill: was 12px in the live-parity port; Sierra uses pill */
  font-weight: 600; font-size: 15px;
  border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s ease;
}
.hp-btn--primary {
  background: rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.hp-header:hover .hp-btn--primary,
.hp-header.scrolled .hp-btn--primary {
  background: #5B21B6;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(91, 33, 182, 0.28);
}
/* Book a demo direct-hover: solid lighter pink, white text retained (mirrors Sierra's
   forest-green → spring-green hover pattern: bg gets brighter, text stays white).
   Specificity (0040) beats the 0030 lit-state rules so this overrides the solid
   var(--brand-pink) bg. 2026-05-12 Ivo ask: earlier rgba-soft fill was too light. */
.hp-header:hover .hp-btn--primary:hover,
.hp-header.scrolled .hp-btn--primary:hover {
  background: #6D28D9;
  color: #fff;
}
.hp-btn--nav { padding: 10px 24px; font-size: 13px; }
.hp-nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 8px;
  background: none; border: none; cursor: pointer;
  z-index: 160;
}
.hp-nav-hamburger span {
  display: block; width: 20px; height: 2px;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 1px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
.hp-nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-nav-hamburger.open span:nth-child(2) { opacity: 0; }
.hp-nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hp-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.18);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 140;
}
.hp-nav-overlay.open { opacity: 1; visibility: visible; }
.hp-nav-mobile-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border-subtle);
  padding: 88px 24px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 150;
}
.hp-nav-mobile-panel.open { transform: translateX(0); }
.hp-nav-mobile-section { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.hp-nav-mobile-heading {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 4px;
}
.hp-nav-mobile-subheading {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-quaternary);
  padding: 14px 4px 4px;
}
.hp-nav-mobile-link {
  display: block;
  padding: 8px 4px;
  font-size: 15px;
  color: var(--text-secondary);
  text-decoration: none;
}
.hp-nav-mobile-link:hover { color: var(--text-primary); }
.hp-nav-mobile-link--top { padding: 14px 4px; border-bottom: 1px solid var(--border-subtle); font-weight: 600; }
.hp-nav-mobile-link--login { color: var(--text-tertiary); font-size: 14px; }
.hp-nav-mobile-footer { padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.hp-nav-mobile-cta { justify-content: center; }
@media (max-width: 960px) {
  .hp-header-cta { display: none; }
  .hp-nav-hamburger { display: flex; }
}

/* ═══════════════════════════════════════════
   HERO: full viewport; H1 spans both cols, video right of form
   ═══════════════════════════════════════════ */
.hp-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(96px, 9vw, 132px) 0 var(--section-py);  /* top clears fixed header */
  overflow: hidden;
}
.hp-hero .hp-container { width: 100%; }
.hp-hero::before {
  content: ""; position: absolute; inset: -10% -10% auto auto;
  width: 60%; height: 70%;
  background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 60%);
  filter: blur(80px); pointer-events: none; z-index: 0;
}
.hp-hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
}
.hp-hero-h1 {
  /* 2026-05-12 iter 9 (Ivo): H1 lives INSIDE .hp-hero-text now (no grid-column span).
     Both grid columns share row 1, so H1 top + visual top align at the grid origin.
     Font-size reduced from clamp(40, 5.6vw, 76) so "Your marketing" / "command center."
     fit cleanly on two lines inside a ~560px half-width column at 1440 viewport. */
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05; letter-spacing: -0.03em;
  font-weight: 800; margin: 0;
  text-align: left;
}
.hp-hero-h1 .grad,
.hp-final-title .grad,
.hp-perf-title .grad {
  background: linear-gradient(120deg, var(--text-primary) 30%, var(--brand-pink) 65%, var(--brand-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;            /* required so transform/translateY can animate the rotating word */
  will-change: transform, opacity, filter;
  /* Tight h1 line-height (1.05) clips descenders ("g" in growth/engine, period dots) when the
     span is inline-block. Pad below to give the ink room; negative margin keeps line flow stable. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  overflow: visible;
}

/* 2026-05-14 iter 11 (Ivo): subheadline accents = SOLID Improvado pink (no gradient wave).
   Overrides the inherited background-clip:text so the span renders as a flat color again. */
.hp-hero-sub .grad {
  color: var(--brand-pink);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
.hp-hero-text {
  width: 100%;
  text-align: left;
  display: flex; flex-direction: column;
  align-self: start;
  /* 2026-05-12 iter 9 (Ivo): padding-top 16 → 0 — H1 sits at row 1 origin to align
     with the dashboard's top edge on the right column. */
  padding-top: 0;
}
/* 2026-05-12 iter 9 (Ivo): hero h1 subheadline padding so the sub doesn't crowd the h1 baseline. */
.hp-hero-text .hp-hero-sub { margin-top: 22px; }
.hp-hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-secondary);
  max-width: 540px; margin: 0 0 24px;
}
.hp-hero-form {
  display: flex; gap: 10px; align-items: stretch;
  max-width: 480px;
  margin: 0;
}
.hp-final-form {
  display: flex; gap: 10px; align-items: stretch;
  max-width: 480px;
  margin: 0 auto;
}
.hp-hero-form input[type="email"], .hp-final-form input[type="email"] {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.hp-hero-form input[type="email"]:focus,
.hp-final-form input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-pink);
  background: var(--bg-card-hover);
}
.hp-hero-form input::placeholder, .hp-final-form input::placeholder {
  color: var(--text-quaternary);
}
.hp-hero-form button[type="submit"], .hp-final-form button[type="submit"] {
  background: var(--brand-pink);
  color: white; border: none; padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.hp-hero-form button[type="submit"]:hover,
.hp-final-form button[type="submit"]:hover {
  background: var(--brand-pink-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--accent-purple-glow);
}
.hp-hero-trust {
  margin-top: 22px;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 26px;
  row-gap: 14px;
  justify-content: start;
  font-size: 14px; color: var(--text-secondary);
}
.hp-hero-trust > span {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 500;
}
/* Items 1 & 2 fill row 1 from the left; item 3 spans both columns and centers between them */
.hp-hero-trust > span:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
}
/* Improvado-pink check disc: flat enterprise-clean (2026-05-13 Ivo: "remove the glow from the round checkmarks").
   Stripped the outer pink halo, inset highlights, radial sheen, and SVG drop-shadow.
   Result: a solid pink disc with a crisp white check, no glow. */
.hp-trust-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-pink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  line-height: 0;
}
.hp-trust-check::before { display: none; }
.hp-trust-check svg {
  width: 13px; height: 13px;
  display: block;
  position: relative;
  z-index: 1;
}

/* 2026-05-12 iter 9 (Ivo): three checkmarked notions under the hero CTA describing HOW
   Improvado is a command center. Reuses the .hp-trust-check pink disc + white check SVG. */
.hp-hero-checks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 540px;
}
.hp-hero-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.hp-hero-checks-text { display: inline-block; }

/* Hero visual now sits in row-1 right column alongside .hp-hero-text. */
.hp-hero-visual {
  width: 100%;
  align-self: start;
  /* 2026-05-12 iter 9 (Ivo): was margin-top: -168 (compensated for H1 spanning row 1
     in the old layout). H1 now lives inside .hp-hero-text in the SAME row, so the visual
     no longer needs a negative pull — its top edge naturally aligns with the H1's top. */
  margin-top: 0;
}

/* ── Hero video (Cloudflare Stream window, copied from homepage-v2) ── */
.hp-hero-video {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2), 0 0 0 1px var(--border-subtle);
}
.hp-hero-video-topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-card);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.hp-hero-video-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--text-quaternary);
}
.hp-hero-video-dot--red    { background: #ff5f57; }
.hp-hero-video-dot--yellow { background: #febc2e; }
.hp-hero-video-dot--green  { background: #28c840; }
.hp-hero-video-topbar-url {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-tertiary);
}
.hp-hero-video-body { position: relative; }
.hp-hero-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.hp-hero-iframe-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
}
.hp-video-poster {
  position: absolute; inset: 0;
  cursor: pointer;
  display: block;
  background: var(--bg-elevated);
}
.hp-video-poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hp-video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--text-primary);
  padding: 12px 22px 12px 14px;
  display: inline-flex; align-items: center; gap: 14px;
  border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  z-index: 2;
}
.hp-video-poster:hover .hp-video-play-btn {
  background: rgba(255, 255, 255, 0.88);
  transform: translate(-50%, -50%) scale(1.04);
}
/* Pink play disc: gradient + inset highlight + outer pulse ring */
.hp-video-play-icon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-pink-soft) 0%, var(--brand-pink) 60%, var(--brand-pink) 100%);
  box-shadow:
    0 6px 20px rgba(109, 40, 217, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18);
  position: relative;
  flex-shrink: 0;
}
.hp-video-play-icon::before,
.hp-video-play-icon::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(109, 40, 217, 0.5);
  pointer-events: none;
  animation: playPulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hp-video-play-icon::after { animation-delay: 1.2s; }
.hp-video-play-icon svg {
  display: block;
  position: relative;
  z-index: 1;
  margin-left: 2px;          /* visual offset: triangle reads centered */
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.1));
}
@keyframes playPulse {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(2);   opacity: 0;    }
}

/* ── Partner-logo marquee under the hero ── */
.hp-marquee {
  position: relative;
  width: 100%;
  margin-top: clamp(28px, 4vw, 56px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.hp-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
  width: max-content;
  animation: hp-marquee-scroll 55s linear infinite;
}
.hp-marquee img {
  width: auto;
  height: 30px;
  flex-shrink: 0;
  opacity: 0.65;
  filter: brightness(0) invert(1);   /* normalize wordmarks to white on dark */
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.hp-marquee img:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.hp-marquee--customers .hp-marquee-track {
  gap: clamp(40px, 5vw, 72px);   /* wordmarks need more breathing room */
}
@keyframes hp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-marquee-track { animation: none; }
}

/* ═══════════════════════════════════════════
   SELECTOR: three columns, ONE viewport
   ═══════════════════════════════════════════ */
.hp-selector {
  padding: var(--section-py) 0 clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.04) 50%, transparent 100%);
}
.hp-selector-header { text-align: center; margin-bottom: 36px; }
.hp-section-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: var(--accent-mint);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 12px;
}
.hp-section-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.hp-section-sub {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto;
}

/* ─── Progress rail (replaces "Step 1 of 3" + linear bar) ─────────────────
   Three labeled circular nodes connected by a thin track. Visible from BEFORE
   step 1 so the user can see the whole journey at a glance. State diagram:
     ACTIVE    : solid pink fill, white number, 6px soft pink halo, slight scale-up.
     COMPLETED : dim pink fill, white checkmark glyph, label swaps to user's pick.
                  Clickable to re-open that axis for editing.
     LOCKED    : white face w/ ghost-navy border, dim numeric badge, button disabled.
   Connector lines fill pink LTR as the upstream node completes.
   Strict palette: white (--bg-card) · navy (--text-primary) · pink (--brand-pink) ·
   dim pink (--brand-pink-dim). No mint, no purple, no lavender. */
.hp-rail {
  list-style: none;
  margin: 32px auto 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 640px;
}
.hp-rail-node { display: flex; align-items: stretch; flex: 0 0 auto; }
.hp-rail-btn {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 144px;
  text-align: center;
  font: inherit;
  color: var(--text-primary);
  transition: opacity var(--t-fast);
}
.hp-rail-btn[disabled] { cursor: not-allowed; opacity: 0.55; }
.hp-rail-btn:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 6px;
  border-radius: 12px;
}

.hp-rail-marker {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--text-primary);
  color: var(--text-primary);
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transition: background var(--t-med), border-color var(--t-med),
              color var(--t-med), box-shadow var(--t-med),
              transform var(--t-med);
}
.hp-rail-num { display: inline-block; }

.hp-rail-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
  /* No reserved space: pick text sets its own height when it lands.
     Iter 3 cleanup (2026-05-12 Ivo: tighten gap, kill clutter). */
}
.hp-rail-axis {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--t-fast);
}
.hp-rail-pick {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--brand-pink);
  max-width: 140px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.hp-rail-pick:empty { display: none; }

/* Connector line between nodes: gray track + pink fill overlay. */
.hp-rail-link {
  flex: 0 1 64px;
  height: 40px;             /* matches marker height so the track centers vertically with the circles */
  position: relative;
  margin: 0 -2px;           /* nudge under the circle's outer border so visually continuous */
}
.hp-rail-link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: var(--text-ghost);
  border-radius: 1px;
  transform: translateY(-50%);
}
.hp-rail-link-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  width: 0%;
  background: var(--brand-pink);
  border-radius: 1px;
  transform: translateY(-50%);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-rail-link.is-filled .hp-rail-link-fill { width: 100%; }

/* ACTIVE node (polished 2026-05-12, iter 3: Ivo: "remove the ugly glow,
   simple, enterprise-level, absolutely gorgeous"):
   No halo, no animation, no gradient. One solid pink disc, one soft drop
   shadow that reads as gravity (not glow), 2px size bump from inactive.
   The label below promotes to navy bold + 0.18em tracking so the axis
   name carries enterprise authority: disc + label work as one unit. */
.hp-rail-node.is-active .hp-rail-marker {
  width: 42px; height: 42px;
  font-size: 14.5px;
  background: var(--brand-pink);
  border-color: var(--brand-pink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(109, 40, 217, 0.22);
}
.hp-rail-node.is-active .hp-rail-axis {
  color: var(--text-primary);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  font-weight: 800;
}

/* COMPLETED node: dim pink fill + white checkmark; clicking the button re-opens. */
.hp-rail-node.is-completed .hp-rail-marker {
  background: var(--brand-pink-dim);
  border-color: var(--brand-pink-dim);
  color: #fff;
}
.hp-rail-node.is-completed .hp-rail-num { display: none; }
.hp-rail-node.is-completed .hp-rail-marker::after {
  content: "";
  width: 12px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}
.hp-rail-node.is-completed .hp-rail-axis { color: var(--text-quaternary); }
.hp-rail-node.is-completed .hp-rail-btn:hover .hp-rail-marker {
  background: var(--brand-pink);
  border-color: var(--brand-pink);
  box-shadow: 0 4px 14px var(--brand-pink-shadow);
}

/* LOCKED node: visible but quiet so the user sees the full journey ahead. */
.hp-rail-node.is-locked .hp-rail-marker {
  background: var(--bg-card);
  border-color: var(--text-ghost);
  color: var(--text-quaternary);
}

@media (max-width: 640px) {
  .hp-rail { max-width: 100%; }
  .hp-rail-btn { width: 96px; gap: 8px; }
  .hp-rail-axis { font-size: 10px; letter-spacing: 0.1em; }
  .hp-rail-pick { font-size: 12px; max-width: 96px; }
  .hp-rail-link { flex: 0 1 24px; }
}

/* hp-selector-columns / hp-col / hp-col-label / hp-col-title rules retired
   2026-05-12: classes are no longer used by the new markup and the
   mint-colored col-label conflicted with the strict 4-color palette. */

.hp-pill-group {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 620px;
}
/* Pill: palette-restricted: navy hairline on white at rest; pink fill when picked.
   Mint/violet outlines retired 2026-05-12 (Ivo ask). */
.hp-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
  white-space: nowrap;
}
.hp-pill:hover {
  border-color: var(--brand-pink-dim);
  color: var(--brand-pink);
  transform: translateY(-1px);
}
.hp-pill[aria-pressed="true"] {
  background: var(--brand-pink);
  color: #fff;
  border-color: var(--brand-pink);
  box-shadow: 0 6px 18px var(--brand-pink-shadow);
}
.hp-pill[aria-pressed="true"]:hover {
  background: var(--brand-pink);
  color: #fff;
}
.hp-pill:focus-visible {
  outline: 2px solid var(--brand-pink); outline-offset: 2px;
}
.hp-pill-reset {
  margin-top: 14px; align-self: flex-start;
  font-size: 12px; color: var(--text-quaternary);
  background: transparent; border: 0; padding: 4px 0;
  text-decoration: underline; text-decoration-color: var(--text-ghost);
  display: none;
}
.hp-pill-reset.is-visible { display: inline-block; }
.hp-pill-reset:hover { color: var(--text-primary); }

/* ── Fused selector window (rail + chips in ONE card, 2026-05-12 iter 2) ────
   The standalone step cards retired in iter 1 are now subsumed into a single
   `.hp-fused-card`: rail (loading) at the top, hairline divider, then the
   active axis's chip grid below. Rail axis labels double as the question
   prompt: the per-step <h3> ("I lead…", "We sell in…", "We are…") was
   redundant once Role/Industry/Size lives directly beneath each disc. */
.hp-fused-card {
  margin: 32px auto 0;
  max-width: 760px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-large);
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 36px);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Rail centers itself inside the card and no longer needs its own outer margin. */
.hp-fused-card > .hp-rail {
  margin: 0 auto;
}
/* No visible divider between rail and chips: whitespace alone is the
   separator (iter 3, Ivo: "simple, enterprise-level"). Tight 22px gap. */
.hp-steps {
  width: 100%;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Step is now just a transparent wrapper around its chip group: the card
   chrome (background, border, shadow, padding) lives on .hp-fused-card. */
.hp-step {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hp-step.is-locked,
.hp-step.is-completed { display: none; }
.hp-step.is-active { display: flex; }

/* Subtle fade-in on the active step's chip group so the swap between axes
   feels intentional rather than a snap. Fires whenever the .is-active class
   gets re-applied (i.e., on every pick that promotes the next axis). */
.hp-step.is-active .hp-pill-group {
  animation: hp-step-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hp-step-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-step.is-active .hp-pill-group { animation: none; }
}

/* All-done tile: sits inside the fused card now, transparent so it nests
   on the same surface as the chip grid (no nested-card look). */
.hp-step-done {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14.5px;
  margin: 0;
}
.hp-step-done[hidden] { display: none; }
.hp-step-done-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-pink);
  box-shadow: 0 0 0 4px var(--brand-pink-glow);
}

/* ═══════════════════════════════════════════
   DASHBOARDS: "All your performance in one screen."
   Scrolling library (top) + 6 bespoke chart cards (bottom)
   ═══════════════════════════════════════════ */
.hp-perf { padding: var(--section-py) 0; }
.hp-perf-header { text-align: center; margin-bottom: var(--title-mb); }
.hp-perf-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 8px;
}

/* ── Dashboard strip (horizontal scroll, blurred edges) ── */
.hp-dash-strip-wrap {
  position: relative;
  margin-bottom: 56px;
}
.hp-dash-strip-meta {
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: 18px;
}
/* Arrows + edge gradients retired 2026-05-14: strip switched from horizontal
   scroll to vertical stack so each Image #5-detail dashboard gets full width. */
.hp-dash-strip-controls { display: none; }
.hp-arrow {
  width: 40px; height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px;
  transition: all var(--t-fast);
}
.hp-arrow:hover {
  background: var(--bg-card-hover); border-color: var(--brand-pink);
}
.hp-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.hp-dash-strip-scroller-wrap { position: relative; }
.hp-dash-strip-scroller-wrap::before,
.hp-dash-strip-scroller-wrap::after { display: none; }
.hp-dash-strip {
  display: flex; flex-direction: column;
  gap: 36px;
  padding: 4px 0 8px;
  overflow: visible;
}

.hp-dash-tile {
  margin: 0;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.hp-dash-tile:hover {
  transform: translateY(-3px);
  border-color: var(--border-active);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
}

/* ─── V2 dashboard tile (Image #5 detail level, pink/cream palette) ───
   Each of the 3 archetypes (warroom / monthly / board) renders a full
   product-dashboard mock with chrome bar + 6-tile KPI strip + grouped bar
   chart + insights panel + data table + source-pill footer. Pulled live
   from the bespoke-applied .hp-role-card so role × industry × segment
   drives every label, value, platform name, insight, and KPI. */
/* Outer tile locks the entire bespoke dashboard inside ONE viewport (95vh).
   Flex column distributes the children: banner / KPI strip / canvas (fills)
   / ribbon / big-insight. Canvas grows; everything else is auto-height. */
.hp-dash-tile--v2 {
  display: flex; flex-direction: column;
  width: 100%;
  height: 95vh;
  max-height: 95vh;
  background: #ecf2eb;
  border: 1px solid rgba(109, 40, 217, 0.10);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.06),
    0 8px 20px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.hp-dash-tile--v2:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 40, 217, 0.25);
  box-shadow:
    0 32px 72px rgba(15, 23, 42, 0.10),
    0 12px 28px rgba(15, 23, 42, 0.06);
}

/* Compact 1-line banner: cadence label + title on left, CTA on right */
.hp-dash-tile-banner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 20px;
  padding: 12px 22px;
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.04) 0%,
    transparent 60%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex: 0 0 auto;
}
.hp-dash-tile-banner-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; }
.hp-dash-tile-banner-right { display: flex; align-items: center; gap: 14px; }
.hp-dash-tile-cadence {
  font-family: inherit;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-pink);
  flex-shrink: 0;
}
.hp-dash-tile-title {
  font-size: 18px; font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-tile-cap {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin: 0;
  flex: 1 1 100%;
  display: none; /* compact: hide subtitle (saves a line) */
}
.hp-dash-tile-meta { display: none; }
.hp-dash-tile-cta {
  font-size: 11px; font-weight: 800;
  font-family: inherit;
  letter-spacing: 0.04em;
  color: var(--brand-pink);
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid rgba(109, 40, 217, 0.2);
  border-radius: 20px;
  background: rgba(109, 40, 217, 0.04);
  transition: background var(--t-fast), border-color var(--t-fast);
  /* 2026-05-12 iter 5 (Ivo): CTA became the sole <a> after tile wrapper was downgraded
     to <div>; suppress the browser-default underline so it keeps the pink-pill look. */
  text-decoration: none;
  display: inline-block;
}
.hp-dash-tile--v2:hover .hp-dash-tile-cta {
  background: var(--brand-pink); color: white; border-color: var(--brand-pink); text-decoration: none;
}

/* ── Chrome header (traffic light + title + status pills) ── */
.hp-dash-v2-chrome {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: #fbfaf8;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.hp-dash-v2-chrome-dots { display: flex; gap: 7px; }
.hp-dash-v2-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.hp-dash-v2-dot--r { background: #ff5f57; }
.hp-dash-v2-dot--y { background: #febc2e; }
.hp-dash-v2-dot--g { background: #28c840; }
.hp-dash-v2-chrome-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-chrome-status { display: flex; gap: 8px; }
.hp-dash-v2-pill {
  font-size: 10.5px; font-weight: 700;
  padding: 4px 11px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: var(--text-tertiary);
}
.hp-dash-v2-pill--ok {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.3);
  color: #16a34a;
}
.hp-dash-v2-pill--ok::before {
  content: "●"; margin-right: 5px; font-size: 8px; color: #A78BFA;
}

/* ── 6-tile KPI strip (compact, fits in ~76px) ── */
.hp-dash-v2-kpis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: transparent;
  flex: 0 0 auto;
}
.hp-dash-v2-kpi {
  padding: 12px 14px;
  background: #ffffff;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.hp-dash-v2-kpi:last-child { border-right: none; }
.hp-dash-v2-kpi-lbl {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-kpi-val {
  font-family: inherit;
  font-size: 22px; font-weight: 800;
  color: var(--brand-pink);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-kpi-delta {
  font-size: 10px; font-weight: 700;
  color: #16a34a;
  margin-top: 4px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .hp-dash-v2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-dash-v2-kpi { border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
  .hp-dash-v2-kpi:nth-child(3n) { border-right: none; }
  .hp-dash-v2-kpi:nth-last-child(-n+3) { border-bottom: none; }
}
@media (max-width: 720px) {
  .hp-dash-v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-dash-v2-kpi:nth-child(3n) { border-right: 1px solid rgba(15, 23, 42, 0.06); }
  .hp-dash-v2-kpi:nth-child(2n) { border-right: none; }
}

/* ── Mid: chart (left) + insights (right) ── */
.hp-dash-v2-mid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  padding: 18px;
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
@media (max-width: 980px) {
  .hp-dash-v2-mid { grid-template-columns: 1fr; }
}
.hp-dash-v2-card {
  background: #fbfaf8;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
}
.hp-dash-v2-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.hp-dash-v2-card-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}
.hp-dash-v2-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.hp-dash-v2-legend-item {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.hp-dash-v2-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.hp-dash-v2-legend-dot--a { background: #6D28D9; }
.hp-dash-v2-legend-dot--b { background: #A78BFA; }
/* 2026-05-12 iter 5 (Ivo): was duplicate of --b. Distinct rose so the three series read separately. */
.hp-dash-v2-legend-dot--c { background: #CBD5E1; }

/* Grouped bar chart (4 columns × 3 stacked bars) */
.hp-dash-v2-chart-bars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  min-height: 220px;
  padding: 6px 4px 0;
}
.hp-dash-v2-chart-group { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.hp-dash-v2-chart-group-inner {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px;
  height: 180px; width: 100%;
}
.hp-dash-v2-chart-bar {
  flex: 1;
  min-width: 0;
  max-width: 22px;
  border-radius: 4px 4px 0 0;
  transition: height var(--t-fast);
}
.hp-dash-v2-chart-bar--a { background: #6D28D9; }
.hp-dash-v2-chart-bar--b { background: #A78BFA; }
/* 2026-05-12 iter 5 (Ivo): was duplicate of --b. Rose-pink gradient so the third series is visually distinct. */
.hp-dash-v2-chart-bar--c { background: #CBD5E1; }
.hp-dash-v2-chart-glbl {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
}
/* 2026-05-12 iter 5 (Ivo): "You" group gets a stronger label so the user can find
   themselves in the benchmark immediately. */
.hp-dash-v2-chart-group.is-you .hp-dash-v2-chart-glbl {
  color: #6D28D9;
  font-weight: 800;
}
/* Per-competitor delta chip ("+18% MoM", "–2%", etc.) sits below the name */
.hp-dash-v2-chart-delta {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.hp-dash-v2-chart-delta--up   { background: rgba(109, 40, 217, 0.10); color: #6D28D9; }
.hp-dash-v2-chart-delta--flat { background: rgba(85, 85, 104, 0.08);  color: #555568; }
.hp-dash-v2-chart-delta--down { background: rgba(244, 114, 182, 0.12); color: #BE185D; }

/* Auto-computed comparative summary footer ("You lead on Reach (+18pp) · trail on CPA (−7pp)") */
.hp-dash-v2-chart-summary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 500;
}
.hp-dash-v2-chart-summary strong { color: var(--text-primary); font-weight: 700; }

/* Insights panel */
.hp-dash-v2-insights-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-pink);
  padding: 6px 12px;
  background: rgba(109, 40, 217, 0.08);
  border-radius: 14px;
  margin-bottom: 16px;
}
.hp-dash-v2-insights-tag::before { content: "✦"; font-size: 10px; }
.hp-dash-v2-insights-list { display: flex; flex-direction: column; gap: 10px; }
.hp-dash-v2-insight {
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  align-items: start;
}
.hp-dash-v2-insight--ok {
  background: rgba(167, 139, 250, 0.05);
  border-left: 2px solid rgba(167, 139, 250, 0.45);
}
.hp-dash-v2-insight--warn {
  background: rgba(255, 136, 68, 0.05);
  border-left: 2px solid rgba(255, 136, 68, 0.45);
}
.hp-dash-v2-insight-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  color: var(--text-primary);
}
.hp-dash-v2-insight--ok .hp-dash-v2-insight-icon {
  background: rgba(167, 139, 250, 0.18);
  color: #16a34a;
}
.hp-dash-v2-insight--warn .hp-dash-v2-insight-icon {
  background: rgba(255, 136, 68, 0.18);
  color: #c2410c;
}
.hp-dash-v2-insight-text {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.5;
}
.hp-dash-v2-insight-text strong { font-weight: 700; }
.hp-dash-v2-insight-text em { font-style: normal; color: var(--brand-pink); font-family: inherit; font-size: 11px; }
.hp-dash-v2-insights-foot {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ── Full data table ── */
.hp-dash-v2-tableCard {
  padding: 18px 22px 4px;
  background: white;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.hp-dash-v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hp-dash-v2-table th {
  text-align: left;
  padding: 10px 14px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.hp-dash-v2-table th.hp-dash-v2-th-right { text-align: right; }
.hp-dash-v2-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  font-weight: 600;
  color: var(--text-primary);
}
.hp-dash-v2-table tr:last-child td { border-bottom: none; }
.hp-dash-v2-table .hp-dash-v2-td-name { font-weight: 700; }
.hp-dash-v2-table .hp-dash-v2-td-right { text-align: right; }
.hp-dash-v2-table .hp-dash-v2-td-good { color: #16a34a; }
.hp-dash-v2-table .hp-dash-v2-td-warn { color: #c2410c; }

/* ── Footer (source pills + updated) ── */
.hp-dash-v2-foot {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #fbfaf8;
}
.hp-dash-v2-sources {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.hp-dash-v2-source-pill {
  padding: 4px 11px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
.hp-dash-v2-updated {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
}

.hp-dash-v2-empty {
  padding: 80px 0; text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ── Canvas: 4-col × N-row equal-cell grid (N injected via inline style by JS) ── */
.hp-dash-v2-canvas {
  display: grid;
  /* 2026-05-14 raised column min from 0 to 180px so cells never compress
     to unreadable widths. The @media block below collapses to 2 columns
     when the canvas itself is too narrow to host 4 × 180px. */
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  /* Minimum row 180px enforces a hard floor; combined with the per-widget
     min-heights in the audit pass at end-of-file, every internal plot/list
     has its own readable floor (chart-bars 90px, donut 84px, gauge 110px,
     etc.). Inline style from JS overrides the row COUNT and re-asserts 180. */
  grid-template-rows: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px;
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  grid-auto-flow: row dense;
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
  contain: layout paint;
}
.hp-dash-v2-cell {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  contain: layout paint;
}
.hp-dash-v2-cell > * {
  flex: 1 1 0;
  height: 100%;
  margin: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
  contain: layout paint;
}
/* Within each card, the head is auto-height and the content area shrinks
   to fit. Lists inside (alerts, ranks, AB) overflow-hidden so excess rows
   clip cleanly instead of pushing the card past its grid cell. */
.hp-dash-v2-cell .hp-dash-v2-card-head { flex: 0 0 auto; }
.hp-dash-v2-cell .hp-dash-v2-funnel,
.hp-dash-v2-cell .hp-dash-v2-alerts,
.hp-dash-v2-cell .hp-dash-v2-ranks,
.hp-dash-v2-cell .hp-dash-v2-ab,
.hp-dash-v2-cell .hp-dash-v2-cohort-grid,
.hp-dash-v2-cell .hp-dash-v2-heatmap,
.hp-dash-v2-cell .hp-dash-v2-insights-list,
.hp-dash-v2-cell .hp-dash-v2-chart-bars,
.hp-dash-v2-cell .hp-dash-v2-spark-wrap,
.hp-dash-v2-cell .hp-dash-v2-forecast,
.hp-dash-v2-cell .hp-dash-v2-geo,
.hp-dash-v2-cell .hp-dash-v2-gauge,
.hp-dash-v2-cell .hp-dash-v2-donut,
.hp-dash-v2-cell .hp-dash-v2-pareto,
.hp-dash-v2-cell .hp-dash-v2-matrix {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.hp-dash-v2-cell--s1 { grid-column: span 1; }
.hp-dash-v2-cell--s2 { grid-column: span 2; }
.hp-dash-v2-cell--s3 { grid-column: span 3; }
.hp-dash-v2-cell--s4 { grid-column: span 4; }
@media (max-width: 1200px) {
  .hp-dash-v2-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-dash-v2-cell--s1 { grid-column: span 1; }
  .hp-dash-v2-cell--s2,
  .hp-dash-v2-cell--s3,
  .hp-dash-v2-cell--s4 { grid-column: span 2; }
}
.hp-dash-v2-cell--s1 { grid-column: span 1; }
.hp-dash-v2-cell--s2 { grid-column: span 2; }
.hp-dash-v2-cell--s3 { grid-column: span 3; }
.hp-dash-v2-cell--s4 { grid-column: span 4; }
@media (max-width: 1200px) {
  .hp-dash-v2-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-dash-v2-cell--s1 { grid-column: span 1; }
  .hp-dash-v2-cell--s2,
  .hp-dash-v2-cell--s3,
  .hp-dash-v2-cell--s4 { grid-column: span 2; }
}
@media (max-width: 720px) {
  .hp-dash-v2-canvas { grid-template-columns: 1fr; }
  .hp-dash-v2-cell,
  .hp-dash-v2-cell--s1,
  .hp-dash-v2-cell--s2,
  .hp-dash-v2-cell--s3,
  .hp-dash-v2-cell--s4 { grid-column: span 1 !important; }
}

/* The non-canvas chart+insights ".hp-dash-v2-mid" row is now unused (kept
   below for any legacy consumer) — the masonry canvas owns the layout. */
.hp-dash-v2-card-meta {
  font-size: 11px; color: var(--text-tertiary); font-weight: 600;
  font-family: inherit;
}

/* ── Conversion funnel (decreasing-width pink bars) ── */
.hp-dash-v2-funnelCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-funnel { display: flex; flex-direction: column; gap: 8px; }
.hp-dash-v2-stage {
  position: relative;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  overflow: hidden;
  height: 38px;
}
.hp-dash-v2-stage-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(109, 40, 217, 0.18), rgba(167, 139, 250, 0.12));
  border-left: 3px solid #6D28D9;
}
.hp-dash-v2-stage.is-dim .hp-dash-v2-stage-fill {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.04));
  border-left-color: rgba(15, 23, 42, 0.3);
}
.hp-dash-v2-stage-row {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  font-size: 12px;
  height: 100%; box-sizing: border-box;
}
.hp-dash-v2-stage-name { font-weight: 700; color: var(--text-primary); }
.hp-dash-v2-stage-val { font-family: inherit; font-size: 11px; color: var(--text-secondary); font-weight: 700; }

/* ── Top performer ranks ── */
.hp-dash-v2-ranksCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-ranks { display: flex; flex-direction: column; gap: 8px; }
.hp-dash-v2-rank {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.hp-dash-v2-rank--top {
  background: rgba(109, 40, 217, 0.05);
  border-color: rgba(109, 40, 217, 0.2);
}
.hp-dash-v2-rank--dim { opacity: 0.6; }
.hp-dash-v2-rank-num {
  font-family: inherit;
  font-size: 22px; font-weight: 700;
  color: var(--brand-pink);
  text-align: center;
  line-height: 1;
}
.hp-dash-v2-rank--dim .hp-dash-v2-rank-num { color: var(--text-tertiary); }
.hp-dash-v2-rank-body { min-width: 0; }
.hp-dash-v2-rank-name {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-rank-meta {
  font-size: 11px; color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
}

/* ── Live alerts feed ── */
.hp-dash-v2-alertsCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-alerts { display: flex; flex-direction: column; gap: 8px; }
.hp-dash-v2-alert {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.hp-dash-v2-alert--alert { border-left: 3px solid #ff3333; background: rgba(255, 51, 51, 0.04); }
.hp-dash-v2-alert--warn  { border-left: 3px solid #ff8844; background: rgba(255, 136, 68, 0.04); }
.hp-dash-v2-alert--ok    { border-left: 3px solid #A78BFA; background: rgba(167, 139, 250, 0.04); }
.hp-dash-v2-alert-dot { width: 8px; height: 8px; border-radius: 50%; }
.hp-dash-v2-alert--alert .hp-dash-v2-alert-dot { background: #ff3333; }
.hp-dash-v2-alert--warn  .hp-dash-v2-alert-dot { background: #ff8844; }
.hp-dash-v2-alert--ok    .hp-dash-v2-alert-dot { background: #A78BFA; }
.hp-dash-v2-alert-body { min-width: 0; }
.hp-dash-v2-alert-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-alert-sub {
  font-size: 10.5px; color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-alert-action {
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  color: var(--brand-pink);
  white-space: nowrap;
  padding: 4px 10px;
  background: rgba(109, 40, 217, 0.08);
  border-radius: 12px;
}

/* ── Pacing meter (budget pacing card) ── */
.hp-dash-v2-pacingCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-pacing-headline { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.hp-dash-v2-pacing-big {
  font-family: inherit;
  font-size: 36px; font-weight: 700;
  color: var(--brand-pink);
  line-height: 1;
}
.hp-dash-v2-pacing-of {
  font-size: 13px; color: var(--text-tertiary);
  font-weight: 600;
}
.hp-dash-v2-pacing-bar {
  position: relative; height: 12px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 6px; overflow: hidden;
  margin-bottom: 8px;
}
.hp-dash-v2-pacing-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #6D28D9, #A78BFA);
  border-radius: 6px;
}
.hp-dash-v2-pacing-meta {
  font-size: 11.5px; color: var(--text-secondary);
  font-weight: 600;
}

/* 2026-05-12 iter 8 (Ivo): pacing card extras — Sub-pacing rows + driver rows + section
   labels. Each section visually separates with a soft top-border. Submetric rows are
   grid-laid (label | mini-bar | pct | state-chip); driver rows are (arrow | name | delta). */
.hp-dash-v2-pacing-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.hp-dash-v2-pacing-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.hp-dash-v2-pacing-submetric {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(70px, 1.6fr) 36px 64px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  margin-bottom: 5px;
}
.hp-dash-v2-pacing-submetric:last-child { margin-bottom: 0; }
.hp-dash-v2-pacing-submetric-label {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-pacing-submetric-bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgba(109, 40, 217, 0.08);
  overflow: hidden;
}
.hp-dash-v2-pacing-submetric-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #6D28D9, #A78BFA);
  border-radius: 3px;
}
.hp-dash-v2-pacing-submetric-pct {
  font-weight: 800;
  color: #6D28D9;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hp-dash-v2-pacing-submetric-state {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}
.hp-dash-v2-pacing-submetric-state--ahead   { background: rgba(109, 40, 217, 0.10); color: #6D28D9; }
.hp-dash-v2-pacing-submetric-state--on-plan { background: rgba(167, 139, 250, 0.16); color: #6D28D9; }
.hp-dash-v2-pacing-submetric-state--gap     { background: rgba(251, 191, 36, 0.18);  color: #B45309; }
.hp-dash-v2-pacing-submetric-state--behind  { background: rgba(244, 114, 182, 0.14); color: #BE185D; }

.hp-dash-v2-pacing-driver {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  margin-bottom: 4px;
}
.hp-dash-v2-pacing-driver:last-child { margin-bottom: 0; }
.hp-dash-v2-pacing-driver-arrow { font-weight: 800; text-align: center; }
.hp-dash-v2-pacing-driver--up   .hp-dash-v2-pacing-driver-arrow { color: #6D28D9; }
.hp-dash-v2-pacing-driver--down .hp-dash-v2-pacing-driver-arrow { color: #BE185D; }
.hp-dash-v2-pacing-driver-name {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-pacing-driver-delta {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hp-dash-v2-pacing-driver--up   .hp-dash-v2-pacing-driver-delta { color: #6D28D9; }
.hp-dash-v2-pacing-driver--down .hp-dash-v2-pacing-driver-delta { color: #BE185D; }

/* ── Sparkline trend (plan dashed vs actual solid) ── */
.hp-dash-v2-sparkCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-spark-wrap {
  height: 140px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.hp-dash-v2-spark-svg { width: 100%; height: 100%; display: block; }
.hp-dash-v2-spark-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-secondary);
  font-weight: 600;
}
.hp-dash-v2-spark-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Supporting KPI ribbon (single-row strip, ~42px) ── */
.hp-dash-v2-ribbon {
  display: flex; flex-wrap: nowrap;
  background: linear-gradient(90deg, rgba(109, 40, 217, 0.06), rgba(167, 139, 250, 0.02));
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 6px 0;
  flex: 0 0 auto;
  overflow: hidden;
}
.hp-dash-v2-ribbon-cell {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  min-width: 0;
  overflow: hidden;
}
.hp-dash-v2-ribbon-cell:last-child { border-right: none; }
.hp-dash-v2-ribbon-lbl {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-ribbon-val {
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  color: var(--brand-pink);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Big insight callout (compact, ~52px) ── */
.hp-dash-v2-bigInsight {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.06), rgba(167, 139, 250, 0.03));
  flex: 0 0 auto;
  overflow: hidden;
  display: flex; align-items: center; gap: 14px;
}
.hp-dash-v2-bigInsight-tag {
  display: inline-block;
  font-family: inherit;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-pink);
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.hp-dash-v2-bigInsight-list {
  margin: 0; padding: 0;
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.4;
  display: flex; align-items: center;
  list-style: none;
  flex: 1;
  overflow: hidden;
}
.hp-dash-v2-bigInsight-list li {
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-bigInsight-list li:not(:first-child) { display: none; }
.hp-dash-v2-bigInsight-list li::marker { display: none; }
.hp-dash-v2-bigInsight-list strong { color: var(--brand-pink); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────────
   UNIVERSAL WIDGET POLISH + COMPACTION (locks every cell to fit a row
   of the 4×6 grid filling 95vh canvas). Run AFTER per-widget rules so
   these win on specificity ties.
   ──────────────────────────────────────────────────────────────────── */
.hp-dash-v2-canvas .hp-dash-v2-card,
.hp-dash-v2-canvas .hp-dash-v2-funnelCard,
.hp-dash-v2-canvas .hp-dash-v2-ranksCard,
.hp-dash-v2-canvas .hp-dash-v2-alertsCard,
.hp-dash-v2-canvas .hp-dash-v2-pacingCard,
.hp-dash-v2-canvas .hp-dash-v2-sparkCard,
.hp-dash-v2-canvas .hp-dash-v2-gaugeCard,
.hp-dash-v2-canvas .hp-dash-v2-donutCard,
.hp-dash-v2-canvas .hp-dash-v2-cohortCard,
.hp-dash-v2-canvas .hp-dash-v2-geoCard,
.hp-dash-v2-canvas .hp-dash-v2-forecastCard,
.hp-dash-v2-canvas .hp-dash-v2-abCard,
.hp-dash-v2-canvas .hp-dash-v2-heatmapCard,
.hp-dash-v2-canvas .hp-dash-v2-tableCard {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  display: flex; flex-direction: column;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.hp-dash-v2-canvas .hp-dash-v2-card:hover,
.hp-dash-v2-canvas .hp-dash-v2-funnelCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-ranksCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-alertsCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-pacingCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-sparkCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-gaugeCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-donutCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-cohortCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-geoCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-forecastCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-abCard:hover,
.hp-dash-v2-canvas .hp-dash-v2-heatmapCard:hover {
  transform: translateY(-1px);
  border-color: rgba(109, 40, 217, 0.2);
  box-shadow:
    0 6px 16px rgba(109, 40, 217, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Card head: smaller, single line */
.hp-dash-v2-canvas .hp-dash-v2-card-head {
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.hp-dash-v2-canvas .hp-dash-v2-card-title {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Compact widget content within the canvas */
.hp-dash-v2-canvas .hp-dash-v2-chart-bars { min-height: 0; gap: 6px; padding: 4px 0 0; flex: 1; }
.hp-dash-v2-canvas .hp-dash-v2-chart-group-inner { height: auto; flex: 1; min-height: 0; max-height: 70px; gap: 2px; }
.hp-dash-v2-canvas .hp-dash-v2-chart-bar { max-width: 14px; border-radius: 3px 3px 0 0; }
.hp-dash-v2-canvas .hp-dash-v2-chart-glbl { font-size: 9px; margin-top: 4px; }
.hp-dash-v2-canvas .hp-dash-v2-chart-legend { gap: 8px; }
.hp-dash-v2-canvas .hp-dash-v2-legend-item { font-size: 9px; }

.hp-dash-v2-canvas .hp-dash-v2-gauge { min-height: 0; padding: 0; flex: 1; }
.hp-dash-v2-canvas .hp-dash-v2-gauge svg { max-width: 100%; max-height: 100%; }

.hp-dash-v2-canvas .hp-dash-v2-donut { gap: 4px; flex: 1; align-items: center; }
.hp-dash-v2-canvas .hp-dash-v2-donut svg { max-width: 70px; max-height: 70px; }
.hp-dash-v2-canvas .hp-dash-v2-donut-legend { gap: 1px; }
.hp-dash-v2-canvas .hp-dash-v2-donut-row { font-size: 9px; gap: 4px; grid-template-columns: 8px 1fr auto; }
.hp-dash-v2-canvas .hp-dash-v2-donut-dot { width: 6px; height: 6px; }

.hp-dash-v2-canvas .hp-dash-v2-cohort-grid { gap: 2px; flex: 1; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-row { gap: 2px; grid-template-columns: 42px repeat(12, minmax(0, 1fr)); }
.hp-dash-v2-canvas .hp-dash-v2-cohort-cell { height: 8px; border-radius: 2px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-wlbl { font-size: 7px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-lbl { font-size: 8px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-meta { font-size: 9px; margin-top: 4px; }

.hp-dash-v2-canvas .hp-dash-v2-heatmap { gap: 2px; flex: 1; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-row { gap: 2px; grid-template-columns: 28px repeat(12, minmax(0, 1fr)); }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-cell { height: 8px; border-radius: 2px; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-lbl { font-size: 8px; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-axis span { font-size: 8px; }

.hp-dash-v2-canvas .hp-dash-v2-geo { min-height: 0; flex: 1; }
.hp-dash-v2-canvas .hp-dash-v2-geo svg { width: 100%; height: 100%; max-height: 100%; }

.hp-dash-v2-canvas .hp-dash-v2-forecast { min-height: 0; flex: 1; padding: 4px; margin-bottom: 4px; }
.hp-dash-v2-canvas .hp-dash-v2-forecast svg { height: 100%; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-forecast-meta { font-size: 9px; gap: 8px; }

.hp-dash-v2-canvas .hp-dash-v2-spark-wrap { height: auto; flex: 1; min-height: 0; padding: 4px; margin-bottom: 4px; }
.hp-dash-v2-canvas .hp-dash-v2-spark-meta { font-size: 9px; gap: 8px; }

/* Funnel rows tighter */
.hp-dash-v2-canvas .hp-dash-v2-funnel { gap: 4px; flex: 1; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-stage { height: 18px; }
.hp-dash-v2-canvas .hp-dash-v2-stage-row { padding: 3px 8px; font-size: 10px; }

/* Status / alert rows tighter */
.hp-dash-v2-canvas .hp-dash-v2-alerts { gap: 4px; flex: 1; min-height: 0; overflow: hidden; }
.hp-dash-v2-canvas .hp-dash-v2-alert { padding: 4px 8px; }
.hp-dash-v2-canvas .hp-dash-v2-alert-name { font-size: 10.5px; }
.hp-dash-v2-canvas .hp-dash-v2-alert-sub { font-size: 9px; margin-top: 0; }
.hp-dash-v2-canvas .hp-dash-v2-alert-action { font-size: 9px; padding: 2px 7px; }

/* Rank rows tighter */
.hp-dash-v2-canvas .hp-dash-v2-ranks { gap: 4px; flex: 1; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-rank { padding: 4px 8px; grid-template-columns: 26px 1fr; gap: 8px; }
.hp-dash-v2-canvas .hp-dash-v2-rank-num { font-size: 14px; }
.hp-dash-v2-canvas .hp-dash-v2-rank-name { font-size: 10.5px; }
.hp-dash-v2-canvas .hp-dash-v2-rank-meta { font-size: 9px; margin-top: 0; }

/* A/B winners tighter */
.hp-dash-v2-canvas .hp-dash-v2-ab { gap: 4px; flex: 1; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-ab-row { padding: 4px 6px; grid-template-columns: 28px 1fr auto; gap: 6px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-rank { font-size: 8px; padding: 2px 4px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-name { font-size: 9.5px; margin-bottom: 2px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-bar { height: 3px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-lift { font-size: 10px; }

/* Pacing tighter */
.hp-dash-v2-canvas .hp-dash-v2-pacing-headline { gap: 6px; margin: 2px 0 6px; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-big { font-size: 22px; font-weight: 800; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-of { font-size: 10px; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-bar { height: 6px; margin-bottom: 4px; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-meta { font-size: 9.5px; }
/* 2026-05-12 iter 8 (Ivo): compact-mode for the new sub-pacing rows + drivers so the
   widget stays inside the 95vh canvas budget. */
.hp-dash-v2-canvas .hp-dash-v2-pacing-section { margin-top: 8px; padding-top: 6px; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-section-label { font-size: 8px; margin-bottom: 4px; letter-spacing: 0.12em; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-submetric {
  grid-template-columns: minmax(60px, 1fr) minmax(40px, 1.2fr) 28px 46px;
  gap: 5px; font-size: 9.5px; margin-bottom: 3px;
}
.hp-dash-v2-canvas .hp-dash-v2-pacing-submetric-bar { height: 4px; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-submetric-state { font-size: 7.5px; padding: 1px 4px; letter-spacing: 0.04em; }
.hp-dash-v2-canvas .hp-dash-v2-pacing-driver { gap: 5px; font-size: 9.5px; margin-bottom: 2px; grid-template-columns: 12px 1fr auto; }

/* Insights panel tighter */
.hp-dash-v2-canvas .hp-dash-v2-insights-tag { font-size: 8.5px; padding: 3px 8px; margin-bottom: 6px; }
.hp-dash-v2-canvas .hp-dash-v2-insights-list { gap: 4px; flex: 1; min-height: 0; overflow: hidden; }
.hp-dash-v2-canvas .hp-dash-v2-insight { padding: 5px 8px; gap: 6px; grid-template-columns: 18px 1fr; }
.hp-dash-v2-canvas .hp-dash-v2-insight-icon { width: 16px; height: 16px; font-size: 10px; }
.hp-dash-v2-canvas .hp-dash-v2-insight-text { font-size: 10.5px; line-height: 1.35; }
.hp-dash-v2-canvas .hp-dash-v2-insights-foot { font-size: 9px; padding-top: 5px; margin-top: 6px; }

/* ── NEW WIDGET TYPES (masonry-friendly, always render) ──────────────── */

/* Velocity gauge (semi-circular SVG arc) */
.hp-dash-v2-gaugeCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; display: flex; flex-direction: column; }
.hp-dash-v2-gauge { display: flex; align-items: center; justify-content: center; flex: 1; padding: 8px 0; min-height: 140px; }
.hp-dash-v2-gauge svg { width: 100%; max-width: 220px; height: auto; display: block; }

/* Audience donut (SVG with stroke-dasharray slices) */
.hp-dash-v2-donutCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-donut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hp-dash-v2-donut svg { width: 100%; max-width: 140px; height: auto; display: block; }
.hp-dash-v2-donut-legend { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.hp-dash-v2-donut-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 6px; align-items: center; font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.hp-dash-v2-donut-dot { width: 8px; height: 8px; border-radius: 50%; }
.hp-dash-v2-donut-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-dash-v2-donut-val { font-family: inherit; color: var(--brand-pink); }

/* Cohort retention grid */
.hp-dash-v2-cohortCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-cohort-grid { display: flex; flex-direction: column; gap: 3px; }
.hp-dash-v2-cohort-row { display: grid; grid-template-columns: 56px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.hp-dash-v2-cohort-row--head .hp-dash-v2-cohort-wlbl {
  font-size: 8px; font-weight: 700; color: var(--text-tertiary);
  text-align: center; letter-spacing: 0.06em; font-family: inherit;
}
.hp-dash-v2-cohort-lbl {
  font-size: 9.5px; font-weight: 700; color: var(--text-tertiary);
  letter-spacing: 0.06em; font-family: inherit;
  white-space: nowrap;
}
.hp-dash-v2-cohort-cell {
  height: 18px; border-radius: 3px;
  transition: transform var(--t-fast);
}
.hp-dash-v2-cohort-cell:hover { transform: scale(1.15); cursor: pointer; }
.hp-dash-v2-cohort-meta {
  margin-top: 12px;
  font-size: 11px; color: var(--text-tertiary);
  font-weight: 600;
}
.hp-dash-v2-cohort-meta b { color: var(--brand-pink); font-family: inherit; }

/* Geographic map (SVG outline + dots) */
.hp-dash-v2-geoCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; display: flex; flex-direction: column; }
.hp-dash-v2-geo { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 4px 0; }
.hp-dash-v2-geo svg { width: 100%; max-width: 100%; max-height: 100%; height: auto; display: block; }
/* Regional chip legend below the US map */
.hp-dash-v2-geo-chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  flex: 0 0 auto;
}
.hp-dash-v2-geo-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 6px;
  background: rgba(109, 40, 217, 0.04);
  border: 1px solid rgba(109, 40, 217, 0.08);
  border-radius: 6px;
  text-align: center;
  min-width: 0;
}
.hp-dash-v2-geo-chip.is-hot {
  background: rgba(109, 40, 217, 0.10);
  border-color: rgba(109, 40, 217, 0.22);
}
.hp-dash-v2-geo-chip-name {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.hp-dash-v2-geo-chip.is-hot .hp-dash-v2-geo-chip-name { color: var(--brand-pink); }
.hp-dash-v2-geo-chip-num {
  font-size: 14px; font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-top: 1px;
}
.hp-dash-v2-geo-chip.is-hot .hp-dash-v2-geo-chip-num { color: var(--brand-pink); }

/* Forecast curve (SVG line with confidence band) */
.hp-dash-v2-forecastCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; display: flex; flex-direction: column; }
.hp-dash-v2-forecast { flex: 1; min-height: 140px; background: white; border-radius: 8px; border: 1px solid rgba(15, 23, 42, 0.04); padding: 8px; margin-bottom: 10px; }
.hp-dash-v2-forecast svg { width: 100%; height: 100%; min-height: 140px; display: block; }
.hp-dash-v2-forecast-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-secondary);
  font-weight: 600;
}
.hp-dash-v2-forecast-meta b { font-family: inherit; color: var(--text-primary); }

/* A/B test winners */
.hp-dash-v2-abCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-ab { display: flex; flex-direction: column; gap: 10px; }
.hp-dash-v2-ab-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  background: white;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.hp-dash-v2-ab-rank {
  font-family: inherit;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-pink);
  text-align: center;
}
.hp-dash-v2-ab-row:first-child .hp-dash-v2-ab-rank { color: white; background: var(--brand-pink); padding: 4px 6px; border-radius: 4px; }
.hp-dash-v2-ab-body { min-width: 0; }
.hp-dash-v2-ab-name {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-ab-bar { height: 5px; background: rgba(15, 23, 42, 0.06); border-radius: 3px; overflow: hidden; position: relative; }
.hp-dash-v2-ab-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6D28D9, #A78BFA); border-radius: 3px; }
.hp-dash-v2-ab-lift {
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  color: #A78BFA;
}

/* Activity heatmap (7 days × 12 buckets) */
.hp-dash-v2-heatmapCard { padding: 18px 20px; background: #fbfaf8; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; }
.hp-dash-v2-heatmap { display: flex; flex-direction: column; gap: 3px; }
.hp-dash-v2-heatmap-row { display: grid; grid-template-columns: 36px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.hp-dash-v2-heatmap-lbl {
  font-size: 9.5px; font-weight: 700; color: var(--text-tertiary);
  font-family: inherit; letter-spacing: 0.06em;
}
.hp-dash-v2-heatmap-cell {
  height: 18px; border-radius: 3px;
  transition: transform var(--t-fast);
}
.hp-dash-v2-heatmap-cell:hover { transform: scale(1.2); }
.hp-dash-v2-heatmap-axis {
  display: grid; grid-template-columns: 36px repeat(4, 1fr);
  margin-top: 8px;
  padding-left: 0;
}
.hp-dash-v2-heatmap-axis > span:first-child { display: none; }
.hp-dash-v2-heatmap-axis span {
  font-size: 9px; color: var(--text-tertiary);
  font-family: inherit;
  text-align: center;
}

@media (max-width: 720px) {
  .hp-dash-tile-banner { grid-template-columns: 1fr; }
  .hp-dash-tile-banner-right { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
  .hp-dash-v2-ribbon-cell { min-width: 50%; border-right: none; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
  .hp-dash-v2-cohort-row { grid-template-columns: 40px repeat(12, minmax(0, 1fr)); }
  .hp-dash-v2-heatmap-row { grid-template-columns: 28px repeat(12, minmax(0, 1fr)); }
}

/* ── Bespoke 6 grid (HTML/CSS chart cards) ── */
.hp-bespoke-label {
  font-size: 13px; font-weight: 600;
  color: var(--accent-mint);
  text-align: center;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hp-bespoke-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hp-chart-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 230px;
  position: relative; overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.hp-chart-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 0%, var(--accent-purple-glow) 0%, transparent 50%);
  opacity: 0.18; pointer-events: none;
}
.hp-chart-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
}
.hp-chart-card > * { position: relative; z-index: 1; }
.hp-chart-card-head h3 {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin: 0;
}
.hp-chart-card-caption {
  margin: 0; font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-top: auto;
}

/* KPI card */
.hp-chart-kpi { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hp-chart-kpi-value {
  font-size: 48px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
.hp-chart-kpi-delta {
  background: rgba(138, 255, 188, 0.16);
  color: var(--accent-mint);
  font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.hp-chart-spark { width: 100%; height: 32px; }

/* Bar chart */
.hp-chart-bars { display: flex; flex-direction: column; gap: 8px; }
.hp-chart-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.hp-chart-bar-label { color: var(--text-secondary); }
.hp-chart-bar-track {
  height: 10px;
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.hp-chart-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--t-med); }
.hp-chart-bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary); font-weight: 600; text-align: right;
}

/* Line chart */
.hp-chart-line svg { width: 100%; height: 130px; display: block; }
.hp-chart-line-legend {
  display: flex; gap: 18px;
  font-size: 12px; color: var(--text-tertiary);
  margin-top: 4px;
}
.hp-chart-line-legend .dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
}
.dot-mint   { background: var(--accent-mint); }
.dot-purple { background: var(--brand-pink); }

/* Funnel */
.hp-chart-funnel { display: flex; flex-direction: column; gap: 7px; }
.hp-chart-funnel-row {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.hp-chart-funnel-label { color: var(--text-secondary); }
.hp-chart-funnel-bar {
  height: 16px;
  background: linear-gradient(90deg, var(--brand-pink), var(--accent-mint));
  border-radius: var(--radius-pill);
  min-width: 16px;
}
.hp-chart-funnel-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary); font-weight: 600;
}

/* Donut */
.hp-chart-donut-wrap {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px; align-items: center;
}
.hp-chart-donut {
  width: 100px; height: 100px; border-radius: 50%;
  position: relative;
  mask: radial-gradient(circle, transparent 38%, #000 39%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
}
.hp-chart-donut-legend {
  font-size: 12px; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 5px;
}
.hp-chart-donut-legend .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
}

/* Alert */
.hp-chart-alert { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-chart-alert-line {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  font-size: 12.5px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-card);
  border-radius: 10px;
}
.hp-chart-alert-time {
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
}
.hp-chart-alert-text { color: var(--text-secondary); }
.hp-chart-alert-line--warn {
  border-color: rgba(100, 116, 139, 0.4);
  background: rgba(100, 116, 139, 0.08);
}
.hp-chart-alert-line--warn .hp-chart-alert-text { color: var(--accent-amber); }
.hp-chart-alert-line--ok {
  border-color: rgba(138, 255, 188, 0.3);
  background: rgba(138, 255, 188, 0.06);
}
.hp-chart-alert-line--ok .hp-chart-alert-text { color: var(--accent-mint); }

/* ═══════════════════════════════════════════
   USE CASES: Premium monochrome 4×4 action grid
   ═══════════════════════════════════════════ */
.hp-cases {
  padding: var(--section-py) 0;
  background: var(--bg-void);
}
.hp-cases .hp-section-title {
  text-align: center;
  color: var(--text-primary);
  max-width: 940px;
  margin: 0 auto var(--title-mb);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.hp-cases-header {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 28px; gap: 20px; flex-wrap: wrap;
}
.hp-cases-titlewrap { flex: 1; min-width: 280px; }
.hp-cases-arrows { display: flex; gap: 8px; }
.hp-cases-scroller-wrap { position: relative; }
.hp-cases-scroller-wrap::before,
.hp-cases-scroller-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 16px;
  width: clamp(40px, 6vw, 80px);
  z-index: 2; pointer-events: none;
}
.hp-cases-scroller-wrap::before {
  left: 0; background: linear-gradient(90deg, var(--bg-void) 20%, transparent);
}
.hp-cases-scroller-wrap::after {
  right: 0; background: linear-gradient(-90deg, var(--bg-void) 20%, transparent);
}
.hp-cases-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 28vw, 340px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px clamp(40px, 6vw, 80px) 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-pink) var(--bg-card);
}
.hp-cases-scroller::-webkit-scrollbar { height: 6px; }
.hp-cases-scroller::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 3px; }
.hp-cases-scroller::-webkit-scrollbar-thumb { background: var(--brand-pink); border-radius: 3px; }
.hp-case-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 22px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
  transition: all var(--t-fast);
  position: relative; overflow: hidden;
  min-height: 180px;
}
.hp-case-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--accent-purple-glow) 0%, transparent 50%);
  opacity: 0; transition: opacity var(--t-fast);
}
.hp-case-card:hover {
  border-color: var(--border-active);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}
.hp-case-card:hover::before { opacity: 1; }
.hp-case-card > * { position: relative; z-index: 1; }
.hp-case-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(15, 23, 42, 0.16);
  display: grid; place-items: center;
  font-size: 19px;
}
.hp-case-headline {
  font-size: 17px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em;
  margin: 0;
}
.hp-case-detail {
  font-size: 14px; color: var(--text-tertiary);
  line-height: 1.5; margin: 0;
}

/* ═══════════════════════════════════════════
   TESTIMONIAL + CUSTOMER LOGOS
   ═══════════════════════════════════════════ */
.hp-proof {
  padding: var(--section-py) 0;
  /* 2026-05-14 — mirror the upper CTA's soft purple accent wash so the
     bottom CTA section sits on the same tinted surface (vs flat cream). */
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(109, 40, 217, 0.08) 0%,
      rgba(167, 139, 250, 0.04) 45%,
      transparent 100%),
    var(--bg-void, #fbfaf8);
}
.hp-proof::before {
  content: "";
  position: absolute;
  inset: -10% auto auto -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.10) 0%, transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.hp-proof > .hp-container { position: relative; z-index: 1; }
.hp-proof-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hp-proof-testimonial {
  padding: 4px 0 0 28px;
  border-left: 2px solid rgba(109, 40, 217, 0.28);
  transition: border-left-color var(--t-fast);
}
.hp-proof-company-logo {
  max-height: 30px; width: auto; object-fit: contain;
  margin: 0 0 22px;
  filter: brightness(0) saturate(0);
  opacity: 0.55;
}
.hp-proof-quote {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.55; font-weight: 400;
  color: rgba(15, 23, 42, 0.86);
  margin: 0 0 28px;
  letter-spacing: -0.015em;
}
.hp-proof-quote strong {
  color: var(--brand-pink); font-weight: 600;
  background: rgba(109, 40, 217, 0.10);
  padding: 1px 8px; border-radius: 4px;
  white-space: nowrap;
}
.hp-proof-person { display: flex; align-items: center; gap: 14px; }
.hp-proof-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
  object-fit: cover;
  flex-shrink: 0;
}
.hp-proof-person-name {
  font-weight: 600; font-size: 15px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.hp-proof-person-title {
  font-size: 13px; color: var(--text-tertiary);
  margin-top: 2px;
}

.hp-proof-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: center;
  justify-items: center;
}
.hp-proof-logo-grid img {
  max-height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity var(--t-fast), filter var(--t-fast);
}
.hp-proof-logo-grid img:hover { opacity: 1; }

/* ═══════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════ */
.hp-final {
  padding: var(--section-py) 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.hp-final::before {
  content: ""; position: absolute; inset: -50% 0 auto 0;
  height: 80%;
  background: radial-gradient(ellipse at center top, var(--accent-purple-glow) 0%, transparent 50%);
  filter: blur(60px); z-index: 0;
}
.hp-final-inner { position: relative; z-index: 1; }
.hp-final-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
  margin: 0 0 var(--title-mb);
}
.hp-final-sub {
  font-size: 17px; color: var(--text-secondary);
  max-width: 620px; margin: 0 auto var(--title-mb);
}
.hp-final-form { margin: 0 auto; }
.hp-platforms-strip {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-quaternary);
}

/* ═══════════════════════════════════════════
   FORM FEEDBACK
   ═══════════════════════════════════════════ */
.w-form-done,
.w-form-fail {
  display: none;
  max-width: 480px;
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  text-align: left;
}
.w-form-done {
  background: rgba(138, 255, 188, 0.15);
  color: var(--accent-mint);
  border: 1px solid var(--accent-mint);
}
.w-form-fail {
  background: rgba(167, 139, 250, 0.15);
  color: var(--brand-pink);
  border: 1px solid var(--brand-pink);
}
.hp-final-inner .w-form-done,
.hp-final-inner .w-form-fail { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════
   FOOTER (full v2 markup)
   ═══════════════════════════════════════════ */
.hp-footer {
  position: relative;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  padding: clamp(48px, 6vw, 80px) 0 28px;
}
.hp-footer-glow {
  position: absolute; inset: -40% 10% auto auto;
  width: 50%; height: 70%;
  background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 60%);
  filter: blur(80px); pointer-events: none; opacity: 0.4;
}
.hp-footer-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 3fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border-subtle);
}
.hp-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.hp-footer-logo { color: var(--text-primary); }
.hp-footer-tagline {
  font-size: 14px; color: var(--text-tertiary); line-height: 1.5;
  max-width: 320px;
}
.hp-footer-cta-wrap { margin-top: 4px; }
.hp-footer-cta-btn {
  display: inline-block;
  background: var(--brand-pink); color: white;
  padding: 11px 22px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600;
  transition: transform var(--t-fast), background var(--t-fast);
}
.hp-footer-cta-btn:hover { transform: translateY(-1px); background: var(--brand-pink); }
.hp-footer-social { display: flex; gap: 14px; margin-top: 6px; }
.hp-footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-tertiary);
  display: grid; place-items: center;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.hp-footer-social a:hover {
  color: var(--text-primary); border-color: var(--brand-pink);
}
.hp-footer-nav {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.hp-footer-col { display: flex; flex-direction: column; gap: 8px; }
.hp-footer-col-heading {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-quaternary);
  margin: 0 0 8px;
}
.hp-footer-col a {
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}
.hp-footer-col a:hover { color: var(--text-primary); }
.hp-footer-link-desc {
  display: block;
  font-size: 11px; color: var(--text-quaternary);
  margin-top: -4px; margin-bottom: 4px;
  line-height: 1.4;
}
.hp-footer-bottom {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  font-size: 12px; color: var(--text-quaternary);
}
.hp-footer-badges { display: flex; gap: 14px; flex-wrap: wrap; }
.hp-footer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.hp-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.hp-footer-legal a { color: var(--text-tertiary); transition: color var(--t-fast); }
.hp-footer-legal a:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   ROLE DASHBOARDS: 3 column previews per role (CMO first)
   Iter 1 (2026-05-12 Ivo): strict navbar palette only.
   Allowed: cream, white, navy (#0f172a), slate alphas, #6D28D9, #A78BFA.
   No mint, no violet, no other hues. Charts/bars get their interest from
   pink at full saturation vs slate at low alpha: that's the whole story.
   ═══════════════════════════════════════════════════════════════════════════ */
.hp-role-dash {
  padding: clamp(28px, 4vw, 56px) 0 var(--section-py);
}
.hp-role-dash-header {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 720px;
}
.hp-role-dash-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hp-role-dash-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-pink);
}
.hp-role-dash-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.hp-role-dash-sub {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Tailored-for banner: dynamic, composed from state (role × industry × segment).
   Big visible signal that the dashboards below are tailored to the user. Sits
   between section header and the 3-card grid. */
.hp-role-dash-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  margin: 0 auto 32px;
  background: var(--bg-card);
  border: 1px solid var(--brand-pink-dim);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.10);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.hp-role-dash-banner[hidden] { display: none; }
.hp-role-dash-banner-pre {
  font-size: 10px; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hp-role-dash-banner-text {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.hp-role-dash-banner-text strong {
  color: var(--brand-pink);
  font-weight: 800;
}

/* 3-column grid; stacks to 1 column on narrow viewports. */
.hp-role-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: stretch;
}

.hp-role-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column;
  gap: 16px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-role-card:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.09);
}

.hp-role-card-meta {
  display: flex; align-items: center; gap: 12px;
}
.hp-role-card-num {
  font-size: 11px; font-weight: 800;
  color: var(--brand-pink);
  letter-spacing: 0.18em;
}
.hp-role-card-tag {
  font-size: 11px; font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hp-role-card-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text-primary);
}
.hp-role-card-pain {
  font-size: 13.5px; font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* ─── Dashboard mock (the actual product preview) ───
   2026-05-13 (Ivo) v2: chrome rebuilt as a delicate cool-slate widget surface —
   solid background ~3% darker than the parent card, hairline border, inset rim.
   Reads as a distinct "product widget" nested inside the role card, not as
   continuation of the title/pain copy above. The focal widget block (bars /
   ch-list / rank-list / status-list / stage-list / spark / strip) gets its own
   nested white panel via the `.hp-role-card-mock > .hp-rcm-<X>` selectors below,
   so the rhythm is: verdict (slate) → white inner panel → insight (slate).
*/
.hp-role-card-mock {
  margin-top: 4px;
  padding: 16px;
  border-radius: 14px;
  background: #f4f5f9;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 0 rgba(15, 23, 42, 0.02);
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Focal widget nested-panel treatment — turns the chart/list into a clean
   white "widget body" against the slate mock surface. Applies to every
   direct-child focal-widget archetype. flex:1 + min-height equalizes card
   heights across the 3-column bundle so the row reads as one balanced unit. */
.hp-role-card-mock > .hp-rcm-bars,
.hp-role-card-mock > .hp-rcm-ch-list,
.hp-role-card-mock > .hp-rcm-rank-list,
.hp-role-card-mock > .hp-rcm-status-list,
.hp-role-card-mock > .hp-rcm-stage-list,
.hp-role-card-mock > .hp-rcm-spark,
.hp-role-card-mock > .hp-rcm-strip {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(15, 23, 42, 0.015);
  flex: 1;
  min-height: 200px;
  justify-content: center;
}
/* Strip carries its own top/bottom borders — override now that it's in a panel. */
.hp-role-card-mock > .hp-rcm-strip {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
/* Sparkline panel: let the SVG fill the panel so card C matches card A/B height. */
.hp-role-card-mock > .hp-rcm-spark {
  justify-content: space-between;
  gap: 10px;
}
.hp-role-card-mock > .hp-rcm-spark .hp-rcm-spark-svg {
  height: auto;
  flex: 1;
  min-height: 110px;
  width: 100%;
}

.hp-rcm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.hp-rcm-row--head {
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 10px;
  align-items: baseline;
}
.hp-rcm-row--head .hp-rcm-meta {
  text-align: right;
  max-width: 60%;
}
.hp-rcm-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.3;
}
.hp-rcm-meta {
  font-size: 10.5px; font-weight: 600;
  color: var(--text-quaternary);
  letter-spacing: 0.04em;
  flex: 0 1 auto;
  line-height: 1.3;
}
.hp-rcm-delta {
  font-size: 11px; font-weight: 700;
  color: var(--brand-pink);
  letter-spacing: 0;
}

/* ── ① AGENT VERDICT — sentence-style hero block.
   Replaces the old eyebrow row + .hp-rcm-bignum + .hp-rcm-track + track-meta
   stack with a single short answer the user can read in 2 seconds. Eyebrow
   on top (uppercase label), then a sentence containing one bold pink number
   (.hp-rcm-verdict-num) and an optional soft delta chip (.hp-rcm-verdict-delta).
   Meta line carries any qualifier (e.g. "75% of 4.2× plan"). */
.hp-rcm-verdict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.hp-rcm-verdict-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hp-rcm-verdict-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.hp-rcm-verdict-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--brand-pink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
  vertical-align: -3px;
  line-height: 1;
}
.hp-rcm-verdict-delta {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(15, 23, 42, 0.05);
  border-radius: 99px;
  padding: 2px 8px;
  margin-left: 6px;
  letter-spacing: 0;
  vertical-align: 3px;
  font-variant-numeric: tabular-nums;
}
/* 2026-05-13 v3: 3rd verdict line hidden — reduces density. Markup kept for
   future re-introduction; uncomment .hp-rcm-verdict-meta to bring back. */
.hp-rcm-verdict-meta {
  display: none;
}

.hp-rcm-block { display: flex; flex-direction: column; gap: 6px; }
.hp-rcm-block--hero { gap: 6px; }

.hp-rcm-bignum {
  font-size: 36px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Progress track: gray rail + pink fill (plus optional pacing marker). */
.hp-rcm-track {
  position: relative;
  height: 6px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 99px;
}
.hp-rcm-track-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.42);
  border-radius: 99px;
}
.hp-rcm-track--pacing { overflow: visible; }
.hp-rcm-track-marker {
  position: absolute; top: -4px; bottom: -4px;
  width: 2px;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 1px;
}
.hp-rcm-track-meta {
  display: flex; justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.hp-rcm-track-meta strong { color: var(--text-primary); font-weight: 700; }
.hp-rcm-pacing-ok { color: var(--text-secondary); font-weight: 600; }

/* 2×2 KPI grid: hairline dividers between cells (background bleeds through). */
.hp-rcm-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-card);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  overflow: hidden;
}
.hp-rcm-kpi {
  background: var(--bg-card);
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 3px;
}
.hp-rcm-kpi-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-quaternary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hp-rcm-kpi-val {
  font-size: 16px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Horizontal bar list (revenue-by-channel, allocation, etc.) */
.hp-rcm-bars { display: flex; flex-direction: column; gap: 12px; }
.hp-rcm-bars-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.hp-rcm-bar {
  display: grid;
  grid-template-columns: minmax(72px, 132px) minmax(40px, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.hp-rcm-bar-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-rcm-bar-track {
  position: relative;
  height: 8px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 99px;
  display: block;
}
.hp-rcm-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.42);
  border-radius: 99px;
}
.hp-rcm-bar-val {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Channel rows: name + ROAS + revenue bar. Single bar (spend half-bar dropped). */
.hp-rcm-ch-list { display: flex; flex-direction: column; gap: 14px; }
.hp-rcm-ch { display: flex; flex-direction: column; gap: 8px; }
.hp-rcm-ch-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hp-rcm-ch-name {
  font-size: 13.5px; font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-rcm-ch-roas {
  font-size: 13.5px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hp-rcm-ch.is-winner .hp-rcm-ch-roas { color: var(--brand-pink); }
.hp-rcm-ch.is-loser .hp-rcm-ch-name { color: var(--text-tertiary); }
.hp-rcm-ch.is-loser .hp-rcm-ch-roas { color: var(--text-quaternary); }
.hp-rcm-ch-bars { display: flex; flex-direction: column; gap: 0; }
.hp-rcm-ch-bar {
  height: 8px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 99px;
  overflow: hidden;
}
.hp-rcm-ch-bar--spend { display: none; }
.hp-rcm-ch-bar span {
  display: block; height: 100%;
  border-radius: 99px;
}
.hp-rcm-ch-bar--spend span { background: rgba(15, 23, 42, 0.30); }
.hp-rcm-ch-bar--rev span   { background: rgba(15, 23, 42, 0.38); }
.hp-rcm-ch.is-winner .hp-rcm-ch-bar--rev span { background: var(--brand-pink); }
.hp-rcm-ch.is-loser .hp-rcm-ch-bar--rev span { background: rgba(15, 23, 42, 0.22); }
/* 2026-05-13 v3: ch-vals hidden — the spend/revenue numbers under each channel
   bar read as small, hard-to-scan noise. ROAS in the row head + verdict text
   carry the same signal. Markup kept for future re-introduction. */
.hp-rcm-ch-vals {
  display: none;
}

/* Sparkline: pink solid (actual) over dashed gray (plan). */
.hp-rcm-spark { display: flex; flex-direction: column; gap: 6px; }
.hp-rcm-spark-svg {
  width: 100%; height: 56px;
  display: block;
}
.hp-rcm-spark-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  font-weight: 500;
}
.hp-rcm-spark-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hp-rcm-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.hp-rcm-dot--pink { background: var(--brand-pink); }
.hp-rcm-dot--gray { background: rgba(15, 23, 42, 0.32); }

/* Budget hero number (smaller than ROAS bignum: paired with "of $X"). */
.hp-rcm-budget-num {
  display: flex; align-items: baseline; gap: 8px;
}
.hp-rcm-budget-spent {
  font-size: 36px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hp-rcm-budget-of {
  font-size: 13px; font-weight: 500;
  color: var(--text-tertiary);
}

/* ── Bundle visibility: only one role's 3 cards visible at a time ── */
.hp-role-dash-bundle { display: none; }
.hp-role-dash-bundle.is-shown { display: block; }

/* Status row: colored dot + name + action pill. Sub-text hidden in v3. */
.hp-rcm-status-list { display: flex; flex-direction: column; gap: 0; }
.hp-rcm-status-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.hp-rcm-status-row:first-child { padding-top: 4px; }
.hp-rcm-status-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.hp-rcm-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-pink);
}
.hp-rcm-status-dot--ok    { background: var(--brand-pink); }
.hp-rcm-status-dot--warn  { background: var(--brand-pink-dim); }
.hp-rcm-status-dot--alert { background: rgba(15, 23, 42, 0.55); }
.hp-rcm-status-dot--idle  { background: rgba(15, 23, 42, 0.18); }
.hp-rcm-status-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-rcm-status-name {
  font-size: 13.5px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 2026-05-13 v3: status-sub hidden — small descriptive text under each status
   row added noise. Dot color + name + right-aligned action pill carry the
   signal. Markup kept for future re-introduction. */
.hp-rcm-status-sub {
  display: none;
}
.hp-rcm-status-val {
  font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 99px;
}
.hp-rcm-status-val--good  { color: var(--brand-pink); }
.hp-rcm-status-val--warn  { color: var(--brand-pink-dim); }
.hp-rcm-status-val--alert { color: var(--text-quaternary); }

/* Rank row: small rank# + title + meta line. Used by creatives, experiments,
   top performers, dashboard usage, attribution comparison. */
.hp-rcm-rank-list { display: flex; flex-direction: column; gap: 0; }
.hp-rcm-rank-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.hp-rcm-rank-row:first-child { padding-top: 4px; }
.hp-rcm-rank-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.hp-rcm-rank-num {
  font-size: 11px; font-weight: 800;
  color: var(--text-quaternary);
  letter-spacing: 0.08em;
  padding-top: 2px;
}
.hp-rcm-rank-row.is-top .hp-rcm-rank-num { color: var(--brand-pink); }
.hp-rcm-rank-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-rcm-rank-name {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-rcm-rank-row.is-dim .hp-rcm-rank-name { color: var(--text-tertiary); }
.hp-rcm-rank-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hp-rcm-rank-meta strong { color: var(--text-secondary); font-weight: 700; }
.hp-rcm-rank-meta .ok    { color: var(--brand-pink); font-weight: 700; }
.hp-rcm-rank-meta .dim   { color: var(--text-quaternary); }

/* Funnel stage row: descending bars with absolute counts. */
.hp-rcm-stage-list { display: flex; flex-direction: column; gap: 12px; }
.hp-rcm-stage-row {
  display: grid;
  grid-template-columns: minmax(86px, 120px) minmax(40px, 1fr) 64px;
  align-items: center;
  gap: 12px;
}
.hp-rcm-stage-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-rcm-stage-bar {
  height: 22px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.hp-rcm-stage-bar span {
  display: block; height: 100%;
  background: rgba(15, 23, 42, 0.42);
  border-radius: 6px;
}
.hp-rcm-stage-bar--dim span { background: rgba(15, 23, 42, 0.22); }
.hp-rcm-stage-val {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 4-tile horizontal KPI strip (Brand awareness funnel, etc.). */
.hp-rcm-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}
.hp-rcm-strip-tile { display: flex; flex-direction: column; gap: 5px; }
.hp-rcm-strip-val {
  font-size: 18px; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hp-rcm-strip-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.hp-rcm-strip-tile--accent .hp-rcm-strip-val { color: var(--brand-pink); }

/* Insight footer — quiet card-footer line on the slate surface, mirrored from
   the verdict header above. 2026-05-13 v3: removed the brand-pink dot (user
   feedback — read as decorative noise) and tightened to a single hairline
   divider above + footer text. The widget body (white panel) sits between
   verdict header and this footer like a real product widget. */
.hp-rcm-insight {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
  border-radius: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.hp-rcm-insight-dot {
  display: none;
}
.hp-rcm-insight-text strong {
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 980px) {
  .hp-role-dash-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}
@media (max-width: 640px) {
  .hp-role-card { padding: 22px; }
  .hp-rcm-bar { grid-template-columns: minmax(80px, 120px) minmax(30px, 1fr) auto; }
  .hp-rcm-stage-row { grid-template-columns: minmax(80px, 110px) minmax(30px, 1fr) 56px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1080px) {
  .hp-hero-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .hp-hero-h1 { font-size: clamp(36px, 6vw, 56px); padding-top: 0; }
  /* 2026-05-12 iter 1 (Ivo): reset the desktop overlap pull-up on the single-column stack
     so the dashboard doesn't bleed into the CTA form on mobile. */
  .hp-hero-visual { margin-top: 0; }
  .hp-bespoke-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-proof-split { grid-template-columns: 1fr; }
  .hp-footer-grid { grid-template-columns: 1fr; }
  .hp-footer-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hp-hero { min-height: auto; padding: 32px 0; }
  .hp-hero-form, .hp-final-form { flex-direction: column; }
  .hp-hero-form button[type="submit"],
  .hp-final-form button[type="submit"] { width: 100%; }
  .hp-bespoke-grid { grid-template-columns: 1fr; }
  .hp-proof-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-footer-nav { grid-template-columns: 1fr; }
  .hp-footer-bottom { flex-direction: column; align-items: flex-start; }
  .hp-cases-arrows, .hp-dash-strip-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT STAGE: chat scroll + morphing ROAS dashboard
   Replaces the Cloudflare hero video in .hp-hero-visual.
   Sierra-style bubble mask-fade; bars cross-fade between 3 states; KPI counts up.
   All colors come from existing :root tokens (no new vars).
   ═══════════════════════════════════════════════════════════════════════════ */
.hp-agent-stage {
  /* 2026-05-12 Ivo: removed the "window" framing: no border, no shadow, no radius.
     Stage is now an airy flex column. Chat sits ABOVE dashboard via order:-1. */
  position: relative;
  width: 100%;
  /* 2026-05-13 iter 5 (Ivo): compact the dashboard. State 1/2 6-bar charts had
     ~75 px of useless whitespace inside the 250 px chart container (only ~175 px of
     content). Shrink chart min-height 250 → 180 — state 1/2 now fills naturally, and
     state 3 (from + pill + to + reco) has been re-tightened in matching CSS rules so
     it fits in the same 180 px. Stage gap 8 → 5 to bring the chat one step closer
     to the dashboard floor. Stage min-height recomputed: dashboard ~310 + gap 5 + chat
     110 = 425; set 440 for slack. */
  min-height: 470px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  /* 2026-05-12 iter 1 (Ivo): 5 → 20. Reopen breathing room between the dashboard floor
     and the chat so the chat reads as a separate surface, not "clipping" the dashboard.
     2026-05-12 iter 2 (Ivo): 20 → 36. One more nudge to seat the chat clearly below
     the dashboard before the trust wall starts.
     2026-05-12 iter 3 (Ivo): 36 → 52. Chat sits another tick lower from the dashboard.
     2026-05-12 iter 4 (Ivo): 52 → 72. One more drop — chat reads as its own surface. */
  gap: 72px;
  --stage-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Window chrome (carries macOS dots from v2) */
.hp-agent-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.025);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  flex-shrink: 0;
}
.hp-agent-chrome-dots { display: flex; gap: 6px; }
.hp-agent-chrome-url {
  flex: 1;
  text-align: center;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.hp-agent-chrome-spacer { width: 38px; }

/* Dashboard body (2026-05-13 iter 4 Ivo): top padding 22 → 0 so the title aligns with
   the subheadline first line ("Every asset.") in the left hero column. Bottom padding
   24 → 4 so the chat sits almost-clipping beneath the last visible row (bottom-aligned
   chart content keeps the last bar / reco hugging the dashboard floor).
   2026-05-13 iter 6 (Ivo): dashboard fades to opacity 0 when the stage is at idle
   (data-state="0"). Drives two UX moments:
     • Page load: stage starts at state 0 → dashboard invisible until the first prompt
       fires and the 1.2 s thinking beat elapses (then applyDashState(1) lifts state
       and the dashboard fades in with the data).
     • Wind-down: runCycle's wind-down timer also calls applyDashState(0) so the
       dashboard fades out alongside the bubbles, returning the stage to clean idle
       before the next cycle begins. */
.hp-agent-dashboard {
  padding: 0 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  min-height: 0;
  transition: opacity 520ms var(--stage-ease);
}
.hp-agent-stage[data-state="0"] .hp-agent-dashboard {
  opacity: 0;
}

.hp-agent-dash-header { display: flex; flex-direction: column; gap: 2px; }
.hp-agent-dash-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-pink);
}
.hp-agent-dash-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  min-height: 1.4em;            /* preserves layout when empty at state 0 idle */
  transition: opacity 360ms var(--stage-ease);
}

/* Idle placeholder: shown when stage is at data-state="0", before the first prompt.
   Subtle pulsing violet dot + "Ask anything about your marketing data." cue.
   Fades out as soon as ANY chart becomes active. */
.hp-agent-chart-placeholder { display: none; }  /* 2026-05-12 Ivo: no idle prompt, first msg @ 350ms */
.hp-agent-stage:not([data-state="0"]) .hp-agent-chart-placeholder {
  opacity: 0;
}
.hp-agent-chart-placeholder-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-pink);
  animation: hp-agent-pulse 1.8s ease-in-out infinite;
}
.hp-agent-chart-placeholder-text {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}
@keyframes hp-agent-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.32); }
  50%      { transform: scale(1.18); opacity: 1;   box-shadow: 0 0 0 10px rgba(15, 23, 42, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-agent-chart-placeholder-dot { animation: none; opacity: 0.7; }
}

/* KPI row */
.hp-agent-dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hp-agent-kpi {
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
}
.hp-agent-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  transition: color 280ms var(--stage-ease);
}
.hp-agent-kpi-value {
  /* 2026-05-13 iter 2: bigger, bolder, tighter — "impressive" feel per Ivo ask.
     Was 22px / -0.02em. Now 28px / -0.025em, weight 800 retained. */
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Chart container: 3 charts stacked (position:absolute children), cross-fade by .is-active.
   2026-05-13 iter 3 (Ivo): single universal min-height across all states so the chat is
   anchored at the same Y regardless of which dashboard variation is on screen. Sized to
   fit state 3's content (from-bar + pill + to-bar + reco ≈ 230 px) with breathing room.
   The previous per-state shrink + 320 → 230 transition is retired. */
.hp-agent-dash-chart {
  position: relative;
  /* 2026-05-13 iter 5 (Ivo "compact"): chart 250 → 180. State 1/2 6 bars naturally
     measure ~175 px — the old 250 was leaving 75 px of useless whitespace. State 3
     is re-compacted in rules below (smaller pill + tighter reco + shorter copy) to
     fit in the same 180. Universal min-height keeps the chat anchored at one Y. */
  min-height: 180px;
}
.hp-agent-chart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* 2026-05-13 iter 4 Ivo: bottom-align chart content so the last bar (state 1/2) or
     the reco card (state 3) always hugs the chart-container floor, putting the chat
     ~12 px below the last visible row regardless of state. In state 1/2 this leaves
     empty space at the TOP of the chart (between KPIs and bars) — that reads as
     intentional whitespace, premium / Apple-keynote-style. */
  justify-content: flex-end;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms var(--stage-ease), visibility 0s linear 500ms;
}
.hp-agent-chart.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 500ms var(--stage-ease), visibility 0s linear 0s;
}

/* Bar primitive: grid: label / track / value.
   2026-05-13 Ivo: nothing can be cut off (...). Label column was 140px fixed +
   ellipsis truncation: long audience/sub-vertical names like "Meta LAL 1% prospecting"
   were getting clipped. Now: auto-sized label column, full text shown, no ellipsis. */
.hp-agent-bar {
  display: grid;
  grid-template-columns: minmax(170px, max-content) minmax(60px, 1fr) max-content;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.hp-agent-bar-label {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.hp-agent-bar-tree {
  color: var(--text-quaternary);
  margin-right: 4px;
}
.hp-agent-bar-meta {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}
.hp-agent-bar-track {
  height: 14px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 7px;
  overflow: hidden;
}
.hp-agent-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 7px;
  transition: width 900ms var(--stage-ease);
}
.hp-agent-chart.is-active .hp-agent-bar-fill {
  width: var(--bar-width, 0%);
}
/* 2026-05-12 Ivo: bar palette restricted to header/navbar colors.
   Pink shades for winners, navy alphas for losers/laggards (dimness = lossy). */
.hp-agent-bar-fill--winner        { background: linear-gradient(90deg, var(--brand-pink), var(--brand-pink-light)); }
.hp-agent-bar-fill--winner-strong { background: var(--brand-pink); }
.hp-agent-bar-fill--winner-soft   { background: var(--brand-pink-light); }
.hp-agent-bar-fill--blue          { background: rgba(15, 23, 42, 0.35); }
.hp-agent-bar-fill--loser         { background: rgba(15, 23, 42, 0.22); }
.hp-agent-bar-fill--mint          { background: rgba(15, 23, 42, 0.14); }
.hp-agent-bar-value {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* State 2 sub-bars: slide in with stagger */
.hp-agent-bar--sub {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--stage-ease), transform 500ms var(--stage-ease);
  transition-delay: var(--enter-delay, 0ms);
}
.hp-agent-chart--s2.is-active .hp-agent-bar--sub {
  opacity: 1;
  transform: translateY(0);
}
.hp-agent-bar--parent .hp-agent-bar-label { color: var(--brand-pink); font-weight: 700; }

/* ── State 3 reallocation flow capsule ─────────────────────────────────
   2026-05-13 iter 2 (Ivo: "thin arrow is not Improvado style"). Retired the
   2-column SVG line + 5px arrowhead. Replaced with a chunky pink-gradient pill
   that reads "REALLOCATE  $58K  →" — three glyph-groups in one capsule with
   tabular-num spacing. Sits centered between from-bar and to-bar.
   Old `.hp-agent-realloc-arrow` and `.hp-agent-realloc-label` rules kept as
   `display:none` so legacy markup (if any teammate cherry-picks) collapses
   cleanly instead of leaving a broken 24px line on the page. */
.hp-agent-realloc-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0; /* iter 5 (Ivo "compact"): 8 → 2 */
}
.hp-agent-realloc-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;             /* iter 5: 14 → 10 */
  padding: 7px 16px;     /* iter 5: 12 24 → 7 16 (pill ~28 px tall, was ~50) */
  background: linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-pink-light) 100%);
  color: #fff;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition:
    opacity 480ms var(--stage-ease) 280ms,
    transform 480ms var(--stage-ease) 280ms;
}
.hp-agent-chart--s3.is-active .hp-agent-realloc-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hp-agent-realloc-pill-verb {
  font-size: 10px;        /* iter 5: 10.5 → 10 */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  opacity: 0.86;
}
.hp-agent-realloc-pill-amount {
  font-size: 14px;        /* iter 5: 16 → 14 */
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hp-agent-realloc-pill-arrow {
  font-size: 14px;        /* iter 5: 17 → 14 */
  line-height: 1;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  opacity: 0.95;
}
/* Legacy SVG arrow + side label retired: hide if present. */
.hp-agent-realloc-arrow,
.hp-agent-realloc-flow .hp-agent-realloc-label { display: none !important; }

.hp-agent-bar--realloc-from .hp-agent-bar-fill { opacity: 0.7; }

/* Top-performer row accent: subtle pink tint + 3px pink left bar so the
   eye lands on the winning row first. Applied to the top bar in s1 and the
   first sub-bar (top within drilldown) in s2. */
.hp-agent-bar--top {
  position: relative;
  padding: 4px 8px 4px 14px;
  margin: 0 -8px 0 -14px;
  background: linear-gradient(90deg, rgba(109, 40, 217, 0.07) 0%, rgba(109, 40, 217, 0) 70%);
  border-radius: 8px;
}
.hp-agent-bar--top::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-pink);
}

/* Recommendation card (state 3 reveal).
   2026-05-13 iter 5 (Ivo "compact"): tightened to fit the new 180 px chart container.
   Padding 14 16 → 8 12; font 13 → 12; line-height 1.45 → 1.35; margin-top 6 → 2.
   Combined with the shorter recoText in SCRIPTS data, the card now lays out in 2 lines
   (~54 px) instead of 3+ (~96 px). */
.hp-agent-dash-reco {
  margin-top: 2px;
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.05) 0%, rgba(109, 40, 217, 0.10) 100%);
  border: 1px solid rgba(109, 40, 217, 0.18);
  border-left: 3px solid var(--brand-pink);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--stage-ease) 500ms, transform 500ms var(--stage-ease) 500ms;
}
.hp-agent-chart--s3.is-active .hp-agent-dash-reco {
  opacity: 1;
  transform: translateY(0);
}
.hp-agent-dash-reco-icon {
  color: var(--brand-pink);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.3;
}
.hp-agent-dash-reco-text strong { color: var(--text-primary); font-weight: 700; }
.hp-agent-uplift {
  color: var(--brand-pink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Chat: Sierra-style transcript (2026-05-13 iter 4 Ivo "premium enterprise").
   Refinements over iter 3:
     • Font size 16 → 15 px (more refined / less "shouty" inside the constrained slot)
     • Weight hierarchy: 600 newest / 400 fading (clear visual differentiation)
     • Tighter tracking on newest (-0.008em) — "deliberate" feel; fading opens up (-0.003em)
     • Enable kerning, ligatures, contextual alternates via font-feature-settings
     • text-rendering: optimizeLegibility + font-smoothing for crisp anti-alias
     • Pink underline accent refined 26×2 → 30×1.5 (longer + thinner = more elegant)
   Panel height trimmed 120 → 110 to match the tighter cadence under the dashboard. */
.hp-agent-chat {
  position: relative;
  width: 100%;
  height: 140px;
  flex: 0 0 140px;
  /* iter 10 (Ivo): horiz visible so long bubbles extend left into the empty space below the form; vert clip keeps fading bubbles from bleeding into dashboard. */
  overflow-x: visible;
  overflow-y: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 32%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 32%, black 100%);
}

/* ── Bubble: enterprise glass-morphism (2026-05-14 iter 8 Ivo).
   Frosted-white card with `backdrop-filter: blur(14px) saturate(160%)`, a 1px
   navy-alpha border for definition, a soft drop-shadow, and an inset-top white
   highlight (rim light) for the "glossy" feel. NO pink anywhere — palette is
   navy + white + grays only. Right-anchored chat-bubble (align-self: flex-end,
   max-width 80%). Per-bubble mask retired in favor of container-level mask
   + opacity fades so the glass surface stays intact at the top edge. */
.hp-agent-bubble {
  align-self: flex-end;
  width: max-content;
  max-width: none;
  padding: 9px 14px 10px;
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  text-align: right;
  font-family: 'Karla', 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--text-primary);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow:
    0 3px 14px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 500ms var(--stage-ease),
    transform 500ms var(--stage-ease),
    filter 400ms var(--stage-ease),
    color 400ms var(--stage-ease);
}
.hp-agent-bubble--enter {
  opacity: 1;
  transform: translateY(0);
}
.hp-agent-bubble.hp-agent-bubble--fading {
  opacity: 0.55;
  filter: saturate(40%);
  color: var(--text-tertiary);
}
.hp-agent-bubble.hp-agent-bubble--exit {
  opacity: 0;
  filter: saturate(0%);
}

/* Pink ::after underline retired per Ivo iter 8 ("do NOT use accent colors (pink)"). */
.hp-agent-bubble::after { display: none !important; }

.hp-agent-bubble--agent {
  align-self: flex-start;
  text-align: left;
  color: var(--text-secondary);
}
.hp-agent-bubble--user {
  align-self: flex-end;
  text-align: right;
  color: var(--text-primary);
}

/* ── Persona header inside each bubble (2026-05-14 iter 8): name on top in
   primary navy, role next to it in tertiary gray with a · separator.
   Small uppercase tracked sans, sits above the message text. */
.hp-agent-bubble-persona {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.hp-agent-bubble-name {
  color: var(--text-primary);
  font-weight: 800;
}
.hp-agent-bubble-role {
  color: var(--text-tertiary);
  font-weight: 600;
}
.hp-agent-bubble-role::before {
  content: "·";
  margin: 0 5px;
  color: var(--text-quaternary);
}
.hp-agent-bubble-text { display: block; white-space: nowrap; }

/* Legacy sender label retired. */
.hp-agent-bubble-sender { display: none; }

/* Responsive: on narrow viewports, dashboard collapses gently */
@media (max-width: 900px) {
  .hp-agent-stage { aspect-ratio: 4 / 3.2; max-height: none; gap: 18px; }
  .hp-agent-chat { min-height: 100px; max-height: 120px; }
  .hp-agent-bar { grid-template-columns: 110px 1fr 42px; gap: 8px; font-size: 12px; }
  .hp-agent-bar-label { font-size: 12px; }
  .hp-agent-realloc-flow { grid-template-columns: 110px 1fr 42px; }
}
@media (max-width: 640px) {
  .hp-agent-dash-kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hp-agent-kpi { padding: 6px 8px; }
  .hp-agent-kpi-value { font-size: 16px; }
  .hp-agent-chat { min-height: 90px; max-height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-agent-bar-fill,
  .hp-agent-bar--sub,
  .hp-agent-realloc-arrow,
  .hp-agent-realloc-arrow path,
  .hp-agent-dash-reco,
  .hp-agent-bubble,
  .hp-agent-chart {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOMER LOGO GRID (Sierra-style spread, 2026-05-13 iter 5 Ivo).
   Replaces the animated marquee. 30 customer logos in a 6×5 monochrome grid:
   filter: brightness(0) converts any source colour (SVG / PNG, dark or light
   original) into solid black. Opacity 0.55 keeps the grid quiet so it reads
   as "social proof footprint" rather than competing with the hero.
   ════════════════════════════════════════════════════════════════════════════ */
.hp-logos {
  /* 2026-05-12 iter 2 (Ivo): bump top padding clamp(72,8vw,112) → clamp(140,14vw,200)
     so the trust wall sits clearly LOWER than the chat — bigger drop than the chat got
     this turn, so the proportional separation reads "hero finished, social proof begins".
     2026-05-12 iter 3 (Ivo): 140/14/200 → 104/11/160. Pull the trust wall back up a
     little; previous bump landed too far below the chat.
     2026-05-14 iter 4 (Ivo): pull closer to the chat. 104/11/160 → 48/5vw/88.
     Roughly halves the top padding so the trust wall sits a beat below the hero
     rather than separated by a full screen of whitespace.
     2026-05-14 iter 5 (Ivo): tiny breath back — 48/5vw/88 → 64/6vw/104. Adds
     ~16-20 px of room above the wall so it doesn't kiss the chat. */
  /* Cells already carry 28–44px internal padding around each logo, so the
     section's own bottom padding is redundant. Bottom = 0 — the gap to the
     next section is owned entirely by .hp-selector-titlewrap.margin-top. */
  padding: var(--section-py) 0 0;
}
.hp-logos-eyebrow {
  text-align: center;
  font-family: 'Karla', 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--title-mb);
}
.hp-logos-grid {
  /* 2026-05-13 hairline edition: drop `gap`, draw the wall via cell-edge
     1px borders that collapse to a single shared hairline between cells.
     Outer border-top + border-left close the perimeter of the wall. */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(15, 15, 20, 0.07);
  border-left: 1px solid rgba(15, 15, 20, 0.07);
}
.hp-logos-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 3vw, 44px) clamp(18px, 2vw, 28px);
  min-height: clamp(96px, 9vw, 128px);
  border-right: 1px solid rgba(15, 15, 20, 0.07);
  border-bottom: 1px solid rgba(15, 15, 20, 0.07);
}
.hp-logos-grid img {
  /* 2026-05-13 iter 2: 140/52 → 116/44 — smaller, more accurate footprint
     inside the hairline cells; logos no longer dominate their frame. */
  max-width: 116px;
  max-height: 44px;
  width: auto;
  height: auto;
  filter: brightness(0);
  /* 2026-05-13 iter 2: 0.62 → 0.5 — pull contrast back a notch so the
     wall reads refined, not loud. Hover still goes to 1.0. */
  opacity: 0.5;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}
.hp-logos-grid img:hover {
  opacity: 1;
}
/* Per-logo size standardization. Two reasons a logo renders small under uniform
   max bounds: (1) square/padded viewBoxes hit max-height before max-width;
   (2) thin-stroke wordmarks fill width but have low x-height. Scale each so
   visible content mass matches the rest of the grid. */
/* Square / padded-viewBox logos. Ford and Blizzard now have content-tight
   viewBoxes (cropped at the SVG level), so the scale below is on top of an
   image that already fills its bounds. Roche fills its viewBox natively and
   only needs to ride at default scale; the old 1.30 made it taller than its
   row-4 neighbours. */
/* Mattel removed 2026-05-12 — filed under customer-logos/_broken/. The
   starburst+inner-wordmark structure can't survive brightness(0) flatten.
   See customer-logos/_broken/README.md for the full reasoning. */

/* Scaling philosophy (2026-05-12 v3): scale UP square/padded-viewBox emblems
   that get crushed by max-height: 52, scale DOWN over-wide or over-tall
   wordmarks whose viewBox aspect makes them dominate their row. Targets
   per row median: wordmark ~280w × 60h, emblem ~200w × 110h, oval/badge
   ~290w × 110h. */

/* Scale-UP: emblems / oval / padded viewBoxes */
.hp-logos-grid img[src*="ford"]          { transform: scale(1.15); }
.hp-logos-grid img[src*="camping-world"] { transform: scale(1.55); }
.hp-logos-grid img[src*="nationwide"]    { transform: scale(1.50); }
.hp-logos-grid img[src*="nrg-energy"]    { transform: scale(1.30); }
.hp-logos-grid img[src*="/hp.svg"]       { transform: scale(1.30); }

/* Scale-UP: thin-stroke wordmarks (width-capped, low x-height) */
.hp-logos-grid img[src*="hims"]          { transform: scale(1.30); }
.hp-logos-grid img[src*="vanguard"]      { transform: scale(1.25); }
.hp-logos-grid img[src*="genentech"]     { transform: scale(1.30); }
.hp-logos-grid img[src*="sp-global"]     { transform: scale(1.20); }
.hp-logos-grid img[src*="credit-karma"]  { transform: scale(1.15); }

/* Scale-DOWN: over-wide wordmarks (viewBox aspect > 4:1 dominates row) */
.hp-logos-grid img[src*="activision"]    { transform: scale(0.78); }
.hp-logos-grid img[src*="sc-johnson"]    { transform: scale(0.82); }
.hp-logos-grid img[src*="tmobile"]       { transform: scale(0.90); }
.hp-logos-grid img[src*="kaiser"]        { transform: scale(1.05); }

/* Scale-DOWN: chunky thick-letter wordmarks (over-tall x-height).
   GSK convergence: 1.0 (mass +42% over) → 0.65 (-47% under) → 0.80
   (-15% under, narrowest in row 4) → 0.85 (mass ratio 0.96 vs row 4
   wordmark median 17K, accepts the narrow-aspect intrinsic to a
   3-letter wordmark — width 207 vs row median 287 is structural, not
   correctable without violating GSK letterform integrity). */
.hp-logos-grid img[src*="gsk"]           { transform: scale(0.85); }

/* Scale-DOWN: compact-aspect wordmarks. uber.svg viewBox 2.88:1 is much
   more square than other wordmarks (typically 3-5:1), so its letterforms
   fill more vertical space at the same max-width cap and read taller. */
.hp-logos-grid img[src*="uber"]          { transform: scale(0.85); }

/* Scale-DOWN: subscript adds vertical mass (BLIZZARD ENTERTAINMENT) */
.hp-logos-grid img[src*="blizzard"]      { transform: scale(0.90); }
@media (max-width: 900px) {
  .hp-logos-grid { grid-template-columns: repeat(3, 1fr); }
  .hp-logos-cell {
    padding: clamp(22px, 3vw, 32px) clamp(14px, 2vw, 20px);
    min-height: clamp(80px, 14vw, 104px);
  }
}
@media (max-width: 540px) {
  .hp-logos-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-logos-cell {
    padding: clamp(18px, 4vw, 26px) clamp(10px, 3vw, 16px);
    min-height: clamp(72px, 18vw, 92px);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   FUSED SELECTOR GRID (2026-05-14 iter 12 Ivo).
   Replaces the rail + per-step locking with a flat 3-column grid that shows ALL
   options for Role × Industry × Size simultaneously. Pluralized role pills so
   "Show me what Improvado does for [pill]" reads naturally. Bespoke role-bundle
   cards (in the .hp-role-dash section below) now sit directly under this grid
   with NO intermediate eyebrow / h2 / tailored banner.
   ════════════════════════════════════════════════════════════════════════════ */
/* 2026-05-15 Ivo redesign — the chip rows live INSIDE a subtle-tint card that
   sits a couple shades darker than the page background (#fbfaf8 → #f3f1ec).
   Card fills the section container so its outer width matches the use-case
   cards grid below. Inside: three stacked rows (Role → Industry → Size).
   Each row = small uppercase label on top, chips left-aligned below with
   only the card's inner padding separating them from the card's left edge. */
.hp-selector-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Fills the section container content area — same width as the use-case
     grid below (both inside .hp-container at max-width 1440 with 24px padding). */
  width: 100%;
  margin: 0;
  padding: 22px 24px;
  background: #f3f1ec;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  box-sizing: border-box;
}
.hp-selector-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0;
  text-align: left;
}
.hp-selector-row-label {
  font-family: 'Karla', 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.52);
  text-align: left;
  user-select: none;
  line-height: 1;
}
@media (max-width: 720px) {
  .hp-selector-grid {
    padding: 18px 18px;
    gap: 18px;
  }
  .hp-selector-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }
}

/* Tighten gap below selector → bespoke cards live directly underneath. */
.hp-role-dash {
  padding-top: 0 !important;
  margin-top: 4px;
}

/* Collapse retired progress-rail visual artifacts (kept in CSS for any
   straggler markup; the new fused selector has zero rail elements). */
.hp-rail, .hp-fused-card, .hp-step-done { display: none !important; }

/* 2026-05-15 — gap is owned by the row dividers; no override needed. */

/* 2026-05-15 Ivo redesign: the fused-card overrides below are retained but
   neutralized — the selector no longer has a card frame to fuse with. The
   `.hp-fused-shell` wrapper still exists in the DOM so the role-dash inside
   continues to be "naked" (override block at line ~4243 keeps it transparent). */

.hp-role-dash {
  padding: 0 0 clamp(28px, 4vw, 56px) !important;
}

.hp-role-dash > .hp-container {
  max-width: 1200px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-top: 0;
  border-bottom-left-radius: var(--radius-large);
  border-bottom-right-radius: var(--radius-large);
  padding: 8px 32px 32px;
  margin: 0 auto;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05);
}

/* Dashboard sub-cards keep their own borders but switch to a slightly lighter
   tone so the nested-card hierarchy reads. */
.hp-role-dash-grid { max-width: none; }

/* ════════════════════════════════════════════════════════════════════════════
   ACTUAL FUSED SHELL (2026-05-14 iter 14 Ivo).
   Both `.hp-selector` and `.hp-role-dash` sections live inside ONE wrapper
   `.hp-fused-shell` with the unified card frame. Inner section frames stripped
   so selector pills + dashboard sub-cards read as ONE container body.
   ════════════════════════════════════════════════════════════════════════════ */
/* 2026-05-15 Ivo redesign: shell is now a transparent passthrough — chips +
   role-dash sit directly on the page background. The wrapper element stays so
   the nested-override blocks below (which strip role-dash card chrome) keep
   matching. */
.hp-fused-shell {
  max-width: var(--container-max);
  margin: 0 auto var(--section-py);
}

/* Strip the standalone-card look from BOTH inner sections — they're now panels
   inside the shared shell. */
.hp-fused-shell .hp-selector,
.hp-fused-shell .hp-role-dash {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
/* 2026-05-15 Ivo redesign: legacy `.hp-fused-shell .hp-selector-grid` override
   removed — the selector-grid no longer has card chrome to strip, and the
   new layout owns its own max-width / margin. */

.hp-fused-shell .hp-role-dash > .hp-container {
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 2026-05-15 Ivo redesign: keep the selector's `.hp-container` natural
   24px horizontal padding so the chip rows breathe on narrow viewports. */
/* 2026-05-15 Ivo redesign — title centered above a subtle-tint card that
   wraps the three chip rows. Title-wrap matches the section container width
   so the H2 sits visually above the chip card and the use-case grid below. */
.hp-selector-titlewrap {
  max-width: var(--container-max);
  /* Logos section bottom = 0 (cell padding gives the breath). Top margin here
     owns the WHOLE gap from the last logo cell to the title.
     Bottom uses canonical --title-mb so the title→chips gap matches every
     other section's title→content gap. */
  margin: clamp(24px, 2.4vw, 40px) auto var(--title-mb);
  padding: 0 24px;
}
.hp-selector-titlewrap .hp-selector-header {
  text-align: center;
  margin-bottom: 0;
}
.hp-selector-titlewrap .hp-section-title {
  text-align: center;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: #0f172a;
}
.hp-fused-shell {
  /* Title sits in .hp-selector-titlewrap directly above with its own
     bottom margin. The shell itself should NOT add extra top margin —
     otherwise the title floats with double spacing under it. Section-to-section
     spacing comes from titlewrap.margin-top above and shell.margin-bottom below. */
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Revenue Pareto widget (replaces Geographic distribution 2026-05-14)
   Pure HTML/CSS bars + cumulative % column. Scales to any cell shape.
   ───────────────────────────────────────────────────────────────────────── */
.hp-dash-v2-paretoCard {
  padding: 18px 20px;
  background: #fbfaf8;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  display: flex; flex-direction: column;
}
.hp-dash-v2-pareto {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  justify-content: space-around;
  gap: 6px;
  padding: 6px 0;
}
.hp-dash-v2-pareto-row {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) minmax(0, 2.4fr) 44px 48px;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.hp-dash-v2-pareto-name {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-pareto-bar-track {
  height: 12px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.hp-dash-v2-pareto-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #A78BFA, #A78BFA);
  border-radius: 4px;
  transition: width var(--t-med);
}
.hp-dash-v2-pareto-row.is-vital .hp-dash-v2-pareto-bar-fill {
  background: linear-gradient(90deg, #6D28D9, #A78BFA);
}
.hp-dash-v2-pareto-share {
  font-size: 13px; font-weight: 800;
  color: var(--text-primary);
  text-align: right;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.hp-dash-v2-pareto-row.is-vital .hp-dash-v2-pareto-share {
  color: var(--brand-pink);
}
.hp-dash-v2-pareto-cumul {
  font-size: 10px; font-weight: 700;
  color: var(--text-tertiary);
  text-align: right;
  font-family: inherit;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hp-dash-v2-pareto-foot {
  font-size: 11px; color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 600;
  flex: 0 0 auto;
  line-height: 1.35;
}
.hp-dash-v2-pareto-foot b { color: var(--brand-pink); font-family: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   Efficiency Matrix widget (replaces Pipeline Forecast 2026-05-14)
   SVG plot area + HTML-positioned quadrant labels + per-dot HTML labels so
   text stays crisp at any cell aspect ratio (the old forecast curve had
   text-in-SVG that squished at narrow widths).
   ───────────────────────────────────────────────────────────────────────── */
.hp-dash-v2-matrixCard {
  padding: 18px 20px;
  background: #fbfaf8;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  display: flex; flex-direction: column;
}
.hp-dash-v2-matrix {
  position: relative;
  flex: 1; min-height: 0;
  background: white;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  margin: 6px 0 8px;
  overflow: hidden;
}
.hp-dash-v2-matrix-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hp-dash-v2-matrix-quad {
  position: absolute;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: inherit;
  pointer-events: none;
  /* 2026-05-13: dropped per-quad colors → neutral tertiary, low opacity so the
     quadrant labels read as faint annotations, not as primary content. */
  color: var(--text-tertiary);
  opacity: 0.5;
}
.hp-dash-v2-matrix-quad--tl { left: 10px;  top: 8px;     }
.hp-dash-v2-matrix-quad--tr { right: 10px; top: 8px;     }
.hp-dash-v2-matrix-quad--bl { left: 10px;  bottom: 22px; }
.hp-dash-v2-matrix-quad--br { right: 10px; bottom: 22px; }
.hp-dash-v2-matrix-dot-nums {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hp-dash-v2-matrix-dot-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 9px; font-weight: 800;
  color: white;
  font-family: inherit;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30);
  line-height: 1;
  letter-spacing: 0;
}
/* 2026-05-13: HTML-overlay dots replace SVG <circle> elements. SVG used
   preserveAspectRatio="none", which squashed circles into ellipses in any
   non-square container. HTML divs with fixed pixel size stay circular. */
.hp-dash-v2-matrix-dots {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hp-dash-v2-matrix-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #A78BFA;
  border: 1.2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  opacity: 0.95;
}
.hp-dash-v2-matrix-dot.is-star { background: #6D28D9; }
.hp-dash-v2-matrix-dot.is-dog  { background: #9CA3AF; }
.hp-dash-v2-matrix-legend {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  padding: 0 0 6px;
  flex: 0 0 auto;
}
.hp-dash-v2-matrix-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-secondary);
  font-family: inherit;
}
.hp-dash-v2-matrix-legend-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #A78BFA;
  color: white;
  font-size: 9.5px; font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}
.hp-dash-v2-matrix-legend-item.is-star .hp-dash-v2-matrix-legend-num { background: #6D28D9; }
.hp-dash-v2-matrix-legend-item.is-dog  .hp-dash-v2-matrix-legend-num { background: #9CA3AF; }
.hp-dash-v2-matrix-legend-item.is-star .hp-dash-v2-matrix-legend-name { color: var(--text-primary); }
.hp-dash-v2-matrix-legend-name { white-space: nowrap; }
.hp-dash-v2-matrix-axis {
  position: absolute;
  font-size: 8.5px; font-weight: 800;
  color: var(--text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: inherit;
  pointer-events: none;
}
.hp-dash-v2-matrix-axis--x {
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
}
.hp-dash-v2-matrix-axis--y {
  top: 50%; left: 8px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}
.hp-dash-v2-matrix-foot {
  font-size: 11px; color: var(--text-secondary);
  font-weight: 600;
  flex: 0 0 auto;
  line-height: 1.35;
}
.hp-dash-v2-matrix-foot b { color: var(--brand-pink); font-family: inherit; }

/* Canvas-scoped sizing overrides (mirror the geo/forecast pattern at line ~1960) */
.hp-dash-v2-canvas .hp-dash-v2-pareto { min-height: 0; flex: 1; gap: 4px; padding: 2px 0; }
.hp-dash-v2-canvas .hp-dash-v2-matrix { min-height: 0; flex: 1; margin: 4px 0 6px; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-row { padding: 1px 0; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-foot { font-size: 10px; margin-top: 4px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-foot { font-size: 10px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-dot-num { font-size: 8.5px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-legend { padding: 0 0 4px; gap: 4px 8px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-legend-item { font-size: 9.5px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-legend-num { width: 14px; height: 14px; font-size: 8.5px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-quad { font-size: 8px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix-quad--bl,
.hp-dash-v2-canvas .hp-dash-v2-matrix-quad--br { bottom: 16px; }

/* ═════════════════════════════════════════════════════════════════════════
   2026-05-14 — Widget audit pass (every widget guaranteed visible + readable)
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Strip-meta — hidden (title-only above the strip per Ivo) ── */
.hp-dash-strip-meta { display: none !important; }

/* ── Tile banner — empty left side collapses cleanly, CTA pinned right ── */
.hp-dash-tile-banner-left:empty { padding: 0; min-height: 0; }

/* ── Card hard floor — every card fills its grid cell completely ── */
.hp-dash-v2-cell > .hp-dash-v2-card {
  min-height: 100%;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 14px 16px;
  contain: layout paint;
}
.hp-dash-v2-canvas .hp-dash-v2-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 22px;
}
.hp-dash-v2-canvas .hp-dash-v2-card-meta {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX: Performance-by-Channel bar chart rendered with 0-height bars
   Root cause — canvas override set chart-group-inner { height: auto },
   which broke `height: X%` resolution on the bar spans (% needs a
   definite-height ancestor). Replace with a grid 1fr-row pattern so the
   bars region inherits a definite height from grid, and bars get explicit
   min-height in px as a floor.
   ───────────────────────────────────────────────────────────────────────── */
.hp-dash-v2-canvas .hp-dash-v2-chart-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  /* CRITICAL: override the base rule's align-items: end (which shrinks
     grid items to content height and re-introduces the 0-height bars
     bug). align-items: stretch makes chart-groups fill their row height
     so the inner grid 1fr resolves to a definite pixel value. */
  align-items: stretch;
  gap: 6px 10px;
  padding: 6px 4px 0;
  flex: 1 1 0;
  min-height: 90px;
}
.hp-dash-v2-canvas .hp-dash-v2-chart-group {
  display: grid;
  grid-template-rows: minmax(40px, 1fr) auto;
  gap: 4px;
  min-height: 0;
  align-items: end;
}
.hp-dash-v2-canvas .hp-dash-v2-chart-group-inner {
  height: auto;
  max-height: none;
  min-height: 36px;
  align-self: stretch;
  display: flex; flex-direction: row; align-items: flex-end; justify-content: center;
  gap: 3px;
}
.hp-dash-v2-canvas .hp-dash-v2-chart-bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: 16px;
  min-height: 6px;  /* visible floor even when % resolves tiny */
  border-radius: 3px 3px 0 0;
}
.hp-dash-v2-canvas .hp-dash-v2-chart-glbl {
  font-size: 9.5px; font-weight: 700;
  color: var(--text-secondary);
  margin-top: 2px;
  align-self: end;
}
.hp-dash-v2-canvas .hp-dash-v2-chart-legend {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hp-dash-v2-canvas .hp-dash-v2-legend-item {
  font-size: 9.5px; font-weight: 600;
  color: var(--text-tertiary);
}
/* 2026-05-12 iter 5 (Ivo): compact-mode rules for the new delta chip + summary footer
   so the bespoke benchmark widget stays inside the 95vh canvas budget. */
.hp-dash-v2-canvas .hp-dash-v2-chart-delta {
  font-size: 8.5px;
  padding: 1px 6px;
  margin-top: 2px;
}
.hp-dash-v2-canvas .hp-dash-v2-chart-summary {
  margin-top: 8px;
  padding-top: 6px;
  font-size: 9.5px;
  line-height: 1.35;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX: Audience-mix items too small
   Was — donut capped at 70×70, only 3 of 5 slices in legend at 9px font.
   Now — donut up to 120×120 (or full width-minus-padding, whichever is
   smaller), all 5 slices shown, legend rows ≥11px, dot ≥9px.
   ───────────────────────────────────────────────────────────────────────── */
/* 2026-05-13: switched canvas donut from vertical (donut on top, legend below
   getting cut) to horizontal (donut left, legend right) so all 5 slices fit. */
.hp-dash-v2-canvas .hp-dash-v2-donut {
  display: flex; flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1 1 0; min-height: 0;
  padding-top: 2px;
}
.hp-dash-v2-canvas .hp-dash-v2-donut svg {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  max-width: 110px;
  max-height: 110px;
  min-width: 88px;
  min-height: 88px;
}
.hp-dash-v2-canvas .hp-dash-v2-donut-legend {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
}
.hp-dash-v2-canvas .hp-dash-v2-donut-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
}
.hp-dash-v2-canvas .hp-dash-v2-donut-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.hp-dash-v2-canvas .hp-dash-v2-donut-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-dash-v2-canvas .hp-dash-v2-donut-val {
  font-family: inherit;
  color: var(--brand-pink);
  font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────────
   Min-size audit pass for OTHER widgets — every plot/list area gets a
   readable floor so a future viewport-shrink can't crush them invisible.
   ───────────────────────────────────────────────────────────────────────── */

/* Cohort retention: cell height + row spacing floor */
.hp-dash-v2-canvas .hp-dash-v2-cohort-grid { gap: 3px; flex: 1; min-height: 90px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-row { gap: 3px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-cell { min-height: 9px; height: 9px; border-radius: 2px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-wlbl { font-size: 8.5px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-lbl  { font-size: 9px; }
.hp-dash-v2-canvas .hp-dash-v2-cohort-meta { font-size: 10px; margin-top: 6px; }

/* Activity heatmap: same floor pattern */
.hp-dash-v2-canvas .hp-dash-v2-heatmap { gap: 3px; flex: 1; min-height: 90px; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-row { gap: 3px; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-cell { min-height: 10px; height: 10px; border-radius: 2px; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-lbl { font-size: 9px; }
.hp-dash-v2-canvas .hp-dash-v2-heatmap-axis span { font-size: 9px; }

/* Velocity gauge — fills cell; min square sized */
.hp-dash-v2-canvas .hp-dash-v2-gauge { flex: 1; min-height: 110px; }
.hp-dash-v2-canvas .hp-dash-v2-gauge svg { max-width: 100%; max-height: 100%; min-height: 90px; }

/* A/B winners — readable rows with definite track height */
.hp-dash-v2-canvas .hp-dash-v2-ab { flex: 1; min-height: 0; gap: 6px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-row { padding: 5px 8px; min-height: 32px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-rank { font-size: 9px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-name { font-size: 11px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-bar { height: 6px; }
.hp-dash-v2-canvas .hp-dash-v2-ab-lift { font-size: 11px; }

/* Ranks / Alerts — list rows floor */
.hp-dash-v2-canvas .hp-dash-v2-rank,
.hp-dash-v2-canvas .hp-dash-v2-alert-row { min-height: 30px; padding: 4px 8px; }
.hp-dash-v2-canvas .hp-dash-v2-rank-name { font-size: 11px; }
.hp-dash-v2-canvas .hp-dash-v2-rank-meta { font-size: 9.5px; }

/* Insights — list bullets floor */
.hp-dash-v2-canvas .hp-dash-v2-insights-list { gap: 6px; flex: 1; min-height: 0; }
.hp-dash-v2-canvas .hp-dash-v2-insights-list > * { font-size: 11px; line-height: 1.35; }

/* Pareto / Matrix — bring back the readable-floor pass post-audit */
.hp-dash-v2-canvas .hp-dash-v2-pareto { min-height: 100px; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-row { grid-template-columns: minmax(54px, 1fr) minmax(0, 2fr) 40px 44px; gap: 8px; padding: 1px 0; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-name { font-size: 11px; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-share { font-size: 11.5px; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-cumul { font-size: 9px; }
.hp-dash-v2-canvas .hp-dash-v2-pareto-bar-track { height: 10px; }
.hp-dash-v2-canvas .hp-dash-v2-matrix { min-height: 100px; }

/* ═════════════════════════════════════════════════════════════════════════
   2026-05-14 — Merged Proof + Final CTA (Daniel v6 design ported into v3)
   Replaces the two stacked sections (hp-proof + hp-final) with a single
   `.hp-proof` section: testimonial LEFT, CTA RIGHT (with SOC2/HIPAA/GDPR
   /CCPA cert icons), customer-logo grid full-width below the split. Logos
   render dark on the cream surface via filter: brightness(0).
   ═════════════════════════════════════════════════════════════════════════ */

/* Override the prior 2-col `.hp-proof-split` (testimonial + 6 logos) — now
   testimonial + CTA. Cards align center so the cert strip bottom roughly
   matches the testimonial author line. */
.hp-proof-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hp-proof-testimonial { padding-right: 16px; }

.hp-proof-cta { text-align: left; }
.hp-proof-cta .hp-final-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
  text-align: left;
}
.hp-proof-cta .hp-final-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  /* 2026-05-12 Ivo: force a balanced 2-line wrap on the new short copy.
     max-width caps the paragraph so it can't fit on one line; text-wrap: balance
     lets the browser pick a split point that makes both lines ~equal length. */
  max-width: 46ch;
  text-wrap: balance;
  text-align: left;
}
.hp-proof-cta .hp-final-form,
.hp-proof-cta .hp-hero-form { margin: 0 0 16px; }

/* Compliance certificate strip — SOC 2 Type II / HIPAA / GDPR / CCPA */
.hp-compliance {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.hp-compliance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary, #6b7280);
  font-size: 13px;
  line-height: 1.2;
}
.hp-compliance-item svg {
  flex-shrink: 0;
  color: var(--brand-pink, #6D28D9);
  opacity: 0.9;
}
.hp-compliance-item strong {
  color: var(--text-primary, #0f172a);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Re-position the customer logo grid: now full-width BELOW the split, with
   a "Trusted by industry leaders" eyebrow above. */
.hp-proof-trustby {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b7280);
  margin-bottom: 18px;
}
.hp-proof-logo-grid {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  align-items: center;
  justify-items: center;
}
/* White-on-transparent logos rendered dark on the cream surface */
.hp-proof-logo-grid img,
.hp-proof-company-logo {
  filter: brightness(0) saturate(0);
  opacity: 0.78;
  max-height: 32px;
  width: auto;
  transition: opacity 0.2s ease;
}
.hp-proof-logo-grid img:hover { opacity: 1; }

@media (max-width: 880px) {
  .hp-proof-split { grid-template-columns: 1fr; gap: 32px; }
  .hp-proof-testimonial { padding-right: 0; }
  .hp-proof-logo-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* 2026-05-13 — Bottom CTA: left-aligned testimonial (v2-style left-border
   accent in a LIGHT variant on cream), pill form that mirrors the hero form
   1:1, "1,000+ sources" chip in the compliance row. Replaces the
   2026-05-14 centered-logo-as-anchor experiment, the 2026-05-12 stacked
   button override, and the earlier rating + standalone badge variants. */
.hp-proof-testimonial { text-align: left; }
.hp-proof-testimonial .hp-proof-quote { text-align: left; }
.hp-proof-testimonial .hp-proof-person { justify-content: flex-start; }
.hp-proof-testimonial:hover { border-left-color: rgba(109, 40, 217, 0.50); }

/* Bottom form — pill container that mirrors hero `.form` (hero-v4.css L246+)
   but uses GLOBAL light-theme tokens so it works outside `.warm-hero-host`. */
.hp-proof-form-wrap {
  max-width: 480px;
  margin: 0 0 28px;
}
.hp-proof-cta .form {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  padding: 5px 5px 5px 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -12px rgba(15, 23, 42, 0.08);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hp-proof-cta .form:focus-within {
  border-color: #5B21B6;
  box-shadow:
    0 0 0 4px rgba(109, 40, 217, 0.12),
    0 8px 24px -8px rgba(91, 33, 182, 0.22);
}
.hp-proof-cta .form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 20px;
  font: inherit;
  font-size: 15px;
  color: var(--text-primary);
}
.hp-proof-cta .form input[type="email"]::placeholder { color: var(--text-tertiary); }
.hp-proof-cta .form-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  background: #5B21B6;
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 6px 16px -6px rgba(15, 23, 42, 0.55);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.hp-proof-cta .form-btn:hover {
  background: #6D28D9;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px -6px rgba(15, 23, 42, 0.55);
}
.hp-proof-cta .form-btn .arrow { transition: transform var(--t-fast); }
.hp-proof-cta .form-btn:hover .arrow { transform: translateX(2px); }

/* Mobile: stack form */
@media (max-width: 640px) {
  .hp-proof-cta .form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
  }
  .hp-proof-cta .form-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile: tighten testimonial */
@media (max-width: 880px) {
  .hp-proof-testimonial { padding-left: 18px; }
  .hp-proof-avatar { width: 46px; height: 46px; }
  .hp-proof-quote { font-size: clamp(17px, 4.5vw, 20px); }
}

/* ═════════════════════════════════════════════════════════════════════════
   2026-05-14 — Use Cases 4×4 bespoke grid (Daniel v6 TAILORED_CASES port)
   Replaces the legacy horizontal scroller (.hp-cases-scroller + arrow nav).
   16 cards = 5 role-tailored + 5 industry-tailored + 5 segment-tailored + 1
   combo wildcard. Axis chip on each card so the user reads which choice
   drove that play.
   ═════════════════════════════════════════════════════════════════════════ */
.hp-uc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 64px;
}
@media (max-width: 1100px) { .hp-uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .hp-uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .hp-uc-grid { grid-template-columns: 1fr; } }

/* Premium monochrome treatment — pure white surfaces, light gray hairlines,
   dark charcoal text. No colored accent stripes, no shadows, no transforms.
   Hover only darkens the hairline. Two variants break the calm:
     --featured : the 4th role play (round 3, grid position 10) — same palette
                  but a heavier hairline + faint warm fill so the eye notices it.
     --combo    : the 16th wildcard — sole color inversion (charcoal on white)
                  to anchor the section's reading order. */
.hp-uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  min-height: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.hp-uc-card:hover {
  border-color: rgba(15, 23, 42, 0.18);
  background: #fbfaf7;
}
.hp-uc-card:hover .hp-uc-icon {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

/* Icon graphic — small inline SVG inside a subtle rounded plate.
   Each axis has its own elegant pastel tone (indigo / amber / emerald);
   the headline stays charcoal so the section reads calm overall. */
.hp-uc-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f5f4f0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #0f172a;
  flex-shrink: 0;
  align-self: flex-start;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.hp-uc-svg {
  width: 20px;
  height: 20px;
  display: block;
}

.hp-uc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}

/* Label — readable at a glance, axis-tinted for soft color distinction. */
.hp-uc-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.72);
}

/* ── Per-axis pastel accents ─────────────────────────────────────────────
   Only the icon plate + tag label pick up the color; the card background,
   border, and headline stay neutral so 16 cards never feel like a circus. */

/* Role — refined indigo */
.hp-uc-card--role .hp-uc-icon {
  background: #eef1fa;
  border-color: rgba(67, 56, 202, 0.14);
  color: #4338ca;
}
.hp-uc-card--role .hp-uc-tag { color: #3730a3; }

/* Industry — warm amber / clay */
.hp-uc-card--industry .hp-uc-icon {
  background: #f8efe1;
  border-color: rgba(161, 98, 7, 0.16);
  color: #a16207;
}
.hp-uc-card--industry .hp-uc-tag { color: #854d0e; }

/* Segment — soft emerald / sage */
.hp-uc-card--segment .hp-uc-icon {
  background: #e9f2ec;
  border-color: rgba(21, 128, 61, 0.16);
  color: #15803d;
}
.hp-uc-card--segment .hp-uc-tag { color: #166534; }

.hp-uc-headline {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.008em;
}

/* CTA tile (16th card). Renders as <a href="#final-cta">.
   Brand-violet background, white text, inline arrow at bottom-right. */
.hp-uc-card--combo {
  background: #6D28D9;
  border: 1px solid #6D28D9;
  cursor: pointer;
  padding-bottom: 56px;
}
.hp-uc-card--combo:hover {
  background: #5b1fb8;
  border-color: #5b1fb8;
  transform: translateY(-1px);
}
.hp-uc-card--combo .hp-uc-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.hp-uc-card--combo:hover .hp-uc-icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}
.hp-uc-card--combo .hp-uc-tag      { color: rgba(255, 255, 255, 0.78); }
.hp-uc-card--combo .hp-uc-headline { color: #ffffff; }
.hp-uc-cta-arrow {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: #6D28D9;
  transition: transform 0.18s ease;
}
.hp-uc-cta-arrow .hp-uc-svg {
  width: 18px;
  height: 18px;
}
.hp-uc-card--combo:hover .hp-uc-cta-arrow {
  transform: translateX(3px);
}
.hp-uc-card--combo:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ═════════════════════════════════════════════════════════════════════════
   2026-05-14 — Axis dropdowns (replace pill groups, ported from Daniel v6).
   3-column grid: Role / Industry / Size. Each column = label + dropdown
   trigger button + popover option list. "All …" option clears the axis.
   ═════════════════════════════════════════════════════════════════════════ */
.hp-axis-dd {
  position: relative;
  flex-shrink: 0;
}
.hp-axis-dd-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border-card, rgba(15, 23, 42, 0.08));
  color: var(--text-primary, #0f172a);
  padding: 10px 14px;
  border-radius: var(--radius-card, 10px);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hp-axis-dd-btn:hover {
  background: var(--bg-card-hover, #f8f5f0);
  border-color: var(--border-strong, rgba(15, 23, 42, 0.16));
}
.hp-axis-dd.is-open > .hp-axis-dd-btn {
  border-color: var(--brand-pink, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}
.hp-axis-dd-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-axis-dd-chev {
  flex-shrink: 0;
  color: var(--text-tertiary, #6b7280);
  transition: transform 0.18s ease;
}
.hp-axis-dd.is-open > .hp-axis-dd-btn .hp-axis-dd-chev { transform: rotate(180deg); }

.hp-axis-dd-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border-card, rgba(15, 23, 42, 0.08));
  border-radius: var(--radius-card, 10px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
  padding: 6px;
  display: none;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
}
.hp-axis-dd.is-open > .hp-axis-dd-menu { display: block; }
.hp-axis-dd-option {
  width: 100%;
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary, #4b5563);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hp-axis-dd-option:hover {
  background: var(--bg-card-hover, #f8f5f0);
  color: var(--text-primary, #0f172a);
}
.hp-axis-dd-option.is-active {
  background: var(--brand-pink, #6D28D9);
  color: #ffffff;
  font-weight: 700;
}
.hp-axis-dd-option.is-active:hover {
  background: var(--brand-pink, #6D28D9);
  color: #ffffff;
}

/* ═════════════════════════════════════════════════════════════════════════
   .hp-axis-dd--chips (2026-05-13 Ivo) — flat chip-grid variant. Replaces
   the popover dropdown with all options visible up front. Three columns
   share a uniform 3-row vertical footprint:
   • --chips-1col (Role + Size, 3 options each): one column × three rows
   • --chips-3col (Industry, 9 options):         three columns × three rows
   The .hp-axis-dd-option styles above defaulted the chip to a left-aligned
   menu row inside a popover; here we redefine them as standalone center-
   aligned tiles. The JS hooks (.hp-axis-dd[data-axis] + .hp-axis-dd-option)
   are unchanged — only DOM shape + CSS swap.
   ═════════════════════════════════════════════════════════════════════════ */
/* 2026-05-15 Ivo redesign: pill chip — soft hairline by default, brand violet
   when active. Tight 14px tap padding for desktop reading; min-height 38px
   keeps touch targets accessible. Hover lifts the border into the brand color
   without filling the chip, so the rest sits with quiet authority. */
.hp-axis-dd.hp-axis-dd--chips {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.hp-axis-dd--chips .hp-axis-dd-option {
  /* Resets to neutralize the base `.hp-axis-dd-option` menu-row defaults
     (width: 100%; display: block; text-align: left) so each chip sits as
     a content-sized inline-flex pill inside the wrap container. */
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.hp-axis-dd--chips .hp-axis-dd-option:hover {
  background: #faf8ff;
  border-color: rgba(109, 40, 217, 0.45);
  color: var(--brand-pink, #6D28D9);
}
.hp-axis-dd--chips .hp-axis-dd-option:active {
  transform: translateY(0.5px);
}
.hp-axis-dd--chips .hp-axis-dd-option.is-active {
  background: var(--brand-pink, #6D28D9);
  border-color: var(--brand-pink, #6D28D9);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(109, 40, 217, 0.28), 0 0 0 4px rgba(109, 40, 217, 0.08);
}
.hp-axis-dd--chips .hp-axis-dd-option.is-active:hover {
  background: #5b1fb8;
  border-color: #5b1fb8;
  color: #ffffff;
}
.hp-axis-dd--chips .hp-axis-dd-option:focus-visible {
  outline: 2px solid var(--brand-pink, #6D28D9);
  outline-offset: 2px;
}

/* Defensive: pill UI no longer ships in HTML, but a cached browser tab with
   stale markup must still hide it cleanly while the dropdowns render. */
.hp-pill-group { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT ACTUALLY WORKS (2026-05-13 iter 16, Ivo×Nick)
   Three premium step cards (Connect → Unify → Decide) with each move's proof
   number embedded as the card footer; below them, the connector wall is
   restructured into 3 stacked rows of 48×48 platform tiles with opposing
   horizontal drift (rows 1 & 3 right, row 2 left) and a soft ~1.18× center
   magnify. Caption "Pulls from 1,247 platforms and counting" sits above the
   grid. The standalone facts pill row is gone — facts live in cards now.
   ═══════════════════════════════════════════════════════════════════════════ */
.hp-howit {
  padding: var(--section-py) 0;
  background:
    radial-gradient(ellipse 70% 38% at 50% 22%, rgba(109, 40, 217, 0.045), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  position: relative;
  overflow: hidden;
}
.hp-howit-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--title-mb);
}
.hp-howit-head .hp-section-title {
  margin-bottom: 18px;
  /* Balance line lengths so the last word doesn't orphan on its own line. */
  text-wrap: balance;
}
.hp-howit-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 680px;
  font-weight: 400;
}

/* ── The three moves — premium cards with embedded proof numbers ─────── */
.hp-howit-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.4vw, 22px);
  list-style: none;
  padding: 0;
  margin: clamp(32px, 3vw, 48px) auto clamp(56px, 5vw, 80px);
  max-width: 1180px;
}
@media (max-width: 900px) {
  .hp-howit-steps { grid-template-columns: 1fr; }
}
.hp-howit-step {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  padding: clamp(24px, 2vw, 32px);
  position: relative;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px rgba(15, 23, 42, 0.04);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.hp-howit-step:hover {
  transform: translateY(-4px);
  border-color: rgba(109, 40, 217, 0.22);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 24px 56px rgba(109, 40, 217, 0.10),
    0 8px 18px rgba(15, 23, 42, 0.06);
}
.hp-howit-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.hp-howit-step-num {
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  line-height: 1;
}
.hp-howit-step-tag {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1;
}
.hp-howit-step-title {
  font-size: clamp(20px, 1.55vw, 24px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 12px;
  line-height: 1.25;
  max-width: 22ch;
}
.hp-howit-step-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}
/* Footer wrapper: pushes the rule + proof number to the card's bottom so
   the numbers line up across the row, and supplies symmetrical breathing
   room above the hairline divider (padding-top) and below it (via the
   fact's padding-top) — without it, short descriptions left the divider
   sitting right against the body text. */
.hp-howit-step-footer {
  margin-top: auto;
  padding-top: clamp(24px, 2vw, 30px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.hp-howit-step-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: clamp(16px, 1.4vw, 20px);
}
.hp-howit-step-fact-num {
  font-size: clamp(32px, 2.7vw, 40px);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hp-howit-step-fact-num--accent {
  background: linear-gradient(95deg, var(--brand-pink) 0%, #8b5cf6 55%, #6d28d9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hp-howit-step-fact-lbl {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
  line-height: 1.35;
}

/* ── The lens: connector wall — 3 stacked rows, soft center magnify ─── */
.hp-howit-wall {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}
.hp-howit-wall-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--text-tertiary);
  font-weight: 500;
  text-align: center;
}
.hp-howit-wall-meta strong {
  color: var(--text-primary);
  font-weight: 700;
}
.hp-howit-wall-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-pink);
  box-shadow: 0 0 0 0 rgba(255, 49, 134, 0.45);
  animation: hp-howit-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  flex: 0 0 auto;
}
@keyframes hp-howit-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 49, 134, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 49, 134, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(255, 49, 134, 0);    }
}
.hp-howit-wall-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Clip the translateX-driven tracks so they don't bleed past the wall edges. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  padding: 4px 0;
}
.hp-howit-track {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Padding kept vertical only — the marquee is driven by translateX in JS,
     not by scrollLeft, so no horizontal padding is needed and the row stays
     ungrabbable / unreactive to page wheel events. */
  padding: 8px 0;
  /* Tracks are not interactive — JS animates transform: translateX. */
  pointer-events: none;
  will-change: transform;
  /* Promote to its own layer so the translate stays smooth at 60fps. */
  transform: translate3d(0, 0, 0);
}
.hp-howit-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 11px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.02),
    0 6px 16px rgba(15, 23, 42, 0.04);
  will-change: transform, opacity;
  transform-origin: center center;
  user-select: none;
}
.hp-howit-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.hp-howit-logo.is-focal {
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04);
}

/* ── Reduced-motion: kill auto-scroll + transform transitions ──────── */
@media (prefers-reduced-motion: reduce) {
  .hp-howit-logo { transition: none; }
  .hp-howit-step { transition: none; }
  .hp-howit-wall-pulse { animation: none; }
}

/* ─── MOBILE RESPONSIVE OVERRIDES (Homepage v7) ─────────────────────────
   Two mobile-only breakpoints layered on top of the existing cascade:
     - max-width: 720px → dashboard tile drops 95vh viewport-height trap
     - max-width: 480px → tap targets ≥44px, iOS-zoom-proof inputs, refined
       padding for small phones (320–414px)
   Plus a (hover: none) block neutralizing sticky :hover bg on touch devices.
   Desktop (≥1120px) styles are untouched. */

@media (max-width: 720px) {
  .hp-dash-tile--v2 {
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .hp-dash-strip { gap: 24px; }
  .hp-dash-tile-banner { padding: 12px 16px; }
  .hp-dash-tile-title { font-size: 15px; white-space: normal; }
}

/* Hamburger button: 44×44 wherever it's visible (mobile-menu mode, ≤960px).
   The existing base style at L352 is 36×36 — that's borderline for touch.
   This override fires across all widths where the hamburger is rendered. */
@media (max-width: 960px) {
  .hp-nav-hamburger {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  /* Header tap targets — nav links, login, CTA buttons */
  .hp-header-link,
  .hp-header-login {
    padding: 12px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .hp-btn { padding: 14px 22px; min-height: 48px; }
  .hp-btn--nav { padding: 12px 18px; font-size: 14px; min-height: 44px; }

  /* Segmentation chips (Role × Industry × Segment) — the live selector is
     .hp-axis-dd--chips .hp-axis-dd-option. Base style is padding 9/18 +
     min-height 38px — bump to 44px for touch. */
  .hp-axis-dd--chips .hp-axis-dd-option {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 13.5px;
  }
  .hp-selector-grid { padding: 16px 14px; gap: 16px; }
  .hp-selector-row { gap: 6px; }
  .hp-selector-row-label { font-size: 10.5px; letter-spacing: 0.14em; }

  /* Dashboard tile small-phone refinements */
  .hp-dash-tile--v2 { border-radius: 14px; }
  .hp-dash-tile-banner { padding: 10px 12px; gap: 8px; }
  .hp-dash-tile-title { font-size: 14px; line-height: 1.25; }
  .hp-dash-tile-cta { font-size: 10px; padding: 5px 10px; }

  /* Note: hero and final-CTA forms both use class="form" + button.form-btn,
     covered by hero-v4.css mobile rules. */
}

/* Touch devices: collapse sticky-hover bg on the worst offenders.
   Desktop hover effects untouched. Selected-chip state preserved. */
@media (hover: none) {
  .hp-header-link:hover,
  .hp-header-login:hover,
  .hp-nav-dropdown-link:hover,
  .hp-axis-dd--chips .hp-axis-dd-option:hover {
    background: initial;
    color: inherit;
    transform: none;
  }
  .hp-axis-dd--chips .hp-axis-dd-option.is-active:hover {
    background: var(--brand-pink, #6D28D9);
    border-color: var(--brand-pink, #6D28D9);
    color: #fff;
  }
}