/* AI agents: a sticky 3D stage beside a scrolling story, then the "plug it in" strip.
   Same bench rules: ink carries the words, yellow is only ever a fill. */

.ag__lead { max-width: 60ch; margin-bottom: clamp(24px, 4vw, 48px); }
.ag { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 72px); align-items: start; }

/* the story */
.ag__steps { padding-block: 6vh 22vh; }
.ag__step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  opacity: .32; transition: opacity .5s var(--ease), transform .6s var(--ease); transform: translateX(-6px); }
.ag__step.is-on { opacity: 1; transform: none; }
.ag__kick { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--steel); }
.ag__kick::before { content: ""; width: 22px; height: 8px; background: var(--yellow); border-radius: 1px; transform-origin: left; transform: scaleX(.35); transition: transform .5s var(--ease); }
.ag__step.is-on .ag__kick::before { transform: none; }
.ag__step h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.ag__step > p { color: #2c3431; }
.ag__step .asklink, .ag__step .make__more { align-self: flex-start; }
.ag__who, .ag__rules { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.ag__who li { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: baseline; padding: 10px 14px; background: var(--mat-lit); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.35; }
.ag__who b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.ag__rules li { position: relative; padding: 10px 14px 10px 44px; background: var(--mat-lit); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.35; }
.ag__rules li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--yellow); }
.ag__rules li::after { content: ""; position: absolute; left: 20px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* the stage */
.ag__stage { position: sticky; top: 96px; height: min(calc(100vh - 128px), 820px); }
.ag__frame { position: relative; height: 100%; overflow: hidden; border-radius: 3px;
  background: radial-gradient(120% 90% at 50% 40%, #f7f9f7 0%, #e9edea 62%, #dde2de 100%);
  border: 1px solid var(--line); box-shadow: 0 40px 60px -40px rgba(16, 20, 19, .45), inset 0 1px 0 #fff; }
.ag__canvas { position: absolute; inset: 0; }
.ag__canvas canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); }
#agents.is-live .ag__canvas canvas { opacity: 1; }
.ag__wait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .5s; }
.ag__wait i { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); animation: ag-pulse 1.2s ease-in-out infinite; }
#agents.is-live .ag__wait { opacity: 0; }
@keyframes ag-pulse { 50% { transform: scale(1.8); opacity: .4; } }

.ag__tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ag__tag { position: absolute; left: 0; top: 0; margin-top: -12px; opacity: 0; transition: opacity .35s var(--ease);
  background: var(--ink); color: #fff; padding: 6px 10px 7px; border-radius: 2px; white-space: nowrap;
  box-shadow: 0 10px 18px -10px rgba(16, 20, 19, .6); will-change: transform; }
