/*
 * /compare/ overview — sticky hero-stack hub.
 *
 * Mirrors the /products overview UI exactly: vertically-centred
 * hero, six cards dealt up into a stacked deck via sticky-scroll.
 * One card per competitor — LEFT content (name, what, dl, CTA),
 * RIGHT mesh-gradient with a "vs" panel.
 *
 * Per-competitor gradient keys live on .hms-card[data-competitor].
 * Status panel (.co-vs) replaces the products-overview try-form
 * (these are competitors, not products to "try").
 *
 * Universal chrome lives in ../_shared/chrome.css.
 */

@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

/* The /compare/ overview has no cursor-portal SVG — CTAs use
   the native hand (per the cursor-portal scope rule: nav links
   and inter-page links never go through the portal). */

.act-kicker.co-hero-kicker {
  margin-bottom: var(--space-300, 12px);
}

/* ───────────────────────────────────────────────────────────
   Act 1 — Hero + competitor cards stack.

   Tunable via CSS vars below.  Mobile media query overrides.
─────────────────────────────────────────────────────────── */

:root {
  --hms-card-w: min(1144px, 92vw);
  --hms-card-h: clamp(380px, 56vh, 560px);

  --hms-card-y-first: 50;
  --hms-card-y-below: 80;
  --hms-card-push: 1.6;

  --hms-card-segment-vh: 80;
  /* 6 cards + 100vh sticky hold ~= 580vh.  Round to 600vh. */
  --hms-stage-h: 600vh;
}

[data-act="1"] { background: var(--background); padding: 0; }

.hms-stage {
  position: relative;
  min-height: var(--hms-stage-h);
}

.hms-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Hero — vertically centred.  JS fades to 0 during the first
   card's segment so it dissolves as that card lands. */
.hms-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 92vw);
  text-align: center;
  z-index: 0;
  pointer-events: none;
}

.hms-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--display-xlarge);
  line-height: var(--leading-display-xlarge);
  letter-spacing: var(--tracking-dense);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.hms-hero-sub {
  margin: var(--gap-group, 20px) auto 0;
  font-size: var(--text-large, 15px);
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 640px;
  text-wrap: balance;
}

/* Card — absolutely centred.  --card-y set by JS each frame
   (vh; 0 = centred, ~80 = below).  Cubic ease-out gives the
   brake-into-place feel as cards land. */
.hms-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hms-card-w);
  height: var(--hms-card-h);
  transform: translate(-50%, calc(-50% + var(--card-y, 80vh)));
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  background: var(--background);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.55);
  will-change: transform;
}

/* z-index ascending — latest dealt card sits at the front.
   Card 0's --card-y also defaults to 50vh so on first paint
   (before JS sets it) it already peeks 50% from the bottom. */
.hms-card[data-competitor="firecrawl"]    { z-index: 1; --card-y: 50vh; }
.hms-card[data-competitor="browserbase"]  { z-index: 2; }
.hms-card[data-competitor="bright-data"]  { z-index: 3; }
.hms-card[data-competitor="apify"]        { z-index: 4; }
.hms-card[data-competitor="playwright"]   { z-index: 5; }
.hms-card[data-competitor="build-vs-buy"] { z-index: 6; }

.hms-card-content {
  padding: clamp(28px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-300, 12px);
  min-height: 0;
  min-width: 0;
  background: var(--background);
  position: relative;
  z-index: 1;
}

.hms-card-head { display: flex; }

.hms-card-name {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--heading-xlarge, 26px);
  line-height: 1.15;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: var(--tracking-dense);
}

.hms-card-what {
  margin: 0;
  font-size: var(--text-base, 14px);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: balance;
}

.hms-card-data {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 6px 14px;
  align-items: baseline;
}

