/* Agents (2026-10-15). The agent page on the signal system: the hero agent
   session (terminal + issue panel) that runs the MCP loop, client tiles, the
   three-call beam, the who-does-what lanes and the machine-readable block.
   Builds on signal.css + home.css; colours come only from the --sg tokens. */

.ag-main { --ag-term: #0A0705; --ag-panel: #0D0907; }
.ag-main code { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- Hero ---------- */
.ag-hero .sg-hero-copy { gap: 24px; }
.ag-hero .sg-k { margin-bottom: 4px; }
.ag-hero .sg-display { font-size: clamp(56px, 8.4vw, 132px); }
.ag-hero .sg-lead { max-width: 54ch; }
html:not([data-skin="vintage"]) .ag-main .sg-actions .button.primary { min-height: 52px; }

.ag-stage {
  --tilt: 1;
  position: relative;
  max-width: 1180px;
  margin: clamp(72px, 10vh, 112px) auto 0;
  perspective: 2000px;
  perspective-origin: 50% 0%;
}
.ag-stage::before {
  content: "";
  position: absolute;
  inset: -6% 10% 40%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 106, 50, 0.3), transparent 70%);
  filter: blur(40px);
  opacity: calc(0.4 + var(--tilt) * 0.6);
  pointer-events: none;
}
.ag-session {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ag-term);
  box-shadow:
    0 0 0 1px rgba(248, 238, 223, 0.12),
    0 1px 0 0 rgba(255, 178, 92, 0.16) inset,
    0 50px 120px -30px rgba(0, 0, 0, 0.9),
    0 30px 80px -40px rgba(224, 106, 50, 0.45);
  transform-origin: 50% 0%;
  transform: translateY(calc(var(--tilt) * 24px)) rotateX(calc(var(--tilt) * var(--tilt-x, 20deg))) scale(calc(1 - var(--tilt) * 0.06));
  animation: sg-stage-in 1400ms var(--sg-expo) 520ms both;
  text-align: left;
}

.ag-chrome { display: flex; gap: 8px; align-items: center; height: 44px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--sg-line); background: #0B0806; }
.ag-chrome i { width: 11px; height: 11px; border-radius: 50%; background: #2C2119; }
.ag-chrome span { margin-left: 12px; color: var(--sg-faint); font: 400 12px/1 'JetBrains Mono', monospace; }
.ag-chrome em { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; padding: 6px 10px; border-radius: 7px; background: rgba(131, 200, 165, 0.08); color: var(--sg-good); font: 500 11px/1 'JetBrains Mono', monospace; font-style: normal; letter-spacing: 0.02em; }
.ag-chrome em b { width: 6px; height: 6px; border-radius: 50%; background: var(--sg-good); animation: lc-live 2s ease-out infinite; }

/* The loop rail: four stops joined by a beam that fills as the session runs. */
.ag-rail {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 18px 24px;
  list-style: none;
  border-bottom: 1px solid var(--sg-line);
}
.ag-rail::before,
.ag-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 37px;
  right: calc(24px + (100% - 48px) / 4 - 13px);
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--sg-line-2);
}
.ag-rail::after { background: linear-gradient(90deg, var(--sg-ember), var(--sg-glow)); transform: scaleX(var(--p)); transform-origin: 0 50%; transition: transform 700ms var(--sg-expo); box-shadow: 0 0 12px rgba(224, 106, 50, 0.6); }
.ag-rail li { position: relative; z-index: 1; display: flex; gap: 0; align-items: center; min-width: 0; }
.ag-rail span {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ag-term);
  box-shadow: inset 0 0 0 1px var(--sg-line-2);
  color: var(--sg-faint);
  font: 500 10px/1 'JetBrains Mono', monospace;
  transition: background-color 400ms var(--sg-out), color 400ms, box-shadow 500ms var(--sg-out);
}
.ag-rail b, .ag-rail small { overflow: hidden; padding: 0 10px; color: var(--sg-faint); font: 400 12px/1 'JetBrains Mono', monospace; text-overflow: ellipsis; white-space: nowrap; background: var(--ag-term); transition: color 400ms; }
.ag-rail small { display: none; }
.ag-rail li.is-on span { background: var(--sg-ember); color: var(--sg-ember-ink); box-shadow: 0 0 0 4px rgba(224, 106, 50, 0.18); }
.ag-rail li.is-on b, .ag-rail li.is-on small { color: var(--sg-ink); }

