/* ============================================================================
   Global Data Portal — section styles (aligned to flexible-content.php system)
   Canonical tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Font: Manrope · Icons: Material Symbols Outlined
   Mirrors the shared design system used by WatchEye / IDFEX / ID Pass so the
   Portal page matches the rest of the site. Scoped under .portal; shared system
   classes are prefixed pt- (a page-local copy of the flexible-content system).
   ============================================================================ */

.portal{
  --p:#13ec80; --p-dark:#0eb561;
  --green:#047857; --green-700:#065f46; --green-soft:#ecfdf5; --green-line:#a7f3d0;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f7; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --amber-bg:#fef3c7; --amber-tx:#b45309; --rose-bg:#ffe4e6; --rose-tx:#be123c;
  --violet:#7c3aed; --deep:#06281a;
}
.portal .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  width:1em; height:1em; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; }

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

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

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

/* ---- capability pills (per product) ---- */
.portal .pt-pills{ display:flex; flex-wrap:wrap; gap:7px; }
.portal .pt-cap{ font-size:11.5px; font-weight:700; color:var(--green-700); background:var(--green-soft);
  border:1px solid var(--green-line); border-radius:100px; padding:5px 11px; }
.portal .pt-prod-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--green-700); transition:gap .2s; }
.portal .pt-prod-link .material-symbols-outlined{ font-size:18px; }
.portal .pt-prod:hover .pt-prod-link{ gap:10px; }
.portal .pt-prod-logo{ width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center; flex:none;
  background:#fff; border:1px solid var(--line); box-shadow:0 2px 6px rgba(15,23,42,.05); overflow:hidden; }
.portal .pt-prod-logo .material-symbols-outlined{ font-size:26px; }
.portal .pt-prod-logo img{ width:100%; height:100%; object-fit:contain; padding:9px; }

/* ============================================================================
   Portal dashboard mockup — faithful to the real Global Data Portal app:
   navy top bar · white product sidebar (Home active) · greeting + breadcrumb ·
   news-feed notice · "Account / Products enabled" panel. No invented metrics.
   ============================================================================ */
.portal .dash{ border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.portal .dash-bar{ background:#1e4f91; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 13px; height:40px; }
.portal .dash-bar .db-l{ display:flex; align-items:center; gap:10px; }
.portal .dash-bar .db-logo{ font-weight:800; font-size:12.5px; letter-spacing:.02em; }
.portal .dash-bar .db-logo-img{ height:14px; width:auto; display:block; }
.portal .dash-bar .db-r{ display:flex; align-items:center; gap:11px; }
.portal .dash-bar .db-user{ display:flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700; }
.portal .dash-bar .material-symbols-outlined{ font-size:17px; color:rgba(255,255,255,.92); }
.portal .dash-body{ display:grid; grid-template-columns:134px 1fr; }
.portal .dash-nav{ background:linear-gradient(180deg,#2f80c4 0%,#1e4f91 48%,#123a72 100%); padding:11px 9px; display:flex; flex-direction:column; gap:3px; }
.portal .dash-nav .di{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; color:rgba(255,255,255,.85); font-size:12px; font-weight:600; }
.portal .dash-nav .di .material-symbols-outlined{ font-size:17px; color:rgba(255,255,255,.7); }
.portal .dash-nav .dn-logo{ margin-top:auto; padding:14px 4px 4px; }
.portal .dash-nav .dn-logo img{ height:13px; width:auto; display:block; opacity:.92; }
.portal .dash-nav .di.on{ background:var(--p); color:#06281a; font-weight:700; }
.portal .dash-nav .di.on .material-symbols-outlined{ color:#06281a; }
.portal .dash-content{ padding:15px 16px; background:var(--surface-2); }
.portal .dash-hi{ margin-bottom:12px; }
.portal .dash-hi b{ display:block; font-size:14px; color:var(--green); font-weight:800; }
.portal .dash-hi span{ font-size:11px; color:var(--muted); font-weight:600; }
.portal .dash-note{ background:#fff; border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:12px; }
.portal .dash-note .nh{ background:var(--green); color:#fff; padding:9px 13px; }
.portal .dash-note .nh b{ display:block; font-size:12px; font-weight:800; }
.portal .dash-note .nh span{ font-size:10px; opacity:.85; }
.portal .dash-note .nb{ padding:10px 13px; font-size:11.5px; line-height:1.5; color:var(--body); }
.portal .dash-acct{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:13px; }
.portal .dash-acct .ah b{ display:block; font-size:12.5px; font-weight:800; color:var(--ink); }
.portal .dash-acct .ah span{ font-size:10.5px; color:var(--muted); }
.portal .dash-acct .arow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line-soft); }
.portal .dash-acct .al{ font-size:11px; color:var(--muted); font-weight:600; }
.portal .dash-acct .av{ font-size:12px; color:var(--ink); font-weight:700; }
.portal .dash-acct .apills{ display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.portal .dash-acct .apill{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink); font-weight:600; }
.portal .dash-acct .apill .material-symbols-outlined{ font-size:15px; color:var(--green); }
@media (max-width:520px){ .portal .dash-body{ grid-template-columns:1fr; } .portal .dash-nav{ display:none; } }

/* ---- checklist ---- */
.portal .pt-checks{ display:grid; gap:11px; }
.portal .pt-checks li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink); font-weight:600; }
.portal .pt-checks .tk{ width:23px; height:23px; border-radius:7px; background:var(--green-soft); border:1px solid var(--green-line);
  color:var(--green); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.portal .pt-checks .tk .material-symbols-outlined{ font-size:16px; }

/* ---- steps (how access works) ---- */
.portal .pt-step .sn{ width:38px; height:38px; border-radius:11px; background:var(--ink); color:var(--p);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; }

/* ============================================================================
   Sign-up form
   ============================================================================ */
.portal .pt-fld{ margin-bottom:13px; }
.portal .pt-fld label{ display:block; font-size:12.5px; font-weight:600; color:var(--body); margin-bottom:5px; }
.portal .pt-fld .req{ color:var(--rose-tx); }
.portal .pt-ipt{ width:100%; border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-family:inherit;
  font-size:14.5px; color:var(--ink); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; }
.portal .pt-ipt:focus{ border-color:var(--p); box-shadow:0 0 0 3px rgba(19,236,128,.18); }
.portal .pt-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .portal .pt-grid-2{ grid-template-columns:1fr; } }
.portal .pt-fld.err .pt-ipt{ border-color:var(--rose-tx); box-shadow:0 0 0 3px rgba(190,18,60,.12); }
.portal .pt-err{ display:none; color:var(--rose-tx); font-size:11.5px; margin-top:4px; font-weight:600; }
.portal .pt-fld.err .pt-err{ display:block; }
.portal .pt-pick{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media (max-width:420px){ .portal .pt-pick{ grid-template-columns:1fr; } }
.portal .pt-pick label{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink); transition:.15s; background:#fff; }
.portal .pt-pick label:hover{ border-color:var(--green-line); background:var(--green-soft); }
.portal .pt-pick input{ accent-color:var(--green); width:16px; height:16px; flex:none; }
.portal .pt-pick label:has(input:checked){ border-color:var(--p); background:var(--green-soft); }
.portal .pt-form-fine{ font-size:11.5px; color:var(--muted); margin-top:10px; display:flex; align-items:flex-start; gap:6px; }
.portal .pt-form-fine .material-symbols-outlined{ font-size:15px; color:var(--green); margin-top:1px; }
.portal .pt-form-ok{ display:none; text-align:center; padding:22px 8px; }
.portal .pt-form-ok .material-symbols-outlined{ font-size:48px; color:var(--green); }
.portal form.sent .pt-form-body{ display:none; }
.portal form.sent .pt-form-ok{ display:block; }

/* ---- reveal on scroll (gated on JS; shows end-state if script never runs) ---- */
.portal .pt-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.pt-anim .portal .pt-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.portal .pt-reveal.in{ opacity:1; transform:none; }
.portal .pt-reveal.d1{ transition-delay:.08s } .portal .pt-reveal.d2{ transition-delay:.16s } .portal .pt-reveal.d3{ transition-delay:.24s }

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

/* ============================================================================
   Product mockups (products section) — shared browser/app frame in the system
   style, one compact screen per product. Plus reveal-triggered animations.
   ============================================================================ */
.portal .pmock{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; position:relative;
  box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.portal .pmock-bar{ height:34px; background:var(--surface-3); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 12px; }
.portal .pmock-bar i{ width:9px; height:9px; border-radius:50%; background:#cbd5e1; flex:none; }
.portal .pmock-bar .lbl{ margin-left:8px; font-size:11px; font-weight:700; color:var(--muted); }
.portal .pmock-screen{ padding:14px; background:var(--surface-2); position:relative; overflow:hidden; }
.portal .pm-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
.portal .pm-card + .pm-card{ margin-top:9px; }
.portal .pm-h{ font-size:12px; font-weight:800; color:var(--ink); margin-bottom:9px; display:flex; align-items:center; gap:6px; }
.portal .pm-h .material-symbols-outlined{ font-size:15px; color:var(--green); }
.portal .pm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
.portal .pm-row + .pm-row{ margin-top:8px; }
.portal .pm-label{ color:var(--body); }
.portal .pm-val{ color:var(--ink); font-weight:700; font-size:11.5px; }
.portal .pm-tick{ color:var(--green); font-size:17px; font-variation-settings:'FILL' 1; }
.portal .pm-avatar{ width:36px; height:36px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--muted); font-size:12px; flex:none; }
.portal .pm-id{ display:flex; align-items:center; gap:10px; }
.portal .pm-bar{ height:7px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.portal .pm-bar i{ display:block; height:100%; background:var(--p); border-radius:4px; width:0; }
.portal .pt-reveal.in .pm-bar i{ animation:pm-fill 1s cubic-bezier(.2,.8,.2,1) .3s forwards; }
@keyframes pm-fill{ to{ width:var(--w,90%); } }
.portal .pm-strike{ text-decoration:line-through; color:var(--faint); }
.portal .pm-add{ color:var(--green); font-weight:700; }
.portal .pm-filter{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink); background:var(--green-soft); border:1px solid var(--green-line); border-radius:8px; padding:6px 10px; font-weight:600; }
.portal .pm-filter .material-symbols-outlined{ font-size:14px; color:var(--green); }
/* phone frame (ID Pass) */
.portal .pmock-phone{ width:172px; margin:4px auto; border:7px solid #0f172a; border-radius:24px; overflow:hidden; background:#0f172a; box-shadow:0 25px 50px -12px rgba(15,23,42,.3); }
.portal .pmock-phone .pscr{ background:#fff; }
.portal .pmock-phone .ptop{ background:#1e4f91; color:#fff; font-size:10px; font-weight:700; text-align:center; padding:7px; }
.portal .pmock-phone .pbody{ padding:12px; background:var(--surface-2); }

/* tick pop-in sequence (runs when the mockup is revealed) */
.portal .pm-pop{ opacity:0; transform:scale(.5); }
.portal .pt-reveal.in .pm-pop{ animation:pm-pop .45s cubic-bezier(.175,.885,.32,1.275) forwards; }
.portal .pm-pop.s1{ animation-delay:.35s } .portal .pm-pop.s2{ animation-delay:.6s } .portal .pm-pop.s3{ animation-delay:.85s } .portal .pm-pop.s4{ animation-delay:1.1s }
@keyframes pm-pop{ to{ opacity:1; transform:scale(1); } }

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