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

/* ──────────────────────────────────────────────────────────
   /solutions/ai-agents — rebuilt per DESIGN.md
   interactivity + visual-first authoring mandates +
   Pablo's clarifications:

     * Widget = canonical .mc-convo from /mcp
       (transparent, hairline border, no shadow, auto-types
       on page load, NOT scroll-painted).
     * Sidebar = canonical .atlas-list-item from /products/fetch
       (horizontal-dash ::before, color shifts; NOT a
       vertical purple bar — that was invented).
     * Teal band is the rhythm break MID-PAGE (Act 2), not
       the closer.  Closer + footer stay dark.
     * Every interactive surface has `cursor: pointer` so the
       SVG portal is the sole pointer.

   Patterns wired:
     A  Sticky stage + scroll-linked progress (Acts 1, 3)
     B  Curtain rise (Act 2 pulls into Act 1 via -100vh
        margin; teal band rises over the dark hero)
     D  Spotlight crossfade 8 beats (Act 3, grid-area 1/1)
     E  Sidebar scrubber click-to-jump (Act 3)
     F  Scroll-painted cliff stamps (Act 2)
     H  Per-act layout topology (4 distinct topologies)
─────────────────────────────────────────────────────────── */

body { overscroll-behavior-y: none; background: var(--background); }
/* overflow-x: clip contains the off-grid .aa-signature-ring (right:-8%) without
   creating a scroll container, so the sticky hero stage still pins correctly. */
main { position: relative; overflow-x: clip; }
.topbar { isolation: isolate; z-index: 200; }

/* Cursor portal — Pablo's rule: SVG portal ONLY for in-page
   interactive widgets (trace panel, code blocks, beat
   scrubber, comparison panes).  Navigation links and CTAs
   that take you to another page use the native hand
   pointer.  Don't put .aa-hero-secondary or .aa-end-link in
   this list — they are <a> links to /agents/. */
.back-to-top,
.aa-trace,
.aa-trace *,
.aa-cliff-pane,
.aa-cliff-pane *,
.aa-beat-code,
.aa-beat-code *,
.atlas-list-item,
.atlas-list-item * {
  cursor: pointer;
}

:root {
  --aa-hero: 0;
  --aa-cliff: 0;
}

/* ══════════════════════════════════════════════════════════
   Act 1 — Sticky stage hero.  Asymmetric two-col (text LEFT,
   widget RIGHT).  Sticky 220vh stage so Act 2 can curtain-
   rise into it.
═══════════════════════════════════════════════════════════ */

.aa-act-1 {
  position: relative;
  min-height: 220vh;
  z-index: 1;
  isolation: isolate;
}

/* ── Page-signature SVG: threshold ring ───────────────────
   Unique to this page (not used on any other spoke).  In
   the hero, it sits faintly behind the right column as the
   page's quiet visual fingerprint.  Reappears in Act 4 as
   the closer's focal glyph.  Anchored bottom-right of the
   hero section, off the grid axis (DESIGN.md off-grid burst). */
.aa-signature-ring {
  position: absolute;
  width: clamp(360px, 36vw, 560px);
  height: clamp(360px, 36vw, 560px);
  right: -8%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  color: #7C4FE8;
  pointer-events: none;
  z-index: 0;
  opacity: 0.78;
}
.aa-act-1-frame > * { position: relative; z-index: 1; }
.aa-act-1-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(56px, 8vh, 96px);
  box-sizing: border-box;
  overflow: hidden;
  --aa-exit: clamp(0, calc((var(--aa-hero) - 0.72) * 5), 1);
}

.aa-hero {
  width: 100%;
  max-width: min(95vw, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  column-gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.aa-hero-text {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 28px);
  opacity: calc(1 - var(--aa-exit) * 0.7);
  filter: blur(calc(var(--aa-exit) * 8px));
  transform: translateY(calc(var(--aa-exit) * -16px));
  transition: opacity 80ms linear, filter 80ms linear, transform 80ms linear;
}

.aa-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}
.aa-hero-h1 em { font-style: normal; font-weight: 500; color: inherit; }

.aa-hero-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 44ch;
}

.aa-hero-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(8px, 1vh, 12px);
}
/* .link-cta defaults to align-self:flex-start; centre it beside the pill */
.aa-hero-cta .link-cta { align-self: center; padding-top: 4px; }
.aa-hero-secondary {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 28%, transparent);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.aa-hero-secondary:hover { border-color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════
   Canonical .mc-convo (verbatim from /mcp), used
   here for the agent trace.  Class names kept as .mc-convo*
   so the imported pattern stays recognizable.
═══════════════════════════════════════════════════════════ */
.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;
  min-height: 44px;
}
.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.34); }
.mc-convo-name { margin-left: 12px; color: rgba(255, 255, 255, 0.92); }
.mc-convo-arrow { opacity: 0.5; margin: 0 2px; }
.mc-convo-status {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

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

.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; } 50.01%, 100% { opacity: 0; } }

