/* ==========================================================================
 * AI Agents: hub, agent pages, use cases (blocks agents-hub, agent-page,
 * use-case) and the agent section on integration pages.
 *
 * Heroes reuse the landing hero (.lh-*, landing.css) and sections reuse the
 * integration section shell (.ip-*, integration.css). Everything here is
 * prefixed .ag-. Scenes render final without JavaScript; agents.js adds
 * .is-armed, then .is-play when a scene scrolls into view, to replay motion.
 * Rules that must beat the editorial styles carry :not(#ag).
 * ========================================================================== */

.ag-hero,
.ip-section.ag-how, .ag-output, .ag-when, .ag-apps, .ag-control, .ag-cases, .ag-relay-sec,
.ag-compare, .ag-plans, .ag-team, .ag-library, .ag-run, .ag-appsec, .ag-int, .ag-guide {
	--ag: #8b5cf6;
	--ag-line: #ffffff1a;
	--ag-muted: #a5a2b8;
	--ag-soft: #cfcbe0;
	--ag-good: #5ee6a8;
	--ag-wait: #fbbf24;
	--ag-no: #f87171;
	--ag-ease: cubic-bezier(.2, .8, .2, 1);
	--ag-pop: cubic-bezier(.34, 1.56, .64, 1);
}
.ag-hero *, .ag-hero *::before, .ag-hero *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ Hero */

