/* ============================================================
   AIALPHAVIDEOS — AI agent visual system
   Shared by index / features / pricing / about.
   Agent colours, icons, the hero network, the agent switcher,
   the animated "agent at work" screens and the flow diagrams.
   Sequenced states are driven by assets/agents.js ([data-steps]);
   continuous motion is pure CSS and stops for reduced motion.
   ============================================================ */

:root {
  --ag-brain:    #e9c46a;
  --ag-research: #7fa9ff;
  --ag-director: #b59bff;
  --ag-editor:   #ff9d6c;
  --ag-qa:       #4fd1b5;
  --ag-post:     #ff7eb6;
  --ag-stats:    #56d0f5;
  --ag-chat:     #9bdc6e;
  --ag-you:      #f4d58d;
  --money:       #4ade80;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.c-brain    { --c: var(--ag-brain); }
.c-research { --c: var(--ag-research); }
.c-director { --c: var(--ag-director); }
.c-editor   { --c: var(--ag-editor); }
.c-qa       { --c: var(--ag-qa); }
.c-post     { --c: var(--ag-post); }
.c-stats    { --c: var(--ag-stats); }
.c-chat     { --c: var(--ag-chat); }
.c-you      { --c: var(--ag-you); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* agent icon tile */
.ag-ic {
  --s: 40px;
  width: var(--s); height: var(--s); flex: none;
  border-radius: calc(var(--s) * .3);
  display: grid; place-items: center;
  color: var(--c, var(--gold));
  background: color-mix(in srgb, var(--c, var(--gold)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--gold)) 32%, transparent);
}
.ag-ic svg { width: 52%; height: 52%; }
.ag-ic.lg { --s: 54px; }
.ag-ic.sm { --s: 30px; }

/* gradient headline accent shared by the four pages */
.stroke {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* soft tech grid behind heroes */
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

/* status dot */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--money); flex: none;
  box-shadow: 0 0 0 0 rgba(74,222,128,.55); animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flowx { to { background-position: 24px 0; } }
@keyframes flowy { to { background-position: 0 24px; } }

/* ============================================================
   HERO NETWORK — second brain in the middle, agents on a ring
   ============================================================ */
.constel { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin: 0 auto 26px; }
.constel svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.links .ring  { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: .3; }
.links .ring2 { fill: none; stroke: rgba(233,196,106,0.10); stroke-width: .25; stroke-dasharray: .6 1.8; }
.links .spoke { stroke: rgba(233,196,106,0.16); stroke-width: .25; stroke-dasharray: .8 1.6; animation: spoke 2.4s linear infinite; }
@keyframes spoke { to { stroke-dashoffset: -4.8; } }
.links .edge { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: .5; stroke-linecap: round; transition: stroke .5s, stroke-width .5s; }
.links .edge.loop { stroke-dasharray: 1.4 1.2; }
.links .edge.lit { stroke: var(--gold); stroke-width: .7; }
.links .core-ring { fill: none; stroke: rgba(233,196,106,0.45); stroke-width: .3; stroke-dasharray: 1.2 2.2;
  transform-box: view-box; transform-origin: 50% 50%; animation: spin 26s linear infinite; }
.links .core-ring.r2 { stroke: rgba(127,169,255,0.35); stroke-dasharray: .5 3; animation-duration: 18s; animation-direction: reverse; }
.links .orbit { transform-box: view-box; transform-origin: 50% 50%; animation: spin 16s linear infinite; }
.links .orbit.o2 { animation-duration: 23s; animation-direction: reverse; }
.links .orbit circle { fill: rgba(233,196,106,0.7); }
.links .packet { fill: #fff; opacity: 0; transition: opacity .2s; }
.links .packet.go { opacity: 1; }
.links .halo { fill: var(--gold); opacity: 0; transition: opacity .2s; }
.links .halo.go { opacity: .35; }

.core {
  position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(233,196,106,0.34), rgba(233,196,106,0.05) 58%, transparent 72%),
    #0c0e12;
  border: 1px solid rgba(233,196,106,0.4);
  box-shadow: 0 0 70px -12px rgba(233,196,106,0.55), inset 0 0 26px rgba(233,196,106,0.14);
  color: var(--gold);
  transition: box-shadow .5s, transform .5s;
  z-index: 2;
}
.core svg { width: 34%; height: auto; aspect-ratio: 1; }
.core b { font: 600 clamp(10px, 2.4vw, 13.5px)/1.1 var(--display); color: var(--fg); letter-spacing: -0.01em; }
.core small { font: 500 clamp(8.5px, 1.8vw, 10.5px)/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.core.on { box-shadow: 0 0 0 6px rgba(233,196,106,0.10), 0 0 90px -6px rgba(233,196,106,0.75), inset 0 0 30px rgba(233,196,106,0.2); transform: translate(-50%, -50%) scale(1.04); }

.node {
  position: absolute; width: 15.5%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; z-index: 3;
}
.node .orb {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 14%, #12151b), #0c0e12 70%);
  border: 1px solid var(--line-2);
  color: var(--c);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.node .orb svg { width: 44%; height: auto; aspect-ratio: 1; }
.node .lbl {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font: 600 clamp(10px, 2.2vw, 12.5px)/1.15 var(--display); white-space: nowrap; color: var(--fg-mute);
  transition: color .4s;
}
.node.done .orb { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.node.on .orb {
  border-color: var(--c); transform: scale(1.12);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent), 0 0 34px -4px var(--c);
}
.node.on .lbl { color: var(--fg); }
.node.you .orb {
  background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: #1a1400; border-color: transparent;
}
.node.you .lbl { color: var(--gold); }

/* activity log under the network */
.agent-log {
  max-width: 540px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  padding: 14px 16px 12px;
  box-shadow: 0 30px 70px -45px #000;
}
.agent-log .lt {
  display: flex; align-items: center; gap: 9px;
  font: 600 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint);
}
.agent-log .lt .demo-note { margin-left: auto; letter-spacing: .08em; text-transform: none; font-weight: 500; }
.agent-log ul { list-style: none; margin-top: 10px; height: 132px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.agent-log li { display: grid; grid-template-columns: 46px 1fr; column-gap: 10px; font-size: 13.5px; line-height: 1.4;
  color: var(--fg-mute); animation: logIn .45s var(--ease); flex: none; }
.agent-log li time { font: 500 12px/1.5 var(--display); color: var(--fg-faint); grid-row: span 2; }
.agent-log li b { font: 600 13px/1.4 var(--display); color: var(--c); }
.agent-log li:not(:last-child) { opacity: .42; }
.agent-log li:last-child span { color: var(--fg-soft); }
@keyframes logIn { from { opacity: 0; transform: translateY(8px); } }
.beats { display: none; }

/* ============================================================
   AGENT SWITCHER — tabs + live screen
   ============================================================ */
.switcher { display: grid; grid-template-columns: 310px 1fr; gap: 26px; margin-top: 56px; align-items: start; }
.tabs { display: flex; flex-direction: column; gap: 8px; }
.tab {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; gap: 13px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.015);
  color: inherit; font: inherit;
  transition: border-color .3s, background .3s;
}
.tab:hover { border-color: var(--line-2); }
.tab .ag-ic { --s: 38px; }
.tab .tx { min-width: 0; }
.tab b { display: block; font: 600 15px/1.2 var(--display); color: var(--fg-soft); }
.tab small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--fg-faint); margin-top: 2px; }
.tab .n { margin-left: auto; font: 600 11px var(--display); color: var(--fg-faint); letter-spacing: .08em; }
.tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.tab[aria-selected="true"] b { color: var(--fg); }
.tab[aria-selected="true"] .n { color: var(--c); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tab .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--c); }
.switcher:not(.manual) .tab[aria-selected="true"] .bar { animation: tabbar var(--dur, 8s) linear forwards; }
.switcher.paused .tab .bar { animation-play-state: paused; }
@keyframes tabbar { to { width: 100%; } }

