/* ============================================================================
   CASPAR — section styles (aligned to flexible-content.php "Emerald Orbit" system)
   Canonical tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Font: Manrope · Icons: Material Symbols Outlined
   Page-level UI uses the canonical green system so Caspar matches the home,
   WatchEye, IDFEX and ID Pass pages. The authentic CASPAR product chrome
   (light top bar, green tabs, blue information icon) is preserved ONLY inside
   the device mockups — sampled from the real Caspar V2 dashboard.
   Scoped under .caspar so it can be enqueued alongside the ACF template safely.
   ============================================================================ */

.caspar{
  --cs-primary:#13ec80;        /* bright accent — fills, dots, glows, button bg */
  --cs-primary-dark:#0eb561;   /* hover */
  --cs-green:#047857;          /* accessible green text */
  --cs-green-700:#065f46;
  --cs-green-soft:#ecfdf5;     /* emerald-50 tint */
  --cs-green-line:#a7f3d0;     /* emerald-200 */
  --cs-ink:#0f172a;            /* slate-900 headings */
  --cs-body:#475569;           /* slate-600 body */
  --cs-muted:#64748b;          /* slate-500 */
  --cs-faint:#94a3b8;          /* slate-400 */
  --cs-line:#e2e8f0;           /* slate-200 */
  --cs-line-soft:#eef2f7;
  --cs-surface:#ffffff;
  --cs-surface-2:#f8fafc;      /* slate-50 */
  --cs-surface-3:#f1f5f9;      /* slate-100 */
  --cs-amber-bg:#fef3c7;
  --cs-amber-tx:#b45309;
  --cs-rose-bg:#ffe4e6;
  --cs-rose-tx:#be123c;
  /* authentic CASPAR product chrome */
  --cs-brand-green:#15a05a;    /* dashboard active-tab / Search button green */
  --cs-brand-info:#2563eb;     /* the signature blue information icon */
}

/* ---- glass + shadows ---- */
.caspar .cs-glass{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); }
.caspar .cs-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.caspar .cs-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.caspar .cs-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
 .cs-mesh{ background-image:radial-gradient(circle at top left,rgba(19,236,128,.10),transparent 42%),radial-gradient(circle at bottom right,rgba(4,120,87,.07),transparent 45%); }
 .cs-hero-mesh{ background-color:#fff; background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 12% 8%,rgba(4,120,87,.08),transparent 40%); }

/* ---- standardized brand badge / eyebrow (matches CTA pill across the site) ---- */
.caspar .cs-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cs-green-700); background:var(--cs-green-soft);
  padding:7px 14px; border-radius:100px; border:1px solid var(--cs-green-line);
}
.caspar .cs-badge .material-symbols-outlined{ font-size:15px; }
.caspar .cs-badge .cs-dot{ width:7px; height:7px; border-radius:50%; background:var(--cs-primary); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:cs-pulse 1.8s infinite; }
@keyframes cs-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }

/* ---- animations & utility ---- */
.caspar .cs-report { transform:translateX(20px); opacity:0; transition:transform .6s cubic-bezier(.22,.8,.18,1), opacity .5s ease; }
.caspar .cs-report.is-in { transform:translateX(0); opacity:1; }


/* ---- buttons (system: bright green bg, dark text) ---- */
.caspar .cs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; border:1px solid transparent; border-radius:12px;
  padding:13px 22px; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s; white-space:nowrap; text-decoration:none; }
.caspar .cs-btn .material-symbols-outlined{ font-size:18px; }
.caspar .cs-btn-primary{ background:var(--cs-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.caspar .cs-btn-primary:hover{ background:var(--cs-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.caspar .cs-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--cs-line); color:var(--cs-green-700); }
.caspar .cs-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.caspar .cs-btn-dark{ background:#0b1220; color:#fff; }
.caspar .cs-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }
.caspar .cs-btn-on-dark{ background:#fff; color:#06281a; }
.caspar .cs-btn-on-dark:hover{ background:var(--cs-primary); transform:translateY(-2px); }
.caspar .cs-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.caspar .cs-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* ---- generic cards ---- */
.caspar .cs-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 .3s ease, box-shadow .3s ease; }
.caspar .cs-card-hover:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.16); }
.caspar .cs-ico{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--cs-green-soft); border:1px solid var(--cs-green-line); color:var(--cs-green); }
.caspar .cs-ico .material-symbols-outlined{ font-size:26px; }
.caspar .cs-ico-sm{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--cs-green-soft); border:1px solid var(--cs-green-line); color:var(--cs-green); }
.caspar .cs-ico-sm .material-symbols-outlined{ font-size:23px; }

