/* Platform page visual update. This stylesheet is intentionally scoped to the Platform route. */
body[data-route="/platform"] {
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
}

body[data-route="/platform"] .platform-page {
  background: var(--paper);
}

body[data-route="/platform"] .platform-page :is(h1, h2, h3) {
  text-wrap: balance;
}

body[data-route="/platform"] .platform-page p {
  font-size: 20px;
  text-wrap: pretty;
}

body[data-route="/platform"] .platform-page .eyebrow,
body[data-route="/platform"] .platform-page .illustrative-label,
body[data-route="/platform"] .platform-page .browser-moment > .illustrative-label,
body[data-route="/platform"] .platform-page .browser-bar,
body[data-route="/platform"] .platform-page .badge,
body[data-route="/platform"] .platform-page .platform-image-open {
  font-size: var(--type-small);
}

body[data-route="/platform"] .platform-hero {
  max-width: 1100px;
  padding-block: 104px 88px;
  text-align: left;
}

body[data-route="/platform"] .platform-hero h1 {
  max-width: none;
}

body[data-route="/platform"] .platform-hero h1 span {
  display: inline-block;
  white-space: nowrap;
}

body[data-route="/platform"] .platform-hero .subhead {
  margin-inline: 0;
}

body[data-route="/platform"] .stone-section,
body[data-route="/platform"] .platform-matter-section {
  background: var(--stone);
}

body[data-route="/platform"] .platform-matter-section {
  background: var(--pale-sage);
}

body[data-route="/platform"] .platform-ecosystem-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

body[data-route="/platform"] .platform-ecosystem-copy .section-heading {
  margin-bottom: 0;
}

body[data-route="/platform"] .platform-ecosystem-link {
  display: block;
  width: 100%;
  max-width: 810px;
}

body[data-route="/platform"] .supplied-visual {
  width: min(100%, var(--native-image-width));
  max-width: var(--native-image-width);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--olive);
  border-radius: 24px;
  background: var(--pale-sage);
}

body[data-route="/platform"] .supplied-visual > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: initial;
}

body[data-route="/platform"] .platform-ecosystem-visual {
  max-width: 810px;
}

body[data-route="/platform"] .platform-image-open {
  margin-top: 14px;
}

body[data-route="/platform"] .platform-image-open a {
  border-bottom: 1px solid var(--olive);
  text-decoration: none;
}

body[data-route="/platform"] .platform-image-open a:hover {
  border-color: var(--ink);
  text-decoration: none;
}

body[data-route="/platform"] .platform-nexus-section,
body[data-route="/platform"] .platform-operator-section {
  align-items: center;
}

body[data-route="/platform"] .platform-nexus-visual {
  justify-self: end;
}

body[data-route="/platform"] .platform-nexus-visual,
body[data-route="/platform"] .platform-nexus-visual {
  width: min(100%, var(--native-image-width));
  max-width: 665px;
}

body[data-route="/platform"] .platform-operator-section .browser-moment {
  width: 100%;
  max-width: 665px;
}

body[data-route="/platform"] .platform-operator-section .browser-moment {
  background: var(--white);
}

body[data-route="/platform"] .platform-operator-section .browser-moment .icon {
  color: var(--ink);
}

body[data-route="/platform"] .matter-brand-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 168px;
}

body[data-route="/platform"] .matter-brand-block img {
  display: block;
  width: min(100%, 440px);
  height: auto;
  max-width: 640px;
}

body[data-route="/platform"] .platform-cloud-band,
body[data-route="/platform"] .platform-security-band {
  background: var(--sage-dark);
  color: var(--on-dark);
}

body[data-route="/platform"] .platform-cloud-band :is(h1, h2, h3, p),
body[data-route="/platform"] .platform-security-band :is(h1, h2, h3, p) {
  color: var(--on-dark);
}

body[data-route="/platform"] .platform-cloud-copy .section-heading {
  max-width: 760px;
  margin-bottom: 0;
}

body[data-route="/platform"] .platform-security-band .icon {
  color: var(--white);
}

body[data-route="/platform"] .platform-page .card,
body[data-route="/platform"] .platform-page .panel {
  background: var(--pale-sage);
  color: var(--ink);
}

body[data-route="/platform"] .platform-page .card .icon,
body[data-route="/platform"] .platform-page .panel .icon {
  color: var(--sage-dark);
}

body[data-route="/platform"] .platform-page .card .icon[width="24"],
body[data-route="/platform"] .platform-page .panel .icon[width="24"] {
  color: var(--ink);
}

body[data-route="/platform"] .closing {
  background: var(--ink);
  color: var(--white);
}

body[data-route="/platform"] .closing :is(h1, h2, h3, p, .eyebrow) {
  color: var(--white);
}

body[data-route="/platform"] .closing .button {
  background: var(--ink);
  border-color: var(--white);
  color: var(--white);
}

body[data-route="/platform"] .closing .button:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
}

@media (max-width: 800px) {
  body[data-route="/platform"] .platform-hero {
    padding-block: 72px 64px;
  }

  body[data-route="/platform"] .platform-nexus-section > .platform-nexus-visual,
  body[data-route="/platform"] .platform-operator-section > .browser-moment {
    order: -1;
  }
}

@media (max-width: 600px) {
  body[data-route="/platform"] {
    font-size: 18px;
  }

  body[data-route="/platform"] .platform-page p {
    font-size: 18px;
  }

  body[data-route="/platform"] .platform-hero {
    padding-block: 56px 48px;
  }

  body[data-route="/platform"] .platform-hero h1 {
    font-size: clamp(22px, 6.15vw, 36px);
    line-height: 1.14;
  }

  body[data-route="/platform"] .platform-ecosystem-section {
    gap: 24px;
  }

  body[data-route="/platform"] .platform-ecosystem-link {
    order: -1;
  }

  body[data-route="/platform"] .supplied-visual,
  body[data-route="/platform"] .platform-ecosystem-visual,
  body[data-route="/platform"] .platform-nexus-visual,
  body[data-route="/platform"] .platform-operator-section .browser-moment {
    width: 100%;
    max-width: 100%;
    border-radius: 18px;
  }

  body[data-route="/platform"] .platform-image-open {
    margin-top: 12px;
  }

  body[data-route="/platform"] .matter-brand-block {
    min-height: 104px;
  }

  body[data-route="/platform"] .matter-brand-block img {
    width: min(100%, 360px);
  }

  body[data-route="/platform"] .platform-cloud-band .section,
  body[data-route="/platform"] .platform-security-band .section {
    padding-block: 64px;
  }
}

@media(max-width:600px) {
  body[data-route='/platform'] .platform-page { display: flex; flex-direction: column; }
  body[data-route='/platform'] .platform-page > * { order: 2; }
  body[data-route='/platform'] .platform-page > .stone-section { order: 0; }
  body[data-route='/platform'] .platform-page > .platform-hero { order: 1; }
}