/* ============================================================
   NAV
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: var(--border-thin);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--space-5);
  gap: var(--space-5);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-navy-800);
}
.nav__logo-accent { color: var(--color-teal-600); font-weight: 500; }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  justify-content: center;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  padding: 6px 0;
  transition: color 0.15s;
}
.nav__link:hover { color: var(--color-navy-800); }

.nav__cta {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

/* Resources dropdown */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  color: inherit;
  padding: 6px 0;
  transition: color 0.15s;
}
.nav__dropdown-trigger:hover { color: var(--color-navy-800); }
.nav__dropdown-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}
.nav__dropdown[data-open="true"] .nav__dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav__dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  min-width: 320px;
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 8px 32px rgba(10, 31, 61, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 10;
}
.nav__dropdown[data-open="true"] .nav__dropdown-panel {
  opacity: 1;
  visibility: visible;
}

.nav__dropdown-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 8px;
}

.nav__dropdown-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.nav__dropdown-item {
  display: block;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.nav__dropdown-item:hover { background: var(--color-bg-soft); }
.nav__dropdown-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 1px;
}
.nav__dropdown-item-desc {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

/* Mobile hamburger */
.nav__hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
}
.nav__hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-text-primary);
  margin: 0 auto;
  transition: transform 0.15s, opacity 0.15s;
}

/* Mobile overlay */
.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.2s ease-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.nav__mobile[data-open="true"] {
  transform: translateX(0);
}
.nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--space-5);
  border-bottom: var(--border-thin);
  flex-shrink: 0;
}
.nav__mobile-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__mobile-body {
  flex: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: var(--space-3) 0;
  border-bottom: var(--border-light);
}
.nav__mobile-section-title {
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.nav__mobile-sublink {
  display: block;
  font-size: 15px;
  color: var(--color-text-primary);
  padding: var(--space-2) 0;
}
.nav__mobile-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__hamburger { display: none; }
  .nav__mobile { display: none; }
}

/* Lock body scroll when mobile menu is open */
body.nav-open { overflow: hidden; }


/* ============================================================
   FOOTER CTA (closing dark CTA section — placeholder for Phase 6)
   ============================================================ */

/* (Phase 6 will populate this) */


/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
  background: var(--color-navy-900);
  color: var(--color-text-on-navy);
  padding: 44px 0 24px;
  font-size: 13px;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 0.5px solid var(--color-navy-700);
}

.site-footer__logo {
  font-size: 19px;
  font-weight: 500;
  color: white;
}
.site-footer__logo-accent { color: var(--color-teal-500); font-weight: 500; }

/* Right-side cluster: Sign in (text) + Start free trial (button) + social icons */
.site-footer__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer__sign-in {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-on-navy);
  transition: color 0.15s;
}
.site-footer__sign-in:hover { color: white; }

.site-footer__social {
  display: flex;
  gap: 10px;
  margin-left: 4px;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0.5px solid var(--color-navy-700);
  background: transparent;
  color: var(--color-text-on-navy);
  transition: background 0.15s;
}
.site-footer__social-link:hover {
  background: var(--color-navy-700);
  color: white;
}
.site-footer__social-link svg {
  width: 14px;
  height: 14px;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.site-footer__col-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-500);
  margin-bottom: 16px;
}

.site-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__col-link {
  font-size: 15px;
  color: var(--color-text-on-navy);
  transition: color 0.15s;
  line-height: 1.9;
}
.site-footer__col-link:hover { color: white; }

.site-footer__contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 24px 0;
  margin-bottom: 22px;
  border-top: 0.5px solid var(--color-navy-700);
  border-bottom: 0.5px solid var(--color-navy-700);
}

.site-footer__contact-item {
  display: flex;
  flex-direction: column;
}
.site-footer__contact-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-500);
  margin-bottom: 8px;
}
.site-footer__contact-sub {
  font-size: 11px;
  color: var(--color-text-on-navy-muted);
  margin-top: 8px;
  margin-bottom: 2px;
}
.site-footer__contact-sub:first-of-type { margin-top: 0; }
.site-footer__contact-value {
  color: var(--color-text-on-navy);
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
}
.site-footer__contact-value a:hover { color: white; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 11.5px;
  color: var(--color-text-on-navy-muted);
}

.site-footer__bottom-links a {
  color: var(--color-text-on-navy-muted);
  margin: 0 6px;
}
.site-footer__bottom-links a:first-child { margin-left: 0; }
.site-footer__bottom-links a:hover { color: white; }

@media (min-width: 600px) {
  .site-footer__contact {
    grid-template-columns: 1fr 1.4fr 1fr;
  }
}

@media (min-width: 900px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
  }
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  /* align-items: start so the screenshot/video top-aligns with the
     headline instead of sitting visually low. center-align would push
     the right column down whenever the left column is taller (which
     it is at desktop, with H1 + subhead + CTAs + 4-stat strip). */
  align-items: start;
  /* Wider than the standard 1200 max-width so the demo visual reads
     bigger; keeps the copy column generous enough that the H1 still
     renders on two lines at desktop sizes. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px var(--space-5);
}

.hero__h1 {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  color: var(--color-navy-800);
}
.hero__h1 em { font-style: normal; color: var(--color-teal-600); }
.hero__h1 s {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  color: var(--color-text-tertiary);
}

.hero__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  max-width: 540px;
}

.hero__cta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cta-link {
  font-size: 14px;
  color: var(--color-navy-800);
  padding: 12px 8px;
  cursor: pointer;
  background: none;
  border: none;
}
.cta-link:hover { color: var(--color-teal-600); }

.hero__stats {
  display: flex;
  gap: 28px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--border-thin);
  flex-wrap: wrap;
}

.hero__stat-n {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-navy-800);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.hero__stat-l {
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* HERO VISUALIZATION */
.hero__vis {
  /* Plain positioning wrapper. Border / radius / overflow:hidden moved
     onto .hero-media so the close button can sit outside the visible
     card without being clipped. */
  position: relative;
}
.hero__vis img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Hero still→video transition --------------------------------------
   The image is the layout anchor (width: 100%, natural aspect via
   height: auto). The video is absolutely positioned over it and fades
   in on play. Border / radius / shadow live here (rather than on
   .hero__vis) so the close button — a sibling of .hero-media inside
   .hero__vis — can be positioned outside the visible card without
   being clipped. */
.hero-media {
  position: relative;
  width: 100%;
  background: var(--color-bg-soft);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 31, 61, 0.06);
}
.hero-media__image,
.hero-media__video {
  display: block;
  transition: opacity 300ms ease;
}
.hero-media__image {
  width: 100%;
  height: auto;
}
.hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.hero-media.is-playing .hero-media__image {
  opacity: 0;
}
.hero-media.is-playing .hero-media__video {
  opacity: 1;
}
/* Close ✕ button — small circular icon at the top-right corner of the
   video card, positioned half-outside the frame so it doesn't cover
   any video content. Visible only during playback; clicking it (or
   the video ending naturally) snaps back to the static image and
   restores the "See it in action ▸" trigger. */
.hero-media__stop {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #FFFFFF;
  color: var(--color-navy-800);
  border: 0.5px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(10, 31, 61, 0.12);
  transition: background 150ms ease, border-color 150ms ease;
  z-index: 2;
}
.hero-media__stop:hover {
  background: #F5F7FA;
  border-color: var(--color-text-secondary);
}
.hero-media__stop[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-media__image,
  .hero-media__video {
    transition: none;
  }
}

.vis-chat {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 230px;
}
.vis-msg {
  background: white;
  border: var(--border-thin);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-navy-800);
  margin-bottom: 6px;
}
.vis-msg--user {
  background: var(--color-navy-800);
  color: white;
  border-color: var(--color-navy-800);
}
.vis-msg--agent {
  background: var(--color-teal-50);
  border-color: var(--color-teal-200);
  color: var(--color-teal-1000);
}
.vis-msg--agent::before {
  content: '◆ agent';
  font-size: 9px;
  color: var(--color-teal-900);
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.vis-canvas {
  position: absolute;
  top: 22px;
  right: 22px;
  bottom: 92px;
  left: 270px;
  background: white;
  border: var(--border-thin);
  border-radius: 10px;
  padding: 14px;
}
.vis-canvas__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: var(--border-light);
  margin-bottom: 12px;
}
.vis-canvas__bar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B5C2D9;
}
.vis-canvas__title {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-tertiary);
  margin-left: 4px;
}
.vis-canvas__live {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  gap: 4px;
}
.vis-canvas__live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal-600);
}