.hms-card-data dt {
  font-size: var(--text-tiny, 11px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.hms-card-data dd {
  margin: 0;
  font-size: var(--text-small, 13px);
  line-height: 1.45;
  color: var(--text-primary);
}

.hms-card-cta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small, 13px);
  font-weight: 600;
  color: #7C4FE8;
  padding: 10px 18px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid rgba(124, 79, 232, 0.5);
  background: rgba(124, 79, 232, 0.1);
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hms-card-cta::after {
  content: "→";
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-card-cta:hover {
  background: rgba(124, 79, 232, 0.18);
  border-color: rgba(124, 79, 232, 0.75);
  transform: translateY(-1px);
}

.hms-card-cta:hover::after { transform: translateX(3px); }

/* Soon variant — same pill silhouette but muted neutral
   palette so it reads as "not yet available" without screaming
   it.  No hover lift (it's not actionable). */
.hms-card-cta--soon {
  color: var(--text-tertiary);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  cursor: default;
}

.hms-card-cta--soon::after { content: ""; }

/* ── Mesh half — per-competitor gradients ────────────────
   Each competitor owns a distinct gradient palette tuned to
   their brand without copying it directly.  Warm-dark base
   so the page stays in the brand temperature; saturated
   radials read as their territory. */
.hms-card-mesh {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 1.8vw, 28px);
}

/* Firecrawl — orange/ember, mirrors the spoke's flame signature. */
.hms-card[data-competitor="firecrawl"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #F76B3A, transparent 55%),
    radial-gradient(circle at 78% 75%, #FFA34D, transparent 55%),
    linear-gradient(135deg, #5C1F1A 0%, #2A130F 100%);
}

/* Browserbase — amber (#F7BC6B) signature. */
.hms-card[data-competitor="browserbase"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #F7BC6B, transparent 55%),
    radial-gradient(circle at 78% 75%, #FFA34D, transparent 55%),
    linear-gradient(135deg, #5C3D1A 0%, #2A1E0F 100%);
}

/* Bright Data — warm violet-blue (no navy). */
.hms-card[data-competitor="bright-data"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #6E8CFF, transparent 55%),
    radial-gradient(circle at 78% 75%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #2C3680 0%, #1A1A4F 100%);
}

/* Apify — lime/green. */
.hms-card[data-competitor="apify"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #6FDE7E, transparent 55%),
    radial-gradient(circle at 78% 75%, #5BE0AC, transparent 55%),
    linear-gradient(135deg, #1F6C4D 0%, #0E3225 100%);
}

/* Playwright — forest + teal. */
.hms-card[data-competitor="playwright"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #5BE0AC, transparent 55%),
    radial-gradient(circle at 78% 75%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #1F6C7C 0%, #0E323A 100%);
}

/* Exa — electric blue/cyan signature. */
.hms-card[data-competitor="exa"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #5AC8FA, transparent 55%),
    radial-gradient(circle at 78% 75%, #8E9BFF, transparent 55%),
    linear-gradient(135deg, #243A7A 0%, #161E3C 100%);
}

/* Tavily — indigo/violet. */
.hms-card[data-competitor="tavily"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #8B7BFF, transparent 55%),
    radial-gradient(circle at 78% 75%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #3A2C80 0%, #1E163C 100%);
}

/* Scrapfly — sky-blue + amber. */
.hms-card[data-competitor="scrapfly"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #5BB8F0, transparent 55%),
    radial-gradient(circle at 78% 75%, #F7BC6B, transparent 55%),
    linear-gradient(135deg, #1F4C6C 0%, #0E2A3A 100%);
}

/* Oxylabs — royal blue into warm violet. */
.hms-card[data-competitor="oxylabs"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #6E8CFF, transparent 55%),
    radial-gradient(circle at 78% 75%, #9D7BFF, transparent 55%),
    linear-gradient(135deg, #2C3680 0%, #1A1640 100%);
}

/* Build it yourself — austere slate over warm dark. */
.hms-card[data-competitor="build-vs-buy"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #9DA3B0, transparent 55%),
    radial-gradient(circle at 78% 75%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #2F2A38 0%, #1D1612 100%);
}

/* ── VS panel content ────────────────────────────────────
   Sits inside the mesh half.  Three rows: their wordmark,
   a divider with "vs", our wordmark.  Status pill anchored
   to bottom-right. */
.co-vs {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: rgba(15, 12, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg, 14px);
  padding: clamp(22px, 2vw, 32px);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  -webkit-backdrop-filter: blur(8px);
  transform: translateZ(0);
  backface-visibility: hidden;
  backdrop-filter: blur(8px);
}

.co-vs-them,
.co-vs-us {
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h4);
  font-weight: 500;
  letter-spacing: var(--tracking-dense);
  color: #fff;
  line-height: 1;
}

.co-vs-them { opacity: 0.85; }
.co-vs-us { color: #fff; }

.co-vs-divider {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-vs-divider span {
  position: absolute;
  padding: 0 10px;
  background: rgba(15, 12, 11, 0.85);
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.co-vs-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.co-vs-status--live {
  color: #5BE0AC;
  background: rgba(91, 224, 172, 0.1);
  border-color: rgba(91, 224, 172, 0.4);
}

/* ── Wide-desktop scaling ────────────────────────────────── */

@media (min-width: 1600px) {
  :root {
    --hms-card-w: min(1400px, 88vw);
    --hms-card-h: clamp(440px, 58vh, 640px);
  }
  .hms-hero { width: min(1200px, 90vw); }
  
  .hms-hero-sub { font-size: var(--mkt-body); max-width: 760px; }
  .co-vs { max-width: 420px; }
  .co-vs-them, .co-vs-us { font-size: var(--mkt-h4); }
}

@media (min-width: 1920px) {
  :root {
    --hms-card-w: min(1600px, 86vw);
    --hms-card-h: clamp(500px, 60vh, 720px);
  }
  .hms-hero { width: min(1480px, 88vw); }
  
  .hms-hero-sub { max-width: 880px; }
  .co-vs { max-width: 480px; }
  .co-vs-them, .co-vs-us { font-size: var(--mkt-h3); }
}

@media (min-width: 2400px) {
  :root {
    --hms-card-w: min(1840px, 82vw);
    --hms-card-h: clamp(560px, 62vh, 820px);
  }
  .hms-hero { width: min(1760px, 86vw); }
  
  .hms-hero-sub { max-width: 1040px; }
  .co-vs { max-width: 560px; }
  .co-vs-them, .co-vs-us { font-size: var(--mkt-h3); }
}

@media (max-width: 767px) {
  :root {
    --hms-card-w: 92vw;
    /* Card height tuned so the content half + .co-vs fit on
       a 568px iPhone-SE viewport without scrolling inside the
       card.  Shorter than /products overview (which packs an
       input + chips into the bottom half) because the .co-vs
       panel is much smaller than .hms-try. */
    --hms-card-h: clamp(480px, 74vh, 600px);
    --hms-card-segment-vh: 70;
    --hms-stage-h: 540vh;
    --hms-card-y-below: 100;
  }
  .hms-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .hms-card-content {
    padding: 20px;
    min-height: 0;
    gap: 10px;
  }
  /* Stack dt+dd vertically on mobile — the compare labels
     ("Their strength", "Where Zenrows wins") are too long for
     the side-by-side grid columns to read comfortably on narrow
     viewports. */
  .hms-card-data {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .hms-card-data dt { margin-top: 6px; }
  .hms-card-data dt:first-of-type { margin-top: 0; }
  .hms-card-name { font-size: var(--mkt-h4); }
  .hms-card-what { font-size: 13px; }
  .hms-card-data dd { font-size: 13px; }
  .hms-card-mesh {
    overflow: hidden;
    padding: 20px;
  }
  .hms-hero {
    /* Push the hero higher on mobile so the larger card height
       doesn't crash into the H1 from below when the first card
       starts to peek up. */
    top: 28%;
    width: min(92vw, calc(100% - 24px));
    box-sizing: border-box;
    padding: 0 12px;
  }
  
  /* On the smallest viewports, drop the forced <br/> between
     "Six fights." and "One platform." so the two phrases sit
     on the same line if they fit, or wrap naturally if not.
     The <br/> is preserved as a hint at wider mobile widths
     for the editorial two-line read. */
  .hms-hero-h1 br { display: none; }
  .hms-hero-sub {
    font-size: 14px;
    line-height: 1.5;
  }
  .co-vs { max-width: 100%; padding: 16px 18px; gap: 10px; }
  .co-vs-them, .co-vs-us { font-size: 20px; }
  .co-vs-divider span { font-size: 11px; }
  .co-vs-status { top: 10px; right: 10px; font-size: 9px; padding: 3px 8px; }
}

/* Phone-narrow — bring the H1 line break back so the editorial
   two-line read is preserved on >=400px (most phones). */
@media (min-width: 400px) and (max-width: 767px) {
  .hms-hero-h1 br { display: inline; }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  --font-display auto-flips to Mq12 via
   DS-level override.
═══════════════════════════════════════════════════════════ */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}

/* .hms-card-cta--soon sits on the warm-dark page bg, not inside
   the dark .co-vs overlay, so its rgba-white chrome flips to
   warm-dark alphas in BU.  All other rgba(255,...) usages live
   inside the .co-vs glass panel (which keeps its rgba(15,12,11)
   backdrop in both themes), so they intentionally stay white. */
html:not(.dark) .hms-card-cta--soon {
  border-color: rgba(29, 22, 18, 0.18);
  background: rgba(29, 22, 18, 0.04);
}