.panels { min-height: 660px; }
.panel[hidden] { display: none; }
.panel { animation: panelIn .5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.panel-text { margin-top: 22px; }
.panel-text .k { font: 600 12px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.panel-text h3 { font-size: clamp(22px, 2.6vw, 30px); margin-top: 10px; }
.panel-text p { font-size: 16px; color: var(--fg-soft); margin-top: 10px; max-width: 640px; }

/* input → output chips */
.io { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.io > span { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-soft); background: rgba(255,255,255,0.02); }
.io > span b { font: 600 10.5px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-right: 7px; }
.io .arr { border: 0; background: none; padding: 0; color: var(--c); display: inline-flex; }
.io .arr svg { width: 16px; height: 16px; }
.io .out { border-color: color-mix(in srgb, var(--c) 45%, transparent); }

/* ============================================================
   "AGENT AT WORK" SCREENS
   ============================================================ */
.win {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #0f1217, #0a0c10);
  box-shadow: 0 40px 90px -55px #000, inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.win::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--c, var(--gold)) 9%, transparent), transparent 60%); }
.win-top {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  font: 600 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint);
}
.win-top .dots { display: flex; gap: 5px; margin-right: 4px; }
.win-top .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.win-top .who { color: var(--fg-soft); }
.win-top .status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--c); letter-spacing: .1em; }
.win-top .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.win-body { padding: 18px; min-height: 330px; position: relative; z-index: 1; }

