.integration-page {
  background: var(--color-white);
}

.integration-page main :where(h2:not(#integration-cta-title)) {
  margin: 0;
  color: var(--color-text);
  font-size: 2rem;
  line-height: 1.08;
}

.integration-page main :where(h3) {
  letter-spacing: 0;
}

.integration-page main p {
  text-wrap: pretty;
}

.integration-hero {
  overflow: hidden;
}

.integration-hero .solution-hero__content {
  max-width: 42rem;
}

.integration-hero h1 {
  font-size: clamp(2.2rem, 8vw, 3.1rem);
}

.integration-hero-visual {
  position: relative;
  min-height: 530px;
  margin-top: 1.6rem;
  margin-bottom: -2.4rem;
  isolation: isolate;
}

.integration-hero-visual__orbit,
.integration-hero-visual::before {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(32, 215, 255, .2);
  border-radius: 50%;
  content: "";
}

.integration-hero-visual__orbit {
  inset: 9% 7% 8%;
  transform: rotate(-8deg);
}

.integration-hero-visual::before {
  inset: 15% 12% 2% 4%;
  border-color: rgba(5, 104, 255, .28);
  transform: rotate(8deg);
}

.integration-topology {
  position: absolute;
  inset: .5rem 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  overflow: hidden;
  padding: .75rem;
  border: 1px solid rgba(111, 181, 255, .5);
  border-radius: 8px;
  background:
    linear-gradient(154deg, transparent 0 72%, rgba(5, 104, 255, .13) 72.2%, transparent 72.5%),
    #03112f;
  box-shadow:
    0 28px 65px rgba(0, 0, 0, .42),
    0 0 36px rgba(5, 104, 255, .14);
}

.integration-topology__bar {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin: -.75rem -.75rem .15rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--color-text-muted-on-dark);
  font-size: .6rem;
}

.integration-topology__bar span,
.integration-topology__bar b {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.integration-topology__bar i,
.integration-topology__bar b::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-cyan-400);
  content: "";
}

.integration-topology__bar b {
  color: var(--color-cyan-400);
  font-weight: 600;
}

.integration-topology__bar b::before {
  box-shadow: 0 0 10px rgba(32, 215, 255, .9);
}

.integration-topology__links {
  display: none;
}

.integration-topology__node,
.integration-topology__hub {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  padding: .65rem;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 6px;
  background: rgba(8, 35, 75, .84);
}

.integration-topology__node > svg,
.integration-topology__hub > svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 5px;
  background: rgba(5, 104, 255, .18);
  fill: none;
  stroke: var(--color-cyan-400);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.integration-topology__node span,
.integration-topology__hub span {
  display: grid;
  min-width: 0;
  gap: .08rem;
  margin-left: .45rem;
}

.integration-topology small {
  color: var(--color-cyan-400);
  font-size: .46rem;
  font-weight: 750;
  text-transform: uppercase;
}

.integration-topology strong {
  color: var(--color-white);
  font-size: .59rem;
  line-height: 1.25;
}

.integration-topology__hub {
  grid-column: 1 / -1;
  border-color: rgba(32, 215, 255, .5);
  background: #06234d;
}

.integration-topology__hub > svg {
  background: rgba(32, 215, 255, .12);
}

.integration-topology__status {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: .55rem;
  justify-self: end;
  padding: .55rem .7rem;
  border: 1px solid rgba(32, 215, 255, .45);
  border-radius: 6px;
  background: #06234d;
  color: var(--color-cyan-400);
}

.integration-topology__status svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.integration-topology__status span {
  display: grid;
}

.integration-topology__status small {
  color: var(--color-text-muted-on-dark);
}

.integration-intro,
.integration-patterns,
.integration-delivery {
  background: var(--color-white);
}

.integration-intro {
  padding: 4rem 0;
}

.integration-intro__grid {
  display: grid;
  gap: 2.25rem;
}

.integration-intro__grid > div > p:last-child,
.integration-section-heading > p:last-child,
.integration-blueprint-heading > p:last-child,
.integration-delivery__heading > p:last-child {
  margin: 1.2rem 0 0;
  color: var(--color-text-muted);
}

.integration-contract {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue-500);
  border-radius: 7px;
  background: var(--color-surface);
  box-shadow: 0 18px 45px rgba(7, 31, 72, .08);
}

.integration-contract header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .7rem;
}

.integration-contract header span {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.integration-contract header i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-cyan-400);
  box-shadow: 0 0 8px rgba(32, 215, 255, .7);
}

.integration-contract header b {
  color: var(--color-blue-600);
  font-weight: 700;
}

.integration-contract dl {
  margin: 0;
}

.integration-contract dl div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: .75rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.integration-contract dl div:last-child {
  border-bottom: 0;
}

