/* NXT AI Skills page. Shared px system (css/px.css), the nx- glass kit for
   diagrams, and the NXT AP page's ap-/ap3- pieces (nxtap-accountspayable.css).
   Only the layout this page adds lives here, prefixed sd-. No new colours:
   the cards use the home page's light card (#F5F7FD fill, #E6E9F5 ring). */

/* ---------- 1 Hero + video ---------- */
.sd-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.sd-eyebrow { margin: 0 0 20px !important; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nxt-cobalt); }
.px-hero .sd-hero h1 { max-width: none; }
.sd-hero-sub { max-width: 46ch; margin: 0 0 32px !important; font-size: 17px; line-height: 1.6; color: var(--nxt-graphite); }
.sd-langs { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 999px; background: var(--nxt-ink-50); box-shadow: inset 0 0 0 1px var(--border-default); }
.sd-langs button { padding: 5px 14px; border: 0; border-radius: 999px; background: none; color: var(--nxt-graphite); font: inherit; font-size: 13px; cursor: pointer; }
.sd-langs button[aria-pressed="true"] { background: var(--nxt-midnight); color: #fff; }
.sd-langs button:focus-visible { outline: 2px solid var(--nxt-cobalt); outline-offset: 2px; }
.sd-player { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--nxt-midnight); box-shadow: 0 30px 70px rgba(16, 22, 77, 0.14); }
.sd-player[hidden] { display: none !important; }
.sd-player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.sd-play { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(16, 22, 77, 0.88); color: #fff; font-size: 14px; font-weight: 500; transition: background-color 200ms var(--ease-out); }
.sd-play i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.sd-play i::after { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--nxt-cobalt); }
.sd-player:hover .sd-play, .sd-player:focus-visible .sd-play { background: var(--nxt-cobalt); }

.sd-lead { max-width: 62ch; margin: 0 0 40px !important; }

/* ---------- 2 Skills and Tools collage ----------
   One fixed collage, switched between Skills and Tools by a radio pair.
   Every tile keeps its slot; on hover, keyboard focus or tap (.is-open)
   the tile lifts out of its slot, turns brand blue and shows its
   description over its neighbours, so the page never gets longer. */
