/* ============================================================================
   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: transform 0.3s ease, opacity 0.3s ease; }

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

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

.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);
}

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

  .ins .in-subtabs {
 	overflow-x:clip;

  }

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