.ag-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.ag-term { margin: 0; padding: 26px 28px 30px; color: var(--sg-mute); font: 400 13.5px/1.8 'JetBrains Mono', monospace; white-space: pre-wrap; word-break: break-word; }
.ag-term code { font: inherit; }
.ag-term .t-you, .ag-term .t-agent { color: var(--sg-ink); }
.ag-term .t-pr { color: var(--sg-ember); }
.ag-term .t-call { color: var(--sg-glow); }
.ag-term .t-dim { color: var(--sg-faint); }
.ag-term .t-ok { color: var(--sg-good); }

.ag-panel { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-left: 1px solid var(--sg-line); background: var(--ag-panel); }
.ag-panel-h { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; color: var(--sg-faint); font-size: 13px; }
.ag-panel-h img { border-radius: 5px; box-shadow: 0 0 0 1px var(--sg-line-2); }
.ag-panel-h code { margin-left: auto; color: var(--sg-faint); font-size: 12px; }
.ag-issue { color: var(--sg-ink); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ag-issue em { margin-left: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(238, 122, 98, 0.16); color: var(--sg-bad); font: 500 12px/1.4 'JetBrains Mono', monospace; font-style: normal; vertical-align: 2px; }
.ag-sub { color: var(--sg-faint); font-size: 13px; }
.ag-ev { display: grid; gap: 2px; margin: 18px 0 0; padding: 0; list-style: none; }
.ag-ev li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sg-mute);
  font-size: 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--sg-out), transform 520ms var(--sg-expo), background-color 700ms;
}
.ag-ev li.is-in { opacity: 1; transform: none; }
.ag-ev li.is-new { background: rgba(224, 106, 50, 0.1); }
.ag-ev time { color: var(--sg-faint); font: 400 11px 'JetBrains Mono', monospace; }
.ag-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ev em { color: var(--sg-bad); font: 500 11px 'JetBrains Mono', monospace; font-style: normal; }
.ag-ev .is-bad span { color: #F3B4A4; }
.ag-state { display: grid; gap: 2px; margin: auto 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--sg-line); }
.ag-state li { display: grid; grid-template-columns: 14px 84px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; color: var(--sg-faint); font-size: 13px; transition: color 400ms; }
.ag-state i { width: 10px; height: 10px; border: 1.5px solid #5A4636; border-radius: 50%; transition: background-color 300ms, border-color 300ms, box-shadow 400ms; }
.ag-state small { overflow: hidden; color: var(--sg-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; transition: color 400ms; }
.ag-state li.is-done { color: var(--sg-ink); }
.ag-state li.is-done small { color: var(--sg-mute); }
.ag-state li.is-done i { border-color: var(--sg-ember); background: var(--sg-ember); box-shadow: 0 0 0 4px rgba(224, 106, 50, 0.18); }
.ag-state li.is-done:last-child small { color: var(--sg-glow); }

.ag-session figcaption { padding: 14px 20px; border-top: 1px solid var(--sg-line); background: #0B0806; color: var(--sg-faint); font-size: 13px; line-height: 1.4; }

/* ---------- Section heads ---------- */
p.ag-head-note { max-width: 34ch; color: var(--sg-mute); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.ag-main .sg-head-row { gap: 24px 64px; }

/* ---------- Connect ---------- */
.ag-url { display: flex; gap: 16px; align-items: center; padding: 10px 10px 10px 24px; border-radius: 16px; background: var(--sg-surface); box-shadow: inset 0 0 0 1px var(--sg-line-2), 0 30px 80px -50px rgba(224, 106, 50, 0.6); }
.ag-url-k { padding: 6px 8px; border-radius: 6px; background: rgba(224, 106, 50, 0.14); color: var(--sg-glow); font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em; }
.ag-url code { flex: 1; min-width: 0; overflow: hidden; color: var(--sg-ink); font-size: clamp(16px, 2vw, 26px); letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.ag-url button { flex: none; min-width: 88px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: rgba(248, 238, 223, 0.08); color: var(--sg-ink); font: 600 15px/1 'Exo 2', system-ui, sans-serif; cursor: pointer; transition: background-color 160ms var(--sg-out); }
.ag-url button:hover { background: rgba(248, 238, 223, 0.14); }
p.ag-token { margin-top: 16px; color: var(--sg-faint); font-size: 14px; line-height: 1.6; }
.ag-token code { color: var(--sg-mute); font-size: 13px; }
.ag-clients { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
.ag-clients li { grid-column: span 2; min-width: 0; }
.ag-clients li:nth-child(-n+2) { grid-column: span 3; }
.ag-client { height: 100%; gap: 44px; padding: 28px; text-decoration: none; transition: background-color 300ms var(--sg-out); }
.ag-client:hover { background: var(--sg-surface-2); }
@media (hover: hover) { .ag-clients:hover .sg-tile::before, .ag-clients:hover .sg-tile::after { opacity: 1; } }
.sg-tile.ag-client h3 { margin: 0; color: var(--sg-ink); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.ag-client code { margin-top: auto; color: var(--sg-faint); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; transition: color 300ms var(--sg-out); }
.ag-client:hover code { color: var(--sg-glow); }
.ag-go { position: absolute; top: 26px; right: 28px; color: var(--sg-faint); font-size: 20px; transition: transform 300ms var(--sg-out), color 300ms; }
.ag-client:hover .ag-go { color: var(--sg-ink); transform: translateX(4px); }
p.ag-links { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 24px; }
.ag-links .sg-link { color: var(--sg-mute); font-size: 15px; transition: color 160ms var(--sg-out); }
.ag-links .sg-link:hover { color: var(--sg-ink); }

/* ---------- The loop: three calls on one beam ---------- */
.ag-beam {
  --fill: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ag-beam::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--sg-ember), var(--sg-glow)) 0 0 / calc(var(--fill) * 100%) 100% no-repeat, var(--sg-line-2);
  transition: background-size 2200ms var(--sg-inout);
}
.ag-beam::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 120px;
  height: 12px;
  border-radius: 6px;
  background: radial-gradient(closest-side, rgba(255, 178, 92, 0.9), transparent);
  opacity: 0;
  pointer-events: none;
}
.ag-beam li { position: relative; display: flex; flex-direction: column; gap: 16px; padding-right: 48px; }
.ag-beam li > code { align-self: start; }
.ag-node {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--sg-room);
  box-shadow: inset 0 0 0 1.5px var(--sg-ember), 0 0 0 6px var(--sg-room), 0 0 30px -4px rgba(224, 106, 50, 0.7);
  color: var(--sg-glow);
  font: 500 12px/1 'JetBrains Mono', monospace;
  transition: box-shadow 600ms var(--sg-out), color 600ms;
}
.ag-beam code { color: var(--sg-ink); font-size: clamp(15px, 1.4vw, 18px); font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ag-beam p { max-width: 30ch; color: var(--sg-mute); font-size: 16px; line-height: 1.55; }
.ag-beam pre { margin: auto 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--sg-line-2); color: var(--sg-faint); font: 400 12.5px/1.6 'JetBrains Mono', monospace; white-space: pre-wrap; }
p.ag-listen { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--sg-line); color: var(--sg-mute); font-size: 17px; }
.ag-listen code { margin-right: 4px; color: var(--sg-glow); font-size: 15px; }
.ag-listen-dot { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 14px 0 2px; vertical-align: 2px; border-radius: 50%; background: var(--sg-ember); }
.ag-listen-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(224, 106, 50, 0.6); animation: ag-ping 2.4s var(--sg-out) infinite; }
@keyframes ag-ping { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.8); } }

