/* ============================================================================
   product-chrome.css
   Authentic per-product device-mock chrome, ported verbatim from each product
   page's stylesheet. Each block is fully scoped to its product class
   (.watcheye / .idfex / .caspar / .ins / .adc / .qst), so wrapping a portal
   product mock in that class brings in its real hero-mock styling.
   ============================================================================ */


/* ====================== WatchEye ====================== */
/* ============================================================================
   WatchEye -- section styles (aligned to flexible-content.php design 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 WatchEye matches the home,
   IDFEX and ID Pass pages. The authentic WatchEye product chrome (purple top-bar,
   blue sidebar) is preserved ONLY inside the device mockups.
   Scoped under .watcheye so it can be enqueued alongside the ACF template safely.
   ============================================================================ */

.watcheye{
  --we-primary:#13ec80;        /* bright accent -- fills, dots, glows, button bg */
  --we-primary-dark:#0eb561;   /* hover */
  --we-green:#047857;          /* accessible green text */
  --we-green-700:#065f46;
  --we-green-soft:#ecfdf5;     /* emerald-50 tint */
  --we-green-line:#a7f3d0;     /* emerald-200 */
  --we-ink:#0f172a;            /* slate-900 headings */
  --we-body:#475569;           /* slate-600 body */
  --we-muted:#64748b;          /* slate-500 */
  --we-faint:#94a3b8;          /* slate-400 */
  --we-line:#e2e8f0;           /* slate-200 */
  --we-line-soft:#eef2f7;
  --we-surface:#ffffff;
  --we-surface-2:#f8fafc;      /* slate-50 */
  --we-surface-3:#f1f5f9;      /* slate-100 */
  --we-amber-bg:#fef3c7;
  --we-amber-tx:#b45309;
  --we-rose-bg:#ffe4e6;
  --we-rose-tx:#be123c;
  /* authentic product chrome */
  --we-brand-purple:#581f5d;
  --we-brand-violet:#7c3aed;
}

/* ---- glass + shadows ---- */
.watcheye .we-glass{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); }
.watcheye .we-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.watcheye .we-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.watcheye .we-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.watcheye .we-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%); }
.watcheye.we-hero-mesh, .watcheye .we-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) ---- */
.watcheye .we-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--we-green-700); background:var(--we-green-soft);
  padding:7px 14px; border-radius:100px; border:1px solid var(--we-green-line);
}
.watcheye .we-badge .material-symbols-outlined{ font-size:15px; }
.watcheye .we-badge .we-dot{ width:7px; height:7px; border-radius:50%; background:var(--we-primary); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:we-pulse 1.8s infinite; }
@keyframes we-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)} }

