@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Shared Industries dropdown — uses the exact navbar glass material. */
.nav-industries {
  position: relative;
  flex: 0 0 auto;
}

.nav-industries-trigger {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 150ms var(--motion-ease-standard),
    color 150ms var(--motion-ease-standard);
}

.nav-industries-trigger:hover,
.nav-industries-trigger:focus-visible,
.nav-industries.is-open .nav-industries-trigger {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}

.nav-industries-panel {
  z-index: 60;
  border: 1px solid var(--nav-glass-border);
  border-radius: 7px;
  background: rgba(22, 22, 22, 0.7);
  color: #fff;
  box-shadow: var(--nav-glass-shadow);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
}

.nav-industry-link {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px !important;
  border-radius: 4px !important;
}

.nav-industry-link strong {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.nav-industry-link:hover,
.nav-industry-link:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
}

.nav-industry-link.is-current {
  background: transparent !important;
}

.nav-industry-link:hover strong,
.nav-industry-link:focus-visible strong,
.nav-industry-link.is-current strong {
  color: #fff;
}

@media (min-width: 981px) {
  .nav-industries {
    position: relative;
  }

  .nav-industries-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    width: min(520px, calc(100vw - 48px));
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -5px);
    transition:
      opacity 150ms var(--motion-ease-standard),
      transform 150ms var(--motion-ease-standard),
      visibility 150ms var(--motion-ease-standard);
  }

  .nav-industries-panel::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 11px;
  }

  .nav-industries:hover .nav-industries-panel,
  .nav-industries:focus-within .nav-industries-panel,
  .nav-industries.is-open .nav-industries-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 980px) {
  .nav-industries {
    width: 100%;
  }

  .nav-industries-trigger {
    min-height: 44px;
    padding: 0 12px;
  }

  .nav-industries-panel,
  .nav-industries:hover .nav-industries-panel,
  .nav-industries:focus-within .nav-industries-panel {
    position: static;
    display: none !important;
    grid-template-columns: 1fr;
    gap: 2px;
    width: 100%;
    max-height: 55dvh;
    margin-top: 4px;
    padding: 6px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
  }

  .nav-industries.is-open .nav-industries-panel {
    display: grid !important;
  }
}

@media (max-width: 520px) {
  .nav-industries-panel,
  .nav-industries:hover .nav-industries-panel,
  .nav-industries:focus-within .nav-industries-panel {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-industries-panel,
  .nav-industries-trigger {
    transition: none;
  }
}

/* Cookie consent and privacy */
.cookie-consent[hidden] {
  display: none;
}

.cookie-consent {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(calc(100% - 36px), 348px);
  margin: 0;
  padding: 14px 10px 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.7), rgba(74, 74, 72, 0.48)),
    rgba(18, 18, 18, 0.38);
  color: #fafaf7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 46px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(22px) saturate(135%) brightness(0.9);
  -webkit-backdrop-filter: blur(22px) saturate(135%) brightness(0.9);
}

.cookie-consent::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.1), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 52%);
  content: "";
  pointer-events: none;
}

.cookie-consent__copy {
  max-width: none;
}

.cookie-consent h2 {
  margin: 0 0 6px;
  color: #fafaf7;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cookie-consent__copy > p:last-child {
  margin: 0;
  color: rgba(250, 250, 247, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.cookie-consent__actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  align-items: center;
}

.cookie-consent__button,
.privacy-settings-button {
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cookie-consent__button {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 540;
}

.cookie-consent__button--primary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.88);
  color: #fff;
}

.cookie-consent__button--primary:hover {
  background: #050505;
}

.cookie-consent__button--secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(250, 250, 247, 0.88);
}

.cookie-consent__button--secondary:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.cookie-consent__button--customize {
  padding-right: 4px;
  padding-left: 4px;
  border-color: transparent;
  background: transparent;
  color: rgba(250, 250, 247, 0.88);
}

.cookie-consent__button--customize:hover {
  color: #fff;
}

.cookie-consent :focus-visible,
.privacy-settings-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.privacy-page {
  min-height: 100vh;
  background: #f2f2ee;
}

.privacy-main {
  width: min(calc(100% - 48px), 1040px);
  margin: 0 auto;
  padding: 148px 0 120px;
}

.privacy-hero {
  max-width: 760px;
  padding-bottom: 58px;
  border-bottom: 1px solid rgba(15, 15, 15, 0.15);
}

.privacy-hero > p:first-child {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.privacy-hero h1 {
  margin: 0;
  font-size: clamp(54px, 8vw, 104px);
  font-weight: 420;
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.privacy-hero > p:last-child {
  max-width: 590px;
  margin: 30px 0 0;
  color: #4f4f4a;
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.privacy-content {
  display: grid;
  grid-template-columns: minmax(0, 680px);
  gap: 0;
  padding-top: 30px;
}

.privacy-content section {
  padding: 34px 0;
  border-bottom: 1px solid rgba(15, 15, 15, 0.12);
  scroll-margin-top: 100px;
}

.privacy-content h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -0.025em;
}

.privacy-content p {
  margin: 0 0 14px;
  color: #51514c;
  font-size: 15px;
  line-height: 1.7;
}

.privacy-content p:last-child {
  margin-bottom: 0;
}

.privacy-content a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-table-wrap {
  overflow-x: auto;
}

.privacy-content table {
  width: 100%;
  border-collapse: collapse;
  color: #41413d;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.privacy-content th,
.privacy-content td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgba(15, 15, 15, 0.1);
  vertical-align: top;
}

.privacy-content th {
  color: #111;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.privacy-content code {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(15, 15, 15, 0.06);
  color: #181818;
}

.privacy-settings-button {
  margin-top: 10px;
  padding: 11px 14px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.privacy-settings-button:hover {
  background: #353532;
}

@media (max-width: 760px) {
  .cookie-consent {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    grid-template-columns: 1fr;
    max-width: 348px;
    margin-left: auto;
    gap: 10px;
    padding: 14px 10px 10px;
  }

  .privacy-main {
    width: min(calc(100% - 36px), 1040px);
    padding: 118px 0 80px;
  }

  .privacy-hero {
    padding-bottom: 42px;
  }
}

:root {
  --bg: #fbfbfa;
  --ink: #0b0b0b;
  --muted: #6f6f68;
  --line: rgba(15, 15, 15, 0.12);
  --card: #f0f0ec;
  --glass: rgba(245, 245, 242, 0.32);
  --dark-glass: rgba(16, 16, 16, 0.42);
  --nav-glass-bg: rgba(40, 40, 40, 0.32);
  --nav-glass-bg-hover: rgba(40, 40, 40, 0.46);
  --nav-glass-border: rgba(255, 255, 255, 0.13);
  --nav-glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  --nav-glass-blur: blur(18px);
  --o11-glass-bg: rgba(232, 232, 232, 0.3);
  --o11-glass-bg-hover: rgba(232, 232, 232, 0.44);
  --o11-glass-border: rgba(255, 255, 255, 0.58);
  --o11-glass-shadow: 0 12px 38px rgba(25, 30, 32, 0.055);
  --o11-glass-blur: blur(12px);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 16px 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 18px;
}

.site-header:has(.nav-industries.is-open),
.site-header:has(.nav-shell.open) {
  z-index: 80;
}

.nav-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  width: min(100%, 860px);
  min-height: 38px;
  padding: 4px 6px;
  border: 1px solid var(--nav-glass-border);
  border-radius: 7px;
  background: var(--nav-glass-bg);
  color: #fff;
  box-shadow: var(--nav-glass-shadow);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-right {
  justify-content: flex-end;
}

.nav-shell a,
.menu-button {
  border-radius: 6px;
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1;
  transition:
    background-color 150ms var(--motion-ease-standard),
    color 150ms var(--motion-ease-standard);
}

.nav-shell a:hover,
.menu-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  font-size: 15px !important;
}

.context-logo {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.context-logo.large {
  width: clamp(42px, 4.1vw, 60px);
  height: clamp(42px, 4.1vw, 60px);
}

.menu-button {
  display: none;
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 4px auto;
  background: currentColor;
}

.hero {
  position: relative;
  isolate: isolate;
  min-height: 100vh;
  overflow: hidden;
  background: #050505;
  color: #fff;
}

.hero-media,
.hero-media video,
.hero-fallback,
.hero-still,
.hero-still-grade,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: 0;
  background: #050505;
}

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 920ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-media.video-ready video {
  opacity: 1;
}

.hero-fallback {
  z-index: 2;
  overflow: hidden;
  background: #050505;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 920ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 920ms linear;
}

.hero-media.video-ready .hero-fallback {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-still {
  background:
    #050505 url("/assets/hero-poster.jpg") center / cover no-repeat;
  transform: scale(1.04);
  filter: saturate(0.88) contrast(1.06) brightness(0.72);
  transform-origin: center center;
}

.hero-still-grade {
  background:
    radial-gradient(ellipse 58% 48% at 54% 42%, transparent 18%, rgba(0, 0, 0, 0.42) 72%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(115deg, rgba(8, 12, 10, 0.28) 0%, transparent 46%, rgba(0, 0, 0, 0.22) 100%);
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.45),
    inset 0 0 240px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.hero-still-grade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}

.hero-boot {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translate(-50%, -50%);
  animation: heroBootBreathe 3.8s ease-in-out infinite;
}

.hero-boot-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(36vw, 260px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(245, 246, 240, 0.16) 0%, rgba(190, 198, 180, 0.06) 38%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-boot-mark {
  position: relative;
  z-index: 1;
  width: min(18vw, 148px);
  height: auto;
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45))
    drop-shadow(0 28px 56px rgba(0, 0, 0, 0.28));
}

.hero-boot-wordmark {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 22px 48px rgba(0, 0, 0, 0.35);
}

.hero-boot-progress {
  position: absolute;
  left: 50%;
  bottom: max(28px, 4vh);
  z-index: 3;
  width: min(180px, 28vw);
  height: 1px;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hero-boot-progress i {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  animation: heroBootProgress 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes heroBootBreathe {
  0%, 100% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(0.985);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes heroBootProgress {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(260%); }
}

.hero-media.video-ready .hero-boot,
.hero-media.video-ready .hero-boot-progress {
  animation: none;
}

.data-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(900px) rotateX(58deg) translateY(10%);
}

.data-plane {
  position: absolute;
  width: 52vw;
  height: 34vh;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.2) 12% 12.3%, transparent 12.3% 100%),
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: 0 24px 100px rgba(0, 0, 0, 0.4);
  transform: skewY(-8deg);
  animation: float 9s ease-in-out infinite;
}

.plane-one {
  right: 6vw;
  top: 22vh;
}

.plane-two {
  right: 18vw;
  top: 46vh;
  width: 38vw;
  height: 20vh;
  animation-delay: -4s;
}

.scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
  transform: translateY(-100%);
  animation: scan 6s linear infinite;
}

.hero-shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0.58) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 150px 48px 72px;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: clamp(30px, 3.3vw, 48px);
  font-weight: 700;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(38px, 4.4vw, 74px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.rule {
  width: min(100%, 460px);
  height: 2px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.24);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 8px 13px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: #fff;
  color: #050505;
}

.button.ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  backdrop-filter: blur(12px);
}

section.logo-marquee.logo-marquee {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 76px;
  padding: 9px 48px 14px;
  border-top: 1px solid rgba(15, 15, 15, 0.06);
}

.logo-marquee p {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}

.marquee-track {
  display: flex;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-row {
  display: flex;
  align-items: center;
  gap: 58px;
  min-width: max-content;
  padding-right: 58px;
  animation: marquee 34s linear infinite;
}

.logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 48px;
}

.logo-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 38px;
  object-fit: contain;
  filter: none;
  opacity: 0.9;
}

.logo-meta img {
  width: 112px;
}

.logo-google img {
  width: 118px;
}

.logo-stanford img {
  width: 62px;
  max-height: 44px;
}

.logo-iit img {
  width: 46px;
  max-height: 46px;
}

.logo-usc img {
  max-width: 94px;
  max-height: 40px;
}

.logo-berkeley img {
  max-width: 132px;
}

.logo-mckinsey img {
  max-width: 142px;
}

.logo-pwc img {
  width: 90px;
  max-width: 90px;
  max-height: 44px;
}

section.context-flow.context-flow {
  position: relative;
  max-width: none;
  height: clamp(560px, 42vw, 680px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 15, 15, 0.06);
  border-bottom: 1px solid rgba(15, 15, 15, 0.06);
  background: #fbfbfa;
}

.context-flow-stage {
  position: relative;
  width: min(100%, 1600px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  background-image:
    linear-gradient(30deg, transparent 24%, rgba(11, 11, 11, 0.055) 25%, rgba(11, 11, 11, 0.055) 26%, transparent 27%, transparent 74%, rgba(11, 11, 11, 0.055) 75%, rgba(11, 11, 11, 0.055) 76%, transparent 77%),
    linear-gradient(150deg, transparent 24%, rgba(11, 11, 11, 0.055) 25%, rgba(11, 11, 11, 0.055) 26%, transparent 27%, transparent 74%, rgba(11, 11, 11, 0.055) 75%, rgba(11, 11, 11, 0.055) 76%, transparent 77%);
  background-position: 0 0, 0 0;
  background-size: 84px 72px;
}

.flow-fade {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.flow-fade-left,
.flow-fade-right {
  top: 0;
  bottom: 0;
  width: 24%;
}

.flow-fade-left {
  left: 0;
  background: linear-gradient(90deg, #fbfbfa 12%, rgba(251, 251, 250, 0));
}

.flow-fade-right {
  right: 0;
  background: linear-gradient(270deg, #fbfbfa 12%, rgba(251, 251, 250, 0));
}

.flow-fade-top,
.flow-fade-bottom {
  left: 0;
  right: 0;
  height: 92px;
}

.flow-fade-top {
  top: 0;
  background: linear-gradient(180deg, #fbfbfa, rgba(251, 251, 250, 0));
}

.flow-fade-bottom {
  bottom: 0;
  background: linear-gradient(0deg, #fbfbfa, rgba(251, 251, 250, 0));
}

.flow-core {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 164px;
  height: 164px;
  border: 1px solid rgba(11, 11, 11, 0.12);
  border-radius: 50%;
  background: rgba(251, 251, 250, 0.96);
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
  animation: contextCorePulse 3.2s ease-in-out infinite;
}

.flow-core::before,
.flow-core::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(11, 11, 11, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.flow-core::before {
  inset: -14px;
  border-style: dashed;
  animation: contextOrbit 9s linear infinite;
}

.flow-core::after {
  inset: -31px;
  border-style: dashed;
  border-color: rgba(11, 11, 11, 0.06);
  animation: contextOrbitReverse 14s linear infinite;
}

.flow-core img {
  width: 118px;
  height: 118px;
  object-fit: contain;
}

.flow-source,
.flow-signal {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  border: 1px solid rgba(11, 11, 11, 0.14);
  background: rgba(251, 251, 250, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.flow-source {
  left: 0;
  top: 50%;
  gap: 10px;
  min-width: 136px;
  height: 64px;
  padding: 9px 14px 9px 9px;
  border-radius: 8px;
  transform-origin: center;
  animation: originalToolFlow 7s linear infinite;
  animation-delay: var(--flow-delay, 0s);
}

.flow-source-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: #fff;
}

.flow-source-icon img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.flow-source em {
  display: block;
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 540;
  white-space: nowrap;
}

.flow-signal {
  left: 50%;
  top: 50%;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  transform-origin: center;
  animation: originalSignalFlow 7s linear infinite;
  animation-delay: var(--flow-delay, 5.25s);
}

.flow-signal i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1px solid rgba(11, 11, 11, 0.32);
  border-radius: 3px;
}

.flow-signal strong {
  color: #171717;
  font-size: 13px;
  font-weight: 520;
  white-space: nowrap;
}

.flow-signal small {
  padding: 3px 5px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
}

/* Independent duplicate: sources become completed, multi-agent workflows. */
.agent-workflow-flow {
  background: #f8f9f7 !important;
}

.workflow-flow-stage {
  background-color: #f8f9f7;
}

.workflow-core {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12), 0 0 0 8px rgba(38, 110, 75, 0.035);
}

.workflow-source,
.workflow-card {
  position: absolute;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.workflow-source {
  left: 0;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 136px;
  height: 64px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(11, 11, 11, 0.14);
  border-radius: 8px;
  background: rgba(251, 251, 250, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  animation: workflowSourceFlow 7s linear infinite;
  animation-delay: var(--flow-delay, 0s);
}

.workflow-source em {
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 540;
  white-space: nowrap;
}

.workflow-card {
  left: 50%;
  top: 50%;
  --workflow-card-width: 278px;
  --task-card-width: 228px;
  width: var(--workflow-card-width);
  padding: 12px 13px 11px;
  border: 1px solid rgba(11, 11, 11, 0.14);
  border-radius: 9px;
  background: rgba(251, 251, 250, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.075);
  animation:
    workflowSignalRoute 7s linear infinite,
    workflowCardMorph 7s ease-in-out infinite;
  animation-delay: var(--flow-delay, 6s), var(--flow-delay, 6s);
}

.workflow-task-state {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  transform: translateY(-50%);
  animation: workflowTaskConvert 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-task-state i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1px solid rgba(11, 11, 11, 0.32);
  border-radius: 3px;
}

.workflow-task-state strong {
  overflow: hidden;
  color: #171717;
  font-size: 13px;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-task-state small {
  margin-left: auto;
  padding: 3px 5px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
}

.workflow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  opacity: 0;
  animation: workflowDetailsReveal 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-card-head span {
  overflow: hidden;
  color: #171717;
  font-size: 12px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-card-head b {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #2d7554;
  font-size: 9px;
  font-weight: 720;
  opacity: 0;
  animation: workflowStatusReveal 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-card-head b::before {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2d7554;
  color: #fff;
  font-size: 8px;
}

.workflow-progress {
  height: 3px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4e7e3;
  opacity: 0;
  animation: workflowDetailsReveal 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #2d7554;
  transform: scaleX(0);
  transform-origin: left;
  animation: workflowProgress 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: workflowDetailsReveal 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-steps span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #686d69;
  font-size: 8px;
  white-space: nowrap;
}

.workflow-steps i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eceeeb;
  color: #252725;
  font-size: 7px;
  font-style: normal;
  font-weight: 760;
  animation: workflowAgentOne 7s linear infinite;
  animation-delay: var(--flow-delay, 6s);
}

.workflow-steps span:nth-child(2) i { animation-name: workflowAgentTwo; }
.workflow-steps span:nth-child(3) i { animation-name: workflowAgentThree; }

.mini-logo {
  width: 20px;
  height: 20px;
  background: url("/assets/context-mark-black.svg") center / contain no-repeat;
}

section:not(.hero) {
  max-width: 1600px;
  margin: 0 auto;
  padding: 88px 48px;
}

.atlas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
}

.atlas h2,
.section-heading h2,
.industry-heading h2,
.roi h2,
.cta h2 {
  max-width: 720px;
  font-size: clamp(34px, 5vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.atlas a,
.feature a {
  color: var(--muted);
  font-size: 14px;
}

.section-heading {
  margin-bottom: 32px;
}

.section-heading.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section-heading p {
  color: var(--muted);
  font-size: 22px;
}

.highlight-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.feature {
  min-height: 360px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.feature.wide {
  grid-row: span 2;
  min-height: 560px;
}

.workflow-capture-demo,
.brain-cycle-demo,
.agent-execution-demo {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f4f4f0;
}

.workflow-capture-demo {
  min-height: 372px;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    #f4f4f0;
  background-size: 34px 34px;
}

.capture-sources {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.capture-sources span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
}

.capture-line {
  position: relative;
  width: 1px;
  height: 42px;
  margin: 0 auto;
  background: rgba(11, 11, 11, 0.18);
}

.capture-line i {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  transform: translateX(-50%) rotate(45deg);
}

.captured-workflow {
  max-width: 510px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(11, 11, 11, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.captured-workflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 620;
}

.captured-workflow-head small {
  padding: 4px 7px;
  border-radius: 99px;
  background: #e8f2ec;
  color: #2d7554;
  font-size: 8px;
  font-weight: 700;
}

.captured-workflow ol {
  list-style: none;
}

.captured-workflow li {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(11, 11, 11, 0.07);
}

.captured-workflow li:last-child { border-bottom: 0; }
.captured-workflow li b { color: #aaa; font-size: 9px; }
.captured-workflow li span { display: grid; gap: 2px; }
.captured-workflow li strong { font-size: 10px; font-weight: 620; }
.captured-workflow li em { color: var(--muted); font-size: 8px; font-style: normal; }
.captured-workflow li > i { color: #2d7554; font-size: 8px; font-style: normal; font-weight: 680; }

/* Workflow capture motion, styled to the Context product language. */
.workflow-watchtower {
  position: relative;
  width: 100%;
  min-height: 372px;
  max-height: 600px;
  aspect-ratio: 7 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.07), transparent 42%),
    #121212;
  font-family: "Inter", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.wt-root .stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wt-root .map-board {
  position: absolute;
  inset: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(18, 18, 18, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wt-root .map-board::before {
  content: none;
  position: absolute;
  left: 15px;
  top: 10px;
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.11em;
  z-index: 2;
  pointer-events: none;
}

.wt-root .grid {
  position: absolute;
  left: 58px;
  right: 24px;
  top: 42px;
  bottom: 54px;
  display: grid;
  grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 7px;
}

.wt-root .route-layer {
  position: absolute;
  z-index: 2;
  left: 58px;
  right: 24px;
  top: 42px;
  bottom: 54px;
  pointer-events: none;
}

.wt-root .map-axis {
  position: absolute;
  z-index: 2;
  display: flex;
  color: rgba(255, 255, 255, 0.34);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  pointer-events: none;
}

.wt-root .map-axis-x {
  left: 58px;
  right: 24px;
  top: 27px;
  justify-content: space-between;
}

.wt-root .map-axis-y {
  left: 12px;
  top: 44px;
  bottom: 58px;
  width: 39px;
  flex-direction: column;
  justify-content: space-between;
}

.wt-root .map-legend {
  position: absolute;
  z-index: 2;
  left: 58px;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.03em;
}

.wt-root .map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wt-root .map-legend i {
  display: block;
  width: 22px;
  height: 2px;
}

.wt-root .legend-observed {
  background: #84d3a8;
}

.wt-root .legend-review {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 4px, transparent 4px 7px);
}

.wt-root .cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  transition: background 1.1s ease, border-color 1.1s ease, transform 0.6s ease, box-shadow 0.6s ease;
  animation: wt-breathe 4s ease-in-out infinite;
}

.wt-root .cell::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(8px, 1vw, 12px);
  font-weight: 650;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1);
}

.wt-root .cell.quiet {
  opacity: 0.58;
}

.wt-root .cell.route-node,
.wt-root .cell.review-node,
.wt-root .cell.signal,
.wt-root .cell.path-done {
  animation: none;
  opacity: 1;
}

.wt-root .cell.route-node {
  border-color: rgba(132, 211, 168, 0.35);
  background: rgba(45, 117, 84, 0.28);
}

.wt-root .cell.review-node {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.08);
}

.wt-root .cell.signal {
  z-index: 3;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 12px 30px rgba(0, 0, 0, 0.28);
  transform: scale(1.1);
  animation: wt-signal-pulse 1.2s ease-in-out infinite;
}

.wt-root .cell.path-done {
  z-index: 3;
  border-color: #84d3a8;
  background: #2d7554;
  box-shadow: 0 4px 12px rgba(45, 117, 84, 0.28);
}

.wt-root .cell.reviewed {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
}

.wt-root .cell.path-complete {
  background: #215e42;
  box-shadow: 0 0 0 4px rgba(132, 211, 168, 0.14), 0 6px 16px rgba(45, 117, 84, 0.28);
  transform: scale(1.1);
}

.wt-root .cell.path-done::after {
  opacity: 1;
  transform: scale(1);
}

.wt-root .route-segment {
  position: absolute;
  z-index: 1;
  display: block;
  height: 2px;
  transform: rotate(var(--route-angle)) scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.3, 1) var(--route-delay, 0s);
}

.wt-root .route-segment.active {
  transform: rotate(var(--route-angle)) scaleX(1);
}

.wt-root .route-main {
  background: #84d3a8;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.wt-root .route-branch {
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 5px, transparent 5px 8px);
}

.wt-root .map-callout {
  position: absolute;
  z-index: 3;
  display: block;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.02em;
  opacity: 0.45;
  white-space: nowrap;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.wt-root .map-callout.active {
  border-color: rgba(132, 211, 168, 0.45);
  color: #84d3a8;
  opacity: 1;
}

.wt-root .panel {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 440px;
  max-width: min(440px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(236, 239, 241, 0.72) 52%, rgba(220, 224, 228, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 30px 80px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.5);
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.42s ease;
}

.wt-root .phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 0;
  margin-bottom: 10px;
}

.wt-root .pact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wt-root .picon {
  display: flex;
  width: 15px;
  height: 15px;
  flex: none;
}

.wt-root .picon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #111;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wt-root .ptitle {
  overflow: hidden;
  color: #111;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-root .ptitle.live {
  background: linear-gradient(90deg, #b9b9b9 32%, #111 50%, #b9b9b9 68%);
  background-size: 200% 100%;
  color: transparent;
  animation: wt-shine 1.4s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wt-root .ptag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 50%;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 5px;
  background: rgba(15, 15, 15, 0.05);
  color: #6f6f68;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.wt-root .ptag i {
  display: block;
  width: 6px;
  height: 6px;
  background: #2d7554;
  animation: wt-blink 1.4s ease-in-out infinite;
}

.wt-root .source-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 5px 7px;
  margin-bottom: 10px;
  border: 1px solid rgba(15, 15, 15, 0.08);
  border-radius: 7px;
  background: rgba(15, 15, 15, 0.04);
}

.wt-root .source-strip-label {
  flex: none;
  color: #6f6f68;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wt-root .source-list,
.wt-root .row-sources {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.wt-root .source-list {
  flex: 1;
  flex-wrap: wrap;
}

.wt-root .source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 2px 5px;
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: #6f6f68;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.wt-root .source-chip img {
  width: 12px;
  height: 12px;
  flex: none;
  object-fit: contain;
}

.wt-root .source-chip.compact {
  width: 20px;
  padding: 3px;
  justify-content: center;
  opacity: 0;
  transform: translateX(3px);
  transition: opacity 0.4s ease 0.12s, transform 0.4s ease 0.12s;
}

.wt-root .source-chip.compact span {
  display: none;
}

.wt-root .row.done .source-chip.compact {
  opacity: 1;
  transform: none;
}

.wt-root .row {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.45s ease;
}

.wt-root .row.in {
  grid-template-rows: 1fr;
  opacity: 1;
}

.wt-root .rin {
  display: flex;
  gap: 14px;
  overflow: hidden;
}

.wt-root .rail {
  display: flex;
  width: 15px;
  flex: none;
  flex-direction: column;
  align-items: center;
}

.wt-root .node {
  position: relative;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: none;
}

.wt-root .spin {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1.5px solid rgba(17, 17, 17, 0.14);
  border-top-color: #111;
  border-radius: 50%;
  animation: wt-rot 0.7s linear infinite;
  transition: opacity 0.25s;
}

.wt-root .ck {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2e7d4f;
  opacity: 0;
  transform: scale(0.3);
}

.wt-root .ck svg {
  width: 9px;
  height: 9px;
}

.wt-root .row.done .spin {
  opacity: 0;
}

.wt-root .row.done .ck {
  animation: wt-pop 0.5s cubic-bezier(0.34, 1.5, 0.5, 1) forwards;
}

.wt-root .line {
  width: 1px;
  flex: 1;
  margin-top: 4px;
  background: rgba(17, 17, 17, 0.12);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s ease 0.1s;
}

.wt-root .row.in .line {
  transform: scaleY(1);
}

.wt-root .rbody {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 8px;
}

.wt-root .rlabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
  color: #6f6f68;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wt-root .rlabel-copy {
  min-width: 0;
}

.wt-root .row-sources {
  flex: none;
}

.wt-root .rresult {
  color: #111;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.wt-root .row.done .rresult {
  opacity: 1;
  transform: none;
}

.wt-root .outcome {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.45s ease;
}

.wt-root .outcome.in {
  grid-template-rows: 1fr;
  opacity: 1;
}

.wt-root .oin {
  overflow: hidden;
}

.wt-root .obar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 13px;
  margin-top: 0;
  border-radius: 8px;
  background: #0b0b0b;
}

.wt-root .ocol {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wt-root .otxt {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.wt-root .obtn {
  flex: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 500;
}

.brain-cycle-demo,
.agent-execution-demo {
  position: relative;
  min-height: 170px;
}

.brain-cycle-demo {
  min-height: 205px;
  isolation: isolate;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(145deg, #101010, #1a1a1a 62%, #0e0e0e);
  color: #fff;
}

.brain-cycle-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.brain-app-workspace {
  position: absolute;
  z-index: 0;
  inset: 36px 10px 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px;
  animation: brainWorkspaceCycle 14s ease-in-out infinite;
}

.brain-app-scene {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  background: rgba(246, 248, 246, 0.07);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.brain-app-scene header {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 3px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
}

.brain-app-scene header img {
  width: 11px;
  height: 11px;
  object-fit: contain;
}

.brain-app-scene header b {
  min-width: 0;
  overflow: hidden;
  color: rgba(240, 247, 242, 0.8);
  font-size: 5.75px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brain-app-scene header small {
  margin-left: auto;
  color: rgba(226, 217, 207, 0.38);
  font-family: var(--font-mono);
  font-size: 4.75px;
  white-space: nowrap;
}

.brain-slack-scroll {
  display: grid;
  gap: 4px;
  padding: 5px;
  animation: brainSlackScroll 14s ease-in-out infinite;
}

.brain-slack-scroll p {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 4px;
  color: rgba(231, 224, 216, 0.54);
  font-size: 4.8px;
  line-height: 1.2;
}

.brain-slack-scroll p > i {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 4px;
  font-style: normal;
}

.brain-slack-scroll p b {
  display: block;
  margin-bottom: 1px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 5px;
}

.brain-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 4px;
}

.brain-video-grid span {
  display: grid;
  place-items: center;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(105, 101, 157, 0.55), rgba(48, 46, 70, 0.58));
  color: rgba(255, 255, 255, 0.75);
  font-size: 5px;
}

.brain-meeting-ended {
  position: absolute;
  inset: 22px 5px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  background: rgba(25, 22, 31, 0.88);
  opacity: 0;
  animation: brainMeetingEnd 14s ease-in-out infinite;
}

.brain-meeting-ended > i {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(201, 151, 107, 0.88);
  color: #fff;
  font-size: 6px;
  font-style: normal;
}

.brain-meeting-ended span {
  color: rgba(230, 220, 210, 0.45);
  font-size: 4.5px;
}

.brain-meeting-ended b {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 5.5px;
}

.brain-excel-formula {
  height: 12px;
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(230, 224, 216, 0.48);
  font-family: var(--font-mono);
  font-size: 4.2px;
  white-space: nowrap;
}

.brain-excel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
}

.brain-excel-grid i {
  min-height: 9px;
  padding: 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: rgba(232, 224, 215, 0.45);
  font-family: var(--font-mono);
  font-size: 4.3px;
  font-style: normal;
  text-align: center;
}

.brain-excel-grid i:nth-child(6),
.brain-excel-grid i:nth-child(9) {
  animation: brainCellUpdate 14s ease-in-out infinite;
}

.brain-slide-stage {
  position: relative;
  height: 41px;
  margin: 4px 18px 2px 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(248, 244, 238, 0.88);
}

.brain-slide {
  position: absolute;
  inset: 0;
  padding: 7px;
  color: #3f342d;
  animation: brainSlideAdvance 14s ease-in-out infinite;
}

.brain-slide-b {
  opacity: 0;
  animation-name: brainSlideAdvanceNext;
}

.brain-slide b {
  display: block;
  margin-bottom: 5px;
  font-size: 5.5px;
}

.brain-slide span {
  display: block;
  width: 78%;
  height: 2px;
  margin-top: 3px;
  background: rgba(93, 70, 55, 0.22);
}

.brain-slide span:last-child {
  width: 52%;
}

.brain-slide-thumbs {
  position: absolute;
  right: 4px;
  top: 23px;
  display: grid;
  gap: 3px;
}

.brain-slide-thumbs i {
  width: 10px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08);
}

.brain-cycle-demo {
  min-height: 310px;
}

.brain-app-sequence {
  position: absolute;
  z-index: 2;
  inset: 34px 8px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: #f4f4f0;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
  transition: opacity 0.6s ease;
}

.brain-app-sequence::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.68));
  pointer-events: none;
}

.brain-app-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f4f4f0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.55s ease, transform 0.8s ease;
}

.brain-cycle-demo[data-brain-phase="slack"] .brain-slack-stage,
.brain-cycle-demo[data-brain-phase="meet"] .brain-meet-stage,
.brain-cycle-demo[data-brain-phase="ppt"] .brain-ppt-stage {
  opacity: 1;
  transform: scale(1);
}

.brain-slack-video,
.brain-stage-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f6f4f1;
  filter: blur(1.35px) saturate(0.78) contrast(0.92);
  transform: scale(1.018);
}

.brain-stage-chip,
.brain-stage-complete {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 5px;
  background: rgba(20, 20, 20, 0.55);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
  color: #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brain-stage-chip {
  left: 8px;
  top: 8px;
}

.brain-stage-chip img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.brain-stage-chip b,
.brain-stage-complete b {
  font-size: 7px;
  font-weight: 650;
}

.brain-stage-chip small,
.brain-stage-complete small {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 5.5px;
}

.brain-stage-complete {
  right: 9px;
  bottom: 9px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.45s ease;
}

.brain-stage-complete i {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #84d3a8;
  color: #0b0b0b;
  font-size: 7px;
  font-style: normal;
}

.brain-meet-finalizing .brain-meet-stage .brain-stage-complete,
.brain-ppt-finalizing .brain-ppt-stage .brain-stage-complete {
  opacity: 1;
  transform: none;
}

.brain-facts > span,
.brain-memory-state {
  animation: none;
}

.brain-graph-active .brain-facts > span {
  animation: brainGraphFactReveal 4.2s ease var(--d) both;
}

.brain-memory-state {
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.brain-memory-ready .brain-memory-state {
  opacity: 1;
  transform: none;
}

.brain-night-label {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  top: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brain-night-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #84d3a8;
  box-shadow: 0 0 8px rgba(132, 211, 168, 0.55);
  animation: wt-blink 1.8s ease-in-out infinite;
}

.brain-night-label small {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.38);
  font-size: 6px;
}

.brain-network-canvas {
  position: absolute;
  z-index: 3;
  inset: 27px 0 12px;
  display: block;
  width: 100%;
  height: calc(100% - 39px);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.12));
}

.brain-facts {
  position: absolute;
  z-index: 4;
  inset: 28px 7px 18px;
  pointer-events: none;
}

.brain-facts > span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  grid-template-columns: 6px auto;
  column-gap: 4px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  animation: brainFactCycle 14s ease-in-out var(--d) infinite;
}

.brain-facts i {
  grid-row: 1 / span 2;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 0 10px rgba(255, 255, 255, 0.28);
}

.brain-facts b,
.brain-facts em {
  white-space: nowrap;
}

.brain-facts b {
  color: rgba(255, 255, 255, 0.9);
  font-size: 6.5px;
  font-weight: 520;
}

.brain-facts em {
  color: rgba(132, 211, 168, 0.78);
  font-size: 5.5px;
  font-style: normal;
}

.brain-memory-state {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: rgba(20, 20, 20, 0.72);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(4px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: brainMemoryCycle 14s ease-in-out infinite;
}

.brain-memory-state img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.brain-memory-state span {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 6.5px;
}

.brain-memory-state small {
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 5.5px;
}

.agent-execution-demo {
  position: relative;
  min-height: 280px;
  aspect-ratio: 1.75 / 1;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.08), transparent 33%),
    linear-gradient(145deg, #121212, #1a1a1a);
}

.agent-demo-head {
  position: absolute;
  z-index: 8;
  left: 10px;
  right: 10px;
  top: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 7px;
}

.agent-demo-head > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.55);
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.agent-demo-head > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #84d3a8;
  box-shadow: 0 0 7px rgba(132, 211, 168, 0.45);
  animation: wt-blink 1.4s ease-in-out infinite;
}

.agent-demo-head > b {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Inter", Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-demo-head > small {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.38);
  font-size: 6px;
  text-transform: uppercase;
}

.agent-workspace {
  position: absolute;
  z-index: 2;
  left: 9px;
  right: 9px;
  top: 38px;
  bottom: 31px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: #fbfbfa;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.agent-live-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f7f3ed;
}

.agent-app-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  transform: scale(1.015);
}

.agent-email-scene {
  --agent-color: #c34f46;
  --agent-color-soft: rgba(195, 79, 70, 0.14);
  animation: agentEmailScene 12s ease-in-out infinite;
}

.agent-slack-scene {
  --agent-color: #6b3375;
  --agent-color-soft: rgba(107, 51, 117, 0.14);
  animation: agentSlackScene 12s ease-in-out infinite;
}

.agent-cal-scene {
  --agent-color: #3170c6;
  --agent-color-soft: rgba(49, 112, 198, 0.14);
  animation: agentCalScene 12s ease-in-out infinite;
}

.agent-app-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
}

.agent-email-scene .agent-app-frame-start { animation: agentEmailFrameStart 12s linear infinite; }
.agent-email-scene .agent-app-frame-done { animation: agentEmailFrameDone 12s linear infinite; }
.agent-slack-scene .agent-app-frame-start { animation: agentSlackFrameStart 12s linear infinite; }
.agent-slack-scene .agent-app-frame-done { animation: agentSlackFrameDone 12s linear infinite; }
.agent-cal-scene .agent-app-frame-start { animation: agentCalFrameStart 12s linear infinite; }
.agent-cal-scene .agent-app-frame-done { animation: agentCalFrameDone 12s linear infinite; }

.agent-app-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.44);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%, rgba(29, 23, 19, 0.04));
  box-shadow: inset 0 0 36px rgba(36, 28, 22, 0.05);
  pointer-events: none;
}

.agent-work-note {
  position: absolute;
  z-index: 4;
  top: 7px;
  right: 7px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: min(58%, 245px);
  max-width: calc(100% - 14px);
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--agent-color) 34%, transparent);
  border-radius: 5px;
  background: rgba(252, 250, 247, 0.92);
  box-shadow: 0 8px 22px rgba(29, 23, 19, 0.14);
  backdrop-filter: blur(8px);
}

.agent-work-note > img,
.agent-calendar-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.agent-calendar-icon {
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #3170c6;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 6px;
}

.agent-work-note > span:nth-child(2) {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.agent-work-note b {
  overflow: hidden;
  color: #2b2723;
  font-size: clamp(6px, 1.75cqw, 9px);
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-work-note small {
  overflow: hidden;
  color: #80776f;
  font-family: var(--font-mono);
  font-size: clamp(4.75px, 1.2cqw, 6.5px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-work-note em {
  padding: 3px 5px;
  border-radius: 99px;
  background: var(--agent-color-soft);
  color: var(--agent-color);
  font-family: var(--font-mono);
  font-size: clamp(4.5px, 1.05cqw, 6px);
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}

.agent-pointer {
  position: absolute;
  z-index: 7;
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  min-width: 78px;
  min-height: 31px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}

.agent-pointer i {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(21px, 4.5cqw, 31px);
  height: clamp(27px, 5.7cqw, 39px);
  flex: none;
  clip-path: polygon(5% 2%, 7% 88%, 31% 68%, 48% 100%, 63% 91%, 47% 61%, 81% 61%);
  background: var(--agent-color);
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.95))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 5px 7px rgba(24, 19, 15, 0.28));
  font-style: normal;
  transform: rotate(-7deg);
}

.agent-pointer b {
  position: relative;
  z-index: 1;
  margin-top: clamp(14px, 3cqw, 21px);
  margin-left: clamp(-8px, -1.2cqw, -5px);
  padding: 4px 7px 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 4px;
  background: var(--agent-color);
  box-shadow: 0 5px 12px rgba(25, 19, 15, 0.22);
  font-family: var(--font-mono);
  font-size: clamp(5.5px, 1.45cqw, 8px);
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.agent-email-scene .agent-pointer {
  animation: agentEmailPointer 12s linear infinite;
}

.agent-slack-scene .agent-pointer {
  animation: agentSlackPointer 12s linear infinite;
}

.agent-cal-scene .agent-pointer {
  animation: agentCalPointer 12s linear infinite;
}

.agent-demo-progress {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 5.5px;
  transform: translateX(-50%);
}

.agent-demo-progress span {
  animation: agentProgressLabel 7.8s linear infinite;
}

.agent-demo-progress span:nth-of-type(2) { animation-name: agentProgressLabelTwo; }
.agent-demo-progress span:nth-of-type(3) { animation-name: agentProgressLabelThree; }

.agent-demo-progress > i {
  width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.agent-demo-result {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 6px;
  width: min(82%, 330px);
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(236, 239, 241, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 24px 55px rgba(0, 0, 0, 0.35);
  color: #0b0b0b;
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.94);
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
  animation: agentResultReveal 7.8s ease-in-out infinite;
}

.agent-demo-result > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.agent-demo-result > span i {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #2d7554;
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.agent-demo-result b {
  font-size: 9px;
  font-weight: 620;
}

.agent-demo-result small {
  color: rgba(11, 11, 11, 0.55);
  font-family: var(--font-mono);
  font-size: 5.75px;
}


.window-bar,
.deck-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

.window-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}

.sheet {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sheet div {
  min-height: 42px;
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.sheet div:nth-child(-n + 5),
.sheet div:nth-last-child(-n + 5) {
  background: #f4f4f0;
  font-weight: 600;
}

.deck-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  padding: 18px;
  background: linear-gradient(135deg, #181818, #5a5d54);
  color: #fff;
}

.deck-card strong {
  font-size: 24px;
  font-weight: 420;
}

.memory-map {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    #efefea;
  background-size: 36px 36px;
}

.memory-map span {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.memory-map span:nth-child(1) { left: 16%; top: 18%; }
.memory-map span:nth-child(2) { left: 48%; top: 34%; }
.memory-map span:nth-child(3) { left: 70%; top: 16%; }
.memory-map span:nth-child(4) { left: 29%; top: 58%; }
.memory-map span:nth-child(5) { left: 74%; top: 62%; }

.feature h3 {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 420;
  letter-spacing: 0;
}

.feature p {
  max-width: 620px;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Match industries: full-bleed bg, restrained heading scale, cool neutrals. */
section.highlights.highlights {
  max-width: none;
  margin: 0;
  padding: clamp(80px, 8vw, 120px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 15, 15, 0.08);
  border-bottom: 1px solid rgba(15, 15, 15, 0.08);
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
}

.highlights .section-heading {
  width: min(100%, 1600px);
  margin: 0 auto 32px;
  padding: 0 32px;
  box-sizing: border-box;
}

.highlights .section-heading .eyebrow {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.highlights .section-heading h2 {
  max-width: 768px;
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.highlights .highlight-grid {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.highlights .feature {
  border: 1px solid rgba(15, 15, 15, 0.08);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.highlights .feature h3 {
  margin-top: 18px;
  max-width: 400px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.highlights .feature p {
  max-width: 420px;
  margin: 16px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 24px;
}

.highlights .feature a {
  color: var(--muted);
  font-size: 14px;
}

.highlights .workflow-watchtower {
  border: 1px solid rgba(15, 15, 15, 0.08);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.55), transparent 36%),
    #ececeb;
  box-shadow: none;
}

.highlights .wt-root .map-board {
  border-color: rgba(15, 15, 15, 0.1);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
    rgba(248, 248, 247, 0.72);
  box-shadow: 0 18px 50px rgba(15, 15, 15, 0.05);
}

.highlights .wt-root .map-board::before,
.highlights .wt-root .map-axis,
.highlights .wt-root .map-legend {
  color: rgba(111, 111, 104, 0.72);
}

.highlights .wt-root .cell {
  border-color: rgba(15, 15, 15, 0.08);
  background: rgba(232, 232, 230, 0.88);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 2px 5px rgba(15, 15, 15, 0.025);
}

.highlights .wt-root .cell.route-node {
  border-color: rgba(45, 117, 84, 0.25);
  background: rgba(226, 237, 230, 0.76);
}

.highlights .wt-root .cell.review-node,
.highlights .wt-root .cell.reviewed {
  border-color: rgba(120, 120, 112, 0.42);
  background: rgba(236, 236, 233, 0.92);
}

.highlights .wt-root .cell.signal {
  border-color: rgba(45, 117, 84, 0.42);
  background: rgba(45, 117, 84, 0.14);
  box-shadow: 0 0 0 4px rgba(45, 117, 84, 0.08), 0 12px 30px rgba(15, 15, 15, 0.1);
}

.highlights .wt-root .panel {
  border-color: rgba(15, 15, 15, 0.1);
  background: #fbfbfa;
  box-shadow: 0 30px 80px rgba(15, 15, 15, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.highlights .brain-cycle-demo {
  border: 1px solid rgba(15, 15, 15, 0.08);
  background:
    radial-gradient(circle at 52% 46%, rgba(255, 255, 255, 0.68), transparent 42%),
    linear-gradient(145deg, #f0f0ef, #e4e4e2 62%, #ececeb);
  color: var(--ink);
  box-shadow: none;
}

.highlights .brain-cycle-demo::after {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(244, 245, 242, 0.08), rgba(230, 232, 229, 0.28));
}

.highlights .brain-app-scene {
  border-color: rgba(15, 15, 15, 0.11);
  background: rgba(255, 255, 253, 0.72);
  box-shadow: 0 5px 15px rgba(20, 20, 20, 0.06);
}

.highlights .brain-app-scene header {
  border-bottom-color: rgba(15, 15, 15, 0.08);
  background: rgba(15, 15, 15, 0.025);
}

.highlights .brain-app-scene header b {
  color: rgba(15, 15, 15, 0.76);
}

.highlights .brain-app-scene header small {
  color: rgba(15, 15, 15, 0.43);
}

.highlights .brain-slack-scroll p {
  color: rgba(15, 15, 15, 0.58);
}

.highlights .brain-slack-scroll p > i {
  background: rgba(15, 15, 15, 0.08);
  color: rgba(15, 15, 15, 0.66);
}

.highlights .brain-slack-scroll p b {
  color: rgba(15, 15, 15, 0.78);
}

.highlights .brain-video-grid span {
  background: linear-gradient(145deg, rgba(214, 215, 211, 0.95), rgba(174, 177, 174, 0.88));
  color: rgba(15, 15, 15, 0.66);
}

.highlights .brain-meeting-ended {
  border-color: rgba(15, 15, 15, 0.1);
  background: rgba(249, 249, 246, 0.92);
}

.highlights .brain-meeting-ended > i {
  background: #222;
}

.highlights .brain-meeting-ended span {
  color: rgba(15, 15, 15, 0.48);
}

.highlights .brain-meeting-ended b {
  color: rgba(15, 15, 15, 0.78);
}

.highlights .brain-excel-formula,
.highlights .brain-excel-grid i {
  border-color: rgba(15, 15, 15, 0.07);
  color: rgba(15, 15, 15, 0.5);
}

.highlights .brain-slide-thumbs i {
  border-color: rgba(15, 15, 15, 0.1);
  background: rgba(15, 15, 15, 0.05);
}

.highlights .brain-app-sequence {
  border-color: rgba(255, 255, 255, 0.09);
  background: #ececeb;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.highlights .brain-app-sequence::after {
  background:
    radial-gradient(circle at 52% 46%, rgba(45, 117, 84, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.44), rgba(16, 16, 16, 0.68));
  backdrop-filter: blur(1.8px);
  -webkit-backdrop-filter: blur(1.8px);
}

.highlights .brain-app-stage,
.highlights .brain-stage-media,
.highlights .brain-slack-video {
  background: #ececeb;
}

.highlights .brain-stage-media,
.highlights .brain-slack-video {
  filter: blur(2.6px) saturate(0.72) brightness(0.72) contrast(0.94);
  transform: scale(1.04);
}

.highlights .brain-stage-chip,
.highlights .brain-stage-complete {
  border-color: rgba(36, 29, 24, 0.12);
  background: rgba(251, 250, 248, 0.9);
  box-shadow: 0 9px 24px rgba(38, 28, 21, 0.13);
  color: #312a24;
}

.highlights .brain-stage-chip small,
.highlights .brain-stage-complete small {
  color: #82776d;
}

.highlights .brain-stage-complete i {
  background: #c98f62;
  color: #fff;
}

.highlights .brain-night-label {
  color: rgba(20, 20, 20, 0.72);
}

.highlights .brain-night-label small {
  color: rgba(20, 20, 20, 0.4);
}

.highlights .brain-night-label i {
  background: #111;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}

.highlights .brain-network-canvas {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

.highlights .brain-facts i {
  background: #111;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06), 0 0 10px rgba(0, 0, 0, 0.24);
}

.highlights .brain-facts b {
  color: rgba(15, 15, 15, 0.9);
}

.highlights .brain-facts em {
  color: rgba(15, 15, 15, 0.5);
}

.highlights .brain-memory-state {
  border-color: rgba(15, 15, 15, 0.12);
  background: rgba(251, 251, 250, 0.88);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.highlights .brain-memory-state img {
  filter: invert(1);
}

.highlights .brain-memory-state span {
  color: rgba(15, 15, 15, 0.86);
}

.highlights .brain-memory-state small {
  border-color: rgba(15, 15, 15, 0.1);
  color: rgba(15, 15, 15, 0.45);
}

.highlights .agent-execution-demo {
  border: 1px solid rgba(15, 15, 15, 0.08);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.92), transparent 33%),
    linear-gradient(145deg, #efefee, #e2e2e0);
  box-shadow: none;
}

.highlights .agent-demo-head {
  color: var(--muted);
}

.highlights .agent-demo-head > span {
  border-color: rgba(15, 15, 15, 0.1);
  background: rgba(255, 255, 255, 0.65);
}

.highlights .agent-demo-head > b {
  color: var(--ink);
}

.highlights .agent-demo-head > small {
  color: var(--muted);
}

.highlights .agent-workspace {
  border-color: rgba(15, 15, 15, 0.1);
  background: #fbfbfa;
  box-shadow: 0 18px 38px rgba(15, 15, 15, 0.08);
}

.highlights .agent-live-video {
  filter: none;
}

.highlights .agent-demo-progress {
  color: #8e8277;
}

.highlights .agent-demo-progress > i {
  background: rgba(58, 47, 39, 0.18);
}

.highlights .agent-demo-result {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(19, 17, 15, 0.94);
  box-shadow: 0 24px 55px rgba(35, 25, 18, 0.28);
  color: #fff;
}

.highlights .agent-demo-result small {
  color: rgba(255, 255, 255, 0.55);
}

section.aos-system.aos-system {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-top: 1px solid rgba(15, 15, 15, 0.08);
  border-bottom: 1px solid rgba(15, 15, 15, 0.08);
  background: #efefed;
}

.aos-layout {
  --aos-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, 480px) minmax(0, 1fr);
  width: min(100%, 1600px);
  min-height: 490vh;
  margin: 0 auto;
  padding: 0 24px;
}

.aos-tabs {
  position: sticky;
  top: 150px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  align-self: start;
  padding-top: 70px;
}

.aos-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 24px;
  align-items: center;
  width: max-content;
  min-height: 42px;
  padding: 8px 9px 8px 16px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 24px;
  background: rgba(20, 20, 20, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  text-align: left;
  backdrop-filter: blur(27.5px);
  -webkit-backdrop-filter: blur(27.5px);
  cursor: pointer;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1), min-height 420ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 420ms ease, background-color 220ms ease;
}

.aos-tab:hover {
  background: rgba(10, 10, 10, 0.62);
}

.aos-tab:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.aos-tab.active {
  grid-template-columns: 1fr;
  align-content: start;
  width: min(100%, 480px);
  min-height: 126px;
  padding: 17px 24px 20px;
  border-color: rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(20, 20, 20, 0.5);
}

.aos-tab-label {
  font-size: 13px;
  font-weight: 450;
  line-height: 1.25;
  white-space: nowrap;
}

.aos-tab-description {
  grid-column: 1;
  max-width: 410px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transition: max-height 320ms ease, margin-top 320ms ease, opacity 220ms ease 80ms;
}

.aos-tab.active .aos-tab-description {
  max-height: 72px;
  margin-top: 13px;
  opacity: 1;
}

.aos-tab[data-title="The Context Substrate"].active {
  min-height: 238px;
}

.aos-tab[data-title="The Context Substrate"].active .aos-tab-description {
  max-height: 180px;
}

.aos-tab[data-title="The Context Substrate"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="The Context Substrate"] .aos-tab-description > span {
  display: block;
}

.aos-tab[data-title="Sense-Making"].active {
  min-height: 218px;
}

.aos-tab[data-title="Sense-Making"].active .aos-tab-description {
  max-height: 155px;
}

.aos-tab[data-title="Sense-Making"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="Sense-Making"] .aos-tab-description > span {
  display: block;
}

.aos-tab[data-title="Procedural Memory"].active {
  min-height: 238px;
}

.aos-tab[data-title="Procedural Memory"].active .aos-tab-description {
  max-height: 180px;
}

.aos-tab[data-title="Procedural Memory"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="Procedural Memory"] .aos-tab-description > span {
  display: block;
}

.aos-tab[data-title="The Execution Layer"].active {
  min-height: 238px;
}

.aos-tab[data-title="The Execution Layer"].active .aos-tab-description {
  max-height: 180px;
}

.aos-tab[data-title="The Execution Layer"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="The Execution Layer"] .aos-tab-description > span {
  display: block;
}

.aos-tab[data-title="The Firm's World Model"].active {
  min-height: 238px;
}

.aos-tab[data-title="The Firm's World Model"].active .aos-tab-description {
  max-height: 180px;
}

.aos-tab[data-title="The Firm's World Model"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="The Firm's World Model"] .aos-tab-description > span {
  display: block;
}

.aos-tab[data-title="Governance & Security"].active {
  min-height: 238px;
}

.aos-tab[data-title="Governance & Security"].active .aos-tab-description {
  max-height: 180px;
}

.aos-tab[data-title="Governance & Security"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="Governance & Security"] .aos-tab-description > span {
  display: block;
}

.aos-tab[data-title="Context Labs"].active {
  min-height: 238px;
}

.aos-tab[data-title="Context Labs"].active .aos-tab-description {
  max-height: 180px;
}

.aos-tab[data-title="Context Labs"] .aos-tab-description strong {
  display: block;
  margin-bottom: 11px;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aos-tab[data-title="Context Labs"] .aos-tab-description > span {
  display: block;
}

.aos-tab-plus {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.aos-tab-plus::before,
.aos-tab-plus::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 8px;
  height: 1px;
  background: #fff;
}

.aos-tab-plus::after {
  transform: rotate(90deg);
}

.aos-tab.active .aos-tab-plus {
  display: none;
}

.aos-visual {
  position: sticky;
  top: 112px;
  display: grid;
  place-items: center;
  min-width: 0;
  height: calc(100vh - 112px);
  min-height: 620px;
  perspective: 1350px;
  perspective-origin: 54% 42%;
}

/* JS toggles this under 981px so the cube never paints or animates on mobile. */
section.aos-system.aos-tabs-only .aos-visual,
section.aos-system.aos-tabs-only .aos-controls {
  display: none !important;
}

section.aos-system.aos-tabs-only .aos-layout {
  min-height: 0 !important;
  height: auto;
}

.aos-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.aos-platform,
.aos-platform-shadow {
  position: absolute;
  left: 53%;
  top: 51%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 52px;
  transform-style: preserve-3d;
}

.aos-platform-shadow {
  top: 58%;
  border-radius: 46px;
  background: rgba(82, 88, 92, 0.28);
  filter: blur(26px);
  opacity: calc(0.08 + (var(--aos-progress) * 0.34));
  transform: translate(-50%, -4%) rotateX(59deg) scale(calc(0.8 + (var(--aos-progress) * 0.16)));
}

.aos-platform {
  --layer-reveal: 0;
  --layer-opacity: 0;
  --layer-lift: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(236, 239, 241, 0.32) 52%, rgba(209, 214, 218, 0.48));
  box-shadow:
    inset 0 0 0 1px rgba(168, 176, 181, 0.22),
    inset 0 16px 28px rgba(255, 255, 255, 0.72),
    inset 0 -18px 30px rgba(151, 159, 165, 0.2),
    0 6px 0 rgba(189, 196, 201, 0.54),
    0 12px 0 rgba(245, 247, 248, 0.72),
    0 18px 0 rgba(152, 160, 166, 0.42),
    0 30px 38px rgba(77, 84, 89, 0.18);
  backdrop-filter: blur(16px) saturate(0.72);
  -webkit-backdrop-filter: blur(16px) saturate(0.72);
  opacity: var(--layer-opacity);
  transform:
    translate(-50%, -50%)
    translateY(calc(((1 - var(--layer-reveal)) * -560px) + var(--settled-y, 0px)))
    rotateX(59deg)
    translateZ(calc((var(--layer-offset) * 20px) + ((1 - var(--layer-reveal)) * 120px)))
    scale(calc(0.94 + (var(--layer-reveal) * 0.06)));
  transition: filter 220ms ease;
}

.aos-platform::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 44px;
  box-shadow:
    inset 0 0 0 1px rgba(111, 121, 128, 0.12),
    inset 0 0 34px rgba(255, 255, 255, 0.52);
  pointer-events: none;
}

.aos-platform::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 50px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.52), transparent 30%, transparent 68%, rgba(116, 125, 131, 0.18));
  pointer-events: none;
}

.aos-platform-title {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 4;
  display: block;
  min-width: 112px;
  padding: 5px 11px;
  border: 1px solid rgba(119, 127, 133, 0.3);
  border-radius: 4px;
  background: rgba(241, 243, 244, 0.9);
  color: rgba(48, 53, 57, 0.74);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 44px) translateZ(26px) rotateX(-59deg);
  transition: opacity 180ms ease;
}

.aos-layer:not(.active-layer) .aos-platform-title {
  opacity: 0;
}

.aos-layer.active-layer {
  filter: drop-shadow(0 30px 26px rgba(55, 62, 67, 0.12));
}

.aos-layer.active-layer .aos-platform-title {
  opacity: calc(var(--layer-reveal) * 0.9);
}

.aos-c-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-style: preserve-3d;
}

.aos-c-dot {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--dot-size, 14px);
  height: var(--dot-size, 14px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  background:
    radial-gradient(circle at 34% 24%, #fff 0 9%, #d9dde0 27%, #8f979d 61%, #f1f3f4 100%);
  box-shadow:
    inset -3px -5px 8px rgba(74, 82, 87, 0.26),
    inset 3px 4px 7px rgba(255, 255, 255, 0.76),
    0 8px 10px rgba(52, 59, 64, 0.2);
  opacity: calc((0.28 + (var(--layer-reveal) * 0.72)) * var(--dot-alpha, 1));
  transform: none;
}

.integration-layer .aos-c-dot {
  display: grid;
  place-items: center;
  width: var(--dot-size, 28px);
  height: var(--dot-size, 28px);
  padding: 3px;
  border: 1px solid rgba(97, 105, 111, 0.2);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 4px rgba(255, 255, 255, 0.9),
    0 7px 12px rgba(60, 66, 70, 0.17);
}

.integration-layer .aos-c-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.research-layer .aos-c-dot {
  border-color: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 34% 24%, #fff 0 12%, #e8edf1 30%, #9da9b1 64%, #f5f7f8 100%);
  box-shadow:
    inset -3px -5px 8px rgba(74, 91, 102, 0.2),
    inset 3px 4px 7px rgba(255, 255, 255, 0.82),
    0 7px 10px rgba(63, 81, 92, 0.18);
}

.research-layer .aos-research-evidence-node {
  border-color: rgba(130, 176, 205, 0.72);
  background:
    radial-gradient(circle at 34% 24%, #fff 0 14%, #dcebf4 33%, #7398ae 67%, #eff7fb 100%);
  box-shadow:
    inset -3px -4px 7px rgba(59, 93, 115, 0.22),
    inset 3px 3px 6px rgba(255, 255, 255, 0.88),
    0 0 0 3px rgba(145, 194, 224, 0.08),
    0 8px 13px rgba(74, 107, 128, 0.24);
}

.aos-research-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity 260ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-research-overlay {
  opacity: calc(var(--layer-reveal));
}

.aos-research-projection {
  position: absolute;
  left: 29%;
  top: 4%;
  z-index: 1;
  width: 42%;
  height: 58%;
  border-radius: 28px 28px 42% 42%;
  background:
    linear-gradient(180deg, rgba(196, 225, 241, 0.4), rgba(178, 213, 234, 0.12) 57%, transparent),
    radial-gradient(ellipse at 50% 24%, rgba(228, 245, 255, 0.52), transparent 66%);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  filter: blur(1.2px);
  opacity: 0.76;
  transform: translateZ(3px);
}

.aos-research-ground-map {
  position: absolute;
  left: -25%;
  top: 0;
  z-index: 2;
  width: 150%;
  height: 100%;
  overflow: visible;
  transform: translateZ(9px);
}

.aos-research-intake-line,
.aos-research-mesh-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 2;
  stroke-dashoffset: 0;
  animation: aos-research-route 5.5s linear infinite;
  animation-delay: var(--route-delay, 0ms);
}

.aos-research-intake-line {
  stroke: rgba(99, 145, 174, 0.38);
  stroke-width: 0.8;
}

.aos-research-mesh-line {
  stroke: rgba(101, 143, 169, 0.3);
  stroke-width: 0.62;
  stroke-dasharray: 2 3;
}

.aos-research-junction {
  fill: rgba(232, 243, 250, 0.96);
  stroke: rgba(101, 143, 169, 0.52);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(113, 162, 193, 0.5));
}

.aos-research-source-halo {
  fill: rgba(177, 217, 241, 0.08);
  stroke: rgba(113, 164, 195, 0.54);
  stroke-width: 0.52;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: aos-research-halo 2.8s ease-in-out infinite;
  animation-delay: var(--route-delay, 0ms);
}

.aos-research-packet {
  fill: rgba(222, 242, 253, 0.98);
  stroke: rgba(72, 126, 161, 0.64);
  stroke-width: 0.32;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(93, 156, 196, 0.62));
}

.aos-research-signal {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 4px;
  border: 1px solid rgba(126, 150, 164, 0.28);
  border-radius: 8px;
  background: rgba(250, 251, 252, 0.94);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.92),
    0 6px 11px rgba(61, 81, 94, 0.16);
  transform: translate(-50%, -50%) translateZ(15px);
  opacity: 0;
  animation: aos-research-signal-in 400ms var(--motion-ease-out, ease) forwards;
  animation-delay: var(--signal-delay, 0ms);
}

.aos-research-signal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aos-research-signal-pdf {
  padding: 3px;
}

.aos-research-file-type {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(145deg, #ef5b55, #c93535);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.32);
  color: #fff;
  font-size: 6px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
}

.aos-research-elevation {
  position: absolute;
  left: 53%;
  top: 33%;
  z-index: 20;
  width: min(29vw, 380px);
  height: min(32vw, 420px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -48%) translateY(14px) scale(0.96);
  transform-style: preserve-3d;
  transition:
    opacity 260ms var(--motion-ease-out, ease),
    transform 520ms var(--motion-ease-out, ease),
    visibility 0s linear 520ms;
  pointer-events: none;
}

.aos-research-elevation.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -48%) translateY(0) scale(1);
  transition-delay: 80ms, 80ms, 0s;
}

.aos-research-uplinks {
  position: absolute;
  inset: 0 -14% -7%;
  z-index: 1;
  width: 128%;
  height: 107%;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(102, 157, 192, 0.2));
}

.aos-research-uplinks path {
  fill: none;
  stroke: rgba(77, 137, 175, 0.64);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2.4 1.3;
  animation: aos-research-wire-in 900ms var(--motion-ease-out, ease) both;
  animation-delay: var(--wire-delay, 0ms);
}

.aos-synthesis-card {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 78%;
  padding: 12px 14px 11px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 13px;
  background:
    linear-gradient(155deg, rgba(250, 252, 253, 0.96), rgba(222, 236, 244, 0.86) 52%, rgba(190, 215, 229, 0.72)),
    rgba(224, 237, 245, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -18px 28px rgba(135, 175, 199, 0.1),
    0 16px 34px rgba(45, 70, 86, 0.16);
  backdrop-filter: blur(13px) saturate(1.05);
  -webkit-backdrop-filter: blur(13px) saturate(1.05);
  color: rgba(37, 51, 60, 0.88);
  transform: translateZ(2px);
}

.aos-synthesis-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 9px;
  pointer-events: none;
}

.aos-synthesis-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: rgba(55, 74, 86, 0.6);
  font-size: clamp(5px, 0.43vw, 7px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aos-synthesis-header strong {
  padding: 3px 5px;
  border: 1px solid rgba(99, 139, 162, 0.18);
  border-radius: 999px;
  background: rgba(246, 250, 252, 0.5);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.aos-synthesis-card h3 {
  position: relative;
  margin: 2px 0 0;
  color: rgba(30, 43, 51, 0.9);
  font-size: clamp(8px, 0.82vw, 12px);
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.aos-synthesis-title {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(104, 137, 157, 0.18);
}

.aos-synthesis-title small {
  display: block;
  color: rgba(48, 111, 150, 0.84);
  font-size: clamp(5px, 0.43vw, 6.5px);
  font-weight: 650;
  letter-spacing: 0.04em;
}

.aos-synthesis-title > b {
  flex: 0 0 auto;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(71, 121, 151, 0.08);
  color: rgba(48, 91, 117, 0.72);
  font-size: 5.5px;
  font-weight: 650;
}

.aos-synthesis-question {
  position: relative;
  padding: 8px 7px 7px;
  border-bottom: 1px solid rgba(104, 137, 157, 0.16);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent);
}

.aos-synthesis-question small {
  display: block;
  margin-bottom: 3px;
  color: rgba(54, 74, 87, 0.56);
  font-size: clamp(4.5px, 0.38vw, 5.8px);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aos-synthesis-question p {
  margin: 0;
  color: rgba(35, 53, 64, 0.82);
  font-size: clamp(5.5px, 0.52vw, 7.8px);
  font-weight: 540;
  line-height: 1.25;
}

.aos-synthesis-workstream {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(104, 137, 157, 0.13);
}

.aos-synthesis-workstream > span {
  display: inline-grid;
  grid-template-columns: 6px auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.aos-synthesis-workstream b,
.aos-synthesis-workstream > strong {
  color: rgba(38, 55, 65, 0.82);
  font-size: clamp(5.5px, 0.5vw, 7.5px);
  font-weight: 600;
}

.aos-synthesis-workstream > strong {
  color: rgba(54, 74, 87, 0.5);
  font-size: clamp(4.5px, 0.4vw, 6px);
  font-weight: 520;
}

.aos-synthesis-workstream small {
  overflow: hidden;
  color: rgba(54, 74, 87, 0.48);
  font-size: clamp(4.5px, 0.39vw, 5.8px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workstream-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6e9db5;
  box-shadow: 0 0 0 2px rgba(110, 157, 181, 0.12);
}

.interview-dot { background: #7e91b6; }
.contract-dot { background: #73a28b; }
.judgment-dot { background: #9a839f; }

.aos-synthesis-steer {
  position: relative;
  margin-top: 7px;
  padding: 7px 8px;
  border-left: 2px solid rgba(65, 120, 151, 0.46);
  border-radius: 0 5px 5px 0;
  background: rgba(247, 251, 253, 0.42);
}

.aos-synthesis-steer small {
  display: block;
  margin-bottom: 3px;
  color: rgba(48, 111, 150, 0.82);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aos-synthesis-steer p {
  margin: 0;
  color: rgba(38, 55, 65, 0.72);
  font-size: clamp(5px, 0.46vw, 6.8px);
  line-height: 1.3;
}

.aos-synthesis-card footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  color: rgba(54, 74, 87, 0.56);
  font-size: clamp(4.5px, 0.42vw, 6px);
  line-height: 1;
}

.aos-synthesis-card footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.aos-synthesis-card footer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #75a98e;
  box-shadow: 0 0 0 2px rgba(117, 169, 142, 0.12);
}

.aos-synthesis-card footer b {
  color: rgba(47, 87, 69, 0.7);
  font-weight: 650;
}

@keyframes aos-research-route {
  to { stroke-dashoffset: -30; }
}

@keyframes aos-research-halo {
  0%, 100% { opacity: 0.45; transform: scale(0.88); }
  50% { opacity: 0.9; transform: scale(1.2); }
}

@keyframes aos-research-signal-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateZ(15px) scale(0.82); }
  to { opacity: 0.78; transform: translate(-50%, -50%) translateZ(15px) scale(1); }
}

@keyframes aos-research-wire-in {
  from { opacity: 0; stroke-dashoffset: 18; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aos-research-intake-line,
  .aos-research-mesh-line,
  .aos-research-source-halo,
  .aos-research-signal,
  .aos-research-uplinks path {
    animation: none;
  }

  .aos-research-signal { opacity: 0.78; }
  .aos-research-packet { display: none; }
}

.sense-layer .aos-c-dot {
  background:
    radial-gradient(circle at 34% 24%, #fff 0 10%, #e8e6ec 28%, #aaa3b2 63%, #f6f4f8 100%);
}

.sense-layer .aos-c-dot:nth-child(7n + 1),
.sense-layer .aos-c-dot:nth-child(11n + 4) {
  border-color: rgba(210, 178, 234, 0.72);
  background:
    radial-gradient(circle at 34% 24%, #fff 0 9%, #d7b9eb 26%, #72448e 61%, #e9dbf2 100%);
  box-shadow:
    inset -3px -5px 8px rgba(78, 45, 99, 0.3),
    inset 3px 4px 7px rgba(255, 255, 255, 0.76),
    0 0 15px rgba(154, 82, 195, 0.36);
}

.aos-sense-elevation {
  position: absolute;
  left: 53%;
  top: 40%;
  z-index: 22;
  width: min(52vw, 700px);
  height: min(34vw, 455px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -48%) translateY(20px) scale(0.97);
  transform-origin: 50% 84%;
  transition:
    opacity 260ms var(--motion-ease-out, ease),
    transform 560ms var(--motion-ease-out, ease),
    visibility 0s linear 560ms;
}

.aos-sense-elevation.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -48%) translateY(0) scale(1);
  transition-delay: 70ms, 70ms, 0s;
}

.aos-sense-elevation::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -3%;
  height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(72, 64, 107, 0.18), rgba(108, 91, 145, 0.05) 50%, transparent 73%);
  filter: blur(9px);
}

.sense-graph-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 24px;
  background:
    radial-gradient(circle at 74% 18%, rgba(199, 183, 227, 0.31), transparent 34%),
    radial-gradient(circle at 22% 86%, rgba(176, 207, 226, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(249, 250, 251, 0.96), rgba(232, 234, 240, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -30px 60px rgba(116, 124, 145, 0.08),
    0 24px 48px rgba(52, 55, 70, 0.16);
  backdrop-filter: blur(18px) saturate(0.9);
  -webkit-backdrop-filter: blur(18px) saturate(0.9);
  color: #343441;
}

.sense-graph-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(83, 85, 105, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 85, 105, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 88%);
  pointer-events: none;
}

.sense-graph-head {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 13px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(57, 57, 70, 0.5);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sense-graph-head b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(90, 99, 84, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: rgba(67, 91, 68, 0.76);
  font-size: 7px;
  letter-spacing: 0.07em;
}

.sense-graph-head b i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #769f72;
  box-shadow: 0 0 0 3px rgba(118, 159, 114, 0.12);
  animation: sense-status-pulse 1.8s ease-in-out infinite;
}

.sense-graph-lines {
  position: absolute;
  inset: 28px 0 0;
  z-index: 1;
  width: 100%;
  height: calc(100% - 28px);
  overflow: visible;
}

.sense-link {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 5;
  stroke-width: 1.15;
  opacity: 0.7;
  stroke-dashoffset: 0;
  animation: sense-link-flow 6s linear infinite;
}

.sense-link-causal { stroke: rgba(131, 97, 168, 0.7); }
.sense-link-temporal { stroke: rgba(75, 129, 163, 0.64); animation-direction: reverse; }
.sense-link-evidence { stroke: rgba(103, 108, 129, 0.36); stroke-width: 0.8; }
.sense-link-judgment { stroke: rgba(164, 111, 126, 0.54); }

.sense-packet {
  fill: #fff;
  stroke: rgba(105, 78, 139, 0.74);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(111, 79, 151, 0.72));
}

.sense-packet-b {
  stroke: rgba(58, 114, 149, 0.76);
  filter: drop-shadow(0 0 4px rgba(58, 114, 149, 0.62));
}

.sense-source {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px 0 17px;
  border: 1px solid rgba(80, 83, 99, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 12px rgba(55, 58, 72, 0.08);
  color: rgba(55, 57, 70, 0.66);
  font-size: 7px;
  font-weight: 550;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 480ms var(--motion-ease-out, ease);
}

.sense-source::before {
  content: "";
  position: absolute;
  left: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8890af;
}

.sense-source-a { left: 4%; top: 17%; transition-delay: 100ms; }
.sense-source-b { left: 2%; top: 67%; transition-delay: 180ms; }
.sense-source-c { right: 3%; top: 44%; transition-delay: 260ms; }

.sense-node {
  position: absolute;
  z-index: 4;
  width: 144px;
  min-height: 61px;
  padding: 9px 11px 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 13px;
  background: rgba(248, 248, 250, 0.84);
  box-shadow:
    inset 3px 0 0 var(--node-tone),
    0 10px 18px rgba(55, 57, 72, 0.1);
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.88);
  transition:
    opacity 320ms ease var(--node-delay),
    transform 620ms cubic-bezier(0.2, 0.82, 0.22, 1.08) var(--node-delay);
}

.sense-node::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: var(--node-tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-tone) 16%, transparent);
  transform: translateX(-50%);
}

.sense-node small,
.sense-node strong,
.sense-node span {
  display: block;
}

.sense-node small {
  margin-bottom: 5px;
  color: var(--node-tone);
  font-size: 6.5px;
  font-weight: 720;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sense-node strong {
  color: rgba(44, 44, 54, 0.92);
  font-size: 10px;
  font-weight: 620;
  line-height: 1.05;
}

.sense-node span {
  margin-top: 4px;
  color: rgba(55, 57, 70, 0.48);
  font-size: 7px;
  line-height: 1.15;
}

.sense-node-entity { left: 15%; top: 29%; --node-tone: #7884b2; --node-delay: 120ms; }
.sense-node-cause { left: 39%; top: 43%; --node-tone: #8b62a7; --node-delay: 200ms; }
.sense-node-time { left: 56%; top: 30%; --node-tone: #667cae; --node-delay: 280ms; }
.sense-node-pattern { left: 28%; top: 72%; --node-tone: #6290a8; --node-delay: 360ms; }
.sense-node-event { left: 60%; top: 73%; --node-tone: #8b73a6; --node-delay: 440ms; }
.sense-node-judgment { left: 86%; top: 63%; --node-tone: #a06f7d; --node-delay: 520ms; }

.sense-conclusion {
  position: absolute;
  right: 3.5%;
  top: 10%;
  z-index: 7;
  width: 205px;
  padding: 11px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(230, 222, 240, 0.91));
  box-shadow: 0 16px 28px rgba(67, 56, 79, 0.14);
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: opacity 360ms ease 640ms, transform 600ms var(--motion-ease-out, ease) 640ms;
}

.sense-conclusion header,
.sense-conclusion footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sense-conclusion header {
  margin-bottom: 7px;
  color: rgba(62, 55, 72, 0.48);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sense-conclusion header b {
  color: rgba(82, 105, 83, 0.72);
  font-size: 5.5px;
}

.sense-conclusion > strong {
  display: block;
  color: rgba(43, 39, 48, 0.92);
  font-size: 12px;
  font-weight: 620;
}

.sense-conclusion p {
  margin: 5px 0 8px;
  color: rgba(55, 51, 62, 0.58);
  font-size: 7px;
  line-height: 1.35;
}

.sense-conclusion footer {
  justify-content: flex-start;
  padding-top: 7px;
  border-top: 1px solid rgba(84, 72, 96, 0.1);
  color: rgba(65, 62, 72, 0.5);
  font-size: 6px;
}

.sense-conclusion footer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #779b76;
}

.aos-sense-elevation.active .sense-source,
.aos-sense-elevation.active .sense-node,
.aos-sense-elevation.active .sense-conclusion {
  opacity: 1;
}

.aos-sense-elevation.active .sense-source { transform: translateY(0); }
.aos-sense-elevation.active .sense-node { transform: translate(-50%, -50%) scale(1); }
.aos-sense-elevation.active .sense-conclusion { transform: translateY(0) scale(1); }

@keyframes sense-link-flow {
  to { stroke-dashoffset: -54; }
}

@keyframes sense-status-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .sense-link,
  .sense-graph-head b i { animation: none; }

  .sense-packet { display: none; }
}

/* Sense-making inherits the substrate's projection grammar. */
.aos-sense-ground {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transform: translateZ(12px);
  transition: opacity 280ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-sense-ground {
  opacity: calc(var(--layer-reveal));
}

.sense-ground-link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  stroke-dasharray: 3 2.5;
  animation: sense-ground-flow 5.5s linear infinite;
}

.sense-ground-causal { stroke: rgba(126, 82, 162, 0.64); }
.sense-ground-temporal { stroke: rgba(75, 132, 165, 0.6); animation-direction: reverse; }
.sense-ground-trace { stroke: rgba(110, 109, 132, 0.32); stroke-width: 0.68; }

.sense-ground-node {
  fill: rgba(247, 238, 253, 0.98);
  stroke: rgba(118, 72, 151, 0.76);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(127, 75, 163, 0.62));
}

.sense-ground-node-blue {
  fill: rgba(232, 245, 252, 0.98);
  stroke: rgba(65, 121, 155, 0.76);
  filter: drop-shadow(0 0 2px rgba(65, 121, 155, 0.58));
}

.sense-ground-packet {
  fill: #fff;
  stroke: rgba(112, 70, 144, 0.82);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(128, 79, 164, 0.68));
}

.sense-ground-packet-blue {
  stroke: rgba(58, 116, 151, 0.82);
  filter: drop-shadow(0 0 2px rgba(58, 116, 151, 0.64));
}

.aos-sense-elevation {
  left: 53%;
  top: 33%;
  width: min(29vw, 380px);
  height: min(32vw, 420px);
  transform: translate(-50%, -48%) translateY(14px) scale(0.96);
  transform-origin: 50% 100%;
}

.aos-sense-elevation.active {
  transform: translate(-50%, -48%) translateY(0) scale(1);
}

.aos-sense-elevation::before {
  left: 8%;
  right: 8%;
  bottom: 27%;
  height: 14%;
  background: radial-gradient(ellipse, rgba(86, 62, 112, 0.14), rgba(112, 86, 140, 0.035) 52%, transparent 74%);
  filter: blur(7px);
}

.aos-sense-uplinks {
  position: absolute;
  inset: 0 -14% -7%;
  z-index: 1;
  width: 128%;
  height: 107%;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(122, 94, 151, 0.2));
}

.aos-sense-uplinks path {
  fill: none;
  stroke: rgba(112, 83, 143, 0.58);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2.4 1.3;
  animation: aos-research-wire-in 900ms var(--motion-ease-out, ease) both;
  animation-delay: var(--wire-delay, 0ms);
}

.aos-sense-card {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 64%;
  padding: 12px 14px 11px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 13px;
  background:
    radial-gradient(circle at 85% 12%, rgba(220, 201, 236, 0.46), transparent 38%),
    linear-gradient(155deg, rgba(252, 251, 253, 0.97), rgba(230, 226, 238, 0.9) 56%, rgba(208, 213, 230, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -18px 28px rgba(112, 92, 136, 0.08),
    0 16px 34px rgba(54, 46, 67, 0.16);
  backdrop-filter: blur(13px) saturate(1.02);
  -webkit-backdrop-filter: blur(13px) saturate(1.02);
  color: rgba(45, 41, 52, 0.88);
}

.aos-sense-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 9px;
  pointer-events: none;
}

.aos-sense-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: rgba(70, 61, 80, 0.58);
  font-size: clamp(5px, 0.43vw, 7px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aos-sense-card-header strong {
  padding: 3px 5px;
  border: 1px solid rgba(116, 91, 140, 0.17);
  border-radius: 999px;
  background: rgba(249, 247, 251, 0.54);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.aos-sense-card h3 {
  position: relative;
  max-width: 94%;
  margin: 0 0 10px;
  color: rgba(39, 35, 45, 0.92);
  font-size: clamp(8px, 0.82vw, 12px);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.sense-reasoning-chain {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 0.8fr) 12px minmax(0, 0.9fr);
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
}

.sense-reasoning-chain span {
  min-height: 39px;
  padding: 6px;
  border: 1px solid rgba(116, 99, 133, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.5);
}

.sense-reasoning-chain small,
.sense-reasoning-chain b {
  display: block;
}

.sense-reasoning-chain small {
  margin-bottom: 4px;
  color: rgba(110, 74, 141, 0.72);
  font-size: clamp(4px, 0.34vw, 5.5px);
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sense-reasoning-chain b {
  color: rgba(50, 45, 56, 0.8);
  font-size: clamp(5px, 0.47vw, 7px);
  font-weight: 580;
  line-height: 1.18;
}

.sense-reasoning-chain > i {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(112, 79, 140, 0.45);
}

.sense-reasoning-chain > i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 4px;
  height: 4px;
  border-top: 1px solid rgba(112, 79, 140, 0.58);
  border-right: 1px solid rgba(112, 79, 140, 0.58);
  transform: rotate(45deg);
}

.sense-reasoning-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 21px;
  padding: 4px 6px;
  border-top: 1px solid rgba(106, 92, 119, 0.13);
  color: rgba(58, 53, 65, 0.65);
  font-size: clamp(5px, 0.5vw, 7.5px);
  line-height: 1.2;
}

.sense-reasoning-row b {
  color: rgba(69, 56, 82, 0.78);
  font-weight: 620;
}

.sense-reasoning-review {
  background: rgba(255, 255, 255, 0.24);
}

.sense-reasoning-review b {
  color: rgba(97, 68, 116, 0.82);
}

.aos-sense-card footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  color: rgba(68, 61, 76, 0.56);
  font-size: clamp(4.5px, 0.42vw, 6px);
  line-height: 1;
}

.aos-sense-card footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.aos-sense-card footer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8370a2;
  box-shadow: 0 0 0 2px rgba(131, 112, 162, 0.12);
}

.aos-sense-card footer b {
  color: rgba(75, 62, 89, 0.72);
  font-weight: 650;
}

@keyframes sense-ground-flow {
  to { stroke-dashoffset: -34; }
}

@media (prefers-reduced-motion: reduce) {
  .sense-ground-link,
  .aos-sense-uplinks path { animation: none; }

  .sense-ground-packet { display: none; }
}

.procedural-layer .aos-c-dot {
  background:
    radial-gradient(circle at 34% 24%, #fff 0 10%, #e7e8e4 28%, #a7aaa2 63%, #f4f5f2 100%);
}

.procedural-layer .aos-c-dot:nth-child(8n + 2),
.procedural-layer .aos-c-dot:nth-child(11n + 6) {
  border-color: rgba(187, 160, 106, 0.72);
  background:
    radial-gradient(circle at 34% 24%, #fff 0 10%, #eee1be 27%, #9f7b3d 62%, #f5eedc 100%);
  box-shadow:
    inset -3px -5px 8px rgba(92, 70, 34, 0.27),
    inset 3px 4px 7px rgba(255, 255, 255, 0.78),
    0 0 14px rgba(174, 134, 70, 0.3);
}

.aos-procedure-ground {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  transform: translateZ(15px);
  transition: opacity 280ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-procedure-ground {
  opacity: calc(var(--layer-reveal));
}

.procedure-route {
  position: absolute;
  z-index: 1;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(147, 112, 55, 0.24), rgba(147, 112, 55, 0.78), rgba(147, 112, 55, 0.28));
  box-shadow: 0 0 6px rgba(151, 113, 52, 0.16);
  transform-origin: left center;
}

.procedure-route::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 4px;
  height: 4px;
  border-top: 1px solid rgba(137, 99, 42, 0.72);
  border-right: 1px solid rgba(137, 99, 42, 0.72);
  transform: rotate(45deg);
}

.procedure-route-1 { left: 19%; top: 58%; width: 20%; transform: rotate(33deg); }
.procedure-route-2 { left: 36%; top: 69%; width: 19%; transform: rotate(-29deg); }
.procedure-route-3 { left: 52%; top: 60%; width: 21%; transform: rotate(41deg); }
.procedure-route-4 { left: 68%; top: 74%; width: 20%; transform: rotate(-34deg); }

.procedure-ground-step {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 19px auto;
  align-items: center;
  gap: 5px;
  min-width: 70px;
  min-height: 28px;
  padding: 4px 7px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 9px;
  background: rgba(250, 250, 247, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 7px 12px rgba(67, 61, 49, 0.13);
  color: rgba(62, 57, 47, 0.72);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  transition:
    opacity 300ms ease var(--step-delay),
    transform 560ms cubic-bezier(0.2, 0.85, 0.25, 1.08) var(--step-delay);
}

.aos-layer.active-layer .procedure-ground-step {
  opacity: 0.96;
  transform: translate(-50%, -50%) scale(1);
}

.procedure-ground-step b {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: rgba(167, 131, 69, 0.13);
  color: rgba(128, 91, 34, 0.82);
  font-size: 6px;
  font-weight: 720;
}

.procedure-ground-step small {
  font-size: 6px;
  font-weight: 620;
  line-height: 1;
}

.procedure-ground-step-1 { left: 18%; top: 57%; --step-delay: 100ms; }
.procedure-ground-step-2 { left: 35%; top: 69%; --step-delay: 180ms; }
.procedure-ground-step-3 { left: 51%; top: 60%; --step-delay: 260ms; }
.procedure-ground-step-4 { left: 67%; top: 74%; --step-delay: 340ms; }
.procedure-ground-step-5 { left: 83%; top: 63%; --step-delay: 420ms; }

.procedure-runner {
  position: absolute;
  left: 18%;
  top: 57%;
  z-index: 5;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #b48b48;
  box-shadow: 0 0 0 4px rgba(180, 139, 72, 0.1), 0 0 10px rgba(151, 108, 39, 0.4);
  transform: translate(-50%, -50%);
  animation: procedure-run 7s var(--motion-ease-in-out, ease-in-out) infinite;
}

.aos-procedure-elevation {
  position: absolute;
  left: 53%;
  top: 33%;
  z-index: 23;
  width: min(29vw, 380px);
  height: min(34vw, 445px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -48%) translateY(14px) scale(0.96);
  transform-origin: 50% 100%;
  transition:
    opacity 260ms var(--motion-ease-out, ease),
    transform 520ms var(--motion-ease-out, ease),
    visibility 0s linear 520ms;
}

.aos-procedure-elevation.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -48%) translateY(0) scale(1);
  transition-delay: 70ms, 70ms, 0s;
}

.aos-procedure-elevation::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 25%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(115, 91, 52, 0.16), rgba(138, 107, 59, 0.04) 50%, transparent 73%);
  filter: blur(7px);
}

.aos-procedure-uplinks {
  position: absolute;
  inset: 0 -10% -6%;
  z-index: 1;
  pointer-events: none;
}

.aos-procedure-uplinks i {
  position: absolute;
  top: 43%;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(151, 113, 53, 0.56) 0 3px, transparent 3px 6px);
  opacity: 0;
  transform: scaleY(0.25);
  transform-origin: top;
  animation: procedure-uplink-in 760ms var(--motion-ease-out, ease) forwards;
}

.aos-procedure-uplinks i:nth-child(1) { left: 18%; animation-delay: 110ms; }
.aos-procedure-uplinks i:nth-child(2) { left: 39%; animation-delay: 210ms; }
.aos-procedure-uplinks i:nth-child(3) { left: 67%; animation-delay: 310ms; }
.aos-procedure-uplinks i:nth-child(4) { left: 85%; animation-delay: 410ms; }

.aos-procedure-card {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 66%;
  padding: 12px 14px 11px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 13px;
  background:
    radial-gradient(circle at 88% 11%, rgba(229, 214, 177, 0.48), transparent 38%),
    linear-gradient(155deg, rgba(253, 252, 249, 0.97), rgba(238, 234, 222, 0.9) 58%, rgba(218, 218, 207, 0.8));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    inset 0 -18px 28px rgba(128, 105, 58, 0.08),
    0 16px 34px rgba(61, 54, 40, 0.16);
  backdrop-filter: blur(13px) saturate(0.96);
  -webkit-backdrop-filter: blur(13px) saturate(0.96);
  color: rgba(50, 47, 41, 0.9);
}

.aos-procedure-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9px;
  pointer-events: none;
}

.aos-procedure-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: rgba(79, 70, 52, 0.58);
  font-size: clamp(5px, 0.43vw, 7px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aos-procedure-card-header strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid rgba(132, 105, 55, 0.16);
  border-radius: 999px;
  background: rgba(252, 249, 242, 0.58);
  color: rgba(100, 79, 40, 0.74);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.aos-procedure-card-header strong i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9d7b43;
  box-shadow: 0 0 0 2px rgba(157, 123, 67, 0.12);
}

.aos-procedure-card h3 {
  position: relative;
  margin: 0 0 4px;
  color: rgba(45, 42, 36, 0.92);
  font-size: clamp(8px, 0.82vw, 12px);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.procedure-card-intro {
  position: relative;
  margin: 0 0 8px;
  color: rgba(73, 68, 58, 0.52);
  font-size: clamp(4.5px, 0.42vw, 6px);
  line-height: 1.35;
}

.procedure-card-steps {
  position: relative;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.procedure-card-steps li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 6px 4px 5px;
  border: 1px solid rgba(127, 113, 84, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.43);
}

.procedure-card-steps li > b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(164, 128, 67, 0.12);
  color: rgba(127, 92, 36, 0.78);
  font-size: 5.5px;
  font-weight: 720;
}

.procedure-card-steps li span strong,
.procedure-card-steps li span small {
  display: block;
}

.procedure-card-steps li span strong {
  color: rgba(53, 50, 43, 0.8);
  font-size: clamp(5.5px, 0.5vw, 7.5px);
  font-weight: 590;
  line-height: 1.05;
}

.procedure-card-steps li span small {
  margin-top: 2px;
  color: rgba(79, 73, 62, 0.46);
  font-size: clamp(4px, 0.35vw, 5.5px);
  line-height: 1;
}

.procedure-card-steps li > em {
  padding: 3px 5px;
  border: 1px solid rgba(117, 142, 100, 0.16);
  border-radius: 999px;
  background: rgba(225, 237, 216, 0.5);
  color: rgba(67, 100, 59, 0.72);
  font-size: 4.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.procedure-card-steps .procedure-human-step > em {
  border-color: rgba(146, 114, 76, 0.17);
  background: rgba(239, 226, 206, 0.58);
  color: rgba(113, 78, 40, 0.76);
}

.aos-procedure-card footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  color: rgba(76, 69, 57, 0.54);
  font-size: clamp(4.5px, 0.42vw, 6px);
  line-height: 1;
}

.aos-procedure-card footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.aos-procedure-card footer i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9d7b43;
  box-shadow: 0 0 0 2px rgba(157, 123, 67, 0.12);
}

.aos-procedure-card footer b {
  color: rgba(91, 73, 42, 0.72);
  font-weight: 650;
}

@keyframes procedure-run {
  0%, 8% { left: 18%; top: 57%; }
  22%, 30% { left: 35%; top: 69%; }
  44%, 52% { left: 51%; top: 60%; }
  66%, 74% { left: 67%; top: 74%; }
  88%, 100% { left: 83%; top: 63%; }
}

@keyframes procedure-uplink-in {
  from { opacity: 0; transform: scaleY(0.25); }
  to { opacity: 0.78; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .procedure-runner,
  .aos-procedure-uplinks i { animation: none; }

  .procedure-runner { left: 83%; top: 63%; }
  .aos-procedure-uplinks i { opacity: 0.78; transform: scaleY(1); }
}

.harness-layer .aos-c-dot {
  background:
    radial-gradient(circle at 34% 24%, #fff 0 10%, #e4e6e9 29%, #9da3aa 64%, #f3f4f5 100%);
}

.harness-layer .aos-c-dot:nth-child(9n + 1) {
  border-color: rgba(120, 108, 183, 0.66);
  background: radial-gradient(circle at 34% 24%, #fff 0 10%, #ddd9f1 28%, #7467aa 63%, #f0eef8 100%);
}

.harness-layer .aos-c-dot:nth-child(9n + 4) {
  border-color: rgba(87, 145, 177, 0.66);
  background: radial-gradient(circle at 34% 24%, #fff 0 10%, #d7e9f2 28%, #5d8eaa 63%, #eff6f9 100%);
}

.harness-layer .aos-c-dot:nth-child(9n + 7) {
  border-color: rgba(190, 111, 106, 0.66);
  background: radial-gradient(circle at 34% 24%, #fff 0 10%, #f1dddb 28%, #b66f6a 63%, #f8efee 100%);
}

.aos-harness-ground {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  transform: translateZ(16px);
  transition: opacity 280ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-harness-ground {
  opacity: calc(var(--layer-reveal));
}

.harness-policy-rail {
  position: absolute;
  left: 10%;
  right: 10%;
  z-index: 1;
  display: block;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(80, 86, 100, 0.38) 0 4px, transparent 4px 8px);
}

.harness-policy-rail::before {
  content: "POLICY BOUNDARY";
  position: absolute;
  left: 50%;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(247, 248, 249, 0.84);
  color: rgba(69, 73, 84, 0.5);
  font-size: 4.5px;
  font-weight: 720;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%);
}

.harness-policy-rail-top { top: 88%; }
.harness-policy-rail-bottom { top: 98%; }

.harness-tool {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background: rgba(252, 252, 251, 0.9);
  box-shadow: 0 7px 12px rgba(60, 65, 73, 0.14);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 280ms ease var(--tool-delay), transform 520ms var(--motion-ease-out, ease) var(--tool-delay);
}

.aos-layer.active-layer .harness-tool {
  opacity: 0.94;
  transform: translate(-50%, -50%) scale(1);
}

.harness-tool img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.harness-tool-slack { left: 6%; top: 69%; --tool-delay: 100ms; }
.harness-tool-excel { left: 94%; top: 67%; --tool-delay: 220ms; }
.harness-tool-gmail { left: 7%; top: 88%; --tool-delay: 340ms; }

.harness-ground-agent {
  position: absolute;
  z-index: 5;
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 6px;
  min-width: 86px;
  min-height: 30px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  background: rgba(250, 250, 251, 0.9);
  box-shadow: 0 8px 14px rgba(56, 61, 72, 0.13);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  transition: opacity 300ms ease var(--agent-delay), transform 560ms cubic-bezier(0.2, 0.85, 0.25, 1.08) var(--agent-delay);
}

.aos-layer.active-layer .harness-ground-agent {
  opacity: 0.98;
  transform: translate(-50%, -50%) scale(1);
}

.harness-ground-agent b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--agent-tone) 18%, #fff);
  color: var(--agent-tone);
  font-size: 7px;
  font-weight: 750;
}

.harness-ground-agent small {
  color: rgba(55, 59, 69, 0.7);
  font-size: 6px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
}

.harness-ground-research { left: 16%; top: 69%; --agent-tone: #7569ad; --agent-delay: 120ms; }
.harness-ground-analysis { left: 84%; top: 67%; --agent-tone: #588aa6; --agent-delay: 240ms; }
.harness-ground-email { left: 17%; top: 88%; --agent-tone: #b66c67; --agent-delay: 360ms; }

.harness-human-gate {
  position: absolute;
  left: 84%;
  top: 87%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(137, 103, 58, 0.22);
  border-radius: 999px;
  background: rgba(249, 242, 231, 0.88);
  box-shadow: 0 7px 12px rgba(84, 68, 45, 0.12);
  color: rgba(105, 76, 39, 0.72);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 300ms ease 480ms, transform 560ms var(--motion-ease-out, ease) 480ms;
}

.aos-layer.active-layer .harness-human-gate {
  opacity: 0.96;
  transform: translate(-50%, -50%) scale(1);
}

.harness-human-gate i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(130, 91, 43, 0.6);
  border-radius: 50%;
  background: #fff7e9;
  box-shadow: 0 0 0 3px rgba(159, 117, 58, 0.09);
}

.harness-human-gate small {
  font-size: 5.5px;
  font-weight: 650;
  white-space: nowrap;
}

.harness-runner {
  position: absolute;
  z-index: 7;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: var(--runner-tone);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--runner-tone) 12%, transparent), 0 0 9px color-mix(in srgb, var(--runner-tone) 55%, transparent);
  transform: translate(-50%, -50%);
}

.harness-runner-research { --runner-tone: #7569ad; animation: harness-research-run 5.8s ease-in-out infinite; }
.harness-runner-analysis { --runner-tone: #588aa6; animation: harness-analysis-run 6.3s ease-in-out .6s infinite; }
.harness-runner-email { --runner-tone: #b66c67; animation: harness-email-run 5.5s ease-in-out 1.1s infinite; }

.aos-harness-elevation {
  position: absolute;
  left: 53%;
  top: 29%;
  z-index: 24;
  width: min(29vw, 380px);
  height: min(34vw, 445px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -48%) translateY(14px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 260ms var(--motion-ease-out, ease), transform 520ms var(--motion-ease-out, ease), visibility 0s linear 520ms;
}

.aos-harness-elevation.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -48%) translateY(0) scale(1);
  transition-delay: 70ms, 70ms, 0s;
}

.aos-harness-elevation::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 25%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(70, 77, 108, 0.16), rgba(91, 99, 134, 0.04) 50%, transparent 73%);
  filter: blur(7px);
}

.aos-harness-uplinks {
  position: absolute;
  inset: 0 -10% -6%;
  z-index: 1;
}

.aos-harness-uplinks i {
  position: absolute;
  top: 43%;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(86, 98, 136, 0.54) 0 3px, transparent 3px 6px);
  opacity: 0;
  transform: scaleY(0.25);
  transform-origin: top;
  animation: procedure-uplink-in 760ms var(--motion-ease-out, ease) forwards;
}

.aos-harness-uplinks i:nth-child(1) { left: 16%; animation-delay: 100ms; }
.aos-harness-uplinks i:nth-child(2) { left: 39%; animation-delay: 210ms; }
.aos-harness-uplinks i:nth-child(3) { left: 66%; animation-delay: 320ms; }
.aos-harness-uplinks i:nth-child(4) { left: 86%; animation-delay: 430ms; }

.aos-harness-card {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 66%;
  padding: 12px 14px 11px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 13px;
  background:
    radial-gradient(circle at 88% 11%, rgba(204, 199, 233, 0.46), transparent 38%),
    linear-gradient(155deg, rgba(251, 251, 253, 0.97), rgba(229, 231, 238, 0.92) 58%, rgba(207, 216, 224, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.97), inset 0 -18px 28px rgba(69, 78, 110, 0.08), 0 16px 34px rgba(43, 49, 69, 0.17);
  backdrop-filter: blur(13px) saturate(0.98);
  -webkit-backdrop-filter: blur(13px) saturate(0.98);
  color: rgba(44, 47, 57, 0.9);
}

.aos-harness-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9px;
  pointer-events: none;
}

.aos-harness-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: rgba(63, 67, 81, 0.58);
  font-size: clamp(5px, 0.43vw, 7px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aos-harness-card-header strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid rgba(94, 105, 140, 0.16);
  border-radius: 999px;
  background: rgba(247, 248, 252, 0.58);
  color: rgba(67, 80, 119, 0.75);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.aos-harness-card-header strong i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6f7dae;
  box-shadow: 0 0 0 2px rgba(111, 125, 174, 0.13);
  animation: sense-status-pulse 1.8s ease-in-out infinite;
}

.aos-harness-card h3 {
  position: relative;
  margin: 0 0 7px;
  color: rgba(40, 43, 52, 0.92);
  font-size: clamp(8px, 0.82vw, 12px);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.harness-policy-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(86, 98, 132, 0.13);
  border-radius: 7px;
  background: rgba(245, 247, 251, 0.48);
  color: rgba(58, 63, 77, 0.57);
  font-size: clamp(4.5px, 0.42vw, 6px);
}

.harness-policy-bar b {
  color: rgba(65, 78, 114, 0.75);
  font-weight: 650;
}

.harness-agent-steps {
  position: relative;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.harness-agent-steps li {
  --step-tone: #7569ad;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 4px 6px 4px 5px;
  border: 1px solid rgba(91, 99, 120, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.45);
}

.harness-agent-steps .harness-analysis-step { --step-tone: #588aa6; }
.harness-agent-steps .harness-email-step { --step-tone: #b66c67; }
.harness-agent-steps .harness-judgment-step { --step-tone: #9c7443; }

.harness-agent-steps li > i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--step-tone) 16%, #fff);
  color: var(--step-tone);
  font-size: 6px;
  font-style: normal;
  font-weight: 750;
}

.harness-agent-steps li span strong,
.harness-agent-steps li span small { display: block; }

.harness-agent-steps li span strong {
  color: rgba(50, 54, 64, 0.82);
  font-size: clamp(5.5px, 0.5vw, 7.5px);
  font-weight: 590;
  line-height: 1.05;
}

.harness-agent-steps li span small {
  margin-top: 2px;
  color: rgba(70, 76, 91, 0.46);
  font-size: clamp(4px, 0.35vw, 5.5px);
  line-height: 1;
}

.harness-agent-steps li > em {
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--step-tone) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--step-tone) 9%, #fff);
  color: var(--step-tone);
  font-size: 4.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aos-harness-card footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  color: rgba(63, 68, 81, 0.54);
  font-size: clamp(4.5px, 0.42vw, 6px);
  line-height: 1;
}

.aos-harness-card footer span { display: inline-flex; align-items: center; gap: 4px; }
.aos-harness-card footer i { width: 5px; height: 5px; border-radius: 50%; background: #6f7dae; box-shadow: 0 0 0 2px rgba(111, 125, 174, 0.13); }
.aos-harness-card footer b { color: rgba(65, 77, 113, 0.72); font-weight: 650; }

@keyframes harness-research-run {
  0%, 12% { left: 6%; top: 69%; }
  42%, 56% { left: 16%; top: 69%; }
  88%, 100% { left: 17%; top: 88%; }
}

@keyframes harness-analysis-run {
  0%, 12% { left: 16%; top: 69%; }
  42%, 56% { left: 84%; top: 67%; }
  88%, 100% { left: 84%; top: 87%; }
}

@keyframes harness-email-run {
  0%, 12% { left: 7%; top: 88%; }
  42%, 56% { left: 17%; top: 88%; }
  88%, 100% { left: 84%; top: 87%; }
}

@media (prefers-reduced-motion: reduce) {
  .harness-runner,
  .aos-harness-uplinks i,
  .aos-harness-card-header strong i { animation: none; }

  .aos-harness-uplinks i { opacity: 0.78; transform: scaleY(1); }
}

.world-model-layer .aos-c-dot {
  background: radial-gradient(circle at 34% 24%, #fff 0 10%, #e3e7e8 29%, #949da0 64%, #f2f5f5 100%);
}

.world-model-layer .aos-c-dot:nth-child(7n + 1),
.world-model-layer .aos-c-dot:nth-child(11n + 5) {
  border-color: rgba(91, 143, 135, 0.66);
  background: radial-gradient(circle at 34% 24%, #fff 0 10%, #d8ebe6 28%, #5d958b 63%, #edf6f3 100%);
  box-shadow: inset -3px -5px 8px rgba(50, 91, 84, 0.25), inset 3px 4px 7px rgba(255, 255, 255, 0.8), 0 0 14px rgba(83, 143, 133, 0.3);
}

.aos-world-ground {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  transform: translateZ(18px);
  transition: opacity 280ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-world-ground {
  opacity: calc(var(--layer-reveal));
}

.world-spoke {
  position: absolute;
  left: 50%;
  top: 92%;
  z-index: 1;
  display: block;
  width: var(--spoke-length);
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(71, 122, 114, 0.62) 0 4px, transparent 4px 7px);
  box-shadow: 0 0 5px rgba(73, 128, 119, 0.18);
  transform: rotate(var(--spoke-angle));
  transform-origin: left center;
}

.world-spoke-people { --spoke-length: 39%; --spoke-angle: -156deg; }
.world-spoke-clients { --spoke-length: 39%; --spoke-angle: -24deg; }
.world-spoke-decisions { --spoke-length: 36%; --spoke-angle: -172deg; }
.world-spoke-operations { --spoke-length: 36%; --spoke-angle: -8deg; }

.world-domain {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 94px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  background: rgba(249, 251, 250, 0.9);
  box-shadow: 0 8px 14px rgba(48, 66, 62, 0.13);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  transition: opacity 300ms ease var(--domain-delay), transform 560ms cubic-bezier(0.2, 0.85, 0.25, 1.08) var(--domain-delay);
}

.aos-layer.active-layer .world-domain {
  opacity: 0.98;
  transform: translate(-50%, -50%) scale(1);
}

.world-domain b {
  color: rgba(43, 65, 61, 0.82);
  font-size: 7px;
  font-weight: 650;
  line-height: 1;
}

.world-domain small {
  margin-top: 4px;
  color: rgba(54, 78, 73, 0.5);
  font-size: 5.5px;
  line-height: 1;
}

.world-domain-people { left: 16%; top: 70%; --domain-delay: 100ms; }
.world-domain-clients { left: 84%; top: 70%; --domain-delay: 200ms; }
.world-domain-decisions { left: 16%; top: 88%; --domain-delay: 300ms; }
.world-domain-operations { left: 84%; top: 88%; --domain-delay: 400ms; }

.world-model-core {
  position: absolute;
  left: 50%;
  top: 92%;
  z-index: 6;
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 8px;
  min-width: 112px;
  min-height: 45px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(245, 251, 249, 0.96), rgba(213, 231, 226, 0.9));
  box-shadow: 0 0 0 5px rgba(91, 145, 135, 0.07), 0 12px 20px rgba(43, 78, 71, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.78);
  transition: opacity 340ms ease 500ms, transform 680ms cubic-bezier(0.2, 0.85, 0.25, 1.1) 500ms;
}

.aos-layer.active-layer .world-model-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.world-model-core img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #222a28;
}

.world-model-core span b,
.world-model-core span small { display: block; }
.world-model-core span b { color: rgba(35, 58, 53, 0.88); font-size: 7.5px; font-weight: 680; }
.world-model-core span small { margin-top: 3px; color: rgba(46, 78, 70, 0.52); font-size: 5.5px; font-weight: 620; text-transform: uppercase; letter-spacing: 0.07em; }

.world-packet {
  position: absolute;
  left: 50%;
  top: 92%;
  z-index: 7;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #60978d;
  box-shadow: 0 0 0 4px rgba(96, 151, 141, 0.1), 0 0 9px rgba(73, 132, 121, 0.42);
  transform: translate(-50%, -50%);
}

.world-packet-1 { animation: world-packet-people 5.6s ease-in-out infinite; }
.world-packet-2 { animation: world-packet-clients 5.9s ease-in-out .5s infinite; }
.world-packet-3 { animation: world-packet-decisions 6.2s ease-in-out 1s infinite; }
.world-packet-4 { animation: world-packet-operations 6.5s ease-in-out 1.5s infinite; }

.aos-world-elevation {
  position: absolute;
  left: 53%;
  top: 28%;
  z-index: 25;
  width: min(29vw, 380px);
  height: min(35vw, 460px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -48%) translateY(14px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 260ms var(--motion-ease-out, ease), transform 520ms var(--motion-ease-out, ease), visibility 0s linear 520ms;
}

.aos-world-elevation.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -48%) translateY(0) scale(1);
  transition-delay: 70ms, 70ms, 0s;
}

.aos-world-elevation::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 23%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56, 105, 96, 0.17), rgba(77, 126, 117, 0.04) 50%, transparent 73%);
  filter: blur(7px);
}

.aos-world-uplinks {
  position: absolute;
  inset: 0 -10% -6%;
  z-index: 1;
}

.aos-world-uplinks i {
  position: absolute;
  top: 44%;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(66, 121, 111, 0.54) 0 3px, transparent 3px 6px);
  opacity: 0;
  transform: scaleY(0.25);
  transform-origin: top;
  animation: procedure-uplink-in 760ms var(--motion-ease-out, ease) forwards;
}

.aos-world-uplinks i:nth-child(1) { left: 16%; animation-delay: 100ms; }
.aos-world-uplinks i:nth-child(2) { left: 39%; animation-delay: 210ms; }
.aos-world-uplinks i:nth-child(3) { left: 66%; animation-delay: 320ms; }
.aos-world-uplinks i:nth-child(4) { left: 86%; animation-delay: 430ms; }

.aos-world-card {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 72%;
  padding: 12px 14px 11px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 13px;
  background: radial-gradient(circle at 88% 11%, rgba(190, 222, 214, 0.48), transparent 38%), linear-gradient(155deg, rgba(250, 253, 252, 0.98), rgba(224, 235, 232, 0.92) 58%, rgba(203, 219, 216, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -18px 28px rgba(57, 101, 93, 0.08), 0 16px 34px rgba(39, 66, 61, 0.17);
  backdrop-filter: blur(13px) saturate(0.98);
  -webkit-backdrop-filter: blur(13px) saturate(0.98);
  color: rgba(40, 55, 52, 0.9);
}

.aos-world-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9px;
  pointer-events: none;
}

.aos-world-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: rgba(52, 78, 72, 0.58);
  font-size: clamp(5px, 0.43vw, 7px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aos-world-card-header strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid rgba(78, 128, 118, 0.16);
  border-radius: 999px;
  background: rgba(245, 251, 249, 0.58);
  color: rgba(48, 103, 92, 0.75);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.aos-world-card-header strong i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5f988d;
  box-shadow: 0 0 0 2px rgba(95, 152, 141, 0.13);
  animation: sense-status-pulse 1.8s ease-in-out infinite;
}

.aos-world-card h3 {
  position: relative;
  margin: 0 0 7px;
  color: rgba(33, 50, 46, 0.92);
  font-size: clamp(8px, 0.82vw, 12px);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.world-query {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 14px;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 5px 7px;
  border: 1px solid rgba(70, 115, 106, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.world-query span { color: rgba(56, 91, 83, 0.5); font-size: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.world-query strong { overflow: hidden; color: rgba(39, 64, 58, 0.78); font-size: 6.5px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.world-query > i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 5px; background: rgba(92, 148, 137, 0.14); color: #4f877c; font-size: 7px; font-style: normal; }

.world-answer {
  position: relative;
  margin-top: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(70, 115, 106, 0.12);
  border-radius: 8px;
  background: rgba(235, 245, 242, 0.48);
}

.world-answer small { display: block; color: rgba(56, 103, 93, 0.62); font-size: 4.5px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.07em; }
.world-answer p { margin: 4px 0 5px; color: rgba(40, 62, 57, 0.72); font-size: 6px; line-height: 1.32; }
.world-answer span { color: rgba(58, 83, 77, 0.46); font-size: 4.5px; }

.world-model-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 6px;
}

.world-model-stats > span {
  min-height: 37px;
  padding: 6px;
  border: 1px solid rgba(75, 109, 102, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.4);
}

.world-model-stats b,
.world-model-stats small { display: block; }
.world-model-stats b { color: rgba(42, 78, 70, 0.82); font-size: 8px; font-weight: 650; }
.world-model-stats small { margin-top: 4px; color: rgba(57, 82, 76, 0.48); font-size: 4.5px; line-height: 1.15; }

.aos-world-card footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  color: rgba(53, 78, 72, 0.54);
  font-size: clamp(4.5px, 0.42vw, 6px);
  line-height: 1;
}

.aos-world-card footer span { display: inline-flex; align-items: center; gap: 4px; }
.aos-world-card footer i { width: 5px; height: 5px; border-radius: 50%; background: #5f988d; box-shadow: 0 0 0 2px rgba(95, 152, 141, 0.13); }
.aos-world-card footer b { color: rgba(49, 99, 89, 0.72); font-weight: 650; }

@keyframes world-packet-people {
  0%, 16% { left: 16%; top: 70%; }
  72%, 100% { left: 50%; top: 92%; }
}

@keyframes world-packet-clients {
  0%, 16% { left: 84%; top: 70%; }
  72%, 100% { left: 50%; top: 92%; }
}

@keyframes world-packet-decisions {
  0%, 16% { left: 16%; top: 88%; }
  72%, 100% { left: 50%; top: 92%; }
}

@keyframes world-packet-operations {
  0%, 16% { left: 84%; top: 88%; }
  72%, 100% { left: 50%; top: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .world-packet,
  .aos-world-uplinks i,
  .aos-world-card-header strong i { animation: none; }

  .aos-world-uplinks i { opacity: 0.78; transform: scaleY(1); }
}

.governance-layer .aos-c-field {
  opacity: 0.22;
}

.governance-layer .aos-c-dot {
  border-color: rgba(255, 255, 255, 0.72);
  background: radial-gradient(circle at 34% 24%, #fff 0 9%, #e2e7e6 26%, #7c8b89 62%, #eef2f1 100%);
  box-shadow: inset -3px -5px 8px rgba(44, 58, 56, 0.28), inset 3px 4px 7px rgba(255, 255, 255, 0.84), 0 7px 10px rgba(49, 61, 59, 0.18);
}

.aos-governance-ground {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  transform: translateZ(20px);
  transition: opacity 320ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-governance-ground {
  opacity: calc(var(--layer-reveal));
}

.governance-dial {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 3;
  width: 68%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 252, 251, 0.95) 0 20%, rgba(226, 234, 232, 0.72) 21% 39%, rgba(247, 249, 249, 0.88) 40% 58%, rgba(198, 210, 207, 0.5) 59% 60%, rgba(246, 249, 248, 0.92) 61% 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.48), inset 0 -20px 42px rgba(72, 91, 87, 0.1), 0 0 0 5px rgba(173, 186, 183, 0.22), 0 22px 35px rgba(48, 62, 59, 0.19);
  opacity: 0;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 340ms ease 110ms, transform 760ms cubic-bezier(0.2, 0.85, 0.25, 1.08) 110ms;
}

.aos-layer.active-layer .governance-dial {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.governance-dial::before {
  content: "";
  position: absolute;
  inset: 4.5%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, rgba(55, 73, 69, 0.46) 0 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 88%, #000 88.5% 100%);
  mask: radial-gradient(circle, transparent 0 88%, #000 88.5% 100%);
}

.governance-dial::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(68, 91, 86, 0.25);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 0 0 7px rgba(109, 135, 129, 0.04);
}

.governance-dial-sweep {
  position: absolute;
  inset: 11%;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 245deg, transparent 0 64%, rgba(79, 119, 110, 0.04) 65%, rgba(83, 137, 124, 0.3) 76%, transparent 77% 100%);
  animation: governance-sweep 8s linear infinite;
}

.governance-ring {
  position: absolute;
  z-index: 2;
  display: block;
  border: 1px solid rgba(69, 91, 86, 0.21);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.governance-ring-outer { inset: 19%; }
.governance-ring-mid { inset: 29%; border-style: dashed; }
.governance-ring-inner { inset: 39%; border-color: rgba(73, 112, 103, 0.34); }

.governance-axis {
  position: absolute;
  z-index: 5;
  color: rgba(42, 62, 58, 0.58);
  font-size: 5.5px;
  font-weight: 680;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.governance-axis-permissions { left: 50%; top: 8%; transform: translateX(-50%); }
.governance-axis-audit { right: 8%; top: 50%; transform: translateY(-50%) rotate(90deg); }
.governance-axis-policy { left: 50%; bottom: 8%; transform: translateX(-50%); }
.governance-axis-encryption { left: 7%; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.governance-dial-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: grid;
  justify-items: center;
  width: 40%;
  aspect-ratio: 1;
  padding: 7%;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(248, 252, 250, 0.99), rgba(184, 211, 203, 0.97));
  box-shadow: 0 0 0 9px rgba(73, 117, 107, 0.08), 0 13px 28px rgba(44, 72, 65, 0.25);
  transform: translate(-50%, -50%);
}

.governance-dial-core img {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 30%;
  background: #27302e;
}

.governance-dial-core strong {
  align-self: end;
  color: rgba(25, 51, 45, 0.94);
  font-size: clamp(9px, 0.82vw, 12px);
  font-weight: 730;
  line-height: 1.02;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.governance-dial-core strong span {
  display: block;
}

.governance-dial-core strong span + span {
  margin-top: 3px;
  color: rgba(38, 75, 67, 0.86);
  font-size: 0.86em;
}

.governance-dial-core small {
  display: flex;
  align-items: center;
  gap: 3px;
  color: rgba(35, 76, 66, 0.72);
  font-size: clamp(7px, 0.6vw, 9px);
  font-weight: 680;
  line-height: 1;
}

.governance-dial-core small i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b9789;
  box-shadow: 0 0 0 2px rgba(91, 151, 137, 0.14);
  animation: sense-status-pulse 1.8s ease-in-out infinite;
}

.governance-control {
  position: absolute;
  z-index: 8;
  display: grid;
  min-width: 88px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 9px;
  background: rgba(246, 250, 249, 0.86);
  box-shadow: 0 8px 15px rgba(45, 62, 58, 0.14);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 260ms ease var(--control-delay), transform 520ms cubic-bezier(0.2, 0.85, 0.25, 1.08) var(--control-delay);
}

.aos-layer.active-layer .governance-control {
  opacity: 0.97;
  transform: translateY(0) scale(1);
}

.governance-control b {
  color: rgba(38, 61, 56, 0.78);
  font-size: 6px;
  font-weight: 660;
  line-height: 1;
}

.governance-control small {
  margin-top: 4px;
  color: rgba(50, 87, 78, 0.5);
  font-size: 5px;
  line-height: 1;
}

.governance-control-source { left: 4%; top: 20%; --control-delay: 240ms; }
.governance-control-audit { right: 4%; top: 20%; --control-delay: 340ms; }
.governance-control-perimeter { left: 4%; bottom: 15%; --control-delay: 440ms; }
.governance-control-training { right: 4%; bottom: 15%; --control-delay: 540ms; }

@keyframes governance-sweep {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .governance-dial-sweep,
  .governance-dial-core small i { animation: none; }
}

.aos-governance-elevation {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 28;
  width: min(60vw, 820px);
  height: min(44vw, 570px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -48%) translateY(18px) scale(0.95);
  transform-origin: 50% 100%;
  transition: opacity 260ms var(--motion-ease-out, ease), transform 560ms var(--motion-ease-out, ease), visibility 0s linear 560ms;
}

.aos-governance-elevation.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -48%) translateY(0) scale(1);
  transition-delay: 100ms, 100ms, 0s;
}

.aos-governance-elevation::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 34%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(52, 88, 80, 0.13), transparent 70%);
  filter: blur(12px);
}

.governance-corner-card {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  width: min(16vw, 210px);
  min-height: 112px;
  padding: 12px 13px 10px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 13px;
  background: radial-gradient(circle at 85% 8%, rgba(190, 222, 214, 0.5), transparent 40%), linear-gradient(155deg, rgba(252, 254, 253, 0.98), rgba(222, 235, 231, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -14px 22px rgba(56, 94, 85, 0.07), 0 16px 28px rgba(40, 65, 59, 0.19);
  backdrop-filter: blur(14px) saturate(0.96);
  -webkit-backdrop-filter: blur(14px) saturate(0.96);
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transition: opacity 300ms ease var(--corner-delay), transform 620ms cubic-bezier(0.2, 0.85, 0.25, 1.08) var(--corner-delay);
}

.aos-governance-elevation.active .governance-corner-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.governance-corner-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 9px;
  pointer-events: none;
}

.governance-corner-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 78px;
  background: repeating-linear-gradient(to bottom, rgba(63, 111, 100, 0.58) 0 4px, transparent 4px 7px);
  transform: translateX(-50%);
  transform-origin: top;
}

.governance-corner-source { left: 0; top: 6%; --corner-delay: 100ms; }
.governance-corner-audit { right: 0; top: 6%; --corner-delay: 200ms; }
.governance-corner-perimeter { left: 0; bottom: 8%; --corner-delay: 300ms; }
.governance-corner-model { right: 0; bottom: 8%; --corner-delay: 400ms; }

.governance-corner-perimeter::after,
.governance-corner-model::after {
  top: auto;
  bottom: 100%;
  transform: translateX(-50%) rotate(180deg);
}

.governance-corner-card header {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.governance-corner-card header > i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 36px;
  border-radius: 8px;
  background: rgba(75, 129, 116, 0.12);
  color: rgba(43, 99, 86, 0.72);
  font-size: 8px;
  font-style: normal;
  font-weight: 730;
}

.governance-corner-card header small,
.governance-corner-card header strong {
  display: block;
}

.governance-corner-card header small {
  color: rgba(53, 90, 81, 0.5);
  font-size: 7px;
  font-weight: 680;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.governance-corner-card header strong {
  margin-top: 5px;
  color: rgba(31, 56, 50, 0.9);
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 680;
  line-height: 1.05;
}

.governance-corner-card p {
  position: relative;
  margin: 9px 0 8px;
  color: rgba(46, 75, 68, 0.61);
  font-size: clamp(8px, 0.65vw, 10px);
  line-height: 1.28;
}

.governance-corner-card footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(68, 109, 99, 0.12);
  color: rgba(49, 83, 75, 0.56);
  font-size: 7px;
  line-height: 1;
}

.governance-corner-card footer span { display: inline-flex; align-items: center; gap: 5px; }
.governance-corner-card footer span i { width: 5px; height: 5px; border-radius: 50%; background: #568f82; box-shadow: 0 0 0 2px rgba(86, 143, 130, 0.13); }
.governance-corner-card footer b { color: rgba(43, 101, 87, 0.76); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .governance-corner-card { transition: none; }
}

.context-layer {
  background:
    radial-gradient(circle at 50% 44%, rgba(208, 228, 222, 0.38), transparent 37%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(231, 237, 236, 0.5) 54%, rgba(195, 207, 204, 0.56));
}

.context-layer .aos-c-field {
  opacity: 0.16;
}

.context-layer .aos-c-dot {
  border-color: rgba(255, 255, 255, 0.76);
  background: radial-gradient(circle at 34% 24%, #fff 0 9%, #e5e9e8 27%, #778481 62%, #eef2f1 100%);
  box-shadow: inset -3px -5px 8px rgba(40, 54, 51, 0.26), inset 3px 4px 7px rgba(255, 255, 255, 0.86), 0 7px 10px rgba(44, 58, 55, 0.16);
}

.aos-context-ground {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  transform: translateZ(22px);
  transition: opacity 320ms var(--motion-ease-out, ease);
}

.aos-layer.active-layer .aos-context-ground {
  opacity: calc(var(--layer-reveal));
}

.context-system-ring {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 253, 253, 0.97) 0 24%, rgba(221, 232, 229, 0.75) 25% 41%, rgba(247, 249, 249, 0.9) 42% 66%, rgba(195, 207, 204, 0.48) 67% 68%, rgba(248, 250, 249, 0.94) 69% 100%);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.48), inset 0 -22px 40px rgba(54, 76, 70, 0.1), 0 0 0 6px rgba(157, 174, 170, 0.2), 0 22px 36px rgba(40, 55, 51, 0.18);
  opacity: 0;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 340ms ease 100ms, transform 760ms cubic-bezier(0.2, 0.85, 0.25, 1.08) 100ms;
}

.aos-layer.active-layer .context-system-ring {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.context-system-ring::before {
  content: "";
  position: absolute;
  inset: 4.5%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, rgba(54, 69, 66, 0.44) 0 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 89%, #000 89.5% 100%);
  mask: radial-gradient(circle, transparent 0 89%, #000 89.5% 100%);
}

.context-system-ring::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(59, 83, 77, 0.22);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 7px rgba(74, 111, 102, 0.04);
}

.context-ring {
  position: absolute;
  z-index: 2;
  display: block;
  border: 1px solid rgba(63, 86, 80, 0.19);
  border-radius: 50%;
}

.context-ring-outer { inset: 19%; }
.context-ring-middle { inset: 30%; border-style: dashed; }
.context-ring-inner { inset: 41%; border-color: rgba(59, 101, 91, 0.28); }

.context-system-axis {
  position: absolute;
  z-index: 5;
  color: rgba(40, 62, 57, 0.55);
  font-size: 6px;
  font-weight: 690;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.context-system-axis-top { left: 50%; top: 8%; transform: translateX(-50%); }
.context-system-axis-right { right: 8%; top: 50%; transform: translateY(-50%) rotate(90deg); }
.context-system-axis-bottom { left: 50%; bottom: 8%; transform: translateX(-50%); }
.context-system-axis-left { left: 8%; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.context-system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  width: 55%;
  min-height: 74px;
  padding: 11px 16px 11px 11px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(250, 253, 252, 0.99), rgba(190, 214, 207, 0.97));
  box-shadow: 0 0 0 9px rgba(66, 105, 96, 0.07), 0 14px 28px rgba(42, 69, 63, 0.24);
  transform: translate(-50%, -50%);
}

.context-system-core img {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #252d2b;
}

.context-system-core strong {
  align-self: end;
  color: rgba(25, 44, 40, 0.94);
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.context-system-core small {
  align-self: start;
  margin-top: 7px;
  color: rgba(40, 74, 66, 0.62);
  font-size: clamp(7px, 0.6vw, 9px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.context-layer-count {
  position: absolute;
  left: 7%;
  bottom: 12%;
  z-index: 9;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  min-width: 122px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  background: rgba(246, 250, 249, 0.88);
  box-shadow: 0 9px 16px rgba(43, 62, 57, 0.14);
}

.context-layer-count b {
  grid-row: 1 / 3;
  align-self: center;
  color: rgba(41, 88, 77, 0.78);
  font-size: 17px;
  font-weight: 520;
}

.context-layer-count span { color: rgba(31, 55, 49, 0.82); font-size: 7px; font-weight: 680; line-height: 1; }
.context-layer-count small { margin-top: 4px; color: rgba(47, 76, 69, 0.52); font-size: 5px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .context-system-ring { transition: none; }
}

.knowledge-layer .aos-c-dot {
  background:
    radial-gradient(circle at 34% 24%, #fff 0 10%, #d4d8db 30%, #9aa1a6 64%, #eef0f1 100%);
}

.knowledge-layer:nth-of-type(odd) .aos-c-dot {
  background:
    radial-gradient(circle at 34% 24%, #fff 0 10%, #e3e6e8 28%, #a6adb2 64%, #f5f6f7 100%);
}

.logo-layer .aos-c-dot {
  border-color: rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(circle at 33% 22%, #fff 0 8%, #d8dcdf 22%, #697177 58%, #cbd0d3 82%, #f8f9f9 100%);
  box-shadow:
    inset -4px -6px 9px rgba(44, 50, 54, 0.36),
    inset 3px 4px 7px rgba(255, 255, 255, 0.82),
    0 9px 12px rgba(47, 53, 57, 0.28);
}

.aos-visual.changing .aos-platform {
  filter: saturate(0.96);
}

.aos-controls {
  position: sticky;
  z-index: 8;
  left: 50%;
  top: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 42px 1px 42px;
  align-items: center;
  width: 102px;
  height: 42px;
  padding: 0 8px;
  border-radius: 22px;
  background: rgba(20, 20, 20, 0.46);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
  align-self: start;
  grid-column: 1 / -1;
  margin-top: -64px;
}

.aos-arrow {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.aos-arrow::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: rotate(45deg);
}

.aos-arrow-prev::before {
  left: 18px;
  transform: rotate(-135deg);
}

.aos-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
  border-radius: 50%;
}

.aos-control-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.24);
}

section.industries.industries {
  max-width: none;
  padding: clamp(80px, 8vw, 120px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 15, 15, 0.08);
  border-bottom: 1px solid rgba(15, 15, 15, 0.08);
  background: var(--bg);
}

.industry-heading {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.industry-heading h2 {
  max-width: 768px;
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.industry-carousel {
  --industry-gap: 27px;
  --industry-card-width: min(78vw, 20.125rem);
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
  outline: none;
}

.industry-viewport {
  margin-top: 32px;
  overflow: visible;
}

.industry-track {
  display: flex;
  gap: var(--industry-gap);
  padding-bottom: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
}

.industry-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.industry-track::-webkit-scrollbar {
  display: none;
}

.industry-slide {
  --industry-saturation: 0.94;
  --industry-contrast: 1.04;
  --industry-brightness: 0.96;
  --industry-hover-saturation: 1;
  --industry-hover-brightness: 1;
  --industry-vignette: 0.16;
  position: relative;
  flex: 0 0 var(--industry-card-width);
  max-width: 24rem;
  scroll-snap-align: center;
  background: transparent;
}

.industry-slide:nth-child(2) {
  --industry-saturation: 0.92;
  --industry-contrast: 1.03;
  --industry-brightness: 0.97;
  --industry-hover-saturation: 0.98;
  --industry-hover-brightness: 1.01;
  --industry-vignette: 0.14;
}

.industry-slide:nth-child(3) {
  --industry-saturation: 0.96;
  --industry-contrast: 1.04;
  --industry-brightness: 0.98;
  --industry-hover-saturation: 1.02;
  --industry-hover-brightness: 1.02;
  --industry-vignette: 0.18;
}

.industry-slide:nth-child(4) {
  --industry-saturation: 0.9;
  --industry-contrast: 1.03;
  --industry-brightness: 0.99;
  --industry-hover-saturation: 0.96;
  --industry-hover-brightness: 1.02;
  --industry-vignette: 0.15;
}

.industry-slide:nth-child(5) {
  --industry-saturation: 0.92;
  --industry-contrast: 1.04;
  --industry-brightness: 0.97;
  --industry-hover-saturation: 0.98;
  --industry-hover-brightness: 1.01;
  --industry-vignette: 0.16;
}

.industry-slide:nth-child(6) {
  --industry-saturation: 0.88;
  --industry-contrast: 1.03;
  --industry-brightness: 0.98;
  --industry-hover-saturation: 0.94;
  --industry-hover-brightness: 1.02;
  --industry-vignette: 0.12;
}

.industry-slide:nth-child(7) {
  --industry-saturation: 0.95;
  --industry-contrast: 1.04;
  --industry-brightness: 0.97;
  --industry-hover-saturation: 1.01;
  --industry-hover-brightness: 1.01;
  --industry-vignette: 0.18;
}

.industry-card {
  position: relative;
  display: block;
  width: 100%;
  /* 20% taller than 4/5 → 4/6 = 2/3 */
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #171817;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.industry-card:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.industry-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    saturate(var(--industry-saturation))
    contrast(var(--industry-contrast))
    brightness(var(--industry-brightness));
  transform: scale(1);
  -webkit-user-drag: none;
  user-select: none;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms ease;
}

.industry-slide.is-active .industry-card img,
.industry-card:hover img,
.industry-card:focus-visible img {
  filter:
    saturate(var(--industry-hover-saturation))
    contrast(var(--industry-contrast))
    brightness(var(--industry-hover-brightness));
}

.industry-card:hover img,
.industry-card:focus-visible img {
  transform: scale(1.012);
}

/* Keep focal subjects inside the 4:5 cover crop — masters stay full-frame */
.industry-slide:nth-child(1) .industry-card img { object-position: 40% 55%; } /* SF aerial (IT) */
.industry-slide:nth-child(2) .industry-card img { object-position: 18% 48%; } /* freight truck cab kept in frame */
.industry-slide:nth-child(3) .industry-card img { object-position: 32% 42%; } /* WALL ST + flag */
.industry-slide:nth-child(4) .industry-card img { object-position: 58% 62%; } /* walkers + long shadows */
.industry-slide:nth-child(5) .industry-card img { object-position: 50% 46%; } /* colonnade + inscription */
.industry-slide:nth-child(6) .industry-card img { object-position: 50% 48%; } /* concourse crowd */
.industry-slide:nth-child(7) .industry-card img { object-position: 50% 50%; } /* data center aisle (Eng) */

.industry-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, transparent 32%);
  pointer-events: none;
  transition: opacity 320ms ease;
}

.industry-card-shade::after {
  content: none;
}

.industry-card-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
  pointer-events: none;
}

.industry-card-copy small {
  display: none;
}

.industry-card-copy strong {
  max-width: calc(100% - 8px);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
}

.industry-card:hover .industry-card-shade,
.industry-card:focus-visible .industry-card-shade {
  opacity: 0.92;
}

.industry-card-status {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(12, 16, 16, 0.5);
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  font-weight: 560;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  pointer-events: none;
}

.industry-card-action {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0;
  background: rgba(12, 16, 16, 0.42);
  color: #fff;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    opacity 240ms ease,
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.industry-card:hover .industry-card-action,
.industry-card:focus-visible .industry-card-action {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(12, 16, 16, 0.58);
}

.industry-card-summary {
  padding: 20px 0 0;
}

.industry-card-summary h3 {
  max-width: 400px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.industry-card-summary p {
  max-width: 420px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 24px;
}

.industry-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
}

.industry-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #eeeeea;
  color: #111;
  font: inherit;
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease;
}

.industry-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.industry-arrow:hover:not(:disabled) {
  background: #e2e2dd;
}

.industry-arrow:focus-visible,
.industry-progress button:focus-visible {
  z-index: 2;
  outline: 2px solid #111;
  outline-offset: 3px;
}

.industry-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eeeeea;
}

.industry-progress button {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.25);
  cursor: pointer;
  transition: width 260ms ease, background-color 260ms ease;
}

.industry-progress button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}

.industry-progress button[aria-selected="true"] {
  width: 28px;
  background: #111;
}

.industry-progress button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.industry-carousel.is-autoplaying .industry-progress button[aria-selected="true"]::after {
  animation: industryProgress 5s linear forwards;
}

@keyframes industryProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.industry-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.industry-status span {
  color: #111;
}

@media (min-width: 640px) {
  .industry-carousel {
    --industry-card-width: 20.7rem;
  }
}

/* Editorial typography system — calibrated from the Industries section. */
:root {
  --section-space: clamp(80px, 8vw, 120px);
  --editorial-heading: #151716;
  --editorial-subheading: #4f5350;
  --editorial-copy: #747872;
  --editorial-faint: #969a94;
}

body {
  color: var(--editorial-heading);
  font-weight: 400;
}

main > section:not(.hero):not(.closing-video) {
  color: var(--editorial-heading);
}

.eyebrow,
.highlights .section-heading .eyebrow,
.roi-stats-heading .roi-classic-eyebrow,
.industry-stage-eyebrow {
  margin-bottom: 14px;
  color: var(--editorial-faint);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.atlas h2,
section.highlights.highlights .section-heading h2,
.industry-heading h2,
.roi.roi-classic .roi-stats-heading h2,
section.cta.cta h2 {
  max-width: 820px;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 390;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.industry-heading h2 {
  max-width: 768px;
  font-size: clamp(30px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.atlas h2 {
  color: rgba(255, 255, 255, 0.94);
}

.atlas .eyebrow {
  color: rgba(255, 255, 255, 0.42);
}

.atlas a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 450;
}

section.highlights.highlights .feature .feature-copy h3,
.industry-card-summary h3 {
  color: var(--editorial-subheading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

section.highlights.highlights .feature .feature-copy p,
.industry-card-summary p,
.industry-use-case span,
.roi-stats-heading > p:last-child {
  color: var(--editorial-copy);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

section.highlights.highlights .feature .feature-copy a {
  color: #346a50;
  font-size: 13px;
  font-weight: 500;
}

.aos-tab-label {
  font-size: 13px;
  font-weight: 430;
  letter-spacing: -0.005em;
}

.aos-tab-description,
.aos-tab-description > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.aos-tab-description strong,
.aos-tab[data-title] .aos-tab-description strong {
  font-size: 16px;
  font-weight: 420;
  line-height: 1.35;
}

.roi.roi-classic .roi-stats-heading h2 {
  max-width: 760px;
}

.roi-stats-heading {
  margin-bottom: clamp(40px, 5vw, 68px);
}

.roi-stat-card {
  padding: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0;
}

.roi-stat-index {
  color: var(--editorial-faint);
  font-size: 10px;
  font-weight: 500;
}

.roi-stat-card h3 {
  gap: 8px 12px;
  padding-top: 38px;
  font-weight: 390;
  line-height: 1;
  letter-spacing: -0.035em;
}

.roi-stat-card h3 strong,
.roi-stat-card-savings h3 strong,
.roi-stat-card-roi h3 strong,
.roi-stat-card-support h3 strong {
  font-size: clamp(48px, 5.6vw, 76px);
  font-weight: 380;
  letter-spacing: -0.055em;
}

.roi-stat-card h3 span {
  max-width: 190px;
  color: var(--editorial-copy);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.roi-stat-card > p {
  color: var(--editorial-copy);
  font-size: 11px;
  line-height: 1.6;
}

section.cta.cta {
  padding: clamp(48px, 6vw, 82px);
}

section.cta.cta h2 {
  color: var(--editorial-subheading);
}

.button,
.button.primary,
.button.ghost,
.button.dark,
.button.light {
  font-size: 12px;
  font-weight: 500;
}

.closing-video h2 {
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 380;
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.footer-brand {
  font-size: clamp(28px, 2.1vw, 36px);
  font-weight: 430;
  letter-spacing: -0.03em;
}

.footer-company p {
  color: rgba(250, 250, 247, 0.5);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.footer-column h2 {
  color: rgba(250, 250, 247, 0.36);
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0.055em;
}

.footer-column a {
  color: rgba(250, 250, 247, 0.62);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* Product media keeps its authored ratio; cards no longer stretch it. */
section.highlights.highlights .feature,
section.highlights.highlights .feature.wide {
  align-self: start;
}

section.highlights.highlights .workflow-watchtower {
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 7 / 4;
  flex: 0 0 auto;
}

section.highlights.highlights .agent-execution-demo,
section.highlights.highlights .memory-engine-demo {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.75 / 1;
  flex: 0 0 auto;
}

section.highlights.highlights .feature:not(.wide) .feature-copy,
section.highlights.highlights .feature.wide .feature-copy {
  min-height: 176px;
  padding: 20px 6px 8px;
  flex: 1 1 auto;
}

@media (max-width: 1100px) {
  section.highlights.highlights .feature,
  section.highlights.highlights .feature.wide {
    width: 100%;
  }

  section.highlights.highlights .workflow-watchtower,
  section.highlights.highlights .agent-execution-demo,
  section.highlights.highlights .memory-engine-demo {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .atlas h2,
  section.highlights.highlights .section-heading h2,
  .industry-heading h2,
  .roi.roi-classic .roi-stats-heading h2,
  section.cta.cta h2 {
    font-size: 32px;
  }

  .roi-stat-card h3 strong,
  .roi-stat-card-savings h3 strong,
  .roi-stat-card-roi h3 strong,
  .roi-stat-card-support h3 strong {
    font-size: 54px;
  }

  section.highlights.highlights .workflow-watchtower {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  section.highlights.highlights .agent-execution-demo,
  section.highlights.highlights .memory-engine-demo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Canonical page shell and typography lock. Keep this final in the cascade. */
:root {
  --content-max: 1504px;
  --shell-gutter: max(
    var(--page-pad),
    calc(((100vw - var(--content-max)) / 2) + var(--page-pad))
  );
}

body,
button,
input,
select,
textarea {
  font-family: "Inter", Arial, sans-serif;
}

main > section:not(.hero) :is(h2, h3, p, a, button),
.site-footer :is(h2, p, a) {
  font-family: "Inter", Arial, sans-serif;
}

section.logo-marquee.logo-marquee,
section.context-flow.agent-workflow-flow,
.highlights .section-heading,
.highlights .highlight-grid,
.industry-heading,
.industry-carousel,
.aos-layout {
  width: min(100%, var(--content-max));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--page-pad);
  padding-left: var(--page-pad);
  box-sizing: border-box;
}

section.atlas.atlas,
section.roi.roi-classic {
  padding-right: var(--shell-gutter);
  padding-left: var(--shell-gutter);
}

section.cta.cta {
  width: calc(100% - (var(--shell-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-pad) * 2));
}

.aos-layout {
  max-width: var(--content-max);
}

.site-footer {
  padding-right: var(--shell-gutter);
  padding-left: var(--shell-gutter);
}

.footer-top {
  width: 100%;
  max-width: calc(var(--content-max) - (var(--page-pad) * 2));
}

.atlas h2,
section.highlights.highlights .section-heading h2,
.industry-heading h2,
.roi.roi-classic .roi-stats-heading h2,
section.cta.cta h2 {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 390;
}

.industry-heading h2,
section.highlights.highlights .feature .feature-copy h3,
.industry-card-summary h3,
.industry-stage-name {
  font-weight: 400;
}

section.highlights.highlights .feature .feature-copy p,
.industry-card-summary p,
.industry-stage-desc,
.industry-use-case span,
.roi-stats-heading > p:last-child,
.footer-company p,
.footer-column a {
  font-weight: 400;
}

.highlights .section-heading .eyebrow,
.roi-stats-heading .roi-classic-eyebrow,
.industry-stage-eyebrow,
.footer-column h2 {
  font-weight: 500;
}

@media (max-width: 760px) {
  :root {
    --page-pad: 24px;
  }

  section.cta.cta {
    width: calc(100% - (var(--page-pad) * 2));
  }

  .footer-top {
    max-width: none;
  }
}

/* Context Substrate keeps a visible, opaque workspace against the white scene. */
.aos-synthesis-card.poetic-upload-demo {
  border-color: rgba(27, 31, 28, 0.2);
  background: linear-gradient(145deg, #fbfbf8 0%, #f3f3ef 58%, #ecece7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 28px rgba(23, 28, 25, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.aos-synthesis-card.poetic-upload-demo::before {
  border-color: rgba(255, 255, 255, 0.84);
}

.aos-synthesis-card.poetic-upload-demo :is(
  .poetic-file,
  .poetic-folder-drop,
  .poetic-upload-composer
) {
  background: #fffffd;
  border-color: rgba(27, 31, 28, 0.16);
}

.aos-synthesis-card.poetic-upload-demo .poetic-upload-composer {
  color: rgba(27, 31, 28, 0.56);
}

@media (min-width: 1024px) {
  .industry-heading,
  .industry-carousel {
    padding-left: 48px;
    padding-right: 48px;
  }

  .industry-carousel {
    --industry-card-width: 22.5rem;
  }
}



/* Centered industry workflows stage — horizontal 4:3 silver glass */
.industry-stage:not([open]) {
  display: none !important;
}

.industry-stage {
  --industry-saturation: 0.94;
  --industry-contrast: 1.04;
  --industry-brightness: 0.96;
  --industry-vignette: 0.16;
  --stage-glass-blur: blur(24px) saturate(0.8);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* Same width; ~15% shorter than prior 4/3 stage (4 / 2.55 ≈ 4/3 × 1/0.85) */
  width: min(1120px, calc(100vw - 40px), calc((100dvh - 40px) * 4 / 2.55));
  max-width: calc(100vw - 40px);
  aspect-ratio: 4 / 2.55;
  height: auto;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(226, 230, 232, 0.48)),
    #edf0f1;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: var(--stage-glass-blur);
  backdrop-filter: var(--stage-glass-blur);
  box-shadow:
    inset 0 0 0 1px rgba(132, 141, 147, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 80px rgba(50, 57, 61, 0.18);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition:
    transform 420ms var(--motion-ease-out),
    opacity 280ms var(--motion-ease-standard),
    overlay 420ms allow-discrete,
    display 420ms allow-discrete;
}

.industry-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%);
}

.industry-stage[open] {
  display: flex !important;
  transform: translateY(0) scale(1);
  opacity: 1;
}

@starting-style {
  .industry-stage[open] {
    transform: translateY(12px) scale(0.98);
    opacity: 0;
  }
}

.industry-stage::backdrop {
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    background 320ms var(--motion-ease-standard),
    backdrop-filter 320ms var(--motion-ease-standard),
    -webkit-backdrop-filter 320ms var(--motion-ease-standard),
    overlay 420ms allow-discrete,
    display 420ms allow-discrete;
}

.industry-stage[open]::backdrop {
  background: rgba(15, 18, 20, 0.36);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
  backdrop-filter: blur(10px) saturate(0.85);
}

@starting-style {
  .industry-stage[open]::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

.industry-stage-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 0.92fr) minmax(0, 1.28fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.industry-stage-close {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(237, 239, 240, 0.7));
  color: var(--ink);
  -webkit-backdrop-filter: blur(14px) saturate(0.85);
  backdrop-filter: blur(14px) saturate(0.85);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(132, 141, 147, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 22px rgba(50, 57, 61, 0.1);
  transition:
    background 150ms var(--motion-ease-standard),
    transform 150ms var(--motion-ease-standard);
}

.industry-stage-close:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 239, 240, 0.86));
  transform: translateY(-1px);
}

.industry-stage-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.industry-stage-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(132, 141, 147, 0.14);
  background: #111314;
}

.industry-stage-media {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.industry-stage-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -80px 90px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.industry-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    saturate(var(--industry-saturation))
    contrast(var(--industry-contrast))
    brightness(var(--industry-brightness));
  transform: scale(1.02);
}

.industry-stage[open] .industry-stage-image {
  animation: industryStageImageReveal 900ms var(--motion-ease-out) both;
}

@keyframes industryStageImageReveal {
  from { transform: scale(1.08); }
  to { transform: scale(1.02); }
}

.industry-stage-media-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 36%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, transparent 48%);
  pointer-events: none;
}

.industry-stage-header {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 11, 0.72) 34%, rgba(8, 10, 11, 0.88));
}

.industry-stage-eyebrow {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.industry-stage-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.industry-stage-number {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.industry-stage-name {
  max-width: 18ch;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}

.industry-stage-desc {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
}

.industry-stage-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  width: fit-content;
  margin: 16px 0 0 auto;
  color: rgba(17, 17, 17, 0.78);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.industry-stage-link span {
  transition: transform 180ms ease;
}

.industry-stage-link:hover,
.industry-stage-link:focus-visible {
  color: #111;
}

.industry-stage-link:hover span,
.industry-stage-link:focus-visible span {
  transform: translate(2px, -2px);
}

.industry-stage-link:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.36);
  outline-offset: 4px;
}

.industry-stage-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.industry-stage-switch button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 150ms var(--motion-ease-standard);
}

.industry-stage-switch button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.industry-stage-switch button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.industry-stage-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 22px 24px 24px;
  background: rgba(255, 255, 255, 0.28);
}

.industry-stage-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin-bottom: 14px;
  color: rgba(48, 53, 57, 0.5);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.industry-detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 82, 87, 0.28) transparent;
}

.industry-detail:not(.is-active),
.industry-detail[hidden] {
  display: none !important;
}

.industry-use-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  counter-reset: workflow;
}

.industry-use-case {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: start;
  padding: 12px 4px 13px;
  border: 0;
  border-bottom: 1px solid rgba(74, 82, 87, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  counter-increment: workflow;
  transition: background 180ms var(--motion-ease-standard);
}

.industry-use-cases .industry-use-case:last-child {
  border-bottom: 0;
}

.industry-use-case::before {
  content: counter(workflow, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 2px;
  color: rgba(48, 53, 57, 0.4);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.industry-use-case:hover {
  background: rgba(74, 82, 87, 0.05);
  box-shadow: none;
  transform: none;
}

.industry-use-case strong {
  grid-column: 2;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

.industry-use-case span {
  grid-column: 2;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}

.industry-stage[open] .industry-detail.is-active .industry-use-case {
  animation: industryWorkflowReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.industry-stage[open] .industry-use-case:nth-child(2) { animation-delay: 45ms; }
.industry-stage[open] .industry-use-case:nth-child(3) { animation-delay: 90ms; }
.industry-stage[open] .industry-use-case:nth-child(4) { animation-delay: 135ms; }
.industry-stage[open] .industry-use-case:nth-child(5) { animation-delay: 180ms; }
.industry-stage[open] .industry-use-case:nth-child(6) { animation-delay: 225ms; }
.industry-stage[open] .industry-use-case:nth-child(7) { animation-delay: 270ms; }
.industry-stage[open] .industry-use-case:nth-child(8) { animation-delay: 315ms; }
.industry-stage[open] .industry-use-case:nth-child(9) { animation-delay: 360ms; }

@keyframes industryWorkflowReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.roi {
  border: 1px solid rgba(15, 15, 15, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(ellipse 58% 42% at 14% 5%, rgba(255, 255, 255, 0.98), transparent 72%),
    radial-gradient(ellipse 44% 38% at 88% 92%, rgba(255, 255, 255, 0.72), transparent 70%),
    linear-gradient(145deg, #f4f4f1, #e6e9ea);
  color: var(--ink);
}

.roi-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 24px 72px;
  align-items: end;
  margin-bottom: 40px;
}

.roi-heading h2 {
  max-width: 720px;
}

.roi-intro {
  padding-bottom: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.roi-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(241, 243, 244, 0.48));
  box-shadow:
    inset 0 0 0 1px rgba(148, 156, 161, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 70px rgba(50, 57, 61, 0.09);
  backdrop-filter: blur(24px) saturate(0.8);
  -webkit-backdrop-filter: blur(24px) saturate(0.8);
}

.roi-panel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(148, 156, 161, 0.2);
  background: rgba(255, 255, 255, 0.45);
}

.roi-panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(48, 53, 57, 0.82);
  font-size: 12px;
  font-weight: 500;
}

.roi-panel-title img {
  width: 15px;
  height: 15px;
}

.roi-panel-tag {
  color: rgba(48, 53, 57, 0.48);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.roi-panel-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr 0.8fr;
  min-height: 340px;
}

.roi-panel-grid article {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border-right: 1px solid rgba(148, 156, 161, 0.2);
}

.roi-panel-grid article:last-child {
  border-right: 0;
}

.roi-label {
  display: block;
  color: rgba(48, 53, 57, 0.5);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roi-primary-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.roi-primary-metric > strong {
  margin: 18px 0 12px;
  font-size: clamp(44px, 4.6vw, 66px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.roi-primary-metric p {
  max-width: 250px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.roi-primary-metric p b {
  color: var(--ink);
  font-weight: 500;
}

.roi-primary-metric > small {
  margin-top: 26px;
  color: #245e44;
  font-size: 12px;
}

.roi-run-chart {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.34);
}

.roi-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.roi-chart-head strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 420;
  letter-spacing: -0.02em;
}

.roi-reduction {
  padding: 5px 8px;
  border: 1px solid rgba(36, 94, 68, 0.2);
  border-radius: 4px;
  background: rgba(45, 117, 84, 0.09);
  color: #245e44;
  font-size: 11px;
  font-weight: 500;
}

.roi-chart-key {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 10px;
}

.roi-chart-key span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.roi-chart-key i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.roi-chart-key .baseline { background: rgba(48, 53, 57, 0.22); }
.roi-chart-key .contextual { background: #2d7554; }

.roi-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  align-items: end;
  flex: 1;
  min-height: 160px;
  margin-top: 14px;
  margin-bottom: 22px;
  padding-top: 8px;
  border-bottom: 1px solid rgba(48, 53, 57, 0.16);
  background: repeating-linear-gradient(to bottom, rgba(48, 53, 57, 0.05) 0 1px, transparent 1px 44px);
}

.roi-bar-group {
  display: flex;
  position: relative;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 100%;
}

.roi-bar {
  width: min(13px, 36%);
  height: var(--bar);
  min-height: 6px;
  border-radius: 2px 2px 0 0;
}

.roi-bar.baseline {
  background: rgba(48, 53, 57, 0.16);
}

.roi-bar.contextual {
  background: #2d7554;
}

.roi-bar-group small {
  position: absolute;
  bottom: -19px;
  color: rgba(48, 53, 57, 0.4);
  font-size: 8px;
  white-space: nowrap;
}

.roi-reuse-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.roi-reuse-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: auto;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(226, 230, 232, 0.6));
  box-shadow:
    inset 0 0 0 1px rgba(148, 156, 161, 0.14),
    0 10px 26px rgba(50, 57, 61, 0.12);
}

.roi-reuse-mark img {
  width: 24px;
  height: 24px;
}

.roi-reuse-card > strong {
  margin: 10px 0 8px;
  font-size: 34px;
  font-weight: 420;
  letter-spacing: -0.03em;
}

.roi-reuse-card > .roi-label {
  margin-top: 22px;
}

.roi-reuse-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.roi-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(241, 243, 244, 0.4));
  box-shadow:
    inset 0 0 0 1px rgba(148, 156, 161, 0.1),
    0 14px 40px rgba(50, 57, 61, 0.06);
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
}

.roi-stat-row > div {
  display: grid;
  min-height: 112px;
  padding: 18px 22px;
  border-right: 1px solid rgba(148, 156, 161, 0.2);
}

.roi-stat-row > div:last-child {
  border-right: 0;
}

.roi-stat-row span {
  color: rgba(48, 53, 57, 0.5);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.roi-stat-row strong {
  align-self: end;
  font-size: 26px;
  font-weight: 430;
  letter-spacing: -0.02em;
}

.roi-stat-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.roi-note {
  max-width: 880px;
  margin-top: 16px;
  color: rgba(48, 53, 57, 0.42);
  font-size: 11px;
  line-height: 1.55;
}

/* ROI story: the same silver glass, typography, and restraint used elsewhere. */
.roi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: "Inter", Arial, sans-serif;
  background:
    radial-gradient(ellipse 62% 52% at 8% 0%, rgba(255, 255, 255, 0.96), transparent 70%),
    radial-gradient(ellipse 48% 40% at 94% 100%, rgba(255, 255, 255, 0.66), transparent 72%),
    linear-gradient(145deg, #f4f4f1, #e6e9ea);
}

.roi * {
  font-family: inherit;
}

.roi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent);
}

.roi-heading {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 32px 80px;
  margin-bottom: 44px;
}

.roi-heading h2 {
  max-width: 760px;
  font-weight: 400;
  letter-spacing: 0;
}

.roi-intro {
  padding-bottom: 4px;
}

.roi-intro p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
}

.roi-model-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: rgba(48, 53, 57, 0.5);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.roi-model-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2d7554;
}

.roi-workflow {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(226, 230, 232, 0.48)),
    #edf0f1;
  box-shadow:
    inset 0 0 0 1px rgba(132, 141, 147, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 24px 70px rgba(50, 57, 61, 0.09);
  backdrop-filter: blur(24px) saturate(0.8);
  -webkit-backdrop-filter: blur(24px) saturate(0.8);
}

.roi-workflow::before {
  content: "";
  position: absolute;
  inset: 52px 0 0;
  z-index: 0;
  opacity: 0.72;
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.roi-workflow-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(132, 141, 147, 0.16);
  background: rgba(255, 255, 255, 0.5);
}

.roi-workflow-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(48, 53, 57, 0.78);
  font-size: 11px;
  font-weight: 500;
}

.roi-workflow-head img {
  width: 15px;
  height: 15px;
}

.roi-workflow-head > small {
  color: rgba(48, 53, 57, 0.4);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roi-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.84fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 38px);
  align-items: center;
  padding: clamp(34px, 4.4vw, 64px);
}

.roi-flow-connector {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  z-index: -1;
  height: 1px;
}

.roi-flow-connector i {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(74, 82, 87, 0.12), rgba(45, 117, 84, 0.46), rgba(74, 82, 87, 0.12));
  transform-origin: left center;
}

.roi-flow-connector span {
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(45, 117, 84, 0.56);
  border-right: 1px solid rgba(45, 117, 84, 0.56);
  transform: rotate(45deg);
}

.roi-flow-connector b {
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #2d7554;
  box-shadow: 0 0 0 4px rgba(45, 117, 84, 0.1);
  transform: translate(-50%, -50%);
}

.roi-run-card,
.roi-memory-card,
.roi-impact > article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(237, 239, 240, 0.62));
  box-shadow:
    inset 0 0 0 1px rgba(132, 141, 147, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 44px rgba(50, 57, 61, 0.09);
  transform-style: preserve-3d;
  will-change: transform;
}

.roi-run-card::before,
.roi-memory-card::before,
.roi-impact > article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--roi-x, 50%) var(--roi-y, 50%), rgba(255, 255, 255, 0.9), transparent 38%);
  transition: opacity 220ms ease;
  pointer-events: none;
}

.roi-run-card:hover::before,
.roi-memory-card:hover::before,
.roi-impact > article:hover::before {
  opacity: 0.72;
}

.roi-run-card {
  min-height: 342px;
  padding: clamp(22px, 2.5vw, 32px);
}

.roi-run-card > * ,
.roi-memory-card > *,
.roi-impact > article > * {
  position: relative;
  z-index: 1;
}

.roi-repeat-run {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(224, 233, 228, 0.68)),
    #edf1ee;
}

.roi-card-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(74, 82, 87, 0.1);
}

.roi-card-index span {
  color: rgba(48, 53, 57, 0.45);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.roi-card-index small {
  color: rgba(48, 53, 57, 0.7);
  font-size: 11px;
}

.roi-run-time {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 30px;
}

.roi-run-time strong {
  font-size: clamp(54px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.roi-run-time span {
  color: var(--muted);
  font-size: 13px;
}

.roi-run-card > p {
  margin-top: 13px;
  color: rgba(48, 53, 57, 0.76);
  font-size: 13px;
}

.roi-task-list {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid rgba(74, 82, 87, 0.09);
}

.roi-task-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  border-bottom: 1px solid rgba(74, 82, 87, 0.09);
  color: var(--muted);
  font-size: 10px;
}

.roi-task-list i {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 1px solid rgba(45, 117, 84, 0.25);
  border-radius: 50%;
  background: rgba(45, 117, 84, 0.08);
}

.roi-task-list i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 5px;
  height: 3px;
  border-left: 1px solid #2d7554;
  border-bottom: 1px solid #2d7554;
  transform: rotate(-45deg);
}

.roi-time-returned {
  display: inline-flex;
  gap: 4px;
  margin-top: 18px;
  padding: 6px 8px;
  border: 1px solid rgba(45, 117, 84, 0.14);
  border-radius: 4px;
  background: rgba(45, 117, 84, 0.07);
  color: rgba(36, 94, 68, 0.72);
  font-size: 9px;
}

.roi-time-returned b {
  color: #245e44;
  font-weight: 600;
}

.roi-memory-card {
  display: flex;
  min-height: 318px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 26px 20px 24px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(219, 224, 226, 0.6));
}

.roi-memory-stack {
  position: relative;
  width: 160px;
  height: 126px;
  margin: 0 auto auto;
  perspective: 700px;
}

.roi-memory-stack > span {
  position: absolute;
  left: 50%;
  top: 12px;
  display: grid;
  place-items: center;
  width: 132px;
  height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(211, 217, 220, 0.66));
  box-shadow:
    inset 0 0 0 1px rgba(132, 141, 147, 0.12),
    0 12px 24px rgba(50, 57, 61, 0.08);
  transform: translateX(-50%);
}

.roi-memory-stack > span:nth-child(1) { top: 34px; }
.roi-memory-stack > span:nth-child(2) { top: 26px; }
.roi-memory-stack > span:nth-child(3) { top: 18px; }
.roi-memory-stack > .roi-memory-face { top: 10px; }

.roi-memory-face img {
  width: 34px;
  height: 34px;
}

.roi-memory-card > small {
  color: rgba(48, 53, 57, 0.45);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.roi-memory-card h3 {
  max-width: 210px;
  margin-top: 9px;
  font-size: 20px;
  font-weight: 420;
  line-height: 1.12;
}

.roi-memory-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 16px;
}

.roi-memory-tags span {
  padding: 5px 7px;
  border-radius: 99px;
  background: rgba(20, 20, 20, 0.68);
  color: rgba(255, 255, 255, 0.84);
  font-size: 8px;
  backdrop-filter: blur(14px);
}

.roi-impact {
  display: grid;
  grid-template-columns: 1.18fr 0.91fr 0.91fr;
  gap: 12px;
  margin-top: 12px;
}

.roi-impact > article {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}

.roi-impact > article > span {
  margin-bottom: auto;
  color: rgba(48, 53, 57, 0.48);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.roi-impact > article > strong {
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.roi-impact > article > strong b {
  font: inherit;
}

.roi-impact > article > p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}

.roi-impact-lead {
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.1), transparent 38%),
    rgba(20, 20, 20, 0.9) !important;
  color: #fff;
}

.roi-impact-lead > span,
.roi-impact-lead > p {
  color: rgba(255, 255, 255, 0.48) !important;
}

.roi-note {
  max-width: 760px;
  margin-top: 15px;
  color: rgba(48, 53, 57, 0.4);
  font-size: 10px;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px !important;
  border-radius: 7px;
  background: var(--card);
}

.cta > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button.dark {
  background: #101010;
  color: #fff;
}

.button.light {
  background: #fff;
  color: #111;
}

section.closing-video.closing-video {
  position: relative;
  max-width: none;
  min-height: 82vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #050505;
  color: #fff;
}

.closing-video video,
.closing-video-shade {
  position: absolute;
  inset: 0;
}

.closing-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing-video-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.34)),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48));
}

.closing-video-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 82vh;
  align-items: center;
  justify-content: center;
  padding: 72px 32px;
  text-align: center;
}

.closing-video h2 {
  max-width: 980px;
  color: #fff;
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  text-wrap: balance;
}

.site-footer {
  position: relative;
  min-height: clamp(780px, 52vw, 980px);
  overflow: hidden;
  background: #0b0b0b;
  color: rgba(250, 250, 247, 0.74);
  padding: clamp(96px, 8vw, 136px) clamp(48px, 12.5vw, 256px) 0;
}

.footer-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(4, minmax(124px, 1fr));
  column-gap: clamp(52px, 6.5vw, 116px);
  row-gap: 48px;
  max-width: 1480px;
  margin: 0 auto;
}

.footer-company {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: #fafaf7;
  font-size: clamp(32px, 2.4vw, 42px);
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.footer-brand .context-logo {
  width: 31px;
  height: 31px;
}

.footer-company p {
  color: rgba(250, 250, 247, 0.58);
  font-size: 17px;
  line-height: 1.35;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-column h2 {
  margin-bottom: 16px;
  color: rgba(250, 250, 247, 0.4);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.footer-column a {
  width: fit-content;
  color: rgba(250, 250, 247, 0.68);
  font-size: 17px;
  line-height: 1.25;
  transition: color 180ms ease;
}

.footer-column a:hover {
  color: #fafaf7;
}

.footer-ascii-image {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  top: auto;
  z-index: 1;
  width: min(100vw, 1536px);
  min-width: min(100vw, 1536px);
  height: auto;
  opacity: 0.7;
  filter: grayscale(1) invert(1) brightness(1.28) contrast(0.78);
  transform: translateX(-50%);
  pointer-events: none;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

@keyframes originalToolFlow {
  0% {
    transform: translate(-60px, calc(var(--flow-start-y) - 50%)) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(50cqw - 50%), -50%) scale(0.12);
    opacity: 0;
  }
}

@keyframes originalSignalFlow {
  0% {
    transform: translate(-30px, -50%) scale(0.55);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translate(45cqw, calc(var(--flow-end-y) - 50%)) scale(1);
    opacity: 0;
  }
}

@keyframes workflowSourceFlow {
  0% {
    transform: translate(-60px, calc(var(--flow-start-y) - 50%)) scale(0.9);
    opacity: 0;
  }
  10%, 80% { opacity: 1; }
  100% {
    transform: translate(calc(50cqw - 50%), -50%) scale(0.12);
    opacity: 0;
  }
}

@keyframes workflowSignalRoute {
  0% {
    transform: translate(-30px, -50%) scale(0.55);
    opacity: 0;
  }
  15% { opacity: 1; }
  86% { opacity: 1; }
  100% {
    transform: translate(45cqw, calc(var(--flow-end-y) - 50%)) scale(1);
    opacity: 0;
  }
}

@keyframes workflowCardMorph {
  0%, 44% {
    width: var(--task-card-width);
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  56%, 100% {
    width: var(--workflow-card-width);
    min-height: 78px;
    padding-top: 12px;
    padding-bottom: 11px;
  }
}

@keyframes workflowTaskConvert {
  0%, 44% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  56%, 100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.94);
  }
}

@keyframes workflowDetailsReveal {
  0%, 48% {
    opacity: 0;
    transform: translateY(3px);
  }
  58%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes workflowProgress {
  0%, 58% { transform: scaleX(0); }
  84%, 100% { transform: scaleX(1); }
}

@keyframes workflowStatusReveal {
  0%, 82% { opacity: 0; }
  88%, 100% { opacity: 1; }
}

@keyframes workflowAgentOne {
  0%, 60% { background: #eceeeb; color: #252725; }
  66%, 100% { background: #2d7554; color: #fff; }
}

@keyframes workflowAgentTwo {
  0%, 68% { background: #eceeeb; color: #252725; }
  74%, 100% { background: #2d7554; color: #fff; }
}

@keyframes workflowAgentThree {
  0%, 76% { background: #eceeeb; color: #252725; }
  82%, 100% { background: #2d7554; color: #fff; }
}

@keyframes brainWorkspaceCycle {
  0%, 24% { opacity: 0.58; filter: grayscale(1) blur(0.45px) brightness(1.04) contrast(0.9); transform: scale(1.01); }
  40%, 92% { opacity: 0.24; filter: grayscale(1) blur(1.45px) brightness(1.08) contrast(0.76); transform: scale(1.035); }
  98%, 100% { opacity: 0.58; filter: grayscale(1) blur(0.45px) brightness(1.04) contrast(0.9); transform: scale(1.01); }
}

@keyframes brainSlackScroll {
  0%, 8% { transform: translateY(0); }
  30%, 92% { transform: translateY(-24px); }
  98%, 100% { transform: translateY(0); }
}

@keyframes brainMeetingEnd {
  0%, 17% { opacity: 0; transform: scale(0.96); }
  24%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.96); }
}

@keyframes brainCellUpdate {
  0%, 18% { background: transparent; color: rgba(232, 224, 215, 0.45); }
  26%, 92% { background: rgba(199, 145, 98, 0.24); color: rgba(255, 239, 224, 0.9); }
  98%, 100% { background: transparent; color: rgba(232, 224, 215, 0.45); }
}

@keyframes brainSlideAdvance {
  0%, 18% { opacity: 1; transform: translateX(0); }
  25%, 92% { opacity: 0; transform: translateX(-9px); }
  98%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes brainSlideAdvanceNext {
  0%, 18% { opacity: 0; transform: translateX(9px); }
  25%, 92% { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(9px); }
}

@keyframes brainFactCycle {
  0%, 5% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  12%, 31% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  43%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes brainGraphFactReveal {
  0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  22%, 58% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
}

@keyframes agentEmailScene {
  0%, 28% { opacity: 1; transform: scale(1); }
  32%, 100% { opacity: 0; transform: scale(1.015); }
}

@keyframes agentSlackScene {
  0%, 30% { opacity: 0; transform: scale(1.015); }
  34%, 61% { opacity: 1; transform: scale(1); }
  65%, 100% { opacity: 0; transform: scale(1.015); }
}

@keyframes agentCalScene {
  0%, 63% { opacity: 0; transform: scale(1.015); }
  67%, 89% { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; transform: scale(1.015); }
}

@keyframes agentEmailPointer {
  0%, 3% { opacity: 0; transform: translate(0, -5px); }
  7% { opacity: 1; transform: translate(0, 0); }
  16% { opacity: 1; transform: translate(-150px, 43px); }
  25% { opacity: 1; transform: translate(-55px, 118px); }
  29% { opacity: 0; transform: translate(-55px, 118px); }
  100% { opacity: 0; }
}

@keyframes agentSlackPointer {
  0%, 34% { opacity: 0; transform: translate(0, -4px); }
  38% { opacity: 1; transform: translate(0, 0); }
  49% { opacity: 1; transform: translate(-170px, 52px); }
  59% { opacity: 1; transform: translate(-60px, 116px); }
  63%, 100% { opacity: 0; transform: translate(-60px, 116px); }
}

@keyframes agentCalPointer {
  0%, 67% { opacity: 0; transform: translate(0, -4px); }
  71% { opacity: 1; transform: translate(0, 0); }
  79% { opacity: 1; transform: translate(-180px, 52px); }
  87% { opacity: 1; transform: translate(-75px, 118px); }
  91%, 100% { opacity: 0; transform: translate(-75px, 118px); }
}

@keyframes agentFocusPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(190, 104, 78, 0); }
  50% { box-shadow: inset 0 0 0 1px rgba(190, 104, 78, 0.2); }
}

@keyframes agentEventPop {
  0%, 68% { opacity: 0; transform: scale(0.72); }
  75%, 91% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.72); }
}

@keyframes agentProgressLabel {
  0%, 24% { color: #245e44; font-weight: 700; }
  27%, 100% { color: rgba(32, 37, 39, 0.4); font-weight: 400; }
}

@keyframes agentProgressLabelTwo {
  0%, 24% { color: rgba(32, 37, 39, 0.4); font-weight: 400; }
  27%, 63% { color: #245e44; font-weight: 700; }
  66%, 100% { color: rgba(32, 37, 39, 0.4); font-weight: 400; }
}

@keyframes agentProgressLabelThree {
  0%, 63% { color: rgba(32, 37, 39, 0.4); font-weight: 400; }
  66%, 94% { color: #245e44; font-weight: 700; }
  97%, 100% { color: rgba(32, 37, 39, 0.4); font-weight: 400; }
}

@keyframes agentResultReveal {
  0%, 92% { opacity: 0; transform: translate(-50%, -42%) scale(0.94); }
  95%, 98% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -53%) scale(0.96); }
}

@keyframes brainMemoryCycle {
  0%, 69% { opacity: 0; transform: translateY(4px); }
  77%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes wt-breathe {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 1; }
}

@keyframes wt-signal-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.22); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.12), 0 14px 34px rgba(0, 0, 0, 0.3); }
}

@keyframes wt-shine {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes wt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes wt-rot {
  to { transform: rotate(360deg); }
}

@keyframes wt-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes contextToolFlow {
  0% {
    transform:
      translate(-50%, -50%)
      translate(max(-40cqw, -600px), 170px)
      scale(0.88);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22% {
    transform:
      translate(-50%, -50%)
      translate(max(-28cqw, -390px), 44px)
      scale(1);
    opacity: 1;
  }
  44% {
    transform:
      translate(-50%, -50%)
      translate(max(-17cqw, -235px), -130px)
      scale(1);
    opacity: 1;
  }
  64% {
    transform:
      translate(-50%, -50%)
      translate(-72px, -108px)
      scale(0.96);
    opacity: 1;
  }
  82% {
    transform:
      translate(-50%, -50%)
      translate(34px, -78px)
      scale(0.82);
    opacity: 1;
  }
  100% {
    transform:
      translate(-50%, -50%)
      translate(0, -50px)
      scale(0.12);
    opacity: 0;
  }
}

@keyframes contextSignalFlow {
  0% {
    transform:
      translate(-50%, -50%)
      translate(0, 66px)
      scale(0.55);
    opacity: 0;
  }
  12% {
    transform:
      translate(-50%, -50%)
      translate(76px, 82px)
      scale(1);
    opacity: 1;
  }
  34% {
    transform:
      translate(-50%, -50%)
      translate(min(16cqw, 220px), 24px)
      scale(1);
    opacity: 1;
  }
  56% {
    transform:
      translate(-50%, -50%)
      translate(min(25cqw, 350px), -78px)
      scale(1);
    opacity: 1;
  }
  78% {
    transform:
      translate(-50%, -50%)
      translate(min(28cqw, 440px), -132px)
      scale(1);
    opacity: 1;
  }
  100% {
    transform:
      translate(-50%, -50%)
      translate(min(42cqw, 620px), -170px)
      scale(0.92);
    opacity: 0;
  }
}

@keyframes contextCorePulse {
  0%, 100% {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(11, 11, 11, 0);
  }
  50% {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14), 0 0 0 10px rgba(11, 11, 11, 0.035);
  }
}

@keyframes contextOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes contextOrbitReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes float {
  50% {
    transform: skewY(-8deg) translate3d(-18px, -10px, 0);
  }
}

@keyframes scan {
  to {
    transform: translateY(100%);
  }
}

@media (max-width: 980px) {
  .nav-shell {
    grid-template-columns: 1fr auto;
  }

  .brand {
    justify-self: start;
  }

  .nav-left,
  .nav-right {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
    border-radius: 7px;
    background: rgba(15, 15, 15, 0.92);
  }

  .nav-shell.open {
    align-items: start;
  }

  .nav-shell.open .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .nav-shell.open .menu-button {
    grid-column: 2;
    grid-row: 1;
  }

  .nav-shell.open .nav-left,
  .nav-shell.open .nav-right {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    grid-column: 1 / -1;
  }

  .nav-shell.open .nav-left {
    grid-row: 2;
    margin-top: 6px;
  }

  .nav-shell.open .nav-right {
    grid-row: 3;
    margin-top: 4px;
  }

  .nav-shell.open .nav-left,
  .nav-shell.open .nav-right,
  .menu-button {
    display: flex;
  }

  .menu-button {
    justify-self: end;
    flex-direction: column;
    justify-content: center;
  }

  .hero-content,
  section:not(.hero),
  .logo-marquee,
  footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  section.highlights.highlights {
    padding-left: 0;
    padding-right: 0;
  }

  .highlights .section-heading,
  .highlights .highlight-grid {
    padding-left: 24px;
    padding-right: 24px;
  }

  .logo-marquee,
  .atlas,
  .section-heading.split,
  .cta {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-marquee p {
    text-align: left;
  }

  .highlight-grid {
    grid-template-columns: 1fr;
  }

  .roi-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .roi-panel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .roi-panel-grid article {
    border-bottom: 1px solid rgba(148, 156, 161, 0.2);
  }

  .roi-panel-grid .roi-run-chart {
    border-right: 0;
  }

  .roi-panel-grid .roi-reuse-card {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .roi-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .roi-stat-row > div:nth-child(2) {
    border-right: 0;
  }

  .roi-stat-row > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(148, 156, 161, 0.2);
  }

  .aos-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .aos-visual,
  .aos-controls {
    display: none !important;
  }

  .aos-tabs {
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .aos-tab,
  .aos-tab.active {
    width: 100%;
    max-width: 100%;
  }

  .feature.wide {
    min-height: auto;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .site-footer {
    min-height: 680px;
    padding: 56px 24px 40px;
  }

  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }

  .footer-company {
    grid-column: 1 / -1;
  }

  .footer-ascii {
    right: -110px;
    bottom: -12px;
    font-size: 15px;
    opacity: 0.75;
  }

  footer p {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .site-header {
    top: 12px;
  }

  .hero,
  .hero-content {
    min-height: 100vh;
  }

  .hero-content {
    padding-top: 132px;
    padding-bottom: 46px;
  }

  .hero-brand {
    margin-bottom: 16px;
    font-size: 28px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .agent-execution-demo {
    min-height: 230px;
    aspect-ratio: auto;
  }

  .workflow-watchtower {
    min-height: 220px;
    max-height: none;
    aspect-ratio: 1;
  }

  .wt-root .map-board {
    inset: 8px;
  }

  .wt-root .grid {
    left: 32px;
    right: 12px;
    top: 35px;
    bottom: 41px;
    gap: 5px;
  }

  .wt-root .route-layer {
    left: 32px;
    right: 12px;
    top: 35px;
    bottom: 41px;
  }

  .wt-root .map-axis-x {
    left: 32px;
    right: 12px;
    top: 22px;
  }

  .wt-root .map-axis-y {
    left: 6px;
    top: 37px;
    bottom: 44px;
    width: 22px;
    font-size: 5px;
    letter-spacing: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .wt-root .map-legend {
    left: 32px;
    bottom: 14px;
    gap: 10px;
    font-size: 6px;
  }

  .wt-root .map-legend i {
    width: 14px;
  }

  .wt-root .map-callout {
    padding: 3px 4px;
    font-size: 5.5px;
  }

  .wt-root .map-board::before {
    left: 8px;
    top: 7px;
    font-size: 5.5px;
  }

  .wt-root .panel {
    padding: 12px 14px;
  }

  .wt-root .ptag {
    max-width: 48%;
    gap: 5px;
    padding: 4px 6px;
    font-size: 7.5px;
  }

  .wt-root .source-strip {
    gap: 6px;
    min-height: 29px;
    padding: 4px 6px;
  }

  .wt-root .source-list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .wt-root .source-list .source-chip {
    width: 20px;
    padding: 3px;
    justify-content: center;
  }

  .wt-root .source-list .source-chip span {
    display: none;
  }

  .wt-root .rin {
    gap: 10px;
  }

  .wt-root .rlabel {
    gap: 6px;
    font-size: 8.5px;
  }

  .wt-root .rresult {
    font-size: 11.5px;
  }

  section.context-flow.context-flow {
    height: 500px;
  }

  .context-flow-stage {
    background-size: 64px 55px;
  }

  .flow-core {
    width: 112px;
    height: 112px;
  }

  .flow-core img {
    width: 80px;
    height: 80px;
  }

  .flow-source {
    min-width: 112px;
    width: auto;
    height: 54px;
    padding: 7px 10px 7px 7px;
    gap: 7px;
  }

  .flow-source-icon {
    width: 34px;
    height: 34px;
  }

  .flow-source-icon img {
    width: 28px;
    height: 28px;
  }

  .flow-source em {
    display: block;
    font-size: 11px;
  }

  .flow-signal strong {
    font-size: 10px;
  }

  .flow-signal {
    gap: 5px;
    min-height: 32px;
    padding: 5px 6px;
  }

  .workflow-source {
    min-width: 112px;
    height: 54px;
    padding: 7px 10px 7px 7px;
    gap: 7px;
  }

  .workflow-source em {
    font-size: 11px;
  }

  .workflow-card {
    --workflow-card-width: 218px;
    --task-card-width: 180px;
    width: var(--workflow-card-width);
    padding: 9px 10px;
  }

  .workflow-card-head span { font-size: 10px; }
  .workflow-task-state strong { font-size: 10px; }
  .workflow-steps { gap: 5px; }
  .workflow-steps span { font-size: 7px; }
  .workflow-steps i { width: 14px; height: 14px; }

  .aos-layout {
    display: block;
    grid-template-columns: none;
    min-height: 0;
    padding: 40px 16px 56px;
  }

  .aos-tabs {
    position: static;
    top: auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .aos-tab {
    min-height: 40px;
    padding: 7px 8px 7px 14px;
  }

  .aos-tab.active {
    width: 100%;
    min-height: 0;
    padding: 16px 20px 19px;
  }

  .aos-tab-description {
    max-width: 100%;
    font-size: 13px;
  }

  .aos-visual,
  .aos-controls {
    display: none !important;
  }

  .aos-platform,
  .aos-platform-shadow {
    left: 50%;
    top: 54%;
    width: min(78vw, 360px);
  }

  .aos-research-elevation {
    left: 50%;
    top: 29%;
    width: min(62vw, 240px);
    height: min(78vw, 300px);
  }

  .aos-sense-elevation {
    left: 50%;
    top: 40%;
    width: min(92vw, 390px);
    height: min(78vw, 320px);
  }

  .sense-graph-shell {
    border-radius: 16px;
  }

  .sense-graph-head {
    left: 11px;
    right: 11px;
    top: 9px;
    font-size: 5.5px;
  }

  .sense-graph-head b {
    gap: 4px;
    padding: 4px 6px;
    font-size: 5px;
  }

  .sense-source {
    min-height: 16px;
    padding: 0 5px 0 12px;
    font-size: 4.5px;
  }

  .sense-source::before {
    left: 5px;
    width: 3px;
    height: 3px;
  }

  .sense-node {
    width: 92px;
    min-height: 44px;
    padding: 6px 7px 5px 9px;
    border-radius: 9px;
  }

  .sense-node small {
    margin-bottom: 3px;
    font-size: 4.5px;
  }

  .sense-node strong { font-size: 6.5px; }
  .sense-node span { margin-top: 3px; font-size: 4.5px; }

  .sense-node::after {
    bottom: -3px;
    width: 6px;
    height: 6px;
  }

  .sense-conclusion {
    width: 128px;
    padding: 7px 8px;
    border-radius: 10px;
  }

  .sense-conclusion header {
    margin-bottom: 4px;
    font-size: 4px;
  }

  .sense-conclusion header b { font-size: 3.8px; }
  .sense-conclusion > strong { font-size: 7.5px; }
  .sense-conclusion p { margin: 3px 0 5px; font-size: 4.5px; }
  .sense-conclusion footer { padding-top: 4px; font-size: 4px; }

  .sense-node-entity { left: 16%; }
  .sense-node-cause { left: 39%; }
  .sense-node-time { left: 57%; }
  .sense-node-pattern { left: 27%; }
  .sense-node-event { left: 58%; }
  .sense-node-judgment { left: 85%; }

  .aos-synthesis-card {
    min-height: 66%;
    padding: 8px 9px 8px;
    border-radius: 10px;
  }

  .aos-synthesis-header {
    margin-bottom: 4px;
    font-size: 5px;
  }

  .aos-synthesis-card h3 {
    margin-bottom: 5px;
    font-size: 8px;
  }

  .aos-synthesis-title {
    padding-bottom: 5px;
  }

  .aos-synthesis-question {
    padding: 5px 4px;
  }

  .aos-synthesis-workstream {
    min-height: 19px;
    padding: 3px 4px;
    font-size: 5.5px;
  }

  .aos-synthesis-steer {
    margin-top: 5px;
    padding: 5px 6px;
  }

  .aos-synthesis-card footer {
    margin-top: 5px;
    font-size: 4.5px;
  }

  .aos-research-signal {
    transform: translate(-50%, -50%) translateZ(15px) scale(0.82);
  }

  .aos-controls {
    grid-column: 1;
    grid-row: 3;
    top: calc(100vh - 66px);
    margin-top: -52px;
  }

  section.industries.industries {
    padding-top: 72px;
    padding-bottom: 84px;
  }

  .industry-card {
    aspect-ratio: 2 / 3;
  }

  .industry-card-copy {
    padding: 20px;
  }

  .industry-card-copy strong {
    font-size: 14px;
  }

  .industry-card-summary {
    padding-top: 20px;
  }

  .industry-card-summary h3 {
    font-size: 16px;
  }

  .industry-card-summary p {
    font-size: 14px;
  }

  .industry-controls {
    gap: 12px;
    margin-top: 48px;
  }

  .industry-progress {
    gap: 3px;
  }

  .industry-stage {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    aspect-ratio: auto;
    height: min(75dvh, 646px);
    max-height: min(75dvh, 646px);
    margin: auto;
  }

  .industry-stage-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(160px, 32%) minmax(0, 1fr);
  }

  .industry-stage-hero {
    border-right: 0;
    border-bottom: 1px solid rgba(132, 141, 147, 0.14);
  }

  .industry-stage-header {
    padding: 16px 18px 14px;
  }

  .industry-stage-name {
    max-width: none;
    font-size: 22px;
  }

  .industry-stage-body {
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  }

  .industry-use-cases {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .industry-use-case {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 12px;
  }

  .industry-use-case strong {
    font-size: 14px;
  }

  .industry-use-case span {
    font-size: 12.5px;
  }


  .roi-heading {
    margin-bottom: 32px;
  }

  .roi-panel-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
  }

  .roi-panel-grid {
    grid-template-columns: 1fr;
  }

  .roi-panel-grid article {
    min-height: 0;
    border-right: 0;
  }

  .roi-panel-grid .roi-reuse-card {
    grid-column: auto;
  }

  .roi-reuse-mark {
    margin-bottom: 0;
  }

  .roi-stat-row {
    grid-template-columns: 1fr;
  }

  .roi-stat-row > div,
  .roi-stat-row > div:nth-child(2) {
    min-height: 96px;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 156, 161, 0.2);
  }

  .roi-stat-row > div:last-child {
    border-bottom: 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-company p,
  .footer-column a {
    font-size: 16px;
  }

  .footer-column h2 {
    margin-bottom: 8px;
  }

  .footer-ascii {
    right: -210px;
    bottom: 8px;
    font-size: 12px;
  }

  .sheet {
    grid-template-columns: 1.5fr repeat(2, 1fr);
  }

  .sheet div:nth-child(n + 4):not(:nth-child(5n + 1)):not(:nth-last-child(-n + 3)) {
    display: none;
  }
}

/* Context advantage: one card family, one visual rhythm, one motion frame. */
.highlights .section-heading h2 {
  max-width: 900px;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(38px, 4.25vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.highlights .highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.highlights .feature,
.highlights .feature.wide {
  display: flex;
  min-width: 0;
  min-height: 620px;
  padding: 14px;
  flex-direction: column;
  grid-row: auto;
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 55px rgba(16, 16, 16, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.highlights .feature-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 3px;
  color: rgba(11, 11, 11, 0.5);
  font-family: "Inter", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.highlights .feature-kicker span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(45, 117, 84, 0.22);
  border-radius: 50%;
  background: rgba(45, 117, 84, 0.08);
  color: #1d6547;
  font-size: 9px;
  letter-spacing: 0;
}

.highlights .workflow-watchtower,
.highlights .brain-cycle-demo,
.highlights .agent-execution-demo {
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 9px;
  background-color: #e9edee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.highlights .feature-copy {
  display: flex;
  min-height: 224px;
  padding: 22px 6px 6px;
  flex: 1;
  flex-direction: column;
}

.highlights .feature .feature-copy h3 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(20px, 1.65vw, 25px);
  font-weight: 450;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.highlights .feature .feature-copy p {
  max-width: none;
  margin: 13px 0 22px;
  color: rgba(11, 11, 11, 0.58);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

.highlights .feature .feature-copy a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  color: #1d6547;
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.highlights .feature .feature-copy a span {
  transition: transform 180ms var(--motion-ease-out);
}

.highlights .feature .feature-copy a:hover span {
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .highlights .highlight-grid {
    grid-template-columns: 1fr;
  }

  .highlights .feature,
  .highlights .feature.wide {
    min-height: 0;
  }

  .highlights .feature-copy {
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  .highlights .section-heading h2 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .highlights .feature-copy {
    min-height: 0;
    padding-top: 20px;
  }

  .highlights .workflow-watchtower,
  .highlights .brain-cycle-demo,
  .highlights .agent-execution-demo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-boot,
  .hero-boot-progress i {
    animation: none;
  }

  .hero-media video {
    transition: none;
  }

  .hero-fallback {
    transition: none;
  }

  .flow-source,
  .flow-signal,
  .workflow-source,
  .workflow-card,
  .workflow-task-state,
  .workflow-card-head,
  .workflow-card-head b,
  .workflow-progress,
  .workflow-progress i,
  .workflow-steps,
  .workflow-steps i,
  .flow-core,
  .flow-core::before,
  .flow-core::after,
  .marquee-row,
  .data-plane,
  .scanline {
    animation-play-state: paused;
  }

  .wt-root .cell {
    animation: none;
    opacity: 1;
  }

  .brain-app-workspace,
  .brain-night-label i,
  .brain-slack-scroll,
  .brain-meeting-ended,
  .brain-excel-grid i,
  .brain-slide,
  .brain-facts > span,
  .brain-memory-state {
    animation: none;
  }

  .brain-app-workspace {
    opacity: 0.14;
    filter: blur(1.4px);
  }

  .brain-facts > span {
    opacity: 0;
  }

  .brain-meeting-ended,
  .brain-slide-b {
    opacity: 1;
    transform: none;
  }

  .brain-slide-a {
    opacity: 0;
  }

  .brain-memory-state {
    opacity: 1;
    transform: none;
  }

  .industry-track,
  .industry-card img,
  .industry-card-action,
  .industry-card-shade,
  .industry-progress button::after {
    transition: none;
    animation: none;
  }

  .industry-stage {
    transition: none;
  }

  .industry-stage::backdrop,
  .industry-stage-image,
  .industry-stage[open] .industry-detail.is-active .industry-use-case {
    transition: none;
    animation: none;
  }


  .agent-app-scene,
  .agent-pointer,
  .agent-row-focus,
  .agent-thread-focus,
  .agent-cal-event,
  .agent-demo-progress span,
  .agent-demo-result,
  .agent-demo-head > span i {
    animation: none;
  }

  .agent-email-scene,
  .agent-slack-scene,
  .agent-pointer {
    opacity: 0;
  }

  .agent-cal-scene,
  .agent-cal-event {
    opacity: 1;
    transform: none;
  }

  .agent-demo-result {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .wt-root .ptag i,
  .wt-root .spin {
    animation: none;
  }

  .wt-root .ptitle.live {
    background: none;
    color: #111;
    animation: none;
    -webkit-text-fill-color: currentColor;
  }
}

@media (max-width: 980px) {
  .roi-flow {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.78fr) minmax(0, 1fr);
    gap: 14px;
    padding: 34px 24px;
  }

  .roi-run-card {
    padding: 22px 18px;
  }

  .roi-memory-stack {
    transform: scale(0.88);
  }
}

@media (max-width: 760px) {
  .roi-flow {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .roi-flow-connector {
    left: 50%;
    right: auto;
    top: 13%;
    bottom: 13%;
    width: 1px;
    height: auto;
  }

  .roi-flow-connector i {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(74, 82, 87, 0.12), rgba(45, 117, 84, 0.46), rgba(74, 82, 87, 0.12));
    transform-origin: center top;
  }

  .roi-flow-connector span {
    right: -3px;
    top: auto;
    bottom: -1px;
    transform: rotate(135deg);
  }

  .roi-run-card,
  .roi-memory-card {
    min-height: 310px;
  }

  .roi-impact {
    grid-template-columns: 1fr;
  }

  .roi-impact > article {
    min-height: 160px;
  }
}

@media (max-width: 640px) {
  .roi-workflow-head {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 12px 16px;
  }

  .roi-flow {
    padding: 24px 14px;
  }

  .roi-run-card {
    min-height: 324px;
  }

  .roi-memory-card {
    min-height: 300px;
  }

  .roi-run-time strong {
    font-size: 58px;
  }
}

/* Shared card and button material: exactly the navigation glass recipe. */
.button,
.button.primary,
.button.ghost,
.button.dark,
.button.light {
  border: 1px solid var(--nav-glass-border);
  background: var(--nav-glass-bg);
  color: #fff;
  box-shadow: var(--nav-glass-shadow);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
  transition:
    background-color 150ms var(--motion-ease-standard),
    border-color 150ms var(--motion-ease-standard),
    color 150ms var(--motion-ease-standard),
    box-shadow 150ms var(--motion-ease-standard);
}

.button:hover,
.button.primary:hover,
.button.ghost:hover,
.button.dark:hover,
.button.light:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--nav-glass-bg-hover);
  color: #fff;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.16);
}

.feature,
.highlights .feature,
.cta,
.roi-workflow,
.roi-run-card,
.roi-memory-card,
.roi-impact > article {
  border: 1px solid var(--nav-glass-border);
  border-radius: 7px;
  background: var(--nav-glass-bg);
  color: #fff;
  box-shadow: var(--nav-glass-shadow);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
  transition:
    background-color 300ms var(--motion-ease-out),
    border-color 300ms var(--motion-ease-out),
    box-shadow 300ms var(--motion-ease-out);
}

.feature:hover,
.highlights .feature:hover,
.roi-run-card:hover,
.roi-memory-card:hover,
.roi-impact > article:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--nav-glass-bg-hover);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
}

.feature h3,
.highlights .feature h3,
.cta h2 {
  color: #fff;
}

.feature p,
.highlights .feature p,
.feature a,
.highlights .feature a {
  color: rgba(255, 255, 255, 0.58);
}

.roi-workflow {
  background:
    linear-gradient(rgba(40, 40, 40, 0.32), rgba(40, 40, 40, 0.32)),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 46%);
}

.roi-workflow::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.roi-workflow-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(40, 40, 40, 0.22);
}

.roi-workflow-head > div {
  color: rgba(255, 255, 255, 0.82);
}

.roi-workflow-head > small {
  color: rgba(255, 255, 255, 0.42);
}

.roi-run-card,
.roi-memory-card,
.roi-repeat-run,
.roi-impact > article,
.roi-impact-lead {
  background:
    radial-gradient(circle at var(--roi-x, 50%) var(--roi-y, 50%), rgba(255, 255, 255, 0.08), transparent 38%),
    var(--nav-glass-bg) !important;
}

.roi-card-index {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.roi-card-index span,
.roi-card-index small,
.roi-run-time span,
.roi-run-card > p,
.roi-memory-card > small,
.roi-impact > article > span,
.roi-impact > article > p,
.roi-impact-lead > span,
.roi-impact-lead > p {
  color: rgba(255, 255, 255, 0.56) !important;
}

.roi-run-time strong,
.roi-memory-card h3,
.roi-impact > article > strong {
  color: #fff;
}

.roi-task-list {
  border-top-color: rgba(255, 255, 255, 0.09);
}

.roi-task-list span {
  border-bottom-color: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.58);
}

.roi-task-list i {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.roi-task-list i::after {
  border-color: rgba(255, 255, 255, 0.86);
}

.roi-time-returned,
.roi-memory-tags span {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.68);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
}

.roi-time-returned b {
  color: #fff;
}

.roi-memory-stack > span {
  border-color: var(--nav-glass-border);
  background: var(--nav-glass-bg);
  box-shadow: var(--nav-glass-shadow);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
}

.roi-flow-connector i {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08));
}

.roi-flow-connector b {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.roi-impact-lead {
  color: #fff;
}

@media (max-width: 760px) {
  .roi-flow-connector i {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08));
  }
}

/* o11-inspired light glass below the hero. The landing viewport stays unchanged. */
.hero .button.primary {
  border: 0;
  background: #fff;
  color: #050505;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero .button.ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.highlights .feature,
.roi-workflow,
.roi-run-card,
.roi-memory-card,
.roi-impact > article,
.cta {
  border: 1px solid var(--o11-glass-border);
  background: var(--o11-glass-bg);
  color: var(--ink);
  box-shadow: var(--o11-glass-shadow);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.highlights .feature:hover,
.roi-run-card:hover,
.roi-memory-card:hover,
.roi-impact > article:hover {
  border-color: rgba(255, 255, 255, 0.78);
  background: var(--o11-glass-bg-hover);
  box-shadow: 0 16px 44px rgba(25, 30, 32, 0.075);
}

.highlights .feature h3,
.cta h2 {
  color: var(--ink);
}

.highlights .feature p,
.highlights .feature a {
  color: rgba(11, 11, 11, 0.58);
}

.cta .button,
.cta .button.dark,
.cta .button.light {
  border: 1px solid var(--o11-glass-border);
  background: rgba(232, 232, 232, 0.42);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.cta .button:hover,
.cta .button.dark:hover,
.cta .button.light:hover {
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(232, 232, 232, 0.62);
  color: var(--ink);
}

.roi-workflow {
  background:
    linear-gradient(rgba(232, 232, 232, 0.24), rgba(232, 232, 232, 0.24)),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.72), transparent 48%);
}

.roi-workflow::before {
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.035) 1px, transparent 1px);
}

.roi-workflow-head {
  border-bottom-color: rgba(74, 82, 87, 0.08);
  background: rgba(232, 232, 232, 0.34);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-workflow-head > div {
  color: rgba(11, 11, 11, 0.76);
}

.roi-workflow-head > small {
  color: rgba(11, 11, 11, 0.42);
}

.roi-workflow-head img,
.roi-memory-face img {
  filter: invert(1);
}

.roi-run-card,
.roi-memory-card,
.roi-repeat-run,
.roi-impact > article,
.roi-impact-lead {
  background:
    radial-gradient(circle at var(--roi-x, 50%) var(--roi-y, 50%), rgba(255, 255, 255, 0.7), transparent 42%),
    var(--o11-glass-bg) !important;
  color: var(--ink);
}

.roi-card-index {
  border-bottom-color: rgba(74, 82, 87, 0.08);
}

.roi-card-index span,
.roi-card-index small,
.roi-run-time span,
.roi-run-card > p,
.roi-memory-card > small,
.roi-impact > article > span,
.roi-impact > article > p,
.roi-impact-lead > span,
.roi-impact-lead > p {
  color: rgba(11, 11, 11, 0.52) !important;
}

.roi-run-time strong,
.roi-memory-card h3,
.roi-impact > article > strong {
  color: var(--ink);
}

.roi-task-list {
  border-top-color: rgba(74, 82, 87, 0.08);
}

.roi-task-list span {
  border-bottom-color: rgba(74, 82, 87, 0.08);
  color: rgba(11, 11, 11, 0.56);
}

.roi-task-list i {
  border-color: rgba(45, 117, 84, 0.2);
  background: rgba(45, 117, 84, 0.07);
}

.roi-task-list i::after {
  border-color: #2d7554;
}

.roi-time-returned,
.roi-memory-tags span {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(232, 232, 232, 0.38);
  color: rgba(11, 11, 11, 0.58);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-time-returned b {
  color: var(--ink);
}

.roi-memory-stack > span {
  border-color: var(--o11-glass-border);
  background: var(--o11-glass-bg);
  box-shadow: var(--o11-glass-shadow);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-flow-connector i {
  background: linear-gradient(90deg, rgba(74, 82, 87, 0.08), rgba(45, 117, 84, 0.42), rgba(74, 82, 87, 0.08));
}

.roi-flow-connector b {
  background: #2d7554;
  box-shadow: 0 0 0 4px rgba(45, 117, 84, 0.09);
}

@media (max-width: 760px) {
  .roi-flow-connector i {
    background: linear-gradient(180deg, rgba(74, 82, 87, 0.08), rgba(45, 117, 84, 0.42), rgba(74, 82, 87, 0.08));
  }
}

/* ROI operating model */
.roi {
  --roi-green: #86e0ad;
  --roi-green-deep: #174b35;
  --roi-dark: #101210;
  --roi-dark-muted: rgba(255, 255, 255, 0.52);
  border-color: rgba(15, 15, 15, 0.09);
  background:
    radial-gradient(ellipse 55% 50% at 2% 0%, rgba(255, 255, 255, 0.98), transparent 72%),
    radial-gradient(ellipse 46% 44% at 96% 100%, rgba(223, 231, 226, 0.92), transparent 74%),
    linear-gradient(145deg, #f4f4f0, #e7e9e7);
}

.roi-heading {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.68fr);
  gap: 40px 88px;
  margin-bottom: 42px;
}

.roi-heading h2 {
  max-width: 840px;
}

.roi-heading h2 span {
  color: #717671;
}

.roi-intro {
  max-width: 490px;
  justify-self: end;
}

.roi-model-label i {
  background: #26724f;
  box-shadow: 0 0 0 4px rgba(38, 114, 79, 0.1);
}

.roi-workflow {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 15%, rgba(81, 150, 111, 0.13), transparent 32%),
    linear-gradient(145deg, rgba(24, 27, 25, 0.97), rgba(11, 12, 11, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(30, 36, 32, 0.16);
}

.roi-workflow::before {
  inset: 68px 0 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 30px 30px;
}

.roi-workflow-head {
  min-height: 68px;
  padding: 0 22px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.roi-workflow-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.roi-workflow-title img {
  width: 18px;
  height: 18px;
}

.roi-workflow-title > div {
  display: grid;
  gap: 4px;
}

.roi-workflow-title span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 530;
}

.roi-workflow-title small {
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
  letter-spacing: 0.035em;
}

.roi-assumptions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.roi-assumptions span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.54);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.roi-workflow-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.31fr);
  gap: 14px;
  padding: 14px;
}

.roi-comparison,
.roi-return {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.roi-comparison {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
}

.roi-comparison-head {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
}

.roi-comparison-head > div:first-child {
  display: grid;
  gap: 7px;
}

.roi-comparison-head > div:first-child > span,
.roi-execution-label > span {
  color: rgba(255, 255, 255, 0.38);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roi-comparison-head h3 {
  color: #fff;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 440;
  letter-spacing: -0.015em;
}

.roi-comparison-key {
  display: flex;
  gap: 13px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 9px;
}

.roi-comparison-key span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.roi-comparison-key i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.roi-comparison-key span:last-child i {
  background: var(--roi-green);
  box-shadow: 0 0 0 3px rgba(134, 224, 173, 0.08);
}

.roi-metric-table {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.roi-metric-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.68fr) minmax(125px, 1fr) minmax(125px, 1fr) minmax(70px, 0.48fr);
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
  min-height: 96px;
  padding: 15px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.roi-metric-row:first-child {
  border-top: 0;
}

.roi-metric-header {
  min-height: 35px;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(255, 255, 255, 0.025);
}

.roi-metric-header span {
  color: rgba(255, 255, 255, 0.3);
  font-size: 8px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.roi-metric-name {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.roi-metric-value {
  min-width: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.roi-metric-value b {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 430;
  letter-spacing: -0.045em;
}

.roi-metric-value i {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 3px;
  margin-top: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.roi-metric-value i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--roi-meter);
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.31);
}

.roi-metric-value.automated b {
  color: #dff8e9;
}

.roi-metric-value.automated i::after {
  background: var(--roi-green);
  box-shadow: 0 0 12px rgba(134, 224, 173, 0.28);
}

.roi-metric-row > strong {
  justify-self: start;
  padding: 6px 8px;
  border: 1px solid rgba(134, 224, 173, 0.18);
  border-radius: 4px;
  background: rgba(134, 224, 173, 0.08);
  color: var(--roi-green);
  font-size: 11px;
  font-weight: 560;
}

.roi-execution {
  padding: 20px 22px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.roi-execution-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.roi-execution-label small {
  color: rgba(255, 255, 255, 0.3);
  font-size: 9px;
}

.roi-execution-lanes {
  display: grid;
  gap: 8px;
}

.roi-execution-lane {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.roi-execution-lane > b {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  font-weight: 500;
}

.roi-execution-automated > b {
  color: var(--roi-green);
}

.roi-steps {
  display: flex;
  min-width: 0;
  align-items: center;
}

.roi-steps > span {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px clamp(7px, 1vw, 12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.roi-steps > i {
  position: relative;
  min-width: 7px;
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
}

.roi-steps > i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 4px;
  height: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  transform: rotate(45deg);
}

.roi-execution-automated .roi-steps > span {
  border-color: rgba(134, 224, 173, 0.14);
  background: rgba(134, 224, 173, 0.055);
  color: rgba(223, 248, 233, 0.72);
}

.roi-execution-automated .roi-steps > i {
  background: rgba(134, 224, 173, 0.3);
}

.roi-agent-step {
  display: grid !important;
  flex: 1.45;
  gap: 2px;
  white-space: normal !important;
}

.roi-agent-step em {
  color: var(--roi-green);
  font-size: 6px;
  font-style: normal;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roi-return {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 25px 24px 22px;
  background:
    radial-gradient(circle at 85% 5%, rgba(164, 242, 198, 0.2), transparent 31%),
    linear-gradient(155deg, rgba(33, 91, 65, 0.96), rgba(14, 31, 23, 0.98)) !important;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 22px 50px rgba(0, 0, 0, 0.16);
}

.roi-return::before {
  display: none;
}

.roi-return-label {
  color: rgba(224, 248, 234, 0.52);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roi-return-time {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 35px;
}

.roi-return-time strong {
  color: #fff;
  font-size: clamp(62px, 6vw, 88px);
  font-weight: 390;
  letter-spacing: -0.065em;
  line-height: 0.82;
}

.roi-return-time small {
  color: rgba(224, 248, 234, 0.56);
  font-size: 12px;
}

.roi-return > p {
  margin-top: 13px;
  color: rgba(224, 248, 234, 0.62);
  font-size: 12px;
}

.roi-return-list {
  display: grid;
  gap: 0;
  margin-top: 38px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.roi-return-list > div {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.roi-return-list span {
  color: rgba(224, 248, 234, 0.48);
  font-size: 9px;
}

.roi-return-list b {
  color: #fff;
  font-size: 13px;
  font-weight: 520;
}

.roi-return-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 24px;
  color: rgba(224, 248, 234, 0.58);
  font-size: 9px;
}

.roi-return-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--roi-green);
  box-shadow: 0 0 0 4px rgba(134, 224, 173, 0.1);
}

.roi-impact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.roi .roi-impact > article {
  min-height: 190px;
  border: 1px solid rgba(20, 25, 22, 0.09);
  background: rgba(255, 255, 255, 0.58) !important;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 44px rgba(30, 36, 32, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.roi .roi-impact > article:hover {
  border-color: rgba(20, 25, 22, 0.14);
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 22px 52px rgba(30, 36, 32, 0.1);
}

.roi .roi-impact > article::before {
  background: radial-gradient(circle at var(--roi-x, 50%) var(--roi-y, 50%), rgba(255, 255, 255, 0.94), transparent 40%);
}

.roi .roi-impact > article > span {
  color: rgba(25, 31, 27, 0.48) !important;
}

.roi .roi-impact > article > strong {
  color: #141714;
}

.roi .roi-impact > article > p {
  color: rgba(25, 31, 27, 0.54) !important;
}

.roi .roi-impact > .roi-impact-lead {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 85% 8%, rgba(134, 224, 173, 0.16), transparent 34%),
    #111713 !important;
  color: #fff;
}

.roi .roi-impact > .roi-impact-lead:hover {
  background:
    radial-gradient(circle at 85% 8%, rgba(134, 224, 173, 0.22), transparent 38%),
    #151d18 !important;
}

.roi .roi-impact > .roi-impact-lead > span,
.roi .roi-impact > .roi-impact-lead > p {
  color: rgba(255, 255, 255, 0.48) !important;
}

.roi .roi-impact > .roi-impact-lead > strong {
  color: #fff;
}

.roi-note {
  max-width: 920px;
  color: rgba(32, 39, 34, 0.45);
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .roi-workflow-grid {
    grid-template-columns: 1fr;
  }

  .roi-return {
    display: grid;
    grid-template-columns: minmax(190px, 0.65fr) 1fr;
    gap: 0 32px;
  }

  .roi-return-label,
  .roi-return-time,
  .roi-return > p {
    grid-column: 1;
  }

  .roi-return-list {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin-top: 0;
  }

  .roi-return-status {
    grid-column: 1;
    margin-top: 24px;
  }
}

@media (max-width: 980px) {
  .roi-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .roi-intro {
    max-width: 620px;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .roi-workflow-head {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 17px;
  }

  .roi-assumptions {
    flex-wrap: wrap;
  }

  .roi-workflow-grid {
    padding: 8px;
  }

  .roi-comparison-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 20px 17px;
  }

  .roi-metric-header {
    display: none;
  }

  .roi-metric-row {
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    min-height: 0;
    padding: 19px 17px;
  }

  .roi-metric-name {
    grid-column: 1 / -1;
  }

  .roi-metric-value::before {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.28);
    font-size: 7px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .roi-metric-value.baseline::before {
    content: "Manual + generic AI";
  }

  .roi-metric-value.automated::before {
    content: "Context workflow";
  }

  .roi-execution {
    padding: 20px 17px;
  }

  .roi-execution-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .roi-execution-lane {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .roi-execution-lane + .roi-execution-lane {
    margin-top: 10px;
  }

  .roi-steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  .roi-steps > span {
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }

  .roi-steps > i {
    width: 1px;
    min-width: 1px;
    height: 9px;
    margin-left: 17px;
    background: rgba(255, 255, 255, 0.16);
  }

  .roi-steps > i::after {
    right: -2px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }

  .roi-agent-step {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: column;
  }

  .roi-return {
    display: flex;
    min-height: 420px;
  }

  .roi-return-list {
    align-self: stretch;
    margin-top: 38px;
  }

  .roi-impact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .roi-comparison-key {
    flex-wrap: wrap;
  }

  .roi-metric-row {
    grid-template-columns: 1fr 1fr;
  }

  .roi-metric-row > strong {
    grid-column: 1 / -1;
  }

  .roi-return {
    min-height: 390px;
    padding: 22px 19px;
  }
}

/* Final below-hero glass pass, adapted from o11's neutral 12px-blur surfaces. */
.roi {
  --roi-green: #26724f;
  --roi-green-deep: #174b35;
}

.roi-workflow {
  border: 1px solid var(--o11-glass-border);
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.72), transparent 34%),
    var(--o11-glass-bg) !important;
  color: var(--ink);
  box-shadow: var(--o11-glass-shadow);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-workflow::before {
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.035) 1px, transparent 1px);
}

.roi-workflow-head {
  border-bottom-color: rgba(74, 82, 87, 0.08);
  background: rgba(232, 232, 232, 0.3);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-workflow-title span {
  color: rgba(11, 11, 11, 0.82);
}

.roi-workflow-title small {
  color: rgba(11, 11, 11, 0.42);
}

.roi-workflow-title img {
  filter: invert(1);
}

.roi-assumptions span {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(232, 232, 232, 0.34);
  color: rgba(11, 11, 11, 0.5);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-comparison,
.roi-return {
  border: 1px solid var(--o11-glass-border);
  background: rgba(232, 232, 232, 0.26) !important;
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-return {
  background:
    radial-gradient(circle at 86% 6%, rgba(38, 114, 79, 0.1), transparent 34%),
    rgba(232, 232, 232, 0.34) !important;
}

.roi-comparison-head > div:first-child > span,
.roi-execution-label > span,
.roi-comparison-key,
.roi-metric-header span,
.roi-execution-label small,
.roi-execution-lane > b,
.roi-return-label,
.roi-return-time small,
.roi-return > p,
.roi-return-list span,
.roi-return-status {
  color: rgba(11, 11, 11, 0.44);
}

.roi-comparison-head h3,
.roi-metric-name,
.roi-metric-value b,
.roi-return-time strong,
.roi-return-list b {
  color: var(--ink);
}

.roi-metric-table,
.roi-metric-row,
.roi-execution,
.roi-return-list,
.roi-return-list > div {
  border-color: rgba(74, 82, 87, 0.08);
}

.roi-metric-header {
  background: rgba(232, 232, 232, 0.28);
}

.roi-metric-name,
.roi-metric-value {
  color: rgba(11, 11, 11, 0.58);
}

.roi-metric-value i {
  background: rgba(74, 82, 87, 0.08);
}

.roi-metric-value i::after {
  background: rgba(74, 82, 87, 0.28);
}

.roi-metric-value.automated b {
  color: var(--roi-green-deep);
}

.roi-metric-value.automated i::after {
  background: var(--roi-green);
  box-shadow: none;
}

.roi-metric-row > strong {
  border-color: rgba(38, 114, 79, 0.16);
  background: rgba(38, 114, 79, 0.07);
  color: var(--roi-green-deep);
}

.roi-steps > span {
  border-color: rgba(74, 82, 87, 0.09);
  background: rgba(255, 255, 255, 0.34);
  color: rgba(11, 11, 11, 0.55);
}

.roi-steps > i {
  background: rgba(74, 82, 87, 0.14);
}

.roi-steps > i::after {
  border-color: rgba(74, 82, 87, 0.36);
}

.roi-execution-automated > b {
  color: var(--roi-green-deep);
}

.roi-execution-automated .roi-steps > span {
  border-color: rgba(38, 114, 79, 0.12);
  background: rgba(38, 114, 79, 0.055);
  color: rgba(23, 75, 53, 0.72);
}

.roi-execution-automated .roi-steps > i {
  background: rgba(38, 114, 79, 0.24);
}

.roi-agent-step em {
  color: var(--roi-green-deep);
}

.roi-return-status i {
  background: var(--roi-green);
  box-shadow: 0 0 0 4px rgba(38, 114, 79, 0.08);
}

.roi-impact > article,
.roi-impact-lead {
  border: 1px solid var(--o11-glass-border);
  background: var(--o11-glass-bg) !important;
  color: var(--ink);
  box-shadow: var(--o11-glass-shadow);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-impact > article > span,
.roi-impact > article > p,
.roi-impact-lead > span,
.roi-impact-lead > p {
  color: rgba(11, 11, 11, 0.48) !important;
}

.roi-impact > article > strong {
  color: var(--ink);
}

@media (max-width: 640px) {
  .roi-steps > i {
    background: rgba(74, 82, 87, 0.14);
  }
}

/* Classic compounding ROI, blended into the site system. */
.roi.roi-classic {
  --roi-classic-green: #7bd5a2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 76px;
  padding: clamp(34px, 4.2vw, 60px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 8%, rgba(55, 118, 82, 0.13), transparent 31%),
    radial-gradient(circle at 15% 100%, rgba(255, 255, 255, 0.035), transparent 34%),
    #0d100e;
  color: #f5f7f5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 72px rgba(19, 25, 21, 0.13);
}

.roi.roi-classic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 90%);
}

.roi-classic-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.62fr);
  gap: 44px clamp(52px, 8vw, 124px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 54px);
}

.roi-classic-eyebrow {
  margin-bottom: 17px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  letter-spacing: 0.015em;
}

.roi-classic .roi-classic-heading h2 {
  max-width: 900px;
  margin: 0;
  color: #f7f8f7;
  font-size: clamp(40px, 4.55vw, 68px);
  font-weight: 390;
  letter-spacing: -0.035em;
  line-height: 0.99;
}

.roi-classic-intro {
  max-width: 470px;
  margin: 0;
  padding-bottom: 5px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
  line-height: 1.62;
}

.roi-classic-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.62fr);
  gap: 8px;
}

.roi-token-card,
.roi-token-impact {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 252px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  transform-style: preserve-3d;
  will-change: transform;
}

.roi-token-card {
  display: flex;
  flex-direction: column;
  padding: clamp(19px, 2vw, 27px);
  background:
    radial-gradient(circle at var(--roi-x, 70%) var(--roi-y, 10%), rgba(255, 255, 255, 0.055), transparent 38%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    border-color 220ms ease,
    background-color 220ms ease;
}

.roi-token-context {
  border-color: rgba(123, 213, 162, 0.18);
  background:
    radial-gradient(circle at var(--roi-x, 70%) var(--roi-y, 10%), rgba(123, 213, 162, 0.1), transparent 40%),
    rgba(31, 88, 57, 0.13);
}

.roi-token-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.roi-token-context:hover {
  border-color: rgba(123, 213, 162, 0.29);
}

.roi-token-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.roi-token-meta span,
.roi-token-meta small {
  font-size: 9px;
}

.roi-token-meta span {
  color: rgba(255, 255, 255, 0.54);
}

.roi-token-meta small {
  color: rgba(255, 255, 255, 0.27);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.roi-token-value {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
  padding-top: 34px;
}

.roi-token-value strong {
  color: #f7f8f7;
  font-size: clamp(43px, 4vw, 61px);
  font-weight: 390;
  letter-spacing: -0.06em;
  line-height: 0.88;
}

.roi-token-value span {
  color: rgba(255, 255, 255, 0.36);
  font-size: 10px;
}

.roi-token-meter {
  position: relative;
  overflow: hidden;
  height: 4px;
  margin-top: 22px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.13);
}

.roi-token-meter i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
}

.roi-token-context .roi-token-meter i {
  width: 20.3%;
  min-width: 52px;
  background: var(--roi-classic-green);
  box-shadow: 0 0 15px rgba(123, 213, 162, 0.24);
}

.roi-token-card > p {
  margin-top: 17px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 9px;
  line-height: 1.55;
}

.roi-token-context > p {
  color: rgba(214, 242, 226, 0.42);
}

.roi-token-impact {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 30px);
  border-color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at var(--roi-x, 75%) var(--roi-y, 8%), rgba(255, 255, 255, 0.85), transparent 42%),
    #edf3ef;
  color: #155a3d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 34px rgba(0, 0, 0, 0.08);
}

.roi-token-impact > span {
  color: rgba(17, 74, 50, 0.54);
  font-size: 9px;
}

.roi-token-impact > strong {
  margin-top: auto;
  color: #176344;
  font-size: clamp(58px, 6vw, 86px);
  font-weight: 390;
  letter-spacing: -0.075em;
  line-height: 0.84;
}

.roi-token-impact > p {
  margin-top: 14px;
  color: rgba(17, 74, 50, 0.62);
  font-size: 10px;
}

.roi-token-impact > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 23px;
  padding-top: 13px;
  border-top: 1px solid rgba(17, 74, 50, 0.13);
}

.roi-token-impact > div b {
  color: #174f39;
  font-size: 11px;
  font-weight: 600;
}

.roi-token-impact > div small {
  color: rgba(17, 74, 50, 0.46);
  font-size: 8px;
  text-align: right;
}

.roi-compounding-loop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.018);
}

.roi-compounding-loop > div {
  display: grid;
  min-height: 122px;
  align-content: space-between;
  padding: 19px 21px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.roi-compounding-loop > div:last-child {
  border-right: 0;
}

.roi-compounding-loop strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 19px;
  font-weight: 430;
  letter-spacing: -0.025em;
}

.roi-compounding-loop span {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

.roi-compounding-loop small {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.27);
  font-size: 8px;
}

.roi-classic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  margin-top: 19px;
}

.roi-classic-footer > p {
  max-width: 690px;
  color: rgba(255, 255, 255, 0.24);
  font-size: 8px;
  line-height: 1.55;
}

.roi-classic-footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.roi-classic-footer > div span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.34);
  font-size: 8px;
  white-space: nowrap;
}

.roi-classic-footer > div b {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 560;
}

@media (max-width: 1050px) {
  .roi-classic-heading {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.72fr);
    gap: 42px;
  }

  .roi-classic-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .roi-token-impact {
    grid-column: 1 / -1;
    min-height: 210px;
  }

  .roi-token-impact > strong {
    margin-top: 40px;
  }

  .roi-token-impact > div {
    max-width: 340px;
  }

  .roi-classic-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .roi-classic-footer > div {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .roi.roi-classic {
    padding: 30px 20px;
  }

  .roi-classic-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .roi-classic .roi-classic-heading h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .roi-classic-intro {
    max-width: 560px;
    padding-bottom: 0;
  }

  .roi-classic-metrics {
    grid-template-columns: 1fr;
  }

  .roi-token-card,
  .roi-token-impact {
    min-height: 235px;
  }

  .roi-token-impact {
    grid-column: auto;
  }

  .roi-compounding-loop {
    grid-template-columns: 1fr;
  }

  .roi-compounding-loop > div {
    min-height: 104px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .roi-compounding-loop > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .roi.roi-classic {
    padding: 27px 14px;
  }

  .roi-classic .roi-classic-heading h2 br {
    display: none;
  }

  .roi-token-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .roi-token-impact > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .roi-token-impact > div small {
    text-align: left;
  }

  .roi-classic-footer > div {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }
}

/* Product demos: cool neutral palette, without decorative corner captions. */
.highlights .wt-root .map-board::before,
.highlights .brain-night-label,
.highlights .agent-demo-head {
  display: none;
}

.highlights .workflow-watchtower,
.highlights .brain-app-sequence,
.highlights .brain-app-stage,
.highlights .brain-stage-media,
.highlights .brain-slack-video {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.66), transparent 38%),
    #edf0f1;
}

.highlights .wt-root .map-board {
  border-color: rgba(74, 82, 87, 0.1);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.76), transparent 30%),
    rgba(246, 248, 249, 0.66);
  box-shadow: 0 18px 50px rgba(50, 57, 61, 0.06);
}

.highlights .wt-root .map-axis,
.highlights .wt-root .map-legend {
  color: rgba(74, 82, 87, 0.56);
}

.highlights .wt-root .cell {
  border-color: rgba(74, 82, 87, 0.095);
  background: rgba(232, 235, 237, 0.82);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 2px 5px rgba(50, 57, 61, 0.025);
}

.highlights .wt-root .cell.review-node,
.highlights .wt-root .cell.reviewed {
  border-color: rgba(45, 117, 84, 0.28);
  background: rgba(226, 237, 230, 0.78);
}

.highlights .wt-root .cell.signal {
  border-color: rgba(45, 117, 84, 0.42);
  background: rgba(45, 117, 84, 0.16);
  box-shadow: 0 0 0 4px rgba(45, 117, 84, 0.08), 0 12px 30px rgba(50, 57, 61, 0.12);
}

.highlights .wt-root .panel {
  border-color: rgba(74, 82, 87, 0.12);
  background: #fbfcfc;
  box-shadow: 0 30px 80px rgba(50, 57, 61, 0.14);
}

.highlights .brain-app-scene {
  background: rgba(248, 249, 250, 0.76);
}

.highlights .brain-app-sequence::after {
  background:
    radial-gradient(circle at 52% 46%, rgba(45, 117, 84, 0.055), transparent 36%),
    linear-gradient(180deg, rgba(24, 27, 29, 0.4), rgba(24, 27, 29, 0.64));
}

.highlights .brain-stage-chip,
.highlights .brain-stage-complete {
  border-color: rgba(74, 82, 87, 0.12);
  background: rgba(248, 250, 251, 0.9);
  box-shadow: 0 9px 24px rgba(50, 57, 61, 0.11);
  color: #2c3235;
}

.highlights .brain-stage-chip small,
.highlights .brain-stage-complete small {
  color: #788186;
}

.highlights .brain-stage-complete i {
  background: #2d7554;
}

.highlights .brain-network-canvas {
  inset: 12px 0;
  height: calc(100% - 24px);
}

.highlights .agent-execution-demo {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.94), transparent 33%),
    linear-gradient(145deg, #edf0f2, #d9dee1);
}

.highlights .agent-workspace {
  top: 9px;
  border-color: rgba(74, 82, 87, 0.12);
  background: #fafbfc;
  box-shadow: 0 18px 38px rgba(50, 57, 61, 0.11);
}

.highlights .agent-demo-progress {
  color: #788186;
}

.highlights .agent-demo-progress > i {
  background: rgba(74, 82, 87, 0.16);
}

.highlights .agent-demo-result {
  background: rgba(20, 23, 24, 0.94);
  box-shadow: 0 24px 55px rgba(20, 24, 26, 0.24);
}

/* Keep the classic ROI composition in the site's light silver-glass theme. */
.roi.roi-classic {
  --roi-classic-green: #2d7554;
  border-color: rgba(15, 15, 15, 0.08);
  background:
    radial-gradient(ellipse 58% 50% at 4% 0%, rgba(255, 255, 255, 0.98), transparent 72%),
    radial-gradient(ellipse 44% 40% at 96% 100%, rgba(223, 231, 226, 0.86), transparent 74%),
    linear-gradient(145deg, #f4f4f1, #e6e9ea);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 24px 64px rgba(50, 57, 61, 0.08);
}

.roi.roi-classic::before {
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.035) 1px, transparent 1px);
}

.roi-classic-eyebrow {
  color: rgba(32, 38, 34, 0.48);
}

.roi-classic .roi-classic-heading h2 {
  color: var(--ink);
}

.roi-classic-intro {
  color: rgba(32, 38, 34, 0.55);
}

.roi-token-card,
.roi-token-impact {
  border-color: var(--o11-glass-border);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-token-card {
  background:
    radial-gradient(circle at var(--roi-x, 70%) var(--roi-y, 10%), rgba(255, 255, 255, 0.86), transparent 42%),
    var(--o11-glass-bg);
  box-shadow: var(--o11-glass-shadow);
}

.roi-token-context {
  border-color: rgba(45, 117, 84, 0.14);
  background:
    radial-gradient(circle at var(--roi-x, 70%) var(--roi-y, 10%), rgba(45, 117, 84, 0.11), transparent 42%),
    rgba(232, 232, 232, 0.36);
}

.roi-token-card:hover {
  border-color: rgba(255, 255, 255, 0.82);
  background-color: var(--o11-glass-bg-hover);
}

.roi-token-context:hover {
  border-color: rgba(45, 117, 84, 0.23);
}

.roi-token-meta span {
  color: rgba(11, 11, 11, 0.58);
}

.roi-token-meta small {
  color: rgba(11, 11, 11, 0.34);
}

.roi-token-value strong {
  color: var(--ink);
}

.roi-token-context .roi-token-value strong {
  color: #174f39;
}

.roi-token-value span {
  color: rgba(11, 11, 11, 0.4);
}

.roi-token-meter {
  background: rgba(74, 82, 87, 0.09);
}

.roi-token-meter i {
  background: rgba(74, 82, 87, 0.34);
}

.roi-token-context .roi-token-meter i {
  background: var(--roi-classic-green);
  box-shadow: none;
}

.roi-token-card > p,
.roi-token-context > p {
  color: rgba(11, 11, 11, 0.46);
}

.roi-token-impact {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at var(--roi-x, 75%) var(--roi-y, 8%), rgba(255, 255, 255, 0.96), transparent 44%),
    rgba(248, 250, 248, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 36px rgba(50, 57, 61, 0.07);
}

.roi-compounding-loop {
  border-color: rgba(74, 82, 87, 0.1);
  background: rgba(232, 232, 232, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-compounding-loop > div {
  border-color: rgba(74, 82, 87, 0.09);
}

.roi-compounding-loop strong {
  color: rgba(11, 11, 11, 0.88);
}

.roi-compounding-loop span {
  color: rgba(11, 11, 11, 0.62);
}

.roi-compounding-loop small {
  color: rgba(11, 11, 11, 0.36);
}

.roi-classic-footer > p {
  color: rgba(32, 38, 34, 0.4);
}

.roi-classic-footer > div span {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(232, 232, 232, 0.34);
  color: rgba(11, 11, 11, 0.48);
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.roi-classic-footer > div b {
  color: rgba(11, 11, 11, 0.76);
}

@media (max-width: 760px) {
  .roi-compounding-loop > div {
    border-bottom-color: rgba(74, 82, 87, 0.09);
  }
}

/* Restore site typography, visible brand green, and CTA hierarchy. */
.roi-classic,
.roi-classic * {
  font-family: "Inter", Arial, sans-serif;
}

.roi-classic .roi-classic-heading h2 {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.02;
}

.roi-token-value strong,
.roi-token-impact > strong {
  font-weight: 400;
}

.roi-token-context {
  border-color: rgba(45, 117, 84, 0.24);
  background:
    radial-gradient(circle at var(--roi-x, 70%) var(--roi-y, 10%), rgba(255, 255, 255, 0.66), transparent 42%),
    linear-gradient(145deg, rgba(218, 237, 226, 0.88), rgba(229, 237, 232, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 14px 38px rgba(37, 91, 64, 0.08);
}

.roi-token-context:hover {
  border-color: rgba(45, 117, 84, 0.36);
}

.roi-token-impact {
  border-color: rgba(38, 114, 79, 0.54);
  background:
    radial-gradient(circle at var(--roi-x, 75%) var(--roi-y, 8%), rgba(134, 213, 169, 0.22), transparent 43%),
    linear-gradient(150deg, #2f7958, #1d5d42);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 42px rgba(30, 82, 58, 0.18);
}

.roi-token-impact > span,
.roi-token-impact > p {
  color: rgba(255, 255, 255, 0.68);
}

.roi-token-impact > strong {
  color: #fff;
}

.roi-token-impact > div {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.roi-token-impact > div b {
  color: #fff;
}

.roi-token-impact > div small {
  color: rgba(255, 255, 255, 0.58);
}

.roi-compounding-loop > div:nth-child(2) {
  background: rgba(45, 117, 84, 0.055);
}

.roi-compounding-loop > div:nth-child(2) strong {
  color: #1d6547;
}

.cta .button.dark {
  border: 1px solid #1d6547;
  background: #1d6547;
  color: #fff;
  box-shadow: 0 12px 28px rgba(29, 101, 71, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cta .button.dark:hover {
  border-color: #174f39;
  background: #174f39;
  color: #fff;
  box-shadow: 0 16px 34px rgba(23, 79, 57, 0.2);
}

/* Unified landing-page system. The hero above intentionally remains untouched. */
:root {
  --page-pad: clamp(24px, 4vw, 64px);
  --section-space: clamp(88px, 10vw, 152px);
  --surface: #f4f4f1;
  --surface-raised: #fff;
  --radius: 12px;
}

main > section:not(.hero):not(.closing-video) {
  border-color: var(--line);
  font-family: "Inter", Arial, sans-serif;
}

section.logo-marquee.logo-marquee {
  padding: 34px var(--page-pad);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

section.context-flow.agent-workflow-flow {
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: clamp(64px, 7vw, 104px);
  background: var(--bg);
}

section.atlas.atlas {
  max-width: none;
  padding: var(--section-space) max(var(--page-pad), calc((100vw - 1504px) / 2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111;
  color: #fff;
}

.atlas .eyebrow { color: rgba(255, 255, 255, 0.52); }
.atlas a { color: rgba(255, 255, 255, 0.68); }

.atlas h2,
.highlights .section-heading h2,
.industry-heading h2,
.roi-classic .roi-classic-heading h2,
.cta h2 {
  max-width: 820px;
  font-size: clamp(36px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

section.highlights.highlights,
section.industries.industries,
section.roi.roi-classic {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  background: var(--bg);
}

.highlights .section-heading,
.highlights .highlight-grid,
.industry-heading,
.industry-carousel,
.roi-classic > * {
  width: min(100%, 1504px);
  margin-left: auto;
  margin-right: auto;
}

.highlights .section-heading,
.highlights .highlight-grid,
.industry-heading,
.industry-carousel {
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.feature,
.workflow-capture-demo,
.brain-cycle-demo,
.agent-execution-demo,
.industry-card,
.roi-classic article {
  border-radius: var(--radius);
}

.feature {
  background: var(--surface-raised);
  box-shadow: 0 18px 55px rgba(16, 16, 16, 0.045);
}

.feature h3 {
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -0.02em;
}

.feature p { font-size: 15px; line-height: 1.65; }

section.aos-system.aos-system {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #efefec, #f8f8f6);
}

section.cta.cta {
  width: calc(100% - (var(--page-pad) * 2));
  max-width: 1504px;
  margin: var(--section-space) auto !important;
  padding: clamp(56px, 7vw, 104px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

section.closing-video.closing-video { min-height: 72vh; }
.closing-video-content { min-height: 72vh; }
.closing-video h2 { font-size: clamp(48px, 7vw, 104px); letter-spacing: -0.045em; }

.site-footer { padding-left: var(--page-pad); padding-right: var(--page-pad); }
.footer-brand { letter-spacing: -0.03em; }

@media (max-width: 980px) {
  section.cta.cta { align-items: stretch; }
}

@media (max-width: 640px) {
  .atlas h2,
  .highlights .section-heading h2,
  .industry-heading h2,
  .roi-classic .roi-classic-heading h2,
  .cta h2 { font-size: 34px; }

  section.cta.cta { padding: 42px 24px; }
}

.cta .button.light {
  border: 1px solid rgba(74, 82, 87, 0.12);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: var(--o11-glass-blur);
  -webkit-backdrop-filter: var(--o11-glass-blur);
}

.cta .button.light:hover {
  border-color: rgba(74, 82, 87, 0.2);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

/* Monochrome site theme: hierarchy comes from contrast and shadow, never color. */
.roi.roi-classic {
  --roi-classic-green: #151515;
  background:
    radial-gradient(ellipse 58% 50% at 4% 0%, rgba(255, 255, 255, 0.98), transparent 72%),
    radial-gradient(ellipse 44% 40% at 96% 100%, rgba(225, 227, 228, 0.9), transparent 74%),
    linear-gradient(145deg, #f4f4f1, #e6e8e9);
}

.roi-token-context {
  border-color: rgba(15, 15, 15, 0.13);
  background:
    radial-gradient(circle at var(--roi-x, 70%) var(--roi-y, 10%), rgba(255, 255, 255, 0.8), transparent 42%),
    linear-gradient(145deg, rgba(226, 227, 227, 0.82), rgba(238, 238, 236, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 38px rgba(30, 32, 31, 0.07);
}

.roi-token-context:hover {
  border-color: rgba(15, 15, 15, 0.22);
}

.roi-token-context .roi-token-value strong {
  color: #111;
}

.roi-token-context .roi-token-meter i {
  background: #171717;
}

.roi-token-impact {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at var(--roi-x, 75%) var(--roi-y, 8%), rgba(255, 255, 255, 0.1), transparent 43%),
    linear-gradient(150deg, #252525, #111);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.16);
}

.roi-compounding-loop > div:nth-child(2) {
  background: rgba(15, 15, 15, 0.035);
}

.roi-compounding-loop > div:nth-child(2) strong {
  color: #111;
}

.cta .button.dark {
  border-color: #111;
  background: #111;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.cta .button.dark:hover {
  border-color: #000;
  background: #000;
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

/* Final Context Labs layer — match the site's monochrome theme. */
.context-layer {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.48), transparent 38%),
    linear-gradient(145deg, rgba(250, 250, 248, 0.92), rgba(225, 226, 224, 0.62) 54%, rgba(177, 179, 177, 0.58));
}

.context-layer .aos-c-dot {
  background: radial-gradient(circle at 34% 24%, #fff 0 9%, #e9e9e7 27%, #777 62%, #f1f1ef 100%);
  box-shadow: inset -3px -5px 8px rgba(22, 22, 22, 0.22), inset 3px 4px 7px rgba(255, 255, 255, 0.88), 0 7px 10px rgba(0, 0, 0, 0.14);
}

.context-system-ring {
  background: radial-gradient(circle, #fff 0 24%, #dededb 25% 41%, #f7f7f5 42% 66%, #bfc0bd 67% 68%, #fafaf8 69% 100%);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.5), inset 0 -22px 40px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(70, 70, 70, 0.13), 0 22px 36px rgba(0, 0, 0, 0.16);
}

.context-system-ring::before {
  background: repeating-conic-gradient(from -1deg, rgba(28, 28, 28, 0.42) 0 0.7deg, transparent 0.7deg 6deg);
}

.context-system-axis { color: rgba(20, 20, 20, 0.56); }
.context-ring { border-color: rgba(20, 20, 20, 0.18); }
.context-ring-inner { border-color: rgba(15, 15, 15, 0.3); }

.context-system-core {
  background: linear-gradient(145deg, rgba(255, 255, 253, 0.99), rgba(203, 204, 201, 0.98));
  box-shadow: 0 0 0 9px rgba(15, 15, 15, 0.06), 0 14px 28px rgba(0, 0, 0, 0.22);
}

.context-system-core img { background: #111; }
.context-system-core strong { color: #111; }
.context-system-core small { color: rgba(17, 17, 17, 0.58); }

.context-layer-count {
  background: rgba(248, 248, 246, 0.9);
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.12);
}

.context-layer-count b { color: #111; }
.context-layer-count span { color: rgba(17, 17, 17, 0.82); }
.context-layer-count small { color: rgba(17, 17, 17, 0.5); }

/* Product-style layer demos, adapted from the supplied Poetic motion reference. */
.poetic-layer-card {
  min-height: 76%;
  padding: 15px;
  overflow: visible;
  font-family: "Inter", Arial, sans-serif;
}

.poetic-layer-card::before { pointer-events: none; }

/* 01 — Source files collect into the engagement workspace. */
.poetic-upload-demo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.poetic-upload-files {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.poetic-file {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 7px;
  border: 1px solid rgba(53, 90, 111, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 14px rgba(38, 66, 83, 0.06);
  opacity: 0;
}

.poetic-file > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  border: 1px solid rgba(67, 127, 158, 0.38);
  border-radius: 5px;
  color: #4c8eaf;
  font-size: 5px;
  font-style: normal;
  font-weight: 760;
}

.poetic-file:nth-child(2) > i { border-color: rgba(104, 112, 167, 0.38); color: #727cae; }
.poetic-file:nth-child(3) > i { border-color: rgba(175, 111, 92, 0.38); color: #ad715e; }
.poetic-file:nth-child(4) > i { border-color: rgba(85, 145, 119, 0.38); color: #62957c; }
.poetic-file span,
.poetic-file b,
.poetic-file small { display: block; min-width: 0; }
.poetic-file b { overflow: hidden; color: rgba(31, 48, 58, 0.86); font-size: 6.5px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.poetic-file small { margin-top: 3px; color: rgba(45, 68, 81, 0.43); font-size: 5px; }

.aos-research-elevation.active .poetic-file {
  animation: poetic-file-collect 8s cubic-bezier(0.2, 0.82, 0.22, 1) infinite;
}

.poetic-file-1 { --fly-x: 68px; --fly-y: 78px; }
.poetic-file-2 { --fly-x: -68px; --fly-y: 78px; }
.poetic-file-3 { --fly-x: 68px; --fly-y: 27px; }
.poetic-file-4 { --fly-x: -68px; --fly-y: 27px; }
.aos-research-elevation.active .poetic-file-2 { animation-delay: 180ms; }
.aos-research-elevation.active .poetic-file-3 { animation-delay: 360ms; }
.aos-research-elevation.active .poetic-file-4 { animation-delay: 540ms; }

.poetic-folder-drop {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  padding: 9px 12px;
  border: 1px solid rgba(64, 121, 150, 0.22);
  border-radius: 10px;
  background: rgba(244, 250, 253, 0.96);
  box-shadow: 0 13px 26px rgba(44, 81, 100, 0.14);
  opacity: 0;
  transform: translate(-50%, 70px) scale(0.9);
}

.aos-research-elevation.active .poetic-folder-drop { animation: poetic-folder-arrive 8s var(--motion-ease-out) infinite; }

.poetic-folder-icon {
  position: relative;
  width: 34px;
  height: 25px;
  border-radius: 4px;
  background: linear-gradient(145deg, #7cb7d5, #4f91b3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.42);
}

.poetic-folder-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -5px;
  width: 15px;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: #639fbe;
}

.poetic-folder-drop span,
.poetic-folder-drop strong,
.poetic-folder-drop small { display: block; }
.poetic-folder-drop strong { color: rgba(31, 54, 66, 0.88); font-size: 7px; font-weight: 650; }
.poetic-folder-drop small { margin-top: 3px; color: rgba(45, 75, 90, 0.46); font-size: 5px; }

.poetic-upload-composer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 18px 1fr 22px;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 7px;
  border: 1px solid rgba(53, 90, 111, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(42, 65, 77, 0.5);
  font-size: 5.5px;
}

.poetic-upload-composer > b { font-size: 12px; font-weight: 350; }
.poetic-upload-composer > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #315f75; color: #fff; font-size: 9px; font-style: normal; }

/* 02/03 — A work result is corrected by typed expert feedback. */
.poetic-feedback-demo { padding: 14px; }

.poetic-investigation-card {
  position: relative;
  z-index: 2;
  width: 93%;
  min-height: 205px;
  padding: 13px 13px 25px;
  border: 1px solid rgba(70, 66, 82, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(48, 43, 58, 0.07);
}

.poetic-investigation-card h3 { margin: 0 0 9px; color: rgba(35, 32, 39, 0.9); font-size: 8px; font-weight: 650; }
.poetic-investigation-result { display: grid; grid-template-columns: 15px 1fr; gap: 6px; margin: 0 0 8px; color: rgba(46, 42, 52, 0.72); font-size: 6px; line-height: 1.35; }
.poetic-investigation-result > i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(93, 152, 123, 0.13); color: #5d987b; font-size: 7px; font-style: normal; }
.poetic-investigation-result b { color: rgba(35, 32, 39, 0.88); font-weight: 650; }
.poetic-investigation-evidence { margin: 0 0 10px; color: rgba(54, 49, 60, 0.5); font-size: 5.5px; line-height: 1.45; }

.poetic-evidence-table { overflow: hidden; border: 1px solid rgba(67, 61, 75, 0.1); border-radius: 7px; }
.poetic-evidence-table i { position: relative; display: block; height: 17px; border-bottom: 1px solid rgba(67, 61, 75, 0.08); }
.poetic-evidence-table i:last-child { border-bottom: 0; }
.poetic-evidence-table i::before,
.poetic-evidence-table i::after { content: ""; position: absolute; top: 7px; height: 3px; border-radius: 999px; background: rgba(60, 55, 68, 0.11); }
.poetic-evidence-table i::before { left: 8px; width: 26%; }
.poetic-evidence-table i::after { right: 8px; width: 38%; }

.poetic-feedback-card {
  position: relative;
  z-index: 4;
  display: flex;
  width: 69%;
  min-height: 86px;
  margin: -40px 0 0 auto;
  padding: 12px;
  flex-direction: column;
  border: 1px solid rgba(69, 61, 82, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 13px 28px rgba(44, 38, 53, 0.14);
  opacity: 0;
}

.poetic-typed-copy { min-height: 34px; margin: 0; color: rgba(37, 34, 42, 0.82); font-size: 5.7px; line-height: 1.45; }
.poetic-typed-copy span { display: block; width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
.poetic-feedback-card > b { align-self: flex-end; margin-top: 8px; padding: 6px 9px; border-radius: 999px; background: #26212c; color: #fff; font-size: 5px; font-weight: 600; opacity: 0; }

.aos-sense-elevation.active .poetic-investigation-card,
.aos-procedure-elevation.active .poetic-investigation-card { animation: poetic-base-card 9s var(--motion-ease-out) infinite; }
.aos-sense-elevation.active .poetic-feedback-card,
.aos-procedure-elevation.active .poetic-feedback-card { animation: poetic-feedback-rise 9s var(--motion-ease-out) infinite; }
.aos-sense-elevation.active .poetic-typed-copy span:first-child,
.aos-procedure-elevation.active .poetic-typed-copy span:first-child { animation: poetic-type-line-one 9s steps(38, end) infinite; }
.aos-sense-elevation.active .poetic-typed-copy span:last-child,
.aos-procedure-elevation.active .poetic-typed-copy span:last-child { animation: poetic-type-line-two 9s steps(42, end) infinite; }
.aos-sense-elevation.active .poetic-feedback-card > b,
.aos-procedure-elevation.active .poetic-feedback-card > b { animation: poetic-feedback-action 9s ease infinite; }

.poetic-mini-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid rgba(86, 76, 61, 0.1); }
.poetic-mini-header span { color: rgba(49, 45, 38, 0.88); font-size: 8px; font-weight: 650; }
.poetic-mini-header b { color: rgba(103, 82, 47, 0.6); font-size: 5px; font-weight: 620; }
.poetic-procedure-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; min-height: 42px; padding: 5px 2px; border-bottom: 1px solid rgba(86, 76, 61, 0.08); }
.poetic-procedure-row > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(155, 122, 67, 0.1); color: #95713b; font-size: 5px; font-style: normal; font-weight: 700; }
.poetic-procedure-row span b,
.poetic-procedure-row span small { display: block; }
.poetic-procedure-row span b { color: rgba(49, 45, 38, 0.78); font-size: 6px; font-weight: 600; }
.poetic-procedure-row span small { margin-top: 3px; color: rgba(75, 67, 54, 0.42); font-size: 4.7px; }
.poetic-procedure-row > em { color: rgba(67, 103, 70, 0.66); font-size: 4.5px; font-style: normal; font-weight: 650; }
.poetic-procedure-active { background: rgba(205, 179, 130, 0.09); }
.poetic-procedure-active > em { color: #95713b; }

/* 04 — The workflow visibly recovers from a renamed workspace tab. */
.poetic-recovery-demo { padding: 14px; }
.poetic-app-shell { position: relative; z-index: 2; overflow: hidden; width: 100%; min-height: 218px; border: 1px solid rgba(67, 74, 98, 0.13); border-radius: 10px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 8px 22px rgba(44, 49, 68, 0.07); }
.poetic-app-shell > header { display: flex; align-items: center; gap: 6px; height: 29px; padding: 0 9px; border-bottom: 1px solid rgba(67, 74, 98, 0.1); color: rgba(44, 49, 65, 0.62); font-size: 5.5px; }
.poetic-app-shell > header i { width: 6px; height: 6px; border-radius: 50%; background: #6f7dae; }
.poetic-app-shell > header b { margin-left: auto; color: rgba(77, 88, 128, 0.68); font-size: 5px; font-weight: 650; }
.poetic-app-shell nav { display: flex; gap: 12px; height: 27px; padding: 8px 10px 0; border-bottom: 1px solid rgba(67, 74, 98, 0.09); color: rgba(54, 59, 76, 0.42); font-size: 5px; }
.poetic-app-shell nav span { position: relative; }
.poetic-tab-old::after,
.poetic-tab-new::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: #6f7dae; }
.poetic-tab-new { opacity: 0; }
.poetic-app-body { display: grid; grid-template-columns: 64px 1fr; min-height: 160px; }
.poetic-app-sidebar { display: grid; align-content: start; gap: 8px; padding: 12px 9px; border-right: 1px solid rgba(67, 74, 98, 0.08); }
.poetic-app-sidebar i,
.poetic-app-content i { display: block; height: 4px; border-radius: 999px; background: rgba(66, 73, 95, 0.1); }
.poetic-app-sidebar i:nth-child(2) { width: 80%; }
.poetic-app-sidebar i:nth-child(3) { width: 66%; }
.poetic-app-content { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; gap: 9px; padding: 13px; }
.poetic-app-content i { height: 36px; border-radius: 6px; background: rgba(86, 98, 136, 0.07); }

.poetic-recovery-card { position: relative; z-index: 4; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 9px; width: 78%; min-height: 66px; margin: -84px auto 0; padding: 10px 12px; border: 1px solid rgba(75, 87, 130, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 28px rgba(42, 49, 75, 0.16); opacity: 0; }
.poetic-recovery-card span b,
.poetic-recovery-card span small { display: block; }
.poetic-recovery-card span b { color: rgba(44, 49, 65, 0.86); font-size: 6.5px; font-weight: 650; }
.poetic-recovery-card span small { margin-top: 4px; color: rgba(55, 62, 80, 0.5); font-size: 5px; line-height: 1.35; }
.poetic-spinner { width: 20px; height: 20px; border: 2px solid rgba(111, 125, 174, 0.18); border-top-color: #6f7dae; border-radius: 50%; }
.aos-harness-elevation.active .poetic-app-shell { animation: poetic-app-arrive 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-tab-old { animation: poetic-old-tab 9s ease infinite; }
.aos-harness-elevation.active .poetic-tab-new { animation: poetic-new-tab 9s ease infinite; }
.aos-harness-elevation.active .poetic-recovery-card { animation: poetic-recovery-rise 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-spinner { animation: poetic-spin 800ms linear 3.3s 3; }

/* 05 — A typed institutional query resolves into a bounded answer. */
.poetic-query-demo { padding: 14px; }
.poetic-query-card { position: relative; z-index: 3; min-height: 116px; padding: 13px; border: 1px solid rgba(67, 106, 98, 0.13); border-radius: 11px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 22px rgba(41, 68, 62, 0.07); }
.poetic-query-card > small { display: block; color: rgba(53, 96, 87, 0.55); font-size: 5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.poetic-query-type { margin: 13px 0 14px; color: rgba(35, 57, 52, 0.88); font-size: 8px; font-weight: 560; }
.poetic-query-type span { display: block; width: 0; overflow: hidden; white-space: nowrap; }
.poetic-query-sources { display: flex; gap: 5px; }
.poetic-query-sources i { padding: 4px 6px; border: 1px solid rgba(73, 118, 109, 0.12); border-radius: 999px; background: rgba(232, 243, 240, 0.54); color: rgba(49, 99, 89, 0.62); font-size: 4px; font-style: normal; font-weight: 650; opacity: 0; }
.poetic-answer-card { position: relative; z-index: 4; width: 89%; min-height: 110px; margin: -9px 0 0 auto; padding: 12px; border: 1px solid rgba(67, 106, 98, 0.14); border-radius: 11px; background: rgba(245, 251, 249, 0.97); box-shadow: 0 13px 26px rgba(39, 66, 60, 0.14); opacity: 0; }
.poetic-answer-card header { display: flex; align-items: center; justify-content: space-between; color: rgba(48, 91, 82, 0.66); font-size: 5px; }
.poetic-answer-card header span { display: inline-flex; align-items: center; gap: 5px; }
.poetic-answer-card header i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(93, 152, 123, 0.13); color: #5d987b; font-size: 6px; font-style: normal; }
.poetic-answer-card header b { font-size: 4.5px; font-weight: 620; }
.poetic-answer-card p { margin: 11px 0 8px; color: rgba(36, 59, 54, 0.76); font-size: 6px; line-height: 1.4; }
.poetic-answer-card > small { color: rgba(54, 81, 75, 0.48); font-size: 5px; line-height: 1.35; }
.aos-world-elevation.active .poetic-query-card { animation: poetic-base-card 9s var(--motion-ease-out) infinite; }
.aos-world-elevation.active .poetic-query-type span { animation: poetic-query-type 9s steps(44, end) infinite; }
.aos-world-elevation.active .poetic-query-sources i { animation: poetic-source-chip 9s var(--motion-ease-out) infinite; }
.aos-world-elevation.active .poetic-query-sources i:nth-child(2) { animation-delay: 160ms; }
.aos-world-elevation.active .poetic-query-sources i:nth-child(3) { animation-delay: 320ms; }
.aos-world-elevation.active .poetic-answer-card { animation: poetic-answer-rise 9s var(--motion-ease-out) infinite; }

@keyframes poetic-file-collect {
  0%, 4% { opacity: 0; transform: translateY(12px) scale(0.85); }
  12%, 39% { opacity: 1; transform: translate(0, 0) scale(1); }
  52%, 100% { opacity: 0; transform: translate(var(--fly-x), var(--fly-y)) scale(0.28); }
}

@keyframes poetic-folder-arrive {
  0%, 37% { opacity: 0; transform: translate(-50%, 70px) scale(0.9); }
  48%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  94%, 100% { opacity: 0; transform: translate(-50%, -5px) scale(0.98); }
}

@keyframes poetic-base-card {
  0%, 5% { opacity: 0; transform: translateY(10px) scale(0.96); }
  12%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; transform: translateY(-3px) scale(0.99); }
}

@keyframes poetic-feedback-rise {
  0%, 31% { opacity: 0; transform: translate(10px, 20px) scale(0.92); }
  40%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; transform: translateY(-3px) scale(0.99); }
}

@keyframes poetic-type-line-one {
  0%, 42% { width: 0; }
  58%, 100% { width: 100%; }
}

@keyframes poetic-type-line-two {
  0%, 57% { width: 0; }
  73%, 100% { width: 100%; }
}

@keyframes poetic-feedback-action {
  0%, 72% { opacity: 0; transform: translateY(5px); }
  79%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes poetic-app-arrive {
  0%, 5% { opacity: 0; transform: translateY(8px) scale(0.97); }
  12%, 90% { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes poetic-old-tab { 0%, 35% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes poetic-new-tab { 0%, 39% { opacity: 0; } 48%, 100% { opacity: 1; } }

@keyframes poetic-recovery-rise {
  0%, 35% { opacity: 0; transform: translateY(18px) scale(0.92); }
  46%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes poetic-spin { to { transform: rotate(360deg); } }

@keyframes poetic-query-type {
  0%, 16% { width: 0; }
  37%, 100% { width: 100%; }
}

@keyframes poetic-source-chip {
  0%, 36% { opacity: 0; transform: translateY(5px) scale(0.88); }
  44%, 90% { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes poetic-answer-rise {
  0%, 48% { opacity: 0; transform: translate(8px, 16px) scale(0.94); }
  58%, 90% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .poetic-layer-card *,
  .aos-research-elevation.active .poetic-layer-card *,
  .aos-sense-elevation.active .poetic-layer-card *,
  .aos-procedure-elevation.active .poetic-layer-card *,
  .aos-harness-elevation.active .poetic-layer-card *,
  .aos-world-elevation.active .poetic-layer-card * {
    animation: none !important;
  }

  .poetic-file,
  .poetic-folder-drop,
  .poetic-feedback-card,
  .poetic-recovery-card,
  .poetic-answer-card,
  .poetic-query-sources i { opacity: 1; transform: none; }
  .poetic-folder-drop { transform: translate(-50%, 0); }
  .poetic-typed-copy span,
  .poetic-query-type span { width: 100%; }
  .poetic-tab-old { display: none; }
  .poetic-tab-new { opacity: 1; }
  .poetic-feedback-card > b { opacity: 1; }
}

/* One consulting story across the reasoning, procedure, execution, and control layers. */
.poetic-sense-evidence {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.poetic-sense-evidence > span {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 5px 7px;
  border: 1px solid rgba(68, 61, 76, 0.09);
  border-radius: 6px;
  background: rgba(248, 248, 249, 0.68);
}

.poetic-sense-evidence > span > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7687a8;
  box-shadow: 0 0 0 2px rgba(118, 135, 168, 0.1);
}

.poetic-sense-evidence b { color: rgba(46, 42, 52, 0.74); font-size: 5.6px; font-weight: 600; }
.poetic-sense-evidence small { color: rgba(61, 56, 69, 0.42); font-size: 4.6px; }
.poetic-sense-evidence .poetic-sense-challenge { border-color: rgba(144, 108, 73, 0.16); background: rgba(245, 235, 220, 0.45); opacity: 0; }
.poetic-sense-evidence .poetic-sense-challenge > i { background: #a77b51; box-shadow: 0 0 0 2px rgba(167, 123, 81, 0.1); }

.poetic-sense-resolution {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(102, 84, 119, 0.13);
  border-radius: 7px;
  background: rgba(239, 235, 244, 0.58);
  opacity: 0;
}

.poetic-sense-resolution > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(115, 91, 137, 0.12); color: #755b89; font-size: 7px; font-style: normal; }
.poetic-sense-resolution b,
.poetic-sense-resolution small { display: block; }
.poetic-sense-resolution b { color: rgba(52, 44, 60, 0.78); font-size: 5.8px; font-weight: 640; }
.poetic-sense-resolution small { margin-top: 3px; color: rgba(63, 55, 71, 0.48); font-size: 4.7px; }

.aos-sense-elevation.active .poetic-sense-challenge { animation: story-challenge-in 9s var(--motion-ease-out) infinite; }
.aos-sense-elevation.active .poetic-sense-resolution { animation: story-resolution-in 9s var(--motion-ease-out) infinite; }

.poetic-procedure-demo .poetic-procedure-active { opacity: 0; transform: translateY(7px); }
.aos-procedure-elevation.active .poetic-procedure-active { animation: story-procedure-add 9s var(--motion-ease-out) infinite; }

/* The updated procedure now runs and pauses exactly where judgment is required. */
.poetic-execution-demo { padding: 14px; }

.poetic-run-card {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 232px;
  padding: 12px;
  border: 1px solid rgba(66, 73, 97, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 22px rgba(42, 48, 68, 0.07);
}

.poetic-run-card header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid rgba(66, 73, 97, 0.09); color: rgba(48, 54, 72, 0.68); font-size: 5.4px; }
.poetic-run-card header span { display: inline-flex; align-items: center; gap: 5px; }
.poetic-run-card header i { width: 6px; height: 6px; border-radius: 50%; background: #7381aa; }
.poetic-run-card header b { font-size: 4.8px; font-weight: 620; }
.poetic-run-progress { height: 2px; margin: 9px 0 7px; overflow: hidden; border-radius: 999px; background: rgba(69, 78, 110, 0.08); }
.poetic-run-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #7584ad; }
.poetic-run-card ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.poetic-run-card li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; min-height: 39px; padding: 5px 7px; border: 1px solid rgba(70, 77, 98, 0.09); border-radius: 7px; background: rgba(248, 249, 251, 0.66); opacity: 0; }
.poetic-run-card li > i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: rgba(107, 124, 167, 0.11); color: #6878a3; font-size: 5px; font-style: normal; font-weight: 700; }
.poetic-run-card li span b,
.poetic-run-card li span small { display: block; }
.poetic-run-card li span b { color: rgba(47, 52, 66, 0.78); font-size: 5.7px; font-weight: 600; }
.poetic-run-card li span small { margin-top: 3px; color: rgba(65, 70, 86, 0.42); font-size: 4.5px; }
.poetic-run-card li > em { color: rgba(73, 86, 122, 0.58); font-size: 4.4px; font-style: normal; font-weight: 650; }
.poetic-run-card .poetic-run-gate { border-color: rgba(153, 112, 70, 0.15); background: rgba(245, 236, 221, 0.45); }
.poetic-run-card .poetic-run-gate > i,
.poetic-run-card .poetic-run-gate > em { color: #9a7048; }

.poetic-approval-card {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  width: 75%;
  min-height: 82px;
  margin: -54px 0 0 auto;
  padding: 10px 11px;
  border: 1px solid rgba(106, 82, 59, 0.15);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 14px 28px rgba(48, 41, 34, 0.14);
  opacity: 0;
}

.poetic-approval-card > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(157, 113, 70, 0.12); color: #996c42; font-size: 8px; font-style: normal; font-weight: 720; }
.poetic-approval-card span b,
.poetic-approval-card span small { display: block; }
.poetic-approval-card span b { color: rgba(59, 48, 39, 0.82); font-size: 6px; font-weight: 640; }
.poetic-approval-card span small { margin-top: 4px; color: rgba(74, 61, 50, 0.5); font-size: 4.8px; line-height: 1.35; }
.poetic-approval-card > em { grid-column: 2; justify-self: end; padding: 5px 8px; border-radius: 999px; background: #302a25; color: #fff; font-size: 4.5px; font-style: normal; font-weight: 620; }

.aos-harness-elevation.active .poetic-run-card { animation: poetic-base-card 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-run-progress i { animation: story-run-progress 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-run-card li:nth-child(1) { animation: story-run-step-one 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-run-card li:nth-child(2) { animation: story-run-step-two 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-run-card li:nth-child(3) { animation: story-run-step-three 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-run-card li:nth-child(4) { animation: story-run-step-four 9s var(--motion-ease-out) infinite; }
.aos-harness-elevation.active .poetic-approval-card { animation: story-approval-rise 9s var(--motion-ease-out) infinite; }

/* Governance follows the same case instead of presenting four disconnected claims. */
.poetic-governance-demo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(29vw, 380px);
  transform: translate(-50%, -50%);
}

.poetic-trace-card {
  position: relative;
  z-index: 2;
  min-height: 214px;
  padding: 13px;
  border: 1px solid rgba(65, 105, 96, 0.14);
  border-radius: 12px;
  background: rgba(252, 254, 253, 0.96);
  box-shadow: 0 14px 30px rgba(40, 67, 61, 0.12);
}

.poetic-trace-card header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgba(65, 105, 96, 0.1); color: rgba(48, 84, 76, 0.66); font-size: 5.5px; }
.poetic-trace-card header span { display: inline-flex; align-items: center; gap: 5px; }
.poetic-trace-card header i { width: 6px; height: 6px; border-radius: 50%; background: #659689; }
.poetic-trace-card header b { font-size: 4.8px; font-weight: 620; }
.poetic-trace-card ol { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.poetic-trace-card li { display: grid; grid-template-columns: 21px 1fr auto; align-items: center; gap: 7px; min-height: 46px; padding: 6px 7px; border: 1px solid rgba(69, 108, 99, 0.09); border-radius: 7px; background: rgba(247, 251, 250, 0.68); opacity: 0; }
.poetic-trace-card li > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(91, 148, 132, 0.11); color: #5e9385; font-size: 7px; font-style: normal; }
.poetic-trace-card li span b,
.poetic-trace-card li span small { display: block; }
.poetic-trace-card li span b { color: rgba(43, 73, 66, 0.8); font-size: 5.8px; font-weight: 620; }
.poetic-trace-card li span small { margin-top: 3px; color: rgba(55, 87, 80, 0.45); font-size: 4.7px; }
.poetic-trace-card li > em { color: rgba(53, 110, 95, 0.66); font-size: 4.5px; font-style: normal; font-weight: 660; }
.poetic-trace-card .poetic-trace-blocked { border-color: rgba(157, 111, 67, 0.16); background: rgba(247, 237, 222, 0.5); }
.poetic-trace-card .poetic-trace-blocked > i,
.poetic-trace-card .poetic-trace-blocked > em { color: #9a6e45; }

.poetic-policy-card {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  width: 78%;
  min-height: 90px;
  margin: -42px 0 0 auto;
  padding: 11px 12px;
  border: 1px solid rgba(72, 106, 98, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 15px 30px rgba(39, 65, 59, 0.16);
  opacity: 0;
}

.poetic-policy-lock { position: relative; width: 22px; height: 18px; margin-top: 5px; border-radius: 5px; background: #5d8f82; }
.poetic-policy-lock::before { content: ""; position: absolute; left: 5px; top: -8px; width: 10px; height: 11px; border: 2px solid #5d8f82; border-bottom: 0; border-radius: 8px 8px 0 0; }
.poetic-policy-card span b,
.poetic-policy-card span small { display: block; }
.poetic-policy-card span b { color: rgba(40, 71, 64, 0.84); font-size: 6.2px; font-weight: 650; }
.poetic-policy-card span small { margin-top: 4px; color: rgba(54, 84, 77, 0.5); font-size: 4.8px; line-height: 1.35; }
.poetic-policy-card > em { grid-column: 2; justify-self: end; padding: 5px 8px; border-radius: 999px; background: #315e53; color: #fff; font-size: 4.5px; font-style: normal; font-weight: 640; }

.aos-governance-elevation.active .poetic-trace-card { animation: poetic-base-card 9s var(--motion-ease-out) infinite; }
.aos-governance-elevation.active .poetic-trace-card li:nth-child(1) { animation: story-run-step-one 9s var(--motion-ease-out) infinite; }
.aos-governance-elevation.active .poetic-trace-card li:nth-child(2) { animation: story-run-step-two 9s var(--motion-ease-out) infinite; }
.aos-governance-elevation.active .poetic-trace-card li:nth-child(3) { animation: story-run-step-three 9s var(--motion-ease-out) infinite; }
.aos-governance-elevation.active .poetic-policy-card { animation: story-policy-rise 9s var(--motion-ease-out) infinite; }

/* A quiet final state: no duplicate logo, no layer counter, one resolved system. */
section.aos-system.aos-system { background: #f7f7f5; }

.aos-platform,
.context-layer {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(237, 239, 240, 0.68) 52%, rgba(212, 216, 219, 0.72));
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.context-system-ring {
  top: 48%;
  width: 62%;
  background: radial-gradient(circle, #fff 0 25%, #ececea 26% 43%, #fafaf8 44% 68%, #c9cac7 69% 70%, #fbfbf9 71% 100%);
}

.context-system-core {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  place-content: center;
  justify-items: center;
  row-gap: 7px;
  width: 44%;
  min-height: 0;
  aspect-ratio: 1;
  padding: 12%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 253, 0.99), rgba(216, 217, 214, 0.98));
}

.context-system-core img {
  width: clamp(26px, 2.4vw, 38px);
  height: clamp(26px, 2.4vw, 38px);
  object-fit: contain;
  background: transparent;
}

.context-system-core strong {
  align-self: auto;
  font-size: clamp(11px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

.governance-dial-core {
  align-content: center;
  gap: 8px;
  padding: 10%;
}

.governance-dial-core strong { align-self: auto; }
.governance-dial-core small { align-self: auto; }

@keyframes story-challenge-in {
  0%, 42% { opacity: 0; transform: translateY(7px); }
  51%, 91% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes story-resolution-in {
  0%, 70% { opacity: 0; transform: translateY(8px) scale(0.96); }
  78%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes story-procedure-add {
  0%, 68% { opacity: 0; transform: translateY(7px); }
  76%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes story-run-progress {
  0%, 8% { width: 0; }
  64%, 100% { width: 76%; }
}

@keyframes story-run-step-one {
  0%, 7% { opacity: 0; transform: translateY(6px); }
  14%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes story-run-step-two {
  0%, 20% { opacity: 0; transform: translateY(6px); }
  28%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes story-run-step-three {
  0%, 35% { opacity: 0; transform: translateY(6px); }
  43%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes story-run-step-four {
  0%, 51% { opacity: 0; transform: translateY(6px); }
  59%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}

@keyframes story-approval-rise {
  0%, 61% { opacity: 0; transform: translate(9px, 16px) scale(0.94); }
  70%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@keyframes story-policy-rise {
  0%, 49% { opacity: 0; transform: translate(9px, 16px) scale(0.94); }
  58%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .poetic-sense-challenge,
  .poetic-sense-resolution,
  .poetic-procedure-demo .poetic-procedure-active,
  .poetic-run-card li,
  .poetic-approval-card,
  .poetic-trace-card li,
  .poetic-policy-card { opacity: 1; transform: none; }
  .poetic-run-progress i { width: 76%; }
}

/* ROI v2 — concrete workflow economics with auditable assumptions. */
section.roi.roi-classic {
  max-width: 1504px;
  padding: clamp(54px, 6vw, 96px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 3%, rgba(255, 255, 255, 0.08), transparent 28%),
    #111;
  color: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.14);
}

.roi-v2-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 18px clamp(48px, 8vw, 120px);
}

.roi-v2-heading .roi-classic-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roi.roi-classic .roi-v2-heading h2 {
  max-width: 850px;
  color: #fff;
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.roi-v2-heading > p:last-child {
  padding-bottom: 5px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  line-height: 1.65;
}

.roi-v2-assumptions {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  margin-top: clamp(38px, 5vw, 66px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.roi-v2-assumptions > span {
  display: grid;
  gap: 10px;
  min-height: 88px;
  padding: 20px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.roi-v2-assumptions > span:last-child { border-right: 0; }
.roi-v2-assumptions small { color: rgba(255, 255, 255, 0.38); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.roi-v2-assumptions strong { align-self: end; color: #fff; font-size: 15px; font-weight: 520; }

.roi-v2-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin-top: 14px;
}

.roi-v2-run {
  min-width: 0;
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.roi-v2-run-context {
  border-color: rgba(255, 255, 255, 0.3);
  background: #f4f4f1;
  color: #111;
}

.roi-v2-run header { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.roi-v2-run header > span { color: rgba(255, 255, 255, 0.28); font-size: 12px; }
.roi-v2-run-context header > span { color: rgba(17, 17, 17, 0.32); }
.roi-v2-run header small { display: block; margin-bottom: 7px; color: rgba(255, 255, 255, 0.4); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; }
.roi-v2-run-context header small { color: rgba(17, 17, 17, 0.45); }
.roi-v2-run h3 { margin: 0; font-size: clamp(20px, 2vw, 27px); font-weight: 430; line-height: 1.12; letter-spacing: -0.025em; }
.roi-v2-run ol { margin: 30px 0 0; padding: 0; list-style: none; }
.roi-v2-run li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.58); font-size: 12px; }
.roi-v2-run-context li { border-color: rgba(17, 17, 17, 0.1); color: rgba(17, 17, 17, 0.6); }
.roi-v2-run li b { flex: 0 0 auto; color: #fff; font-weight: 520; }
.roi-v2-run-context li b { color: #111; }
.roi-v2-run footer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px 18px; margin-top: 18px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.roi-v2-run-context footer { border-color: rgba(17, 17, 17, 0.18); }
.roi-v2-run footer span { color: rgba(255, 255, 255, 0.42); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.roi-v2-run-context footer span { color: rgba(17, 17, 17, 0.44); }
.roi-v2-run footer strong { grid-row: span 2; font-size: clamp(32px, 3vw, 46px); font-weight: 400; letter-spacing: -0.05em; }
.roi-v2-run footer small { color: rgba(255, 255, 255, 0.48); font-size: 11px; }
.roi-v2-run-context footer small { color: rgba(17, 17, 17, 0.5); }

.roi-v2-shift { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.52); text-align: center; }
.roi-v2-shift span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.roi-v2-shift i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; font-size: 20px; font-style: normal; }
.roi-v2-shift small { max-width: 90px; font-size: 9px; line-height: 1.4; }

.roi-v2-results {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.roi-v2-results > div { display: flex; flex-direction: column; min-height: 150px; padding: 24px; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.roi-v2-results > div:last-child { border-right: 0; }
.roi-v2-results small { color: rgba(255, 255, 255, 0.38); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.roi-v2-results strong { margin-top: auto; color: #fff; font-size: clamp(28px, 2.8vw, 42px); font-weight: 400; letter-spacing: -0.045em; }
.roi-v2-results span { margin-top: 7px; color: rgba(255, 255, 255, 0.44); font-size: 10px; }
.roi-v2-result-lead { background: #f4f4f1; }
.roi-v2-result-lead small, .roi-v2-result-lead span { color: rgba(17, 17, 17, 0.5); }
.roi-v2-results .roi-v2-result-lead strong { color: #111; }

.roi-v2-note { max-width: 940px; margin-top: 18px; color: rgba(255, 255, 255, 0.32); font-size: 9px; line-height: 1.6; }

@media (max-width: 980px) {
  .roi-v2-heading { grid-template-columns: 1fr; }
  .roi-v2-assumptions, .roi-v2-results { grid-template-columns: repeat(2, 1fr); }
  .roi-v2-assumptions > span:nth-child(2), .roi-v2-results > div:nth-child(2) { border-right: 0; }
  .roi-v2-assumptions > span:nth-child(-n + 2), .roi-v2-results > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .roi-v2-comparison { grid-template-columns: 1fr; }
  .roi-v2-shift { min-height: 76px; flex-direction: row; }
  .roi-v2-shift i { transform: rotate(90deg); }
}

@media (max-width: 640px) {
  section.roi.roi-classic { padding: 38px 20px; border-radius: 12px; }
  .roi-v2-assumptions, .roi-v2-results { grid-template-columns: 1fr; }
  .roi-v2-assumptions > span, .roi-v2-results > div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .roi-v2-assumptions > span:last-child, .roi-v2-results > div:last-child { border-bottom: 0; }
  .roi-v2-results > div { min-height: 132px; }
}

/* ROI stats wall — large editorial outcomes in the Context Labs theme. */
section.roi.roi-classic {
  max-width: none;
  margin: 0;
  padding: var(--section-space) max(var(--page-pad), calc((100vw - 1504px) / 2));
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background:
    radial-gradient(circle at 88% 4%, rgba(0, 0, 0, 0.035), transparent 23%),
    #f5f5f2;
  color: #111;
  box-shadow: none;
}

section.roi.roi-classic::before {
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 90%, transparent);
}

.roi-stats-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.5fr);
  align-items: end;
  gap: 18px clamp(50px, 8vw, 128px);
  width: min(100%, 1504px);
  margin: 0 auto clamp(50px, 6vw, 88px);
}

.roi-stats-heading .roi-classic-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(17, 17, 17, 0.46);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.roi.roi-classic .roi-stats-heading h2 {
  max-width: 910px;
  color: #111;
  font-size: clamp(45px, 5.7vw, 88px);
  font-weight: 390;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.roi-stats-heading > p:last-child {
  max-width: 430px;
  padding-bottom: 5px;
  color: rgba(17, 17, 17, 0.56);
  font-size: 14px;
  line-height: 1.65;
}

.roi-stats-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(270px, auto);
  gap: 12px;
  width: min(100%, 1504px);
  margin: 0 auto;
}

.roi-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 38px);
  border: 1px solid rgba(17, 17, 17, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 18px 50px rgba(0, 0, 0, 0.035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.roi-stat-card-token { grid-column: span 7; }
.roi-stat-card-hours { grid-column: span 5; background: #111; color: #fff; }
.roi-stat-card-savings { grid-column: span 4; }
.roi-stat-card-roi { grid-column: span 4; background: #deded9; }
.roi-stat-card-support { grid-column: span 4; }

.roi-stat-index {
  color: rgba(17, 17, 17, 0.42);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.roi-stat-card-hours .roi-stat-index { color: rgba(255, 255, 255, 0.42); }

.roi-stat-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: auto 0 0;
  padding-top: 50px;
  color: inherit;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.roi-stat-card h3 strong {
  font-size: clamp(62px, 8vw, 126px);
  font-weight: 390;
  letter-spacing: -0.075em;
}

.roi-stat-card h3 span {
  max-width: 230px;
  color: rgba(17, 17, 17, 0.52);
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.roi-stat-card-hours h3 span { color: rgba(255, 255, 255, 0.52); }

.roi-stat-card > p {
  max-width: 500px;
  margin-top: 24px;
  color: rgba(17, 17, 17, 0.5);
  font-size: 11px;
  line-height: 1.55;
}

.roi-stat-card-hours > p { color: rgba(255, 255, 255, 0.45); }

.roi-stat-bars {
  display: grid;
  gap: 7px;
  margin-top: 28px;
}

.roi-stat-bars i {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(17, 17, 17, 0.12);
}

.roi-stat-bars i:last-child { width: 72%; background: #111; }

.roi-stat-foot {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.roi-stat-foot b { font-size: 22px; font-weight: 450; }
.roi-stat-foot span { color: rgba(255, 255, 255, 0.45); font-size: 10px; }

.roi-stat-card-savings h3 strong,
.roi-stat-card-roi h3 strong,
.roi-stat-card-support h3 strong { font-size: clamp(54px, 5.4vw, 82px); }

.roi-stat-timeline {
  position: relative;
  height: 2px;
  margin-top: 34px;
  background: rgba(17, 17, 17, 0.16);
}

.roi-stat-timeline i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 58%;
  height: 100%;
  background: #111;
}

.roi-stat-timeline i::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
}

.roi-stat-timeline b {
  position: absolute;
  left: 58%;
  top: 12px;
  color: rgba(17, 17, 17, 0.5);
  font-size: 9px;
  font-weight: 600;
  transform: translateX(-50%);
}

.roi-stat-ticket-row {
  display: flex;
  gap: 7px;
  margin-top: 30px;
}

.roi-stat-ticket-row i {
  display: block;
  flex: 1;
  height: 36px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 5px;
  background: rgba(17, 17, 17, 0.04);
}

.roi-stat-ticket-row i:last-child {
  border-style: dashed;
  opacity: 0.22;
}

.roi-stats-note {
  width: min(100%, 1504px);
  margin: 18px auto 0;
  color: rgba(17, 17, 17, 0.38);
  font-size: 9px;
  line-height: 1.55;
}

/* Final cascade guard for the branded Context advantage component family. */
section.highlights.highlights .section-heading h2 {
  max-width: 900px;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(38px, 4.25vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

section.highlights.highlights .highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

section.highlights.highlights .feature,
section.highlights.highlights .feature.wide {
  display: flex;
  min-width: 0;
  min-height: 620px;
  padding: 14px;
  flex-direction: column;
  grid-row: auto;
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  box-shadow: 0 18px 55px rgba(16, 16, 16, 0.05);
}

section.highlights.highlights .workflow-watchtower,
section.highlights.highlights .brain-cycle-demo,
section.highlights.highlights .agent-execution-demo {
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  border-radius: 9px;
}

section.highlights.highlights .feature-copy {
  display: flex;
  min-height: 224px;
  padding: 22px 6px 6px;
  flex: 1;
  flex-direction: column;
}

section.highlights.highlights .feature .feature-copy h3 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(20px, 1.65vw, 25px);
  font-weight: 450;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

section.highlights.highlights .feature .feature-copy p {
  max-width: none;
  margin: 13px 0 22px;
  color: rgba(11, 11, 11, 0.58);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

section.highlights.highlights .feature .feature-copy a {
  margin-top: auto;
  color: #1d6547;
}

@media (max-width: 1100px) {
  section.highlights.highlights .highlight-grid { grid-template-columns: 1fr; }
  section.highlights.highlights .feature,
  section.highlights.highlights .feature.wide { min-height: 0; }
  section.highlights.highlights .feature-copy { min-height: 200px; }
}

@media (max-width: 640px) {
  section.highlights.highlights .section-heading h2 { font-size: clamp(36px, 11vw, 48px); }
  section.highlights.highlights .feature-copy { min-height: 0; }
  section.highlights.highlights .workflow-watchtower,
  section.highlights.highlights .brain-cycle-demo,
  section.highlights.highlights .agent-execution-demo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 980px) {
  .roi-stats-heading { grid-template-columns: 1fr; }
  .roi-stat-card-token, .roi-stat-card-hours { grid-column: span 6; }
  .roi-stat-card-savings, .roi-stat-card-roi { grid-column: span 6; }
  .roi-stat-card-support { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  section.roi.roi-classic { padding: 84px 20px; }
  .roi.roi-classic .roi-stats-heading h2 { font-size: 46px; }
  .roi-stats-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .roi-stat-card-token, .roi-stat-card-hours, .roi-stat-card-savings, .roi-stat-card-roi, .roi-stat-card-support { grid-column: 1; min-height: 300px; }
  .roi-stat-card h3 strong, .roi-stat-card-savings h3 strong, .roi-stat-card-roi h3 strong, .roi-stat-card-support h3 strong { font-size: 66px; }
}

/* Context advantage — premium bento composition and matched product motion. */
section.highlights.highlights .highlight-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
}

section.highlights.highlights .feature,
section.highlights.highlights .feature.wide {
  min-height: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
}

section.highlights.highlights .feature.wide {
  grid-row: span 2;
}

section.highlights.highlights .feature-copy {
  min-height: 0;
  padding: 20px 6px 7px;
}

section.highlights.highlights .feature:not(.wide) .feature-copy {
  flex: 0 0 190px;
}

section.highlights.highlights .feature.wide .feature-copy {
  flex: 0 0 auto;
  padding-top: 24px;
  padding-bottom: 12px;
}

section.highlights.highlights .workflow-watchtower {
  min-height: 520px;
  aspect-ratio: auto;
  flex: 1 1 auto;
}

section.highlights.highlights .agent-execution-demo,
section.highlights.highlights .memory-engine-demo {
  width: 100%;
  min-height: 250px;
  aspect-ratio: 1.75 / 1;
  flex: 1 1 auto;
}

.memory-engine-demo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74, 82, 87, 0.12);
  border-radius: 9px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(145deg, #edf0f1, #dfe4e5);
  color: #202526;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  container-type: inline-size;
}

.memory-engine-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  box-shadow: inset 0 0 48px rgba(41, 50, 53, 0.04);
  pointer-events: none;
}

.memory-product-bar {
  position: absolute;
  z-index: 6;
  top: 9px;
  right: 9px;
  left: 9px;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid rgba(74, 82, 87, 0.11);
  border-radius: 7px;
  background: rgba(251, 252, 252, 0.84);
  box-shadow: 0 8px 22px rgba(50, 57, 61, 0.06);
  backdrop-filter: blur(12px);
}

.memory-product-bar > span,
.memory-product-bar > small {
  display: flex;
  align-items: center;
}

.memory-product-bar > span {
  gap: 7px;
  font-size: clamp(7px, 2.1cqw, 10px);
  font-weight: 600;
}

.memory-product-bar img {
  width: 14px;
  height: 14px;
}

.memory-product-bar > small {
  gap: 5px;
  color: #6d777a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(5px, 1.4cqw, 7px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memory-product-bar > small i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2d7554;
  box-shadow: 0 0 0 4px rgba(45, 117, 84, 0.08);
  animation: memoryLive 1.8s ease-in-out infinite;
}

.memory-source-rail {
  position: absolute;
  z-index: 3;
  top: 50px;
  bottom: 10px;
  left: 9px;
  display: grid;
  width: 34%;
  align-content: center;
  gap: 6px;
}

.memory-source-rail > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(74, 82, 87, 0.1);
  border-radius: 6px;
  background: rgba(250, 251, 251, 0.82);
  box-shadow: 0 5px 16px rgba(50, 57, 61, 0.055);
  animation: memorySourceCycle 12s var(--motion-ease-out) var(--memory-delay) infinite;
}

.memory-source-rail img {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
}

.memory-source-rail b {
  overflow: hidden;
  font-size: clamp(6px, 1.85cqw, 9px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-source-rail small {
  color: #7b8588;
  font-size: clamp(5px, 1.45cqw, 7px);
}

.memory-map-stage {
  position: absolute;
  z-index: 2;
  top: 50px;
  right: 9px;
  bottom: 10px;
  width: 62%;
  overflow: hidden;
  border: 1px solid rgba(74, 82, 87, 0.1);
  border-radius: 7px;
  background: rgba(246, 248, 248, 0.7);
}

.memory-map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(74, 82, 87, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 82, 87, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(135deg, transparent, #000 22%, #000 78%, transparent);
}

.memory-node {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 7px auto;
  column-gap: 5px;
  align-items: center;
  opacity: 0;
  animation: memoryNodeCycle 12s var(--motion-ease-out) infinite;
}

.memory-node i {
  grid-row: 1 / 3;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #2d7554;
  box-shadow: 0 0 0 3px rgba(45, 117, 84, 0.1), 0 5px 12px rgba(31, 86, 61, 0.18);
}

.memory-node b {
  font-size: clamp(5px, 1.55cqw, 8px);
  font-weight: 600;
  white-space: nowrap;
}

.memory-node small {
  color: #7d8789;
  font-size: clamp(4px, 1.2cqw, 6px);
}

.memory-node.node-a { top: 17%; left: 12%; animation-delay: 1.2s; }
.memory-node.node-b { top: 32%; right: 8%; animation-delay: 2.3s; }
.memory-node.node-c { bottom: 30%; left: 18%; animation-delay: 3.4s; }
.memory-node.node-d { right: 12%; bottom: 12%; animation-delay: 4.5s; }

.memory-route {
  position: absolute;
  z-index: 3;
  left: 22%;
  display: block;
  width: 58%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(45, 117, 84, 0.08), rgba(45, 117, 84, 0.58), rgba(45, 117, 84, 0.08));
  transform: rotate(var(--route-angle)) scaleX(0);
  transform-origin: left center;
  animation: memoryRouteCycle 12s var(--motion-ease-out) var(--route-delay) infinite;
}

.memory-route.route-a { top: 28%; --route-angle: 10deg; --route-delay: 2.5s; }
.memory-route.route-b { top: 51%; --route-angle: -12deg; --route-delay: 3.7s; }
.memory-route.route-c { top: 68%; --route-angle: 8deg; --route-delay: 4.8s; }

.memory-insight-card {
  position: absolute;
  z-index: 7;
  right: 18px;
  bottom: 18px;
  width: min(57%, 280px);
  padding: 9px 10px;
  border: 1px solid rgba(45, 117, 84, 0.22);
  border-radius: 7px;
  background: rgba(251, 252, 251, 0.94);
  box-shadow: 0 16px 34px rgba(39, 52, 45, 0.13);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation: memoryInsightCycle 12s var(--motion-ease-out) infinite;
}

.memory-insight-card > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.memory-insight-card > span i {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #2d7554;
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.memory-insight-card b {
  font-size: clamp(6px, 1.8cqw, 9px);
  font-weight: 650;
}

.memory-insight-card p {
  margin: 6px 0 4px;
  color: #454d4f;
  font-size: clamp(5px, 1.55cqw, 8px);
  line-height: 1.35;
}

.memory-insight-card small {
  color: #879092;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(4px, 1.15cqw, 6px);
}

@keyframes memoryLive {
  50% { opacity: 0.45; }
}

@keyframes memorySourceCycle {
  0%, 8%, 88%, 100% { border-color: rgba(74, 82, 87, 0.1); transform: translateX(0); }
  15%, 30% { border-color: rgba(45, 117, 84, 0.32); transform: translateX(3px); }
}

@keyframes memoryNodeCycle {
  0%, 7% { opacity: 0; transform: translateY(4px) scale(0.94); }
  14%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-2px) scale(0.98); }
}

@keyframes memoryRouteCycle {
  0%, 8% { opacity: 0; transform: rotate(var(--route-angle)) scaleX(0); }
  18%, 70% { opacity: 1; transform: rotate(var(--route-angle)) scaleX(1); }
  88%, 100% { opacity: 0; transform: rotate(var(--route-angle)) scaleX(1); }
}

@keyframes memoryInsightCycle {
  0%, 48% { opacity: 0; transform: translateY(8px) scale(0.98); }
  58%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(-3px) scale(0.99); }
}

@media (max-width: 1100px) {
  section.highlights.highlights .highlight-grid {
    grid-template-columns: 1fr;
  }

  section.highlights.highlights .feature.wide {
    grid-row: auto;
  }

  section.highlights.highlights .feature:not(.wide) .feature-copy {
    flex-basis: auto;
  }

  section.highlights.highlights .workflow-watchtower {
    min-height: 420px;
    aspect-ratio: 7 / 4;
  }
}

@media (max-width: 640px) {
  section.highlights.highlights .workflow-watchtower {
    min-height: 300px;
    aspect-ratio: auto;
  }

  section.highlights.highlights .agent-execution-demo,
  section.highlights.highlights .memory-engine-demo {
    min-height: 260px;
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-engine-demo * {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .memory-node,
  .memory-route,
  .memory-insight-card {
    opacity: 1;
  }
}

/* Final editorial cascade: keep late component additions on the shared system. */
:root { --section-space: clamp(80px, 8vw, 120px); }

.highlights .section-heading .eyebrow,
.roi-stats-heading .roi-classic-eyebrow,
.industry-stage-eyebrow {
  color: var(--editorial-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.055em;
}

.atlas h2,
section.highlights.highlights .section-heading h2,
.roi.roi-classic .roi-stats-heading h2,
section.cta.cta h2 {
  max-width: 820px;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 390;
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.industry-heading h2 {
  max-width: 768px;
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

section.highlights.highlights .feature .feature-copy h3,
.industry-card-summary h3 {
  color: var(--editorial-subheading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

section.highlights.highlights .feature .feature-copy p,
.industry-card-summary p,
.industry-use-case span,
.roi-stats-heading > p:last-child {
  color: var(--editorial-copy);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

section.highlights.highlights .feature .feature-copy a {
  color: #346a50;
  font-size: 13px;
  font-weight: 500;
}

.aos-tab-label { font-weight: 430; }
.aos-tab-description,
.aos-tab-description > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.aos-tab-description strong,
.aos-tab[data-title] .aos-tab-description strong {
  font-size: 16px;
  font-weight: 420;
  line-height: 1.35;
}

.roi.roi-classic .roi-stats-heading h2 { max-width: 760px; }
.roi-stats-heading { margin-bottom: clamp(40px, 5vw, 68px); }
.roi-stat-card { padding: clamp(22px, 2.2vw, 32px); }
.roi-stat-index { font-weight: 500; }

.roi-stat-card h3 {
  padding-top: 38px;
  font-weight: 390;
  line-height: 1;
  letter-spacing: -0.035em;
}

.roi-stat-card h3 strong,
.roi-stat-card-savings h3 strong,
.roi-stat-card-roi h3 strong,
.roi-stat-card-support h3 strong {
  font-size: clamp(48px, 5.6vw, 76px);
  font-weight: 380;
  letter-spacing: -0.055em;
}

.roi-stat-card h3 span {
  color: var(--editorial-copy);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.18;
}

section.cta.cta { padding: clamp(48px, 6vw, 82px); }
section.cta.cta h2 { color: var(--editorial-subheading); }

.closing-video h2 {
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 380;
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.footer-brand {
  font-size: clamp(28px, 2.1vw, 36px);
  font-weight: 430;
}

.footer-company p,
.footer-column a {
  font-size: 14px;
  font-weight: 400;
}

.footer-column h2 {
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0.055em;
}

section.highlights.highlights .feature,
section.highlights.highlights .feature.wide {
  align-self: start;
}

section.highlights.highlights .workflow-watchtower {
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 7 / 4;
  flex: 0 0 auto;
}

section.highlights.highlights .agent-execution-demo,
section.highlights.highlights .memory-engine-demo {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.75 / 1;
  flex: 0 0 auto;
}

section.highlights.highlights .feature:not(.wide) .feature-copy,
section.highlights.highlights .feature.wide .feature-copy {
  min-height: 176px;
  padding: 20px 6px 8px;
  flex: 1 1 auto;
}

@media (max-width: 640px) {
  .atlas h2,
  section.highlights.highlights .section-heading h2,
  .industry-heading h2,
  .roi.roi-classic .roi-stats-heading h2,
  section.cta.cta h2 { font-size: 32px; }

  section.highlights.highlights .workflow-watchtower,
  section.highlights.highlights .agent-execution-demo,
  section.highlights.highlights .memory-engine-demo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Canonical shell guard — intentionally last. */
:root {
  --content-max: 1504px;
  --shell-gutter: max(var(--page-pad), calc(((100vw - var(--content-max)) / 2) + var(--page-pad)));
}

body,
button,
input,
select,
textarea {
  font-family: "Inter", Arial, sans-serif;
}

main > section:not(.hero) :is(h2, h3, p, a, button),
.site-footer :is(h2, p, a) {
  font-family: "Inter", Arial, sans-serif;
}

section.logo-marquee.logo-marquee,
section.context-flow.agent-workflow-flow,
.highlights .section-heading,
.highlights .highlight-grid,
.industry-heading,
.industry-carousel,
.aos-layout {
  width: min(100%, var(--content-max));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--page-pad);
  padding-left: var(--page-pad);
  box-sizing: border-box;
}

section.atlas.atlas,
section.roi.roi-classic {
  padding-right: var(--shell-gutter);
  padding-left: var(--shell-gutter);
}

section.cta.cta {
  width: calc(100% - (var(--shell-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-pad) * 2));
}

.aos-layout {
  max-width: var(--content-max);
}

.site-footer {
  padding-right: var(--shell-gutter);
  padding-left: var(--shell-gutter);
}

.footer-top {
  width: 100%;
  max-width: calc(var(--content-max) - (var(--page-pad) * 2));
}

.atlas h2,
section.highlights.highlights .section-heading h2,
.industry-heading h2,
.roi.roi-classic .roi-stats-heading h2,
section.cta.cta h2 {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 390;
}

.industry-heading h2,
section.highlights.highlights .feature .feature-copy h3,
.industry-card-summary h3,
.industry-stage-name,
section.highlights.highlights .feature .feature-copy p,
.industry-card-summary p,
.industry-stage-desc,
.industry-use-case span,
.roi-stats-heading > p:last-child,
.footer-company p,
.footer-column a {
  font-weight: 400;
}

.highlights .section-heading .eyebrow,
.roi-stats-heading .roi-classic-eyebrow,
.industry-stage-eyebrow,
.footer-column h2 {
  font-weight: 500;
}

@media (max-width: 760px) {
  :root { --page-pad: 24px; }
  section.cta.cta { width: calc(100% - (var(--page-pad) * 2)); }
  .footer-top { max-width: none; }
}

/* Compounding memory: a clean monochrome causal topology. */
.memory-engine-demo {
  background: #fff;
  border-color: rgba(15, 15, 15, 0.1);
  box-shadow: none;
}

.memory-network-shell {
  position: absolute;
  z-index: 4;
  inset: 9px;
  overflow: hidden;
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 48%, rgba(15, 15, 15, 0.025), transparent 50%),
    #fff;
  box-shadow:
    inset 0 0 48px rgba(15, 15, 15, 0.025),
    0 12px 30px rgba(15, 15, 15, 0.045);
}

.memory-network-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(15, 15, 15, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 15, 0.075) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at center, #000 22%, transparent 86%);
}

.memory-network-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Homepage editorial alignment — calibrated from the supplied reference sections. */
:root {
  --bg: #fbfbfa;
  --ink: #111211;
  --muted: #737671;
  --line: rgba(15, 15, 15, 0.1);
  --card: #efefec;
  --surface: #f1f1ee;
  --surface-raised: #fff;
  --radius: 6px;
  --section-space: 96px;
}

body {
  background: var(--bg);
  color: var(--ink);
}

section.context-flow.agent-workflow-flow,
section.aos-system.aos-system .aos-visual,
.highlights .workflow-watchtower,
.highlights .agent-execution-demo,
.roi.roi-classic {
  filter: grayscale(1);
}

section.atlas.atlas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
}

.atlas h2,
section.highlights.highlights .section-heading h2,
.industry-heading h2,
.roi.roi-classic .roi-stats-heading h2,
section.cta.cta h2 {
  max-width: 768px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.atlas a,
section.highlights.highlights .feature .feature-copy a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  transition: color 160ms ease;
}

.atlas a:hover,
section.highlights.highlights .feature .feature-copy a:hover {
  color: var(--ink);
}

section.highlights.highlights,
section.industries.industries,
section.roi.roi-classic {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  border-color: var(--line);
  background: var(--bg);
}

section.highlights.highlights .highlight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

section.highlights.highlights .feature,
section.highlights.highlights .feature.wide {
  display: block;
  min-height: 0;
  padding: 0;
  grid-row: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

section.highlights.highlights .workflow-watchtower,
section.highlights.highlights .agent-execution-demo,
section.highlights.highlights .memory-engine-demo {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--card);
  box-shadow: none;
}

section.highlights.highlights .feature:not(.wide) .feature-copy,
section.highlights.highlights .feature.wide .feature-copy {
  display: block;
  min-height: 0;
  padding: 20px 0 0;
}

section.highlights.highlights .feature .feature-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

section.highlights.highlights .feature .feature-copy p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

section.highlights.highlights .feature .feature-copy a {
  margin-top: 20px;
}

.memory-network-shell {
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.highlights .agent-workspace {
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.highlights .agent-live-video {
  filter: grayscale(1) contrast(0.96);
}

.highlights .wt-root .cell.route-node,
.highlights .wt-root .cell.signal,
.highlights .wt-root .cell.review-node,
.highlights .wt-root .cell.reviewed {
  border-color: rgba(15, 15, 15, 0.2);
  background: rgba(15, 15, 15, 0.07);
  box-shadow: none;
}

.aos-visual :is(
  .aos-platform-title,
  .procedure-ground-step small,
  .harness-ground-agent small,
  .harness-human-gate small,
  .world-domain,
  .governance-axis,
  .governance-dial-core strong,
  .governance-dial-core small,
  .context-system-axis,
  .context-system-core span
) {
  display: none !important;
}

.industry-card-summary {
  padding-top: 20px;
}

.industry-card-summary h3 {
  color: var(--ink);
}

.industry-arrow {
  border-radius: 0.4em;
  background: var(--card);
  box-shadow: none;
}

.industry-progress {
  background: var(--card);
}

.industry-stage-body {
  padding-top: 22px;
}

.roi.roi-classic {
  background: var(--bg);
}

.roi-stats-heading {
  margin-bottom: 48px;
}

.roi-stat-card,
.roi-stat-card-token,
.roi-stat-card-savings,
.roi-stat-card-roi,
.roi-stat-card-support {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.roi-stat-card-hours {
  border-color: #111;
  background: #111;
  color: #fff;
}

.roi-stat-card h3 span,
.roi-stat-card > p {
  color: var(--muted);
}

.roi-stat-card-hours h3 span,
.roi-stat-card-hours > p {
  color: rgba(255, 255, 255, 0.64);
}

section.cta.cta {
  width: min(calc(100% - (var(--shell-gutter) * 2)), calc(var(--content-max) - (var(--page-pad) * 2)));
  max-width: none;
  margin: 0 auto !important;
  padding: var(--section-space) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

.cta .button.dark,
.cta .button.light {
  min-height: 36px;
  border-radius: 0.4em;
  box-shadow: none;
}

.cta .button.dark {
  border-color: #111;
  background: #111;
}

.cta .button.light {
  border-color: transparent;
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 640px) {
  :root { --section-space: 112px; }

  .atlas h2,
  section.highlights.highlights .section-heading h2,
  .industry-heading h2,
  .roi.roi-classic .roi-stats-heading h2,
  section.cta.cta h2 {
    font-size: 36px;
  }
}

@media (max-width: 1100px) {
  section.highlights.highlights .highlight-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  section.highlights.highlights .feature {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  section.atlas.atlas {
    align-items: flex-start;
    flex-direction: column;
  }

  section.highlights.highlights .workflow-watchtower,
  section.highlights.highlights .agent-execution-demo,
  section.highlights.highlights .memory-engine-demo {
    aspect-ratio: 4 / 3;
  }

  section.cta.cta {
    width: calc(100% - (var(--page-pad) * 2));
    padding: 80px 0;
  }
}

/* Homepage revision: restrained color, restored bento geometry, and dark research band. */
section.atlas.atlas {
  align-items: flex-start;
  gap: clamp(40px, 6vw, 96px);
  border-color: rgba(255, 255, 255, 0.12);
  background: #202220;
  color: #fff;
}

.atlas-heading {
  flex: 1 1 42%;
  min-width: min(100%, 280px);
  max-width: 640px;
}

.atlas h2 {
  max-width: 18ch;
  color: #fff;
}

.atlas-copy {
  display: flex;
  flex: 0 1 28rem;
  flex-direction: column;
  gap: 18px;
  max-width: 28rem;
  padding-top: 4px;
}

.atlas-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.atlas a {
  color: rgba(255, 255, 255, 0.66);
}

.atlas-copy a {
  margin-top: 4px;
  width: fit-content;
  font-size: 16px;
}

.atlas a:hover {
  color: #fff;
}

section.aos-system.aos-system .aos-visual {
  filter: none;
}

.highlights .workflow-watchtower {
  filter: saturate(0.62) contrast(0.9) brightness(1.03);
}

.highlights .agent-execution-demo {
  filter: none;
}

.highlights .agent-live-video {
  filter: saturate(0.58) contrast(0.9) brightness(1.04);
}

section.highlights.highlights .highlight-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
  gap: 24px;
}

section.highlights.highlights .feature,
section.highlights.highlights .feature.wide {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

section.highlights.highlights .feature.wide {
  grid-row: span 2;
}

section.highlights.highlights .feature.wide .workflow-watchtower {
  min-height: 520px;
  aspect-ratio: auto;
  flex: 1 1 auto;
}

section.highlights.highlights .feature:not(.wide) .agent-execution-demo,
section.highlights.highlights .feature:not(.wide) .memory-engine-demo {
  min-height: 250px;
  aspect-ratio: 16 / 9;
  flex: 1 1 auto;
}

section.highlights.highlights .feature:not(.wide) .feature-copy {
  flex: 0 0 190px;
}

section.highlights.highlights .feature.wide .feature-copy {
  flex: 0 0 auto;
  padding-top: 24px;
}

@media (max-width: 1100px) {
  section.highlights.highlights .highlight-grid {
    grid-template-columns: 1fr;
  }

  section.highlights.highlights .feature.wide {
    grid-row: auto;
  }

  section.highlights.highlights .feature.wide .workflow-watchtower {
    min-height: 420px;
    aspect-ratio: 7 / 4;
  }

  section.highlights.highlights .feature:not(.wide) .feature-copy {
    flex-basis: auto;
  }
}

@media (max-width: 640px) {
  section.highlights.highlights .feature.wide .workflow-watchtower,
  section.highlights.highlights .feature:not(.wide) .agent-execution-demo,
  section.highlights.highlights .feature:not(.wide) .memory-engine-demo {
    min-height: 260px;
    aspect-ratio: 4 / 3;
  }
}

/* Let the workflow visual blend into the page instead of reading as a separate AI demo card. */
section.highlights.highlights .feature.wide .workflow-watchtower {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.highlights .wt-root .map-board {
  inset: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.highlights .wt-root .map-axis,
.highlights .wt-root .map-legend,
.highlights .wt-root .map-callout,
.highlights .wt-root .ptag,
.highlights .wt-root .source-strip-label,
.highlights .wt-root .rlabel {
  font-family: "Inter", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.highlights .wt-root .map-axis,
.highlights .wt-root .map-legend {
  color: rgba(17, 18, 17, 0.38);
}

.highlights .wt-root .map-callout,
.highlights .wt-root .map-callout.active {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(17, 18, 17, 0.48);
  font-size: 8px;
  font-weight: 400;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.highlights .wt-root .ptag {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(17, 18, 17, 0.5);
  font-size: 9px;
  font-weight: 400;
}

.highlights .wt-root .source-strip {
  padding: 6px 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(15, 15, 15, 0.08);
  border-radius: 0;
  background: transparent;
}

.highlights .wt-root .source-strip-label,
.highlights .wt-root .rlabel {
  color: rgba(17, 18, 17, 0.5);
  font-size: 9px;
  font-weight: 400;
}

.highlights .wt-root .obar {
  padding: 11px 0 0;
  border-top: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 0;
  background: transparent;
}

.highlights .wt-root .otxt {
  color: var(--ink);
  font-weight: 400;
}

.highlights .wt-root .obtn {
  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 5px;
  background: #f0f0ed;
  color: var(--ink);
  font-weight: 400;
}

/* Restore quiet source and workflow colors without making the flow visually sharp. */
section.context-flow.agent-workflow-flow {
  filter: saturate(0.62) contrast(0.96) brightness(1.01);
}

/* Crop the source-image footer strip while preserving the live carousel geometry. */
.industry-page-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: rgba(17, 17, 17, 0.7);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.industry-page-link span {
  transition: transform 180ms ease;
}

.industry-page-link:hover span,
.industry-page-link:focus-visible span {
  transform: translate(2px, -2px);
}

.industry-card img {
  inset: 0 0 auto;
  height: 112%;
}

.atlas-link-arrow {
  font-size: 12px;
  line-height: 1;
  transition: transform 160ms ease;
}

.atlas a:hover .atlas-link-arrow {
  transform: translateX(2px);
}

/* Match the graph's crisp geometry instead of using soft rounded grid tiles. */
.highlights .wt-root .cell {
  border-radius: 1px;
}

/* Compact workflow outcomes — typography and density aligned to the editorial system. */
section.workflow-metrics {
  padding: 72px var(--shell-gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}

.workflow-metrics-heading,
.roi-cylinder-stage,
.roi-cylinder-detail {
  width: 100%;
  max-width: calc(var(--content-max) - (var(--page-pad) * 2));
  margin-right: auto;
  margin-left: auto;
}

.workflow-metrics-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 370px);
  align-items: end;
  gap: 40px;
  margin-bottom: 28px;
}

.workflow-metrics-label {
  margin: 0 0 14px;
  color: var(--editorial-faint);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: none;
}

.workflow-metrics-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 390;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.workflow-metrics-heading > p {
  max-width: 370px;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.roi-cylinder-stage {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  min-height: 430px;
  padding: 18px 0 8px;
  border-top: 1px solid var(--line);
}

.roi-cylinder-lead {
  max-width: 210px;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.roi-cylinder {
  position: relative;
  width: min(100%, 720px);
  height: 390px;
  margin: 0 auto;
  outline: none;
}

.roi-cylinder:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(17, 18, 17, 0.28);
}

.roi-cylinder-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;
}

.roi-cylinder-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

.roi-cylinder-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 36ch);
  margin: 0;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(30px, 3.2vw, 36px);
  font-weight: 390;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
  white-space: nowrap;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  opacity: 0;
  will-change: transform, opacity, filter;
  cursor: pointer;
  user-select: none;
}

.roi-cylinder-item span {
  display: inline-block;
  max-width: 100%;
  font: inherit;
  letter-spacing: inherit;
}

.roi-cylinder-item.is-active {
  font-weight: 390;
  color: var(--ink);
}

.roi-cylinder-fade {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 96px;
  pointer-events: none;
}

.roi-cylinder-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--bg) 10%, rgba(251, 251, 250, 0));
}

.roi-cylinder-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 10%, rgba(251, 251, 250, 0));
}

.roi-cylinder-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}

.roi-cylinder-progress {
  display: none;
  margin: 0;
  color: var(--editorial-faint);
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.roi-cylinder-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(17, 18, 17, 0.22);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: transparent;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.roi-cylinder-cta:hover,
.roi-cylinder-cta:focus-visible {
  border-color: rgba(17, 18, 17, 0.5);
  background: rgba(17, 18, 17, 0.03);
  color: var(--ink);
}

.roi-cylinder-detail {
  min-height: 2.8em;
  margin-top: 8px;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
  transition: opacity 220ms ease;
}

.roi-cylinder-detail.is-swapping {
  opacity: 0;
}

@media (max-width: 960px) {
  .roi-cylinder-stage {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: start;
    gap: 16px;
    min-height: 0;
    padding-top: 24px;
  }

  .roi-cylinder-lead {
    max-width: 34ch;
  }

  .roi-cylinder {
    width: 100%;
    height: clamp(320px, 54vh, 420px);
    justify-self: stretch;
  }

  .roi-cylinder-aside {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
  }

  .roi-cylinder-progress {
    display: block;
  }

  .roi-cylinder-detail {
    max-width: none;
    min-height: 4.5em;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
  }

  .roi-cylinder-item {
    width: 100%;
    max-width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
    white-space: normal;
    font-size: clamp(24px, 6.8vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.03em;
  }

  .roi-cylinder-item span {
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: normal;
  }

  .roi-cylinder-fade {
    height: 72px;
  }

  .roi-cylinder-cta {
    flex: 0 0 auto;
  }
}

@media (max-width: 860px) {
  section.workflow-metrics { padding: 64px var(--page-pad); }
  .workflow-metrics-heading { grid-template-columns: 1fr; gap: 18px; }
  .workflow-metrics-heading > p { max-width: 560px; }
}

@media (max-width: 560px) {
  section.workflow-metrics { padding-top: 52px; padding-bottom: 52px; }
  .workflow-metrics-heading { margin-bottom: 20px; }
  .roi-cylinder { height: clamp(300px, 48vh, 380px); }
  .roi-cylinder-item { width: 100%; font-size: clamp(23px, 6.8vw, 28px); }
  .roi-cylinder-aside { flex-wrap: wrap; }
  .roi-cylinder-cta { min-width: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .roi-cylinder-item {
    will-change: auto;
  }

  .roi-cylinder-detail {
    transition: none;
  }
}

/* Enterprise layer system: one quiet material and one restrained review state. */
:root {
  --aos-enterprise-ink: #171817;
  --aos-enterprise-copy: rgba(23, 24, 23, 0.62);
  --aos-enterprise-faint: rgba(23, 24, 23, 0.42);
  --aos-enterprise-line: rgba(23, 24, 23, 0.11);
  --aos-enterprise-surface: rgba(250, 250, 248, 0.94);
  --aos-enterprise-raised: rgba(255, 255, 253, 0.98);
  --aos-enterprise-muted: #606762;
  --aos-enterprise-review: #85735f;
}

.poetic-layer-card,
.poetic-governance-demo {
  font-family: "Inter", Arial, sans-serif;
}

.aos-synthesis-card,
.aos-sense-card,
.aos-procedure-card,
.aos-harness-card,
.aos-world-card {
  border-color: var(--aos-enterprise-line);
  background: linear-gradient(145deg, rgba(255, 255, 253, 0.97), rgba(239, 239, 236, 0.91));
  color: var(--aos-enterprise-ink);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92), 0 16px 34px rgba(17, 18, 17, 0.09);
  backdrop-filter: blur(10px) saturate(0.3);
  -webkit-backdrop-filter: blur(10px) saturate(0.3);
}

.aos-synthesis-card::before,
.aos-sense-card::before,
.aos-procedure-card::before,
.aos-harness-card::before,
.aos-world-card::before {
  border-color: rgba(255, 255, 255, 0.58);
}

:is(
  .poetic-file,
  .poetic-folder-drop,
  .poetic-upload-composer,
  .poetic-investigation-card,
  .poetic-feedback-card,
  .poetic-query-card,
  .poetic-answer-card,
  .poetic-run-card,
  .poetic-approval-card,
  .poetic-trace-card,
  .poetic-policy-card
) {
  border-color: var(--aos-enterprise-line);
  background: var(--aos-enterprise-raised);
  box-shadow: 0 10px 25px rgba(17, 18, 17, 0.075);
}

.poetic-layer-card :is(b, strong),
.poetic-governance-demo :is(b, strong) {
  color: var(--aos-enterprise-ink);
  font-weight: 520;
}

.poetic-layer-card :is(p, small, em),
.poetic-governance-demo :is(p, small, em) {
  color: var(--aos-enterprise-copy);
}

.poetic-file > i,
.poetic-file:nth-child(n) > i {
  border-color: rgba(23, 24, 23, 0.18);
  color: var(--aos-enterprise-muted);
}

.poetic-file b { color: var(--aos-enterprise-ink); font-size: 7.5px; }
.poetic-file small { color: var(--aos-enterprise-faint); font-size: 5.6px; }

.poetic-folder-icon {
  background: linear-gradient(145deg, #d3d3cf, #aaa9a4);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.52);
}

.poetic-folder-icon::before { background: #bdbcb7; }
.poetic-folder-drop strong { font-size: 8px; }
.poetic-folder-drop small { color: var(--aos-enterprise-faint); font-size: 5.6px; }

.poetic-upload-composer {
  border-color: var(--aos-enterprise-line);
  background: rgba(255, 255, 253, 0.72);
  color: var(--aos-enterprise-faint);
  font-size: 6.2px;
}

.poetic-upload-composer > i,
.poetic-feedback-card > b,
.poetic-approval-card > em,
.poetic-policy-card > em {
  background: var(--aos-enterprise-ink);
  color: #fff;
}

.poetic-investigation-card h3,
.poetic-mini-header span { color: var(--aos-enterprise-ink); font-size: 8.5px; }
.poetic-investigation-result,
.poetic-typed-copy { color: var(--aos-enterprise-copy); font-size: 6.4px; }
.poetic-investigation-result > i,
.poetic-answer-card header i {
  background: rgba(96, 103, 98, 0.11);
  color: var(--aos-enterprise-muted);
}

.poetic-sense-evidence > span,
.poetic-procedure-row,
.poetic-run-card li,
.poetic-trace-card li {
  border-color: rgba(23, 24, 23, 0.085);
  background: rgba(247, 247, 244, 0.72);
}

.poetic-sense-evidence > span > i,
.poetic-run-card header i,
.poetic-trace-card header i,
.poetic-run-progress i {
  background: var(--aos-enterprise-muted);
  box-shadow: none;
}

.poetic-sense-evidence .poetic-sense-challenge,
.poetic-procedure-active,
.poetic-run-card .poetic-run-gate,
.poetic-trace-card .poetic-trace-blocked {
  border-color: rgba(133, 115, 95, 0.16);
  background: rgba(133, 115, 95, 0.075);
}

.poetic-sense-evidence .poetic-sense-challenge > i,
.poetic-run-card .poetic-run-gate > i {
  background: var(--aos-enterprise-review);
  box-shadow: none;
}

.poetic-sense-resolution {
  border-color: var(--aos-enterprise-line);
  background: rgba(237, 237, 233, 0.76);
}

.poetic-sense-resolution > i,
.poetic-procedure-row > i,
.poetic-run-card li > i,
.poetic-trace-card li > i,
.poetic-approval-card > i {
  background: rgba(96, 103, 98, 0.1);
  color: var(--aos-enterprise-muted);
}

.poetic-procedure-row span b,
.poetic-run-card li span b,
.poetic-trace-card li span b { font-size: 6.3px; }

.poetic-procedure-row span small,
.poetic-run-card li span small,
.poetic-trace-card li span small { color: var(--aos-enterprise-faint); font-size: 5px; }

.poetic-query-card > small,
.poetic-query-type,
.poetic-answer-card header,
.poetic-answer-card p,
.poetic-trace-card header,
.poetic-run-card header { color: var(--aos-enterprise-copy); }

.poetic-query-type { font-size: 8.5px; }
.poetic-answer-card p { font-size: 6.4px; }
.poetic-query-sources i {
  border-color: var(--aos-enterprise-line);
  background: rgba(237, 237, 233, 0.72);
  color: var(--aos-enterprise-copy);
}

.poetic-policy-lock,
.poetic-policy-lock::before {
  border-color: var(--aos-enterprise-muted);
  background: var(--aos-enterprise-muted);
}

.poetic-policy-lock::before { background: transparent; }

.poetic-run-card .poetic-run-gate > em,
.poetic-trace-card .poetic-trace-blocked > em,
.poetic-procedure-active > em {
  color: var(--aos-enterprise-review);
}

/* The ground graph follows the same enterprise palette as the cards. */
.aos-layer:not(.integration-layer) .aos-c-dot {
  border-color: rgba(255, 255, 253, 0.76) !important;
  background: radial-gradient(circle at 34% 24%, #fff 0 10%, #e3e3df 29%, #8d918e 63%, #f4f4f1 100%) !important;
  box-shadow:
    inset -3px -5px 8px rgba(56, 60, 57, 0.22),
    inset 3px 4px 7px rgba(255, 255, 255, 0.84),
    0 7px 10px rgba(37, 40, 38, 0.16) !important;
}

.research-layer .aos-research-evidence-node {
  border-color: rgba(73, 78, 75, 0.4) !important;
  background: radial-gradient(circle at 34% 24%, #fff 0 13%, #d9dad6 32%, #666c68 67%, #f1f1ee 100%) !important;
  box-shadow:
    inset -3px -4px 7px rgba(43, 48, 45, 0.24),
    inset 3px 3px 6px rgba(255, 255, 255, 0.88),
    0 0 0 3px rgba(71, 76, 73, 0.06),
    0 8px 13px rgba(43, 48, 45, 0.2) !important;
}

.aos-research-projection {
  background:
    linear-gradient(180deg, rgba(216, 217, 213, 0.34), rgba(194, 196, 191, 0.1) 57%, transparent),
    radial-gradient(ellipse at 50% 24%, rgba(250, 250, 247, 0.5), transparent 66%);
}

.aos-research-intake-line {
  stroke: rgba(73, 78, 75, 0.34) !important;
}

.aos-research-mesh-line {
  stroke: rgba(91, 96, 92, 0.25) !important;
}

.aos-research-junction {
  fill: rgba(242, 242, 239, 0.96) !important;
  stroke: rgba(73, 78, 75, 0.5) !important;
  filter: drop-shadow(0 0 2px rgba(63, 68, 65, 0.28));
}

.aos-research-source-halo {
  fill: rgba(96, 103, 98, 0.045) !important;
  stroke: rgba(73, 78, 75, 0.42) !important;
}

.aos-research-packet {
  fill: rgba(247, 247, 244, 0.98) !important;
  stroke: rgba(65, 70, 67, 0.58) !important;
  filter: drop-shadow(0 0 2px rgba(63, 68, 65, 0.34));
}

.aos-research-uplinks {
  filter: drop-shadow(0 0 2px rgba(63, 68, 65, 0.14));
}

.aos-research-uplinks path {
  stroke: rgba(73, 78, 75, 0.48) !important;
}

/* Layer-card composition: quiet contrast, one enterprise accent, no redundant frames. */
:root {
  --aos-enterprise-accent: #708b7d;
  --aos-enterprise-accent-soft: rgba(112, 139, 125, 0.1);
  --aos-enterprise-review: #9a7c5d;
  --aos-enterprise-review-soft: rgba(154, 124, 93, 0.09);
  --aos-enterprise-card-line: rgba(30, 35, 32, 0.13);
  --aos-enterprise-card-shadow: 0 12px 28px rgba(23, 28, 25, 0.09);
}

section.aos-system.aos-system .aos-visual {
  filter: saturate(0.72) contrast(0.99);
}

/* 1. Context substrate keeps its frame, now aligned with the site. */
.aos-synthesis-card.poetic-upload-demo {
  border: 1px solid var(--aos-enterprise-card-line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 253, 0.97), rgba(241, 243, 240, 0.93));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96), 0 18px 38px rgba(23, 28, 25, 0.1);
  backdrop-filter: blur(10px) saturate(0.72);
  -webkit-backdrop-filter: blur(10px) saturate(0.72);
}

.aos-synthesis-card.poetic-upload-demo::before {
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 7px;
}

/* 2–5. The content cards carry the hierarchy; the decorative outer frame is removed. */
.aos-sense-card.poetic-layer-card,
.aos-procedure-card.poetic-layer-card,
.aos-harness-card.poetic-layer-card,
.aos-world-card.poetic-layer-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.aos-sense-card.poetic-layer-card::before,
.aos-procedure-card.poetic-layer-card::before,
.aos-harness-card.poetic-layer-card::before,
.aos-world-card.poetic-layer-card::before {
  display: none;
}

/* Shared inner-card material based on the supplied flat, restrained references. */
:is(
  .poetic-file,
  .poetic-folder-drop,
  .poetic-upload-composer,
  .poetic-investigation-card,
  .poetic-feedback-card,
  .poetic-query-card,
  .poetic-answer-card,
  .poetic-run-card,
  .poetic-approval-card,
  .poetic-trace-card,
  .poetic-policy-card
) {
  border: 1px solid var(--aos-enterprise-card-line);
  border-radius: 8px;
  background: rgba(255, 255, 253, 0.97);
  box-shadow: var(--aos-enterprise-card-shadow);
}

.poetic-layer-card :is(b, strong),
.poetic-governance-demo :is(b, strong) {
  color: #222522;
  font-weight: 500;
}

.poetic-layer-card :is(p, small),
.poetic-governance-demo :is(p, small) {
  color: rgba(34, 37, 34, 0.54);
  font-weight: 400;
}

.poetic-file b { font-size: 7.8px; }
.poetic-file small { font-size: 5.8px; }
.poetic-folder-drop strong { font-size: 8.2px; }
.poetic-folder-drop small { font-size: 5.8px; }
.poetic-upload-composer { font-size: 6.3px; }
.poetic-investigation-card h3,
.poetic-mini-header span { font-size: 9px; font-weight: 500; }
.poetic-investigation-result,
.poetic-typed-copy { font-size: 6.6px; }
.poetic-procedure-row span b,
.poetic-run-card li span b,
.poetic-trace-card li span b { font-size: 6.5px; font-weight: 500; }
.poetic-procedure-row span small,
.poetic-run-card li span small,
.poetic-trace-card li span small { font-size: 5.1px; }
.poetic-query-type { font-size: 8.8px; font-weight: 500; }
.poetic-answer-card p { font-size: 6.6px; }

/* One positive accent for active/complete states. */
.poetic-upload-composer > i,
.poetic-feedback-card > b,
.poetic-approval-card > em,
.poetic-policy-card > em {
  background: #252825;
}

.poetic-investigation-result > i,
.poetic-sense-resolution > i,
.poetic-procedure-row > i,
.poetic-run-card li > i,
.poetic-trace-card li > i,
.poetic-answer-card header i,
.poetic-approval-card > i {
  background: var(--aos-enterprise-accent-soft);
  color: var(--aos-enterprise-accent);
}

.poetic-sense-evidence > span > i,
.poetic-run-card header i,
.poetic-run-progress i,
.poetic-trace-card header i,
.poetic-policy-lock {
  background: var(--aos-enterprise-accent);
}

.poetic-policy-lock::before {
  border-color: var(--aos-enterprise-accent);
}

.poetic-query-sources i {
  border-color: rgba(112, 139, 125, 0.18);
  background: rgba(112, 139, 125, 0.075);
  color: #5f776b;
}

.poetic-sense-resolution {
  border-color: rgba(112, 139, 125, 0.18);
  background: rgba(112, 139, 125, 0.075);
}

/* One warmer state only where review or blocking is semantically meaningful. */
.poetic-sense-evidence .poetic-sense-challenge,
.poetic-procedure-active,
.poetic-run-card .poetic-run-gate,
.poetic-trace-card .poetic-trace-blocked {
  border-color: rgba(154, 124, 93, 0.2);
  background: var(--aos-enterprise-review-soft);
}

.poetic-sense-evidence .poetic-sense-challenge > i,
.poetic-run-card .poetic-run-gate > i {
  background: var(--aos-enterprise-review);
  color: #fff;
}

.poetic-run-card .poetic-run-gate > em,
.poetic-trace-card .poetic-trace-blocked > em,
.poetic-procedure-active > em {
  color: #80664d;
}

/* 6. Keep governance cards but lift them enough to expose the control dial. */
.poetic-governance-demo {
  top: 41%;
}

.poetic-trace-card,
.poetic-policy-card {
  border-color: rgba(112, 139, 125, 0.18);
  background: rgba(255, 255, 253, 0.97);
}

/* A small amount of the same sage accent in the ground model, never layer-by-layer color coding. */
.research-layer .aos-research-evidence-node,
.sense-layer .aos-c-dot:nth-child(7n + 1),
.procedural-layer .aos-c-dot:nth-child(8n + 2),
.harness-layer .aos-c-dot:nth-child(9n + 1),
.world-model-layer .aos-c-dot:nth-child(7n + 1) {
  border-color: rgba(112, 139, 125, 0.45) !important;
  background: radial-gradient(circle at 34% 24%, #fff 0 12%, #dce5df 31%, #708b7d 66%, #f0f5f2 100%) !important;
  box-shadow: inset -3px -4px 7px rgba(64, 82, 72, 0.22), inset 3px 3px 6px rgba(255, 255, 255, 0.88), 0 0 0 3px rgba(112, 139, 125, 0.06), 0 8px 13px rgba(50, 65, 57, 0.18) !important;
}

.aos-research-intake-line,
.aos-research-uplinks path {
  stroke: rgba(112, 139, 125, 0.5) !important;
}

.aos-research-junction,
.aos-research-packet {
  stroke: rgba(112, 139, 125, 0.58) !important;
}

/* Premium card pass: crisp geometry, readable type, and connectors that stop at content. */
:root {
  --aos-enterprise-card-line: rgba(27, 31, 28, 0.16);
  --aos-enterprise-card-shadow: 0 8px 22px rgba(23, 28, 25, 0.075);
}

@media (min-width: 761px) {
  .aos-sense-elevation,
  .aos-procedure-elevation,
  .aos-harness-elevation,
  .aos-world-elevation {
    width: min(31vw, 430px);
  }
}

:is(
  .poetic-file,
  .poetic-folder-drop,
  .poetic-upload-composer,
  .poetic-investigation-card,
  .poetic-feedback-card,
  .poetic-query-card,
  .poetic-answer-card,
  .poetic-run-card,
  .poetic-approval-card,
  .poetic-trace-card,
  .poetic-policy-card
) {
  border-color: var(--aos-enterprise-card-line);
  border-radius: 6px;
  background: rgba(255, 255, 253, 0.985);
  box-shadow: var(--aos-enterprise-card-shadow);
}

.poetic-investigation-card,
.poetic-run-card,
.poetic-query-card,
.poetic-trace-card {
  background: #fffffd;
}

.poetic-feedback-card,
.poetic-answer-card,
.poetic-approval-card,
.poetic-policy-card {
  box-shadow: 0 10px 24px rgba(23, 28, 25, 0.1);
}

.poetic-layer-card,
.poetic-governance-demo {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.012em;
}

.poetic-investigation-card h3,
.poetic-mini-header span {
  font-size: 10.2px;
  font-weight: 560;
  letter-spacing: -0.025em;
}

.poetic-investigation-result,
.poetic-typed-copy,
.poetic-answer-card p {
  color: rgba(27, 31, 28, 0.78);
  font-size: 7.25px;
  line-height: 1.48;
}

.poetic-procedure-row span b,
.poetic-run-card li span b,
.poetic-trace-card li span b,
.poetic-policy-card span b,
.poetic-approval-card span b {
  color: rgba(27, 31, 28, 0.82);
  font-size: 7.2px;
  font-weight: 540;
}

.poetic-procedure-row span small,
.poetic-run-card li span small,
.poetic-trace-card li span small,
.poetic-policy-card span small,
.poetic-approval-card span small,
.poetic-answer-card > small {
  color: rgba(27, 31, 28, 0.49);
  font-size: 5.7px;
  line-height: 1.42;
}

.poetic-procedure-row > em,
.poetic-run-card li > em,
.poetic-trace-card li > em,
.poetic-mini-header b,
.poetic-run-card header b,
.poetic-trace-card header b,
.poetic-answer-card header b {
  font-size: 5.15px;
  font-weight: 560;
}

.poetic-query-card > small {
  color: rgba(27, 31, 28, 0.48);
  font-size: 5.8px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.poetic-query-type {
  color: rgba(27, 31, 28, 0.9);
  font-size: 10px;
  font-weight: 540;
  letter-spacing: -0.025em;
}

.poetic-run-card header,
.poetic-trace-card header,
.poetic-answer-card header {
  color: rgba(27, 31, 28, 0.56);
  font-size: 5.8px;
}

.poetic-investigation-card {
  width: 94%;
  min-height: 218px;
  padding: 15px 15px 27px;
}

.poetic-feedback-card {
  width: 72%;
  min-height: 92px;
  margin-top: -34px;
  padding: 13px;
}

.poetic-run-card {
  min-height: 244px;
  padding: 14px;
}

.poetic-run-card li,
.poetic-trace-card li {
  border-radius: 5px;
  background: rgba(245, 246, 243, 0.72);
}

.poetic-approval-card {
  width: 76%;
  min-height: 88px;
  margin-top: -48px;
  padding: 12px 13px;
}

.poetic-query-card {
  min-height: 128px;
  padding: 15px;
}

.poetic-answer-card {
  width: 90%;
  min-height: 122px;
  margin-top: -4px;
  padding: 14px;
}

/* The connectors belong to the slab, not to the card surface. */
.aos-research-uplinks path,
.aos-sense-uplinks path {
  stroke: rgba(112, 139, 125, 0.48) !important;
  stroke-width: 0.45;
  stroke-dasharray: 3 3;
}

.aos-sense-uplinks {
  inset: 0 -10% -3%;
  width: 120%;
  height: 103%;
}

.aos-procedure-uplinks i,
.aos-harness-uplinks i,
.aos-world-uplinks i {
  top: 62%;
  bottom: 3%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(112, 139, 125, 0.43) 0 3px,
    transparent 3px 7px
  );
}

/* Governance: two separate cards above the dial, never an overlapping stack. */
.poetic-governance-demo {
  top: 31%;
  width: min(32vw, 430px);
}

.poetic-trace-card {
  min-height: 228px;
  padding: 15px;
}

.poetic-trace-card ol {
  margin-top: 12px;
}

.poetic-trace-card li {
  min-height: 48px;
  padding: 7px 8px;
}

.poetic-policy-card {
  width: 78%;
  min-height: 86px;
  margin: 10px 0 0 auto;
  padding: 12px 13px;
}

.poetic-policy-card > em,
.poetic-approval-card > em,
.poetic-feedback-card > b {
  font-size: 5.1px;
  font-weight: 560;
}

@media (max-width: 760px) {
  .poetic-governance-demo {
    top: 35%;
    width: min(82vw, 390px);
  }

  .poetic-investigation-card h3,
  .poetic-mini-header span,
  .poetic-query-type {
    font-size: 9px;
  }
}

/* Mobile reliability pass: contain wide animated scenes and make navigation touch-safe. */
@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .nav-shell {
    width: 100%;
    min-height: 48px;
    padding: 2px 4px;
  }

  .nav-shell .brand {
    min-height: 44px;
    padding: 0 10px;
  }

  .menu-button {
    width: 44px;
    height: 44px;
    padding: 0;
    touch-action: manipulation;
  }

  .nav-left,
  .nav-right {
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 15, 15, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .nav-left a,
  .nav-right a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 12px;
    touch-action: manipulation;
  }

  .button,
  .button.primary,
  .button.ghost,
  .button.dark,
  .button.light {
    min-height: 44px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  .site-footer a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 640px) {
  :root {
    --page-pad: 20px;
  }

  .hero,
  .hero-content {
    min-height: 100svh;
  }

  .hero-content {
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(32px, calc(24px + env(safe-area-inset-bottom)));
    padding-left: max(20px, env(safe-area-inset-left));
  }

  .hero h1 {
    max-width: 12ch;
    font-size: clamp(32px, 9.5vw, 40px);
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .hero .button,
  .cta .button,
  .closing-video .button {
    min-height: 44px;
  }

  .atlas a,
  section.highlights.highlights .feature .feature-copy a {
    min-height: 44px;
    align-items: center;
  }

  section.aos-system.aos-system,
  section.aos-system.aos-system .aos-layout {
    max-width: 100%;
    overflow-x: clip;
  }

  section.aos-system.aos-system .aos-layout,
  section.aos-system.aos-system .aos-tabs,
  section.aos-system.aos-system .aos-visual {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  section.aos-system.aos-system .aos-tab {
    max-width: 100%;
    min-height: 44px;
  }

  .industry-arrow,
  .industry-stage-close,
  .industry-stage-switch button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .industry-progress {
    gap: 0;
    padding: 0 4px;
  }

  .industry-controls {
    gap: 4px;
  }

  .industry-progress button {
    box-sizing: content-box;
    height: 6px;
    padding: 19px 7px;
    overflow: visible;
    background-clip: content-box;
    touch-action: manipulation;
  }

  .industry-progress button::after {
    inset: 19px 7px;
    border-radius: 999px;
  }

  section.cta.cta {
    padding: 56px 20px;
  }
}

/* Mobile visual corrections based on real-device review. */
@media (max-width: 640px) {
  /* Keep the original full-bleed landing treatment on phones. */
  .hero-media.video-ready .hero-fallback {
    opacity: 0;
    visibility: hidden;
  }

  .hero-fallback {
    filter: none;
    transform: none;
  }

  .hero-media video {
    z-index: auto;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    transform: none;
    box-shadow: none;
  }

  /* The company marks should read as a real row, not a single drifting logo. */
  section.logo-marquee.logo-marquee {
    min-height: 116px;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .logo-marquee p {
    font-size: 12px;
  }

  .marquee-track {
    width: 100%;
  }

  .marquee-row {
    gap: 28px;
    padding-right: 28px;
  }

  .logo-item {
    width: 94px;
    height: 38px;
  }

  .logo-item img {
    max-width: 84px;
    max-height: 30px;
  }

  .logo-meta img,
  .logo-google img {
    width: 78px;
  }

  .logo-stanford img,
  .logo-iit img {
    width: 38px;
  }

  /* Zoom the workflow field out so incoming tools and completed work stay visible. */
  .agent-workflow-flow .workflow-flow-stage {
    transform: scale(0.82);
    transform-origin: center center;
  }

  .agent-workflow-flow .flow-fade-left,
  .agent-workflow-flow .flow-fade-right {
    width: 15%;
  }

  /* Tabs-only AOS on phones: full accordion, no 3D cube. */
  section.aos-system.aos-system .aos-layout {
    display: block;
    min-height: 0 !important;
    padding: 36px 18px 52px;
  }

  section.aos-system.aos-system .aos-tabs {
    position: static;
    top: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    gap: 6px;
  }

  section.aos-system.aos-system .aos-tab {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(29, 31, 30, 0.88);
    box-shadow: 0 8px 20px rgba(20, 22, 21, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  section.aos-system.aos-system .aos-tab.active {
    display: grid;
    width: 100%;
    min-height: 0 !important;
    max-height: none;
    padding: 14px 16px 16px;
    overflow: visible;
    border-color: rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: rgba(29, 31, 30, 0.94);
    box-shadow: 0 10px 26px rgba(20, 22, 21, 0.12);
  }

  section.aos-system.aos-system .aos-tab-label {
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
  }

  section.aos-system.aos-system .aos-tab.active .aos-tab-description {
    max-height: 240px !important;
    margin-top: 8px;
    overflow: visible;
    font-size: 12.5px;
    line-height: 1.42;
    opacity: 1;
  }

  section.aos-system.aos-system .aos-tab-description strong,
  section.aos-system.aos-system .aos-tab[data-title] .aos-tab-description strong {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.3;
  }

  section.aos-system.aos-system .aos-tab-description > span {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  section.aos-system.aos-system .aos-controls,
  section.aos-system.aos-system .aos-visual {
    display: none !important;
  }

  /* Keep vertical page scrolling available while swiping the horizontal carousel. */
  .industry-track {
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
  }

  .industry-controls {
    gap: 4px;
    margin-top: 34px;
  }

  .industry-progress {
    gap: 0;
    padding: 0 4px;
    background: #eeeeea;
  }

  .industry-progress button,
  .industry-progress button[aria-selected="true"] {
    position: relative;
    box-sizing: border-box;
    width: 20px;
    height: 44px;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .industry-progress button[aria-selected="true"] {
    width: 32px;
  }

  .industry-progress button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.26);
    transform: translate(-50%, -50%);
  }

  .industry-progress button[aria-selected="true"]::before {
    width: 22px;
    background: #111;
  }

  .industry-progress button::after {
    display: none;
  }

  /* A compact bottom-sheet style workflow view with one reliable scroll surface. */
  .industry-stage {
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    height: min(90dvh, 760px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    margin: auto auto 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    transform: translateY(28px);
  }

  .industry-stage[open] {
    transform: translateY(0);
  }

  .industry-stage-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(210px, 34%) minmax(0, 1fr);
  }

  .industry-stage-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
  }

  .industry-stage-header {
    gap: 6px;
    padding: 22px 68px 18px 18px;
  }

  .industry-stage-name {
    font-size: 20px;
    line-height: 1.18;
  }

  .industry-stage-desc {
    max-width: 38ch;
    font-size: 12px;
    line-height: 1.42;
  }

  .industry-stage-index,
  .industry-stage-name,
  .industry-stage-desc {
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.54);
  }

  .industry-stage-link {
    align-self: flex-end;
    margin: 12px 0 0 auto;
    color: rgba(17, 17, 17, 0.78);
    text-shadow: none;
  }

  .industry-stage-switch {
    position: absolute;
    right: 14px;
    bottom: 14px;
    margin: 0;
  }

  .industry-stage-switch button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .industry-stage-body {
    min-height: 0;
    padding: 14px 18px max(20px, calc(12px + env(safe-area-inset-bottom)));
    overflow: hidden;
    background: rgba(251, 251, 250, 0.96);
  }

  .industry-detail {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .industry-use-cases {
    gap: 0;
  }

  .industry-use-case {
    padding: 14px 4px;
  }
}

/* Keep the complete glass navbar available on tablet-width desktop windows. */
@media (min-width: 761px) and (max-width: 980px) {
  .nav-shell {
    grid-template-columns: 1fr auto 1fr;
    width: min(100%, 860px);
    min-height: 38px;
    padding: 4px 6px;
  }

  .nav-shell .brand {
    min-height: 0;
    justify-self: center;
    padding: 7px 10px;
  }

  .nav-left,
  .nav-right {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-left { justify-content: flex-start; }
  .nav-right { justify-content: flex-end; }

  .nav-left a,
  .nav-right a {
    min-height: 0;
    padding: 7px 10px;
  }

  .menu-button {
    display: none !important;
  }

  .nav-industries {
    width: auto;
    position: relative;
  }

  .nav-industries-trigger {
    min-height: 0;
    padding: 7px 10px;
  }

  .nav-industries-panel,
  .nav-industries:hover .nav-industries-panel,
  .nav-industries:focus-within .nav-industries-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    width: min(520px, calc(100vw - 48px));
    max-height: none;
    margin-top: 0;
    padding: 6px;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -5px);
    box-shadow: var(--nav-glass-shadow);
  }

  .nav-industries:hover .nav-industries-panel,
  .nav-industries:focus-within .nav-industries-panel,
  .nav-industries.is-open .nav-industries-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}