html.ag-motion .ag-beam:not(.is-live) { --fill: 0; }
html.ag-motion .ag-beam:not(.is-live) .ag-node { box-shadow: inset 0 0 0 1px var(--sg-line-2), 0 0 0 6px var(--sg-room); color: var(--sg-faint); }
html.ag-motion .ag-beam.is-live li:nth-child(1) .ag-node { transition-delay: 100ms; }
html.ag-motion .ag-beam.is-live li:nth-child(2) .ag-node { transition-delay: 1000ms; }
html.ag-motion .ag-beam.is-live li:nth-child(3) .ag-node { transition-delay: 1900ms; }
html.ag-motion .ag-beam.is-live::after { animation: ag-spark 3.6s var(--sg-inout) 2400ms infinite; }
html.ag-motion .ag-beam.is-paused::after { animation-play-state: paused; }
@keyframes ag-spark { 0% { opacity: 0; transform: translateX(-60px); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--beam-w, 1200px) - 60px)); } }

/* ---------- Who does what: three lanes on one tape ---------- */
.ag-lanes { --label: 260px; --cols: 9; position: relative; border-bottom: 1px solid var(--sg-line); }
.ag-lane { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; min-height: 112px; border-top: 1px solid var(--sg-line); }
.ag-lane h3 { display: grid; gap: 8px; padding: 24px 24px 24px 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.ag-lane h3 small { color: var(--sg-ember); font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.ag-lane ol { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.ag-lane ol::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--sg-line-2) 0 4px, transparent 4px 10px); }
.ag-lane li {
  position: relative;
  grid-row: 1;
  grid-column: var(--c);
  justify-self: center;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--sg-surface);
  box-shadow: inset 0 0 0 1px var(--sg-line-2);
  color: var(--sg-mute);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.ag-lane-you li { background: rgba(224, 106, 50, 0.14); box-shadow: inset 0 0 0 1px rgba(224, 106, 50, 0.5); color: var(--sg-ink); }
