/*
 * Zenrows /products — comparison hub.
 *
 *  Act 1 — Hero + cards stack (sticky stage).
 *    Hero copy sits vertically centred in the viewport.  Eight
 *    cards (7 products + 1 help) stack at the same centred
 *    position, each absolutely positioned with a JS-driven
 *    --card-y CSS variable.
 *
 *    Each card owns a 1/N slice of stage scroll progress.
 *    During its slice, the card's --card-y eases from ~80vh
 *    (just below the viewport) to 0 (centred) via cubic ease-
 *    out — so the card races up at first, then brakes into
 *    place.  After its slice, it stays at 0; the next card's
 *    slice deals a new card on top via z-index ordering.
 *
 *    Layout per card: content LEFT, mesh-gradient RIGHT.  Pablo
 *    will drop per-product SVGs into the mesh slot.
 *
 *  Act 2 — Compose them.  Teal-5 band, four composition cards.
 *  Act 3 — Closer.  Word-pop CTA + boundary strip.
 *
 * 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");

.hms-try-chip,
.back-to-top { cursor: pointer; }

/* URL input keeps its native I-beam — the O-cursor over a
   text field reads as wrong; the user needs to see where
   they're typing. */

/* Eyebrow on /products overview uses the shared .kicker--base
   variant from components.css with a tighter bottom margin
   tuned for this page's hero rhythm. */
.kicker--base {
  margin-bottom: var(--space-300, 12px);
}

.act-frame-line {
  margin: 0;
  font-family: "Rawest", system-ui, sans-serif;
  font-size: var(--display-medium);
  line-height: var(--leading-display-medium);
  letter-spacing: var(--tracking-dense);
  font-weight: 500;
  color: var(--text-primary);
  max-width: 760px;
  text-wrap: balance;
}

main > section:not([data-act="1"]) {
  padding: var(--space-4000, 160px) clamp(20px, 4vw, 48px);
}

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

   Tunable via these CSS variables; mobile media query
   overrides the relevant ones.
─────────────────────────────────────────────────────────── */

:root {
  /* +30% wider than the previous 880px so the side-by-side
     content/mesh split has enough horizontal room. */
  --hms-card-w: min(1144px, 92vw);
  --hms-card-h: clamp(380px, 56vh, 560px);

  /* Starting Y for the first card — already peeking 50% above
     the bottom of the viewport at scroll = 0.  All other cards
     start fully off-screen below (--hms-card-y-below). */
  --hms-card-y-first: 50;
  --hms-card-y-below: 80;

  /* Once a card has landed at centre, each subsequent card's
     arrival pushes it slightly UP by this many vh.  Creates a
     visible deck rather than every card stacking at the same
     exact spot. */
  --hms-card-push: 1.6;

  /* Scroll per card segment, in vh.  Higher = slower deal. */
  --hms-card-segment-vh: 80;

  /* Stage height — must be ≥ N × segment-vh + 100vh sticky hold. */
  --hms-stage-h: 760vh;
}