.vis-flow { position: relative; height: 130px; }
.vis-node {
  position: absolute;
  background: white;
  border: 0.5px solid;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vis-node__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.vis-node--n1 { top: 4px; left: 0; border-color: #B5D4F4; color: #0C447C; }
.vis-node--n1 .vis-node__dot { background: #185FA5; }
.vis-node--n2 { top: 4px; left: 130px; border-color: var(--color-teal-200); color: var(--color-teal-900); }
.vis-node--n2 .vis-node__dot { background: var(--color-teal-600); }
.vis-node--n3 { top: 4px; left: 260px; border-color: #CECBF6; color: #3C3489; }
.vis-node--n3 .vis-node__dot { background: #7F77DD; }
.vis-node--n4 { top: 70px; left: 130px; border-color: #F5C4B3; color: #993C1D; }
.vis-node--n4 .vis-node__dot { background: #D85A30; }

.vis-edge { position: absolute; height: 1.5px; background: #B5C2D9; }
.vis-edge--e1 { top: 16px; left: 105px; width: 25px; }
.vis-edge--e2 { top: 16px; left: 235px; width: 25px; }
.vis-edge--e3 { top: 30px; left: 175px; width: 1.5px; height: 40px; }

.vis-progress { margin-top: 14px; }
.vis-progress__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--color-text-secondary);
  padding: 2px 0;
  font-family: var(--font-mono);
}
.vis-progress__row .ok { color: var(--color-teal-600); }

.vis-tabs {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  gap: 6px;
}
.vis-tab {
  flex: 1;
  background: white;
  border: var(--border-thin);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.vis-tab__indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.vis-tab--active {
  border-color: var(--color-teal-600);
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  font-weight: 500;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(420px, 1fr) minmax(0, 1.7fr);
    gap: 48px;
  }
}


/* ============================================================
   GENERIC SECTION SHELL
   ============================================================ */

.sec {
  padding: 56px var(--space-5);
  border-top: var(--border-thin);
  max-width: var(--max-width);
  margin: 0 auto;
}

.sec__eyebrow {
  font-size: 11px;
  color: var(--color-teal-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 12px;
}

.sec__h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  max-width: 600px;
  color: var(--color-navy-800);
}
.sec__h2 em { font-style: normal; color: var(--color-teal-600); }

.sec__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 0 0 32px;
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how {
  padding: 64px var(--space-5);
  background: linear-gradient(180deg, var(--color-bg-tint) 0%, white 100%);
  border-top: var(--border-thin);
}
.how__inner { max-width: 1100px; margin: 0 auto; }
.how__head { text-align: center; margin-bottom: 40px; }

.how__eyebrow {
  font-size: 11px;
  color: var(--color-teal-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 12px;
}
.how__h2 {
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--color-navy-800);
}
.how__h2 em { font-style: normal; color: var(--color-teal-600); }

.how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.how__step {
  padding: 24px;
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.how__step:hover { border-color: var(--color-teal-600); }

.how__icon {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  background: var(--color-teal-50);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.how__num {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: var(--color-teal-600);
  color: white;
  border: 3px solid var(--color-bg);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.how__step-t {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--color-navy-800);
  letter-spacing: -0.01em;
}
.how__step-d {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

@media (min-width: 900px) {
  .how__grid { grid-template-columns: 1fr 1fr 1fr; }
}


/* ============================================================
   TRUSTED BY
   ============================================================ */

.trust {
  padding: 40px var(--space-5) 32px;
  border-top: var(--border-thin);
  max-width: var(--max-width);
  margin: 0 auto;
}
.trust__eyebrow {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-align: center;
  margin: 0 0 22px;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: center;
  justify-items: center;
}
.trust__cell {
  padding: 16px 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--border-light);
}
.trust__cell:nth-child(3n) { border-right: none; }
.trust__cell:nth-child(n+4) { border-top: var(--border-light); }

.trust__logo {
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: opacity 0.15s, filter 0.15s;
}
.trust__logo:hover { opacity: 1; filter: grayscale(0%); }

/* Per-logo size normalization — these sources have extra whitespace
   inside the image canvas, so bump them up to match visual weight. */
.trust__logo[data-logo="umg"]       { max-height: 42px; }
.trust__logo[data-logo="rhenus"]    { max-height: 50px; }
.trust__logo[data-logo="ambyint"]   { max-height: 48px; }
.trust__logo[data-logo="quickfee"]  { max-height: 46px; }
.trust__logo[data-logo="ussilica"]  { max-height: 38px; }
.trust__logo[data-logo="geni"]      { max-height: 52px; }
.trust__logo[data-logo="staples"]   { max-height: 44px; }
.trust__logo[data-logo="opengov"]   { max-height: 24px; }
.trust__logo[data-logo="nbcu"]      { max-height: 32px; }
.trust__logo[data-logo="sermo"]     { max-height: 32px; }
.trust__logo[data-logo="aiwyn"]     { max-height: 48px; }
.trust__logo[data-logo="daytonfreight"] { max-height: 36px; }

.trust__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
.trust__cta {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-teal-600);
  transition: color 0.15s;
  text-align: center;
}
.trust__cta:hover { color: var(--color-teal-900); }
.trust__cta span { display: inline-block; transition: transform 0.15s; margin-left: 4px; }
.trust__cta:hover span { transform: translateX(3px); }

@media (min-width: 700px) {
  .trust__ctas {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
  }
  .trust__ctas .trust__cta + .trust__cta {
    position: relative;
    padding-left: 28px;
  }
  .trust__ctas .trust__cta + .trust__cta::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--color-border);
  }
}

/* Comparison nudge below the Platform feature grid — replaces the second
   trust-row CTA so the comparison hub link reaches the buyer at the
   moment they're sizing up the platform's surface area. */
.platform-compare {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--border-thin);
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.platform-compare em {
  font-style: italic;
  color: var(--color-text-primary);
}
.platform-compare a {
  color: var(--color-teal-600);
  font-weight: 500;
  margin-left: 4px;
}
.platform-compare a:hover { color: var(--color-teal-900); }
.platform-compare a span {
  display: inline-block;
  transition: transform 0.15s;
  margin-left: 4px;
}
.platform-compare a:hover span { transform: translateX(3px); }

/* ============================================================
   DEPLOYMENT — three-card strip below the Platform section
   ============================================================ */

.deploy__grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.deploy-card {
  background: var(--color-bg-tint);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.deploy-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.deploy-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-teal-600);
  flex-shrink: 0;
}
.deploy-card__icon svg { width: 22px; height: 22px; }
.deploy-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.deploy-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.deploy__cta {
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
}
.deploy__cta:hover { color: var(--color-teal-900); }

@media (min-width: 700px) {
  .deploy__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
  .trust__grid { grid-template-columns: repeat(6, 1fr); }
  .trust__cell:nth-child(3n) { border-right: var(--border-light); }
  .trust__cell:nth-child(6n) { border-right: none; }
  .trust__cell:nth-child(n+4) { border-top: none; }
  .trust__cell:nth-child(n+7) { border-top: var(--border-light); }
}


/* ============================================================
   WHAT'S INSIDE — feature grid + hover-expand
   ============================================================ */

.features { position: relative; }

/* The 8 cards now live in two semantic groups (Capabilities / Proof &
   depth), each with a small uppercase eyebrow. Both groups are hidden
   when an expanded panel is open. */
.features__group + .features__group { margin-top: 28px; }
.features__group-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.features[data-expanded] .features__group { display: none; }

.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.feature-card {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: white;
  transition: border-color 0.15s;
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.feature-card:hover { border-color: var(--color-navy-800); }

.feature-card__vis {
  height: 70px;
  background: var(--color-bg-soft);
  border-radius: 8px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  padding: 8px;
}
.feature-card__t {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--color-navy-800);
  letter-spacing: -0.01em;
}
.feature-card__d {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.feature-card__tag {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.feature-card__tag::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid var(--color-teal-600);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* --- Composer card stat-header variant ----------------------------------
   Replaces the small mini-mockup .feature-card__vis with a real-data
   stat block: number + label + auxiliary stat on top, segmented bar
   below. Each segment's flex value is the count, so segment widths
   are proportional to the breakdown shown in the expanded panel.
   Pattern is reusable on any preview card whose hero datapoint is a
   composite count + breakdown. */
.feature-card--stat .feature-card__vis {
  height: auto;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-stat__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.fc-stat__num {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy-800);
  letter-spacing: -0.02em;
  line-height: 1;
}
.fc-stat__lbl {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.fc-stat__aux {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-left: auto;
}
.fc-stat__bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
}
.fc-stat__seg { height: 100%; }
.fc-stat__seg:nth-child(1) { background: var(--color-teal-600); }
.fc-stat__seg:nth-child(2) { background: var(--color-teal-500); }
.fc-stat__seg:nth-child(3) { background: rgba(29, 158, 117, 0.55); }
.fc-stat__seg:nth-child(4) { background: rgba(29, 158, 117, 0.42); }
.fc-stat__seg:nth-child(5) { background: rgba(29, 158, 117, 0.30); }
.fc-stat__seg:nth-child(6) { background: rgba(29, 158, 117, 0.20); }

/* Icon below the stat block, above the title — matches the expanded
   panel's icon style so the preview and open states share visual DNA. */
.feature-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 10px;
}

/* Mini visualizations */
.mv-dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; }
.mv-dot { width: 14px; height: 14px; background: white; border: var(--border-thin); border-radius: 3px; }
.mv-dot--filled { background: #185FA5; border-color: #185FA5; }

.mv-flow { display: flex; align-items: center; gap: 4px; padding: 4px; height: 100%; }
.mv-box {
  background: white;
  border: var(--border-thin);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 9px;
  color: var(--color-text-secondary);
}
.mv-box--t {
  background: var(--color-teal-50);
  border-color: var(--color-teal-200);
  color: var(--color-teal-900);
}
.mv-box--l {
  background: #EEEDFE;
  border-color: #CECBF6;
  color: #3C3489;
}
.mv-arrow { color: var(--color-text-tertiary); font-size: 9px; }

.mv-shield {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}
.mv-badge {
  padding: 3px 7px;
  background: white;
  border: var(--border-thin);
  border-radius: 4px;
  font-size: 9px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.mv-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 4px;
}
.mv-bar { width: 8px; background: #185FA5; border-radius: 1px; }
.mv-bar--t { background: var(--color-teal-600); }

.mv-api,
.mv-cli,
.mv-cdc {
  padding: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.mv-api .m { color: var(--color-teal-600); font-weight: 500; }
.mv-api .p { color: #185FA5; }
.mv-cli .p { color: var(--color-teal-600); }
.mv-cli .v { color: #185FA5; }
.mv-cdc { display: flex; flex-direction: column; gap: 2px; }
.mv-cdc__row { display: flex; justify-content: space-between; }
.mv-cdc__row .g { color: var(--color-teal-600); }

.mv-agent {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 100%;
  padding: 0 4px;
}
.mv-agent__circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7F77DD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
  font-weight: 500;
}
.mv-agent__pill {
  background: white;
  border: var(--border-thin);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 9px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

/* Expanded panel — replaces grid on hover/click */
.feature-expanded { display: none; }
.features[data-expanded] .features__grid { display: none; }
.features[data-expanded="composer"] .feature-expanded[data-feature="composer"],
.features[data-expanded="connectors"] .feature-expanded[data-feature="connectors"],
.features[data-expanded="etl"] .feature-expanded[data-feature="etl"],
.features[data-expanded="cdc"] .feature-expanded[data-feature="cdc"],
.features[data-expanded="security"] .feature-expanded[data-feature="security"],
.features[data-expanded="scale"] .feature-expanded[data-feature="scale"],
.features[data-expanded="api"] .feature-expanded[data-feature="api"],
.features[data-expanded="cli"] .feature-expanded[data-feature="cli"] {
  display: grid;
}

.feature-expanded {
  position: relative;
  grid-template-columns: 1fr;
  background: white;
  border-radius: var(--radius-lg);
  border: var(--border-thin);
  overflow: hidden;
  min-height: 320px;
}
.feature-expanded__info {
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.feature-expanded__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-teal-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--color-teal-600);
  font-size: 18px;
}
/* Per-card icon-tint variants — match the destination landing page's
   accent so the homepage card visually previews where the user is going. */
/* Redesigned cards (Composer / ETL / CDC / API) use a darker teal so
   their SVG glyphs read with more weight than the lighter teal-600
   default used by the Unicode-glyph icons (connectors / security /
   scale / cli). The pink/coral palette previously used for API moved
   onto the POST method pill where it still pulls double duty as a
   "writes to external" semantic signal. */
.feature-expanded__icon[data-icon="composer"],
.feature-expanded__icon[data-icon="etl"],
.feature-expanded__icon[data-icon="cdc"],
.feature-expanded__icon[data-icon="api"],
.feature-expanded__icon[data-icon="connectors"],
.feature-expanded__icon[data-icon="cli"] {
  color: var(--color-teal-900);
}
.feature-expanded__icon svg { display: block; }
.feature-expanded__t {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--color-navy-800);
}
.feature-expanded__d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}
.feature-expanded__list {
  padding: 0;
  margin: 0 0 18px;
}
.feature-expanded__list li {
  font-size: 13px;
  color: var(--color-navy-800);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.feature-expanded__list li::before {
  content: '✓';
  color: var(--color-teal-600);
  flex-shrink: 0;
  font-weight: 500;
}
.feature-expanded__cta {
  font-size: 13px;
  color: var(--color-teal-600);
  font-weight: 500;
  margin-top: auto;
  align-self: flex-start;
}
.feature-expanded__cta::after { content: ' →'; }
.feature-expanded__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(10, 31, 61, 0.08);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feature-expanded__close:hover {
  background: var(--color-bg-soft);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.feature-expanded__close svg { display: block; }

.feature-expanded__clip {
  background: var(--color-navy-800);
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.clip-frame {
  width: 90%;
  height: 82%;
  background: var(--color-bg-soft);
  border-radius: 8px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.clip-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: var(--border-thin);
  margin-bottom: 10px;
}
.clip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C8D2E0;
}
.clip-title {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-left: 6px;
  font-family: var(--font-mono);
}
.clip-stream {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.clip-stream__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
/* Small visual gap separating logical groups within a screencap (e.g.
   the inbound vs outbound halves of the API integration screencap). */
.clip-stream__row--gap { padding: 4px 0; }
/* Sub-section header inside a screencap — small uppercase tracked label
   (used in the developer-experience two-part screencap). */
.clip-stream__head {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 4px 0 2px;
}
.clip-stream__head + .clip-stream__head { margin-top: 6px; }
.clip-pill {
  background: white;
  border: var(--border-thin);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9.5px;
}
.clip-stream .ok { color: var(--color-teal-600); }
.clip-stream .ag { color: #7F77DD; }
.clip-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
}
.clip-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
  background: var(--color-teal-600);
  animation: clip-progress 4s ease-in-out infinite;
}
@keyframes clip-progress {
  0% { width: 10%; }
  50% { width: 75%; }
  100% { width: 10%; }
}
.clip-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(10, 31, 61, 0.85);
  color: white;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.clip-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal-500);
}

@media (min-width: 600px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .features__grid { grid-template-columns: repeat(4, 1fr); }
  .feature-expanded { grid-template-columns: 1fr 1.6fr; }
}

/* ---- Right-side data display (security & scale panels) -------------
   Replaces the .feature-expanded__clip "live screencap" mockup on
   panels where real verifiable data carries more weight than UI
   simulation. Dark-navy background, top eyebrow with green dot, body
   grid or stack, and a footer strip with deployment pills or a
   customer name list. */

.feature-data {
  background: var(--color-navy-900);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 240px;
}
.feature-data__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.feature-data__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal-500);
  flex-shrink: 0;
}

/* 2x2 compliance card grid (security panel) */
.feature-data__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
}
.feature-data-cell {
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(93, 202, 165, 0.15);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-data-cell__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.005em;
}
.feature-data-cell__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-teal-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.feature-data-cell__body {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-on-navy-muted);
}

/* Vertical stat stack (scale panel) */
.feature-data__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.feature-data-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(93, 202, 165, 0.15);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.feature-data-stat__num {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-teal-500);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
  flex-shrink: 0;
  min-width: 90px;
}
.feature-data-stat__label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-on-navy);
}

/* Footer strip — eyebrow + deployment pills (security) or customer
   list (scale). Sits below a thin divider. */
.feature-data__foot {
  border-top: 0.5px solid rgba(93, 202, 165, 0.15);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-data__foot-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.feature-data__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feature-data__pill {
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 13px;
  font-weight: 500;
}
.feature-data__customers {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-on-navy);
  line-height: 1.5;
}

/* ---- Developer-experience code blocks (cli panel) ------------------
   Three labeled code blocks (CLI / Scripts / Agent API) inside the
   dark-navy .feature-data shell. Each block has a small uppercase
   pill + a one-line description, then a code area with light syntax
   highlighting. The dx-* span classes are scoped here because
   "syntax highlighting on a marketing page" is a niche need that
   doesn't deserve a global naming. */

.feature-data--dev {
  gap: 14px;
}
.dev-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dev-block__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dev-block__pill {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(93, 202, 165, 0.15);
  color: var(--color-teal-500);
}
.dev-block__lbl {
  font-size: 13px;
  color: var(--color-text-on-navy);
}
.dev-block__code {
  margin: 0;
  background: rgba(0, 0, 0, 0.28);
  border: 0.5px solid rgba(93, 202, 165, 0.15);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-on-navy);
  overflow-x: auto;
  white-space: pre;
}
.dev-block__code code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}
/* Syntax highlight tokens — scoped so they only apply inside the
   dev panel's code blocks, not to inline <code> elsewhere. */
.dev-block__code .dx-kw     { color: #D875A0; }
.dev-block__code .dx-fn     { color: var(--color-teal-500); }
.dev-block__code .dx-str    { color: #E8B85F; }
.dev-block__code .dx-prompt { color: var(--color-text-on-navy-muted); }
.dev-block__code .dx-arg    { color: #E8B85F; }
.dev-block__code .dx-muted  { color: var(--color-text-on-navy-muted); }

@media (max-width: 899px) {
  .feature-data--dev {
    padding: 24px 20px;
  }
  .dev-block__code {
    font-size: 11.5px;
    padding: 12px 14px;
  }
}

/* ---- CDC topology diagram (real-time CDC panel) ---------------------
   Source pill on the left, dashed connector to the binlog/CDC hub
   pill in the middle, four solid fan-out connectors to destination
   pills on the right. SVG draws the lines (so they scale with the
   container); pills are absolutely positioned with percentages over
   the same viewBox so lines and pills stay aligned at any width. */
.cdc-topo {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 280;
  flex: 1;
  /* Slight downward bias so the diagram doesn't crowd the eyebrow. */
  margin-top: 4px;
}
.cdc-topo__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cdc-topo__node,
.cdc-topo__dest {
  position: absolute;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(93, 202, 165, 0.30);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 1;
}
.cdc-topo__node--hub {
  border-color: rgba(93, 202, 165, 0.55);
}
.cdc-topo__name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-teal-500);
  letter-spacing: -0.01em;
}
.cdc-topo__sub {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-navy-muted);
}
.cdc-topo__dest {
  flex-direction: row;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 13px;
  color: var(--color-text-on-navy);
}
.cdc-topo__count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-teal-500);
}

/* Horizontal 3-up stat row (CDC panel). Each card is a big number
   with an optional unit suffix and a label below. Stacks to a column
   on mobile. */
.feature-data__stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.feature-data-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(93, 202, 165, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feature-data-stat-card__num {
  font-size: 26px;
  font-weight: 500;
  color: var(--color-teal-500);
  letter-spacing: -0.015em;
  font-feature-settings: 'tnum';
  line-height: 1.1;
}
.feature-data-stat-card__unit {
  font-size: 14px;
  color: var(--color-text-on-navy);
  font-weight: 400;
  margin-left: 2px;
}
.feature-data-stat-card__label {
  font-size: 12.5px;
  color: var(--color-text-on-navy);
}

/* Bottom mono caption strip — subtle dot-separated keywords. Sits
   below a thin teal-tinted divider to match the .feature-data__foot
   rhythm without taking the eyebrow + structure of __foot. */
.feature-data__caption {
  border-top: 0.5px solid rgba(93, 202, 165, 0.15);
  padding-top: 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-on-navy-muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Mobile: the topology diagram is the visual heart of the panel at
   desktop, but at narrow widths the destination labels can't fit in
   the percentage-positioned pills. Hide the diagram and let the
   bullets in the info panel + the in-production stats carry the
   message — both already say the same thing in text form. Stats
   stack to a single column. */
@media (max-width: 899px) {
  .feature-data--cdc {
    padding: 24px 20px;
  }
  .cdc-topo {
    display: none;
  }
  .feature-data__stats-row {
    grid-template-columns: 1fr;
  }
}

/* ---- "What's underneath" right-side panel --------------------------
   Light-bg variant of the data display (vs the dark-navy .feature-data
   used by security & scale). Used by panels where the headline number
   has a numeric breakdown that visualizes well as a row-bar list —
   Composer (3,979 templates by category) is the first instance. */

.feature-under {
  background: var(--color-bg-soft);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
}
.feature-under__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 14px;
}
.feature-under__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.feature-under__num {
  font-size: 38px;
  font-weight: 600;
  color: var(--color-navy-800);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.feature-under__lbl {
  font-size: 14px;
  color: var(--color-text-secondary);
}
.feature-under__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 460px;
}
.feature-under__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.fu-row {
  display: grid;
  grid-template-columns: 168px 1fr 56px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font-size: 13px;
}
.fu-row__name {
  color: var(--color-navy-800);
}
.fu-row__bar {
  position: relative;
  height: 4px;
  background: rgba(29, 158, 117, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.fu-row__bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w) * 1%);
  background: var(--color-teal-600);
}
.fu-row__count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  text-align: right;
}
.feature-under__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--border-light);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.feature-under__foot-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy-800);
  letter-spacing: -0.02em;
}

