:root{
    /* ═══ P01 DESIGN TOKENS — the single ramp everything resolves to. ═══
       The legacy names further down are ALIASES onto this ramp at their exact
       historical values, so every existing design renders byte-identical.
       CONTRACT: --accent / --accent-bg flow into the Help Center hero through a
       shadow root (pxMountHcHero rewrites :root→:host) — their NAMES and resolved
       DEFAULTS must never change or the hero silently repaints wrong. */
    /* neutral ramp — slate; every legacy grey sits on it exactly */
    --n-50:#f8fafc; --n-100:#f1f5f9; --n-200:#e2e8f0; --n-300:#cbd5e1; --n-400:#94a3b8;
    --n-500:#64748b; --n-600:#475569; --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a;
    /* brand alpha ramp — Help Center naming (--brand-N). Defined against
       var(--accent), so it tracks the design AND the runtime setProperty('--accent')
       calls with no re-derivation anywhere. */
    --brand-5:color-mix(in srgb,var(--accent) 5%,transparent);
    --brand-10:color-mix(in srgb,var(--accent) 10%,transparent);
    --brand-15:color-mix(in srgb,var(--accent) 15%,transparent);
    --brand-20:color-mix(in srgb,var(--accent) 20%,transparent);
    --brand-30:color-mix(in srgb,var(--accent) 30%,transparent);
    /* type scale — the sizes the portal actually sets today, named */
    --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-base:15px;
    --fs-lg:16.5px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:30px;
    --lh-tight:1.25; --lh-base:1.55; --lh-loose:1.7;
    /* radius scale — derived from the operator's --radius so one control scales all */
    --r-sm:calc(var(--radius) - 8px); --r-md:calc(var(--radius) - 4px);
    --r-lg:var(--radius); --r-xl:calc(var(--radius) + 2px); --r-pill:999px;
    /* motion scale */
    --dur-1:.12s; --dur-2:.16s; --dur-3:.24s;
    /* PHASE_PORTAL_P21 — breakpoint scale. P01 tokenised colour/type/space/radius/motion
       but never breakpoints, leaving 12 ad-hoc widths across ~50 @media blocks and NOTHING
       above 860px.
       ⚠ A media query CANNOT read a custom property — `@media(max-width:var(--bp-md))` is
       invalid CSS and fails silently. These exist so JS, container queries and future
       inline styles read the same numbers the stylesheet uses; the @media blocks below
       must repeat the literal px, and PortalBreakpointTest is what keeps the two in step.
       Any new @media must use a value from this scale. */
    --bp-xs:480px;  --bp-sm:560px;  --bp-md:640px;  --bp-lg:760px;  --bp-xl:860px;
    --bp-2xl:1280px; --bp-3xl:1600px; --bp-4xl:1920px; --bp-5xl:2560px;
    /* extra shadow step (xs) — sm/md/lg live in the PX_MATURITY block below */
    --shadow-xs:0 1px 2px rgba(15,23,42,.05);
    /* ── legacy tokens — aliases where a ramp step exists; VALUES unchanged ── */
    --accent:#6c5ce7; --accent-d:#5b4bd6;
    --ink:var(--n-900); --ink-2:var(--n-600); --ink-3:var(--n-500);
    --line:var(--n-200); --line-soft:var(--n-100);
    --bg:#f6f7fb; --card:#ffffff; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
    --radius:16px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  .wrap{max-width:640px;margin:0 auto;padding:32px 18px 64px}
  /* Hide the legacy static home hub (brandbar + 2 CTA cards) while booting and
     whenever a real design is present, so it never flashes or duplicates the
     design blocks. It only shows as a fallback for design-less portals. */
  /* Keep the main surface out of paint and keyboard navigation until the
     asynchronous design nav has claimed its final height. Without this, the
     63px header insertion moves the visible sign-in surface (CLS approximately 0.038). */
  body.px-booting #px-wrap{visibility:hidden}
  body.px-booting #pg-home, body.px-booting .brandbar,
  body.px-designed #pg-home, body.px-designed .brandbar{display:none!important}
  .brandbar{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  .brandbar .dot{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent-d));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px;box-shadow:0 6px 16px rgba(108,92,231,.28)}
  .brandbar h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
  .brandbar span{color:var(--ink-3);font-size:12.5px;font-weight:600}
  /* PHASE_PORTAL_I18N + PHASE_PORTAL_DARK — header utility group (theme toggle + language picker).
     Sits at the end of the nav row; on mobile it drops into the burger panel with the nav items. */
  .px-util{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
  .brandbar .px-util{margin-left:auto}
  .px-util-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;transition:.15s;padding:0}
  .px-util-btn:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}
  .px-util-lang{display:inline-flex;align-items:center;gap:5px;padding:0 9px 0 10px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
  .px-util-lang:hover{border-color:var(--ink-3)}
  /* THE PILL LIVED HERE. .px-util-lang was drawn for the old <select> picker — a bordered,
     filled, 34px-tall capsule. The picker is now a nav dropdown, so that capsule wrapped a
     control that already looks right and made it the only boxed thing in the header. When it
     hosts the nav-style picker the wrapper becomes pure layout: no box, no padding, no height.
     The class is stamped by the builder rather than matched with :has(), so the rule needs no
     selector support and cannot lose a specificity race with the capsule above. */
  .px-util-lang.px-util-plain{padding:0;height:auto;border:0;border-radius:0;background:none}
  .px-util-lang.px-util-plain:hover{border-color:transparent}
  .px-util-sel{border:0;background:transparent;color:var(--ink);font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;padding:6px 2px;max-width:150px}
  .px-util-sel:focus{outline:none}
  [dir="rtl"] .px-util{margin-left:0;margin-right:auto}
  [dir="rtl"] .brandbar .px-util{margin-left:0;margin-right:auto}
  @media (max-width:640px){ .pnav-items .px-util{width:100%;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line-soft)} }
  /* P11 — nav search: a button that expands into a live field with results. */
  .px-navsrch{position:relative}
  .px-navsrch-pop{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 20px 48px -14px rgba(15,23,42,.26);padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s var(--ease,ease),transform .16s var(--ease,ease),visibility .16s;z-index:70}
  .px-navsrch.on .px-navsrch-pop{opacity:1;visibility:visible;transform:none}
  .px-navsrch-inp{width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;color:var(--ink);background:var(--bg,#f6f7fb)!important;
    border:1px solid var(--line)!important;border-radius:10px!important;padding:11px 13px;outline:none}
  .px-navsrch-inp:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
  .px-navsrch-res{display:none;margin-top:8px;max-height:min(58vh,420px);overflow-y:auto;text-align:left}
  .px-navsrch-res.on{display:block}
  .px-navsrch-res .psearch-a{border-radius:9px;border-bottom:1px solid var(--line-soft)}
  .px-navsrch-res .psearch-a:last-child{border-bottom:0}
  [dir="rtl"] .px-navsrch-pop{right:auto;left:0}
  @media (max-width:640px){ .px-navsrch{width:100%} .px-navsrch-pop{position:static;width:auto;box-shadow:none;border:0;padding:8px 0;opacity:1;visibility:visible;transform:none;display:none} .px-navsrch.on .px-navsrch-pop{display:block} }
  .intro{color:var(--ink-2);font-size:14px;margin:-8px 0 22px}
  .tabs{display:flex;gap:6px;background:var(--line-soft);padding:5px;border-radius:12px;margin-bottom:20px}
  .tabs button{flex:1;border:none;background:none;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:800;color:var(--ink-2);cursor:pointer;transition:.15s}
  .tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(15,23,42,.06)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 24px;box-shadow:0 10px 30px rgba(15,23,42,.05)}
  label{display:block;font-size:12.5px;font-weight:800;color:var(--ink-2);margin:14px 0 6px}
  label:first-child{margin-top:0}
  input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--card);transition:.15s}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,92,231,.14)}
  textarea{resize:vertical;min-height:118px}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .row>div{flex:1;min-width:180px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
  .btn{margin-top:20px;width:100%;padding:13px;border:none;border-radius:12px;background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:.15s;box-shadow:0 8px 20px rgba(108,92,231,.25)}
  .btn:hover{filter:brightness(1.05)}
  .btn:disabled{opacity:.6;cursor:default;box-shadow:none}
  .msg{margin-top:16px;padding:12px 14px;border-radius:11px;font-size:13.5px;font-weight:600;display:none}
  .msg.err{display:block;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
  .msg.ok{display:block;background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
  .success-card{text-align:center;padding:12px 6px}
  .success-card .check{width:56px;height:56px;border-radius:50%;background:#ecfdf5;color:var(--ok);display:flex;align-items:center;justify-content:center;margin:6px auto 14px}
  .ticketno{display:inline-block;margin:8px 0 4px;font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:800;letter-spacing:.5px;color:var(--ink);background:var(--line-soft);border-radius:10px;padding:8px 16px}
  .statusrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  /* Pill is now driven by --pc (the status colour, set inline by pxPill). One
     source; pill_style look-packs (body.tkp-*) restyle using the same var. */
  .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;text-transform:capitalize;color:var(--pc,#475569);background:color-mix(in srgb,var(--pc,#475569) 13%,transparent);border:1px solid color-mix(in srgb,var(--pc,#475569) 30%,transparent)}
  .thread{margin-top:6px;display:flex;flex-direction:column;gap:12px}
  .bubble{border:1px solid var(--line);border-radius:12px;padding:11px 14px}
  .bubble .who{font-size:11.5px;font-weight:800;color:var(--ink-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
  .bubble.support{background:#faf9ff;border-color:#e9e5fb}
  .bubble .body{font-size:13.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
  .bubble .at{font-size:11px;color:var(--ink-3);margin-top:6px}
  .foot{text-align:center;margin-top:26px;font-size:11.5px;color:var(--ink-3)}
  .center-note{text-align:center;color:var(--ink-2);padding:20px 6px;font-size:14px}
  #p-notready{margin:8px 0}
  .pnr-card{max-width:460px;margin:6vh auto;text-align:center;padding:34px 26px;background:var(--card,#fff);border:1px solid var(--line,#e6e8ee);border-radius:18px;box-shadow:0 20px 48px -28px rgba(15,23,42,.35)}
  .pnr-ic{font-size:44px;line-height:1;margin-bottom:12px}
  .pnr-t{font-size:19px;font-weight:800;color:var(--ink,#0f172a);margin:0 0 8px}
  .pnr-s{font-size:14px;line-height:1.6;color:var(--ink-2,#64748b);margin:0}
  /* ═══ Loading skeletons + dot/pulse/bar loaders ═══ */
  @keyframes skShimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
  .sk{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 25%,color-mix(in srgb,var(--ink) 3%,transparent) 37%,color-mix(in srgb,var(--ink) 7%,transparent) 63%);background-size:840px 100%;animation:skShimmer 1.3s ease-in-out infinite;border-radius:8px}
  @media(prefers-reduced-motion:reduce){.sk{animation:none}}
  .sk-card{padding:18px;margin-bottom:12px}
  .sk-line{height:12px;margin:9px 0}
  .sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}.sk-line.w25{width:25%}
  .sk-av{width:38px;height:38px;border-radius:50%;flex-shrink:0}
  .sk-brow{display:flex;gap:12px;margin-bottom:22px}
  @keyframes skPulse{0%,100%{opacity:.35}50%{opacity:1}}
  .ld-dots{display:flex;gap:7px;justify-content:center;padding:34px}
  .ld-dots i{width:11px;height:11px;border-radius:50%;background:var(--accent);animation:skPulse 1s infinite}
  .ld-dots i:nth-child(2){animation-delay:.15s}.ld-dots i:nth-child(3){animation-delay:.3s}
  .ld-pulse{display:flex;justify-content:center;padding:30px}.ld-pulse i{width:44px;height:44px;border-radius:50%;background:var(--accent);animation:skPulse 1.1s infinite}
  .ld-bar{height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--accent) 15%,transparent);margin:20px 0}
  .ld-bar::before{content:"";display:block;height:100%;width:40%;background:var(--accent-bg,var(--accent));animation:ldBar 1.1s ease-in-out infinite}
  @keyframes ldBar{0%{margin-left:-40%}100%{margin-left:100%}}
  /* ═══ Empty-state art ═══ */
  .es-art{text-align:center;padding:44px 20px}
  .es-art .es-ic{width:72px;height:72px;margin:0 auto 16px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
  .es-art .es-ic svg{width:34px;height:34px}
  .es-art .es-t{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px}
  .es-art .es-s{font-size:13.5px;color:var(--ink-3);margin-bottom:16px}
  .empty.es-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
  .hidden{display:none!important}
  .link{background:none;border:none;color:var(--accent);font-weight:700;cursor:pointer;font-size:13.5px;padding:0;margin-top:16px}
  .px-fade{opacity:0;transition:opacity .35s ease}
  .px-fade.px-in{opacity:1}
  .deflect{margin:12px 0 4px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--line-soft);animation:pdIn .25s ease}
  @keyframes pdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .deflect .dh{font-size:12px;font-weight:800;color:var(--ink-2);margin-bottom:8px}
  .deflect a.da{display:block;padding:9px 11px;border-radius:9px;background:var(--card);border:1px solid var(--line);text-decoration:none;margin-bottom:6px;transition:.15s}
  .deflect a.da:last-child{margin-bottom:0}
  .deflect a.da:hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(15,23,42,.06)}
  .deflect .dt{font-size:13.5px;font-weight:700;color:var(--ink)}
  .deflect .de{font-size:12px;color:var(--ink-3);margin-top:2px}
  /* PHASE_PORTAL_P2 — authenticated My Requests experience */
  .acctbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;font-size:13px;color:var(--ink-2)}
  .acctbar .who{font-weight:700;color:var(--ink)}
  .signin-methods{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  /* PHASE_PORTAL_PASSWORD — auth tabs, password field, social buttons */
  .px-authtabs{display:flex;gap:4px;background:color-mix(in srgb,var(--ink) 6%,transparent);padding:4px;border-radius:12px;margin:0 0 16px}
  .px-authtabs button{flex:1;border:none;background:none;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--ink-3);cursor:pointer;font-family:inherit;transition:.14s var(--ease)}
  .px-authtabs button.on{background:var(--card,#fff);color:var(--ink);box-shadow:0 1px 3px rgba(2,6,23,.12)}
  .px-pw-wrap{position:relative;display:flex;align-items:center}
  .px-pw-wrap input{flex:1;padding-right:60px}
  .px-pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--ink-3);font-size:12px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:7px}
  .px-pw-eye:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .signin-social{display:flex;flex-direction:column;gap:9px;margin-top:6px}
  /* P09 per-method styling — grid pairs the providers two-up; compact drops the
     labels to an icon row, which is what four or more providers want. */
  .signin-social.sisoc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .signin-social.sisoc-grid .si-soc{justify-content:center}
  .signin-social.sisoc-compact{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .signin-social.sisoc-compact .si-soc{width:52px;height:48px;padding:0;justify-content:center;flex:0 0 auto}
  .signin-social.sisoc-compact .si-soc span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  @media(max-width:480px){.signin-social.sisoc-grid{grid-template-columns:1fr}}
  .si-soc{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);color:var(--ink);font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;transition:.14s var(--ease)}
  .si-soc:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 4%,transparent)}
  .si-soc svg,.si-soc img{width:18px;height:18px;flex-shrink:0}
  .btn-ghost{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none;display:block;text-align:center}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  .divider{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px;font-weight:700;margin:16px 0}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
  .req-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
  .req{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:.15s;background:var(--card)}
  .req:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(15,23,42,.06)}
  .req .rq-sub{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:2px}
  .req .rq-meta{font-size:11.5px;color:var(--ink-3)}
  .req .rq-r{flex-shrink:0}
  /* PHASE_PORTAL_ADVFILTER — priority/department/date filter selects */
  .rq-advfilters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .rq-advfilters:empty{display:none}
  .rq-fsel{position:relative;display:inline-flex;align-items:center}
  .rq-fsel select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink-2);font-size:12.5px;font-weight:700;font-family:inherit;padding:6px 28px 6px 12px;border-radius:999px;cursor:pointer;outline:none;transition:.14s var(--ease)}
  .rq-fsel select:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .rq-fsel.on select{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent)}
  .rq-fsel::after{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.5;pointer-events:none}
  .rq-fclear{border:none;background:none;color:var(--ink-3);font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:2px}
  .rq-fclear:hover{color:var(--accent)}
  .reqfilters{display:flex;gap:6px;margin:2px 0 14px}
  .reqfilters button{border:1px solid var(--line);background:var(--card);padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
  .reqfilters button.on{background:var(--accent);border-color:var(--accent);color:#fff}
  /* saved-view tabs (list_tabs) */
  /* ═══ PHASE_PORTAL_P18 — configurable customer dashboard ═══ */
  #px-dashboard.hidden{display:none}
  #px-dashboard{margin:0 0 22px}
  .pxd-greet{font-size:20px;font-weight:850;letter-spacing:-.02em;margin:0 0 14px}
  .pxd-greet span{color:var(--accent)}
  /* ═══ PAGE HEADER BAND (sub hero) — ITS OWN COMPONENT ═══════════════════════
     Rebuilt 2026-08-01. It no longer renders the hero's markup, so there is nothing here
     rescaling, un-gridding or hiding twenty-one landing compositions — that pile is what made
     the band a different height on every style and pushed the search bar out of the row.
     The band owns one layout; each hero style contributes a `psk-` skin, which is PAINT ONLY.
     Craft reference is the landing hero: deep brand field, confident type, a search pill with
     an inset track and a solid accent button. This is that language, at band scale. */
  .psubhero{
    position:relative;isolation:isolate;
    background:var(--psh-fill,linear-gradient(160deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 76%,#000) 100%));
    color:var(--psh-on,#fff);
    --psh-line:color-mix(in srgb,var(--psh-on,#fff) 22%,transparent);
  }
  .psh-full{width:100%;max-width:100%;overflow:hidden}
  .psh-contained{max-width:var(--px-cw,1180px);margin-inline:auto;border-radius:var(--radius,16px);overflow:hidden}

  /* Background image, when the hero has one — veiled with the brand colour so the copy keeps
     its contrast whatever the photograph does. */
  .psh-hasimg{background-image:var(--psh-img);background-size:cover;background-position:center}
  .psh-hasimg::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));
    opacity:var(--psh-veil,.55);
  }

  /* The horizon motif, drawn not marked up. Three wide arcs sweeping out of the bottom edge —
     the same signature as the classic hero, sized for a header. */
  .psh-tex{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--psh-tex-o,.5)}
  /* ⚠ GEOMETRY IN PIXELS, NOT PERCENTAGES. Sized as a share of the band's own width the arcs
     became circles hundreds of pixels across, sitting entirely below the bottom edge — the
     texture was in the markup and invisible on screen. Fixed heights put the crown of each arc
     inside the band at every width. */
  .psh-tex i{
    position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
    width:172%;height:360px;bottom:-250px;
    border:1px solid color-mix(in srgb,var(--psh-on,#fff) 20%,transparent);
  }
  .psh-tex i:nth-child(2){width:140%;height:300px;bottom:-214px;border-color:color-mix(in srgb,var(--psh-on,#fff) 15%,transparent)}
  .psh-tex i:nth-child(3){width:108%;height:244px;bottom:-182px;border-color:color-mix(in srgb,var(--psh-on,#fff) 11%,transparent)}
  /* The sheen off the top edge — the same light the landing hero catches, which is most of
     what stops a flat colour field looking like a coloured rectangle. */
  .psh-ondark::after{
    content:'';position:absolute;left:0;right:0;top:0;height:78%;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 100% at 50% -35%,rgba(255,255,255,.20),transparent 70%);
  }

  /* ── ONE HEIGHT, ONE GUTTER, FOR EVERY STYLE ──────────────────────────────
     min-height rather than fixed height: a long title on a narrow viewport must be able to
     grow the band instead of spilling out of it. */
  .psh-h-compact{--psh-min:104px;--psh-pad:20px}
  .psh-h-normal {--psh-min:148px;--psh-pad:26px}
  .psh-h-tall   {--psh-min:208px;--psh-pad:34px}
  .psubhero .psh-in{
    max-width:var(--px-cw,1180px);margin-inline:auto;box-sizing:border-box;
    padding:var(--psh-pad) clamp(16px,3vw,24px);
    min-height:var(--psh-min);display:flex;flex-direction:column;justify-content:center;
  }

  /* ── THE ROW — pxSubhero() folds heading, breadcrumb and search into it ────
     The search element is MOVED here from the page, never duplicated, so there is only ever
     one search box to keep in sync. */
  .psubhero .psh-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,36px);flex-wrap:wrap;width:100%}
  .psubhero .psh-copy{min-width:0;flex:1 1 340px;text-align:left}
  .psubhero .phero-h{
    margin:0;color:var(--psh-on,#fff);
    font-size:clamp(23px,2.5vw,34px);line-height:1.12;letter-spacing:-.025em;font-weight:800;
  }
  .psh-h-compact .phero-h{font-size:clamp(21px,2.1vw,28px)}
  .psh-h-tall    .phero-h{font-size:clamp(27px,3.1vw,42px)}
  .psubhero .phero-s{margin:6px 0 0;color:var(--psh-on,#fff);opacity:.86;font-size:14px;line-height:1.5;max-width:62ch}
  /* the bundle renders the band once with a {{PX_SUB}} sentinel and the SPA substitutes each
     page's own text — most pages have none, so the emptied paragraph must not keep its margin. */
  .psubhero .phero-s:empty{display:none}
  .psubhero .psh-eyebrow{
    font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    margin:0 0 6px;color:var(--psh-on,#fff);opacity:.72;
  }
  .psubhero .psh-ref{font-size:12px;font-weight:700;letter-spacing:.06em;margin:0 0 4px;color:var(--psh-on,#fff);opacity:.7}
  .psubhero .psh-crumb{
    margin-top:9px;font-size:12.5px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;
    color:var(--psh-on,#fff);opacity:.8;
  }
  .psubhero .psh-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}
  .psubhero .psh-crumb a:hover{border-bottom-color:currentColor}

  /* ── THE SEARCH PILL — the hero's, at band scale ──────────────────────────
     Inset track, hairline, accent focus ring. It sits opposite the title and never wraps
     underneath until the viewport genuinely cannot hold both. */
  .psubhero .psh-search{flex:0 1 400px;min-width:min(100%,250px)}
  .psubhero .psh-search .rq-search{
    display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
    height:46px;padding:0 6px 0 14px;border-radius:13px;
    background:var(--psh-field,color-mix(in srgb,#fff 18%,transparent));
    border:1px solid var(--psh-field-line,color-mix(in srgb,#fff 30%,transparent));
    box-shadow:inset 0 1px 2px rgba(2,6,23,.10);
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  .psubhero .psh-search .rq-search:hover{background:var(--psh-field-hi,color-mix(in srgb,#fff 26%,transparent))}
  .psubhero .psh-search .rq-search:focus-within{
    background:var(--psh-field-hi,color-mix(in srgb,#fff 30%,transparent));
    border-color:color-mix(in srgb,var(--psh-on,#fff) 62%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--psh-on,#fff) 18%,transparent);
  }
  .psubhero .psh-search .rq-search svg{flex:none;color:var(--psh-field-ink,#fff);opacity:.8}
  .psubhero .psh-search input{
    flex:1 1 auto;min-width:0;width:100%;border:0;background:none;outline:none;
    font:600 14px/1 inherit;color:var(--psh-field-ink,#fff);
  }
  .psubhero .psh-search input::placeholder{color:var(--psh-field-ink,#fff);opacity:.62;font-weight:500}
  .psubhero .psh-search .psh-clear{
    display:none;flex:none;width:26px;height:26px;margin-right:4px;border:0;border-radius:8px;
    background:color-mix(in srgb,var(--psh-field-ink,#fff) 16%,transparent);
    color:var(--psh-field-ink,#fff);font-size:16px;line-height:1;cursor:pointer;
    align-items:center;justify-content:center;
  }
  .psubhero .psh-search .rq-search.has-value .psh-clear{display:flex}
  .psubhero .psh-search .psh-clear:hover{background:color-mix(in srgb,var(--psh-field-ink,#fff) 28%,transparent)}

  /* ── TONE — decided in PHP, applied once, so contrast is never a per-style patch ── */
  .psh-onlight{
    --psh-on:var(--ink);
    --psh-field:#fff;
    --psh-field-hi:#fff;
    --psh-field-line:var(--line);
    --psh-field-ink:var(--ink);
    --psh-tex-o:.9;
  }
  .psh-onlight .psh-tex i{border-color:color-mix(in srgb,var(--accent) 14%,transparent)}
  .psh-onlight .psh-search .rq-search{box-shadow:0 1px 2px rgba(2,6,23,.06)}
  .psh-onlight .psh-search .rq-search svg{color:var(--accent);opacity:1}

  /* ── SKINS — paint only. Every style keeps its identity; none of them can move the row. ── */
  /* deep brand fields */
  .psk-classic  {--psh-fill:linear-gradient(160deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 74%,#000) 100%)}
  .psk-aurora   {--psh-fill:linear-gradient(120deg,color-mix(in srgb,var(--accent) 88%,#7c3aed) 0%,var(--accent) 55%,color-mix(in srgb,var(--accent) 70%,#0ea5e9) 100%)}
  .psk-banner   {--psh-fill:linear-gradient(90deg,color-mix(in srgb,var(--accent) 82%,#000) 0%,var(--accent) 100%)}
  .psk-arc      {--psh-fill:radial-gradient(120% 180% at 50% -60%,color-mix(in srgb,var(--accent) 70%,#fff) 0%,var(--accent) 46%,color-mix(in srgb,var(--accent) 74%,#000) 100%)}
  .psk-atrium   {--psh-fill:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff) 0%,var(--accent) 100%);--psh-tex-o:.7}
  .psk-spotlight{--psh-fill:radial-gradient(90% 160% at 22% 0%,color-mix(in srgb,var(--accent) 62%,#fff) 0%,transparent 58%),linear-gradient(160deg,#0b1220,#0b1220)}
  .psk-monolith {--psh-fill:linear-gradient(160deg,#0f172a 0%,#020617 100%);--psh-tex-o:.34}
  .psk-command  {--psh-fill:linear-gradient(140deg,#0b1220 0%,color-mix(in srgb,var(--accent) 40%,#0b1220) 100%)}
  .psk-beacon   {--psh-fill:radial-gradient(80% 150% at 78% 0%,color-mix(in srgb,var(--accent) 74%,#fff) 0%,transparent 55%),linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 66%,#000))}
  .psk-signal   {--psh-fill:linear-gradient(110deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 58%,#0b1220) 100%)}
  .psk-split    {--psh-fill:linear-gradient(90deg,var(--accent) 0%,var(--accent) 42%,color-mix(in srgb,var(--accent) 72%,#000) 72%,color-mix(in srgb,var(--accent) 66%,#000) 100%);--psh-tex-o:.35}
  .psk-concierge{--psh-fill:linear-gradient(150deg,color-mix(in srgb,var(--accent) 86%,#0b1220) 0%,color-mix(in srgb,var(--accent) 58%,#0b1220) 100%)}
  .psk-aperture {--psh-fill:radial-gradient(70% 180% at 50% -60%,color-mix(in srgb,var(--accent) 56%,#fff),transparent 62%),linear-gradient(145deg,#111827,color-mix(in srgb,var(--accent) 42%,#020617));--psh-tex-o:.46}
  .psk-orbit    {--psh-fill:radial-gradient(circle at 82% 50%,transparent 0 18%,rgba(255,255,255,.13) 19% 20%,transparent 21% 31%,rgba(255,255,255,.09) 32% 33%,transparent 34%),linear-gradient(110deg,#020617,color-mix(in srgb,var(--accent) 54%,#0f172a));--psh-tex-o:.35}
  .psk-summit   {--psh-fill:linear-gradient(145deg,#1e1b4b 0 48%,color-mix(in srgb,var(--accent) 78%,#111827) 49% 72%,color-mix(in srgb,var(--accent) 54%,#111827) 73%);--psh-tex-o:.28}
  .psk-constellation{--psh-fill:radial-gradient(circle at 78% 34%,rgba(255,255,255,.2) 0 3px,transparent 4px),radial-gradient(circle at 90% 72%,rgba(255,255,255,.16) 0 3px,transparent 4px),linear-gradient(120deg,#07111f,color-mix(in srgb,var(--accent) 48%,#0f172a));--psh-tex-o:.34}
  .psk-ribbon   {--psh-fill:linear-gradient(165deg,#111827 0 38%,color-mix(in srgb,var(--accent) 82%,#111827) 39% 55%,color-mix(in srgb,var(--accent) 45%,#111827) 56% 66%,#111827 67%);--psh-tex-o:.25}
  .psk-foundry  {--psh-fill:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.055) 79px 80px),repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.055) 31px 32px),#0b1220;--psh-tex-o:.18}
  .psk-nexus    {--psh-fill:linear-gradient(90deg,transparent 48%,color-mix(in srgb,var(--accent) 62%,#fff) 49% 51%,transparent 52%),radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 55%,#334155),#020617 68%);--psh-tex-o:.24}
  /* light tinted papers */
  .psk-minimal  {--psh-fill:var(--card);--psh-tex-o:0}
  .psk-editorial{--psh-fill:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--card)) 0%,var(--card) 100%);--psh-tex-o:.5}
  .psk-tiles    {--psh-fill:color-mix(in srgb,var(--accent) 7%,var(--card));--psh-tex-o:.55}
  .psk-journey  {--psh-fill:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,var(--card)) 0%,var(--card) 100%);--psh-tex-o:.5}
  .psk-gateway  {--psh-fill:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--card)) 0%,var(--card) 100%)}
  .psk-atlas    {--psh-fill:color-mix(in srgb,var(--accent) 5%,var(--card));--psh-tex-o:.7}
  .psk-citadel  {--psh-fill:repeating-linear-gradient(90deg,transparent 0 82px,color-mix(in srgb,var(--accent) 8%,transparent) 82px 83px),linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--card)),var(--card));--psh-tex-o:.22}
  .psk-vault    {--psh-fill:radial-gradient(ellipse at 82% 120%,transparent 0 42%,color-mix(in srgb,var(--accent) 15%,transparent) 43% 44%,transparent 45%),linear-gradient(180deg,var(--card),color-mix(in srgb,var(--accent) 5%,var(--card)));--psh-tex-o:.18}
  .psk-observatory{--psh-fill:repeating-conic-gradient(from 0deg at 88% 150%,color-mix(in srgb,var(--accent) 8%,transparent) 0 1deg,transparent 1deg 15deg),linear-gradient(180deg,var(--card),color-mix(in srgb,var(--accent) 6%,var(--card)));--psh-tex-o:.2}
  /* ⚠ MOSAIC AND LEDGER MOVED TO THE DEEP FAMILY 2026-08-01, when their heroes were rebuilt as
     deep brand fields. They were near-white paper here, so those two portals would have shown a
     deep blue landing hero and a white band on every inner page — precisely the drift the band
     is supposed to make impossible. A skin is paint, so it carries the hero's texture too:
     mosaic's tessellation and ledger's ruling are in the fill itself. */
  .psk-mosaic   {--psh-fill:
      repeating-linear-gradient(60deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px),
      repeating-linear-gradient(-60deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px),
      linear-gradient(160deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 74%,#000) 100%);
    --psh-tex-o:.32}
  .psk-ledger   {--psh-fill:
      repeating-linear-gradient(180deg,transparent 0 33px,rgba(255,255,255,.08) 33px 34px),
      linear-gradient(150deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 72%,#000) 100%);
    --psh-tex-o:0}

  .psk-card     {--psh-fill:linear-gradient(180deg,var(--card) 0%,color-mix(in srgb,var(--accent) 8%,var(--card)) 100%);--psh-tex-o:.4}
  /* the flat papers earn a hairline instead of a horizon, so they still close against the page */
  /* inset shadow, not a border: a border would add 1px and the flat papers would no longer be
     the exact same height as the deep fields. */
  .psk-minimal,.psk-atlas{box-shadow:inset 0 -1px 0 var(--line)}

  @media(max-width:760px){
    .psubhero .psh-row{gap:14px}
    .psubhero .psh-search{flex:1 1 100%}
    .psh-h-tall{--psh-min:170px}
  }

  /* Language picker — only the bits the nav has no opinion on. Everything else (panel,
     shadow, radius, open animation, alignment) comes from .pnav-dd/.pnav-dd-menu/.pdd-row. */
  /* NO PILL, but the same LINE BOX as every other nav item. Stripping the padding outright
     made the trigger 14px tall next to 30px links, so it floated above the row. ONLY the
     horizontal padding is killed — the vertical padding is what gives a nav item its height,
     and it is left to .pnav-link. The border, radius and hover fill go too; those read as a
     button. pxLangMatchNav() then copies the real metrics off a live link at mount.
     The font is NOT touched at all — the trigger carries .pnav-link, so it already has the
     nav's exact size and weight. Setting either made "FR" heavier than "Support" beside it. */
  /* The right-hand cluster: language + account, one child of .pnav-in so its
     space-between layout still sees brand | items | end. */
  .px-navend{display:inline-flex;align-items:center;gap:12px;flex:none}
  .px-lang{display:inline-flex;align-items:center}
  .px-lang .pnav-dd-btn{background:none!important;border:0!important;border-radius:0!important;
    padding-left:0!important;padding-right:0!important;box-shadow:none!important;
    gap:6px;display:inline-flex;align-items:center}
  .px-lang .pnav-dd-btn:hover{background:none!important;color:var(--accent)}
  .px-lang .px-lang-code{letter-spacing:.02em}
  /* The nav's own indicator margin is tuned for a text label; after a two-letter code that
     same gap reads as a stray chevron floating away from the word. */
  .px-lang .pnav-ind{margin-left:1px}
  .px-lang .px-lang-flag{flex:0 0 auto;display:block;width:18px;height:14px;object-fit:cover;
    border-radius:2.5px;box-shadow:0 0 0 1px rgba(15,23,42,.10)}
  /* PHASE_PORTAL_LANG_CAP — SEVEN rows, then the panel scrolls.
     With every locale enabled this menu is 40 rows / ~1.5k px tall: it opens under the nav
     and runs clean off the bottom of the screen, and because the panel is anchored to a nav
     that may be sticky, scrolling the PAGE never brings the rest into reach — the last two
     dozen languages were simply unpickable.
     The height is MEASURED at mount (pxLangCap) and published as --pxl-cap on the picker,
     because a row is whatever height the operator's nav design gives it; a hardcoded cap
     cuts the 7th row in half the moment a design changes the row padding or font. The
     literal below is only the fallback for the frame before that measurement lands.
     Row layout only: at ≤760px the picker is a floating panel governed by portal-runtime.css,
     which applies the same --pxl-cap under a 60vh guard. */
  .px-lang .pnav-dd-menu{min-width:186px}
  @media(min-width:761px){
    .pnav-dd.px-lang > .pnav-dd-menu{max-height:var(--pxl-cap,268px);
      overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  }
  /* THE SCROLLBAR — a 3px thumb in the design's own accent on a transparent track, held off the
     panel's 14px corner by a transparent border. Same bar as the design picker's list
     (.dp-dd-panel, portal-runtime.css), so it tracks whatever accent the chosen nav carries.
     ⚠ THE TWO SPELLINGS CANNOT BOTH BE SET. Chrome 121+ honours the STANDARD scrollbar-width /
     scrollbar-color in preference to ::-webkit-scrollbar, and its 'thin' bar arrives with the
     Windows arrow buttons at both ends — measured on the live portal, and not the small quiet
     bar this is meant to be. Firefox has no ::-webkit-scrollbar at all, so it gets the standard
     pair, fenced behind @supports where the pseudo-element does not exist. */
  @supports not selector(::-webkit-scrollbar){
    .px-lang .pnav-dd-menu{scrollbar-width:thin;
      scrollbar-color:color-mix(in srgb,var(--accent) 42%,transparent) transparent}
  }
  .px-lang .pnav-dd-menu::-webkit-scrollbar{width:8px}
  .px-lang .pnav-dd-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}
  .px-lang .pnav-dd-menu::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,transparent);
    border-radius:999px;border:2.5px solid transparent;background-clip:content-box}
  .px-lang .pnav-dd-menu:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 62%,transparent);
    background-clip:content-box}
  /* Left-aligned rows: flag, then name, then the tick pushed to the far edge. space-between
     alone shoved every name against the right edge because the row has three children of
     unequal width — the name must be the one that grows. */
  .px-lang .pdd-row{display:flex;align-items:center;justify-content:flex-start;width:100%;
    background:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;padding:8px 10px;gap:10px;text-align:left}
  .px-lang .pdd-row .pdd-tx{flex:1 1 auto;min-width:0;text-align:left}
  .px-lang .pdd-row .pdd-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .px-lang .pdd-row.is-active{background:none;color:var(--accent);font-weight:800}
  .px-lang .px-lang-tick{flex:none;margin-left:auto;color:var(--accent)}
  .pxd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .pxd-widget{min-width:0}
  /* A stat tile holds one number and one short label, so it should be sized by that —
     16px padding under a 29px number left a card far taller than its contents and
     pushed the actual request list below the fold. The action cards keep their larger
     presence because they carry an icon plus two lines of text. */
  .pxd-tile{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 13px;cursor:pointer;font-family:inherit;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease)}
  .pxd-tile:hover,.pxd-action-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
  .pxd-tile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .pxd-n{font-size:24px;font-weight:850;letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
  .pxd-tile.accent .pxd-n{color:var(--accent)}
  .pxd-l{font-size:11.5px;font-weight:750;color:var(--ink-2);margin-top:5px;display:flex;align-items:center;gap:6px}
  /* Tile size. Small also narrows the grid track, which is the point — the tiles hold one
     number each, so a smaller tile means more per row and fewer rows above the list. */
  .pxds-small .pxd-tile{padding:8px 10px;border-radius:11px}.pxds-small .pxd-n{font-size:19px}.pxds-small .pxd-l{font-size:11px;margin-top:3px}
  .pxds-small.pxdl-overview .pxd-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
  .pxds-large .pxd-tile{padding:16px 18px;border-radius:16px}.pxds-large .pxd-n{font-size:30px}.pxds-large .pxd-l{font-size:12.5px;margin-top:8px}
  /* Tile alignment. .pxd-l is a flex row (status dot + label), so text-align alone would
     move the number and leave the dot+label hugging the left edge. */
  .pxda-center .pxd-tile{text-align:center}.pxda-center .pxd-tile .pxd-l{justify-content:center}
  .pxda-right .pxd-tile{text-align:right}.pxda-right .pxd-tile .pxd-l{justify-content:flex-end}
  .pxd-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
  .pxd-dot.open{background:var(--accent)}.pxd-dot.await{background:var(--warn,#f59e0b)}.pxd-dot.solved{background:var(--ok,#10b981)}.pxd-dot.urgent{background:var(--err,#ef4444)}.pxd-dot.unread{background:#0ea5e9}
  .pxd-action-card{grid-column:span 2;display:flex;align-items:center;gap:13px;min-height:66px;text-align:left;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card));color:var(--ink);border-radius:16px;padding:15px 17px;cursor:pointer;font-family:inherit;transition:.16s var(--ease)}
  .pxd-action-card.primary{background:linear-gradient(135deg,var(--accent),var(--accent-d));border-color:transparent;color:#fff;box-shadow:0 12px 28px -18px color-mix(in srgb,var(--accent) 75%,transparent)}
  .pxd-aic{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);flex:none}
  .pxd-action-card.primary .pxd-aic{background:rgba(255,255,255,.16);color:#fff}
  .pxd-aic svg{width:18px;height:18px}.pxd-at{font-size:13.5px;font-weight:820}.pxd-as{display:block;font-size:11.5px;font-weight:600;opacity:.68;margin-top:3px}
  .pxd-recent{grid-column:span 2;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px}
  .pxd-rh{font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:7px}
  .pxd-rr{display:flex;width:100%;gap:10px;align-items:center;text-align:left;border:0;border-top:1px solid var(--line-soft);background:transparent;color:var(--ink);padding:9px 0;cursor:pointer;font-family:inherit}.pxd-rr:first-of-type{border-top:0}.pxd-rs{font-size:12.5px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.pxd-rm{font-size:10.5px;color:var(--ink-3);flex:none}
  .pxdl-compact .pxd-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px}.pxdl-compact .pxd-tile{padding:12px 13px;border-radius:12px}.pxdl-compact .pxd-n{font-size:23px}.pxdl-compact .pxd-action-card,.pxdl-compact .pxd-recent{grid-column:span 2;min-height:64px;border-radius:12px}
  .pxdl-bento .pxd-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.pxdl-bento .pxd-tile{grid-column:span 3}.pxdl-bento .pxd-action-card,.pxdl-bento .pxd-recent{grid-column:span 6}.pxdl-bento .pxd-tile:first-child{grid-column:span 6;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--card)),var(--card))}
  .pxdl-split .pxd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pxdl-split .pxd-action-card,.pxdl-split .pxd-recent{grid-column:span 2}
  @media(max-width:760px){.pxd-grid,.pxdl-bento .pxd-grid,.pxdl-split .pxd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pxdl-bento .pxd-tile,.pxdl-bento .pxd-tile:first-child{grid-column:span 1}.pxd-action-card,.pxdl-bento .pxd-action-card,.pxd-recent,.pxdl-bento .pxd-recent{grid-column:span 2}}
  @media(max-width:480px){.pxd-grid,.pxdl-bento .pxd-grid,.pxdl-split .pxd-grid{grid-template-columns:1fr}.pxdl-bento .pxd-tile,.pxdl-bento .pxd-tile:first-child,.pxd-action-card,.pxdl-bento .pxd-action-card,.pxd-recent,.pxdl-bento .pxd-recent,.pxdl-split .pxd-action-card,.pxdl-split .pxd-recent{grid-column:span 1}}
  .px-vtabs{display:flex;gap:2px;margin:0 0 16px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
  .px-vtab{border:none;background:none;padding:10px 15px;font-size:13.5px;font-weight:700;color:var(--ink-3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;display:flex;align-items:center;gap:7px;transition:.14s var(--ease)}
  .px-vtab:hover{color:var(--ink)}
  .px-vtab.on{color:var(--accent);border-bottom-color:var(--accent)}
  .px-vtc{font-size:11px;font-weight:800;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
  .px-vtab.on .px-vtc{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  /* PHASE_PORTAL_SAVEDVIEW — customer's own saved-view tabs */
  .px-vt-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:13px;line-height:1;color:var(--ink-3);opacity:0;transition:.12s var(--ease)}
  .px-vtab-cv:hover .px-vt-x,.px-vtab-cv.on .px-vt-x{opacity:1}
  .px-vt-x:hover{background:color-mix(in srgb,var(--err,#ef4444) 14%,transparent);color:var(--err,#ef4444)}
  .px-vtab-add{color:var(--accent);font-weight:750}
  .px-vt-save{display:inline-flex;align-items:center;gap:6px;padding:4px 6px}
  .px-vt-save input{border:1px solid var(--border);border-radius:8px;padding:6px 9px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--card,#fff);width:150px;outline:none}
  .px-vt-save input:focus{border-color:var(--accent)}
  .px-vt-ok,.px-vt-cancel{border:1px solid var(--border);background:var(--card,#fff);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-2)}
  .px-vt-ok{background:var(--accent);border-color:var(--accent);color:#fff}
  /* composer quick-reply chips */
  .qr-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
  .qr-chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.14s var(--ease)}
  .qr-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
  /* inline guest lookup */
  #p-status-form.lk-inline{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
  #p-status-form.lk-inline #p-lookup,#p-status-form.lk-inline #p-status-msg{grid-column:1/-1}
  @media(max-width:560px){#p-status-form.lk-inline{grid-template-columns:1fr}}
  .composer{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:14px}
  .composer textarea{min-height:90px}
  .att-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .att-chip{font-size:11.5px;background:var(--line-soft);border-radius:8px;padding:5px 9px;color:var(--ink-2)}
  .bubble .att a{display:inline-block;margin-top:6px;font-size:12px;color:var(--accent);font-weight:700}
  .bubble .att img{max-width:220px;max-height:220px;border-radius:8px;margin-top:6px;display:block}
  .rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .rowbtns button{flex:1;min-width:130px;padding:10px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
  .rowbtns button.solve{border-color:var(--ok);color:var(--ok)}
  .empty{text-align:center;color:var(--ink-3);padding:26px 6px;font-size:14px}
  /* PHASE_PORTAL_P6 — Design Studio nav + footer (applied from published design) */
  .pnav{width:100%;background:color-mix(in srgb,var(--card,#fff) 88%,transparent);border-bottom:1px solid var(--line);z-index:50}
  /* Sticky nav: the WRAPPER must be sticky (it's a direct child of body, so it
     spans the whole scroll). The inner .pnav alone can't stick — its container
     (#px-nav) is only nav-height tall. */
  #px-nav.is-sticky{position:sticky;top:0;z-index:50}
  /* Same rule derived from the markup, so surfaces that render nav_html
     without portal.php's JS (the Help Center) still stick. */
  #px-nav:has(.pnav-sticky){position:sticky;top:0;z-index:50}
  .pnav-sticky{position:sticky;top:0}
  /* sticky detail header — subject + meta stay visible while scrolling a long
     thread, offset below the sticky nav via --px-navh (set on apply). */
  #px-d-head{margin-bottom:12px}
  /* detail subject row — subject left, prominent Reply action right (embed parity, done bigger) */
  .d-subjrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
  #px-d-subject{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25;flex:1;min-width:0}
  /* PHASE_PORTAL_FAV — star a request (per device) */
  .d-star{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--card,#fff);color:var(--ink-3);cursor:pointer;transition:.14s var(--ease)}
  .d-star:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent)}
  .d-star.on{color:#f59e0b;border-color:color-mix(in srgb,#f59e0b 45%,var(--border));background:color-mix(in srgb,#f59e0b 10%,transparent)}
  .d-star.on svg{fill:#f59e0b}
  .d-reply-top{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;color:#fff;
    background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));border-radius:12px;padding:11px 20px;
    font-family:inherit;font-weight:800;font-size:14px;box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent) 55%,transparent);
    transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .15s var(--ease)}
  .d-reply-top:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 26px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
  .d-reply-top:active{transform:translateY(0) scale(.98)}
  .d-reply-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* conversation count header above the thread */
  .d-convohead{font-family:ui-monospace,monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);padding:10px 0 4px;margin-top:4px;border-top:1px solid var(--line-soft)}
  @media(max-width:560px){.d-subjrow{flex-direction:column}.d-reply-top{align-self:flex-start;width:auto}}
  .d-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  /* ── THE SUBJECT META LINE ────────────────────────────────────────────────────────────────
     The chips, the opened/handled-by line and the live presence badge are three sibling blocks, so
     they stacked into three separate rows under the subject and read as clutter. They belong on ONE
     line. Ordered by what identifies the request, not by DOM order:
       1. the CHIPS   — reference, priority, department: what a customer quotes and scans for
       2. the OPENED  — supporting context, so it stays quieter and second
       3. the PRESENCE — transient. It appears and disappears on its own, so it is pushed to the far
          end where arriving cannot shove the two stable items sideways.
     Chip order INSIDE the chip group is left alone — that is the operator's `Header chips` setting.
     Order is done with `order`, not by moving markup, because the presence badge is injected at
     runtime between meta and chips. */
  #px-d-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:8px}
  #px-d-head > .d-subjrow{flex:0 0 100%;margin-bottom:0}
  #px-d-head > #px-d-chips{order:1;margin-top:0}
  #px-d-head > #px-d-meta{order:2}
  #px-d-head > #px-live-presence{order:3;margin:0 0 0 auto}
  /* Quieter than it was — it sits beside the facts now, not on its own row, so it should not
     out-shout them. Colour still mixed from the configured accent. */
  #px-d-head > #px-live-presence{padding:5px 9px;font-size:11px;gap:6px}
  #px-d-head > #px-live-presence .px-presence-avatar{width:17px;height:17px;font-size:8.5px}
  /* Narrow: nothing is pushed to the far end, or the badge strands itself on its own line. */
  @media(max-width:640px){ #px-d-head > #px-live-presence{margin-left:0} }
  .d-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--line-soft,color-mix(in srgb,var(--ink) 5%,transparent));border:1px solid var(--line);border-radius:999px;padding:4px 11px}
  .d-chip.mono{font-family:ui-monospace,monospace;font-weight:600}
  .d-chip.pr{padding:2px 8px;background:none;border:none}
  /* detail action bar + in-thread search */
  .d-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;justify-content:space-between}
  .d-actions-top{display:flex;gap:7px;flex-wrap:wrap}
  .d-act{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.14s var(--ease)}
  .d-act:hover{border-color:var(--accent);color:var(--accent)}
  .d-act svg{width:14px;height:14px}
  .d-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 11px;background:var(--card);min-width:200px;flex:1;max-width:320px;color:var(--ink-3)}
  .d-search input{border:none;outline:none;background:none;flex:1;min-width:0;font-size:13px;color:var(--ink)}
  .d-search #px-d-q-count{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
  .brow.pxq-hide{display:none}
  /* PHASE_PORTAL_THREAD2 — collapse long messages */
  .bubble .body.bclamp{max-height:184px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent)}
  .bubble .bmore{margin-top:6px;border:none;background:none;color:var(--accent);font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;padding:0}
  .bubble .bmore:hover{text-decoration:underline}
  .kb-sel{outline:2px solid var(--accent);outline-offset:1px;border-radius:8px}
  tr.kb-sel{outline-offset:-2px}
  /* ═══ E1 — jump-to-reply FAB (config: off|icon|pill|extended, pos right|left|center) ═══ */
  .px-fab{position:fixed;bottom:24px;z-index:70;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    border:none;color:#fff;background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));
    box-shadow:0 10px 26px -6px color-mix(in srgb,var(--accent) 60%,transparent),0 3px 8px rgba(15,23,42,.18);
    font-family:inherit;font-weight:800;font-size:14px;transition:transform .16s var(--ease),box-shadow .16s var(--ease),opacity .2s ease;
    animation:pxFabIn .28s var(--ease) both}
  @keyframes pxFabIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
  .px-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px color-mix(in srgb,var(--accent) 65%,transparent)}
  .px-fab:active{transform:translateY(0) scale(.97)}
  .px-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .px-fab.fab-right{right:24px}.px-fab.fab-left{left:24px}.px-fab.fab-center{left:50%;transform:translateX(-50%)}
  .px-fab.fab-center:hover{transform:translateX(-50%) translateY(-2px)}
  /* style: icon = round icon only; pill = icon+label rounded; extended = wider pill */
  .px-fab.fab-icon{width:52px;height:52px;border-radius:50%;justify-content:center;padding:0}
  .px-fab.fab-icon .px-fab-lbl{display:none}
  .px-fab.fab-pill{padding:13px 20px;border-radius:999px}
  .px-fab.fab-extended{padding:15px 24px;border-radius:16px;font-size:14.5px}
  @media(max-width:640px){.px-fab{bottom:18px}.px-fab.fab-right{right:16px}.px-fab.fab-left{left:16px}.px-fab.fab-extended{padding:13px 20px}}
  @media(prefers-reduced-motion:reduce){.px-fab{animation:none}}
  /* ═══ PHASE_PORTAL_SIGNIN_PREMIUM — seven production-grade, Studio-driven sign-in systems ═══ */
  #px-signin{--si-shadow:0 32px 80px -38px rgba(2,6,23,.42);position:relative;width:100%;max-width:1120px;margin:0 auto;isolation:isolate}
  #px-signin>#px-blocks-signin:empty{display:none}
  #px-signin .si-main{position:relative;z-index:2;min-width:0}
  #px-signin .si-main-inner{width:100%;max-width:520px;margin:0 auto}
  #px-signin .si-head{margin:0 0 20px;text-align:center}
  #px-signin .si-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
  #px-signin .si-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}
  #px-signin #px-si-heading{margin:0;color:var(--ink);font-size:clamp(28px,3vw,38px);font-weight:850;letter-spacing:-.035em;line-height:1.08}
  #px-signin .si-sub{max-width:470px;margin:10px auto 0;color:var(--ink-2);font-size:14px;line-height:1.65;text-align:center}
  /* Radius follows the Studio corner setting instead of a fixed 22px, so the
     card, its inputs and the tab track stay a family at any brand rounding.
     Padding scales with the viewport so a narrow window does not waste a third
     of the card on gutters. */
  #px-signin .si-card{position:relative;max-width:none!important;margin:0!important;
    padding:clamp(24px,2.4vw,34px)!important;border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
    border-radius:clamp(16px,calc(var(--r-lg,16px) * 1.35),28px);background:var(--card);box-shadow:var(--si-shadow);overflow:hidden}
  #px-signin .si-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--accent-bg,linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff)))}
  #px-signin .si-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft,var(--line));color:var(--ink-3);font-size:11.5px;font-weight:750}
  #px-signin .si-card-meta span{display:inline-flex;align-items:center;gap:6px}
  #px-signin .si-card-meta svg{width:15px;height:15px;color:var(--accent)}
  /* Both of these carry an explicit `display`, which outranks the UA's
     [hidden]{display:none} — so hiding either line needs saying here. */
  #px-signin .si-card-meta[hidden],#px-signin .si-card-meta span[hidden]{display:none}
  #px-signin .si-intro{margin:0 0 18px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
  #px-signin .si-card label{display:block;margin:14px 0 7px;color:var(--ink);font-size:12px;font-weight:780}
  #px-signin .si-card input{width:100%;min-height:46px;border-radius:12px}
  #px-signin .si-card .btn{width:100%;min-height:46px;margin-top:15px;border-radius:12px;font-weight:800}
  #px-signin .si-card .btn-ghost{min-height:44px;border-radius:12px;font-weight:750}
  #px-signin .si-card .link{font-weight:720}
  /* ── AUTH TABS ───────────────────────────────────────────────────────────
     A segmented control, so the two halves share one rounded track and the
     active pill is inset within it. Radii are derived from --r-lg so the pill
     stays concentric with the track at any Studio corner setting instead of
     the old fixed 13/9 pair, which went square-in-round on large radii. */
  #px-signin .px-authtabs{margin:0 0 22px;padding:4px;gap:4px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
    border-radius:calc(var(--r-lg,16px) + 2px);background:color-mix(in srgb,var(--ink) 5%,var(--card))}
  /* The pill is inset by the track's 4px padding, so its radius must be the
     track's MINUS that inset to stay concentric — a fixed pair goes visibly
     wrong the moment the brand radius changes. */
  #px-signin .px-authtabs button{min-height:42px;padding:11px 16px;font-size:13.5px;font-weight:700;letter-spacing:-.005em;
    border-radius:calc(var(--r-lg,16px) - 2px);transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
  #px-signin .px-authtabs button.on{background:var(--card,#fff);color:var(--ink);font-weight:750;
    box-shadow:0 1px 1px rgba(2,6,23,.04),0 2px 6px -1px rgba(2,6,23,.10),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
  #px-signin .px-authtabs button:not(.on){color:var(--ink-3)}
  #px-signin .px-authtabs button:not(.on):hover{color:var(--ink);background:color-mix(in srgb,var(--card) 55%,transparent)}
  /* The default focus ring is a hard black outline — it read as a mis-drawn
     border on the active tab. Use the brand accent, offset off the pill. */
  #px-signin .px-authtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Field rhythm inside the card: label sits close to its input, inputs sit
     apart from each other, so the pairs read as pairs. */
  #px-signin .si-card label{display:block;margin-bottom:7px}
  #px-signin .si-card input{min-height:46px;padding:12px 14px;border-radius:var(--r-md,12px)}
  #px-signin .si-card input + label,#px-signin .si-card .px-pw-wrap + label{margin-top:18px}
  /* The action sits apart from the last field, not glued to it. */
  #px-signin .si-card .btn{min-height:46px;border-radius:var(--r-md,12px)}
  #px-signin .si-intro{margin-bottom:20px}
  /* The swap between password and email-link sign-in. A quiet link under the
     active form, not a second call to action competing with it. */
  /* The footer block already carries a top border AND holds a .divider, whose
     own flanking rules drew a SECOND horizontal line a few pixels below it.
     The divider is the better separator (it is labelled), so the block's plain
     border stands down when one is present. */
  #px-signin .si-access:has(> .divider){border-top:0;padding-top:0}
  #px-signin .si-methodswitch{margin-top:16px}
  #px-signin .si-methodswitch .link{padding:0;font-size:13px;font-weight:650}
  #px-signin #px-si-otp{font-size:22px;font-weight:850;letter-spacing:.28em;text-align:center;font-variant-numeric:tabular-nums}
  /* The "or" separates two whole methods, so it needs more air than a field
     gap — otherwise the two forms still read as one long form. */
  #px-signin .divider{margin:26px 0 22px;color:var(--ink-3);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  #px-signin .si-access{margin:22px -28px -28px;padding:18px 28px 20px;border-top:1px solid var(--line-soft,var(--line));background:color-mix(in srgb,var(--accent) 3%,var(--card))}
  #px-signin .si-access .divider{margin:0 0 8px}
  #px-signin .si-access .link{display:block;width:100%;margin:6px 0 0!important;text-align:center}
  #px-signin .si-card-foot{display:flex;align-items:center;justify-content:center;gap:7px;margin:17px 0 -4px;color:var(--ink-3);font-size:10.5px;font-weight:650}
  #px-signin .si-card-foot svg{width:13px;height:13px;color:var(--accent)}
  #px-signin .si-aside[hidden]{display:none}
  #px-signin .si-aside{position:relative;overflow:hidden}
  #px-signin .si-aside::before,#px-signin .si-aside::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
  #px-signin .si-aside::before{width:330px;height:330px;right:-150px;top:-130px;border:1px solid rgba(255,255,255,.24);box-shadow:0 0 0 55px rgba(255,255,255,.055),0 0 0 110px rgba(255,255,255,.035)}
  #px-signin .si-aside::after{width:180px;height:180px;left:-100px;bottom:-90px;background:rgba(255,255,255,.08);filter:blur(2px)}
  #px-signin .si-aside-inner{position:relative;z-index:2;display:flex;min-height:100%;flex-direction:column;justify-content:center;align-items:flex-start}
  #px-signin .si-aside-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:24px;padding:7px 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.1);font-size:10.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
  #px-signin .si-aside-badge i{width:7px;height:7px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 0 4px rgba(110,231,183,.14)}
  #px-signin .si-aside-logo{display:block;max-width:180px;height:38px;width:auto;margin-bottom:24px;padding:7px 11px;border-radius:11px;background:#fff;box-shadow:0 12px 24px -14px rgba(2,6,23,.5)}
  #px-signin .si-aside-h{max-width:390px;font-size:clamp(25px,2.7vw,36px);font-weight:850;letter-spacing:-.035em;line-height:1.08}
  #px-signin .si-aside-t{max-width:400px;margin-top:14px;font-size:14px;line-height:1.7;opacity:.86}
  #px-signin .si-aside-proof{display:grid;gap:10px;width:100%;margin-top:26px}
  #px-signin .si-aside-proof span{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:720}
  #px-signin .si-aside-proof i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.15);font-style:normal}
  #px-signin .si-aside-q{max-width:410px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);font-size:16px;font-weight:700;line-height:1.55}
  #px-signin .si-aside-q span{display:block;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
  /* Default brand panel: a lightweight, code-native animated 3D help desk.
     The copy is always the top layer; image mode replaces this scene. */
  #px-signin .si-aside-inner{z-index:4;text-shadow:0 2px 18px rgba(2,6,23,.28)}
  #px-signin .si-aside-veil{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,7,18,.48) 0%,rgba(3,7,18,.2) 58%,rgba(3,7,18,.08) 100%)}
  #px-signin .si-3d-scene{position:absolute;z-index:2;right:-34px;top:8%;width:360px;height:390px;pointer-events:none;perspective:900px;transform-style:preserve-3d;opacity:.82;filter:drop-shadow(0 28px 28px rgba(2,6,23,.32))}
  #px-signin .si-3d-scene *{position:absolute;display:block;box-sizing:border-box;transform-style:preserve-3d}
  #px-signin .si-3d-halo{inset:38px 18px 22px 4px;border:1px solid rgba(125,211,252,.32);border-radius:50%;box-shadow:0 0 0 34px rgba(99,102,241,.06),inset 0 0 70px rgba(56,189,248,.11);animation:si3dHalo 7s ease-in-out infinite}
  #px-signin .si-3d-console{left:67px;bottom:37px;width:230px;height:144px;transform:rotateX(59deg) rotateZ(-31deg);border:1px solid rgba(165,243,252,.55);border-radius:25px;background:linear-gradient(145deg,rgba(34,211,238,.28),rgba(99,102,241,.32));box-shadow:0 18px 0 rgba(23,37,84,.42),0 36px 34px rgba(2,6,23,.38),inset 0 0 32px rgba(125,211,252,.13);animation:si3dConsole 6s ease-in-out infinite}
  #px-signin .si-3d-console::before{content:'';position:absolute;inset:17px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025))}
  #px-signin .si-3d-graph{left:96px;bottom:113px;width:130px;height:65px;transform:rotate(-2deg);animation:si3dFloat 4.8s ease-in-out infinite}
  #px-signin .si-3d-graph i{bottom:0;width:22px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#67e8f9,#4f46e5);box-shadow:0 0 18px rgba(103,232,249,.32);transform-origin:bottom;animation:si3dBars 3.4s ease-in-out infinite}
  #px-signin .si-3d-graph i:nth-child(1){left:0;height:31px}.si-3d-graph i:nth-child(2){left:34px;height:52px;animation-delay:-1.2s}.si-3d-graph i:nth-child(3){left:68px;height:42px;animation-delay:-2.2s}.si-3d-graph i:nth-child(4){left:102px;height:61px;animation-delay:-.6s}
  #px-signin .si-3d-headset{left:108px;top:38px;width:150px;height:154px;animation:si3dHeadset 5.5s ease-in-out infinite}
  #px-signin .si-3d-band{inset:0 14px 35px;border:14px solid rgba(191,219,254,.82);border-bottom-color:transparent;border-radius:76px 76px 38px 38px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 -3px 18px rgba(96,165,250,.38)}
  #px-signin .si-3d-cup{top:92px;width:34px;height:48px;border:1px solid rgba(255,255,255,.32);border-radius:15px;background:linear-gradient(145deg,#60a5fa,#4338ca);box-shadow:0 8px 18px rgba(2,6,23,.38),inset 0 0 10px rgba(255,255,255,.18)}
  #px-signin .si-3d-cup.c1{left:5px;transform:rotate(8deg)}#px-signin .si-3d-cup.c2{right:5px;transform:rotate(-8deg)}
  #px-signin .si-3d-mic{right:-2px;top:122px;width:68px;height:5px;border-radius:999px;background:linear-gradient(90deg,#818cf8,#bae6fd);transform:rotate(22deg);transform-origin:right center}
  #px-signin .si-3d-mic::before{content:'';position:absolute;left:-8px;top:-5px;width:15px;height:15px;border-radius:50%;background:#a5f3fc;box-shadow:0 0 17px rgba(165,243,252,.7)}
  #px-signin .si-3d-chat{right:15px;top:132px;width:82px;height:58px;border:1px solid rgba(255,255,255,.34);border-radius:20px 20px 20px 5px;background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(99,102,241,.26));backdrop-filter:blur(8px);box-shadow:0 16px 34px rgba(2,6,23,.26);animation:si3dFloat 4.2s ease-in-out infinite -1.4s}
  #px-signin .si-3d-chat i{top:25px;width:7px;height:7px;border-radius:50%;background:#e0f2fe;box-shadow:0 0 10px rgba(224,242,254,.55)}
  #px-signin .si-3d-chat i:nth-child(1){left:21px}.si-3d-chat i:nth-child(2){left:38px}.si-3d-chat i:nth-child(3){left:55px}
  #px-signin .si-3d-ticket{left:23px;top:167px;width:92px;height:64px;border:1px solid rgba(255,255,255,.28);border-radius:17px;background:linear-gradient(145deg,rgba(45,212,191,.3),rgba(30,64,175,.28));box-shadow:0 18px 34px rgba(2,6,23,.24);animation:si3dFloat 5.2s ease-in-out infinite -2.4s}
  #px-signin .si-3d-ticket::before,#px-signin .si-3d-ticket::after{content:'';position:absolute;left:20px;height:5px;border-radius:999px;background:rgba(224,242,254,.72)}
  #px-signin .si-3d-ticket::before{top:22px;width:51px}.si-3d-ticket::after{top:36px;width:35px}
  #px-signin .si-3d-orbit{left:42px;top:23px;width:278px;height:278px;border:1px solid rgba(196,181,253,.26);border-radius:50%;animation:si3dOrbit 12s linear infinite}
  #px-signin .si-3d-orbit i{left:26px;top:26px;width:12px;height:12px;border-radius:50%;background:#a5f3fc;box-shadow:0 0 18px 5px rgba(103,232,249,.45)}
  #px-signin .si-visual-image .si-3d-scene{display:none}
  #px-signin .si-visual-image .si-aside-veil{background:linear-gradient(90deg,rgba(2,6,23,.8) 0%,rgba(2,6,23,.58) 56%,rgba(2,6,23,.3) 100%)}
  #px-signin .si-visual-solid .si-3d-scene{opacity:.5}
  @keyframes si3dFloat{0%,100%{transform:translate3d(0,0,24px)}50%{transform:translate3d(0,-13px,48px)}}
  @keyframes si3dConsole{0%,100%{transform:rotateX(59deg) rotateZ(-31deg) translate3d(0,0,0)}50%{transform:rotateX(57deg) rotateZ(-29deg) translate3d(0,-7px,18px)}}
  @keyframes si3dHeadset{0%,100%{transform:rotate(-5deg) translate3d(0,0,62px)}50%{transform:rotate(3deg) translate3d(0,-12px,86px)}}
  @keyframes si3dHalo{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
  @keyframes si3dOrbit{to{transform:rotate(360deg)}}
  @keyframes si3dBars{0%,100%{transform:scaleY(.76)}50%{transform:scaleY(1.08)}}
  #px-signin.si-a-top .si-aside-inner{justify-content:flex-start}
  #px-signin.si-a-bottom .si-aside-inner{justify-content:flex-end}
  #px-si-cardlogo{display:block;max-width:180px;height:38px;width:auto;margin:0 auto 18px}
  #px-signin.si-hl #px-si-cardlogo{margin-left:0}
  #px-signin.si-hl .si-head{text-align:left}
  #px-signin.si-hl .si-sub{margin-left:0;text-align:left}
  #px-si-termsnote{max-width:520px;margin:15px auto 0;color:var(--ink-3);font-size:11.5px;line-height:1.6;text-align:center}
  #px-signin.si-w-narrow .si-main-inner{max-width:410px}
  #px-signin.si-w-wide .si-main-inner{max-width:620px}
  /* Centered: a calm, trust-first focal card on a restrained ambient stage. */
  #px-signin.si-centered{padding:42px 18px 58px}
  #px-signin.si-centered::before{content:'';position:absolute;z-index:-1;left:50%;top:46%;width:min(860px,92vw);height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 68%);pointer-events:none}
  /* Boxed: an enterprise access console with a clear containing shell. */
  #px-signin.si-boxed{max-width:780px;padding:22px;border:1px solid var(--line);border-radius:30px;background:color-mix(in srgb,var(--card) 82%,var(--bg));box-shadow:0 34px 90px -54px rgba(2,6,23,.55)}
  #px-signin.si-boxed .si-main{padding:30px 26px 34px;border:1px solid var(--line-soft,var(--line));border-radius:23px;background:var(--bg)}
  #px-signin.si-boxed .si-card{box-shadow:0 22px 52px -34px rgba(2,6,23,.45)}
  #px-signin.si-boxed .si-eyebrow::after{content:'';width:38px;height:1px;background:var(--line)}
  /* Minimal: editorial two-column access with nearly no chrome. */
  #px-signin.si-minimal{max-width:940px;padding:48px 28px}
  #px-signin.si-minimal .si-main-inner{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(330px,1.22fr);gap:clamp(40px,7vw,92px);align-items:start;max-width:none}
  /* The 3px accent rule above the eyebrow was removed at the owner's request —
     with the heading bare on the page it read as a stray line rather than a
     kicker. Padding kept so the heading keeps its position. */
  #px-signin.si-minimal .si-head{position:sticky;top:100px;margin:24px 0 0;padding-top:18px;text-align:left}
  #px-signin.si-minimal .si-sub{margin-left:0;text-align:left}
  /* Was `10px 0 10px 34px` with no border and no radius: zero RIGHT padding, so
     every field ran to within a pixel of the card edge and read as cut off, and
     10px on top left the intro jammed against the heading. It is now a real
     card — bordered, rounded on the same scale as every other design, and given
     even breathing room on all four sides. */
  #px-signin.si-minimal .si-card{padding:36px 30px 38px!important;
    border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
    border-radius:clamp(16px,calc(var(--r-lg,16px) * 1.35),28px);
    background:var(--card);box-shadow:0 1px 2px rgba(2,6,23,.04);overflow:visible}
  #px-signin.si-minimal .si-card::before{display:none}
  #px-signin.si-minimal .si-access{margin:24px 0 0;padding:18px 0 0;background:transparent}
  /* Split + panel: complete product compositions, with a real mobile brand band. */
  #px-signin.si-split,#px-signin.si-panel-left{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);max-width:1120px;min-height:680px;border:1px solid var(--line);border-radius:30px;background:var(--card);box-shadow:0 42px 100px -52px rgba(2,6,23,.58);overflow:hidden}
  #px-signin.si-split>#px-blocks-signin,#px-signin.si-panel-left>#px-blocks-signin{grid-column:1/-1}
  #px-signin.si-split>.si-main{grid-column:1;grid-row:2;padding:58px 54px}
  #px-signin.si-split>.si-aside{grid-column:2;grid-row:2}
  #px-signin.si-panel-left>.si-aside{grid-column:1;grid-row:2}
  #px-signin.si-panel-left>.si-main{grid-column:2;grid-row:2;padding:58px 54px}
  #px-signin.si-split .si-aside,#px-signin.si-panel-left .si-aside{display:block;padding:56px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 88%,#0f172a),color-mix(in srgb,var(--accent) 48%,#020617))}
  #px-signin.si-split .si-head,#px-signin.si-panel-left .si-head{text-align:left}
  #px-signin.si-split .si-sub,#px-signin.si-panel-left .si-sub{margin-left:0;text-align:left}
  #px-signin.si-split .si-card,#px-signin.si-panel-left .si-card{padding:0!important;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  #px-signin.si-split .si-card::before,#px-signin.si-panel-left .si-card::before{display:none}
  #px-signin.si-split .si-access,#px-signin.si-panel-left .si-access{margin:24px 0 0;padding:18px 0 0;background:transparent}
  #px-signin.si-split #px-si-termsnote,#px-signin.si-panel-left #px-si-termsnote{margin-left:0;text-align:left}
  /* Hero: a full brand stage with a deliberately overlapping access card. */
  #px-signin.si-hero{max-width:1120px;padding:64px 28px 70px;border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 92%,#0f172a),color-mix(in srgb,var(--accent) 45%,#020617));overflow:hidden}
  #px-signin.si-hero::before,#px-signin.si-hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
  #px-signin.si-hero::before{width:620px;height:620px;right:-260px;top:-380px;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 90px rgba(255,255,255,.045),0 0 0 180px rgba(255,255,255,.028)}
  #px-signin.si-hero::after{width:320px;height:320px;left:-180px;bottom:-210px;background:rgba(255,255,255,.055)}
  #px-signin.si-hero .si-main-inner{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(370px,1.2fr);gap:clamp(38px,6vw,80px);align-items:center;max-width:980px}
  #px-signin.si-hero .si-head{position:relative;z-index:2;margin:0;text-align:left}
  #px-signin.si-hero .si-eyebrow,#px-signin.si-hero #px-si-heading,#px-signin.si-hero .si-sub{color:#fff}
  #px-signin.si-hero .si-eyebrow::before{background:#6ee7b7;box-shadow:0 0 0 5px rgba(110,231,183,.16)}
  #px-signin.si-hero .si-sub{margin-left:0;color:rgba(255,255,255,.78);text-align:left}
  #px-signin.si-hero .si-card{box-shadow:0 42px 86px -36px rgba(2,6,23,.72)}

  /* P21 sign-in matrix — three designs per authentication family. */
  #px-signin>#px-blocks-signin:not(:empty){max-width:760px;margin:0 auto 18px}
  #px-signin:has(>#px-blocks-signin :is(.pb-heading,h1,h2,h3)) .si-head{display:none}
  #px-signin.si-centered{padding-top:18px}
  #px-signin.si-centered:has(>#px-blocks-signin:not(:empty)){padding-top:4px}
  #px-signin.si-centered:has(>#px-blocks-signin :is(.pb-heading,h1,h2,h3)) .si-main{margin-top:0}
  /* Magic link / OTP: focused (base), inbox pass, passcode stage. */
  #px-signin.si-mg-inbox #px-si-magic,#px-signin.si-mg-inbox #px-si-code{position:relative;padding:20px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 5%,var(--card))}
  #px-signin.si-mg-inbox #px-si-magic::before,#px-signin.si-mg-inbox #px-si-code::before{content:'Inbox pass';display:block;margin-bottom:13px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
  #px-signin.si-mg-inbox #px-si-send,#px-signin.si-mg-inbox #px-si-verify{border-radius:999px}
  #px-signin.si-mg-passcode #px-si-magic,#px-signin.si-mg-passcode #px-si-code{padding:22px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:18px;text-align:center}
  #px-signin.si-mg-passcode #px-si-magic label,#px-signin.si-mg-passcode #px-si-code label{text-align:left}
  #px-signin.si-mg-passcode #px-si-otp{min-height:62px;border-width:2px;background:color-mix(in srgb,var(--accent) 5%,var(--card))}
  #px-signin.si-mg-passcode #px-si-send,#px-signin.si-mg-passcode #px-si-verify{background:transparent;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
  /* Password/account: classic (base), account panel, security vault. */
  #px-signin.si-pw-account #px-si-tabs{border:0;padding:5px;background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
  #px-signin.si-pw-account #px-si-pw,#px-signin.si-pw-account #px-si-register,#px-signin.si-pw-account #px-si-reset,#px-signin.si-pw-account #px-si-newpw{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 14px 34px -28px rgba(2,6,23,.5)}
  #px-signin.si-pw-vault #px-si-tabs{background:var(--ink);border-color:var(--ink)}
  #px-signin.si-pw-vault #px-si-tabs button{color:color-mix(in srgb,var(--card) 72%,transparent)}
  #px-signin.si-pw-vault #px-si-tabs button.on{background:var(--card);color:var(--ink)}
  #px-signin.si-pw-vault #px-si-pw,#px-signin.si-pw-vault #px-si-register,#px-signin.si-pw-vault #px-si-reset,#px-signin.si-pw-vault #px-si-newpw{padding:22px;border-left:4px solid var(--accent);border-radius:0 16px 16px 0;background:color-mix(in srgb,var(--ink) 4%,var(--card))}
  #px-signin.si-pw-vault .px-pw-eye{border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
  /* Enterprise/social: provider stack (base), provider grid, enterprise console. */
  #px-signin.si-en-grid #px-si-sso-wrap .signin-methods,#px-signin.si-en-grid #px-si-saml-wrap .signin-methods{display:grid;grid-template-columns:1fr}
  #px-signin.si-en-grid #px-si-sso,#px-signin.si-en-grid #px-si-saml{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--card));box-shadow:0 10px 26px -22px rgba(2,6,23,.55)}
  #px-signin.si-en-grid #px-si-social{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #px-signin.si-en-console #px-si-sso-wrap,#px-signin.si-en-console #px-si-saml-wrap,#px-signin.si-en-console #px-si-social-wrap{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--line-soft,var(--bg))}
  #px-signin.si-en-console #px-si-sso-wrap .divider,#px-signin.si-en-console #px-si-saml-wrap .divider,#px-signin.si-en-console #px-si-social-wrap .divider{margin:0 0 10px;text-align:left}
  #px-signin.si-en-console .btn-ghost{border-color:transparent;background:var(--card);box-shadow:0 8px 24px -20px rgba(2,6,23,.5)}
  /* Third full split-screen design: diagonal brand stage + floating access card. */
  #px-signin.si-split-card{display:grid;grid-template-columns:minmax(300px,.86fr) minmax(420px,1.14fr);max-width:1160px;min-height:680px;border:1px solid var(--line);border-radius:30px;background:color-mix(in srgb,var(--accent) 4%,var(--bg));box-shadow:0 42px 100px -52px rgba(2,6,23,.58);overflow:hidden}
  #px-signin.si-split-card>#px-blocks-signin{grid-column:1/-1}
  #px-signin.si-split-card>.si-aside{grid-column:1;grid-row:2;display:block;padding:58px 72px 58px 52px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 90%,#0f172a),color-mix(in srgb,var(--accent) 48%,#020617));clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
  #px-signin.si-split-card>.si-main{grid-column:2;grid-row:2;display:flex;align-items:center;padding:44px 52px 44px 28px}
  #px-signin.si-split-card .si-head{text-align:left}
  #px-signin.si-split-card .si-sub{margin-left:0;text-align:left}
  #px-signin.si-split-card .si-card{box-shadow:0 30px 74px -34px rgba(2,6,23,.48)}
  #px-signin.si-split-card #px-si-termsnote{margin-left:0;text-align:left}
  @media(max-width:760px){
    #px-signin.si-split-card{grid-template-columns:1fr;min-height:0;border-radius:22px}
    #px-signin.si-split-card>.si-aside{grid-column:1;grid-row:2;min-height:0;padding:26px 24px;clip-path:none}
    #px-signin.si-split-card>.si-main{grid-column:1;grid-row:3;padding:28px 18px 34px}
    #px-signin.si-split-card .si-aside-inner{display:grid;gap:7px}
    #px-signin.si-split-card .si-aside-logo,#px-signin.si-split-card .si-aside-q{display:none}
    #px-signin.si-split-card .si-aside-badge{margin-bottom:8px}
    #px-signin.si-split-card .si-aside-h{font-size:21px}
    #px-signin.si-split-card .si-aside-t{margin-top:2px;font-size:12.5px}
    #px-signin.si-split-card .si-aside-proof{grid-template-columns:repeat(3,1fr);margin-top:12px}
    #px-signin.si-split-card .si-aside-proof span{font-size:0}
    #px-signin.si-split-card .si-aside-proof i{width:100%;height:5px;border-radius:999px}
  }

  /* Studio surface options remain authoritative on top of every composition. */
  #px-signin.si-f-filled input{background:var(--line-soft);border-color:transparent}
  #px-signin.si-f-filled input:focus{background:var(--card);border-color:var(--accent)}
  #px-signin.si-f-underline input{border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;padding-left:2px}
  #px-signin.si-f-underline input:focus{border-bottom-color:var(--accent);box-shadow:none}
  #px-signin.si-f-pill input{border-radius:999px;padding-left:16px}
  #px-signin.si-fs-compact input{min-height:40px;padding-top:8px;padding-bottom:8px;font-size:13px}
  #px-signin.si-fs-large input{min-height:54px;padding-top:14px;padding-bottom:14px;font-size:15px}
  #px-signin.si-b-solid .btn{background:var(--accent);box-shadow:none}
  #px-signin.si-b-gradient .btn{background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d,var(--accent))))}
  #px-signin.si-b-soft .btn{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);box-shadow:none}
  #px-signin.si-b-outline .btn{background:transparent;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
  /* ── BUTTON SIZE AND WIDTH ───────────────────────────────────────────────
     The sign-in button is a full-width slab by default. These let the operator
     size it and let it take its natural width instead. */
  #px-signin.si-bs-small .btn{min-height:0;padding:10px 20px;font-size:13px;border-radius:var(--r-md,12px)}
  #px-signin.si-bs-large .btn{padding:16px 26px;font-size:16px}
  #px-signin.si-bw-auto .btn{width:auto;min-width:0;align-self:flex-start;display:inline-flex}
  /* The row keeps the button left-aligned beside whatever follows it. */
  #px-signin.si-bw-auto form,#px-signin.si-bw-auto .si-form{display:flex;flex-direction:column;align-items:flex-start}
  #px-signin.si-bw-auto input{width:100%}
  /* The password form is a column so the recovery link can be reordered ABOVE
     the action — the conventional place for it, and where people look. Markup
     order stays button-then-link for tab order; only the visual order changes.
     A fit-to-label button would otherwise let the link ride up beside it as
     inline content, so they are explicitly separate rows either way. */
  #px-signin #px-si-pw{display:flex;flex-direction:column}
  #px-signin #px-si-pw > .link{order:1;align-self:flex-start;margin:12px 0 0}
  #px-signin #px-si-pw > .btn{order:2}
  #px-signin.si-bw-auto #px-si-pw{align-items:flex-start}
  #px-signin.si-bw-auto #px-si-pw > label,#px-signin.si-bw-auto #px-si-pw > input,
  #px-signin.si-bw-auto #px-si-pw > .px-pw-wrap{align-self:stretch}
  #px-signin.si-c-flat .si-card{box-shadow:none;border:1px solid var(--line)}
  #px-signin.si-c-elevated .si-card{box-shadow:0 30px 74px -28px rgba(2,6,23,.42);border-color:transparent}
  #px-signin.si-c-glass .si-card{background:color-mix(in srgb,var(--card) 76%,transparent);backdrop-filter:blur(18px);border-color:color-mix(in srgb,var(--card) 42%,transparent)}
  /* ── Card look vs SPLIT layout ───────────────────────────────────────────
     In split/panel-left the surrounding panel IS the card: the layout rules
     above deliberately strip the inner .si-card back to nothing. The card-look
     presets carry the same specificity (1,2,0) and are declared later, so
     `elevated`/`flat`/`glass` re-painted a white box floating inside the panel.
     Structure wins over decoration — reset it after them. */
  #px-signin.si-split .si-card,#px-signin.si-panel-left .si-card{
    background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}
  /* The form column is shorter than the brand panel, so centre it in the shared
     row instead of letting it hang from the top with dead space beneath. */
  /* The form half carries its own surface. Without it the column shows whatever
     page_bg paints (tint/gradient) while the brand panel is solid, so the two
     halves never read as one clean split. */
  #px-signin.si-split>.si-main,#px-signin.si-panel-left>.si-main{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(28px,5vw,88px);background:var(--card,var(--bg))}
  /* ── FULL-BLEED SPLIT ────────────────────────────────────────────────────
     The split is a whole-page layout, not a card: the two panels run edge to
     edge and fill the height between the nav and the footer. #px-wrap caps the
     page at 980px, so the container itself releases its constraint for this
     layout — done with :has() rather than 100vw margin maths, which overshoots
     by the scrollbar width and adds a horizontal scrollbar. */
  #px-wrap:has(#px-signin.si-split),#px-wrap:has(#px-signin.si-panel-left){max-width:none;padding:0}
  /* With no blocks configured the block row still reserved height, leaving a
     strip of page above the brand panel so the split no longer ran bottom to
     top. Collapse it when it has nothing in it.
     The panels are pinned to grid-row 2, so hiding the block row is not enough:
     row 1 survives as an empty implicit track and pushes both halves down. Pull
     them up to row 1 when there is nothing above them. */
  #px-signin.si-split>#px-blocks-signin:empty,#px-signin.si-panel-left>#px-blocks-signin:empty{display:none}
  #px-signin.si-split:has(>#px-blocks-signin:empty),#px-signin.si-panel-left:has(>#px-blocks-signin:empty){grid-template-rows:1fr}
  #px-signin.si-split:has(>#px-blocks-signin:empty)>.si-main,#px-signin.si-panel-left:has(>#px-blocks-signin:empty)>.si-main,
  #px-signin.si-split:has(>#px-blocks-signin:empty)>.si-aside,#px-signin.si-panel-left:has(>#px-blocks-signin:empty)>.si-aside{grid-row:1}
  /* Height is operator-chosen. Default 'full' fills the viewport below the nav
     and leaves the footer below the fold. 'band' also subtracts the footer so
     the whole page fits with nothing to scroll to — shorter, and only right
     when the footer is small. 'auto' just wraps the content. */
  #px-signin.si-split,#px-signin.si-panel-left{max-width:none;border:0;border-radius:0;box-shadow:none;
    min-height:calc(100dvh - var(--px-navh-abs,66px))}
  #px-signin.si-h-band{min-height:calc(100dvh - var(--px-navh-abs,66px) - var(--px-footh,0px))}
  #px-signin.si-h-auto{min-height:0}
  #px-signin.si-split .si-aside,#px-signin.si-panel-left .si-aside{padding:clamp(40px,5vw,72px)}
  /* ── PANEL VERTICAL BALANCE ──────────────────────────────────────────────
     Centring the whole stack leaves the badge/heading/proof clustered together
     with a dead third underneath. A premium panel anchors the attribution to
     the bottom instead: the stack starts at the top, the quote takes the slack.
     Only when there IS a quote — otherwise centring is still the better look. */
  #px-signin.si-split .si-aside-inner:has(.si-aside-q),
  #px-signin.si-panel-left .si-aside-inner:has(.si-aside-q){justify-content:flex-start}
  #px-signin.si-split .si-aside-q,#px-signin.si-panel-left .si-aside-q{margin-top:auto}
  /* The 3D scene is placed to bleed off the page edge (right:-34px). Inside a
     rounded card that same bleed reads as a clipped illustration, so pull it
     back within the card's own bounds. */
  #px-signin.si-split .si-aside.si-shape-card .si-3d-scene,
  #px-signin.si-panel-left .si-aside.si-shape-card .si-3d-scene{right:clamp(10px,2vw,30px)}
  /* Copy and artwork must hold separate columns. `.si-aside-proof` is
     width:100%, so the benefit list alone stretched the full panel and ran
     under the illustration while the badge and heading cleared it. Size it to
     its content, and cap the text so longer copy cannot re-create the clash. */
  #px-signin.si-split .si-aside.si-shape-card .si-aside-proof,
  #px-signin.si-panel-left .si-aside.si-shape-card .si-aside-proof{width:auto;justify-items:start}
  #px-signin.si-split .si-aside.si-shape-card .si-aside-h,
  #px-signin.si-panel-left .si-aside.si-shape-card .si-aside-h,
  #px-signin.si-split .si-aside.si-shape-card .si-aside-t,
  #px-signin.si-panel-left .si-aside.si-shape-card .si-aside-t{max-width:min(46%,340px)}
  /* Mirroring the panel's internals when it moves to the left was TRIED and
     rejected — the owner looked at it and reversed it. Copy stays left and the
     artwork stays right in BOTH split designs; only the panel changes side. */
  /* ── FORM COLUMN RHYTHM ──────────────────────────────────────────────────
     The form side is the half people actually use, so it gets a deliberate
     type scale and spacing rather than inheriting the boxed-card defaults. */
  #px-signin.si-split .si-eyebrow,#px-signin.si-panel-left .si-eyebrow{margin-bottom:10px}
  #px-signin.si-split .si-head,#px-signin.si-panel-left .si-head{margin-bottom:26px}
  #px-signin.si-split .si-sub,#px-signin.si-panel-left .si-sub{font-size:14.5px;line-height:1.6;color:var(--ink-3)}
  #px-signin.si-split .si-intro,#px-signin.si-panel-left .si-intro{margin-bottom:22px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
  #px-signin.si-split .si-card label,#px-signin.si-panel-left .si-card label{margin-bottom:7px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  #px-signin.si-split .si-card input,#px-signin.si-panel-left .si-card input{transition:border-color .15s,box-shadow .15s,background .15s}
  #px-signin.si-split .si-card input:focus,#px-signin.si-panel-left .si-card input:focus{
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
  #px-signin.si-split .si-card .btn,#px-signin.si-panel-left .si-card .btn{margin-top:18px;transition:transform .15s,box-shadow .15s,filter .15s}
  #px-signin.si-split .si-card .btn:hover,#px-signin.si-panel-left .si-card .btn:hover{transform:translateY(-1px);filter:saturate(1.06)}
  /* The secondary route reads as a quiet closing note, not a second CTA. */
  #px-signin.si-split .si-access,#px-signin.si-panel-left .si-access{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft,var(--line))}
  /* ── SOFT PANEL TONE ─────────────────────────────────────────────────────
     The panel is built white-on-dark: colour, ring decorations and the veil all
     assume a deep surface. 'soft' paints a light accent tint, so each of those
     has to be answered or the copy vanishes into the tint. These MUST stay
     after `.si-split .si-aside{color:#fff}` above — equal specificity, so
     source order is the only thing deciding the winner. */
  #px-signin .si-aside.si-tone-soft{color:var(--ink)}
  #px-signin .si-aside.si-tone-soft::before,#px-signin .si-aside.si-tone-soft::after,
  #px-signin .si-aside.si-tone-soft .si-aside-veil{display:none}
  #px-signin .si-aside.si-tone-soft .si-aside-inner{text-shadow:none}
  #px-signin .si-aside.si-tone-soft .si-aside-badge{border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  #px-signin .si-aside.si-tone-soft .si-aside-t{color:var(--ink-2);opacity:1}
  #px-signin .si-aside.si-tone-soft .si-aside-proof i{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
  #px-signin .si-aside.si-tone-soft .si-aside-q{border-top-color:color-mix(in srgb,var(--ink) 12%,transparent)}
  #px-signin .si-aside.si-tone-soft .si-aside-q span{color:var(--ink-3);opacity:1}
  #px-signin .si-aside.si-tone-soft .si-aside-logo{background:transparent;padding:0;box-shadow:none}
  /* ── PANEL SHAPE: FLOATING CARD ──────────────────────────────────────────
     'full' runs the panel edge to edge. 'card' floats it as a rounded panel
     with page showing above, below and on its outer side. Deliberately keyed
     on the SHAPE class, not on the image one — the animated 3D scene and a
     solid colour get the card treatment too. */
  /* Scoped to the two full-bleed designs ON PURPOSE. si-split-card is ALREADY a
     card, with its own diagonal clip-path and geometry — applying these margins,
     radius and the 3D reposition below on top of it fought that design and
     pushed the artwork forward over its own copy. */
  #px-signin.si-split .si-aside.si-shape-card,#px-signin.si-panel-left .si-aside.si-shape-card{overflow:hidden;
    border-radius:var(--r-xl,30px);padding:clamp(26px,3vw,52px);
    margin:clamp(18px,3vh,40px) clamp(18px,2vw,40px) clamp(18px,3vh,40px) 0}
  #px-signin.si-panel-left .si-aside.si-shape-card{margin-right:0;margin-left:clamp(18px,2vw,40px)}
  @media(max-width:860px){#px-signin.si-split .si-aside.si-shape-card,#px-signin.si-panel-left .si-aside.si-shape-card{border-radius:0;margin:0}}
  /* ── PANEL IMAGE, CONTAINED ──────────────────────────────────────────────
     'cover' crops the artwork to the panel box, which decapitates a product
     shot. 'inset' lays it out whole, on top of the panel, free to overflow —
     hence a drop-shadow filter rather than a clipped box with a box-shadow. */
  #px-signin .si-aside.si-img-inset{display:flex;flex-direction:column;justify-content:center;gap:20px;overflow:visible}
  #px-signin .si-aside-shot{position:relative;z-index:2;overflow:visible;display:flex;justify-content:center}
  #px-signin .si-aside-shot img{display:block;width:100%;height:auto;max-height:min(46vh,400px);object-fit:contain;
    filter:drop-shadow(0 38px 60px rgba(2,6,23,.26))}
  #px-signin .si-aside.si-img-inset .si-aside-inner{min-height:0;align-items:center;text-align:center}
  #px-signin .si-aside .si-aside-inner:empty{display:none}
  @media(max-width:860px){
    #px-signin.si-split,#px-signin.si-panel-left{grid-template-columns:1fr;min-height:0}
    #px-signin.si-split>.si-main,#px-signin.si-panel-left>.si-main{grid-row:auto;padding:36px 22px}
    #px-signin.si-split .si-aside,#px-signin.si-panel-left .si-aside{grid-row:auto;padding:34px 22px}
  }
  #px-signin.si-bg-tint{background-color:color-mix(in srgb,var(--accent) 6%,var(--bg))}
  #px-signin.si-bg-gradient{background-image:linear-gradient(155deg,color-mix(in srgb,var(--accent) 14%,var(--bg)),var(--bg) 70%)}
  /* The image URL itself is set inline by the renderer; the framing is here. */
  #px-signin.si-bg-image{background-size:cover;background-position:center;background-repeat:no-repeat}
  @media(max-width:760px){
    #px-signin{border-radius:22px}
    #px-signin .si-card{padding:23px 20px!important;border-radius:18px}
    #px-signin .si-access{margin:20px -20px -23px;padding:16px 20px 18px}
    #px-signin .si-session{display:none}
    #px-signin.si-centered{padding:28px 0 44px}
    #px-signin.si-boxed{padding:10px;border-radius:22px}
    #px-signin.si-boxed .si-main{padding:24px 10px}
    #px-signin.si-minimal{padding:28px 4px}
    #px-signin.si-minimal .si-main-inner,#px-signin.si-hero .si-main-inner{grid-template-columns:1fr;gap:26px}
    #px-signin.si-minimal .si-head{position:static;margin:0}
    #px-signin.si-minimal .si-card{padding:0!important;border-left:0}
    #px-signin.si-minimal .si-access{margin:22px 0 0;padding:17px 0 0}
    #px-signin.si-split,#px-signin.si-panel-left{grid-template-columns:1fr;min-height:0;border-radius:22px}
    #px-signin.si-split>.si-aside,#px-signin.si-panel-left>.si-aside{grid-column:1;grid-row:2;display:block!important;min-height:0;padding:26px 24px}
    #px-signin.si-split>.si-main,#px-signin.si-panel-left>.si-main{grid-column:1;grid-row:3;padding:30px 22px 34px}
    #px-signin.si-split .si-aside-inner,#px-signin.si-panel-left .si-aside-inner{display:grid;grid-template-columns:1fr auto;gap:7px 16px}
    #px-signin.si-split .si-aside-badge,#px-signin.si-panel-left .si-aside-badge{grid-column:1/-1;margin-bottom:8px;justify-self:start}
    #px-signin.si-split .si-aside-logo,#px-signin.si-panel-left .si-aside-logo{display:none}
    #px-signin.si-split .si-aside-h,#px-signin.si-panel-left .si-aside-h{font-size:21px}
    #px-signin.si-split .si-aside-t,#px-signin.si-panel-left .si-aside-t{grid-column:1/-1;margin-top:2px;font-size:12.5px}
    #px-signin.si-split .si-aside-proof,#px-signin.si-panel-left .si-aside-proof{grid-column:1/-1;grid-template-columns:repeat(3,1fr);margin-top:12px}
    #px-signin.si-split .si-aside-proof span,#px-signin.si-panel-left .si-aside-proof span{font-size:0;gap:0}
    #px-signin.si-split .si-aside-proof i,#px-signin.si-panel-left .si-aside-proof i{width:100%;height:5px;border-radius:999px}
    #px-signin.si-split .si-aside-q,#px-signin.si-panel-left .si-aside-q{display:none}
    #px-signin .si-3d-scene{right:-20px;top:-48px;width:230px;height:250px;opacity:.38;transform:scale(.72);transform-origin:top right}
    #px-signin.si-hero{padding:36px 18px 30px;border-radius:22px}
    #px-signin.si-hero .si-head{text-align:center}
    #px-signin.si-hero .si-sub{margin-inline:auto;text-align:center}
  }
  @media(max-width:480px){
    #px-signin .si-card-meta{align-items:flex-start}
    #px-signin #px-si-heading{font-size:29px}
    #px-signin.si-split>.si-main,#px-signin.si-panel-left>.si-main{padding-inline:16px}
  }
  @media(prefers-reduced-motion:reduce){#px-signin *,#px-signin *::before,#px-signin *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
  /* PHASE_PORTAL_A11Y — skip link + focus visibility */
  .px-skip{position:fixed;top:-60px;left:12px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:800;font-size:13px;text-decoration:none;transition:top .18s}
  .px-skip:focus{top:0;outline:2px solid #fff;outline-offset:-4px}
  #px-wrap:focus{outline:none}
  /* ═══ PHASE_PORTAL_ASSISTANT — moved to opsiq/assets/portal-assistant.css so the HELP
     CENTRE can load the very same module. /hc prints only theme_css + chrome_css, never
     this file, so leaving the assistant here meant it could never appear there — and a
     second copy for /hc would be a dual-copy trap. ONE stylesheet, two surfaces. ═══ */
  /* notification preferences */
  #p-notify-rows{display:flex;flex-direction:column}
  .np-toggle{display:flex;align-items:flex-start;gap:13px;padding:14px 2px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
  .np-allrow{padding-top:6px}
  .np-toggle input{position:absolute;opacity:0;width:0;height:0}
  .np-sw{flex-shrink:0;width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:.2s var(--ease);margin-top:2px}
  .np-sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s var(--ease)}
  .np-toggle input:checked + .np-sw{background:var(--accent)}
  .np-toggle input:checked + .np-sw::after{transform:translateX(18px)}
  .np-toggle.np-danger input:checked + .np-sw{background:#ef4444}
  .np-lbl{line-height:1.4}.np-lbl b{display:block;font-size:14px;font-weight:750;color:var(--ink)}.np-lbl i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
  .np-toggle.dim{opacity:.5;pointer-events:none}
  .brow mark{background:color-mix(in srgb,var(--accent) 28%,transparent);color:inherit;border-radius:3px;padding:0 1px}
  /* ⚠ THIS LIST IS THE ONLY PRINT RULE IN THE PORTAL, and it is GLOBAL — every layout prints
     through it, which is why no layout needs to be "the print one".
     ⚠ ADDED: #pxa-launch and #px-reply-fab. The list already hid the OLD assistant element
     (#opsiq-ask-peek) but not the launcher or the reply FAB introduced since. Both are
     position:fixed, so they would stamp onto the paper — potentially on every page. Also hiding
     the hero band and the floating assistant panel: a printed record does not need a page header
     the height of a screen. */
  @media print{
    .pnav,.pfoot,#px-footer,#px-nav,#px-announce,.crumbs,.d-bar,#px-composer,.sd-actions,
    #px-d-cards,.px-acct,#opsiq-ask-peek,
    #pxa-launch,#pxa-panel,#px-reply-fab,#px-subhero,.px-skip,#px-spot{display:none!important}
    #px-d-grid{grid-template-columns:1fr!important}
    .card{box-shadow:none!important;border:1px solid var(--line)!important}
  }
  /* ═══ Mobile polish for the ticket surfaces ═══ */
  @media(max-width:640px){
    .px-vtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .px-vtabs::-webkit-scrollbar{display:none}
    .px-vtab{white-space:nowrap;flex:0 0 auto}
    .rq-toolbar{flex-direction:column;align-items:stretch;gap:8px}
    .rq-search{width:100%}
    #px-d-head{margin-bottom:10px}
    #px-d-subject{font-size:17px}
    .d-subjrow{flex-direction:column}
    .d-reply-top{width:100%;justify-content:center}
    .d-bar{flex-direction:column;align-items:stretch}
    .d-search{max-width:none}
    .d-actions-top{flex-wrap:wrap}
    .dp-cards.dp-g,.dp-cards.dp-g2,.dp-cards.dp-g3,.dp-mega{grid-template-columns:1fr!important}
    .prio-btns{grid-template-columns:repeat(2,1fr)}
    #px-d-card.dsh-on #px-d-head{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
    .smc,.side-card{padding:15px 16px}
    .rtable-wrap{border-radius:12px}
  }
  #px-d-card.dsh-on{overflow:visible}
  #px-d-card.dsh-on #px-d-head{position:sticky;top:calc(var(--px-navh,0px) + 8px);z-index:8;background:var(--card);margin:-4px -20px 12px;padding:10px 20px;border-bottom:1px solid var(--line-soft);border-radius:12px 12px 0 0}
  .pnav-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .pnav-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;color:var(--ink);text-decoration:none}
  .pnav-brand:hover{opacity:.86}
  /* PHASE_PORTAL_NAV_SECTION + P08 polish — the "Brand | SUPPORT" lockup, set the
     way the best help centers set it: a quiet hairline with real breathing room,
     and a medium-weight, generously tracked small-caps label beside the wordmark. */
  .pnav-sep{width:1px;height:20px;background:var(--line,#e2e8f0);margin:0 8px 0 12px;flex-shrink:0}
  .pnav-label{font-size:12px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2,#475569);white-space:nowrap;transform:translateY(.5px)}
  @media(max-width:560px){.pnav-sep{margin:0 5px 0 8px}.pnav-label{letter-spacing:.1em;font-size:11px}}
  .pnav-logo{height:28px;width:auto;display:block}
  .pnav-items{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .pnav-link{background:none;border:none;color:var(--ink-2);font-weight:700;font-size:13.5px;padding:8px 11px;border-radius:9px;cursor:pointer;text-decoration:none;transition:.15s}
  .pnav-link:hover{color:var(--ink);background:var(--line-soft)}
  .pnb-clean{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .pnb-bordered{border-bottom-color:var(--line)}
  .pnb-floating{background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:10px 14px 0}
  .pnb-floating .pnav-in{background:color-mix(in srgb,var(--card,#fff) 94%,transparent);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px -18px rgba(15,23,42,.32)}
  .pnb-glass{background:color-mix(in srgb,var(--card,#fff) 72%,transparent);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6)}
  .pnb-solid{background:var(--card,#fff);backdrop-filter:none;-webkit-backdrop-filter:none}
  .pnb-split .pnav-brand{padding-right:18px;border-right:1px solid var(--line)}
  .pnh-compact .pnav-in{min-height:50px;padding-top:7px;padding-bottom:7px}.pnh-roomy .pnav-in{min-height:78px;padding-top:18px;padding-bottom:18px}
  .pnw-narrow .pnav-in{max-width:860px}.pnw-medium .pnav-in{max-width:1080px}.pnw-wide .pnav-in{max-width:1280px}.pnw-full .pnav-in{max-width:none}
  .pnav-logo{height:var(--pnav-logo-h,28px)}
  .pnl-pill .pnav-link{border-radius:999px}.pnl-boxed .pnav-link{border:1px solid var(--line);background:color-mix(in srgb,var(--card) 82%,transparent)}
  .pnl-underline .pnav-link{border-radius:0;background:none!important;box-shadow:inset 0 -2px transparent}.pnl-underline .pnav-link:hover,.pnl-underline .pnav-link:focus-visible{box-shadow:inset 0 -2px var(--accent)}
  .pnsh-soft{box-shadow:0 8px 24px -20px rgba(15,23,42,.55)}.pnsh-strong{box-shadow:0 14px 36px -20px rgba(15,23,42,.72)}
  .pnav-dd{position:relative}
  /* ═══ PHASE_PORTAL_NAV2 — ENTERPRISE NAV (mirrors opsiq.portal_design chrome_css; portal.php is bootstrap-free, keep in sync) ═══ */
  .pnav-ind{display:inline-block;width:var(--ni-size,14px);height:var(--ni-size,14px);margin-left:5px;vertical-align:middle;flex:none;background:currentColor;transition:transform .25s var(--ease,cubic-bezier(.4,0,.2,1)),opacity .2s;opacity:.75;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
  .nip-before .pnav-ind{margin-left:0;margin-right:5px;order:-1}
  .pnav-dd-btn{display:inline-flex;align-items:center}
  .ni-chevron .pnav-ind{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
  .ni-caret .pnav-ind{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15 6 9h12z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15 6 9h12z' fill='black'/%3E%3C/svg%3E")}
  .ni-plus .pnav-ind{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
  .ni-arrow .pnav-ind{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
  .ni-dash .pnav-ind{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
  .ni-dot .pnav-ind{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E")}
  .pnav-dd:hover .pnav-ind,.pnav-dd:focus-within .pnav-ind{opacity:1}
  .nia-rotate .pnav-dd:hover .pnav-ind,.nia-rotate .pnav-dd:focus-within .pnav-ind{transform:rotate(180deg)}
  .nia-flip .pnav-dd:hover .pnav-ind,.nia-flip .pnav-dd:focus-within .pnav-ind{transform:scaleY(-1)}
  .nia-slide .pnav-dd:hover .pnav-ind,.nia-slide .pnav-dd:focus-within .pnav-ind{transform:translateY(2px)}
  .nia-bounce .pnav-dd:hover .pnav-ind{animation:pnavBounce .5s var(--ease,ease)}
  @keyframes pnavBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(3px)}70%{transform:translateY(-1px)}}
  .pnav-dd-menu,.pnav-mega{position:absolute;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -12px rgba(15,23,42,.22),0 4px 10px rgba(15,23,42,.06);z-index:60;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease,ease),transform .18s var(--ease,ease),visibility .18s}
  .pnav-dd-menu{min-width:230px;padding:8px;left:0;flex-direction:column}
  .pna-center .pnav-dd-menu,.pna-center .pnav-mega{left:50%;transform:translate(-50%,6px)}
  .pna-right .pnav-dd-menu{left:auto;right:0}
  /* The LAST menus open from the right edge of their trigger, or the rightmost
     nav item's dropdown runs past the viewport and gives the page a horizontal
     scrollbar. Only visible where the nav reaches the screen edge (the Help
     Centre runs full width), which is why the portal looked fine. */
  .pnav-items > .pnav-dd:nth-last-child(-n+2) > .pnav-dd-menu{left:auto;right:0}
  .pna-center .pnav-items > .pnav-dd:nth-last-child(-n+2) > .pnav-dd-menu{left:auto;right:0;transform:translateY(6px)}
  .pna-center .pnav-items > .pnav-dd:nth-last-child(-n+2):hover > .pnav-dd-menu{transform:translateY(0)}
  .pnav-dd:hover .pnav-dd-menu,.pnav-dd:hover .pnav-mega,.pnav-dd:focus-within .pnav-dd-menu,.pnav-dd:focus-within .pnav-mega{opacity:1;visibility:visible;transform:translateY(0)}
  .pna-center .pnav-dd:hover .pnav-dd-menu,.pna-center .pnav-dd:hover .pnav-mega{transform:translate(-50%,0)}
  .pnx-slide .pnav-dd-menu,.pnx-slide .pnav-mega{transform:translateY(12px)}
  .pnx-scale .pnav-dd-menu,.pnx-scale .pnav-mega{transform:translateY(4px) scale(.97);transform-origin:top}
  .pnx-none .pnav-dd-menu,.pnx-none .pnav-mega{transition:none}
  .pnm-clean .pnav-dd-menu,.pnm-clean .pnav-mega{border-color:transparent;box-shadow:0 20px 50px -14px rgba(15,23,42,.28)}
  .pnm-bordered .pnav-dd-menu,.pnm-bordered .pnav-mega{border-width:1.5px;box-shadow:none}
  .pnm-glass .pnav-dd-menu,.pnm-glass .pnav-mega{background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:color-mix(in srgb,#fff 30%,var(--line))}
  .pnm-minimal .pnav-dd-menu,.pnm-minimal .pnav-mega{border-radius:9px;box-shadow:0 8px 22px -8px rgba(15,23,42,.2);padding:5px}
  .pnm-elevated .pnav-dd-menu,.pnm-elevated .pnav-mega{box-shadow:0 26px 60px -14px rgba(15,23,42,.34),0 6px 14px rgba(15,23,42,.1)}
  .pnav-dd-grp{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:9px 12px 4px}
  .pdd-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink-2);transition:background .14s,color .14s}
  .pdd-row:hover{background:var(--line-soft);color:var(--ink)}
  .pdd-ic{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .pdd-tx{display:flex;flex-direction:column;min-width:0;gap:1px}
  .pdd-l{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
  .pdd-d{font-size:12px;color:var(--ink-3);line-height:1.4}
  .pdd-badge,.pmega-badge,.pnav-top-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;font-size:9.5px;font-weight:800;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:20px;background:var(--accent-bg,var(--accent));color:#fff;vertical-align:middle}.pnav-top-badge{margin-inline-start:5px}.pdd-badge[hidden],.pmega-badge[hidden],.pnav-top-badge[hidden]{display:none!important}
  .pdd-arr{margin-left:auto;color:var(--ink-3);font-size:17px;line-height:1}
  .pnav-sub{position:relative}
  .pnav-sub-menu{position:absolute;top:-8px;left:calc(100% + 6px);min-width:210px;background:inherit;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -12px rgba(15,23,42,.22);padding:8px;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .16s,transform .16s,visibility .16s}
  .pnav-sub:hover>.pnav-sub-menu,.pnav-sub:focus-within>.pnav-sub-menu{opacity:1;visibility:visible;transform:translateX(0)}
  .pdd-has:hover .pdd-arr{color:var(--accent)}
  .pnav-mega{padding:20px;min-width:min(760px,calc(100vw - 40px));left:0}
  /* A mega panel anchors to the ITEM THAT OPENS IT and centres under it. It was
     position:static, so the absolute panel resolved against the whole nav and
     opened pinned to the nav's left edge whichever item you hovered. An
     absolute child may still overflow this relative parent, so a wide panel is
     unaffected; max-width keeps it inside the viewport. (Mirror of chrome_css —
     both copies must agree or the later sheet silently wins.) */
  /* DESKTOP ONLY. These are 2-class selectors; the phone rules that flatten the
     panel into the stacked menu are 1-class, so unscoped they would win there
     and leave the mega absolutely positioned and half off-screen inside the
     mobile card. Keep them behind the breakpoint. */
  @media(min-width:760px){
    .pnav-dd-mega{position:relative}
    .pnav-dd-mega > .pnav-mega{left:50%;right:auto;transform:translate(-50%,6px);max-width:calc(100vw - 24px)}
    .pnav-dd-mega:hover > .pnav-mega,.pnav-dd-mega:focus-within > .pnav-mega,.pnav-dd-mega.pnav-dd-open > .pnav-mega{transform:translate(-50%,0)}
    .pna-center .pnav-dd-mega > .pnav-mega,.pna-right .pnav-dd-mega > .pnav-mega{left:50%;right:auto}
  }
  .pnav-mega-in{display:grid;grid-template-columns:repeat(var(--mega-cols,3),minmax(0,1fr));gap:14px 26px}
  .pmega-col{min-width:0}
  .pmega-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
  .pmega-lk{display:flex;align-items:flex-start;gap:11px;padding:8px 10px;border-radius:10px;text-decoration:none;transition:background .14s}
  .pmega-lk:hover{background:var(--line-soft)}
  .pmega-ic{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .pmega-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
  .pmega-l{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
  .pmega-d{font-size:12px;color:var(--ink-3);line-height:1.4}
  .pmega-feat{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:18px;border-radius:12px;text-decoration:none;background:var(--accent-bg,linear-gradient(150deg,var(--accent),var(--accent-d)));color:#fff;background-size:cover;background-position:center;min-height:150px}
/* ⚠ DUAL COPY — these also live in opsiq.portal_design.php's nav CSS block, but the
   preview AND the live portal load THIS file, so a rule added only to the PHP copy has
   no effect (found live 2026-08-01). Edit BOTH. */
.pmega-feats{display:flex;flex-direction:column;gap:10px;min-width:0}
.pmega-feats .pmega-feat{flex:1 1 0;min-height:0}
.pmega-feats-1 .pmega-feat{min-height:150px}
.pmega-feats-2 .pmega-feat,.pmega-feats-3 .pmega-feat,.pmega-feats-4 .pmega-feat{min-height:84px;padding:14px}
.pmega-feats-3 .pmega-ft,.pmega-feats-4 .pmega-ft{font-size:15px}
/* Each card decides how much of the promo column it takes. Every card keeps the SAME side
   position beside the links — this only divides the height (owner, 2026-08-01).
   ⚠ These MUST come after the count rules above, which share their specificity. */
.pmega-feats .pmega-feat-auto{flex:1 1 0}
.pmega-feats .pmega-feat-full{flex:6 1 0}
.pmega-feats .pmega-feat-slim{flex:0 0 auto;min-height:0;padding:11px 14px;gap:1px}
.pmega-feats .pmega-feat-slim .pmega-fd{display:none}
.pmega-feats .pmega-feat-al-top{justify-content:flex-start}
.pmega-feats .pmega-feat-al-middle{justify-content:center}
.pmega-feats .pmega-feat-al-bottom{justify-content:flex-end}
.pmega-fi{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:8px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;flex:0 0 auto}
.pmega-fi svg{width:19px;height:19px}
/* Dark mode: the promo card carried the full-strength accent while the page around it
   went dark — the same gap the hero had (owner, 2026-08-01). The operator's colour is
   kept and the dark scrim is layered over it. An operator BACKGROUND IMAGE is set inline
   and therefore still wins, which is correct: that image already carries its own scrim. */
:root[data-theme="dark"] .pmega-feat{background-image:var(--hero-shade,linear-gradient(rgba(11,18,32,.55),rgba(11,18,32,.55)))}
.pmega-fi-left{align-self:flex-start}
.pmega-fi-center{align-self:center}
.pmega-fi-right{align-self:flex-end}
.pmega-fi-sm{width:26px;height:26px;border-radius:8px}
.pmega-fi-sm svg{width:14px;height:14px}
.pmega-fi-md{width:34px;height:34px}
.pmega-fi-lg{width:48px;height:48px;border-radius:13px}
.pmega-fi-lg svg{width:26px;height:26px}
/* on a slim strip the icon sits inline before the title, so placement does not apply */
.pmega-feats .pmega-feat-slim .pmega-fi{align-self:center}
/* The copy across the card. `align` handles the vertical, this the horizontal, so an
   operator can centre a card completely or push it to either edge. */
.pmega-feats .pmega-feat-tx-left{align-items:flex-start;text-align:left}
.pmega-feats .pmega-feat-tx-center{align-items:center;text-align:center}
.pmega-feats .pmega-feat-tx-right{align-items:flex-end;text-align:right}
/* an explicit icon placement still wins over the text's alignment */
.pmega-feats .pmega-feat-tx-center .pmega-fi-left,.pmega-feats .pmega-feat-tx-right .pmega-fi-left{align-self:flex-start}
.pmega-feats .pmega-feat-tx-left .pmega-fi-right,.pmega-feats .pmega-feat-tx-center .pmega-fi-right{align-self:flex-end}
.pmega-feats .pmega-feat-tx-left .pmega-fi-center,.pmega-feats .pmega-feat-tx-right .pmega-fi-center{align-self:center}
.pmega-feats .pmega-feat-slim .pmega-fi{width:26px;height:26px;margin:0 10px 0 0}
.pmega-feats .pmega-feat-slim{flex-direction:row;align-items:center;gap:0}
.pmega-feats .pmega-feat-slim .pmega-ft{flex:1;min-width:0}

  .pmega-ft{font-size:16px;font-weight:800;color:#fff}
  .pmega-fd{font-size:12.5px;color:rgba(255,255,255,.88);line-height:1.45}
  .pmega-fc{font-size:12.5px;font-weight:700;color:#fff;margin-top:6px}
  /* the lettered tile the icon resolver falls back to, so no row is ever bare */
  /* ══════════════════════════════════════════════════════════════════════════
     PREMIUM CONFIRMATION SYSTEM — replaces window.confirm / window.prompt.
     Native dialogs cannot be branded, cannot be themed, sit outside the page
     and instantly break an enterprise portal's credibility. This is the styled
     replacement: a scrimmed, focus-trapped dialog and a toast for the outcome.
     Colours come from the theme, so it is the operator's brand, not ours.
     ══════════════════════════════════════════════════════════════════════════ */
  /* ⚠ .sr-only was USED (bulk-select header, and now the P20 loading label) but
     never DEFINED anywhere in the portal, so the text rendered visibly instead of
     being announced only to screen readers. Defining it fixes both. */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* ═══ PHASE_PORTAL_P20 — one state surface: loading / empty / error ═══
     The portal had 24 empty-state blocks across 5 unrelated class families
     (kn-empty, sg-empty, smc-empty, psearch-empty, kb-empty) and NO error
     variant anywhere. That is why a dead endpoint rendered as a polite "no
     categories available": every read path does `res.categories || []`, so a
     FAILURE and a genuinely EMPTY result are indistinguishable to the reader.
     The plan's rule for this phase is "encode state in form; never dead-end" —
     so an empty state says what to do next, and a failure says it FAILED and
     offers a retry. Never let a broken request masquerade as "nothing here". */
  .pxst{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
        padding:34px 26px;border-radius:16px;border:1px dashed var(--line);
        background:color-mix(in srgb,var(--card) 70%,transparent)}
  .pxst-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
           font-size:19px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .pxst-t{font-size:15px;font-weight:750;color:var(--ink);letter-spacing:-.01em}
  .pxst-b{font-size:13.5px;color:var(--ink-2);max-width:46ch;line-height:1.55;margin:0}
  .pxst-a{margin-top:5px;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;
          font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--line);
          background:var(--card);color:var(--ink);transition:.15s}
  .pxst-a:hover{border-color:var(--accent);color:var(--accent)}
  .pxst-a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* a FAILURE must not look like an empty shelf — solid border, warning tone */
  .pxst-error{border-style:solid;border-color:color-mix(in srgb,var(--err) 42%,var(--line))}
  .pxst-error .pxst-ic{background:color-mix(in srgb,var(--err) 13%,transparent);color:var(--err)}
  .pxst-error .pxst-a{border-color:color-mix(in srgb,var(--err) 42%,var(--line))}
  .pxst-error .pxst-a:hover{border-color:var(--err);color:var(--err)}
  /* loading: shimmer bars, honest about how much is coming */
  .pxst-load{display:grid;gap:10px;padding:4px 0}
  .pxst-bar{height:52px;border-radius:13px;border:1px solid var(--line-soft);
            background:linear-gradient(100deg,color-mix(in srgb,var(--ink) 4%,transparent) 30%,
                       color-mix(in srgb,var(--ink) 8%,transparent) 50%,
                       color-mix(in srgb,var(--ink) 4%,transparent) 70%);
            background-size:220% 100%;animation:pxstShimmer 1.25s ease-in-out infinite}
  @keyframes pxstShimmer{0%{background-position:180% 0}100%{background-position:-40% 0}}
  @media (prefers-reduced-motion:reduce){ .pxst-bar{animation:none} }
  .pxdlg-scrim{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;
    background:color-mix(in srgb,#0b1020 62%,transparent);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
    opacity:0;transition:opacity .18s var(--ease,ease)}
  .pxdlg-scrim.on{opacity:1}
  .pxdlg{width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 40px 90px -30px rgba(2,6,23,.55),0 8px 24px -12px rgba(2,6,23,.3);
    padding:26px 26px 20px;transform:translateY(10px) scale(.985);opacity:0;
    transition:transform .2s cubic-bezier(.2,.8,.3,1),opacity .2s var(--ease,ease)}
  .pxdlg-scrim.on .pxdlg{transform:none;opacity:1}
  .pxdlg-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
    background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .pxdlg-ic svg{width:23px;height:23px}
  .pxdlg.t-danger .pxdlg-ic{background:color-mix(in srgb,#dc2626 12%,transparent);color:#dc2626}
  .pxdlg.t-warn   .pxdlg-ic{background:color-mix(in srgb,#d97706 14%,transparent);color:#d97706}
  .pxdlg.t-ok     .pxdlg-ic{background:color-mix(in srgb,#16a34a 13%,transparent);color:#16a34a}
  .pxdlg-t{font-size:17.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin-bottom:7px;text-wrap:balance}
  .pxdlg-b{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
  .pxdlg-inp{width:100%;box-sizing:border-box;margin-top:16px;font:inherit;font-size:14.5px;color:var(--ink);
    background:var(--bg,#f6f7fb)!important;border:1px solid var(--line)!important;border-radius:11px!important;padding:12px 14px;outline:none}
  .pxdlg-inp:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
  .pxdlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft,var(--line))}
  .pxdlg-btn{font:inherit;font-size:13.5px;font-weight:750;padding:10px 20px;border-radius:11px;cursor:pointer;
    transition:transform .14s var(--ease,ease),filter .14s,background .14s,border-color .14s}
  .pxdlg-btn:active{transform:translateY(1px)}
  .pxdlg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .pxdlg-no{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
  .pxdlg-no:hover{border-color:var(--ink-3);color:var(--ink)}
  .pxdlg-yes{border:1px solid transparent;background:var(--accent-bg,var(--accent));color:#fff;
    box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
  .pxdlg-yes:hover{filter:brightness(1.06)}
  .pxdlg.t-danger .pxdlg-yes{background:#dc2626;box-shadow:0 8px 20px -8px rgba(220,38,38,.5)}
  /* toast — the OUTCOME, never a question */
  .pxtoast-wrap{position:fixed;z-index:9100;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;
    pointer-events:none;max-width:min(380px,calc(100vw - 40px))}
  .pxtoast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:11px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;
    box-shadow:0 20px 44px -18px rgba(2,6,23,.4);opacity:0;transform:translateY(10px);
    transition:opacity .2s var(--ease,ease),transform .2s cubic-bezier(.2,.8,.3,1)}
  .pxtoast.on{opacity:1;transform:none}
  .pxtoast-ic{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:900;color:#fff;background:var(--accent)}
  .pxtoast.k-ok .pxtoast-ic{background:#16a34a}
  .pxtoast.k-err .pxtoast-ic{background:#dc2626}
  .pxtoast-tx{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45}
  .pxtoast-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;
    background:color-mix(in srgb,var(--accent) 55%,transparent);animation:pxToastBar linear forwards}
  .pxtoast.k-ok .pxtoast-bar{background:color-mix(in srgb,#16a34a 60%,transparent)}
  .pxtoast.k-err .pxtoast-bar{background:color-mix(in srgb,#dc2626 60%,transparent)}
  @keyframes pxToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  @media(prefers-reduced-motion:reduce){
    .pxdlg,.pxdlg-scrim,.pxtoast{transition:none!important}
    .pxtoast-bar{animation:none!important}
  }
  @media(max-width:560px){
    .pxdlg-acts{flex-direction:column-reverse}.pxdlg-btn{width:100%}
    .pxtoast-wrap{left:16px;right:16px;bottom:16px;max-width:none}
  }
  /* P19 · premium portal real-time status + agent presence */
  .px-livecap{position:fixed;left:18px;bottom:18px;z-index:9050;display:none;align-items:center;gap:9px;
    min-height:38px;padding:8px 12px 8px 9px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
    border-radius:999px;background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--ink-2);
    box-shadow:0 14px 38px -20px rgba(2,6,23,.48);backdrop-filter:blur(16px);font-size:11.5px;font-weight:800;
    letter-spacing:.01em;transition:opacity .18s var(--ease,ease),transform .18s var(--ease,ease),border-color .18s}
  .px-livecap.on{display:flex}.px-livecap button{all:unset;cursor:pointer;color:var(--accent);font-weight:850;margin-left:2px}
  .px-livecap-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}
  .px-livecap[data-state="live"] .px-livecap-dot::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(22,163,74,.4);border-radius:50%;animation:pxLivePulse 1.8s ease-out infinite}
  .px-livecap[data-state="polling"] .px-livecap-dot,.px-livecap[data-state="reconnecting"] .px-livecap-dot{background:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.12)}
  .px-livecap[data-state="offline"] .px-livecap-dot{background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.14)}
  @keyframes pxLivePulse{0%{transform:scale(.65);opacity:1}100%{transform:scale(1.7);opacity:0}}
  .px-presence{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:7px 0 0;
    padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
    border-radius:10px;background:color-mix(in srgb,var(--accent) 5%,var(--card));color:var(--ink-2);font-size:11.5px;font-weight:750}
  .px-presence-avatar{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:#fff;
    background:var(--accent-bg,var(--accent));font-size:9px;font-weight:900}
  .px-presence-typing{display:inline-flex;gap:3px;margin-left:2px}.px-presence-typing i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:pxTypingDot 1.05s infinite}
  .px-presence-typing i:nth-child(2){animation-delay:.16s}.px-presence-typing i:nth-child(3){animation-delay:.32s}
  @keyframes pxTypingDot{0%,60%,100%{transform:translateY(0);opacity:.38}30%{transform:translateY(-3px);opacity:1}}
  @media(max-width:640px){.px-livecap{left:12px;bottom:12px}.pxtoast-wrap{bottom:62px}}
  @media(prefers-reduced-motion:reduce){.px-livecap-dot::after,.px-presence-typing i{animation:none!important}}
  .pnav-ltr{font-size:13px;font-weight:850;color:var(--accent);letter-spacing:-.02em}
  /* a wide panel on the right-most nav item must never push the page sideways */
  .pnav-dd-menu{max-width:calc(100vw - 32px)}
  .pnav-items>.pnav-dd:last-of-type .pnav-dd-menu{left:auto;right:0}
  /* ══════════════════════════════════════════════════════════════════════════
     P11 · FIVE DROPDOWN STRUCTURES (pdds-*) and FIVE MEGA STRUCTURES (pmgs-*).
     menu_style stays the SURFACE (clean/card/glass…); these are the STRUCTURE.
     ══════════════════════════════════════════════════════════════════════════ */
  /* 1 · ROWS — the default: icon chip, title, description. */
  .pdds-rows .pnav-dd-menu{padding:8px;min-width:290px}
  /* 2 · RAIL — a CONTINUOUS accent rail down the panel edge, visible at rest.
     (An earlier version only coloured the rail on :hover, which made this
     structure identical to `rows` in every static state — not a design.) */
  .pdds-rail .pnav-dd-menu{padding:12px 12px 12px 0;min-width:310px;position:absolute;overflow:hidden}
  .pdds-rail .pnav-dd-menu::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
  .pdds-rail .pdd-row{border-radius:0 10px 10px 0;padding-left:20px;position:relative}
  .pdds-rail .pdd-row::before{content:'';position:absolute;left:-12px;top:6px;bottom:6px;width:3px;background:var(--accent);opacity:0;transition:opacity .14s}
  .pdds-rail .pdd-row:hover::before{opacity:1}
  .pdds-rail .pdd-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .pdds-rail .pdd-grp{padding-left:20px}
  /* 3 · CARDS — every link is its own bordered tile. */
  .pdds-cards .pnav-dd-menu{padding:12px;min-width:330px;display:flex;flex-direction:column;gap:8px}
  .pdds-cards .pdd-row{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);align-items:flex-start}
  .pdds-cards .pdd-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-1px);background:var(--card)}
  .pdds-cards .pdd-ic{width:34px;height:34px;border-radius:10px}
  /* 4 · SPLIT — the first link becomes a featured lead panel above the rest. */
  .pdds-split .pnav-dd-menu{padding:0;min-width:340px;overflow:hidden}
  .pdds-split .pdd-row{border-radius:0;padding:10px 16px}
  .pdds-split .pdd-row:first-child{background:color-mix(in srgb,var(--accent) 9%,transparent);border-bottom:1px solid var(--line-soft);padding:16px;align-items:flex-start}
  .pdds-split .pdd-row:first-child .pdd-ic{width:38px;height:38px;border-radius:11px;background:var(--accent-bg,var(--accent));color:#fff}
  .pdds-split .pdd-row:first-child .pdd-ic .pnav-ltr{color:#fff}
  .pdds-split .pdd-row:first-child .pdd-l{font-size:15px;font-weight:800}
  .pdds-split .pdd-row:not(:first-child):hover{background:var(--line-soft)}
  /* 5 · INDEX — a dense two-column link index for long menus; no descriptions. */
  .pdds-index .pnav-dd-menu{padding:12px;min-width:420px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
  .pdds-index .pdd-row{padding:7px 9px;gap:9px}
  .pdds-index .pdd-ic{width:24px;height:24px;border-radius:7px;font-size:13px}
  .pdds-index .pdd-ic svg{width:15px;height:15px}
  .pdds-index .pdd-d{display:none}
  .pdds-index .pdd-grp{grid-column:1 / -1}

  /* 1 · COLUMNS — headed link columns (default). */
  /* 2 · FEATURE — the promo card leads, columns follow. */
  .pmgs-feature .pnav-mega-in{grid-template-columns:minmax(0,.85fr) repeat(var(--mega-cols,3),minmax(0,1fr))}
  .pmgs-feature .pmega-feat{order:-1;min-height:100%}
  /* 3 · GRID — uniform icon cards, column headings drop away. */
  .pmgs-grid .pnav-mega-in{display:block}
  .pmgs-grid .pmega-col{display:contents}
  .pmgs-grid .pmega-h{display:none}
  .pmgs-grid .pnav-mega{min-width:min(820px,calc(100vw - 40px))}
  .pmgs-grid .pnav-mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .pmgs-grid .pmega-lk{flex-direction:column;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:13px;padding:15px}
  .pmgs-grid .pmega-lk:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 12px 26px -14px color-mix(in srgb,var(--accent) 42%,transparent);transform:translateY(-2px);background:var(--card)}
  .pmgs-grid .pmega-ic{width:38px;height:38px;border-radius:11px}
  /* the promo stays ONE cell so the grid reads uniform; spanning all columns
     turned it into a tall empty slab under the cards */
  .pmgs-grid .pmega-feat{min-height:0;padding:15px;border-radius:13px}
  /* 4 · SHOWCASE — a tall brand panel leads a two-column list. */
  .pmgs-showcase .pnav-mega{min-width:min(860px,calc(100vw - 40px))}
  .pmgs-showcase .pnav-mega-in{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:22px}
  .pmgs-showcase .pmega-feat{order:-1;min-height:100%;padding:24px;border-radius:14px}
  .pmgs-showcase .pmega-ft{font-size:20px;letter-spacing:-.02em}
  .pmgs-showcase .pmega-col{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;align-content:start}
  .pmgs-showcase .pmega-h{grid-column:1 / -1}
  /* 5 · LEDGER — a compact ruled index for very large menus. */
  .pmgs-ledger .pnav-mega{min-width:min(780px,calc(100vw - 40px));padding:16px 20px}
  .pmgs-ledger .pnav-mega-in{gap:8px 30px}
  .pmgs-ledger .pmega-h{border-bottom:0;padding-bottom:4px;margin-bottom:2px;color:var(--accent)}
  .pmgs-ledger .pmega-lk{padding:7px 0;border-radius:0;border-bottom:1px solid var(--line-soft);gap:9px;align-items:center}
  .pmgs-ledger .pmega-lk:last-child{border-bottom:0}
  .pmgs-ledger .pmega-lk:hover{background:transparent;padding-left:5px}
  .pmgs-ledger .pmega-ic{width:22px;height:22px;border-radius:6px;background:transparent;color:var(--ink-3)}
  .pmgs-ledger .pmega-ic svg{width:15px;height:15px}
  .pmgs-ledger .pmega-lk:hover .pmega-ic{color:var(--accent)}
  .pmgs-ledger .pmega-d{display:none}
  .pmgs-ledger .pmega-feat{min-height:0;padding:14px 16px}
  .pnav-cta{background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));color:#fff!important;padding:8px 15px;border-radius:10px;font-weight:800;font-size:13.5px;text-decoration:none;box-shadow:0 6px 16px rgba(108,92,231,.25)}
  /* Mobile nav — hamburger + collapsible menu */
  .pnav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;padding:0;flex-shrink:0}
  .pnav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);margin:0 auto;transition:.22s}
  .pnav.pnav-open .pnav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .pnav.pnav-open .pnav-burger span:nth-child(2){opacity:0}
  .pnav.pnav-open .pnav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  @media(max-width:760px){
    .pnav-in{flex-wrap:wrap}
    .pnav-burger{display:flex}
    .pnav-items{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;padding-top:12px;margin-top:12px;border-top:1px solid var(--line-soft)}
    .pnav.pnav-open .pnav-items{display:flex;animation:pdIn .2s ease}
    .pnav-items .pnav-link,.pnav-items .pnav-cta{width:100%;text-align:left;box-shadow:none}
    .pnav-dd{width:100%}
    /* PHASE_PORTAL_NAV2 — on mobile every panel (dropdown, mega, sub-flyout) becomes an inline
       accordion opened by tapping the item, not hover. */
    .pnav-dd-menu,.pnav-mega,.pnav-sub-menu{position:static;left:auto;right:auto;top:auto;min-width:0;width:100%;box-shadow:none;border:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:2px 0 2px 12px;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;transition:max-height .28s ease}
    .pnav-dd.pnav-dd-open>.pnav-dd-menu,.pnav-dd.pnav-dd-open>.pnav-mega{max-height:1400px}
    .pnav-sub.pnav-dd-open>.pnav-sub-menu{max-height:900px}
    .pnav-dd:hover .pnav-dd-menu,.pnav-dd:hover .pnav-mega{opacity:1;visibility:visible;transform:none}
    .pnav-mega-in{grid-template-columns:1fr;gap:4px}
    .pmega-feat{min-height:auto;padding:14px}
    .pnav-ind{margin-left:auto}
    /* ── P11 · MOBILE MENU PATTERNS ────────────────────────────────────────
       'inline' above is the default and is unchanged. The three overlay
       patterns below share a scrim and an in-panel close button, because a
       burger that has scrolled out of view is not a way out. ── */
    /* ⚠ A backdrop-filter (the glass theme puts one on .pnav) makes that element
       the CONTAINING BLOCK for position:fixed descendants — the drawer then
       resolved top/right/bottom against the 390x65 nav bar instead of the
       viewport and collapsed into a small box at the top. The overlay patterns
       therefore drop the nav's own glass on phones; the panel carries its own
       surface anyway, so nothing is lost visually. */
    .pnavm-drawer,.pnavm-sheet,.pnavm-fullscreen{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
    .pnav-scrim{position:fixed;inset:0;background:rgba(2,6,23,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:98;opacity:0;transition:opacity .24s ease}
    .pnav.pnav-open .pnav-scrim{opacity:1}
    .pnav-close{display:none;position:absolute;top:12px;right:12px;width:38px;height:38px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font-size:22px;line-height:1;cursor:pointer;z-index:2}
    .pnavm-drawer .pnav-close,.pnavm-sheet .pnav-close,.pnavm-fullscreen .pnav-close{display:block}
    .pnavm-drawer .pnav-items,.pnavm-sheet .pnav-items,.pnavm-fullscreen .pnav-items{
      position:fixed;z-index:99;background:var(--card);border-top:0;margin-top:0;padding:64px 20px 24px;
      overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
      display:flex;flex-basis:auto;transition:transform .28s cubic-bezier(.32,.72,0,1),opacity .2s ease}
    /* drawer — in from the right, clear of the notch/home indicator */
    .pnavm-drawer .pnav-items{top:0;right:0;bottom:0;width:min(86vw,340px);transform:translateX(101%);
      box-shadow:-24px 0 60px -20px rgba(2,6,23,.45);padding-top:max(64px,env(safe-area-inset-top,0px))}
    .pnavm-drawer.pnav-open .pnav-items{transform:translateX(0)}
    /* sheet — up from the bottom, the easiest place to reach one-handed */
    .pnavm-sheet .pnav-items{left:0;right:0;bottom:0;max-height:82vh;transform:translateY(101%);
      border-radius:20px 20px 0 0;box-shadow:0 -24px 60px -20px rgba(2,6,23,.45);
      padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
    .pnavm-sheet .pnav-items::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:var(--line)}
    .pnavm-sheet.pnav-open .pnav-items{transform:translateY(0)}
    /* fullscreen — the EXACT Help Center menu (help.php ~4938): a dropdown card
       anchored 8px under the header via absolute positioning against the header
       row (its .hc-hdr-inner equivalent is .pnav-in), 12px side margins,
       radius 16, shadow 0 24px 60px, max-height calc(100vh - 92px), page
       visible and UNDIMMED behind, 15px rows with an accent-tint hover, and
       accordion submenus in a tinted inset. */
    .pnavm-fullscreen .pnav-in{position:relative}
    .pnavm-fullscreen .pnav-scrim{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
    .pnavm-fullscreen .pnav-items{position:absolute;top:calc(100% + 8px);left:12px;right:12px;bottom:auto;
      padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line-soft);
      box-shadow:0 24px 60px rgba(15,23,42,.22);z-index:250;max-height:calc(100vh - 92px);
      overflow-y:auto;scrollbar-width:thin;
      opacity:0;transform:translateY(-6px);pointer-events:none}
    .pnavm-fullscreen.pnav-open .pnav-items{opacity:1;transform:none;pointer-events:auto}
    .pnavm-fullscreen .pnav-link,.pnavm-fullscreen .pnav-dd-btn{padding:13px 12px;border-radius:10px;font-size:15px;font-weight:800;margin:0}
    .pnavm-fullscreen .pnav-link:hover,.pnavm-fullscreen .pnav-dd-btn:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
    .pnavm-fullscreen .pnav-dd-btn{display:flex;justify-content:space-between;align-items:center;width:100%}
    .pnavm-fullscreen .pnav-dd-menu{background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:10px;padding:4px;margin:2px 0 8px}
    .pnavm-fullscreen .pnav-dd-menu a{padding:11px 12px 11px 26px;font-size:14px;border-radius:8px}
    /* the overlay patterns must not be hidden by the shared display:none rule */
    .pnavm-drawer.pnav-open .pnav-items,.pnavm-sheet.pnav-open .pnav-items,.pnavm-fullscreen.pnav-open .pnav-items{display:flex}
    /* ── HC-style overlay chrome ─────────────────────────────────────────
       The brand row stays visible ABOVE the open panel and the burger morphs
       into the X (so the separate in-panel close is redundant), menu entries
       read as bold card rows, and the header account control (#px-acct,
       guest Sign in OR the signed-in avatar menu) docks at the bottom of the
       panel as a full-width CTA — the pattern the Help Center menu uses. */
    .pnavm-drawer.pnav-open .pnav-in,.pnavm-sheet.pnav-open .pnav-in,.pnavm-fullscreen.pnav-open .pnav-in{position:relative;z-index:101}
    .pnavm-drawer .pnav-close,.pnavm-sheet .pnav-close,.pnavm-fullscreen .pnav-close{display:none}
    .pnavm-drawer .pnav-link,.pnavm-drawer .pnav-dd-btn,.pnavm-sheet .pnav-link,.pnavm-sheet .pnav-dd-btn{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;margin-bottom:8px;padding:15px 16px;font-weight:800}
    /* account control as the panel's last row — the HC "Login" pattern.
       NEVER display:none the header copy here: if the relocation JS is stale
       or fails, hiding it would lose Sign in entirely (2026-07-28 regression). */
    /* ⚠ .px-acct carries margin-left:14px for the DESKTOP header row. Left in
       place inside the panel it shifts the block right and, with width:100%,
       overflows the card by exactly that 14px — a horizontal scrollbar and a
       button hanging past the edge. Reset the margin, never the width. */
    .pnav-items #px-acct{display:block;width:100%;margin:12px 0 0;max-width:100%}
    /* Colour and radius come from the Studio's own tokens (--accent-bg /
       --accent, --r-lg), so brand and shape changes flow through here too —
       nothing about this button is a fixed value. */
    .pnav-items #px-acct .px-acct-signin{display:block;width:100%;text-align:center;
      background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));color:#fff;
      font-weight:800;font-size:15px;padding:14px;border-radius:var(--r-lg,14px);text-decoration:none;
      box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
    .pnav-items #px-acct .px-acct-btn{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;
      padding:13px;border-radius:var(--r-lg,14px);background:var(--card);border:1px solid var(--line);font-weight:800}
    .pnav-items #px-acct .px-acct-menu{position:static;display:none;width:100%;margin-top:8px;box-shadow:none;
      border:1px solid var(--line-soft);border-radius:var(--r-md,12px)}
    .pnav-items #px-acct.open .px-acct-menu{display:block}
    /* belt and braces: nothing inside the panel may push it sideways */
    .pnavm-drawer .pnav-items,.pnavm-sheet .pnav-items,.pnavm-fullscreen .pnav-items{overflow-x:hidden}
    body.pnav-locked{overflow:hidden}
  }
  /* above the phone breakpoint the overlay chrome must never appear */
  @media(min-width:760px){ .pnav-scrim,.pnav-close{display:none!important} }
  @media(prefers-reduced-motion:reduce){
    .pnav-items,.pnav-scrim{transition:none!important}
  }
  .pfoot{width:100%;border-top:1px solid var(--line);margin-top:40px;background:color-mix(in srgb,var(--card,#fff) 60%,transparent)}
  /* The full-bleed split owns the whole band between nav and footer, so the
     footer's standing gap would show as a strip of page under the panel.
     Mirrored in chrome_css — that copy is inline and loads last. */
  body:has(#px-signin.si-split) .pfoot,body:has(#px-signin.si-panel-left) .pfoot{margin-top:0}
  .pfoot-in{max-width:1080px;margin:0 auto;padding:44px 20px 30px}
  .pfoot.pfw-narrow .pfoot-in{max-width:860px}.pfoot.pfw-medium .pfoot-in{max-width:1080px}.pfoot.pfw-wide .pfoot-in{max-width:1280px}.pfoot.pfw-full .pfoot-in{max-width:none}
  .pfa-center .pfoot-brand,.pfa-center .pfoot-col,.pfa-center .pfoot-copy{text-align:center}.pfa-center .pfoot-cols,.pfa-center .pfoot-social,.pfa-center .pfoot-bar{justify-content:center}.pfa-center .pfoot-cols{justify-items:center}
  .pfa-right .pfoot-brand,.pfa-right .pfoot-col,.pfa-right .pfoot-copy{text-align:right}.pfa-right .pfoot-cols,.pfa-right .pfoot-social,.pfa-right .pfoot-bar{justify-content:flex-end}.pfa-right .pfoot-cols{justify-items:end}.pfa-right .pfoot-rlk{justify-content:flex-end}
  .pfd-none{border-top:none}.pfd-none .pfoot-bar{border-top:none}.pfd-strong{border-top-width:2px;border-top-color:color-mix(in srgb,var(--accent) 55%,var(--line))}.pfd-strong .pfoot-bar{border-top-width:2px}
  .pfoot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:30px 34px;margin-bottom:22px}
  .pfoot-col{min-width:0}
  /* No accent rule under the column titles — type alone carries them. */
  .pfoot-col-t{font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
  .pfoot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:13px;padding:5px 0;transition:color .15s,transform .15s}
  .pfoot-col a:hover{color:var(--accent);transform:translateX(2px)}
  .pfa-center .pfoot-col a:hover,.pfoot-centered .pfoot-col a:hover{transform:none}
  .pfoot-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:16px}
  /* Bottom-bar treatments — enterprise copyright-area styles (mirror of chrome_css). */
  .pfoot-bar.pfb-centered{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:7px}
  .pfb-centered .pfoot-legal{justify-content:center}
  /* copyright band = footer's last section, a sibling of .pfoot-in (mirror of chrome_css) */
  .pfoot-barwrap{width:100%}
  .pfoot-barin{max-width:1080px;margin:0 auto;padding:0 20px}
  .pfoot.pfw-narrow .pfoot-barin{max-width:860px}.pfoot.pfw-medium .pfoot-barin{max-width:1080px}
  .pfoot.pfw-wide .pfoot-barin{max-width:1280px}.pfoot.pfw-full .pfoot-barin{max-width:none}
  /* FULL WIDTH IS NOT EDGE-TO-EDGE CONTENT. Removing the max-width left the
     logo and the first footer column sitting ~20px off the screen edge, which
     reads as a broken container rather than a wide layout. Full keeps a real
     gutter that grows with the viewport; the capped widths are unaffected. */
  .pnw-full .pnav-in,
  .pfoot.pfw-full .pfoot-in,
  .pfoot.pfw-full .pfoot-barin{padding-inline:clamp(20px,4vw,72px)}
  .pfoot-barwrap .pfoot-bar{margin:0;padding:16px 0}
  .pfoot-barwrap.pfb-tint{background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .pfoot-barwrap.pfb-contrast{background:rgba(0,0,0,.22)}
  .pfs-plain .pfoot-barwrap.pfb-contrast,.pfs-tinted .pfoot-barwrap.pfb-contrast{background:#0d1220}
  .pfoot-barwrap.pfb-tint .pfoot-bar,.pfoot-barwrap.pfb-contrast .pfoot-bar{border-top:none;border-radius:0;padding:18px 0}
  .pfoot:has(.pfoot-barwrap.pfb-tint) .pfoot-in,.pfoot:has(.pfoot-barwrap.pfb-contrast) .pfoot-in{padding-bottom:26px}
  .pfb-contrast .pfoot-copy,.pfb-contrast .pfoot-legal a{color:rgba(255,255,255,.82)}
  .pfb-contrast .pfoot-legal a:hover{color:#fff}
  .pfb-contrast .pfoot-sep{color:rgba(255,255,255,.4)}
  .pfoot-recap-row{margin-top:12px;text-align:center}
  .pfoot-recap{display:block;font-size:11px;color:var(--ink-3);line-height:1.5}
  .pfoot-recap a{color:var(--ink-2)}
  .pfb-centered .pfoot-recap{flex-basis:auto}
  /* Carried out of the footer when the help center's footer replaces ours, so it needs its own
     padding — it is no longer inside a footer's content box. */
  .pfoot-recap-loose{margin:0;padding:14px 20px 20px}
  .pfb-contrast .pfoot-recap,.pfb-contrast .pfoot-recap a{color:rgba(255,255,255,.55)}
  /* Only the WRAPPER may paint a band — a background on the inner bar draws an
     inset rectangle on top of the full-width band. */
  .pfoot-barwrap .pfoot-bar{background:transparent}
  .pfs-contrast .pfoot-barwrap.pfb-contrast{background:rgba(255,255,255,.06)}
  .pfs-accent .pfoot-barwrap.pfb-tint{background:rgba(255,255,255,.1)}
  .pfoot-copy{font-size:12px;color:var(--ink-3)}
  .pfoot-legal{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .pfoot-legal a{font-size:12px;color:var(--ink-2);text-decoration:none}
  .pfoot-legal a:hover{color:var(--accent)}
  .pfoot-sep{color:var(--ink-3);opacity:.5}
  .pfoot-compact .pfoot-in{padding:16px 20px}
  .pfoot-compact .pfoot-bar{border-top:none;padding-top:0}
  .pfoot-compact{margin-top:24px}
  /* PHASE_PORTAL_NAV2 — advanced footer (mirrors chrome_css) */
  .pfoot-top{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,2.1fr);gap:56px;margin-bottom:26px;align-items:start}
  .pfoot-top .pfoot-cols{margin-bottom:0;min-width:0}
  .pfoot-top .pfoot-brand{max-width:none}
  .pfoot-brand{max-width:280px}
  @media(max-width:860px){.pfoot-top{grid-template-columns:1fr;gap:26px}}
  .pfoot-bt{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
  .pfoot-tag{font-size:13px;color:var(--ink-3);line-height:1.55;margin-bottom:14px}
  /* ── FOOTER CONTACT (address / phone / email) ────────────────────────────
     Sits under the tagline in the brand column. Colours derive from the footer
     surface, so it inverts correctly on the dark/accent surfaces too. */
  .pfoot-contact{display:flex;flex-direction:column;gap:9px;margin:14px 0 4px}
  .pfoot-ct{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.55;color:var(--ink-3)}
  .pfoot-ct-ic{width:16px;height:16px;flex:none;margin-top:2px;opacity:.75}
  .pfoot-ct a{color:inherit;text-decoration:none}
  .pfoot-ct a:hover{color:var(--accent);text-decoration:underline}
  .pfs-accent .pfoot-ct,.pfs-contrast .pfoot-ct{color:rgba(255,255,255,.72)}
  .pfs-accent .pfoot-ct a:hover,.pfs-contrast .pfoot-ct a:hover{color:#fff}
  .pfoot-centered .pfoot-contact{align-items:center}
  .pfoot-centered .pfoot-ct{justify-content:center}
  .pfoot-social{display:flex;gap:8px;flex-wrap:wrap}
  .pfoot-soc{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--ink);text-decoration:none;transition:.15s}
  .pfoot-soc:hover{background:var(--accent-bg,var(--accent));transform:translateY(-2px)}
  .pfoot-rlk{display:flex!important;align-items:flex-start;gap:10px;padding:6px 0}
  .pfoot-ic{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .pfoot-lt{display:flex;flex-direction:column;gap:1px;min-width:0}
  .pfoot-ll{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
  .pfoot-ld{font-size:11.5px;color:var(--ink-3);line-height:1.4}
  .pfoot-centered{text-align:center}
  .pfoot-centered .pfoot-brand{max-width:none;margin:0 auto 26px}
  .pfoot-centered .pfoot-social{justify-content:center}
  .pfoot-centered .pfoot-cols{justify-content:center;justify-items:center}
  /* ══ P12 · FOOTER SURFACES, TYPE SCALE AND SLOTS ══════════════════════════ */
  .pfs-tinted{background:color-mix(in srgb,var(--ink) 4%,var(--bg,#f6f7fb))}
  .pfs-accent{background:var(--accent-bg,var(--accent));border-top-color:transparent}
  .pfs-contrast{background:#0d1220;border-top-color:rgba(255,255,255,.1)}
  /* on the two dark/brand surfaces the whole footer inverts, or half of it
     would keep the light-theme ink and disappear */
  .pfs-accent,.pfs-accent .pfoot-col-t,.pfs-accent .pfoot-bt,.pfs-accent .pfoot-ll,
  .pfs-contrast,.pfs-contrast .pfoot-col-t,.pfs-contrast .pfoot-bt,.pfs-contrast .pfoot-ll{color:#fff}
  .pfs-accent a,.pfs-contrast a{color:rgba(255,255,255,.86)}
  .pfs-accent a:hover,.pfs-contrast a:hover{color:#fff}
  .pfs-accent .pfoot-tag,.pfs-accent .pfoot-ld,.pfs-accent .pfoot-copy,
  .pfs-contrast .pfoot-tag,.pfs-contrast .pfoot-ld,.pfs-contrast .pfoot-copy{color:rgba(255,255,255,.72)}
  .pfs-accent .pfoot-ic,.pfs-contrast .pfoot-ic,
  .pfs-accent .pfoot-soc,.pfs-contrast .pfoot-soc{background:rgba(255,255,255,.14);color:#fff}
  .pfs-accent .pfoot-soc-svg,.pfs-contrast .pfoot-soc-svg{color:rgba(255,255,255,.9)}
  .pfs-accent .pfoot-bar,.pfs-contrast .pfoot-bar{border-top-color:rgba(255,255,255,.16)}
  .pfs-accent .pfoot-brand,.pfs-contrast .pfoot-brand{border-color:rgba(255,255,255,.16)}
  /* Mobile footer: the accordion (chrome_css) owns the stacked layout. These
     mirrors are here so the stack wins regardless of which stylesheet loads
     last — the desktop grid otherwise fits 2 columns across a phone. */
  @media(max-width:640px){
    .pfoot-cols{display:flex;flex-direction:column;grid-template-columns:1fr;gap:0;margin-bottom:14px}
    .pfm-grid-2 .pfoot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px}
    /* copyright area always centers on phones */
    .pfoot-bar{flex-direction:column;align-items:center;text-align:center;gap:10px}
    .pfoot-legal{justify-content:center}
    .pfa-right .pfoot-bar{align-items:center}
  }
  .pft-compact .pfoot-in{padding:22px 20px}
  .pft-compact .pfoot-ll,.pft-compact .pfoot-links a{font-size:12.5px}
  .pft-roomy .pfoot-in{padding:52px 20px}
  .pft-roomy .pfoot-cols{gap:56px}
  .pft-roomy .pfoot-ll,.pft-roomy .pfoot-links a{font-size:14px}
  .pfoot-slots{display:flex;flex-wrap:wrap;align-items:flex-start;gap:22px;justify-content:space-between;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
  .pfoot-centered .pfoot-slots{justify-content:center}
  .pfoot-news{min-width:min(340px,100%)}
  .pfoot-news-t{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px}
  .pfoot-news-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pfoot-news-row{display:flex;gap:8px}
  .pfoot-news-inp{flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--ink);background:var(--card)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:10px 12px;outline:none}
  .pfoot-news-inp:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
  .pfoot-news-btn{flex:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:#fff;background:var(--accent-bg,var(--accent));border-radius:10px;padding:10px 18px;transition:filter .15s,transform .15s}
  .pfoot-news-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
  .pfoot-news-n{font-size:11.5px;color:var(--ink-3);margin-top:7px}
  .pfs-accent .pfoot-news-t,.pfs-contrast .pfoot-news-t{color:#fff}
  .pfs-accent .pfoot-news-n,.pfs-contrast .pfoot-news-n{color:rgba(255,255,255,.7)}
  .pfs-accent .pfoot-news-btn,.pfs-contrast .pfoot-news-btn{background:#fff;color:var(--accent)}
  /* the status pill is a self-contained component with its OWN light surface —
     the blanket white-ink inversion above made its label white on a white pill.
     Opt it back out; the dot colours already carry the state. */
  .pfs-accent .pb-status,.pfs-contrast .pb-status,
  .pfs-accent .pb-status span,.pfs-contrast .pb-status span{color:var(--ink)}
  .pfs-accent .pb-status .pb-status-a,.pfs-contrast .pb-status .pb-status-a{color:var(--ink-3)}
  .pfs-accent .pb-status-ok .pb-status-dot,.pfs-contrast .pb-status-ok .pb-status-dot{color:#16a34a}
  .pfs-accent .pb-status-issues .pb-status-dot,.pfs-contrast .pb-status-issues .pb-status-dot{color:#d97706}
  .pfs-accent .pb-status-down .pb-status-dot,.pfs-contrast .pb-status-down .pb-status-dot{color:#dc2626}
  @media(max-width:640px){ .pfoot-slots{flex-direction:column;gap:18px} .pfoot-news{min-width:0;width:100%} }
  /* real brand marks sit as glyphs, not emoji, so they take the ink colour and
     invert cleanly on the accent hover */
  .pfoot-soc-svg{color:var(--ink-2)}
  .pfoot-soc-svg:hover{color:#fff}
  .pfoot-soc-svg svg{display:block}
  /* ── P12 · SPLIT — brand block anchored left, link columns pushed right, a
        hairline between them. The classic enterprise footer. ── */
  .pfoot-split .pfoot-top{display:flex;align-items:flex-start;gap:56px}
  .pfoot-split .pfoot-brand{flex:0 0 clamp(220px,26%,300px);max-width:none;padding-right:40px;border-right:1px solid var(--line-soft)}
  .pfoot-split .pfoot-cols{flex:1;justify-content:space-between;gap:36px}
  /* six marks must fit the narrow brand column on one row — at 36px + 8px gap
     the sixth wrapped onto a line of its own and read as a mistake */
  .pfoot-split .pfoot-social{margin-top:16px;gap:6px}
  .pfoot-split .pfoot-soc{width:33px;height:33px;border-radius:9px}
  /* ── P12 · PANEL — the whole footer becomes an elevated card inset from the
        page edge, brand above a ruled column row. ── */
  .pfoot-panel{border-top:0;background:transparent}
  .pfoot-panel .pfoot-in{max-width:1120px;background:var(--card);border:1px solid var(--line);border-radius:20px;
    padding:34px 34px 26px;box-shadow:0 20px 50px -28px rgba(15,23,42,.3);margin-bottom:26px}
  .pfoot-panel .pfoot-brand{max-width:none;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line-soft)}
  .pfoot-panel .pfoot-top{display:block}
  .pfoot-panel .pfoot-cols{justify-content:space-between;gap:36px}
  .pfoot-panel .pfoot-bar{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
  @media(max-width:760px){
    .pfoot-split .pfoot-top{flex-direction:column;gap:26px}
    .pfoot-split .pfoot-brand{flex:none;padding-right:0;border-right:0;padding-bottom:22px;border-bottom:1px solid var(--line-soft)}
    .pfoot-panel .pfoot-in{border-radius:16px;padding:24px 20px 20px}
  }
  @media(max-width:640px){.pfoot-top{gap:22px}.pfoot-brand{max-width:none}}
  @media(max-width:640px){
    .pfoot-in{padding:22px 18px}
    /* COLLAPSIBLE MOBILE FOOTER — pxWireFooter() toggles .pf-open on tap at this exact
       breakpoint, but the rules that make it collapse only ever existed in the design
       engine's chrome_css, which ONLY the help center loads. So the portal had the
       behaviour and none of the styling: the class flipped and nothing moved. */
    .pfoot-cols{flex-direction:column;gap:0;margin-bottom:14px}
    /* Faint hairline — --line-soft is tuned for LIGHT surfaces and lands almost
       white on a dark footer, making the accordion read as a table. */
    .pfoot-col{flex:none;width:100%;min-width:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
    .pfs-contrast .pfoot-col,.pfs-accent .pfoot-col{border-bottom-color:rgba(255,255,255,.09)}
    .pfoot-col-t{margin-bottom:0;padding:15px 2px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
    .pfoot-col-t::after{content:"+";font-size:19px;font-weight:600;color:var(--accent);line-height:1;transition:transform .2s ease}
    .pfoot-col.pf-open .pfoot-col-t::after{content:"–"}
    .pfoot-col .pfoot-links{display:none!important;padding:0}
    .pfoot-col.pf-open .pfoot-links{display:block!important;padding:0 0 12px}
    .pfm-expanded .pfoot-col-t::after,.pfm-stacked .pfoot-col-t::after{display:none}
    .pfm-expanded .pfoot-col .pfoot-links,.pfm-stacked .pfoot-col .pfoot-links{display:block!important;padding:0 0 12px}
    .pfm-stacked .pfoot-col{border-bottom:none}.pfm-stacked .pfoot-col-t{padding-bottom:7px;cursor:default}
    /* The copyright row ALWAYS centres on phones regardless of footer
       alignment — owner rule 2026-07-28. This block sits after the earlier
       mobile rules, so it is the one that decides; do not reintroduce
       align-items:flex-start here. */
    .pfoot-bar{flex-direction:column;align-items:center;text-align:center;gap:10px}
    .pfa-center .pfoot-bar,.pfa-right .pfoot-bar{align-items:center;text-align:center}
    .pfoot-copy,.pfoot-recap{text-align:center;width:100%}
    .pfoot-legal{justify-content:center;gap:6px 10px}
    .pfa-center .pfoot-legal,.pfa-right .pfoot-legal{justify-content:center}
  }
  .pannounce{background:var(--accent-bg,linear-gradient(135deg,var(--accent),var(--accent-d)));color:#fff;font-size:13px;font-weight:600}
  .pannounce-in{max-width:1080px;margin:0 auto;padding:9px 20px;text-align:center}
/* The bar's own alignment and fill (owner, 2026-08-01). `auto` keeps the theme's bar;
   `transparent` removes the fill entirely; solid/gradient use the operator's colours
   through the same surface shape every block uses. */
.pannounce.pann-al-left .pannounce-in{text-align:left}
.pannounce.pann-al-center .pannounce-in{text-align:center}
.pannounce.pann-al-right .pannounce-in{text-align:right}
.pannounce.pann-sf-transparent{background:transparent!important;border-color:transparent}

  .pannounce-in a{color:#fff;text-decoration:underline}
  /* PHASE_PORTAL_P6.3 — premium landing band: when the studio design has blocks,
     #px-content becomes a full-bleed, brand-tinted hero band so the portal reads
     as a designed landing (Zendesk Copenhagen / Intercom class) rather than a
     centered form. Empty (anonymous portal, no blocks) = no band, untouched. */
  #px-content:not(:empty){
    position:relative;
    padding:8px 0 34px;
    background:
      radial-gradient(1100px 460px at 50% -160px, color-mix(in srgb,var(--accent) 22%, transparent), transparent 72%),
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%, var(--bg)) 0%, var(--bg) 96%);
  }
  #px-content:not(:empty)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-soft)}
  /* Pages sat too close under the nav. This rule TRIMS the top padding on the
     assumption that #px-content renders a hero band above — but it is
     non-empty on pages that paint nothing visible there, so the trim applied
     with nothing to justify it. Scale it with the viewport instead of pinning
     26px, so a wide shell gets proportional breathing room. */
  #px-content:not(:empty) + .wrap{padding-top:clamp(26px,3vw,52px)}

/* ═══ F5 — Enterprise footer deck ═══ */
.pfoot-deck{max-width:var(--px-maxw,1180px);margin:0 auto;padding:18px clamp(16px,4vw,32px) 6px;display:flex;flex-direction:column;gap:14px}
.pfoot-deck-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.pfoot-pay{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.4px;background:color-mix(in srgb,var(--pfoot-ink,currentColor) 8%,transparent);border:1px solid color-mix(in srgb,var(--pfoot-ink,currentColor) 14%,transparent);opacity:.85;font-style:italic}
.pfoot-pay-visa{font-style:italic;letter-spacing:1px}
.pfoot-paynote{font-size:12px;opacity:.62;margin-inline-start:4px}
.pfoot-app{display:inline-flex;flex-direction:column;justify-content:center;min-width:132px;padding:7px 16px 8px;border-radius:10px;text-decoration:none;line-height:1.15;background:#0b0b10;color:#fff !important;border:1px solid rgba(255,255,255,.18);transition:transform .18s ease,box-shadow .18s ease}
.pfoot-app small{font-size:9.5px;opacity:.75;text-transform:uppercase;letter-spacing:.5px}
.pfoot-app b{font-size:14px;font-weight:800}
.pfoot-app:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pfoot-cert{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;border:1px solid color-mix(in srgb,var(--pfoot-ink,currentColor) 18%,transparent);opacity:.8}
.pfoot-cert svg{flex:0 0 auto;opacity:.75}
.pfoot-worldrow{align-items:flex-start;gap:clamp(18px,4vw,48px)}
.pfoot-hours b,.pfoot-regions b{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;opacity:.6;margin-bottom:6px}
.pfoot-hours div{font-size:12.5px;opacity:.8;line-height:1.7}
.pfoot-region-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.pfoot-region-links a{font-size:12.5px;opacity:.78;text-decoration:none;color:inherit}
.pfoot-region-links a:hover{opacity:1;text-decoration:underline}
.pfoot-langrow{gap:4px 16px;padding-top:2px}
.pfoot-langrow a{font-size:12px;opacity:.7;text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.pfoot-langrow a:hover{opacity:1;border-bottom-color:currentColor}
.pfoot-incident{margin:0 0 10px;padding:9px 14px;border-radius:10px;font-size:12.5px;font-weight:600;background:color-mix(in srgb,#f59e0b 14%,transparent);border:1px solid color-mix(in srgb,#f59e0b 34%,transparent)}
.pfoot-totop{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;margin-inline-start:auto;text-decoration:none;color:inherit;font-size:15px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);opacity:.65;transition:opacity .18s ease,transform .18s ease}
.pfoot-totop:hover{opacity:1;transform:translateY(-2px)}
/* Mega style — CTA crown + widened deck */
.pfoot-mega-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:var(--px-maxw,1180px);margin:0 auto;padding:clamp(26px,5vw,44px) clamp(16px,4vw,32px);border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.pfoot-mega-cta b{font-size:clamp(20px,3.2vw,30px);font-weight:900;letter-spacing:-.5px;line-height:1.15;max-width:640px}
.pfoot-mega-btn{display:inline-flex;align-items:center;height:46px;padding:0 28px;border-radius:999px;font-size:14px;font-weight:800;text-decoration:none;background:var(--px-acc,#6d5cff);color:#fff !important;box-shadow:0 12px 30px color-mix(in srgb,var(--px-acc,#6d5cff) 40%,transparent);transition:transform .18s ease,box-shadow .18s ease}
.pfoot-mega-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px color-mix(in srgb,var(--px-acc,#6d5cff) 52%,transparent)}
footer.pfoot-mega .pfoot-deck{padding-top:26px;gap:18px}
/* Slim-legal style — everything quiet */
footer.pfoot-slim-legal .pfoot-cols,footer.pfoot-slim-legal .pfoot-brandrow{display:none}
footer.pfoot-slim-legal{padding-top:0}
footer.pfoot-slim-legal .pfoot-deck{padding-top:12px;padding-bottom:0;gap:10px}
footer.pfoot-slim-legal .pfoot-bar{font-size:11.5px}
@media (max-width:640px){.pfoot-worldrow{flex-direction:column;gap:16px}.pfoot-mega-cta{justify-content:center;text-align:center}}
@media (prefers-reduced-motion: reduce){.pfoot-app,.pfoot-totop,.pfoot-mega-btn{transition:none}.pfoot-app:hover,.pfoot-totop:hover,.pfoot-mega-btn:hover{transform:none}}

.pfoot-deck.pfda-center .pfoot-deck-row{justify-content:center;text-align:center}
.pfoot-deck.pfda-center .pfoot-worldrow{justify-content:center}
.pfoot-news{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.pfoot-news b{font-size:14px;font-weight:800}
.pfoot-news-in{display:flex;align-items:stretch;border-radius:999px;overflow:hidden;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:color-mix(in srgb,currentColor 5%,transparent)}
.pfoot-news-in input{border:0;background:transparent;color:inherit;padding:9px 16px;font-size:13px;min-width:200px;outline:none}
.pfoot-news-in input::placeholder{color:inherit;opacity:.5}
.pfoot-news-in button{border:0;cursor:pointer;padding:0 16px;font-size:15px;background:var(--px-acc,#6d5cff);color:#fff;transition:filter .15s ease}
.pfoot-news-in button:hover{filter:brightness(1.12)}
a.pfoot-incident{display:block;text-decoration:none;color:inherit}
a.pfoot-incident:hover{filter:brightness(1.06)}

/* Preview stand-in when the operator points sign-in at their own login page. */
.px-extsignin-note{display:flex;flex-direction:column;gap:6px;padding:16px 18px;margin-bottom:14px;border:1px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.px-extsignin-note b{font-size:14px;color:var(--ink)}
.px-extsignin-note span{font-size:12.5px;color:var(--ink-2)}
.px-extsignin-note code{font-size:12px;word-break:break-all;padding:6px 9px;border-radius:8px;background:var(--n-100,rgba(0,0,0,.05));color:var(--ink)}
.px-extsignin-note small{font-size:11.5px;color:var(--ink-3)}