[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 in the viewport.  JS drives its
   opacity from 1 → 0 over the first card's segment so it fades
   as the first card lands. */
.hms-hero {
  position: absolute;
  /* Hero centred at 40% so its lower edge stays clear of the
     first card's initial peek (card top ≈ 72vh from top).
     Mobile breakpoint overrides this to 30%. */
  top: 40%;
  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: "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: #fff;
  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;
}

/* ── O hover affordance ──
   The "O" of "One" cross-fades into the brand O-svg (the same
   shape used for the cursor follower) on hover.  Trigger is
   the entire H1 — hovering anywhere on the phrase fires the
   swap.  Parent .hms-hero stays pointer-events: none so the
   cards below stay interactive; the H1 re-enables on its own
   bounding box. */
.hms-hero-h1 {
  pointer-events: auto;
  cursor: default;
}

.hero-o {
  position: relative;
  display: inline-block;
  font-style: normal;
}

.hero-o-letter {
  display: inline-block;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-o-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.92em;
  height: 0.92em;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #7C4FE8;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hms-hero-h1:hover .hero-o-letter { opacity: 0; }
.hms-hero-h1:hover .hero-o-svg { opacity: 1; }

/* Card — absolutely centred at viewport centre.  --card-y
   is set by JS each frame in vh (0 = centred, ~80 = below;
   becomes negative after the card has landed and subsequent
   cards push it up the deck).  Cubic ease-out on the rise
   gives the brake-into-place feel. */
.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;
  /* DS --radius-display (20px) — bigger pillow corners than
     the standard --radius-lg used elsewhere; reads as a
     marketing/display surface, not a panel. */
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  /* Fill is the page background — the border is what defines
     the card boundary against the page, not a surface shift. */
  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 — each successive card stacks on top of
   the previous so the latest deal sits at the front.
   The first card's --card-y also defaults to 50vh so on first
   paint (before JS sets the value) it already peeks 50% from
   the viewport bottom. */
.hms-card[data-product="api"]              { z-index: 1; --card-y: 50vh; }
.hms-card[data-product="browser-sessions"] { z-index: 2; }
.hms-card[data-product="extract"]          { z-index: 3; }
.hms-card[data-product="crawl"]            { z-index: 4; }
.hms-card[data-product="monitor"]          { z-index: 5; }
.hms-card[data-product="batch"]            { z-index: 6; }
.hms-card[data-product="mcp"]              { z-index: 7; }
.hms-card[data-product="cli"]              { z-index: 8; }
.hms-card[data-product="help"]             { z-index: 9; }

/* Content zone — left half.  Same fill as the page bg so the
   card surface reads as a window framed by the border, with
   the gradient living only in the mesh half. */
.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: "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-what code {
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: 0.9em;
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-primary);
}

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

.hms-card-data dt {
  font-size: var(--text-tiny, 11px);
  font-weight: 500;
  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: 500;
  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); }

/* ── Inline mini-app (.hms-try) ──────────────────────────
   Per-product interactive bit that lives inside the card's
   mesh half — a dark glass panel layered over the bright
   per-product gradient.  On submit, products.js stashes the
   form values in localStorage AND mirrors them onto the
   /signup URL so the app can prefill the matching panel
   after login. */
.hms-card-mesh {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 1.8vw, 28px);
}

.hms-try {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-400, 14px);
  padding: clamp(20px, 1.8vw, 26px);
  border-radius: var(--radius-300, 12px);
  /* Dark glass on the gradient — translucent dark slate so
     the colour bleeds through but the form chrome stays
     readable against any per-product palette. */
  background: rgba(29, 22, 18, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform: translateZ(0);
  backface-visibility: hidden;
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 56px -20px rgba(0, 0, 0, 0.6);
}

