/* OpsIQ Portal hero system — shared by /portal/<workspace> and /hc/<workspace>. */
/* P10b — the hero base, redesigned. The old bare heading-in-space render is
   GONE: real type scale, real rhythm, and every style composes with the
   search card instead of ignoring it. */
.phero{max-width:var(--px-cw,760px);margin:0 auto;padding:54px 20px 12px}
.phero-center{text-align:center}
.phero-h-compact{padding-top:30px;padding-bottom:4px}
.phero-h-tall{padding-top:80px;padding-bottom:26px}
.phero-h{font-size:clamp(30px,4.6vw,40px);font-weight:850;line-height:1.08;letter-spacing:-.03em;color:var(--ink);margin:0 0 12px}
.phero-h-tall .phero-h{font-size:clamp(36px,5.4vw,48px)}
.phero-h-compact .phero-h{font-size:26px}
.phero-s{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0;max-width:560px;margin-inline:auto}
.phero-left .phero-s{margin-inline:0}
/* ════════════════════════════════════════════════════════════════════════
   P10 — TEN HERO DESIGNS. Each is a distinct STRUCTURE with its OWN search
   treatment; colour comes from the theme vars (--accent, --hero-bg, --ink,
   --card, --line …) so the palette stays the operator's. The unit wrapper
   .phu-<style> holds the hero + search as one composition.
   ════════════════════════════════════════════════════════════════════════ */
.phero-unit{position:relative}
#px-content{overflow-x:clip}
#px-content.px-kb-hero>*:not(.phero-unit):not(#px-hc-hero){display:none!important}
#px-content.px-kb-hero{display:block}
#px-content.px-kb-hero:not(:empty){margin-bottom:clamp(14px,2.5vw,30px)}
#pg-knowledge.has-portal-hero .kn-head{display:none}
#pg-knowledge.has-portal-hero .kn-shell{padding-top:2px}
@media(max-width:760px){#px-content.px-kb-hero:not(:empty){margin-bottom:12px}}
/* shared search bar — the base every style then re-tailors */
.psearch{max-width:min(var(--px-cw,760px),640px);margin:18px auto 0;padding:0 20px;position:relative;z-index:2}
.psa-left{margin-left:0;margin-right:auto}.psa-right{margin-left:auto;margin-right:0}
.psearch-in{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 10px 30px -14px rgba(15,23,42,.22);transition:box-shadow .18s,border-color .18s,transform .18s;cursor:text}
.psearch-inp{font-size:16px}
.psearch-in:focus-within{border-color:var(--accent);box-shadow:0 18px 48px -12px color-mix(in srgb,var(--accent) 42%, transparent),0 0 0 4px color-mix(in srgb,var(--accent) 14%, transparent)}
.psearch-ic{color:var(--accent);flex-shrink:0}
.psearch-inp{border:none;background:none;outline:none;flex:1;min-width:0;font-size:15.5px;color:var(--ink);font-family:inherit}
.psearch-inp::placeholder{color:var(--ink-3)}
.psearch-go{flex-shrink:0;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:14px;color:#fff;background:var(--accent-bg,var(--accent));border-radius:10px;padding:10px 18px;transition:filter .15s,transform .15s}
.psearch-go:hover{filter:brightness(1.07);transform:translateY(-1px)}
.psearch-kbd{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--ink-3);border:1px solid var(--line);border-radius:7px;padding:3px 8px;letter-spacing:.02em;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.psearch-res{position:fixed;z-index:240;margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;display:none;max-height:min(520px,calc(100vh - 24px));box-shadow:0 28px 72px -22px rgba(2,6,23,.48),0 8px 24px -14px rgba(2,6,23,.28);text-align:left;transform-origin:top center}
.phs-glow{display:none}
.psearch-res.on{display:block;animation:pxSearchDrop .16s var(--ease)}
@keyframes pxSearchDrop{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}
.psearch-res.prs-compact .psearch-a{padding:10px 14px}.psearch-res.prs-compact .psearch-ax{display:none}
.psearch-res.prs-command{border-radius:12px;background:color-mix(in srgb,var(--ink) 96%,var(--card));border-color:color-mix(in srgb,var(--card) 18%,transparent)}
.psearch-res.prs-command .psearch-at{color:var(--card)}.psearch-res.prs-command .psearch-ax,.psearch-res.prs-command .psearch-empty{color:color-mix(in srgb,var(--card) 68%,transparent)}
.psearch-res.prs-command .psearch-a{border-color:color-mix(in srgb,var(--card) 12%,transparent)}.psearch-res.prs-command .psearch-a:hover,.psearch-res.prs-command .psearch-a[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 32%,transparent)}
.psearch-a[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 9%,var(--card));outline:none}
.psearch-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;background:color-mix(in srgb,var(--card) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(12px);font-size:12px;color:var(--ink-3)}
.psearch-viewall{border:0;background:none;color:var(--accent);font:inherit;font-weight:800;cursor:pointer;padding:2px 0}
.psearch-a{display:block;padding:12px 16px;border-bottom:1px solid var(--line-soft);text-decoration:none;transition:.12s}
.psearch-a:last-child{border-bottom:none}
.psearch-a:hover{background:color-mix(in srgb,var(--accent) 7%, var(--card))}
.psearch-at{font-size:14px;font-weight:700;color:var(--ink)}
.psearch-ax{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.psearch-empty{padding:14px 16px;font-size:13.5px;color:var(--ink-3)}
/* PHASE_PORTAL_P20 - portal-native knowledge surface. */
.kn-shell{max-width:1080px;margin:0 auto}.kn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 24px}.kn-head h1{margin:0;font-size:clamp(28px,4vw,48px);letter-spacing:-.04em}.kn-head p{margin:8px 0 0;color:var(--ink-3);font-size:15px}
.kn-search{display:flex;align-items:center;gap:10px;min-width:min(100%,420px);padding:8px 8px 8px 15px;border:1px solid var(--line);background:var(--card);border-radius:14px;box-shadow:var(--shadow-sm)}.kn-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}.kn-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:inherit}.kn-search button{border:0;background:var(--accent-bg,var(--accent));color:#fff;border-radius:10px;padding:10px 15px;font:inherit;font-weight:800;cursor:pointer}
.kn-section{margin-top:28px}.kn-section-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.kn-section-h h2{margin:0;font-size:19px}.kn-section-h span{font-size:12px;color:var(--ink-2)}/* PHASE_PORTAL_P26 — was --ink-3.
   ⚠ --ink-3 (#64748b) clears AA on WHITE (4.76) but only reaches 4.30 on the knowledge
   page tinted surface (#eff6ff) — axe flagged both count badges as serious. --ink-2
   (#475569) measures 6.76 there. GENERAL RULE: --ink-3 is a tertiary token that is only
   safe on the base white/near-white surface; on any tinted panel step up to --ink-2. */
.kn-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.kn-cat{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--card);text-decoration:none;box-shadow:var(--shadow-sm);transition:.16s var(--ease)}.kn-cat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:var(--shadow-md)}.kn-cat-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent);font-weight:900}.kn-cat b{display:block;color:var(--ink);font-size:14px}.kn-cat small{display:block;color:var(--ink-3);margin-top:2px}
.kn-arts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kn-art{display:block;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--card);text-decoration:none;transition:.16s var(--ease)}.kn-art:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));transform:translateY(-2px)}.kn-art-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);font-weight:850}.kn-art h3{margin:7px 0 6px;font-size:16px;line-height:1.35;color:var(--ink)}.kn-art p{margin:0;color:var(--ink-3);font-size:13px;line-height:1.55}
.kn-home.knh-category-list .kn-cats,.kn-home.knh-compact .kn-cats{grid-template-columns:1fr}.kn-home.knh-category-list .kn-cat,.kn-home.knh-compact .kn-cat{padding:12px 15px}.kn-home.knh-article-grid .kn-categories{display:none}.kn-home.knh-split{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:28px}.kn-home.knh-split .kn-section{margin-top:0}.kn-home.knh-split .kn-cats,.kn-home.knh-split .kn-arts{grid-template-columns:1fr}.kn-home.knh-compact .kn-arts{grid-template-columns:1fr}.kn-home.knh-compact .kn-art{padding:13px 15px}
.kn-empty{padding:32px;border:1px dashed var(--line);border-radius:15px;color:var(--ink-3);text-align:center;background:color-mix(in srgb,var(--card) 55%,transparent)}.kn-skeleton{height:110px;border-radius:15px;background:linear-gradient(100deg,var(--line-soft) 20%,color-mix(in srgb,var(--card) 82%,var(--line)) 40%,var(--line-soft) 60%);background-size:220% 100%;animation:knsk 1.2s linear infinite}@keyframes knsk{to{background-position:-220% 0}}
.kn-article{max-width:1080px;margin:0 auto}.kn-crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);margin-bottom:18px}.kn-crumbs a{color:var(--accent);text-decoration:none}.kn-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}.kn-paper{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,5vw,54px);box-shadow:var(--shadow-sm)}.kn-paper h1{margin:0 0 10px;font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.04em}.kn-meta{font-size:12.5px;color:var(--ink-3);padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}.kn-body{font-size:15.5px;line-height:1.75;color:var(--ink-2)}.kn-body h2,.kn-body h3{color:var(--ink);line-height:1.25;margin:1.6em 0 .55em}.kn-body img{max-width:100%;height:auto;border-radius:12px}.kn-body pre{overflow:auto;padding:16px;border-radius:12px;background:var(--line-soft)}.kn-body a{color:var(--accent)}.kn-related{position:sticky;top:calc(var(--px-navh,0px) + 22px);padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.kn-related h2{font-size:14px;margin:0 0 10px}.kn-related a{display:block;padding:10px 0;border-top:1px solid var(--line-soft);color:var(--ink);text-decoration:none;font-size:13px;font-weight:700}.kn-related a:first-of-type{border-top:0}.kn-related a:hover{color:var(--accent)}
.kn-article.kna-reading{max-width:780px}.kn-article.kna-reading .kn-article-grid,.kn-article.kna-compact .kn-article-grid,.kn-article.kna-wide .kn-article-grid{display:block}.kn-article.kna-reading .kn-related,.kn-article.kna-compact .kn-related,.kn-article.kna-wide .kn-related{position:static;margin-top:18px}.kn-article.kna-wide{max-width:1280px}.kn-article.kna-wide .kn-paper{border-radius:8px}.kn-article.kna-compact{max-width:720px}.kn-article.kna-compact .kn-paper{padding:24px}.kn-article.kna-docs .kn-paper{border-radius:8px;box-shadow:none}
@media(max-width:760px){.kn-head{align-items:stretch;flex-direction:column}.kn-search{min-width:0}.kn-cats,.kn-arts{grid-template-columns:1fr}.kn-home.knh-split{display:block}.kn-home.knh-split .kn-section{margin-top:28px}.kn-article-grid{grid-template-columns:1fr}.kn-related{position:static}.kn-paper{padding:24px 20px;border-radius:14px}}
/* quick-action buttons (split, tiles) */
.phs-qa{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:15px 17px;font:inherit;font-size:14px;font-weight:750;cursor:pointer;text-align:left;transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease);text-decoration:none}
.phs-qa b{font-weight:750}
.phs-qa:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 40%,transparent)}
.phs-qa span{color:var(--accent);font-weight:900}

