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

/* ──────────────────────────────────────────────────────────
   /mcp — Web access layer for AI agents.

   CEO architecture primitive: MCP server (available today via
   the `zenrows mcp` CLI in `zenrows-agent-toolkit`).  Editorial
   wedge: agents read the web through Zenrows tools natively;
   one install line wires the protocol.

   Hero composition borrowed from /home — 3-line declarative
   H1 with per-line marks + asymmetric demo column.  No
   centred billboard.
─────────────────────────────────────────────────────────── */


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

/* Cursor portal scope — every selector here also lives in
   mcp.js's cursorSelector.  Only interactive widgets get the
   spinning O; mc-convo + mc-install are aria-hidden visuals
   so they keep the native cursor. */
.back-to-top {
  cursor: pointer;
}
/* mc-setup-card sets its own cursor: pointer inline (line 1004) */

/* ──────────────────────────────────────────────────────────
   Act 1 — Hero.  Asymmetric editorial + live conversation.
─────────────────────────────────────────────────────────── */

[data-act="1"] {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--background);
  z-index: 1;
}

.mc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(40px, 5vw, 88px);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  min-height: calc(100vh - clamp(96px, 12vh, 140px) - clamp(56px, 8vh, 96px));
}

/* Editorial column — vertical flex that fills the viewport
   height.  The .mc-hero-top stack (kicker + H1) takes auto
   margins so it sits vertically centred; the CTA at the
   bottom is the last flex child, anchored to the floor. */
.mc-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 620px;
  min-width: 0;
}

.mc-hero-top {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H1 — 3 declarative lines, each block-level.  No marked
   phrases (Pablo's call): all white, single colour. */
.mc-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h3);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.mc-hero-line { display: block; }
.mc-hero-mark {
  font-style: normal;
  color: inherit;
}

/* Subheadline below the product-name H1.  The brief locks the
   MCP H1 to "Zenrows MCP Server" and moves the connect copy
   to this sub. */
.mc-hero-sub {
  margin: clamp(20px, 2.4vh, 32px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-lead);
  line-height: 1.4;
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 30ch;
}

.mc-hero-sub em {
  font-style: normal;
  color: var(--text-primary);
}

/* CTA — last child of the editorial column, anchored to the
   bottom by virtue of the `.mc-hero-top` above it taking
   margin-top + margin-bottom: auto.  Button left, tagline
   inline to its right. */
/* Layout + tag styles come from .cta-stack--inline +
   .cta-stack-tag in components.css. */

/* Demo column — conversation panel + install command stacked.
   Vertically centred in the viewport-tall column to match the
   editorial side. */
.mc-hero-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vh, 24px);
  min-width: 0;
}

/* Live MCP conversation panel.  Frame-only border-subtle.  No
   fill, no shadow — the typed lines carry the visual weight,
   not the container. */
.mc-convo {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(280px, 38vh, 380px);
}

.mc-convo-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  isolation: isolate;
  /* Slightly thicker so the mesh has room to breathe — still
     reads as a bar, not a panel. */
  min-height: 44px;
}

/* Mesh-gradient backdrop — four vibrant bubbles drift across
   the bar on independent loops (yellow / orange / red / cyan
   on a yellow→purple base).  No global rotation; the linear
   base guarantees the bar is always fully covered while the
   bubbles travel.  Variety vs the site's purple-7+teal-5
   family. */
.mc-convo-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--zen-orange-5, #C97A4E) 0%,
    var(--zen-purple-5, #6B4DCF) 100%
  );
}

.mc-convo-bubble {
  position: absolute;
  width: 65%;
  height: 280%;
  border-radius: 50%;
  filter: blur(34px);
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0.92;
  will-change: transform;
}

