/**
 * Core page – graphic wrappers using Animated Screenshots/Core mockups.
 * Fit images edge-to-edge inside blue boxes, full visibility.
 */

/* Core splash: same treatment as brain boxes – blue gradient, rounded, floating, iframe fills */
.page-core .core-splash-graphic-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 560 / 340;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  box-shadow: 0 0 20px 2px rgba(59,130,246,0.18), 0 0 45px 8px rgba(99,102,241,0.12);
  animation: float-graphic 4s ease-in-out infinite;
}
@media (min-width: 768px) {
  .page-core .core-splash-graphic-wrap {
    min-width: 720px;
  }
}
.page-core .core-splash-graphic-wrap .core-workflows-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Tribble Brain: 3 columns, core-57 / core-60 / core-63 (400×280 each) */
.page-core .core-section-brain .page-heading {
  margin-bottom: 3.5rem !important;
}
@media (min-width: 768px) {
  .page-core .core-section-brain .page-heading {
    margin-bottom: 4rem !important;
  }
}
.page-core .core-brain-row .core-brain-graphic-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 405px;
  aspect-ratio: 400 / 280;
  overflow: hidden;
  border-radius: 1rem;
  line-height: 0;
  flex: none;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  box-shadow: 0 0 20px 2px rgba(59,130,246,0.18), 0 0 45px 8px rgba(99,102,241,0.12);
  animation: float-graphic 4s ease-in-out infinite;
}
.page-core .core-brain-row .core-brain-graphic-wrap .core-graphic-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  display: block;
}

/* Tribble Brain columns: body text without bullets */
.page-core .core-brain-col .content-list {
  list-style: none;
  padding-left: 0;
}

/* Orchestrator & Surfaces: feature-z visual wraps — min 720px so animation fills, no whitespace */
.page-core .feature-z-section .feature-z-visual .core-z-graphic-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 720px;
  min-height: 437px;
  aspect-ratio: 560 / 340;
  overflow: hidden;
  border-radius: 1rem;
  line-height: 0;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  box-shadow: 0 0 20px 2px rgba(59,130,246,0.18), 0 0 45px 8px rgba(99,102,241,0.12);
  animation: float-graphic 4s ease-in-out infinite;
}
.page-core .feature-z-section .feature-z-visual .core-z-graphic-wrap.core-surfaces-wrap {
  aspect-ratio: 520 / 320;
  min-width: 600px;
  min-height: 369px;
}
.page-core .feature-z-section .feature-z-visual .core-z-graphic-wrap .core-graphic-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  display: block;
}

/* Integrations: heading + intro spacing */
.page-core .integrations-section-inner .page-heading {
  margin-bottom: 0.75rem;
}
.page-core .integrations-section-inner .content-intro {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 1.25rem;
}

/* Integrations: core-integration — match others: position relative, iframe fills, animation scales */
.page-core .integrations-splash-wrap.core-integration-wrap {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  line-height: 0;
  aspect-ratio: 560 / 340;
  min-height: 280px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  box-shadow: 0 0 20px 2px rgba(59,130,246,0.18), 0 0 45px 8px rgba(99,102,241,0.12);
  animation: float-graphic 4s ease-in-out infinite;
}
.page-core .integrations-splash-wrap.core-integration-wrap .core-graphic-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  display: block;
}