/* shared premium search atoms the styles compose from */
.psearch-icchip .psearch-ic{width:38px;height:38px;padding:10px;box-sizing:border-box;border-radius:11px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* bespoke leading mark (replaces the magnifier on the styles that carry one) */
.psearch-glyph{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;line-height:1;color:var(--accent)}
.psearch-go-round{width:46px;height:46px;padding:0;border-radius:999px;font-size:19px}

/* per-hero action buttons — each carries its own label, sized to its band */
.phu-classic .psearch-go{padding:13px 22px;border-radius:12px}
.phu-banner .psearch-go{background:#fff;color:var(--accent);padding:12px 20px;border-radius:10px;box-shadow:0 10px 22px -10px rgba(2,6,23,.5)}
.phu-banner .psearch-glyph{color:#fff;font-size:16px}
.phu-aurora .psearch-go{background:rgba(255,255,255,.92);color:var(--accent);padding:12px 22px;border-radius:999px}
.phu-aurora .psearch-glyph{color:#fff}
.phu-card .psearch-go{padding:13px 22px;border-radius:12px}
.phu-card .psearch-glyph{color:var(--accent);font-size:19px}
.phu-editorial .psearch-go{background:#fff;color:var(--accent);padding:11px 22px;border-radius:8px;font-size:14px}
.phu-arc .psearch-go-round{box-shadow:0 10px 24px -10px rgba(2,6,23,.55)}
.phu-tiles .psearch-go{padding:13px 22px;border-radius:11px}
.phu-minimal .psearch-glyph{color:#fff;opacity:.85;font-size:19px}

/* ── shared hero atoms: the eyebrow pill and the stat row, both modelled on
      the help centre's hc-hero-pill / hc-hero-stats idiom. ── */
.phero-pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 15px 7px 12px;margin-bottom:20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.phero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.phero-stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.82)}
.phero-center .phero-stats{justify-content:center}
.phero-stat{display:inline-flex;align-items:baseline;gap:7px}
.phero-stat strong{font-size:19px;font-weight:850;color:#fff;letter-spacing:-.02em}
.phero-stat-sep{width:1px;height:18px;background:rgba(255,255,255,.28)}

/* ── 1 · HORIZON (key: classic) — a deep centred band whose seam rises in
      three stacked horizon arcs; the big white search card straddles it. ── */
.phu-classic{max-width:none;margin-inline:calc(50% - 50vw);padding:4px calc(50vw - min(50vw,600px)) 0;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;margin-bottom:64px}
.phu-classic::before{content:'';position:absolute;inset:0;background:radial-gradient(1100px 460px at 50% -22%,rgba(255,255,255,.3),transparent 68%),linear-gradient(180deg,transparent 55%,rgba(2,6,23,.18));pointer-events:none}
.phu-classic .phs-horizon{position:absolute;left:0;right:0;bottom:0;height:190px;overflow:hidden;pointer-events:none}
.phu-classic .phs-horizon i{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50% 50% 0 0;border-top:2px solid rgba(255,255,255,.32)}
.phu-classic .phs-horizon i:nth-child(1){width:132%;height:180px;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 70%)}
.phu-classic .phs-horizon i:nth-child(2){width:96%;height:130px;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 72%);border-top-color:rgba(255,255,255,.38)}
.phu-classic .phs-horizon i:nth-child(3){width:60%;height:84px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 74%);border-top-color:rgba(255,255,255,.46)}
.phu-classic>*{position:relative;z-index:1}
.phu-classic{padding-bottom:76px}
.phu-classic .phero{padding-top:80px;padding-bottom:10px}
.phu-classic .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;text-shadow:0 2px 34px rgba(10,8,30,.28);font-size:clamp(34px,5vw,50px)}
.phu-classic .phero-s{color:rgba(255,255,255,.9)!important}
/* the search sits INSIDE the band as part of the composition — it no longer
   hangs half-out over the bottom seam. */
.phu-classic .psearch{max-width:620px;margin-top:30px}
.phu-classic .psearch-in{padding:12px 12px 12px 14px;border-radius:18px;border-color:transparent;box-shadow:0 30px 70px -24px rgba(2,6,23,.5);gap:13px}
.phu-classic .psearch-inp{font-size:16px}

/* ── 2 · SPOTLIGHT (key: spotlight) — the band goes cinematic: dot-grid
      texture + deep top glow, XL type, and a grand pill with a solid accent
      Search button. ── */
.phu-spotlight{max-width:none;margin-inline:calc(50% - 50vw);padding:6px calc(50vw - min(50vw,600px)) 68px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
/* the theatre: a hard beam down from above, an elliptical floor pool the copy
   stands in, and a heavy vignette pushing the corners into shadow. */
.phu-spotlight .phs-beam{position:absolute;left:50%;top:-8%;width:min(120%,1100px);height:118%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 42%,transparent 78%);
  clip-path:polygon(38% 0,62% 0,88% 100%,12% 100%);filter:blur(14px);opacity:.9}
.phu-spotlight .phs-pool{position:absolute;left:50%;bottom:2%;width:min(96%,900px);height:230px;transform:translateX(-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,.12) 58%,transparent 78%)}
.phu-spotlight::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(2,6,23,.42) 100%)}
.phu-spotlight>*{position:relative;z-index:1}
.phu-spotlight .phero{padding-top:92px;padding-bottom:6px}
.phu-spotlight .phero-pill{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.42)}
.phu-spotlight .phero-h{font-size:clamp(40px,6vw,62px);letter-spacing:-.04em;line-height:1.02;text-shadow:0 4px 44px rgba(2,6,23,.4)}
.phu-spotlight .phero-s{color:rgba(255,255,255,.9)!important;max-width:600px;font-size:17.5px}
.phu-spotlight .psearch{max-width:660px;margin-top:30px}
.phu-spotlight .psearch-in{padding:10px 10px 10px 22px;border-radius:999px;border-color:transparent;box-shadow:0 34px 80px -20px rgba(2,6,23,.7),inset 0 0 0 1px rgba(255,255,255,.4)}
.phu-spotlight .psearch-inp{font-size:17px;padding:9px 0}
.phu-spotlight .psearch-go{padding:14px 26px;border-radius:999px;font-size:15px}

/* ── 3 · BANNER (key: banner) — a diagonal-cut band; the search lives INSIDE
      the band as a frosted glass row with a white ring + arrow. ── */