.hms-try-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hms-try-label {
  font-size: var(--text-tiny, 11px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.hms-try-input {
  width: 100%;
  height: var(--control-height-lg, 40px);
  padding: 0 var(--control-px-lg, 14px);
  border-radius: var(--radius-default, 6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--text-small, 13px);
  outline: none;
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background 180ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hms-try-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.hms-try-input:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.hms-try-input:focus,
.hms-try-input:focus-visible {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

/* Multi-line variant — used by Batch (URL list) and Help
   (free-form message).  Same focus / hover treatment as the
   single-line input. */
.hms-try-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 10px 14px;
  border-radius: var(--radius-default, 6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--text-small, 13px);
  line-height: 1.45;
  outline: none;
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background 180ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hms-try-textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.hms-try-textarea:hover { border-color: rgba(255, 255, 255, 0.32); }
.hms-try-textarea:focus,
.hms-try-textarea:focus-visible {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

/* Used by cards with no URL input (MCP, CLI) — the segments
   are the primary field, and the submit sits alone on its own
   row, right-aligned. */
.hms-try-actions {
  display: flex;
  justify-content: flex-end;
}

/* Single row holding the segmented control on the left and
   the submit on the right, below the URL input.  nowrap so
   the submit always sits in the same lane as the segments —
   if the chips' total width gets tight, the segments group
   shrinks first (min-width: 0) and the submit keeps its size
   (flex-shrink: 0). */
.hms-try-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.hms-try-segments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full, 999px);
  min-width: 0;
  flex-shrink: 1;
}

.hms-try-chip { white-space: nowrap; }

.hms-try-chip {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-base);
  font-size: var(--text-small, 13px);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hms-try-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.hms-try-chip.is-active {
  background: #fff;
  color: #1D1612;
}

.hms-try-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--control-height-lg, 40px);
  padding: 0 22px;
  border: none;
  border-radius: var(--radius-full, 999px);
  background: #fff;
  color: #1D1612;
  flex-shrink: 0;
  font-family: var(--font-base);
  font-size: var(--text-small, 13px);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hms-try-submit > span:last-child {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-try-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -12px rgba(255, 255, 255, 0.4);
}

.hms-try-submit:hover > span:last-child { transform: translateX(4px); }

.hms-try-submit:active { transform: translateY(0); }

/* Mesh zone — right half.  Vivid per-product gradients in the
   home Act 4 register: bright saturated base + softer bloom
   layers via blur on a ::after pseudo so the colour pops
   without flattening to a single hue.  Hardcoded hex (brand
   palette in light-mode values) so the DS dark-mode token
   inversion doesn't mute the colour. */
.hms-card-mesh {
  position: relative;
  overflow: hidden;
}

/* No seam fade between content fill and mesh gradient — Pablo's
   call: a hard edge between the two halves reads better than a
   blurred transition.  The card border carries the boundary; the
   gradient stays crisp at its left edge. */

/* Default + per-product gradients.  Vivid: high-saturation
   radials over a brand-tinted linear base. */
.hms-card-mesh,
.hms-card[data-product="api"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #B79CFF, transparent 55%),
    radial-gradient(circle at 78% 75%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #5635C9 0%, #2A1A66 100%);
}
.hms-card[data-product="browser-sessions"] .hms-card-mesh {
  background:
    radial-gradient(circle at 32% 38%, #FFB870, transparent 55%),
    radial-gradient(circle at 78% 75%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #6B3A66 0%, #2E1740 100%);
}
.hms-card[data-product="extract"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #7ADAE6, transparent 55%),
    radial-gradient(circle at 75% 75%, #5BE0AC, transparent 55%),
    linear-gradient(135deg, #1F6C7C 0%, #0E323A 100%);
}
.hms-card[data-product="monitor"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #7C4FE8, transparent 55%),
    radial-gradient(circle at 78% 75%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #2A1A66 0%, #1D1612 100%);
}
.hms-card[data-product="batch"] .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%, #161A4F 100%);
}
.hms-card[data-product="mcp"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #E07AC8, transparent 55%),
    radial-gradient(circle at 78% 75%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #7A2E8A 0%, #2C1340 100%);
}
.hms-card[data-product="cli"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #6FDE7E, transparent 55%),
    radial-gradient(circle at 78% 75%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #1F6C4D 0%, #0E3225 100%);
}
.hms-card[data-product="search"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #7ADAE6, transparent 55%),
    radial-gradient(circle at 78% 75%, #9B6FFF, transparent 55%),
    linear-gradient(135deg, #17707E 0%, #0C2D34 100%);
}
.hms-card[data-product="sdk"] .hms-card-mesh {
  background:
    radial-gradient(circle at 30% 35%, #9B6FFF, transparent 55%),
    radial-gradient(circle at 78% 75%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #4A2EA8 0%, #1E1248 100%);
}
.hms-card[data-product="help"] .hms-card-mesh {
  background:
    radial-gradient(circle at 50% 40%, #7C4FE8, transparent 60%),
    radial-gradient(circle at 50% 75%, #7ADAE6, transparent 60%),
    linear-gradient(135deg, #2A1A66 0%, #100B21 100%);
}

/* Help card — dashed border so it reads as a soft CTA, not
   a product to evaluate. */
.hms-card--help { border-style: dashed; }
.hms-card--help .hms-card-content {
  text-align: center;
  align-items: center;
  justify-content: center;
}
.hms-card--help .hms-card-what { max-width: 320px; }

/* ───────────────────────────────────────────────────────────
   Act 2 — Compose them.

   Dark section continuing the storytelling from the stack act
   above.  Each composition is a card with a chapter index, a
   title, a one-line body, and a "stack" row showing two
   product minis paired by a "+".  Each mini carries the same
   mesh gradient as the corresponding card in the stack above,
   so the reader recognises them as the products they just
   scrolled through.

   Reveal motion: the minis slide in from the left and right;
   the "+" pops in with overshoot once both have arrived,
   reading as two products meeting at the centre.
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  background: var(--background);
  position: relative;
}

.compose-intro {
  max-width: 1280px;
  margin: 0 auto var(--space-2000, 80px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.compose-intro.revealed { opacity: 1; transform: none; }

.compose-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 28px);
}

.compose-card {
  position: relative;
  background: var(--background);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  padding: clamp(28px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--space-400, 16px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.compose-card.revealed { opacity: 1; transform: none; }

.compose-grid > article:nth-child(1) { transition-delay: 0ms; }
.compose-grid > article:nth-child(2) { transition-delay: 100ms; }
.compose-grid > article:nth-child(3) { transition-delay: 200ms; }
.compose-grid > article:nth-child(4) { transition-delay: 300ms; }

.compose-card-index {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--text-tiny, 11px);
  letter-spacing: 0.18em;
  color: var(--text-quaternary, var(--text-tertiary));
}

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

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

.compose-card-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-600, 24px);
  border-top: 1px solid var(--border-subtle);
}

/* Product mini-card — same content-on-left / mesh-on-right
   anatomy as the big .hms-card from the stack above, just
   condensed.  Each carries data-product so the per-product
   mesh selectors below paint the matching gradient. */
.compose-mini {
  display: grid;
  grid-template-columns: 1fr 36%;
  align-items: stretch;
  width: 200px;
  height: 64px;
  border-radius: var(--radius-default, 6px);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  background: var(--background);
  flex-shrink: 0;
}

.compose-mini-name {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: "Rawest", system-ui, sans-serif;
  font-size: var(--text-small, 13px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: var(--tracking-dense);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compose-mini-mesh {
  position: relative;
  overflow: hidden;
}

/* Same per-product gradients as .hms-card[data-product] .hms-card-mesh,
   re-applied here so the mini visually echoes the big card. */
.compose-mini[data-product="api"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 25% 35%, #B79CFF, transparent 55%),
    radial-gradient(circle at 78% 70%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #261c4f 0%, #100b21 100%);
}
.compose-mini[data-product="browser-sessions"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 30% 35%, #FFB870, transparent 55%),
    radial-gradient(circle at 78% 70%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #2b1e3f 0%, #150e25 100%);
}
.compose-mini[data-product="extract"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 30% 35%, #7ADAE6, transparent 55%),
    radial-gradient(circle at 78% 70%, #5BE0AC, transparent 55%),
    linear-gradient(135deg, #142a36 0%, #0c1820 100%);
}
.compose-mini[data-product="monitor"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 28% 35%, #B79CFF, transparent 55%),
    radial-gradient(circle at 78% 70%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #2a1740 0%, #15101e 100%);
}
.compose-mini[data-product="batch"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 28% 35%, #6E8CFF, transparent 55%),
    radial-gradient(circle at 78% 70%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #1c204d 0%, #0d1029 100%);
}
.compose-mini[data-product="mcp"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 30% 35%, #E07AC8, transparent 55%),
    radial-gradient(circle at 78% 70%, #B79CFF, transparent 55%),
    linear-gradient(135deg, #2a1640 0%, #14092c 100%);
}
.compose-mini[data-product="cli"] .compose-mini-mesh {
  background:
    radial-gradient(circle at 28% 35%, #6FDE7E, transparent 55%),
    radial-gradient(circle at 78% 70%, #7ADAE6, transparent 55%),
    linear-gradient(135deg, #112a1f 0%, #0a1814 100%);
}

/* Reveal animation: minis slide in from the sides, op pops
   between them after they arrive.  Keyed off the parent
   .compose-card.revealed class added by the IntersectionObserver. */
.compose-mini--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.compose-mini--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms,
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.compose-card.revealed .compose-mini--left,
.compose-card.revealed .compose-mini--right {
  opacity: 1;
  transform: none;
}

.compose-op {
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-tertiary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms,
              transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms;
}

.compose-card.revealed .compose-op {
  opacity: 1;
  transform: scale(1);
}

/* ───────────────────────────────────────────────────────────
   Act 3 — Closer.  Word-pop H2, primary CTA + boundary strip.
─────────────────────────────────────────────────────────── */

[data-act="3"] {
  background: var(--background);
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.closer-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-800, 32px);
  max-width: 720px;
}

.closer-h2 {
  margin: 0;
  font-family: "Rawest", system-ui, sans-serif;
  font-size: var(--display-large);
  line-height: var(--leading-display-large);
  letter-spacing: var(--tracking-dense);
  font-weight: 500;
  color: #fff;
  text-wrap: balance;
}

.closer-line {
  display: inline-flex;
  gap: 0.22em;
  flex-wrap: wrap;
  justify-content: center;
}

.closer-h2 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transition: opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.closer-h2.visible .word { opacity: 1; transform: none; }
.closer-h2.visible .word:nth-child(1) { transition-delay: 0ms; }
.closer-h2.visible .word:nth-child(2) { transition-delay: 80ms; }
.closer-h2.visible .word:nth-child(3) { transition-delay: 160ms; }

.closer-emphasis {
  font-style: normal;
  background-image: linear-gradient(#7ADAE6, #7ADAE6);
  background-repeat: no-repeat;
  background-position: 0 calc(100% + 0.06em);
  background-size: 0% 4px;
  padding-bottom: 0.16em;
  transition: background-size 900ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}

.closer-h2.visible .closer-emphasis { background-size: 100% 4px; }

.closer-sub {
  margin: 0;
  font-size: var(--text-large, 15px);
  color: var(--text-tertiary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 400ms,
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.closer-h2.visible ~ .closer-sub { opacity: 1; transform: none; }

.closer-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-600, 24px);
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 600ms,
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}

.closer-h2.visible ~ .closer-actions { opacity: 1; transform: none; }

.closer-secondary {
  font-size: var(--text-small, 13px);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 180ms;
}

.closer-secondary:hover { text-decoration-color: rgba(255, 255, 255, 0.8); }

/* ── Responsive ─────────────────────────────────────────── */

/* Wide-desktop scaling — Pablo's iMac concern.  Default caps
   are tuned for ~1440-1600px laptops; on bigger displays the
   card stack was sitting in a narrow slice with empty space
   around it.  Bumping card width, hero typography, glass-form
   width, and compose-mini scale at three tiers so the page
   uses more of the available viewport on large monitors. */

@media (min-width: 1600px) {
  :root {
    --hms-card-w: min(1400px, 88vw);
    --hms-card-h: clamp(440px, 58vh, 640px);
  }
  /* Hero container has to grow alongside the H1 font-size or
     the line wraps to 3 lines on wide displays — Pablo's iMac
     bug.  Subhead also gets more room so it doesn't crowd
     into the first card peeking from below. */
  .hms-hero { width: min(1200px, 90vw); }
  
  .hms-hero-sub { font-size: var(--mkt-body); max-width: 760px; }
  .hms-card-mesh .hms-try { max-width: 480px; }
  /* Compose container + cards grow with the hero. */
  .compose-intro,
  .compose-grid { max-width: 1480px; }
  .compose-grid { gap: clamp(24px, 2vw, 32px); }
  .compose-card { padding: clamp(32px, 2.4vw, 44px); }
  .compose-card-title { font-size: var(--mkt-h4); }
  .compose-card-body { font-size: var(--mkt-body); }
  [data-act="2"] .act-frame-line { font-size: clamp(40px, 3.4vw, 56px); }
}

@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; }
  .hms-card-mesh .hms-try { max-width: 520px; }
  .compose-intro,
  .compose-grid { max-width: 1720px; }
  .compose-grid { gap: clamp(28px, 2vw, 40px); }
  .compose-card { padding: clamp(36px, 2.4vw, 52px); }
  .compose-card-body { font-size: var(--mkt-lead); }
  .compose-mini { width: 260px; height: 76px; }
  [data-act="2"] .act-frame-line { font-size: clamp(48px, 3.4vw, 72px); }
  
}

@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; }
  .hms-card-mesh .hms-try { max-width: 560px; }
  .compose-intro,
  .compose-grid { max-width: 2080px; }
  .compose-grid { gap: clamp(32px, 2vw, 48px); }
  .compose-card { padding: clamp(40px, 2.4vw, 60px); }
  .compose-mini { width: 300px; height: 88px; }
  [data-act="2"] .act-frame-line { font-size: clamp(56px, 3.4vw, 88px); }
}

@media (max-width: 1023px) {
  .compose-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Mobile: drop the teal underline on the closer emphasis word. The
     reveal still fires here, but the drawn underline reads as misaligned
     and out of step with desktop. background-image:none kills it
     regardless of the reveal's background-size. Plain white word. */
  .closer-emphasis { background-image: none; padding-bottom: 0; }

  :root {
    --hms-card-w: 92vw;
    /* Taller card so the content half has room for name + what
       + dl + Open without spilling into the mesh half below. */
    --hms-card-h: clamp(560px, 80vh, 720px);
    --hms-card-segment-vh: 70;
    --hms-stage-h: 700vh;
    /* Push non-peeking cards safely off the viewport bottom.
       Card top at scroll=0 sits at `50vh - half-card-h + var`.
       With card-h up to 80vh (half = 40vh), card-y-below needs
       to be ≥ 90vh so the card top lands at ≥ 100vh (off
       screen).  Otherwise the last card's top peeks above the
       viewport bottom on tall mobile viewports — Pablo flagged
       this for the help card. */
    --hms-card-y-below: 100;
  }

  /* Mobile cards: vertical split — content on top, mesh on
     bottom.  Content gets `auto` height (just enough for its
     own content) and the mesh fills the remainder, so the Open
     CTA at the bottom of the content never overflows into the
     gradient below. */
  .hms-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hms-card-content {
    padding: 22px;
    /* Ensure the content half doesn't try to stretch beyond its
       natural height — the Open CTA stays inside its own row. */
    min-height: 0;
  }

  /* The mesh half clips its overflow so the glass form never
     bleeds beyond the bottom edge of the card. */
  .hms-card-mesh {
    overflow: hidden;
    padding: 22px;
  }

  /* Stack the segments and submit vertically on narrow mobile.
     The horizontal row (.hms-try-row, default flex-direction:
     row with nowrap) overflows once the chip labels run long
     (Card 2 "Net idle / Selector", Card 4 "Hourly / Daily /
     Weekly", etc.) — submit gets clipped or wrapped weirdly.
     Vertical stack keeps both readable. */
  .hms-try-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* Segments group keeps its natural inline-flex width (same
     as desktop) — only centred horizontally in the column.
     The previous `align-self: stretch` made the pill grow to
     full row width and centred the chips inside, which read
     as the segmented control having random extra padding when
     the chip set was narrow.  align-self: center keeps the
     component visually identical to the desktop version. */
  .hms-try-segments {
    align-self: center;
  }
  .hms-try-submit {
    align-self: stretch;
    justify-content: center;
  }
  .hms-try-actions {
    justify-content: stretch;
  }
  .hms-try-actions .hms-try-submit { width: 100%; }

  main > section:not([data-act="1"]) {
    padding: var(--space-2400, 96px) 20px;
  }

  /* On mobile the first card peeks higher (card is taller +
     starts at the same --hms-card-y-first), so push the hero
     up the viewport to keep a comfortable gap between the H1
     bottom and the card top edge. */
  .hms-hero {
    top: 30%;
    /* Constrain the hero to the visible viewport so the H1
       can't render a one-liner wider than the screen — Pablo
       flagged the text overflowing horizontally at 375px.
       Without calc() the subtraction silently invalidates the
       whole min() expression. */
    width: min(92vw, calc(100% - 24px));
    box-sizing: border-box;
    padding: 0 12px;
  }

  .hms-hero-h1 {
    /* Cap font tightly on narrow phones — clamp default
       --display-medium pinned at 28px which made the H1 a
       single 380+px line that overflowed a 345px container.
       Replace text-wrap: balance (was preventing line breaks)
       with default and an explicit max-width to force wrap. */
    font-size: var(--mkt-h4);
    line-height: 1.15;
    max-width: 100%;
    width: 100%;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }

  .hms-hero-sub {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hms-card-data { grid-template-columns: 1fr; gap: 4px 0; }
  .hms-card-data dt { margin-top: 6px; }

  

  /* Compose minis on mobile: stack as a centred column with
     the "+" between them.  The horizontal row's flex-wrap was
     producing a misaligned 2-line layout — Mini A + "+" on
     line 1, Mini B alone on line 2, with the line-centres
     offset.  Column avoids that.  Reveal motion swaps from
     translateX to translateY so the metaphor of two products
     converging still works on the vertical axis. */
  .compose-card-stack {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .compose-mini--left  { transform: translateY(-30px); }
  .compose-mini--right { transform: translateY(30px); }
}

/* ── Reduced motion + no-JS fallbacks
   Stage collapses to a vertical stack — hero on top, cards in
   sequence below with normal gap, no overlap. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  .hms-stage { min-height: 0; }
  .hms-frame {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--space-2400, 96px) clamp(20px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1200, 48px);
  }
  .hms-hero {
    position: static;
    transform: none;
    pointer-events: auto;
  }
  .hms-card {
    position: static;
    transform: none;
  }
  .compose-card,
  .compose-intro { opacity: 1; transform: none; }
  .closer-h2 .word { opacity: 1; transform: none; }
  .closer-emphasis { background-size: 100% 4px; }
}

html:not(.js) .hms-stage { min-height: 0; }
html:not(.js) .hms-frame {
  position: static;
  height: auto;
  overflow: visible;
  padding: var(--space-2400, 96px) clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1200, 48px);
}
html:not(.js) .hms-hero {
  position: static;
  transform: none;
  pointer-events: auto;
}
html:not(.js) .hms-card {
  position: static;
  transform: none;
}
html:not(.js) .compose-card,
html:not(.js) .compose-intro { opacity: 1; transform: none; }
html:not(.js) .closer-h2 .word { opacity: 1; transform: none; }
html:not(.js) .closer-emphasis { background-size: 100% 4px; }
html:not(.js) .closer-sub,
html:not(.js) .closer-actions { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   Audience switcher + BU light theme. */
[data-audience-tech][hidden],
[data-audience-bu][hidden] { display: none !important; }

.audience-switch {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 250;
  display: grid;
  grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform;
  transform: translateY(-50%) translateZ(0);
  backface-visibility: hidden;
}
.audience-switch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: #7C4FE8;
  z-index: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body[data-audience="bu"] .audience-switch::before {
  transform: translateY(100%);
}
.audience-switch-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 16px 11px;
  cursor: pointer;
  font-family: var(--font-code, var(--font-mono), "IBM Plex Mono", monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
  writing-mode: vertical-rl;
}
.audience-switch-btn[aria-pressed="true"] { color: #FFFFFF; }

@media (max-width: 720px) {
  .audience-switch {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: translateZ(0);
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .audience-switch::before {
    top: 0; left: 0; right: auto; bottom: auto;
    width: 50%; height: 100%;
  }
  body[data-audience="bu"] .audience-switch::before { transform: translateX(100%); }
  .audience-switch-btn {
    writing-mode: horizontal-tb;
    padding: 10px 18px;
    font-size: 10px;
  }
}

/* ── BU light mode body + chrome ── */
html:not(.dark) body {
  background: var(--background);
  color: var(--text-primary);
}
html:not(.dark) .audience-switch {
  background: var(--zen-gray-1);
  border-color: var(--border-default);
  box-shadow: 0 12px 28px -12px rgba(29, 22, 18, 0.18);
}

/* Mq12 on every heading in BU + flip text color from hardcoded
   #fff (correct on dark) to --text-primary (dark on light). */
html:not(.dark) .hms-hero-h1,
html:not(.dark) .act-frame-line,
html:not(.dark) .closer-h2 {
  font-family: 'Mq12', system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-primary);
}
/* Closer ::emphasis underline + words also use white in tech.
   Force inherit so they read on light. */
html:not(.dark) .closer-h2 .word,
html:not(.dark) .closer-emphasis { color: inherit; }

/* Topbar inversion. */

/* Nav popover light variant. */
html:not(.dark) .nav-dropdown {
  background: #FFFFFF;
  border-color: var(--border-subtle);
  box-shadow: 0 28px 56px -20px rgba(29, 22, 18, 0.18);
}
html:not(.dark) .nav-mega-item > a { color: var(--text-secondary); }
html:not(.dark) .nav-mega-item > a:hover,
html:not(.dark) .nav-mega-item > a:focus-visible {
  background: var(--sunken-hover);
  color: var(--text-primary);
}
html:not(.dark) .nav-mega-item.is-active > a {
  background: var(--sunken-active);
  color: var(--text-primary);
}
html:not(.dark) .nav-mega-item > span { color: var(--text-tertiary); }
html:not(.dark) .nav-mega-item.is-active > span {
  background: var(--sunken-active);
  color: var(--text-secondary);
}
html:not(.dark) .nav-mega-group-label { color: var(--text-tertiary); }
html:not(.dark) .nav-mega-headline {
  background-color: #1D1612;
  border-color: rgba(29, 22, 18, 0.18);
}
html:not(.dark) .nav-mega-preview-desc { color: var(--text-secondary); }