/* ---- chips / status ---- */
.caspar .cs-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.caspar .cs-chip-pass{ background:var(--cs-green-soft); color:var(--cs-green-700); }
.caspar .cs-chip-warn{ background:var(--cs-amber-bg); color:var(--cs-amber-tx); }
.caspar .cs-chip-fail{ background:var(--cs-rose-bg); color:var(--cs-rose-tx); }
.caspar .cs-chip-info{ background:rgba(37,99,235,.10); color:var(--cs-brand-info); }

/* ---- bar / progress ---- */
.caspar .cs-bar-track{ background:rgba(19,236,128,.18); border-radius:3px; overflow:hidden; }
.caspar .cs-bar-fill{ height:100%; background:var(--cs-primary); transition:width .7s cubic-bezier(.2,.8,.2,1); }

/* ============================================================================
   AUTHENTIC CASPAR PRODUCT CHROME — only inside device mockups
   (sampled from the real Caspar V2 portal: light top bar, green active tab,
   clean white results table, blue information icon)
   ============================================================================ */
.caspar .cs-topbar{ background:#ffffff; color:var(--cs-ink); border-bottom:1px solid var(--cs-line); }
.caspar .cs-wordmark{ font-weight:800; letter-spacing:-.02em; color:var(--cs-brand-green); }
.caspar .cs-tab{ color:var(--cs-muted); font-weight:600; border-radius:8px; white-space:nowrap; }
.caspar .cs-tab.active{ background:var(--cs-brand-green); color:#fff; box-shadow:0 2px 6px rgba(21,160,90,.3); }
.caspar .cs-info{ width:18px; height:18px; border-radius:50%; background:var(--cs-brand-info); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-style:italic; font-size:11px; line-height:1; box-shadow:0 1px 3px rgba(37,99,235,.4); flex:none; }
.caspar .cs-info.lg{ width:22px; height:22px; font-size:13px; }
.caspar .cs-search-btn{ background:var(--cs-brand-green); color:#fff; }
.caspar .cs-row-pass{ background:#eef8f1; }
.caspar .cs-row-warning{ background:#fdeef0; }
.caspar .cs-th{ background:var(--cs-surface-2); color:var(--cs-muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }

/* deliverability ping dots */
.caspar .cs-ping{ width:14px; height:14px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--cs-line); }
.caspar .cs-ping .material-symbols-outlined{ font-size:11px; }
.caspar .cs-ping-on{ background:var(--cs-green-soft); border-color:var(--cs-green-line); color:var(--cs-green); }
.caspar .cs-ping-off{ background:var(--cs-rose-bg); border-color:#fecdd3; color:var(--cs-rose-tx); }
.caspar .cs-ping-idle{ background:#fff; color:var(--cs-faint); }

/* portal form bits inside mockups */
.caspar .cs-portal-input{ border:1px solid var(--cs-line); border-radius:6px; padding:8px 11px; font-size:13px; width:100%; background:#fff; color:var(--cs-ink); outline:none; }
.caspar .cs-portal-input:focus{ border-color:var(--cs-brand-green); box-shadow:0 0 0 3px rgba(21,160,90,.12); }
.caspar .cs-portal-label{ font-size:11px; color:var(--cs-body); margin-bottom:4px; display:block; font-weight:500; }

/* ---- report swing-in panel (the blue info icon experience) ---- */
.caspar .cs-report{ transform:translateX(20px); opacity:0; transition:transform .6s cubic-bezier(.22,.8,.18,1), opacity .5s ease; }
.caspar .cs-report.is-in{ transform:translateX(0); opacity:1; }

/* ---- stat band (dark) ---- */
.caspar .cs-stat-num{ font-weight:800; letter-spacing:-.025em; color:var(--cs-primary); line-height:.92; }

/* ---- scrollytelling screens ---- */
.caspar .cs-screen{ opacity:0; transform:translateY(15px); transition:all .6s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.caspar .cs-screen.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.caspar .cs-step{ transition:opacity .5s ease, transform .5s ease; }
.caspar .cs-tl-icon{ transition:all .4s ease; }

/* timeline (hidden-connections bento) */
.caspar .cs-timeline-dot{ transition:all .4s ease; }

/* ---- association flow diagram (org-style network of relatives / associates) ---- */
.caspar .cs-org-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.caspar .cs-org-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px; z-index:2; }
.caspar .cs-org-av{ border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 2px 8px rgba(15,23,42,.18); }
.caspar .cs-org-av .material-symbols-outlined{ color:#fff; line-height:1; }
.caspar .cs-org-subject{ background:var(--cs-brand-info); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.caspar .cs-org-ok{ background:var(--cs-brand-green); }
.caspar .cs-org-risk{ background:#e11d48; box-shadow:0 0 0 4px rgba(225,29,72,.18); }
.caspar .cs-org-label{ font-size:9px; font-weight:700; color:#475569; white-space:nowrap; letter-spacing:.01em; }
.caspar .cs-org-label-risk{ color:#e11d48; }

/* ---- polished radial association network (relatives / associates) ---- */
.caspar .cs-net{ position:relative; width:100%; max-width:360px; margin:0 auto; aspect-ratio:340/238; }
.caspar .cs-net-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.caspar .cs-net-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:5px; z-index:2; }
.caspar .cs-net-node-up{ flex-direction:column-reverse; }
.caspar .cs-net-av{ border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 14px -4px rgba(15,23,42,.3); }
.caspar .cs-net-av .material-symbols-outlined{ line-height:1; }
.caspar .cs-net-subject{ background:linear-gradient(145deg,#3b82f6,#1d4ed8); border:3px solid #fff; }
.caspar .cs-net-subject .material-symbols-outlined{ color:#fff; }
.caspar .cs-net-ok{ background:linear-gradient(145deg,#ffffff,#f0fdf4); border:1.5px solid #bbf7d0; }
.caspar .cs-net-ok .material-symbols-outlined{ color:var(--cs-brand-green); }
.caspar .cs-net-risk{ background:linear-gradient(145deg,#ffffff,#fff1f2); border:1.5px solid #fecdd3; animation:cs-haloPulse 2.2s ease-in-out infinite; }
.caspar .cs-net-risk .material-symbols-outlined{ color:#e11d48; }
@keyframes cs-haloPulse{ 0%,100%{ box-shadow:0 5px 14px -4px rgba(225,29,72,.3), 0 0 0 0 rgba(225,29,72,.30) } 50%{ box-shadow:0 5px 14px -4px rgba(225,29,72,.3), 0 0 0 8px rgba(225,29,72,0) } }
.caspar .cs-net-tag{ font-size:9px; font-weight:700; padding:2px 7px; border-radius:100px; background:#fff; border:1px solid var(--cs-line); color:#475569; white-space:nowrap; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.caspar .cs-net-tag-risk{ background:#fff1f2; border-color:#fecdd3; color:#e11d48; }

/* custom scrollbar */
.caspar .cs-scroll::-webkit-scrollbar{ height:6px; }
.caspar .cs-scroll::-webkit-scrollbar-track{ background:var(--cs-surface-3); }
.caspar .cs-scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; }

/* pop-in for ticks */
.caspar.cs-pop{ opacity:0; transform:scale(.5); }

/* hero scanner sweep */
.caspar.cs-hero-scan{ position:absolute; left:0; right:0; top:0; height:100%; opacity:0; z-index:20; pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(37,99,235,.10) 50%,var(--cs-brand-info) 100%); border-bottom:2px solid var(--cs-brand-info); transform:translateY(-100%); }
.caspar.cs-hero-scan.run{ animation:cs-heroScan 1.5s ease-in-out; }
@keyframes cs-heroScan{ 0%{transform:translateY(-100%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(100%);opacity:0} }

/* terminal cursor */
.caspar .cs-cursor { display: inline-block; width: 7px; height: 13px; background: rgba(255,255,255,0.7); vertical-align: middle; margin-left: 3px; animation: cs-blink 1s steps(2) infinite; }

@keyframes cs-blink { 
  0%, 49% { opacity: 1; } 
  50%, 100% { opacity: 0; } 
}

/* reveal on scroll */
.caspar .cs-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.caspar .cs-reveal.in{ opacity:1; transform:none; }
.caspar .cs-reveal.d1{ transition-delay:.08s } 
.caspar .cs-reveal.d2{ transition-delay:.16s } 
.caspar .cs-reveal.d3{ transition-delay:.24s }

/* faq */
.caspar .cs-faq{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.caspar .cs-faq summary::-webkit-details-marker{ display:none; }
.caspar .cs-faq summary{ list-style:none; }
.caspar .cs-faq[open] .cs-faq-plus{ transform:rotate(45deg); }

@media (prefers-reduced-motion: reduce){
  .caspar *{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .caspar .cs-reveal{ opacity:1!important; transform:none!important; }
  .caspar .cs-pop{ opacity:1!important; transform:none!important; }
}