@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");

/* ──────────────────────────────────────────────────────────
   /compare/exa — ZenRows vs Exa.  Indexed search vs the live web.
   Balanced framing; warm-dark, border-before-fill, type-led.
─────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.back-to-top, .back-to-top * { cursor: none; }

/* ═══ Act 1 — Hero (indexed vs live) ═══
   Compare-page hero convention: full viewport, kicker + H1 + sub at the top,
   a dominant visual filling the rest. No CTA in the hero (the closer carries
   it). Matches /compare/firecrawl + /compare/apify. */
.cx-hero-section {
  min-height: 100vh; display: flex; align-items: stretch;
  padding: clamp(104px, 14vh, 152px) var(--page-gutter, 7vw) clamp(56px, 8vh, 100px);
}
.cx-hero {
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(40px, 7vh, 96px);
}
.cx-hero-main { max-width: 980px; }
.cx-hero-h1 {
  margin: clamp(14px, 1.8vh, 22px) 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 1.0;
  letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary);
}
.cx-hero-sub {
  margin: clamp(16px, 2vh, 24px) 0 0;
  font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: var(--text-secondary); max-width: 52ch;
}

/* Dominant visual — the two states side by side, big, filling the lower view. */
.cx-hero-vis {
  display: flex; flex-direction: row; gap: clamp(16px, 1.6vw, 26px); width: 100%;
}
.cx-card {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(190px, 26vh, 300px);
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--border-subtle); border-radius: 18px;
}
.cx-card-tag {
  margin: 0; font-family: var(--font-code); font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--text-tertiary);
}
.cx-card-title {
  margin: 14px 0 0; font-family: var(--font-base); font-weight: 600;
  font-size: var(--mkt-h4); line-height: 1.2; color: var(--text-primary);
}
.cx-card-meta {
  margin: 14px 0 0; font-family: var(--font-code);
  font-size: var(--mkt-body-xs); color: var(--text-quaternary);
}
.cx-card--indexed { opacity: 0.5; }
.cx-card--live .cx-card-meta { color: #7ADAE6; }
.cx-live-dot {
  position: absolute; top: clamp(24px, 2.6vw, 40px); right: clamp(24px, 2.6vw, 40px);
  width: 9px; height: 9px; border-radius: 50%; background: #7ADAE6;
  box-shadow: 0 0 0 0 rgba(122, 218, 230, 0.55);
  animation: cx-pulse 2.2s ease-out infinite;
}
@keyframes cx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(122, 218, 230, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(122, 218, 230, 0); }
  100% { box-shadow: 0 0 0 0 rgba(122, 218, 230, 0); }
}

@media (max-width: 760px) {
  .cx-hero-section { min-height: 0; }
  .cx-hero-vis { flex-direction: column; }
  .cx-card { min-height: 0; }
}
@media (min-width: 1600px) { .cx-hero { max-width: 1400px; }  }
@media (min-width: 1920px) { .cx-hero { max-width: 1560px; }  }
@media (min-width: 2400px) { .cx-hero { max-width: 1760px; } }
@media (prefers-reduced-motion: reduce) { .cx-live-dot { animation: none; } }

/* ═══ Act 2 — The drift (signature interactive) ═══
   Same record, two readers: a frozen index vs the live web.  The live
   panel mutates; the index stays put and a gauge counts "facts behind".
   Border-before-fill; teal = live/fresh, neutral strike = stale.        */
.cx-drift { padding: clamp(88px, 13vh, 160px) var(--page-gutter, 7vw); }
.cx-drift-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.cx-drift .cx-drift-h2 { font-size: var(--mkt-h2); }
.cx-drift .cx-drift-lead { margin: 18px auto 0; max-width: 54ch; }