/* ---- buttons (system: bright green bg, dark text) ---- */
.watcheye .we-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; }
.watcheye .we-btn .material-symbols-outlined{ font-size:18px; }
.watcheye .we-btn-primary{ background:var(--we-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.watcheye .we-btn-primary:hover{ background:var(--we-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.watcheye .we-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--we-line); color:var(--we-green-700); }
.watcheye .we-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.watcheye .we-btn-dark{ background:#0b1220; color:#fff; }
.watcheye .we-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }
.watcheye .we-btn-on-dark{ background:#fff; color:#06281a; }
.watcheye .we-btn-on-dark:hover{ background:var(--we-primary); transform:translateY(-2px); }
.watcheye .we-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.watcheye .we-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

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

/* ---- chips / status ---- */
.watcheye .we-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.watcheye .we-chip-pass{ background:var(--we-green-soft); color:var(--we-green-700); }
.watcheye .we-chip-warn{ background:var(--we-amber-bg); color:var(--we-amber-tx); }
.watcheye .we-chip-fail{ background:var(--we-rose-bg); color:var(--we-rose-tx); }
.watcheye .we-chip-new{ background:rgba(124,58,237,.12); color:var(--we-brand-violet); }

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

/* ============================================================================
   AUTHENTIC WATCHEYE PRODUCT CHROME -- only inside device mockups
   ============================================================================ */
.watcheye .we-topbar{ background:var(--we-brand-purple); color:#fff; }
.watcheye .we-sidebar{ background:linear-gradient(180deg,#4960B4 0%,#4A5AAF 35%,#4085EA 75%,#3d94fd 100%); color:#fff; }
.watcheye .we-nav-item{ color:rgba(255,255,255,.92); font-weight:600; border-radius:8px; }
.watcheye .we-nav-item.active{ background:#fff; color:var(--we-brand-purple); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.watcheye .we-row-warning{ background:#fdeef0; }
.watcheye .we-row-pass{ background:#eef8f1; }
.watcheye .we-logo{ background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPCEtLSBDcmVhdG9yOiBDb3JlbERSQVcgSG9tZSAmIFN0dWRlbnQgMjAxOSAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxODkycHgiIGhlaWdodD0iNDA2cHgiIHZlcnNpb249IjEuMSIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIgp2aWV3Qm94PSIwIDAgMTc1MC4wNiAzNzUuNSIKIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KIDxkZWZzPgogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+CiAgIDwhW0NEQVRBWwogICAgLmZpbDEge2ZpbGw6d2hpdGV9CiAgICAuZmlsMCB7ZmlsbDp3aGl0ZTtmaWxsLXJ1bGU6bm9uemVyb30KICAgXV0+CiAgPC9zdHlsZT4KIDwvZGVmcz4KIDxnIGlkPSJMYXllcl94MDAyMF8xIj4KICA8bWV0YWRhdGEgaWQ9IkNvcmVsQ29ycElEXzBDb3JlbC1MYXllciIvPgogIDxnIGlkPSJfNzczNTkyNjgwIj4KICAgPHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik02NzAuMzUgMTAwLjY2bC00Ni42NiAxNzYuMTcgLTQ1LjM5IDAgLTI0LjY5IC05Ny4yNSAtMjMuMzMgOTcuMjUgLTQ3LjMzIDAgLTQ2LjYxIC0xNzYuMTcgNTAuODQgMCAyNC41MiAxMDEuMiAyNC4zIC0xMDEuMiA0Mi4zIDAgMjYuMDIgMTAxLjQyIDI0LjY1IC0xMDEuNDIgNDEuMzggMHptMTA1Ljk2IDE3Ni4xN2wtOS43MyAtMzQuNiAtNDcuOTQgMCAtMTAuMzggMzQuNiAtNDMuODUgMCA1NC41IC0xNzYuMTcgNTcuMTQgMCA1NS40MiAxNzYuMTcgLTU1LjE2IDB6bS00Ny44NSAtNzMuMTdsMjguMTcgMCAtMTQuMTMgLTUxLjAyIC0xNC4wNCA1MS4wMnptMTgxLjIzIC02MC43NGwwIDEzMy45MSAtNTEuMjMgMCAwIC0xMzMuOTEgLTM2LjQ2IDAgMCAtNDIuMjYgMTI0LjE0IDAgMCA0Mi4yNiAtMzYuNDUgMHptMTQ4LjQ5IDY2LjgybDQ5LjM5IDIuOTVjLTIuMzMsMjEuNTIgLTEwLjMsMzguMDMgLTIzLjksNDkuNTIgLTEzLjYsMTEuNDkgLTMwLjMzLDE3LjI2IC01MC4xOSwxNy4yNiAtMjMuOSwwIC00My4xOCwtNy45MiAtNTcuODQsLTIzLjczIC0xNC43LC0xNS44IC0yMi4wNSwtMzcuNjggLTIyLjA1LC02NS41IDAsLTI3LjYgNi45NSwtNDkuODggMjAuODYsLTY2LjgyIDEzLjkxLC0xNi45NSAzMy4zMywtMjUuNDEgNTguMjQsLTI1LjQxIDIzLjI5LDAgNDEuMiw2LjQzIDUzLjcxLDE5LjI4IDEyLjQ2LDEyLjg2IDE5LjU0LDI5Ljk0IDIxLjE3LDUxLjE2bC01MC40NSAyLjczYzAsLTExLjc2IC0yLjI0LC0yMC4yMSAtNi43MywtMjUuNDUgLTQuNDksLTUuMjQgLTkuODIsLTcuODMgLTE1Ljg5LC03LjgzIC0xNi45NSwwIC0yNS40NSwxNy4xMiAtMjUuNDUsNTEuNDEgMCwxOS4xOSAyLjIsMzIuMjcgNi42LDM5LjE0IDQuNDUsNi45MSAxMC42NiwxMC4zNCAxOC42MiwxMC4zNCAxNC4yMiwwIDIyLjE5LC05LjY4IDIzLjkxLC0yOS4wNXptMjE4LjU3IC0xMDkuMDhsMCAxNzYuMTcgLTU0LjE1IDAgMCAtNjguNDEgLTQwLjk0IDAgMCA2OC40MSAtNTQuMTUgMCAwIC0xNzYuMTcgNTQuMTUgMCAwIDY0Ljk3IDQwLjk0IDAgMCAtNjQuOTcgNTQuMTUgMHoiLz4KICAgPHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik0xNDQwLjAyIDIzNC44M2wwIDQyIC0xMzIuNTkgMCAwIC0xNzYuMTcgMTMyLjU5IDAgMCA0MC42NyAtNzkuNSAwIDAgMjUuNjIgNjQuMTggMCAwIDM5LjA5IC02NC4xOCAwIDAgMjguNzkgNzkuNSAwem0xNjcuNDEgLTEzNC4xN2wtNTUuMDIgMTAxLjY4IDAgNzQuNDkgLTUyLjU3IDAgMCAtNzQuNDkgLTU5LjI1IC0xMDEuNjggNTkuMTIgMCAzMC45OSA1Ny45MyAyOS41IC01Ny45MyA0Ny4yMyAwem0xNDIuNjMgMTM0LjE3bDAgNDIgLTEzMi41OSAwIDAgLTE3Ni4xNyAxMzIuNTkgMCAwIDQwLjY3IC03OS41IDAgMCAyNS42MiA2NC4xOCAwIDAgMzkuMDkgLTY0LjE4IDAgMCAyOC43OSA3OS41IDB6Ii8+CiAgIDxwYXRoIGNsYXNzPSJmaWwxIiBkPSJNMzQ2LjcxIDg3LjhjMTguMjQsMjguOTQgMjguNzksNjMuMjEgMjguNzksOTkuOTUgMCwxMDMuNjkgLTg0LjA2LDE4Ny43NSAtMTg3Ljc1LDE4Ny43NSAtNDguNTksMCAtOTIuODcsLTE4LjQ2IC0xMjYuMjEsLTQ4Ljc1bDIzLjMxIC0yMi4yYzI3LjQzLDI0LjE5IDYzLjQ1LDM4Ljg3IDEwMi45LDM4Ljg3IDg1Ljk3LC0wLjAxIDE1NS42NywtNjkuNyAxNTUuNjcsLTE1NS42NyAwLC0yOS40OCAtOC4yLC01Ny4wNCAtMjIuNDQsLTgwLjU0bDI1LjczIC0xOS40MXoiLz4KICAgPHBhdGggY2xhc3M9ImZpbDEiIGQ9Ik0xODcuNzUgMGM0OC41OSwwIDkyLjg3LDE4LjQ2IDEyNi4yMSw0OC43NWwtMjMuMzEgMjIuMmMtMjcuNDQsLTI0LjE4IC02My40NSwtMzguODcgLTEwMi45LC0zOC44NyAtODUuOTcsMCAtMTU1LjY3LDY5LjcgLTE1NS42NywxNTUuNjcgMC4wMSwyOS40OCA4LjIsNTcuMDQgMjIuNDQsODAuNTRsLTI1LjczIDE5LjQyYy0xOC4yNCwtMjguOTUgLTI4Ljc5LC02My4yMiAtMjguNzksLTk5Ljk2IDAsLTEwMy42OSA4NC4wNiwtMTg3Ljc1IDE4Ny43NSwtMTg3Ljc1eiIvPgogICA8cG9seWdvbiBjbGFzcz0iZmlsMSIgcG9pbnRzPSI0Ny43LDI4NS4wMyA4MC43LDI5NC44NCAxMTMuNzEsMzA0LjY1IDg4LjcxLDMyOC4zMyA2My43MSwzNTIuMDEgNTUuNywzMTguNTIgIi8+CiAgIDxwb2x5Z29uIGNsYXNzPSJmaWwxIiBwb2ludHM9IjMyNy44MSw5MC40NyAyOTQuOCw4MC42NiAyNjEuNzksNzAuODQgMjg2Ljc5LDQ3LjE2IDMxMS43OSwyMy40OCAzMTkuOCw1Ni45OCAiLz4KICAgPHBhdGggY2xhc3M9ImZpbDEiIGQ9Ik0yMjMuODggMTg3Ljc1YzAsLTE5Ljk2IC0xNi4xNywtMzYuMTQgLTM2LjEzLC0zNi4xNGwtMC40NiAwLjAxYzAuMywxLjcyIDAuNDYsMy40OCAwLjQ2LDUuMjkgMCwxNy4wMyAtMTMuODEsMzAuODQgLTMwLjg0LDMwLjg0IC0xLjgxLDAgLTMuNTcsLTAuMTYgLTUuMjksLTAuNDVsLTAuMDEgMC40NWMwLDE5Ljk2IDE2LjE4LDM2LjE0IDM2LjE0LDM2LjE0IDE5Ljk1LDAgMzYuMTQsLTE2LjE4IDM2LjEzLC0zNi4xNHoiLz4KICAgPHBhdGggY2xhc3M9ImZpbDEiIGQ9Ik0xODcuNzUgOTcuNjFjLTc3LjQ1LDAuMDEgLTEyMy40Miw5MC4xNCAtMTIzLjQyLDkwLjE0IDAsMCA0NS45Nyw5MC4xNCAxMjMuNDIsOTAuMTQgNzcuNDUsMCAxMjMuNDIsLTkwLjE0IDEyMy40MiwtOTAuMTQgMCwwIC00NS45NywtOTAuMTQgLTEyMy40MiwtOTAuMTR6bTAgMTUwLjQyYy0zMy4yNCwwIC02MC4yOCwtMjcuMDQgLTYwLjI4LC02MC4yOCAwLC0zMy4yNCAyNy4wNCwtNjAuMjggNjAuMjgsLTYwLjI4IDMzLjI0LDAgNjAuMjgsMjcuMDQgNjAuMjgsNjAuMjggMCwzMy4yNCAtMjcuMDQsNjAuMjggLTYwLjI4LDYwLjI4eiIvPgogIDwvZz4KIDwvZz4KPC9zdmc+Cg=="); background-repeat:no-repeat; background-position:left center; background-size:contain; display:inline-block; }

/* portal form bits inside mockups */
.watcheye .we-portal-input{ border:1px solid var(--we-line); border-radius:6px; padding:8px 11px; font-size:13px; width:100%; background:#fff; color:var(--we-ink); outline:none; }
.watcheye .we-portal-label{ font-size:11px; color:var(--we-body); margin-bottom:4px; display:block; font-weight:500; }

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

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

/* timeline (events bento) */
.watcheye .we-timeline-dot{ transition:all .4s ease; }

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

/* pop-in for ticks */
.watcheye .we-pop{ opacity:0; transform:scale(.5); }
@keyframes we-popIn{ to{ opacity:1; transform:scale(1);} }

/* hero scanner sweep */
.watcheye .we-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(19,236,128,.12) 50%,var(--we-primary) 100%); border-bottom:2px solid var(--we-primary); transform:translateY(-100%); }
.watcheye .we-hero-scan.run{ animation:we-heroScan 1.5s ease-in-out; }
@keyframes we-heroScan{ 0%{transform:translateY(-100%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(100%);opacity:0} }

/* terminal cursor */
.watcheye .we-cursor{ display:inline-block; width:7px; height:13px; background:rgba(255,255,255,.7); vertical-align:middle; margin-left:3px; animation:we-blink 1s steps(2) infinite; }
@keyframes we-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* reveal on scroll */
.watcheye .we-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
/* hidden state is gated on a class the JS adds to <html> -- if the script never runs, content stays visible */
html.we-anim .watcheye .we-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.watcheye .we-reveal.in{ opacity:1; transform:none; }
.watcheye .we-reveal.d1{ transition-delay:.08s } .watcheye .we-reveal.d2{ transition-delay:.16s } .watcheye .we-reveal.d3{ transition-delay:.24s }

/* faq */
.watcheye .we-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); }
.watcheye .we-faq summary::-webkit-details-marker{ display:none; }
.watcheye .we-faq summary{ list-style:none; }
.watcheye .we-faq[open] .we-faq-plus{ transform:rotate(45deg); }

@media (prefers-reduced-motion: reduce){
  .watcheye *{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
  /* never hide content when motion is reduced -- show the end-state */
  .watcheye .we-reveal{ opacity:1!important; transform:none!important; }
  .watcheye .we-pop{ opacity:1!important; transform:none!important; }
}


/* ====================== IDFEX ====================== */
/* ============================================================================
   IDFEX ID Check -- section styles (aligned to flexible-content.php design system)
   Canonical tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Font: Manrope / Icons: Material Symbols Outlined
   These styles are scoped under .idfex (and a few global keyframes) so they can
   be enqueued alongside the ACF flexible-content template without collisions.
   ============================================================================ */

.idfex{
  --idf-primary:#13ec80;       /* bright accent -- fills, dots, glows, button bg */
  --idf-primary-dark:#0eb561;  /* hover */
  --idf-green:#047857;         /* accessible green text */
  --idf-green-700:#065f46;
  --idf-green-soft:#ecfdf5;    /* emerald-50 tint */
  --idf-green-line:#a7f3d0;    /* emerald-200 */
  --idf-ink:#0f172a;           /* slate-900 headings */
  --idf-body:#475569;          /* slate-600 body */
  --idf-muted:#64748b;         /* slate-500 */
  --idf-faint:#94a3b8;         /* slate-400 */
  --idf-line:#e2e8f0;          /* slate-200 */
  --idf-line-soft:#eef2f7;
  --idf-surface:#ffffff;
  --idf-surface-2:#f8fafc;     /* slate-50 */
  --idf-surface-3:#f1f5f9;     /* slate-100 */
  --idf-amber-bg:#fef3c7;
  --idf-amber-tx:#b45309;
  --idf-error-bg:#ffe4e6;
  --idf-error-tx:#be123c;
}

/* ---- glass + shadows ---- */
.idfex .idf-glass{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); }
.idfex .idf-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.idfex .idf-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.idfex .idf-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.idfex.idf-mesh, .idfex .idf-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%); }
.idfex.idf-hero-mesh, .idfex .idf-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) ---- */
.idfex .idf-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--idf-green-700); background:var(--idf-green-soft);
  padding:7px 14px; border-radius:100px; border:1px solid var(--idf-green-line);
}
.idfex .idf-badge .material-symbols-outlined{ font-size:15px; }
.idfex .idf-badge .idf-dot{ width:7px; height:7px; border-radius:50%; background:var(--idf-primary); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:idf-pulse 1.8s infinite; }
@keyframes idf-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)} }

