/* ===========================================================
   Prizeflow homepage — dark canvas, fintech-serious
   Built on Prizeflow tokens; dark-tuned overrides only.
   =========================================================== */

:root {
  /* Light canvas tuning — ona-style: warm off-white "clay", white cards */
  --hp-canvas:       #F4F2F9;     /* the clay (clay-50) */
  --hp-canvas-2:     #ECE8F2;     /* slight gradient stop */
  --hp-surface:      #FFFFFF;     /* raised card */
  --hp-surface-2:    #FBFAFE;     /* elevated highlight */
  --hp-surface-3:    #F4F2F9;     /* hover */
  --hp-inset:        #ECE8F2;

  --hp-fg-1:         #101935;     /* ink - primary */
  --hp-fg-2:         #4D475D;     /* clay-700 secondary */
  --hp-fg-3:         #6B6380;     /* clay-500 tertiary */
  --hp-fg-4:         #938AA6;     /* clay-400 muted */

  --hp-purple:       #564787;
  --hp-purple-light: #806AAA;
  --hp-purple-200:   #A594C7;     /* bright — for gradients / on-color / on-photo */
  --hp-purple-glow:  rgba(86,71,135,0.18);
  --hp-teal:         #9AD4D6;     /* bright — for gradients / avatars / glows */
  --hp-teal-deep:    #4BA5A8;
  --hp-lilac:        #DBCBD8;     /* bright — for gradients / avatars */
  --hp-mist:         #101935;     /* "strong text" now resolves to ink on light */

  /* Ink-strength accent variants — readable as TEXT on the light canvas */
  --hp-teal-ink:     #2D6A6C;
  --hp-lilac-ink:    #8E6E8B;
  --hp-purple-ink:   #5B4A82;

  --hp-border:       rgba(86,71,135,0.10);
  --hp-border-2:     rgba(86,71,135,0.18);

  /* Light neu shadows — soft pillow */
  --hp-shadow-md:
      -6px -6px 16px rgba(255,255,255,0.9),
      8px 8px 20px rgba(86,71,135,0.12);
  --hp-shadow-lg:
      -10px -10px 28px rgba(255,255,255,0.92),
      16px 16px 40px rgba(86,71,135,0.16);
  --hp-shadow-inset:
      inset 2px 2px 5px rgba(86,71,135,0.12),
      inset -2px -2px 5px rgba(255,255,255,0.9);
  --hp-shadow-cta:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 12px 28px -6px rgba(86,71,135,0.45),
      0 2px 4px rgba(86,71,135,0.15);
  --hp-shadow-cta-hover:
      0 1px 0 rgba(255,255,255,0.3) inset,
      0 18px 36px -6px rgba(86,71,135,0.55),
      0 2px 6px rgba(86,71,135,0.2);

  --hp-radius-sm: 10px;
  --hp-radius-md: 14px;
  --hp-radius-lg: 20px;
  --hp-radius-xl: 28px;
  --hp-radius-2xl: 36px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--hp-canvas);
  color: var(--hp-fg-1);
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Decorative canvas wash */
.hp-canvas-wash {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(86,71,135,0.18), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(154,212,214,0.07), transparent 65%),
    radial-gradient(1200px 800px at 50% 100%, rgba(86,71,135,0.10), transparent 70%);
}

.hp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.hp-wrap-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }
.hp-rel { position: relative; z-index: 1; }

/* ─────────────── Nav ─────────────── */
.hp-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(14,21,48,0.65);
  border-bottom: 1px solid rgba(196,185,219,0.06);
}
.hp-nav-inner {
  display: flex; align-items: center; gap: 32px;
  padding: 16px 0;
}
.hp-logo { display: flex; align-items: center; gap: 10px; }
.hp-logo img { height: 24px; display: block; }
.hp-logo .v {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hp-fg-3); padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--hp-border-2);
}
.hp-nav-links {
  display: flex; align-items: center; gap: 28px; flex: 1;
}
.hp-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--hp-fg-2);
  transition: color 160ms;
  white-space: nowrap;
}
.hp-nav-links a:hover { color: var(--hp-fg-1); }
.hp-nav-cta {
  display: flex; align-items: center; gap: 10px;
}
.hp-btn-ghost {
  padding: 10px 16px; border-radius: 12px; border: none;
  background: transparent; color: var(--hp-fg-2);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 160ms;
}
.hp-btn-ghost:hover { color: var(--hp-fg-1); background: rgba(196,185,219,0.05); }
.hp-btn-primary {
  padding: 10px 18px; border-radius: 12px; border: none;
  background: var(--hp-mist); color: #0E1530;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 160ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.hp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(255,255,255,0.22); }
.hp-btn-primary.purple {
  background: var(--hp-purple-light); color: var(--hp-mist);
  box-shadow: var(--hp-shadow-cta);
}
.hp-btn-primary.purple:hover { box-shadow: var(--hp-shadow-cta-hover); }
.hp-btn-secondary {
  padding: 12px 20px; border-radius: 12px; border: none;
  background: var(--hp-surface); color: var(--hp-fg-1);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: var(--hp-shadow-md);
  transition: all 160ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.hp-btn-secondary:hover { background: var(--hp-surface-2); transform: translateY(-1px); }

/* ─────────────── Hero ─────────────── */
.hp-hero {
  padding: 80px 0 60px;
  text-align: center;
}
.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--hp-fg-2);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(154,212,214,0.08);
  border: 1px solid rgba(154,212,214,0.18);
  margin-bottom: 28px;
}
.hp-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--hp-teal);
  box-shadow: 0 0 10px var(--hp-teal);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.hp-h1 {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0 0 24px;
  max-width: 18ch;
  margin-inline: auto;
}
.hp-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--hp-lilac), var(--hp-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-lede {
  font-size: 19px; line-height: 1.55; color: var(--hp-fg-2);
  max-width: 56ch; margin: 0 auto 36px;
}
.hp-hero-ctas {
  display: inline-flex; gap: 12px;
  margin-bottom: 64px;
}

/* Hero visual */
.hp-hero-visual {
  position: relative; max-width: 1100px; margin: 0 auto;
  aspect-ratio: 16/10;
  border-radius: var(--hp-radius-2xl);
  background:
    radial-gradient(600px 400px at 30% 30%, rgba(86,71,135,0.20), transparent 60%),
    radial-gradient(500px 350px at 80% 70%, rgba(154,212,214,0.12), transparent 60%),
    linear-gradient(160deg, rgba(86,71,135,0.10), rgba(20,28,58,0.6));
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(196,185,219,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  padding: 36px;
}
.hp-hero-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.04), transparent 50%);
  pointer-events: none;
}