/* "Unlimited" row variant — count text instead of a number, lighter
   bar to signal the value isn't a hard ceiling. Used on the
   Connectors panel's "Custom (config-built)" row. */
.fu-row--unlimited .fu-row__bar {
  background: rgba(29, 158, 117, 0.12);
}
.fu-row--unlimited .fu-row__bar::after {
  background: rgba(29, 158, 117, 0.50);
}
.fu-row--unlimited .fu-row__count {
  font-style: italic;
  color: var(--color-text-tertiary);
}

/* ---- Connector chip grid (Connectors panel) ------------------------
   12-cell grid (4 cols × 3 rows on desktop) sitting between the big
   "270+ pre-built connectors" header and the breakdown bars. Eleven
   chips show real connector names with stylized monogyph icons; the
   twelfth ("+N more") uses a soft-beige fill to read as a teaser. */
.feature-under--connectors {
  gap: 4px;
}
.conn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 22px;
}
.conn-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-navy-800);
  min-height: 44px;
}
.conn-chip__icon {
  width: 16px;
  height: 16px;
  color: var(--color-teal-900);
  flex-shrink: 0;
}
.conn-chip--more {
  background: #F4EFE5;
  border-color: transparent;
  color: var(--color-text-secondary);
  justify-content: center;
  font-size: 12.5px;
}

@media (max-width: 899px) {
  .feature-under--connectors {
    padding: 24px 20px;
  }
  .conn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- 2×2 pattern matrix right-side panel ---------------------------
   Third light-bg right-side variant (alongside .feature-under). Used
   when the card's content is a small set of patterns that map cleanly
   to two binary axes. ETL is the first instance: forward/reverse vs
   transform-first/load-first → ETL, ELT, Reverse ETL, Streaming ETL.
   Top eyebrow + column headers + 2×2 grid (with vertical row labels)
   + bottom strip. */

.feature-matrix {
  background: var(--color-bg-soft);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
}
.feature-matrix__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 16px;
  text-align: center;
}
.feature-matrix__head {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.feature-matrix__col-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: center;
}
.feature-matrix__grid {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  flex: 1;
}
/* FORWARD / REVERSE labels rotated to read bottom-up. */
.feature-matrix__row-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-cell {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fm-cell__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fm-cell__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy-800);
  letter-spacing: -0.01em;
}
.fm-cell__pill {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: inherit;
}
.fm-cell__pill--green  { background: var(--color-teal-50); color: var(--color-teal-900); }
.fm-cell__pill--blue   { background: #E6F1FB; color: #185FA5; }
.fm-cell__pill--purple { background: #EEEDFE; color: #3C3489; }
.fm-cell__pill--amber  { background: #FCE9D8; color: #A65427; }
.fm-cell__code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  background: none;
  padding: 0;
}
.fm-cell__d {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.feature-matrix__foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: var(--border-light);
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* Mobile: collapse the 2×2 grid to a vertical stack of 4 cards.
   The forward/reverse and transform-first/load-first axes only carry
   meaning at desktop where the spatial layout shows them — at narrow
   width we drop the labels and just stack the cards top-to-bottom. */
@media (max-width: 899px) {
  .feature-matrix {
    padding: 24px 20px;
  }
  .feature-matrix__head { display: none; }
  .feature-matrix__row-label { display: none; }
  .feature-matrix__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }
}

/* ---- API endpoints right-side panel ---------------------------------
   Fourth light-bg right-side variant alongside .feature-under (stat
   breakdown), .feature-matrix (2-axis pattern grid), and the dark
   .feature-data. Two grouped lists of endpoint rows (External APIs +
   Etlworks-published APIs) show the bidirectional story; a chip cloud
   at the bottom enumerates what's auto-handled. */

.feature-api {
  background: var(--color-bg-soft);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.feature-api__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.feature-api__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-api__group-head {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.feature-api__group-head strong {
  font-weight: 600;
  color: var(--color-navy-800);
}
.feature-api__card {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-api__row {
  display: grid;
  grid-template-columns: 16px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.feature-api__arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  line-height: 1;
}
.feature-api__arrow--in   { color: var(--color-teal-600); }
.feature-api__arrow--out  { color: #C0496A; }
.feature-api__arrow--pub  { color: var(--color-text-tertiary); font-size: 11px; }
.feature-api__method {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px 6px;
  border-radius: 4px;
}
.feature-api__method--get  { background: var(--color-teal-50); color: var(--color-teal-900); }
.feature-api__method--post { background: #FBEAF0; color: #993556; }
.feature-api__url {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  background: none;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feature-api__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.feature-api__foot {
  border-top: var(--border-light);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.feature-api__foot-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.feature-api__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feature-api__chip {
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  font-weight: 500;
}
.feature-api__chip--more {
  background: rgba(29, 158, 117, 0.06);
  color: var(--color-text-tertiary);
  font-weight: 400;
}

@media (max-width: 899px) {
  .feature-api {
    padding: 24px 20px;
  }
  .feature-api__row {
    grid-template-columns: 16px 50px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .feature-api__url {
    font-size: 11.5px;
  }
}


/* ============================================================
   PRICING
   ============================================================ */

.prices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.price {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: white;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* .price--feat removed — all three plans render identically. */

.price__tag {
  font-size: 11px;
  color: var(--color-teal-600);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.price__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.price__amt {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.price__num {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-navy-800);
}
.price__per {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.price__rec {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
  line-height: 1.4;
}

.price__calc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.price__calc:hover {
  background: var(--color-teal-200);
  color: var(--color-teal-1000);
}
.price__calc svg { flex-shrink: 0; color: var(--color-teal-600); }

.price__feats {
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.price__feats li {
  font-size: 13px;
  padding: 6px 0;
  color: var(--color-navy-800);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.price__feats li::before {
  content: '✓';
  color: var(--color-teal-600);
  font-weight: 500;
  flex-shrink: 0;
}
.price__feats li.off {
  color: var(--color-text-tertiary);
}
.price__feats li.off::before {
  content: '–';
  color: #B5C2D9;
}

.price__cta {
  padding: 11px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border: var(--border-thin);
  background: white;
  color: var(--color-navy-800);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  display: block;
}
.price__cta:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-navy-800);
}

.price__foot {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--border-thin);
  text-align: center;
}
.price__foot a {
  color: var(--color-teal-600);
  font-weight: 500;
}
.price__foot a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .prices { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   FOOTER CTA (closing dark CTA)
   ============================================================ */

.footcta {
  padding: 72px var(--space-5) 64px;
  background: var(--color-navy-800);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: var(--border-thin);
}
.footcta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-teal-600), transparent);
}

.footcta__h {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 auto 16px;
  max-width: 540px;
  color: white;
}
.footcta__h em { font-style: normal; color: var(--color-teal-500); }

.footcta__sub {
  font-size: 16px;
  color: var(--color-text-on-navy);
  max-width: 460px;
  margin: 0 auto 28px;
  line-height: 1.55;
}

.footcta__cta {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.footcta__btn-primary {
  background: var(--color-teal-500);
  color: var(--color-teal-1000);
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.footcta__btn-primary:hover { opacity: 0.9; }

.footcta__btn-ghost {
  background: transparent;
  color: white;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border: 0.5px solid var(--color-navy-700);
  cursor: pointer;
  transition: background 0.15s;
}
.footcta__btn-ghost:hover { background: var(--color-navy-700); }


/* ============================================================
   AI AGENT SECTION
   ============================================================ */

.agent__header {
  max-width: 760px;
  margin-bottom: 40px;
}
.agent__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 640px;
}

/* "Watch the agent on the job" CTA — sits inside the tools column
   below the 6 tool cards. Placeholder click-handler / href until the
   companion video is recorded; will be wired to a modal or inline
   playback in a follow-up handoff (matching the hero pattern). */
.ai-video-cta {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease;
}
.ai-video-cta:hover { background: #F5F7FA; }
.ai-video-cta__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-teal-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-video-cta__triangle {
  width: 0;
  height: 0;
  border-left: 8px solid var(--color-teal-600);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
}
.ai-video-cta__text { flex: 1; min-width: 0; }
.ai-video-cta__title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.ai-video-cta__sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.ai-video-cta__chevron {
  color: var(--color-teal-600);
  font-size: 16px;
  flex-shrink: 0;
}

.agent__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}

/* --- Demo: agent session still→video, edge-to-edge in its column --- */
/* .agent-demo is a plain positioning wrapper. Border / radius / overflow
   live on .simba-media (mirroring the hero pattern) so .simba-media__stop
   can sit outside the visible card without being clipped. */
.agent-demo {
  position: relative;
}

/* Still→video stack. Aspect-ratio locks the wrapper to the source files'
   1:1 ratio so the video can be absolutely positioned without layout
   shift between the still and the moving frame. */
.simba-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2160 / 2160;
  background: var(--color-bg-soft);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 31, 61, 0.06);
}
.simba-media__image,
.simba-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms ease;
}
.simba-media__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.simba-media.is-playing .simba-media__image {
  opacity: 0;
}
.simba-media.is-playing .simba-media__video {
  opacity: 1;
}
/* Close ✕ button — small circular icon at the top-right corner of the
   video card, positioned half-outside the frame so it doesn't cover
   any video content. Visible only during playback; clicking it snaps
   back to the static image. Mirrors the hero's pattern. */
.simba-media__stop {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #FFFFFF;
  color: var(--color-navy-800);
  border: 0.5px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(10, 31, 61, 0.12);
  transition: background 150ms ease, border-color 150ms ease;
  z-index: 2;
}
.simba-media__stop:hover {
  background: #F5F7FA;
  border-color: var(--color-text-secondary);
}
.simba-media__stop[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .simba-media__image,
  .simba-media__video {
    transition: none;
  }
}

.agent-demo__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: var(--border-light);
}
.agent-demo__dots {
  display: inline-flex;
  gap: 4px;
}
.agent-demo__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C8D2E0;
}
.agent-demo__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-left: 8px;
}
.agent-demo__live {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-teal-600);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.agent-demo__live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal-600);
}

.agent-demo__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  margin: 14px 0 8px;
}
.agent-demo__label:first-child { margin-top: 0; }

.agent-demo__msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.agent-demo__msg--user {
  background: #E8EEF7;
  color: var(--color-navy-800);
}
.agent-demo__msg--agent {
  background: var(--color-teal-50);
  border: 0.5px solid var(--color-teal-200);
  color: var(--color-teal-1000);
}
.agent-demo__text {
  font-size: 13.5px;
  color: var(--color-navy-800);
  margin: 0 0 10px;
}

.agent-demo__tool {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
}
.agent-demo__tool-name {
  font-weight: 500;
  color: var(--color-teal-600);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-demo__tool-name::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal-600);
  flex-shrink: 0;
}
.agent-demo__tool-out {
  color: var(--color-navy-800);
  word-break: break-word;
}
.agent-demo__tool-out em { color: var(--color-text-tertiary); font-style: normal; }
.agent-demo__tool-out .kw { color: #7F77DD; }

/* --- Tools column (left) --- */
.agent__tools {
  display: flex;
  flex-direction: column;
}

.agent__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  flex: 1;
}

.agent-tool {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--color-bg);
  transition: border-color 0.15s;
}
.agent-tool:hover { border-color: var(--color-navy-800); }

.agent-tool__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-teal-50);
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.agent-tool__icon svg { width: 16px; height: 16px; }

.agent-tool__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.25;
}
.agent-tool__d {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}

@media (min-width: 900px) {
  .agent__body {
    /* Equal columns. Tools column (left) stretches to match the chat
       screenshot's natural height on the right; the .ai-video-cta
       below the grid plus the grid's flex:1 absorb whatever vertical
       space is left over so both columns end on the same baseline. */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}


/* ============================================================
   PRICING CALCULATOR MODAL
   ============================================================ */

.calc-modal[hidden] { display: none; }
.calc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.calc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 39, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.calc-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(10, 31, 61, 0.18);
  padding: 28px 28px 24px;
}

.calc-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.calc-modal__close:hover {
  background: var(--color-bg-soft);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.calc-modal__head {
  margin-bottom: 20px;
}
.calc-modal__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-navy-800);
  margin: 6px 0 6px;
}
.calc-modal__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.calc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 20px;
}
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc-field--full { grid-column: 1 / -1; }
.calc-field__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.calc-field input,
.calc-field select {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-navy-800);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--color-teal-600);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}
.calc-field input:disabled,
.calc-field select:disabled {
  background: var(--color-bg-soft);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}
.calc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5878' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.calc-result {
  background: var(--color-bg-soft);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.calc-result__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}
.calc-result__amount {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-navy-800);
}
.calc-result__amount span {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0;
}
.calc-result__alt {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.calc-notes {
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.calc-notes li {
  display: flex;
  gap: 8px;
  padding: 2px 0;
}
/* Conditional notes (e.g. the multi-node infrastructure-fee line) toggle
   their hidden attribute via JS — without this, the more-specific flex
   rule above would override the browser's default [hidden] { display: none }. */
.calc-notes li[hidden] { display: none; }
.calc-notes li::before {
  content: '·';
  color: var(--color-teal-600);
  font-weight: 700;
  flex-shrink: 0;
}

body.calc-open { overflow: hidden; }

/* ---- Per-environment configuration block ----------------------------- */

/* The single Environments number input is now an env list — up to 4 cards,
   each carrying its own plan + nodes. Each env is a multi-node Enterprise
   environment in its own right, hence the per-env infrastructure-fee math
   in the calculator JS. */
.calc-envs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.calc-envs__count {
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
.calc-envs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-env {
  background: var(--color-bg-soft);
  border: 0.5px solid var(--color-border-light);
  border-radius: 8px;
  padding: 12px 14px;
}
.calc-env__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.calc-env__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-navy-800);
  letter-spacing: 0.01em;
}
.calc-env__remove {
  background: transparent;
  border: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-tertiary);
  border-radius: 4px;
  padding: 0;
  transition: color 0.12s, background 0.12s;
}
.calc-env__remove:hover {
  color: var(--color-navy-800);
  background: rgba(10, 31, 61, 0.06);
}
.calc-env__fields {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
}
.calc-envs__add {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-teal-600);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.calc-envs__add:hover:not(:disabled) {
  border-color: var(--color-teal-600);
  background: var(--color-teal-50);
}
.calc-envs__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ============================================================
   ABOUT PAGE — page hero, story, stats, leaders, clouds, contact
   ============================================================ */