.phu-banner{max-width:none;margin-inline:calc(50% - 50vw);padding:4px calc(50vw - min(50vw,560px)) 92px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 88%,#000) 0%,var(--accent) 55%,color-mix(in srgb,var(--accent) 70%,#fff) 130%);clip-path:polygon(0 0,100% 0,100% calc(100% - 54px),0 100%);position:relative}
.phu-banner .phs-rings{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.phu-banner .phs-rings i{position:absolute;border-radius:50%}
.phu-banner .phs-rings i:nth-child(1){right:-120px;top:-160px;width:440px;height:440px;border:70px solid rgba(255,255,255,.16)}
.phu-banner .phs-rings i:nth-child(2){right:120px;top:120px;width:200px;height:200px;border:2px solid rgba(255,255,255,.34)}
.phu-banner>*{position:relative}
.phu-banner .phero{padding-top:70px;padding-bottom:10px;text-align:left;max-width:none}
.phu-banner .phs-bandrow{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;max-width:min(var(--px-cw,760px),720px);margin:0}
.phu-banner .phs-bandcopy{min-width:0}
.phu-banner .phero-stats{margin-top:0}
.phu-banner .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(32px,4.6vw,46px)}
.phu-banner .phero-s{color:rgba(255,255,255,.88)!important;margin-inline:0}
.phu-banner .psearch{max-width:min(var(--px-cw,760px),640px);margin:22px auto 0 auto;margin-left:0;padding:0 20px}
.phu-banner .psearch-in{background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:8px 8px 8px 18px;box-shadow:0 18px 44px -18px rgba(2,6,23,.4)}
.phu-banner .psearch-ic{color:#fff}
.phu-banner .psearch-inp{color:#fff}
.phu-banner .psearch-inp::placeholder{color:rgba(255,255,255,.75)}
.phu-banner .psearch-arrow{background:#fff;color:var(--accent);box-shadow:0 10px 22px -10px rgba(2,6,23,.5)}

/* ── 4 · PRISM (key: aurora) — the brand band refracted: layered diagonal
      light shafts across the hero colour, and a gradient-ring glass pill. ── */
.phu-aurora{max-width:none;margin-inline:calc(50% - 50vw);padding:6px calc(50vw - min(50vw,600px)) 76px;position:relative;overflow:hidden;
  background:var(--hero-bg,var(--accent-bg,var(--accent)))}
/* three hard-edged glass shards raking across the band — refraction you can
   actually see, not a 7%-opacity gradient that renders as nothing. */
.phu-aurora .phs-facets{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.phu-aurora .phs-facets i{position:absolute;top:-30%;height:170%;transform:rotate(14deg);transform-origin:top center}
.phu-aurora .phs-facets i:nth-child(1){left:4%;width:230px;background:linear-gradient(96deg,rgba(255,255,255,.26),rgba(255,255,255,.04));clip-path:polygon(28% 0,100% 0,72% 100%,0 100%)}
.phu-aurora .phs-facets i:nth-child(2){left:40%;width:150px;background:linear-gradient(96deg,rgba(255,255,255,.34),rgba(255,255,255,.06));clip-path:polygon(34% 0,100% 0,66% 100%,0 100%)}
.phu-aurora .phs-facets i:nth-child(3){right:6%;width:320px;background:linear-gradient(96deg,rgba(255,255,255,.2),rgba(255,255,255,.02));clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
.phu-aurora::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 380px at 22% -20%,rgba(255,255,255,.24),transparent 66%)}
.phu-aurora>*{position:relative;z-index:1}
/* copy and search share one left edge: .phero text lands at 20px padding +
   3px rule + 26px indent = 49px, which is exactly the search's padding-left. */
.phu-aurora .phero{padding-top:96px;position:relative;text-align:left;max-width:min(var(--px-cw,760px),700px);margin-left:0;margin-right:auto}
.phu-aurora .phs-prismcopy{border-left:3px solid rgba(255,255,255,.7);padding-left:26px}
.phu-aurora .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(36px,5.2vw,54px);letter-spacing:-.035em}
.phu-aurora .phero-s{color:rgba(255,255,255,.88)!important;margin-inline:0}
.phu-aurora .phero-stats{justify-content:flex-start}
.phu-aurora .psearch-in{position:relative;background:rgba(255,255,255,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid transparent;border-radius:999px;padding:17px 26px;box-shadow:0 24px 56px -20px rgba(2,6,23,.45)}
.phu-aurora .psearch-in::before{content:'';position:absolute;inset:-1.5px;border-radius:999px;padding:1.5px;background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(255,255,255,.15) 45%,rgba(255,255,255,.75));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.phu-aurora .psearch-ic{color:#fff}
.phu-aurora .psearch-inp{color:#fff}
.phu-aurora .psearch-inp::placeholder{color:rgba(255,255,255,.75)}
.phu-aurora .psearch{margin-left:0;margin-right:auto;max-width:min(var(--px-cw,760px),620px);padding-left:49px}

/* ── 5 · MARQUEE (key: split) — a brand band split down the middle: copy left,
      action cards right on a translucent panel; joined input+button search. ── */
.phu-split{max-width:none;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - min(50vw,560px)) 66px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-split::before{content:'';position:absolute;right:-190px;top:-120px;width:460px;height:460px;border-radius:50%;border:2px dashed rgba(255,255,255,.26);pointer-events:none}
.phu-split::after{content:'';position:absolute;inset:0;background:radial-gradient(800px 320px at 20% -20%,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.phu-split>*{position:relative;z-index:1}
.phu-split .phero.phs-split{display:grid;grid-template-columns:1.15fr .85fr;column-gap:48px;align-items:center;text-align:left;max-width:none;padding:80px 20px 0;margin:0}
.phu-split .phs-main{min-width:0}
.phu-split .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(30px,3.8vw,42px)}
.phu-split .phero-s{margin-inline:0;color:rgba(255,255,255,.88)!important}
.phu-split .phs-side{display:flex;flex-direction:column;gap:12px;position:relative}
.phu-split .phs-qa{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:0 16px 36px -20px rgba(2,6,23,.45)}
.phu-split .phs-qa:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.phu-split .phs-qa span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--accent)}
.phu-split .psearch{margin:14px 0 0;padding:0 20px;max-width:560px}
.phu-split .psearch-in{padding:0;border-radius:14px;overflow:hidden;gap:0;border-color:transparent;box-shadow:0 22px 50px -20px rgba(2,6,23,.5)}
.phu-split .psearch-ic{margin-left:18px}
.phu-split .psearch-inp{padding:17px 14px;font-size:16px}
.phu-split .psearch-go{border-radius:0;align-self:stretch;padding:0 26px;font-size:15px}

/* ── 6 · PODIUM (key: card) — the brand band as a stage, with one elevated
      white card lifted onto it holding the copy and a full-width search. ── */
/* ── 6 · PODIUM (key: card) — a raised DAIS in the theme colour. The copy
      stands on a lifted, lighter tier of the hero surface with a bright top
      edge and a deep drop below it; a wider base tier sits behind. The band
      NEVER goes white — the plinth is the brand colour lifted, not a card. ── */
.phu-card{max-width:none;margin-inline:calc(50% - 50vw);padding:104px calc(50vw - min(50vw,620px)) 84px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-card::before{content:'';position:absolute;left:0;right:0;top:0;height:70%;background:radial-gradient(900px 340px at 50% -20%,rgba(255,255,255,.26),transparent 70%);pointer-events:none}
.phu-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(2,6,23,.22))}
.phu-card>*{position:relative;z-index:1}
/* the lifted tier: a lighter plane of the SAME hero colour, edge-lit on top */
.phu-card .phs-cardbox{position:relative;max-width:660px;margin:0 auto;padding:46px 52px 30px;border-radius:24px 24px 0 0;margin-top:0;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 40px 90px -30px rgba(2,6,23,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* The base step belongs BELOW the plinth, so it hangs off the search (the
   bottom of the column) — on the copy tier its top edge cut a seam straight
   through the heading. */
.phu-card .phero{padding:0;max-width:none}
.phu-card .phero-h{font-size:clamp(32px,4.4vw,46px)}
.phu-card .phero-s{color:rgba(255,255,255,.9)!important}
/* the search is the face of the plinth: a solid white field on the dais */
.phu-card .psearch{max-width:660px;margin-top:0;padding:0;position:relative;z-index:2}
/* NO protruding base step: a wider slab behind the search read as a
   misaligned rectangle (worst in dark themes, where it is dark-on-dark). The
   dais is ONE cohesive block — copy tier above, search face below. */
.phu-card .psearch-in{border-radius:0 0 24px 24px;border-color:transparent;box-shadow:0 40px 90px -30px rgba(2,6,23,.6);padding:20px 30px 24px;background:var(--card);gap:14px}
.phu-card .psearch-inp{font-size:16.5px}
.phu-card .psearch-ic{width:20px;height:20px}

/* ── 7 · MASTHEAD (key: editorial) — a left-set brand band with a rule-and-
      kicker masthead and a bold white baseline search carrying an Enter mark. ── */
.phu-editorial{max-width:none;margin-inline:calc(50% - 50vw);padding:6px calc(50vw - min(50vw,580px)) 56px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
/* the meta rail: a precise hairline across the top of the band */
.phu-editorial .phs-rail{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.28);pointer-events:none}
.phu-editorial>*{position:relative;z-index:1}
.phu-editorial .phero{text-align:left;max-width:none;padding:34px 20px 8px;margin:0}
.phu-editorial .phs-meta{display:flex;align-items:center;gap:16px;margin-bottom:44px}
.phu-editorial .phs-meta-k{font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.phu-editorial .phs-meta-line{flex:1;height:1px;background:rgba(255,255,255,.22)}
/* the two-column enterprise header, split by a hairline rule */
.phu-editorial .phs-conc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0}
.phu-editorial .phs-conc-copy{min-width:0;padding-right:48px}
/* with no stat row there is no assurance column, so let the copy take the
   full measure rather than sitting in a 1.35fr well beside empty space */
.phu-editorial .phs-conc-copy:only-child{grid-column:1 / -1;padding-right:0;max-width:860px}
.phu-editorial .phs-conc-assure{border-left:1px solid rgba(255,255,255,.22);padding-left:40px;display:flex;align-items:center}
.phu-editorial .phs-conc-assure .phero-stats{flex-direction:column;align-items:flex-start;gap:16px;margin-top:0}
.phu-editorial .phs-conc-assure .phero-stat-sep{display:none}
.phu-editorial .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(38px,5.4vw,58px);letter-spacing:-.038em;line-height:1.02}
.phu-editorial .phero-s{margin-inline:0;margin-top:18px;max-width:560px;font-size:16.5px;color:rgba(255,255,255,.86)!important}
/* one authoritative bar spanning the full measure, squared off, hairline above */
.phu-editorial .psearch{margin-left:0;margin-right:0;max-width:none;padding:0 20px;margin-top:52px}
.phu-editorial .psearch-in{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.34);border-radius:6px;box-shadow:none;padding:8px 8px 8px 22px;gap:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.phu-editorial .psearch-in:focus-within{border-color:rgba(255,255,255,.75);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.phu-editorial .psearch-ic{color:rgba(255,255,255,.9);width:19px;height:19px}
.phu-editorial .psearch-inp{font-size:16px;font-weight:500;color:#fff;padding:12px 0}
.phu-editorial .psearch-inp::placeholder{color:rgba(255,255,255,.62)}
.phu-editorial .psearch-go{background:#fff;color:var(--accent);border-radius:5px;padding:13px 30px;font-size:14px;letter-spacing:.01em}

/* ── 8 · ARC (key: arc) — the brand band bows into a deep curve; a double-halo
      pill search floats exactly on the apex; soft satellite dots orbit. ── */
.phu-arc{max-width:none;margin-inline:calc(50% - 50vw);padding:4px calc(50vw - min(50vw,560px)) 96px;background:var(--hero-bg,var(--accent-bg,var(--accent)));border-radius:0 0 50% 50%/0 0 120px 120px;position:relative;margin-bottom:40px}
.phu-arc::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(900px 400px at 50% -24%,rgba(255,255,255,.28),transparent 66%)}
/* concentric orbit rings — real geometry, not scattered dots */
.phu-arc .phs-orbit{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.phu-arc .phs-orbit i{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.22)}
.phu-arc .phs-orbit i:nth-child(1){width:760px;height:760px}
.phu-arc .phs-orbit i:nth-child(2){width:1080px;height:1080px;border-color:rgba(255,255,255,.15)}
.phu-arc .phs-orbit i:nth-child(3){width:440px;height:440px;border-color:rgba(255,255,255,.3)}
.phu-arc>*{position:relative;z-index:1}
.phu-arc .phero{padding-top:96px;padding-bottom:10px}
.phu-arc .phero-h{font-size:clamp(34px,4.8vw,50px)}
.phu-arc .phero-s{color:rgba(255,255,255,.88)!important}
/* the pill sits INSIDE the band, clear of the curve, so the arc never slices it */
.phu-arc .psearch{max-width:560px;margin-top:28px}
.phu-arc .psearch-in{border-radius:999px;padding:10px 10px 10px 22px;border-color:transparent;box-shadow:0 0 0 8px color-mix(in srgb,var(--card) 30%,transparent),0 26px 60px -20px rgba(2,6,23,.45)}
.phu-arc .psearch-arrow{border-radius:999px}

/* ── 9 · LAUNCHPAD (key: tiles) — a compact brand band whose glass action
      tiles break out of its lower edge, with an inset white search. ── */
.phu-tiles{max-width:none;margin-inline:calc(50% - 50vw);padding:6px calc(50vw - min(50vw,540px)) 72px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative}
.phu-tiles::before{content:'';position:absolute;inset:0;background:radial-gradient(820px 320px at 50% -24%,rgba(255,255,255,.24),transparent 70%);pointer-events:none}
.phu-tiles>*{position:relative;z-index:1}
/* one content measure for the whole composition: copy, tiles and search all
   share the same 1000px column, so nothing reads as misaligned. */
.phu-tiles .phero{padding:88px 20px 4px;max-width:none}
.phu-tiles .phs-padcopy{max-width:1000px;margin:0 auto}
.phu-tiles .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(32px,4.4vw,46px)}
.phu-tiles .phero-s{color:rgba(255,255,255,.88)!important}
.phu-tiles .phs-tilerow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px auto 0;max-width:1000px;text-align:left}
.phu-tiles .phs-qa{background:var(--card);border-color:transparent;box-shadow:0 24px 50px -22px rgba(2,6,23,.5)}
.phu-tiles .phs-qa span{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent-bg,var(--accent));color:#fff}
.phu-tiles .psearch{max-width:1040px;padding:0 20px;margin-top:34px}
.phu-tiles .psearch-in{background:var(--card);border-color:transparent;box-shadow:0 26px 56px -22px rgba(2,6,23,.5)}

/* ── 10 · CONSOLE (key: minimal) — a tight brand strip: overline, one line of
      copy, and a dark command bar with a prompt caret and ⌘K. ── */
.phu-minimal{max-width:none;margin-inline:calc(50% - 50vw);padding:6px calc(50vw - min(50vw,520px)) 74px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
/* the plate: a double hairline frame inset in the band, with L-shaped corner
   registration brackets — an architectural, measured, enterprise silhouette. */
.phu-minimal .phs-plate{position:absolute;left:max(28px,calc(50vw - min(50vw,600px)));right:max(28px,calc(50vw - min(50vw,600px)));top:34px;bottom:34px;pointer-events:none;
  border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 0 7px rgba(255,255,255,.055)}
.phu-minimal .phs-plate i{position:absolute;width:19px;height:19px;border:2px solid rgba(255,255,255,.72)}
.phu-minimal .phs-plate i:nth-child(1){left:-1px;top:-1px;border-right:0;border-bottom:0}
.phu-minimal .phs-plate i:nth-child(2){right:-1px;top:-1px;border-left:0;border-bottom:0}
.phu-minimal .phs-plate i:nth-child(3){left:-1px;bottom:-1px;border-right:0;border-top:0}
.phu-minimal .phs-plate i:nth-child(4){right:-1px;bottom:-1px;border-left:0;border-top:0}
.phu-minimal>*{position:relative;z-index:1}
.phu-minimal .phero{text-align:center;padding:80px 20px 0;max-width:none;margin:0 0 30px}
.phu-minimal .phs-key{max-width:660px;margin:0 auto}
/* PHASE_PORTAL_P26 — axe (serious): white at .72 alpha over the hero blue measured 4.15,
   below the 4.5 AA floor. This is SMALL text (10.5px/800 is nowhere near the 18.66px-bold
   large-text exemption) so 4.5 applies, not 3.0. .88 measures 5.42 — clears it with margin
   while keeping the label visibly softer than the pure-white heading beside it.
   The sibling .phs-key-rule keeps .72: it is a decorative line, and contrast rules do not
   apply to pure decoration. */
.phu-minimal .phs-key-k{font-size:10.5px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-bottom:20px}
.phu-minimal .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(34px,4.6vw,48px);letter-spacing:-.032em;margin-bottom:0}
.phu-minimal .phs-key-rule{width:60px;height:2px;background:rgba(255,255,255,.72);margin:26px auto 24px}
.phu-minimal .phero-s{margin-inline:auto;font-size:16px;color:rgba(255,255,255,.85)!important;max-width:520px}
.phu-minimal .phero-stats{justify-content:center}
/* the search is inset within the plate — squared, precise, solid action */
.phu-minimal .psearch{margin-inline:auto;max-width:600px;padding:0 20px}
.phu-minimal .psearch-in{border-radius:6px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.36);box-shadow:none;padding:8px 8px 8px 20px;gap:14px}
.phu-minimal .psearch-ic{color:rgba(255,255,255,.9);width:19px;height:19px}
.phu-minimal .psearch-inp{color:#fff;font-size:15.5px;padding:11px 0}
.phu-minimal .psearch-inp::placeholder{color:rgba(255,255,255,.6)}
.phu-minimal .psearch-go{background:#fff;color:var(--accent);border-radius:5px;padding:12px 26px;font-size:14px}
.phu-minimal .psearch-in:focus-within{border-color:rgba(255,255,255,.78);box-shadow:0 0 0 3px rgba(255,255,255,.14)}

/* ── 11 · COMMAND (key: command) — an operations console: indexed rail,
      measured grid, command search. */
.phu-command{max-width:none;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - min(50vw,600px)) 76px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-command .phs-command-grid{position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 86%)}
.phu-command::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(2,6,23,.34),transparent 58%),radial-gradient(680px 300px at 82% 12%,rgba(255,255,255,.22),transparent 70%)}
.phu-command>*{position:relative;z-index:1}
.phu-command .phero{max-width:none;margin:0;padding:82px 20px 0;text-align:left}
.phu-command .phs-command-shell{display:grid;grid-template-columns:74px minmax(0,1fr);gap:34px;align-items:stretch}
.phu-command .phs-command-index{border-right:1px solid rgba(255,255,255,.32);display:flex;flex-direction:column;justify-content:space-between;padding:4px 24px 4px 0}
.phu-command .phs-command-index i{font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.7);font-style:normal;letter-spacing:.12em}
.phu-command .phs-command-copy{max-width:760px}
.phu-command .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(38px,5.2vw,58px);font-weight:850;line-height:.98;letter-spacing:-.045em;max-width:720px}
.phu-command .phero-s{color:rgba(255,255,255,.82)!important;margin-inline:0;max-width:590px}
.phu-command .phero-stats{justify-content:flex-start}
.phu-command .psearch{max-width:840px;margin:34px 0 0;padding:0 20px 0 128px}
.phu-command .psearch-in{border-radius:4px;background:rgba(2,6,23,.34);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(2,6,23,.18);backdrop-filter:blur(10px);padding:9px 9px 9px 18px}
.phu-command .psearch-glyph{font:800 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.phu-command .psearch-inp{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 0}
.phu-command .psearch-inp::placeholder{color:rgba(255,255,255,.58)}
.phu-command .psearch-go{border-radius:3px;background:#fff;color:var(--accent);padding:12px 24px}

/* ── 12 · GATEWAY (key: gateway) — a monumental portal on the right and
      a focused action threshold. */
.phu-gateway{max-width:none;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - min(50vw,600px)) 74px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-gateway::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,6,23,.26),transparent 58%),radial-gradient(700px 420px at 92% 20%,rgba(255,255,255,.26),transparent 72%)}
.phu-gateway .phs-gateway-frame{position:absolute;right:max(30px,calc(50vw - min(50vw,600px)));top:40px;width:min(37vw,430px);height:300px;border:1px solid rgba(255,255,255,.44);border-bottom:0;pointer-events:none;box-shadow:inset 18px 0 0 rgba(255,255,255,.06),inset -18px 0 0 rgba(2,6,23,.12)}
.phu-gateway .phs-gateway-frame i{position:absolute;inset:18px 18px 0;border:1px solid rgba(255,255,255,.28);border-bottom:0}
.phu-gateway .phs-gateway-frame i:nth-child(2){inset:38px 38px 0;border-color:rgba(255,255,255,.18)}
.phu-gateway .phs-gateway-frame i:nth-child(3){inset:auto 50%;bottom:-8px;width:10px;height:10px;transform:translateX(50%) rotate(45deg);background:#fff;border:0}
.phu-gateway>*{position:relative;z-index:1}
.phu-gateway .phero.phs-gateway{max-width:none;margin:0;padding:86px 20px 0;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(270px,.82fr);gap:70px;align-items:center;text-align:left}
.phu-gateway .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(38px,5vw,56px);line-height:1;max-width:650px}
.phu-gateway .phero-s{color:rgba(255,255,255,.86)!important;margin-inline:0;max-width:540px}
.phu-gateway .phs-gateway-actions{display:flex;flex-direction:column;gap:13px;padding:32px}
.phu-gateway .phs-qa{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);color:#fff;backdrop-filter:blur(10px);border-radius:3px}
.phu-gateway .phs-qa span{color:#fff}
.phu-gateway .psearch{max-width:650px;margin:32px 0 0;padding:0 20px}
.phu-gateway .psearch-in{border-radius:3px;border-color:transparent;padding:10px 10px 10px 20px}
.phu-gateway .psearch-go{border-radius:2px;padding:12px 25px}

/* ── 13 · ATLAS (key: atlas) — indexed information architecture: support
      destinations left, editorial welcome right. */
.phu-atlas{max-width:none;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - min(50vw,600px)) 68px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-atlas::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 300px at 74% -10%,rgba(255,255,255,.28),transparent 70%)}
.phu-atlas>*{position:relative;z-index:1}
.phu-atlas .phero.phs-atlas{max-width:none;margin:0;padding:76px 20px 0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:58px;align-items:center;text-align:left}
.phu-atlas .phs-atlas-index{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.36)}
.phu-atlas .phs-qa{counter-increment:atlas;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;color:#fff;padding:17px 2px}
.phu-atlas .phs-qa::before{content:'0' counter(atlas);font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.58);margin-right:12px}
.phu-atlas .phs-qa:hover{background:rgba(255,255,255,.08);transform:none;box-shadow:none;padding-inline:10px}
.phu-atlas .phs-qa span{color:#fff}
.phu-atlas .phs-atlas-copy{border-left:1px solid rgba(255,255,255,.28);padding-left:54px}
.phu-atlas .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(38px,5.3vw,60px);line-height:.98}
.phu-atlas .phero-s{color:rgba(255,255,255,.84)!important;margin-inline:0;max-width:580px}
.phu-atlas .phero-stats{justify-content:flex-start}
.phu-atlas .psearch{max-width:720px;margin:32px 0 0;padding:0 20px 0 378px}
.phu-atlas .psearch-in{border-radius:999px;padding:9px 9px 9px 20px;border-color:transparent}
.phu-atlas .psearch-go{border-radius:999px;padding:12px 25px}