/* Desktop dashboard mock (back layer) */
.hp-dash {
  position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
  width: 64%; aspect-ratio: 16/10;
  background: linear-gradient(150deg, #1A2348, #131B3A);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.6),
    0 0 0 1px rgba(196,185,219,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hp-dash-bar {
  height: 32px; padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(196,185,219,0.06);
  background: rgba(0,0,0,0.18);
}
.hp-dash-bar .dot { width: 9px; height: 9px; border-radius: 999px; }
.hp-dash-bar .dot.r { background: #C64A5B; }
.hp-dash-bar .dot.y { background: #C88A2E; }
.hp-dash-bar .dot.g { background: #4BA5A8; }
.hp-dash-bar .url {
  flex: 1; padding: 5px 12px; margin-left: 14px;
  background: rgba(0,0,0,0.25); border-radius: 6px;
  font-size: 11px; color: var(--hp-fg-3); font-family: ui-monospace, monospace;
}
.hp-dash-body {
  display: grid; grid-template-columns: 160px 1fr;
  flex: 1; min-height: 0;
}
.hp-dash-rail {
  border-right: 1px solid rgba(196,185,219,0.06);
  padding: 16px 12px;
  background: rgba(0,0,0,0.15);
}
.hp-dash-rail .item {
  font-size: 11px; color: var(--hp-fg-3); padding: 7px 10px; border-radius: 7px;
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.hp-dash-rail .item.on { background: rgba(154,212,214,0.10); color: var(--hp-teal); }
.hp-dash-main { padding: 20px; min-width: 0; }
.hp-dash-main h4 {
  font-size: 18px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.012em;
}
.hp-dash-main .sub { font-size: 11px; color: var(--hp-fg-3); margin-bottom: 16px; }
.hp-dash-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; margin-bottom: 16px;
}
.hp-dash-stat {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(196,185,219,0.05);
}
.hp-dash-stat .l { font-size: 9.5px; color: var(--hp-fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.hp-dash-stat .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.014em; margin-top: 3px; }
.hp-dash-stat .v.teal { color: var(--hp-teal); }
.hp-dash-stat .v.purple { color: var(--hp-purple-200); }
.hp-dash-queue { display: flex; flex-direction: column; gap: 5px; }
.hp-dash-row {
  display: grid; grid-template-columns: 22px 1fr 44px 110px 70px;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.22);
  font-size: 11px;
  position: relative;
}
.hp-dash-row.live {
  background: linear-gradient(90deg, rgba(154,212,214,0.16), rgba(154,212,214,0.04));
  box-shadow: 0 0 0 1px rgba(154,212,214,0.25);
}
.hp-dash-row .av {
  width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--hp-purple-light), var(--hp-purple));
  color: #fff; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hp-dash-row .av.t { background: linear-gradient(135deg, var(--hp-teal), var(--hp-teal-deep)); color: #0E1530; }
.hp-dash-row .av.l { background: linear-gradient(135deg, var(--hp-lilac), #B89DB3); color: #0E1530; }
.hp-dash-row .name { color: var(--hp-fg-1); font-weight: 500; }
.hp-dash-row .meta { color: var(--hp-fg-3); font-size: 10px; }
.hp-dash-row .pill {
  font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.hp-dash-row .pill.ready { background: rgba(154,212,214,0.18); color: var(--hp-teal); }
.hp-dash-row .pill.pending { background: rgba(128,106,170,0.20); color: var(--hp-purple-200); }
.hp-dash-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hp-fg-1); text-align: right; }

/* Phone overlay */
.hp-phone {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  width: 240px; aspect-ratio: 9/19;
  background: var(--hp-canvas);
  border-radius: 32px;
  box-shadow:
    0 40px 80px -16px rgba(0,0,0,0.7),
    0 0 0 8px #0B112A,
    0 0 0 9px rgba(196,185,219,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  padding: 12px;
  z-index: 2;
}
.hp-phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 18px; background: #0B112A; border-radius: 999px; z-index: 3;
}
.hp-phone-screen {
  height: 100%; padding-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.hp-phone-hero {
  padding: 14px; border-radius: 16px;
  background: linear-gradient(145deg, var(--hp-purple), #3A2E5B);
  position: relative; overflow: hidden;
}
.hp-phone-hero::before {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(154,212,214,0.25), transparent 60%);
}
.hp-phone-hero .l { font-size: 9px; color: rgba(255,255,255,0.65); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.hp-phone-hero .v { font-size: 28px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.018em; margin-top: 4px; line-height: 1; }
.hp-phone-hero .v .c { font-size: 16px; color: rgba(255,255,255,0.6); }
.hp-phone-hero .sub { font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 6px; }
.hp-phone-tile {
  padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,185,219,0.07);
  display: flex; align-items: center; gap: 10px;
}
.hp-phone-tile .ico {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.hp-phone-tile .ico.t { background: rgba(154,212,214,0.18); color: var(--hp-teal); }
.hp-phone-tile .ico.p { background: rgba(128,106,170,0.20); color: var(--hp-purple-200); }
.hp-phone-tile .t1 { font-size: 11px; color: var(--hp-fg-1); font-weight: 600; }
.hp-phone-tile .t2 { font-size: 9px; color: var(--hp-fg-3); margin-top: 1px; }
.hp-phone-tile .amt { font-size: 12px; font-weight: 600; color: var(--hp-fg-1); margin-left: auto; font-variant-numeric: tabular-nums; }
.hp-phone-tile .amt.t { color: var(--hp-teal); }

/* Money in flight — animated dotted arc between dash and phone */
.hp-flight {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hp-flight svg { width: 100%; height: 100%; }
.hp-flight .path { stroke: var(--hp-teal); stroke-width: 2; fill: none; stroke-dasharray: 3 6; opacity: 0.5; }
.hp-flight .pulse {
  fill: var(--hp-teal);
  filter: drop-shadow(0 0 8px var(--hp-teal));
}

/* ─────────────── Logo bar ─────────────── */
.hp-logos {
  padding: 60px 0 40px;
  text-align: center;
}
.hp-logos .label {
  font-size: 11px; font-weight: 600; color: var(--hp-fg-3);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 28px;
}
.hp-logos-row {
  display: flex; align-items: center; justify-content: center;
  gap: 64px; flex-wrap: wrap;
  padding: 0 8px;
}
.hp-partner-logo {
  height: 36px;
  width: auto; max-width: 170px;
  object-fit: contain;
  /* Logos are pure black-on-transparent — invert to cool grey */
  filter: invert(0.62) sepia(0.35) hue-rotate(195deg) saturate(0.5) brightness(1.15);
  opacity: 0.82;
  transition: opacity 200ms, filter 200ms;
}
.hp-partner-logo:hover {
  opacity: 1;
  filter: invert(0.85) sepia(0.2) hue-rotate(195deg) saturate(0.4) brightness(1.2);
}
.hp-partner-logo.tall { height: 44px; }
.hp-partner-logo.wide { height: 30px; max-width: 210px; }
.hp-partner-logo.xl { height: 50px; max-width: 230px; }

/* ─────────────── Section header ─────────────── */
.hp-section { padding: 100px 0; position: relative; z-index: 1; }
.hp-section-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--hp-teal);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 16px;
}
.hp-section h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 18px; max-width: 22ch;
}
.hp-section .section-sub {
  font-size: 18px; line-height: 1.55; color: var(--hp-fg-2);
  max-width: 56ch;
}

/* ─────────────── 4 roles ─────────────── */
.hp-roles-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 56px;
}
.hp-role {
  position: relative; overflow: hidden;
  border-radius: var(--hp-radius-xl);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  min-height: 400px;
  border: 1px solid var(--hp-border);
  transition: all 240ms cubic-bezier(0.2,0.7,0.2,1);
  cursor: pointer;
}
.hp-role:hover { transform: translateY(-4px); border-color: var(--hp-border-2); }
.hp-role .pattern {
  position: absolute; inset: 0; opacity: 0.22;
}
.hp-role .pattern::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.78) 100%);
}
.hp-role .pattern svg { width: 100%; height: 100%; }
.hp-role .role-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(0,0,0,0.32);
  color: rgba(255,255,255,0.92);
  align-self: flex-start;
  position: relative; z-index: 1;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
}
.hp-role .role-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.hp-role .body {
  position: relative; z-index: 1;
  margin-top: auto;
  display: flex; flex-direction: column;
}
.hp-role h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.014em;
  margin: 0 0 6px; color: #fff;
  /* Consistent baseline across cards */
  min-height: 28px;
}
.hp-role .role-who {
  font-size: 12.5px; color: rgba(255,255,255,0.82);
  line-height: 1.5;
  min-height: 3em;
}
.hp-role .role-tasks {
  margin: 14px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-direction: column; gap: 7px;
}
.hp-role .role-tasks li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.92);
  list-style: none;
  text-align: left;
}
.hp-role .role-tasks li::before {
  content: '';
  width: 4px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.hp-role .role-open {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #fff;
  align-self: flex-start;
}
.hp-role .role-open .arrow { transition: transform 200ms; }
.hp-role:hover .role-open .arrow { transform: translateX(3px); }

/* role color schemes — slightly deeper to ensure text contrast */
.hp-role.purple {
  background: linear-gradient(165deg, #463972, #1F1834);
}
.hp-role.teal {
  background: linear-gradient(165deg, #3D8B8E, #1F4A4C);
}
.hp-role.lilac {
  background: linear-gradient(165deg, #6B5994, #3A2E5B);
}
.hp-role.ink {
  background: linear-gradient(165deg, #182040, #07091B);
  border-color: rgba(196,185,219,0.18);
}

/* ─────────────── Use case sections ─────────────── */
.hp-usecase {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  margin-top: 60px;
}
.hp-usecase.flip { grid-template-columns: 1fr 1fr; }
.hp-usecase.flip .uc-copy { order: 2; }
.hp-usecase.flip .uc-visual { order: 1; }
.hp-usecase .uc-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--hp-teal);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 14px;
}
.hp-usecase h3 {
  font-size: 36px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.1; margin: 0 0 20px;
}
.hp-usecase p {
  font-size: 16.5px; line-height: 1.6; color: var(--hp-fg-2);
  margin: 0 0 24px;
}
.hp-usecase .uc-bullets {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 28px; padding: 0; list-style: none;
}
.hp-usecase .uc-bullets li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--hp-fg-1);
  line-height: 1.5;
}
.hp-usecase .uc-bullets li > span:not(.check) { flex: 1; min-width: 0; }
.hp-usecase .uc-bullets li .check {
  width: 22px; height: 22px; border-radius: 7px;
  background: rgba(154,212,214,0.15); color: var(--hp-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hp-usecase .uc-bullets li b { color: var(--hp-fg-1); font-weight: 600; }
.hp-usecase a.uc-learn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--hp-teal);
}
.hp-usecase a.uc-learn:hover { color: var(--hp-mist); }

/* Use case visual frame */
.uc-visual {
  border-radius: var(--hp-radius-2xl);
  padding: 28px;
  position: relative; overflow: hidden;
  min-height: 380px;
  border: 1px solid var(--hp-border);
}
.uc-visual.calc {
  background: linear-gradient(160deg, rgba(86,71,135,0.18), rgba(11,17,42,0.4));
}
.uc-visual.sepa {
  background: linear-gradient(160deg, rgba(154,212,214,0.14), rgba(11,17,42,0.4));
}
.uc-visual.official {
  background: linear-gradient(160deg, rgba(219,203,216,0.14), rgba(11,17,42,0.4));
}
.uc-visual.player {
  background: linear-gradient(160deg, rgba(75,165,168,0.16), rgba(11,17,42,0.4));
}

/* Calc card */
.uc-calc-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border-2);
  border-radius: var(--hp-radius-xl);
  padding: 22px; box-shadow: var(--hp-shadow-lg);
}
.uc-calc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--hp-border);
  margin-bottom: 16px;
}
.uc-calc-head .player {
  display: flex; align-items: center; gap: 10px;
}
.uc-calc-head .av {
  width: 38px; height: 38px; border-radius: 999px;
  background: linear-gradient(135deg, var(--hp-purple-light), var(--hp-purple));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.uc-calc-head .who { font-size: 14px; font-weight: 600; }
.uc-calc-head .who .m { font-size: 11px; color: var(--hp-fg-3); font-weight: 500; margin-top: 1px; }
.uc-calc-head .pill {
  font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(128,106,170,0.20); color: var(--hp-purple-200);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.uc-calc-rows {
  display: flex; flex-direction: column; gap: 9px;
}
.uc-calc-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.uc-calc-row .l { color: var(--hp-fg-2); }
.uc-calc-row .l .b { font-size: 10px; color: var(--hp-fg-4); margin-left: 6px; }
.uc-calc-row .v { font-weight: 600; color: var(--hp-fg-1); }
.uc-calc-row.minus .v { color: #E59CA8; }
.uc-calc-row.total {
  padding-top: 13px; border-top: 1px solid var(--hp-border);
  margin-top: 8px;
}
.uc-calc-row.total .l { font-size: 14px; color: var(--hp-fg-1); font-weight: 600; }
.uc-calc-row.total .v { font-size: 22px; color: var(--hp-teal); letter-spacing: -0.014em; }

/* SEPA card */
.uc-sepa-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border-2);
  border-radius: var(--hp-radius-xl);
  padding: 22px; box-shadow: var(--hp-shadow-lg);
  position: relative; overflow: hidden;
}
.uc-sepa-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.uc-sepa-head .t { font-size: 13px; font-weight: 600; color: var(--hp-fg-1); }
.uc-sepa-head .t .b { font-size: 10px; color: var(--hp-fg-3); font-weight: 500; display: block; margin-top: 2px; }
.uc-sepa-head .live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: var(--hp-teal);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.uc-sepa-head .live .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--hp-teal);
  box-shadow: 0 0 8px var(--hp-teal);
  animation: pulseDot 2s infinite;
}
.uc-sepa-mega {
  font-size: 44px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; color: var(--hp-mist);
  margin-bottom: 4px; line-height: 1;
}
.uc-sepa-mega .c { color: var(--hp-fg-3); font-size: 24px; }
.uc-sepa-meta { font-size: 12px; color: var(--hp-fg-3); margin-bottom: 18px; }
.uc-sepa-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 18px;
}
.uc-sepa-grid .s {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.20);
}
.uc-sepa-grid .s .l { font-size: 9.5px; color: var(--hp-fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.uc-sepa-grid .s .v { font-size: 16px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.uc-sepa-grid .s .v.teal { color: var(--hp-teal); }
.uc-sepa-progress {
  height: 8px; border-radius: 999px;
  background: rgba(0,0,0,0.25);
  overflow: hidden; margin-bottom: 8px;
}
.uc-sepa-progress .bar {
  height: 100%; width: 71%;
  background: linear-gradient(90deg, var(--hp-teal-deep), var(--hp-teal));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(154,212,214,0.5);
}
.uc-sepa-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--hp-fg-3); font-variant-numeric: tabular-nums;
}

/* Official invoice mini phone */
.uc-mini-phone {
  width: 280px; max-width: 100%;
  aspect-ratio: 9/18;
  margin: 0 auto;
  background: var(--hp-canvas);
  border-radius: 36px;
  box-shadow:
    0 30px 80px -16px rgba(0,0,0,0.7),
    0 0 0 8px #0B112A,
    0 0 0 9px rgba(196,185,219,0.12);
  overflow: hidden;
  padding: 14px;
  position: relative;
}
.uc-mini-phone .notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 20px; background: #0B112A; border-radius: 999px;
}
.uc-mini-phone .screen { padding-top: 26px; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.uc-mini-phone .step-pill {
  align-self: flex-start;
  font-size: 9px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: rgba(128,106,170,0.20); color: var(--hp-purple-200);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.uc-mini-phone .title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.uc-mini-phone .sub { font-size: 10px; color: var(--hp-fg-3); margin-bottom: 6px; }
.uc-mini-phone .pos {
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,185,219,0.07);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
}
.uc-mini-phone .pos .ico {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(154,212,214,0.15); color: var(--hp-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.uc-mini-phone .pos .name { flex: 1; font-weight: 600; color: var(--hp-fg-1); }
.uc-mini-phone .pos .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.uc-mini-phone .total {
  margin-top: auto; padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--hp-purple-light), var(--hp-purple));
  display: flex; flex-direction: column; gap: 4px;
}
.uc-mini-phone .total .l { font-size: 9px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.uc-mini-phone .total .v { font-size: 22px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.014em; }

/* Player wallet visual */
.uc-wallet {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border-2);
  border-radius: var(--hp-radius-xl);
  padding: 22px; box-shadow: var(--hp-shadow-lg);
}
.uc-wallet .me {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.uc-wallet .me .av {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, var(--hp-teal), var(--hp-teal-deep));
  color: #0E1530; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.uc-wallet .me .nm { font-size: 14px; font-weight: 600; }
.uc-wallet .me .nm .m { font-size: 11px; color: var(--hp-fg-3); font-weight: 500; margin-top: 2px; }
.uc-wallet .balance {
  padding: 18px; border-radius: 16px;
  background: linear-gradient(145deg, var(--hp-purple), #3A2E5B);
  margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.uc-wallet .balance::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(154,212,214,0.25), transparent 60%);
}
.uc-wallet .balance .l { font-size: 10px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.uc-wallet .balance .v { font-size: 36px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.018em; margin-top: 6px; line-height: 1; }
.uc-wallet .balance .v .c { color: rgba(255,255,255,0.65); font-size: 20px; }
.uc-wallet .balance .sub { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 6px; }
.uc-wallet .steps {
  display: flex; flex-direction: column; gap: 8px;
}
.uc-wallet .step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--hp-border);
  font-size: 12px;
}
.uc-wallet .step .num {
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(154,212,214,0.18); color: var(--hp-teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.uc-wallet .step.done .num { background: var(--hp-teal); color: #0E1530; }
.uc-wallet .step .nm { flex: 1; color: var(--hp-fg-1); font-weight: 500; }
.uc-wallet .step .meta { color: var(--hp-fg-3); font-size: 10.5px; }

/* ─────────────── Sports verticals ─────────────── */
.hp-sports {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 48px;
}
.hp-sport {
  position: relative;
  border-radius: var(--hp-radius-lg);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  padding: 24px 20px 22px;
  overflow: hidden;
  transition: all 200ms;
}
.hp-sport:hover { border-color: var(--hp-border-2); }
.hp-sport.live { background: linear-gradient(165deg, var(--hp-surface), var(--hp-surface-2)); }
.hp-sport.live::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hp-teal);
  box-shadow: 0 0 12px var(--hp-teal);
}
.hp-sport .ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(196,185,219,0.06);
  color: var(--hp-fg-2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hp-sport.live .ico { background: rgba(154,212,214,0.15); color: var(--hp-teal); }
.hp-sport h4 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.hp-sport .status {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hp-fg-3);
}
.hp-sport.live .status { color: var(--hp-teal); }
.hp-sport .modules {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hp-border);
  font-size: 11.5px; color: var(--hp-fg-3); line-height: 1.5;
}

/* ─────────────── Stats / Quote ─────────────── */
.hp-quote-block {
  margin-top: 80px;
  padding: 60px 56px;
  border-radius: var(--hp-radius-2xl);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(86,71,135,0.25), transparent 60%),
    radial-gradient(500px 250px at 90% 100%, rgba(154,212,214,0.10), transparent 60%),
    linear-gradient(160deg, var(--hp-surface), var(--hp-canvas));
  border: 1px solid var(--hp-border-2);
}
.hp-quote-block .eyebrow {
  font-size: 11px; font-weight: 700; color: var(--hp-teal);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 16px; text-align: center;
}
.hp-quote {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500; line-height: 1.3;
  letter-spacing: -0.014em;
  max-width: 32ch; margin: 0 auto 28px;
  text-align: center;
}
.hp-quote em {
  font-style: normal;
  background: linear-gradient(135deg, var(--hp-teal), var(--hp-lilac));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-quote-attr {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 40px;
}
.hp-quote-attr .av {
  width: 42px; height: 42px; border-radius: 999px;
  background: linear-gradient(135deg, var(--hp-purple-light), var(--hp-purple));
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.hp-quote-attr .who { font-size: 13.5px; font-weight: 600; }
.hp-quote-attr .who .m { font-size: 11.5px; color: var(--hp-fg-3); font-weight: 500; margin-top: 2px; }
.hp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--hp-border);
}
.hp-stat { text-align: center; }
.hp-stat .v {
  font-size: 38px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--hp-mist);
  line-height: 1;
}
.hp-stat .v .u { color: var(--hp-fg-3); font-size: 22px; margin-left: 2px; }
.hp-stat .l {
  font-size: 12px; color: var(--hp-fg-3);
  margin-top: 8px; font-weight: 500;
}