.cx-drift-stage {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: stretch;
  text-align: left;
}
.cx-panel {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  display: flex; flex-direction: column;
  transition: opacity 0.4s ease, border-color 0.4s ease;
}
.cx-panel--index { opacity: 0.62; }
.cx-panel--live { position: relative; }
.cx-panel-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.04em;
}
.cx-panel-name { color: var(--text-secondary); font-weight: 600; }
.cx-panel-when { margin-left: auto; color: var(--text-quaternary); }
.cx-panel-when--live { color: #7ADAE6; }
.cx-panel--live .cx-live-dot { position: static; margin: 0; }

.cx-rec-title {
  margin: clamp(16px, 2vh, 22px) 0 clamp(10px, 1.4vh, 16px);
  font-family: var(--font-base); font-weight: 600;
  font-size: var(--mkt-body); color: var(--text-primary);
}
.cx-rec { margin: 0; display: flex; flex-direction: column; }
.cx-field {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--border-subtle);
}
.cx-field dt {
  font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--text-tertiary); text-transform: uppercase;
}
.cx-field dd {
  margin: 0; font-family: var(--font-base); font-weight: 600;
  font-size: var(--mkt-body-sm); color: var(--text-primary);
  font-variant-numeric: tabular-nums; transition: color 0.3s ease;
}
/* Stale index value — present but visibly behind (no red; strike + dim). */
.cx-field.is-stale dd {
  color: var(--text-quaternary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* Live value just changed — a brief teal flash. */
.cx-panel--live .cx-field dd.is-flash {
  animation: cx-flash 0.9s ease-out;
}
@keyframes cx-flash {
  0%   { color: #7ADAE6; transform: translateY(-3px); }
  100% { color: var(--text-primary); transform: none; }
}
/* Index value catching up on re-crawl — a brief teal blip. */
.cx-panel--index .cx-field dd.is-resync { animation: cx-resync 0.8s ease-out; }
@keyframes cx-resync {
  0%   { color: #7ADAE6; }
  100% { color: var(--text-primary); }
}

/* The drift gauge — count of facts the index is behind. */
.cx-gauge {
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 88px;
}
.cx-gauge-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.9;
  color: var(--text-quaternary);
  transition: color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.cx-gauge.is-drift .cx-gauge-num { color: var(--text-primary); transform: scale(1.06); }
.cx-gauge-label {
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary); text-align: center;
  line-height: 1.25;
}

/* Controls — the live web changes, by hand. */
.cx-drift-controls {
  margin-top: clamp(28px, 4vh, 44px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
}
.cx-drift-hint {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-tertiary); margin-right: 4px;
}
.cx-evt {
  font-family: var(--font-code); font-size: 12.5px;
  color: var(--text-secondary); background: transparent;
  padding: 8px 15px; border: 1px solid var(--border-subtle); border-radius: 999px;
  cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.cx-evt:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.cx-evt:active { transform: translateY(1px); }
.cx-evt.is-spent { opacity: 0.4; }
.cx-evt--recrawl { color: #7ADAE6; border-color: color-mix(in srgb, #7ADAE6 34%, transparent); }
.cx-evt--recrawl:hover { color: #7ADAE6; border-color: #7ADAE6; }
.cx-evt:focus-visible { outline: 2px solid var(--text-tertiary); outline-offset: 2px; }

@media (max-width: 760px) {
  .cx-drift-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cx-gauge { flex-direction: row; gap: 10px; min-width: 0; padding: 4px 0; }
  
  .cx-gauge-label { text-align: left; }
}
@media (min-width: 1600px) { .cx-drift-inner { max-width: 1200px; } }
@media (min-width: 1920px) { .cx-drift-inner { max-width: 1300px; }  }
@media (prefers-reduced-motion: reduce) {
  .cx-panel--live .cx-field dd.is-flash { animation: none; }
  .cx-gauge.is-drift .cx-gauge-num { transform: none; }
}

/* ═══ Act 2 — Breadth (search is one of seven) ═══ */
.cx-act2 { padding: clamp(96px, 14vh, 180px) var(--page-gutter, 7vw); }
.cx-act2-inner { max-width: 1040px; margin: 0 auto; }
.cx-h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-h2); line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary);
}
.cx-h2--center { text-align: center; }
.cx-lead {
  margin: 18px 0 0; max-width: 50ch;
  font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: var(--text-secondary);
}
.cx-rows { margin-top: clamp(36px, 5vh, 60px); display: flex; flex-direction: column; gap: 22px; }
.cx-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--border-subtle);
}
.cx-row-label { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.cx-prims { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-prim {
  font-family: var(--font-code); font-size: var(--mkt-body-xs);
  color: var(--text-secondary);
  padding: 7px 13px; border: 1px solid var(--border-subtle); border-radius: 999px;
}
.cx-prim--shared { color: #7C4FE8; background: transparent; border-color: color-mix(in srgb, #7C4FE8 38%, transparent); }

/* ═══ Act 3 — Comparison table ═══ */
.cx-act3 { padding: clamp(80px, 11vh, 150px) var(--page-gutter, 7vw); }
.cx-act3-inner { max-width: 980px; margin: 0 auto; }
.cx-table { margin-top: clamp(32px, 5vh, 56px); }
.cx-trow {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) 1fr 1.1fr;
  gap: clamp(16px, 2.5vw, 40px);
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.45;
  color: var(--text-secondary);
  align-items: baseline;
}
.cx-trow:last-child { border-bottom: 1px solid var(--border-subtle); }
.cx-trow--head { border-top: none; color: var(--text-tertiary); font-family: var(--font-code); font-size: 12px; letter-spacing: 0.04em; }
.cx-th-zr, .cx-tz { color: var(--text-primary); }
.cx-tk { font-family: var(--font-code); font-size: 12.5px; letter-spacing: 0.03em; color: var(--text-tertiary); }

/* ═══ Act 4 — Closer ═══ */
.cx-end {
  padding: clamp(120px, 18vh, 210px) var(--page-gutter, 7vw);
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.cx-end-h2 {
  margin: 16px 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.99;
  letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary);
}
.cx-end-cta { margin-top: clamp(30px, 4.5vh, 52px); }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 560ms cubic-bezier(0.22,1,0.36,1), transform 560ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .cx-row { grid-template-columns: 1fr; gap: 10px; }
  .cx-trow { grid-template-columns: 1fr; gap: 4px 0; }
  .cx-trow--head { display: none; }
  .cx-tk { color: var(--text-primary); font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
}

/* ═══ Saturated purple band (breadth act) — blooms in on entry ═══
   SOLID #7C4FE8, no gradient. Clip-path circle blooms from the bottom as
   the act enters. White type; the shared "search" chip flips to white fill
   so it pops against the band. Rhythm + BG break on a flat warm-dark page. */
.cx-band { position: relative; overflow: hidden; }
.cx-band-bloom {
  position: absolute; inset: 0; z-index: 0; background: #7C4FE8;
  clip-path: circle(0% at 50% 105%);
  transition: clip-path 1150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cx-band.is-in .cx-band-bloom { clip-path: circle(150% at 50% 105%); }
.cx-band .cx-act2-inner { position: relative; z-index: 1; }
.cx-band-kicker {
  margin: 0 0 16px; font-family: var(--font-code); font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
.cx-band--purple .cx-h2 { color: #fff; font-size: var(--mkt-hero); line-height: 1.0; }
.cx-band--purple .cx-lead { color: rgba(255, 255, 255, 0.86); max-width: 52ch; }
.cx-band--purple .cx-row { border-top-color: rgba(255, 255, 255, 0.22); }
.cx-band--purple .cx-row-label { color: rgba(255, 255, 255, 0.62); }
.cx-band--purple .cx-prim { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.cx-band--purple .cx-prim--shared { color: #7C4FE8; background: #fff; border-color: #fff; }
/* rows ride in with the bloom (synced, not per-row IO) */
.cx-band .cx-row { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cx-band.is-in .cx-row { opacity: 1; transform: none; }
.cx-band.is-in .cx-row:nth-of-type(1) { transition-delay: 0.4s; }
.cx-band.is-in .cx-row:nth-of-type(2) { transition-delay: 0.55s; }
.cx-band .cx-band-kicker, .cx-band .cx-h2, .cx-band .cx-lead {
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease;
}
.cx-band.is-in .cx-band-kicker { opacity: 1; transform: none; transition-delay: 0.2s; }
.cx-band.is-in .cx-h2 { opacity: 1; transform: none; transition-delay: 0.28s; }
.cx-band.is-in .cx-lead { opacity: 1; transform: none; transition-delay: 0.34s; }
.cx-band--purple .cx-act2-inner { max-width: 1140px; }
@media (min-width: 1600px) { .cx-band--purple .cx-act2-inner { max-width: 1320px; } }
@media (prefers-reduced-motion: reduce) {
  .cx-band-bloom { clip-path: circle(150% at 50% 105%); transition: none; }
  .cx-band .cx-row, .cx-band .cx-band-kicker, .cx-band .cx-h2, .cx-band .cx-lead {
    opacity: 1; transform: none; transition: none;
  }
}

/* Topbar adapts while the purple band covers the topbar slot.
   Canonical body.is-on-purple inversion (theme-invariant): chrome → white,
   logo inverted to white, CTA stays the teal pill. Essential in BU/light. */