.ag-head { position: absolute; top: -10px; bottom: -10px; left: var(--label); width: 2px; border-radius: 1px; background: var(--sg-ink); box-shadow: 0 0 14px rgba(255, 178, 92, 0.9); opacity: 0; pointer-events: none; }
p.ag-boundary { max-width: 46ch; margin-top: 40px; padding-left: 20px; border-left: 2px solid var(--sg-ember); color: var(--sg-ink); font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.45; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  html.ag-motion .ag-lanes.is-live .ag-head { opacity: 1; animation: ag-run 7.2s linear infinite; }
  @keyframes ag-run { from { left: var(--label); } to { left: calc(100% - 2px); } }
  html.ag-motion .ag-lanes.is-live .ag-lane li { animation: ag-hit 7.2s linear infinite; animation-delay: calc((var(--c) - 0.5) / var(--cols) * 7.2s - 0.15s); }
  @keyframes ag-hit {
    0% { color: var(--sg-ink); box-shadow: inset 0 0 0 1px var(--sg-glow), 0 0 24px -2px rgba(224, 106, 50, 0.8); transform: translateY(-2px); }
    14%, 100% { transform: none; }
  }
}

/* ---------- Same evidence ---------- */
.ag-same { perspective: 1800px; }
.ag-same .product-shot { position: relative; transform-origin: 50% 0%; rotate: x calc(var(--pt, 0) * 10deg); overflow: hidden; border: 0; border-radius: 16px; background: var(--sg-surface); box-shadow: 0 0 0 1px var(--sg-line-2), 0 50px 120px -40px rgba(0, 0, 0, 0.9); }
.ag-same .product-shot img { border: 0; border-radius: 0; }
.ag-same .product-shot figcaption { padding: 6px 20px; border-top: 1px solid var(--sg-line); background: #0B0806; color: var(--sg-faint); font-size: 13px; }
.ag-same .shot-open { color: var(--sg-ink); font-weight: 500; text-decoration: none; }

/* ---------- For agents: a file the agent can read ---------- */
#for-agents { max-width: calc(var(--sg-max) + 2 * var(--sg-gutter)); margin: 0 auto; padding: var(--sg-section) var(--sg-gutter) 0; }
.ag-file { overflow: hidden; border-radius: 16px; background: var(--ag-term); box-shadow: 0 0 0 1px var(--sg-line-2), 0 40px 100px -40px rgba(0, 0, 0, 0.9); }
.ag-file-bar { display: flex; gap: 8px; align-items: center; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--sg-line); background: #0B0806; }
.ag-file-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2C2119; }
.ag-file-bar span { margin-left: 12px; color: var(--sg-faint); font: 400 12px/1 'JetBrains Mono', monospace; }
.ag-file-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; gap: 20px clamp(40px, 6vw, 96px); padding: clamp(32px, 5vw, 64px); font-family: 'JetBrains Mono', ui-monospace, monospace; }
p.ag-file-k { color: var(--sg-ember); font-size: 13px; }
.ag-file-body h2 { grid-column: 1; margin: 0; color: var(--sg-ink); font: 500 clamp(30px, 3.4vw, 46px)/1.04 'Exo 2', system-ui, sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
p.ag-file-intro { grid-column: 1; color: var(--sg-mute); font-size: 14px; line-height: 1.7; }
.ag-file-intro a { color: var(--sg-glow); text-underline-offset: 3px; }
.ag-file-body ol { grid-column: 2; grid-row: 1 / span 3; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ag; }
.ag-file-body li { position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--sg-line); color: var(--sg-mute); font-size: 13.5px; line-height: 1.7; counter-increment: ag; }
.ag-file-body li:first-child { padding-top: 0; border-top: 0; }
.ag-file-body li:first-child::before { top: 0; }
.ag-file-body li::before { content: counter(ag, decimal-leading-zero); position: absolute; top: 16px; left: 0; color: var(--sg-faint); }
.ag-file-body li strong { color: var(--sg-ink); font-weight: 600; }
.ag-file-body li code { color: var(--sg-glow); font-size: inherit; }

