/* ==========================================================================
   index-new.html — clean / Apple-inspired refinement layer
   Loaded AFTER global + marketing + index2 + h-sections so its rules win.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Page-wide tokens */
.idx-page {
  --in-bg:        #f5f7fa;   /* soft warm-grey page bg */
  --in-bg-card:   #ffffff;
  --in-bg-soft:   #eef0f6;
  --in-ink:       #0d1a2c;   /* near-black, slight cool tint */
  --in-ink-soft:  #5a6478;
  --in-muted:     #8b94a7;
  --in-line:      rgba(13, 26, 44, 0.08);
  --in-line-soft: rgba(13, 26, 44, 0.04);
  --in-primary:   #0061ed;
}

/* ───── Backgrounds — alternate sections subtly ──────────────────────────── */
.idx-page .idx2-hero {
  background:
    radial-gradient(ellipse 110% 55% at 50% 72%, rgba(54, 97, 237, 0.55) 0%, rgba(54, 97, 237, 0) 65%),
    var(--color-neutral-900, #232532) !important;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.idx-page .idx2-hero > .padding-global { width: 100%; }
.idx-page .idx2-hero::before { display: none; }

/* Subtle circuit pattern behind hero content (dimmer on dark) */
.idx-page .idx2-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(/assets/idx2/hero-circuit.svg);
  background-size: 800px auto;
  background-position: center 24%;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.10;
  filter: invert(1);
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 38%, #000 35%, transparent 78%);
}
.idx-page .idx2-hero .padding-global { position: relative; z-index: 1; }


.idx-page .h-sections .h-section { background: var(--in-bg); border-top: 0; }
.idx-page #outcomes {
  background: var(--color-neutral-900, #232532) !important;
  background-image: radial-gradient(ellipse at 50% -10%, rgba(54, 97, 237, 0.45) 0%, rgba(54, 97, 237, 0.22) 22%, rgba(54, 97, 237, 0.08) 42%, transparent 62%) !important;
}
.idx-page #foundation {
  background: var(--in-bg) !important;
  color: var(--in-ink);
}
.idx-page #foundation .section-heading { color: var(--in-ink) !important; }
.idx-page #foundation .section-heading span[style] { color: var(--color-primary-500, #3661ed) !important; }
.idx-page #foundation .section-sub { color: var(--in-ink-soft) !important; }
.idx-page #foundation .section-label { color: var(--color-primary-500, #3661ed) !important; }
.idx-page #foundation .section-label svg path { fill: var(--color-primary-500, #3661ed) !important; }
.idx-page #foundation .idx-foundation-cell-title { color: var(--color-primary-500, #3661ed) !important; }
.idx-page #foundation .idx-foundation-cell-desc { color: var(--in-ink, #0d1a2c) !important; }
.idx-page #foundation .idx-foundation-cell:nth-child(1),
.idx-page #foundation .idx-foundation-cell:nth-child(3) { border-right-color: var(--in-line) !important; }
.idx-page #foundation .idx-foundation-cell:nth-child(1),
.idx-page #foundation .idx-foundation-cell:nth-child(2) { border-bottom-color: var(--in-line) !important; }
.idx-page #walkthrough,
.idx-page #faq { background: var(--in-bg); }
.idx-page #approach { padding-top: 96px !important; background: var(--in-bg) !important; }

/* No dot grid on foundation now that it's dark */

/* Vertical "rail" lines down the left and right edges of select sections,
   anchored to the .container-large (80rem max-width) content boundary */
