/* Shared text layouts for migrated source components. Keep labels, icons and copy distinct. */
.site-header.is-scrolled {
  background: #14223e
}

.brand .company-logo {
  display: block;
  width: 160px;
  height: auto;
  max-width: none;
  object-fit: contain
}

.footer-brand .brand {
  display: inline-flex;
  background: #14223e;
  border-radius: 12px;
  padding: 12px 16px
}

.footer-brand .company-logo {
  width: 185px
}

@media(max-width:650px) {
  .brand .company-logo {
    width: 140px
  }

  .footer-brand .company-logo {
    width: 175px
  }
}

@media(max-width:360px) {
  .brand .company-logo {
    width: 117px
  }

  .site-header {
    gap: 10px
  }

  .site-header .nav-cta {
    padding: 9px 11px
  }

  .header-actions {
    gap: 5px
  }
}

.source-content :is(.ecosystem-card, .why-product-card, .impact-card, .extension-stat, .resource-category, .marketplace-card, .accelerator-fit, .v53-list-item, .company-v86-leader, .persona-v42, .learning-step, .company-v86-culture-card, .loop-step, .outcome, .step)>b,
.source-content :is(.ecosystem-card, .why-product-card, .impact-card, .extension-stat, .resource-category, .marketplace-card, .accelerator-fit, .v53-list-item, .company-v86-leader, .persona-v42, .learning-step, .company-v86-culture-card, .loop-step, .outcome, .step)>strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}

.source-content :is(.ecosystem-card, .why-product-card, .impact-card, .extension-stat, .resource-category, .marketplace-card, .accelerator-fit, .v53-list-item, .company-v86-leader, .persona-v42, .learning-step, .company-v86-culture-card, .loop-step, .outcome, .step)>span {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

.source-content :is(.outcome, .step, .learning-step)>i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin: 0 0 20px;
  border-radius: 12px;
  background: #e1e9f6;
  color: #4b6591;
  font-style: normal;
  font-size: 18px;
  line-height: 1.3;
}

.source-content :is(.cap-outcome, .usecase-outcome, .resource-callout, .public-cloud-hub-note, .foundation-note-v35)>b {
  display: block;
  margin: 0 0 8px;
  line-height: 1.5;
}

.source-content :is(.subcard, .persona-v42, .learning-step, .loop-step) {
  display: block;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #f6f8fc;
  min-width: 0
}

.source-content .subcard h3 {
  margin: 14px 0;
  line-height: 1.3
}

.source-content .subcard p:last-child {
  margin-bottom: 0
}

.source-content .subgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.source-content .proof-section-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 40px;
  font-size: inherit;
  line-height: 1.65;
  letter-spacing: normal;
  text-transform: none
}

.source-content .proof-section-head h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-bottom: 20px
}

.source-content .proof-section-head p {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400
}

.source-content .product-customer-proof-label {
  font-size: 11px;
  letter-spacing: .08em;
  margin-bottom: 20px
}

.source-content .premium-cta-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  line-height: 1.7;
  margin-top: 18px
}

.source-content .premium-cta-notes>span {
  display: block
}

.source-content .premium-cta-wrap {
  align-items: flex-start
}

.source-content .premium-cta-wrap>div {
  min-width: 0
}

.source-content .premium-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 35%;
  flex-shrink: 1
}

.source-content .premium-cta-actions .btn {
  margin: 0;
  white-space: normal;
  line-height: 1.6
}

.source-content .closed-loop {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px
}

.source-content .closed-loop .loop-arrow {
  display: none
}

.source-content .loop-step {
  padding: 22px
}

.source-content .loop-step>small {
  display: block;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 10px
}

.source-content .optix-scenario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0
}

.source-content .optix-scenario>b {
  font-size: 12px;
  line-height: 1.5
}

.source-content .optix-scenario>strong {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere
}

.source-content .optix-scenario>small {
  font-size: 11px;
  line-height: 1.7
}

.source-content .optix-scenario-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px
}

/* This matrix has one outcome column plus four products, not three columns. */
.source-content .usecase-matrix {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #f6f8fc
}

.source-content .usecase-matrix :is(.matrix-head, .matrix-row) {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) repeat(4, minmax(95px, 1fr));
  gap: 16px;
  align-items: center;
  min-width: 700px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.65
}

.source-content .usecase-matrix .matrix-head {
  background: #e4ecf8
}

.source-content .usecase-matrix :is(.matrix-head, .matrix-row)>:not(:first-child) {
  text-align: center;
  font-style: normal
}

.source-content .matrix-row>i {
  font-size: 21px;
  color: #8998b2
}