/* ── 14 · SIGNAL (key: signal) — an asymmetric radar field: copy left,
      live beacon right, circular search action. */
.phu-signal{max-width:none;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - min(50vw,600px)) 88px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-signal::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(2,6,23,.28),transparent 64%)}
.phu-signal .phs-signal-radar{position:absolute;right:max(-80px,calc(50vw - min(50vw,600px) - 130px));top:-92px;width:510px;height:510px;border-radius:50%;border:1px solid rgba(255,255,255,.22);pointer-events:none;background:conic-gradient(from 30deg,rgba(255,255,255,.28),transparent 21%,transparent 80%,rgba(255,255,255,.12))}
.phu-signal .phs-signal-radar i{position:absolute;inset:64px;border-radius:50%;border:1px solid rgba(255,255,255,.28)}
.phu-signal .phs-signal-radar i:nth-child(2){inset:128px;border-color:rgba(255,255,255,.34)}
.phu-signal .phs-signal-radar i:nth-child(3){inset:194px;border-color:rgba(255,255,255,.5)}
.phu-signal .phs-signal-radar b{position:absolute;right:116px;top:155px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.16),0 0 30px #fff}
.phu-signal>*{position:relative;z-index:1}
.phu-signal .phero{max-width:none;margin:0;padding:94px 20px 0;text-align:left}
.phu-signal .phs-signal-copy{max-width:650px}
.phu-signal .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(40px,5.5vw,62px);line-height:.98}
.phu-signal .phero-s{color:rgba(255,255,255,.84)!important;margin-inline:0;max-width:520px}
.phu-signal .phero-stats{justify-content:flex-start}
.phu-signal .psearch{max-width:610px;margin:34px 0 0;padding:0 20px}
.phu-signal .psearch-in{border-radius:999px;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4);backdrop-filter:blur(12px);padding:9px 9px 9px 21px}
.phu-signal .psearch-glyph,.phu-signal .psearch-inp{color:#fff}
.phu-signal .psearch-inp::placeholder{color:rgba(255,255,255,.62)}
.phu-signal .psearch-go-round{background:#fff;color:var(--accent)}

/* ── 15 · JOURNEY (key: journey) — a guided path: welcome above, connected
      enterprise support steps below, search as the starting line. */
.phu-journey{max-width:none;margin-inline:calc(50% - 50vw);padding:0 calc(50vw - min(50vw,620px)) 74px;background:var(--hero-bg,var(--accent-bg,var(--accent)));position:relative;overflow:hidden}
.phu-journey::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 340px at 50% -22%,rgba(255,255,255,.3),transparent 72%)}
.phu-journey>*{position:relative;z-index:1}
.phu-journey .phero{max-width:none;margin:0;padding:78px 20px 0;text-align:center}
.phu-journey .phs-journey-copy{max-width:760px;margin:0 auto}
.phu-journey .phero-h{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(36px,5.2vw,58px);line-height:1}
.phu-journey .phero-s{color:rgba(255,255,255,.86)!important}
.phu-journey .phs-journey-track{counter-reset:journey;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:42px auto 0;max-width:1000px}
.phu-journey .phs-journey-track>span{position:absolute;left:12%;right:12%;top:22px;height:1px;background:rgba(255,255,255,.45)}
.phu-journey .phs-qa{counter-increment:journey;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:transparent;border:0;color:#fff;padding:0;text-align:center}
.phu-journey .phs-qa::before{content:counter(journey);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--accent);font-size:13px;font-weight:900;box-shadow:0 0 0 8px rgba(255,255,255,.12)}
.phu-journey .phs-qa:hover{transform:translateY(-2px);box-shadow:none}
.phu-journey .phs-qa span{display:none}
.phu-journey .psearch{max-width:690px;margin:36px auto 0}
.phu-journey .psearch-in{border-radius:14px;border-color:transparent;padding:10px 10px 10px 20px}
.phu-journey .psearch-go{border-radius:10px;padding:12px 25px}

