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

/* ──────────────────────────────────────────────────────────
   /workflows — Master overview.

   Productized agent workflows.  Two surfaces per workflow:
   a slash-command for an agent + a vertical landing for a
   buyer.  WIP: Act 1 lands first; acts 2 (catalog), 3 (why
   two shapes), 4 (closer) follow.
─────────────────────────────────────────────────────────── */


main {
  position: relative;
  z-index: 1;
}

.back-to-top { cursor: pointer; }

/* ──────────────────────────────────────────────────────────
   Act 1 — Duality hero (sticky scroll stage).

   The hero pins to the viewport while the user scrolls; the
   stage is ~420vh tall, so the reader scrolls ~320vh through
   7 workflows.  Each workflow occupies a slice of the scroll
   range and updates both shapes (slash-command + landing
   name) in sync.  Dots beneath reflect progress and act as
   snap-to-index controls.

   Asymmetric diagonal composition: slash-command top-left
   (mono, agent shape), landing display name bottom-right
   (display, web shape).  No wire, no buttons — scroll is the
   only interaction.
─────────────────────────────────────────────────────────── */

[data-act="1"] {
  position: relative;
  /* Each workflow gets ~100vh of scroll budget (700vh total /
     7 workflows) — wide enough that a typical trackpad flick
     advances exactly one slice instead of skipping two. */
  min-height: 700vh;
  background: var(--background);
  overflow: clip;
}

.wf-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(48px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vh, 48px);
}

.wf-hero-kicker {
  align-self: flex-start;
  margin: 0;
}

/* ── Duality widget — bordered panel, single-line ──────────
   No-fill block: transparent bg, hairline --border-subtle,
   purple→teal top-edge illumination that fades in on hover.
   Same recipe as .mc-setup-card / .sb-fw-card elsewhere on
   the site — the widget reads as a discrete "card" without
   competing with the page's neutral dark surface.

   Inside: slash-command on the left, arrow in the middle,
   landing display name on the right — all on ONE row at
   every breakpoint. */
.wf-duality {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(20px, 3vh, 32px) clamp(22px, 3vw, 40px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  color: var(--text-primary);
  /* Each shape stays on one line; if the row is wider than
     the container at very narrow viewports, the widget scrolls
     internally rather than wrapping. */
  white-space: nowrap;
  overflow-x: auto;
  /* Hide the scrollbar visually but keep accessibility. */
  scrollbar-width: none;
  transition: border-color 240ms ease;
}
.wf-duality::-webkit-scrollbar { display: none; }

/* (.wf-duality cursor:none rule removed — the duality widget
   no longer exists in the overview after the hms-card refactor.) */

/* Top edge illumination — purple→teal gradient bar that
   fades in on hover.  Matches the recipe from
   .mc-setup-card::before and .sb-fw-card::before. */
.wf-duality::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #7C4FE8 0%,
    var(--zen-cyan-6, #7ADAE6) 35%,
    transparent 80%
  );
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.wf-duality:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.wf-duality:hover::before {
  opacity: 1;
}

/* Slash-command — mono, compact, dimmer than the display
   name so the eye registers it as "the agent's compact
   form". */
.wf-duality-command {
  flex-shrink: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: clamp(15px, 1.8vw, 26px);
  line-height: 1.1;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  padding: 0;
  background: transparent;
  border: 0;
  transition: opacity 220ms ease;
}

/* Arrow — quiet connector between the two shapes. */
.wf-duality-arrow {
  flex-shrink: 0;
  display: inline-block;
  font-family: var(--font-base);
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1;
  color: var(--text-quaternary);
  font-weight: 400;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wf-duality.is-swapping .wf-duality-arrow {
  transform: translateX(4px);
}

/* Landing display name — editorial display, the visual
   weight of the widget. */
.wf-duality-name {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h3);
  line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  transition: opacity 220ms ease;
}

/* Crossfade behavior — JS toggles is-swapping for ~200ms while
   the underlying text content updates. */
.wf-duality.is-swapping .wf-duality-command,
.wf-duality.is-swapping .wf-duality-name {
  opacity: 0.2;
}

/* ── Sub copy ─────────────────────────────────────────── */

.wf-hero-sub {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
  align-self: center;
  text-align: center;
}

/* ── Dots — scroll-progress indicator + magnetic hover ──────
   The active dot is an elongated pill (32px wide), other dots
   are circles.  When the cursor enters the rail, dots scale
   based on proximity (closest = biggest) via the --dot-scale
   custom property set by JS — a small macOS-dock-style delight
   moment. */

.wf-hero-dots {
  list-style: none;
  margin: 0;
  padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1vw, 14px);
  display: flex;
  gap: 12px;
  align-items: center;
  align-self: center;
}