/* Page hero (text-only intro for content pages) */
.page-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px var(--space-5) 48px;
}
.page-hero__inner { max-width: 920px; }
.page-hero__h1 {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-navy-800);
  margin: 4px 0 22px;
}
.page-hero__h1 em {
  font-style: normal;
  color: var(--color-teal-600);
}
.page-hero__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 640px;
}
.page-hero__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.page-hero__meta-sep { color: var(--color-text-tertiary); }

/* Our story — three-column body */
.story__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 32px;
}
.story__h2 { max-width: 820px; }
.story__col-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal-600);
  margin-bottom: 14px;
}
.story__p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}
.story__p strong {
  color: var(--color-navy-800);
  font-weight: 500;
}
.story__rule {
  border: none;
  border-top: var(--border-light);
  margin: 22px 0;
}
.story__mission {
  font-size: 15px;
  line-height: 1.55;
  font-style: italic;
  color: var(--color-navy-800);
  margin: 0;
}
@media (max-width: 900px) {
  .story__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* By the numbers — horizontal stat row with vertical dividers */
.about-stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--border-light);
  border-bottom: var(--border-light);
  margin-top: 32px;
}
.about-stats__cell {
  padding: 36px 24px;
  border-right: var(--border-light);
}
.about-stats__cell:last-child { border-right: none; }
.about-stats__n {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-navy-800);
  margin-bottom: 12px;
}
.about-stats__n em {
  font-style: normal;
  color: var(--color-teal-600);
}
.about-stats__n--word {
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.02em;
}
.about-stats__l {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
@media (max-width: 900px) {
  .about-stats__row { grid-template-columns: repeat(2, 1fr); }
  .about-stats__cell:nth-child(2) { border-right: none; }
  .about-stats__cell:nth-child(n+3) { border-top: var(--border-light); }
  .about-stats__cell { padding: 24px 16px; }
}

/* Leadership — three cards with circular photos */
.leaders__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.leader {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.leader__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-teal-500);
  margin-bottom: 24px;
}
.leader__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.leader__name {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.leader__role {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal-600);
  margin-bottom: 16px;
}
.leader__bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
@media (max-width: 900px) {
  .leaders__grid { grid-template-columns: 1fr; }
}

/* Where we run — cloud strip with logos */
.clouds__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 32px 8px;
  margin-top: 8px;
}
.clouds__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  border-right: var(--border-light);
  min-height: 96px;
}
.clouds__cell:last-child { border-right: none; }
.clouds__logo {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.clouds__label {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}
@media (max-width: 900px) {
  .clouds__strip { grid-template-columns: repeat(2, 1fr); padding: 16px 8px; }
  .clouds__cell { border-right: none; border-bottom: var(--border-light); padding: 16px 8px; }
  .clouds__cell:nth-child(odd) { border-right: var(--border-light); }
  .clouds__cell:nth-last-child(-n+2) { border-bottom: none; }
  .clouds__cell:last-child { grid-column: 1 / -1; border-right: none; }
}

/* Contact — four small info cards */
.contact-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.contact-strip__card {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 110px;
}
.contact-strip__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
}
.contact-strip__value {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-navy-800);
  font-style: normal;
}
.contact-strip__value--link { color: var(--color-teal-600); }
.contact-strip__value--link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .contact-strip__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   CONTACT PAGE — paths, simba banner, form, direct contact panel
   ============================================================ */

/* Three path cards (sales / support / demo) */
.contact-paths { padding-top: 24px; }
.contact-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.path-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.path-card:hover {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
}
.path-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-teal-50);
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.path-card__t {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin: 0;
}
.path-card__d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}
.path-card__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal-600);
  margin-top: 12px;
}
.path-card--feat { border-color: var(--color-teal-600); }
@media (max-width: 900px) {
  .contact-paths__grid { grid-template-columns: 1fr; }
}

/* Simba banner */
.simba-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-violet-50);
  border-radius: var(--radius-lg);
  margin-bottom: 56px;
}
.simba-banner__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-violet-100);
  color: var(--color-violet-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.simba-banner__copy { flex: 1; min-width: 0; }
.simba-banner__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 2px;
}
.simba-banner__sub {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.simba-banner__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-violet-600);
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.simba-banner__cta:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .simba-banner { flex-direction: column; align-items: flex-start; }
  .simba-banner__cta { padding-left: 0; }
}

/* Two-column body (form / direct contact) */
.contact-body__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contact-body__h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  margin-bottom: 12px;
}
.contact-body__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  max-width: 520px;
}
@media (max-width: 900px) {
  .contact-body__cols { grid-template-columns: 1fr; gap: 48px; }
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.contact-form__opt {
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-left: 4px;
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-navy-800);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-teal-600);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}
.contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%234A5878' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.contact-form__field--full { width: 100%; }
.contact-form__submit {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.contact-form__status {
  font-size: 14px;
  color: var(--color-text-secondary);
  min-height: 1em;
}
.contact-form__status[data-state="sending"] { color: var(--color-text-secondary); }
.contact-form__status[data-state="sent"]    { color: var(--color-teal-600); }
.contact-form__status[data-state="error"]   { color: #B23E3E; }
.contact-form__legal {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin: 0;
}
.contact-form__legal a {
  color: var(--color-teal-600);
  text-decoration: underline;
}
@media (max-width: 700px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

/* Direct contact panel (right column) */
.direct-contact__panel {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.direct-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.direct-contact__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: var(--border-light);
  color: var(--color-navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.direct-contact__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.direct-contact__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
}
.direct-contact__value {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-navy-800);
  font-style: normal;
  word-break: break-word;
}
.direct-contact__value--link { color: var(--color-teal-600); }
.direct-contact__value--link:hover { text-decoration: underline; }


/* ============================================================
   LEGAL PAGE — meta line, summary card, sticky TOC, article
   ============================================================ */

.legal-meta {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
  margin-top: 22px;
  max-width: 640px;
}

/* Plain-English summary card */
.legal-summary-wrap { padding-top: 24px; padding-bottom: 24px; }
.legal-summary {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.legal-summary .sec__eyebrow { margin-bottom: 18px; }
.legal-summary__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legal-summary__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.legal-summary__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal-600);
}
.legal-summary__list strong {
  color: var(--color-navy-800);
  font-weight: 500;
}

/* Two-col body: TOC sticky / article */
.legal-body { padding-top: 32px; padding-bottom: 56px; }
.legal-body__cols {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .legal-body__cols { grid-template-columns: 1fr; gap: 32px; }
}

/* TOC */
.legal-toc {
  position: sticky;
  top: 88px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.legal-toc__eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin-bottom: 16px;
}
.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-toc__list li {
  counter-increment: toc;
  font-size: 14px;
  line-height: 1.45;
}
.legal-toc__list a {
  display: block;
  padding: 4px 0;
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.12s;
}
.legal-toc__list a::before {
  content: counter(toc) ". ";
  color: var(--color-text-tertiary);
  margin-right: 4px;
}
.legal-toc__list a:hover { color: var(--color-text-primary); }
.legal-toc__list a.is-active {
  color: var(--color-teal-600);
  font-weight: 500;
}
.legal-toc__list a.is-active::before { color: var(--color-teal-600); }
@media (max-width: 900px) {
  .legal-toc { position: static; max-height: none; }
}

/* Article */
.legal-article { counter-reset: section; max-width: 760px; }
.legal-section {
  counter-increment: section;
  scroll-margin-top: 88px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.legal-section + .legal-section { padding-top: 32px; }
.legal-section__h {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-navy-800);
  margin: 0 0 20px;
}
.legal-section__h::before {
  content: counter(section) ". ";
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-right: 6px;
}
.legal-section__sub {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-navy-800);
  margin: 24px 0 12px;
}
.legal-article p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
}
.legal-article p:last-child { margin-bottom: 0; }
.legal-article p strong {
  color: var(--color-navy-800);
  font-weight: 500;
}
.legal-article a {
  color: var(--color-teal-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-article a:hover { text-decoration: none; }
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal-600);
}

/* Teal-tinted callout for emphasis paragraphs */
.legal-callout {
  background: var(--color-teal-50);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 16px 0;
}
.legal-callout p {
  color: var(--color-navy-800);
  font-size: 15px;
  line-height: 1.65;
}

/* Tables — used for sub-processor list, retention schedule, etc. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
  border-radius: var(--radius-md);
  border: var(--border-light);
}
.legal-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.legal-article th,
.legal-article td {
  text-align: left;
  padding: 12px 16px;
  vertical-align: top;
  color: var(--color-text-secondary);
  border-bottom: var(--border-light);
}
.legal-article th {
  font-weight: 500;
  color: var(--color-navy-800);
  background: var(--color-bg-soft);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.legal-article tbody tr:last-child td { border-bottom: none; }
.legal-article td strong {
  color: var(--color-navy-800);
  font-weight: 500;
}

/* Closing contact block (after the numbered sections) */
.legal-contact {
  margin-top: 56px;
  padding-top: 32px;
  border-top: var(--border-light);
}
.legal-contact .sec__eyebrow { margin-bottom: 14px; }
.legal-contact__addr {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-top: 14px;
}
.legal-contact__addr strong {
  color: var(--color-navy-800);
  font-weight: 500;
}

/* DPA — grouped TOC + section pills + explicit subsection numbering */

/* Grouped TOC: a stack of section groups, each with a small uppercase
   group title and a bullet-less sub-list of links. */
.legal-toc--grouped .legal-toc__group + .legal-toc__group { margin-top: 18px; }
.legal-toc__group-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
.legal-toc__sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-toc__sublist li {
  font-size: 14px;
  line-height: 1.45;
}
.legal-toc__sublist a {
  display: block;
  padding: 3px 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.12s;
}
.legal-toc__sublist a:hover { color: var(--color-navy-800); }
.legal-toc__sublist a.is-active {
  color: var(--color-teal-600);
  font-weight: 500;
}

/* DPA group — a section pill marker, then the contained .legal-section
   sub-blocks. The first group's pill snugs to the article top; later
   pills get extra breathing room above. */
.dpa-group + .dpa-group { margin-top: 56px; }
.dpa-group__pill {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  scroll-margin-top: 88px;
}
.dpa-group__pill--annex { /* same look — alias for clarity in markup */ }

/* Disable the auto-counter on .legal-section h2::before for pages that
   carry their own explicit numbers (DPA's mixed scheme: 1-5, B.1-B.6,
   etc., with annexes that have no number at all). */
.legal-article--no-counter .legal-section { counter-increment: none; }
.legal-article--no-counter .legal-section__h::before { content: none; }

/* Explicit subsection number prefix used on .legal-article--no-counter */
.legal-section__num {
  display: inline-block;
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-right: 8px;
  min-width: 1.5em;
  font-feature-settings: "tnum";
}


/* ============================================================
   LEGAL HUB — /legal.html (cards of downloadable docs + HTML pages)
   ============================================================ */

.legal-hub { padding-top: 16px; padding-bottom: 56px; }

.legal-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .legal-cards { grid-template-columns: 1fr; }
}

.legal-card {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.legal-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: var(--border-light);
  margin-bottom: 4px;
}
.legal-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-teal-50);
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.legal-card__title {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-navy-800);
  letter-spacing: -0.01em;
}
.legal-card__count {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.legal-card__list {
  display: flex;
  flex-direction: column;
}
.legal-card__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  gap: 18px;
  padding: 18px 0;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-bottom: var(--border-light);
  transition: background 0.12s;
}
.legal-card__item:last-child { border-bottom: none; }
.legal-card__item:hover {
  background: var(--color-bg-tint);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-md);
}
.legal-card__item:hover .legal-card__item-arrow {
  transform: translateX(2px);
}
.legal-card__item-badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 6px 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}
.legal-card__item-badge--html {
  background: var(--color-teal-50);
  color: var(--color-teal-900);
}
.legal-card__item-badge--docx {
  background: var(--color-violet-50);
  color: var(--color-violet-600);
}
.legal-card__item-badge--pdf {
  background: var(--color-coral-50);
  color: var(--color-coral-600);
}
.legal-card__item-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.35;
}
.legal-card__item-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}
.legal-card__item-arrow {
  color: var(--color-teal-600);
  font-size: 16px;
  transition: transform 0.15s;
  text-align: center;
}

/* Closing CTA strip */
.legal-hub__cta {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-top: 40px;
}
.legal-hub__cta p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
.legal-hub__cta strong {
  color: var(--color-navy-800);
  font-weight: 500;
}
.legal-hub__cta a {
  color: var(--color-teal-600);
  text-decoration: none;
  font-weight: 500;
}
.legal-hub__cta a:hover { text-decoration: underline; }


/* ============================================================
   ON-PREM INSTALLER PAGES — /downloads/request.html + download.html
   ============================================================ */

/* Per-page hero-to-section gap override — without this the .sec
   default 56px top padding stacks with .page-hero's 48px bottom,
   producing ~104px of empty space between the subhead and the
   form. Mirrors the same override pattern on .legal-hub and
   .contact-paths. */
.installer-request { padding-top: 24px; }

/* Request page — 2-col form / perks layout */
.installer-request__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .installer-request__cols { grid-template-columns: 1fr; gap: 40px; }
}

.installer-form__captcha {
  margin: 4px 0;
  /* recaptcha widget is 304x78; leave room and let it left-align */
  min-height: 78px;
}

.installer-perks {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.installer-perks__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 20px;
}
.installer-perks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.installer-perks__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.installer-perks__list strong {
  color: var(--color-navy-800);
  font-weight: 500;
}
.installer-perks__check {
  color: var(--color-teal-600);
  margin-top: 3px;
  flex-shrink: 0;
}

/* 3-col bottom row, used on both request.html and download.html */
.installer-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: var(--border-light);
}
.installer-bottom__cell { min-width: 0; }
.installer-bottom__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 8px;
}
.installer-bottom p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
.installer-bottom a {
  color: var(--color-teal-600);
  text-decoration: none;
}
.installer-bottom a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .installer-bottom { grid-template-columns: 1fr; gap: 24px; }
}

/* Download page — expiry tip */
.dl-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-amber-50);
  color: var(--color-amber-700);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 32px;
}
.dl-tip a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}
.dl-tip strong {
  color: inherit;
  font-weight: 500;
}