.source-content .matrix-row>i.yes {
  color: #37598d
}

.source-content .usecase-matrix .matrix-row:last-child {
  border-bottom: 0
}

/* Grid tracks must be allowed to shrink, while long text wraps inside each card. */
.page-hero-grid>*,
.source-content [class*="grid"]>*,
.footer-top>*,
.expertise-grid>*,
.faq-layout>*,
.suite-grid>*,
.insights-grid>* {
  min-width: 0
}

main :is(h1, h2, h3, h4),
.source-content :is(p, li, b, strong, span),
.footer-top a {
  overflow-wrap: break-word
}

.source-content [class*="grid"]>*,
.source-content .steps>*,
.source-content .why-product-card {
  height: auto
}

.product-page-hero .page-hero-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 48px
}

.product-page-hero h1 {
  font-size: clamp(42px, 5.1vw, 72px)
}

.product-hero-art {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1;
  height: auto;
  justify-self: center;
  transform: none;
  margin: 0;
  isolation: isolate
}

.product-hero-art .orbit-1 {
  width: 56%;
  height: 56%
}

.product-hero-art .orbit-2 {
  width: 79%;
  height: 79%
}

.product-hero-art .orbit-3 {
  width: 100%;
  height: 100%
}

.product-hero-art .product-core {
  width: 35%;
  height: 35%;
  font-size: clamp(18px, 2vw, 25px)
}

.product-hero-art .label-one {
  top: 3%
}

.product-hero-art .label-two {
  right: 0
}

.product-hero-art .label-three {
  bottom: 3%
}

.hero-point>span {
  display: block;
  line-height: 1.75
}

.source-content .resource-meta {
  gap: 8px 12px
}

.source-content .credential-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #f6f8fc;
  flex-wrap: wrap
}

.source-content .credential-copy {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1 1 340px
}

.source-content .credential-copy>div {
  min-width: 0
}

.source-content .credential-copy b {
  display: block;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 12px
}

.source-content .credential-copy span {
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted)
}

.source-content :is(.signal-products, .sig-products) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6
}

.source-content .signal-products>span,
.source-content .sig-products>span {
  display: block
}

.motion-scrub:focus-within {
  z-index: 1
}

@media(max-width:1080px) {
  .desktop-nav {
    display: none
  }

  .mobile-toggle {
    display: block
  }

  .site-header .nav-cta {
    display: none
  }

  .site-header .header-actions {
    gap: 14px
  }

  .site-header .search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    padding: 10px
  }

  .site-header .mobile-toggle {
    width: 40px;
    height: 44px;
    padding: 8px
  }

  .mobile-menu {
    top: 98px;
    padding: 18px 24px 24px;
    border: 1px solid #435473;
    background: #14223e;
    box-shadow: 0 20px 50px #08152d40;
    max-height: calc(100dvh - 118px);
    overflow-y: auto
  }

  .mobile-menu a {
    padding: 15px 6px;
    font-size: 16px;
    line-height: 1.5
  }

  .mobile-menu a:last-child {
    margin-top: 20px;
    padding: 15px 20px;
    border: 0;
    border-radius: 14px;
    background: #c4d7f8;
    color: #14223e;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    min-height: 52px
  }

  .mobile-menu a:last-child:hover {
    background: #d6e4fb
  }

  .source-content .closed-loop {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:950px) {
  .product-page-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 30px
  }

  .source-content .premium-cta-actions {
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 25px
  }
}

@media(max-width:700px) {
  .product-page-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .product-hero-art {
    max-width: 310px;
    margin: 24px auto 0
  }

  .product-page-hero h1 {
    font-size: clamp(39px, 8vw, 57px)
  }

  .source-content .closed-loop,
  .source-content .subgrid {
    grid-template-columns: minmax(0, 1fr)
  }

  .source-content .optix-scenario-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px
  }

  .source-content .optix-scenario {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line)
  }

  .source-content .optix-scenario:last-child {
    border-bottom: 0;
    padding-bottom: 0
  }

  .source-content .proof-section-head {
    text-align: left
  }
}

@media(max-width:650px) {
  .site-header {
    padding: 0 15px;
    gap: 12px
  }

  .site-header .company-logo {
    width: 158px
  }

  .site-header .header-actions {
    gap: 5px
  }

  .mobile-menu {
    left: 16px;
    right: 16px;
    top: 90px;
    max-height: calc(100dvh - 106px)
  }
}

@media(max-width:360px) {
  .site-header .company-logo {
    width: 138px
  }

  .site-header .header-actions {
    gap: 1px
  }

  .mobile-menu {
    padding: 15px 20px 20px
  }
}