/* Page styles for integrations.html, lifted out verbatim.
   External so style-src can drop 'unsafe-inline'; see
   docs/improvement-plan-2026.md §23. Linked at the same position the
   <style> block occupied, so it still overrides styles.css. */

  .integ-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
  @media (max-width:820px) { .integ-grid { grid-template-columns:1fr 1fr } }
  @media (max-width:520px) { .integ-grid { grid-template-columns:1fr } }
  .integ-card { border:1px solid var(--line); border-radius: var(--r-lg); padding:22px; transition: border-color 200ms, transform 200ms; background: var(--paper); display:flex; flex-direction:column; gap:14px }
  .integ-card:hover { border-color: var(--line-2); transform: translateY(-2px) }
  .integ-top { display:flex; align-items:center; justify-content:space-between; gap:12px }
  .integ-icon { width:40px; height:40px; border-radius: var(--r-md); background: var(--accent-soft); display:grid; place-items:center; font-family: var(--font-mono); font-weight:700; font-size:13px; color:var(--accent-ink) }
  .integ-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color:var(--ink) }
  .integ-cat { font-family:var(--font-mono); font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.08em; margin-top:3px }
  .integ-desc { color:var(--muted); font-size:14px; line-height:1.55; margin:0 }
  .integ-status { font-family:var(--font-mono); font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; align-self:flex-start; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap }
  .integ-status.live { background:var(--accent-soft); color:var(--accent-ink) }
  .integ-status.beta { background:var(--gold-soft); color:var(--gold-ink) }
  .integ-status.soon { background:var(--bg-2); color:var(--muted) }
  .integ-section { margin-top:64px }
  .integ-section h2 { font-size:24px; letter-spacing:-0.02em; margin-bottom:6px }
  .integ-section p.lead-sub { color:var(--muted); font-size:14.5px; margin-bottom:24px }