@media (max-width:760px){
  .phu-command,.phu-gateway,.phu-atlas,.phu-signal,.phu-journey{padding-left:18px;padding-right:18px}
  .phu-command .phs-command-shell{grid-template-columns:32px 1fr;gap:18px}
  .phu-command .phs-command-index{padding-right:10px}
  .phu-command .psearch{padding-left:70px}
  .phu-gateway .phero.phs-gateway,.phu-atlas .phero.phs-atlas{grid-template-columns:1fr;gap:28px}
  .phu-gateway .phs-gateway-frame{opacity:.34;right:-110px}
  .phu-gateway .phs-gateway-actions{padding:0}
  .phu-atlas .phs-atlas-copy{border-left:0;padding-left:0;order:-1}
  .phu-atlas .psearch{padding-left:20px}
  .phu-signal .phs-signal-radar{right:-280px;opacity:.48}
  .phu-signal .phs-signal-copy{max-width:82%}
  .phu-journey .phs-journey-track{grid-template-columns:1fr;gap:18px}
  .phu-journey .phs-journey-track>span{left:22px;right:auto;top:16px;bottom:16px;width:1px;height:auto}
  .phu-journey .phs-qa{flex-direction:row;justify-content:flex-start;text-align:left}
}
@media (max-width:760px){
  .phu-split .phero.phs-split{grid-template-columns:1fr;row-gap:18px}
  .phu-split .phs-side{width:100%}
  .phu-split .psearch{max-width:none}
  .phu-tiles .phs-tilerow{grid-template-columns:1fr}
  .phu-tiles{padding:28px 18px 24px}
  .phu-banner{clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%);padding-bottom:64px}
  .phu-spotlight,.phu-banner,.phu-arc,.phu-classic{padding-left:20px;padding-right:20px}
  .phu-editorial,.phu-card,.phu-minimal{padding-left:20px;padding-right:20px}
  .phu-editorial .phero-h{font-size:38px}
  .phu-classic .phero-h,.phu-arc .phero-h{font-size:30px}
}

/* ═══ THE WHOLE PILL IS THE FIELD ═══════════════════════════════════════════
   .psearch-in centred its children, so the input sat at its own 38px height inside a 73px
   pill: most of the white area was NOT the text field, it just looked like it. Clicking the
   upper or lower band did nothing, and the input read as a second, smaller pill floating
   inside the first.
   Stretching the input makes the entire white surface the field — click anywhere in it and
   you are typing — with the icon and the button inline inside that one surface. Appended at
   the END of this file on purpose: each design re-tailors .psearch-inp padding (spotlight
   sets 9px 0), and these have to win on source order without resorting to !important. */
.psearch-in{align-items:stretch}
.psearch-ic{align-self:center}
/* ⚠ THE INNER PILL IS A BOX-SHADOW, NOT A BACKGROUND.
   A global input ring (accent blue with alpha) plus the input's own border-radius:12px drew a
   rounded rectangle around the placeholder — a pill inside the pill. Every background/border
   check came back clean, which is why this survived several passes: the culprit was the
   SHADOW. Reset all four here, in the file the PORTAL loads; chrome_css carries the same
   reset for the help centre, which loads that instead. Both copies must stay in step. */
.psearch-in .psearch-inp{align-self:stretch;padding-block:0;line-height:1.2;
  background:none;border:0;border-radius:0;box-shadow:none;outline:0}
.psearch-in .psearch-inp:focus,.psearch-in .psearch-inp:focus-visible{box-shadow:none;outline:0;border:0}
/* ⚠ The BUTTON keeps its vertical padding — that padding is what sets the pill's height.
   Zeroing it collapsed the whole bar from 73px to 45px. Stretch it instead, so it fills
   whatever height the bar ends up at while still defining that height. */
.psearch-in .psearch-go{align-self:stretch;display:inline-flex;align-items:center;justify-content:center}
.psearch-in .psearch-kbd{align-self:center}
/* ═══ KB-025 — rich article content: Help Center-authored markup renders with
   the same element coverage as /hc, themed by the portal's own tokens. ═══ */
.kn-body ul,.kn-body ol{margin:0 0 1.1em;padding-left:1.5em}
.kn-body li{margin:.35em 0}
.kn-body table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:14px;display:block;overflow-x:auto}
.kn-body th,.kn-body td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.kn-body th{background:var(--line-soft);color:var(--ink);font-weight:700}
.kn-body blockquote{margin:1.2em 0;padding:12px 18px;border-left:4px solid var(--accent);background:var(--line-soft);border-radius:0 12px 12px 0;color:var(--ink-2)}
.kn-body blockquote p:last-child{margin-bottom:0}
.kn-body code{background:var(--line-soft);border-radius:6px;padding:2px 6px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.kn-body pre code{background:none;padding:0}
.kn-body hr{border:0;border-top:1px solid var(--line);margin:1.8em 0}
.kn-body h4,.kn-body h5{color:var(--ink);margin:1.4em 0 .5em}
@media print{
  #px-nav,#px-footer,.kn-related,.kn-tools,.kn-feedback,.kn-prevnext,.kn-crumbs,#px-subhero,.pfoot{display:none!important}
  .kn-paper{border:0;box-shadow:none;padding:0}
}
/* ═══ THE ORIGINAL SIX-DESIGN EXPANSION — paint, type and composition only ═══════
   ⚠ THEY RENDER THE SAME VARIABLES AS THE OTHER TWENTY-FIVE and nothing else. No seal, no tile
   board, no status line: switching hero style must change how the page LOOKS, never what is
   on it. Everything that distinguishes these six lives in this file.
   ⚠ AND THEY MUST DRESS EVERY SHARED PART. Each one paints a coloured field, so anything the
   shared rules style for paper — copy, figures, and above all the SEARCH BAR, which the theme
   pins to the light card colour with !important — has to be restated here or it arrives as a
   grey box on a near-black slab. That is what was wrong with the search. */

/* the full-bleed field, same bleed geometry as .phu-classic so they align with the page */
.phu-mosaic,.phu-beacon,.phu-monolith,.phu-atrium,.phu-ledger,.phu-concierge{
  position:relative;max-width:none;margin-inline:calc(50% - 50vw);
  padding:clamp(44px,5.4vw,70px) calc(50vw - min(50vw,600px));
  background:var(--hero-bg,var(--accent-bg,var(--accent)));
  color:#fff;overflow:hidden;isolation:isolate;
}
.phu-mosaic>*,.phu-beacon>*,.phu-monolith>*,.phu-atrium>*,.phu-ledger>*,.phu-concierge>*{position:relative;z-index:1}

/* ── COPY ── */
.phu-mosaic .phero-h,.phu-beacon .phero-h,.phu-monolith .phero-h,
.phu-atrium .phero-h,.phu-ledger .phero-h,.phu-concierge .phero-h{
  color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;
  letter-spacing:-.035em;
}
.phu-mosaic .phero-s,.phu-beacon .phero-s,.phu-monolith .phero-s,
.phu-atrium .phero-s,.phu-ledger .phero-s,.phu-concierge .phero-s{color:rgba(255,255,255,.88)!important}
.phu-mosaic .phero-pill,.phu-beacon .phero-pill,.phu-monolith .phero-pill,
.phu-atrium .phero-pill,.phu-ledger .phero-pill,.phu-concierge .phero-pill{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}
.phu-mosaic .phero-stat strong,.phu-beacon .phero-stat strong,.phu-monolith .phero-stat strong,
.phu-atrium .phero-stat strong,.phu-ledger .phero-stat strong,.phu-concierge .phero-stat strong{color:#fff}
.phu-mosaic .phero-stat,.phu-beacon .phero-stat,.phu-monolith .phero-stat,
.phu-atrium .phero-stat,.phu-ledger .phero-stat,.phu-concierge .phero-stat{color:rgba(255,255,255,.8)}
.phu-mosaic .phero-stat-sep,.phu-beacon .phero-stat-sep,.phu-monolith .phero-stat-sep,
.phu-atrium .phero-stat-sep,.phu-ledger .phero-stat-sep,.phu-concierge .phero-stat-sep{background:rgba(255,255,255,.28)}
.phu-mosaic .phero-trust,.phu-beacon .phero-trust,.phu-monolith .phero-trust,
.phu-atrium .phero-trust,.phu-ledger .phero-trust,.phu-concierge .phero-trust{color:rgba(255,255,255,.75)}
.phu-mosaic .phero-eyebrow,.phu-beacon .phero-eyebrow,.phu-monolith .phero-eyebrow,
.phu-atrium .phero-eyebrow,.phu-ledger .phero-eyebrow,.phu-concierge .phero-eyebrow{color:#fff}

/* ── THE SEARCH BAR ──────────────────────────────────────────────────────────
   ⚠ !important IS REQUIRED. The theme writes `.psearch-in{background:<card>!important}` for
   its card and glass surfaces, so a plain rule here loses and the bar renders as a light grey
   slab on the hero's own colour — square, theme-coloured, and completely apart from the
   design it sits in. This is the hero's field, so the hero dresses the bar. */
.phu-mosaic .psearch-in,.phu-beacon .psearch-in,.phu-atrium .psearch-in,
.phu-ledger .psearch-in,.phu-concierge .psearch-in{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 22px 48px -26px rgba(2,6,23,.85)!important;
  backdrop-filter:blur(12px) saturate(1.2);
}
.phu-mosaic .psearch-in:focus-within,.phu-beacon .psearch-in:focus-within,.phu-atrium .psearch-in:focus-within,
.phu-ledger .psearch-in:focus-within,.phu-concierge .psearch-in:focus-within{
  background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px rgba(255,255,255,.14)!important;
}
.phu-mosaic .psearch-inp,.phu-beacon .psearch-inp,.phu-monolith .psearch-inp,
.phu-atrium .psearch-inp,.phu-ledger .psearch-inp,.phu-concierge .psearch-inp{color:#fff!important}
.phu-mosaic .psearch-inp::placeholder,.phu-beacon .psearch-inp::placeholder,.phu-monolith .psearch-inp::placeholder,
.phu-atrium .psearch-inp::placeholder,.phu-ledger .psearch-inp::placeholder,.phu-concierge .psearch-inp::placeholder{
  color:rgba(255,255,255,.66)!important;
}
.phu-mosaic .psearch-ic,.phu-beacon .psearch-ic,.phu-monolith .psearch-ic,
.phu-atrium .psearch-ic,.phu-ledger .psearch-ic,.phu-concierge .psearch-ic,
.phu-mosaic .psearch-glyph,.phu-beacon .psearch-glyph,.phu-monolith .psearch-glyph,
.phu-atrium .psearch-glyph,.phu-ledger .psearch-glyph,.phu-concierge .psearch-glyph{color:rgba(255,255,255,.9)}
/* a white button on the brand field reads stronger than the brand button on its own colour */
.phu-mosaic .psearch-go,.phu-beacon .psearch-go,.phu-atrium .psearch-go,
.phu-ledger .psearch-go,.phu-concierge .psearch-go{
  background:#fff;color:var(--accent);border-radius:12px;padding:12px 22px;
  box-shadow:0 10px 24px -12px rgba(2,6,23,.6);
}
.phu-mosaic .psearch-kbd,.phu-beacon .psearch-kbd,.phu-atrium .psearch-kbd,
.phu-ledger .psearch-kbd,.phu-concierge .psearch-kbd{
  color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.10);
}

/* ── LEFT-READING HEROES ─────────────────────────────────────────────────────
   The shared rules centre the sub-heading, the figures and the search with margin:auto, so
   text-align alone left the heading flush left and everything under it floating mid-band. */
.phu-monolith .phero,.phu-ledger .phero{text-align:left}
.phu-monolith .phero-s,.phu-ledger .phero-s{margin-inline:0}
.phu-monolith .phero-stats,.phu-ledger .phero-stats{justify-content:flex-start;margin-inline:0}
.phu-monolith .phero-ctas,.phu-ledger .phero-ctas{justify-content:flex-start}
.phu-monolith .psearch,.phu-ledger .psearch{margin-inline:0;padding-inline:0}

/* ── MOSAIC — TESSELLATED LIGHT ──────────────────────────────────────────────
   A facetted field: soft diamonds of light catching across the band, brightest behind the
   copy. Centred, so the composition is the light itself. */
.phu-mosaic{text-align:center}
.phu-mosaic::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(720px 420px at 50% 8%,rgba(255,255,255,.26),transparent 64%),
    linear-gradient(180deg,transparent 62%,rgba(2,6,23,.22));
}
.phu-mosaic .phs-mosaic-lines{position:absolute;inset:0;z-index:-1;pointer-events:none}
.phu-mosaic .phs-mosaic-lines i{position:absolute;inset:-10%}
.phu-mosaic .phs-mosaic-lines i:first-child{
  background:
    repeating-linear-gradient(60deg,rgba(255,255,255,.07) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(-60deg,rgba(255,255,255,.07) 0 1px,transparent 1px 84px);
  mask-image:radial-gradient(80% 70% at 50% 34%,#000,transparent 78%);
}
.phu-mosaic .phs-mosaic-lines i:last-child{
  background:repeating-linear-gradient(60deg,rgba(255,255,255,.05) 0 42px,transparent 42px 84px);
  mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 76%);
}

/* ── BEACON — THE SIGNAL ─────────────────────────────────────────────────────
   Rings radiating from a lit core behind the copy. */
.phu-beacon{text-align:center}
.phu-beacon::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 380px at 50% 22%,rgba(255,255,255,.30),transparent 60%),
    linear-gradient(180deg,transparent 62%,rgba(2,6,23,.24));
}
.phu-beacon .phs-pulse{position:absolute;inset:0;z-index:-1;pointer-events:none}
.phu-beacon .phs-pulse i{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
}
.phu-beacon .phs-pulse i:nth-child(1){width:300px;height:300px;animation:phsPulse 4.5s ease-out infinite}
.phu-beacon .phs-pulse i:nth-child(2){width:520px;height:520px;border-color:rgba(255,255,255,.14);animation:phsPulse 4.5s 1.4s ease-out infinite}
.phu-beacon .phs-pulse i:nth-child(3){width:760px;height:760px;border-color:rgba(255,255,255,.09);animation:phsPulse 4.5s 2.8s ease-out infinite}
@keyframes phsPulse{0%{opacity:.75}70%{opacity:.18}100%{opacity:.7}}
@media(prefers-reduced-motion:reduce){.phu-beacon .phs-pulse i{animation:none}}

/* ── MONOLITH — THE SLAB ─────────────────────────────────────────────────────
   Near-black, brand light bleeding in from the leading edge, type at full confidence. */
.phu-monolith{
  background:linear-gradient(150deg,#0f172a 0%,#020617 100%);
  padding-block:clamp(48px,6vw,78px);
}
.phu-monolith::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(680px 460px at -6% 42%,color-mix(in srgb,var(--accent) 62%,transparent),transparent 68%),
    radial-gradient(420px 300px at 96% 8%,rgba(255,255,255,.08),transparent 70%);
}
.phu-monolith .phs-mono{max-width:940px;padding-inline-start:clamp(20px,2.6vw,34px)}
.phu-monolith .phero-h,.phu-monolith .phs-mono h1{font-size:clamp(38px,5.6vw,68px);line-height:1.02;letter-spacing:-.045em}
.phu-monolith .phero-s{max-width:56ch;font-size:clamp(14px,1.2vw,16.5px)}
.phu-monolith .phs-mono-rule{
  position:absolute;inset-inline-start:calc(50vw - min(50vw,600px));
  top:clamp(48px,6vw,78px);bottom:clamp(48px,6vw,78px);
  width:3px;border-radius:3px;z-index:-1;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent) 88%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 55%,transparent);
}
.phu-monolith .phero-stats{margin-top:22px}
/* the slab's search is an underline, not a box — its restraint is the whole idea */
.phu-monolith .psearch-in{
  background:transparent!important;border:0!important;border-bottom:2px solid rgba(255,255,255,.30)!important;
  border-radius:0!important;box-shadow:none!important;padding-inline:0!important;
}
.phu-monolith .psearch-in:focus-within{border-bottom-color:var(--accent)!important;box-shadow:none!important}
.phu-monolith .psearch-go{background:#fff;color:#0f172a;border-radius:10px;padding:11px 20px}

/* ── ATRIUM — THE LIGHTWELL ──────────────────────────────────────────────────
   Shafts of light falling behind genuinely frosted glass. */
.phu-atrium{text-align:center}
.phu-atrium::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.26),transparent 46%),
             linear-gradient(180deg,transparent 64%,rgba(2,6,23,.22));
}
.phu-atrium .phs-atrium-light{position:absolute;inset:0;z-index:-1;pointer-events:none}
.phu-atrium .phs-atrium-light i{
  position:absolute;top:-25%;bottom:-25%;width:26%;transform:skewX(-12deg);
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 72%);
  filter:blur(26px);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
}
.phu-atrium .phs-atrium-light i:nth-child(1){left:8%;animation:phsDrift 14s ease-in-out infinite alternate}
.phu-atrium .phs-atrium-light i:nth-child(2){left:42%;opacity:.72;animation:phsDrift 18s 2s ease-in-out infinite alternate-reverse}
.phu-atrium .phs-atrium-light i:nth-child(3){left:74%;opacity:.5;animation:phsDrift 16s 1s ease-in-out infinite alternate}
@keyframes phsDrift{from{transform:skewX(-12deg) translateX(-14px)}to{transform:skewX(-12deg) translateX(14px)}}
@media(prefers-reduced-motion:reduce){.phu-atrium .phs-atrium-light i{animation:none}}
.phu-atrium .phs-atrium-glass{
  position:relative;z-index:1;max-width:780px;margin-inline:auto;text-align:center;
  padding:clamp(30px,4vw,54px);border-radius:26px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 34px 70px -40px rgba(2,6,23,.85);
  backdrop-filter:blur(18px) saturate(1.15);
}

