/* ============================================================================
   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); }

/* 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 */ }
}