/* ═══════════════════════════════════════════════════════════════════════
   Integration landing — SHARED template for every /integrations/<tool>/ page.
   SEO utility pages: one consistent, DS-compliant shell, real per-tool content
   (hero + benefits + quickstart code + use cases + closer). Accent PURPLE.
   Hairline-on-transparent, no card fills. Linked as ../_landing.css.
   ═══════════════════════════════════════════════════════════════════════ */
@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

.il-main { position: relative; z-index: 1; overflow-x: clip; }
:root { --il-accent: #7C4FE8; }        /* AI (mcp + framework) */
body.il-teal { --il-accent: #7ADAE6; }  /* automation + dev */
.blur-t { opacity: 0; filter: blur(12px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), filter 720ms cubic-bezier(0.22,1,0.36,1); transform: translateZ(0); backface-visibility: hidden; will-change: filter, opacity; }
.blur-t.is-in { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .blur-t { opacity: 1; filter: none; transition: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.il-hero { max-width: 1080px; margin-inline: auto; padding: clamp(116px, 15vh, 172px) clamp(20px, 5vw, 72px) clamp(48px, 7vh, 84px); }
.il-crumb { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.04em; color: var(--text-tertiary); margin: 0 0 clamp(26px, 4vh, 44px); }
.il-crumb a { color: var(--text-tertiary); text-decoration: none; }
.il-crumb a:hover { color: var(--text-secondary); }
.il-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.il-logo { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-subtle); display: grid; place-items: center; flex: none; overflow: hidden; }
.il-logo img { width: 26px; height: 26px; object-fit: contain; }
/* Anthropic's mark is a near-black glyph, invisible on the warm-dark ground; whiten it. */
.il-logo img[src*="anthropic"] { filter: brightness(0) invert(1); }
.il-plus { font-family: var(--font-code); font-size: 18px; color: var(--text-quaternary); }
.il-mark { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-subtle); display: grid; place-items: center; flex: none; }
.il-mark img { width: 26px; height: 26px; }
.il-hero-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero-xl); line-height: 0.98; letter-spacing: -0.032em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.il-hero-h1 em { font-style: normal; color: var(--text-primary); }
.il-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 22px 0 0; max-width: 60ch; }
.il-hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(26px, 4vh, 40px); }
/* .link-cta sets align-self:flex-start; override so it centres beside the pill */
.il-hero-cta .link-cta { align-self: center; padding-top: 4px; }
.il-install { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 11px 14px; font-family: var(--font-code); font-size: 13.5px; color: var(--text-secondary); }
.il-install .il-install-pfx { color: var(--text-quaternary); }

/* ── Benefits ─────────────────────────────────────────────────────────── */
.il-benefits { max-width: 1080px; margin-inline: auto; padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 72px); }
.il-sec-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h3); line-height: 1.02; letter-spacing: -0.026em; color: var(--text-primary); margin: 0 0 clamp(24px, 4vh, 44px); }
.il-sec-h2 em { font-style: normal; color: var(--text-primary); }
.il-ben-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.il-ben { padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 32px) 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.il-ben-t { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 23px); color: var(--text-primary); }
.il-ben-d { font-family: var(--font-base); font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); max-width: 42ch; }

/* ── Quickstart (code) ────────────────────────────────────────────────── */
.il-quick { max-width: 1080px; margin-inline: auto; padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 72px); }
.il-code { border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
.il-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); }
.il-code-name { font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.il-code-body { margin: 0; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px); font-family: var(--font-code); font-size: var(--mkt-body-xs); line-height: 1.75; color: var(--text-secondary); white-space: pre; overflow-x: auto; }
.il-code-body .k { color: var(--il-accent); }
.il-code-body .s { color: var(--text-primary); }
.il-code-body .c { color: var(--text-quaternary); }
.il-quick-note { font-family: var(--font-base); font-size: 14px; color: var(--text-tertiary); margin: 20px 0 0; }
.il-quick-note a { color: var(--text-secondary); border-bottom: 1px solid var(--border); text-decoration: none; }
.il-quick-note a:hover { color: var(--text-primary); }

/* ── Use cases ────────────────────────────────────────────────────────── */
.il-uses { max-width: 1080px; margin-inline: auto; padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 72px); }
.il-use-list { list-style: none; margin: 0; padding: 0; }
.il-use { display: grid; grid-template-columns: clamp(40px, 4vw, 64px) 1fr; gap: clamp(12px, 2vw, 28px); align-items: baseline; padding: clamp(16px, 2.2vw, 26px) 0; border-top: 1px solid var(--border-subtle); }
.il-use:last-child { border-bottom: 1px solid var(--border-subtle); }
.il-use-n { font-family: var(--font-code); font-size: 12px; color: var(--text-quaternary); }
.il-use-t { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); }
.il-use-t b { color: var(--text-primary); font-weight: 500; }

/* ── Closer ───────────────────────────────────────────────────────────── */
.il-end { padding: clamp(80px, 13vh, 168px) clamp(20px, 5vw, 72px); text-align: center; }
.il-end-frame { max-width: 720px; margin-inline: auto; }
.il-end-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; }
.il-end-h2 em { font-style: normal; color: var(--text-primary); }
.il-end-cta { margin-top: clamp(28px, 4vh, 44px); }
.il-end-links { font-family: var(--font-base); font-size: 14px; color: var(--text-tertiary); margin: 22px 0 0; }
.il-end-links a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border); }
.il-end-links a:hover { color: var(--text-primary); }

@media (max-width: 760px) {
  .il-ben-list { grid-template-columns: 1fr; }
  .il-ben { padding-right: 0; }
}
@media (max-width: 600px) {
  /* Hero text is left-aligned; keep the CTA left too. On mobile the stack
     becomes a column (global cta-stack--inline rule) and il-hero-cta's
     align-items:center (a desktop-row vertical-centering) would otherwise
     centre the whole CTA. */
  .il-hero-cta { align-items: flex-start; }
  .il-hero-cta .link-cta { align-self: flex-start; padding-top: 0; }
}
@media (min-width: 1600px) {
  .il-hero, .il-benefits, .il-quick, .il-uses { max-width: 1240px; }
}