/* Simon POC — V7-inspired dark product site · Inter, Crimson Text for quotes */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --font-heading: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-quote: "Crimson Text", Georgia, "Times New Roman", serif;
  /* Zinc scale */
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  --brand: #009689;
  --brand-hover: #007a6e;

  --bg: #0a0a0b;
  --bg-elevated: #111113;
  --bg-soft: #18181b;
  --bg-card: #141416;
  --text: var(--zinc-50);
  --text-secondary: var(--zinc-400);
  --text-muted: var(--zinc-500);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --accent: #e8a04c;
  --accent-soft: rgba(232, 160, 76, 0.15);
  --conflict: #f87171;
  --ok: #4ade80;
  --white: var(--zinc-50);
  --max: 1120px;
  --gutter: clamp(1.5rem, 4vw, 2.5rem);
  --radius: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: #fafafa;
}

img {
  max-width: 100%;
  display: block;
}

/* —— Hide wireframe chrome in designed mode —— */
.wf-banner,
.page-meta,
.section-id,
.visual-note,
.pattern-tag,
.sitemap-jump {
  display: none !important;
}

/* —— Nav —— */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  overflow: visible;
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Blur sits on a layer behind the bar's own fill. Keeping backdrop-filter off
   .site-header matters: it would become a backdrop root and cancel the blur on
   the mega panel nested inside it. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.35s var(--ease);
}

.site-header.is-scrolled::before,
.site-header.is-light::before {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:has(.mega-backdrop.is-open) .site-header::before {
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.site-header.is-scrolled {
  background: rgba(10, 10, 11, 0.8);
  border-bottom-color: var(--border);
}

.site-header.is-light {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(9, 9, 11, 0.08);
  box-shadow: 0 1px 0 rgba(9, 9, 11, 0.04);
}

.site-header.is-light .logo img {
  filter: brightness(0);
}

.site-header.is-light .nav-list > li > a,
.site-header.is-light .nav-list > li > button {
  color: #09090b;
}

.site-header.is-light .nav-list > li > a:hover,
.site-header.is-light .nav-list > li > button:hover,
.site-header.is-light .nav-list > li > a[aria-current="page"] {
  color: #52525b;
}

.site-header.is-light .nav-actions .btn {
  background: #09090b;
  color: #fafafa;
}

.site-header.is-light .nav-actions .btn:hover {
  background: #27272a;
  color: #fafafa;
}

/* Sticky section title pin — sits under nav once the section head scrolls away */
.section-pin {
  position: fixed;
  left: 50%;
  right: auto;
  width: min(100%, calc(var(--max) + 240px));
  top: var(--section-pin-top, 3.5rem);
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.4rem);
  transition:
    opacity 0.22s var(--ease),
    visibility 0.22s var(--ease),
    transform 0.22s var(--ease),
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
  background: rgba(10, 10, 11, 0.88);
  border-left: 1px solid var(--brand);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--zinc-50);
  box-sizing: border-box;
}

.section-pin.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.section-pin.is-light {
  background: rgba(255, 255, 255, 0.92);
  border-right-color: rgba(9, 9, 11, 0.08);
  border-bottom-color: rgba(9, 9, 11, 0.08);
  border-left-color: var(--brand);
  color: var(--zinc-950);
}

.section-pin-inner {
  padding: 0.6rem clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .section-pin-inner {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

.section-pin-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-pin-title .product-title-muted,
.section-pin-product {
  color: var(--zinc-400);
  font-weight: 600;
}

.section-pin.is-light .section-pin-title .product-title-muted,
.section-pin.is-light .section-pin-product {
  color: var(--zinc-400);
}

body:has(#site-nav.mega-open) .section-pin,
body:has(.mobile-nav:not([hidden])) .section-pin {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .section-pin {
    transition:
      opacity 0.01ms,
      visibility 0.01ms;
    transform: translate(-50%, 0);
  }
}

.nav-inner {
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2.75rem;
  position: relative;
  z-index: 3;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 18px;
  width: auto;
  transition: filter 0.3s var(--ease);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.75rem;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-start;
}

.nav-list > li {
  position: relative;
}

.nav-list > li > a,
.nav-list > li > button {
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color 0.25s var(--ease);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-list > li > a:hover,
.nav-list > li > button:hover,
.nav-list > li > a[aria-current="page"] {
  color: rgba(250, 250, 250, 0.7);
}

/* Bar styling keys off the backdrop, not .mega-open: the class is held for
   280ms after close so the panel can fade, and the nav must not lag behind it */
body:has(.mega-backdrop.is-open) .site-header .nav-trigger {
  color: rgba(250, 250, 250, 0.38);
}

body:has(.mega-backdrop.is-open) .site-header .nav-trigger.is-active,
body:has(.mega-backdrop.is-open) .site-header .nav-trigger.is-active:hover {
  color: #fafafa;
}

.nav-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.75;
  transition: transform 0.2s var(--ease);
}

.nav-trigger.is-active .nav-chevron {
  transform: rotate(225deg) translateY(-1px);
}

/* —— Mega menu —— */
/* Invisible catcher: closes the menu on click-away, no page-wide dim */
.mega-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 90;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mega-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-shell {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: 1.75rem var(--gutter) 2.75rem;
  pointer-events: none;
}

body:has(.mega-backdrop.is-open) .mega-shell {
  pointer-events: auto;
}

/* Frosted plate that stops at the panel instead of covering the viewport.
   The surface is always built; only its opacity animates, so the blur is never
   interpolated and the plate lands on the same 0.18s curve as the panel. */
.mega-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(10, 10, 11, 0.78);
  border-bottom: 1px solid rgba(250, 250, 250, 0.08);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  transition: opacity 0.18s var(--ease);
}

.site-header.is-light .mega-shell::before {
  background: rgba(244, 244, 245, 0.86);
  border-bottom-color: rgba(9, 9, 11, 0.08);
}

body:has(.mega-backdrop.is-open) .mega-shell::before {
  opacity: 1;
}

.mega-panel {
  grid-area: 1 / 1;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.mega-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Panel swaps keep position; only the first open slides in */
.mega-panel.is-swap {
  transform: none;
  transition: opacity 0.16s var(--ease);
}

.mega-grid {
  display: grid;
  gap: 1.25rem;
}

.mega-grid--product {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .mega-grid--product {
    grid-template-columns: 1fr;
  }
}

.mega-grid--links {
  grid-template-columns: repeat(3, 1fr);
}

.mega-grid--links:has(> :nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}

.mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.65rem 0.65rem 0.95rem;
  min-height: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition:
    opacity 0.2s var(--ease),
    background 0.2s var(--ease);
}

.mega-card:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.09);
}

.mega-card:hover .mega-card-body strong {
  color: #fafafa;
}

.mega-card:hover .mega-arrow,
.mega-link-card:hover .mega-arrow {
  transform: translateX(3px);
}

.mega-card:hover .mega-arrow--out {
  transform: translate(3px, -3px);
}

.mega-arrow {
  display: inline-block;
  transition: transform 0.22s var(--ease);
}

.mega-shell .mega-arrow {
  color: var(--brand);
}

.mega-card-visual {
  height: 168px;
  border-radius: 10px;
  background: transparent;
  border: none;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.mega-grid--product .mega-card-visual,
.mega-grid--solutions .mega-card-visual,
.mega-grid--resources .mega-card-visual,
.mega-grid--company .mega-card-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: 0;
  flex-shrink: 0;
}

/* Foundation — isometric stack; gap tightens on hover */
.mega-stack {
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 720px;
}

.mega-stack-stage {
  position: relative;
  width: 46%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(45deg);
  margin-top: -4%;
}

.mega-stack-stage span {
  position: absolute;
  inset: 0;
  border-radius: 18%;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.35);
  box-shadow: none;
  transform: translateZ(calc(var(--i) * 18px));
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease);
}

.mega-stack-stage span:last-child {
  border-color: rgba(250, 250, 250, 0.7);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-stack-stage
  span {
  transform: translateZ(calc(var(--i) * 8px));
  border-color: rgba(250, 250, 250, 0.55);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-stack-stage
  span:last-child {
  border-color: rgba(250, 250, 250, 0.9);
}

/* Work — overlapping workspace panels; align on hover */
.mega-work {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-work-stage {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
}

.mega-work-stage span {
  position: absolute;
  inset: 8%;
  border-radius: 14px;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.3);
  transform: translate(
    calc(var(--i) * 10px - 10px),
    calc(var(--i) * 10px - 10px)
  );
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

.mega-work-stage span:nth-child(1) {
  opacity: 0.45;
  border-color: rgba(250, 250, 250, 0.22);
}

.mega-work-stage span:nth-child(2) {
  opacity: 0.7;
  border-color: rgba(250, 250, 250, 0.35);
}

.mega-work-stage span:nth-child(3) {
  opacity: 1;
  border-color: rgba(250, 250, 250, 0.65);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-work-stage
  span {
  transform: translate(0, 0);
  border-color: rgba(250, 250, 250, 0.55);
  opacity: 1;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-work-stage
  span:nth-child(3) {
  border-color: rgba(250, 250, 250, 0.85);
}

/* Skills library — stacked box icons; align on hover like Work */
.mega-skills {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  box-sizing: border-box;
}

.mega-skills-stage {
  position: relative;
  width: 48%;
  aspect-ratio: 1;
}

.mega-skills-stage > span {
  position: absolute;
  inset: 0;
  color: rgba(250, 250, 250, 0.65);
  transform: translate(
    calc(var(--i) * 10px - 10px),
    calc(var(--i) * 10px - 10px)
  );
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

.mega-skills-stage > span:nth-child(1) {
  opacity: 0.35;
  color: rgba(250, 250, 250, 0.28);
}

.mega-skills-stage > span:nth-child(2) {
  opacity: 0.6;
  color: rgba(250, 250, 250, 0.4);
}

.mega-skills-stage > span:nth-child(3) {
  opacity: 1;
  color: rgba(250, 250, 250, 0.65);
}

.mega-skills-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mega-skills-stage path {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-skills-stage
  > span {
  transform: translate(0, 0);
  opacity: 1;
  color: rgba(250, 250, 250, 0.55);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-skills-stage
  > span:nth-child(3) {
  color: rgba(250, 250, 250, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .mega-skills-stage > span {
    transition: none;
    transform: none;
  }

  .mega-stack-stage span,
  .mega-work-stage span {
    transition: none;
  }
}

.mega-ticks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 0.85rem;
  color: rgba(250, 250, 250, 0.42);
}

.mega-ticks i {
  display: block;
  width: 1.5px;
  flex: 0 0 1.5px;
  border-radius: 1px;
  background: currentColor;
  height: 14px;
  transform: translateY(0);
  opacity: 0.55;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    opacity 0.3s var(--ease),
    height 0.45s var(--ease),
    transform 0.45s var(--ease);
}

/* Left: messy / fragmented stream */
.mega-ticks i:nth-child(-n + 12) {
  height: 56px;
  opacity: 0.4;
}
.mega-ticks i:nth-child(1) {
  transform: translateY(-22px);
  height: 64px;
}
.mega-ticks i:nth-child(2) {
  transform: translateY(18px);
  height: 48px;
}
.mega-ticks i:nth-child(3) {
  transform: translateY(-14px);
  height: 58px;
}
.mega-ticks i:nth-child(4) {
  transform: translateY(24px);
  height: 40px;
}
.mega-ticks i:nth-child(5) {
  transform: translateY(-26px);
  height: 52px;
}
.mega-ticks i:nth-child(6) {
  transform: translateY(12px);
  height: 60px;
}
.mega-ticks i:nth-child(7) {
  transform: translateY(-8px);
  height: 44px;
}
.mega-ticks i:nth-child(8) {
  transform: translateY(20px);
  height: 54px;
}
.mega-ticks i:nth-child(9) {
  transform: translateY(-18px);
  height: 50px;
}
.mega-ticks i:nth-child(10) {
  transform: translateY(14px);
  height: 42px;
}
.mega-ticks i:nth-child(11) {
  transform: translateY(-10px);
  height: 46px;
}
.mega-ticks i:nth-child(12) {
  transform: translateY(8px);
  height: 36px;
}

/* Mid: converging */
.mega-ticks i:nth-child(n + 13):nth-child(-n + 20) {
  height: 28px;
  opacity: 0.5;
}
.mega-ticks i:nth-child(13) {
  transform: translateY(-6px);
}
.mega-ticks i:nth-child(14) {
  transform: translateY(5px);
}
.mega-ticks i:nth-child(15) {
  transform: translateY(-4px);
}
.mega-ticks i:nth-child(16) {
  transform: translateY(3px);
}
.mega-ticks i:nth-child(17) {
  transform: translateY(-2px);
}
.mega-ticks i:nth-child(18) {
  transform: translateY(2px);
}
.mega-ticks i:nth-child(19) {
  transform: translateY(-1px);
}
.mega-ticks i:nth-child(20) {
  transform: translateY(0);
}

/* Right: unified outbound ticks */
.mega-ticks i:nth-child(n + 21) {
  height: 16px;
  opacity: 0.7;
  transform: translateY(0);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-ticks {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-ticks i {
  opacity: 1;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-ticks
  i:nth-child(-n + 12) {
  height: 32px;
  transform: translateY(0);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-ticks
  i:nth-child(n + 13):nth-child(-n + 20) {
  height: 18px;
  transform: translateY(0);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-ticks
  i:nth-child(n + 21) {
  height: 16px;
}

/* Work: abstract response lines */
.mega-lines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: 0 1.35rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-lines span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: left center;
  transition:
    width 0.45s var(--ease),
    opacity 0.35s var(--ease),
    color 0.3s var(--ease),
    background 0.3s var(--ease);
}

/* Default: 3 lines, varying width */
.mega-lines span:nth-child(1) {
  width: 72%;
  opacity: 0.85;
}
.mega-lines span:nth-child(2) {
  width: 54%;
  opacity: 0.7;
}
.mega-lines span:nth-child(3) {
  width: 63%;
  opacity: 0.78;
}
.mega-lines span:nth-child(4),
.mega-lines span:nth-child(5) {
  width: 0;
  opacity: 0;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-lines {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-lines
  span:nth-child(1) {
  width: 92%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-lines
  span:nth-child(2) {
  width: 78%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-lines
  span:nth-child(3) {
  width: 86%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-lines
  span:nth-child(4) {
  width: 64%;
  opacity: 1;
  transition-delay: 0.06s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-lines
  span:nth-child(5) {
  width: 48%;
  opacity: 1;
  transition-delay: 0.12s;
}

/* Shared line language for denser mega grids */
.mega-grid--links .mega-card-visual {
  height: 128px;
}

.mega-grid--solutions .mega-card-visual {
  height: auto;
}

.mega-grid--resources .mega-card-visual {
  height: auto;
}

.mega-grid--company .mega-card-visual {
  height: auto;
}

.mega-grid--links .mega-card-body strong {
  font-size: 0.98rem;
}

.mega-grid--links .mega-card-body p {
  font-size: 0.8125rem;
}

.mega-grid--solutions .mega-card-body strong,
.mega-grid--resources .mega-card-body strong,
.mega-grid--company .mega-card-body strong {
  font-size: 1.05rem;
}

.mega-grid--solutions .mega-card-body p,
.mega-grid--resources .mega-card-body p,
.mega-grid--company .mega-card-body p {
  font-size: 0.875rem;
}

/* Solutions: investment firms — thin building columns */
.mega-firms {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-firms-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.55rem;
  width: 62%;
  height: 58%;
}

.mega-firms-stage span {
  flex: 1 1 0;
  height: var(--h, 50%);
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.3);
  transition:
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-firms-stage
  span {
  height: 88%;
  border-color: rgba(250, 250, 250, 0.55);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-firms-stage
  span:nth-child(2),
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-firms-stage
  span:nth-child(4) {
  height: 100%;
  border-color: rgba(250, 250, 250, 0.7);
}

/* Solutions: pricing — small seat points in concentric rings */
.mega-price {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-price-stage {
  position: relative;
  width: 88%;
  aspect-ratio: 1;
}

.mega-price-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(250, 250, 250, 0.22);
  border: none;
  opacity: 1;
  transition:
    background 0.35s var(--ease),
    opacity 0.35s var(--ease);
  transition-delay: 0ms;
}

.mega-price-dot--outer {
  transform: rotate(calc(var(--i) * 20deg)) translateY(-3.35rem);
}

.mega-price-dot--mid {
  transform: rotate(calc(var(--i) * 30deg)) translateY(-2.2rem);
}

.mega-price-dot--inner {
  transform: rotate(calc(var(--i) * 60deg)) translateY(-1.15rem);
}

.mega-price-dot--core {
  transform: none;
}

.mega-price-dot--outer:nth-child(1),
.mega-price-dot--outer:nth-child(2),
.mega-price-dot--outer:nth-child(4),
.mega-price-dot--outer:nth-child(7),
.mega-price-dot--outer:nth-child(11),
.mega-price-dot--mid:nth-child(19),
.mega-price-dot--mid:nth-child(22),
.mega-price-dot--mid:nth-child(25),
.mega-price-dot--inner:nth-child(31),
.mega-price-dot--inner:nth-child(33),
.mega-price-dot--core {
  background: rgba(250, 250, 250, 0.85);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-price-dot {
  background: rgba(250, 250, 250, 0.9);
  border-color: transparent;
  opacity: 1;
  transition-delay: calc(var(--i) * 22ms);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-price-dot--mid {
  transition-delay: calc(0.16s + var(--i) * 22ms);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-price-dot--inner {
  transition-delay: calc(0.32s + var(--i) * 22ms);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-price-dot--core {
  transition-delay: 0.48s;
}

/* Solutions: compare — two panels */
.mega-compare {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-compare-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 68%;
  height: 58%;
  transition: gap 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-compare-stage b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 0.75rem;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.3);
  box-sizing: border-box;
  transition: border-color 0.35s var(--ease);
}

.mega-compare-stage b i {
  display: block;
  height: 0;
  border-top: 1.5px solid rgba(250, 250, 250, 0.28);
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

.mega-compare-stage b:first-child {
  border-color: rgba(250, 250, 250, 0.22);
}

.mega-compare-stage b:first-child i:nth-child(1) {
  width: 70%;
  opacity: 0.55;
}
.mega-compare-stage b:first-child i:nth-child(2) {
  width: 42%;
  opacity: 0.4;
}
.mega-compare-stage b:first-child i:nth-child(3) {
  width: 55%;
  opacity: 0.45;
}

.mega-compare-stage b:last-child {
  border-color: rgba(250, 250, 250, 0.55);
}

.mega-compare-stage b:last-child i:nth-child(1) {
  width: 88%;
}
.mega-compare-stage b:last-child i:nth-child(2) {
  width: 72%;
}
.mega-compare-stage b:last-child i:nth-child(3) {
  width: 80%;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage {
  gap: 0.45rem;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b {
  border-color: rgba(250, 250, 250, 0.55);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b:first-child
  i {
  opacity: 1;
  border-color: rgba(250, 250, 250, 0.45);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b:first-child
  i:nth-child(1) {
  width: 88%;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b:first-child
  i:nth-child(2) {
  width: 72%;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b:first-child
  i:nth-child(3) {
  width: 80%;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b:last-child {
  border-color: rgba(250, 250, 250, 0.8);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-compare-stage
  b:last-child
  i {
  border-color: rgba(250, 250, 250, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .mega-firms-stage span,
  .mega-price-stage span,
  .mega-compare-stage,
  .mega-compare-stage b i {
    transition: none;
  }
}

/* Resources: news — signal rings expand on hover */
.mega-news {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-news-stage {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
}

.mega-news-stage span {
  position: absolute;
  inset: calc(var(--i) * 16%);
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.3);
  transition:
    inset 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

.mega-news-stage span:nth-child(1) {
  border-color: rgba(250, 250, 250, 0.55);
}

.mega-news-stage span:nth-child(2) {
  opacity: 0.7;
}

.mega-news-stage span:nth-child(3) {
  opacity: 0.4;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-news-stage
  span {
  inset: calc(var(--i) * 10%);
  border-color: rgba(250, 250, 250, 0.55);
  opacity: 1;
}

/* Resources: Origin testimonial — static, non-link */
.mega-card--quote {
  cursor: default;
  /* Dark mega: light foreground plate */
  background: #fafafa !important;
  padding: 1.15rem 1.15rem 1.25rem;
  color: #09090b;
}

.mega-card--quote:hover {
  background: #fafafa !important;
}

.mega-quote-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.mega-quote-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.mega-quote-mark {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: none !important;
  opacity: 1 !important;
}

.mega-quote-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.05;
}

.mega-quote-brand-name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #09090b;
}

.mega-quote-brand-sub {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #52525b;
}

.mega-quote-text {
  margin: auto 0;
  padding: 0.5rem 0;
  font-family: var(--font-quote);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #09090b;
}

.mega-quote-attr {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex-shrink: 0;
}

.mega-quote-attr strong {
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #09090b;
}

.mega-quote-attr p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #52525b;
}

/* Light mega: zinc-950 plate + light type */
.site-header.is-light.mega-open .mega-card.mega-card--quote,
.site-header.is-light.mega-open .mega-card.mega-card--quote:hover {
  background: var(--zinc-950) !important;
  color: #fafafa;
}

.site-header.is-light.mega-open .mega-card--quote .mega-quote-mark {
  filter: none !important;
  opacity: 1 !important;
}

.site-header.is-light.mega-open .mega-card--quote .mega-quote-brand-name,
.site-header.is-light.mega-open .mega-card--quote .mega-quote-brand-sub {
  color: #fff !important;
}

.site-header.is-light.mega-open .mega-card--quote .mega-quote-text,
.site-header.is-light.mega-open .mega-card--quote .mega-quote-attr strong {
  color: #fafafa !important;
}

.site-header.is-light.mega-open .mega-card--quote .mega-quote-attr p {
  color: rgba(250, 250, 250, 0.55) !important;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-news-stage
  span:nth-child(1) {
  border-color: rgba(250, 250, 250, 0.85);
}

/* Resources: docs — stacked pages that fan on hover */
.mega-docs {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-docs-stage {
  position: relative;
  width: 48%;
  height: 58%;
}

.mega-docs-stage span {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.3);
  transform: translate(calc(var(--i) * 8px), calc(var(--i) * -6px))
    rotate(calc(var(--i) * -4deg));
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease);
}

.mega-docs-stage span:nth-child(1) {
  border-color: rgba(250, 250, 250, 0.22);
}

.mega-docs-stage span:nth-child(2) {
  border-color: rgba(250, 250, 250, 0.35);
}

.mega-docs-stage span:nth-child(3) {
  border-color: rgba(250, 250, 250, 0.6);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-docs-stage
  span {
  transform: translate(calc(var(--i) * 14px), calc(var(--i) * -10px))
    rotate(calc(var(--i) * -7deg));
  border-color: rgba(250, 250, 250, 0.5);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-docs-stage
  span:nth-child(3) {
  border-color: rgba(250, 250, 250, 0.85);
}

/* Resources: security — nested shields / frames tighten on hover */
.mega-secure {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-secure-stage {
  position: relative;
  width: 52%;
  aspect-ratio: 1;
}

.mega-secure-stage span {
  position: absolute;
  inset: calc(var(--i) * 14%);
  border-radius: 18% 18% 28% 28%;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.3);
  transition:
    inset 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease),
    border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-secure-stage span:nth-child(1) {
  border-color: rgba(250, 250, 250, 0.22);
}

.mega-secure-stage span:nth-child(2) {
  border-color: rgba(250, 250, 250, 0.35);
}

.mega-secure-stage span:nth-child(3) {
  border-color: rgba(250, 250, 250, 0.6);
  border-radius: 22% 22% 36% 36%;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-secure-stage
  span {
  inset: calc(var(--i) * 8%);
  border-color: rgba(250, 250, 250, 0.5);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-secure-stage
  span:nth-child(3) {
  border-color: rgba(250, 250, 250, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .mega-news-stage span,
  .mega-docs-stage span,
  .mega-secure-stage span {
    transition: none;
  }
}

/* Company: about — nodes pull together on hover */
.mega-about {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-about-stage {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
}

.mega-about-stage span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.35);
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-about-stage span:nth-child(3) {
  width: 28%;
  border-color: rgba(250, 250, 250, 0.6);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-about-stage
  span {
  transform: translate(-50%, -50%);
  width: 26%;
  border-color: rgba(250, 250, 250, 0.5);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-about-stage
  span:nth-child(3) {
  width: 34%;
  border-color: rgba(250, 250, 250, 0.85);
}

/* Company: careers — ladder rungs build upward on hover */
.mega-careers {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-careers-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  width: 52%;
  height: 58%;
}

.mega-careers-stage > i {
  width: 0;
  flex-shrink: 0;
  border-left: 1.5px solid rgba(250, 250, 250, 0.4);
  transition: border-color 0.35s var(--ease);
}

.mega-careers-rungs {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  min-width: 0;
  padding: 2% 0;
}

.mega-careers-rungs span {
  display: block;
  height: 0;
  width: 18%;
  align-self: flex-start;
  border-top: 1.5px solid rgba(250, 250, 250, 0.28);
  opacity: 0.55;
  transform-origin: left center;
  transition:
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s var(--ease),
    border-color 0.35s var(--ease);
  transition-delay: 0ms;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-careers-stage
  > i {
  border-color: rgba(250, 250, 250, 0.75);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-careers-rungs
  span {
  width: 100%;
  opacity: 1;
  border-color: rgba(250, 250, 250, 0.55);
  transition-delay: calc(var(--i) * 85ms);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-careers-rungs
  span:last-child {
  border-color: rgba(250, 250, 250, 0.85);
}

/* Company: contact — short centered line grows to connect on hover */
.mega-contact {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mega-contact-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 64%;
}

.mega-contact-stage i {
  position: relative;
  z-index: 1;
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(250, 250, 250, 0.55);
  transition: border-color 0.35s var(--ease);
}

.mega-contact-stage span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14%;
  height: 0;
  border-top: 1.5px solid rgba(250, 250, 250, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s var(--ease);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-contact-stage
  i {
  border-color: rgba(250, 250, 250, 0.85);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-contact-stage
  span {
  width: calc(100% - 3.5rem);
  border-color: rgba(250, 250, 250, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .mega-about-stage span,
  .mega-careers-stage span,
  .mega-careers-stage > i,
  .mega-price-stage span,
  .mega-contact-stage {
    transition: none;
  }
}

/* Solutions: investment stacks (legacy) */
.mega-cols {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.35rem;
  padding: 1.25rem 1.1rem 1.35rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-cols b {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.4rem;
  width: 2.25rem;
}

.mega-cols i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  width: 100%;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition:
    opacity 0.35s var(--ease),
    transform 0.4s var(--ease),
    color 0.3s var(--ease);
}

.mega-cols b:nth-child(1) i:nth-child(-n + 2),
.mega-cols b:nth-child(2) i:nth-child(-n + 4),
.mega-cols b:nth-child(3) i:nth-child(-n + 3) {
  opacity: 0.75;
  transform: scaleX(1);
}

.mega-cols b:nth-child(1) i:nth-child(1) {
  width: 70%;
}
.mega-cols b:nth-child(1) i:nth-child(2) {
  width: 100%;
}
.mega-cols b:nth-child(2) i:nth-child(1) {
  width: 55%;
}
.mega-cols b:nth-child(2) i:nth-child(2) {
  width: 85%;
}
.mega-cols b:nth-child(2) i:nth-child(3) {
  width: 100%;
}
.mega-cols b:nth-child(2) i:nth-child(4) {
  width: 70%;
}
.mega-cols b:nth-child(3) i:nth-child(1) {
  width: 80%;
}
.mega-cols b:nth-child(3) i:nth-child(2) {
  width: 100%;
}
.mega-cols b:nth-child(3) i:nth-child(3) {
  width: 60%;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-cols {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-cols i {
  opacity: 1;
  transform: scaleX(1);
  width: 100%;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-cols
  b:nth-child(1)
  i:nth-child(3) {
  transition-delay: 0.04s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-cols
  b:nth-child(1)
  i:nth-child(4) {
  transition-delay: 0.08s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-cols
  b:nth-child(1)
  i:nth-child(5) {
  transition-delay: 0.12s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-cols
  b:nth-child(2)
  i:nth-child(5) {
  transition-delay: 0.06s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-cols
  b:nth-child(3)
  i:nth-child(4) {
  transition-delay: 0.05s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-cols
  b:nth-child(3)
  i:nth-child(5) {
  transition-delay: 0.1s;
}

/* Solutions: pricing tiers */
.mega-tiers {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.35rem 1.5rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-tiers span {
  display: block;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: bottom center;
  transition:
    height 0.45s var(--ease),
    opacity 0.35s var(--ease),
    color 0.3s var(--ease);
}

.mega-tiers span:nth-child(1) {
  height: 28%;
  opacity: 0.55;
}
.mega-tiers span:nth-child(2) {
  height: 48%;
  opacity: 0.7;
}
.mega-tiers span:nth-child(3) {
  height: 68%;
  opacity: 0.85;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-tiers {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-tiers
  span:nth-child(1) {
  height: 52%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-tiers
  span:nth-child(2) {
  height: 74%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-tiers
  span:nth-child(3) {
  height: 92%;
  opacity: 1;
}

/* Solutions: compare dual tracks */
.mega-dual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35rem;
  padding: 0 1.1rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-dual b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mega-dual i {
  display: block;
  width: 1.5px;
  height: 18px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.55;
  transition:
    height 0.4s var(--ease),
    transform 0.4s var(--ease),
    opacity 0.3s var(--ease),
    color 0.3s var(--ease);
}

.mega-dual b:nth-child(1) i:nth-child(odd) {
  transform: translateY(-6px);
  height: 22px;
}
.mega-dual b:nth-child(1) i:nth-child(even) {
  transform: translateY(5px);
  height: 14px;
  opacity: 0.4;
}
.mega-dual b:nth-child(2) i:nth-child(odd) {
  transform: translateY(7px);
  height: 12px;
  opacity: 0.4;
}
.mega-dual b:nth-child(2) i:nth-child(even) {
  transform: translateY(-4px);
  height: 20px;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-dual {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-dual i {
  height: 16px;
  opacity: 1;
  transform: translateY(0);
}

/* Resources: news pulse */
.mega-pulse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.1rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-pulse i {
  display: block;
  width: 1.5px;
  border-radius: 1px;
  background: currentColor;
  height: 10px;
  opacity: 0;
  transition:
    height 0.4s var(--ease),
    opacity 0.35s var(--ease),
    color 0.3s var(--ease);
}

.mega-pulse i:nth-child(1),
.mega-pulse i:nth-child(4),
.mega-pulse i:nth-child(7),
.mega-pulse i:nth-child(11),
.mega-pulse i:nth-child(14) {
  height: 28px;
  opacity: 0.7;
}

.mega-pulse i:nth-child(2),
.mega-pulse i:nth-child(8),
.mega-pulse i:nth-child(13) {
  height: 16px;
  opacity: 0.45;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-pulse {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-pulse i {
  opacity: 1;
  height: 22px;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-pulse
  i:nth-child(3n) {
  height: 34px;
  transition-delay: 0.04s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-pulse
  i:nth-child(3n + 1) {
  height: 18px;
  transition-delay: 0.08s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-pulse
  i:nth-child(3n + 2) {
  height: 26px;
  transition-delay: 0.02s;
}

/* Resources: docs outline */
.mega-outline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1.25rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-outline span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: left center;
  transition:
    width 0.4s var(--ease),
    opacity 0.35s var(--ease),
    margin 0.35s var(--ease),
    color 0.3s var(--ease);
}

.mega-outline span:nth-child(1) {
  width: 78%;
  opacity: 0.85;
}
.mega-outline span:nth-child(2) {
  width: 48%;
  margin-left: 14%;
  opacity: 0.55;
}
.mega-outline span:nth-child(3) {
  width: 42%;
  margin-left: 14%;
  opacity: 0.55;
}
.mega-outline span:nth-child(4),
.mega-outline span:nth-child(5) {
  width: 0;
  margin-left: 14%;
  opacity: 0;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-outline {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-outline
  span:nth-child(1) {
  width: 88%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-outline
  span:nth-child(2) {
  width: 58%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-outline
  span:nth-child(3) {
  width: 52%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-outline
  span:nth-child(4) {
  width: 46%;
  opacity: 1;
  margin-left: 28%;
  transition-delay: 0.06s;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-outline
  span:nth-child(5) {
  width: 70%;
  opacity: 1;
  margin-left: 0;
  transition-delay: 0.12s;
}

/* Resources: security fence */
.mega-fence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.35rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-fence i {
  display: block;
  width: 1.5px;
  height: 22px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.45;
  transition:
    height 0.4s var(--ease),
    opacity 0.3s var(--ease),
    color 0.3s var(--ease);
}

.mega-fence i:nth-child(odd) {
  height: 34px;
  opacity: 0.65;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-fence {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-fence i {
  height: 52px;
  opacity: 1;
}

/* Company: about nodes */
.mega-nodes {
  position: relative;
  color: rgba(250, 250, 250, 0.42);
}

.mega-nodes i {
  position: absolute;
  display: block;
  width: 1.5px;
  height: 14px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.55;
  left: 50%;
  top: 50%;
  transform-origin: center 40px;
  transition:
    transform 0.45s var(--ease),
    height 0.4s var(--ease),
    opacity 0.3s var(--ease),
    color 0.3s var(--ease);
}

.mega-nodes i:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-28px);
}
.mega-nodes i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(45deg) translateY(-28px);
  height: 10px;
  opacity: 0.35;
}
.mega-nodes i:nth-child(3) {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-28px);
}
.mega-nodes i:nth-child(4) {
  transform: translate(-50%, -50%) rotate(135deg) translateY(-28px);
  height: 10px;
  opacity: 0.35;
}
.mega-nodes i:nth-child(5) {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-28px);
}
.mega-nodes i:nth-child(6) {
  transform: translate(-50%, -50%) rotate(225deg) translateY(-28px);
  height: 10px;
  opacity: 0.35;
}
.mega-nodes i:nth-child(7) {
  transform: translate(-50%, -50%) rotate(270deg) translateY(-28px);
}
.mega-nodes i:nth-child(8) {
  transform: translate(-50%, -50%) rotate(315deg) translateY(-28px);
  height: 10px;
  opacity: 0.35;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-nodes {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-nodes i {
  height: 18px;
  opacity: 1;
  transform-origin: center 48px;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(45deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(3) {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(4) {
  transform: translate(-50%, -50%) rotate(135deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(5) {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(6) {
  transform: translate(-50%, -50%) rotate(225deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(7) {
  transform: translate(-50%, -50%) rotate(270deg) translateY(-36px);
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-nodes
  i:nth-child(8) {
  transform: translate(-50%, -50%) rotate(315deg) translateY(-36px);
}

/* Company: careers rise */
.mega-rise {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 1.25rem 1.35rem 1.4rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-rise span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  align-self: flex-start;
  transform-origin: left center;
  transition:
    width 0.4s var(--ease),
    opacity 0.35s var(--ease),
    color 0.3s var(--ease);
}

.mega-rise span:nth-child(1) {
  width: 28%;
  opacity: 0.45;
}
.mega-rise span:nth-child(2) {
  width: 46%;
  opacity: 0.6;
}
.mega-rise span:nth-child(3) {
  width: 64%;
  opacity: 0.75;
}
.mega-rise span:nth-child(4) {
  width: 0;
  opacity: 0;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-rise {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-rise
  span:nth-child(1) {
  width: 42%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-rise
  span:nth-child(2) {
  width: 62%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-rise
  span:nth-child(3) {
  width: 80%;
  opacity: 1;
}
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-rise
  span:nth-child(4) {
  width: 94%;
  opacity: 1;
  transition-delay: 0.08s;
}

/* Company: contact bridge */
.mega-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 1.5rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-bridge i {
  display: block;
  width: 1.5px;
  height: 28px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
  transition:
    height 0.4s var(--ease),
    opacity 0.3s var(--ease),
    color 0.3s var(--ease);
}

.mega-bridge span {
  display: block;
  height: 2px;
  width: 18%;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.4;
  transition:
    width 0.5s var(--ease),
    opacity 0.35s var(--ease),
    color 0.3s var(--ease);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-bridge {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-bridge i {
  height: 36px;
  opacity: 1;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-bridge span {
  width: 62%;
  opacity: 1;
}

/* Company: security brace */
.mega-brace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1.5rem;
  box-sizing: border-box;
  color: rgba(250, 250, 250, 0.42);
}

.mega-brace span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    width 0.4s var(--ease),
    opacity 0.3s var(--ease),
    color 0.3s var(--ease);
}

.mega-brace span:nth-child(1) {
  width: 42%;
  opacity: 0.55;
}
.mega-brace span:nth-child(2) {
  width: 68%;
  opacity: 0.75;
}
.mega-brace span:nth-child(3) {
  width: 42%;
  opacity: 0.55;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover) .mega-brace {
  color: rgba(250, 250, 250, 0.95);
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-brace
  span:nth-child(1),
:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-brace
  span:nth-child(3) {
  width: 56%;
  opacity: 1;
}

:is(.mega-card:hover, .page-hero-visual--mega.is-live:hover)
  .mega-brace
  span:nth-child(2) {
  width: 84%;
  opacity: 1;
}

.mega-card-body {
  padding: 0 0.35rem 0.1rem;
}

.mega-card-body strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-right: 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fafafa;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  transition: color 0.2s var(--ease);
}

.mega-card-body strong .mega-arrow {
  flex: 0 0 auto;
}

/* Teal title marks — Product + Solutions mega titles */
.mega-title-mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--brand);
}

.mega-title-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mega-card-body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #a1a1aa;
}

.mega-card-sections {
  margin: 0;
  padding: 0 0.35rem 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #71717a;
}

.mega-card--split .mega-card-sections {
  margin-top: -0.15rem;
}

.mega-card-sections a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mega-card-sections a:hover,
.mega-card-sections a:focus-visible {
  color: var(--brand);
}

.site-header.is-light.mega-open .mega-card-sections {
  color: #a1a1aa;
}

.site-header.is-light.mega-open .mega-card-sections a:hover,
.site-header.is-light.mega-open .mega-card-sections a:focus-visible {
  color: var(--brand);
}

.mega-card--split .mega-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
  min-height: 0;
  flex: 1 1 auto;
}

.mega-card--split .mega-card-body {
  padding-bottom: 0;
}

.mega-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0;
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: none;
  min-height: 0;
  transition: opacity 0.2s var(--ease);
}

.mega-link-card:hover {
  border-color: transparent;
  background: transparent;
}

.mega-link-card:hover strong {
  color: #fafafa;
}

.mega-link-card strong {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fafafa;
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}

.mega-link-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #a1a1aa;
}

/* Same fill as the panel plate so the bar and the menu read as one surface */
body:has(.mega-backdrop.is-open) .site-header:not(.is-light) {
  background: rgba(10, 10, 11, 0.78);
  border-bottom-color: rgba(250, 250, 250, 0.08);
  box-shadow: none;
}

/* Keep mega readable in light nav mode */
body:has(.mega-backdrop.is-open) .site-header.is-light {
  background: rgba(244, 244, 245, 0.86);
  border-bottom-color: rgba(9, 9, 11, 0.08);
  box-shadow: 0 1px 0 rgba(9, 9, 11, 0.04);
}

.site-header.is-light.mega-open .logo img {
  filter: brightness(0);
}

body:has(.mega-backdrop.is-open) .site-header.is-light .nav-list > li > a,
body:has(.mega-backdrop.is-open) .site-header.is-light .nav-list > li > button {
  color: var(--zinc-400);
}

body:has(.mega-backdrop.is-open) .site-header.is-light .nav-trigger.is-active,
body:has(.mega-backdrop.is-open)
  .site-header.is-light
  .nav-trigger.is-active:hover {
  color: #09090b;
}

body:has(.mega-backdrop.is-open) .site-header.is-light .nav-list > li > a:hover,
body:has(.mega-backdrop.is-open)
  .site-header.is-light
  .nav-list
  > li
  > button:hover {
  color: var(--zinc-500);
}

.site-header.is-light.mega-open .nav-actions .btn {
  background: #09090b;
  color: #fafafa;
}

.site-header.is-light.mega-open .mega-card {
  background: var(--zinc-100);
}

.site-header.is-light.mega-open .mega-card:hover {
  background: #ececee;
}

/* Plated cards sit a step darker than the gray menu surface */
.site-header.is-light.mega-open .mega-card:not(.mega-card--nav) {
  background: #ececee;
}

.site-header.is-light.mega-open .mega-card:not(.mega-card--nav):hover {
  background: #e5e5e8;
}

.site-header.is-light.mega-open .mega-card-body strong,
.site-header.is-light.mega-open .mega-link-card strong {
  color: #09090b;
}

.site-header.is-light.mega-open .mega-card:hover .mega-card-body strong,
.site-header.is-light.mega-open .mega-link-card:hover strong {
  color: #09090b;
}

.site-header.is-light.mega-open .mega-card-body p,
.site-header.is-light.mega-open .mega-link-card p {
  color: #52525b;
}

.site-header.is-light.mega-open .mega-card-visual {
  background: transparent;
}

.site-header.is-light.mega-open .mega-work-stage span,
.site-header.is-light.mega-open .mega-firms-stage span,
.site-header.is-light.mega-open .mega-price-stage span,
.site-header.is-light.mega-open .mega-compare-stage b,
.site-header.is-light.mega-open .mega-compare-stage b i,
.site-header.is-light.mega-open .mega-news-stage span,
.site-header.is-light.mega-open .mega-docs-stage span,
.site-header.is-light.mega-open .mega-secure-stage span,
.site-header.is-light.mega-open .mega-about-stage span,
.site-header.is-light.mega-open .mega-careers-stage span,
.site-header.is-light.mega-open .mega-careers-stage > i,
.site-header.is-light.mega-open .mega-contact-stage i,
.site-header.is-light.mega-open .mega-contact-stage span {
  border-color: rgba(9, 9, 11, 0.16);
}

.site-header.is-light.mega-open .mega-work-stage span:nth-child(1),
.site-header.is-light.mega-open .mega-compare-stage b:first-child,
.site-header.is-light.mega-open .mega-docs-stage span:nth-child(1),
.site-header.is-light.mega-open .mega-secure-stage span:nth-child(1),
.site-header.is-light.mega-open .mega-news-stage span:nth-child(3) {
  border-color: rgba(9, 9, 11, 0.1);
}

.site-header.is-light.mega-open .mega-work-stage span:nth-child(2),
.site-header.is-light.mega-open .mega-docs-stage span:nth-child(2),
.site-header.is-light.mega-open .mega-secure-stage span:nth-child(2),
.site-header.is-light.mega-open .mega-news-stage span:nth-child(2) {
  border-color: rgba(9, 9, 11, 0.18);
}

.site-header.is-light.mega-open .mega-work-stage span:nth-child(3),
.site-header.is-light.mega-open .mega-compare-stage b:last-child,
.site-header.is-light.mega-open .mega-docs-stage span:nth-child(3),
.site-header.is-light.mega-open .mega-secure-stage span:nth-child(3),
.site-header.is-light.mega-open .mega-news-stage span:nth-child(1),
.site-header.is-light.mega-open .mega-about-stage span:nth-child(3),
.site-header.is-light.mega-open .mega-careers-stage span:last-child,
.site-header.is-light.mega-open .mega-careers-stage > i,
.site-header.is-light.mega-open .mega-contact-stage i {
  border-color: rgba(9, 9, 11, 0.36);
}

.site-header.is-light.mega-open .mega-skills-stage > span {
  color: rgba(9, 9, 11, 0.22);
}

.site-header.is-light.mega-open .mega-skills-stage > span:nth-child(1) {
  color: rgba(9, 9, 11, 0.12);
}

.site-header.is-light.mega-open .mega-skills-stage > span:nth-child(2) {
  color: rgba(9, 9, 11, 0.18);
}

.site-header.is-light.mega-open .mega-skills-stage > span:nth-child(3) {
  color: rgba(9, 9, 11, 0.36);
}

.site-header.is-light.mega-open .mega-card:hover .mega-skills-stage > span {
  color: rgba(9, 9, 11, 0.36);
}

.site-header.is-light.mega-open
  .mega-card:hover
  .mega-skills-stage
  > span:nth-child(3) {
  color: rgba(9, 9, 11, 0.55);
}

.site-header.is-light.mega-open .mega-card:hover .mega-work-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-firms-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-price-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-compare-stage b,
.site-header.is-light.mega-open .mega-card:hover .mega-compare-stage b i,
.site-header.is-light.mega-open .mega-card:hover .mega-news-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-docs-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-secure-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-about-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-careers-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-contact-stage i,
.site-header.is-light.mega-open .mega-card:hover .mega-contact-stage span {
  border-color: rgba(9, 9, 11, 0.36);
}

.site-header.is-light.mega-open .mega-price-stage span,
.site-header.is-light.mega-open .mega-price-dot {
  background: rgba(9, 9, 11, 0.18);
  border-color: transparent;
}

.site-header.is-light.mega-open .mega-price-dot--outer:nth-child(1),
.site-header.is-light.mega-open .mega-price-dot--outer:nth-child(2),
.site-header.is-light.mega-open .mega-price-dot--outer:nth-child(4),
.site-header.is-light.mega-open .mega-price-dot--outer:nth-child(7),
.site-header.is-light.mega-open .mega-price-dot--outer:nth-child(11),
.site-header.is-light.mega-open .mega-price-dot--mid:nth-child(19),
.site-header.is-light.mega-open .mega-price-dot--mid:nth-child(22),
.site-header.is-light.mega-open .mega-price-dot--mid:nth-child(25),
.site-header.is-light.mega-open .mega-price-dot--inner:nth-child(31),
.site-header.is-light.mega-open .mega-price-dot--inner:nth-child(33),
.site-header.is-light.mega-open .mega-price-dot--core {
  background: rgba(9, 9, 11, 0.88);
}

.site-header.is-light.mega-open .mega-card:hover .mega-price-stage span,
.site-header.is-light.mega-open .mega-card:hover .mega-price-dot {
  background: rgba(9, 9, 11, 0.9);
  border-color: transparent;
}

.site-header.is-light.mega-open
  .mega-card:hover
  .mega-work-stage
  span:nth-child(3),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-compare-stage
  b:last-child,
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-firms-stage
  span:nth-child(2),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-firms-stage
  span:nth-child(4),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-docs-stage
  span:nth-child(3),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-secure-stage
  span:nth-child(3),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-news-stage
  span:nth-child(1),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-about-stage
  span:nth-child(3),
.site-header.is-light.mega-open
  .mega-card:hover
  .mega-careers-stage
  span:last-child,
.site-header.is-light.mega-open .mega-card:hover .mega-contact-stage i {
  border-color: rgba(9, 9, 11, 0.55);
}

.site-header.is-light.mega-open .mega-stack-stage span {
  background: transparent;
  border-color: rgba(9, 9, 11, 0.16);
  box-shadow: none;
}

.site-header.is-light.mega-open .mega-stack-stage span:last-child {
  border-color: rgba(9, 9, 11, 0.4);
}

.site-header.is-light.mega-open .mega-card:hover .mega-stack-stage span {
  border-color: rgba(9, 9, 11, 0.32);
}

.site-header.is-light.mega-open
  .mega-card:hover
  .mega-stack-stage
  span:last-child {
  border-color: rgba(9, 9, 11, 0.7);
}

.site-header.is-light.mega-open .mega-ticks,
.site-header.is-light.mega-open .mega-lines,
.site-header.is-light.mega-open .mega-cols,
.site-header.is-light.mega-open .mega-tiers,
.site-header.is-light.mega-open .mega-dual,
.site-header.is-light.mega-open .mega-pulse,
.site-header.is-light.mega-open .mega-outline,
.site-header.is-light.mega-open .mega-fence,
.site-header.is-light.mega-open .mega-nodes,
.site-header.is-light.mega-open .mega-rise,
.site-header.is-light.mega-open .mega-bridge,
.site-header.is-light.mega-open .mega-brace {
  color: rgba(9, 9, 11, 0.38);
}

.site-header.is-light.mega-open .mega-card:hover .mega-ticks,
.site-header.is-light.mega-open .mega-card:hover .mega-lines,
.site-header.is-light.mega-open .mega-card:hover .mega-cols,
.site-header.is-light.mega-open .mega-card:hover .mega-tiers,
.site-header.is-light.mega-open .mega-card:hover .mega-dual,
.site-header.is-light.mega-open .mega-card:hover .mega-pulse,
.site-header.is-light.mega-open .mega-card:hover .mega-outline,
.site-header.is-light.mega-open .mega-card:hover .mega-fence,
.site-header.is-light.mega-open .mega-card:hover .mega-nodes,
.site-header.is-light.mega-open .mega-card:hover .mega-rise,
.site-header.is-light.mega-open .mega-card:hover .mega-bridge,
.site-header.is-light.mega-open .mega-card:hover .mega-brace {
  color: rgba(9, 9, 11, 0.88);
}

/* —— Mega card, nav variant: no plate, no visual, sections as peer links —— */
.mega-card--nav,
.mega-card--nav:hover,
.site-header.is-light.mega-open .mega-card--nav,
.site-header.is-light.mega-open .mega-card--nav:hover {
  background: transparent;
}

.mega-card--nav {
  gap: 0.55rem;
  padding: 0.35rem 0.35rem 0.6rem;
  /* Marks animate past their box; nothing here needs clipping */
  overflow: visible;
}

/* Sections sit under the blurb instead of being pushed to the card floor */
.mega-card--nav .mega-card-main {
  gap: 0.55rem;
  flex: 0 0 auto;
}

/* Small left-aligned mark above the title; 0.35rem matches the body padding.
   Every mark keeps the same 60px box so the titles below line up across cards;
   size differences are tuned on the stage inside it. */
.mega-card--nav .mega-card-visual {
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
  margin: 0 0 0 0.35rem;
  place-items: center start;
  overflow: visible;
}

/* Perspective and depth scale with the smaller stage to keep the original read */
.mega-card--nav .mega-stack {
  perspective: 150px;
}

.mega-card--nav .mega-stack-stage {
  width: 52%;
  margin-top: 0;
}

.mega-card--nav .mega-stack-stage span {
  border-width: 1px;
  transform: translateZ(calc(var(--i) * 3.5px));
}

.mega-card.mega-card--nav:hover .mega-stack-stage span {
  transform: translateZ(calc(var(--i) * 1.6px));
}

.mega-card--nav .mega-work-stage {
  width: 74%;
}

.mega-card--nav .mega-work-stage span {
  border-width: 1px;
  border-radius: 3px;
  transform: translate(calc(var(--i) * 2px - 2px), calc(var(--i) * 2px - 2px));
}

.mega-card.mega-card--nav:hover .mega-work-stage span {
  transform: translate(0, 0);
}

/* Solutions marks — same 60px stage as Foundation / Work */
.mega-card--nav .mega-firms-stage {
  width: 78%;
  height: 72%;
  gap: 0.2rem;
}

.mega-card--nav .mega-firms-stage span {
  border-width: 1px;
  border-radius: 3px;
}

/* Sized to the outer ring so the dots start at the mark's left edge */
.mega-card--nav .mega-price-stage {
  width: 68%;
}

.mega-card--nav .mega-price-dot {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
}

.mega-card--nav .mega-price-dot--outer {
  transform: rotate(calc(var(--i) * 20deg)) translateY(-1.15rem);
}

.mega-card--nav .mega-price-dot--mid {
  transform: rotate(calc(var(--i) * 30deg)) translateY(-0.75rem);
}

.mega-card--nav .mega-price-dot--inner {
  transform: rotate(calc(var(--i) * 60deg)) translateY(-0.4rem);
}

.mega-card--nav .mega-compare-stage {
  width: 86%;
  height: 72%;
  gap: 0.28rem;
}

.mega-card--nav .mega-compare-stage b {
  gap: 0.18rem;
  padding: 0.3rem 0.28rem;
  border-radius: 5px;
  border-width: 1px;
}

.mega-card--nav .mega-compare-stage b i {
  border-top-width: 1px;
}

.mega-card.mega-card--nav:hover .mega-compare-stage {
  gap: 0.16rem;
}

/* Company marks — same 60px stage as Foundation / Work / Solutions */
.mega-card--nav .mega-about-stage {
  width: 92%;
}

.mega-card--nav .mega-about-stage span {
  border-width: 1px;
}

.mega-card--nav .mega-careers-stage {
  width: 46%;
  height: 62%;
  gap: 0.22rem;
}

.mega-card--nav .mega-careers-stage > i {
  border-left-width: 1px;
}

.mega-card--nav .mega-careers-rungs span {
  border-top-width: 1px;
}

.mega-card--nav .mega-contact-stage {
  width: 78%;
}

.mega-card--nav .mega-contact-stage i {
  width: 0.7rem;
  height: 0.7rem;
  border-width: 1px;
}

.mega-card--nav .mega-contact-stage span {
  border-top-width: 1px;
}

.mega-card.mega-card--nav:hover .mega-contact-stage span {
  width: calc(100% - 1.6rem);
}

/* Resources marks — same 60px stage */
.mega-card--nav .mega-secure-stage {
  width: 62%;
}

.mega-card--nav .mega-secure-stage span {
  border-width: 1px;
}

.mega-card--nav .mega-docs-stage {
  width: 52%;
  height: 68%;
}

.mega-card--nav .mega-docs-stage span {
  border-width: 1px;
  border-radius: 5px;
  transform: translate(calc(var(--i) * 4px), calc(var(--i) * -3px))
    rotate(calc(var(--i) * -4deg));
}

.mega-card.mega-card--nav:hover .mega-docs-stage span {
  transform: translate(calc(var(--i) * 7px), calc(var(--i) * -5px))
    rotate(calc(var(--i) * -7deg));
}

.mega-card--nav .mega-news-stage {
  width: 72%;
}

.mega-card--nav .mega-news-stage span {
  border-width: 1px;
}

/* Arrows belong to the link under the cursor, not the whole card */
.mega-card--nav .mega-arrow,
.mega-card--nav:hover .mega-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.2s var(--ease),
    transform 0.22s var(--ease);
}

.mega-card--nav .mega-card-main:hover .mega-arrow,
.mega-card--nav .mega-card-main:focus-visible .mega-arrow,
a.mega-card.mega-card--nav:hover .mega-arrow,
a.mega-card.mega-card--nav:focus-visible .mega-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Subpages never show an arrow — just a teal hover */
.mega-card--nav a.mega-section-link .mega-arrow,
.mega-card--nav a.mega-section-link:hover .mega-arrow,
.mega-card--nav a.mega-section-link:focus-visible .mega-arrow {
  display: none;
}

a.mega-card.mega-card--nav:hover .mega-arrow--out,
a.mega-card.mega-card--nav:focus-visible .mega-arrow--out {
  transform: translate(0, 0);
}

.mega-card--nav .mega-card-sections {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Subpages sit back until their column is the one being read */
.mega-card--nav a.mega-section-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.35rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #52525b;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.mega-card--nav:hover a.mega-section-link,
.mega-card--nav:focus-within a.mega-section-link {
  color: #fafafa;
}

.mega-card--nav a.mega-section-link:hover,
.mega-card--nav a.mega-section-link:focus-visible {
  color: var(--brand);
}

.site-header.is-light.mega-open .mega-card--nav a.mega-section-link {
  color: #a1a1aa;
}

.site-header.is-light.mega-open .mega-card--nav:hover a.mega-section-link,
.site-header.is-light.mega-open
  .mega-card--nav:focus-within
  a.mega-section-link {
  color: #09090b;
}

.site-header.is-light.mega-open .mega-card--nav a.mega-section-link:hover,
.site-header.is-light.mega-open
  .mega-card--nav
  a.mega-section-link:focus-visible {
  color: var(--brand);
}

/* Skills library card sits on a brand plate in both nav themes */
.mega-card--skills,
.site-header.is-light.mega-open .mega-card--skills {
  background: var(--brand) !important;
}

.mega-card--skills:hover,
.site-header.is-light.mega-open .mega-card--skills:hover {
  background: var(--brand-hover) !important;
}

.mega-card--skills .mega-card-body strong,
.site-header.is-light.mega-open .mega-card--skills .mega-card-body strong,
.site-header.is-light.mega-open
  .mega-card--skills:hover
  .mega-card-body
  strong {
  color: #fafafa !important;
}

.mega-card--skills .mega-card-body p,
.site-header.is-light.mega-open .mega-card--skills .mega-card-body p {
  color: rgba(250, 250, 250, 0.75) !important;
}

.mega-card--skills .mega-arrow {
  color: #fafafa !important;
}

.mega-card--skills .mega-skills-stage > span:nth-child(1),
.site-header.is-light.mega-open
  .mega-card--skills
  .mega-skills-stage
  > span:nth-child(1) {
  color: rgba(250, 250, 250, 0.26) !important;
}

.mega-card--skills .mega-skills-stage > span:nth-child(2),
.site-header.is-light.mega-open
  .mega-card--skills
  .mega-skills-stage
  > span:nth-child(2) {
  color: rgba(250, 250, 250, 0.4) !important;
}

.mega-card--skills .mega-skills-stage > span:nth-child(3),
.site-header.is-light.mega-open
  .mega-card--skills
  .mega-skills-stage
  > span:nth-child(3) {
  color: rgba(250, 250, 250, 0.72) !important;
}

.mega-card--skills:hover .mega-skills-stage > span,
.site-header.is-light.mega-open
  .mega-card--skills:hover
  .mega-skills-stage
  > span {
  color: rgba(250, 250, 250, 0.6) !important;
}

.mega-card--skills:hover .mega-skills-stage > span:nth-child(3),
.site-header.is-light.mega-open
  .mega-card--skills:hover
  .mega-skills-stage
  > span:nth-child(3) {
  color: rgba(250, 250, 250, 0.95) !important;
}

/* Solutions: case study — photo plate with the brand fading up under the copy */
.mega-card--case {
  position: relative;
  justify-content: flex-end;
  min-height: 15rem;
  padding: 1.15rem 1.15rem 1.1rem;
}

/* Held across hover and both nav themes so the photo is never swapped for a plate */
.mega-card--case,
.mega-card--case:hover,
.site-header.is-light.mega-open .mega-card--case,
.site-header.is-light.mega-open .mega-card--case:hover {
  background: #101a24 url("../images/case-study-card.jpg") center / cover
    no-repeat !important;
}

.mega-card--case::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.92;
  background: linear-gradient(
    to top,
    rgba(0, 150, 137, 0.96) 0%,
    rgba(0, 150, 137, 0.8) 26%,
    rgba(0, 150, 137, 0.38) 52%,
    rgba(0, 150, 137, 0.1) 74%,
    rgba(0, 150, 137, 0) 90%
  );
  transition: opacity 0.28s var(--ease);
}

.mega-card--case:hover::before {
  opacity: 1;
}

.mega-card--case .mega-card-body {
  position: relative;
  z-index: 1;
}

.mega-card--case .mega-card-body strong,
.site-header.is-light.mega-open .mega-card--case .mega-card-body strong,
.site-header.is-light.mega-open .mega-card--case:hover .mega-card-body strong {
  color: #fafafa !important;
}

.mega-card--case .mega-card-body p,
.site-header.is-light.mega-open .mega-card--case .mega-card-body p {
  color: rgba(250, 250, 250, 0.82) !important;
}

.mega-card--case .mega-arrow {
  color: #fafafa !important;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.2s var(--ease),
    transform 0.22s var(--ease);
}

.mega-card--case:hover .mega-arrow,
.mega-card--case:focus-visible .mega-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Skills card arrow appears on hover, matching the nav links */
.mega-grid--product .mega-card:not(.mega-card--nav) .mega-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.2s var(--ease),
    transform 0.22s var(--ease);
}

.mega-grid--product .mega-card:not(.mega-card--nav):hover .mega-arrow,
.mega-grid--product .mega-card:not(.mega-card--nav):focus-visible .mega-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Skills card follows the nav columns' height; its visual absorbs the slack */
.mega-grid--product .mega-card:not(.mega-card--nav) .mega-card-visual {
  aspect-ratio: auto;
  height: auto;
  min-height: 120px;
  flex: 1 1 auto;
}

.mega-grid--product .mega-card:not(.mega-card--nav) .mega-skills-stage {
  width: 104px;
  height: 104px;
}

@media (prefers-reduced-motion: reduce) {
  .mega-card--nav .mega-arrow,
  .mega-card--nav:hover .mega-arrow,
  .mega-card--case .mega-arrow,
  .mega-grid--product .mega-card:not(.mega-card--nav) .mega-arrow {
    transition: opacity 0.2s var(--ease);
    transform: none;
  }

  .mega-card--nav .mega-card-main:hover .mega-arrow,
  a.mega-card.mega-card--nav:hover .mega-arrow,
  .mega-card--case:hover .mega-arrow,
  .mega-grid--product .mega-card:not(.mega-card--nav):hover .mega-arrow {
    transform: none;
  }
}

.site-header.is-light .nav-list > li > a:hover,
.site-header.is-light .nav-list > li > button:hover,
.site-header.is-light .nav-list > li > a[aria-current="page"] {
  color: #52525b;
}

@media (max-width: 900px) {
  .mega-backdrop,
  .mega-shell {
    display: none !important;
  }
}

@media (max-width: 1000px) {
  .mega-grid--product,
  .mega-grid--links,
  .mega-grid--links:has(> :nth-child(4)) {
    grid-template-columns: 1fr;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-actions .btn {
  background: #fafafa;
  color: #09090b;
  transition:
    transform 0.25s var(--ease),
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.nav-actions .btn:hover {
  background: #e4e4e7;
  color: #09090b;
}

/* Homepage: keep the nav book button away until the hero CTA has left. */
body:has([data-hero-cta]) .nav-actions [data-nav-cta] {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  border-color: transparent;
  transition:
    max-width 0.4s var(--ease),
    padding 0.4s var(--ease),
    opacity 0.3s ease,
    border-color 0.3s ease,
    visibility 0s linear 0.35s;
}

body:has([data-hero-cta])
  .site-header.is-cta-ready
  .nav-actions
  [data-nav-cta] {
  max-width: 14rem;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    max-width 0.4s var(--ease),
    padding 0.4s var(--ease),
    opacity 0.3s ease,
    border-color 0.3s ease,
    visibility 0s;
}

@media (max-width: 900px) {
  body:has([data-hero-cta]) .nav-actions [data-nav-cta],
  body:has([data-hero-cta])
    .site-header.is-cta-ready
    .nav-actions
    [data-nav-cta] {
    max-width: none;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    visibility: visible;
    border-color: transparent;
    transition: none;
  }
}

@media (max-width: 420px) {
  body:has([data-hero-cta]) .nav-actions [data-nav-cta],
  body:has([data-hero-cta])
    .site-header.is-cta-ready
    .nav-actions
    [data-nav-cta] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has([data-hero-cta]) .nav-actions [data-nav-cta],
  body:has([data-hero-cta])
    .site-header.is-cta-ready
    .nav-actions
    [data-nav-cta] {
    transition: none;
  }
}

.nav-toggle {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  transition:
    transform 0.25s var(--ease),
    opacity 0.2s var(--ease),
    top 0.25s var(--ease);
}

.nav-toggle span:nth-child(1) {
  top: calc(50% - 5px);
}

.nav-toggle span:nth-child(2) {
  top: 50%;
  margin-top: -0.75px;
}

.nav-toggle span:nth-child(3) {
  top: calc(50% + 5px);
}

.site-header.mobile-nav-open .nav-toggle span:nth-child(1) {
  top: 50%;
  margin-top: -0.75px;
  transform: translateX(-50%) rotate(45deg);
}

.site-header.mobile-nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.mobile-nav-open .nav-toggle span:nth-child(3) {
  top: 50%;
  margin-top: -0.75px;
  transform: translateX(-50%) rotate(-45deg);
}

.site-header:not(.is-light) .nav-toggle {
  color: #fafafa;
}

.site-header.is-light .nav-toggle {
  color: #09090b;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 90;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 10, 11, 0.42);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease),
    visibility 0.3s var(--ease);
}

body:has(#site-nav.is-light) .mobile-nav-backdrop {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 901px) {
  .mobile-nav-backdrop {
    display: none !important;
  }
}

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: min(78vh, 40rem);
  overflow: auto;
  background: #0a0a0b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

.site-header.is-light .mobile-nav {
  background: #fff;
  border-bottom-color: rgba(9, 9, 11, 0.08);
  box-shadow: 0 18px 40px rgba(9, 9, 11, 0.08);
}

.mobile-nav-inner {
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
  padding: 0.35rem var(--gutter) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-group {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header.is-light .mobile-nav-group {
  border-bottom-color: var(--zinc-100);
}

.mobile-nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 1rem 0;
  border: none;
  background: transparent;
  color: #fafafa;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}

.site-header.is-light .mobile-nav-trigger {
  color: var(--zinc-950);
}

.mobile-nav-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: inherit;
}

.mobile-nav-icon::before,
.mobile-nav-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 999px;
  transition:
    transform 0.25s var(--ease),
    opacity 0.2s var(--ease);
}

.mobile-nav-icon::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.mobile-nav-icon::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.mobile-nav-group.is-open .mobile-nav-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 0.85rem;
}

.mobile-nav-links[hidden] {
  display: none !important;
}

.mobile-nav-links a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(250, 250, 250, 0.62);
  text-decoration: none;
}

.site-header.is-light .mobile-nav-links a {
  color: var(--zinc-600);
}

.mobile-nav-links a:hover,
.mobile-nav-links a[aria-current="page"] {
  color: #fafafa;
}

.site-header.is-light .mobile-nav-links a:hover,
.site-header.is-light .mobile-nav-links a[aria-current="page"] {
  color: var(--zinc-950);
}

.mobile-nav-links .mega-arrow {
  color: inherit;
  margin-left: 0.2em;
  transition: none;
  transform: none;
}

body.mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .nav-inner {
    gap: 1rem;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .nav-list {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header.mobile-nav-open .mobile-nav,
  .mobile-nav:not([hidden]) {
    display: block;
  }

  .nav-actions .btn-sm {
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 420px) {
  .nav-actions .btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }
}

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--white);
  color: #09090b;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease),
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.btn:hover {
  background: #e4e4e7;
  color: #09090b;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(250, 250, 250, 0.25);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.btn-ghost:hover {
  color: var(--text);
  background: transparent;
  transform: none;
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
}

/* —— Layout —— */
.page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page > .section,
.page > section.section {
  max-width: calc(var(--max) + 240px);
  margin-left: auto;
  margin-right: auto;
  padding: 6.5rem clamp(2.5rem, 6vw, 4.5rem);
}

/* —— Sections (shared / inner pages) —— */
.section {
  position: relative;
  background: transparent;
  border: none;
  margin: 0;
  padding: 6.5rem clamp(2.5rem, 6vw, 4.5rem);
}

.section::before {
  display: none;
}

.section.hero {
  padding: 0;
  max-width: none !important;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #71717a;
  margin: 0 0 1rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
h5,
h6,
.product-title,
.capability-title,
.trust-headline,
.page-hero-title,
.platform-intro-title,
.providers-title,
.house-title {
  font-family: var(--font-heading);
  font-weight: 600;
}

h1,
.h1 {
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 16ch;
  color: var(--text);
}

h2,
.h2 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 22ch;
  color: var(--text);
}

h3,
.h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.lede,
.section p {
  max-width: 40rem;
  color: var(--text-secondary);
}

.lede {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
}

.section p {
  margin: 0 0 0.85rem;
}

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

.compat {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 1.25rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0;
}

.trust-micro {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* —— Home hero (Figma 150:11023) ——
   Two columns inside the page's max-width: copy on the left, a teal mesh plate
   on the right that runs the hero's full height. The fixed header floats over
   the hero, so the top padding is what keeps the plate clear of it. */
.section.hero.home-hero {
  --hero-header: 73px;
  position: relative;
  display: block;
  text-align: left;
  padding: 0;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-split {
  box-sizing: border-box;
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
  --hero-pad-x: clamp(2.5rem, 6vw, 4.5rem);
  padding: var(--hero-header) var(--hero-pad-x) 0;
  display: grid;
  /* Figma splits the 1360 column in half with no gutter between the two; the
     copy holds its own right padding instead so the plate stays exactly half */
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(100svh, 60rem);
}

/* The nav and the light sections below carry no right inset — their right edge is
   the 1360 box. Drop the hero's right padding on large screens so the mesh plate
   meets that same line; the copy column keeps the left pad and hero-inner's own
   measure, and the scenes stay centred inside the plate they sit on. */
@media (min-width: 901px) {
  .home-hero .hero-split {
    padding-right: 0;
  }
}

.home-hero--light {
  background: #ffffff !important;
  color: #09090b;
}

/* Matches the base hero's specificity, which sets the dark border and the
   bottom padding in shorthand. The mesh band ends the hero, so there is no
   white left under it. */
.section.hero.home-hero.home-hero--light {
  border-bottom-color: #e4e4e7;
  padding-bottom: 0;
}

/* —— Home hero glow (Figma 7:64) ——
   The teal is built as three nested bands under a white dome, mirroring how the
   design is layered, so each band can rise in on its own after the stack closes.
   Composited they are one gradient: white → teal/400 → teal/600 → teal/900, with
   each band's ramp being that gradient's stops re-expressed inside the band. */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-glow-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  opacity: 0;
  /* Every band ends at the hero's bottom edge, so 100% parks it just out of
     view and each one slides up to its own resting height. */
  transform: translateY(100%);
}

/* teal/400 — takes over from white at 62%, solid by 74% */
.hero-glow-band-1 {
  top: 62%;
  background: linear-gradient(to bottom, rgba(0, 213, 190, 0) 0%, #00d5be 32%);
}

/* teal/600 — solid by 83% */
.hero-glow-band-2 {
  top: 74%;
  background: linear-gradient(to bottom, rgba(0, 150, 137, 0) 0%, #009689 35%);
}

/* teal/900 — still climbing at the hero's bottom edge, as in the design */
.hero-glow-band-3 {
  top: 83%;
  background: linear-gradient(
    to bottom,
    rgba(11, 79, 74, 0) 0%,
    rgba(11, 79, 74, 0.895) 100%
  );
}

.hero-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 78% 53% at 50% 49%,
    #ffffff 67%,
    rgba(255, 255, 255, 0.18) 91%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Bands rise into view once the stack has closed, just behind the copy */
body.is-hero-ready .hero-glow-band {
  animation: heroGlowIn 1s var(--ease) forwards;
}

body.is-hero-ready .hero-glow-band-1 {
  animation-delay: 0.1s;
}
body.is-hero-ready .hero-glow-band-2 {
  animation-delay: 0.28s;
}
body.is-hero-ready .hero-glow-band-3 {
  animation-delay: 0.46s;
}

@keyframes heroGlowIn {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow-band {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.home-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 35%;
  width: 120%;
  height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(255, 255, 255, 0.06),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.home-hero--light::before {
  display: none;
}

.home-hero--light .hero-mesh {
  display: none;
}

.hero-mesh {
  position: absolute;
  left: 50%;
  /* Figma: mesh starts ~y844 / ~1186 hero → bottom ~30% of section */
  bottom: -14%;
  width: 130%;
  max-width: none;
  height: 42%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.hero-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  /* Figma: blur-[62px] */
  filter: blur(62px) saturate(1.2);
  opacity: 1;
  transform: scale(1.15);
}

/* Left column copy — right pad keeps a gap before the plate. On desktop the
   headline and lede take more so “private equity” wraps as a pair. */
.home-hero .hero-inner {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: none;
  padding: 0 1.5rem 0 0;
}

@media (min-width: 901px) {
  .home-hero h1 {
    padding-right: 3.5rem;
  }

  .home-hero .lede {
    padding-right: 5rem;
  }
}

.home-hero h1 {
  max-width: none;
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 4.3vw, 3.9rem);
  line-height: 1.15;
}

.home-hero h1 .hero-muted {
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.home-hero h1 .hero-line {
  display: block;
  color: #fafafa;
}

.home-hero--light h1 .hero-muted {
  color: var(--zinc-400);
}

.home-hero--light h1 .hero-line {
  color: #09090b;
}

.home-hero--light .lede {
  color: #71717a;
}

.home-hero--light .btn {
  background: #09090b;
  color: #fafafa;
}

.home-hero--light .btn:hover {
  background: #27272a;
  color: #fafafa;
}

.home-hero--light .hero-stack {
  /* PNGs use transparency — no blend (screen erased the white mark on 02) */
  mix-blend-mode: normal;
}

.hero-stack--dark {
  mix-blend-mode: screen;
}

.section-pain .verbs {
  text-align: left;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.card-grid .card h3 {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.home-hero .lede {
  max-width: none;
  margin: 0 0 1.85rem;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.5;
}

.home-hero .cta-row {
  justify-content: flex-start;
}

.home-hero .compat {
  display: none;
}

/* —— Home hero visual (Figma 150:11023 through 150:10684) ——
   The right column is a full-height mesh plate. Scenes stack over it and take
   turns in markup order, looping back to the first; motion.js drives the timing
   off each scene's data-hero-hold. The plate itself never cuts — only what sits
   on it changes. */
.hero-visual {
  /* The model row is three of these with two gaps between, and the wires are
     exactly the gaps — one place to change the whole arrangement's scale */
  --hero-tile: 80px;
  --hero-gap: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 24rem;
}

/* Same mesh file and crop as the Enterprise Search house panel — no blur, only
   a light overscan so the slow drift never shows an edge. */
.hero-visual-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-visual-mesh img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  animation: heroMeshDrift 34s ease-in-out infinite alternate;
}

/* Slow enough to read as the plate breathing rather than as a transition */
@keyframes heroMeshDrift {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-51.5%, -51%);
  }
}

/* Scenes carry only stacking and hit-testing. The motion lives on the .hero-rise
   elements inside them so each scene can stagger its own parts. JS keeps
   is-leaving on until the rise-out has finished, then hides immediately. */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  visibility: hidden;
  pointer-events: none;
}

.hero-scene.is-active,
.hero-scene.is-leaving {
  visibility: visible;
}

.hero-visual p {
  margin: 0;
  max-width: none;
}

/* Everything enters from below and keeps going on the way out. The blur peaks
   while the element is travelling and resolves to no filter at rest, which both
   reads as motion blur and keeps a filter off the glass once it lands — an
   element with a live filter can stop compositing its own backdrop-filter. The
   slight vertical stretch is what sells the direction. */
.hero-rise {
  opacity: 0;
}

.hero-scene.is-active .hero-rise,
.hero-scene.is-leaving .hero-rise {
  will-change: transform, filter, opacity;
}

.hero-scene.is-active .hero-rise {
  animation: heroRiseIn 0.68s var(--ease) calc(var(--i, 0) * 70ms) both;
}

/* Exits stagger tighter than entrances so leaving reads as one gesture and
   arriving reads as assembly. `both` holds the rest state (opacity 1) through
   the stagger delay — without it the cards drop to .hero-rise's opacity 0
   then pop back in when the fade-up starts. */
.hero-scene.is-leaving .hero-rise {
  opacity: 1;
  animation: heroRiseOut 0.52s cubic-bezier(0.4, 0, 0.7, 0.2)
    calc(var(--i, 0) * 35ms) both;
}

@keyframes heroRiseIn {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scaleY(1.05);
    filter: blur(16px);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes heroRiseOut {
  from {
    opacity: 1;
    transform: none;
    filter: none;
  }
  45% {
    opacity: 0.5;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -38px, 0) scaleY(1.06);
    filter: blur(16px);
  }
}

/* —— The anchor: Simon, above the scenes ——
   He's the middle tile of the model row, which is already dead centre, then he
   lifts to head the input and lifts again to head the card rail. Because he lives
   outside the scenes he transitions between those stations instead of being torn
   down and rebuilt, so the sequence has one continuous through-line. Each lift is
   measured from the plate's centre: half the thing below him, plus the gap between
   them, plus half his own tile. */
.hero-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    transform 0.95s var(--ease),
    opacity 0.55s var(--ease),
    filter 0.55s var(--ease);
}

/* He arrives behind glass and stays there until the wires reach him: on his own
   he's a shell, and the models are what he's about to be given. Only this station
   is frosted — from the ask onward he's lit and stays lit. */
[data-hero-lift="center"] .hero-anchor .hero-model {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  transition-delay: 0s;
}

[data-hero-lift="center"] .hero-anchor .hero-model img {
  filter: brightness(0) invert(1);
  transition-delay: 0s;
}

[data-hero-lift="ask"] .hero-anchor {
  transform: translate(-50%, calc(-50% - 88px));
}

[data-hero-lift="cards"] .hero-anchor {
  transform: translate(-50%, calc(-50% - 168px));
}

/* The answer scene needs the whole plate, so he carries on up and out */
[data-hero-lift="off"] .hero-anchor {
  transform: translate(-50%, calc(-50% - 210px));
  opacity: 0;
  filter: blur(16px);
}

/* —— Scene: the models (Figma 150:11081, 150:11099) ——
   The two frames hold the same three tiles in the same places, so the second is a
   state rather than a scene. Nothing moves: the wires run in from both models and
   the glass clears off Simon, which is the whole gesture. Because the row is
   symmetrical the middle slot is dead centre whatever the tile and gap measure,
   which is what lets the anchor sit at a plain centre for this station. */
.hero-models {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hero-gap);
}

/* The slot is Simon's place in the row, held open for the anchor layer above it,
   so it has to measure the same as a tile without looking like one */
.hero-model,
.hero-model-slot {
  width: var(--hero-tile);
  height: var(--hero-tile);
}

.hero-model {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 14px 31px rgba(0, 0, 0, 0.12),
    0 40px 48px rgba(0, 0, 0, 0.08);
  /* The glass comes off a beat after the wires land, so the delay lives on the
     lit state and the frosted one above zeroes it */
  transition:
    background 0.7s var(--ease) 0.32s,
    backdrop-filter 0.7s var(--ease) 0.32s,
    -webkit-backdrop-filter 0.7s var(--ease) 0.32s,
    box-shadow 0.7s var(--ease) 0.32s;
}

.hero-model img {
  width: calc(var(--hero-tile) * 0.45);
  height: calc(var(--hero-tile) * 0.45);
  transition: filter 0.7s var(--ease) 0.32s;
}

/* —— The wires ——
   Each one fills the gap it sits in, one tile in from its end of the row, and
   draws from its own model towards Simon. The rise carries the entrance and exit
   so the wires arrive and leave with the tiles; the line inside only ever scales,
   which keeps the two out of each other's way. */
.hero-wire {
  position: absolute;
  top: 50%;
  width: var(--hero-gap);
  height: 2px;
  margin-top: -1px;
}

.hero-wire--left {
  left: var(--hero-tile);
}

.hero-wire--right {
  right: var(--hero-tile);
}

.hero-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}

.hero-wire--left .hero-link {
  transform-origin: left center;
}

.hero-wire--right .hero-link {
  transform-origin: right center;
}

.hero-models.is-selected .hero-link {
  transform: scaleX(1);
}

/* —— Scene: the ask (Figma 150:10936, 150:10590) ——
   One input across both frames: the placeholder clears and motion.js types the
   question in. The pill holds the wider frame's width so nothing reflows as the
   characters land. */
.hero-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 617px;
  padding: 12px 24px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}

/* A touch under the design's 18px so the whole question clears one line in the
   narrower plate; it wraps gracefully and the pill grows with it if not */
.hero-visual .hero-ask-line {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 1.45em;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: #ffffff;
}

/* Out of flow so the typed line starts at the same x the placeholder held */
.hero-ask-hint {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  transition: opacity 0.35s var(--ease);
}

.hero-ask.is-typing .hero-ask-hint,
.hero-ask.is-typed .hero-ask-hint {
  opacity: 0;
}

.hero-ask-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: #ffffff;
  opacity: 0;
}

.hero-ask.is-typing .hero-ask-caret {
  opacity: 1;
}

.hero-ask.is-typed .hero-ask-caret {
  animation: heroCaret 1.1s steps(1, end) infinite;
}

@keyframes heroCaret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

.hero-ask-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffffff;
}

/* The shared arrow ships as a white stroke; this button is the inverse */
.hero-ask-send img {
  width: 14px;
  height: 14px;
  filter: brightness(0);
}

/* —— Scene: the work behind the answer (Figma 150:10678) ——
   Figma leaves the four cards blank and stacks them, which is taller than the
   plate at any width. They carry the Foundation checks and lie down into a rail
   that drifts under Simon instead: the rail hangs off the plate's centre line so
   it clears his lifted tile whatever the cards end up measuring, and it bleeds
   the full width so cards cut at the plate's own edge. */
.hero-slot--think {
  position: absolute;
  left: 50%;
  top: calc(50% - 84px);
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Same glass as the user prompt in the answer thread. Width hugs the word so
   it reads as a status chip rather than another ask field. */
.hero-think {
  display: inline-flex;
  align-items: baseline;
  padding: 12px 24px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 1.125rem;
  line-height: 1.35;
  color: #ffffff;
  white-space: nowrap;
}

/* Dim base fill, then a sharp gleam and a blurred copy of the same gleam so
   the highlight blooms as it passes. */
.hero-think-word {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.48);
}

.hero-think-word::before,
.hero-think-word::after {
  content: "Working";
  position: absolute;
  left: 0;
  top: 0;
  background-image: linear-gradient(
    105deg,
    transparent 18%,
    rgba(255, 255, 255, 0.15) 38%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.15) 62%,
    transparent 82%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroThinkShimmer 2.4s ease-in-out infinite;
}

.hero-think-word::after {
  filter: blur(7px);
  opacity: 0.9;
}

.hero-think-ellipsis {
  color: rgba(255, 255, 255, 0.7);
}

@keyframes heroThinkShimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -20% 0;
  }
}

.hero-slot--rail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 44px);
}

.hero-rail {
  overflow: hidden;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem) 5rem;
}

/* motion.js clones the four cards once, so half the track is a full set and the
   drift can restart at -50% without a seam. The cards carry their own right
   margin rather than the track carrying a gap — a gap would leave the track an
   uneven number of pitches wide and the loop would jump. */
.hero-rail-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
}

.hero-scene.is-active .hero-rail-track,
.hero-scene.is-leaving .hero-rail-track {
  animation: heroRail 12s linear infinite;
}

@keyframes heroRail {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.hero-check {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.1),
    0 22px 36px rgba(0, 0, 0, 0.07);
  text-align: left;
}

/* Clones are the same four cards again. --rows is set in markup so the
   footer and bar wait out that card's last item. */
.hero-check-rows > :nth-child(1) {
  --row-i: 1;
}
.hero-check-rows > :nth-child(2) {
  --row-i: 2;
}
.hero-check-rows > :nth-child(3) {
  --row-i: 3;
}
.hero-check-rows > :nth-child(4) {
  --row-i: 4;
}
.hero-check-rows > :nth-child(5) {
  --row-i: 5;
}
.hero-check-rows > :nth-child(6) {
  --row-i: 6;
}
.hero-check-rows > :nth-child(7) {
  --row-i: 7;
}
.hero-check-rows > :nth-child(8) {
  --row-i: 8;
}

.hero-rail .hero-check {
  flex: 0 0 280px;
  margin-right: 16px;
}

.hero-visual .hero-check-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
}

.hero-visual .hero-check-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--zinc-950);
}

.hero-check-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  min-height: 1.45em;
}

.hero-check-rows::before {
  content: "Working...";
  position: absolute;
  left: 0;
  top: 0.35em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--zinc-400);
  animation: heroCheckWorking 1.2s ease-in-out infinite;
  pointer-events: none;
}

.hero-check.is-in .hero-check-rows::before {
  animation: heroCheckWorkingOut 0.2s ease forwards;
  animation-delay: 0.22s;
}

.hero-check-row,
.hero-check-map {
  --row-h: 1.4em;
}

.hero-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--zinc-700);
}

.hero-check-row > span:not(.hero-check-dot) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-check-row em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.6875rem;
  color: var(--zinc-400);
  white-space: nowrap;
}

.hero-check-row img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.hero-check-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.hero-check-dot--bad {
  background: #f43f5e;
}

.hero-check-row.is-blocked > span:not(.hero-check-dot) {
  color: var(--zinc-400);
  text-decoration: line-through;
}

.hero-check-row.is-live em {
  font-weight: 600;
  color: var(--brand);
}

.hero-check-map {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.hero-check-map > span {
  flex: 0 0 auto;
  color: var(--zinc-400);
}

.hero-check-map i {
  flex: 0 0 auto;
  font-style: normal;
  color: var(--zinc-300);
}

.hero-check-map strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--zinc-800);
}

.hero-visual .hero-check-foot {
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--zinc-400);
}

/* Each card sizes to its own rows. Items start collapsed and grow
   in once that card is on the plate — motion.js adds .is-in then. */
.hero-visual .hero-check-title,
.hero-visual .hero-check-foot {
  opacity: 0;
  transform: translateY(8px);
}

.hero-check-rows > * {
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
}

.hero-check.is-in .hero-check-title,
.hero-check.is-in .hero-check-rows > *,
.hero-check.is-in .hero-check-foot {
  animation: heroCheckIn 0.42s var(--ease) both;
}

.hero-check.is-in .hero-check-title {
  animation-delay: 0.06s;
}

.hero-check.is-in .hero-check-rows > * {
  animation-name: heroCheckRowIn;
  animation-delay: calc(0.14s + var(--row-i, 1) * 0.14s);
}

.hero-check.is-in .hero-check-foot {
  animation-delay: calc(0.22s + var(--rows, 5) * 0.14s);
}

.hero-check.is-in .hero-check-row.is-live em {
  animation: heroCheckLive 1.1s ease-in-out infinite;
}

.hero-scene.is-leaving .hero-visual .hero-check-title,
.hero-scene.is-leaving .hero-check-rows > *,
.hero-scene.is-leaving .hero-visual .hero-check-foot {
  opacity: 1;
  transform: none;
  animation: none;
}

.hero-scene.is-leaving .hero-check-rows > * {
  height: var(--row-h, 1.4em);
  margin-bottom: 4px;
}

@keyframes heroCheckWorking {
  0%,
  100% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes heroCheckWorkingOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes heroCheckIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroCheckRowIn {
  from {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    height: var(--row-h, 1.4em);
    margin-bottom: 4px;
    opacity: 1;
    transform: none;
  }
}

@keyframes heroCheckLive {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* —— Scene: the answer (Figma 150:10805) —— */
.hero-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
  max-width: 530px;
  text-align: left;
}

.hero-visual .hero-thread-ask {
  max-width: 70%;
  padding: 12px 24px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 1.125rem;
  line-height: 1.35;
  color: #ffffff;
}

/* Simon's side of the thread is opaque white — the same plate the Foundation
   cards sit on. Glass borrowed the mesh's teal, which left both the copy and the
   teal checks fighting the background they were printed on. */
.hero-thread-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 14px 31px rgba(0, 0, 0, 0.1),
    0 40px 48px rgba(0, 0, 0, 0.07),
    0 84px 68px rgba(0, 0, 0, 0.04);
  color: var(--zinc-950);
}

.hero-thread-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--zinc-800);
}

.hero-thread-check img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.hero-thread-check span {
  flex: 1;
  min-width: 0;
}

.hero-thread-check em {
  flex: 0 0 auto;
  font-style: normal;
  color: var(--zinc-400);
  white-space: nowrap;
}

.hero-visual .hero-thread-meta {
  font-size: 0.9375rem;
  color: var(--zinc-400);
}

.hero-visual .hero-thread-answer {
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--zinc-950);
  min-height: 1.4em;
}

/* The artifact waits out the answer stream and rises in once the last character
   lands — same motion as the scene entrances, collapsed out of the card's flex
   gap until then so the card doesn't hold empty space while the copy streams */
.hero-thread-file[data-hero-reveal] {
  max-height: 0;
  overflow: hidden;
  padding-block: 0;
  margin-top: -16px;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.hero-thread-file[data-hero-reveal].is-revealed {
  max-height: none;
  overflow: visible;
  padding-block: 18px;
  margin-top: 0;
  border-color: var(--zinc-200);
  pointer-events: auto;
  animation: heroRiseIn 0.68s var(--ease) forwards;
}

/* White on white would lose the artifact, so it steps down a shade and takes a
   hairline instead of the shadow the card already carries */
.hero-thread-file {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--zinc-50);
  border: 1px solid var(--zinc-200);
}

.hero-thread-file img {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.hero-thread-file-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--zinc-950);
}

.hero-thread-file-meta strong {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-thread-file-meta em {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--zinc-500);
}

/* Below the split the plate can't hold a portrait crop beside the copy, so the
   copy takes the width and the plate becomes a band under it, bleeding to the
   viewport edges the way the old mesh band did. The card rail survives the change
   where the old stack couldn't: a narrow band simply shows fewer cards at once. */
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3rem;
    padding: calc(var(--hero-header) + 3rem) var(--gutter) 0;
    min-height: 0;
  }

  .home-hero .hero-inner {
    max-width: none;
    padding-right: 0;
  }

  .hero-split {
    padding-bottom: var(--gutter);
  }

  .hero-visual {
    min-height: 0;
    height: min(150vw, 42rem);
    margin: 0;
    border-radius: 16px;
  }

  .hero-rail {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .hero-thread {
    gap: 14px;
  }

  .hero-visual .hero-thread-ask,
  .hero-visual .hero-thread-answer {
    font-size: 1rem;
  }

  .hero-thread-card {
    gap: 12px;
    padding: 16px;
  }

  .hero-thread-check {
    font-size: 0.8125rem;
  }

  .hero-thread-file {
    padding: 14px 16px;
    gap: 12px;
  }

  .hero-thread-file-meta strong {
    font-size: 0.9375rem;
  }
}

@media (max-width: 620px) {
  .hero-visual {
    --hero-tile: 52px;
    --hero-gap: 22px;
    height: min(158vw, 44rem);
  }

  /* Same measurements as the desktop stations, off the smaller tile and a
     shorter pill */
  [data-hero-lift="ask"] .hero-anchor {
    transform: translate(-50%, calc(-50% - 72px));
  }

  [data-hero-lift="cards"] .hero-anchor {
    transform: translate(-50%, calc(-50% - 140px));
  }

  [data-hero-lift="off"] .hero-anchor {
    transform: translate(-50%, calc(-50% - 180px));
  }

  .hero-slot--think {
    top: calc(50% - 68px);
  }

  .hero-slot--rail {
    top: calc(50% - 28px);
  }

  .hero-rail .hero-check {
    flex: 0 0 11.5rem;
    padding: 9px 11px;
    gap: 4px;
  }

  .hero-visual .hero-check-title {
    font-size: 0.8125rem;
  }

  .hero-ask {
    padding: 8px 14px;
  }

  .hero-visual .hero-ask-line {
    font-size: 0.9375rem;
  }

  .hero-thread-check em {
    display: none;
  }
}

/* The sequence still turns over — it's the travel, the blur and the typing that
   go, leaving a plain fade between scenes. */
@media (prefers-reduced-motion: reduce) {
  .hero-visual-mesh img {
    animation: none;
  }

  .hero-model,
  .hero-model img,
  .hero-link {
    transition: none;
  }

  /* Simon still changes station, he just doesn't travel between them */
  .hero-anchor {
    transition: opacity 0.4s linear;
  }

  .hero-scene.is-active .hero-rail-track,
  .hero-scene.is-leaving .hero-rail-track {
    animation: none;
  }

  .hero-visual .hero-check-title,
  .hero-check-rows > *,
  .hero-visual .hero-check-foot,
  .hero-check.is-in .hero-check-title,
  .hero-check.is-in .hero-check-rows > *,
  .hero-check.is-in .hero-check-foot,
  .hero-check.is-in .hero-check-row.is-live em {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-check-rows > * {
    height: var(--row-h, 1.4em);
    margin-bottom: 4px;
  }

  .hero-check-rows::before,
  .hero-check.is-in .hero-check-rows::before {
    content: none;
    animation: none;
  }

  .hero-rise {
    transform: none;
    filter: none;
    transition: opacity 0.4s linear;
  }

  .hero-scene.is-active .hero-rise {
    animation: none;
    opacity: 1;
  }

  .hero-scene.is-leaving .hero-rise {
    animation: none;
    opacity: 0;
  }

  .hero-ask.is-typed .hero-ask-caret {
    animation: none;
    opacity: 0;
  }

  .hero-think-word {
    color: #ffffff;
  }

  .hero-think-word::before,
  .hero-think-word::after {
    content: none;
    animation: none;
    filter: none;
  }

  .hero-think-ellipsis {
    color: #ffffff;
  }

  .hero-thread-file[data-hero-reveal].is-revealed {
    animation: none;
    opacity: 1;
    max-height: none;
    padding-block: 18px;
    margin-top: 0;
    border-color: var(--zinc-200);
  }
}

/* —— Hero spot (Figma convergence viz) —— */
.hero-spot {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Match SVG viewBox aspect (1920×520) so ticks aren't stretched */
  height: calc(100vw * 520 / 1920);
  max-height: 44vh;
  min-height: 220px;
  pointer-events: none;
  flex-shrink: 0;
  align-self: stretch;
  display: grid;
  place-items: center;
}

.hero-spot-svg {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}

@property --stack-gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 14px;
}

.hero-stack {
  --stack-gap: 14px;
  --stack-mid: 2; /* center of 5 plates (0..4) */
  position: relative;
  grid-area: 1 / 1;
  z-index: 5;
  width: min(48vw, 320px);
  height: min(34vw, 230px);
  margin: 0;
  /* Diamond art sits slightly left in the PNG — nudge to optical center */
  translate: 6px 0;
  pointer-events: none;
  user-select: none;
  transition: --stack-gap 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-stack-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  display: block;
  z-index: calc(var(--i) + 1);
  /* Center the stack as a group; i=4 is simon-stack-02 on top */
  transform: translate(
    -50%,
    calc(-50% - (var(--i) - var(--stack-mid)) * var(--stack-gap))
  );
  will-change: transform;
}

.hero-stack-plate--top {
  z-index: 10;
}

.hero-stack.is-open {
  --stack-gap: 48px;
  transition: none;
}

.hero-stack.is-closing,
.hero-stack.is-closed {
  --stack-gap: 14px;
}

/* Ticks wait until the stack has closed */
.hero-spot-svg {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.hero-spot.is-ticks-on .hero-spot-svg {
  opacity: 1;
}

.hero-spot .tick {
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.hero-spot .tick-unified {
  stroke: rgba(255, 255, 255, 0.82);
}

.hero-spot .tick-mid {
  stroke: rgba(255, 255, 255, 0.55);
}

.hero-spot .tick-stream {
  stroke: rgba(255, 255, 255, 0.58);
}

.home-hero--light .hero-spot .tick {
  stroke: rgba(9, 9, 11, 0.38);
}

.home-hero--light .hero-spot .tick-unified {
  stroke: rgba(9, 9, 11, 0.55);
}

.home-hero--light .hero-spot .tick-mid {
  stroke: rgba(9, 9, 11, 0.32);
}

.home-hero--light .hero-spot .tick-stream {
  stroke: rgba(9, 9, 11, 0.36);
}

.home-hero--light .hero-spot .tick-mark--neutral {
  stroke: rgba(9, 9, 11, 0.88);
}

.home-hero--light .hero-card {
  background: transparent;
  border: none;
  color: #09090b;
  box-shadow: none;
  backdrop-filter: none;
}

.home-hero--light .hero-card-kicker {
  color: #71717a;
}

.home-hero--light .hero-card-detail {
  color: #52525b;
}

/* Cards on the underside of the stream hang into the teal band, where the muted
   zinc inks drop to ~2:1. Titles are near-black already and hold up. */
.home-hero--light .hero-card--below .hero-card-kicker {
  color: #27272a;
}

.home-hero--light .hero-card--below .hero-card-detail {
  color: #18181b;
}

body:not(:has(.mega-backdrop.is-open)) .site-header.is-light:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body:not(:has(.mega-backdrop.is-open))
  .site-header.is-light:not(.is-scrolled)::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-spot .tick-mark {
  stroke-width: 3;
  stroke-linecap: round;
}

.hero-spot .tick-mark-glow {
  display: none;
}

.hero-spot .tick-mark--danger {
  stroke: #fb2c36;
}
.hero-spot .tick-mark--ok {
  stroke: #7bf1a8;
}
.hero-spot .tick-mark--warn {
  stroke: #f5c542;
}
.hero-spot .tick-mark--neutral {
  stroke: rgba(255, 255, 255, 0.95);
}
.hero-spot .tick-mark--info {
  stroke: #5ed6d6;
}

.hero-card-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.hero-card-shell--above {
  justify-content: flex-end;
}

.hero-card-shell--below {
  justify-content: flex-start;
}

.hero-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 208px;
  padding: 0.65rem 0.75rem 0.7rem 0;
  border-radius: 12px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  color: #fafafa;
  font-family: Inter, sans-serif;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.92);
  transform-origin: 0% 0%;
  will-change: opacity, transform;
  text-align: left;
  box-shadow: none;
}

.hero-card--above {
  transform-origin: 0% 100%;
}

.hero-card--below {
  transform-origin: 0% 0%;
}

.hero-card-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.hero-card-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.55);
  line-height: 1;
  min-height: 10px;
}

.hero-card-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: inherit;
  margin: 0.1rem 0 0;
  min-height: 1.25em;
}

.hero-card-detail {
  margin: 0;
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(250, 250, 250, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.35em;
}

.hero-card-logos {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.3rem;
  opacity: 0;
  transform: translateY(4px);
  will-change: opacity, transform;
}

.hero-card-logos img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.92;
}

.home-hero--light .hero-card-logos img {
  opacity: 1;
}

.hero-card--neutral .hero-card-dot {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.hero-card--danger .hero-card-dot {
  background: #fb2c36;
  box-shadow: 0 0 8px rgba(251, 44, 54, 0.55);
}
.hero-card--ok .hero-card-dot {
  background: #7bf1a8;
  box-shadow: 0 0 8px rgba(123, 241, 168, 0.45);
}
.hero-card--warn .hero-card-dot {
  background: #f5c542;
  box-shadow: 0 0 8px rgba(245, 197, 66, 0.55);
}
.hero-card--info .hero-card-dot {
  background: #5ed6d6;
  box-shadow: 0 0 8px rgba(94, 214, 214, 0.5);
}

.hero-card.is-healed .hero-card-dot {
  background: #b8f474;
  box-shadow: 0 0 8px rgba(184, 244, 116, 0.55);
}

.home-hero--light .hero-card--neutral .hero-card-dot,
.home-hero--light .hero-card-dot {
  background: #3f3f47;
  box-shadow: none;
}

.home-hero--light .hero-card--danger .hero-card-dot {
  background: #fb2c36;
  box-shadow: 0 0 8px rgba(251, 44, 54, 0.35);
}

.home-hero--light .hero-card--ok .hero-card-dot {
  background: #16a34a;
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.35);
}
.home-hero--light .hero-card--warn .hero-card-dot {
  background: #ca8a04;
  box-shadow: 0 0 8px rgba(202, 138, 4, 0.35);
}
.home-hero--light .hero-card--info .hero-card-dot {
  background: #0d9488;
  box-shadow: 0 0 8px rgba(13, 148, 136, 0.35);
}
.home-hero--light .hero-card.is-healed .hero-card-dot {
  background: #65a30d;
  box-shadow: 0 0 8px rgba(101, 163, 13, 0.4);
}

.home-hero--light .hero-spot .tick-mark--ok {
  stroke: #16a34a;
}
.home-hero--light .hero-spot .tick-mark--warn {
  stroke: #ca8a04;
}
.home-hero--light .hero-spot .tick-mark--info {
  stroke: #0d9488;
}

/* —— Reveal motion —— */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3 {
  transition-delay: 0.3s;
}
.reveal-delay-4 {
  transition-delay: 0.45s;
}

.hero-anim {
  opacity: 0;
  transform: translateY(24px);
}

/* Hero copy waits for the stack close, then plays */
body.is-hero-ready .hero-anim {
  animation: heroIn 0.9s var(--ease) forwards;
}

body.is-hero-ready .hero-anim-1 {
  animation-delay: 0.05s;
}
body.is-hero-ready .hero-anim-2,
body.is-hero-ready .hero-anim-3 {
  animation: none;
}

body.is-hero-copy-ready .hero-anim-2 {
  animation: heroIn 0.9s var(--ease) forwards;
  animation-delay: 0s;
}
body.is-hero-copy-ready .hero-anim-3 {
  animation: heroIn 0.9s var(--ease) forwards;
  animation-delay: 0.12s;
}
body.is-hero-ready .hero-anim-4 {
  animation-delay: 0.45s;
}
body.is-hero-ready .hero-anim-5 {
  animation-delay: 0.4s;
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— Closing hero line write-on ——
   Every character blurs in on the brand teal, then a second pass through the
   same stagger hands each one to the final ink. Both layers share one
   inline-block cell sized by the ink, so the measured line never reflows while
   the waves run. Delays are driven off --c, the character index site.js writes. */
.hero-line.has-hero-chars {
  --char-step: 22ms;
  --char-lead: 0.3s;
  /* Ink starts the moment the last teal character reads as landed, so the two
     waves run into each other with no beat between them. The ease front-loads
     each fade, so that lands well before the 0.42s segment formally ends.
     This is also where the teal lets go — heroCharTeal's hold ends here. */
  --char-hand: 0.72s;
}

/* Kept out of selections so copying the headline doesn't double the line */
.hero-line-label {
  user-select: none;
}

.hero-word {
  display: inline-block;
}

.hero-char {
  position: relative;
  display: inline-block;
}

.hero-char-ink {
  display: inline-block;
  opacity: 0;
}

.hero-char-ghost {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand);
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

body.is-hero-ready .has-hero-chars .hero-char-ghost {
  animation: heroCharTeal 1.5s var(--ease) forwards;
  animation-delay: calc(var(--char-lead) + var(--c) * var(--char-step));
}

body.is-hero-ready .has-hero-chars .hero-char-ink {
  animation: heroCharInk 0.62s var(--ease) forwards;
  animation-delay: calc(
    var(--char-lead) + var(--char-hand) + var(--c) * var(--char-step)
  );
}

/* Percentages are tied to the 1.5s duration: sharp at 0.42s, letting go at
   0.72s (--char-hand, where the ink takes over), gone by the end */
@keyframes heroCharTeal {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.12em) scale(0.94);
  }
  28%,
  48% {
    opacity: 1;
    filter: blur(0);
    transform: none;
    /* Linear on the way out so the teal lingers while the ink rises under it,
       instead of the shared ease dumping it and thinning the character */
    animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-0.06em);
  }
}

@keyframes heroCharInk {
  from {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(-0.1em) scale(1.06);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* Once the last character lands, drop the teal layer and the filters */
.hero-line.is-typed .hero-char-ghost {
  display: none;
}

.hero-line.is-typed .hero-char-ink {
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-char-ghost {
    display: none;
  }
  .hero-char-ink {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
  .hero-stack {
    transition: none !important;
  }
  .hero-spot-svg {
    opacity: 1;
    transition: none;
  }
  .hero-anim {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .hero-spot {
    height: min(34vh, calc(100vw * 620 / 1920));
    min-height: 200px;
    max-height: 38vh;
    margin-top: 1.25rem;
  }
  /* Plate spacing is scaled with the art so the closed stack keeps its density */
  .hero-stack,
  .hero-stack.is-closing,
  .hero-stack.is-closed {
    --stack-gap: 10px;
  }
  .hero-stack {
    width: min(48vw, 180px);
    height: min(33vw, 132px);
    translate: 4px 0;
  }
  .hero-stack.is-open {
    --stack-gap: 26px;
  }
  /* The stream runs ticks only here. hero-spot.js skips building the cards at
     load; this catches the ones a landscape → portrait rotation leaves behind. */
  .hero-spot-cards {
    display: none;
  }
  .home-hero .hero-inner {
    max-width: 100%;
  }
  .home-hero .hero-split {
    padding-top: calc(var(--hero-header) + 4.5rem);
  }
  .home-hero h1 {
    font-size: clamp(2.35rem, 9vw, 2.9rem);
    letter-spacing: -0.035em;
  }
  .home-hero h1 .hero-muted {
    white-space: normal;
  }
  .home-hero h1 .hero-line {
    white-space: normal;
  }
  .home-hero .lede {
    max-width: 34rem;
    margin-top: 1rem;
  }
  .home-hero .cta-row {
    display: none;
  }
}

/* —— Conflict demo —— */
.conflict-demo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 2.5rem;
  max-width: 720px;
}

@media (max-width: 700px) {
  .conflict-demo {
    grid-template-columns: 1fr;
  }
}

.answer-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--bg-card);
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.answer-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.answer-card .q {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.answer-card .pct {
  font-family: Inter, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}

.conflict-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #71717a;
}

/* —— Product pair (V7 industry-card energy) —— */
.product-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 800px) {
  .product-pair {
    grid-template-columns: 1fr;
  }
}

.product-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  background: linear-gradient(
    180deg,
    var(--bg-card) 0%,
    var(--bg-elevated) 100%
  );
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition:
    border-color 0.35s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 160, 76, 0.4),
    transparent
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.product-card:hover {
  border-color: rgba(232, 160, 76, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.product-card:hover::before {
  opacity: 1;
}

.product-card.primary {
  border-color: rgba(232, 160, 76, 0.25);
  background:
    radial-gradient(
      ellipse 80% 60% at 0% 0%,
      rgba(232, 160, 76, 0.1),
      transparent 55%
    ),
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
}

.product-card .product-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #71717a;
  margin: 0;
}

.product-card h3 {
  font-size: 1.5rem;
  margin: 0;
  max-width: none;
  letter-spacing: -0.025em;
}

.product-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  flex: 1;
}

.product-card .component-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.product-card .component-list li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}

.product-card .component-list strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.product-card > a {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.25s var(--ease);
}

.product-card > a:hover {
  gap: 0.6rem;
  color: #71717a;
}

.alts-line {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 40rem;
}

.alts-line a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}

.alts-line a:hover {
  color: var(--text);
}

/* —— Section variants —— */
.section-pain {
  text-align: center;
}

.section-pain h2 {
  margin-left: auto;
  margin-right: auto;
}

.section-pain p {
  margin-left: auto;
  margin-right: auto;
}

.section-pain .conflict-demo {
  margin-left: auto;
  margin-right: auto;
}

.section-close {
  position: relative;
  text-align: center;
  padding-top: 10rem !important;
  padding-bottom: 8rem !important;
  overflow: hidden;
  background: transparent !important;
}

.close-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100vw;
  height: 140%;
  min-height: 110%;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.18) 1px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  background-position: center;
}

/* Radial fade: dots strong in the center, dissolve to solid bg at the edges */
.close-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 72% 55% at 50% 48%,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.75) 62%,
    #000 78%
  );
}

.section-close > :not(.close-dots) {
  position: relative;
  z-index: 1;
}

.section-close h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}

.section-close p {
  margin-left: auto;
  margin-right: auto;
  max-width: 32rem;
}

.section-close .cta-row {
  justify-content: center;
  margin-top: 1.5rem;
}

.section.close {
  background: transparent;
}

.section-trust {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
  background: transparent !important;
  text-align: left;
}

.trust-headline {
  max-width: none;
  margin: 0 0 0.75rem;
  font-size: clamp(2.25rem, 4.6vw, 3.6rem);
  letter-spacing: -0.02em;
  color: #fafafa;
}

.trust-sub {
  margin: 0 0 4.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #a1a1aa;
}

.section-trust:has(.trust-features) .trust-sub {
  margin-bottom: 2.25rem;
}

.trust-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 4.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  padding: 1.35rem 1.25rem 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
}

.trust-feature:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-feature:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-feature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 16rem;
  height: 9rem;
  flex: 0 0 9rem;
  min-width: 0;
  min-height: 0;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background:
    radial-gradient(
      ellipse 70% 80% at 50% 40%,
      rgba(255, 255, 255, 0.035),
      transparent 70%
    ),
    #101012;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-sizing: border-box;
}

.trust-viz {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.85rem 0.9rem;
  box-sizing: border-box;
}

/* Two vaults with an air gap — tenants never share a room. */
.trust-viz--isolate {
  gap: 0.55rem;
}

.trust-viz-vault {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0.55rem 0.5rem;
  border-radius: 0.4rem;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.trust-viz-vault-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.trust-viz-vault-head b {
  width: 1.15rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.trust-viz-lock {
  width: 0.85rem;
  height: 0.85rem;
  color: #fafafa;
}

.trust-viz-lock svg {
  display: block;
  width: 100%;
  height: 100%;
}

.trust-viz-vault i {
  display: block;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.trust-viz-vault i:nth-of-type(1) {
  width: 92%;
}

.trust-viz-vault i:nth-of-type(2) {
  width: 68%;
}

.trust-viz-wall {
  flex: 0 0 2px;
  align-self: stretch;
  margin: 0.15rem 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 150, 137, 0.85) 28%,
    rgba(0, 150, 137, 0.85) 72%,
    transparent
  );
  border-radius: 999px;
}

/* A file that never reaches the model. */
.trust-viz--train {
  gap: 0.4rem;
}

.trust-viz-file {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 0 0 auto;
  width: 3.15rem;
  height: 4.05rem;
  padding: 0.5rem 0.42rem;
  border-radius: 0.35rem;
  background: #f4f4f5;
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}

.trust-viz-file i {
  display: block;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.16);
}

.trust-viz-file i:first-child {
  width: 42%;
  height: 0.28rem;
  background: rgba(9, 9, 11, 0.28);
}

.trust-viz-file i:nth-child(2) {
  width: 100%;
}

.trust-viz-file i:nth-child(3) {
  width: 78%;
}

.trust-viz-block {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.22) 0 5px,
    transparent 5px 9px
  );
}

.trust-viz-block::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  translate: -50% -50%;
  border-radius: 999px;
  background: #101012;
  border: 1.5px solid #009689;
  box-shadow:
    inset 0 0 0 0 #101012,
    0 0 0 3px #101012;
  background-image: linear-gradient(
    135deg,
    transparent 46%,
    #009689 46%,
    #009689 54%,
    transparent 54%
  );
}

.trust-viz-model {
  position: relative;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.08),
    transparent 62%
  );
}

.trust-viz-model::before,
.trust-viz-model::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.trust-viz-model::after {
  inset: 42%;
  background: rgba(255, 255, 255, 0.22);
  border: none;
}

/* Stamped document — yours, not shared. */
.trust-viz--own {
  align-items: center;
}

.trust-viz-deed {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  width: 3.35rem;
  height: 4.25rem;
  padding: 0.55rem 0.48rem;
  border-radius: 0.32rem;
  background: #f4f4f5;
  box-shadow:
    0 10px 18px -12px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(9, 9, 11, 0.05);
  box-sizing: border-box;
}

.trust-viz-deed i {
  display: block;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.14);
}

.trust-viz-deed i:first-child {
  width: 46%;
  height: 0.28rem;
  background: rgba(9, 9, 11, 0.28);
}

.trust-viz-deed i:nth-child(2),
.trust-viz-deed i:nth-child(3) {
  width: 100%;
}

.trust-viz-deed i:nth-child(4) {
  width: 72%;
}

.trust-viz-seal {
  position: absolute;
  right: 0.35rem;
  bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #009689;
  color: #fafafa;
  box-shadow: 0 4px 10px -4px rgba(0, 150, 137, 0.7);
}

.trust-viz-seal svg {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
}

/* A short log: time, action, check. */
.trust-viz--audit {
  padding-left: 1.05rem;
  padding-right: 1.05rem;
}

.trust-viz-log {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-viz-log::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.trust-viz-log li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.95rem;
  color: rgba(250, 250, 250, 0.78);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.trust-viz-log li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  translate: 0 -50%;
  border-radius: 999px;
  background: #009689;
  box-shadow: 0 0 0 3px #101012;
}

.trust-viz-log em {
  flex: 0 0 2.15rem;
  color: #71717a;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.trust-viz-log span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trust-feature h3 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fafafa;
}

.section-trust .trust-feature p {
  margin: 0;
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #a1a1aa;
}

@media (max-width: 900px) {
  .trust-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-feature:nth-child(odd) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .trust-feature:nth-child(even) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .trust-feature-visual {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .trust-features {
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
  }

  .trust-feature {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* —— Placeholders (inner pages) —— */
.placeholder {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(232, 160, 76, 0.04), transparent 40%),
    var(--bg-card);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.placeholder.tall {
  min-height: 280px;
}
.placeholder.short {
  min-height: 100px;
}
.placeholder.small {
  min-height: 120px;
  max-width: 420px;
}

/* —— Cards / grids (inner pages) —— */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 800px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  background: var(--bg-card);
  transition:
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.card .icon-box {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  background: var(--accent-soft);
}

.card h3 {
  font-size: 1.05rem;
}

.verbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (max-width: 800px) {
  .verbs {
    grid-template-columns: 1fr 1fr;
  }
}

.verb {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
  background: var(--bg-card);
}

.verb strong {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: #71717a;
}

.verb p {
  font-size: 0.875rem;
  margin: 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0;
}

.tab {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
}

.tab.active {
  background: var(--white);
  color: #09090b;
  border-color: #fafafa;
}

.stat-block {
  text-align: center;
  padding: 2rem 1rem;
}

.stat-block .big {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #71717a;
  margin: 0 0 0.75rem;
}

.questions-stack {
  margin-top: 1.5rem;
}

.questions-stack p {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 36ch;
  margin: 0 0 1.25rem;
  line-height: 1.35;
  color: var(--text);
}

.vocab-field {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.vocab-field span {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.entity-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .entity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.entity {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem;
  background: var(--bg-card);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.entity strong {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: #71717a;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .skill-grid {
    grid-template-columns: 1fr;
  }
}

.skill-chip {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  background: var(--bg-card);
  color: var(--text-secondary);
  transition:
    border-color 0.2s,
    color 0.2s;
}

.skill-chip:hover {
  border-color: rgba(232, 160, 76, 0.4);
  color: var(--text);
}

.pricing-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 800px) {
  .pricing-cols {
    grid-template-columns: 1fr;
  }
}

.price-col {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  background: var(--bg-card);
}

.price-col.emphasized {
  border-color: rgba(232, 160, 76, 0.4);
  background:
    radial-gradient(
      ellipse 80% 50% at 0% 0%,
      rgba(232, 160, 76, 0.12),
      transparent 55%
    ),
    var(--bg-card);
  position: relative;
}

.price-col.emphasized::after {
  content: "START HERE";
  position: absolute;
  top: -0.6rem;
  left: 1.25rem;
  background: var(--accent);
  color: #09090b;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

.compare-table th,
.compare-table td {
  border: 1px solid var(--border);
  padding: 0.75rem 0.85rem;
  text-align: left;
}

.compare-table th {
  background: var(--bg-soft);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-grid {
  display: grid;
  gap: 0.85rem;
  max-width: 480px;
  margin-top: 1.5rem;
}

.form-grid label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
  font-weight: 600;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: #71717a;
}

.role-block {
  border-left: 2px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1rem 0;
}

.role-block .changes {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.role-block .changes strong {
  color: var(--text-secondary);
}

.zigzag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.zigzag.reverse .zig-copy {
  order: 2;
}

@media (max-width: 800px) {
  .zigzag,
  .zigzag.reverse .zig-copy {
    grid-template-columns: 1fr;
  }
  .zigzag.reverse .zig-copy {
    order: 0;
  }
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .before-after {
    grid-template-columns: 1fr;
  }
}

.ba-pane {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--bg-card);
  min-height: 180px;
}

.ba-pane .label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.confidence-states {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.confidence-states span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
}

.two-way {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .two-way {
    grid-template-columns: 1fr;
  }
}

.two-way .way {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  background: var(--bg-card);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.two-way .way strong {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 0.4rem;
}

.two-way .arrow {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.library-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .library-strip {
    grid-template-columns: 1fr;
  }
}

/* —— Feature switcher (Glean-style interactive panels) —— */
.feature-block {
  margin-top: 4rem;
}

.feature-block:first-of-type {
  margin-top: 2.5rem;
}

.feature-block-head {
  margin-bottom: 1.75rem;
  max-width: 48rem;
}

.feature-block-head .product-title {
  font-size: clamp(2rem, 3.5vw, 2.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
  max-width: none;
  color: var(--text);
}

.feature-block-head .product-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #71717a;
  margin: 0 0 0.65rem;
}

.feature-block-head h3 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  max-width: 22ch;
}

.feature-block-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 44rem;
}

.feature-block-head .feature-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--brand);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.feature-block-head .feature-learn .mega-arrow {
  color: currentColor;
  transition: transform 0.2s var(--ease);
}

.feature-block-head .feature-learn:hover {
  color: var(--brand-hover);
}

.feature-block-head .feature-learn:hover .mega-arrow {
  transform: translateX(3px);
}

.feature-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-elevated);
  min-height: 420px;
}

@media (max-width: 900px) {
  .feature-switcher {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--border);
}

@media (max-width: 900px) {
  .feature-list {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

.feature-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 1.35rem 1.5rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font-family: Inter, sans-serif;
  cursor: pointer;
  position: relative;
  transition: background 0.25s var(--ease);
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.feature-item.is-active {
  background: rgba(255, 255, 255, 0.04);
}

.feature-item.is-active::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0;
  bottom: 0.75rem;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--accent);
}

.feature-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--bg-card);
  flex-shrink: 0;
}

.feature-item.is-active .feature-icon {
  color: #71717a;
  border-color: rgba(232, 160, 76, 0.45);
  background: var(--accent-soft);
}

.feature-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-copy strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.feature-copy > span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.feature-item.is-active .feature-copy > span {
  color: var(--text-secondary);
}

.feature-stage {
  position: relative;
  background:
    radial-gradient(
      ellipse 70% 60% at 70% 30%,
      rgba(232, 160, 76, 0.08),
      transparent 55%
    ),
    var(--bg-soft);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.feature-panel {
  display: none;
  width: 100%;
  max-width: 440px;
  animation: panelIn 0.35s var(--ease);
}

.feature-panel.is-active {
  display: block;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mock-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.mock-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.mock-card-title .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  position: relative;
}

.mock-row:first-of-type {
  border-top: none;
}

.mock-row .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  z-index: 0;
}

.mock-row > * {
  position: relative;
  z-index: 1;
}

.mock-row .val {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--accent-soft);
  color: #71717a;
  margin-bottom: 0.85rem;
}

.mock-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.mock-chip {
  font-size: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

.feature-block-cta {
  margin-top: 1.25rem;
}

.feature-block-cta a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.feature-block-cta a:hover {
  color: #71717a;
}

/* —— Capability 2×2 grid (Foundation / Work) —— */
.capability-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  box-sizing: border-box;
  /* Bleed top rule + bottom flush; inset L/R so card borders align with content */
  width: calc(100% + 2 * var(--section-pad-x, 0px));
  max-width: none;
  margin-left: calc(-1 * var(--section-pad-x, 0px));
  margin-right: calc(-1 * var(--section-pad-x, 0px));
  margin-bottom: calc(-1 * var(--section-pad-b, 0px));
  padding-left: var(--section-pad-x, 0px);
  padding-right: var(--section-pad-x, 0px);
  border: none;
  border-top: 1px solid var(--zinc-200);
}

/* Quote-style dots — vertical strips in the L/R gutters */
.capability-grid::before,
.capability-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--section-pad-x, 2.5rem);
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    rgba(0, 150, 137, 0.28) 1px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  background-position: center top;
}

.capability-grid::before {
  left: 0;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.capability-grid::after {
  right: 0;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    ),
    linear-gradient(
      to left,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    ),
    linear-gradient(
      to left,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 800px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }
}

.capability-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "title"
    "desc"
    "media";
  row-gap: 0.85rem;
  align-items: start;
  min-width: 0;
  padding: 2rem 1.75rem;
  box-sizing: border-box;
  border-right: 1px solid var(--zinc-200);
  border-bottom: 1px solid var(--zinc-200);
  position: relative;
  z-index: 1;
  transition: background-color 0.2s ease;
}

.capability-card:hover {
  z-index: 4;
  background-color: var(--zinc-50);
}

/* Outer vertical borders — left column left, right column right */
.capability-card:nth-child(odd) {
  border-left: 1px solid var(--zinc-200);
}

.capability-card:nth-child(even) {
  border-right: 1px solid var(--zinc-200);
}

.capability-card:nth-last-child(-n + 2) {
  border-bottom: none;
}

@media (max-width: 800px) {
  .capability-card {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--zinc-200);
    padding: 1.75rem;
  }

  .capability-card:nth-child(odd),
  .capability-card:nth-child(even) {
    border-left: 1px solid var(--zinc-200);
    border-right: 1px solid var(--zinc-200);
    padding: 1.75rem;
  }

  .capability-card:has(> .capability-media--doc) {
    padding-bottom: 0;
  }

  .capability-card:last-child {
    border-bottom: none;
  }

  .capability-card:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--zinc-200);
  }

  .capability-card:last-child {
    border-bottom: none;
  }
}

/* Rounded plate behind mockups (Foundation subsections) */
.capability-grid--plates .capability-card:hover {
  z-index: 1;
  background-color: transparent;
}

.capability-grid--plates .capability-media {
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--zinc-100);
  background-image:
    radial-gradient(95% 120% at 6% -12%, #fafafa, transparent 58%),
    radial-gradient(70% 90% at 104% -6%, #ffffff, transparent 60%),
    radial-gradient(105% 115% at 62% 118%, #e4e4e7, transparent 64%);
}

.capability-grid--plates .capability-media > * {
  position: relative;
  width: 86%;
  height: auto;
  min-height: 0;
  max-height: 86%;
  overflow: hidden;
  border: 1px solid var(--zinc-200);
  border-radius: 0.9rem;
  background: #fff;
  box-shadow:
    0 24px 40px -28px rgba(9, 9, 11, 0.28),
    0 8px 16px -10px rgba(9, 9, 11, 0.1);
}

.capability-grid--plates .capability-media > *::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

/* Denser mockups need a definite height for tables, maps, and documents. */
.capability-grid--plates:not(.capability-grid--three) .capability-media > * {
  height: 86%;
}

.capability-grid--plates .capability-card:has(> .capability-media--doc) {
  padding-bottom: 2rem;
}

.capability-grid--plates .capability-media--doc > .simon-doc-stage {
  padding: 1rem 1rem 0;
}

/* Funds & assets: keep Status in view; Details absorbs the leftover width. */
.capability-grid--plates .simon-app-table:not(.simon-app-conflicts-table) {
  width: 100%;
  table-layout: fixed;
}

.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  th:nth-child(n + 4),
.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  td:nth-child(n + 4) {
  display: none;
}

.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  th:first-child,
.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  td:first-child {
  width: 42%;
}

.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  th:nth-child(2),
.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  td:nth-child(2) {
  width: auto;
}

.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  th:nth-child(3),
.capability-grid--plates
  .simon-app-table:not(.simon-app-conflicts-table)
  td:nth-child(3) {
  width: 6.25rem;
  padding-right: 0.75rem;
}

.capability-grid--plates .simon-app-entity > div {
  min-width: 0;
  overflow: hidden;
}

.capability-grid--plates .simon-app-entity strong,
.capability-grid--plates .simon-app-entity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3-up row (Foundation Governance) */
.capability-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-grid--three .capability-card {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.capability-grid--three .capability-card:nth-child(odd),
.capability-grid--three .capability-card:nth-child(even) {
  border-left: none;
}

.capability-grid--three .capability-card:nth-child(3n + 1) {
  border-left: 1px solid var(--zinc-200);
}

.capability-grid--three .capability-card:nth-child(3n) {
  border-right: 1px solid var(--zinc-200);
}

.capability-grid--three .capability-card:nth-last-child(-n + 3) {
  border-bottom: none;
}

@media (max-width: 900px) {
  .capability-grid--three {
    grid-template-columns: 1fr;
  }

  .capability-grid--three .capability-card:nth-child(odd),
  .capability-grid--three .capability-card:nth-child(even),
  .capability-grid--three .capability-card:nth-child(3n),
  .capability-grid--three .capability-card:nth-child(3n + 1) {
    padding: 1.75rem;
    border-left: 1px solid var(--zinc-200);
    border-right: 1px solid var(--zinc-200);
    border-bottom: 1px solid var(--zinc-200);
  }

  .capability-grid--three .capability-card:last-child {
    border-bottom: none;
  }
}

/* —— Capability row accordion (home Foundation / Work) ——
   One row, one card open at a time. `is-open` is set in markup on the first
   card and moved by site.js on hover/focus. */
/* Fixed height, not min-height: the open card's copy length would otherwise set
   the row height and the bottom edge would shift on every hover. */
/* Tall enough that the square visual plate fits with room to overhang */
.capability-grid--accordion {
  display: flex;
  align-items: stretch;
  height: clamp(30rem, 44vw, 44rem);
}

.capability-grid--accordion > .capability-card {
  flex: 1 1 0%;
  min-width: 0;
  padding: 1.85rem 1.5rem;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border-left: none;
  border-right: 1px solid var(--zinc-200);
  border-bottom: none;
  overflow: hidden;
  transition:
    flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease;
}

.capability-grid--accordion > .capability-card:first-child {
  border-left: 1px solid var(--zinc-200);
}

/* Hover is what opens a card, so a hover tint would only ever show on the open
   one — leave the surface flat instead. */
.capability-grid--accordion > .capability-card:hover {
  background-color: transparent;
}

.capability-grid--accordion > .capability-card.is-open {
  flex-grow: 3.2;
}

.capability-grid--accordion > .capability-card:not(.is-open) .capability-desc,
.capability-grid--accordion > .capability-card:not(.is-open) .capability-media {
  display: none;
}

.capability-grid--accordion > .capability-card.is-open .capability-desc,
.capability-grid--accordion > .capability-card.is-open .capability-media {
  animation: cap-acc-in 0.4s ease 0.08s both;
}

.capability-grid--accordion .capability-media {
  align-self: stretch;
  aspect-ratio: auto;
  min-height: 0;
  margin-top: 0.4rem;
}

/* The plate takes whatever height the copy leaves it, so a description that
   wraps to a different number of lines resizes the plate: between cards, and
   again mid-expand while the card is still narrow enough to wrap. Reserve the
   copy block so the plate is the same size everywhere and never moves. */
.capability-grid--accordion .capability-desc {
  height: calc(var(--cap-desc-lines, 4) * 1.55em);
  overflow: hidden;
}

@media (max-width: 1240px) {
  .capability-grid--accordion {
    --cap-desc-lines: 5;
  }
}

@keyframes cap-acc-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-grid--accordion > .capability-card {
    transition: none;
  }

  .capability-grid--accordion > .capability-card.is-open .capability-desc,
  .capability-grid--accordion > .capability-card.is-open .capability-media {
    animation: none;
  }
}

/* Below the row breakpoint every card is open and stacked. */
@media (max-width: 1000px) {
  .capability-grid--accordion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .capability-grid--accordion > .capability-card {
    grid-template-rows: none;
    padding: 1.75rem;
    overflow: visible;
    border-left: 1px solid var(--zinc-200);
    border-right: 1px solid var(--zinc-200);
    border-bottom: 1px solid var(--zinc-200);
  }

  .capability-grid--accordion > .capability-card:last-child {
    border-bottom: none;
  }

  .capability-grid--accordion
    > .capability-card:not(.is-open)
    .capability-desc {
    display: block;
  }

  .capability-grid--accordion .capability-desc {
    height: auto;
    overflow: visible;
  }

  .capability-grid--accordion
    > .capability-card:not(.is-open)
    .capability-media {
    display: flex;
  }

  .capability-grid--accordion > .capability-card.is-open .capability-desc,
  .capability-grid--accordion > .capability-card.is-open .capability-media {
    animation: none;
  }

  .capability-grid--accordion .capability-media {
    align-self: start;
    aspect-ratio: 3 / 4;
    min-height: 22rem;
  }
}

.capability-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.35rem;
  margin-bottom: -0.35rem;
}

.capability-title-row {
  grid-area: title;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.capability-title {
  grid-area: title;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--zinc-950);
}

.capability-title-row .capability-title {
  grid-area: auto;
}

.capability-jump-slot {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-card:hover .capability-jump-slot,
.capability-card:focus-within .capability-jump-slot,
.capability-title-row:focus-visible .capability-jump-slot {
  width: 1.15em;
  margin-left: 0.4rem;
}

.capability-jump {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-card:hover .capability-jump,
.capability-card:focus-within .capability-jump,
.capability-title-row:focus-visible .capability-jump {
  transform: translateX(0);
}

.capability-title-row:hover .capability-jump,
.capability-title-row:focus-visible .capability-jump {
  transform: translateX(3px);
}

.capability-title-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .capability-jump-slot,
  .capability-jump {
    transition: none;
  }
}

.capability-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  opacity: 0.85;
}

.capability-desc {
  grid-area: desc;
  margin: 0;
  max-width: none !important;
  color: var(--zinc-500);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.capability-media {
  grid-area: media;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  box-sizing: border-box;
  margin-top: 0.15rem;
}

.capability-media--visual {
  padding: 0;
}

.capability-visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.capability-media--graph {
  padding: 0;
  cursor: default;
  overflow: visible;
}

.capability-media--graph .graph-viz {
  display: block;
  width: 100%;
  height: 100%;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}

.capability-media--graph .g-fund {
  fill: #3b82f6;
}

.capability-media--graph .g-asset {
  fill: #22c55e;
  stroke: #fff;
  stroke-width: 1;
}

.capability-media--graph .graph-edges line {
  stroke-linecap: round;
}

.capability-media--graph .g-label {
  fill: #3f3f46;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: -0.01em;
  pointer-events: none;
}

.capability-media--graph .g-label--fund {
  fill: #18181b;
  font-size: 11px;
  font-weight: 600;
}

.graph-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(252px, 72%);
  max-height: calc(100% - 1.25rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.capability-media--graph:hover .graph-viz,
.capability-media--graph:focus-within .graph-viz {
  opacity: 0.35;
  transform: scale(1.02);
}

.capability-media--graph:hover .graph-hover-card,
.capability-media--graph:focus-within .graph-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.capability-card:has(.capability-media--graph:hover),
.capability-card:has(.capability-media--graph:focus-within),
.capability-card:has(.capability-media--skills:hover),
.capability-card:has(.capability-media--skills:focus-within) {
  z-index: 5;
}

.graph-hover-card-head {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #f4f4f5;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
}

.graph-hover-card-entity {
  padding: 0.65rem 0.7rem 0.35rem;
}

.graph-hover-card-type {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.625rem;
  color: #71717a;
}

.graph-hover-pill {
  margin-left: auto;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
}

.graph-hover-card-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: #09090b;
  letter-spacing: -0.01em;
}

.graph-hover-avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
}

.graph-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.graph-dot--fund {
  background: #3b82f6;
}

.graph-dot--asset {
  background: #22c55e;
}

.graph-hover-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.35rem 0.55rem 0.55rem;
  border-bottom: 1px solid #f4f4f5;
}

.graph-hover-tabs span {
  font-size: 0.5625rem;
  color: #71717a;
  padding: 0.22rem 0.4rem;
  border-radius: 6px;
  white-space: nowrap;
}

.graph-hover-tabs span.is-on {
  color: #09090b;
  background: #f4f4f5;
  font-weight: 560;
}

.graph-hover-tabs em {
  font-style: normal;
  font-size: 0.5rem;
  margin-left: 0.15rem;
  padding: 0.05rem 0.25rem;
  border-radius: 999px;
  background: #e4e4e7;
  color: #52525b;
}

.graph-hover-rels {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  overflow: hidden;
}

.graph-hover-rel {
  padding: 0.5rem 0.55rem;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fff;
}

.graph-hover-rel-from {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5625rem;
  color: #a1a1aa;
}

.graph-hover-rel-edge {
  margin: 0.15rem 0 0.2rem;
  font-size: 0.5625rem;
  color: #a1a1aa;
}

.graph-hover-rel-to {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
}

.graph-hover-rel-meta {
  margin: 0.35rem 0 0;
  font-size: 0.5rem;
  line-height: 1.35;
  color: #a1a1aa;
}

@media (prefers-reduced-motion: reduce) {
  .capability-media--graph .graph-viz,
  .graph-hover-card {
    transition: none;
  }
}

.capability-media--skills {
  padding: 0;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.skills-pill-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.skills-pill-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 1.75rem 0;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}

.skills-pill-fade {
  display: none;
}

.skills-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  border-radius: 999px;
  background: #f4f4f5;
  color: #09090b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--pill-delay, 0ms);
}

.capability-media--skills.is-animated .skills-pill {
  opacity: 1;
  transform: none;
}

.skills-pill img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.skills-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(300px, 88%);
  max-height: calc(100% - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 0.85rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 22px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.capability-media--skills:hover .skills-pill-list,
.capability-media--skills:focus-within .skills-pill-list {
  opacity: 0.28;
  transform: scale(0.98);
}

.capability-media--skills:hover .skills-hover-card,
.capability-media--skills:focus-within .skills-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.skills-hover-cat {
  margin: 0 0 0.35rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.skills-hover-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #09090b;
}

.skills-hover-blurb {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: #71717a;
}

.skills-hover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.skills-hover-cell {
  padding: 0.5rem 0.55rem;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fff;
}

.skills-hover-cell span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.skills-hover-cell p {
  margin: 0;
  font-size: 0.5625rem;
  line-height: 1.4;
  color: #52525b;
}

.skills-hover-foot {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid #f4f4f5;
}

.skills-hover-foot p {
  margin: 0;
  font-size: 0.5625rem;
  line-height: 1.4;
  color: #71717a;
}

@media (prefers-reduced-motion: reduce) {
  .skills-pill,
  .capability-media--studio .studio-input,
  .capability-media--gov .gov-row i::after,
  .capability-media--gov .gov-policy span,
  .capability-media--gov .gov-models {
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .capability-media--skills:not(.is-animated) .skills-pill,
  .capability-media--studio:not(.is-answered) .studio-compare .studio-pane,
  .capability-media--studio:not(.is-animated) .studio-input,
  .capability-media--gov:not(.is-animated) .gov-policy span,
  .capability-media--gov:not(.is-animated) .gov-models {
    opacity: 1;
    transform: none;
  }

  .studio-prompt.is-typing::after,
  .studio-compare .studio-pane p.is-typing::after {
    display: none;
  }
}

/* —— Studio compare chat —— */
.capability-media--studio {
  padding: 1.15rem 1.15rem 1rem;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.studio-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.studio-prompt {
  align-self: flex-end;
  max-width: 88%;
  margin-bottom: 0.15rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: #f4f4f5;
  color: #18181b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: max-width 0.35s ease;
  min-height: 1.7em;
}

.studio-prompt.is-typing::after,
.studio-compare .studio-pane p.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-left: 1px;
  vertical-align: -1px;
  background: #71717a;
  animation: studio-caret 0.8s steps(1) infinite;
}

@keyframes studio-caret {
  50% {
    opacity: 0;
  }
}

.capability-media--studio:not(.is-answered) .studio-compare .studio-pane {
  opacity: 0;
  transform: translateY(6px);
}

.capability-media--studio.is-answered .studio-compare .studio-pane {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-media--studio.is-answered .studio-compare .studio-pane:last-child {
  transition-delay: 0.18s;
}

.capability-media--studio:not(.is-animated) .studio-input {
  opacity: 0;
  transform: translateY(8px);
}

.capability-media--studio.is-animated .studio-input {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease 0.15s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.studio-replies {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
}

.studio-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: 100%;
}

.studio-pane {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #fff;
}

.studio-model {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #52525b;
  letter-spacing: -0.01em;
}

.studio-model img {
  width: 12px;
  height: 12px;
}

.studio-pane p {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.625rem;
  line-height: 1.4;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.studio-source {
  margin-top: auto;
  font-size: 0.5rem;
  font-weight: 500;
  color: #71717a;
  line-height: 1.3;
}

.studio-source--warn {
  color: #b45309;
}

.studio-input {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  margin: 0.35rem auto 0;
  padding: 0.7rem 0.75rem 0.55rem;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.studio-input-placeholder {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem;
  color: #a1a1aa;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.studio-input-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.studio-input-left,
.studio-input-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.studio-input-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #71717a;
}

.studio-input-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: #71717a;
}

.studio-input-auto i {
  display: block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid #a1a1aa;
  margin-top: 1px;
}

.studio-input-send {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #a1a1aa;
}

.studio-input-send.is-ready {
  background: #09090b;
}

/* —— Agents · Create (Agent Builder) —— */
.capability-media--agent-create {
  padding: 1rem 0.9rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  overflow: hidden;
}

.agent-builder {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
}

.capability-media--agent-create.is-animated .agent-builder {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: #f4f4f5;
  border-bottom: 1px solid #ececef;
}

.agent-builder-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.agent-builder-spark {
  flex: 0 0 auto;
}

.agent-builder-title strong {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.agent-builder-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-400);
}

.agent-builder-meta button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  color: var(--zinc-400);
  font-size: 0.875rem;
  line-height: 1;
  cursor: default;
}

.agent-builder-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 7.75rem;
  padding: 0.9rem 0.85rem 0.7rem;
}

.agent-builder-prompt {
  margin: 0;
  max-width: none;
  min-height: 3.4rem;
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--zinc-900);
  white-space: pre-wrap;
}

.agent-builder-prompt.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 0.85em;
  margin-left: 1px;
  background: var(--zinc-900);
  vertical-align: -0.1em;
  animation: agent-caret 0.9s steps(1) infinite;
}

@keyframes agent-caret {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.agent-builder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.agent-builder-left,
.agent-builder-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.capability-media--agent-create .studio-input-send {
  transition: background 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .studio-prompt,
  .studio-compare .studio-pane {
    transition: none;
  }

  .agent-builder,
  .capability-media--agent-create.is-animated .agent-builder {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .agent-builder-prompt.is-typing::after {
    animation: none;
    opacity: 1;
  }

  .capability-media--agent-create .studio-input-send {
    transition: none;
  }
}

/* —— Agents · Configure (workflow steps) —— */
.capability-media--agent-config {
  padding: 0.65rem 0.55rem 0.5rem;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  border: none;
  overflow: hidden;
}

.agent-flow {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  font-family: Inter, system-ui, sans-serif;
}

.agent-flow-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.agent-flow-label {
  margin: 0;
  padding: 0 0.1rem;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--zinc-950);
}

.agent-flow-card {
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.agent-flow-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem;
}

.agent-flow-icon {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.05rem;
  color: var(--zinc-500);
}

.agent-flow-trigger-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.agent-flow-trigger-body strong {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.agent-flow-trigger-body span {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-700);
  letter-spacing: -0.01em;
}

.agent-flow-trigger-body em {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 450;
  color: var(--zinc-400);
}

.agent-flow-trigger-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.1rem;
  color: var(--zinc-400);
  font-size: 0.5625rem;
  font-weight: 500;
}

.agent-flow-rail {
  width: 1px;
  height: 0.55rem;
  margin: 0.15rem auto;
  background: var(--zinc-200);
}

.agent-flow-rail--short {
  height: 0.45rem;
}

.agent-flow-steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.agent-flow-step {
  padding: 0.5rem 0.55rem 0.55rem;
  overflow: hidden;
  position: relative;
}

.agent-flow-step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
  pointer-events: none;
}

.agent-flow-step-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  margin-bottom: 0.35rem;
}

.agent-flow-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.agent-flow-step-head strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-flow-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.agent-flow-step p {
  margin: 0;
  font-size: 0.5625rem;
  line-height: 1.45;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent-flow-step--sky .agent-flow-num {
  background: #e0f2fe;
  color: #0284c7;
}

.agent-flow-step--sky .agent-flow-tag {
  background: #e0f2fe;
  color: #0284c7;
}

.agent-flow-step--amber .agent-flow-num {
  background: #ffedd5;
  color: #ea580c;
}

.agent-flow-step--amber .agent-flow-tag {
  background: #ffedd5;
  color: #ea580c;
}

.agent-flow-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  font-size: 0.625rem;
  font-weight: 550;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
}

.agent-flow-section,
.agent-flow-rail,
.agent-flow-card,
.agent-flow-add {
  opacity: 0;
  transform: translateY(8px);
}

.capability-media--agent-config.is-animated .agent-flow-section,
.capability-media--agent-config.is-animated .agent-flow-rail,
.capability-media--agent-config.is-animated .agent-flow-card,
.capability-media--agent-config.is-animated .agent-flow-add {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-media--agent-config.is-animated .agent-flow-section:nth-child(1) {
  transition-delay: 0.02s;
}

.capability-media--agent-config.is-animated > .agent-flow > .agent-flow-rail {
  transition-delay: 0.1s;
}

.capability-media--agent-config.is-animated .agent-flow-section:nth-child(3) {
  transition-delay: 0.14s;
}

.capability-media--agent-config.is-animated .agent-flow-step--sky {
  transition-delay: 0.18s;
}

.capability-media--agent-config.is-animated
  .agent-flow-steps
  > .agent-flow-rail:nth-child(2) {
  transition-delay: 0.26s;
}

.capability-media--agent-config.is-animated .agent-flow-step--amber {
  transition-delay: 0.3s;
}

.capability-media--agent-config.is-animated
  .agent-flow-steps
  > .agent-flow-rail:nth-child(4) {
  transition-delay: 0.38s;
}

.capability-media--agent-config.is-animated .agent-flow-add {
  transition-delay: 0.42s;
}

@media (prefers-reduced-motion: reduce) {
  .agent-flow-section,
  .agent-flow-rail,
  .agent-flow-card,
  .agent-flow-add,
  .capability-media--agent-config.is-animated .agent-flow-section,
  .capability-media--agent-config.is-animated .agent-flow-rail,
  .capability-media--agent-config.is-animated .agent-flow-card,
  .capability-media--agent-config.is-animated .agent-flow-add {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* —— Agents · Deliver (channels) —— */
.capability-media--agent-deliver {
  padding: 0.35rem 0.85rem 1.5rem;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  border: none;
  overflow: visible;
}

.agent-channels {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-top: 4.35rem;
  font-family: Inter, system-ui, sans-serif;
}

.agent-channels-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.85rem 1rem 0.9rem;
  background: #fff;
  border: 1px solid var(--zinc-200);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px);
}

.capability-media--agent-deliver.is-animated .agent-channels-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-channels-panel h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--zinc-950);
}

.agent-channels-panel p {
  margin: 0;
  max-width: none;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
}

@media (min-width: 801px) {
  .agent-channels-panel p {
    white-space: nowrap;
  }
}

.agent-channels-add {
  position: relative;
  margin-top: 0.15rem;
}

.agent-channels-panel button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--zinc-600);
  letter-spacing: -0.015em;
  cursor: default;
}

.agent-channels-panel button span {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

.agent-channels-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.25rem);
  z-index: 2;
  width: 10.5rem;
  padding: 0.3rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
}

.capability-media--agent-deliver.is-animated .agent-channels-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.35s ease 0.35s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
    visibility 0.35s 0.35s;
}

.agent-channels-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--zinc-800);
  line-height: 1.2;
}

.agent-channels-item img,
.agent-channels-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--zinc-700);
}

.agent-channels-item img {
  object-fit: contain;
  border-radius: 3px;
}

.agent-channels-ico svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .agent-channels-panel,
  .capability-media--agent-deliver.is-animated .agent-channels-panel,
  .agent-channels-menu,
  .capability-media--agent-deliver.is-animated .agent-channels-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}

/* —— Governance & spend —— */
.capability-media--gov {
  padding: 1.25rem 1.15rem;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.gov-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.gov-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.gov-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.capability-media--gov .gov-total,
p.gov-total {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--zinc-950);
}

.gov-models {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  background: #fff;
}

.gov-models img {
  width: 14px;
  height: 14px;
  display: block;
}

.gov-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.gov-policy span {
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #52525b;
  letter-spacing: -0.01em;
}

.gov-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.gov-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.gov-row-top span:last-child {
  font-variant-numeric: tabular-nums;
  color: #09090b;
  font-weight: 600;
}

.gov-row i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: #e4e4e7;
  position: relative;
  overflow: hidden;
}

.gov-row i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  border-radius: inherit;
  background: #09090b;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--row-delay, 0ms);
}

.capability-media--gov.is-animated .gov-row i::after {
  transform: scaleX(1);
}

.gov-row--warn .gov-row-top span:first-child {
  color: #b45309;
}

.gov-row--warn i::after {
  background: #f59e0b;
}

.capability-media--gov:not(.is-animated) .gov-policy span,
.capability-media--gov:not(.is-animated) .gov-models {
  opacity: 0;
  transform: translateY(6px);
}

.capability-media--gov.is-animated .gov-policy span,
.capability-media--gov.is-animated .gov-models {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-media--gov.is-animated .gov-policy span:nth-child(1) {
  transition-delay: 80ms;
}
.capability-media--gov.is-animated .gov-policy span:nth-child(2) {
  transition-delay: 140ms;
}
.capability-media--gov.is-animated .gov-policy span:nth-child(3) {
  transition-delay: 200ms;
}
.capability-media--gov.is-animated .gov-models {
  transition-delay: 60ms;
}

.gov-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(280px, 86%);
  max-height: calc(100% - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.95rem 1rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 22px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.capability-media--gov:hover .gov-panel,
.capability-media--gov:focus-within .gov-panel {
  opacity: 0.28;
  transform: scale(0.98);
}

.capability-media--gov:hover .gov-hover-card,
.capability-media--gov:focus-within .gov-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.capability-card:has(.capability-media--gov:hover),
.capability-card:has(.capability-media--gov:focus-within) {
  z-index: 5;
}

.gov-hover-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b45309;
}

.gov-hover-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #09090b;
}

.gov-hover-blurb {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: #71717a;
}

.gov-hover-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.gov-hover-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #18181b;
}

.gov-hover-item img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.gov-hover-item em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 600;
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .gov-panel,
  .gov-hover-card {
    transition: none;
  }
}

/* —— Enterprise search —— */
.capability-media--search {
  padding: 1rem 0.95rem;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.search-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.search-prompt {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: #f4f4f5;
  color: #18181b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  min-height: 1.7em;
}

.search-prompt.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-left: 1px;
  vertical-align: -1px;
  background: #71717a;
  animation: studio-caret 0.8s steps(1) infinite;
}

.search-reply {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);
}

.capability-media--search.is-animated .search-reply {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-thought {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: -0.01em;
}

.search-thought::after {
  content: " ›";
  font-size: 0.65em;
}

.search-answer {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.search-answer.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-left: 1px;
  vertical-align: -1px;
  background: #71717a;
  animation: studio-caret 0.8s steps(1) infinite;
}

.search-results {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.capability-media--search.is-answered .search-results,
.capability-media--search.is-answered .search-more {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.search-file-ico {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

.search-file-ico--xlsx {
  background: #16a34a;
}

.search-file-ico--pdf {
  background: #dc2626;
}

.search-file-ico--doc {
  background: #2563eb;
}

.search-result-body {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.search-result-body strong {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-body span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5rem;
  font-weight: 450;
  color: #a1a1aa;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-body img {
  width: 10px;
  height: 10px;
  object-fit: contain;
  flex: 0 0 auto;
}

.search-result > em {
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 450;
  color: #a1a1aa;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.search-more {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 550;
  color: #0284c7;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.search-more::after {
  content: "›";
  font-size: 0.85em;
  line-height: 1;
}

.search-cite-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  flex: 0 0 auto;
}

.search-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(270px, 90%);
  max-height: calc(100% - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 22px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.search-hover-card .search-results {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin: 0;
  gap: 0.4rem;
  overflow: auto;
  min-height: 0;
}

.capability-media--search:hover .search-chat,
.capability-media--search:focus-within .search-chat {
  opacity: 0.28;
  transform: scale(0.98);
}

.capability-media--search:hover .search-hover-card,
.capability-media--search:focus-within .search-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.capability-card:has(.capability-media--search:hover),
.capability-card:has(.capability-media--search:focus-within) {
  z-index: 5;
}

.search-hover-eyebrow {
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.search-hover-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #09090b;
}

@media (prefers-reduced-motion: reduce) {
  .capability-media--search .search-reply,
  .capability-media--search .search-results,
  .capability-media--search .search-more,
  .search-chat,
  .search-hover-card {
    transition: none !important;
  }

  .capability-media--search:not(.is-animated) .search-reply {
    opacity: 1;
    transform: none;
  }

  .capability-media--search.is-answered .search-results,
  .capability-media--search.is-answered .search-more {
    opacity: 1 !important;
    transform: none;
  }

  .search-prompt.is-typing::after,
  .search-answer.is-typing::after {
    display: none;
  }
}

/* —— Always on assistant —— */
.capability-media--assistant {
  padding: 1.35rem 1.2rem;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.assistant-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.assistant-prompt {
  align-self: flex-end;
  max-width: 90%;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: #f4f4f5;
  color: #18181b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  min-height: 1.7em;
}

.assistant-prompt.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-left: 1px;
  vertical-align: -1px;
  background: #71717a;
  animation: studio-caret 0.8s steps(1) infinite;
}

.assistant-reply {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(6px);
}

.capability-media--assistant.is-animated .assistant-reply {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.assistant-status {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.assistant-status strong {
  color: #09090b;
  font-weight: 600;
}

.assistant-artifact-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.assistant-artifact-chip img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  opacity: 0.85;
}

.assistant-artifact-chip span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
}

.assistant-artifact-chip em {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.5625rem;
  color: #71717a;
}

.assistant-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(270px, 88%);
  max-height: calc(100% - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 22px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.capability-media--assistant:hover .assistant-chat,
.capability-media--assistant:focus-within .assistant-chat {
  opacity: 0.28;
  transform: scale(0.98);
}

.capability-media--assistant:hover .assistant-hover-card,
.capability-media--assistant:focus-within .assistant-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.capability-card:has(.capability-media--assistant:hover),
.capability-card:has(.capability-media--assistant:focus-within) {
  z-index: 5;
}

/* —— Workspace (Work · Always on assistant) —— */
.capability-media--workspace {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: #f4f4f5;
  border: 1px solid var(--zinc-200);
}

.ws-stage {
  --ws-pad: 0.45rem;
  --ws-gap: 0.75rem;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: var(--ws-pad);
  box-sizing: border-box;
  gap: var(--ws-gap);
}

.ws-chat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-media--workspace.is-workspace-open .ws-chat {
  width: calc((100% - var(--ws-gap)) * 0.42);
}

.ws-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem 0.5rem;
  overflow: auto;
}

.ws-input {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0.55rem 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-400);
}

.ws-input em {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--zinc-950);
  color: #fff;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
}

.ws-prompt {
  align-self: flex-end;
  max-width: 95%;
  padding: 0.4rem 0.7rem;
  border-radius: 12px;
  background: #f4f4f5;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #18181b;
  opacity: 0;
  transform: translateY(6px);
}

.capability-media--workspace.is-animated .ws-prompt {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ws-reply {
  max-width: 96%;
  opacity: 0;
  transform: translateY(6px);
}

.capability-media--workspace.is-animated .ws-reply {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease 0.12s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.ws-reply p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--zinc-700);
}

.ws-cards {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.ws-card {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fafafa;
  text-align: left;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
}

.ws-card:hover {
  border-color: var(--zinc-300);
  background: #f4f4f5;
}

.capability-media--workspace.is-animated .ws-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-media--workspace.is-animated .ws-card:nth-child(1) {
  transition-delay: 0.28s;
}

.capability-media--workspace.is-animated .ws-card:nth-child(2) {
  transition-delay: 0.4s;
}

.ws-card img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  opacity: 0.85;
}

.ws-card span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #09090b;
  line-height: 1.25;
}

.ws-card em {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.ws-panel {
  position: absolute;
  top: var(--ws-pad);
  right: var(--ws-pad);
  bottom: var(--ws-pad);
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: calc((100% - (var(--ws-pad) * 2) - var(--ws-gap)) * 0.58);
  min-width: 0;
  background: #fff;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12%);
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.4s;
}

.capability-media--workspace.is-workspace-open .ws-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.ws-panel-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0.4rem 0.55rem 0.3rem;
}

.ws-panel-bar strong {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-700);
}

.ws-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.45rem 0.35rem;
  border-bottom: 1px solid var(--zinc-100);
  overflow: hidden;
}

.ws-tabs button {
  appearance: none;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.28rem 0.45rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.ws-tabs button:hover {
  color: var(--zinc-800);
  background: #fafafa;
}

.ws-tabs button.is-active {
  font-weight: 600;
  color: var(--zinc-950);
  background: #f4f4f5;
}

.ws-doc {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.4rem;
  padding: 0.55rem 0.6rem 0.6rem;
  border: 1px solid var(--zinc-100);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ws-doc[hidden] {
  display: none;
}

.ws-doc-eyebrow {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.ws-doc h4 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--zinc-950);
  line-height: 1.2;
}

.ws-doc-sub {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.ws-doc-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.ws-doc-kpis div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  background: #f4f4f5;
}

.ws-doc-kpis em {
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.ws-doc-kpis strong {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
  font-variant-numeric: tabular-nums;
}

.ws-doc-chart {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.1rem;
  min-height: 0;
  flex: 1 1 auto;
}

.ws-doc-chart-label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.ws-doc-line {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-height: 3.25rem;
}

.ws-doc-line svg {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 2.75rem;
  overflow: visible;
}

.ws-doc-line-guide {
  fill: none;
  stroke: #f4f4f5;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ws-doc-line-series {
  fill: none;
  stroke: var(--zinc-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
}

.ws-doc-line-series--muted {
  stroke: var(--zinc-300);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
  stroke-dashoffset: 0;
  opacity: 0.9;
}

.capability-media--workspace.is-workspace-open
  .ws-doc-line-series:not(.ws-doc-line-series--muted) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.ws-doc-line-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 0.1rem;
}

.ws-doc-line-axis em {
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .ws-chat,
  .ws-prompt,
  .ws-reply,
  .ws-card,
  .ws-panel,
  .ws-doc-line-series {
    transition: none !important;
  }

  .capability-media--workspace.is-animated .ws-prompt,
  .capability-media--workspace.is-animated .ws-reply,
  .capability-media--workspace.is-animated .ws-card {
    opacity: 1;
    transform: none;
  }

  .capability-media--workspace.is-workspace-open
    .ws-doc-line-series:not(.ws-doc-line-series--muted) {
    stroke-dashoffset: 0;
  }
}

.capability-card:has(.capability-media--workspace.is-workspace-open) {
  z-index: 4;
}

/* —— Integrations (Work · Always on assistant) —— */
.capability-media--integrations {
  padding: 0.75rem 0.85rem 0.85rem;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
  background: #fafafa;
  border: 1px solid var(--zinc-200);
}

.integ-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding-top: 18%;
  box-sizing: border-box;
}

.integ-plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;
  z-index: 2;
}

.integ-flyout {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.capability-media--integrations.is-animated .integ-flyout {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.4s ease 0.15s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.integ-menu,
.integ-submenu {
  min-width: 11.5rem;
  padding: 0.3rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.1);
}

.integ-submenu {
  min-width: 10.5rem;
  max-height: 11.5rem;
  overflow: auto;
}

.integ-menu-item,
.integ-submenu-item,
.integ-submenu-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.4rem 0.45rem;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
  line-height: 1.2;
}

.integ-menu-item svg,
.integ-submenu-foot svg {
  flex: 0 0 auto;
  color: var(--zinc-500);
}

.integ-menu-item span:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.integ-menu-item.is-active {
  background: #f4f4f5;
}

.integ-menu-logos {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.integ-menu-logos img {
  width: 12px;
  height: 12px;
  margin-left: -3px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: #fff;
}

.integ-menu-logos img:first-child {
  margin-left: 0;
}

.integ-chevron {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 4px solid #a1a1aa;
}

.integ-submenu-label {
  margin: 0.2rem 0.45rem 0.35rem !important;
  max-width: none !important;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-400);
  letter-spacing: -0.01em;
}

.integ-submenu-item img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}

.integ-submenu-foot {
  margin-top: 0.2rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--zinc-100);
  color: var(--zinc-700);
}

.integ-input {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  opacity: 0;
  transform: translateY(8px);
}

.capability-media--integrations.is-animated .integ-input {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.integ-input .studio-input-icon.is-active {
  color: var(--zinc-950);
}

.capability-card:has(.capability-media--integrations) {
  overflow: visible;
}

.capability-card:has(.capability-media--integrations.is-animated) {
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .integ-flyout,
  .integ-input {
    transition: none !important;
  }

  .capability-media--integrations:not(.is-animated) .integ-flyout,
  .capability-media--integrations:not(.is-animated) .integ-input {
    opacity: 1;
    transform: none;
  }
}

.assistant-doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f4f4f5;
  font-size: 0.625rem;
  font-weight: 600;
  color: #09090b;
}

.assistant-doc-bar em {
  font-style: normal;
  font-weight: 500;
  color: #009689;
}

.assistant-doc {
  padding: 0.85rem 0.85rem 0.9rem;
  overflow: hidden;
}

.assistant-doc-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.assistant-doc-title {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #09090b;
}

.assistant-doc-sub {
  margin: 0 0 0.75rem;
  font-size: 0.625rem;
  color: #71717a;
}

.assistant-doc-section {
  margin-bottom: 0.55rem;
}

.assistant-doc-section span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.assistant-doc-section p {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.4;
  color: #3f3f46;
}

.assistant-doc-sources {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid #f4f4f5;
  font-size: 0.5rem;
  color: #71717a;
}

@media (prefers-reduced-motion: reduce) {
  .assistant-chat,
  .assistant-hover-card,
  .assistant-reply {
    transition: none !important;
  }

  .capability-media--assistant:not(.is-animated) .assistant-reply {
    opacity: 1;
    transform: none;
  }

  .assistant-prompt.is-typing::after {
    display: none;
  }
}

/* —— Artifacts & output —— */
.capability-media--artifacts {
  padding: 1.15rem 1.1rem;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.artifacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: 100%;
  height: 100%;
  align-content: center;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.artifact-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--tile-delay, 0ms);
}

.capability-media--artifacts.is-animated .artifact-tile {
  opacity: 1;
  transform: none;
}

.artifact-tile img {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

.artifact-tile span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.artifact-tile em {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #71717a;
}

.artifacts-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(260px, 88%);
  max-height: calc(100% - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 22px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.capability-media--artifacts:hover .artifacts-grid,
.capability-media--artifacts:focus-within .artifacts-grid {
  opacity: 0.28;
  transform: scale(0.98);
}

.capability-media--artifacts:hover .artifacts-hover-card,
.capability-media--artifacts:focus-within .artifacts-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.capability-card:has(.capability-media--artifacts:hover),
.capability-card:has(.capability-media--artifacts:focus-within) {
  z-index: 5;
}

.artifacts-share-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #09090b;
}

.artifacts-share-head img {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.artifacts-share-file {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  color: #71717a;
  letter-spacing: -0.01em;
}

.artifacts-share-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.artifacts-share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.artifacts-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
}

.artifacts-share-row strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
}

.artifacts-share-row em {
  display: block;
  font-style: normal;
  font-size: 0.5625rem;
  color: #71717a;
}

.artifacts-share-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fafafa;
  font-size: 0.625rem;
  color: #a1a1aa;
}

.artifacts-share-invite em {
  font-style: normal;
  font-weight: 600;
  color: #fff;
  background: #09090b;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.5625rem;
}

/* Home Artifacts card — one artifact carrying its own share state, so the
   sharing reads at rest instead of hiding behind a hover panel */
/* —— Home Artifacts ——
   One artifact on the left, wired out to the people it reached on the right.
   The spine and stubs are drawn off the row box, so they stay on the people's
   centre lines however the copy wraps. */
.capability-media--artifact-share {
  align-items: center;
  overflow: hidden;
}

.artifact-fan {
  /* No percentages: the token is re-resolved inside the people column, where a
     percentage would measure against a different box and break the joins. */
  --fan-gap: clamp(2rem, 3.5vw, 3.25rem);
  --fan-row: 2.6rem;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--fan-gap);
  align-items: center;
}

.artifact-fan-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
}

.artifact-fan-card img {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.artifact-fan-card span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.artifact-fan-card em {
  font-style: normal;
  font-size: 0.625rem;
  color: #71717a;
}

.artifact-fan-people {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.artifact-fan-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--fan-row);
}

.artifact-fan-person strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
}

.artifact-fan-person em {
  display: block;
  font-style: normal;
  font-size: 0.5625rem;
  color: #71717a;
}

.artifact-fan-person::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: calc(var(--fan-gap) / 2);
  height: 1px;
  background: #d4d4d8;
}

/* Spine between the first and last person, with the lead-in off the artifact */
.artifact-fan-wires {
  position: absolute;
  right: 100%;
  width: calc(var(--fan-gap) / 2);
  top: calc(var(--fan-row) / 2);
  bottom: calc(var(--fan-row) / 2);
  border-left: 1px solid #d4d4d8;
}

.artifact-fan-wires::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--fan-gap) / 2);
  top: 50%;
  width: calc(var(--fan-gap) / 2);
  height: 1px;
  background: #d4d4d8;
}

.capability-media--artifacts:not(.is-animated) .artifact-fan-card,
.capability-media--artifacts:not(.is-animated) .artifact-fan-person {
  opacity: 0;
  transform: translateY(8px);
}

.capability-media--artifacts.is-animated .artifact-fan-card,
.capability-media--artifacts.is-animated .artifact-fan-person {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease var(--fan-delay, 0ms),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--fan-delay, 0ms);
}

.artifact-fan-person:nth-child(1) {
  --fan-delay: 120ms;
}

.artifact-fan-person:nth-child(2) {
  --fan-delay: 200ms;
}

.artifact-fan-person:nth-child(3) {
  --fan-delay: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .capability-media--artifacts:not(.is-animated) .artifact-fan-card,
  .capability-media--artifacts:not(.is-animated) .artifact-fan-person {
    opacity: 1;
    transform: none;
  }
}

.art-create-preview {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  background: #fafafa;
}

.art-create-eyebrow {
  margin: 0 0 0.15rem !important;
  max-width: none !important;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.art-create-preview strong {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #09090b;
}

.art-create-preview > em {
  display: block;
  margin-bottom: 0.35rem;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 500;
  color: #71717a;
}

.art-create-preview > p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.625rem;
  line-height: 1.45;
  color: #52525b;
}

/* Work · Artifacts · Create types */
.capability-media--art-create {
  padding: 0.85rem 0.8rem;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid var(--zinc-200);
}

.art-create-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  align-content: center;
}

.art-create-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.65rem 0.4rem 0;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: default;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.art-create-card span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
  transition: color 0.2s ease;
}

.art-create-card img {
  width: 72px;
  height: 72px;
  display: block;
  transform: translateY(4px);
  transition: transform 0.2s ease;
}

.art-create-card:hover,
.art-create-card.is-active {
  border-color: var(--zinc-800);
  box-shadow: 0 0 0 1px rgba(39, 39, 42, 0.08);
}

.art-create-card:hover span,
.art-create-card.is-active span {
  color: var(--zinc-950);
}

.art-create-card:hover img,
.art-create-card.is-active img {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .artifact-tile,
  .artifacts-grid,
  .artifacts-hover-card {
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .capability-media--artifacts:not(.is-animated) .artifact-tile {
    opacity: 1;
    transform: none;
  }
}

/* —— Work · Artifacts subsections —— */
.capability-media--art-template,
.capability-media--art-sourced,
.capability-media--art-share,
.capability-media--art-dash {
  background: #fafafa;
}

.art-toolbar {
  justify-content: space-between;
  background: #fff;
}

.art-toolbar-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--zinc-900);
  letter-spacing: -0.01em;
}

.art-toolbar-file img {
  flex: 0 0 auto;
  opacity: 0.75;
}

.art-toolbar-file span,
.art-toolbar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.art-toolbar-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--zinc-900);
  letter-spacing: -0.01em;
}

.art-badge {
  flex: 0 0 auto;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #09090b;
  color: #fafafa;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.art-badge--muted {
  background: var(--zinc-100);
  color: var(--zinc-600);
}

.simon-app--art-sourced .art-sourced-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.85rem 0.9rem 1rem;
  overflow: hidden;
}

.simon-app--art-template {
  background: #fafafa;
}

.simon-app-docs.art-template-map {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0.65rem 0 0.65rem 0.55rem;
  gap: 0.75rem;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: stretch;
}

.art-template-styles {
  z-index: 3;
  justify-content: center;
  width: max-content;
  max-width: 8.25rem;
  padding-left: 0.1rem;
}

.art-template-styles h4 {
  margin: 0 0 0.4rem;
  padding: 0 0.1rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.art-template-styles .simon-app-docs-nodes {
  gap: 0.3rem;
  justify-content: center;
  flex: 0 1 auto;
}

.art-template-styles .art-style-token.simon-app-docs-node {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  cursor: default;
}

.art-template-styles .art-style-token .art-style-key {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--zinc-400);
  line-height: 1;
}

.art-template-styles .art-style-token strong {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--zinc-950);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.art-swatch {
  display: block;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  line-height: 0;
  translate: 0 0;
}

.art-swatch--sky {
  background: #0ea5e9;
}

.art-swatch--zinc {
  background: #52525b;
}

.art-template-doc-col {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.simon-app--art-template .art-template-map > .simon-app-docs-links {
  z-index: 2;
}

.art-template-doc-stage {
  width: 100%;
  height: 100%;
  padding: 0.35rem 0 0;
  justify-content: stretch;
  align-items: stretch;
  background: transparent;
}

.art-template-doc-stage .simon-doc,
.simon-app--art-template.is-rows-in .art-template-doc-stage .simon-doc,
.simon-app--art-template:not(.is-rows-in) .art-template-doc-stage .simon-doc {
  opacity: 1;
  transform: none;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.85rem 1rem 1.5rem;
  border-radius: 2px 2px 0 0;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.08);
}

.art-template-doc-stage .simon-doc-title {
  color: #0ea5e9;
  white-space: normal;
  font-size: 0.95rem;
}

.art-template-doc-stage .simon-app-docs-node {
  display: block;
  opacity: 1;
  transform: none;
  border: none;
  background: transparent;
  padding: 0;
  gap: 0;
  border-radius: 4px;
  outline: none;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease;
}

.art-template-doc-stage .simon-doc-head.simon-app-docs-node {
  display: flex;
}

.art-template-doc-stage table.simon-app-docs-node {
  display: table;
  width: 100%;
}

.simon-app--art-template.is-docs-hover
  .art-template-doc-stage
  .simon-app-docs-node.is-focus {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.04);
}

.simon-app--art-template.is-docs-hover .art-style-token.is-focus {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.2);
}

.simon-app--art-template.is-docs-hover .art-style-token.is-dimmed,
.simon-app--art-template.is-docs-hover
  .art-template-doc-stage
  .simon-app-docs-node.is-dimmed {
  opacity: 0.35;
}

.art-sourced-line {
  margin: 0 0 0.65rem !important;
  max-width: none !important;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--zinc-700);
  letter-spacing: -0.01em;
}

.art-cite {
  appearance: none;
  border: 0;
  padding: 0 0.05rem;
  margin: 0;
  background: transparent;
  color: var(--zinc-950);
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(9, 9, 11, 0.22);
  text-underline-offset: 0.18em;
  cursor: default;
  white-space: nowrap;
}

.art-cite.is-active {
  background: #f4f4f5;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #f4f4f5;
  text-decoration-color: rgba(9, 9, 11, 0.4);
}

.art-cite-n {
  display: inline-grid;
  place-items: center;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.15rem;
  border-radius: 999px;
  background: var(--zinc-200);
  color: var(--zinc-700);
  font-size: 0.5rem;
  font-weight: 700;
  vertical-align: 0.05em;
}

.art-cite.is-active .art-cite-n {
  background: var(--zinc-900);
  color: #fff;
}

.art-source-card {
  margin-top: 0.35rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.06);
}

.art-source-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.art-source-card-top span {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.art-source-card-top em {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--zinc-600);
}

.art-source-card strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.art-source-card p {
  margin: 0.2rem 0 0 !important;
  max-width: none !important;
  font-size: 0.5625rem;
  color: var(--zinc-500);
}

.simon-app--art-share {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  background: #fafafa;
}

.art-share-panel {
  width: min(100%, 260px);
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--zinc-200);
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.08);
}

.art-share-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--zinc-950);
}

.art-share-head img {
  opacity: 0.8;
}

.art-share-file {
  margin: 0 0 0.75rem !important;
  max-width: none !important;
  font-size: 0.6875rem;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
}

.art-share-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.art-share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.art-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
}

.art-avatar--2 {
  color: #0f766e;
  background: #ccfbf1;
}

.art-avatar--3 {
  color: #9a3412;
  background: #ffedd5;
}

.art-share-row strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--zinc-950);
  letter-spacing: -0.01em;
}

.art-share-row em {
  display: block;
  font-style: normal;
  font-size: 0.5625rem;
  color: var(--zinc-500);
}

.art-share-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fafafa;
  font-size: 0.625rem;
  color: var(--zinc-400);
}

.art-share-invite em {
  font-style: normal;
  font-weight: 600;
  color: #fff;
  background: #09090b;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.5625rem;
}

.simon-app.simon-app--art-dash {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--zinc-200);
  overflow: hidden;
}

.art-dash-nav {
  flex: 0 0 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.7rem 0.45rem 0.65rem;
  border-right: 1px solid var(--zinc-100);
  background: #fafafa;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

.art-dash-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.25rem;
}

.art-dash-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  background: #09090b;
}

.art-dash-brand strong {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.art-dash-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.art-dash-link {
  padding: 0.35rem 0.4rem;
  border-radius: 6px;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.art-dash-link.is-active {
  background: #fff;
  color: var(--zinc-950);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--zinc-200);
}

.art-dash-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem 0.65rem 0.65rem;
  overflow: hidden;
}

.art-dash-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.art-dash-top em {
  display: block;
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--zinc-400);
  letter-spacing: -0.01em;
}

.art-dash-top strong {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.art-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #166534;
}

.art-live-badge i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  animation: art-live-pulse 1.6s ease-out infinite;
}

@keyframes art-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.art-dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.art-dash-kpi {
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fafafa;
}

.art-dash-kpi em {
  display: block;
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--zinc-400);
}

.art-dash-kpi strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.art-dash-kpi > span {
  display: inline-block;
  margin-top: 0.1rem;
  font-size: 0.5rem;
  font-weight: 600;
}

.art-dash-kpi > span.is-up,
.art-dash-movers strong.is-up {
  color: #15803d;
}

.art-dash-kpi > span.is-flat {
  color: var(--zinc-400);
}

.art-dash-movers strong.is-down {
  color: #b91c1c;
}

.art-dash-panels {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.35rem;
  min-height: 0;
}

.art-dash-panel {
  min-width: 0;
  padding: 0.4rem 0.45rem 0.45rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
}

.art-dash-panel--wide {
  flex: 0 0 auto;
}

.art-dash-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.art-dash-panel-head span {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
}

.art-dash-panel-head em {
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--zinc-400);
}

.art-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.28rem;
  height: 3.1rem;
  padding-top: 0.15rem;
}

.art-dash-bars i {
  flex: 1 1 0;
  height: var(--h, 50%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: bottom;
}

.simon-app--art-dash.is-rows-in .art-dash-bars i {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.simon-app--art-dash.is-rows-in:not(.is-settled) .art-dash-bars i:nth-child(1) {
  transition-delay: 0.15s;
}
.simon-app--art-dash.is-rows-in:not(.is-settled) .art-dash-bars i:nth-child(2) {
  transition-delay: 0.2s;
}
.simon-app--art-dash.is-rows-in:not(.is-settled) .art-dash-bars i:nth-child(3) {
  transition-delay: 0.25s;
}
.simon-app--art-dash.is-rows-in:not(.is-settled) .art-dash-bars i:nth-child(4) {
  transition-delay: 0.3s;
}
.simon-app--art-dash.is-rows-in:not(.is-settled) .art-dash-bars i:nth-child(5) {
  transition-delay: 0.35s;
}
.simon-app--art-dash.is-rows-in:not(.is-settled) .art-dash-bars i:nth-child(6) {
  transition-delay: 0.4s;
}

.art-dash-movers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.art-dash-movers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.5625rem;
}

.art-dash-movers span {
  color: var(--zinc-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.art-dash-movers strong {
  flex: 0 0 auto;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.art-dash-spark {
  display: block;
  width: 100%;
  height: 2.6rem;
  overflow: visible;
}

.art-dash-spark-fill {
  fill: rgba(14, 165, 233, 0.12);
}

.art-dash-spark-line {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}

.simon-app--art-dash.is-rows-in .art-dash-spark-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .art-live-badge i {
    animation: none;
  }

  .simon-app--art-dash .art-dash-bars i,
  .simon-app--art-dash .art-dash-spark-line {
    transition: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* —— Agents & workflows —— */
.capability-media--agents {
  padding: 1.25rem 1.15rem;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.agents-run {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  height: auto;
  align-self: center;
  margin: 0;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--zinc-200);
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.agents-run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.agents-run-title {
  margin: 0 0 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #09090b;
}

.agents-run-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #71717a;
}

.agents-status-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.agents-spinner {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid #d4d4d8;
  border-top-color: #52525b;
  animation: agents-spin 0.7s linear infinite;
}

.agents-check {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.capability-media--agents.is-complete .agents-spinner {
  display: none;
  animation: none;
}

.capability-media--agents.is-complete .agents-check {
  opacity: 1;
  border-color: #16a34a;
  background: #16a34a;
}

.capability-media--agents.is-complete .agents-check::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 1.5px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.capability-media--agents.is-complete .agents-run-status {
  color: #16a34a;
}

@keyframes agents-spin {
  to {
    transform: rotate(360deg);
  }
}

.agents-progress {
  height: 6px;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.agents-progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #09090b;
  transition:
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease;
}

.capability-media--agents.is-complete .agents-progress i {
  background: #16a34a;
}

.agents-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.agents-steps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  color: #a1a1aa;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.agents-steps li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1.5px solid #d4d4d8;
  background: #fff;
  flex: 0 0 auto;
  box-sizing: border-box;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.agents-steps li.is-done {
  color: #52525b;
}

.agents-steps li.is-done::before {
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%2316a34a'/%3E%3Cpath d='M4 7.2l2 2 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.agents-steps li.is-active {
  color: #3f3f46;
}

.agents-hover-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(270px, 88%);
  max-height: calc(100% - 1rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 22px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    visibility 0.3s;
}

.capability-media--agents:has(.agents-hover-card):hover .agents-run,
.capability-media--agents:has(.agents-hover-card):focus-within .agents-run {
  opacity: 0.28;
  transform: scale(0.98);
}

.capability-media--agents:has(.agents-hover-card):hover .agents-hover-card,
.capability-media--agents:has(.agents-hover-card):focus-within
  .agents-hover-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.capability-card:has(.capability-media--agents:has(.agents-hover-card):hover),
.capability-card:has(
  .capability-media--agents:has(.agents-hover-card):focus-within
) {
  z-index: 5;
}

.agents-doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f4f4f5;
  font-size: 0.625rem;
  font-weight: 600;
  color: #09090b;
}

.agents-doc-bar em {
  font-style: normal;
  font-weight: 500;
  color: #16a34a;
}

.agents-doc {
  padding: 0.85rem 0.9rem 0.95rem;
}

.agents-doc-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.agents-doc-title {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #09090b;
}

.agents-doc-sub {
  margin: 0 0 0.75rem;
  font-size: 0.625rem;
  color: #71717a;
}

.agents-doc-files {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.agents-doc-file {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #18181b;
}

.agents-doc-file img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.agents-doc-sources {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5rem;
  color: #71717a;
}

@media (prefers-reduced-motion: reduce) {
  .agents-run,
  .agents-hover-card,
  .agents-progress i,
  .agents-check,
  .agents-steps li,
  .agents-steps li::before {
    transition: none !important;
  }

  .agents-spinner {
    animation: none;
    border-top-color: #d4d4d8;
  }
}

/* —— Capability placeholder (product pages) —— */
.capability-media--placeholder {
  padding: 0;
  background: #e4e4e7;
  border: none;
}

/*
 * Simon app UI recreations (Foundation / Work product pages)
 * Pattern: .capability-media--app fills the media frame; .simon-app is the
 * product chrome (toolbar + overflowing content). Content should clip at the
 * bottom so the mock feels dense — not a tiny inset screenshot.
 */
.capability-media--app {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: transparent;
  border: none;
  overflow: hidden;
}

.simon-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: transparent;
  font-family: Inter, system-ui, sans-serif;
  color: var(--zinc-950);
}

.simon-app.simon-app--art-dash {
  flex-direction: row;
}

.simon-app-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--zinc-100);
}

.simon-app-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.simon-app-tabs::-webkit-scrollbar {
  display: none;
}

.simon-app-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-500);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.simon-app-tab:hover {
  color: var(--zinc-800);
  background: var(--zinc-50);
}

.simon-app-tab.is-active {
  font-weight: 600;
  color: var(--zinc-950);
  background: var(--zinc-100);
}

.simon-app-tab em {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.18rem 0.35rem;
  border-radius: 999px;
  color: var(--zinc-600);
  background: #fff;
  border: 1px solid var(--zinc-200);
}

.simon-app-tab.is-active em {
  background: #fff;
  border-color: var(--zinc-200);
}

.simon-app-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.simon-app-table tbody tr,
.simon-app-rel-card,
.simon-app-overview-row,
.simon-app-stagger {
  opacity: 0;
  transform: translateY(8px);
}

.simon-app.is-rows-in .simon-app-table:not([hidden]) tbody tr,
.simon-app.is-rows-in [data-panel]:not([hidden]) .simon-app-rel-card,
.simon-app.is-rows-in [data-panel]:not([hidden]) .simon-app-overview-row,
.simon-app.is-rows-in .simon-app-stagger {
  opacity: 1;
  transform: none;
}

.simon-app.is-rows-in:not(.is-settled) .simon-app-table:not([hidden]) tbody tr,
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card,
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row,
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger {
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(1),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(1),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row:nth-child(1),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(1) {
  transition-delay: 0.02s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(2),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(2),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row:nth-child(2),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(2) {
  transition-delay: 0.08s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(3),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(3),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row:nth-child(3),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(3) {
  transition-delay: 0.14s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(4),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(4),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row:nth-child(4),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(4) {
  transition-delay: 0.2s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(5),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(5),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row:nth-child(5),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(5) {
  transition-delay: 0.26s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(6),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(6),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-overview-row:nth-child(6),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(6) {
  transition-delay: 0.32s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(7),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(7),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(7) {
  transition-delay: 0.38s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(8),
.simon-app.is-rows-in:not(.is-settled)
  [data-panel]:not([hidden])
  .simon-app-rel-card:nth-child(8),
.simon-app.is-rows-in:not(.is-settled) .simon-app-stagger:nth-child(8) {
  transition-delay: 0.44s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(9) {
  transition-delay: 0.5s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(10) {
  transition-delay: 0.56s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(11) {
  transition-delay: 0.62s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-table:not([hidden])
  tbody
  tr:nth-child(12) {
  transition-delay: 0.68s;
}

@media (prefers-reduced-motion: reduce) {
  .simon-app-table tbody tr,
  .simon-app-rel-card,
  .simon-app-overview-row,
  .simon-app-stagger {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

.simon-app-table th,
.simon-app-table td {
  padding: 0.55rem 0.55rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--zinc-100);
  font-size: 0.625rem;
  line-height: 1.35;
  color: var(--zinc-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-table th {
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
  background: transparent;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.simon-app-table th:first-child,
.simon-app-table td:first-child {
  width: 30%;
  padding-left: 0.75rem;
}

.simon-app-table th:nth-child(2),
.simon-app-table td:nth-child(2) {
  width: 36%;
}

.simon-app-table th:nth-child(3),
.simon-app-table td:nth-child(3) {
  width: 12%;
}

.simon-app-table th:nth-child(4),
.simon-app-table td:nth-child(4) {
  width: 16%;
}

.simon-app-table[hidden],
.simon-app-empty[hidden],
.simon-app-body[hidden] {
  display: none;
}

.simon-app-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 8rem;
  padding: 1.5rem;
  color: var(--zinc-400);
  font-size: 0.75rem;
  font-weight: 500;
}

.simon-app-empty p {
  margin: 0;
}

.simon-app-actions {
  width: 28px;
  padding-left: 0.15rem !important;
  padding-right: 0.55rem !important;
}

.simon-app-actions span {
  display: block;
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--zinc-400);
  text-align: right;
}

.simon-app-entity {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.simon-app-entity-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background-position: center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.simon-app-entity-icon--fund {
  background-color: rgba(59, 130, 246, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-4h6v4'/%3E%3Cpath d='M9 10h.01M15 10h.01M9 14h.01M15 14h.01'/%3E%3C/svg%3E");
}

.simon-app-entity-icon--asset {
  background-color: rgba(34, 197, 94, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V9l6-4 6 4v12'/%3E%3Cpath d='M10 21v-5h4v5'/%3E%3C/svg%3E");
}

.simon-app-entity-icon--person {
  background-color: rgba(99, 102, 241, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 12 0v1'/%3E%3C/svg%3E");
}

.simon-app-entity-icon--org {
  background-color: rgba(168, 85, 247, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V5h4v16'/%3E%3Cpath d='M14 21V9h4v12'/%3E%3Cpath d='M10 9h.01M10 13h.01M10 17h.01M18 13h.01M18 17h.01'/%3E%3C/svg%3E");
}

.simon-app-entity-icon--term {
  background-color: rgba(245, 158, 11, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

.simon-app-entity strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--zinc-950);
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-entity small {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--zinc-400);
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-status {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
}

.simon-app-status--surfaced {
  color: #92400e;
  background: #fef3c7;
}

.simon-app-status--review {
  color: #1e3a8a;
  background: #dbeafe;
}

/* Studio · Conflict detection */
.simon-app--conflicts {
  min-height: 0;
}

.simon-app--conflicts .simon-app-toolbar {
  padding: 0.55rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--zinc-100);
}

.simon-app-conflicts-table th:first-child,
.simon-app-conflicts-table td:first-child {
  width: 12%;
  padding-left: 0.75rem;
}

.simon-app-conflicts-table th:nth-child(2),
.simon-app-conflicts-table td:nth-child(2) {
  width: 46%;
}

.simon-app-conflicts-table th:nth-child(3),
.simon-app-conflicts-table td:nth-child(3) {
  width: 22%;
}

.simon-app-conflicts-table th:nth-child(4),
.simon-app-conflicts-table td:nth-child(4) {
  width: 20%;
  padding-right: 0.75rem;
}

.simon-app-conflicts-table td:first-child strong,
.simon-app-conflicts-table td:nth-child(2) strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--zinc-950);
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-conflicts-table td:nth-child(3) {
  color: var(--zinc-600);
  font-weight: 500;
}

/* Governance & spend */
.simon-app--policy,
.simon-app--spend,
.simon-app--controls,
.simon-app--shadow {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem 0.75rem;
}

.simon-app-gov-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.simon-app-gov-eyebrow {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-gov-head strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--zinc-950);
  line-height: 1.2;
}

.simon-app-spend-total {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em !important;
}

.simon-app-spend-models {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding-top: 0.15rem;
}

.simon-app-spend-models img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.simon-app-policy-list,
.simon-app-spend-rows,
.simon-app-controls-list,
.simon-app-shadow-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.simon-app-policy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
}

.simon-app-policy-work {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.simon-app-policy-work span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-900);
}

.simon-app-policy-work small {
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.simon-app-policy-model {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem 0.3rem 0.4rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--zinc-800);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.simon-app-policy-model img {
  width: 14px;
  height: 14px;
}

.simon-app-policy-model.is-open {
  color: var(--zinc-600);
  background: var(--zinc-100);
}

.simon-app-spend-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.15rem 0;
}

.simon-app-spend-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-700);
}

.simon-app-spend-row-top span:last-child {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--zinc-900);
}

.simon-app-spend-row i {
  display: block;
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--zinc-100);
  overflow: hidden;
}

.simon-app-spend-row i::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--zinc-700);
}

.simon-app.is-rows-in .simon-app-spend-row i::after {
  width: var(--w, 50%);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.simon-app.is-rows-in .simon-app-spend-row:nth-child(2) i::after {
  transition-delay: 0.35s;
}

.simon-app.is-rows-in .simon-app-spend-row:nth-child(3) i::after {
  transition-delay: 0.45s;
}

.simon-app.is-rows-in .simon-app-spend-row:nth-child(4) i::after {
  transition-delay: 0.55s;
}

.simon-app.is-settled .simon-app-spend-row i::after {
  transition: none;
}

.simon-app-controls-row,
.simon-app-shadow-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
}

.simon-app-controls-meta,
.simon-app-shadow-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.simon-app-controls-meta strong,
.simon-app-shadow-meta strong {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-controls-meta small,
.simon-app-shadow-meta small {
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-controls-row .simon-app-status,
.simon-app-shadow-row .simon-app-shadow-action {
  flex: 0 0 auto;
}

.simon-app-status--denied {
  color: #991b1b;
  background: #fee2e2;
}

.simon-app-shadow-row > img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.simon-app-shadow-action {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}

.simon-app-shadow-foot {
  margin: 0.1rem 0 0 !important;
  max-width: none !important;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-500);
  line-height: 1.35;
}

/* Work · Enterprise search */
.simon-app--search-answer,
.simon-app--confidence,
.simon-app--cross,
.simon-app--search-perms {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
}

.simon-app-search-q {
  align-self: flex-end;
  max-width: 92%;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #18181b;
}

.simon-app-search-a {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem 0.15rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.simon-app-search-a p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--zinc-800);
}

.simon-app-search-a strong {
  font-weight: 700;
  color: #09090b;
}

.simon-app-search-sources {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.simon-app-search-sources-label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-search-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.simon-app-search-source-chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.5rem 0.28rem 0.35rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-700);
  letter-spacing: -0.01em;
}

.simon-app-search-source-chips img {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.simon-app-conf-answer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
}

.simon-app-conf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.simon-app-conf-meter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--zinc-800);
}

.simon-app-conf-meter i {
  display: block;
  position: relative;
  width: 2.75rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.15);
  overflow: hidden;
}

.simon-app-conf-meter i::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #16a34a;
}

.simon-app.is-rows-in .simon-app-conf-meter i::after {
  width: var(--conf, 50%);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.simon-app.is-settled .simon-app-conf-meter i::after {
  transition: none;
}

.simon-app-conf-answer p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--zinc-800);
}

.simon-app-conf-answer strong {
  font-weight: 700;
  color: #09090b;
}

.simon-app-conf-states {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.simon-app-conf-state {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
}

.simon-app-conf-state.is-active {
  border-color: var(--zinc-200);
  background: #fff;
}

.simon-app-conf-state span {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-600);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app--cross {
  justify-content: stretch;
  padding: 0;
  gap: 0;
}

.simon-app-cross-map {
  flex: 1 1 auto;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin-inline: auto;
  grid-template-columns: auto auto;
  gap: 2.5rem;
  padding: 0.7rem 1rem 0.65rem;
}

.simon-app-cross-query {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  max-width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 0.55rem !important;
  border: none !important;
  border-radius: 999px !important;
  background: #f4f4f5 !important;
  box-shadow: none !important;
}

.simon-app-cross-query img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  border-radius: 0;
}

.simon-app-cross-query span {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #09090b;
  white-space: nowrap;
}

.simon-app-cross-map .simon-app-docs-col--entities .simon-app-docs-nodes {
  align-items: flex-start;
  justify-content: space-evenly;
}

.simon-app-cross-map .simon-app-docs-col--entities .simon-app-docs-node img {
  border-radius: 3px;
}

.simon-app--search-perms {
  gap: 0.55rem;
}

.simon-app-search-perms-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.simon-app-search-perms-head strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
  line-height: 1.2;
}

.simon-app-search-perms-head small {
  display: block;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.simon-app-search-perms-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

.simon-app-search-perm-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
}

.simon-app-search-perm-row > div {
  flex: 1 1 auto;
  min-width: 0;
}

.simon-app-search-perm-row strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-search-perm-row small {
  display: block;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.simon-app-search-perm-row.is-denied {
  opacity: 0.72;
  background: #fafafa;
}

.simon-app-search-perm-row.is-denied strong {
  color: var(--zinc-500);
}

.simon-app-search-perm-row .simon-app-status {
  flex: 0 0 auto;
}

/* Work · Always on assistant */
.simon-app--assist-graph {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.simon-app-assist-graph-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.35rem;
  width: 100%;
  padding: 0.85rem 0.75rem 0.9rem;
  box-sizing: border-box;
}

.simon-app-assist-graph-map .simon-app-docs-links {
  z-index: 0;
}

.simon-app-assist-prompt,
.simon-app-assist-graph-targets {
  position: relative;
  z-index: 1;
}

.simon-app-docs-node.simon-app-assist-prompt {
  display: block;
  width: auto;
  max-width: min(92%, 20rem);
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: #f4f4f5;
  box-shadow: none;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #18181b;
  white-space: normal;
}

.simon-app-assist-graph-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: 100%;
}

.simon-app-docs-node.simon-app-assist-target {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  max-width: 100%;
  padding: 0.4rem 0.65rem 0.4rem 0.45rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

.simon-app-assist-target .simon-app-dot {
  width: 8px;
  height: 8px;
}

.simon-app-assist-target span {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
  white-space: nowrap;
}

.simon-app.is-docs-hover .simon-app-assist-prompt.is-focus {
  background: #ebebed;
}

.simon-app.is-docs-hover .simon-app-assist-target.is-focus {
  border-color: var(--zinc-300);
  background: #fafafa;
}

.simon-app--assist-skill,
.simon-app--assist-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
}

.simon-app-assist-reply {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-self: stretch;
  max-width: 96%;
}

.simon-app-assist-reply > p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--zinc-800);
}

.simon-app-assist-skill-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-600);
  letter-spacing: -0.01em;
}

.simon-app-assist-skill-status .simon-app-skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem 0.35rem 0.45rem;
  border-radius: 999px;
  background: #f4f4f5;
}

.simon-app-assist-skill-status .simon-app-skill-pill img {
  width: 12px;
  height: 12px;
  opacity: 0.9;
}

.simon-app-assist-skill-status .simon-app-skill-pill span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #09090b;
  letter-spacing: -0.01em;
}

.simon-app-assist-skill-checks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.simon-app-assist-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-700);
  letter-spacing: -0.01em;
}

.simon-app-assist-check.is-done::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  color: #166534;
  background: #dcfce7;
}

.simon-app--assist-chat {
  justify-content: space-between;
  gap: 0.75rem;
}

.simon-app-assist-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}

.simon-app-assist-context {
  margin: 0 0 0.35rem !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  color: var(--zinc-500) !important;
  letter-spacing: -0.01em;
  line-height: 1.35 !important;
}

.simon-app-assist-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-400);
}

.simon-app-assist-input em {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--zinc-950);
  color: #fff;
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

/* Entity detail (Relationships mock) */
.simon-app--entity .simon-app-toolbar {
  border-bottom: 1px solid var(--zinc-100);
}

.simon-app-entity-head {
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem 0.35rem;
}

.simon-app-entity-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.simon-app-entity-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.simon-app-entity-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.simon-app-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.simon-app-avatar--fund {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.simon-app-avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0;
  color: #1d4ed8;
  background: #dbeafe;
}

.simon-app-entity-title strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--zinc-950);
  line-height: 1.2;
}

.simon-app-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.simon-app-dot--fund {
  background: #3b82f6;
}

.simon-app-dot--asset {
  background: #22c55e;
}

.simon-app-dot--term {
  background: #f59e0b;
}

.simon-app-dot--deal {
  background: #a855f7;
}

.simon-app-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.simon-app-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem 0.45rem;
}

.simon-app-panel-head h4 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.simon-app-add {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--zinc-200);
  color: var(--zinc-500);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
}

.simon-app-rel-list,
.simon-app-ref-list,
.simon-app-overview {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.75rem 0.65rem;
}

.simon-app-rel-card {
  position: relative;
  flex: 0 0 auto;
  padding: 0.65rem 0.7rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 4px;
  background: #fff;
}

.simon-app-rel-card p {
  margin: 0;
  max-width: none;
  line-height: 1.25;
}

.simon-app-rel-card .simon-app-rel-from {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.simon-app-rel-card .simon-app-rel-edge {
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-400);
  line-height: 1.2;
}

.simon-app-rel-card .simon-app-rel-to {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  color: var(--zinc-950);
}

.simon-app-rel-card .simon-app-rel-to > span:first-child {
  color: var(--zinc-400);
  font-size: 0.625rem;
}

.simon-app-rel-card .simon-app-rel-to strong {
  font-weight: 650;
  letter-spacing: -0.015em;
}

.simon-app-rel-card .simon-app-rel-meta {
  margin-top: 0.3rem;
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--zinc-400);
}

.simon-app-ref-card .simon-app-rel-to {
  margin-bottom: 0.2rem;
}

.simon-app-overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
  font-size: 0.6875rem;
}

.simon-app-overview-row span {
  color: var(--zinc-500);
  font-weight: 500;
}

.simon-app-overview-row strong {
  color: var(--zinc-950);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Documents ↔ entities link map */
.simon-app--docs {
  padding: 0;
}

.simon-app-docs {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.75rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.7rem 0.75rem 0.65rem;
  box-sizing: border-box;
}

.simon-app-docs.art-template-map {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.65rem 0 0.65rem 0.55rem;
}

.simon-app-docs-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.simon-app-docs-col h4 {
  flex: 0 0 auto;
  margin: 0 0 0.45rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-docs-nodes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.3rem;
}

.simon-app-docs-col--entities .simon-app-docs-nodes {
  justify-content: space-evenly;
}

.simon-app-docs-node {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  transform: translateY(8px);
  cursor: default;
}

.simon-app.is-rows-in .simon-app-docs-node {
  opacity: 1;
  transform: none;
}

.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-node {
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col:first-child
  .simon-app-docs-node:nth-child(1) {
  transition-delay: 0.04s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col:first-child
  .simon-app-docs-node:nth-child(2) {
  transition-delay: 0.1s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col:first-child
  .simon-app-docs-node:nth-child(3) {
  transition-delay: 0.16s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col:first-child
  .simon-app-docs-node:nth-child(4) {
  transition-delay: 0.22s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col:first-child
  .simon-app-docs-node:nth-child(5) {
  transition-delay: 0.28s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col:first-child
  .simon-app-docs-node:nth-child(6) {
  transition-delay: 0.34s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col--entities
  .simon-app-docs-node:nth-child(1) {
  transition-delay: 0.12s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col--entities
  .simon-app-docs-node:nth-child(2) {
  transition-delay: 0.2s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col--entities
  .simon-app-docs-node:nth-child(3) {
  transition-delay: 0.28s;
}
.simon-app.is-rows-in:not(.is-settled)
  .simon-app-docs-col--entities
  .simon-app-docs-node:nth-child(4) {
  transition-delay: 0.36s;
}

.simon-app-docs-node img {
  flex: 0 0 auto;
  opacity: 0.55;
}

.simon-app-docs-node > div {
  min-width: 0;
}

.simon-app-docs-node strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-docs-node small {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--zinc-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-docs-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.simon-app-docs-links path {
  fill: none;
  stroke: var(--zinc-300);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0;
}

.simon-app.is-rows-in .simon-app-docs-links path {
  opacity: 1;
}

.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path {
  transition: opacity 0.35s ease;
}

.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(1) {
  transition-delay: 0.42s;
}
.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(2) {
  transition-delay: 0.48s;
}
.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(3) {
  transition-delay: 0.54s;
}
.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(4) {
  transition-delay: 0.6s;
}
.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(5) {
  transition-delay: 0.66s;
}
.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(6) {
  transition-delay: 0.72s;
}
.simon-app.is-rows-in:not(.is-settled) .simon-app-docs-links path:nth-child(7) {
  transition-delay: 0.78s;
}

.simon-app.is-docs-hover .simon-app-docs-node,
.simon-app.is-docs-hover .simon-app-docs-links path {
  transition: none !important;
  transition-delay: 0s !important;
}

.simon-app.is-docs-hover .simon-app-docs-node.is-dimmed {
  opacity: 0.18;
  filter: blur(1px);
}

.simon-app.is-docs-hover .simon-app-docs-node.is-focus {
  opacity: 1;
  filter: none;
  border-color: var(--zinc-300);
}

.simon-app.is-docs-hover .simon-app-docs-links path.is-dimmed {
  opacity: 0.08;
}

.simon-app.is-docs-hover .simon-app-docs-links path.is-focus {
  opacity: 1;
  stroke: var(--zinc-400);
}

@media (prefers-reduced-motion: reduce) {
  .simon-app-docs-node,
  .simon-app-docs-links path {
    opacity: 1;
    transform: none;
    transition: none !important;
    filter: none !important;
  }

  .simon-app.is-docs-hover .simon-app-docs-node.is-dimmed {
    opacity: 0.35;
    filter: none;
  }
}

/* Permissions map */
.simon-app--perms {
  display: flex;
  flex-direction: column;
}

.simon-app-perms-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--zinc-600);
}

.simon-app-perms-head > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.simon-app-perms {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0.35rem;
}

.simon-app-perm-person .simon-app-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.simon-app-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.3rem 0.1rem 0.2rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: var(--zinc-50);
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--zinc-600);
  letter-spacing: -0.01em;
}

.simon-app-tool img {
  display: block;
  opacity: 1;
}

.simon-app-perm-grant {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
}

.simon-app-perm-grant small {
  margin-top: 0;
}

.simon-app-perm-badge {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  color: #3f3f46;
  background: #f4f4f5;
}

.simon-app-perm-badge--limited {
  color: #92400e;
  background: #fef3c7;
}

.simon-app-perm-badge--deny {
  color: #991b1b;
  background: #fee2e2;
}

/* Skill chrome (Sources, etc.) */
.simon-app-skill-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--zinc-100);
}

.simon-app-skill-cat {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-skill-head strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--zinc-950);
  line-height: 1.2;
}

.simon-app-skill-badge {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  color: #0f766e;
  background: #ccfbf1;
}

.simon-app--sources {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.simon-app-sources {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0.45rem;
}

.simon-app-docs-nodes--pills {
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
}

.simon-app-docs-node.simon-app-skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  max-width: 100%;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  border: none;
  border-radius: 999px;
  background: #f4f4f5;
  box-shadow: none;
}

.simon-app-skill-pill img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
  border-radius: 0;
}

.simon-app-skill-pill span {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #09090b;
  white-space: nowrap;
}

.simon-app.is-docs-hover .simon-app-skill-pill.is-focus {
  border-color: transparent;
  background: #ebebed;
}

.simon-app-docs-col--entities .simon-app-docs-node img {
  border-radius: 3px;
}

/* Skill rules (Do / Don't) */
.simon-app--rules {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.75rem 0.9rem;
}

.simon-app-rules-cluster {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  min-width: min(100%, 17.5rem);
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.simon-app--rules .simon-app-skill-head {
  padding: 0 0 0.55rem;
  border-bottom: 1px solid var(--zinc-100);
}

.simon-app-skill-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.simon-app-skill-name img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.simon-app--rules .simon-app-skill-head strong {
  display: inline-flex;
}

.simon-app-rules {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0 0;
  overflow: hidden;
}

.simon-app-rules-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-rules-col {
  min-width: 0;
  padding: 0.15rem 0 0.35rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.simon-app-rules-col h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.simon-app-rules-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.simon-app-rules-mark--do {
  color: #166534;
  background: #f4f4f5;
}

.simon-app-rules-mark--dont {
  color: #991b1b;
  background: #f4f4f5;
}

.simon-app-rules-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.simon-app-rules-col li {
  position: relative;
  padding-left: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--zinc-700);
  letter-spacing: -0.02em;
}

.simon-app-rules-col li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--zinc-400);
  font-family: inherit;
}

/* Studio · Fix & publish */
.simon-app--fix {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.65rem 0.75rem 0.7rem;
}

.simon-app-fix-flag {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
}

.simon-app-fix-flag-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.simon-app-fix-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.simon-app-fix-pill--warn {
  color: #92400e;
  background: #fde68a;
}

.simon-app-fix-model {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
}

.simon-app-fix-model img {
  width: 12px;
  height: 12px;
}

.simon-app-fix-flag p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
}

.simon-app-fix-flag strong {
  font-weight: 700;
  color: #09090b;
}

.simon-app-fix-note {
  font-size: 0.5625rem;
  font-weight: 500;
  color: #b45309;
}

.simon-app-fix-edit {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
}

.simon-app-fix-label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-fix-diff {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.simon-app-fix-line {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.simon-app-fix-line em {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.simon-app-fix-line.is-remove {
  color: #991b1b;
  background: #fef2f2;
  text-decoration: line-through;
  text-decoration-color: rgba(153, 27, 27, 0.35);
}

.simon-app-fix-line.is-add {
  color: #166534;
  background: #f0fdf4;
}

.simon-app-fix-skill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.3rem 0.55rem 0.3rem 0.4rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-800);
  letter-spacing: -0.01em;
}

.simon-app-fix-skill img {
  width: 12px;
  height: 12px;
  opacity: 0.9;
}

.simon-app-fix-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
}

.simon-app-fix-publish .simon-app-accept {
  flex: 0 0 auto;
  align-self: auto;
  margin-top: 0;
  padding: 0.45rem 0.75rem;
}

.simon-app-fix-live {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  min-width: 0;
}

.simon-app-fix-live .is-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #166534;
  letter-spacing: -0.01em;
}

.simon-app-fix-live .is-live::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  color: #166534;
  background: #dcfce7;
}

.simon-app-fix-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.simon-app-fix-tools img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* Studio · Compare models */
.simon-app--compare {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.7rem 0.75rem 0.75rem;
  gap: 0.65rem;
}

.simon-app-compare-prompt {
  flex: 0 0 auto;
  align-self: flex-end;
  max-width: 92%;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #18181b;
}

.simon-app-compare {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  align-items: stretch;
}

.simon-app-compare-pane {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
  padding: 0.65rem 0.7rem 0.7rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.simon-app-compare-pane:hover,
.simon-app-compare-pane:has(.simon-app-accept:hover) {
  border-color: var(--zinc-300);
  box-shadow: 0 0 0 1px var(--zinc-300);
}

.simon-app-compare-model {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--zinc-600);
  letter-spacing: -0.01em;
}

.simon-app-compare-model img {
  width: 12px;
  height: 12px;
}

.simon-app-compare-pane p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--zinc-700);
}

.simon-app-compare-source {
  margin-top: auto;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
  line-height: 1.3;
}

.simon-app-compare-source--warn {
  color: #b45309;
}

.simon-app-accept {
  appearance: none;
  flex: 0 0 auto;
  align-self: stretch;
  margin-top: 0.15rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--zinc-900);
  border-radius: 7px;
  background: var(--zinc-950);
  color: #fff;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.simon-app-accept:hover {
  background: #27272a;
  border-color: #27272a;
}

@media (max-width: 520px) {
  .simon-app-compare {
    grid-template-columns: 1fr;
  }

  .simon-app-compare-prompt {
    align-self: stretch;
    max-width: none;
  }
}

/* Studio · Persona */
.simon-app--persona {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
  padding: 0.7rem 0.75rem 0.75rem;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
}

.simon-app-persona-banner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px solid var(--zinc-200);
  border-radius: 6px;
  background: #fff;
}

.simon-app-persona-eyebrow {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.simon-app-persona-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.simon-app-persona-who .simon-app-avatar {
  line-height: 1;
  letter-spacing: 0;
}

.simon-app-persona-who strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
  line-height: 1.2;
}

.simon-app-persona-who > div > span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--zinc-500);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simon-app-persona-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0 0.55rem;
  overflow: hidden;
}

.simon-app-persona-prompt {
  align-self: flex-end;
  max-width: 92%;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  background: #f4f4f5;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #18181b;
}

.simon-app-persona-reply {
  max-width: 96%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.simon-app-persona-meta {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-400);
}

.simon-app-persona-reply p:last-child {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--zinc-700);
}

.simon-app-persona-reply strong {
  font-weight: 700;
  color: #09090b;
}

.simon-app-persona-input {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-400);
}

.simon-app-persona-input em {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--zinc-950);
  color: #fff;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 520px) {
  .simon-app-persona-who > div > span {
    white-space: normal;
  }
}

/* Publish once */
.simon-app--publish {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.simon-app-publish {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0 0.15rem;
}

.simon-app-publish-steps {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  padding: 0.35rem 0.75rem 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-400);
}

.simon-app-publish-steps span.is-done,
.simon-app-publish-steps span.is-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--zinc-700);
}

.simon-app-publish-steps span.is-live {
  color: #166534;
}

.simon-app-publish-steps span.is-done::before,
.simon-app-publish-steps span.is-live::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #166534;
  background: #dcfce7;
}

.simon-app-publish-steps i {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--zinc-300);
}

.simon-app-publish-map {
  flex: 1 1 auto;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin-inline: auto;
  grid-template-columns: auto auto;
  gap: 2.75rem;
  padding: 0.35rem 1rem 0.65rem;
}

.simon-app-docs-nodes--center {
  justify-content: center;
  gap: 0;
}

.simon-app-publish-skill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.simon-app-publish-map .simon-app-skill-pill {
  width: auto;
  max-width: 100%;
}

.simon-app-publish-map .simon-app-skill-pill span {
  font-size: 0.75rem;
}

.simon-app-publish-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.15rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.simon-app-publish-map .simon-app-docs-node.simon-app-publish-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
  padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

.simon-app-publish-map .simon-app-publish-tool img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 0;
}

.simon-app-publish-map .simon-app-publish-tool span {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
  white-space: nowrap;
}

.simon-app.is-docs-hover .simon-app-publish-tool.is-focus {
  border-color: var(--zinc-300);
  background: #fafafa;
}

.simon-app-publish-map .simon-app-docs-col--entities .simon-app-docs-nodes {
  align-items: flex-start;
  justify-content: space-evenly;
}

/* LP report document (Skills · Template) */
.capability-card:has(> .capability-media--doc) {
  padding-bottom: 0;
}

.capability-media--doc {
  background: #f4f4f5;
  border-color: var(--zinc-200);
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
}

.simon-doc-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 1.1rem 1.25rem 0;
  box-sizing: border-box;
  overflow: hidden;
}

.simon-doc-stage.is-rows-in .simon-doc,
.simon-doc-stage.is-settled .simon-doc {
  opacity: 1;
  transform: translateY(0);
}

.simon-doc {
  width: min(100%, 380px);
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 100%;
  height: 100%;
  padding: 1.35rem 1.4rem 2.5rem;
  background: #fff;
  border-radius: 2px 2px 0 0;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.1);
  color: #18181b;
  font-family: Inter, system-ui, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

.simon-doc-stage:not(.is-rows-in) .simon-doc {
  opacity: 0;
  transform: translateY(12px);
}

.simon-doc-stage.is-rows-in:not(.is-settled) .simon-doc {
  transition:
    opacity 0.45s ease,
    transform 0.55s ease;
}

.simon-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e4e4e7;
}

.simon-doc-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.simon-doc-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: #18181b;
}

.simon-doc-brand strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #18181b;
}

.simon-doc-brand em {
  display: block;
  margin-top: 0.05rem;
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 500;
  color: #71717a;
}

.simon-doc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.5rem;
  font-weight: 500;
  color: #71717a;
  text-align: right;
  white-space: nowrap;
}

.simon-doc-title {
  margin: 0 0 0.2rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #09090b;
  white-space: nowrap;
}

.simon-doc-lede,
.simon-doc-body,
.simon-doc-subtitle {
  margin: 0 0 0.85rem !important;
  max-width: none !important;
  font-size: 0.625rem;
  font-weight: 450;
  line-height: 1.55;
  color: #3f3f46;
}

.simon-doc-subtitle {
  font-weight: 500;
  color: #71717a;
  line-height: 1.3;
}

.simon-doc-h {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #09090b;
}

.simon-doc-bullets {
  margin: 0 0 0.85rem;
  padding-left: 1rem;
}

.simon-doc-bullets li {
  margin: 0 0 0.3rem;
  font-size: 0.625rem;
  line-height: 1.45;
  color: #3f3f46;
}

.simon-doc-table {
  width: 100%;
  margin: 0 0 0.9rem;
  border-collapse: collapse;
  font-size: 0.5625rem;
}

.simon-doc-table th,
.simon-doc-table td {
  padding: 0.28rem 0.2rem;
  border-bottom: 1px solid #f4f4f5;
  text-align: left;
  color: #52525b;
  font-weight: 450;
}

.simon-doc-table th {
  font-weight: 600;
  color: #71717a;
  border-bottom-color: #e4e4e7;
}

.simon-doc-table td:last-child,
.simon-doc-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.simon-doc-table strong {
  font-weight: 650;
  color: #18181b;
}

@media (prefers-reduced-motion: reduce) {
  .simon-doc-stage:not(.is-rows-in) .simon-doc,
  .simon-doc-stage.is-rows-in:not(.is-settled) .simon-doc {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

.capability-media .feature-stage-mesh {
  display: none;
}

.capability-media .mock-ui {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: scale(0.92);
  transform-origin: center center;
  box-shadow: none;
}

.capability-card .mock-ui.mock-chat--work {
  gap: 1.25rem;
  padding: 1.15rem;
  max-width: none;
}

.capability-card .mock-chat--work .mock-chat-q {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

.capability-card .mock-chat--work .mock-chat-answer {
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* —— Light mid-page (Figma white band) —— */
.home-light {
  background: #fff;
  color: var(--zinc-500);
  --text-secondary: var(--zinc-500);
  --text-muted: var(--zinc-400);
}

.home-light > .section {
  background: #fff;
  max-width: calc(var(--max) + 240px);
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-left: 1px solid #e4e4e7;
  border-right: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
  box-sizing: border-box;
  --section-pad-x: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

.home-dark {
  background: #000;
  color: #fafafa;
}

.home-dark > .section {
  background: #000;
  max-width: calc(var(--max) + 240px);
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  --section-pad-x: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

/* On a phone the 2.5rem section gutter plus a card's own 1.75rem inset eats
   nearly a fifth of the screen before any copy starts. Pull both in, and set
   --section-pad-x rather than only the padding so the components that bleed to
   the section edge (providers row, media plates) follow. */
@media (max-width: 700px) {
  .section:not(.hero),
  .page > .section:not(.hero),
  .page > section.section:not(.hero),
  .home-light > .section,
  .home-dark > .section {
    --section-pad-x: 1.5rem;
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
  }

  .capability-card,
  .capability-card:nth-child(odd),
  .capability-card:nth-child(even),
  .capability-grid--accordion > .capability-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* —— Logo marquee (Figma 65:4291 — 24px icons, 56px gap) —— */
.section-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  overflow: hidden;
  background: #fff !important;
}

.home-light > .section.section-logos {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.logo-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  will-change: transform;
}

.logo-marquee-track img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-marquee.is-ready .logo-marquee-track {
  animation: logoScroll var(--marquee-duration, 36s) linear infinite;
}

@keyframes logoScroll {
  to {
    transform: translateX(calc(-1 * var(--marquee-shift, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee.is-ready .logo-marquee-track {
    animation: none;
  }
}

/* —— Richer product mocks —— */
.mock-ui {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  background: var(--bg-soft);
  height: 100%;
  box-sizing: border-box;
}

.mock-graph {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mock-ui-top {
  padding: 1.1rem 1.2rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.mock-entity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.mock-entity-type {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mock-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.mock-pill.ok {
  color: #a1a1aa;
  border-color: rgba(123, 241, 168, 0.35);
  background: rgba(123, 241, 168, 0.08);
}

.mock-entity-name {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.mock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
}

.mock-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mock-tabs span {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
}

.mock-tabs span.is-on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.mock-tabs em {
  font-style: normal;
  font-size: 0.65rem;
  margin-left: 0.25rem;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.mock-rel-list {
  padding: 0.5rem 0;
  overflow: auto;
}

.mock-rel {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.2rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mock-rel-a,
.mock-rel-b {
  color: var(--text);
  font-weight: 500;
}

.mock-rel-edge {
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.mock-chat-q {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.mock-chat-a {
  padding: 0.25rem 0.15rem;
}

.mock-chat-answer {
  margin-bottom: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}

.mock-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hero-pill--static {
  opacity: 1;
  animation: none;
  transform: none;
  pointer-events: none;
}

.ok-text {
  color: #a1a1aa !important;
}

/* —— Value cards —— */
.section-value {
  padding-top: 8rem;
  padding-bottom: 6rem;
}

.section-value .how-grid {
  margin-top: 0.5rem;
}

.value-headline {
  max-width: none;
  font-size: clamp(2.25rem, 4vw, 3.1rem);
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
  color: #fafafa;
}

.value-headline .value-line {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .value-headline br {
    display: none;
  }

  .value-headline .value-line {
    white-space: normal;
  }
}

.value-headline .value-muted,
.section-close h2 .value-muted {
  color: #71717a;
}

/* Value band on the white stack — the walk stays teal, the rest inks over */
.home-light .value-headline {
  color: var(--zinc-950);
}

.home-light .value-headline .value-muted {
  color: var(--zinc-400);
}

.home-light .how-step h3 {
  color: var(--zinc-950);
}

.home-light .how-step p {
  color: var(--zinc-500);
}

.home-light .how-grid[data-how-rail-ready] .how-step:not(.is-reached) h3,
.home-light .how-grid[data-how-rail-ready] .how-step:not(.is-reached) p {
  color: var(--zinc-400);
}

.home-light .how-grid::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(9, 9, 11, 0.12),
    transparent
  );
}

@media (max-width: 900px) {
  .home-light .how-grid::before {
    background: linear-gradient(
      180deg,
      transparent,
      rgba(9, 9, 11, 0.12),
      transparent
    );
  }
}

.home-light .how-dot {
  border-color: rgba(9, 9, 11, 0.18);
  background: #fff;
}

.home-light .how-dot::after {
  background: rgba(9, 9, 11, 0.28);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 960px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

.value-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  padding: 1rem 1rem 1.35rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.value-preview {
  height: 220px;
  border-radius: 14px;
  background: #0c0c0e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.25rem;
  overflow: hidden;
  position: relative;
}

.vp-search,
.vp-agent,
.vp-skills {
  padding: 1.1rem;
  height: 100%;
  box-sizing: border-box;
}

.vp-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

.vp-q {
  font-size: 0.875rem;
  color: var(--text);
  margin: 0 0 0.85rem;
}

.vp-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.35rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.vp-row strong {
  color: var(--text);
}

.vp-prompt {
  margin-left: auto;
  max-width: 90%;
  font-size: 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.vp-run {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 0.9rem;
}

.vp-run p {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--text);
}

.vp-step {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

.vp-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.vp-progress i {
  display: block;
  height: 100%;
  background: #7bf1a8;
  border-radius: 999px;
}

.vp-check {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.vp-check::before {
  content: "✓ ";
  color: #a1a1aa;
}

.vp-skills {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  justify-content: center;
}

.vp-skill {
  font-size: 0.8rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

.value-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.55rem;
  max-width: none;
}

.value-card > p {
  margin: 0 0 1.1rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  flex: 1;
}

.value-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.value-link:hover {
  color: #71717a;
}

/* —— How it works —— */
.section-how {
  padding-top: 4rem;
}

.how-headline .how-emph {
  color: #fafafa;
}

.section-how h2,
.how-headline {
  max-width: none;
  margin-bottom: 2.5rem;
  color: #71717a;
  letter-spacing: -0.03em;
}

.how-headline .how-emph {
  color: #fafafa;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.how-grid::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  pointer-events: none;
}

@media (max-width: 900px) {
  .how-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .how-grid::before {
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    );
  }

  .how-step {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
  }

  .how-dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .how-step h3,
  .how-step p {
    grid-column: 2;
  }
}

/* Rail walk — a teal dot travels the connector and lights each step as it lands.
   JS positions the dot and the trailing fill off the measured dot centers. */
.how-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.how-grid.has-rail .how-rail.is-live {
  opacity: 1;
}

.how-rail-fill,
.how-rail-dot {
  position: absolute;
  top: var(--rail-top, 10px);
}

.how-rail-fill {
  height: 1px;
  margin-top: -1px;
  background: linear-gradient(90deg, rgba(0, 150, 137, 0), #009689);
}

.how-rail-dot {
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #009689;
  box-shadow:
    0 0 0 4px rgba(0, 150, 137, 0.14),
    0 0 14px 2px rgba(0, 150, 137, 0.35);
  transition: box-shadow 0.6s var(--ease);
}

.how-grid.has-rail:not(.is-vertical) .how-rail-dot {
  margin-left: -5.5px;
}

/* Parked on the last step, the glow would sit there for good — drop it so the
   traveller merges into the step's own dot */
.how-rail.is-parked .how-rail-dot {
  box-shadow: none;
}

.how-grid.is-vertical .how-rail-fill,
.how-grid.is-vertical .how-rail-dot {
  top: 0;
  left: var(--rail-left, 10px);
}

.how-grid.is-vertical .how-rail-fill {
  width: 1px;
  height: 0;
  margin: 0 0 0 -1px;
  background: linear-gradient(180deg, rgba(0, 150, 137, 0), #009689);
}

.how-step {
  position: relative;
}

.how-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1.1rem;
  position: relative;
  background: var(--bg);
  transition: border-color 0.35s var(--ease);
}

.how-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 0.35s var(--ease);
}

.how-dot--teal {
  border-color: rgba(0, 150, 137, 0.45);
}

.how-dot--teal::after {
  background: #009689;
}

.how-step.is-reached .how-dot {
  border-color: rgba(0, 150, 137, 0.45);
}

.how-step.is-reached .how-dot::after {
  background: #009689;
}

.how-step.is-landing .how-dot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  animation: how-land 0.8s var(--ease) forwards;
}

@keyframes how-land {
  from {
    box-shadow: 0 0 0 0 rgba(0, 150, 137, 0.4);
  }
  to {
    box-shadow: 0 0 0 13px rgba(0, 150, 137, 0);
  }
}

.how-step h3,
.how-step p {
  transition: color 0.35s var(--ease);
}

.how-step h3 {
  font-size: 1.05rem;
  margin: 0 0 0.45rem;
  max-width: none;
}

.how-step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  /* Even line lengths instead of a lone trailing word */
  text-wrap: balance;
}

.how-grid[data-how-rail-ready] .how-step:not(.is-reached) h3,
.how-grid[data-how-rail-ready] .how-step:not(.is-reached) p {
  color: var(--zinc-500);
}

/* —— Close trust —— */
.trust-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}

.trust-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.trust-certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.75rem 2.5rem;
}

.trust-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: rgba(250, 250, 250, 0.92);
  font-size: 0.9375rem;
  font-weight: 500;
}

.trust-item-status {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.55);
}

.trust-item-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  vertical-align: 0.1em;
  border-radius: 999px;
  background: #00b3a3;
  animation: trust-status-pulse 1.7s ease-out infinite;
}

@keyframes trust-status-pulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(0, 179, 163, 0.85),
      0 0 8px rgba(0, 179, 163, 0.6);
  }
  60% {
    transform: scale(1.3);
    box-shadow:
      0 0 0 8px rgba(0, 179, 163, 0),
      0 0 10px rgba(0, 179, 163, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(0, 179, 163, 0),
      0 0 8px rgba(0, 179, 163, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-item-status::before {
    animation: none;
    box-shadow: 0 0 8px rgba(0, 179, 163, 0.6);
  }
}

.trust-item svg {
  width: 18px;
  height: 18px;
  align-self: center;
  flex: none;
  stroke: rgba(255, 255, 255, 0.85);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}

.trust-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex: none;
}

.trust-badge {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
}

.trust-badge--gdpr {
  width: 88px;
  height: 88px;
}

.trust-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #009689;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.trust-learn:hover {
  color: #007a6e;
}

.trust-learn:hover .mega-arrow {
  transform: translateX(3px);
}

.trust-learn:hover .mega-arrow--out {
  transform: translate(3px, -3px);
}

.trust-learn span {
  font-size: 1.05em;
  line-height: 1;
}

@media (max-width: 700px) {
  .trust-cta,
  .trust-copy,
  .trust-badges {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .trust-badge {
    width: 64px;
    height: 64px;
  }

  .trust-badge--gdpr {
    width: 78px;
    height: 78px;
  }
}

.section-products {
  padding-top: 2rem;
}

.flag {
  display: inline-block;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(248, 113, 113, 0.15);
  color: #71717a;
  border: 1px solid rgba(248, 113, 113, 0.35);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  margin-left: 0.35rem;
  font-weight: 600;
}

.stream {
  margin-top: 1.5rem;
}

.stream h3 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 0.5rem;
}

.stream ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}

.stream li {
  margin-bottom: 0.35rem;
}

/* —— Footer —— */
.site-footer {
  background: #000;
  margin-top: 0;
  color: #fafafa;
}

.footer-inner {
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
  padding: 3.5rem clamp(2.5rem, 6vw, 4.5rem) 2rem;
}

@media (max-width: 700px) {
  .footer-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 800px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-cols h4 {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: #71717a;
  font-weight: 600;
}

.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-cols li {
  margin-bottom: 0.55rem;
}

.footer-cols a {
  font-size: 0.9375rem;
  color: #d4d4d8;
  transition: color 0.15s ease;
}

.footer-cols a:hover {
  color: var(--brand);
}

.footer-brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo img {
  height: 20px;
  width: auto;
  display: block;
}

.footer-tagline {
  margin: 0;
  font-size: 0.875rem;
  color: #71717a;
  line-height: 1.4;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.footer-social:hover {
  color: var(--brand);
}

.footer-social svg {
  display: block;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-legal p {
  margin: 0;
  font-size: 0.8125rem;
  color: #52525b;
}

.footer-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #52525b;
}

.footer-legal-links a {
  color: #52525b;
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: #a1a1aa;
}

/* Inner page top spacing under fixed nav */
body:not(.is-home) .page {
  padding-top: 5.5rem;
}

body:not(.is-home) .page.page--product,
body:not(.is-home) .page.page--case-study {
  padding-top: 0;
}

body:not(.is-home) .section.hero {
  max-width: calc(var(--max) + 80px) !important;
  margin: 0 auto;
  padding: 4rem var(--gutter) 3rem;
}

body:not(.is-home) .section.hero h1 {
  max-width: 18ch;
}

/* —— Light theme product sections (Figma white band) —— */
.home-light .feature-block + .feature-block {
  margin-top: 0;
}

.home-light .section-products {
  background: #fff !important;
  --section-pad-b: 5rem;
  padding-top: 5rem;
  padding-bottom: var(--section-pad-b);
}

/* Teal now belongs to the capability visuals, so the band sits back in grey */
.home-light .section-providers {
  --section-pad-b: 0;
  padding: 0 !important;
  background: var(--zinc-100) !important;
  overflow: visible;
}

/* Dot vignette, same grid and ink as the product heroes so the two read as one
   motif. It rides ::after because .section::before is switched off site-wide. */
.home-light .section-providers::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(9, 9, 11, 0.1) 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: center;
  /* Band is short and wide, so the fade hugs the copy rather than the box —
     it has to be spent before the borders the white sections meet it on. */
  -webkit-mask-image: radial-gradient(
    ellipse 56% 66% at 50% 50%,
    #000 0%,
    #000 26%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse 56% 66% at 50% 50%,
    #000 0%,
    #000 26%,
    transparent 76%
  );
}

.home-light .section-providers .providers-row {
  position: relative;
  z-index: 1;
}

.providers-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
  box-sizing: border-box;
  padding: clamp(3.25rem, 6vw, 5rem) var(--section-pad-x, 2.5rem);
  text-align: center;
}

h2.providers-title,
.providers-title {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--zinc-950);
  text-align: center;
}

.providers-title-muted {
  color: var(--zinc-400);
  font-weight: 600;
}

.providers-icons {
  --provider-size: 76px;
  --provider-gap: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.providers-link {
  flex: 0 0 var(--provider-gap);
  width: var(--provider-gap);
  height: 1.5px;
  background: var(--zinc-500);
  transform: scaleX(0);
  pointer-events: none;
}

.providers-link--to {
  transform-origin: right center;
}

.providers-link--from {
  transform-origin: left center;
}

.providers-icons.is-linked .providers-link {
  transform: scaleX(1);
  transition: transform 1.1s var(--ease);
}

.provider-cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--provider-size);
  height: var(--provider-size);
  border: 1px solid var(--zinc-200);
  border-radius: calc(var(--provider-size) * 0.24);
  background: #fff;
}

.provider-cell img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.provider-cell--simon img {
  width: 32px;
  height: 32px;
}

@media (max-width: 700px) {
  .providers-icons {
    --provider-size: 60px;
    --provider-gap: 1.5rem;
  }

  .provider-cell img,
  .provider-cell--simon img {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .providers-link,
  .providers-icons.is-linked .providers-link {
    transform: scaleX(1);
    transition: none;
  }
}

/* —— Get your house in order (Figma 157:11212) ——
   A bordered header row, then an edge-to-edge 50/50 split: accordion | stage. */
.home-light > .section.section-house {
  --section-pad-b: 0;
  --house-pad-x: clamp(2.5rem, 7.4vw, 6.1875rem);
  padding: 0;
  background: #fff !important;
}

/* Home: share the same gutter as the value band so the title and accordion
   sit on the same left edge as "Get more useful answers…". */
.is-home .home-light > .section.section-house {
  --house-pad-x: var(--section-pad-x);
}

.house {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "list stage";
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}

.house-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 15.1875rem;
  padding: 3rem var(--house-pad-x);
  border-bottom: 1px solid var(--zinc-200);
  box-sizing: border-box;
}

.house-head > .house-sub {
  margin: 0;
  max-width: 69.3125rem;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--zinc-500);
}

.house-head > .house-item-learn {
  margin-top: 0;
}

h2.house-title,
.home-light h2.house-title {
  margin: 0;
  max-width: none;
  font-size: clamp(2.25rem, 4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.house-title-muted {
  color: var(--zinc-400);
  white-space: nowrap;
}

.house-title-rest {
  display: block;
}

.house-rail-track {
  display: contents;
}

.house-list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(36rem, 54vw, 49rem);
  padding: 5rem var(--house-pad-x);
  border-right: 1px solid var(--zinc-200);
  box-sizing: border-box;
}

.house-item {
  border-left: 2px solid transparent;
  padding-left: 1.5rem;
  margin-left: 0;
  transition:
    padding-bottom 0.4s var(--ease),
    border-color 0.2s var(--ease);
}

.house-item.is-open {
  padding-bottom: 1.25rem;
  border-left-color: var(--brand);
}

.house-item-head {
  margin: 0;
}

.house-item-trigger {
  display: block;
  width: 100%;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.2s var(--ease),
    padding-bottom 0.4s var(--ease);
}

.house-item:not(.is-open) .house-item-trigger {
  color: var(--zinc-400);
}

.house-item:not(.is-open) .house-item-trigger:hover {
  color: var(--zinc-500);
}

.house-item.is-open .house-item-trigger {
  padding-bottom: 0.75rem;
  color: var(--zinc-950);
  cursor: default;
}

/* 0fr → 1fr so the row measures its own copy. The wrapper clips, which is what
   lets the track collapse — and it has to stay unpadded, since a track can
   never shrink below its item's padding. The open row's spacing therefore sits
   on the trigger and the row itself. */
.house-item-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s var(--ease),
    opacity 0.3s var(--ease);
}

.house-item.is-open .house-item-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.house-item-copy {
  overflow: hidden;
}

.house-item-copy p {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.45;
  color: var(--zinc-500);
}

.house-item-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.35;
  color: var(--brand);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.house-item-learn .mega-arrow {
  color: currentColor;
  transition: transform 0.2s var(--ease);
}

.house-item-learn:hover {
  color: var(--brand-hover);
  text-decoration: none;
}

.house-item-learn:hover .mega-arrow {
  transform: translateX(3px);
}

.house-stage {
  grid-area: stage;
  position: relative;
  width: 100%;
  min-height: clamp(36rem, 54vw, 49rem);
  overflow: hidden;
}

/* Always-open split (Foundation Governance / Graph): same 50/50 frame as
   house, without the accordion or teal item rule. --flip puts the image left. */
.house--flip {
  grid-template-areas:
    "head head"
    "stage list";
}

.house--flip .house-list {
  border-right: none;
  border-left: 1px solid var(--zinc-200);
}

.house--static .house-list {
  justify-content: flex-start;
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.house-point {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 25.1875rem;
  padding: 1.25rem 0;
}

.house-point-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.house-point-title:has(.house-point-icon) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.house-point-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.house-point-tag {
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--zinc-300);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--zinc-500);
  white-space: nowrap;
}

.house-point > .house-point-copy {
  margin: 0;
  max-width: none;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.45;
  color: var(--zinc-500);
}

.house-point:has(.house-point-icon) {
  gap: 0.45rem;
}

.house-point:has(.house-point-icon) .house-point-copy {
  margin-top: 0.3rem;
}

.house-point-apps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.house-point-apps img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.house-point-apps-more {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-400);
}

.house-shot,
.house-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

.house-shot {
  object-fit: cover;
  max-width: none;
  max-height: none;
}

.house-shot.is-active,
.house-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Governance panel — mesh + stacked metric cards */
.house-panel--governance {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
}

/* Foundation governance — frosted observation + control cards */
.house-panel--governance:has(.house-gov-flow) {
  padding: clamp(0.75rem, 1.5vw, 1.15rem);
}

.house-gov-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.2vw, 0.75rem);
  width: min(94%, 28.75rem);
  margin: 0 auto;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  line-height: 1.4;
  color: #0a0a0a;
}

.house-gov-flow .house-gov-glass {
  align-self: flex-end;
  max-width: 92%;
  margin: 0;
  padding: 0.65em 1.25em;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.page--investment .house-gov-flow {
  align-items: stretch;
  gap: 0.75rem;
}

.page--investment .house-gov-flow > .house-gov-stagger {
  width: 100%;
  box-sizing: border-box;
}

.page--investment .house-gov-flow .house-assist-thought {
  margin: 0;
  max-width: none;
  font-size: 0.8125em;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: -0.01em;
}

.page--investment .house-gov-flow .house-assist-thought::after {
  content: " ›";
  font-size: 0.85em;
}

.page--investment .house-gov-flow .house-assist-answer {
  margin: 0;
  max-width: none;
  font-size: 1em;
  line-height: 1.4;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.page--investment .house-gov-flow .house-assist-file,
.page--investment .house-gov-flow .house-assist-meta {
  opacity: 1;
  transform: none;
  transition: none;
  position: relative;
  visibility: visible;
}

.page--investment
  .house-panel.is-animated
  .house-gov-flow
  > .house-gov-stagger:nth-child(1) {
  transition-delay: 0.1s;
}

.page--investment
  .house-panel.is-animated
  .house-gov-flow
  > .house-gov-stagger:nth-child(2) {
  transition-delay: 0.7s;
}

.page--investment
  .house-panel.is-animated
  .house-gov-flow
  > .house-gov-stagger:nth-child(3) {
  transition-delay: 1.3s;
}

.house-gov-glass-card {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 0.95em 1.15em 1em;
  border-radius: 0.625em;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  color: #fff;
}

.house-gov-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
}

.house-gov-card-label {
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

.house-gov-glass-card .house-gov-card-label {
  color: rgba(255, 255, 255, 0.72);
}

.house-gov-live {
  font-size: 0.75em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.house-gov-live::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.4em;
  border-radius: 999px;
  background: #4ade80;
  vertical-align: 0.05em;
}

.house-gov-glass-card .house-gov-total {
  margin: 0;
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
}

.house-gov-policy,
.house-gov-meters,
.house-gov-people {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.house-gov-policy li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
}

.house-gov-policy-work {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}

.house-gov-policy-work strong {
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}

.house-gov-policy-work small {
  font-size: 0.8em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
}

.house-gov-model {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: 0 0 auto;
  padding: 0.35em 0.65em 0.35em 0.5em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

.house-gov-model img {
  display: block;
  width: 14px;
  height: 14px;
}

.house-gov-meters li {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.house-gov-meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  font-size: 0.85em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.house-gov-meter-top span:last-child {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.house-gov-bar {
  display: block;
  height: 0.35em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.house-gov-bar i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.house-panel.is-animated .house-gov-bar i {
  transform: scaleX(1);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel.is-animated .house-gov-meters li:nth-child(1) .house-gov-bar i {
  transition-delay: 0.55s;
}

.house-panel.is-animated .house-gov-meters li:nth-child(2) .house-gov-bar i {
  transition-delay: 0.68s;
}

.house-panel.is-animated .house-gov-meters li:nth-child(3) .house-gov-bar i {
  transition-delay: 0.81s;
}

.house-gov-person {
  display: flex;
  align-items: center;
  gap: 0.65em;
}

.house-gov-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.85em;
  height: 1.85em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.house-gov-person-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  min-width: 0;
  flex: 1 1 auto;
}

.house-gov-person-meta strong {
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}

.house-gov-person-meta small {
  font-size: 0.78em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
}

.house-gov-flag {
  flex: 0 0 auto;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.house-gov-flag--ok {
  color: #86efac;
}

.house-gov-flag--deny {
  color: #fda4af;
}

.house-gov-stagger,
.house-gov-person-stagger {
  opacity: 0;
  transform: translateY(14px);
}

.house-panel.is-animated .house-gov-stagger,
.house-panel.is-animated .house-gov-person-stagger {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel.is-animated .house-gov-flow > .house-gov-stagger:nth-child(1) {
  transition-delay: 0.04s;
}

.house-panel.is-animated .house-gov-flow > .house-gov-stagger:nth-child(2) {
  transition-delay: 0.16s;
}

.house-panel.is-animated .house-gov-flow > .house-gov-stagger:nth-child(3) {
  transition-delay: 0.3s;
}

.house-panel.is-animated .house-gov-flow > .house-gov-stagger:nth-child(4) {
  transition-delay: 0.44s;
}

.house-panel.is-animated .house-gov-person-stagger:nth-child(1) {
  transition-delay: 0.58s;
}

.house-panel.is-animated .house-gov-person-stagger:nth-child(2) {
  transition-delay: 0.68s;
}

.house-panel.is-animated .house-gov-person-stagger:nth-child(3) {
  transition-delay: 0.78s;
}

/* Foundation Graph — mesh behind a transparent hub graph, then glass cards */
.house-panel--graph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.15rem);
  box-sizing: border-box;
}

.house-panel--graph .house-panel-mesh {
  filter: none;
}

.house-panel--graph .house-panel-mesh img {
  width: 108%;
  height: 108%;
}

.house-graph-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  container-type: size;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.03);
  transform-origin: center center;
}

.house-panel--graph.is-live .house-graph-scene {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--graph.is-recessed .house-graph-scene {
  opacity: 0.72;
  transform: scale(0.84);
  filter: blur(16px);
  transition:
    opacity 0.8s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s ease;
}

.house-graph-frame {
  position: relative;
  width: min(100cqw, calc(100cqh * 800 / 720));
  aspect-ratio: 800 / 720;
}

.house-graph-viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
}

.house-graph-node-layer {
  position: absolute;
  inset: 0;
}

.house-graph-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1.55%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
}

.house-graph-node--fund {
  width: 2.7%;
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.55);
}

.house-graph-edges line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
  stroke-linecap: round;
}

.house-graph-labels .g-label {
  fill: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.house-graph-labels .g-label--fund {
  fill: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.house-graph-flow {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.2vw, 0.75rem);
  width: min(96%, 32rem);
  margin: 0 auto;
  font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  line-height: 1.4;
  color: #fff;
}

.house-graph-flow .house-gov-glass {
  align-self: flex-end;
  max-width: 92%;
  margin: 0;
  padding: 0.65em 1.25em;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.house-graph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1vw, 0.7rem);
}

.house-graph-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.house-graph-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.house-graph-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
}

.house-graph-item > div {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  min-width: 0;
}

.house-graph-item strong {
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}

.house-graph-item small {
  font-size: 0.75em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
}

.house-graph-dot {
  display: block;
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  border-radius: 999px;
  background: #93c5fd;
}

.house-graph-dot--asset {
  background: #86efac;
}

.house-graph-dot--deal {
  background: #fcd34d;
}

.house-graph-rels {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.house-graph-rels li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: center;
  gap: 0.4em;
  font-size: 0.85em;
}

.house-graph-rels span {
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-graph-rels em {
  font-style: normal;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.house-graph-rels strong {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-panel.is-animated .house-graph-flow > .house-gov-stagger {
  transition-delay: 0.04s;
}

.house-panel.is-animated .house-graph-grid > .house-gov-stagger:nth-child(1) {
  transition-delay: 0.14s;
}

.house-panel.is-animated .house-graph-grid > .house-gov-stagger:nth-child(2) {
  transition-delay: 0.24s;
}

.house-panel.is-animated .house-graph-grid > .house-gov-stagger:nth-child(3) {
  transition-delay: 0.34s;
}

.house-panel.is-animated .house-graph-grid > .house-gov-stagger:nth-child(4) {
  transition-delay: 0.44s;
}

@media (max-width: 1000px) {
  .house-graph-grid {
    grid-template-columns: 1fr;
  }

  .house-graph-card--sources {
    display: none;
  }
}

/* Foundation Studio — prompt, error, invocations graph, suggested fix */
.house-panel--studio-fix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.15rem);
  box-sizing: border-box;
}

.house-studio-fix-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.5vw, 0.95rem);
  width: min(94%, 28.75rem);
  margin: 0 auto;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  line-height: 1.4;
  color: #fff;
}

.house-studio-fix-flow .house-studio-fix-prompt {
  align-self: flex-end;
  max-width: 92%;
  margin: 0;
  padding: 0.7em 1.35em;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0;
  transform: translateY(0.5em);
}

.house-studio-fix-card,
.house-studio-invocations {
  opacity: 0;
  transform: translateY(0.75em);
}

.house-studio-fix-prompt.is-visible,
.house-studio-fix-card.is-visible,
.house-studio-invocations.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-studio-fix-flow .house-studio-fix-copy {
  margin: 0;
  font-size: 0.92em;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.88);
}

/* Foundation + investment firms — prompts stay frosted; cards are white. */
.page--foundation .house-gov-glass-card,
.page--investment .house-gov-glass-card {
  background: #fff;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #0a0a0a;
}

.page--foundation .house-gov-glass-card .house-gov-card-label,
.page--investment .house-gov-glass-card .house-gov-card-label {
  color: #a1a1aa;
}

.page--foundation .house-gov-live,
.page--investment .house-gov-live {
  color: #71717a;
}

.page--foundation .house-gov-glass-card .house-gov-total,
.page--foundation .house-gov-policy-work strong,
.page--foundation .house-gov-meter-top span:last-child,
.page--foundation .house-gov-person-meta strong,
.page--foundation .house-graph-item strong,
.page--foundation .house-graph-rels strong,
.page--foundation .house-studio-fix-flow .house-studio-fix-copy,
.page--investment .house-gov-glass-card .house-gov-total,
.page--investment .house-gov-policy-work strong,
.page--investment .house-gov-meter-top span:last-child,
.page--investment .house-gov-person-meta strong {
  color: #0a0a0a;
}

.page--foundation .house-gov-policy-work small,
.page--foundation .house-gov-meter-top,
.page--foundation .house-gov-person-meta small,
.page--foundation .house-graph-item small,
.page--foundation .house-graph-rels span,
.page--investment .house-gov-policy-work small,
.page--investment .house-gov-meter-top,
.page--investment .house-gov-person-meta small {
  color: #71717a;
}

.page--foundation .house-graph-rels em {
  color: #a1a1aa;
}

.page--foundation .house-gov-model,
.page--investment .house-gov-model {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #18181b;
}

.page--foundation .house-gov-avatar,
.page--investment .house-gov-avatar {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #18181b;
}

.page--foundation .house-gov-bar,
.page--investment .house-gov-bar {
  background: #e4e4e7;
}

.page--foundation .house-gov-bar i,
.page--investment .house-gov-bar i {
  background: #009689;
}

.page--foundation .house-gov-flag--ok,
.page--investment .house-gov-flag--ok {
  color: #059669;
}

.page--foundation .house-gov-flag--deny,
.page--investment .house-gov-flag--deny {
  color: #e11d48;
}

.page--foundation .house-studio-invocations-viz .house-graph-edges line {
  stroke: #d4d4d8;
}

.page--foundation .house-studio-invocations .house-graph-labels .g-label,
.page--foundation .house-studio-invocations .house-graph-labels .g-label--fund {
  fill: #3f3f46;
}

.page--foundation .house-studio-invocations .house-graph-node {
  background: #f4f4f5;
  border-color: #d4d4d8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.page--foundation .house-studio-invocations .house-graph-node--fund {
  background: #e4e4e7;
  border-color: #a1a1aa;
}

.page--foundation .house-studio-invocations .house-graph-node--warn {
  background: #ffe4e6;
  border-color: #fda4af;
}

.house-studio-invocations {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.house-studio-invocations-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 240;
}

.house-studio-invocations-frame .house-graph-node {
  width: 3.4%;
}

.house-studio-invocations-frame .house-graph-node--fund {
  width: 6%;
}

.house-studio-invocations-viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
}

.house-graph-node--warn {
  background: rgba(253, 164, 175, 0.35);
  border-color: rgba(253, 164, 175, 0.7);
}

/* Foundation Skills — frosted skill → sources map */
.house-panel--skills-map {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(0.85rem, 1.6vw, 1.35rem);
  box-sizing: border-box;
}

.house-skills-map {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  margin: 0 auto;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  color: #fff;
}

.house-skills-map .simon-app-docs {
  padding: 0;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.house-skills-map .simon-app-docs-nodes--pills {
  justify-content: space-evenly;
}

.house-skills-map .simon-app-docs-node {
  padding: 0.55em 0.7em;
  border-radius: 0.625em;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  color: #fff;
}

.house-skills-map .simon-app-docs-node strong {
  font-size: 0.85em;
  color: #fff;
}

.house-skills-map .simon-app-docs-node small {
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.68);
}

.house-skills-map .simon-app-docs-node.simon-app-skill-pill {
  padding: 0.5em 0.95em 0.5em 0.7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.38);
}

.house-skills-map .simon-app-skill-pill img {
  filter: invert(1);
  opacity: 0.9;
}

.house-skills-map .simon-app-skill-pill span {
  font-size: 0.85em;
  color: #fff;
}

.house-skills-map .simon-app-docs-links path {
  stroke: rgba(255, 255, 255, 0.45);
}

.house-panel--assist {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.15rem);
  box-sizing: border-box;
  overflow: hidden;
}

.house-assist-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.house-assist-flow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  width: min(92%, 28.75rem);
  margin: 0;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.5;
  color: #0a0a0a;
  transform: translate(-50%, -50%);
  transition:
    left 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--assist.is-workspace .house-assist-flow {
  left: 3.4rem;
  transform: translate(-100%, -50%);
  pointer-events: none;
}

.house-assist-reply {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 1.15em 1.35em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(0.75em);
}

.house-assist-reply.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-assist-flow .house-assist-thought {
  margin: 0;
  font-size: 0.8125em;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: -0.01em;
}

.house-assist-flow .house-assist-thought::after {
  content: " ›";
  font-size: 0.85em;
}

.house-assist-flow .house-assist-answer {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.house-assist-flow .house-assist-prompt.is-typing::after,
.house-assist-flow .house-assist-answer.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: studio-caret 0.8s steps(1) infinite;
}

.house-assist-files {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 0.15em;
}

.house-assist-file {
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.7em 0.85em;
  border-radius: 0.625em;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  opacity: 0;
  transform: translateY(0.4em);
}

.house-assist-file:not(.is-visible) {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.house-assist-file.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.house-assist-file.is-picked {
  box-shadow: 0 0 0 1.5px #0a0a0a;
}

.house-assist-file img {
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
}

.house-assist-file-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}

.house-assist-file-meta strong {
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0a0a0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-assist-file-meta em {
  font-style: normal;
  font-size: 0.75em;
  font-weight: 500;
  color: #71717a;
}

.house-assist-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  opacity: 0;
  transform: translateY(0.4em);
}

.house-assist-meta:not(.is-visible) {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.house-assist-meta.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-assist-meta-label {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-assist-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.house-assist-sources span,
.house-assist-skill-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4em;
  width: max-content;
  max-width: 100%;
  padding: 0.28em 0.55em 0.28em 0.4em;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.75em;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #3f3f46;
}

.house-assist-sources img,
.house-assist-skill-chip img {
  width: 0.95em;
  height: 0.95em;
  object-fit: contain;
  flex: 0 0 auto;
}

.house-assist-cursor {
  position: absolute;
  left: 72%;
  top: 18%;
  z-index: 3;
  width: 18px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  transition:
    left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    transform 0.12s ease;
}

.house-assist-flow.is-aiming .house-assist-cursor {
  opacity: 1;
}

.house-assist-flow.is-clicked .house-assist-cursor {
  transform: scale(0.86);
}

.house-panel--assist.is-workspace .house-assist-cursor {
  opacity: 0;
}

.house-assist-workspace {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  width: min(88%, 34rem);
  height: calc(100% - 1.75rem);
  min-width: 0;
  margin: 0;
  padding: 0.9em 1em 1em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  color: #fff;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate(85%, -50%);
  transition:
    opacity 0.45s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--assist.is-workspace .house-assist-workspace {
  opacity: 1;
  pointer-events: auto;
  transform: translate(calc(-50% + 2.25rem), -50%);
}

.house-assist-workspace-head h3 {
  margin: 0;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.house-assist-tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.3em;
  min-width: 0;
}

.house-assist-tabs span {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  padding: 0.32em 0.65em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.house-assist-tabs span.is-active {
  background: #fff;
  color: #0a0a0a;
}

@media (max-width: 1000px) {
  .house-panel--assist.is-workspace .house-assist-flow {
    left: 0;
    transform: translate(-120%, -50%);
  }

  .house-panel--assist.is-workspace .house-assist-workspace {
    left: 50%;
    width: min(94%, 28rem);
    height: calc(100% - 1.25rem);
    transform: translate(-50%, -50%);
  }

  .house-assist-tabs span:nth-child(n + 3),
  .house-assist-file:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .house-assist-workspace {
    transform: translate(-50%, -50%) !important;
  }
}

.house-assist-doc {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em 1.1em 1.15em;
  border-radius: 0.45em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #18181b;
}

.house-assist-doc-letterhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  padding-bottom: 0.45em;
  border-bottom: 1.5px solid #0a0a0a;
}

.house-assist-doc-letterhead strong {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0a0a0a;
}

.house-assist-doc-letterhead em {
  font-style: normal;
  font-size: 0.58em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #71717a;
  white-space: nowrap;
}

.house-assist-workspace .house-assist-doc-kicker,
.house-assist-workspace .house-assist-doc p,
.house-assist-workspace .house-assist-doc h4,
.house-assist-workspace .house-assist-doc h5 {
  margin: 0;
  max-width: none;
}

.house-assist-doc-kicker {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #009689;
}

.house-assist-workspace .house-assist-doc h4 {
  font-family: var(--font-heading);
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #0a0a0a;
}

.house-assist-doc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4em;
  margin: 0.1em 0 0;
}

.house-assist-doc-stats div {
  padding: 0.4em 0.5em 0.45em;
  border-radius: 0.3em;
  background: #f4f4f5;
}

.house-assist-doc-stats dt {
  margin: 0;
  font-size: 0.58em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.house-assist-doc-stats dd {
  margin: 0.12em 0 0;
  font-family: var(--font-heading);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}

.house-assist-workspace .house-assist-doc p {
  font-family: var(--font-heading);
  font-size: 0.72em;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #3f3f46;
}

.house-assist-workspace .house-assist-doc h5 {
  margin: 0.15em 0 0;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0a;
}

.house-assist-doc-byline,
.house-assist-doc-foot {
  font-family: Inter, sans-serif !important;
  font-size: 0.58em !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: #71717a !important;
}

.house-assist-doc-foot {
  margin-top: auto !important;
  padding-top: 0.35em;
  border-top: 1px solid #e4e4e7;
}

.house-assist-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.1em 0 0;
}

.house-assist-doc th,
.house-assist-doc td {
  padding: 0.32em 0;
  border-bottom: 1px solid #e4e4e7;
  font-size: 0.62em;
  text-align: left;
}

.house-assist-doc th {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-assist-doc td {
  font-weight: 500;
  color: #18181b;
}

.house-assist-doc th:nth-child(2),
.house-assist-doc td:nth-child(2),
.house-assist-doc th:nth-child(3),
.house-assist-doc td:nth-child(3),
.house-assist-doc th:nth-child(4),
.house-assist-doc td:nth-child(4) {
  text-align: right;
}

.house-assist-dash {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 0.95em 1em 1.05em;
  border-radius: 0.45em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #18181b;
}

.house-assist-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75em;
}

.house-assist-workspace .house-assist-dash-kicker,
.house-assist-workspace .house-assist-dash h4,
.house-assist-workspace .house-assist-dash-head em,
.house-assist-workspace .house-assist-dash-chart header,
.house-assist-workspace .house-assist-dash-mix header {
  margin: 0;
  max-width: none;
}

.house-assist-dash-kicker {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #009689;
}

.house-assist-workspace .house-assist-dash h4 {
  font-family: var(--font-heading);
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0a0a0a;
}

.house-assist-dash-head em {
  font-style: normal;
  font-size: 0.62em;
  font-weight: 500;
  color: #71717a;
  white-space: nowrap;
}

.house-assist-dash-nav {
  display: flex;
  align-items: center;
  gap: 0.15em;
  min-width: 0;
  padding-bottom: 0.05em;
  border-bottom: 1px solid #e4e4e7;
}

.house-assist-dash-nav span {
  padding: 0.28em 0.55em 0.4em;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #71717a;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
}

.house-assist-dash-nav span.is-active {
  color: #0a0a0a;
  border-bottom-color: #0a0a0a;
}

.house-assist-dash-ticker {
  min-width: 0;
  overflow: hidden;
  padding: 0.32em 0;
  border-radius: 0.3em;
  background: #0a0a0a;
  color: #fafafa;
}

.house-assist-dash-ticker-track {
  display: flex;
  width: max-content;
  animation: assist-ticker 22s linear infinite;
}

.house-assist-dash-ticker-set {
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 0 0.85em;
}

.house-assist-dash-ticker span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.58em;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: rgba(250, 250, 250, 0.72);
  white-space: nowrap;
}

@keyframes assist-ticker {
  to {
    transform: translateX(-50%);
  }
}

.house-assist-dash-ticker b {
  font-weight: 600;
  color: #2dd4bf;
}

.house-assist-dash-ticker b.is-soft {
  color: #a1a1aa;
}

.house-assist-dash-ticker b.is-warn {
  color: #fb923c;
}

.house-assist-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4em;
}

.house-assist-dash-kpis article {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  padding: 0.5em 0.55em 0.55em;
  border-radius: 0.35em;
  background: #f4f4f5;
}

.house-assist-dash-kpis span {
  font-size: 0.58em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.house-assist-dash-kpis strong {
  font-family: var(--font-heading);
  font-size: 0.98em;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}

.house-assist-dash-kpis b {
  font-size: 0.58em;
  font-weight: 600;
  color: #009689;
}

.house-assist-dash-kpis article:nth-child(2) b {
  color: #c2410c;
}

.house-assist-dash-charts {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.65em;
  min-height: 0;
}

.house-assist-dash-chart,
.house-assist-dash-mix {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  min-width: 0;
}

.house-assist-dash-chart header,
.house-assist-dash-mix header {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.house-assist-dash-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.house-assist-dash-chart ol {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-assist-dash-mix ul {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.house-assist-dash-mix li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 0.28em;
  gap: 0.18em 0.5em;
  align-items: baseline;
}

.house-assist-dash-mix span {
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

.house-assist-dash-mix em {
  font-style: normal;
  font-size: 0.62em;
  font-weight: 600;
  color: #71717a;
}

.house-assist-dash-mix i {
  grid-column: 1 / -1;
  display: block;
  height: 0.28em;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.house-assist-dash-mix i::after {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: #009689;
}

.house-assist-dash-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.house-assist-workspace .house-assist-dash-table header {
  margin: 0;
  max-width: none;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}

.house-assist-dash-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.house-assist-dash-table th,
.house-assist-dash-table td {
  padding: 0.38em 0;
  border-bottom: 1px solid #e4e4e7;
  font-size: 0.62em;
  text-align: left;
}

.house-assist-dash-table th {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-assist-dash-table td {
  font-weight: 500;
  color: #18181b;
}

.house-assist-dash-table th:nth-child(n + 2),
.house-assist-dash-table td:nth-child(n + 2) {
  text-align: right;
}

@media (max-width: 1000px) {
  .house-assist-doc-letterhead em {
    display: none;
  }

  .house-assist-doc-stats,
  .house-assist-dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55em;
  }

  .house-assist-doc-stats div:nth-child(n + 3),
  .house-assist-dash-kpis article:nth-child(n + 3) {
    display: none;
  }

  .house-assist-dash-ticker {
    padding: 0.7em 0;
  }

  .house-assist-dash-ticker span {
    font-size: 0.72em;
  }

  .house-assist-dash-mix,
  .house-assist-dash-table {
    display: none;
  }

  .house-assist-dash-charts {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
}

.house-assist-chips,
.house-assist-skill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.house-assist-skill .house-gov-model img {
  filter: invert(1);
}

.house-assist-checks {
  margin: 0.15em 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.house-assist-checks li {
  position: relative;
  padding-left: 1.15em;
  font-size: 0.88em;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.88);
}

.house-assist-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 999px;
  background: #4ade80;
}

/* Work house stages — frost the homepage visuals on the mesh */
.house--static .house-search-reply,
.house--static .house-agents-run,
.house--static .house-agents-result,
.house--static .house-artifact-card {
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  box-shadow: none;
  color: #fff;
}

.house--static .house-search-flow .house-search-thought {
  color: rgba(255, 255, 255, 0.62);
}

.house--static .house-search-flow .house-search-answer {
  color: rgba(255, 255, 255, 0.88);
}

.house--static .house-search-result-body strong {
  color: #fff;
}

.house--static .house-search-result-body span,
.house--static .house-search-result > em {
  color: rgba(255, 255, 255, 0.68);
}

.house--static .house-search-more {
  color: #fff;
}

.page--work .house--static .house-search-reply,
.page--work .house--static .house-search-evidence,
.page--work .house--static .house-assist-reply {
  background: #fff;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #0a0a0a;
}

.page--work .house--static .house-search-flow .house-search-thought {
  color: #a1a1aa;
}

.page--work .house--static .house-search-flow .house-search-answer {
  color: #3f3f46;
}

.page--work .house--static .house-search-result-body strong {
  color: #0a0a0a;
}

.page--work .house--static .house-search-result-body span {
  color: #71717a;
}

.page--work .house--static .house-agents-run,
.page--work .house--static .house-agents-result {
  background: #fff;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #0a0a0a;
}

.page--work .house--static .house-agents-run-title,
.page--work .house--static .house-agents-run-status,
.page--work .house--static .house-agents-run-state,
.page--work .house--static .house-agents-run-steps li.is-done,
.page--work .house--static .house-agents-result-title,
.page--work .house--static .house-agents-flow .house-agents-result-copy,
.page--work .house--static .house-agents-file-meta strong {
  color: #0a0a0a;
}

.page--work .house--static .house-agents-run-steps li {
  color: #52525b;
}

.page--work .house--static .house-agents-run-log,
.page--work .house--static .house-agents-file-meta span {
  color: #9f9fa9;
}

.page--work .house--static .house-agents-file {
  border-color: #d4d4d8;
}

.page--work .house--static .house-agents-file img {
  filter: none;
}

.house--static .house-agents-run-title,
.house--static .house-agents-run-status,
.house--static .house-agents-run-state,
.house--static .house-agents-run-steps li.is-done,
.house--static .house-agents-result-title,
.house--static .house-agents-flow .house-agents-result-copy,
.house--static .house-agents-file-meta strong {
  color: #fff;
}

.house--static .house-agents-run-steps li {
  color: rgba(255, 255, 255, 0.72);
}

.house--static .house-agents-run-log,
.house--static .house-agents-file-meta span {
  color: rgba(255, 255, 255, 0.62);
}

.house--static .house-agents-file {
  border-color: rgba(255, 255, 255, 0.28);
}

.house--static .house-agents-file img {
  filter: invert(1);
}

.house--static .house-artifact-card span {
  color: #fff;
}

.house-panel--agents {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
}

.house-panel--agents .house-agents-scenes {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  width: min(94%, 34rem);
}

.house-agents-scene {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.4em);
}

.house-agents-scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--agents .agent-builder {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid #e4e4e7;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.house-panel--agents.is-animated .agent-builder {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--agents .agent-builder-head {
  padding: 0.7em 1em;
  background: #f4f4f5;
  border-bottom-color: #ececef;
}

.house-panel--agents .agent-builder-title strong {
  font-size: 0.95em;
  color: #0a0a0a;
}

.house-panel--agents .agent-builder-meta,
.house-panel--agents .agent-builder-meta span {
  font-size: 0.8em;
  color: #71717a;
}

.house-panel--agents .agent-builder-body {
  min-height: 9.5em;
  padding: 1em 1.05em 0.85em;
  background: #fff;
}

.house-panel--agents .agent-builder-prompt {
  min-height: 4.2em;
  font-size: 0.95em;
  color: #18181b;
}

.house-panel--agents .agent-builder-prompt.is-typing::after {
  background: #0a0a0a;
}

.house-panel--agents .studio-input-icon,
.house-panel--agents .studio-input-auto {
  color: #71717a;
}

.house-panel--agents .studio-input-auto i {
  border-top-color: #a1a1aa;
}

.house-panel--agents .studio-input-send {
  width: 1.75em;
  height: 1.75em;
  color: #fff;
  background: #a1a1aa;
  transition:
    background 0.2s ease,
    transform 0.12s ease;
}

.house-panel--agents .studio-input-send.is-ready {
  color: #fff;
  background: #0a0a0a;
}

.house-panel--agents .studio-input-send.is-pressed {
  transform: scale(0.9);
}

.house-agents-scene[data-agents-scene="build"] {
  position: relative;
}

.house-agents-scene[data-agents-scene="build"] .house-agents-cursor {
  left: 78%;
  top: 118%;
}

.house-agents-scene[data-agents-scene="build"].is-aiming .house-agents-cursor {
  opacity: 1;
}

.house-agents-scene[data-agents-scene="build"].is-clicked .house-agents-cursor {
  transform: scale(0.86);
}

.house-agents-hub {
  position: relative;
  width: 100%;
  padding: 1.35em 1.4em 0.35em;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  color: #0a0a0a;
}

.house-agents-hub-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.house-agents-hub-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7em;
  min-width: 0;
}

.house-agents-hub-title img {
  display: block;
  width: 1.35em;
  height: 1.35em;
}

.house-agents-hub-title h3 {
  margin: 0;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}

.house-agents-hub-run {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.15em 0 0;
  padding: 0.78em 1.05em;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font: inherit;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  transition: transform 0.12s ease;
}

.house-agents-hub-run svg {
  display: block;
  width: 0.7em;
  height: 0.7em;
}

.house-agents-hub-run.is-pressed {
  transform: scale(0.96);
}

.house-agents-hub-tabs {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 1.25em 0 0.35em;
}

.house-agents-hub-tabs span {
  padding: 0.42em 0.85em;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 0.78em;
  font-weight: 500;
  color: #71717a;
}

.house-agents-hub-tabs .is-active {
  border-color: transparent;
  background: #f4f4f5;
  color: #0a0a0a;
}

.house-agents-hub-list {
  margin: 0.15em 0 0;
  padding: 0;
  list-style: none;
}

.house-agents-hub-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85em;
  padding: 0.95em 0.1em;
}

.house-agents-hub-list span {
  min-width: 0;
  font-size: 0.92em;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-agents-hub-list b {
  padding: 0.22em 0.55em;
  border-radius: 999px;
  background: #ecfdf5;
  font-size: 0.72em;
  font-weight: 600;
  color: #009689;
}

.house-agents-hub-list em {
  font-size: 0.78em;
  font-style: normal;
  font-weight: 450;
  color: #a1a1aa;
  white-space: nowrap;
}

.house-agents-cursor {
  position: absolute;
  left: 78%;
  top: 68%;
  z-index: 3;
  width: 18px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  transition:
    left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    transform 0.12s ease;
}

.house-agents-hub.is-aiming .house-agents-cursor {
  opacity: 1;
}

.house-agents-hub.is-clicked .house-agents-cursor {
  transform: scale(0.86);
}

.house-panel--agents
  .house-agents-scene[data-agents-scene="run"]
  .house-agents-flow {
  width: 100%;
}

.house-agents-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  width: min(92%, 28.75rem);
  margin: 0 auto;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.5;
  color: #0a0a0a;
}

/* Frosted user prompt — same glass as the hero thread ask pill. The compound
   selector clears the site-wide .section p colour, which would otherwise win. */
.house-agents-flow .house-agents-prompt,
.house-search-flow .house-search-prompt,
.house-assist-flow .house-assist-prompt {
  align-self: flex-end;
  max-width: 88%;
  margin: 0;
  padding: 0.75em 1.5em;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #ffffff;
  opacity: 0;
  transform: translateY(0.5em);
}

.house-agents-flow .house-agents-prompt.is-visible,
.house-search-flow .house-search-prompt.is-visible,
.house-assist-flow .house-assist-prompt.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-agents-run,
.house-agents-result {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.5em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(0.75em);
}

.house-agents-run.is-visible,
.house-agents-result.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-agents-run-title {
  margin: 0;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

.house-agents-run-status {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  font-size: 1em;
}

.house-agents-run-head {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

.house-agents-run-state {
  font-weight: 400;
}

.house-agents-run.is-complete .house-agents-run-state {
  font-weight: 700;
}

.house-agents-icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.875em;
  height: 0.875em;
}

.house-agents-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1.5px solid #d4d4d8;
  border-radius: 999px;
}

.house-agents-icon.is-active::before,
.house-agents-icon.is-done::before {
  display: none;
}

.house-agents-spinner {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 999px;
  border: 1.5px solid #d4d4d8;
  border-top-color: #009689;
  animation: agents-spin 0.7s linear infinite;
}

.house-agents-icon.is-active .house-agents-spinner {
  display: block;
}

.house-agents-check {
  display: none;
  width: 100%;
  height: 100%;
}

.house-agents-icon.is-done .house-agents-check {
  display: block;
}

.house-agents-run-bar {
  height: 0.375em;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.house-agents-run-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #009689;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-agents-run-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.house-agents-run-steps li {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 1em;
  color: #52525b;
}

.house-agents-run-steps li.is-done {
  color: #0a0a0a;
}

.house-agents-run-log {
  align-self: flex-end;
  font-size: 1em;
  color: #9f9fa9;
}

.house-agents-result-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
  color: #0a0a0a;
}

.house-agents-result-copy {
  margin: 0;
  font-size: 1em;
  color: #0a0a0a;
}

.house-agents-file {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.75em;
  border: 1px solid #d4d4d8;
  border-radius: 0.625em;
}

.house-agents-file img {
  display: block;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
}

.house-agents-file-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  min-width: 0;
}

.house-agents-file-meta strong {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
  color: #0a0a0a;
}

.house-agents-file-meta span {
  font-size: 0.875em;
  color: #52525b;
}

.house-panel-mesh--agents {
  filter: none;
}

.house-panel-mesh--studio {
  filter: none;
}

.house-panel--studio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
}

.house-panel--studio .house-studio-scenes {
  flex: 1 1 auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: min(96%, 32rem);
}

.house-studio-scenes {
  position: relative;
  z-index: 1;
  width: min(96%, 32rem);
}

.house-studio-scene {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.4em);
}

.house-studio-scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-studio-scene[data-studio-scene="fix"].is-active {
  position: relative;
  width: 100%;
}

.house-studio-scene[data-studio-scene="issues"] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.house-studio-scene[data-studio-scene="issues"].is-active {
  position: absolute;
}

.house-studio-issues {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}

.house-studio-issue-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.house-studio-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(12px);
}

.house-studio-issue:not(.is-visible) {
  position: absolute;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}

.house-studio-issue.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.house-studio-issue.is-picked {
  background: #fff;
  box-shadow:
    0 0 0 1.5px #0a0a0a,
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.house-studio-issue-score {
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}

.house-studio-issue-copy {
  min-width: 0;
}

.house-studio-issue-copy p {
  margin: 0;
  font-size: 0.84em;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #0a0a0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-studio-issue-copy em {
  display: inline-block;
  margin-left: 0.25em;
  font-style: normal;
  color: #71717a;
  opacity: 0;
  transform: translateX(-4px);
}

.house-studio-issue:not(.is-counted) .house-studio-issue-copy em {
  position: absolute;
  width: 0;
  overflow: hidden;
}

.house-studio-issue.is-counted .house-studio-issue-copy em {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-studio-issue-meta {
  display: block;
  margin-top: 0.1em;
  font-size: 0.72em;
  font-weight: 500;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-studio-issue-title.is-typing::after,
.house-studio-issue-meta.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: studio-caret 0.8s steps(1) infinite;
}

.house-studio-issue-status {
  flex: 0 0 auto;
  padding: 0.22em 0.5em;
  border-radius: 999px;
  background: #ffedd5;
  font-size: 0.68em;
  font-weight: 600;
  font-style: normal;
  color: #c2410c;
  opacity: 0;
  transform: scale(0.88);
}

.house-studio-issue.is-badged .house-studio-issue-status {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-studio-cursor {
  position: absolute;
  left: 78%;
  top: 8%;
  z-index: 3;
  width: 18px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  transition:
    left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    transform 0.12s ease;
}

.house-studio-issues.is-aiming .house-studio-cursor {
  opacity: 1;
}

.house-studio-issues.is-clicked .house-studio-cursor {
  transform: scale(0.86);
}

.house-studio-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  width: min(92%, 28.75rem);
  margin: 0 auto;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.5;
}

.house-studio-flow .house-studio-prompt {
  align-self: flex-end;
  max-width: 88%;
  margin: 0;
  padding: 0.75em 1.5em;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0;
  transform: translateY(0.5em);
}

.house-studio-reply,
.house-studio-test,
.house-studio-note,
.house-studio-publish {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.5em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(0.75em);
}

.house-studio-prompt.is-visible,
.house-studio-reply.is-visible,
.house-studio-test.is-visible,
.house-studio-note.is-visible,
.house-studio-publish.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-studio-reply-copy,
.house-studio-test-copy,
.house-studio-test-result,
.house-studio-note-copy,
.house-studio-publish-copy {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #0a0a0a;
}

.house-studio-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
}

.house-studio-meta div {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 0.75em;
  align-items: baseline;
}

.house-studio-meta div:has(.house-studio-integrations) {
  align-items: center;
}

.house-studio-meta dt {
  margin: 0;
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-studio-meta dd {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  color: #3f3f46;
}

.house-studio-integrations {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.house-studio-integrations img {
  display: block;
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
}

.house-studio-test-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
}

.house-studio-test-label {
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-studio-test-state {
  font-size: 1em;
  font-weight: 600;
  color: #71717a;
}

.house-studio-test.is-failed .house-studio-test-state {
  color: #e11d48;
}

.house-studio-test.is-passed .house-studio-test-state {
  color: #059669;
}

.house-studio-test-bar {
  height: 0.35em;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.house-studio-test-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #009689;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-studio-test.is-running .house-studio-test-bar i {
  width: 62%;
}

.house-studio-test.is-failed .house-studio-test-bar i {
  width: 100%;
  background: #f43f5e;
}

.house-studio-test.is-passed .house-studio-test-bar i {
  width: 100%;
  background: #10b981;
}

.house-studio-test-result {
  display: none;
}

.house-studio-test.is-failed .house-studio-test-copy,
.house-studio-test.is-passed .house-studio-test-copy {
  display: none;
}

.house-studio-test.is-failed .house-studio-test-result,
.house-studio-test.is-passed .house-studio-test-result {
  display: block;
}

.house-studio-publish {
  align-items: flex-start;
  gap: 0.85em;
  padding: 1.1em 1.25em;
}

.house-studio-publish-copy {
  width: 100%;
}

.house-studio-publish-btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.48em 0.95em;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  font-family: inherit;
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  pointer-events: none;
}

.house-panel-mesh--skills {
  filter: none;
}

.house-panel-mesh--search {
  filter: none;
}

.house-panel--artifacts {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-sizing: border-box;
}

.house-artifacts-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  width: min(94%, 32rem);
}

.house-artifact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-height: 0;
  padding: 0.85rem 0.5rem 0;
  border: 1px solid var(--zinc-200);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.house-panel--artifacts.is-animated .house-artifact-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--artifacts.is-animated .house-artifact-card:nth-child(1) {
  transition-delay: 0.06s;
}

.house-panel--artifacts.is-animated .house-artifact-card:nth-child(2) {
  transition-delay: 0.28s;
}

.house-panel--artifacts.is-animated .house-artifact-card:nth-child(3) {
  transition-delay: 0.5s;
}

.house-panel--artifacts.is-animated .house-artifact-card:nth-child(4) {
  transition-delay: 0.72s;
}

.house-panel--artifacts.is-animated .house-artifact-card:nth-child(5) {
  transition-delay: 0.94s;
}

.house-panel--artifacts.is-animated .house-artifact-card:nth-child(6) {
  transition-delay: 1.16s;
}

.house-artifact-card span {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-600);
}

.house-artifact-card img {
  width: 96px;
  height: 96px;
  display: block;
  transform: translateY(6px);
}

.house-panel--search {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
}

.house-search-flow {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  width: min(92%, 28.75rem);
  margin: 0 auto;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.5;
  color: #0a0a0a;
}

.house-search-reply {
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  padding: 1.25em 1.5em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(0.75em);
}

.house-search-reply.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-search-thought {
  margin: 0;
  font-size: 0.8125em;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: -0.01em;
}

.house-search-thought::after {
  content: " ›";
  font-size: 0.85em;
}

.house-search-answer {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
  color: #3f3f46;
  letter-spacing: -0.01em;
}

.house-search-evidence {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 0.8em 0.95em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(0.75em);
}

.house-search-evidence.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-search-evidence-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
}

.house-search-evidence-label {
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
}

.house-search-evidence-score {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0a0a0a;
}

.house-search-evidence-score i {
  width: 1.85em;
  height: 2px;
  border-radius: 999px;
  background: #10b981;
}

.house-search-evidence-state {
  margin: 0;
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #0a0a0a;
}

.house-search-evidence-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
}

.house-search-scan {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.house-search-scan li {
  display: grid;
  grid-template-columns: 0.875em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65em;
  min-width: 0;
}

.house-search-scan-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  font-size: 0.9375em;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0a0a0a;
}

.house-search-scan-name img {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex: 0 0 auto;
}

.house-search-scan em {
  font-style: normal;
  font-size: 0.8125em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #a1a1aa;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(0.25em);
}

.house-search-scan li.is-done em {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-search-answer.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: studio-caret 0.8s steps(1) infinite;
}

.house-search-results {
  list-style: none;
  margin: 0.25em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  min-width: 0;
}

.house-search-result {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625em;
  min-width: 0;
}

.house-search-result-stagger {
  opacity: 0;
  transform: translateY(0.375em);
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-result-stagger {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-result-stagger:nth-child(1) {
  transition-delay: 0.08s;
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-result-stagger:nth-child(2) {
  transition-delay: 0.16s;
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-result-stagger:nth-child(3) {
  transition-delay: 0.24s;
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-result-stagger:nth-child(4) {
  transition-delay: 0.32s;
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-result-stagger:nth-child(5) {
  transition-delay: 0.4s;
}

.house-search-file-ico {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.3125em;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

.house-search-file-ico--xlsx {
  background: #16a34a;
}

.house-search-file-ico--pdf {
  background: #dc2626;
}

.house-search-file-ico--doc {
  background: #2563eb;
}

.house-search-file-ico--chat,
.house-search-file-ico--skill,
.house-search-file-ico--metric {
  background: transparent;
}

.house-search-file-ico--person {
  border-radius: 999px;
  background: #009689;
  color: #fff;
  font-size: 0.55rem;
}

.house-search-file-ico--metric {
  color: #0a0a0a;
  font-size: 1.15rem;
}

.house-search-file-ico img {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

.house-search-file-ico--chat img,
.house-search-file-ico--skill img {
  width: 1.35rem;
  height: 1.35rem;
}

.house-search-result-body {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  min-width: 0;
}

.house-search-result-body strong {
  font-size: 0.9375em;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-search-result-body span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125em;
  font-size: 0.8125em;
  font-weight: 450;
  color: #a1a1aa;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-search-result-body img {
  width: 0.75em;
  height: 0.75em;
  object-fit: contain;
  flex: 0 0 auto;
}

.house-search-result > em {
  font-style: normal;
  font-size: 0.8125em;
  font-weight: 450;
  color: #a1a1aa;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.house-search-more {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  margin-top: 0.25em;
  font-size: 0.875em;
  font-weight: 550;
  color: #0284c7;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(0.375em);
}

.house-search-more::after {
  content: "›";
  font-size: 0.85em;
  line-height: 1;
}

.house-panel--search.is-animated
  .house-search-reply.is-visible
  .house-search-more {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease 0.48s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.48s;
}

.house-panel--skills {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
}

.house-skills-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  justify-content: center;
  gap: clamp(0.45rem, 0.9vw, 0.55rem);
  width: max-content;
  max-width: min(92%, 28rem);
  margin: 0 auto;
}

.house-skills-badge-stagger {
  opacity: 0;
  transform: translateY(14px);
}

.house-panel--skills.is-animated .house-skills-badge-stagger {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(1) {
  transition-delay: 0.05s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(2) {
  transition-delay: 0.13s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(3) {
  transition-delay: 0.21s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(4) {
  transition-delay: 0.29s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(5) {
  transition-delay: 0.37s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(6) {
  transition-delay: 0.45s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(7) {
  transition-delay: 0.53s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(8) {
  transition-delay: 0.61s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(9) {
  transition-delay: 0.69s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(10) {
  transition-delay: 0.77s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(11) {
  transition-delay: 0.85s;
}

.house-panel--skills.is-animated .house-skills-badge-stagger:nth-child(12) {
  transition-delay: 0.93s;
}

.house-panel-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.house-panel-mesh img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.house-panel--governance .house-panel-mesh {
  filter: none;
}

.house-panel--governance .house-panel-mesh img {
  width: 108%;
  height: 108%;
}

.house-panel--governance .house-panel-mesh--search {
  filter: none;
}

.house-panel--governance .house-panel-mesh--search img {
  width: 108%;
  height: 108%;
}

.house-panel-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  width: min(100%, 28rem);
  margin: 0 auto;
}

.house-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  background: #fff;
  border: 1px solid rgba(229, 229, 229, 0.6);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.house-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.house-card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(115, 115, 115, 0.45);
}

.house-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(115, 115, 115, 0.45);
  white-space: nowrap;
}

.house-card-status i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.house-card-status--ok i {
  background: #10b981;
}

.house-card-status--bad i {
  background: #f43f5e;
}

.house-card-status--warn i {
  background: #f59e0b;
}

.house-card-stat {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}

.house-card-num {
  font-size: clamp(1.35rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.house-card-stat-rest {
  color: #737373;
}

.house-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.house-card-meta p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(115, 115, 115, 0.55);
}

.house-card-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.house-card-bar-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #f5f5f5;
  overflow: hidden;
}

.house-card-bar-track i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: 40px;
  background: #171717;
  transform: scaleX(0);
  transform-origin: left center;
}

.house-panel.is-animated .house-card-bar-track i {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.55s;
}

.house-card-bar-labels {
  display: flex;
  justify-content: space-between;
  font-style: normal;
}

.house-card-bar-labels em {
  font-style: normal;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: #737373;
}

.house-card-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.house-card-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #f5f5f5;
}

.house-card-icon img {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.house-card-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-sizing: border-box;
}

.house-card-dot--ok {
  background: #10b981;
}

.house-card-dot--warn {
  background: #f59e0b;
}

.house-card-dot--bad {
  background: #f43f5e;
}

.house-card-more {
  font-size: 0.75rem;
  line-height: 1;
  color: #737373;
  white-space: nowrap;
}

/* Card entrance — hidden until the panel animates */
.house-card-stagger,
.house-card-icon-stagger {
  opacity: 0;
  transform: translateY(14px);
}

.house-panel.is-animated .house-card-stagger {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel.is-animated .house-card-stagger:nth-child(1) {
  transition-delay: 0.05s;
}
.house-panel.is-animated .house-card-stagger:nth-child(2) {
  transition-delay: 0.18s;
}
.house-panel.is-animated .house-card-stagger:nth-child(3) {
  transition-delay: 0.31s;
}

.house-panel.is-animated .house-card-icon-stagger {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.house-panel.is-animated .house-card-icon-stagger:nth-child(1) {
  transition-delay: 0.42s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(2) {
  transition-delay: 0.48s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(3) {
  transition-delay: 0.54s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(4) {
  transition-delay: 0.6s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(5) {
  transition-delay: 0.66s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(6) {
  transition-delay: 0.72s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(7) {
  transition-delay: 0.78s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(8) {
  transition-delay: 0.84s;
}
.house-panel.is-animated .house-card-icon-stagger:nth-child(9) {
  transition-delay: 0.9s;
}

.house-panel.is-animated
  .house-card-stagger:nth-child(3)
  .house-card-icon-stagger:nth-child(1) {
  transition-delay: 0.52s;
}
.house-panel.is-animated
  .house-card-stagger:nth-child(3)
  .house-card-icon-stagger:nth-child(2) {
  transition-delay: 0.58s;
}
.house-panel.is-animated
  .house-card-stagger:nth-child(3)
  .house-card-icon-stagger:nth-child(3) {
  transition-delay: 0.64s;
}

@media (max-width: 1000px) {
  .home-light > .section.section-house {
    --house-pad-x: var(--section-pad-x, 1.25rem);
    padding-left: var(--house-pad-x);
    padding-right: var(--house-pad-x);
    padding-bottom: 2rem;
    overflow-x: hidden;
  }

  .house {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "stage"
      "list";
  }

  .house-head {
    min-height: 0;
    padding: 2.5rem 0;
  }

  h2.house-title,
  .home-light h2.house-title {
    white-space: normal;
    max-width: none;
  }

  .house-title-muted {
    white-space: normal;
  }

  .house-title-rest {
    display: inline;
  }

  .house-list {
    min-height: 0;
    padding: 1.75rem 0 0;
    border-right: none;
    border-bottom: none;
  }

  .house--flip .house-list {
    border-left: none;
  }

  .house--static .house-list {
    padding-top: 1.75rem;
    padding-bottom: 0;
  }

  .house-point {
    max-width: none;
  }

  .house-stage {
    min-height: 32rem;
    aspect-ratio: 3 / 4;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 16px;
  }

  /* Investment proof visual: three stacked cards need more height than
     the shared 3/4 stage, so size to the stack instead of clipping it. */
  .page--investment .house-stage {
    min-height: 0;
    aspect-ratio: auto;
    height: auto;
  }

  .page--investment .house-stage .house-panel {
    position: relative;
    height: auto;
    min-height: 38rem;
  }

  .page--investment .house-gov-flow {
    width: 100%;
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .page--investment .house-gov-glass-card {
    padding: 0.7em 0.85em 0.75em;
    gap: 0.5em;
  }

  .page--investment .house-gov-flow .house-assist-file {
    padding: 0.5em 0.65em;
    gap: 0.6em;
  }

  .house-shot {
    object-position: top center;
  }

  /* Homepage accordion: a simple overflow scroller. Bleed the rail to the
     screen edges; keep the title and slide copy on --house-pad-x. */
  .house.is-rail {
    grid-template-areas:
      "head"
      "list";
    width: calc(100% + 2 * var(--house-pad-x));
    margin-left: calc(-1 * var(--house-pad-x));
    margin-right: calc(-1 * var(--house-pad-x));
    min-width: 0;
    overflow: hidden;
  }

  .house.is-rail .house-head {
    padding: 2.5rem var(--house-pad-x) 1.25rem;
  }

  .house.is-rail .house-list,
  .house.is-rail .house-list.reveal {
    opacity: 1;
    transform: none;
  }

  .house.is-rail .house-list {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem 0 2rem;
    border: none;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .house.is-rail .house-list::-webkit-scrollbar {
    display: none;
  }

  .house.is-rail .house-rail-track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    width: max-content;
    max-width: none;
    padding-left: var(--house-pad-x);
    padding-right: var(--house-pad-x);
  }

  .house.is-rail .house-stage {
    display: none;
  }

  .house.is-rail .house-item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 0 0 calc(100vw - 4.75rem);
    width: calc(100vw - 4.75rem);
    max-width: calc(100vw - 4.75rem);
    min-width: calc(100vw - 4.75rem);
    padding: 0;
    margin-left: 0;
    border-left: none;
    overflow-anchor: none;
  }

  .house.is-rail .house-item.is-open {
    padding-bottom: 0;
  }

  .house.is-rail .house-item > .house-panel,
  .house.is-rail .house-item > .house-panel--studio {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: 34rem;
    margin-bottom: 0.85rem;
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
    overflow: hidden;
  }

  /* Phones: shorter visual cards, with the mock UI scaled to match. */
  @media (max-width: 700px) {
    .house.is-rail .house-item > .house-panel,
    .house.is-rail .house-item > .house-panel--studio {
      height: min(27.5rem, 66vh);
      padding: 0.85rem 0.6rem;
    }

    .house.is-rail .house-item > .house-panel > :not(.house-panel-mesh) {
      zoom: 0.78;
    }

    .house.is-rail .house-panel-stack {
      gap: 0.5rem;
      width: min(92%, 20.5rem);
    }

    .house.is-rail .house-card {
      gap: 0.4rem;
      padding: 0.7rem 0.75rem;
    }

    .house.is-rail .house-card-icon {
      width: 20px;
      height: 20px;
    }

    .house.is-rail .house-card-bar-track {
      height: 5px;
    }
  }

  .house.is-rail .house-item-body,
  .house.is-rail .house-item.is-open .house-item-body {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .house.is-rail .house-item-trigger,
  .house.is-rail .house-item:not(.is-open) .house-item-trigger,
  .house.is-rail .house-item-trigger:disabled {
    color: var(--zinc-950);
    pointer-events: none;
    cursor: default;
    opacity: 1;
    padding: 0 0 0.45rem;
  }

  .house.is-rail .house-item-copy p {
    font-size: 1rem;
  }

  .house-panel-stack {
    gap: 0.5rem;
    width: min(88%, 22rem);
  }

  .house-card {
    gap: 0.4rem;
    padding: 0.7rem 0.8rem;
  }

  .house-card-label,
  .house-card-status {
    font-size: 0.6875rem;
  }

  .house-card-stat {
    font-size: 0.8125rem;
  }

  .house-card-num {
    font-size: 1.15rem;
  }

  .house-card-meta p {
    font-size: 0.6875rem;
  }

  .house-agents-flow,
  .house-studio-flow,
  .house-search-flow,
  .house-gov-flow,
  .house-studio-fix-flow {
    font-size: 0.75rem;
    gap: 0.6rem;
    width: min(88%, 22rem);
  }

  .house.is-rail .house-studio-flow {
    gap: 0.5rem;
    width: min(90%, 22rem);
  }

  .house.is-rail .house-studio-reply,
  .house.is-rail .house-studio-test,
  .house.is-rail .house-studio-note,
  .house.is-rail .house-studio-publish {
    gap: 0.65em;
    padding: 0.85em 1em;
  }

  .house-artifacts-stage {
    width: min(88%, 24rem);
    gap: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .house-item-body,
  .house-item-trigger,
  .house-shot,
  .house-panel {
    transition: none;
  }

  .house-card-stagger,
  .house-card-icon-stagger,
  .house-card-bar-track i {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-studio-prompt,
  .house-studio-reply,
  .house-studio-test,
  .house-studio-note,
  .house-studio-publish,
  .house-studio-scene,
  .house-agents-scene,
  .house-studio-issue,
  .house-studio-issue-status,
  .house-studio-issue-copy em,
  .house-artifact-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-studio-issue:not(.is-visible) {
    position: relative;
    visibility: visible;
    pointer-events: auto;
  }

  .house-studio-issue:not(.is-counted) .house-studio-issue-copy em {
    position: static;
    width: auto;
    overflow: visible;
  }

  .house-studio-issue-title.is-typing::after,
  .house-studio-issue-meta.is-typing::after {
    content: none;
    animation: none;
  }

  .house-skills-badge-stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-agents-prompt,
  .house-agents-run,
  .house-agents-result {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-gov-stagger,
  .house-gov-person-stagger,
  .house-gov-bar i {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-graph-scene {
    opacity: 1 !important;
    transform: scale(0.84) !important;
    filter: blur(16px) !important;
    transition: none !important;
  }

  .house-search-prompt,
  .house-search-reply,
  .house-search-evidence,
  .house-search-scan em,
  .house-search-result-stagger,
  .house-search-more,
  .house-assist-prompt,
  .house-assist-reply,
  .house-assist-file,
  .house-assist-meta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-assist-file:not(.is-visible),
  .house-assist-meta:not(.is-visible) {
    position: relative;
    visibility: visible;
    pointer-events: auto;
  }

  .house-assist-workspace {
    opacity: 1 !important;
    transform: translate(calc(-50% + 2.25rem), -50%) !important;
  }

  .house-assist-dash-ticker-track {
    animation: none;
  }

  .house-search-answer.is-typing::after,
  .house-assist-prompt.is-typing::after,
  .house-assist-answer.is-typing::after {
    content: none;
    animation: none;
  }

  .house-studio-fix-prompt,
  .house-studio-fix-card,
  .house-studio-invocations {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .house-agents-run-bar i {
    width: 100% !important;
    transition: none !important;
  }

  .house-agents-spinner {
    animation: none !important;
  }
}

.home-light .product-title {
  color: var(--zinc-950);
  font-size: clamp(2.25rem, 3.8vw, 3.1rem);
  letter-spacing: -0.02em;
}

.home-light .product-title-muted {
  color: var(--zinc-400);
}

.home-light .feature-block-head {
  max-width: none;
  margin-bottom: 2.8rem;
}

/*
 * Teal outside-left rule on section headers only.
 * Aligns with the section’s outer left; top spacing is padding on the head
 * so the rule runs from the section top down to the subsections.
 * Clear section padding for every capability-grid section (not just products),
 * with enough specificity to beat later page-section padding-top rules.
 */
.home-light > .section:has(> .feature-block > .capability-grid) {
  --section-pad-t: 4rem;
  padding-top: 0;
}

.home-light
  > .section.section-products:has(> .feature-block > .capability-grid):not(
    .section-solutions-proof
  ) {
  --section-pad-t: 5rem;
}

.feature-block:has(> .capability-grid) {
  margin-top: 0;
}

.feature-block:has(> .capability-grid) > .feature-block-head {
  margin-left: calc(-1 * var(--section-pad-x, 0px));
  margin-bottom: 0;
  padding-left: var(--section-pad-x, 0px);
  padding-top: var(--section-pad-t, 5rem);
  padding-bottom: 1.75rem;
  border-left: 1px solid var(--brand);
  box-sizing: border-box;
}

.home-light .feature-block:has(> .capability-grid) > .feature-block-head {
  padding-bottom: 2.8rem;
}

.home-light .feature-block-head p {
  color: var(--zinc-500);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  max-width: none;
}

.home-light .feature-block-head .feature-block-emphasis {
  color: var(--zinc-950);
  margin-top: 0.75rem;
}

.home-light .capability-title {
  color: var(--zinc-950);
}

.home-light .capability-desc {
  color: var(--zinc-500);
}

.home-light .capability-media {
  background: transparent;
  border: none;
}

/* —— Home Foundation / Work visuals ——
   Built like the product heroes: a square teal plate with the mockup sitting on
   it, running past the plate top and bottom on its own shadow.
   The square fills the open card's width and takes its height from that, so the
   plate grows with the card. max-height keeps it from outgrowing the row on
   short viewports. */
.home-light .capability-grid--accordion .capability-media {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  margin: 1rem 0 0;
  padding: 0;
  border-radius: 24px;
  overflow: visible;
  /* Hovering the card is what opens it; the mockups themselves stay put, and
     dropping them out of hit testing retires every hover state inside them. */
  pointer-events: none;
  background-color: #0a6b64;
  background-image:
    radial-gradient(95% 120% at 6% -12%, #2b9086, transparent 58%),
    radial-gradient(70% 90% at 104% -6%, #48ada2, transparent 60%),
    radial-gradient(105% 115% at 62% 118%, #03332f, transparent 64%);
}

/* The mockup keeps its own palette and reads as a card lifted off the plate.
   Height follows the content between the two bounds: sparse mockups stop short
   instead of padding themselves out with white, and the busy ones still run
   past the plate. */
.home-light .capability-grid--accordion .capability-media > * {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 86%;
  height: auto;
  min-height: 68%;
  max-height: 112%;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--zinc-200);
  border-radius: 0.9rem;
  background: #fff;
  box-shadow:
    0 34px 48px -30px rgba(9, 9, 11, 0.5),
    0 8px 16px -10px rgba(9, 9, 11, 0.14);
}

/* The run mockup is short enough to hit the 68% floor, so its rows have to
   center against the stretched card instead of stranding white below them. */
.home-light
  .capability-grid--accordion
  .capability-media--agents
  > .agents-run {
  justify-content: center;
}

/* Stacked cards have no row height to clamp against */
@media (max-width: 1000px) {
  .home-light .capability-grid--accordion .capability-media {
    align-self: start;
    justify-self: stretch;
    max-height: none;
  }
}

/* Hover panels can no longer be triggered, so keep them out of the layout */
.home-light
  .capability-grid--accordion
  .capability-media
  [class*="hover-card"] {
  display: none;
}

/* The media opts out of hit testing, but a few mockups switch pointer events
   back on for their own hover states (search results). That hands :hover back to
   the media and dims the mockup, so shut it off for the whole subtree. */
.home-light .capability-grid--accordion .capability-media * {
  pointer-events: none;
}

.home-light
  .capability-grid--accordion
  .capability-media--search:hover
  .search-chat,
.home-light
  .capability-grid--accordion
  .capability-media--search:focus-within
  .search-chat {
  opacity: 1;
  transform: none;
}

/* Skills — the pill stage *is* the white card here, so the stage mask would fade
   the card itself out into the plate. Fade the pills into white instead, and keep
   the card short enough to sit inside the plate. */
.home-light
  .capability-grid--accordion
  .capability-media--skills
  > .skills-pill-stage {
  height: 82%;
  min-height: 0;
  max-height: 82%;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-light
  .capability-grid--accordion
  .capability-media--skills
  .skills-pill-fade {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  display: block;
  height: 3.25rem;
  pointer-events: none;
}

.home-light
  .capability-grid--accordion
  .capability-media--skills
  .skills-pill-fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    #fff 24%,
    rgba(255, 255, 255, 0.72) 62%,
    rgba(255, 255, 255, 0)
  );
}

.home-light
  .capability-grid--accordion
  .capability-media--skills
  .skills-pill-fade--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    #fff 24%,
    rgba(255, 255, 255, 0.72) 62%,
    rgba(255, 255, 255, 0)
  );
}

/* The graph carries its own whitespace inside the viewBox, so it sits smaller on
   the plate than the denser mockups and lets more of the gradient show. Dropping
   min-height keeps the card exactly on the viewBox ratio instead of the shared
   68% floor stretching white space in under the drawing. */
.home-light .capability-grid--accordion .capability-media--graph > .graph-viz {
  width: 78%;
  min-height: 0;
}

/* Labels are viewBox units, so they shrink with the card — sized up to hold the
   same rendered size the wider card gave them. */
.home-light .capability-grid--accordion .capability-media--graph .g-label {
  font-size: 14px;
}

.home-light
  .capability-grid--accordion
  .capability-media--graph
  .g-label--fund {
  font-size: 16px;
}

/* Black stroke icons → brand teal on the homepage */
.home-light .capability-icon {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(40%) sepia(72%) saturate(612%)
    hue-rotate(138deg) brightness(93%) contrast(101%);
}

.home-light .feature-block-head .feature-learn {
  color: var(--brand);
}

.home-light .feature-block-head .feature-learn:hover {
  color: var(--brand-hover);
}

.home-light .capability-card .mock-ui,
.home-light .capability-media .mock-ui {
  box-shadow: none;
}

.home-light .capability-card .mock-ui.mock-chat--work {
  background: var(--zinc-100);
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.15rem;
  max-width: none;
  width: 100%;
}

.home-light .capability-card .mock-chat--work .mock-chat-q {
  align-self: flex-end;
  background: var(--zinc-200);
  border: none;
  border-radius: 90px;
  color: var(--zinc-950);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  max-width: 100%;
}

.home-light .capability-card .mock-chat--work .mock-chat-a {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.home-light .capability-card .mock-chat--work .mock-chat-answer {
  color: var(--zinc-950);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.home-light .capability-card .mock-meta-row {
  gap: 0.4rem;
}

.home-light .capability-card .mock-meta-pill {
  gap: 0.5rem;
  font-size: 0.6875rem;
  padding: 0.2rem 0.55rem;
}

.home-light .capability-card .mock-meta-pill img {
  width: 16px;
  height: 16px;
}

.home-light .capability-card .mock-meta-conf i {
  width: 28px;
  height: 4px;
}

.feature-stage-mesh {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
}

.feature-stage-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(62px) saturate(1.25);
  opacity: 1;
  transform: scale(1.25);
}

.home-light .mock-chat--work .mock-chat-answer {
  font-size: 1.125rem;
  line-height: 1.45;
  color: #09090b;
}

.home-light .mock-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.home-light .mock-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  background: #f4f4f5;
  border: 1px solid #d4d4d8;
  border-radius: 40px;
  color: #3f3f46;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.25rem 0.875rem;
  white-space: nowrap;
}

.home-light .mock-meta-logos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.home-light .mock-meta-pill img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.home-light .mock-meta-pill em,
.home-light .mock-meta-pill b {
  font-style: normal;
  font-weight: 400;
}

.home-light .mock-meta-pill em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0 0.35rem;
  background: #e4e4e7;
  border-radius: 60px;
  color: #3f3f46;
}

.home-light .mock-meta-conf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.home-light .mock-meta-conf i {
  display: inline-block;
  width: 39px;
  height: 4px;
  border-radius: 40px;
  background: #00c950;
}

/* Light mocks = white UI cards on teal stage */
.home-light .mock-ui {
  background: #fff;
  border: 1px solid #e4e4e7;
  color: #09090b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.home-light .mock-ui-top {
  border-bottom-color: #e4e4e7;
}

.home-light .mock-entity-type,
.home-light .mock-tabs span,
.home-light .mock-rel-edge {
  color: #71717a;
}

.home-light .mock-entity-name,
.home-light .mock-rel-a,
.home-light .mock-rel-b,
.home-light .mock-card-title,
.home-light .mock-chat-answer {
  color: #09090b;
}

.home-light .mock-tabs span.is-on {
  color: #09090b;
  background: #f4f4f5;
}

.home-light .mock-tabs em {
  background: #e4e4e7;
  color: #52525b;
}

.home-light .mock-avatar {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #09090b;
}

.home-light .mock-rel {
  border-bottom-color: #f4f4f5;
}

.home-light .mock-rel-edge {
  border-color: #e4e4e7;
  background: #fafafa;
}

.home-light .mock-chat-q {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #52525b;
}

.home-light .mock-badge {
  background: #f4f4f5;
  color: #52525b;
  border-color: #e4e4e7;
}

.home-light .mock-row {
  border-top-color: #f4f4f5;
  color: #52525b;
}

.home-light .mock-row .val {
  color: #09090b;
}

.home-light .mock-chip {
  background: #fafafa;
  border-color: #e4e4e7;
  color: #52525b;
}

.home-light .mock-card-title .dot {
  background: #009689;
}

.home-light .hero-pill--static {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #09090b;
}

@media (max-width: 900px) {
  .home-light .feature-switcher {
    grid-template-columns: 1fr;
  }
  .home-light .feature-stage {
    height: auto !important;
    min-height: 28rem;
    aspect-ratio: 3 / 4;
    align-self: auto;
    border-radius: 16px;
  }
  .home-light .feature-copy > span {
    display: block;
  }
}

/* —— Internal product pages (Foundation, Work, …) —— */
.page-hero {
  position: relative;
  background: #fff;
  color: var(--zinc-500);
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--zinc-200) !important;
  overflow: hidden;
  /* Half the viewport, so the next section peeks above the fold. Grows only if
     the copy and mark genuinely need more room. */
  height: auto;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  max-width: calc(var(--max) + 240px);
  margin: 0 auto;
  padding: 6.5rem clamp(2.5rem, 6vw, 4.5rem) 2.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  box-sizing: border-box;
  text-align: left;
}

@media (max-width: 700px) {
  .page-hero-inner {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

.page-hero-copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.page-hero-title {
  margin: 0 0 1.1rem;
  max-width: none;
  font-size: clamp(2.85rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--zinc-950);
  text-align: left;
}

.page-hero-muted {
  color: var(--zinc-400);
  font-weight: 600;
}

.page-hero-sub {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--zinc-500);
  text-align: left;
}

.page-hero-copy .cta-row {
  margin-top: 1.5rem;
  justify-content: flex-start;
}

.page-hero .btn {
  background: #09090b;
  color: #fafafa;
}

.page-hero .btn:hover {
  background: #27272a;
  color: #fafafa;
}

/* Centered dark-mesh heroes. */
.page-hero--mesh {
  justify-content: center;
  min-height: clamp(22rem, 52vh, 32rem);
  background: #121212;
  color: #fafafa;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.page-hero--mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../images/mesh-dark.jpg") center / cover no-repeat;
  opacity: 1;
}

.page-hero--mesh .page-hero-inner {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding-top: clamp(7.5rem, 12vw, 9.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.page-hero--mesh .page-hero-copy {
  align-items: center;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
}

.page-hero--mesh .page-hero-title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fafafa;
}

.page-hero--mesh .page-hero-muted {
  color: rgba(250, 250, 250, 0.45);
}

.page-hero--mesh .page-hero-sub {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: rgba(250, 250, 250, 0.62);
}

.page-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: min(220px, 28vw);
  max-width: 220px;
  margin: 0;
  min-height: 0;
  background: transparent;
  overflow: hidden;
}

.page-hero-visual:not(.page-hero-visual--media) img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: 0.92;
}

/* The mega marks are drawn as translucent white for the dark panels; greyscale
   then invert turns them into the same line art in ink for the light hero. */
.page-hero-visual--mega {
  width: min(220px, 28vw);
  max-width: 220px;
  overflow: visible;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  filter: grayscale(1) invert(1);
}

/* —— Hero media ——
   Placeholder plates for the subpage heroes: a large rounded square carrying
   the same teal mesh as the homepage subsections, waiting on final imagery. */
.page-hero-visual--media {
  display: block;
  flex: 0 0 auto;
  width: clamp(17rem, 36%, 26rem);
  max-width: 26rem;
  overflow: visible;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
}

.page-hero-visual--media.is-live {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease) 0.15s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.hero-media {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background-color: #0a6b64;
  background-image:
    radial-gradient(95% 120% at 6% -12%, #2b9086, transparent 58%),
    radial-gradient(70% 90% at 104% -6%, #48ada2, transparent 60%),
    radial-gradient(105% 115% at 62% 118%, #03332f, transparent 64%);
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* —— Product hero shot (Foundation 164:11656, Work 165:11662, Skills 166:11671) ——
   Same header offset as the homepage: the mesh starts below the fixed nav,
   flush to the right and bottom — no radius. */
.page-hero--foundation,
.page-hero--work,
.page-hero--skills,
.page-hero--investment,
.page-hero--compare,
.page-hero--careers {
  --hero-header: 73px;
  min-height: clamp(36rem, 80vh, 48rem);
}

.page-hero--foundation .page-hero-inner,
.page-hero--work .page-hero-inner,
.page-hero--skills .page-hero-inner,
.page-hero--investment .page-hero-inner,
.page-hero--compare .page-hero-inner,
.page-hero--careers .page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: calc(var(--max) + 240px);
  min-height: inherit;
  padding: var(--hero-header) 0 0;
}

.page-hero--foundation .page-hero-copy,
.page-hero--work .page-hero-copy,
.page-hero--skills .page-hero-copy,
.page-hero--investment .page-hero-copy,
.page-hero--compare .page-hero-copy,
.page-hero--careers .page-hero-copy {
  align-self: center;
  max-width: none;
  padding: 3rem clamp(2.5rem, 6vw, 4.5rem);
  box-sizing: border-box;
}

.page-hero--investment .page-hero-muted {
  display: block;
}

.page-hero--foundation .page-hero-copy .page-hero-sub,
.page-hero--work .page-hero-copy .page-hero-sub,
.page-hero--skills .page-hero-copy .page-hero-sub,
.page-hero--investment .page-hero-copy .page-hero-sub,
.page-hero--compare .page-hero-copy .page-hero-sub,
.page-hero--careers .page-hero-copy .page-hero-sub {
  max-width: 32rem;
}

.page-hero--foundation .hero-media--shot,
.page-hero--work .hero-media--shot,
.page-hero--skills .hero-media--shot,
.page-hero--investment .hero-media--shot,
.page-hero--compare .hero-media--shot,
.page-hero--careers .hero-media--shot {
  border-right: 1px solid var(--zinc-200);
}

.page-hero--work .hero-media--shot {
  background-color: #6b4a78;
}

.page-hero--skills .hero-media--shot {
  background-color: #c45c32;
}

.page-hero--investment .hero-media--shot {
  background-color: #121212;
  background-image: none;
}

.page-hero--compare .hero-media--shot {
  background-color: #121212;
  background-image: none;
}

.page-hero--careers .hero-media--shot {
  background-color: #e8e4dc;
  background-image: none;
}

/* Photo / mesh heroes fill the panel — no blur. */
.page-hero--foundation .hero-media-mesh,
.page-hero--work .hero-media-mesh,
.page-hero--skills .hero-media-mesh,
.page-hero--investment .hero-media-mesh,
.page-hero--compare .hero-media-mesh,
.page-hero--careers .hero-media-mesh {
  width: 100%;
  height: 100%;
}

.page-hero--foundation .hero-media-mesh img,
.page-hero--work .hero-media-mesh img,
.page-hero--skills .hero-media-mesh img,
.page-hero--investment .hero-media-mesh img,
.page-hero--compare .hero-media-mesh img,
.page-hero--careers .hero-media-mesh img {
  filter: none;
}

.hero-compare-board {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2.5rem 1.75rem;
}

.hero-compare-card {
  width: min(100%, 19.5rem);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(14px);
}

.page-hero-visual--shot.is-live .hero-compare-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--ease) 0.12s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.hero-compare-head,
.hero-compare-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.hero-compare-head {
  padding: 0 0 0.85rem;
  margin-bottom: 0.15rem;
}

.hero-compare-col,
.hero-compare-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
}

.hero-compare-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-compare-mark img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.hero-compare-col:last-child img {
  filter: invert(1);
}

.hero-compare-row {
  opacity: 0;
  transform: translateY(8px);
}

.page-hero-visual--shot.is-live .hero-compare-row {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-hero-visual--shot.is-live .hero-compare-row:nth-child(1) {
  transition-delay: 0.22s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(2) {
  transition-delay: 0.28s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(3) {
  transition-delay: 0.34s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(4) {
  transition-delay: 0.4s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(5) {
  transition-delay: 0.46s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(6) {
  transition-delay: 0.52s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(7) {
  transition-delay: 0.58s;
}
.page-hero-visual--shot.is-live .hero-compare-row:nth-child(8) {
  transition-delay: 0.64s;
}

.hero-compare-cell--yes img {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

.hero-compare-cell i {
  display: block;
  width: 0.7rem;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .hero-compare-card,
  .hero-compare-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 165:11664 / 165:11668 — Work shot is a touch wider than Foundation's. */
.page-hero--work .hero-media-shot {
  width: 179.5%;
}

.page-hero-visual--shot {
  align-self: stretch;
  width: 100%;
  max-width: none;
  min-height: 100%;
  /* Mesh and shot animate themselves, so the column stays put */
  opacity: 1;
  transform: none;
}

.hero-media--shot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
  background-color: #0a6b64;
}

/* Mesh is larger than the panel and soft-focused, same as the Figma frame */
.hero-media-mesh {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 220%;
  height: 106%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.page-hero-visual--shot.is-live .hero-media-mesh {
  opacity: 1;
  transition: opacity 0.7s var(--ease);
}

.hero-media-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: blur(2px);
}

/* 164:11658 / 164:11659 — shot is inset from the left and cropped off the
   right and bottom so the panel reads flush on three sides. */
.hero-media-shot {
  position: absolute;
  top: 20.7%;
  left: 7.1%;
  z-index: 1;
  width: 172.4%;
  opacity: 0;
  transform: translateY(1.4em);
}

.page-hero-visual--shot.is-live .hero-media-shot {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease 0.16s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}

.hero-media-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Skills chips sit over the mesh, same pills as the homepage house panel. */
.hero-skills-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 1.1vh, 0.55rem);
  box-sizing: border-box;
  width: max-content;
  max-width: min(88%, 22rem);
  height: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.page-hero--skills .hero-skills-chips .house-skills-badge-stagger {
  opacity: 0;
  transform: translateY(12px);
}

.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(1) {
  transition-delay: 0.05s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(2) {
  transition-delay: 0.13s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(3) {
  transition-delay: 0.21s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(4) {
  transition-delay: 0.29s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(5) {
  transition-delay: 0.37s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(6) {
  transition-delay: 0.45s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(7) {
  transition-delay: 0.53s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(8) {
  transition-delay: 0.61s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(9) {
  transition-delay: 0.69s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(10) {
  transition-delay: 0.77s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(11) {
  transition-delay: 0.85s;
}
.page-hero--skills
  .page-hero-visual--shot.is-live
  .hero-skills-chips
  .house-skills-badge-stagger:nth-child(12) {
  transition-delay: 0.93s;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--skills .hero-skills-chips .house-skills-badge-stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* —— Hero panels ——
   Status cards stacked over the mesh plate, overhanging it top and bottom.
   The stack is what sets the hero's height; the plate floats behind it. */
.page-hero-visual--panels {
  width: clamp(18rem, 34%, 25rem);
  max-width: 25rem;
  /* The cards animate in one by one, so the column itself stays put */
  opacity: 1;
  transform: none;
}

.hero-media--panels {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  container-type: inline-size;
}

.hero-media-plate {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background-color: #0a6b64;
  background-image:
    radial-gradient(95% 120% at 6% -12%, #2b9086, transparent 58%),
    radial-gradient(70% 90% at 104% -6%, #48ada2, transparent 60%),
    radial-gradient(105% 115% at 62% 118%, #03332f, transparent 64%);
  opacity: 0;
  transform: scale(0.94);
}

:is(
    .page-hero-visual--panels,
    .page-hero-visual--app,
    .page-hero-visual--skills
  ).is-live
  .hero-media-plate {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Everything inside the cards is sized off this one step, so the stack scales
   with the plate rather than with the viewport */
.hero-panels {
  position: relative;
  z-index: 1;
  width: 78%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.9em;
  font-size: clamp(0.5rem, 2.65cqw, 0.8125rem);
  line-height: 1.5;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-sizing: border-box;
  padding: 1.3em;
  border: 1px solid #e5e7eb;
  border-radius: 0.85em;
  background: #fff;
  box-shadow:
    0 24px 34px -26px rgba(9, 9, 11, 0.45),
    0 6px 12px -8px rgba(9, 9, 11, 0.12);
  opacity: 0;
  transform: translateY(1.6em) scale(0.985);
}

.page-hero-visual--panels.is-live .hero-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease var(--panel-delay, 0ms),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--panel-delay, 0ms);
}

.hero-panel:nth-child(1) {
  --panel-delay: 160ms;
}

.hero-panel:nth-child(2) {
  --panel-delay: 300ms;
}

.hero-panel:nth-child(3) {
  --panel-delay: 440ms;
}

.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
}

.hero-panel-name {
  color: #9f9fa9;
}

.hero-panel-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.77em;
  color: #6b7280;
  white-space: nowrap;
}

.hero-panel-dot {
  flex: 0 0 auto;
  width: 0.8em;
  height: 0.8em;
  border-radius: 999px;
  background: #05df72;
}

.hero-panel-dot--warn {
  background: #fdc700;
}

.hero-panel-dot--bad {
  background: #ff6467;
}

.hero-panel-stat {
  margin: 0;
  color: #111827;
}

.hero-panel-stat strong {
  margin-right: 0.1em;
  font-size: 1.85em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-panel-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  color: #6b7280;
}

.hero-panel-note--inline {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.hero-panel-note--inline img {
  width: 1.23em;
  height: 1.23em;
  object-fit: contain;
}

.hero-panel-meter {
  height: 0.46em;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.hero-panel-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #111827;
}

.page-hero-visual--panels.is-live .hero-panel-meter span {
  width: var(--fill, 50%);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.hero-panel-scale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: -0.55em;
  font-size: 0.92em;
  color: #111827;
}

.hero-panel-scale em {
  font-style: normal;
  color: #6b7280;
}

.hero-panel-chips {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.hero-panel-chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.46em;
  height: 2.46em;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
}

.hero-panel-chip img {
  width: 1.23em;
  height: 1.23em;
  object-fit: contain;
}

.hero-panel-chip--more {
  font-size: 0.92em;
  color: #6b7280;
}

.hero-panel-chip .hero-panel-dot {
  position: absolute;
  right: -0.1em;
  bottom: 0;
  border: 1px solid #fff;
}

/* —— Hero app window ——
   Work's hero: one run of an approved workflow, framed as the product window
   and hung off the mesh plate so it overhangs to the right and bottom. */
.page-hero-visual--app {
  width: clamp(19rem, 38%, 27rem);
  max-width: 27rem;
  /* The window animates itself, so the column stays put */
  opacity: 1;
  transform: none;
}

.hero-media--app {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  container-type: inline-size;
}

/* Everything inside the window is sized off this one step, so the mock scales
   with the plate rather than with the viewport */
.hero-app {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 88%;
  margin: 0 auto;
  aspect-ratio: 10 / 13;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 1em;
  background: #fff;
  box-shadow:
    0 34px 48px -30px rgba(9, 9, 11, 0.5),
    0 8px 16px -10px rgba(9, 9, 11, 0.14);
  font-size: clamp(0.4rem, 2.15cqw, 0.6875rem);
  line-height: 1.5;
  color: #111827;
  opacity: 0;
  transform: translateY(1.8em) scale(0.985);
}

.page-hero-visual--app.is-live .hero-app {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease 0.12s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.hero-app-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1em;
  border-bottom: 1px solid #f4f4f5;
}

.hero-app-bar-mark {
  flex: 0 0 auto;
  display: inline-flex;
}

.hero-app-bar-title {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 0;
}

.hero-app-bar-title strong {
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hero-app-bar-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.85em;
  color: #a1a1aa;
}

.hero-app-bar-pill {
  margin-left: auto;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: #f4f4f5;
  color: #52525b;
  font-size: 0.9em;
  white-space: nowrap;
}

.hero-app-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 999px;
  background: #f4f4f5;
  color: #71717a;
  font-size: 0.9em;
  line-height: 0.6;
}

.hero-app-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 1.1em 1.15em 0;
  overflow: hidden;
}

.hero-app-ask {
  align-self: flex-end;
  max-width: 80%;
  margin: 0;
  padding: 0.6em 0.9em;
  border-radius: 0.9em;
  background: #f4f4f5;
  color: #27272a;
}

.hero-app-aside {
  margin: 0;
  font-size: 0.9em;
  color: #a1a1aa;
}

.hero-app-aside--sources {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.hero-app-line {
  margin: 0;
  color: #3f3f46;
}

.hero-app-line strong {
  font-weight: 600;
  color: #111827;
}

.hero-app-run {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.9em;
  border: 1px solid #e5e7eb;
  border-radius: 0.75em;
  background: #fafafa;
}

.hero-app-run-title {
  margin: 0;
  font-weight: 600;
}

.hero-app-run-state {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  font-size: 0.92em;
  color: #15803d;
}

.hero-app-check {
  position: relative;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border-radius: 999px;
  background: #16a34a;
}

.hero-app-check::after {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.2em;
  width: 0.2em;
  height: 0.4em;
  border: solid #fff;
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}

.hero-app-run-bar {
  height: 0.45em;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.hero-app-run-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #16a34a;
}

.page-hero-visual--app.is-live .hero-app-run-bar span {
  width: 100%;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

.hero-app-run-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-size: 0.92em;
  color: #52525b;
}

.hero-app-run-steps li {
  display: flex;
  align-items: center;
  gap: 0.45em;
  opacity: 0;
  transform: translateY(0.3em);
}

.page-hero-visual--app.is-live .hero-app-run-steps li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease var(--step-delay, 0ms),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--step-delay, 0ms);
}

.hero-app-run-steps li:nth-child(1) {
  --step-delay: 900ms;
}

.hero-app-run-steps li:nth-child(2) {
  --step-delay: 1120ms;
}

.hero-app-run-log {
  align-self: flex-end;
  font-size: 0.9em;
  color: #71717a;
}

.hero-app-out-title {
  margin: 0.1em 0 0;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-app-out {
  margin: 0;
  color: #52525b;
}

.hero-app-out-head {
  margin: 0;
  font-weight: 600;
}

/* House / embed variants without the docked composer */
.hero-app--no-composer {
  aspect-ratio: 10 / 10.85;
}

.hero-app--no-composer .hero-app-body {
  padding-bottom: 1.1em;
}

/* Docked over the transcript, which fades out behind it */
.hero-app-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.8em 0.85em 0.6em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 2.4em);
}

.hero-app-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.45em 0.7em;
  border: 1px solid #e5e7eb;
  border-radius: 0.7em 0.7em 0 0;
  background: #fafafa;
  font-size: 0.85em;
  color: #52525b;
}

.hero-app-composer-head em {
  font-style: normal;
  color: #a1a1aa;
}

.hero-app-composer-field {
  padding: 0.6em 0.7em 0.5em;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 0.7em 0.7em;
  background: #fff;
  box-shadow: 0 12px 22px -18px rgba(9, 9, 11, 0.45);
}

.hero-app-composer-field > p {
  margin: 0 0 0.85em;
  color: #a1a1aa;
}

.hero-app-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a1a1aa;
}

.hero-app-composer-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.hero-app-composer-right {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.9em;
}

.hero-app-composer-right em {
  font-style: normal;
}

.hero-app-composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 999px;
  background: #111827;
}

.hero-app-foot {
  margin: 0.55em 0 0;
  text-align: center;
  font-size: 0.8em;
  color: #c4c4cc;
}

/* —— Hero skills column ——
   Skills library hero: the published skills scrolling in a card over the
   plate, the same marquee the solutions pages use. */
.page-hero-visual--skills {
  width: clamp(18rem, 34%, 25rem);
  max-width: 25rem;
  /* The card animates itself, so the column stays put */
  opacity: 1;
  transform: none;
}

.hero-media--skills {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  container-type: inline-size;
}

.hero-skills {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 5 / 7;
  padding: 1.4cqw;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0.9em;
  background: #fff;
  box-shadow:
    0 30px 44px -28px rgba(9, 9, 11, 0.5),
    0 8px 16px -10px rgba(9, 9, 11, 0.12);
  opacity: 0;
  transform: translateY(1.4em) scale(0.985);
}

.page-hero-visual--skills.is-live .hero-skills {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease 0.12s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

/* The marquee fills the card rather than carrying its own fixed height */
.hero-skills .solutions-docs-marquee {
  height: 100%;
}

.hero-skills .solutions-docs-fade {
  height: 22%;
}

.hero-skills .solutions-docs-group {
  gap: 0.5em;
  padding-bottom: 0.5em;
}

/* Sized off the plate, so the pills scale with the hero instead of the page */
.hero-skills .solutions-skill-badge {
  gap: 0.5em;
  padding: 0.55em 1em 0.55em 0.8em;
  font-size: clamp(0.4375rem, 2.6cqw, 0.8125rem);
}

.hero-skills .solutions-skill-badge img {
  width: 1.1em;
  height: 1.1em;
}

@media (prefers-reduced-motion: reduce) {
  /* The card keeps its frame; only the scroll stops */
  .hero-skills .solutions-docs-marquee {
    height: 100%;
    max-height: none;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-plate,
  .hero-media-mesh,
  .hero-media-shot,
  .hero-panel,
  .hero-app,
  .hero-app-run-steps li,
  .hero-skills {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-media-mesh {
    transform: translate(-50%, -50%);
  }

  .hero-panel-meter span {
    width: var(--fill, 50%);
    transition: none;
  }

  .hero-app-run-bar span {
    width: 100%;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-visual--media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.page-hero-visual--mega.is-live {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease) 0.15s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.page-hero-visual--mega .mega-card-visual {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: transparent;
  border: none;
  margin: 0;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-visual--mega {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 720px) {
  .page-hero {
    height: auto;
    min-height: 50vh;
  }

  .page-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 7rem;
    padding-bottom: 2.25rem;
    gap: 1.75rem;
  }

  .page-hero--mesh {
    min-height: clamp(20rem, 48vh, 28rem);
  }

  .page-hero--mesh .page-hero-inner {
    align-items: center;
    text-align: center;
    padding-top: clamp(6.5rem, 18vw, 8rem);
    padding-bottom: 3rem;
    gap: 0;
  }

  .page-hero--mesh .page-hero-copy {
    align-items: center;
    text-align: center;
  }

  .page-hero-copy {
    max-width: none;
  }

  .page-hero-visual,
  .page-hero-visual--mega {
    width: min(160px, 42vw);
    max-width: 160px;
    align-self: flex-start;
  }

  /* Stacked under the copy the plate takes the column's full width */
  .page-hero-visual--media {
    width: 100%;
    max-width: 22rem;
  }

  /* Cards carry copy, so they claim more of the plate once it narrows */
  .page-hero-visual--panels {
    width: 100%;
    max-width: 24rem;
  }

  .page-hero-visual--panels .hero-panels {
    width: 86%;
  }

  /* Stacked under the copy the window claims nearly all of the plate */
  .page-hero-visual--app {
    width: 100%;
    max-width: 23rem;
  }

  .page-hero-visual--app .hero-app {
    width: 92%;
  }

  .page-hero-visual--skills {
    width: 100%;
    max-width: 23rem;
  }

  .page-hero-visual--skills .hero-skills {
    width: 88%;
  }

  .page-hero--foundation,
  .page-hero--work,
  .page-hero--skills,
  .page-hero--investment,
  .page-hero--compare,
  .page-hero--careers {
    min-height: 0;
  }

  .page-hero--foundation .page-hero-inner,
  .page-hero--work .page-hero-inner,
  .page-hero--skills .page-hero-inner,
  .page-hero--investment .page-hero-inner,
  .page-hero--compare .page-hero-inner,
  .page-hero--careers .page-hero-inner {
    min-height: 0;
  }

  .page-hero-visual--shot {
    width: 100%;
    max-width: none;
  }
}

/* Alternating feature rows */
.home-light > .section.section-feature {
  background: #fff !important;
  padding-top: 0;
  padding-bottom: 0;
  --section-pad-b: 0;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  padding: 0;
  min-height: clamp(22rem, 40vw, 30rem);
  box-sizing: border-box;
}

.feature-row--reverse .feature-row-copy {
  order: 2;
}

.feature-row--reverse .feature-row-media {
  order: 1;
}

.feature-row-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.85rem;
  max-width: 28rem;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  box-sizing: border-box;
}

.feature-row-icon {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

.feature-row-title {
  margin: 0;
  max-width: none;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--zinc-950);
}

.feature-row-desc {
  margin: 0 !important;
  max-width: none !important;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--zinc-500);
}

.feature-row .feature-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  color: #009689;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.feature-row .feature-learn .mega-arrow {
  color: currentColor;
  transition: transform 0.2s var(--ease);
}

.feature-row .feature-learn:hover {
  color: #007a6e;
}

.feature-row .feature-learn:hover .mega-arrow {
  transform: translateX(3px);
}

.feature-row-media {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  background: var(--zinc-50);
  border: none;
  border-left: 1px solid var(--zinc-200);
  overflow: hidden;
  /* Bleed through section padding to the outer edge */
  margin-right: calc(-1 * var(--section-pad-x, 2.5rem));
  width: calc(100% + var(--section-pad-x, 2.5rem));
}

.feature-row--reverse .feature-row-media {
  border-left: none;
  border-right: 1px solid var(--zinc-200);
  margin-right: 0;
  margin-left: calc(-1 * var(--section-pad-x, 2.5rem));
  width: calc(100% + var(--section-pad-x, 2.5rem));
}

.feature-row-media .mock-ui {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0;
  transform: none;
  box-shadow: none;
}

@media (max-width: 800px) {
  .page-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 8rem;
    gap: 2rem;
  }

  .page-hero--mesh .page-hero-inner {
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .page-hero--mesh .page-hero-copy {
    align-items: center;
    text-align: center;
  }

  .page-hero-copy {
    max-width: none;
  }

  .page-hero-visual,
  .page-hero-visual--mega {
    max-width: 180px;
    align-self: flex-start;
  }

  .page-hero-visual--media {
    width: 100%;
    max-width: 22rem;
  }

  .page-hero-visual--panels {
    width: 100%;
    max-width: 24rem;
  }

  .page-hero-visual--panels .hero-panels {
    width: 86%;
  }

  .page-hero--foundation,
  .page-hero--work,
  .page-hero--skills,
  .page-hero--investment,
  .page-hero--compare,
  .page-hero--careers {
    min-height: 0;
  }

  .page-hero--foundation .page-hero-inner,
  .page-hero--work .page-hero-inner,
  .page-hero--skills .page-hero-inner,
  .page-hero--investment .page-hero-inner,
  .page-hero--compare .page-hero-inner,
  .page-hero--careers .page-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: var(--hero-header) var(--gutter) var(--gutter);
  }

  .page-hero--foundation .page-hero-copy,
  .page-hero--work .page-hero-copy,
  .page-hero--skills .page-hero-copy,
  .page-hero--investment .page-hero-copy,
  .page-hero--compare .page-hero-copy,
  .page-hero--careers .page-hero-copy {
    padding: 3rem 0 1.5rem;
  }

  .page-hero-visual--shot {
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .page-hero--foundation .hero-media--shot,
  .page-hero--work .hero-media--shot,
  .page-hero--skills .hero-media--shot,
  .page-hero--investment .hero-media--shot,
  .page-hero--compare .hero-media--shot,
  .page-hero--careers .hero-media--shot {
    min-height: 22rem;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    border-right: none;
  }

  .page-hero--skills .hero-skills-chips {
    padding: 1.25rem 1rem;
    gap: 0.4rem;
    max-width: min(92%, 20rem);
  }

  .hero-compare-board {
    padding: 1.25rem 1rem;
  }

  .hero-compare-card {
    width: min(92%, 18rem);
  }

  .hero-compare-cell {
    min-height: 1.45rem;
  }

  .page-hero--compare .hero-media--shot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22rem;
  }

  .page-hero-visual:not(.page-hero-visual--media) img {
    max-width: 160px;
  }

  .feature-row,
  .feature-row--reverse {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    min-height: 0;
  }

  .feature-row--reverse .feature-row-copy,
  .feature-row--reverse .feature-row-media {
    order: 0;
  }

  .feature-row-copy {
    max-width: none;
    padding: 2.5rem 0 1.5rem;
  }

  .feature-row-media {
    min-height: 28rem;
    height: auto;
    aspect-ratio: 3 / 4;
    order: -1;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    border-radius: 16px;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--zinc-200);
    overflow: hidden;
  }

  .feature-row--reverse .feature-row-media {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    border-right: none;
  }
}

/* —— Skills library —— */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-light > .section.section-skills-library {
  background: #fff !important;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.skills-library {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
}

.skills-rail {
  position: sticky;
  top: 5.5rem;
  padding-top: 0.25rem;
}

.skills-rail-heading {
  margin: 0 0 0.85rem;
  max-width: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.skills-filters {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.skills-filter {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--zinc-500);
  padding: 0.55rem 0.7rem;
  margin: 0;
  border-radius: 8px;
  cursor: pointer;
  transition:
    color 0.15s var(--ease),
    background 0.15s var(--ease);
}

.skills-filter:hover {
  color: var(--zinc-950);
  background: var(--zinc-100);
}

.skills-filter.is-active {
  color: var(--zinc-950);
  background: var(--zinc-100);
  font-weight: 600;
}

.skills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.skills-count {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.skills-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: min(100%, 16rem);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
}

.skills-search img {
  opacity: 0.45;
  flex-shrink: 0;
}

.skills-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--zinc-950);
}

.skills-search input::placeholder {
  color: var(--zinc-400);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--zinc-200);
  border-left: 1px solid var(--zinc-200);
}

.skill-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  min-height: 12rem;
  padding: 1.5rem 1.35rem 1.4rem;
  box-sizing: border-box;
  border: none;
  border-right: 1px solid var(--zinc-200);
  border-bottom: 1px solid var(--zinc-200);
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.skill-card:hover,
.skill-card:focus-visible {
  background-color: var(--zinc-50);
  outline: none;
}

.skill-card:hover .skill-card-action,
.skill-card:focus-visible .skill-card-action {
  color: #007a6e;
}

.skill-card:hover .skill-card-action .mega-arrow,
.skill-card:focus-visible .skill-card-action .mega-arrow {
  transform: translateX(3px);
}

.skill-card-category {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.skill-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--zinc-950);
}

.skill-card-blurb {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--zinc-500);
}

.skill-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #009689;
  transition: color 0.2s var(--ease);
}

.skill-card-action .mega-arrow {
  transition: transform 0.2s var(--ease);
}

.skill-card--request {
  cursor: default;
}

.skill-card--request:hover,
.skill-card--request:focus-within {
  background-color: var(--zinc-50);
}

.skill-card--request .btn-secondary {
  margin-top: 0.35rem;
  background: transparent;
  color: var(--zinc-950);
  border-color: var(--zinc-300);
}

.skill-card--request .btn-secondary:hover {
  background: #fff;
  color: var(--zinc-950);
  border-color: var(--zinc-400);
  transform: none;
}

.skills-empty {
  margin: 2rem 0 0 !important;
  max-width: none !important;
  font-size: 0.9375rem;
  color: var(--zinc-500);
}

/* Skill detail modal */
body.skill-modal-open {
  overflow: hidden;
}

.skill-modal[hidden] {
  display: none !important;
}

.skill-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.skill-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(4px);
}

.skill-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  max-height: min(90vh, 40rem);
  overflow: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--zinc-200);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(9, 9, 11, 0.28);
  box-sizing: border-box;
}

.skill-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--zinc-500);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.15s var(--ease),
    background 0.15s var(--ease);
}

.skill-modal-close:hover {
  color: var(--zinc-950);
  background: var(--zinc-100);
}

.skill-modal-category {
  margin: 0 0 0.5rem !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.skill-modal-title {
  margin: 0 0 0.75rem;
  max-width: none;
  padding-right: 2rem;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--zinc-950);
}

.skill-modal-desc {
  margin: 0 0 1.5rem !important;
  max-width: none !important;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--zinc-500);
}

.skill-modal-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.skill-modal-part {
  padding: 0.9rem 1rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: var(--zinc-50);
}

.skill-modal-part h3 {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.skill-modal-part p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--zinc-700);
}

.skill-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.15rem;
  border-top: 1px solid var(--zinc-200);
}

.skill-modal-runs {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.8125rem;
  color: var(--zinc-500);
}

.skill-modal-footer .btn {
  background: var(--zinc-950);
  color: #fff;
}

.skill-modal-footer .btn:hover {
  background: var(--zinc-800);
  color: #fff;
}

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

@media (max-width: 800px) {
  .skills-library {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .skills-rail {
    position: static;
  }

  .skills-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .skills-filter {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--zinc-200);
    border-radius: 999px;
    font-size: 0.8125rem;
  }

  .skills-filter.is-active {
    border-color: var(--zinc-950);
    background: var(--zinc-950);
    color: #fff;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .skill-modal-parts {
    grid-template-columns: 1fr;
  }
}

/* —— Solutions pages —— */
.home-light > .section.section-solutions-roles {
  background: #fff !important;
  --section-pad-b: 0;
  --house-pad-x: clamp(2.5rem, 7.4vw, 6.1875rem);
  padding-top: 4rem;
  padding-bottom: 0;
}

/* Home: line the panel copy up with the section title and center it
   in the stage. Hidden panels share the same grid cell, so without
   stretching + flex the shorter copy sits at the top of the tallest tab. */
/* The roles plate is full-bleed, so the section ends flush with the visual. */
.is-home .home-light > .section.section-solutions-roles {
  --house-pad-x: var(--section-pad-x);
  --section-pad-b: 0;
  padding-bottom: 0;
}

.roles-rail {
  display: grid;
  grid-template-columns: minmax(13.5rem, 17.5rem) minmax(0, 1fr);
  gap: 2.5rem clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.roles-rail-nav {
  position: sticky;
  top: 6.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.35rem;
}

.roles-rail-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 0;
  color: var(--zinc-400);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.roles-rail-link:hover {
  color: var(--zinc-700);
}

.roles-rail-link.is-active {
  color: var(--zinc-950);
  font-weight: 600;
}

.roles-rail-chevron {
  color: inherit;
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.55;
}

.roles-rail-link.is-active .roles-rail-chevron {
  opacity: 1;
}

.roles-rail-stream {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 7vw, 5.5rem);
  min-width: 0;
}

.roles-rail-block {
  scroll-margin-top: 6.25rem;
}

.roles-rail-visual {
  overflow: hidden;
  border-radius: 0;
  background: var(--zinc-100);
  aspect-ratio: 16 / 10;
}

.roles-rail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roles-rail-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
}

.roles-rail-text {
  min-width: 0;
  max-width: none;
  width: 100%;
}

.roles-rail-text h3 {
  margin: 0 0 0.55rem;
  max-width: none;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--zinc-950);
}

.roles-rail-text p {
  margin: 0;
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--zinc-500);
}

.roles-rail-text .roles-rail-role {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--zinc-400);
}

@media (max-width: 900px) {
  .roles-rail {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .roles-rail-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    padding-top: 0;
  }

  .roles-rail-copy {
    flex-direction: column;
    align-items: flex-start;
  }
}

.is-home .section-solutions-roles .roles-stage-copy {
  align-content: stretch;
  align-items: stretch;
}

.is-home .section-solutions-roles .roles-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

.home-light > .section.section-pricing {
  background: #fff !important;
  --section-pad-b: 0;
  padding-top: 4rem;
  padding-bottom: 0;
}

.home-light > .section.section-solutions-chips,
.home-light > .section.section-solutions-docs,
.home-light > .section.section-solutions-systems,
.home-light > .section.section-solutions-proof,
.home-light > .section.section-compare {
  background: #fff !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.home-light > .section.section-compare-diy {
  --section-pad-b: 0;
  padding-bottom: 0;
}

.solutions-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.solutions-role-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solutions-role-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.35rem 1.35rem 1.4rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.solutions-role-label {
  margin: 0 !important;
  max-width: none !important;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: var(--zinc-50);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-700);
  line-height: 1.2;
  white-space: nowrap;
}

.solutions-role-card h3 {
  margin: 0;
  max-width: none;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--zinc-950);
}

.solutions-role-card > p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zinc-500);
}

.solutions-role-changes {
  margin-top: auto !important;
  padding-top: 1.1rem;
  padding-bottom: 0.15rem;
  border-top: 1px solid var(--zinc-200);
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: var(--zinc-600) !important;
}

.solutions-role-changes strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

/* Roles switcher — pill tabs + 50/50 mesh stage */
.section-solutions-roles .feature-block {
  margin-top: 0;
}

.section-solutions-roles .feature-block-head {
  margin-bottom: 2.25rem;
}

/* Home: full-bleed rule under the title, same as the house header. */
.is-home .section-solutions-roles .feature-block-head {
  width: calc(100% + 2 * var(--section-pad-x));
  max-width: none;
  margin-left: calc(-1 * var(--section-pad-x));
  margin-right: calc(-1 * var(--section-pad-x));
  margin-bottom: 0;
  padding: 0 var(--section-pad-x) 2.5rem;
  border-bottom: 1px solid var(--zinc-200);
}

.is-home .section-solutions-roles .roles-grid-shell {
  /* Definite length (not %) so the overflow row cannot collapse.
     Cap at the section max-width so 2.5 cards fit in the column. */
  --roles-card-w: calc(
    (min(100vw, calc(var(--max) + 240px)) - var(--section-pad-x) - 2.5rem) /
      2.5
  );
  position: relative;
  padding-bottom: 4rem;
}

.is-home .section-solutions-roles .roles-grid-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 1.25rem 0 0;
}

.is-home .section-solutions-roles .roles-grid-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  color: var(--zinc-950);
  cursor: pointer;
  transition:
    opacity 0.2s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.is-home .section-solutions-roles .roles-grid-arrow svg {
  width: 1.05rem;
  height: 1.05rem;
}

.is-home .section-solutions-roles .roles-grid-arrow:hover {
  border-color: var(--zinc-950);
  background: var(--zinc-950);
  color: #fff;
}

.is-home .section-solutions-roles .roles-grid-arrow:disabled,
.is-home .section-solutions-roles .roles-grid-arrow.is-muted {
  opacity: 0.28;
  cursor: default;
  border-color: var(--zinc-200);
  background: var(--zinc-100);
  color: var(--zinc-400);
}

.is-home .section-solutions-roles .roles-grid-arrow:disabled:hover,
.is-home .section-solutions-roles .roles-grid-arrow.is-muted:hover {
  border-color: var(--zinc-200);
  background: var(--zinc-100);
  color: var(--zinc-400);
}

.is-home .section-solutions-roles .roles-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
  margin-left: calc(-1 * var(--section-pad-x));
  margin-right: calc(-1 * var(--section-pad-x));
  padding: 1.25rem var(--section-pad-x) 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--section-pad-x);
  scrollbar-width: none;
}

.is-home .section-solutions-roles .roles-grid::-webkit-scrollbar {
  display: none;
}

.roles-grid-card {
  box-sizing: border-box;
  flex: 0 0 var(--roles-card-w);
  width: var(--roles-card-w);
  min-width: var(--roles-card-w);
  max-width: none;
  scroll-snap-align: start;
}

.roles-grid-visual {
  position: relative;
  overflow: hidden;
  background: var(--zinc-100);
  aspect-ratio: 4 / 3;
  container-type: inline-size;
}

.roles-grid-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12);
}

.roles-grid-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.18;
  pointer-events: none;
}

/* Product mock over the mesh — same prompt pill and reply card as the house
   agents panel, scaled off the tile width so it holds at every breakpoint.
   Two scenes share the plate: the sources + agent at rest, then the run. */
.roles-grid-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: clamp(0.5rem, 2.2cqw, 0.875rem);
  line-height: 1.5;
  color: #0a0a0a;
}

.roles-grid-intro,
.roles-grid-flow {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 5.5%;
  box-sizing: border-box;
}

.roles-grid-flow {
  flex-direction: column;
  justify-content: center;
  gap: 0.9em;
}

/* Rest state — source documents fanned at the bottom, overflowing the plate.
   The agent drops in above them, then both gather into the run. */
.roles-grid-intro {
  align-items: center;
  transition:
    opacity 0.45s ease,
    filter 0.45s ease,
    transform 0.55s var(--ease);
}

.roles-grid-intro.is-out {
  opacity: 0;
  filter: blur(9px);
  transform: scale(0.97);
  pointer-events: none;
}

/* Fanned pile of source documents. Middle sheet is straight; the sides
   rotate ±15°. They sit low so the stack overflows the plate. */
.roles-grid-stack {
  position: absolute;
  inset: 0;
}

.roles-grid-doc {
  --spread: 0cqi;
  position: absolute;
  top: 78%;
  left: 50%;
  z-index: var(--z);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  height: 64%;
  aspect-ratio: 3 / 4;
  padding: 0.9em;
  box-sizing: border-box;
  border-radius: 0.55em;
  background: #fff;
  box-shadow: 0 10px 22px -12px rgba(9, 9, 11, 0.45);
  /* Start below the plate so they can rise in one at a time. */
  opacity: 0;
  filter: blur(8px);
  transform: translate(calc(-50% + var(--spread)), 12%) rotate(var(--r, 0deg));
  transition:
    transform 0.55s var(--ease) var(--fan-delay, 0ms),
    opacity 0.45s ease var(--fan-delay, 0ms),
    filter 0.45s ease var(--fan-delay, 0ms);
}

.roles-grid-doc:nth-child(1) {
  --spread: -16cqi;
  --fan-delay: 0ms;
}

.roles-grid-doc:nth-child(2) {
  --spread: 0cqi;
  --fan-delay: 160ms;
}

.roles-grid-doc:nth-child(3) {
  --spread: 16cqi;
  --fan-delay: 320ms;
}

.roles-grid-intro.is-fanned .roles-grid-doc {
  opacity: 1;
  filter: none;
  transform: translate(calc(-50% + var(--spread)), -38%) rotate(var(--r, 0deg));
}

/* Fan drops and blurs out as the agent travels to center. */
.roles-grid-intro.is-gathering .roles-grid-doc {
  opacity: 0;
  filter: blur(10px);
  transform: translate(calc(-50% + var(--spread)), 28%) rotate(var(--r, 0deg));
  transition:
    transform 0.7s var(--ease),
    opacity 0.5s ease,
    filter 0.5s ease;
}

.roles-grid-intro.is-reset .roles-grid-doc,
.roles-grid-intro.is-reset .roles-grid-agent {
  transition: none;
}

.roles-grid-doc img {
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
}

.roles-grid-doc strong {
  font-size: 0.9375em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

/* Skeleton body copy — the sheet reads as a document without inventing text. */
.roles-grid-skel {
  display: block;
  width: var(--w, 100%);
  height: 0.34em;
  border-radius: 999px;
  background: var(--zinc-200);
}

.roles-grid-skel:first-of-type {
  margin-top: 0.15em;
}

.roles-grid-doc {
  overflow: hidden;
}

.roles-grid-cover {
  display: block;
  flex: 1 1 auto;
  min-height: 2.4em;
  margin-top: 0.15em;
  border-radius: 0.3em;
  background: var(--zinc-200);
}

.roles-grid-bars,
.roles-grid-cal,
.roles-grid-crm,
.roles-grid-bubbles,
.roles-grid-dash {
  flex: 1 1 auto;
  min-height: 0;
}

.roles-grid-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.42em;
  margin: 0.15em 0 0;
  padding: 0;
  list-style: none;
}

.roles-grid-bars li {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}

.roles-grid-bars .roles-grid-skel {
  margin-top: 0;
}

.roles-grid-bar {
  display: block;
  width: var(--w, 100%);
  height: 0.34em;
  border-radius: 999px;
  background: var(--zinc-200);
}

.roles-grid-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.3em -0.9em -0.9em;
  border-top: 1px solid var(--zinc-200);
  background: #fff;
}

.roles-grid-table i {
  min-height: 0.95em;
  border-right: 1px solid var(--zinc-200);
  border-bottom: 1px solid var(--zinc-200);
}

.roles-grid-table i.is-head {
  background: var(--zinc-100);
}

.roles-grid-table i::after {
  content: "";
  display: block;
  width: 68%;
  height: 0.22em;
  margin: 0.36em 0.28em;
  border-radius: 999px;
  background: var(--zinc-200);
}

.roles-grid-table i.is-head::after {
  width: 48%;
  background: var(--zinc-300);
}

.roles-grid-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0.22em;
  margin-top: 0.15em;
}

.roles-grid-cal i {
  min-height: 0;
  border-radius: 0.18em;
  background: var(--zinc-200);
}

.roles-grid-cal i.is-on {
  background: var(--zinc-400);
}

.roles-grid-crm {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4em;
  margin: 0.15em 0 0;
  padding: 0;
  list-style: none;
}

.roles-grid-crm li {
  display: grid;
  grid-template-columns: 0.9em minmax(0, 1fr);
  align-items: center;
  gap: 0.35em;
}

.roles-grid-av {
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--zinc-200);
}

.roles-grid-av--sq {
  border-radius: 0.18em;
}

.roles-grid-crm .roles-grid-skel {
  margin-top: 0;
}

.roles-grid-bubbles {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4em;
  margin-top: 0.15em;
}

.roles-grid-bubbles i {
  height: 1.15em;
  border-radius: 0.7em;
  background: var(--zinc-200);
}

.roles-grid-bubbles i:nth-child(even) {
  align-self: flex-end;
}

.roles-grid-dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.85fr 1fr;
  gap: 0.3em;
  margin-top: 0.15em;
}

.roles-grid-dash i {
  min-height: 0;
  border-radius: 0.25em;
  background: var(--zinc-200);
}

.roles-grid-dash i:first-child {
  grid-column: 1 / -1;
}

.roles-grid-stage p.roles-grid-agent {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.7em;
  max-width: none;
  width: max-content;
  margin: 0;
  padding: 0.9em 1.45em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, -140%);
  transition:
    top 0.55s var(--ease),
    transform 0.55s var(--ease),
    opacity 0.45s ease,
    filter 0.45s ease;
}

/* Drops in from above the plate, parked over the fan. */
.roles-grid-intro.is-agent-in .roles-grid-agent {
  top: 22%;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
}

/* Then travels to center as the fan leaves. */
.roles-grid-intro.is-gathering .roles-grid-agent {
  top: 50%;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
}

.roles-grid-agent img {
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  filter: brightness(0) invert(1);
}

.roles-grid-flow .roles-grid-prompt {
  align-self: flex-end;
  max-width: 88%;
  margin: 0;
  padding: 0.75em 1.5em;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Caret rides the end of the streaming prompt so the tile reads as live. */
.roles-grid-prompt.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.075em;
  height: 1em;
  margin-left: 0.12em;
  vertical-align: -0.14em;
  background: currentColor;
  animation: roles-caret 0.9s steps(1, end) infinite;
}

@keyframes roles-caret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

.roles-grid-reply {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 1.25em;
  border-radius: 0.625em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.roles-grid-prompt,
.roles-grid-reply {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.6em) scale(0.98);
  transition:
    opacity 0.5s ease,
    filter 0.5s ease,
    transform 0.55s var(--ease);
}

.roles-grid-prompt.is-visible,
.roles-grid-reply.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

.roles-grid-run-head {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

.roles-grid-flow .roles-grid-run-status {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  max-width: none;
  font-size: 1em;
  color: #0a0a0a;
}

.roles-grid-run-state {
  font-weight: 400;
}

.roles-grid-reply.is-complete .roles-grid-run-state {
  font-weight: 700;
}

.roles-grid-run-bar {
  height: 0.375em;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.roles-grid-run-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #009689;
  transition: width 0.55s var(--ease);
}

.roles-grid-steps {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-grid-steps li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 1em;
  color: #a1a1aa;
  transition: color 0.3s ease;
}

.roles-grid-steps li.is-active,
.roles-grid-steps li.is-done {
  color: #0a0a0a;
}

.roles-grid-icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.875em;
  height: 0.875em;
}

.roles-grid-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1.5px solid #d4d4d8;
  border-radius: 999px;
}

.roles-grid-icon.is-active::before,
.roles-grid-icon.is-done::before {
  display: none;
}

.roles-grid-spinner {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 999px;
  border: 1.5px solid #d4d4d8;
  border-top-color: #009689;
  animation: agents-spin 0.7s linear infinite;
}

.roles-grid-icon.is-active .roles-grid-spinner {
  display: block;
}

.roles-grid-check {
  display: none;
  width: 100%;
  height: 100%;
}

.roles-grid-icon.is-done .roles-grid-check {
  display: block;
}

/* Answer expands the card instead of popping it to a new height. */
.roles-grid-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.55s var(--ease),
    opacity 0.45s ease;
}

.roles-grid-answer.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
}

.roles-grid-answer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  min-height: 0;
  overflow: hidden;
}

.roles-grid-reply-title {
  margin: 0;
  max-width: none;
  font-family: inherit;
  font-size: 1.0625em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

.roles-grid-flow .roles-grid-reply-copy {
  margin: 0;
  max-width: none;
  font-size: 1em;
  line-height: 1.45;
  color: #0a0a0a;
}

.roles-grid-file {
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.75em;
  border: 1px solid #d4d4d8;
  border-radius: 0.625em;
}

.roles-grid-file img {
  display: block;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
}

.roles-grid-file-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  min-width: 0;
}

.roles-grid-file-meta strong {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
  color: #0a0a0a;
}

.roles-grid-file-meta span {
  font-size: 0.875em;
  color: #52525b;
}

@media (prefers-reduced-motion: reduce) {
  .roles-grid-intro,
  .roles-grid-doc,
  .roles-grid-agent,
  .roles-grid-prompt,
  .roles-grid-reply,
  .roles-grid-answer,
  .roles-grid-run-bar i,
  .roles-grid-steps li {
    transition: none;
  }

  .roles-grid-prompt.is-typing::after,
  .roles-grid-spinner {
    animation: none;
  }
}

.roles-grid-copy {
  margin-top: 1.25rem;
}

.roles-grid-copy h3 {
  margin: 0 0 0.5rem;
  max-width: none;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--zinc-950);
}

.roles-grid-copy p {
  margin: 0;
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--zinc-500);
}

@media (max-width: 900px) {
  .is-home .section-solutions-roles .roles-grid-nav {
    display: none;
  }

  .is-home .section-solutions-roles .roles-grid-shell,
  .roles-grid-card {
    --roles-card-w: calc(100vw - 4.75rem);
  }

  .roles-grid-card {
    /* Same width as the house rail cards: one card plus a slice of the next. */
    flex: 0 0 var(--roles-card-w);
    width: var(--roles-card-w);
  }

  .roles-grid-visual {
    aspect-ratio: 3 / 4;
    min-height: 24rem;
    border-radius: 16px;
  }

  .roles-grid-stage {
    font-size: 0.625rem;
  }

  .roles-grid-flow {
    font-size: 0.75rem;
  }

  .roles-grid-doc {
    top: 80%;
    height: 56%;
    transform: translate(calc(-50% + var(--spread)), 12%) rotate(var(--r, 0deg));
  }

  .roles-grid-intro.is-fanned .roles-grid-doc {
    transform: translate(calc(-50% + var(--spread)), -36%) rotate(var(--r, 0deg));
  }

  .roles-grid-intro.is-gathering .roles-grid-doc {
    transform: translate(calc(-50% + var(--spread)), 30%) rotate(var(--r, 0deg));
  }

  .roles-grid-stage p.roles-grid-agent {
    transform: translate(-50%, -140%);
  }

  .roles-grid-intro.is-agent-in .roles-grid-agent {
    top: 20%;
    transform: translate(-50%, -50%);
  }

  .roles-grid-intro.is-gathering .roles-grid-agent {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.roles-switch {
  width: calc(100% + 2 * var(--section-pad-x, 0px));
  max-width: none;
  margin-left: calc(-1 * var(--section-pad-x, 0px));
  margin-right: calc(-1 * var(--section-pad-x, 0px));
  border-top: 1px solid var(--zinc-200);
  background: #fff;
}

.roles-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1.35rem var(--section-pad-x, 1.5rem);
  border-bottom: 1px solid var(--zinc-200);
}

.roles-tab {
  appearance: none;
  margin: 0;
  padding: 0.85rem 1.45rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  color: var(--zinc-600);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.roles-tab:hover {
  border-color: var(--zinc-300);
  color: var(--zinc-950);
}

.roles-tab.is-active {
  background: var(--zinc-100);
  border-color: var(--zinc-100);
  color: var(--zinc-950);
  cursor: default;
}

.roles-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.roles-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(26rem, 42vw, 34rem);
}

.roles-stage-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: clamp(2.5rem, 4.5vw, 4rem)
    var(--house-pad-x, clamp(2rem, 4vw, 3.5rem));
  background: #fff;
  border-right: 1px solid var(--zinc-200);
}

.roles-stage-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #f3dce8;
}

.roles-stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 45% 50%;
}

.roles-stage-bg[hidden] {
  display: none;
}

.roles-viz {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  pointer-events: none;
}

.roles-viz[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}

.roles-viz:not([hidden]) {
  z-index: 2;
}

.roles-switch.is-rows-in .roles-viz:not([hidden]) .roles-viz-reply,
.roles-switch.is-rows-in .roles-viz:not([hidden]) .roles-viz-card {
  animation: roles-panel-in 0.45s var(--ease);
}

.roles-viz-card {
  width: min(100%, 20.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow:
    0 24px 40px -28px rgba(9, 9, 11, 0.45),
    0 8px 16px -12px rgba(9, 9, 11, 0.16);
}

.roles-viz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #b45309;
}

.roles-viz-head em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--zinc-950);
}

.roles-viz-bar {
  height: 6px;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.roles-viz-bar i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.roles-viz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.roles-viz-logos {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
}

.roles-viz-logos img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.roles-viz-logos span {
  font-size: 0.625rem;
  font-weight: 650;
  color: var(--zinc-500);
  padding: 0 0.12rem;
}

.roles-viz-flag {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
}

.roles-viz-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-viz-depts li {
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: var(--zinc-50);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zinc-600);
}

.roles-viz-run {
  gap: 0.75rem;
}

.roles-viz-run-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.roles-viz-run-head h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.roles-viz-run-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--zinc-950);
}

.roles-viz-run-state img {
  width: 12px;
  height: 12px;
}

.roles-viz-run-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}

.roles-viz-run-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.roles-viz-run-steps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-viz-run-steps li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.roles-viz-run-steps img {
  width: 12px;
  height: 12px;
}

.roles-viz-skill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--zinc-200);
}

.roles-viz-skill > span:first-child {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.roles-viz-skill .solutions-skill-badge {
  padding: 0.38rem 0.7rem 0.38rem 0.55rem;
  font-size: 0.75rem;
}

.roles-viz-file {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--zinc-200);
  border-radius: 0.6rem;
  background: var(--zinc-50);
}

.roles-viz-file img {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.roles-viz-file strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.roles-viz-file span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.roles-viz-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  width: min(100%, 22rem);
}

.roles-viz .roles-viz-prompt {
  position: relative;
  isolation: isolate;
  margin: 0;
  max-width: 92%;
  padding: 0.7em 1.25em;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  transform: translateZ(0);
}

.roles-viz .roles-viz-prompt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  transform: translateZ(0);
}

.roles-viz-reply {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem 1.1rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow:
    0 24px 40px -28px rgba(9, 9, 11, 0.45),
    0 8px 16px -12px rgba(9, 9, 11, 0.16);
}

.roles-viz-reply > p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--zinc-700);
}

.roles-viz-sources {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--zinc-200);
  list-style: none;
}

.roles-viz-sources li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
}

.roles-viz-sources img,
.roles-viz-source-ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.roles-viz-source-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zinc-400);
}

.roles-viz-sources strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.roles-viz-sources span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-500);
}

.roles-panel {
  grid-area: 1 / 1;
  max-width: 32rem;
}

.roles-panel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.roles-panel h3 {
  margin: 0 0 0.9rem;
  max-width: 16ch;
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--zinc-950);
}

.roles-panel p {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.55;
  color: var(--zinc-500);
}

.roles-panel-fix {
  display: block;
  margin-top: 0.75em;
  font-weight: 600;
  color: var(--zinc-950);
}

.roles-switch.is-rows-in .roles-panel:not([hidden]) {
  animation: roles-panel-in 0.45s var(--ease);
}

@keyframes roles-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roles-switch.is-rows-in .roles-panel:not([hidden]),
  .roles-switch.is-rows-in .roles-viz:not([hidden]) .roles-viz-reply,
  .roles-switch.is-rows-in .roles-viz:not([hidden]) .roles-viz-card {
    animation: none;
  }
}

@media (max-width: 900px) {
  .roles-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 1.1rem var(--section-pad-x, 1.5rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .roles-tabs::-webkit-scrollbar {
    display: none;
  }

  .roles-tab {
    flex: 0 0 auto;
    padding: 0.7rem 1.1rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .roles-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0 var(--section-pad-x, 1.5rem) 1.5rem;
  }

  .roles-stage-copy {
    padding: 1.75rem 0 2.25rem;
    border-right: none;
    border-bottom: 1px solid var(--zinc-200);
  }

  .roles-stage-media {
    min-height: 24rem;
    border-radius: 12px;
  }

  .roles-panel h3 {
    max-width: none;
  }
}

.solutions-plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.solutions-plain-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--zinc-500);
}

.solutions-plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zinc-300);
}

.solutions-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

/* Documents — copy left, looping skill badges right */
.solutions-docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.solutions-docs-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 28rem;
}

.solutions-docs-copy .product-title {
  margin: 0;
}

.solutions-docs-copy p {
  margin: 0;
  max-width: none;
  color: var(--zinc-500);
  font-size: 1rem;
  line-height: 1.55;
}

.solutions-docs-copy .feature-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: #009689;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.solutions-docs-copy .feature-learn .mega-arrow {
  transition: transform 0.2s ease;
}

.solutions-docs-copy .feature-learn:hover {
  color: #007a6e;
}

.solutions-docs-copy .feature-learn:hover .mega-arrow {
  transform: translateX(3px);
}

.solutions-docs-marquee {
  position: relative;
  height: 22rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.solutions-docs-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 4.5rem;
  z-index: 1;
  pointer-events: none;
}

.solutions-docs-fade--top {
  top: 0;
  background: linear-gradient(to bottom, #fff 15%, rgba(255, 255, 255, 0));
}

.solutions-docs-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, #fff 15%, rgba(255, 255, 255, 0));
}

.solutions-docs-track {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
  animation: solutions-docs-scroll 16s linear infinite;
  will-change: transform;
}

.solutions-docs-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0 0 0.55rem;
  margin: 0;
  box-sizing: border-box;
}

.solutions-skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  border-radius: 999px;
  background: #f4f4f5;
  color: var(--zinc-950);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
}

.solutions-skill-badge img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

@keyframes solutions-docs-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-1 * var(--docs-scroll-distance, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-docs-track {
    animation: none;
  }

  .solutions-docs-group[aria-hidden="true"] {
    display: none;
  }

  .solutions-docs-marquee {
    height: auto;
    max-height: 22rem;
    overflow: auto;
  }
}

@media (max-width: 800px) {
  .solutions-docs-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .solutions-docs-marquee {
    height: 16rem;
  }
}

/* Systems — Simon hub connecting to destinations */
.solutions-systems-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  text-align: center;
}

.solutions-systems-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 36rem;
}

.solutions-systems-copy .product-title {
  margin: 0;
}

.solutions-systems-copy p {
  margin: 0;
  max-width: none;
  color: var(--zinc-500);
  font-size: 1rem;
  line-height: 1.55;
}

.solutions-systems-map {
  width: 100%;
  max-width: 40rem;
  min-width: 0;
  min-height: 16rem;
}

.solutions-systems-graph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  min-height: 16rem;
  padding: 0.5rem 0.25rem;
  box-sizing: border-box;
}

.solutions-systems-graph .simon-app-docs-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.solutions-systems-hub,
.solutions-systems-targets {
  position: relative;
  z-index: 1;
}

.solutions-systems-hub {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem 0.55rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: #f4f4f5;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
  line-height: 1.2;
  cursor: default;
}

.solutions-systems-hub img {
  width: 14px;
  height: 14px;
  display: block;
}

.solutions-systems-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  max-width: 100%;
}

.solutions-systems-target {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 999px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
  line-height: 1.2;
  cursor: default;
  white-space: nowrap;
}

.solutions-systems-target img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

.solutions-systems-target .solutions-chip-ico {
  width: 14px;
  height: 14px;
  color: var(--zinc-500);
}

.solutions-systems-target .solutions-chip-ico--xlsx {
  width: 14px;
  height: 14px;
  font-size: 0.4375rem;
  color: #fff;
}

.solutions-systems-target .solutions-chip-icos img {
  width: 12px;
  height: 12px;
}

.solutions-systems-map.is-docs-hover .solutions-systems-hub.is-focus,
.solutions-systems-map.is-docs-hover .solutions-systems-target.is-focus {
  border-color: var(--zinc-300);
  background: #fafafa;
}

.solutions-systems-map.is-docs-hover .solutions-systems-hub.is-dimmed,
.solutions-systems-map.is-docs-hover .solutions-systems-target.is-dimmed {
  opacity: 0.35;
}

.solutions-systems-map .simon-app-docs-links path {
  opacity: 0;
}

.solutions-systems-map.is-rows-in .simon-app-docs-node {
  opacity: 1;
  transform: none;
}

.solutions-systems-map.is-rows-in:not(.is-settled) .simon-app-docs-node {
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

.solutions-systems-map.is-rows-in .simon-app-docs-links path {
  opacity: 1;
}

.solutions-systems-map.is-rows-in:not(.is-settled) .simon-app-docs-links path {
  transition: opacity 0.35s ease;
}

.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(1) {
  transition-delay: 0.35s;
}
.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(2) {
  transition-delay: 0.4s;
}
.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(3) {
  transition-delay: 0.45s;
}
.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(4) {
  transition-delay: 0.5s;
}
.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(5) {
  transition-delay: 0.55s;
}
.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(6) {
  transition-delay: 0.6s;
}
.solutions-systems-map.is-rows-in:not(.is-settled)
  .simon-app-docs-links
  path:nth-child(7) {
  transition-delay: 0.65s;
}

.solutions-systems-map.is-docs-hover .simon-app-docs-links path.is-dimmed {
  opacity: 0.08;
}

.solutions-systems-map.is-docs-hover .simon-app-docs-links path.is-focus {
  opacity: 1;
  stroke: var(--zinc-400);
}

@media (max-width: 800px) {
  .solutions-systems-layout {
    gap: 1.75rem;
  }

  .solutions-systems-graph {
    min-height: 14rem;
    gap: 2rem;
  }
}

.solutions-chip {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: var(--zinc-50);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--zinc-700);
  box-sizing: border-box;
}

.solutions-chip--icon {
  gap: 0.55rem;
}

.solutions-chip-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--zinc-500);
  object-fit: contain;
}

.solutions-chip-ico svg {
  display: block;
}

.solutions-chip-ico--xlsx {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #16a34a;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.solutions-chip-icos {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.solutions-chip-icos img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--zinc-200);
}

.solutions-chip-icos img + img {
  margin-left: -4px;
}

.capability-grid--pricing .capability-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.15rem;
  padding-top: 2rem;
  padding-bottom: 2.25rem;
}

.capability-grid--pricing .capability-title,
.capability-grid--pricing .pricing-card-lead,
.capability-grid--pricing .pricing-card-media,
.capability-grid--pricing .pricing-card-rule,
.capability-grid--pricing .pricing-card-model,
.capability-grid--pricing .pricing-card-list {
  grid-area: auto;
}

.pricing-card-title {
  margin: 0;
  max-width: none;
  font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--zinc-950);
}

.pricing-card-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
}

.pricing-card-desc {
  margin: 0 !important;
  max-width: none !important;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--zinc-600);
  white-space: nowrap;
}

.pricing-card-logos {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.pricing-card-logos img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.pricing-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  height: 17.5rem;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  display: block;
}

.pricing-card-media-mesh {
  position: absolute;
  left: 50%;
  top: -6.5rem;
  width: 140%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: blur(62px);
  pointer-events: none;
  user-select: none;
}

.pricing-card-media-shot {
  position: absolute;
  left: 50%;
  top: 2.75rem;
  width: 82%;
  height: auto;
  transform: translateX(-50%);
  border-radius: 5px;
  display: block;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.pricing-card-media--stack .pricing-card-media-shot--back {
  top: 3.25rem;
  left: calc(50% - 4rem);
  width: 74%;
  transform: translateX(-50%);
  box-shadow: none;
}

.pricing-card-media--stack .pricing-card-media-shot--front {
  top: 5.75rem;
  left: calc(50% + 3rem);
  width: 76%;
  transform: translateX(-50%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.1),
    0 57px 57px rgba(0, 0, 0, 0.09),
    0 129px 77px rgba(0, 0, 0, 0.05);
}

.pricing-card-rule {
  width: 100%;
  height: 0;
  margin-top: 0.15rem;
  border-top: 1px solid var(--zinc-200);
}

.pricing-card-model {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pricing-card-model-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--zinc-950);
}

.pricing-card-model-note {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--zinc-400);
}

.pricing-card-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pricing-card-list li {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--zinc-600);
}

.pricing-card-list li::marker {
  color: var(--zinc-600);
}

.compare-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: none;
  border-radius: 0;
  background: transparent;
}

.compare-table--light {
  margin: 0;
  font-size: 0.9375rem;
  width: 100%;
  border-collapse: collapse;
}

.compare-table--light th,
.compare-table--light td {
  border: 1px solid var(--zinc-200);
  padding: 0.95rem 1.1rem;
  color: var(--zinc-600);
  vertical-align: top;
}

.compare-table--light th:first-child,
.compare-table--light td:first-child {
  border-left: none;
}

.compare-table--light th:last-child,
.compare-table--light td:last-child {
  border-right: none;
}

.compare-table--light th {
  background: transparent;
  color: var(--zinc-400);
  font-weight: 600;
}

.compare-table--light td:first-child {
  font-weight: 600;
  color: var(--zinc-950);
  white-space: nowrap;
}

.compare-table--light td:last-child {
  color: var(--zinc-950);
  font-weight: 500;
}

.compare-table--light tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 900px) {
  .compare-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .compare-table--light {
    width: max-content;
    min-width: 100%;
  }

  .compare-table--light th,
  .compare-table--light td {
    white-space: nowrap;
  }
}

.compare-check {
  display: inline-block;
  width: 0.7rem;
  height: 0.75rem;
  margin-right: 0.45rem;
  vertical-align: 0.05em;
  background: none;
  border-radius: 0;
  position: relative;
}

.compare-check::after {
  content: "";
  position: absolute;
  left: 0.12rem;
  top: 0;
  width: 0.3rem;
  height: 0.55rem;
  border: solid #009689;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* DIY compare as capability subsections */
.capability-grid--compare .capability-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  padding-top: 2rem;
  padding-bottom: 2.25rem;
}

.capability-grid--compare .capability-top,
.capability-grid--compare .capability-title,
.capability-grid--compare .capability-desc,
.capability-grid--compare .solutions-plain-list {
  grid-area: auto;
}

.capability-grid--compare .capability-top {
  margin-bottom: 0;
  min-height: auto;
  padding-bottom: 0.15rem;
}

.capability-grid--compare .solutions-plain-list {
  margin-top: 0.25rem;
}

/* Origin case study — white split: title + teal link | quote */
.section.section-compare-quote,
.home-light > .section.section-compare-quote {
  background: #fff !important;
  padding-top: clamp(4.5rem, 8vw, 6.75rem);
  padding-bottom: clamp(4.5rem, 8vw, 6.75rem);
  overflow: hidden;
}

/* Dot vignette sits on ::after — .section::before is disabled site-wide. */
.section.section-compare-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(9, 9, 11, 0.1) 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: center;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    #000 0%,
    #000 24%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    #000 0%,
    #000 24%,
    transparent 72%
  );
}

.case-teaser {
  --case-teaser-gap: clamp(2.75rem, 5.5vw, 4.5rem);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--case-teaser-gap);
}

.case-teaser-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.15rem;
}

h2.case-teaser-title,
.home-light h2.case-teaser-title {
  max-width: none;
  margin: 0;
  color: var(--zinc-950);
  font-size: clamp(2.1rem, 3.6vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.case-teaser-kicker {
  display: block;
  color: var(--zinc-400);
  font-weight: 600;
}

.case-teaser-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--brand);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.case-teaser-link:hover,
.case-teaser-link:focus-visible {
  color: var(--brand-hover);
  text-decoration: none;
}

.case-teaser-link .mega-arrow {
  color: currentColor;
  transition: transform 0.2s var(--ease);
}

.case-teaser-link:hover .mega-arrow,
.case-teaser-link:focus-visible .mega-arrow {
  transform: translateX(3px);
}

.case-teaser-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.35rem, 2.4vw, 1.85rem);
  min-width: 0;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 1.5rem;
  background: var(--zinc-100);
}

.case-teaser-quote {
  margin: 0;
}

.case-teaser-quote blockquote {
  margin: 0;
  color: var(--zinc-950);
  font-family: var(--font-quote);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.28;
}

.case-teaser-attr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.case-teaser-attr img {
  flex: 0 0 auto;
  width: 2.625rem;
  height: 2.625rem;
}

.case-teaser-attr span {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.case-teaser-attr strong {
  color: var(--zinc-950);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}

.case-teaser-attr small {
  color: var(--zinc-500);
  font-size: 0.8rem;
  line-height: 1.3;
}

@media (max-width: 800px) {
  .case-teaser {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .case-teaser-copy {
    display: contents;
  }

  .case-teaser-title {
    order: 1;
  }

  h2.case-teaser-title,
  .home-light h2.case-teaser-title {
    font-size: clamp(1.85rem, 7.2vw, 2.25rem);
    white-space: nowrap;
  }

  .case-teaser-kicker {
    display: inline;
  }

  .case-teaser-body {
    order: 2;
    align-self: stretch;
    margin-top: 1.75rem;
  }

  .case-teaser-link {
    order: 3;
    margin-top: 1.5rem;
  }
}

@media (max-width: 900px) {
  .solutions-role-grid,
  .solutions-role-grid--two {
    grid-template-columns: 1fr;
  }

  .pricing-card-desc {
    white-space: normal;
  }

  .pricing-card-media {
    height: 15rem;
  }

  .pricing-card-media-shot {
    width: 88%;
    top: 2.4rem;
  }

  .pricing-card-media--stack .pricing-card-media-shot--back {
    left: 50%;
    top: 2.1rem;
    width: 80%;
  }

  .pricing-card-media--stack .pricing-card-media-shot--front {
    left: 58%;
    top: 4.5rem;
    width: 80%;
  }

  .solutions-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .solutions-chip-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Resources pages —— */
.home-light > .section.section-news,
.home-light > .section.section-trust-docs {
  background: #fff !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}

.news-filter {
  appearance: none;
  border: 1px solid var(--zinc-200);
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--zinc-500);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.15s var(--ease),
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.news-filter:hover {
  color: var(--zinc-950);
  border-color: var(--zinc-300);
}

.news-filter.is-active {
  color: #fff;
  background: var(--zinc-950);
  border-color: var(--zinc-950);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 12rem;
  padding: 1.25rem 1.25rem 1.15rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.news-card:hover {
  border-color: var(--zinc-300);
  background: var(--zinc-50);
}

.news-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.news-card-title {
  margin: 0;
  max-width: none;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--zinc-950);
}

.news-card-desc {
  flex: 1;
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--zinc-500);
}

.news-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #009689;
}

.news-card:hover .news-card-action .mega-arrow {
  transform: translateX(3px);
}

.news-card-action .mega-arrow {
  transition: transform 0.2s var(--ease);
}

.trust-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.trust-points--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-point {
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: var(--zinc-50);
}

.trust-point h3 {
  margin: 0 0 0.4rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.trust-point p {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--zinc-500);
}

.trust-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.trust-cert-card {
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
}

.trust-cert-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.trust-cert-status {
  margin: 0 0 0.75rem !important;
  max-width: none !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #009689;
}

.trust-cert-card > p:last-child {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zinc-500);
}

.btn-dark {
  background: var(--zinc-950);
  color: #fff;
  border-color: transparent;
}

.btn-dark:hover {
  background: var(--zinc-800);
  color: #fff;
}

.feature-block-head .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

@media (max-width: 900px) {
  .news-grid,
  .trust-points,
  .trust-points--two,
  .trust-cert-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Documentation hub —— */
.home-light > .section.section-docs {
  background: #fff !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.docs-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.docs-stack-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 1.35rem 1.35rem 1.25rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.docs-stack-label {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.docs-stack-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.docs-stack-card > p {
  margin: 0 !important;
  max-width: none !important;
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zinc-500);
}

.docs-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.docs-guide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 11.5rem;
  padding: 1.25rem 1.25rem 1.15rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.docs-guide-card:hover {
  border-color: var(--zinc-300);
  background: var(--zinc-50);
  color: inherit;
}

.docs-guide-eyebrow {
  margin: 0 !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.docs-guide-card h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}

.docs-guide-card > p {
  margin: 0 !important;
  max-width: none !important;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--zinc-500);
}

.docs-guide-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #009689;
}

.docs-guide-card:hover .docs-guide-action .mega-arrow {
  transform: translateX(3px);
}

.docs-guide-action .mega-arrow {
  transition: transform 0.2s var(--ease);
}

.docs-link-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.docs-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--zinc-200);
  border-radius: 12px;
  background: var(--zinc-50);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.docs-link-card:hover {
  border-color: var(--zinc-300);
  background: #fff;
  color: inherit;
}

.docs-link-card strong {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--zinc-950);
}

.docs-link-card span {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--zinc-500);
}

@media (max-width: 1000px) {
  .docs-link-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .docs-stack,
  .docs-guide-grid {
    grid-template-columns: 1fr;
  }

  .docs-link-row {
    grid-template-columns: 1fr;
  }
}

/* —— Company pages —— */
.home-light > .section.section-company,
.home-light > .section.section-contact {
  background: #fff !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.home-light > .section.section-company:has(.capability-grid) {
  --section-pad-b: 0;
  padding-bottom: 0;
}

.capability-grid--company {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-grid--company-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-grid--company .capability-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding-top: 2rem;
  padding-bottom: 2.25rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  background: transparent;
}

.capability-grid--company .capability-card:hover {
  background: transparent;
}

.capability-grid--company .capability-title,
.capability-grid--company .capability-desc {
  grid-area: auto;
}

.capability-grid--company .capability-title {
  margin: 0;
}

.company-viz {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 3.5rem;
  margin: 0 0 0.15rem;
  pointer-events: none;
  color: var(--zinc-500);
}

.company-viz-svg {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
}

.company-viz--context {
  height: 3.75rem;
  color: var(--zinc-600);
}

.company-viz-context {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.company-viz-ais {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.company-viz-ais img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.company-viz-breaks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  width: 2.75rem;
  flex-shrink: 0;
}

.company-viz-breaks span {
  position: relative;
  display: block;
  height: 1.5px;
  width: 100%;
  background: transparent;
}

.company-viz-breaks span::before,
.company-viz-breaks span::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1.5px;
  width: 38%;
  background: var(--conflict, #f87171);
  border-radius: 999px;
}

.company-viz-breaks span::before {
  left: 0;
}

.company-viz-breaks span::after {
  right: 0;
}

.company-viz-firm {
  display: grid;
  place-items: center;
  color: var(--zinc-700);
}

.company-viz-firm svg {
  display: block;
  width: 28px;
  height: 28px;
}

.company-viz--skills {
  height: auto;
  min-height: 3.5rem;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.company-viz--skills .solutions-skill-badge {
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem 0.4rem 0.55rem;
}

.company-viz--stack {
  height: 3.15rem;
  align-items: flex-end;
}

.company-viz-stack {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(45deg);
  margin-bottom: 0.25rem;
}

.company-viz-stack span {
  position: absolute;
  inset: 0;
  border-radius: 18%;
  background: #fff;
  border: 1px solid var(--zinc-300);
  box-sizing: border-box;
  transform: translateZ(calc(var(--i) * 6px));
}

.company-viz-stack span:first-child {
  border-color: var(--zinc-950);
}

.capability-grid--company .capability-card:nth-child(odd),
.capability-grid--company .capability-card:nth-child(even),
.capability-grid--company .capability-card:nth-child(2n) {
  border-left: none;
  border-right: 1px solid var(--zinc-200);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.capability-grid--company .capability-card:nth-child(3n + 1) {
  border-left: 1px solid var(--zinc-200);
}

.capability-grid--company .capability-card:nth-child(3n) {
  border-right: 1px solid var(--zinc-200);
}

.capability-grid--company .capability-card:nth-last-child(-n + 3) {
  border-bottom: none;
}

.capability-grid--company-two .capability-card:nth-child(odd),
.capability-grid--company-two .capability-card:nth-child(even),
.capability-grid--company-two .capability-card:nth-child(3n),
.capability-grid--company-two .capability-card:nth-child(3n + 1) {
  border-left: none;
  border-right: 1px solid var(--zinc-200);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  border-bottom: none;
}

.capability-grid--company-two .capability-card:nth-child(2n + 1) {
  border-left: 1px solid var(--zinc-200);
}

.capability-grid--company-two .capability-card:nth-child(2n) {
  border-right: 1px solid var(--zinc-200);
}

.capability-grid--company-two .capability-card:nth-last-child(-n + 2) {
  border-bottom: none;
}

@media (max-width: 800px) {
  .capability-grid--company,
  .capability-grid--company-two {
    grid-template-columns: 1fr;
  }

  .capability-grid--company .capability-card,
  .capability-grid--company-two .capability-card,
  .capability-grid--company .capability-card:nth-child(3n),
  .capability-grid--company .capability-card:nth-child(3n + 1),
  .capability-grid--company-two .capability-card:nth-child(odd),
  .capability-grid--company-two .capability-card:nth-child(even),
  .capability-grid--company-two .capability-card:nth-child(2n),
  .capability-grid--company-two .capability-card:nth-child(2n + 1),
  .capability-grid--company-two .capability-card:nth-child(3n),
  .capability-grid--company-two .capability-card:nth-child(3n + 1) {
    padding: 1.75rem;
    border-left: 1px solid var(--zinc-200);
    border-right: 1px solid var(--zinc-200);
    border-bottom: 1px solid var(--zinc-200);
  }

  .capability-grid--company .capability-card:last-child,
  .capability-grid--company-two .capability-card:last-child {
    border-bottom: none;
  }
}

.capability-grid--careers {
  grid-template-columns: 1fr;
}

.capability-grid--careers .capability-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 2rem 1.75rem 2.25rem;
  background: transparent;
  border-left: 1px solid var(--zinc-200);
  border-right: 1px solid var(--zinc-200);
  border-radius: 0;
  border-bottom: 1px solid var(--zinc-200);
}

.capability-grid--careers .capability-card:hover {
  background: transparent;
}

.capability-grid--careers .capability-card:nth-last-child(-n + 2),
.capability-grid--careers .capability-card:last-child {
  border-bottom: 1px solid var(--zinc-200);
}

.capability-grid--careers .capability-card:last-child {
  border-bottom: none;
}

.capability-grid--careers .capability-title,
.capability-grid--careers .capability-desc,
.capability-grid--careers .solutions-plain-list,
.capability-grid--careers .feature-learn {
  grid-area: auto;
}

.capability-grid--careers .capability-title {
  margin: 0;
}

.capability-grid--careers .capability-desc {
  max-width: 42rem;
}

.capability-grid--careers .solutions-plain-list {
  max-width: 40rem;
  margin: 0;
}

.capability-grid--careers .careers-apply {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #009689;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}

.capability-grid--careers .careers-apply:hover {
  color: #007a6e;
}

.capability-grid--careers .careers-apply .mega-arrow {
  color: currentColor;
  transition: transform 0.22s var(--ease);
}

.capability-grid--careers .careers-apply:hover .mega-arrow--out {
  transform: translate(3px, -3px);
}

.careers-role-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin: 0 0 0.35rem !important;
  max-width: none !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact-aside .product-title {
  margin-bottom: 0.75rem;
}

.contact-aside > p {
  margin: 0 0 1.5rem !important;
  max-width: 28rem !important;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--zinc-500);
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.form-grid--light {
  max-width: none;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--zinc-200);
  border-radius: 14px;
  background: var(--zinc-50);
  box-sizing: border-box;
}

.form-grid--light label {
  color: var(--zinc-500);
}

.form-grid--light input,
.form-grid--light select,
.form-grid--light textarea {
  background: #fff;
  border-color: var(--zinc-200);
  color: var(--zinc-950);
}

.form-grid--light input:focus,
.form-grid--light select:focus,
.form-grid--light textarea:focus {
  border-color: var(--zinc-400);
}

.form-grid--light input::placeholder,
.form-grid--light textarea::placeholder {
  color: var(--zinc-400);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* —— Book a walkthrough —— */
.page--book .home-light {
  /* Keep nav clear without extending section borders through the header */
  padding-top: 4.75rem;
}

.home-light > .section.section-book {
  background: #fff !important;
  --section-pad-b: 0;
  padding-top: 3rem;
  padding-bottom: 0;
}

.page--book .feature-block-head .product-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
}

.page--book .section-book .feature-block-head {
  margin-bottom: 0;
  padding-bottom: 2rem;
}

.book-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  width: calc(100% + 2 * var(--section-pad-x, 0px));
  max-width: none;
  margin-left: calc(-1 * var(--section-pad-x, 0px));
  margin-right: calc(-1 * var(--section-pad-x, 0px));
  margin-bottom: 0;
  border-top: 1px solid var(--zinc-200);
  box-sizing: border-box;
}

.book-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 2rem var(--section-pad-x, 2.5rem) 2.25rem;
  border-right: 1px solid var(--zinc-200);
  box-sizing: border-box;
}

.book-form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.book-form label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zinc-800);
  text-transform: none;
}

.book-form .book-optional {
  font-weight: 500;
  color: var(--zinc-400);
}

.book-form input,
.book-form select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--zinc-200);
  border-radius: 10px;
  background: #fff;
  color: var(--zinc-950);
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  box-sizing: border-box;
  appearance: none;
}

.book-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

.book-form input::placeholder {
  color: var(--zinc-400);
}

.book-form input:focus,
.book-form select:focus {
  outline: none;
  border-color: var(--zinc-400);
}

.book-form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.35rem;
  background: #09090b;
  color: #fff;
}

.book-form-submit:hover {
  background: #27272a;
  color: #fff;
}

.book-form-legal {
  margin: 0.15rem 0 0 !important;
  max-width: none !important;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--zinc-400);
}

.book-form-legal a {
  color: var(--zinc-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.book-form-legal a:hover {
  color: var(--zinc-700);
}

.book-error {
  display: none;
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #dc2626;
}

.book-form input[aria-invalid="true"],
.book-form select[aria-invalid="true"] {
  border-color: #dc2626;
}

.book-form input[aria-invalid="true"] + .book-error,
.book-form select[aria-invalid="true"] + .book-error {
  display: block;
}

.book-form select.book-field--empty {
  color: var(--zinc-400);
}

.book-form select option {
  color: var(--zinc-950);
}

.book-form-error {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #dc2626;
}

.book-form-error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.book-form-submit:disabled {
  cursor: wait;
  opacity: 0.85;
}

.book-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: book-spin 0.7s linear infinite;
}

.book-form-submit.is-loading .book-spinner {
  display: inline-block;
}

.book-form-submit.is-loading .book-submit-label {
  opacity: 0.85;
}

@keyframes book-spin {
  to {
    transform: rotate(360deg);
  }
}

.book-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  min-height: 100%;
  padding: 2rem var(--section-pad-x, 2.5rem) 2.25rem;
  border-right: 1px solid var(--zinc-200);
  box-sizing: border-box;
}

.book-success.is-visible {
  display: flex;
}

.book-layout.is-success .book-form {
  display: none;
}

.book-layout.is-success .book-media {
  aspect-ratio: 1;
}

.book-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  background: var(--zinc-950);
  color: #fff;
}

.book-success h2 {
  margin: 0 auto 0.75rem;
  max-width: none;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
  text-align: center;
}

.book-success p {
  margin: 0 auto 1.75rem;
  max-width: 22rem;
  color: var(--zinc-600);
  text-align: center;
}

.book-media {
  position: relative;
  min-height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--zinc-50);
}

.book-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .book-layout {
    grid-template-columns: 1fr;
  }

  .book-form,
  .book-success {
    border-right: none;
    border-bottom: 1px solid var(--zinc-200);
  }

  .book-media {
    position: relative;
    min-height: 0;
    aspect-ratio: 1;
  }
}

@media (max-width: 560px) {
  .book-form-row--split {
    grid-template-columns: 1fr;
  }
}

/* —— Soft preview gate —— */
.gate-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(0, 150, 137, 0.12),
      transparent 55%
    ),
    var(--bg);
}

.gate {
  width: 100%;
  padding: 2rem var(--gutter);
}

.gate-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.gate-logo {
  height: 28px;
  width: auto;
  margin-bottom: 1.75rem;
}

.gate-card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.gate-lede {
  margin: 0 0 1.5rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gate-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s var(--ease);
}

.gate-input:focus {
  border-color: rgba(250, 250, 250, 0.35);
}

.gate-form .btn {
  width: 100%;
}

.gate-error {
  margin: 0;
  color: var(--conflict);
  font-size: 0.875rem;
}

/* —— Govern diagram (Foundation page) —— */
/* Section head over a full-bleed subsection, the same shape as the capability
   rows: teal rule down the head, diagram edge to edge under its own top rule */
.home-light > .section.section-govern {
  background: #fff !important;
  --section-pad-t: 0;
  --section-pad-b: 0;
  padding: 0;
  overflow: hidden;
}

.govern-split {
  display: flex;
  align-items: stretch;
  min-height: 49rem;
}

.govern-visual {
  position: relative;
  flex: 1 1 62.5%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}

.govern-visual-mesh {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 174.05%;
  height: 104.46%;
  transform: translate(-50%, -50%);
}

.govern-visual-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.govern-rings {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.govern-visual.is-linked .govern-rings {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease);
}

.govern-rings img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  transform: translate(-50%, -50%);
}

.govern-rings img:nth-child(1) {
  width: 111.55%;
}

.govern-rings img:nth-child(2) {
  width: 85.36%;
}

.govern-rings img:nth-child(3) {
  width: 54.17%;
}

.govern-links {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.govern-links line {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
}

.govern-visual.is-arriving .govern-links line,
.govern-visual.is-linked .govern-links line {
  opacity: 0.5;
  animation: governLinkDraw 0.7s var(--ease) both;
  animation-delay: calc(0.12s + var(--i, 0) * 18ms);
}

.govern-visual .govern-links line.is-drawn {
  opacity: 0.5;
  animation: none;
  stroke-dashoffset: 0;
}

@keyframes governLinkDraw {
  from {
    opacity: 0;
    stroke-dashoffset: var(--len, 80);
  }
  to {
    opacity: 0.5;
    stroke-dashoffset: 0;
  }
}

.govern-hub,
.govern-node {
  position: absolute;
  left: var(--x1);
  top: var(--y1);
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  transition:
    left 0.85s var(--ease),
    top 0.85s var(--ease),
    background 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    opacity 0.5s var(--ease),
    transform 0.55s var(--ease);
}

.govern-hub {
  width: 9.52cqw;
  height: 9.52cqw;
  border-radius: 10px;
  background: #fff;
}

.govern-hub img {
  width: 45%;
  height: 45%;
  object-fit: contain;
}

.govern-hub--simon {
  left: var(--x2);
  top: var(--y2);
  opacity: 0;
}

.govern-visual.is-arriving .govern-hub--simon,
.govern-visual.is-linked .govern-hub--simon {
  opacity: 1;
}

.govern-visual.is-arriving .govern-hub[data-govern-hub="firm"],
.govern-visual.is-linked .govern-hub[data-govern-hub="firm"] {
  left: var(--x2);
  top: var(--y2);
}

.govern-node {
  width: 7.14cqw;
  height: 7.14cqw;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(11.5px);
  -webkit-backdrop-filter: blur(11.5px);
}

.govern-node img {
  width: 40%;
  height: 40%;
  object-fit: contain;
}

.govern-node--person {
  border-radius: 999px;
}

.govern-node--person img {
  width: 60%;
  height: 60%;
  border-radius: 999px;
  object-fit: cover;
}

.govern-visual.is-linked .govern-node {
  left: var(--x2);
  top: var(--y2);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.govern-copy {
  flex: 0 1 37.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.2rem);
  border-left: 1px solid var(--zinc-300);
  box-sizing: border-box;
}

.govern-copy .product-title {
  margin: 0;
  max-width: none;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.govern-copy .product-title-muted {
  color: #9f9fa9;
}

.govern-copy p {
  margin: 0;
  max-width: 25.2rem;
  color: var(--zinc-500);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .home-light > .section.section-govern {
    padding-left: var(--section-pad-x, var(--gutter));
    padding-right: var(--section-pad-x, var(--gutter));
    padding-bottom: 1.5rem;
  }

  .govern-split {
    flex-direction: column;
    min-height: 0;
  }

  .govern-visual {
    flex: none;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: 16px;
    --g-spread-x: 0.72;
    --g-spread-y: 0.78;
  }

  .govern-rings img:nth-child(1) {
    width: 86%;
  }

  .govern-rings img:nth-child(2) {
    width: 66%;
  }

  .govern-rings img:nth-child(3) {
    width: 42%;
  }

  .govern-hub {
    width: 7.4cqw;
    height: 7.4cqw;
    border-radius: 8px;
    left: calc(50% + (var(--x1) - 50%) * var(--g-spread-x));
    top: calc(50% + (var(--y1) - 50%) * var(--g-spread-y));
  }

  .govern-hub--simon,
  .govern-visual.is-arriving .govern-hub[data-govern-hub="firm"],
  .govern-visual.is-linked .govern-hub[data-govern-hub="firm"],
  .govern-visual.is-linked .govern-node {
    left: calc(50% + (var(--x2) - 50%) * var(--g-spread-x));
    top: calc(50% + (var(--y2) - 50%) * var(--g-spread-y));
  }

  .govern-node {
    width: 5.5cqw;
    height: 5.5cqw;
    border-radius: 8px;
    left: calc(50% + (var(--x1) - 50%) * var(--g-spread-x));
    top: calc(50% + (var(--y1) - 50%) * var(--g-spread-y));
  }

  .govern-copy {
    flex: none;
    padding: 2.5rem 0 1.5rem;
    border-left: none;
    border-top: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .govern-hub,
  .govern-node,
  .govern-rings img,
  .govern-links line {
    transition: none;
    animation: none;
  }

  .govern-visual .govern-hub--simon,
  .govern-visual.is-linked .govern-rings,
  .govern-visual .govern-links line {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .govern-visual .govern-node,
  .govern-visual .govern-hub[data-govern-hub="firm"],
  .govern-visual .govern-hub--simon {
    left: var(--x2);
    top: var(--y2);
    background: #fff;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .govern-visual .govern-node,
  .govern-visual .govern-hub[data-govern-hub="firm"],
  .govern-visual .govern-hub--simon {
    left: calc(50% + (var(--x2) - 50%) * var(--g-spread-x, 0.72));
    top: calc(50% + (var(--y2) - 50%) * var(--g-spread-y, 0.78));
  }
}

.govern-diagram {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  /* Mark size and net row gap drive every connector length below */
  --govern-mark: 2rem;
  --govern-net-gap: 5rem;
  --govern-net-gap-x: clamp(1.5rem, 2.4vw, 2.9rem);
  /* Both outer columns take the integration grid's width, so the stack lands on
     the centre line and the provider stubs have room to run */
  --govern-cluster: calc(
    (var(--govern-mark) * 4) + (var(--govern-net-gap-x) * 3)
  );
}

.govern-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(1459px, 150vw);
  height: 130%;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(9, 9, 11, 0.1) 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: center;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    #000 0%,
    #000 24%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    #000 0%,
    #000 24%,
    transparent 72%
  );
}

/* Single centered row of clusters now that the legends are gone */
.govern-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    var(--govern-cluster) minmax(3rem, 1fr) auto minmax(3rem, 1fr)
    var(--govern-cluster);
  align-items: center;
  width: 100%;
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
}

/* Product marks — bare logos, sized as one box so the connectors line up */
.govern-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--govern-mark);
  height: var(--govern-mark);
}

.govern-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Providers fan into one rail: a stub per mark, then a vertical joiner that
   lands on the column edge the rail starts from */
.govern-branch {
  position: relative;
  grid-area: 1 / 1;
  justify-self: stretch;
  display: grid;
  justify-items: start;
  row-gap: 2.25rem;
}

.govern-branch-lines {
  position: absolute;
  left: var(--govern-mark);
  right: 0;
  top: calc(var(--govern-mark) / 2);
  bottom: calc(var(--govern-mark) / 2);
  border-right: 1px solid var(--zinc-300);
}

.govern-stub {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--zinc-300);
}

.govern-stub:first-child {
  top: 0;
}

.govern-stub:last-child {
  bottom: 0;
}

.govern-rail {
  position: relative;
  align-self: center;
  min-width: 3rem;
  height: 1px;
  background: var(--zinc-300);
}

.govern-rail--in {
  grid-area: 1 / 2;
}

.govern-rail--out {
  grid-area: 1 / 4;
}

.govern-rail-label {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--zinc-400);
  font-size: 0.875rem;
  line-height: 1;
}

.govern-core {
  grid-area: 1 / 3;
  display: flex;
  justify-content: center;
}

/* Isometric plate stack — 146.5px squares on the Figma's rotate/skew plane */
.govern-stack {
  position: relative;
  width: clamp(11rem, 17vw, 15.85rem);
  aspect-ratio: 253.72 / 254.03;
}

.govern-layer {
  position: absolute;
  left: 50%;
  width: 57.73%;
  margin-left: -28.865%;
  aspect-ratio: 1;
  border: 1px solid var(--zinc-300);
  border-radius: 10px;
  background: #fff;
  transform: rotate(-30deg) scaleY(0.87) skewX(30deg);
}

.govern-layer:nth-child(1) {
  top: 42.34%;
}

.govern-layer:nth-child(2) {
  top: 31.75%;
}

.govern-layer:nth-child(3) {
  top: 21.17%;
}

.govern-layer:nth-child(4) {
  top: 10.58%;
}

.govern-layer:nth-child(5) {
  top: 0;
}

/* Sits flat on the top plate, so it takes the same plane transform */
.govern-stack-mark {
  position: absolute;
  left: 50%;
  top: 28.83%;
  width: 15%;
  height: auto;
  transform: translate(-50%, -50%) rotate(-30deg) scaleY(0.87) skewX(30deg);
}

/* Integrations sit in two rows either side of the rail, which runs on through
   them to the last column */
.govern-net {
  position: relative;
  grid-area: 1 / 5;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(4, var(--govern-mark));
  column-gap: var(--govern-net-gap-x);
  row-gap: var(--govern-net-gap);
}

.govern-net::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--govern-mark) / 2);
  top: 50%;
  height: 1px;
  background: var(--zinc-300);
}

/* One vertical link per column, crossing the rail between the two rows */
.govern-net .govern-mark:nth-child(-n + 4)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.3rem);
  width: 1px;
  height: calc(var(--govern-net-gap) - 0.6rem);
  background: var(--zinc-300);
}

/* —— Traffic flow ——
   One teal dash per route, riding an SVG polyline that site.js measures off the
   connectors themselves, so a dash turns every corner from a logo through to
   the stack instead of blinking segment by segment. */
.govern-flow {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.govern-flow path {
  fill: none;
  /* A tint of the brand teal, so a dash reads as a signal on the wire rather
     than a second line competing with it */
  stroke: #4bbcb1;
  stroke-width: 1.75;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(0, 150, 137, 0.28));
  animation: govern-flow var(--flow-dur, 2s) linear var(--flow-delay, 0s)
    infinite;
}

/* The dash sits at the head of the pattern, so travelling the route length
   less one dash keeps it between the two ends of the wire */
@keyframes govern-flow {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  72%,
  100% {
    stroke-dashoffset: var(--flow-end);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .govern-flow {
    display: none;
  }
}

/* Stacked: the rails stop carrying meaning, so each cluster sits over its label */
@media (max-width: 900px) {
  .govern-diagram {
    --govern-net-gap: 3.25rem;
  }

  .govern-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .govern-rail {
    display: none;
  }

  .govern-branch {
    order: 1;
    grid-auto-flow: column;
    row-gap: 0;
    column-gap: 1.5rem;
  }

  .govern-branch-lines {
    display: none;
  }

  .govern-core {
    order: 2;
  }

  .govern-net {
    order: 3;
  }

  .govern-net::before {
    left: calc(var(--govern-mark) / 2);
  }
}

/* —— Origin case study —— */
.page--case-study {
  background: #fff;
  color: var(--zinc-950);
}

.case-shell {
  width: min(var(--max), calc(100% - (2 * var(--gutter))));
  margin-inline: auto;
}

.case-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(8.5rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 6.5rem);
  color: var(--zinc-50);
  background:
    radial-gradient(
      circle at 83% 22%,
      rgba(50, 180, 168, 0.2),
      transparent 28rem
    ),
    radial-gradient(
      circle at 8% 110%,
      rgba(0, 150, 137, 0.12),
      transparent 34rem
    ),
    #09090b;
}

.case-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.case-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  align-items: end;
  gap: clamp(3rem, 9vw, 8rem);
}

.case-hero-copy {
  max-width: 48rem;
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  color: #5ee2d5;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.case-back::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.case-back:hover {
  color: #8defe6;
}

.case-hero h1 {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.case-hero-deck {
  max-width: 42rem;
  margin: 2rem 0 0;
  color: var(--zinc-400);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
}

.case-hero-mark {
  display: flex;
  min-height: 20rem;
  padding: 2rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px);
}

.case-hero-mark-label {
  margin-bottom: auto;
  color: var(--zinc-500);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-hero-mark img {
  width: 6.25rem;
  height: 6.25rem;
  margin-bottom: 1.5rem;
}

.case-hero-mark strong {
  font-size: 1.15rem;
  font-weight: 500;
}

.case-hero-mark a {
  margin-top: 0.35rem;
  color: var(--zinc-400);
  font-size: 0.82rem;
}

.case-hero-mark a:hover {
  color: #5ee2d5;
}

.case-facts-wrap {
  border-bottom: 1px solid var(--zinc-200);
  background: var(--zinc-50);
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.case-facts > div {
  padding: 1.4rem 1.5rem 1.5rem;
  border-left: 1px solid var(--zinc-200);
}

.case-facts > div:last-child {
  border-right: 1px solid var(--zinc-200);
}

.case-facts dt {
  margin-bottom: 0.28rem;
  color: var(--zinc-500);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.case-facts dd {
  margin: 0;
  color: var(--zinc-900);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

.case-layout {
  display: grid;
  grid-template-columns: 11rem minmax(0, 46rem);
  justify-content: space-between;
  gap: clamp(3rem, 9vw, 9rem);
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.case-toc {
  position: sticky;
  top: 7rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.case-toc p {
  margin: 0 0 0.45rem;
  color: var(--zinc-950);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-toc a {
  color: var(--zinc-500);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.35;
  transition:
    color 0.2s var(--ease),
    font-weight 0.2s var(--ease);
}

.case-toc a:hover {
  color: var(--brand);
}

.case-toc a.is-active {
  color: var(--zinc-950);
  font-weight: 600;
}

.case-story {
  min-width: 0;
}

.case-story p {
  color: var(--zinc-600);
}

.case-intro,
.case-section {
  scroll-margin-top: 7rem;
}

.case-intro {
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.case-kicker {
  margin: 0 0 1rem !important;
  color: var(--brand) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.case-lede {
  margin: 0 0 1.75rem;
  color: var(--zinc-950) !important;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.28;
}

.case-intro > p:last-child,
.case-section > p {
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

.case-quote {
  margin: 0 0 clamp(5rem, 10vw, 8rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 1.5rem;
  background: var(--zinc-100);
}

.case-quote blockquote {
  margin: 0;
  color: var(--zinc-950);
  font-family: var(--font-quote);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.case-quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.case-quote figcaption img {
  width: 2.625rem;
  height: 2.625rem;
}

.case-quote figcaption span {
  display: flex;
  flex-direction: column;
}

.case-quote figcaption strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.case-quote figcaption small {
  color: var(--zinc-500);
  font-size: 0.78rem;
}

.case-section {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--zinc-200);
}

.case-section h2 {
  max-width: 42rem;
  margin: 0 0 1.6rem;
  color: var(--zinc-950);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.03;
  text-wrap: balance;
}

.case-callout {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--zinc-300);
  border-bottom: 1px solid var(--zinc-300);
}

.case-callout span {
  padding-top: 0.25rem;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-callout p {
  margin: 0;
  color: var(--zinc-900);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.case-feature-list {
  margin-top: 3.5rem;
  border-top: 1px solid var(--zinc-200);
}

.case-feature-list article {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--zinc-200);
}

.case-feature-number {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.case-feature-list h3,
.case-work-grid h3 {
  margin: 0 0 0.6rem;
  color: var(--zinc-950);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.case-feature-list p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
}

.case-section--work {
  position: relative;
}

.case-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 3rem;
}

.case-work-grid article {
  min-height: 18rem;
  padding: 1.4rem;
  border: 1px solid var(--zinc-200);
  border-radius: 1rem;
  background:
    linear-gradient(155deg, rgba(0, 150, 137, 0.055), transparent 55%), #fff;
}

.case-work-grid article > span {
  display: inline-block;
  margin-bottom: 4.5rem;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.case-work-grid p {
  margin: 0;
  color: var(--zinc-500);
  font-size: 0.88rem;
  line-height: 1.6;
}

.case-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 3.5rem;
  border-top: 1px solid var(--zinc-300);
  border-left: 1px solid var(--zinc-300);
}

.case-outcomes article {
  min-height: 13rem;
  padding: 1.75rem;
  border-right: 1px solid var(--zinc-300);
  border-bottom: 1px solid var(--zinc-300);
}

.case-outcomes strong {
  display: block;
  max-width: 17rem;
  color: var(--zinc-950);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.case-outcomes p {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .case-hero-grid {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2.5rem;
  }

  .case-hero-mark {
    min-height: 17rem;
  }

  .case-layout {
    grid-template-columns: 1fr;
  }

  .case-toc {
    display: none;
  }

  .case-story {
    max-width: 46rem;
    margin-inline: auto;
  }

  .case-work-grid {
    grid-template-columns: 1fr;
  }

  .case-work-grid article {
    min-height: 0;
  }

  .case-work-grid article > span {
    margin-bottom: 3rem;
  }
}

@media (max-width: 700px) {
  .case-hero {
    padding-top: 7.5rem;
  }

  .case-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .case-hero-mark {
    min-height: 0;
    padding: 1.3rem;
  }

  .case-hero-mark-label {
    margin-bottom: 2rem;
  }

  .case-hero-mark img {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
  }

  .case-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-facts > div:nth-child(2) {
    border-right: 1px solid var(--zinc-200);
  }

  .case-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--zinc-200);
  }

  .case-callout,
  .case-feature-list article {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .case-outcomes {
    grid-template-columns: 1fr;
  }

  .case-outcomes article {
    min-height: 0;
  }
}

/* —— Home: one platform band (Figma 128:7976) ——
   Foundation and Work share a single band: a centred intro, then two cards
   filling the width edge to edge. Each card is a full-bleed mesh with a black
   scrim under the copy and an app shot anchored left. Everything inside the
   card is sized in percentages of the card, so the composition survives every
   breakpoint. */
.home-light > .section.section-platform-intro {
  padding-top: clamp(3.25rem, 5vw, 3.9rem);
  padding-bottom: clamp(3.25rem, 5vw, 3.9rem);
}

.platform-intro {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.platform-intro-title {
  max-width: none;
  margin: 0 0 0.5rem;
  color: var(--zinc-950);
  font-size: clamp(2.25rem, 4.4vw, 3.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.platform-intro-title .platform-intro-muted {
  color: var(--zinc-400);
}

/* Compound selector clears the site-wide `.section p` colour and 40rem cap */
.platform-intro .platform-intro-sub {
  max-width: none;
  margin: 0;
  color: var(--zinc-500);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.45;
}

.home-light > .section.section-platform {
  display: flex;
  flex-direction: row;
  container-type: inline-size;
  aspect-ratio: 1344 / 784;
  padding: 0;
  overflow: hidden;
  background: var(--zinc-950);
}

.platform-card {
  position: relative;
  display: block;
  flex: 1 1 50%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background: var(--zinc-950);
  transition: flex 0.65s var(--ease);
}

.platform-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s var(--ease);
}

.platform-card + .platform-card {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.platform-card:hover {
  color: #fff;
}

.platform-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

.platform-card-mesh {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 270.4%;
  height: 129.9%;
  transform: translate(-50%, -50%);
}

.platform-card-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

/* Black at the top so the copy holds against whatever the mesh does */
.platform-card-scrim {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 45.2%;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.platform-card-copy {
  position: absolute;
  top: clamp(2rem, 7.7%, 3.9rem);
  left: clamp(1.25rem, 7%, 2.95rem);
  z-index: 3;
  width: min(38rem, 90%);
}

.platform-card-title {
  max-width: none;
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.platform-card-title-muted {
  color: var(--zinc-400);
}

.platform-card-copy .platform-card-blurb {
  width: 75%;
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.4;
}

.platform-card-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 500;
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.platform-card-shot {
  position: absolute;
  top: 35.7%;
  left: 9.8%;
  z-index: 2;
  width: 143.6%;
}

.platform-card-shot img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 40px 60px -34px rgba(0, 0, 0, 0.55);
}

.platform-card:hover .platform-card-learn .mega-arrow,
.platform-card:focus-visible .platform-card-learn .mega-arrow {
  transform: translateX(3px);
}

@media (hover: hover) and (min-width: 901px) {
  /* Mesh width is tied to the section, not the flexing card, so hover expansion
     does not scale the background. Height stays on the card (%), which is fixed
     while the row aspect-ratio holds. */
  .platform-card-mesh {
    width: 135.2cqw;
    height: 129.9%;
  }

  /* Lock the app shot to its designed width so flex expansion reveals the
     cropped right edge instead of scaling the image up with the card. */
  .platform-card-shot {
    width: 965px;
    max-width: none;
  }

  /* Copy stays on the section, not the flexing card. The blurb is 75%
     of a 50/50 card (37.5cqw) so wrap stays put when hover shifts the
     split. */
  .platform-card-copy {
    width: min(38rem, 45cqw);
  }

  .platform-card-copy .platform-card-blurb {
    width: 37.5cqw;
  }

  .platform-card-learn {
    opacity: 0;
    transform: translateY(6px);
  }

  .platform-card:hover .platform-card-learn,
  .platform-card:focus-visible .platform-card-learn {
    opacity: 1;
    transform: none;
  }

  .section-platform:has(.platform-card--foundation:hover)
    .platform-card--foundation,
  .section-platform:has(.platform-card--foundation:focus-visible)
    .platform-card--foundation {
    flex: 1.1 1 0;
  }

  .section-platform:has(.platform-card--foundation:hover) .platform-card--work,
  .section-platform:has(.platform-card--foundation:focus-visible)
    .platform-card--work {
    flex: 0.9 1 0;
  }

  .section-platform:has(.platform-card--work:hover) .platform-card--work,
  .section-platform:has(.platform-card--work:focus-visible)
    .platform-card--work {
    flex: 1.1 1 0;
  }

  .section-platform:has(.platform-card--work:hover) .platform-card--foundation,
  .section-platform:has(.platform-card--work:focus-visible)
    .platform-card--foundation {
    flex: 0.9 1 0;
  }

  .section-platform:has(.platform-card--foundation:hover)
    .platform-card--work::after,
  .section-platform:has(.platform-card--foundation:focus-visible)
    .platform-card--work::after,
  .section-platform:has(.platform-card--work:hover)
    .platform-card--foundation::after,
  .section-platform:has(.platform-card--work:focus-visible)
    .platform-card--foundation::after {
    opacity: 0.52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-card {
    transition: none;
  }

  .platform-card::after,
  .platform-card-learn {
    transition: none;
  }
}

@media (max-width: 900px) {
  .home-light > .section.section-platform {
    flex-direction: column;
    aspect-ratio: auto;
    padding: 0 var(--section-pad-x, 1.5rem);
    gap: 1rem;
    background: #fff;
    overflow: visible;
  }

  .platform-card {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    border-radius: 16px;
  }

  .platform-card + .platform-card {
    border-left: none;
    border-top: none;
  }

  .platform-card-copy {
    z-index: 5;
    width: calc(100% - 2.5rem);
  }

  .platform-card-copy .platform-card-blurb {
    width: 100%;
  }

  .platform-card-scrim {
    height: 58%;
  }

  .platform-card-shot {
    top: 54%;
    left: 10%;
  }
}

@media (max-width: 700px) {
  .platform-card {
    aspect-ratio: 3 / 4;
  }

  .platform-card-shot {
    top: 56%;
  }
}