/* ============================================================================
   Product page shared sections — API endpoints + Solutions & Use cases
   Unscoped on purpose: usable on any product page (WatchEye, IDFEX, Insiight,
   Portal). Class prefix .ps-. Colours match flexible-content.php.
   ========================================================================== */
:root{ --ps-primary:#13ec80; --ps-green:#047857; --ps-green-700:#065f46; --ps-green-soft:#ecfdf5; --ps-green-line:#a7f3d0; --ps-ink:#0f172a; --ps-body:#475569; --ps-line:#e2e8f0; --ps-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; }

.ps-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ps-green-700); background:var(--ps-green-soft); padding:7px 14px; border-radius:100px; border:1px solid var(--ps-green-line); }
.ps-badge .material-symbols-outlined{ font-size:15px; }

/* cards */
.ps-card{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); transition:transform .25s,box-shadow .25s; text-decoration:none; }
.ps-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.16); }
.ps-ico{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--ps-green-soft); border:1px solid var(--ps-green-line); color:var(--ps-green); }
.ps-ico .material-symbols-outlined{ font-size:22px; }

/* API endpoint chips */
.ps-eps{ display:flex; flex-wrap:wrap; gap:8px; }
.ps-eps a{ font-family:var(--ps-mono); font-size:12px; color:var(--ps-body); background:#fff; border:1px solid var(--ps-line); padding:9px 14px; text-decoration:none; transition:.15s; border-radius:8px; }
.ps-eps a:hover{ border-color:var(--ps-green-line); background:var(--ps-green-soft); color:var(--ps-green-700); }
.ps-eps a b{ color:var(--ps-green-700); font-weight:700; }

/* note bar */
.ps-note{ display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start; background:var(--ps-green-soft); border:1px solid var(--ps-green-line); border-radius:14px; padding:18px 22px; }
.ps-note .material-symbols-outlined{ font-size:20px; color:var(--ps-green); }
.ps-note p{ font-size:14px; line-height:1.65; color:var(--ps-green-700); font-weight:600; }
.ps-note p b{ font-weight:800; }

/* section head note (right of an h2) */
.ps-head-note{ font-size:14px; line-height:1.6; color:var(--ps-body); }
.ps-head-note a{ color:var(--ps-green); font-weight:700; }
.ps-head-note a:hover{ color:var(--ps-green-700); }