.idx-page #approach,
.idx-page #outcomes,
.idx-page #walkthrough,
.idx-page #why,
.idx-page #foundation,
.idx-page .idx-connectors,
.idx-page .mktg-faq-section {
  position: relative;
}
.idx-page #approach::before,
.idx-page #approach::after,
.idx-page #outcomes::before,
.idx-page #outcomes::after,
.idx-page #walkthrough::before,
.idx-page #walkthrough::after,
.idx-page #why::before,
.idx-page #why::after,
.idx-page #foundation::before,
.idx-page #foundation::after,
.idx-page .idx-connectors::before,
.idx-page .idx-connectors::after,
.idx-page .mktg-faq-section::before,
.idx-page .mktg-faq-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-neutral-200, #E0E3EB);
  pointer-events: none;
  z-index: 1;
}
.idx-page #approach::before,
.idx-page #outcomes::before,
.idx-page #walkthrough::before,
.idx-page #why::before,
.idx-page #foundation::before,
.idx-page .idx-connectors::before,
.idx-page .mktg-faq-section::before {
  left: max(0px, calc((100% - 80rem) / 2 - 20px));
}
.idx-page #approach::after,
.idx-page #outcomes::after,
.idx-page #walkthrough::after,
.idx-page #why::after,
.idx-page #foundation::after,
.idx-page .idx-connectors::after,
.idx-page .mktg-faq-section::after {
  right: max(0px, calc((100% - 80rem) / 2 - 20px));
}
.idx-page #outcomes::before,
.idx-page #outcomes::after,
.idx-page #why::before,
.idx-page #why::after,
.idx-page .idx-connectors::before,
.idx-page .idx-connectors::after {
  background: var(--color-neutral-800, #1F2230);
}

/* Section labels — force icon + text horizontal in case a parent rule
   was stacking them. */
.idx-page .section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.idx-page .section-label > svg { flex-shrink: 0; display: block; }

/* Force every .section-heading to use the marketing typography even when
   it lives inside .h-sections (whose blanket `h2 { font-family: 'Inter' }`
   rule would otherwise win on specificity). */
.idx-page .section-heading,
.idx-page .h-sections .section-heading {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
.idx-page .section-sub,
.idx-page .h-sections .section-sub {
  font-family: 'Inter', sans-serif !important;
}

/* ───── HERO ─────────────────────────────────────────────────────────────── */
.idx-page .idx2-h1 {
  color: #ffffff !important;
}
.idx-page .idx2-muted { color: var(--color-primary-300, #90a6ee) !important; font-weight: 500; }

.idx-page .idx2-badge {
  background: transparent !important;
  border: 0 !important;
  color: var(--color-primary-300, #90a6ee) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 !important;
}

/* Navbar: transparent at top, only fills once scrolled past the hero edge.
   When dark mode is active, suppress the light gradient layer so it doesn't
   flash through while the dark layer fades in. */
.idx-page .navbar_component.nav-dark::after { opacity: 0; }
.idx-page .navbar_component.nav-dark.nav-scrolled::after { opacity: 1; }
.idx-page .navbar_component:not(.nav-scrolled)::before { opacity: 0; }
.idx-page .navbar_component.nav-dark::before { opacity: 0 !important; }

.idx-page .idx2-sub {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--color-neutral-200, #D4D9EA) !important;
  max-width: 70% !important;
  margin: 0 auto 20px !important;
}
.idx-page .idx2-sub strong { color: #fff; font-weight: 600; }
@media (max-width: 991px) {
  .idx-page .idx2-sub { max-width: 100% !important; font-size: 16px !important; }
}

/* In-hero proof — centered label + row of 4 logos */
.idx-page .idx2-hero-proof {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.idx-page .idx2-hero-proof-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--color-neutral-200, #D4D9EA);
  text-align: center;
}
.idx-page .idx2-hero-proof-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.idx-page .idx2-hero-proof-row img {
  display: block;
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.idx-page .idx2-hero-proof-row img[alt="Phunware"] { width: 136.36px; height: 30px; }
.idx-page .idx2-hero-proof-row img[alt="Alaan"]    { width: 92.88px;  height: 18px; }
.idx-page .idx2-hero-proof-row img[alt="Snappy Kraken"] { height: 32px; }
.idx-page .idx2-hero-proof-row img[alt="Gainsight"] { width: 92.32px;  height: 20px; }
.idx-page .idx2-hero-proof-row img:hover { opacity: 1; }
@media (max-width: 768px) {
  .idx-page .idx2-hero-proof { margin-top: 48px; }
  .idx-page .idx2-hero-proof-row { gap: 32px; }
  .idx-page .idx2-hero-proof-row img { height: 18px; }
  .idx-page .idx2-hero-proof-row img[alt="Snappy Kraken"] { height: 26px; }
}

/* Full-width proof strip — own section, white bg, soft upward shadow */
.idx-page .idx2-proof {
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border-top: 1px solid var(--in-line);
  border-bottom: 1px solid var(--in-line);
  /* Top shadow casts upward into the hero, no shadow below */
  box-shadow: 0 -16px 32px -16px rgba(13, 26, 44, 0.06);
  position: relative;
  z-index: 2;
}

/* 5-column row: 1 label cell + 4 logo cells, divided by vertical hairlines */
.idx-page .idx2-proof-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.idx-page .idx2-proof-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border-left: 1px solid var(--in-line);
}
.idx-page .idx2-proof-cell:first-child { border-left: 0; }
.idx-page .idx2-proof-cell--label { justify-content: flex-start; }

.idx-page .idx2-proof-label {
  font-family: 'Geist Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral-600, #5a6478);
  text-align: left;
  margin: 0;
  line-height: 1.45;
  max-width: 220px;
}

/* Logos render at their exact requested dimensions, centered in their cell */
.idx-page .idx2-proof-cell img {
  display: block;
  object-fit: contain;
}
.idx-page .idx2-proof-cell img[alt="Gainsight"]      { width: 92.32px;  height: 20px; }
.idx-page .idx2-proof-cell img[alt="Phunware"]       { width: 136.25px; height: 30px; }
.idx-page .idx2-proof-cell img[alt="Alaan"]          { width: 103.22px; height: 20px; }
.idx-page .idx2-proof-cell img[alt="Snappy Kraken"]  { width: 83.92px;  height: 35.06px; }

@media (max-width: 991px) {
  .idx-page .idx2-proof-row { grid-template-columns: 1fr 1fr; }
  .idx-page .idx2-proof-cell { min-height: 96px; }
  .idx-page .idx2-proof-cell:nth-child(odd)  { border-left: 0; }
  .idx-page .idx2-proof-cell:nth-child(even) { border-left: 1px solid var(--in-line); }
  .idx-page .idx2-proof-cell:nth-child(n+3)  { border-top: 1px solid var(--in-line); }
  .idx-page .idx2-proof-cell--label { grid-column: 1 / -1; justify-content: center; border-bottom: 1px solid var(--in-line); }
  .idx-page .idx2-proof-cell--label + .idx-page .idx2-proof-cell { border-top: 0; }
}

/* ───── Approach (3-step grid) — frosted card row ────────────────────────── */
.idx-page .h-sections .steps {
  background: var(--in-bg-card) !important;
  border: 1px solid var(--in-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(13, 26, 44, 0.03);
}
.idx-page .h-sections .step { border-right: 1px solid var(--in-line) !important; }
.idx-page .h-sections .step:last-child { border-right: none !important; }
.idx-page .h-sections .step h3 {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  letter-spacing: -0.015em !important;
  color: var(--in-ink) !important;
  margin: 12px 0 14px !important;
}
.idx-page .h-sections .step p {
  color: var(--in-ink-soft) !important;
  font-size: 14px !important;
}
.idx-page .h-sections .step .num {
  color: var(--in-primary) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

/* ───── Outcomes — cleaner mktg-why-card variants ────────────────────────── */
.idx-page .mktg-why-card {
  background: var(--in-bg-card) !important;
  border: 1px solid var(--in-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(13, 26, 44, 0.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.idx-page .mktg-why-card:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 26, 44, 0.14);
  box-shadow: 0 24px 48px -24px rgba(13, 26, 44, 0.18);
}
.idx-page .mktg-why-card-label {
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--in-muted) !important;
}
.idx-page .mktg-why-card-label span { color: var(--in-muted) !important; }
.idx-page .mktg-why-card-desc {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  color: var(--in-ink) !important;
  margin-top: 12px !important;
}
.idx-page .mktg-why-card-insight {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--in-ink-soft) !important;
  border-top: 1px solid var(--in-line);
  padding-top: 16px;
  margin-top: 20px;
}

/* Soften the in-card illustrations to match the cleaner palette */
.idx-page .idx-out-vis {
  background: var(--in-bg) !important;
  border-color: var(--in-line) !important;
}
.idx-page .idx-out-tile,
.idx-page .idx-out-rec,
.idx-page .idx-out-flow-step,
.idx-page .idx-out-bubble--bot {
  border-color: var(--in-line) !important;
}

/* ───── Engine band — dark hero card under outcomes ──────────────────────── */
.idx-page .h-sections .engine {
  background: #0d1a2c !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 18px !important;
  margin-top: 12px;
}
.idx-page .h-sections .engine::before {
  background: linear-gradient(90deg, transparent, var(--in-primary), transparent) !important;
  opacity: 0.4;
}

/* ───── Walkthrough — clean video frame + dash tiles ─────────────────────── */
.idx-page .h-sections .video-frame {
  border-radius: 16px;
  border-color: var(--in-line);
  box-shadow: 0 30px 80px -36px rgba(13, 26, 44, 0.28);
}
.idx-page .h-sections .dash-tile {
  border-radius: 14px;
  border-color: var(--in-line);
  background: var(--in-bg-card);
}

/* ───── Why purpose-built — DARK SECTION ─────────────────────────────────── */
.idx-page #why {
  background: var(--color-neutral-900, #232532) !important;
  background-image: none !important;
  color: #fff;
}

.idx-page #why .section-label {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-page #why .section-label svg path { fill: var(--color-primary-300, #90a6ee) !important; }

.idx-page #why .section-heading,
.idx-page #why h2 { color: #fff !important; }
.idx-page #why .section-heading span[style] {
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-page #why .section-sub,
.idx-page #why p { color: rgba(255, 255, 255, 0.65) !important; }
.idx-page #why .quo-heading {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
.idx-page #why .quo-heading span {
  color: var(--color-neutral-300, #B7BCCA) !important;
}

/* Status-quo grid — clubbed into one role-right pattern container */
.idx-page #why .quo {
  background: rgba(255, 255, 255, 0.03) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 32px !important;
  gap: 32px !important;
}
.idx-page #why .quo-cell {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  box-shadow: none !important;
}
/* Hide the A · Time / B · Trust / C · Debt label — h3 takes over */
.idx-page #why .quo-cell .mono { display: none !important; }
.idx-page #why .quo-cell h3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px !important;
  color: var(--color-primary-300, #90a6ee) !important;
  font-family: 'Geist Mono', monospace !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  background: transparent !important;
  outline: none !important;
  text-decoration: none !important;
}
.idx-page #why .quo-cell h3 svg {
  flex-shrink: 0;
  display: block;
}
.idx-page #why .quo-cell p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.idx-page #why .quo-cell .divider { display: none !important; }

/* Stat — horizontal pill with dark card chrome */
.idx-page #why .quo-cell .stat {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px !important;
  background: #2a2c3a !important;
  border: 1px solid #3a3c4a !important;
  border-radius: 12px !important;
  margin-bottom: 4px;
}
.idx-page #why .quo-cell .stat .big {
  color: #fff !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.idx-page #why .quo-cell .stat .lbl {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  width: auto;
  max-width: none;
  flex: 0 1 auto;
}

/* Comparison table — dark section */
.idx-page #why .table {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  overflow: visible !important;
  scroll-margin-top: 96px;
}
/* Round the corner grid cells so the bg fills the border-radius cleanly
   (overflow:visible is needed for sticky thead, so we radius the items instead) */
.idx-page #why .table .thead:not(.right) { border-top-left-radius: 16px; }
.idx-page #why .table .thead.right {
  border-top-right-radius: 16px;
  border-top-left-radius: 0 !important;
}
.idx-page #why .table .cell:nth-last-child(2) { border-bottom-left-radius: 16px; }
.idx-page #why .table .cell:last-child { border-bottom-right-radius: 16px; }
.idx-page #why .table .thead {
  background: var(--color-neutral-900, #232532) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.idx-page #why .table .thead.right { color: rgba(255,255,255,0.55) !important; }
.idx-page #why .thead .dot { background: var(--color-primary-300, #90a6ee) !important; }
/* Hide the "ask card" prompt for now */
.idx-page #why .ask-card { display: none !important; }

/* Sticky comparison table headers */
.idx-page #why .table .thead,
.idx-page #why .table .thead.right {
  position: sticky;
  top: 72px;
  z-index: 2;
  background: var(--color-neutral-900, #232532) !important;
}
.idx-page #why .table .thead .dot { display: none !important; }
.idx-page #why .table .thead .thead-logo {
  height: 28px;
  width: 95.19px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

/* Cell paragraph 14px */
.idx-page #why .cell p { font-size: 14px !important; }

/* Bucket head: 12px Geist Mono */
.idx-page #why .bucket-head {
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
}

