/* ==========================================================
   AGENTS PAGE — photo hero with light streaks, a live run feed,
   a green ops dashboard, moving tool rows, device cards, and
   three connected rings. Warm amber + signal green, little purple.
   ========================================================== */
.ag { --amber: #FF8A3D; --amber-2: #FFB46B; --sig: #3BE3A0; --sig-dim: rgba(59,227,160,.14); --glass: rgba(255,255,255,.08); }
.ag { overflow-x: clip; }
.ag-wrap { width: min(100% - 2 * var(--gut), 1200px); margin: 0 auto; }
.ag-k { margin: 0; font: 500 11.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.ag h2 { margin: 12px 0 0; font: 700 clamp(30px, 4.2vw, 54px)/1.02 var(--sans); letter-spacing: -.03em; color: var(--white); text-wrap: balance; }
.ag-lead { margin: 16px 0 0; max-width: 58ch; color: var(--dim); font-size: 16.5px; line-height: 1.6; }
.ag-sec { padding: clamp(56px, 8vw, 110px) 0; }

/* glass button: tinted purple glass, readable in both themes */
.ag-glass { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 22px; border-radius: 100px; font: 600 15px var(--sans); color: #fff;
  background: linear-gradient(145deg, rgba(95,211,160,.95), rgba(18,128,90,.92) 55%, rgba(18,128,90,.95));
  border: 1px solid rgba(255,255,255,.45); box-shadow: inset 0 1px 1px rgba(255,255,255,.65), inset 0 -8px 16px rgba(40,20,120,.35), 0 16px 40px -14px rgba(18,128,90,.75);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.ag-glass::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 48%; border-radius: 100px; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.ag-glass svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; position: relative; }
.ag-glass:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -8px 16px rgba(40,20,120,.35), 0 22px 50px -12px rgba(18,128,90,.9); }
.ag-glass:hover svg { transform: translateX(4px); }
.ag-glass:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }

