.integration-guides { background: #fff; color: #292929; }

.integration-guides__hero {
  min-height: 360px;
  padding: 112px 24px 80px;
  text-align: center;
  background: radial-gradient(ellipse at 78% 0%, rgba(255, 224, 213, .72), rgba(255,255,255,0) 56%);
}

.integration-guides__hero h1 {
  margin: 0;
  font-size: clamp(2.35rem, 4vw, 3.55rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.integration-guides__hero p { margin: 34px 0 0; font-size: 1rem; }
.integration-guides__list { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }

.integration-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 76px;
  min-height: 610px;
  padding: 72px 0;
}

.integration-guide__copy { max-width: 520px; }
.integration-guide h2 { max-width: 12ch; margin: 0 0 42px; font-size: clamp(2.45rem, 4vw, 3.4rem); line-height: 1.22; letter-spacing: -.03em; }
.integration-guide p { margin: 0; font-size: 1rem; line-height: 1.55; }
.integration-guide__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }

.integration-guide__actions a {
  display: inline-flex;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.integration-guide__docs { border: 1px solid #f36a40; color: #f36a40; background: #fff; }
.integration-guide__demo { border: 1px solid #f36a40; color: #fff; background: #f36a40; }
.integration-guide__actions a:hover { transform: none; opacity: .9; }
.integration-guide__video { position: relative; width: 100%; padding-top: 75%; overflow: hidden; }
.integration-guide__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 991px) {
  .integration-guides__hero { min-height: 300px; padding-top: 88px; }
  .integration-guide { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 80px 0; }
  .integration-guide__copy { max-width: 640px; }
  .integration-guide h2 { margin-bottom: 28px; }
}

@media (max-width: 600px) {
  .integration-guides__hero { min-height: 250px; padding: 70px 20px 56px; }
  .integration-guides__hero p { margin-top: 22px; }
  .integration-guides__list { width: min(100% - 36px, 1140px); }
  .integration-guide { padding: 58px 0; }
  .integration-guide h2 { font-size: 2.15rem; }
  .integration-guide__actions { margin-top: 30px; }
  .integration-guide__actions a { padding-inline: 21px; }
}