/* Public integrations page (/integrations). Additive styles only — the page reuses the
   .ocl-landing scope (dark marketing theme, header, tiles, footer) from landing.css, so every
   selector here MUST stay under .ocl-landing (Vite injects CSS globally; see web/customer/CLAUDE.md). */

.ocl-landing .intg-hero{padding-top:140px;padding-bottom:56px}
.ocl-landing .intg-hero h1{font-family:var(--font-display);font-size:44px;line-height:1.12;margin:14px 0 12px;letter-spacing:-.5px}
.ocl-landing .intg-sub{color:var(--muted);font-size:16.5px;max-width:640px;line-height:1.6;margin-bottom:36px}

.ocl-landing .intg-index{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ocl-landing .intg-tile{text-decoration:none;color:inherit}
.ocl-landing .intg-tile:hover{border-color:rgba(139,92,246,.45)}

.ocl-landing .intg-back{display:inline-block;font-family:var(--font-mono);font-size:13px;color:var(--muted);
  text-decoration:none;margin-bottom:26px;border:1px solid var(--border);border-radius:999px;padding:6px 14px;
  transition:color .2s ease,border-color .2s ease}
.ocl-landing .intg-back:hover{color:var(--cyan);border-color:rgba(34,211,238,.5)}
.ocl-landing .intg-detail .intg-plat-head{margin-bottom:6px}
.ocl-landing .intg-detail .intg-plat-head h1{font-family:var(--font-display);font-size:34px;margin:2px 0 6px;letter-spacing:-.4px}
.ocl-landing .intg-plat-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:10px}
.ocl-landing .intg-plat-head .int-ico{width:46px;height:46px}
.ocl-landing .intg-plat-head h2{font-family:var(--font-display);font-size:26px;margin:2px 0 4px}
.ocl-landing .intg-plat-head p{color:var(--muted);font-size:14.5px;line-height:1.5}

.ocl-landing .intg-cat{margin-top:22px}
.ocl-landing .intg-cat h3{font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:10px}

.ocl-landing .intg-actions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ocl-landing .intg-action{display:grid;grid-template-columns:minmax(260px,340px) 1fr auto;gap:14px;align-items:baseline;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.ocl-landing .intg-action code{font-family:var(--font-mono);font-size:13px;color:var(--violet-2,#c4b5fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocl-landing .intg-summary{color:var(--muted);font-size:13.5px;line-height:1.45}

.ocl-landing .intg-badge{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;white-space:nowrap}
.ocl-landing .intg-badge.read{color:var(--green);border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.ocl-landing .intg-badge.write{color:#fbbf24;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.ocl-landing .intg-badge.soon{color:var(--muted);border:1px dashed var(--border);background:transparent}

@media(max-width:1000px){
.ocl-landing .intg-index{grid-template-columns:repeat(2,1fr)}
.ocl-landing .intg-action{grid-template-columns:1fr auto;grid-template-rows:auto auto}
.ocl-landing .intg-action .intg-summary{grid-column:1 / -1}
}
@media(max-width:560px){
.ocl-landing .intg-index{grid-template-columns:1fr}
.ocl-landing .intg-hero h1{font-size:32px}
}