.mk-label {
  font: 600 10.5px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.mk-label .live-dot { width: 6px; height: 6px; }

/* ---------- second brain ---------- */
.mk-brain { display: grid; grid-template-columns: 1fr 30px 100px 30px 1.25fr; align-items: center; }
.mk-inputs { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-inputs > span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--fg-soft); background: rgba(255,255,255,0.02);
  transition: color .4s, border-color .4s, background .4s;
}
.mk-inputs > span svg { width: 13px; height: 13px; color: var(--c); }
.js .mk-inputs > span { color: var(--fg-faint); }
.js .mk-inputs > span.on { color: var(--fg); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.mk-flow { height: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: flowx .8s linear infinite; opacity: .7; }
.mk-core {
  width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; position: relative; justify-self: center;
  color: var(--c);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), #0d0f13;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 46px -8px var(--c);
  animation: corePulse 2.6s ease-in-out infinite;
}
.mk-core svg { width: 44px; height: 44px; }
.mk-core::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); animation: spin 14s linear infinite; }
@keyframes corePulse { 50% { box-shadow: 0 0 70px -4px var(--c); } }
.mk-profile { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 9px; }
.mk-profile .row small { display: block; font: 600 10px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.mk-profile .row b { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg-soft); line-height: 1.35; }
.js .mk-profile .row b { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease); }
.js .mk-profile .row.on b { clip-path: inset(0 0 0 0); }

/* ---------- researcher ---------- */
.mk-research { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.mk-sources { position: relative; display: flex; flex-direction: column; gap: 8px; }
.src {
  display: grid; grid-template-columns: 52px 1fr 30px; grid-template-rows: auto auto; gap: 5px 10px; align-items: center;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.015);
  transition: border-color .4s, background .4s;
}
.src em { font-style: normal; font: 600 9.5px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--c); grid-column: 1; grid-row: 1 / span 2; }
.src > span { font-size: 12px; color: var(--fg-soft); line-height: 1.3; grid-column: 2; grid-row: 1; }
.src b { grid-column: 3; grid-row: 1 / span 2; font: 600 15px var(--display); color: var(--fg); text-align: right; }
.src .score { height: 4px; border-radius: 9px; background: var(--line); overflow: hidden; position: relative; grid-column: 2; }
.src .score::after { content: ""; position: absolute; inset: 0; width: var(--s); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c)); transition: width 1s var(--ease); }
.js .src .score::after { width: 0; }
.js .src.on .score::after { width: var(--s); }
.js .src b { opacity: .15; transition: opacity .5s .5s; }
.js .src.on b { opacity: 1; }
.js .src.top.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.scan { position: absolute; left: -6px; right: -6px; top: 22px; height: 34px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 16%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--c) 65%, transparent);
  animation: scan 3.4s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 18px; } 50% { top: calc(100% - 34px); } }
.mk-caption { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,0.02); }
.mk-caption .cap { font: 600 15.5px/1.42 var(--display); color: var(--fg); }
.js .mk-caption .cap { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s steps(28, end); }
.js .mk-caption.on .cap { clip-path: inset(0 0 0 0); }
.mk-caption .tags { font-size: 12px; color: var(--c); margin-top: 10px; }
.mk-caption .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.mk-caption .meta > span { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--fg-mute); }
.js .mk-caption .tags, .js .mk-caption .meta { opacity: 0; transition: opacity .5s 1.6s; }
.js .mk-caption.on .tags, .js .mk-caption.on .meta { opacity: 1; }