/* ── LEDGER — THE RULED SHEET ────────────────────────────────────────────────
   Copy set left against a fine baseline grid, the way a records page is ruled. The grid used
   to run edge to edge at full strength, which turned the hero into a spreadsheet; it is now
   faint and faded out where the copy sits. */
.phu-ledger::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 440px at 14% 0%,rgba(255,255,255,.24),transparent 64%),
             linear-gradient(180deg,transparent 62%,rgba(2,6,23,.22));
}
.phu-ledger .phs-ledger-grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,transparent 0 33px,rgba(255,255,255,.10) 33px 34px),
    repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.07) calc(25% - 1px) 25%);
  mask-image:linear-gradient(90deg,transparent,#000 34%,#000 100%);
}
/* the figures sit on their own ruled line, which is the sheet's idiom */
.phu-ledger .phero-stats{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;align-items:baseline;
}
.phu-ledger .phero-stat strong{font-variant-numeric:tabular-nums}

/* ── CONCIERGE — THE GREETING ────────────────────────────────────────────────
   A shallow arc rising under the copy with a soft halo above it. */
.phu-concierge{text-align:center}
.phu-concierge::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(560px 340px at 50% 2%,rgba(255,255,255,.28),transparent 62%),
             linear-gradient(180deg,transparent 58%,rgba(2,6,23,.24));
}
.phu-concierge .phs-concierge-arc{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:150%;height:210px;border-radius:50% 50% 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 72%);
  border-top:1px solid rgba(255,255,255,.34);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTERPRISE HERO COLLECTION · 10 additional structural compositions.
   Each design changes geometry, depth and search composition while consuming
   exactly the same editable hero variables as every existing design.
   ═══════════════════════════════════════════════════════════════════════════ */
