/* integrations overview (/integrations) — the channel directory.
 * Bespoke layout consistent with the channel deep-dive template
 * (integration.css). Tokens from the marketing design system. */

.ms-io .container{max-width:1280px;width:100%;margin:0 auto;padding:0 24px;box-sizing:border-box}

/* ─────────────────────────────── HERO ─────────────────────────────────── */
.io-hero{
  position:relative;overflow:hidden;
  padding:84px 0 72px;
  background:var(--brand-canvas);border-bottom:1px solid var(--line);
}
.io-hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 35%,#000 30%,transparent 90%);
}
.io-hero-inner{position:relative;max-width:760px;margin:0 auto;text-align:center}
.io-hero h1{
  font:800 64px/1.04 var(--font-heading);letter-spacing:-.04em;color:var(--text);
  margin-top:18px;text-wrap:balance;
}
.io-hero h1 .signal{
  background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.io-hero p{
  margin-top:20px;font:400 18px/1.6 var(--font-body);color:var(--text-2);
  max-width:560px;margin-left:auto;margin-right:auto;
}
.io-hero-meta{
  margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.io-hero-meta span{
  font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;
}

/* ─────────────────────────────── SECTION ──────────────────────────────── */
.io-sec{padding:80px 0;border-bottom:1px solid var(--line)}
.io-sec.alt{background:var(--brand-surface)}
.io-sec-head{max-width:680px;margin:0 auto 44px;text-align:center}
.io-sec-head h2{font:700 38px/1.1 var(--font-heading);letter-spacing:-.03em;color:var(--text)}
.io-sec-head p{margin-top:12px;font:400 16px/1.6 var(--font-body);color:var(--text-2)}

/* ─────────────────────────────── CHANNEL GRID ─────────────────────────── */
.io-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

.io-card{
  display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px;text-decoration:none;color:inherit;
  box-shadow:var(--sh-0);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out);
}
a.io-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.io-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.io-glyph{
  display:inline-grid;grid-auto-rows:1fr;gap:2px;
  border-radius:7px;overflow:hidden;width:34px;height:34px;flex:0 0 34px;
}
.io-glyph.cols-1{grid-template-columns:1fr}
.io-glyph.cols-2{grid-template-columns:1fr 1fr}
.io-glyph i{display:block}
.io-status{
  font:600 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  padding:5px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
}
.io-status.live{background:rgba(22,163,74,.12);color:var(--positive)}
.io-status.live .dot{width:6px;height:6px;border-radius:50%;background:var(--positive);box-shadow:0 0 6px var(--positive)}
.io-status.roadmap{background:var(--bg-2);color:var(--text-3)}
.io-card h3{font:700 18px/1.2 var(--font-heading);letter-spacing:-.015em;color:var(--text)}
.io-card p{font:400 13.5px/1.5 var(--font-body);color:var(--text-2);flex:1}
.io-card-foot{
  display:flex;align-items:center;gap:6px;
  font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);padding-top:12px;border-top:1px solid var(--line);
}
.io-card.is-roadmap{background:var(--bg-1);box-shadow:none}
.io-card.is-roadmap h3{color:var(--text-2)}
.io-card.is-roadmap .io-card-foot{color:var(--text-3)}

/* ─────────────────────────────── CTA BAND ─────────────────────────────── */
.io-cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:88px 0;text-align:center}
.io-cta-mesh{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 700px 360px at 30% 20%,rgba(79,70,229,.34),transparent 60%),
    radial-gradient(ellipse 600px 340px at 80% 90%,rgba(124,58,237,.22),transparent 60%);
}
.io-cta-inner{position:relative;max-width:620px;margin:0 auto;padding:0 24px}
.io-cta h2{font:800 44px/1.06 var(--font-heading);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.io-cta p{margin-top:16px;font:400 17px/1.6 var(--font-body);color:rgba(255,255,255,.7)}
.io-cta-ctas{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.io-cta-ctas .btn-outline{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)}
.io-cta-ctas .btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}

/* ─────────────────────────────── RESPONSIVE ───────────────────────────── */
@media (max-width:1000px){
  .io-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .io-hero h1{font-size:clamp(34px,7vw,64px)}
  .io-sec-head h2{font-size:clamp(28px,5vw,38px)}
  .io-cta h2{font-size:clamp(30px,6vw,44px)}
}
@media (max-width:560px){
  .io-grid{grid-template-columns:minmax(0,1fr)}
  .io-hero{padding:56px 0 48px}
  .io-sec{padding:56px 0}
}