/* ---------- prompt director ---------- */
.mk-assets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mk-assets > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 9px 5px 7px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: var(--fg-soft); background: color-mix(in srgb, var(--c) 8%, transparent); }
.mk-assets svg { width: 14px; height: 14px; color: var(--c); }
.mk-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.shot .frame {
  --z: 1; aspect-ratio: 9 / 11; border-radius: 9px; border: 1px solid var(--line); position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 7px, transparent 7px 14px), #10131a;
  transition: border-color .4s;
}
.shot .frame::before { content: ""; position: absolute; left: 50%; top: calc(46% - 20% * var(--z)); width: calc(26% * var(--z)); aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%); background: color-mix(in srgb, var(--c) 34%, #1b1f27); }
.shot .frame::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: calc(62% * var(--z)); height: calc(36% * var(--z)); border-radius: 50% 50% 0 0;
  transform: translateX(-50%); background: color-mix(in srgb, var(--c) 22%, #1b1f27); }
.shot .frame > span { position: absolute; left: 6px; top: 6px; z-index: 1; font: 700 9.5px var(--display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg); background: rgba(7,8,10,0.72); padding: 2px 6px; border-radius: 5px; }
.shot .frame .ok { position: absolute; right: 6px; bottom: 6px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #0b0d11; transition: opacity .3s .8s, transform .3s .8s; }
.shot .frame .ok svg { width: 11px; height: 11px; }
.js .shot .frame .ok { opacity: 0; transform: scale(.6); }
.js .shot.on .frame .ok { opacity: 1; transform: none; }
.js .shot.on .frame { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.shot small { display: block; font-size: 10.5px; color: var(--fg-faint); margin-top: 6px; line-height: 1.3; }
.shot .prog { display: block; height: 3px; border-radius: 9px; background: var(--line); margin-top: 6px; overflow: hidden; position: relative; }
.shot .prog::after { content: ""; position: absolute; inset: 0; width: 100%; background: var(--c); transition: width .9s linear; }
.js .shot .prog::after { width: 0; }
.js .shot.on .prog::after { width: 100%; }
.mk-prompt { margin-top: 13px; font: 500 11px/1.6 var(--mono); color: var(--fg-mute); background: rgba(0,0,0,0.35);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; position: relative; }
.mk-prompt .k { color: var(--c); }
.mk-prompt::after { content: ""; display: inline-block; width: 7px; height: 13px; background: var(--c); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }

/* ---------- video editor ---------- */
.mk-tl { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 14px; background: rgba(0,0,0,0.25); }
.ruler { display: flex; justify-content: space-between; font: 500 10px var(--display); color: var(--fg-faint); margin: 0 0 6px 74px; }
.track { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; margin-top: 8px; }
.track em { font-style: normal; font: 600 9.5px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.lane { position: relative; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.025); }
.clip { position: absolute; top: 0; bottom: 0; width: 24.6%; left: calc(var(--i) * 25%); border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 18%), linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 38%, #000));
  border: 1px solid color-mix(in srgb, var(--c) 80%, transparent);
  transition: transform .8s var(--ease), opacity .8s; }
.js .clip { transform: translateX(var(--off)) translateY(var(--offy, 0)); opacity: .25; }
.js .clip.on { transform: none; opacity: 1; }
.br { position: absolute; top: 4px; bottom: 4px; width: 10%; left: calc(var(--x) - 5%); border-radius: 5px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.22) 0 4px, rgba(255,255,255,0.07) 4px 8px); border: 1px solid rgba(255,255,255,0.35);
  transition: opacity .5s, transform .5s var(--ease); }
.js .br { opacity: 0; transform: translateY(-16px); }
.js .br.on { opacity: 1; transform: none; }
.words { display: flex; gap: 3px; padding: 5px; }
.words i { flex: 1; border-radius: 4px; background: rgba(255,255,255,0.16); transition: transform .3s var(--ease); }
.words i:nth-child(3n) { background: color-mix(in srgb, var(--ag-brain) 60%, transparent); }
.js .words i { transform: scaleY(0); }
.js .words.on i { transform: none; }
.words i:nth-child(2) { transition-delay: .05s; } .words i:nth-child(3) { transition-delay: .1s; } .words i:nth-child(4) { transition-delay: .15s; }
.words i:nth-child(5) { transition-delay: .2s; } .words i:nth-child(6) { transition-delay: .25s; } .words i:nth-child(7) { transition-delay: .3s; }
.words i:nth-child(8) { transition-delay: .35s; } .words i:nth-child(9) { transition-delay: .4s; } .words i:nth-child(10) { transition-delay: .45s; }
.wave { display: flex; align-items: center; gap: 2px; padding: 0 4px; overflow: hidden; }
.wave i { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ag-brain) 70%, transparent); transform-origin: center; transition: transform .6s; }
.js .wave i { transform: scaleY(.15); }
.js .wave.on i { transform: none; }
.playhead { position: absolute; top: 30px; bottom: 8px; left: 86px; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; animation: playhead 6s linear infinite; z-index: 2; }
.playhead::before { content: ""; position: absolute; top: -6px; left: -4px; width: 10px; height: 8px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes playhead { from { left: 86px; } to { left: calc(100% - 14px); } }
.mk-export { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-mute); }
.mk-export .ready { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--display); padding: 5px 11px; border-radius: 999px; background: var(--c); color: #0b0d11; transition: opacity .4s, transform .4s; }
.mk-export .ready svg { width: 13px; height: 13px; }
.mk-export .spec { padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,0.05); font-size: 11px; font-weight: 600; }
.js .mk-export .ready { opacity: 0; transform: translateY(6px); }
.js .mk-export.on .ready { opacity: 1; transform: none; }