.idx-page #why .bucket-head {
  background: rgba(255,255,255,0.025) !important;
  color: var(--color-primary-300, #90a6ee) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.idx-page #why .bucket-head .dot { display: none !important; }
.idx-page #why .bucket-head .bucket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-primary-300, #90a6ee);
  flex-shrink: 0;
}
.idx-page #why .bucket-head .bucket-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.idx-page #why .cell {
  border-top-color: rgba(255,255,255,0.06) !important;
  background: transparent !important;
}
.idx-page #why .cell.right {
  border-left-color: rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.015) !important;
}
.idx-page #why .cell h4 {
  color: #fff !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
}
.idx-page #why .cell p,
.idx-page #why .cell.right p { color: rgba(255,255,255,0.65) !important; }

/* ───── Foundation cards — soft white cards ──────────────────────────────── */
.idx-page .h-sections .found-card {
  background: var(--in-bg-card) !important;
  border: 1px solid var(--in-line) !important;
  border-radius: 18px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.idx-page .h-sections .found-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -24px rgba(13, 26, 44, 0.18);
}
.idx-page .h-sections .found-card h3 {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
  color: var(--in-ink) !important;
}
.idx-page .h-sections .found-ico {
  background: rgba(0, 97, 237, 0.10) !important;
  color: var(--in-primary) !important;
}