.mc-convo-bubble[data-bubble="1"] {
  background: var(--zen-purple-6, #9B6FFF);
  top: -90%;
  left: -10%;
  animation: mc-bubble-1 7s ease-in-out infinite alternate;
}
.mc-convo-bubble[data-bubble="2"] {
  background: var(--zen-orange-6, #F38C5A);
  top: -80%;
  left: 35%;
  animation: mc-bubble-2 9s ease-in-out infinite alternate;
}
.mc-convo-bubble[data-bubble="3"] {
  background: var(--zen-red-6, #F36A6A);
  top: -100%;
  left: 55%;
  animation: mc-bubble-3 11s ease-in-out infinite alternate;
}
.mc-convo-bubble[data-bubble="4"] {
  background: #7ADAE6;
  top: -85%;
  left: 18%;
  animation: mc-bubble-4 13s ease-in-out infinite alternate;
}

@keyframes mc-bubble-1 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(55%,  20%); }
}
@keyframes mc-bubble-2 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(-40%, 30%); }
}
@keyframes mc-bubble-3 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(45%, -25%); }
}
@keyframes mc-bubble-4 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(-30%,-20%); }
}

.mc-convo-bar > *:not(.mc-convo-mesh) {
  position: relative;
  z-index: 1;
}

.mc-convo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.mc-convo-name {
  margin-left: 8px;
  color: #FFFFFF;
  font-weight: 500;
}

.mc-convo-arrow {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 4px;
}

.mc-convo-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

.mc-convo-status[data-status="busy"] {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}

.mc-convo-status[data-status="done"] {
  background: rgba(122, 218, 230, 0.32);
  border-color: rgba(122, 218, 230, 0.65);
  color: #FFFFFF;
}

/* Feed — typed lines appear in sequence.  Each line is a
   single grid row with a small role marker on the left + the
   text on the right.  Mono throughout. */
.mc-convo-feed {
  list-style: none;
  margin: 0;
  padding: clamp(18px, 2vh, 24px) clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  font-family: var(--font-code, monospace);
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.55;
  flex: 1 1 auto;
}