/* ---- buttons (system: bright green bg, dark text) ---- */
.idfex .idf-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; }
.idfex .idf-btn .material-symbols-outlined{ font-size:18px; }
.idfex .idf-btn-primary{ background:var(--idf-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.idfex .idf-btn-primary:hover{ background:var(--idf-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.idfex .idf-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--idf-line); color:var(--idf-green-700); }
.idfex .idf-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--idf-soft,0 4px 20px -2px rgba(15,23,42,.06)); }
.idfex .idf-btn-dark{ background:#0b1220; color:#fff; }
.idfex .idf-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }

/* ---- portal mockup chrome ---- */
.idfex .idf-portal-head{ border-bottom:1px solid var(--idf-line); background:#fff; }
.idfex .idf-portal-tab{ color:var(--idf-muted); border:1px solid var(--idf-line); background:transparent; transition:.2s; }
.idfex .idf-portal-tab.is-active{ background:var(--idf-primary); color:#06281a; border-color:var(--idf-primary); }
.idfex .idf-input{ border:1px solid var(--idf-line); border-radius:6px; padding:8px 11px; font-size:13px; width:100%; background:#fff; color:var(--idf-ink); outline:none; transition:.15s; }
.idfex .idf-input:focus{ border-color:var(--idf-primary); box-shadow:0 0 0 3px rgba(19,236,128,.15); }
.idfex .idf-label{ font-size:11px; color:var(--idf-body); margin-bottom:4px; display:flex; align-items:center; gap:4px; font-weight:500; }
.idfex .idf-portal-btn{ background:var(--idf-primary); color:#06281a; border-radius:8px; padding:8px 16px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer; transition:.2s; }
.idfex .idf-portal-btn:hover{ background:var(--idf-primary-dark); }
.idfex .idf-portal-btn-outline{ border:1px solid var(--idf-line); background:#fff; border-radius:8px; padding:8px 16px; color:var(--idf-ink); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; transition:.2s; }
.idfex .idf-portal-btn-outline:hover{ background:var(--idf-surface-2); }

/* match bar (was portal-blue -> canonical green) */
.idfex .idf-bar-track{ background:rgba(19,236,128,.18); border-radius:3px; overflow:hidden; }
.idfex .idf-bar-fill{ height:100%; background:var(--idf-primary); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.idfex .idf-th{ background:var(--idf-surface-2); color:var(--idf-green-700); border-bottom:1px solid var(--idf-line); }

/* toggles (value props) */
.idfex .idf-toggle{ width:34px; height:18px; border-radius:999px; position:relative; flex-shrink:0; transition:background .2s; }
.idfex .idf-toggle::after{ content:""; position:absolute; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .2s; }
.idfex .idf-toggle.on{ background:var(--idf-primary); } .idfex .idf-toggle.on::after{ left:18px; }
.idfex .idf-toggle.off{ background:var(--idf-line); } .idfex .idf-toggle.off::after{ left:2px; }

/* status chips */
.idfex .idf-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.idfex .idf-chip-pass{ background:var(--idf-green-soft); color:var(--idf-green-700); }
.idfex .idf-chip-warn{ background:var(--idf-amber-bg); color:var(--idf-amber-tx); }
.idfex .idf-chip-fail{ background:var(--idf-error-bg); color:var(--idf-error-tx); }

/* ---- scan / pop animations ---- */
.idfex .idf-pop{ opacity:0; transform:scale(.5); }
@keyframes idf-popIn{ to{ opacity:1; transform:scale(1);} }
.idfex .idf-hero-scan{ position:absolute; left:0; right:0; height:100%; opacity:0; background:linear-gradient(to bottom,transparent,rgba(19,236,128,.12) 50%,var(--idf-primary) 100%); border-bottom:2px solid var(--idf-primary); transform:translateY(-100%); z-index:20; pointer-events:none; }
.idfex .idf-hero-scan.scanning{ animation:idf-heroScan 1.5s ease-in-out; }
@keyframes idf-heroScan{ 0%{transform:translateY(-100%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(100%);opacity:0} }
@keyframes idf-scan{ 0%{top:-100%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }
.idfex .idf-scanline{ animation:idf-scan 2s linear infinite; }

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

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

/* ---- stat cards ---- */
.idfex .idf-stat{ position:relative; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.idfex .idf-stat:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.18); }
.idfex .idf-stat-ico{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--idf-green-soft); border:1px solid var(--idf-green-line); color:var(--idf-green); }
.idfex .idf-stat-ico .material-symbols-outlined{ font-size:24px; }
.idfex .idf-stat-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--idf-muted); }
.idfex .idf-stat-num{ display:flex; align-items:flex-end; font-weight:800; letter-spacing:-.025em; color:var(--idf-ink); line-height:.92; font-size:clamp(52px,5vw,66px); }
.idfex .idf-stat-pre,.idfex .idf-stat-suffix{ color:var(--idf-green); }
.idfex .idf-stat-suffix{ font-size:.62em; margin-left:2px; }
.idfex .idf-stat-pre{ font-size:.7em; margin-right:2px; }
.idfex .idf-stat-wm{ position:absolute; right:-14px; bottom:-26px; font-size:140px; line-height:1; color:var(--idf-green); opacity:.05; pointer-events:none; user-select:none; }

/* reveal on scroll */
.idfex .idf-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
/* hidden state is gated on a class the JS adds to <html> -- if the script never runs, content stays visible */
html.idf-anim .idfex .idf-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.idfex .idf-reveal.in{ opacity:1; transform:none; }
.idfex .idf-reveal.d1{ transition-delay:.08s } .idfex .idf-reveal.d2{ transition-delay:.16s } .idfex .idf-reveal.d3{ transition-delay:.24s }

@media (prefers-reduced-motion: reduce){
  .idfex *,.idfex .idf-scanline{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}


/* ====================== Caspar ====================== */
/* ============================================================================
   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); }
.caspar .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%); }
.caspar.cs-hero-mesh, .caspar .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)} }

/* ---- 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,.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{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
/* hidden state is gated on a class the JS adds to <html> -- if the script never runs, content stays visible */
html.cs-anim .caspar .cs-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.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; }
  .caspar .cs-report{ opacity:1!important; transform:none!important; }
}


/* ====================== Insiight ====================== */
/* ============================================================================
   INSIIGHT — Datawash / Data-Enrichment platform — section styles
   Aligned to the Global Data "Emerald" system used across ADC, Caspar, IDfex,
   ID Pass and WatchEye.
   Canonical tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Insiight brand secondary: a restrained BLUE (#2f6fed) used sparingly as a
   co-accent (logo, links, the portal "Start new order" button), never as the
   dominant colour.
   Font: Manrope / Icons: Material Symbols Outlined
   Authentic Insiight product chrome (white top bar, green wordmark, green active
   tab, blue primary button, light-grey workspace) is preserved ONLY inside the
   device mockups — sampled from the real Insiight portal screenshots.
   Scoped under .ins so it can be enqueued alongside the ACF template safely.
   ============================================================================ */

.ins{
  --in-primary:#13ec80;        /* bright accent — fills, dots, glows, button bg */
  --in-primary-dark:#0eb561;   /* hover */
  --in-green:#047857;          /* accessible green text */
  --in-green-700:#065f46;
  --in-green-soft:#ecfdf5;     /* emerald-50 tint */
  --in-green-line:#a7f3d0;     /* emerald-200 */
  --in-ink:#0f172a;            /* slate-900 headings */
  --in-body:#475569;           /* slate-600 body */
  --in-muted:#64748b;          /* slate-500 */
  --in-faint:#94a3b8;          /* slate-400 */
  --in-line:#e2e8f0;           /* slate-200 */
  --in-line-soft:#eef2f7;
  --in-surface:#ffffff;
  --in-surface-2:#f8fafc;      /* slate-50 */
  --in-surface-3:#f1f5f9;      /* slate-100 */
  /* Insiight blue secondary */
  --in-blue:#2f6fed;
  --in-blue-soft:#eef4ff;
  --in-blue-line:#cdddff;
  /* authentic Insiight product chrome (from real portal screenshots) */
  --in-brand-green:#1aa35c;    /* dashboard active-tab / Insiight wordmark green */
  --in-brand-blue:#3b82f6;     /* portal "Start new order" button blue */
  --in-brand-blue-d:#2563eb;
  --in-brand-link:#2f6fed;     /* portal link blue (tab text, order numbers) */
  --in-portal-bg:#eef1f5;      /* light-grey portal workspace */
  --in-info-soft:#e9f5ee;      /* green info banner (Load new file) */
  --in-info-line:#c9ead6;
}

/* ---- glass + shadows ---- */
.ins .in-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.ins .in-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.ins .in-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.ins.in-hero-mesh, .ins .in-hero-mesh{ background-color:#fff; background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 96% 6%,rgba(47,111,237,.08),transparent 42%); }

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

/* ---- buttons (system: bright green bg, dark text) ---- */
.ins .in-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; }
.ins .in-btn .material-symbols-outlined{ font-size:18px; }
.ins .in-btn-primary{ background:var(--in-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.ins .in-btn-primary:hover{ background:var(--in-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.ins .in-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--in-line); color:var(--in-green-700); }
.ins .in-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.ins .in-btn-dark{ background:#0b1220; color:#fff; }
.ins .in-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }
.ins .in-btn-on-dark{ background:#fff; color:#06281a; }
.ins .in-btn-on-dark:hover{ background:var(--in-primary); transform:translateY(-2px); }
.ins .in-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.ins .in-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* ---- generic cards ---- */
.ins .in-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; }
.ins .in-card-hover:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.16); }
.ins .in-ico{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--in-green-soft); border:1px solid var(--in-green-line); color:var(--in-green); }
.ins .in-ico .material-symbols-outlined{ font-size:26px; }
.ins .in-ico-sm{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--in-green-soft); border:1px solid var(--in-green-line); color:var(--in-green); }
.ins .in-ico-sm .material-symbols-outlined{ font-size:23px; }
/* blue-accent icon tile variant (used sparingly for Insiight-secondary moments) */
.ins .in-ico.is-blue, .ins .in-ico-sm.is-blue{ background:var(--in-blue-soft); border-color:var(--in-blue-line); color:var(--in-blue); }

/* ---- chips / status ---- */
.ins .in-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.ins .in-chip-pass{ background:var(--in-green-soft); color:var(--in-green-700); }
.ins .in-chip-info{ background:rgba(47,111,237,.10); color:var(--in-brand-link); }
.ins .in-chip-warn{ background:#fef3c7; color:#b45309; }

/* ============================================================================
   AUTHENTIC INSIIGHT PRODUCT CHROME — only inside device mockups
   (white top bar, green wordmark, green active tab + ghost inactive tab,
   light-grey workspace, blue "Start new order" button, blue-grey table heads)
   ============================================================================ */
.ins .in-portal{ background:var(--in-portal-bg); }
.ins .in-topbar{ background:#ffffff; color:var(--in-ink); border-bottom:1px solid var(--in-line); }
.ins .in-wordmark{ font-weight:800; letter-spacing:-.01em; color:var(--in-brand-green); }
.ins .in-tab{ color:var(--in-brand-green); font-weight:600; border-radius:8px; white-space:nowrap; border:1px solid var(--in-line); background:#fff; display:inline-flex; align-items:center; gap:5px; }
.ins .in-tab.active{ background:var(--in-brand-green); color:#fff; border-color:var(--in-brand-green); box-shadow:0 2px 6px rgba(26,163,92,.3); }

/* small Insiight logo lockup (hex mark + wordmark) on the right of the top bar */
.ins .in-lockup{ display:flex; align-items:center; gap:6px; }
.ins .in-lockup .in-lk-hex{ width:20px; height:20px; color:var(--in-brand-green); }
.ins .in-lockup .in-lk-main{ font-size:13px; font-weight:800; line-height:1; letter-spacing:-.01em; color:var(--in-brand-green); }
.ins .in-lockup .in-lk-main .bl{ color:var(--in-blue); }

/* portal primary button (blue, like "Start new order") */
.ins .in-portal-btn{ background:var(--in-brand-blue); color:#fff; border:none; }
.ins .in-portal-btn:hover{ background:var(--in-brand-blue-d); }
/* portal table heads */
.ins .in-th{ background:#e8eef6; color:#3f5673; font-size:9px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
/* green info banner ("Load new file") */
.ins .in-info-banner{ background:var(--in-info-soft); border:1px solid var(--in-info-line); }
/* portal search input */
.ins .in-portal-input{ border:1px solid var(--in-line); border-radius:6px; padding:8px 11px; font-size:13px; width:100%; background:#fff; color:var(--in-ink); outline:none; }
.ins .in-portal-input:focus{ border-color:var(--in-brand-blue); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.ins .in-portal-label{ font-size:11px; color:var(--in-brand-green); margin-bottom:4px; display:block; font-weight:600; }

/* ---- datawash: enrichment option toggle (ticks on during the hero loop) ---- */
.ins .in-opt{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; border:1px solid var(--in-line); background:#fff; transition:all .3s ease; }
.ins .in-opt .in-opt-box{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--in-line); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s ease; flex:none; }
.ins .in-opt .in-opt-box .material-symbols-outlined{ font-size:12px; opacity:0; transform:scale(.4); transition:all .25s ease; font-variation-settings:'wght' 700; }
.ins .in-opt .in-opt-ico{ font-size:15px; color:var(--in-muted); transition:color .25s ease; }
.ins .in-opt .in-opt-name{ font-size:10.5px; font-weight:600; color:var(--in-muted); transition:color .25s ease; }
.ins .in-opt.is-on{ border-color:var(--in-green-line); background:var(--in-green-soft); }
.ins .in-opt.is-on .in-opt-box{ background:var(--in-primary); border-color:var(--in-primary); }
.ins .in-opt.is-on .in-opt-box .material-symbols-outlined{ opacity:1; transform:scale(1); }
.ins .in-opt.is-on .in-opt-ico{ color:var(--in-green); }
.ins .in-opt.is-on .in-opt-name{ color:var(--in-green-700); }

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

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

/* ---- count-up stat ---- */
.ins .in-stat-num{ font-weight:800; letter-spacing:-.025em; color:var(--in-primary); line-height:.92; }

/* ---- data-point grid card ---- */
.ins .in-data-card{ display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--in-line); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ins .in-data-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(15,23,42,.18); border-color:var(--in-green-line); }
.ins .in-data-card .in-data-ico{ width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--in-green-soft); border:1px solid var(--in-green-line); color:var(--in-green); }
.ins .in-data-card .in-data-ico .material-symbols-outlined{ font-size:21px; }

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

/* ---- faq ---- */
.ins .in-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); }
.ins .in-faq summary::-webkit-details-marker{ display:none; }
.ins .in-faq summary{ list-style:none; }
.ins .in-faq[open] .in-faq-plus{ transform:rotate(45deg); }

/* ============================================================================
   PORTAL CHROME PRIMITIVES — faithful recreations of real Insiight screens
   (top nav buttons, breadcrumb, configure sub-tabs, checkbox option rows,
   Order Cost table, Order Progress stepper). Used only inside device mockups.
   ============================================================================ */
/* top nav buttons — "Overview" (ghost) + "Orders" (green) like the real header */
.ins .in-navbtn{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:5px 10px; border-radius:8px; background:#fff; border:1px solid var(--in-line); color:var(--in-body); white-space:nowrap; }
.ins .in-navbtn.is-active{ background:var(--in-brand-green); border-color:var(--in-brand-green); color:#fff; box-shadow:0 2px 6px rgba(26,163,92,.3); }
.ins .in-navbtn .material-symbols-outlined{ font-size:13px; }

/* portal breadcrumb (clipboard · order no › page title, blue) */
.ins .in-crumb{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--in-brand-link); }
.ins .in-crumb .in-crumb-sep{ color:var(--in-faint); font-weight:600; }
.ins .in-crumb .in-crumb-here{ color:var(--in-ink); }
.ins .in-crumb .material-symbols-outlined{ font-size:14px; }

/* green "Select Order Options" / info heading inside a banner */
.ins .in-bannertitle{ font-size:10.5px; font-weight:800; color:var(--in-green-700); }
.ins .in-bannertext{ font-size:9px; color:var(--in-green); line-height:1.45; }

/* configure sub-tabs (Phone check / Enhance / …) */
.ins .in-subtabs{ display:flex; flex-wrap:wrap; gap:1px; border-bottom:1px solid var(--in-line); }
.ins .in-subtab{ display:inline-flex; align-items:center; font-size:9px; font-weight:700; color:var(--in-brand-link); padding:6px 7px; border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; white-space:nowrap; }
.ins .in-subtab.is-active{ background:#fff; border-color:var(--in-line); color:var(--in-ink); position:relative; top:1px; }
.ins .in-subtab .in-subtab-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:13px; height:13px; padding:0 3px; margin-left:4px; border-radius:100px; background:var(--in-surface-3); color:var(--in-muted); font-size:8px; font-weight:800; }
/* On phones the mockup is narrow: keep the sub-tabs on a single row that scrolls
   inside the card instead of wrapping / spilling past the rounded edge. */
@media (max-width:1023px){
  .ins .in-subtabs{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .ins .in-subtabs::-webkit-scrollbar{ display:none; }
  .ins .in-subtab{ flex:0 0 auto; }
}

/* checkbox option rows (real configure checklist) */
.ins .in-checkrow{ display:flex; align-items:flex-start; gap:8px; padding:7px 3px; }
.ins .in-checkrow + .in-checkrow{ border-top:1px solid var(--in-line-soft); }
.ins .in-checkbox{ width:15px; height:15px; border-radius:4px; border:1.5px solid var(--in-faint); flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s ease; }
.ins .in-checkbox .material-symbols-outlined{ font-size:11px; opacity:0; transform:scale(.4); transition:all .25s ease; font-variation-settings:'wght' 700; }
.ins .in-checkrow.is-on .in-checkbox{ background:var(--in-brand-blue); border-color:var(--in-brand-blue); }
.ins .in-checkrow.is-on .in-checkbox .material-symbols-outlined{ opacity:1; transform:scale(1); }
.ins .in-checkrow .in-check-title{ font-size:10px; font-weight:700; color:var(--in-ink); line-height:1.3; }
.ins .in-checkrow .in-check-sub{ font-size:9px; font-weight:600; color:var(--in-faint); }
.ins .in-checkrow .in-check-desc{ font-size:8.5px; color:var(--in-muted); line-height:1.4; margin-top:1px; }

/* Order Cost panel (real configure right rail) */
.ins .in-cost{ width:100%; font-size:9px; border-collapse:collapse; }
.ins .in-cost thead th{ color:var(--in-brand-link); font-weight:800; text-align:right; padding:4px 6px; border-bottom:1px solid var(--in-line); white-space:nowrap; }
.ins .in-cost thead th:first-child{ text-align:left; }
.ins .in-cost td{ padding:5px 6px; text-align:right; color:var(--in-body); border-bottom:1px solid var(--in-line-soft); }
.ins .in-cost td:first-child{ text-align:left; }
.ins .in-cost .in-cost-tot td{ font-style:italic; color:var(--in-muted); }
.ins .in-cost .in-cost-pay td{ font-style:italic; font-weight:800; color:var(--in-ink); }

/* Order Progress stepper (vertical) */
.ins .in-stepper{ display:flex; flex-direction:column; }
.ins .in-snode{ display:flex; gap:9px; }
.ins .in-srail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.ins .in-sdot{ width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; border:2px solid var(--in-line); background:#fff; }
.ins .in-sdot .material-symbols-outlined{ font-size:11px; color:#fff; }
.ins .in-sline{ width:2px; flex:1; min-height:8px; background:var(--in-line); margin:2px 0; }
.ins .in-snode.is-done .in-sdot{ background:var(--in-brand-link); border-color:var(--in-brand-link); }
.ins .in-snode.is-done .in-sline{ background:var(--in-brand-link); }
.ins .in-snode.is-current .in-sdot{ border-color:var(--in-brand-link); }
.ins .in-snode.is-current .in-sdot .in-spip{ width:7px; height:7px; border-radius:50%; background:var(--in-brand-link); }
.ins .in-snode .in-sbody{ padding-bottom:11px; }
.ins .in-snode .in-stitle{ font-size:9.5px; font-weight:700; color:var(--in-ink); line-height:1.2; }
.ins .in-snode .in-sdesc{ font-size:8px; color:var(--in-faint); margin-top:1px; }
.ins .in-snode.is-todo .in-stitle{ color:var(--in-faint); }

/* faux select (Field Type / Order approval dropdowns) */
.ins .in-fselect{ display:flex; align-items:center; justify-content:space-between; gap:6px; background:#fff; border:1px solid var(--in-line); border-radius:6px; padding:5px 8px; font-size:9px; font-weight:600; color:var(--in-ink); }
.ins .in-fselect .material-symbols-outlined{ font-size:13px; color:var(--in-faint); }
.ins .in-fselect.is-ph{ color:var(--in-faint); font-weight:500; }

/* mini IER bar chart (Summary screen) */
.ins .in-chart{ display:flex; align-items:flex-end; gap:3px; height:54px; }
.ins .in-chart .in-bar{ flex:1; background:var(--in-brand-green); border-radius:2px 2px 0 0; opacity:.92; }

/* Reduced motion: neutralise only the page-level scroll reveal and the
   decorative looping pulse. The product-demo mockups (hero datawash + dashboard)
   still play — their motion is limited to opacity, progress bars and number
   counts, which are low-risk for motion sensitivity. */
@media (prefers-reduced-motion: reduce){
  .ins .in-reveal{ opacity:1!important; transform:none!important; }
  .ins .in-badge .in-dot{ animation:none!important; }
  .ins .in-stat-num{ /* count-ups still run; no transform involved */ }
}

/* ============================================================================
   MOBILE — keep the device-mockup chrome (hero "new order" + Orders dashboard)
   inside its frame on phone-width screens. The mockups carry fixed-size product
   chrome (top-bar tabs, a 5-column orders table, enrichment option pills) that
   was sized for the wide desktop frame; below the lg breakpoint the frame goes
   full-width and shrinks to the phone, so we tighten that chrome here so nothing
   spills past or gets clipped by the card.
   ============================================================================ */
@media (max-width: 639px){
  /* mock browser top bar — drop the secondary (inactive) nav chip so the bar
     never crowds the wordmark + lockup at phone width */
  .ins .in-topbar .in-navbtn:not(.is-active){ display:none; }

  /* enrichment option pills — let long labels shrink/wrap instead of pushing
     past the pill edge (flex items default to min-width:auto and won't shrink) */
  .ins .in-opt{ min-width:0; }
  .ins .in-opt .in-opt-ico{ flex:none; }
  .ins .in-opt .in-opt-name{ min-width:0; line-height:1.2; overflow-wrap:anywhere; }

  /* Orders table — fit 5 columns into a phone-width frame: tighten cell padding
     and type, hide the low-value "Created" date column (widest, nowrap dates),
     and cap the File-name column so it truncates rather than forcing width */
  .ins .in-portal table{ font-size:9px; }
  .ins .in-portal thead th,
  .ins .in-portal tbody td{ padding:5px 4px; }
  .ins .in-portal thead th:first-child,
  .ins .in-portal tbody td:first-child{ display:none; }
  .ins .in-portal td.truncate{ max-width:64px; }
  .ins .in-portal .in-chip{ padding:3px 6px; }
}


/* ====================== ADC ====================== */
/* ============================================================================
   AUSTRALIAN DEATH CHECK (ADC) -- section styles
   Aligned to the Global Data "Emerald" system used across the home, Caspar,
   IDfex, ID Pass and WatchEye pages.
   Canonical tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Font: Manrope / Icons: Material Symbols Outlined
   The authentic ADC product chrome (white top bar, ADC green wordmark, green
   active tab, blue Search button, RED information icon) is preserved ONLY inside
   the device mockups -- sampled from the real ADC portal screenshots.
   Scoped under .adc so it can be enqueued alongside the ACF template safely.
   ============================================================================ */

.adc{
  --ad-primary:#13ec80;        /* bright accent -- fills, dots, glows, button bg */
  --ad-primary-dark:#0eb561;   /* hover */
  --ad-green:#047857;          /* accessible green text */
  --ad-green-700:#065f46;
  --ad-green-soft:#ecfdf5;     /* emerald-50 tint */
  --ad-green-line:#a7f3d0;     /* emerald-200 */
  --ad-ink:#0f172a;            /* slate-900 headings */
  --ad-body:#475569;           /* slate-600 body */
  --ad-muted:#64748b;          /* slate-500 */
  --ad-faint:#94a3b8;          /* slate-400 */
  --ad-line:#e2e8f0;           /* slate-200 */
  --ad-line-soft:#eef2f7;
  --ad-surface:#ffffff;
  --ad-surface-2:#f8fafc;      /* slate-50 */
  --ad-surface-3:#f1f5f9;      /* slate-100 */
  /* authentic ADC product chrome (from real portal screenshots) */
  --ad-brand-green:#1aa35c;    /* dashboard active-tab / ADC wordmark green */
  --ad-brand-blue:#3b82f6;     /* portal Search button blue */
  --ad-brand-blue-d:#2563eb;
  --ad-brand-link:#2f6fed;     /* portal link blue (tab text, order numbers) */
  --ad-portal-bg:#eef1f5;      /* light-grey portal workspace */
  --ad-info:#e11d48;           /* the RED info icon (per ADC user guide) */
  --ad-teal:#0f766e;           /* "Check" teal in the wordmark logo */
}

/* ---- glass + shadows ---- */
.adc .ad-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.adc .ad-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.adc .ad-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.adc.ad-hero-mesh, .adc .ad-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) ---- */
.adc .ad-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ad-green-700); background:var(--ad-green-soft);
  padding:7px 14px; border-radius:100px; border:1px solid var(--ad-green-line);
}
.adc .ad-badge .material-symbols-outlined{ font-size:15px; }
.adc .ad-badge .ad-dot{ width:7px; height:7px; border-radius:50%; background:var(--ad-primary); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:ad-pulse 1.8s infinite; }
@keyframes ad-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)} }

/* ---- buttons (system: bright green bg, dark text) ---- */
.adc .ad-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; }
.adc .ad-btn .material-symbols-outlined{ font-size:18px; }
.adc .ad-btn-primary{ background:var(--ad-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.adc .ad-btn-primary:hover{ background:var(--ad-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.adc .ad-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--ad-line); color:var(--ad-green-700); }
.adc .ad-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.adc .ad-btn-dark{ background:#0b1220; color:#fff; }
.adc .ad-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }
.adc .ad-btn-on-dark{ background:#fff; color:#06281a; }
.adc .ad-btn-on-dark:hover{ background:var(--ad-primary); transform:translateY(-2px); }
.adc .ad-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.adc .ad-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

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

/* ---- chips / status ---- */
.adc .ad-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.adc .ad-chip-pass{ background:var(--ad-green-soft); color:var(--ad-green-700); }
.adc .ad-chip-info{ background:rgba(47,111,237,.10); color:var(--ad-brand-link); }
.adc .ad-chip-warn{ background:#fef3c7; color:#b45309; }
.adc .ad-chip-match{ background:#ffe4e6; color:#be123c; }

/* ============================================================================
   AUTHENTIC ADC PRODUCT CHROME -- only inside device mockups
   (sampled from the real ADC portal: white top bar, ADC green wordmark, green
   active tab + blue inactive tabs, light-grey workspace, blue Search button,
   RED information icon per the user guide)
   ============================================================================ */
.adc .ad-portal{ background:var(--ad-portal-bg); }
.adc .ad-topbar{ background:#ffffff; color:var(--ad-ink); border-bottom:1px solid var(--ad-line); }
.adc .ad-wordmark{ font-weight:800; letter-spacing:-.01em; color:var(--ad-brand-green); }
.adc .ad-tab{ color:var(--ad-brand-link); font-weight:600; border-radius:8px; white-space:nowrap; border:1px solid var(--ad-line); background:#fff; display:inline-flex; align-items:center; gap:5px; }
.adc .ad-tab.active{ background:var(--ad-brand-green); color:#fff; border-color:var(--ad-brand-green); box-shadow:0 2px 6px rgba(26,163,92,.3); }
/* small wordmark lockup used on the right of the portal top bar */
.adc .ad-lockup{ display:flex; align-items:center; gap:6px; }
.adc .ad-lockup .ad-lk-check{ width:22px; height:22px; border-radius:50%; border:2px solid var(--ad-teal); display:flex; align-items:center; justify-content:center; color:var(--ad-teal); }
.adc .ad-lockup .ad-lk-check .material-symbols-outlined{ font-size:15px; font-variation-settings:'wght' 700; }
.adc .ad-lockup .ad-lk-sup{ font-size:7px; letter-spacing:.16em; font-weight:700; color:var(--ad-muted); line-height:1; }
.adc .ad-lockup .ad-lk-main{ font-size:13px; font-weight:800; line-height:1; color:var(--ad-ink); }
.adc .ad-lockup .ad-lk-main .tl{ color:var(--ad-teal); }

/* RED info icon (ADC's signature) */
.adc .ad-info{ width:18px; height:18px; border-radius:50%; background:var(--ad-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(225,29,72,.4); flex:none; }
.adc .ad-info.lg{ width:22px; height:22px; font-size:13px; }

/* portal buttons inside mockups */
.adc .ad-search-btn{ background:var(--ad-brand-blue); color:#fff; }
.adc .ad-load-btn{ background:var(--ad-brand-blue); color:#fff; }
.adc .ad-th{ background:#e8eef6; color:#3f5673; font-size:9px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.adc .ad-info-banner{ background:#e9f5ee; border:1px solid #c9ead6; }

/* portal form bits inside mockups */
.adc .ad-portal-input{ border:1px solid var(--ad-line); border-radius:6px; padding:8px 11px; font-size:13px; width:100%; background:#fff; color:var(--ad-ink); outline:none; }
.adc .ad-portal-input:focus{ border-color:var(--ad-brand-blue); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.adc .ad-portal-label{ font-size:11px; color:var(--ad-brand-link); margin-bottom:4px; display:block; font-weight:600; }

/* deceased status pills inside mockups */
.adc .ad-ping{ width:16px; height:16px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ad-line); }
.adc .ad-ping .material-symbols-outlined{ font-size:12px; }
.adc .ad-ping-clear{ background:var(--ad-green-soft); border-color:var(--ad-green-line); color:var(--ad-green); }
.adc .ad-ping-match{ background:#ffe4e6; border-color:#fecdd3; color:#be123c; }

/* ---- report swing-in panel (the red info icon -> Record Detail) ---- */
.adc .ad-report{ transform:translateX(20px); opacity:0; transition:transform .6s cubic-bezier(.22,.8,.18,1), opacity .5s ease; }
.adc .ad-report.is-in{ transform:translateX(0); opacity:1; }

/* hero scanner sweep (uses ADC red) */
.adc .ad-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(225,29,72,.08) 50%,var(--ad-info) 100%); border-bottom:2px solid var(--ad-info); transform:translateY(-100%); }
.adc .ad-hero-scan.run{ animation:ad-heroScan 1.5s ease-in-out; }
@keyframes ad-heroScan{ 0%{transform:translateY(-100%);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(100%);opacity:0} }

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

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

/* count-up stat */
.adc .ad-stat-num{ font-weight:800; letter-spacing:-.025em; color:var(--ad-primary); line-height:.92; }

/* terminal */
.adc .ad-cursor{ display:inline-block; width:7px; height:13px; background:rgba(255,255,255,.7); vertical-align:middle; margin-left:3px; animation:ad-blink 1s steps(2) infinite; }
@keyframes ad-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* reveal on scroll */
.adc .ad-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
/* hidden state is gated on a class the JS adds to <html> -- if the script never runs, content stays visible */
html.ad-anim .adc .ad-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.adc .ad-reveal.in{ opacity:1; transform:none; }
.adc .ad-reveal.d1{ transition-delay:.08s } .adc .ad-reveal.d2{ transition-delay:.16s } .adc .ad-reveal.d3{ transition-delay:.24s }

/* faq */
.adc .ad-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); }
.adc .ad-faq summary::-webkit-details-marker{ display:none; }
.adc .ad-faq summary{ list-style:none; }
.adc .ad-faq[open] .ad-faq-plus{ transform:rotate(45deg); }

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


/* ====================== Quester ====================== */
/* ============================================================================
   QUESTER — Targeted B2C Marketing Lists — section styles
   Aligned to the Global Data "Emerald" system used across ADC, Caspar, IDfex,
   ID Pass, WatchEye and Insiight.
   Canonical page tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Quester brand secondary: a restrained BLUE (#2480bd) used sparingly as a
   co-accent (the quester wordmark, portal links), never as the dominant colour.
   Font: Manrope / Icons: Material Symbols Outlined
   Authentic Quester product chrome (white header, blue wordmark, dark-slate nav
   with orange active item, grey job-builder tabs + green "Review & Save Job",
   location statistics + SEIFA decile charts) is preserved ONLY inside the device
   mockups — sampled from the real Quester portal screenshots.
   Scoped under .qst so it can be enqueued alongside the ACF template safely.
   ============================================================================ */

.qst{
  --qs-primary:#13ec80;        /* bright accent — fills, dots, glows, button bg */
  --qs-primary-dark:#0eb561;   /* hover */
  --qs-green:#047857;          /* accessible green text */
  --qs-green-700:#065f46;
  --qs-green-soft:#ecfdf5;     /* emerald-50 tint */
  --qs-green-line:#a7f3d0;     /* emerald-200 */
  --qs-ink:#0f172a;            /* slate-900 headings */
  --qs-body:#475569;           /* slate-600 body */
  --qs-muted:#64748b;          /* slate-500 */
  --qs-faint:#94a3b8;          /* slate-400 */
  --qs-line:#e2e8f0;           /* slate-200 */
  --qs-line-soft:#eef2f7;
  --qs-surface:#ffffff;
  --qs-surface-2:#f8fafc;      /* slate-50 */
  --qs-surface-3:#f1f5f9;      /* slate-100 */
  /* Quester blue secondary */
  --qs-blue:#2480bd;
  --qs-blue-soft:#eaf4fb;
  --qs-blue-line:#c4e0f1;
  /* authentic Quester product chrome (from real portal screenshots) */
  --qs-brand-blue:#2480bd;     /* quester wordmark / portal links */
  --qs-brand-link:#2a7fc1;     /* portal link blue */
  --qs-nav:#41566a;            /* dark-slate top nav bar */
  --qs-nav-active:#e07a2b;     /* orange active nav item */
  --qs-tab-grey:#dadfe4;       /* inactive job-builder tab */
  --qs-tab-green:#7bbf4a;      /* "Review & Save Job" tab + action buttons */
  --qs-tab-green-d:#6aab3c;
  --qs-header-bar:#dfe3e7;     /* grey section header bar inside portal */
  --qs-header-ink:#4a5662;
  --qs-info-blue:#dce9f5;      /* light-blue info banner */
  --qs-info-blue-line:#b8d4ec;
  --qs-info-pink:#fbeceb;      /* pink "all locations included" note */
  --qs-info-pink-line:#f0d4d2;
  /* SEIFA decile chart colours */
  --qs-dec-ier:#6e8095;        /* Income & Economic Resources (slate-blue) */
  --qs-dec-sea:#82a98c;        /* Socio-Economic Advantage (sage) */
  --qs-dec-edu:#ab808a;        /* Education & Occupation (mauve) */
}

/* ---- glass + shadows ---- */
.qst .qs-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.qst .qs-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.qst .qs-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.qst.qs-hero-mesh, .qst .qs-hero-mesh{ background-color:#fff; background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 96% 6%,rgba(36,128,189,.08),transparent 42%); }

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

/* ---- buttons (system: bright green bg, dark text) ---- */
.qst .qs-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; }
.qst .qs-btn .material-symbols-outlined{ font-size:18px; }
.qst .qs-btn-primary{ background:var(--qs-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.qst .qs-btn-primary:hover{ background:var(--qs-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.qst .qs-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--qs-line); color:var(--qs-green-700); }
.qst .qs-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.qst .qs-btn-dark{ background:#0b1220; color:#fff; }
.qst .qs-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }
.qst .qs-btn-on-dark{ background:#fff; color:#06281a; }
.qst .qs-btn-on-dark:hover{ background:var(--qs-primary); transform:translateY(-2px); }
.qst .qs-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.qst .qs-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* ---- generic cards ---- */
.qst .qs-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; }
.qst .qs-card-hover:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.16); }
.qst .qs-ico{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--qs-green-soft); border:1px solid var(--qs-green-line); color:var(--qs-green); }
.qst .qs-ico .material-symbols-outlined{ font-size:26px; }
.qst .qs-ico-sm{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--qs-green-soft); border:1px solid var(--qs-green-line); color:var(--qs-green); }
.qst .qs-ico-sm .material-symbols-outlined{ font-size:23px; }
/* blue-accent icon tile variant (used sparingly for Quester-secondary moments) */
.qst .qs-ico.is-blue, .qst .qs-ico-sm.is-blue{ background:var(--qs-blue-soft); border-color:var(--qs-blue-line); color:var(--qs-blue); }

/* ---- chips / status ---- */
.qst .qs-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.qst .qs-chip-pass{ background:var(--qs-green-soft); color:var(--qs-green-700); }
.qst .qs-chip-info{ background:rgba(36,128,189,.10); color:var(--qs-brand-link); }
.qst .qs-chip-warn{ background:#fef3c7; color:#b45309; }

/* ============================================================================
   AUTHENTIC QUESTER PRODUCT CHROME — only inside device mockups
   (white header + blue quester wordmark, dark-slate nav with orange active item,
   grey job-builder tabs + green "Review & Save Job", grey section bars,
   location statistics list, SEIFA decile charts, green action buttons)
   ============================================================================ */
.qst .qs-portal{ background:#ffffff; }
.qst .qs-header{ background:#ffffff; border-bottom:1px solid var(--qs-line); }

/* quester wordmark (blue, lowercase) + bubble mark */
.qst .qs-wordmark{ display:inline-flex; align-items:flex-end; gap:1px; font-weight:800; letter-spacing:-.02em; color:var(--qs-brand-blue); line-height:1; }
.qst .qs-bubbles{ display:inline-block; position:relative; width:14px; height:12px; }
.qst .qs-bubbles i{ position:absolute; border-radius:50%; background:var(--qs-brand-blue); }
.qst .qs-bubbles i:nth-child(1){ width:5px; height:5px; left:5px; bottom:0; }
.qst .qs-bubbles i:nth-child(2){ width:4px; height:4px; left:1px; bottom:4px; opacity:.85; }
.qst .qs-bubbles i:nth-child(3){ width:3px; height:3px; left:7px; bottom:7px; opacity:.7; }

/* dark-slate top nav with orange active item */
.qst .qs-qnav{ background:var(--qs-nav); display:flex; align-items:center; gap:2px; padding:0 6px; }
.qst .qs-qnav .qs-navitem{ font-size:10px; font-weight:700; color:#dbe3ea; padding:7px 9px; white-space:nowrap; border-radius:0; }
.qst .qs-qnav .qs-navitem.is-active{ background:var(--qs-nav-active); color:#fff; }

/* job-builder tabs (Job Name / Location / … / Review & Save Job) */
.qst .qs-jtabs{ display:flex; align-items:flex-end; gap:3px; }
.qst .qs-jtab{ font-size:9.5px; font-weight:700; color:var(--qs-header-ink); background:var(--qs-tab-grey); padding:6px 9px; border-radius:5px 5px 0 0; white-space:nowrap; border:1px solid transparent; border-bottom:none; }
.qst .qs-jtab.is-active{ background:#fff; color:var(--qs-ink); border-color:var(--qs-line); position:relative; top:1px; }
.qst .qs-jtab.is-save{ background:var(--qs-tab-green); color:#fff; }

/* grey section header bar inside the portal ("Job Type", "Add a Location", …) */
.qst .qs-secbar{ background:var(--qs-header-bar); color:var(--qs-header-ink); font-size:10px; font-weight:800; padding:6px 10px; border-radius:4px; }

/* "Add a Location" pill buttons */
.qst .qs-locpill{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; color:var(--qs-header-ink); background:#fff; border:1px solid var(--qs-line); border-radius:6px; padding:5px 9px; }
.qst .qs-locpill .material-symbols-outlined{ font-size:12px; color:var(--qs-brand-link); }
.qst .qs-locpill.is-ex .material-symbols-outlined{ color:#b9636b; }

/* location-statistics list */
.qst .qs-stat{ font-size:10px; line-height:1.6; }
.qst .qs-stat .qs-stat-h{ font-size:11px; font-weight:800; color:var(--qs-ink); margin-bottom:3px; }
.qst .qs-stat .qs-stat-row{ display:flex; justify-content:space-between; gap:10px; }
.qst .qs-stat .qs-stat-k{ color:var(--qs-muted); }
.qst .qs-stat .qs-stat-v{ font-weight:700; color:var(--qs-ink); font-variant-numeric:tabular-nums; }

/* SEIFA decile mini bar charts */
.qst .qs-decile{ display:flex; align-items:flex-end; gap:2px; height:30px; }
.qst .qs-decile .qs-dbar{ flex:1; border-radius:1px 1px 0 0; opacity:.9; }
.qst .qs-decile.ier .qs-dbar{ background:var(--qs-dec-ier); }
.qst .qs-decile.sea .qs-dbar{ background:var(--qs-dec-sea); }
.qst .qs-decile.edu .qs-dbar{ background:var(--qs-dec-edu); }
.qst .qs-decile-label{ font-size:7.5px; font-style:italic; color:var(--qs-faint); letter-spacing:.02em; }

/* light-blue / pink portal notes */
.qst .qs-note-blue{ background:var(--qs-info-blue); border:1px solid var(--qs-info-blue-line); color:#2c4a63; }
.qst .qs-note-pink{ background:var(--qs-info-pink); border:1px solid var(--qs-info-pink-line); color:#8a4f54; }

/* portal action button (green "Save Job and Process Count") */
.qst .qs-portal-btn{ background:var(--qs-tab-green); color:#fff; border:none; }
.qst .qs-portal-btn:hover{ background:var(--qs-tab-green-d); }

/* portal table heads + summary rows */
.qst .qs-th{ background:#e9edf1; color:#4a5662; font-size:9px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
.qst .qs-sumrow{ background:#dbeafc; }     /* highlighted "Job Name" summary rows (blue tint) */
.qst .qs-sumrow-alt{ background:#eef2f6; } /* grey summary rows */

/* ---- targeting option pill (ticks on during the hero loop) ---- */
.qst .qs-opt{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; border:1px solid var(--qs-line); background:#fff; transition:all .3s ease; }
.qst .qs-opt .qs-opt-box{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--qs-line); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s ease; flex:none; }
.qst .qs-opt .qs-opt-box .material-symbols-outlined{ font-size:12px; opacity:0; transform:scale(.4); transition:all .25s ease; font-variation-settings:'wght' 700; }
.qst .qs-opt .qs-opt-ico{ font-size:15px; color:var(--qs-muted); transition:color .25s ease; }
.qst .qs-opt .qs-opt-name{ font-size:10.5px; font-weight:600; color:var(--qs-muted); transition:color .25s ease; }
.qst .qs-opt.is-on{ border-color:var(--qs-green-line); background:var(--qs-green-soft); }
.qst .qs-opt.is-on .qs-opt-box{ background:var(--qs-primary); border-color:var(--qs-primary); }
.qst .qs-opt.is-on .qs-opt-box .material-symbols-outlined{ opacity:1; transform:scale(1); }
.qst .qs-opt.is-on .qs-opt-ico{ color:var(--qs-green); }
.qst .qs-opt.is-on .qs-opt-name{ color:var(--qs-green-700); }

/* ---- bar / progress ---- */
.qst .qs-bar-track{ background:rgba(19,236,128,.18); border-radius:3px; overflow:hidden; }
.qst .qs-bar-fill{ height:100%; background:var(--qs-primary); transition:width .5s cubic-bezier(.2,.8,.2,1); }
/* authentic blocky "Count (Busy)" progress (square segments) */
.qst .qs-count-prog{ display:inline-flex; gap:2px; }
.qst .qs-count-prog i{ width:7px; height:13px; background:#cbd5e1; border-radius:1px; transition:background .3s ease; }
.qst .qs-count-prog i.on{ background:var(--qs-brand-blue); }

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

/* ---- count-up stat ---- */
.qst .qs-stat-num{ font-weight:800; letter-spacing:-.025em; color:var(--qs-primary); line-height:.92; }

/* ---- target / data-point grid card ---- */
.qst .qs-data-card{ display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--qs-line); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.qst .qs-data-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(15,23,42,.18); border-color:var(--qs-green-line); }
.qst .qs-data-card .qs-data-ico{ width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--qs-green-soft); border:1px solid var(--qs-green-line); color:var(--qs-green); }
.qst .qs-data-card .qs-data-ico .material-symbols-outlined{ font-size:21px; }

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

/* ---- faq ---- */
.qst .qs-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); }
.qst .qs-faq summary::-webkit-details-marker{ display:none; }
.qst .qs-faq summary{ list-style:none; }
.qst .qs-faq[open] .qs-faq-plus{ transform:rotate(45deg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .qst .qs-reveal{ opacity:1!important; transform:none!important; }
  .qst .qs-badge .qs-dot{ animation:none!important; }
}

/* ============================================================================
   MOBILE — keep device-mockup chrome inside its frame at phone width.
   ============================================================================ */
@media (max-width:1023px){
  .qst .qs-jtabs{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .qst .qs-jtabs::-webkit-scrollbar{ display:none; }
  .qst .qs-jtab{ flex:0 0 auto; }
  .qst .qs-qnav{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .qst .qs-qnav::-webkit-scrollbar{ display:none; }
  .qst .qs-qnav .qs-navitem{ flex:0 0 auto; }
}
@media (max-width:639px){
  .qst .qs-opt{ min-width:0; }
  .qst .qs-opt .qs-opt-ico{ flex:none; }
  .qst .qs-opt .qs-opt-name{ min-width:0; line-height:1.2; overflow-wrap:anywhere; }
  .qst .qs-portal table{ font-size:9px; }
  .qst .qs-portal thead th, .qst .qs-portal tbody td{ padding:5px 4px; }
  .qst .qs-portal td.truncate{ max-width:70px; }
}