.integration-quickstart {
  margin: 0 0 14px;
  padding: 22px;
  border: 1px solid #3b694d;
  border-radius: 17px;
  background: radial-gradient(500px 240px at 100% 0, #baff6812, transparent 72%), linear-gradient(145deg, #0d2117, #08130d);
}
.integration-quickstart > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.integration-quickstart > header p {
  margin: 0;
  color: #80e0a4;
  font: 800 9px var(--mono);
  letter-spacing: .8px;
}
.integration-quickstart > header h2 { margin: 7px 0 0; font-size: 23px; }
.integration-quickstart > header span {
  display: block;
  max-width: 790px;
  margin-top: 7px;
  color: #809b88;
  font-size: 13px;
  line-height: 1.55;
}
.integration-quickstart > header > em {
  flex: none;
  padding: 7px 9px;
  border: 1px solid #548161;
  border-radius: 8px;
  color: #a6c9ae;
  font: 800 8px var(--mono);
  font-style: normal;
}
.integration-quickstart > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 17px;
}
.integration-quickstart article {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid #315b42;
  border-radius: 12px;
  background: #07150e;
}
.integration-quickstart article > i,
.integration-quickstart > footer > i,
.integration-plain-note > i,
.integration-howto > ol i {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #baff6810;
  color: #d5ff92;
  font-style: normal;
  font-weight: 900;
}
.integration-quickstart article > i { width: 39px; height: 39px; }
.integration-quickstart article > span,
.integration-quickstart > footer > span,
.integration-plain-note > span { display: grid; align-content: start; gap: 4px; }
.integration-quickstart article b { font-size: 13px; line-height: 1.35; }
.integration-quickstart article small,
.integration-quickstart > footer small,
.integration-plain-note small { color: #789080; font-size: 11px; line-height: 1.55; }
.integration-quickstart article > strong {
  grid-column: 2;
  color: #8bd5a2;
  font: 800 8px var(--mono);
}
.integration-quickstart article > button {
  grid-column: 2;
  justify-self: start;
  min-height: 33px;
  padding: 0 11px;
  border: 1px solid #548161;
  border-radius: 8px;
  background: #baff680d;
  color: #cfff91;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}
.integration-quickstart > footer,
.integration-plain-note {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 11px 13px;
  border: 1px solid #3a6249;
  border-radius: 11px;
  background: #0b1d14;
}
.integration-quickstart > footer > i,
.integration-plain-note > i { width: 35px; height: 35px; }
.integration-plain-note { margin-top: 16px; }
.integration-howto {
  margin-top: 15px;
  padding: 16px;
  border: 1px solid #315c43;
  border-radius: 13px;
  background: #07150e;
}
.integration-howto > header small,
.integration-event-guide > header small,
.integration-code-example > header small {
  color: #78dda1;
  font: 800 8px var(--mono);
  letter-spacing: .7px;
}
.integration-howto > header h3 { margin: 5px 0 0; font-size: 18px; }
.integration-howto > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.integration-howto > ol li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  padding: 11px;
  border: 1px solid #2d553d;
  border-radius: 10px;
  background: #0b1d14;
}
.integration-howto > ol i { width: 29px; height: 29px; font: 800 9px var(--mono); }
.integration-howto > ol span { display: grid; gap: 4px; }
.integration-howto > ol b { font-size: 12px; line-height: 1.35; }
.integration-howto > ol small { color: #789080; font-size: 10.5px; line-height: 1.55; }
.integration-howto > footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #284b36;
  color: #829889;
  font-size: 11px;
  line-height: 1.5;
}
.integration-howto > footer b { color: #d5e9da; }
.integration-howto > footer span { display: block; margin-top: 5px; }
.integration-howto .domain-flow { grid-template-columns: repeat(4, 1fr); margin-top: 13px; }
.integration-howto .domain-flow article { align-items: start; }
.integration-code-example,
.integration-event-guide {
  margin-top: 11px;
  padding: 14px;
  border: 1px solid #315c43;
  border-radius: 12px;
  background: #07150e;
}
.integration-code-example > header,
.integration-event-guide > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.integration-code-example > header > span { display: grid; gap: 4px; }
.integration-code-example > header > em { color: #819587; font: 800 8px var(--mono); font-style: normal; }
.integration-code-example pre {
  margin: 11px 0 0;
  padding: 13px;
  overflow: auto;
  border: 1px solid #2d573f;
  border-radius: 9px;
  background: #050e08;
  color: #bceccd;
  font: 11px/1.65 var(--mono);
  white-space: pre;
}
.integration-code-example > footer { margin-top: 9px; color: #819587; font-size: 10.5px; line-height: 1.55; }
.integration-code-example > footer b,
.integration-code-example > footer code { color: #d4e8d9; }
.integration-event-guide > header { display: grid; gap: 4px; justify-content: start; }
.integration-event-guide > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 7px;
  margin-top: 11px;
}
.integration-event-guide > div > span {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #2d553d;
  border-radius: 9px;
  background: #0b1d14;
}
.integration-event-guide code { color: #bceccd; font: 10px var(--mono); }
.integration-event-guide small { color: #789080; font-size: 10.5px; }

.integration-handoff {
  margin-top: 11px;
  padding: 15px;
  border: 1px solid #315c43;
  border-radius: 12px;
  background: #07150e;
}
.integration-handoff > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.integration-handoff > header > span { display: grid; gap: 4px; }
.integration-handoff > header small { color: #78dda1; font: 800 8px var(--mono); }
.integration-handoff > header b { font-size: 15px; }
.integration-handoff > header em {
  padding: 6px 8px;
  border: 1px solid #4b7358;
  border-radius: 7px;
  color: #96b8a1;
  font: 800 8px var(--mono);
  font-style: normal;
}
.integration-handoff > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.integration-handoff > div > span {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #2d553d;
  border-radius: 9px;
  background: #0b1d14;
}
.integration-handoff > div small { color: #789080; font: 800 8px var(--mono); }
.integration-handoff code {
  overflow-wrap: anywhere;
  color: #bceccd;
  font: 10px/1.5 var(--mono);
}
.integration-handoff > footer {
  margin-top: 10px;
  color: #829889;
  font-size: 10.5px;
  line-height: 1.55;
}
.integration-step-caption {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 14px 0 -4px;
  padding: 11px 13px;
  border: 1px solid #315c43;
  border-radius: 11px;
  background: #0b1d14;
}
.integration-step-caption > i,
.webhook-site-help > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #baff6810;
  color: #d5ff92;
  font-style: normal;
  font-weight: 900;
}
.integration-step-caption > span,
.webhook-site-help > span { display: grid; gap: 3px; }
.integration-step-caption b,
.webhook-site-help b { font-size: 12px; }
.integration-step-caption small,
.webhook-site-help small { color: #789080; font-size: 10.5px; line-height: 1.5; }
.webhook-site-help {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 12px 13px;
  border: 1px solid #d7af4c55;
  border-radius: 11px;
  background: #2a220d;
}
.webhook-site-help > i { background: #ffd15d18; color: #ffd773; }
.webhook-site-help code { color: #eadba7; font: 10px var(--mono); overflow-wrap: anywhere; }

body.white-label-growth .integration-quickstart {
  border-color: var(--tenant-line) !important;
  background: radial-gradient(500px 240px at 100% 0, var(--tenant-accent-soft), transparent 72%), linear-gradient(145deg, #171a2c, #0d0f1b) !important;
}
body.white-label-growth :is(.integration-quickstart article,.integration-quickstart > footer,.integration-plain-note,.integration-howto,.integration-howto > ol li,.integration-code-example,.integration-event-guide,.integration-event-guide > div > span) {
  border-color: var(--tenant-line) !important;
  background: #101222 !important;
}
body.white-label-growth :is(.integration-handoff,.integration-handoff > div > span,.integration-step-caption) {
  border-color: var(--tenant-line) !important;
  background: #101222 !important;
}
body.white-label-growth :is(.integration-quickstart article > i,.integration-quickstart > footer > i,.integration-plain-note > i,.integration-howto > ol i) {
  border: 1px solid var(--tenant-line-strong) !important;
  background: var(--tenant-accent-soft) !important;
  color: var(--tenant-accent-2) !important;
}
body.white-label-growth :is(.integration-step-caption > i,.webhook-site-help > i) {
  border: 1px solid var(--tenant-line-strong) !important;
  background: var(--tenant-accent-soft) !important;
  color: var(--tenant-accent-2) !important;
}
body.white-label-growth .integration-quickstart article > button {
  border-color: var(--tenant-line-strong) !important;
  background: var(--tenant-accent-soft) !important;
  color: var(--tenant-accent-2) !important;
}
body.white-label-growth :is(.integration-quickstart > header p,.integration-howto > header small,.integration-event-guide > header small,.integration-code-example > header small,.integration-quickstart article > strong) { color: var(--tenant-accent-2) !important; }
body.white-label-growth :is(.integration-quickstart > header span,.integration-quickstart article small,.integration-quickstart > footer small,.integration-plain-note small,.integration-howto > ol small,.integration-howto > footer,.integration-code-example > header > em,.integration-code-example > footer,.integration-event-guide small) { color: var(--tenant-muted) !important; }
body.white-label-growth .integration-quickstart > header > em { border-color: var(--tenant-line-strong) !important; background: var(--tenant-accent-soft) !important; color: var(--tenant-accent-2) !important; }
body.white-label-growth .integration-howto > footer { border-top-color: var(--tenant-line) !important; }
body.white-label-growth .integration-code-example pre { border-color: var(--tenant-line) !important; background: #080914 !important; color: #cbc6ff !important; }
body.white-label-growth :is(.integration-code-example > footer b,.integration-code-example > footer code,.integration-event-guide code) { color: #cbc6ff !important; }
body.white-label-growth :is(.integration-handoff > header small,.integration-handoff code) { color: var(--tenant-accent-2) !important; }
body.white-label-growth :is(.integration-handoff > header em,.integration-handoff > div small,.integration-handoff > footer,.integration-step-caption small,.webhook-site-help small) { color: var(--tenant-muted) !important; }
body.white-label-growth .integration-handoff > header em { border-color: var(--tenant-line-strong) !important; }
body.white-label-growth .webhook-site-help { border-color: rgba(230, 188, 84, .34) !important; background: #211c13 !important; }
body.white-label-growth .webhook-site-help code { color: #eadba7 !important; }

@media (max-width: 980px) {
  .integration-quickstart > div,
  .integration-howto .domain-flow,
  .integration-howto > ol { grid-template-columns: 1fr 1fr; }
  .integration-handoff > div { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .integration-quickstart > header,
  .integration-code-example > header,
  .integration-handoff > header { align-items: flex-start; flex-direction: column; }
  .integration-quickstart > div,
  .integration-howto .domain-flow,
  .integration-howto > ol { grid-template-columns: 1fr; }
  .integration-quickstart { padding: 18px; }
}