/* ─────────────── Compliance ─────────────── */
.hp-compliance-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 48px;
}
.hp-compliance-card {
  padding: 24px;
  border-radius: var(--hp-radius-lg);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
}
.hp-compliance-card .ico {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(154,212,214,0.12);
  color: var(--hp-teal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hp-compliance-card h4 {
  font-size: 15px; font-weight: 600; margin: 0 0 6px;
}
.hp-compliance-card p {
  font-size: 13px; color: var(--hp-fg-3); margin: 0; line-height: 1.5;
}
.hp-compliance-badges {
  display: flex; justify-content: center; gap: 32px;
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid var(--hp-border);
  flex-wrap: wrap;
  opacity: 0.7;
}
.hp-compliance-badge {
  font-size: 12px; font-weight: 600; color: var(--hp-fg-2);
  letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 8px;
}
.hp-compliance-badge .ico-pill {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(196,185,219,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--hp-fg-2);
}

/* ─────────────── Final CTA ─────────────── */
.hp-final-cta {
  padding: 100px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hp-final-cta-inner {
  padding: 80px 60px;
  border-radius: var(--hp-radius-2xl);
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(86,71,135,0.35), transparent 60%),
    linear-gradient(165deg, var(--hp-surface-2), var(--hp-canvas));
  border: 1px solid var(--hp-border-2);
  position: relative; overflow: hidden;
}
.hp-final-cta-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 50% 100%, rgba(154,212,214,0.10), transparent 60%);
}
.hp-final-cta h2 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600; letter-spacing: -0.024em;
  line-height: 1.05;
  margin: 0 0 18px;
  position: relative; z-index: 1;
}
.hp-final-cta h2 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--hp-lilac), var(--hp-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-final-cta .lede {
  font-size: 17px; color: var(--hp-fg-2);
  max-width: 50ch; margin: 0 auto 36px;
  position: relative; z-index: 1;
}
.hp-final-cta .ctas {
  display: inline-flex; gap: 12px; position: relative; z-index: 1;
}
.hp-final-cta .fine {
  margin-top: 24px; font-size: 12px; color: var(--hp-fg-3);
  position: relative; z-index: 1;
}

/* ─────────────── Footer ─────────────── */
.hp-footer {
  padding: 80px 0 40px;
  border-top: 1px solid var(--hp-border);
  margin-top: 60px;
}
.hp-footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px;
}
.hp-footer-brand .hp-logo { margin-bottom: 16px; }
.hp-footer-brand p { font-size: 13px; color: var(--hp-fg-3); line-height: 1.55; max-width: 32ch; }
.hp-footer-col h5 {
  font-size: 12px; font-weight: 600; color: var(--hp-fg-1);
  margin: 0 0 14px; letter-spacing: 0.02em;
}
.hp-footer-col a {
  display: block; font-size: 13px; color: var(--hp-fg-3);
  padding: 5px 0; transition: color 160ms;
}
.hp-footer-col a:hover { color: var(--hp-fg-1); }
.hp-footer-bottom {
  padding-top: 28px; border-top: 1px solid var(--hp-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--hp-fg-3);
  flex-wrap: wrap; gap: 16px;
}
.hp-footer-bottom .meta { display: flex; gap: 18px; }
.hp-footer-bottom a { color: var(--hp-fg-3); }
.hp-footer-bottom a:hover { color: var(--hp-fg-1); }

/* ─────────────── Workflows section ─────────────── */
.wf-flow {
  margin-top: 72px;
  padding: 36px;
  border-radius: var(--hp-radius-2xl);
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(86,71,135,0.14), transparent 60%),
    radial-gradient(700px 380px at 100% 100%, rgba(154,212,214,0.08), transparent 60%),
    linear-gradient(165deg, rgba(22,31,64,0.6), rgba(11,17,42,0.6));
  border: 1px solid var(--hp-border-2);
  position: relative; overflow: hidden;
}
.wf-flow + .wf-flow { margin-top: 28px; }

.wf-flow-head {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 28px; align-items: flex-start;
  margin-bottom: 36px;
  max-width: 920px;
}
.wf-num {
  font-size: 56px; font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(154,212,214,0.45);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.wf-flow-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--hp-teal);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 12px;
}
.wf-flow-text h3 {
  font-size: 30px; font-weight: 600; letter-spacing: -0.018em;
  line-height: 1.15; margin: 0 0 14px;
  max-width: 22ch;
}
.wf-flow-text p {
  font-size: 15.5px; line-height: 1.6; color: var(--hp-fg-2);
  margin: 0; max-width: 64ch;
}