/* ---------- Fit ---------- */
.ag-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
h2.ag-h { margin-bottom: 28px; font-size: clamp(28px, 2.8vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.ag-fit dl { margin: 0; border-top: 1px solid var(--sg-line-2); }
.ag-fit dl > div { display: grid; gap: 8px; padding: 22px 0 24px; border-bottom: 1px solid var(--sg-line); }
.ag-fit dt { display: flex; gap: 12px; align-items: baseline; color: var(--sg-ink); font-size: 18px; font-weight: 500; }
.ag-fit dt::before { content: "+"; flex: none; width: 14px; color: var(--sg-good); font: 500 14px/1 'JetBrains Mono', monospace; }
.ag-fit-not dt::before { content: "–"; color: var(--sg-bad); }
.ag-fit dd { margin: 0 0 0 26px; max-width: 46ch; color: var(--sg-mute); font-size: 16px; line-height: 1.55; }

/* ---------- Close ---------- */
.ag-main .sg-close .sg-note { margin-top: -8px; }

/* ---------- Reveals (agents.mjs) ---------- */
html.ag-motion .ag-rv { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--sg-out), transform 1000ms var(--sg-expo), scale 140ms var(--sg-out); transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0ms; }
html.ag-motion .ag-rv.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ag-split { grid-template-columns: minmax(0, 1fr) 300px; }
  .ag-rail b { font-size: 11px; }
  .ag-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-clients li, .ag-clients li:nth-child(-n+2) { grid-column: auto; }
  .ag-clients li:first-child { grid-column: span 2; }
  .ag-lanes { --label: 200px; }
}
@media (max-width: 900px) {
  .ag-file-body { grid-template-columns: 1fr; }
  .ag-file-body ol { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .ag-fit { grid-template-columns: 1fr; gap: 72px; }
}
@media (max-width: 760px) {
  .ag-split { grid-template-columns: 1fr; }
  .ag-panel { border-left: 0; border-top: 1px solid var(--sg-line); padding: 18px 16px 20px; }
  .ag-rail { padding: 14px 16px; }
  .ag-rail::before, .ag-rail::after { left: 29px; right: calc(16px + (100% - 32px) / 4 - 13px); }
  .ag-rail b { display: none; }
  .ag-rail small { display: block; }
  .ag-term { padding: 18px 16px 22px; font-size: 11.5px; line-height: 1.7; }
  .ag-chrome span { margin-left: 8px; font-size: 11px; }
  .ag-ev, .ag-sub { display: none; }
  .ag-rail b, .ag-rail small { padding: 0 6px; font-size: 11px; }
  .ag-state { margin-top: 12px; padding-top: 12px; }

  .ag-beam { grid-template-columns: 1fr; gap: 40px; }
  .ag-beam::before { top: 0; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--sg-ember), var(--sg-glow)) 0 0 / 100% calc(var(--fill) * 100%) no-repeat, var(--sg-line-2); }
  .ag-beam::after { display: none; }
  .ag-beam li { padding: 0 0 0 68px; gap: 12px; }
  .ag-node { position: absolute; top: 0; left: 0; margin: 0; }
  .ag-beam code { padding-top: 11px; }

  .ag-lane { grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 24px 0 28px; }
  .ag-lane h3 { padding: 0 0 16px; }
  .ag-lane ol { display: flex; flex-wrap: wrap; gap: 8px; height: auto; }
  .ag-lane ol::before { display: none; }
  .ag-head { display: none; }
}
@media (max-width: 640px) {
  .ag-hero .sg-display { font-size: clamp(44px, 13.2vw, 72px); }
  .ag-hero .sg-actions .button.primary { width: 100%; }
  .ag-chrome span { display: none; }
  .ag-main .sg-display-close { font-size: clamp(40px, 11.6vw, 72px); }

  .ag-stage { margin-top: 56px; }
  .ag-session { border-radius: 14px; }
  .ag-session figcaption { padding: 12px 16px; font-size: 12px; }
  .ag-head-note { font-size: 17px; }
  .ag-url { gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; }
  .ag-url-k { display: none; }
  .ag-url code { font-size: 14px; }
  .ag-url button { min-width: 76px; min-height: 44px; padding: 0 14px; }
  .ag-clients { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .ag-clients li:first-child { grid-column: auto; }
  .ag-client { gap: 16px; padding: 22px 20px 24px; }
  .sg-tile.ag-client h3 { font-size: 21px; }
  .ag-go { top: 20px; right: 20px; }
  .ag-file-body { padding: 24px 18px 28px; }
  .ag-same .product-shot img { max-height: 560px; object-fit: cover; object-position: 50% 0; }
  .ag-file-body li { padding-left: 34px; font-size: 13px; }
  .ag-fit dt { font-size: 17px; }
}

/* ---------- Reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .ag-session { animation: none; transform: none; }
  .ag-chrome em b, .ag-listen-dot::after { animation: none; }
  .ag-ev li, .ag-rail::after, .ag-beam::before { transition: none; }
  html.ag-motion .ag-rv { opacity: 1; transform: none; transition: none; }
}

/* ======================================================================
   Product shine + mobile lift (2026-10-15). See home.css for .sg-shine.
   ====================================================================== */
.ag-same .product-shot { box-shadow: 0 0 0 1px var(--sg-line-2), 0 70px 140px -50px rgba(0, 0, 0, 0.95), 0 40px 100px -60px rgba(224, 106, 50, 0.5); }
.ag-same .product-shot img { display: block; width: 100%; height: auto; }

/* Focus rings: the failed rows, then the PR line once it lands. */
.ag-ev li, .ag-state li { position: relative; }
.ag-ev li.is-bad::after,
.ag-state li:last-child::after { content: ""; position: absolute; pointer-events: none; opacity: 0; border-radius: 8px; }
.ag-ev li.is-bad::after { inset: 0; box-shadow: inset 0 0 0 1px rgba(238, 122, 98, 0.7), 0 0 20px rgba(238, 122, 98, 0.25); }
.ag-state li:last-child::after { inset: 0 -8px; box-shadow: inset 0 0 0 1px rgba(255, 178, 92, 0.65), 0 0 22px rgba(224, 106, 50, 0.25); }
html:not(.ag-motion) .ag-ev li.is-bad::after, html:not(.ag-motion) .ag-state li.is-done:last-child::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.ag-motion .ag-ev li.is-bad.is-in::after { animation: sg-focus 1500ms var(--sg-out) 200ms 3; }
  html.ag-motion .ag-state li.is-done:last-child::after { animation: sg-focus 1500ms var(--sg-out) 3; }
  .ag-client:active, .ag-url button:active { scale: 0.985; }
}
.ag-client { transition: background-color 300ms var(--sg-out), scale 140ms var(--sg-out); }
.ag-url button { transition: background-color 160ms var(--sg-out), scale 140ms var(--sg-out); }