.phu-aperture,.phu-orbit,.phu-citadel,.phu-summit,.phu-constellation,
.phu-vault,.phu-ribbon,.phu-foundry,.phu-observatory,.phu-nexus{
  max-width:none;margin-inline:calc(50% - 50vw);position:relative;overflow:hidden;
  padding:0 max(20px,calc(50vw - 600px)) 72px;
}
.phu-aperture>*,.phu-orbit>*,.phu-citadel>*,.phu-summit>*,.phu-constellation>*,
.phu-vault>*,.phu-ribbon>*,.phu-foundry>*,.phu-observatory>*,.phu-nexus>*{position:relative;z-index:1}
.phu-aperture .phero,.phu-orbit .phero,.phu-citadel .phero,.phu-summit .phero,
.phu-constellation .phero,.phu-vault .phero,.phu-ribbon .phero,.phu-foundry .phero,
.phu-observatory .phero,.phu-nexus .phero{max-width:1120px;padding:76px 20px 12px}
.phu-aperture .psearch,.phu-orbit .psearch,.phu-citadel .psearch,.phu-summit .psearch,
.phu-constellation .psearch,.phu-vault .psearch,.phu-ribbon .psearch,.phu-foundry .psearch,
.phu-observatory .psearch,.phu-nexus .psearch{max-width:700px;margin-top:28px}
.phu-aperture .psearch-in,.phu-orbit .psearch-in,.phu-summit .psearch-in,
.phu-constellation .psearch-in,.phu-ribbon .psearch-in,.phu-foundry .psearch-in,.phu-nexus .psearch-in{
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.11);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 28px 65px -32px rgba(2,6,23,.8)
}
.phu-aperture .psearch-inp,.phu-orbit .psearch-inp,.phu-summit .psearch-inp,
.phu-constellation .psearch-inp,.phu-ribbon .psearch-inp,.phu-foundry .psearch-inp,.phu-nexus .psearch-inp{color:#fff}
.phu-aperture .psearch-inp::placeholder,.phu-orbit .psearch-inp::placeholder,.phu-summit .psearch-inp::placeholder,
.phu-constellation .psearch-inp::placeholder,.phu-ribbon .psearch-inp::placeholder,.phu-foundry .psearch-inp::placeholder,.phu-nexus .psearch-inp::placeholder{color:rgba(255,255,255,.68)}
.phu-aperture .psearch-glyph,.phu-orbit .psearch-glyph,.phu-summit .psearch-glyph,
.phu-constellation .psearch-glyph,.phu-ribbon .psearch-glyph,.phu-foundry .psearch-glyph,.phu-nexus .psearch-glyph{color:#fff}
.phu-aperture .psearch-go,.phu-orbit .psearch-go,.phu-summit .psearch-go,
.phu-constellation .psearch-go,.phu-ribbon .psearch-go,.phu-foundry .psearch-go,.phu-nexus .psearch-go{background:#fff;color:var(--accent);padding:12px 20px}
.phu-aperture .phero-h,.phu-orbit .phero-h,.phu-summit .phero-h,.phu-constellation .phero-h,
.phu-ribbon .phero-h,.phu-foundry .phero-h,.phu-nexus .phero-h{color:#fff!important}
.phu-aperture .phero-s,.phu-orbit .phero-s,.phu-summit .phero-s,.phu-constellation .phero-s,
.phu-ribbon .phero-s,.phu-foundry .phero-s,.phu-nexus .phero-s{color:rgba(255,255,255,.78)!important}

/* APERTURE — layered glass planes make a focused optical frame. */
.phu-aperture{background:radial-gradient(900px 460px at 50% -10%,color-mix(in srgb,var(--accent) 55%,#fff),transparent 70%),linear-gradient(145deg,#111827,color-mix(in srgb,var(--accent) 42%,#020617));padding-bottom:78px}
.phu-aperture .phs-aperture-lens{position:absolute;inset:0;pointer-events:none}.phu-aperture .phs-aperture-lens i{position:absolute;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.055);backdrop-filter:blur(4px);transform:rotate(12deg)}
.phu-aperture .phs-aperture-lens i:nth-child(1){width:44%;height:135%;left:-18%;top:-24%}.phu-aperture .phs-aperture-lens i:nth-child(2){width:34%;height:100%;right:-8%;top:8%;transform:rotate(-15deg)}.phu-aperture .phs-aperture-lens i:nth-child(3){width:310px;height:310px;border-radius:50%;left:calc(50% - 155px);top:34px;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 67%)}
.phu-aperture .phs-aperture-glass{max-width:820px;margin:auto;padding:38px clamp(24px,5vw,58px);border:1px solid rgba(255,255,255,.24);border-radius:28px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 40px 100px -48px #000;text-align:center}

/* ORBIT — asymmetric navigator with a live orbital field at right. */
.phu-orbit{background:linear-gradient(115deg,#020617 0%,color-mix(in srgb,var(--accent) 52%,#0f172a) 100%)}
.phu-orbit .phero{display:grid;grid-template-columns:minmax(0,650px) 1fr;align-items:center}.phu-orbit .phs-orbit-copy{text-align:left}.phu-orbit .phero-s{margin-inline:0}.phu-orbit .phero-stats,.phu-orbit .phero-ctas{justify-content:flex-start}
.phu-orbit .phs-orbit-dial{position:absolute;width:470px;height:470px;right:max(-120px,calc(50vw - 720px));top:-50px;border-radius:50%;pointer-events:none}.phu-orbit .phs-orbit-dial i{position:absolute;inset:10%;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(18deg)}.phu-orbit .phs-orbit-dial i:nth-child(2){inset:25%;border-style:dashed;transform:rotate(-24deg)}.phu-orbit .phs-orbit-dial i:nth-child(3){inset:40%;background:radial-gradient(circle,rgba(255,255,255,.38),rgba(255,255,255,.04) 50%,transparent 52%);box-shadow:0 0 70px color-mix(in srgb,var(--accent) 70%,transparent)}.phu-orbit .phs-orbit-dial b{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;left:18%;top:28%;box-shadow:260px 190px 0 rgba(255,255,255,.65)}

/* CITADEL — light architectural bay, protected by vertical fins. */
.phu-citadel{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,#fff),#fff);border-block:1px solid var(--line)}
.phu-citadel .phero{display:grid;grid-template-columns:minmax(0,660px) 1fr}.phu-citadel .phs-citadel-copy{text-align:left;padding-left:26px;border-left:5px solid var(--accent)}.phu-citadel .phero-s{margin-inline:0}.phu-citadel .phero-stats,.phu-citadel .phero-stat,.phu-citadel .phero-stat strong{color:var(--ink)}.phu-citadel .phero-stat-sep{background:var(--line)}.phu-citadel .phero-pill{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}.phu-citadel .phero-dot{background:var(--accent);box-shadow:none}.phu-citadel .phero-cta{background:var(--accent);color:#fff!important}.phu-citadel .phero-cta-2{background:transparent;color:var(--accent)!important;border-color:var(--accent)}
.phu-citadel .phs-citadel-columns{position:absolute;right:max(0px,calc(50vw - 700px));top:0;width:36%;height:100%;display:flex;gap:18px;align-items:flex-end;opacity:.7}.phu-citadel .phs-citadel-columns i{flex:1;height:72%;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 8%,#fff),transparent)}.phu-citadel .phs-citadel-columns i:nth-child(2){height:92%}.phu-citadel .phs-citadel-columns i:nth-child(3){height:82%}.phu-citadel .phs-citadel-columns i:nth-child(4){height:62%}
.phu-citadel .psearch-in{border-radius:8px;box-shadow:0 18px 46px -30px rgba(15,23,42,.4)}

/* SUMMIT — faceted elevation with a crisp central peak. */
.phu-summit{background:linear-gradient(155deg,#1e1b4b,color-mix(in srgb,var(--accent) 72%,#111827));text-align:center}
.phu-summit .phs-summit-peaks{position:absolute;inset:0;pointer-events:none}.phu-summit .phs-summit-peaks i{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(255,255,255,.08)}.phu-summit .phs-summit-peaks i:nth-child(1){width:110%;height:66%}.phu-summit .phs-summit-peaks i:nth-child(2){width:74%;height:50%;background:rgba(255,255,255,.07)}.phu-summit .phs-summit-peaks i:nth-child(3){width:36%;height:34%;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.03))}.phu-summit .phs-summit-copy{max-width:820px;margin:auto;text-align:center}

/* CONSTELLATION — network topology without inventing content. */
.phu-constellation{background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--accent) 52%,#334155),transparent 34%),#07111f}
.phu-constellation .phero{display:grid;grid-template-columns:minmax(0,690px) 1fr}.phu-constellation .phs-constellation-copy{text-align:left}.phu-constellation .phero-s{margin-inline:0}.phu-constellation .phero-stats,.phu-constellation .phero-ctas{justify-content:flex-start}.phu-constellation .phs-constellation-map{position:absolute;right:max(2%,calc(50vw - 690px));top:30px;width:420px;height:300px;background:linear-gradient(31deg,transparent 48%,rgba(255,255,255,.16) 49% 50%,transparent 51%),linear-gradient(-26deg,transparent 48%,rgba(255,255,255,.11) 49% 50%,transparent 51%);pointer-events:none}.phu-constellation .phs-constellation-map i{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.08),0 0 28px color-mix(in srgb,var(--accent) 75%,transparent)}.phu-constellation .phs-constellation-map i:nth-child(1){left:8%;top:65%}.phu-constellation .phs-constellation-map i:nth-child(2){left:32%;top:18%}.phu-constellation .phs-constellation-map i:nth-child(3){left:54%;top:52%}.phu-constellation .phs-constellation-map i:nth-child(4){left:80%;top:12%}.phu-constellation .phs-constellation-map i:nth-child(5){left:88%;top:76%}

/* VAULT — restrained light arch for trust-led knowledge portals. */
.phu-vault{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 5%,#f8fafc));border-bottom:1px solid var(--line);text-align:center}
.phu-vault .phs-vault-copy{max-width:790px;margin:auto;padding:34px clamp(22px,5vw,64px);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:220px 220px 22px 22px;background:rgba(255,255,255,.78);box-shadow:0 30px 80px -56px rgba(15,23,42,.55)}.phu-vault .phs-vault-arch{position:absolute;left:50%;bottom:-230px;width:min(980px,94vw);height:520px;transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:50% 50% 0 0;pointer-events:none}.phu-vault .phs-vault-arch i{position:absolute;inset:40px;border:inherit;border-radius:inherit}.phu-vault .phs-vault-arch i:nth-child(2){inset:82px}.phu-vault .phs-vault-arch i:nth-child(3){inset:124px}.phu-vault .phero-pill{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#fff);border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}.phu-vault .phero-dot{background:var(--accent);box-shadow:none}.phu-vault .phero-stats,.phu-vault .phero-stat,.phu-vault .phero-stat strong{color:var(--ink)}.phu-vault .phero-stat-sep{background:var(--line)}.phu-vault .phero-cta{background:var(--accent);color:#fff!important}.phu-vault .phero-cta-2{color:var(--accent)!important;border-color:var(--accent)}

/* RIBBON — three interleaved surfaces create brand motion. */
.phu-ribbon{background:#111827}.phu-ribbon .phs-ribbon-field{position:absolute;inset:-100px -8%;transform:rotate(-8deg);pointer-events:none}.phu-ribbon .phs-ribbon-field i{position:absolute;left:0;width:120%;height:32%;border-radius:50%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 92%,#fff),transparent);opacity:.48}.phu-ribbon .phs-ribbon-field i:nth-child(1){top:2%}.phu-ribbon .phs-ribbon-field i:nth-child(2){top:34%;left:-12%;opacity:.26}.phu-ribbon .phs-ribbon-field i:nth-child(3){top:64%;left:6%;opacity:.18}.phu-ribbon .phs-ribbon-copy{max-width:840px;margin:auto;text-align:center;padding:34px;background:rgba(2,6,23,.28);border-radius:22px;backdrop-filter:blur(9px)}

/* FOUNDRY — engineered grid and offset stamped plate. */
.phu-foundry{background:#0b1220}.phu-foundry .phs-foundry-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.06) 79px 80px),repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.06) 39px 40px);pointer-events:none}.phu-foundry .phs-foundry-grid i{position:absolute;background:var(--accent)}.phu-foundry .phs-foundry-grid i:first-child{width:4px;height:52%;left:8%;top:0}.phu-foundry .phs-foundry-grid i:last-child{height:4px;width:32%;right:0;bottom:15%}.phu-foundry .phs-foundry-plate{max-width:760px;padding:38px;border:1px solid rgba(255,255,255,.18);border-radius:3px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:18px 18px 0 color-mix(in srgb,var(--accent) 28%,transparent);text-align:left}.phu-foundry .phero-s{margin-inline:0}.phu-foundry .phero-stats,.phu-foundry .phero-ctas{justify-content:flex-start}.phu-foundry .psearch-in{border-radius:3px}.phu-foundry .psearch-go{border-radius:2px}

/* OBSERVATORY — precise radial measurement on a calm light field. */
.phu-observatory{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 6%,#fff));border-block:1px solid var(--line);text-align:center}.phu-observatory .phs-observatory-copy{max-width:820px;margin:auto;text-align:center}.phu-observatory .phs-observatory-dome{position:absolute;left:50%;bottom:-270px;width:min(900px,96vw);height:520px;transform:translateX(-50%);border-radius:50% 50% 0 0;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);background:repeating-conic-gradient(from 0deg at 50% 100%,color-mix(in srgb,var(--accent) 10%,transparent) 0 1deg,transparent 1deg 15deg);pointer-events:none}.phu-observatory .phs-observatory-dome i{position:absolute;left:50%;bottom:50%;height:50%;width:1px;background:color-mix(in srgb,var(--accent) 30%,transparent);transform-origin:bottom}.phu-observatory .phs-observatory-dome i:nth-child(1){transform:rotate(-45deg)}.phu-observatory .phs-observatory-dome i:nth-child(2){transform:rotate(0)}.phu-observatory .phs-observatory-dome i:nth-child(3){transform:rotate(45deg)}.phu-observatory .phero-pill{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#fff);border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}.phu-observatory .phero-dot{background:var(--accent);box-shadow:none}.phu-observatory .phero-stats,.phu-observatory .phero-stat,.phu-observatory .phero-stat strong{color:var(--ink)}.phu-observatory .phero-stat-sep{background:var(--line)}.phu-observatory .phero-cta{background:var(--accent);color:#fff!important}.phu-observatory .phero-cta-2{color:var(--accent)!important;border-color:var(--accent)}

/* NEXUS — connector rails converge on a compact central command surface. */
.phu-nexus{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 58%,#334155),#020617 62%);text-align:center}.phu-nexus .phs-nexus-copy{max-width:760px;margin:auto;padding:32px;border:1px solid rgba(255,255,255,.16);background:rgba(2,6,23,.38);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}.phu-nexus .phs-nexus-rails{position:absolute;inset:0;pointer-events:none}.phu-nexus .phs-nexus-rails i{position:absolute;background:linear-gradient(90deg,transparent,var(--accent),transparent);height:1px;width:44%;top:50%}.phu-nexus .phs-nexus-rails i:nth-child(1){left:0}.phu-nexus .phs-nexus-rails i:nth-child(2){right:0}.phu-nexus .phs-nexus-rails i:nth-child(3),.phu-nexus .phs-nexus-rails i:nth-child(4){width:1px;height:42%;left:50%;background:linear-gradient(transparent,var(--accent),transparent)}.phu-nexus .phs-nexus-rails i:nth-child(3){top:0}.phu-nexus .phs-nexus-rails i:nth-child(4){top:auto;bottom:0}

@media(max-width:760px){
  .phu-aperture,.phu-orbit,.phu-citadel,.phu-summit,.phu-constellation,.phu-vault,.phu-ribbon,.phu-foundry,.phu-observatory,.phu-nexus{padding-inline:0;padding-bottom:52px;margin-inline:calc(50% - 50vw)}
  .phu-aperture .phero,.phu-orbit .phero,.phu-citadel .phero,.phu-summit .phero,.phu-constellation .phero,.phu-vault .phero,.phu-ribbon .phero,.phu-foundry .phero,.phu-observatory .phero,.phu-nexus .phero{display:block;padding:54px 20px 8px}
  .phu-orbit .phs-orbit-dial,.phu-constellation .phs-constellation-map,.phu-citadel .phs-citadel-columns{opacity:.24;right:-180px}
  .phu-aperture .phs-aperture-glass,.phu-ribbon .phs-ribbon-copy,.phu-foundry .phs-foundry-plate,.phu-nexus .phs-nexus-copy{padding:26px 20px}
  .phu-vault .phs-vault-copy{border-radius:90px 90px 18px 18px;padding:28px 20px}
  .phu-aperture .psearch,.phu-orbit .psearch,.phu-citadel .psearch,.phu-summit .psearch,.phu-constellation .psearch,.phu-vault .psearch,.phu-ribbon .psearch,.phu-foundry .psearch,.phu-observatory .psearch,.phu-nexus .psearch{padding-inline:20px}
}

/* Hero dual CTA + trust line, shared by all 31 styles. */
.phero-ctas{display:flex;gap:10px;justify-content:inherit;flex-wrap:wrap;margin-top:18px}
.phero-cta{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border-radius:12px;background:#fff;color:var(--accent)!important;font-weight:800;text-decoration:none!important;box-shadow:0 10px 26px -14px rgba(12,10,28,.55);transition:transform .18s ease}
.phero-cta:hover{transform:translateY(-1px)}
.phero-cta-2{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.45);box-shadow:none}
.phero-cta-2:hover{border-color:#fff}
.phero-trust{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.75);letter-spacing:.02em}
[align] .phero-ctas,.phero-unit .phero-ctas{justify-content:center}
.phu-split .phero-ctas,.phu-ledger .phero-ctas,.phu-mosaic .phero-ctas,.phu-banner .phero-ctas,.phu-editorial .phero-ctas{justify-content:flex-start}
/* ═══ F3 — knowledge experience v2 ═══ */
/* Category cards v2 — four presentations. */
.knc-cards .kn-cat{transition:transform .2s ease,box-shadow .2s ease}
.knc-cards .kn-cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.knc-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.knc-showcase .kn-cat{flex-direction:column;align-items:flex-start;padding:22px;border-radius:18px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.knc-showcase .kn-cat:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--accent) 45%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.knc-showcase .kn-cat-ic{width:46px;height:46px;font-size:19px;border-radius:14px;margin-bottom:10px}
.knc-showcase .kn-cat-d{display:block;font-style:normal;color:var(--ink-3);font-size:12.5px;line-height:1.5;margin:4px 0 6px}
.knc-list{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.knc-list .kn-cat{border:0;border-top:1px solid var(--line-soft);border-radius:0;padding:13px 16px}
.knc-list .kn-cat:first-child{border-top:0}
.knc-compact{display:flex;flex-wrap:wrap;gap:8px}
.knc-compact .kn-cat{padding:8px 14px;border-radius:999px}
.knc-compact .kn-cat-ic{display:none}
.knc-compact .kn-cat small{display:inline;margin-inline-start:6px;color:var(--ink-3)}
/* Article v2 — progress bar, meta chips, tag chips. */
.kn-progress{position:sticky;top:calc(var(--px-navh,0px));z-index:5;height:3px;margin:-4px 0 14px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.kn-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));transition:width .12s linear}
.kn-meta2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kn-chip{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12px;font-weight:700;color:var(--ink-2)}
.kn-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.kn-chip-tag{text-decoration:none;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));cursor:pointer;transition:background .15s ease}
.kn-chip-tag:hover{background:color-mix(in srgb,var(--accent) 8%,var(--card))}
@media(prefers-reduced-motion:reduce){.knc-cards .kn-cat,.knc-showcase .kn-cat{transition:none}.knc-cards .kn-cat:hover,.knc-showcase .kn-cat:hover{transform:none}}
/* ═══ Landing blocks: fullbleed CTA, live News, live Topics (Zendesk-grade) ═══ */
.pb-cta .pb-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pbc-fullbleed{width:100vw;margin-inline:calc(50% - 50vw);border-radius:0;padding:clamp(48px,8vw,96px) 24px;text-align:center;background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.pbc-fullbleed .pb-cta-h{font-size:clamp(28px,4.5vw,48px);letter-spacing:-.04em;line-height:1.12;max-width:820px;margin-inline:auto}
.pbc-fullbleed .pb-cta-x{max-width:640px;margin:10px auto 0;color:var(--ink-2)}
.pb-news{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,44px)}
.pb-news-h{margin:0 0 18px;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.03em}
.pb-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.pbn-cols-1 .pb-news-grid{grid-template-columns:1fr}
.pb-news-item{display:block;padding:14px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.pb-news-item b{display:block;font-size:15px;line-height:1.45;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pb-news-item:hover b{color:var(--accent)}
.pb-news-item small{display:block;margin-top:5px;color:var(--ink-3);font-size:12.5px}
.pb-news-all{display:inline-block;margin-top:16px;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pb-news-all:hover{color:var(--accent)}
.pb-topics{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.pb-topics-sum{list-style:none;cursor:pointer}
.pb-topics-sum::-webkit-details-marker{display:none}
.pb-topics-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:var(--ink);color:#fff;font-weight:800;font-size:16px}
details.pb-topics:not([open]) .pb-topics-chev{transform:rotate(180deg)}
.pb-topics-chev{transition:transform .2s ease}
.pb-topic-group{border-top:1px solid var(--line-soft)}
.pb-topic-cat{display:block;padding:14px 22px 6px;font-weight:800;color:var(--ink);text-decoration:none}
.pb-topic-cat:hover{color:var(--accent)}
.pb-topic-a{display:block;padding:9px 22px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pb-topic-a:hover{color:var(--accent)}
@media(max-width:760px){.pb-news-grid{grid-template-columns:1fr}}
/* F3-4 — search results: facet rail beside results on wide screens. */
.kn-results-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.kn-results-count{color:var(--ink-3);font-size:13px}
@media(min-width:860px){
  .knh-results #px-kn-arts{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:start}
  .knh-results #px-kn-arts .kn-facets{flex-direction:column;position:sticky;top:calc(var(--px-navh,0px) + 20px)}
  .knh-results #px-kn-arts .kn-facets .kn-cat{width:100%}
  .knh-results #px-kn-arts > a.kn-art{grid-column:2}
  .knh-results #px-kn-arts > .kn-facets ~ *{grid-column:2}
}
/* ═══ F3-5 — three enterprise knowledge home layouts ═══ */
/* MAGAZINE — editorial front page: lead article large, chip categories on top. */
.knh-magazine .kn-categories{order:-1}
.knh-magazine #px-kn-cats{display:flex;flex-wrap:wrap;gap:8px}
.knh-magazine #px-kn-cats .kn-cat{padding:8px 14px;border-radius:999px;flex-direction:row;align-items:center}
.knh-magazine #px-kn-cats .kn-cat-ic{display:none}
.knh-magazine #px-kn-cats .kn-cat small{display:inline;margin-inline-start:6px}
.knh-magazine #px-kn-cats .kn-cat-d{display:none}
@media(min-width:860px){
  .knh-magazine #px-kn-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .knh-magazine #px-kn-arts .kn-art:first-child{grid-column:1/3;grid-row:1/3;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card) 70%)}
  .knh-magazine #px-kn-arts .kn-art:first-child h3{font-size:clamp(20px,2.4vw,30px);line-height:1.2}
}
/* DOCS PORTAL — documentation IA: sticky category rail left, articles right. */
@media(min-width:860px){
  .knh-docs-portal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;align-items:start}
  .knh-docs-portal .kn-categories{position:sticky;top:calc(var(--px-navh,0px) + 20px)}
  .knh-docs-portal #px-kn-cats{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .knh-docs-portal #px-kn-cats .kn-cat{border:0;border-top:1px solid var(--line-soft);border-radius:0;padding:11px 14px}
  .knh-docs-portal #px-kn-cats .kn-cat:first-child{border-top:0}
  .knh-docs-portal #px-kn-cats .kn-cat-ic{width:30px;height:30px;font-size:13px;border-radius:9px}
  .knh-docs-portal #px-kn-cats .kn-cat-d{display:none}
  .knh-docs-portal #px-kn-arts{grid-template-columns:1fr}
  .knh-docs-portal #px-kn-arts .kn-art{display:grid;grid-template-columns:1fr auto;align-items:center}
}
/* SUPPORT HUB — showcase categories leading, generous article cards after. */
.knh-support-hub #px-kn-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.knh-support-hub #px-kn-cats .kn-cat{flex-direction:column;align-items:flex-start;padding:22px;border-radius:18px;transition:transform .22s ease,box-shadow .22s ease}
.knh-support-hub #px-kn-cats .kn-cat:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--accent) 45%,transparent)}
.knh-support-hub #px-kn-cats .kn-cat-ic{width:46px;height:46px;font-size:19px;border-radius:14px;margin-bottom:10px}
.knh-support-hub #px-kn-cats .kn-cat-d{display:block;font-style:normal;color:var(--ink-3);font-size:12.5px;margin:4px 0 6px}
.knh-support-hub #px-kn-arts{gap:14px}
.knh-support-hub #px-kn-arts .kn-art{padding:20px;border-radius:16px}
@media(prefers-reduced-motion:reduce){.knh-support-hub #px-kn-cats .kn-cat{transition:none}.knh-support-hub #px-kn-cats .kn-cat:hover{transform:none}}