.integration-contract dt {
  color: var(--color-blue-600);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.integration-contract dd {
  margin: 0;
  color: var(--color-text);
  font-size: .84rem;
  font-weight: 650;
}

.integration-connections {
  padding: 4rem 0;
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
}

.integration-section-heading,
.integration-blueprint-heading,
.integration-delivery__heading {
  max-width: 54rem;
}

.integration-landscape {
  display: grid;
  gap: .75rem;
  margin-top: 2.5rem;
}

.integration-landscape article {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .8rem;
  padding: 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-white);
}

.integration-landscape article > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(5, 104, 255, .18);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-blue-600);
}

.integration-landscape svg,
.integration-blueprint svg,
.integration-reliability svg,
.integration-delivery svg,
.integration-patterns svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.integration-landscape small,
.integration-decision-log small {
  color: var(--color-blue-600);
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.integration-landscape h3 {
  margin: .18rem 0 0;
  color: var(--color-text);
  font-size: 1rem;
}

.integration-landscape p {
  margin: .45rem 0 0;
  color: var(--color-text-muted);
  font-size: .86rem;
  line-height: 1.55;
}

.integration-landscape__primary {
  border-top: 3px solid var(--color-blue-500) !important;
}

.integration-landscape__primary ul {
  display: grid;
  grid-column: 1 / -1;
  gap: .45rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
}

.integration-landscape__primary li {
  position: relative;
  padding-left: .9rem;
  color: var(--color-text-muted);
  font-size: .78rem;
}

.integration-landscape__primary li::before {
  position: absolute;
  top: .52em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-cyan-400);
  content: "";
}

.integration-blueprint-section {
  padding: 4rem 0;
  background:
    linear-gradient(166deg, transparent 0 61%, rgba(5, 104, 255, .12) 61.2%, transparent 61.5%),
    var(--hero-bg);
}

.integration-blueprint-section .solution-kicker {
  color: var(--color-cyan-400);
}

.integration-page main .integration-blueprint-section h2 {
  color: var(--color-white);
}

.integration-blueprint-heading > p:last-child {
  color: var(--color-text-muted-on-dark);
}

.integration-blueprint {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid rgba(111, 181, 255, .38);
  border-radius: 8px;
  background: rgba(3, 17, 47, .82);
}

.integration-blueprint__layers {
  display: grid;
  gap: .7rem;
  padding: 1rem;
}

.integration-blueprint__layer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.integration-blueprint__layer strong {
  grid-column: 1 / -1;
  color: var(--color-cyan-400);
  font-size: .66rem;
  text-transform: uppercase;
}

.integration-blueprint__layer span {
  padding: .65rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  background: rgba(8, 35, 75, .72);
  color: var(--color-text-on-dark);
  font-size: .74rem;
  font-weight: 650;
  text-align: center;
}

.integration-blueprint__bus {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(32, 215, 255, .38);
  border-radius: 6px;
  background: rgba(32, 215, 255, .2);
}

.integration-blueprint__bus div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .75rem;
  background: #06234d;
  color: var(--color-cyan-400);
}

.integration-blueprint__bus span {
  display: grid;
}

.integration-blueprint__bus small {
  color: var(--color-cyan-400);
  font-size: .5rem;
  font-weight: 750;
  text-transform: uppercase;
}

.integration-blueprint__bus strong {
  margin-top: .12rem;
  color: var(--color-white);
  font-size: .77rem;
}

.integration-blueprint__control {
  padding: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 5, 24, .55);
}

.integration-blueprint__control > span {
  color: var(--color-cyan-400);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.integration-blueprint__control ul {
  display: grid;
  gap: .3rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}

.integration-blueprint__control li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: var(--color-cyan-400);
}

.integration-blueprint__control li:last-child {
  border-bottom: 0;
}

.integration-blueprint__control li b {
  color: var(--color-white);
  font-size: .76rem;
}

.integration-patterns {
  padding: 4rem 0;
}

.integration-patterns__table {
  margin-top: 2.5rem;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue-500);
  border-radius: 7px;
  background: var(--color-white);
}

.integration-patterns table,
.integration-patterns tbody,
.integration-patterns tr,
.integration-patterns th,
.integration-patterns td {
  display: block;
}

.integration-patterns table {
  width: 100%;
  border-collapse: collapse;
}

.integration-patterns thead {
  display: none;
}

.integration-patterns tbody tr {
  padding: 1.1rem;
  border-bottom: 1px solid var(--color-border);
}

.integration-patterns tbody tr:last-child {
  border-bottom: 0;
}

.integration-patterns tbody th {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--color-text);
  text-align: left;
}

.integration-patterns tbody th span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(5, 104, 255, .18);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-blue-600);
}

.integration-patterns tbody th b {
  font-size: .94rem;
}

.integration-patterns td {
  position: relative;
  margin-top: .75rem;
  padding-left: 4.5rem;
  color: var(--color-text-muted);
  font-size: .84rem;
  line-height: 1.55;
}