.mc-convo-line {
  display: grid;
  grid-template-columns: clamp(28px, 3vw, 40px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(10px, 1vw, 14px);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-convo-line.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.mc-convo-role {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  font-weight: 700;
  text-align: right;
  align-self: center;
}

.mc-convo-body {
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

/* Per-role styling — `user` reads as the agent's own prose,
   `tool` is the MCP function call (purple-7 verb + teal-5
   args), `result` is the final value (teal-5 check + value). */
.mc-convo-line[data-role="user"] .mc-convo-body {
  color: var(--text-primary);
}

.mc-convo-line[data-role="tool"] .mc-convo-body .mc-tool {
  color: #7C4FE8;
  font-weight: 500;
}

.mc-convo-line[data-role="tool"] .mc-convo-body .mc-arg {
  color: #7ADAE6;
}

.mc-convo-line[data-role="tool"] .mc-convo-body .mc-paren {
  color: var(--text-quaternary);
}

.mc-convo-line[data-role="result"] .mc-convo-body {
  color: var(--text-primary);
}

.mc-convo-line[data-role="result"] .mc-convo-body .mc-check {
  color: #7ADAE6;
  font-weight: 700;
  margin-right: 6px;
}

/* Typing caret — a small purple-7 block at the end of the
   currently-typing line.  mcp.js toggles `.is-typing` on the
   active line. */
.mc-convo-line.is-typing .mc-convo-body::after {
  content: "▎";
  display: inline-block;
  margin-left: 2px;
  color: #7C4FE8;
  font-weight: 700;
  animation: mc-caret-blink 1.05s steps(2, end) infinite;
}

@keyframes mc-caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Install command — quiet inline strip under the conversation.
   No frame, just text with a $ prefix and a teal-5 ✓ at the
   end.  Reads as "this is how you'd wire it" without making
   it the centrepiece. */
.mc-install {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

.mc-install-prompt { color: var(--text-quaternary); font-weight: 600; }

.mc-install-cmd {
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-install-check {
  color: #7ADAE6;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  [data-act="1"] {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(48px, 8vh, 80px);
  }
  /* Stack vertically; editorial above, demo below.  Drop the
     bottom-pin behaviour — CTA sits inline under the H1 like
     a normal block. */
  .mc-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: clamp(36px, 5vh, 56px);
    max-width: 600px;
    min-height: 0;
  }
  .mc-hero-text {
    max-width: none;
  }
  .mc-hero-top {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mc-hero-cta {
    margin-top: clamp(20px, 3vh, 32px);
  }
  .mc-convo { min-height: 280px; }
  .mc-install-cmd { font-size: 11px; }
}

@media (max-width: 600px) {
  .mc-hero-h1 {
    font-size: var(--mkt-h3);
    line-height: 1.04;
  }
  .mc-install { font-size: 10.5px; }
  .mc-install-cmd { white-space: normal; word-break: break-all; }
}

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

@media (min-width: 1600px) {
  .mc-hero { max-width: 1400px; }
  .mc-hero-text { max-width: 720px; }
  .mc-hero-h1 { font-size: 52px; }
  .mc-hero-tag { font-size: 13px; }
  .mc-convo { min-height: 420px; }
  .mc-convo-feed { font-size: 16px; }
  .mc-install { font-size: 14px; }
}

@media (min-width: 1920px) {
  .mc-hero { max-width: 1520px; }
  .mc-hero-text { max-width: 800px; }
  .mc-hero-h1 { font-size: 60px; }
  .mc-hero-tag { font-size: 13.5px; }
  .mc-convo { min-height: 480px; }
  .mc-convo-feed { font-size: 17px; }
  .mc-install { font-size: 15px; }
}

@media (min-width: 2400px) {
  .mc-hero { max-width: 1700px; }
  .mc-hero-text { max-width: 900px; }
  .mc-hero-h1 { font-size: 72px; }
  .mc-hero-tag { font-size: 14px; }
  .mc-convo { min-height: 540px; }
  .mc-convo-feed { font-size: 18.5px; }
  .mc-install { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-convo-line.is-typing .mc-convo-body::after { animation: none; opacity: 1; }
  .mc-convo-line { transition: none; }
  .mc-convo-bubble { animation: none; }
}

/* ──────────────────────────────────────────────────────────
   Act 2 — Tools band.

   New reveal mechanic for the page's first colour break:
   four vertical teal-5 strips drop down (scaleY top→bottom)
   in a staggered left-to-right cascade.  When all four are
   at scaleY 1 they form the full saturated teal band — the
   reader watches the band BUILD ITSELF from four columns
   instead of bleeding in from a corner like the bloom curtain
   used elsewhere.

   Once the band is fully up (~ --enter 0.45), the editorial
   fades in: an H2 anchored top-left + four tool columns
   aligned with the strips below.
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  position: relative;
  z-index: 2;
  background: var(--background);
  color: #FFFFFF;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  --enter: 0;
  /* After the strip curtain finishes dropping (~1140ms), the section itself
     becomes solid teal behind the strips. This gives the centralized topbar
     watcher (_shared/nav-band-adapt.js) a full-bleed teal bg to detect, while
     the delay keeps the "build from four columns over dark" effect intact. */
  transition: background-color 220ms linear 1150ms;
}
[data-act="2"].is-revealed { background-color: #7ADAE6; }
@media (prefers-reduced-motion: reduce) {
  [data-act="2"] { transition: none; }
  [data-act="2"].is-revealed { background-color: #7ADAE6; }
}

/* Single-viewport editorial spread on the teal band.  No
   sticky cycle, no long scroll arc.  Stage is one viewport
   tall: strips drop in as the section enters viewport
   (scroll-driven --enter goes 0 → 1 across the section's
   entry phase), then a 2-col × 4-row zigzag spread fades in
   with all four verbs visible simultaneously.  Reader sees
   the act fully assembled at --enter ≈ 0.55, then scrolls
   out of it. */
.mc-tools-stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(28px, 4vh, 56px);
  padding: clamp(108px, 13vh, 160px) clamp(20px, 5vw, 80px) clamp(72px, 10vh, 110px);
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

.mc-tools-curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  pointer-events: none;
}

.mc-tools-strip {
  flex: 1 1 0;
  background: #7ADAE6;
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

/* IO-triggered reveal: when the section first scrolls into
   view, JS adds .is-revealed.  Strips then drop in via
   keyframe animation — staggered 120ms apart so the four
   columns cascade left-to-right like blinds.  This decouples
   the reveal from scroll velocity, so the curtain effect
   reads as a deliberate moment regardless of how fast the
   reader scrolls in. */
[data-act="2"].is-revealed .mc-tools-strip {
  animation: mc-strip-drop 780ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
[data-act="2"].is-revealed .mc-tools-strip:nth-child(1) { animation-delay: 0ms; }
[data-act="2"].is-revealed .mc-tools-strip:nth-child(2) { animation-delay: 120ms; }
[data-act="2"].is-revealed .mc-tools-strip:nth-child(3) { animation-delay: 240ms; }
[data-act="2"].is-revealed .mc-tools-strip:nth-child(4) { animation-delay: 360ms; }

@keyframes mc-strip-drop {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Editorial head — anchored top-left of the deck.  No fade,
   no motion.  Text sits in dark on the dark canvas
   (invisible) and is REVEALED purely by the teal strips
   painting in behind it. */
.mc-tools-head {
  position: relative;
  z-index: 1;
}


.mc-tools-headline {
  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.026em);
  font-weight: 500;
  color: #1D1612;
  text-wrap: balance;
  max-width: 16ch;
}

/* Zigzag spread — 2 columns × 4 rows.  Each card occupies
   one cell; the other cell in the row stays empty so the
   verbs alternate left/right down the page.  Editorial
   dance built from grid placement, not text alignment. */
.mc-tools-spread {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: clamp(12px, 2vh, 24px);
  min-height: 0;
  align-items: center;
}

.mc-tools-card {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 12px);
  max-width: 480px;
}

.mc-tools-card[data-i="0"] { grid-column: 1; grid-row: 1; }
.mc-tools-card[data-i="1"] { grid-column: 2; grid-row: 2; }
.mc-tools-card[data-i="2"] { grid-column: 1; grid-row: 3; }
.mc-tools-card[data-i="3"] { grid-column: 2; grid-row: 4; }

/* Right-column cards align to the right edge of their cell
   so the empty quadrant always sits to one side of the
   verb — gives the zigzag visual punch. */
.mc-tools-card[data-i="1"],
.mc-tools-card[data-i="3"] {
  justify-self: end;
  text-align: right;
  align-items: flex-end;
}

.mc-tools-counter {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(29, 22, 18, 0.7);
}

.mc-tools-verb {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(56px, 6.2vw, 88px);
  line-height: 0.94;
  letter-spacing: var(--tracking-dense, -0.034em);
  font-weight: 500;
  color: #1D1612;
  white-space: nowrap;
}

.mc-tools-meaning {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.45;
  color: rgba(29, 22, 18, 0.86);
  text-wrap: balance;
  max-width: 38ch;
}

.mc-tools-sig {
  margin-top: 4px;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  letter-spacing: 0.02em;
  color: rgba(29, 22, 18, 0.62);
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  /* Drop strip-cascade + grid spread.  Section bg goes teal-5
     directly; cards stack vertically as dictionary entries.
     IO reveals each as the reader scrolls past it. */
  [data-act="2"] { background: #7ADAE6; }
  .mc-tools-curtain { display: none; }
  .mc-tools-stage {
    min-height: 0;
    padding: clamp(72px, 10vh, 110px) clamp(20px, 6vw, 40px);
    gap: clamp(40px, 6vh, 64px);
    --enter: 1;
  }
  .mc-tools-spread {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    row-gap: clamp(40px, 6vh, 72px);
  }
  .mc-tools-card {
    grid-column: 1 !important;
    justify-self: start !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 100%;
  }
  .mc-tools-card[data-i="0"] { grid-row: 1; }
  .mc-tools-card[data-i="1"] { grid-row: 2; }
  .mc-tools-card[data-i="2"] { grid-row: 3; }
  .mc-tools-card[data-i="3"] { grid-row: 4; }
  
  .mc-tools-meaning { font-size: var(--mkt-body); }
}

@media (max-width: 600px) {
  
  .mc-tools-headline { font-size: var(--mkt-h3); }
}

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

@media (min-width: 1600px) {
  .mc-tools-stage { max-width: 1440px; }
  .mc-tools-headline { font-size: 68px; }
  
  .mc-tools-meaning { font-size: 19px; }
  .mc-tools-sig { font-size: 13.5px; }
}

@media (min-width: 1920px) {
  .mc-tools-stage { max-width: 1560px; }
  .mc-tools-headline { font-size: 76px; }
  
  .mc-tools-meaning { font-size: 20px; }
  .mc-tools-sig { font-size: 14.5px; }
}

@media (min-width: 2400px) {
  .mc-tools-stage { max-width: 1740px; }
  .mc-tools-headline { font-size: 88px; }
  
  .mc-tools-meaning { font-size: 22px; }
  .mc-tools-sig { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-tools-strip { transform: scaleY(1); animation: none !important; }
}

/* ──────────────────────────────────────────────────────────
   Topbar adaptation on the teal band.

   When Act 2's teal curtain covers the viewport top, body
   gets .is-on-teal (set by mcp.js) — the topbar swaps from
   white-on-dark to dark-on-teal so the chrome stays legible
   over the saturated surface.  Pattern copied 1:1 from
   /extract so transitions feel identical across spokes.
─────────────────────────────────────────────────────────── */

/* @pattern body-is-on-teal START
   Canonical topbar / chrome inversion overrides for when a saturated
   teal-6 (#7ADAE6) band covers the topbar slot.  Mirror set for purple
   and light bands (see @pattern body-is-on-purple / body-is-on-light).
   Port verbatim — the CSS variable fallbacks + the cursor portal
   override are required.  See docs/patterns.md → body-is-on-teal. */
/* Hardcoded #1D1612 (not var(--background) which flips per theme)
   so chrome reads dark on the teal band in BOTH tech and BU. */

/* Cursor portal — default teal-5 is invisible on the teal
   band.  Swap to purple-7 while on the teal surface so the
   spinning O reads against the saturated bg. */
/* @pattern body-is-on-teal END */

/* ──────────────────────────────────────────────────────────
   Act 3 — Wedge.

   Continues the teal-5 surface from Act 2 but with completely
   different content.  Editorial pull quote that articulates
   the "why" of MCP — built for agents, not for humans.
   Asymmetric layout: H2 top-left, supporting paragraph
   bottom-right, with deliberate negative diagonal between
   them.  Dark text on teal, no fade-in (continuity with the
   Act 2 reveal philosophy).
─────────────────────────────────────────────────────────── */

[data-act="3"] {
  position: relative;
  z-index: 2;
  background: #7ADAE6;
  color: #1D1612;
  padding: clamp(96px, 14vh, 180px) clamp(20px, 5vw, 80px) clamp(120px, 16vh, 200px);
  isolation: isolate;
  overflow: hidden;
}

.mc-wedge-stage {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "eyebrow  ."
    "headline ."
    ".        body"
    ".        aside";
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: clamp(20px, 3vh, 40px);
  align-items: start;
}


.mc-wedge-headline {
  grid-area: headline;
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-hero);
  line-height: 1.00;
  letter-spacing: var(--tracking-dense, -0.034em);
  font-weight: 500;
  color: #1D1612;
  text-wrap: balance;
  max-width: 14ch;
}

.mc-wedge-line { display: block; }

/* Accent line — second clause of the pull quote, slightly
   indented and rendered in italic display to break the
   typography rhythm.  Editorial dance within the H2. */
.mc-wedge-line--accent {
  font-style: italic;
  font-weight: 400;
  padding-left: clamp(36px, 5vw, 88px);
  color: rgba(29, 22, 18, 0.92);
}

.mc-wedge-body {
  grid-area: body;
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-lead);
  line-height: 1.5;
  color: rgba(29, 22, 18, 0.88);
  max-width: 480px;
  text-wrap: balance;
}

.mc-wedge-aside {
  grid-area: aside;
  margin: clamp(28px, 4vh, 48px) 0 0;
  font-family: var(--font-code, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(29, 22, 18, 0.6);
  max-width: 360px;
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  [data-act="3"] {
    padding: clamp(72px, 10vh, 120px) clamp(20px, 5vw, 32px) clamp(96px, 12vh, 140px);
  }
  .mc-wedge-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "headline"
      "body"
      "aside";
    row-gap: clamp(28px, 4vh, 44px);
  }
  .mc-wedge-line--accent { padding-left: clamp(20px, 6vw, 40px); }
  .mc-wedge-body { max-width: 100%; }
}

@media (max-width: 600px) {
  
  .mc-wedge-body     { font-size: 16px; }
}

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

@media (min-width: 1600px) {
  .mc-wedge-stage    { max-width: 1440px; }
  
  .mc-wedge-body     { font-size: 23px; max-width: 540px; }
}

@media (min-width: 1920px) {
  .mc-wedge-stage    { max-width: 1560px; }
  
  .mc-wedge-body     { font-size: 25px; max-width: 600px; }
}

@media (min-width: 2400px) {
  .mc-wedge-stage    { max-width: 1740px; }
  
  .mc-wedge-body     { font-size: 28px; max-width: 680px; }
}

/* ──────────────────────────────────────────────────────────
   Act 4 — Setup grid.

   Dark canvas after the Acts 2+3 teal band.  Eight cards in a
   4×2 grid (collapses to 2 cols on tablet, 1 on phone).  Each
   card carries a per-client config snippet; the `@zenrows/mcp`
   package name is wrapped in a .code-shared span on every
   card.  When the section enters viewport, the whole grid
   pulses that span in unison — "all eight reduce to the same
   package."
─────────────────────────────────────────────────────────── */

[data-act="4"] {
  position: relative;
  z-index: 2;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(96px, 12vh, 140px) clamp(20px, 5vw, 80px) clamp(96px, 12vh, 140px);
  isolation: isolate;
  overflow: hidden;
}

.mc-setup-stage {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 64px);
}

.mc-setup-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 720px;
}


.mc-setup-headline {
  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.026em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.mc-setup-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 520px;
}

.mc-setup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

/* Card — frame-only with subtle border, body holds the config
   snippet as a non-wrapping <pre>.  Top accent bar (gradient)
   ignites on hover so the eye lands on the active card.  IO
   reveal staggers cards in by data-card index. */
.mc-setup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 1.6vw, 22px) clamp(18px, 1.6vw, 22px) clamp(22px, 2vw, 26px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  background: transparent;
  min-height: clamp(180px, 22vh, 220px);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 540ms ease,
    transform 540ms ease,
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-act="4"].is-revealed .mc-setup-card { opacity: 1; transform: translateY(0); }
[data-act="4"].is-revealed .mc-setup-card[data-card="0"] { transition-delay:   60ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="1"] { transition-delay:  140ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="2"] { transition-delay:  220ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="3"] { transition-delay:  300ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="4"] { transition-delay:  380ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="5"] { transition-delay:  460ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="6"] { transition-delay:  540ms; }
[data-act="4"].is-revealed .mc-setup-card[data-card="7"] { transition-delay:  620ms; }

.mc-setup-card::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%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.mc-setup-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.mc-setup-card:hover::before { opacity: 1; }

.mc-setup-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-setup-card-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.mc-setup-card-name {
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.mc-setup-card-body {
  margin: 0;
  font-family: var(--font-code, monospace);
  font-size: clamp(11px, 0.85vw, 12.5px);
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre;
  overflow-x: clip;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-height: 0;
  /* Hide scrollbar visually but keep ability to swipe on
     touch surfaces where a snippet would clip. */
  scrollbar-width: none;
}
.mc-setup-card-body::-webkit-scrollbar { display: none; }
.mc-setup-card-body code { font-family: inherit; color: inherit; }

/* The shared @zenrows/mcp package name — pulsed by the wave
   trigger.  Default: same colour as surrounding code.  When
   the act gains data-wave="on" (JS, on IO entry), every
   span sweeps to a brand-purple highlight in unison and back. */
.mc-setup-card .code-shared {
  display: inline;
  position: relative;
  padding: 1px 3px;
  margin: 0 -3px;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  transition: background 360ms cubic-bezier(0.22, 1, 0.36, 1),
              color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-act="4"][data-wave="on"] .mc-setup-card .code-shared {
  background: rgba(124, 79, 232, 0.20);
  color: #7C4FE8;
}

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

@media (max-width: 1199px) {
  .mc-setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .mc-setup-grid { grid-template-columns: 1fr; gap: 14px; }
  .mc-setup-card { min-height: 0; }
  .mc-setup-headline { font-size: var(--mkt-h3); }
}

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

@media (min-width: 1600px) {
  .mc-setup-stage    { max-width: 1440px; }
  .mc-setup-headline { font-size: 68px; }
  .mc-setup-sub      { font-size: 19px; max-width: 600px; }
  .mc-setup-card-name { font-size: 17px; }
  .mc-setup-card-body { font-size: 13.5px; }
}

@media (min-width: 1920px) {
  .mc-setup-stage    { max-width: 1560px; }
  .mc-setup-headline { font-size: 76px; }
  .mc-setup-sub      { font-size: 20px; }
  .mc-setup-card-name { font-size: 18px; }
  .mc-setup-card-body { font-size: 14.5px; }
}

@media (min-width: 2400px) {
  .mc-setup-stage    { max-width: 1740px; }
  .mc-setup-headline { font-size: 88px; }
  .mc-setup-sub      { font-size: 22px; }
  .mc-setup-card-name { font-size: 20px; }
  .mc-setup-card-body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-setup-card { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────────────────
   Act 5 — Closer.

   Dark canvas, single immersive moment.  The sentence "Your
   agent reads the web." builds itself one word at a time on
   IO entry (each .mc-closer-word slides up + fades in via
   per-index transition-delay).  Underneath the headline a
   quiet "live trace" reveals after the sentence finishes —
   six lines of mono code that murmur the agent's actual
   tool calls.  CTA anchored at the bottom-right corner.

   Story compresses: question → trace → sentence → CTA, all
   in one frame.  Loops nothing — the moment lands once and
   stays.
─────────────────────────────────────────────────────────── */

[data-act="5"] {
  position: relative;
  z-index: 2;
  background: var(--background);
  color: var(--text-primary);
  min-height: 100vh;
  padding: clamp(96px, 13vh, 160px) clamp(20px, 5vw, 80px) clamp(96px, 12vh, 140px);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.mc-closer-stage {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "eyebrow"
    "line"
    "trace"
    "cta";
  row-gap: clamp(28px, 4vh, 56px);
}


/* Headline — five words in flex line.  Each word starts at
   opacity 0 + translateY 32px + slight blur; on .is-revealed
   they slide up in sequence (per-index transition-delay) to
   land in place.  Editorial assembly. */
.mc-closer-line {
  grid-area: line;
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(56px, 9vw, 156px);
  line-height: 0.96;
  letter-spacing: var(--tracking-dense, -0.038em);
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: end;
  gap: clamp(14px, 1.4vw, 28px);
  align-self: end;
  text-wrap: balance;
}

.mc-closer-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px);
  filter: blur(4px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-closer-word--accent { color: var(--text-primary); }
.mc-closer-dot { color: var(--text-primary); }

[data-act="5"].is-revealed .mc-closer-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-act="5"].is-revealed .mc-closer-word[data-i="0"] { transition-delay:   0ms; }
[data-act="5"].is-revealed .mc-closer-word[data-i="1"] { transition-delay: 160ms; }
[data-act="5"].is-revealed .mc-closer-word[data-i="2"] { transition-delay: 320ms; }
[data-act="5"].is-revealed .mc-closer-word[data-i="3"] { transition-delay: 480ms; }
[data-act="5"].is-revealed .mc-closer-word[data-i="4"] { transition-delay: 640ms; }

/* Live murmur — quiet mono trace that reveals after the
   sentence is assembled.  Lines stagger in with small
   delays after the headline finishes. */
.mc-closer-trace {
  grid-area: trace;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.75;
  color: var(--text-tertiary);
  max-width: 720px;
  border-left: 1px solid var(--border-subtle);
  padding-left: clamp(16px, 1.6vw, 28px);
  /* Long mono lines like 00:00.012 zenrows.browse(...) are
     ~50 chars wide and would overflow narrow viewports — clip
     anything past the trace's right edge instead of pushing
     a horizontal scrollbar onto the whole page. */
  overflow: hidden;
}
.mc-closer-trace-line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.mc-closer-trace-line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease, transform 380ms ease;
}

[data-act="5"].is-revealed .mc-closer-trace-line[data-i="0"] { transition-delay: 1400ms; }
[data-act="5"].is-revealed .mc-closer-trace-line[data-i="1"] { transition-delay: 1560ms; }
[data-act="5"].is-revealed .mc-closer-trace-line[data-i="2"] { transition-delay: 1720ms; }
[data-act="5"].is-revealed .mc-closer-trace-line[data-i="3"] { transition-delay: 1880ms; }
[data-act="5"].is-revealed .mc-closer-trace-line[data-i="4"] { transition-delay: 2040ms; }
[data-act="5"].is-revealed .mc-closer-trace-line[data-i="5"] { transition-delay: 2200ms; }

[data-act="5"].is-revealed .mc-closer-trace-line {
  opacity: 1;
  transform: translateY(0);
}

/* CTA — bottom-right corner of the deck.  Per-act layout
   break: tagline sits INLINE to the LEFT of the button (not
   stacked below) so the closer reads as a single anchored
   line.  `flex-wrap: nowrap` + `width: max-content` so the
   pair stays on one row regardless of viewport width. */
.mc-closer-cta {
  grid-area: cta;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  justify-self: end;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
}

.mc-closer-cta .mc-closer-tag { white-space: nowrap; }

.mc-closer-tag {
  margin: 0;
  font-family: var(--font-code, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  [data-act="5"] {
    padding: clamp(72px, 10vh, 120px) clamp(20px, 5vw, 32px) clamp(80px, 11vh, 120px);
  }
  .mc-closer-stage { row-gap: clamp(24px, 4vh, 40px); }
  
  .mc-closer-cta {
    justify-self: start;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  /* Drop the inline-row nowrap on phone — tag is on its own
     line now and shouldn't force horizontal overflow. */
  .mc-closer-cta .mc-closer-tag { white-space: normal; }
}

@media (max-width: 600px) {
  .mc-closer-line { font-size: clamp(40px, 14vw, 72px); gap: 8px; }
  .mc-closer-trace { font-size: 11.5px; }
}

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

@media (min-width: 1600px) {
  .mc-closer-stage { max-width: 1440px; }
  
  .mc-closer-trace { font-size: 14px; max-width: 800px; }
}

@media (min-width: 1920px) {
  .mc-closer-stage { max-width: 1560px; }
  
  .mc-closer-trace { font-size: 15px; }
}

@media (min-width: 2400px) {
  .mc-closer-stage { max-width: 1740px; }
  
  .mc-closer-trace { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-closer-word,
  .mc-closer-trace-line {
    opacity: 1;
    transform: none;
    filter: none;
    transition: 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. */
html:not(.dark) .mc-hero-h1,
html:not(.dark) .mc-tools-headline,
html:not(.dark) .mc-wedge-headline,
html:not(.dark) .mc-setup-headline,
html:not(.dark) .mc-closer-line {
  font-family: 'Mq12', system-ui, sans-serif;
  font-weight: 500;
}

/* Topbar inversion — yields to body.is-on-teal (acts 2+3). */

/* 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); }

/* Teal text on light bg — convo widget tool args + result checks
   + install check flip to readable medium-dark teal. */
html:not(.dark) .mc-convo-line[data-role="tool"] .mc-convo-body .mc-arg,
html:not(.dark) .mc-convo-line[data-role="result"] .mc-convo-body .mc-check,
html:not(.dark) .mc-install-check {
  color: #1C9E97;
}