/* ───── FAQ background only — accordion item styling untouched ──────────── */
.idx-page .mktg-faq-section { background: var(--in-bg); }

/* ───── CTA — leave marketing styling alone (dotted grid + 0 padding) ────── */
/* No overrides. The dotted grid lives on .mktg-cta-dotbg (the inner card),
   and marketing sets .mktg-cta-section { padding: 0 !important } already. */

/* ───── Spacing rhythm — bigger breaths ──────────────────────────────────── */
.idx-page .h-sections .h-section,
.idx-page .mktg-faq-section { padding: 120px 0 !important; }

@media (max-width: 991px) {
  .idx-page .h-sections .h-section,
  .idx-page .mktg-faq-section { padding: 80px 0 !important; }
  .idx-page .idx2-hero { padding: 80px 0 !important; }
  .idx-page #foundation .section-sub { max-width: none; }
  .idx-page .idx-foundation-cell-desc { max-width: none; }
}

/* ===========================================================================
   Connectors section — dark, full-width ticker of integration logos.
   =========================================================================== */
.idx-connectors {
  background: #232532;
  color: #e5e9f2;
  padding: 96px 0 80px;
  overflow: hidden;
  position: relative;
}
.idx-connectors > * { position: relative; }

.idx-connectors-head { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.idx-connectors-head .section-label {
  display: inline-flex !important;
  margin: 0 auto 16px !important;
  justify-content: center;
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-connectors-head .section-label svg path { fill: var(--color-primary-300, #90a6ee) !important; }
.idx-connectors-head .section-heading {
  color: #fff !important;
  text-align: center !important;
  margin: 0 auto 16px !important;
}
.idx-connectors-head .section-heading span[style] {
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-connectors-head p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.idx-connectors-head p .accent {
  color: #fff;
  font-weight: 500;
}

/* Ticker rail — constrained to the standard 80rem section width */
.idx-connectors-ticker {
  overflow: hidden;
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.idx-connectors-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: idx-connectors-scroll 40s linear infinite;
}
@keyframes idx-connectors-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.idx-connector-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  flex-shrink: 0;
}
.idx-connector-tile img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}
.idx-connector-tile-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 0 12px;
  line-height: 1.1;
}

/* Pause on hover so users can read */
.idx-connectors-ticker:hover .idx-connectors-track { animation-play-state: paused; }

/* ===========================================================================
   APPROACH — dark "Beyond Perimeter Security"-style section with 3 cards.
   =========================================================================== */
.idx-page .idx-approach {
  background: var(--in-bg) !important;
  background-image: none !important;
  color: var(--in-ink);
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.idx-page .idx-approach-head {
  text-align: left;
  max-width: 760px;
  margin: 0 0 64px;
}

.idx-page .idx-approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Approach cards modeled on .mktg-ill-card (dark variant) */
.idx-page .idx-approach-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  box-shadow: none;
  transition: none;
}
.idx-page .idx-approach-card:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

.idx-page .idx-approach-visual {
  background: transparent;
  border: 0;
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  margin: 24px auto 8px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  aspect-ratio: auto;
}
.idx-page .idx-approach-visual svg,
.idx-page .idx-approach-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.idx-page .idx-approach-meta {
  padding: 12px 24px 24px;
  text-align: left;
}
/* Step label sits ABOVE the illustration — centered */
.idx-page .idx-approach-label {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--color-neutral-900, #232532) !important;
  margin: 0 0 12px !important;
  padding: 0 24px !important;
  line-height: 1 !important;
  text-align: center !important;
}
/* Meta icon sits above the title inside .idx-approach-meta */
.idx-page .idx-approach-meta-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 16px;
  height: 16px;
  margin-bottom: 12px;
  color: var(--color-primary-500, #3661ed);
}
.idx-page .idx-approach-meta-icon svg {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 16px;
}
/* Name styled like .mktg-ill-card-title — Instrument Sans 12px uppercase primary-500 */
.idx-page .idx-approach-name {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--color-primary-500, #3661ed) !important;
  margin: 0 0 8px !important;
  line-height: normal !important;
}
.idx-page .idx-approach-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--in-ink, #0d1a2c) !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .idx-page .idx-approach-grid { grid-template-columns: 1fr; }
  .idx-page .idx-approach-head { margin-bottom: 40px; }
}

/* ===========================================================================
   Outcomes — tab UI panes (h3 title + sub + bullet list + video below).
   .uc-tab-strip styling comes from marketing.min.css; we only need pane bits.
   =========================================================================== */
.idx-page .idx-outcomes-tabs { margin-top: 8px; }
/* Hug content width — strip sits centered, tabs size to their label */
.idx-page .idx-outcomes-tabs .uc-tab-strip {
  max-width: max-content;
  margin: 0 auto 40px;
}
.idx-page .idx-outcomes-tabs .uc-tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.idx-page .idx-outcomes-tabs .uc-tab-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-neutral-500);
  transition: color 0.18s ease;
}
.idx-page .idx-outcomes-tabs .uc-tab-icon svg { display: block; }
.idx-page .idx-outcomes-tabs .uc-tab.active .uc-tab-icon,
.idx-page .idx-outcomes-tabs .uc-tab:hover .uc-tab-icon {
  color: var(--in-ink);
}