.sk { position: relative; }
.sk-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sk-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.sk-switch label { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #F5F7FD; box-shadow: inset 0 0 0 1px #E6E9F5; font-size: 14px; font-weight: 500; color: var(--nxt-midnight); cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.sk-switch label b { padding: 2px 9px; border-radius: 999px; background: rgba(32, 39, 225, 0.1); font-size: 12px; font-weight: 600; color: var(--nxt-cobalt); }
.sk-switch label:hover { background: #ECF0FC; }
#sk-v-skills:checked ~ .sk-switch label[for="sk-v-skills"],
#sk-v-tools:checked ~ .sk-switch label[for="sk-v-tools"] { background: var(--nxt-midnight); color: #fff; box-shadow: none; }
#sk-v-skills:checked ~ .sk-switch label[for="sk-v-skills"] b { background: rgba(255, 255, 255, 0.16); color: #fff; }
#sk-v-skills:focus-visible ~ .sk-switch label[for="sk-v-skills"],
#sk-v-tools:focus-visible ~ .sk-switch label[for="sk-v-tools"] { outline: 2px solid var(--nxt-cobalt); outline-offset: 3px; }
.sk-hint { margin: 0 0 0 auto !important; font-size: 13px !important; color: var(--nxt-gray); }
.sk-panel-tools { display: none; }
#sk-v-tools:checked ~ .sk-panel-skills { display: none; }
#sk-v-tools:checked ~ .sk-panel-tools { display: block; }
.sk-intro { max-width: 72ch; margin: 0 0 24px !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--nxt-graphite); }
.sk-intro strong { font-weight: 500; color: var(--nxt-midnight); }
.sk-band { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px !important; font-size: 12px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7090; }
.sk-band span { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; text-transform: none; color: var(--nxt-cobalt); }

/* the process: one column per step, a rule joining the step heads */
.sk-flow { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 12px; margin: 0 0 36px; padding: 0; }
.sk-col { position: relative; min-width: 0; }
.sk-step { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; padding: 0 0 10px; border-bottom: 2px solid #CFDAFB; font-size: 13px !important; font-weight: 600; line-height: 1.3 !important; color: var(--nxt-midnight); }
.sk-step i { font-style: normal; font-size: 11px; letter-spacing: 0.04em; color: var(--nxt-cobalt); }
.sk-col:not(:last-child) .sk-step::after { content: ""; position: absolute; right: -12px; bottom: -2px; width: 12px; border-bottom: 2px solid #CFDAFB; }
.sk-col ul, .sk-around { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk-around { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.sk-col li, .sk-around li { position: relative; height: 60px; }
.sk-around li { height: 74px; }

/* the tile */
.sk-tile { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; min-height: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 14px; background: #F5F7FD; box-shadow: inset 0 0 0 1px #E6E9F5; font: inherit; text-align: left; color: var(--nxt-midnight); cursor: pointer;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out); }
.sk-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.sk-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7090; }
.sk-desc { display: none; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.sk-tile-tool { background: #fff; box-shadow: inset 0 0 0 1.5px #CFDAFB; }
/* popped: on hover (mouse), keyboard focus or tap (.is-open) */
.sk-tile.is-open, .sk-tile:focus-visible {
  z-index: 10; width: max(100%, 260px); justify-content: flex-start; padding: 14px 16px 16px; transform: translateY(-6px) scale(1.02);
  background: linear-gradient(155deg, #2A3AF5, #10138F); color: #fff;
  box-shadow: 0 0 0 4px rgba(32, 39, 225, 0.14), 0 24px 44px -18px rgba(16, 19, 143, 0.65); }
.sk-tile-tool.is-open, .sk-tile-tool:focus-visible { background: var(--nxt-midnight); box-shadow: 0 0 0 4px rgba(16, 22, 77, 0.12), 0 24px 44px -18px rgba(16, 22, 77, 0.6); }
:is(.sk-tile.is-open, .sk-tile:focus-visible) .sk-name { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
:is(.sk-tile.is-open, .sk-tile:focus-visible) .sk-desc { display: block; }
:is(.sk-tile.is-open, .sk-tile:focus-visible) .sk-tag { color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) {
  .sk-tile:hover {
    z-index: 10; width: max(100%, 260px); justify-content: flex-start; padding: 14px 16px 16px; transform: translateY(-6px) scale(1.02);
    background: linear-gradient(155deg, #2A3AF5, #10138F); color: #fff;
    box-shadow: 0 0 0 4px rgba(32, 39, 225, 0.14), 0 24px 44px -18px rgba(16, 19, 143, 0.65); }
  .sk-tile-tool:hover { background: var(--nxt-midnight); box-shadow: 0 0 0 4px rgba(16, 22, 77, 0.12), 0 24px 44px -18px rgba(16, 22, 77, 0.6); }
  .sk-tile:hover .sk-name { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
  .sk-tile:hover .sk-desc { display: block; }
  .sk-tile:hover .sk-tag { color: rgba(255, 255, 255, 0.7); }
}
.sk-tile:focus-visible { outline: none; }
/* tiles near the right edge open towards the left */
.sk-flow .sk-col-5 .sk-tile, .sk-flow .sk-col-6 .sk-tile,
.sk-around li:nth-child(6n) .sk-tile, .sk-around li:nth-child(6n-1) .sk-tile { left: auto; right: 0; }
.sk-warn { max-width: 80ch; margin: 0 !important; padding: 12px 14px; border-radius: 12px; background: #F5F7FD; box-shadow: inset 0 0 0 1px #E6E9F5; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--nxt-graphite); }

/* entrance: tiles settle into place, one after another, when the collage
   scrolls in (site.js adds .is-visible to .reveal). backwards fill only,
   so the hover lift is never held by the animation. */
@keyframes sk-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
.js .sk .reveal.is-visible .sk-tile { animation: sk-in 520ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 32ms); }
@media (prefers-reduced-motion: reduce) {
  .sk-tile { transition: none; }
  .js .sk .reveal.is-visible .sk-tile { animation: none; }
  .sk-tile.is-open, .sk-tile:focus-visible, .sk-tile:hover { transform: none !important; }
}

/* ---------- 3 Skill Designer ---------- */
/* px.css drops the top rule of the first item in a list right after .px-head
   (meant for one-column lists); these are multi-column rows, so keep it. */
body .px .px-head + :is(.sd-points, .sd-life) > :first-child { border-top: 1px solid var(--border-default) !important; padding-top: 22px; }
.sd-life { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; margin-bottom: 8px; }
.sd-note-line { margin: 8px 0 48px !important; font-size: 15px; color: var(--nxt-midnight); }
.sd-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin: 0 0 8px; counter-reset: c; }
.sd-checks > div { counter-increment: c; padding: 16px 0 20px; border-top: 1px solid var(--border-subtle); }
.sd-checks dt { font-size: 16px; font-weight: 500; color: var(--nxt-midnight); }
.sd-checks dt::before { content: "0" counter(c) "  "; white-space: pre; font-size: 13px; letter-spacing: 0.04em; color: var(--nxt-cobalt); }
.sd-checks dd { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--nxt-graphite); }
.sd-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 8px 0 24px !important; font-size: 14px; color: var(--nxt-gray); }
.sd-verdict span:first-child { font-weight: 500; color: var(--nxt-midnight); }
.sd-verdict i { padding: 3px 12px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 600; }
.sd-verdict .is-ready { background: #E8F7EE; color: #1E7B45; }
.sd-verdict .is-attn { background: #FFF1D6; color: #8A5A00; }
.sd-verdict .is-not { background: #FDEEEE; color: #A23131; }

/* ---------- 4 Choice and governance ---------- */
.sd-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 0 0 56px; padding: 0; }
.sd-points li { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 28px; border-top: 1px solid var(--border-default); }
.sd-points b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--nxt-midnight); }
.sd-points span { font-size: 15px; line-height: 1.6; color: var(--nxt-graphite); }
.sd-points-3 { margin-top: -8px; }
.sd-gd { margin-bottom: 48px; }
.sd-gd .sd-gd-gov { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sd-gd .nx-chip { flex-direction: row; align-items: center; gap: 8px; }
.sd-gd-row { margin-bottom: 0 !important; }
.sd-gd-invoke { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 12px; font-size: 12px; font-weight: 500; color: var(--nxt-cobalt); }
.sd-gd-invoke .nx-link.is-down { height: 22px; margin: 0; }
.sd-tags { margin: 0 0 16px !important; }
.sd-dm { margin: 0 0 24px; }
.sd-dm-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sd-dm-flow > div { position: relative; }
.sd-dm-flow > div:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -18px; width: 14px; border-top: 1.5px solid var(--nxt-cobalt); }
.sd-dm-flow > div.is-out { box-shadow: inset 0 0 0 2px var(--nxt-cobalt); }
.sd-step { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nxt-cobalt); }
.sd-dm-flow code { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: #F2F5FF; font-size: 12.5px; color: var(--nxt-midnight); overflow-wrap: anywhere; }

/* ---------- 5 Band and close ---------- */
.sd-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.sd-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sd-legal { margin-left: auto !important; margin-right: auto !important; text-align: center; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .sd-hero { grid-template-columns: 1fr; gap: 40px; }
  .sd-life, .sd-dm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-dm-flow > div:nth-child(2n)::after { display: none; }
  .sd-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-gd .sd-gd-gov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sd-points { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sd-life, .sd-dm-flow, .sd-checks { grid-template-columns: 1fr; }
  .sd-dm-flow > div::after { display: none; }
  .nx-panel.sd-gd, .nx-panel.sd-dm { padding: 20px 14px; }
  .sd-play { right: 12px; bottom: 12px; }
}

/* ---------- Collage on smaller screens: 3 columns, then 2; tiles in the
   right-hand column open towards the left ---------- */
@media (max-width: 1100px) {
  .sk-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
  .sk-col:not(:last-child) .sk-step::after { display: none; }
  .sk-around { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-flow .sk-col .sk-tile, .sk-around li .sk-tile { left: 0; right: auto; }
  .sk-flow .sk-col:nth-child(3n) .sk-tile, .sk-around li:nth-child(3n) .sk-tile { left: auto; right: 0; }
}
@media (max-width: 720px) {
  .sk-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-around { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-flow .sk-col .sk-tile, .sk-around li .sk-tile { left: 0; right: auto; }
  .sk-flow .sk-col:nth-child(2n) .sk-tile, .sk-around li:nth-child(2n) .sk-tile { left: auto; right: 0; }
  .sk-tile.is-open, .sk-tile:focus-visible { width: max(100%, min(260px, calc(100vw - 48px))); }
  .sk-hint { margin-left: 0 !important; width: 100%; }
  .sk-switch label { padding: 9px 14px; font-size: 13.5px; }
}

/* px.css forces 16px / 1.7 on every p and li in .px (body :is(.px) :is(p, li)
   :not(...), !important); the collage's small text needs more specificity. */
body .px .sk p.sk-intro { font-size: 15px !important; line-height: 1.6 !important; }
body .px .sk p.sk-band { font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; }
body .px .sk p.sk-step { font-size: 13px !important; line-height: 1.3 !important; }
body .px .sk p.sk-hint { font-size: 13px !important; line-height: 1.4 !important; }
body .px .sk p.sk-warn { font-size: 13.5px !important; line-height: 1.55 !important; }

/* ======================================================================
   Collage, refined (10 Nov 2026): the collage sits on a soft panel with a
   faint dot grid; numbered step heads joined by a flow line; crisp white
   tiles with a reference number. .sk-dark switches the whole collage to
   the home page's dark glass look.
   ====================================================================== */
.sk { padding: 28px 28px 24px; border-radius: 28px; background:
  radial-gradient(circle, #DCE3F7 1px, transparent 1.2px) 0 0 / 18px 18px, linear-gradient(180deg, #F7F9FF, #F2F5FE);
  box-shadow: inset 0 0 0 1px #E6E9F5; }
.sk-flow, .sk-col ul, .sk-around { counter-reset: none; }
.sk-col { counter-reset: t; }
.sk-col li, .sk-around li { counter-increment: t; }
.sk-around { counter-reset: t; }

/* step heads: number in a ring, name, count; a flow line with arrowheads */
body .px .sk p.sk-step { display: flex; align-items: center; gap: 8px; margin: 0 0 14px !important; padding: 0 0 12px; border-bottom: 1.5px solid #CFDAFB; font-size: 13px !important; }
.sk-step i { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #2027E1; font-size: 10.5px !important; font-weight: 600; font-style: normal; color: #2027E1 !important; letter-spacing: 0; }
.sk-step span { flex: 1; min-width: 0; font-weight: 600; color: #10164D; }
.sk-step b { font-size: 11.5px; font-weight: 600; color: #8C95BF; }
.sk-col:not(:last-child) .sk-step::after { right: -12px; bottom: -1.5px; width: 12px; border-bottom: 1.5px solid #CFDAFB; }
.sk-col:not(:last-child) .sk-step::before { content: ""; position: absolute; right: -9px; bottom: -5px; width: 6px; height: 6px; border-top: 1.5px solid #9DAAE6; border-right: 1.5px solid #9DAAE6; transform: rotate(45deg); z-index: 1; }

/* the tile: white, fine edge, reference number, a calm lift */
.sk-tile { background: #fff; box-shadow: inset 0 0 0 1px #E1E6F5, 0 1px 2px rgba(16, 22, 77, .04); padding: 10px 30px 10px 12px; }
.sk-col li .sk-tile::after, .sk-around li .sk-tile::after { position: absolute; right: 10px; top: 9px; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: #A3ABCF; }
.sk-col li .sk-tile::after { content: counter(t, decimal-leading-zero); }
.sk-around li .sk-tile::after { content: counter(t, decimal-leading-zero); }
.sk-tile-tool { background: #fff; box-shadow: inset 0 0 0 1px #E1E6F5, 0 1px 2px rgba(16, 22, 77, .04); border-left: 0; }
.sk-tile-tool .sk-name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 1.5px; background: #10164D; transform: rotate(45deg); vertical-align: middle; }
@media (hover: hover) {
  .sk-tile:hover { background: linear-gradient(160deg, #2433EE, #10138F); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 50px -20px rgba(16, 19, 143, .55); }
  .sk-tile:hover::after { color: rgba(255, 255, 255, .55) !important; }
  .sk-tile-tool:hover .sk-name::before { background: #4A3EF0; }
}
.sk-tile.is-open, .sk-tile:focus-visible { background: linear-gradient(160deg, #2433EE, #10138F); }
.sk-tile.is-open::after, .sk-tile:focus-visible::after { color: rgba(255, 255, 255, .55) !important; }
.sk-desc { margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .16); }
.sk-switch label { background: #fff; }

/* ---------- B: dark glass ---------- */
.sk.sk-dark { background:
  radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 18px 18px,
  radial-gradient(120% 80% at 20% 0%, #1D2A9E 0%, #10164D 55%, #0B0F3A 100%);
  box-shadow: 0 40px 80px -40px rgba(11, 15, 58, .7); }
.sk-dark .sk-switch label { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.sk-dark #sk-v-skills:checked ~ .sk-switch label[for="sk-v-skills"], .sk-dark #sk-v-tools:checked ~ .sk-switch label[for="sk-v-tools"] { background: #fff; color: #10164D; }
.sk-dark #sk-v-skills:checked ~ .sk-switch label[for="sk-v-skills"] b { background: rgba(32, 39, 225, .12); color: #2027E1; }
.sk-dark .sk-switch label b { background: rgba(255, 255, 255, .14); color: #9FDFFF; }
body .px .sk-dark p.sk-hint, body .px .sk-dark p.sk-intro, body .px .sk-dark p.sk-warn { color: rgba(255, 255, 255, .7); }
.sk-dark .sk-intro strong { color: #fff; }
.sk-dark .sk-band { color: rgba(255, 255, 255, .55); }
.sk-dark .sk-band span { color: #FFFFFF; }
body .px .sk-dark p.sk-step { border-bottom-color: rgba(255, 255, 255, .16); }
.sk-dark .sk-col:not(:last-child) .sk-step::after { border-bottom-color: rgba(255, 255, 255, .16); }
.sk-dark .sk-col:not(:last-child) .sk-step::before { border-color: rgba(255, 255, 255, .6); }
.sk-dark .sk-step i { background: transparent; box-shadow: inset 0 0 0 1.5px #FFFFFF; color: #FFFFFF !important; }
.sk-dark .sk-step span { color: #fff; }
.sk-dark .sk-step b { color: rgba(255, 255, 255, .45); }
.sk-dark .sk-tile, .sk-dark .sk-tile-tool { background: rgba(255, 255, 255, .055); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .92); }
.sk-dark .sk-tag { color: rgba(255, 255, 255, .5); }
.sk-dark .sk-col li .sk-tile::after, .sk-dark .sk-around li .sk-tile::after { color: rgba(255, 255, 255, .35); }
.sk-dark .sk-tile-tool .sk-name::before { background: #4A3EF0; }
@media (hover: hover) {
  .sk-dark .sk-tile:hover { background: linear-gradient(160deg, rgba(42, 58, 245, .95), rgba(16, 19, 143, .95)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 28px rgba(32, 39, 225, .55), 0 26px 50px -20px rgba(0, 0, 0, .6); }
}
.sk-dark .sk-tile.is-open, .sk-dark .sk-tile:focus-visible { background: linear-gradient(160deg, rgba(42, 58, 245, .95), rgba(16, 19, 143, .95)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 28px rgba(32, 39, 225, .55), 0 26px 50px -20px rgba(0, 0, 0, .6); }
.sk-dark .sk-warn { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* ======================================================================
   Skills globe (owner-approved, 10 Nov 2026): a glass hexagon ball above
   the tile collage. Dark, on NXT Current (calm). A true hexagon tiling
   (Goldberg ball, 92 cells) built in site.js [data-globe]; Skills read
   from the collage data below, so the two never disagree. No CSS filters
   on 3D elements (they flatten and clip the tiles). Names only on tiles
   facing the viewer; never on the curved edge.
   ====================================================================== */
.gb { position: relative; isolation: isolate; overflow: hidden; margin: 8px 0 56px; padding: 40px 24px; border-radius: 28px; background: #0B0F3A; color: #fff; }
.gb > .px-field { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.gb-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 44px 48px;
  background: linear-gradient(160deg, rgba(74, 62, 240, .06), rgba(74, 62, 240, .02) 50%, rgba(74, 62, 240, .06));
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px); }
.gb-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gb-frame polygon { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gb-frame .f2 { stroke: rgba(255, 255, 255, .14); }
.gb-frame .br { fill: none; stroke: #FFFFFF; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.gb-frame .tk, .gb-frame .tks { fill: none; stroke: #FFFFFF; stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .6; }
.gb-frame .tks { stroke-dasharray: 4 6; }
.gb-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 24px; align-items: center; }
.gb-k { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.gb-h { display: block; font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.gb-sub { display: block; margin-top: 14px; max-width: 44ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.gb-card { position: relative; display: block; margin-top: 32px; padding: 22px 24px 24px; border-radius: 20px; max-width: 400px; min-height: 172px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(74, 62, 240, .05)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -30px rgba(0, 0, 0, .5); }
.gb-card-ic { display: inline-block; width: 28px; height: 28px; color: #FFFFFF; }
.gb-card-ic svg { width: 28px; height: 28px; }
.gb-card-ic :is(path, circle, rect) { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gb-card-k { display: block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.gb-card-n { display: block; margin: 4px 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.gb-card-d { display: block; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.gb-card.swap > * { animation: gb-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes gb-in { from { opacity: 0; transform: translateY(5px); } }

.gb-fit { position: relative; width: 600px; height: 620px; }
.gb-stage { position: absolute; left: 0; top: 0; width: 600px; height: 620px; transform-origin: 0 0; cursor: grab; touch-action: pan-y; }
.gb-stage.drag { cursor: grabbing; }
.gb-halo { position: absolute; left: 50%; top: 290px; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 62, 240, .12) 0%, rgba(74, 62, 240, .05) 47%, rgba(255, 255, 255, 0) 52%); }
.gb-scene { position: absolute; left: 50%; top: 290px; width: 0; height: 0; perspective: 1500px; }
.gb-sphere { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.gb-t { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.gb-t > * { opacity: var(--o, 1); }
.gb-t.back { pointer-events: none; }
.gb-t.back .hx > * { visibility: hidden; }
.gb-t .hx { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.gb-t .hx::before { content: ""; position: absolute; inset: 0; clip-path: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .32)); }
.gb-t .hx::after { content: ""; position: absolute; inset: 1px; clip-path: inherit; background: linear-gradient(170deg, rgba(255, 255, 255, .10), rgba(74, 62, 240, .02) 55%, rgba(74, 62, 240, .05)); }
.gb-t .hx > * { position: relative; z-index: 1; }
.gb-t.deco .hx::before { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .14)); }
.gb-t.deco .hx::after { background: rgba(74, 62, 240, .015); }
.gb-t.gs .hx { padding: 0 14px; cursor: pointer; }
.gb-t.gs i { display: block; width: 20px; height: 20px; color: #FFFFFF; transition: opacity .35s; }
.gb-t.gs i svg { width: 20px; height: 20px; }
.gb-t.gs i :is(path, circle, rect) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gb-t.gs b { margin-top: 4px; font-size: 9.6px; font-weight: 500; line-height: 1.25; letter-spacing: .005em; color: rgba(255, 255, 255, .95); transition: opacity .35s; }
.gb-t.gs.edge b, .gb-t.gs.rim i { opacity: 0; }
.gb-t.gs.on { z-index: 5; }
.gb-t.gs.on .hx { transform: translate(-50%, -50%) translateZ(4px); }
.gb-t.gs.on .hx::before { background: linear-gradient(160deg, #FFFFFF, #FFFFFF 45%, #4A3EF0); }
.gb-t.gs.on .hx::after { background: linear-gradient(165deg, rgba(74, 62, 240, .82), rgba(24, 36, 190, .82)); }
.gb-t.gs.on i, .gb-t.gs.on b { color: #fff; }
.gb-t.gs.on b { font-weight: 600; }
.gb-t.gs .glow { position: absolute; left: 0; top: 0; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity .35s;
  background: radial-gradient(closest-side, rgba(74, 62, 240, .45), rgba(74, 62, 240, 0)); pointer-events: none; }
.gb-t.gs.on .glow { opacity: var(--o, 1); }
.gb-wire { position: absolute; left: 20px; top: 10px; width: 560px; height: 560px; pointer-events: none; }
.gb-wire .rim { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1; }
.gb-wire :is(.lat, .lon) { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.gb-base { position: absolute; left: 50%; top: 575px; width: 360px; height: 34px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, 0)); }
@media (max-width: 1100px) {
  .gb-grid { grid-template-columns: 1fr; }
  .gb-fit { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 620; margin: 0 auto; }
  .gb-card { max-width: none; }
}
@media (max-width: 720px) { .gb { padding: 16px 8px; border-radius: 20px; } .gb-in { padding: 28px 20px; } .gb-h { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .gb-t .hx, .gb-t.gs b, .gb-t.gs i, .gb-card.swap > * { transition: none; animation: none; } }

/* Plain blue section (owner, 10 Nov 2026): no frame, brackets or chamfered glass panel */
.gb { padding: 56px 64px; }
.gb-in { max-width: none; padding: 0; background: none; clip-path: none; }
@media (max-width: 720px) { .gb { padding: 32px 20px; } }


/* ======================================================================
   Compact collage (owner, 10 Nov 2026): smaller type, shorter tiles,
   tighter gaps; "Around the process" grouped in three columns, each
   group named once, tiles two across.
   ====================================================================== */
.sk { padding: 22px 22px 18px; }
.sk-switch { margin-bottom: 16px; }
.sk-switch label { padding: 8px 14px; font-size: 13px; gap: 8px; }
.sk-switch label b { padding: 1px 8px; font-size: 11px; }
body .px .sk p.sk-intro { margin-bottom: 18px !important; font-size: 14px !important; line-height: 1.55 !important; }
body .px .sk p.sk-band { margin-bottom: 10px !important; font-size: 11px !important; }
.sk-flow { gap: 0 10px; margin-bottom: 22px; }
body .px .sk p.sk-step { margin: 0 0 8px !important; padding: 0 0 8px; gap: 7px; font-size: 12px !important; }
.sk-step i { width: 20px; height: 20px; font-size: 9.5px !important; }
.sk-col:not(:last-child) .sk-step::after { right: -10px; width: 10px; }
.sk-col:not(:last-child) .sk-step::before { right: -8px; }
.sk-col ul { gap: 6px; }
.sk-col li { height: 44px; }
.sk-tile { padding: 6px 24px 6px 10px; border-radius: 10px; gap: 3px; }
.sk-name { font-size: 12.5px; line-height: 1.25; }
.sk-col li .sk-tile::after { right: 8px; top: 6px; font-size: 9px; }
:is(.sk-tile.is-open, .sk-tile:focus-visible) .sk-name { font-size: 13.5px; }
@media (hover: hover) { .sk-tile:hover .sk-name { font-size: 13.5px; } .sk-tile:hover { width: max(100%, 240px); padding: 12px 14px 14px; } }
.sk-tile.is-open, .sk-tile:focus-visible { width: max(100%, 240px); padding: 12px 14px 14px; }
.sk-desc { font-size: 12.5px; line-height: 1.5; }
/* around the process: three group columns, tiles two across */
.sk-flow-around { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin-bottom: 4px; }
.sk-flow-around .sk-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-flow-around .sk-col .sk-step::after, .sk-flow-around .sk-col .sk-step::before { display: none; }
.sk-flow-around .sk-col li:nth-child(2n) .sk-tile { left: auto; right: 0; }
.sk-flow-around .sk-col li:nth-child(2n+1) .sk-tile { left: 0; right: auto; }
@media (max-width: 1100px) { .sk-flow-around { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sk-flow-around .sk-col ul { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .sk-flow-around { grid-template-columns: 1fr; gap: 16px; }
  .sk-flow-around .sk-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   Open shell (owner, 10 Nov 2026: "the shape is not a round ball"): a
   hologram-like dome of outlined hexagons, open at the bottom with an
   irregular edge (site.js leaves cells out). No round rim line and no
   solid disc behind it; a soft inner glow and a light plate below.
   ====================================================================== */
.gb-wire { display: none; }
.gb-halo { top: 250px; background: radial-gradient(closest-side, rgba(74, 62, 240, .16), rgba(74, 62, 240, .06) 55%, rgba(74, 62, 240, 0)); }
.gb-t .hx::before { background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .6)); }
.gb-t .hx::after { inset: 1.5px; background: linear-gradient(170deg, rgba(74, 62, 240, .14), rgba(32, 39, 225, .06) 60%, rgba(32, 39, 225, .1)); }
.gb-t.deco .hx::before { background: linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .35)); }
.gb-t.deco .hx::after { background: rgba(32, 39, 225, .03); }
.gb-t.back > * { opacity: .1; }
.gb-base { top: 448px; width: 440px; height: 46px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, 0)); }
.gb-fit { height: 520px; }
.gb-stage { height: 520px; }
@media (max-width: 1100px) { .gb-fit { aspect-ratio: 600 / 520; } }

/* Hologram style (owner reference, 10 Nov 2026), in brand colours: crisp
   glowing cyan outlines on dark see-through cells, dotted fill on some
   empty cells, the far side faintly visible through the front, a few
   floating specks, and a projection plate of light rings below. */
.gb-t .hx::before { background: linear-gradient(160deg, #FFFFFF, #FFFFFF 50%, #4A3EF0); opacity: .9; }
.gb-t .hx::after { inset: 2px; background: linear-gradient(170deg, rgba(74, 62, 240, .22), rgba(12, 18, 90, .55) 55%, rgba(12, 18, 90, .7)); }
.gb-t.deco .hx::before { background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .35) 50%, rgba(74, 62, 240, .5)); opacity: 1; }
.gb-t.deco .hx::after { background: rgba(12, 18, 90, .35); }
.gb-t.deco:nth-child(3n) .hx::after { background: radial-gradient(circle, rgba(255, 255, 255, .45) 1px, transparent 1.6px) 0 0 / 8px 8px, rgba(12, 18, 90, .35); }
.gb-t.gs i { color: #FFFFFF; }
.gb-t.back > * { opacity: .16; }
.gb-t.back .hx::after { background: none; }
.gb-t.gs.on .hx::before { background: linear-gradient(160deg, #FFFFFF, #FFFFFF 45%, #FFFFFF); opacity: 1; }
.gb-t.gs.on .hx::after { background: linear-gradient(165deg, rgba(74, 62, 240, .92), rgba(32, 39, 225, .92)); }
.gb-halo { top: 260px; background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(74, 62, 240, .08) 55%, rgba(74, 62, 240, 0)); }
.gb-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 58%, rgba(255, 255, 255, .5) 0 1px, transparent 2px),
    radial-gradient(circle at 8% 64%, rgba(255, 255, 255, .5) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .45) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, .5) 0 1px, transparent 2px),
    radial-gradient(circle at 6% 44%, rgba(255, 255, 255, .35) 0 1px, transparent 2px); }
.gb-base { top: 452px; width: 500px; height: 70px;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 35%, rgba(255, 255, 255, 0) 60%),
    repeating-radial-gradient(closest-side, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .35) 14px 15px, rgba(255, 255, 255, 0) 15px 24px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
/* an even outline all round: the inner fill is the same shape, scaled in */
.gb-t .hx::after { inset: 0; transform: scale(.955); }
/* dark cells, so only the thin cyan outline glows */
.gb-t .hx::after { transform: scale(.965); background: linear-gradient(170deg, rgba(30, 50, 170, .96), rgba(14, 19, 100, .97) 60%, rgba(11, 15, 80, .97)); }
.gb-t.deco .hx::after { background: rgba(13, 18, 92, .96); }
.gb-t.deco:nth-child(3n) .hx::after { background: radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1.6px) 0 0 / 8px 8px, rgba(13, 18, 92, .96); }
.gb-t.deco .hx::before { background: rgba(255, 255, 255, .55); }
.gb-t.back > * { opacity: .22; }
.gb-t.back .hx::after { background: rgba(11, 15, 80, .9); }
/* touching cells (owner reference): a thinner line, since neighbours share an edge */
.gb-t .hx::after { transform: scale(.982); }
/* joined cells: no seam, neighbours share one line */
.gb-t .hx::after { transform: scale(.986); }
/* empty cells (no Skill): faint and see-through, so the far side and the
   blue behind show through; only the Skill cells are solid (owner, 10 Nov 2026) */
.gb-t.deco .hx::before { background: rgba(255, 255, 255, .2); }
.gb-t.deco .hx::after { background: rgba(13, 18, 92, .55); }
.gb-t.deco:nth-child(3n) .hx::after { background: radial-gradient(circle, rgba(255, 255, 255, .3) 1px, transparent 1.6px) 0 0 / 8px 8px, rgba(13, 18, 92, .55); }
/* the highlighted Skill shows its name once it is as far forward as it can turn */
.gb-t.gs.on.reach b { opacity: 1; }
/* highlight in the brand cobalt, the "Govern." blue (owner, 10 Nov 2026) */
.gb-t.gs.on .hx::after { background: #2027E1; }
/* brand colours only (owner, 10 Nov 2026): no cyan. Kickers on the dark
   section are white at 70%, lines white, glows Ultramarine. */
.gb-k, .gb-card-k { color: rgba(255, 255, 255, .7); }