/* ============================================================================
   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:8px; }
.portal .pt-cap{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#1e293b;
  background:#fff; border:1px solid #cbd5e1; border-radius:100px; padding:6px 13px 6px 11px;
  box-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04); transition:border-color .2s, box-shadow .2s, transform .2s, color .2s; }
.portal .pt-cap::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--p);
  box-shadow:0 0 0 3px rgba(19,236,128,.16); transition:transform .2s, box-shadow .2s; }
.portal .pt-cap:hover{ border-color:var(--green-line); color:var(--ink); transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(15,23,42,.14); }
.portal .pt-cap:hover::before{ transform:scale(1.25); box-shadow:0 0 0 4px rgba(19,236,128,.2); }

/* product category eyebrow � accent label with a small leading bar */
.portal .pt-prod-cat{ display:inline-flex; align-items:center; gap:7px; margin-top:3px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.portal .pt-prod-cat::before{ content:""; width:15px; height:2px; border-radius:2px; background:var(--p); flex:none; }

/* product "Learn more" button � branded green-soft default, bright-green hover, sliding arrow */
.portal .pt-btn-learn{ background:var(--green-soft); border-color:var(--green-line); color:var(--green-700); }
.portal .pt-btn-learn .material-symbols-outlined{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.portal .pt-btn-learn:hover{ background:var(--p); border-color:transparent; color:#06281a;
  box-shadow:0 12px 26px -10px rgba(19,236,128,.55); }
.portal .pt-btn-learn:hover .material-symbols-outlined{ transform:translateX(4px); }
.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:3rem; 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; } }

/* ---- console: clickable product nav + per-product preview panes ---- */
.portal .dash[data-switch] .dash-nav .di{ cursor:pointer; transition:background .2s, color .2s; }
.portal .dash[data-switch] .dash-nav .di:hover:not(.on){ background:rgba(255,255,255,.16); color:#fff; }
.portal .dash[data-switch] .dash-content,
.portal .dash[data-tour] .dash-content{ position:relative; min-height:322px; }
.portal .dpane{ display:none; }
.portal .dpane.on{ display:block; animation:dp-in .42s cubic-bezier(.22,.8,.2,1); }
@keyframes dp-in{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.portal .dp-hi{ margin-bottom:11px; }
.portal .dp-hi b{ display:block; font-size:14px; color:var(--green); font-weight:800; }
.portal .dp-hi span{ font-size:11px; color:var(--muted); font-weight:600; }
.portal .dp-card{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px 13px; margin-bottom:10px; }
.portal .dp-ch{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.portal .dp-ch .material-symbols-outlined{ font-size:16px; color:var(--green); }
.portal .dp-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--body); }
.portal .dp-row + .dp-row{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft); }
.portal .dp-val{ font-size:12px; font-weight:800; color:var(--ink); }
.portal .dp-tick{ font-size:17px; color:var(--green); font-variation-settings:'FILL' 1; }
.portal .dp-note{ display:flex; align-items:center; gap:7px; font-size:11px; line-height:1.4; color:var(--green-700);
  background:var(--green-soft); border:1px solid var(--green-line); border-radius:10px; padding:9px 11px; }