/* Outcomes tab strip — follows .mktg-role-tabs pattern */
.idx-page .idx-outcomes-tabs .uc-tab-strip {
  display: flex;
  position: relative;
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  gap: 4px;
}
.idx-page .idx-outcomes-tabs .uc-tab-strip::after {
  content: '';
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
.idx-page .idx-outcomes-tabs .uc-tab {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: transparent !important;
  transition: all 0.2s cubic-bezier(0.6, 0.6, 0, 1);
}
.idx-page .idx-outcomes-tabs .uc-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.idx-page .idx-outcomes-tabs .uc-tab.active { background: transparent !important; }
.idx-page .idx-outcomes-tabs .uc-tab-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.40) !important;
}
.idx-page .idx-outcomes-tabs .uc-tab-icon svg { width: 20px; height: 20px; }
.idx-page .idx-outcomes-tabs .uc-tab.active .uc-tab-icon {
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-page .idx-outcomes-tabs .uc-tab-label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.50) !important;
  line-height: 22px !important;
}
.idx-page .idx-outcomes-tabs .uc-tab.active .uc-tab-label {
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* Centered section header for #outcomes */
.idx-page #outcomes .section-label {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-page #outcomes .section-label svg path { fill: var(--color-primary-300, #90a6ee) !important; }
.idx-page #outcomes > .padding-global > .container-large {
  text-align: center;
}
.idx-page #outcomes .section-heading,
.idx-page #outcomes .section-sub {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
}
.idx-page #outcomes .section-heading {
  color: #fff !important;
}
.idx-page #outcomes .section-heading span[style] {
  color: var(--color-primary-300, #90a6ee) !important;
}
.idx-page #outcomes .section-sub {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.65) !important;
}
.idx-page #outcomes .idx-out-pane-title { color: #fff !important; }
.idx-page #outcomes .idx-out-pane-sub,
.idx-page #outcomes .idx-out-pane-list li { color: rgba(255, 255, 255, 0.55) !important; }