/* Download page — expired/error state */
.dl-expired {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
}
.dl-expired__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 8px;
}
.dl-expired p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
.dl-expired a {
  color: var(--color-teal-600);
  text-decoration: none;
}
.dl-expired a:hover { text-decoration: underline; }

/* Download cards (Linux / Windows) */
.dl-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.dl-card {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dl-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dl-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-teal-50);
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dl-card__icon--windows {
  /* Windows multicolor classic — soft blue tint, brand-ish blue glyph */
  background: #E5F0FB;
  color: #0078D4;
}
.dl-card__title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-navy-800);
  letter-spacing: -0.01em;
  margin: 0;
}
.dl-card__meta {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.dl-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}
.dl-card__body strong {
  color: var(--color-navy-800);
  font-weight: 500;
}
.dl-card__btn {
  align-self: flex-start;
  text-decoration: none;
}
@media (max-width: 700px) {
  .dl-cards { grid-template-columns: 1fr; }
}

/* License-only horizontal card */
.dl-license {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  margin-top: 20px;
}
.dl-license__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: var(--border-light);
  color: var(--color-navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-license__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 4px;
}
.dl-license__body p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.dl-license__body a {
  color: var(--color-teal-600);
  text-decoration: none;
}
.dl-license__body a:hover { text-decoration: underline; }
.dl-license__btn { white-space: nowrap; }
@media (max-width: 700px) {
  .dl-license { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .dl-license__icon { display: none; }
  .dl-license__btn { justify-self: flex-start; }
}


/* ============================================================
   BILLING PORTAL — /customer-portal.html
   Wrapper around the legacy Paywhirl-hosted billing UI.
   ============================================================ */

.billing-portal { padding-top: 16px; padding-bottom: 56px; }

/* Audience clarifier — gray info banner above the embed */
.billing-clarifier {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: var(--color-bg-soft);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.billing-clarifier__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: var(--border-light);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.billing-clarifier__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.billing-clarifier__body strong {
  color: var(--color-navy-800);
  font-weight: 500;
}
.billing-clarifier__body a {
  color: var(--color-teal-600);
  font-weight: 500;
  text-decoration: none;
}
.billing-clarifier__body a:hover { text-decoration: underline; }

/* White wrapper around the Paywhirl embed. The Paywhirl JS injects
   its own UI into the script tag's location — this card just gives
   the embed a clean frame. */
.billing-embed {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 4px;
  min-height: 360px;
}

/* Soft upgrade prompt — teal callout below the embed */
.billing-upgrade {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: var(--color-teal-50);
  border: 0.5px solid var(--color-teal-200);
  border-radius: var(--radius-lg);
  margin-top: 28px;
}
.billing-upgrade__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-teal-1000);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.billing-upgrade__copy { flex: 1; min-width: 0; }
.billing-upgrade__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy-800);
  margin-bottom: 2px;
}
.billing-upgrade__sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.billing-upgrade__btn {
  background: var(--color-teal-1000);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s;
}
.billing-upgrade__btn:hover { opacity: 0.88; }

@media (max-width: 700px) {
  .billing-clarifier { flex-direction: column; gap: 12px; padding: 16px 18px; }
  .billing-upgrade { flex-direction: column; align-items: flex-start; padding: 20px; }
  .billing-upgrade__btn { align-self: stretch; text-align: center; }
}

/* ============================================================
   Customers page (.cs-*)
   Powers /customers.html and the /solutions/<industry>.html
   category pages. Featured card → filter bar → card grid → CTA.
   ============================================================ */

.cs-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5) 56px;
}

/* Featured story card — flows directly out of the page hero, no
   margin-top divider above. */
.cs-featured {
  background: var(--color-navy-900);
  color: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
.cs-featured__main {
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-featured__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
  margin: 0;
}
.cs-featured__customer {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cs-featured__customer-name { color: white; }
.cs-featured__customer-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.cs-featured__quote {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  color: white;
}
.cs-featured__stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cs-featured__stat-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-teal-500);
  line-height: 1.1;
}
.cs-featured__stat-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  line-height: 1.3;
}
.cs-featured__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal-500);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}
.cs-featured__cta:hover { color: var(--color-teal-200); }
.cs-featured__panel {
  background: var(--color-navy-800);
  padding: 32px 26px;
  background-image:
    linear-gradient(to right, rgba(93, 202, 165, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(93, 202, 165, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cs-featured__panel-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-500);
  margin: 0 0 18px;
}
.cs-featured__challenges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-featured__challenge {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cs-featured__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(93, 202, 165, 0.12);
  border: 0.5px solid rgba(93, 202, 165, 0.3);
  color: var(--color-teal-500);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-featured__challenge-body { flex: 1; min-width: 0; }
.cs-featured__problem {
  margin: 0 0 4px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.cs-featured__solution {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}
.cs-featured__solution strong {
  color: var(--color-teal-500);
  font-weight: 500;
}

@media (min-width: 900px) {
  .cs-featured { grid-template-columns: 1.1fr 1fr; min-height: 420px; }
  .cs-featured__main { padding: 44px 40px; }
  .cs-featured__panel { padding: 44px 36px; }
}

/* Filter bar — divides the featured card from the "all stories" grid. */
.cs-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 40px 0 22px;
  padding-top: 32px;
  border-top: 0.5px solid var(--color-border-light);
}
.cs-filter__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.cs-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cs-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  background: white;
  border: 0.5px solid var(--color-border);
  color: #4A5878;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  cursor: pointer;
  user-select: none;
}
.cs-filter__chip:hover {
  border-color: var(--color-teal-600);
  color: var(--color-teal-600);
}
.cs-filter__chip.is-active {
  background: var(--color-navy-800);
  color: white;
  border-color: var(--color-navy-800);
}
.cs-filter__chip.is-active:hover {
  background: var(--color-navy-800);
  color: white;
}
.cs-filter__count { opacity: 0.85; }

/* Card grid */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 56px;
}
@media (min-width: 600px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cs-grid { grid-template-columns: repeat(4, 1fr); } }

.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  min-height: 240px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.cs-card:hover {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
}
.cs-card[hidden] { display: none; }
.cs-card__pill {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 10px;
  color: var(--color-teal-600);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cs-card__pill::before {
  content: '“';
  font-size: 22px;
  font-family: Georgia, serif;
  line-height: 0.5;
  margin-bottom: -4px;
}
.cs-card__logo {
  height: 44px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.cs-card__logo img {
  height: 100%;
  width: auto;
  display: block;
}
.cs-card__h {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.35;
  margin: 0 0 10px;
}
.cs-card__desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
}
.cs-card__tags {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cs-card__tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  font-size: 10.5px;
  font-weight: 500;
}
.cs-card__cta {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-teal-600);
}

/* Bottom "Need a reference?" CTA */
.cs-cta {
  background: var(--color-bg-tint);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cs-cta__copy { flex: 1; min-width: 0; }
.cs-cta__h {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--color-text-primary);
}
.cs-cta__h em { font-style: normal; color: var(--color-teal-600); }
.cs-cta__lede {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}
.cs-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.cs-cta__btn {
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.cs-cta__btn--ghost {
  background: white;
  border: 0.5px solid var(--color-border);
  color: var(--color-text-primary);
}
.cs-cta__btn--ghost:hover { border-color: var(--color-teal-600); color: var(--color-teal-600); }
.cs-cta__btn--primary {
  background: var(--color-teal-600);
  color: white;
  border: 0.5px solid var(--color-teal-600);
}
.cs-cta__btn--primary:hover { opacity: 0.9; }

@media (min-width: 800px) {
  .cs-cta {
    flex-direction: row;
    align-items: center;
    padding: 36px 40px;
    gap: 32px;
  }
}

/* "Looking at a different industry?" footnote on category pages */
.cs-back {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.cs-back a { color: var(--color-teal-600); text-decoration: none; }
.cs-back a:hover { text-decoration: underline; }

/* Testimonial modal — appears when a customer card with
   has_testimonial: true is clicked. One modal per page, populated
   from the clicked card's data-testimonial-* attributes. */
.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cs-modal[hidden] { display: none; }
.cs-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 61, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cs-modal__card {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(10, 31, 61, 0.25);
  max-width: 720px;
  width: 100%;
  padding: 40px 44px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: cs-modal-pop 0.18s ease-out;
}
@keyframes cs-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.cs-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  border: 0.5px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.cs-modal__close:hover {
  border-color: var(--color-teal-600);
  color: var(--color-teal-600);
}
.cs-modal__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  margin: 0;
}
.cs-modal__marks {
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1;
  color: var(--color-teal-500);
  letter-spacing: -0.06em;
  margin: -8px 0 -4px;
}
.cs-modal__quote {
  margin: 0;
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-navy-800);
  letter-spacing: -0.005em;
}
.cs-modal__rule {
  margin: 4px 0 0;
  border: 0;
  border-top: 0.5px solid var(--color-border-light);
}
.cs-modal__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cs-modal__attrib-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.cs-modal__attrib-title {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.cs-modal__logo {
  height: 32px;
  display: inline-flex;
  align-items: center;
}
.cs-modal__logo img {
  height: 100%;
  width: auto;
  display: block;
}
.cs-modal__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
  align-self: flex-end;
  margin-left: auto;
}
.cs-modal__cta:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .cs-modal__card { padding: 32px 24px 24px; }
  .cs-modal__quote { font-size: 17px; }
  .cs-modal__footer { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   COMPARISONS — hub (/etl-tools-comparison.html) and vs-X pages
   ========================================================================= */

/* ---- shared eyebrow tweak: section heads sit closer together on cmp pages ---- */

/* ---- hub: hero + search ---- */
.cmp-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px 16px;
}
.cmp-hero__inner {
  max-width: 880px;
}
.cmp-hero__h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-navy-800);
  margin: 12px 0 18px;
}
.cmp-hero__h1 em { font-style: normal; color: var(--color-teal-600); }
.cmp-hero__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 720px;
}

.cmp-search {
  margin-top: 12px;
  max-width: 680px;
}
.cmp-search__field {
  position: relative;
  display: block;
}
.cmp-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.cmp-search__input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  font: inherit;
  font-size: 15px;
  color: var(--color-navy-800);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.cmp-search__input:focus {
  outline: none;
  border-color: var(--color-teal-600);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}
.cmp-search__input::placeholder { color: var(--color-text-tertiary); }
.cmp-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(10, 31, 61, 0.10);
  list-style: none;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
}
.cmp-search__results[hidden] { display: none; }
.cmp-search__result {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-navy-800);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cmp-search__result:hover,
.cmp-search__result.is-active {
  background: var(--color-bg-soft);
  color: var(--color-teal-600);
}
.cmp-search__result-cat {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cmp-search__hint {
  margin: 8px 4px 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.cmp-search__hint strong { color: var(--color-text-secondary); font-weight: 500; }

/* ---- hub: featured 6 ---- */
.cmp-featured {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 32px;
}
.cmp-featured__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.cmp-featured__head .sec__eyebrow { margin-bottom: 8px; }
.cmp-featured__head .sec__h2 { margin: 0; }
.cmp-featured__meta {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: right;
}
.cmp-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cmp-card {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-height: 180px;
  transition: border-color 0.15s, transform 0.15s;
}
.cmp-card:hover {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
}
.cmp-card__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cmp-card__brand {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy-800);
  letter-spacing: -0.01em;
}
.cmp-card__vs {
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-transform: lowercase;
}
.cmp-card__competitor {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cmp-card__h {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-800);
  line-height: 1.35;
  margin: 0 0 8px;
}
.cmp-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
  flex-grow: 1;
}
.cmp-card__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal-600);
}

/* ---- hub: all comparisons grid ---- */
.cmp-all {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 96px;
}
.cmp-all__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.cmp-all__head .sec__eyebrow { margin-bottom: 8px; }
.cmp-all__head .sec__h2 { margin: 0; }
.cmp-all__meta {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: right;
}

.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.cmp-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cmp-chip:hover {
  border-color: var(--color-teal-600);
  color: var(--color-teal-600);
}
.cmp-chip.is-active {
  background: var(--color-navy-800);
  color: var(--color-bg);
  border-color: var(--color-navy-800);
}
.cmp-chip__count {
  color: var(--color-text-tertiary);
  font-weight: 400;
}
.cmp-chip.is-active .cmp-chip__count { color: rgba(255, 255, 255, 0.55); }
.cmp-chip:hover .cmp-chip__count { color: var(--color-teal-600); }

.cmp-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cmp-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  min-height: 56px;
}
.cmp-tile[hidden] { display: none; }
.cmp-tile:hover {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
}
.cmp-tile:hover .cmp-tile__arrow { color: var(--color-teal-600); }
.cmp-tile__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.25;
}
.cmp-tile__arrow {
  font-size: 16px;
  color: var(--color-text-tertiary);
  transition: color 0.15s;
}
.cmp-tiles__empty {
  font-size: 14px;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: 24px;
  margin: 0;
}

/* ---- vs-X: breadcrumb ---- */
.cmp-crumbs {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-crumbs__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.cmp-crumbs__link:hover { color: var(--color-teal-600); }
.cmp-crumbs__sep { color: #B5C2D9; }
.cmp-crumbs__current { color: var(--color-text-primary); }

/* ---- vs-X: hero ---- */
.cmp-vs-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px 40px;
}
.cmp-vs-hero__inner { max-width: 820px; }
.cmp-vs-hero__h1 {
  font-size: clamp(36px, 4.5vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-navy-800);
  margin: 12px 0 18px;
}
.cmp-vs-hero__vs {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin: 0 0.15em;
  vertical-align: 0.05em;
}
.cmp-vs-hero__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 720px;
}

/* ---- vs-X: verdict block ---- */
.cmp-verdict {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 16px;
}
.cmp-verdict__head { margin-bottom: 28px; }
.cmp-verdict__head .sec__eyebrow { margin-bottom: 8px; }
.cmp-verdict__head .sec__h2 { margin: 0; }
.cmp-verdict__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cmp-verdict__col {
  background: var(--color-bg-tint);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.cmp-verdict__col--win {
  background: var(--color-teal-50);
  border-color: var(--color-teal-200);
}
.cmp-verdict__col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cmp-verdict__col-h {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.25;
}
.cmp-verdict__col--win .cmp-verdict__col-h { color: var(--color-teal-1000); }
.cmp-verdict__icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  background: #E5EAF2;
}
.cmp-verdict__icon svg { width: 14px; height: 14px; }
.cmp-verdict__icon--win { background: var(--color-teal-600); color: #fff; }
.cmp-verdict__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmp-verdict__item {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding-left: 16px;
  position: relative;
}
.cmp-verdict__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--color-text-tertiary);
}
.cmp-verdict__col--win .cmp-verdict__item { color: var(--color-teal-1000); }
.cmp-verdict__col--win .cmp-verdict__item::before { background: var(--color-teal-900); }