/* ══════════════════════════════════════════════════════════
   Act 2 — Cliff (TEAL band rhythm break).

   Saturated teal-5 (#7ADAE6) ground.  Curtain rise (B):
   margin-top: -100vh + z-index: 2 lifts Act 2 over Act 1's
   sticky stage.  Layout: centered minimal diptych on dark-
   on-teal type.  Stamps scroll-paint as --aa-cliff progresses.

   Topbar inverts via body.is-on-teal while this band covers
   the topbar slot.
═══════════════════════════════════════════════════════════ */

.aa-act-2 {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  background: #7ADAE6;
  color: #1D1612;
  padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 200px);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.aa-cliff {
  width: 100%;
  max-width: min(95vw, 1080px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(56px, 8vh, 96px);
}
.aa-cliff-head { max-width: 640px; }
[data-act="2"] .act-kicker { color: color-mix(in srgb, #1D1612 60%, transparent); }
.aa-cliff-h2 {
  margin: 12px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: #1D1612;
  text-wrap: balance;
}
.aa-cliff-h2 em { font-style: normal; font-weight: 500; color: inherit; }

.aa-cliff-diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  width: 100%;
  align-items: start;
}

.aa-cliff-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid color-mix(in srgb, #1D1612 22%, transparent);
  border-radius: var(--radius-display, 20px);
  background: transparent;
  text-align: left;
  min-height: 280px;
}
.aa-cliff-tag {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #A8421C;
}
.aa-cliff-tag--yes { color: #1E6B3A; }

.aa-cliff-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.aa-cliff-feed li {
  --stamp-start: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 14px;
  color: color-mix(in srgb, #1D1612 78%, transparent);
  opacity: clamp(0, calc((var(--aa-cliff) - var(--stamp-start)) * 8), 1);
  transform: translateY(calc(6px * (1 - clamp(0, calc((var(--aa-cliff) - var(--stamp-start)) * 8), 1))));
  transition: opacity 220ms ease, transform 220ms ease;
}
.aa-cliff-feed li[data-stamp="0"] { --stamp-start: 0.05; }
.aa-cliff-feed li[data-stamp="1"] { --stamp-start: 0.15; }
.aa-cliff-feed li[data-stamp="2"] { --stamp-start: 0.25; }
.aa-cliff-feed li[data-stamp="3"] { --stamp-start: 0.35; }
.aa-cliff-feed li[data-stamp="4"] { --stamp-start: 0.45; }
.aa-cliff-feed li[data-stamp="5"] { --stamp-start: 0.55; }
.aa-cliff-pane--yes .aa-cliff-feed li[data-stamp="0"] { --stamp-start: 0.15; }
.aa-cliff-pane--yes .aa-cliff-feed li[data-stamp="1"] { --stamp-start: 0.65; }

.aa-cliff-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.aa-cliff-mark--x { color: #A8421C; background: rgba(168, 66, 28, 0.14); }
.aa-cliff-mark--ok { color: #1E6B3A; background: rgba(30, 107, 58, 0.18); }

.aa-cliff-feed li code {
  font-family: inherit;
  font-size: inherit;
  color: #1D1612;
  background: rgba(29, 22, 18, 0.06);
  border: 1px solid color-mix(in srgb, #1D1612 18%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
}
.aa-cliff-resolve { color: #1E6B3A; }
.aa-cliff-foot {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, #1D1612 18%, transparent);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  color: color-mix(in srgb, #1D1612 60%, transparent);
}
.aa-cliff-foot--no { color: #A8421C; }
.aa-cliff-foot--yes { color: #1E6B3A; }

/* ══════════════════════════════════════════════════════════
   Act 3 — Sticky stage, spotlight crossfade + canonical
   atlas-list-item sidebar.  Dark ground (rhythm returns to
   the page baseline after Act 2's teal break).
═══════════════════════════════════════════════════════════ */

.aa-act-3 {
  position: relative;
  z-index: 3;
  background: var(--background);
}
.aa-act-3-stage {
  position: relative;
  min-height: 540vh;
}
.aa-act-3-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(56px, 8vh, 96px);
  box-sizing: border-box;
  overflow: hidden;
}

.aa-spotlight {
  width: 100%;
  max-width: min(95vw, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.aa-spotlight-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}

/* Canonical atlas-list-item pattern (verbatim from
   /products/fetch Act 5).  ::before horizontal dash that
   scales 0.5 → 0.8 hover → 1.0 active.  Color shift
   quaternary → secondary hover → primary active. */
.atlas-list {
  list-style: none;
  margin: 0;
  padding: clamp(12px, 1.4vh, 18px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.atlas-list li { margin: 0; }
.atlas-list-item {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 0;
  text-align: left;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  font-family: var(--font-base);
  color: var(--text-quaternary);
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-list-item::before {
  content: "";
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: scaleX(0.5);
  transform-origin: left;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-list-item:hover { color: var(--text-secondary); }
.atlas-list-item:hover::before { transform: scaleX(0.8); opacity: 0.7; }
.atlas-list-item[data-active="true"] { color: var(--text-primary); }
.atlas-list-item[data-active="true"]::before { transform: scaleX(1); opacity: 1; }
.atlas-list-item:focus-visible {
  outline: 1px solid var(--border-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.atlas-list-num {
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
}
.atlas-list-name {
  font-size: var(--mkt-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── Spotlight stage (Pattern D) ──────────────────────── */
.aa-spotlight-stage {
  position: relative;
  min-height: clamp(380px, 56vh, 520px);
  display: grid;
  align-items: center;
}
.aa-beat {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vh, 22px);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.aa-beat[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; }

.aa-beat-h3 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h3);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}
.aa-beat-code {
  margin: clamp(8px, 1.2vh, 14px) 0 0;
  padding: clamp(14px, 1.8vh, 22px) clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-sm);
  line-height: 1.55;
  color: var(--text-primary);
  overflow-x: auto;
}
.aa-beat-tok-fn { color: #9B6FFF; }
.aa-beat-tok-key { color: #7ADAE6; }
.aa-beat-tok-str { color: var(--zen-green-6, #6ED49A); }
.aa-beat-tok-num { color: var(--zen-orange-6, #F38C5A); }
.aa-beat-caption {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

/* ══════════════════════════════════════════════════════════
   Act 4 — Closer.  Dark ground, centered editorial.  No
   teal here: Act 2 carried the rhythm break.  Closer + footer
   read continuous on the page baseline.
═══════════════════════════════════════════════════════════ */

.aa-act-4 {
  position: relative;
  background: var(--background);
  padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 200px);
  display: flex;
  justify-content: center;
}
.aa-end {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.aa-end-kicker { margin: 0 0 clamp(20px, 3vh, 32px); color: var(--text-tertiary); }
.aa-end-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}
.aa-end-h2 em { font-style: normal; font-weight: 500; color: inherit; }

.aa-end-cta { margin-top: clamp(28px, 4vh, 40px); justify-content: center; }
.aa-end-link {
  margin-top: clamp(24px, 3vh, 36px);
  align-self: center;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 28%, transparent);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.aa-end-link:hover { border-color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════
   Topbar adapts on the Act 2 teal band.  body.is-on-teal
   set by JS while Act 2 covers the topbar slot.
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   Responsive — drop sticky stages on phones / narrow desktops.
═══════════════════════════════════════════════════════════ */
@media (max-width: 1099px) {
  .aa-act-1, .aa-act-3-stage { min-height: auto; }
  .aa-act-1-frame, .aa-act-3-frame {
    position: relative;
    top: auto;
    height: auto;
    padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px);
  }
  .aa-hero { grid-template-columns: 1fr; row-gap: 40px; }
  .aa-hero-text { opacity: 1 !important; filter: none !important; transform: none !important; }
  .aa-cliff-feed li { opacity: 1; transform: none; }
  .aa-act-2 { margin-top: 0; }
  .aa-spotlight { grid-template-columns: 1fr; row-gap: 28px; }
  .aa-spotlight-stage { min-height: auto; }
  .aa-beat { opacity: 1; transform: none; position: relative; pointer-events: auto; grid-area: auto; }
  /* With JS, the rail acts as a tab selector on mobile: show only the active
     beat instead of stacking all eight (that wall was "too much"). Without JS
     the beats fall back to stacking so nothing is hidden. */
  html.js .aa-beat { display: none; }
  html.js .aa-beat[data-active="true"] { display: block; }
  html:not(.js) .aa-beat { padding-bottom: clamp(40px, 6vh, 64px); border-bottom: 1px solid var(--border-subtle); }
  html:not(.js) .aa-beat:last-child { border-bottom: 0; }
  /* rail reads as a tappable list */
  .aa-spotlight-rail .atlas-list-item { cursor: pointer; }
}

@media (max-width: 700px) {
  .aa-cliff-diptych { grid-template-columns: 1fr; row-gap: 24px; }
  .aa-hero-h1 { font-size: var(--mkt-h3); }
}

@media (min-width: 1600px) {
  .aa-hero { max-width: min(95vw, 1480px); }
  .aa-hero-h1 { font-size: 72px; }
  .aa-cliff { max-width: min(95vw, 1200px); }
  .aa-cliff-h2 { font-size: 68px; }
  .aa-spotlight { max-width: min(95vw, 1480px); }
  .aa-beat-h3 { font-size: 56px; }
  .aa-end { max-width: 840px; }
  .aa-end-h2 { font-size: 80px; }
}
@media (min-width: 1920px) {
  .aa-hero { max-width: min(95vw, 1680px); }
  .aa-hero-h1 { font-size: 84px; }
  .aa-cliff { max-width: min(95vw, 1320px); }
  .aa-cliff-h2 { font-size: 76px; }
  .aa-spotlight { max-width: min(95vw, 1680px); }
  .aa-beat-h3 { font-size: 64px; }
  .aa-end { max-width: 960px; }
  .aa-end-h2 { font-size: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --aa-hero: 1; --aa-cliff: 1; }
  .aa-hero-text { opacity: 1; filter: none; transform: none; }
  .aa-cliff-feed li { opacity: 1; transform: none; }
  .mc-convo-bubble { animation: none; }
  .aa-beat { opacity: 1; transform: none; pointer-events: auto; }
  .mc-convo-line { transition: none; }
  .mc-convo-line.is-typing .mc-convo-body::after { animation: none; opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   Act 4 — One layer, every surface.
   Reuses the DS .seg-control--underline atom for the surface
   picker and the .cli-term frame pattern from /cli
   for the code panel (frame-only, hairline border, dark body).
   All token colours come from DS variables — no invented hex.
   ════════════════════════════════════════════════════════════ */

.aa-surf {
  position: relative;
  padding: clamp(96px, 14vh, 180px) clamp(20px, 5vw, 80px);
  background: var(--background);
}

.aa-surf-frame {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  align-items: flex-start;
}

.aa-surf-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
}

.aa-surf-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--text-primary);
  text-wrap: balance;
}
.aa-surf-h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
}

.aa-surf-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* DS .seg-control--underline holds the layout; this just trims
   the bottom margin so the tabs sit close to the code window. */
.aa-surf-tabs {
  margin-bottom: 4px;
  flex-wrap: wrap;
}

/* Code panel — pattern lifted from /cli .cli-term.
   Frame-only border-subtle, no fill, body holds the snippets. */
.aa-surf-term {
  position: relative;
  margin: 0;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.aa-surf-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  color: var(--text-tertiary);
  min-height: 44px;
}

.aa-surf-term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
}

.aa-surf-term-name { margin-left: 10px; }

/* Copy affordance — reuses the DS .btn-marketing--secondary +
   --sm atom (outline pill, 36px tall).  Local hooks only handle
   placement at the right edge of the term bar + the "Copied"
   flash colour state. */
.aa-surf-copy { margin-left: auto; }
.aa-surf-copy.is-copied {
  color: var(--zen-green-6, #6BD9A1);
  border-color: color-mix(in srgb, var(--zen-green-6, #6BD9A1) 60%, transparent);
}

.aa-surf-term-body {
  position: relative;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 32px);
  min-height: clamp(220px, 26vh, 320px);
}

.aa-surf-snippet {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: clamp(12.5px, 0.9vw, 14.5px);
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.aa-surf-snippet[data-active="true"] { display: block; }

/* Token colours via DS palette tokens (same set used across
   /cli + /mcp).  No invented hex. */
.aa-surf-tok-kw  { color: var(--zen-purple-6, #9B6FFF); }
.aa-surf-tok-str { color: var(--zen-cyan-6, #7ADAE6); }
.aa-surf-tok-fn  { color: var(--text-primary); }
.aa-surf-tok-cmt { color: var(--text-tertiary); }

@media (max-width: 720px) {
  .aa-surf-term-body { padding: 18px; min-height: 180px; }
  .aa-surf-snippet { font-size: 12px; }
}

@media (max-width: 720px) {
  .aa-sdk-code-body { font-size: 12px; padding: 16px; }
  .aa-sdk-code-body code { white-space: pre; }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  Body bg recess + non-saturated-band
   rgba-white chromes flipped to warm-dark alphas.
   --font-display auto-flips to Mq12 via DS-level override.
═══════════════════════════════════════════════════════════ */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}
/* .mc-convo widget sits on the warm-dark page (transparent
   background); its rgba-white chrome reads as cold light on
   the BU light canvas.  Flip each to warm-dark alpha. */
html:not(.dark) .mc-convo-bar { color: rgba(29, 22, 18, 0.78); }
html:not(.dark) .mc-convo-dot { background: rgba(29, 22, 18, 0.34); }
html:not(.dark) .mc-convo-name { color: rgba(29, 22, 18, 0.92); }
html:not(.dark) .mc-convo-status {
  background: rgba(29, 22, 18, 0.18);
  color: rgba(29, 22, 18, 0.92);
}
html:not(.dark) .aa-beat-code { background: rgba(29, 22, 18, 0.03); }

/* Teal text on light bg — convo widget + beat tok keys. */
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) .aa-beat-tok-key {
  color: #1C9E97;
}

@media (max-width: 760px) {
  .aa-signature-ring { display: none; }
}