/* Outcomes tab strip styles consolidated in the .mktg-role-tabs override above */

/* Glass video card adjusted for dark bg */
.idx-page #outcomes .idx-out-pane-right .runs-video-placeholder {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 8px 32px rgba(0,0,0,0.40),
    0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Restore left-align inside the tab panes so the bullet list reads naturally */
.idx-page #outcomes .idx-outcomes-tabs { text-align: left; }

.idx-page .idx2-pane { display: none; }
.idx-page .idx2-pane.is-active { display: block; }

/* 2-column pane: content on the left (40%), video on the right (60%) */
.idx-page .idx-out-pane-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: center;
}
.idx-page .idx-out-pane-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.idx-page .idx-out-pane-right { min-width: 0; }
.idx-page .idx-out-pane-right .runs-video-placeholder {
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.15) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3),
    0 8px 32px rgba(54,97,237,0.10),
    0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.idx-page .idx-out-pane-right .runs-video-placeholder video,
.idx-page .idx-out-pane-right .runs-video-placeholder img.video-thumb {
  border-radius: 8px !important;
}

/* Frame is a fixed 16:9 box. Thumb is the static poster.
   Video is hidden until the user clicks (the is-playing state). */
.idx-page .runs-video-placeholder {
  background: transparent;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.idx-page .runs-video-placeholder img.video-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit;
}
.idx-page .runs-video-placeholder video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: none !important;
  border-radius: inherit;
  z-index: 1;
}
.idx-page .runs-video-placeholder.is-playing {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  height: auto !important;
}
.idx-page .runs-video-placeholder.is-playing video {
  display: block !important;
  object-fit: contain !important;
  background: #000;
}
.idx-page .runs-video-placeholder.is-playing img.video-thumb {
  display: none !important;
}
.idx-page .runs-video-placeholder .video-watch-icon-btn { z-index: 2; }

.idx-page .idx-out-pane-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--in-ink);
  margin: 0;
  line-height: 1.2;
}
.idx-page .idx-out-pane-sub {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--in-ink-soft);
  margin: 0;
}

/* Bullet list — no boxes, simple primary-bullet rows */
.idx-page .idx-out-pane-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.idx-page .idx-out-pane-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--in-ink-soft);
}
.idx-page .idx-out-pane-list li::before { content: none; }
/* Per-item 1/2/3 numbered phosphor icons (rendered inline in HTML) */
.idx-page .idx-out-pane-list-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.idx-page .idx-out-pane-list-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

@media (max-width: 900px) {
  .idx-page .idx-out-pane-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .idx-page .idx-out-pane-left { max-width: none; }
  .idx-page .idx-out-pane-list { gap: 12px; }
}

/* ===========================================================================
   Engine CTA card — dark, two scrolling pill rows, links to /skills.
   Inspired by .os-cta (clean heading + action) and .agent-tag-row (animated).
   =========================================================================== */
.idx-page #walkthrough {
  background: linear-gradient(180deg, #dce6fc 0%, #ffffff 50%) !important;
}
.idx-page #walkthrough .section-heading { color: var(--in-ink) !important; }
.idx-page #walkthrough .section-heading span[style] { color: var(--color-primary-500, #3661ed) !important; }
.idx-page #walkthrough .section-sub { color: var(--in-ink-soft) !important; }
.idx-page #walkthrough .section-label { color: var(--color-primary-500, #3661ed) !important; }
.idx-page #walkthrough .section-label svg path { fill: var(--color-primary-500, #3661ed) !important; }
.idx-page #walkthrough .runs-video-placeholder { margin-bottom: 0; }

/* Centered intro: text stacked on top, large video below */
.idx-page #walkthrough .idx-engine-intro-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  margin-bottom: 80px;
}
.idx-page #walkthrough .idx-engine-intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 780px;
  width: 100%;
}
.idx-page #walkthrough .idx-engine-intro-text .section-label {
  display: inline-flex;
  justify-content: center;
}
.idx-page #walkthrough .idx-engine-intro-text .section-heading,
.idx-page #walkthrough .idx-engine-intro-text .section-sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 24px !important;
}
.idx-page #walkthrough .idx-engine-intro-text .section-sub:last-child {
  margin-bottom: 0 !important;
}
.idx-page #walkthrough .idx-engine-intro-grid .runs-video-placeholder {
  width: 100%;
}
@media (max-width: 900px) {
  .idx-page #walkthrough .idx-engine-intro-grid {
    gap: 40px;
    margin-bottom: 56px;
  }
}