.portal .dp-note .material-symbols-outlined{ font-size:15px; color:var(--green); flex:none; }
.portal .dp-act{ display:flex; align-items:center; gap:9px; padding:8px 0; }
.portal .dp-act:first-of-type{ padding-top:0; }
.portal .dp-act + .dp-act{ border-top:1px solid var(--line-soft); }
.portal .dp-act > .material-symbols-outlined{ font-size:18px; flex:none; }
.portal .dp-actx{ flex:1; min-width:0; }
.portal .dp-actx b{ display:block; font-size:11.5px; font-weight:800; color:var(--ink); }
.portal .dp-actx span{ font-size:10.5px; color:var(--muted); }
.portal .c-we{ color:#7c3aed; } .portal .c-id{ color:#0891b2; } .portal .c-ad{ color:#e11d48; }
.portal .dp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.portal .dp-stat{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; }
.portal .dp-stat b{ display:block; font-size:17px; font-weight:800; color:var(--green); line-height:1.1; }
.portal .dp-stat span{ font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }

/* ---- "Inside the Portal" tour: feature cards drive the dash ---- */
.portal .pt-feat{ cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.portal .pt-feat:hover{ transform:translateY(-2px); }
.portal .pt-feat.on{ border-color:var(--p); background:var(--green-soft);
  box-shadow:0 0 0 1px var(--p) inset, 0 14px 30px -16px rgba(15,23,42,.2); }
.portal .pt-feat.on > .material-symbols-outlined{ color:var(--green-700); }

/* ---- "Inside the Portal" product-visual stage (swaps per use case) ---- */
.portal .pt-prodstage{ position:relative; min-height:452px; }
.portal .pt-prodpane{ display:none; }
.portal .pt-prodpane.on{ display:block; animation:dp-in .42s cubic-bezier(.22,.8,.2,1); }
@media (max-width:520px){ .portal .pt-prodstage{ min-height:0; } }

/* Mobile (<lg): tabs collapse into a tap-to-expand accordion. portal.js moves
   each pane inline after its card and flags the tour with .is-accordion. */
.portal .pt-tour.is-accordion > div:last-child{ display:none; }   /* empty right column */
.portal .pt-tour.is-accordion .pt-prodstage{ min-height:0; }
.portal .pt-tour.is-accordion .pt-prodpane.on{ margin-top:.6rem; }
.portal .pt-tour.is-accordion .pt-feat{ position:relative; }
.portal .pt-tour.is-accordion .pt-feat::after{
  content:'expand_more'; font-family:'Material Symbols Outlined';
  margin-left:auto; align-self:center; font-size:20px; color:#94a3b8;
  transition:transform .3s ease, color .2s; }
.portal .pt-tour.is-accordion .pt-feat.on::after{ transform:rotate(180deg); color:var(--green-700); }

.portal .dp-feed{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; }
.portal .dp-feed:first-child{ padding-top:0; }
.portal .dp-feed + .dp-feed{ border-top:1px solid var(--line-soft); }
.portal .dp-fdot{ width:7px; height:7px; border-radius:50%; background:var(--p); flex:none; margin-top:5px; box-shadow:0 0 0 3px rgba(19,236,128,.16); }
.portal .dp-fx{ flex:1; min-width:0; }
.portal .dp-fx b{ display:block; font-size:11.5px; font-weight:800; color:var(--ink); }
.portal .dp-fx span{ font-size:10.5px; color:var(--muted); }
.portal .dp-rep{ display:flex; align-items:center; gap:9px; padding:8px 0; }
.portal .dp-rep:first-child{ padding-top:0; }
.portal .dp-rep + .dp-rep{ border-top:1px solid var(--line-soft); }
.portal .dp-rep > .material-symbols-outlined{ font-size:18px; color:var(--green); flex:none; }
.portal .dp-fmt{ font-size:9.5px; font-weight:800; color:var(--green-700); background:var(--green-soft);
  border:1px solid var(--green-line); border-radius:6px; padding:3px 6px; }
.portal .dp-chart{ display:flex; align-items:flex-end; gap:7px; height:74px; padding-top:4px; }
.portal .dp-chart i{ flex:1; background:linear-gradient(180deg,var(--p),var(--green)); border-radius:4px 4px 2px 2px; min-height:6px; }

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

/* ============================================================================
   Tweaks panel (hero layout)
   ============================================================================ */
.pt-tweaks{ position:fixed; right:18px; bottom:18px; z-index:9999; width:240px; background:#fff; border:1px solid #e2e8f0;
  border-radius:16px; box-shadow:0 24px 60px -16px rgba(15,23,42,.34); font-family:'Manrope',sans-serif; padding:16px; display:none; }
.pt-tweaks.open{ display:block; }
.pt-tweaks .tw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pt-tweaks .tw-head b{ font-size:14px; color:#0f172a; font-weight:800; }
.pt-tweaks .tw-x{ border:none; background:#f1f5f9; width:26px; height:26px; border-radius:8px; cursor:pointer; color:#475569; font-size:16px; line-height:1; }
.pt-tweaks .tw-lbl{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748b; margin-bottom:8px; }
.pt-tweaks .seg{ display:flex; background:#f1f5f9; border-radius:10px; padding:3px; gap:3px; }
.pt-tweaks .seg button{ flex:1; border:none; background:transparent; cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px; color:#475569; padding:8px 4px; border-radius:8px; transition:.15s; }
.pt-tweaks .seg button.on{ background:#fff; color:#065f46; box-shadow:0 1px 4px rgba(15,23,42,.12); }

/* hero layout switch */
.portal .hero-console{ display:flex; }

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

/* ---- ORBIT animations: staggered entrance + hub?product ping loop ---- */
@media (min-width:521px){
  .portal .orbit-node{ animation:pt-node-in .5s cubic-bezier(.2,.8,.2,1) backwards; }
  .portal .orbit-node.p0{ animation-delay:.15s } .portal .orbit-node.p1{ animation-delay:.24s }
  .portal .orbit-node.p2{ animation-delay:.33s } .portal .orbit-node.p3{ animation-delay:.42s }
  .portal .orbit-node.p4{ animation-delay:.51s } .portal .orbit-node.p5{ animation-delay:.60s }
  .portal .orbit-node.p6{ animation-delay:.69s }
  @keyframes pt-node-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.4); } to{ opacity:1; } }
}
.portal .orbit-lines line{ transition:stroke .35s ease; }
.portal .orbit-lines line.live{ stroke:var(--p); stroke-width:2.6; }
.portal .orbit-node .nd{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.portal .orbit-node.live .nd{ border-color:var(--p); transform:translateY(-3px) scale(1.07); box-shadow:0 14px 30px -8px rgba(19,236,128,.45); }

@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; }
}