/* Site typography contract. Keep display and reading faces consistent across routes.
   An important layer wins over older unlayered page overrides without selector escalation. */
@layer brand-typography {
 :root {--font-display:"Progress Favorit",Arial,sans-serif;--font-body:"Inter",Arial,sans-serif;}
 body:not([data-banking-demo]) {font-family:var(--font-body) !important;}
 body:not([data-banking-demo]) :is(p,a,button,input,textarea,select,label,li,summary):not(:where([data-story-phase] *)) {font-family:var(--font-body) !important;}
 body:not([data-banking-demo]) :is(h1,h2,h3,h4,h5,h6):not(:where([data-story-phase] *)),
 body:not([data-banking-demo]) :is(h1,h2,h3,h4,h5,h6):not(:where([data-story-phase] *)) :is(span,a,em,strong) {
  font-family:var(--font-display) !important;font-weight:300 !important;font-synthesis:none !important;
 }
 body:not([data-banking-demo]) :is(code,pre,kbd,samp) {font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;}
}

/* Monaco's mobile type pairing; desktop retains the existing brand faces. */
@font-face {
 font-family:"Season Serif";
 src:url("/assets/fonts/SeasonSerif-Regular.woff2") format("woff2");
 font-weight:400;
 font-style:normal;
 font-display:swap;
}
@layer brand-typography {
 @media (max-width:767.98px) {
  :root { --font-display:"Season Serif",Georgia,serif; --font-body:"Inter",Arial,sans-serif; }
  body:not([data-banking-demo]) :is(h1,h2,h3,h4,h5,h6):not(:where([data-story-phase] *)),
  body:not([data-banking-demo]) :is(h1,h2,h3,h4,h5,h6):not(:where([data-story-phase] *)) :is(span,a,em,strong) {
   font-family:var(--font-display) !important;
   font-weight:400 !important;
   letter-spacing:-.01em !important;
  }
  body:not([data-banking-demo]) h1:not(:where([data-story-phase] *)) {
   font-size:32px !important;
   line-height:36px !important;
  }
  body:not([data-banking-demo]) :is(p,a,button,input,textarea,select,label,li,summary):not(:where([data-story-phase] *,.banking-preview-app *)) {
   letter-spacing:-.02em;
  }
 }
}

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

body:not([data-banking-demo]) section.home-banking-statement {
  max-width: none;
  margin: 0;
  padding: clamp(64px, 6.5vw, 128px) max(24px, 7.9vw) clamp(64px, 4.4vw, 88px);
  background: #fff;
}

section.home-banking-statement .home-banking-statement-copy {
  max-width: 740px;
  margin: 0;
  color: #111;
  font-family: "Progress Favorit", Arial, sans-serif;
  font-size: clamp(28px, 2.15vw, 42px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-align: left;
  text-wrap: initial;
}

.home-banking-statement-copy span {
  color: #969696;
}

/* 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;
  justify-content: space-between;
  gap: 12px;
  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-status {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.44);
  font-size: 8px;
  font-weight: 560;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.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: 1fr;
    gap: 0;
    width: min(320px, calc(100vw - 48px));
    padding: 0;
    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;
}

body:not([data-banking-demo]) .privacy-content section:not(.hero) {
  max-width: none;
  margin: 0;
  padding: 34px 0;
}

.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;
  }

  /* Phone: each cookie becomes a small labelled card instead of a wide table. */
  .privacy-content thead {
    display: none;
  }

  .privacy-content tr {
    display: grid;
    gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.1);
  }

  .privacy-content td {
    position: relative;
    display: block;
    padding: 0 0 0 88px;
    border: 0;
  }

  .privacy-content td::before {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-label);
    color: #8a8a84;
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.9;
    text-transform: uppercase;
  }

  .privacy-content code {
    overflow-wrap: anywhere;
  }
}

: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 > #hero-video,
.hero-fallback,
.hero-still,
.hero-still-grade,
.hero-shade {
  position: absolute;
  inset: 0;
}

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

.hero-media > #hero-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 > #hero-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: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translate(-50%, -50%);
}

.hero-boot-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(50.4vw, 504px);
  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;
  display: block;
  width: min(40.6vw, 392px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  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: 14px;
  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 heroBootProgress {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 640px) {
  .hero-boot {
    top: 48%;
    gap: 12px;
  }

  .hero-boot-mark {
    width: min(61.6vw, 252px);
  }

  .hero-boot-wordmark {
    font-size: 11px;
  }
}

.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;
}

body:not([data-banking-demo]) 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[data-industry-index="1"] {
  --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[data-industry-index="2"] {
  --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[data-industry-index="3"] {
  --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[data-industry-index="4"] {
  --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[data-industry-index="5"] {
  --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[data-industry-index="6"] {
  --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 stable when industry cards are temporarily commented out. */
.industry-slide[data-industry-index="0"] .industry-card img { object-position: 40% 55%; } /* Banking */
.industry-slide[data-industry-index="1"] .industry-card img { object-position: 18% 48%; } /* IT services */
.industry-slide[data-industry-index="2"] .industry-card img { object-position: 32% 42%; } /* Freight */
.industry-slide[data-industry-index="3"] .industry-card img { object-position: 58% 62%; } /* Management consulting */
.industry-slide[data-industry-index="4"] .industry-card img { object-position: 50% 46%; } /* Risk and compliance */
.industry-slide[data-industry-index="5"] .industry-card img { object-position: 50% 48%; } /* Human capital */
.industry-slide[data-industry-index="6"] .industry-card img { object-position: 50% 50%; } /* Engineering */

.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 > #hero-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,
  .accepted-program-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);
}

body:not([data-banking-demo]) section.accepted-programs.accepted-programs {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  width: min(100%, var(--content-max, 1504px));
  margin: 0 auto;
  padding: 28px var(--page-pad);
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.accepted-programs > p {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}

.accepted-program-list {
  min-width: 0;
}

.accepted-program-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 180px));
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(28px, 4vw, 72px);
  width: 100%;
}

.accepted-program {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  height: 38px;
}

.accepted-program img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.accepted-openai {
  gap: 10px;
}

.accepted-openai img {
  width: 24px;
}

.accepted-openai span {
  color: #111;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.accepted-microsoft {
  gap: 13px;
}

.accepted-microsoft img {
  width: 78px;
}

.accepted-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 auto;
  background: rgba(15, 15, 15, 0.2);
}

.accepted-microsoft-name {
  color: #111;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.accepted-aws img {
  width: 106px;
}

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; }
}

/* Three published industries use a static grid; carousel code remains available for future cards. */
section.industries .industry-carousel-static .industry-controls {
  display: none !important;
}

section.industries .industry-carousel-static .industry-viewport {
  margin-top: clamp(48px, 5vw, 72px);
}

section.industries .industry-carousel-static .industry-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 42px);
  padding-bottom: 0;
  overflow: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
  touch-action: auto;
  cursor: default;
}

section.industries .industry-carousel-static .industry-slide {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
  scroll-snap-align: none;
}

@media (max-width: 760px) {
  section.industries .industry-carousel-static .industry-track {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* 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;
  }
}

@media (max-width: 900px) {
  body:not([data-banking-demo]) section.accepted-programs.accepted-programs {
    grid-template-columns: 1fr;
  }

  .accepted-programs > p {
    text-align: left;
  }

  .accepted-program-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 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 > #hero-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;
  }

  body:not([data-banking-demo]) section.accepted-programs.accepted-programs {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 24px 30px;
  }

  .accepted-programs > p {
    font-size: 12px;
    text-align: left;
  }

  .accepted-program-list {
    width: 100%;
  }

  .accepted-program-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .accepted-program {
    width: 100%;
    height: 36px;
  }

  .accepted-program img {
    max-height: 30px;
  }

  .accepted-openai img {
    width: 30px;
  }

  .accepted-openai span {
    font-size: 13px;
  }

  .accepted-microsoft img {
    width: 72px;
  }

  .accepted-aws img {
    width: 100px;
  }

  @media (max-width: 560px) {
    .accepted-program-row {
      grid-template-columns: 1fr;
      justify-items: start;
      gap: 20px;
    }

    .accepted-program {
      justify-content: flex-start;
      width: auto;
    }
  }

  /* 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: 1fr;
    gap: 0;
    width: min(320px, calc(100vw - 48px));
    max-height: none;
    margin-top: 0;
    padding: 0;
    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);
  }
}

/* Mobile media fallbacks and full-bleed home spacing. */
.hero-boot-mark-fallback {
  position: relative;
  z-index: 1;
  display: none;
  width: min(40.6vw, 392px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, .45))
    drop-shadow(0 28px 56px rgba(0, 0, 0, .28));
}