/* ---------- one run ---------- */
.ag-run { position: relative; isolation: isolate; padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.ag-run-in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .ag-run-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.ag-run-copy p:not(.ag-k) { margin: 16px 0 0; max-width: 46ch; color: var(--dim); font-size: 17px; line-height: 1.65; }
.ag-screen { position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: #0A0C11; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(59,227,160,.06) inset; overflow: hidden; min-height: 400px; color: #F4F6FB; }
.ag-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.ag-screen-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font: 12.5px var(--mono); }
.ag-screen-top em { margin-left: auto; font-style: normal; color: #8B93A5; font-variant-numeric: tabular-nums; }
.ag-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 0 rgba(59,227,160,.6); animation: agPing 1.8s infinite; }
@keyframes agPing { 70% { box-shadow: 0 0 0 10px rgba(59,227,160,0); } 100% { box-shadow: 0 0 0 0 rgba(59,227,160,0); } }
.ag-feed { list-style: none; margin: 0; padding: 14px 18px 4px; display: grid; gap: 10px; }
.ag-feed li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); animation: agIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes agIn { from { opacity: 0; transform: translateY(8px); } }
.ag-feed .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.07); font: 600 11px var(--mono); color: #C9CFDA; }
.ag-feed li.tool .ic { background: rgba(255,138,61,.16); color: var(--amber-2); }
.ag-feed li.wait .ic { background: rgba(255,200,90,.16); color: #FFD27A; }
.ag-feed li.done .ic { background: var(--sig-dim); color: var(--sig); }
.ag-feed b { display: block; font: 600 13.5px var(--sans); }
.ag-feed span { display: block; margin-top: 3px; font: 12.5px/1.5 var(--mono); color: #A5ADBD; overflow-wrap: anywhere; }
.ag-feed time { font: 11px var(--mono); color: #6F7787; font-variant-numeric: tabular-nums; }
.ag-feed .caret::after { content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px; vertical-align: -1px; background: var(--amber); animation: agBlink 1s steps(1) infinite; }
.ag-approve { margin-top: 8px; display: inline-flex; gap: 8px; }
.ag-approve u { text-decoration: none; font: 600 11.5px var(--sans); padding: 5px 12px; border-radius: 100px; background: var(--sig); color: #04140C; }
.ag-approve u.tap { animation: agTap .5s ease; }
@keyframes agTap { 50% { transform: scale(.9); box-shadow: 0 0 0 6px rgba(59,227,160,.25); } }
.ag-approve s { text-decoration: none; font: 500 11.5px var(--sans); padding: 5px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,.2); color: #C9CFDA; }
@keyframes agBlink { 50% { opacity: 0; } }
.ag-ex { margin: 0; padding: 6px 18px 14px; text-align: right; font: 11px var(--mono); color: #6F7787; }

/* ---------- green ops dashboard ---------- */
.ag-ops { margin-top: 36px; border-radius: 22px; overflow: hidden; color: #E6F5EE;
  background: radial-gradient(900px 400px at 85% 0%, rgba(59,227,160,.12), transparent 60%), linear-gradient(180deg, #0B1F18, #07130F);
  border: 1px solid rgba(59,227,160,.22); box-shadow: 0 40px 100px -40px rgba(0,0,0,.7); position: relative; }
.ag-ops::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(ellipse 70% 50% at 20% 120%, transparent 0 26px, rgba(59,227,160,.07) 27px 28px); }
.ops-head { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(59,227,160,.14); font: 11.5px var(--mono); letter-spacing: .14em; color: #8FC9AF; }
.ops-chip { letter-spacing: .04em; padding: 4px 10px; border-radius: 100px; border: 1px solid rgba(59,227,160,.3); color: var(--sig); }
.ops-body { position: relative; display: grid; gap: 0; }
@media (min-width: 900px) { .ops-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.ops-chart { padding: 22px 22px 14px; position: relative; }
.ops-chart svg { width: 100%; height: 240px; display: block; overflow: visible; }
.ops-grid path { stroke: rgba(59,227,160,.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ops-area { fill: url(#none); fill: rgba(59,227,160,.08); }
.ops-line { fill: none; stroke: var(--sig); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(59,227,160,.7)); stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 2.4s cubic-bezier(.3,.6,.2,1); }
.ag-ops.on .ops-line { stroke-dashoffset: 0; }
.ops-dip { fill: #FF7A6B; stroke: #07130F; stroke-width: 3; }
.ops-end { fill: var(--sig); filter: drop-shadow(0 0 8px var(--sig)); }
.ops-note { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono); color: #FF9C90; }
.ops-note i { width: 7px; height: 7px; border-radius: 50%; background: #FF7A6B; }
.ops-x { display: flex; justify-content: space-between; margin-top: 10px; font: 11px var(--mono); color: #6FA58D; }
.ops-log { list-style: none; margin: 0; padding: 18px 22px; display: grid; gap: 8px; align-content: start; border-top: 1px solid rgba(59,227,160,.14); }
@media (min-width: 900px) { .ops-log { border-top: 0; border-left: 1px solid rgba(59,227,160,.14); } }
.ops-log li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 12px; background: rgba(59,227,160,.04); border: 1px solid rgba(59,227,160,.1); }
.ops-log li.new { animation: agIn .5s ease; border-color: rgba(59,227,160,.4); }
.ops-log i { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--sig); }
.ops-log i.wait { background: #FFD27A; } .ops-log i.fix { background: #8FB8FF; }
.ops-log b { display: block; font: 600 13px var(--sans); color: #E6F5EE; }
.ops-log span { display: block; margin-top: 2px; font: 12px var(--mono); color: #8FC9AF; }
.ops-log time { font: 11px var(--mono); color: #6FA58D; white-space: nowrap; }
.ops-stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(59,227,160,.14); }
@media (min-width: 700px) { .ops-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ops-stats div { padding: 18px 22px; border-right: 1px solid rgba(59,227,160,.1); }
.ops-stats b { display: block; font: 700 30px var(--sans); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ops-stats span { font: 11.5px var(--mono); color: #8FC9AF; }

/* ---------- tool rows ---------- */
.ag-flow { padding: 0 0 clamp(40px, 6vw, 80px); display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.flow-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding-left: max(var(--gut), calc((100vw - 1200px) / 2)); }
.flow-l { margin: 0; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); width: 140px; }
.flow-track { overflow: hidden; }
.flow-in { display: flex; gap: 10px; width: max-content; animation: agTick 38s linear infinite; }
.flow-row.rev .flow-in { animation-direction: reverse; animation-duration: 44s; }
.flow-in span { font: 500 14px var(--sans); color: var(--white); padding: 11px 18px; border-radius: 100px; border: 1px solid var(--edge-2); background: var(--wash); white-space: nowrap; }
@media (max-width: 700px) { .flow-row { grid-template-columns: 1fr; gap: 8px; } }


@media (prefers-reduced-motion: reduce) {
  .ag-hero-fx i, .flow-in, .ag-next i, .ag-pulse { animation: none; }
  .ops-line { transition: none; stroke-dashoffset: 0; }
}

/* ---------- hero ---------- */
.ag-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(150px, 16vw, 210px) 0 clamp(90px, 10vw, 140px); }
.ag-hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ag-hero-fx i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: agFloat 14s ease-in-out infinite alternate; }
.ag-hero-fx .g1 { width: 520px; height: 520px; left: 8%; top: 4%; background: radial-gradient(circle, rgba(255,138,61,.45), transparent 65%); }
.ag-hero-fx .g2 { width: 600px; height: 600px; right: 4%; top: 18%; background: radial-gradient(circle, rgba(79,194,145,.5), transparent 65%); animation-delay: -7s; }
@keyframes agFloat { to { transform: translate(40px, 30px) scale(1.1); } }
.ag-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--edge) 1px, transparent 1px), linear-gradient(90deg, var(--edge) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000, transparent 75%); }
.ag-next { position: relative; display: inline-grid; place-items: center; width: 168px; height: 58px; margin-bottom: 26px; border-radius: 100px;
  border: 3px dotted color-mix(in srgb, var(--iris) 85%, transparent); }
.ag-next::after { content: ""; position: absolute; inset: 7px; border-radius: 100px; border: 2px dotted color-mix(in srgb, var(--amber) 80%, transparent); }
.ag-next span { font: 700 12.5px var(--mono); letter-spacing: .2em; color: var(--white); }
.ag-next i { position: absolute; width: 11px; height: 11px; border-radius: 50%; animation: agOrbit 4.5s linear infinite; }
.ag-next .d1 { background: var(--iris); box-shadow: 0 0 12px var(--iris); offset-path: inset(-2px round 30px); }
.ag-next .d2 { width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 10px var(--amber); offset-path: inset(8px round 22px); animation-direction: reverse; animation-duration: 3.4s; }
@keyframes agOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ag-hero h1 { margin: 0 auto; max-width: 16ch; font: 700 clamp(42px, 6.6vw, 92px)/.98 var(--sans); letter-spacing: -.04em; color: var(--white); text-wrap: balance; }
.ag-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--iris); letter-spacing: -.01em; }
.ag-tag2 { margin: 22px 0 34px; font: 600 clamp(15px, 1.6vw, 20px) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ag-tag2 span { color: var(--amber); }
.ag-mail { margin: 16px 0 0; font: 12.5px var(--mono); color: var(--dim-2); }

/* ---------- device cards ---------- */
.ag-inds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ag-inds span { font: 500 14.5px var(--sans); color: var(--white); padding: 10px 18px; border-radius: 100px; border: 1px solid var(--edge-2); background: var(--raise); }

/* light theme */
:root[data-theme="light"] .ag-hero-fx i { opacity: .35; }
:root[data-theme="light"] .flow-in span { background: #fff; }

/* ===== round 3: tighter spacing, cleaner cards, a real loop ===== */
.ag-sec { padding: clamp(36px, 4.5vw, 64px) 0; }
.ag-run { padding: clamp(36px, 4.5vw, 64px) 0; }
.ag-flow { padding: 0 0 clamp(20px, 3vw, 36px); }
.ag-ops { margin-top: 24px; }
.ag-k.strong { font-weight: 700; color: var(--white); letter-spacing: .2em; }
.ag-inds span { display: inline-flex; align-items: center; gap: 9px; }
.ag-inds svg { width: 17px; height: 17px; fill: none; stroke: var(--iris); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-inds { margin-top: 20px; }

/* cards: the device is the card, shown whole */

/* ===== how a setup works: five stations on one rail ===== */
.su-rail { position: relative; height: 2px; margin: 34px 0 0; background: var(--edge-2); border-radius: 2px; overflow: hidden; }
.su-fill { position: absolute; inset: 0 auto 0 0; width: 20%; background: linear-gradient(90deg, #FF8A3D, #4FC291, #3BE3A0, #6EA0F5, #E8B872); background-size: 500% 100%; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.su-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .su-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .su-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.su-st { position: relative; padding: 14px 14px 18px; border-radius: 20px; border: 1px solid var(--edge-2); background: var(--raise); transition: border-color .45s, box-shadow .45s, transform .45s, opacity .45s; opacity: .62; }
.su-st.on, .su-st.done { opacity: 1; }
.su-st.on { border-color: var(--c); box-shadow: 0 18px 44px -26px var(--c); transform: translateY(-4px); }
.su-st b { display: block; margin-top: 4px; font: 700 18px var(--sans); color: var(--white); letter-spacing: -.01em; }
.su-n { margin: 14px 0 0; font: 500 11px var(--mono); letter-spacing: .16em; color: var(--c); }
.su-d { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--dim); }
.su-viz { position: relative; height: 132px; border-radius: 14px; background: var(--ink); border: 1px solid var(--edge); overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 6px; justify-content: center; font: 500 11.5px var(--mono); color: var(--dim); }

/* 1 pick */
.su-pick span { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 5px 9px; border-radius: 8px; background: var(--wash); border: 1px solid transparent; transition: border-color .4s, background .4s, color .4s; }
.su-pick em { font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--c); color: #120A04; opacity: 0; transform: scale(.7); transition: opacity .35s .35s, transform .35s .35s; }
.su-st.on .su-pick .pk, .su-st.done .su-pick .pk { border-color: var(--c); color: var(--white); background: color-mix(in srgb, var(--c) 14%, transparent); }
.su-st.on .su-pick em, .su-st.done .su-pick em { opacity: 1; transform: none; }

/* 2 rules */
.su-rules .r { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; background: var(--wash); color: var(--white); opacity: .35; transform: translateX(-6px); transition: opacity .4s, transform .4s; }
.su-rules .r i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.su-rules .ok i { background: #3BE3A0; } .su-rules .ask i { background: #E8B872; } .su-rules .no i { background: #FF6B6B; }
.su-st.on .su-rules .r, .su-st.done .su-rules .r { opacity: 1; transform: none; }
.su-st.on .su-rules .r:nth-child(2) { transition-delay: .25s; } .su-st.on .su-rules .r:nth-child(3) { transition-delay: .5s; }

/* 3 wire */
.su-wire { padding: 0; }
.su-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.su-wire .w { fill: none; stroke: var(--edge-2); stroke-width: 1.6; stroke-dasharray: 4 5; }
.su-st.on .su-wire .w, .su-st.done .su-wire .w { stroke: var(--c); }
.su-st.on .su-wire .w { animation: suDash 1.1s linear infinite; }
.su-wire .hub { fill: var(--raise-2); stroke: var(--c); stroke-width: 1.6; }
.su-wire .hub-i { stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; }
.su-wire .t { position: absolute; padding: 3px 7px; border-radius: 7px; background: var(--raise-2); border: 1px solid var(--edge-2); color: var(--white); font-size: 10.5px; }
.su-wire .t1 { left: 6%; top: 12%; } .su-wire .t2 { left: 4%; bottom: 12%; } .su-wire .t3 { right: 7%; top: 12%; } .su-wire .t4 { right: 7%; bottom: 12%; }
@keyframes suDash { to { stroke-dashoffset: -18; } }

/* 4 test */
.su-test .g { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.su-test .g i { aspect-ratio: 1; border-radius: 4px; background: var(--wash-2); }
.su-st.on .su-test .g i, .su-st.done .su-test .g i { animation: suPass .3s forwards; animation-delay: calc(var(--k, 0) * 60ms); }
.su-st.on .su-test .g i.fx, .su-st.done .su-test .g i.fx { animation: suFix 1.6s forwards; animation-delay: calc(var(--k, 0) * 60ms); }
.su-test .lg { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; }
.su-test .lg i { width: 8px; height: 8px; border-radius: 2px; } .su-test .lg .p { background: #3BE3A0; } .su-test .lg .f { background: #E8B872; margin-left: 8px; }
@keyframes suPass { to { background: #3BE3A0; } }
@keyframes suFix { 0% { background: var(--wash-2); } 25%, 60% { background: #E8B872; } 100% { background: #3BE3A0; } }

/* 5 live */
.su-live { align-items: center; gap: 10px; }
.su-live .sw { position: relative; width: 52px; height: 28px; border-radius: 20px; background: var(--wash-2); border: 1px solid var(--edge-2); transition: background .4s; }
.su-live .sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--dim); transition: transform .45s cubic-bezier(.2,.7,.2,1), background .4s; }
.su-st.on .su-live .sw, .su-st.done .su-live .sw { background: color-mix(in srgb, #3BE3A0 30%, transparent); }
.su-st.on .su-live .sw i, .su-st.done .su-live .sw i { transform: translateX(24px); background: #3BE3A0; }
.su-live .lv { letter-spacing: .2em; font-size: 10.5px; color: var(--dim); transition: color .4s; }
.su-st.on .su-live .lv, .su-st.done .su-live .lv { color: #3BE3A0; }
.su-live .ap { display: flex; gap: 6px; }
.su-live .ap u, .su-live .ap s { text-decoration: none; padding: 4px 10px; border-radius: 8px; font-size: 10.5px; }
.su-live .ap u { background: var(--c); color: #1C1205; }
.su-live .ap s { border: 1px solid var(--edge-2); color: var(--white); }
.su-st.on .su-live .ap u { animation: suTap 2.2s .6s infinite; }
@keyframes suTap { 0%, 70%, 100% { transform: none; } 80% { transform: scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .su-st, .su-fill, .su-viz * { transition: none !important; animation: none !important; }
  .su-st { opacity: 1; }
}
.su-viz { height: 140px; }
.su-pick { gap: 4px; }
.su-pick span { padding: 4px 8px; white-space: nowrap; font-size: 11px; }
.su-pick em { margin-left: 6px; }
.su-wire .in { position: relative; width: 100%; max-width: 250px; height: 100%; margin: 0 auto; }
.su-test .g { grid-template-columns: repeat(8, minmax(0, 18px)); justify-content: center; }
.su-test .lg { justify-content: center; }

.su-st { cursor: pointer; }

/* the little agent that rides the setup line */
.su-rail { overflow: visible; margin-top: 46px; }
.su-fill { border-radius: 2px; }
.su-bot { position: absolute; top: -30px; left: 20%; width: 28px; height: 28px; margin-left: -14px; color: #FF8A3D; transition: left .9s cubic-bezier(.2,.7,.2,1), color .5s; filter: drop-shadow(0 0 8px currentColor); }
.su-bot svg { width: 100%; height: 100%; overflow: visible; }
.su-bot rect { fill: var(--raise-2); stroke: currentColor; stroke-width: 1.8; }
.su-bot .eye { fill: currentColor; animation: suBlink 3.2s infinite; transform-origin: center; transform-box: fill-box; }
.su-bot .ant, .su-bot .leg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.su-bot circle.ant { fill: currentColor; stroke: none; }
.su-bot.hop svg { animation: suHop .9s ease; }
.su-bot .leg { animation: suWalk .3s steps(2) 3; }
@keyframes suHop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-5px); } 50% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
@keyframes suBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes suWalk { 50% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .su-bot, .su-bot * { animation: none !important; transition: none !important; } }
.su-bot { width: 38px; height: 38px; margin-left: -19px; top: -40px; }
/* the bot's temperature bubble: colder at the first manual job, hot once it's live */
.su-temp { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 10px; font: 700 11.5px var(--sans); color: #0B0F17; background: var(--tc, #6EB5FF); box-shadow: 0 6px 16px -6px var(--tc, #6EB5FF); transition: background .5s, box-shadow .5s; filter: none; }
.su-temp::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--tc, #6EB5FF); transition: border-color .5s; }
.su-rail { margin-top: 84px !important; }