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


h1 span {
        background:linear-gradient(90deg,#13ec80,#0ea35e); -webkit-background-clip:text;
        -webkit-text-fill-color:transparent; background-clip:text; color:transparent;
       }


/* ---- 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%); }
.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{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.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; }
}