/* Stage: source → arrows → targets */
.wf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 180px minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 14px 0 8px;
}
.wf-stage.league {
  grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
}

/* Actor tag */
.wf-actor-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hp-fg-2);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--hp-border-2);
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}
.wf-actor-tag.right { align-self: flex-start; }
.wf-actor-tag .dot { width: 6px; height: 6px; border-radius: 999px; }
.wf-actor-tag .dot.purple { background: var(--hp-purple-light); box-shadow: 0 0 8px var(--hp-purple-light); }
.wf-actor-tag .dot.teal { background: var(--hp-teal); box-shadow: 0 0 8px var(--hp-teal); }
.wf-actor-tag .dot.lilac { background: var(--hp-lilac); box-shadow: 0 0 8px var(--hp-lilac); }

/* Source desktop mock */
.wf-source { display: flex; flex-direction: column; align-items: flex-start; }
.wf-mock-dash {
  width: 100%;
  background: linear-gradient(150deg, #1A2348, #131B3A);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.6),
    0 0 0 1px rgba(196,185,219,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.wf-mock-dash .bar {
  height: 30px; padding: 0 12px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(196,185,219,0.06);
  background: rgba(0,0,0,0.18);
}
.wf-mock-dash .bar .d { width: 8px; height: 8px; border-radius: 999px; }
.wf-mock-dash .bar .d.r { background: #C64A5B; }
.wf-mock-dash .bar .d.y { background: #C88A2E; }
.wf-mock-dash .bar .d.g { background: #4BA5A8; }
.wf-mock-dash .bar .url {
  flex: 1; padding: 4px 10px; margin-left: 10px;
  background: rgba(0,0,0,0.25); border-radius: 5px;
  font-size: 10.5px; color: var(--hp-fg-3); font-family: ui-monospace, monospace;
}
.wf-mock-dash .head { padding: 18px 18px 12px; }
.wf-mock-dash .head .t { font-size: 16px; font-weight: 600; color: var(--hp-fg-1); letter-spacing: -0.012em; }
.wf-mock-dash .head .sub { font-size: 11.5px; color: var(--hp-fg-3); margin-top: 2px; }
.wf-mock-dash .rows { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wf-mock-dash .row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  background: rgba(0,0,0,0.22); font-size: 12px;
}
.wf-mock-dash .row.paid {
  background: linear-gradient(90deg, rgba(154,212,214,0.16), rgba(154,212,214,0.04));
  box-shadow: 0 0 0 1px rgba(154,212,214,0.22);
}
.wf-mock-dash .row.queued {
  background: linear-gradient(90deg, rgba(219,203,216,0.13), rgba(219,203,216,0.04));
  box-shadow: 0 0 0 1px rgba(219,203,216,0.18);
}
.wf-mock-dash .row .av {
  width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #0E1530;
}
.wf-mock-dash .row .av.p { background: linear-gradient(135deg, var(--hp-purple-light), var(--hp-purple)); color: #fff; }
.wf-mock-dash .row .av.t { background: linear-gradient(135deg, var(--hp-teal), var(--hp-teal-deep)); }
.wf-mock-dash .row .av.l { background: linear-gradient(135deg, var(--hp-lilac), #B89DB3); }
.wf-mock-dash .row .nm { color: var(--hp-fg-1); font-weight: 500; }
.wf-mock-dash .row .amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hp-fg-1); }

/* Grouped rows (players / officials) */
.wf-mock-dash .rows-group { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.wf-mock-dash .rows-group + .rows-group { border-top: 1px dashed rgba(196,185,219,0.14); padding-top: 8px; }
.wf-mock-dash .group-tag {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hp-fg-3);
}
.wf-mock-dash .group-tag .g-dot { width: 6px; height: 6px; border-radius: 999px; }
.wf-mock-dash .group-tag.teal { color: var(--hp-teal); }
.wf-mock-dash .group-tag.teal .g-dot { background: var(--hp-teal); box-shadow: 0 0 6px var(--hp-teal); }
.wf-mock-dash .group-tag.lilac { color: var(--hp-lilac); }
.wf-mock-dash .group-tag.lilac .g-dot { background: var(--hp-lilac); box-shadow: 0 0 6px var(--hp-lilac); }
.wf-mock-dash .group-tag .g-count {
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  padding: 1px 7px; border-radius: 999px;
  color: var(--hp-fg-2); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.04em;
}
.wf-mock-dash .row .nm .rd { color: var(--hp-fg-3); font-weight: 500; font-size: 11px; }
.wf-mock-dash .row.more {
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  color: var(--hp-fg-3);
  padding: 4px 12px;
}
.wf-mock-dash .row.more .nm { color: var(--hp-fg-3); font-weight: 500; font-style: italic; }
.wf-mock-dash .row.more .amt { color: var(--hp-fg-2); font-weight: 600; }
.wf-mock-dash .row .av.tx {
  background: rgba(154,212,214,0.18);
  color: var(--hp-teal);
  font-size: 9px; font-weight: 700;
  border: 1px dashed rgba(154,212,214,0.4);
}
.wf-mock-dash .row .av.lx {
  background: rgba(219,203,216,0.18);
  color: var(--hp-lilac);
  font-size: 9px; font-weight: 700;
  border: 1px dashed rgba(219,203,216,0.4);
}

/* Phone + recipient-chip stack */
.wf-mock-phone-stack {
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: 250px;
}
.wf-mock-phone-stack .wf-mock-phone { position: relative; z-index: 2; }
.recipient-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 5px;
  background: linear-gradient(145deg, rgba(20,28,60,0.92), rgba(13,19,42,0.88));
  border: 1px solid rgba(196,185,219,0.14);
  border-radius: 11px;
  font-size: 10px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  z-index: 1;
}
.recipient-chip .av {
  width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #0E1530; flex-shrink: 0;
}
.recipient-chip .av.t { background: linear-gradient(135deg, var(--hp-teal), var(--hp-teal-deep)); }
.recipient-chip .av.l { background: linear-gradient(135deg, var(--hp-lilac), #B89DB3); }
.recipient-chip .nm { color: var(--hp-fg-1); font-weight: 600; }
.recipient-chip .amt {
  font-variant-numeric: tabular-nums; font-weight: 700;
  margin-left: 4px;
}
.recipient-chip.teal .amt { color: var(--hp-teal); }
.recipient-chip.lilac .amt { color: var(--hp-lilac); }

/* Fanned chip positions — right of the phone (phone width = 220px) */
.wf-mock-phone-stack .recipient-chip.rc1 {
  left: 236px; top: 22px;
  transform: rotate(3deg);
}
.wf-mock-phone-stack .recipient-chip.rc2 {
  left: 248px; top: 92px;
  transform: rotate(-2.5deg);
}
.wf-mock-phone-stack .recipient-chip.rc3 {
  left: 230px; top: 162px;
  transform: rotate(2deg);
}

.wf-trigger-btn {
  margin: 4px 12px 16px;
  padding: 12px 16px;
  border-radius: 11px;
  border: none;
  background: var(--hp-teal);
  color: #0E1530;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 10px 24px -6px rgba(154,212,214,0.4);
  transition: transform 160ms, box-shadow 160ms;
}
.wf-trigger-btn .ico {
  width: 18px; height: 18px; border-radius: 999px;
  background: rgba(14,21,48,0.18);
  display: flex; align-items: center; justify-content: center;
}
.wf-trigger-btn:hover { transform: translateY(-1px); }
.wf-trigger-btn.purple {
  background: var(--hp-purple-light);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 10px 24px -6px rgba(86,71,135,0.5);
}
.wf-trigger-btn.purple .ico { background: rgba(255,255,255,0.18); }

/* Animated arrows column */
.wf-arrows {
  position: relative;
  height: 320px;
  width: 100%;
}
.wf-arrows svg { width: 100%; height: 100%; }
.wf-arrow-label {
  position: absolute;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hp-fg-3);
  background: rgba(11,17,42,0.7);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--hp-border-2);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.wf-arrow-label.top { top: 22%; left: 50%; transform: translateX(-50%); color: var(--hp-teal); border-color: rgba(154,212,214,0.32); }
.wf-arrow-label.bot { bottom: 22%; left: 50%; transform: translateX(-50%); color: var(--hp-lilac); border-color: rgba(219,203,216,0.32); }
.wf-arrow-label.mid { top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--hp-teal); border-color: rgba(154,212,214,0.32); }

/* Targets column */
.wf-targets {
  display: flex; flex-direction: column;
  gap: 18px;
}
.wf-targets.single { justify-content: center; }
.wf-target { display: flex; flex-direction: column; align-items: flex-start; }

/* Compact phone mock */
.wf-mock-phone {
  width: 220px;
  background: var(--hp-canvas);
  border-radius: 28px;
  box-shadow:
    0 30px 60px -16px rgba(0,0,0,0.7),
    0 0 0 7px #0B112A,
    0 0 0 8px rgba(196,185,219,0.10);
  overflow: hidden;
  padding: 10px;
  position: relative;
}
.wf-mock-phone.tall { width: 240px; }
.wf-mock-phone .notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 16px; background: #0B112A; border-radius: 999px; z-index: 2;
}
.wf-mock-phone .screen { padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.wf-mock-phone .who {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 4px;
}
.wf-mock-phone .who .av {
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #0E1530; flex-shrink: 0;
}
.wf-mock-phone .who .av.t { background: linear-gradient(135deg, var(--hp-teal), var(--hp-teal-deep)); }
.wf-mock-phone .who .av.l { background: linear-gradient(135deg, var(--hp-lilac), #B89DB3); }
.wf-mock-phone .who .nm { font-size: 10.5px; font-weight: 600; color: var(--hp-fg-1); line-height: 1.2; }
.wf-mock-phone .who .nm .m { display: block; font-size: 8.5px; color: var(--hp-fg-3); font-weight: 500; margin-top: 1px; }
.wf-mock-phone .hero {
  padding: 14px 14px 13px;
  border-radius: 14px;
  position: relative; overflow: hidden;
}
.wf-mock-phone .hero.teal { background: linear-gradient(145deg, var(--hp-teal-deep), #2D6A6C); }
.wf-mock-phone .hero.lilac { background: linear-gradient(145deg, var(--hp-purple-light), var(--hp-purple)); }
.wf-mock-phone .hero::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
}
.wf-mock-phone .hero .l { font-size: 8.5px; color: rgba(255,255,255,0.7); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.wf-mock-phone .hero .v {
  font-size: 26px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.018em;
  margin-top: 4px; line-height: 1;
}
.wf-mock-phone .hero .v .c { font-size: 14px; color: rgba(255,255,255,0.6); }
.wf-mock-phone .hero .sub { font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 6px; }
.wf-mock-phone .pill-row { display: flex; gap: 6px; padding: 2px 2px; }
.status-pill {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.status-pill.teal { background: rgba(154,212,214,0.18); color: var(--hp-teal); }
.status-pill.lilac { background: rgba(219,203,216,0.18); color: var(--hp-lilac); }
.wf-mock-phone .ledger {
  margin: 4px 2px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.wf-mock-phone .ledger-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(196,185,219,0.06);
  font-size: 9.5px;
  color: var(--hp-fg-2);
  font-weight: 500;
}
.wf-mock-phone .ledger-row span:last-child {
  color: var(--hp-fg-3);
  font-variant-numeric: tabular-nums;
}
.wf-mock-phone .ledger-row.active {
  background: rgba(154,212,214,0.12);
  border-color: rgba(154,212,214,0.32);
  color: var(--hp-teal);
}
.wf-mock-phone .ledger-row.active span:last-child { color: var(--hp-teal); }

/* Footer actions row */
.wf-actions {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hp-border);
}
.wf-actions .uc-learn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--hp-teal);
}
.wf-actions .uc-learn.alt { color: var(--hp-lilac); }
.wf-actions .uc-learn:hover { color: var(--hp-mist); }
.wf-actions .uc-learn .arrow { transition: transform 200ms; }
.wf-actions .uc-learn:hover .arrow { transform: translateX(3px); }

/* ─────────────── Case studies section ─────────────── */
.cs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 56px;
}
.cs-card {
  display: flex; flex-direction: column;
  border-radius: var(--hp-radius-xl);
  background: linear-gradient(165deg, var(--hp-surface), var(--hp-canvas));
  border: 1px solid var(--hp-border);
  overflow: hidden;
  transition: all 260ms cubic-bezier(0.2,0.7,0.2,1);
  position: relative;
}
.cs-card:hover {
  transform: translateY(-4px);
  border-color: var(--hp-border-2);
  box-shadow: var(--hp-shadow-lg);
}
.cs-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--hp-inset);
}
.cs-img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.78);
  transition: transform 600ms cubic-bezier(0.2,0.7,0.2,1), filter 260ms;
}
.cs-card:hover .cs-img img {
  transform: scale(1.04);
  filter: saturate(0.95) brightness(0.82);
}
.cs-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,17,42,0) 40%, rgba(11,17,42,0.65) 100%);
  pointer-events: none;
}
.cs-sport-pill {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11,17,42,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  z-index: 1;
}
.cs-sport-pill.padel { color: var(--hp-teal); border-color: rgba(154,212,214,0.32); }
.cs-sport-pill.tennis { color: var(--hp-purple-200); border-color: rgba(165,148,199,0.32); }