@media (max-width: 640px) {
  :root { --page-pad: 14px; }

  .hero-content {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .hero h1 {
    max-width: 13ch;
    font-size: clamp(30px, 9vw, 37px);
  }

  .hero-boot-mark { display: none; }
  .hero-boot-mark-fallback {
    display: block;
    width: min(61.6vw, 252px);
  }
}

/* Wonderful-inspired landing typography and primary actions. */
.hero h1 {
  max-width: 800px;
  font-size: clamp(54px, 4.8vw, 82px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.hero .hero-content {
  display: flex;
  width: 100%;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 150px 75px 80px;
}

.hero .hero-actions {
  gap: 10px;
  margin-top: 24px;
}

.hero .hero-actions .button {
  min-height: 50px;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.03125em;
  transition:
    transform 450ms cubic-bezier(0.6, 0, 0.2, 1),
    background-color 450ms cubic-bezier(0.6, 0, 0.2, 1),
    border-color 450ms cubic-bezier(0.6, 0, 0.2, 1);
}

.hero .hero-actions .button.primary {
  min-width: 140px;
}

.hero .hero-actions .button.ghost {
  min-width: 178px;
}

.hero .hero-actions .button:hover {
  transform: translateY(-2px);
}

.hero .hero-actions .button.ghost {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-label-mask {
  position: relative;
  display: inline-block;
  overflow: clip;
  line-height: 1;
}

.nav-label-sizer {
  visibility: hidden;
}

.nav-label-face {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

.nav-label-letter {
  display: inline-block;
  transition: transform 450ms cubic-bezier(0.6, 0, 0.2, 1);
  transition-delay: calc(var(--i) * 20ms);
}

.nav-label-face--next .nav-label-letter {
  transform: translateY(calc(100% + 2px));
}

.nav-login:hover .nav-label-face--current .nav-label-letter,
.nav-login:focus-visible .nav-label-face--current .nav-label-letter {
  transform: translateY(calc(-100% - 2px));
}

.nav-login:hover .nav-label-face--next .nav-label-letter,
.nav-login:focus-visible .nav-label-face--next .nav-label-letter {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .hero .hero-content {
    padding: 132px 20px max(32px, calc(24px + env(safe-area-inset-bottom)));
  }

  .hero h1 {
    max-width: 13ch;
    font-size: clamp(38px, 11vw, 54px);
    line-height: 1.02;
  }

  .hero .hero-actions .button {
    min-height: 46px;
    font-size: 15px;
  }
}

@media (min-width: 641px) and (max-width: 1120px) {
  .hero .hero-content {
    padding-right: 48px;
    padding-left: 48px;
  }

  .hero h1 {
    font-size: clamp(54px, 6.5vw, 72px);
  }
}


/* Four logo tiles. Motion: wonderful.ai, 3500ms cadence, 150ms stagger,
   sequential 400ms ease-in exit / 800ms ease-out entry, +/-5% travel. */
section.credibility {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 12px;
  width: min(100%, 1240px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 40px 36px;
}
.credibility h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: #72736e;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
.credibility h2::before, .credibility h2::after {
  content: "";
  flex: 1;
  min-width: 12px;
  height: 9px;
  margin-top: 9px;
  border-top: 1px solid #d8d8d4;
}
.credibility h2::before { border-left: 1px solid #d8d8d4; }
.credibility h2::after { border-right: 1px solid #d8d8d4; }
.credibility-team, .credibility-programs { min-width: 0; }
.credibility-team-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.credibility-tile { min-width: 0; height: 136px; border-radius: 4px; background: #fafafa; overflow: hidden; }
.credibility-stack { position: relative; width: 100%; height: 100%; }
.credibility-mark {
  position: absolute;
  inset: 17.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0;
  opacity: 0;
  mix-blend-mode: darken;
}
.credibility-mark:first-child { opacity: 1; }
.credibility-mark img { display: block; width: auto; height: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
.credibility-team img { filter: brightness(0); opacity: .65; }
.credibility-meta img { width: 42px; }
.credibility-meta span { color: #595a56; font-size: 32px; font-weight: 550; line-height: 1; letter-spacing: -1.6px; }
.credibility-google img { width: 116px; }
.credibility-stanford img { width: 104px; max-height: 104px; filter: grayscale(1); }
.credibility-iit img { width: 70px; height: 70px; max-width: none; max-height: none; object-fit: none; object-position: left center; filter: grayscale(1); }
.credibility-usc img { width: 150px; }
.credibility-berkeley img { width: 220px; max-width: none; max-height: none; filter: none; }
.credibility-mckinsey img { width: 126px; }
.credibility-pwc img { width: 80px; }
.credibility-programs img { filter: grayscale(1); mix-blend-mode: darken; }
.credibility-openai img { width: 25px; flex-shrink: 0; }
.credibility-openai span { color: #555650; font-size: 14px; line-height: 1.35; }
.credibility-microsoft { gap: 10px; }
.credibility-microsoft img { width: 82px; }
.credibility-microsoft span { border-left: 1px solid #d6d6d2; padding-left: 10px; color: #555650; font-size: 12px; line-height: 1.25; }
.credibility-aws img { width: 132px; }
@media (prefers-reduced-motion: no-preference) {
  .credibility-mark {
    animation: credibility-cycle calc(var(--mark-count) * 3.5s) linear infinite both;
    animation-delay: calc(var(--mark-index) * 3.5s - (var(--mark-count) - 1) * 3.5s + .4s + var(--tile-offset));
  }
  .credibility-tile[style*="--mark-count: 2"] .credibility-mark { animation-name: credibility-cycle-two; }
}
/* Entry begins only after the previous logo has completely exited. */
@keyframes credibility-cycle {
  0% { opacity: 0; transform: translateY(5%); animation-timing-function: ease-out; }
  7.619048% { opacity: 1; transform: translateY(0); }
  29.52381% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
  33.333333%, 100% { opacity: 0; transform: translateY(-5%); }
}
@keyframes credibility-cycle-two {
  0% { opacity: 0; transform: translateY(5%); animation-timing-function: ease-out; }
  11.428571% { opacity: 1; transform: translateY(0); }
  44.285714% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
  50%, 100% { opacity: 0; transform: translateY(-5%); }
}
@media (max-width: 900px) {
  section.credibility { padding-inline: 24px; }
  .credibility-mark { inset: 12%; }
  .credibility-openai { flex-direction: column; gap: 8px; text-align: center; }
  .credibility-microsoft { flex-direction: column; gap: 8px; }
  .credibility-microsoft span { border: 0; padding: 0; text-align: center; }
}
@media (max-width: 600px) {
  section.credibility { grid-template-columns: 1fr; gap: 22px; padding: 32px 20px 24px; }
  .credibility h2 { margin-bottom: 12px; }
  .credibility-team-tiles { gap: 8px; }
  .credibility-tile { height: 108px; }
  .credibility-mark { inset: 10%; gap: 4px; }
  .credibility-stanford img { width: 90px; max-height: 90px; }
  .credibility-berkeley img { width: 140%; }
  .credibility-meta img { width: 28px; }
  .credibility-meta span { font-size: 23px; letter-spacing: -1px; }
  .credibility-programs .credibility-tile { height: 88px; }
  .credibility-openai, .credibility-microsoft { flex-direction: row; gap: 10px; }
  .credibility-microsoft span { border-left: 1px solid #d6d6d2; padding-left: 10px; text-align: left; }
}
@font-face {
  font-family: "Progress Favorit";
  src: url("/assets/fonts/ABC-Favorit-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/* Compact artwork and fixed narrow rails, centered with equal outside margins. */
section.business-progress {
  --progress-inset: max(48px, calc((100vw - 1600px) / 2));
  --progress-ease: cubic-bezier(.22, 1, .36, 1);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 88px var(--progress-inset) 80px;
  overflow: hidden;
  background: #111;
}
.business-progress-heading { margin: 0 0 64px; }
section.business-progress .business-progress-heading h2 {
  margin: 0;
  max-width: none;
  color: #f1f1f1;
  font-family: "Progress Favorit", Arial, sans-serif;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 300;
  font-feature-settings: "ss04" on, "ss05" on;
  line-height: 1.15;
  letter-spacing: -.04em;
}
.progress-viewport { width: 100%; container-type: inline-size; }
.progress-track {
  --progress-count: 3;
  --progress-rail: 64px;
  --progress-artwork: min(560px, calc(100cqi - var(--progress-count) * var(--progress-rail) - 20px));
  --progress-expanded: calc(var(--progress-artwork) + var(--progress-rail) + 20px);
  --progress-height: max(560px, calc(var(--progress-artwork) + 36px));
  display: flex;
  width: calc(var(--progress-expanded) + (var(--progress-count) - 1) * var(--progress-rail));
  max-width: 100%;
  height: var(--progress-height);
  gap: 0;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.progress-slide {
  position: relative;
  flex: 0 0 var(--progress-rail);
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgb(255 255 255 / 24%);
  transition: flex-basis 650ms var(--progress-ease);
}
.progress-slide.is-active { flex-basis: var(--progress-expanded); }
.progress-slide:last-child { border-right: 0; }
.progress-rail {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: var(--progress-rail);
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(241 241 241 / 30%);
  cursor: pointer;
  text-align: left;
  transition: color 300ms ease;
}
.progress-slide.is-active .progress-rail,
.progress-rail:hover { color: #f1f1f1; }
.progress-rail-title {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: calc(var(--progress-height) - 48px);
  margin: 0;
  font-family: "Progress Favorit", Arial, sans-serif;
  font-size: clamp(22px, 1.6vw, 24px);
  font-weight: 300;
  line-height: 32px;
  letter-spacing: -.03em;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: 0 50%;
}
.progress-card {
  position: absolute;
  inset: 18px auto 18px var(--progress-rail);
  display: block;
  width: calc(var(--progress-expanded) - var(--progress-rail) - 20px);
  overflow: hidden;
  border-radius: 12px;
  color: #f1f1f1;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s 650ms;
  -webkit-user-drag: none;
}
.progress-slide.is-active .progress-card {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms 100ms ease, visibility 0s;
}
.progress-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.progress-slide:first-child .progress-card-image,
.progress-slide:nth-child(2) .progress-card-image { object-position: center; object-fit: contain; }
.progress-slide-blog .progress-card-image { object-fit: cover; object-position: center; background: #f5f5f3; }
.progress-slide-private-equity .progress-card { background: #080808; }
.progress-slide.progress-slide-private-equity .progress-card-image { object-fit: cover; object-position: center; filter: grayscale(1) brightness(.55); }
.progress-slide-private-equity .progress-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.9)); }
.progress-pe-brand { position: absolute; z-index: 1; right: 28px; bottom: 28px; display: flex; align-items: center; gap: 12px; }
.progress-pe-brand img { width: 86px; height: 86px; object-fit: contain; mix-blend-mode: screen; }
.progress-pe-brand span { color: #fff; font-family: "Progress Favorit", Arial, sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 300; letter-spacing: -.035em; }
.progress-slide-private-equity .progress-card-heading,
.progress-slide-private-equity .progress-card-metric { z-index: 1; }
.progress-blog-label { position: absolute; top: 50%; left: 50%; width: max-content; max-width: 78%; transform: translate(-50%, -50%); color: #151716; text-align: center; font-family: "Progress Favorit", Arial, sans-serif; font-size: 34px; font-weight: 300; letter-spacing: -.04em; }
.progress-live-art { position: absolute; inset: 0; overflow: hidden; background: #fbfbfa; pointer-events: none; }
.progress-live-art .blog-article-art { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; }
.progress-live-art .if-stage { --if-stage-scale: calc(100cqw / 1400px); width: 1400px; height: 1400px; left: 0; top: 0; }
.progress-live-art .if-product { flex: 1 1 auto; min-height: 0; height: auto; }
.progress-slide-blog .progress-card-heading { color: #111; }
.progress-slide-blog .progress-rail-title { white-space: normal; font-size: 21px; line-height: 24px; }
.progress-card-heading { position: absolute; inset: 24px 24px auto auto; }
.progress-card-metric { position: absolute; top: 28px; left: 28px; right: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.45); pointer-events: none; }
.progress-card-metric-value { font-family: "Progress Favorit", Arial, sans-serif; font-size: clamp(44px, 5vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -.055em; }
.progress-card-metric-label { max-width: 260px; font-family: "Inter", Arial, sans-serif; font-size: clamp(14px, 1.35vw, 20px); font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
@media (max-width: 640px) {
  .progress-card-metric { top: 22px; left: 20px; right: 58px; gap: 7px; }
}
/* The full title lives on the rail; avoid repeating it over the artwork. */
section.business-progress .progress-card-heading h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.progress-card-heading svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 1px 5px rgb(0 0 0 / 35%)); }
.progress-card-logo { position: absolute; right: 24px; bottom: 24px; width: auto; max-width: 60%; height: 38px; object-fit: contain; }
.progress-card-logo-0 { height: 56px; }
.progress-card-logo-3 { height: 29px; }
.progress-card-logo-6 { height: 34px; }
.progress-card:focus-visible,
.progress-rail:focus-visible { outline: 2px solid #f1f1f1; outline-offset: -3px; }
@media (max-width: 959.98px) {
  section.business-progress { --progress-inset: 24px; }
  .progress-track { --progress-rail: 56px; }
  .progress-rail-title { font-size: 23px; }
}
@media (max-width: 959.98px) {
  section.business-progress { padding: 56px 24px; }
  .business-progress-heading { margin-bottom: 32px; }
  .progress-track { --progress-rail: 68px; --progress-expanded: 448px; flex-direction: column; width: 100%; height: auto; }
  .progress-slide { width: 100%; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 24%); }
  .progress-slide:last-child { border-bottom: 0; }
  .progress-rail { inset: 0 0 auto; width: 100%; height: var(--progress-rail); }
  .progress-rail-title {
    position: static;
    display: block;
    width: auto;
    padding: 12px 8px;
    font-size: 19px;
    line-height: 1.2;
    white-space: normal;
    transform: none;
  }
  .progress-slide-blog .progress-rail-title { font-size: 19px; line-height: 1.2; }
  .progress-card { inset: var(--progress-rail) 8px auto; width: calc(100% - 16px); height: calc(var(--progress-expanded) - var(--progress-rail) - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .progress-slide, .progress-rail, .progress-card, .progress-slide.is-active .progress-card { transition: none; }
}


/* Favorit metrics match the reference; words gain ink as each line settles. */
body:not([data-banking-demo]) section.expert-statement {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #080808;
}
.expert-statement-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 120px 32px;
}
section.expert-statement .expert-statement-copy {
  width: 100%;
  max-width: 1120px;
  margin: 0;
  font-family: "Progress Favorit", Arial, sans-serif;
  font-size: 62px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.05em;
  text-align: center;
}
.expert-statement-line { display: block; padding-bottom: .1em; }
.expert-statement-word { display: inline-block; }
.expert-statement.is-scroll-ready { min-height: 165svh; }
.expert-statement.is-scroll-ready .expert-statement-stage {
  position: sticky;
  top: 0;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  section.expert-statement .expert-statement-copy { font-size: 52px; }
}
@media (max-width: 767.98px) {
  .expert-statement-stage { padding: 80px 24px; }
  section.expert-statement .expert-statement-copy { max-width: 540px; font-size: 28px; text-wrap: pretty; }
  .expert-statement-line { display: inline; padding: 0; }
  .expert-statement-word { margin-bottom: .1em; transform: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .expert-statement.is-scroll-ready { min-height: 0; }
  .expert-statement.is-scroll-ready .expert-statement-stage { position: static; }
  .expert-statement-line { transform: none !important; }
  .expert-statement-word { opacity: 1 !important; }
}

/* Film hero: our typography, with builder and startup-program credentials. */
.hero.home-film-hero {
  display: flex;
  flex-direction: column;
  min-height: max(760px, 100svh);
  --film-inset: clamp(24px, calc(7.8vw - 16px), 144px);
}
.home-film-hero .hero-shade {
  background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.12) 80%), linear-gradient(180deg, rgba(0,0,0,.22), transparent 28%, rgba(0,0,0,.15) 65%, rgba(0,0,0,.65));
}
.hero.home-film-hero .hero-content {
  flex: 1;
  min-height: 0;
  justify-content: center;
  padding: 170px var(--film-inset) 100px;
}
.hero.home-film-hero h1 {
  max-width: 1050px;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 350;
  font-size: clamp(52px, 5.5vw, 94px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home-film-subheading {
  margin: 28px 0 0;
  color: #fff;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.home-film-subheading + .home-film-description { margin-top: 12px; }
.home-film-description {
  max-width: 530px;
  margin-top: 28px;
  color: rgba(255,255,255,.85);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.02em;
}
.hero.home-film-hero .hero-actions { margin-top: 36px; gap: 20px; }
.hero.home-film-hero .hero-actions .button {
  border-radius: 4px;
  min-height: 54px;
  padding: 10px 24px;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 500;
}
.hero.home-film-hero .hero-actions .button.ghost { min-width: 0; border-color: transparent; padding-inline: 0; }
.home-film-credentials {
  --program-slot: 160px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: calc(var(--program-slot) * 2 + 41px) minmax(0, 1fr);
  gap: 26px;
  padding: 28px var(--film-inset) 24px;
  border-top: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.2);
  font-family: "Inter", Arial, sans-serif;
}
.home-film-credentials h2 {
  margin: 0 0 22px;
  color: rgba(255,255,255,.7);
  font-family: "Inter", Arial, sans-serif;
  font-size: 11px;
  font-weight: 450;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-film-builders, .home-film-backers { min-width: 0; }
.home-film-backers { border-right: 1px solid rgba(255,255,255,.16); padding-right: 24px; }
.home-film-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.home-film-marquee:focus-visible { outline: 1px solid #aaa; outline-offset: 5px; }
.home-film-marquee-track { display: flex; width: max-content; animation: home-film-marquee 36s linear infinite; }
.home-film-builders .home-film-marquee { container-type: inline-size; }
.home-film-builders .home-film-marquee-track { animation-delay: 2s; }
.home-film-builders .home-film-logos { grid-template-columns: repeat(8, 25cqw); }
.home-film-builders .home-film-logos li { padding-inline: 10px; }
.home-film-backers .home-film-marquee-track { animation-duration: 24s; }
.home-film-marquee:hover .home-film-marquee-track,
.home-film-marquee:focus-within .home-film-marquee-track { animation-play-state: paused; }
@keyframes home-film-marquee { to { transform: translateX(-50%); } }
.home-film-logos, .home-film-programs { display: grid; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.home-film-logos { grid-template-columns: repeat(8, 180px); gap: 0; flex-shrink: 0; }
.home-film-programs { width: auto; max-width: none; grid-template-columns: repeat(4, var(--program-slot)); gap: 0; flex-shrink: 0; }
.home-film-credentials li { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; height: 42px; }
.home-film-credentials img { display: block; max-width: 100%; width: auto; height: auto; max-height: 35px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.home-film-credentials .home-film-raster { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.home-film-logos img { max-width: min(130px, 100%); width: 100%; max-height: 38px; }
.home-film-logos img[src$="brandfetch-google.svg"] { width: 112px; }
.home-film-logos img[src$="official-stanford-university.png"] { width: 106px; }
.home-film-logos img[src$="brandfetch-pwc.svg"] { width: 72px; }
.home-film-logos img[src$="meta.svg"] { width: 30px; }
.home-film-meta { font-size: 21px; letter-spacing: -.06em; }
.home-film-iit { gap: 9px !important; }
.home-film-iit span { font-size: 13px; line-height: 1.3; }
.home-film-iit-crest { display: block; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; }
.home-film-credentials .home-film-iit-crest img { width: 271.43px; height: 38px; max-width: none; max-height: none; }
.home-film-credentials .home-film-iit-crest img,
.home-film-programs .home-film-raster { filter: grayscale(1) invert(1) brightness(2); opacity: 1; }
.home-film-programs span { font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.85); }
.home-film-programs img { max-width: 120px; max-height: 24px; }
.home-film-programs li:nth-child(3) img { max-height: 34px; }
.home-film-programs li:first-child img { width: 23px; flex-shrink: 0; }
.home-film-programs li:nth-child(2) { flex-direction: column; gap: 4px; }
.home-film-programs .home-film-nvidia { display: block; width: 120px; height: 42px; overflow: hidden; mix-blend-mode: screen; }
.home-film-programs .home-film-nvidia img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 41%; transform: scale(1.65); }
@media (max-width: 900px) {
  .hero.home-film-hero .home-film-credentials { grid-template-columns: minmax(0, 1fr); }
  .home-film-backers { border-right: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  .hero.home-film-hero { min-height: 100svh; --film-inset: 16px; }
  .hero.home-film-hero .hero-content { padding: 148px var(--film-inset) 68px; }
  .hero.home-film-hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .home-film-description { margin-top: 24px; font-size: 16px; }
  .hero.home-film-hero .hero-actions { margin-top: 28px; }
  .home-film-credentials { --program-slot: 100px; padding: 24px 16px; gap: 16px; grid-template-columns: calc(var(--program-slot) * 2 + 13px) minmax(0, 1fr); }
  .home-film-credentials h2 { margin-bottom: 16px; }
  .home-film-logos { grid-template-columns: repeat(8, 150px); }
  .home-film-backers { padding-right: 12px; }
  .home-film-credentials img { max-height: 30px; }
  .home-film-programs img { max-width: 85px; }
  .home-film-programs span { font-size: 10px; }
  .home-film-programs .home-film-nvidia { width: 85px; height: 30px; }
  .home-film-logos img[src$="usc.svg"] { max-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-film-marquee { overflow-x: auto; }
  .home-film-marquee-track { animation: none; }
  .home-film-marquee-track > [aria-hidden="true"] { display: none; }
}

/* Inset product showcase beneath the banking statement. */
body:has(.home-banking-statement),
main:has(> .home-banking-statement) {
  background: #fff;
}

.hero.home-banking-hero {
  isolation: isolate;
  width: calc(100% - clamp(24px, 5.6vw, 112px));
  min-height: 0;
  margin: 0 auto clamp(40px, 4vw, 72px);
  padding: clamp(24px, 3.4vw, 64px);
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

.hero.home-banking-hero::before,
.hero.home-banking-hero::after {
  content: none;
}

body:not([data-banking-demo]) .home-banking-hero + section.business-progress,
body:not([data-banking-demo]) .home-hero-transition + section.business-progress,
body:not([data-banking-demo]) .home-carousel-surface > section.business-progress {
  --progress-inset: clamp(24px, 3vw, 56px);
  width: calc(100% - clamp(24px, 6vw, 96px));
  max-width: none;
  margin: 0 auto;
  background: #fff;
  border: 0;
  border-radius: 0 0 6px 6px;
}

.home-banking-hero-heading {
  margin: 0 0 26px;
  text-align: center;
}

.home-banking-hero-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: #171717;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.home-banking-hero-lock {
  position: relative;
  display: inline-block;
  flex: 0 0 2.2em;
  width: 2.2em;
  height: 2.2em;
  overflow: visible;
  line-height: 1;
  opacity: .9;
}

.home-banking-hero-lock img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 3.5em;
  max-width: none;
  height: 3.5em;
  object-fit: contain;
  filter: brightness(0);
  transform: translate(-50%, -50%);
}

.home-banking-demo {
  width: min(87.7%, 1500px);
  height: 760px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 13px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.home-banking-demo iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

@media (max-width: 900px) {

  .home-banking-demo { width: calc(100% - 40px); height: 690px; border-radius: 12px; }
}

@media (max-width: 640px) {
  .hero.home-banking-hero { padding: 24px 12px; }
  .home-banking-hero-heading { margin-bottom: 20px; }

  .home-banking-hero-subtitle { gap: 8px; font-size: 14px; }
  .home-banking-hero-lock { flex-basis: 1.9em; width: 1.9em; height: 1.9em; }
  .home-banking-demo { width: calc(100% - 20px); height: 470px; border-radius: 10px; }
  .home-banking-demo iframe { width: 125%; height: 125%; transform: scale(.8); transform-origin: top left; }
}

/* Focused, reusable workflow walkthrough on the homepage. */
.home-workflow-demo { border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .07); position: relative; width: 100%; height: clamp(680px, 48vw, 1000px); margin: 0 auto; }
@media (max-width: 900px) { .home-workflow-demo { height: 690px; } }
@media (max-width: 760px) { .home-workflow-demo { height: 1080px; } }

/* Deployment and strategy cards, matching the supplied Wonderful reference. */
body:not([data-banking-demo]) section.outcomes {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(80px, 8vw, 140px) 24px clamp(96px, 9vw, 160px);
  background: #080808;
  color: #fff;
  font-family: "Progress Favorit", Arial, sans-serif;
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - clamp(180px, 18vw, 300px)), transparent 100%);
}
section.outcomes::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #080808 0%, #08080880 20%, #080808a6 60%, #080808 100%), url("/assets/home-office-background.webp") center 48% / cover no-repeat;
  opacity: .65;
  pointer-events: none;
}
.partnership-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.partnership-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 592 / 700;
  border-radius: 8px;
  background: #131313;
  box-shadow: 0 20px 64px #0003;
}
.partnership-card-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partnership-card-deployment .partnership-card-image {
  object-position: 30% center;
  filter: sepia(.38) saturate(.7) brightness(.55) contrast(1.08);
}
.partnership-blur-defs { position: absolute; pointer-events: none; }
.partnership-card-security .partnership-card-image {
  object-position: 50% 100%;
  filter: sepia(.25) saturate(.8) brightness(.9) contrast(1.08);
}
.partnership-card-security .partnership-security-motion {
  filter: sepia(.25) saturate(.8) brightness(.9) contrast(1.08) url(#partnership-security-blur);
  mask-image: linear-gradient(90deg, #000 0%, #000 22%, rgba(0,0,0,.6) 36%, transparent 46%, transparent 54%, rgba(0,0,0,.6) 64%, #000 78%, #000 100%);
  opacity: 1;
  transform: scaleX(1.12);
}
.partnership-card-deployment .partnership-card-motion {
  filter: sepia(.38) saturate(.7) brightness(.55) contrast(1.08) url(#partnership-motion-blur);
  mask-image: linear-gradient(90deg, #000 0%, #000 12%, transparent 27%, transparent 44%, #000 65%, #000 100%);
  transform: scaleX(1.06);
}
.partnership-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, #13131315 42%, #131313d9 68%, #131313 88%);
  pointer-events: none;
}
.partnership-card-content { width: 100%; padding: 36px 24px 60px; text-align: center; }
section.outcomes .partnership-card h3 {
  margin: 0 0 12px;
  color: #f7f7f7;
  font-family: inherit;
  font-size: clamp(26px, 2.35vw, 32px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.045em;
}
section.outcomes .partnership-card p {
  margin: 0;
  color: #b8b8b8;
  font-family: inherit;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.partnership-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 32px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #181818;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.partnership-card-link:hover { background: #e8e8e8; box-shadow: 0 4px 20px #0003; }
.partnership-card-link:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width: 760px) {
  .partnership-cards { grid-template-columns: 1fr; max-width: 520px; gap: 20px; }
  .partnership-card { min-height: 540px; }
  .partnership-card-content { padding: 32px 20px 44px; }
  .partnership-desktop-break { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .partnership-card-link { transition: none; }
}

/* Industry selector reproduced from the Wonderful homepage reference. */
body:not([data-banking-demo]) section.home-industries {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
  color: #1c1c1c;
  padding: 120px 60px;
  font-family: "Progress Favorit", Arial, sans-serif;
}
.home-industries-inner { max-width: 1200px; margin: 0 auto; }
.home-industries h2 {
  margin: 0 0 32px;
  padding: 0 0 3px;
  font: 300 48px/1.05 "Progress Favorit", Arial, sans-serif;
  letter-spacing: -.04em;
  text-align: center;
}
.home-industry-tabs {
  display: flex;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 64px;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: #f5f5f5;
  scrollbar-width: none;
}
.home-industry-tabs::-webkit-scrollbar { display: none; }
.home-industry-tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: #6e6e6e;
  font: 400 14px/1.2 "Progress Favorit", Arial, sans-serif;
  letter-spacing: -.06em;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.home-industry-tabs button[aria-selected="true"] { background: #fff; color: #141414; }
.home-industry-tabs button:focus-visible { outline: 2px solid #222; outline-offset: -2px; }
.home-industry-panels [hidden] { display: none; }
.home-industry-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 600px;
  padding: 210px 24px 44px;
  overflow: hidden;
  border-radius: 12px;
  color: #fafafa;
  text-align: center;
  text-decoration: none;
}
.home-industry-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home-industry-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 0%, #0000001f 73%, #00000059 100%); }
.home-industry-card h3 { margin: 0; color: #fafafa; font: 300 72px/1.05 "Progress Favorit", Arial, sans-serif; letter-spacing: -.06em; }
.home-industry-card-footer { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.home-industry-card-footer p { margin: 0; color: #ffffffe0; font-size: 18px; line-height: 1.4; letter-spacing: -.02em; }
.home-industry-explore { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 13px 12px; border-radius: 50px; color: #000; background: #fff; font-size: 12px; line-height: 10px; letter-spacing: -.5px; }
.home-industry-card:focus-visible { outline: 2px solid #222; outline-offset: 5px; }
@keyframes home-industry-text-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes home-industry-card-enter {
  from { opacity: .8; }
  to { opacity: 1; }
}
.home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card {
  animation: home-industry-card-enter 1000ms cubic-bezier(.42, 0, .58, 1) both;
}
.home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card h3,
.home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card-footer {
  animation: home-industry-text-enter 900ms cubic-bezier(.42, 0, .58, 1) 180ms both;
}
.home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card-footer {
  animation-delay: 260ms;
}
@media (min-width: 880px) and (max-width: 1439px) { body:not([data-banking-demo]) section.home-industries { padding-inline: 40px; } }
@media (max-width: 879px) {
  body:not([data-banking-demo]) section.home-industries { padding: 84px 24px; }
  .home-industries h2 { margin-bottom: 12px; font-size: 34px; line-height: 1.15; }
  .home-industry-tabs { margin-bottom: 32px; }
  .home-industry-card { height: 460px; padding: 160px 24px 44px; }
  .home-industry-card h3 { font-size: clamp(28px, 7.8vw, 38px); line-height: 1.2; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .home-industry-tabs button { transition: none; }
  .home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card,
  .home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card h3,
  .home-industry-panels [role="tabpanel"]:not([hidden]) .home-industry-card-footer { animation: none; }
}


/* Team closer and continuous dark footer. */
body:not([data-banking-demo]) main > section.home-team-closer {
  position: relative; width: 100%; max-width: none; margin: 0;
  padding: 116px 32px 112px; color: #f5f5f5;
  background: #080808 url('/assets/home-team-hallway.webp') center top / cover no-repeat;
  font-family: "Progress Favorit", Arial, sans-serif; isolation: isolate;
}
.home-team-closer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 15%, #08080830 48%, #080808 100%); }
.home-team-inner { max-width: 1200px; margin: auto; }
.home-team-intro { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; margin-bottom: 64px; }
.home-team-closer .home-team-intro h2 { margin: 0; font-family: inherit; font-size: 46px; font-weight: 300; line-height: 1.06; letter-spacing: -.045em; color: #f5f5f5; }
.home-team-closer .home-team-intro p { margin: 0; font-family: inherit; font-size: 18px; line-height: 1.25; letter-spacing: -.02em; color: #efefef; font-weight: 300; }
.home-team-cards { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; transition: grid-template-columns 600ms cubic-bezier(.22,.68,0,1); }
.home-team-card { height: 292px; display: flex; align-items: flex-end; justify-content: space-between; padding: 30px; border-radius: 12px; background: #f5f5f533; backdrop-filter: blur(10px); color: #fff; font-size: 42px; font-weight: 300; line-height: 1; letter-spacing: -.04em; text-decoration: none; transition: background 400ms,color 400ms; }
.home-team-about { background: #f5f5f5; color: #393939; }
.home-team-arrow { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #393939; color: #fff; font-family: Arial,sans-serif; font-size: 28px; font-weight: 300; transition: opacity 300ms,transform 400ms; }
.home-team-careers .home-team-arrow { opacity: 0; }
.home-team-cards:has(.home-team-careers:hover) { grid-template-columns: 2fr 3fr; }
.home-team-cards:has(.home-team-careers:hover) .home-team-about { background: #f5f5f533; color: #fff; }
.home-team-cards:has(.home-team-careers:hover) .home-team-about .home-team-arrow { opacity: 0; }
.home-team-careers:hover { background: #f5f5f5; color: #393939; }
.home-team-careers:hover .home-team-arrow { opacity: 1; }
.home-team-about:focus-visible { outline: 2px solid white; outline-offset: 5px; }
.site-footer.wonderful-style-footer { min-height: 0; padding: 56px 0 0; background: #080808; color: #aaa; border: 0; overflow: hidden; font-family: "Progress Favorit",Arial,sans-serif; }
.wonderful-footer-top { display: grid; grid-template-columns: 2.4fr 1.15fr 1.1fr .75fr .65fr 1fr; gap: 32px; max-width: 1200px; margin: auto; padding: 0 32px; }
.wonderful-footer-company { display: flex; flex-direction: column; align-items: flex-start; }
.wonderful-style-footer .wonderful-footer-brand { color: #f5f5f5; font-family: inherit; font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.wonderful-style-footer .wonderful-footer-company p { font-family: inherit; font-size: 14px; line-height: 1.2; color: #aaa; margin: 16px 0 0; font-weight: 300; }
.wonderful-style-footer .wonderful-footer-contact { display: inline-flex; background: #fff; color: #111; font-family: inherit; font-size: 14px; line-height: 1; border-radius: 40px; padding: 13px 18px; margin-top: 24px; text-decoration: none; }
.wonderful-style-footer .wonderful-footer-copyright { margin-top: 36px; }
.wonderful-footer-top nav { display: flex; flex-direction: column; gap: 12px; }
.wonderful-style-footer nav h2 { color: #666; font-family: inherit; font-size: 14px; line-height: 1.2; font-weight: 300; letter-spacing: 0; margin: 0 0 2px; text-transform: none; }
.wonderful-style-footer nav :is(a,span) { font-family: inherit; font-size: 14px; font-weight: 300; line-height: 1.25; color: #aaa; text-decoration: none; }
.wonderful-style-footer nav a:hover { color: #fff; }
.wonderful-style-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.wonderful-footer-wordmark { color: #191919; font-family: "Progress Favorit",Arial,sans-serif; font-weight: 500; font-size: 16.4vw; letter-spacing: -.065em; line-height: .88; text-align: center; white-space: nowrap; margin: 100px 0 -2.4vw; pointer-events: none; }
@media (min-width: 1800px) {
 .home-team-inner { max-width: 1480px; }
 .home-team-closer .home-team-intro h2 { font-size: 54px; }
 .home-team-closer .home-team-intro p { font-size: 20px; }
 .home-team-card { height: 360px; font-size: 48px; padding: 38px; }
 .wonderful-footer-top { max-width: 1440px; }
}
@media (max-width: 900px) {
 .home-team-closer .home-team-intro h2 { font-size: 38px; }
 .home-team-intro { gap: 24px; }
 .wonderful-footer-top { grid-template-columns: repeat(3,1fr); gap: 40px 24px; }
 .wonderful-footer-company { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
 body:not([data-banking-demo]) main > section.home-team-closer { padding: 80px 24px; }
 .home-team-intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
 .home-team-closer .home-team-intro h2 { font-size: 34px; }
 .home-team-cards, .home-team-cards:has(.home-team-careers:hover) { grid-template-columns: 1fr; gap: 12px; }
 .home-team-card { height: 230px; padding: 24px; font-size: 32px; }
 .wonderful-footer-top { padding: 0 24px; grid-template-columns: 1fr 1fr; }
 .wonderful-footer-wordmark { margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) { .home-team-cards, .home-team-card, .home-team-arrow { transition: none; } }

/* Keep the cards in the original composition; frame the photo behind them. */
body:not([data-banking-demo]) main > section.home-team-closer {
  background: #080808;
  padding-top: 96px;
  padding-bottom: 96px;
}
.home-team-closer::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #08080812 0%, transparent 35%, #08080855 65%, #080808d9 88%, #080808 100%), url('/assets/home-team-hallway.webp') center 38% / cover no-repeat;
}
.home-team-intro {
  align-items: start;
  min-height: 0;
  margin-bottom: 112px;
}
.home-team-intro p { padding-top: 12px; }
@media (max-width: 600px) {
  body:not([data-banking-demo]) main > section.home-team-closer { padding-top: 64px; padding-bottom: 64px; }
  .home-team-closer::before { background-size: auto, cover; background-position: center, center; background-image: linear-gradient(180deg, #08080840 0%, #08080818 45%, #08080845 85%, #080808 100%), url('/assets/home-team-hallway.webp'); }
  .home-team-intro { margin-bottom: 40px; }
  .home-team-intro p { padding-top: 0; }
}

/* Reuse the banking page's transparent brand-to-lock animation. */
.security-card-lock { display: block; width: 64px; height: 64px; margin: 0 auto 12px; }
.security-card-lock img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }


/* A compact loading mark that stays clear of the hero copy. */
.home-film-hero .hero-boot {
  top: auto;
  bottom: 132px;
  left: 50%;
  transform: translateX(-50%);
  gap: 0;
  opacity: .65;
}
.home-film-hero .hero-boot-mark,
.home-film-hero .hero-boot-mark-fallback {
  width: 48px;
  height: 48px;
  filter: none;
}
.home-film-hero .hero-boot-glow,
.home-film-hero .hero-boot-wordmark,
.home-film-hero .hero-boot-progress { display: none; }
@media (max-width: 640px) {
  .home-film-hero .hero-boot { bottom: 112px; }
  .home-film-hero .hero-boot-mark-fallback { width: 36px; height: 36px; }
}

/* Clearly indicate video loading over a softly blurred hero background. */
.home-film-hero .hero-media:not(.video-ready) { z-index: 3; pointer-events: none; }
.home-film-hero .hero-still { filter: blur(16px) saturate(.75) brightness(.55); transform: scale(1.08); }
.home-film-hero .hero-boot { top: 50%; bottom: auto; transform: translate(-50%, -50%); gap: 12px; opacity: 1; }
.home-film-hero .hero-boot-wordmark { display: block; margin: 0; font-size: 12px; line-height: 1.4; letter-spacing: .04em; text-transform: none; font-weight: 400; color: #ffffffb3; text-shadow: none; }

/* Hero, product and stories share the normal document flow. */
html:has(.home-hero-transition),
body:has(.home-hero-transition) { background:#fff; }
body:has(.home-hero-transition) { --bg:#fff; overflow-x:clip; }
body:has(.home-hero-transition) main { background:#fff; }
.home-hero-transition { position: relative; isolation: isolate; background: #fff; }
.home-product-surface, .home-carousel-surface { display: flow-root; background: #fff; }
#home-workflow-story { scroll-margin-top: 92px; }
.home-carousel-surface section.business-progress .business-progress-heading h2 { color: #171717; }
.home-carousel-surface .progress-slide { border-color: #ddd; }
.home-carousel-surface .progress-rail { color: #777; }
.home-carousel-surface .progress-slide.is-active .progress-rail,
.home-carousel-surface .progress-rail:hover { color: #171717; }
.home-carousel-surface .progress-card { box-shadow: 0 8px 28px rgb(0 0 0 / 7%); }

/* Quiet typography and a shared gutter for the opening canvas. */
body { --canvas-inset:clamp(24px,3.75vw,72px); }
.hero.home-film-hero { --film-inset:var(--canvas-inset); min-height:max(680px,100svh); }
.hero.home-film-hero .hero-content {
  padding:144px var(--film-inset) 72px;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(40px,5vw,96px);
}
.home-film-details { width:100%; max-width:530px; justify-self:end; text-align:left; }
.home-film-details .home-film-subheading { margin-top:0; }
.hero.home-film-hero .home-film-details .hero-actions { justify-content:flex-start; flex-wrap:wrap; }
.hero.home-film-hero h1 { font-size:clamp(52px,5.5vw,94px); font-weight:350; line-height:1.08; letter-spacing:-.045em; }
.home-film-subheading { margin-top:28px; font-size:clamp(22px,1.8vw,30px); font-weight:350; line-height:1.3; }
.home-film-description { max-width:530px; font-size:clamp(17px,1.3vw,22px); line-height:1.55; letter-spacing:-.02em; }
.hero.home-film-hero .hero-actions { margin-top:28px; gap:18px; }
.hero.home-film-hero .hero-actions .button { min-height:42px; padding:8px 16px; font-size:16px; font-weight:400; line-height:1.4; border-radius:6px; }
.hero.home-banking-hero { width:100%; padding:64px var(--canvas-inset) 24px; margin:0; border-radius:0; }
.home-banking-hero-heading { margin-bottom:32px; }
.home-banking-hero-subtitle { font-size:15px; line-height:1.5; letter-spacing:-.015em; }
.home-workflow-demo { box-shadow:0 6px 24px rgb(0 0 0 / 5%); }
body:not([data-banking-demo]) .home-carousel-surface > section.business-progress { width:100%; --progress-inset:var(--canvas-inset); padding-top:72px; padding-bottom:48px; }
.home-carousel-surface section.business-progress .business-progress-heading h2 { font:300 clamp(34px,3.2vw,48px)/1.15 "Progress Favorit",Arial,sans-serif; letter-spacing:-.04em; }
.home-carousel-surface .business-progress-heading { margin-bottom:48px; }
.home-carousel-surface .progress-rail-title { font-family:"Progress Favorit",Arial,sans-serif; font-size:clamp(22px,1.6vw,24px); font-weight:300; }
body:not([data-banking-demo]) main > section.operations-problem { max-width:none; margin:0; padding:64px clamp(24px,3.75vw,72px) 96px; background:#fff; color:#202020; font-family:Inter,Arial,sans-serif; }
.operations-problem-stage { max-width:1400px; margin:auto; border-top:1px solid #e9e9e9; padding-top:32px; }
.operations-problem .problem-opening h2 { max-width:830px; margin:0; font:300 clamp(28px,2.15vw,42px)/1.15 "Progress Favorit",Arial,sans-serif; letter-spacing:-.04em; }
.problem-opening h2 span { color:#858585; }
.problem-scene { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(48px,8vw,128px); margin-top:64px; }
.operations-problem-copy p { margin:0 0 24px; max-width:530px; font-size:16px; line-height:1.65; color:#777; letter-spacing:-.01em; }
.operations-problem-copy strong { font-weight:400; color:#222; }
.operations-problem-copy .operations-problem-conclusion { color:#222; }
.problem-rows { list-style:none; padding:0; margin:0; }
.problem-row { display:flex; gap:14px; align-items:center; padding:22px 0; border-bottom:1px solid #e7e7e7; }
.problem-row:first-child { padding-top:0; }
.problem-row-icon { width:20px; height:20px; flex:none; color:#777; }
.problem-row-label { font-size:14px; line-height:1.5; color:#666; }
.problem-value { margin-left:auto; font-size:28px; font-weight:400; letter-spacing:-.035em; white-space:nowrap; }
.problem-outro { display:flex; align-items:center; gap:12px; margin-top:28px; }
.problem-outro img { filter:brightness(0); }
.problem-outro p { font-size:16px; margin:0; }
@media(max-width:1000px) {
 .hero.home-film-hero .hero-content { grid-template-columns:1fr; align-content:center; gap:32px; }
 .home-film-details { justify-self:start; }
}
@media(max-width:760px) {
 .hero.home-film-hero .hero-content { padding:128px 24px 56px; }
 .hero.home-film-hero h1 { font-size:clamp(42px,11vw,62px); }
 .home-film-credentials { padding-inline:24px; }
 .hero.home-banking-hero { padding-top:40px; }
 .home-banking-hero-subtitle { font-size:14px; text-align:left; }
 .home-carousel-surface section.business-progress .business-progress-heading h2 { font-size:34px; }
 .operations-problem .problem-opening h2 { font-size:28px; }
 .home-film-description { font-size:16px; }
 .problem-scene { grid-template-columns:1fr; gap:24px; margin-top:40px; }
 body:not([data-banking-demo]) main > section.operations-problem { padding-top:32px; padding-bottom:64px; }
}

/* A soft visual edge, independent of scroll position. */
.home-workflow-demo { box-shadow:none; border-radius:0; mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%),linear-gradient(to right,#000 0%,#000 94%,transparent 100%); mask-composite:intersect; }
@media(max-width:760px) { .home-workflow-demo { mask-image:linear-gradient(to bottom,#000 0%,#000 95%,transparent 100%); } }

/* Scroll changes only opacity and a small offset, never document flow. */
.home-film-hero .hero-content { opacity:var(--copy-opacity,1); transform:translateY(var(--copy-shift,0px)); }
.home-banking-hero-heading,.home-workflow-demo { opacity:var(--entry-opacity,1); transform:translateY(var(--entry-shift,0px)); }

/* Full-width problem narrative paired with the existing banking outcome wheel. */
body:not([data-banking-demo]) main > section.operations-problem { padding:64px clamp(24px,3.75vw,72px); }
.operations-problem-stage { max-width:none; margin:0; padding:0; border:0; min-height:calc(100svh - 128px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center; }
.problem-eyebrow { margin:0 0 24px; font:400 11px/1.4 Inter,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#888; }
.operations-problem .problem-opening h2 { max-width:none; font:300 clamp(44px,4.4vw,76px)/1.08 "Progress Favorit",Arial,sans-serif; letter-spacing:-.045em; }
.problem-premise { margin:24px 0 32px; max-width:600px; font:300 clamp(20px,1.8vw,27px)/1.4 "Progress Favorit",Arial,sans-serif; color:#777; letter-spacing:-.025em; }
.operations-problem-copy ul { padding:0 0 0 18px; margin:0; }
.operations-problem-copy li { padding-left:5px; margin:0 0 20px; font:400 16px/1.65 Inter,Arial,sans-serif; color:#777; }
.operations-problem-copy li::marker { color:#aaa; font-size:10px; }
.operations-problem-copy .operations-problem-conclusion { margin:24px 0 0; max-width:none; }
.problem-results { min-width:0; --bg:#fff; --ink:#222; }
.problem-results .roi-cylinder { width:100%; height:var(--roi-cylinder-height,420px); }
.problem-results .roi-cylinder-item { width:100%; white-space:normal; }
.problem-results .roi-cylinder-item .problem-metric { display:block; font:300 clamp(60px,6vw,96px)/1 "Progress Favorit",Arial,sans-serif; letter-spacing:-.05em; }
.problem-results .roi-cylinder-item .problem-metric-label { display:block; margin-top:14px; font:300 clamp(18px,1.6vw,24px)/1.3 "Progress Favorit",Arial,sans-serif; letter-spacing:-.02em; }
.problem-results .problem-outro { justify-content:center; margin-top:28px; }
@media(max-width:760px) {
 .operations-problem-stage { grid-template-columns:1fr; min-height:0; gap:36px; }
 .operations-problem .problem-opening h2 { font-size:44px; }
 .problem-premise { font-size:22px; }
 .problem-results .roi-cylinder-item .problem-metric { font-size:64px; }
 .problem-results .roi-cylinder-item .problem-metric-label { font-size:18px; }
}

/* Quiet hierarchy: one outcome in focus, smaller crisp neighbors. */
.problem-results .roi-cylinder-fade { height:48px; }
.problem-results .roi-cylinder-item .problem-metric { font-size:clamp(72px,7vw,104px); letter-spacing:-.055em; }
.problem-results .roi-cylinder-item .problem-metric-label { font-size:18px; line-height:1.4; margin-top:12px; letter-spacing:-.015em; }
.problem-results .problem-outro { margin-top:16px; gap:9px; color:#777; }
.problem-results .problem-outro img { width:24px; height:24px; opacity:.6; }
.problem-results .problem-outro p { font-size:14px; }
.problem-eyebrow { margin-bottom:20px; letter-spacing:.08em; }
.operations-problem-copy li { font-size:15px; line-height:1.7; }
@media(max-width:760px) { .problem-results .roi-cylinder-item .problem-metric { font-size:76px; } }

.problem-results .problem-metric-label { transform:scale(calc(1 + .65 * (1 - var(--roi-focus,1)))); transform-origin:top center; }

/* An editorial problem-to-answer sequence, with no boxed cards. */
.operations-problem-stage { min-height:0; align-items:start; column-gap:clamp(48px,7vw,112px); row-gap:64px; }
.problem-eyebrow { margin-bottom:28px; }
.operations-problem .problem-opening h2 { font-size:clamp(46px,4.6vw,76px); line-height:1.05; }
.problem-premise { max-width:510px; margin:28px 0 44px; font-size:clamp(20px,1.65vw,26px); line-height:1.45; color:#696969; }
.problem-obstacle { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; padding:24px 0; border-top:1px solid #e7e7e7; }
.problem-obstacle h3 { margin:0; font:400 16px/1.5 "Progress Favorit",Arial,sans-serif; color:#222; letter-spacing:-.015em; }
.operations-problem-copy .problem-obstacle p { margin:0; font:400 15px/1.7 Inter,Arial,sans-serif; color:#747474; letter-spacing:-.012em; }
.problem-results { padding-top:4px; align-self:center; }
.problem-results-heading { margin:0 0 16px; text-align:center; font:300 20px/1.4 "Progress Favorit",Arial,sans-serif; color:#777; letter-spacing:-.02em; }
.problem-resolution { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(48px,7vw,112px); border-top:1px solid #dedede; padding-top:40px; align-items:start; }
.problem-bridge { margin:0; font:300 clamp(25px,2.25vw,34px)/1.3 "Progress Favorit",Arial,sans-serif; letter-spacing:-.025em; color:#777; }
.problem-answer .problem-outro { margin:0; gap:16px; align-items:center; }
.problem-answer .problem-outro img { width:40px; height:40px; opacity:1; }
.problem-answer .problem-outro p { font:300 clamp(25px,2.25vw,34px)/1.3 "Progress Favorit",Arial,sans-serif; letter-spacing:-.03em; color:#202020; }
.problem-answer-detail { margin:18px 0 0 56px; font:400 15px/1.7 Inter,Arial,sans-serif; color:#777; }
@media(max-width:1000px) { .problem-obstacle { grid-template-columns:1fr; gap:8px; } }
@media(max-width:760px) {
 .operations-problem-stage { gap:40px; }
 .operations-problem .problem-opening h2 { font-size:44px; }
 .problem-premise { margin-bottom:32px; }
 .problem-obstacle { grid-template-columns:1fr; gap:8px; padding:22px 0; }
 .problem-resolution { grid-template-columns:1fr; gap:28px; padding-top:32px; }
 .problem-answer-detail { margin-left:0; }
 .problem-results { padding-top:0; }
}

/* Taito reference composition; Context Labs font family and copy. */
body:not([data-banking-demo]) main > section.context-introduction { max-width:none; margin:0; padding:clamp(80px,6.78vw,120px) var(--canvas-inset); background:#fafaf9; color:#0f0e0d; border-top:1px solid #e8e7e5; }
.context-introduction > * { max-width:none; margin-left:0; margin-right:0; }
.context-introduction > .context-intro-kicker { margin-top:0; margin-bottom:clamp(16px,1.51vw,20px); font:400 clamp(18px,calc(16.38px + .224vw),20px)/1.5 Inter,Arial,sans-serif; color:#524f49; }
.context-intro-top { display:grid; grid-template-columns:5fr 6fr; column-gap:clamp(40px,8.1vw,125px); align-items:start; margin-bottom:clamp(40px,4.5vw,60px); }
.context-intro-heading h2 { margin:0; font:400 clamp(30px,calc(32.675px + .333vw),39.0624px)/1.2 "Progress Favorit",Arial,sans-serif; letter-spacing:-.015em; }
.context-intro-promise { margin:20px 0 0; font:400 clamp(18px,calc(16.38px + .224vw),20px)/1.5 Inter,Arial,sans-serif; color:#524f49; }
.context-intro-problem { padding:0; }
.context-intro-problem ul { padding-left:20px; margin:0 0 20px; }
.context-intro-problem li,.context-intro-problem p { font:400 clamp(18px,calc(16.38px + .224vw),20px)/1.5 Inter,Arial,sans-serif; color:#524f49; }
.context-intro-problem li { padding-left:3px; margin:0 0 14px; }
.context-intro-problem li::marker { font-size:11px; }
.context-intro-problem .context-intro-bridge { margin:0; }
.context-solution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,calc(9.4912px + 2.0339vw),40px); }
.context-solution-card { min-width:0; }
.context-solution-visual { aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:#f2f1f0; }
.context-solution-visual img { display:block; width:100%; height:100%; object-fit:cover; }
.context-solution-card h3 { margin:clamp(32px,calc(29.83px + .678vw),40px) 0 clamp(12px,1.13vw,15px); font:400 clamp(22px,calc(21.755px + .169vw),25px)/1.2 "Progress Favorit",Arial,sans-serif; letter-spacing:normal; }
.context-solution-card > p { margin:0; font:400 clamp(15px,calc(14.507px + .0778vw),16px)/1.5 Inter,Arial,sans-serif; color:#524f49; letter-spacing:normal; }
@media(max-width:760px) {
 body:not([data-banking-demo]) main > section.context-introduction { padding:64px 24px; }
 .context-intro-top { grid-template-columns:1fr; gap:28px; margin-bottom:40px; }
 .context-intro-heading h2 { font-size:32px; }
 .context-solution-grid { grid-template-columns:1fr; gap:40px; }
 .context-solution-card h3 { font-size:24px; margin-top:28px; }
}


/* The problem: two options that each fall short, with experts holding the gap between them. */
body:not([data-banking-demo]) section.expert-problem-story { height:150svh; min-height:0; }
.expert-problem-story .expert-statement-stage { position:sticky; top:0; height:100svh; min-height:0; padding:0 32px; display:block; overflow:hidden; }
section.expert-problem-story .expert-statement-copy { position:relative; max-width:1120px; margin:0 auto; font-size:17px; line-height:1.5; letter-spacing:-.01em; }
.headcount-head h2 { margin:0 0 20px; font-size:clamp(34px,4vw,52px); line-height:1.12; letter-spacing:-.045em; font-weight:400; text-wrap:balance; }
.headcount-head p { max-width:620px; margin:0 auto; color:#555; font-size:22px; line-height:1.4; letter-spacing:-.025em; text-wrap:balance; }
.headcount-compare { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,.6fr) minmax(0,1fr); margin-top:72px; text-align:left; }
.headcount-side { position:relative; grid-row:1; padding-top:28px; border-top:1px solid #161616; }
.headcount-side:first-child { grid-column:1; }
.headcount-side:nth-child(2) { grid-column:3; }
.headcount-side::before { content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:#161616; }
.headcount-side:nth-child(2)::before { left:auto; right:0; }
.headcount-side h3 { margin:0 0 10px; color:#161616; font-size:22px; font-weight:300; line-height:1.2; letter-spacing:-.025em; }
.headcount-side p { max-width:360px; margin:0; color:#666; font-size:16px; line-height:1.55; text-wrap:pretty; }
.headcount-gap { grid-column:2; grid-row:1; margin:0; padding-top:24px; border-top:1px dashed #a3a3a3; color:#8a8a8a; font-size:12px; font-weight:500; line-height:1.4; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.headcount-close { margin:56px auto 0; color:#161616; font-size:30px; line-height:1.25; letter-spacing:-.035em; text-wrap:balance; }
@media(max-width:767.98px) {
 body:not([data-banking-demo]) section.expert-problem-story { height:auto; }
 .expert-problem-story .expert-statement-stage { position:static; height:auto; padding:88px 24px; overflow:visible; }
 section.expert-problem-story .expert-statement-copy { max-width:540px; font-size:16px; }
 .headcount-head h2 { font-size:32px; margin-bottom:16px; }
 .headcount-head p { font-size:19px; }
 .headcount-compare { grid-template-columns:1fr; margin-top:48px; }
 .headcount-side,.headcount-side:first-child,.headcount-side:nth-child(2),.headcount-gap { grid-column:1; grid-row:auto; }
 .headcount-side:nth-child(2) { order:3; }
 .headcount-gap { order:2; margin:28px 0 32px; padding-top:16px; }
 .headcount-close { margin-top:40px; font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
 body:not([data-banking-demo]) section.expert-problem-story { height:auto; }
 .expert-problem-story .expert-statement-stage { position:static; height:auto; padding:96px 24px; overflow:visible; }
 .expert-problem-story .expert-statement-copy { transform:none !important; }
}

/* Homepage product films: ordinary scrolling, copy left and video right. */
body:not([data-banking-demo]) main > section.home-solutions { padding: 56px var(--canvas-inset) 120px; border-top:1px solid #dcdedb; background:#fff; color:#292929; }
.home-solutions-heading[data-intro-state="waiting"] > * { opacity:0; }
@media(prefers-reduced-motion:reduce) { .home-solutions-heading[data-intro-state="waiting"] > * { opacity:1; } }
.home-solutions-heading { margin:0 auto 72px; max-width:800px; text-align:center; }
.home-solutions-heading p { margin:0; font-size:18px; line-height:1.5; color:#777; }
.home-solutions-heading .home-solutions-intro { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin:0 0 28px; }
.home-solutions-intro span { font-size:12px; line-height:1.4; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#4b4f4b; }
.home-solutions-intro strong { display:flex; align-items:center; gap:10px; font-size:26px; line-height:1.2; letter-spacing:-.035em; font-weight:500; color:#191b19; }
.home-solutions-intro img { width:30px; height:30px; object-fit:contain; }
.home-solutions-heading h2 { max-width:780px; margin:0 auto 22px; font-family:inherit; font-size:clamp(32px,3.2vw,48px); font-weight:400; line-height:1.15; letter-spacing:-.035em; color:#191b19; }
.home-solutions-heading .home-solutions-lead { max-width:540px; margin-inline:auto; text-wrap:pretty; }
.home-solutions-heading h2 { text-wrap:balance; }

/* Reference composition: stationary software windows, then a white crossfade. */
body:not([data-banking-demo]) .home-solutions .bank-stack-story { position:relative; width:calc(100% + var(--canvas-inset)*2); max-width:none; height:min(300vh,2800px); margin:0 calc(var(--canvas-inset)*-1) 100px; padding:0; background:#fff; color:#161616; }
.bank-stack-stage { position:sticky; top:102px; height:calc(100dvh - 102px); }
.bank-stack-frame { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; background:#fff; }
.bank-stack-copy { position:absolute; z-index:4; inset:40px 24px auto; text-align:center; }
.bank-stack-copy>div { width:100%; }
.bank-stack-copy h3 { margin:0; font:400 48px/1.1 "Progress Favorit",Arial,sans-serif; letter-spacing:-.035em; }
.bank-stack-copy p { max-width:680px; margin:18px auto 0; color:#666; font-size:16px; line-height:1.5; text-wrap:balance; }
.bank-stack-resolved { position:absolute; inset:0; visibility:hidden; }
.bank-stack-frame[data-resolved] .bank-stack-opening { visibility:hidden; }
.bank-stack-frame[data-resolved] .bank-stack-resolved { visibility:visible; }
.bank-stack-canvas { position:absolute; top:164px; bottom:0; left:50%; width:min(100%,calc((100dvh - 266px)*1.7)); translate:-50% 0; }
.bank-stack-collage { position:absolute; inset:0; overflow:hidden; container-type:size; mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent); }
.bank-stack-art { --u:calc(max(100cqw,100cqh*1.409) / 1440); position:absolute; left:50%; top:50%; width:calc(var(--u)*1440); height:calc(var(--u)*1022); translate:-50% -50%; font-family:Inter,Arial,sans-serif; color:#1b1b1b; }
.bank-stack-pieces { position:absolute; inset:0; }
/* Once connected, the old windows stay as a faint ghost and the dotted lines remain, behind the one workflow. */
.bank-stack-pieces > .bs-el { opacity:calc(1 - var(--stack-fade,0) * .95); }
.bank-stack-pieces > .bank-stack-paths { opacity:calc(1 - var(--stack-fade,0) * .6); }
.bank-stack-paths { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#6d6a68; stroke-width:1; }
.bs-el { position:absolute; left:calc(var(--x)*var(--u)); top:calc(var(--y)*var(--u)); width:calc(var(--w)*var(--u)); height:calc(var(--h)*var(--u)); margin:0; }
.bs-win { overflow:hidden; background:#fff; border:1px solid #e2e2e2; border-radius:calc(var(--u)*4); box-shadow:0 calc(var(--u)*2) calc(var(--u)*10) #0000000d; }
.bs-shot img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:top left; }
.bs-compose { display:flex; flex-direction:column; }
.bs-compose-bar { display:flex; align-items:center; gap:calc(var(--u)*4); height:calc(var(--u)*16); padding:0 calc(var(--u)*7); background:#f2f6fc; font-size:calc(var(--u)*6.5); font-weight:500; }
.bs-compose-bar span { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bs-compose-bar i { width:calc(var(--u)*4); height:calc(var(--u)*4); border-radius:50%; background:#8a8f98; }
.bs-compose-body { flex:1; min-height:0; padding:calc(var(--u)*6); }
.bs-compose-body img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border:1px solid #e6e6e6; border-radius:calc(var(--u)*2); }
.bs-compose-tools { display:flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*22); padding:0 calc(var(--u)*7); }
.bs-compose-tools b { padding:calc(var(--u)*3) calc(var(--u)*9); border-radius:99px; background:#0b57d0; color:#fff; font-size:calc(var(--u)*6); font-weight:600; }
.bs-compose-tools i { width:calc(var(--u)*6); height:calc(var(--u)*6); border-radius:calc(var(--u)*1.5); background:#9aa0a6; opacity:.7; }
.bs-bubble { display:flex; align-items:center; gap:calc(var(--u)*8); width:max-content; height:auto; padding:calc(var(--u)*7) calc(var(--u)*12) calc(var(--u)*7) calc(var(--u)*7); background:#fff; border:1px solid #e4e4e4; border-radius:calc(var(--u)*7); box-shadow:0 calc(var(--u)*3) calc(var(--u)*12) #00000014; }
.bs-bubble img { width:calc(var(--u)*27); height:calc(var(--u)*27); border-radius:calc(var(--u)*5); object-fit:cover; }
.bs-bubble span { display:grid; font-size:calc(var(--u)*12.5); font-weight:500; line-height:1.2; letter-spacing:-.01em; white-space:nowrap; }
.bs-bubble small { color:#8a8a8a; font-size:calc(var(--u)*7); font-weight:400; }
.bs-folder,.bs-file { display:grid; justify-items:center; align-content:start; gap:calc(var(--u)*4); height:auto; text-align:center; }
.bs-folder svg { width:calc(var(--u)*46); height:auto; }
.bs-folder-sm svg { width:calc(var(--u)*36); }
.bs-file svg { width:calc(var(--u)*26); height:auto; }
.bs-folder span,.bs-file span { color:#4b4b4b; font-size:calc(var(--u)*7.5); white-space:nowrap; }
.bs-form { display:grid; align-content:start; gap:calc(var(--u)*6); padding:calc(var(--u)*10) calc(var(--u)*11); font-size:calc(var(--u)*6.5); }
.bs-form p { margin:0 0 calc(var(--u)*2); font-weight:600; font-size:calc(var(--u)*7.5); }
.bs-form label { display:grid; gap:calc(var(--u)*3); color:#3c3c3c; }
.bs-form label span { height:calc(var(--u)*15); padding:0 calc(var(--u)*5); border:1px solid #d6d6d6; border-radius:calc(var(--u)*2.5); color:#555; line-height:calc(var(--u)*14); }
.bs-form label.err span { border-color:#e3524a; background:#fff8f7; }
.bs-form em { display:flex; align-items:center; gap:calc(var(--u)*4); color:#d93025; font-style:normal; }
.bs-form em svg { width:calc(var(--u)*8); }
.bs-pdf { display:flex; flex-direction:column; background:#525659; border-color:#c9c9c9; }
.bs-pdf-tab { height:calc(var(--u)*13); padding:calc(var(--u)*3) calc(var(--u)*6) 0; background:#dee1e6; }
.bs-pdf-tab span { display:block; width:45%; height:100%; padding:0 calc(var(--u)*5); border-radius:calc(var(--u)*3) calc(var(--u)*3) 0 0; background:#fff; color:#333; font-size:calc(var(--u)*5.5); line-height:calc(var(--u)*10); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-pdf-tools { display:flex; align-items:center; gap:calc(var(--u)*6); height:calc(var(--u)*18); padding:0 calc(var(--u)*8); background:#323639; }
.bs-pdf-tools i { width:calc(var(--u)*7); height:calc(var(--u)*5); border-radius:1px; background:#c4c7c9; opacity:.55; }
.bs-pdf-tools b { width:calc(var(--u)*24); height:calc(var(--u)*8); margin-left:auto; border-radius:calc(var(--u)*2); background:#4f8ff7; }
.bs-pdf-canvas { flex:1; min-height:0; padding:calc(var(--u)*12) calc(var(--u)*24) 0; }
.bs-pdf-canvas img { display:block; width:100%; height:auto; box-shadow:0 1px 4px #0000004d; }
.bs-excel { display:flex; flex-direction:column; border-color:#cfd6cf; }
.bs-excel-title { flex:none; height:calc(var(--u)*14); background:#3f8f5c; color:#fff; font-size:calc(var(--u)*6.5); line-height:calc(var(--u)*14); text-align:center; }
.bs-excel-formula { flex:none; display:flex; align-items:center; gap:calc(var(--u)*5); height:calc(var(--u)*11); padding:0 calc(var(--u)*5); border-bottom:1px solid #e3e3e3; color:#777; font-size:calc(var(--u)*5.5); }
.bs-excel-formula span { flex:1; height:calc(var(--u)*7); border:1px solid #e3e3e3; }
.bs-excel table { flex:1; width:100%; border-collapse:collapse; table-layout:fixed; font-size:calc(var(--u)*5.2); }
.bs-excel th,.bs-excel td { height:calc(var(--u)*11); padding:0 calc(var(--u)*3); border:1px solid #e6e6e6; overflow:hidden; white-space:nowrap; text-overflow:clip; text-align:left; font-weight:400; }
.bs-excel th { width:calc(var(--u)*13); background:#f3f3f3; color:#777; text-align:center; }
.bs-excel tr:first-child th { background:#f3f3f3; }
.bs-excel td.num { text-align:right; }
.bs-excel td b { font-weight:600; }
.bs-excel-tabs { flex:none; display:flex; gap:calc(var(--u)*2); height:calc(var(--u)*11); padding:0 calc(var(--u)*16); background:#f3f3f3; border-top:1px solid #e0e0e0; font-size:calc(var(--u)*5.2); }
.bs-excel-tabs span { padding:0 calc(var(--u)*6); color:#666; line-height:calc(var(--u)*10); }
.bs-excel-tabs span.on { background:#fff; color:#1e6b3c; border-bottom:2px solid #1e6b3c; }
.bs-search { display:grid; align-content:center; gap:calc(var(--u)*8); padding:0 calc(var(--u)*12); font-size:calc(var(--u)*6.5); }
.bs-search-chips { display:flex; gap:calc(var(--u)*10); color:#444; }
.bs-search-chips span::after { content:" \25BE"; color:#888; }
.bs-search-fields { display:flex; gap:calc(var(--u)*5); }
.bs-search-fields span { flex:1; padding:calc(var(--u)*6) calc(var(--u)*7); border:1px solid #d9d9d9; border-radius:calc(var(--u)*3); color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-search-fields span.wide { flex:1.6; }
.bs-search-fields b { padding:calc(var(--u)*6) calc(var(--u)*10); border-radius:calc(var(--u)*3); background:#1a73e8; color:#fff; font-weight:500; }
.bs-thread { display:flex; align-items:center; gap:calc(var(--u)*6); padding:0 calc(var(--u)*8); background:#fff; border:1px solid #ececec; border-radius:calc(var(--u)*5); color:#8d8d8d; font-size:calc(var(--u)*7); opacity:.5; white-space:nowrap; }
.bs-thread img { width:calc(var(--u)*12); height:calc(var(--u)*12); object-fit:contain; }
.bs-tile { display:grid; place-items:center; background:#fff; border:1px solid #e7e7e7; border-radius:calc(var(--u)*11); box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) #00000012; }
.bs-tile img { width:58%; height:58%; object-fit:contain; }
.bs-tile b { position:absolute; top:calc(var(--u)*-7); left:calc(100% - var(--u)*9); min-width:calc(var(--u)*15); padding:0 calc(var(--u)*4); border-radius:99px; background:#e5483f; color:#fff; font-size:calc(var(--u)*7); font-weight:600; line-height:calc(var(--u)*15); text-align:center; }
.bsa-card { padding:calc(var(--u)*10) calc(var(--u)*11); background:#fff; border:1px solid #efefef; border-radius:calc(var(--u)*5); }
.bsa-card h4 { margin:0 0 calc(var(--u)*8); color:#b4b4b4; font-size:calc(var(--u)*6.5); font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.bsa-files { display:grid; gap:calc(var(--u) * 4); margin:0 0 calc(var(--u) * 8); padding:0; list-style:none; }
.bsa-files li { display:flex; align-items:center; gap:calc(var(--u) * 6); padding:calc(var(--u) * 4) calc(var(--u) * 5); border:1px solid #ececec; border-radius:calc(var(--u) * 4); }
.bsa-files b { padding:calc(var(--u) * 1) calc(var(--u) * 3); border-radius:calc(var(--u) * 2); background:#e5483f; color:#fff; font-size:calc(var(--u) * 5.5); font-weight:700; }
.bsa-idcard { display:flex; gap:calc(var(--u) * 8); margin-bottom:calc(var(--u) * 10); padding:calc(var(--u) * 8); border:1px solid #e3e6ea; border-radius:calc(var(--u) * 5); background:linear-gradient(135deg,#f4f6f9,#eef1f5); }
.bsa-idcard img { width:calc(var(--u) * 30); height:calc(var(--u) * 36); border-radius:calc(var(--u) * 3); object-fit:cover; }
.bsa-idcard span { display:grid; flex:1; align-content:start; gap:calc(var(--u) * 4); }
.bsa-idcard i { display:block; height:calc(var(--u) * 3); border-radius:2px; background:#d9dee5; }
.bsa-idcard i:nth-child(3) { width:70%; }
.bsa-idcard i:nth-child(4) { width:45%; }
.bsa-pill.neutral { background:#eef0f3; color:#3c4350; }
.bank-stack-app { position:absolute; inset:0; z-index:2; opacity:var(--stack-center,0); }
.bsa-wire { position:absolute; inset:0; color:#c2c2c2; }
.bsa-bar { display:flex; align-items:center; gap:calc(var(--u)*26); padding:0 calc(var(--u)*14); border:1px solid #f0f0f0; border-radius:calc(var(--u)*5); font-size:calc(var(--u)*7.5); }
.bsa-bar span:first-child { color:#a9a9a9; font-weight:600; }
.bsa-bar b { width:calc(var(--u)*120); height:calc(var(--u)*14); margin-left:auto; border:1px solid #efefef; border-radius:99px; }
.bsa-rail ul { display:grid; gap:calc(var(--u)*13); margin:0; padding:calc(var(--u)*8) 0; list-style:none; }
.bsa-rail li { width:70%; height:calc(var(--u)*13); border:1px solid #f0f0f0; border-radius:calc(var(--u)*3); }
.bsa-list { margin:0; padding:0; list-style:none; font-size:calc(var(--u)*7.5); }
.bsa-list li { display:flex; justify-content:space-between; padding:calc(var(--u)*5) 0; border-top:1px solid #f4f4f4; }
.bsa-spark svg { display:block; width:100%; height:calc(var(--u)*58); fill:none; stroke:#d9d9d9; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.bsa-avatars { display:flex; gap:calc(var(--u)*9); }
.bsa-avatars i,.bsa-logos i { width:calc(var(--u)*26); height:calc(var(--u)*26); border-radius:50%; background:#f3f3f3; }
.bsa-logos { display:flex; gap:calc(var(--u)*12); }
.bsa-logos i { border-radius:calc(var(--u)*6); }
.bsa-doc { margin:0 calc(var(--u)*30); padding:calc(var(--u)*16); border:1px solid #f1f1f1; }
.bsa-doc i { display:block; height:calc(var(--u)*3.5); margin-bottom:calc(var(--u)*11); background:#f2f2f2; }
.bsa-ask { display:flex; align-items:center; justify-content:space-between; height:calc(var(--u)*30); padding:0 calc(var(--u)*6) 0 calc(var(--u)*10); border:1px solid #efefef; border-radius:calc(var(--u)*6); font-size:calc(var(--u)*8); }
.bsa-ask b { width:calc(var(--u)*18); height:calc(var(--u)*18); border-radius:50%; background:#f0f0f0; }
.bank-stack-frame:not([data-resolved]) .bank-stack-app { visibility:hidden; }
.bank-stack-app .bsa-work { overflow:hidden; }
.bsu-tabs { display:inline-flex; gap:36px; margin:28px auto 0; border-bottom:1px solid #e4e4e1; }
.bsu-tab { position:relative; padding:0 0 15px; border:0; background:none; color:#8a8a8a; font:400 16px/1.2 Inter,Arial,sans-serif; letter-spacing:-.01em; white-space:nowrap; cursor:pointer; transition:color .25s ease; }
.bsu-tab::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:#161616; scale:0 1; transform-origin:0 50%; transition:scale .4s cubic-bezier(.22,1,.36,1); }
.bsu-tab:hover,.bsu-tab[aria-selected="true"] { color:#161616; }
.bsu-tab[aria-selected="true"]::after { scale:1 1; }
.bsu-tab.is-timed[aria-selected="true"]::after { animation:bsu-tab-fill var(--dur,8s) linear both; }
@keyframes bsu-tab-fill { from { scale:0 1; } to { scale:1 1; } }
.bsu-tab:focus-visible { outline:2px solid #161616; outline-offset:6px; border-radius:2px; }
.bsu-side { position:absolute; z-index:4; top:var(--app-top,280px); width:var(--side-w,280px); height:var(--app-height,440px); opacity:var(--stack-center,0); color:#161616; }
.bank-stack-frame:not([data-resolved]) .bsu-side,.bank-stack-frame[data-side-hidden] .bsu-side { visibility:hidden; }
.bsu-side-left { left:calc(var(--app-left,0px) - var(--side-gap,48px) - var(--side-w,280px)); }
.bsu-side-right { left:calc(var(--app-right,0px) + var(--side-gap,48px)); }
.bsu-side-item { display:none; flex-direction:column; height:100%; }
.bsu-side-item.is-on { display:flex; animation:bsu-side-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes bsu-side-in { from { opacity:0; translate:0 10px; } }
.bsu-eyebrow { margin:0 0 16px; color:#8a8a8a; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.bsu-side-left h4 { margin:0 0 16px; font:300 clamp(26px,2.2vw,32px)/1.1 "Progress Favorit",Arial,sans-serif; letter-spacing:-.035em; text-wrap:balance; }
.bsu-side-left h4 + p { margin:0 0 24px; color:#666; font-size:15px; line-height:1.55; text-wrap:pretty; }
.bsu-side .bsa-link { display:inline-flex; align-items:center; gap:12px; align-self:flex-start; padding:7px 7px 7px 15px; border:1px solid #e0e0dd; border-radius:7px; background:#fff; color:#161616; font-size:14px; text-decoration:none; transition:border-color .2s ease; }
.bsu-side .bsa-link:hover { border-color:#161616; }
.bsu-side .bsa-link:focus-visible { outline:2px solid #161616; outline-offset:3px; }
.bsu-side .bsa-link span { display:grid; place-items:center; width:22px; height:22px; border-radius:5px; background:#161616; }
.bsu-side .bsa-link span::before { content:""; width:6px; height:6px; border-top:1.5px solid #fff; border-right:1.5px solid #fff; rotate:45deg; translate:-1px 0; }
.bsu-results { margin:0; }
.bsu-results div { padding:18px 0 20px; border-top:1px solid #e4e4e1; }
.bsu-results div:first-child { border-top-color:#161616; }
.bsu-results dt { font:300 clamp(44px,3.8vw,56px)/1 "Progress Favorit",Arial,sans-serif; letter-spacing:-.045em; }
.bsu-results dd { margin:8px 0 0; color:#666; font-size:14px; line-height:1.4; }
.bsa-work { display:flex; flex-direction:column; opacity:0; translate:0 calc(var(--u)*8); scale:.98; border-color:#dadde2; box-shadow:0 calc(var(--u)*6) calc(var(--u)*22) #00000012; color:#1b1b1b; font-size:calc(var(--u)*7.8); transition:opacity .45s ease,translate .45s ease,scale .45s ease,border-color .3s ease,box-shadow .3s ease; }
.bsa-work.is-on { opacity:1; translate:0 0; scale:1; }
.bsa-work.is-active { border-color:#7fa6f2; box-shadow:0 0 0 calc(var(--u)*2.5) #dbe6fd,0 calc(var(--u)*8) calc(var(--u)*26) #0000001a; }
.bsa-work h4 { display:flex; align-items:center; gap:calc(var(--u)*4); color:#6f6f6f; }
.bsa-work h4 img { width:calc(var(--u)*9); height:calc(var(--u)*9); object-fit:contain; }
.bsa-work figure { flex:1; min-height:0; margin:0; overflow:hidden; border:1px solid #ececec; border-radius:calc(var(--u)*3); }
.bsa-work figure img { display:block; width:100%; height:100%; object-fit:cover; object-position:top left; }
.bsa-work strong { display:block; margin:calc(var(--u)*-2) 0 calc(var(--u)*8); color:#161616; font-size:calc(var(--u)*17); font-weight:500; letter-spacing:-.02em; }
.bsa-work dl { display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u)*6) calc(var(--u)*12); margin:0; }
.bsa-work dt { color:#8b8b8b; }
.bsa-work dd { margin:0; text-align:right; }
.bsa-pill { align-self:flex-start; margin:auto 0 0; padding:calc(var(--u)*3) calc(var(--u)*7); border-radius:99px; background:#e8f5ec; color:#17703a; font-size:calc(var(--u)*7); font-weight:500; }
.bsa-pill.warn { background:#fdf1dc; color:#9a5b00; }
.bsa-person { display:flex; align-items:center; gap:calc(var(--u)*6); margin-bottom:calc(var(--u)*7); }
.bsa-person img { width:calc(var(--u)*20); height:calc(var(--u)*20); border-radius:50%; object-fit:cover; }
.bsa-person span { display:grid; flex:1; color:#8b8b8b; font-size:calc(var(--u)*6.8); }
.bsa-person b { color:#1b1b1b; font-size:calc(var(--u)*7.8); font-weight:600; }
.bsa-person time { align-self:flex-start; color:#8b8b8b; font-size:calc(var(--u)*6.5); }
.bsa-subject { margin:0 0 calc(var(--u)*3); font-weight:600; }
.bsa-body { margin:0 0 calc(var(--u)*8); color:#555; line-height:1.4; }
.bsa-attach { display:flex; align-items:center; gap:calc(var(--u)*6); width:max-content; margin-top:auto; padding:calc(var(--u)*4); border:1px solid #e3e3e3; border-radius:calc(var(--u)*4); }
.bsa-attach img { width:calc(var(--u)*26); height:calc(var(--u)*32); object-fit:cover; object-position:top; border:1px solid #eee; }
.bsa-attach span { display:grid; font-weight:500; }
.bsa-attach small { color:#8b8b8b; font-weight:400; }
.bsa-checks { display:grid; gap:calc(var(--u)*7); margin:0 0 calc(var(--u)*9); padding:0; list-style:none; }
.bsa-checks li { display:flex; align-items:center; gap:calc(var(--u)*6); }
.bsa-checks img { width:calc(var(--u)*20); height:calc(var(--u)*20); border-radius:50%; object-fit:cover; }
.bsa-checks span { display:grid; flex:1; font-weight:500; }
.bsa-checks small { color:#8b8b8b; font-size:calc(var(--u)*6.5); font-weight:400; }
.bsa-checks em { padding:calc(var(--u)*2) calc(var(--u)*6); border-radius:99px; background:#e8f5ec; color:#17703a; font-size:calc(var(--u)*6.5); font-style:normal; font-weight:500; }
.bsa-table { width:100%; margin-bottom:calc(var(--u)*9); border-collapse:collapse; font-size:calc(var(--u)*7); }
.bsa-table td { padding:calc(var(--u)*4) calc(var(--u)*3); border-bottom:1px solid #f0f0f0; white-space:nowrap; }
.bsa-table td:last-child { text-align:right; }
.bsa-table tr.flag td { background:#fff4d6; font-weight:600; }
.bsa-agent { overflow:hidden; background:#fff; border:1px solid #cdd2d8; border-radius:calc(var(--u)*6); box-shadow:0 calc(var(--u)*4) calc(var(--u)*18) #0000000f; }
.bsa-scene { position:absolute; inset:calc(var(--u)*12) calc(var(--u)*13); opacity:0; transition:opacity .4s ease; }
.bsa-scene.is-on { opacity:1; }
.bsa-scene h4 { margin:0 0 calc(var(--u)*11); color:#161616; font-size:calc(var(--u)*9.5); font-weight:600; letter-spacing:-.01em; }
.bsa-scene h4::after { content:" \2304"; color:#999; font-weight:400; }
.bsa-user { width:max-content; max-width:80%; margin:0 0 calc(var(--u)*12) auto; padding:calc(var(--u)*6) calc(var(--u)*8); border-radius:calc(var(--u)*6); background:#efece6; color:#1b1b1b; font-size:calc(var(--u)*8); line-height:1.35; opacity:0; transition:opacity .35s ease; }
.bsa-user.on { opacity:1; }
.bsa-scene ol { display:grid; gap:calc(var(--u)*9); margin:0; padding:0; list-style:none; }
.bsa-scene li { display:flex; gap:calc(var(--u)*6); color:#3a3a3a; font-size:calc(var(--u)*8.2); line-height:1.38; opacity:0; translate:0 calc(var(--u)*4); transition:opacity .35s ease,translate .35s ease; }
.bsa-scene li.on { opacity:1; translate:0 0; }
.bsa-scene li::before { content:""; flex:none; width:calc(var(--u)*7); height:calc(var(--u)*7); margin-top:calc(var(--u)*2.5); border:1px solid #a8a8a8; border-radius:calc(var(--u)*2); }
.bsa-scene li.done { color:#161616; font-weight:500; }
.bsa-scene li.done::before { content:"\2713"; display:grid; place-items:center; width:calc(var(--u)*8); height:calc(var(--u)*8); margin-top:calc(var(--u)*2); border:0; border-radius:50%; background:#17703a; color:#fff; font-size:calc(var(--u)*5.5); font-weight:700; line-height:1; }
.bsa-scene li > span { display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--u)*4); }
.bsa-chip { display:inline-flex; align-items:center; gap:calc(var(--u)*3); padding:calc(var(--u)*1.5) calc(var(--u)*5); border:1px solid #e2e2e2; border-radius:calc(var(--u)*3); background:#fafafa; color:#2b2b2b; font-size:calc(var(--u)*7); font-weight:500; }
.bsa-chip img { width:calc(var(--u)*8); height:calc(var(--u)*8); object-fit:contain; }
@media(max-width:767px) {
 body:not([data-banking-demo]) .home-solutions .bank-stack-story { height:min(200vh,1600px); margin-bottom:72px; }
 .bank-stack-stage { top:80px; height:calc(100dvh - 80px); }
 .bank-stack-copy { inset:28px 20px auto; }
 .bank-stack-copy h3 { font-size:34px; line-height:1.08; }
 .bank-stack-copy p { font-size:14px; margin-top:14px; }
 .bank-stack-canvas { top:150px; width:100%; }
 .bank-stack-art { --u:calc(100cqh / 860); }
 .bsu-tabs { display:flex; gap:22px; margin:20px -20px 0; padding:0 20px; overflow-x:auto; scrollbar-width:none; border-bottom:0; }
 .bsu-tabs::-webkit-scrollbar { display:none; }
 .bsu-tab { padding-bottom:10px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
 body:not([data-banking-demo]) .home-solutions .bank-stack-story { height:auto; }
 .bank-stack-stage { position:relative; top:0; }
}

.solution-film-layout { display:grid; grid-template-columns:minmax(230px,.82fr) minmax(0,2.68fr); gap:40px; align-items:start; }
.solution-film-sticky { position:sticky; top:max(96px,calc(50svh - 130px)); display:grid; }
.solution-film-sticky .solution-film-copy { grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity 300ms ease,transform 300ms ease,visibility 300ms; }
.solution-film-sticky .solution-film-copy[data-active="true"] { opacity:1; visibility:visible; transform:none; }
.solution-film-list { display:grid; gap:160px; min-width:0; }
.solution-film-row { min-width:0; }
.solution-film-row > .solution-film-copy { display:none; }
.solution-film-copy { max-width:310px; }
.solution-film-copy h3 { margin:0 0 16px; font:400 25px/1.25 "Progress Favorit",Arial,sans-serif; letter-spacing:-.025em; text-wrap:pretty; }
.solution-film-copy p { margin:0; font-size:15px; line-height:1.6; letter-spacing:-.015em; color:#777; }
.solution-film { position:relative; min-width:0; margin:0; overflow:hidden; background:#fff; border:1px solid #e2e2df; border-radius:12px; box-shadow:0 1px 2px #0000000a,0 30px 60px -32px #00000029; }
/* Live product window: real interface type and spacing, scenes played while the window is on screen. */
.pw { --ink:#252826; --muted:#838983; --line:#e6e9e6; --soft:#f6f7f6; --green:#43765a; --green-bg:#edf4ef; --blue:#527ca1; display:grid; grid-template-columns:224px minmax(0,1fr); height:clamp(520px,40vw,580px); color:var(--ink); font:400 14px/1.4 Inter,Arial,sans-serif; letter-spacing:-.005em; text-align:left; }
.pw b { font-weight:600; }
.pw small { display:block; color:var(--muted); font-size:12px; line-height:1.4; }
.pw-ic { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); }
.pw-logo { width:20px; height:20px; flex:none; object-fit:contain; }
.pw-side { display:flex; flex-direction:column; min-width:0; background:#fbfcfb; border-right:1px solid var(--line); }
.pw-org { display:flex; align-items:center; gap:10px; height:58px; padding:0 16px; border-bottom:1px solid var(--line); }
.pw-org-mark { width:26px; height:26px; }
.pw-org b { font-size:15.5px; font-weight:500; letter-spacing:-.02em; }
.pw-org .pw-ic { margin-left:auto; width:14px; height:14px; }
.pw-search { display:flex; align-items:center; gap:10px; margin:14px 12px 4px; padding:6px 8px; color:var(--muted); font-size:13px; }
.pw-nav,.pw-list { margin:0; padding:0; list-style:none; }
.pw-nav li { display:flex; align-items:center; gap:10px; margin:1px 8px; padding:7px 10px; border-radius:6px; font-size:13.5px; }
.pw-nav li.is-on { background:#eef0ed; }
.pw-label { margin:18px 18px 8px; color:#999f99; font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.pw-list li { display:flex; align-items:flex-start; gap:10px; margin:1px 8px; padding:9px 10px; border-radius:7px; font-size:13px; }
.pw-list li .pw-ic { margin-top:1px; width:15px; height:15px; }
.pw-list li.is-on { background:#eef0ed; font-weight:600; }
.pw-list small { font-weight:400; font-size:11.5px; }
.pw-connected { margin-top:auto; padding:2px 0 16px; border-top:1px solid var(--line); }
.pw-connected span { display:flex; gap:12px; padding:0 18px; }
.pw-connected .pw-logo { width:18px; height:18px; }
.pw-main { position:relative; min-width:0; overflow:hidden; }
.pw-scene { position:absolute; inset:0; padding:0 28px 24px; opacity:0; visibility:hidden; transition:opacity .22s ease,visibility 0s linear .22s; }
.pw-scene.is-on { opacity:1; visibility:visible; transition:opacity .4s ease .22s; }
.pw-head { margin:0 -28px 22px; padding:0 28px; border-bottom:1px solid var(--line); }
.pw-title { display:flex; align-items:center; gap:10px; height:58px; }
.pw-title b { font-size:15.5px; letter-spacing:-.015em; }
.pw-title .pw-ic:last-child { margin-left:auto; }
.pw-tabs { display:flex; gap:34px; }
.pw-tabs span { padding:8px 0 11px; border-bottom:2px solid transparent; color:var(--muted); font-size:13px; }
.pw-tabs span.is-on { border-color:var(--ink); color:var(--ink); font-weight:600; }
.pw-h { margin:0 0 6px; font:500 22px/1.2 Inter,Arial,sans-serif; letter-spacing:-.025em; }
.pw-h-icon { display:flex; align-items:center; gap:10px; }
.pw-sub { margin:0 0 18px; color:var(--muted); font-size:13px; }
.pw-eyebrow { margin:6px 0 16px; color:var(--muted); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.pw-hrow { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.pw-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; background:var(--green-bg); color:var(--green); font-size:12px; font-weight:600; white-space:nowrap; }
.pw-pill .pw-ic { width:13px; height:13px; color:var(--green); stroke-width:2.2; }
.pw-muted { color:var(--muted); font-size:13px; }
.pw-good { color:var(--green); }
.pw-blue { color:var(--blue); }
.pw-ok { color:var(--green); stroke-width:2.2; }
.pw-table { border-top:0; }
.pw-tr { display:grid; grid-template-columns:minmax(0,1fr) 170px 20px; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.pw-table-2 .pw-tr { grid-template-columns:minmax(0,1fr) 200px; }
.pw-th { padding:0 0 8px; color:var(--muted); font-size:11.5px; }
.pw-tr-mark { margin:0 -10px; padding:12px 10px; border-radius:6px; border-bottom-color:transparent; background:#f1f4f7; }
.pw-src { display:flex; align-items:center; gap:12px; min-width:0; }
.pw-src .pw-logo { width:22px; height:22px; }
.pw-src b { font-size:14px; }
.pw-card { padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.pw-card-soft { background:#f8f9f7; }
.pw-card-title { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:14px; font-weight:600; }
.pw-card-title .pw-logo { width:18px; height:18px; }
.pw-quote { margin:10px 0 12px; font-size:15px; line-height:1.5; }
.pw-flag { margin:0 0 12px; padding:10px 12px; border-radius:6px; background:#f0f4f0; font-size:13px; }
.pw-rule { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.pw-body { margin:0 0 14px; font-size:14px; line-height:1.55; }
.pw-big { margin:4px 0 8px; font-size:18px; letter-spacing:-.015em; }
.pw-split { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; }
.pw-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:13px; }
.pw-kv dt { color:var(--muted); }
.pw-kv dd { margin:0; }
.pw-kv-rows { padding-top:12px; border-top:1px solid var(--line); }
.pw-kv-rows dd { text-align:right; }
.pw-docs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.pw-doc { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.pw-doc .pw-logo { width:22px; height:22px; }
.pw-doc b { display:block; font-size:13.5px; }
.pw-steps,.pw-progress,.pw-checks { margin:0; padding:0; list-style:none; }
.pw-steps li { display:grid; grid-template-columns:34px minmax(0,1fr) 22px; align-items:center; gap:4px; margin-bottom:10px; padding:14px 16px; border:1px solid var(--line); border-radius:9px; }
.pw-n { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.pw-steps b { font-size:15px; }
.pw-steps small { font-size:13px; }
.pw-progress li { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:9px; padding:13px 16px; border:1px solid var(--line); border-radius:9px; }
.pw-progress i { display:grid; place-items:center; width:15px; height:15px; border:1.5px solid #b9c1bb; border-radius:50%; font-style:normal; transition:background-color .3s ease,border-color .3s ease; }
.pw-progress li.running i { border-color:#829486; background:#829486; }
.pw-progress li.complete i { width:20px; height:20px; border:0; background:var(--green-bg); }
.pw-progress li.complete i::before { content:"\2713"; color:var(--green); font-size:11px; font-weight:700; }
.pw-progress em { color:var(--muted); font-size:12px; font-style:normal; }
.pw-progress li.running em { color:#607367; }
.pw-progress li.complete em { color:var(--green); }
.pw-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pw-compare div { padding:16px 18px; border:1px solid var(--line); border-radius:9px; background:#faf8f7; }
.pw-compare b { display:block; margin-top:8px; font-size:26px; font-weight:400; letter-spacing:-.03em; }
.pw-compare-new { background:#f4f7f3 !important; }
.pw-compare-new b { color:var(--green); }
.pw-section { margin:22px 0 4px; font-size:15px; font-weight:600; }
.pw-checks li { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.pw-checks .pw-ic { margin-top:2px; }
.pw-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.pw button { padding:9px 20px; border:0; border-radius:7px; background:var(--ink); color:#fff; font:500 13.5px/1.2 Inter,Arial,sans-serif; cursor:default; transition:background-color .2s ease,color .2s ease; }
.pw button.is-pressed { background:#59625a; }
.pw button.is-done { background:var(--green-bg); color:var(--green); }
.pw-note { position:absolute; right:28px; bottom:24px; left:28px; display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:9px; background:var(--soft); color:#656e67; font-size:13.5px; }
.pw-note-mark { width:22px; height:22px; flex:none; }
.pw-note-good { background:#f0f6f0; color:var(--green); font-weight:500; }
.pw-composer { position:absolute; right:28px; bottom:24px; left:28px; padding:12px 14px 10px; border:1px solid #bbc5bd; border-radius:10px; background:#fff; }
.pw-typed,.pw-status { min-height:21px; margin:0 0 8px; font-size:14.5px; }
.pw-typed span::after { content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--ink); animation:pw-caret 1s steps(1) infinite; }
@keyframes pw-caret { 50% { opacity:0; } }
.pw-status { display:none; color:#737d75; }
.pw-composer.is-sent .pw-typed { display:none; }
.pw-composer.is-sent .pw-status:not(.pw-done) { display:block; }
.pw-composer.is-finished .pw-status:not(.pw-done) { display:none; }
.pw-composer.is-finished .pw-done { display:block; color:var(--green); }
.pw-composer-foot { display:flex; align-items:center; justify-content:space-between; }
.pw-composer-foot button { padding:7px 18px; }
.pw-correction-label { position:absolute; bottom:122px; left:28px; color:var(--muted); font-size:12px; }
.pw [data-at] { opacity:0; translate:0 6px; transition:opacity .45s ease,translate .45s ease; }
.pw [data-at].on { opacity:1; translate:0 0; }
.pw-composer .pw-done[data-at] { opacity:1; translate:none; }
.solution-film-description { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:1023px) {
 body:not([data-banking-demo]) main > section.home-solutions { padding-top:40px; padding-bottom:72px; }
 .home-solutions-heading { margin-bottom:56px; }
 .solution-film-list { gap:72px; }
 .solution-film-layout { display:block; }
 .solution-film-sticky { display:none; }
 .solution-film-row > .solution-film-copy { display:block; margin-bottom:24px; }
 .solution-film-copy { max-width:600px; }
}
@media(max-width:600px) {
 body:not([data-banking-demo]) main > section.home-solutions { padding-inline:24px; }
 .solution-film { border-radius:10px; }
 .pw { grid-template-columns:minmax(0,1fr); height:500px; font-size:13px; }
 .pw-side { display:none; }
 .pw-scene { padding:0 16px 16px; }
 .pw-head { margin:0 -16px 16px; padding:0 16px; }
 .pw-tabs { gap:22px; }
 .pw-h { font-size:18px; }
 .pw-tr { grid-template-columns:minmax(0,1fr) auto; }
 .pw-tr > :nth-child(2):not(:last-child) { display:none; }
 .pw-table-2 .pw-tr { grid-template-columns:minmax(0,1fr) auto; }
 .pw-table-2 .pw-tr > :nth-child(2) { display:block; }
 .pw-split,.pw-docs,.pw-compare { grid-template-columns:minmax(0,1fr); }
 .pw-split > :nth-child(2),.pw-docs > :nth-child(2) { display:none; }
 .pw-note,.pw-composer { right:16px; bottom:16px; left:16px; }
 .pw-correction-label { left:16px; bottom:112px; }
}

/* Results and connected tools share a single, quiet canvas. */
.home-performance { padding:100px var(--canvas-inset) 112px; background:#fff; color:#242424; }
.performance-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:start; }
.performance-copy h2 { margin:0; font:400 clamp(32px,3vw,44px)/1.15 "Progress Favorit",Arial,sans-serif; letter-spacing:-.035em; text-wrap:balance; }
.performance-lead { max-width:430px; margin:22px 0 0; color:#686868; font-size:clamp(17px,1.35vw,19px); font-weight:400; line-height:1.55; letter-spacing:-.01em; }
.performance-principles { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:430px; margin-top:48px; }
.performance-principles>div { padding-top:18px; border-top:1px solid #dededb; }
.performance-principles strong { display:block; font-size:clamp(28px,2.5vw,36px); font-weight:400; letter-spacing:-.025em; line-height:1.15; }
.performance-principles span { display:block; margin-top:10px; font-size:14px; line-height:1.5; color:#686868; }
.performance-tabs { display:flex; gap:6px; margin-bottom:12px; }
.performance-tabs button { border:1px solid #e2e2e2; border-radius:6px; padding:8px 13px; background:#fff; color:#777; font:400 13px/1.4 Inter,Arial,sans-serif; cursor:pointer; }
.performance-tabs button[aria-selected=true] { border-color:#819789; color:#334f40; }
.performance-tabs button:focus-visible { outline:2px solid #334f40; outline-offset:3px; }
.performance-chart { border:1px solid #e7e7e7; border-radius:9px; overflow:hidden; padding:12px 12px 0; }
.performance-legend { display:flex; gap:16px; flex-wrap:wrap; color:#777; font-size:11px; }
.performance-legend span { display:flex; align-items:center; gap:6px; }
.performance-legend i { width:5px; height:5px; border-radius:50%; background:#445f4f; }
.performance-legend span+span i { background:#b7b6b1; }
.performance-chart svg { display:block; width:100%; height:auto; margin-top:12px; overflow:visible; }
.performance-grid path { fill:none; stroke:#ececea; stroke-dasharray:2 5; }
.performance-baseline { fill:none; stroke:#b7b6b1; stroke-width:1.5; stroke-dasharray:5 5; }
.performance-curve { fill:none; stroke:#445f4f; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; }
.performance-endpoint { fill:#445f4f; }
.performance-axis,.performance-direction { fill:#999; font:11px Inter,Arial,sans-serif; }
.performance-caption { margin:14px 0 0; font-size:13px; line-height:1.5; color:#666; }
.performance-disclosure { margin:7px 0 0; font-size:11px; color:#999; }
.performance-integrations { margin-top:72px; padding-top:40px; border-top:1px solid #dededb; }
.performance-integrations-heading { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; margin-bottom:28px; }
.performance-integrations-heading h3 { max-width:390px; margin:0; font-size:clamp(27px,2.3vw,34px); font-weight:400; line-height:1.2; letter-spacing:-.03em; text-wrap:balance; }
.performance-integrations-heading p { margin:2px 0 0; max-width:470px; color:#686868; font-size:16px; line-height:1.6; }
.performance-integration-list { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); list-style:none; padding:0; margin:0; border-top:1px solid #eee; }
.performance-integration-list li { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:13px; min-width:0; min-height:112px; padding:18px 5px; border-bottom:1px solid #eee; }
.performance-integration-list img { width:28px; height:28px; object-fit:contain; }
.performance-integration-list span { color:#666; font-size:12px; text-align:center; }
@media(max-width:900px) {
 .performance-top { grid-template-columns:1fr; gap:44px; }
 .performance-principles { margin-top:36px; }
 .performance-integrations-heading { grid-template-columns:1fr; gap:18px; }
 .performance-integration-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .home-performance { padding-top:64px; padding-bottom:72px; }
 .performance-integrations { margin-top:48px; padding-top:30px; }
}
@media(max-width:480px) {
 .performance-integration-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .performance-legend { gap:8px; font-size:9px; }
 .performance-principles { gap:24px; }
 .performance-principles span { font-size:12px; }
}

.perf { color:#161616; font-family:Inter,Arial,sans-serif; }
.perf-tabs { display:inline-flex; gap:32px; margin-bottom:28px; border-bottom:1px solid #e4e4e1; }
.perf-tab { position:relative; padding:0 0 13px; border:0; background:none; color:#8a8a8a; font:400 15px/1.2 Inter,Arial,sans-serif; cursor:pointer; transition:color .25s ease; }
.perf-tab::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:#161616; scale:0 1; transform-origin:0 50%; transition:scale .4s cubic-bezier(.22,1,.36,1); }
.perf-tab:hover,.perf-tab[aria-selected="true"] { color:#161616; }
.perf-tab[aria-selected="true"]::after { scale:1 1; }
.perf-tab:focus-visible { outline:2px solid #161616; outline-offset:6px; border-radius:2px; }
.perf-panel { display:none; }
.perf-panel.is-on { display:block; animation:perf-in .45s ease both; }
@keyframes perf-in { from { opacity:0; } }
.perf-stat { display:flex; align-items:baseline; gap:14px; margin:0 0 6px; }
.perf-stat b { font:300 clamp(40px,4vw,56px)/1 "Progress Favorit",Arial,sans-serif; letter-spacing:-.045em; }
.perf-stat span { max-width:240px; color:#666; font-size:14px; line-height:1.4; }
.perf-plot { position:relative; height:300px; }
.perf-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.perf-grid path { stroke:#ececea; stroke-width:1; vector-effect:non-scaling-stroke; }
.perf-baseline { fill:none; stroke:#9a9a9a; stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.perf-line { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

.perf-line-context { stroke:#161616; stroke-width:2.25; }
.perf-line-cowork { stroke:#9d9d9a; stroke-width:1.5; }
.perf-line-codex { stroke:#c9c9c6; stroke-width:1.5; }
.perf-area { fill:#16161609; }
.perf-y,.perf-x { position:absolute; color:#9a9a9a; font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.perf-y { left:0; translate:0 -50%; }
.perf-x { top:calc(86% + 12px); translate:-50% 0; }
.perf-dot { position:absolute; width:9px; height:9px; translate:-50% -50%; border-radius:50%; background:#c9c9c6; }
.perf-dot-cowork { background:#9d9d9a; }
.perf-dot-context { width:11px; height:11px; background:#161616; box-shadow:0 0 0 5px #16161614; }
.perf-end { position:absolute; left:calc(70% + 18px); right:0; display:grid; translate:0 -50%; color:#8a8a8a; font-size:12px; line-height:1.3; }
.perf-end b { color:#9d9d9a; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; }
.perf-end-context,.perf-end-context b { color:#161616; }
.perf-end-context b { font-size:17px; font-weight:600; }
.perf-end-baseline b { font-weight:400; }
.perf-end-cowork { translate:0 calc(-50% - 12px); }
.perf-end-codex { translate:0 calc(-50% + 8px); }
.perf-legend { display:none; gap:6px; margin:18px 0 0; padding:0; list-style:none; color:#666; font-size:12.5px; }
.perf-legend li { display:flex; align-items:center; gap:8px; }
.perf-legend li::before { content:""; width:14px; height:2px; background:#c9c9c6; }
.perf-legend-context::before { background:#161616 !important; }
.perf-legend-cowork::before { background:#9d9d9a !important; }
.perf-caption { max-width:560px; margin:22px 0 0; color:#8a8a8a; font-size:13px; line-height:1.55; }
.perf-panel.is-live .perf-dot-context { animation:perf-pulse 1.4s ease-out infinite; }
.perf-panel.is-live .perf-end { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.perf-panel.is-live .perf-end-cowork,.perf-panel.is-live .perf-end-codex { translate:0 -50%; }
@keyframes perf-pulse { 0% { box-shadow:0 0 0 0 #16161633; } 100% { box-shadow:0 0 0 12px #16161600; } }
@media(max-width:600px) {
 .perf-tabs { gap:24px; }
 .perf-plot { height:260px; }
 .perf-end { left:calc(70% + 10px); font-size:10.5px; }
 .perf-end b { font-size:13px; }
 .perf-end-context b { font-size:14px; }
 .perf-stat { flex-wrap:wrap; gap:8px 12px; }
 .perf-end > span { display:none; }
 .perf-end-cowork,.perf-end-codex { translate:0 -50%; }
 .perf-legend { display:grid; }
}
@media(prefers-reduced-motion:reduce) {
 .perf-panel.is-on { animation:none; }
}
.performance-source { margin:8px 0 0; color:#888; font-size:11px; line-height:1.5; }
.performance-source a { color:inherit; text-decoration:underline; text-underline-offset:2px; }



/* Match the banking integration hover: lift only the tile under the pointer. */
.performance-integration-list li {
 position:relative;
 transform:translateY(0) scale(1);
 transition:transform 200ms ease-out,box-shadow 180ms ease,border-color 180ms ease;
}
@media(hover:hover) and (pointer:fine) {
 .performance-integration-list li:hover {
  z-index:2;
  transform:translateY(-40px) scale(1.1);
  border-color:rgba(23,24,23,.16);
  border-radius:22px;
  background:linear-gradient(145deg,#fff 8%,#f5f5f3 100%);
  box-shadow:0 26px 42px rgba(23,24,23,.12),inset 0 1px 0 #fff;
 }
 .performance-integration-list li:nth-child(8n + 1):hover,
 .performance-integration-list li:nth-child(8n):hover { transform:translateY(-40px) scale(1.04); }
}
@media(prefers-reduced-motion:reduce) {
 .performance-integration-list li { transition:none; }
 .performance-integration-list li:hover { transform:none; }
}

/* Banking's dimensional integration tiles, with independent rotating app faces. */
.performance-integration-cloud { position:relative; perspective:1200px; perspective-origin:50% 50%; padding:24px 0 36px; overflow:hidden; }
.performance-integration-list { width:86%; max-width:1080px; margin:0 auto; gap:clamp(10px,1.1vw,16px); border:0; transform:rotateX(22deg); transform-style:preserve-3d; }
.performance-integration-list li { height:clamp(68px,6.2vw,102px); min-height:0; padding:0; border:1px solid rgba(23,24,23,.07); border-radius:22px; background:linear-gradient(145deg,#fff 8%,#f5f5f3 100%); box-shadow:0 20px 38px rgba(23,24,23,.09),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(23,24,23,.03); overflow:visible; perspective:700px; }
.performance-integration-list .integration-face { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; height:100%; backface-visibility:hidden; }
.performance-integration-list img { width:48%; height:52%; filter:saturate(1.08) drop-shadow(0 7px 10px rgba(23,24,23,.13)); }
.performance-integration-list span { font-size:10px; line-height:1.1; }
@media(hover:hover) and (pointer:fine) {
 .performance-integration-list li:hover { transform:translateY(-40px) scale(1.1); transition-duration:200ms; transition-timing-function:ease-out; }
 .performance-integration-list li:nth-child(8n + 1):hover,.performance-integration-list li:nth-child(8n):hover { transform:translateY(-40px) scale(1.04); }
}
@media(max-width:900px) { .performance-integration-list { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:680px) {
 .performance-integration-cloud { perspective:none; padding:24px 0; }
 .performance-integration-list { width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; transform:none; }
 .performance-integration-list li { height:auto; aspect-ratio:1; border-radius:14px; }
 .performance-integration-list span { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { .performance-integration-list li:hover { transform:none; } }
.performance-integration-list img { width:58%; height:62%; }
.performance-integration-list span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Security and control continue the homepage's white editorial canvas. */
.home-security-editorial,.home-control {padding:90px var(--canvas-inset);background:#fff;color:#242424;font-family:"Progress Favorit",Arial,sans-serif;}
.home-security-editorial {border-top:1px solid #eee;position:relative;overflow:hidden;padding-top:96px;padding-bottom:88px;background:radial-gradient(ellipse at 50% 36%,#eee 0, #f8f8f8 25%,#fff 61%);}
.home-security-editorial .bse-shell {max-width:1280px;margin:auto;}
.home-security-editorial .bse-heading {text-align:center;max-width:780px;margin:auto;}
.home-security-emblem {position:relative;width:206px;height:246px;margin:28px auto 26px;perspective:600px;}
.home-security-emblem::after {content:"";position:absolute;bottom:-2px;left:24%;width:52%;height:12px;border-radius:50%;background:#111;filter:blur(12px);opacity:.13;}
.home-security-emblem>svg {position:relative;z-index:1;width:100%;height:100%;overflow:visible;filter:drop-shadow(12px 16px 12px #00000018);}
.home-security-editorial .bse-eyebrow,.control-eyebrow {font-size:13px;color:#666;margin:0 0 20px;}
.home-security-editorial h2,.home-control h2 {font-size:clamp(34px,3.5vw,54px);font-weight:300;letter-spacing:-.035em;line-height:1.08;margin:0;text-wrap:balance;}
.home-security-editorial .bse-original-copy {max-width:625px;margin:0 auto;color:#626262;font-size:15px;line-height:1.65;}
.home-security-editorial .bse-original-copy p {margin:12px 0;}
.home-security-editorial .bse-grid {display:grid;grid-template-columns:repeat(5,1fr);margin:48px auto 0;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;}
.home-security-editorial .bse-card {text-align:left;padding:26px 24px;border-left:1px solid #d9d9d9;}
.home-security-editorial .bse-card:first-child {border-left:0;}
.home-security-editorial .bse-icon {width:30px;height:30px;fill:none;stroke:#454545;stroke-width:1.4;margin-bottom:22px;}
.home-security-editorial .bse-card h3 {font-size:18px;line-height:1.3;font-weight:300;margin:0;}
.home-security-editorial .bse-card p {font-size:12px;line-height:1.5;color:#777;margin:12px 0 0;}
@media(max-width:700px) {
 .home-security-editorial {padding:64px 24px;}
 .home-security-emblem {width:172px;height:205px;margin:24px auto;}
 .home-security-editorial .bse-grid {grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;}
 .home-security-editorial .bse-card {padding:22px 16px;border-bottom:1px solid #d9d9d9;}
 .home-security-editorial .bse-card:nth-child(odd) {border-left:0;}
 .home-security-editorial .bse-card:last-child {grid-column:1/-1;border-bottom:0;}
}
/* Reference control layout: one pointer-following marker and four contiguous tiers. */
.home-control {border-top:1px solid #eee;padding:90px var(--canvas-inset) 100px;}
.home-control-heading {text-align:center;max-width:950px;margin:0 auto 64px;}
.home-control-heading .control-eyebrow {margin-bottom:12px;color:#555;font-size:14px;}
.home-control h2 {font-size:clamp(38px,3.34vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.04em;}
.home-control-heading>p:last-child {max-width:640px;margin:26px auto 0;color:#666;font-size:16px;line-height:1.5;}
.control-map {position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:1080px;margin:auto;}
.control-rail {position:absolute;top:48px;left:0;right:0;height:12px;pointer-events:none;}
.control-rail i {position:absolute;top:0;height:12px;width:1px;background:#555;}
.control-end {position:absolute;top:0;left:-4px;width:8px;height:12px;background:#333;}
.control-end:nth-of-type(2) {left:auto;right:-4px;}
.control-marker {position:absolute;left:calc(var(--marker-x)*100%);top:50%;transform:translate(-50%,-50%);width:116px;height:50px;border-radius:25px;background:#e5e5e5;overflow:hidden;color:#222;transition:background 300ms,color 300ms;}
.control-marker-strip {display:flex;width:464px;height:50px;transform:translateX(calc(var(--tier)*-116px));transition:transform 500ms cubic-bezier(.76,0,.24,1);}
.control-marker-strip span {display:grid;place-items:center;width:116px;flex-shrink:0;font-size:20px;font-weight:500;line-height:1;white-space:nowrap;}
.control-map[data-mode=ghost] .control-marker {background:#fff;box-shadow:inset 0 0 0 1px #555;}
.control-map[data-mode=engaged][data-tier="1"] .control-marker {background:#ccc;}
.control-map[data-mode=engaged][data-tier="2"] .control-marker {background:#222;color:#fff;}
.control-stage {grid-row:1;padding-top:140px;}
.control-stage[data-stage="0"]{grid-column:1}.control-stage[data-stage="1"]{grid-column:2}.control-stage[data-stage="2"]{grid-column:3}.control-stage[data-stage="3"]{grid-column:4}
.control-stage-button {appearance:none;border:0;background:none;text-align:left;color:inherit;font:inherit;width:100%;padding:0;cursor:default;}
.control-stage h3 {font-size:20px;font-weight:600;letter-spacing:-.035em;line-height:1;height:38px;margin:0 0 40px;}
.control-stage:last-of-type h3 {padding:0;}
.control-stage ul {padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:3px;}
.control-stage li {font-size:14px;font-weight:400;color:#555;line-height:18.2px;min-height:30px;padding:5px 8px;border-bottom:1px solid #ccc;transition:background 500ms ease-out,border-color 500ms ease-out;}
.control-stage.is-active li {background:#ededed;border-color:transparent;}
.control-mobile-sequence{display:none;}
@media(max-width:1100px){.control-map{max-width:none}.control-stage li{font-size:13px}.control-stage h3{font-size:19px}}
@media(max-width:767px){
.home-security-editorial{padding:60px 24px}.home-security-editorial h2{font-size:clamp(28px,7.7vw,34px)}.home-control{padding:60px var(--canvas-inset)}
.home-security-editorial .bse-grid{grid-template-columns:1fr 1fr;gap:0}.home-security-editorial .bse-card:nth-child(odd){border-left:0}.home-security-editorial .bse-card:last-child{grid-column:1/-1}
.home-control-heading{margin-bottom:48px}.home-control h2{font-size:38px}.home-control-heading>p:last-child{font-size:16px}
.control-map{display:block}.control-map>.control-stage,.control-rail{display:none}
.control-mobile-sequence{display:block;height:350svh}.control-mobile-panel{position:sticky;top:100px;background:#fff;padding:24px 0 40px}
.control-mobile-panel h3{font-size:24px;font-weight:500;line-height:1.1;margin:0 0 24px}.control-mobile-panel ul{padding:0;margin:0;list-style:none}
.control-mobile-panel li{padding:8px;border-bottom:1px solid #ccc;font-size:14px;line-height:1.4;opacity:0;transform:translateX(-32px);transition:opacity 500ms,transform 500ms;}
.control-mobile-panel li[data-on]{opacity:1;transform:none;transition-delay:calc(var(--delay)*90ms)}
}
@media(prefers-reduced-motion:reduce){.control-marker,.control-marker-strip,.control-stage li,.control-mobile-panel li{transition:none}.control-mobile-sequence{height:auto}.control-mobile-panel{position:static}.control-mobile-panel li{opacity:1;transform:none}}

/* Deployment is a full-width photo band; FAQ follows as its own open, two-column section. */
.home-deployment-faq{display:block;max-width:1360px;margin:0 auto;padding:var(--home-section-space,120px) var(--canvas-inset);background:#fff;}
body:not([data-banking-demo]) .home-deployment-faq>section{width:100%;max-width:none;margin:0;padding:0;}
body:not([data-banking-demo]) .home-deployment-faq>section.home-faq{margin-top:var(--home-section-space,120px);}
.home-deployment{min-width:0;padding:0;background:#fff;font-family:"Progress Favorit",Arial,sans-serif;}
.home-deployment .partnership-card{justify-content:flex-end;width:100%;max-width:none;min-height:clamp(440px,40vw,580px);aspect-ratio:auto;margin:0;border:0;border-radius:8px;box-shadow:none;}
.home-deployment .partnership-card-image{object-position:center 40%;filter:grayscale(1) brightness(.78);}
.home-deployment .partnership-card-motion{filter:grayscale(1) brightness(.78) url(#partnership-motion-blur);}
.home-deployment .partnership-card::after{background:linear-gradient(270deg,#141414e6 0%,#141414a6 36%,#14141400 66%);}
.home-deployment .partnership-card-content{width:auto;max-width:560px;padding:56px;text-align:left;}
.home-deployment h2{margin:0 0 16px;color:#fff;}
.home-deployment .partnership-card p{margin:0;color:#cfcfcf;font-size:18px;line-height:1.5;letter-spacing:-.01em;}
.home-deployment .partnership-card-link{margin-top:28px;}

.home-faq{min-width:0;margin-top:var(--home-section-space,120px);padding:0;border:0;background:#fff;color:#161616;font-family:"Progress Favorit",Arial,sans-serif;}
.home-faq-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start;width:100%;}
.home-faq header{position:sticky;top:120px;margin:0;}
.home-faq header p{margin:0 0 14px;}
.home-faq h2{margin:0;}
.home-faq-list{border-top:1px solid #e2e2e2;}
.home-faq-item{border-bottom:1px solid #e2e2e2;}
.home-faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:24px;list-style:none;cursor:pointer;padding:24px 0;color:#161616;font-size:18px;line-height:1.4;font-weight:300;letter-spacing:-.015em;}
.home-faq-item summary::-webkit-details-marker{display:none;}
.home-faq-item summary svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:#8a8a8a;stroke-width:1.5;stroke-linecap:round;transition:rotate .2s ease;}
.home-faq-item summary:hover svg{stroke:#161616;}
.home-faq-item summary:focus-visible{outline:2px solid #333;outline-offset:5px;}
.home-faq-answer{overflow:hidden;}
.home-faq-answer p{max-width:620px;margin:0;padding:0 48px 26px 0;color:#666;font-size:16px;line-height:1.6;}
.home-faq-item[open] summary svg{rotate:45deg;}
@media(max-width:900px){
 .home-deployment .partnership-card{justify-content:flex-start;min-height:480px;}
 .home-deployment .partnership-card::after{background:linear-gradient(180deg,#14141400 25%,#141414b3 55%,#141414f2 100%);}
 .home-deployment .partnership-card-content{padding:32px 24px 36px;}
 .home-deployment .partnership-card p{font-size:16px;}
 .home-faq-inner{grid-template-columns:1fr;gap:32px;}
 .home-faq header{position:static;}
 .home-faq-item summary{padding:18px 0;font-size:16px;}
 .home-faq-answer p{padding-right:0;font-size:15px;}
}

/* Keep the entire Inception lockup visible and blend its paper background away. */
.home-film-credentials {grid-template-columns:calc(var(--program-slot)*2.5 + 24px) minmax(0,1fr);}
.home-film-builders .home-film-logos {grid-template-columns:repeat(8,22cqw);}
.home-film-builders .home-film-logos li {padding-inline:6px;}
.home-film-programs .home-film-nvidia {position:relative;width:136px;height:48px;overflow:hidden;mix-blend-mode:screen;}
.home-film-programs .home-film-nvidia img {position:absolute;left:-46px;top:-29px;width:229px;height:129px;max-width:none;max-height:none;object-fit:fill;transform:none;filter:grayscale(1) invert(1) brightness(2);mix-blend-mode:normal;opacity:1;}
@media(max-width:900px){.hero.home-film-hero .home-film-credentials{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.home-film-programs .home-film-nvidia{width:90px;height:32px}.home-film-programs .home-film-nvidia img{left:-30px;top:-19px;width:152px;height:85.5px}.home-film-builders .home-film-logos{grid-template-columns:repeat(8,130px)}}
.home-film-credentials li {height:54px;}
.home-film-programs .home-film-nvidia {height:52px;}
@media(max-width:640px){.home-film-credentials li{height:42px}.home-film-programs .home-film-nvidia{height:34px}}

/* Alpha transparency lives in the SVG, independent of the film behind it. */
.home-film-programs .home-film-nvidia {width:136px;height:50px;mix-blend-mode:normal;overflow:visible;background:transparent;}
.home-film-programs .home-film-nvidia img {position:static;width:100%;height:100%;object-fit:contain;filter:none;mix-blend-mode:normal;transform:none;background:transparent;}
@media(max-width:640px){.home-film-programs .home-film-nvidia{width:90px;height:33px}.home-film-programs .home-film-nvidia img{width:100%;height:100%;}}

@media(prefers-reduced-motion:reduce) { .solution-film-sticky .solution-film-copy { transition:none; transform:none; } }

/* Anchor the opening message above the credentials; keep leader marks closely spaced. */
.hero.home-film-hero .hero-content {
  align-content: end;
  align-items: end;
  padding-bottom: clamp(40px, 6vh, 64px);
}
.home-film-builders .home-film-logos {
  display: flex;
  gap: 56px;
  padding-right: 56px;
}
.home-film-builders .home-film-logos li { flex: 0 0 auto; padding-inline: 0; }
.home-film-builders .home-film-logos img { width: 130px; }
.home-film-builders .home-film-logos img[src$="brandfetch-google.svg"] { width: 112px; }
.home-film-builders .home-film-logos img[src$="official-stanford-university.png"] { width: 106px; }
.home-film-builders .home-film-logos img[src$="brandfetch-pwc.svg"] { width: 72px; }
.home-film-builders .home-film-logos img[src$="meta.svg"] { width: 30px; }
.home-film-builders .home-film-iit-crest img { width: 271.43px; }
@media (max-width: 900px) {
  .hero.home-film-hero .hero-content { align-items: start; }
}
@media (max-width: 640px) {
  .home-film-builders .home-film-logos { gap: 36px; padding-right: 36px; }
  .hero.home-film-hero .hero-content { padding-bottom: 40px; }
}

/* Render useful content immediately; video is a progressive enhancement. */
.home-film-hero .hero-media:not(.video-ready) { z-index:0; }
.home-film-hero .hero-still { filter:none;transform:none; }
.home-film-hero .hero-boot,.home-film-hero .hero-boot-progress { display:none; }
@media(max-width:767.98px) {
 .business-progress .progress-slide .progress-card-image { object-fit:cover; }
}

#progress-story-cost { color: #171717; }
#progress-story-cost .progress-card-image { object-fit: cover; }

#progress-story-cost .progress-card-metric, .banking-roi-gallery .progress-slide:nth-child(2) .progress-card-metric { color: #171717; text-shadow: none; }

.control-mobile-week { margin: 0 0 12px; color: #777; font-size: 15px; }
@media(max-width:767px) {
 .control-mobile-sequence:not([data-stage]) .control-mobile-panel li:nth-child(-n+2) { opacity: 1; transform: none; }
}
@media(max-width:767px) and (prefers-reduced-motion:reduce) {
 .control-mobile-sequence { display:none; }
 .control-map>.control-stage { display:block; padding-top:28px; }
 .control-stage h3 { height:auto; margin-bottom:20px; }
 .control-stage::before { display:block; margin-bottom:12px; color:#777; font-size:15px; }
 .control-stage[data-stage="0"]::before { content:"Week 0"; }
 .control-stage[data-stage="1"]::before { content:"Week 1"; }
 .control-stage[data-stage="2"]::before { content:"Week 2–3"; }
 .control-stage[data-stage="3"]::before { content:"Week 4–6"; }
}

/* Homepage type system: one section title, one subtitle, one lead and one eyebrow, on one spacing rhythm. */
body:not([data-banking-demo]) { --home-ink:#161616; --home-muted:#666; --home-title:clamp(30px,3.4vw,48px); --home-subtitle:clamp(26px,2.3vw,34px); --home-section-space:120px; }
#business-progress .business-progress-heading h2,
#expert-statement .headcount-head h2,
#connected-banking-stack .bank-stack-copy h3,
#context-solutions .home-solutions-heading h2,
#performance-integrations h2#performance-title,
#home-security h2,
#home-control .home-control-heading h2,
#home-industries h2#home-industries-heading,
body:not([data-banking-demo]) .home-team-closer h2,
#home-faq h2,
body:not([data-banking-demo]) #home-deployment h2 { font-size:var(--home-title); font-weight:300; line-height:1.1; letter-spacing:-.04em; }
#business-progress .business-progress-heading h2,
#expert-statement .headcount-head h2,
#connected-banking-stack .bank-stack-copy h3,
#context-solutions .home-solutions-heading h2,
#performance-integrations h2#performance-title,
#home-security h2,
#home-control .home-control-heading h2,
#home-industries h2#home-industries-heading,
#home-faq h2,
#performance-integrations h3,
#expert-statement .headcount-close { color:var(--home-ink); }
#performance-integrations h3 { font-size:var(--home-subtitle); font-weight:300; line-height:1.15; letter-spacing:-.03em; }
#expert-statement .headcount-head p,
#connected-banking-stack .bank-stack-copy p,
#context-solutions .home-solutions-lead,
#performance-integrations h2#performance-title + p,
#home-control .home-control-heading p { color:var(--home-muted); font-size:18px; line-height:1.5; letter-spacing:-.01em; }
#home-security .bse-heading > p,
#home-faq header p,
#context-solutions .home-solutions-intro span { color:var(--home-muted); font-size:12px; font-weight:500; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; }
body:not([data-banking-demo]) section.home-performance,
body:not([data-banking-demo]) section.home-security-editorial,
body:not([data-banking-demo]) section.home-control,
body:not([data-banking-demo]) section.home-industries { padding-top:var(--home-section-space); padding-bottom:var(--home-section-space); }
body:not([data-banking-demo]) main > section.home-solutions,
body:not([data-banking-demo]) section.home-security-editorial,
body:not([data-banking-demo]) section.home-control { border-top:0; }
body:not([data-banking-demo]) section.home-security-editorial { background:#fff; }
@media(max-width:767.98px) {
 body:not([data-banking-demo]) { --home-section-space:80px; }
 #connected-banking-stack .bank-stack-copy p,
 #expert-statement .headcount-head p,
 #context-solutions .home-solutions-lead,
 #home-control .home-control-heading p { font-size:16px; }
}

/* Customer stories as a results ledger: one row per customer, its measured results set large; the photo follows the pointer. */
body:not([data-banking-demo]) section.customer-stories { position:relative; padding-top:var(--home-section-space,120px); padding-bottom:var(--home-section-space,120px); }
.customer-stories-heading { margin-bottom:56px; }
.customer-stories-heading h2 { max-width:760px; margin:0; text-wrap:balance; }
.customer-ledger { margin:0; padding:0; border-bottom:1px solid #e2e2df; list-style:none; counter-reset:none; }
.ledger-row { display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1.45fr) minmax(0,.85fr) 52px; align-items:center; column-gap:40px; padding:44px 0; border-top:1px solid #e2e2df; color:#161616; text-decoration:none; transition:opacity .35s ease; }
.customer-ledger > li:first-child .ledger-row { border-top-color:#161616; }
.ledger-index { align-self:start; padding-top:10px; color:#8a8a8a; font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.ledger-name { display:grid; gap:8px; transition:translate .45s cubic-bezier(.22,1,.36,1); }
.ledger-name strong { font:300 clamp(28px,2.8vw,40px)/1.05 "Progress Favorit",Arial,sans-serif; letter-spacing:-.035em; }
.ledger-name small { color:#777; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.ledger-thumb { display:none; }
.ledger-metrics { display:flex; flex-wrap:wrap; gap:24px 56px; margin:0; }
.ledger-metrics div { display:grid; align-content:start; gap:12px; width:190px; }
.ledger-metrics dt { font:300 clamp(48px,4.6vw,68px)/.9 "Progress Favorit",Arial,sans-serif; letter-spacing:-.05em; }
.ledger-metrics dd { max-width:200px; margin:0; padding-top:12px; border-top:1px solid #161616; color:#161616; font-size:15px; font-weight:500; line-height:1.35; letter-spacing:-.01em; }
.ledger-story { color:#777; font-size:15px; line-height:1.5; text-wrap:balance; }
.ledger-arrow { position:relative; display:grid; place-items:center; width:52px; height:52px; border:1px solid #d6d6d3; border-radius:50%; transition:background-color .3s ease,border-color .3s ease,rotate .45s cubic-bezier(.22,1,.36,1); }
.ledger-arrow::before { content:""; width:9px; height:9px; border-top:1.5px solid #161616; border-right:1.5px solid #161616; rotate:45deg; translate:-2px 0; transition:border-color .3s ease; }
.customer-ledger:hover .ledger-row,.customer-ledger:focus-within .ledger-row { opacity:.32; }
.customer-ledger .ledger-row:hover,.customer-ledger .ledger-row:focus-visible { opacity:1; }
.ledger-row:hover .ledger-name,.ledger-row:focus-visible .ledger-name { translate:10px 0; }
.ledger-row:hover .ledger-arrow,.ledger-row:focus-visible .ledger-arrow { border-color:#161616; background:#161616; rotate:-45deg; }
.ledger-row:hover .ledger-arrow::before,.ledger-row:focus-visible .ledger-arrow::before { border-color:#fff; }
.ledger-row:focus-visible { outline:none; }
.ledger-row:focus-visible .ledger-name strong { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.ledger-preview { position:absolute; z-index:5; top:0; left:0; width:300px; aspect-ratio:4/3; margin:0; overflow:hidden; border-radius:6px; pointer-events:none; opacity:0; scale:.92; rotate:-3deg; transition:opacity .3s ease,scale .45s cubic-bezier(.22,1,.36,1),rotate .45s cubic-bezier(.22,1,.36,1); box-shadow:0 24px 60px #0000002e; }
.ledger-preview.is-on { opacity:1; scale:1; rotate:0deg; }
.ledger-preview img { display:block; width:100%; height:100%; object-fit:cover; }
@media(max-width:1023.98px) {
 .customer-stories-heading { margin-bottom:36px; }
 .ledger-row { grid-template-columns:minmax(0,1fr) 44px; grid-template-areas:"name arrow" "thumb thumb" "metrics metrics" "story story"; row-gap:20px; padding:28px 0; }
 .ledger-index { display:none; }
 .ledger-name { grid-area:name; }
 .ledger-arrow { grid-area:arrow; width:44px; height:44px; }
 .ledger-thumb { grid-area:thumb; display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; }
 .ledger-metrics { grid-area:metrics; }
 .ledger-metrics { flex-wrap:nowrap; gap:20px; }
 .ledger-metrics div { width:auto; min-width:0; flex:1 1 0; }
 .ledger-story { grid-area:story; }
 .ledger-preview { display:none; }
 .customer-ledger:hover .ledger-row { opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .ledger-row,.ledger-name,.ledger-arrow,.ledger-preview { transition:none; } }

/* Phone: the systems story runs as one readable column instead of a scaled sticky canvas.
   Collage first, then the use-case tabs, what the use case does, the agent's steps, the system it is working in, and the results. */
@media(max-width:767.98px) {
 body:not([data-banking-demo]) .home-solutions #connected-banking-stack.bank-stack-story { height:auto; margin-bottom:0; }
 #connected-banking-stack .bank-stack-stage { position:relative; top:0; height:auto; }
 #connected-banking-stack .bank-stack-frame[data-mobile] { display:flex; flex-direction:column; height:auto; padding:0 20px; overflow:visible; container-type:inline-size; }
 #connected-banking-stack [data-mobile] :is(.bank-stack-canvas,.bank-stack-collage,.bank-stack-art,.bank-stack-copy) { display:contents; }
 #connected-banking-stack [data-mobile] .bank-stack-opening { order:1; visibility:visible; padding:0 4px; text-align:center; }
 #connected-banking-stack [data-mobile] .bank-stack-pieces { --u:calc((100cqw + 40px) / 1440); order:2; position:relative; inset:auto; flex:none; width:calc(100% + 40px); aspect-ratio:1440/1022; margin:20px -20px 8px; overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent); }
 #connected-banking-stack [data-mobile] .bank-stack-pieces > .bs-el,#connected-banking-stack [data-mobile] .bank-stack-pieces > .bank-stack-paths { opacity:1; }
 #connected-banking-stack [data-mobile] .bank-stack-resolved { order:3; position:static; visibility:visible; margin-top:56px; text-align:center; }
 #connected-banking-stack [data-mobile] .bsu-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:22px 0 0; padding:0; overflow:visible; border:0; }
 #connected-banking-stack [data-mobile] .bsu-tab { overflow:hidden; padding:9px 14px; border:1px solid #e0e0dd; border-radius:999px; background:#fff; color:#555; font-size:13.5px; }
 #connected-banking-stack [data-mobile] .bsu-tab[aria-selected="true"] { border-color:#161616; background:#161616; color:#fff; }
 #connected-banking-stack [data-mobile] .bsu-tab::after { bottom:0; height:2px; background:#ffffff8c; }
 #connected-banking-stack [data-mobile] .bsu-side { position:static; width:auto; height:auto; opacity:1; visibility:visible; }
 #connected-banking-stack [data-mobile] .bsu-side-item { height:auto; }
 #connected-banking-stack [data-mobile] .bsu-side-left { order:4; margin:32px 0 20px; }
 #connected-banking-stack [data-mobile] .bsu-side-left .bsu-eyebrow { display:none; }
 #connected-banking-stack [data-mobile] .bsu-side-left h4 { margin-bottom:10px; font-size:26px; }
 #connected-banking-stack [data-mobile] .bsu-side-left h4 + p { margin-bottom:18px; }
 #connected-banking-stack [data-mobile] .bank-stack-app { --u:1.55px; order:5; position:relative; inset:auto; display:block; padding-bottom:262px; opacity:1; visibility:visible; }
 #connected-banking-stack [data-mobile] :is(.bsa-wire,.bsa-bounds) { display:none; }
 #connected-banking-stack [data-mobile] .bsa-agent { position:relative; display:grid; grid-template-columns:minmax(0,1fr); width:auto; height:auto; left:auto; top:auto; }
 #connected-banking-stack [data-mobile] .bsa-scene { position:static; grid-area:1/1; padding:calc(var(--u)*12) calc(var(--u)*13) calc(var(--u)*14); }
 #connected-banking-stack [data-mobile] .bsa-scene li > span { min-width:0; }
 #connected-banking-stack [data-mobile] .bsa-work { position:absolute; left:0; right:0; top:auto; bottom:0; width:auto; height:250px; }
 #connected-banking-stack [data-mobile] .bsa-work:not(.is-active) { opacity:0; translate:0 10px; pointer-events:none; }
 #connected-banking-stack [data-mobile] .bsa-work.is-active { box-shadow:0 0 0 3px #dbe6fd,0 12px 32px #0000001a; }
 #connected-banking-stack [data-mobile] .bsu-side-right { order:6; margin-top:28px; }
 #connected-banking-stack [data-mobile] .bsu-side-right .bsu-eyebrow { margin-bottom:12px; }
 #connected-banking-stack [data-mobile] .bsu-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
 #connected-banking-stack [data-mobile] .bsu-results div { padding:14px 0 0; border-top:1px solid #161616; }
 #connected-banking-stack [data-mobile] .bsu-results dt { font-size:34px; }
 #connected-banking-stack [data-mobile] .bsu-results dd { font-size:12.5px; }
}

/* Phone: the three industry tabs share the row and wrap their labels, so none is cut at the edge. */
@media(max-width:480px) {
 .home-industry-tabs { width:100%; overflow:visible; border-radius:16px; }
 .home-industry-tabs button { flex:1 1 0; min-width:0; padding:9px 8px; border-radius:12px; font-size:13px; line-height:1.15; white-space:normal; text-wrap:balance; }
}

/* Phone reading layout: a complete idea per block, with natural document scrolling.
   Larger text and short landscape screens can grow without clipping content. */
.phone-workflow { display:none; }
@media (max-width:767.98px) {
 body:not([data-banking-demo]) { --home-section-space:48px; --home-title:30px; }
 .hero.home-film-hero { min-height:100svh; height:auto; }
 .hero.home-film-hero .hero-content { padding:112px 24px 32px; gap:24px; align-content:center; }
 .hero.home-film-hero h1 { font-size:clamp(34px,9.2vw,44px); line-height:1.08; }
 .hero.home-film-hero .home-film-subheading { font-size:20px; line-height:1.35; }
 .hero.home-film-hero .home-film-description { font-size:16px; line-height:1.5; }
 .hero.home-film-hero .hero-shade { background:linear-gradient(180deg,#0005,#0009 60%,#000b); }
 .hero.home-banking-hero { min-height:0; padding:48px 24px; }
 .home-banking-hero-heading, #home-workflow-story { display:none; }
 .phone-workflow { display:block; width:100%; max-width:520px; margin:auto; text-align:left; }
 .phone-eyebrow { margin:0 0 20px; color:#666; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
 .phone-workflow h2 { margin:0 0 28px; font:300 32px/1.12 "Progress Favorit",Arial,sans-serif; letter-spacing:-.035em; }
 .phone-workflow ol { list-style:none; margin:0; padding:0; }
 .phone-workflow li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:20px 0; border-top:1px solid #ddd; }
 .phone-workflow li > span { padding-top:3px; color:#777; font-size:12px; }
 .phone-workflow h3 { margin:0 0 8px; font-size:19px; font-weight:400; line-height:1.25; }
 .phone-workflow li p { margin:0; color:#666; font-size:16px; line-height:1.5; }
 .customer-stories-heading { margin-bottom:28px; }
 .ledger-row { row-gap:16px; padding:24px 0 32px; }
 .ledger-thumb { aspect-ratio:2/1; }
 .ledger-metrics dt { font-size:46px; }
 .ledger-metrics dd { font-size:14px; }
 #expert-statement .expert-statement-stage { min-height:0; height:auto; }
 #expert-statement .expert-statement-copy { padding-block:40px; }
 .headcount-compare { margin-top:28px; }
 .headcount-side { padding-top:16px; }
 .headcount-side p { font-size:15px; line-height:1.45; }
 .headcount-gap { margin:18px 0; padding-top:12px; }
 .headcount-close { margin-top:24px; font-size:23px; }
 #connected-banking-stack [data-mobile] .bank-stack-opening,
 #connected-banking-stack [data-mobile] .bank-stack-resolved { text-align:left; }
 #connected-banking-stack [data-mobile] .bank-stack-resolved { margin-top:28px; }
 #connected-banking-stack [data-mobile] .bank-stack-pieces { margin-top:16px; }
 #connected-banking-stack [data-mobile] .bsu-tabs { justify-content:flex-start; }
 #connected-banking-stack [data-mobile] .bsu-tab { min-height:44px; }
 #connected-banking-stack [data-mobile] .bank-stack-app { display:none; }
 #connected-banking-stack [data-mobile] .bsu-side-left { margin:24px 0 0; }
 #connected-banking-stack [data-mobile] .bsu-side-right { margin-top:20px; }
 .home-solutions-heading { margin:48px 0 28px; text-align:left; }
 .solution-film-list { gap:0; counter-reset:phone-capability; }
 .solution-film-row { counter-increment:phone-capability; padding:28px 0; border-top:1px solid #ddd; }
 .solution-film-row::before { content:"0" counter(phone-capability); display:block; margin-bottom:16px; color:#777; font-size:12px; }
 .solution-film-row > .solution-film-copy { margin:0; }
 .solution-film-copy h3 { font-size:25px; line-height:1.2; }
 .solution-film-copy p { font-size:16px; line-height:1.5; color:#666; }
 .solution-film-row .solution-film { display:none; }
 #home-security .bse-heading { text-align:left; }
 #home-security .bse-heading > div:has(.shield-object) { display:none; }
 #home-security .bse-original-copy { margin-top:20px; font-size:16px; line-height:1.5; }
 #home-security .bse-grid { grid-template-columns:1fr; margin-top:24px; }
 #home-security .bse-card { display:flex; align-items:center; gap:16px; padding:14px 0; border-left:0; }
 #home-security .bse-icon { width:24px; height:24px; flex:none; margin:0; }
 #home-security .bse-card h3 { font-size:16px; line-height:1.3; }
 #home-security .bse-card h3 br { display:none; }
 #home-control .home-control-heading { text-align:left; margin-bottom:28px; }
 #home-control .home-control-heading > p { margin-top:18px; }
 #home-control .control-mobile-sequence { display:none; }
 #home-control .control-map { display:grid; grid-template-columns:1fr; gap:0; }
 #home-control .control-map > .control-stage { display:block; grid-area:auto; padding:22px 0; border-top:1px solid #ddd; }
 #home-control .control-stage::before { display:block; margin-bottom:10px; color:#666; font-size:12px; }
 #home-control .control-stage[data-stage="0"]::before { content:"Week 0"; }
 #home-control .control-stage[data-stage="1"]::before { content:"Week 1"; }
 #home-control .control-stage[data-stage="2"]::before { content:"Week 2–3"; }
 #home-control .control-stage[data-stage="3"]::before { content:"Week 4–6"; }
 #home-control .control-stage h3 { height:auto; margin:0 0 12px; font-size:22px; font-weight:400; line-height:1.2; }
 #home-control .control-stage h3 br { display:none; }
 #home-control .control-stage li { background:none; border:0; padding:3px 0; min-height:0; font-size:15px; line-height:1.4; }
 #home-control .control-stage[data-stage="1"] li:nth-child(-n+2),
 #home-control .control-stage[data-stage="2"] li:nth-child(-n+4),
 #home-control .control-stage[data-stage="3"] li:nth-child(-n+6) { display:none; }
 .home-industries .home-industries-heading { text-align:left; }
 .performance-integration-list { gap:12px; }
 .performance-integration-list li { min-width:0; }
}
@media (max-width:767.98px) {
 .phone-workflow, .phone-workflow h2, .phone-workflow h3 { color:#161616; }
 #expert-statement .expert-statement-stage { padding:48px 24px; }
 #expert-statement .expert-statement-copy { padding:0; }
 .site-header .nav-shell { background:#fffffff2; border:1px solid #e5e5e5; color:#161616; backdrop-filter:blur(16px); }
 .site-header .brand, .site-header .nav-shell a { color:#161616; }
 .site-header .context-logo { filter:brightness(0); }
 .site-header .menu-button { width:44px; height:44px; color:#161616; }
 .site-header .menu-button span { background:#161616; }
 #home-control .control-map > .control-stage { padding:14px 0; }
 #home-control .control-stage h3 { font-size:20px; margin-bottom:8px; }
 #home-control .control-stage::before { margin-bottom:6px; }
 #home-control .control-stage li { padding:1px 0; font-size:14px; }
 .home-film-hero .hero-content { opacity:1; transform:none; }
}
@media (max-width:767.98px) {
 .site-header .nav-shell .brand { color:#161616 !important; }
 .site-header .nav-shell .nav-left, .site-header .nav-shell .nav-right { background:transparent; box-shadow:none; border:0; backdrop-filter:none; }
 .site-header .nav-shell.open { max-height:calc(100svh - 24px); overflow-y:auto; }
 .site-header .nav-shell .nav-cta { background:#161616; color:#fff; }
 .site-header .nav-industries-panel { background:#f5f5f5; color:#161616; }
 .site-header .nav-industry-link strong { color:#161616; }
}
@media (max-width:767.98px) {
 body .site-header .nav-shell { background:#fffffff2 !important; }
 .site-header .nav-shell a:not(.nav-cta), .site-header .nav-shell a:not(.nav-cta):is(:hover,:focus-visible) { color:#161616 !important; }
 .site-header .nav-shell a:hover { background:#eee; }
 .site-header .nav-shell .nav-cta:hover { background:#333; color:#fff; }
}
@media (max-width:767.98px) {
 #connected-banking-stack [data-mobile] .bsu-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
 #connected-banking-stack [data-mobile] .bsu-tab { width:100%; padding:10px 8px; font-size:13px; line-height:1.25; white-space:normal; }
 #home-security { padding-block:40px; }
 #home-security .bse-card { padding-block:10px; }
 .performance-top { gap:28px; }
 .performance-principles { margin-top:24px; }
 .performance-principles > div { padding-top:12px; }
 .perf-tab { min-height:44px; }
 main [id] { scroll-margin-top:84px; }
}

/* Phone nav: persistent Book Demo button, hamburger-to-cross, and a drawer that eases open. */
.nav-mobile-cta {
 display:none;
}
@media (max-width:760px) {
 .site-header .nav-shell,
 .site-header .nav-shell.open { grid-template-columns:1fr auto auto; grid-template-rows:44px 0fr auto; align-items:center; column-gap:12px; row-gap:0; padding:3px 4px 3px 6px; transition:grid-template-rows 320ms cubic-bezier(.32,.72,0,1); }
 .site-header .nav-shell.open { grid-template-rows:44px 1fr auto; }
 .site-header .nav-shell .brand { grid-column:1; grid-row:1; padding:0 8px; }

 .site-header .nav-shell a.nav-mobile-cta { display:inline-flex; grid-column:2; grid-row:1; align-self:center; align-items:center; justify-content:center; height:34px; padding:0 14px; border-radius:6px; background:#161616; color:#fff !important; font-size:14px; font-weight:400; letter-spacing:-0.3px; line-height:1; white-space:nowrap; touch-action:manipulation; transition:background-color 150ms var(--motion-ease-standard), transform 150ms var(--motion-ease-standard); }
 .site-header .nav-shell a.nav-mobile-cta:is(:hover,:focus-visible) { background:#333; color:#fff !important; }
 .site-header .nav-shell a.nav-mobile-cta:active { transform:scale(.97); }

 .site-header .nav-shell .menu-button { grid-column:3; grid-row:1; align-self:center; width:44px; height:44px; align-items:center; gap:5px; border-radius:6px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
 .site-header .menu-button span { width:18px; height:1.5px; margin:0; border-radius:1px; transform-origin:center; transition:transform 320ms cubic-bezier(.32,.72,0,1), opacity 200ms ease; }
 .site-header .menu-button[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
 .site-header .menu-button[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0); }
 .site-header .menu-button[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

 /* Drawer rows collapse to 0fr; the panels stay laid out so the height can animate. */
 .site-header .nav-shell .nav-left,
 .site-header .nav-shell .nav-right,
 .site-header .nav-shell.open .nav-left,
 .site-header .nav-shell.open .nav-right { display:flex; position:static; grid-column:1 / -1; align-self:stretch; flex-direction:column; align-items:stretch; gap:0; width:auto; min-height:0; margin:0; padding:0; overflow:hidden; border-radius:0; visibility:hidden; transition:visibility 0s linear 320ms; }
 .site-header .nav-shell .nav-left { grid-row:2; }
 .site-header .nav-shell .nav-right { grid-row:3; max-height:0; transition:visibility 0s linear 320ms, max-height 320ms cubic-bezier(.32,.72,0,1); }
 .site-header .nav-shell.open .nav-left,
 .site-header .nav-shell.open .nav-right { visibility:visible; transition-delay:0s; }
 .site-header .nav-shell.open .nav-right { max-height:72px; transition:visibility 0s, max-height 320ms cubic-bezier(.32,.72,0,1); }
 .site-header .nav-shell .nav-left::before { content:""; flex:none; height:1px; margin:3px 2px 6px; background:#ececec; }
 .site-header .nav-shell .nav-right > a.nav-login { margin-bottom:4px; }
 .site-header .nav-shell .nav-login .nav-label-mask { line-height:1.25; }
 .site-header .nav-shell .nav-right::before { content:""; flex:none; height:1px; margin:6px 10px; background:#ececec; }

 .site-header .nav-shell .nav-left > a,
 .site-header .nav-shell .nav-industries-trigger,
 .site-header .nav-shell .nav-right > a.nav-login { justify-content:space-between; min-height:48px; padding:0 10px; border-radius:6px; font-size:17px; letter-spacing:-0.3px; line-height:1; }
 .site-header .nav-shell .nav-left > *,
 .site-header .nav-shell .nav-right > a.nav-login { opacity:0; transform:translateY(-6px); transition:opacity 120ms ease, transform 120ms ease; }
 .site-header .nav-shell.open .nav-left > *,
 .site-header .nav-shell.open .nav-right > a.nav-login { opacity:1; transform:none; transition:opacity 320ms ease, transform 320ms cubic-bezier(.32,.72,0,1); }
 .site-header .nav-shell.open .nav-left > :nth-child(2) { transition-delay:20ms; }
 .site-header .nav-shell.open .nav-left > :nth-child(3) { transition-delay:40ms; }
 .site-header .nav-shell.open .nav-left > :nth-child(4) { transition-delay:60ms; }
 .site-header .nav-shell.open .nav-left > :nth-child(5) { transition-delay:80ms; }
 .site-header .nav-shell.open .nav-right > a.nav-login { transition-delay:100ms; }

 .site-header .nav-shell .nav-industries-trigger::after { content:""; width:7px; height:7px; margin-right:4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 280ms cubic-bezier(.32,.72,0,1); }
 .site-header .nav-shell .nav-industries.is-open .nav-industries-trigger { background:transparent; }
 .site-header .nav-shell .nav-industries.is-open .nav-industries-trigger::after { transform:translateY(2px) rotate(-135deg); }
 .site-header .nav-shell .nav-industries.is-open .nav-industries-panel { margin:2px 0 6px; padding:4px; border:0; border-radius:8px; animation:nav-panel-in 300ms cubic-bezier(.32,.72,0,1); }
 .site-header .nav-shell .nav-industry-link { min-height:44px; }
 .site-header .nav-shell .nav-industry-link strong { font-size:15px; }

 .site-header .nav-shell .nav-right .nav-cta { display:none; }
}
@keyframes nav-panel-in {
 from { opacity:0; transform:translateY(-6px); }
 to { opacity:1; transform:none; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
 .site-header .nav-shell,
 .site-header .menu-button span,
 .site-header .nav-shell .nav-left,
 .site-header .nav-shell .nav-right,
 .site-header .nav-shell .nav-left > *,
 .site-header .nav-shell .nav-right > a.nav-login { transition:none !important; }
 .site-header .nav-shell .nav-industries.is-open .nav-industries-panel { animation:none; }
}

/* Mobile opening: product first, then a soft handoff to our existing credentials. */
.mobile-product-preview,
.hero.home-film-hero .mobile-hero-secondary { display:none; }
@media (max-width:767.98px) {
 .hero.home-film-hero { display:block; min-height:0; height:auto; background:#fff; color:#202020; overflow:hidden; }
 .home-film-hero .hero-media, .home-film-hero .hero-shade { display:none; }
 .hero.home-film-hero .hero-content { display:block; padding:148px 20px 0; margin:0; min-height:0; color:#202020; opacity:1; transform:none; }
 .hero.home-film-hero h1 { max-width:380px; font-size:clamp(30px,8.7vw,38px); font-weight:400; line-height:1.14; letter-spacing:-.045em; color:#202020; }
 .hero.home-film-hero .home-film-subheading { display:none; }
 .hero.home-film-hero .home-film-description { max-width:390px; margin:22px 0 0; color:#777; font-size:16px; line-height:1.6; letter-spacing:0; }
 .hero.home-film-hero .home-film-details .hero-actions { display:flex; flex-wrap:nowrap; gap:10px; margin:28px 0 0; }
 .hero.home-film-hero .hero-actions .button { min-height:42px; padding:10px 13px; font-size:13px; font-weight:400; white-space:nowrap; }
 .hero.home-film-hero .hero-actions .primary { background:#161616; color:#fff; border:1px solid #161616; }
 .hero.home-film-hero .mobile-hero-secondary { display:inline-flex; gap:8px; background:#f0f0f0; color:#222; border:1px solid #f0f0f0; }
 .hero.home-film-hero .hero-actions .button:hover { transform:none; filter:brightness(.94); }
 .hero.home-film-hero .home-film-credentials { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:44px; margin:0; padding:40px 20px 64px; background:#fff; border:0; color:#303030; z-index:1; }
 .home-film-credentials h2 { text-align:center; color:#888; font-size:10px; font-weight:450; letter-spacing:.15em; margin:0 0 22px; }
 .home-film-backers { border:0; padding:0; }
 .home-film-credentials img { filter:brightness(0); opacity:1; mix-blend-mode:normal; }
 .home-film-credentials .home-film-raster, .home-film-credentials .home-film-iit-crest img { filter:grayscale(1); mix-blend-mode:multiply; opacity:1; }
 .home-film-programs span { color:#333; }
 .home-film-programs .home-film-nvidia img { filter:brightness(0); mix-blend-mode:normal; }
 .home-film-credentials { --program-slot:120px; }
 .home-film-builders .home-film-logos { gap:30px; padding-right:30px; }
 .home-film-credentials .home-film-marquee-track { backface-visibility:hidden; }
 #home-workflow-story { scroll-margin-top:90px; }
}
@media (max-width:359px) {
 .hero.home-film-hero .hero-content { padding-inline:16px; }
 .hero.home-film-hero .hero-actions .button { padding-inline:10px; font-size:12px; }
}
.home-film-credentials picture { display:contents; }
@media (max-width:767.98px) {
 .hero.home-film-hero .hero-actions .button { box-shadow:none; }
 .home-film-credentials .home-film-iit-crest img { width:38px; height:38px; object-fit:contain; }
 .home-film-credentials img[src$="official-stanford-university.png"],
 .home-film-credentials .home-film-iit-crest img { filter:brightness(0); mix-blend-mode:normal; }
 #home-workflow-overview { scroll-margin-top:90px; }
}

/* Product-faithful mobile preview, based on the supplied Today workspace. */
@media (max-width:767.98px) {
 .banking-product-preview { display:block; margin:42px 0 0; padding:22px 14px 44px; text-align:left; color:#242424; background:radial-gradient(ellipse at 80% 5%,#e8eef4aa,transparent 60%),linear-gradient(180deg,#fff,#f5f6f8 45%,#fff); }
 .banking-preview-glass { padding:7px; border:1px solid #fff; border-radius:15px; background:linear-gradient(140deg,#ffffffee,#e7ebf0bb 55%,#ffffffdd); box-shadow:0 18px 45px -22px #3444534d,inset 0 1px 0 #fff; }
 .banking-preview-scroll { width:100%; overflow-x:auto; overflow-y:hidden; border:1px solid #dfe2e6; border-radius:9px; background:#fff; scrollbar-width:none; overscroll-behavior-x:contain; }
 .banking-preview-scroll:focus-visible { outline:2px solid #7e8c9d; outline-offset:3px; }
 .banking-preview-scroll::-webkit-scrollbar { display:none; }
 .banking-preview-app { display:grid; grid-template-columns:154px 1fr; width:1020px; height:650px; zoom:.65; background:#fff; color:#252525; font:14px/1.45 Arial,sans-serif; }
 .banking-preview-app * { box-sizing:border-box; }
 .banking-preview-app svg { width:17px; height:17px; flex:none; }
 .banking-preview-sidebar { position:relative; padding:22px 10px; border-right:1px solid #e9e9e9; background:#f9f9f9; }
 .bp-brand { display:flex; align-items:center; gap:6px; margin-bottom:32px; white-space:nowrap; font:19px/1.2 Georgia,serif; letter-spacing:-.5px; }
 .bp-brand img { width:22px; height:22px; filter:brightness(0); }
 .bp-nav { display:flex; align-items:center; gap:9px; padding:9px 8px; font-size:12px; white-space:nowrap; }
 .bp-nav svg { color:#777; }
 .bp-selected { background:#eaeaea; border-radius:8px; }
 .bp-sidebar-label { display:flex; justify-content:space-between; margin:30px 8px 8px; color:#999; font-size:11px; }
 .bp-sidebar-label span { font-size:17px; line-height:1; }
 .bp-avatar { display:inline-grid; place-items:center; flex:none; width:23px; height:23px; border-radius:50%; font:9px/1 Arial,sans-serif; color:#536578; background:#e7edf4; }
 .bp-sage { background:#e8ede7; color:#637260; }.bp-lilac { background:#eeebf2; color:#7d708d; }.bp-sand { background:#f1ebe5; color:#8b7861; }
 .bp-sidebar-bottom { position:absolute; bottom:16px; left:10px; right:10px; }
 .bp-sidebar-bottom .bp-nav { border:1px solid #e7e7e7; border-radius:7px; margin-top:7px; background:#fff; }
 .banking-preview-main { padding:58px 28px 30px; }
 .bp-greeting { margin:0; font:32px/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.7px; }
 .bp-date { margin:12px 0 25px; font-size:13px; color:#999; }
 .bp-workspace-columns { display:grid; grid-template-columns:545px 205px; gap:22px; }
 .bp-composer { border:1px solid #e6e6e6; border-radius:18px; padding:18px 17px 12px; box-shadow:0 1px 2px #00000006; }
 .bp-composer > p { margin:0 0 34px; color:#aaa; font-size:13px; }
 .bp-composer-bottom { display:flex; align-items:center; gap:12px; color:#aaa; }
 .bp-composer-bottom > span:first-child { display:flex; gap:12px; }
 .bp-apps { display:flex; align-items:center; gap:3px; font-size:10px; }
 .bp-apps img { width:16px; height:16px; object-fit:contain; }
 .bp-apps img:last-child { margin-right:6px; }
 .bp-voice { display:grid; place-items:center; width:32px; height:32px; margin-left:auto; border-radius:50%; background:#151515; color:#fff; }
 .bp-tabs { display:flex; align-items:center; gap:17px; margin:22px 0; font-size:11px; color:#999; white-space:nowrap; }
 .bp-tabs strong { color:#333; font-size:12px; font-weight:500; }
 .bp-pill { padding:6px 10px; background:#f1f1f1; border-radius:20px; color:#555; }
 .bp-pill em { color:#aaa; font-style:normal; padding-left:3px; }
 .bp-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
 .bp-task { display:flex; flex-direction:column; min-height:185px; padding:13px; border:1px solid #e6e6e6; border-radius:15px; box-shadow:0 1px 2px #00000004; }
 .bp-task-source { display:flex; align-items:center; gap:7px; margin-bottom:12px; font-size:10px; color:#999; }
 .bp-task > strong { font-weight:500; font-size:13px; line-height:1.45; }
 .bp-task > p { font-size:11px; line-height:1.5; color:#888; margin:8px 0 18px; }
 .bp-task small { margin-top:auto; text-align:right; color:#999; font-size:10px; }
 .bp-activity-tabs { margin-bottom:0; padding-bottom:12px; border-bottom:1px solid #eee; }
 .bp-feed { display:flex; align-items:flex-start; gap:8px; border-bottom:1px solid #eee; padding:15px 0; }
 .bp-feed > i { width:5px; height:5px; flex:none; border-radius:50%; margin-top:5px; background:#2481c7; }
 .bp-feed strong { font-size:12px; font-weight:500; }.bp-feed p { font-size:11px; color:#888; margin:7px 0; }.bp-feed small { color:#aaa; font-size:10px; }
 .bp-today,.bp-people { border:1px solid #e6e6e6; border-radius:16px; padding:17px; box-shadow:0 1px 2px #00000004; }
 .bp-today > strong,.bp-people > strong { font-size:13px; font-weight:500; }.bp-today > small { float:right; font-size:10px; color:#aaa; }
 .bp-today > div { display:flex; gap:8px; margin:22px 0 16px; }.bp-today p { margin:0; font-size:12px; }.bp-today b { font-weight:500; }.bp-today p span { display:block; color:#999; font-size:11px; margin-top:7px; line-height:1.5; }.bp-today hr { border:0; border-top:1px solid #eee; }.bp-muted { color:#aaa; font-size:11px; }
 .bp-people { margin-top:14px; }.bp-people > div { display:flex; gap:18px; margin-top:17px; }.bp-people > div > span { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:10px; color:#999; }.bp-people .bp-avatar { width:30px; height:30px; }
}

/* The mobile opening holds while the white credentials canvas scrolls over it. */
.mobile-hero-hold,.mobile-hero-stage { display:contents; }
@media (max-width:767.98px) {
 .hero.home-film-hero { overflow:visible; }
 .mobile-hero-hold { display:block; position:relative; height:175svh; }
 .mobile-hero-stage { display:block; position:sticky; top:0; height:100svh; overflow:clip; opacity:var(--stage-opacity,1); }
 .banking-product-preview { opacity:1; mask-image:none; -webkit-mask-image:none; }
 .hero.home-film-hero .home-film-credentials { position:relative; z-index:2; margin-top:-55svh; padding-top:120px; background:linear-gradient(to bottom,#fff0,#fff 110px); }
 .home-film-credentials > div { opacity:1; transform:none; }
 .home-film-builders .home-film-logos .leader-desktop-only { display:none; }
 .home-film-credentials .home-film-marquee-track { backface-visibility:visible; }
 .home-film-credentials img[src$="official-stanford-university.png"] { filter:grayscale(1); mix-blend-mode:multiply; width:106px; max-height:42px; }
 .home-film-credentials .home-film-iit-crest { width:42px; height:42px; flex-basis:42px; overflow:visible; }
 .home-film-credentials .home-film-iit-crest img { width:42px; height:42px; max-width:none; max-height:none; filter:grayscale(1); mix-blend-mode:normal; object-fit:contain; }
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce) {
 .mobile-hero-hold { height:auto; }
 .mobile-hero-stage { position:relative; height:auto; opacity:1; overflow:visible; }
 .hero.home-film-hero .home-film-credentials { margin-top:0; padding-top:40px; background:#fff; }
}

/* Mobile opening has a deliberate sequence; section copy stays together on scroll. */
@keyframes mobile-opening-copy {
 from { opacity:0; translate:0 18px; }
 to { opacity:1; translate:0 0; }
}
@keyframes mobile-opening-product {
 from { opacity:0; translate:0 30px; }
 to { opacity:1; translate:0 0; }
}
@media (max-width:767.98px) and (prefers-reduced-motion:no-preference) {
 body:not([data-banking-demo]) main h1 { animation:mobile-opening-copy 900ms cubic-bezier(.16,1,.3,1) 80ms both; }
 .home-film-hero .home-film-details { animation:mobile-opening-copy 900ms cubic-bezier(.16,1,.3,1) 220ms both; }
 .banking-preview-glass { animation:mobile-opening-product 1100ms cubic-bezier(.16,1,.3,1) 340ms both; }
 [data-mobile-entry="pending"] { opacity:0; translate:0 28px; }
}

/* Restore the desktop product story as a readable, navigable mobile presentation. */
@media (max-width:767.98px) {
 .hero.home-banking-hero { padding:40px 12px 48px; }
 .home-banking-hero .phone-workflow { display:none; }
 .home-banking-hero-heading { display:block; margin:0 12px 28px; opacity:1; transform:none; }
 .home-banking-hero-subtitle { flex-direction:column; gap:14px; max-width:320px; margin:auto; text-align:center; font-size:16px; line-height:1.5; }
 .home-banking-hero-lock { flex-basis:auto; width:54px; height:54px; }
 #home-workflow-story { display:block; height:clamp(560px,calc(100svh - 180px),700px); border-radius:18px; opacity:1; transform:none; }
}
@media(max-width:767.98px) {
 #home-workflow-story { height:auto; min-height:0; overflow:visible; }
 #business-progress .customer-ledger { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 24px 16px; margin:0 -24px; scrollbar-width:none; }
 #business-progress .customer-ledger > li { flex:0 0 88%; min-width:0; scroll-snap-align:center; }
 #business-progress .ledger-row { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:0 0 24px; border:0; opacity:1; transform:none; }
 #business-progress .ledger-thumb { display:block; order:-1; position:static; width:100%; height:260px; aspect-ratio:4/3; object-fit:cover; border-radius:16px; opacity:1; transform:none; }
 #business-progress .ledger-index,#business-progress .ledger-arrow { display:none; }
 #business-progress .ledger-name { display:flex; flex-direction:column; gap:5px; }
 #business-progress .ledger-name strong { font:400 26px/1.2 'Season Serif',serif; }
 #business-progress .ledger-name small { font-size:12px; color:#888; }
 #business-progress .ledger-metrics { display:flex; gap:22px; margin:0; width:100%; }
 #business-progress .ledger-metrics dt { font-size:24px; }
 #business-progress .ledger-metrics dd { font-size:12px; line-height:1.5; }
 #business-progress .ledger-story { display:block; font-size:14px; line-height:1.5; color:#666; }
}
.customer-carousel-controls { display:none; }
@media(max-width:767.98px) {
 #home-workflow-story { mask-image:none; }
 .customer-carousel-controls { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:8px; }
 .customer-carousel-controls span { margin-right:auto; color:#888; font:12px Inter,sans-serif; }
 .customer-carousel-controls button { display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:#f1f1f1; color:#222; }
 .customer-carousel-controls button:disabled { opacity:.3; }
}
@media(max-width:767.98px) and (prefers-reduced-motion:no-preference) {
 #expert-statement[data-mobile-sequence] .expert-statement-stage { position:sticky; top:76px; padding:24px; overflow:hidden; }
 #expert-statement[data-mobile-sequence] .expert-statement-copy { position:relative; width:100%; height:100%; max-width:440px; margin:auto; text-align:left; padding:0; }
 #expert-statement[data-mobile-sequence] .headcount-head h2 { margin:0 0 16px; font-size:32px; line-height:1.12; text-wrap:initial; }
 #expert-statement[data-mobile-sequence] .headcount-head p { font-size:16px; line-height:1.5; text-wrap:initial; }
 #expert-statement[data-mobile-sequence] .headcount-compare { display:flex; flex-direction:column; margin-top:26px; }
 #expert-statement[data-mobile-sequence] .headcount-side { border:0; padding:0 0 0 22px; }
 #expert-statement[data-mobile-sequence] .headcount-side::before { left:0; right:auto; top:8px; width:6px; height:6px; }
 #expert-statement[data-mobile-sequence] .headcount-side h3 { font-size:23px; margin-bottom:8px; }
 #expert-statement[data-mobile-sequence] .headcount-side p { font-size:14px; line-height:1.5; }
 #expert-statement[data-mobile-sequence] .headcount-gap { position:relative; order:2; height:52px; margin:10px 0; padding:17px 0 0 22px; border:0; text-align:left; font-size:10px; }
 #expert-statement[data-mobile-sequence] .headcount-gap::before { content:''; position:absolute; top:0; bottom:0; left:2px; width:2px; background:repeating-linear-gradient(to bottom,#999 0 3px,transparent 3px 8px); transform:scaleY(var(--gap-draw,0)); transform-origin:top; }
 #expert-statement[data-mobile-sequence] .headcount-close { position:absolute; inset:0; display:flex; align-items:center; margin:0; padding-bottom:60px; font:400 36px/1.16 'Season Serif',serif; letter-spacing:-.035em; text-align:left; pointer-events:none; }
}
.mobile-capability-video { display:none; }
@media(max-width:767.98px) {
 body:not([data-banking-demo]) .home-solutions #connected-banking-stack.bank-stack-story { height:250svh; }
 #connected-banking-stack .bank-stack-stage { position:sticky; top:76px; height:calc(100svh - 76px); min-height:560px; overflow:hidden; }
 #connected-banking-stack .bank-stack-frame[data-mobile] { position:relative; display:block; height:100%; padding:28px 24px; overflow:hidden; }
 #connected-banking-stack [data-mobile] .bank-stack-opening { position:absolute; top:32px; left:24px; right:24px; text-align:center; opacity:calc(1 - var(--phone-connect,0)); transform:translateY(calc(var(--phone-connect,0) * -16px)); }
 #connected-banking-stack [data-mobile] .bank-stack-pieces { position:absolute; top:180px; left:0; width:100%; height:430px; margin:0; --u:calc(100cqw / 1050); opacity:calc(1 - var(--phone-connect,0)); transform:scale(calc(1 - var(--phone-connect,0) * .12)); mask-image:none; }
 #connected-banking-stack [data-mobile] .bank-stack-resolved { position:absolute; top:32px; left:24px; right:24px; margin:0; text-align:center; opacity:var(--phone-connect,0); }
 #connected-banking-stack [data-mobile] .bsu-tabs { display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; gap:8px; padding-bottom:4px; }
 #connected-banking-stack [data-mobile] .bsu-tab { width:auto; flex:none; white-space:nowrap; min-height:36px; padding:9px 12px; font-size:11px; }
 #connected-banking-stack [data-mobile] .bank-stack-app { display:block; position:absolute; top:180px; left:16px; right:16px; bottom:20px; padding:0; --u:1.25px; opacity:var(--phone-connect,0); transform:translateY(calc((1 - var(--phone-connect,0)) * 28px)); overflow:hidden; }
 #connected-banking-stack [data-mobile] .bsa-agent { height:100%; overflow:auto; border:1px solid #e7e7e7; border-radius:12px; box-shadow:0 12px 40px #00000008; }
 #connected-banking-stack [data-mobile] .bsa-work,#connected-banking-stack [data-mobile] .bsu-side { display:none; }
 #connected-banking-stack [data-mobile]:not([data-resolved]) .bank-stack-resolved,#connected-banking-stack [data-mobile]:not([data-resolved]) .bank-stack-app { pointer-events:none; }
 .home-solutions-heading { margin:0 0 40px; padding-top:0; }
 .home-solutions-intro { min-height:58svh; margin:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:18px; }
 .home-solutions-intro > span { font-size:14px; color:#777; }
 .home-solutions-intro strong { font-size:32px; gap:12px; }
 #home-solutions-title { margin:0 0 24px; }
 .home-solutions-lead { margin-bottom:48px; }
 .solution-film-row { padding:32px 0 48px; }
 .solution-film-row .solution-film { display:block; width:100%; height:auto; aspect-ratio:auto; margin:28px 0 0; padding:0; border:0; box-shadow:none; overflow:visible; }
 .solution-film-row .solution-film > .pw { display:none; }
 .mobile-capability-video { display:block; width:100%; border-radius:10px; overflow:hidden; background:#f5f5f5; }
 .mobile-capability-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
 .performance-top { display:flex; flex-direction:column; gap:32px; }
 .performance-chart-area { width:100%; min-width:0; }
 .perf-plot { width:100%; }
 .perf-x:last-of-type { translate:-100% 0; }
 .perf-end { right:auto; padding:2px 4px; background:#ffffffdc; }
 .performance-integration-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
 .performance-integration-list li { width:100%; min-width:0; height:70px; }
 .performance-integration-list img { width:26px; height:26px; object-fit:contain; }
 .performance-integration-list span { font-size:9px; }
 #home-security { padding:56px 20px; }
 #home-security .bse-shell { padding:0; width:100%; }
 #home-security .bse-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:28px; }
 #home-security .bse-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-height:150px; gap:20px; padding:18px 14px; border:1px solid #e6e6e6; border-radius:12px; background:#fafafa; }
 #home-security .bse-card h3 { font-size:14px; line-height:1.45; }
 #home-security .bse-icon { width:30px; height:30px; }
}
@media(max-width:767.98px) and (prefers-reduced-motion:reduce) {
 body:not([data-banking-demo]) .home-solutions #connected-banking-stack.bank-stack-story { height:auto; }
 #connected-banking-stack .bank-stack-stage { position:relative; top:0; height:700px; }
}
@media(max-width:767.98px) {
 #connected-banking-stack [data-mobile] .bank-stack-opening h3,#connected-banking-stack [data-mobile] .bank-stack-resolved h3 { font-size:32px; line-height:1.12; white-space:normal; text-wrap:balance; }
 .home-solutions-intro { min-height:85svh; }
 .mobile-capability-video { position:relative; }
 .mobile-video-play { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:46px; height:46px; padding:12px; border:1px solid #ffffff50; border-radius:50%; color:white; background:#222b; backdrop-filter:blur(8px); cursor:pointer; }
 .mobile-video-play[hidden] { display:none; }
 .mobile-video-play svg { width:22px; height:22px; }
 body:not([data-banking-demo]) #performance-integrations { padding-inline:24px; }
 .performance-chart-area { margin:0; padding:0; }
 .perf-x { font-size:10px; }
 .perf-x[style*="97%"] { translate:-100% 0; }
}
@media(max-width:767.98px) {
 .perf-end b { white-space:nowrap; }
}
.mobile-intro-stage { display:contents; }
.capability-controls { display:none; }
@media(max-width:767.98px) {
 #expert-statement .headcount-head h2 { text-align:center; }
 #connected-banking-stack .bank-stack-frame[data-mobile] { box-sizing:border-box; width:100%; max-width:100%; }
 #connected-banking-stack [data-mobile] .bank-stack-opening,#connected-banking-stack [data-mobile] .bank-stack-resolved { box-sizing:border-box; width:auto; max-width:none; padding:0; left:24px; right:24px; bottom:auto; }
 #connected-banking-stack [data-mobile] .bank-stack-opening h3,#connected-banking-stack [data-mobile] .bank-stack-resolved h3 { width:100%; max-width:none; margin-inline:0; text-align:center; }
 #connected-banking-stack [data-mobile] .bank-stack-app { display:grid; grid-template-rows:minmax(0,1fr) minmax(190px,.85fr); gap:12px; top:170px; bottom:20px; }
 #connected-banking-stack [data-mobile] .bsa-agent { grid-row:1; min-height:0; height:100%; box-sizing:border-box; }
 #connected-banking-stack [data-mobile] .bsa-work { display:flex; position:relative; grid-row:2; grid-column:1; left:auto; right:auto; top:auto; bottom:auto; width:100%; height:100%; min-height:0; box-sizing:border-box; padding:14px; border:1px solid #e2e2e2; border-radius:10px; background:#fff; box-shadow:none; }
 #connected-banking-stack [data-mobile] .bsa-work:not(.is-active) { display:none; }
 #connected-banking-stack [data-mobile] .bsa-work.is-active { box-shadow:none; }
 .solution-film-list { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; align-items:stretch; }
 .solution-film-list .solution-film-row { flex:0 0 100%; min-width:0; box-sizing:border-box; scroll-snap-align:start; padding-bottom:16px; }
 .capability-controls { display:flex; align-items:center; gap:10px; margin:12px 0 48px; }
 .capability-controls span { margin-right:auto; color:#888; font-size:12px; }
 .capability-controls button { width:40px; height:40px; border:0; border-radius:50%; background:#f4f4f4; color:#333; font-size:20px; }
 .capability-controls button:disabled { opacity:.3; }
 .performance-integration-list li,.performance-integration-list .integration-face { background:none; border:0; box-shadow:none; }
 .performance-integration-list li { border-radius:0; }
}
/* Keep the title and supporting line in normal flow inside one reveal. */
.mobile-os-copy { display:contents; }
@media(max-width:767.98px) and (prefers-reduced-motion:no-preference) {
 .home-solutions-heading { height:155svh; margin:0 0 32px; position:relative; }
 .mobile-intro-stage { display:block; position:sticky; top:76px; height:calc(100svh - 76px); }
 .home-solutions-intro { position:absolute; inset:0; min-height:0; margin:0; justify-content:center; align-items:center; opacity:calc(var(--brand-in,0) * var(--brand-out,1)); transform:translateY(calc((1 - var(--brand-in,0)) * 28px)); }
 .mobile-os-copy { display:block; position:absolute; top:32px; left:0; right:0; opacity:var(--os-in,0); transform:translateY(calc((1 - var(--os-in,0)) * 56px)); transition:opacity .55s ease-out, transform .75s cubic-bezier(.22,1,.36,1); }
 #home-solutions-title { position:static; margin:0 0 18px; }
 .home-solutions-heading .home-solutions-lead { position:static; margin:0; }
 .mobile-os-copy .solution-film-layout { margin-top:24px; text-align:left; }
 .mobile-os-copy .solution-film-row { padding-top:20px; }
 .mobile-os-copy .capability-controls { margin-bottom:0; }
 .home-solutions-heading .home-solutions-intro { bottom:auto; height:calc(100svh - 76px); }
 .mobile-os-copy #home-solutions-title { margin-bottom:14px; }
}

/* Mobile homepage: fixed preview and stable, single-pass entrances. */
@media(max-width:767.98px) {
 .banking-product-preview { padding:0; background:#fff; margin-top:36px; }
 .kyb-preview-crop { position:relative; width:100%; height:auto; aspect-ratio:4/3; overflow:hidden; mask-image:linear-gradient(90deg,#000 84%,transparent 100%); }
 .kyb-preview-crop img { position:absolute; top:0; left:0; display:block; width:120%; max-width:none; height:auto; margin:0; transform:translateY(-3.5%); }
 .home-film-credentials .home-film-marquee-track { animation-duration:14s; animation-delay:0s; }
 .home-film-backers .home-film-marquee-track { animation-duration:10s; }
 .home-film-marquee:hover .home-film-marquee-track { animation-play-state:running; }
 .home-film-credentials { --program-slot:144px; }
 .home-film-programs .home-film-nvidia { width:120px; height:44px; flex:none; }
 .home-film-programs .home-film-nvidia picture { display:block; width:100%; height:100%; }
 .home-film-programs .home-film-nvidia img { width:120px; height:44px; max-width:none; max-height:none; object-fit:contain; object-position:center; filter:grayscale(1); mix-blend-mode:multiply; opacity:1; }
 #connected-banking-stack [data-mobile] .bsa-agent { overflow:hidden; overflow-anchor:none; touch-action:pan-y; }
 .home-solutions-heading { background:#080808; color:#fff; box-shadow:0 0 0 24px #080808; }
 .home-solutions-heading #home-solutions-title,.home-solutions-heading .home-solutions-intro,.home-solutions-heading .solution-film-copy h3 { color:#fff; }
 .home-solutions-heading .home-solutions-intro > span,.home-solutions-heading .home-solutions-lead,.home-solutions-heading .solution-film-copy p,.home-solutions-heading .solution-film-number { color:#bdbdbd; }
 .home-solutions-heading .home-solutions-intro img { filter:brightness(0) invert(1); }
 .home-solutions-heading .solution-film-row { border-color:#333; }
 #home-security .bse-grid { border-top:0; border-bottom:0; }
}
@media(max-width:767.98px) and (prefers-reduced-motion:no-preference) {
 .mobile-os-copy { transform:translate3d(0,calc((1 - var(--os-in,0))*220px),0); transition:none; }
 [data-mobile-entry="pending"] { translate:none; }
}

/* Explicit mobile introduction canvas, including the product carousel. */
@media(max-width:767.98px) {
 #context-solutions .home-solutions-heading { --home-ink:#fff; --home-muted:#c5c5c5; background:#080808; color:#fff; isolation:isolate; }
 #context-solutions .mobile-intro-stage { background:#080808; }
 #context-solutions .home-solutions-heading::before { content:''; position:absolute; inset:0 -24px; background:#080808; z-index:-1; pointer-events:none; }
 #context-solutions .home-solutions-heading .home-solutions-intro,
 #context-solutions .home-solutions-heading .home-solutions-intro strong,
 #context-solutions .home-solutions-heading #home-solutions-title,
 #context-solutions .home-solutions-heading .solution-film-copy h3 { color:#fff; }
 #context-solutions .home-solutions-heading .home-solutions-lead,
 #context-solutions .home-solutions-heading .solution-film-copy p { color:#c5c5c5; }
 #home-security.home-security-editorial, #home-security .bse-shell, #home-security .bse-grid { border-top:0; border-bottom:0; box-shadow:none; }
}
@media(max-width:767.98px) and (prefers-reduced-motion:no-preference) {
 #context-solutions .mobile-os-copy { opacity:0; transform:translate3d(0,120px,0); transition:opacity 1300ms ease,transform 1800ms cubic-bezier(.22,1,.36,1); }
 #context-solutions .mobile-os-entered .mobile-os-copy { opacity:1; transform:translate3d(0,0,0); }
 #context-solutions .mobile-os-entered .home-solutions-intro { opacity:0; pointer-events:none; }
}
@media(max-width:767.98px) {
 #performance-integrations .performance-integration-list li,
 #performance-integrations .performance-integration-list li:hover,
 #performance-integrations .performance-integration-list li:nth-child(8n + 1):hover,
 #performance-integrations .performance-integration-list li:nth-child(8n):hover { transform:none; transition:none; }
}

@media(max-width:767.98px) {
 html[data-mobile-dark-nav] .site-header .nav-shell { background:#111111f2 !important; border-color:#363636; color:#fff; }
 html[data-mobile-dark-nav] .site-header .nav-shell .brand,
 html[data-mobile-dark-nav] .site-header .nav-shell a:not(.nav-cta) { color:#fff !important; }
 html[data-mobile-dark-nav] .site-header .context-logo { filter:brightness(0) invert(1); }
 html[data-mobile-dark-nav] .site-header .menu-button { color:#fff; }
 html[data-mobile-dark-nav] .site-header .menu-button span { background:#fff; }
 html[data-mobile-dark-nav] .site-header .nav-shell a.nav-mobile-cta,
 html[data-mobile-dark-nav] .site-header .nav-shell .nav-cta { background:#fff; color:#111 !important; border-color:#fff; }
 html[data-mobile-dark-nav] .site-header .nav-shell a:hover { background:#292929; }
 html[data-mobile-dark-nav] .site-header .nav-industries-panel { background:#222; }
 html[data-mobile-dark-nav] .site-header .nav-industry-link strong { color:#fff; }
}
@media(max-width:767.98px) and (prefers-reduced-motion:no-preference) {
 #context-solutions .home-solutions-heading:not(.mobile-os-entered) .mobile-os-copy { transition:opacity 180ms ease,transform 180ms ease; pointer-events:none; }
}