.wf-hero-dots li {
  display: flex;
  align-items: center;
}

.wf-hero-dot {
  appearance: none;
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
  transform: scale(var(--dot-scale, 1));
  transform-origin: center;
  transition:
    width 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    height 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 220ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-hero-dot:hover {
  background: color-mix(in srgb, var(--text-primary) 60%, transparent);
}

/* Active dot — elongated pill in brand purple. */
.wf-hero-dot.is-active {
  width: 32px;
  background: #7C4FE8;
}

@media (min-width: 1600px) {
  .wf-hero-dot { width: 10px; height: 10px; }
  .wf-hero-dot.is-active { width: 40px; }
}

@media (min-width: 1920px) {
  .wf-hero-dot { width: 11px; height: 11px; }
  .wf-hero-dot.is-active { width: 48px; }
}

/* (.wf-hero-dot cursor:none rule removed — the hero-dot widget
   no longer exists in the overview after the hms-card refactor.) */

/* ── Mobile responsive ───────────────────────────────────
   Stage shrinks; the duality stays a single-row teal widget
   at every breakpoint, internally scrollable if the row is
   wider than the container (we never stack the shapes).
─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  [data-act="1"] {
    /* Slightly tighter on mobile where viewport is shorter and
       fewer pixels per slice are needed. */
    min-height: 560vh;
  }
  .wf-hero {
    padding: clamp(96px, 13vh, 140px) clamp(18px, 5vw, 32px) clamp(40px, 6vh, 64px);
    gap: clamp(24px, 4vh, 40px);
  }
}

@media (max-width: 600px) {
  .wf-duality {
    gap: 10px;
    padding: 16px 20px;
  }
  .wf-duality-command {
    font-size: 13px;
  }
  .wf-duality-name {
    font-size: clamp(18px, 5.4vw, 22px);
  }
  .wf-duality-arrow {
    font-size: 14px;
  }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .wf-hero { max-width: 1380px; }
  .wf-duality-command { font-size: 30px; }
  .wf-duality-name { font-size: 56px; }
  .wf-duality-arrow { font-size: 28px; }
  .wf-hero-sub { font-size: 19px; max-width: 680px; }
}

@media (min-width: 1920px) {
  .wf-hero { max-width: 1600px; }
  .wf-duality-command { font-size: 34px; }
  .wf-duality-name { font-size: 64px; }
  .wf-duality-arrow { font-size: 32px; }
  .wf-hero-sub { font-size: 20px; max-width: 720px; }
}