.ag-hero .lh-copy { max-width: 920px; }
.ag-hero .ag-crumbs { margin-bottom: 18px; }
.ag-hero .lh-section .lh-title, .ag-hero .ag-title:not(#ag) { margin-top: 18px; }
.ag-hero--uc .ag-title:not(#ag) { font-size: clamp(32px, 4.4vw, 56px); }

.ag-ribbons {
	position: absolute; right: -10%; top: 4%; width: min(720px, 70vw); aspect-ratio: 1;
	background:
		repeating-radial-gradient(circle at 70% 30%, transparent 0 22px, #8b5cf622 23px 24px, transparent 25px 46px);
	-webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%);
	mask-image: radial-gradient(closest-side, #000 20%, transparent 75%);
	opacity: .55; filter: blur(.3px);
	animation: ag-drift 26s ease-in-out infinite alternate;
}
@keyframes ag-drift { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }

.ag-badge {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 6px 8px 6px 6px; border-radius: 999px;
	background: #ffffff08; border: 1px solid #ffffff1a; box-shadow: inset 0 0 18px 0 color-mix(in srgb, var(--ag) 30%, transparent);
	color: #fff; font-size: 14px; line-height: 1.4;
}
.ag-badge-ico {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: color-mix(in srgb, var(--ag) 26%, #120a2b); color: #fff;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ag) 55%, transparent), 0 0 22px -4px var(--ag);
}
.ag-badge b { font-weight: 600; }
.ag-badge i {
	display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
	background: #5ee6a81f; color: var(--ag-good); font-style: normal; font-size: 12px; font-weight: 600;
}
.ag-badge i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px #5ee6a833; animation: lh-ping 2s ease-out infinite; }

/* ------------------------------------------------------------ Scene base */

.ag-vis { position: relative; max-width: 900px; margin: 0 auto; text-align: left; color: var(--ag-soft); font-family: Inter, sans-serif; }
.ag-vis-in { position: relative; }
.ag-win {
	position: relative; overflow: hidden;
	border-radius: 22px; border: 1px solid #ffffff24;
	background: linear-gradient(180deg, #1b1038f5, #0d0820f5);
	box-shadow: 0 50px 100px -50px #000, 0 0 0 1px #00000040, inset 0 1px 0 #ffffff14;
}
.ag-win-bar {
	display: flex; align-items: center; gap: 12px; padding: 12px 16px;
	border-bottom: 1px solid #ffffff12; background: #ffffff05;
}
.ag-win-dots { display: inline-flex; gap: 6px; }
.ag-win-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff1f; }
.ag-win-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 13.5px; font-weight: 600; }
.ag-win-body { padding: 18px; }
.ag-win-foot {
	display: flex; align-items: center; gap: 8px; padding: 12px 18px;
	border-top: 1px solid #ffffff12; background: #5ee6a80a; color: #c9f7e1; font-size: 13.5px; font-weight: 500;
}
.ag-win-foot svg { color: var(--ag-good); flex: 0 0 auto; }

.ag-chip {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
	padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
	background: #5ee6a81a; color: var(--ag-good);
}
.ag-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lh-ping 2s ease-out infinite; }
.ag-chip.is-wait { background: #fbbf241a; color: var(--ag-wait); }
.ag-chip.is-info { background: #a78bfa1f; color: #d4c8ff; }

.ag-vis .ui-av { width: 34px; height: 34px; flex: 0 0 auto; font-size: 12px; }

.ag-float {
	position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
	padding: 10px 14px 10px 10px; border-radius: 16px; max-width: 260px;
	background: #170e33f2; border: 1px solid #ffffff24;
	box-shadow: 0 24px 50px -20px #000, 0 0 30px -12px color-mix(in srgb, var(--ag, #8b5cf6) 70%, transparent);
	backdrop-filter: blur(10px);
	animation: lh-float 6s ease-in-out infinite;
}
.ag-float > span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ag-float b { color: #fff; font-size: 13.5px; font-weight: 600; }
.ag-float small { color: var(--ag-muted); font-size: 12px; }
.ag-float-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb, var(--ag, #8b5cf6) 26%, #120a2b); color: #fff; }
.ag-float-ico.is-go { background: #5ee6a826; color: var(--ag-good); }
.ag-float-ico.is-wait { background: #fbbf2426; color: var(--ag-wait); }
.ag-float.is-tl { left: -4%; top: 16%; }
.ag-float.is-tr { right: -4%; top: 14%; animation-delay: -2s; }
.ag-float.is-bl { left: -3%; bottom: 12%; animation-delay: -3s; }
.ag-float.is-br { right: -3%; bottom: 14%; animation-delay: -4s; }

/* ------------------------------------------------------- Research scene */

.ag-research { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: center; }
.ag-radar {
	position: relative; aspect-ratio: 1; width: 100%; border-radius: 50%; overflow: hidden;
	background: radial-gradient(circle, color-mix(in srgb, var(--ag) 18%, transparent), transparent 70%), #0b0720;
	border: 1px solid color-mix(in srgb, var(--ag) 40%, transparent);
}
.ag-radar-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ag) 30%, transparent); }
.ag-radar-ring.is-1 { width: 33%; height: 33%; }
.ag-radar-ring.is-2 { width: 66%; height: 66%; }
.ag-radar-ring.is-3 { width: 99%; height: 99%; }
.ag-radar-sweep {
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0deg 300deg, color-mix(in srgb, var(--ag) 55%, transparent) 355deg, transparent 360deg);
	animation: ag-spin 3.6s linear infinite;
}
.ag-blip {
	position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ag) 40%, transparent), 0 0 18px 3px var(--ag);
	animation: ag-blip 3.6s ease-out infinite; animation-delay: calc(var(--d) * .6s);
}
.ag-radar-core {
	position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
	background: color-mix(in srgb, var(--ag) 45%, #120a2b); color: #fff; box-shadow: 0 0 30px -4px var(--ag);
}
@keyframes ag-spin { to { transform: rotate(360deg); } }
@keyframes ag-blip { 0%, 100% { opacity: .25; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.25); } 40% { opacity: .9; transform: scale(1); } }

.ag-found { display: grid; gap: 8px; min-width: 0; }
.ag-found-k { display: flex; align-items: center; justify-content: space-between; color: var(--ag-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ag-found-k b { color: #fff; font-size: 13px; letter-spacing: 0; }
.ag-row {
	display: flex; align-items: center; gap: 10px; min-width: 0;
	padding: 9px 10px; border-radius: 14px; background: #ffffff07; border: 1px solid #ffffff10;
}
.ag-row-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.ag-row-txt b { color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row-txt small { color: var(--ag-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-src {
	display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
	padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-style: normal;
	background: color-mix(in srgb, var(--ag, #8b5cf6) 18%, transparent); color: #fff;
}

/* ------------------------------------------------------ Qualifier scene */

.ag-qual { display: grid; gap: 16px; }
.ag-qual-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ag-qual-k { display: inline-flex; align-items: center; gap: 7px; color: var(--ag-soft); font-size: 13px; }
.ag-queue { display: inline-flex; align-items: center; }
.ag-queue-av { margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px #140c2e; }
.ag-queue-av:first-child { margin-left: 0; }
.ag-queue i { margin-left: 8px; color: var(--ag-muted); font-style: normal; font-size: 12px; font-weight: 600; }
.ag-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ag-lane {
	--tone: var(--ag-good);
	display: flex; flex-direction: column; gap: 8px; min-height: 190px; padding: 12px; border-radius: 16px;
	background: color-mix(in srgb, var(--tone) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--tone) 35%, transparent);
}
.ag-lane.is-maybe { --tone: var(--ag-wait); }
.ag-lane.is-no { --tone: var(--ag-no); }
.ag-lane-k { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 13px; font-weight: 600; }
.ag-lane-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.ag-lane-k b { margin-left: auto; color: var(--tone); font-size: 15px; }
.ag-qcard { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 12px; background: #140c2ee6; border: 1px solid #ffffff14; }
.ag-qcard .ui-av { width: 28px; height: 28px; }
.ag-qcard > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ag-qcard b { color: #fff; font-size: 12.5px; font-weight: 600; }
.ag-qcard small { color: var(--ag-muted); font-size: 11.5px; }
.ag-gauge { gap: 12px; }
.ag-gauge-ring {
	--p: 60;
	display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
	background: conic-gradient(var(--ag-good) calc(var(--p) * 1%), #ffffff14 0);
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%);
	position: relative;
}
.ag-gauge-ring b { position: absolute; color: #fff; font-size: 12px; }
.ag-gauge { position: absolute; }
.ag-gauge > .ag-gauge-ring + span { display: flex; flex-direction: column; }

/* --------------------------------------------------------- Writer scene */

.ag-writer { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ag-profile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 18px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ag) 16%, transparent), transparent 60%), #ffffff06; border: 1px solid #ffffff14;
}
.ag-profile .ui-av { width: 54px; height: 54px; margin-bottom: 4px; box-shadow: 0 0 0 3px #ffffff14; }
.ag-profile b { color: #fff; font-size: 15px; }
.ag-profile small { color: var(--ag-muted); font-size: 12.5px; }
.ag-profile-hook { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px; border-radius: 12px; background: #0b0720; border: 1px solid #ffffff12; color: #fff; font-size: 12.5px; line-height: 1.45; }
.ag-profile-hook i { display: inline-flex; align-items: center; gap: 5px; color: var(--ag-muted); font-style: normal; font-size: 11px; }
.ag-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ag-profile-tags em, .ag-compose-rules em {
	display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
	background: #ffffff0d; color: var(--ag-soft); font-style: normal; font-size: 11.5px;
}
.ag-compose { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: #ffffff05; border: 1px solid #ffffff14; }
.ag-compose-k { display: inline-flex; align-items: center; gap: 6px; color: var(--ag-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ag-vis .ag-msg:not(#ag) { position: relative; margin: 0; min-height: 132px; color: #fff; font-size: 15.5px; line-height: 1.6; }
.ag-token {
	display: none; padding: 2px 8px; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
	background: color-mix(in srgb, var(--ag) 26%, transparent); color: #e9e3ff; border: 1px dashed color-mix(in srgb, var(--ag) 70%, transparent);
}
.ag-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--ag); animation: ag-caret 1s steps(1) infinite; }
@keyframes ag-caret { 50% { opacity: 0; } }
.ag-compose-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ag-compose-rules svg { color: var(--ag-good); }
.ag-stack { gap: 12px; }
.ag-stack-row { position: relative; margin-left: -10px; }
.ag-stack-row:first-child { margin-left: 0; }
.ag-stack-row .ui-av { width: 30px; height: 30px; box-shadow: 0 0 0 2px #170e33; }
.ag-stack-row i { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ag-good); color: #0b1f16; }
.ag-stack > span:last-child { margin-left: 4px; }

/* ---------------------------------------------------------- Reply scene */

.ag-thread { display: flex; flex-direction: column; gap: 14px; }
.ag-bubble { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; }
.ag-bubble > span { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; }
.ag-bubble b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 600; }
.ag-bubble.is-them > span { border-bottom-left-radius: 6px; background: #ffffff0d; border: 1px solid #ffffff14; color: var(--ag-soft); }
.ag-bubble.is-draft { align-self: flex-end; }
.ag-bubble.is-draft > span {
	border-bottom-right-radius: 6px; color: #fff; min-height: 110px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--ag) 26%, #2a1660), #241450);
	border: 1px dashed color-mix(in srgb, var(--ag) 60%, transparent);
}
.ag-label { padding: 2px 8px; border-radius: 999px; background: #5ee6a822; color: var(--ag-good); font-style: normal; font-size: 11px; font-weight: 600; }
.ag-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 44px; }
.ag-sources-k { display: inline-flex; align-items: center; gap: 5px; color: var(--ag-muted); font-size: 12px; }
.ag-sources em { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #ffffff0d; border: 1px solid #ffffff14; color: var(--ag-soft); font-style: normal; font-size: 12px; }
.ag-approve { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ag-approve-k { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ag-muted); font-size: 12.5px; }
.ag-btn { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.ag-btn.is-ghost { background: #ffffff10; color: var(--ag-soft); }
.ag-btn.is-go { background: var(--ag-good); color: #0b1f16; animation: ip-pulse 2.4s ease-out 1.5s infinite; }

/* --------------------------------------------------------- Custom scene */

.ag-build { position: relative; display: grid; gap: 10px; padding-left: 4px; }
.ag-build-line { position: absolute; left: 25px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, var(--ag), #8b5cf6); opacity: .5; }
.ag-build-line i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px var(--ag); animation: ag-down 3.2s linear infinite; }
@keyframes ag-down { 0% { top: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
.ag-node { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 8px; border-radius: 14px; background: #ffffff07; border: 1px solid #ffffff14; }
.ag-node-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb, var(--ag) 30%, #120a2b); color: #fff; box-shadow: 0 0 0 4px #150d30; }
.ag-node-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.4; }
.ag-node-txt b { color: #fff; font-size: 13px; }
.ag-node-txt small { color: var(--ag-soft); font-size: 12.5px; }
.ag-node-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-node-chips em { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ag) 18%, transparent); color: #e4f9ff; font-style: normal; font-size: 12px; }
.ag-node-logos { display: flex; gap: 6px; margin-top: 2px; }

/* ------------------------------------------------------------ Hub orbit */

@property --ag-spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.ag-vis--hub { max-width: 820px; }
.ag-orbit { position: relative; aspect-ratio: 1.75; container-type: size; }
.ag-orbit-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; border: 1px solid #ffffff14; }
.ag-orbit-ring.is-1 { width: 34cqw; height: 44cqh; border-color: #8b5cf640; box-shadow: 0 0 80px -20px #7350ff inset; }
.ag-orbit-ring.is-2 { width: 68cqw; height: 74cqh; border-style: dashed; }
.ag-orbit-ring.is-3 { width: 94cqw; height: 96cqh; border-color: #ffffff0c; }
.ag-orbit-apps, .ag-orbit-agents { position: absolute; inset: 0; }
.ag-orbit-apps { animation: ag-orbit 110s linear infinite; }
.ag-orbit-agents { animation: ag-orbit 140s linear infinite reverse; }
@keyframes ag-orbit { to { --ag-spin: 360deg; } }
.ag-orbit-app, .ag-orbit-agent { position: absolute; left: 50%; top: 50%; }
.ag-orbit-app { translate: calc(cos(var(--a) + var(--ag-spin)) * 47cqw) calc(sin(var(--a) + var(--ag-spin)) * 48cqh); }
.ag-orbit-agent { translate: calc(cos(var(--a) + var(--ag-spin)) * 34cqw) calc(sin(var(--a) + var(--ag-spin)) * 37cqh); }
.ag-orbit-app .ip-logo { width: 34px; height: 34px; border-radius: 10px; translate: -50% -50%; box-shadow: 0 10px 30px -10px #000, 0 0 0 4px #ffffff0a; }
.ag-orbit-app .ip-logo .ip-logo-img { width: 22px; height: 22px; }
.ag-orbit-pill {
	display: inline-flex; align-items: center; gap: 8px; translate: -50% -50%; white-space: nowrap;
	padding: 6px 12px 6px 6px; border-radius: 999px;
	background: #170e33f2; border: 1px solid color-mix(in srgb, var(--ag) 55%, transparent);
	box-shadow: 0 18px 40px -16px #000, 0 0 26px -10px var(--ag);
	color: #fff; font-size: 13px; font-weight: 600;
	animation: lh-float 6s ease-in-out infinite;
}
.ag-orbit-agent:nth-child(2) .ag-orbit-pill { animation-delay: -1.2s; }
.ag-orbit-agent:nth-child(3) .ag-orbit-pill { animation-delay: -2.4s; }
.ag-orbit-agent:nth-child(4) .ag-orbit-pill { animation-delay: -3.6s; }
.ag-orbit-agent:nth-child(5) .ag-orbit-pill { animation-delay: -4.8s; }
.ag-orbit-pill i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ag) 35%, #120a2b); font-style: normal; }
.ag-orbit-core {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%;
	display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.ag-orbit-core img { position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #8b5cf6, 0 0 0 10px #8b5cf62e, 0 0 70px 10px #7350ff99; }
.ag-orbit-core b { margin-top: 12px; color: #fff; font-size: 16px; }
.ag-orbit-core small { color: var(--ag-muted); font-size: 12.5px; }
.ag-orbit-pulse { position: absolute; left: 50%; top: 52px; width: 104px; height: 104px; margin: -52px; border-radius: 50%; border: 1px solid #a78bfa; animation: ag-pulse 3.4s ease-out infinite; }
.ag-orbit-pulse.is-2 { animation-delay: 1.7s; }
@keyframes ag-pulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.ag-vis--hub .ag-float.is-tl { left: 0; top: 4%; }
.ag-vis--hub .ag-float.is-br { right: 0; bottom: 6%; }

/* ------------------------------------------------------- Use case flow */

.ag-vis--flow { max-width: 620px; }
.ag-flow { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 26px; border: 1px solid #ffffff1f; background: linear-gradient(180deg, #1b1038f0, #0d0820f0); box-shadow: 0 50px 100px -50px #000, inset 0 1px 0 #ffffff14; }
.ag-flow-line { position: absolute; z-index: 0; left: 56px; top: 50px; bottom: 50px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, #ffffff30, var(--ag), #5ee6a8); }
.ag-flow-line i { display: none; }
.ag-flow-node { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 16px; background: #1a1236; border: 1px solid #ffffff17; }
.ag-flow-node::after { content: ""; position: absolute; left: 33px; bottom: -11px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--ag); opacity: 0; }
.ag-flow-node:last-child::after { display: none; }
.ag-vis.is-play .ag-flow-node::after { animation: ag-hop 4.5s ease-in-out infinite; animation-delay: calc(2.6s + var(--i, 0) * .9s); }
@keyframes ag-hop { 0%, 24%, 100% { opacity: 0; translate: 0 -5px; } 8%, 16% { opacity: 1; translate: 0 0; } }
.ag-flow-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: #2a1a5e; color: #fff; }
.ag-flow-node.is-agent { border-color: color-mix(in srgb, var(--ag) 45%, transparent); }
.ag-flow-node.is-agent .ag-flow-ico { background: color-mix(in srgb, var(--ag) 55%, #120a2b); box-shadow: 0 0 26px -4px var(--ag); }
.ag-flow-node.is-gate .ag-flow-ico { background: #3a2c12; color: var(--ag-wait); }
.ag-flow-node.is-result { background: #10241f; border-color: #5ee6a84d; }
.ag-flow-node.is-result .ag-flow-ico { background: #17423a; color: var(--ag-good); }
.ag-flow-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.ag-flow-txt small { color: var(--ag-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ag-flow-txt b { color: #fff; font-size: 14.5px; font-weight: 600; }
.ag-flow-logos { display: flex; gap: 6px; flex: 0 0 auto; }

/* ------------------------------------------------- Scene entrance (JS) */

.ag-vis.is-armed .ag-row,
.ag-vis.is-armed .ag-qcard,
.ag-vis.is-armed .ag-node,
.ag-vis.is-armed .ag-flow-node,
.ag-vis.is-armed .ag-sources em,
.ag-vis.is-armed .ag-bubble,
.ag-vis.is-armed .ag-approve,
.ag-vis.is-armed .ag-orbit-agent,
.ag-vis.is-armed .ag-float { opacity: 0; }
.ag-vis.is-play .ag-row,
.ag-vis.is-play .ag-node,
.ag-vis.is-play .ag-flow-node { animation: ag-in .5s var(--ag-ease) both; animation-delay: calc(.1s + var(--i, 0) * .22s); }
.ag-vis.is-play .ag-qcard { animation: ag-drop .7s var(--ag-pop) both; animation-delay: calc(.5s + var(--i, 0) * .5s); }
.ag-vis.is-play .ag-bubble.is-them { animation: ag-in .6s var(--ag-ease) .2s both; }
.ag-vis.is-play .ag-sources em { animation: ag-in .5s var(--ag-ease) both; animation-delay: calc(.9s + var(--i, 0) * .3s); }
.ag-vis.is-play .ag-bubble.is-draft { animation: ag-in .6s var(--ag-ease) 1.9s both; }
.ag-vis.is-play .ag-approve { animation: ag-in .6s var(--ag-ease) 2.4s both; }
.ag-vis.is-play .ag-orbit-agent { animation: ag-fade .8s ease both; animation-delay: calc(.2s + var(--i, 0) * .15s); }
.ag-vis.is-play .ag-float { animation: ag-pop .7s var(--ag-pop) both, lh-float 6s ease-in-out 1.6s infinite; animation-delay: 1.2s, 1.9s; }
.ag-vis.is-play .ag-float.is-br, .ag-vis.is-play .ag-float.is-bl { animation-delay: 2.2s, 2.9s; }
.ag-vis.is-typing .ag-token { display: inline-block; }
.ag-vis.is-typing .ag-caret { display: inline-block; }
@keyframes ag-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes ag-drop { from { opacity: 0; translate: 0 -40px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes ag-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-pop { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }

/* ------------------------------------------------------------ Statement */

.ag-statement { margin-top: 0; }

/* -------------------------------------------------------- How it works */

.ag-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ag-how-log { position: sticky; top: 120px; }
.ag-how .ag-log:not(#ag) { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ag-how .ag-log-line:not(#ag) {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0;
	padding: 11px 12px; border-radius: 12px; background: #ffffff06; border: 1px solid #ffffff10;
	color: var(--ag-soft); font-size: 14px; line-height: 1.45;
	transition: background-color .4s ease, border-color .4s ease, color .4s ease, opacity .4s ease;
}
.ag-log-line em { color: var(--ag-muted); font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ag-log-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #5ee6a822; color: var(--ag-good); transition: background-color .4s ease, color .4s ease; }
.ag-log-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff10; color: var(--ag-muted); font-size: 12.5px; }
.ag-log-foot span { display: inline-flex; align-items: center; gap: 6px; }
.ag-how.is-synced .ag-log-line:not(#ag) { opacity: .45; }
.ag-how.is-synced .ag-log-line.is-done:not(#ag) { opacity: 1; }
.ag-how.is-synced .ag-log-line:not(.is-done) .ag-log-ico { background: #ffffff10; color: transparent; }
.ag-how.is-synced .ag-log-line.is-now:not(#ag) { background: color-mix(in srgb, var(--ag) 14%, transparent); border-color: color-mix(in srgb, var(--ag) 45%, transparent); color: #fff; }

.ag-how .ag-how-steps:not(#ag) { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ag-how .ag-how-step:not(#ag) {
	position: relative; margin: 0; padding: 26px 26px 26px 84px; border-radius: 22px;
	border: 1px solid #ffffff14; background: #ffffff05;
	transition: border-color .4s ease, background-color .4s ease;
}
.ag-how .ag-how-step.is-now:not(#ag) { border-color: color-mix(in srgb, var(--ag) 50%, transparent); background: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--ag) 16%, transparent), transparent 70%), #ffffff06; }
.ag-how-n { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--ag) 30%, #120a2b); color: #fff; font-size: 14px; font-weight: 700; }
.ag-how .ag-how-step h3:not(#ag) { margin: 0 0 8px; color: #fff; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.ag-how .ag-how-step p:not(#ag) { margin: 0; color: var(--ag-muted); font-size: 15.5px; line-height: 1.65; }

/* --------------------------------------------------------------- Output */

.ag-output-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ag-output-copy { display: flex; flex-direction: column; gap: 28px; }
.ag-output .ag-points:not(#ag), .ag-control .ag-modes:not(#ag) { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ag-output .ag-points > li:not(#ag), .ag-control .ag-modes > li:not(#ag) {
	display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 16px;
	background: #ffffff06; border: 1px solid #ffffff12;
}
.ag-points-ico, .ag-modes-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: color-mix(in srgb, var(--ag) 24%, #120a2b); color: #fff; }
.ag-points li > span:last-child, .ag-modes li > span:last-child { display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
.ag-points b, .ag-modes b { color: #fff; font-size: 15.5px; font-weight: 600; }
.ag-points small, .ag-modes small { color: var(--ag-muted); font-size: 14px; }

.ag-out {
	position: relative; padding: 22px; border-radius: 26px; border: 1px solid #ffffff1f;
	background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--ag) 20%, transparent), transparent 60%), linear-gradient(180deg, #1b1038, #0d0820);
	box-shadow: 0 50px 100px -50px #000, inset 0 1px 0 #ffffff14;
	color: var(--ag-soft); font-family: Inter, sans-serif;
}
.ag-out .ui-av { width: 32px; height: 32px; }
.ag-out-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.ag-out-head b { color: #fff; font-size: 16px; }
.ag-out-head small { color: var(--ag-muted); font-size: 13px; }
.ag-table { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.2fr); gap: 0; }
.ag-th { padding: 0 10px 8px; color: var(--ag-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #ffffff14; }
.ag-td { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border-bottom: 1px solid #ffffff0d; font-size: 13.5px; }
.ag-td.is-person > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ag-td.is-person b { color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-td.is-person small { color: var(--ag-muted); font-size: 12px; }
.ag-td.is-why { color: var(--ag-soft); font-size: 13px; line-height: 1.4; }

.ag-verdict { --tone: var(--ag-good); position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: #ffffff06; border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); }
.ag-verdict + .ag-verdict { margin-top: 12px; }
.ag-verdict.is-maybe { --tone: var(--ag-wait); }
.ag-verdict.is-no { --tone: var(--ag-no); }
.ag-verdict-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.45; }
.ag-verdict-txt b { color: #fff; font-size: 14.5px; }
.ag-verdict-txt small { color: var(--ag-muted); font-size: 12.5px; }
.ag-verdict-txt > span { margin-top: 4px; color: var(--ag-soft); font-size: 14px; }
.ag-verdict em { margin-left: auto; flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone); font-style: normal; font-size: 12.5px; font-weight: 700; }

.ag-ba { padding: 16px 18px; border-radius: 18px; border: 1px solid #ffffff14; background: #ffffff05; }
.ag-ba.is-after { border-color: color-mix(in srgb, var(--ag) 55%, transparent); background: color-mix(in srgb, var(--ag) 10%, transparent); box-shadow: 0 0 50px -20px var(--ag); }
.ag-ba-k { display: inline-block; margin-bottom: 8px; color: var(--ag-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ag-ba.is-after .ag-ba-k { color: #e3dbff; }
.ag-out .ag-ba p:not(#ag) { margin: 0; color: var(--ag-soft); font-size: 15px; line-height: 1.6; }
.ag-out .ag-ba.is-before p:not(#ag) { text-decoration: line-through; text-decoration-color: #f8717188; }
.ag-out .ag-ba.is-after p:not(#ag) { color: #fff; }
.ag-ba-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ag-muted); font-size: 12px; }
.ag-ba-arrow { display: grid; place-items: center; height: 40px; color: var(--ag); transform: rotate(90deg); }

.ag-mail { display: flex; flex-direction: column; gap: 12px; }
.ag-mail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ag-soft); font-size: 13.5px; }
.ag-mail-row b { color: var(--ag-muted); font-weight: 600; }
.ag-out .ag-mail-them:not(#ag), .ag-out .ag-mail-draft:not(#ag) { margin: 0; padding: 14px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; }
.ag-out .ag-mail-them:not(#ag) { background: #ffffff08; border: 1px solid #ffffff12; color: var(--ag-soft); }
.ag-out .ag-mail-draft:not(#ag) { background: color-mix(in srgb, var(--ag) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--ag) 55%, transparent); color: #fff; }
.ag-mail-draft b { display: block; margin-bottom: 6px; color: #fde7a8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ag-mail-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-mail-cites em { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #ffffff0d; color: var(--ag-soft); font-style: normal; font-size: 12px; }

.ag-out .ag-runsteps:not(#ag) { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.ag-out .ag-runsteps > li:not(#ag) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #ffffff06; color: var(--ag-soft); font-size: 14px; }
.ag-runsteps i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #5ee6a822; color: var(--ag-good); }
.ag-runsteps em { color: var(--ag-muted); font-style: normal; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ag-out-wait { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 16px; background: #fbbf240f; border: 1px solid #fbbf2440; color: #fde7a8; font-size: 14px; }
.ag-out-wait > span:first-child { display: inline-flex; align-items: center; gap: 8px; }

.ag-out.ui-armed { opacity: 0; translate: 0 24px; }
.ag-out.ui-armed.is-in { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .9s var(--ag-ease); }

/* ---------------------------------------------------------------- When */

.ag-when-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ag-when-copy { display: flex; flex-direction: column; gap: 22px; }
.ag-dial { position: relative; aspect-ratio: 1; width: min(460px, 100%); margin: 0 auto; }
.ag-dial-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed #ffffff1f; animation: ag-spin 60s linear infinite; }
.ag-dial-ring.is-2 { inset: 30%; border-style: solid; border-color: color-mix(in srgb, var(--ag) 40%, transparent); animation: none; box-shadow: 0 0 60px -10px color-mix(in srgb, var(--ag) 60%, transparent) inset; }
.ag-dial-core { position: absolute; inset: 39%; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ag) 40%, #120a2b); color: #fff; box-shadow: 0 0 0 8px #ffffff08, 0 0 60px 0 color-mix(in srgb, var(--ag) 70%, transparent); }
.ag-dial-chip { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(min(190px, 38vw)) rotate(calc(var(--a) * -1)); }
.ag-dial-chip > span {
	display: inline-flex; align-items: center; gap: 7px; translate: -50% -50%; white-space: nowrap;
	padding: 7px 12px; border-radius: 999px; background: #120a2b; border: 1px solid #ffffff17; color: var(--ag-muted); font-size: 12.5px; font-weight: 500;
	transition: all .4s ease;
}
.ag-dial-chip.is-on > span { color: #fff; border-color: color-mix(in srgb, var(--ag) 65%, transparent); background: color-mix(in srgb, var(--ag) 22%, #120a2b); box-shadow: 0 0 30px -8px var(--ag); }
.ag-dial-chip.is-default > span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-good); box-shadow: 0 0 0 3px #5ee6a833; }
.ag-when .ag-when-list:not(#ag) { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ag-when .ag-when-list > li:not(#ag) { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid #ffffff10; color: var(--ag-muted); font-size: 15px; }
.ag-when .ag-when-list > li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #ffffff0a; }
.ag-when .ag-when-list > li.is-on:not(#ag) { color: #fff; background: #ffffff06; border-color: color-mix(in srgb, var(--ag) 35%, transparent); }
.ag-when .ag-when-list > li.is-on > span { background: color-mix(in srgb, var(--ag) 30%, #120a2b); color: #fff; }
.ag-when-list em { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #5ee6a81f; color: var(--ag-good); font-style: normal; font-size: 12px; font-weight: 600; }
.ag-when .ag-when-note:not(#ag) { margin: 0; color: var(--ag-muted); font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------- Apps */

.ag-apps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ag-app {
	display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-decoration: none;
	border: 1px solid #ffffff14; background: #ffffff05; color: var(--ag-soft);
	transition: border-color .3s ease, transform .4s var(--ag-ease), background-color .3s ease;
}
.ag-app:hover, .ag-app:focus-visible { border-color: #8b5cf666; background: #8b5cf612; transform: translateY(-2px); outline: none; }
.ag-app > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ag-app b { color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-app small { color: var(--ag-muted); font-size: 12.5px; }
.ag-app.is-custom { border-style: dashed; border-color: #8b5cf666; }
.ag-app-plus { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; background: linear-gradient(135deg, #7350ff, #8b5cf6); color: #fff; }
.ag-app.ui-armed { opacity: 0; translate: 0 14px; }
.ag-app.ui-armed.is-in { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--i, 0) * 40ms), translate .7s var(--ag-ease) calc(var(--i, 0) * 40ms); }
.ag-apps-foot { display: flex; justify-content: center; margin: 26px 0 0; }
.ag-apps-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--quinary, #d4c8ff); font-size: 15px; font-weight: 500; text-decoration: none; }
.ag-apps-foot a:hover, .ag-apps-foot a:focus-visible { color: #fff; }

/* ------------------------------------------------------------- Control */

.ag-control-box {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center;
	padding: clamp(26px, 4vw, 52px); border-radius: 30px; border: 1px solid #ffffff1f;
	background: radial-gradient(70% 90% at 100% 0%, #8b5cf62e, transparent 60%), radial-gradient(60% 80% at 0% 100%, #7350ff24, transparent 60%), #0f0922;
}
.ag-control-copy { display: flex; flex-direction: column; gap: 26px; }
.ag-modes-ico { background: #ffffff0d; }
.ag-gate { display: grid; gap: 12px; }
.ag-gate-lane, .ag-gate-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; border-radius: 18px; border: 1px solid #ffffff14; background: #ffffff05; }
.ag-gate-lane.is-go { border-color: #5ee6a833; }
.ag-gate-lane.is-routine { border-color: #a78bfa40; }
.ag-gate-k { display: inline-flex; align-items: center; gap: 6px; width: 100%; color: var(--ag-good); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.ag-gate-lane.is-routine .ag-gate-k { color: #c4b5fd; }
.ag-gate-k.is-wait { color: var(--ag-wait); }
.ag-gate-chip { padding: 5px 11px; border-radius: 999px; background: #ffffff0d; color: var(--ag-soft); font-size: 13px; }
.ag-gate-card { flex-direction: column; align-items: stretch; gap: 6px; border-color: #fbbf2455; background: #fbbf240a; box-shadow: 0 0 60px -30px #fbbf24; }
.ag-gate-card b { color: #fff; font-size: 16px; }
.ag-gate-card small { color: var(--ag-muted); font-size: 13px; }
.ag-gate-btns { display: inline-flex; gap: 8px; margin-top: 6px; }
.ag-gate-btns > span { padding: 7px 14px; border-radius: 10px; background: #ffffff10; color: var(--ag-soft); font-size: 13px; font-weight: 600; }
.ag-gate-btns > .is-yes { background: var(--ag-good); color: #0b1f16; animation: ip-pulse 2.4s ease-out 1s infinite; }
.ag-modes li.ui-armed, .ag-points li.ui-armed { opacity: 0; translate: 0 14px; }
.ag-modes li.ui-armed.is-in, .ag-points li.ui-armed.is-in { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate .7s var(--ag-ease) calc(var(--i, 0) * 90ms); }
.ag-gate.ui-armed > * { opacity: 0; translate: 16px 0; }
.ag-gate.ui-armed.is-in > * { opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .7s var(--ag-ease); }
.ag-gate.ui-armed.is-in > :nth-child(2) { transition-delay: .3s; }
.ag-gate.ui-armed.is-in > :nth-child(3) { transition-delay: .6s; }

/* ------------------------------------------------------- Use-case cards */

.ag-uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ag-uc {
	position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; text-decoration: none; overflow: hidden;
	border: 1px solid #ffffff14; background: linear-gradient(180deg, #ffffff0a, #ffffff03);
	transition: border-color .3s ease, transform .45s var(--ag-ease), box-shadow .45s var(--ag-ease);
}
.ag-uc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 0% 0%, #8b5cf61f, transparent 70%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.ag-uc:hover, .ag-uc:focus-visible { border-color: #8b5cf670; transform: translateY(-4px); box-shadow: 0 34px 60px -40px #8b5cf6cc; outline: none; }
.ag-uc:hover::before, .ag-uc:focus-visible::before { opacity: 1; }
.ag-uc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-uc-apps { display: inline-flex; gap: 6px; }
.ag-uc-apps .ip-logo.is-xs { width: 28px; height: 28px; border-radius: 9px; }
.ag-uc-apps .ip-logo.is-xs .ip-logo-img { width: 18px; height: 18px; }
.ag-uc-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #8b5cf633; color: #fff; }
.ag-uc-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #ffffff0b; color: var(--ag-muted); font-size: 12px; white-space: nowrap; }
.ag-uc-title { color: #fff; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.ag-uc-text { color: var(--ag-muted); font-size: 14.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-uc-agent { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid #ffffff0f; color: var(--ag-soft); font-size: 13px; font-weight: 500; }
.ag-uc-agent-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--ag) 30%, #120a2b); color: #fff; }
.ag-uc-go { margin-left: auto; color: #a78bfa; transition: translate .3s ease; }
.ag-uc:hover .ag-uc-go { translate: 4px 0; }
.ag-uc[hidden] { display: none; }

.ag-related { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: 22px 0 0; color: var(--ag-muted); font-size: 14px; }
.ag-related a { color: var(--quinary, #d4c8ff); text-decoration: none; }
.ag-related a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------- Relay */

.ag-relay-sec .ag-relay:not(#ag) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.ag-relay-sec .ag-relay-step:not(#ag) { position: relative; display: flex; margin: 0; padding: 0 10px; }
.ag-relay-card {
	position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px 16px; border-radius: 20px; text-decoration: none;
	border: 1px solid #ffffff14; background: #ffffff05; color: var(--ag-soft); text-align: center; align-items: center;
	transition: border-color .3s ease, transform .4s var(--ag-ease);
}
a.ag-relay-card:hover, a.ag-relay-card:focus-visible { border-color: color-mix(in srgb, var(--ag) 60%, transparent); transform: translateY(-3px); outline: none; }
.ag-relay-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--ag) 30%, #120a2b); color: #fff; box-shadow: 0 0 30px -10px var(--ag); }
.ag-relay-card b { color: #fff; font-size: 15px; font-weight: 600; }
.ag-relay-card small { color: var(--ag-muted); font-size: 13px; line-height: 1.45; }
.ag-relay-card .ag-relay-here { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ag) 25%, transparent); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; }
.ag-relay-step.is-current .ag-relay-card { border-color: color-mix(in srgb, var(--ag) 70%, transparent); background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--ag) 22%, transparent), transparent 70%), #ffffff07; box-shadow: 0 30px 60px -40px var(--ag); }
.ag-relay.has-current .ag-relay-step:not(.is-current) .ag-relay-card { opacity: .78; }
.ag-relay-link { position: absolute; z-index: 2; right: -14px; top: 42px; display: flex; align-items: center; width: 28px; }
.ag-relay-link i { position: relative; display: block; width: 28px; height: 2px; background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.ag-relay-link i::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px #a78bfa; animation: ag-across 1.8s linear infinite; }
@keyframes ag-across { from { left: 0; opacity: 0; } 30% { opacity: 1; } to { left: 20px; opacity: 0; } }
.ag-relay-when { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: #ffffff0a; border: 1px solid #ffffff12; color: var(--ag-muted); font-size: 11.5px; line-height: 1.35; }
.ag-relay-when svg { flex: 0 0 auto; color: #a78bfa; }
.ag-relay-step.ui-armed { opacity: 0; translate: 0 18px; }
.ag-relay-step.ui-armed.is-in { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--i, 0) * 120ms), translate .7s var(--ag-ease) calc(var(--i, 0) * 120ms); }

/* ------------------------------------------------------------- Compare */

.ag-table-wrap { overflow-x: auto; border-radius: 24px; border: 1px solid #ffffff17; background: #ffffff04; }
.ag-compare .ag-vs:not(#ag) { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; color: var(--ag-soft); font-size: 15px; }
.ag-compare .ag-vs th:not(#ag), .ag-compare .ag-vs td:not(#ag) { padding: 16px 20px; border: 0; border-bottom: 1px solid #ffffff0f; text-align: left; vertical-align: top; line-height: 1.5; background: transparent; }
.ag-compare .ag-vs thead th:not(#ag) { color: var(--ag-muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ag-compare .ag-vs tbody th:not(#ag) { color: #fff; font-weight: 600; width: 30%; }
.ag-compare .ag-vs .is-us:not(#ag) { color: #fff; background: #8b5cf612; }
.ag-compare .ag-vs thead .is-us span { display: inline-flex; align-items: center; gap: 6px; color: #e3dbff; }
.ag-compare .ag-vs td.is-us svg { margin-right: 8px; color: var(--ag-good); vertical-align: -2px; }
.ag-compare .ag-vs tbody tr:last-child > *:not(#ag) { border-bottom: 0; }

/* --------------------------------------------------------------- Plans */

.ag-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ag-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px; border: 1px solid #ffffff17; background: #ffffff05; }
.ag-plan.is-hot { border-color: #8b5cf680; background: radial-gradient(100% 70% at 50% 0%, #8b5cf62e, transparent 70%), #ffffff06; box-shadow: 0 40px 80px -50px #8b5cf6; }
.ag-plan-flag { position: absolute; top: -12px; left: 26px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #7350ff, #8b5cf6); color: #fff; font-size: 12px; font-weight: 600; }
.ag-plan-name { color: #fff; font-size: 19px; font-weight: 600; }
.ag-plan-price { display: flex; align-items: baseline; gap: 4px; color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.ag-plan-price small { color: var(--ag-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.ag-plan-note { color: var(--ag-muted); font-size: 13.5px; }
.ag-plans .ag-plan ul:not(#ag) { display: grid; gap: 10px; margin: 12px 0 0; padding: 14px 0 0; border-top: 1px solid #ffffff12; list-style: none; }
.ag-plans .ag-plan li:not(#ag) { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 0; color: var(--ag-soft); font-size: 14.5px; line-height: 1.45; }
.ag-plan li svg { flex: 0 0 auto; margin-top: 3px; color: var(--ag-good); }
.ag-plan-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.ag-plan-cta > .button { width: auto; min-width: 200px; }
.ag-plan.ui-armed { opacity: 0; translate: 0 18px; }
.ag-plan.ui-armed.is-in { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--i, 0) * 110ms), translate .7s var(--ag-ease) calc(var(--i, 0) * 110ms); }

/* ------------------------------------------------------------ Hub tabs */

.ag-tabs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
.ag-tablist { display: flex; flex-direction: column; gap: 6px; }
.ag-tab {
	position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; overflow: hidden;
	border: 1px solid transparent; background: transparent; color: var(--ag-soft); text-align: left; cursor: pointer; font-family: inherit;
	transition: background-color .3s ease, border-color .3s ease;
}
.ag-tab:hover { background: #ffffff06; }
.ag-tab:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.ag-tab.is-active { border-color: color-mix(in srgb, var(--ag) 50%, transparent); background: color-mix(in srgb, var(--ag) 10%, #ffffff04); }
.ag-tab-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; background: #ffffff0b; color: #fff; transition: background-color .3s ease; }
.ag-tab.is-active .ag-tab-ico { background: color-mix(in srgb, var(--ag) 40%, #120a2b); box-shadow: 0 0 24px -6px var(--ag); }
.ag-tab-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ag-tab-txt b { color: #fff; font-size: 15px; font-weight: 600; }
.ag-tab-txt small { color: var(--ag-muted); font-size: 12.5px; }
.ag-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: #ffffff0a; opacity: 0; }
.ag-tab-bar i { display: block; width: 100%; height: 100%; background: var(--ag); transform: scaleX(0); transform-origin: 0 50%; }
.ag-tabs.is-auto .ag-tab.is-active .ag-tab-bar { opacity: 1; }
.ag-tabs.is-auto .ag-tab.is-active .ag-tab-bar i { animation: ag-bar var(--ag-dwell, 7s) linear both; }
.ag-tabs.is-paused .ag-tab.is-active .ag-tab-bar i { animation-play-state: paused; }
@keyframes ag-bar { to { transform: scaleX(1); } }
.ag-panels { position: relative; min-width: 0; }
.ag-panel {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 26px; align-items: center;
	padding: 26px; border-radius: 28px; border: 1px solid #ffffff17;
	background: radial-gradient(70% 70% at 30% 20%, color-mix(in srgb, var(--ag) 20%, transparent), transparent 70%), #0d0820;
}
.ag-panel + .ag-panel { margin-top: 16px; }
.ag-tabs.is-ready .ag-panel + .ag-panel { margin-top: 0; }
.ag-tabs.is-ready .ag-panel:not(.is-active) { display: none; }
.ag-tabs.is-ready .ag-panel.is-active { animation: ag-in .55s var(--ag-ease) both; }
.ag-panel-stage { position: relative; min-width: 0; }
.ag-panel-glow { position: absolute; inset: 10%; background: radial-gradient(circle, color-mix(in srgb, var(--ag) 40%, transparent), transparent 70%); filter: blur(40px); z-index: 0; }
.ag-panel-stage .ag-vis { max-width: none; }
.ag-panel-stage .ag-float { display: none; }
.ag-panel-stage .ui { max-width: none; }
.ag-panel-copy { display: flex; flex-direction: column; gap: 12px; }
.ag-panel-role { display: inline-flex; align-items: center; gap: 7px; color: #e3dbff; font-size: 13px; font-weight: 600; }
.ag-team .ag-panel-copy h3:not(#ag) { margin: 0; color: #fff; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.ag-team .ag-panel-copy p:not(#ag) { margin: 0; color: var(--ag-soft); font-size: 15.5px; line-height: 1.65; }
.ag-team .ag-panel-copy ul:not(#ag) { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ag-team .ag-panel-copy li:not(#ag) { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; color: var(--ag-soft); font-size: 14.5px; line-height: 1.45; }
.ag-panel-copy li svg { flex: 0 0 auto; margin-top: 3px; color: var(--ag-good); }
.ag-panel-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.ag-panel-link:hover svg { translate: 4px 0; }
.ag-panel-link svg { transition: translate .3s ease; }

/* ------------------------------------------------------------- Library */

.ag-filters { display: grid; gap: 14px; margin-bottom: 26px; padding: 16px; border-radius: 22px; border: 1px solid #ffffff14; background: #ffffff04; }
.ag-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 14px; border: 1px solid #ffffff1a; background: #0d0820; color: var(--ag-muted); }
.ag-search:focus-within { border-color: #8b5cf6aa; box-shadow: 0 0 0 3px #8b5cf633; }
.ag-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: 400 15px Inter, sans-serif; outline: none; }
.ag-search input::placeholder { color: #8e8aa5; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-fchip {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
	border: 1px solid #ffffff17; background: #ffffff06; color: var(--ag-soft); font: 500 13.5px Inter, sans-serif;
	transition: all .25s ease;
}
.ag-fchip:hover { border-color: #ffffff33; color: #fff; }
.ag-fchip:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.ag-fchip.is-on { border-color: color-mix(in srgb, var(--ag, #8b5cf6) 70%, transparent); background: color-mix(in srgb, var(--ag, #8b5cf6) 22%, transparent); color: #fff; }
.ag-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ag-selects label { display: inline-flex; align-items: center; gap: 8px; color: var(--ag-muted); font-size: 13px; }
.ag-selects select {
	height: 40px; padding: 0 34px 0 12px; border-radius: 12px; border: 1px solid #ffffff1a; color: #fff; font: 500 14px Inter, sans-serif; cursor: pointer;
	background: #0d0820 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5a2b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
	-webkit-appearance: none; appearance: none;
}
.ag-selects select:focus-visible { outline: 2px solid #a78bfa; outline-offset: 1px; }
.ag-count { margin-left: auto; color: var(--ag-soft); font-size: 14px; font-weight: 500; }
.ag-more { display: none; justify-content: center; margin-top: 20px; }
.ag-more[hidden] { display: none !important; }
.ag-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; border-radius: 22px; border: 1px dashed #ffffff26; text-align: center; }
.ag-empty[hidden] { display: none; }
.ag-empty b { color: #fff; font-size: 18px; }
.ag-library .ag-empty p:not(#ag) { margin: 0; color: var(--ag-muted); font-size: 15px; }
.ag-empty a { display: inline-flex; align-items: center; gap: 8px; color: #d4c8ff; font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------ Use case */

.ag-run-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; align-items: start; }
.ag-chat { border-radius: 24px; border: 1px solid #ffffff1f; background: linear-gradient(180deg, #1b1038, #0d0820); overflow: hidden; box-shadow: 0 40px 80px -50px #000; }
.ag-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ffffff12; background: #ffffff05; }
.ag-chat-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #8b5cf666; }
.ag-chat-head > span { display: flex; flex-direction: column; line-height: 1.3; }
.ag-chat-head b { color: #fff; font-size: 14.5px; }
.ag-chat-head i { color: var(--ag-good); font-style: normal; font-size: 12.5px; }
.ag-chat-you { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 18px 18px 6px; }
.ag-run .ag-chat-you p:not(#ag) { margin: 0; max-width: 92%; padding: 14px 16px; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, #7350ff, #8b5cf6); color: #fff; font-size: 15px; line-height: 1.6; }
.ag-chat-you .ip-copy { align-self: flex-end; margin: 0; }
.ag-run .ag-chat-steps:not(#ag) { display: grid; gap: 8px; margin: 10px 18px 18px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; border: 1px solid #ffffff14; background: #ffffff08; list-style: none; }
.ag-run .ag-chat-steps > li:not(#ag) { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; color: var(--ag-soft); font-size: 14.5px; line-height: 1.5; }
.ag-chat-steps i { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; border-radius: 50%; background: #5ee6a822; color: var(--ag-good); }
.ag-chat.ui-armed .ag-chat-steps > li { opacity: 0; translate: 0 8px; }
.ag-chat.ui-armed.is-in .ag-chat-steps > li { animation: ag-in .45s var(--ag-ease) both; animation-delay: calc(.15s + var(--i, 0) * .18s); }
.ag-result { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; border: 1px solid #5ee6a840; background: radial-gradient(90% 70% at 100% 0%, #5ee6a81a, transparent 60%), #0d0820; box-shadow: 0 40px 80px -50px #5ee6a866; }
.ag-result-k { display: inline-flex; align-items: center; gap: 7px; color: var(--ag-good); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.ag-run .ag-result dl:not(#ag) { display: grid; gap: 0; margin: 0; }
.ag-result dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #ffffff10; }
.ag-result dt { color: var(--ag-muted); font-size: 14px; }
.ag-result dd { margin: 0; color: #fff; font-size: 14.5px; font-weight: 600; text-align: right; }
.ag-result-note { display: flex; align-items: flex-start; gap: 7px; color: var(--ag-muted); font-size: 12.5px; line-height: 1.5; }
.ag-result-note svg { flex: 0 0 auto; margin-top: 2px; }
.ag-glance-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; background: color-mix(in srgb, var(--ag) 35%, #120a2b); color: #fff; box-shadow: 0 0 30px -8px var(--ag); }
.ag-glance-apps { display: flex; flex-direction: column; gap: 6px; }
.ag-glance-apps a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.ag-glance-apps a:hover { text-decoration: underline; }
.ag-appcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ag-appcard { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 22px; border: 1px solid #ffffff14; background: #ffffff05; text-decoration: none; transition: border-color .3s ease, transform .4s var(--ag-ease); }
.ag-appcard:hover, .ag-appcard:focus-visible { border-color: #8b5cf666; transform: translateY(-3px); outline: none; }
.ag-appcard-top { display: flex; align-items: center; gap: 12px; }
.ag-appcard-top > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.ag-appcard-top b { color: #fff; font-size: 16px; }
.ag-appcard-top small { color: var(--ag-muted); font-size: 12.5px; }
.ag-appcard-text { color: var(--ag-soft); font-size: 14.5px; line-height: 1.6; }
.ag-appcard-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: #d4c8ff; font-size: 13.5px; font-weight: 600; }
.ag-appcard.ui-armed { opacity: 0; translate: 0 16px; }
.ag-appcard.ui-armed.is-in { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate .7s var(--ag-ease) calc(var(--i, 0) * 90ms); }

/* --------------------------------------------------- Integration pages */

.ag-int-agents { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -12px 0 26px; }
.ag-chip-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ag) 45%, transparent); background: color-mix(in srgb, var(--ag) 10%, transparent); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .25s ease; }
.ag-chip-link > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ag) 35%, #120a2b); }
.ag-chip-link:hover, .ag-chip-link:focus-visible { background: color-mix(in srgb, var(--ag) 22%, transparent); outline: none; }

/* ----------------------------------------------------------- Responsive */

@media (max-width: 1199px) {
	.ag-float.is-tl, .ag-float.is-bl { left: 0; }
	.ag-float.is-tr, .ag-float.is-br { right: 0; }
	.ag-apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.ag-how-grid, .ag-output-grid, .ag-when-grid, .ag-control-box, .ag-run-grid { grid-template-columns: 1fr; }
	.ag-how-log { position: relative; top: 0; order: 2; }
	.ag-result { position: static; }
	.ag-uc-grid, .ag-appcards, .ag-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ag-relay-sec .ag-relay:not(#ag) { grid-template-columns: 1fr; gap: 26px; max-width: 460px; margin: 0 auto; }
	.ag-relay-link { right: auto; left: 50%; top: auto; bottom: -26px; width: auto; translate: -50% 0; }
	.ag-relay-link i { width: 2px; height: 22px; background: linear-gradient(180deg, #8b5cf6, #a78bfa); }
	.ag-relay-link i::after { display: none; }
	.ag-tabs { grid-template-columns: 1fr; }
	.ag-tablist { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
	.ag-tablist::-webkit-scrollbar { display: none; }
	.ag-tab { flex: 0 0 auto; width: auto; }
	.ag-tab-txt small { display: none; }
	.ag-panel { grid-template-columns: 1fr; }
	.ag-float { position: relative; inset: auto !important; max-width: none; margin: 12px auto 0; animation: none; width: fit-content; }
	.ag-vis.is-play .ag-float { animation: ag-pop .7s var(--ag-pop) both; }
	.ag-vis--hub .ag-float { display: none; }
	.ag-gauge { position: relative; }
	.ag-dial { width: min(380px, 100%); }
	.ag-dial-chip { transform: rotate(var(--a)) translateX(min(150px, 34vw)) rotate(calc(var(--a) * -1)); }
}
@media (max-width: 767px) {
	.ag-research, .ag-writer { grid-template-columns: 1fr; }
	.ag-radar { width: 160px; margin: 0 auto; }
	.ag-lanes { grid-template-columns: 1fr; }
	.ag-lane { min-height: 0; }
	.ag-win-body { padding: 14px; }
	.ag-uc-grid, .ag-appcards, .ag-plan-grid, .ag-apps-grid { grid-template-columns: 1fr; }
	.ag-apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ag-app { flex-direction: column; align-items: flex-start; }
	.ag-app b { white-space: normal; }
	.ag-table { grid-template-columns: minmax(0, 1fr) auto; }
	.ag-th:nth-child(3), .ag-td.is-why { display: none; }
	.ag-how .ag-how-step:not(#ag) { padding: 76px 20px 22px; }
	.ag-how-n { left: 20px; top: 20px; }
	.ag-orbit-core img { width: 76px; height: 76px; }
	.ag-orbit-pulse { top: 38px; width: 76px; height: 76px; margin: -38px; }
	.ag-orbit-pill { padding: 4px; font-size: 0; gap: 0; }
	.ag-orbit-pill i { width: 32px; height: 32px; }
	.ag-orbit { aspect-ratio: 1.05; }
	.ag-orbit-app .ip-logo { width: 28px; height: 28px; }
	.ag-dial-chip > span { padding: 5px 9px; font-size: 11.5px; }
	.ag-dial-chip { transform: rotate(var(--a)) translateX(min(130px, 33vw)) rotate(calc(var(--a) * -1)); }
	.ag-count { margin-left: 0; width: 100%; }
	.ag-uc-grid.is-clamped > [data-uc]:nth-child(n+9) { display: none; }
	.ag-apps-grid > .ag-app:not(.is-custom):nth-child(n+8) { display: none; }
	.ag-table-wrap { overflow: visible; border: 0; background: none; }
	.ag-compare .ag-vs:not(#ag) { min-width: 0; }
	.ag-compare .ag-vs thead { display: none; }
	.ag-compare .ag-vs, .ag-compare .ag-vs tbody, .ag-compare .ag-vs tr, .ag-compare .ag-vs th, .ag-compare .ag-vs td { display: block; }
	.ag-compare .ag-vs tr { margin-bottom: 12px; border-radius: 18px; border: 1px solid #ffffff17; background: #ffffff04; overflow: hidden; }
	.ag-compare .ag-vs tbody th:not(#ag) { width: auto; padding: 14px 16px 6px; border: 0; }
	.ag-compare .ag-vs td:not(#ag) { padding: 6px 16px 12px; border: 0; }
	.ag-compare .ag-vs td.is-us:not(#ag) { padding-top: 12px; padding-bottom: 14px; }
	.ag-compare .ag-vs td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ag-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
	.ag-more { display: flex; }
	.ag-selects label { width: 100%; justify-content: space-between; }
	.ag-selects select { flex: 1 1 auto; max-width: 70%; }
	.ag-panel { padding: 16px; }
	.ag-flow { padding: 14px; }
	.ag-flow-line { left: 48px; }
	.ag-flow-node::after { left: 33px; }
	.ag-flow-logos { display: none; }
	.ag-bubble { max-width: 100%; }
	.ag-sources { padding-left: 0; }
	.ag-ribbons { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ag-ribbons, .ag-radar-sweep, .ag-blip, .ag-float, .ag-orbit-apps, .ag-orbit-agents, .ag-orbit-pill, .ag-orbit-pulse,
	.ag-build-line i, .ag-flow-node::after, .ag-dial-ring, .ag-relay-link i::after, .ag-btn.is-go, .ag-gate-btns > .is-yes, .ag-badge i::before, .ag-chip i, .ag-caret { animation: none !important; }
	.ag-vis.is-armed * { opacity: 1 !important; animation: none !important; }
}