/* ---- vs-X: feature table ---- */
.cmp-features {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px;
}
.cmp-features__head { margin-bottom: 24px; }
.cmp-features__head .sec__eyebrow { margin-bottom: 8px; }
.cmp-features__head .sec__h2 { margin: 0; }

.cmp-table {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}
.cmp-table--empty {
  padding: 24px 28px;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.cmp-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.cmp-table__table th {
  background: var(--color-bg-tint);
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 0.5px solid var(--color-border);
}
.cmp-table__h-feature { width: 28%; color: var(--color-text-secondary); }
.cmp-table__h-etl     { width: 36%; color: var(--color-teal-600); }
.cmp-table__h-comp    { width: 36%; color: var(--color-text-secondary); }

.cmp-table__divider td {
  background: var(--color-navy-800);
  color: var(--color-teal-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 12px 20px;
  border-bottom: none;
}

.cmp-table__row td {
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--color-border-light);
  vertical-align: top;
  line-height: 1.5;
  word-break: break-word;
}
.cmp-table__row:last-child td { border-bottom: none; }
.cmp-table__feature {
  font-weight: 500;
  color: var(--color-navy-800);
}
.cmp-table__etl {
  background: rgba(225, 245, 238, 0.4);
  color: var(--color-teal-1000);
}
.cmp-table__comp {
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

/* feature-table cell content conventions */
.cmp-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.cmp-cell__icon { font-weight: 700; }
.cmp-cell--yes .cmp-cell__icon { color: var(--color-teal-600); font-size: 16px; }
.cmp-cell--no  .cmp-cell__icon { color: #B5C2D9; }
.cmp-cell--no  { color: #B5C2D9; }
.cmp-cell__pill {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #fff;
  background: var(--color-amber-700);
  padding: 2px 8px;
  border-radius: 4px;
}
.cmp-cell--partial .cmp-cell__label { color: var(--color-amber-700); }

/* ---- vs-X: migration CTA ---- */
.cmp-migrate {
  max-width: var(--max-width);
  margin: 32px auto 64px;
  padding: 0 24px;
}
.cmp-migrate__inner {
  background: var(--color-navy-900);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.cmp-migrate__copy { max-width: 620px; }
.cmp-migrate__eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-500);
  margin: 0 0 8px;
}
.cmp-migrate__h {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
}
.cmp-migrate__p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-on-navy);
  margin: 0;
}
.cmp-migrate__cta {
  display: flex;
  gap: 10px;
}
.cmp-migrate__btn {
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s;
}
.cmp-migrate__btn--secondary {
  background: transparent;
  color: #fff;
  border: 0.5px solid var(--color-text-on-navy-muted);
}
.cmp-migrate__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-on-navy);
}
.cmp-migrate__btn--primary {
  background: var(--color-teal-500);
  color: var(--color-navy-900);
}
.cmp-migrate__btn--primary:hover { opacity: 0.92; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .cmp-featured__grid { grid-template-columns: repeat(2, 1fr); }
  .cmp-tiles { grid-template-columns: repeat(3, 1fr); }
  .cmp-verdict__grid { grid-template-columns: 1fr; }
  .cmp-migrate__inner { grid-template-columns: 1fr; }
  .cmp-migrate__cta { flex-wrap: wrap; }
  .cmp-table__h-feature, .cmp-table__feature { width: 32%; }
}
@media (max-width: 640px) {
  .cmp-hero { padding: 40px 24px 24px; }
  .cmp-hero__h1 { font-size: 36px; }
  .cmp-featured { padding: 32px 24px; }
  .cmp-featured__grid { grid-template-columns: 1fr; }
  .cmp-featured__head, .cmp-all__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cmp-featured__meta, .cmp-all__meta { text-align: left; }
  .cmp-tiles { grid-template-columns: repeat(2, 1fr); }

  .cmp-vs-hero__h1 { font-size: 32px; }
  .cmp-features__head .sec__h2,
  .cmp-verdict__head .sec__h2 { font-size: 26px; }
  .cmp-migrate__inner { padding: 28px 24px; }
}

/* =========================================================================
   CONNECTORS — /connectors.html (hero + search + chips + 260-card grid)

   Reuses .cmp-chip and .cmp-chips from the comparison hub for the category
   filter — identical visual treatment per spec. Tier chips and grid cards
   are connector-specific.
   ========================================================================= */

.cn-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px 8px;
}
.cn-hero__inner { max-width: 880px; }
.cn-hero__h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-navy-800);
  margin: 12px 0 18px;
}
.cn-hero__h1 em { font-style: normal; color: var(--color-teal-600); }
.cn-hero__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 720px;
}

/* Stat row — same shape as About page stats */
.cn-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 0 0;
  margin: 0 0 32px;
  border-top: 0.5px solid var(--color-border);
}
.cn-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cn-stats__num {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-navy-800);
  line-height: 1;
  margin: 0;
}
.cn-stats__num--accent { color: var(--color-teal-600); }
.cn-stats__num--word   { font-weight: 500; }
.cn-stats__label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.35;
}

/* Search bar */
.cn-search {
  margin-top: 12px;
  max-width: 680px;
}
.cn-search__field {
  position: relative;
  display: block;
}
.cn-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.cn-search__input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  font: inherit;
  font-size: 15px;
  color: var(--color-navy-800);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.cn-search__input:focus {
  outline: none;
  border-color: var(--color-teal-600);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}