.integration-patterns td::before {
  position: absolute;
  left: 0;
  color: var(--color-blue-600);
  content: attr(data-label);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.integration-reliability {
  padding: 4rem 0;
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
}

.integration-reliability__grid {
  display: grid;
  gap: 2.5rem;
}

.integration-reliability__grid > div:first-child > p:not(.solution-kicker) {
  margin: 1.2rem 0 0;
  color: var(--color-text-muted);
}

.integration-reliability__principles {
  display: grid;
  gap: .2rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.integration-reliability__principles li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .7rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-blue-600);
}

.integration-reliability__principles span {
  display: grid;
}

.integration-reliability__principles b {
  color: var(--color-text);
  font-size: .9rem;
}

.integration-reliability__principles small {
  margin-top: .2rem;
  color: var(--color-text-muted);
  font-size: .77rem;
  line-height: 1.45;
}

.integration-trace {
  overflow: hidden;
  align-self: center;
  border: 1px solid rgba(111, 181, 255, .45);
  border-radius: 8px;
  background: var(--hero-bg);
  box-shadow: 0 24px 60px rgba(7, 31, 72, .18);
}

.integration-trace header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--color-text-muted-on-dark);
  font-size: .65rem;
}

.integration-trace header span {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.integration-trace header i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-cyan-400);
  box-shadow: 0 0 9px rgba(32, 215, 255, .8);
}

.integration-trace header b {
  color: var(--color-cyan-400);
}

.integration-trace ol {
  margin: 0;
  padding: .65rem 1rem;
  list-style: none;
}

.integration-trace li {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.integration-trace li:last-child {
  border-bottom: 0;
}

.integration-trace li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(32, 215, 255, .3);
  border-radius: 50%;
  color: var(--color-cyan-400);
  font-size: .58rem;
  font-weight: 800;
}

.integration-trace li div {
  display: grid;
}

.integration-trace li small {
  color: var(--color-text-muted-on-dark);
  font-size: .62rem;
}

.integration-trace li strong {
  margin-top: .14rem;
  color: var(--color-white);
  font-size: .78rem;
}

.integration-trace li > b {
  color: var(--color-cyan-400);
  font-size: .58rem;
}

.integration-delivery {
  padding: 4rem 0 1rem;
}

.integration-decision-log {
  display: grid;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.integration-decision-log li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .9rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--color-border);
}

.integration-decision-log li > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(5, 104, 255, .2);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-blue-600);
}

.integration-decision-log h3 {
  margin: .18rem 0 0;
  color: var(--color-text);
  font-size: .96rem;
}

.integration-decision-log p {
  margin: .4rem 0 0;
  color: var(--color-text-muted);
  font-size: .84rem;
  line-height: 1.5;
}

.integration-toolkit {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.5rem;
}

.integration-toolkit span {
  padding: .45rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 700;
}

.integration-final-cta {
  padding-top: 3rem;
}

