/* Agencies landing page styles — extracted to plain CSS and served from
   /public like the landing CSS. */
/* hide all section eyebrows */
.ag-eyebrow {
  display: none !important;
}

/* ===== Agency landing — added sections ===== */
.ag-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--grey);
}
.ag-sub {
  color: var(--grey);
  font-size: 18px;
  line-height: 1.5;
  max-width: 640px;
}
.ag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ag-chip {
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 60px;
  padding: 9px 18px;
  font-size: 15px;
  color: rgb(255 255 255 / 75%);
}
.ag-cred {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 760px;
}
.ag-cred-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 20px;
  padding: 16px;
  color: rgb(255 255 255 / 82%);
  font-size: 15px;
}
.ag-cred-item svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.ag-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.ag-card {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  text-align: left;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 20px;
  padding: 28px;
  background: rgb(255 255 255 / 3%);
}
.ag-card h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
}
.ag-card p {
  color: var(--grey);
  font-size: 15px;
  line-height: 1.55;
}
.ag-ico {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  color: var(--white);
  flex: none;
}
.ag-ico svg {
  width: 22px;
  height: 22px;
}
.ag-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}
.ag-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 12px;
}
.ag-step-badge {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 14px;
  color: var(--white);
}
.ag-step-badge svg {
  width: 22px;
  height: 22px;
}
.ag-step-num {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-step h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}
.ag-step p {
  color: var(--grey);
  font-size: 13px;
  line-height: 1.5;
  max-width: 180px;
}
.ag-list-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  text-align: left;
}
.ag-trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 20px;
  padding: 22px;
  background: rgb(255 255 255 / 3%);
}
.ag-trust-item h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}
.ag-trust-item p {
  color: var(--grey);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
}
.ag-faq {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}
.ag-faq-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.ag-faq-item:hover {
  border-color: rgba(0, 0, 0, 0.16);
}
.ag-faq-item.open {
  border-color: rgba(255, 122, 24, 0.45);
  box-shadow: 0 14px 34px -18px rgba(255, 122, 24, 0.3);
}
.ag-faq-q {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  gap: 16px;
  padding: 19px 20px 19px 22px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-faq-q span {
  flex: 1;
  min-width: 0;
}
.ag-faq-num {
  flex: none;
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #b6b6bd;
  transition: color 0.3s ease;
}
.ag-faq-item.open .ag-faq-num {
  color: var(--orange, #ff7a18);
}
.ag-faq-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f5f66;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.ag-faq-item.open .ag-faq-ic {
  transform: rotate(45deg);
  background: var(--orange, #ff7a18);
  border-color: var(--orange, #ff7a18);
  color: #ffffff;
}
.ag-faq-a {
  padding: 0 66px 20px 59px;
  color: #5f5f66;
  font-size: 14.5px;
  line-height: 1.65;
}
@media (max-width: 992px) {
  .ag-grid-3,
  .ag-cred,
  .ag-list-2 {
    grid-template-columns: 1fr 1fr;
  }
  .ag-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .ag-grid-3,
  .ag-cred,
  .ag-list-2 {
    grid-template-columns: 1fr;
  }
  .ag-steps {
    grid-template-columns: 1fr 1fr;
  }
  .ag-faq-q {
    font-size: 16px;
  }
}

/* ==================== LIGHT THEME (white site) ==================== */
body {
  background: #ffffff !important;
}
/* Clip horizontal overflow from full-bleed decorative elements (the ag-trust2
   aurora, scaled showcase videos, the talent marquee) on the page content.
   This MUST go on <main> (a sibling of the navbar), NOT on html/body — overflow
   on the root re-bases position:fixed to the body, which makes the sticky nav
   scroll away and sit a few px off. */
/* Superseded: every agencies section now clips its own decorative overflow
   (.agx-hero, .agx-dark, .agx-bento-sec, .agx-marquee rows), so main no
   longer needs a blanket clip. Keeping it made Motion resolve <main> as the
   scroll container for useScroll and emit a warning. Verified overflow-x
   stays 0 at 360/390/430/768/1024/1440 without it. */
main:not(.agx-main-root) {
  overflow-x: clip !important;
}
.notranslate {
  background: #ffffff !important;
  color: #0a0a0a !important;
}

/* Navbar theming (dark-on-white, sticky, mobile + drawer states) lives in the
   shared /public/landing-navbar-light.css, applied via <Navbar lightPage />. */

/* Hero → white (hide the dark video) */
.hero-agency {
  background: #ffffff !important;
  color: #0a0a0a !important;
}
.hero-agency .bg-wrapper,
.hero-agency .overlay-agency {
  display: none !important;
}

/* CTA pills → solid black on white */
.button-primary {
  background: #0a0a0a !important;
  color: #ffffff !important;
}
.button-primary .cta-bg {
  background: #0a0a0a !important;
}

/* Kill dark image backgrounds on data cards, make them light */
.talent-section,
.key-item,
.cta-component-2,
.followers-item,
.map-box-wrapper,
.pricing-calculator-wrapper {
  background-image: none !important;
}
.talent-section {
  background: #ffffff !important;
}
.key-item,
.followers-item,
.map-box-wrapper,
.pricing-calculator-wrapper,
.total-followers,
.chart-wrapper,
.tab-count-box,
.cta-component-2,
.followers-single-item,
.map-info-item,
.map-bottom-list-item {
  background: #f7f7f8 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0a0a0a !important;
}
.section-bg-white {
  background: #ffffff !important;
  color: #0a0a0a !important;
}
.text-color-grey {
  color: #5f5f66 !important;
}

/* Footer → light, to sit on this page's ambient tint. It was black to
   match the home / business footers, but on a white page that slab cut
   the page in half. Scoped to this stylesheet, so the shared Footer
   component and every other page keep the dark treatment. */
.padding-footer {
  background: transparent !important;
  border-top: 1px solid #e7e7ea;
}
.footer-links-title {
  color: #0a0a0a !important;
}
.footer-link,
.footer-bottom {
  color: #6b6b74 !important;
}
.footer-link:hover {
  /* the shared hover paints a pink→gold gradient into the text, which
     reads on either ground — left alone on purpose */
  color: transparent !important;
}
.padding-footer .notranslate {
  background: transparent !important;
  color: inherit !important;
}
/* The component hardcodes the white-wordmark logo, which is invisible on
   this page's light footer. Swap in the dark wordmark the navbar already
   serves on light pages — same 140x35 box, so nothing reflows.

   `content: url()` on an <img> is a Chrome/Safari-only feature; Firefox
   ignores it and would have shown white-on-white. Pushing the intrinsic
   image out of its own box and painting the replacement as a background
   works in every engine. */
.padding-footer .footer-logo {
  width: 140px;
  height: 35px;
  object-position: -9999px 0;
  background: url("/assets/c98549a0324e9861b0d30226b687035d_4649.svg") no-repeat
    left center / contain;
}
/* The store badges are self-contained white pills; on a light ground
   they lose their edge, so give them one back. */
.footer-bottom img {
  border: 1px solid #e7e7ea;
  border-radius: 9px;
}

/* ===== flip added (ag-*) sections to light ===== */
.ag-eyebrow {
  color: #6a6a72 !important;
}
.ag-sub {
  color: #5f5f66 !important;
}
.ag-chip {
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #3a3a40 !important;
}
.ag-cred-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #3a3a40 !important;
}
.ag-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ag-card h3 {
  color: #0a0a0a !important;
}
.ag-card p {
  color: #5f5f66 !important;
}
.ag-ico {
  background: #f7f7f8 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #0a0a0a !important;
}
.ag-step-badge {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0a0a0a !important;
}
.ag-step h3 {
  color: #0a0a0a !important;
}
.ag-step p {
  color: #5f5f66 !important;
}
.ag-trust-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.ag-trust-item h3 {
  color: #0a0a0a !important;
}
.ag-trust-item p {
  color: #5f5f66 !important;
}
.ag-faq-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.ag-faq-q {
  color: #0a0a0a !important;
}
.ag-faq-icon {
  color: #6a6a72 !important;
}
.ag-faq-a {
  color: #5f5f66 !important;
}

/* ==================== MOTION + GRAPHICS PASS ==================== */

/* Hero — ambient canvas behind kinetic type */
.ag-hero {
  position: relative;
  overflow: hidden;
}
.ag-hero-canvas {
  z-index: 0;
  pointer-events: none;
}
.ag-hero-content {
  position: relative;
  z-index: 1;
}
.ag-hero-sub {
  text-align: center;
  margin: 0 auto;
  max-width: 560px;
}
.ag-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
  z-index: 1;
}
.ag-scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 4px;
  background: #0a0a0a;
}

/* Eyebrows — accent tick */
.ag-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Trust strip — dual infinite marquees */
.ag-trust-marquees {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.ag-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}
.ag-marquee-track {
  display: flex;
  width: max-content;
  animation: ag-marquee 36s linear infinite;
  will-change: transform;
}
.ag-marquee--rev .ag-marquee-track {
  animation-direction: reverse;
}
.ag-marquee:hover .ag-marquee-track {
  animation-play-state: paused;
}
.ag-chip--mq {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 14px;
  padding: 10px 20px;
  white-space: nowrap;
  cursor: default;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #16161c !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #f6f6f9) padding-box,
    linear-gradient(
        135deg,
        rgba(255, 122, 24, 0.7),
        rgba(255, 45, 142, 0.5) 46%,
        rgba(122, 43, 255, 0.45)
      )
      border-box;
  box-shadow:
    0 1px 1px rgba(17, 17, 20, 0.04),
    0 10px 24px -16px rgba(17, 17, 20, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
.ag-chip--mq::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  transform: translateX(-260%) skewX(-18deg);
  animation: ag-chip-sheen 6s ease-in-out infinite;
  pointer-events: none;
}
.ag-chip-orb {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffd9b8, #ff7a18 52%, #ff2d8e);
  box-shadow:
    0 0 0 3px rgba(255, 122, 24, 0.12),
    0 0 9px rgba(255, 90, 40, 0.55);
}
.ag-chip--mq:hover {
  border-color: transparent !important;
  color: #0a0a0a !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 18px -8px rgba(255, 90, 40, 0.45),
    0 18px 44px -22px rgba(255, 45, 142, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
@keyframes ag-chip-sheen {
  0% {
    transform: translateX(-260%) skewX(-18deg);
  }
  55%,
  100% {
    transform: translateX(330%) skewX(-18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-chip--mq::after {
    animation: none;
    opacity: 0;
  }
}
@keyframes ag-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ag-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }
}
/* Trust section — roster avatar wall + aurora */
.ag-trust2-sec {
  position: relative;
  overflow: hidden;
}
.ag-trust2-sec .container {
  position: relative;
  z-index: 1;
}
.ag-trust2-aurora {
  position: absolute;
  inset: -30% -10% -15% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      38% 55% at 18% 32%,
      rgba(255, 122, 24, 0.16),
      transparent 70%
    ),
    radial-gradient(
      40% 58% at 82% 38%,
      rgba(255, 45, 142, 0.14),
      transparent 72%
    ),
    radial-gradient(
      48% 65% at 50% 88%,
      rgba(122, 43, 255, 0.12),
      transparent 72%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 18%,
    #000 34%,
    #000 72%,
    transparent 90%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 18%,
    #000 34%,
    #000 72%,
    transparent 90%
  );
  filter: blur(36px);
  animation: ag-aurora 18s ease-in-out infinite alternate;
}
@keyframes ag-aurora {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0, -22px, 0) scale(1.07);
  }
}
.ag-trust2-title {
  text-align: center;
}
.ag-trust2-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.ag-av {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 16px;
  padding: 7px 22px 7px 7px;
  white-space: nowrap;
  cursor: default;
  border: 1.5px solid transparent !important;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #f6f6f9) padding-box,
    linear-gradient(
        135deg,
        rgba(255, 122, 24, 0.6),
        rgba(255, 45, 142, 0.46) 50%,
        rgba(122, 43, 255, 0.42)
      )
      border-box;
  box-shadow:
    0 1px 1px rgba(17, 17, 20, 0.04),
    0 12px 28px -18px rgba(17, 17, 20, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-av-ring {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a18, #ff2d8e, #7a2bff);
  display: block;
}
.ag-av-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  display: block;
  background: #ececf0;
}
.ag-av-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.ag-av-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 15px;
  color: #16161c;
}
.ag-av-badge {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.ag-av-handle {
  font-size: 13px;
  font-weight: 500;
  color: #8a8a92;
}
.ag-av:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 10px 22px -10px rgba(255, 90, 40, 0.4),
    0 24px 52px -26px rgba(255, 45, 142, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* Reveal wrappers must behave like the cards they wrap in grids */
.ag-grid-3 > div,
.ag-list-2 > div,
.grid-4 > div,
.ag-cred > div {
  display: flex;
}
.ag-grid-3 > div > .ag-card,
.ag-list-2 > div > .ag-trust-item,
.grid-4 > div > .key-item,
.ag-cred > div > .ag-cred-item {
  flex: 1;
}

/* Workflow — pinned split headline, cards travel the center channel */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ag-flow {
  position: relative;
  width: 100%;
}
.ag-flow-title {
  position: sticky;
  top: 0;
  height: 36vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  pointer-events: none;
  z-index: 0;
}
.ag-flow-word:first-child {
  position: absolute;
  right: calc(50% + 320px);
}
.ag-flow-word:last-child {
  position: absolute;
  left: calc(50% + 320px);
}
@media (max-width: 1280px) {
  .ag-flow-word:first-child {
    right: calc(50% + 240px);
  }
  .ag-flow-word:last-child {
    left: calc(50% + 240px);
  }
}
.ag-flow-word {
  color: #0a0a0a;
  white-space: nowrap;
  font-size: clamp(34px, 2.9vw, 56px) !important;
  line-height: 1.1 !important;
}
.ag-flow-cards {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 26vh 20px 18vh;
}
.ag-flow-card {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  padding: 28px 30px 34px;
  box-shadow: 0 30px 70px -38px rgba(0, 0, 0, 0.18);
}
.ag-flow-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: auto;
}
.ag-flow-num {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  color: #c3c3ca;
}
.ag-flow-ico {
  position: relative;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  color: #0a0a0a;
}
.ag-flow-ico svg {
  width: 24px;
  height: 24px;
}
.ag-flow-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
}
.ag-flow-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
  font-size: 22px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-flow-bullet {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--orange, #ff7a18);
}
.ag-flow-card p {
  margin-top: 12px;
  color: #5f5f66;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Workflow — flow board */
.ag-wn {
  padding: 110px 0 40px;
}
.ag-wn-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
  text-align: center;
  padding: 0 20px;
}
.ag-wn-title {
  font-size: clamp(32px, 2.9vw, 52px) !important;
}
.ag-wn-board {
  position: relative;
  width: 100%;
}
.ag-wn-canvas {
  display: block;
  width: 100%;
  height: clamp(440px, 62vh, 640px);
}
/* ---- flow board (Trybe-exact engine) ---- */
.ag-fb {
  position: relative;
  width: 100%;
  height: clamp(440px, 62vh, 640px);
  overflow: hidden;
}
.ag-fb-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ag-fb-wires path {
  fill: none;
  stroke: rgba(10, 10, 10, 0.11);
  stroke-width: 2;
}
.ag-fb-ring {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(10, 10, 10, 0.32);
  transform: translate(-50%, -50%);
}
.ag-fb-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
}
.ag-fb-card {
  position: absolute;
  top: 0;
  width: 86px;
  height: 134px;
  border-radius: 16px;
  background: #ffffff;
  padding: 4px;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.08),
    0 18px 44px -16px rgba(0, 0, 0, 0.3);
  will-change: transform, opacity, left;
}
.ag-fb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* journey: rides the wire via offset-path; shrinks into the hub,
   re-emerges, stops 2s, drifts away */
.ag-fb-journey {
  top: 0;
  left: 0;
  offset-rotate: 0deg;
  opacity: 0;
  will-change: offset-distance, transform, opacity;
}
/* badges pop during the 2s stop, matched to the feature */
.ag-fb-pill {
  position: absolute;
  top: -8px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 7px;
  border-radius: 60px;
  background: #ffffff;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-weight: 800;
  color: #0a0a0a;
  white-space: nowrap;
  opacity: 0;
}
.ag-fb-pill i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.ag-fb-pill i svg {
  width: 12px;
  height: 12px;
}
.ag-fb-pill-cash i {
  background: #22c55e;
}
.ag-fb-pill-plane i {
  background: #0a0a0a;
}
.ag-fb-pill-bolt i,
.ag-fb-pill-mail i {
  background: #0a0a0a;
}
.ag-fb-feature {
  position: absolute;
  bottom: -8px;
  left: -14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 60px;
  background: #ffffff;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.28);
  font-size: 11.5px;
  font-weight: 700;
  color: #0a0a0a;
  white-space: nowrap;
  opacity: 0;
}
.ag-fb-feature svg {
  width: 15px;
  height: 15px;
  color: var(--orange, #ff7a18);
  flex: none;
}
/* hub */
.ag-fb-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 144px;
  height: 144px;
}
.ag-fb-hub-plate {
  position: absolute;
  inset: -16px;
  border-radius: 46px;
  background: rgba(10, 10, 10, 0.045);
}
.ag-fb-hub-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 38px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.35);
}
.ag-fb-hub-core img {
  width: 84px;
  height: 84px;
  border-radius: 20px;
}
.ag-fb-hub-pulse {
  position: absolute;
  inset: 0;
  border-radius: 38px;
  border: 1.5px solid rgba(255, 122, 24, 0.45);
  animation: ag-hub-pulse 2.4s ease-out infinite;
}
@keyframes ag-hub-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
@media (max-width: 992px) {
  .ag-fb-card {
    width: 58px;
    height: 92px;
    border-radius: 12px;
  }
  .ag-fb-pill {
    right: -34px;
    font-size: 11px;
  }
  .ag-fb-feature {
    left: -28px;
    font-size: 10px;
  }
  .ag-fb-hub {
    width: 96px;
    height: 96px;
  }
  .ag-fb-hub-core {
    border-radius: 26px;
  }
  .ag-fb-hub-core img {
    width: 56px;
    height: 56px;
  }
}

.ag-wn-chips {
  position: absolute;
  top: 18px;
  right: 4vw;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.ag-wn-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 60px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  color: #5f5f66;
}
.ag-wn-chip b {
  font-size: 15px;
  font-weight: 700;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.ag-wn-chip-cash b {
  color: var(--orange, #ff7a18);
}
.ag-wn-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1060px;
  margin: 8px auto 0;
  padding: 0 24px;
}
.ag-wn-caption {
  text-align: center;
}
.ag-wn-caption-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange, #ff7a18);
}
.ag-wn-caption h3 {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-wn-caption p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: #5f5f66;
}
@media (max-width: 992px) {
  .ag-wn {
    padding: 72px 0 24px;
  }
  .ag-wn-canvas {
    height: 380px;
  }
  .ag-wn-chips {
    position: static;
    justify-content: center;
    margin-top: 4px;
  }
  .ag-wn-captions {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }
}

/* Workflow — pinned horizontal journey */
.ag-wf {
  position: relative;
  height: 320vh;
}
.ag-wf-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.ag-wf-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 18px;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 7vh;
}
.ag-wf-title {
  font-size: clamp(34px, 3vw, 56px) !important;
}
.ag-wf-stage {
  position: relative;
  width: 100%;
}
.ag-wf-track {
  position: relative;
  display: flex;
  gap: 28px;
  padding: 0 calc(50vw - 200px);
  will-change: transform;
}
.ag-wf-line {
  position: absolute;
  top: 50%;
  left: 50vw;
  height: 2px;
  z-index: 0;
}
.ag-wf-line-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.08);
}
.ag-wf-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  transform-origin: left;
  background: linear-gradient(90deg, #0a0a0a 75%, var(--orange, #ff7a18));
}
.ag-wf-orb {
  position: absolute;
  top: -10px;
  left: -11px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ag-wf-orb-core {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
  box-shadow:
    0 0 0 5px rgba(255, 122, 24, 0.16),
    0 0 22px 6px rgba(255, 122, 24, 0.45);
  animation: ag-live-pulse 1.6s ease-in-out infinite;
}
.ag-wf-card {
  position: relative;
  z-index: 2;
  flex: none;
  width: 400px;
  min-height: 300px;
  padding: 28px 30px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 30px 70px -38px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.ag-wf-ghost {
  position: absolute;
  right: 14px;
  top: -26px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 150px;
  line-height: 1;
  color: rgba(10, 10, 10, 0.05);
  pointer-events: none;
}
.ag-wf-ico {
  position: relative;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  color: #0a0a0a;
}
.ag-wf-ico svg {
  width: 24px;
  height: 24px;
}
.ag-wf-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
}
.ag-wf-card h3 {
  margin-top: 64px;
  font-size: 23px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-wf-card p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #5f5f66;
}
.ag-wf-count {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #9b9ba3;
}
.ag-wf-count-now {
  font-size: 22px;
  font-weight: 700;
  color: #0a0a0a;
}
@media (max-width: 992px) {
  .ag-wf {
    height: auto;
    padding: 80px 0 40px;
  }
  .ag-wf-pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .ag-wf-head {
    margin-bottom: 40px;
  }
  .ag-wf-track {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    transform: none !important;
  }
  .ag-wf-card {
    width: 100%;
    max-width: 440px;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
  }
  .ag-wf-card h3 {
    margin-top: 40px;
  }
  .ag-wf-line,
  .ag-wf-count {
    display: none;
  }
}

/* Features section — tighter, smaller, centered */
.ag-features .container {
  max-width: 1060px;
}
.ag-features-title {
  font-size: clamp(30px, 2.4vw, 40px) !important;
  text-align: center;
  margin: 0 auto;
  max-width: 640px;
}
.ag-features .content-wrapper {
  align-items: center;
}
.ag-features .icon-64 {
  width: 46px;
  height: 46px;
}
.ag-features .h3-20 {
  font-size: 17px;
}
.ag-features .text-color-grey {
  font-size: 14.5px;
  line-height: 1.55;
}
.ag-features .gap-64 {
  row-gap: 36px;
}
.ag-features .gap-48 {
  row-gap: 56px;
}

/* Use-case items — live link.me profile inside a phone */
.ag-uc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ag-uc-phone {
  position: relative;
  width: 320px;
  height: 660px;
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(160deg, #2a2a2e, #0a0a0a 55%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    0 40px 90px -38px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-uc-phone:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    0 52px 110px -40px rgba(0, 0, 0, 0.55);
}
.ag-uc-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 45px;
  overflow: hidden;
  background: #ffffff;
}
.ag-uc-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 818px;
  border: 0;
  transform: scale(0.7949);
  transform-origin: top left;
  pointer-events: none;
}
.ag-uc-island {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 23px;
  border-radius: 14px;
  background: #0a0a0a;
  z-index: 2;
}
.ag-uc-caption {
  margin-top: 24px;
  max-width: 380px;
  text-align: center;
}
.ag-uc-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange, #ff7a18);
}
.ag-uc-caption h3 {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-uc-caption p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #5f5f66;
}
.ag-uc-live {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #15803d;
  text-transform: uppercase;
}
.ag-uc-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: ag-live-pulse 1.8s ease-in-out infinite;
}
@keyframes ag-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

/* Workflow — scroll-drawn progress line */
.ag-steps-wrap {
  position: relative;
  width: 100%;
}
.ag-steps-line {
  position: absolute;
  top: 24px;
  left: 9%;
  right: 9%;
  height: 2px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 2px;
  z-index: 0;
  overflow: hidden;
}
.ag-steps-line-fill {
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, #0a0a0a 70%, var(--orange, #ff7a18));
}
.ag-step-badge {
  position: relative;
  z-index: 1;
}
@media (max-width: 992px) {
  .ag-steps-line {
    display: none;
  }
}
@media (max-width: 992px) {
  .ag-flow-title {
    position: static;
    height: auto;
    margin-bottom: 0;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
    padding: 40px 20px 0;
  }
  .ag-flow-word:first-child,
  .ag-flow-word:last-child {
    position: static;
    right: auto;
    left: auto;
  }
  .ag-flow-cards {
    padding: 48px 20px 24px;
  }
  .ag-flow-card {
    min-height: 280px;
  }
  .ag-flow-card h3 {
    margin-top: 40px;
  }
}

/* Section texture — masked dot grid */
.ag-dots {
  position: relative;
}
.ag-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(
    ellipse 65% 60% at 50% 42%,
    black 25%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 65% 60% at 50% 42%,
    black 25%,
    transparent 72%
  );
  pointer-events: none;
}
.ag-dots .container {
  position: relative;
  z-index: 1;
}

/* Card system — lift, glow, icon inversion */
.ag-card,
.ag-trust-item,
.ag-cred-item,
.key-item,
.ag-faq-item,
.followers-single-item,
.ag-chip {
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    background 0.35s ease;
}
.ag-card:hover,
.ag-trust-item:hover,
.key-item:hover {
  transform: translateY(-5px);
  box-shadow:
    0 22px 44px -20px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.2) !important;
}
.ag-cred-item:hover,
.followers-single-item:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 0, 0, 0.18) !important;
}
.ag-chip:hover {
  border-color: rgba(0, 0, 0, 0.35) !important;
  color: #0a0a0a !important;
  transform: translateY(-2px);
}
.ag-ico {
  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-card:hover .ag-ico,
.ag-trust-item:hover .ag-ico {
  background: #0a0a0a !important;
  color: #ffffff !important;
  transform: scale(1.06) rotate(-4deg);
}
.ag-faq-item:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* FAQ answer — padding handled here since height animates */
.ag-faq-a {
  padding-top: 2px;
}

/* ==================== bento grid (built for agencies) ============ */
/* ==================== Agency OS command center ==================== */
.ag-cc {
  position: relative;
  height: 560vh;
}
.ag-cc-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-cc-stage {
  perspective: 1600px;
  width: min(1400px, 96vw);
  position: relative;
}
.ag-cc-stage::before {
  content: "";
  position: absolute;
  inset: -10% -14%;
  background:
    radial-gradient(
      44% 58% at 50% 40%,
      rgba(255, 122, 24, 0.14),
      transparent 70%
    ),
    radial-gradient(
      36% 48% at 18% 78%,
      rgba(99, 102, 241, 0.08),
      transparent 70%
    );
  filter: blur(34px);
  pointer-events: none;
}
.ag-cc-win {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(88vh, 900px);
  min-height: 600px;
  background: linear-gradient(180deg, #16161b 0%, #0c0c10 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 60px 120px -36px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.ag-cc-light {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(
      620px circle at var(--lx, 60%) var(--ly, 18%),
      rgba(255, 255, 255, 0.07),
      transparent 60%
    ),
    radial-gradient(
      900px circle at var(--lx, 60%) var(--ly, 18%),
      rgba(255, 122, 24, 0.05),
      transparent 70%
    );
}
.ag-cc-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -44px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), transparent);
  filter: blur(17px);
  pointer-events: none;
}
/* chrome bar */
.ag-cc-bar {
  flex: none;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ag-cc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.ag-cc-dot-r {
  background: #fb5f57;
}
.ag-cc-dot-y {
  background: #fdbb2e;
}
.ag-cc-dot-g {
  background: #28c840;
}
.ag-cc-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #c9c9d1;
  letter-spacing: 0.02em;
  padding-left: 88px;
}
.ag-cc-cmdk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #8d8d98;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 3.5px 8px;
  background: rgba(255, 255, 255, 0.03);
}
.ag-cc-count {
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: #8d8d98;
  min-width: 52px;
  text-align: right;
}
/* body: sidebar + main */
.ag-cc-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.ag-cc-side {
  flex: none;
  width: 226px;
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.025);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.ag-cc-side-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
}
.ag-cc-side-avs {
  display: flex;
  flex: none;
}
.ag-cc-side-avs img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #16161b;
  margin-left: -7px;
}
.ag-cc-side-avs img:first-child {
  margin-left: 0;
}
.ag-cc-side-id {
  min-width: 0;
}
.ag-cc-side-id b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #f4f4f5;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-cc-side-id em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: #8d8d98;
}
.ag-cc-side-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5d5d68;
  padding: 0 10px 8px;
}
.ag-cc-navwrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ag-cc-nav-ind {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(calc(var(--ni, 0) * 48px));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ag-cc-nav-ind::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 11px;
  width: 3px;
  height: 22px;
  border-radius: 3px;
  background: var(--orange, #ff7a18);
  box-shadow: 0 0 12px rgba(255, 122, 24, 0.7);
}
.ag-cc-nav {
  position: relative;
  z-index: 1;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  color: #8d8d98;
  cursor: pointer;
  transition: color 0.3s ease;
}
.ag-cc-nav:hover {
  color: #c9c9d1;
}
.ag-cc-nav.is-active {
  color: #f4f4f5;
}
.ag-cc-nav.is-active svg {
  color: var(--orange, #ff7a18);
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, 0.5));
}
.ag-cc-side-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 13px 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8d8d98;
}
.ag-cc-side-foot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  animation: ag-cc-blip 2.2s ease-in-out infinite;
}
@keyframes ag-cc-blip {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(52, 211, 153, 0);
  }
}
/* panels */
.ag-cc-main {
  flex: 1;
  position: relative;
  min-width: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
}
.ag-cc-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  gap: 28px;
  align-items: center;
  padding: 26px 30px;
  will-change: transform, opacity, filter;
}
.ag-cc-copy {
  position: relative;
  min-width: 0;
}
.ag-cc-ghost {
  position: absolute;
  top: -58px;
  left: -10px;
  font-size: 140px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
.ag-cc-step {
  position: relative;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange, #ff7a18);
  letter-spacing: 0.14em;
}
.ag-cc-copy h3 {
  position: relative;
  margin: 10px 0 0;
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, #ffffff 30%, #b9b9c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ag-cc-copy p {
  position: relative;
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: #9b9ba6;
  max-width: 330px;
}
.ag-cc-stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.ag-cc-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #c9c9d1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 5px 12px;
}
.ag-cc-stats span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
}
.ag-cc-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f4f4f5;
  text-decoration: none;
  transition:
    color 0.3s ease,
    gap 0.3s ease;
}
.ag-cc-more svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-cc-more:hover svg {
  transform: translateX(4px);
}
.ag-cc-vis {
  position: relative;
  height: 100%;
  min-height: 0;
}
.ag-cc-demo {
  position: absolute !important;
  inset: 0;
  height: auto !important;
  min-height: 0 !important;
}
/* causal chain strip */
.ag-cc-flow {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ag-cc-flow-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #34d399;
}
.ag-cc-flow-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: ag-cc-blip 2.2s ease-in-out infinite;
}
.ag-cc-flow-track {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ag-cc-flow-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12) 12%,
    rgba(255, 255, 255, 0.12) 88%,
    transparent
  );
}
.ag-cc-flow-pulse {
  position: absolute;
  top: 50%;
  left: 4%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
  filter: drop-shadow(0 0 7px rgba(255, 122, 24, 0.9));
  animation: ag-cc-pulse-run 4.8s linear infinite;
}
@keyframes ag-cc-pulse-run {
  0% {
    left: 4%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: 95%;
    opacity: 0;
  }
}
.ag-cc-chip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8d8d98;
  background: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 5px 11px;
}
.ag-cc-chip svg {
  color: #5d5d68;
  transition: color 0.3s ease;
}
.ag-cc-chip-1 {
  animation: ag-cc-chipglow 4.8s ease infinite 0.1s;
}
.ag-cc-chip-2 {
  animation: ag-cc-chipglow 4.8s ease infinite 1.3s;
}
.ag-cc-chip-3 {
  animation: ag-cc-chipglow 4.8s ease infinite 2.5s;
}
.ag-cc-chip-4 {
  animation: ag-cc-chipglow 4.8s ease infinite 3.7s;
}
@keyframes ag-cc-chipglow {
  0%,
  100% {
    color: #8d8d98;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: none;
  }
  8%,
  18% {
    color: #f4f4f5;
    border-color: rgba(255, 122, 24, 0.6);
    box-shadow:
      0 0 0 3px rgba(255, 122, 24, 0.12),
      0 0 16px rgba(255, 122, 24, 0.18);
  }
}
/* progress rail (sits on the light page, outside the window) */
.ag-cc-rail {
  position: absolute;
  right: max(14px, 2.2vw);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ag-cc-rail-track {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(10, 10, 10, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.ag-cc-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffb066, var(--orange, #ff7a18));
  transform-origin: top;
}
.ag-cc-rail-dot {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4e4e0;
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.ag-cc-rail-dot.is-on {
  background: var(--orange, #ff7a18);
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(255, 122, 24, 0.5);
}
/* ---- dark re-skin of the live vignettes inside the window ---- */
.ag-cc-win .ag-bn-demo {
  background: #121217;
  border-color: rgba(255, 255, 255, 0.06);
}
.ag-cc-win .ag-bn-ws {
  background: #18181e;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ag-cc-win .ag-bn-ws-crumb {
  color: #8d8d98;
}
.ag-cc-win .ag-bn-ws-crumb b {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-ws-head {
  color: #5d5d68;
}
.ag-cc-win .ag-bn-ws-id b {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-ws-id em {
  color: #8d8d98;
}
.ag-cc-win .ag-bn-ws-num {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-ws-note {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.07);
  color: #c9c9d1;
}
.ag-cc-win .ag-bn-ws-note i {
  background: var(--orange, #ff7a18);
}
.ag-cc-win .ag-bn-cursor {
  color: #f4f4f5;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
.ag-cc-win .ag-bn-cursor i {
  background: #2a2a32;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ag-cc-win .ag-bn-cur-3 i {
  background: var(--orange, #ff7a18);
  border-color: transparent;
}
.ag-cc-win .ag-bn-prof {
  background: #1b1b21;
  border-color: rgba(255, 255, 255, 0.08);
}
.ag-cc-win .ag-bn-prof b {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-prof em {
  color: #8d8d98;
}
.ag-cc-win .ag-bn-prof-pill {
  background: rgba(255, 255, 255, 0.07);
}
.ag-cc-win .ag-bn-switch-chip {
  background: #f4f4f5;
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-an-total {
  color: #9b9ba6;
}
.ag-cc-win .ag-bn-an-total b {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-an-area {
  fill: rgba(255, 122, 24, 0.14);
}
.ag-cc-win .ag-bn-an-dot {
  border-color: #121217;
}
.ag-cc-win .ag-bn-an-tip {
  background: #f4f4f5;
}
.ag-cc-win .ag-bn-an-tip span {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-an-x {
  color: #5d5d68;
}
.ag-cc-win .ag-bn-ex-row {
  background: #1b1b21;
  border-color: rgba(255, 255, 255, 0.07);
}
.ag-cc-win .ag-bn-ex-row b {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-ex-row em {
  color: #8d8d98;
}
.ag-cc-win .ag-bn-check-1 {
  animation-name: ag-cc-checkin;
}
.ag-cc-win .ag-bn-check-2 {
  animation-name: ag-cc-checkin;
}
.ag-cc-win .ag-bn-check-3 {
  animation-name: ag-cc-checkin;
}
@keyframes ag-cc-checkin {
  0%,
  4% {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
  }
  10%,
  88% {
    background: var(--orange, #ff7a18);
    border-color: var(--orange, #ff7a18);
  }
  94%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
  }
}
.ag-cc-win .ag-bn-ex-btn {
  background: rgba(255, 255, 255, 0.09);
}
.ag-cc-win .ag-bn-chat-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.ag-cc-win .ag-bn-chat-head b {
  color: #f4f4f5;
}
.ag-cc-win .ag-bn-msg-q {
  background: #1b1b21;
  border-color: rgba(255, 255, 255, 0.08);
  color: #c9c9d1;
}
.ag-cc-win .ag-bn-msg-typing {
  background: rgba(255, 255, 255, 0.08);
}
.ag-cc-win .ag-bn-msg-typing i {
  background: rgba(255, 255, 255, 0.5);
}
.ag-cc-win .ag-bn-org-hub {
  background: #f4f4f5;
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-org-row img {
  border-color: #121217;
}
.ag-cc-win .ag-bn-org-meta {
  color: #f4f4f5;
}
/* ---- detail pass: every surface refined ---- */
.ag-cc-enter {
  will-change: transform, opacity, filter;
}
.ag-cc-dot {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.35);
}
.ag-cc-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-cc-title i {
  font-style: normal;
  margin: 0 8px;
  color: #4a4a54;
  font-weight: 500;
}
.ag-cc-title-seg {
  color: #8d8d98;
  font-weight: 600;
  animation: ag-cc-seg 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ag-cc-seg {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ag-cc-side-avs {
  position: relative;
}
.ag-cc-presence {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #16161b;
}
.ag-cc-nav {
  gap: 9px;
  padding: 0 10px;
}
.ag-cc-nav-ico {
  width: 25px;
  height: 25px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}
.ag-cc-nav.is-active .ag-cc-nav-ico {
  background: rgba(255, 122, 24, 0.14);
  border-color: rgba(255, 122, 24, 0.35);
}
.ag-cc-nav kbd {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  color: #5d5d68;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 1.5px 5.5px;
  line-height: 1.3;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.ag-cc-nav.is-active kbd {
  color: #c9c9d1;
  border-color: rgba(255, 122, 24, 0.4);
}
.ag-cc-side-foot em {
  font-style: normal;
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  color: #4a4a54;
}
/* gradient hairline frame around each vignette */
.ag-cc-vis::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    rgba(255, 122, 24, 0.35),
    rgba(255, 255, 255, 0.12) 35%,
    rgba(255, 255, 255, 0.04) 70%,
    rgba(255, 122, 24, 0.12)
  );
  pointer-events: none;
}
.ag-cc-demo {
  z-index: 1;
}
/* stat chips respond to touch */
.ag-cc-stats span {
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}
.ag-cc-stats span:hover {
  border-color: rgba(255, 122, 24, 0.4);
  color: #f4f4f5;
  transform: translateY(-1px);
}
/* explore link: underline grows, arrow slides */
.ag-cc-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: calc(100% - 19px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-cc-more:hover::after {
  transform: scaleX(1);
}
/* film grain + edge vignette inside the window */
.ag-cc-grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.ag-cc-vig {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    125% 125% at 50% 38%,
    transparent 62%,
    rgba(0, 0, 0, 0.3) 100%
  );
}
/* causal pulse leaves a comet tail; chip icons ignite */
.ag-cc-flow-pulse::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 52px;
  height: 1.5px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 24, 0.55));
}
.ag-cc-chip-1 svg {
  animation: ag-cc-chipico 4.8s ease infinite 0.1s;
}
.ag-cc-chip-2 svg {
  animation: ag-cc-chipico 4.8s ease infinite 1.3s;
}
.ag-cc-chip-3 svg {
  animation: ag-cc-chipico 4.8s ease infinite 2.5s;
}
.ag-cc-chip-4 svg {
  animation: ag-cc-chipico 4.8s ease infinite 3.7s;
}
@keyframes ag-cc-chipico {
  0%,
  100% {
    color: #5d5d68;
  }
  8%,
  18% {
    color: var(--orange, #ff7a18);
  }
}
.ag-cc-flow-meta {
  flex: none;
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: #5d5d68;
}
/* rail: vertical label names the current step */
.ag-cc-rail-label {
  position: absolute;
  right: calc(100% + 11px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b6b6bd;
  white-space: nowrap;
  animation: ag-cc-seg 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- level-up pass: palette, physics, cascades, reflection ---- */
.ag-cc-cmdk {
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background 0.3s ease;
}
.ag-cc-cmdk:hover {
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
/* copy cascade on step change */
.ag-cc-copy.is-live > * {
  opacity: 0;
  animation: ag-cc-cascade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ag-cc-copy.is-live > *:nth-child(2) {
  animation-delay: 0.06s;
}
.ag-cc-copy.is-live > *:nth-child(3) {
  animation-delay: 0.13s;
}
.ag-cc-copy.is-live > *:nth-child(4) {
  animation-delay: 0.2s;
}
.ag-cc-copy.is-live > *:nth-child(5) {
  animation-delay: 0.27s;
}
.ag-cc-copy.is-live > *:nth-child(6) {
  animation-delay: 0.34s;
}
@keyframes ag-cc-cascade {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* sheen sweeps the vignette when its panel activates */
.ag-cc-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 135% 0;
  background-repeat: no-repeat;
  animation: ag-cc-vsweep 1.1s ease-out 0.3s both;
}
@keyframes ag-cc-vsweep {
  from {
    background-position: 135% 0;
  }
  to {
    background-position: -130% 0;
  }
}
/* command palette */
.ag-cc-pal-back {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: rgba(7, 7, 10, 0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: ag-cc-fade 0.25s ease both;
}
@keyframes ag-cc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ag-cc-pal {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  width: min(430px, 88%);
  background: rgba(22, 22, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: ag-cc-pal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ag-cc-pal-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.ag-cc-pal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #8d8d98;
}
.ag-cc-pal-head input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #f4f4f5;
  caret-color: var(--orange, #ff7a18);
}
.ag-cc-pal-head input::placeholder {
  color: #5d5d68;
}
.ag-cc-pal kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  color: #8d8d98;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 1.5px 5.5px;
}
.ag-cc-pal-list {
  padding: 6px;
  max-height: 250px;
  overflow-y: auto;
}
.ag-cc-pal-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8d8d98;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.ag-cc-pal-item b {
  font-size: 12.5px;
  font-weight: 700;
  color: #c9c9d1;
}
.ag-cc-pal-item em {
  font-style: normal;
  font-size: 10.5px;
  color: #5d5d68;
  margin-left: auto;
  padding-right: 8px;
}
.ag-cc-pal-item.is-sel {
  background: rgba(255, 255, 255, 0.06);
}
.ag-cc-pal-item.is-sel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2.5px;
  border-radius: 3px;
  background: var(--orange, #ff7a18);
}
.ag-cc-pal-item.is-sel b {
  color: #f4f4f5;
}
.ag-cc-pal-item.is-sel svg {
  color: var(--orange, #ff7a18);
}
.ag-cc-pal-empty {
  display: block;
  padding: 18px;
  text-align: center;
  font-size: 12px;
  color: #5d5d68;
}
.ag-cc-pal-foot {
  display: flex;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  color: #5d5d68;
}
.ag-cc-pal-foot span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---- live link.me profiles inside the switcher cards ---- */
.ag-cc-prof-head {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 10px;
}
.ag-cc-prof-head img {
  width: 26px !important;
  height: 26px !important;
}
.ag-cc-prof-id {
  min-width: 0;
  text-align: left;
}
.ag-cc-prof-id b {
  display: block;
  margin: 0 !important;
  font-size: 11.5px;
  line-height: 1.25;
}
.ag-cc-prof-id em {
  display: block;
  font-size: 9.5px;
}
.ag-cc-prof-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 20px;
  padding: 2px 7px;
}
.ag-cc-prof-live u {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: ag-cc-blip 2.2s ease-in-out infinite;
}
.ag-cc-win .ag-cc-prof-live {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
}
.ag-cc-win .ag-cc-prof-live u {
  background: #34d399;
}
.ag-cc-prof-frame {
  flex: 1;
  align-self: stretch;
  position: relative;
  margin: 0 10px 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.ag-cc-win .ag-cc-prof-frame {
  background: #0e0e12;
  border-color: rgba(255, 255, 255, 0.08);
}
.ag-cc-prof-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 139%;
  height: 139%;
  border: 0;
  transform: scale(0.72);
  transform-origin: 0 0;
  pointer-events: none;
}
/* true phone frames for the live profile cards inside the OS */
.ag-cc-win .ag-bn-prof {
  inset: 12px auto;
  border-radius: 44px;
  left: 50%;
  width: 336px;
  margin-left: -168px;
  padding: 10px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 38px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.ag-cc-win .ag-cc-prof-frame {
  margin: 0;
  border-radius: 30px;
  border-color: rgba(255, 255, 255, 0.08);
}
.ag-cc-win .ag-cc-prof-frame iframe {
  width: 137%;
  height: 137%;
  transform: scale(0.73);
}

/* ==================== Problem: chaos obeys gravity ==================== */
.ag-pg {
  position: relative;
  height: 260vh;
}
.ag-pg-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 9vh;
}
.ag-pg-head {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 0 20px;
}
.ag-pg-h2 {
  text-align: center;
}
.ag-pg-word {
  display: inline-block;
  white-space: nowrap;
}
.ag-pg-letter {
  display: inline-block;
  will-change: transform;
}
.ag-pg-field {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.ag-pg-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
}
.ag-pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-left: -104px;
  margin-top: -31px;
  background: linear-gradient(180deg, #ffffff, #fafafb);
  border: 1px solid rgba(15, 17, 26, 0.06);
  border-radius: 16px;
  padding: 11px 22px 11px 11px;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(17, 17, 20, 0.05),
    0 6px 14px -8px rgba(17, 17, 20, 0.12),
    0 20px 40px -22px rgba(17, 17, 20, 0.28);
  will-change: transform, opacity;
  transition:
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}
.ag-pg-chip:hover {
  border-color: rgba(15, 17, 26, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(17, 17, 20, 0.06),
    0 10px 20px -10px rgba(17, 17, 20, 0.18),
    0 28px 56px -24px rgba(17, 17, 20, 0.34);
}
.ag-pg-chip-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 5px 12px -5px currentColor;
}
.ag-pg-chip-txt {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.ag-pg-chip-txt b {
  font-size: 14.5px;
  font-weight: 750;
  color: #0a0a0a;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ag-pg-chip-txt em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: #a0a0a8;
  margin-top: 1px;
}
.ag-pg-hubwrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.ag-pg-halo {
  position: absolute;
  inset: -64px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 122, 24, 0.2),
    transparent
  );
  filter: blur(14px);
  pointer-events: none;
}
.ag-pg-hub {
  position: relative;
  width: min(480px, 92vw);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  padding: 22px 22px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 44px 90px -28px rgba(0, 0, 0, 0.32);
}
.ag-pg-hub-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ag-pg-appicon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--orange, #ff7a18), #ff9d4d);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(255, 122, 24, 0.55);
  flex: none;
}
.ag-pg-hub-id {
  min-width: 0;
}
.ag-pg-hub-id b {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.2;
}
.ag-pg-hub-id em {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #9b9ba3;
}
.ag-pg-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 20px;
  padding: 3.5px 10px;
}
.ag-pg-live u {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: ag-live-pulse 1.8s ease-in-out infinite;
}
.ag-pg-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: none;
}
.ag-pg-roster {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 11px 14px;
  background: #f6f6f4;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 15px;
}
.ag-pg-avs {
  display: flex;
  align-items: center;
}
.ag-pg-avs img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffffff;
  margin-left: -9px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}
.ag-pg-avs img:first-child {
  margin-left: 0;
}
.ag-pg-avs b {
  margin-left: -7px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #ffffff;
}
.ag-pg-roster em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #5f5f66;
}
.ag-pg-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.ag-pg-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 15px;
  padding: 12px 6px 10px;
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.07);
}
.ag-pg-m i {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.ag-pg-m em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b6b6bd;
}
.ag-pg-m-blue span {
  color: #3b82f6;
}
.ag-pg-m-blue i {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.ag-pg-m-green span {
  color: #16a34a;
}
.ag-pg-m-green i {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.ag-pg-m-orange span {
  color: var(--orange, #ff7a18);
}
.ag-pg-m-orange i {
  background: rgba(255, 122, 24, 0.12);
  color: var(--orange, #ff7a18);
}
.ag-pg-chart {
  margin-top: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 15px;
  padding: 14px 14px 10px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.07);
}
.ag-pg-bars {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 72px;
}
.ag-pg-bar {
  flex: 1;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #d9d9de, #ececef);
  display: block;
}
.ag-pg-bar:nth-child(6) {
  background: linear-gradient(180deg, var(--orange, #ff7a18), #ffb066);
  box-shadow: 0 6px 14px -4px rgba(255, 122, 24, 0.5);
}
.ag-pg-days {
  display: flex;
  gap: 9px;
  margin-top: 7px;
}
.ag-pg-days span {
  flex: 1;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #c2c2c8;
  letter-spacing: 0.06em;
}
/* static / mobile composition */
.ag-pg-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-bottom: 64px;
}
.ag-pg-static-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  padding: 0 16px;
}
.ag-pg-static-chips .ag-pg-chip {
  margin: 0;
}
.ag-pg-static .ag-pg-hubwrap {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.ag-pg-static .ag-pg-halo {
  opacity: 1;
}
.ag-pg-static .ag-pg-check {
  transform: none !important;
}

/* ==================== Claim your handle ==================== */
.ag-ch-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px 32px 92px;
  border-radius: 30px;
  background:
    radial-gradient(
      70% 110% at 18% 0%,
      rgba(255, 255, 255, 0.16),
      transparent 55%
    ),
    radial-gradient(
      80% 120% at 88% 110%,
      rgba(64, 8, 36, 0.45),
      transparent 60%
    ),
    linear-gradient(
      118deg,
      #ff3a5e 0%,
      #ff4f43 30%,
      #ff7a1e 55%,
      #ff3a5e 80%,
      #ff9d3f 100%
    );
  background-size:
    160% 160%,
    160% 160%,
    240% 240%;
  background-position:
    0% 0%,
    100% 100%,
    0% 50%;
  animation: ag-ch-grad 13s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 50px 110px -40px rgba(255, 62, 80, 0.45);
  overflow: hidden;
}
.ag-ch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ag-ch-eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
.ag-ch-title {
  margin: 18px 0 0;
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(64, 8, 36, 0.25);
}
.ag-ch-sub {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.ag-ch-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  width: min(560px, 100%);
  background: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  padding: 7px 7px 7px 20px;
  height: 68px;
  cursor: text;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 18px 44px -18px rgba(64, 8, 36, 0.5);
}
.ag-ch-field:focus-within {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.35),
    0 22px 50px -18px rgba(64, 8, 36, 0.55);
  transform: translateY(-1px);
}
.ag-ch-prefix {
  font-size: 18px;
  font-weight: 700;
  color: #9b9ba3;
  flex: none;
}
.ag-ch-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: #0a0a0a;
  caret-color: #ff4f43;
}
.ag-ch-field input::placeholder {
  color: #c9c9d1;
}
.ag-ch-caret {
  width: 2px;
  height: 22px;
  background: #ff4f43;
  margin-left: -2px;
  animation: ag-ch-blink 1s steps(1) infinite;
}
@keyframes ag-ch-blink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
  }
}
.ag-ch-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border-radius: 13px;
  background: #0a0a0a;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.ag-ch-btn:hover {
  background: #1d1d22;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}
.ag-ch-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-ch-btn:hover svg {
  transform: translateX(3px);
}
.ag-ch-avail {
  min-height: 26px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
}
.ag-ch-hint {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
.ag-ch-checking {
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ag-ch-checking i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation: ag-bn-blink 1s ease-in-out infinite;
}
.ag-ch-checking i:nth-child(2) {
  animation-delay: 0.18s;
}
.ag-ch-checking i:nth-child(3) {
  animation-delay: 0.36s;
  margin-right: 6px;
}
.ag-ch-free {
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ag-ch-free b {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #16a34a;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.ag-ch-taken {
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ag-ch-taken b {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #dc2626;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
@media (max-width: 768px) {
  .ag-ch-panel {
    padding: 64px 18px 68px;
    border-radius: 24px;
  }
  .ag-ch-field {
    height: auto;
    flex-wrap: wrap;
    padding: 14px 16px;
    justify-content: center;
  }
  .ag-ch-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* ---- v100 pass: aurora, app chrome, table v2, lists, usage ---- */
.ag-cc-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      34% 42% at 24% 30%,
      rgba(255, 122, 24, 0.07),
      transparent 70%
    ),
    radial-gradient(
      30% 38% at 78% 72%,
      rgba(99, 102, 241, 0.06),
      transparent 70%
    );
  filter: blur(40px);
  animation: ag-cc-aurora 26s ease-in-out infinite alternate;
}
@keyframes ag-cc-aurora {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(3%, 2%, 0) rotate(6deg);
  }
}
.ag-cc-bar,
.ag-cc-body,
.ag-cc-flow {
  position: relative;
  z-index: 1;
}
/* app-in-app chrome strip on every demo */
.ag-cc-app-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}
.ag-cc-app-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.ag-cc-app-bar b {
  margin-left: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #8d8d98;
  letter-spacing: 0.04em;
}
.ag-cc-card .ag-cc-app-bar {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.025);
}
.ag-cc-card .ag-cc-app-bar i {
  background: rgba(0, 0, 0, 0.12);
}
.ag-cc-card .ag-cc-app-bar b {
  color: #9b9ba3;
}
/* vignettes drop below the chrome strip */
.ag-cc-demo .ag-bn-ws {
  inset: 50px 14px 14px;
}
.ag-cc-demo .ag-bn-prof {
  top: 52px;
}
.ag-cc-demo .ag-bn-an {
  inset: 52px 16px 16px;
}
.ag-cc-demo .ag-bn-ex {
  inset: 52px 16px 16px;
}
.ag-cc-demo .ag-bn-chat {
  inset: 52px 16px 16px;
}
.ag-cc-demo .ag-bn-org {
  top: 36px;
}
/* table v2: bigger type, revenue column, dark-tuned row flash */
.ag-bn-ws-rev {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  font-variant-numeric: tabular-nums;
}
.ag-cc-win .ag-bn-ws-rev {
  color: #34d399;
  font-size: 12px;
}
.ag-cc-win .ag-bn-ws-row {
  padding: 9px 8px;
}
.ag-cc-win .ag-bn-ws-row img {
  width: 28px;
  height: 28px;
}
.ag-cc-win .ag-bn-ws-id b {
  font-size: 13px;
}
.ag-cc-win .ag-bn-ws-id em {
  font-size: 10.5px;
}
.ag-cc-win .ag-bn-ws-num {
  font-size: 12.5px;
}
.ag-cc-win .ag-bn-ws-status {
  font-size: 10px;
}
.ag-cc-win .ag-bn-ws-head {
  font-size: 9.5px;
}
.ag-cc-win [class*="ag-bn-flash-"] {
  animation-name: ag-cc-flashdark;
}
@keyframes ag-cc-flashdark {
  0%,
  100% {
    background: transparent;
  }
  50% {
    background: rgba(255, 122, 24, 0.06);
  }
}
/* feature checklist under the stats */
.ag-cc-list {
  position: relative;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ag-cc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #c9c9d1;
}
.ag-cc-list li i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 122, 24, 0.14);
  color: var(--orange, #ff7a18);
}
.ag-cc-card .ag-cc-list {
  display: none;
}
/* sidebar seats usage meter */
.ag-cc-usage {
  margin-top: auto;
  padding: 12px 13px 0;
}
.ag-cc-usage span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ag-cc-usage b {
  font-size: 10.5px;
  font-weight: 800;
  color: #8d8d98;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ag-cc-usage em {
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: #c9c9d1;
}
.ag-cc-usage-bar {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ag-cc-usage-bar u {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--orange, #ff7a18), #ffb066);
  box-shadow: 0 0 10px rgba(255, 122, 24, 0.5);
}
.ag-cc-side-foot {
  margin-top: 0;
}

/* ---- reimagined OS: frosted titanium + timeline + window manager ---- */
.ag-cc-win {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 33, 0.93) 0%,
    rgba(12, 12, 16, 0.97) 100%
  );
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
}
.ag-cc-bar {
  background: rgba(255, 255, 255, 0.035);
}
.ag-cc-side {
  background: rgba(255, 255, 255, 0.028);
}
/* editorial timeline (sidebar) */
.ag-cc-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ag-cc-tl-line {
  position: absolute;
  left: 20px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ag-cc-tl-line u {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #ffb066, var(--orange, #ff7a18));
  transform-origin: top;
}
.ag-cc-tl-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 48px;
  padding: 0 9px 0 8px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #8d8d98;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s ease;
}
.ag-cc-tl-item:hover {
  color: #c9c9d1;
}
.ag-cc-tl-node {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #17171c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #8d8d98;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}
.ag-cc-tl-node em {
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
}
.ag-cc-tl-item.is-done .ag-cc-tl-node {
  background: rgba(255, 122, 24, 0.16);
  border-color: rgba(255, 122, 24, 0.5);
  color: var(--orange, #ff7a18);
}
.ag-cc-tl-item.is-now {
  color: #f4f4f5;
}
.ag-cc-tl-item.is-now .ag-cc-tl-node {
  background: var(--orange, #ff7a18);
  border-color: var(--orange, #ff7a18);
  color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(255, 122, 24, 0.18),
    0 0 14px rgba(255, 122, 24, 0.5);
}
.ag-cc-tl-item kbd {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  color: #5d5d68;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 1.5px 5.5px;
  line-height: 1.3;
}
.ag-cc-tl-item.is-now kbd {
  color: #c9c9d1;
  border-color: rgba(255, 122, 24, 0.4);
}
/* window-manager canvas */
.ag-cc-winlet {
  position: absolute;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 44px -18px rgba(0, 0, 0, 0.55);
  will-change: left, top, width, height;
}
.ag-cc-winlet.is-active {
  z-index: 2;
  cursor: default;
}
.ag-cc-winlet .ag-cc-demo {
  border-radius: 18px;
}
.ag-cc-winlet-cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 18px;
  background: rgba(20, 20, 27, 0.88);
  backdrop-filter: blur(8px);
  color: #8d8d98;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.ag-cc-winlet:hover .ag-cc-winlet-cover {
  background: rgba(30, 30, 39, 0.92);
  color: var(--orange, #ff7a18);
}
.ag-cc-winlet-cover b {
  font-size: 10px;
  font-weight: 700;
  color: #c9c9d1;
  white-space: nowrap;
}
.ag-cc-winlet-cover kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px;
  color: #5d5d68;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.5px 4px;
}
.ag-cc-dockbar {
  position: absolute;
  left: 13.2%;
  right: 13.2%;
  top: 80.5%;
  height: 17%;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* cinematic frosted caption */
.ag-cc-caption {
  position: absolute;
  z-index: 4;
  left: 4.5%;
  bottom: 25.5%;
  width: min(360px, 46%);
  background: rgba(13, 13, 18, 0.6);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 18px 20px 19px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 28px 64px -24px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.ag-cc-caption h3 {
  font-size: 21px;
}
.ag-cc-caption p {
  font-size: 13px;
  line-height: 1.55;
  margin-top: 8px;
}
.ag-cc-caption .ag-cc-stats {
  margin-top: 12px;
  gap: 6px;
}
.ag-cc-caption .ag-cc-stats span {
  font-size: 10px;
  padding: 4px 10px;
}
.ag-cc-caption .ag-cc-more {
  margin-top: 13px;
  font-size: 12px;
  pointer-events: auto;
}

/* ---- stable app switcher + product-true screens ---- */
.ag-cc-main {
  display: flex;
  flex-direction: column;
}
.ag-cc-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
}
.ag-cc-screenwrap {
  position: absolute;
  inset: 12px 14px;
  will-change: transform, opacity, filter;
}
.ag-cc-dock {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px 12px;
}
.ag-cc-dock-tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #8d8d98;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.ag-cc-dock-tile:hover {
  color: #c9c9d1;
  background: rgba(255, 255, 255, 0.05);
}
.ag-cc-dock-tile.is-on {
  color: #f4f4f5;
  border-color: rgba(255, 122, 24, 0.5);
  background: rgba(255, 122, 24, 0.1);
  box-shadow: 0 0 14px rgba(255, 122, 24, 0.18);
}
.ag-cc-dock-tile.is-on svg {
  color: var(--orange, #ff7a18);
}
.ag-cc-dock-tile kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px;
  color: #5d5d68;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.5px 4.5px;
}
/* ---- product replica primitives ---- */
.ag-os-screen {
  position: absolute;
  inset: 50px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 0;
}
.ag-os-crumb {
  font-size: 11px;
  color: #8d8d98;
}
.ag-os-crumb b {
  color: #f4f4f5;
  font-weight: 700;
}
.ag-os-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ag-os-id b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #f4f4f5;
  line-height: 1.2;
}
.ag-os-id em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #8d8d98;
}
.ag-os-call {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: #c9c9d1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 13px;
  white-space: nowrap;
}
.ag-os-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.ag-os-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  padding: 10px 13px;
}
.ag-os-stat em {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8d8d98;
}
.ag-os-stat b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: #f4f4f5;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.ag-os-stat i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: #5d5d68;
  font-weight: 600;
}
.ag-os-stat-purple b {
  color: #a78bfa;
}
.ag-os-stat-green b {
  color: #34d399;
}
.ag-os-stat-yellow b {
  color: #fbbf24;
}
.ag-os-table {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 6px 8px;
}
.ag-os-more {
  padding: 7px 8px 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #8d8d98;
  text-align: center;
}
.ag-os-screen .ag-bn-ws-note {
  margin-top: auto;
}
/* analytics replica */
.ag-os-anhead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ag-os-anhead b {
  font-size: 18px;
  font-weight: 800;
  color: #f4f4f5;
}
.ag-os-anhead em {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #c9c9d1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 5px 12px;
}
.ag-os-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 20px;
  padding: 2.5px 8px;
}
.ag-os-live u {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  animation: ag-cc-blip 2.2s ease-in-out infinite;
}
.ag-os-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.ag-os-metric {
  border-radius: 13px;
  padding: 11px 13px;
  border: 1px solid;
}
.ag-os-metric em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: #c9c9d1;
}
.ag-os-metric b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #f4f4f5;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.ag-os-metric i {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
}
.ag-os-m-purple {
  background: rgba(167, 139, 250, 0.09);
  border-color: rgba(167, 139, 250, 0.25);
}
.ag-os-m-purple i {
  color: #a78bfa;
}
.ag-os-m-pink {
  background: rgba(244, 114, 182, 0.09);
  border-color: rgba(244, 114, 182, 0.25);
}
.ag-os-m-pink i {
  color: #f472b6;
}
.ag-os-m-blue {
  background: rgba(96, 165, 250, 0.09);
  border-color: rgba(96, 165, 250, 0.25);
}
.ag-os-m-blue i {
  color: #60a5fa;
}
.ag-os-m-green {
  background: rgba(52, 211, 153, 0.09);
  border-color: rgba(52, 211, 153, 0.25);
}
.ag-os-m-green i {
  color: #34d399;
}
.ag-os-rt {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
}
.ag-os-rt-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ag-os-rt-head b {
  font-size: 12.5px;
  font-weight: 800;
  color: #f4f4f5;
}
.ag-os-rt-head em {
  font-style: normal;
  font-size: 10px;
  color: #8d8d98;
  margin-right: auto;
}
.ag-os-rt-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.ag-os-rt-row span {
  display: block;
}
.ag-os-rt-row em {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: #8d8d98;
  font-weight: 700;
}
.ag-os-rt-row b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #f4f4f5;
  font-variant-numeric: tabular-nums;
}
.ag-os-rt-row i {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  color: #34d399;
  font-weight: 700;
}
.ag-os-rt-chart {
  position: relative;
  flex: 1;
  min-height: 44px;
}
.ag-os-rt-chart svg {
  position: absolute;
  inset: 0 0 16px;
  width: 100%;
  height: calc(100% - 16px);
}
.ag-os-line-a,
.ag-os-line-b {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 800;
  animation: ag-os-draw 9s ease-in-out infinite;
}
.ag-os-grid {
  stroke: #e5e7eb;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
@keyframes ag-os-draw {
  0% {
    stroke-dashoffset: 800;
  }
  28%,
  94% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.ag-os-legend {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 14px;
}
.ag-os-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #8d8d98;
}
.ag-os-dot-a,
.ag-os-dot-b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ag-os-dot-a {
  background: #a78bfa;
}
.ag-os-dot-b {
  background: #f472b6;
}
/* dashboard table rows inherit dark styles; tighten inside replica */
.ag-os-table .ag-bn-ws-row {
  padding: 7px 8px;
}

/* status bar between canvas and dock */
.ag-cc-info {
  flex: none;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 20px 0;
  min-width: 0;
}
.ag-cc-info .ag-cc-step {
  flex: none;
  background: rgba(255, 122, 24, 0.12);
  border: 1px solid rgba(255, 122, 24, 0.35);
  border-radius: 7px;
  padding: 2.5px 7px;
  font-size: 10px;
}
.ag-cc-info-title {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: #f4f4f5;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ag-cc-info-desc {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #9b9ba6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-cc-info .ag-cc-stats {
  flex: none;
  margin: 0;
  gap: 6px;
  flex-wrap: nowrap;
}
.ag-cc-info .ag-cc-stats span {
  font-size: 10px;
  padding: 3.5px 10px;
  white-space: nowrap;
}
.ag-cc-info .ag-cc-more {
  flex: none;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 1240px) {
  .ag-cc-info .ag-cc-stats span:nth-child(2) {
    display: none;
  }
}

/* profile side panels — cycle in sync with the phone */
.ag-cc-pside {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 224px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  z-index: 2;
}
.ag-cc-pside-l {
  left: max(5%, 26px);
}
.ag-cc-pside-r {
  right: max(5%, 26px);
}
.ag-cc-cyc-1 {
  animation: ag-cc-sidecycle 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ag-cc-cyc-2 {
  animation: ag-cc-sidecycle 9s cubic-bezier(0.16, 1, 0.3, 1) 3s infinite;
}
.ag-cc-cyc-3 {
  animation: ag-cc-sidecycle 9s cubic-bezier(0.16, 1, 0.3, 1) 6s infinite;
}
@keyframes ag-cc-sidecycle {
  0%,
  27% {
    opacity: 1;
    transform: translateY(-50%);
  }
  33%,
  94% {
    opacity: 0;
    transform: translateY(calc(-50% + 10px));
  }
  95% {
    opacity: 0;
    transform: translateY(calc(-50% - 10px));
  }
  100% {
    opacity: 1;
    transform: translateY(-50%);
  }
}
.ag-cc-pcard {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ag-cc-pcard em {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8d98;
}
.ag-cc-pcard > b {
  display: block;
  margin-top: 3px;
  font-size: 22px;
  font-weight: 800;
  color: #f4f4f5;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ag-cc-pcard > i {
  display: block;
  font-style: normal;
  margin-top: 6px;
  font-size: 10px;
  color: #8d8d98;
  font-weight: 600;
}
.ag-cc-pwho {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ag-cc-pwho img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.ag-cc-pwho b {
  font-size: 13.5px;
  font-weight: 800;
  color: #f4f4f5;
}
.ag-cc-purl {
  display: block;
  margin: 6px 0 0 37px;
  font-style: normal;
  font-size: 10.5px;
  color: #8d8d98;
  font-weight: 600;
}
.ag-cc-psoc {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.ag-cc-psoc u {
  text-decoration: none;
  font-size: 8.5px;
  font-weight: 800;
  color: #c9c9d1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 2.5px 7px;
}
.ag-cc-pspark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 9px;
}
.ag-cc-pspark path {
  fill: none;
  stroke: var(--orange, #ff7a18);
  stroke-width: 2;
  stroke-linecap: round;
}
.ag-cc-ptoggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 800;
  color: #34d399;
}
.ag-cc-ptoggle u {
  width: 34px;
  height: 19px;
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.25);
  border: 1px solid rgba(52, 211, 153, 0.5);
  position: relative;
}
.ag-cc-ptoggle u::after {
  content: "";
  position: absolute;
  right: 2.5px;
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #34d399;
}
.ag-cc-prev {
  color: var(--orange, #ff7a18) !important;
}
.ag-cc-pbars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 30px;
  margin-top: 9px;
}
.ag-cc-pbars u {
  flex: 1;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    var(--orange, #ff7a18),
    rgba(255, 122, 24, 0.4)
  );
}
.ag-cc-pteam {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.ag-cc-pteam img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #16161b;
  margin-left: -7px;
}
.ag-cc-pteam img:first-child {
  margin-left: 0;
}
.ag-cc-pteam b {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #c9c9d1;
}
@media (max-width: 1150px) {
  .ag-cc-pside {
    display: none;
  }
}

/* ==================== Agency OS: white theme ==================== */
.ag-cc-win {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(250, 250, 249, 0.99) 100%
  );
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 5px rgba(0, 0, 0, 0.06),
    0 60px 120px -36px rgba(0, 0, 0, 0.25);
}
.ag-cc-light {
  background: radial-gradient(
    620px circle at var(--lx, 60%) var(--ly, 18%),
    rgba(255, 122, 24, 0.05),
    transparent 62%
  );
}
.ag-cc-vig {
  background: none;
}
.ag-cc-grain {
  opacity: 0.028;
}
.ag-cc-aurora {
  background:
    radial-gradient(
      34% 42% at 24% 30%,
      rgba(255, 122, 24, 0.06),
      transparent 70%
    ),
    radial-gradient(
      30% 38% at 78% 72%,
      rgba(99, 102, 241, 0.05),
      transparent 70%
    );
}
.ag-cc-shadow {
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.2), transparent);
}
/* chrome */
.ag-cc-bar {
  background: rgba(0, 0, 0, 0.024);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.ag-cc-title {
  color: #3c3c43;
}
.ag-cc-title i {
  color: #c2c2c8;
}
.ag-cc-title-seg {
  color: #9b9ba3;
}
.ag-cc-cmdk {
  color: #5f5f66;
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.02);
}
.ag-cc-cmdk:hover {
  color: #0a0a0a;
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.04);
}
.ag-cc-count {
  color: #9b9ba3;
}
/* sidebar + timeline */
.ag-cc-side {
  background: rgba(0, 0, 0, 0.018);
  border-right-color: rgba(0, 0, 0, 0.07);
}
.ag-cc-side-head {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.ag-cc-side-avs img {
  border-color: #ffffff;
}
.ag-cc-presence {
  border-color: #ffffff;
}
.ag-cc-side-id b {
  color: #0a0a0a;
}
.ag-cc-side-id em {
  color: #9b9ba3;
}
.ag-cc-side-label {
  color: #b6b6bd;
}
.ag-cc-tl-line {
  background: rgba(0, 0, 0, 0.09);
}
.ag-cc-tl-item {
  color: #84848c;
}
.ag-cc-tl-item:hover {
  color: #3c3c43;
}
.ag-cc-tl-item.is-now {
  color: #0a0a0a;
}
.ag-cc-tl-node {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  color: #9b9ba3;
}
.ag-cc-tl-item.is-done .ag-cc-tl-node {
  background: rgba(255, 122, 24, 0.12);
  border-color: rgba(255, 122, 24, 0.5);
  color: var(--orange, #ff7a18);
}
.ag-cc-tl-item.is-now .ag-cc-tl-node {
  background: var(--orange, #ff7a18);
  border-color: var(--orange, #ff7a18);
  color: #fff;
}
.ag-cc-tl-item kbd {
  color: #9b9ba3;
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}
.ag-cc-tl-item.is-now kbd {
  color: #3c3c43;
}
.ag-cc-usage b {
  color: #9b9ba3;
}
.ag-cc-usage em {
  color: #5f5f66;
}
.ag-cc-usage-bar {
  background: rgba(0, 0, 0, 0.08);
}
.ag-cc-side-foot {
  color: #9b9ba3;
}
.ag-cc-side-foot em {
  color: #c2c2c8;
}
/* canvas + app chrome */
.ag-cc-main {
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}
.ag-cc-app-bar {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}
.ag-cc-app-bar i {
  background: rgba(0, 0, 0, 0.12);
}
.ag-cc-app-bar b {
  color: #9b9ba3;
}
.ag-cc-win .ag-bn-demo {
  background: #f7f7f8;
  border-color: rgba(0, 0, 0, 0.05);
}
/* vignettes back to light */
.ag-cc-win .ag-bn-ws {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: none;
}
.ag-cc-win .ag-bn-ws-crumb {
  color: #9b9ba3;
}
.ag-cc-win .ag-bn-ws-crumb b {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-ws-head {
  color: #b6b6bd;
}
.ag-cc-win .ag-bn-ws-id b {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-ws-id em {
  color: #9b9ba3;
}
.ag-cc-win .ag-bn-ws-num {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-ws-rev {
  color: #16a34a;
}
.ag-cc-win [class*="ag-bn-flash-"] {
  animation-name: ag-bn-flash;
}
.ag-cc-win .ag-bn-ws-note {
  background: #f7f7f8;
  border-color: rgba(0, 0, 0, 0.06);
  color: #3a3a40;
}
.ag-cc-win .ag-bn-cursor {
  color: #0a0a0a;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.ag-cc-win .ag-bn-cursor i {
  background: #0a0a0a;
  border: 0;
}
.ag-cc-win .ag-bn-cur-3 {
  color: var(--orange, #ff7a18);
}
.ag-cc-win .ag-bn-cur-3 i {
  background: var(--orange, #ff7a18);
}
.ag-cc-win .ag-bn-an-total {
  color: #5f5f66;
}
.ag-cc-win .ag-bn-an-total b {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-an-dot {
  border-color: #ffffff;
}
.ag-cc-win .ag-bn-an-tip {
  background: #0a0a0a;
}
.ag-cc-win .ag-bn-an-tip span {
  color: #ffffff;
}
.ag-cc-win .ag-bn-an-x {
  color: #b6b6bd;
}
.ag-cc-win .ag-bn-ex-row {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
}
.ag-cc-win .ag-bn-ex-row b {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-ex-row em {
  color: #9b9ba3;
}
.ag-cc-win .ag-bn-check-1,
.ag-cc-win .ag-bn-check-2,
.ag-cc-win .ag-bn-check-3 {
  animation-name: ag-bn-checkin;
}
.ag-cc-win .ag-bn-ex-btn {
  background: #0a0a0a;
}
.ag-cc-win .ag-bn-chat-head {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.ag-cc-win .ag-bn-chat-head b {
  color: #0a0a0a;
}
.ag-cc-win .ag-bn-msg-q {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #3a3a40;
}
.ag-cc-win .ag-bn-msg-typing {
  background: rgba(0, 0, 0, 0.06);
}
.ag-cc-win .ag-bn-msg-typing i {
  background: rgba(0, 0, 0, 0.4);
}
.ag-cc-win .ag-bn-msg-a {
  background: var(--orange, #ff7a18);
  color: #ffffff;
}
.ag-cc-win .ag-bn-org-hub {
  background: #0a0a0a;
  color: #ffffff;
}
.ag-cc-win .ag-bn-org-row img {
  border-color: #ffffff;
}
.ag-cc-win .ag-bn-org-meta {
  color: #0a0a0a;
}
/* product screens */
.ag-os-crumb {
  color: #9b9ba3;
}
.ag-os-crumb b {
  color: #0a0a0a;
}
.ag-os-id b {
  color: #0a0a0a;
}
.ag-os-id em {
  color: #9b9ba3;
}
.ag-os-call {
  color: #3c3c43;
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.1);
}
.ag-os-stat {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.06);
}
.ag-os-stat em {
  color: #9b9ba3;
}
.ag-os-stat b {
  color: #0a0a0a;
}
.ag-os-stat i {
  color: #b6b6bd;
}
.ag-os-stat-purple b {
  color: #7c3aed;
}
.ag-os-stat-green b {
  color: #16a34a;
}
.ag-os-stat-yellow b {
  color: #d97706;
}
.ag-os-table {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
}
.ag-os-more {
  color: #9b9ba3;
}
.ag-os-anhead b {
  color: #0a0a0a;
}
.ag-os-anhead em {
  color: #3c3c43;
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.1);
}
.ag-os-live {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.3);
}
.ag-os-live u {
  background: #22c55e;
}
.ag-os-metric em {
  color: #5f5f66;
}
.ag-os-metric b {
  color: #0a0a0a;
}
.ag-os-m-purple i {
  color: #7c3aed;
}
.ag-os-m-pink i {
  color: #db2777;
}
.ag-os-m-blue i {
  color: #2563eb;
}
.ag-os-m-green i {
  color: #16a34a;
}
.ag-os-rt {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
}
.ag-os-rt-head b {
  color: #0a0a0a;
}
.ag-os-rt-head em {
  color: #9b9ba3;
}
.ag-os-rt-row em {
  color: #9b9ba3;
}
.ag-os-rt-row b {
  color: #0a0a0a;
}
.ag-os-rt-row i {
  color: #16a34a;
}
.ag-os-line-a {
  stroke: #8b5cf6;
}
.ag-os-line-b {
  stroke: #ec4899;
}
.ag-os-legend span {
  color: #9b9ba3;
}
.ag-os-dot-a {
  background: #8b5cf6;
}
.ag-os-dot-b {
  background: #ec4899;
}
/* status bar */
.ag-cc-info-title {
  color: #0a0a0a;
}
.ag-cc-info-desc {
  color: #5f5f66;
}
.ag-cc-info .ag-cc-stats span,
.ag-cc-stats span {
  color: #3c3c43;
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.ag-cc-more {
  color: #0a0a0a;
}
.ag-cc-more:hover {
  color: var(--orange, #ff7a18);
}
/* profile side panels */
.ag-cc-pcard {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.14);
}
.ag-cc-pcard em {
  color: #9b9ba3;
}
.ag-cc-pcard > b {
  color: #0a0a0a;
}
.ag-cc-pcard > i {
  color: #9b9ba3;
}
.ag-cc-pwho b {
  color: #0a0a0a;
}
.ag-cc-purl {
  color: #9b9ba3;
}
.ag-cc-psoc u {
  color: #3c3c43;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
.ag-cc-pteam img {
  border-color: #ffffff;
}
.ag-cc-pteam b {
  color: #5f5f66;
}
/* command palette */
.ag-cc-pal-back {
  background: rgba(250, 250, 249, 0.6);
}
.ag-cc-pal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 30px 70px -20px rgba(0, 0, 0, 0.3);
}
.ag-cc-pal-head {
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: #9b9ba3;
}
.ag-cc-pal-head input {
  color: #0a0a0a;
}
.ag-cc-pal-head input::placeholder {
  color: #b6b6bd;
}
.ag-cc-pal kbd {
  color: #9b9ba3;
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
.ag-cc-pal-item {
  color: #9b9ba3;
}
.ag-cc-pal-item b {
  color: #3c3c43;
}
.ag-cc-pal-item em {
  color: #b6b6bd;
}
.ag-cc-pal-item.is-sel {
  background: rgba(0, 0, 0, 0.04);
}
.ag-cc-pal-item.is-sel b {
  color: #0a0a0a;
}
.ag-cc-pal-empty {
  color: #9b9ba3;
}
.ag-cc-pal-foot {
  border-top-color: rgba(0, 0, 0, 0.08);
  color: #9b9ba3;
}

.ag-cc-pup {
  color: #16a34a !important;
  font-weight: 700 !important;
}
.ag-cc-ptop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: var(--orange, #ff7a18);
}
.ag-cc-ptop b {
  font-size: 14.5px;
  font-weight: 800;
  color: #0a0a0a;
}

/* ---- Leads page replica ---- */
.ag-ld {
  gap: 10px;
}
.ag-ld-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ag-ld-head > b {
  font-size: 19px;
  font-weight: 800;
  color: #0a0a0a;
  margin-right: auto;
}
.ag-ld-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 240px;
  font-size: 11px;
  color: #b6b6bd;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 7.5px 12px;
}
.ag-ld-btn-dark {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #0a0a0a;
  border-radius: 10px;
  padding: 8px 13px;
  white-space: nowrap;
}
.ag-ld-btn {
  font-size: 11px;
  font-weight: 700;
  color: #3c3c43;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 8px 13px;
  white-space: nowrap;
}
.ag-ld-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 0;
}
.ag-ld-tabs b {
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  padding-bottom: 8px;
  border-bottom: 2px solid #0a0a0a;
}
.ag-ld-tabs span {
  font-size: 12px;
  font-weight: 600;
  color: #9b9ba3;
  padding-bottom: 8px;
}
.ag-ld-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.ag-ld-stat {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 13px;
  padding: 11px 14px;
}
.ag-ld-stat em {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9b9ba3;
}
.ag-ld-stat b {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 19px;
  font-weight: 800;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.ag-ld-pill-up,
.ag-ld-pill-down {
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  border-radius: 20px;
  padding: 2.5px 8px;
}
.ag-ld-pill-up {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}
.ag-ld-pill-down {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}
.ag-ld-subtabs {
  display: flex;
  gap: 16px;
  align-items: center;
}
.ag-ld-subtabs b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0a0a0a;
  padding-bottom: 6px;
  border-bottom: 2px solid #0a0a0a;
}
.ag-ld-subtabs b u {
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  background: #0a0a0a;
  border-radius: 20px;
  padding: 1.5px 7px;
}
.ag-ld-subtabs span {
  font-size: 11.5px;
  font-weight: 600;
  color: #9b9ba3;
}
.ag-ld-filters {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ag-ld-filters em {
  font-style: normal;
  font-size: 10.5px;
  color: #9b9ba3;
  font-weight: 600;
  margin-right: auto;
}
.ag-ld-filters span {
  font-size: 10px;
  font-weight: 700;
  color: #3c3c43;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 4.5px 12px;
}
.ag-ld-filters span.is-on {
  color: #ffffff;
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.ag-ld-table {
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 13px;
  padding: 4px 14px;
  overflow: hidden;
}
.ag-ld-th,
.ag-ld-tr {
  display: grid;
  grid-template-columns: 1.5fr 0.6fr 0.6fr 0.9fr 0.9fr;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
}
.ag-ld-th {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b6b6bd;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ag-ld-tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 11.5px;
}
.ag-ld-tr:last-child {
  border-bottom: 0;
}
.ag-ld-mail {
  color: #0a0a0a;
  font-weight: 600;
}
.ag-ld-dash {
  color: #c2c2c8;
}
.ag-ld-sub {
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  border-radius: 20px;
  padding: 3px 10px;
}
.ag-ld-date {
  color: #9b9ba3;
  font-variant-numeric: tabular-nums;
}

.ag-os-legend-top {
  position: static;
  display: flex;
  gap: 14px;
  margin-bottom: 2px;
}
.ag-os-rt-chart svg {
  inset: 0 0 18px;
  height: calc(100% - 18px);
}
.ag-os-times {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #9b9ba3;
  font-variant-numeric: tabular-nums;
}

/* ---- support: centered chat widget ---- */
.ag-sp-wrap {
  position: absolute;
  inset: 50px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-sp-box {
  width: min(560px, 92%);
  height: 100%;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 30px 60px -24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.ag-sp-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: #fbfbfa;
}
.ag-sp-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34c759, #1fa94a);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ag-sp-id {
  min-width: 0;
}
.ag-sp-id b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.25;
}
.ag-sp-id em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #9b9ba3;
}
.ag-sp-on {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
}
.ag-sp-on u {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: ag-live-pulse 1.8s ease-in-out infinite;
}
.ag-sp-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px;
}
.ag-sp-msg {
  max-width: 72%;
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  opacity: 0;
}
.ag-sp-msg time {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 3px;
  text-align: right;
}
.ag-sp-q {
  align-self: flex-start;
  background: #f0f0f2;
  color: #2c2c31;
  border-bottom-left-radius: 6px;
}
.ag-sp-q time {
  text-align: left;
}
.ag-sp-a {
  align-self: flex-end;
  background: linear-gradient(180deg, #36cd5d 0%, #27b14d 100%);
  color: #ffffff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px -5px rgba(39, 177, 77, 0.45);
}
.ag-sp-typing {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 13px;
  border-bottom-right-radius: 5px;
  padding: 0 14px;
  max-height: 0;
  margin: -4.5px 0;
  overflow: hidden;
  opacity: 0;
}
.ag-sp-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  animation: ag-bn-blink 1s ease-in-out infinite;
}
.ag-sp-typing i:nth-child(2) {
  animation-delay: 0.18s;
}
.ag-sp-typing i:nth-child(3) {
  animation-delay: 0.36s;
}
.ag-sp-stamp {
  align-self: center;
  font-size: 10px;
  font-weight: 800;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 20px;
  padding: 4px 13px;
  opacity: 0;
}
.ag-sp-input {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 0 6px 0 15px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: #ffffff;
}
.ag-sp-input span {
  flex: 1;
  font-size: 12px;
  color: #b6b6bd;
  font-weight: 500;
}
.ag-sp-input i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #34c759;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* the conversation plays in order on a shared 16s clock */
.ag-sp-m1 {
  animation: ag-sp-k1 16s ease infinite;
}
.ag-sp-t1 {
  animation: ag-sp-kt1 16s ease infinite;
}
.ag-sp-m2 {
  animation: ag-sp-k2 16s ease infinite;
}
.ag-sp-m3 {
  animation: ag-sp-k3 16s ease infinite;
}
.ag-sp-m4 {
  animation: ag-sp-k4 16s ease infinite;
}
.ag-sp-t2 {
  animation: ag-sp-kt2 16s ease infinite;
}
.ag-sp-m5 {
  animation: ag-sp-k5 16s ease infinite;
}
.ag-sp-m6 {
  animation: ag-sp-k6 16s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ag-sp-k1 {
  0%,
  2% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  5%,
  95% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-sp-kt1 {
  0%,
  8% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: -4.5px 0;
  }
  10%,
  15% {
    opacity: 1;
    max-height: 38px;
    padding-top: 11px;
    padding-bottom: 11px;
    margin: 0;
  }
  17%,
  100% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: -4.5px 0;
  }
}
@keyframes ag-sp-k2 {
  0%,
  16% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  19%,
  95% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-sp-k3 {
  0%,
  29% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  32%,
  95% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-sp-k4 {
  0%,
  43% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  46%,
  95% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-sp-kt2 {
  0%,
  50% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: -4.5px 0;
  }
  52%,
  57% {
    opacity: 1;
    max-height: 38px;
    padding-top: 11px;
    padding-bottom: 11px;
    margin: 0;
  }
  59%,
  100% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: -4.5px 0;
  }
}
@keyframes ag-sp-k5 {
  0%,
  59% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  62%,
  95% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-sp-k6 {
  0%,
  74% {
    opacity: 0;
    transform: scale(0.8);
  }
  78%,
  95% {
    opacity: 1;
    transform: scale(1);
  }
  99%,
  100% {
    opacity: 0;
  }
}

.ag-ld-phone {
  color: #5f5f66;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.ag-ld-note {
  color: #5f5f66;
  font-size: 11px;
  font-weight: 600;
}

/* ---- analytics: self-scrolling pages (realtime -> geo -> sources) ---- */
.ag-os-carousel {
  overflow: hidden;
  padding: 0;
  position: relative;
}
.ag-os-pages {
  position: absolute;
  inset: 0;
  height: 600%;
  display: flex;
  flex-direction: column;
  animation: ag-os-pagecycle 17s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform;
}
.ag-os-page {
  height: 16.6667%;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  min-height: 0;
  position: relative;
}
.ag-os-page .ag-os-rt-chart {
  flex: 1;
  min-height: 40px;
  position: relative;
}
@keyframes ag-os-pagecycle {
  0%,
  16.5% {
    transform: translateY(0);
  }
  20%,
  36.5% {
    transform: translateY(-16.6667%);
  }
  40%,
  56.5% {
    transform: translateY(-33.3333%);
  }
  60%,
  76.5% {
    transform: translateY(-50%);
  }
  80%,
  96.5% {
    transform: translateY(-66.6667%);
  }
  100% {
    transform: translateY(-83.3333%);
  }
}
/* geographic analytics page */
.ag-os-geotabs {
  display: flex;
  gap: 14px;
}
.ag-os-geotabs b {
  font-size: 11px;
  font-weight: 700;
  color: #0a0a0a;
  padding-bottom: 5px;
  border-bottom: 2px solid #0a0a0a;
}
.ag-os-geotabs span {
  font-size: 11px;
  font-weight: 600;
  color: #9b9ba3;
}
.ag-os-geolist {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.ag-os-georow {
  display: grid;
  grid-template-columns: 30px 32px 1fr 56px;
  gap: 10px;
  align-items: center;
}
.ag-os-georow u {
  text-decoration: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  color: #9b9ba3;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 2.5px 0;
  text-align: center;
}
.ag-os-georow b {
  font-size: 12px;
  font-weight: 800;
  color: #0a0a0a;
}
.ag-os-georow i {
  display: block;
  height: 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.ag-os-georow i em {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffd9b8, var(--orange, #ff7a18));
}
.ag-os-georow strong {
  font-size: 12px;
  font-weight: 800;
  color: #0a0a0a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ag-os-geoint {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ag-os-geoint em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9b9ba3;
  margin-right: auto;
}
.ag-os-geoint span {
  font-size: 9px;
  color: #9b9ba3;
  font-weight: 600;
}
.ag-os-geoint i {
  width: 110px;
  height: 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffe9d6, var(--orange, #ff7a18));
}
/* traffic sources page */
.ag-os-srclbl {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b6b6bd;
}
.ag-os-srclist {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
}
.ag-os-srcrow {
  display: grid;
  grid-template-columns: 34px 1.2fr 1fr 56px;
  gap: 11px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 9px 12px;
}
.ag-os-srcrow > u {
  text-decoration: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.ag-os-srcid {
  min-width: 0;
}
.ag-os-srcid b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.25;
}
.ag-os-srcid em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: #9b9ba3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-os-srcrow > i {
  display: block;
  height: 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.ag-os-srcrow > i em {
  display: block;
  height: 100%;
  border-radius: 6px;
}
.ag-os-srcrow strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #0a0a0a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- agency analytics header + KPM + duo cards ---- */
.ag-os-aghead {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ag-os-aghead .ag-os-id {
  margin-right: auto;
}
.ag-os-btn-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #22c55e;
  border-radius: 10px;
  padding: 7px 13px;
}
.ag-os-btn-dark {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #0a0a0a;
  border-radius: 10px;
  padding: 7px 13px;
}
.ag-os-range {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #3c3c43;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 6px 13px;
  white-space: nowrap;
}
.ag-os-kpm {
  background: #fbfbfa;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 15px;
  padding: 13px 16px 15px;
}
.ag-os-kpm-head {
  display: flex;
  align-items: center;
}
.ag-os-kpm-head b {
  font-size: 12.5px;
  font-weight: 800;
  color: #0a0a0a;
  margin-right: auto;
}
.ag-os-kpm-head span {
  font-size: 10px;
  font-weight: 700;
  color: #5f5f66;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 9px;
  padding: 4.5px 11px;
}
.ag-os-kpm-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
}
.ag-os-kpm-row span {
  text-align: center;
}
.ag-os-kpm-row b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ag-os-kpm-row em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #9b9ba3;
  font-weight: 600;
  margin-top: 2px;
}
.ag-os-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.ag-os-duocard {
  position: relative;
  border-radius: 14px;
  border: 1px solid;
  padding: 11px 14px 12px 40px;
}
.ag-os-duocard i {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag-os-duocard em {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #5f5f66;
}
.ag-os-duocard b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.ag-os-duocard u {
  text-decoration: none;
  display: inline-block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  border-radius: 20px;
  padding: 2.5px 9px;
}
.ag-os-duo-blue {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.22);
}
.ag-os-duo-blue i {
  background: rgba(96, 165, 250, 0.16);
  color: #2563eb;
}
.ag-os-duo-green {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.22);
}
.ag-os-duo-green i {
  background: rgba(52, 211, 153, 0.16);
  color: #16a34a;
}

/* ---- dashboard replica: product-exact cards ---- */
.ag-osd-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.05);
}
.ag-osd-id {
  margin-right: auto;
  min-width: 0;
}
.ag-osd-id > b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.2;
}
.ag-osd-dom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #5f5f66;
}
.ag-osd-dom svg {
  color: #9b9ba3;
}
.ag-osd-dom u {
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: #0a0a0a;
  border-radius: 20px;
  padding: 4px 11px;
}
.ag-osd-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #0a0a0a;
  border-radius: 20px;
  padding: 9px 16px;
  white-space: nowrap;
}
.ag-osd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ag-osd-stat {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.04);
}
.ag-osd-stat > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9b9ba3;
}
.ag-osd-stat em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: #5f5f66;
}
.ag-osd-stat > b {
  display: block;
  margin-top: 5px;
  font-size: 23px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ag-osd-purple > b {
  color: #8b5cf6;
}
.ag-osd-green > b {
  color: #22c55e;
}
.ag-osd-yellow > b {
  color: #eab308;
}
.ag-osd-acts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ag-osd-act {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 16px 38px 16px 16px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.04);
}
.ag-osd-act > b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.3;
}
.ag-osd-act > em {
  display: block;
  font-style: normal;
  margin-top: 4px;
  font-size: 10.5px;
  color: #9b9ba3;
  font-weight: 500;
  line-height: 1.4;
}
.ag-osd-act > i {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #c2c2c8;
  display: inline-flex;
}
.ag-osd-act-dark {
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.ag-osd-act-dark > b {
  color: #ffffff;
}
.ag-osd-act-dark > em {
  color: rgba(255, 255, 255, 0.6);
}
.ag-osd-act-dark > i {
  color: #ffffff;
}
.ag-osd-act-green {
  background: rgba(34, 197, 94, 0.07);
  border-color: rgba(34, 197, 94, 0.2);
}
.ag-osd-act-green > b {
  color: #16a34a;
}
.ag-osd-act-green > i {
  color: #16a34a;
}

/* comparison overview page */
.ag-os-cmp {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: end;
  padding: 4px 8px 0;
}
.ag-os-cmpgrp {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
}
.ag-os-cmpgrp > b {
  font-size: 13px;
  font-weight: 800;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.ag-os-cmpgrp > i {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.ag-os-cmpgrp > i u {
  width: 26px;
  border-radius: 7px 7px 3px 3px;
  display: block;
}
.ag-os-cmpgrp > em {
  font-style: normal;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
  color: #5f5f66;
}
.ag-os-cmp-cur {
  background: linear-gradient(180deg, #8b5cf6, #a78bfa);
}
.ag-os-cmp-prev {
  background: #e5e7eb;
}
.ag-os-cmpleg {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.ag-os-cmpleg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: #9b9ba3;
}
.ag-os-cmpleg u {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

/* ---- live marquee profile cards (real Linkme data) ---- */
.lm-pcard {
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.lm-pcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.lm-pcard-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 34%,
    rgba(0, 0, 0, 0.55) 62%,
    rgba(0, 0, 0, 0.92) 100%
  );
}
.lm-pcard-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 14px 16px;
}
.lm-pcard-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  max-width: 100%;
}
.lm-pcard-handle {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.lm-pcard-icons {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}
.lm-pcard-icons i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lm-pcard-icons i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.lm-pcard-fol {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}
.lm-pcard-fol b {
  font-weight: 800;
}
.lm-pcard-bio {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- seats & billing screen ---- */
.ag-st-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ag-st-sum {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.04);
}
.ag-st-sum em {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9b9ba3;
}
.ag-st-sum > b {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ag-st-sum > b i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #9b9ba3;
}
.ag-st-sum > u {
  text-decoration: none;
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #9b9ba3;
}
.ag-st-bar {
  display: block;
  height: 6px;
  margin-top: 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.ag-st-bar u {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--orange, #ff7a18), #ffb066);
}
.ag-st-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.ag-st-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 10px 8px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.04);
  min-height: 0;
}
.ag-st-seat img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.ag-st-seat > b,
.ag-st-pend-a > b,
.ag-st-pend-b > b {
  font-size: 11.5px;
  font-weight: 700;
  color: #0a0a0a;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-st-seat u,
.ag-st-pend-b u {
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #5f5f66;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 2.5px 9px;
}
.ag-st-seat u.ag-st-owner {
  color: var(--orange, #ff7a18);
  background: rgba(255, 122, 24, 0.12);
}
.ag-st-seat u.ag-st-mgr {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.12);
}
/* pending seat cycles: invite sent -> joined */
.ag-st-pending {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.16);
}
.ag-st-pendswap {
  position: relative;
  width: 100%;
  height: 100%;
}
.ag-st-pend-a,
.ag-st-pend-b {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0;
}
.ag-st-pend-a {
  animation: ag-st-swapa 8s ease infinite;
}
.ag-st-pend-b {
  animation: ag-st-swapb 8s ease infinite;
}
.ag-st-pend-a > i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag-st-pend-a > i u {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #eab308;
  animation: ag-live-pulse 1.6s ease-in-out infinite;
}
.ag-st-pend-a .ag-st-inv {
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  color: #d97706;
  background: rgba(234, 179, 8, 0.14);
  border-radius: 20px;
  padding: 2.5px 9px;
}
.ag-st-pend-b img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.ag-st-pend-b u {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}
@keyframes ag-st-swapa {
  0%,
  4% {
    opacity: 0;
  }
  7%,
  52% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-st-swapb {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.85);
  }
  63%,
  94% {
    opacity: 1;
    transform: scale(1);
  }
  98%,
  100% {
    opacity: 0;
  }
}
.ag-st-empty {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: none;
  background: rgba(0, 0, 0, 0.012);
}
.ag-st-empty > i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  color: #9b9ba3;
}
.ag-st-empty > b {
  color: #9b9ba3;
}
.ag-st-empty > u {
  background: transparent;
  color: #b6b6bd;
}
.ag-st-foot {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #9b9ba3;
}

/* ---- seats v2: rich tiles, role rings, hover physics ---- */
.ag-st-seat {
  gap: 4px;
  padding: 14px 12px;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
.ag-st-seat:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.16);
  border-color: rgba(0, 0, 0, 0.12);
}
.ag-st-t-ag-st-owner:hover {
  box-shadow: 0 16px 36px -14px rgba(255, 122, 24, 0.3);
  border-color: rgba(255, 122, 24, 0.35);
}
.ag-st-t-ag-st-mgr:hover {
  box-shadow: 0 16px 36px -14px rgba(139, 92, 246, 0.28);
  border-color: rgba(139, 92, 246, 0.32);
}
.ag-st-ring {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.04));
  display: inline-flex;
}
.ag-st-ring.ag-st-owner {
  background: linear-gradient(135deg, var(--orange, #ff7a18), #ffb066);
}
.ag-st-ring.ag-st-mgr {
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
}
.ag-st-ring img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: none !important;
}
.ag-st-ring > u {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c2c2c8;
  border: 2.5px solid #ffffff;
}
.ag-st-ring > u.is-on {
  background: #22c55e;
  animation: ag-cc-blip 2.2s ease-in-out infinite;
}
.ag-st-rich > b {
  margin-top: 4px;
  font-size: 12.5px;
}
.ag-st-sub {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #9b9ba3;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-st-mini {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.ag-st-mini i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  color: #5f5f66;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 2.5px 8px;
  white-space: nowrap;
}
.ag-st-joined {
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  border-radius: 20px;
  padding: 2.5px 9px;
}
/* usage bar: animated shimmer over the fill */
.ag-st-bar u {
  position: relative;
  overflow: hidden;
}
.ag-st-bar u::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: ag-st-shimmer 2.6s ease-in-out infinite;
}
@keyframes ag-st-shimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}
/* add-seat tile invites the click */
.ag-st-empty {
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.ag-st-empty > i {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease,
    border-color 0.3s ease;
}
.ag-st-empty:hover {
  border-color: rgba(255, 122, 24, 0.5);
  background: rgba(255, 122, 24, 0.04);
  transform: translateY(-4px);
}
.ag-st-empty:hover > i {
  transform: rotate(90deg);
  color: var(--orange, #ff7a18);
  border-color: rgba(255, 122, 24, 0.5);
}
.ag-st-empty:hover > b {
  color: var(--orange, #ff7a18);
}

/* ---- team & seats table (dashboard language) ---- */
.ag-tm-table {
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 4px 16px 10px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ag-tm-th,
.ag-tm-tr {
  display: grid;
  grid-template-columns: 1.7fr 0.8fr 1.1fr 0.8fr 0.7fr;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
}
.ag-tm-th {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b6b6bd;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ag-tm-tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.25s ease;
}
.ag-tm-tr:hover {
  background: rgba(0, 0, 0, 0.016);
}
.ag-tm-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ag-tm-id img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.ag-tm-id b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.25;
}
.ag-tm-id em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #9b9ba3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-tm-role {
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 800;
  color: #5f5f66;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 3px 11px;
}
.ag-tm-owner {
  color: var(--orange, #ff7a18);
  background: rgba(255, 122, 24, 0.12);
}
.ag-tm-mgr {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.12);
}
.ag-tm-inv {
  color: #d97706;
  background: rgba(234, 179, 8, 0.14);
}
.ag-tm-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #5f5f66;
}
.ag-tm-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c2c2c8;
  flex: none;
}
.ag-tm-status i.is-on {
  background: #22c55e;
  animation: ag-cc-blip 2.2s ease-in-out infinite;
}
.ag-tm-status i.is-wait {
  background: #eab308;
  animation: ag-live-pulse 1.6s ease-in-out infinite;
}
.ag-tm-num {
  font-size: 11.5px;
  font-weight: 700;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.ag-tm-resend {
  color: var(--orange, #ff7a18);
  font-size: 10.5px;
  cursor: pointer;
}
.ag-tm-invited {
  background: rgba(234, 179, 8, 0.035);
}
.ag-tm-add {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #9b9ba3;
  cursor: pointer;
  transition: color 0.3s ease;
}
.ag-tm-add i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    color 0.3s ease;
}
.ag-tm-add:hover {
  color: var(--orange, #ff7a18);
}
.ag-tm-add:hover i {
  transform: rotate(90deg);
  color: var(--orange, #ff7a18);
  border-color: rgba(255, 122, 24, 0.5);
}

/* ---- agency members view replica ---- */
.ag-osd-blue > b {
  color: #2563eb;
}
.ag-us-hero {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 15px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.05);
}
.ag-us-hero b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.2;
}
.ag-us-hero em {
  display: block;
  font-style: normal;
  margin-top: 3px;
  font-size: 11px;
  color: #9b9ba3;
  font-weight: 500;
}
.ag-us-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ag-us-tabs b {
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  padding-bottom: 7px;
  border-bottom: 2px solid #0a0a0a;
}
.ag-us-tabs span {
  font-size: 12px;
  font-weight: 600;
  color: #9b9ba3;
  padding-bottom: 7px;
}
.ag-us-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ag-us-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-right: 4px;
  white-space: nowrap;
}
.ag-us-count b {
  font-size: 14px;
  font-weight: 800;
  color: #0a0a0a;
}
.ag-us-count em {
  font-style: normal;
  font-size: 10.5px;
  color: #9b9ba3;
  font-weight: 600;
}
.ag-us-search {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: #b6b6bd;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 7px 12px;
  white-space: nowrap;
  overflow: hidden;
}
.ag-us-pill {
  font-size: 10px;
  font-weight: 700;
  color: #3c3c43;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 6.5px 13px;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.ag-us-pill.is-on {
  color: #ffffff;
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.ag-us-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ag-us-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-us-card:hover {
  transform: translateY(-4px);
}
.ag-us-name {
  flex: none;
  padding: 0 2px 7px;
}
.ag-us-name b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-us-name em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #9b9ba3;
  font-weight: 600;
}
.ag-us-photo {
  flex: 1;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.08);
}
.ag-us-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-us-card:hover .ag-us-photo img {
  transform: scale(1.05);
}
.ag-us-acts {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
}
.ag-us-acts i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f5f66;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.ag-us-acts i:hover {
  color: var(--orange, #ff7a18);
  background: rgba(255, 122, 24, 0.08);
  border-color: rgba(255, 122, 24, 0.3);
}

/* ---- sequential glow trace around the creator frames ---- */
@property --agang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.ag-us-photo {
  position: relative;
}
.ag-us-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(
    from var(--agang),
    transparent 0deg 252deg,
    rgba(255, 122, 24, 0.25) 288deg,
    var(--orange, #ff7a18) 324deg,
    #ffd9b8 348deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.ag-us-card:nth-child(1) .ag-us-photo::after {
  animation: ag-us-g1 7.5s linear infinite;
}
.ag-us-card:nth-child(2) .ag-us-photo::after {
  animation: ag-us-g2 7.5s linear infinite;
}
.ag-us-card:nth-child(3) .ag-us-photo::after {
  animation: ag-us-g3 7.5s linear infinite;
}
.ag-us-card:nth-child(4) .ag-us-photo::after {
  animation: ag-us-g4 7.5s linear infinite;
}
.ag-us-card:nth-child(5) .ag-us-photo::after {
  animation: ag-us-g5 7.5s linear infinite;
}
@keyframes ag-us-g1 {
  0% {
    --agang: 0deg;
    opacity: 0;
  }
  1.5% {
    opacity: 1;
  }
  18.5% {
    opacity: 1;
  }
  20%,
  100% {
    --agang: 360deg;
    opacity: 0;
  }
}
@keyframes ag-us-g2 {
  0%,
  20% {
    --agang: 0deg;
    opacity: 0;
  }
  21.5% {
    opacity: 1;
  }
  38.5% {
    opacity: 1;
  }
  40%,
  100% {
    --agang: 360deg;
    opacity: 0;
  }
}
@keyframes ag-us-g3 {
  0%,
  40% {
    --agang: 0deg;
    opacity: 0;
  }
  41.5% {
    opacity: 1;
  }
  58.5% {
    opacity: 1;
  }
  60%,
  100% {
    --agang: 360deg;
    opacity: 0;
  }
}
@keyframes ag-us-g4 {
  0%,
  60% {
    --agang: 0deg;
    opacity: 0;
  }
  61.5% {
    opacity: 1;
  }
  78.5% {
    opacity: 1;
  }
  80%,
  100% {
    --agang: 360deg;
    opacity: 0;
  }
}
@keyframes ag-us-g5 {
  0%,
  80% {
    --agang: 0deg;
    opacity: 0;
  }
  81.5% {
    opacity: 1;
  }
  98.5% {
    opacity: 1;
  }
  100% {
    --agang: 360deg;
    opacity: 0;
  }
}

/* ---- cards pop out in sync with their glow lap ---- */
.ag-us-card {
  will-change: transform;
}
.ag-us-card:nth-child(1) {
  animation: ag-us-p1 7.5s ease-in-out infinite;
}
.ag-us-card:nth-child(2) {
  animation: ag-us-p2 7.5s ease-in-out infinite;
}
.ag-us-card:nth-child(3) {
  animation: ag-us-p3 7.5s ease-in-out infinite;
}
.ag-us-card:nth-child(4) {
  animation: ag-us-p4 7.5s ease-in-out infinite;
}
.ag-us-card:nth-child(5) {
  animation: ag-us-p5 7.5s ease-in-out infinite;
}
@keyframes ag-us-p1 {
  0% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  5% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  15% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  20%,
  100% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}
@keyframes ag-us-p2 {
  0%,
  20% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  25% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  35% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  40%,
  100% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}
@keyframes ag-us-p3 {
  0%,
  40% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  45% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  55% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  60%,
  100% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}
@keyframes ag-us-p4 {
  0%,
  60% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  65% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  75% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  80%,
  100% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}
@keyframes ag-us-p5 {
  0%,
  80% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  85% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  95% {
    transform: scale(1.055) translateY(-5px);
    z-index: 2;
    filter: drop-shadow(0 18px 26px rgba(255, 122, 24, 0.18));
  }
  100% {
    transform: scale(1) translateY(0);
    z-index: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}

/* living gradient on the claim panel */
@keyframes ag-ch-grad {
  0% {
    background-position:
      0% 0%,
      100% 100%,
      0% 50%;
  }
  33% {
    background-position:
      55% 35%,
      45% 65%,
      65% 30%;
  }
  66% {
    background-position:
      25% 80%,
      75% 20%,
      100% 75%;
  }
  100% {
    background-position:
      0% 0%,
      100% 100%,
      0% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-ch-panel {
    animation: none;
  }
}

/* aurora must self-clip: preserve-3d on the window disables its
   overflow clipping, so the oversized blobs leaked past the page */
.ag-cc-aurora {
  inset: 0;
  overflow: hidden;
  animation: none;
  background: none;
  filter: none;
}
.ag-cc-aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      34% 42% at 24% 30%,
      rgba(255, 122, 24, 0.06),
      transparent 70%
    ),
    radial-gradient(
      30% 38% at 78% 72%,
      rgba(99, 102, 241, 0.05),
      transparent 70%
    );
  filter: blur(40px);
  animation: ag-cc-aurora 26s ease-in-out infinite alternate;
}

/* hero header video */
.ag-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ag-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ag-hero-video-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

/* split hero: copy left, video panel right */
.ag-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.92fr;
  gap: 56px;
  align-items: center;
  min-height: 88vh;
  padding-top: 96px;
}
.ag-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 26px;
}
.ag-hero-h1 {
  text-align: left;
  max-width: 620px;
}
.ag-hero-copy .ag-hero-sub {
  text-align: left;
  max-width: 460px;
  margin: 0;
}
.ag-hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  width: 100%;
  overflow: hidden;
  background: transparent;
  animation: ag-hero-float 7s ease-in-out infinite;
}
.ag-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
}
/* feather every edge so the footage melts into the page —
   kills the visible crop rectangle */
.ag-hero-media {
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 14%,
      #000 86%,
      transparent 100%
    ),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 14%,
      #000 86%,
      transparent 100%
    ),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
@keyframes ag-hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@media (max-width: 992px) {
  .ag-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: 0;
    padding-top: 96px;
  }
  .ag-hero-media {
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-hero-media {
    animation: none;
  }
}

.ag-hero-h1 .hero-subline {
  display: block;
}
.ag-hero-h1 .rotating-text-wrapper {
  display: inline-block;
  min-height: 1.1em;
}

/* stacked fallback (mobile / reduced motion) — stays light */
.ag-cc-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  text-align: left;
}
.ag-cc-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: 16px 16px 22px;
}
.ag-cc-card-vis {
  position: relative;
  height: 230px;
}
.ag-cc-card-vis .ag-cc-demo {
  position: absolute !important;
  inset: 0;
}
.ag-cc-card h3 {
  margin: 14px 8px 0;
  font-size: 17px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-cc-card p {
  margin: 6px 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5f5f66;
}
.ag-cc-card .ag-cc-step {
  display: block;
  margin: 16px 8px 0;
}
.ag-cc-card .ag-cc-ghost,
.ag-cc-card .ag-cc-more {
  display: none;
}
@media (max-width: 992px) {
  .ag-cc {
    height: auto;
  }
  .ag-cc-pin {
    position: static;
    height: auto;
  }
}

.ag-bn {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  text-align: left;
}
.ag-bn-cell {
  display: flex;
}
.ag-bn-cell-tall {
  grid-row: span 2;
}
.ag-bn-cell-wide {
  grid-column: span 3;
}
.ag-bn-tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  padding: 16px 16px 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transform: translateY(var(--py, 0px));
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    opacity 0.45s ease;
}
.ag-bn-tile:hover {
  transform: translateY(calc(var(--py, 0px) - 5px)) scale(1.012);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.22);
  border-color: rgba(0, 0, 0, 0.2);
}
/* stage-light focus: hovering one tile recedes the other five */
.ag-bn-online:has(.ag-bn-cell:hover) .ag-bn-cell:not(:hover) .ag-bn-tile {
  opacity: 0.55;
  transform: translateY(var(--py, 0px)) scale(0.985);
}
.ag-bn-online:has(.ag-bn-cell:hover)
  .ag-bn-cell:not(:hover)
  .ag-bn-tile::before {
  opacity: 0;
}
.ag-bn-online .ag-bn-cell:hover .ag-bn-tile::before {
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 122, 24, 0.12),
    transparent 70%
  );
}
.ag-bn-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 122, 24, 0.07),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.ag-bn-tile:hover::before {
  opacity: 1;
}
/* system-online finale: orange energy sweep + border glint, in
   landing order, the moment the last puzzle piece settles */
.ag-bn-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 122, 24, 0.14) 49%,
    rgba(255, 255, 255, 0.55) 53%,
    transparent 62%
  );
  background-size: 280% 100%;
  background-position: 135% 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.ag-bn-online .ag-bn-cell:nth-of-type(1) .ag-bn-tile::after {
  animation: ag-bn-sweep 1s ease-out 0.05s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(2) .ag-bn-tile::after {
  animation: ag-bn-sweep 1s ease-out 0.19s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(3) .ag-bn-tile::after {
  animation: ag-bn-sweep 1s ease-out 0.33s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(4) .ag-bn-tile::after {
  animation: ag-bn-sweep 1s ease-out 0.47s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(5) .ag-bn-tile::after {
  animation: ag-bn-sweep 1s ease-out 0.61s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(6) .ag-bn-tile::after {
  animation: ag-bn-sweep 1s ease-out 0.75s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(1) .ag-bn-tile {
  animation: ag-bn-glint 0.95s ease 0.05s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(2) .ag-bn-tile {
  animation: ag-bn-glint 0.95s ease 0.19s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(3) .ag-bn-tile {
  animation: ag-bn-glint 0.95s ease 0.33s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(4) .ag-bn-tile {
  animation: ag-bn-glint 0.95s ease 0.47s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(5) .ag-bn-tile {
  animation: ag-bn-glint 0.95s ease 0.61s 1;
}
.ag-bn-online .ag-bn-cell:nth-of-type(6) .ag-bn-tile {
  animation: ag-bn-glint 0.95s ease 0.75s 1;
}
@keyframes ag-bn-sweep {
  0% {
    opacity: 1;
    background-position: 135% 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -150% 0;
  }
}
@keyframes ag-bn-glint {
  0%,
  100% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
  }
  35% {
    box-shadow:
      0 0 0 1.5px rgba(255, 122, 24, 0.55),
      0 14px 34px -14px rgba(255, 122, 24, 0.3);
    border-color: rgba(255, 122, 24, 0.5);
  }
}
/* living wires through the gutters */
.ag-bn-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.ag-bn-wire {
  fill: none;
  stroke: rgba(10, 10, 10, 0.13);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ag-bn-wire-draw 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ag-bn-wire-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.ag-bn-pulse {
  fill: #ff7a18;
  opacity: 0;
  animation: ag-bn-pulse-on 0.25s linear forwards;
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, 0.8));
}
@keyframes ag-bn-pulse-on {
  to {
    opacity: 1;
  }
}
.ag-bn-tile h3 {
  margin: 16px 8px 0;
  font-size: 17px;
  font-weight: 600;
  color: #0a0a0a;
}
.ag-bn-tile p {
  margin: 6px 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5f5f66;
}
.ag-bn-demo {
  position: relative;
  height: 190px;
  border-radius: 16px;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.ag-bn-demo-tall {
  height: 100%;
  min-height: 420px;
  flex: 1;
}

/* shared: value swap (stacked spans crossfade) */
.ag-bn-swap {
  position: relative;
  display: inline-block;
}
.ag-bn-swap > span {
  display: block;
}
.ag-bn-swap > span:last-child {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: ag-bn-swapb 9s ease-in-out infinite;
}
.ag-bn-swap > span:first-child {
  animation: ag-bn-swapa 9s ease-in-out infinite;
}
@keyframes ag-bn-swapa {
  0%,
  44% {
    opacity: 1;
  }
  50%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ag-bn-swapb {
  0%,
  44% {
    opacity: 0;
  }
  50%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ag-bn-swap-2 > span {
  animation-delay: 1s !important;
}
.ag-bn-swap-3 > span {
  animation-delay: 2.2s !important;
}
.ag-bn-swap-4 > span {
  animation-delay: 3.1s !important;
}
.ag-bn-swap-5 > span {
  animation-delay: 4.3s !important;
}

/* A — workspace table */
.ag-bn-ws {
  position: absolute;
  inset: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
}
.ag-bn-ws-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 10px;
}
.ag-bn-ws-crumb {
  font-size: 11px;
  color: #9b9ba3;
}
.ag-bn-ws-crumb b {
  color: #0a0a0a;
  font-weight: 700;
}
.ag-bn-ws-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 20px;
  padding: 2px 8px;
}
.ag-bn-ws-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: ag-live-pulse 1.8s ease-in-out infinite;
}
.ag-bn-ws-head {
  display: grid;
  grid-template-columns: 1fr 52px 56px 48px;
  gap: 8px;
  padding: 0 6px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b6b6bd;
}
.ag-bn-ws-row {
  display: grid;
  grid-template-columns: 24px 1fr 52px 56px 48px;
  gap: 8px;
  align-items: center;
  padding: 7px 6px;
  border-radius: 9px;
  margin-bottom: 2px;
}
.ag-bn-ws-row img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.ag-bn-ws-id b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.2;
}
.ag-bn-ws-id em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: #9b9ba3;
}
.ag-bn-ws-num {
  font-size: 11px;
  font-weight: 700;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.ag-bn-ws-status {
  font-size: 9px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  border-radius: 20px;
  padding: 2.5px 0;
  text-align: center;
}
@keyframes ag-bn-flash {
  0%,
  100% {
    background: transparent;
  }
  50% {
    background: rgba(255, 122, 24, 0.09);
  }
}
.ag-bn-flash-1 {
  animation: ag-bn-flash 9s ease-in-out infinite;
}
.ag-bn-flash-2 {
  animation: ag-bn-flash 9s ease-in-out 1s infinite;
}
.ag-bn-flash-3 {
  animation: ag-bn-flash 9s ease-in-out 2.2s infinite;
}
.ag-bn-flash-4 {
  animation: ag-bn-flash 9s ease-in-out 3.1s infinite;
}
.ag-bn-flash-5 {
  animation: ag-bn-flash 9s ease-in-out 4.3s infinite;
}
.ag-bn-ws-note {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #3a3a40;
  opacity: 0;
  animation: ag-bn-note 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ag-bn-ws-note i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  flex: none;
}
.ag-bn-ws-note b {
  color: #16a34a;
  margin-left: auto;
}
@keyframes ag-bn-note {
  0%,
  28% {
    opacity: 0;
    transform: translateY(8px);
  }
  34%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }
  95%,
  100% {
    opacity: 0;
  }
}
.ag-bn-cursor {
  position: absolute;
  z-index: 2;
  color: #0a0a0a;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.ag-bn-cursor i {
  position: absolute;
  left: 12px;
  top: 12px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: #0a0a0a;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ag-bn-cur-3 {
  color: var(--orange, #ff7a18);
}
.ag-bn-cur-3 i {
  background: var(--orange, #ff7a18);
}
.ag-bn-cursor.manual {
  animation: none !important;
  transition: transform 0.12s ease-out;
}
@keyframes ag-bn-cur-a {
  0%,
  100% {
    transform: translate(30px, 70px);
  }
  30% {
    transform: translate(180px, 130px);
  }
  60% {
    transform: translate(80px, 260px);
  }
  80% {
    transform: translate(220px, 190px);
  }
}
@keyframes ag-bn-cur-b {
  0%,
  100% {
    transform: translate(220px, 240px);
  }
  35% {
    transform: translate(70px, 150px);
  }
  70% {
    transform: translate(250px, 80px);
  }
}
@keyframes ag-bn-cur-c {
  0%,
  100% {
    transform: translate(140px, 320px);
  }
  40% {
    transform: translate(240px, 160px);
  }
  75% {
    transform: translate(50px, 210px);
  }
}
.ag-bn-cur-1 {
  animation: ag-bn-cur-a 12s ease-in-out infinite;
}
.ag-bn-cur-2 {
  animation: ag-bn-cur-b 14s ease-in-out infinite;
}
.ag-bn-cur-3 {
  animation: ag-bn-cur-c 10s ease-in-out infinite;
}

/* B — profile switcher */
.ag-bn-switch {
  position: absolute;
  inset: 0;
}
.ag-bn-prof {
  position: absolute;
  inset: 16px 46px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
  opacity: 0;
}
.ag-bn-prof img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.ag-bn-prof b {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
}
.ag-bn-prof em {
  font-style: normal;
  font-size: 10px;
  color: #9b9ba3;
}
.ag-bn-prof-pill {
  width: 70%;
  height: 11px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.06);
  margin-top: 7px;
}
@keyframes ag-bn-prof-cycle {
  0%,
  27% {
    opacity: 1;
    transform: translateX(0);
  }
  33%,
  94% {
    opacity: 0;
    transform: translateX(-14px);
  }
  95% {
    opacity: 0;
    transform: translateX(14px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.ag-bn-prof-1 {
  animation: ag-bn-prof-cycle 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ag-bn-prof-2 {
  animation: ag-bn-prof-cycle 9s cubic-bezier(0.16, 1, 0.3, 1) 3s infinite;
}
.ag-bn-prof-3 {
  animation: ag-bn-prof-cycle 9s cubic-bezier(0.16, 1, 0.3, 1) 6s infinite;
}
.ag-bn-switch-chip {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  background: #0a0a0a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* C — analytics */
.ag-bn-an {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
}
.ag-bn-an-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ag-bn-an-total {
  font-size: 11px;
  color: #5f5f66;
}
.ag-bn-an-total b {
  font-size: 15px;
  font-weight: 800;
  color: #0a0a0a;
  margin-right: 4px;
}
.ag-bn-growth {
  background: rgba(255, 122, 24, 0.12);
  border: 1px solid rgba(255, 122, 24, 0.3);
  color: var(--orange, #ff7a18);
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 20px;
  padding: 2px 9px;
}
.ag-bn-an-plot {
  position: relative;
  flex: 1;
  margin-top: 8px;
}
.ag-bn-an-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ag-bn-an-area {
  fill: rgba(255, 122, 24, 0.1);
  stroke: none;
}
.ag-bn-an-line {
  fill: none;
  stroke: var(--orange, #ff7a18);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  animation: ag-bn-an-draw 9s ease-in-out infinite;
}
@keyframes ag-bn-an-draw {
  0% {
    stroke-dashoffset: 320;
  }
  30%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.ag-bn-an-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange, #ff7a18);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: ag-bn-an-dotmove 9s ease-in-out infinite;
}
@keyframes ag-bn-an-dotmove {
  0%,
  6% {
    left: 0%;
    top: 78%;
  }
  18% {
    left: 19%;
    top: 66%;
  }
  34% {
    left: 39%;
    top: 69%;
  }
  52% {
    left: 59%;
    top: 44%;
  }
  72% {
    left: 79%;
    top: 25%;
  }
  88%,
  100% {
    left: 97%;
    top: 9%;
  }
}
.ag-bn-an-tip {
  position: absolute;
  top: -4px;
  width: 74px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 7px;
  animation: ag-bn-an-tipmove 9s ease-in-out infinite;
  transform: translateX(-50%);
}
@keyframes ag-bn-an-tipmove {
  0%,
  6% {
    left: 8%;
    top: 56%;
  }
  18% {
    left: 23%;
    top: 44%;
  }
  34% {
    left: 41%;
    top: 47%;
  }
  52% {
    left: 59%;
    top: 22%;
  }
  72% {
    left: 76%;
    top: 3%;
  }
  88%,
  100% {
    left: 86%;
    top: -10%;
  }
}
.ag-bn-an-tip span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #ffffff;
  opacity: 0;
}
.ag-bn-an-tip span:nth-child(1) {
  animation: ag-bn-tipword 9s infinite;
}
.ag-bn-an-tip span:nth-child(2) {
  animation: ag-bn-tipword 9s 1.4s infinite;
}
.ag-bn-an-tip span:nth-child(3) {
  animation: ag-bn-tipword 9s 2.8s infinite;
}
.ag-bn-an-tip span:nth-child(4) {
  animation: ag-bn-tipword 9s 4.4s infinite;
}
.ag-bn-an-tip span:nth-child(5) {
  animation: ag-bn-tipword 9s 6s infinite;
}
.ag-bn-an-tip span:nth-child(6) {
  animation: ag-bn-tipword 9s 7.6s infinite;
}
@keyframes ag-bn-tipword {
  0%,
  2% {
    opacity: 0;
  }
  4%,
  15% {
    opacity: 1;
  }
  17%,
  100% {
    opacity: 0;
  }
}
.ag-bn-an-x {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #b6b6bd;
  padding-top: 6px;
}

/* D — export */
.ag-bn-ex {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ag-bn-ex-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 7px 11px;
}
.ag-bn-ex-row b {
  font-size: 11px;
  font-weight: 700;
  color: #0a0a0a;
}
.ag-bn-ex-row em {
  font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  color: #9b9ba3;
  margin-left: auto;
}
.ag-bn-check {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex: none;
}
.ag-bn-check svg {
  opacity: 0;
}
@keyframes ag-bn-checkin {
  0%,
  4% {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.2);
  }
  10%,
  88% {
    background: var(--orange, #ff7a18);
    border-color: var(--orange, #ff7a18);
  }
  94%,
  100% {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.2);
  }
}
@keyframes ag-bn-checksvg {
  0%,
  4% {
    opacity: 0;
    transform: scale(0.4);
  }
  10%,
  88% {
    opacity: 1;
    transform: scale(1);
  }
  94%,
  100% {
    opacity: 0;
  }
}
.ag-bn-check-1 {
  animation: ag-bn-checkin 8s ease infinite;
}
.ag-bn-check-1 svg {
  animation: ag-bn-checksvg 8s ease infinite;
}
.ag-bn-check-2 {
  animation: ag-bn-checkin 8s ease 0.5s infinite;
}
.ag-bn-check-2 svg {
  animation: ag-bn-checksvg 8s ease 0.5s infinite;
}
.ag-bn-check-3 {
  animation: ag-bn-checkin 8s ease 1s infinite;
}
.ag-bn-check-3 svg {
  animation: ag-bn-checksvg 8s ease 1s infinite;
}
.ag-bn-ex-btn {
  position: relative;
  margin-top: auto;
  background: #0a0a0a;
  border-radius: 12px;
  height: 36px;
  overflow: hidden;
}
.ag-bn-ex-fill {
  position: absolute;
  inset: 0;
  background: var(--orange, #ff7a18);
  transform-origin: left;
  transform: scaleX(0);
  animation: ag-bn-ex-fill 8s ease infinite;
}
@keyframes ag-bn-ex-fill {
  0%,
  25% {
    transform: scaleX(0);
  }
  45% {
    transform: scaleX(1);
  }
  88% {
    transform: scaleX(1);
  }
  94%,
  100% {
    transform: scaleX(0);
  }
}
.ag-bn-ex-label {
  position: absolute;
  inset: 0;
}
.ag-bn-ex-label span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  opacity: 0;
}
.ag-bn-ex-label span:nth-child(1) {
  animation: ag-bn-exw1 8s infinite;
}
.ag-bn-ex-label span:nth-child(2) {
  animation: ag-bn-exw2 8s infinite;
}
.ag-bn-ex-label span:nth-child(3) {
  animation: ag-bn-exw3 8s infinite;
}
@keyframes ag-bn-exw1 {
  0%,
  25% {
    opacity: 1;
  }
  28%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-bn-exw2 {
  0%,
  27% {
    opacity: 0;
  }
  30%,
  44% {
    opacity: 1;
  }
  47%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-bn-exw3 {
  0%,
  46% {
    opacity: 0;
  }
  50%,
  88% {
    opacity: 1;
  }
  93%,
  100% {
    opacity: 0;
  }
}

/* E — support chat */
.ag-bn-chat {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ag-bn-chat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ag-bn-chat-head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: ag-live-pulse 1.8s ease-in-out infinite;
}
.ag-bn-chat-head b {
  font-size: 11px;
  font-weight: 800;
  color: #0a0a0a;
}
.ag-bn-chat-head em {
  font-style: normal;
  font-size: 9.5px;
  color: #16a34a;
  margin-left: auto;
}
.ag-bn-msg {
  max-width: 86%;
  border-radius: 12px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  position: relative;
}
.ag-bn-msg time {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 2px;
}
.ag-bn-msg-q {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #3a3a40;
  border-bottom-left-radius: 4px;
  animation: ag-bn-msgq 9s ease infinite;
}
.ag-bn-msg-typing {
  align-self: flex-end;
  background: rgba(0, 0, 0, 0.06);
  border-bottom-right-radius: 4px;
  display: inline-flex;
  gap: 4px;
  padding: 10px 13px;
  animation: ag-bn-msgt 9s ease infinite;
}
.ag-bn-msg-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  animation: ag-bn-blink 1s ease-in-out infinite;
}
.ag-bn-msg-typing i:nth-child(2) {
  animation-delay: 0.18s;
}
.ag-bn-msg-typing i:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes ag-bn-blink {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.ag-bn-msg-a {
  align-self: flex-end;
  background: #0a0a0a;
  color: #ffffff;
  border-bottom-right-radius: 4px;
  animation: ag-bn-msga 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ag-bn-resolved {
  align-self: center;
  font-size: 9.5px;
  font-weight: 800;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 20px;
  padding: 3px 11px;
  opacity: 0;
  animation: ag-bn-stamp 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ag-bn-msgq {
  0%,
  3% {
    opacity: 0;
    transform: translateY(6px);
  }
  8%,
  93% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-bn-msgt {
  0%,
  14% {
    opacity: 0;
  }
  19%,
  40% {
    opacity: 1;
  }
  44%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-bn-msga {
  0%,
  44% {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }
  50%,
  93% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  98%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-bn-stamp {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.7);
  }
  66%,
  93% {
    opacity: 1;
    transform: scale(1);
  }
  98%,
  100% {
    opacity: 0;
  }
}

/* F — org growth (wide) */
.ag-bn-tile-wide {
  flex-direction: row;
  align-items: center;
  gap: 26px;
}
.ag-bn-tile-wide .ag-bn-demo {
  flex: 1;
  height: 150px;
}
.ag-bn-wide-copy {
  flex: 1;
  padding-right: 12px;
}
.ag-bn-wide-copy h3 {
  margin: 0;
}
.ag-bn-wide-copy p {
  margin: 6px 0 0;
}
.ag-bn-org {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ag-bn-org-hub {
  background: #0a0a0a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 20px;
  padding: 5px 14px;
}
.ag-bn-org-row {
  display: flex;
  align-items: center;
}
.ag-bn-org-row img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffffff;
  margin-left: -9px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}
.ag-bn-org-row img:first-child {
  margin-left: 0;
}
.ag-bn-org-new {
  opacity: 0;
}
@keyframes ag-bn-join {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.3);
  }
  16% {
    opacity: 1;
    transform: scale(1.15);
  }
  20%,
  88% {
    opacity: 1;
    transform: scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.ag-bn-org-new-1 {
  animation: ag-bn-join 9s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite;
}
.ag-bn-org-new-2 {
  animation: ag-bn-join 9s cubic-bezier(0.16, 1, 0.3, 1) 2.6s infinite;
}
.ag-bn-org-new-3 {
  animation: ag-bn-join 9s cubic-bezier(0.16, 1, 0.3, 1) 4.2s infinite;
}
.ag-bn-org-meta {
  font-size: 12px;
  font-weight: 700;
  color: #0a0a0a;
  height: 18px;
}
.ag-bn-swap-seat {
  position: relative;
  display: block;
  width: 170px;
  height: 18px;
  text-align: center;
}
.ag-bn-swap-seat span {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.ag-bn-swap-seat span:nth-child(1) {
  animation: ag-bn-seatw 9s infinite;
}
.ag-bn-swap-seat span:nth-child(2) {
  animation: ag-bn-seatw 9s 1.16s infinite;
}
.ag-bn-swap-seat span:nth-child(3) {
  animation: ag-bn-seatw 9s 2.76s infinite;
}
.ag-bn-swap-seat span:nth-child(4) {
  animation: ag-bn-seatw2 9s 4.36s infinite;
}
@keyframes ag-bn-seatw {
  0%,
  1% {
    opacity: 0;
  }
  3%,
  16% {
    opacity: 1;
  }
  18%,
  100% {
    opacity: 0;
  }
}
@keyframes ag-bn-seatw2 {
  0%,
  1% {
    opacity: 0;
  }
  3%,
  50% {
    opacity: 1;
  }
  53%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 992px) {
  .ag-bn {
    grid-template-columns: 1fr;
  }
  .ag-bn-cell-tall,
  .ag-bn-cell-wide {
    grid-row: auto;
    grid-column: auto;
  }
  .ag-bn-demo-tall {
    min-height: 300px;
  }
  .ag-bn-tile-wide {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==================== NEW: hero roster float ==================== */
.ag-hr {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ag-hr-card {
  position: absolute;
  border-radius: 18px;
  will-change: transform, opacity;
}
.ag-hr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.ag-hr-bob {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 4px;
  border-radius: 18px;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.07),
    0 24px 60px -20px rgba(0, 0, 0, 0.3);
}
.ag-hr-bob-0 {
  animation: ag-hr-bob 6s ease-in-out infinite;
}
.ag-hr-bob-1 {
  animation: ag-hr-bob 7.4s ease-in-out infinite reverse;
}
.ag-hr-bob-2 {
  animation: ag-hr-bob 8.6s ease-in-out infinite;
}
@keyframes ag-hr-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.4deg);
  }
}
@media (max-width: 1100px) {
  .ag-hr {
    display: none;
  }
}

/* ==================== NEW: ticker interlude ==================== */
.ag-tk {
  background: #0a0a0a;
  padding: 64px 0 72px;
  overflow: hidden;
}
.ag-tk-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
  padding: 0 20px;
}
.ag-tk-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ag-tk-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: ag-live-pulse 1.8s ease-in-out infinite;
}
.ag-tk-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
.ag-tk-row {
  overflow: hidden;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
}
.ag-tk-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ag-tk-track {
  display: inline-flex;
  gap: 56px;
  white-space: nowrap;
  animation: ag-tk-scroll linear infinite;
  will-change: transform;
}
@keyframes ag-tk-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}
.ag-tk-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.ag-tk-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex: none;
}
.ag-tk-item em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.38);
}
.ag-tk-item.cash {
  color: var(--orange, #ff7a18);
}
.ag-tk-item.cash i {
  background: var(--orange, #ff7a18);
  box-shadow: 0 0 10px rgba(255, 122, 24, 0.8);
}

/* ==================== NEW: seat slider pricing ==================== */
.pricing-calculator-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}
.ag-seats {
  row-gap: 14px;
}
.ag-seat-row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.ag-seat-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  outline: none;
  cursor: pointer;
}
.ag-seat-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.2),
    0 8px 20px -6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-seat-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.ag-seat-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2);
}
.ag-seat-num {
  min-width: 52px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
}
.ag-seat-grid {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 6px;
  width: 100%;
}
.ag-seat-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  transition:
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-seat-cell.on {
  background: var(--orange, #ff7a18);
  transform: scale(1.12);
}
@media (max-width: 768px) {
  .ag-seat-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

/* ==================== NEW: finale wordmark ==================== */
.ag-fin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 140px 20px 150px;
  overflow: hidden;
}
.ag-fin-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ag-fin-face {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 26px;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
  z-index: 0;
  pointer-events: none;
}
.ag-fin-word {
  position: relative;
  z-index: 1;
  display: flex;
  font-size: clamp(72px, 13vw, 210px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: #0a0a0a;
}
.ag-fin-mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.ag-fin-mask > span {
  display: inline-block;
  will-change: transform;
}
.ag-fin-dot {
  color: var(--orange, #ff7a18);
}
.ag-fin-sub {
  margin-top: 18px;
  font-size: 19px;
  color: #5f5f66;
  text-align: center;
}
.ag-fin-cta {
  margin-top: 34px;
}

/* ==================================================================== *
 * ENTERPRISE LAYER — agencies redesign (agx- namespace)
 * Appended intentionally: later rules win, so nothing above is touched.
 * All motion here is gated on prefers-reduced-motion at the end.
 * ==================================================================== */

.agx {
  --agx-ink: #0a0a0a;
  --agx-ink-2: #5f5f66;
  /* 4.5:1 floor on white — #8d8d98 computed 3.28:1 and carried ~100 labels */
  --agx-ink-3: #6b6b74;
  --agx-line: #e7e7ea;
  --agx-line-soft: #f0f0f2;
  --agx-surface: #ffffff;
  --agx-surface-2: #fafafb;
  --agx-surface-3: #f4f4f5;
  --agx-accent: #ff7a18;
  /* #ff7a18 measures ~2.7:1 on white — fine as a fill, not as type.
     Use this for accent WORDS inside headlines. */
  --agx-accent-text: #d1600e;
  /* green-700: the old #16a34a green sat at 3.2:1 as 11-13px text */
  --agx-pos: #15803d;
  --agx-radius: 18px;
  --agx-radius-lg: 26px;
  --agx-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px rgba(10, 10, 10, 0.05);
  --agx-shadow-lg:
    0 2px 4px rgba(10, 10, 10, 0.03), 0 24px 68px rgba(10, 10, 10, 0.09);
}

/* --- section rhythm ------------------------------------------------ */
/* ONE spacing rule for the page (flow audit 2026-08-16): 128px for heavy
   sections, 96px for light ones, 96px hero foot. Uneven 122/56/132 gaps
   made the page stop and restart. */
.agx-section {
  position: relative;
  padding: 128px 0;
}
.agx-section--tight {
  padding: 96px 0;
}
.agx-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.agx-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.agx-head--left {
  margin-left: 0;
  text-align: left;
}
.agx-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 20px;
}
.agx-h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--agx-ink);
  margin: 0;
  text-wrap: balance;
}
.agx-lede {
  margin: 22px auto 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--agx-ink-2);
  text-wrap: pretty;
}
.agx-head--left .agx-lede {
  margin-left: 0;
}

/* --- hero ---------------------------------------------------------- */
.agx-hero {
  position: relative;
  padding: 128px 0 96px;
  overflow: clip;
}
.agx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 72px;
  align-items: center;
}
.agx-hero h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--agx-ink);
  margin: 0;
  text-wrap: balance;
}
.agx-hero-sub {
  margin-top: 26px;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.58;
  color: var(--agx-ink-2);
  text-wrap: pretty;
}
.agx-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
}
.agx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}
.agx-btn:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: 3px;
}
.agx-btn--primary {
  background: var(--agx-ink);
  color: #fff;
}
.agx-btn--primary:hover {
  transform: translateY(-1px);
  background: #1c1c1f;
}
.agx-btn--ghost {
  background: transparent;
  color: var(--agx-ink);
  border-color: var(--agx-line);
}
.agx-btn--ghost:hover {
  border-color: #cfcfd4;
  background: var(--agx-surface-2);
}
.agx-btn--onDark {
  background: #fff;
  color: #0a0a0a;
}
.agx-btn--onDark:hover {
  transform: translateY(-1px);
}
.agx-btn--ghostDark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.agx-btn--ghostDark:hover {
  border-color: rgba(255, 255, 255, 0.42);
}

.agx-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--agx-ink-3);
}
.agx-hero-proof svg {
  color: var(--agx-pos);
  flex: none;
}

/* hero product panel */
.agx-hero-media {
  position: relative;
}
.agx-panel {
  position: relative;
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
}
.agx-panel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
}
.agx-panel-dots {
  display: flex;
  gap: 6px;
}
.agx-panel-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dcdce1;
  display: block;
}
.agx-panel-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink-3);
  letter-spacing: 0.01em;
}
.agx-panel-body {
  padding: 20px;
}

/* hero kpi strip */
.agx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.agx-kpi {
  border: 1px solid var(--agx-line-soft);
  border-radius: 14px;
  padding: 14px;
  background: var(--agx-surface);
}
.agx-kpi-l {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 8px;
}
.agx-kpi-v {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-kpi-d {
  font-size: 12px;
  color: var(--agx-pos);
  margin-top: 5px;
}

/* hero roster feed */
.agx-feed {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.agx-feed-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--agx-line-soft);
  border-radius: 12px;
  background: var(--agx-surface);
}
.agx-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--agx-surface-3);
  flex: none;
}
.agx-feed-n {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-feed-h {
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-feed-v {
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}

/* --- trust --------------------------------------------------------- */
.agx-trust {
  padding: 96px 0;
}
.agx-trust-note {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
}
.agx-trust-note span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--agx-ink-2);
}

/* --- problem ------------------------------------------------------- */
.agx-problem {
  background: var(--agx-surface-2);
}
.agx-pain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.agx-pain-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius);
  background: var(--agx-surface);
}
.agx-pain-item i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-accent);
  margin-top: 8px;
}
.agx-pain-item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--agx-ink-2);
}

/* --- bento --------------------------------------------------------- */
.agx-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.agx-cell {
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  background: var(--agx-surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 210px;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}
.agx-cell:hover {
  border-color: #d8d8de;
  box-shadow: var(--agx-shadow);
  transform: translateY(-2px);
}
.agx-cell--3 {
  grid-column: span 3;
}
.agx-cell--2 {
  grid-column: span 2;
}
.agx-cell-h {
  font-size: 17.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--agx-ink);
  margin: 0;
}
.agx-cell-p {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--agx-ink-2);
}
.agx-cell-art {
  margin-top: auto;
}

/* bento micro-UI */
.agx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--agx-line);
  background: var(--agx-surface-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--agx-ink-2);
  white-space: nowrap;
}
.agx-chip--pos {
  color: var(--agx-pos);
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(22, 163, 74, 0.06);
}
.agx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.agx-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 62px;
}
.agx-bars i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #17171b 0%, #43434c 100%);
  display: block;
  min-height: 5px;
}
.agx-bars i:last-child {
  background: linear-gradient(180deg, var(--agx-accent) 0%, #ff9d52 100%);
}
.agx-rows {
  display: grid;
  gap: 6px;
}
.agx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--agx-surface-2);
  font-size: 13px;
  color: var(--agx-ink-2);
}
.agx-row b {
  color: var(--agx-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.agx-seatbar {
  display: flex;
  gap: 4px;
}
.agx-seatbar i {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  background: var(--agx-surface-3);
  display: block;
}
.agx-seatbar i.on {
  background: var(--agx-ink);
}

/* --- dashboard ----------------------------------------------------- */
.agx-dash-wrap {
  position: relative;
}
.agx-dash {
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
}
.agx-side {
  border-right: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.agx-ws {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}
.agx-ws-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  background: var(--agx-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.agx-ws-n {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--agx-ink);
  line-height: 1.25;
}
.agx-ws-s {
  font-size: 11.5px;
  color: var(--agx-ink-3);
}
.agx-nav {
  display: grid;
  gap: 2px;
}
.agx-nav a,
.agx-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--agx-ink-2);
  text-decoration: none;
}
.agx-nav .on {
  background: var(--agx-surface);
  color: var(--agx-ink);
  font-weight: 600;
  box-shadow: var(--agx-shadow);
}
.agx-nav i {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.62;
}
.agx-main {
  padding: 22px 24px 26px;
  min-width: 0;
}
.agx-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.agx-dash-h {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  margin: 0;
}
.agx-dash-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.agx-ctl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--agx-line);
  background: var(--agx-surface);
  font-size: 12.5px;
  color: var(--agx-ink-2);
  white-space: nowrap;
}
.agx-ctl--solid {
  background: var(--agx-ink);
  color: #fff;
  border-color: var(--agx-ink);
  font-weight: 600;
}
.agx-grid-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
}
.agx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.agx-card {
  border: 1px solid var(--agx-line-soft);
  border-radius: 15px;
  padding: 17px;
  background: var(--agx-surface);
  min-width: 0;
}
.agx-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--agx-ink);
  margin-bottom: 14px;
}
.agx-card-h em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--agx-ink-3);
}
.agx-tal {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.agx-tal + .agx-tal {
  border-top: 1px solid var(--agx-line-soft);
}
.agx-tal-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-tal-h {
  font-size: 11.5px;
  color: var(--agx-ink-3);
}
.agx-tal-v {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
}
.agx-spark i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  display: block;
  min-height: 4px;
  background: linear-gradient(180deg, #1d1d21 0%, #4c4c55 100%);
}
.agx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.agx-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--agx-ink-3);
}
.agx-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: block;
}
.agx-meter {
  display: grid;
  gap: 9px;
}
.agx-meter-row {
  display: grid;
  gap: 5px;
}
.agx-meter-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--agx-ink-2);
}
.agx-meter-top b {
  color: var(--agx-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.agx-meter-track {
  height: 6px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  overflow: hidden;
}
.agx-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--agx-ink);
  display: block;
}
.agx-act {
  display: grid;
  gap: 10px;
}
.agx-act-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.agx-act-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-pos);
  margin-top: 6px;
}
.agx-act-t {
  font-size: 12.5px;
  color: var(--agx-ink-2);
  line-height: 1.45;
}
.agx-act-t b {
  color: var(--agx-ink);
  font-weight: 600;
}
.agx-act-s {
  font-size: 11px;
  color: var(--agx-ink-3);
  margin-top: 2px;
}

/* --- dark monetization --------------------------------------------- */
.agx-dark {
  background: #08080a;
  color: #fff;
  padding: 132px 0;
  position: relative;
  overflow: clip;
}
.agx-dark .agx-h2 {
  color: #fff;
}
.agx-dark .agx-eyebrow {
  color: #7a7a86;
}
.agx-dark .agx-lede {
  color: #a3a3ae;
}
.agx-dark-glow {
  position: absolute;
  inset: auto 50% -40% auto;
  transform: translateX(50%);
  width: min(1100px, 120%);
  height: 620px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 122, 24, 0.16) 0%,
    rgba(255, 122, 24, 0) 68%
  );
  pointer-events: none;
}
.agx-rev {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}
.agx-rev-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.035);
  padding: 20px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}
.agx-rev-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}
.agx-rev-k {
  font-size: 13px;
  color: #a3a3ae;
}
.agx-rev-v {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.agx-rev-d {
  font-size: 12px;
  color: #34d399;
  margin-top: 6px;
}
.agx-rev-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.agx-dark-foot {
  margin-top: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* --- workflow ------------------------------------------------------ */
.agx-flow {
  display: grid;
  gap: 0;
  max-width: 940px;
  margin: 0 auto;
}
.agx-step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding: 26px 8px;
  border-top: 1px solid var(--agx-line);
  position: relative;
}
.agx-step:last-child {
  border-bottom: 1px solid var(--agx-line);
}
.agx-step-n {
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.agx-step-h {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--agx-ink);
  margin: 0;
}
.agx-step-p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--agx-ink-2);
  max-width: 480px;
}
.agx-step-out {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

/* --- pricing ------------------------------------------------------- */
.agx-price-card {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow);
  padding: 40px;
}
.agx-price-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--agx-line-soft);
}
.agx-price-name {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  margin: 0;
}
.agx-price-note {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--agx-ink-2);
}
.agx-seat-count {
  text-align: right;
  font-size: 42px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.agx-seat-count small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--agx-ink-3);
  margin-top: 7px;
  letter-spacing: 0;
}
.agx-seat-ctl {
  padding: 28px 0;
}
.agx-seat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--agx-ink-2);
  margin-bottom: 14px;
}
.agx-range {
  width: 100%;
  accent-color: #0a0a0a;
  /* 44px on every breakpoint, not just mobile — the slider is the primary
     control in the pricing calculator. */
  height: 44px;
  cursor: pointer;
}
.agx-range:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: 4px;
}
.agx-seat-cells {
  display: flex;
  gap: 3px;
  margin-top: 14px;
}
.agx-seat-cells i {
  flex: 1;
  height: 22px;
  border-radius: 4px;
  display: block;
  background: var(--agx-surface-3);
  transition: background-color 0.24s ease;
}
.agx-seat-cells i.on {
  background: var(--agx-ink);
}
.agx-price-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-price-talk {
  width: 100%;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--agx-ink-3);
}
/* Inline link inside a sentence: vertical padding on an inline box paints and
   extends the hit area without changing the line box, so the tap target clears
   44px while the paragraph keeps its exact layout. */
.agx-price-talk a {
  color: var(--agx-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 15px 4px;
  margin: -15px -4px;
}

/* --- final cta ----------------------------------------------------- */
.agx-final {
  padding: 128px 0;
  text-align: center;
}
.agx-final h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--agx-ink);
  margin: 0 auto;
  max-width: 780px;
  text-wrap: balance;
}
.agx-final p {
  margin: 24px auto 0;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--agx-ink-2);
  text-wrap: pretty;
}
.agx-final .agx-cta-row {
  justify-content: center;
  margin-top: 38px;
}

/* --- responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
  .agx-hero-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .agx-hero-sub {
    max-width: none;
  }
  .agx-dash {
    grid-template-columns: 1fr;
  }
  .agx-side {
    display: none;
  }
  .agx-grid-2 {
    grid-template-columns: 1fr;
  }
  .agx-grid-3 {
    grid-template-columns: 1fr;
  }
  .agx-rev {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-cell--3,
  .agx-cell--2 {
    grid-column: span 3;
  }
}
@media (max-width: 760px) {
  .agx-section {
    padding: 84px 0;
  }
  .agx-section--tight,
  .agx-trust {
    padding: 68px 0;
  }
  .agx-hero {
    padding: 84px 0 68px;
  }
  .agx-dark {
    padding: 88px 0;
  }
  .agx-final {
    padding: 88px 0;
  }
  .agx-shell {
    padding: 0 20px;
  }
  .agx-head {
    margin-bottom: 44px;
  }
  .agx-bento {
    grid-template-columns: 1fr;
  }
  .agx-cell--3,
  .agx-cell--2 {
    grid-column: span 1;
  }
  .agx-pain {
    grid-template-columns: 1fr;
  }
  .agx-rev {
    grid-template-columns: 1fr;
  }
  .agx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-price-card {
    padding: 26px 20px;
  }
  .agx-price-top {
    flex-direction: column;
  }
  .agx-seat-count {
    text-align: left;
    font-size: 36px;
  }
  .agx-btn {
    width: 100%;
  }
  .agx-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .agx-step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }
  .agx-step-out {
    justify-content: flex-start;
  }
  .agx-step-p {
    max-width: none;
  }
  /* dashboard becomes horizontally scrollable rather than illegibly small */
  .agx-dash-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .agx-dash-scroll .agx-dash {
    min-width: 720px;
  }
}

/* --- reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .agx-cell,
  .agx-rev-card,
  .agx-btn,
  .agx-seat-cells i {
    transition: none !important;
  }
  .agx-cell:hover,
  .agx-rev-card:hover,
  .agx-btn--primary:hover,
  .agx-btn--onDark:hover {
    transform: none;
  }
}

/* --- layout fixups for nested label/value spans --------------------- */
.agx-feed-n,
.agx-feed-h,
.agx-tal-n,
.agx-tal-h,
.agx-act-t,
.agx-act-s,
.agx-rev-k,
.agx-rev-v,
.agx-rev-d {
  display: block;
}
.agx-feed-row > span,
.agx-tal > span,
.agx-act-row > span {
  min-width: 0;
}
.agx-trust-note span svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--agx-ink-3);
}
.agx-hero-proof svg {
  width: 14px;
  height: 14px;
}
/* Reveal renders a motion div — make the ones used as grid/flex children behave */
.agx-cell.agx-cell--3,
.agx-cell.agx-cell--2 {
  display: flex;
}
.agx-rev-card {
  display: flex;
}
.agx-step {
  display: grid;
}
.agx-pain-item {
  display: flex;
}
.agx-kpi-v,
.agx-kpi-d {
  display: block;
}
.agx-kpi {
  display: flex;
  flex-direction: column;
}
.agx-kpi-d {
  margin-top: auto;
  padding-top: 5px;
}
/* keep the decorative glow inside the section on narrow viewports */
.agx-dark-glow {
  max-width: 100%;
}
/* workspace label/sublabel must stack, not run inline */
.agx-ws-n,
.agx-ws-s {
  display: block;
}
.agx-ws > span {
  min-width: 0;
}
/* let the trend chart fill its card instead of leaving a void when the
   sibling card is taller */
.agx-card {
  display: flex;
  flex-direction: column;
}
.agx-spark {
  flex: 1 1 auto;
  min-height: 96px;
}

/* ==================================================================== *
 * ENTERPRISE LAYER v2 — cinematic pass
 * ==================================================================== */

/* --- hero collage --------------------------------------------------- */
.agx-hero {
  padding-bottom: 120px;
}
.agx-hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
}
.agx-hero-wash {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 780px;
  background:
    radial-gradient(
      60% 55% at 78% 32%,
      rgba(255, 122, 24, 0.1) 0%,
      rgba(255, 122, 24, 0) 70%
    ),
    radial-gradient(
      50% 50% at 22% 18%,
      rgba(64, 122, 255, 0.09) 0%,
      rgba(64, 122, 255, 0) 72%
    );
  pointer-events: none;
  z-index: 0;
}
.agx-hero-grid {
  position: relative;
  z-index: 1;
}

.agx-collage {
  position: relative;
  min-height: 560px;
  perspective: 1400px;
}
/* desktop dashboard slab sitting behind everything */
.agx-slab {
  position: absolute;
  inset: 34px 0 auto 34px;
  border: 1px solid var(--agx-line);
  border-radius: 20px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
  transform-origin: 70% 50%;
}
.agx-slab-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
}
.agx-slab-body {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.agx-slab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.agx-mini {
  border: 1px solid var(--agx-line-soft);
  border-radius: 11px;
  padding: 11px 12px;
  background: var(--agx-surface);
}
.agx-mini-l {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 6px;
}
.agx-mini-v {
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: var(--agx-ink);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.agx-slab-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 74px;
}
.agx-slab-chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  display: block;
  min-height: 4px;
  background: linear-gradient(180deg, #1d1d21 0%, #52525c 100%);
}
.agx-slab-chart i:nth-last-child(-n + 3) {
  background: linear-gradient(180deg, var(--agx-accent) 0%, #ffab6b 100%);
}

/* phone in front */
.agx-phone {
  position: absolute;
  right: 2%;
  bottom: -14px;
  width: 210px;
  border-radius: 30px;
  border: 1px solid rgba(10, 10, 10, 0.1);
  background: #0a0a0a;
  padding: 7px;
  box-shadow: 0 34px 80px rgba(10, 10, 10, 0.28);
  z-index: 3;
}
.agx-phone-screen {
  border-radius: 24px;
  overflow: hidden;
  background: #111114;
  aspect-ratio: 9 / 19;
  position: relative;
}
.agx-phone-screen video,
.agx-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agx-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 15px;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

/* floating cards */
.agx-float {
  position: absolute;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(10, 10, 10, 0.1);
  padding: 12px 14px;
  z-index: 4;
  min-width: 132px;
}
.agx-float-l {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 5px;
}
.agx-float-v {
  display: block;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.022em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-float-d {
  display: block;
  font-size: 11px;
  color: var(--agx-pos);
  margin-top: 3px;
}
.agx-float--views {
  top: 0;
  left: 0;
}
.agx-float--sales {
  top: 108px;
  left: -18px;
}
.agx-float--lead {
  bottom: 96px;
  left: 6px;
}

/* creator chip cards drifting in the collage */
.agx-ccard {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--agx-line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(10, 10, 10, 0.1);
  z-index: 5;
  white-space: nowrap;
}
.agx-ccard img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.agx-ccard b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink);
  display: block;
}
.agx-ccard span {
  font-size: 10.5px;
  color: var(--agx-ink-3);
  display: block;
}
.agx-ccard--1 {
  top: 42px;
  right: 8%;
}
.agx-ccard--2 {
  top: 250px;
  right: 24%;
}
.agx-ccard--3 {
  bottom: 34px;
  left: 2%;
}

/* platform badge cluster */
.agx-badges {
  position: absolute;
  bottom: 4px;
  right: 26%;
  display: flex;
  gap: 7px;
  z-index: 4;
}
.agx-badges img {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.16);
  background: #fff;
  display: block;
}
/* connector trails from cards toward the dashboard */
.agx-trails {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.agx-trails path {
  fill: none;
  stroke: rgba(10, 10, 10, 0.14);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
}

/* --- trust: two-row creator marquee --------------------------------- */
.agx-marquee {
  position: relative;
  display: grid;
  gap: 14px;
}
.agx-marquee::before,
.agx-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 3;
  pointer-events: none;
}
.agx-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #fff 12%, rgba(255, 255, 255, 0) 100%);
}
.agx-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #fff 12%, rgba(255, 255, 255, 0) 100%);
}
.agx-mrow {
  display: flex;
  overflow: hidden;
}
.agx-mtrack {
  display: flex;
  gap: 12px;
  flex: none;
  will-change: transform;
}
.agx-mrow:hover .agx-mtrack {
  animation-play-state: paused;
}
@keyframes agx-scroll-l {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes agx-scroll-r {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.agx-mtrack--l {
  animation: agx-scroll-l 64s linear infinite;
}
.agx-mtrack--r {
  animation: agx-scroll-r 74s linear infinite;
}
.agx-mcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  background: var(--agx-surface);
  flex: none;
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease;
}
.agx-mcard:hover {
  border-color: #d5d5dc;
  box-shadow: var(--agx-shadow);
  transform: translateY(-2px);
}
.agx-mcard img {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  object-fit: cover;
  flex: none;
}
.agx-mcard b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-mcard span {
  display: block;
  font-size: 12.5px;
  color: var(--agx-ink-3);
  margin-top: 2px;
}

/* --- problem: scattered -> collapse --------------------------------- */
.agx-scatter {
  position: relative;
  height: 440px;
  max-width: 940px;
  margin: 0 auto 8px;
}
.agx-tool {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--agx-line);
  border-radius: 11px;
  background: var(--agx-surface);
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.06);
  font-size: 12.5px;
  color: var(--agx-ink-2);
  white-space: nowrap;
}
.agx-tool i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex: none;
  background: var(--agx-surface-3);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  color: var(--agx-ink-3);
  font-weight: 700;
}
.agx-collapse-target {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 82%);
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
  z-index: 4;
}
.agx-collapse-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-collapse-body {
  padding: 14px;
  display: grid;
  gap: 8px;
}

/* --- bento product scenes ------------------------------------------- */
.agx-scene {
  border: 1px solid var(--agx-line-soft);
  border-radius: 13px;
  background: var(--agx-surface-2);
  padding: 13px;
  display: grid;
  gap: 8px;
}
.agx-tile {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--agx-surface);
  border: 1px solid var(--agx-line-soft);
  font-size: 12.5px;
}
.agx-tile img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.agx-tile b {
  font-weight: 600;
  color: var(--agx-ink);
  font-size: 12.5px;
}
.agx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: var(--agx-pos);
}
.agx-dot--warn {
  background: #f59e0b;
}
.agx-dot--idle {
  background: #c9c9d1;
}
.agx-path {
  width: 100%;
  height: 78px;
  display: block;
}
.agx-path path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.agx-export {
  border: 1px solid var(--agx-line-soft);
  border-radius: 10px;
  background: var(--agx-surface);
  padding: 11px 12px;
}
.agx-export-t {
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-export-r {
  height: 5px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  margin-top: 7px;
}
.agx-export-r.w70 {
  width: 70%;
}
.agx-export-r.w45 {
  width: 45%;
}

/* --- dashboard v2 ---------------------------------------------------- */
.agx-tabs {
  display: flex;
  gap: 3px;
  margin: 16px 0 14px;
  border-bottom: 1px solid var(--agx-line-soft);
  overflow-x: auto;
}
.agx-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--agx-ink-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.agx-tab:hover {
  color: var(--agx-ink-2);
}
.agx-tab[aria-selected="true"] {
  color: var(--agx-ink);
  border-bottom-color: var(--agx-ink);
  font-weight: 650;
}
.agx-tab:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: -2px;
  border-radius: 6px;
}
.agx-chart-box {
  height: 188px;
  width: 100%;
}
.agx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.agx-pill--live {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}
.agx-pill--review {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.agx-pill--draft {
  background: var(--agx-surface-3);
  color: var(--agx-ink-3);
}
.agx-camp {
  display: grid;
  gap: 7px;
}
.agx-camp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--agx-surface-2);
  font-size: 12.5px;
  color: var(--agx-ink-2);
}
.agx-plat {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.agx-plat img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: block;
}

/* --- dark monetization v2 -------------------------------------------- */
.agx-rev-total {
  text-align: center;
  margin-bottom: 46px;
}
.agx-rev-total-l {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7a7a86;
  margin-bottom: 14px;
}
.agx-rev-total-v {
  display: block;
  font-size: clamp(46px, 7vw, 92px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.agx-rev-total-s {
  display: block;
  margin-top: 14px;
  font-size: 14.5px;
  color: #8b8b96;
}
.agx-dark .agx-rev-card {
  background: rgba(255, 255, 255, 0.04);
}
.agx-rev-ic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- workflow flow line ---------------------------------------------- */
.agx-flow {
  position: relative;
}
.agx-flow-line {
  position: absolute;
  left: 27px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.06) 0%,
    rgba(10, 10, 10, 0.16) 50%,
    rgba(10, 10, 10, 0.06) 100%
  );
}
.agx-flow-prog {
  position: absolute;
  left: 27px;
  top: 40px;
  width: 2px;
  background: linear-gradient(180deg, var(--agx-accent) 0%, #0a0a0a 100%);
  transform-origin: top;
}
.agx-step {
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 22px;
  border-top: 0;
  padding: 24px 0;
}
.agx-step:last-child {
  border-bottom: 0;
}
.agx-step-node {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--agx-line);
  background: var(--agx-surface);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--agx-ink-3);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}
.agx-step-node.on {
  background: var(--agx-ink);
  color: #fff;
  border-color: var(--agx-ink);
}
.agx-step-ui {
  border: 1px solid var(--agx-line-soft);
  border-radius: 12px;
  background: var(--agx-surface-2);
  padding: 12px;
  display: grid;
  gap: 7px;
}

/* --- pricing v2 ------------------------------------------------------ */
.agx-price-figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 52px;
  font-weight: 650;
  letter-spacing: -0.035em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.agx-price-figure small {
  font-size: 15px;
  font-weight: 500;
  color: var(--agx-ink-3);
  letter-spacing: 0;
}
.agx-price-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.agx-price-box {
  border: 1px solid var(--agx-line-soft);
  border-radius: 13px;
  padding: 14px;
  background: var(--agx-surface-2);
}
.agx-price-box span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 7px;
}
.agx-price-box b {
  display: block;
  font-size: 19px;
  font-weight: 650;
  color: var(--agx-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.agx-price-avatars {
  display: flex;
  margin-top: 20px;
}
.agx-price-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -9px;
  display: block;
}
.agx-price-avatars img:first-child {
  margin-left: 0;
}
.agx-price-avatars em {
  display: inline-grid;
  place-items: center;
  font-style: normal;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-left: -9px;
  background: var(--agx-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  border: 2px solid #fff;
}

/* --- use cases -------------------------------------------------------- */
.agx-uc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.agx-uc-card {
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius);
  background: var(--agx-surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color 0.26s ease,
    box-shadow 0.26s ease,
    transform 0.26s ease;
}
.agx-uc-card:hover {
  border-color: #d8d8de;
  box-shadow: var(--agx-shadow);
  transform: translateY(-2px);
}
.agx-uc-h {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--agx-ink);
  margin: 0;
}
.agx-uc-m {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-uc-o {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--agx-ink-2);
}

/* --- responsive v2 ---------------------------------------------------- */
@media (max-width: 1080px) {
  .agx-hero-grid {
    grid-template-columns: 1fr;
  }
  .agx-collage {
    min-height: 470px;
  }
  .agx-uc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-price-split {
    grid-template-columns: 1fr;
  }
  .agx-step {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .agx-step-ui {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .agx-collage {
    min-height: 400px;
    transform: scale(0.92);
    transform-origin: top center;
  }
  .agx-phone {
    width: 150px;
    right: 0;
  }
  .agx-float {
    padding: 9px 11px;
    min-width: 104px;
  }
  .agx-float-v {
    font-size: 15px;
  }
  .agx-float--sales {
    left: -6px;
    top: 92px;
  }
  .agx-ccard--2,
  .agx-badges {
    display: none;
  }
  .agx-marquee::before,
  .agx-marquee::after {
    width: 52px;
  }
  .agx-scatter {
    height: 360px;
  }
  .agx-uc {
    grid-template-columns: 1fr;
  }
  .agx-chart-box {
    height: 156px;
  }
  .agx-price-figure {
    font-size: 40px;
  }
  .agx-flow-line,
  .agx-flow-prog {
    left: 19px;
  }
  .agx-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }
  .agx-step-node {
    width: 40px;
    height: 40px;
    font-size: 11.5px;
  }
}

/* --- reduced motion v2 ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .agx-mtrack--l,
  .agx-mtrack--r {
    animation: none;
  }
  .agx-mcard,
  .agx-uc-card,
  .agx-tab {
    transition: none !important;
  }
  .agx-mcard:hover,
  .agx-uc-card:hover {
    transform: none;
  }
}

/* --- collage collision fixes ----------------------------------------- *
 * The floating KPI cards own the left gutter; the slab starts to their
 * right so neither covers the other's content. */
.agx-slab {
  inset: 46px 0 auto 150px;
}
.agx-float--views {
  top: 6px;
  left: 0;
}
.agx-float--sales {
  top: 122px;
  left: 0;
}
.agx-float--lead {
  bottom: 118px;
  left: 0;
}
.agx-ccard--1 {
  top: 8px;
  right: 4%;
}
.agx-ccard--2 {
  top: 268px;
  right: 30%;
}
.agx-ccard--3 {
  bottom: 18px;
  left: 148px;
}
.agx-badges {
  bottom: 96px;
  right: 2%;
}
.agx-phone {
  bottom: -6px;
  right: 4%;
}
@media (max-width: 1080px) {
  .agx-slab {
    inset: 46px 0 auto 132px;
  }
  .agx-ccard--3 {
    left: 132px;
  }
}
@media (max-width: 760px) {
  .agx-slab {
    inset: 40px 0 auto 96px;
  }
  .agx-float {
    min-width: 92px;
    padding: 8px 10px;
  }
  .agx-float--views {
    top: 0;
  }
  .agx-float--sales {
    top: 104px;
  }
  .agx-float--lead {
    bottom: auto;
    top: 208px;
  }
  .agx-ccard--3 {
    left: 96px;
    bottom: 6px;
  }
  .agx-badges {
    bottom: 62px;
    right: 0;
  }
}
/* two minis, kept clear of the phone; badges tucked below-left of it */
.agx-slab-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agx-slab {
  inset: 46px 168px auto 150px;
}
.agx-badges {
  bottom: 26px;
  right: auto;
  left: 168px;
}
@media (max-width: 1080px) {
  .agx-slab {
    inset: 46px 150px auto 132px;
  }
  .agx-badges {
    left: 150px;
  }
}
@media (max-width: 760px) {
  .agx-slab {
    inset: 40px 118px auto 92px;
  }
  .agx-badges {
    left: 92px;
    bottom: 10px;
  }
  .agx-badges img {
    width: 24px;
    height: 24px;
  }
}
/* badges live in the left gutter under the leads card, clear of the phone
   and the creator chips */
.agx-badges {
  left: 0;
  right: auto;
  bottom: 34px;
}
.agx-slab-bar .agx-panel-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1080px) {
  .agx-badges {
    left: 0;
  }
}
@media (max-width: 760px) {
  .agx-badges {
    left: 0;
    bottom: 8px;
  }
}
/* the label rule must not reach the AnimatedNumber span inside <b> */
.agx-price-box > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 7px;
}
.agx-price-box b span,
.agx-price-figure span {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin: 0;
}
.agx-price-box b {
  display: flex;
  align-items: baseline;
  gap: 1px;
}
/* creator chips must never sit on the phone screen — the phone's left edge is
   roughly 40% in from the right, so chips stay outside that band */
.agx-ccard--2 {
  top: 306px;
  right: 46%;
}
@media (max-width: 1080px) {
  .agx-ccard--2 {
    top: 292px;
    right: 48%;
  }
}

/* --- phone frame removed ---------------------------------------------- *
 * agency-hero-phone.mp4 already contains its own device render, so the CSS
 * bezel/notch/crop below it is dropped: the video renders at its natural
 * aspect on a transparent background. */
.agx-phone {
  width: 300px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.agx-phone-screen {
  border-radius: 0;
  background: transparent;
  aspect-ratio: auto;
  overflow: visible;
}
.agx-phone-screen video {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* the source is letterboxed on white — blend it onto the light hero */
  mix-blend-mode: multiply;
}
@media (max-width: 760px) {
  .agx-phone {
    width: 208px;
  }
}
/* The source is 3840x2160 with a centred phone that already has its own
   bezel — roughly a 9:19 slice of the frame. Crop to that slice so the
   asset's own device fills the element; no CSS bezel, notch or padding. */
.agx-phone {
  width: 236px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 54px rgba(10, 10, 10, 0.22));
}
.agx-phone-screen {
  aspect-ratio: 9 / 19;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
.agx-phone-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  transform: scale(1.04);
}
@media (max-width: 760px) {
  .agx-phone {
    width: 170px;
  }
}
/* Measured from the source: the phone occupies 958x1980 of the 3840x2160
   frame, centred. Matching the container to that aspect and zooming by
   2160/1980 = 1.091 crops the white backdrop and glow away exactly, leaving
   only the device the asset already renders. */
.agx-phone-screen {
  aspect-ratio: 958 / 1980;
  border-radius: 22px;
  overflow: hidden;
}
.agx-phone-screen video {
  transform: scale(1.1);
}
@media (max-width: 760px) {
  .agx-phone-screen {
    border-radius: 15px;
  }
}
/* keep the slab's right edge clear of the phone so no mini is covered */
.agx-phone {
  width: 212px;
  right: 0;
}
.agx-slab {
  inset: 46px 226px auto 150px;
}
@media (max-width: 1080px) {
  .agx-phone {
    width: 196px;
  }
  .agx-slab {
    inset: 46px 208px auto 132px;
  }
}
@media (max-width: 760px) {
  .agx-phone {
    width: 150px;
  }
  .agx-slab {
    inset: 40px 158px auto 92px;
  }
}

/* ==================================================================== *
 * ENTERPRISE MOTION PASS — narrative graphics
 * ==================================================================== */
.agx-collage::before {
  content: "";
  position: absolute;
  inset: 22px -6px 16px 34px;
  border-radius: 28px;
  background:
    linear-gradient(rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 58% 48%, #000 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.agx-system-map {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.agx-system-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.agx-system-map-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.6;
  stroke-dasharray: 10 15;
  animation: agx-route-drift 7.5s linear infinite;
}
.agx-system-map-path--base {
  stroke: rgba(10, 10, 10, 0.16);
}
.agx-system-map-path--hot {
  stroke: rgba(255, 122, 24, 0.64);
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, 0.22));
  animation-duration: 6.2s;
}
.agx-system-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.08);
  color: var(--agx-ink-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.agx-system-node::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-accent);
  box-shadow: 0 0 0 5px rgba(255, 122, 24, 0.12);
  animation: agx-node-pulse 2.8s ease-in-out infinite;
}
.agx-system-node--profiles {
  left: 30px;
  bottom: 102px;
}
.agx-system-node--fans {
  right: 2px;
  top: 90px;
}
.agx-system-node--revenue {
  right: 16px;
  bottom: 154px;
}
.agx-loop-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.07);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 122, 24, 0.12),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(250, 250, 251, 0.88)
    );
  padding: 12px;
}
.agx-loop-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 47px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 122, 24, 0.58),
    rgba(10, 10, 10, 0.16),
    transparent
  );
}
.agx-loop-card::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -30%;
  width: 42%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.64),
    transparent
  );
  transform: rotate(17deg);
  animation: agx-sheen 5.6s ease-in-out infinite;
}
.agx-loop-title {
  display: block;
  margin-bottom: 10px;
  color: var(--agx-ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agx-loop-stages {
  display: grid;
  /* auto-fit, not repeat(4): above 1200px the hero splits into two columns and
     the slab drops from ~586px to ~207px, which left four 32px tracks and
     ellipsised every stage label. Two rows of two fit at that width. */
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 7px 10px;
  position: relative;
  z-index: 1;
}
.agx-loop-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.agx-loop-stage i {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--agx-ink);
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.08);
  animation: agx-stage-pulse 3.2s ease-in-out infinite;
}
.agx-loop-stage:nth-child(2) i {
  background: var(--agx-accent);
  animation-delay: 0.35s;
}
.agx-loop-stage:nth-child(3) i {
  background: #16a34a;
  animation-delay: 0.7s;
}
.agx-loop-stage:nth-child(4) i {
  background: #3b82f6;
  animation-delay: 1.05s;
}
.agx-loop-stage b {
  display: block;
  overflow: hidden;
  width: 100%;
  color: var(--agx-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agx-loop-stage span {
  display: block;
  overflow: hidden;
  width: 100%;
  color: var(--agx-ink-3);
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Make the feature grid feel built, not static. */
.agx-cell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.agx-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 122, 24, 0.1), transparent 34%),
    radial-gradient(
      circle at 88% 24%,
      rgba(59, 130, 246, 0.08),
      transparent 34%
    );
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: -2;
}
.agx-cell::after {
  content: "";
  position: absolute;
  inset: auto -18% -42% 12%;
  height: 54%;
  background:
    linear-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  transform: rotate(-7deg);
  z-index: -1;
}
.agx-cell:hover::before {
  opacity: 1;
}
.agx-cell .agx-bars i {
  animation: agx-bar-breathe 5.8s ease-in-out infinite;
  animation-delay: calc(var(--agx-bar-index, 0) * 0.05s);
}
.agx-cell .agx-path path:last-child {
  stroke-dasharray: 7 10;
  animation: agx-route-drift 5.8s linear infinite;
}
.agx-scene {
  position: relative;
  overflow: hidden;
}
.agx-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 22%,
    rgba(255, 255, 255, 0.7) 45%,
    transparent 66%
  );
  transform: translateX(-130%);
  animation: agx-scene-scan 6.4s ease-in-out infinite;
  pointer-events: none;
}

/* Dashboard storytelling layer. */
.agx-dash-story {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1060px;
  margin: -18px auto 30px;
}
.agx-dash-story::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 24px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(10, 10, 10, 0.18),
    rgba(255, 122, 24, 0.5),
    rgba(10, 10, 10, 0.14),
    transparent
  );
}
.agx-dash-story-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(10, 10, 10, 0.055);
  padding: 14px;
}
.agx-dash-story-dot {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--agx-ink);
  box-shadow: 0 0 0 5px rgba(10, 10, 10, 0.08);
  animation: agx-stage-pulse 3.5s ease-in-out infinite;
}
.agx-dash-story-step:nth-child(2) .agx-dash-story-dot {
  background: var(--agx-accent);
  animation-delay: 0.35s;
}
.agx-dash-story-step:nth-child(3) .agx-dash-story-dot {
  background: #16a34a;
  animation-delay: 0.7s;
}
.agx-dash-story-step:nth-child(4) .agx-dash-story-dot {
  background: #3b82f6;
  animation-delay: 1.05s;
}
.agx-dash-story-label,
.agx-dash-story-step b,
.agx-dash-story-step em {
  display: block;
  min-width: 0;
}
.agx-dash-story-label {
  color: var(--agx-ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.agx-dash-story-step b {
  margin-top: 3px;
  color: var(--agx-ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.agx-dash-story-step em {
  margin-top: 4px;
  color: var(--agx-ink-3);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.35;
}
.agx-dash-wrap {
  isolation: isolate;
}
.agx-dash {
  position: relative;
  z-index: 2;
}
.agx-dash-orbit {
  position: absolute;
  inset: -72px -56px -62px;
  z-index: 1;
  pointer-events: none;
}
.agx-dash-orbit svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.agx-dash-orbit-line {
  fill: none;
  stroke: rgba(10, 10, 10, 0.13);
  stroke-width: 1.1;
  stroke-dasharray: 9 16;
  animation: agx-route-drift 7.8s linear infinite;
}
.agx-dash-orbit-line--hot {
  stroke: rgba(255, 122, 24, 0.54);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 12px rgba(255, 122, 24, 0.18));
  animation-duration: 6.4s;
}
.agx-dash-satellite {
  position: absolute;
  z-index: 3;
  width: 196px;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 46px rgba(10, 10, 10, 0.12);
  padding: 14px 15px;
  pointer-events: none;
  animation: agx-float-soft 7.2s ease-in-out infinite;
}
.agx-dash-satellite span,
.agx-dash-satellite b,
.agx-dash-satellite em {
  display: block;
}
.agx-dash-satellite span {
  color: var(--agx-ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agx-dash-satellite b {
  margin-top: 6px;
  color: var(--agx-ink);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.025em;
}
.agx-dash-satellite em {
  margin-top: 5px;
  color: var(--agx-ink-2);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.35;
}
.agx-dash-satellite--report {
  top: 78px;
  right: -38px;
}
.agx-dash-satellite--live {
  left: -36px;
  bottom: 130px;
  animation-delay: 0.6s;
}
.agx-dash-satellite--roi {
  right: 118px;
  bottom: -28px;
  animation-delay: 1.1s;
}

/* Monetization routes: make revenue feel like a system, not cards. */
.agx-dark .agx-head,
.agx-rev-total,
.agx-rev,
.agx-dark-foot {
  position: relative;
  z-index: 2;
}
.agx-money-routes {
  position: absolute;
  inset: 118px -32px 96px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}
.agx-money-routes svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.agx-money-route {
  fill: none;
  stroke: rgba(255, 122, 24, 0.42);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  filter: drop-shadow(0 0 12px rgba(255, 122, 24, 0.2));
  animation: agx-route-drift 7s linear infinite;
}
.agx-money-route--soft {
  stroke: rgba(255, 255, 255, 0.15);
  animation-duration: 8.5s;
}
.agx-money-route--green {
  stroke: rgba(52, 211, 153, 0.34);
  animation-duration: 6.2s;
}
.agx-money-node,
.agx-money-core {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.agx-money-core {
  left: 50%;
  top: 45%;
  height: 42px;
  padding: 0 17px;
  transform: translate(-50%, -50%);
  border-color: rgba(255, 122, 24, 0.34);
  background: rgba(255, 122, 24, 0.14);
  color: #fff;
  box-shadow: 0 0 42px rgba(255, 122, 24, 0.24);
}
.agx-money-core i {
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--agx-accent);
  box-shadow: 0 0 0 8px rgba(255, 122, 24, 0.12);
  animation: agx-node-pulse 2.6s ease-in-out infinite;
}
.agx-money-node--merch {
  left: 5%;
  bottom: 18%;
}
.agx-money-node--tickets {
  left: 7%;
  top: 15%;
}
.agx-money-node--brand {
  right: 5%;
  top: 22%;
}
.agx-money-node--contacts {
  right: 7%;
  bottom: 18%;
}

@keyframes agx-route-drift {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -150;
  }
}
@keyframes agx-node-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes agx-stage-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.08);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 122, 24, 0.14);
  }
}
@keyframes agx-sheen {
  0%,
  45% {
    transform: translateX(-120%) rotate(17deg);
  }
  78%,
  100% {
    transform: translateX(360%) rotate(17deg);
  }
}
@keyframes agx-scene-scan {
  0%,
  54% {
    transform: translateX(-130%);
  }
  82%,
  100% {
    transform: translateX(130%);
  }
}
@keyframes agx-bar-breathe {
  0%,
  100% {
    filter: saturate(1);
    transform: scaleY(1);
  }
  50% {
    filter: saturate(1.22);
    transform: scaleY(1.035);
  }
}
@keyframes agx-float-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@media (max-width: 1080px) {
  .agx-dash-satellite,
  .agx-dash-orbit {
    display: none;
  }
  .agx-dash-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -10px;
  }
}
@media (max-width: 760px) {
  .agx-system-map,
  .agx-money-routes {
    display: none;
  }
  .agx-loop-card {
    display: none;
  }
  .agx-dash-story {
    grid-template-columns: 1fr;
    margin: -8px 0 24px;
  }
  .agx-dash-story::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agx-system-map-path,
  .agx-system-node::before,
  .agx-loop-card::after,
  .agx-loop-stage i,
  .agx-cell .agx-bars i,
  .agx-cell .agx-path path:last-child,
  .agx-scene::after,
  .agx-dash-story-dot,
  .agx-dash-orbit-line,
  .agx-dash-satellite,
  .agx-money-route,
  .agx-money-core i {
    animation: none !important;
  }
}

/* --- visual QA adjustments for the motion pass ---------------------- */
.agx-ccard--2 {
  top: 200px;
  right: 47%;
}
.agx-dash-satellite--report {
  top: 66px;
  right: -122px;
  width: 178px;
}
.agx-dash-satellite--live {
  left: -54px;
}
.agx-dash-satellite--roi {
  bottom: -36px;
}
@media (max-width: 1320px) {
  .agx-dash-satellite {
    display: none;
  }
}
@media (max-width: 1080px) {
  .agx-ccard--2 {
    display: none;
  }
}
@media (max-width: 760px) {
  .agx-ccard--2 {
    display: none;
  }
}

/* ==================================================================== *
 * ENTERPRISE LAYER v3 — product scenes, bento rhythm, scroll pipeline
 * ==================================================================== */

/* --- shared scene shell ---------------------------------------------- */
.agx-sc {
  border: 1px solid var(--agx-line-soft);
  border-radius: 14px;
  background: var(--agx-surface-2);
  padding: 14px;
  display: grid;
  gap: 11px;
  align-content: start;
}
.agx-sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-sc-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--agx-line);
  background: var(--agx-surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--agx-ink-2);
  white-space: nowrap;
}
.agx-sc-chip--pos {
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(22, 163, 74, 0.07);
}
.agx-sc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agx-sc-rows {
  display: grid;
  gap: 6px;
}
.agx-sc-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--agx-surface);
  border: 1px solid var(--agx-line-soft);
}
.agx-sc-row img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agx-sc-row b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-sc-row--lead {
  grid-template-columns: 8px minmax(0, 1fr) auto;
}
.agx-sc-row--kv {
  grid-template-columns: minmax(0, 1fr) auto;
}
.agx-sc-row--kv span {
  font-size: 12.5px;
  color: var(--agx-ink-2);
}
.agx-sc-row--kv b {
  font-size: 12.5px;
}
.agx-sc-role,
.agx-sc-src {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  white-space: nowrap;
}
.agx-sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--agx-ink-2);
  padding-top: 9px;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-sc-foot b {
  color: var(--agx-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.agx-sc-tick {
  color: var(--agx-pos) !important;
}
.agx-sc-foot--roster {
  gap: 10px;
}
.agx-sc-stack {
  display: inline-flex;
  flex: none;
}
.agx-sc-stack img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--agx-surface);
}
.agx-sc-stack img + img {
  margin-left: -8px;
}
.agx-sc-foot--roster > span:nth-of-type(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agx-sc-seats {
  display: flex;
  gap: 4px;
}
.agx-sc-seats i {
  flex: 1;
  height: 20px;
  border-radius: 4px;
  display: block;
  background: var(--agx-surface-3);
  transform-origin: bottom;
}
.agx-sc-seats i.on {
  background: var(--agx-ink);
}
.agx-sc-seats--wide i {
  height: 24px;
}
.agx-sc-chart {
  width: 100%;
  height: 72px;
  display: block;
}
.agx-sc-split {
  display: grid;
  gap: 6px;
}
.agx-sc-split-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--agx-ink-2);
}
.agx-sc-track {
  height: 5px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  overflow: hidden;
}
.agx-sc-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--agx-ink);
}

/* revenue pipe */
.agx-sc-pipe {
  position: relative;
  min-height: 122px;
}
.agx-sc-pipe svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.agx-sc-pipe-in {
  position: relative;
  display: grid;
  gap: 12px;
  width: 54%;
}
.agx-sc-pipe-in span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--agx-ink-3);
  background: var(--agx-surface);
  border: 1px solid var(--agx-line-soft);
  border-radius: 9px;
  padding: 6px 9px;
}
.agx-sc-pipe-in b {
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-sc-pipe-out {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--agx-ink);
  color: #fff;
  border-radius: 12px;
  padding: 11px 14px;
  text-align: right;
}
.agx-sc-pipe-out span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.66;
}
.agx-sc-pipe-out b {
  display: block;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* deeplink route */
.agx-sc-route {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.agx-sc-route-col {
  display: grid;
  gap: 9px;
}
.agx-sc-route-col img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: block;
}
.agx-sc-route-svg {
  width: 100%;
  height: 96px;
  display: block;
}
.agx-sc-route-out {
  font-size: 11px;
  font-weight: 650;
  color: var(--agx-ink);
  background: var(--agx-surface);
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* report doc */
.agx-sc-doc {
  background: var(--agx-surface);
  border: 1px solid var(--agx-line-soft);
  border-radius: 11px;
  padding: 12px;
  display: grid;
  gap: 7px;
}
.agx-sc-doc-t {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-sc-doc-l {
  height: 5px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  display: block;
}
.agx-sc-doc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
  margin-top: 4px;
}
.agx-sc-doc-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #1d1d21, #52525c);
  display: block;
}
.agx-sc-icons {
  display: flex;
  gap: 8px;
}
.agx-sc-icons img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
}

/* --- bento rhythm ----------------------------------------------------- */
.agx-bento-sec {
  position: relative;
  overflow: clip;
}
.agx-bento-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10, 10, 10, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(
    ellipse 78% 62% at 50% 42%,
    #000 35%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 78% 62% at 50% 42%,
    #000 35%,
    transparent 100%
  );
}
.agx-bento-sec .agx-shell {
  position: relative;
}
.agx-cell--4 {
  grid-column: span 4;
}
.agx-cell--6 {
  grid-column: span 6;
}
.agx-cell-copy {
  max-width: 420px;
}
.agx-cell--feature {
  min-height: 300px;
}
.agx-cell--6 {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-height: 0;
}
.agx-cell--6 .agx-cell-art {
  margin-top: 0;
  flex: 0 0 auto;
  min-width: 320px;
}

/* --- workflow: sticky rail -------------------------------------------- */
.agx-flow-sec {
  position: relative;
}
.agx-flow2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: start;
}
.agx-flow2-steps {
  position: relative;
  padding-left: 4px;
}
.agx-flow2-line {
  position: absolute;
  left: 21px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--agx-line);
}
.agx-flow2-prog {
  position: absolute;
  left: 21px;
  top: 26px;
  width: 2px;
  background: linear-gradient(180deg, var(--agx-accent), #0a0a0a);
}
.agx-flow2-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 30px 0;
}
.agx-flow2-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--agx-line);
  background: var(--agx-surface);
  font-size: 12px;
  font-weight: 700;
  color: var(--agx-ink-3);
  font-variant-numeric: tabular-nums;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
  position: relative;
  z-index: 2;
}
.agx-flow2-step.on .agx-flow2-node {
  background: var(--agx-ink);
  color: #fff;
  border-color: var(--agx-ink);
}
.agx-flow2-copy {
  opacity: 0.5;
  transition: opacity 0.35s ease;
}
.agx-flow2-step.on .agx-flow2-copy {
  opacity: 1;
}
.agx-flow2-inline {
  display: none;
  grid-column: 2;
  margin-top: 14px;
}
.agx-flow2-rail {
  position: relative;
}
.agx-flow2-sticky {
  position: sticky;
  top: 112px;
}
.agx-flow2-preview {
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
}
.agx-flow2-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
}
.agx-flow2-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 650;
  color: var(--agx-ink-3);
  font-variant-numeric: tabular-nums;
}
.agx-flow2-preview-body {
  padding: 18px;
  min-height: 268px;
}

/* --- trust proof ------------------------------------------------------ */
.agx-marquee-glow {
  position: absolute;
  inset: -30% 0 auto 0;
  height: 320px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 46% 60% at 50% 50%,
    rgba(255, 122, 24, 0.09),
    transparent 70%
  );
}
.agx-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 48px;
}
.agx-proof-item {
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius);
  background: var(--agx-surface);
  padding: 24px;
  text-align: center;
}
.agx-proof-item b {
  display: block;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.agx-proof-item span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--agx-ink-2);
}
.agx-proof-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

/* --- use-case visuals -------------------------------------------------- */
.agx-uc-card {
  min-height: 300px;
}
.agx-uc-visual {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-uc-roster {
  display: grid;
  gap: 8px;
  align-content: start;
}
.agx-uc-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--agx-ink-2);
  padding-top: 7px;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-uc-roster-row b {
  color: var(--agx-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.agx-uc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.agx-uc-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.agx-uc-track {
  display: grid;
  gap: 8px;
}
.agx-uc-track-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--agx-ink-2);
}
.agx-uc-release {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.agx-uc-release span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  padding: 5px 11px 5px 6px;
  font-size: 11.5px;
  color: var(--agx-ink-2);
  background: var(--agx-surface-2);
}
.agx-uc-release img {
  border-radius: 6px;
  display: block;
}
.agx-uc-camp {
  display: grid;
  gap: 10px;
}
.agx-uc-camp-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
}
.agx-uc-camp-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #1d1d21, #52525c);
  display: block;
}
.agx-uc-camp-bars i:last-child {
  background: linear-gradient(180deg, var(--agx-accent), #ffab6b);
}
.agx-uc-camp-kv {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--agx-ink-2);
}
.agx-uc-camp-kv b {
  color: var(--agx-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.agx-uc-funnel {
  display: grid;
  gap: 6px;
}
.agx-uc-funnel-row {
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #0a0a0a, #3a3a42);
  white-space: nowrap;
  overflow: hidden;
}
.agx-uc-funnel-row b {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.agx-uc-funnel-row:last-child {
  background: linear-gradient(90deg, var(--agx-accent), #ffab6b);
}
.agx-uc-report {
  display: grid;
  gap: 7px;
}

/* --- responsive v3 ----------------------------------------------------- */
@media (max-width: 1080px) {
  .agx-cell--4,
  .agx-cell--6 {
    grid-column: span 3;
  }
  .agx-cell--6 {
    flex-direction: column;
    align-items: stretch;
  }
  .agx-cell--6 .agx-cell-art {
    min-width: 0;
  }
  .agx-flow2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .agx-flow2-rail {
    display: none;
  }
  .agx-flow2-inline {
    display: block;
  }
  .agx-proof {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .agx-cell--4,
  .agx-cell--6 {
    grid-column: span 1;
  }
  .agx-cell--feature,
  .agx-uc-card {
    min-height: 0;
  }
  .agx-flow2-step {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }
  .agx-flow2-node {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }
  .agx-flow2-line,
  .agx-flow2-prog {
    left: 17px;
  }
  .agx-sc-pipe-in {
    width: 62%;
  }
  .agx-sc-pipe-out {
    position: static;
    transform: none;
    margin-top: 12px;
    text-align: left;
  }
  .agx-sc-pipe {
    min-height: 0;
  }
  .agx-sc-pipe svg {
    display: none;
  }
}

/* --- reduced motion v3 -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .agx-flow2-node,
  .agx-flow2-copy {
    transition: none;
  }
  .agx-flow2-copy {
    opacity: 1;
  }
}
/* Let the grid row equalise card heights instead of forcing a min-height —
   a fixed minimum left a dead gap under short copy (monetization, deeplink). */
.agx-cell--feature {
  min-height: 0;
}
.agx-cell-art {
  margin-top: auto;
  padding-top: 18px;
}
.agx-cell-art > .agx-sc {
  height: 100%;
}
/* pause the ambient bar breathing when motion is reduced */
@media (prefers-reduced-motion: reduce) {
  .agx-cell .agx-bars i {
    animation: none !important;
  }
}
/* give the sticky preview more presence next to the tall step column */
.agx-flow2-preview-body {
  min-height: 340px;
  display: grid;
  align-content: start;
}
/* label rule must not reach the AgenciesCountUp span nested inside <b> */
.agx-proof-item > span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--agx-ink-2);
}
.agx-proof-item b span {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
/* stronger edge fade so the marquee reads as flowing, not clipped */
.agx-marquee::before,
.agx-marquee::after {
  width: 190px;
}
.agx-marquee::before {
  background: linear-gradient(90deg, #fff 26%, rgba(255, 255, 255, 0) 100%);
}
.agx-marquee::after {
  background: linear-gradient(270deg, #fff 26%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 760px) {
  .agx-marquee::before,
  .agx-marquee::after {
    width: 64px;
  }
}

/* ==================================================================== *
 * ENTERPRISE LAYER v4 — final visual direction pass
 * ==================================================================== */
.agx-stage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--agx-ink-3);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.agx-stage-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-accent);
  box-shadow: 0 0 0 6px rgba(255, 122, 24, 0.12);
}

/* --- trust: roster network proof ------------------------------------- */
.agx-trust {
  position: relative;
  overflow: clip;
}
.agx-trust-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(
      220px,
      0.58fr
    );
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 72% 34%,
      rgba(255, 122, 24, 0.12),
      transparent 36%
    ),
    radial-gradient(
      circle at 38% 0%,
      rgba(59, 130, 246, 0.09),
      transparent 28%
    ),
    linear-gradient(135deg, #ffffff, #fafafb);
  box-shadow: 0 30px 90px rgba(10, 10, 10, 0.08);
  padding: 28px;
  margin: -10px auto 42px;
  overflow: hidden;
}
.agx-trust-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 56% 48%, #000 0%, transparent 76%);
  pointer-events: none;
}
.agx-trust-stage-copy,
.agx-trust-network,
.agx-trust-activity {
  position: relative;
  z-index: 1;
}
.agx-trust-stage-copy b {
  display: block;
  margin-top: 18px;
  color: var(--agx-ink);
  font-size: clamp(52px, 7vw, 86px);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.92;
}
.agx-trust-stage-copy b span {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.agx-trust-stage-copy p {
  max-width: 310px;
  margin: 18px 0 0;
  color: var(--agx-ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.agx-trust-network {
  min-height: 360px;
}
.agx-trust-network svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.agx-trust-network circle,
.agx-trust-network path {
  fill: none;
  stroke: rgba(10, 10, 10, 0.12);
  stroke-width: 1.2;
  stroke-dasharray: 8 14;
  animation: agx-route-drift 9s linear infinite;
}
.agx-trust-network path:nth-of-type(2) {
  stroke: rgba(255, 122, 24, 0.44);
  animation-duration: 7s;
}
.agx-trust-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  box-shadow: 0 20px 54px rgba(10, 10, 10, 0.24);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.agx-trust-core i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--agx-accent);
  box-shadow: 0 0 0 7px rgba(255, 122, 24, 0.16);
}
.agx-trust-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 16px 38px rgba(10, 10, 10, 0.12);
  backdrop-filter: blur(14px);
  animation: agx-float-soft 7s ease-in-out infinite;
}
.agx-trust-node img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  display: block;
}
.agx-trust-node--1 {
  left: 15%;
  top: 17%;
}
.agx-trust-node--2 {
  right: 16%;
  top: 12%;
  animation-delay: 0.5s;
}
.agx-trust-node--3 {
  left: 8%;
  top: 52%;
  animation-delay: 1s;
}
.agx-trust-node--4 {
  right: 8%;
  top: 54%;
  animation-delay: 1.4s;
}
.agx-trust-node--5 {
  left: 28%;
  bottom: 8%;
  animation-delay: 0.8s;
}
.agx-trust-node--6 {
  right: 29%;
  bottom: 6%;
  animation-delay: 1.7s;
}
.agx-trust-node--7 {
  left: 41%;
  top: 4%;
  animation-delay: 1.2s;
}
.agx-trust-node--8 {
  right: 42%;
  bottom: 16%;
  animation-delay: 0.35s;
}
.agx-trust-activity {
  display: grid;
  gap: 10px;
}
.agx-trust-activity span {
  display: grid;
  grid-template-columns: 8px 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  padding: 12px;
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.055);
  color: var(--agx-ink-2);
  font-size: 12.5px;
}
.agx-trust-activity i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agx-pos);
}
.agx-trust-activity b {
  color: var(--agx-ink-3);
  font-size: 11px;
}

/* --- problem: chaos to command board --------------------------------- */
.agx-problem {
  overflow: clip;
}
.agx-scatter {
  max-width: 1120px;
  height: 540px;
  margin-bottom: 38px;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 32px;
  background:
    radial-gradient(
      circle at 50% 47%,
      rgba(255, 122, 24, 0.11),
      transparent 28%
    ),
    linear-gradient(rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    #fbfbfc;
  background-size:
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  overflow: hidden;
}
.agx-chaos-routes {
  position: absolute;
  inset: 34px 52px 48px;
  width: calc(100% - 104px);
  height: calc(100% - 82px);
  pointer-events: none;
}
.agx-chaos-routes path {
  fill: none;
  stroke: rgba(10, 10, 10, 0.15);
  stroke-width: 1.3;
  stroke-dasharray: 8 14;
  animation: agx-route-drift 8s linear infinite;
}
.agx-chaos-routes path:nth-child(even) {
  stroke: rgba(255, 122, 24, 0.48);
  animation-duration: 6.5s;
}
.agx-chaos-routes circle {
  fill: var(--agx-accent);
  filter: drop-shadow(0 0 12px rgba(255, 122, 24, 0.42));
}
.agx-chaos-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(10, 10, 10, 0.08);
  background: rgba(255, 255, 255, 0.76);
  color: var(--agx-ink-3);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.agx-chaos-label--before {
  left: 24px;
  top: 22px;
}
.agx-chaos-label--after {
  right: 24px;
  top: 22px;
  color: var(--agx-ink);
}
.agx-tool {
  z-index: 3;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.08);
}
.agx-collapse-target {
  width: min(430px, 86%);
  border-radius: 22px;
  box-shadow: 0 34px 100px rgba(10, 10, 10, 0.16);
}
.agx-collapse-bar {
  padding: 13px 16px;
}
.agx-collapse-hero {
  border: 1px solid var(--agx-line-soft);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(255, 122, 24, 0.14),
      transparent 40%
    ),
    var(--agx-surface-2);
  padding: 14px;
}
.agx-collapse-hero span,
.agx-collapse-hero em {
  display: block;
  color: var(--agx-ink-3);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}
.agx-collapse-hero b {
  display: block;
  margin: 4px 0;
  color: var(--agx-ink);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.025em;
}
.agx-collapse-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.agx-collapse-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  align-items: start;
}
.agx-collapse-row b {
  font-size: 15px;
}
.agx-collapse-row em {
  color: var(--agx-pos);
  font-size: 11px;
  font-style: normal;
}
.agx-collapse-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}
.agx-collapse-export i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-accent);
}
.agx-pain {
  max-width: 1120px;
}
.agx-pain-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(10, 10, 10, 0.04);
}
.agx-pain-item > i {
  display: none;
}
.agx-pain-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 122, 24, 0.1);
  color: var(--agx-accent);
  font-size: 11px;
  font-weight: 750;
}
.agx-pain-stat {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--agx-ink-3);
  font-size: 11px;
  white-space: nowrap;
}
.agx-pain-stat b {
  color: var(--agx-ink);
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
}

/* --- bento: command map before feature cards ------------------------- */
.agx-feature-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.42fr) minmax(
      210px,
      0.54fr
    );
  gap: 24px;
  align-items: stretch;
  margin: -12px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 52% 44%,
      rgba(255, 122, 24, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(59, 130, 246, 0.13),
      transparent 32%
    ),
    #0b0b0d;
  color: #fff;
  overflow: hidden;
  padding: 26px;
  box-shadow: 0 36px 110px rgba(10, 10, 10, 0.18);
}
.agx-feature-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 52% 48%, #000 0%, transparent 78%);
}
.agx-feature-stage-copy,
.agx-feature-map,
.agx-feature-output {
  position: relative;
  z-index: 1;
}
.agx-feature-stage-copy {
  align-self: center;
}
.agx-feature-stage .agx-stage-kicker {
  color: rgba(255, 255, 255, 0.54);
}
.agx-feature-stage-copy h3 {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.agx-feature-stage-copy p {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.55;
}
.agx-feature-map {
  min-height: 360px;
}
.agx-feature-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.agx-feature-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.4;
  stroke-dasharray: 10 16;
  animation: agx-route-drift 7.5s linear infinite;
}
.agx-feature-route--hot {
  stroke: rgba(255, 122, 24, 0.74);
  filter: drop-shadow(0 0 12px rgba(255, 122, 24, 0.26));
}
.agx-feature-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  padding: 18px;
  text-align: center;
}
.agx-feature-core span,
.agx-feature-core em {
  display: block;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  font-style: normal;
}
.agx-feature-core b {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.035em;
}
.agx-feature-node {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 108px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  padding: 10px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.agx-feature-node span,
.agx-feature-node b {
  display: block;
}
.agx-feature-node span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agx-feature-node b {
  margin-top: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.agx-feature-device {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  /* 94%: at 11px the three names no longer fit the old 82% row and were being
     cut mid-word. */
  max-width: 94%;
}
.agx-feature-device b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-feature-device span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  padding: 6px 10px 6px 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.agx-feature-device img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.agx-feature-output {
  display: grid;
  align-content: center;
  gap: 10px;
}
.agx-feature-output-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.agx-feature-output-icons img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
}
.agx-feature-output > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.78);
  padding: 12px;
  font-size: 12.5px;
  font-weight: 650;
}
.agx-feature-output > span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-pos);
  box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.14);
}
.agx-cell {
  background:
    radial-gradient(
      circle at 86% 8%,
      rgba(255, 122, 24, 0.065),
      transparent 34%
    ),
    var(--agx-surface);
}
.agx-cell--feature {
  border-radius: 28px;
}
.agx-cell-art > .agx-sc {
  background:
    linear-gradient(rgba(10, 10, 10, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.026) 1px, transparent 1px),
    var(--agx-surface-2);
  background-size: 28px 28px;
}

/* --- workflow: operating pipeline ------------------------------------ */
.agx-flow-sec {
  overflow: clip;
  background:
    radial-gradient(
      circle at 78% 24%,
      rgba(255, 122, 24, 0.09),
      transparent 28%
    ),
    linear-gradient(180deg, #fff 0%, #f8f8fa 100%);
}
.agx-flow-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 980px;
  margin: -18px auto 52px;
  padding: 10px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(10, 10, 10, 0.06);
}
.agx-flow-ribbon::before {
  content: "";
  position: absolute;
  left: 42px;
  right: 72px;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 122, 24, 0.52),
    transparent
  );
}
.agx-flow-ribbon span,
.agx-flow-ribbon b {
  position: relative;
  z-index: 1;
}
.agx-flow-ribbon span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--agx-ink-3);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04);
}
.agx-flow-ribbon span.on {
  color: #fff;
  background: #0a0a0a;
}
.agx-flow-ribbon i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-accent);
}
.agx-flow-ribbon b {
  margin-left: 4px;
  color: var(--agx-ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.agx-flow2-step {
  padding: 24px 0;
}
.agx-flow2-copy {
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 14px 16px;
  margin-top: -14px;
}
.agx-flow2-step.on .agx-flow2-copy {
  border-color: var(--agx-line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.045);
}
.agx-flow2-output {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin-top: 13px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.1);
  color: #c2410c;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agx-flow2-preview {
  background:
    radial-gradient(
      circle at 72% 8%,
      rgba(255, 122, 24, 0.14),
      transparent 34%
    ),
    #0b0b0d;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 36px 110px rgba(10, 10, 10, 0.22);
}
.agx-flow2-preview-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}
.agx-flow2-preview .agx-panel-dots i {
  background: rgba(255, 255, 255, 0.22);
}
.agx-flow2-preview .agx-panel-title,
.agx-flow2-preview .agx-flow2-count {
  color: rgba(255, 255, 255, 0.66);
}
.agx-flow2-output-badge {
  margin-left: 8px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.14);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.agx-flow2-preview-body .agx-sc {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.06);
}
.agx-flow2-preview-body .agx-sc-row,
.agx-flow2-preview-body .agx-sc-doc,
.agx-flow2-preview-body .agx-sc-pipe-in span,
.agx-flow2-preview-body .agx-sc-route-out {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
}
.agx-flow2-preview-body .agx-sc-head,
.agx-flow2-preview-body .agx-sc-row b,
.agx-flow2-preview-body .agx-sc-foot b,
.agx-flow2-preview-body .agx-sc-doc-t {
  color: #fff;
}
.agx-flow2-preview-body .agx-sc-row span,
.agx-flow2-preview-body .agx-sc-foot,
.agx-flow2-preview-body .agx-sc-split-row {
  color: rgba(255, 255, 255, 0.62);
}
.agx-flow2-preview-body .agx-sc-track {
  background: rgba(255, 255, 255, 0.1);
}
.agx-flow2-preview-body .agx-sc-track i,
.agx-flow2-preview-body .agx-sc-seats i.on {
  background: #fff;
}

/* --- use cases: market coverage map ---------------------------------- */
.agx-market-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.1fr) auto;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 80% 22%,
      rgba(255, 122, 24, 0.11),
      transparent 34%
    ),
    linear-gradient(135deg, #fff, #fafafb);
  box-shadow: 0 28px 90px rgba(10, 10, 10, 0.07);
  padding: 26px;
  margin: -12px 0 28px;
  overflow: hidden;
}
.agx-market-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10, 10, 10, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
}
.agx-market-copy,
.agx-market-map,
.agx-market-avatars {
  position: relative;
  z-index: 1;
}
.agx-market-copy h3 {
  margin: 14px 0 0;
  color: var(--agx-ink);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.agx-market-copy p {
  margin: 14px 0 0;
  color: var(--agx-ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.agx-market-map {
  display: grid;
  gap: 8px;
}
.agx-market-core {
  width: max-content;
  margin: 0 auto 8px;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}
.agx-market-lane {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--agx-line-soft);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  padding: 9px 11px;
}
/* `.agx-market-lane span` used to live here. Every child of a lane is now a
   span (`.agx-market-in`, `.agx-market-core`, `.agx-market-out`), so at (0,2,0)
   it outranked all three of their own font-size rules — the OS chip and both
   labels were stuck at 11px. */
.agx-market-lane b {
  display: block;
  color: var(--agx-ink);
  font-size: 12px;
}
.agx-market-lane:nth-child(odd) .agx-sc-track i {
  background: linear-gradient(90deg, var(--agx-accent), #ffb36f);
}
.agx-market-avatars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agx-market-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.13);
}
.agx-uc-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(255, 122, 24, 0.075),
      transparent 32%
    ),
    var(--agx-surface);
}
.agx-uc-card::before {
  content: "";
  position: absolute;
  inset: auto -16% -34% 14%;
  height: 48%;
  background:
    linear-gradient(rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: rotate(-7deg);
  pointer-events: none;
}
.agx-uc-card > * {
  position: relative;
  z-index: 1;
}
.agx-uc-signal {
  position: absolute;
  right: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.045);
  color: var(--agx-ink-3);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.agx-uc-m {
  padding-right: 110px;
}
.agx-uc-card:hover .agx-uc-signal {
  background: #0a0a0a;
  color: #fff;
}

@media (max-width: 1080px) {
  .agx-trust-stage,
  .agx-feature-stage,
  .agx-market-stage {
    grid-template-columns: 1fr;
  }
  .agx-trust-network,
  .agx-feature-map {
    min-height: 330px;
  }
  .agx-trust-activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-feature-output {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-market-avatars {
    flex-direction: row;
  }
  .agx-flow-ribbon {
    flex-wrap: wrap;
    border-radius: 22px;
  }
  .agx-flow-ribbon::before {
    display: none;
  }
}
@media (max-width: 760px) {
  .agx-trust-stage,
  .agx-feature-stage,
  .agx-market-stage {
    padding: 20px;
    border-radius: 22px;
  }
  .agx-trust-stage-copy b {
    font-size: 52px;
  }
  .agx-trust-network,
  .agx-feature-map {
    min-height: 300px;
  }
  .agx-trust-activity,
  .agx-feature-output {
    grid-template-columns: 1fr;
  }
  .agx-trust-node {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .agx-trust-node img {
    width: 34px;
    height: 34px;
  }
  .agx-scatter {
    height: 560px;
    border-radius: 24px;
  }
  .agx-chaos-routes,
  .agx-chaos-label {
    display: none;
  }
  .agx-collapse-target {
    width: calc(100% - 28px);
  }
  .agx-collapse-metrics {
    grid-template-columns: 1fr;
  }
  .agx-pain-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .agx-pain-stat {
    grid-column: 2;
    justify-items: start;
    margin-top: 8px;
  }
  .agx-feature-stage-copy h3,
  .agx-market-copy h3 {
    font-size: 30px;
  }
  .agx-feature-node {
    min-width: 92px;
    padding: 8px 10px;
  }
  .agx-flow-ribbon {
    justify-content: flex-start;
  }
  .agx-flow-ribbon span {
    height: 30px;
    font-size: 11px;
  }
  .agx-flow2-copy {
    margin-top: -8px;
    padding: 10px 12px;
  }
  .agx-flow2-preview {
    background: var(--agx-surface);
    color: var(--agx-ink);
  }
  .agx-market-stage {
    gap: 18px;
  }
  .agx-market-lane {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .agx-uc-signal {
    position: static;
    width: max-content;
  }
  .agx-uc-m {
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agx-trust-network circle,
  .agx-trust-network path,
  .agx-trust-node,
  .agx-chaos-routes path,
  .agx-feature-route {
    animation: none !important;
  }
}

/* --- final visual QA polish ------------------------------------------ */
.agx-cell:not(.agx-cell--6) .agx-cell-art {
  margin-top: 28px;
  padding-top: 0;
}
.agx-cell--feature .agx-cell-art {
  margin-top: 24px;
}
.agx-cell--feature .agx-cell-art > .agx-sc,
.agx-cell--3 .agx-cell-art > .agx-sc {
  min-height: 210px;
  align-content: center;
}
.agx-cell--2 .agx-cell-art > .agx-sc {
  min-height: 178px;
}
.agx-uc-card {
  gap: 10px;
}
.agx-uc-signal {
  position: static;
  width: max-content;
  max-width: 100%;
  margin: -2px 0 2px;
  align-self: flex-start;
}
.agx-uc-m {
  padding-right: 0;
  max-width: 100%;
}
.agx-market-avatars img:nth-child(2n) {
  transform: translateX(12px);
}
.agx-market-avatars img:nth-child(3n) {
  transform: translateX(-8px);
}
@media (max-width: 760px) {
  .agx-cell:not(.agx-cell--6) .agx-cell-art,
  .agx-cell--feature .agx-cell-art {
    margin-top: 18px;
  }
  .agx-cell--feature .agx-cell-art > .agx-sc,
  .agx-cell--3 .agx-cell-art > .agx-sc,
  .agx-cell--2 .agx-cell-art > .agx-sc {
    min-height: 0;
  }
  .agx-market-avatars img {
    transform: none !important;
  }
}

/* --- anchor offset ---------------------------------------------------- *
 * The landing navbar is position:fixed (82px desktop). Section padding
 * currently clears it, but that is incidental — this makes anchor jumps
 * ("Explore dashboard", "Calculate pricing") safe if padding ever changes,
 * and gives real headroom at the tighter mobile padding. */
.agx[id],
#agency-dashboard,
#agency-pricing {
  scroll-margin-top: 104px;
}
@media (max-width: 760px) {
  .agx[id],
  #agency-dashboard,
  #agency-pricing {
    scroll-margin-top: 88px;
  }
}
/* Talent chips must shrink and stay on one clean row instead of overrunning
   each other (they were nowrap with no shrink, so names collided). */
.agx-feature-device {
  max-width: calc(100% - 24px);
  bottom: 10px;
}
.agx-feature-device span {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.agx-feature-device span b,
.agx-feature-device span > *:not(img) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Deeplink routing reads as a native-app moment — dark panel, per the brief */
.agx-sc--deeplink {
  background: #0d0d10;
  border-color: rgba(255, 255, 255, 0.1);
}
.agx-sc--deeplink .agx-sc-route-out {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.agx-sc--deeplink .agx-sc-foot {
  color: #a3a3ae;
  border-top-color: rgba(255, 255, 255, 0.1);
}
.agx-sc--deeplink .agx-sc-foot b {
  color: #fff;
}
.agx-sc--deeplink .agx-sc-route-col img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* tighten the chips so all three names fit without ellipsis at desktop width */
.agx-feature-device {
  max-width: calc(100% - 8px);
  gap: 6px;
}
.agx-feature-device span {
  padding: 4px 9px 4px 4px;
  font-size: 10.5px;
  gap: 6px;
}
.agx-feature-device span img {
  width: 20px;
  height: 20px;
}
@media (max-width: 1080px) {
  /* two chips is plenty once the stage narrows */
  .agx-feature-device span:nth-child(3) {
    display: none;
  }
}
/* Above 1200px the hero splits and the stage's map column drops from ~906px
   to ~537px, so the row is narrower there than it is at 1024 — three names do
   not fit and were being cut mid-word. */
@media (min-width: 1200px) {
  .agx-feature-device span:nth-child(3) {
    display: none;
  }
}

/* --- pipeline sticky fix ---------------------------------------------- *
 * `align-items: start` on the grid collapsed the rail to the height of the
 * preview panel, leaving position:sticky with zero travel — the preview
 * scrolled off the top instead of pinning. The rail must stretch to the row
 * height so sticky has somewhere to travel; the steps column keeps its own
 * natural alignment. */
.agx-flow2 {
  align-items: stretch;
}
.agx-flow2-steps {
  align-self: start;
}
.agx-flow2-rail {
  align-self: stretch;
  height: 100%;
}
.agx-flow2-sticky {
  position: sticky;
  top: 104px;
}

/* ==================================================================== *
 * MOBILE PASS — tighter rhythm, stacked dashboard, simplified visuals
 * Everything below is <=760px only; desktop is untouched.
 * ==================================================================== */
@media (max-width: 760px) {
  /* --- 1. global rhythm ------------------------------------------- */
  .agx-section {
    padding: 58px 0;
  }
  .agx-section--tight,
  .agx-trust {
    padding: 48px 0;
  }
  .agx-dark {
    padding: 58px 0;
  }
  .agx-final {
    padding: 60px 0;
  }
  .agx-hero {
    padding: 60px 0 44px;
  }
  .agx-head {
    margin-bottom: 26px;
  }
  .agx-h2 {
    font-size: clamp(27px, 7.6vw, 34px);
  }
  .agx-lede {
    font-size: 15.5px;
    margin-top: 14px;
  }
  .agx-eyebrow {
    margin-bottom: 12px;
  }
  .agx[id],
  #agency-dashboard,
  #agency-pricing {
    scroll-margin-top: 92px;
  }

  /* --- 2. hero: one clean stack ------------------------------------ */
  .agx-collage {
    min-height: 340px;
    transform: none;
  }
  /* tiny labels are unreadable at this size — the phone carries the story */
  .agx-float--lead,
  .agx-float--sales,
  .agx-ccard--2,
  .agx-trails,
  .agx-system-map {
    display: none;
  }
  .agx-float--views {
    top: 0;
    left: 0;
  }
  .agx-ccard--1 {
    top: 6px;
    right: 0;
  }
  .agx-ccard--3 {
    bottom: 0;
    left: 0;
  }
  .agx-slab {
    inset: 58px 96px auto 8px;
  }
  .agx-slab-chart {
    height: 46px;
  }
  .agx-phone {
    width: 132px;
    right: 0;
    bottom: 8px;
  }
  .agx-badges {
    display: none;
  }
  .agx-hero-proof {
    margin-top: 26px;
    padding-top: 18px;
    gap: 8px 18px;
  }
  .agx-hero-sub {
    margin-top: 18px;
    font-size: 16.5px;
  }
  .agx-cta-row {
    margin-top: 24px;
  }

  /* --- 3. trust: shorter network, no empty tail -------------------- */
  .agx-trust-stage {
    gap: 18px;
    padding: 20px;
  }
  .agx-trust-network {
    height: 210px;
  }
  .agx-trust-node--4,
  .agx-trust-node--5,
  .agx-trust-node--6 {
    display: none;
  }
  .agx-trust-activity span:nth-child(n + 3) {
    display: none;
  }
  .agx-proof {
    margin-top: 26px;
    gap: 10px;
  }
  .agx-proof-item {
    padding: 18px;
  }
  .agx-proof-item b {
    font-size: 30px;
  }
  .agx-proof-tags {
    margin-top: 14px;
  }
  .agx-marquee {
    gap: 10px;
  }
  .agx-mcard {
    padding: 9px 15px 9px 9px;
  }
  .agx-mcard img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  /* --- 4. problem: compact before/after ---------------------------- */
  .agx-scatter {
    height: 236px;
    margin-bottom: 0;
  }
  /* keep a couple of scattered artefacts for the "before" read, drop the rest */
  .agx-tool:nth-child(n + 5) {
    display: none;
  }
  .agx-tool {
    font-size: 11px;
    padding: 7px 10px;
  }
  .agx-collapse-target {
    width: min(280px, 86%);
  }
  .agx-pain {
    gap: 10px;
    margin-top: 8px;
  }
  .agx-pain-item {
    padding: 16px 18px;
  }
  .agx-pain-item p {
    font-size: 14.5px;
  }

  /* --- 5. bento: shorter stage, denser cards ----------------------- */
  .agx-feature-stage {
    padding: 22px;
    gap: 20px;
  }
  .agx-feature-map {
    min-height: 250px;
  }
  .agx-feature-node {
    padding: 8px 10px;
  }
  .agx-feature-stage-copy h3 {
    font-size: 24px;
  }
  .agx-bento {
    gap: 10px;
  }
  .agx-cell {
    padding: 20px;
    min-height: 0;
  }
  .agx-cell-art {
    padding-top: 14px;
  }
  .agx-cell-copy {
    max-width: none;
  }
  .agx-cell-h {
    font-size: 16.5px;
  }
  .agx-cell-p {
    font-size: 14px;
  }

  /* --- 6. dashboard: stacked, never cropped ------------------------ */
  /* replaces the horizontal-scroll fallback — two KPI cards sat outside the
     scroll viewport, so their count-ups never entered view and rendered 0 */
  .agx-dash-scroll {
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .agx-dash-scroll .agx-dash {
    min-width: 0;
  }
  .agx-dash {
    grid-template-columns: 1fr;
  }
  .agx-dash-orbit,
  .agx-dash-story {
    display: none;
  }
  .agx-main {
    padding: 16px 14px 18px;
  }
  .agx-dash-top {
    gap: 10px;
    margin-bottom: 14px;
  }
  .agx-dash-h {
    font-size: 17px;
  }
  .agx-dash-tools {
    gap: 6px;
  }
  .agx-ctl {
    height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
  }
  .agx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .agx-kpi {
    padding: 12px;
  }
  .agx-kpi-v {
    font-size: 19px;
  }
  .agx-chart-box {
    height: 168px;
  }
  .agx-grid-2,
  .agx-grid-3 {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .agx-card {
    padding: 14px;
  }
  .agx-tabs {
    gap: 2px;
    margin: 12px 0 10px;
  }
  .agx-tab {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* --- 7. monetization: revenue receipt ---------------------------- */
  .agx-money-routes {
    display: none;
  }
  .agx-rev-total {
    margin-bottom: 24px;
  }
  .agx-rev-total-v {
    font-size: clamp(40px, 12vw, 54px);
  }
  .agx-rev-total-s {
    font-size: 13px;
    margin-top: 10px;
  }
  .agx-rev {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
  }
  .agx-rev-card {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
  }
  .agx-rev-card:last-child {
    border-bottom: 0;
  }
  .agx-rev-card:hover {
    transform: none;
    background: transparent;
  }
  .agx-rev-k {
    font-size: 13px;
  }
  .agx-rev-v {
    font-size: 16px;
  }
  .agx-rev-d {
    display: inline;
    margin-left: 8px;
    font-size: 11.5px;
  }
  .agx-dark-foot {
    margin-top: 26px;
    gap: 10px;
  }

  /* --- 8. workflow: tighter, populated previews -------------------- */
  .agx-flow2-step {
    padding: 16px 0;
  }
  .agx-flow2-inline {
    margin-top: 10px;
  }
  .agx-flow2-copy .agx-step-p {
    font-size: 14.5px;
  }

  /* --- 9. use cases: tighter cards, safe badges -------------------- */
  .agx-market-stage {
    padding: 20px;
    gap: 18px;
  }
  .agx-market-map {
    gap: 6px;
  }
  .agx-market-lane {
    padding: 9px 11px;
  }
  .agx-market-avatars {
    display: none;
  }
  .agx-uc {
    gap: 10px;
  }
  .agx-uc-card {
    padding: 20px;
    min-height: 0;
  }
  .agx-uc-visual {
    padding-top: 14px;
  }
  .agx-uc-h {
    font-size: 16.5px;
  }
  .agx-uc-o {
    font-size: 14px;
  }

  /* faq + final */
  .agx-final h2 {
    font-size: clamp(28px, 8vw, 36px);
  }
  .agx-final p {
    margin-top: 16px;
    font-size: 16px;
  }
}
@media (max-width: 760px) {
  /* --- further tightening: bento / workflow / use cases were the three
     tallest blocks on mobile after the first pass ------------------- */

  /* product scenes carry less detail on a phone */
  .agx-sc {
    padding: 12px;
    gap: 9px;
  }
  .agx-sc-chart {
    height: 58px;
  }
  .agx-sc-route-svg {
    height: 74px;
  }
  .agx-sc-doc-bars {
    height: 34px;
  }
  .agx-sc-seats i {
    height: 16px;
  }
  .agx-sc-seats--wide i {
    height: 18px;
  }
  .agx-sc-pipe-in {
    width: 100%;
    gap: 8px;
  }
  .agx-bars {
    height: 48px;
  }

  /* bento: trim the third row of every list scene so cards stay compact */
  .agx-cell .agx-sc-rows .agx-sc-row:nth-child(3) {
    display: none;
  }
  .agx-cell .agx-sc-split-row:nth-child(3) {
    display: none;
  }
  .agx-feature-map {
    min-height: 210px;
  }
  .agx-feature-device {
    display: none;
  }

  /* workflow: inline previews stay, just less tall */
  .agx-flow2-inline .agx-sc-rows .agx-sc-row:nth-child(3) {
    display: none;
  }
  .agx-flow2-step {
    padding: 14px 0;
  }

  /* use cases: shorter visuals */
  .agx-uc-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .agx-uc-camp-bars {
    height: 40px;
  }
  .agx-uc-funnel-row {
    height: 22px;
    font-size: 10.5px;
  }
  .agx-uc-track {
    gap: 6px;
  }
}
/* Every agencies section clears the fixed navbar when scrolled to, not just
   the two with anchor ids — programmatic scrollIntoView hits these too. */
.agx {
  scroll-margin-top: 104px;
}
@media (max-width: 760px) {
  .agx {
    scroll-margin-top: 92px;
  }
}

/* --- tablet band ------------------------------------------------------ *
 * 761–1024px already stacks to a single column (the 1080px rules) but was
 * still carrying full desktop padding, so it ran nearly as tall as mobile.
 * Spacing only — layout stays as the 1080px rules set it. */
@media (min-width: 761px) and (max-width: 1024px) {
  .agx-section {
    padding: 76px 0;
  }
  .agx-section--tight,
  .agx-trust {
    padding: 60px 0;
  }
  .agx-dark,
  .agx-final {
    padding: 76px 0;
  }
  .agx-head {
    margin-bottom: 34px;
  }
  .agx-bento {
    gap: 12px;
  }
  .agx-cell {
    padding: 24px;
    min-height: 0;
  }
  .agx-uc-card {
    min-height: 0;
    padding: 24px;
  }
  .agx-flow2-step {
    padding: 20px 0;
  }
  .agx-feature-map {
    min-height: 280px;
  }
  .agx-trust-network {
    height: 260px;
  }
  /* two-up where a single column wastes the extra width */
  .agx-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-cell--2,
  .agx-cell--3,
  .agx-cell--4,
  .agx-cell--6 {
    grid-column: span 1;
  }
  .agx-cell--6 {
    grid-column: span 2;
  }
  .agx-uc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .agx-rev {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* `.agx-cell-art > .agx-sc` (0,2,0) outranks the single-class deeplink rule,
   so the dark treatment needs matching specificity. Grid texture kept, on dark. */
.agx-cell-art > .agx-sc--deeplink,
.agx-flow2-preview-body .agx-sc--deeplink {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    #0d0d10;
  background-size: 28px 28px;
  border-color: rgba(255, 255, 255, 0.12);
}

/* ==================================================================== *
 * MOBILE-NATIVE COMPOSITIONS
 * Dedicated mobile markup swapped in with CSS (no media-query branch, so
 * no hydration flash). Desktop keeps its own composition untouched.
 * ==================================================================== */

/* default: mobile pieces hidden, desktop shown */
.agx-mdash,
.agx-ba {
  display: none;
}

/* --- mobile command center ------------------------------------------- */
.agx-mdash {
  border: 1px solid var(--agx-line);
  border-radius: 22px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
}
.agx-mdash-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
}
.agx-mdash-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--agx-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
}
.agx-mdash-id b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-mdash-id > span {
  display: block;
  font-size: 11.5px;
  color: var(--agx-ink-3);
  margin-top: 1px;
}
.agx-mdash-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--agx-pos);
  background: rgba(22, 163, 74, 0.08);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.agx-mdash-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--agx-pos);
  animation: agx-mdash-pulse 2.4s ease-in-out infinite;
}
@keyframes agx-mdash-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.agx-mdash-body {
  padding: 12px;
  display: grid;
  gap: 10px;
}
.agx-mdash-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.agx-mdash-kpi {
  border: 1px solid var(--agx-line-soft);
  border-radius: 13px;
  padding: 12px;
  background: var(--agx-surface-2);
}
.agx-mdash-kpi > span {
  display: block;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 7px;
}
.agx-mdash-kpi-v {
  display: block;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.024em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.agx-mdash-kpi em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--agx-pos);
  margin-top: 5px;
}
.agx-mdash-card {
  border: 1px solid var(--agx-line-soft);
  border-radius: 14px;
  padding: 13px;
  background: var(--agx-surface);
}
.agx-mdash-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--agx-ink);
  margin-bottom: 11px;
}
.agx-mdash-card-h em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--agx-ink-3);
}
.agx-mdash-chart {
  width: 100%;
  height: 92px;
  display: block;
}
.agx-mdash-tal {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.agx-mdash-tal + .agx-mdash-tal {
  border-top: 1px solid var(--agx-line-soft);
}
.agx-mdash-tal img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agx-mdash-tal b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-mdash-tal em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-mdash-tal strong {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-mdash-meter {
  display: grid;
  gap: 5px;
}
.agx-mdash-meter + .agx-mdash-meter {
  margin-top: 9px;
}
.agx-mdash-meter > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--agx-ink-2);
}
.agx-mdash-meter b {
  color: var(--agx-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.agx-mdash-meter i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  overflow: hidden;
}
.agx-mdash-meter u {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--agx-ink);
  text-decoration: none;
}
.agx-mdash-camps {
  display: grid;
  gap: 7px;
}
.agx-mdash-camps span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--agx-surface-2);
  font-size: 12.5px;
  color: var(--agx-ink-2);
}

/* --- mobile before / after -------------------------------------------- */
.agx-ba {
  text-align: center;
}
.agx-ba-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 12px;
}
.agx-ba-chips {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: nowrap;
}
.agx-ba-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--agx-line);
  background: var(--agx-surface);
  font-size: 11px;
  color: var(--agx-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.05);
}
.agx-ba-chips i {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex: none;
  background: var(--agx-surface-3);
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--agx-ink-3);
}
.agx-ba-flow {
  width: 100%;
  height: 44px;
  display: block;
}
.agx-ba-flow path {
  fill: none;
  stroke: #d2d2d9;
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
}
.agx-ba-card {
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  overflow: hidden;
  text-align: left;
}
.agx-ba-card-h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-ba-card-h .agx-mdash-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 10.5px;
}
.agx-ba-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--agx-ink-2);
}
.agx-ba-row + .agx-ba-row {
  border-top: 1px solid var(--agx-line-soft);
}
.agx-ba-row b {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-ba-row em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--agx-pos);
}

/* --- the swap --------------------------------------------------------- */
@media (max-width: 760px) {
  .agx-mdash,
  .agx-ba {
    display: block;
  }
  .agx-desk-only,
  .agx-scatter,
  .agx-chaos-routes,
  .agx-chaos-label {
    display: none !important;
  }
  .agx-ba {
    margin-bottom: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agx-mdash-live i {
    animation: none;
  }
}
/* AgenciesCountUp renders a <span>, so any `> span` label rule captures it.
   This is the third time that pattern has bitten (price box, proof item, and
   now the mobile KPI) — pin the value explicitly rather than rely on order. */
.agx-mdash-kpi > span.agx-mdash-kpi-v {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.024em;
  text-transform: none;
  color: var(--agx-ink);
  margin-bottom: 0;
  line-height: 1;
}

/* ==================================================================== *
 * MOBILE CHAPTERS — carousels + trims
 * The audit showed no dead space (max internal gap 63px); the height was
 * real content. Bento (4.4 screens), workflow (3.1) and use cases (3.0)
 * are item-count problems, so mobile changes the structure rather than
 * squeezing the spacing further.
 * ==================================================================== */

.agx-swipe-hint {
  display: none;
}

@media (max-width: 760px) {
  .agx-swipe-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--agx-ink-3);
  }
  .agx-swipe-hint::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--agx-line), transparent);
  }

  /* --- bento + use cases become snap carousels ---------------------- */
  .agx-bento,
  .agx-uc {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    /* bleed to the screen edge so the next card peeks */
    margin: 0 -20px;
    padding: 4px 20px 10px;
    overscroll-behavior-x: contain;
  }
  .agx-bento::-webkit-scrollbar,
  .agx-uc::-webkit-scrollbar {
    display: none;
  }

  .agx-bento > .agx-cell,
  .agx-uc > .agx-uc-card {
    flex: 0 0 84%;
    scroll-snap-align: center;
    min-height: 0;
  }
  /* span modifiers are grid-only; neutralise them in the flex track */
  .agx-cell--2,
  .agx-cell--3,
  .agx-cell--4,
  .agx-cell--6 {
    grid-column: auto;
  }
  /* the wide entitlement card gets the same width as the rest */
  .agx-bento > .agx-cell--6 {
    flex-direction: column;
    align-items: stretch;
  }
  .agx-bento > .agx-cell--6 .agx-cell-art {
    min-width: 0;
  }

  /* restore the third row inside carousel cards — there is room now that
     each card owns a full screen width */
  .agx-cell .agx-sc-rows .agx-sc-row:nth-child(3),
  .agx-cell .agx-sc-split-row:nth-child(3) {
    display: grid;
  }

  /* --- workflow: compact inline previews ---------------------------- */
  /* six full product scenes stacked was 3.1 screens; the step list carries
     the story and the preview only needs to prove the output */
  .agx-flow2-inline .agx-sc-head,
  .agx-flow2-inline .agx-sc-chart,
  .agx-flow2-inline .agx-sc-split,
  .agx-flow2-inline .agx-sc-seats,
  .agx-flow2-inline .agx-sc-pipe svg,
  .agx-flow2-inline .agx-sc-route-svg,
  .agx-flow2-inline .agx-sc-doc-bars {
    display: none;
  }
  .agx-flow2-inline .agx-sc {
    padding: 10px;
    gap: 6px;
    background: var(--agx-surface);
  }
  .agx-flow2-inline .agx-sc-rows .agx-sc-row:nth-child(n + 3) {
    display: none;
  }
  .agx-flow2-step {
    padding: 12px 0;
  }
  .agx-flow2-step:not(.on) .agx-flow2-inline {
    display: none;
  }
  .agx-flow2-copy {
    opacity: 1;
  }
  .agx-flow2-step:not(.on) .agx-flow2-copy {
    opacity: 0.55;
  }

  /* --- trust: 6 avatars, 3 activity rows (per brief) ---------------- */
  .agx-trust-node--7,
  .agx-trust-node--8 {
    display: none;
  }
  .agx-trust-activity span:nth-child(3) {
    display: flex;
  }
  .agx-trust-network {
    height: 196px;
  }

  /* --- dashboard trim ----------------------------------------------- */
  .agx-mdash-body {
    gap: 9px;
    padding: 11px;
  }
  .agx-mdash-card {
    padding: 12px;
  }
}
@media (max-width: 760px) {
  /* The stage already leads with the combined-audience number and the marquee
     already shows the roster — the separate proof trio repeated 321M+ a second
     time. Keep the category tags as the closing beat. */
  .agx-proof {
    display: none;
  }
  .agx-proof-tags {
    margin-top: 18px;
  }
  .agx-marquee {
    gap: 8px;
  }
  .agx-mcard {
    padding: 8px 13px 8px 8px;
  }
  .agx-mcard img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .agx-mcard b {
    font-size: 13px;
  }
  .agx-mcard span span {
    font-size: 11.5px;
  }
}
@media (max-width: 760px) {
  /* Carousel children sit outside the viewport horizontally, so the Reveal
     `whileInView` observer never fires for them and they stay at their
     initial opacity:0 — swiping would show blank cards. Force them visible;
     the horizontal swipe is the reveal on mobile, not a fade. */
  .agx-bento > .agx-cell,
  .agx-uc > .agx-uc-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ==================================================================== *
 * FINAL MOBILE CHAPTER (<=760px)
 * Supersedes conflicting declarations in the earlier mobile blocks.
 * ==================================================================== */
@media (max-width: 760px) {
  /* --- hero video --------------------------------------------------- */
  /* The mobile source is already cropped to the phone bounding box, so it
     needs none of the desktop crop/zoom. */
  .agx-phone-screen video {
    transform: none;
    object-fit: contain;
  }
  .agx-phone-video {
    display: block;
    width: 100%;
    height: auto;
  }

  /* --- 11px text floor ---------------------------------------------- */
  /* Audit found 9.5-10.5px labels: slab minis, hero float labels, roster
     follower counts, scene role/source tags. */
  .agx-mini-l,
  .agx-float-l,
  .agx-sc-role,
  .agx-sc-src,
  .agx-mdash-kpi > span,
  .agx-mdash-tal em,
  .agx-ba-chips span,
  .agx-ba-chips i,
  .agx-feature-device span,
  .agx-mcard span span,
  .agx-tool,
  .agx-uc-m,
  .agx-swipe-hint {
    font-size: 11px;
  }
  .agx-sc-doc-t,
  .agx-sc-chip,
  .agx-pill {
    font-size: 11.5px;
  }

  /* --- drag ledger: three compact rows ------------------------------ */
  .agx-pain {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .agx-pain-item {
    padding: 13px 15px;
    align-items: center;
  }
  .agx-pain-item p {
    font-size: 14px;
  }

  /* --- 44px touch targets ------------------------------------------- */
  .agx-btn {
    min-height: 46px;
  }
  .agx-range {
    height: 44px;
  }
  .agx-tab {
    min-height: 44px;
  }

  /* --- height trims -------------------------------------------------- */
  .agx-section {
    padding: 52px 0;
  }
  .agx-section--tight,
  .agx-trust {
    padding: 44px 0;
  }
  .agx-dark,
  .agx-final {
    padding: 52px 0;
  }
  .agx-hero {
    padding: 52px 0 40px;
  }
  .agx-head {
    margin-bottom: 22px;
  }
  .agx-feature-stage {
    padding: 18px;
    gap: 16px;
  }
  .agx-feature-map {
    min-height: 190px;
  }
  .agx-trust-network {
    height: 180px;
  }
  .agx-scatter {
    display: none;
  }
  .agx-mdash-body {
    gap: 8px;
    padding: 10px;
  }
  .agx-flow2-step {
    padding: 11px 0;
  }
  .agx-uc-visual {
    padding-top: 12px;
  }
  .agx-cell {
    padding: 18px;
  }

  /* --- bottom action bar clearance ----------------------------------- */
  .agx-final {
    padding-bottom: 96px;
  }
}

/* ==================================================================== *
 * MOBILE ACTION BAR — agencies route only
 * ==================================================================== */
.agx-actionbar {
  display: none;
}
@media (max-width: 760px) {
  .agx-actionbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2900; /* under the navbar (3000) so the burger menu wins */
    /* ...but the DRAWER is not the navbar: it sits at a much lower layer,
       so this bar painted over the open menu and sliced its CTA in half.
       Hide the bar entirely while the menu is open — cleaner than a
       z-index race, and the drawer carries its own CTA anyway. */
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--agx-line);
    transform: translateY(0);
    transition:
      transform 0.24s ease,
      opacity 0.24s ease;
  }
  .agx-actionbar[data-hidden="true"] {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .agx-actionbar .agx-btn {
    width: 100%;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agx-actionbar {
    transition: none;
  }
}
@media (max-width: 760px) {
  /* remaining sub-11px labels found by audit */
  .agx-mcard span span,
  .agx-ba-card-h .agx-mdash-badge,
  .agx-feature-node span,
  .agx-sc-pipe-out span,
  .agx-uc-signal,
  .agx-uc-funnel-row {
    font-size: 11px;
  }

  /* --- further height reduction ------------------------------------- */
  /* trust: one marquee row on mobile (brief) */
  .agx-marquee .agx-mrow:nth-child(3) {
    display: none;
  }
  .agx-trust-stage {
    padding: 16px;
    gap: 14px;
  }
  .agx-trust-activity span:nth-child(n + 4) {
    display: none;
  }
  /* workflow: inactive steps carry copy only */
  .agx-flow2-step {
    padding: 10px 0;
  }
  .agx-flow2-copy .agx-step-p {
    font-size: 13.5px;
    line-height: 1.45;
  }
  /* faq: tighter rows */
  .agx-faq-q {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .agx-faq-a {
    padding-bottom: 14px;
  }
  /* pricing: reclaim space */
  .agx-price-card {
    padding: 20px 16px;
  }
  .agx-seat-ctl {
    padding: 18px 0;
  }
  .agx-price-split {
    margin: 16px 0;
    gap: 8px;
  }
  /* monetization + final */
  .agx-rev-total {
    margin-bottom: 18px;
  }
  .agx-dark-foot {
    margin-top: 20px;
  }
  .agx-final h2 {
    font-size: clamp(26px, 7.4vw, 32px);
  }
}
@media (max-width: 760px) {
  /* hero creator chips: follower line was 10.5px */
  .agx-ccard span span {
    font-size: 11px;
  }

  /* P2 carousel-progress show rule moved next to the base `.agx-cprog` block
     below — the base `display: none` is declared later in this file and was
     winning, so the indicator never appeared on a phone. */

  /* P5 market-lane overrides moved to the chapter that follows the base
     `.agx-market-*` block near the end of this file — declared here they were
     overridden by it. */

  /* --- P6: section height targets ------------------------------------ */
  .agx-section {
    padding: 44px 0;
  }
  .agx-section--tight,
  .agx-trust {
    padding: 36px 0;
  }
  .agx-dark,
  .agx-final {
    padding: 44px 0;
  }
  .agx-hero {
    padding: 48px 0 34px;
  }
  .agx-head {
    margin-bottom: 18px;
  }
  .agx-lede {
    margin-top: 10px;
    font-size: 15px;
  }

  /* trust: one metric, shorter network, three events, one marquee row */
  .agx-trust-stage {
    padding: 14px;
    gap: 12px;
  }
  /* min-height, not height: the base rule sets min-height: 300px, which wins
     over any smaller `height` — every earlier mobile trim here was dead and the
     network stayed 300px tall on phones. */
  .agx-trust-network {
    height: 202px;
    min-height: 202px;
  }
  .agx-trust-stage-copy p {
    display: none;
  }
  .agx-proof-tags {
    margin-top: 12px;
  }

  /* problem: ledger sits straight under the workspace card */
  .agx-problem {
    padding: 38px 0;
  }
  .agx-problem .agx-head {
    margin-bottom: 12px;
  }
  .agx-pain {
    gap: 7px;
  }
  .agx-ba {
    margin-bottom: 10px;
  }
  .agx-ba-label {
    margin-bottom: 8px;
  }
  .agx-ba-flow {
    height: 24px;
  }
  .agx-pain-item {
    padding: 8px 13px;
  }
  .agx-pain-item p {
    font-size: 13.5px;
    line-height: 1.4;
  }

  /* agency OS + features */
  .agx-feature-stage {
    padding: 14px;
    gap: 12px;
  }
  .agx-feature-map {
    min-height: 158px;
  }
  .agx-feature-stage-copy h3 {
    font-size: 21px;
  }
  .agx-feature-stage-copy p {
    display: none;
  }
  .agx-bento {
    padding-bottom: 6px;
  }
  .agx-cell {
    padding: 16px;
  }

  /* dashboard */
  .agx-mdash-body {
    gap: 7px;
    padding: 9px;
  }
  .agx-mdash-card {
    padding: 11px;
  }
  .agx-mdash-bar {
    padding: 10px 12px;
  }
  .agx-mdash-chart {
    height: 76px;
  }

  /* monetization */
  .agx-rev-total {
    margin-bottom: 14px;
  }
  .agx-rev-card {
    padding: 9px 14px;
  }
  .agx-dark-foot {
    margin-top: 16px;
  }

  /* workflow: inactive steps compact, only the active one expands */
  .agx-flow2-step {
    padding: 9px 0;
  }
  .agx-flow2-step:not(.on) .agx-step-p {
    display: none;
  }
  .agx-flow2-step:not(.on) .agx-flow2-output {
    display: none;
  }
  .agx-flow-ribbon {
    margin-bottom: 12px;
  }

  /* pricing: tighter, controls stay 44px */
  .agx-price-card {
    padding: 16px 14px;
  }
  .agx-seat-ctl {
    padding: 14px 0;
  }
  .agx-price-split {
    margin: 12px 0;
  }
  .agx-price-avatars {
    margin-top: 12px;
  }

  /* use cases */
  .agx-market-stage {
    padding: 12px;
    gap: 10px;
    margin-bottom: 18px;
  }
  .agx-market-rail {
    gap: 6px;
  }
  .agx-market-lane {
    padding: 6px 0;
  }
  .agx-market-copy p {
    display: none;
  }
  .agx-uc-card {
    padding: 16px;
  }
  .agx-uc {
    padding-bottom: 6px;
  }
  /* Equal-height snap cards mean the tallest visual (six rows) sets the card
     height, so the short visuals used to leave a bare gap between the copy and
     a bottom-pinned scene. Reserving a band and centring inside it keeps every
     slide's art in the same place. */
  .agx-uc-visual {
    padding-top: 10px;
    min-height: 128px;
    display: grid;
    align-content: center;
  }

  /* faq: tighter closed rows, 44px preserved */
  .agx-faq-q {
    padding-top: 11px;
    padding-bottom: 11px;
    min-height: 44px;
  }
  .agx-faq-a {
    padding-bottom: 12px;
    font-size: 14px;
  }

  /* final cta */
  .agx-final p {
    margin-top: 12px;
  }
  .agx-final .agx-cta-row {
    margin-top: 20px;
  }
}
/* Motion resolves the nearest overflow-clipping ancestor as the scroll
   container for a `useScroll({ target })`. On this page that is <main>, which
   is clipped but statically positioned, so Motion warned it could not compute
   a scroll offset. Positioning it silences the warning without changing
   layout. Scoped to the agencies page's own main element. */
.agx-page-root {
  /* positioned so Motion has a non-static offset parent to resolve
     useScroll offsets against */
  position: relative;
}
.agx-main-root {
  position: relative;
  /* `overflow: clip` here made Motion resolve <main> as the scroll container
     for useScroll and warn it could not compute an offset. Each section clips
     its own decorative overflow, so main does not need to. */
  overflow: visible;
}
/* The problem section's own `overflow: clip` made Motion treat it as the
   scroll container for the scatter's useScroll. The scatter already clips
   itself, so the section does not need to. */
.agx-problem {
  overflow: visible;
}

/* ==================================================================== *
 * PHASE 2-5 COMPONENTS
 * ==================================================================== */

/* --- carousel progress ------------------------------------------------ */
/* Desktop lays these grids out in full, so the control only exists on the
   breakpoints where the grid actually becomes a snap carousel. */
.agx-cprog {
  display: none;
}
@media (max-width: 760px) {
  .agx-cprog {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
}
.agx-cprog-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.agx-cprog-count i {
  font-style: normal;
  color: var(--agx-ink-3);
  font-weight: 500;
}
.agx-cprog-track {
  display: flex;
  gap: 4px;
  flex: 1;
}
.agx-cprog-track i {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  display: block;
  background: var(--agx-line);
  transition: background-color 0.2s ease;
}
.agx-cprog-track i.on {
  background: var(--agx-ink);
}
@media (prefers-reduced-motion: reduce) {
  .agx-cprog-track i {
    transition: none;
  }
}

/* --- market coverage: input -> OS -> output --------------------------- */
.agx-market-rail {
  display: grid;
  gap: 8px;
}
.agx-market-railhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 44px 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--agx-line-soft);
}
.agx-market-railhead i {
  font-style: normal;
}
.agx-market-railhead b {
  text-align: center;
  color: var(--agx-line);
  font-weight: 400;
}
.agx-market-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 44px 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.agx-market-lane + .agx-market-lane {
  border-top: 1px solid var(--agx-line-soft);
}
.agx-market-in,
.agx-market-out {
  font-size: 13px;
  color: var(--agx-ink-2);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-market-out {
  font-weight: 650;
  color: var(--agx-ink);
  text-align: right;
}
.agx-market-route {
  width: 100%;
  height: 20px;
  display: block;
}
.agx-market-route path {
  fill: none;
  stroke: var(--agx-line);
  stroke-width: 1.4;
}
.agx-market-route .agx-market-route--hot {
  stroke: var(--agx-accent);
}
/* Co-located mobile override: the 5-column railhead does not map onto the
   3-column mobile lane, so the header is dropped rather than misaligned. */
/* Explicit width/padding/margin: an earlier pill-shaped `.agx-market-core`
   still lives further up this file and leaks `width: max-content`,
   `padding: 0 14px` and `margin: 0 auto 8px` into this chip otherwise. */
.agx-market-core {
  display: grid;
  place-items: center;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 9px;
  background: var(--agx-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The phone overrides for the rail live here, after the base block above —
   the earlier mobile chapter's copies were being overridden by these base
   rules (same specificity, declared later), so the lane kept its five desktop
   columns and both route SVGs on a 390px screen. */
@media (max-width: 760px) {
  .agx-market-railhead {
    display: none;
  }
  .agx-market-core {
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .agx-market-rail {
    gap: 6px;
  }
  /* 34px, not 26px: the chip's letter-spaced "OS" needs the extra track or it
     overflows and pushes the output label into the card edge. */
  .agx-market-lane {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
  }
  .agx-market-lane .agx-market-route {
    display: none;
  }
  .agx-market-in,
  .agx-market-out {
    font-size: 12px;
  }
}

/* --- live product view ------------------------------------------------ */
.agx-modes {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.agx-modes-control {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface-2);
}
.agx-modes-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--agx-ink-2);
  font-size: 13px;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.agx-modes-btn[aria-selected="true"] {
  background: var(--agx-ink);
  color: #fff;
}
.agx-modes-btn:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: 2px;
}
.agx-live {
  display: grid;
  gap: 14px;
}
.agx-live-stage {
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  overflow: hidden;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  aspect-ratio: 16 / 9; /* reserved before metadata loads */
}
.agx-live-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agx-live-callouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.agx-live-callout {
  border: 1px solid var(--agx-line-soft);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--agx-surface);
}
.agx-live-callout span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  margin-bottom: 6px;
}
.agx-live-callout b {
  display: block;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.022em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}

/* --- monetization attribution rail ------------------------------------ */
.agx-rev-card {
  position: relative;
}
.agx-rev-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--agx-accent), rgba(255, 122, 24, 0));
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .agx-feature-core {
    animation: none;
  }
}

/* --- use-case scenes: release routing + client recap ------------------ */
.agx-uc-route {
  display: grid;
  grid-template-columns: auto 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.agx-uc-route-src {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--agx-ink-2);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 6px 0;
  border-left: 2px solid var(--agx-ink);
  padding-left: 0;
  text-align: center;
}
.agx-uc-route-svg {
  width: 40px;
  height: 84px;
  display: block;
}
.agx-uc-route-svg path {
  fill: none;
  stroke: var(--agx-line);
  stroke-width: 1.4;
}
.agx-uc-route-dests {
  display: grid;
  gap: 6px;
}
.agx-uc-route-dests span {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--agx-line-soft);
  background: var(--agx-surface);
  font-size: 11.5px;
  color: var(--agx-ink-2);
}
.agx-uc-route-dests img {
  border-radius: 5px;
  display: block;
}
.agx-uc-route-dests b {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-uc-report {
  display: grid;
  gap: 6px;
}
.agx-uc-report-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink);
  margin-bottom: 2px;
}
.agx-uc-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--agx-surface-2);
  font-size: 12px;
  color: var(--agx-ink-2);
}
.agx-uc-report-row b {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================== *
 * 11px TEXT FLOOR — appended so it lands last in the cascade
 * --------------------------------------------------------------------
 * Audit at 768/1024/1440 found 9.5-10.5px micro-labels across the hero
 * slab, the Agency OS map, the product scenes and the use-case chips. The
 * equivalent floor already existed for <=760px only. Decorative glyphs
 * (.agx-tool i) are intentionally left alone -- they are icons, not text.
 * ==================================================================== */
.agx-mini-l,
.agx-float-l,
.agx-ccard span,
.agx-loop-title,
.agx-loop-stage span,
.agx-dash-story-label,
.agx-dash-satellite span,
.agx-sc-role,
.agx-sc-src,
.agx-sc-pipe-out span,
.agx-feature-node span,
.agx-feature-device span,
.agx-flow2-output-badge,
.agx-uc-signal,
.agx-uc-funnel-row,
.agx-market-core {
  font-size: 11px;
}

/* At 360 the roster row cannot fit avatar + full name + role tag, and the
   names were ellipsising mid-word. Roles are carried by the seat-management
   cell; the name is what this scene is about, so the tag yields. */
@media (max-width: 380px) {
  .agx-sc--roster .agx-sc-role {
    display: none;
  }
}

/* The trust network's avatars carried a 7s float loop that ran alongside the
   page-wide route drift and the two marquee rows — three idle loops competing
   in one viewport, none of which explain the product. The graph reads the same
   still, so the float is dropped. */
.agx-trust-node {
  animation: none;
}

/* <button> carries a UA `text-align: center`, so the question text was being
   centred inside its flex cell and reading as a heading rather than a row. */
.ag-faq-q {
  text-align: left;
}

/* The phone in the hero collage deliberately overlaps the slab's right edge by
   ~36px. The slab's own content had no allowance for it, so the second mini
   card and the workspace title were running underneath the device and reading
   as truncated. Reserve the overlap instead of moving the layers. */
@media (max-width: 760px) {
  .agx-slab-bar,
  .agx-slab-body {
    padding-right: 52px;
  }
}
@media (max-width: 400px) {
  .agx-slab-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* At 400 and below the slab bar cannot fit the window dots and the workspace
   name once the phone overlap is reserved; the name is the informative half. */
@media (max-width: 400px) {
  .agx-slab-bar .agx-panel-dots {
    display: none;
  }
}

/* ==================================================================== *
 * CONVERSION REBUILD — appended so later rules win
 * ==================================================================== */

/* Demo-data tag: every surface showing invented workspace figures carries
   the label, so real proof (321M+, the product video) stays credible. */
.agx-demo-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 18px;
  padding: 0 7px;
  margin-left: auto;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface-2);
  color: var(--agx-ink-2);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.agx-collapse-bar .agx-demo-tag {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

/* Analytics scene: bars carry their value */
.agx-sc-split-v {
  font-size: 12px;
  font-weight: 650;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}

/* Client recap document — the deliverable the buyer is judged on */
.agx-sc-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.agx-sc-recap-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--agx-ink-2);
  border-bottom: 1px dashed var(--agx-line-soft);
}
.agx-sc-recap-row b {
  color: var(--agx-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.agx-sc-recap-tal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 9px;
}
.agx-sc-recap-tal span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid var(--agx-line-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-sc-recap-tal img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agx-sc-recap-tal b {
  color: var(--agx-ink);
  font-weight: 650;
}

/* Pricing reassurance — restates page claims at the decision moment */
.agx-price-assure {
  margin: 18px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--agx-line-soft);
  list-style: none;
  display: grid;
  gap: 9px;
}
.agx-price-assure li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--agx-ink-2);
}
.agx-price-assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(21, 128, 61, 0.12);
}
.agx-price-assure li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 3.5px;
  border-left: 1.8px solid var(--agx-pos);
  border-bottom: 1.8px solid var(--agx-pos);
  transform: rotate(-45deg);
}

/* Remaining hand-set contrast failures the token change cannot reach */
.ag-faq-num {
  color: #6b6b74;
}
.ag-faq-item.open .ag-faq-num {
  color: #c2410c;
}
.agx-pain-mark {
  color: #c2410c;
}
/* Booking row: white on the orange gradient measured 1.9:1 */
.agx-uc-funnel-row:last-child {
  color: #3b1502;
}

/* Season tracker bars were nearly invisible on the card surface */
.agx-uc-track .agx-sc-track {
  background: #e9e9ee;
}

/* Hero: the composition ends ~150px above the next section at 1440 */
@media (min-width: 1200px) {
  .agx-hero {
    padding-bottom: 40px;
  }
}

/* Mobile hero: the checklist repeated claims made all over the page while
   pushing the product below the fold — the collage is the argument. The
   secondary CTA drops to a quiet outline so one action reads as primary. */
@media (max-width: 760px) {
  .agx-hero-proof {
    display: none;
  }
  .agx-hero .agx-cta-row .agx-btn--ghost {
    border-color: transparent;
    background: var(--agx-surface-2);
  }
}

/* Mobile Agency OS: the desktop constellation squeezed into a 158px map piled
   its chips on top of the wordmark. Below 760px the diagram's meaning is the
   SET of nodes, not their arrangement — so it becomes a stacked ledger. */
@media (max-width: 760px) {
  .agx-feature-map svg {
    display: none;
  }
  .agx-feature-map {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .agx-feature-core {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    padding: 14px 12px;
  }
  .agx-feature-node {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .agx-feature-node:last-of-type {
    grid-column: 1 / -1;
  }
}

/* Dark panels: the darkened --agx-pos token (right for white cards) is too
   dim as text on near-black. Light green for dark surfaces only. */
.agx-dark .agx-rev-d {
  color: #4ade80;
}
.agx-flow2-preview-body .agx-sc-tick {
  color: #4ade80 !important;
}

/* Above 1200px the hero slab narrows to ~173px — workspace name + demo tag
   can't share the bar, and a truncated name is worse than a missing tag. The
   bento, command center, monetization, and problem sections keep the label on
   desktop; the tag returns here on the wide single-column layouts. */
@media (min-width: 1200px) {
  .agx-slab-bar .agx-demo-tag {
    display: none;
  }
}

/* Recap document inside the dark pipeline preview — light-surface inks go
   white here, same as the other scene rows already do. */
.agx-flow2-preview-body .agx-sc-recap-row {
  color: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.18);
}
.agx-flow2-preview-body .agx-sc-recap-row b,
.agx-flow2-preview-body .agx-sc-recap-tal b {
  color: #fff;
}
.agx-flow2-preview-body .agx-sc-recap-tal span {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ==================================================================== *
 * WINNING STRUCTURE — nine-section rebuild
 * ==================================================================== */

/* Hero price anchor */
.agx-hero-price {
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--agx-ink-2);
}

/* --- Fan flow: profile → purchase → attribution ----------------------- */
.agx-fanflow {
  border: 1px solid var(--agx-line);
  border-radius: 20px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  padding: 16px 18px 18px;
  margin-bottom: 22px;
}
.agx-fanflow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-2);
}
.agx-fanflow-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 44px minmax(0, 1fr) 44px minmax(
      0,
      1.1fr
    );
  align-items: stretch;
  gap: 10px;
}
.agx-fanflow-card {
  display: grid;
  gap: 9px;
  align-content: start;
  border: 1px solid var(--agx-line-soft);
  border-radius: 14px;
  background: var(--agx-surface-2);
  padding: 12px;
}
.agx-fanflow-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--agx-ink-2);
}
.agx-fanflow-phone {
  display: grid;
  gap: 8px;
  border: 1px solid var(--agx-line);
  border-radius: 12px;
  background: var(--agx-surface);
  padding: 10px;
}
.agx-fanflow-id {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agx-fanflow-id img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agx-fanflow-id b {
  display: block;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.agx-fanflow-id em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--agx-ink-2);
}
.agx-fanflow-links {
  display: grid;
  gap: 5px;
}
.agx-fanflow-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--agx-line-soft);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-fanflow-link--hot {
  background: var(--agx-ink);
  border-color: var(--agx-ink);
  color: #fff;
}
.agx-fanflow-link i {
  font-style: normal;
}
.agx-fanflow-icons {
  display: flex;
  gap: 6px;
}
.agx-fanflow-icons img {
  width: 20px;
  height: 20px;
  display: block;
}
.agx-fanflow-route {
  align-self: center;
  width: 44px;
  height: 24px;
}
.agx-fanflow-route path {
  fill: none;
  stroke: var(--agx-line);
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
}
.agx-fanflow-route .agx-fanflow-route--hot {
  stroke: var(--agx-accent);
  stroke-dasharray: none;
}
.agx-fanflow-receipt {
  display: grid;
  gap: 3px;
  border: 1px solid var(--agx-line);
  border-radius: 12px;
  background: var(--agx-surface);
  padding: 12px;
  font-size: 12.5px;
  color: var(--agx-ink-2);
}
.agx-fanflow-receipt b {
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-fanflow-receipt em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--agx-pos);
}
.agx-fanflow-ledger {
  display: grid;
  gap: 6px;
  border: 1px solid var(--agx-line);
  border-radius: 12px;
  background: var(--agx-surface);
  padding: 12px;
}
.agx-fanflow-ledger-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-fanflow-ledger-row img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agx-fanflow-ledger-row b {
  margin-left: auto;
  color: var(--agx-pos);
  font-variant-numeric: tabular-nums;
}
.agx-fanflow-ledger-meta {
  font-size: 11.5px;
  color: var(--agx-ink-2);
}
@media (max-width: 760px) {
  .agx-fanflow-row {
    grid-template-columns: 1fr;
  }
  .agx-fanflow-route {
    justify-self: center;
    transform: rotate(90deg);
    height: 20px;
  }
}

/* --- capability row: reuses the bento cell system --------------------- */
.agx-bento--caps {
  margin-top: 26px;
}

/* --- money act: recap document on the dark stage ---------------------- */
.agx-recap-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
  margin-top: 34px;
  position: relative;
  z-index: 1;
}
.agx-recap-copy h3 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 10px;
}
.agx-recap-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  max-width: 40ch;
}
/* the document itself is a white artifact on the dark stage */
.agx-recap-doc {
  border-radius: 18px;
  background: var(--agx-surface);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: 18px;
}
@media (max-width: 760px) {
  .agx-recap-stage {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .agx-recap-copy p {
    max-width: none;
  }
}

/* --- getting started: three numbered moves ---------------------------- */
.agx-gs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.agx-gs-step {
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.agx-gs-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 122, 24, 0.1);
  color: #c2410c;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.agx-gs-step h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2px 0 0;
}
.agx-gs-step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--agx-ink-2);
  margin: 0;
}
@media (max-width: 760px) {
  .agx-gs {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .agx-gs-step {
    padding: 16px;
  }
}

/* --- pricing: per-talent framing -------------------------------------- */
.agx-price-per {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- final CTA: roster reprise ---------------------------------------- */
.agx-final-faces {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.agx-final-faces img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2.5px solid #fff;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.14);
}
.agx-final-faces img + img {
  margin-left: -10px;
}

/* The ambient route layer was sized to the pre-recap section; with the recap
   act added below, its %-positioned pills drifted onto the channel cards and
   the recap headline. Pin the canvas to its original ~1000px band at the top
   of the section so the decor stays behind the total + grid only. */
.agx-money-routes {
  inset: 118px -32px auto;
  height: 980px;
}

/* With the recap act below, only the two upper ambience pills have clear
   space left; the core and the bottom pair were landing on card values and
   the recap headline at every width. Ambience must never touch content. */
.agx-money-core,
.agx-money-node--merch,
.agx-money-node--contacts {
  display: none;
}

/* ==================================================================== *
 * HERO PHONE v3 — transparent "No Background" render
 * --------------------------------------------------------------------
 * The asset is now a floating device on an alpha canvas (1418x1000), so
 * every crop built for the old opaque capture is neutralized: no aspect
 * slice, no zoom transform, no clipping. The canvas is wider than the
 * device; the air is invisible, so the box may overlap siblings freely —
 * pointer-events off keeps the collage parallax and clicks working.
 * ==================================================================== */
.agx-phone {
  width: 620px;
  right: -104px;
  bottom: -36px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  /* follows the alpha silhouette, grounding the floating device */
  filter: drop-shadow(0 30px 56px rgba(10, 10, 10, 0.26));
}
.agx-phone-screen {
  aspect-ratio: 1418 / 1000;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.agx-phone-screen video {
  width: 100%;
  height: auto;
  transform: none;
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 1080px) {
  .agx-phone {
    width: 540px;
    right: -90px;
  }
}
@media (max-width: 760px) {
  .agx-phone {
    width: 350px;
    right: -78px;
    bottom: -10px;
  }
  .agx-phone-screen video {
    width: 100%;
    height: auto;
    transform: none;
  }
}

/* ==================================================================== *
 * PROBLEM SCENE v2 — pinned ingestion
 * --------------------------------------------------------------------
 * The scatter now lives inside a tall runway and pins mid-viewport while
 * the workspace pulls the chips in one by one. The runway height IS the
 * duration of the story: ~1.3 viewports of scroll instead of half a
 * wheel-tick.
 * ==================================================================== */
.agx-scatter-run {
  position: relative;
  height: 220vh;
}
.agx-scatter-sticky {
  position: sticky;
  top: calc(50vh - 280px);
}
.agx-scatter {
  height: 520px;
  margin-bottom: 0;
}

/* Chips read as a pile of real artifacts: paper shadow, kind-coded marks,
   and the tilt/overlap comes from the motion values. */
.agx-tool {
  box-shadow:
    0 1px 0 rgba(10, 10, 10, 0.04),
    0 10px 28px rgba(10, 10, 10, 0.1);
  font-weight: 600;
}
.agx-tool[data-kind="sheet"] i {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}
.agx-tool[data-kind="shot"] i {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.agx-tool[data-kind="link"] i {
  background: rgba(255, 122, 24, 0.14);
  color: #c2410c;
}
.agx-tool[data-kind="doc"] i {
  background: rgba(109, 40, 217, 0.12);
  color: #6d28d9;
}
.agx-tool[data-kind="chat"] i {
  background: rgba(10, 10, 10, 0.08);
  color: var(--agx-ink);
}

/* The live counter line inside the workspace card */
.agx-collapse-hero b {
  font-variant-numeric: tabular-nums;
}

/* The collapse bar is a light surface — the earlier dark-bar tag override
   made "Demo" white-on-white here. Restore the standard tag look. */
.agx-collapse-bar .agx-demo-tag {
  border-color: var(--agx-line);
  background: var(--agx-surface);
  color: var(--agx-ink-2);
}

/* ==================================================================== *
 * PROBLEM SCENE v3 — "answer the client" story
 * ==================================================================== */
.agx-desk {
  height: 560px;
}

/* --- the ask: a brand partner's request, pinned top-centre ------------ */
.agx-ask {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(460px, 92%);
  padding: 11px 13px;
  border: 1px solid var(--agx-line);
  border-radius: 15px;
  background: var(--agx-surface);
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.12);
}
.agx-ask-badge {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--agx-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
}
.agx-ask-body {
  min-width: 0;
}
.agx-ask-body b {
  display: block;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.agx-ask-body > span {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--agx-ink-2);
}
.agx-ask-due {
  flex: none;
  margin-left: auto;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.12);
  color: #c2410c;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the payoff docks under the ask, like a reply in a thread */
.agx-ask-reply {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 11px;
  background: var(--agx-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.22);
}
.agx-ask-reply i {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--agx-pos);
  position: relative;
}
.agx-ask-reply i::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4.5px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}

/* --- running tally ---------------------------------------------------- */
.agx-desk-tally {
  position: absolute;
  right: 0;
  top: 6px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--agx-ink-2);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.08);
}
.agx-desk-tally-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agx-pos);
  display: block;
}

/* --- the desktop from hell -------------------------------------------- */
.agx-win {
  position: absolute;
  border: 1px solid var(--agx-line);
  border-radius: 12px;
  background: var(--agx-surface);
  box-shadow:
    0 1px 0 rgba(10, 10, 10, 0.04),
    0 18px 44px rgba(10, 10, 10, 0.14);
  overflow: hidden;
}
.agx-win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
  font-size: 11px;
  font-weight: 650;
  color: var(--agx-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-win-dots {
  flex: none;
  display: inline-flex;
  gap: 4px;
}
.agx-win-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agx-line);
  display: block;
}
.agx-win-dots i:first-child {
  background: #ff5f57;
}
.agx-win-dots i:nth-child(2) {
  background: #febc2e;
}
.agx-win-badge {
  flex: none;
  margin-left: auto;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
}
.agx-win-body {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
}
.agx-win-sheetrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--agx-ink-2);
  border-bottom: 1px dashed var(--agx-line-soft);
  padding-bottom: 5px;
}
.agx-win-sheetrow img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.agx-win-sheetrow b {
  margin-left: auto;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-win-missing {
  color: #dc2626 !important;
}
.agx-win-alert {
  font-size: 10.5px;
  font-weight: 700;
  color: #dc2626;
}
.agx-win-bubble {
  justify-self: start;
  max-width: 92%;
  padding: 6px 10px;
  border-radius: 12px 12px 12px 4px;
  background: var(--agx-surface-3);
  font-size: 11.5px;
  color: var(--agx-ink-2);
}
.agx-win-bubble--me {
  justify-self: end;
  border-radius: 12px 12px 4px 12px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}
.agx-win-shots {
  grid-template-columns: repeat(3, 1fr);
}
.agx-win-thumb {
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: 9.5px;
  color: var(--agx-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.agx-win-thumb i {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: linear-gradient(145deg, #dbeafe 0%, #ede9fe 60%, #fce7f3 100%);
  border: 1px solid var(--agx-line-soft);
  display: block;
}
.agx-win-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.agx-win-tabs span {
  flex: none;
  padding: 4px 8px;
  border-radius: 7px 7px 0 0;
  background: var(--agx-surface-3);
  border: 1px solid var(--agx-line-soft);
  border-bottom: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-win-tabs span:last-child {
  background: #fee2e2;
  color: #b91c1c;
}
.agx-win-addr {
  padding: 5px 9px;
  border: 1px solid var(--agx-line-soft);
  border-radius: 7px;
  background: var(--agx-surface-2);
  font-size: 10.5px;
  color: var(--agx-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-win-link {
  font-size: 11.5px;
  font-weight: 650;
  color: #c2410c;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.agx-win-deck {
  grid-template-columns: repeat(3, 1fr);
}
.agx-win-slide {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--agx-line-soft);
  border-radius: 6px;
  background: var(--agx-surface-2);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--agx-ink-2);
}
.agx-win-slide--empty {
  border-style: dashed;
  color: #dc2626;
  background: transparent;
}

/* --- "you" ------------------------------------------------------------ */
.agx-you {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.agx-you svg path {
  fill: var(--agx-ink);
  stroke: #fff;
  stroke-width: 1.4;
}
.agx-you span {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--agx-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

/* tally sits top-left — top-right belongs to the ask card's deadline chip */
.agx-desk-tally {
  right: auto;
  left: 0;
}

/* ==================================================================== *
 * PROBLEM v4 — old way vs new way, one glance
 * ==================================================================== */
.agx-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  max-width: 1020px;
  margin: 0 auto;
}
.agx-vs-col {
  display: grid;
  gap: 12px;
  align-content: start;
}
.agx-vs-label {
  justify-self: start;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agx-vs-label--old {
  background: rgba(220, 38, 38, 0.09);
  color: #b91c1c;
}
.agx-vs-label--new {
  background: rgba(21, 128, 61, 0.1);
  color: var(--agx-pos);
}
.agx-vs-stack {
  display: grid;
  gap: 8px;
}
.agx-vs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--agx-line);
  border-radius: 13px;
  background: var(--agx-surface);
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.07);
}
.agx-vs-row i {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  font-style: normal;
}
.agx-vs-row[data-tint="green"] i {
  background: rgba(67, 233, 123, 0.18);
  color: #15803d;
}
.agx-vs-row[data-tint="emerald"] i {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}
.agx-vs-row[data-tint="blue"] i {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}
.agx-vs-row[data-tint="orange"] i {
  background: rgba(255, 122, 24, 0.14);
  color: #c2410c;
}
.agx-vs-row[data-tint="violet"] i {
  background: rgba(109, 40, 217, 0.12);
  color: #6d28d9;
}
.agx-vs-row[data-tint="ink"] i {
  background: rgba(10, 10, 10, 0.08);
  color: var(--agx-ink);
}
.agx-vs-row b {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.agx-vs-row > span {
  font-size: 12.5px;
  color: var(--agx-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.agx-vs-row em {
  margin-left: auto;
  flex: none;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  white-space: nowrap;
}
.agx-vs-tally {
  justify-self: start;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.agx-vs-tally--old {
  color: #b91c1c;
}
.agx-vs-tally--new {
  color: var(--agx-pos);
  padding: 0 18px 16px;
}
.agx-vs-mid {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--agx-ink);
  color: #fff;
  justify-self: center;
  box-shadow: 0 14px 30px rgba(10, 10, 10, 0.22);
}
/* the one card: visibly calmer and sturdier than the pile it replaces */
.agx-vs-one {
  border: 1.5px solid rgba(21, 128, 61, 0.35);
  border-radius: 18px;
  background: var(--agx-surface);
  box-shadow:
    0 1px 0 rgba(10, 10, 10, 0.03),
    0 26px 60px rgba(21, 128, 61, 0.13);
  overflow: hidden;
}
.agx-vs-one-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.agx-vs-checks {
  display: grid;
  gap: 4px;
  padding: 12px 10px;
}
.agx-vs-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--agx-ink);
}
.agx-vs-check:nth-child(odd) {
  background: var(--agx-surface-2);
}
.agx-vs-check i {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(21, 128, 61, 0.14);
  position: relative;
}
.agx-vs-check i::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 5px;
  width: 7px;
  height: 3.5px;
  border-left: 1.8px solid var(--agx-pos);
  border-bottom: 1.8px solid var(--agx-pos);
  transform: rotate(-45deg);
}
.agx-vs-see {
  justify-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--agx-ink-2);
  text-decoration: none;
  padding: 8px 12px;
}
.agx-vs-see:hover {
  color: var(--agx-ink);
}
@media (max-width: 900px) {
  .agx-vs {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 480px;
  }
  .agx-vs-mid {
    transform: rotate(90deg);
    width: 38px;
    height: 38px;
  }
  .agx-vs-row {
    padding: 10px 12px;
  }
  .agx-vs-row > span {
    display: none;
  }
}

/* ==================================================================== *
 * PROBLEM v5 — the title sequence
 * --------------------------------------------------------------------
 * White stage, movie-poster type, the real roster adrift behind it.
 * 24 talents. / 12 tools. / 0 connected. / 1 login.
 * ==================================================================== */
.agx-slam-sec {
  background: var(--agx-surface);
  padding: 0;
}
/* 420vh run − 100vh sticky = 320vh of real scroll: each beat holds fully
   legible for 45–70vh instead of the old ~26vh (one trackpad flick). */
/* 300vh (was 420): four short beats do not need four screens — the
   pin was the single biggest drag on the page. Beat slices are
   fractions of the run, so the choreography scales with it. */
.agx-slam-run {
  position: relative;
  height: 300vh;
}
.agx-slam-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
}
.agx-slam {
  position: relative;
  height: 100%;
  max-width: 1160px;
  margin: 0 auto;
}
.agx-slam-kicker {
  position: absolute;
  left: 50%;
  /* below the fixed navbar (~82px) — at 44px it was invisible under it */
  top: 96px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
  z-index: 4;
}
/* the beats stack in the same spot; only one is alive at a time */
.agx-slam-beat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 92%);
  margin-left: max(-460px, -46%);
  margin-top: -120px;
  text-align: center;
  z-index: 3;
}
.agx-slam-beat .agx-slam-word {
  margin: 0;
  font-size: clamp(64px, 11vw, 148px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-slam-beat p {
  margin: 22px auto 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--agx-ink-2);
}
.agx-slam-beat--accent .agx-slam-word {
  color: var(--agx-accent);
}
.agx-slam-beat--accent p {
  color: var(--agx-ink);
}
/* the roster, adrift */
.agx-slam-face {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.agx-slam-face img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 14px 40px rgba(10, 10, 10, 0.18);
}
.agx-slam-see {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--agx-ink-2);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
}
.agx-slam-see:hover {
  color: var(--agx-ink);
  border-color: rgba(10, 10, 10, 0.3);
}
/* the twelve tools, on stage: outer span owns position + base tilt so
   Motion's transform (opacity/scale/y/rotate death delta) lives on the
   inner pill and never fights the CSS centering */
.agx-slam-chip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.agx-slam-chip-in {
  display: inline-block;
  background: var(--agx-surface);
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--agx-ink-2);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.1);
}
.agx-slam-chip--more {
  background: rgba(10, 10, 10, 0.05);
}

/* the four-step affordance */
.agx-slam-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  pointer-events: none;
}
.agx-slam-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.18);
}

@media (max-width: 760px) {
  .agx-slam-run {
    height: 280vh;
  }
  .agx-slam-beat {
    margin-top: -100px;
  }
  .agx-slam-beat .agx-slam-word {
    font-size: clamp(52px, 15vw, 82px);
  }
  .agx-slam-face img {
    width: 42px;
    height: 42px;
  }
  .agx-slam-chip-in {
    font-size: 11px;
    padding: 4px 8px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .agx-slam-dots {
    bottom: 16px;
  }
  .agx-slam-kicker {
    top: 88px;
  }
}

/* ==================================================================== *
 * PROBLEM v5.1 — cinema pass
 * ==================================================================== */
/* film vignette on the stage — a whisper on white, not a black frame */
.agx-slam-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 90% at 50% 42%,
    transparent 55%,
    rgba(10, 10, 10, 0.06) 100%
  );
  z-index: 2;
}
.agx-slam-face {
  z-index: 3;
}
.agx-slam-beat {
  z-index: 5;
}
.agx-slam-kicker,
.agx-slam-see {
  z-index: 6;
}
/* beat-3: the web that never connects */
.agx-slam-web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.agx-slam-web path {
  fill: none;
  stroke: rgba(10, 10, 10, 0.3);
  stroke-width: 0.3;
  stroke-dasharray: 1.6 2.2;
}
/* the verdict's bloom */
.agx-slam-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 900px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 122, 24, 0.18),
    transparent 62%
  );
  filter: blur(10px);
  z-index: 2;
  pointer-events: none;
}
/* the connection drawn under the united roster */
.agx-slam-line {
  position: absolute;
  left: 0;
  top: 83.5%;
  width: 100%;
  height: 12px;
  z-index: 3;
  overflow: visible;
}
.agx-slam-line path {
  fill: none;
  stroke: var(--agx-accent);
  stroke-width: 0.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, 0.4));
}
@media (max-width: 760px) {
  .agx-slam-glow {
    width: 480px;
    height: 420px;
  }
  .agx-slam-line {
    top: 82.5%;
  }
}

/* ==================================================================== *
 * HERO v2 — the command center, in space
 * ==================================================================== */
.agx-hero2 {
  position: relative;
  background: #0a0a0a;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  padding: 128px 0 40px;
}
.agx-hero2-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 1100px;
  height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 122, 24, 0.2),
    rgba(255, 122, 24, 0.05) 45%,
    transparent 68%
  );
  filter: blur(14px);
  pointer-events: none;
}
/* film vignette, same stock as the slam stage */
.agx-hero2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 130% 95% at 50% 45%,
    transparent 58%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
}
.agx-hero2-shell {
  position: relative;
  display: grid;
  gap: 6px;
  z-index: 3;
}
.agx-hero2-copy {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 6;
}
.agx-hero2-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 22px;
}
.agx-hero2 h1 {
  margin: 0;
  font-size: clamp(46px, 6.6vw, 92px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.agx-hero2-sub {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
.agx-hero2-ctas {
  justify-content: center;
  margin-top: 26px;
}
/* --- the stage -------------------------------------------------------- */
.agx-hero2-stage {
  position: relative;
  height: 560px;
  margin-top: 10px;
}
.agx-hero2-streams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.agx-hero2-streams path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.2;
  stroke-dasharray: 7 12;
  animation: agx-route-drift 9s linear infinite;
}
.agx-hero2-streams path:nth-child(even) {
  stroke: rgba(255, 122, 24, 0.4);
  animation-duration: 7s;
}
/* --- orbits ----------------------------------------------------------- */
.agx-hero2-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
}
.agx-orbit-path {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.agx-orbit-path--outer {
  width: 660px;
  height: 660px;
}
.agx-orbit-path--inner {
  width: 430px;
  height: 430px;
}
.agx-orbit {
  position: absolute;
  left: 0;
  top: 0;
  animation: agx-orbit-spin var(--spin, 70s) linear infinite;
}
.agx-orbit--outer {
  --r: 330px;
  --spin: 74s;
}
.agx-orbit--inner {
  --r: 215px;
  --spin: 52s;
  animation-direction: reverse;
}
.agx-orbit-seat {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(var(--a)) translateX(var(--r));
}
.agx-orbit-face {
  display: grid;
  justify-items: center;
  gap: 5px;
  transform: rotate(calc(0deg - var(--a)));
  animation: agx-orbit-counter var(--spin, 74s) linear infinite;
}
.agx-orbit--outer .agx-orbit-face {
  --spin: 74s;
}
.agx-orbit--inner .agx-orbit-face {
  --spin: 52s;
  animation-direction: reverse;
}
.agx-orbit-face img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.agx-orbit--inner .agx-orbit-face img {
  width: 42px;
  height: 42px;
}
.agx-orbit-face b {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a0a;
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@keyframes agx-orbit-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes agx-orbit-counter {
  from {
    transform: rotate(calc(0deg - var(--a)));
  }
  to {
    transform: rotate(calc(-360deg - var(--a)));
  }
}
/* pause when the hero leaves the viewport; freeze under reduced motion */
.agx-hero2.is-off .agx-orbit,
.agx-hero2.is-off .agx-orbit-face,
.agx-hero2.is-off .agx-hero2-streams path {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-orbit,
  .agx-orbit-face,
  .agx-hero2-streams path {
    animation: none;
  }
}
/* --- the object ------------------------------------------------------- */
.agx-hero2-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 780px;
  margin-left: -390px;
  margin-top: -274px;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.6));
}
.agx-hero2-phone video {
  width: 100%;
  height: auto;
  display: block;
}
/* --- chips ------------------------------------------------------------ */
.agx-hero2-chip {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 2px;
  padding: 12px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.agx-hero2-chip span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--agx-ink-2);
}
.agx-hero2-chip b {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-hero2-chip em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--agx-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.agx-hero2-chip .agx-demo-tag {
  margin-left: 0;
  height: 16px;
  font-size: 9.5px;
  padding: 0 6px;
}
.agx-hero2-chip--left {
  left: 4%;
  top: 30%;
}
.agx-hero2-chip--right {
  right: 4%;
  top: 56%;
}
/* --- scroll cue ------------------------------------------------------- */
.agx-hero2-cue {
  position: relative;
  z-index: 6;
  width: 34px;
  height: 34px;
  margin: 18px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.agx-hero2-cue i {
  width: 8px;
  height: 8px;
  border-right: 1.8px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1.8px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg) translate(-1px, -1px);
}
/* --- mobile ----------------------------------------------------------- */
@media (max-width: 760px) {
  .agx-hero2 {
    padding: 104px 0 30px;
  }
  .agx-hero2-stage {
    height: 420px;
  }
  .agx-orbit-path--outer {
    width: 340px;
    height: 340px;
  }
  .agx-orbit-path--inner {
    width: 224px;
    height: 224px;
  }
  .agx-orbit--outer {
    --r: 170px;
  }
  .agx-orbit--inner {
    --r: 112px;
  }
  .agx-orbit-face img {
    width: 36px;
    height: 36px;
    border-width: 1.5px;
  }
  .agx-orbit--inner .agx-orbit-face img {
    width: 30px;
    height: 30px;
  }
  .agx-orbit-face b {
    font-size: 9.5px;
    padding: 1.5px 6px;
  }
  .agx-hero2-phone {
    width: 400px;
    margin-left: -200px;
    margin-top: -141px;
  }
  .agx-hero2-chip {
    display: none;
  }
  .agx-hero2-glow {
    width: 560px;
    height: 480px;
  }
}

/* Hero v2 fixes: dark photos on a black stage need their own light — ring
   each face and let the tag-less ones still register; pull the whole stage
   up so the device breaks the fold on load. */
.agx-orbit-face img {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.07),
    0 0 26px rgba(255, 122, 24, 0.22),
    0 12px 34px rgba(0, 0, 0, 0.55);
}
.agx-hero2-streams path {
  stroke: rgba(255, 255, 255, 0.18);
}
.agx-hero2-streams path:nth-child(even) {
  stroke: rgba(255, 122, 24, 0.5);
}
.agx-hero2 {
  padding-top: 112px;
}
.agx-hero2 h1 {
  font-size: clamp(44px, 6vw, 84px);
}
.agx-hero2-sub {
  margin-top: 18px;
}
.agx-hero2-stage {
  margin-top: -6px;
}
@media (max-width: 760px) {
  .agx-hero2 {
    padding-top: 96px;
  }
}

/* Orbit seats live in a zero-size containing block, so an absolutely
   positioned face shrink-wraps toward 0 width (the imgs collapsed to 4px
   slivers; tagged ones were propped open by their chip text). Fixed boxes,
   centred on the orbit point with static margins so the spin transforms
   stay untouched. */
.agx-orbit-face {
  width: 64px;
  margin-left: -32px;
  margin-top: -30px;
}
.agx-orbit--inner .agx-orbit-face {
  width: 52px;
  margin-left: -26px;
  margin-top: -24px;
}
.agx-orbit-face img {
  min-width: 52px;
}
.agx-orbit--inner .agx-orbit-face img {
  min-width: 42px;
}
@media (max-width: 760px) {
  .agx-orbit-face {
    width: 46px;
    margin-left: -23px;
    margin-top: -21px;
  }
  .agx-orbit--inner .agx-orbit-face {
    width: 38px;
    margin-left: -19px;
    margin-top: -17px;
  }
  .agx-orbit-face img {
    min-width: 36px;
  }
  .agx-orbit--inner .agx-orbit-face img {
    min-width: 30px;
  }
}

/* ==================================================================== *
 * HERO v2.1 — the picture explains itself
 * ==================================================================== */
/* the object, named */
.agx-hero2-devlabel {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 24, 0.4);
  background: rgba(255, 122, 24, 0.12);
  color: #ffb37a;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the workspace, visibly working */
.agx-hero2-ticker {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 22px auto 0;
  padding: 0 20px;
}
.agx-hero2-ticker-tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.agx-hero2-ticker-clip {
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.agx-hero2-ticker-track {
  display: flex;
  width: max-content;
  animation: agx-ticker 26s linear infinite;
}
.agx-hero2-ticker-run {
  display: flex;
  flex: none;
}
.agx-hero2-ticker-run > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 34px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.agx-hero2-ticker-run i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.agx-hero2-ticker-run i[data-tone="pos"] {
  background: #4ade80;
}
.agx-hero2-ticker-run i[data-tone="hot"] {
  background: var(--agx-accent);
}
@keyframes agx-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.agx-hero2.is-off .agx-hero2-ticker-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-hero2-ticker-track {
    animation: none;
  }
}
@media (max-width: 760px) {
  .agx-hero2-devlabel {
    bottom: 0;
    font-size: 10.5px;
  }
  .agx-hero2-ticker {
    margin-top: 16px;
  }
}

/* the bottom of the outer ring dips below the stage — the ticker clears it */
.agx-hero2-ticker {
  margin-top: 56px;
}
@media (max-width: 760px) {
  .agx-hero2-ticker {
    margin-top: 40px;
  }
}

/* ==================================================================== *
 * HERO v3 — white, plain, understandable by anyone
 * Replaces the dark hero2 stage (its chapter above is now dead code,
 * kept for revertibility). One promise, three reasons, the product.
 * ==================================================================== */
.agx-hero3 {
  position: relative;
  padding: 136px 0 56px;
  overflow: clip;
  background: var(--agx-surface);
}
.agx-hero3-shell {
  position: relative;
  z-index: 1;
}
.agx-hero3-copy {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.agx-hero3 h1 {
  margin: 0;
  font-size: clamp(38px, 5.8vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--agx-ink);
  text-wrap: balance;
}
.agx-hero3-sub {
  margin: 24px auto 0;
  max-width: 660px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.6;
  color: var(--agx-ink-2);
  text-wrap: pretty;
}
.agx-hero3-ctas {
  justify-content: center;
  margin-top: 34px;
}
.agx-hero3-ctas .agx-btn {
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
}
.agx-hero3-checks {
  justify-content: center;
  gap: 12px 30px;
  margin-top: 30px;
  padding-top: 0;
  border-top: 0;
}
.agx-hero3-checks span {
  font-size: 15px;
  color: var(--agx-ink-2);
}
.agx-hero3-checks svg {
  width: 16px;
  height: 16px;
}

/* stage: two plain fact cards flanking the floating phone */
.agx-hero3-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.agx-hero3-phone {
  flex: none;
  width: min(660px, 100%);
}
.agx-hero3-phone .agx-phone-video {
  display: block;
  width: 100%;
  height: auto;
}
.agx-hero3-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 182px;
  padding: 18px 22px;
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  text-align: left;
}
/* the render's side margins are transparent — tuck the cards in */
.agx-hero3-card--left {
  margin-right: -140px;
  transform: translateY(-12px);
}
.agx-hero3-card--right {
  margin-left: -140px;
  transform: translateY(14px);
}
.agx-hero3-card > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink-3);
}
.agx-hero3-card b {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
}
.agx-hero3-card em {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  font-size: 13px;
  color: var(--agx-ink-3);
}
.agx-hero3-card .agx-demo-tag {
  margin-left: 0;
}

@media (max-width: 900px) {
  .agx-hero3-phone {
    width: 56vw;
  }
  .agx-hero3-card--left {
    margin-right: -60px;
  }
  .agx-hero3-card--right {
    margin-left: -60px;
  }
}

@media (max-width: 760px) {
  .agx-hero3 {
    padding: 104px 0 40px;
  }
  .agx-hero3-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .agx-hero3-checks {
    /* the old hero hid .agx-hero-proof on mobile; here the three plain
       reasons ARE the pitch, so they stay */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }
  .agx-hero3-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
  }
  .agx-hero3-phone {
    grid-column: 1 / -1;
    order: -1;
    width: 100%;
  }
  .agx-hero3-card--left,
  .agx-hero3-card--right {
    margin: 0;
    transform: none;
    min-width: 0;
  }
  .agx-hero3-card b {
    font-size: 32px;
  }
}

/* ==================================================================== *
 * HERO v4 — "The Ink Roll-Up": the mechanism made visible on white.
 * Six real link.me page cards feed ink lines that converge below the
 * turning phone into one stem and three plain totals; chips ride the
 * lines. Fixed 850x800 stage on desktop (scaled as a unit), fluid
 * column flow on mobile. hero3 chapter above is dead, kept revertible.
 * ==================================================================== */
.agx-hero4 {
  position: relative;
  padding: 122px 0 96px;
  overflow: clip;
  background: var(--agx-surface);
}
.agx-h4-shell {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.agx-h4-copy .agx-eyebrow {
  margin-bottom: 16px;
}
.agx-hero4 h1 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.07;
  letter-spacing: -0.032em;
  color: var(--agx-ink);
}
.agx-hero4 h1 > span {
  display: block;
}
.agx-h4-l3 {
  position: relative;
  display: inline-block;
}
.agx-h4-l3 svg {
  position: absolute;
  left: 2px;
  bottom: -12px;
  width: 100%;
  height: 12px;
  overflow: visible;
}
.agx-h4-l3 path {
  fill: none;
  stroke: var(--agx-accent);
  stroke-width: 5.5;
  stroke-linecap: round;
}
.agx-h4-ctas {
  /* the hero subline was removed 2026-08-16; the CTAs carry its air */
  margin-top: 42px;
}
.agx-h4-ctas .agx-btn--primary {
  height: 54px;
  padding: 0 30px;
  font-size: 15.5px;
}

/* proof line: App Store rating + roster scale, under the CTAs.
   Gold stars are the App Store's own signal — reading them as the page
   accent orange would make them look like decoration, not a rating. */
.agx-h4-proof {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.agx-h4-stars {
  display: inline-flex;
  gap: 2px;
  line-height: 0;
}
.agx-h4-stars svg {
  fill: #f5a623;
}
.agx-h4-proof p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--agx-ink-3);
}
.agx-h4-proof b {
  font-weight: 700;
  color: var(--agx-ink);
}

/* --- stage ---------------------------------------------------------- */
.agx-h4-stage {
  position: relative;
  width: 850px;
  height: 800px;
  justify-self: center;
}
.agx-h4-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(10, 10, 10, 0.26);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.agx-h4-lines .agx-h4-stem {
  stroke: rgba(10, 10, 10, 0.42);
  stroke-width: 2;
}
.agx-h4-phone {
  position: absolute;
  left: 85px;
  top: 110px;
  width: 680px;
  z-index: 3;
}
.agx-h4-phone .agx-phone-video {
  display: block;
  width: 100%;
  height: auto;
}

/* chips riding the ink lines */
.agx-h4-token {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  offset-rotate: 0deg;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.08);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--agx-ink-2);
  white-space: nowrap;
  opacity: 0;
  animation: agx-h4-ride 6s linear infinite;
}
.agx-h4-token i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--agx-ink-3);
}
.agx-h4-token--sale i {
  background: var(--agx-pos);
}
.agx-h4-token--click i {
  background: #407aff;
}
@keyframes agx-h4-ride {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  29% {
    offset-distance: 100%;
    opacity: 0;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.agx-hero4.is-off .agx-h4-token {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-h4-token {
    animation: none;
    opacity: 0;
  }
}

/* the six real page cards */
/* Photo-first roster tiles — the product's own UserCard grammar (image
   tile, name over a scrim, follower pill) instead of white text rows. */
.agx-h4-card {
  position: absolute;
  z-index: 4;
  display: block;
  width: 136px;
  height: 166px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--agx-surface-3);
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 22px 44px -18px rgba(10, 10, 10, 0.35);
  text-decoration: none;
  transition: transform 0.25s ease;
}
.agx-h4-card:hover {
  transform: scale(1.045);
}
.agx-h4-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agx-h4-card-t {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 8px 9px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.62) 55%,
    rgba(0, 0, 0, 0.78) 100%
  );
}
.agx-h4-card-t b,
.agx-h4-card-t em {
  display: block;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-h4-card-t b {
  font-size: 11.5px;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: #fff;
}
.agx-h4-card-t b u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  border-radius: 50%;
  background: #7c5cff;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  text-decoration: none;
  vertical-align: 1px;
}
.agx-h4-card-t em {
  font-size: 9.5px;
  font-weight: 700;
  color: #ffb27a;
  margin-top: 2px;
}

/* the roll-up strip */
.agx-h4-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 692px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
}
.agx-h4-total {
  display: flex;
  flex-direction: column;
}
.agx-h4-total-v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.agx-h4-total-l {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-h4-mlines {
  display: none;
}

/* --- shrink the stage as one unit ----------------------------------- */
@media (max-width: 1250px) {
  .agx-h4-shell {
    grid-template-columns: 420px minmax(0, 1fr);
  }
  .agx-h4-stage {
    transform: scale(0.8);
    transform-origin: top center;
    margin-bottom: -160px;
  }
}
@media (max-width: 1024px) {
  .agx-h4-shell {
    display: block;
  }
  .agx-h4-copy {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }
  .agx-h4-ctas {
    justify-content: center;
  }
  .agx-h4-proof {
    justify-content: center;
  }
  .agx-h4-stage {
    margin: 20px 0 0 calc((100% - 850px) / 2);
    transform: scale(0.78);
    margin-bottom: -176px;
  }
}

/* --- mobile: cards above, lines converge into the phone -------------- */
@media (max-width: 760px) {
  .agx-hero4 {
    padding: 100px 0 40px;
  }
  .agx-h4-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .agx-h4-proof {
    margin-top: 20px;
  }
  .agx-h4-proof p {
    font-size: 13px;
  }
  .agx-h4-l3 svg {
    bottom: -8px;
  }
  .agx-h4-stage {
    width: 100%;
    height: auto;
    margin: 30px 0 0;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .agx-h4-lines,
  .agx-h4-token {
    display: none;
  }
  .agx-h4-card {
    position: static;
    width: auto;
    height: 104px;
    order: 1;
  }
  .agx-h4-card-t {
    padding: 18px 8px 7px;
  }
  .agx-h4-mlines {
    display: block;
    order: 2;
    grid-column: 1 / -1;
    width: 84%;
    height: 44px;
    margin: 0 auto;
    fill: none;
    stroke: rgba(10, 10, 10, 0.25);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .agx-h4-mlines path {
    vector-effect: non-scaling-stroke;
  }
  .agx-h4-phone {
    position: static;
    order: 3;
    grid-column: 1 / -1;
    width: min(94%, 380px);
    margin: -6px auto 0;
  }
  .agx-h4-strip {
    position: static;
    order: 4;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 14px;
  }
  .agx-h4-total {
    align-items: center;
    text-align: center;
  }
  .agx-h4-total-v {
    font-size: 22px;
  }
  .agx-h4-total-l {
    font-size: 10.5px;
  }
}

/* ==================================================================== *
 * TRUST v3 — real pages, not face chips.
 * Two counter-scrolling MarqueeWrapper rows of the baked 856x2400
 * profile captures (landing-globals.css supplies the scroll animation;
 * these overrides size the cards for this section). The old .agx-mcard
 * chip chapter above is dead, kept revertible.
 * ==================================================================== */
.agx-pages {
  position: relative;
  padding: 8px 0 4px;
}
.agx-pages .marquee-profiles-wrap {
  /* landing-globals' mobile block adds margin-top: 48px to every wrap */
  margin-top: 0;
}
.agx-pages .marquee-profiles-wrap + .marquee-profiles-wrap {
  margin-top: 18px;
}
.agx-trust .marquee-profil-item {
  width: 236px;
  min-width: 236px;
  max-width: 236px;
  height: 464px;
  flex: none;
  border: 1px solid var(--agx-line);
  border-radius: 22px;
  background: #0a0a0a;
  box-shadow: 0 18px 40px -22px rgba(10, 10, 10, 0.28);
  overflow: clip;
}
.agx-trust .marque-profil-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Both rows share ONE frame. The venues row used to sit 44px shorter
   ("like the reference stagger"), but same-width cards at two different
   heights crop their captures differently, so the two rows read as two
   different card types — and because that rule carried a pseudo-class it
   outweighed the phone rule below and leaked its desktop height onto
   phones, where the mismatch was 158px. One rule, every breakpoint. */

@media (max-width: 760px) {
  .agx-trust .marquee-profil-item {
    width: 148px;
    /* landing-globals' mobile block pins min-width: 180px */
    min-width: 148px;
    max-width: 148px;
    height: 262px;
    border-radius: 16px;
  }
  /* one row of pages on phones — the second (venues) row doubled the
     scroll for the same message; venues return in the roster stage */
  /* (venues marquee row was hidden here — reversed 2026-08-16 for parity) */
  .agx-pages .marquee-profiles-wrap + .marquee-profiles-wrap {
    margin-top: 12px;
  }
}

/* TRUST v3 addendum: the old mobile trim hid the proof trio because a
   long-deleted stage already showed 321M+. The approved reference design
   keeps the three stat cards on every viewport — restore them. */
@media (max-width: 760px) {
  .agx-proof {
    display: grid;
  }
}

/* ==================================================================== *
 * ROSTER KINDS — replaces the stat trio + generic pill row.
 * Six hairline rows: organization type, the real pages that kind of team
 * runs, and mini captures of those live link.me pages. Editorial, not a
 * card grid. (.agx-proof / .agx-proof-tags chapters above are now dead.)
 * ==================================================================== */
.agx-kinds {
  margin-top: 64px;
}
.agx-kinds-h {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--agx-ink);
  text-align: center;
}
.agx-kinds-list {
  /* narrower than the shell so the three columns sit as one block instead
     of stranding a dead gap between the names and the page thumbs */
  max-width: 1020px;
  margin: 0 auto;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-kind {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--agx-line-soft);
  border-radius: 12px;
  transition: background-color 0.24s ease;
}
.agx-kind:hover {
  background: var(--agx-surface-2);
}
.agx-kind-h b,
.agx-kind-h em {
  display: block;
  min-width: 0;
}
.agx-kind-h b {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--agx-ink);
}
.agx-kind-h em {
  margin-top: 3px;
  font-style: normal;
  font-size: 13px;
  color: var(--agx-ink-3);
}
.agx-kind-names {
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--agx-ink-2);
}
.agx-kind-pages {
  display: flex;
  gap: 7px;
  flex: none;
}
.agx-kind-pages i {
  display: block;
  width: 44px;
  height: 62px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--agx-line);
  background: #0a0a0a;
  box-shadow: 0 4px 12px -6px rgba(10, 10, 10, 0.4);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}
.agx-kind-pages img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.agx-kind:hover .agx-kind-pages i {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -10px rgba(10, 10, 10, 0.5);
}
.agx-kind:hover .agx-kind-pages i:nth-child(2) {
  transition-delay: 0.04s;
}
.agx-kind:hover .agx-kind-pages i:nth-child(3) {
  transition-delay: 0.08s;
}
.agx-kind:hover .agx-kind-pages i:nth-child(4) {
  transition-delay: 0.12s;
}

@media (max-width: 1024px) {
  .agx-kind {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 12px 20px;
  }
  .agx-kind-pages {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .agx-kinds {
    margin-top: 44px;
  }
  .agx-kind {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px 4px;
  }
  .agx-kind-h b {
    font-size: 17px;
  }
  .agx-kind-names {
    font-size: 13.5px;
  }
  .agx-kind-pages i {
    width: 36px;
    height: 50px;
  }
}

/* ==================================================================== *
 * ROSTER STAGE — one arena, six kinds of team, real pages dealing in.
 * Supersedes the .agx-kinds table chapter above (now dead code).
 * ==================================================================== */
.agx-stage {
  position: relative;
  /* 72→40 top / 40→24 pad: the trust section ran 2,143px before the
     problem pin (flow audit) — tighter handoff from the marquee to
     the roster stage */
  margin-top: 40px;
  padding: 24px 0 8px;
  text-align: center;
  overflow: clip;
}
.agx-rstage-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-stage-head {
  position: relative;
  height: 118px;
  margin-top: 14px;
}
.agx-stage-head > div {
  position: absolute;
  inset: 0;
}
.agx-stage-head h3 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--agx-ink);
}
.agx-stage-head p {
  margin: 12px 0 0;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--agx-ink-2);
}

/* --- the fan ------------------------------------------------------- */
.agx-stage-fan {
  position: relative;
  height: 372px;
  margin-top: 6px;
  --gap: 128px;
  --tilt: 5.5deg;
  --lift: 15px;
}
.agx-stage-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: 176px;
  margin-left: -88px;
  /* the fan itself is a static transform; Motion animates the wrapper's
     own x/y/rotate on top of it via a separate transform layer */
  translate: calc(var(--i) * var(--gap)) calc(abs(var(--i)) * var(--lift));
  rotate: calc(var(--i) * var(--tilt));
  transform-origin: 50% 100%;
}
.agx-stage-card img {
  display: block;
  width: 176px;
  height: 312px;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  border: 1px solid var(--agx-line);
  background: #0a0a0a;
  box-shadow: 0 24px 44px -26px rgba(10, 10, 10, 0.55);
}
.agx-stage-card.is-lead img {
  box-shadow: 0 34px 56px -26px rgba(10, 10, 10, 0.62);
}
.agx-stage-card i {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.agx-stage-card.is-lead i {
  opacity: 1;
  color: var(--agx-ink);
}
.agx-stage-fan:hover .agx-stage-card i {
  opacity: 1;
}

/* --- rail: progress bar and manual control in one ------------------- */
.agx-stage-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 26px;
}
.agx-stage-tab {
  position: relative;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--agx-ink-3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.22s ease,
    background-color 0.22s ease;
}
.agx-stage-tab:hover {
  color: var(--agx-ink);
  background: var(--agx-surface-2);
}
.agx-stage-tab.is-on {
  color: var(--agx-ink);
}
.agx-stage-tab i {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--agx-accent);
  transform-origin: left center;
}
.agx-stage-tab:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .agx-stage-fan {
    --gap: 104px;
    --lift: 13px;
  }
}
@media (max-width: 900px) {
  .agx-stage-fan {
    --gap: 84px;
    --tilt: 4.5deg;
  }
}

@media (max-width: 760px) {
  .agx-stage {
    margin-top: 44px;
    padding: 24px 0 4px;
  }
  .agx-stage-head {
    height: 104px;
    margin-top: 10px;
  }
  .agx-stage-head p {
    margin-top: 9px;
  }
  /* Wide fan: the five cards spread across the whole stage so every
     profile reads, not just the lead — each outer card is ~62% uncovered
     (was 44%). The step is in vw so 360px phones keep the same picture;
     with the 3deg tilt the outer cards' rotated corners stay inside the
     stage's clip down to 360. All five names show, counter-rotated so
     they sit level, on two alternating rows (1, 3, 5 / 2, 4) so no label
     touches another. */
  .agx-stage-fan {
    height: 218px;
    --gap: 13.8vw;
    --tilt: 3deg;
    --lift: 4px;
  }
  .agx-stage-card {
    width: 88px;
    margin-left: -44px;
  }
  .agx-stage-card img {
    width: 88px;
    height: 156px;
    border-radius: 11px;
  }
  .agx-stage-card i,
  .agx-stage-fan:hover .agx-stage-card i,
  .agx-stage-fan:hover .agx-stage-card.is-lead i {
    position: absolute;
    left: 50%;
    top: calc(174px - abs(var(--i)) * var(--lift) + var(--row, 0px));
    width: max-content;
    /* row-mates sit 2×gap = 27.6vw apart, so the cap leaves 4px between them */
    max-width: 26.6vw;
    margin: 0;
    translate: -50% 0;
    rotate: calc(var(--i) * var(--tilt) * -1);
    font-size: 11.5px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--agx-ink-2);
    opacity: 1;
  }
  .agx-stage-fan .agx-stage-card.is-lead i,
  .agx-stage-fan:hover .agx-stage-card.is-lead i {
    color: var(--agx-ink);
  }
  .agx-stage-hand .agx-stage-card:nth-child(2) i,
  .agx-stage-hand .agx-stage-card:nth-child(4) i {
    --row: 20px;
  }
  /* six labels wrapped 5 + 1 and read broken; a fixed 3x2 grid reads as
     a deliberate control pad and keeps every tap target full width */
  .agx-stage-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 4px;
    margin-top: 16px;
  }
  .agx-stage-tab {
    height: 42px;
    padding: 0 6px;
    font-size: 13px;
  }
  .agx-stage-tab i {
    left: 22%;
    right: 22%;
    bottom: 6px;
  }
}

/* ==================================================================== *
 * PROBLEM SECTION — legibility + final-row fixes
 *   1. The drifting faces sat directly behind the beat copy; on the white
 *      stage a dark photo under grey body text destroyed the contrast.
 *      A soft white bloom inside the beat's own stacking context clears
 *      the type without drawing a visible box.
 *   2. The final row merged into one dark blob (56px faces on a ~33px
 *      step). Faces now carry a white ring, and their size travels via
 *      --s so phones can scale the whole cast down.
 * ==================================================================== */
.agx-slam-beat::before {
  content: "";
  position: absolute;
  inset: -18% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    62% 60% at 50% 50%,
    #fff 0%,
    rgba(255, 255, 255, 0.97) 42%,
    rgba(255, 255, 255, 0.82) 62%,
    rgba(255, 255, 255, 0) 80%
  );
}
.agx-slam-face img {
  width: calc(var(--s, 54) * 1px);
  height: calc(var(--s, 54) * 1px);
  border: 3px solid #fff;
  box-shadow: 0 10px 26px -12px rgba(10, 10, 10, 0.45);
}

@media (max-width: 900px) {
  .agx-slam-face img {
    width: calc(var(--s, 54) * 0.84px);
    height: calc(var(--s, 54) * 0.84px);
  }
}
@media (max-width: 760px) {
  .agx-slam-beat::before {
    inset: -14% -8%;
  }
  .agx-slam-face img {
    width: calc(var(--s, 54) * 0.66px);
    height: calc(var(--s, 54) * 0.66px);
    border-width: 2px;
  }
}

/* The bloom clears the type on wide stages, but at 390px the subline runs
   nearly edge to edge, so a drifting face can still land on its last word.
   A white halo on the copy itself guarantees the words win everywhere. */
.agx-slam-beat p {
  text-shadow:
    0 0 12px #fff,
    0 0 24px #fff,
    0 0 36px rgba(255, 255, 255, 0.9);
}
@media (max-width: 760px) {
  .agx-slam-beat::before {
    inset: -12% -26%;
  }
}

/* The resolve: the cast collapses into the headline and vanishes behind
   it. Nothing is parked under the type — the row of circles, its underline
   and the workspace pill that replaced them all read as decoration hung off
   a title card. Their rules stay dead below for revertibility. */
.agx-slam-line,
.agx-slam-hub {
  display: none;
}

/* ==================================================================== *
 * WORKSPACE REPLICA — the marketing panel now mirrors the shipped
 * agency dashboard instead of a drawing of one. Geometry and labels
 * trace modules/agency/** (see the component header for the map).
 * ==================================================================== */
.agx-ws2 {
  border: 1px solid var(--agx-line);
  border-radius: 24px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  padding: 18px;
  overflow: clip;
}

/* --- toolbar ------------------------------------------------------- */
.agx-ws2-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--agx-line-soft);
}
.agx-ws2-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.agx-ws2-id b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--agx-ink);
}
.agx-ws2-id em {
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
/* the real search field is a rounded-full input on a muted ground */
.agx-ws2-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface-2);
  color: var(--agx-ink-3);
  font-size: 13.5px;
}
.agx-ws2-search svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.agx-ws2-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface-2);
}
.agx-ws2-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--agx-ink-3);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.agx-ws2-toggle button.is-on {
  background: #fff;
  color: var(--agx-ink);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.12);
}
.agx-ws2-bar .agx-demo-tag {
  margin-left: 0;
}

/* --- the four stat tiles ------------------------------------------- */
.agx-ws2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
.agx-ws2-stat {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  background: var(--agx-surface);
}
.agx-ws2-stat em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--agx-ink-3);
}
.agx-ws2-stat b {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}

/* --- roster grid: square tiles, name above, metrics over the image -- */
.agx-ws2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.agx-ws2-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agx-ws2-card-h {
  display: block;
  min-width: 0;
  margin-bottom: 8px;
}
.agx-ws2-card-h b,
.agx-ws2-card-h em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-ws2-card-h b {
  font-size: 15px;
  font-weight: 600;
  color: var(--agx-ink);
}
.agx-ws2-card-h em {
  font-style: normal;
  font-size: 13px;
  color: var(--agx-ink-3);
}
.agx-ws2-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0a;
}
.agx-ws2-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the shipped card fades a light veil up from the bottom, then floats the
   view/click pair on top of it */
.agx-ws2-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(250, 250, 250, 0.94) 0%,
    rgba(250, 250, 250, 0.55) 34%,
    rgba(250, 250, 250, 0) 62%
  );
}
.agx-ws2-metrics {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 22px;
}
.agx-ws2-metrics > span {
  text-align: center;
}
.agx-ws2-metrics b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.agx-ws2-metrics em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #4b4b52;
}
.agx-ws2-chip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  font-style: normal;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
}
.agx-ws2-chip--sky {
  background: rgba(14, 165, 233, 0.9);
}
.agx-ws2-chip--violet {
  background: rgba(139, 92, 246, 0.9);
}

/* --- list view: the dashboard's compact row ------------------------ */
.agx-ws2-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agx-ws2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  background: var(--agx-surface);
}
.agx-ws2-row > img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--agx-line);
}
.agx-ws2-row-t {
  min-width: 0;
  flex: 1 1 auto;
}
.agx-ws2-row-t b,
.agx-ws2-row-t em,
.agx-ws2-row-t u {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-ws2-row-t b {
  font-size: 15px;
  font-weight: 500;
  color: var(--agx-ink);
}
.agx-ws2-row-t em {
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-ws2-row-t u {
  margin-top: 4px;
  text-decoration: none;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-ws2-row .agx-ws2-chip {
  position: static;
  flex: none;
}
.agx-ws2-row-go {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--agx-ink-3);
}

@media (max-width: 1024px) {
  .agx-ws2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .agx-ws2 {
    padding: 14px;
    border-radius: 20px;
  }
  .agx-ws2-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .agx-ws2-search {
    order: 3;
    flex: 1 1 auto;
    height: 36px;
  }
  .agx-ws2-toggle {
    order: 4;
  }
  .agx-ws2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 16px;
  }
  .agx-ws2-stat {
    padding: 12px 13px;
  }
  .agx-ws2-stat b {
    font-size: 22px;
  }
  .agx-ws2-grid {
    gap: 14px;
  }
  .agx-ws2-metrics {
    gap: 16px;
    bottom: 10px;
  }
  .agx-ws2-metrics b {
    font-size: 13px;
  }
  .agx-ws2-metrics em {
    font-size: 11px;
  }
}

/* Mobile list rows: the role chip competed with the name for width and
   truncated it to "Anthony ...". Give the text a floor so the chip wraps
   onto its own line instead of squeezing the row. */
@media (max-width: 760px) {
  .agx-ws2-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .agx-ws2-row-t {
    min-width: 62%;
  }
  .agx-ws2-row-go {
    order: 3;
  }
  .agx-ws2-row .agx-ws2-chip {
    order: 4;
    margin-left: 60px;
  }
}

/* The working dashboard's page-level tabs are underline style, not pills
   (modules/agency/components/common/TabNavigation.tsx). */
.agx-ws2-tabs {
  display: flex;
  gap: 26px;
  margin-top: 14px;
  border-bottom: 1px solid var(--agx-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.agx-ws2-tabs::-webkit-scrollbar {
  display: none;
}
.agx-ws2-tabs span {
  flex: none;
  padding: 10px 2px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 500;
  color: var(--agx-ink-3);
  white-space: nowrap;
}
.agx-ws2-tabs span.is-on {
  border-bottom-color: var(--agx-ink);
  color: var(--agx-ink);
}
@media (max-width: 760px) {
  .agx-ws2-tabs {
    gap: 20px;
    margin-top: 12px;
  }
  .agx-ws2-tabs span {
    font-size: 13.5px;
  }
}

/* ==================================================================== *
 * THE AGENCY APP, LIVE — a coded replica of the shipped dashboard as it
 * renders on a phone, in a device frame, choreographed. Replaces the
 * pre-rendered hero footage; AgenciesHeroVideo keeps its file.
 * ==================================================================== */
.agx-app {
  display: flex;
  justify-content: center;
  perspective: 1600px;
}
.agx-app-frame {
  position: relative;
  width: 310px;
  height: 640px;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg, #3a3a40 0%, #0d0d10 42%, #26262b 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.22) inset,
    0 44px 90px -38px rgba(10, 10, 10, 0.62),
    0 12px 28px -14px rgba(10, 10, 10, 0.4);
  transform: rotateY(-9deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.agx-app-island {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 3;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  border-radius: 999px;
  background: #000;
}
.agx-app-screen {
  position: relative;
  height: 100%;
  border-radius: 38px;
  background: #0a0a0c;
  overflow: hidden;
  padding: 46px 14px 14px;
  color: #fff;
}

/* --- app chrome ----------------------------------------------------- */
.agx-app-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.agx-app-mark {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(140deg, #ff7a18, #ec008c);
}
.agx-app-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.agx-app-id b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-app-id em {
  font-style: normal;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
}
.agx-app-me {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
}

/* --- the four real tiles -------------------------------------------- */
.agx-app-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.agx-app-stat {
  display: flex;
  flex-direction: column;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}
.agx-app-stat em {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.agx-app-stat-v {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* the app tints each metric, same as the product */
.agx-app-stat:nth-child(2) .agx-app-stat-v {
  color: #4da3ff;
}
.agx-app-stat:nth-child(3) .agx-app-stat-v {
  color: #34d17a;
}
.agx-app-stat:nth-child(4) .agx-app-stat-v {
  color: #ffb020;
}

/* --- underline tabs ------------------------------------------------- */
.agx-app-tabs {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.agx-app-tabs span {
  position: relative;
  flex: none;
  padding: 0 1px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.agx-app-tabs span.is-on {
  color: #fff;
}
.agx-app-tabs i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

/* --- search row ----------------------------------------------------- */
.agx-app-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 0 4px 0 11px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.agx-app-search svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: rgba(255, 255, 255, 0.45);
}
.agx-app-search > span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
}
.agx-app-search > span.is-typed {
  color: #fff;
}
.agx-app-create {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0c;
  font-size: 10.5px;
  font-weight: 700;
}

/* --- roster grid ---------------------------------------------------- */
.agx-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.agx-app-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agx-app-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 13px;
  overflow: hidden;
  background: #17171b;
}
.agx-app-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.agx-app-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.35) 38%,
    rgba(0, 0, 0, 0) 66%
  );
}
.agx-app-metrics {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4px;
  text-align: center;
}
.agx-app-metrics b {
  font-size: 10.5px;
  font-weight: 700;
}
.agx-app-metrics em {
  font-style: normal;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.62);
}
.agx-app-chip {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  font-style: normal;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.92);
  font-size: 8.5px;
  font-weight: 700;
}
.agx-app-name {
  display: block;
  min-width: 0;
  margin-top: 6px;
}
.agx-app-name b,
.agx-app-name em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-app-name b {
  font-size: 11px;
  font-weight: 600;
}
.agx-app-name em {
  font-style: normal;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1250px) {
  .agx-app-frame {
    transform: rotateY(-7deg);
  }
}
@media (max-width: 760px) {
  .agx-app-frame {
    width: 270px;
    height: 558px;
    border-radius: 40px;
    transform: none;
  }
  .agx-app-screen {
    border-radius: 33px;
    padding: 42px 12px 12px;
  }
  .agx-app-stat-v {
    font-size: 16px;
  }
}

/* The hero phone is live DOM now. The slot used to hold a 709x500 video
   canvas anchored at left:85; a real device box has to be centred on the
   stage instead, and sized to clear the page cards at x=204 and x=646 and
   stop above the convergence point at y=640. */
.agx-h4-phone {
  left: 50%;
  top: 56px;
  width: auto;
  translate: -50% 0;
  display: flex;
  justify-content: center;
}
.agx-h4-phone .agx-app-frame {
  width: 264px;
  height: 544px;
  border-radius: 40px;
  padding: 8px;
}
.agx-h4-phone .agx-app-screen {
  border-radius: 33px;
  padding: 40px 11px 11px;
}
.agx-h4-phone .agx-app-island {
  top: 17px;
  width: 72px;
  height: 21px;
  margin-left: -36px;
}
.agx-h4-phone .agx-app-stat-v {
  font-size: 16px;
}

@media (max-width: 760px) {
  .agx-h4-phone {
    position: static;
    width: 100%;
    translate: none;
  }
  .agx-h4-phone .agx-app-frame {
    width: 258px;
    height: 532px;
  }
}

/* ==================================================================== *
 * PHONE APP v2 — the footage's cinematography, kept.
 * The live replica read flat next to the rendered clip it replaced: a
 * video of a real device carries a slow orbit, moving glass highlights
 * and a shadow that breathes. All three are recreated here in CSS so the
 * DOM version keeps the depth AND stays interactive.
 * ==================================================================== */
.agx-app {
  position: relative;
  transform-style: preserve-3d;
}
.agx-app-frame {
  /* the static tilt becomes a slow orbit */
  animation: agx-app-float 13s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.24) inset,
    1px 0 0 rgba(255, 255, 255, 0.3) inset,
    -1px 0 0 rgba(255, 255, 255, 0.14) inset,
    0 54px 90px -40px rgba(10, 10, 10, 0.55),
    0 14px 30px -16px rgba(10, 10, 10, 0.4);
}
@keyframes agx-app-float {
  0% {
    transform: rotateY(-13deg) rotateX(2.5deg) translateY(-7px);
  }
  50% {
    transform: rotateY(-2deg) rotateX(-1.5deg) translateY(9px);
  }
  100% {
    transform: rotateY(-13deg) rotateX(2.5deg) translateY(-7px);
  }
}

/* the ground shadow tracks the orbit instead of sitting still */
.agx-app-shadow {
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 0;
  width: 76%;
  height: 38px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(10, 10, 10, 0.4),
    rgba(10, 10, 10, 0)
  );
  filter: blur(7px);
  animation: agx-app-shade 13s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes agx-app-shade {
  0%,
  100% {
    transform: scaleX(0.9);
    opacity: 0.52;
  }
  50% {
    transform: scaleX(1.08);
    opacity: 0.34;
  }
}

/* a highlight sweeping the glass — the single strongest cue that this is
   a physical object and not a screenshot in a rounded box. Painted as a
   moving background on the overlay itself: a rotated child element showed
   its own hard edge crossing the screen, and could not be clipped
   reliably inside the frame's preserve-3d context. */
.agx-app-glare {
  position: absolute;
  inset: 8px;
  z-index: 4;
  border-radius: 33px;
  pointer-events: none;
  background-image: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(255, 255, 255, 0.17) 50%,
    rgba(255, 255, 255, 0.07) 55%,
    rgba(255, 255, 255, 0) 66%
  );
  background-size: 280% 100%;
  background-repeat: no-repeat;
  animation: agx-app-sheen 8.5s ease-in-out infinite;
}
@keyframes agx-app-sheen {
  0%,
  14% {
    background-position: 150% 0;
  }
  62%,
  100% {
    background-position: -50% 0;
  }
}

/* bezel rim: a bright edge catching light on the turn */
.agx-app-rim {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 22px rgba(255, 255, 255, 0.07) inset;
}
/* screen glass: a faint reflection down the top third */
.agx-app-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0) 78%
  );
}

/* off-screen and reduced-motion both park the whole rig */
.agx-app.is-off .agx-app-frame,
.agx-app.is-off .agx-app-shadow,
.agx-app.is-off .agx-app-glare {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-app-frame {
    animation: none;
    transform: rotateY(-8deg);
  }
  .agx-app-shadow {
    animation: none;
  }
  .agx-app-glare {
    display: none;
  }
}

/* ==================================================================== *
 * HERO PHONE — back to the rendered clip.
 * The coded device replica was swapped in and rejected twice: a real 3D
 * render carries materials, depth and lighting that CSS transforms only
 * approximate. Restoring the video's geometry (a 709x500 canvas anchored
 * left, not a centred device box). The replica keeps its file.
 * ==================================================================== */
.agx-h4-phone {
  left: 85px;
  top: 110px;
  width: 680px;
  translate: none;
  display: block;
}
@media (max-width: 760px) {
  .agx-h4-phone {
    position: static;
    width: min(94%, 380px);
    margin: -6px auto 0;
    translate: none;
  }
}

/* ==================================================================== *
 * ANALYTICS REPLICA — the numbers the workspace reports, mirrored from
 * modules/agency/components/analytics/**. Sits under the workspace panel:
 * range switch, four KPI tiles, the two-series traffic chart, then the
 * per-talent leaderboard.
 * ==================================================================== */
.agx-an {
  margin-top: 18px;
  border: 1px solid var(--agx-line);
  border-radius: 24px;
  background: var(--agx-surface);
  box-shadow: var(--agx-shadow-lg);
  padding: 18px;
}
.agx-an-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--agx-line-soft);
}
.agx-an-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.agx-an-id b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--agx-ink);
}
.agx-an-id em {
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-an-ranges {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface-2);
}
.agx-an-ranges button {
  min-width: 46px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--agx-ink-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.agx-an-ranges button.is-on {
  background: #fff;
  color: var(--agx-ink);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.12);
}
.agx-an-toolbar .agx-demo-tag {
  margin-left: 0;
}

/* --- four KPI tiles ------------------------------------------------- */
.agx-an-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
}
.agx-an-tile {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  background: var(--agx-surface);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
.agx-an-tile-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.agx-an-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--agx-surface-2);
  color: var(--agx-ink-3);
}
.agx-an-ic svg {
  width: 17px;
  height: 17px;
}
.agx-an-trend {
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--agx-pos);
  white-space: nowrap;
}
.agx-an-tile b {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-an-tile em {
  margin-top: 2px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--agx-ink-2);
}

/* --- traffic overview ----------------------------------------------- */
.agx-an-chart {
  padding: 16px;
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
}
.agx-an-chart-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.agx-an-chart-h b {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-an-legend {
  display: inline-flex;
  gap: 16px;
}
.agx-an-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-an-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.agx-an-key--views::before {
  background: #ec008c;
}
.agx-an-key--clicks::before {
  background: #8b5cf6;
}
.agx-an-plot {
  display: block;
  width: 100%;
  height: 150px;
}

/* --- per-talent leaderboard ----------------------------------------- */
.agx-an-board {
  margin-top: 16px;
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  overflow: hidden;
}
.agx-an-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--agx-line-soft);
  font-size: 14px;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-an-row:first-child {
  border-top: 0;
}
.agx-an-row--head {
  background: var(--agx-surface-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-an-row > span {
  min-width: 0;
}
.agx-an-row--head > span:not(:first-child),
.agx-an-row > span[data-l] {
  text-align: right;
}
.agx-an-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.agx-an-who img {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--agx-line);
}
.agx-an-who b,
.agx-an-who em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-an-who b {
  font-size: 14px;
  font-weight: 600;
}
.agx-an-who em {
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}

@media (max-width: 1024px) {
  .agx-an-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .agx-an {
    padding: 14px;
    border-radius: 20px;
    margin-top: 14px;
  }
  .agx-an-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .agx-an-tiles {
    gap: 10px;
    margin: 14px 0 16px;
  }
  .agx-an-tile {
    padding: 13px;
  }
  .agx-an-tile b {
    font-size: 23px;
  }
  .agx-an-tile em {
    font-size: 12.5px;
  }
  .agx-an-ic {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  /* the table becomes stacked cards, the way the product's leaderboard
     drops to a definition list below its breakpoint */
  .agx-an-row--head {
    display: none;
  }
  .agx-an-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 14px;
  }
  .agx-an-who {
    grid-column: 1 / -1;
  }
  .agx-an-row > span[data-l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
  }
  .agx-an-row > span[data-l]::before {
    content: attr(data-l);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--agx-ink-3);
  }
}

/* ==================================================================== *
 * POST TO ALL — white ground.
 * ActReel hardcodes `bg-black` on `.reel-stage` (ActReel.tsx:1306) with
 * no `light:` variant, so `.biz-light` alone leaves a black band cutting
 * through this white section. Overridden here and ONLY under .agx-pta —
 * the same component renders the homepage reel on black and must not
 * change there.
 * ==================================================================== */
.agx-pta .reel-stage {
  background: #fff;
}

/* ==================================================================== *
 * ANALYTICS REPLICA v2 — rebuilt against a recording of the shipped
 * analytics page. Adds the dark performance header, the Custom range +
 * date chip + creator filter, tinted delta pills, leaderboard medals and
 * bars, axes on the chart, the interactions/engagement pair, real-time
 * activity and traffic sources. Supersedes the v1 chapter above.
 * ==================================================================== */

/* --- dark performance header ---------------------------------------- */
.agx-an-hero {
  position: relative;
  border-radius: 20px;
  padding: 20px 22px 22px;
  margin-bottom: 16px;
  background:
    radial-gradient(
      120% 140% at 88% 0%,
      rgba(236, 0, 140, 0.28) 0%,
      rgba(236, 0, 140, 0) 58%
    ),
    #101013;
  color: #fff;
  overflow: hidden;
}
.agx-an-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.agx-an-hero-top > em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.agx-an-hero-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.agx-an-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.agx-an-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
.agx-an-hero .agx-an-live {
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.agx-an-refresh {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}
.agx-an-hero-name {
  display: block;
  margin-top: 12px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.agx-an-hero-sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.agx-an-hero-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
}
.agx-an-hero-lead > em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.agx-an-hero-big {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.agx-an-hero-big b {
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.agx-an-faces {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 14px;
}
.agx-an-faces img,
.agx-an-faces i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #101013;
  flex: none;
}
.agx-an-faces img + img,
.agx-an-faces i {
  margin-left: -8px;
}
.agx-an-faces i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
}
.agx-an-faces u {
  margin-left: 10px;
  text-decoration: none;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.agx-an-hero-side {
  display: flex;
  gap: 28px;
  flex: none;
}
.agx-an-hero-side > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.agx-an-hero-side em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.agx-an-hero-side b {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- delta pills: green rising, pink falling ------------------------ */
.agx-an-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.agx-an-pill.is-down {
  background: rgba(236, 0, 140, 0.1);
  color: #d6007f;
}
.agx-an-hero .agx-an-pill {
  background: rgba(74, 222, 128, 0.16);
  color: #4ade80;
}
.agx-an-hero .agx-an-pill.is-down {
  background: rgba(244, 114, 182, 0.16);
  color: #f472b6;
}

/* --- controls row --------------------------------------------------- */
.agx-an .agx-an-toolbar {
  flex-wrap: wrap;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 16px;
}
.agx-an-date,
.agx-an-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface);
  color: var(--agx-ink-2);
  font-size: 12.5px;
  font-weight: 600;
}
.agx-an-date svg,
.agx-an-filter svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--agx-ink-3);
}
.agx-an-filter {
  margin-left: auto;
}

/* --- cards ---------------------------------------------------------- */
.agx-an-card {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
}
.agx-an-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.agx-an-card-t b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: var(--agx-ink);
}
.agx-an-card-t em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--agx-ink-3);
}
.agx-an-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--agx-line);
  border-radius: 999px;
  background: var(--agx-surface-2);
  color: var(--agx-ink-3);
  font-size: 12.5px;
}
.agx-an-search svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.agx-an-total {
  text-align: right;
  flex: none;
}
.agx-an-total em {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-an-total b {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
}

/* --- leaderboard ---------------------------------------------------- */
.agx-an .agx-an-board {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}
.agx-an .agx-an-row {
  grid-template-columns:
    minmax(0, 2.1fr) minmax(0, 1.05fr) minmax(0, 0.85fr)
    minmax(0, 0.7fr) minmax(0, 0.85fr) 64px;
  padding: 12px 6px;
}
.agx-an .agx-an-row--head {
  background: transparent;
  border-bottom: 1px solid var(--agx-line);
  border-top: 0;
}
.agx-an-row--head i {
  font-style: normal;
  color: var(--agx-ink-3);
  opacity: 0.7;
}
.agx-an-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}
.agx-an-rank--1 {
  background: linear-gradient(140deg, #ff9d2e, #ec008c);
}
.agx-an-rank--2 {
  background: linear-gradient(140deg, #ff7ab8, #d6007f);
}
.agx-an-rank--3 {
  background: linear-gradient(140deg, #ffb46b, #ff6a3d);
}
.agx-an-rank--n {
  background: transparent;
  color: var(--agx-ink-3);
}
.agx-an-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.agx-an-lead b {
  font-weight: 600;
}
.agx-an-lead > i {
  display: block;
  width: 100%;
  max-width: 132px;
  height: 3px;
  border-radius: 3px;
  background: var(--agx-line-soft);
  overflow: hidden;
}
.agx-an-lead u {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff9d2e, #ec008c);
}
.agx-an-view {
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink-3);
  white-space: nowrap;
}

/* --- chart axes ----------------------------------------------------- */
.agx-an-plotwrap {
  display: flex;
  gap: 10px;
}
.agx-an-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  padding: 4px 0 10px;
}
.agx-an-yaxis em,
.agx-an-xaxis em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--agx-ink-3);
  font-variant-numeric: tabular-nums;
}
.agx-an .agx-an-plot {
  flex: 1 1 auto;
  height: 168px;
}
.agx-an-grid {
  stroke: var(--agx-line-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.agx-an-xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-left: 36px;
}

/* --- interactions + engagement -------------------------------------- */
.agx-an-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.agx-an-stat {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--agx-line);
  border-radius: 18px;
  background: var(--agx-surface);
}
.agx-an-stat > em {
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--agx-ink-2);
}
.agx-an-stat > b {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-an-stat > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.agx-an-stat u {
  text-decoration: none;
  font-size: 11.5px;
  color: var(--agx-ink-3);
}
.agx-an-ic--blue {
  background: rgba(64, 122, 255, 0.1);
  color: #2f6bff;
}
.agx-an-ic--green {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

/* --- real-time ------------------------------------------------------ */
.agx-an-rt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.agx-an-rt-tile {
  display: flex;
  flex-direction: column;
  padding: 13px 15px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: var(--agx-surface-2);
}
.agx-an-rt-tile em {
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-an-rt-tile b {
  margin-top: 3px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-an-rt-tile u {
  margin-top: 2px;
  text-decoration: none;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-rtplot {
  display: block;
  width: 100%;
  height: 90px;
  margin-top: 12px;
}

/* --- traffic sources ------------------------------------------------ */
.agx-an-src {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agx-an-src-row {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 9px;
  padding: 9px 4px;
  font-size: 13.5px;
}
.agx-an-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agx-ink-3);
}
.agx-an-dot--0 {
  background: #ec008c;
}
.agx-an-dot--1 {
  background: #8b5cf6;
}
.agx-an-dot--2 {
  background: #ff3b30;
}
.agx-an-dot--3 {
  background: #2f6bff;
}
.agx-an-dot--4 {
  background: #16a34a;
}
.agx-an-dot--5 {
  background: #ff9d2e;
}
.agx-an-src-row b {
  font-weight: 600;
  color: var(--agx-ink);
}
.agx-an-src-row em {
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-an-src-v {
  font-weight: 600;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.agx-an-src-p {
  text-align: right;
  font-size: 12.5px;
  color: var(--agx-ink-3);
  font-variant-numeric: tabular-nums;
}
.agx-an-src-bar {
  grid-column: 2 / -1;
  height: 3px;
  border-radius: 3px;
  background: var(--agx-line-soft);
  overflow: hidden;
}
.agx-an-src-bar u {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff9d2e, #ec008c);
}

@media (max-width: 1024px) {
  .agx-an-hero-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .agx-an-hero-side {
    gap: 22px;
  }
}

@media (max-width: 760px) {
  .agx-an-hero {
    padding: 16px;
  }
  .agx-an-hero-side {
    flex-wrap: wrap;
    gap: 14px 22px;
  }
  .agx-an-hero-side b {
    font-size: 17px;
  }
  .agx-an-filter {
    margin-left: 0;
  }
  .agx-an-card {
    padding: 14px;
  }
  .agx-an-card-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .agx-an-search,
  .agx-an-total {
    align-self: stretch;
    text-align: left;
  }
  /* the leaderboard becomes stacked cards, the way the product's table
     collapses to a definition list below its breakpoint */
  .agx-an .agx-an-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 14px 4px;
  }
  .agx-an-lead {
    align-items: stretch;
  }
  .agx-an-lead > i {
    max-width: none;
  }
  /* parity (2026-08-16): keep View ›, the Y axis and every X label on
     phones — smaller, not gone */
  .agx-an-view {
    font-size: 11px;
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }
  .agx-an-yaxis {
    width: 26px;
    font-size: 9.5px;
  }
  .agx-an-xaxis {
    padding-left: 26px;
  }
  .agx-an-xaxis em {
    font-size: 9.5px;
    letter-spacing: -0.01em;
  }
  .agx-an-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .agx-an-rt {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .agx-an-src-row {
    grid-template-columns: 10px auto minmax(0, 1fr) auto 40px;
    font-size: 13px;
  }
  /* parity: hosts render, smaller, under the name */
  .agx-an-src-row em {
    font-size: 10.5px;
  }
}

/* ==================================================================== *
 * ANALYTICS ON MOBILE — condensed, not cut.
 * At 390px the panel ran 3,523px (4.2 screens) against 2,255px on
 * desktop, because every stacked block that reads fine at 1440 doubles
 * in height on a phone. Every number stays; the layout just stops
 * wasting a full row per figure. Desktop is untouched.
 * ==================================================================== */
@media (max-width: 760px) {
  /* Header: the roster line and the three trailing metrics tighten. */
  .agx-an-hero {
    padding: 14px;
  }
  .agx-an-hero-body {
    margin-top: 16px;
    gap: 14px;
  }
  .agx-an-hero-big b {
    font-size: 34px;
  }
  .agx-an-faces {
    margin-top: 10px;
  }
  .agx-an-hero-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .agx-an-hero-side b {
    font-size: 15px;
  }
  .agx-an-hero-side em {
    font-size: 9px;
  }

  /* Leaderboard row: name + views on the first line, the remaining three
     figures as a labelled strip on the second — instead of six rows of
     two stacked cells. */
  .agx-an .agx-an-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 12px 4px;
  }
  .agx-an .agx-an-who {
    grid-column: 1 / 3;
  }
  .agx-an .agx-an-lead {
    grid-column: 3 / 4;
    align-items: flex-end;
  }
  .agx-an .agx-an-lead > i {
    max-width: 86px;
  }
  .agx-an-row > span[data-l]:not(.agx-an-lead) {
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
  }
  .agx-an-row > span[data-l]:not(.agx-an-lead)::before {
    content: attr(data-l);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--agx-ink-3);
  }
  .agx-an-who img {
    width: 30px;
    height: 30px;
  }

  /* The pairs stay side by side — two half-width cards read better than
     two full-width ones and save a screen between them. */
  .agx-an-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .agx-an-stat {
    padding: 13px;
  }
  .agx-an-stat > b {
    font-size: 21px;
  }
  .agx-an-stat > em {
    margin-top: 9px;
    font-size: 12px;
  }
  .agx-an-stat > span {
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }

  /* Real-time: three across, as on desktop. */
  .agx-an-rt {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .agx-an-rt-tile {
    padding: 10px;
  }
  .agx-an-rt-tile em {
    font-size: 10.5px;
  }
  .agx-an-rt-tile b {
    font-size: 17px;
  }
  .agx-an-rt-tile u {
    font-size: 10px;
  }
  .agx-an-rtplot {
    height: 66px;
  }

  /* Sources: the bar tucks under the row instead of claiming its own. */
  .agx-an-src-row {
    gap: 6px 8px;
    padding: 7px 2px;
  }
  .agx-an-tiles {
    gap: 8px;
  }
  .agx-an-tile {
    padding: 12px;
  }
  .agx-an-tile b {
    font-size: 21px;
  }
  .agx-an-card {
    margin-top: 12px;
  }
}

/* Last of the mobile trim: the control row was breaking to three lines
   (ranges / dates / filter), and each leaderboard row spent 120px on a
   two-line metric strip. */
@media (max-width: 760px) {
  .agx-an .agx-an-toolbar {
    gap: 8px;
    margin-bottom: 12px;
  }
  .agx-an-ranges {
    width: 100%;
    justify-content: space-between;
  }
  .agx-an-ranges button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
  }
  .agx-an-date {
    flex: 1 1 auto;
    height: 34px;
    padding: 0 11px;
    font-size: 11.5px;
  }
  .agx-an-filter {
    flex: none;
    height: 34px;
    padding: 0 11px;
    font-size: 11.5px;
  }
  .agx-an .agx-an-row {
    gap: 6px 8px;
    padding: 10px 4px;
  }
  .agx-an-row > span[data-l]:not(.agx-an-lead) {
    gap: 0;
    font-size: 12.5px;
    line-height: 1.25;
  }
  .agx-an-row > span[data-l]:not(.agx-an-lead)::before {
    font-size: 9.5px;
    line-height: 1.3;
  }
  .agx-an .agx-an-lead {
    gap: 4px;
  }
}

/* ============================================================
   THE WORKING LEDGER — monetization set piece on white
   (AgenciesMonetizationSection). A pinned 260vh broadsheet:
   the $745.7K builds itself row by row, seals with an orange
   rule + a true CSS double rule, then the recap document rises
   out of the dimmed ledger. Append-only block; the old agx-dark
   / agx-money / agx-rev styles are untouched (flagged for a
   separate cleanup pass).
   ============================================================ */
.agx-ledger-sec {
  background: var(--agx-surface);
}
.agx-ledger-run {
  position: relative;
  height: 260vh;
}
.agx-ledger-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  display: flex;
  align-items: center;
  /* clears the ~82px fixed navbar (the slam kicker's lesson) */
  padding-top: 96px;
  box-sizing: border-box;
}
@supports (height: 100svh) {
  .agx-ledger-stage {
    height: 100svh;
  }
}
.agx-ledger-shell {
  width: 100%;
}
.agx-ledger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.35fr);
  gap: 36px;
  width: 100%;
  align-items: start;
}
.agx-ledger-spine {
  width: 1px;
  height: 100%;
  background: var(--agx-line);
}
.agx-ledger-h2 {
  font-size: clamp(30px, 2.6vw, 40px);
}
.agx-ledger-lede {
  font-size: 15.5px;
  max-width: 42ch;
  /* kill the inherited auto-centering — this lede is a left column */
  margin: 0;
}

/* ---- the register ---- */
.agx-ledger-register {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 34px;
}
.agx-ledger-register-l {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-ledger-register-v {
  display: block;
  font-size: clamp(88px, 9vw, 148px);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
}
.agx-ledger-register-s {
  font-size: 13px;
  color: var(--agx-ink-3);
}
.agx-ledger-meter {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  overflow: hidden;
  margin-top: 8px;
}
.agx-ledger-seg {
  display: block;
  min-width: 3px;
  height: 100%;
}
.agx-ledger-register-rule {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--agx-accent);
  margin-top: 10px;
}
.agx-ledger-check {
  font-size: 13.5px;
  color: var(--agx-ink-2);
}
.agx-ledger-register-d {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--agx-pos);
}

/* ---- the ledger rows ---- */
.agx-ledger-rowswrap {
  position: relative;
}
.agx-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 17px 0;
}
.agx-ledger-hair {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--agx-line);
}
.agx-ledger-row-name {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-ledger-cast {
  display: inline-flex;
  padding-left: 8px;
}
.agx-ledger-cast img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: -8px;
  box-shadow: 0 0 0 2px #fff;
  border: 1px solid var(--agx-line);
}
.agx-ledger-row-right {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.agx-ledger-row-v {
  display: inline-block;
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--agx-ink);
}
.agx-ledger-row-d {
  font-style: normal;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-pos);
}
.agx-ledger-post {
  position: absolute;
  right: 0;
  top: -4px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--agx-surface);
  border: 1px solid var(--agx-line);
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.08);
  color: var(--agx-ink);
  pointer-events: none;
  white-space: nowrap;
}
.agx-ledger-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 10px;
  border-top: 1px solid var(--agx-ink);
  border-bottom: 3px double var(--agx-ink);
  font-size: 16px;
  font-weight: 600;
  color: var(--agx-ink);
}
.agx-ledger-total b {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- the annex: counted, not cashed ---- */
.agx-ledger-also {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agx-ledger-also-rule {
  display: block;
  border-top: 1px dashed var(--agx-line);
  height: 0;
}
.agx-ledger-also-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-ledger-pillrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14.5px;
  color: var(--agx-ink-2);
}
.agx-ledger-pillrow span {
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-ledger-pillrow b {
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--agx-line);
  color: var(--agx-ink-2);
}
.agx-ledger-pillrow i {
  font-style: normal;
  font-size: 13px;
  color: var(--agx-ink-3);
}

/* ---- act 4: the deliverable ---- */
/* Centers on the rows column but is NOT height-constrained by it: the
   content may be taller than the dimmed ledger and spills into the
   stage's empty slack instead of clipping. */
.agx-ledger-recap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}
/* soft paper veil behind the overlay — only needed where the overlay
   covers content it can't fully dim (single-column layouts) */
.agx-ledger-recap::before {
  content: "";
  position: absolute;
  inset: -16px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  z-index: -1;
  display: none;
}
.agx-ledger-recap h3 {
  font-size: 22px;
  font-weight: 650;
  color: var(--agx-ink);
  margin: 0;
}
.agx-ledger-doc {
  border-radius: var(--agx-radius-lg);
  box-shadow: var(--agx-shadow-lg);
  background: var(--agx-surface);
  max-width: 420px;
}
.agx-ledger-recap p {
  font-size: 15px;
  color: var(--agx-ink-2);
  max-width: 46ch;
  margin: 0;
}
.agx-ledger-foot {
  display: flex;
  align-items: center;
  gap: 16px;
}
.agx-ledger-foot span {
  font-size: 14px;
  color: var(--agx-ink-2);
}
.agx-ledger-foot .agx-btn {
  pointer-events: auto;
}

/* ---- compaction for short viewports ---- */
@media (max-height: 720px) {
  .agx-ledger-register-v {
    font-size: clamp(64px, 9vh, 120px);
  }
  .agx-ledger-row {
    padding: 12px 0;
  }
  .agx-ledger-register {
    margin-top: 20px;
  }
}

/* ---- single column ---- */
@media (max-width: 1080px) {
  .agx-ledger-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    position: relative;
  }
  .agx-ledger-spine {
    display: none;
  }
  .agx-ledger-register {
    margin-top: 16px;
    gap: 8px;
  }
  .agx-ledger-lede {
    display: none;
  }
  /* stack from the top so a tall column never clips behind the navbar */
  .agx-ledger-stage {
    align-items: flex-start;
  }
  /* the recap overlay covers the whole grid (register included) and
     anchors to its foot; the veil carries legibility over whatever the
     doc happens to overlap */
  .agx-ledger-rowswrap {
    position: static;
  }
  .agx-ledger-recap {
    top: auto;
    bottom: 0;
    transform: none;
  }
  .agx-ledger-recap::before {
    display: block;
  }
}

/* ---- mobile art direction: the whole ledger must FIT one 100svh
   stage — every value below is budgeted against 844px and 320px ---- */
@media (max-width: 760px) {
  .agx-ledger-run {
    height: 240vh;
  }
  .agx-ledger-stage {
    padding-top: 84px;
  }
  .agx-ledger-h2 {
    font-size: clamp(22px, 6vw, 26px);
  }
  .agx-ledger-register-v {
    font-size: clamp(48px, 13vw, 64px);
  }
  .agx-ledger-meter {
    height: 8px;
  }
  .agx-ledger-row {
    padding: 9px 0;
  }
  .agx-ledger-row-name {
    font-size: 14.5px;
    gap: 8px;
  }
  .agx-ledger-cast img {
    width: 20px;
    height: 20px;
  }
  .agx-ledger-cast img:nth-child(3) {
    display: none;
  }
  .agx-ledger-row-v {
    font-size: 19px;
  }
  .agx-ledger-post {
    font-size: 11px;
    padding: 5px 8px;
  }
  .agx-ledger-total b {
    font-size: 22px;
  }
  .agx-ledger-also {
    margin-top: 14px;
    gap: 8px;
  }
  .agx-ledger-pillrow {
    font-size: 13px;
    gap: 8px;
  }
  .agx-ledger-doc {
    max-width: 100%;
  }
  .agx-ledger-recap h3 {
    font-size: 18px;
  }
  /* mobile trims the caption, context line AND the button — the page's
     sticky "Book an agency demo" bar already owns the CTA on phones,
     and the overlay button would sit behind it */
  .agx-ledger-recap p {
    display: none;
  }
  .agx-ledger-foot {
    display: none;
  }
}

/* ============================================================
   PRODUCT CINEMA — "Watch one sale happen."
   (AgenciesMonetizationSection, take 3.) A pinned 280vh four-shot
   film: real profile checkout → $84 flies into the workspace →
   the money board → the client recap. Composes the agx-app phone
   shell and agx-ws2 workspace chrome; density law: no frame may
   read austere — two warm washes, the phone never exits.
   The orphaned agx-ledger / agx-dark / agx-money blocks await a
   separate cleanup pass.
   ============================================================ */
.agx-cine-sec {
  background: var(--agx-surface);
}
/* 380vh (was 280) — the client called the film too fast; the same
   choreography over ~36% more scroll slows every shot proportionally */
.agx-cine-run {
  position: relative;
  height: 380vh;
}
.agx-cine-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@supports (height: 100svh) {
  .agx-cine-stage {
    height: 100svh;
  }
}
.agx-cine-shell {
  position: relative;
  height: 100%;
  max-width: 1680px;
}
.agx-cine-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.agx-cine-wash--accent {
  background: radial-gradient(
    48% 42% at 78% 22%,
    rgba(255, 122, 24, 0.07),
    transparent 70%
  );
}
.agx-cine-wash--violet {
  background: radial-gradient(
    44% 40% at 16% 82%,
    rgba(139, 92, 246, 0.045),
    transparent 70%
  );
}

/* ---- copy + kickers ---- */
.agx-cine-copy {
  position: absolute;
  left: 4%;
  top: 13%;
  width: min(420px, 34%);
  z-index: 7;
  pointer-events: none;
}
.agx-cine-h2 {
  font-size: clamp(30px, 2.8vw, 44px);
}
.agx-cine-lede {
  font-size: 15.5px;
  margin: 12px 0 0;
  max-width: 40ch;
}
.agx-cine-kicker {
  position: absolute;
  left: 50%;
  top: 11.5%;
  transform: translateX(-50%);
  z-index: 7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--agx-ink-2);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- the fan phone ---- */
.agx-cine-phoneWrap {
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* the film's camera is flat-on: kill the marquee phone's 3D orbit (an
   infinite animation has no place inside a scrubbed pin) and its static
   tilt — the scrub owns every degree of motion here */
.agx-cine-phone {
  perspective: none;
}
.agx-cine-phone .agx-app-frame {
  width: 300px;
  height: 620px;
  transform: none;
  animation: none;
}
.agx-cine-phone .agx-app-shadow {
  animation: none;
}
.agx-cine-screen {
  position: relative;
  padding: 0;
  /* the screen runs the real profile capture — dark, like his page */
  background: #000;
}
.agx-cine-capture {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  will-change: transform;
}
.agx-cine-profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.agx-cine-profile-head img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.agx-cine-profile-head b {
  font-size: 13px;
  color: var(--agx-ink);
}
.agx-cine-picons {
  display: flex;
  gap: 6px;
}
.agx-cine-picons img {
  width: 18px;
  height: 18px;
}
.agx-cine-linkrow {
  position: relative;
  display: block;
  border-radius: 14px;
  border: 2px solid var(--agx-line);
  background: #fff;
  padding: 13px 14px;
  text-align: center;
}
.agx-cine-linkrow b {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-cine-linkrow-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 122, 24, 0.14);
}
.agx-cine-ripple {
  /* over the real $55 tee — third card on the capture's merch shelf */
  position: absolute;
  left: 77%;
  top: 23.5%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 3px solid var(--agx-accent);
  border-radius: 50%;
  z-index: 2;
}
.agx-cine-sheet {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 -12px 40px rgba(10, 10, 10, 0.18);
  padding: 16px;
}
.agx-cine-sheet-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: var(--agx-ink);
}
.agx-cine-size {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-cine-pay {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 999px;
  background: var(--agx-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.agx-cine-pay-fill {
  position: absolute;
  inset: 0;
  background: var(--agx-accent);
}
/* the label stays above the filling overlay — an empty orange pill
   mid-fill read as a broken button */
.agx-cine-pay > span {
  position: relative;
  z-index: 1;
}
.agx-cine-stamp {
  align-self: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.14);
  color: var(--agx-pos);
  font-size: 12.5px;
  font-weight: 800;
}

/* ---- shot-1 workspace skeleton (behind the phone, desktop only) ---- */
.agx-cine-wsghost {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 44%;
  z-index: 1;
  pointer-events: none;
  border-radius: 22px;
  background: var(--agx-surface);
  box-shadow: 0 20px 50px rgba(10, 10, 10, 0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agx-cine-wsghost-bar {
  height: 16px;
  width: 42%;
  border-radius: 999px;
  background: var(--agx-surface-3);
}
.agx-cine-wsghost-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.agx-cine-wsghost-tiles i {
  height: 72px;
  border-radius: 12px;
  background: var(--agx-surface-3);
}
.agx-cine-wsghost-body {
  height: 84px;
  border-radius: 14px;
  background: var(--agx-surface-3);
}

/* ---- the workspace panel ---- */
.agx-cine-wsWrap {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 44%;
  z-index: 3;
}
.agx-cine-salesTile {
  position: relative;
}
.agx-cine-ring {
  position: absolute;
  inset: -8px;
  border: 2px solid var(--agx-accent);
  border-radius: 18px;
  pointer-events: none;
}
.agx-cine-tileflash {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--agx-accent);
  pointer-events: none;
}
/* digit crossfade: two whole values stacked in one line box — any
   frozen frame shows complete digits, never clipped halves */
.agx-cine-roll {
  display: block;
  position: relative;
  overflow: hidden;
  height: 1.4em;
}
.agx-cine-roll-v {
  display: block;
  font-size: 19px;
  line-height: 1.4em;
  white-space: nowrap;
}
.agx-cine-roll-v--b {
  position: absolute;
  inset: 0;
}
.agx-cine-delta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.12);
  color: var(--agx-pos);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}
.agx-cine-activity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--agx-surface-3);
  font-size: 13px;
  color: var(--agx-ink-2);
}
.agx-cine-activity img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.agx-cine-activity b {
  color: var(--agx-ink);
}
.agx-cine-activity-amt {
  margin-left: auto;
  color: var(--agx-pos);
  font-size: 14px;
  font-weight: 800;
}
.agx-cine-seal {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--agx-ink-2);
}

/* ---- the flight ---- */
.agx-cine-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.agx-cine-arc path {
  fill: none;
  stroke: var(--agx-accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* one dash the length of the whole path; the offset is scrubbed */
  stroke-dasharray: 100;
}
.agx-cine-arc--mobile {
  display: none;
}
.agx-cine-slipWrap {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}
.agx-cine-slipWrap--mobile {
  display: none;
}
.agx-cine-slip {
  display: inline-block;
  background: #fff;
  border: 2px solid var(--agx-accent);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--agx-ink);
  box-shadow: 0 10px 26px rgba(255, 122, 24, 0.25);
}

/* ---- the money board ---- */
.agx-cine-boardWrap {
  position: absolute;
  left: 12%;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.agx-cine-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agx-cine-board-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.agx-cine-board-head b {
  display: inline-block;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-cine-board-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-cine-board-sub u {
  align-self: flex-start;
  text-decoration: none;
  background: rgba(21, 128, 61, 0.12);
  color: var(--agx-pos);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.agx-cine-meter {
  display: flex;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--agx-surface-3);
}
.agx-cine-meter-seg {
  display: block;
  min-width: 3px;
  height: 100%;
}
.agx-cine-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.agx-cine-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.07);
}
.agx-cine-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.agx-cine-card-h b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--agx-ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-cine-card-cast {
  display: inline-flex;
  padding-left: 6px;
}
.agx-cine-card-cast img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: -6px;
  box-shadow: 0 0 0 2px #fff;
  object-fit: cover;
}
.agx-cine-card-v {
  display: inline-block;
  transform-origin: left center;
  font-size: 22px;
  font-weight: 800;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-cine-card-d {
  font-style: normal;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.14);
  color: var(--agx-pos);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---- the annex ---- */
.agx-cine-annex {
  position: absolute;
  left: 12%;
  right: 3%;
  bottom: 7%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  z-index: 3;
}
.agx-cine-annex em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--agx-ink-2);
}
.agx-cine-annex-chip {
  border: 2px dashed rgba(10, 10, 10, 0.28);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink-2);
  background: rgba(255, 255, 255, 0.7);
}

/* ---- the recap ---- */
.agx-cine-recapWrap {
  position: absolute;
  left: 36%;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.agx-cine-recapWrap h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-cine-recapWrap p {
  margin: 0;
  font-size: 14.5px;
  color: var(--agx-ink-2);
}
.agx-cine-doc {
  position: relative;
  align-self: flex-start;
  max-width: 430px;
  border-radius: var(--agx-radius-lg);
  box-shadow: var(--agx-shadow-lg);
  background: var(--agx-surface);
}
.agx-cine-foot {
  display: flex;
  align-items: center;
  gap: 14px;
}
.agx-cine-foot span {
  font-size: 14px;
  color: var(--agx-ink-2);
}
.agx-cine-foot .agx-btn {
  pointer-events: auto;
}

/* ---- mobile ---- */
@media (max-width: 768px) {
  .agx-cine-run {
    height: 320vh;
  }
  .agx-cine-copy {
    left: 5%;
    right: 5%;
    width: auto;
    top: 8%;
  }
  .agx-cine-h2 {
    font-size: clamp(22px, 6vw, 26px);
  }
  /* the lede threading behind the phone bezel read as a layout bug —
     eyebrow + headline carry the intro on phones */
  .agx-cine-lede {
    display: none;
  }
  /* dots carry shot progress on phones; a caption band has nowhere to
     live that the annex or copy doesn't already need */
  .agx-cine-kicker {
    display: none;
  }
  .agx-cine-phoneWrap {
    top: 53%;
  }
  /* the mobile checkout takes over the whole display — realistic, and
     it hides the profile rows that otherwise clip into "Mer/Tou"
     fragments once the phone parks at the stage edge */
  .agx-cine-sheet {
    top: 8px;
  }
  .agx-cine-wsghost {
    display: none;
  }
  .agx-cine-phone .agx-app-frame {
    width: 232px;
    height: 480px;
  }
  .agx-cine-screen {
    padding: 40px 10px 10px;
    gap: 8px;
  }
  .agx-cine-linkrow {
    padding: 10px 12px;
  }
  .agx-cine-wsWrap {
    left: 4%;
    right: 4%;
    width: auto;
    top: auto;
    bottom: 10%;
    transform: none;
  }
  .agx-cine-ws .agx-ws2-tabs {
    display: none;
  }
  .agx-cine-arc--desktop,
  .agx-cine-slipWrap--desktop {
    display: none;
  }
  .agx-cine-arc--mobile {
    display: block;
  }
  .agx-cine-slipWrap--mobile {
    display: block;
  }
  .agx-cine-boardWrap {
    left: 4%;
    right: 4%;
  }
  .agx-cine-board-head b {
    font-size: clamp(40px, 13vw, 64px);
  }
  .agx-cine-meter {
    height: 14px;
  }
  .agx-cine-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .agx-cine-card {
    padding: 10px 12px;
    gap: 6px;
  }
  .agx-cine-card-v {
    font-size: 18px;
  }
  .agx-cine-card-cast img:nth-child(3) {
    display: none;
  }
  /* annex moves to the top band on phones (copy has faded out by the
     time it appears) — at the foot it collided with the caption and
     clipped off the right edge */
  .agx-cine-annex {
    left: 4%;
    right: 4%;
    bottom: auto;
    top: 9%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .agx-cine-annex-chip {
    font-size: 11.5px;
    padding: 6px 12px;
    border-radius: 14px;
    white-space: normal;
  }
  .agx-cine-recapWrap {
    left: 4%;
    right: 4%;
  }
  .agx-cine-recapWrap h3 {
    font-size: 18px;
  }
  .agx-cine-recapWrap p {
    display: none;
  }
  .agx-cine-doc {
    max-width: 100%;
    align-self: stretch;
  }
  /* the page's sticky "Book an agency demo" bar owns the mobile CTA —
     a second stacked demo button read as a duplicate-button glitch */
  .agx-cine-foot {
    display: none;
  }
  .agx-cine-ws .agx-ws2-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .agx-cine-dots {
    bottom: 14px;
  }
}

/* ============================================================
   Post to All on /agencies — page-scoped treatment of the shared
   product-reel chapter. Scoped to .agx-pta so the home and
   /business runs of the same reel are untouched.
   ============================================================ */
/* The intro icon ring only becomes visible once the stage has pinned:
   fading in earlier let the top chips cross the stage's clipped edge
   mid-approach and screenshot as sliced icons. Same clocks, later
   thresholds. */
/* The stage clips its box on all sides; on this page the intro ring
   legitimately breathes above it mid-approach, so the top of the clip
   window opens 240px while left/right/bottom stay sealed — chips float
   whole instead of slicing against an invisible edge. */
/* DESKTOP ONLY — below 1024px the reel's own narrow rules position this
   chapter (the home page runs them untouched); these overrides only fit
   the pinned desktop composition and break the phone layout if unscoped. */
@media (min-width: 1024px) {
  .agx-pta .reel-stage {
    /* chips DISSOLVE over 140px as they near the stage's top edge instead
       of slicing against it (or the navbar) — a fade reads intentional at
       every viewport size; the mask's paint region also keeps them from
       ever drawing above the stage. overflow must stay visible or the
       stage's own overflow-hidden hard-slices them at the box edge before
       the mask can fade them. */
    overflow: visible;
    mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 100%);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      #000 140px,
      #000 100%
    );
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
}
/* The intro ring runs STOCK on this page — full radius, spinning, the
   same choreography as the home reel. The top-edge fade mask on the
   stage (below) is what handles chips nearing the header: they
   dissolve over 140px instead of slicing. Do not re-attempt radius
   caps, static ellipses, or clip windows here — each traded one
   collision for another; the mask is the whole fix. */
.agx-pta .reel-intro-orbit {
  --oin0: clamp(0, calc((var(--in, 1) - 0.3) * 2.4), 1);
}

/* the whole intro assembly (statement + ring, one wrapper) sits a bit
   lower on this page so the ring's top chip clears the stage's fade
   zone instead of dissolving into it mid-orbit */
@media (min-width: 1024px) {
  .agx-pta [class*="left-[21vw]"] {
    transform: translateY(44px);
  }
}
/* "no need for that big bar on the bottom" — the payoff pill strip is
   hidden on this page; the rail copy carries the line instead */
.agx-pta [data-pta="payoff"] {
  display: none !important;
}
/* short viewports leave less air above the statement — pull the ring in
   so its top chips stay clear of the navbar at every height */
@media (min-width: 1024px) and (max-height: 800px) {
  .agx-pta .reel-stage {
    mask-image: linear-gradient(
      180deg,
      transparent 40px,
      #000 190px,
      #000 100%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 40px,
      #000 190px,
      #000 100%
    );
  }
}
/* the in-product reassurance line ("You can leave this page…") is
   app chrome, not a sales point — off on this page. visibility, NOT
   display: the column it sits in is centred inside a fixed-height panel,
   so removing it from layout dropped everything above it ~30px and
   manufactured part of the white gap under the headline. */
.agx-pta [data-pta="reassure"] {
  visibility: hidden !important;
}
/* The publishing card goes white on this page ("remove the black") —
   the animation inside is untouched; only surfaces and ink flip.
   !important beats the component's inline colors. */
.agx-pta [data-pta="overlay"] {
  background: #f8f8fa !important;
  border: 1px solid #e7e7ea;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 34px 80px -30px rgba(16, 16, 20, 0.28);
}
.agx-pta [data-pta="status"] {
  color: #3f3f46 !important;
}
.agx-pta [data-pta="reassure"] {
  color: #71717a !important;
}
.agx-pta [data-pta="ov-card"] {
  border-color: rgba(16, 16, 20, 0.08) !important;
  box-shadow: 0 15px 40px rgba(16, 16, 20, 0.16) !important;
}
.agx-pta [data-pta="badge"] {
  box-shadow: 0 0 0 2.5px #fff !important;
}
.agx-pta [data-pta="ring-track"] {
  stroke: rgba(16, 16, 20, 0.1) !important;
}
/* the publishing card runs noticeably larger on this page: a transform
   scale the FitBox cannot fight (it measures offsetWidth, which
   transforms do not change), on top of the wider column below.
   DESKTOP ONLY — the substring selectors also match on phones, where the
   underlying Tailwind geometry belongs to the reel's narrow rules. */
@media (min-width: 1024px) {
  .agx-pta [data-pta-root] {
    transform: scale(1.28);
    transform-origin: center center;
  }
  /* the larger card needs the taller fit window and the wider stage
     column the home reel caps — both scoped to this page's run */
  .agx-pta [class*="max-h-[68vh]"] {
    max-height: min(84vh, 760px);
  }
  .agx-pta [class*="left-[calc(44vw+56px)]"] {
    left: calc(41vw + 40px);
    right: calc(56vw - 56px - 60vh);
  }
}

/* ============================================================
   MONETIZATION, QUIET (agx-m2) — the static replacement for the
   four rejected animated versions. Standard section flow, Reveal
   one-shots only. Older agx-dark/agx-ledger/agx-cine blocks are
   orphaned, pending a cleanup pass.
   ============================================================ */
.agx-m2-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 34px 0 30px;
}
.agx-m2-total-l {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-m2-total-v {
  font-size: clamp(64px, 7vw, 112px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-m2-total-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.agx-m2-total-row em {
  font-style: normal;
  font-size: 13px;
  color: var(--agx-ink-3);
}
.agx-m2-delta {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--agx-pos);
  background: rgba(21, 128, 61, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
}
.agx-m2-meter {
  display: flex;
  width: 100%;
  max-width: 720px;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--agx-surface-3);
  margin-top: 6px;
}
.agx-m2-meter i {
  display: block;
  min-width: 3px;
}
.agx-m2-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  /* every row the same height. `height: 100%` on the card only matches the
     cards beside it — grid still sizes each ROW to its own tallest item, so
     a two-line title ("Brand campaigns") made its whole row taller than the
     others. This equalises the rows; the card then fills its cell. */
  grid-auto-rows: 1fr;
}
.agx-m2-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  border-radius: 20px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--agx-line);
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.05);
}
.agx-m2-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.agx-m2-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.agx-m2-card-h b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--agx-ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-m2-cast {
  display: inline-flex;
  padding-left: 6px;
}
.agx-m2-cast img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: -6px;
  box-shadow: 0 0 0 2px #fff;
  object-fit: cover;
}
.agx-m2-card-v {
  /* the cards are now equal height, so the number is bottom-aligned rather
     than floating wherever the title happened to end */
  margin-top: auto;
  font-size: 24px;
  font-weight: 800;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-m2-card-d {
  font-style: normal;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.14);
  color: var(--agx-pos);
  font-size: 11.5px;
  font-weight: 700;
}

/* m2 Rive layer — living glyph chips + self-drawing meter
   (public/assets/agx-monetization.riv). The .agx-m2-dot / meter <i>
   fallbacks inside these hosts are the reduced-motion + loading state. */
.agx-m2-glyph {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
}
.agx-rive-fill {
  position: absolute;
  inset: 0;
  display: block;
}
.agx-rive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.agx-rive-fill canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.agx-m2-glyph .agx-m2-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
.agx-m2-card-t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.agx-m2-meter--rive {
  position: relative;
}
@media (max-width: 760px) {
  .agx-m2-glyph {
    width: 28px;
    height: 28px;
  }
  .agx-m2-glyph .agx-m2-dot {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
  }
  .agx-m2-card-t {
    gap: 7px;
  }
}
.agx-m2-annex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 8px;
}
.agx-m2-annex em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-m2-annex span {
  border: 2px dashed rgba(10, 10, 10, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-m2-recap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 44px;
}
.agx-m2-recap-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.agx-m2-recap-copy h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-m2-recap-copy p {
  margin: 0;
  font-size: 15px;
  color: var(--agx-ink-2);
  max-width: 46ch;
}
.agx-m2-doc {
  max-width: 480px;
  width: 100%;
  justify-self: center;
  border-radius: var(--agx-radius-lg);
  box-shadow: var(--agx-shadow-lg);
  background: var(--agx-surface);
}
@media (max-width: 900px) {
  .agx-m2-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .agx-m2-recap {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
  .agx-m2-doc {
    justify-self: stretch;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .agx-m2-card-v {
    font-size: 19px;
  }
  .agx-m2-card {
    padding: 12px 14px;
  }
  .agx-m2-annex span {
    border-radius: 14px;
  }
}

/* ---- trust headline: two balanced lines + the data palette ---- */
.agx-trust-h2 {
  max-width: 40ch;
  margin-inline: auto;
  font-size: clamp(32px, 3.9vw, 54px);
  text-wrap: balance;
}
/* the Linkme brand gradient — the logo mark's own magenta→orange */
.agx-trust-hl {
  font-style: normal;
  background: linear-gradient(96deg, #ec008c 10%, #ff7a18 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- m2 v2: one statement panel, mobile-native rows ---- */
.agx-m2-panel {
  background: #fff;
  border: 1px solid var(--agx-line);
  border-radius: 26px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 24px 60px -30px rgba(10, 10, 10, 0.12);
  margin-top: 30px;
}
.agx-m2-panel .agx-m2-total {
  margin: 0 0 10px;
}
.agx-m2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--agx-line-soft);
}
.agx-m2-row:first-of-type {
  margin-top: 14px;
}
.agx-m2-row-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--agx-ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-m2-row .agx-m2-cast {
  margin-right: auto;
}
.agx-m2-row-right {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.agx-m2-row-right b {
  font-size: 20px;
  font-weight: 800;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-m2-row-right i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--agx-pos);
  background: rgba(21, 128, 61, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
}
.agx-m2-panel .agx-m2-annex {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--agx-line);
}
@media (max-width: 640px) {
  .agx-m2-panel {
    border-radius: 20px;
  }
  .agx-m2-row-right b {
    font-size: 17px;
  }
  .agx-m2-row {
    padding: 12px 0;
  }
  /* the face stacks squeeze long channel names into ellipsis at 390px —
     names win on phones */
  .agx-m2-row .agx-m2-cast {
    display: none;
  }
  .agx-m2-row-name {
    margin-right: auto;
  }
}

/* ---- m2 recap finale: checklist + staged paper stack ---- */
.agx-m2-recap-copy h3 {
  font-size: clamp(26px, 2.4vw, 32px);
  position: relative;
  padding-bottom: 14px;
}
/* the page's brand stroke under the heading — same gesture as the hero */
.agx-m2-recap-copy h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ec008c, #ff7a18);
}
/* third sheet: a real pile, not a hint */
.agx-m2-sheet {
  position: absolute;
  inset: 26px 30px -20px -24px;
  z-index: -2;
  background: #fff;
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  box-shadow: 0 16px 36px -24px rgba(10, 10, 10, 0.22);
  transform: rotate(-1.8deg);
}
.agx-m2-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agx-m2-checks li {
  position: relative;
  padding-left: 32px;
  font-size: 15.5px;
  color: var(--agx-ink-2);
}
.agx-m2-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(21, 128, 61, 0.12);
  color: var(--agx-pos);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the document arrives as this month's copy on top of last month's —
   a second sheet peeks from behind over a soft brand wash */
.agx-m2-doc {
  position: relative;
  /* the negative-z stack layers need the doc's OWN stacking context —
     without isolation they paint behind the section background and
     vanish once the reveal transform settles */
  isolation: isolate;
}
.agx-m2-doc::before {
  content: "";
  position: absolute;
  inset: -30px -36px;
  z-index: -3;
  border-radius: 30px;
  background: linear-gradient(
    150deg,
    rgba(236, 0, 140, 0.08),
    rgba(255, 122, 24, 0.11)
  );
}
.agx-m2-doc::after {
  content: "";
  position: absolute;
  inset: 16px -22px -16px 22px;
  z-index: -1;
  background: #fff;
  border: 1px solid var(--agx-line);
  border-radius: var(--agx-radius-lg);
  box-shadow: 0 18px 40px -22px rgba(10, 10, 10, 0.25);
  transform: rotate(2.4deg);
}
@media (max-width: 900px) {
  .agx-m2-doc::before {
    inset: -18px -14px;
    border-radius: 24px;
  }
  .agx-m2-doc::after {
    inset: 10px -8px -8px 8px;
  }
}

/* ---- m2 export band: the dark finale ---- */
.agx-m2-export {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: 44px;
  background: #101014;
  border-radius: 30px;
  padding: clamp(26px, 3.4vw, 52px);
  overflow: hidden;
}
.agx-m2-export-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.agx-m2-export-copy h3 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  color: #fff;
  position: relative;
  padding-bottom: 14px;
}
.agx-m2-export-copy h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ec008c, #ff7a18);
}
.agx-m2-checks--dark li {
  color: rgba(255, 255, 255, 0.78);
}
.agx-m2-checks--dark li::before {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}
.agx-m2-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #101014;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.agx-m2-export-btn:hover {
  transform: scale(1.04);
}
.agx-m2-export .agx-m2-doc {
  isolation: isolate;
  position: relative;
  max-width: 500px;
  width: 100%;
  border-radius: var(--agx-radius-lg);
  background: var(--agx-surface);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
}
.agx-m2-export .agx-m2-sheet {
  position: absolute;
  inset: 22px -18px -18px 22px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--agx-radius-lg);
  transform: rotate(2.4deg);
}
@media (max-width: 900px) {
  .agx-m2-export {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    border-radius: 22px;
  }
  .agx-m2-export .agx-m2-doc {
    max-width: 100%;
  }
  .agx-m2-export-btn {
    align-self: stretch;
  }
}

/* ---- export band v2: depth, edge, integrated capture line ---- */
.agx-m2-export {
  background:
    radial-gradient(
      52% 70% at 88% 0%,
      rgba(236, 0, 140, 0.16),
      transparent 65%
    ),
    radial-gradient(
      46% 60% at 4% 100%,
      rgba(255, 122, 24, 0.12),
      transparent 62%
    ),
    #0d0d11;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.agx-m2-export .agx-m2-sheet {
  display: none;
}
.agx-m2-export .agx-m2-doc {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 50px 110px -45px rgba(0, 0, 0, 0.85);
}
.agx-m2-export-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 18px;
  margin-top: 6px;
}
.agx-m2-export-foot em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.agx-m2-export-foot span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
}
.agx-m2-export-foot b {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
}
@media (max-width: 900px) {
  .agx-m2-export-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ==================================================================== *
 * HERO v5 — "The Wired Roster".
 * Supersedes the video-geometry chapter above (the rendered clip only
 * ever showed the Hospitality tab) and the loose-thread ink: the phone
 * is the live app replica again (creators first, then Hospitality and
 * Organization), centred, carried by the PHONE APP v2 cinematography
 * chapter; the stage ink becomes an orthogonal rail system — one lane
 * per card, a collector bus under the device, junction nodes, and
 * travelling light pulses instead of floating label chips.
 * ==================================================================== */
.agx-h4-phone {
  left: 50%;
  top: 56px;
  width: auto;
  translate: -50% 0;
  display: flex;
  justify-content: center;
}
.agx-h4-phone .agx-app-frame {
  width: 264px;
  height: 544px;
  border-radius: 40px;
  padding: 8px;
}
.agx-h4-phone .agx-app-screen {
  border-radius: 33px;
  padding: 40px 11px 11px;
}
.agx-h4-phone .agx-app-island {
  top: 17px;
  width: 72px;
  height: 21px;
  margin-left: -36px;
}

/* rail system inks */
.agx-h4-lines .agx-h4-rail {
  stroke: rgba(10, 10, 10, 0.15);
  stroke-width: 1.5;
}
.agx-h4-lines .agx-h4-bus {
  stroke: rgba(10, 10, 10, 0.3);
  stroke-width: 2;
}
.agx-h4-lines .agx-h4-stem {
  stroke: rgba(10, 10, 10, 0.44);
  stroke-width: 2.2;
}
.agx-h4-lines .agx-h4-node {
  fill: rgba(10, 10, 10, 0.32);
  stroke: none;
}
.agx-h4-lines .agx-h4-node--stem {
  fill: rgba(10, 10, 10, 0.5);
}

/* engineered backdrop: a faint dot grid fading out radially */
.agx-h4-stage::before {
  content: "";
  position: absolute;
  inset: -10px 0 84px;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(10, 10, 10, 0.06) 1.1px,
    transparent 1.2px
  );
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 55% at 50% 46%,
    #000 38%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse 62% 55% at 50% 46%,
    #000 38%,
    transparent 76%
  );
}

/* light pulses: fan activity travelling the rails into the totals */
.agx-h4-pulse {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec008c, #ff7a18);
  box-shadow:
    0 0 0 3px rgba(236, 0, 140, 0.12),
    0 0 12px rgba(244, 49, 94, 0.55);
  offset-rotate: 0deg;
  opacity: 0;
  animation: agx-h4-flow 6.3s linear infinite;
}
@keyframes agx-h4-flow {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  26% {
    opacity: 1;
  }
  30% {
    offset-distance: 100%;
    opacity: 0;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.agx-hero4.is-off .agx-h4-pulse {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-h4-pulse {
    animation: none;
    opacity: 0;
  }
}

/* the follower pill carries a live brand dot */

/* totals strip sits under the stem tap */
.agx-h4-strip {
  top: 706px;
}

/* venue / organization tiles show the top of their real page capture */
.agx-app-tile--page img {
  object-position: top center;
}

@media (max-width: 760px) {
  .agx-h4-pulse,
  .agx-h4-stage::before {
    display: none;
  }
  .agx-h4-phone {
    position: static;
    width: 100%;
    translate: none;
  }
  .agx-h4-mlines {
    stroke: rgba(10, 10, 10, 0.18);
  }
}

/* 3D-context clipping fix: the float animation's preserve-3d lets the
   roster grid escape the screen's overflow clip and paint past the frame
   bottom. Flatten the frame's children in the hero so the screen clips
   again — the fold then cuts through the second tile row, exactly like
   the shipped footage does. */
.agx-h4-phone .agx-app-frame {
  transform-style: flat;
}

/* --- verification-round fixes (agent panel, 2026-08-14) -------------- */

/* rails read at arm's length without shouting */
.agx-h4-lines .agx-h4-rail {
  stroke: rgba(10, 10, 10, 0.2);
}
.agx-h4-lines .agx-h4-bus {
  stroke: rgba(10, 10, 10, 0.34);
}
.agx-h4-lines .agx-h4-node {
  fill: rgba(10, 10, 10, 0.38);
}

/* 2-3 pulses in flight instead of one — activity, not a lone dot */
.agx-h4-pulse {
  width: 8px;
  height: 8px;
  animation-duration: 5.2s;
}
@keyframes agx-h4-flow {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  34% {
    offset-distance: 100%;
    opacity: 0;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* the phone's search placeholder must never clip mid-glyph */
.agx-h4-phone .agx-app-search > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  /* BLOCKER FIX: the legacy mobile block makes cards position:static,
     which re-parents their absolutely-positioned photo/pill/name to the
     stage — the last card's photo then covers the entire mobile hero and
     swallows every tap. Relative restores the containing block. */
  .agx-h4-card {
    position: relative;
  }
  /* re-assert the mobile frame size the unscoped v5 rule was overriding */
  .agx-h4-phone .agx-app-frame {
    width: 258px;
    height: 532px;
  }
}

/* the relative fix above re-activates the cards' inline desktop seat
   offsets (style left/top from SEATS) — zero them in the mobile grid;
   !important is required to beat the inline style */
@media (max-width: 760px) {
  .agx-h4-card {
    left: 0 !important;
    top: 0 !important;
  }
}

/* ==================================================================== *
 * HERO v5.1 — comets, beacons, bloom, workspace logo.
 * "i also dont like the animation shown this can be way better": the
 * lone travelling dots become light comets — a soft glow underlay and a
 * bright gradient core (stroke-dash windows over pathLength 100) riding
 * each full route on one clock. Departures blink the card's follower
 * beacon; arrivals feed a bloom breathing under the totals. The phone's
 * top bar becomes a real workspace identity (monogram mark + name).
 * ==================================================================== */
.agx-h4-pulse {
  display: none; /* superseded by the comet layer */
}
.agx-h4-comet {
  fill: none;
  stroke: url(#agxCometGrad);
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  stroke-dashoffset: 12;
  animation: agx-h4-comet 5.2s linear infinite;
}
.agx-h4-comet--glow {
  stroke-width: 7;
  opacity: 0.22;
}
.agx-h4-comet--core {
  stroke-width: 2.4;
  opacity: 0.9;
}
@keyframes agx-h4-comet {
  0% {
    stroke-dashoffset: 12;
  }
  100% {
    stroke-dashoffset: -100;
  }
}

/* follower pill beacon: the brand dot flares as the comet departs */

/* arrival bloom under the totals — period locked to comet landings */
.agx-h4-bloom {
  position: absolute;
  left: 50%;
  top: 664px;
  z-index: 1;
  width: 240px;
  height: 64px;
  margin-left: -120px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(244, 49, 94, 0.16),
    rgba(255, 122, 24, 0.05) 62%,
    transparent 78%
  );
  opacity: 0;
  animation: agx-h4-bloom 2.61s ease-in-out infinite;
  animation-delay: 7.1s;
}
@keyframes agx-h4-bloom {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
  18% {
    opacity: 1;
    transform: scale(1.04);
  }
  46% {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* the workspace monogram inside the app's top-bar mark */
.agx-h4-phone .agx-app-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

/* clock discipline: everything pauses off screen, vanishes for reduced
   motion, and none of it exists on mobile */
.agx-hero4.is-off .agx-h4-comet,
.agx-hero4.is-off .agx-h4-bloom {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-h4-comet,
  .agx-h4-bloom {
    display: none;
  }
}
@media (max-width: 760px) {
  .agx-h4-comet,
  .agx-h4-bloom {
    display: none;
  }
}

/* ==================================================================== *
 * GETTING STARTED v2 — the three moves, running.
 * Supersedes the .agx-gs text cards ("this sucks... bland"): three live
 * product vignettes on one 12s CSS clock, chained by the hero's rail
 * grammar — a comet lands on each step's node as that step's moment
 * plays. DOM defaults are the COMPLETED states, animations rewind them:
 * reduced motion therefore shows the finished story with zero motion.
 * Comet arrivals (non-linear dash): ~1.3s / ~5.4s / ~9.4s.
 * ==================================================================== */
.agx-gs2-track {
  position: relative;
  height: 48px;
  margin: 6px 0 -6px;
}
.agx-gs2-track svg {
  display: block;
  width: 100%;
  height: 48px;
}
.agx-gs2-rail {
  fill: none;
  stroke: rgba(10, 10, 10, 0.16);
  stroke-width: 2;
  stroke-linecap: round;
}
.agx-gs2-comet {
  fill: none;
  stroke: url(#agxGsGrad);
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  animation: agx-gs2-comet 12s linear infinite;
}
.agx-gs2-comet--glow {
  stroke-width: 7;
  opacity: 0.24;
}
.agx-gs2-comet--core {
  stroke-width: 2.6;
  opacity: 0.95;
}
@keyframes agx-gs2-comet {
  0% {
    stroke-dashoffset: 8;
  }
  10.8% {
    stroke-dashoffset: -2;
  }
  45% {
    stroke-dashoffset: -42;
  }
  78% {
    stroke-dashoffset: -82;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
.agx-gs2-node {
  fill: rgba(10, 10, 10, 0.34);
}
.agx-gs2-flare {
  fill: url(#agxGsGrad);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: agx-gs2-flare 12s linear infinite;
}
.agx-gs2-flare--0 {
  animation-delay: 1.3s;
}
.agx-gs2-flare--1 {
  animation-delay: 5.4s;
}
.agx-gs2-flare--2 {
  animation-delay: 9.36s;
}
@keyframes agx-gs2-flare {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  3.5% {
    opacity: 0;
    transform: scale(2.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* --- the three step cards ------------------------------------------- */
.agx-gs2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.agx-gs2-step {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--agx-line);
  background: #fff;
  box-shadow: 0 14px 30px rgba(10, 10, 10, 0.05);
  padding: 16px 16px 22px;
}
.agx-gs2-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 16px;
  border-radius: 10px;
  background: rgba(247, 73, 71, 0.1);
  color: #e8410c;
  font-size: 13px;
  font-weight: 800;
}
.agx-gs2-step h3 {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--agx-ink);
}
.agx-gs2-step p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--agx-ink-2);
}
.agx-gs2-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 178px;
  border-radius: 14px;
  border: 1px solid var(--agx-line-soft);
  background: var(--agx-surface-2);
  overflow: hidden;
  padding: 14px;
}

/* --- 01: the seat list fills ---------------------------------------- */
.agx-gs2-invites {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.agx-gs2-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--agx-line);
  border-radius: 11px;
  background: #fff;
  padding: 6px 9px;
  animation: agx-gs2-rowpulse 12s linear infinite;
  animation-delay: calc(1.35s + var(--d) * 0.35s);
}
@keyframes agx-gs2-rowpulse {
  0%,
  4%,
  100% {
    transform: none;
    box-shadow: none;
  }
  2% {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(236, 0, 140, 0.1);
  }
}
.agx-gs2-row img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.agx-gs2-row-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.agx-gs2-row-t b {
  font-size: 12px;
  font-weight: 700;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-gs2-row-t em {
  font-style: normal;
  font-size: 10px;
  color: var(--agx-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-gs2-role {
  flex: none;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6d4ddc;
  background: rgba(124, 92, 255, 0.12);
  border-radius: 999px;
  padding: 2.5px 7px;
}
.agx-gs2-status {
  position: relative;
  flex: none;
  width: 52px;
  height: 20px;
}
.agx-gs2-status em,
.agx-gs2-status u {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-style: normal;
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 700;
}
.agx-gs2-status em {
  color: var(--agx-ink-3);
  background: var(--agx-surface-3);
  opacity: 0;
  animation: agx-gs2-before 12s linear infinite;
}
.agx-gs2-status u {
  color: var(--agx-pos);
  background: rgba(21, 128, 61, 0.13);
  animation: agx-gs2-after 12s linear infinite;
}
/* shared before/after crossfades: undone until the step's beat, done
   until the cycle's last breath — defaults (no animation) stay done */
@keyframes agx-gs2-before {
  0%,
  22% {
    opacity: 1;
  }
  24.5%,
  96% {
    opacity: 0;
  }
  98.5%,
  100% {
    opacity: 1;
  }
}
@keyframes agx-gs2-after {
  0%,
  22% {
    opacity: 0;
  }
  24.5%,
  96% {
    opacity: 1;
  }
  98.5%,
  100% {
    opacity: 0;
  }
}

/* --- 02: the page goes Live ----------------------------------------- */
.agx-gs2-build {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 4px;
}
.agx-gs2-page {
  flex: none;
  width: 86px;
  height: 126px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--agx-line);
  background: #0a0a0a;
  box-shadow: 0 10px 22px -10px rgba(10, 10, 10, 0.4);
  animation: agx-gs2-pagelift 12s linear infinite;
}
@keyframes agx-gs2-pagelift {
  0%,
  45%,
  100% {
    transform: none;
  }
  47.5% {
    transform: translateY(-4px);
  }
  51% {
    transform: none;
  }
}
.agx-gs2-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.agx-gs2-build-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.agx-gs2-url {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  color: var(--agx-ink);
  background: var(--agx-surface-3);
  border-radius: 8px;
  padding: 5px 9px;
}
.agx-gs2-live {
  position: relative;
  width: 64px;
  height: 22px;
}
.agx-gs2-live em,
.agx-gs2-live u {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  font-style: normal;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
}
.agx-gs2-live em {
  color: var(--agx-ink-3);
  background: var(--agx-surface-3);
  opacity: 0;
  animation: agx-gs2-before2 12s linear infinite;
}
.agx-gs2-live u {
  color: var(--agx-pos);
  background: rgba(21, 128, 61, 0.13);
  animation: agx-gs2-after2 12s linear infinite;
}
.agx-gs2-live u i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--agx-pos);
}
@keyframes agx-gs2-before2 {
  0%,
  46% {
    opacity: 1;
  }
  48.5%,
  96% {
    opacity: 0;
  }
  98.5%,
  100% {
    opacity: 1;
  }
}
@keyframes agx-gs2-after2 {
  0%,
  46% {
    opacity: 0;
  }
  48.5%,
  96% {
    opacity: 1;
  }
  98.5%,
  100% {
    opacity: 0;
  }
}
.agx-gs2-build-note {
  font-size: 11px;
  color: var(--agx-ink-3);
}

/* --- 03: the bio link flips ----------------------------------------- */
.agx-gs2-flipwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  perspective: 620px;
  width: 100%;
}
.agx-gs2-bio {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-gs2-pill {
  position: relative;
  width: min(100%, 218px);
  height: 44px;
  transform-style: preserve-3d;
  transform: rotateX(-180deg);
  animation: agx-gs2-flip 12s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes agx-gs2-flip {
  0%,
  78% {
    transform: rotateX(0deg);
  }
  82%,
  97% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(-360deg);
  }
}
.agx-gs2-pill em,
.agx-gs2-pill u {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  font-style: normal;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  backface-visibility: hidden;
}
.agx-gs2-pill em {
  color: var(--agx-ink-3);
  background: #fff;
  border: 1px solid var(--agx-line);
}
.agx-gs2-pill u {
  color: var(--agx-ink);
  background: #fff;
  border: 1px solid rgba(236, 0, 140, 0.4);
  box-shadow: 0 8px 20px -8px rgba(236, 0, 140, 0.35);
  transform: rotateX(180deg);
}
.agx-gs2-pill u i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec008c, #ff7a18);
}
.agx-gs2-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--agx-ink-2);
}
.agx-gs2-note b {
  color: var(--agx-pos);
  font-weight: 800;
}

/* --- clock discipline ------------------------------------------------ */
.agx-gs2-sec.is-off .agx-gs2-comet,
.agx-gs2-sec.is-off .agx-gs2-flare,
.agx-gs2-sec.is-off .agx-gs2-row,
.agx-gs2-sec.is-off .agx-gs2-status em,
.agx-gs2-sec.is-off .agx-gs2-status u,
.agx-gs2-sec.is-off .agx-gs2-live em,
.agx-gs2-sec.is-off .agx-gs2-live u,
.agx-gs2-sec.is-off .agx-gs2-page,
.agx-gs2-sec.is-off .agx-gs2-pill {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-gs2-comet,
  .agx-gs2-flare {
    display: none;
  }
  .agx-gs2-row,
  .agx-gs2-status em,
  .agx-gs2-status u,
  .agx-gs2-live em,
  .agx-gs2-live u,
  .agx-gs2-page,
  .agx-gs2-pill {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .agx-gs2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
  }
  .agx-gs2-track {
    display: none;
  }
  .agx-gs2-step {
    padding: 14px 14px 20px;
  }
}

/* (a max-width reset block for the Post to All geometry lived here
   briefly — superseded: the desktop-only overrides above are now scoped
   with min-width:1024px at the source, so below lg the reel's own
   narrow rules run untouched, exactly as they do on the home page.) */

/* ==================================================================== *
 * SECTION TITLES v3 — "A": the label IS a title.
 * Kedem picked the big-headline direction over pill/numbered chapters:
 * every section eyebrow becomes real display type — large, tight, black
 * — instead of a 12px gray tag. The problem section's floating kicker
 * (alone on stage for ~3 screens above the 148px beats) runs one size
 * up. Sentence case, no tracking, no ornaments.
 * ==================================================================== */
.agx-eyebrow,
.agx-rstage-kicker {
  display: block;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: none;
  color: var(--agx-ink);
}
.agx-eyebrow {
  margin-bottom: 14px;
}
.agx-slam-kicker {
  top: 96px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: none;
  color: var(--agx-ink);
  z-index: 8;
}
@media (max-width: 760px) {
  .agx-eyebrow,
  .agx-rstage-kicker {
    font-size: 18px;
  }
  .agx-slam-kicker {
    top: 84px;
    font-size: 22px;
    white-space: normal;
    max-width: 90vw;
    text-align: center;
  }
}

/* ==================================================================== *
 * ROSTER RAIL — bigger ("make this bigger, cant see it").
 * The category tabs under the fanned cards were 14px in the page's
 * faintest gray; they double as the progress bar AND the controls, so
 * they must read at a glance. Larger type, darker resting ink, the
 * active tab in full ink with a thicker accent progress line.
 * ==================================================================== */
.agx-stage-rail {
  gap: 10px;
  margin-top: 34px;
}
.agx-stage-tab {
  height: 52px;
  padding: 0 20px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--agx-ink-2);
}
.agx-stage-tab.is-on {
  color: var(--agx-ink);
}
.agx-stage-tab i {
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 3px;
  border-radius: 3px;
}
@media (max-width: 760px) {
  .agx-stage-rail {
    gap: 4px;
    margin-top: 24px;
  }
  .agx-stage-tab {
    height: 46px;
    padding: 0 12px;
    font-size: 15.5px;
  }
  .agx-stage-tab i {
    left: 12px;
    right: 12px;
    bottom: 6px;
  }
}
/* phone: pull the six tabs onto as few rows as possible — tighter
   horizontal padding, so 390px holds four per row instead of three */
@media (max-width: 760px) {
  .agx-stage-tab {
    padding: 0 9px;
    font-size: 15px;
  }
  .agx-stage-tab i {
    left: 9px;
    right: 9px;
  }
}
/* second pass ("to small make bigger"): the rail is a headline-weight
   control bar now — 26px on desktop, roomier tabs, thicker progress */
.agx-stage-rail {
  gap: 14px;
  margin-top: 40px;
}
.agx-stage-tab {
  height: 60px;
  padding: 0 24px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.agx-stage-tab i {
  left: 24px;
  right: 24px;
  bottom: 9px;
  height: 4px;
  border-radius: 4px;
}
@media (max-width: 1100px) {
  .agx-stage-tab {
    font-size: 22px;
    padding: 0 18px;
  }
  .agx-stage-tab i {
    left: 18px;
    right: 18px;
  }
}
@media (max-width: 760px) {
  .agx-stage-rail {
    gap: 6px;
    margin-top: 26px;
  }
  .agx-stage-tab {
    height: 50px;
    padding: 0 12px;
    font-size: 19px;
  }
  .agx-stage-tab i {
    left: 12px;
    right: 12px;
    bottom: 7px;
    height: 3px;
  }
}

/* ==================================================================== *
 * PROBLEM SECTION v8 — the united team is the last frame.
 * v7's workspace card was rejected ("offsetting" — headline pushed up,
 * card low, gap between). v8 adds NOTHING new: the roster's twelve
 * faces line up in one row under the subtext and HOLD (no shrink, no
 * fade), the orange line draws beneath them, and beat 4's bloom opens
 * into a full soft backdrop — one dense composition, nothing floating
 * apart, and it never empties out.
 * ==================================================================== */
/* the line sits just under the y=70% row (faces are ~52px tall) */
.agx-slam-line {
  top: calc(70% + 44px);
  z-index: 3;
}
.agx-slam-line path {
  stroke-width: 1.1;
}
/* the held row's faces get a crisp white keyline so twelve overlapping
   circles read as a lineup, not a smear */
.agx-slam-face img {
  box-shadow:
    0 0 0 2.5px #fff,
    0 10px 24px rgba(10, 10, 10, 0.16);
}
/* beat 4 owns the stage: the bloom widens into a full soft field behind
   headline + row so the frame is filled by light, not by white */
.agx-slam-glow {
  width: 1240px;
  height: 900px;
  top: 52%;
}
@media (max-width: 760px) {
  .agx-slam-line {
    top: calc(70% + 30px);
  }
  .agx-slam-glow {
    width: 640px;
    height: 620px;
  }
}
/* the line must READ — 1.1 units vanished into the bloom */
.agx-slam-line {
  top: calc(70% + 46px);
  height: 16px;
}
.agx-slam-line path {
  stroke-width: 2.6;
  filter: drop-shadow(0 0 8px rgba(255, 122, 24, 0.5));
}
@media (max-width: 760px) {
  /* mobile row lands at y 63% (set in DriftFace) — line follows */
  .agx-slam-line {
    top: calc(63% + 32px);
  }
  .agx-slam-line path {
    stroke-width: 2.2;
  }
}
/* v8 row polish ("aligned, clean, not messy"): every face in the held
   row is the same circle — same size via rowNorm, one crisp keyline, one
   soft shadow — and stacked left→right so overlaps read as a deliberate
   lineup rather than a jumble */
.agx-slam-face img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px #fff,
    0 8px 22px rgba(10, 10, 10, 0.14);
}

/* ==================================================================== *
 * ANALYTICS REPLICA v3 — the four blocks the shipped page shows that the
 * replica was missing (audited against the 2026-08-13 recording):
 * Period Comparison · Geographic Analytics · Roster audience · Top links.
 * Same card language as the rest of .agx-an.
 * ==================================================================== */
/* --- period comparison --- */
.agx-an-period {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.agx-an-period-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: var(--agx-surface-2);
}
.agx-an-period-tile em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-an-period-tile > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.agx-an-period-tile b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--agx-ink);
}
.agx-an-period-tile u {
  text-decoration: none;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-dot--violet {
  background: #8b5cf6;
}
.agx-an-dot--pink {
  background: #ec008c;
}
.agx-an-dot--orange {
  background: #ff7a18;
}
.agx-an-dot--grey {
  background: #c9c9cf;
}
.agx-an-cmp {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.agx-an-cmp-box {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: var(--agx-surface-2);
}
.agx-an-cmp-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-an-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 132px;
  margin-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--agx-line);
}
.agx-an-bar-g {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.agx-an-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
}
/* scoped to the chart pair — the bare class name collides with the
   analytics toolbar (.agx-an-bar) and turned it into a 26px block */
.agx-an-bar-pair .agx-an-bar {
  display: block;
  width: 26px;
  border-radius: 5px 5px 0 0;
}
.agx-an-bar--cur {
  background: #8b5cf6;
}
.agx-an-bar--prev {
  background: #d9d9de;
}
.agx-an-bar-g em {
  font-style: normal;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-legend .agx-an-dot + .agx-an-dot,
.agx-an-legend .agx-an-dot:not(:first-child) {
  margin-left: 10px;
}
.agx-an-donut {
  display: block;
  width: 118px;
  height: 118px;
  margin: 16px auto 4px;
  border-radius: 50%;
  background: conic-gradient(
    #8b5cf6 0 calc(var(--p, 69) * 1%),
    #ec008c calc(var(--p, 69) * 1%) 100%
  );
  -webkit-mask: radial-gradient(circle at center, transparent 34px, #000 35px);
  mask: radial-gradient(circle at center, transparent 34px, #000 35px);
}
.agx-an-period-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding: 12px 8px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: var(--agx-surface-2);
  text-align: center;
}
.agx-an-period-foot em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-period-foot b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--agx-ink);
}
.agx-an-period-foot b.is-up {
  color: var(--agx-pos);
}

/* --- geographic analytics --- */
.agx-an-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  font-size: 12px;
}
.agx-an-seg b,
.agx-an-seg i {
  padding: 5px 11px;
  border-radius: 999px;
  font-style: normal;
}
.agx-an-seg b {
  background: #fff;
  color: var(--agx-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.08);
}
.agx-an-seg i {
  color: var(--agx-ink-3);
}
.agx-an-geo-top {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.agx-an-geo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 14px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: var(--agx-surface-2);
  overflow: hidden;
}
.agx-an-geo-card em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--agx-ink-3);
}
.agx-an-geo-card b {
  font-size: 13px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-an-geo-card span {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--agx-ink);
}
.agx-an-geo-card i {
  position: absolute;
  left: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #3b82f6;
  min-width: 6px;
}
.agx-an-geo {
  margin-top: 12px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  overflow: hidden;
}
.agx-an-geo-h,
.agx-an-geo-row {
  display: grid;
  grid-template-columns: 44px 1.6fr 0.8fr 1.5fr 0.9fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.agx-an-geo-h {
  background: var(--agx-surface-2);
  border-bottom: 1px solid var(--agx-line);
}
.agx-an-geo-h em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-an-geo-row + .agx-an-geo-row {
  border-top: 1px solid var(--agx-line-soft);
}
.agx-an-geo-row > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--agx-surface-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--agx-ink-2);
}
.agx-an-geo-row > b.is-top {
  background: #3b82f6;
  color: #fff;
}
.agx-an-geo-row > b:nth-of-type(2) {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
}
.agx-an-geo-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.agx-an-geo-name i {
  font-style: normal;
  font-size: 16px;
}
.agx-an-geo-name b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-an-geo-name em {
  font-style: normal;
  font-size: 11px;
  color: var(--agx-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-an-geo-share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agx-an-geo-share i {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--agx-surface-3);
  overflow: hidden;
}
.agx-an-geo-share i u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3b82f6;
  min-width: 4px;
}
.agx-an-geo-share em {
  font-style: normal;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--agx-ink-2);
  min-width: 38px;
  text-align: right;
}
.agx-an-level {
  justify-self: start;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--agx-surface-3);
  color: var(--agx-ink-2);
}
.agx-an-level--very-high {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.agx-an-level--high {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.agx-an-level--medium {
  background: rgba(139, 92, 246, 0.12);
  color: #6d4ddc;
}
.agx-an-geo-foot {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--agx-line);
  font-size: 11.5px;
  color: var(--agx-ink-3);
}

/* --- roster audience --- */
.agx-an-select {
  padding: 6px 12px;
  border: 1px solid var(--agx-line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--agx-ink-2);
  background: #fff;
}
.agx-an-aud {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  margin-top: 14px;
}
.agx-an-aud-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--agx-line);
  border-radius: 14px;
  background: var(--agx-surface-2);
}
.agx-an-aud-total b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--agx-ink);
}
.agx-an-aud-total em {
  font-style: normal;
  font-size: 12px;
  color: var(--agx-ink-3);
}
.agx-an-aud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.agx-an-aud-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--agx-line);
  border-radius: 12px;
  background: #fff;
}
.agx-an-aud-row img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.agx-an-aud-row span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agx-an-aud-row b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--agx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-an-aud-row em {
  font-style: normal;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-more {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--agx-ink-2);
}

/* --- top web links + other links --- */
.agx-an-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.agx-an-links .agx-an-card {
  margin-top: 16px;
}
.agx-an-links-k {
  display: block;
  margin: 12px 0 8px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-3);
}
.agx-an-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 14px;
  border: 1px solid var(--agx-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.agx-an-link + .agx-an-link {
  margin-top: 8px;
}
.agx-an-link > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agx-an-link b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-an-link em {
  font-style: normal;
  font-size: 11px;
  color: var(--agx-ink-3);
}
.agx-an-link u {
  text-decoration: none;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}
.agx-an-link i {
  position: absolute;
  left: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #8b5cf6;
}
.agx-an-olink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--agx-surface-2);
}
.agx-an-olink + .agx-an-olink {
  margin-top: 6px;
}
.agx-an-olink b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--agx-ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-an-olink u {
  text-decoration: none;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--agx-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .agx-an-period,
  .agx-an-cmp,
  .agx-an-period-foot,
  .agx-an-aud,
  .agx-an-aud-grid,
  .agx-an-links {
    grid-template-columns: minmax(0, 1fr);
  }
  /* parity (2026-08-16): all five cards (2 + 2 + full-width #5), and the
     Share bar + Activity chip stay — stacked under the country on a
     second row instead of hidden */
  .agx-an-geo-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agx-an-geo-top .agx-an-geo-card:nth-child(5) {
    grid-column: 1 / -1;
  }
  .agx-an-geo-h {
    grid-template-columns: 32px 1.6fr 0.9fr;
    gap: 8px;
  }
  .agx-an-geo-h em:nth-child(n + 4) {
    display: none;
  }
  .agx-an-geo-row {
    grid-template-columns: 32px 1.6fr 0.9fr;
    grid-template-rows: auto auto;
    gap: 6px 8px;
  }
  .agx-an-geo-share {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .agx-an-level {
    grid-column: 3 / 4;
    grid-row: 2;
    justify-self: end;
    font-size: 10px;
  }
}

/* ==================================================================== *
 * ANALYTICS FOLD — the deep report behind one control.
 * The replica ran ~4.4K px (6.2K on phones); header + tiles + leaderboard
 * stay open, six blocks fold. Height animates via grid-template-rows so
 * no JS ever measures; a soft fade at the closed edge says "more below".
 * ==================================================================== */
.agx-an-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0, 0, 1);
  position: relative;
}
.agx-an-fold > * {
  min-height: 0;
}
.agx-an-fold:not(.is-open) {
  overflow: hidden;
  /* a peek: the first card's top edge shows through the fade */
  grid-template-rows: 88px;
  mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 30%,
    transparent 100%
  );
  pointer-events: none;
}
.agx-an-fold.is-open {
  grid-template-rows: 1fr;
}
/* the fold's children are all cards with margin-top; wrap them so the
   grid row has one child to size */
.agx-an-fold > .agx-an-card:first-child {
  margin-top: 16px;
}
.agx-an-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  padding: 16px 20px;
  border: 1px solid var(--agx-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 28px -14px rgba(10, 10, 10, 0.18);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.agx-an-toggle:hover {
  border-color: rgba(10, 10, 10, 0.22);
  box-shadow: 0 14px 34px -14px rgba(10, 10, 10, 0.24);
  transform: translateY(-1px);
}
.agx-an-toggle:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: 3px;
}
.agx-an-toggle span {
  grid-column: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--agx-ink);
}
.agx-an-toggle em {
  grid-column: 1;
  margin-top: 3px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--agx-ink-3);
}
.agx-an-toggle i {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--agx-ink);
  color: #fff;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
}
.agx-an-toggle.is-open i {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .agx-an-fold,
  .agx-an-toggle i {
    transition: none;
  }
}
@media (max-width: 760px) {
  .agx-an-fold:not(.is-open) {
    grid-template-rows: 64px;
  }
  .agx-an-toggle {
    padding: 14px 16px;
    border-radius: 14px;
  }
  .agx-an-toggle span {
    font-size: 14px;
  }
  .agx-an-toggle em {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* the fold's grid row sizes ONE child (the wrapper) — multiple direct
   card children each took their own row and never collapsed */
.agx-an-fold-in {
  min-height: 0;
}

/* ==================================================================== *
 * ANALYTICS TOGGLE v2 — unmissable.
 * The white bar read as one more card. Now it is a real BUTTON in the
 * page's primary CTA language (black pill, white type, orange chevron
 * badge), centred over a stronger fade so the fold literally points at
 * it, with a subtle idle pulse on the badge until first click.
 * ==================================================================== */
.agx-an-fold:not(.is-open) {
  grid-template-rows: 120px;
  mask-image: linear-gradient(180deg, #000 0, #000 22%, transparent 92%);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 22%,
    transparent 92%
  );
}
.agx-an-toggle {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  width: auto;
  min-width: 320px;
  max-width: 100%;
  margin: -46px auto 0;
  position: relative;
  z-index: 3;
  padding: 14px 16px 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--agx-ink);
  color: #fff;
  box-shadow:
    0 18px 40px -14px rgba(10, 10, 10, 0.55),
    0 0 0 6px rgba(255, 255, 255, 0.9);
  /* centred: the grid item is inline-grid, so its box shrinks to content
     and the auto margins centre it in the panel */
  justify-self: center;
  left: 50%;
  transform: translateX(-50%);
}
.agx-an-toggle:hover {
  background: #1c1c1f;
  border-color: transparent;
  box-shadow:
    0 22px 46px -14px rgba(10, 10, 10, 0.6),
    0 0 0 6px rgba(255, 255, 255, 0.9);
  transform: translateX(-50%) translateY(-1px);
}
.agx-an-toggle:focus-visible {
  outline: 2px solid var(--agx-accent);
  outline-offset: 4px;
}
.agx-an-toggle span {
  color: #fff;
  font-size: 15.5px;
}
.agx-an-toggle em {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}
.agx-an-toggle i {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff7a18, #ec008c);
  color: #fff;
  font-size: 20px;
  animation: agx-an-nudge 2.4s ease-in-out infinite;
}
.agx-an-toggle.is-open i {
  animation: none;
  transform: rotate(180deg);
}
@keyframes agx-an-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}
/* the button hangs over the panel's bottom edge; give the panel room */
.agx-an {
  padding-bottom: 34px;
}
@media (prefers-reduced-motion: reduce) {
  .agx-an-toggle i {
    animation: none;
  }
}
@media (max-width: 760px) {
  .agx-an-fold:not(.is-open) {
    grid-template-rows: 88px;
  }
  .agx-an-toggle {
    min-width: 0;
    width: calc(100% - 8px);
    margin-top: -36px;
    padding: 12px 12px 12px 18px;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    left: 50%;
  }
  .agx-an-toggle span {
    font-size: 14.5px;
  }
  .agx-an-toggle em {
    font-size: 11px;
  }
  .agx-an-toggle i {
    width: 36px;
    height: 36px;
  }
}
/* label only — one row */
.agx-an-toggle {
  grid-template-rows: auto;
  min-width: 0;
  padding: 12px 12px 12px 26px;
}
.agx-an-toggle i {
  grid-row: 1;
}
@media (max-width: 760px) {
  .agx-an-toggle {
    width: auto;
    padding: 10px 10px 10px 20px;
  }
}

/* ==================================================================== *
 * COMET FIRST-PAINT FIX — "make sure this doesn't load first".
 * The comets carry animation-delays (2.4s+), and during a delay a CSS
 * animation shows its 0% keyframe: dashoffset 12 with dasharray "12 88"
 * parks a fully-visible 12-unit streak at the start of every rail — so a
 * fresh load showed six orange dashes frozen on the wires before the
 * rails had even drawn. Now the resting state AND the 0% keyframe park
 * the dash one full period BEFORE the path (offset 100 = the gap is what
 * sits over the path), so nothing is visible until the comet's own delay
 * elapses and it enters from the card edge. The rest of the sweep is
 * unchanged (100 → -100 covers the same 200-unit travel).
 * ==================================================================== */
.agx-h4-comet {
  stroke-dashoffset: 100;
  animation: agx-h4-comet 5.2s linear infinite;
  animation-fill-mode: both;
}
@keyframes agx-h4-comet {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
/* FINAL, verified: the pattern gets a real dead zone. dasharray "12 188"
   makes the period 200 = a full 12-dash + a 188-gap; at rest (offset
   -200 wraps to 0 in a 200 period, so use -150) the dash sits at
   -150..-138 — 138 units before the path START, no boundary to graze at
   either end. The sweep runs -150 → -350 (200 units) so the dash enters
   from the card edge only once the delay ends and leaves past the stem
   before the loop wraps. Visually identical to before in flight (a
   12-unit head, one comet on the path at a time per rail). */
.agx-h4-comet {
  stroke-dasharray: 12 188;
  stroke-dashoffset: -150;
  opacity: 1;
  animation: agx-h4-comet 5.2s linear infinite;
  animation-fill-mode: both;
}
.agx-h4-comet--glow {
  opacity: 0.22;
}
.agx-h4-comet--core {
  opacity: 0.9;
}
@keyframes agx-h4-comet {
  0% {
    stroke-dashoffset: -150;
  }
  100% {
    stroke-dashoffset: -350;
  }
}

/* ============================================================
   FLOW PASS (2026-08-16) — page rhythm + mobile stack fixes.
   ============================================================ */
/* the run-it section keeps its full-bleed children flush: the reel and
   rows carry their own internal vertical padding */
.agx-runit {
  padding-bottom: 32px;
}
/* the header hands straight to the reel — its own pin provides the
   breathing room, so the standard 64px head margin + reel top padding
   read as a hole */
.agx-runit .agx-head {
  margin-bottom: 8px;
}
.agx-runit .agx-pta > section {
  padding-top: 0;
}
/* mobile analytics toolbar: one horizontally scrolling line — the pills
   were piling into a jumble at 390px */
@media (max-width: 760px) {
  /* the toolbar is .agx-an-toolbar (renamed 2026-08-16): its old name
     .agx-an-bar collided with the Period Comparison chart's bar class and
     the "scope hard" override zeroed every chart bar on phones. Now the
     row WRAPS to two lines instead of hiding half of itself in an
     unsignposted horizontal scroller (audit: filter + Demo tag + half the
     date were off-screen). */
  .agx-an > .agx-an-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    padding-bottom: 12px;
  }
  .agx-an-ranges {
    width: auto;
    flex: none;
  }
  .agx-an-ranges button {
    flex: none;
    padding: 0 10px;
    white-space: nowrap;
  }
  .agx-an-date,
  .agx-an-filter {
    flex: none;
    white-space: nowrap;
  }
  /* (the workspace replica was display:none here — reversed 2026-08-16:
     Kedem's rule is "mobile shows the exact same thing as desktop"; the
     ≤760px rules above already lay it out in 2 columns) */
  /* monetization cards: keep the face stacks (parity) — the header wraps
     so names never truncate behind them; two-line names get a fixed
     header height so cards in a row stay level */
  .agx-m2-card-h {
    flex-wrap: wrap;
    row-gap: 6px;
    /* two-line names ("Brand campaigns") + the face stack wrapped under
       = ~86px; give every header that height so a row's cards stay level */
    min-height: 86px;
    align-content: flex-start;
    align-items: flex-start;
  }
  .agx-m2-card-h b {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .agx-m2-cards {
    align-items: stretch;
  }
  .agx-m2-cards > * {
    display: flex;
  }
  /* ...and the card must grow into that flex cell, or it shrink-wraps its
     text and the right edges rag by up to 34px inside a 170px track */
  .agx-m2-cards > * > .agx-m2-card,
  .agx-m2-card {
    width: 100%;
  }
}

/* ---- feature-row leads scene on phones ----
   The mobile leads scene is authored at 750 design px and scales itself
   off its own width; its own camera (leads-connect-mobile.tsx) does the
   framing. Below 640px FitBox's fit transform is neutralised for this row
   so the scene renders at the card's inner width. Desktop untouched. */
@media (max-width: 640px) {
  .agx-feature-rows .agx-leads-m,
  .agx-feature-rows :has(> .agx-leads-m),
  .agx-feature-rows :has(> * > .agx-leads-m) {
    transform: none !important;
    width: 100%;
    max-width: none;
  }
  .agx-feature-rows :has(> * > * > .agx-leads-m) {
    height: auto !important;
  }
  .agx-feature-rows :has(> .agx-leads-m),
  .agx-feature-rows :has(> * > .agx-leads-m) {
    overflow: hidden;
  }
}

/* ---- feature rows: brand accent word + light DM card on phones ----
   The rows' accent words wore a lone pink (#dd548a) that matched nothing
   else on the page; they now carry the same magenta→orange the trust
   headline, "Everywhere." and the monetization meter use. */
.agx-brand-word {
  background: linear-gradient(96deg, #ec008c 10%, #ff7a18 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ==================================================================== *
 * FEATURE ROWS — match the site (Kedem 2026-08-16: "too close",
 * "weird with the pink text, make it match the style of the site").
 * · Wrapper renamed .agx-feature-rows: the old .agx-rows name collided
 *   with a pre-existing small grid rule (display:grid; gap:6px) that
 *   was overriding the rows' own gap-20/lg:gap-36 — that collision is
 *   WHY the two rows sat on top of each other.
 * · Accent word = the site's SOLID orange (var(--agx-accent)), exactly
 *   how "1 login." reads — not /business's pink, not a gradient.
 * · Row rhythm: the same 128px section beat the rest of the page uses,
 *   and real air between the two rows.
 * ==================================================================== */
.agx-row-accent {
  color: var(--agx-accent-text, #d1600e);
}
.agx-feature-rows {
  padding: 40px 0 8px;
}
.agx-feature-rows > div > div {
  gap: 168px;
  padding-top: 40px;
  padding-bottom: 88px;
}
@media (max-width: 1023px) {
  .agx-feature-rows > div > div {
    gap: 112px;
    padding-top: 24px;
    padding-bottom: 56px;
  }
}
@media (max-width: 760px) {
  .agx-feature-rows {
    padding: 16px 0 0;
  }
  .agx-feature-rows > div > div {
    gap: 88px;
  }
}

/* audit fix: leaderboard name/handle overflowed into "Profile views" at
   360px — the wrapper span had no min-width:0 so b/em could never truncate */
.agx-an-who > span {
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 760px) {
  /* parity: the full name + handle read on their own line; the lead bar
     and the metrics wrap beneath — no "Anthony Edwar…" ellipsis */
  .agx-an .agx-an-row .agx-an-who {
    grid-column: 1 / -1;
  }
  /* the metric bar has to be released too — left pinned to 3/4 it kept a
     one-third-width empty rectangle beside every row (186px at 390, ~414px
     at 744-759, six rows, ~670px of dead scroll) */
  .agx-an .agx-an-row .agx-an-lead {
    grid-column: 1 / -1;
    align-items: stretch;
  }
  .agx-an .agx-an-row .agx-an-who > span {
    overflow: visible;
  }
  .agx-an .agx-an-row .agx-an-who b,
  .agx-an .agx-an-row .agx-an-who em {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
/* audit fix: the fixed mobile action bar (~72px) covered the problem
   section's finale pill "See the workspace ↓" — give the pinned frame
   room for it below 760px */
@media (max-width: 760px) {
  .agx-slam-see {
    bottom: calc(24px + 76px + env(safe-area-inset-bottom, 0px));
  }
}
/* audit fix: the analytics toggle's chevron nudge and the trust marquees
   ran forever off-screen — pause when the page marks them off */
.agx-an.is-off .agx-an-toggle i {
  animation-play-state: paused;
}
/* popLayout crossfade: the outgoing stat value is lifted out of flow
   (position:absolute) — the slot must be its containing block, and the
   value box must keep its height so nothing jumps */
.agx-app-stat {
  position: relative;
}
.agx-app-stat .agx-app-stat-v {
  display: block;
  min-height: 1.15em;
}
/* audit: trust marquees — pause off-screen and honour reduced motion */
.agx-trust.is-off .marquee-container {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .agx-pages .marquee-container {
    animation: none;
  }
}
/* audit: PostToAll intro orbit + shimmer keep spinning off-screen — the
   reel's own gates don't cover this page's white run; pause when the
   chapter is not intersecting (class set by AgenciesPostToAll) */
.agx-pta.is-off .reel-intro-orbit,
.agx-pta.is-off .reel-intro-orbit *,
.agx-pta.is-off .reel-intro-accent {
  animation-play-state: paused;
}
/* audit: the ported scenes carry a Spinner (animate-spin) and typing dots
   (animate-bounce) inside permanently opacity:0 containers — pause any
   infinite animation inside an element that is fully transparent, and
   pause the whole row's animations while its scene player is de-latched */
.agx-feature-rows [style*="opacity: 0"] .animate-spin,
.agx-feature-rows [style*="opacity: 0"] .animate-bounce,
.agx-feature-rows [style*="opacity:0"] .animate-spin,
.agx-feature-rows [style*="opacity:0"] .animate-bounce {
  animation-play-state: paused;
}

/* ==================================================================== *
 * MOBILE PARITY ROUND (2026-08-16) — Kedem: "make sure everything is
 * mobile optimized and shows the exact same thing as desktop, functions
 * the same, no mistakes." Fixes for the confirmed audit findings that
 * live in CSS. Content that had been display:none'd on phones is back
 * (workspace replica, venues marquee, monetization face stacks, geo
 * columns + #5 card, chart axes, View › links, source hosts).
 * ==================================================================== */
@media (max-width: 760px) {
  /* problem section kicker: a real centered box so "Running a roster
     today" fits on one line (left:50% + translate capped it at 50vw) */
  .agx-slam-kicker {
    left: 5vw;
    right: 5vw;
    transform: none;
    max-width: none;
    width: auto;
    text-align: center;
  }
  /* progress dots + finale pill clear the fixed action bar */
  .agx-slam-dots {
    bottom: calc(16px + 76px + env(safe-area-inset-bottom, 0px));
  }
  .agx-slam-see {
    min-height: 44px;
    padding: 12px 18px;
  }
  /* "12 connected." stays on one line */
  .agx-slam-beat .agx-slam-word {
    font-size: clamp(48px, 13.5vw, 82px);
  }
  /* type floor: nothing meant to be read under 11px */
  .agx-h4-total-l {
    font-size: 12px;
  }
  .agx-gs2-role,
  .agx-gs2-status em,
  .agx-gs2-status u,
  .agx-gs2-live em,
  .agx-gs2-live u,
  .agx-gs2-bio,
  .agx-gs2-row-t em {
    font-size: 11px;
  }
  .agx-m2-card-d {
    font-size: 12px;
  }
  /* analytics range buttons: 44px tap targets */
  .agx-an-ranges button {
    min-height: 40px;
    padding: 0 12px;
  }
}
/* hero phone: the 3D float on .agx-app-frame is flattened already, but
   .agx-app itself still carried preserve-3d — the phone's lower half
   stopped painting once it scrolled ~180px past the viewport top (a hard
   flat cut + white gap above the totals). Flat on the parent too. */
.agx-h4-phone .agx-app {
  transform-style: flat;
}
/* Post to All on this white page: the reel's eyebrow was white-on-white
   (invisible on desktop AND mobile), and the "what" paragraph — the one
   sentence that explains the feature — was hidden below lg. Both back. */
.agx-pta p:has(> .reel-intro-fly-l) {
  color: #52525b;
}
@media (max-width: 1023px) {
  .agx-pta .reel-intro-detail {
    display: block;
    font-size: 13px;
    margin-top: 8px;
    max-width: 30ch;
  }
  /* PTA intro ring: no chip sliced at the viewport edge at 360 */
  .agx-pta .reel-intro-orbit {
    --orbit-r: clamp(120px, 34vw, 300px);
  }
}

/* DM journey mobile deck: hide the track scrollbar (WebKit); the dashes
   are the indicator */
.agx-dm-deck::-webkit-scrollbar {
  display: none;
}

/* One card per swipe. `snap-mandatory` alone only decides WHERE a scroll
   comes to rest — a fast fling still sails past a snap point, so a flick
   on the DM deck skipped a creator (measured: 4 of 6 flings landed on
   card 2 instead of card 1). `scroll-snap-stop: always` makes every card
   a hard stop, so a flick can only ever advance one. */
.agx-dm-card {
  scroll-snap-stop: always;
}

/* ==================================================================== *
 * THE PAGE'S LIGHT (2026-08-16) — Kedem: "i like the colour on this
 * background, can we have it on the whole site?"
 *
 * The hero's wash (.agx-hero-wash: a warm orange radial top-right, a
 * cool blue one top-left, both ~10% on white) was a 780px band pinned to
 * the hero, and every section painted plain white over it. It is now the
 * page's ambient ground: one fixed, viewport-sized layer behind
 * everything, so the tint is identical at every scroll position instead
 * of stretching or repeating with the page's 16,000px height.
 *
 * Cards, panels and product surfaces stay pure white on purpose — they
 * are what should read as "paper" against the tint.
 * ==================================================================== */
.agx-page-root {
  background-color: #fff;
  /* own stacking context so the tint layer below can sit at z-index -1:
     the root's own background paints first, the tint next, content last.
     No z-index is imposed on the navbar / action bar this way. */
  isolation: isolate;
}
.agx-page-root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      58% 46% at 82% 12%,
      rgba(255, 122, 24, 0.11) 0%,
      rgba(255, 122, 24, 0) 72%
    ),
    radial-gradient(
      52% 44% at 16% 6%,
      rgba(64, 122, 255, 0.1) 0%,
      rgba(64, 122, 255, 0) 74%
    ),
    radial-gradient(
      64% 40% at 50% 104%,
      rgba(255, 122, 24, 0.07) 0%,
      rgba(255, 122, 24, 0) 76%
    );
}
/* section grounds go transparent so the light reaches them; the hero
   keeps its own stronger wash on top for the opening */
.agx-hero4,
.agx-trust,
.agx-problem,
.agx-slam-sec,
.agx-section,
.agx-final,
.agx-pta,
.agx-feature-rows,
.agx-dm-journey,
.agx-runit {
  background: transparent;
}
/* the three ported chapters carry Tailwind's bg-white on their wrapper */
.agx-pta.bg-white,
.agx-feature-rows.bg-white,
.agx-dm-journey.bg-white {
  background-color: transparent;
}
/* the Post to All stage was a white slab (invisible on white, a hard
   grey rectangle on the tint) — the phone and its chips float instead */
.agx-pta .reel-stage {
  background: transparent;
}
/* the publishing card's frame goes away (Kedem 2026-08-16: "make the
   frame transparent") — an earlier round turned it from black to
   #f8f8fa, which read as a grey slab once the page took the hero's
   tint. The phone, the platform ring and the status line now float on
   the page's own light, the way the hero's phone does. */
.agx-pta [data-pta="overlay"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ==================================================================== *
 * STICKY NAV — ManyChat's exact treatment (2026-08-16).
 * Kedem: "make it the same style as many chat."
 *
 * Measured off their live bar (.nav_blur), not eyeballed:
 *   background      rgba(255, 255, 255, 0.5)
 *   backdrop-filter blur(60px)      ← no saturate
 *   box-shadow      none            ← no hairline under the bar
 *   transition      opacity 0.3s
 *   nav links       opacity 1       ← they do NOT fade; the softness is
 *                                     the translucent bar itself
 * Transparent at the top, the frost fades in on scroll.
 *
 * Scoped to .agx-page-root — `.navbar--light` is shared with
 * /hospitality, which keeps its own treatment.
 * `:not(.navbar-menu-open)` keeps the dark mobile drawer solid (this
 * selector outranks the drawer's own rules).
 * ==================================================================== */
.agx-page-root .navbar.navbar--light {
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    -webkit-backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}
.agx-page-root .navbar.navbar--light.navbar-active:not(.navbar-menu-open) {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  box-shadow: none;
}
/* Below the desktop breakpoint the frost has to be nearly opaque. The 0.5
   alpha is a desktop composition choice — there the bar floats over open
   whitespace. On a phone a section headline or eyebrow sits directly under
   it at almost every section boundary, and 50% lets that copy read straight
   through the wordmark and the CTA (measured pixel spread across the bar:
   65-86 active vs 12-13 idle). Desktop keeps the glass. */
@media (max-width: 1023px) {
  .agx-page-root .navbar.navbar--light.navbar-active:not(.navbar-menu-open) {
    background: rgba(255, 255, 255, 0.94);
  }
}
.agx-page-root:has(.navbar-menu-open) .agx-actionbar {
  display: none;
}

/* The fixed bar owns the bottom 73px of every phone screen. Scenes that
   park a narration caption at the bottom of their stage were landing it
   underneath — "Published to all!" at y 588-600 against a bar top of 591,
   for the whole pin. Publishing the height lets each stage subtract it
   instead of every scene hard-coding an offset. Desktop: no bar, so 0. */
.agx-page-root {
  --agx-actionbar-h: 0px;
}
@media (max-width: 1023px) {
  .agx-page-root {
    --agx-actionbar-h: calc(73px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .agx-page-root .navbar.navbar--light {
    transition: none;
  }
}

/* ==================================================================== *
 * POST TO ALL — mobile structure (2026-09-04)
 *
 * Kedem, on a 390px phone: "the post to all section ... glitches and isnt
 * smooth motion" and "the issue of the spacing ... make it structured
 * better". The motion half is fixed in TS (the reel now activates a
 * single-frame act, and the publish timeline is scrubbed by scroll).
 * This is the spacing half. Measured before: the section ran 1843px tall,
 * the phone rendered 74x132 CSS px, and 77px of white sat between the
 * copy and the card.
 *
 * Three compounding causes, all fixed here rather than in the shared
 * product-reel components, so /home's reel is untouched by construction:
 *
 *  1. The stage band starts at 42vh but the statement above it only docks
 *     up by 30vh — the 12vh disagreement IS the white gap. The band also
 *     centred its contents, adding ~30px more slack.
 *  2. The band reserved 4vh at the bottom while the fixed action bar is
 *     73px tall, so the card's last 16px sat behind the bar — and the fit
 *     cap ALSO subtracted the bar, paying for it twice and shrinking the
 *     card to buy space that then opened as white above it.
 *  3. The publishing panel is authored at a fixed 470px that holds a
 *     ~340px column: 130px of dead centring padding inside the very box
 *     the fit scale is computed from, so it shrank the phone by ~28% for
 *     nothing.
 *
 * Everything is scoped to .agx-pta and to phones. Desktop is untouched.
 * ==================================================================== */
@media (max-width: 1023px) {
  /* the band: start where the docked statement actually ends, top-align
     instead of centring, and clear the action bar properly */
  .agx-pta div:has(> [data-stage-box]) {
    /* 37vh, not the 34 the component's own comment assumes: MEASURED, the
       docked copy's last line ends at 232px of a 664px viewport (35vh), so
       34 puts the card on top of "One video · 7 platforms." 37 clears it
       by ~14px and still recovers 5vh from the old 42.
       svh, not vh: the pin this band lives in is 100svh (ActReel's
       "mobile browser chrome collapses/expands 100vh, which makes a
       vh-tall sticky jump mid-pin"). Mixing the two units means the band
       is measured against the TALL viewport while the pin is the short
       one, so on a real iPhone the card drifts as the URL bar collapses.
       All three values below are svh so they cannot disagree. */
    top: 37svh !important;
    /* the fixed action bar is 73px; reserving only 4vh (27px) left the
       card's last 16px behind it */
    bottom: calc(2svh + var(--agx-actionbar-h, 0px)) !important;
    /* top-aligned: centring inside an oversized band was adding ~30px of
       slack above the card and pushing its foot toward the bar */
    align-items: flex-start !important;
  }
  /* The band already reserves the action bar, so the fit cap must measure
     against the BAND, not subtract the bar a second time — that double
     payment is what shrank the card to buy space that then opened as
     white above it. */
  .agx-pta [data-poster-window] {
    /* the band's own height, spelled out: 100 - 37 (top) - 2 (bottom) vh
       minus the action bar the band already reserves. A percentage cap is
       NOT usable here — the box between the band and this element is
       auto-height, so max-height:100% collapsed the card to ~100px. */
    max-height: calc(61svh - var(--agx-actionbar-h, 0px)) !important;
  }
  /* Drop the panel's dead centring padding so the fit scale is computed
     from the artwork, not from empty space — but MEASURED, not guessed:
     the composition overflows this box by 13.6px above (the phone card
     sits proud of it) and 17.9px below (the fan-out glow), and that
     overflow is invisible to the fit. Sized at 404 the box contains its
     own artwork, so the fitted card's foot lands where the band says it
     does instead of grazing the action bar. */
  .agx-pta [data-pta-root] > div > div:first-child {
    height: 404px !important;
  }
}