@media (max-width: 640px) {
  .ag-hero .sg-lead { max-width: 30ch; }
  .ag-hero .sg-hero-copy { gap: 18px; }
  .ag-hero .sg-k { margin-bottom: 0; }
  .ag-session { --tilt-x: 12deg; }
  .ag-stage { margin-top: 36px; }

  /* Session: code at 13px; the phone lines are short enough not to wrap. */
  .ag-term { padding: 18px 16px 22px; font-size: 13px; line-height: 1.7; }
  /* Rail: labels sit under their stops, so none truncates at 360. */
  .ag-rail { padding: 14px 16px 12px; }
  .ag-rail li { flex-direction: column; gap: 6px; }
  .ag-rail::before, .ag-rail::after { top: 27px; left: calc(16px + (100% - 32px) / 8); right: calc(16px + (100% - 32px) / 8); }
  .ag-rail b, .ag-rail small { padding: 0 4px; font-size: 12px; background: none; }
  .ag-chrome em { font-size: 12px; }
  .ag-session figcaption { font-size: 13px; }
  .ag-state li { font-size: 14px; }
  .ag-state small { font-size: 13px; }

  /* Connect: one compact list of clients, code wraps only between words. */
  .ag-url code { font-size: 15px; }
  p.ag-token { font-size: 15px; }
  .ag-token code { font-size: 13px; }
  .ag-clients { gap: 10px; margin-top: 32px; }
  .ag-client { gap: 10px; padding: 18px 20px 20px; }
  .sg-tile.ag-client h3 { font-size: 20px; }
  .ag-client code { font-size: 13px; overflow-wrap: break-word; }
  .ag-go { top: 18px; }
  p.ag-links { flex-direction: column; gap: 0; }

  .ag-beam { gap: 32px; }
  .ag-beam pre { font-size: 13px; }
  p.ag-listen { margin-top: 40px; padding-top: 24px; }
  .ag-lane { padding: 20px 0 22px; }
  p.ag-boundary { margin-top: 32px; font-size: 18px; }
  .ag-same .product-shot img { max-height: 520px; }
  .ag-same .product-shot figcaption { font-size: 13px; }
  .ag-fit { gap: 56px; }
  h2.ag-h { margin-bottom: 20px; }
  .ag-fit dl > div { padding: 18px 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-same .product-shot { rotate: none; }
  .ag-ev li.is-bad::after, .ag-state li.is-done:last-child::after { opacity: 1; animation: none; }
}