@media (min-width: 40rem) {
  .integration-topology {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .integration-topology__hub {
    grid-column: 1 / -1;
  }

  .integration-topology__node--legacy {
    grid-column: 2 / 3;
  }

  .integration-topology__status {
    grid-column: 1 / -1;
  }

  .integration-landscape {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-landscape__primary {
    grid-column: 1 / -1;
  }

  .integration-landscape__primary ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .integration-blueprint__layer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .integration-blueprint__bus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-decision-log {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--color-border);
  }

  .integration-decision-log li {
    padding: 1.25rem;
    border-right: 1px solid var(--color-border);
  }
}

@media (min-width: 48rem) {
  .integration-patterns table {
    display: table;
  }

  .integration-patterns thead {
    display: table-header-group;
  }

  .integration-patterns tbody {
    display: table-row-group;
  }

  .integration-patterns tr {
    display: table-row;
  }

  .integration-patterns th,
  .integration-patterns td {
    display: table-cell;
  }

  .integration-patterns thead th {
    padding: .8rem 1rem;
    background: var(--color-surface);
    color: var(--color-blue-600);
    font-size: .64rem;
    text-align: left;
    text-transform: uppercase;
  }

  .integration-patterns tbody tr {
    padding: 0;
  }

  .integration-patterns tbody th,
  .integration-patterns tbody td {
    width: 30%;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }

  .integration-patterns tbody th {
    width: 25%;
  }

  .integration-patterns tbody tr:last-child th,
  .integration-patterns tbody tr:last-child td {
    border-bottom: 0;
  }

  .integration-patterns td {
    position: static;
    margin: 0;
    padding-left: 1rem;
  }

  .integration-patterns td::before {
    display: none;
  }

  .integration-blueprint__bus {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .integration-page main :where(h2:not(#integration-cta-title)) {
    font-size: 3rem;
  }

  .integration-hero {
    min-height: 620px;
  }

  .integration-hero .solution-hero__grid {
    grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
    column-gap: 3rem;
  }

  .integration-hero .solution-hero__content {
    max-width: none;
  }

  .integration-hero h1 {
    font-size: clamp(2.8rem, 4vw, 3.7rem);
  }

  .integration-hero .solution-hero__actions {
    flex-wrap: nowrap;
  }

  .integration-hero-visual {
    width: 100%;
    max-width: 590px;
    min-height: 0;
    height: 400px;
    margin: 0 0 -1.5rem;
    justify-self: end;
  }

  .integration-topology {
    inset: 1rem 0 auto;
    display: block;
    height: 350px;
    padding: 0;
  }

  .integration-topology__bar {
    min-height: 46px;
    margin: 0;
    padding: .65rem 1rem;
    font-size: .68rem;
  }

  .integration-topology__links {
    position: absolute;
    inset: 46px 0 0;
    display: block;
    width: 100%;
    height: 304px;
    fill: none;
    stroke: rgba(32, 215, 255, .48);
    stroke-width: 1.2;
  }

  .integration-topology__links circle {
    fill: var(--color-cyan-400);
    stroke: none;
  }

  .integration-topology__node,
  .integration-topology__hub {
    position: absolute;
    width: 142px;
    min-height: 62px;
    padding: .6rem;
  }

  .integration-topology__node--web {
    top: 62px;
    left: 18px;
  }

  .integration-topology__node--mobile {
    bottom: 42px;
    left: 18px;
  }

  .integration-topology__node--cloud {
    top: 62px;
    right: 18px;
  }

  .integration-topology__node--data {
    right: 18px;
    bottom: 78px;
  }

  .integration-topology__node--legacy {
    bottom: 10px;
    left: calc(50% - 71px);
  }

  .integration-topology__hub {
    top: 135px;
    left: calc(50% - 91px);
    width: 182px;
    min-height: 72px;
  }

  .integration-topology__status {
    position: absolute;
    right: 13px;
    bottom: 10px;
  }

  .integration-intro,
  .integration-connections,
  .integration-blueprint-section,
  .integration-patterns,
  .integration-reliability,
  .integration-delivery {
    padding-block: 5rem;
  }

  .integration-intro {
    margin-top: -2rem;
  }

  .integration-intro__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    align-items: center;
    gap: 5rem;
  }

  .integration-section-heading,
  .integration-blueprint-heading,
  .integration-delivery__heading {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr);
    gap: 4rem;
  }

  .integration-section-heading .solution-kicker,
  .integration-blueprint-heading .solution-kicker,
  .integration-delivery__heading .solution-kicker {
    grid-column: 1 / -1;
    margin-bottom: -.2rem;
  }

  .integration-section-heading > p:last-child,
  .integration-blueprint-heading > p:last-child,
  .integration-delivery__heading > p:last-child {
    margin-top: 0;
  }

  .integration-landscape {
    grid-template-columns: 1.15fr .85fr .85fr;
    grid-template-rows: repeat(2, minmax(170px, auto));
  }

  .integration-landscape__primary {
    grid-row: 1 / 3;
    grid-column: 1;
    align-content: center;
    padding: 1.5rem;
  }

  .integration-landscape__primary ul {
    grid-template-columns: 1fr;
    margin-top: .7rem;
  }

  .integration-blueprint {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0;
  }

  .integration-blueprint__layers {
    padding: 1.35rem;
  }

  .integration-blueprint__control {
    padding: 1.35rem;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, .12);
  }

  .integration-reliability__grid {
    grid-template-columns: minmax(0, .95fr) minmax(470px, 1.05fr);
    align-items: center;
    gap: 5rem;
  }

  .integration-decision-log {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .integration-decision-log li {
    display: block;
    min-width: 0;
    padding: 1.35rem;
  }

  .integration-decision-log li > span {
    margin-bottom: 1rem;
  }

  .integration-toolkit {
    justify-content: center;
    margin-top: 1.75rem;
  }

  .integration-delivery {
    padding-bottom: 2rem;
  }
}

@media (min-width: 80rem) {
  .integration-hero-visual {
    max-width: 620px;
  }

  .integration-topology__node {
    width: 148px;
  }

  .integration-topology__hub {
    left: calc(50% - 96px);
    width: 192px;
  }
}

@media (max-width: 47.99rem) {
  .integration-hero .integration-hero-visual {
    margin-bottom: calc(-2.4rem - 9.9rem);
  }
}

@media (hover: hover) and (pointer: fine) {
  .integration-landscape article {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  .integration-landscape article:hover {
    border-color: rgba(5, 104, 255, .34);
    box-shadow: 0 16px 36px rgba(7, 31, 72, .08);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .integration-landscape article {
    transition: none;
  }
}