.ag__tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); }
.ag__tag b { display: block; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -.01em; line-height: 1.1; }
.ag__tag span { display: block; font-size: 12px; color: #c3cbc6; line-height: 1.25; margin-top: 2px; }
.ag__tag.is-on { opacity: 1; }
.ag__tag.is-lead { background: var(--yellow); color: var(--ink); }
.ag__tag.is-lead span { color: #3a3200; }
.ag__tag.is-team { background: #fff; color: var(--ink); padding: 8px 14px 9px; }
.ag__tag.is-team b { font-size: 17px; }
.ag__tag.is-team span { color: var(--steel); font-size: 12.5px; }
.ag__tag.is-place { background: #fff; color: var(--ink); }
.ag__tag.is-place span { color: var(--steel); }

.ag__cap { position: absolute; left: 16px; top: 16px; padding: 8px 12px; font-family: var(--display); font-weight: 700; font-size: 15px;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 2px; }
.ag__dots { position: absolute; right: 16px; top: 18px; display: flex; gap: 6px; }
.ag__dots button { width: 10px; height: 10px; border: 0; padding: 0; border-radius: 6px; background: rgba(16, 20, 19, .22); cursor: pointer; transition: width .35s var(--ease), background .3s; }
.ag__dots button[aria-current="step"] { width: 28px; background: var(--ink); }
.ag__dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ag__legend { position: absolute; left: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.ag__legend li { display: flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 12.5px; line-height: 1; background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 2px; }
.lg { display: block; width: 14px; height: 10px; border-radius: 1px; }
.lg--page { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 20, 19, .35); height: 13px; width: 10px; }
.lg--mail { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 20, 19, .35); background-image: linear-gradient(155deg, transparent 46%, var(--ink) 47%, var(--ink) 53%, transparent 54%), linear-gradient(25deg, transparent 46%, var(--ink) 47%, var(--ink) 53%, transparent 54%); }
.lg--reply { background: var(--yellow); background-image: linear-gradient(155deg, transparent 46%, var(--ink) 47%, var(--ink) 53%, transparent 54%), linear-gradient(25deg, transparent 46%, var(--ink) 47%, var(--ink) 53%, transparent 54%); }
.lg--lead { background: var(--yellow); width: 11px; height: 11px; box-shadow: 0 0 0 3px rgba(255, 196, 0, .3); }

/* no WebGL: the story stands on its own */
#agents.no-3d .ag { grid-template-columns: 1fr; }
#agents.no-3d .ag__stage { display: none; }
#agents.no-3d .ag__step { min-height: 0; opacity: 1; transform: none; padding-block: 28px; }

/* ---------- plug it into your business ---------- */
.plug { margin-top: clamp(40px, 6vw, 90px); }
.plug__head { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: 34px; }
.plug__head h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.plug__head p { color: var(--steel); }
.plug__row { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; padding-top: 34px; }
/* the cable that runs through every step, with power moving along it */
.plug__row::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 28px); opacity: .85; }
.plug__row::after { content: ""; position: absolute; left: 0; top: 7px; width: 70px; height: 10px; border-radius: 10px; background: var(--yellow);
  box-shadow: 0 0 18px 4px rgba(255, 196, 0, .55); animation: plug-run 4.5s linear infinite; }
@keyframes plug-run { from { transform: translateX(-80px); } to { transform: translateX(calc(min(1320px, 100vw) - 20px)); } }
.plug__row li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 24px; background: var(--mat-lit); border: 1px solid var(--line);
  box-shadow: 0 22px 30px -26px rgba(16, 20, 19, .5); }
.plug__row li::before { content: ""; position: absolute; left: 20px; top: -31px; width: 16px; height: 16px; border-radius: 50%; background: var(--mat-lit); border: 3px solid var(--ink); }
.plug__row li::after { content: ""; position: absolute; left: 27px; top: -14px; width: 2px; height: 14px; background: var(--ink); }
.plug__when { font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--steel); }
.plug__row b { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.025em; line-height: 1.1; }
.plug__row p { font-size: 15.5px; color: #2c3431; line-height: 1.45; }
#agents .loy__cta { margin-top: clamp(40px, 5vw, 70px); }
@media (prefers-reduced-motion: reduce) { .plug__row::after { animation: none; opacity: 0; } .ag__step { transition: none; } }

/* ---------- narrow screens: the stage pins under the header, the story scrolls below it ---------- */
@media (max-width: 900px) {
  .ag { grid-template-columns: 1fr; gap: 0; }
  .ag__stage { order: -1; top: 64px; height: 50vh; height: 50svh; z-index: 3; margin-inline: calc(var(--gut) * -1); }
  .ag__frame { border-radius: 0; border-inline: 0; }
  .ag__steps { padding-block: 4vh 30vh; }
  .ag__step { min-height: 62vh; opacity: .35; transform: none; }
  .ag__cap { font-size: 13px; left: 12px; top: 12px; padding: 6px 10px; }
  .ag__dots { right: 12px; top: 16px; }
  .ag__legend { left: 10px; bottom: 10px; gap: 4px; }
  .ag__legend li { font-size: 11px; padding: 5px 7px; }
  .ag__tag { padding: 4px 8px 5px; }
  .ag__tag b { font-size: 12px; }
  .ag__tag span { display: none; }
  .ag__tag.is-team b { font-size: 13.5px; }
  .ag__tag.is-team span { display: none; }
  .ag__tag.is-team { padding: 5px 9px 6px; }
  .plug__head { grid-template-columns: 1fr; gap: 10px; }
  .plug__row { grid-template-columns: 1fr 1fr; }
  .plug__row::before, .plug__row::after, .plug__row li::before, .plug__row li::after { display: none; }
  .plug__row { padding-top: 0; }
}
@media (max-width: 560px) {
  .plug__row { grid-template-columns: 1fr; }
  .ag__who li { grid-template-columns: 1fr; gap: 2px; }
}
.loy__ask { margin-top: 18px; }