@media (min-width: 2400px) {
  .wf-hero { max-width: 1880px; }
  .wf-duality-command { font-size: 42px; }
  .wf-duality-name { font-size: 80px; }
  .wf-duality-arrow { font-size: 40px; }
  .wf-hero-sub { font-size: 23px; max-width: 820px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-duality-command,
  .wf-duality-name {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 2 — Catalog (editorial ledger).

   Topology distinct from Act 1: left-anchored editorial
   column with an ordered ledger of 7 workflows.  Each row
   carries both shapes on a single line — slash-command +
   arrow + landing name — plus a blurb and an Open affordance
   that surfaces on hover.  Neutral dark bg, no saturated
   band.  The flagship row (--wedge) carries a small italic
   "· the wedge" mark inline with its name.
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  position: relative;
  background: var(--background);
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 80px) clamp(96px, 14vh, 180px);
}

.wf-catalog {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.wf-catalog-head {
  max-width: 760px;
  margin: 0 0 clamp(40px, 6vh, 72px);
}

.wf-catalog-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.028em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.wf-catalog-h em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.wf-catalog-sub {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 580px;
  text-wrap: pretty;
}

/* ── Ledger list ─────────────────────────────────────── */

.wf-catalog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wf-catalog-row {
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-catalog-row.is-revealed {
  opacity: 1;
  transform: none;
}

.wf-catalog-link {
  display: grid;
  grid-template-columns:
    /* number */          36px
    /* slash-command */   minmax(0, 1.4fr)
    /* arrow */           auto
    /* landing name */    minmax(0, 1.4fr)
    /* blurb */           minmax(0, 2fr)
    /* open affordance */ auto;
  align-items: baseline;
  column-gap: clamp(16px, 1.8vw, 28px);
  padding: clamp(20px, 2.6vh, 32px) clamp(8px, 1.4vw, 20px);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background-color 240ms ease, padding-left 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover effects only on real <a> rows (the flagship today).
   .--coming rows are <div>s and do not lift. */
a.wf-catalog-link:hover,
a.wf-catalog-link:focus-visible {
  background: var(--sunken-hover, color-mix(in srgb, var(--text-primary) 4%, transparent));
  padding-left: clamp(16px, 2vw, 28px);
  outline: none;
}

.wf-catalog-n {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
  align-self: center;
}

.wf-catalog-slash {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-sm);
  line-height: 1.2;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  word-break: keep-all;
  align-self: center;
}

.wf-catalog-arrow {
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  color: var(--text-quaternary);
  font-weight: 400;
  align-self: center;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), color 240ms ease;
}

a.wf-catalog-link:hover .wf-catalog-arrow,
a.wf-catalog-link:focus-visible .wf-catalog-arrow {
  transform: translateX(4px);
  color: var(--zen-purple-7, #7C4FE8);
}

.wf-catalog-name {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h4);
  line-height: 1.15;
  letter-spacing: var(--tracking-dense, -0.018em);
  font-weight: 500;
  color: var(--text-primary);
  align-self: center;
}

/* Inline "· the wedge" mark on the flagship row — italic and
   muted so it reads as an annotation, not a competing claim. */
.wf-catalog-mark {
  font-family: var(--font-base);
  font-style: italic;
  font-size: 0.55em;
  font-weight: 400;
  color: var(--zen-purple-7, #7C4FE8);
  letter-spacing: 0;
}

.wf-catalog-blurb {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
  color: var(--text-tertiary);
  text-wrap: pretty;
  align-self: center;
}

/* Open affordance — hidden at rest, fades in on row hover. */
.wf-catalog-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--zen-purple-7, #7C4FE8);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  align-self: center;
  white-space: nowrap;
}

.wf-catalog-open svg {
  width: 14px;
  height: 14px;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.wf-catalog-link:hover .wf-catalog-open,
a.wf-catalog-link:focus-visible .wf-catalog-open {
  opacity: 1;
  transform: translateX(0);
}

a.wf-catalog-link:hover .wf-catalog-open svg {
  transform: translateX(3px);
}

/* Flagship row — subtly elevated.  Background tint + italic
   name mark already carry the wedge framing. */
.wf-catalog-row--wedge .wf-catalog-link {
  background: color-mix(in srgb, var(--zen-purple-7, #7C4FE8) 5%, transparent);
}
.wf-catalog-row--wedge .wf-catalog-link:hover,
.wf-catalog-row--wedge .wf-catalog-link:focus-visible {
  background: color-mix(in srgb, var(--zen-purple-7, #7C4FE8) 10%, var(--sunken-hover, transparent));
}
.wf-catalog-row--wedge .wf-catalog-name {
  font-style: italic;
}

/* (.wf-catalog-link cursor:none rule removed — class no longer
   exists in the HTML; CTAs to other pages use native pointer.) */

/* Coming-soon rows: dimmed, non-interactive, no hover lift. */
.wf-catalog-link--coming {
  opacity: 0.6;
}

.wf-catalog-link--coming .wf-catalog-arrow {
  color: var(--text-quaternary);
}

.wf-catalog-soon {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-quaternary);
  white-space: nowrap;
  align-self: center;
}

/* ── Mobile + tablet ───────────────────────────────────
   Collapse the 6-column grid into a 2-row layout per entry:
   row 1 has number + slash + arrow + landing name; row 2 has
   the blurb + open affordance. */
@media (max-width: 1100px) {
  .wf-catalog-link {
    grid-template-columns: 32px auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .wf-catalog-n     { grid-column: 1; grid-row: 1; }
  .wf-catalog-slash { grid-column: 2; grid-row: 1; }
  .wf-catalog-arrow { grid-column: 3; grid-row: 1; }
  .wf-catalog-name  { grid-column: 4; grid-row: 1; }
  .wf-catalog-open,
  .wf-catalog-soon  { grid-column: 5; grid-row: 1; }
  .wf-catalog-blurb { grid-column: 2 / 6; grid-row: 2; }
}

@media (max-width: 700px) {
  .wf-catalog-link {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
  }
  .wf-catalog-n     { grid-column: 1; grid-row: 1 / span 3; }
  .wf-catalog-slash { grid-column: 2; grid-row: 1; }
  .wf-catalog-arrow { display: none; }
  .wf-catalog-name  { grid-column: 2; grid-row: 2; }
  .wf-catalog-blurb { grid-column: 2 / 4; grid-row: 3; }
  .wf-catalog-open,
  .wf-catalog-soon  { grid-column: 3; grid-row: 1; }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .wf-catalog { max-width: 1500px; }
  .wf-catalog-h { font-size: 68px; }
  .wf-catalog-sub { font-size: 18px; max-width: 640px; }
  .wf-catalog-name { font-size: 32px; }
  .wf-catalog-slash { font-size: 17px; }
  .wf-catalog-blurb { font-size: 16px; }
}

@media (min-width: 1920px) {
  .wf-catalog { max-width: 1720px; }
  .wf-catalog-h { font-size: 80px; }
  .wf-catalog-sub { font-size: 19px; max-width: 700px; }
  .wf-catalog-name { font-size: 36px; }
  .wf-catalog-slash { font-size: 18px; }
  .wf-catalog-blurb { font-size: 17px; }
  .wf-catalog-n { font-size: 13px; }
}

@media (min-width: 2400px) {
  .wf-catalog { max-width: 2000px; }
  .wf-catalog-h { font-size: 100px; }
  .wf-catalog-sub { font-size: 22px; max-width: 820px; }
  .wf-catalog-name { font-size: 48px; }
  .wf-catalog-slash { font-size: 22px; }
  .wf-catalog-blurb { font-size: 20px; }
  .wf-catalog-n { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-catalog-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 3 — Adjacency (editorial equation).

   Full-viewport minimalist beat.  Kicker top-left, huge
   typographic equation centred, sub + cross-link bottom-right
   — diagonal Z composition.  The ≠ symbol is a button: click
   flips it to = and the sub-note swaps to surface the dual
   meaning ("Same outcome, cross-linked").  Topology distinct
   from Act 1 (centered widget) and Act 2 (left-anchored
   ledger).
─────────────────────────────────────────────────────────── */

[data-act="3"] {
  position: relative;
  min-height: 100vh;
  background: var(--background);
  padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 80px) clamp(72px, 11vh, 120px);
  overflow: clip;
}

.wf-adj {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  min-height: calc(100vh - clamp(96px, 14vh, 160px) - clamp(72px, 11vh, 120px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  align-items: stretch;
  text-align: center;
}

.wf-adj-kicker {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  justify-self: center;
  align-self: start;
}

/* The equation — centered horizontally, vertically in the
   middle row.  Display type, no underlines, no margin. */
.wf-adj-h {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 56px);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(40px, 6.4vw, 112px);
  line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.034em);
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
}

/* The two paths live as mono code inside the display H2 — the
   contrast (display caps next to mono) is the whole point. */
.wf-adj-path {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.wf-adj-path--alt {
  color: color-mix(in srgb, var(--text-primary) 78%, transparent);
}

/* The toggle symbol.  Sits between the two paths.  Renders ≠
   by default and morphs to = when clicked. */
.wf-adj-symbol {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 6px;
  cursor: pointer;
  font: inherit;
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0;
  position: relative;
  display: inline-grid;
  place-items: center;
  color: var(--zen-purple-7, #7C4FE8);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wf-adj-symbol:hover,
.wf-adj-symbol:focus-visible {
  transform: scale(1.08);
  outline: none;
}

.wf-adj-symbol-glyph {
  grid-area: 1 / 1;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wf-adj-symbol-glyph--eq {
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
}

.wf-adj.is-eq .wf-adj-symbol-glyph--neq {
  opacity: 0;
  transform: scale(0.6) rotate(12deg);
}

.wf-adj.is-eq .wf-adj-symbol-glyph--eq {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Note line right beneath the equation — same flip mechanic.
   Two children stack in a single grid cell and cross-fade so
   the container's width follows the longest copy (no absolute
   positioning hack that would collapse the parent's width to
   zero). */
.wf-adj-note {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  margin: 0 0 clamp(40px, 6vh, 80px);
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  text-align: center;
  display: grid;
  place-items: center;
}

.wf-adj-note-state {
  grid-area: 1 / 1;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-adj-note-state--eq { opacity: 0; }
.wf-adj.is-eq .wf-adj-note-state--neq { opacity: 0; }
.wf-adj.is-eq .wf-adj-note-state--eq { opacity: 1; }

/* Centered anchor — sub copy + cross-link to /solutions.
   The shared .link-cta has align-self: flex-start built in;
   override here so it sits centered with the rest of the
   block. */
.wf-adj-bottom {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vh, 28px);
  text-align: center;
  max-width: 560px;
}

.wf-adj-bottom .link-cta {
  align-self: center;
}

.wf-adj-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.wf-adj-symbol,
.wf-adj-symbol * { cursor: pointer; }

/* ── Responsive ──────────────────────────────────────────
   On narrow viewports the diagonal Z collapses to a single
   left-anchored column.  Equation stays the focal point. */

@media (max-width: 900px) {
  .wf-adj {
    row-gap: clamp(32px, 5vh, 56px);
  }
}

@media (max-width: 600px) {
  .wf-adj-h {
    font-size: var(--mkt-h3);
    gap: 12px;
  }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .wf-adj { max-width: 1500px; }
  .wf-adj-h { font-size: 132px; }
  .wf-adj-sub { font-size: 18px; }
  .wf-adj-note { font-size: 17px; }
}

@media (min-width: 1920px) {
  .wf-adj { max-width: 1720px; }
  .wf-adj-h { font-size: 156px; }
  .wf-adj-sub { font-size: 19px; }
  .wf-adj-note { font-size: 18px; }
}

@media (min-width: 2400px) {
  .wf-adj { max-width: 2000px; }
  .wf-adj-h { font-size: 200px; }
  .wf-adj-sub { font-size: 23px; max-width: 500px; }
  .wf-adj-note { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-adj-symbol,
  .wf-adj-symbol-glyph,
  .wf-adj-note-state {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 4 — Closer.

   Top-right anchored editorial column.  Three-line H2 that
   echoes the duality from Act 1, scroll-stagger reveal with
   overshoot on the italic punchline.  CTA stack inline + a
   secondary GitHub link.  Topology distinct from every other
   act on the page.
─────────────────────────────────────────────────────────── */

[data-act="4"] {
  position: relative;
  background: var(--background);
  padding: clamp(96px, 14vh, 180px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 220px);
  display: flex;
  justify-content: center;
}

.wf-end {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wf-end-kicker {
  margin: 0 0 clamp(24px, 3vh, 36px);
}

/* Three-line H2 — each line a separate span so the reveal can
   stagger them.  Closer type is dialled smaller than the act-1
   hero / act-2 catalog headings so the CTA stack carries the
   visual weight at the end. */
.wf-end-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.028em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.wf-end-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-end-line--mark {
  font-style: normal;
  font-weight: 500;
  /* Overshoot easing on the punchline so it lands with a
     small spring. */
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wf-end-h.is-revealed .wf-end-line {
  opacity: 1;
  transform: translateY(0);
}

.wf-end-h.is-revealed .wf-end-line[data-i="0"] { transition-delay: 0ms; }
.wf-end-h.is-revealed .wf-end-line[data-i="1"] { transition-delay: 140ms; }
.wf-end-h.is-revealed .wf-end-line[data-i="2"] { transition-delay: 320ms; }

.wf-end-sub {
  margin: clamp(28px, 3.6vh, 44px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 56ch;
}

.wf-end-cta {
  margin-top: clamp(36px, 5vh, 56px);
  justify-content: center;
}

.wf-end-link {
  margin-top: clamp(24px, 3.2vh, 36px);
  align-self: center;
}

@media (max-width: 900px) {
  [data-act="4"] {
    padding: clamp(80px, 11vh, 120px) clamp(20px, 5vw, 32px) clamp(96px, 14vh, 160px);
  }
}

@media (max-width: 600px) {
  .wf-end-h {
    font-size: var(--mkt-h4);
  }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .wf-end { max-width: 840px; }
  .wf-end-h { font-size: 60px; }
  .wf-end-sub { font-size: 19px; }
}

@media (min-width: 1920px) {
  .wf-end { max-width: 960px; }
  .wf-end-h { font-size: 68px; }
  .wf-end-sub { font-size: 20px; }
}

@media (min-width: 2400px) {
  .wf-end { max-width: 1120px; }
  .wf-end-h { font-size: 88px; }
  .wf-end-sub { font-size: 23px; max-width: 60ch; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-end-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   Sticky hero-stack for the workflows overview (Act 1) —
   mirrors the /products and /compare overview hms-card UI.
   Pattern ported directly so the three overviews share
   visual + interaction identity.
═══════════════════════════════════════════════════════════ */

: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;
  --hms-stage-h: 760vh;  /* 7 cards + hold */
}

[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;
}

.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-h1 em { font-style: normal; font-weight: 500; }

.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: 720px;
  text-wrap: balance;
}

.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;
}

.hms-card[data-workflow="price-monitoring"]    { z-index: 1; --card-y: 50vh; }
.hms-card[data-workflow="competitor-intel"]    { z-index: 2; }
.hms-card[data-workflow="lead-enrichment"]     { z-index: 3; }
.hms-card[data-workflow="serp-monitoring"]     { z-index: 4; }
.hms-card[data-workflow="marketplace-catalog"] { z-index: 5; }
.hms-card[data-workflow="protected-site-debug"]{ z-index: 6; }
.hms-card[data-workflow="playwright-migration"]{ z-index: 7; }

.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(96px, 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); }

.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: ""; }

.hms-card-mesh {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 1.8vw, 28px);
  position: relative;
}

/* Per-workflow mesh gradients — palette cycled from the
   /products overview so the family reads consistent across
   the three overviews. */
.hms-card[data-workflow="price-monitoring"] .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-workflow="competitor-intel"] .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-workflow="lead-enrichment"] .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-workflow="serp-monitoring"] .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-workflow="marketplace-catalog"] .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-workflow="protected-site-debug"] .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-workflow="playwright-migration"] .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%);
}

/* Slash-command pill inside the mesh half — small editorial
   marker that names the agent-shape of each workflow. */
.wf-card-slash {
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--mkt-body-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  transform: translateZ(0);
  backface-visibility: hidden;
  backdrop-filter: blur(6px);
}

.wf-card-mark {
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
  color: var(--text-tertiary);
}

/* Wide-desktop scaling — bump card + hero + frame sizing
   so the cards fill the viewport gracefully on iMac-class. */
@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; }
}

@media (min-width: 1920px) {
  :root {
    --hms-card-w: min(1600px, 86vw);
    --hms-card-h: clamp(500px, 60vh, 720px);
  }
  .hms-hero { width: min(1480px, 88vw); }
  
}

@media (min-width: 2400px) {
  :root {
    --hms-card-w: min(1840px, 82vw);
    --hms-card-h: clamp(560px, 62vh, 820px);
  }
  .hms-hero { width: min(1760px, 86vw); }
  
}

@media (max-width: 767px) {
  :root {
    --hms-card-w: 92vw;
    --hms-card-h: clamp(480px, 72vh, 640px);
    --hms-card-segment-vh: 70;
    --hms-stage-h: 700vh;
    --hms-card-y-below: 100;
  }
  .hms-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .hms-card-content { padding: 22px; min-height: 0; }
  .hms-card-mesh { overflow: hidden; padding: 22px; }
  .hms-hero { top: 30%; width: min(92vw, calc(100% - 24px)); padding: 0 12px; }
  
  .hms-hero-sub { font-size: 14px; line-height: 1.5; }
  .wf-card-slash { font-size: 12px; padding: 6px 12px; }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  Body bg recess + non-saturated rgba-white
   hover borders + .hms-card-cta--soon chrome flipped to warm-dark
   alphas.  --font-display auto-flips to Mq12 via the DS-level
   override.
═══════════════════════════════════════════════════════════ */

html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}

html:not(.dark) .wf-duality:hover {
  border-color: rgba(29, 22, 18, 0.18);
}

html:not(.dark) .hms-card-cta--soon {
  border-color: rgba(29, 22, 18, 0.18);
  background: rgba(29, 22, 18, 0.04);
}