.idx-page .idx-engine-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(130, 92, 222, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(54, 97, 237, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(54, 97, 237, 0.04) 0%, transparent 70%);
  border: 1px solid var(--color-neutral-100, #EEF0F7);
  border-radius: 16px;
  padding: 24px;
  color: var(--in-ink);
  text-decoration: none;
  box-shadow:
    0 24px 48px -16px rgba(54, 97, 237, 0.12),
    0 4px 16px -4px rgba(13, 26, 44, 0.08);
}
/* No hover effect on the card itself — only the CTA reacts */
.idx-page .idx-engine-card:hover {
  border-color: var(--color-neutral-100, #EEF0F7);
  box-shadow:
    0 24px 48px -16px rgba(54, 97, 237, 0.12),
    0 4px 16px -4px rgba(13, 26, 44, 0.08);
}

/* Left column: eyebrow + title + sub + CTA stacked */
.idx-page .idx-engine-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 0;
}
.idx-page .idx-engine-meta { max-width: 100%; }
.idx-page .idx-engine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-500, #3661ed);
  margin-bottom: 14px;
  line-height: 1;
}
.idx-page .idx-engine-eyebrow > svg {
  flex-shrink: 0;
  display: block;
}
.idx-page .idx-engine-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--in-ink);
  margin: 0 0 10px;
}
.idx-page .idx-engine-title .dim {
  color: var(--color-primary-500, #3661ed);
  font-weight: 500;
}
.idx-page .idx-engine-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--in-ink-soft);
  margin: 0;
}

