/* Integrations page: editorial frame, implementation-first product surfaces. */
.integrations-page { font-family: var(--sans); }
.integrations-page .page { padding-bottom: 72px; }
.integrations-page .mh-nav { margin-bottom: 0; border-bottom: 1px solid var(--ink); }

.integrations-eyebrow,.integrations-kicker,.integrations-code-bar,.integration-boundary-flow small,
.integration-method-title>span,.integration-method-artifact small,.integration-chip-groups section>span,
.integration-mode-cards article>span {
  font: 500 10px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-dim);
}

.integrations-hero {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr);
  gap: clamp(58px,8vw,130px);
  align-items: center;
  padding: 76px 0 96px;
  border-bottom: 1px solid var(--ink);
}
.integrations-hero h1 {
  max-width: 10ch;
  margin: 20px 0 34px;
  font: 300 clamp(58px,6.7vw,104px)/.95 var(--serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.integrations-hero h1 i,.integrations-section-heading h2 i,.integration-rollout h2 i,
.integration-closing h2 i { color: var(--accent); font-style: italic; }
.integrations-hero-copy>p {
  max-width: 660px;
  margin: 0;
  font: 400 clamp(19px,1.8vw,25px)/1.48 var(--sans);
  letter-spacing: -.015em;
  color: var(--ink-2);
}
.integrations-actions { display: flex; flex-wrap: wrap; gap: 22px 30px; margin-top: 36px; }

.integrations-code-window {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(19,17,13,.15);
  background: radial-gradient(circle at 88% 10%,rgba(69,101,166,.2),transparent 42%),radial-gradient(circle at 4% 100%,rgba(174,128,34,.16),transparent 42%),rgba(245,246,248,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 32px 82px rgba(38,48,70,.14),12px 12px 0 color-mix(in srgb,var(--accent) 9%,transparent);
  backdrop-filter: blur(20px) saturate(124%);
  -webkit-backdrop-filter: blur(20px) saturate(124%);
}
.integrations-code-window::before,.integration-method-card::before,.integration-rollout::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: linear-gradient(rgba(19,17,13,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(19,17,13,.05) 1px,transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(135deg,#000,transparent 76%);
}
.integrations-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(19,17,13,.12);
}
.integrations-code-bar button {
  padding: 6px 10px;
  border: 1px solid rgba(19,17,13,.26);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
  cursor: pointer;
}
.integrations-code-bar button:hover,.integrations-code-bar button:focus-visible { border-color: var(--ink); }
.integrations-code-window pre { margin: 0; padding: 34px 30px 38px; overflow-x: auto; }
.integrations-code-window code { font: 500 13px/1.78 var(--mono); color: #24262b; }
.integrations-code-window .code-muted { color: #75540f; }
.integrations-code-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-top: 1px solid rgba(19,17,13,.12);
  font: 500 10px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
.integrations-code-status i { color: var(--accent); font-style: normal; }
.integrations-code-status strong { color: #2f7650; font-weight: 600; }

.integration-boundary,.integration-methods,.integration-compatibility,.integration-rollout,.integration-closing {
  padding: 94px 0;
  border-bottom: 1px solid var(--ink);
}
.integrations-page .integration-compatibility {
  max-width: none;
  margin: 0;
  font: inherit;
  color: inherit;
}
.integrations-section-heading {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  column-gap: 64px;
  row-gap: 22px;
  align-items: start;
  margin-bottom: 52px;
}
.integrations-section-heading>.integrations-kicker { grid-column: 1; grid-row: 1 / span 2; }
.integrations-section-heading>h2 { grid-column: 2; grid-row: 1; max-width: 18ch; }
.integrations-section-heading>p { grid-column: 2; grid-row: 2; max-width: 760px; }
.integrations-section-heading h2,.integration-rollout h2,.integration-closing h2 {
  margin: 0;
  font: 300 clamp(42px,5vw,70px)/1.02 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.integrations-section-heading>p { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }

.integration-boundary-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.integration-boundary-flow article {
  position: relative;
  min-height: 222px;
  padding: 24px;
  border: 1px solid rgba(19,17,13,.12);
  background: radial-gradient(circle at 88% 12%,rgba(72,106,170,.1),transparent 44%),rgba(250,249,246,.7);
  box-shadow: 0 16px 40px rgba(42,48,64,.055);
}
.integration-boundary-flow article:not(:last-child)::after {
  content: '→'; position: absolute; z-index: 2; right: -12px; top: 50%;
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--rule); border-radius: 50%; background: var(--paper);
  font: 500 11px/1 var(--mono); color: var(--accent); transform: translateY(-50%);
}
.integration-boundary-flow span { display: block; margin: 45px 0 12px; font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; }
.integration-boundary-flow p { margin: 0; font: 400 13px/1.52 var(--sans); color: var(--ink-2); }
.integration-boundary-flow .integration-boundary-salus {
  background: radial-gradient(circle at 88% 12%,rgba(179,130,31,.2),transparent 44%),rgba(249,247,239,.82);
  border-color: color-mix(in srgb,var(--accent) 36%,transparent);
}
.integration-boundary-salus span { color: var(--accent); font: italic 400 29px/1 var(--serif); }

.integration-method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.integration-method-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 530px;
  padding: 30px;
  border: 1px solid rgba(19,17,13,.13);
  background: radial-gradient(circle at 88% 10%,rgba(74,107,170,.12),transparent 42%),rgba(249,248,245,.78);
  box-shadow: 0 20px 50px rgba(39,46,63,.07);
}
.integration-method-card--primary { background: radial-gradient(circle at 88% 10%,rgba(177,129,31,.2),transparent 42%),radial-gradient(circle at 5% 94%,rgba(71,104,169,.12),transparent 43%),rgba(249,247,240,.84); }
.integration-method-title>span { display: block; margin-bottom: 30px; }
.integration-method-title h3 { margin: 0; font: 400 clamp(27px,2.5vw,38px)/1.08 var(--serif); letter-spacing: -.027em; text-wrap: balance; }
.integration-method-card>p { margin: 28px 0 34px; font: 400 15px/1.58 var(--sans); color: var(--ink-2); }
.integration-method-card>.cta-inline { align-self: flex-start; margin-top: 28px; }
.integration-method-artifact {
  display: flex;
  flex-direction: column;
  min-height: 158px;
  margin-top: auto;
  padding: 20px;
  border: 1px solid rgba(19,17,13,.12);
  background: rgba(255,255,255,.45);
}
.integration-method-artifact small { font: 500 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }
.integration-method-artifact code { margin: 19px 0 auto; font: 500 12px/1.5 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.integration-method-artifact strong { padding-top: 14px; border-top: 1px solid var(--rule); font: 600 12px/1.45 var(--sans); color: #2f7650; }

.integrations-section-heading--compact { margin-bottom: 44px; }
.integration-compatibility-layout { display: grid; grid-template-columns: 1fr; gap: 48px; }
.integration-compatibility-copy { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.integration-compatibility-copy>p { max-width: 760px; margin: 0; font: 400 19px/1.55 var(--sans); color: var(--ink-2); }
.integration-compatibility-copy>.cta-inline { flex: 0 0 auto; }
.integration-chip-groups { border-top: 1px solid var(--ink); }
.integration-chip-groups section { display: grid; grid-template-columns: 160px 1fr; gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.integration-chip-groups section>div { display: flex; flex-wrap: wrap; gap: 8px; }
.integration-chip-groups b {
  padding: 9px 12px;
  border: 1px solid rgba(19,17,13,.13);
  background: rgba(255,255,255,.38);
  font: 500 12px/1.3 var(--sans);
  color: var(--ink);
}

.integration-rollout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(470px,1.2fr);
  gap: clamp(64px,9vw,140px);
  margin-left: -40px;
  margin-right: -40px;
  padding-left: 40px;
  padding-right: 40px;
  background: radial-gradient(circle at 86% 12%,rgba(72,106,174,.22),transparent 36%),radial-gradient(circle at 6% 92%,rgba(183,135,39,.18),transparent 39%),linear-gradient(135deg,rgba(244,241,232,.9),rgba(235,239,247,.9));
}
.integration-rollout-copy>.integrations-kicker { display: block; margin-bottom: 26px; }
.integration-rollout h2 { max-width: 10ch; }
.integration-rollout-copy>p { max-width: 560px; margin: 31px 0 0; font: 400 18px/1.57 var(--sans); color: var(--ink-2); }
.integration-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.integration-mode-cards article {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 25px;
  border: 1px solid rgba(19,17,13,.14);
  background: rgba(255,255,255,.42);
  box-shadow: 0 18px 44px rgba(39,46,63,.06);
}
.integration-mode-cards strong { margin: 55px 0 16px; font: 500 22px/1.25 var(--sans); letter-spacing: -.02em; }
.integration-mode-cards p { margin: 0 0 28px; font: 400 14px/1.55 var(--sans); color: var(--ink-2); }
.integration-mode-cards code { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 11px/1.45 var(--mono); color: var(--accent); }
.integration-mode-cards .integration-mode-card--active { border-color: color-mix(in srgb,var(--accent) 34%,transparent); background: rgba(255,252,244,.62); }

.integration-closing { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 64px; align-items: end; }
.integration-closing h2 { max-width: 14ch; margin: 20px 0 28px; }
.integration-closing p { max-width: 700px; margin: 0; font: 400 18px/1.55 var(--sans); color: var(--ink-2); }
.integration-closing-email { padding-bottom: 3px; border-bottom: 1px solid var(--rule); font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-dim); }
.integration-closing-email:hover { color: var(--accent); border-color: var(--accent); }

[data-palette="oxblood"] .integrations-code-window,[data-palette="oxblood"] .integration-method-card,
[data-palette="oxblood"] .integration-rollout { background: color-mix(in srgb,var(--paper-2) 92%,#203557 8%); }
[data-palette="oxblood"] .integration-boundary-flow article,[data-palette="oxblood"] .integration-method-artifact,
[data-palette="oxblood"] .integration-chip-groups b,[data-palette="oxblood"] .integration-mode-cards article {
  background: color-mix(in srgb,var(--paper-2) 96%,transparent);
}

@media(max-width:1120px) {
  .integrations-hero { grid-template-columns: 1fr; }
  .integrations-hero h1 { max-width: 12ch; }
  .integrations-code-window { max-width: 780px; }
  .integration-boundary-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .integration-boundary-flow article:not(:last-child)::after { display: none; }
  .integration-method-grid { grid-template-columns: 1fr 1fr; }
  .integration-method-card--primary { grid-column: 1 / -1; min-height: 430px; }
  .integration-rollout { grid-template-columns: 1fr; gap: 52px; }
}
@media(max-width:820px) {
  .integrations-page .mh-left { display: none; }
  .integrations-section-heading,.integration-closing { grid-template-columns: 1fr; gap: 20px; }
  .integrations-section-heading>.integrations-kicker,.integrations-section-heading>h2,.integrations-section-heading>p { grid-column: 1; grid-row: auto; }
  .integration-compatibility-copy { align-items: flex-start; flex-direction: column; gap: 28px; }
  .integration-method-grid { grid-template-columns: 1fr; }
  .integration-method-card--primary { grid-column: auto; }
  .integration-method-card { min-height: 470px; }
  .integration-chip-groups section { grid-template-columns: 1fr; gap: 16px; }
  .integration-rollout { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .integration-closing-email { justify-self: start; }
}
@media(max-width:560px) {
  .integrations-page .page { padding-bottom: 44px; }
  .integrations-hero { padding: 48px 0 68px; }
  .integrations-hero h1 { font-size: clamp(54px,16vw,78px); }
  .integrations-code-window pre { padding: 27px 20px 30px; }
  .integrations-code-window code { font-size: 11px; }
  .integrations-code-status { align-items: flex-start; flex-direction: column; }
  .integration-boundary,.integration-methods,.integration-compatibility,.integration-rollout,.integration-closing { padding-top: 68px; padding-bottom: 68px; }
  .integration-boundary-flow { grid-template-columns: 1fr; }
  .integration-boundary-flow article { min-height: 0; }
  .integration-boundary-flow span { margin-top: 30px; }
  .integration-method-card { min-height: 0; padding: 24px; }
  .integration-method-artifact { min-height: 145px; }
  .integration-mode-cards { grid-template-columns: 1fr; }
  .integration-mode-cards article { min-height: 285px; }
}
@media(prefers-reduced-motion:reduce) { .integrations-code-bar button { transition: none; } }