.cs-body { padding: 28px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cs-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--hp-fg-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cs-meta .dot {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--hp-fg-4);
}
.cs-body h3 {
  font-size: 26px; font-weight: 600; letter-spacing: -0.016em;
  line-height: 1.15; margin: 0;
  color: var(--hp-fg-1);
}
.cs-body p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--hp-fg-2);
  margin: 0;
}
.cs-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
}
.cs-stat .v {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.016em;
  font-variant-numeric: tabular-nums;
  color: var(--hp-mist);
  line-height: 1;
}
.cs-stat .v .u { color: var(--hp-fg-3); font-size: 13px; margin-left: 2px; font-weight: 500; }
.cs-stat .l {
  font-size: 10.5px; color: var(--hp-fg-3);
  margin-top: 6px; line-height: 1.35;
  letter-spacing: 0.02em;
}
.cs-card.padel .cs-stat:first-child .v { color: var(--hp-teal); }
.cs-card.tennis .cs-stat:first-child .v { color: var(--hp-purple-200); }

.cs-open {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600;
  color: var(--hp-fg-1);
  margin-top: auto;
}
.cs-open .arrow { transition: transform 200ms; }
.cs-card:hover .cs-open .arrow { transform: translateX(4px); }

.cs-cta {
  margin-top: 36px;
  padding: 22px 28px;
  border-radius: var(--hp-radius-lg);
  background: rgba(86,71,135,0.10);
  border: 1px solid var(--hp-border-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cs-cta > span {
  font-size: 15px; color: var(--hp-fg-1); font-weight: 500;
}

/* ─────────────── Responsive ─────────────── */
@media (max-width: 980px) {
  .hp-nav-links { display: none; }
  .hp-roles-grid { grid-template-columns: 1fr 1fr; }
  .hp-sports { grid-template-columns: 1fr 1fr; }
  .hp-stats { grid-template-columns: 1fr 1fr; }
  .hp-compliance-grid { grid-template-columns: 1fr; }
  .hp-footer-grid { grid-template-columns: 1fr 1fr; }
  .hp-phone { display: none; }
  .hp-dash { width: 90%; left: 5%; }
  .wf-flow { padding: 24px; }
  .wf-flow-head { grid-template-columns: 1fr; gap: 8px; }
  .wf-num { font-size: 40px; }
  .wf-stage,
  .wf-stage.league { grid-template-columns: 1fr; gap: 28px; }
  .wf-arrows { height: 80px; transform: rotate(90deg); }
  .wf-target { align-items: stretch; }
  .wf-mock-phone { margin: 0 auto; }
  .cs-grid { grid-template-columns: 1fr; }
  .cs-cta { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   ── Type variety overlay (Outfit · multi-weight + italic) ──
   Layered on top of the base styles to bring more editorial
   contrast: lighter big-display weights, italic emphasis on
   key words, wider tracking on small labels.
   ============================================================ */

/* --- Section eyebrows: pull weight down, push tracking out --- */
.hp-section-eyebrow,
.hp-quote-block .eyebrow {
  font-weight: 500;
  letter-spacing: 0.22em;
}

/* --- Hero --- */
.hp-eyebrow {
  font-weight: 400;
  letter-spacing: 0.04em;
  font-feature-settings: "ss01";
}
.hp-h1 {
  font-weight: 200;
  letter-spacing: -0.035em;
}
.hp-h1 em {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hp-lede {
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.005em;
}
.hp-lede em {
  font-style: italic;
  font-weight: 400;
  color: var(--hp-fg-1);
}

/* --- Section H2: same display register as hero H1 --- */
.hp-section h2 {
  font-weight: 200;
  letter-spacing: -0.03em;
}
.hp-section h2 em {
  font-weight: 600;
  font-style: italic !important;
  letter-spacing: -0.022em;
}
.hp-section .section-sub {
  font-weight: 300;
}

/* --- Role cards: keep tight, but add italic to "who" line --- */
.hp-role h3 {
  font-weight: 500;
  letter-spacing: -0.018em;
  color: inherit;
}
.hp-role .role-who {
  font-style: italic;
  font-weight: 300;
}

/* --- Workflows --- */
.wf-num {
  font-weight: 200;
  font-style: italic;
  letter-spacing: -0.04em;
}
.wf-flow-eyebrow {
  font-weight: 500;
  letter-spacing: 0.18em;
}
.wf-flow-text h3 {
  font-weight: 300;
  letter-spacing: -0.022em;
}
.wf-flow-text p {
  font-weight: 300;
}

/* --- Big numerics: light, editorial --- */
.hp-stat .v,
.uc-sepa-mega,
.hp-phone-hero .v,
.uc-wallet .balance .v,
.uc-mini-phone .total .v {
  font-weight: 300;
  letter-spacing: -0.028em;
}
.hp-stat .v .u,
.uc-sepa-mega .c {
  font-weight: 200;
  font-style: italic;
}

/* --- Quote: light + italic emphasis stays gradient --- */
.hp-quote {
  font-weight: 300;
  letter-spacing: -0.02em;
}
.hp-quote em {
  font-style: italic !important;
  font-weight: 600;
}
.hp-quote-attr .who { font-weight: 600; }
.hp-quote-attr .who .m { font-style: italic; font-weight: 300; }

/* --- Case-study cards on homepage --- */
.cs-card h3,
.hp-cs-card h3 {
  font-weight: 500;
  letter-spacing: -0.018em;
}
.cs-stat .v,
.hp-cs-card .v {
  font-weight: 300;
}

/* --- Sports verticals --- */
.hp-sport h4 {
  font-weight: 500;
}
.hp-sport .status {
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* --- Compliance cards --- */
.hp-compliance-card h4 {
  font-weight: 500;
}
.hp-compliance-card p {
  font-weight: 300;
}

/* --- Nav links --- */
.hp-nav-links a {
  font-weight: 400;
  letter-spacing: -0.005em;
}
.hp-logo .v {
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
}


/* ============================================================
   ── Role cards: purple-only, varying saturation ──
   Prototype-hub mockup preview at bottom, header at top.
   ============================================================ */

/* Show the .pattern as a framed preview panel at the bottom */
.hp-role .pattern {
  display: block !important;
  position: absolute;
  inset: auto 18px 16px 18px;
  height: auto;
  opacity: 1;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  border: 1px solid rgba(20, 25, 53, 0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 10px 22px -10px rgba(20, 25, 53, 0.28);
}
.hp-role .pattern::after { display: none !important; }
.hp-role .pattern svg {
  display: block; width: 100%; height: auto;
  aspect-ratio: 320 / 160;
}

/* Card base — room reserved at bottom for the preview panel */
.hp-role {
  min-height: 420px;
  padding: 22px 22px 200px;
  border: 1px solid rgba(20, 25, 53, 0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 18px 36px -16px rgba(20, 25, 53, 0.28);
}
.hp-role:hover {
  border-color: rgba(20, 25, 53, 0.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 26px 48px -16px rgba(20, 25, 53, 0.34);
}

/* Body anchored to TOP, role-open hugs the panel above */
.hp-role .body { margin-top: 18px; }
.hp-role h3 { color: var(--brand-ink, #101935); min-height: 0; }
.hp-role .role-who {
  color: rgba(20, 25, 53, 0.72);
  font-style: italic; font-weight: 300; min-height: 0;
}
.hp-role .role-tasks { display: none; }
.hp-role .role-open {
  color: var(--brand-ink, #101935);
  margin-top: 14px;
  padding-top: 0;
}

/* Role tag chip at top */
.hp-role .role-tag {
  align-self: flex-start;
  background: rgba(20, 25, 53, 0.10);
  color: rgba(20, 25, 53, 0.78);
  border: 1px solid rgba(20, 25, 53, 0.08);
  backdrop-filter: blur(6px);
}

/* ── Purple saturation progression ── */
/* 1 · TD · very pale, nearly neutral purple */
.hp-role.purple {
  background: linear-gradient(165deg, #EFEAF6 0%, #E2D9EE 100%);
}
.hp-role.purple .role-tag {
  background: rgba(86, 71, 135, 0.10); color: var(--purple-700, #3A2E5B);
}

/* 2 · Player · soft pastel purple */
.hp-role.teal {
  background: linear-gradient(165deg, #D8CCEC 0%, #C4B9DB 100%);
}
.hp-role.teal .role-tag {
  background: rgba(86, 71, 135, 0.14); color: var(--purple-700, #3A2E5B);
}

/* 3 · Official · medium-saturation purple */
.hp-role.lilac {
  background: linear-gradient(165deg, #B6A6D2 0%, #A594C7 100%);
}
.hp-role.lilac .role-tag {
  background: rgba(86, 71, 135, 0.20); color: var(--purple-800, #2B2344);
}

/* 4 · Federation admin · deep, fully saturated purple */
.hp-role.ink {
  background: linear-gradient(165deg, #6B5994 0%, #564787 100%);
  border-color: rgba(20, 25, 53, 0.24);
}
.hp-role.ink h3,
.hp-role.ink .role-open { color: #fff; }
.hp-role.ink .role-who { color: rgba(255, 255, 255, 0.78); }
.hp-role.ink .role-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.20);
}


/* ============================================================
   ── No italic anywhere on the homepage ──
   Override every italic declared earlier in the file.
   ============================================================ */
body, body * { font-style: normal !important; }
.hp-section h2 em,
.hp-quote em,
.hp-h1 em,
.hp-lede em,
.hp-logo .v,
.wf-num,
.hp-stat .v .u,
.uc-sepa-mega .c,
.hp-quote-attr .who .m,
.hp-role .role-who { font-style: normal !important; }

/* ============================================================
   ── Role cards: lock header / who / open onto a shared grid ──
   Equal vertical position across all four cards by giving the
   .body a 3-row grid: header → who → open prototype.
   ============================================================ */
.hp-role .body {
  flex: 1;
  margin-top: 18px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  align-items: start;
}
.hp-role h3 {
  margin: 0;
  align-self: start;
}
.hp-role .role-who {
  margin: 0;
  align-self: start;
}
.hp-role .role-open {
  margin: 0;
  padding-top: 0;
  align-self: end;
}


/* ============================================================
   ── Mobile responsive (≤640px) ──
   Mobile-first cleanup: stack everything to a single column,
   scale display type down, simplify hero, hide decorative
   composites that don't translate to small screens.
   ============================================================ */
@media (max-width: 640px) {
  /* Containers */
  .hp-wrap { padding: 0 18px; }

  /* Nav */
  .hp-nav-inner { padding: 14px 0; gap: 12px; }
  .hp-nav-links { display: none; }
  .hp-nav-cta .hp-btn-ghost { display: none; }
  .hp-nav-cta .hp-btn-primary {
    padding: 9px 14px; font-size: 13px;
  }
  .hp-logo img { height: 20px; }
  .hp-logo .v { display: none; }

  /* Hero */
  .hp-hero { padding-top: 36px; padding-bottom: 24px; }
  .hp-h1 {
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.028em;
  }
  .hp-lede { font-size: 16px; margin-bottom: 24px; }
  .hp-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hp-hero-ctas button { width: 100%; justify-content: center; }
  .hp-eyebrow { font-size: 11px; padding: 5px 12px; }

  /* Hero composite — show a slim dashboard preview only */
  .hp-hero-visual { margin-top: 32px; aspect-ratio: 4 / 5; }
  .hp-phone { display: none; }
  .hp-flight { display: none; }
  .hp-dash {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    transform: none;
    border-radius: 14px;
  }
  .hp-dash-bar .url { font-size: 9px; }
  .hp-dash-body { grid-template-columns: 1fr; }
  .hp-dash-rail { display: none; }
  .hp-dash-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hp-dash-stat { padding: 8px 10px; }
  .hp-dash-stat .v { font-size: 14px; }
  .hp-dash-row .meta { display: none; }

  /* Section spacing */
  .hp-section { padding: 64px 0; }
  .hp-section h2 {
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.024em;
  }
  .hp-section .section-sub { font-size: 15px; }
  .hp-section-eyebrow { font-size: 10px; letter-spacing: 0.18em; }

  /* Logos */
  .hp-logos-row {
    gap: 24px 28px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hp-partner-logo {
    max-height: 28px;
    width: auto !important;
    height: auto !important;
  }
  .hp-partner-logo.xl { width: 90px !important; height: auto !important; }
  .hp-logos .label { font-size: 10px; letter-spacing: 0.18em; }

  /* Roles grid → 1 column */
  .hp-roles-grid { grid-template-columns: 1fr; margin-top: 36px; gap: 14px; }
  .hp-role {
    min-height: auto;
    padding: 20px 20px 168px;
  }
  .hp-role h3 { font-size: 20px; }

  /* Workflows */
  .wf-flow { padding: 22px 18px; }
  .wf-flow-head { grid-template-columns: 1fr; gap: 6px; }
  .wf-num { font-size: 36px; }
  .wf-flow-text h3 { font-size: 24px; line-height: 1.18; }
  .wf-flow-text p { font-size: 14px; }
  .wf-stage,
  .wf-stage.league { grid-template-columns: 1fr; gap: 18px; }
  /* arrows + chips handled in mobile v2 block below */
  .wf-target { align-items: stretch; }
  .wf-mock-phone { margin: 0 auto; }
  .wf-mock-dash { border-radius: 14px; }
  .wf-mock-dash .head .t { font-size: 13px; }
  .wf-actions { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Case studies grid → 1 column */
  .cs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-card .cs-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .cs-card .cs-stat .v { font-size: 18px; }
  .cs-card h3 { font-size: 22px; }
  .cs-cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .cs-cta .hp-btn-primary { width: 100%; justify-content: center; }

  /* Sports */
  .hp-sports { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hp-sport { padding: 18px; }
  .hp-sport h4 { font-size: 15px; }
  .hp-sport .modules { font-size: 11px; }

  /* Quote + stats */
  .hp-quote-block { padding: 40px 22px; margin-top: 48px; }
  .hp-quote { font-size: 22px; line-height: 1.32; }
  .hp-stats { grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 28px; }
  .hp-stat .v { font-size: 28px; }
  .hp-stat .v .u { font-size: 16px; }

  /* Compliance */
  .hp-compliance-grid { grid-template-columns: 1fr; gap: 12px; }
  .hp-compliance-card { padding: 22px; }
  .hp-compliance-badges {
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .hp-compliance-badge { font-size: 11px; padding: 7px 12px; }

  /* Footer */
  .hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .hp-footer-grid .hp-footer-col:first-child { grid-column: 1 / -1; }
  .hp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Tablet (641–980px) gets a 2-col roles grid + smaller display */
@media (min-width: 641px) and (max-width: 980px) {
  .hp-h1 { font-size: clamp(36px, 6vw, 56px); }
  .hp-roles-grid { grid-template-columns: 1fr 1fr; }
  .hp-role { min-height: 380px; }
}


/* ============================================================
   ── Mobile responsive v2 (≤640px) ──
   Workflows + Roles overrides for clear mobile layout.
   Both Tournament + League payout flows render in full,
   with source dashboard, connector, and target phones stacked.
   Roles cards get a uniform min-height so the "Open prototype"
   CTAs line up at the same vertical position.
   ============================================================ */
@media (max-width: 640px) {

  /* ── Roles cards: lock CTA to same height across all 4 ── */
  .hp-roles-grid { gap: 16px; }
  .hp-role {
    min-height: 360px;
    padding: 22px 22px 178px;
  }
  .hp-role .pattern {
    inset: auto 16px 18px 16px;
  }
  .hp-role .body {
    gap: 8px;
  }
  .hp-role h3 { font-size: 21px; line-height: 1.18; }
  .hp-role .role-who {
    font-size: 13.5px;
    line-height: 1.5;
  }
  .hp-role .role-open {
    font-size: 13.5px;
    padding-top: 4px;
  }

  /* ── Workflows: cleaner stacked layout ── */
  .wf-flow {
    padding: 22px 16px;
    border-radius: 22px;
  }
  .wf-flow + .wf-flow { margin-top: 18px; }

  .wf-flow-head {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 22px;
  }
  .wf-num {
    font-size: 32px;
    padding-top: 0;
    margin-bottom: 2px;
  }
  .wf-flow-eyebrow { margin-bottom: 8px; font-size: 10px; }
  .wf-flow-text h3 { font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
  .wf-flow-text p { font-size: 13.5px; line-height: 1.55; }

  /* Stage stacks vertically; replace animated arrows with a static connector */
  .wf-stage,
  .wf-stage.league {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  /* Actor tag — slightly tighter on mobile */
  .wf-actor-tag {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 10px;
  }

  /* Source dashboard mock — full width */
  .wf-source { width: 100%; }
  .wf-mock-dash { border-radius: 14px; }
  .wf-mock-dash .bar { height: 26px; padding: 0 10px; }
  .wf-mock-dash .bar .url { font-size: 9.5px; padding: 3px 8px; }
  .wf-mock-dash .head { padding: 14px 14px 8px; }
  .wf-mock-dash .head .t { font-size: 13.5px; }
  .wf-mock-dash .head .sub { font-size: 10.5px; }
  .wf-mock-dash .rows { padding: 0 10px 12px; gap: 4px; }
  .wf-mock-dash .row {
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    padding: 7px 9px;
    font-size: 11px;
  }
  .wf-mock-dash .row .av { width: 22px; height: 22px; font-size: 9px; }
  .wf-mock-dash .row .nm .rd { font-size: 10px; }
  .wf-mock-dash .row.more { padding: 3px 10px; font-size: 10.5px; }
  .wf-mock-dash .group-tag { font-size: 9px; padding: 2px 4px 4px; }
  .wf-trigger-btn {
    margin: 4px 10px 14px;
    padding: 11px 14px;
    font-size: 12.5px;
  }

  /* ── Replace hidden animated arrows with a static labelled connector ── */
  .wf-arrows {
    display: block;
    position: relative;
    height: auto;
    width: 100%;
    transform: none;
    padding: 16px 0 14px;
    pointer-events: none;
  }
  .wf-arrows svg { display: none; }
  .wf-arrow-label,
  .wf-arrow-label.top,
  .wf-arrow-label.bot,
  .wf-arrow-label.mid {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    padding: 5px 11px;
    margin: 0;
  }
  /* Render the labels as a stacked column of pills with a vertical line between */
  .wf-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .wf-arrows::before {
    content: "";
    display: block;
    width: 1.5px;
    height: 22px;
    background: linear-gradient(180deg, rgba(154,212,214,0) 0%, rgba(154,212,214,0.5) 50%, rgba(154,212,214,0) 100%);
  }
  .wf-arrows::after {
    content: "";
    display: block;
    width: 1.5px;
    height: 22px;
    background: linear-gradient(180deg, rgba(154,212,214,0) 0%, rgba(154,212,214,0.5) 50%, rgba(154,212,214,0) 100%);
  }
  .wf-arrows.single::after { display: none; }

  /* ── Targets: each phone full-width with chips as inline row ── */
  .wf-targets,
  .wf-targets.single {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
  }
  .wf-target {
    align-items: stretch;
    width: 100%;
  }

  /* Phone — center, slightly larger for legibility */
  .wf-mock-phone {
    width: 240px;
    margin: 0 auto;
  }
  .wf-mock-phone.tall { width: 250px; }

  /* Phone-stack: remove the desktop min-height reserved for absolute chips */
  .wf-mock-phone-stack {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Recipient chips — repositioned as a stack below the phone */
  .recipient-chip {
    display: inline-flex;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding: 5px 10px 5px 5px;
    font-size: 10px;
  }

  /* Workflow action buttons full-width */
  .wf-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 22px;
  }
  .wf-actions .uc-learn {
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(154,212,214,0.08);
    border: 1px solid rgba(154,212,214,0.18);
    justify-content: center;
  }
  .wf-actions .uc-learn.alt {
    background: rgba(219,203,216,0.06);
    border-color: rgba(219,203,216,0.18);
  }
}

/* ── Recipient chips layout cleanup (mobile) ── */
@media (max-width: 640px) {
  .wf-mock-phone-stack {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }
  .wf-mock-phone-stack .wf-mock-phone {
    order: 0;
    margin: 0 auto;
  }
  .wf-mock-phone-stack .recipient-chip {
    order: 1;
    align-self: center;
    margin: 0;
    width: max-content;
    max-width: 90%;
  }
  .wf-mock-phone-stack .recipient-chip.rc1 { order: 1; }
  .wf-mock-phone-stack .recipient-chip.rc2 { order: 2; }
  .wf-mock-phone-stack .recipient-chip.rc3 { order: 3; }
}


/* ============================================================
   ── Mobile v3 (≤640px) ──
   Per user feedback: show the FULL desktop composites in
   miniature — preserve all animated flow lines, recipient
   chips, and details so the message of the flow charts
   is intact at mobile size.
   Approach: keep desktop layout/positioning, scale the
   whole composite via CSS `zoom`. Roles grid → 2×2.
   Overrides everything earlier in the file.
   ============================================================ */
@media (max-width: 640px) {

  /* ─── ROLES: 2×2 GRID (matches Ona-style reference) ─── */
  .hp-roles-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 32px !important;
  }
  .hp-role {
    min-height: 280px !important;
    padding: 14px 14px 124px !important;
    border-radius: 18px !important;
  }
  .hp-role .pattern {
    inset: auto 10px 12px 10px !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
  }
  .hp-role .role-tag {
    font-size: 8.5px !important;
    padding: 3px 7px !important;
    gap: 5px !important;
    letter-spacing: 0.06em !important;
  }
  .hp-role .role-tag .dot { width: 5px !important; height: 5px !important; }
  .hp-role .body {
    gap: 5px !important;
    margin-top: 12px !important;
  }
  .hp-role h3 {
    font-size: 15px !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }
  .hp-role .role-who {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }
  .hp-role .role-open {
    font-size: 11px !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
    gap: 4px !important;
  }


  /* ─── HERO COMPOSITE: show a CROPPED cut-out of the full-size
         desktop composite (dashboard + connector + phone). The stage
         renders at true desktop dimensions so the dashboard↔phone size
         relationship + the dotted connector gap are 1:1 correct; the
         visual is a fixed window that crops the side edges. ─── */
  .hp-hero { padding: 36px 0 24px !important; text-align: center !important; }
  .hp-hero-visual {
    width: 100% !important;
    max-width: 460px !important;
    height: 400px !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 28px auto 0 !important;
    position: relative !important;
    zoom: 1 !important;
    border-radius: 24px !important;
  }
  .hp-hero-stage {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1100px !important;
    height: 690px !important;
    transform: translate(-50%, -50%) scale(0.5) !important;
    transform-origin: center center !important;
  }

  /* Restore desktop hero children (undo earlier v2 mobile rules) */
  .hp-phone { display: block !important; }
  .hp-flight { display: block !important; }
  .hp-dash {
    position: absolute !important;
    left: 36px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64% !important;
    border-radius: 16px !important;
  }
  .hp-dash-bar .url { font-size: 11px !important; }
  .hp-dash-body { grid-template-columns: 160px 1fr !important; }
  .hp-dash-rail { display: block !important; }
  .hp-dash-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }
  .hp-dash-stat { padding: 10px 12px !important; }
  .hp-dash-stat .v { font-size: 18px !important; }
  .hp-dash-row .meta { display: block !important; }


  /* ─── WORKFLOWS: restore desktop 3-col stage, zoom to fit ─── */
  .wf-flow {
    padding: 22px 4px !important;
    overflow: hidden !important;
  }
  .wf-flow-head {
    grid-template-columns: 60px 1fr !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
    padding: 0 6px !important;
  }
  .wf-num {
    font-size: 36px !important;
    padding-top: 2px !important;
  }
  .wf-flow-text h3 { font-size: 22px !important; }
  .wf-flow-text p { font-size: 13.5px !important; }

  /* Stage: restore desktop 3-col grid */
  .wf-stage,
  .wf-stage.league {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) 130px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    padding: 14px 0 8px !important;
    /* Force a desktop-like canvas width, then zoom down */
    width: 700px !important;
    /* 700 × 0.5 = 350px visual — fits inside wf-flow (354px) on 390px+ phones */
    zoom: 0.5 !important;
  }
  .wf-stage.league {
    grid-template-columns: minmax(0, 1.1fr) 130px minmax(0, 0.85fr) !important;
  }

  /* Restore animated SVG arrows (undo v2 static-pill connector) */
  .wf-arrows {
    display: block !important;
    position: relative !important;
    height: 320px !important;
    width: 100% !important;
    transform: none !important;
    padding: 0 !important;
    flex-direction: unset !important;
    align-items: unset !important;
    gap: 0 !important;
  }
  .wf-arrows::before,
  .wf-arrows::after { display: none !important; }
  .wf-arrows svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .wf-arrow-label {
    position: absolute !important;
    display: inline-flex !important;
    font-size: 9.5px !important;
    padding: 4px 9px !important;
    margin: 0 !important;
  }
  .wf-arrow-label.top {
    top: 22% !important; left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .wf-arrow-label.bot {
    bottom: 22% !important; top: auto !important; left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .wf-arrow-label.mid {
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Source dashboard mock — desktop styles */
  .wf-source { width: 100% !important; align-items: flex-start !important; }
  .wf-mock-dash { border-radius: 16px !important; }
  .wf-mock-dash .bar { height: 30px !important; padding: 0 12px !important; }
  .wf-mock-dash .bar .url { font-size: 10.5px !important; padding: 4px 10px !important; }
  .wf-mock-dash .head { padding: 18px 18px 12px !important; }
  .wf-mock-dash .head .t { font-size: 16px !important; }
  .wf-mock-dash .head .sub { font-size: 11.5px !important; }
  .wf-mock-dash .rows { padding: 0 12px 14px !important; gap: 6px !important; }
  .wf-mock-dash .row {
    grid-template-columns: 28px 1fr auto !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
  .wf-mock-dash .row .av { width: 26px !important; height: 26px !important; font-size: 10px !important; }
  .wf-mock-dash .row .nm .rd { font-size: 11px !important; }
  .wf-mock-dash .row.more { padding: 4px 12px !important; font-size: 11px !important; }
  .wf-mock-dash .group-tag { font-size: 9.5px !important; padding: 2px 4px 4px !important; }
  .wf-trigger-btn {
    margin: 4px 12px 16px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* Targets column: restore desktop column with positioned chips */
  .wf-targets {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .wf-targets.single {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .wf-target {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Phone-stack: desktop absolute-positioned chips */
  .wf-mock-phone-stack {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 250px !important;
    flex-direction: unset !important;
    align-items: unset !important;
    gap: 0 !important;
  }
  .wf-mock-phone-stack .wf-mock-phone {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    order: unset !important;
  }
  .wf-mock-phone {
    width: 220px !important;
    margin: 0 !important;
    border-radius: 28px !important;
  }
  .wf-mock-phone.tall { width: 240px !important; }

  .recipient-chip {
    display: inline-flex !important;
    position: absolute !important;
    padding: 5px 10px 5px 5px !important;
    font-size: 10px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    align-self: unset !important;
    order: unset !important;
  }
  .wf-mock-phone-stack .recipient-chip.rc1 {
    left: 236px !important; top: 22px !important;
    transform: rotate(3deg) !important;
    order: unset !important;
  }
  .wf-mock-phone-stack .recipient-chip.rc2 {
    left: 248px !important; top: 92px !important;
    transform: rotate(-2.5deg) !important;
    order: unset !important;
  }
  .wf-mock-phone-stack .recipient-chip.rc3 {
    left: 230px !important; top: 162px !important;
    transform: rotate(2deg) !important;
    order: unset !important;
  }

  /* Workflow CTA buttons stay full-width and below the zoomed stage */
  .wf-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 26px !important;
    padding: 0 6px !important;
  }
}


/* ─── Narrow phones (≤400px — iPhone SE, Android compact) ─── */
@media (max-width: 400px) {
  .hp-hero-visual {
    zoom: 1 !important;
    max-width: 100% !important;
    height: 380px !important;
  }
  .hp-hero-stage {
    transform: translate(-50%, -50%) scale(0.46) !important;
  }
  .wf-stage,
  .wf-stage.league {
    zoom: 0.46 !important; /* 700 × 0.46 = 322px */
  }
  .wf-flow {
    padding: 20px 0 !important;
  }
  .hp-wrap {
    padding: 0 14px !important;
  }
}

/* ─── Very narrow (≤360px) ─── */
@media (max-width: 360px) {
  .hp-hero-visual {
    zoom: 1 !important;
    height: 360px !important;
  }
  .hp-hero-stage {
    transform: translate(-50%, -50%) scale(0.42) !important;
  }
  .wf-stage,
  .wf-stage.league {
    zoom: 0.43 !important; /* 700 × 0.43 = 301px */
  }
}

/* ─── Tablet portrait / large phone landscape (641–820px) ─── */
@media (min-width: 641px) and (max-width: 820px) {
  /* Hero composite scales naturally via max-width — no zoom needed,
     but still hide the phone overlay only if cramped. Keep all visuals. */
  .hp-roles-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ============================================================
   ████  LIGHT MODE SURFACES  ████
   ona.com-inspired: warm off-white page, white pillow cards,
   colorful soft glow behind the product, real (light) product
   mockups. Overrides all the original dark-tuned surfaces.
   Placed last so it wins the cascade.
   ============================================================ */

/* ── Decorative canvas wash — soft purple/teal on light ── */
.hp-canvas-wash {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(86,71,135,0.10), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(154,212,214,0.10), transparent 65%),
    radial-gradient(1200px 800px at 50% 100%, rgba(86,71,135,0.06), transparent 70%);
}

/* ── Nav ── */
.hp-nav {
  background: rgba(244,242,249,0.78);
  border-bottom: 1px solid var(--hp-border);
}

/* ── Buttons ── */
.hp-btn-primary {                       /* base (non-purple) → ink, ona-style */
  background: var(--hp-fg-1);
  color: #fff;
}
.hp-btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(16,25,53,0.35); }
.hp-btn-primary.purple { background: var(--hp-purple); color: #fff; }  /* brand purple-500, white text */
.hp-btn-ghost:hover { color: var(--hp-fg-1); background: rgba(86,71,135,0.07); }
.hp-btn-secondary {
  background: var(--hp-surface);
  color: var(--hp-fg-1);
  box-shadow: var(--hp-shadow-md);
}
.hp-btn-secondary:hover { background: var(--hp-surface-2); }

/* ── Accent-as-TEXT on the light canvas → deepen for contrast ── */
.hp-section-eyebrow,
.wf-flow-eyebrow,
.hp-quote-block .eyebrow,
.uc-eyebrow,
.hp-sport.live .status,
.wf-mock-dash .group-tag.teal,
.status-pill.teal,
.wf-actions .uc-learn,
.hp-dash-stat .v.teal { color: var(--hp-teal-ink) !important; }

.wf-actions .uc-learn.alt,
.status-pill.lilac,
.wf-mock-dash .group-tag.lilac { color: var(--hp-lilac-ink) !important; }

.hp-dash-stat .v.purple { color: var(--hp-purple-ink) !important; }

/* Soft tints behind the deepened accent text */
.status-pill.teal { background: rgba(58,134,137,0.12); }
.status-pill.lilac { background: rgba(142,110,139,0.14); }
.hp-sport.live .ico { background: rgba(58,134,137,0.12); color: var(--hp-teal-ink); }
.hp-compliance-card .ico { background: rgba(58,134,137,0.12); color: var(--hp-teal-ink); }

/* ── Gradient display words → deep purple→teal, pops on light ── */
.hp-h1 em,
.hp-section h2 em,
.hp-quote em,
.hp-final-cta h2 em {
  background: linear-gradient(120deg, var(--hp-purple), var(--hp-teal-ink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the inline em="color:var(--hp-teal)" used in section H2s */
.hp-section h2 em[style] { color: var(--hp-teal-ink) !important; }

/* ── HERO VISUAL — light glowing card ── */
.hp-hero-visual {
  background:
    radial-gradient(560px 380px at 30% 32%, rgba(86,71,135,0.16), transparent 62%),
    radial-gradient(520px 360px at 82% 70%, rgba(154,212,214,0.22), transparent 62%),
    linear-gradient(160deg, #FFFFFF, #F4F2F9);
  box-shadow:
    0 50px 100px -36px rgba(86,71,135,0.30),
    0 0 0 1px rgba(86,71,135,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.hp-hero-visual::before {
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5), transparent 50%);
}
/* Stage wrapper is invisible on desktop (children lay out against .hp-hero-visual);
   on mobile it becomes a fixed-size canvas we crop into. */
.hp-hero-stage { display: contents; }

/* ── Desktop dashboard mock → light neumorphic product ── */
.hp-dash {
  background: #FFFFFF;
  box-shadow:
    0 30px 60px -18px rgba(86,71,135,0.28),
    0 0 0 1px rgba(86,71,135,0.07),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.hp-dash-bar { background: #F4F2F9; border-bottom: 1px solid var(--hp-border); }
.hp-dash-bar .url { background: #ECE8F2; color: var(--hp-fg-3); }
.hp-dash-rail { background: #FBFAFE; border-right: 1px solid var(--hp-border); }
.hp-dash-rail .item.on { background: rgba(58,134,137,0.12); color: var(--hp-teal-ink); }
.hp-dash-stat { background: #F4F2F9; border: 1px solid var(--hp-border); }
.hp-dash-row { background: #F4F2F9; }
.hp-dash-row.live {
  background: linear-gradient(90deg, rgba(154,212,214,0.28), rgba(154,212,214,0.08));
  box-shadow: 0 0 0 1px rgba(58,134,137,0.30);
}

/* ── Phone overlay (hero) → light device ── */
.hp-phone {
  background: #FFFFFF;
  box-shadow:
    0 40px 80px -18px rgba(86,71,135,0.30),
    0 0 0 8px #E7E2F0,
    0 0 0 9px rgba(86,71,135,0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.hp-phone-notch { background: #101935; }

/* ── Workflow flow panels → light ── */
.wf-flow {
  background:
    radial-gradient(760px 380px at 15% 0%, rgba(86,71,135,0.08), transparent 60%),
    radial-gradient(680px 360px at 100% 100%, rgba(154,212,214,0.12), transparent 60%),
    linear-gradient(165deg, #FFFFFF, #F4F2F9);
  border: 1px solid var(--hp-border-2);
}
.wf-num { -webkit-text-stroke: 1.5px rgba(58,134,137,0.55); }

/* ── Workflow source dashboard → light ── */
.wf-mock-dash {
  background: #FFFFFF;
  box-shadow:
    0 30px 60px -18px rgba(86,71,135,0.26),
    0 0 0 1px rgba(86,71,135,0.07),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.wf-mock-dash .bar { background: #F4F2F9; border-bottom: 1px solid var(--hp-border); }
.wf-mock-dash .bar .url { background: #ECE8F2; color: var(--hp-fg-3); }
.wf-mock-dash .row { background: #F4F2F9; }
.wf-mock-dash .row.paid {
  background: linear-gradient(90deg, rgba(154,212,214,0.26), rgba(154,212,214,0.07));
  box-shadow: 0 0 0 1px rgba(58,134,137,0.26);
}
.wf-mock-dash .row.queued {
  background: linear-gradient(90deg, rgba(219,203,216,0.30), rgba(219,203,216,0.10));
  box-shadow: 0 0 0 1px rgba(142,110,139,0.26);
}
.wf-mock-dash .rows-group + .rows-group { border-top: 1px dashed rgba(86,71,135,0.18); }
.wf-mock-dash .group-tag .g-count { background: rgba(86,71,135,0.08); color: var(--hp-fg-2); }
.wf-mock-dash .row .av.tx { background: rgba(58,134,137,0.14); color: var(--hp-teal-ink); border-color: rgba(58,134,137,0.4); }
.wf-mock-dash .row .av.lx { background: rgba(142,110,139,0.16); color: var(--hp-lilac-ink); border-color: rgba(142,110,139,0.4); }

/* Trigger buttons stay solid & high-contrast */
.wf-trigger-btn { background: var(--hp-teal-deep); color: #fff; }
.wf-trigger-btn .ico { background: rgba(255,255,255,0.22); }

/* ── Actor tags / arrow labels / recipient chips → light glass ── */
.wf-actor-tag {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--hp-border-2);
  color: var(--hp-fg-2);
}
.wf-arrow-label {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--hp-border-2);
  color: var(--hp-fg-3);
}
.wf-arrow-label.top { color: var(--hp-teal-ink); border-color: rgba(58,134,137,0.32); }
.wf-arrow-label.bot { color: var(--hp-lilac-ink); border-color: rgba(142,110,139,0.32); }
.wf-arrow-label.mid { color: var(--hp-teal-ink); border-color: rgba(58,134,137,0.32); }
.recipient-chip {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--hp-border-2);
  box-shadow: 0 10px 24px -10px rgba(86,71,135,0.30), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.recipient-chip .nm { color: var(--hp-fg-1); }
.recipient-chip.teal .amt { color: var(--hp-teal-ink); }
.recipient-chip.lilac .amt { color: var(--hp-lilac-ink); }

/* ── Workflow phones → light device ── */
.wf-mock-phone {
  background: #FFFFFF;
  box-shadow:
    0 30px 60px -18px rgba(86,71,135,0.30),
    0 0 0 7px #E7E2F0,
    0 0 0 8px rgba(86,71,135,0.08);
}
.wf-mock-phone .notch { background: #101935; }
.wf-mock-phone .ledger-row {
  background: #F4F2F9;
  border: 1px solid var(--hp-border);
  color: var(--hp-fg-2);
}
.wf-mock-phone .ledger-row.active {
  background: rgba(154,212,214,0.18);
  border-color: rgba(58,134,137,0.32);
  color: var(--hp-teal-ink);
}
.wf-mock-phone .ledger-row.active span:last-child { color: var(--hp-teal-ink); }

/* ── Case studies ── */
.cs-img img { filter: saturate(0.95) brightness(0.95); }
.cs-card:hover .cs-img img { filter: saturate(1) brightness(1); }
.cs-cta { background: rgba(86,71,135,0.07); border: 1px solid var(--hp-border-2); }

/* ── Quote block & final CTA → light panels ── */
.hp-quote-block {
  background:
    radial-gradient(560px 280px at 20% 0%, rgba(86,71,135,0.12), transparent 60%),
    radial-gradient(480px 240px at 90% 100%, rgba(154,212,214,0.14), transparent 60%),
    linear-gradient(160deg, #FFFFFF, #F4F2F9);
  border: 1px solid var(--hp-border-2);
}
.hp-final-cta-inner {
  background:
    radial-gradient(760px 380px at 50% 0%, rgba(86,71,135,0.16), transparent 60%),
    linear-gradient(165deg, #FFFFFF, #F1EEF7);
  border: 1px solid var(--hp-border-2);
}
.hp-final-cta-inner::before {
  background: radial-gradient(600px 300px at 50% 100%, rgba(154,212,214,0.14), transparent 60%);
}

/* ── Compliance badges ── */
.hp-compliance-badge .ico-pill { background: rgba(86,71,135,0.08); color: var(--hp-fg-2); }

/* ── Partner logos: black-on-transparent → mid grey on light ── */
.hp-partner-logo {
  filter: grayscale(1) brightness(0.55) opacity(0.62);
}
.hp-partner-logo:hover {
  filter: grayscale(1) brightness(0.35) opacity(0.95);
}