/* Right column: wrapped pill grid (no animation) */
.idx-page .idx-engine-tracks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  justify-content: center;
}
.idx-page .idx-engine-track { overflow: visible; }
.idx-page .idx-engine-track-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* Pill chips — pre-built workstream pills + custom skills variant */
.idx-page .idx-engine-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--color-neutral-200, #D4D9EA);
  color: var(--color-text-secondary, #757A97);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.idx-page .idx-engine-pill svg { flex-shrink: 0; color: var(--color-neutral-600, #52577A); }
.idx-page .idx-engine-pill.is-custom {
  background: #FFFFFF;
  border: 1px dashed var(--color-primary-500, #3661ed);
  color: var(--color-primary-500, #3661ed);
}
.idx-page .idx-engine-pill.is-custom svg { color: var(--color-primary-500, #3661ed); }

@media (max-width: 900px) {
  .idx-page .idx-engine-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
}

/* ===========================================================================
   Foundation cards — small icon + title on top, image in the middle,
   body text below. Uses the .mktg-why-grid 2-column layout.
   =========================================================================== */
.idx-page .foundation-grid.mktg-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Foundation 2x2 grid — internal hairlines form a + cross at the center */
.idx-page .idx-foundation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.idx-page .idx-foundation-cell {
  padding: 24px;
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.idx-page .idx-foundation-cell:nth-child(1),
.idx-page .idx-foundation-cell:nth-child(3) {
  border-right: 1px solid var(--in-line);
}
.idx-page .idx-foundation-cell:nth-child(1),
.idx-page .idx-foundation-cell:nth-child(2) {
  border-bottom: 1px solid var(--in-line);
}
/* Illustration sits on top, head wrapper becomes invisible (contents),
   icon is hidden — title flows directly under the visual */
.idx-page .idx-foundation-cell-visual {
  order: -1;
  margin-bottom: 24px;
}
/* Head is contents-only — icon shows above the title */
.idx-page .idx-foundation-cell-head { display: contents; }
.idx-page .idx-foundation-cell-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 8px;
  margin-bottom: 16px;
  background: #ffffff;
  color: var(--color-primary-500, #3661ed);
  border: 1px solid var(--color-neutral-50, #F8F9FC);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(13, 26, 44, 0.04), 0 2px 6px -2px rgba(13, 26, 44, 0.06);
  box-sizing: border-box;
  flex-shrink: 0;
}
.idx-page .idx-foundation-cell-icon svg {
  flex-shrink: 0;
  display: block;
  width: 32px !important;
  height: 32px !important;
  color: var(--color-primary-500, #3661ed);
  fill: currentColor;
}
/* Title — h4 18px */
.idx-page .idx-foundation-cell-title {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--color-primary-500, #3661ed) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}
/* Desc — matches .idx-approach-desc */
.idx-page .idx-foundation-cell-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--in-ink, #0d1a2c) !important;
  margin: 0 !important;
  max-width: 520px;
}
.idx-page .idx-foundation-cell-visual { display: none !important; }

/* Bullet list of foundation details */
.idx-page .idx-found-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idx-page .idx-found-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--in-ink-soft, #5a6478);
}
.idx-page .idx-found-list-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.idx-page .idx-found-list-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

@media (max-width: 900px) {
  .idx-page .idx-foundation-grid { grid-template-columns: 1fr; }
  .idx-page .idx-foundation-cell { padding: 40px 24px; }
  .idx-page .idx-foundation-cell:nth-child(1),
  .idx-page .idx-foundation-cell:nth-child(3) { border-right: 0; }
  .idx-page .idx-foundation-cell:nth-child(3) { border-bottom: 1px solid var(--in-line); }
}

@media (max-width: 900px) {
  .idx-page .idx-foundation-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .idx-page .idx-foundation-visual {
    max-width: 100%;
    margin: 0 auto;
  }
}
/* Foundation cards modeled on .mktg-ill-card */
.idx-page .idx-found-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  transition: none;
}
.idx-page .idx-found-card:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none;
}

/* Raised inner card holding the illustration */
.idx-page .idx-found-card .mktg-why-card-visual {
  background: #fff;
  border: 0 !important;
  border-radius: 8px;
  box-shadow: 0 4px 24px -10px rgba(13, 26, 44, 0.10);
  padding: 0;
  width: 100%;
  max-width: 320px;
  margin: 24px auto 8px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: auto;
}
.idx-page .idx-found-card .mktg-why-card-visual svg,
.idx-page .idx-found-card .mktg-why-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body padding under the inner card */
.idx-page .idx-found-card .idx-found-body {
  padding: 12px 24px 24px;
  text-align: left;
}

/* Icon above title — small accent, primary-500 */
.idx-page .idx-found-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  color: var(--color-primary-500, #3661ed);
}
.idx-page .idx-found-icon svg { width: 100%; height: 100%; display: block; }

/* Title — Instrument Sans 12px uppercase primary-500 */
.idx-page .idx-found-card .mktg-why-card-label {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--color-primary-500, #3661ed) !important;
  display: block !important;
  margin-bottom: 8px;
  line-height: normal;
}
.idx-page .idx-found-card .mktg-why-card-label span { color: var(--color-primary-500, #3661ed) !important; }

/* Desc — Inter 14px neutral-900 */
.idx-page .idx-found-card .mktg-why-card-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--color-neutral-900, #0d1a2c) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .idx-page .foundation-grid.mktg-why-grid { grid-template-columns: 1fr; }
  .idx-page .idx-found-card .idx-found-body { padding: 12px 0 24px; }
  .idx-page .idx-found-card .mktg-why-card-visual { margin: 0 auto 8px; }
}

/* ─── Mobile breakpoint overrides ─── */
@media (max-width: 768px) {
  /* Hero — left-align all text blocks */
  .idx-page .idx2-badge {
    text-align: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 240px;
  }
  .idx-page .idx2-h1 {
    text-align: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .idx-page .idx2-sub {
    text-align: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .idx-page .idx2-hero-proof {
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .idx-page .idx2-hero-proof-label {
    text-align: left !important;
  }
  .idx-page .idx2-hero-proof-row {
    justify-content: center !important;
  }

  /* Book a Demo CTA — full width on mobile */
  .idx-page .idx2-cta-row {
    width: 100% !important;
    align-self: stretch !important;
  }
  .idx-page .idx2-hero .btn-primary,
  .idx-page .idx2-cta-row .btn-primary,
  .idx-page .mktg-cta-section .btn-primary,
  .idx-page .idx2-hero-actions .btn-primary,
  .idx-page .mktg-cta-section .btn-demo.mktg-cta-btn,
  .idx-page .mktg-cta-section .mktg-cta-btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
    align-self: stretch !important;
  }

  /* Approach meta — no left/right padding */
  .idx-page .idx-approach-meta {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Comparison cells — 24px vertical / 20px horizontal */
  .idx-page #why .table .cell {
    padding: 24px 20px !important;
  }

  /* Foundation cell — add vertical padding back */
  .idx-page .idx-foundation-cell {
    padding: 24px 0 !important;
  }

  /* Section header trio — left align + label full width */
  .idx-page .section-label.reveal-on-scroll {
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .idx-page .section-heading.reveal-on-scroll {
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .idx-page .section-sub.reveal-on-scroll {
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Skills engine card — tighter horizontal padding on mobile */
  .idx-page .idx-engine-card {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Skills engine track header */
  .idx-page .idx-engine-track-inner {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  /* Walkthrough intro — left align text on mobile (override centered rule) */
  .idx-page #walkthrough .idx-engine-intro-text {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .idx-page #walkthrough .idx-engine-intro-text .section-label {
    justify-content: flex-start !important;
  }
  .idx-page #walkthrough .idx-engine-intro-text .section-heading,
  .idx-page #walkthrough .idx-engine-intro-text .section-sub {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Why — stat tile stacks vertically */
  .idx-page #why .quo-cell .stat {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Outcomes tab — restore active background on mobile (the sliding ::after pill is hidden) */
  .idx-page .idx-outcomes-tabs .uc-tab.active {
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }

  /* Why — quo padding */
  .idx-page #why .quo {
    padding: 24px !important;
  }

  /* Why — keep comparison table side-by-side (override 1024px collapse) */
  .idx-page #why .table {
    grid-template-columns: 1fr 1fr !important;
  }
  .idx-page #why .table .cell.right { border-left: 1px solid rgba(255,255,255,0.08) !important; }

  /* Connectors header — left align */
  .idx-page .idx-connectors-head {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-items: flex-start !important;
  }
}