.cn-search__input::placeholder { color: var(--color-text-tertiary); }
.cn-search__hint {
  margin: 8px 4px 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.cn-search__hint strong { color: var(--color-text-secondary); font-weight: 500; }

/* All connectors section + section head */
.cn-all {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 96px;
}
.cn-all__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.cn-all__head .sec__eyebrow { margin-bottom: 8px; }
.cn-all__head .sec__h2 { margin: 0; }
.cn-all__meta {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: right;
}

/* Tier chip row — sits below category chips, separated by a thin border */
.cn-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 0 24px;
  margin-bottom: 24px;
  border-top: 0.5px solid var(--color-border-light);
  margin-top: 16px;
}
.cn-tier__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-right: 6px;
}
.cn-tier__chip {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cn-tier__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cn-tier__chip--all.is-active {
  background: var(--color-navy-800);
  color: var(--color-bg);
  border-color: var(--color-navy-800);
}

.cn-tier__chip--included {
  border-color: var(--color-teal-200);
  color: var(--color-teal-900);
}
.cn-tier__chip--included .cn-tier__dot { background: var(--color-teal-600); }
.cn-tier__chip--included.is-active {
  background: var(--color-teal-50);
  border-color: var(--color-teal-600);
  color: var(--color-teal-1000);
}

.cn-tier__chip--premium {
  border-color: #FAC775;
  color: #854F0B;
}
.cn-tier__chip--premium .cn-tier__dot { background: #BA7517; }
.cn-tier__chip--premium.is-active {
  background: #FAEEDA;
  border-color: #BA7517;
  color: #412402;
}

/* Card grid — minmax(0, 1fr) so columns honor the container width
   even when a single card's intrinsic content (e.g. very long
   connector name) would otherwise blow the column out and overflow
   the page horizontally. Without min-width: 0 in the track sizing,
   the default `min-width: auto` on grid items wins and the row
   refuses to shrink. */
.cn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cn-card { min-width: 0; }
.cn-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  min-height: 60px;
  transition: border-color 0.15s, transform 0.15s;
}
.cn-card[hidden] { display: none; }
.cn-card:hover {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
}
.cn-card__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  /* No nowrap/ellipsis — show the full name. Long names wrap to 2-3
     lines and the grid's default align-items: stretch keeps every
     card in a row at the same height as its tallest sibling. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cn-card__badge {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cn-card__badge--included {
  background: var(--color-teal-50);
  color: var(--color-teal-900);
}
.cn-card__badge--premium {
  background: #FAEEDA;
  color: #854F0B;
}

/* Logo cell — real icon vs fallback initials */
.cn-card__logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cn-card__logo--real {
  background: var(--color-bg-tint);
  padding: 4px;
}
.cn-card__logo--real img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Category-tinted fallback tiles — match the connector's category */
.cn-card__logo--databases     { background: #E1F5EE; color: #0F6E56; }
.cn-card__logo--nosql         { background: #DCEEF1; color: #145660; }
.cn-card__logo--warehouses    { background: #E6F1FB; color: #185FA5; }
.cn-card__logo--cdc           { background: #EEEDFE; color: #534AB7; }
.cn-card__logo--business-apps { background: #F4F6FA; color: #1F3050; }
.cn-card__logo--file-storage  { background: #F1EFE8; color: #5F5E5A; }
.cn-card__logo--streaming     { background: #FAEEDA; color: #854F0B; }
.cn-card__logo--apis          { background: #FBEAF0; color: #993556; }
.cn-card__logo--email         { background: #FAECE7; color: #993C1D; }
.cn-card__logo--formats       { background: #EAF3DE; color: #3B6D11; }

/* Empty state when filter combo yields zero matches */
.cn-grid__empty {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 40px 24px;
  margin: 0;
}
.cn-grid__empty a {
  color: var(--color-teal-600);
  font-weight: 500;
}
.cn-grid__empty a:hover { text-decoration: underline; }

/* Bottom safety-net line about the generic HTTP connector */
.cn-safety {
  margin: 32px auto 0;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: center;
}
.cn-safety em {
  font-style: italic;
}
.cn-safety__cta {
  display: inline-block;
  margin-left: 6px;
  color: var(--color-teal-600);
  font-weight: 500;
  font-style: normal;
}
.cn-safety__cta:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .cn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cn-stats { grid-template-columns: repeat(2, 1fr); }
  .cn-all__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cn-all__meta { text-align: left; }
}
@media (max-width: 640px) {
  .cn-hero { padding: 40px 24px 16px; }
  .cn-hero__h1 { font-size: 36px; }
  .cn-stats__num { font-size: 26px; }
  .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-tier { gap: 6px; }
  .cn-tier__label { width: 100%; margin-bottom: 4px; margin-right: 0; }
}

/* =========================================================================
   VIDEOS — /videos.html
   Hero + 2 featured cards (dark navy thumb, NEW + duration badges) +
   3 category sections of small library cards (category-tinted icon
   placeholder thumbs). Cards open a modal that either embeds a <video>
   or shows a "Coming soon" panel for the two featured placeholders.
   ========================================================================= */

/* Tighten the hero-to-featured gap to match other recently-polished pages
   (~64-80px from subhead to first eyebrow). Override on .vd-feat which
   sits directly after the page hero. */
.vd-hero { padding-bottom: 16px; }
.vd-feat { padding-top: 32px; }

.vd-feat,
.vd-lib {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.vd-feat__head,
.vd-lib__head { margin-bottom: 24px; }
.vd-feat__head .sec__eyebrow,
.vd-lib__head .sec__eyebrow { margin-bottom: 8px; }
.vd-feat__head .sec__h2,
.vd-lib__head .sec__h2 { margin: 0 0 6px; }
.vd-feat__meta,
.vd-lib__meta {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-tertiary);
}

/* ---- Featured (2 large cards) ----------------------------------------- */

.vd-feat__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vd-fcard {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  text-align: left;
}
.vd-fcard:hover,
.vd-fcard:focus-visible {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(10, 31, 61, 0.08);
  outline: none;
}

.vd-fcard__thumb {
  position: relative;
  display: block;
  height: 240px;
  background: var(--color-navy-900);
  overflow: hidden;
}
.vd-fcard__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(93, 202, 165, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(93, 202, 165, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* When a poster image is present (vd-fcard__thumb--poster), it fills the
   thumbnail with object-fit: cover anchored top-left so the most
   informative region of homepage screenshots stays visible. A dark
   gradient overlay keeps the centered play button + NEW + duration
   pill readable over varied screenshot backgrounds. */
.vd-fcard__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.vd-fcard__thumb--poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(6, 19, 39, 0.45) 0%, rgba(6, 19, 39, 0.25) 60%, rgba(6, 19, 39, 0.55) 100%);
  pointer-events: none;
  transition: background 0.15s;
}
.vd-fcard:hover .vd-fcard__thumb--poster::after,
.vd-fcard:focus-visible .vd-fcard__thumb--poster::after {
  background:
    radial-gradient(ellipse at center, rgba(6, 19, 39, 0.55) 0%, rgba(6, 19, 39, 0.35) 60%, rgba(6, 19, 39, 0.65) 100%);
}
/* The overlay sits above the poster img but the badges + play button
   need to sit above the overlay. Source-order alone would put them
   below ::after, so promote them to z-index 1. */
.vd-fcard__thumb--poster .vd-fcard__badge--new,
.vd-fcard__thumb--poster .vd-fcard__play,
.vd-fcard__thumb--poster .vd-fcard__duration { z-index: 1; }

.vd-fcard__badge--new {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-teal-600);
  color: white;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.vd-fcard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(10, 31, 61, 0.3);
  transition: transform 0.15s, background 0.15s;
}
.vd-fcard__play svg { width: 26px; height: 26px; margin-left: 3px; }
.vd-fcard:hover .vd-fcard__play,
.vd-fcard:focus-visible .vd-fcard__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--color-teal-900);
}

.vd-fcard__duration {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  font-feature-settings: 'tnum';
}

.vd-fcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
}
.vd-fcard__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.vd-fcard__desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ---- Library (3 categories of small cards) ---------------------------- */

.vd-lib { padding-top: 64px; padding-bottom: 96px; }

.vd-cats {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.vd-cat__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  margin-bottom: 14px;
}
.vd-cat__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.vd-cat__count {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.vd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.vd-card {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  text-align: left;
}
.vd-card:hover,
.vd-card:focus-visible {
  border-color: var(--color-teal-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10, 31, 61, 0.06);
  outline: none;
}

.vd-card__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  background: var(--color-bg-tint);
  border-bottom: 0.5px solid var(--color-border-light);
}

/* Single big logo (Snowflake / BigQuery / Redshift / Synapse). */
.vd-card__logo--single {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 64px;
}
.vd-card__logo--single img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Logo row (multi-vendor: Databases / CDC / Queues / SaaS / Google). */
.vd-card__logo--row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.vd-card__logo--row img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  /* The vendored connector PNGs are square but their internal whitespace
     varies — letting them render at 36px keeps the visual weight close. */
}

/* Tinted-tile fallback (cards with no real logo to show — APIs, Files,
   EDI, Email). Bumped from 48 → 72 since the thumb is otherwise empty,
   and the bg gets a soft category-tinted radial gradient so each
   thumb-bg is keyed to the icon color instead of flat #FAFBFC. */
.vd-thumb-icon {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
/* Category-tinted palette — same hex pairs as the connectors fallback
   tiles so the two libraries stay visually consistent. */
.vd-thumb-icon--databases  { background: #E1F5EE; color: #0F6E56; }
.vd-thumb-icon--warehouses { background: #E6F1FB; color: #185FA5; }
.vd-thumb-icon--cdc        { background: #EEEDFE; color: #534AB7; }
.vd-thumb-icon--apis       { background: #FBEAF0; color: #993556; }
.vd-thumb-icon--saas       { background: #F4F6FA; color: #1F3050; }
.vd-thumb-icon--files      { background: #F1EFE8; color: #5F5E5A; }
.vd-thumb-icon--edi        { background: #EAF3DE; color: #3B6D11; }
.vd-thumb-icon--queues     { background: #FAEEDA; color: #854F0B; }
.vd-thumb-icon--email      { background: #FAECE7; color: #993C1D; }

/* Soft category-tinted gradient on the fallback-tile thumbs (only
   applied when no logos are present; logo-bearing cards keep the
   neutral bg-tint background so the brand colors don't fight the
   category accent). */
.vd-card__thumb--apis  { background: radial-gradient(ellipse at center, #FDF4F8 0%, #FAFBFC 75%); }
.vd-card__thumb--files { background: radial-gradient(ellipse at center, #F7F5EE 0%, #FAFBFC 75%); }
.vd-card__thumb--edi   { background: radial-gradient(ellipse at center, #F2F8E9 0%, #FAFBFC 75%); }
.vd-card__thumb--email { background: radial-gradient(ellipse at center, #FDF3EE 0%, #FAFBFC 75%); }

.vd-card__hover-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 0.5px solid var(--color-border);
  color: var(--color-teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.vd-card__hover-play svg { width: 16px; height: 16px; margin-left: 1px; }
.vd-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 61, 0);
  transition: background 0.15s;
}
.vd-card:hover .vd-card__thumb::before,
.vd-card:focus-visible .vd-card__thumb::before {
  background: rgba(10, 31, 61, 0.04);
}
.vd-card:hover .vd-card__hover-play,
.vd-card:focus-visible .vd-card__hover-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vd-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
.vd-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.vd-card__subtitle {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

/* ---- Modal ------------------------------------------------------------- */

.vd-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vd-modal[hidden] { display: none; }
.vd-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 61, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vd-modal__card {
  position: relative;
  background: var(--color-navy-900);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(10, 31, 61, 0.4);
  max-width: 960px;
  width: 100%;
  padding: 56px 24px 24px;
  animation: vd-modal-pop 0.18s ease-out;
}
@keyframes vd-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.vd-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.vd-modal__close:hover {
  border-color: var(--color-teal-500);
  background: rgba(255, 255, 255, 0.14);
}
.vd-modal__title {
  position: absolute;
  top: 18px;
  left: 24px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-on-navy);
  max-width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-modal__player {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.vd-modal__video {
  display: block;
  width: 100%;
  height: 100%;
  background: black;
}

.vd-modal__soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at center, rgba(93, 202, 165, 0.08) 0%, transparent 70%),
    var(--color-navy-900);
}
.vd-modal__soon-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(29, 158, 117, 0.18);
  border: 1px solid rgba(93, 202, 165, 0.35);
  color: var(--color-teal-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.vd-modal__soon-mark svg { width: 28px; height: 28px; margin-left: 3px; }
.vd-modal__soon-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.vd-modal__soon-text {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-on-navy);
}
.vd-modal__soon-text a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vd-modal__soon-text a:hover { color: var(--color-teal-500); }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
  .vd-feat__row { grid-template-columns: 1fr; }
  .vd-fcard__thumb { height: 220px; }
  .vd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .vd-feat,
  .vd-lib { padding-left: 16px; padding-right: 16px; }
  .vd-lib { padding-bottom: 64px; }
  .vd-fcard__thumb { height: 200px; }
  .vd-fcard__body { padding: 18px 20px; }
  .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-card__thumb { height: 120px; }
  .vd-modal { padding: 12px; }
  .vd-modal__card { padding-top: 48px; }
}

/* =========================================================================
   LANDING PAGES — /real-time-cdc.html and (future) /healthcare-data-integration.html,
   /on-premise-etl.html, /edi-integration.html, /snowflake-etl.html.
   Single .lp-* namespace shared by all 5 capability landing pages.
   Sections are page-style-agnostic — the structure stays identical
   across pages, only the content changes.
   ========================================================================= */

/* Shared constraint: every landing page section's inner content lives in
   .lp-shell — 1200px max-width, 48px horizontal padding. Identical to the
   comparison hub / customers / connectors patterns. */
.lp-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ---- Hero -------------------------------------------------------------- */

/* Tighten the hero-to-problem gap (~64-80px) without touching .page-hero
   defaults. .lp-hero rides on .page-hero so the type ramp matches the
   rest of the page-hero pages. Override the page-hero__inner width on
   landing pages only — the shared default is 920px (right for legal /
   about / contact) but landing pages need to share their 1200px shell
   width with every other section so blocks align. */
.lp-hero { padding-bottom: 24px; }
.lp-hero .page-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

.lp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.lp-hero__cta .btn {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}

.lp-hero__stats {
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 0.5px solid var(--color-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.lp-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-hero__num {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-navy-800);
  margin: 0;
  line-height: 1.1;
  font-feature-settings: 'tnum';
}
.lp-hero__num--accent { color: var(--color-teal-600); font-style: normal; }
.lp-hero__num em { font-style: normal; color: var(--color-teal-600); }
.lp-hero__label {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ---- Section spacing for stacked landing-page sections ----------------- */
.lp-problem,
.lp-caps,
.lp-proof { padding-top: 56px; padding-bottom: 56px; }

/* ---- The Problem ------------------------------------------------------- */

.lp-problem .sec__h2 { margin: 8px 0 16px; }
.lp-problem__lede {
  margin: 0 0 32px;
  max-width: 820px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.lp-challenge {
  background: var(--color-bg-tint);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  max-width: 900px;
}
/* Amber eyebrow — deliberate one-off signal that this is a "watch out"
   callout, distinct from the standard teal eyebrows. Reusable on the
   equivalent section of future landing pages. */
.lp-challenge__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #BA7517;
}
.lp-challenge__h {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.lp-challenge__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.lp-challenge__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(10, 31, 61, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--color-navy-800);
}

/* ---- Capabilities (3×2 grid of 6 cards) -------------------------------- */

.lp-caps .sec__h2 { margin: 8px 0 28px; }
.lp-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-cap {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.lp-cap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  margin-bottom: 16px;
}
.lp-cap__icon svg { width: 18px; height: 18px; }
.lp-cap__h {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.lp-cap__d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* ---- Specifications (full-width grey bg + spec table) ------------------ */

.lp-spec-shell {
  background: var(--color-bg-tint);
  padding: 56px 0 64px;
}
.lp-spec .sec__h2 { margin: 8px 0 16px; }
.lp-spec__lede {
  margin: 0 0 32px;
  max-width: 820px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.lp-spec__table {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Section header rows separating Relational from NoSQL — full-width
   dark-navy strip with teal-500 uppercase label. */
.lp-spec__section {
  background: var(--color-navy-800);
  color: var(--color-teal-500);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 24px;
}
.lp-spec__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 14px 24px;
  border-top: 0.5px solid var(--color-border-light);
}
.lp-spec__row:first-of-type { border-top: 0; }
.lp-spec__section + .lp-spec__row { border-top: 0; }
.lp-spec__label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.lp-spec__value {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.lp-spec__compare {
  margin: 36px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.lp-spec__compare em {
  font-style: italic;
  color: var(--color-text-secondary);
}
.lp-spec__compare a {
  font-style: normal;
  color: var(--color-teal-600);
  font-weight: 500;
  text-decoration: none;
  margin-left: 6px;
}
.lp-spec__compare a:hover { text-decoration: underline; }

/* ---- Proof (white quote card + dark navy stats card) ------------------- */

.lp-proof .sec__h2 { margin: 8px 0 28px; }
.lp-proof__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.lp-proof__quote {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 14px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-proof__q {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-navy-800);
  letter-spacing: -0.005em;
}
.lp-proof__attrib {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-proof__logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.lp-proof__logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  display: block;
}
.lp-proof__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.lp-proof__title {
  font-size: 12.5px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.lp-proof__stats {
  background: var(--color-navy-900);
  color: white;
  padding: 32px 28px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
.lp-proof__stats-eyebrow {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.lp-proof__stats-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.lp-proof__stats-item {
  padding: 14px 0;
  border-top: 0.5px solid #1A2A4A;
}
.lp-proof__stats-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.lp-proof__stats-item:last-child {
  padding-bottom: 0;
}
.lp-proof__stats-num {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-teal-500);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}
.lp-proof__stats-label {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-on-navy-muted);
}

/* ---- FAQ (native <details> styled with custom +/- toggle) -------------- */

.lp-faq { padding: 56px 0 64px; }
.lp-faq .sec__h2 { margin: 8px 0 28px; }

/* FAQ section header (eyebrow + H2) shares the 1200px shell so it aligns
   with every other section's left edge. The accordion items are
   constrained narrower (900px) for line-length readability. */
.lp-faq__list {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-faq__item {
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  padding: 18px 22px;
  transition: border-color 0.15s;
}
.lp-faq__item:hover,
.lp-faq__item[open] {
  border-color: var(--color-teal-600);
}
/* Hide the default disclosure marker on every browser. */
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q { list-style: none; }
.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.4;
}
/* Custom +/- toggle drawn with two crossed lines; the vertical line
   rotates to a horizontal one when open, turning + into −. */
.lp-faq__q::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background:
    linear-gradient(to right, currentColor 0 100%) center / 14px 1.5px no-repeat,
    linear-gradient(to right, currentColor 0 100%) center / 1.5px 14px no-repeat;
  color: var(--color-text-secondary);
  transition: transform 0.15s, color 0.15s;
}
.lp-faq__item[open] .lp-faq__q::after {
  transform: rotate(45deg);
  color: var(--color-teal-600);
}
.lp-faq__a {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--color-border-light);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ---- Footer CTA (full-width dark navy) --------------------------------- */

.lp-cta {
  background: var(--color-navy-900);
  padding: 80px 24px;
}
.lp-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.lp-cta__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.lp-cta__h {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: white;
}
.lp-cta__h em { font-style: normal; color: var(--color-teal-500); }
.lp-cta__lede {
  margin: 0 auto 28px;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-on-navy-muted);
}
.lp-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.lp-cta__btn-primary,
.lp-cta__btn-secondary {
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-cta__btn-primary {
  background: var(--color-teal-500);
  color: var(--color-navy-900);
  border: 0.5px solid var(--color-teal-500);
}
.lp-cta__btn-primary:hover {
  background: var(--color-teal-200);
  border-color: var(--color-teal-200);
}
.lp-cta__btn-secondary {
  background: transparent;
  color: white;
  border: 0.5px solid var(--color-text-secondary);
}
.lp-cta__btn-secondary:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.05);
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1000px) {
  .lp-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-proof__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-shell { padding-left: 24px; padding-right: 24px; }
  .lp-hero .page-hero__inner { padding-left: 24px; padding-right: 24px; }
  .lp-hero__stats { gap: 28px; }
  .lp-challenge { padding: 28px 24px; }
  .lp-caps__grid { grid-template-columns: 1fr; }
  .lp-spec__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; }
  .lp-spec__section { padding: 10px 20px; }
  .lp-proof__quote { padding: 24px; }
  .lp-cta { padding: 56px 20px; }
}

/* =========================================================================
   LANDING PAGES — Snowflake additions
   .lp-cap__icon--blue       capability-icon palette modifier (blue, not teal)
   .lp-patterns / .lp-pattern  3-card flow-diagram section
   .lp-flow-pill / .lp-flow-arrow  monospace pills for flow diagrams
   .lp-cost                  dark-navy 3-column pricing comparison card
   .lp-proof__logo--text     fallback styled-text tile (used when no usable
                             customer logo PNG is available — e.g. OpenGov "OG")
   ========================================================================= */

/* Blue icon palette — Snowflake-native pages use blue instead of teal so the
   page reads as category-specific. Other landing pages keep the default teal. */
.lp-cap__icon--blue {
  background: #E6F1FB;
  color: #185FA5;
}

/* ---- Patterns section (3 cards with flow diagrams) -------------------- */

.lp-patterns__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-pattern {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.lp-pattern__pill {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.lp-pattern__pill--in       { background: #E1F5EE; color: #0F6E56; }
.lp-pattern__pill--realtime { background: #FAEEDA; color: #854F0B; }
.lp-pattern__pill--reverse  { background: #EEEDFE; color: #534AB7; }

/* Flow diagram — small monospace pills with arrows between them. Wraps
   gracefully when a pattern card is too narrow to fit the row. */
.lp-pattern__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.lp-flow-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--color-bg-soft);
  color: #1F3050;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.lp-flow-pill--snowflake { background: #E6F1FB; color: #185FA5; }
.lp-flow-pill--stage     { background: #F1EFE8; color: #5F5E5A; }
.lp-flow-arrow {
  font-size: 12px;
  color: var(--color-text-on-navy);
  /* Same color token as on-navy text — light enough to read as a connector,
     not a primary character. */
}

.lp-pattern__h {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.lp-pattern__d {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* "Use when:" footer inside a pattern card — practical guidance row,
   separated from the description by a thin top border. Used on the
   /etl-elt-reverse-etl.html page where buyers researching ETL vs ELT
   actually need the recommendation; reusable on any future landing
   page where the patterns map to genuine "should I pick this?"
   decisions. */
.lp-pattern__use-when {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 0.5px solid var(--color-border-light);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.lp-pattern__use-when strong {
  color: var(--color-navy-800);
  font-weight: 500;
}

/* ---- Cost transparency card ------------------------------------------- */

.lp-cost { padding: 56px 0; background: var(--color-bg); }
.lp-cost__card {
  background: var(--color-navy-900);
  color: white;
  border-radius: var(--radius-xl);
  padding: 40px 44px;
}
.lp-cost__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.lp-cost__h {
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
}
.lp-cost__h em { font-style: normal; color: var(--color-teal-500); }
.lp-cost__lede {
  margin: 0 0 28px;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-on-navy-muted);
}

/* 3-column comparison: 1px gap with #1A2A4A bg shows through as a divider. */
.lp-cost__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #1A2A4A;
  border-radius: 10px;
  overflow: hidden;
}
.lp-cost__cell {
  background: var(--color-navy-900);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-cost__cell-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.lp-cost__cell-num {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.015em;
  font-feature-settings: 'tnum';
  line-height: 1.1;
}
.lp-cost__cell-unit {
  font-size: 14px;
  color: var(--color-text-on-navy);
  font-weight: 400;
  margin-left: 1px;
}
.lp-cost__cell-d {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-on-navy-muted);
}

/* ---- Proof: styled-text logo tile ------------------------------------- */

/* When a customer's actual logo PNG renders poorly on a light tile (faint
   wordmark, etc.), use --text variant: a tinted square with 2-letter
   initials. Same visual register as the connectors-page fallback tiles. */
.lp-proof__logo--text {
  background: var(--color-bg-soft);
  color: #1F3050;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Trailing case-study link inside a proof quote card. The flex-column
   parent uses gap: 24px which is too loose under a tight follow-up
   CTA; negative margin compensates. align-self: flex-start so the link
   doesn't stretch across the card. */
.lp-proof__casestudy {
  margin-top: -10px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
}
.lp-proof__casestudy:hover { text-decoration: underline; }

/* ---- Responsive overrides --------------------------------------------- */

@media (max-width: 1000px) {
  .lp-patterns__grid { grid-template-columns: 1fr; }
  .lp-cost__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-cost__card { padding: 28px 22px; }
}

/* =========================================================================
   LANDING PAGES — AI data integration additions
   .lp-cap__icon--purple     capability-icon palette modifier (Simba purple)
   .lp-cap-group / .lp-cap-group-row  numbered capability groups (01/02/03)
   .lp-cap--compact          slightly tighter card variant for grouped layouts
   .lp-spec__label--code     monospace label variant for tool-inventory tables
   .lp-trust                 dark-navy section with 6 trust cards
   ========================================================================= */

/* Purple icon palette — AI/Simba pages use violet so the page reads as
   distinct from teal (CDC) and blue (Snowflake). */
.lp-cap__icon--purple {
  background: var(--color-violet-50);
  color: var(--color-violet-600);
}

/* ---- Numbered capability groups -------------------------------------- */

/* Layered story (01 / 02 / 03) for landing pages where the capability set
   benefits from grouping rather than a flat 6-card grid. Each group has
   its own header row + grid of cards. */
.lp-cap-group { margin-top: 32px; }
.lp-cap-group:first-of-type { margin-top: 28px; }

.lp-cap-group-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid var(--color-border-light);
}
.lp-cap-group-h {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-800);
}
.lp-cap-group-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-violet-50);
  color: var(--color-violet-600);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.lp-cap-group-meta {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: right;
}

/* ---- Compact capability card ----------------------------------------- */

/* When capability cards live inside numbered groups, tighten the metrics
   slightly so 3 stacked groups don't push the page too long. */
.lp-cap--compact { padding: 22px; }
.lp-cap--compact .lp-cap__icon { width: 32px; height: 32px; margin-bottom: 14px; }
.lp-cap--compact .lp-cap__icon svg { width: 16px; height: 16px; }
.lp-cap--compact .lp-cap__h { font-size: 15px; }
.lp-cap--compact .lp-cap__d { font-size: 13px; }

/* ---- Spec table: monospace label variant ----------------------------- */

/* Tool-inventory tables (AI page) use API/tool names as labels — monospace
   font signals "this is a code identifier", not prose. */
.lp-spec__label--code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-navy-800);
}
/* Inline <code> inside spec values (e.g. /chat endpoint) reuses the same
   monospace treatment, sized down. */
.lp-spec__value code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(10, 31, 61, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--color-navy-800);
}

/* Inline <code> inside FAQ answers — same treatment, scoped here so it
   doesn't bleed into other contexts. */
.lp-faq__a code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(10, 31, 61, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--color-navy-800);
}

/* ---- Trust & boundaries (full-width dark navy with 6 cards) ---------- */

.lp-trust {
  background: var(--color-navy-900);
  color: white;
  padding: 64px 0;
}
.lp-trust__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-500);
}
.lp-trust__title {
  margin: 0 0 14px;
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: white;
}
.lp-trust__title em { font-style: normal; color: var(--color-teal-500); }
.lp-trust__lede {
  margin: 0 0 32px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-on-navy-muted);
}

.lp-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lp-trust__card {
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(93, 202, 165, 0.15);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.lp-trust__h-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.lp-trust__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(93, 202, 165, 0.15);
  color: var(--color-teal-500);
  flex-shrink: 0;
}
.lp-trust__check svg { width: 14px; height: 14px; }
.lp-trust__h {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: white;
  line-height: 1.3;
}
.lp-trust__d {
  margin: 0;
  padding-left: 34px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-on-navy-muted);
}

@media (max-width: 1000px) {
  .lp-trust__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-trust { padding: 48px 0; }
  .lp-trust__card { padding: 22px; }
  .lp-trust__d { padding-left: 0; }
  .lp-cap-group-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .lp-cap-group-meta { text-align: left; }
}

/* =========================================================================
   LANDING PAGES — On-premise & hybrid additions
   .lp-cap__icon--gray         capability-icon palette modifier (infra/on-prem)
   .lp-spec--plain             white-bg variant of the spec section (vs the
                               default .lp-spec-shell grey wrapper used by CDC
                               and Snowflake) — alternates rhythm when the
                               preceding section is already grey
   .lp-pattern__pill--onprem|hybrid|cloud  3 deployment-mode pill variants
                               (slate / teal / blue)
   .lp-flow-pill--cloud|agent|firewall     3 flow-pill variants (matches the
                               pill palettes; firewall is dark-navy)
   .lp-pattern__flow--stacked  multi-row flow layout (network-topology
                               diagrams that don't fit in a single row)
   .lp-flow-row                horizontal sub-row inside a stacked flow
   .lp-flow-connector--dashed  short dashed line indicating a control-plane
                               connection (vs the solid arrow for data plane)
   .lp-os                      OS Installer Matrix section (2-card side-by-side
                               showing per-OS package formats + version ranges)
   ========================================================================= */

/* Gray icon palette — infrastructure / on-prem pages signal "serious,
   not-flashy" with neutral icon tiles instead of teal. */
.lp-cap__icon--gray {
  background: #F1EFE8;
  color: #5F5E5A;
}

/* ---- Specifications: white-bg variant -------------------------------- */

.lp-spec--plain { padding: 56px 0 64px; background: var(--color-bg); }

/* ---- Pattern card pill variants (deployment models) ------------------- */

.lp-pattern__pill--onprem { background: #F4F6FA; color: #1F3050; }
.lp-pattern__pill--hybrid { background: #E1F5EE; color: #0F6E56; }
.lp-pattern__pill--cloud  { background: #E6F1FB; color: #185FA5; }

/* ---- Flow-pill variants ---------------------------------------------- */

.lp-flow-pill--cloud    { background: #E6F1FB; color: #185FA5; }
.lp-flow-pill--agent    { background: #E1F5EE; color: #0F6E56; }
.lp-flow-pill--firewall { background: var(--color-navy-900); color: white; }

/* ---- Stacked flow diagram (network topology, multi-row) -------------- */

/* When a flow can't be expressed on a single line — because the diagram is
   showing network boundaries (e.g. control plane ↦ data plane), or because
   the pills are too wide — switch to a column-layout where each row is a
   horizontal sub-flow. */
.lp-pattern__flow--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lp-flow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* Dashed connector for control-plane links (vs the solid arrow for data
   plane). 32px wide segment of dashes, vertically centered in the row. */
.lp-flow-connector {
  display: inline-block;
  width: 32px;
  height: 0;
  border-top: 1.5px dashed var(--color-text-tertiary);
  vertical-align: middle;
}

/* ---- OS Installer Matrix --------------------------------------------- */

.lp-os { padding: 56px 0; background: var(--color-bg); }
.lp-os .sec__h2 { margin: 8px 0 16px; }
.lp-os__lede {
  margin: 0 0 32px;
  max-width: 820px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.lp-os__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lp-os__card {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.lp-os__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid var(--color-border-light);
}
.lp-os__pill {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F1EFE8;
  color: #5F5E5A;
  flex-shrink: 0;
}
.lp-os__h {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.lp-os__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-os__row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-os__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--color-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-secondary);
}
.lp-os__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-navy-800);
  min-width: 180px;
}
.lp-os__fmt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* ---- Responsive overrides -------------------------------------------- */

@media (max-width: 1000px) {
  .lp-os__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-os__row { flex-wrap: wrap; gap: 8px 14px; }
  .lp-os__name { min-width: 0; }
  .lp-os__card { padding: 22px; }
  .lp-flow-connector { width: 24px; }
}

/* =========================================================================
   LANDING PAGES — Healthcare additions
   .lp-cap__d (modified)       flex: 1 so capability descriptions absorb
                               free space when the card carries a trailing
                               .lp-cap__link — keeps the link bottom-aligned
                               across uneven row heights. Cards without a
                               link are unaffected (text stays top-aligned).
   .lp-cap__link               trailing teal link inside a capability card,
                               separated from the description by a thin
                               top border. Used on cards 4 (BAA template)
                               and 5 (deployment options) on the healthcare
                               page; reusable on any future landing page.
   .lp-receipts                full-width grey-bg section with 4 compliance-
                               document cards (4-col grid). Each card has a
                               teal pill, heading, and short description.
                               Linked variant uses an <a> element so the
                               whole card is clickable.
   .lp-proof__also             thin secondary-customer mention strip below
                               the main proof grid — surfaces additional
                               customers without giving them equal weight
                               with the featured one.
   ========================================================================= */

/* Make capability descriptions flex-fill so a trailing link bottom-aligns
   in a flex-column card. Pre-existing cards (no link) are unchanged
   visually since the description was already top-anchored. */
.lp-cap__d { flex: 1; }

/* Trailing teal link at the bottom of a capability card. */
.lp-cap__link {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--color-border-light);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
}
.lp-cap__link:hover { text-decoration: underline; }

/* ---- Receipts strip (4 compliance-document cards on grey bg) --------- */

.lp-receipts {
  background: var(--color-bg-tint);
  padding: 56px 0;
}
.lp-receipts .sec__h2 { margin: 8px 0 16px; }
.lp-receipts__lede {
  margin: 0 0 32px;
  max-width: 820px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.lp-receipts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.lp-receipt {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color 0.15s;
}
a.lp-receipt:hover { border-color: var(--color-teal-600); }
.lp-receipt__pill {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
  margin-bottom: 12px;
}
.lp-receipt__h {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.lp-receipt__d {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ---- "Also in production" secondary-customer strip ------------------- */

.lp-proof__also {
  margin-top: 14px;
  background: var(--color-bg-tint);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-proof__also-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  flex-shrink: 0;
}
.lp-proof__also-text {
  margin: 0;
  flex: 1;
  min-width: 280px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.lp-proof__also-text strong {
  color: var(--color-navy-800);
  font-weight: 500;
}

/* ---- Responsive overrides -------------------------------------------- */

@media (max-width: 1000px) {
  .lp-receipts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .lp-receipts__grid { grid-template-columns: 1fr; }
  .lp-proof__also { padding: 18px 20px; }
}

/* =========================================================================
   LANDING PAGES — API integration additions
   .lp-cap__icon--pink         capability-icon palette modifier (sixth variant
                               after teal / blue / purple / gray) — pink/coral
                               for API-integration content. Each landing page
                               gets a distinct accent palette so buyers visiting
                               multiple pages perceive distinct destinations.
   .lp-flow-pill--purple       flow-diagram pill, purple (matches the .lp-pattern
                               __pill--reverse variant) — used for "Your API"
                               in the PUBLISH pattern card
   .lp-flow-pill--amber        flow-diagram pill, amber (matches the .lp-pattern
                               __pill--realtime variant) — used for "Webhook"
                               in the EVENTS pattern card
   ========================================================================= */

.lp-cap__icon--pink {
  background: #FBEAF0;
  color: #993556;
}

.lp-flow-pill--purple { background: #EEEDFE; color: #534AB7; }
.lp-flow-pill--amber  { background: #FAEEDA; color: #854F0B; }

/* =========================================================================
   SOLUTIONS AGGREGATOR (/solutions.html)
   Lists the eight capability deep-dive cards. Intentionally thin —
   the page's job is to route visitors, not re-pitch the platform. Each
   card's icon palette matches its destination landing page exactly so
   buyers visiting both perceive visual continuity.
   .sol-page                 outer section spacing (slightly tighter than
                             standard landing pages — the cards ARE the page)
   .sol-grid                 3-column grid of solution cards
   .sol-card                 clickable card; description gets flex: 1 so
                             the bottom CTA row aligns across uneven heights
   .sol-card__icon (+8 mods) per-card icon palette mirroring the landing
                             pages: --etl, --cdc, --snowflake, --ai,
                             --onprem, --health, --api, --composer
   .sol-safety               horizontal callout below the grid; routes
                             buyers whose use case isn't represented to
                             /connectors.html or /contact-us.html
   ========================================================================= */

.sol-page { padding: 32px 0 80px; }

.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sol-card {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color 0.15s;
}
.sol-card:hover { border-color: var(--color-teal-600); }

.sol-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 18px;
  background: var(--color-teal-50);
  color: var(--color-teal-900);
}
.sol-card__icon svg { width: 20px; height: 20px; }

/* Per-card palettes — match each landing page's accent exactly. */
.sol-card__icon--cdc       { background: #E1F5EE; color: #0F6E56; }
.sol-card__icon--snowflake { background: #E6F1FB; color: #185FA5; }
.sol-card__icon--ai        { background: #EEEDFE; color: #534AB7; }
.sol-card__icon--onprem    { background: #F1EFE8; color: #5F5E5A; }
.sol-card__icon--health    { background: #E1F5EE; color: #0F6E56; }
.sol-card__icon--api       { background: #FBEAF0; color: #993556; }
.sol-card__icon--etl       { background: #E1F5EE; color: #0F6E56; }
.sol-card__icon--composer  { background: #E1F5EE; color: #0F6E56; }

.sol-card__h {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
.sol-card__d {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.sol-card__cta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid var(--color-border-light);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-teal-600);
}
.sol-card__cta::after {
  content: " \2192"; /* → */
}

/* ---- Safety net (don't-see-your-use-case callout) ------------------- */

.sol-safety {
  margin-top: 48px;
  background: var(--color-bg-tint);
  border-radius: 14px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sol-safety__text {
  flex: 1;
  min-width: 280px;
}
.sol-safety__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-600);
}
.sol-safety__h {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-navy-800);
  line-height: 1.3;
}
/* Italic-grey em variant — distinct from the standard teal-accent em used
   in landing-page H2s. Signals "or, more often, named differently" rather
   than highlighting a key phrase. */
.sol-safety__h em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.sol-safety__d {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.sol-safety__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
/* Scope the standard btn sizing down inside the safety net so the
   buttons don't overpower a tight horizontal callout. */
.sol-safety .btn {
  padding: 10px 18px;
  font-size: 13.5px;
  border-radius: 8px;
}

@media (max-width: 1000px) {
  .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sol-grid { grid-template-columns: 1fr; }
  .sol-safety { padding: 28px 24px; }
}