/* ---------- QA ---------- */
.mk-qa { display: grid; grid-template-columns: 172px 1fr; gap: 16px; align-items: start; }
.mk-frame { position: relative; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(120% 80% at 50% 0%, #1b1f28, #0b0d11); }
.mk-frame .head { position: absolute; left: 50%; top: 20%; width: 30%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #262b35; }
.mk-frame .body { position: absolute; left: 50%; top: 44%; width: 64%; height: 60%; border-radius: 46% 46% 0 0; transform: translateX(-50%); background: #1f242d; }
.mk-frame .hand { position: absolute; top: 66%; width: 13%; aspect-ratio: 1; border-radius: 40%; background: #2e3440; }
.mk-frame .hand.l { left: 22%; } .mk-frame .hand.r { right: 22%; }
.qbox { position: absolute; border: 1.5px solid var(--c); border-radius: 7px; transition: opacity .4s, transform .4s; }
.qbox em { position: absolute; left: -1.5px; top: -17px; font-style: normal; font: 700 9px/1 var(--display); letter-spacing: .04em; color: #0b0d11; background: var(--c); padding: 3px 5px; border-radius: 4px; white-space: nowrap; }
.qbox.face { left: 28%; top: 16%; width: 44%; height: 26%; }
.qbox.hands { left: 14%; top: 61%; width: 72%; height: 19%; }
.js .qbox { opacity: 0; transform: scale(1.15); }
.js .qbox.on { opacity: 1; transform: none; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); box-shadow: 0 0 16px 2px var(--c); animation: scan2 2.8s ease-in-out infinite; z-index: 2; }
@keyframes scan2 { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.ck { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 12.5px; color: var(--fg-soft); margin-bottom: 6px; transition: border-color .4s, color .4s; }
.ck i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--c); background: var(--c); color: #0b0d11; display: grid; place-items: center; flex: none; transition: .35s; }
.ck i svg { width: 11px; height: 11px; }
.ck b { margin-left: auto; font: 600 11.5px var(--display); color: var(--c); white-space: nowrap; }
.js .ck { color: var(--fg-faint); }
.js .ck i { background: transparent; border-color: var(--line-2); color: transparent; }
.js .ck b { color: var(--fg-faint); }
.js .ck.on { border-color: color-mix(in srgb, var(--c) 38%, transparent); color: var(--fg-soft); }
.js .ck.on i { background: var(--c); border-color: var(--c); color: #0b0d11; }
.js .ck.on b { color: var(--c); }
.transcript { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--fg-mute); padding: 9px 11px; border-radius: 9px; background: rgba(0,0,0,0.3); border: 1px dashed var(--line-2); }
.transcript s { color: #ff8f8f; text-decoration-thickness: 2px; }
.js .transcript s { text-decoration-color: transparent; color: var(--fg-mute); transition: .4s; }
.js .transcript.on s { text-decoration-color: currentColor; color: #ff8f8f; }

/* ---------- posting ---------- */
.mk-post .slot { display: grid; grid-template-columns: 50px 62px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; font-size: 12.5px; transition: border-color .4s, background .4s; }
.slot time { font: 600 12.5px var(--display); color: var(--fg-soft); }
.nets { display: flex; gap: 4px; }
.nets i { font-style: normal; font: 700 9.5px var(--display); min-width: 24px; height: 20px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); color: var(--fg-soft); border: 1px solid var(--line-2); }
.slot .t { color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .st { font: 600 11px var(--display); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c); background: var(--c); color: #0b0d11; white-space: nowrap; }
.slot .st .q { display: none; }
.js .slot .st { background: transparent; border-color: var(--line-2); color: var(--fg-faint); }
.js .slot .st .q { display: inline; }
.js .slot .st .p { display: none; }
.js .slot.on .st { background: var(--c); border-color: var(--c); color: #0b0d11; }
.js .slot.on .st .q { display: none; }
.js .slot.on .st .p { display: inline; }
.js .slot.cur { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); }

/* ---------- stats ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpis > div { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: rgba(255,255,255,0.015); }
.kpis small { display: block; font: 600 9.5px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.kpis b { font: 600 18px/1.3 var(--display); color: var(--fg); }
.kpis em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--money); margin-left: 3px; }
.bars { height: 112px; display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 18%, transparent)); transition: transform .8s var(--ease); }
.bars i:last-child { background: linear-gradient(180deg, var(--money), rgba(74,222,128,0.15)); }
.js .bars i { transform: scaleY(.06); }
.js .bars.on i { transform: none; }
.bars i:nth-child(2) { transition-delay: .07s; } .bars i:nth-child(3) { transition-delay: .14s; } .bars i:nth-child(4) { transition-delay: .21s; }
.bars i:nth-child(5) { transition-delay: .28s; } .bars i:nth-child(6) { transition-delay: .35s; } .bars i:nth-child(7) { transition-delay: .42s; }
.insight { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 11px 12px; border-radius: 11px;
  border: 1px dashed color-mix(in srgb, var(--ag-research) 55%, transparent); background: color-mix(in srgb, var(--ag-research) 7%, transparent); transition: opacity .5s, transform .5s; }
.insight .ag-ic { --s: 32px; grid-row: span 2; }
.insight .to { font: 600 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ag-research); }
.insight p { font-size: 12.5px; color: var(--fg-soft); line-height: 1.4; }
.js .insight { opacity: .2; transform: translateY(6px); }
.js .insight.on { opacity: 1; transform: none; }

/* ---------- chatbot ---------- */
.mk-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; height: 330px; overflow: hidden; }
.msg { max-width: 80%; font-size: 12.5px; line-height: 1.42; padding: 8px 11px; border-radius: 14px; flex: none; }
.msg small { display: block; font: 600 10px var(--display); letter-spacing: .05em; color: var(--fg-faint); margin-bottom: 2px; }
.msg.in { align-self: flex-start; background: rgba(255,255,255,0.065); color: var(--fg-soft); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: color-mix(in srgb, var(--c) 20%, #11151a); color: var(--fg); border-bottom-right-radius: 4px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.msg.out small { color: color-mix(in srgb, var(--c) 80%, #fff); }
.msg.booked { background: var(--c); color: #0b0d11; font-weight: 700; }
.msg.booked small { color: rgba(11,13,17,0.65); }
.js .msg { display: none; }
.js .msg.on { display: block; animation: msgIn .35s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- you: the close ---------- */
.mk-close { display: flex; flex-direction: column; gap: 10px; }
.appt { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: opacity .4s, transform .4s; }
.appt .ag-ic { --s: 36px; grid-column: 1; grid-row: 1 / span 2; }
.appt b { font: 600 14px var(--display); }
.appt > span:not(.ag-ic) { font-size: 12px; color: var(--fg-mute); grid-column: 2; }
.appt time { grid-column: 3; grid-row: 1 / span 2; font: 600 12px var(--display); color: var(--c); text-align: right; white-space: nowrap; }
.js .appt { opacity: 0; transform: translateY(10px); }
.js .appt.on { opacity: 1; transform: none; }
.stamp { align-self: center; margin: 6px 0; font: 700 22px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ag-you);
  border: 2px solid var(--ag-you); padding: 6px 18px; border-radius: 10px; transform: rotate(-4deg);
  transition: opacity .3s, transform .4s cubic-bezier(.2,1.6,.4,1); }
.js .stamp { opacity: 0; transform: rotate(-4deg) scale(1.5); }
.js .stamp.on { opacity: 1; transform: rotate(-4deg) scale(1); }
.paid { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; border-radius: 12px;
  background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.35); color: #86efac; font: 600 15px var(--display); transition: opacity .4s, transform .4s; }
.paid svg { width: 20px; height: 20px; }
.js .paid { opacity: 0; transform: translateY(8px); }
.js .paid.on { opacity: 1; transform: none; }

/* ============================================================
   BEFORE / NOW comparison
   ============================================================ */
.vs { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 0; align-items: stretch; margin-top: 52px; }
.vs-col { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: linear-gradient(180deg, var(--surface), var(--bg-1)); }
.vs-col.new { border-color: rgba(233,196,106,0.35); box-shadow: 0 40px 80px -60px var(--gold-glow); }
.vs-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vs-h h3 { font-size: 21px; }
.vs-tag { font: 700 10.5px var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.vs-tag.old { color: #e98a8a; background: rgba(233,138,138,0.1); border: 1px solid rgba(233,138,138,0.25); }
.vs-tag.now { color: #1a1400; background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.vs-col ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs-col li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.015); transition: opacity .45s, color .45s, border-color .45s, background .45s; }
.vs-col li svg { width: 16px; height: 16px; flex: none; }
.vs-col.old li { color: var(--fg-mute); text-decoration: line-through; text-decoration-color: rgba(233,138,138,0.7); opacity: .55; }
.vs-col.old li svg { color: #e98a8a; }
.js .vs-col.old li { text-decoration-color: transparent; opacity: 1; color: var(--fg-soft); }
.js .vs-col.old li.on { text-decoration-color: rgba(233,138,138,0.7); opacity: .55; color: var(--fg-mute); }
.vs-col.new li { color: var(--fg); border-color: color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.vs-col.new li svg { color: var(--c); }
.js .vs-col.new li { color: var(--fg-faint); border-color: var(--line); background: rgba(255,255,255,0.015); }
.js .vs-col.new li svg { color: var(--fg-faint); }
.js .vs-col.new li.on { color: var(--fg); border-color: color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.js .vs-col.new li.on svg { color: var(--c); }
.vs-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-mute); }
.vs-col.new .vs-foot { color: var(--gold); }
.vs-mid { display: grid; place-items: center; position: relative; }
.vs-mid::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: flowx .8s linear infinite; }
.vs-mid > span { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #1a1400; box-shadow: 0 0 30px -4px var(--gold-glow); }
.vs-mid > span svg { width: 18px; height: 18px; }

/* ============================================================
   A DAY WITH YOUR AI TEAM
   ============================================================ */
.day { --p: 0; margin-top: 56px; }
.day-track { position: relative; padding: 0 2px; }
.day-hours { display: flex; justify-content: space-between; font: 500 11.5px var(--display); color: var(--fg-faint); margin-bottom: 10px; }
.day-line { position: relative; height: 6px; border-radius: 99px; background: var(--line); }
.day-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width 1s var(--ease); }
.day-needle { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--fg); box-shadow: 0 0 0 5px var(--gold-glow), 0 0 22px var(--gold); transition: left 1s var(--ease); }
.day-mk { position: absolute; top: 50%; left: calc(var(--h) / 24 * 100%); width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--bg); border: 2px solid var(--c); }
.day-chat { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); font-size: 13px; color: var(--fg-soft);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent) 0 8px, transparent 8px 24px); background-size: 24px 100%;
  animation: flowx 1.4s linear infinite; }
.day-chat svg { width: 16px; height: 16px; color: var(--c); flex: none; }
.day-events { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 22px; }
.day-events li { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.015); transition: border-color .5s, background .5s, opacity .5s, transform .5s; }
.day-events li time { font: 600 12px var(--display); color: var(--c); }
.day-events li b { display: block; font: 600 14.5px/1.25 var(--display); margin-top: 8px; }
.day-events li > span { display: block; font-size: 12.5px; color: var(--fg-mute); margin-top: 6px; line-height: 1.45; }
.js .day-events li { opacity: .45; }
.js .day-events li.on { opacity: 1; }
.js .day-events li.cur { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); transform: translateY(-4px); }

/* ============================================================
   SYSTEM MAP (features) — boxes in a grid, links drawn by JS
   ============================================================ */
.sysmap {
  --flow: h;
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto;
  column-gap: 38px; row-gap: 26px; align-items: center; margin-top: 56px; padding-top: 64px;
}
.sysmap svg.flow-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.flow-svg .fl-base { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1.5; }
.flow-svg .fl-run { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 15; stroke-linecap: round; animation: flrun 1.2s linear infinite; }
.flow-svg .fl-run.loop { stroke: var(--ag-stats); }
@keyframes flrun { to { stroke-dashoffset: -40; } }
.sm-node { position: relative; z-index: 1; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--surface), var(--bg-1)); padding: 14px; }
.sm-node .k { font: 600 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); display: block; }
.sm-node .hd { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sm-node .hd .ag-ic { --s: 34px; }
.sm-node b { font: 600 14.5px/1.2 var(--display); }
.sm-node p { font-size: 12.5px; color: var(--fg-mute); margin-top: 8px; line-height: 1.42; }
.sm-node.agent { border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.sm-node.agent:hover { border-color: var(--c); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.sm-chips > span { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--fg-soft); }
.sm-you   { grid-column: 1; grid-row: 1 / span 2; }
.sm-brain { grid-column: 2; grid-row: 1 / span 2; border-color: rgba(233,196,106,0.45); box-shadow: 0 0 50px -20px var(--gold-glow); }
.sm-create { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 20px; }
.sm-create .sm-node { padding: 11px 12px; }
.sm-create .sm-node .hd { margin-top: 0; }
.sm-post  { grid-column: 4; grid-row: 1 / span 2; }
.sm-stats { grid-column: 5; grid-row: 1; }
.sm-chat  { grid-column: 5; grid-row: 2; }
.sm-note  { grid-column: 6; grid-row: 1; font-size: 13px; color: var(--fg-mute); line-height: 1.5; border-left: 2px solid var(--ag-stats); padding-left: 12px; }
.sm-note b { color: var(--ag-stats); font-family: var(--display); }
.sm-close { grid-column: 6; grid-row: 2; border-color: rgba(233,196,106,0.5); background: linear-gradient(160deg, rgba(233,196,106,0.14), var(--bg-1)); }
.sm-close b { color: var(--gold); }

/* ============================================================
   RELAY (who hands what to whom)
   ============================================================ */
.relay { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
.rl { display: grid; grid-template-columns: 220px 1fr 220px; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.015); }
.rl-a { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--display); }
.rl-a .ag-ic { --s: 32px; }
.rl-a.to { justify-content: flex-end; text-align: right; }
.rl-a.to .ag-ic { order: 2; }
.rl-pipe { position: relative; text-align: center; font-size: 13px; color: var(--fg-soft); padding: 14px 0 0; }
.rl-pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px; background: var(--line-2); }
.rl-pipe i { position: absolute; top: 1px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold);
  animation: relay 2.6s var(--ease) infinite; animation-delay: calc(var(--i) * .29s); }
@keyframes relay { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.rl.loop { border-style: dashed; border-color: color-mix(in srgb, var(--ag-stats) 40%, transparent); }
.rl.loop .rl-pipe i { background: var(--ag-stats); box-shadow: 0 0 12px var(--ag-stats); }

/* ============================================================
   ROLE → AGENT swap table (pricing)
   ============================================================ */
.swap { margin-top: 52px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-1)); }
.swap-head, .swap-row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; gap: 12px; padding: 14px 24px; }
.swap-head { font: 600 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.swap-head > span:last-child { color: var(--gold); }
.swap-row + .swap-row { border-top: 1px solid var(--line); }
.swap .role { font-size: 15px; font-weight: 600; color: var(--fg-mute); text-decoration: line-through; text-decoration-color: rgba(233,138,138,0.75); transition: color .45s, text-decoration-color .45s; }
.swap .role small { display: block; font-size: 12px; font-weight: 500; color: var(--fg-faint); text-decoration: none; margin-top: 2px; }
.swap .sw-arrow { color: var(--fg-faint); display: grid; place-items: center; transition: color .45s; }
.swap .sw-arrow svg { width: 18px; height: 18px; }
.swap .agent { display: flex; align-items: center; gap: 11px; font: 600 15px/1.2 var(--display); color: var(--fg); transition: opacity .45s, transform .45s; }
.swap .agent .ag-ic { --s: 34px; }
.swap .agent small { display: block; font: 500 12px var(--body); color: var(--fg-mute); margin-top: 2px; }
.swap .on .sw-arrow, .swap-row .sw-arrow { color: var(--gold); }
.js .swap .role { text-decoration-color: transparent; color: var(--fg-soft); }
.js .swap .sw-arrow { color: var(--fg-faint); }
.js .swap .agent { opacity: .2; transform: translateX(-8px); }
.js .swap .on .role { text-decoration-color: rgba(233,138,138,0.75); color: var(--fg-mute); }
.js .swap .on .sw-arrow { color: var(--gold); }
.js .swap .on .agent { opacity: 1; transform: none; }
.swap-row.you { background: linear-gradient(90deg, rgba(233,196,106,0.10), transparent 70%); }
.swap-row.you .role { text-decoration: none; color: var(--fg); }
.js .swap-row.you .role { color: var(--fg); }
.swap-row.you .agent { color: var(--gold); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .sysmap { --flow: v; grid-template-columns: 1fr 1fr; grid-template-rows: none; column-gap: 18px; row-gap: 34px; padding-top: 0; padding-left: 40px; max-width: 680px; margin-inline: auto; }
  .sm-you, .sm-brain, .sm-create, .sm-post { grid-column: 1 / -1; grid-row: auto; }
  .sm-create { gap: 34px; }
  .sm-stats { grid-column: 1; grid-row: auto; }
  .sm-chat  { grid-column: 2; grid-row: auto; }
  .sm-note  { grid-column: 1; grid-row: auto; }
  .sm-close { grid-column: 2; grid-row: auto; }
  .day-events { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
  .switcher { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .panels { min-height: 0; }
  .tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 14px 10px 10px; }
  .tab small, .tab .n { display: none; }
  .tab b { white-space: nowrap; font-size: 14px; }
  .vs { grid-template-columns: 1fr; }
  .vs-mid { height: 56px; }
  .vs-mid::before { left: 50%; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 12px); background-size: 2px 24px; animation-name: flowy; }
  .vs-mid > span svg { transform: rotate(90deg); }
  .rl { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rl-pipe { grid-column: 1 / -1; grid-row: 2; }
}
/* the screens appear at different widths per page, so they respond to their own width */
.win { container-type: inline-size; }
@container (max-width: 600px) {
  .win-body { padding: 14px; min-height: 0; }
  .mk-brain { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .mk-brain .mk-inputs { grid-column: 1; grid-row: 1 / span 2; }
  .mk-brain .mk-flow { display: none; }
  .mk-brain .mk-core { grid-column: 2; grid-row: 1; width: 84px; height: 84px; }
  .mk-brain .mk-profile { grid-column: 2; grid-row: 2; }
  .mk-research { grid-template-columns: 1fr; }
  .mk-qa { grid-template-columns: 130px 1fr; gap: 12px; }
  .ck { padding: 7px 8px; gap: 8px; font-size: 12px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-post .slot { grid-template-columns: 44px auto 1fr auto; gap: 8px; padding: 8px 9px; }
  .mk-chat { height: 300px; }
}
@container (max-width: 420px) {
  .mk-brain { grid-template-columns: 1fr; }
  .mk-brain .mk-inputs, .mk-brain .mk-core, .mk-brain .mk-profile { grid-column: 1; grid-row: auto; }
  .mk-brain .mk-core { justify-self: center; }
  .mk-board { grid-template-columns: repeat(2, 1fr); }
  .mk-qa { grid-template-columns: 1fr; }
  .mk-frame { width: 150px; justify-self: center; }
  .mk-post .slot .t { display: none; }
  .mk-post .slot { grid-template-columns: 44px 1fr auto; }
}
@media (max-width: 720px) {
  .vs-col { padding: 18px; }
  .vs-col li { font-size: 13px; padding: 9px 10px; gap: 7px; }
  .day-track { display: none; }
  .day-events { grid-template-columns: 1fr; margin-top: 8px; position: relative; padding-left: 22px; }
  .day-events::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
  .day-events li { position: relative; }
  .day-events li::before { content: ""; position: absolute; left: -21px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c); }
  .js .day-events li.cur { transform: none; }
  .swap-head, .swap-row { grid-template-columns: 1fr 26px 1fr; padding: 13px 14px; gap: 8px; }
  .swap .role { font-size: 13.5px; }
  .swap .agent { font-size: 13.5px; gap: 8px; }
  .swap .agent .ag-ic { --s: 28px; }
  .rl-a { font-size: 13px; }
}
@media (max-width: 420px) {
  .swap .agent .ag-ic { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .links .spoke, .links .core-ring, .links .orbit, .mk-flow, .mk-core, .mk-core::before, .scan, .scanline, .playhead,
  .mk-prompt::after, .vs-mid::before, .day-chat, .flow-svg .fl-run, .rl-pipe i, .live-dot, .win-top .status i { animation: none !important; }
  .playhead { display: none; }
  .rl-pipe i { left: calc(50% - 4px); }
}